@font-face{
  font-family:"Amira Typo";
  src:url("alfont_com_Amira-Typo.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Ummi Regular";
  src:url("alfont_com_Ummi-Regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  color-scheme:light;
  --bg:#fff4c9;
  --surface:#fffdf6;
  --surface-2:#ffe98d;
  --text:#171521;
  --muted:#595566;
  --ink:#171521;
  --accent:#ff5f65;
  --accent-2:#ffcf3f;
  --accent-3:#51d3c7;
  --danger:#ed374b;
  --success:#39b884;
  --r:22px;
  --shadow:5px 6px 0 var(--ink);
  --shadow-small:3px 4px 0 var(--ink);
  --font:"Ummi Regular",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
  --title-font:"Amira Typo",Tahoma,Arial,sans-serif;
  --num-font:"Roboto","Segoe UI",Arial,Helvetica,sans-serif;
  --d:-1;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#251936;
  --surface:#392749;
  --surface-2:#53334c;
  --text:#fff8e4;
  --muted:#e2d2df;
  --ink:#100c17;
  --accent:#ff7580;
  --accent-2:#ffda58;
  --accent-3:#56e2d1;
  --danger:#ff6473;
  --success:#68e0ac;
  --shadow:5px 6px 0 #100c17;
  --shadow-small:3px 4px 0 #100c17;
}
[data-theme="detective"]{
  color-scheme:dark;
  --bg:#111316;
  --surface:#202327;
  --surface-2:#383b3f;
  --text:#f4f3ed;
  --muted:#c2c3c1;
  --ink:#050607;
  --accent:#e5e4de;
  --accent-2:#bfc1c2;
  --accent-3:#7d8388;
  --danger:#f0efea;
  --success:#d6d6d2;
  --shadow:5px 6px 0 #050607;
  --shadow-small:3px 4px 0 #050607;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  min-height:100%;
  overflow:hidden;
  color:var(--text);
  font:500 19px/1.5 var(--font);
  background:
    radial-gradient(circle at 3px 3px,color-mix(in srgb,var(--ink) 12%,transparent) 1.5px,transparent 1.8px) 0 0/24px 24px,
    var(--bg);
  transition:background-color .25s,color .25s;
}
button,input{font:inherit}
button{font-family:var(--title-font)}
.num{display:inline-block;font-family:var(--num-font)!important;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;direction:ltr;unicode-bidi:isolate;white-space:nowrap;letter-spacing:.015em}
button{color:inherit;cursor:pointer}
button:disabled{cursor:not-allowed}
:focus-visible{outline:3px dashed var(--accent);outline-offset:4px}

#bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
#bg i{position:absolute;display:block;border:4px dashed var(--ink);border-radius:50%;opacity:.1;animation:float 14s ease-in-out infinite alternate}
#bg i:nth-child(1){width:230px;height:230px;background:var(--accent);inset:-85px auto auto -70px}
#bg i:nth-child(2){width:185px;height:185px;background:var(--accent-2);inset:auto -70px 8% auto;animation-delay:-5s}
#bg i:nth-child(3){width:150px;height:150px;background:var(--accent-3);inset:42% auto auto 34%;animation-delay:-9s}
@keyframes float{to{transform:translate(20px,-24px) rotate(12deg)}}
html[data-theme="detective"] body::before,html[data-theme="detective"] body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:5}
html[data-theme="detective"] body::before{
  opacity:.15;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.12) 0 1px,transparent 1px 4px),radial-gradient(ellipse at center,transparent 54%,rgba(0,0,0,.52) 100%);
  animation:tv-roll 2.2s linear infinite;
}
html[data-theme="detective"] body::after{
  inset:-8%;opacity:.07;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  background-size:180px 180px;animation:tv-snow .22s steps(2,end) infinite;
}
@keyframes tv-roll{to{background-position:0 8px,0 0}}
@keyframes tv-snow{0%{transform:translate(0,0)}25%{transform:translate(1%,-.5%)}50%{transform:translate(-.5%,.5%)}75%{transform:translate(.5%,1%)}100%{transform:translate(-1%,-.5%)}}

#app{position:relative;z-index:1;height:100%;height:100dvh;max-width:560px;margin:auto}
.screen{
  position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;
  padding:max(26px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));
  opacity:0;transform:translateX(calc(var(--d)*28px)) scale(.98);pointer-events:none;
  transition:opacity .3s,transform .3s;
  scrollbar-width:thin;scrollbar-color:var(--accent) transparent;
}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.screen.out{transform:translateX(calc(var(--d)*-28px)) scale(.98)}
.screen::before{content:"✦";position:absolute;top:20px;inset-inline-end:24px;color:var(--accent);font-size:25px;transform:rotate(12deg);pointer-events:none}
.fresh.on [data-s]{animation:rise .45s both calc(var(--i)*45ms)}
@keyframes rise{from{opacity:0;transform:translateY(13px) scale(.97)}}
.c{display:flex;flex-direction:column;gap:16px;min-height:100%;justify-content:center}
.center{text-align:center;align-items:stretch}
h1,h2,p{margin-top:0}
h1,h2{font-family:var(--title-font)}
h1{font-size:clamp(2.7rem,12vw,3.7rem);line-height:1.15;margin:0;font-weight:900;letter-spacing:0;text-shadow:2px 2px 0 var(--accent-2),4px 4px 0 color-mix(in srgb,var(--ink) 18%,transparent)}
h2{margin:4px 0 0;font-size:1.7rem;line-height:1.3}
p{margin-bottom:0}
.sub{align-self:center;color:var(--text);background:var(--surface-2);border:2px solid var(--ink);border-radius:999px;padding:4px 13px;margin:-6px 0 4px;box-shadow:2px 3px 0 var(--ink)}

.logo{display:flex;align-items:center;justify-content:center;min-height:115px;margin:0 auto -2px;animation:breathe 3.6s ease-in-out infinite;transform-origin:center}
.logo img{display:block;width:min(170px,46vw);height:auto;max-height:170px;object-fit:contain;filter:drop-shadow(4px 5px 0 color-mix(in srgb,var(--ink) 15%,transparent))}
.logo img.brand-logo-plain{width:min(285px,74vw);max-height:112px}
html[data-theme="dark"] .logo img.brand-logo-plain,html[data-theme="detective"] .logo img.brand-logo-plain{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.38))}
@keyframes breathe{50%{transform:translateY(-4px) rotate(-1deg)}}

.card,.mode,.chip,.pl input,dialog,.inp{
  color:var(--text);background:var(--surface);border:3px solid var(--ink);
  box-shadow:var(--shadow-small);
}
.card{border-radius:var(--r);padding:15px}
button{border:0;background:none}
.btn{
  position:relative;overflow:hidden;isolation:isolate;width:100%;min-height:56px;padding:8px 22px;
  border:3px solid var(--ink);border-radius:19px;background:var(--accent);color:#181521;
  font-weight:900;font-size:1.2rem;box-shadow:0 6px 0 var(--ink);
  transition:transform .13s,box-shadow .13s,filter .13s;
}
.btn::before{content:"";position:absolute;inset:4px 7px auto;height:7px;border-radius:99px;background:rgba(255,255,255,.42);z-index:-1}
.btn:hover{filter:saturate(1.12) brightness(1.03);transform:translateY(-2px);box-shadow:0 8px 0 var(--ink)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ink)}
.btn:disabled{opacity:.5;filter:grayscale(.45);transform:none;box-shadow:0 4px 0 var(--ink)}
.btn.alt{background:var(--surface-2);color:var(--text)}
.link{align-self:center;min-height:44px;color:var(--text);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ghost{
  position:fixed;z-index:6;top:max(13px,env(safe-area-inset-top));inset-inline-start:13px;
  display:grid;place-items:center;padding:0;
  width:48px;height:48px;border:3px solid var(--ink);border-radius:50%;background:var(--accent-2);
  color:#171521;font-size:1.35rem;line-height:1;box-shadow:3px 4px 0 var(--ink);transition:transform .15s;
}
.ghost:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.music-btn{inset-inline-start:69px;background:var(--accent-3)}
.ghost svg{display:block;width:23px;height:23px;margin:auto;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.music-btn svg{width:24px;height:24px}
.ghost:disabled{opacity:.55;cursor:not-allowed}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);transform:scale(0);animation:rip .5s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(3.2);opacity:0}}

