/* DrainOS desktop — retro, dark window chrome, toxic-green accent, matches /assets palette. */
:root {
  --ink: #1a1f24;
  --chrome: #2b3339;
  --chrome-2: #222a2f;
  --chrome-line: #0d1113;
  --panel: #323c43;
  --panel-2: #3a444c;
  --text: #e7edf1;
  --muted: #9fb0bb;
  --green: #9be15d;
  --green-2: #2fb35a;
  --blue: #2f6fe0;
  --amber: #f4b928;
  --red: #e5484d;
  --purple: #7c4ddb;
  --radius: 10px;
  --shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.04) inset;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  color: var(--text);
  background: #0c0f12;
  overflow: hidden;
  cursor: url("../../assets/cursors/arrow.svg") 4 2, auto;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }
img { -webkit-user-drag: none; user-select: none; }

.btn {
  border: 2px solid var(--chrome-line);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer;
  transition: transform .06s ease, filter .12s ease, background .12s;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--green-2); border-color: #176b33; color: #06240f; }
.btn-danger { background: var(--red); border-color: #8a1f22; color: #fff; }
.btn-ghost { background: transparent; }
.btn:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------- Boot ---------- */
.boot {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-content: center; justify-items: center; gap: 10px;
  text-align: center; padding: 24px;
  background: radial-gradient(1200px 700px at 50% 20%, #23303a, #0b0e11);
}
.boot h1 { margin: 6px 0 0; font-size: 34px; letter-spacing: .5px; }
.boot p { margin: 0; color: var(--muted); }
.boot .btn { margin-top: 10px; font-size: 16px; padding: 12px 22px; }
.boot-fineprint { max-width: 380px; font-size: 12px; opacity: .75; margin-top: 18px; }

/* ---------- Desktop ---------- */
.desktop { position: fixed; inset: 0; }
.wallpaper {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
}
body[data-wallpaper="dusk"]   .wallpaper { background-image: url("../../assets/wallpapers/dusk.svg"); }
body[data-wallpaper="amber"]  .wallpaper { background-image: url("../../assets/wallpapers/amber.svg"); }
body[data-wallpaper="margin"] .wallpaper { background-image: url("../../assets/wallpapers/margin.svg"); }
body[data-wallpaper="vapor"]  .wallpaper { background-image: url("../../assets/wallpapers/vapor.svg"); }

.desktop-icons {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: 6px;
  max-height: calc(100% - 70px);
}
.desktop-icon {
  width: 84px; display: grid; justify-items: center; gap: 4px;
  padding: 8px 4px; border: 2px solid transparent; border-radius: 10px;
  background: none; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.8);
  cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer;
  font-size: 12px; text-align: center;
}
.desktop-icon:hover, .desktop-icon:focus-visible { background: rgba(155,225,93,.14); border-color: rgba(155,225,93,.4); }
.desktop-icon img { width: 44px; height: 44px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }

/* ---------- Windows ---------- */
.windows { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.window {
  position: absolute; pointer-events: auto;
  min-width: 300px; min-height: 180px;
  background: var(--panel); border: 2px solid var(--chrome-line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column; overflow: hidden;
  animation: win-pop .16s ease;
}
@keyframes win-pop { from { transform: scale(.97); opacity: 0; } }
.window.maximized { border-radius: 0; }
.window.minimized { display: none; }
.titlebar {
  display: flex; align-items: center; gap: 8px;
  background: linear-gradient(var(--chrome), var(--chrome-2));
  border-bottom: 2px solid var(--chrome-line);
  padding: 7px 8px; cursor: url("../../assets/cursors/move.svg") 10 10, move;
  user-select: none;
}
.titlebar img.title-icon { width: 18px; height: 18px; }
.titlebar .title { font-size: 13px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-controls { display: flex; gap: 4px; }
.win-controls button {
  width: 26px; height: 22px; border: 2px solid var(--chrome-line); border-radius: 6px;
  background: var(--panel-2); color: var(--text); display: grid; place-items: center;
  cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer;
}
.win-controls button:hover { filter: brightness(1.2); }
.win-controls .close:hover { background: var(--red); color: #fff; }
.win-controls svg { width: 15px; height: 15px; }
.win-body { flex: 1; overflow: auto; position: relative; background: var(--panel); }
.resize-handle {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px;
  cursor: url("../../assets/cursors/resize.svg") 8 8, nwse-resize; z-index: 3;
}

/* ---------- Taskbar ---------- */
.taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; height: 48px;
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  background: linear-gradient(var(--chrome), var(--chrome-2));
  border-top: 2px solid var(--chrome-line);
}
.start-btn {
  display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px;
  border: 2px solid var(--chrome-line); border-radius: 8px; background: var(--green-2);
  color: #06240f; font-weight: 800; cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer;
}
.task-buttons { flex: 1; display: flex; gap: 6px; overflow-x: auto; }
.task-btn {
  display: flex; align-items: center; gap: 6px; height: 34px; max-width: 190px; padding: 0 10px;
  border: 2px solid var(--chrome-line); border-radius: 8px; background: var(--panel-2);
  color: var(--text); cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer; white-space: nowrap;
}
.task-btn.active { background: #46555e; box-shadow: 0 -2px 0 var(--green) inset; }
.task-btn img { width: 16px; height: 16px; }
.task-btn span { overflow: hidden; text-overflow: ellipsis; }
.tray { display: flex; align-items: center; gap: 10px; padding-right: 4px; }
.tray-btn { width: 32px; height: 32px; border: 2px solid var(--chrome-line); border-radius: 8px; background: var(--panel-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.tray-btn svg { width: 18px; height: 18px; }
.clock { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 44px; text-align: center; }

/* ---------- Start menu ---------- */
.start-menu {
  position: absolute; left: 8px; bottom: 56px; z-index: 30; width: 260px;
  background: var(--panel); border: 2px solid var(--chrome-line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px;
}
.start-menu[hidden] { display: none; }
.start-menu h3 { margin: 4px 8px 6px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.start-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; background: none; border: 0; color: var(--text); text-align: left; cursor: pointer; font-size: 14px; }
.start-item:hover { background: #46555e; }
.start-item img { width: 22px; height: 22px; }

/* ---------- Toasts / notifications ---------- */
.toasts { position: absolute; right: 12px; bottom: 60px; z-index: 40; display: grid; gap: 8px; width: min(340px, 90vw); }
.toast {
  background: var(--panel); border: 2px solid var(--chrome-line); border-left: 5px solid var(--green);
  border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); animation: toast-in .2s ease;
}
.toast.warn { border-left-color: var(--amber); }
.toast.bad { border-left-color: var(--red); }
.toast strong { display: block; font-size: 13px; }
.toast p { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
@keyframes toast-in { from { transform: translateX(20px); opacity: 0; } }

/* ---------- Incoming call ---------- */
.callbox { padding: 16px; display: grid; gap: 12px; }
.callbox .caller { display: flex; gap: 12px; align-items: center; }
.callbox .avatar { width: 72px; height: 72px; border-radius: 14px; border: 2px solid var(--chrome-line); background: var(--panel-2); object-fit: cover; }
.callbox .caller h2 { margin: 0; font-size: 18px; }
.callbox .caller .sub { color: var(--muted); font-size: 13px; }
.ring-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 6px; animation: ring 1s steps(2) infinite; }
@keyframes ring { 50% { opacity: .2; } }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #46555e; border: 1px solid var(--chrome-line); }
.tag.diff-easy { background: #1f5b34; }
.tag.diff-normal { background: #7a5a12; }
.tag.diff-hard { background: #6a1f22; }
.callbox .problem { background: var(--chrome-2); border: 1px solid var(--chrome-line); border-radius: 8px; padding: 10px; font-style: italic; }
.call-actions { display: flex; gap: 8px; }
.call-actions .btn { flex: 1; }

/* ---------- Dialogue / Call app ---------- */
.callapp { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; }
.callapp .stage { padding: 12px; display: flex; gap: 12px; align-items: flex-start; border-bottom: 2px solid var(--chrome-line); background: var(--chrome-2); }
.portrait-wrap { position: relative; width: 96px; flex: none; }
.portrait { width: 96px; height: 96px; border-radius: 14px; border: 2px solid var(--chrome-line); object-fit: cover; background: #222; }
.portrait.speaking { animation: bob .5s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.callapp .npcline { flex: 1; min-height: 72px; background: var(--panel-2); border: 2px solid var(--chrome-line); border-radius: 12px; padding: 10px 12px; position: relative; }
.callapp .npcline:before { content: ""; position: absolute; left: -9px; top: 18px; border: 8px solid transparent; border-right-color: var(--chrome-line); }
.callapp .npcname { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.trust-wrap { padding: 10px 12px; border-bottom: 2px solid var(--chrome-line); }
.trust-top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.trust-bar { height: 16px; border-radius: 999px; background: #20272c; border: 2px solid var(--chrome-line); overflow: hidden; position: relative; }
.trust-fill { height: 100%; width: 50%; transition: width .4s cubic-bezier(.2,.8,.2,1), background .3s; border-radius: 999px; }
.trust-fill.high { background: linear-gradient(90deg, var(--green-2), var(--green)); }
.trust-fill.mid { background: linear-gradient(90deg, #b5860f, var(--amber)); }
.trust-fill.low { background: linear-gradient(90deg, #8a1f22, var(--red)); }
.trust-delta { position: absolute; right: 8px; top: -2px; font-weight: 800; font-size: 12px; animation: floatUp 1s ease forwards; }
.trust-delta.pos { color: var(--green); }
.trust-delta.neg { color: var(--red); }
@keyframes floatUp { to { transform: translateY(-14px); opacity: 0; } }
.choices { padding: 10px 12px; overflow: auto; display: grid; gap: 8px; align-content: start; }
.choice {
  text-align: left; padding: 10px 12px; border-radius: 10px; border: 2px solid var(--chrome-line);
  background: var(--panel-2); color: var(--text); cursor: pointer; line-height: 1.35; font-size: 14px;
}
.choice:hover { background: #46555e; }
.choice:disabled { opacity: .45; }
.choice .mini { display: block; font-size: 11px; color: var(--muted); margin-top: 3px; }
.callapp .footer { padding: 8px 12px; border-top: 2px solid var(--chrome-line); font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; }
.callapp .footer code { color: var(--green); }

/* ---------- Browser ---------- */
.browser { display: grid; grid-template-rows: auto auto auto 1fr; height: 100%; background: #1b2126; }
.browser .tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: var(--chrome-2); }
.browser .tab { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--panel-2); border: 2px solid var(--chrome-line); border-bottom: none; border-radius: 8px 8px 0 0; font-size: 12px; max-width: 160px; }
.browser .tab.active { background: var(--panel); }
.browser .toolbar { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: var(--chrome); border-bottom: 2px solid var(--chrome-line); }
.browser .nav-btn { width: 30px; height: 30px; border: 2px solid var(--chrome-line); border-radius: 7px; background: var(--panel-2); color: var(--text); display: grid; place-items: center; cursor: pointer; }
.browser .nav-btn:disabled { opacity: .4; }
.browser .nav-btn svg { width: 16px; height: 16px; }
.browser .address { flex: 1; display: flex; align-items: center; gap: 6px; background: #121619; border: 2px solid var(--chrome-line); border-radius: 999px; padding: 5px 12px; }
.browser .address input { flex: 1; background: none; border: 0; color: var(--text); font-size: 13px; outline: none; }
.browser .address .lock { width: 14px; height: 14px; color: var(--green); }
.browser .bookmarks { display: flex; gap: 6px; padding: 6px 8px; background: var(--chrome-2); border-bottom: 2px solid var(--chrome-line); overflow-x: auto; }
.bookmark { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; border: 2px solid var(--chrome-line); background: var(--panel-2); color: var(--text); font-size: 12px; cursor: pointer; white-space: nowrap; }
.bookmark .fav { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; font-weight: 800; font-size: 10px; color: #fff; }
.browser .viewport { position: relative; overflow: auto; }
.browser .viewport.loading:after { content: ""; position: absolute; inset: 0; background: #0b0e11; z-index: 5; animation: fade .35s ease forwards; }
@keyframes fade { to { opacity: 0; visibility: hidden; } }
.loadbar { position: absolute; top: 0; left: 0; height: 3px; background: var(--green); width: 0; z-index: 6; }
.loadbar.run { animation: load .4s ease forwards; }
@keyframes load { to { width: 100%; opacity: 0; } }

/* ---------- Exchange site mockups (scoped by --site-* vars) ---------- */
.site { min-height: 100%; font-size: 14px; color: var(--site-text); background: var(--site-bg); }
.site a { color: var(--site-primary); }
.site .topbar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--site-surface); border-bottom: 1px solid rgba(128,128,128,.25); }
.site .brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 16px; }
.site .brand .logo { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: #fff; font-weight: 900; background: var(--site-primary); }
.site .brand.hex .logo { border-radius: 0; clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); }
.site .brand.diamond .logo { border-radius: 0; transform: rotate(45deg); }
.site .brand.diamond .logo span { transform: rotate(-45deg); }
.site .navlinks { display: flex; gap: 14px; margin-left: auto; font-size: 13px; color: var(--site-muted); }
.site .page { padding: 18px; display: grid; gap: 16px; }
.site.layout-sidebar .page { grid-template-columns: 160px 1fr; }
.site .page.single { display: block; }   /* login / reset are never two-column */
.site .side { display: grid; gap: 4px; align-content: start; }
.site .side a { padding: 8px 10px; border-radius: 8px; background: var(--site-surface); color: var(--site-text); text-decoration: none; }
.site .login-card { max-width: 360px; margin: 16px auto; background: var(--site-surface); border-radius: 14px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.site .login-card h2 { margin: 0; }
.site .tagline { color: var(--site-muted); margin: 0 0 6px; }
.site .field { display: grid; gap: 4px; }
.site .field label { font-size: 12px; color: var(--site-muted); }
.site .field input { padding: 9px 11px; border-radius: 8px; border: 1px solid rgba(128,128,128,.35); background: var(--site-bg); color: var(--site-text); }
.site .btn-site { padding: 11px; border-radius: 8px; border: none; background: var(--site-primary); color: #fff; font-weight: 700; cursor: pointer; }
.site .btn-site.ghost { background: transparent; border: 1px solid var(--site-primary); color: var(--site-primary); }
.site .balance-hero { display: grid; gap: 4px; }
.site .balance-hero .big { font-size: 34px; font-weight: 900; }
.site .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.site.layout-tiles .cards .card { background: var(--site-primary); color: #141210; }
.site .card { background: var(--site-surface); border-radius: 12px; padding: 14px; display: grid; gap: 4px; }
.site .card .k { font-size: 12px; color: var(--site-muted); }
.site .card .v { font-size: 20px; font-weight: 800; }
.site .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.site .status-pill.active { background: rgba(47,179,90,.18); color: #2fb35a; }
.site .status-pill.locked { background: rgba(229,72,77,.18); color: #e5484d; }
.site table { width: 100%; border-collapse: collapse; font-size: 13px; }
.site th, .site td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(128,128,128,.2); }
.site .amt.out { color: var(--site-primary); }
.site .reset-note { font-size: 12px; color: var(--site-muted); background: var(--site-bg); border: 1px dashed rgba(128,128,128,.4); border-radius: 8px; padding: 10px; }

/* ---------- Email ---------- */
.email { display: grid; grid-template-columns: 200px 1fr; height: 100%; }
.email .list { border-right: 2px solid var(--chrome-line); background: var(--chrome-2); overflow: auto; }
.email .mail { padding: 10px 12px; border-bottom: 1px solid var(--chrome-line); cursor: pointer; }
.email .mail:hover, .email .mail.active { background: #46555e; }
.email .mail .from { font-weight: 700; font-size: 13px; }
.email .mail .subj { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.email .mail.unread .from:before { content: "●"; color: var(--green); margin-right: 5px; font-size: 10px; }
.email .reader { padding: 16px; overflow: auto; }
.email .reader h2 { margin: 0 0 4px; font-size: 17px; }
.email .reader .meta { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
.email .code-box { font-family: var(--mono); font-size: 26px; letter-spacing: 6px; background: var(--chrome-2); border: 2px dashed var(--green); border-radius: 10px; padding: 14px; text-align: center; margin: 12px 0; }
.email .empty { display: grid; place-content: center; height: 100%; color: var(--muted); }

/* ---------- Dark Wallet + timed transfer ---------- */
.dwallet { background: #0b0b0f; color: #d7dde3; height: 100%; display: grid; grid-template-rows: auto auto 1fr auto; }
.dwallet .dw-head { padding: 12px 14px; border-bottom: 2px solid #000; display: flex; align-items: center; gap: 10px; background: #111118; }
.dwallet .dw-head .logo { width: 30px; height: 30px; border-radius: 8px; background: var(--green); display: grid; place-items: center; color: #06240f; font-weight: 900; }
.dwallet .dw-sub { color: #6f7a85; font-size: 12px; }
.timer-strip { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #15151c; border-bottom: 2px solid #000; }
.timer-num { font-family: var(--mono); font-size: 30px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.timer-num.warn { color: var(--red); animation: pulse .5s steps(2) infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.timer-track { flex: 1; height: 10px; background: #000; border-radius: 999px; overflow: hidden; }
.timer-track i { display: block; height: 100%; background: var(--green); width: 100%; }
.timer-track i.warn { background: var(--red); }
.dw-body { padding: 14px; display: grid; gap: 14px; align-content: start; }
.dw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dw-acct { background: #15151c; border: 2px solid #000; border-radius: 12px; padding: 12px; }
.dw-acct .lbl { font-size: 12px; color: #6f7a85; }
.dw-acct .bal { font-size: 24px; font-weight: 900; }
.dw-acct .addr { font-family: var(--mono); font-size: 12px; color: var(--green); word-break: break-all; }
.dw-steps { display: grid; gap: 8px; }
.dw-step { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 10px; border: 2px solid #000; background: #15151c; opacity: .5; }
.dw-step.ready { opacity: 1; border-color: var(--green); }
.dw-step.done { opacity: 1; background: #10261a; border-color: var(--green-2); }
.dw-step .num { width: 24px; height: 24px; border-radius: 50%; background: #000; display: grid; place-items: center; font-weight: 800; flex: none; }
.dw-step.done .num { background: var(--green-2); color: #06240f; }
.dw-step .btn-site, .dw-step button { margin-left: auto; }
.amount-slider { width: 100%; }
.amount-read { font-family: var(--mono); font-weight: 800; color: var(--green); }
.dw-foot { padding: 12px 14px; border-top: 2px solid #000; display: flex; gap: 10px; }
.dw-foot .btn { flex: 1; }

/* Alarm overlay: red flash + glitch */
.alarm-overlay { position: absolute; inset: 0; z-index: 15; pointer-events: none; mix-blend-mode: screen; }
.alarm-overlay.on { background: radial-gradient(1200px 800px at 50% 50%, rgba(229,72,77,0), rgba(229,72,77,.28)); animation: alarm 1s ease-in-out infinite; }
@keyframes alarm { 50% { background: radial-gradient(1200px 800px at 50% 50%, rgba(229,72,77,.1), rgba(229,72,77,.5)); } }
.shake { animation: shake .4s ease-in-out infinite; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); } 50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,-1px); } }
.glitch { animation: glitch .2s steps(2) infinite; }
@keyframes glitch { 50% { filter: hue-rotate(25deg) contrast(1.2); } }

/* ---------- Outcome / results ---------- */
.result { padding: 20px; display: grid; gap: 14px; justify-items: center; text-align: center; }
.result img.hero { width: 150px; height: 150px; }
.result h2 { margin: 0; font-size: 24px; }
.result .react { background: var(--chrome-2); border: 2px solid var(--chrome-line); border-radius: 12px; padding: 12px 16px; max-width: 420px; display: grid; gap: 6px; }
.result .react .who { font-size: 12px; color: var(--muted); }
.result .react .closer { color: var(--muted); font-style: italic; }
.result .portrait { width: 84px; height: 84px; }
.result .scoreline { display: flex; gap: 20px; font-size: 15px; }
.result .scoreline b { color: var(--green); }
.result .react.droop .portrait { transform: rotate(-4deg) translateY(2px); }
.result .react.lean .portrait { transform: rotate(5deg); }
.result .react.bounce .portrait { animation: bob .5s ease-in-out infinite; }

/* ---------- How to play ---------- */
.howto { padding: 16px; display: grid; gap: 12px; line-height: 1.5; }
.howto ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.howto .pill { display: inline-block; background: var(--chrome-2); border: 1px solid var(--chrome-line); border-radius: 999px; padding: 2px 10px; font-size: 12px; }

/* ---------- Settings ---------- */
.settings { padding: 16px; display: grid; gap: 14px; max-width: 420px; }
.settings .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings .row .desc { font-size: 12px; color: var(--muted); }
.switch { position: relative; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track { position: absolute; inset: 0; background: #20272c; border: 2px solid var(--chrome-line); border-radius: 999px; transition: background .15s; }
.switch .track:after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s, background .15s; }
.switch input:checked + .track { background: #1f5b34; }
.switch input:checked + .track:after { transform: translateX(20px); background: var(--green); }
.wallpaper-picker { display: flex; gap: 8px; }
.wallpaper-picker button { width: 54px; height: 36px; border-radius: 8px; border: 2px solid var(--chrome-line); background-size: cover; cursor: pointer; }
.wallpaper-picker button.active { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; }

@media (max-width: 760px) {
  .desktop-icons { grid-template-columns: repeat(auto-fill, 72px); }
  .window { left: 2vw !important; width: 96vw !important; }
  .email { grid-template-columns: 1fr; }
  .email .reader { display: none; }
  .email.show-reader .list { display: none; }
  .email.show-reader .reader { display: block; }
}

/* ============================================================
   Polish pass: objective HUD, richer interactions, refinements
   ============================================================ */

/* ---- Objective HUD ---- */
.hud {
  position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); z-index: 35;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
  background: rgba(22,28,32,.88); backdrop-filter: blur(8px);
  border: 2px solid var(--chrome-line); border-radius: 999px; padding: 6px 14px; box-shadow: var(--shadow);
  max-width: calc(100vw - 24px); animation: hud-in .3s ease;
}
@keyframes hud-in { from { opacity: 0; transform: translate(-50%, 8px); } }
.hud[hidden] { display: none; }
.hud-title { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.hud.hud-win { border-color: var(--green); }
.hud.hud-win .hud-title { color: var(--green); }
.hud-steps { display: flex; gap: 4px; }
.hud-step { display: flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px; color: var(--muted); opacity: .55; transition: opacity .25s, background .25s, color .25s; }
.hud-step.active { opacity: 1; color: var(--text); background: rgba(155,225,93,.14); box-shadow: 0 0 0 1px rgba(155,225,93,.45) inset; }
.hud-step.done { opacity: 1; color: var(--green); }
.hud-step.fail { opacity: 1; color: var(--red); }
.hud-dot { width: 18px; height: 18px; border-radius: 50%; background: #20272c; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: none; }
.hud-step.active .hud-dot { background: var(--green); color: #06240f; animation: hud-pulse 1.1s ease-in-out infinite; }
.hud-step.done .hud-dot { background: var(--green-2); color: #06240f; }
.hud-step.fail .hud-dot { background: var(--red); color: #fff; }
@keyframes hud-pulse { 50% { transform: scale(1.18); } }
@media (max-width: 720px) { .hud-label { display: none; } .hud-title { display: none; } }

/* ---- Buttons: unified motion + depth ---- */
.btn, .btn-site, .choice, .bookmark, .task-btn, .start-item, .nav-btn, .win-controls button, .desktop-icon {
  transition: transform .07s ease, filter .14s ease, background .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.btn-primary { box-shadow: 0 4px 12px rgba(47,179,90,.28); }
.btn-primary:hover { box-shadow: 0 6px 16px rgba(47,179,90,.4); }
.btn-danger { box-shadow: 0 4px 12px rgba(229,72,77,.28); }
.btn:active, .btn-site:active, .choice:active, .bookmark:active { transform: translateY(1px) scale(.995); }
.btn-site { transition: transform .07s ease, filter .14s ease, box-shadow .16s; }
.btn-site:hover { filter: brightness(1.08); box-shadow: 0 6px 16px rgba(0,0,0,.25); }

/* ---- Dialogue choices: hover lift + accent rail ---- */
.choice { position: relative; overflow: hidden; }
.choice::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--green); transform: scaleY(0); transform-origin: center; transition: transform .16s ease; }
.choice:hover:not(:disabled) { background: #46555e; transform: translateX(2px); }
.choice:hover:not(:disabled)::before { transform: scaleY(1); }

/* ---- Trust meter glow ---- */
.trust-fill.high { box-shadow: 0 0 10px rgba(155,225,93,.5); }
.trust-fill.mid { box-shadow: 0 0 10px rgba(244,185,40,.4); }
.trust-fill.low { box-shadow: 0 0 10px rgba(229,72,77,.45); }

/* ---- Active window emphasis ---- */
.window { transition: box-shadow .2s ease; }
.window.active { box-shadow: 0 22px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(155,225,93,.25); }
.window.active .titlebar { background: linear-gradient(#333f46, #2a343a); }
.window.active .titlebar .title { color: #fff; }

/* ---- Site cards + bookmarks interactivity ---- */
.site .card { transition: transform .12s ease, box-shadow .16s ease; }
.site .cards > .card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.bookmark:hover { background: #46555e; transform: translateY(-1px); }
.bookmark.active { box-shadow: 0 -2px 0 var(--green) inset; }

/* ---- Desktop icon press feedback ---- */
.desktop-icon:active { transform: scale(.94); }

/* ---- Confetti (outcome success) ---- */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 12px; border-radius: 2px; opacity: .9; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(560px) rotate(640deg); opacity: 0; } }

/* ---- Score breakdown ---- */
.score-grid { display: grid; grid-template-columns: auto auto; gap: 4px 18px; justify-content: center; font-size: 14px; margin-top: 2px; }
.score-grid .k { color: var(--muted); text-align: right; }
.score-grid .v { font-weight: 800; }
.score-grid .v.pos { color: var(--green); }
.streak-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--chrome-2); border: 1px solid var(--chrome-line); font-size: 13px; }
.streak-chip b { color: var(--amber); }

/* ---- Tray haul readout ---- */
.tray-haul { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green); font-variant-numeric: tabular-nums; }
.tray-haul svg { width: 14px; height: 14px; }

/* ---- Dark, themed scrollbars ---- */
.win-body, .choices, .viewport, .email .list, .email .reader, .dw-body, .start-menu {
  scrollbar-width: thin; scrollbar-color: #46555e transparent;
}
.win-body::-webkit-scrollbar, .viewport::-webkit-scrollbar, .choices::-webkit-scrollbar, .dw-body::-webkit-scrollbar { width: 10px; height: 10px; }
.win-body::-webkit-scrollbar-thumb, .viewport::-webkit-scrollbar-thumb, .choices::-webkit-scrollbar-thumb, .dw-body::-webkit-scrollbar-thumb { background: #46555e; border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.win-body::-webkit-scrollbar-thumb:hover, .viewport::-webkit-scrollbar-thumb:hover { background: #5a6a74; background-clip: content-box; }

/* ---- Incoming call attention ---- */
.callbox .avatar { animation: call-bob 1.6s ease-in-out infinite; }
@keyframes call-bob { 50% { transform: translateY(-3px); } }

/* ---- Clickable HUD steps (one-tap navigation) ---- */
.hud-step { pointer-events: auto; cursor: url("../../assets/cursors/pointer.svg") 8 2, pointer; }
.hud-step:hover { filter: brightness(1.18); background: rgba(155,225,93,.1); }
.hud-step:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---- Caller details panel (call window) ---- */
.caller-notes { display: flex; gap: 8px; padding: 8px 12px; border-bottom: 2px solid var(--chrome-line); background: var(--chrome-2); flex-wrap: wrap; }
.note-item { display: flex; align-items: center; gap: 7px; font-size: 12px; background: var(--panel); border: 1px solid var(--chrome-line); border-radius: 8px; padding: 4px 9px; }
.note-k { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; }
.note-v { color: var(--muted); font-family: var(--mono); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-v.got { color: var(--green); }

/* ---- Account recovery rows (exchange) ---- */
.site .recover-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--site-bg); border: 1px solid rgba(128,128,128,.3); border-radius: 8px; padding: 10px 12px; }
.site .recover-k { font-size: 12px; color: var(--site-muted); }
.site .recover-v { font-weight: 700; word-break: break-all; text-align: right; }
.site .recover-v.ok { color: var(--site-primary); }
.site .recover-v.ask { color: var(--site-muted); font-weight: 500; font-style: italic; }
.site .recover-v.code { font-family: var(--mono); font-size: 20px; letter-spacing: 4px; }
.site .recover-v.pulse { animation: pulse 1s steps(2) infinite; }

/* ============================================================
   Fit + resize polish
   ============================================================ */

/* Call window: flex column so the choices/transcript area always scrolls and
   nothing (stage, trust, notes, footer) gets pushed out of the window. */
.callapp { display: flex; flex-direction: column; }
.callapp > .stage, .callapp > .trust-wrap, .callapp > .caller-notes, .callapp > .footer { flex: 0 0 auto; }
.callapp > .choices { flex: 1 1 auto; min-height: 0; }

/* Panels that can overflow always scroll inside their window. */
.dw-body { overflow: auto; min-height: 0; }
.site .page { min-height: 0; }

/* Edge + corner resize handles on every window. */
.resize-handle.e { left: auto; right: -3px; top: 10px; bottom: 16px; width: 8px; height: auto; cursor: ew-resize; }
.resize-handle.s { left: 10px; right: 16px; bottom: -3px; top: auto; height: 8px; width: auto; cursor: ns-resize; }
.resize-handle:not(.e):not(.s) { z-index: 4; }
.resize-handle:not(.e):not(.s)::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); opacity: .45; border-radius: 0 0 3px 0;
}
.window:hover .resize-handle:not(.e):not(.s)::after { opacity: .75; }
body.resizing { user-select: none; cursor: nwse-resize; }
body.resizing iframe { pointer-events: none; }

/* Maximize fills nicely; ensure body content never clips the chrome. */
.window { min-width: 300px; }
.win-body { min-height: 0; }

/* ============================================================
   Glitch fixes: dialogue choices clipping + note chip truncation
   ============================================================ */
/* Choices stack and size to their own content (grid rows were collapsing to one
   line because overflow:hidden made them zero-min scroll items). */
.choices { display: flex; flex-direction: column; }
.choice { overflow: visible; }
.choice::before { border-radius: 8px 0 0 8px; }       /* rail follows the button's rounded corner */

/* Caller-detail chips show their full short hint instead of an ellipsis. */
.caller-notes { align-items: flex-start; }
.note-item { max-width: 100%; }
.note-v { max-width: 100%; white-space: normal; word-break: break-word; }

/* ---- Prominent "identify the exchange" bar on every exchange page ---- */
.identify-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--site-surface); border-bottom: 2px solid var(--site-primary); }
.identify-bar .id-q { font-weight: 700; color: var(--site-text); }
.identify-bar .btn-site { padding: 10px 16px; white-space: nowrap; }
.identify-bar.done { justify-content: center; color: var(--site-primary); font-weight: 800; letter-spacing: .02em; }