/* Sunset Bay Mysteries: a dark room, one warm lamp, paper notes */
:root {
  --bg: #0d131d; --bg2: #141c2a; --card: #1a2434; --line: #2a3850; --ink: #f1e9da; --dim: #9aa6b8;
  --lamp: #ffc46b; --lamp2: #e89a2e; --paper: #f4ead2; --pink: #2a2118; --good: #6fcf97; --bad: #ef7d6b; --warn: #f2c14e;
  --r: 16px; --pad: 16px; color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overscroll-behavior: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: var(--pad); }
.wrap { max-width: 760px; margin: 0 auto; width: 100%; }
.serif { font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 23px; background: var(--lamp); color: #2a1a05; font-weight: 650; }
.btn:active { transform: scale(0.98); }
.btn.quiet { background: #ffffff14; color: var(--ink); font-weight: 550; }
.btn.danger { background: var(--bad); color: #2a0a05; }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 14px; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.icon { width: 44px; height: 44px; border-radius: 22px; display: inline-flex; align-items: center; justify-content: center; background: #ffffff10; font-size: 20px; flex: none; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }

/* home */
#home .hero { text-align: center; padding: 26px 0 8px; }
#home .hero svg { width: 120px; height: 120px; }
#home h2.title, .closed h2.title { font: 700 32px/1.1 Georgia, serif; letter-spacing: 0.2px; }
#home .tag { color: var(--dim); margin-top: 6px; }
.cards { display: grid; gap: 12px; margin-top: 20px; }
.card { display: block; width: 100%; text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
button.card:active { background: #202c40; }
.card .k { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lamp); font-weight: 700; }
.card h3 { font: 700 20px/1.2 Georgia, serif; margin: 4px 0; }
.card p { color: var(--dim); font-size: 14px; }
.card .row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; background: #ffffff12; font-size: 12px; font-weight: 600; color: var(--ink); }
.pill.pro { background: #ffc46b26; color: var(--lamp); }
.pill.good { background: #6fcf9726; color: var(--good); }
.pill.bad { background: #ef7d6b26; color: var(--bad); }
.pill.warn { background: #f2c14e26; color: var(--warn); }
.stars { color: var(--lamp); letter-spacing: 2px; }
.stars i { color: #ffffff30; font-style: normal; }
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.tiers button { background: #ffffff0d; border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px; text-align: left; }
.tiers b { display: block; font-size: 14px; } .tiers span { font-size: 12px; color: var(--dim); display: block; }
.foot { display: flex; gap: 10px; justify-content: center; margin: 22px 0 10px; flex-wrap: wrap; }
.small { font-size: 13px; color: var(--dim); }
.closed { margin: auto; text-align: center; max-width: 420px; padding: 24px; }

/* case */
.bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--bg2); }
.bar .t { flex: 1; min-width: 0; } .bar .t b { display: block; font: 700 17px/1.2 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar .t span { font-size: 12px; color: var(--dim); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; background: var(--bg2); border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; padding: 11px 4px; font-size: 14px; font-weight: 600; color: var(--dim); border-bottom: 2px solid transparent; }
.tabs button[aria-selected="true"] { color: var(--lamp); border-bottom-color: var(--lamp); }
.tabs .n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--lamp); color: #2a1a05; font-size: 11px; line-height: 18px; }
.panes { flex: 1; display: flex; min-height: 0; }
.pane { flex: 1; overflow-y: auto; padding: var(--pad); min-width: 0; }
.actbar { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); background: var(--bg2); }
.actbar .small { flex: 1; }
@media (min-width: 900px) {
  #case .tabs button[data-tab="people"] { display: none; }
  #case .pane.people { display: block !important; flex: 0 0 380px; border-right: 1px solid var(--line); }
}

/* people */
.person { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin-bottom: 10px; width: 100%; text-align: left; }
.person .face { width: 64px; height: 76px; border-radius: 12px; overflow: hidden; flex: none; background: #0a0e15; }
.person .face svg { width: 100%; height: 100%; display: block; }
.person .who { flex: 1; min-width: 0; } .person .who b { display: block; font-size: 16px; } .person .who span { display: block; font-size: 13px; color: var(--dim); }
.person .go { color: var(--lamp); font-size: 22px; padding: 0 6px; }
h2.sec { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--dim); margin: 16px 0 8px; font-weight: 700; }
h2.sec:first-child { margin-top: 0; }

/* places */
.plan { width: 100%; max-width: 620px; display: block; margin: 0 auto; }
.plan rect.room { fill: #1d2940; stroke: #40557a; stroke-width: 0.04; cursor: pointer; }
.plan rect.room.quiet { fill: #18202f; }
.plan rect.room.scene { stroke: var(--lamp); stroke-width: 0.08; }
.plan rect.room.done { fill: #243352; }
.plan text { fill: var(--ink); font-size: 0.32px; text-anchor: middle; pointer-events: none; font-weight: 600; }
.plan text.s { fill: var(--dim); font-size: 0.26px; font-weight: 500; }
.note { background: var(--paper); color: #2b241a; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; font: 15px/1.4 Georgia, serif; box-shadow: 0 2px 0 #0006; position: relative; }
.note.new { animation: pop 0.5s ease; }
.note .tagk { font: 700 10px/1 -apple-system, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #8a6a2a; display: block; margin-bottom: 4px; }
@keyframes pop { from { transform: scale(0.94) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* timeline */
.tl { width: 100%; border-collapse: separate; border-spacing: 2px; font-size: 11px; table-layout: fixed; }
.tl th { font-weight: 600; color: var(--dim); padding: 4px 2px; }
.tl th.name { width: 62px; text-align: left; color: var(--ink); font-size: 12px; }
.tl th.crime { color: var(--lamp); }
.tl td { background: #ffffff08; border-radius: 6px; height: 40px; text-align: center; vertical-align: middle; padding: 2px; line-height: 1.15; overflow: hidden; }
.tl td.crime { background: #ffc46b14; }
.tl .seen { color: var(--good); font-weight: 650; display: block; }
.tl .says { color: var(--ink); display: block; }
.tl .out { color: var(--bad); text-decoration: line-through; display: block; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--dim); }
.legend b.seen { color: var(--good); } .legend b.out { color: var(--bad); text-decoration: line-through; } .legend b.says { color: var(--ink); }

/* the interview room */
#talk { background: #06080c; }
#talk .bar { background: transparent; border: 0; position: relative; z-index: 2; }
#stage { position: relative; flex: 0 0 34vh; min-height: 190px; overflow: hidden; }
#stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#stage .flat { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; background: radial-gradient(ellipse at 50% 0%, #4a3414 0%, #17120b 45%, #06080c 80%); }
#stage .flat svg { height: 96%; width: auto; filter: drop-shadow(0 8px 20px #000a); }
#stage .lampline { position: absolute; left: 50%; top: 0; width: 2px; height: 12%; background: #3a2c16; }
#log { flex: 1; overflow-y: auto; padding: 10px var(--pad); display: flex; flex-direction: column; gap: 8px; min-height: 0; }
#log .me { align-self: flex-end; max-width: 84%; background: #2b3b58; border-radius: 16px 16px 4px 16px; padding: 8px 12px; font-size: 15px; }
#log .them { align-self: flex-start; max-width: 90%; background: var(--card); border: 1px solid var(--line); border-radius: 16px 16px 16px 4px; padding: 10px 13px; font: 16px/1.45 Georgia, serif; }
#log .fact { align-self: flex-start; max-width: 90%; font-size: 13px; color: #2b241a; background: var(--paper); border-radius: 6px; padding: 6px 10px; }
#log .fact::before { content: '✎ '; color: #8a6a2a; }
#log .hint { align-self: center; font-size: 13px; color: var(--dim); text-align: center; padding: 2px 10px; }
#chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px var(--pad); scrollbar-width: none; flex: none; align-items: center; }
#chips::-webkit-scrollbar { display: none; }
#chips .g { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); flex: none; font-weight: 700; padding-left: 4px; }
.chip { flex: none; padding: 8px 13px; border-radius: 18px; background: #ffffff10; border: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.chip.press { border-color: #ef7d6b66; color: #ffb4a8; }
.chip:active { background: #ffffff20; }
#askrow { display: flex; gap: 8px; padding: 6px var(--pad) 12px; flex: none; }
#askrow input { flex: 1; min-width: 0; height: 46px; border-radius: 23px; border: 1px solid var(--line); background: #ffffff0d; color: var(--ink); font: inherit; padding: 0 18px; outline: none; }
#askrow input:focus { border-color: var(--lamp); }
.mood { display: inline-block; width: 9px; height: 9px; border-radius: 5px; background: var(--good); margin-right: 5px; }
.mood.wary { background: var(--warn); } .mood.rattled { background: #f59e58; } .mood.cross { background: var(--bad); }
@media (min-width: 900px) {
  #talk { flex-direction: row; flex-wrap: wrap; }
  #talk .bar { flex: 0 0 100%; }
  #stage { flex: 1 1 55%; height: calc(100% - 62px); }
  #talk .side { flex: 0 0 420px; display: flex; flex-direction: column; height: calc(100% - 62px); border-left: 1px solid var(--line); background: var(--bg); }
  #chips { flex-wrap: wrap; max-height: 190px; overflow-y: auto; }
}
@media (max-width: 899px) { #talk .side { display: contents; } }
@media (max-height: 520px) and (max-width: 899px) { #stage { flex-basis: 30vh; min-height: 110px; } }

/* sheets and toasts */
#sheet { position: fixed; inset: 0; background: #000a; display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
#sheet .box { background: var(--bg2); border: 1px solid var(--line); border-radius: 22px 22px 0 0; width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto; padding: 20px var(--pad) calc(20px + env(safe-area-inset-bottom)); animation: up 0.25s ease; }
@media (min-width: 640px) { #sheet { align-items: center; } #sheet .box { border-radius: 22px; } }
@keyframes up { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
#sheet h2 { font: 700 22px/1.2 Georgia, serif; margin-bottom: 10px; }
#sheet p { margin-bottom: 10px; }
#sheet ol, #sheet ul { margin: 0 0 12px; padding-left: 22px; } #sheet li { margin-bottom: 6px; }
#sheet .btns { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } #sheet .btns .btn { flex: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check i { font-style: normal; width: 22px; height: 22px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; background: #ffffff14; color: var(--dim); }
.check.yes i { background: var(--good); color: #06281a; }
.check span { font-size: 14px; } .check span small { display: block; color: var(--dim); }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 8px 0 14px; }
.slots button { padding: 10px 0; border-radius: 10px; background: #ffffff10; border: 1px solid var(--line); font-size: 14px; }
.slots button.crime { border-color: var(--lamp); color: var(--lamp); }
#toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -80px); background: var(--paper); color: #2b241a; padding: 9px 16px; border-radius: 20px; font-weight: 650; font-size: 14px; z-index: 30; transition: transform 0.3s ease; pointer-events: none; box-shadow: 0 6px 20px #0008; }
#toast.on { transform: translate(-50%, 0); }

/* result */
#result .big { text-align: center; padding: 26px 0 6px; }
#result .big .stars { font-size: 44px; }
#result h2.title { font: 700 28px/1.15 Georgia, serif; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.tlwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .tlwrap table { min-width: 560px; }
.person .who .pill { align-self: flex-start; width: auto; }
#ask-mic { flex: 0 0 auto; } #ask-mic.on { background: var(--bad); color: #2a0f0a; animation: mic 1.1s ease-in-out infinite; } #ask-mic.wait { opacity: .5; }
@keyframes mic { 50% { transform: scale(1.12); } }
.tiers.acts button[disabled] { opacity: .45; } .tiers .pill { margin-top: 6px; display: inline-block; }
/* the menu, second pass (2026-11-12) */
#home .hero { padding: 22px 0 6px; } #home .hero svg { width: 104px; height: 104px; filter: drop-shadow(0 10px 26px #0009); margin-bottom: 10px; }
.card.lead { background: linear-gradient(155deg, #2a3b5e 0%, #1a2434 62%); border-color: #3d5078; }
.faces { display: flex; margin-top: 12px; padding-left: 2px; }
.faces span { width: 40px; height: 46px; border-radius: 11px; overflow: hidden; margin-right: -7px; border: 2px solid var(--card); background: #0a0e15; flex: none; box-shadow: 0 2px 6px #0006; }
.card.lead .faces span { border-color: #23314d; }
.faces svg { width: 100%; height: 100%; display: block; }
.rows, .rows.tiers { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.rows button { display: flex; align-items: center; gap: 12px; background: #ffffff0d; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; text-align: left; width: 100%; }
.rows button:active { background: #ffffff1a; } .rows button[disabled] { opacity: .45; }
.rows .num { width: 36px; height: 36px; border-radius: 18px; background: #ffc46b22; color: var(--lamp); display: flex; align-items: center; justify-content: center; font: 700 16px Georgia, serif; font-style: normal; flex: none; }
.rows .tx { flex: 1; min-width: 0; display: block; } .rows .tx b { display: block; font-size: 15px; } .rows .tx span { display: block; font-size: 12.5px; color: var(--dim); }
.rows .pill { margin: 0; flex: none; display: inline-flex; }
@media (min-width: 760px) { .cards { grid-template-columns: 1fr 1fr; align-items: start; } .cards .lead { grid-column: 1 / -1; } }
.person .face { width: 68px; height: 82px; border-radius: 14px; box-shadow: 0 3px 10px #0007; }
.person .who .pill { display: inline-flex; margin-top: 5px; }
@media (max-width: 420px) { .tabs button { font-size: 13px; padding: 11px 2px; } }
/* the portrait across the table is alive: it breathes, blinks, and its mouth moves while it speaks */
#flat svg { animation: breathe 5.5s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes breathe { 50% { transform: scaleY(1.012); } }
#flat .eyes { transform-box: fill-box; transform-origin: center; animation: blink 5.3s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97.5% { transform: scaleY(0.08); } }
#flat.speaking .mouth { transform-box: fill-box; transform-origin: center; animation: talk .3s ease-in-out infinite alternate; }
@keyframes talk { from { transform: scaleY(.7); } to { transform: scaleY(1.9) scaleX(.9); } }
/* reactions: the eyes slide away, a flinch back, a lean in */
#flat .pupil { transition: transform .16s ease-out; }
#flat.glance .pupil { transform: translate(2.3px, 0.7px); }
#flat.flinch svg { animation: flinch .6s ease-out; } @keyframes flinch { 25% { transform: translateY(1.5%) scale(.965); } 100% { transform: none; } }
#flat.lean svg { animation: lean .7s ease-out; } @keyframes lean { 40% { transform: scale(1.05); } 100% { transform: scale(1.02); } }
.face img, .faces img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the way back to the store */
.yzrow { display: flex; margin: -6px 0 -18px -8px; }
.yz { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 22px; color: var(--dim); text-decoration: none; font-weight: 600; font-size: 15px; }
.yz span { font-size: 1.45em; line-height: 0; font-weight: 500; }
.yz:hover { color: var(--ink); }
a.btn { text-decoration: none; }

/* ---------- help and progress (2026-11-12): the hint, the record, badges, the first case's tips ---------- */
#hint-btn { flex: none; min-height: 46px; padding: 0 14px 0 12px; gap: 6px; }
#hint-btn svg { color: var(--lamp); }
#hint-btn .n { font-style: normal; min-width: 20px; height: 20px; border-radius: 10px; background: #ffc46b26; color: var(--lamp); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
#hint-btn[disabled] { opacity: .4; }
@media (max-width: 380px) { #hint-btn span { display: none; } }
.hinthead { display: flex; align-items: center; gap: 8px; color: var(--lamp); margin-bottom: 8px; }
.hinthead .k { font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 700; }
#sheet p.hinttext { font-size: 19px; line-height: 1.45; color: var(--ink); background: #ffc46b0f; border-left: 3px solid var(--lamp); padding: 10px 14px; border-radius: 0 10px 10px 0; }
.chip.hint { border-color: var(--lamp); color: var(--lamp); background: #ffc46b14; }

.rankline { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px; margin: 14px auto 0; padding: 8px 14px 8px 10px; background: #ffffff0a; border: 1px solid var(--line); border-radius: 18px; text-align: left; }
.rankline:active { background: #ffffff16; }
.rankline .rm { flex: none; display: flex; } .rankline .rm svg { width: 40px; height: 40px; filter: drop-shadow(0 3px 8px #0008); }
.rankline .tx { flex: 1; min-width: 0; } .rankline b { display: block; font: 700 16px/1.2 Georgia, serif; }
.rankline .tx span { display: block; font-size: 12.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankline .go { color: var(--lamp); font-size: 22px; }

#record .wrap { padding-bottom: 12px; }
.rankcard { display: flex; gap: 16px; align-items: center; background: linear-gradient(155deg, #2a3b5e 0%, #1a2434 70%); border-color: #3d5078; }
.rankcard .rm { flex: none; } .rankcard .rm svg { filter: drop-shadow(0 8px 18px #000a); }
.rankcard .tx { flex: 1; min-width: 0; } .rankcard h3 { font-size: 24px; }
.rankcard p.serif { color: var(--ink); font-style: italic; margin-bottom: 10px; }
.prog { height: 8px; border-radius: 4px; background: #ffffff14; overflow: hidden; margin-bottom: 8px; }
.prog i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--lamp2), var(--lamp)); }
.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-width: 0; }
.stat b { display: block; font: 700 24px/1.1 Georgia, serif; color: var(--lamp); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat span { display: block; font-size: 13px; font-weight: 600; margin-top: 4px; }
.stat i { display: block; font-style: normal; font-size: 12px; color: var(--dim); }
.badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(3, 1fr); } }
.badge { background: #ffffff08; border: 1px dashed #2f3d56; border-radius: 14px; padding: 12px; min-width: 0; }
.badge svg { display: block; margin-bottom: 6px; opacity: .55; }
.badge b { display: block; font-size: 14px; color: var(--dim); }
.badge span { display: block; font-size: 12px; color: #7d889b; line-height: 1.35; margin-top: 2px; }
.badge i { display: block; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--good); margin-top: 6px; }
.badge.on { background: linear-gradient(160deg, #2a3150 0%, var(--card) 70%); border: 1px solid #4a5a80; }
.badge.on svg { opacity: 1; filter: drop-shadow(0 0 8px #ffc46b55); }
.badge.on b { color: var(--ink); } .badge.on span { color: var(--dim); }

#result .newbadges, #result .promoted { margin-bottom: 12px; }
.nb { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
.nb svg { flex: none; filter: drop-shadow(0 0 8px #ffc46b55); }
.nb b { display: block; font-size: 15px; } .nb span span { display: block; font-size: 13px; color: var(--dim); }
.promoted { background: linear-gradient(155deg, #3b3220 0%, #1a2434 70%); border-color: #6a5630; }
.promoted p.serif { color: var(--ink); font-style: italic; }
.streakline { text-align: center; color: var(--lamp) !important; font-weight: 650; }

#badge-toast { position: fixed; left: 50%; bottom: calc(86px + env(safe-area-inset-bottom)); transform: translate(-50%, 30px); opacity: 0; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px);
  background: #1c2638f2; border: 1px solid #4a5a80; color: var(--ink); padding: 8px 16px 8px 10px; border-radius: 16px; z-index: 31; transition: transform .35s ease, opacity .35s ease; pointer-events: none; box-shadow: 0 10px 30px #000a; }
#badge-toast.on { transform: translate(-50%, 0); opacity: 1; }
#badge-toast svg { flex: none; width: 28px; height: 28px; }
#badge-toast span { font-size: 14px; font-weight: 650; } #badge-toast i { display: block; font-style: normal; font-size: 10.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--lamp); font-weight: 700; }

.coach { position: fixed; inset: 0; z-index: 60; }
.coach-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 200vmax #05080ecc; border: 2px solid var(--lamp); pointer-events: none; transition: all .3s ease; animation: coachin .35s ease; }
.coach-tip { position: fixed; background: var(--paper); color: #2b241a; border-radius: 16px; padding: 14px 14px 12px; box-shadow: 0 12px 34px #000c; animation: coachin .35s ease; }
.coach-tip::before { content: ''; position: absolute; top: -7px; left: calc(var(--ax, 50%) - 7px); width: 14px; height: 14px; background: var(--paper); transform: rotate(45deg); border-radius: 2px; }
.coach-tip.up::before { top: auto; bottom: -7px; }
.coach-tip p { font: 16px/1.45 Georgia, serif; margin: 0 0 10px; position: relative; }
.coach-b { display: flex; gap: 8px; justify-content: flex-end; position: relative; }
.coach-b .btn.quiet { background: #2b241a14; color: #5a4a30; }
@keyframes coachin { from { opacity: 0; } to { opacity: 1; } }
.coach-b .btn:not(.quiet) { background: #2b241a; color: var(--paper); }

/* ---------- play-test fixes (2026-11-12) ---------- */
.foot .btn.small { min-height: 44px; }
#skip-line { position: absolute; right: 12px; bottom: 10px; z-index: 3; min-height: 34px; padding: 0 14px; border-radius: 17px; background: #000a; border: 1px solid #ffffff2a; color: var(--ink); font-size: 13px; font-weight: 650; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#chips-more { display: block; flex: none; margin: -2px auto 2px; min-height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; font-weight: 650; color: var(--lamp); }
@media (max-width: 899px) {
  #chips { flex-wrap: wrap; overflow: hidden; max-height: 100px; align-content: flex-start; padding-bottom: 6px; }
  #chips.open { max-height: 38vh; overflow-y: auto; }
  #chips .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
.tl th.name { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.tl td, .tl th { scroll-margin-left: 70px; }
.warnbox { background: #ef7d6b1f; border: 1px solid #ef7d6b55; color: #ffcabf; border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; font-size: 14px; line-height: 1.4; }
#result h3.pg { font: 700 13px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--lamp); margin: 14px 0 6px; }
#result h3.pg:first-of-type { margin-top: 4px; }