:root { color-scheme:dark; --ink:#f3efe5; --muted:#9d9a92; --red:#cf3342; --red-dark:#851e29; --paper:#171718; --panel:#1d1d1e; --line:#3a3835; --gold:#c8ad68; font-family:Georgia,"Times New Roman",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--ink); background:#0b0b0c; }
body::before { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.18; background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff05 1px,transparent 1px); background-size:32px 32px; mask-image:linear-gradient(to bottom,#000,transparent 85%); }
a { color:inherit; }
button,input,select { font:inherit; }
button,.button { border:1px solid var(--red); border-radius:2px; background:var(--red); color:#fff; padding:.85rem 1.2rem; cursor:pointer; text-decoration:none; display:inline-flex; justify-content:center; align-items:center; transition:background .2s,border-color .2s,transform .2s; }
button:hover,.button:hover { background:#e13c4d; transform:translateY(-1px); }
button.secondary,.button.secondary { background:transparent; border-color:var(--line); }
button.secondary:hover,.button.secondary:hover { border-color:var(--ink); background:#ffffff08; }
button:disabled { opacity:.4; cursor:not-allowed; transform:none; }
.site-header { position:relative; z-index:10; min-height:72px; display:flex; justify-content:space-between; align-items:center; padding:0 max(5vw,1rem); border-bottom:1px solid var(--line); color:var(--muted); font:.7rem Arial,sans-serif; letter-spacing:.17em; text-transform:uppercase; background:#0b0b0ce8; backdrop-filter:blur(12px); }
.brand { color:var(--ink); text-decoration:none; font-weight:bold; display:flex; align-items:center; gap:.8rem; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; background:var(--red); color:white; font-size:.62rem; letter-spacing:.05em; }
.header-state { display:flex; align-items:center; gap:.55rem; }
.header-state i { width:6px; height:6px; border-radius:50%; background:#68a878; box-shadow:0 0 8px #68a878; }
.home,.page { position:relative; width:min(1180px,92vw); margin:auto; padding:5rem 0; }
.hero { min-height:560px; display:grid; grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr); align-items:center; gap:7vw; border-bottom:1px solid var(--line); margin-bottom:6rem; }
.hero-copy { max-width:720px; }
.hero h1 { font-size:clamp(4rem,9vw,8rem); line-height:.82; margin:.18em 0 .25em; max-width:800px; font-weight:normal; letter-spacing:-.065em; }
.hero-copy>p:not(.eyebrow) { color:var(--muted); max-width:570px; font-size:1.08rem; line-height:1.8; }
.text-link,.quiet-link { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--red); padding-bottom:.25rem; display:inline-block; margin-top:1rem; }
.hero-case { aspect-ratio:3/4; max-height:400px; justify-self:end; width:min(100%,300px); padding:2rem; transform:rotate(3deg); display:flex; flex-direction:column; justify-content:space-between; border:1px solid #6e644e; color:#d7c9a6; background:repeating-linear-gradient(0deg,#2d2920,#2d2920 2px,#29251d 3px); box-shadow:-20px 24px 50px #0009; }
.hero-case span,.hero-case small { font:.6rem Arial,sans-serif; letter-spacing:.22em; }
.hero-case strong { font-size:clamp(3rem,6vw,5.5rem); line-height:.8; font-weight:normal; border-block:1px solid #8d7e5b; padding:1.5rem 0; }
.eyebrow,.tag { color:#df6a73; font:.7rem Arial,sans-serif; letter-spacing:.2em; text-transform:uppercase; }
.section-title { display:flex; align-items:end; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; padding-bottom:1rem; color:var(--muted); font:.7rem Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.section-title h2 { color:var(--ink); font:normal 2.5rem Georgia,serif; letter-spacing:-.03em; text-transform:none; margin:.1em 0 0; }
.scenario-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:1rem; }
.scenario-card { position:relative; overflow:hidden; background:linear-gradient(145deg,#1b1b1c,#141415); border:1px solid var(--line); padding:1.7rem; min-height:330px; display:flex; flex-direction:column; }
.scenario-card::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.scenario-card:hover::before { transform:scaleX(1); }
.case-number { position:absolute; right:1rem; top:.25rem; color:#ffffff09; font:6rem Arial,sans-serif; font-weight:bold; }
.scenario-card h3 { position:relative; font-size:2rem; font-weight:normal; margin:1.2rem 0 .6rem; }
.scenario-card>p { position:relative; color:var(--muted); line-height:1.7; max-width:90%; }
.case-footer { margin-top:auto; padding-top:1rem; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:1rem; color:var(--muted); font:.7rem Arial,sans-serif; }
.case-footer .button { padding:.65rem .9rem; }
.join-panel { margin-top:6rem; border:1px solid var(--line); border-left:4px solid var(--red); padding:clamp(1.5rem,4vw,3rem); display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:2rem; background:#151516; }
.join-panel h2 { margin:.25rem 0; font-size:2.3rem; font-weight:normal; }
.join-panel p { color:var(--muted); margin:.5rem 0 0; }
form { display:flex; gap:.5rem; }
input,select { min-width:0; width:100%; padding:.9rem; border:1px solid var(--line); border-radius:0; outline:none; background:#0e0e0f; color:var(--ink); }
input:focus,select:focus { border-color:var(--red); box-shadow:0 0 0 2px #cf334225; }
.error { color:#ed7b85; margin:0; }
.muted { color:var(--muted); }
.lobby-shell { max-width:1050px; margin:auto; }
.lobby-steps { display:flex; gap:2rem; margin-bottom:4rem; color:#67645f; font:.65rem Arial,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
.lobby-steps span { flex:1; border-top:2px solid #292827; padding-top:.8rem; }
.lobby-steps span.active { color:var(--ink); border-color:var(--red); }
.lobby-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:5vw; align-items:start; }
.lobby-grid h1,.room-heading h1 { font-size:clamp(3rem,7vw,6rem); line-height:.9; font-weight:normal; letter-spacing:-.055em; margin:.2em 0; }
.lead,.room-heading>p { color:var(--muted); font-size:1.05rem; line-height:1.8; max-width:660px; }
.case-notes { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.case-notes span { border:1px solid var(--line); padding:.5rem .75rem; color:var(--muted); font:.7rem Arial,sans-serif; }
.setup-card { display:grid; gap:1.1rem; border:1px solid var(--line); background:var(--panel); padding:2rem; box-shadow:16px 16px 0 #111; }
.setup-card h2 { font-size:1.8rem; font-weight:normal; margin:0; }
.setup-card label { display:grid; gap:.55rem; color:var(--muted); font:.75rem Arial,sans-serif; }
.setup-card .quiet-link { justify-self:center; font-size:.8rem; margin:.4rem 0 0; }
.room-heading { max-width:780px; margin-bottom:2.5rem; }
.room-share { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; background:#181819; border:1px solid var(--line); border-left:4px solid var(--red); padding:1rem 1rem 1rem 1.5rem; margin-bottom:4rem; }
.room-share>div>span { display:block; color:var(--muted); font:.6rem Arial,sans-serif; letter-spacing:.2em; }
.room-code { display:block; margin-top:.45rem; color:var(--ink); font:clamp(.75rem,2vw,1.1rem) monospace; overflow-wrap:anywhere; }
.invite-url { display:block; max-width:680px; margin-top:.45rem; color:var(--muted); font:.7rem Arial,sans-serif; overflow-wrap:anywhere; }
.share-actions { display:flex; gap:.5rem; }
.seat-section { margin-top:1rem; }
.seats { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:.8rem; }
.seat { min-height:155px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; text-align:left; background:#161617; border-color:var(--line); color:var(--ink); }
.seat:hover,.seat.selected { border-color:var(--red); background:#201619; }
.seat>span { color:#696661; font:2.2rem Arial,sans-serif; font-weight:bold; }
.seat strong { font-weight:normal; font-size:1.15rem; }
.seat small { color:var(--muted); font:.65rem Arial,sans-serif; }
.privacy-note { display:flex; gap:.8rem; margin-top:2rem; padding:1rem; border:1px solid #5f522e; background:#1c1911; color:#bdaf89; font:.75rem Arial,sans-serif; line-height:1.5; }
.panel { background:var(--paper); border:1px solid var(--line); padding:clamp(1.2rem,4vw,3rem); max-width:760px; margin:auto; }
.panel h1 { font-size:clamp(2.2rem,6vw,4.5rem); font-weight:normal; margin:.2em 0; }
.panel p,.markdown { line-height:1.8; }
.actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.game-header { position:sticky; top:0; }
.game-layout { display:grid; grid-template-columns:230px minmax(0,760px); gap:clamp(2rem,6vw,5rem); justify-content:center; align-items:start; }
.game-nav { position:sticky; top:105px; padding-right:1.2rem; border-right:1px solid var(--line); }
.game-nav::before { content:"CASE PROGRESS"; display:block; color:#696661; font:.6rem Arial,sans-serif; letter-spacing:.2em; margin:0 0 1rem .8rem; }
.game-nav button { position:relative; width:100%; text-align:left; margin:.15rem 0; padding:.85rem .8rem .85rem 1.7rem; background:transparent; border:0; border-left:2px solid #292827; color:#77736d; font-size:.85rem; transform:none; }
.game-nav button::before { content:""; position:absolute; left:-5px; top:50%; width:8px; height:8px; border-radius:50%; background:#292827; transform:translateY(-50%); }
.game-nav button.active { color:var(--ink); border-color:var(--red); background:linear-gradient(90deg,#cf334218,transparent); }
.game-nav button.active::before { background:var(--red); box-shadow:0 0 10px var(--red); }
.game-nav button:not(:disabled):hover { color:var(--ink); background:#ffffff08; }
.markdown { max-width:760px; min-width:0; }
.markdown>h1:first-of-type { font-size:clamp(2.7rem,6vw,5.2rem); line-height:.95; letter-spacing:-.05em; margin:.15em 0 .55em; }
.markdown h1,.markdown h2,.markdown h3 { font-weight:normal; }
.markdown h2 { margin-top:1.6em; font-size:1.8rem; }
.markdown img { max-width:100%; }
.markdown blockquote { border-left:3px solid var(--red); margin:1.5rem 0; padding:1rem 1.2rem; color:#c5bfb5; background:#181314; }
.markdown li { margin:.5rem 0; }
.role-secret,.culprit-secret { border:1px solid #704048; background:#1d1416; padding:1rem 1.2rem; margin:1rem 0; }
.culprit-secret { border-color:var(--red); background:#291216; }
.resource-bar { position:sticky; top:72px; z-index:8; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:.65rem; border-bottom:1px solid var(--line); background:#0b0b0cf2; padding:.7rem 1rem; margin:-5rem calc(50% - 50vw) 2.5rem; padding-right:max(5vw,1rem); font:.7rem Arial,sans-serif; backdrop-filter:blur(10px); }
.resource-bar span { color:var(--muted); border:1px solid var(--line); padding:.45rem .7rem; }
.resource-bar strong { color:var(--ink); margin-right:.4rem; }
.clue-section { border-top:1px solid var(--line); margin-top:2.5rem; padding-top:1rem; }
.clue-card { position:relative; border:1px solid var(--line); border-left:3px solid var(--gold); background:#151515; padding:1.25rem; margin:1rem 0; }
.clue-card h3 { margin:.3rem 0; font-size:1.35rem; }
.puzzle-panel,.timer-panel { border:1px solid #65582f; background:linear-gradient(135deg,#201d14,#15140f); padding:1.4rem; margin:1.8rem 0; }
.timer-value { display:block; font:clamp(2.8rem,8vw,5rem) monospace; color:#e7d69a; letter-spacing:-.08em; }
.final-vote { display:grid; gap:1rem; }
.final-vote fieldset { display:grid; gap:.6rem; border:1px solid var(--line); padding:1rem; }
.final-vote legend { padding:0 .5rem; font-size:1.2rem; }
.final-vote label { display:block; border:1px solid var(--line); padding:.85rem; cursor:pointer; background:#131314; }
.final-vote label:hover { border-color:#77716a; }
.final-vote input { width:auto; margin-right:.5rem; accent-color:var(--red); }
.ending-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.75rem; margin:1.5rem 0; }
.ending-grid article { border:1px solid var(--line); padding:1rem; background:#151515; }
.ending-grid span,.ending-grid strong { display:block; }
.ending-grid span { color:var(--muted); font:.68rem Arial,sans-serif; margin-bottom:.55rem; text-transform:uppercase; letter-spacing:.1em; }
.vote-list { display:grid; gap:.6rem; margin:1.5rem 0; }
.vote-list label { border:1px solid var(--line); padding:.8rem; }
.modal-backdrop { position:fixed; z-index:20; inset:0; background:#000d; display:grid; place-items:center; padding:1rem; backdrop-filter:blur(5px); }
.modal { width:min(500px,100%); background:var(--paper); border:1px solid var(--line); padding:2rem; }
.toast { position:fixed; z-index:30; right:1rem; bottom:1rem; border-left:3px solid var(--red); background:var(--ink); color:#111; padding:1rem 1.2rem; box-shadow:0 8px 30px #000b; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
@media (max-width:800px) {
  .site-header { min-height:62px; }
  .site-header>.header-state { font-size:0; }
  .site-header>.header-state i { display:block; }
  .home,.page { width:min(92vw,680px); padding:3rem 0; }
  .hero { min-height:auto; grid-template-columns:1fr; padding:3rem 0 5rem; gap:3rem; }
  .hero h1 { font-size:clamp(4rem,18vw,6rem); }
  .hero-case { display:none; }
  .join-panel,.lobby-grid { grid-template-columns:1fr; }
  .lobby-steps { gap:.4rem; margin-bottom:2.5rem; }
  .lobby-steps span { font-size:.55rem; }
  .room-share { grid-template-columns:1fr; }
  .room-share button { width:100%; }
  .share-actions { display:grid; grid-template-columns:1fr 1fr; }
  .case-footer { align-items:flex-end; }
  .game-header #game-status { max-width:50vw; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .resource-bar { top:62px; margin:-3rem calc(50% - 50vw) 1.2rem; padding:.55rem 4vw; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; }
  .resource-bar span { white-space:nowrap; }
  .game-layout { grid-template-columns:1fr; gap:1.5rem; }
  .game-nav { position:sticky; top:105px; z-index:7; border:0; border-bottom:1px solid var(--line); margin:0 calc(50% - 50vw); padding:0 4vw .55rem; display:flex; overflow-x:auto; background:#0b0b0cf2; backdrop-filter:blur(10px); }
  .game-nav::before { display:none; }
  .game-nav button { width:auto; min-width:max-content; border-left:0; border-bottom:2px solid #292827; padding:.75rem .8rem; }
  .game-nav button::before { display:none; }
  .markdown>h1:first-of-type { font-size:clamp(2.7rem,13vw,4.2rem); }
  .puzzle-panel form,.join-panel form { flex-direction:column; }
}
@media (max-width:460px) {
  .brand>span:last-child { display:none; }
  .scenario-grid { grid-template-columns:1fr; }
  .scenario-card { min-height:310px; }
  .seats { grid-template-columns:repeat(2,1fr); }
  .seat { min-height:135px; }
  .privacy-note { flex-direction:column; }
}

/* The product is a portrait phone game. Desktop keeps the same 9:16 play surface. */
@media (max-width:800px), (min-width:801px) {
  html,body { height:100%; overflow:hidden; }
  body { position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; width:min(100%,432px); max-height:100dvh; margin:auto; background:#0b0b0c; box-shadow:0 20px 80px #000; }
  body::after { content:""; position:fixed; inset:0; z-index:-2; background:radial-gradient(circle at 50% 12%,#42101755,transparent 32rem); }
  .site-header,.home,.page { width:100%; margin-inline:auto; }
  .site-header { position:relative; min-height:58px; padding:max(.45rem,env(safe-area-inset-top)) 1rem .45rem; background:#0b0b0c; }
  .brand { gap:.65rem; font-size:.62rem; }
  .brand-mark { width:30px; height:30px; }
  .header-state { font-size:.55rem; letter-spacing:.11em; }
  .home,.page { min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; padding:0 1rem 1.4rem; scroll-behavior:smooth; }
  button,.button,input,select { min-height:46px; }
  button,.button { padding:.8rem 1rem; }

  .hero { position:relative; min-height:calc(100dvh - 58px - 64px); display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; gap:0; margin:0 -1rem 2.25rem; padding:2rem 1rem 1.6rem; overflow:hidden; border-bottom:1px solid var(--line); }
  .hero::before { content:""; position:absolute; inset:5% -22% auto 18%; height:58%; border:1px solid #8e7e5a55; transform:rotate(8deg); background:repeating-linear-gradient(0deg,#2d292099,#2d292099 2px,#17150f99 3px); box-shadow:-30px 30px 60px #000; }
  .hero::after { content:"CONFIDENTIAL"; position:absolute; top:18%; right:-1.1rem; padding:.5rem 1.4rem; border:2px solid #b02c38aa; color:#d94a57bb; font:700 .66rem Arial,sans-serif; letter-spacing:.18em; transform:rotate(12deg); }
  .hero-copy { position:relative; z-index:1; }
  .hero h1 { margin:.12em 0 .22em; font-size:clamp(3.8rem,17vw,5.3rem); line-height:.84; }
  .hero-copy>p:not(.eyebrow) { max-width:330px; margin-bottom:1.2rem; font-size:.94rem; line-height:1.65; }
  .hero-action { width:100%; justify-content:space-between; }
  .hero-case { display:none; }

  .section-title { margin-bottom:.8rem; }
  .section-title h2 { font-size:2rem; }
  .scenario-grid { grid-template-columns:1fr; gap:.8rem; }
  .scenario-card { min-height:275px; padding:1.35rem; }
  .scenario-card::before { transform:scaleX(1); }
  .scenario-card h3 { max-width:82%; margin:.9rem 0 .4rem; font-size:1.75rem; }
  .scenario-card>p { max-width:94%; margin-top:.25rem; font-size:.9rem; line-height:1.6; }
  .case-number { font-size:4.6rem; }
  .case-footer { align-items:center; }
  .case-footer .button { min-width:96px; }
  .join-panel { margin:2.5rem 0 0; padding:1.3rem; grid-template-columns:1fr; gap:1.1rem; }
  .join-panel h2 { font-size:1.8rem; }
  .join-panel form { flex-direction:column; }

  .lobby-shell { padding-top:1rem; }
  .lobby-steps { position:sticky; top:0; z-index:6; margin:0 -1rem 1.6rem; padding:.7rem 1rem 0; gap:.35rem; background:#0b0b0cf5; backdrop-filter:blur(10px); }
  .lobby-steps span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding-top:.55rem; font-size:.48rem; }
  .lobby-grid { grid-template-columns:1fr; gap:1.5rem; }
  .lobby-grid h1,.room-heading h1 { font-size:clamp(2.7rem,13vw,4rem); }
  .lead,.room-heading>p { font-size:.92rem; line-height:1.65; }
  .case-notes { margin-top:1.25rem; gap:.35rem; }
  .setup-card { padding:1.25rem; box-shadow:7px 7px 0 #111; }
  .setup-card button { width:100%; }
  .room-heading { margin-bottom:1.4rem; }
  .room-share { grid-template-columns:1fr; margin-bottom:2rem; padding:1rem; }
  .invite-url { display:none; }
  .share-actions { display:grid; grid-template-columns:1fr 1fr; }
  .seats { grid-template-columns:repeat(2,1fr); gap:.55rem; }
  .seat { min-height:126px; padding:.85rem; }
  .seat>span { font-size:1.8rem; }
  .privacy-note { flex-direction:column; }

  .game-header { position:relative; }
  .game-header #game-status { max-width:55%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
  .game-header+.page { padding-bottom:1.4rem; }
  .resource-bar { position:sticky; top:0; z-index:8; margin:0 -1rem; padding:.45rem 1rem; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .resource-bar::-webkit-scrollbar,.game-nav::-webkit-scrollbar { display:none; }
  .resource-bar span { flex:none; white-space:nowrap; padding:.35rem .55rem; }
  .game-layout { display:block; }
  .game-nav { position:fixed; z-index:15; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,432px); min-height:64px; display:flex; margin:0; padding:.35rem .6rem max(.35rem,env(safe-area-inset-bottom)); overflow-x:auto; border:0; border-top:1px solid var(--line); background:#0b0b0cf7; backdrop-filter:blur(14px); }
  .game-nav::before { display:none; }
  .game-nav button { flex:1 0 62px; min-width:62px; margin:0; padding:.48rem .35rem; border:0; border-top:2px solid transparent; border-radius:0; text-align:center; font:700 .65rem Arial,sans-serif; }
  .game-nav button::before { display:none; }
  .game-nav button.active { border-color:var(--red); background:#cf334216; }
  .markdown { min-height:100%; padding:1.5rem 0 calc(4.5rem + env(safe-area-inset-bottom)); font-size:.96rem; touch-action:pan-y; }
  .markdown>h1:first-of-type { font-size:clamp(2.7rem,13vw,4rem); }
  .markdown p,.markdown li { line-height:1.7; }
  .role-secret,.culprit-secret,.clue-card,.puzzle-panel,.timer-panel { padding:1rem; }
  .clue-card button { width:100%; }
  .puzzle-panel form { flex-direction:column; }
  .actions { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
  .actions>* { width:100%; }
  .final-vote fieldset { padding:.75rem; }
  .final-vote label { min-height:48px; display:flex; align-items:center; }
  .final-vote input { flex:none; width:20px; height:20px; }
  .ending-grid { grid-template-columns:1fr 1fr; }
  .modal-backdrop { align-items:end; padding:0; }
  .modal { width:min(100%,460px); max-height:85svh; overflow:auto; padding:1.25rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius:14px 14px 0 0; }
  .modal button { width:100%; }
  .toast { right:50%; bottom:calc(5rem + env(safe-area-inset-bottom)); width:calc(min(100%,432px) - 2rem); transform:translateX(50%); }
  .app-footer { min-height:64px; display:flex; align-items:stretch; justify-content:space-around; gap:.35rem; padding:.35rem .65rem max(.35rem,env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:#0b0b0cf7; }
  .app-footer a { min-width:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; color:var(--muted); text-decoration:none; font:700 .62rem Arial,sans-serif; letter-spacing:.08em; }
  .app-footer a span { color:#77736d; font-size:.58rem; }
  .app-footer a.active,.app-footer a:hover { color:var(--ink); background:#ffffff08; }
  .app-footer a.active span { color:var(--red); }
  .app-footer strong { align-self:center; color:#625f5a; font:.58rem Arial,sans-serif; letter-spacing:.16em; }
}

@media (min-width:801px) {
  body { height:min(calc(100dvh - 3rem),768px); aspect-ratio:9/16; margin-block:1.5rem; border:1px solid var(--line); border-radius:20px; overflow:hidden; }
  .site-header { border:1px solid var(--line); border-bottom:0; border-radius:20px 20px 0 0; }
  .home,.page { background:#0b0b0c; }
  .game-nav { bottom:calc((100dvh - min(calc(100dvh - 3rem),768px)) / 2); }
}