/* Zoin Line: a cheap cartoon OS in a plum-lit call center. Sticker windows, hard ink shadows, one brand color (Zoin yellow). */
:root {
  --desk: #2b1d3f;
  --desk-2: #3d2a5a;
  --paper: #fff8ec;
  --paper-2: #f3e9d6;
  --ink: #22172f;
  --ink-2: #5d4f6e;
  --coin: #ffcf3f;
  --tomato: #ff5b49;
  --teal: #1fae95;
  --sky: #7ec8ff;
  --r-win: 14px;
  --r-ctl: 9px;
  --line: 2.5px solid var(--ink);
  --shadow: 6px 6px 0 var(--ink);
  --font: 'Bricolage Grotesque', system-ui, sans-serif;
  --mono: 'Martian Mono', ui-monospace, monospace;
  --bar-h: 58px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--desk); color: var(--ink); font: 500 15px/1.45 var(--font); font-optical-sizing: auto; overflow: hidden; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
b, strong { font-weight: 800; }

/* ---------- shared controls ---------- */
.btn { border: var(--line); background: var(--paper); border-radius: var(--r-ctl); padding: 8px 14px; font-weight: 700; box-shadow: 3px 3px 0 var(--ink); transition: transform .08s, box-shadow .08s; white-space: nowrap; }
.btn:hover { background: #fff; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn.primary { background: var(--coin); }
.btn.go { background: var(--teal); color: #fff; }
.btn.danger { background: var(--tomato); color: #fff; }
.btn.big { padding: 12px 18px; font-size: 17px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--ink); }
input { border: var(--line); border-radius: var(--r-ctl); background: #fff; padding: 9px 11px; min-width: 0; }
.coin { display: grid; place-items: center; border-radius: 50%; background: var(--coin); border: 4px solid var(--ink); font-weight: 800; color: var(--ink); box-shadow: inset -8px -10px 0 rgba(0,0,0,.12); }
.coin.sm { width: 34px; height: 34px; font-size: 18px; border-width: 2.5px; box-shadow: inset -3px -4px 0 rgba(0,0,0,.12); }
.mono { font-family: var(--mono); }
.muted { color: var(--ink-2); }
.face { display: block; border: var(--line); border-radius: 50%; overflow: hidden; background: #fff; flex: none; }
.face svg { display: block; width: 100%; height: 100%; }

/* ---------- login ---------- */
.login { position: fixed; inset: 0; z-index: 30; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 470px) minmax(260px, 340px) minmax(0, .5fr); gap: 28px; align-items: center; padding: 24px; overflow: auto;
  background: linear-gradient(90deg, rgba(43,29,63,.15) 0%, rgba(43,29,63,.55) 40%, rgba(43,29,63,.85) 100%); }
.login-art { grid-column: 1; justify-self: end; }
.coin.big { width: min(26vw, 300px); aspect-ratio: 1; font-size: min(17vw, 200px); border-width: 8px; box-shadow: 14px 14px 0 var(--ink), inset -26px -30px 0 rgba(0,0,0,.12); transform: rotate(-8deg); animation: spin 9s ease-in-out infinite; }
@keyframes spin { 0%, 100% { transform: rotate(-8deg) } 50% { transform: rotate(6deg) translateY(-8px) } }
.login-card { grid-column: 2; background: var(--paper); border: var(--line); border-radius: 20px; box-shadow: 10px 10px 0 var(--ink); padding: 26px 26px 18px; }
.logo { margin: 0 0 6px; font-size: 54px; line-height: .95; letter-spacing: -.03em; font-weight: 800; }
.logo span { display: block; color: var(--desk); -webkit-text-stroke: 0; }
.lede { margin: 0 0 18px; color: var(--ink-2); max-width: 44ch; }
.who { display: flex; gap: 14px; align-items: end; margin-bottom: 16px; }
.avatar-btn { border: 0; background: none; padding: 0; display: grid; justify-items: center; gap: 4px; }
.avatar-btn > span:first-child { width: 78px; height: 78px; }
.reroll { font-size: 12px; font-weight: 700; text-decoration: underline; }
.field { display: grid; gap: 5px; font-weight: 700; font-size: 13px; flex: 1; }
.login-actions { display: grid; gap: 10px; }
.join { display: flex; gap: 8px; }
.join input { flex: 1; font-family: var(--mono); letter-spacing: .3em; text-transform: uppercase; }
.rooms { margin-top: 12px; display: grid; gap: 6px; }
.rooms:empty { display: none; }
.room-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; border: 2px dashed var(--ink-2); border-radius: var(--r-ctl); padding: 6px 10px; background: none; text-align: left; width: 100%; }
.room-row:hover { border-style: solid; background: #fff; }
.fine { font-size: 12px; color: var(--ink-2); margin: 16px 0 0; }
.login-side { grid-column: 3; color: var(--paper); text-shadow: 0 2px 0 var(--ink); }
.login-side h2 { font-size: 22px; margin: 0 0 4px; }
.login-side p { color: #d7cbe6; margin: 0 0 12px; }
.pool { font-size: 40px; font-weight: 800; color: var(--coin); line-height: 1; }
.steps { padding-left: 20px; margin: 10px 0; color: #e9e0f3; }
.steps li { margin-bottom: 6px; }

/* ---------- desktop ---------- */
#world { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; background: var(--desk); }
.desk { position: fixed; inset: 0; z-index: 5; overflow: hidden; background: radial-gradient(ellipse at 70% 40%, var(--desk-2), var(--desk) 70%); transition: opacity .28s ease, transform .28s ease; }
.desk.on-monitor { border-radius: 6px; box-shadow: 0 0 0 2px #120b1c, 0 0 60px rgba(126,200,255,.18); }
.desk.away { opacity: 0; pointer-events: none; transform: scale(.985); }
.desk.away * { pointer-events: none !important; }
.wallpaper { position: absolute; inset: 0 0 var(--bar-h); display: grid; place-content: center; justify-items: center; pointer-events: none; opacity: .5; }
.wallpaper .coin { width: 220px; height: 220px; font-size: 140px; opacity: .55; border-color: rgba(34,23,47,.6); }
.wallpaper p { color: #cdbfe0; font-weight: 800; font-size: 22px; margin: 16px 0 0; }
.wallpaper small { font-weight: 500; font-size: 13px; opacity: .8; }
.icons { position: absolute; left: 14px; top: 14px; display: grid; gap: 6px; z-index: 1; }
.icon { width: 92px; border: 0; background: none; color: var(--paper); display: grid; justify-items: center; gap: 5px; padding: 8px 4px; border-radius: 10px; font-size: 13px; font-weight: 700; text-shadow: 0 2px 0 var(--ink); }
.icon:hover, .icon:focus-visible { background: rgba(255,255,255,.1); }
.ic { width: 46px; height: 46px; border: var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); background: var(--paper) center/28px no-repeat; }
.ic-phone { background-color: var(--teal); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%2322172f' stroke-width='1.5' d='M6.6 2.5 9.4 5.3c.5.5.5 1.2.1 1.7L8 8.7a12 12 0 0 0 7.3 7.3l1.7-1.5c.5-.4 1.2-.4 1.7.1l2.8 2.8c.5.5.5 1.3 0 1.8l-1.7 1.7c-1 1-2.6 1.3-3.9.7A20 20 0 0 1 2.4 8.1c-.6-1.3-.3-2.9.7-3.9l1.7-1.7c.5-.5 1.3-.5 1.8 0Z'/%3E%3C/svg%3E"); }
.ic-tool { background-color: var(--coin); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='18' height='12' rx='2' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Cpath d='M6 13l3-3 3 2 4-5' fill='none' stroke='%23ff5b49' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9 20h6' stroke='%2322172f' stroke-width='2'/%3E%3C/svg%3E"); }
.ic-shelf { background-color: var(--tomato); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 8h14l-1 12H6Z' fill='%23fff' stroke='%2322172f' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M9 8V6a3 3 0 0 1 6 0v2' fill='none' stroke='%2322172f' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ic-office { background-color: var(--sky); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='9' r='3' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Ccircle cx='16' cy='9' r='3' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Cpath d='M2.5 19c.5-3 2.6-4.5 5.5-4.5s5 1.5 5.5 4.5M10.5 19c.5-3 2.6-4.5 5.5-4.5s5 1.5 5.5 4.5' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3C/svg%3E"); }
.ic-guard { background-color: #9fe3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 20 6v6c0 5-3.5 8.3-8 9.5C7.5 20.3 4 17 4 12V6Z' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Cpath d='m8.5 12 2.5 2.5 4.5-5' fill='none' stroke='%231fae95' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ic-fees { background-color: #c9a7ff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='%23ffcf3f' stroke='%2322172f' stroke-width='1.8'/%3E%3Cpath d='M9 9h6l-6 6h6' fill='none' stroke='%2322172f' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* windows */
.win { position: absolute; display: none; flex-direction: column; background: var(--paper); border: var(--line); border-radius: var(--r-win); box-shadow: var(--shadow); max-height: calc(100% - var(--bar-h) - 20px); min-width: 280px; overflow: hidden; }
.win.open { display: flex; }
.win.modal { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); z-index: 900 !important; width: min(620px, calc(100vw - 24px)); }
.win.modal.open ~ .modal-scrim { display: block; }
.bar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; background: var(--paper-2); border-bottom: var(--line); cursor: grab; user-select: none; touch-action: none; }
.win.top .bar { background: var(--coin); }
.bar .t { font-weight: 800; flex: 1; font-size: 15px; }
.x { width: 30px; height: 30px; border: var(--line); border-radius: 8px; background: var(--tomato); color: #fff; font-weight: 800; font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; }
.body { padding: 14px; overflow: auto; flex: 1; min-height: 0; }

/* default window placement (desktop) */
.win[data-win="phone"] { left: 130px; top: 22px; width: 400px; height: min(720px, calc(100% - var(--bar-h) - 34px)); }
.win[data-win="tool"] { left: 548px; top: 22px; width: 420px; }
.win[data-win="shelf"] { left: 548px; top: 60px; width: 560px; height: min(600px, calc(100% - var(--bar-h) - 80px)); }
.win[data-win="office"] { right: 18px; top: 22px; width: 330px; height: min(560px, calc(100% - var(--bar-h) - 40px)); }
.win[data-win="guard"] { left: 600px; top: 300px; width: 330px; }
.win[data-win="fees"] { left: 560px; top: 40px; width: 420px; }
.win[data-win="lobby"] { left: 548px; top: 22px; width: 440px; }

/* phone: leads */
.phone { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.leads-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.leads-head h3 { margin: 0; font-size: 17px; }
.scam-pick { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-app { border: 2px solid var(--ink); border-radius: 999px; padding: 4px 11px; background: #fff; font-weight: 700; font-size: 13px; }
.chip-app[aria-pressed="true"] { background: var(--ink); color: var(--coin); }
.lead { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; border: var(--line); border-radius: 12px; padding: 8px; background: #fff; }
.lead .face { width: 52px; height: 52px; }
.lead h4 { margin: 0; font-size: 15px; line-height: 1.2; }
.lead p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.35; }
.flag { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 800; background: var(--tomato); color: #fff; border-radius: 6px; padding: 1px 6px; }
.flag.waste { background: var(--ink-2); }
.idle-note { text-align: center; color: var(--ink-2); padding: 30px 10px; }

/* phone: live call */
.trust { border: var(--line); border-radius: 12px; padding: 9px 11px; background: var(--ink); color: var(--paper); }
.trust-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; }
.trust-top .mood { color: var(--coin); }
.meter { position: relative; height: 12px; border-radius: 6px; background: #4a3c5c; margin-top: 7px; overflow: visible; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--coin); transition: width .5s cubic-bezier(.2,.8,.2,1), background .3s; }
.meter > b { position: absolute; top: -5px; bottom: -5px; width: 3px; background: var(--paper); border-radius: 2px; }
.meter-legend { display: flex; justify-content: space-between; font-size: 11.5px; margin-top: 5px; color: #cbbfdb; }
.caller { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.caller .face { width: 96px; height: 96px; border-radius: 18px; }
.caller h3 { margin: 0; font-size: 19px; line-height: 1.15; }
.caller p { margin: 3px 0 0; font-size: 13px; color: var(--ink-2); }
.badge { display: inline-block; margin-top: 6px; background: var(--coin); border: 2px solid var(--ink); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-weight: 800; }
.badge.ai { background: var(--sky); margin-left: 4px; }
.log { flex: 1; min-height: 120px; overflow: auto; border: var(--line); border-radius: 12px; background: var(--paper-2); padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.msg { max-width: 86%; padding: 7px 10px; border-radius: 12px; border: 2px solid var(--ink); font-size: 14px; line-height: 1.35; animation: pop .18s ease-out; }
.msg.them { background: #fff; align-self: flex-start; border-bottom-left-radius: 3px; }
.msg.you { background: var(--ink); color: var(--paper); align-self: flex-end; border-bottom-right-radius: 3px; }
.msg.sys { align-self: center; background: var(--coin); font-weight: 700; font-size: 13px; text-align: center; }
.msg .who { display: block; font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.typing { align-self: flex-start; font-size: 13px; color: var(--ink-2); font-style: italic; }
@keyframes pop { from { transform: scale(.94); opacity: 0 } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { flex: 0 1 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 5px 11px; font-size: 13px; font-weight: 600; }
.chip:hover { background: var(--coin); }
.chip.ask { background: var(--teal); color: #fff; }
.say { display: flex; gap: 6px; }
.say input { flex: 1; }
.mic { width: 44px; padding: 0; display: grid; place-items: center; }
.mic.on { background: var(--tomato); color: #fff; }
.call-actions { display: flex; gap: 8px; }
.call-actions .btn { flex: 1; }
.ringing { text-align: center; padding: 22px 0; }
.ringing .face { width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 24px; animation: ring .5s ease-in-out infinite alternate; }
@keyframes ring { from { transform: rotate(-4deg) } to { transform: rotate(4deg) } }
.result { text-align: center; padding: 6px 0; }
.result .amount { font-size: 46px; font-weight: 800; line-height: 1; margin: 6px 0; }
.result .amount.good { color: var(--teal); }
.result .amount.bad { color: var(--tomato); }

/* scam console */
.tool-idle h3 { margin: 0 0 4px; }
.goal { background: var(--paper-2); border: 2px dashed var(--ink-2); border-radius: 10px; padding: 9px 11px; font-size: 14px; }
.codebox { display: grid; gap: 10px; }
.codebox input { font-family: var(--mono); font-size: 22px; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 12px; }
.countdown { height: 10px; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: #fff; }
.countdown i { display: block; height: 100%; background: var(--tomato); transition: width .25s linear; }
.chart { width: 100%; height: 220px; display: block; border: var(--line); border-radius: 12px; background: #1b1226; }
.rugval { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0; }
.rugval b { font-size: 34px; color: var(--teal); font-family: var(--mono); }
.scratch { position: relative; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; margin: 0 auto; border: var(--line); border-radius: 14px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.scratch .prize { font-size: 48px; font-weight: 800; }
.scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.remote { position: relative; height: 230px; border: var(--line); border-radius: 12px; background: #3a7bd5 linear-gradient(160deg, #6aa8ff, #3060b8); overflow: hidden; }
.file { position: absolute; display: grid; justify-items: center; gap: 2px; border: 0; background: none; color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 0 #000; transition: left .9s ease-in-out, top .9s ease-in-out; }
.file::before { content: ''; width: 34px; height: 40px; background: #fff; border: 2px solid var(--ink); border-radius: 4px 12px 4px 4px; box-shadow: 2px 2px 0 var(--ink); }
.file.got { opacity: 0; pointer-events: none; transform: scale(.4); transition: all .2s; }
.vcursor { position: absolute; width: 18px; height: 18px; pointer-events: none; transition: left 1.1s ease, top 1.1s ease; }

/* shelf */
.tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.tab { border: 2px solid var(--ink); border-radius: 8px; padding: 5px 12px; background: #fff; font-weight: 700; }
.tab[aria-selected="true"] { background: var(--ink); color: var(--coin); }
.bank { margin: 0 0 12px; font-weight: 700; }
.bank b { color: var(--teal); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.card { border: var(--line); border-radius: 12px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.card .ch { display: flex; align-items: center; gap: 8px; }
.card .ch h4 { margin: 0; }
.sic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); }
.sic svg { width: 22px; height: 22px; }
.card.locked .sic { filter: grayscale(1); opacity: .7; }
.card h4 { margin: 0; font-size: 15px; }
.card p { margin: 0; font-size: 12.5px; color: var(--ink-2); flex: 1; }
.card .meta { font-size: 12px; font-weight: 800; }
.card.locked { opacity: .5; }
.card .btn { padding: 6px 10px; font-size: 14px; }

/* office */
.office { display: flex; flex-direction: column; gap: 10px; }
.crew { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.crew li { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; align-items: center; font-weight: 700; }
.crew .face { width: 36px; height: 36px; }
.crew small { display: block; font-weight: 500; color: var(--ink-2); font-size: 12px; }
.feed { list-style: none; margin: 0; padding: 8px; flex: 1; min-height: 90px; overflow: auto; border: var(--line); border-radius: 10px; background: var(--paper-2); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.feed li.k-win { color: #12715f; font-weight: 700; }
.feed li.k-bad { color: #c2321f; font-weight: 700; }
.feed li.k-day { font-weight: 800; }
.feed li.k-boss { color: #7a4b00; }
.chatform { display: flex; gap: 6px; }
.chatform input { flex: 1; }

/* lobby + review */
.officecode { font-family: var(--mono); font-size: 46px; font-weight: 700; letter-spacing: .2em; text-align: center; background: var(--ink); color: var(--coin); border-radius: 12px; padding: 10px 0 8px; margin: 4px 0 10px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row .btn { flex: 1; }
.review-boss { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.review-boss .face { width: 70px; height: 70px; border-radius: 14px; }
.review-boss p { margin: 0; font-size: 18px; font-weight: 700; }
.verdict { font-size: 34px; font-weight: 800; line-height: 1.05; margin: 0 0 6px; }
.verdict.pass { color: #12715f; }
.verdict.fail { color: #c2321f; }
.qbar { height: 18px; border: var(--line); border-radius: 9px; overflow: hidden; background: #fff; margin: 6px 0 14px; }
.qbar i { display: block; height: 100%; background: var(--teal); }
.ranks { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.ranks li { display: grid; grid-template-columns: 26px 34px 1fr auto; gap: 8px; align-items: center; }
.ranks .face { width: 34px; height: 34px; }
.quotes { display: grid; gap: 8px; margin: 0 0 14px; }
.quotes blockquote { margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 11px; font-size: 14px; }
.quotes cite { display: block; font-style: normal; font-size: 12px; color: var(--ink-2); font-weight: 700; margin-top: 3px; }
h3.sub { font-size: 15px; margin: 0 0 6px; }

/* guard */
.scan { text-align: center; }
.scan .count { font-size: 50px; font-weight: 800; line-height: 1; }
.scanbar { height: 14px; border: var(--line); border-radius: 8px; overflow: hidden; margin: 12px 0; background: #fff; }
.scanbar i { display: block; height: 100%; width: 0; background: var(--teal); }

/* fees */
.fee-top { display: flex; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 8px; }
.fee-top .pool { color: var(--ink); }
.yours { background: var(--ink); color: var(--paper); border-radius: 12px; padding: 10px 12px; margin: 10px 0; }
.yours b { color: var(--coin); }
.wallet { display: flex; gap: 6px; margin: 8px 0; }
.wallet input { flex: 1; font-family: var(--mono); font-size: 12px; }
.lb { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 3px; font-size: 14px; }
.lb li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--ink-2); padding: 2px 0; }
.ca { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

/* viruses */
.viruses { position: absolute; inset: 0 0 var(--bar-h); pointer-events: none; z-index: 800; }
.virus { position: absolute; width: 250px; pointer-events: auto; background: #fff; border: 3px solid var(--tomato); border-radius: 10px; box-shadow: 5px 5px 0 var(--ink); font-size: 14px; overflow: hidden; animation: pop .2s ease-out; }
.virus header { background: var(--tomato); color: #fff; font-weight: 800; padding: 4px 6px 4px 10px; display: flex; justify-content: space-between; align-items: center; }
.virus header button { border: 2px solid #fff; background: none; color: #fff; border-radius: 6px; width: 24px; height: 24px; padding: 0; font-weight: 800; }
.virus p { margin: 0; padding: 10px; font-weight: 700; }
.virus p span { display: block; font-size: 28px; }

/* boss popup */
.boss { position: absolute; right: 18px; top: 18px; z-index: 950; width: min(340px, calc(100vw - 24px)); display: grid; grid-template-columns: 58px 1fr; gap: 10px; background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; animation: slide .3s cubic-bezier(.2,.9,.3,1.3); }
.boss .bface { width: 58px; height: 58px; display: block; border: var(--line); border-radius: 12px; overflow: hidden; }
.boss b { display: block; }
.boss .role { font-size: 12px; color: var(--ink-2); }
.boss p { margin: 4px 0 0; font-weight: 700; }
@keyframes slide { from { transform: translateX(30px); opacity: 0 } }

/* taskbar */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--bar-h); background: var(--ink); display: flex; align-items: center; gap: 8px; padding: 0 10px; z-index: 1000; border-top: 3px solid #000; }
.start { border: 0; background: none; padding: 0; }
.tasks { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; }
.task { flex: none; border: 2px solid #574a69; background: #33264a; color: var(--paper); border-radius: 8px; padding: 6px 10px; font-weight: 700; font-size: 13px; }
.task.open { border-color: var(--coin); }
.task.top { background: var(--coin); color: var(--ink); }
.task .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); margin-left: 6px; vertical-align: 1px; }
.stats { display: flex; gap: 14px; align-items: center; color: var(--paper); }
.stat { display: grid; line-height: 1.15; }
.stat small { font-size: 11px; color: #b5a7c8; font-weight: 600; }
.stat b { font-family: var(--mono); font-size: 13px; }
#sTeam.met { color: var(--teal); }
#sClockWrap.low b { color: var(--tomato); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4 } }
.heat i { display: block; width: 70px; height: 10px; border-radius: 5px; background: #4a3c5c; overflow: hidden; margin-top: 3px; }
.heat em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coin), var(--tomato)); transition: width .5s; }

.toast { pointer-events: none; position: fixed; left: 50%; bottom: calc(var(--bar-h) + 16px); transform: translateX(-50%); background: var(--ink); color: var(--paper); border: 2px solid var(--coin); border-radius: 10px; padding: 9px 14px; font-weight: 700; z-index: 2000; max-width: calc(100vw - 32px); }

/* ---------- phones and small screens ---------- */
/* ---------- office HUD (standing up) ---------- */
.hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-top { position: absolute; left: 16px; right: 16px; top: 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.hud-stats { display: flex; gap: 6px; flex-wrap: wrap; }
.hs { display: grid; line-height: 1.1; background: var(--paper); border: var(--line); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 6px 12px; min-width: 70px; }
.hs small { font-size: 11px; font-weight: 700; color: var(--ink-2); }
.hs b { font-family: var(--mono); font-size: 15px; }
#hTeam.met { color: #12715f; }
#hClockWrap.low b { color: var(--tomato); animation: blink 1s steps(2) infinite; }
.hs.heat i { display: block; width: 84px; height: 12px; border-radius: 6px; background: #e3d8c4; overflow: hidden; margin-top: 4px; border: 2px solid var(--ink); }
.hs.heat em { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--coin), var(--tomato)); transition: width .5s; }
.hud-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hbtn { border: var(--line); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 7px 12px; font-weight: 700; font-size: 13px; }
.hbtn:active { transform: translate(3px, 3px); box-shadow: none; }
.sitdown { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); border: var(--line); border-radius: 16px; background: var(--coin); box-shadow: 6px 6px 0 var(--ink); padding: 16px 26px; font-size: 20px; font-weight: 800; animation: nudge 1.6s ease-in-out infinite; }
.sitdown:active { transform: translate(calc(-50% + 4px), 4px); box-shadow: 2px 2px 0 var(--ink); }
@keyframes nudge { 50% { transform: translateX(-50%) translateY(-4px); } }
kbd { font-family: var(--mono); font-size: .7em; border: 2px solid var(--ink); border-radius: 6px; padding: 1px 6px; margin-left: 8px; background: #fff; vertical-align: 2px; }
.standup { position: absolute; left: 14px; top: 14px; border: var(--line); border-radius: 10px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); padding: 7px 12px; font-weight: 800; font-size: 13px; z-index: 6; }
.hud .win.hudwin[data-win="lobby"] { left: 24px; top: 90px; width: 420px; max-height: calc(100% - 120px); }
.hud .win.modal.hudwin { max-height: calc(100% - 40px); }
.hud.screen-on .hud-top, .hud.screen-on .sitdown { display: none; }

@media (max-width: 1100px) {
  .login { grid-template-columns: 1fr; justify-items: center; align-content: start; }
  .login-art { display: none; }
  .login-card, .login-side { grid-column: 1; width: 100%; max-width: 520px; }
}
@media (max-width: 760px) {
  :root { --bar-h: 64px; }
  body { font-size: 15px; }
  .login { padding: 16px; gap: 18px; }
  .login-card { padding: 18px 16px 14px; box-shadow: 6px 6px 0 var(--ink); }
  .logo { font-size: 42px; }
  .icons { grid-template-columns: repeat(3, 1fr); left: 16px; right: 16px; top: 16px; justify-items: center; }
  .wallpaper { display: none; }
  .win, .win[data-win] { left: 0 !important; right: 0 !important; top: 0 !important; width: auto !important; height: calc(100% - var(--bar-h)) !important; max-height: none; border-radius: 0; border-width: 0; box-shadow: none; transform: none !important; }
  .win.modal { width: auto; }
  .hud .win.hudwin, .hud .win.modal.hudwin { top: auto !important; bottom: 0 !important; height: auto !important; max-height: 64% !important; border-radius: 18px 18px 0 0; border-width: 2.5px 0 0; transform: none !important; }
  .hud-top { left: 8px; right: 8px; top: 8px; flex-direction: column; }
  .hs { padding: 4px 8px; min-width: 0; }
  .hs b { font-size: 12.5px; }
  .hs.heat i { width: 54px; }
  .hud-tools { justify-content: flex-start; }
  .hbtn { padding: 5px 9px; font-size: 12px; }
  .sitdown { font-size: 17px; padding: 13px 18px; bottom: 18px; width: calc(100% - 32px); }
  .sitdown kbd { display: none; }
  .bar { cursor: default; }
  .taskbar { flex-wrap: wrap; height: var(--bar-h); padding: 4px 8px; align-content: center; row-gap: 3px; }
  .start { display: none; }
  .tasks { order: 2; flex-basis: 100%; }
  .task { flex: 1 1 0; padding: 4px 2px; font-size: 12px; min-width: 0; }
  .login { overflow-x: hidden; }
  .stats { order: 1; width: 100%; justify-content: space-between; gap: 6px; }
  .stat small { font-size: 10px; }
  .stat b { font-size: 11.5px; }
  .heat i { width: 46px; }
  .boss { top: 8px; right: 8px; left: 8px; width: auto; }
  .toast { bottom: auto; top: calc(var(--cab) + 10px); }
  .caller { grid-template-columns: 70px 1fr; }
  .caller .face { width: 70px; height: 70px; }
  .virus { width: min(250px, calc(100vw - 32px)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* screen shake rides on top of everything as an extra offset (set per frame by the 3D world) */
#world, .desk { translate: var(--sx, 0px) var(--sy, 0px); }

/* ---------- first screen: the live office is the hero, the card docks to the side ---------- */
#login { display: block; padding: 0; overflow: hidden;
  background: linear-gradient(90deg, rgba(27,17,40,.78) 0, rgba(27,17,40,.45) 360px, rgba(27,17,40,0) 620px); }
#login .login-card { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); width: 360px; max-height: calc(100% - 40px); overflow: auto; padding: 20px 20px 14px; box-shadow: 8px 8px 0 var(--ink); }
#login .logo { font-size: 40px; }
#login .lede { font-size: 14px; margin-bottom: 14px; }
#login .who { margin-bottom: 12px; }
#login .avatar-btn > span:first-child { width: 62px; height: 62px; }
#login .login-actions { gap: 8px; }
#login #soloBtn { font-size: 20px; padding: 14px 18px; }
#login .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#login .pair .btn { padding: 9px 8px; font-size: 14px; }
#login .fine { font-size: 11.5px; margin-top: 12px; }
#login .login-side { position: absolute; right: 24px; bottom: 24px; width: 290px; background: rgba(34,23,47,.86); border: 2px solid rgba(255,207,63,.55); border-radius: 14px; padding: 12px 14px; text-shadow: none; }
#login .login-side .pool { font-size: 30px; }
#login .login-side p { font-size: 13px; margin: 2px 0 6px; }
#login .login-side details { font-size: 13px; color: #e9e0f3; }
#login .login-side summary { cursor: pointer; font-weight: 700; color: var(--coin); }
#login .login-side .steps { margin: 6px 0 0; font-size: 13px; }
#login .live { position: absolute; right: 24px; top: 20px; color: var(--paper); font-weight: 700; font-size: 13px; background: rgba(34,23,47,.7); border-radius: 999px; padding: 6px 12px; }
#login .live::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); margin-right: 7px; vertical-align: 1px; animation: blink 1.2s steps(2) infinite; }
@media (max-width: 760px) {
  #login { background: linear-gradient(0deg, rgba(27,17,40,.85) 0, rgba(27,17,40,.2) 55%, rgba(27,17,40,0) 70%); }
  #login .login-card { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-height: 64%; border-radius: 20px 20px 0 0; border-width: 2.5px 0 0; box-shadow: 0 -6px 0 var(--ink); padding: 16px 16px 12px; }
  #login .logo { font-size: 32px; }
  #login .logo span { display: inline; margin-left: 6px; }
  #login .lede { font-size: 13px; margin-bottom: 10px; }
  #login .avatar-btn > span:first-child { width: 52px; height: 52px; }
  #login .login-side { right: 12px; left: auto; top: 12px; bottom: auto; width: auto; padding: 6px 12px; }
  #login .login-side p, #login .login-side details { display: none; }
  #login .login-side .pool { font-size: 18px; }
  #login .live { left: 12px; right: auto; top: 14px; font-size: 12px; }
}

/* ---------- walking, voice and mic-only calls ---------- */
.walkhint { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); margin: 0; background: rgba(34,23,47,.82); color: var(--paper); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; white-space: nowrap; pointer-events: none; }
.hud .sitdown:not([hidden]) ~ .walkhint { display: none; }
.joy { position: absolute; left: 22px; bottom: 26px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255,248,236,.18); border: 3px solid rgba(255,248,236,.6); touch-action: none; }
.joy i { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--coin); border: var(--line); box-shadow: 3px 3px 0 var(--ink); }
/* mic toggle: a round icon button, teal and live when on, tomato with a slash when muted */
.micbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; padding: 0; border: var(--line); border-radius: 50%; background: var(--teal); color: #fff; box-shadow: 3px 3px 0 var(--ink); position: relative; transition: background .15s, transform .08s, box-shadow .08s; }
.micbtn:active { transform: translate(3px, 3px); box-shadow: none; }
.micbtn .mic-ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.micbtn .mic-ic rect { fill: currentColor; }
.micbtn .mic-slash { display: none; stroke: #fff; stroke-width: 2.6; }
.micbtn.off { background: var(--tomato); }
.micbtn.off .mic-slash { display: block; }
.micbtn.talking::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid var(--teal); opacity: .7; animation: micpulse 0.9s ease-out infinite; pointer-events: none; }
.micbtn.musicbtn { background: var(--coin); color: var(--ink); }
.micbtn.musicbtn .mic-ic rect, .micbtn.musicbtn .mic-ic circle { fill: currentColor; }
.micbtn.musicbtn .mic-slash { stroke: var(--ink); }
.micbtn.musicbtn.off { background: #cfc5dc; color: var(--ink-2); }
.hud-tools { align-items: center; }
/* login wallet: required, with an inline error */
.wfield { margin: 10px 0 12px; }
.wfield small { font-weight: 500; color: var(--ink-2); margin-left: 4px; }
.wfield input { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: -.02em; }
.wfield input.bad { border-color: var(--tomato); box-shadow: 0 0 0 3px rgba(255, 91, 73, .25); }
.ferr { color: #c0342a; font-size: 12.5px; font-weight: 700; }
/* leaderboard rows: rank, name, scams, prize */
.lb.board li { display: grid; grid-template-columns: 22px 34px 1fr auto auto; gap: 8px; align-items: center; padding: 4px 2px; }
.lb.board li.muted { display: block; }
.pfp { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; border: 2px solid var(--ink); background: #fff; display: block; flex: none; }
.pfp .face { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; }
.pfp svg { width: 100%; height: 100%; display: block; transform: scale(1.35) translateY(6%); } /* crop the portrait in on the face */
.nm small.wl { display: block; font-family: 'Martian Mono', monospace; font-size: 10.5px; color: var(--ink-2); font-weight: 500; }
.podium .who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lb.board .rk { font-family: 'Martian Mono', monospace; font-size: 12px; color: var(--ink-2); }
.lb.board .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb.board .pz { color: var(--teal); font-weight: 700; }
.lb.board li.p1 .rk, .podium .p1 > b:first-child { color: #b88a00; }
.lb.board li.me { background: rgba(255, 207, 63, .3); border-radius: 6px; }
.podium { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 6px; }
.podium li { display: grid; grid-template-columns: 42px 1fr auto; gap: 8px; align-items: center; border: 2px solid var(--ink); border-radius: 10px; padding: 7px 10px; background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.podium li.p1 { background: var(--coin); }
.podium li > b:first-child { font-family: 'Martian Mono', monospace; font-size: 13px; }
/* HUD board while you walk the floor */
.hlb { transform-origin: top right; position: absolute; right: 16px; top: 70px; width: 236px; background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); padding: 8px 10px 6px; font-size: 13px; }
.hlb header { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: 4px; }
.hlb header .mono { font-weight: 700; }
.hlb ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hlb li { display: grid; grid-template-columns: 14px 28px 1fr auto; gap: 6px; align-items: center; padding: 3px 4px; border-radius: 8px; }
.hlb .pfp { width: 28px; height: 28px; }
.hlb .sc { font-size: 15px; }
.hlb li .rk { font-family: 'Martian Mono', monospace; font-size: 11px; color: var(--ink-2); }
.hlb li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hlb li .pz { display: none; }
.hlb li.p1 { background: var(--coin); }
.hlb li.me { outline: 2px solid var(--teal); }
.hlb li.empty { display: block; color: var(--ink-2); }
.hlb-more { margin-top: 4px; width: 100%; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; color: var(--ink-2); cursor: pointer; padding: 2px; }
.hud.screen-on .hlb { display: none; }
@media (max-width: 760px) { .hlb { top: auto; bottom: 150px; right: 10px; width: 196px; font-size: 12px; padding: 6px 8px 4px; } .hlb .pfp { width: 24px; height: 24px; } .hlb li { grid-template-columns: 12px 24px 1fr auto; } .hlb-more { display: none; } }
/* contract address bar: pinned across the top of every screen; everything else sits below it */
:root { --cab: 34px; }
.cabar { position: fixed; top: 0; left: 0; right: 0; height: var(--cab); z-index: 3000; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; background: var(--ink); color: var(--paper); border-bottom: 2px solid #000; font-size: 13px; white-space: nowrap; }
.cab-tk { font-weight: 800; color: var(--coin); }
.cab-l { font-weight: 800; font-size: 11px; letter-spacing: .08em; background: var(--coin); color: var(--ink); border-radius: 5px; padding: 1px 6px; }
.cab-ca { font-family: 'Martian Mono', ui-monospace, monospace; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cab-ca .short { display: none; }
.cab-copy { border: 2px solid var(--paper); background: transparent; color: var(--paper); border-radius: 7px; font: inherit; font-size: 12px; font-weight: 800; padding: 2px 10px; cursor: pointer; }
.cab-copy:hover { background: var(--paper); color: var(--ink); }
.cab-link { color: var(--paper); font-weight: 700; font-size: 12px; text-underline-offset: 3px; }
.login, .hud, .desk { top: var(--cab); }
@media (max-width: 760px) { :root { --cab: 30px; } .cabar { gap: 7px; font-size: 12px; justify-content: flex-start; } .cab-ca .full { display: none; } .cab-ca .short { display: inline; } .cab-link#caX { display: none; } }
/* taskbar race ticker: the top 3 while you're at your desk */
.taskbar .tasks { flex: 0 1 auto; }
.tbboard { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; background: none; border: 0; color: var(--paper); font: inherit; font-size: 12.5px; cursor: pointer; padding: 0 6px; white-space: nowrap; }
.tbboard .tbh { font-weight: 800; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--coin); margin-right: 2px; }
.tbboard .tbr { display: inline-flex; align-items: center; gap: 5px; background: rgba(255, 248, 236, .1); border-radius: 999px; padding: 3px 9px 3px 3px; font-weight: 600; }
.tbboard .tbr i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 248, 236, .2); font-size: 11px; font-weight: 800; }
.tbboard .tbr b { font-family: 'Martian Mono', monospace; font-size: 12px; }
.tbboard .tbr.p1 { background: var(--coin); color: var(--ink); }
.tbboard .tbr.p1 i { background: var(--ink); color: var(--coin); }
.tbboard .tbr.me { box-shadow: inset 0 0 0 2px var(--teal); }
.tbboard .tbr.empty { padding: 3px 10px; color: #cbbfdb; }
.tbboard:hover .tbr { background: rgba(255, 248, 236, .18); } .tbboard:hover .tbr.p1 { background: var(--coin); }
@media (max-width: 760px) { .tbboard { display: none; } .taskbar .tasks { flex: 1; } }
/* new #1: the boards pop and glow */
.hlb.flash, .tbboard.flash { animation: leadflash 1.3s cubic-bezier(.2, .9, .3, 1.3); }
.hlb.flash li.p1, .tbboard.flash .tbr.p1 { animation: leadglow 1.3s ease-out; }
@keyframes leadflash { 0% { transform: scale(1); } 18% { transform: scale(1.07); } 40% { transform: scale(.98); } 100% { transform: scale(1); } }
@keyframes leadglow { 0%, 30% { box-shadow: 0 0 0 0 rgba(255, 207, 63, .9); } 100% { box-shadow: 0 0 0 14px rgba(255, 207, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .hlb.flash, .tbboard.flash, .hlb.flash li.p1, .tbboard.flash .tbr.p1 { animation: none; } }
/* payout screen: your own result first */
.youres { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; border: var(--line); border-radius: 14px; padding: 10px 14px; margin: 4px 0 12px; background: #fff; box-shadow: 4px 4px 0 var(--ink); }
.youres.pop { animation: youpop .5s cubic-bezier(.2, .9, .3, 1.4); }
.youres .pfp { width: 54px; height: 54px; }
.youres small { display: block; font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.youres b { display: block; font-size: 26px; line-height: 1.1; }
.youres span:last-child { font-size: 13px; color: var(--ink-2); }
.youres.won { background: var(--teal); color: #fff; }
.youres.won small, .youres.won span:last-child { color: rgba(255, 255, 255, .85); }
@keyframes youpop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.podium .nm2 { display: grid; min-width: 0; }
.podium .nm2 b { font-family: inherit; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium .nm2 small { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium li.me { outline: 3px solid var(--teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .youres { animation: none; } }
/* seed phrase entry: 12 numbered slots and a bank of words to tap in order */
.seedbox .seedslots { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.seedslots li { display: flex; align-items: center; gap: 6px; min-height: 30px; border: 2px dashed #b9aecb; border-radius: 9px; padding: 3px 8px; font-weight: 700; font-size: 13px; cursor: pointer; background: var(--paper); }
.seedslots li i { font-style: normal; font-family: var(--mono, monospace); font-size: 11px; color: var(--ink-2); width: 16px; }
.seedslots li.on { border-style: solid; border-color: var(--ink); background: #fff; }
.seedslots li.next { border-color: var(--teal); box-shadow: 0 0 0 2px rgba(31, 174, 149, .25); }
.seedbank { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.seedbank .seedw { font-size: 13px; padding: 5px 11px; cursor: pointer; }
.seedbank .seedw:disabled { opacity: .3; cursor: default; }
@media (max-width: 760px) { .seedbox .seedslots { grid-template-columns: repeat(2, 1fr); } }
/* round payout banner (top centre, a few seconds, click-through) */
.paybanner { position: fixed; left: 50%; top: calc(var(--cab) + 64px); z-index: 2100; width: min(440px, calc(100vw - 24px)); transform: translate(-50%, -16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--paper); border: 3px solid var(--coin); border-radius: 16px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45); padding: 10px 12px 9px; }
.paybanner.in { animation: payin .45s cubic-bezier(.2, .9, .3, 1.25) forwards; }
.paybanner.out { animation: payout .35s ease-in forwards; }
@keyframes payin { from { transform: translate(-50%, -16px) scale(.96); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
@keyframes payout { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -12px); opacity: 0; } }
.paybanner header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.paybanner .tag { font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--coin); }
.paybanner .tot { font-family: 'Martian Mono', monospace; font-size: 20px; color: var(--coin); }
.paybanner ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.paybanner li { display: grid; grid-template-columns: 34px 30px 1fr auto; gap: 8px; align-items: center; background: rgba(255, 248, 236, .08); border-radius: 10px; padding: 4px 8px; }
.paybanner li.p1 { background: var(--coin); color: var(--ink); }
.paybanner li.me { box-shadow: inset 0 0 0 2px var(--teal); }
.paybanner .pl { font-family: 'Martian Mono', monospace; font-size: 12px; }
.paybanner .pfp { width: 30px; height: 30px; }
.paybanner .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.paybanner .nm small { display: block; font-weight: 500; font-size: 11px; opacity: .75; }
.paybanner .sol { font-family: 'Martian Mono', monospace; font-size: 14px; color: var(--teal); }
.paybanner li.p1 .sol { color: var(--ink); }
.paybanner .nx { margin: 6px 2px 0; font-size: 12px; opacity: .8; }
@media (max-width: 760px) { .paybanner { top: calc(var(--cab) + 96px); } }
@media (prefers-reduced-motion: reduce) { .paybanner.in { animation: none; opacity: 1; transform: translate(-50%, 0); } .paybanner.out { animation: none; opacity: 0; } }
@keyframes micpulse { from { transform: scale(.85); opacity: .8; } to { transform: scale(1.15); opacity: 0; } }
@media (max-width: 760px) { .micbtn { width: 34px; height: 34px; } .micbtn .mic-ic { width: 19px; height: 19px; } }
.cues { display: grid; gap: 5px; }
.cue-h { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.chip.cue { cursor: default; white-space: normal; text-overflow: clip; border-style: dashed; background: var(--paper); line-height: 1.3; }
.chip.cue:hover { background: var(--paper); }
.chip.cue.ask { background: #dff5ee; color: var(--ink); border-color: var(--teal); }
.micstate { display: flex; gap: 10px; align-items: center; border: var(--line); border-radius: 12px; padding: 10px 12px; background: var(--paper-2); }
.micstate b { display: block; font-size: 14px; }
.micstate .heard { display: block; font-size: 13px; color: var(--ink-2); font-style: italic; min-height: 1.3em; }
.micstate .dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-2); }
.micstate.on { background: #e3f6ef; border-color: var(--teal); }
.micstate.on .dot { background: var(--tomato); box-shadow: 0 0 0 0 rgba(255,91,73,.6); animation: livepulse 1.4s ease-out infinite; }
.micstate.off { background: #ffe6e2; border-color: var(--tomato); display: block; font-size: 13px; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 10px rgba(255,91,73,0); } 100% { box-shadow: 0 0 0 0 rgba(255,91,73,0); } }
.micgate { position: fixed; inset: 0; z-index: 2500; display: grid; place-items: center; background: rgba(27,17,40,.7); padding: 16px; }
.mg-card { background: var(--paper); border: var(--line); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); padding: 22px; max-width: 420px; display: grid; gap: 10px; }
.mg-card h2 { margin: 0; font-size: 26px; line-height: 1.1; }
.mg-card p { margin: 0; color: var(--ink-2); }
@media (max-width: 760px) { .walkhint { bottom: 160px; font-size: 12px; white-space: normal; text-align: center; max-width: calc(100% - 32px); } .hud .sitdown { left: auto; right: 16px; transform: none; width: auto; bottom: 40px; } .hud .sitdown:active { transform: translate(4px, 4px); } }
@media (max-width: 760px) { .hud .sitdown { animation: none; } }
.cues .chip.cue { font-size: 12px; padding: 3px 9px; }
.phone .log { min-height: 80px; }
.phone .micstate { padding: 7px 10px; }
.phone .call-actions { position: sticky; bottom: 0; background: var(--paper); padding-top: 4px; }
.hbtn { white-space: nowrap; }

/* ---------- Training.txt: Rick's memo on your first sit-down ---------- */
.win[data-win="training"] { left: 548px; top: 40px; width: 400px; }
.memo { background: #fffdf4 repeating-linear-gradient(#fffdf4 0 25px, #d9e6f5 25px 26px); padding: 14px 18px 16px 30px; position: relative; display: grid; gap: 8px; }
.memo::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: #ff9a8b; }
.memo-h { margin: 0; font-weight: 800; font-size: 16px; }
.memo-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; line-height: 1.4; }
.memo-steps b { font-weight: 800; }
.memo-warn { margin: 0; font-size: 13px; background: #ffe6e2; border: 2px dashed var(--tomato); border-radius: 8px; padding: 6px 9px; }
.memo-scrawl { margin: 0 0 2px; font-weight: 800; font-style: italic; color: var(--tomato); transform: rotate(-3deg); font-size: 15px; }
.ic-note { background-color: #fffdf4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='2' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5' stroke='%2322172f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.nextshift { margin: 0 0 10px; font-weight: 700; }
.nextshift b { color: var(--tomato); font-size: 1.15em; }

/* ---------- elevator ---------- */
.lift { position: absolute; left: 50%; bottom: 96px; transform: translateX(-50%); width: min(340px, calc(100% - 32px)); background: var(--paper); border: var(--line); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); padding: 12px; display: grid; gap: 8px; }
.lift-h { margin: 0; font-weight: 800; font-size: 18px; }
.lift-btns { display: grid; gap: 6px; }
.lift-btns .btn { display: flex; justify-content: space-between; align-items: center; text-align: left; }
.lift-btns .btn small { font-weight: 600; color: var(--ink-2); }
.lift-btns .btn.here { background: var(--paper-2); }
.lift-btns .btn.mine { background: var(--coin); }
.liftfade { position: fixed; inset: 0; z-index: 2600; background: #140d1e; animation: liftfade .9s ease-in-out forwards; pointer-events: none; }
@keyframes liftfade { 0% { opacity: 0 } 35%, 60% { opacity: 1 } 100% { opacity: 0 } }

/* ---------- player menu: mute / report / remove ---------- */
.playerpop { position: fixed; z-index: 2400; width: 260px; display: grid; gap: 7px; background: var(--paper); border: var(--line); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 10px; }
.playerpop header { display: grid; grid-template-columns: 34px 1fr 30px; gap: 8px; align-items: center; }
.playerpop header > span { width: 34px; height: 34px; display: block; border: 2px solid var(--ink); border-radius: 50%; overflow: hidden; }
.playerpop header svg { width: 100%; height: 100%; display: block; }
.playerpop .btn { width: 100%; text-align: left; }
.playerpop .reasons { display: flex; flex-wrap: wrap; gap: 5px; }
.playerpop .reasons p { width: 100%; margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.playerpop .fine { margin: 0; font-size: 11.5px; }
.crew li { grid-template-columns: 36px 1fr auto auto; }
.mini { border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 800; padding: 0 8px; height: 28px; line-height: 1; }
.mini:hover { background: var(--coin); }
.muted-tag { display: inline !important; color: var(--tomato) !important; font-weight: 800 !important; }
/* the caller nods along while you talk */
#cFace.listening svg { animation: nod 0.9s ease-in-out infinite; transform-origin: 50% 80%; }
@keyframes nod { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(1.5px); } }
/* review panel docks right on desktop so Rick's speech stays visible on the left */
@media (min-width: 761px) { .hud .win.modal.hudwin[data-win="review"] { left: auto !important; right: 24px; top: 50% !important; transform: translateY(-50%); width: min(520px, calc(100vw - 48px)); } }
@media (max-width: 760px) { .hud:has(.win[data-win="review"].open) .hud-top { display: none; } }
.memo { align-content: start; }

/* phone HUD: two tight rows instead of three. While walking you need your desk, the payout clock, your scams and heat;
   round number and office take live in the PC taskbar, and phones already default to Low graphics. */
@media (max-width: 760px) {
  .hud .hs:has(#hDay), .hud .hs:has(#hTeam), .hud #gfxBtn { display: none; }
  .hud-stats { flex-wrap: nowrap; gap: 5px; }
  .hud .hs { padding: 3px 7px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); }
  .hud .hs small { font-size: 9.5px; }
  .hud .hs b { font-size: 12px; }
  .hud .hs.heat i { width: 46px; height: 10px; }
  .hud-tools { gap: 6px; }
}

/* live call on a wide screen: the conversation gets its own full-height column instead of a 2-line slot */
@media (min-width: 761px) {
  .win[data-win="phone"].oncall { width: max(400px, min(660px, calc(100% - 520px))); }
  .win.oncall .phone { display: grid; grid-template-columns: minmax(230px, 270px) 1fr; grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: start; }
  .win.oncall .phone > .trust { grid-column: 1; grid-row: 1; }
  .win.oncall .phone > .caller { grid-column: 1; grid-row: 2; grid-template-columns: 72px 1fr; }
  .win.oncall .phone > .caller .face { width: 72px; height: 72px; }
  .win.oncall .phone > #cBottom { grid-column: 1; grid-row: 3; align-self: stretch; overflow: auto; display: grid; gap: 8px; align-content: start; }
  .win.oncall .phone > .obj { grid-column: 2; grid-row: 1; }
  .win.oncall .phone > .log { grid-column: 2; grid-row: 2 / -1; align-self: stretch; min-height: 0; height: 100%; }
}

/* incoming calls */
.incoming { border: var(--line); border-radius: 14px; background: var(--ink); color: var(--paper); padding: 10px 12px 12px; box-shadow: 4px 4px 0 var(--coin); display: grid; gap: 9px; animation: inbuzz 1s ease-in-out infinite; }
.in-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.in-top .muted { margin-left: auto; font-size: 12px; color: #cdbfe0; }
.in-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 0 rgba(31,174,149,.7); animation: inping 1s ease-out infinite; }
.in-who { display: grid; grid-template-columns: 56px 1fr; gap: 10px; align-items: center; }
.in-who .face { width: 56px; height: 56px; background: var(--paper); border-radius: 50%; border: var(--line); }
.in-who h4 { margin: 0; font-size: 16px; }
.in-who p { margin: 2px 0 0; font-size: 12.5px; color: #e4d9f2; line-height: 1.35; }
.in-clock { height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.in-clock i { display: block; height: 100%; width: 100%; background: var(--coin); }
.in-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.in-actions .btn { box-shadow: 3px 3px 0 #000; }
.missed { display: inline-block; font-size: 11px; font-weight: 800; color: var(--tomato); text-transform: uppercase; letter-spacing: .04em; }
.badge.in { background: var(--teal); color: #fff; margin-left: 4px; }
@keyframes inbuzz { 0%, 70%, 100% { transform: none } 75% { transform: translateX(-2px) rotate(-.4deg) } 85% { transform: translateX(2px) rotate(.4deg) } }
@keyframes inping { to { box-shadow: 0 0 0 9px rgba(31,174,149,0) } }
@media (prefers-reduced-motion: reduce) { .incoming, .in-dot { animation: none } }

/* phone taskbar: everything inside the bar (stats were spilling over the window and the buttons off the screen's bottom edge).
   Stats become one line each ("You $0"), and the bar leaves room for the iPhone home indicator. */
@media (max-width: 760px) {
  :root { --bar-h: calc(78px + env(safe-area-inset-bottom, 0px)); }
  .taskbar { align-content: start; padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px)); row-gap: 4px; }
  .taskbar .stats { gap: 4px; }
  .taskbar .stat { display: flex; align-items: baseline; gap: 4px; line-height: 1.1; }
  .taskbar .stat small { font-size: 9.5px; text-transform: none; }
  .taskbar .stat b { font-size: 11.5px; }
  .taskbar .stat.heat { align-items: center; }
  .taskbar .stat.heat i { margin-top: 0; width: 40px; }
}

/* ---- objectives: every scam is a checklist that ticks off as you talk ---- */
.obj { border: var(--line); border-radius: 12px; background: #fff; padding: 8px 10px 9px; }
.obj:empty { display: none; }
.obj-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.obj-head b { font-size: 14px; }
.obj-head span { color: var(--ink-2); font-weight: 700; font-size: 12px; }
.obj-head .obj-pay { margin-left: auto; color: #12715f; font-family: var(--mono); font-size: 11.5px; }
.obj-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: none; }
.obj-list li { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 13px; line-height: 1.25; padding: 5px 7px; border-radius: 9px; background: var(--paper-2); color: var(--ink); }
.obj-list .ob-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: var(--paper); border: 2px solid var(--ink); }
.obj-list .ob-n svg { width: 14px; height: 14px; }
.obj-list li.done { background: #e2f5ef; color: #275a50; }
.obj-list li.done .ob-t { text-decoration: line-through; text-decoration-color: rgba(18,113,95,.45); }
.obj-list li.done .ob-n { background: var(--teal); color: #fff; border-color: #12715f; }
.obj-list li.now { background: #fff3cc; box-shadow: inset 0 0 0 2px var(--coin); font-weight: 700; }
.obj-list li.now .ob-n { background: var(--coin); }
.obj-list li.locked { opacity: .55; }
.obj-list em { font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; color: var(--ink-2); display: inline-flex; align-items: center; gap: 3px; }
.obj-list em svg { width: 11px; height: 11px; }
.obj-list em.ready { color: #fff; background: var(--teal); border-radius: 6px; padding: 1px 6px; animation: inping2 1.2s ease-in-out infinite; }
.obj-list li.pop { animation: objpop .6s cubic-bezier(.2, .9, .3, 1.5); }
@keyframes objpop { 0% { transform: scale(.94); background: var(--teal); } 60% { transform: scale(1.03); } }
@keyframes inping2 { 50% { filter: brightness(1.15); transform: scale(1.06); } }

/* caller voice level: bars under the portrait move while they talk */
.caller .vbars { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(22, 1fr); gap: 3px; align-items: end; height: 18px; padding: 0 2px; }
.vbars i { display: block; height: 3px; border-radius: 2px; background: #c9bde0; transition: height .12s; }
.vbars.talking i { background: var(--sky); animation: vbar .5s ease-in-out infinite alternate; }
.vbars.talking i:nth-child(3n) { animation-duration: .38s; }
.vbars.talking i:nth-child(4n+1) { animation-duration: .62s; animation-delay: -.2s; }
.vbars.talking i:nth-child(5n+2) { animation-duration: .44s; animation-delay: -.33s; }
@keyframes vbar { from { height: 3px; } to { height: 17px; } }

/* end of call: a big phone-app banner */
.endcard { border: var(--line); border-radius: 14px; padding: 16px 12px; text-align: center; display: grid; gap: 2px; margin-bottom: 8px; color: #fff; background: #3a3048; }
.endcard b { font-size: 22px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; }
.endcard small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .8; font-weight: 700; }
.endcard.sev { background: repeating-linear-gradient(-45deg, #b52a1b 0 14px, #c2321f 14px 28px); animation: sevshake .4s ease-out; }
.endcard.paid { background: #12715f; }
.endcard.off { background: #22172f; }
@keyframes sevshake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* scam console during a live call: checklist + locked code box */
.tool-live { display: grid; gap: 9px; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; }
.tl-head b { font-size: 20px; color: #a8461c; }
.tl-head span, .tl-sub { font-size: 12.5px; color: var(--ink-2); font-weight: 700; margin: 0; }
.tl-code { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; border: var(--line); border-radius: 12px; padding: 10px; background: var(--paper-2); }
.tl-code label { grid-column: 1 / -1; font-weight: 800; font-size: 13px; }
.tl-code input { border: 2px solid var(--ink); border-radius: 9px; padding: 8px 10px; font-family: var(--mono); background: #fff; opacity: .6; }
.tl-code small { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); }
.tl-reward { margin: 8px 0 4px; font-size: 14px; }
.tl-h { margin: 10px 0 6px; font-size: 14px; }

/* round review: call highlights on the projector */
.projector { position: relative; margin: 6px 0 14px; padding: 14px 14px 12px; border-radius: 14px; border: var(--line); color: #fff8ec; overflow: hidden;
  background: radial-gradient(120% 90% at 50% -10%, rgba(255,207,63,.28), transparent 60%), #1b1326; box-shadow: 4px 4px 0 var(--ink); }
.projector h3 { margin: 0 0 10px; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--coin); }
.hl-list { display: grid; gap: 10px; }
.hl { margin: 0; display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: start; }
.hl .pfp { width: 42px; height: 42px; display: block; }
.hl blockquote { margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; }
.hl figcaption { font-size: 12px; color: #cdbfe0; margin-top: 3px; }
.hl figcaption b { color: #fff8ec; }

/* office clock in the taskbar */
.stat.clockstat b { color: var(--coin); }
@media (max-width: 760px) { .stat.clockstat { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .vbars.talking i, .obj-list li.pop, .endcard.sev, .obj-list em.ready { animation: none; } .vbars.talking i { height: 10px; } }
/* phone: compact objective bar */
.obj .pips { display: inline-flex; gap: 4px; align-items: center; }
.obj .pips i { width: 16px; height: 6px; border-radius: 3px; background: #ddd2c0; }
.obj .pips i.on { background: var(--teal); }
.obj .pips i.now { background: var(--coin); box-shadow: 0 0 0 1.5px var(--ink); }
.obj-now { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 700; line-height: 1.25; background: #fff3cc; border-radius: 9px; padding: 6px 8px; box-shadow: inset 0 0 0 2px var(--coin); }
.obj-now .ob-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--coin); border: 2px solid var(--ink); }
.obj-now .ob-n svg { width: 14px; height: 14px; }
.obj-now em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.obj-now em.ready { color: #fff; background: var(--teal); border-radius: 6px; padding: 1px 6px; animation: inping2 1.2s ease-in-out infinite; }
.obj-now.pop { animation: objpop .6s cubic-bezier(.2, .9, .3, 1.5); }
.obj-head { flex-wrap: wrap; }
.obj-now.over { background: var(--paper-2); box-shadow: inset 0 0 0 2px #d8ccb8; color: var(--ink-2); } .obj-now.over .ob-n { background: var(--paper); }

/* ---------- Caller Creator: players design callers that ring their coworkers ---------- */
.ic-creator { background-color: #e86fa3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='8' r='4' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Cpath d='M2.5 20.5c.6-3.8 3.4-6 7.5-6 1.3 0 2.5.2 3.5.7' fill='%23fff' stroke='%2322172f' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M17.5 13v8M13.5 17h8' stroke='%23ffcf3f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17.5 13v8M13.5 17h8' stroke='%2322172f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.win[data-win="creator"] { left: 130px; top: 22px; width: min(780px, calc(100% - 150px)); height: min(660px, calc(100% - var(--bar-h) - 34px)); }
.creator { container-type: inline-size; }
.cr-grid { display: grid; gap: 16px; }
@container (min-width: 640px) { .cr-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } .cr-side { position: sticky; top: 0; } }
.cr-form { display: grid; gap: 12px; }
.cr-who { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: start; }
.cr-who .avatar-btn > span:first-child { width: 84px; height: 84px; border: var(--line); border-radius: 50%; overflow: hidden; background: var(--paper-2); box-shadow: 3px 3px 0 var(--ink); }
.cr-who .avatar-btn svg { width: 100%; height: 100%; display: block; }
.cr-fields { display: grid; gap: 8px; }
.cr-pair { display: grid; grid-template-columns: 78px 1fr; gap: 8px; }
.cr-age input { width: 100%; }
.creator .field { position: relative; }
.creator .field small.muted { font-weight: 500; font-size: 12px; margin-top: -3px; }
.creator .cnt { position: absolute; right: 0; top: 0; font: 500 11px var(--mono); color: var(--ink-2); }
.creator textarea { font: inherit; color: inherit; border: var(--line); border-radius: var(--r-ctl); background: #fff; padding: 9px 11px; resize: vertical; min-height: 64px; }
.creator input:focus-visible, .creator textarea:focus-visible { outline: 3px solid var(--coin); outline-offset: 1px; }
.cr-traits { border: 0; margin: 0; padding: 0; min-width: 0; }
.cr-traits legend { font-weight: 700; font-size: 13px; padding: 0; margin-bottom: 6px; }
.cr-traits legend small { font-weight: 500; }
.cr-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.trait { display: grid; gap: 1px; text-align: left; border: 2px solid var(--ink); border-radius: 10px; background: #fff; padding: 6px 9px; transition: transform .08s, background .12s; }
.trait b { font-size: 13.5px; }
.trait small { font-size: 11.5px; color: var(--ink-2); line-height: 1.2; }
.trait:hover { background: var(--paper-2); }
.trait[aria-pressed="true"] { background: var(--ink); color: var(--coin); box-shadow: 2px 2px 0 var(--coin); }
.trait[aria-pressed="true"] small { color: #e4d9f2; }
.trait:active { transform: translate(1px, 1px); }
.cr-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cr-actions .btn.big { flex: 1; }
.cr-prev-h { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.cr-prev-h .muted { font-size: 12px; }
.incoming.preview { animation: none; box-shadow: 4px 4px 0 #e86fa3; margin-bottom: 14px; }
.incoming .in-line { margin: 0; font-size: 14px; line-height: 1.35; background: rgba(255,255,255,.08); border-radius: 10px; padding: 7px 10px; overflow-wrap: anywhere; }
.in-who h4, .in-who p { overflow-wrap: anywhere; }
.cr-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cr-item { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; align-items: start; border: 2px solid var(--ink); border-radius: 12px; background: #fff; padding: 7px 8px; }
.cr-item > .face { width: 40px; height: 40px; border: 2px solid var(--ink); border-radius: 50%; overflow: hidden; display: block; background: var(--paper-2); }
.cr-item > .face svg { width: 100%; height: 100%; display: block; }
.cr-item b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.cr-item small { color: var(--ink-2); font-size: 12px; }
.cr-item p { margin: 3px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.3; overflow-wrap: anywhere; }
.cr-btns { display: flex; flex-direction: column; gap: 4px; }
.mini.danger { background: var(--tomato); color: #fff; }
.cr-empty { font-size: 13px; margin: 0 0 12px; }
.cr-fine { margin-top: 14px; }
.maker { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 800; background: #e86fa3; color: #fff; border: 2px solid var(--ink); border-radius: 6px; padding: 0 6px; }
.maker.sm { margin: 0 0 0 4px; font-size: 10.5px; }
.badge.maker { margin-left: 4px; margin-top: 6px; font-size: 12px; padding: 1px 7px; }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; color: #cdbfe0; justify-self: center; }
.linkbtn:hover { color: var(--coin); }
.playerpop header.cr-h { grid-template-columns: 1fr 30px; }
@media (max-width: 760px) { .cr-who { grid-template-columns: 70px 1fr; } .cr-who .avatar-btn > span:first-child { width: 70px; height: 70px; } .cr-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .trait { transition: none; } }
/* desktop icons: wrap into a second column instead of running under the taskbar (8 icons don't fit a short monitor) */
@media (min-width: 761px) { .icons { bottom: calc(var(--bar-h) + 10px); grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 86px); grid-template-columns: none; grid-auto-columns: 92px; align-content: start; } }
/* phone taskbar: buttons size to their label so "Console" and "Callers" aren't clipped */
@media (max-width: 760px) { .taskbar .task { flex: 1 1 auto; padding: 4px 3px; } .tasks { gap: 4px; } }

/* ---------- Webcam: your agent, filmed by the camera on your 3D monitor ---------- */
.ic-cam { background-color: #9fe3c7; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='6' width='18' height='12' rx='3' fill='%23fff' stroke='%2322172f' stroke-width='1.6'/%3E%3Ccircle cx='12' cy='12' r='3.6' fill='%2335507a' stroke='%2322172f' stroke-width='1.6'/%3E%3Ccircle cx='13' cy='11' r='1' fill='%23fff'/%3E%3Ccircle cx='18' cy='8.8' r='1.1' fill='%23ff5b49'/%3E%3C/svg%3E"); }
.icon[aria-pressed="false"] .ic-cam { opacity: .55; filter: grayscale(.6); }
.webcam { position: absolute; right: 16px; bottom: calc(var(--bar-h) + 16px); z-index: 880; width: 240px; margin: 0; border: var(--line); border-radius: 14px; background: #120c1c; box-shadow: var(--shadow); overflow: hidden; touch-action: none; cursor: grab; user-select: none; }
.webcam.dragging { cursor: grabbing; box-shadow: 9px 9px 0 var(--ink); }
.webcam canvas { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
.webcam .wc-rec { position: absolute; left: 8px; top: 7px; display: flex; align-items: center; gap: 5px; font: 700 10.5px var(--mono); color: #fff; text-shadow: 0 1px 0 #000; letter-spacing: .06em; }
.webcam .wc-rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tomato); box-shadow: 0 0 0 2px rgba(0,0,0,.35); animation: recblink 1.2s steps(2, start) infinite; }
.webcam .wc-hot { position: absolute; left: 50%; top: 7px; transform: translateX(-50%); font: 800 11px var(--font); letter-spacing: .08em; color: #fff; background: var(--tomato); border: 2px solid var(--ink); border-radius: 6px; padding: 0 6px; animation: hotpulse .7s ease-in-out infinite alternate; }
.webcam figcaption { position: absolute; left: 7px; bottom: 7px; max-width: calc(100% - 14px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12px var(--font); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 7px; padding: 1px 7px; }
.webcam .wc-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border: 2px solid var(--ink); border-radius: 7px; background: var(--paper); font: 800 16px/1 var(--font); color: var(--ink); display: grid; place-items: center; padding: 0 0 2px; opacity: .85; }
.webcam .wc-x:hover { opacity: 1; background: var(--coin); }
@keyframes recblink { to { visibility: hidden; } }
@keyframes hotpulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }
/* phones: a small thumbnail tucked into the open window's title bar, left of the close button, so it never covers a control */
@media (max-width: 760px) {
  .webcam { width: 52px; right: 48px; top: 1px; bottom: auto; border-width: 2px; border-radius: 8px; box-shadow: none; }
  .webcam figcaption, .webcam .wc-x, .webcam .wc-hot { display: none; }
  .webcam .wc-rec { font-size: 0; left: 4px; top: 4px; gap: 0; } .webcam .wc-rec::before { width: 6px; height: 6px; }
  .webcam.hot { border-color: var(--tomato); box-shadow: 0 0 0 2px var(--tomato); }
}
.webcam.hot { border-color: var(--tomato); }
@media (prefers-reduced-motion: reduce) { .webcam .wc-rec::before, .webcam .wc-hot { animation: none; } }
@media (max-width: 760px) { .desk:has(.webcam:not([hidden])) .icons { top: 54px; } }

/* after a scam: the payout banner stays compact so the transcript (and the crying) stays in view */
.endcard.after { padding: 10px 12px; gap: 3px; }
.endcard.after b { font-size: 17px; }
.endcard.after small { font-size: 12px; text-transform: none; letter-spacing: .01em; opacity: .92; }
@media (max-width: 760px) { .endcard.after ~ .cues .chip:nth-child(n+3) { display: none; } .endcard.after { margin-bottom: 4px; } } /* phones: keep room for the transcript while they cry */

/* ---------- one shared office: the start screen note and the "which floor are you on" welcome card ---------- */
.login-note { margin: 2px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.welcome { position: absolute; left: 50%; top: 92px; transform: translateX(-50%); z-index: 1200; width: min(380px, calc(100vw - 32px)); text-align: center; background: var(--paper); border: var(--line); border-radius: 18px; box-shadow: 8px 8px 0 var(--ink); padding: 16px 18px 18px; pointer-events: auto; }
.welcome.in { animation: wcIn .42s cubic-bezier(.2, .9, .3, 1.25); }
.welcome.out { animation: wcOut .26s ease-in forwards; }
.welcome .wc-kicker { margin: 0; font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.welcome h2 { margin: 4px 0 2px; font-size: 40px; line-height: 1; font-weight: 800; display: grid; gap: 4px; }
.welcome h2 small { font-size: 16px; font-weight: 700; color: var(--teal); }
.welcome .wc-desk { margin: 8px auto 6px; display: inline-block; background: var(--coin); border: 2px solid var(--ink); border-radius: 999px; padding: 3px 14px; font-weight: 700; }
.welcome .wc-desk b { font-family: var(--mono); }
.welcome .wc-how { margin: 4px 0 12px; font-size: 14px; color: var(--ink-2); }
.welcome kbd { font: 700 12px var(--mono); border: 2px solid var(--ink); border-radius: 5px; padding: 0 5px; background: #fff; }
.welcome .btn { width: 100%; }
@keyframes wcIn { from { opacity: 0; transform: translate(-50%, -14px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes wcOut { to { opacity: 0; transform: translate(-50%, -10px) scale(.97); } }
@media (max-width: 760px) { .welcome { top: auto; bottom: 150px; } .welcome h2 { font-size: 34px; } }
@media (prefers-reduced-motion: reduce) { .welcome.in, .welcome.out { animation: none; } }

/* ---------- automatic payouts: "Sent" link to the Solscan tx, and the paid-so-far line ---------- */
.sent { margin-left: 6px; font: 700 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); background: var(--coin); border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 6px; text-decoration: none; vertical-align: 1px; }
.sent:hover { background: var(--teal); color: #fff; }
.auto-pay { font-size: 13px; margin: 0 0 8px; padding: 6px 10px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; }
.auto-pay a { font-weight: 700; }

/* ---------- calls: typing fallback when voice-to-text can't work ---------- */
.typebox { display: flex; gap: 8px; }
.typebox[hidden] { display: none; }
.typebox input { flex: 1; min-width: 0; font: inherit; font-size: 16px; border: var(--line); border-radius: 12px; padding: 9px 12px; background: #fff; color: var(--ink); }
.typebox input:focus-visible { outline: 3px solid var(--coin); outline-offset: 1px; }
.micstate .linkbtn { margin-left: auto; flex: none; align-self: center; font: 700 12px var(--sans, inherit); background: none; border: 0; padding: 4px 2px; color: var(--ink-2); text-decoration: underline; cursor: pointer; }
.micstate.off .linkbtn { display: none; }
.chips.tap .chip { cursor: pointer; }
.chips.tap .chip:hover { background: var(--coin); }
/* typing mode: the status and the type box move above the ideas so they're never scrolled out of a short phone window */
#cBottom:has(.typebox:not([hidden])) { display: grid; gap: 8px; }
#cBottom:has(.typebox:not([hidden])) .endcard { order: 0; }
#cBottom:has(.typebox:not([hidden])) .micstate { order: 1; }
#cBottom:has(.typebox:not([hidden])) .typebox { order: 2; }
#cBottom:has(.typebox:not([hidden])) .cues { order: 3; }
#cBottom:has(.typebox:not([hidden])) .call-actions { order: 4; }
.typebox { min-width: 0; width: 100%; box-sizing: border-box; }
.typebox input { flex: 1 1 0; width: 0; }
.typebox .btn { flex: none; padding-left: 14px; padding-right: 14px; }
#cBottom > * { min-width: 0; }

/* in-browser voice engine downloading (Brave, Firefox, Opera...) */
.micstate.loading { position: relative; overflow: hidden; background: #fff8dc; border-color: var(--ink); }
.micstate.loading .dot { background: var(--coin); animation: livepulse 1.4s ease-out infinite; }
.micstate.loading .bar { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: var(--teal); transition: width .3s ease; }

/* phone taskbar buttons share the width equally, so 8 (or more) always fit instead of the last one being clipped */
@media (max-width: 760px) {
  .taskbar .tasks { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; overflow: hidden; }
  .taskbar .task { min-width: 0; padding: 4px 0; font-size: 10px; letter-spacing: -.035em; overflow: hidden; text-overflow: clip; }
}

/* desktop webcam: starts in the empty gap between the Phone (left) and Office (right) windows, and sits BEHIND
   windows, so it can never cover the chat box, the Scam Console or anything you're working in. Still draggable. */
@media (min-width: 761px) {
  .webcam { z-index: 15; right: auto; left: calc(50% - 29px); }
}

/* a toast and the walking hint used to print on top of each other at the bottom of the screen:
   the hint fades out while a toast is up and comes back after */
.walkhint { transition: opacity .2s ease; }
body:has(#toast:not([hidden])) .walkhint { opacity: 0; }

/* desktop payout panel: starts below the top-right HUD buttons (mic, music, graphics) instead of covering them */
@media (min-width: 761px) {
  .hud .win.modal.hudwin[data-win="review"] { top: 76px !important; transform: none; max-height: calc(100% - 96px) !important; }
}

/* phone: the walking hint sat on top of the "Most scams" board (bottom right); it now sits above it */
@media (max-width: 760px) { .hud .walkhint { bottom: 252px; } }

/* ZoinOS wallpaper, redone: the coin was faded to ~27% and read as a muddy brown stain on the purple.
   Now: full-colour coin with a hard ink shadow and a soft gold halo, sitting on a faint dot grid; calm enough for windows on top. */
.desk { background:
  radial-gradient(circle, rgba(255,248,236,.055) 1.2px, transparent 1.6px) 0 0 / 22px 22px,
  radial-gradient(ellipse at 70% 40%, var(--desk-2), var(--desk) 70%); }
.wallpaper { opacity: 1; }
.wallpaper::before { content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; transform: translate(-50%, -58%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,207,63,.16), rgba(255,207,63,.05) 45%, transparent 70%); }
.wallpaper .coin { position: relative; width: 170px; height: 170px; font-size: 104px; opacity: 1; border: 6px solid var(--ink); transform: rotate(-8deg);
  box-shadow: 10px 10px 0 rgba(18,11,28,.55), inset -14px -16px 0 rgba(0,0,0,.13), inset 10px 10px 0 rgba(255,255,255,.22); }
.wallpaper p { position: relative; text-align: center; color: var(--paper); font-size: 24px; letter-spacing: .01em; text-shadow: 0 2px 0 var(--ink); margin-top: 22px; }
.wallpaper small { display: block; text-align: center; color: #b9a9d0; font-size: 12px; font-weight: 600; text-shadow: none; opacity: 1; margin-top: 2px; }

/* leaderboard: the prize split as gold / silver / bronze chips, and open seats when nobody has scored yet */
.split { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 2px 0 8px; }
.split div { border: 2px solid var(--ink); border-radius: 10px; padding: 5px 8px; box-shadow: 2px 2px 0 var(--ink); font-size: 12px; font-weight: 700; color: var(--ink); min-width: 0; }
.split b { display: block; font-family: 'Martian Mono', monospace; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.split .g { background: #ffcf3f; } .split .s { background: #ddd8e6; } .split .b { background: #e8ad7a; }
.lb.board li.ghost { grid-template-columns: 22px 1fr; border: 2px dashed rgba(34, 23, 47, .28); border-radius: 8px; margin-bottom: 4px; padding: 5px 6px; color: var(--ink-2); }
.lb.board li.ghost .rk { opacity: .55; }
.lb.board li.ghost .nm { font-weight: 700; }
.lb.board li.ghost .nm small { display: block; font-weight: 500; font-size: 12px; }
.lb.board li.ghost-note { display: block; border: 0; padding: 4px 2px 0; font-size: 13px; }