.modes{display:grid;gap:12px}
.mode{
  display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:1px;
  min-height:74px;padding:12px 17px;border-radius:19px;transition:transform .15s,background .15s;
}
.mode:hover{transform:translateY(-2px) rotate(-.5deg)}
.mode small{color:var(--muted);font-size:.88rem;line-height:1.35}
.mode.sel{background:var(--accent-2);color:#171521;transform:rotate(-1deg)}
.mode.sel small{color:#37303d}
.mode.sel b{color:#171521}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between}
.pl{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.pl>div{display:flex;gap:9px;transition:transform .2s,opacity .2s}
.pl .gone{opacity:0;transform:translateX(calc(var(--d)*-30px))}
.pl input,.add input,.inp{flex:1;min-height:50px;border-radius:15px;padding:0 14px;min-width:0;outline:none;box-shadow:inset 0 2px 0 rgba(255,255,255,.34),var(--shadow-small)}
.pl input:focus,.add input:focus,.inp:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent),var(--shadow-small)}
.pl input::placeholder,.add input::placeholder,.inp::placeholder{color:var(--muted);opacity:.82}
.sq{width:50px;min-height:50px;flex:none;border:3px solid var(--ink);border-radius:15px;background:var(--accent-2);color:#171521;font-weight:900;font-size:1.35rem;box-shadow:var(--shadow-small);transition:transform .12s,box-shadow .12s}
.sq:active{transform:translate(2px,3px);box-shadow:1px 1px 0 var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.chip{min-height:43px;padding:2px 15px;border-radius:999px;background:var(--surface-2);font-weight:800;transition:transform .13s,background .16s}
.chip:active{transform:translateY(2px)}
.chip.sel{background:var(--accent-3);color:#171521}
.add{display:flex;gap:9px;margin-top:10px}
.sec{display:flex;flex-direction:column;gap:7px}
.sec>b{font-weight:900}

/* Detective-style, compact room setup */
.lobby-screen{justify-content:flex-start;gap:12px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(22px,env(safe-area-inset-bottom))}
.lobby-screen .lobby-code{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:100%;min-height:126px;padding:11px 16px;border-radius:22px;background:var(--accent-2);color:#171521;box-shadow:var(--shadow);transition:transform .16s,box-shadow .16s}
.lobby-screen .lobby-code:hover{transform:translateY(-2px);box-shadow:4px 7px 0 var(--ink)}
.lobby-code .code-kicker{font-size:.9rem;font-weight:900;line-height:1.25}
.lobby-screen .lobby-code b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(1.9rem,8vw,2.45rem);font-weight:900;line-height:1.15;letter-spacing:.28em;direction:ltr;padding-inline-start:.28em;color:#171521}
.lobby-code .code-hint{font-family:var(--font);font-size:.78rem;font-weight:700;opacity:.8}
.lobby-panel{width:100%;padding:13px;border:2px solid color-mix(in srgb,var(--ink) 84%,transparent);border-radius:20px;background:color-mix(in srgb,var(--surface) 93%,var(--bg));box-shadow:var(--shadow-small)}
.lobby-section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:1px 1px 10px;border-bottom:1px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.lobby-heading{display:flex;align-items:center;gap:9px;min-width:0}
.section-mark{display:flex;align-items:center;justify-content:center;flex:none;width:37px;height:37px;border:2px solid var(--ink);border-radius:12px;background:var(--accent-2);color:#171521;font-size:1.3rem;line-height:1;text-align:center;box-shadow:2px 3px 0 var(--ink)}
.section-mark .mark-icon{display:block;flex:none;width:21px;height:21px;overflow:visible}
.section-mark .mark-icon path{fill:currentColor}
.lobby-heading h2{margin:0;font-size:1.16rem;line-height:1.18}
.lobby-heading p{margin:3px 0 0;color:var(--muted);font-size:.74rem;line-height:1.25}
.player-count,.host-label{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:31px;padding:3px 9px;border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.76rem;font-weight:800}
.player-list{display:grid;gap:7px;margin-top:10px}
.card.lobby-player{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0;padding:8px 10px;border:2px solid color-mix(in srgb,var(--ink) 70%,transparent);border-radius:14px;background:var(--surface);box-shadow:none}
.player-main{display:flex;align-items:center;gap:7px;min-width:0}
.player-crown{flex:none;color:var(--accent-2);font-size:1rem;line-height:1}
.player-name{display:flex;align-items:center;gap:5px;min-width:0;font-weight:800;overflow-wrap:anywhere}
.you-label,.offline-label{display:inline-flex;align-items:center;flex:none;padding:1px 6px;border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:999px;color:var(--muted);font-size:.67rem;font-weight:700}
.offline-label{color:var(--danger)}
.player-meta{display:flex;align-items:center;gap:7px;flex:none}
.player-score{font-size:.95rem}
.lobby-settings{display:grid;gap:12px}
.settings-heading{margin-bottom:0}
.setting-field{display:grid;gap:8px;min-width:0}
.setting-label{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.setting-label>b{font-size:.9rem;font-weight:900}
.setting-label>small{color:var(--muted);font-size:.72rem;white-space:nowrap}
.theme-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.theme-field{padding:9px;border:1px solid color-mix(in srgb,var(--ink) 36%,transparent);border-radius:14px;background:var(--surface);margin-bottom:6px}
.theme-picker .chip{width:100%;min-width:0;min-height:41px;padding:5px 4px;border:2px solid var(--ink);border-radius:13px;background:var(--surface-2);box-shadow:1px 2px 0 var(--ink);font-size:.82rem;line-height:1.2;white-space:normal}
.theme-picker .chip.sel,.option-row .chip.sel{background:var(--accent-3);color:#171521}
.theme-picker .random-chip{grid-column:1/-1}
.lobby-control-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:stretch}
.lobby-control-grid>.setting-field{align-content:start;padding:9px;border:1px solid color-mix(in srgb,var(--ink) 36%,transparent);border-radius:14px;background:var(--surface)}
.rounds-field{grid-column:1/-1;margin-bottom:6px}
.stepper{display:flex;align-items:center;justify-content:flex-start;gap:9px}
.stepper .sq{width:42px;min-height:42px;border-width:2px;border-radius:12px;box-shadow:2px 3px 0 var(--ink);font-size:1.15rem}
.setting-value{min-width:28px;text-align:center;font-size:1rem}
.option-row{display:flex;flex-wrap:wrap;gap:6px}
.option-row .chip{flex:1 1 55px;min-width:52px;min-height:39px;padding:4px 7px;border:2px solid var(--ink);border-radius:12px;background:var(--surface-2);box-shadow:1px 2px 0 var(--ink);font-size:.82rem;line-height:1.1}
.imp-options,.timer-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.imp-options .chip,.timer-options .chip{width:100%;min-width:0;min-height:44px;padding:4px 2px;font-size:.8rem}
.round-options .chip{flex:1 1 43px;min-width:43px}
.hint-toggle{display:flex;align-items:center;gap:9px;width:100%;min-height:58px;padding:8px 10px;border:2px solid var(--ink);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:var(--shadow-small);text-align:start;transition:background .16s,transform .12s}
.hint-toggle:active{transform:translateY(2px)}
.hint-toggle.on{background:color-mix(in srgb,var(--accent-3) 22%,var(--surface))}
.hint-symbol{display:grid;place-items:center;flex:none;width:31px;height:31px;border:2px solid var(--ink);border-radius:50%;background:var(--accent-2);color:#171521;font-size:1rem}
.hint-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:1px}
.hint-copy b{font-size:.84rem;line-height:1.3}
.hint-copy small{font-family:var(--font);color:var(--muted);font-size:.7rem;font-weight:500}
.toggle-track{position:relative;display:block;flex:none;width:46px;height:26px;border:2px solid var(--ink);border-radius:999px;background:var(--surface-2);transition:background .16s}
.toggle-track i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text);box-shadow:1px 1px 0 var(--ink);transition:left .16s}
.hint-toggle.on .toggle-track{background:var(--accent-3)}
.hint-toggle.on .toggle-track i{left:22px;background:#171521}
.lobby-start{display:grid;gap:9px}
.lobby-warning{display:flex;align-items:center;justify-content:center;gap:7px;margin:0;padding:8px 10px;border:1px dashed color-mix(in srgb,var(--ink) 65%,transparent);border-radius:13px;background:color-mix(in srgb,var(--surface-2) 62%,transparent);color:var(--text);font-size:.83rem;text-align:center}
.lobby-warning>span{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--accent);color:#171521;font-weight:900}
.start-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;border-radius:16px;font-size:1.08rem}
.start-button>span{font-size:.9rem}
.guest-panel{display:grid;gap:12px}
.room-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.room-fact{display:flex;align-items:center;gap:9px;min-width:0;min-height:68px;padding:9px 10px;border:2px solid color-mix(in srgb,var(--ink) 48%,transparent);border-radius:15px;background:color-mix(in srgb,var(--surface) 94%,var(--surface-2));box-shadow:2px 3px 0 var(--ink)}
.fact-index{display:grid;place-items:center;flex:none;width:34px;height:34px;border:2px solid var(--ink);border-radius:11px;background:var(--accent-2);color:#171521;box-shadow:1px 2px 0 var(--ink);font-size:.75rem;font-weight:900}
.room-fact-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.room-fact small{color:var(--muted);font-size:.72rem;line-height:1.2}
.room-fact b{font-size:.96rem;line-height:1.2;overflow-wrap:anywhere}
.ready-button{display:flex;align-items:center;justify-content:center;gap:9px;min-height:54px;border-radius:16px}
.ready-button>span{display:grid;place-items:center;width:25px;height:25px;border:2px solid currentColor;border-radius:50%;font-size:.9rem;line-height:1}
@media(max-width:480px){
 .lobby-control-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:380px){
 .lobby-screen{gap:10px;padding-inline:15px}
 .lobby-panel{padding:11px}
 .room-facts{grid-template-columns:minmax(0,1fr)}
 .theme-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .theme-picker .chip{font-size:.76rem}
 .setting-label>small{font-size:.68rem}
 .player-count,.host-label{padding-inline:7px}
}


/* secret role card */
.stage{perspective:900px;margin:8px auto;width:min(100%,330px)}
.flipper{
  position:relative;display:block;width:100%;height:320px;border:0;border-radius:26px;
  transform-style:preserve-3d;transition:transform .55s cubic-bezier(.2,.8,.2,1);
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;
}
.flipper.flip{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;border:4px solid var(--ink);border-radius:26px;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px;text-align:center;
  box-shadow:var(--shadow);
}
.front{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ink) 18%,transparent) 1.2px,transparent 1.7px) 0 0/21px 21px,var(--surface-2);color:var(--text);font-weight:900}
.front .lock-icon{font-size:3rem;line-height:1}
.front-instruction{display:block;max-width:100%;padding:8px 13px;border:2px solid color-mix(in srgb,var(--ink) 68%,transparent);border-radius:14px;background:var(--surface);color:var(--text);box-shadow:2px 3px 0 var(--ink);font-size:1.05rem;font-weight:900;line-height:1.5;text-shadow:none;overflow-wrap:anywhere}
.back{transform:rotateY(180deg);background:var(--accent-3);color:#171521}
.back.odd{background:var(--accent)}
.back h2{font-size:2.25rem;color:#171521;font-weight:900}
/* timer */
.ring{position:relative;width:236px;height:236px;margin:10px auto;background:var(--surface);border:4px solid var(--ink);border-radius:50%;box-shadow:var(--shadow)}
.ring svg{width:100%;height:100%;transform:rotate(-90deg);padding:13px}
.ring circle{fill:none;stroke-width:10;stroke-linecap:round}
.ring .tr{stroke:color-mix(in srgb,var(--text) 14%,transparent)}
.ring .pg{stroke:var(--accent);stroke-dasharray:565.5;transition:stroke-dashoffset .3s linear,stroke .5s}
.ring.warn .pg{stroke:var(--danger)}
.ring.warn{animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.035) rotate(2deg)}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:3.2rem;font-weight:900;font-variant-numeric:tabular-nums;text-shadow:2px 2px var(--accent-2)}
.vote{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vote button{min-height:74px;border-radius:18px;font-weight:900;transition:transform .13s,background .2s}
.vote button:hover{transform:translateY(-2px) rotate(.5deg)}
.vote button.sel{background:var(--accent-2);color:#171521;transform:rotate(-1deg)}
.big{font-family:var(--title-font);font-size:2.7rem;font-weight:900;line-height:1.2;margin:0;text-shadow:2px 2px 0 var(--accent-2)}
.tag{display:inline-block;padding:2px 14px;border:2px solid var(--ink);border-radius:999px;background:var(--accent-2);color:#171521;margin:2px;font-weight:900}
.win{color:var(--success)}.lose{color:var(--danger)}
.shake{animation:shake .6s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.score{display:flex;justify-content:space-between;align-items:center;padding:12px 16px}
#fx{position:fixed;inset:0;pointer-events:none;z-index:9}
.drum{position:fixed;inset:0;z-index:8;display:grid;place-items:center;background:color-mix(in srgb,var(--bg) 90%,transparent);font-size:5rem}
.drum span{display:grid;place-items:center;width:140px;height:140px;border:4px solid var(--ink);border-radius:50%;background:var(--accent-2);box-shadow:var(--shadow);animation:beat .4s infinite}
@keyframes beat{50%{transform:scale(1.12) rotate(-7deg)}}
dialog{border-radius:24px;color:var(--text);max-width:min(92vw,410px);padding:22px}
dialog::backdrop{background:rgba(20,12,30,.62)}

/* online rooms */
.inp{flex:0 0 auto;width:100%;min-height:56px;padding:0 16px;background:var(--surface)}
.code-input{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace!important;direction:ltr;text-align:center;letter-spacing:.34em;font-size:1.35rem;font-weight:800;font-variant-numeric:tabular-nums;padding-inline-start:.34em}
.code{display:flex;flex-direction:column;gap:2px;align-items:center;cursor:pointer;text-align:center;width:100%;border-radius:20px;background:var(--accent-2);color:#171521}
.code b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:2.6rem;letter-spacing:.28em;direction:ltr;padding-inline-start:.28em;font-variant-numeric:tabular-nums;font-weight:800}
.code small{color:#37303d}
.badge{padding:2px 10px;border:2px solid var(--ink);border-radius:99px;background:var(--surface-2);font-size:.84rem}
.badge.ok{background:var(--accent-3);color:#171521}
.toast{position:fixed;inset-inline:16px;bottom:24px;max-width:440px;margin:auto;padding:12px 16px;border:3px solid var(--ink);border-radius:18px;background:var(--danger);color:#fff;text-align:center;box-shadow:var(--shadow);z-index:12;animation:rise .3s}
html[data-theme="detective"] .toast{background:#404448;color:#f4f3ed}
.pop{animation:rise .4s both}
.question-card{gap:11px}
.question-count{align-self:center;font-size:1rem;font-weight:900}
.turn-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:9px;width:100%;margin:4px auto;direction:rtl}
.turn-name{display:flex;align-items:center;justify-content:center;min-width:0;min-height:50px;padding:5px 10px;border:2px solid var(--ink);border-radius:15px;background:var(--surface-2);color:var(--text);box-shadow:var(--shadow-small);font-size:clamp(1.05rem,5vw,1.45rem);font-weight:900;line-height:1.25;text-align:center;unicode-bidi:isolate;overflow-wrap:anywhere}
.turn-action{padding:2px 5px;color:var(--muted);font-size:.86rem;font-weight:900;white-space:nowrap}
.turn-note{max-width:100%;margin:0}
.turn-note [dir="auto"]{unicode-bidi:isolate;font-weight:900}
.final-screen{justify-content:flex-start;gap:11px;padding-top:max(30px,env(safe-area-inset-top));padding-bottom:24px}
.final-heading{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:4px;padding:5px 0}
.final-kicker{display:inline-flex;align-items:center;justify-content:center;padding:3px 13px;border:2px solid var(--ink);border-radius:999px;background:var(--surface-2);color:var(--text);font-size:.86rem;font-weight:900;box-shadow:2px 3px 0 var(--ink)}
.final-heading h2{margin:1px 0 0;font-size:clamp(1.8rem,8vw,2.35rem);line-height:1.12;text-shadow:2px 2px 0 var(--accent-2)}
.final-heading p{margin:0;color:var(--muted);font-weight:800;font-size:.95rem}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:9px;width:min(100%,450px);margin:14px auto 17px;direction:ltr}
.pod{--pod-accent:var(--accent-3);--pod-delay:0ms;--pod-tilt:0deg;position:relative;overflow:hidden;flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0;min-height:156px;padding:12px 7px 15px;border:3px solid color-mix(in srgb,var(--pod-accent) 62%,var(--ink));border-radius:21px 21px 12px 12px;background:linear-gradient(155deg,var(--surface),color-mix(in srgb,var(--pod-accent) 25%,var(--surface)));box-shadow:var(--shadow-small);text-align:center;direction:rtl;opacity:0;transform:translateY(26px) scale(.94) rotate(var(--pod-tilt));animation:podium-reveal .72s cubic-bezier(.2,.85,.3,1.2) var(--pod-delay) both}
.pod::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% -7%,color-mix(in srgb,var(--pod-accent) 65%,transparent),transparent 66%);opacity:.38;pointer-events:none}
.pod::after{content:"";position:absolute;top:-25%;bottom:-25%;left:-45%;width:35%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-170%) skewX(-18deg);animation:podium-shine 4.2s ease-in-out 1.4s infinite;pointer-events:none}
.pod>*{position:relative;z-index:1}
.pod.p2{--pod-accent:var(--accent-3);--pod-delay:100ms;--pod-tilt:-1.4deg;min-height:174px}
.pod.p1{--pod-accent:var(--accent-2);--pod-delay:330ms;--pod-tilt:0deg;min-height:218px;z-index:1}
.pod.p3{--pod-accent:var(--accent);--pod-delay:560ms;--pod-tilt:1.4deg;min-height:154px}
.pod-rank{display:inline-flex;align-items:center;justify-content:center;min-height:23px;padding:1px 8px;border:1px solid color-mix(in srgb,var(--pod-accent) 62%,var(--ink));border-radius:999px;background:color-mix(in srgb,var(--pod-accent) 18%,var(--surface));color:var(--text);font-size:.75rem;font-weight:900;white-space:nowrap}
.pod b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-size:1.02rem;line-height:1.2}
.pod small{color:var(--muted);font-size:.82rem;font-weight:800}
.pod .med{display:inline-block;font-size:2.5rem;line-height:1;filter:drop-shadow(0 3px 0 color-mix(in srgb,var(--ink) 16%,transparent));animation:medal-float 2.4s ease-in-out infinite}
.pod.p1 .med{font-size:3rem;animation-duration:2s}
.med{font-size:2.3rem}
@keyframes podium-reveal{0%{opacity:0;transform:translateY(26px) scale(.92) rotate(var(--pod-tilt))}72%{opacity:1;transform:translateY(-6px) scale(1.035) rotate(var(--pod-tilt))}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--pod-tilt))}}
@keyframes podium-shine{0%,65%,100%{transform:translateX(-170%) skewX(-18deg);opacity:0}12%{opacity:.65}42%{transform:translateX(450%) skewX(-18deg);opacity:.55}}
@keyframes medal-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-4deg)}}
/* Hide the old 90s-style podium columns; keep player names and medal labels. */
.pod .bar{display:none!important}

