/* ==========================================================
   HANG WITH THE WANGS  ·  WangsOS 2000
   Y2K desktop experience
   ========================================================== */

:root{
  --gray:#d4d0c8;
  --gray-dark:#808080;
  --gray-darker:#404040;
  --title-a:#0a246a;
  --title-b:#5f8fd1;
  --desktop:#0e7c6e;
  --red:#c2402a;
  --gold:#dd9c2e;
  --green:#24513b;
  --blue:#1f3350;
  --paper:#f8f3e7;
  --ink:#23201a;
  --font:Tahoma, Verdana, Geneva, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  font-size:13px;
  color:var(--ink);
  background:var(--desktop);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button{font-family:var(--font);font-size:13px;cursor:pointer}
[hidden]{display:none !important}
img{max-width:100%;display:block}

/* ---------- bevels ---------- */
.bevel-out{border:2px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;background:var(--gray)}
.bevel-in{border:2px solid;border-color:var(--gray-darker) #fff #fff var(--gray-darker)}

.btn{
  background:var(--gray);
  border:2px solid;
  border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
  padding:5px 16px;
  color:var(--ink);
}
.btn:active{border-color:var(--gray-darker) #fff #fff var(--gray-darker)}
.btn:focus-visible{outline:1px dotted var(--ink);outline-offset:-5px}
.btn[disabled]{color:var(--gray-dark);text-shadow:1px 1px 0 #fff;cursor:default}
.btn-primary{font-weight:bold;box-shadow:0 0 0 1px var(--ink)}
.btn-sm{padding:2px 10px;font-size:12px}
.btn-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.linklike{background:none;border:none;padding:0;color:#0a246a;text-decoration:underline;font-size:inherit}
.linklike:hover{color:var(--red)}
.doc-body a{color:#0a246a;text-decoration:underline}
.doc-body a:hover{color:var(--red)}

/* ==========================================================
   BOOT SCREEN
   ========================================================== */
#boot{
  position:fixed;inset:0;z-index:1000;
  background:#050608;
  color:#c9d6c9;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.boot-inner{width:min(560px,88vw)}
#boot-text{
  font:14px/1.7 "Courier New",monospace;
  white-space:pre-wrap;
  min-height:200px;
}
#boot-text .ok{color:#7fd48a}
.boot-bar{
  margin-top:18px;height:18px;
  border:1px solid #c9d6c9;padding:2px;
}
.boot-bar.small{border-color:#888;margin:10px 0}
#boot-fill{height:100%;width:0;background:repeating-linear-gradient(90deg,#7fd48a 0 10px,transparent 10px 13px);transition:width .3s steps(6)}
.stub-fill{height:100%;width:80%;background:repeating-linear-gradient(90deg,var(--gold) 0 10px,transparent 10px 13px)}
.boot-skip{margin-top:26px;font-size:11px;color:#5d6b5d;text-align:center}
#boot.boot-done{opacity:0;pointer-events:none;transition:opacity .45s}

/* ==========================================================
   SHUTDOWN
   ========================================================== */
#shutdown{
  position:fixed;inset:0;z-index:1001;background:#050608;color:#e8e3d5;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.shutdown-big{font-size:clamp(20px,4vw,34px);font-weight:bold;color:#f7cd60;margin-bottom:14px}
.shutdown-small{color:#9aa39a;margin-bottom:30px}

/* ==========================================================
   DESKTOP
   ========================================================== */
#desktop{
  position:fixed;inset:0 0 34px 0;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(255,255,255,.05), transparent 45%),
    radial-gradient(circle at 82% 75%, rgba(0,0,0,.14), transparent 50%),
    repeating-conic-gradient(from 45deg, rgba(255,255,255,.022) 0deg 90deg, transparent 90deg 180deg) 0 0/26px 26px,
    linear-gradient(160deg,#128273 0%, #0e7c6e 45%, #0a685c 100%);
}
#desktop::before{
  content:"HANG WITH THE WANGS";
  position:absolute;top:50%;left:50%;transform:translate(-50%,-58%);
  font-size:clamp(28px,6vw,72px);font-weight:bold;letter-spacing:.06em;
  color:rgba(255,255,255,.07);white-space:nowrap;pointer-events:none;
}
#desktop::after{
  content:"Eat well. Explore more. Play often.";
  position:absolute;top:50%;left:50%;transform:translate(-50%,40%);
  font-size:clamp(12px,2vw,20px);letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.09);white-space:nowrap;pointer-events:none;
}
#watermark{
  position:absolute;right:12px;bottom:8px;
  color:rgba(255,255,255,.4);font-size:11px;text-align:right;line-height:1.5;
  pointer-events:none;
}

/* ---------- desktop icons ---------- */
#icons{
  position:absolute;top:14px;left:12px;bottom:10px;
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,minmax(86px,auto));
  gap:6px 10px;align-content:start;
}
.icon{
  width:96px;background:none;border:1px solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:6px 2px;
  text-decoration:none;cursor:pointer;
}
.icon-art{position:relative;width:46px;height:46px;filter:drop-shadow(2px 3px 2px rgba(0,0,0,.35))}
.icon-art svg{width:46px;height:46px}
.icon-badge{
  position:absolute;right:-7px;bottom:-5px;font-size:17px;
  filter:drop-shadow(1px 1px 1px rgba(0,0,0,.4));
}
.icon-label{
  color:#fff;font-size:12px;line-height:1.25;text-align:center;
  text-shadow:1px 1px 2px rgba(0,0,0,.85);
  padding:1px 4px;
}
.icon:hover .icon-label{background:rgba(10,36,106,.45)}
.icon:focus-visible,.icon.selected{border:1px dotted rgba(255,255,255,.8)}
.icon.selected .icon-label{background:#0a246a}

/* ==========================================================
   WINDOWS
   ========================================================== */
.win{
  position:absolute;
  min-width:300px;
  background:var(--gray);
  border:2px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
  box-shadow:3px 4px 0 rgba(0,0,0,.28);
  display:flex;flex-direction:column;
  animation:win-in .14s ease-out;
}
@keyframes win-in{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.win.minimized{display:none}
.win.maxed{inset:0 !important;width:auto !important;height:auto !important}

.win-title{
  display:flex;align-items:center;gap:6px;
  padding:3px 4px 3px 6px;
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  color:#fff;font-weight:bold;font-size:12.5px;
  user-select:none;cursor:grab;
}
.win.inactive .win-title{background:linear-gradient(90deg,#6d6d6d,#b8b4ac);color:#e8e8e8}
.win-title:active{cursor:grabbing}
.win-title svg{width:16px;height:16px;flex:none}
.win-title .wt-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-btn{
  width:20px;height:18px;flex:none;
  background:var(--gray);
  border:1.5px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
  font-size:11px;font-weight:bold;line-height:1;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.win-btn:active{border-color:var(--gray-darker) #fff #fff var(--gray-darker)}
.win-btn.close{margin-left:2px}

.win-menu{
  display:flex;gap:14px;padding:3px 8px;font-size:12px;color:var(--ink);
  border-bottom:1px solid var(--gray-dark);user-select:none;
}
.win-menu span{opacity:.85}
.win-menu span u{text-decoration:underline}

.win-body{
  margin:2px;flex:1;overflow:auto;
  background:#fff;
  border:2px solid;border-color:var(--gray-darker) #fff #fff var(--gray-darker);
  padding:16px 18px;
}
.win-status{
  display:flex;gap:4px;padding:2px;font-size:11px;color:#444;
}
.win-status span{
  flex:1;padding:2px 8px;
  border:1.5px solid;border-color:var(--gray-dark) #fff #fff var(--gray-dark);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- window content ---------- */
.doc-body h1,.doc-body h2{font-family:Georgia,"Times New Roman",serif;color:var(--ink)}
.doc-body h2{font-size:24px;margin-bottom:10px}
.doc-body h3{margin:16px 0 8px;font-size:15px;color:var(--green)}
.doc-body h4{margin:16px 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--red)}
.doc-body p{line-height:1.65;margin-bottom:10px}
.doc-body ul,.doc-body ol{margin:0 0 12px 22px;line-height:1.65}
.brand-title{font-size:30px;margin-bottom:2px;color:var(--red)}
.brand-tag{font-size:12px;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);font-weight:bold;margin-bottom:14px}
.lead{font-size:15px}
.hint{font-size:12px;color:#6b6455;background:var(--paper);border:1px dashed var(--gold);padding:8px 10px;margin:12px 0}
.doc-meta{font-size:11.5px;color:#6b6455;margin-bottom:8px}
.badge{
  display:inline-block;background:var(--red);color:#fff;font-weight:bold;
  font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
  padding:2px 8px;margin-right:6px;
}
.badge-gold{background:var(--gold);color:var(--ink)}
.verdict{font-size:17px;font-weight:bold;color:var(--green)}
.article{max-width:560px}

/* folders */
.folder-blurb{line-height:1.6;margin-bottom:12px;color:#4b463c}
.files{display:flex;flex-direction:column;gap:2px}
.file{
  display:flex;align-items:center;gap:9px;
  background:none;border:1px solid transparent;
  padding:6px 8px;text-align:left;font-size:13px;color:var(--ink);
}
.file svg{width:22px;height:22px;flex:none}
.file:hover{background:#e6f0fa;border:1px solid #b8d4f0}
.file:active{background:#cfe4f7}
.file-tag{
  margin-left:auto;font-size:10.5px;font-weight:bold;color:#fff;
  background:var(--green);padding:2px 7px;flex:none;
}
.file-ghost{opacity:.5;font-style:italic}

/* tabs (About) */
.tab-row{display:flex;gap:2px;margin-bottom:-1px;position:relative;z-index:1}
.tab{
  background:var(--gray);border:1.5px solid;border-color:#fff var(--gray-dark) var(--gray) #fff;
  padding:5px 14px;font-size:12.5px;
}
.tab.active{background:#fff;font-weight:bold;padding-bottom:7px}
.tab-pane{display:none;border:1.5px solid;border-color:#fff var(--gray-dark) var(--gray-dark) #fff;background:#fff;padding:16px}
.tab-pane.active{display:block}
.tab-pane h3{margin-top:0}
.tab-pane p{line-height:1.65;margin-bottom:10px}

/* properties list */
.props{display:flex;flex-direction:column;gap:0;border:1px solid #d9d2c2;margin:10px 0}
.prop{display:flex;justify-content:space-between;gap:14px;padding:8px 12px;font-size:12.5px}
.prop:nth-child(odd){background:var(--paper)}
.prop span{color:#6b6455}
.prop b{text-align:right}

/* arizona */
.az-list{list-style:none;margin:14px 0 0 !important}
.az-list li{display:flex;align-items:baseline;gap:10px;padding:7px 4px;border-bottom:1px dotted #d9d2c2;line-height:1.5}
.az-note{font-size:11.5px;color:#8b8474}
.az-dim{color:#8b8474}

/* video embed */
.video-embed{margin:14px 0}
.video-embed iframe{
  display:block;margin:0 auto;
  width:325px;max-width:100%;height:578px;
  border:2px solid;border-color:var(--gray-darker) #fff #fff var(--gray-darker);
  background:#000;
}
.video-fallback{font-size:11.5px;color:#6b6455;text-align:center;margin-top:6px}

/* photo viewer */
.photo-body{display:flex;flex-direction:column;gap:0;height:100%}
.photo-body img{width:100%;height:auto;border:1px solid #888}
.photo-caption{font-size:11.5px;color:#555;padding:8px 2px 0;line-height:1.5}

/* newsletter */
.nl-form{display:flex;flex-direction:column;gap:12px;margin-top:14px;max-width:340px}
.nl-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:bold}
.opt{font-weight:normal;color:#8b8474}
input[type=text],input[type=email],textarea,select{
  font-family:var(--font);font-size:13px;padding:6px 8px;
  border:2px solid;border-color:var(--gray-dark) #fff #fff var(--gray-dark);
  background:#fff;color:var(--ink);
}
input:focus,textarea:focus{outline:2px solid var(--title-b)}
.nl-big{font-size:17px;font-weight:bold;color:var(--green);margin-bottom:8px}

/* wizard */
.wizard{display:flex;gap:0;min-height:340px;margin:-16px -18px}
.wiz-side{
  width:130px;flex:none;
  background:linear-gradient(180deg,var(--title-a),var(--title-b));
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:24px 10px;text-align:center;font-weight:bold;font-size:13px;line-height:1.5;
}
.wiz-side svg{width:56px;height:56px}
.wiz-main{flex:1;display:flex;flex-direction:column;padding:18px 20px}
.wiz-step{display:none;flex:1}
.wiz-step.active{display:block}
.wiz-step h3{margin-bottom:12px}
.wiz-step p{line-height:1.6;margin-bottom:10px}
.wiz-checks{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.wiz-checks label{display:flex;gap:8px;align-items:center;font-size:13px}
.wiz-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-fields label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:bold}
.wiz-fields .wide{grid-column:1/-1}
.wiz-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:12px;border-top:1px solid var(--gray-dark)}

/* popup */
.popup-body{text-align:center}
.popup-yell{
  font-weight:bold;font-size:15px;color:var(--red);
  letter-spacing:.05em;margin-bottom:10px;
  animation:blink 1.1s steps(2) infinite;
}
@keyframes blink{50%{opacity:.35}}
.popup-body .btn-row{justify-content:center}
.win.jiggle{animation:jiggle .5s ease-in-out}
@keyframes jiggle{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}

/* installing stub */
.installing{margin-top:16px;background:var(--paper);border:1px solid #d9d2c2;padding:12px 14px}
.installing p{margin-bottom:4px;font-weight:bold}

/* ==========================================================
   TASKBAR + START MENU
   ========================================================== */
#taskbar{
  position:fixed;left:0;right:0;bottom:0;height:34px;z-index:900;
  background:var(--gray);
  border-top:2px solid #fff;
  display:flex;align-items:center;gap:4px;padding:2px 4px;
}
#startbtn{
  display:flex;align-items:center;gap:6px;
  font-weight:bold;font-size:13px;padding:2px 10px 2px 6px;height:26px;
  background:var(--gray);
  border:2px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
}
#startbtn svg{width:19px;height:19px}
#startbtn.open,#startbtn:active{border-color:var(--gray-darker) #fff #fff var(--gray-darker);background:#c8c4bc}
.tb-sep{width:2px;height:24px;border-left:1px solid var(--gray-dark);border-right:1px solid #fff}
#taskbtns{flex:1;display:flex;gap:4px;overflow:hidden}
.taskbtn{
  display:flex;align-items:center;gap:6px;
  max-width:170px;min-width:0;height:26px;padding:0 9px;flex:0 1 auto;
  background:var(--gray);font-size:12px;
  border:2px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
}
.taskbtn svg{width:15px;height:15px;flex:none}
.taskbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.taskbtn.active{border-color:var(--gray-darker) #fff #fff var(--gray-darker);background:#e4e0d8;font-weight:bold}
#tray{
  display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;
  border:1.5px solid;border-color:var(--gray-dark) #fff #fff var(--gray-dark);
  font-size:12px;
}
.tray-ico{cursor:default}

#startmenu{
  position:fixed;left:2px;bottom:36px;z-index:950;
  width:290px;
  background:var(--gray);
  border:2px solid;border-color:#fff var(--gray-darker) var(--gray-darker) #fff;
  box-shadow:3px 4px 0 rgba(0,0,0,.28);
  display:flex;
}
.sm-band{
  width:30px;background:linear-gradient(180deg,var(--red),var(--title-a));
  position:relative;
}
.sm-band span{
  position:absolute;bottom:8px;left:50%;
  transform:rotate(-90deg) translateY(-50%);transform-origin:0 0;
  color:#fff;font-size:15px;letter-spacing:.04em;white-space:nowrap;
}
.sm-band b{color:#f7cd60}
.sm-items{flex:1;padding:4px 3px;display:flex;flex-direction:column}
.sm-item{
  display:flex;align-items:center;gap:9px;
  background:none;border:none;text-align:left;
  padding:7px 9px;font-size:13px;color:var(--ink);
}
.sm-item svg{width:20px;height:20px;flex:none}
.sm-item em{margin-left:auto;font-size:10px;color:#8b8474;font-style:normal;text-align:right;max-width:110px;line-height:1.3}
.sm-item:hover{background:var(--title-a);color:#fff}
.sm-item:hover em{color:#c9d6ec}
.sm-sep{height:2px;margin:3px 6px;border-top:1px solid var(--gray-dark);border-bottom:1px solid #fff}

/* ==========================================================
   POPPY
   ========================================================== */
#poppy{position:absolute;right:22px;bottom:64px;z-index:850;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.poppy-art{width:74px;height:74px;cursor:pointer;filter:drop-shadow(2px 4px 3px rgba(0,0,0,.35));animation:poppy-bob 3.2s ease-in-out infinite}
.poppy-art svg{width:100%;height:100%}
@keyframes poppy-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.poppy-bubble{
  position:relative;width:230px;
  background:#fffbe8;border:1.5px solid var(--ink);
  padding:12px 14px;font-size:12.5px;line-height:1.5;
  box-shadow:2px 3px 0 rgba(0,0,0,.25);
}
.poppy-bubble::after{
  content:"";position:absolute;right:26px;bottom:-9px;
  border:9px solid transparent;border-top-color:var(--ink);border-bottom:0;
}
.poppy-bubble[hidden]{display:none}
.poppy-actions{display:flex;gap:6px;margin-top:10px}
.poppy-close{
  position:absolute;top:2px;right:4px;background:none;border:none;
  font-size:14px;color:#8b8474;
}

/* ==========================================================
   REDUCED MOTION + MOBILE
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

@media (max-width:760px){
  body{font-size:14px}
  #desktop::before{font-size:24px}
  #desktop::after{display:none}
  #watermark{display:none}
  #icons{
    position:absolute;inset:10px 8px 44px;
    display:grid;grid-auto-flow:row;
    grid-template-columns:repeat(3,1fr);grid-template-rows:none;
    gap:4px;overflow-y:auto;align-content:start;
  }
  .icon{width:auto}
  .win{
    inset:0 0 34px 0 !important;
    width:auto !important;height:auto !important;
    max-height:none !important;
    min-width:0;
    animation:none;
  }
  .win-title{cursor:default}
  .win-btn.max{display:none}
  .wizard{flex-direction:column;margin:-16px -18px}
  .wiz-side{width:auto;flex-direction:row;justify-content:center;padding:12px}
  .wiz-side br{display:none}
  .wiz-side svg{width:34px;height:34px}
  .wiz-fields{grid-template-columns:1fr}
  #poppy{right:10px;bottom:10px}
  .poppy-art{width:56px;height:56px}
  #startmenu{width:min(320px,94vw)}
  .taskbtn{max-width:110px}
  #tray .tray-ico{display:none}
}