/* My Perfect Internship — v5 interface. Warm paper + espresso, clean and readable. */
:root{
  --ink:#2b2622; --ink-2:#5b5048; --ink-3:#8a7d72;
  --paper:#fbf7f0; --cream:#f3eadc; --line:#e2d5c3; --shadow:0 10px 30px rgba(43,38,34,.18);
  --accent:#c8643b; --accent-2:#e98a5d; --gold:#e0a84a; --sage:#5f8a72;
  --health:#e0675a; --mind:#6c84d4; --rep:#d99b33;
  --outlook:#0f6cbd; --outlook-2:#e8f1fb; --wa:#1d8a66; --wa-dark:#14614a; --wa-paper:#efe6d8;
  --story-size:18px; --radius:14px;
  --sans:"Segoe UI","SF Pro Text",system-ui,-apple-system,Roboto,sans-serif; --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  font-family:var(--sans); color:var(--ink);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#1e1a17;overscroll-behavior:none}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);border-radius:10px;background:var(--paper);padding:.55rem .9rem;transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}
button:hover:not(:disabled){border-color:var(--accent);background:#fff}
button:active:not(:disabled){transform:translateY(1px)}
button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
button.primary:hover:not(:disabled){background:#b4552f;border-color:#b4552f}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover:not(:disabled){background:rgba(200,100,59,.08);border-color:transparent}
.icon-btn{display:inline-grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%}
.ico{display:inline-grid;place-items:center;width:1.15em;height:1.15em;flex:none}
.ico svg{width:100%;height:100%}
.ico.tiny{width:.9em;height:.9em}
.ico.big{width:56px;height:56px}
.muted{color:var(--ink-3)} .small{font-size:12px}

#game{position:relative;height:100svh;display:grid;grid-template-rows:auto 1fr;overflow:hidden;isolation:isolate}
#backdrop{position:absolute;inset:0;z-index:-3;background:#3b332d center/cover no-repeat;transition:filter .4s}
#backdrop.soft{filter:blur(6px) saturate(.9) brightness(.8);transform:scale(1.04)}
.shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(30,24,20,.25),transparent 30%,rgba(30,24,20,.45))}
body[data-kind="hub"] .shade,body[data-kind^="outlook"] .shade,body[data-kind^="wossap"] .shade{background:rgba(40,32,26,.42)}
#stage{position:relative;min-height:0}
.loading{color:#fff;padding:40px;text-align:center}

/* ---------- HUD ---------- */
.hud{position:relative;z-index:10;display:flex;align-items:center;gap:18px;padding:10px 16px;background:rgba(251,247,240,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px rgba(43,38,34,.12)}
.hud-left{display:flex;align-items:center;gap:10px;min-width:0}
.avatar{display:inline-block;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--cream);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.15);flex:none;position:relative}
/* Portraits ship as full-body crops, so the circle has to be told where the head is:
   the hair starts ~1% down the image and the chin ~14%. Sizing by height rather than
   width matters — the crops are 427-502px wide, so a width-based zoom framed the narrow
   ones (Julia, Olivia) tighter and clipped their hair. 574% of the avatar height shows
   hair to chin with a little air either side, at every avatar size. Faces sit ~2% left
   of the crop's centre. */
.avatar img{height:550%;width:auto;position:absolute;left:50%;top:4%;transform:translateX(-50%);pointer-events:none}
.avatar.initials{display:inline-grid;place-items:center;font-weight:700;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--sage),#3f6b56)}
.avatar.sm{width:34px;height:34px}
.avatar.me{width:42px;height:42px;border-color:var(--gold)}
.when{display:grid;line-height:1.1}
.when .time{font-size:22px;font-variant-numeric:tabular-nums;letter-spacing:.5px}
.when .date{font-size:12px;color:var(--ink-2)}
.place{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 10px;border-radius:999px;background:var(--cream);color:var(--ink-2)}
.hud-stats{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.stat{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;font-size:12px;min-width:110px;flex:1;max-width:190px}
.stat-label{color:var(--ink-2);font-weight:600}
.stat .bar{position:relative;height:8px;border-radius:99px;background:#eadfcf;overflow:hidden}
.stat .bar i{position:absolute;inset:0 auto 0 0;border-radius:99px;transition:width .5s ease}
.stat.health .bar i{background:linear-gradient(90deg,#ef8f74,var(--health))}
.stat.mind .bar i{background:linear-gradient(90deg,#93a7ea,var(--mind))}
.stat.rep .bar i{background:linear-gradient(90deg,#f0c56f,var(--rep))}
.stat .bar .neutral{position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--ink-2);opacity:.45}
.stat-value{font-variant-numeric:tabular-nums;font-weight:700;min-width:2ch;text-align:right}
.stat.low .stat-value{color:#b0672a}
.stat.danger .stat-value{color:#c0392b}
.stat.danger .bar{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 3px rgba(192,57,43,.25)}}
.strain{display:inline-flex;align-items:center;gap:6px;flex:none;padding:3px 9px 3px 7px;border-radius:99px;font-size:12px;font-weight:700;background:#efe6d8;color:var(--ink-2);--sc:#7a9a6e}
.strain .ico{width:15px;height:15px;color:var(--sc)}
.strain .segs{display:inline-flex;gap:2px}
.strain .segs i{width:6px;height:10px;border-radius:2px;background:#dccfbd}
.strain .segs i.on{background:var(--sc)}
.strain.s1{--sc:#c9a23c}
.strain.s2{--sc:#d0752f;background:#f6e3d2;color:#8d4a1d}
.strain.s3{--sc:#c0392b;background:#f7dcd6;color:#9b2b20}
.strain.s3 .ico{animation:fumes 1.1s steps(2,end) infinite}
@keyframes fumes{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.strain.s3 .ico{animation:none}}
.stat.money{display:inline-flex;gap:5px;min-width:auto;flex:none;color:#8a5a12}
.stat.money .unit{color:var(--ink-3);font-size:11px}
.bonds{display:flex;gap:6px;flex:none}
.bond{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;padding:3px 8px;border-radius:999px;background:var(--cream);color:var(--ink-2)}
.bond .ico{color:var(--accent)}
.bond.danger{background:#f9dcd6;color:#9e2f22}
.hud-right{display:flex;align-items:center;gap:6px;margin-left:auto;min-width:0;flex:0 1 auto}
.hud-right>*{flex:none}
.hud-right>.next-deadline{flex:0 1 auto;min-width:0}
.next-deadline .nd-when{white-space:nowrap}
.next-deadline{display:inline-flex;align-items:center;gap:7px;max-width:290px;font-size:12px;border-radius:999px;padding:6px 12px;background:#fff;border-color:var(--line)}
.next-deadline .nd-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.next-deadline .nd-when{color:var(--ink-3);white-space:nowrap}
.next-deadline.soon{border-color:var(--gold);background:#fff6e2}
.next-deadline.overdue{border-color:#d35745;background:#fde7e3;color:#8f2a1d}
.next-deadline.overdue .nd-when{color:#8f2a1d}
.app-btn{position:relative;display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 11px;border-radius:10px;background:#fff}
.app-btn.mail .ico{color:var(--outlook)} .app-btn.chat .ico{color:var(--wa)} .app-btn.cal .ico{color:var(--accent)}
.app-btn .badge,.spot .badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);color:#fff;font:700 11px/18px var(--sans);font-style:normal;text-align:center;box-shadow:0 0 0 2px #fff}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;line-height:1;padding:4px 8px;border-radius:999px;background:var(--cream);color:var(--ink-2);white-space:nowrap}
.chip.time{background:#eef0f7;color:#3f4f86}
.chip.money{background:#fbefd6;color:#7b5310}
.chip.free{background:#e3f1e8;color:#2d6b4a}
.chip.effect{background:#e8f1eb;color:#2d6b4a}
.chip.effect.minus{background:#fbe6e1;color:#9a3b2a}
.chip.warn{background:#fde1dc;color:#9e2f22;font-weight:600}
.chip.due{background:#fff3dc;color:#7b5310}
.chip.dc{background:#ebe5f7;color:#4f3f86}

/* ---------- notice + dialog ---------- */
#notice{position:fixed;z-index:60;left:50%;bottom:22px;transform:translateX(-50%);max-width:min(520px,calc(100% - 24px));margin:0;padding:12px 18px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:var(--shadow)}
dialog{width:min(640px,calc(100% - 24px));max-height:calc(100svh - 36px);padding:26px;border:0;border-radius:18px;background:var(--paper);color:var(--ink);box-shadow:0 20px 70px rgba(0,0,0,.45)}
dialog::backdrop{background:rgba(30,24,20,.6);backdrop-filter:blur(3px)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.dialog-head h2{margin:0;font:600 26px var(--serif)}
dialog section{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}
dialog h3{margin:0 0 10px;font-size:15px}
.menu-description{color:var(--ink-3);font-size:13px}
.save-slot{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.save-slot strong{display:block;font-size:14px}.save-slot small{color:var(--ink-3);font-size:12px}
.auto-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--ink-2)}
.setting{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:14px}
dialog footer{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;display:grid;gap:8px;justify-items:start}

#overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:20px;background:rgba(30,24,20,.45);backdrop-filter:blur(2px)}
#overlay[hidden]{display:none}

.probe{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Sound toggle: visibly off when muted. */
.icon-btn.muted{opacity:.5}
.icon-btn.muted:hover{opacity:.75}

/* Reputation level chip: progress beyond the 100-point bar. */
.level-chip{display:inline-flex;align-items:center;padding:2px 7px;border-radius:99px;background:#f0e2c6;color:#6b4f22;font-size:11px;font-weight:800;letter-spacing:.03em;white-space:nowrap;cursor:help}

/* Support the developer: a menu row and a two-button modal. */
.menu-support{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.menu-support small{color:var(--ink-2);font-size:11.5px}
#support-host{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:24px}
#support-host[hidden]{display:none}
.support-window{max-width:520px;display:flex;flex-direction:column;gap:10px;text-align:left}
.support-window h2{margin:0;font-size:20px}
.support-note{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.support-link{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid #b9a486;border-radius:11px;text-decoration:none;color:var(--ink);background:#fffdf7}
.support-link:hover{background:#f7ecd6;border-color:#a8854a}
.support-link b{font-size:14.5px}
.support-link span{font-size:12px;color:var(--ink-2)}
.support-usdt{margin:0;font-size:12.5px;color:var(--ink-2);word-break:break-all}
.support-usdt code{background:#f2e7d2;padding:1px 5px;border-radius:5px;color:var(--ink);font-size:11.5px}

button.primary{background:#8f3f21;border-color:#8f3f21}
button.primary:hover:not(:disabled){background:#7b341a;border-color:#7b341a}

#menu-dialog{max-height:calc(100svh - 28px);overflow:auto}
#menu-dialog .menu-row{position:sticky;bottom:0;background:var(--paper);padding-top:8px}
.speaker::after{content:': '}

.title-btn.primary,.title-actions .primary{background:#8f3f21;border-color:#8f3f21;color:#fff}
.title-sub,.title-note{color:#4a4138}
.next-deadline .nd-when{color:#4a4138}
.stat.low .stat-value{color:#7a2e0a}
.stat.money .unit{color:#4a4138}
.menu-desc,.save-meta,.save-empty,.dialog small{color:#4a4138}
.hud-tip h1,.hud-tip h2,.hud-tip h3,.how-to h1,.how-to h2,.how-to h3{color:#4a4138}

/* Functional text on the title/menu screens and work-order kicker. */
#title .primary,.title-screen .primary,.title-actions .primary,.title-btn.primary,.title-card .primary{background:#7d351a!important;border-color:#7d351a!important;color:#fff!important}
.title-subtitle,.title-sub,.title-tagline,.title-build,.title-meta,.title-note,.title-credit{color:#3f372f!important}
#menu-dialog p,#menu-dialog small,.menu-copy,.menu-note,.menu-hint{color:#3f372f!important}
.work-order .kicker{color:#4a4138!important}
#scene-title:focus-visible,.ending-title:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

.title-tagline,.title-kicker,.title-version{color:#f3eadc!important}
.title-shade{background:linear-gradient(90deg,rgba(20,16,12,.72),rgba(20,16,12,.25))!important}
#menu-dialog p,#menu-dialog small,#menu-dialog .save-slot,#menu-dialog .setting,#menu-dialog label,#menu-dialog legend{color:#3f372f!important}
.stat-label,.stat-value,.stat.money .unit,.strain,.bond,.chip,.count{color:#2b2622!important}
.ol-email-head b,.ol-email-head span,.ol-email-line,.ol-body{color:#3f372f!important}
.title-btn.support,.title-btn.secondary{color:#fbf7f0!important;border-color:rgba(251,247,240,.55)!important}

.hud .chip,.hud .stat-label,.hud .stat-value,.wa-msg time,.wa-day,.wa-note{color:#3f372f!important}

.wa-msg time,.wa-day,.wa-who,.badge,.app-btn span{color:#2b2622!important}
.wa-note{color:#3f372f!important}

.wa-msg p,.wa-msg .wa-who,.wa-chat b,.wa-chat small{color:#2b2622!important}
.wa-note p{color:#3f372f!important}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.badge{background:#8f3f21!important;color:#fff!important}

.howto h3,.howto .kicker,.result .scene-name,.ol-toolbar,.ol-search,.oa small,.rv-compact,.rv-criteria{color:#2b2622!important}
.rv-compact{font-size:13px;margin:6px 0 0}

.gates-chip{font-size:12px;padding:3px 8px;border-radius:999px;background:#3f372f;color:#fbf7f0;border:1px solid #5a4f43}
.gates-chip.met{background:#2f5d3a;border-color:#7fbf8f;color:#fff}

.wa-msg,.wa-msg *,.wa-chat,.wa-chat *{color:#2b2622!important}
.howto h3,.looking-free,.result .scene-name,.ol-toolbar,.ol-toolbar *{color:#2b2622!important}
.gates-chip{max-width:150px;font-size:11px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gates-chip:focus-visible{outline:2px solid #f3eadc;outline-offset:2px}

/* ---------- Walkable map ---------- */
.map-view{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-rows:auto minmax(0,1fr);gap:14px 18px;padding:14px 18px 18px}
.map-title{grid-column:1;display:flex;align-items:baseline;gap:10px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.map-title span{font:600 20px var(--serif)} .map-title small{opacity:.8;font-size:12px}
.map-frame{grid-column:1;grid-row:2;position:relative;align-self:center;justify-self:center;min-width:0;width:min(100%,calc((100svh - 150px) * 1.5625));aspect-ratio:1000/640}
.plan{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 14px 30px rgba(0,0,0,.35))}
.plan-floor{stroke:#d6c4ab;stroke-width:3}
.room{stroke:#c9b49a;stroke-width:3}
.room-label{font:600 15px var(--sans);fill:#7a6655;letter-spacing:.3px}
.f-desk{fill:#fff;stroke:#c9b49a;stroke-width:1.5}.f-desk.wood{fill:#d8b48c;stroke:#b58f66}
.f-screen{fill:#56636e}.f-screen-tv{fill:#3c434a}
.f-chair{fill:#8fa49a;opacity:.75}
.f-table{fill:#e9d6bb;stroke:#c9a97f;stroke-width:1.5}
.f-sofa{fill:#e2c3ab;stroke:#c79f80;stroke-width:1.5}
.f-counter{fill:#e7ddd0;stroke:#c9b49a}
.f-plant{fill:#7fae84;stroke:#5d8b63;stroke-width:2}
.f-glass{fill:#9cc3d6;opacity:.7}
.f-bed{fill:#f4f0ea;stroke:#c9b49a;stroke-width:2}.f-pillow{fill:#e2d8ee}
.spots{position:absolute;inset:0}
.spot{position:absolute;transform:translate(-50%,-50%);user-select:none;-webkit-user-select:none;display:grid;justify-items:center;gap:3px;padding:0;border:0;background:none;z-index:2}
.spot:hover:not(:disabled){background:none}
/* Spots stay put when pressed: the global button press nudge would drop their centring and make them jump away from the cursor. */
.spot:active:not(:disabled){transform:translate(-50%,-50%)}
.spot .tag{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 1px 3px rgba(0,0,0,.15);white-space:nowrap}
.spot.person .avatar{width:54px;height:54px;border:3px solid #fff;transition:transform .15s}
.spot.person:hover .avatar{box-shadow:0 0 0 3px var(--accent),0 3px 10px rgba(0,0,0,.25)}
.spot.person.away{opacity:.38;filter:grayscale(1)}
.spot.thing>.ico{width:42px;height:42px;padding:9px;border-radius:12px;background:#fff;color:var(--ink-2);box-shadow:0 2px 6px rgba(0,0,0,.18);transition:transform .15s}
.spot.thing:hover>.ico{box-shadow:0 0 0 3px var(--accent),0 3px 10px rgba(0,0,0,.25)}
.spot.has>.ico,.spot.has .avatar{box-shadow:0 0 0 3px var(--gold),0 3px 10px rgba(0,0,0,.25)}
.spot.has>.ico{color:var(--accent)}
.spot.open .tag{background:var(--ink);color:#fff}
.spot .badge{top:-4px;right:-4px}
.jason{position:absolute;transform:translate(-50%,-50%);z-index:1;transition-property:left,top;transition-timing-function:linear;pointer-events:none}
.jason .avatar{width:46px;height:46px;border:3px solid var(--gold);position:relative;z-index:1}
.jason .walker-shadow{position:absolute;left:50%;bottom:-6px;width:34px;height:8px;margin-left:-17px;border-radius:50%;background:rgba(0,0,0,.25)}
.jason.walking .avatar{animation:bob .32s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-4px) rotate(2deg)}}
.map-caption{grid-column:2;grid-row:1/3;align-self:end;max-height:100%;overflow:auto;padding:18px 18px 16px;border-radius:var(--radius);background:rgba(251,247,240,.95);box-shadow:var(--shadow)}
.map-tip{margin:0 0 14px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid var(--gold);box-shadow:0 3px 12px rgba(0,0,0,.08)}
.map-tip h2{margin:0 0 6px;font:600 15px var(--sans);color:var(--accent)}
.map-tip ul{margin:0 0 10px;padding-left:18px;font-size:13.5px;line-height:1.45}
.map-tip li{margin:3px 0}
.map-caption h1{margin:0 0 6px;font:600 19px var(--serif)}
.caption-story{font-family:var(--serif);font-size:calc(var(--story-size) - 2px);line-height:1.5;color:var(--ink-2)}
.caption-story p{margin:.3em 0 .6em}
.caption-story blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--gold);background:var(--cream);border-radius:0 8px 8px 0}
.hint{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:10px;margin:10px 0 4px}
.caption-actions{display:flex;flex-wrap:wrap;gap:6px}
.caption-actions button{font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
.room-card{grid-column:2;grid-row:1/3;align-self:stretch;display:flex;flex-direction:column;min-height:0;border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);animation:slidein .22s ease-out;z-index:5}
.map-view.card-open .map-caption{display:none}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}}
.rc-photo{position:relative;height:170px;flex:none;background:#ccc center/cover}
.rc-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(30,24,20,.35))}
.rc-sprite{position:absolute;bottom:-60px;right:12px;height:220px;z-index:1;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.rc-photo .close{position:absolute;top:10px;left:10px;z-index:2;background:rgba(255,255,255,.9)}
.rc-body{padding:14px 16px 18px;overflow:auto;position:relative;z-index:2;background:var(--paper)}
.rc-body h2{margin:0;font:600 21px var(--serif)}
.rc-room{margin:2px 0 12px;font-size:12.5px;color:var(--ink-3)}
.talk{display:inline-flex;gap:6px;align-items:center;font-size:13px;border-radius:999px;margin-bottom:8px}
.talk-line{margin:6px 0 12px;padding:10px 14px;border-radius:14px 14px 14px 4px;background:#fff;border:1px solid var(--line);font-family:var(--serif);font-size:15px;line-height:1.45}
.rc-group h3{margin:14px 0 6px;font-size:11px;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.action-card{display:grid;gap:6px;width:100%;text-align:left;margin:0 0 8px;padding:11px 13px;border-radius:12px;background:#fff}
.action-card .ac-title{font-weight:600;font-size:14.5px}
.action-card:hover:not(:disabled){box-shadow:0 4px 14px rgba(200,100,59,.15)}
.action-card.overdue{border-color:#e3a397;background:#fff6f4}

/* The bar: dark wood, warm light */
.map-view[data-location="bar"] .room{stroke:#2a1f1a}
.map-view[data-location="bar"] .room-label{fill:#f1dcc4}
.map-view[data-location="bar"] .plan-floor{stroke:#2a1f1a}
.f-counter.bar{fill:#7b4f33;stroke:#4d3020}
.f-shelf{fill:#8a6a4a;stroke:#4d3020}
.f-table.bar{fill:#9a6b48;stroke:#5c3b26}
.f-chair.stool{fill:#c9935c;opacity:.9}
.task-pick{margin:0 0 8px;border-radius:12px;border:1px solid var(--accent);background:#fff;overflow:hidden}
.task-pick .action-card{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line)}
.task-efforts{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;padding:2px 13px 14px}
.effort-btn{display:grid;gap:5px;text-align:left;padding:9px 12px;border-radius:10px;background:var(--cream);border-color:transparent}
.effort-btn .ef-name{font-weight:600;font-size:13.5px}
.effort-btn .ef-odds{font-size:11.5px;font-weight:700;color:#2d6b4a;font-variant-numeric:tabular-nums}
.effort-btn:hover:not(:disabled){border-color:var(--accent);background:#fff}
.effort-btn.blocked{opacity:.6;cursor:not-allowed}
.task-brief{margin:0;padding:2px 13px 10px;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.task-note{margin:0;padding:0 13px 10px;font-size:12.5px;color:#9a5a1e}
.action-card.blocked{opacity:.6;cursor:not-allowed}
.ac-blocked{font-size:12px;color:#a0442c}

/* ---------- Desk (office home screen) ---------- */
.desk-view{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:auto minmax(0,1fr);gap:14px 18px;padding:14px 18px 18px}
.desk-scene{grid-column:1;grid-row:2;position:relative;min-height:0;container-type:size}
.desk-jason{position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:min(88cqh,760px);width:auto;filter:drop-shadow(4px 10px 8px rgba(30,24,20,.35));pointer-events:none}
.minimap{position:absolute;left:0;bottom:0;width:min(300px,40cqw);padding:8px 8px 10px;border-radius:14px;background:rgba(251,247,240,.94);box-shadow:var(--shadow);display:grid;gap:6px;text-align:left;border:1px solid rgba(255,255,255,.7)}
.minimap:hover:not(:disabled){background:#fff;box-shadow:0 0 0 3px var(--gold),var(--shadow)}
.mm-plan{position:relative;display:block;aspect-ratio:1000/640;pointer-events:none}
.mm-plan .plan{filter:none}
.mm-plan .room-label{display:none}
.mm-label{position:relative;display:flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px}
.mm-label .badge{position:static;margin-left:auto;box-shadow:none}
.desk-card{animation:none}
.desk-card .rc-body{height:100%;padding:18px}
.desk-card h1{margin:0 0 6px;font:600 21px var(--serif)}
.desk-card .caption-actions{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.to-desk{align-self:center;display:inline-flex;gap:4px;align-items:center;padding:5px 12px 5px 8px;border-radius:999px;font:600 12.5px var(--sans);background:rgba(251,247,240,.95);color:var(--ink);text-shadow:none}

.task-brief{white-space:pre-line}

/* ---------- App windows (Outlook / Wossap / Calendar) ---------- */
.app-window{position:absolute;inset:18px;margin:auto;max-width:1240px;max-height:820px;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.45);animation:appin .22s ease-out}
#overlay .app-window{position:relative;inset:auto;width:min(1180px,100%);height:min(780px,100%)}
@keyframes appin{from{opacity:0;transform:translateY(14px) scale(.985)}}
.app-window .close{margin-left:auto;background:transparent;border-color:transparent;color:inherit}
.app-window .close:hover{background:rgba(255,255,255,.18)}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.count{font-style:normal;margin-left:auto;font-size:11px;font-weight:700;padding:1px 7px;border-radius:9px;background:rgba(15,108,189,.12);color:var(--outlook)}

/* Outlook */
.ol-top{display:flex;align-items:center;gap:14px;padding:9px 12px 9px 16px;background:var(--outlook);color:#fff}
.ol-search{display:inline-flex;align-items:center;gap:8px;flex:0 1 360px;padding:6px 12px;border-radius:6px;background:rgba(255,255,255,.92);color:#6b7785;font-size:13px}
.ol-actions{display:flex;gap:6px;flex-wrap:wrap}
.ol-actions .tb{font-size:12.5px;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.ol-actions .tb:hover{background:rgba(255,255,255,.26)!important;border-color:#fff!important}
.ol-body-wrap{flex:1;display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0}
.ol-rail{display:flex;flex-direction:column;gap:2px;padding:10px 8px;background:#f5f7fa;border-right:1px solid #e3e8ee}
.ol-rail button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:6px;background:transparent;font-size:13.5px;text-align:left;color:#26323d}
.ol-rail button .ico{color:#5b6b7b}
.ol-rail button:hover:not(:disabled){background:#e8eef5}
.ol-rail button.active{background:var(--outlook-2);font-weight:600}
.ol-rail button.active .ico{color:var(--outlook)}
.ol-rail .rail-sep{height:1px;background:#e3e8ee;margin:8px 4px}
.ol-rail .switch-app .ico{color:var(--wa)}
.ol-main{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);min-height:0}
.ol-main.cal-mode{display:block;overflow:hidden}
.ol-listpane{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e3e8ee}
.ol-listhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:12px 14px 8px;border-bottom:2px solid var(--outlook);font-size:13.5px}
.ol-listhead b{color:var(--outlook)}
.ol-list{list-style:none;margin:0;padding:0;overflow:auto}
/* Day dividers: the inbox is a week of mail, not one long list of times. */
.ol-day{position:sticky;top:0;z-index:2;padding:8px 12px 6px;font:600 11px var(--sans);letter-spacing:.07em;text-transform:uppercase;color:#5a6878;background:#f2f6fb;border-bottom:1px solid #dbe4ee}
.ol-day span{display:block}
.ol-day.group{color:#3c4a5a;background:#eaf1f9}
.ol-item{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-areas:"av meta" "av subj" "av prev";column-gap:10px;row-gap:1px;width:100%;padding:10px 14px;border:0;border-bottom:1px solid #eef1f4;border-radius:0;background:#fff;text-align:left}
.ol-item .avatar{grid-area:av;align-self:start}
.ol-item.unread{box-shadow:inset 3px 0 0 #2f6fd6}
.ol-item:not(.unread) .ol-subject{font-weight:500}
.ol-item:hover:not(:disabled){background:#f3f7fc}
.ol-item.active{background:#deecf9;box-shadow:inset 3px 0 0 var(--outlook)}
.ol-item.flagged .ol-subject{font-weight:600}
.ol-item.overdue .ol-stamp{color:#c0392b;font-weight:700}
.ol-meta{grid-area:meta;display:flex;justify-content:space-between;gap:8px;font-size:13px}
.ol-from{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-stamp{color:#6b7785;font-size:12px;white-space:nowrap}
.ol-subject{grid-area:subj;display:flex;gap:5px;align-items:center;font-size:13px;color:var(--outlook);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-subject .ico{color:#c0392b}
.ol-preview{grid-area:prev;font-size:12.5px;color:#6b7785;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-reading{overflow:auto;padding:22px 28px;font-size:14.5px;line-height:1.55}
.ol-reading h2{margin:0 0 14px;font-size:21px;font-weight:600}
.ol-sender{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.ol-sender div{display:grid}.ol-sender span{font-size:12px;color:#6b7785}
.ol-facts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.ol-body{padding:12px 0;border-top:1px solid #eef1f4;white-space:pre-line}
.ol-body small{display:block;color:#6b7785;font-size:12px}
.ol-body p{margin:4px 0 0}

/* An assignment is a real email with the one-line summary kept above it as a note. */
.ol-mail{padding:12px 0;border-top:1px solid #eef1f4}
.ol-note{display:flex;gap:8px;align-items:baseline;color:#5d6b7a;font-size:12.5px;line-height:1.45;padding:4px 0 4px 10px;border-left:3px solid #dfe5ec;margin-bottom:10px}
.ol-note small{flex:none;color:#8494a3;font-size:11.5px}
.ol-note p{margin:0}
.ol-email{background:#fff;border:1px solid #e6eaef;border-radius:10px;padding:14px 16px}
.ol-email-head{display:grid;gap:2px;font-size:12px;color:#42505f;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eef1f4}
.ol-email-head div{display:grid;grid-template-columns:58px 1fr;gap:6px}
.ol-email-head b{color:#8494a3;font-weight:600}
.ol-email-line{margin:0 0 10px;font-size:14px;line-height:1.55}
.ol-email-line:last-child{margin-bottom:0}
.ol-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.ol-cta .primary{background:var(--outlook);border-color:var(--outlook)}
.back-mobile{display:none}

/* Calendar */
.calendar{display:flex;flex-direction:column;height:100%;min-height:0;background:#fff}
#overlay .calendar{flex:1}
.cal-toolbar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #e3e8ee;font-size:14px}
.cal-toolbar strong{margin-left:6px}
.legend{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px;color:#6b7785}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:8px}
.lg.assignment{background:var(--outlook)}.lg.personal{background:var(--accent)}.lg.request{background:#8a6bd1}.lg.wave{background:#cfd8e3}
.cal-body{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 250px;min-height:0}
.cal-week{display:flex;flex-direction:column;min-height:0}
.cal-head,.cal-grid{display:grid;grid-template-columns:56px repeat(var(--days),minmax(0,1fr))}
.cal-head{border-bottom:1px solid #e3e8ee}
.cal-dayhead{display:grid;justify-items:center;padding:6px 0;font-size:12px;color:#6b7785}
.cal-dayhead b{font-size:19px;font-weight:600;color:#26323d;width:34px;height:34px;display:grid;place-items:center;border-radius:50%}
.cal-dayhead.today b{background:var(--outlook);color:#fff}
.cal-scroll{flex:1;overflow:auto;min-height:0}
.cal-hours .cal-hour{height:44px;font-size:11px;color:#8a96a3;text-align:right;padding:0 8px;transform:translateY(-7px)}
.cal-day{position:relative;border-left:1px solid #eef1f4}
.cal-day.weekend{background:#fafbfc}
.cal-day.today{background:#f6faff}
.cal-slot{height:44px;border-bottom:1px solid #f1f3f6}
.cal-slot.office{background:rgba(15,108,189,.025)}
.cal-wave{position:absolute;left:0;right:0;height:0;border-top:2px dotted #cfd8e3}
.cal-winddown{position:absolute;left:4px;right:4px;font-size:10px;color:#9aa6b2;border-top:1px dashed #d7dee6;padding-top:1px}
.cal-now{position:absolute;left:-4px;right:0;height:2px;background:#d13438;z-index:3}
.cal-now::before{content:"";position:absolute;left:-4px;top:-4px;width:10px;height:10px;border-radius:50%;background:#d13438}
.cal-event{position:absolute;right:4px;z-index:2;display:grid;align-content:start;gap:1px;padding:4px 7px;border:0;border-left:4px solid var(--outlook);border-radius:5px;background:#deecf9;color:#163b5f;font-size:11.5px;line-height:1.25;text-align:left;overflow:hidden}
.cal-event b{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-event span{color:#41607e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-event.personal{border-color:var(--accent);background:#fbe6dc;color:#6e2f14}
.cal-event.request{border-color:#8a6bd1;background:#ece6fa;color:#3d2c6e}
.cal-event.social{border-color:var(--gold);background:#fbf0d8;color:#6b4a0f}
.cal-event.milestone{left:4px;border-color:#26323d;background:#26323d;color:#fff}
.cal-event.milestone span{color:#d0d6dc}
.cal-event.overdue{border-color:#d13438;background:#fde7e9;color:#8f1d22}
.cal-side{border-left:1px solid #e3e8ee;padding:12px 12px;overflow:auto;background:#fafbfc}
.cal-side h3{display:flex;gap:6px;align-items:center;margin:2px 0 10px;font-size:13px}
.cal-agenda{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cal-agenda button{display:grid;width:100%;gap:2px;padding:8px 10px;border-radius:8px;border:1px solid #e3e8ee;border-left:4px solid var(--outlook);background:#fff;text-align:left;font-size:12.5px}
.cal-agenda .personal button{border-left-color:var(--accent)}.cal-agenda .request button{border-left-color:#8a6bd1}.cal-agenda .social button{border-left-color:var(--gold)}
.cal-agenda .overdue button{border-left-color:#d13438;background:#fff6f6}
.ag-when{color:#6b7785;font-size:11.5px}.ag-title{font-weight:600}.ag-rel{font-size:11.5px;color:#41607e}
.cal-agenda .empty{font-size:13px;color:#6b7785;padding:8px}

/* Wossap */
.wossap .wa-top{display:flex;align-items:center;gap:14px;padding:10px 12px 10px 16px;background:var(--wa-dark);color:#fff}
.wossap .switch-app{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:#fff}
.wossap .switch-app:hover:not(:disabled){background:rgba(255,255,255,.22);border-color:#fff}
.wossap .switch-app .count{background:#fff;color:var(--outlook)}
.wa-body{flex:1;display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);min-height:0}
.wa-side{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e6e1d8;background:#fff}
.wa-search{display:flex;gap:8px;align-items:center;margin:10px;padding:8px 12px;border-radius:8px;background:#f2efe9;color:#8a8278;font-size:13px}
.wa-list{list-style:none;margin:0;padding:0;overflow:auto}
.wa-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;grid-template-areas:"av name time" "av prev badge";column-gap:12px;row-gap:2px;align-items:center;width:100%;padding:10px 14px;border:0;border-bottom:1px solid #f1ede6;border-radius:0;background:#fff;text-align:left}
.wa-row .avatar{grid-area:av;width:46px;height:46px}
.wa-row:hover:not(:disabled){background:#f6f3ee}
.wa-row:disabled{opacity:1;cursor:default}
.wa-row.active{background:#ece7df}
.wa-name{grid-area:name;font-weight:600;font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-name small{font-weight:400;color:#9a9187;font-size:11px;margin-left:6px}
.wa-time{grid-area:time;font-size:11.5px;color:#9a9187}
.wa-preview{grid-area:prev;font-size:13px;color:#7b736a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-row.unread .wa-time{color:var(--wa);font-weight:700}
.wa-row.unread .wa-preview{color:#2b2622;font-weight:600}
.wa-badge{grid-area:badge;font-style:normal;min-width:20px;height:20px;border-radius:10px;background:var(--wa);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 6px}
.wa-thread{display:flex;flex-direction:column;min-height:0;background:var(--wa-paper);background-image:radial-gradient(rgba(120,100,80,.08) 1px,transparent 1px);background-size:18px 18px}
.wa-thread.empty{display:grid;place-items:center;text-align:center;color:#7b736a}
.wa-empty{display:grid;justify-items:center;gap:6px;max-width:420px;padding:20px}
.wa-empty .ico{color:var(--wa);opacity:.8}
.wa-thead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f6f3ee;border-bottom:1px solid #e6e1d8}
.wa-thead div{display:grid;line-height:1.2}.wa-thead span{font-size:12px;color:#8a8278}
.wa-scroll{flex:1;overflow:auto;padding:16px 6% 12px;display:flex;flex-direction:column;gap:6px}
.wa-day{align-self:center;margin:8px 0;padding:4px 12px;border-radius:8px;background:#fff;color:#7b736a;font-size:12px;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.wa-msg{position:relative;max-width:min(560px,78%);padding:7px 10px 18px;border-radius:10px;font-size:14.5px;line-height:1.4;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-msg p{margin:0;white-space:pre-line}
.wa-msg time{position:absolute;right:8px;bottom:3px;display:inline-flex;gap:3px;align-items:center;font-size:10.5px;color:#8a8278}
.wa-msg.in{align-self:flex-start;background:#fff;border-top-left-radius:2px}
.wa-msg.out{align-self:flex-end;background:#d8f3dc;border-top-right-radius:2px}
.wa-msg.out time .ico{color:#4fb6e8}
.wa-who{display:block;font-size:12px;color:var(--accent);margin-bottom:2px}
.wa-note{align-self:center;max-width:min(620px,92%);padding:8px 12px;border-radius:8px;background:#fff7e3;color:#6b5a3e;font-size:13px;line-height:1.45;text-align:center;box-shadow:0 1px 1px rgba(0,0,0,.05)}
.wa-note p{margin:0;white-space:pre-line}.wa-note time{display:block;font-size:10.5px;color:#a8977a;margin-top:2px}
.wa-replies{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;border-top:1px solid #e6e1d8;background:rgba(246,243,238,.9)}
.wa-reply{display:grid;gap:5px;text-align:left;border-radius:14px;border-color:#cfe6d8;background:#fff;font-size:13.5px;max-width:100%}
.wa-reply:hover:not(:disabled){border-color:var(--wa)!important}
.wa-reply.blocked{opacity:.75;cursor:not-allowed}
.wa-compose{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f0ece5;color:#9a9187;font-size:13px}
.wa-compose>span:not(.ico){flex:1;padding:9px 14px;border-radius:20px;background:#fff}
.wa-compose .ico{color:var(--wa)}

.ol-top .muted{color:rgba(255,255,255,.75)}

.ol-item.unread .ol-subject,.ol-item.unread .ol-from{font-weight:700;color:#1f4fa3}

/* Calendar at phone width: the grid stays, scrollable, above the agenda - not a hidden week + blank sheet. */
@media (max-width:760px){
  .calendar .cal-body{display:flex;flex-direction:column;overflow:auto;min-height:0}
  .calendar .cal-week{display:block;flex:0 0 auto;max-height:min(46svh,360px);overflow:auto;border-bottom:1px solid #e3e8ee}
  .calendar .cal-head,.calendar .cal-grid{min-width:620px}
  .calendar .cal-scroll{flex:none;overflow:visible}
  .calendar .cal-side{display:block;flex:1 1 auto;border-left:0;border-top:0;padding:12px 14px 24px;background:var(--paper)}
  .cal-agenda li button{font-size:14px;padding:10px 10px}
  .cal-agenda .ag-when{font-size:12px}
}
.cal-hours .cal-hour{color:#5b6672}

.cal-hours .cal-hour{color:#4f5a66}
.cal-winddown{color:#4f463d}

/* Functional text: darker than the decorative greys it replaced (AA on cream and white). */
.ol-from,.ol-subject,.ol-preview,.ol-stamp{color:#3f4c5a}
.ol-note{color:#3f4c5a}
.ol-note small{color:#4d5a68}
.ol-item.active .ol-subject{color:#18304f}
.ol-item.active .ol-preview,.ol-item.active .ol-stamp{color:#33414f}
.muted,.nd-when,.kicker{color:#4a4138}
.cal-agenda .overdue,.cal-agenda li.overdue button{color:#7a3416}
@media (max-width:760px){.ol-search{display:flex;order:5;flex:1 1 100%}}

@media (max-width:700px){.ol-search{display:flex!important;flex:1 1 100%}}

/* ---------- Story scenes ---------- */
.story-view{position:absolute;inset:0}
.sprites{position:absolute;display:flex;justify-content:space-evenly;align-items:flex-end;inset:10px 6% 0;pointer-events:none;gap:1%;container-type:size;--n:1;opacity:1;transition:opacity .25s ease-out}
.sprites.loading{opacity:0;transition:none}
.sprites .sprite{display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto}
/* Every figure gets the same height (figures are 1600 px canvases), capped so people stay in scale with the rooms
   and shrunk together when the row would overflow the width (sprites are roughly 0.3 as wide as tall). */
.sprites img{display:block;width:auto;max-width:none;height:min(72cqh,calc(96cqw / (var(--n) * .31)));filter:drop-shadow(4px 10px 8px rgba(30,24,20,.35))}
@keyframes spritein{from{opacity:0;transform:translateY(12px)}}
.sprites[data-count="1"]{justify-content:flex-end;padding-right:6%}
.dialogue{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(1000px,calc(100% - 32px));max-height:62%;overflow:auto;padding:20px 26px 20px;border-radius:18px;background:rgba(251,247,240,.96);box-shadow:0 18px 50px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.7)}
.solid .dialogue,.solid .map-caption{background:var(--paper)}
.scene-name{margin:0 0 8px;font:600 12px var(--sans);letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.story-text{font-family:var(--serif);font-size:var(--story-size);line-height:1.55;max-width:80ch;outline:none}
.story-text p{margin:.35em 0 .7em}
.story-text p.line{padding-left:0}
.story-text .speaker{display:inline-block;margin-right:8px;padding:1px 10px;border-radius:999px;background:var(--ink);color:#fff;font:600 12.5px/1.7 var(--sans);vertical-align:2px}
.story-text p.me .speaker{background:var(--accent)}
.story-text blockquote{margin:10px 0;padding:9px 14px;border-left:3px solid var(--gold);background:var(--cream);border-radius:0 10px 10px 0}
.story-text em{color:#6e4b30}
.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px}
.choices.single{grid-template-columns:1fr}
.choices.list{grid-template-columns:1fr}
.choice{display:grid;gap:6px;text-align:left;padding:11px 15px;border-radius:12px;background:#fff;font-size:15px;line-height:1.3;border-color:var(--line)}
.choice p{margin:0}
.choice .c-title{font-weight:600}
.choice:hover:not(:disabled){border-color:var(--accent);box-shadow:0 4px 14px rgba(200,100,59,.15)}
.choices.single .choice{justify-self:end;min-width:260px;background:var(--ink);color:#fff;border-color:var(--ink)}
.choices.single .choice:hover:not(:disabled){background:#000}
.choice.quiet{background:transparent;font-size:13.5px}
.choice.quiet .c-title{font-weight:500}

/* Sheets (menus reached directly, work orders, phone home) */
.sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 28px));max-height:calc(100% - 28px);overflow:auto;padding:20px 22px 22px;border-radius:18px;background:var(--paper);box-shadow:0 24px 70px rgba(0,0,0,.45);animation:appin .22s ease-out}
.sheet header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.sheet header h1{margin:0;font:600 22px var(--serif);flex:1 1 auto}
.sheet header .close{margin-left:auto}
.kicker{display:inline-flex;gap:6px;align-items:center;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--accent)}
.sheet-story{font-family:var(--serif);font-size:calc(var(--story-size) - 1px);line-height:1.5;color:var(--ink-2)}
.sheet-story p{margin:.3em 0 .6em}
.sheet-story blockquote{margin:8px 0;padding:8px 12px;border-left:3px solid var(--gold);background:var(--cream)}
.work-order{width:min(820px,calc(100% - 28px));background:#fffdf8;border-top:6px solid var(--accent)}
.work-order header{justify-content:space-between}
.wo-meta{display:flex;flex-wrap:wrap;gap:5px}
.wo-brief{font-family:var(--serif);font-size:var(--story-size);line-height:1.55}
.wo-brief p:first-child{font:600 22px var(--serif);margin:.1em 0 .4em}
.efforts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 6px}
.effort{display:grid;gap:8px;align-content:start;text-align:left;padding:14px;border-radius:14px;background:#fff;border-width:2px}
.effort b{font:600 18px var(--serif)}
.effort .dice-mode{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--ink-2)}
.effort.adv{border-color:#bcd6c6}.effort.adv b{color:#2d6b4a}
.effort.one{border-color:#d9cdb9}
.effort.dis{border-color:#efc1b3}.effort.dis b{color:#a5452a}
.effort:hover:not(:disabled){box-shadow:0 8px 20px rgba(0,0,0,.12)}
.choices.secondary{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Endings */
.ending-view{position:absolute;inset:0;background:#1b1714}
.ending-plate{position:absolute;inset:14px 14px calc(min(34svh,310px) + 30px);background:center/contain no-repeat}
/* The text scrolls, not the panel, so the Menu button stays reachable on a long ending. */
.ending-text{max-height:min(46svh,430px)}
.ending-text .story-text{max-height:min(32svh,290px);overflow:auto;padding-right:4px}
.ending-title{margin:0 0 6px;font:600 24px var(--serif);color:var(--ink)}
.ending-actions{margin-top:12px;display:flex;justify-content:flex-end}

/* Month-end review: a solid card on a dimmed office, not a translucent one on a busy one. */
.review-view{position:absolute;inset:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);grid-template-rows:max-content max-content;grid-template-areas:"mail month" "choices choices";gap:16px;align-content:center;padding:24px max(24px,calc((100% - 1100px)/2));background:rgba(27,23,20,.62)}
.rv-mail{grid-area:mail;background:var(--paper);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.4);overflow:hidden;animation:appin .22s ease-out}
.rv-head{display:flex;gap:14px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff,var(--paper));border-top:4px solid var(--outlook)}
.rv-head .avatar{width:56px;height:56px;flex:none}
.rv-head h1{margin:2px 0 0;font-size:22px}
.rv-head .kicker{display:inline-flex;gap:6px;align-items:center;color:var(--outlook);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.rv-meta{margin:2px 0 0;color:var(--ink-3);font-size:13px}
.rv-body{padding:18px 22px 22px;font-size:var(--text-size,18px);line-height:1.6}
.rv-month{grid-area:month;align-self:start;background:var(--paper);border-radius:18px;padding:16px 18px;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.rv-month h2,.rv-choices h2{margin:0 0 10px;font-size:15px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2)}
.rv-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rv-fact{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:10px;background:#f1e8db}
.rv-fact span{font-size:12px;color:var(--ink-3)}
.rv-fact b{font-size:20px;font-variant-numeric:tabular-nums}
.rv-fact.low b{color:#b0672a}
.rv-criteria{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.rv-choices{grid-area:choices;background:var(--paper);border-radius:18px;padding:16px 18px;box-shadow:0 16px 50px rgba(0,0,0,.35)}
.rv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.rv-card{min-height:72px;text-align:left;font-weight:600;border:2px solid var(--line);background:#fff}
.rv-card:hover,.rv-card:focus-visible{border-color:var(--accent)}
@media (max-width:900px){
  .review-view{grid-template-columns:1fr;grid-template-rows:max-content max-content max-content;grid-template-areas:"mail" "month" "choices";align-content:start;padding:12px}
  .rv-facts{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:520px){.rv-facts{grid-template-columns:repeat(2,1fr)}}

/* Facts a screen states honestly: due day, DC, dice, reputation. */
.fact-row{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.chip.fact{background:#efe7db;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}

/* The dice, drawn. A result with a roll shows the die, the arithmetic and the margin,
   because one point either side of the DC is the moment worth looking at. */
.roll-card{display:flex;align-items:center;gap:12px;margin:0 0 10px;padding:8px 12px;background:#fbf7f0;border:1px solid var(--line);border-left:4px solid var(--ink-3);border-radius:12px;font-variant-numeric:tabular-nums}
.roll-card.good{border-left-color:var(--sage)}
.roll-card.bad{border-left-color:var(--accent)}
.roll-die{display:grid;place-items:center;width:44px;height:48px;flex:none;background:#fff;border:2px solid var(--gold);border-radius:10px;box-shadow:0 1px 3px rgba(43,38,34,.18);line-height:1}
.roll-die i{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.roll-die b{font-size:20px;color:var(--ink)}
.roll-math{display:grid;gap:1px;min-width:0}
.roll-math b{font-size:15px;color:var(--ink)}
.roll-dropped{font-size:11px;color:var(--ink-3)}
.roll-dc{font-size:11px;color:var(--ink-2)}
.roll-verdict{margin-left:auto;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;background:#efe7db;color:var(--ink-2)}
.roll-card.good .roll-verdict{background:#e2eee6;color:#2f5a44}
.roll-card.bad .roll-verdict{background:#f8e3d8;color:#8c3d19}

/* The month, counted: sentences under the review's stat panel. */
.rv-numbers{margin:0 0 12px;padding-left:18px;color:var(--ink-2);font-size:13px;line-height:1.5}
.rv-numbers li{margin:0 0 3px}

/* The fillword check: a letter grid between the brief and the effort. */
.fw{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.fw-head h2{margin:0;font-size:15px}
.fw-words{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 10px;padding:0}
.fw-word{padding:3px 9px;border-radius:999px;background:#efe7db;color:var(--ink-2);font-size:12px;font-weight:700;letter-spacing:.04em}
.fw-word.done{background:#e2eee6;color:#2f5a44;text-decoration:line-through}
.fw-grid{display:grid;gap:5px;width:100%;max-width:100%}
.fw-cell{aspect-ratio:1;min-width:0;padding:0;border:1px solid var(--line);border-radius:9px;background:#fff;font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
.fw-cell:hover{background:#f3ece1}
.fw-cell.picked{background:var(--gold);border-color:var(--gold);color:#fff}
.fw-cell.first{outline:2px solid var(--ink);outline-offset:1px}
.fw-cell:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.fw-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* The delivery: a short side-scrolling run between the brief and the effort. */
.dl{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.dl-head h2{margin:0;font-size:15px}
.dl-stage{position:relative;border-radius:10px;overflow:hidden;background:#222;line-height:0}
.dl-canvas{width:100%;height:auto;display:block;cursor:pointer;touch-action:manipulation}
.dl-canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.dl-canvas.dl-hit{animation:dl-hit .18s ease}
@keyframes dl-hit{0%{filter:brightness(1.6) saturate(2)}100%{filter:none}}
.dl-meter{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12px;color:var(--ink-2)}
.dl-meter b{color:var(--ink)}
.dl-track{flex:1;height:7px;border-radius:99px;background:#e6dccd;overflow:hidden}
.dl-bar{display:block;height:100%;border-radius:99px;background:var(--gold);transition:width .12s linear}
.dl-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* The folders tower: assemble the bundle, one document at a time. */
.tw{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.tw-head h2{margin:0;font-size:15px}
.tw-stage{position:relative;border-radius:10px;overflow:hidden;background:#efe6d8;line-height:0}
.tw-canvas{width:100%;height:auto;display:block;cursor:pointer;touch-action:manipulation}
.tw-canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tw-canvas.tw-hit{animation:tw-hit .2s ease}
@keyframes tw-hit{0%{filter:brightness(1.5) saturate(2)}100%{filter:none}}
.tw-meter{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12px;color:var(--ink-2)}
.tw-meter b{color:var(--ink)}
.tw-dot{width:5px;height:5px;border-radius:99px;background:#c9b79b;display:inline-block}
.tw-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Mahjong pairs: a term and its translation, matched like tiles. */
.mj{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.mj-head h2{margin:0;font-size:15px}
.mj-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.mj-tile{min-height:56px;min-width:0;border:1px solid #cbb999;border-radius:10px;background:linear-gradient(180deg,#fdf8ee,#efe4cf);color:var(--ink);font-size:12px;font-weight:600;line-height:1.2;padding:6px 8px;cursor:pointer;overflow-wrap:normal;box-shadow:0 2px 0 rgba(90,66,44,.18)}
.mj-tile:hover{background:linear-gradient(180deg,#fffdf6,#f3e9d5)}
.mj-tile.picked{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.mj-tile.matched{opacity:.28;filter:grayscale(1);cursor:default;box-shadow:none}
.mj-tile.wrong{border-color:#b45f4b;background:linear-gradient(180deg,#f6d9d0,#ecc4b8);animation:mj-wrong .35s ease}
@keyframes mj-wrong{0%{transform:translateX(0)}30%{transform:translateX(3px)}60%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.mj-meter{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.mj-meter b{color:var(--ink)}
.mj-dot{width:5px;height:5px;border-radius:99px;background:#c9b79b;display:inline-block}
.mj-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* The tangle: research as five threads that have to be pulled apart. */
.tg{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.tg-head h2{margin:0;font-size:15px}
.tg-legend{display:flex;flex-wrap:wrap;gap:6px 12px;list-style:none;margin:0 0 8px;padding:0;font-size:11.5px;color:var(--ink-2)}
.tg-legend li{display:flex;align-items:center;gap:5px}
.tg-legend i{width:12px;height:3px;border-radius:99px;display:inline-block}
.tg-stage{position:relative;border-radius:10px;overflow:hidden;background:#efe6d8;line-height:0}
.tg-canvas{width:100%;height:auto;display:block;cursor:grab;touch-action:none}
.tg-canvas:active{cursor:grabbing}
.tg-canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.tg-meter{display:flex;align-items:center;gap:8px;margin:8px 0 0;font-size:12px;color:var(--ink-2)}
.tg-meter b{color:var(--ink)}
.tg-dot{width:5px;height:5px;border-radius:99px;background:#c9b79b;display:inline-block}
.tg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* Find the differences: two versions of the same page. */
.df{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.df-head h2{margin:0;font-size:15px}
.df-pages{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.df-page{background:#fffdf7;border:1px solid #d8c7ab;border-radius:8px;padding:10px 12px;min-width:0}
.df-page-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;border-bottom:1px solid #e6d9c3;padding-bottom:5px;margin-bottom:7px;font-size:10.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em}
.df-page-head b{color:var(--ink);font-size:11.5px;text-transform:none;letter-spacing:0}
.df-line{margin:0 0 9px;font-size:12.5px;line-height:1.65;color:#3b3025}
.df-text{white-space:pre-wrap}
.df-tok{display:inline;border:0;border-bottom:1px dashed #c2ad8d;background:transparent;padding:0 1px;margin:0;font:inherit;color:#3b3025;cursor:pointer;border-radius:3px}
.df-tok:hover{background:#f4e9d4}
.df-tok:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.df-tok.found{border-bottom:2px solid #2f6b4f;background:#e4f0e6;color:#1f4a36;font-weight:700;cursor:default}
.df-tok.wrong{background:#f6d9d0;border-bottom-color:#b45f4b;animation:df-wrong .35s ease}
@keyframes df-wrong{0%{transform:translateX(0)}30%{transform:translateX(2px)}60%{transform:translateX(-2px)}100%{transform:translateX(0)}}
.df-meter{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.df-meter b{color:var(--ink)}
.df-dot{width:5px;height:5px;border-radius:99px;background:#c9b79b;display:inline-block}
.df-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
@media (max-width:700px){.df-pages{grid-template-columns:1fr}}

/* Triage: the morning's traffic, sorted before it becomes the day. */
.tr{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbf7f0;min-width:0;max-width:100%}
.tr-head h2{margin:0;font-size:15px}
.tr-piles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 10px}
.tr-pile{border:1px dashed #c2ad8d;border-radius:10px;background:#fffdf7;color:var(--ink);font-size:12px;padding:8px 6px;cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center}
.tr-pile b{font-size:12.5px}
.tr-pile-count{font-size:11px;color:var(--ink-2)}
.tr-pile:hover{background:#f7ecd6;border-style:solid}
.tr-pile.took{background:#e4f0e6;border-color:#2f6b4f}
.tr-pile.wrong{background:#f6d9d0;border-color:#b45f4b;animation:tr-shake .35s ease}
@keyframes tr-shake{0%{transform:translateX(0)}30%{transform:translateX(3px)}60%{transform:translateX(-3px)}100%{transform:translateX(0)}}
@keyframes tr-shake{0%{transform:translateX(0)}30%{transform:translateX(3px)}60%{transform:translateX(-3px)}100%{transform:translateX(0)}}
.tr-list{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow:auto;padding-right:2px}
.tr-item{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;text-align:left;border:1px solid #d8c7ab;border-radius:9px;background:#fffdf7;padding:7px 9px;cursor:pointer;font:inherit;color:var(--ink)}
.tr-item:hover{background:#f7ecd6}
.tr-item.picked{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.tr-item.wrong{border-color:#b45f4b;background:#f9e2dc}
.tr-item.filed{opacity:.72;background:#e9f3ec;border-color:#2f6b4f;border-style:dashed;cursor:default}
.tr-from{font-size:11px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.tr-text{font-size:12.5px;line-height:1.35}
.tr-due{font-size:11px;color:var(--ink-2);white-space:nowrap}
.tr-why{grid-column:1/-1;font-size:11px;color:#2f5a44;line-height:1.3}
.tr-meter{display:flex;align-items:center;gap:8px;margin:10px 0 0;font-size:12px;color:var(--ink-2);flex-wrap:wrap}
.tr-meter b{color:var(--ink)}
.tr-dot{width:5px;height:5px;border-radius:99px;background:#c9b79b;display:inline-block}
.tr-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* "How to play" tooltip: summonable help beside every genre title. */
.howto{position:relative;display:inline-flex;vertical-align:middle;margin-left:7px}
.howto-btn{width:20px;height:20px;border-radius:99px;border:1px solid #b9a486;background:#fffdf7;color:#6b5a45;font:700 13px/1 system-ui,sans-serif;cursor:help;padding:0;display:grid;place-items:center;overflow:visible}
.howto-btn:hover,.howto-btn[aria-expanded='true']{background:var(--gold);border-color:#a8854a;color:#20304a}
.howto-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.howto-tip{position:absolute;top:calc(100% + 6px);left:-8px;z-index:40;width:272px;max-width:70vw;padding:9px 11px;border-radius:9px;background:#3b3025;color:#f6efe2;font-size:11.5px;font-weight:400;line-height:1.4;box-shadow:0 8px 22px rgba(40,26,14,.35);text-align:left}
.howto-tip[hidden]{display:none}
.howto-tip p{margin:0 0 4px}
.howto-tip p:last-child{margin:0;color:#d9c9ae}
.howto-tip::before{content:'';position:absolute;top:-5px;left:14px;width:10px;height:10px;background:#3b3025;transform:rotate(45deg)}

/* Found words stay visible on the board: tinted cells, a line along the path, struck-through chip. */
.fw-board{position:relative;width:100%;max-width:100%}
.fw-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fw-line{fill:none;stroke:#2f6b4f;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.85;animation:fw-line-in .35s ease both}
@keyframes fw-line-in{from{opacity:0}to{opacity:.85}}
.fw-cell.found{background:#e4f0e6;border-color:#2f6b4f;color:#1f4a36;font-weight:800}
.fw-word.done{background:#e2eee6;color:#2f5a44;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#2f6b4f}

/* The mini-game window: full screen, one idea at a time. */
body.challenge-open #stage{overflow:hidden}
#challenge-host{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
#challenge-host[hidden]{display:none}
.challenge-backdrop{position:absolute;inset:0;background:rgba(28,22,16,.55);backdrop-filter:blur(2px)}
.challenge-window{position:relative;width:min(940px,96vw);max-height:92vh;overflow:auto;background:var(--paper,#fffdf7);border-radius:16px;box-shadow:0 24px 70px rgba(20,14,8,.45);padding:16px 18px 18px}
.challenge-window .fw,.challenge-window .dl,.challenge-window .tw,.challenge-window .mj,.challenge-window .tg,.challenge-window .df,.challenge-window .tr{margin:0;border:0;background:transparent;padding:0}
.challenge-close{position:sticky;top:0;margin-left:auto;display:block;z-index:2}
.challenge-window .fw-grid{max-width:520px;margin:0 auto}
.challenge-window .fw-board{display:flex;flex-direction:column;align-items:center}
.challenge-window .mj-grid{max-width:760px;margin:0 auto}
.task-check{display:flex;flex-direction:column;gap:4px;margin:0 0 12px;padding:0 13px}
.check-btn{display:flex;align-items:center;gap:8px;justify-content:center;width:100%;padding:10px 12px;border:1px solid #a8854a;border-radius:10px;background:#f7ecd6;color:var(--ink,#2a2118);font-weight:700;cursor:pointer;font-size:13.5px}
.check-btn:hover{background:#f2e2c4}
.check-btn em{font-style:normal;font-weight:600;color:#6b5a45;font-size:11.5px}

.tw-notice{margin-left:auto;color:#8a4a38;font-weight:700}

/* Review: keep the header below the HUD and Jason's answer reachable without scrolling to the end. */
.review-view{padding-top:78px;align-content:start}
.rv-mail{max-height:calc(100vh - 300px);display:flex;flex-direction:column}
.rv-body{overflow:auto;min-height:0}
.rv-choices{grid-area:choices}
@media (max-width:760px){.review-view{padding-top:64px;grid-template-columns:1fr;grid-template-areas:"mail" "choices" "month"}.rv-mail{max-height:none}}

/* Endings on a phone: the panel scrolls, the exit stays reachable. */
@media (max-width:760px){
  .ending-view{overflow:auto}
  .ending-text{max-height:none;margin-bottom:90px}
  .ending-text .story-text{max-height:none;overflow:visible}
  .ending-actions{position:sticky;bottom:14px;background:rgba(27,23,20,.9);border-radius:12px;padding:10px 14px}
}

/* Review: the answer column lives beside the mail so it is never below the fold. */
@media (min-width:761px){
  .review-view{grid-template-areas:"mail month" "mail choices";grid-template-rows:minmax(0,1fr) auto;align-content:stretch;padding-top:78px;padding-bottom:16px}
  .rv-mail{max-height:none;min-height:0}
  .rv-body{max-height:calc(100vh - 250px)}
  .rv-month{max-height:calc(100vh - 250px);overflow:auto}
  .rv-choices{grid-area:choices;align-self:end;background:var(--paper);border-radius:14px;padding:10px 14px;box-shadow:0 12px 36px rgba(0,0,0,.35)}
  .rv-choices h2{margin:0 0 6px}
}
/* Endings: the coda scrolls inside the panel, the exit stays visible. */
.ending-text{max-height:calc(100vh - 110px)}
.ending-text .story-text{max-height:none;overflow:auto;min-height:0}
.ending-actions{flex:none;position:sticky;bottom:6px}

/* Short viewports: stack the review columns so the answer never covers the month facts. */
@media (max-height:820px){
  .review-view{display:block;overflow:auto;padding-top:70px;padding-bottom:20px}
  .rv-mail{max-height:calc(100vh - 330px);overflow:auto;display:block}
  .rv-body{max-height:none;overflow:visible}
  .rv-month{margin-top:12px;max-height:none;overflow:visible}
  .rv-choices{position:relative;margin-top:12px}
}
.rv-meta,.rv-fact span{color:#4a4138}

body.in-ending .hud{display:none}

/* Short viewports: the review is one scrolling column; the mail can never collapse to 0. */
@media (max-height:820px){
  .review-view{display:block;overflow:auto;padding-top:70px;padding-bottom:20px}
  .rv-mail{max-height:none;min-height:0;display:block}
  .rv-body{max-height:none;overflow:visible}
  .rv-month{max-height:none;overflow:visible;margin-top:14px}
  .rv-choices{position:relative;margin-top:14px}
}
/* Phones: the ending is a scrolling page, not a clipped panel. */
@media (max-width:760px){
  .ending-view{display:block;overflow:auto;padding:14px 14px 110px}
  .ending-plate{display:none}
  .ending-text{position:static;inset:auto;max-height:none;margin:0;background:transparent}
  .ending-text .story-text{max-height:none;overflow:visible}
  .ending-actions{position:sticky;bottom:10px;background:rgba(27,23,20,.95);border-radius:12px;padding:10px 12px}
}

/* Endings: hiding the HUD must not collapse the stage row or the absolute ending view. */
body.in-ending #game{grid-template-rows:1fr}
body.in-ending #stage{height:100%}
.ending-view{width:100%;height:100%}
@media (max-width:760px){
  .ending-text{position:relative;left:auto;right:auto;bottom:auto;top:auto;transform:none;width:100%;max-width:100%;margin:0 0 90px}
}

/* Phone endings: paper panel, dark-on-light text, CTA in normal flow. */
@media (max-width:760px){
  .ending-text{background:var(--paper);color:var(--ink);padding:16px 16px 18px;border-radius:16px;margin:0 0 18px}
  .ending-text .ending-title,.ending-text h1{color:var(--ink)}
  .ending-text .story-text{color:var(--ink)}
  .ending-actions{position:static;background:transparent;padding:0;margin-top:12px}
}

@media (max-width:760px){
  .ending-view{overflow:auto!important;display:block!important}
  .ending-text{max-height:none!important;overflow:visible!important}
  .ending-text .story-text{max-height:none!important;overflow:visible!important}
}

@media (max-height:820px){
  .review-view{display:block!important;overflow:auto!important;padding-top:70px!important}
  .rv-mail{max-height:calc(100vh - 330px)!important;overflow:auto!important;display:block!important}
  .rv-body{max-height:none!important;overflow:visible!important}
  .rv-head{display:flex;flex-wrap:wrap}
  .rv-head > div{flex:1 1 auto;min-width:0}
  .rv-head h1{font-size:22px;line-height:1.2;min-height:0}
  .rv-month{margin-top:12px!important;max-height:none!important;overflow:visible!important}
  .rv-choices{margin-top:12px!important;position:relative!important}
}

@media (max-height:820px){
  .rv-month{display:none!important}
  .rv-choices{margin-top:14px!important}
  #scene-title{white-space:normal!important;width:auto!important;height:auto!important}
  .rv-head h1{width:auto!important;height:auto!important}
}

@media (max-height:820px){
  .review-view{display:flex!important;flex-direction:column;overflow:auto!important;padding-top:70px!important}
  .rv-mail{order:1;max-height:calc(100vh - 300px)!important;overflow:auto!important}
  .rv-choices{order:2;margin-top:12px!important}
  .rv-month{order:3;display:block!important;margin-top:12px!important;max-height:none!important;overflow:visible!important}
}
.rv-head{display:flex;flex-wrap:wrap}
.rv-head > div{flex:1 1 auto;min-width:0}
.rv-head h1{width:auto!important;height:auto!important;white-space:normal!important}

@media (max-height:820px){
  .rv-mail{flex:0 0 auto!important;min-height:min(52vh,420px)!important;max-height:calc(100vh - 240px)!important}
  .rv-choices{flex:0 0 auto!important}
}

@media (max-height:820px){.rv-mail{max-height:calc(100vh - 430px)!important;min-height:180px!important}}

/* Desk notifications (arrivals, unread pointers) above a result: chrome, not prose. */
.result-notices{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.result-notice{display:flex;align-items:flex-start;gap:8px;margin:0;padding:7px 11px;border-radius:10px;background:var(--cream);border:1px solid var(--line);font:500 13.5px/1.4 var(--sans);color:var(--ink-2)}
.result-notice svg{width:15px;height:15px;flex:none;margin-top:2px;opacity:.75}

/* The check rules are an inline card, open on first sight: no popover over the play area. */
.rules-card{margin:0 0 8px;padding:5px 11px 7px;border:1px solid var(--line);border-radius:10px;background:var(--cream);font:500 12.5px/1.45 var(--sans);color:var(--ink-2);max-width:82ch}
.rules-card summary{cursor:pointer;font-weight:700;color:var(--ink);padding:2px 0;font-size:12.5px}
.rules-card summary::marker{color:var(--accent)}
.rules-card p{margin:4px 0 0}
.rules-card p:last-child{margin-bottom:2px}
@media (max-width:719px){.rules-card{font-size:11.5px;padding:4px 9px 6px}}

/* Arrival notices sit above the scene card, not inside the prose. */
.story-view > .result-notices{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:6;max-width:min(680px,92vw);margin:0}

/* Round-34 UX: the checks are games now, so give them the viewport they need on phones and
   keep the action row inside the window on a 900px-tall desktop. */
@media (max-width:700px){
  #challenge-host{padding:4px}
  .challenge-window{width:100%;max-height:97vh;padding:6px 6px 8px;border-radius:12px}
  .challenge-window .mg{max-height:none!important;padding:8px 8px 10px!important;gap:8px!important;border-radius:12px}
  .challenge-window .mg-stage{padding:2px!important;min-height:0!important}
  .challenge-window .fwg-grid,.challenge-window .m3-board{width:100%!important;max-width:100%!important}
  .challenge-window .df-tok,.challenge-window .tr-item,.challenge-window .tg-toolbar button,.challenge-window .mg-actions button{min-height:44px}
}
@media (min-width:701px){
  .challenge-window{max-height:96vh}
  .challenge-window .mg{max-height:none!important}
}

/* Round-34 UX pass 2: the traps/sizes measured at 390 and 1440. */
#challenge-host{padding:4px!important}
.challenge-window{max-height:calc(100vh - 8px)!important}
@media (max-height:940px){
  .challenge-window .mg{padding:12px 16px!important;gap:9px!important}
}
@media (max-width:700px){
  .challenge-window .mg{padding:6px 4px!important}
  .challenge-window .mg-stage{padding:1px!important}
  .challenge-window .m3-board{width:100%!important;max-width:100%!important;gap:1px!important}
  .challenge-window .m3-tile{min-width:0!important}
  .challenge-window .df-tok{min-width:24px;padding-left:1px;padding-right:1px}
  .challenge-window .df-sheet-body,.challenge-window .df .df-line{max-width:100%!important;min-width:0!important}
  .challenge-window .tr-item{max-width:100%!important}
}

/* Round-35: phone tap targets are real targets. Buttons get a 44px floor; grids shrink to fit. */
@media (max-width:700px){
  .challenge-window button{min-height:44px;min-width:44px}
  .challenge-window .m3-board{gap:1px!important}
}
@media (max-width:700px){
  .challenge-window .m3-board{gap:0!important}
  .challenge-window .mg{padding:6px 2px!important}
}
@media (max-width:700px){
  .challenge-window .mg{padding:6px 0!important}
  .challenge-window .mg-stage{overflow:hidden}
  .challenge-window .df-tok{min-width:44px;display:inline-flex;align-items:center;justify-content:center}
}
@media (max-width:700px){
  .challenge-window .fwg,.challenge-window .fwg-board{overflow:hidden}
}

/* A call is a scene: the room fills the screen and the top bar steps back. */
body[data-kind="call"] #hud{opacity:0;pointer-events:none}
body[data-kind="call"] #backdrop{filter:saturate(1.05)}
body[data-kind="call"] .story-view .story-shell{max-width:820px}

/* ---------- Main menu (title screen) ---------- */
.title-screen{position:fixed;inset:0;z-index:50;display:grid;overflow:hidden;color:#fff;background:#1e1a17;isolation:isolate}
.title-screen[hidden]{display:none}
.title-art{position:absolute;inset:0;z-index:-3;background:#3b332d center/cover no-repeat}
.title-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(24,19,16,.94) 0%,rgba(24,19,16,.78) 34%,rgba(24,19,16,.3) 70%,rgba(24,19,16,.45) 100%)}
.title-jason{position:absolute;z-index:-1;right:6%;bottom:0;height:min(92svh,1000px);max-width:44%;object-fit:contain;object-position:bottom;filter:drop-shadow(8px 16px 18px rgba(0,0,0,.45));animation:spritein .6s ease-out}
.title-column{display:flex;flex-direction:column;justify-content:center;gap:28px;width:min(520px,100%);min-height:100svh;padding:48px 24px 48px clamp(24px,7vw,110px);overflow:auto}
.title-kicker{margin:0 0 10px;font:600 12px var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.title-name{margin:0;font:600 clamp(40px,6vw,68px)/1.02 var(--serif);letter-spacing:-.5px;text-shadow:0 4px 24px rgba(0,0,0,.4)}
.title-tagline{margin:14px 0 0;max-width:34ch;font:italic 17px/1.45 var(--serif);color:#eadfcf}
.title-actions{display:grid;gap:8px;max-width:360px}
.title-btn{display:grid;gap:2px;justify-items:start;text-align:left;padding:12px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(251,247,240,.08);color:#fff;backdrop-filter:blur(6px)}
.title-btn .tb-label{font-weight:600;font-size:17px}
.title-btn .tb-sub{font-size:12.5px;color:#d9ccbb}
.title-btn:hover:not(:disabled){background:rgba(251,247,240,.18);border-color:var(--gold)}
.title-btn.primary{background:var(--accent);border-color:var(--accent)}
.title-btn.primary .tb-sub{color:#ffe6d8}
.title-btn.primary:hover:not(:disabled){background:#b4552f;border-color:#b4552f}
.title-btn.support{display:flex;align-items:center;gap:10px;margin-top:6px;background:transparent;border-color:transparent;color:#f0c9b5}
.title-btn.support .ico{color:var(--accent-2)}
.title-btn.support:hover:not(:disabled){background:rgba(233,138,93,.12);border-color:transparent}
.title-btn:disabled{opacity:.5}
.title-version{margin:0;font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.5px}

.title-panel{max-width:440px;max-height:min(62svh,620px);overflow:auto;padding:20px 22px;border-radius:16px;background:var(--paper);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.45);animation:panelin .2s ease-out}
@keyframes panelin{from{opacity:0;transform:translateY(8px)}}
.tp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.tp-head h2{margin:0;font:600 24px var(--serif);outline:none}
.tp-back{display:inline-flex;align-items:center;gap:4px;padding:.4rem .7rem}
.tp-body p{margin:.4em 0 .8em;line-height:1.5}
.tp-row{display:flex;gap:8px;flex-wrap:wrap}
.title-panel .save-slot{grid-template-columns:1fr auto}
.credits section{padding:10px 0;border-bottom:1px solid var(--line)}
.credits section:last-of-type{border-bottom:0}
.credits h3{margin:0 0 4px;font:700 11px var(--sans);letter-spacing:1.2px;text-transform:uppercase;color:var(--accent)}
.credits section p{margin:2px 0;font-family:var(--serif);font-size:16px}
a.button{display:inline-flex;align-items:center;gap:8px;padding:.6rem 1rem;border-radius:10px;text-decoration:none;font-weight:600}
a.button.primary{background:var(--accent);color:#fff}
a.button.primary:hover{background:#b4552f}

/* Settings (shared by the title screen and the pause menu) */
.setting.speed{flex-wrap:wrap}
.segmented{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
.segmented button{border:0;border-radius:0;padding:.35rem .75rem;font-size:13px;background:transparent}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button.on{background:var(--ink);color:#fff}
.menu-row{display:flex;gap:8px;flex-wrap:wrap}

/* Story text reveal (Settings → Text speed). Click or press a key to show it all. */
.story-text.reveal>*{opacity:0;animation:reveal .35s ease forwards;animation-delay:calc(var(--i,0) * var(--reveal-step,90ms))}
@keyframes reveal{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.reduced .title-jason,.reduced .title-panel{animation:none}

@media (max-width:820px){
  .title-shade{background:linear-gradient(180deg,rgba(24,19,16,.55) 0%,rgba(24,19,16,.88) 55%,rgba(24,19,16,.96) 100%)}
  .title-jason{right:-8%;height:62svh;max-width:70%;opacity:.35}
  .title-column{justify-content:flex-end;width:100%;padding:28px 16px 24px;gap:20px}
  .title-actions,.title-panel{max-width:none}
  .title-panel{max-height:60svh}
}

/* ---------- Tablet / phone ---------- */
@media (max-width:1760px){
  .bonds{display:none}
}
@media (max-width:1440px){
  .strain .strain-band{display:none}
}
@media (max-width:1400px){
  .app-btn>span:not(.ico){display:none}
  .stat{min-width:84px}
}
@media (max-width:1100px){
  .hud{flex-wrap:wrap;gap:8px 12px;padding:8px 12px}
  .hud-stats{order:3;flex-basis:100%;gap:12px}
  .stat{min-width:0;max-width:none}
}
@media (max-width:1180px){
  .bonds{display:none}
  .next-deadline{max-width:200px}
  .app-btn>span:not(.ico){display:none}
}
@media (max-width:900px){
  .hud{flex-wrap:wrap;gap:8px 12px;padding:8px 10px}
  .hud-stats{order:3;flex-basis:100%;gap:10px}
  .stat{min-width:0}
  .next-deadline .nd-when{display:none}
  .map-view{grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr);padding:10px}
  .map-frame{grid-row:2;width:100%}
  .map-caption{grid-column:1;grid-row:3;align-self:stretch}
  .room-card{position:absolute;grid-column:auto;grid-row:auto;left:0;right:0;bottom:0;max-height:72%;border-radius:18px 18px 0 0;animation:sheetup .22s ease-out}
  @keyframes sheetup{from{transform:translateY(30px);opacity:0}}
  .map-view.card-open .map-caption{display:block}
  .rc-photo{height:120px}.rc-sprite{height:160px;bottom:-40px}
  .ol-body-wrap{grid-template-columns:56px minmax(0,1fr)}
  .ol-rail button>span:not(.ico){display:none}
  .ol-rail .count{display:none}
  .cal-body{grid-template-columns:1fr}
  .cal-side{display:none}
  .efforts{grid-template-columns:1fr}
  .desk-view{grid-template-columns:1fr;grid-template-rows:auto minmax(150px,32svh) minmax(0,1fr);padding:10px;gap:8px}
  .desk-card{grid-column:1;grid-row:3;position:static;max-height:none;border-radius:18px;animation:none}
  .desk-jason{left:auto;right:4%;transform:none}
  .minimap{width:min(190px,52cqw)}
  .choices.secondary{grid-template-columns:1fr}
}
@media (max-width:700px){
  .hud .place,.hud .stat-label{display:none}
  .strain .strain-band{display:none}
  .stat{grid-template-columns:1fr auto;gap:5px}
  .stat.money .unit{display:none}
  .stat .bar{height:7px}
  .stat.health{--c:var(--health)}
  .stat.health::before,.stat.mind::before,.stat.rep::before{font-size:10px;font-weight:700;color:var(--ink-3);grid-column:1/-1;margin-bottom:-3px}
  .stat.health::before{content:"Health"}.stat.mind::before{content:"Mind"}.stat.rep::before{content:"Rep"}
  /* The next deadline is the most important fact on the phone screen: keep it and drop its
     detail, rather than removing the one thing the review said players most needed. */
  .next-deadline{display:inline-flex;max-width:124px;padding:4px 9px}
  .next-deadline .nd-when{display:none}
  .next-deadline .nd-title{font-size:11px}
  .hud-right{flex-wrap:wrap;gap:6px}
  .app-window{inset:6px;border-radius:12px}
  .ol-search{display:none}
  .ol-top{flex-wrap:wrap}
  .ol-actions{order:5;flex-basis:100%}
  .ol-main{grid-template-columns:1fr}
  .ol-main .ol-reading{display:none}
  .ol-main.reading .ol-listpane{display:none}
  .ol-main.reading .ol-reading{display:block;padding:14px 16px}
  .back-mobile{display:inline-flex;gap:4px;align-items:center;margin:-4px 0 6px -8px}
  .wa-body{grid-template-columns:1fr}
  .wossap.in-thread .wa-side{display:none}
  .wossap:not(.in-thread) .wa-thread{display:none}
  .wa-scroll{padding:12px 10px}
  .wa-msg{max-width:88%}
  .dialogue{width:calc(100% - 16px);bottom:8px;padding:14px 16px;max-height:66%}
  .choices{grid-template-columns:1fr}
  .choices.single .choice{justify-self:stretch;min-width:0}
  .sprites{inset:4px 2% 0}
  .sprites img{height:min(64cqh,calc(98cqw / (var(--n) * .31)))}
  .spot.person .avatar{width:38px;height:38px;border-width:2px}
  .spot.thing>.ico{width:32px;height:32px;padding:6px}
  .spot .tag{font-size:9.5px;padding:1px 5px}
  .jason .avatar{width:34px;height:34px}
  .map-title span{font-size:16px}
  .cal-toolbar .legend{display:none}
  .ending-plate{inset:8px 8px calc(min(34svh,310px) + 18px)}
}
@media (max-height:520px) and (min-width:560px){
  .hud{padding:4px 10px}
  .hud-stats{order:0;flex-basis:auto}
  .map-view{grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:minmax(0,1fr)}
  .map-title{display:none}
  .map-frame{grid-row:1;width:min(100%,calc((100svh - 70px) * 1.5625))}
  .map-caption,.room-card{grid-column:2;grid-row:1;position:static;max-height:100%;border-radius:14px}
  .desk-view{grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr)}
  .desk-scene{grid-row:1}
  .dialogue{max-height:70%}
}
.reduced *,.reduced *::before,.reduced *::after{animation:none!important;transition:none!important}
@media (max-width:700px){
  .ending-text{max-height:min(42svh,330px)}
  .ending-plate{inset:8px 8px calc(min(42svh,330px) + 16px)}
}

.wa-msg,.wa-msg *,.wa-bubble,.wa-bubble *,.wa-note,.wa-note *,.wa-chat,.wa-chat *{color:#2b2622!important;opacity:1!important}
.howto h3,.howto .kicker,.looking-free,.result .scene-name,.ol-toolbar,.ol-toolbar *{color:#2b2622!important}
.roll-verdict,.roll-dc,.roll-parts,.roll-dropped,.roll-math,.roll-math b,.roll-math span{color:#2b2622!important}
@media (max-width:520px){
  .rv-month{display:none!important}
  .rv-compact{font-size:12px;line-height:1.35}
  .gates-chip{max-width:96px;font-size:10px}
}

@media (max-width:520px){.gates-chip{max-width:98px!important;font-size:9.5px!important}}

.wa-search,.wa-search *,.wa-list,.wa-list *,.wa-msg time,.wa-msg .wa-meta,.wa-contact,.wa-contact *,.wa-preview,.wa-preview *,.wa-badge,.wa-head,.wa-head *{color:#2b2622!important;opacity:1!important}
h2.map-tip,.howto h2,.dialogue .scene-name{color:#2b2622!important}
.ol-top .muted.small{color:#fbf7f0!important}
.tb,.tb *{color:#fbf7f0!important}
.roll-die i,.roll-die b{color:#1f1b18!important}
.roll-die i{font-size:10px!important}
@media (max-width:1979px){
  .hud{flex-wrap:wrap!important;height:auto!important;row-gap:4px!important;padding:6px 10px!important}
  .hud .when{flex:0 0 auto}
}
@media (max-width:520px){
  .rv-mail{max-height:58vh!important}
  .hud{padding:4px 6px!important}
  .hud .when .date{display:none!important}
}

.review-chip{background:#8f3f21!important;color:#fff!important;border-color:#c46a3d!important;font-size:10.5px!important}

.gates-chip{max-width:150px}

.wa-empty,.wa-empty *,.wa-head .badge,.wa-badge,.wa-online,.wa-status{color:#1f1b18!important}
.map-tip h2,.map-tip h3{color:#1f1b18!important}
.tb,.tb *{color:#0f0f0f!important;font-weight:600!important}

.wa-thread .badge,.wa-list .badge,.wa-badge{background:#8f3f21!important;color:#fff!important}

.wa-online{color:#2b2622!important;opacity:1!important}

/* Round-27 UX/a11y: phone-width touch targets and a calendar that fills its sheet. */
@media (max-width:700px){
  .app-btn,.hud .icon-btn,.hud .app-btn,button.icon-btn,.choice,.effort,.action-card,.title-btn,.ol-item,.wa-row{min-height:44px}
  .hud .icon-btn,.hud .app-btn{min-width:42px}
  #settings-panel input[type=checkbox], .settings-panel input[type=checkbox]{width:20px;height:20px;flex:0 0 auto}
  .setting.checkbox{min-height:44px;align-items:center;display:flex;gap:10px}
  .calendar .cal-body{display:flex;flex-direction:column;height:100%}
  .calendar .cal-side{flex:1 1 auto;overflow:auto;background:var(--paper)}
}
/* Native checkboxes ignore width on Chrome; draw the box so it is a 20px touch target. */
#settings-panel input[type=checkbox], .settings-panel input[type=checkbox]{appearance:none;-webkit-appearance:none;width:20px;height:20px;min-width:20px;border:2px solid #8a7d72;border-radius:4px;background:#fff;display:inline-block;position:relative;cursor:pointer}
#settings-panel input[type=checkbox]:checked, .settings-panel input[type=checkbox]:checked{background:radial-gradient(circle at center,#fff 0 3px,var(--accent) 3.5px);border-color:var(--accent)}
#settings-panel input[type=checkbox]:focus-visible, .settings-panel input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Disabled/blocked cards: the reason text was 2.75-3.9:1 - darken it while keeping the dimmed card. */
.choice.blocked,.choice.blocked *,.action-card.blocked,.action-card.blocked *,.effort.blocked,.effort.blocked *,.wa-reply.blocked,.wa-reply.blocked *,.ac-blocked{color:#4a4038!important}
.chip,.chip *{color:#4a4038}

/* Round-28 UX: every phone-width control gets a 44px hit box, the stop chip wraps instead of ellipsizing,
   and blocked-card reasons are AA at their small size. */
@media (max-width:700px){
  #hud button,#stage button,#overlay button,#menu-dialog button,#hud .gates-chip,.next-deadline,.action-card,.map-tip button{min-height:44px}
  #hud .icon-btn,#hud .app-btn,.next-deadline,.gates-chip{min-width:44px}
  .hud .gates-chip{max-width:132px!important;white-space:normal!important;line-height:1.15!important;text-align:center;display:inline-flex;align-items:center;justify-content:center;font-size:9.5px!important}
}
.gates-chip.stop-ready{cursor:pointer;background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-weight:700}
.gates-chip.stop-ready:hover,.gates-chip.stop-ready:focus-visible{background:#a94e2d!important}
.choice.blocked,.choice.blocked *,.action-card.blocked,.action-card.blocked *,.effort.blocked,.effort.blocked *,.wa-reply.blocked,.wa-reply.blocked *,.ac-blocked{color:#3f372f!important}

/* Round-28 UX: dimmed cards keep readable text; phone settings controls are touch sized. */
.action-card.blocked,.choice.blocked,.effort.blocked,.wa-reply.blocked{opacity:.85!important}
#menu-dialog input[type=range]{height:44px}
@media (max-width:700px){#menu-dialog input[type=range]{min-height:44px}}

/* Top bar at 1440: wrap the left cluster instead of ellipsizing the gate chip and clipping Rank. */
@media (max-width:1979px){
  .hud-left{flex-wrap:wrap;row-gap:4px}
  .hud-left .gates-chip{max-width:none!important;white-space:nowrap!important}
  .hud .level-chip{white-space:nowrap;flex:0 0 auto}
  .hud-right{flex-wrap:wrap;row-gap:4px}
  .hud .next-deadline{max-width:220px}
}
.next-deadline.home-cta{background:#8f3f21;border-color:#8f3f21;color:#fff}
.next-deadline.home-cta .nd-when,.next-deadline.home-cta .nd-title{color:#fff}
.next-deadline.home-cta .ico{color:#fff}
/* Rules cards are collapsible: say so with a caret and a hint. */
.rules-card summary{list-style:none;display:flex;align-items:center;gap:6px}
.rules-card summary::-webkit-details-marker{display:none}
.rules-card summary::after{content:'\25B8';font-size:11px;color:var(--accent);margin-left:auto}
.rules-card[open] summary::after{content:'\25BE'}

/* 1440 top bar: give the stats room by dropping decorative labels before squeezing real values out. */
@media (max-width:1979px){
  .app-btn>span:not(.ico){display:none}
  .hud .strain-band{display:none}
  .hud-stats{flex-wrap:wrap;gap:10px 14px}
  .hud .stat{min-width:54px}
  .hud .next-deadline{max-width:280px}
  .hud .bonds{gap:8px}
}

/* Round-29 UX: darker stop control, practice chip, phone settings touch, calendar scroll hint. */
.gates-chip.stop-ready{background:#8f3f21!important;border-color:#8f3f21!important;color:#fff!important}
.gates-chip.stop-ready:hover,.gates-chip.stop-ready:focus-visible{background:#6f2f18!important}
.practice-chip{font-variant-numeric:tabular-nums}
@media (max-width:700px){
  .settings-panel button,.title-panel .tp-back{min-height:44px}
  .settings-panel input[type=range]{height:44px}
  .cal-hint{display:none;font-size:10px;color:#5b5048;margin-left:6px}@media (max-width:760px){.cal-hint{display:inline}}
}

/* 390 top bar: keep the playfield by hiding the second-order chips (their facts are in the titles). */
@media (max-width:520px){
  .hud{padding:4px 8px!important;gap:4px 8px!important}
  .hud .practice-chip,.hud .strain{display:none!important}
  .hud-stats{gap:6px 10px!important}
  .hud .stat .bar{height:6px}
  .hud-left .gates-chip,.hud-left .review-chip{font-size:9.5px!important}
}

/* Round-31/32: an explicit reason when Go home is withheld, and critical-condition chips. */
.next-deadline.tonight{background:#5b5048;border-color:#5b5048;color:#fff;cursor:default}
.next-deadline.tonight .nd-when,.next-deadline.tonight .nd-title{color:#fff}
.critical-chip{background:#8f2020!important;border-color:#8f2020!important;color:#fff!important;font-weight:700;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* The month counter is progress, not decoration: it stays on phones while the weekday shortens away. */
@media (max-width:520px){
  .hud .when .date{display:inline!important;font-size:10px!important}
  .hud .when .wday{display:none!important}
  .hud .when .dnum{display:inline!important;font-weight:700}
}

/* Snowball: Mum and Dad expect a real visit once a week (five hours, weekends, from home). */
.gates-chip.parents-chip{background:#6b5a8f!important;border-color:#6b5a8f!important;color:#fff!important}

/* Phone top bar: the parents reminder stays one line (full explanation in its title/aria). */
@media (max-width:520px){
  .hud .parents-chip{max-width:none!important;white-space:nowrap!important;font-size:9px!important;padding-left:5px!important;padding-right:5px!important}
}

/* Phone top bar: the parents reminder lives in Wossap on a phone; the desktop chip keeps the longer text. */
@media (max-width:520px){
  .hud .parents-chip{display:none!important}
}