@media(max-width:380px){
  body{font-size:17px}
  .screen{padding-inline:16px}
  .c{gap:13px}
  .flipper{height:290px}
  .vote{gap:9px}
  .vote button{min-height:64px}
  .final-screen{gap:10px}
  .final-heading h2{font-size:1.65rem}
  .final-heading p{font-size:.85rem}
  .podium{gap:6px;margin:8px auto 12px}
  .pod{min-height:140px;padding:9px 4px 12px;gap:5px;border-radius:17px 17px 10px 10px}
  .pod.p2{min-height:157px}
  .pod.p1{min-height:197px}
  .pod.p3{min-height:139px}
  .pod-rank{min-height:21px;padding-inline:5px;font-size:.67rem}
  .pod b{font-size:.88rem}
  .pod small{font-size:.72rem}
  .pod .med{font-size:2rem}
  .pod.p1 .med{font-size:2.45rem}
}
@media(max-height:720px){
  .screen{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}
  .c{gap:12px}
  .logo{min-height:98px}
  .logo img{width:min(140px,38vw);max-height:140px}
  .logo img.brand-logo-plain{width:min(245px,70vw);max-height:92px}
  .stage{width:min(100%,290px)}
  .flipper{height:270px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============================================================================
   NOIR UPGRADE — newsprint props, a CRT television, and 90s motion effects
   ========================================================================== */
:root{
  --paper:#e9e2c9;--paper-2:#d7cdab;--paper-3:#f5f0de;
  --paper-ink:#221f19;--paper-mute:#605948;--paper-line:rgba(34,31,25,.5);
  --paper-red:#a8271f;
  --tape:rgba(233,226,201,.5);
  --tv-shell:#3d4245;--tv-shell-2:#202426;--tv-glow:rgba(228,230,220,.55);
  --fp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 124'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M50 122V96'/%3E%3Cpath d='M22 104c8-15 6-35 14-47 8-13 27-15 35-4 8 11 6 27-2 35-8 8-21 7-25-2-4-9 2-17 11-17'/%3E%3Cpath d='M12 110c10-19 8-45 18-59C40 37 63 35 75 47c10 10 12 29 4 41-8 13-23 17-31 9'/%3E%3Cpath d='M34 116c6-13 4-31 10-43 6-13 21-17 29-8'/%3E%3Cpath d='M4 98C16 83 14 59 24 45 34 31 59 25 75 35'/%3E%3Cpath d='M62 122c2-13 8-23 10-35'/%3E%3Cpath d='M78 98c4-17 2-35-8-45'/%3E%3Cpath d='M42 62c4-8 15-8 19 0 4 8-2 17-8 17'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- torn newsprint surface ---------- */
.news{
  position:relative;isolation:isolate;color:var(--paper-ink);
  border:1px solid rgba(12,10,6,.7);border-radius:5px;
  background-color:var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px,rgba(34,31,25,.075) 1px,transparent 1.4px),
    repeating-linear-gradient(115deg,rgba(34,31,25,.035) 0 2px,transparent 2px 6px),
    repeating-linear-gradient(23deg,rgba(34,31,25,.03) 0 3px,transparent 3px 8px),
    radial-gradient(120% 90% at 10% -10%,rgba(255,255,255,.55),transparent 55%),
    radial-gradient(90% 80% at 92% 108%,rgba(120,95,40,.2),transparent 62%),
    linear-gradient(158deg,var(--paper-3),var(--paper) 36%,var(--paper-2));
  background-size:6px 6px,auto,auto,auto,auto,auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -2px 6px rgba(96,74,30,.22),0 3px 0 rgba(0,0,0,.55),0 14px 26px rgba(0,0,0,.45);
  padding:14px 14px 15px;
}
.news::after{
  content:"";position:absolute;inset-inline:-1px;bottom:-7px;height:8px;z-index:-1;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='9'%3E%3Cpath d='M0 0h26v4l-3.2 5L19.5 4 16.3 9 13 4 9.8 9 6.5 4 3.3 9 0 4Z' fill='%23d7cdab'/%3E%3C/svg%3E") repeat-x;
  background-size:26px 9px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.4));
}
.news-masthead{display:flex;flex-direction:column;gap:5px;text-align:center;padding-bottom:9px}
.news-kicker{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.6rem;font-weight:800;color:var(--paper-mute);letter-spacing:.02em}
.news-kicker>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.news-title{font-family:var(--title-font);font-size:clamp(1.45rem,6.6vw,1.85rem);font-weight:900;line-height:1.1;margin:0;color:var(--paper-ink);text-shadow:1px 1px 0 rgba(255,255,255,.6)}
.news-tagline{margin:0;font-size:.66rem;font-weight:600;color:var(--paper-mute);min-height:1.2em}
.news-rule{display:block;height:6px;margin:2px 0 10px;border-top:2px solid var(--paper-ink);border-bottom:1px solid var(--paper-line)}
.news .lobby-section-head{border-bottom:2px solid var(--paper-ink);padding-bottom:8px;color:var(--paper-ink)}
.news .lobby-heading h2{color:var(--paper-ink)}
.news .lobby-heading p,.news .setting-label>small,.news .hint-copy small,.news .room-fact small{color:var(--paper-mute)}
.news .section-mark{background:var(--paper-3);color:var(--paper-ink);border-color:var(--paper-ink);box-shadow:1px 2px 0 var(--paper-ink)}
.news .player-count,.news .host-label,.news .you-label,.news .offline-label{border:1.5px solid var(--paper-line);background:rgba(255,255,255,.5);color:var(--paper-mute)}
.news .offline-label{color:var(--paper-red)}
/* inked chips, printed list rows */
.news .chip,.news .option-row .chip,.news .theme-picker .chip{
  border:2px solid var(--paper-ink);border-radius:9px;background:#fbf6e4;color:var(--paper-ink);
  box-shadow:1.5px 2px 0 var(--paper-ink);font-weight:800;
}
.news .chip.sel,.news .theme-picker .chip.sel,.news .option-row .chip.sel{background:var(--paper-ink);color:#f7f1de;transform:rotate(-1.4deg)}
.news .setting-field,.news .lobby-control-grid>.setting-field{
  position:relative;border:0;border-top:1px dashed var(--paper-line);border-radius:0;background:transparent;padding:11px 2px 4px;
}
.news .setting-field::before{content:"✂";position:absolute;top:-9px;inset-inline-start:5px;font-size:.66rem;color:var(--paper-mute);background:var(--paper);padding:0 4px;line-height:1}
.news .stepper .sq{border:2px solid var(--paper-ink);border-radius:9px;background:#fbf6e4;color:var(--paper-ink);box-shadow:1.5px 2px 0 var(--paper-ink)}
.news .setting-value{color:var(--paper-ink)}
.news .hint-toggle{border:2px solid var(--paper-ink);border-radius:10px;background:#fbf6e4;color:var(--paper-ink);box-shadow:1.5px 2px 0 var(--paper-ink)}
.news .hint-toggle.on{background:#ddddd2}
.news .hint-symbol{background:#fbf6e4;border-color:var(--paper-ink);color:var(--paper-ink)}
.news .toggle-track{background:#e6e0cb;border-color:var(--paper-ink)}
.news .toggle-track i{background:var(--paper-ink);box-shadow:none}
.news .hint-toggle.on .toggle-track{background:var(--paper-ink)}
.news .hint-toggle.on .toggle-track i{background:#f7f1de}
.news .card.lobby-player{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;
  border:0;border-bottom:1px dashed var(--paper-line);border-radius:0;background:transparent;box-shadow:none;padding:7px 2px}
.news .card.lobby-player:last-child{border-bottom:0}
.news .player-list{gap:0;margin-top:6px}
.file-no{display:grid;place-items:center;flex:none;min-width:26px;height:24px;border:1.5px solid var(--paper-ink);border-radius:5px;background:rgba(255,255,255,.45);
  font-family:var(--num-font);font-size:.7rem;font-weight:900;color:var(--paper-ink);direction:ltr}
.news .player-name{color:var(--paper-ink)}
.news .player-score{color:var(--paper-ink)}
.news .badge{border:1.5px solid var(--paper-ink);background:#fbf6e4;color:var(--paper-ink)}
.news .badge.ok{background:var(--paper-ink);color:#f7f1de}
.news .room-fact{border:1.5px dashed var(--paper-line);border-radius:8px;background:rgba(255,255,255,.42);box-shadow:none}
.news .fact-index{background:#fbf6e4;border-color:var(--paper-ink);color:var(--paper-ink);box-shadow:1px 1px 0 var(--paper-ink)}
.news .room-fact b{color:var(--paper-ink)}
.news .player-crown{color:var(--paper-red);text-shadow:0 0 0 transparent}

/* ---------- case-file tag (room code) ---------- */
.news-tag{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  width:100%;min-height:126px;padding:13px 16px;border-radius:6px;transform:rotate(-.6deg);
}
.news-tag .code-kicker{font-size:.78rem;font-weight:900;letter-spacing:.02em;color:var(--paper-mute)}
.news-tag b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(1.85rem,7.8vw,2.4rem);
  font-weight:900;line-height:1.15;letter-spacing:.3em;direction:ltr;padding-inline-start:.3em;color:var(--paper-ink)}
.news-tag .code-hint{font-size:.74rem;font-weight:700;color:var(--paper-mute)}
.tag-clip{position:absolute;top:-11px;inset-inline-start:16px;width:24px;height:34px;border:3px solid var(--ink);border-bottom:0;border-radius:12px 12px 3px 3px;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.4);transform:rotate(-9deg);background:transparent}
.stamp-code{position:absolute;inset-inline-end:12px;top:50%;transform:translateY(-50%) rotate(-13deg);
  padding:3px 10px;border:2.5px solid var(--paper-red);border-radius:6px;color:var(--paper-red);font-weight:900;font-size:.9rem;opacity:.72;mix-blend-mode:multiply}
/* generic rubber stamp */
.stamp{display:inline-block;padding:4px 12px;border:3px double currentColor;border-radius:7px;font-family:var(--title-font);
  font-weight:900;letter-spacing:.04em;text-transform:uppercase;mix-blend-mode:multiply;opacity:.86}
.stamp.red{color:var(--paper-red)}
.stamp.slam{animation:slamStamp .5s cubic-bezier(.2,1.4,.35,1) both}
/* ---------- wax seal + tape ---------- */
.tape{position:absolute;width:74px;height:22px;background:linear-gradient(100deg,rgba(255,255,255,.34),rgba(255,255,255,.1));border-inline:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 2px rgba(0,0,0,.35);backdrop-filter:blur(1px);opacity:.85;pointer-events:none}
.tape.t-left{inset-inline-start:-14px;top:14px;transform:rotate(-38deg)}
.tape.t-right{inset-inline-end:-14px;top:14px;transform:rotate(38deg)}
.tape.t-bottom-inset{inset-inline-start:50%;bottom:-10px;transform:translateX(-50%) rotate(-1deg)}

/* ---------- CRT television (main menu) ---------- */
.tv{position:relative;width:min(100%,470px);margin:0 auto;filter:drop-shadow(0 20px 28px rgba(0,0,0,.55));transform:rotate(-.5deg)}
.tv-antenna{position:relative;height:56px;margin-bottom:-8px;z-index:0}
.tv-antenna i{position:absolute;bottom:2px;left:50%;width:5px;height:60px;border:2px solid var(--ink);border-radius:4px;transform-origin:50% 100%;
  background:linear-gradient(180deg,#e6e9ea,#858b8f 58%,#4c5154);box-shadow:0 3px 0 rgba(0,0,0,.35)}
.tv-antenna i:nth-child(1){transform:rotate(-25deg) translateX(-1px)}
.tv-antenna i:nth-child(2){transform:rotate(25deg) translateX(1px)}
.tv-antenna b{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:18px;height:14px;border:3px solid var(--ink);border-radius:8px;background:#50565a}
.tv-shell{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;padding:13px 13px 11px;border:4px solid var(--ink);border-radius:24px;
  background:linear-gradient(168deg,var(--tv-shell),var(--tv-shell-2) 58%,#0d1011);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.2),inset 0 -8px 14px rgba(0,0,0,.6),0 8px 0 var(--ink)}
.tv-shell::before{content:"";position:absolute;inset:auto -8% -14% -8%;height:60%;z-index:-1;border-radius:50%;
  background:radial-gradient(ellipse at 50% 100%,var(--tv-glow),transparent 68%);opacity:.34;animation:glowPulse 4.6s ease-in-out infinite}
.tv-screen{position:relative;overflow:hidden;border:4px solid var(--ink);border-radius:17px;
  background:radial-gradient(130% 90% at 50% 8%,#23282b,#0a0c0d 72%);
  box-shadow:inset 0 0 34px rgba(0,0,0,.92),inset 0 0 0 2px rgba(255,255,255,.07)}
.tv-inner{position:relative;z-index:2;padding:16px 15px 15px;background:radial-gradient(ellipse at 50% 34%,rgba(226,232,240,.09),transparent 72%)}
.tv-glass{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:13px;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(to bottom,rgba(0,0,0,.16) 0 2px,transparent 2px 5px),
    radial-gradient(110% 70% at 18% -12%,rgba(255,255,255,.2),transparent 52%),
    radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.68) 100%);
  background-position:0 0,0 0,0 0,0 0;animation:crt-roll 6s linear infinite}
.tv-flash{position:absolute;inset:0;z-index:4;pointer-events:none;background:#eef2f6;opacity:0;transform:scaleY(.01);transform-origin:center;mix-blend-mode:screen}
.screen[data-fx="tv"].on .tv-flash{animation:tvOn .8s cubic-bezier(.3,.9,.2,1) both}
.screen[data-fx="tv"].on .tv-inner{animation:flickIn .85s steps(4,end) both}
.tv-controls{display:flex;align-items:center;gap:9px;padding:0 3px}
.tv-knob{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border:3px solid var(--ink);border-radius:50%;
  background:radial-gradient(circle at 34% 26%,#70777b,#2b3033 62%,#14181a);box-shadow:inset 0 2px 4px rgba(255,255,255,.28),0 3px 0 var(--ink)}
.tv-knob::after{content:"";width:3px;height:14px;border-radius:2px;background:var(--tv-glow);transform:translateY(-6px)}
.tv-knob.k2::after{transform:translateY(-6px) rotate(58deg)}
.tv-grille{flex:1;min-width:34px;height:42px;border:3px solid var(--ink);border-radius:9px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.11) 0 2px,transparent 2px 7px),linear-gradient(180deg,#31363a,#171b1d);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.65)}
.tv-brand{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.tv-brand span{font-family:var(--title-font);font-size:.66rem;letter-spacing:.14em;color:rgba(255,255,255,.44)}
.tv-led{width:10px;height:10px;border-radius:50%;background:#ff6f5f;box-shadow:0 0 9px #ff6f5f}
.tv-led{animation:led 2.8s ease-in-out infinite}
.tv-legs{display:flex;justify-content:space-between;padding:0 30px;margin-top:-2px}
.tv-legs i{width:30px;height:15px;border:3px solid var(--ink);border-top:0;border-radius:0 0 13px 13px;background:linear-gradient(180deg,#2c3134,#15181a)}
.tv .logo{min-height:92px;margin-bottom:0}
.tv .logo img{width:min(150px,42vw);max-height:150px}
.tv-sub{display:inline-block;align-self:center;padding:4px 13px;border:2px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.06);color:#eef1ee;
  font-size:.8rem;font-weight:700;letter-spacing:.01em;box-shadow:none;min-height:1.4em}
.tv-inner .inp{background:rgba(8,10,11,.72);color:#f2f4f2;border:2px solid rgba(255,255,255,.3);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.tv-inner .inp::placeholder{color:rgba(238,241,238,.55)}
.tv-inner .btn{background:#eef1ec;color:#15181a;border-color:#0b0d0e;box-shadow:0 5px 0 #0b0d0e}
.tv-inner .btn.alt{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));color:#f2f4f2;border-color:rgba(255,255,255,.42);box-shadow:0 5px 0 rgba(0,0,0,.7)}
.tv-inner .btn:hover{filter:brightness(1.04)}
.tv-stack{display:flex;flex-direction:column;gap:11px;margin-top:12px}

/* ---------- noir ambience ---------- */
html[data-theme="detective"] #bg::after{content:"";position:absolute;inset:-25% -15%;transform:skewX(-9deg);opacity:.5;
  background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0 1px,transparent 1px 26px);animation:rainFall .75s linear infinite}
html[data-theme="detective"] .screen::before{content:"";position:absolute;top:6px;inset-inline-end:6px;width:86px;height:104px;
  background:var(--fp) center/contain no-repeat;opacity:.08;transform:rotate(9deg);pointer-events:none}
html[data-theme="detective"] .news .badge.ok{background:var(--paper-red);color:#fdf6e3}
html[data-theme="detective"] .lobby-warning{border-style:dashed;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.05)}

/* ---------- motion: screen entrance effects ---------- */
@keyframes tvOn{0%{opacity:.95;transform:scaleY(.006)}22%{opacity:.7;transform:scaleY(.05)}46%{opacity:.4;transform:scaleY(.5)}70%{opacity:.22;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1)}}
@keyframes flickIn{0%{opacity:0;filter:brightness(2.6) contrast(.7) blur(1px)}45%{opacity:.7;filter:brightness(1.4) blur(.4px)}70%{opacity:.9}100%{opacity:1;filter:none}}
@keyframes crt-roll{to{background-position:0 3px,0 5px,0 0,0 0}}
@keyframes glowPulse{50%{opacity:.6;transform:scaleY(1.06)}}
@keyframes led{0%,100%{opacity:1}50%{opacity:.32}}
@keyframes rainFall{to{background-position:0 26px}}
@keyframes paperDrop{from{opacity:0;transform:translateY(-20px) rotate(-1.3deg)}}
@keyframes paperRise{from{opacity:0;transform:translateY(18px) rotate(1deg)}}
@keyframes stampIn{0%{opacity:0;transform:scale(1.45) rotate(-8deg)}58%{opacity:1;transform:scale(.93) rotate(1.6deg)}100%{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translateX(-26px) skewX(6deg)}}
@keyframes sealIn{from{opacity:0;transform:scale(.55) rotate(-22deg)}}
@keyframes slamStamp{0%{opacity:0;transform:scale(2.5) rotate(-16deg)}58%{opacity:.95;transform:scale(.9) rotate(-5deg)}74%{transform:scale(1.06) rotate(-9deg)}100%{opacity:.86;transform:scale(1) rotate(-7deg)}}
@keyframes verdictSlam{0%{opacity:0;transform:translateY(-40px) scale(1.9) rotate(-16deg)}55%{opacity:1;transform:translateY(0) scale(.92) rotate(-4deg)}72%{transform:scale(1.05) rotate(-8deg)}100%{transform:scale(1) rotate(-6deg)}}
@keyframes ribbonIn{from{opacity:0;transform:translateY(-16px) scaleX(.5)}}
@keyframes tapeStick{from{opacity:0;transform:translateY(-14px) rotate(-24deg) scaleX(.6)}}
@keyframes typeCaret{50%{opacity:0}}
.screen[data-fx="tv"].fresh.on [data-s]{animation:flickIn .6s both calc(var(--i,0)*70ms)}
.screen[data-fx="paper"].fresh.on [data-s]{animation:paperDrop .5s cubic-bezier(.25,.9,.3,1.1) both calc(var(--i,0)*70ms)}
.screen[data-fx="card"].fresh.on [data-s]{animation:stampIn .5s cubic-bezier(.2,1.35,.4,1) both calc(var(--i,0)*60ms)}
.screen[data-fx="stamp"].fresh.on [data-s]{animation:stampIn .46s cubic-bezier(.2,1.4,.4,1) both calc(var(--i,0)*55ms)}
.screen[data-fx="verdict"].fresh.on [data-s]{animation:paperRise .5s cubic-bezier(.25,.9,.3,1.1) both calc(var(--i,0)*60ms)}
.screen[data-fx="final"].fresh.on [data-s]{animation:sealIn .6s cubic-bezier(.2,1.3,.35,1) both calc(var(--i,0)*70ms)}
.typewriter::after{content:"▌";margin-inline-start:2px;color:var(--accent);animation:typeCaret .8s steps(1,end) infinite;font-size:.8em;vertical-align:baseline}
.typewriter.done::after{content:"";animation:none}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.42);transform:scale(0);animation:rip .5s ease-out forwards;pointer-events:none;mix-blend-mode:screen}
.btn,.chip,.mode,.sq,.vote button,.player-list .card,.news-tag,.hint-toggle{position:relative;overflow:hidden}
.news .rip{background:rgba(0,0,0,.14);mix-blend-mode:multiply}
.btn::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(255,255,255,.5);transition:box-shadow .2s}
.btn:active::after{box-shadow:inset 0 0 18px 2px rgba(255,255,255,.45);transition:none}

/* ---------- red verdict stamps / case markings ---------- */
.case-mark{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border:2px dashed var(--paper-line);border-radius:6px;
  font-size:.66rem;font-weight:900;letter-spacing:.06em;color:var(--paper-mute);text-transform:uppercase}
.verdict{position:absolute;inset-inline-end:6px;top:8px;padding:5px 13px;border:3px double currentColor;border-radius:8px;
  font-family:var(--title-font);font-weight:900;font-size:1.02rem;color:var(--paper-red);mix-blend-mode:multiply;
  animation:verdictSlam .62s cubic-bezier(.2,1.25,.35,1) .18s both;pointer-events:none;z-index:2}
.verdict.good{color:#1f6b45}
.result-sheet{position:relative;overflow:visible}
.result-sheet .fp-mark{position:absolute;inset-inline-start:-8px;bottom:-12px;width:80px;height:98px;background:var(--fp) center/contain no-repeat;opacity:.09;transform:rotate(-8deg);pointer-events:none}
.res-sec{margin:14px 0 7px;font-size:.7rem;font-weight:900;letter-spacing:.04em;color:var(--paper-mute);display:flex;align-items:center;gap:7px}
.res-sec::after{content:"";flex:1;height:1px;background:var(--paper-line)}
.res-row{display:flex;justify-content:center;align-items:center;gap:10px;padding:5px 0;flex-wrap:wrap;color:var(--paper-ink)}
.res-row>span{font-weight:700}
.res-pill{border-radius:999px;padding:2px 12px;border:1.5px solid var(--paper-line);background:rgba(255,255,255,.5);font-weight:800;white-space:nowrap}
.res-pill.good{border-color:#1f6b45;background:rgba(31,107,69,.16);color:#14482e}
.res-pill.bad{border-color:var(--paper-red);background:rgba(168,39,31,.14);color:#7d1a14}
.res-secret{border:2px dashed var(--paper-line);border-radius:10px;padding:10px 8px;font-weight:900;font-size:1.05rem;color:var(--paper-ink);background:rgba(255,255,255,.35)}
.res-secret small{opacity:.7;font-weight:700}
.res-note{margin:13px 0 0;font-size:.66rem;line-height:1.9;color:var(--paper-mute);text-align:center}
.tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.news .tag{background:transparent;border:2px solid var(--paper-red);color:var(--paper-red);border-radius:6px;font-weight:900}

/* ---------- noir restyle for the remaining screens ---------- */
.photo-lines{--pl:none}
.photo-lines::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.05;
  background:repeating-linear-gradient(102deg,rgba(255,255,255,.55) 0 2px,transparent 2px 11px)}
.torn-edge{position:relative}
.torn-edge::before{content:"";position:absolute;inset-inline:-2px;bottom:-8px;height:9px;z-index:0;opacity:.9;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='9'%3E%3Cpath d='M0 0h30v3l-3.7 6L22.5 3 18.8 9 15 3 11.2 9 7.5 3 3.7 9 0 3Z' fill='%23e9e2c9'/%3E%3C/svg%3E") repeat-x;background-size:30px 9px}
.news .lobby-warning{border:1.5px dashed var(--paper-line);background:rgba(168,39,31,.08);color:#7d1a14;font-weight:800}
.fact-index.stamp-num{background:transparent;border-style:dashed;color:var(--paper-mute)}


/* ---------- interrogation room (discussion) + timer as murder clock ---------- */
.clock-face{margin-inline:auto}
.clock-face::before{content:"";position:absolute;inset:9px;border:2px dashed rgba(0,0,0,.35);border-radius:50%;pointer-events:none}
.clock-face::after{content:"🕵";position:absolute;bottom:9px;inset-inline-start:50%;transform:translateX(-50%);font-size:.9rem;opacity:.5}
html[data-theme="detective"] .ring{background:radial-gradient(circle at 50% 22%,#2b2f32,#191d1f 70%)}
html[data-theme="detective"] .ring b{text-shadow:0 0 12px rgba(255,255,255,.35),2px 2px 0 rgba(0,0,0,.6)}
html[data-theme="detective"] .ring.warn{animation:pulse 1s infinite,tickShake .5s infinite}
@keyframes tickShake{25%{transform:translateX(-1px) rotate(-.4deg)}75%{transform:translateX(1px) rotate(.4deg)}}
.interrogation .turn-pair{position:relative}
.interrogation .turn-pair::before{content:"";position:absolute;inset-inline-start:50%;top:-4px;width:0;height:0;border-inline:6px solid transparent;border-bottom:8px solid var(--accent-2);transform:translateX(-50%);opacity:.85}

/* ---------- gavel verdict ---------- */
.gavel{position:relative;height:0}
.gavel i{position:absolute;inset-inline-start:50%;top:-118px;font-size:2.6rem;transform-origin:20% 80%;opacity:0;z-index:3}
.gavel.go i{animation:gavelStrike 1s cubic-bezier(.4,0,.6,1) both}
@keyframes gavelStrike{0%{opacity:0;transform:rotate(-62deg) translateY(-26px)}18%{opacity:1;transform:rotate(48deg) translateY(16px)}
 26%{transform:rotate(38deg) translateY(6px)}44%{transform:rotate(52deg) translateY(14px)}100%{opacity:0;transform:rotate(-20deg) translateY(-8px)}}
.gavel-flash{position:absolute;inset-inline-start:50%;top:-52px;width:14px;height:14px;border-radius:50%;transform:translateX(-50%) scale(0);
  background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%);z-index:2}
.gavel.go .gavel-flash{animation:gavelFlash .7s ease-out .16s both}
@keyframes gavelFlash{0%{transform:translateX(-50%) scale(0);opacity:1}60%{transform:translateX(-50%) scale(7);opacity:.5}100%{transform:translateX(-50%) scale(11);opacity:0}}

/* ---------- big verdict headings ---------- */
.verdict-word{position:relative;display:inline-block;margin:0;font-family:var(--title-font);font-weight:900;line-height:1.15;letter-spacing:.01em}
.verdict-word.bad{color:var(--danger)}
.verdict-word.good{color:var(--success)}
.verdict-word::after{content:"";position:absolute;inset-inline:-10px;bottom:.06em;height:.16em;border-radius:99px;background:currentColor;opacity:.28;transform:scaleX(0);transform-origin:var(--ink-origin,100% 50%);animation:swipeUnder .55s cubic-bezier(.3,.9,.3,1) .5s both}
@keyframes swipeUnder{to{transform:scaleX(1)}}
.spotlight{position:absolute;inset:-6% -10%;pointer-events:none;z-index:0;opacity:.5;mix-blend-mode:screen;
  background:radial-gradient(46% 40% at 50% 42%,rgba(255,255,255,.28),transparent 72%);
  animation:spotSweep 7s ease-in-out infinite alternate}
@keyframes spotSweep{0%{background-position:0 0;transform:translateX(-6%)}100%{transform:translateX(6%)}}
.veil{position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.08) 46%,transparent 58%)}

/* ---------- final screen: newspaper front page ---------- */
.news-head{position:relative;overflow:visible;padding:15px 14px 20px;text-align:center}
.news-head .paper-name{font-family:var(--title-font);font-size:clamp(2.1rem,10.5vw,3rem);font-weight:900;line-height:1;letter-spacing:-.01em;margin:2px 0 0;color:var(--paper-ink);text-shadow:1px 1px 0 rgba(255,255,255,.7)}
.news-head .paper-rule{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding-top:5px;border-top:2px solid var(--paper-ink);font-size:.62rem;font-weight:800;color:var(--paper-mute)}
.banner-ribbon{display:inline-block;margin:8px auto 0;padding:3px 14px;border:2px solid var(--paper-red);border-radius:4px;color:var(--paper-red);
  font-family:var(--title-font);font-size:.95rem;font-weight:900;letter-spacing:.06em;transform:rotate(-2deg);animation:stampIn .6s cubic-bezier(.2,1.4,.4,1) .5s both}
.news-head .final-teaser{margin:3px 0 0;font-size:.7rem;font-weight:700;color:var(--paper-mute)}
.headline{font-family:var(--title-font);font-weight:900;font-size:clamp(1.55rem,6.8vw,2.1rem);line-height:1.55;margin:0;color:var(--paper-ink);text-shadow:1px 1px 0 rgba(255,255,255,.6)}
.headline .hl{color:var(--paper-red)}
.podium-wrap{position:relative;width:min(100%,470px);margin:14px auto 6px}
.podium-wrap .tape.t-left{top:-6px;inset-inline-start:8px}
.podium-wrap .tape.t-right{top:-6px;inset-inline-end:8px}
.news .podium{margin:6px auto 4px}
.news .pod{border:1.5px solid var(--paper-ink);border-radius:8px 8px 4px 4px;background:linear-gradient(168deg,rgba(255,255,255,.66),rgba(215,205,171,.72));
  box-shadow:2px 3px 0 rgba(34,31,25,.6);color:var(--paper-ink)}
.news .pod::before{background:radial-gradient(ellipse at 50% -7%,rgba(34,31,25,.22),transparent 66%)}
.news .pod.p1{background:linear-gradient(168deg,#fbf4dc,#e2d3a4 78%)}
.news .pod b,.news .pod small,.news .pod-rank{color:var(--paper-ink)}
.news .pod-rank{border:1.5px solid var(--paper-ink);background:rgba(255,255,255,.5)}
.news .pod .med{filter:none}
.score-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:7px 10px;border:1.5px dashed var(--paper-line);
  border-radius:7px;background:rgba(255,255,255,.4);color:var(--paper-ink);font-weight:700}
.score-line b{font-weight:900}
.news .final-screen .btn{margin-top:2px}

/* ---------- roles: polaroid-ish secret sleeve ---------- */
@media(min-height:721px){.flipper{height:330px}.stage{width:min(100%,340px)}}
.face{border-width:3px;box-shadow:0 7px 0 var(--ink),0 16px 26px rgba(0,0,0,.45)}
.front{background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--ink) 16%,transparent) 1.2px,transparent 1.7px) 0 0/21px 21px,var(--surface-2)}
.face-label{position:absolute;bottom:9px;inset-inline:12px;display:flex;justify-content:space-between;gap:6px;font-size:.6rem;font-weight:900;color:color-mix(in srgb,var(--text) 66%,transparent);pointer-events:none}
.sleeve-stamp{position:absolute;top:12px;inset-inline-end:12px;font-size:.6rem}
.front .lock-icon{font-size:2.7rem;filter:grayscale(1) brightness(1.5)}
.front-instruction{animation:nudge 2.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.shred .flash{position:absolute;inset:0;background:#fff;opacity:0;animation:shredFlash .5s ease-out both}
/* ---------- join screen: telegram slip ---------- */
.slip{position:relative;padding:18px 15px 16px;border:1px solid rgba(12,10,6,.65);border-radius:4px;
  background:linear-gradient(168deg,var(--paper-3),var(--paper) 50%,var(--paper-2));color:var(--paper-ink);
  box-shadow:0 4px 0 rgba(0,0,0,.5),0 14px 24px rgba(0,0,0,.45);transform:rotate(-.5deg)}
.slip::before{content:"";position:absolute;inset:7px -7px -7px 7px;z-index:-1;background:var(--paper-2);border-radius:3px;box-shadow:0 3px 0 rgba(0,0,0,.4)}
.slip .news-masthead{padding-bottom:6px}
.slip .inp{border:2px solid var(--paper-ink);border-radius:8px;background:rgba(255,255,255,.6);color:var(--paper-ink);box-shadow:1.5px 2px 0 var(--paper-ink)}
.slip .inp::placeholder{color:var(--paper-mute)}
.slip .code-input{background:rgba(255,255,255,.75)}
.slip .btn{background:var(--paper-ink);color:#f7f1de;border-color:var(--paper-ink);box-shadow:0 4px 0 rgba(0,0,0,.7)}
.slip .link{color:var(--paper-ink)}

/* ---------- ticker + rain streak + toast stamp ---------- */
.noir-ticker{position:absolute;inset-inline:0;top:100%;margin-top:5px;overflow:hidden;border-top:1.5px solid var(--paper-line);padding-top:4px}
.noir-ticker div{display:inline-block;white-space:nowrap;font-size:.64rem;font-weight:800;color:var(--paper-mute);animation:tickerRun 26s linear infinite;padding-inline-start:100%}
@keyframes tickerRun{to{transform:translateX(-100%)}}
html[dir="rtl"] .noir-ticker div{animation-name:tickerRunRtl}
@keyframes tickerRunRtl{to{transform:translateX(100%)}}
.rain-streak{position:fixed;top:-10%;width:2px;height:16vh;border-radius:2px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.5),transparent);
  z-index:5;pointer-events:none;animation:rainStreakFall linear forwards}
@keyframes rainStreakFall{to{transform:translateY(120vh) translateX(-7vw);opacity:0}}
.toast{transform:rotate(-.6deg);border-width:2px}
.toast::before{content:"⌕";margin-inline-end:7px}
html[data-theme="detective"] .toast{background:linear-gradient(170deg,#43474a,#2b2f31);border-color:#0b0d0e;box-shadow:0 5px 0 #0b0d0e,0 14px 22px rgba(0,0,0,.5)}
.pop{animation:paperRise .5s cubic-bezier(.25,.9,.3,1.1) both}
.chip.stamped,.mode.stamped{animation:stampIn .4s cubic-bezier(.2,1.4,.4,1) both}
.stepper .sq:active{transform:translate(1px,2px)}
.setting-value.bump{animation:numBump .35s cubic-bezier(.2,1.3,.4,1)}
@keyframes numBump{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(-6deg);color:var(--accent-2)}100%{transform:scale(1)}}
.lobby-screen{scroll-behavior:smooth}
.fresh .player-list .card{animation:slideIn .45s cubic-bezier(.2,.9,.3,1.1) both}
.player-list .card.turn-hint{outline:2px dashed var(--accent-2);outline-offset:2px}
.room-fact b{transition:color .2s}
.fact-flash{animation:factFlash .7s ease-out}
@keyframes factFlash{0%{background:rgba(255,207,63,.55)}100%{background:transparent}}

@media(max-width:380px){
  .tv-shell{padding:10px 10px 9px}
  .tv-inner{padding:12px 11px 11px}
  .tv-knob{width:36px;height:36px}
  .tv-grille{height:36px}
  .news{padding:11px 11px 12px}
  .headline{font-size:clamp(1.5rem,7vw,2rem)}
  .verdict{font-size:.86rem;padding:4px 9px}
}
/* newspaper panels keep their ink-first look in the painted themes too */

/* ---------- noir polish pass ---------- */
html[data-theme="detective"] .back{background:linear-gradient(160deg,#fbf4de,#e4dcc0);color:#221f19}
html[data-theme="detective"] .back.odd{background:linear-gradient(160deg,#f6e3d8,#e3c6b8);color:#5c1c15}
html[data-theme="detective"] .back h2{color:inherit}
.back .face-label{color:rgba(0,0,0,.42)}
.back.odd .face-label{color:rgba(92,28,21,.55)}
.tv-inner .logo img{filter:drop-shadow(0 0 18px rgba(233,226,201,.35)) drop-shadow(3px 4px 0 rgba(0,0,0,.5))}
html[data-theme="detective"] .logo img{filter:drop-shadow(0 0 14px rgba(233,226,201,.28)) drop-shadow(3px 4px 0 rgba(0,0,0,.5))}
.tv-knob{transition:transform .35s cubic-bezier(.2,1.3,.4,1)}
.tv:hover .tv-knob{transform:rotate(42deg)}
.tv:hover .tv-knob.k2{transform:rotate(-30deg)}
.noir-ticker{padding-bottom:4px}
.news-head{overflow:hidden}
.news-head .noir-ticker{position:relative;top:auto;margin-top:9px}
.verdict{max-width:38%}
@media(max-width:380px){.verdict{max-width:46%}}
.newspaper-btn{background:linear-gradient(180deg,#f7f1de,#e3dbc0);color:#221f19;border-color:var(--ink);box-shadow:0 6px 0 var(--ink)}
.newspaper-btn:hover{filter:brightness(1.03)}

/* suspect board */
.news .suspect-board{padding:14px 13px 12px}
.news .vote{display:grid;gap:8px;margin:8px 0 6px}
.news .vote .suspect{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;text-align:start;min-height:60px;padding:9px 11px;
  border:2px solid var(--paper-ink);border-radius:9px;background:#fbf6e4;color:var(--paper-ink);box-shadow:2px 3px 0 var(--paper-ink);font-weight:900;font-size:1.05rem;
  transform:rotate(var(--tilt,0deg));transition:transform .14s,box-shadow .14s,background .2s}
.news .vote .suspect:nth-child(odd){--tilt:-.7deg}
.news .vote .suspect:nth-child(even){--tilt:.7deg}
.news .vote .suspect:hover{transform:translateY(-2px) rotate(var(--tilt))}
.news .vote .suspect:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--paper-ink)}
.news .vote .suspect.sel{background:var(--paper-ink);color:#f7f1de;transform:rotate(-1.5deg) scale(1.02)}
.news .vote .suspect.sel .file-no{border-color:#f7f1de;color:#f7f1de}
.news .vote .suspect:disabled{opacity:.62}
.news .vote .suspect .file-no{border-color:var(--paper-ink)}
.paper-note{font-size:.68rem;color:var(--paper-mute);margin:8px 0 0;text-align:center;font-weight:700}

/* suspect board refinements */
.news .suspect-board .tape{width:58px;height:18px;top:-9px}
.news .suspect-board .tape.t-left{inset-inline-start:-10px}
.news .suspect-board .tape.t-right{inset-inline-end:-10px}
.news .vote .suspect{min-height:64px;padding:10px 12px;font-size:1.1rem;gap:11px}
.news .vote .suspect .file-no{font-size:.72rem}
@media(max-width:380px){
  .news .vote{grid-template-columns:minmax(0,1fr)}
  .news .vote .suspect{min-height:54px;font-size:1rem}
}


/* ===== detective-office controls: brass badge buttons ===== */
.ghost{
  --badge-rim:#c9a24a;--badge-rim-2:#7d5a16;--badge-face:#1f1c19;--badge-face-2:#3a332b;--badge-ink:#f1e2b3;
  border:3px solid var(--badge-rim-2);
  background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.18),transparent 46%),
    linear-gradient(160deg,var(--badge-face-2),var(--badge-face));
  color:var(--badge-ink);
  box-shadow:inset 0 0 0 2px var(--badge-rim),inset 0 0 0 3px rgba(0,0,0,.35),3px 4px 0 var(--ink),0 0 0 1px rgba(0,0,0,.4);
  transition:transform .15s,box-shadow .15s,filter .2s;
}
.ghost::after{ /* brass rivet ring */
  content:"";position:absolute;inset:4px;border-radius:50%;pointer-events:none;
  border:1px dashed color-mix(in srgb,var(--badge-rim) 70%,transparent);opacity:.75;
}
.ghost:hover{filter:brightness(1.08)}
.ghost:active{transform:translate(2px,3px);box-shadow:inset 0 0 0 2px var(--badge-rim),inset 0 0 0 3px rgba(0,0,0,.35),1px 1px 0 var(--ink)}
.ghost svg{width:25px;height:25px;stroke-width:1.9}
.ghost .hat{fill:var(--badge-ink);stroke:var(--badge-ink)}
.music-btn{background:
    radial-gradient(circle at 36% 30%,rgba(255,255,255,.18),transparent 46%),
    linear-gradient(160deg,var(--badge-face-2),var(--badge-face))}
.music-btn .horn{fill:color-mix(in srgb,var(--badge-rim) 55%,transparent)}
.music-btn .waves{stroke-dasharray:6;animation:badge-waves 1.6s linear infinite}
.music-btn.muted{filter:saturate(.3) brightness(.85)}
.music-btn .mute-x{stroke:#d9534f;stroke-width:2.6}
@keyframes badge-waves{to{stroke-dashoffset:-12}}
/* painted themes: keep the brass idea but with the theme's own ink + accents */
[data-theme="light"] .ghost{--badge-face:#fff3cf;--badge-face-2:#ffe9a6;--badge-ink:#2b2117;--badge-rim:#b9892b;--badge-rim-2:var(--ink)}
[data-theme="dark"] .ghost{--badge-face:#2b2140;--badge-face-2:#4a3a66;--badge-ink:#f8ecd0;--badge-rim:#d4af5a;--badge-rim-2:var(--ink)}
@media (prefers-reduced-motion:reduce){.music-btn .waves{animation:none}}

/* ===== podium ceremony: 3rd → 2nd → 1st, driven from runPodiumReveal() ===== */
.pod{animation-duration:.9s;animation-timing-function:cubic-bezier(.18,.9,.25,1.18)}
.pod.p1,.pod.p2,.pod.p3{--pod-delay:0ms} /* real delays are set inline by JS */
.pod .pod-flash{position:absolute;inset:0;z-index:2;border-radius:inherit;background:radial-gradient(circle at 50% 70%,rgba(255,250,225,.95),rgba(255,250,225,0) 70%);
  opacity:0;pointer-events:none;animation:pod-flash .55s ease-out calc(var(--pod-delay) + .18s) both}
@keyframes pod-flash{0%{opacity:0}25%{opacity:.9}100%{opacity:0}}
.pod .med{animation:medal-drop .6s cubic-bezier(.2,.9,.3,1.3) calc(var(--pod-delay) + .22s) both,medal-float 2.4s ease-in-out calc(var(--pod-delay) + 1s) infinite}
@keyframes medal-drop{0%{opacity:0;transform:translateY(-30px) scale(.4) rotate(-20deg)}70%{opacity:1;transform:translateY(3px) scale(1.12) rotate(4deg)}100%{opacity:1;transform:none}}
.pod .champ-stamp{position:absolute;top:6px;inset-inline-end:4px;z-index:3;font-size:.7rem;padding:2px 9px;transform:rotate(12deg) scale(0);opacity:0;
  animation:champ-stamp .45s cubic-bezier(.2,1.1,.3,1.25) calc(var(--pod-delay) + .55s) both}
@keyframes champ-stamp{0%{opacity:0;transform:rotate(12deg) scale(2.2)}60%{opacity:1;transform:rotate(-8deg) scale(.92)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
.pod.p1 b{animation:champ-glow 1.8s ease-in-out calc(var(--pod-delay) + 1s) infinite}
@keyframes champ-glow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 12px rgba(214,173,70,.75)}}
@media (prefers-reduced-motion:reduce){.pod,.pod .pod-flash,.pod .med,.pod .champ-stamp,.pod.p1 b{animation:none;opacity:1;transform:none}}

/* dark themes: silver/white badges instead of brass */
[data-theme="detective"] .ghost,[data-theme="dark"] .ghost{--badge-rim:#f2f2f2;--badge-rim-2:#8a8a8a;--badge-ink:#ffffff}
[data-theme="dark"] .ghost{--badge-face:#241c36;--badge-face-2:#3d3156}
[data-theme="detective"] .music-btn .horn,[data-theme="dark"] .music-btn .horn{fill:rgba(255,255,255,.45)}
.pod .champ-stamp{max-width:calc(100% - 8px);white-space:nowrap}
/* no stray horizontal scrollbars */
.screen{overflow-x:hidden}
html,body{overflow-x:hidden}
/* breathing room between a newspaper title and its tagline */
.news-title{line-height:1.3;margin-bottom:6px}
.news-tagline{margin-top:2px;line-height:1.5}
.slip .news-masthead{padding-bottom:8px}

/* final screen: podium centred, green / yellow / red */
.final-screen{justify-content:center;gap:12px}
.podium-wrap{margin:0 auto}
.podium-title{text-align:center;margin:4px 0 4px}
.podium-tagline{text-align:center;margin:0 0 10px}
.news .pod.p1{--pod-accent:#2f8f4e;background:linear-gradient(168deg,#eef6e3,#c9dfb4 78%);border-color:#2f6a3c}
.news .pod.p2{--pod-accent:#d2a92a;background:linear-gradient(168deg,#fbf4d6,#ecd98f 78%);border-color:#8a6a12}
.news .pod.p3{--pod-accent:#b8362a;background:linear-gradient(168deg,#f8e4df,#e8b5aa 78%);border-color:#8a2a20}
.news .pod.p1 .pod-rank{background:rgba(47,143,78,.18);border-color:#2f6a3c;color:#1f4a2a}
.news .pod.p2 .pod-rank{background:rgba(210,169,42,.2);border-color:#8a6a12;color:#5a4410}
.news .pod.p3 .pod-rank{background:rgba(184,54,42,.16);border-color:#8a2a20;color:#6a1e16}
/* titles vs. the line under them */
.sub{line-height:1.55}
h1,h2,h3{line-height:1.35}
.news-masthead .news-title+.news-tagline,.slip .news-title+.news-tagline{margin-top:6px}
.result-title,.verdict-title,.suspect-board .news-title{margin-bottom:8px}
@media (hover:none),(max-width:600px){
  html[data-theme="detective"] body::after{display:none}
  html[data-theme="detective"] body::before{animation:none;opacity:.1}
  #bg i{animation:none}
  .tv{filter:none}
  .tv-shell{box-shadow:0 18px 28px rgba(0,0,0,.5),0 4px 0 var(--ink)}
  .tv-glass,.tv-inner-fx .tv-glass{animation:none}
  .spotlight{display:none}
  .logo{animation:none}
  .tv-inner .logo img,html[data-theme="detective"] .logo img{filter:drop-shadow(3px 4px 0 rgba(0,0,0,.5))}
  .pod::after{animation:none;display:none}
  .noir-ticker div{animation-duration:28s}
  .news-sheet,.slip,.news-tag{backdrop-filter:none}
  .gmodal{backdrop-filter:none}
}
.tv-screen,.flipper,.pod{will-change:transform}
.news .theme-picker .random-chip.sel{transform:none}