:root {
  --ink: #1c1f2e;
  --paper: #fbf6ec;
  --mint: #96e6be;
  --teal: #12343b;
  --teal2: #1b4a52;
  --red: #ff4646;
  --purple: #8c6eff;
  --yellow: #ffc83c;
  --cyan: #50dcff;
  --good: #50ff8c;
  --font: "Arial Rounded MT Bold", "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a0710; color: #fff; font-family: var(--font); user-select: none; -webkit-user-select: none; touch-action: none; }
canvas#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; }
#vitals { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 320px; background: rgba(12, 16, 24, 0.78); border-radius: 14px; padding: 8px 10px 10px; }
#vitals .row { display: flex; justify-content: space-between; font-size: 15px; letter-spacing: 1px; }
#hp { font-size: 22px; color: var(--good); }
#ecg { width: 300px; height: 56px; display: block; margin: 2px 0 6px; }
.fixed-label { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: 1px; opacity: 0.9; margin-bottom: 3px; }
.bar { height: 10px; background: rgba(255, 255, 255, 0.15); border-radius: 6px; overflow: hidden; }
.bar > div { height: 100%; width: 0%; background: var(--good); border-radius: 6px; transition: width 0.25s; }
.bar.small { height: 7px; width: 90px; }
#next { position: absolute; top: 142px; left: 50%; transform: translateX(-50%); background: rgba(12, 16, 24, 0.78); padding: 6px 14px; border-radius: 10px; font-size: 15px; white-space: nowrap; letter-spacing: 0.5px; }
#next b { color: var(--yellow); }
#timer { position: absolute; top: 180px; left: 50%; transform: translateX(-50%); font-size: 30px; color: var(--yellow); background: rgba(12,16,24,.78); padding: 4px 14px; border-radius: 10px; }
#minimap-wrap { position: absolute; top: 12px; left: 12px; background: rgba(12, 16, 24, 0.78); border-radius: 14px; padding: 6px; }
#minimap { width: 240px; height: 120px; display: block; }
#zone { font-size: 12px; letter-spacing: 1px; text-align: center; padding-top: 2px; opacity: 0.9; }
#cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid rgba(255,255,255,0.85); border-radius: 50%; }
#cross .dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; background: #fff; border-radius: 50%; }
#cross.on { border-color: var(--good); }
#arrow { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; transition: opacity 0.2s; }
#hint { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); font-size: 14px; background: rgba(12,16,24,.7); padding: 4px 10px; border-radius: 8px; white-space: nowrap; opacity: 0; transition: opacity .15s; }
#hint.on { opacity: 1; }
#msgs { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msg { background: rgba(12, 16, 24, 0.82); padding: 6px 14px; border-radius: 10px; font-size: 17px; animation: msgIn 0.2s ease-out; white-space: nowrap; }
@keyframes msgIn { from { transform: scale(1.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
#banner { position: absolute; top: 22%; left: 0; right: 0; text-align: center; font-size: 64px; letter-spacing: 2px; color: #fff; opacity: 0; transition: opacity .2s; -webkit-text-stroke: 3px #1c1f2e; paint-order: stroke fill; }
#banner.on { opacity: 1; animation: bannerIn .3s ease-out; }
@keyframes bannerIn { from { transform: scale(1.8) rotate(-4deg); } to { transform: scale(1) rotate(-2deg); } }
#bottom { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 12px; }
#tools { display: flex; gap: 6px; pointer-events: auto; }
.tool { width: 84px; padding: 6px 4px 7px; background: rgba(12, 16, 24, 0.78); border-radius: 10px; text-align: center; font-size: 12px; letter-spacing: 0.5px; border: 2px solid transparent; cursor: pointer; }
.tool .k { display: inline-block; font-size: 11px; background: rgba(255,255,255,.18); border-radius: 4px; padding: 0 5px; margin-bottom: 3px; }
.tool .sw { height: 4px; border-radius: 2px; margin-top: 4px; }
.tool.on { border-color: #fff; background: rgba(30, 36, 52, 0.92); }
#doc, #scancd { background: rgba(12, 16, 24, 0.78); border-radius: 10px; padding: 6px 8px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
#scancd .k { display: none; }
#docbar { background: var(--mint); }
#scanbar { background: var(--cyan); }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; }
#glitch { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255,0,80,.5) 0 6px, rgba(0,220,255,.4) 6px 14px, rgba(255,255,255,.6) 14px 18px); mix-blend-mode: screen; }
#glitch.on { opacity: 1; animation: gl .08s steps(2) infinite; }
@keyframes gl { 0% { transform: translateX(-20px); } 100% { transform: translateX(24px) scaleY(1.3); } }

/* ---------- screens ---------- */
.screen { position: fixed; inset: 0; display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; }
.screen > .title-inner, .screen > .pause-card { margin: auto; }
#title { background: var(--teal); }
.title-inner { width: min(860px, 100% - 32px); padding: 18px 0; text-align: center; }
.logo { font-size: clamp(52px, 9vw, 92px); line-height: 0.9; letter-spacing: 2px; transform: rotate(-3deg); margin-bottom: 8px; }
.logo .l1 { color: var(--mint); display: block; }
.logo .l2 { color: #ff6f7a; display: block; }
.tag { font-size: 18px; opacity: 0.9; margin: 10px 0 14px; }
h3 { letter-spacing: 2px; font-size: 16px; opacity: 0.85; margin: 16px 0 10px; }
#profile { display: inline-flex; gap: 14px; align-items: center; background: var(--teal2); padding: 10px 16px; border-radius: 14px; font-size: 14px; text-align: left; cursor: pointer; border: 2px solid transparent; }
#profile:hover { border-color: var(--mint); }
#profile .pc-open { font-size: 12px; color: var(--mint); align-self: flex-end; }
#profile .rk { font-size: 18px; color: var(--yellow); }
#profile .bar { width: 160px; margin-top: 5px; }
#profile .bar > div { background: var(--yellow); }
#patients { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pcard { background: var(--teal2); border-radius: 14px; padding: 10px; cursor: pointer; border: 3px solid transparent; text-align: left; }
.pcard.on { border-color: var(--mint); background: #22606a; }
.pcard canvas { width: 100%; height: auto; display: block; border-radius: 10px; background: #0e2a30; }
.pcard .pn { font-size: 18px; margin-top: 8px; }
.pcard.locked { opacity: 0.5; cursor: not-allowed; }
.pcard.locked canvas { filter: grayscale(1); }
.pcard .pc { font-size: 13px; opacity: 0.85; margin-top: 2px; min-height: 48px; }
.pcard .pl { font-size: 12px; margin-top: 6px; display: inline-block; padding: 2px 8px; border-radius: 6px; background: rgba(255,255,255,.12); }
.btn { font-family: var(--font); font-size: 20px; letter-spacing: 1px; color: var(--ink); background: #e9eef0; border: 0; border-radius: 14px; padding: 14px 30px; cursor: pointer; margin: 6px; }
.btn.primary { background: var(--mint); }
.btn:hover { filter: brightness(1.06); }
#play { margin-top: 16px; font-size: 26px; padding: 16px 56px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 18px; font-size: 14px; opacity: 0.85; }
.controls b { background: rgba(255,255,255,.14); padding: 2px 7px; border-radius: 5px; margin-right: 3px; font-weight: normal; }

#intro { position: fixed; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8vh; pointer-events: none; }
.intro-card { background: rgba(12, 16, 24, 0.85); border-radius: 16px; padding: 14px 20px; width: min(400px, 100% - 32px); }
.ic-top { font-size: 12px; letter-spacing: 2px; color: var(--yellow); }
.ic-name { font-size: 34px; }
.ic-cond { font-size: 16px; opacity: 0.9; }
#ic-ecg { width: 100%; height: 60px; display: block; margin-top: 8px; }
.ic-shrink { font-size: 13px; letter-spacing: 2px; color: var(--mint); }
.skip { position: absolute; bottom: 12px; font-size: 12px; opacity: 0.6; }

#pause { background: rgba(10, 14, 22, 0.7); }
.pause-card { background: var(--teal); padding: 24px 30px; border-radius: 18px; text-align: center; }
.pause-card h2 { margin: 0 0 6px; font-size: 40px; letter-spacing: 2px; }

#end { flex-direction: column; justify-content: flex-start; align-items: center; padding: 24px 16px; background: var(--teal); }
#end.lose { background: #1a0b0e; }
#end-title { font-size: clamp(42px, 8vw, 78px); color: var(--good); transform: rotate(-2deg); margin-top: 8px; text-align: center; }
#end.lose #end-title { color: var(--red); }
#end-sub { font-size: 18px; opacity: 0.9; margin: 6px 0 18px; text-align: center; }
.end-body { display: flex; gap: 28px; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
#invoice { position: relative; width: 380px; max-width: 100%; background: var(--paper); color: var(--ink); border-radius: 12px; padding: 18px 20px 16px; transform: rotate(-2.5deg); }
#invoice .ih { font-size: 24px; }
#invoice .ip { font-size: 13px; color: #6e6e78; margin: 2px 0 12px; }
#invoice .li { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; font-family: "Courier New", monospace; color: #32323c; opacity: 0; animation: liIn .25s forwards; }
@keyframes liIn { to { opacity: 1; } }
#invoice .tot { border-top: 2px dashed #d2cdc3; margin-top: 10px; padding-top: 8px; display: flex; justify-content: space-between; font-size: 24px; color: #d22837; }
#stamp { position: absolute; left: 50%; top: 56%; transform: translate(-50%, -50%) rotate(-16deg) scale(2.4); border: 5px solid #dc2832; color: #dc2832; font-size: 34px; padding: 2px 14px; border-radius: 10px; opacity: 0; white-space: nowrap; }
#stamp.on { animation: stamp .18s ease-in forwards; }
@keyframes stamp { to { transform: translate(-50%, -50%) rotate(-16deg) scale(1); opacity: 0.88; } }
#results { width: 320px; max-width: 100%; background: rgba(255,255,255,.07); border-radius: 16px; padding: 16px 18px; }
#end.lose #results { background: rgba(255,255,255,.05); }
.grade { display: flex; align-items: center; gap: 14px; }
.grade .gl { font-size: 92px; line-height: 1; width: 100px; text-align: center; border-radius: 18px; padding: 4px 0; color: var(--ink); background: var(--mint); }
.grade .gl.F { background: var(--red); color: #fff; }
.grade .gl.S { background: var(--yellow); }
.stats { margin-top: 14px; font-size: 15px; }
.stats div { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.xp { margin-top: 14px; }
.xp .bar { height: 12px; margin-top: 6px; }
.xp .bar > div { background: var(--yellow); transition: width 1.2s; }
.rankup { margin-top: 10px; background: var(--yellow); color: var(--ink); text-align: center; padding: 6px; border-radius: 10px; font-size: 18px; }
.end-btns { margin-top: 22px; text-align: center; }

/* ---------- touch ---------- */
#touch { position: fixed; inset: 0; pointer-events: none; }
#stick { position: absolute; left: 28px; bottom: 34px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.3); }
#knob { position: absolute; left: 45px; top: 45px; width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,.55); }
#tbtns { position: absolute; right: 20px; bottom: 30px; width: 220px; height: 210px; }
.tb { position: absolute; pointer-events: auto; width: 66px; height: 66px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; font-family: var(--font); font-size: 14px; }
.tb.big { width: 100px; height: 100px; right: 0; bottom: 0; background: rgba(255,90,90,.55); font-size: 20px; }
#t-jet { right: 108px; bottom: 0; background: rgba(150,230,190,.4); }
#t-dive { right: 118px; bottom: 76px; }
#t-scan { right: 40px; bottom: 112px; background: rgba(80,220,255,.4); }
.tb.down { filter: brightness(1.5); }

body.touch #bottom { bottom: 8px; gap: 6px; }
body.touch #scancd { display: none; }
body.touch #doc { padding: 5px 6px; }
body.touch #doc .bar.small { width: 54px; }
body.touch .tool { width: 62px; padding: 6px 2px; font-size: 11px; }
body.touch .tool .k { display: none; }
body.touch #vitals { transform: translateX(-50%) scale(0.8); transform-origin: top center; }
body.touch #next { top: 118px; font-size: 13px; }
body.touch #minimap-wrap { transform: scale(0.7); transform-origin: top left; }
body.touch #controls-help { display: none; }

@media (max-width: 960px) { #patients { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) {
  #patients { grid-template-columns: 1fr; }
  .pcard { display: grid; grid-template-columns: 110px 1fr; gap: 0 12px; align-items: center; }
  .pcard canvas { grid-row: span 3; }
  .pcard .pn { margin-top: 0; }
  #vitals { width: 250px; }
  #ecg { width: 230px; }
  #banner { font-size: 40px; }
}

/* ---------- rooms / co-op ---------- */
#mp, #room { margin-top: 14px; }
.mp-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin: 6px 0; }
.mp-row .btn { margin: 0; }
#play { margin-top: 0; font-size: 22px; padding: 14px 34px; }
#mp input { font-family: var(--font); font-size: 18px; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--teal2); color: #fff; text-align: center; outline: none; }
#mp-name { width: 230px; }
#mp-code { width: 96px; text-transform: uppercase; letter-spacing: 3px; }
.join { display: inline-flex; gap: 6px; }
#mp-err { min-height: 20px; color: #ff9a9a; font-size: 14px; margin-top: 4px; }
.room-code { font-size: 18px; letter-spacing: 1px; }
.room-code b { font-size: 34px; letter-spacing: 6px; color: var(--yellow); margin: 0 10px; }
.room-code span { font-size: 13px; opacity: 0.7; }
#room-players { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 6px; }
.rp { background: var(--teal2); border-radius: 12px; padding: 8px 12px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.rp .dot, .trow .dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.rp .rd { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.12); }
.rp .rd.on { background: var(--mint); color: var(--ink); }
#room-note { font-size: 13px; opacity: 0.8; }
#btn-ready.on { background: var(--yellow); }
.pcard { position: relative; }
.pcard .votes { position: absolute; top: 14px; left: 14px; display: flex; gap: 4px; }
.pcard .votes span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #12343b; }
.team { margin-top: 14px; }
.team-h { font-size: 13px; opacity: 0.8; margin-bottom: 4px; }
.trow { display: grid; grid-template-columns: 48px 1fr; gap: 2px 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 14px; }
.trow .ts { grid-column: 2; font-size: 12px; opacity: 0.8; }
.trow .aw { grid-column: 2; font-size: 12px; color: var(--yellow); }
#spectate { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); background: rgba(12,16,24,.82); padding: 10px 18px; border-radius: 12px; font-size: 18px; text-align: center; }

.trow .pi { width: 48px; height: 48px; border-radius: 10px; grid-row: span 3; }
#ic-team { display: flex; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.ic-doc { text-align: center; width: 84px; }
.ic-doc img { width: 72px; height: 72px; border-radius: 12px; background: rgba(255,255,255,.08); }
.ic-doc .n { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-doc .r { font-size: 10px; color: var(--yellow); }

/* ---------- v6: combo, critical, wake-up bubble, review, challenges ---------- */
#combo { position: absolute; left: 50%; top: calc(50% - 92px); transform: translateX(-50%); text-align: center; opacity: 0; pointer-events: none; }
#combo .cw { font-size: 40px; color: #fff; -webkit-text-stroke: 3px #1c1f2e; paint-order: stroke fill; letter-spacing: 1px; white-space: nowrap; }
#combo .cs { font-size: 15px; color: var(--yellow); -webkit-text-stroke: 2px #1c1f2e; paint-order: stroke fill; }
#combo.on { animation: comboPop 1.1s ease-out forwards; }
@keyframes comboPop { 0% { opacity: 0; transform: translateX(-50%) scale(1.8); } 12% { opacity: 1; transform: translateX(-50%) scale(1); } 75% { opacity: 1; transform: translateX(-50%) translateY(-10px); } 100% { opacity: 0; transform: translateX(-50%) translateY(-24px); } }
#critical { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(70,0,8,0.85) 100%); }
#critical.on { animation: critPulse 0.9s ease-in-out infinite; }
@keyframes critPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
#bubble { position: fixed; left: 50%; top: 10%; transform: translateX(-50%); background: #fff; color: var(--ink); font-size: clamp(22px, 4vw, 38px); padding: 14px 26px; border-radius: 22px; white-space: nowrap; pointer-events: none; animation: bubbleIn .25s ease-out; }
#bubble::after { content: ''; position: absolute; left: 50%; bottom: -16px; margin-left: -12px; border: 12px solid transparent; border-top: 16px solid #fff; border-bottom: 0; }
@keyframes bubbleIn { from { transform: translateX(-50%) scale(0.4); } to { transform: translateX(-50%) scale(1); } }
#end-review { font-size: 16px; margin: -8px 0 16px; text-align: center; max-width: 720px; }
#end-review .stars { color: var(--yellow); letter-spacing: 2px; margin-right: 8px; }
#challenges { margin: 10px auto 0; display: inline-block; text-align: left; background: var(--teal2); border-radius: 14px; padding: 10px 14px; min-width: 300px; }
#challenges .ch-h { font-size: 12px; letter-spacing: 1px; opacity: 0.8; margin-bottom: 4px; }
#challenges .ch { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 14px; padding: 3px 0; }
#challenges .ch .bar { grid-column: span 2; height: 6px; }
#challenges .ch .bar > div { background: var(--mint); }
#challenges .ch.done { opacity: 0.6; }
#challenges .ch .rw { color: var(--yellow); font-size: 12px; }
.toast { background: var(--yellow); color: var(--ink); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }

/* ---------- v8: entrances, settings, brace, pings ---------- */
#entrances { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ecard { position: relative; background: var(--teal2); border-radius: 12px; padding: 10px 12px; cursor: pointer; border: 3px solid transparent; text-align: left; }
.ecard b { display: block; font-size: 16px; font-weight: normal; }
.ecard span { font-size: 13px; opacity: 0.85; }
.ecard.on { border-color: var(--mint); background: #22606a; }
.ecard .votes { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; font-style: normal; }
.ecard .votes span { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #12343b; opacity: 1; }
.btn.small { font-size: 13px; padding: 7px 14px; position: absolute; top: 14px; right: 14px; margin: 0; }
#title .title-inner { position: relative; }
.set-card { min-width: 320px; text-align: left; }
.set-card h2 { text-align: center; }
.srow { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 16px; }
.srow input[type=range] { width: 160px; accent-color: #96e6be; }
.srow input[type=checkbox] { width: 22px; height: 22px; accent-color: #96e6be; }
.set-card .btn { display: block; margin: 16px auto 0; }
#brace { position: absolute; left: 50%; top: calc(50% + 70px); transform: translateX(-50%); background: var(--yellow); color: var(--ink); padding: 8px 18px; border-radius: 12px; font-size: 20px; animation: critPulse 0.5s ease-in-out infinite; }
#t-ping { right: 40px; bottom: 182px; background: rgba(255,200,60,.45); }
@media (max-width: 760px) { #entrances { grid-template-columns: 1fr; } }

/* voice chat: flat mic button (HUD + room). Talking = mint fill, muted = red */
#mic { position: absolute; left: 14px; bottom: 14px; pointer-events: auto; }
.micbtn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 13px; letter-spacing: 1px; color: #e9eef0; background: rgba(12, 16, 24, 0.78); border: 2px solid transparent; border-radius: 10px; padding: 7px 10px; cursor: pointer; }
.micbtn.btn { font-size: 18px; padding: 12px 20px; color: var(--ink); background: #e9eef0; }
.micbtn .k { font-size: 10px; opacity: 0.7; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.micbtn .slash { display: none; }
.micbtn[data-st="off"] .slash, .micbtn[data-st="muted"] .slash { display: inline; }
.micbtn[data-st="on"] { border-color: #96e6be; }
.micbtn[data-st="muted"] { border-color: #ff5a5a; color: #ff8a8a; }
.micbtn.btn[data-st="muted"] { color: #c02a2a; }
.micbtn.talk { background: #96e6be; color: #10301a; }
.rp.talk .dot { outline: 3px solid #96e6be; outline-offset: 2px; }
body.touch #mic { bottom: auto; top: 140px; }

/* profile page (yours or a shared /p/CODE one): flat cards, no shadows */
#pp { background: rgba(8, 22, 26, 0.94); z-index: 40; padding: 20px 12px; }
.pp-card { position: relative; margin: auto; width: min(720px, 100%); background: var(--teal); border-radius: 18px; padding: 22px 22px 18px; text-align: left; }
.pp-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #e9eef0; font-size: 22px; cursor: pointer; }
.pp-head { display: flex; gap: 16px; align-items: center; }
.pp-img { width: 96px; height: 96px; border-radius: 16px; }
.pp-who { flex: 1; min-width: 0; }
.pp-name { font-size: 28px; }
.pp-rank { display: flex; align-items: center; gap: 8px; color: var(--yellow); font-size: 17px; margin: 4px 0 8px; flex-wrap: wrap; }
.pp-title { color: var(--ink); background: var(--mint); border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.pp-who .bar > div { background: var(--yellow); }
.pp-xp { font-size: 13px; opacity: 0.8; margin-top: 4px; }
.pp-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0 6px; }
.pp-stats > div { background: var(--teal2); border-radius: 12px; padding: 8px; text-align: center; }
.pp-stats b { display: block; font-size: 20px; }
.pp-stats span { font-size: 11px; opacity: 0.75; }
.pp-card h4 { margin: 16px 0 8px; font-size: 13px; letter-spacing: 1.5px; opacity: 0.85; }
.pp-card h4 small { font-size: 11px; letter-spacing: 0; opacity: 0.7; margin-left: 6px; }
.pp-files { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pf { background: var(--teal2); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.pf .g { font-size: 26px; }
.g.S { color: var(--yellow); } .g.A { color: var(--mint); } .g.B { color: var(--cyan); } .g.C { color: #e9eef0; } .g.F { color: var(--red); } .g.none { opacity: 0.35; }
.pp-story { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ps { background: var(--teal2); border-radius: 10px; padding: 6px; text-align: center; opacity: 0.5; font-size: 12px; }
.ps.on { opacity: 1; }
.ps i { display: block; font-style: normal; color: var(--yellow); letter-spacing: 1px; }
.pp-tro { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tr { font-family: var(--font); text-align: left; background: var(--teal2); color: #e9eef0; border: 2px solid transparent; border-radius: 12px; padding: 8px 10px; opacity: 0.4; }
.tr b { display: block; font-size: 14px; }
.tr span { font-size: 11px; opacity: 0.8; }
.tr.on { opacity: 1; cursor: pointer; }
.tr.on b { color: var(--yellow); }
.tr:disabled { cursor: default; }
.tr.worn { border-color: var(--mint); }
.pp-own { margin-top: 14px; }
.pp-edit { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pp-edit input, .pp-share input, .pp-login input { font-family: var(--font); font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 0; background: #e9eef0; color: var(--ink); }
.pp-cols { display: flex; gap: 6px; }
.sw { width: 28px; height: 28px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; }
.sw.on { border-color: #ffffff; }
.pp-share { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pp-share input { flex: 1; min-width: 200px; }
.pp-acct { margin-top: 12px; }
.pp-login { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pp-note { font-size: 13px; opacity: 0.8; }
.pp-note a { color: var(--mint); }
.pp-err { color: #ff8a8a; font-size: 13px; min-height: 16px; margin-top: 8px; }
.pp-card .btn.small { font-size: 14px; padding: 9px 14px; position: static; margin: 0; }
#pp-play { width: 100%; }
@media (max-width: 560px) {
  .pp-stats { grid-template-columns: repeat(3, 1fr); }
  .pp-files { grid-template-columns: repeat(3, 1fr); }
  .pp-story { grid-template-columns: repeat(4, 1fr); }
  .pp-head { flex-direction: column; align-items: flex-start; }
}

/* story mode: tabs, the ladder of cases, the case card */
#mtabs { display: inline-flex; gap: 6px; background: var(--teal2); padding: 5px; border-radius: 14px; margin: 14px 0 4px; }
.mtab { font-family: var(--font); font-size: 16px; letter-spacing: 1px; border: 0; border-radius: 10px; padding: 9px 22px; background: transparent; color: #e9eef0; cursor: pointer; }
.mtab.on { background: var(--mint); color: var(--ink); }
#ladder { width: min(980px, 100%); margin: 10px auto 0; }
.lad-h { font-size: 13px; opacity: 0.85; margin-bottom: 10px; }
.lad-h b { color: var(--yellow); margin-left: 6px; }
.rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.rung { position: relative; font-family: var(--font); text-align: left; color: #e9eef0; background: var(--teal2); border: 2px solid transparent; border-radius: 14px; padding: 10px 12px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-height: 118px; }
.rung .rn { font-size: 12px; opacity: 0.7; }
.rung b { font-size: 17px; }
.rung .rp2 { font-size: 11px; opacity: 0.8; }
.rung i { font-style: normal; color: var(--yellow); letter-spacing: 2px; margin-top: auto; }
.rung.locked { opacity: 0.4; cursor: default; }
.rung.locked i { color: #e9eef0; letter-spacing: 1px; font-size: 12px; }
.rung.next { border-color: var(--mint); }
.rung.done { background: #1f5660; }
.rung .votes { position: absolute; top: 8px; right: 10px; display: flex; gap: 3px; }
.rung .votes span { width: 10px; height: 10px; border-radius: 50%; }
.tws { display: flex; gap: 4px; flex-wrap: wrap; }
.tw { font-size: 10px; letter-spacing: 1px; padding: 2px 6px; border-radius: 6px; background: #e9eef0; color: var(--ink); display: inline-block; }
.tw-dark { background: #2a2e3a; color: #ffe066; } .tw-sneezy { background: #ffe066; } .tw-timed { background: #ff9646; } .tw-nomiss { background: #c8a0ff; }
.tw-fragile { background: #ff96c8; } .tw-rush { background: #ff6b6b; } .tw-worms { background: #f5e4be; }
#case { background: rgba(8, 22, 26, 0.9); z-index: 41; }
.case-card { margin: auto; width: min(460px, 92vw); background: var(--paper); color: var(--ink); border-radius: 18px; padding: 22px 24px; text-align: center; }
.case-card .ic-top { color: #b8860b; }
.cc-t { font-size: 34px; margin: 4px 0; }
.cc-p { font-size: 14px; opacity: 0.75; }
.cc-x { font-size: 18px; margin: 14px 0; }
.case-card .tws { justify-content: center; }
.cc-s { color: #d49a00; font-size: 22px; letter-spacing: 3px; margin: 12px 0 4px; }
.cc-s span { font-size: 13px; letter-spacing: 0; color: var(--ink); opacity: 0.6; }
.ic-top .tw { margin-left: 4px; vertical-align: middle; }
@media (max-width: 760px) { .rungs { grid-template-columns: repeat(2, 1fr); } }

/* minimal HUD (default, like the trailer): a thin ECG trace, light translucent chips, smaller tool bar */
body.clean #vitals { background: none; width: 340px; padding: 0; }
body.clean #vitals .row { font-size: 12px; opacity: 0.9; }
body.clean #hp { font-size: 15px; color: #fff; }
body.clean #ecg { width: 340px; height: 44px; margin: 0 0 2px; }
body.clean .fixed-label { font-size: 10px; opacity: 0.8; }
body.clean #vitals .bar { height: 4px; background: rgba(255, 255, 255, 0.22); }
body.clean #vitals .bar > div { background: #fff; }
body.clean #next { top: 112px; font-size: 13px; padding: 4px 12px; background: rgba(12, 16, 24, 0.5); }
body.clean #timer { top: 146px; font-size: 24px; background: rgba(12, 16, 24, 0.5); }
body.clean #minimap-wrap { background: rgba(12, 16, 24, 0.45); padding: 4px; }
body.clean #minimap { width: 168px; height: 84px; }
body.clean #zone { font-size: 10px; }
body.clean .tool { width: 66px; padding: 4px 3px 5px; font-size: 10px; background: rgba(12, 16, 24, 0.5); }
body.clean .tool.on { background: rgba(12, 16, 24, 0.75); }
body.clean #doc, body.clean #scancd { background: rgba(12, 16, 24, 0.5); font-size: 10px; padding: 4px 6px; }
body.clean .bar.small { width: 70px; height: 5px; }
body.clean .msg { font-size: 15px; background: rgba(12, 16, 24, 0.62); }
body.clean #cross { width: 16px; height: 16px; margin: -8px 0 0 -8px; border-width: 1.5px; border-color: rgba(255, 255, 255, 0.7); }

/* co-op scoreboard: live leader list (top right) + TAB score sheet. Flat, no shadows */
#board { position: absolute; top: 12px; right: 12px; min-width: 170px; background: rgba(12, 16, 24, 0.55); border-radius: 12px; padding: 6px 8px; font-size: 13px; }
#board .br { display: flex; align-items: center; gap: 6px; padding: 3px 2px; }
#board .br.me .bn { color: var(--mint); }
#board .bn { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
#board b { font-size: 15px; }
#board .crown { font-style: normal; font-size: 13px; }
#board em { font-style: normal; font-size: 11px; color: #ffb08a; }
#board .bh { font-size: 9px; opacity: 0.55; margin-top: 2px; letter-spacing: 0.5px; }
#board .dot, #sheet .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-right: 6px; }
#sheet { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8, 12, 18, 0.45); }
.sh-card { background: rgba(12, 16, 24, 0.92); border-radius: 16px; padding: 16px 20px; }
.sh-t { font-size: 18px; letter-spacing: 2px; margin-bottom: 8px; }
#sheet table { border-collapse: collapse; font-size: 14px; }
#sheet th { font-size: 10px; letter-spacing: 1px; opacity: 0.7; padding: 4px 10px; text-align: center; }
#sheet td { padding: 6px 10px; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.08); }
#sheet td:first-child { text-align: left; white-space: nowrap; }
#sheet tr.me td:first-child { color: var(--mint); }
#sheet .bad { color: #ff9a8a; }
.sh-n { font-size: 11px; opacity: 0.6; margin-top: 8px; }
body.touch #board { top: 108px; }

/* landing page v2: the sleeping patient (live 3D) shows through the top, play buttons up front */
#title { background: linear-gradient(180deg, rgba(18, 52, 59, 0.35) 0, rgba(18, 52, 59, 0.82) 340px, rgba(18, 52, 59, 0.97) 620px); }
.feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 14px; }
.feats span { font-size: 12px; letter-spacing: 1px; background: rgba(12, 16, 24, 0.55); border-radius: 20px; padding: 5px 11px; }
#mp { background: rgba(12, 16, 24, 0.55); border-radius: 18px; padding: 14px 14px 10px; margin: 0 auto 14px; width: min(760px, 100%); }
#mp .mp-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; }
#mp #play { margin-top: 6px; }
#mp-name { font-family: var(--font); font-size: 17px; padding: 11px 14px; border-radius: 12px; border: 0; text-align: center; width: min(320px, 100%); }
.meta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; }
.meta-row #challenges { margin: 0; }
@media (max-width: 560px) {
  #profile { display: grid; grid-template-columns: auto 1fr; width: 100%; gap: 6px 12px; }
  #profile > div:nth-child(3) { grid-column: 1 / -1; font-size: 13px; }
  #profile .pc-open { grid-column: 1 / -1; justify-self: end; }
  #profile .bar { width: 100%; }
  .meta-row #challenges { width: 100%; }
  #mp .btn { padding: 12px 18px; font-size: 17px; }
  #mp #play { width: 100%; font-size: 22px; padding: 14px; }
  .logo { margin-top: 26px; }
}

/* ---------- phone play v2 ---------- */
/* buttons: flat, clear labels; the stick floats to wherever your thumb lands */
body.touch .tb { background: rgba(12, 16, 24, 0.5); border: 2px solid rgba(255, 255, 255, 0.35); font-size: 13px; letter-spacing: 1px; }
body.touch .tb.big { background: rgba(224, 52, 60, 0.75); border-color: rgba(255, 255, 255, 0.6); }
body.touch #t-jet { background: rgba(80, 180, 140, 0.6); }
body.touch #t-scan { background: rgba(40, 150, 190, 0.6); }
body.touch #t-ping { background: rgba(200, 120, 40, 0.6); }
#stick.float { transition: none; }
body.touch #msgs { top: 30%; }
body.touch .msg { white-space: normal; max-width: 88vw; text-align: center; font-size: 13px; }
body.touch #banner { font-size: 46px; }
body.touch #next { white-space: normal; max-width: 92vw; text-align: center; font-size: 12px; }
/* tools + doc health: a column on the right edge (tool switching is rare: USE picks the right tool) */
body.touch #bottom { left: auto; right: 10px; top: 96px; bottom: auto; transform: none; flex-direction: column; align-items: stretch; gap: 4px; }
body.touch #tools { flex-direction: column; gap: 4px; }
body.touch .tool { width: 74px; padding: 5px 4px; font-size: 10px; }
body.touch #doc { order: 2; }
body.touch #mic { top: auto; bottom: auto; left: 10px; top: 96px; }
body.touch #board { top: 140px; right: auto; left: 10px; min-width: 130px; font-size: 11px; }
@media (orientation: portrait) {
  body.touch #minimap-wrap { display: none; }
  body.touch #vitals { transform: translateX(-50%) scale(0.68); }
  body.touch #next { top: 82px; }
  body.touch #bottom { top: 132px; }
  body.touch #mic { top: 132px; }
  body.touch #board { top: 176px; }
  body.touch #stick { width: 120px; height: 120px; left: 18px; bottom: 24px; }
  body.touch #knob { left: 35px; top: 35px; }
  body.touch #tbtns { right: 12px; bottom: 20px; transform: scale(0.86); transform-origin: bottom right; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #vitals { transform: translateX(-50%) scale(0.72); }
  body.touch #next { top: 72px; }
  body.touch #bottom { top: 64px; }
  body.touch .tool { width: 66px; padding: 3px; }
  body.touch #board { top: 92px; }
  body.touch #mic { top: auto; bottom: 186px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #bottom { top: 8px; right: 8px; flex-direction: row; align-items: flex-start; }
  body.touch #tools { flex-direction: row; }
  body.touch .tool { width: 62px; }
  body.touch #doc { order: 0; }
  body.touch #vitals { left: 42%; }
  body.touch #next { left: 42%; top: 68px; max-width: 60vw; }
}
#profile .acct-line { grid-column: 1 / -1; flex-basis: 100%; font-size: 12px; color: var(--mint); text-align: right; cursor: pointer; }
#profile { flex-wrap: wrap; }
/* logo: chunky outlined wordmark + heartbeat + cross badge (flat, no glow) */
.logo2 { width: min(520px, 92vw); height: auto; display: block; margin: 0 auto 2px; overflow: visible; }
.logo2 text { font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-weight: 900; paint-order: stroke fill; stroke-linejoin: round; }
.lt1 { font-size: 92px; letter-spacing: 10px; fill: #96e6be; stroke: #0e2a30; stroke-width: 16px; }
.lt2 { font-size: 150px; letter-spacing: 4px; fill: #ff6f7a; stroke: #4a0a18; stroke-width: 20px; }
.lecg { fill: none; stroke: #ffffff; stroke-width: 6px; stroke-linejoin: round; stroke-linecap: round; }
.lbadge { fill: #e0343c; stroke: #ffffff; stroke-width: 6px; }
@media (max-width: 560px) { .logo2 { margin-top: 44px; } }
/* story: CASE card top-right (under the clock/board) */
#casecard { position: absolute; top: 12px; right: 12px; max-width: 230px; background: rgba(12, 16, 24, 0.55); border-radius: 12px; padding: 7px 10px; font-size: 12px; }
#casecard .cc-h { font-size: 11px; letter-spacing: 1px; color: var(--yellow); margin-bottom: 3px; }
#casecard .cc-h b { color: #fff; }
#casecard .cc-r { opacity: 0.9; }
body:has(#board:not(.hidden)) #casecard { top: auto; bottom: 90px; }
body.touch #casecard { top: auto; bottom: 200px; left: 10px; right: auto; max-width: 180px; font-size: 10px; }
/* JET GYM */
#gymhud { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(12, 16, 24, 0.6); border-radius: 12px; padding: 7px 16px; font-size: 18px; white-space: nowrap; }
#gymhud b { color: var(--yellow); }
#gymres { background: rgba(8, 22, 26, 0.75); z-index: 41; }
.gr-card { margin: auto; width: min(420px, 92vw); background: var(--teal); border-radius: 18px; padding: 20px 22px; text-align: center; }
.gr-t { font-size: 20px; letter-spacing: 2px; color: var(--yellow); }
.gr-time { font-size: 64px; }
.gr-sub { font-size: 13px; opacity: 0.85; margin-bottom: 12px; }
.gr-h { font-size: 12px; letter-spacing: 2px; opacity: 0.8; margin: 6px 0; }
.gr-top { text-align: left; font-size: 14px; margin-bottom: 8px; }
.gr-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; background: var(--teal2); border-radius: 10px; margin-bottom: 4px; }
.gr-row.me { outline: 2px solid var(--mint); }
.gr-row span { width: 16px; opacity: 0.7; }
.gr-row i { width: 10px; height: 10px; border-radius: 50%; }
.gr-row b { flex: 1; font-weight: normal; }
.gr-row em { font-style: normal; color: var(--yellow); }
.ttoast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); background: var(--mint); color: var(--ink); padding: 10px 18px; border-radius: 12px; font-size: 16px; z-index: 60; animation: msgIn 0.2s ease-out; }
#board { pointer-events: auto; cursor: pointer; }

/* ---------- short landscape phones (v3) ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .logo2 { width: min(300px, 40vw); margin: 0 auto; }
  .tag { font-size: 14px; margin: 4px 0 8px; }
  .feats { display: none; }
  #title .title-inner { padding-top: 8px; }
  #mp { padding: 10px; }
  #mp #play { font-size: 20px; padding: 10px 30px; margin-top: 2px; }
  #mp .btn { font-size: 15px; padding: 9px 16px; margin: 3px; }
  #mp-name { padding: 8px 12px; font-size: 15px; }
  /* in game: compact top strip, tools as small chips top-right, messages small near the top */
  body.touch #vitals { transform: translateX(-50%) scale(0.62); left: 40%; }
  body.touch #next { top: 50px; left: 40%; font-size: 11px; max-width: 46vw; padding: 3px 10px; }
  body.touch #minimap-wrap { transform: scale(0.55); }
  body.touch #bottom { top: 6px; right: 6px; }
  body.touch .tool { width: 50px; font-size: 8px; padding: 3px 2px; }
  body.touch #doc { padding: 3px 5px; font-size: 8px; }
  body.touch #doc .bar.small { width: 40px; }
  body.touch #msgs { top: 78px; }
  body.touch .msg { font-size: 11px; padding: 4px 10px; max-width: 52vw; }
  body.touch #banner { font-size: 34px; top: 24%; }
  body.touch #tbtns { transform: scale(0.78); transform-origin: bottom right; right: 8px; bottom: 8px; }
  body.touch #stick { width: 120px; height: 120px; left: 16px; bottom: 16px; }
  body.touch #knob { left: 35px; top: 35px; }
  body.touch #mic { top: auto; bottom: 150px; left: 10px; transform: scale(0.85); transform-origin: left; }
  body.touch #board { top: 70px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  body.touch #next { top: 66px; }
  body.touch #msgs { top: 96px; }
  body.touch .fixed-label { display: none; }
}
@media (max-width: 560px) {
  #end { padding: 0 14px; }
  #invoice { width: 100%; transform: rotate(-1.5deg); }
  .end-btns { position: sticky; bottom: 0; background: var(--teal); padding: 8px 0 12px; margin-top: 12px; }
  .end-btns .btn { padding: 12px 18px; font-size: 16px; }
}
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(760px, 100%); margin: 0 auto 14px; text-align: left; }
.howto > div { display: flex; gap: 10px; align-items: center; background: rgba(12, 16, 24, 0.55); border-radius: 12px; padding: 9px 12px; font-size: 13px; }
.howto b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--mint); color: var(--ink); display: grid; place-items: center; }
.howto i { font-style: normal; font-size: 10px; padding: 1px 5px; border-radius: 5px; color: var(--ink); }
.howto .t1 { background: #b8a6ff; } .howto .t2 { background: #ff8a8a; } .howto .t3 { background: #ffd25a; }
@media (max-width: 560px) { .howto { grid-template-columns: 1fr; } }
@media (orientation: landscape) and (max-height: 500px) { .howto { grid-template-columns: repeat(3, 1fr); font-size: 11px; } }
/* combo pop sits under the crosshair; messages live in the upper third, so they never collide */
#combo { top: calc(50% + 56px); }
#msgs { top: 26%; }
body.touch #combo { top: calc(50% + 40px); }
body.touch #combo .cw { font-size: 30px; }
#topdocs { background: var(--teal2); border-radius: 14px; padding: 10px 14px; min-width: 260px; text-align: left; }
.td-h { font-size: 12px; letter-spacing: 2px; opacity: 0.85; margin-bottom: 6px; }
.td-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; color: #e9eef0; text-decoration: none; font-size: 14px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.td-row span { width: 14px; opacity: 0.7; }
.td-row b { flex: 1; font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-row em { font-style: normal; color: var(--yellow); font-size: 12px; }
.td-row.me b { color: var(--mint); }
@media (max-width: 560px) { #topdocs { width: 100%; } }
body.touch .micbtn .k { display: none; }
.room-code .invite { position: static; margin-left: 10px; vertical-align: middle; font-size: 12px; padding: 6px 12px; }
#msgs { top: max(26%, 158px); }
body.clean #msgs { top: max(26%, 150px); }

@media (orientation: landscape) and (max-height: 500px) { body.touch #msgs { top: 96px; } }
body.touch #msgs { top: max(30%, 120px); }
@media (orientation: landscape) and (max-height: 500px) { body.touch #msgs { top: 96px; } }
.rp .rpi { width: 34px; height: 34px; border-radius: 9px; margin: -2px 0; }
.rp .dot { display: none; }
.rp.talk .rpi { outline: 3px solid #96e6be; outline-offset: 2px; }
.srow select { font-family: var(--font); font-size: 14px; padding: 5px 8px; border-radius: 8px; border: 0; }
/* menus must scroll by touch (the game canvas blocks touch scrolling) */
.screen { touch-action: pan-y; -webkit-overflow-scrolling: touch; }
@media (orientation: landscape) and (max-height: 500px) {
  .set-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; padding: 14px 18px; width: min(760px, 96vw); }
  .set-card h2 { grid-column: 1 / -1; margin: 0 0 4px; font-size: 22px; }
  .set-card .btn { grid-column: 1 / -1; justify-self: center; margin-top: 6px; padding: 8px 26px; }
  .set-card .srow { font-size: 13px; padding: 5px 0; }
}
#t-menu { position: absolute; top: 8px; left: 50%; margin-left: 196px; pointer-events: auto; width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(12, 16, 24, 0.55); color: #fff; font-family: var(--font); font-size: 14px; letter-spacing: -1px; }
@media (orientation: portrait) { #t-menu { left: auto; right: 10px; margin: 0; top: 96px; } body.touch #bottom { top: 136px; } }
@media (orientation: landscape) and (max-height: 500px) { #t-menu { left: 8px; margin: 0; top: auto; bottom: 186px; } body.touch #mic { bottom: 226px; } }
@media (orientation: landscape) and (max-height: 500px) { #t-menu { bottom: 150px; } body.touch #mic { bottom: 192px; } body.touch #board { top: 62px; } }
@media (orientation: landscape) and (max-height: 500px) { body.touch:has(#board:not(.hidden)) #minimap-wrap { display: none; } body.touch #board { top: 8px; } }
.rung .rimg { position: absolute; right: 8px; bottom: 8px; width: 64px; height: 38px; object-fit: cover; border-radius: 8px; opacity: 0.9; }
.rung.locked .rimg { filter: grayscale(1); }
.cc-img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; }
#ic-img { float: right; width: 110px; height: 65px; object-fit: cover; border-radius: 10px; margin-left: 10px; }
@media (orientation: landscape) and (max-height: 500px) { .cc-img { height: 70px; } .case-card { padding: 12px 18px; } .cc-x { margin: 6px 0; font-size: 15px; } .cc-t { font-size: 26px; } }
#ic-img { display: none !important; }
#profile .pc-img { width: 64px; height: 64px; border-radius: 14px; }
#profile .pc-rank { float: right; margin-left: 8px; }
#profile .rk .badge { vertical-align: -4px; }
#flykeys { position: absolute; left: 14px; bottom: 58px; font-size: 11px; opacity: 0.75; background: rgba(12, 16, 24, 0.45); padding: 4px 8px; border-radius: 8px; }
#flykeys b { background: rgba(255, 255, 255, 0.16); padding: 0 5px; border-radius: 4px; font-weight: normal; }
body.touch #flykeys { display: none; }

/* ---------- less "AI template": no pills, no chip rows (Funbi) ---------- */
.howto2 { font-size: 14px; opacity: 0.8; margin: 4px auto 18px; max-width: 560px; line-height: 1.45; }
#btn-settings.btn.small { background: none; color: #e9eef0; padding: 4px 2px; border-radius: 0; font-size: 13px; letter-spacing: 1.5px; border-bottom: 1px solid rgba(255,255,255,0.35); }
#mtabs { background: none; padding: 0; gap: 26px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.mtab { border-radius: 0; padding: 8px 2px; background: none !important; color: rgba(233,238,240,0.6); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.mtab.on { color: #fff; border-bottom-color: var(--mint); }
.tw { background: none !important; padding: 0; border-radius: 0; font-size: 10px; letter-spacing: 1.2px; color: #ffc83c; margin-right: 8px; }
.tw-dark { color: #c8b8ff; } .tw-sneezy { color: #ffe066; } .tw-timed { color: #ff9646; } .tw-nomiss { color: #c8a0ff; } .tw-fragile { color: #ff96c8; } .tw-rush { color: #ff6b6b; } .tw-worms { color: #f5e4be; }
.case-card .tw { color: #8a5a00; }
.controls b, .tool .k, .micbtn .k, #flykeys b { background: none !important; padding: 0 !important; border: 0 !important; font-weight: bold; color: #fff; }
.controls { gap: 6px 18px; opacity: 0.65; }
.pcard .pl { background: none; padding: 0; border-radius: 0; letter-spacing: 1.5px; font-size: 11px; opacity: 0.75; }
.pp-title { background: none; color: var(--mint); padding: 0; }
.rp .rd { background: none !important; }
/* messages live above the tool bar, the big banner owns the middle: they never stack on each other */
body:not(.touch) #msgs { top: auto; bottom: 96px; flex-direction: column-reverse; }
#banner { top: 26%; }
#arrowm { position: absolute; left: 50%; top: 50%; width: 60px; margin: -9px 0 0 -30px; text-align: center; font-size: 13px; font-weight: bold; color: #6dffc8; -webkit-text-stroke: 3px #0e2a30; paint-order: stroke fill; transition: opacity 0.2s; pointer-events: none; }
body.clean #minimap { width: 210px; height: 105px; }