:root {
  --bg: #0b0708; --bg2: #120b0d; --panel: #1a1113; --panel2: #221618; --line: #3a2629; --line2: #4d3236;
  --text: #f3e9dc; --muted: #a8968a; --dim: #6f5f58;
  --red: #e3262f; --red2: #ff4a4a; --deep: #5c0a10; --amber: #ffb020; --bone: #e8dcc4; --green: #3ddc97;
  --common: #d9ccb4; --uncommon: #ffb020; --rare: #ff3b3b;
  --r: 14px; --safe-b: env(safe-area-inset-bottom, 0px);
  --display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, -apple-system, Segoe UI, sans-serif;
  --type: "Special Elite", "Courier New", monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% -10%, #2a0a0f 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--text); font: 500 16px/1.4 var(--body); overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.grain { pointer-events: none; position: fixed; inset: -50%; z-index: 90; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(1%,3%)} }

/* ── buttons & inputs ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 46px; padding: 0 18px;
  border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); font-weight: 700; letter-spacing: .02em;
  transition: transform .08s, background .15s, border-color .15s; user-select: none; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .4; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, var(--red2), var(--red)); border-color: #ff7070; color: #fff; box-shadow: 0 6px 24px -8px #e3262f99; }
.btn.amber { background: linear-gradient(180deg, #ffc54d, var(--amber)); border-color: #ffd27a; color: #241400; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: 14px; border-radius: 10px; }
.btn.block { width: 100%; }
.input, select.input { width: 100%; min-height: 48px; padding: 0 14px; border-radius: 12px; background: #0f0a0b; border: 1px solid var(--line2); outline: none; }
.input:focus { border-color: var(--amber); }
textarea.input { padding: 12px 14px; min-height: 90px; resize: vertical; font-family: var(--type); }
label.lbl { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0 0 6px; font-weight: 700; }
.muted { color: var(--muted); } .small { font-size: 13px; } .center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; } .wrap { flex-wrap: wrap; } .grow { flex: 1; } .gap-s { gap: 6px; }
.stack > * + * { margin-top: 12px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }

/* ── home / marquee ── */
.home { min-height: 100dvh; display: grid; place-items: center; padding: 28px 18px calc(28px + var(--safe-b)); }
.home-inner { width: min(440px, 100%); }
.marquee { position: relative; padding: 26px 18px 20px; border-radius: 18px; text-align: center; margin-bottom: 26px;
  background: linear-gradient(180deg, #2a0c10, #170709); border: 2px solid #6b1a20;
  box-shadow: 0 0 0 6px #120506, 0 0 60px -10px #e3262f66, inset 0 0 40px #000; }
.marquee::before { content: ""; position: absolute; inset: 7px; border-radius: 12px; pointer-events: none;
  background: radial-gradient(circle, #ffe7a8 0 2.6px, transparent 3.2px) 0 0 / 18px 18px;
  -webkit-mask: linear-gradient(#000 0 0) top/100% 8px no-repeat, linear-gradient(#000 0 0) bottom/100% 8px no-repeat, linear-gradient(#000 0 0) left/8px 100% no-repeat, linear-gradient(#000 0 0) right/8px 100% no-repeat;
          mask: linear-gradient(#000 0 0) top/100% 8px no-repeat, linear-gradient(#000 0 0) bottom/100% 8px no-repeat, linear-gradient(#000 0 0) left/8px 100% no-repeat, linear-gradient(#000 0 0) right/8px 100% no-repeat;
  animation: bulbs 1.2s steps(2) infinite; filter: drop-shadow(0 0 3px #ffcf5a); }
@keyframes bulbs { 50% { opacity: .55; } }
.logo { font-family: var(--display); font-size: clamp(46px, 14vw, 64px); line-height: .9; letter-spacing: .02em; margin: 6px 0 8px;
  color: #fff3dc; text-shadow: 0 0 1px #fff, 0 0 18px #ff5a3c88, 3px 3px 0 var(--deep); }
.logo span { color: var(--red2); }
.edition { display: inline-block; font-family: var(--display); letter-spacing: .3em; font-size: 14px; color: var(--red2); padding: 3px 10px 2px; border: 1px solid #ff4a4a66; border-radius: 4px; animation: flicker 4s infinite; }
@keyframes flicker { 0%,19%,22%,62%,64%,100% { opacity: 1 } 20%,63% { opacity: .35 } }
.tagline { color: var(--muted); margin: 10px 0 0; font-size: 15px; }
.card-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font-size: 12px; letter-spacing: .2em; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.code-input { text-transform: uppercase; letter-spacing: .4em; font-family: var(--display); font-size: 22px; text-align: center; }

/* ── game shell ── */
.game { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(180deg, #0b0708f2, #0b0708d9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.mini-logo { font-family: var(--display); font-size: 20px; letter-spacing: .02em; white-space: nowrap; }
.mini-logo span { color: var(--red2); }
@media (max-width: 479px) { .mini-logo .ml-txt { display: none; } }
.code-chip { font-family: var(--display); letter-spacing: .25em; padding: 6px 10px 5px 12px; border-radius: 8px; background: #2a0c10; border: 1px dashed #ff4a4a88; font-size: 15px; }
.phase-pill { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--amber); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); border: 1px solid var(--line); font-size: 18px; flex: none; }
.movie-strip { padding: 8px 14px; font-family: var(--type); color: var(--bone); border-bottom: 1px solid var(--line); background: #0f090a; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.layout { flex: 1; display: block; padding: 14px 14px calc(86px + var(--safe-b)); }
.sec { display: none; }
.sec.active { display: block; }
.sec + .sec.active { margin-top: 0; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px calc(6px + var(--safe-b)); background: #0d0809f5; border-top: 1px solid var(--line); backdrop-filter: blur(8px); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; border-radius: 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.tab .ico { font-size: 20px; line-height: 1; filter: grayscale(1); opacity: .7; }
.tab.on { color: var(--text); background: var(--panel); }
.tab.on .ico { filter: none; opacity: 1; }
.badge[hidden] { display: none; }
.badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; display: grid; place-items: center; }

@media (min-width: 960px) {
  .tabbar { display: none; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) 370px; gap: 18px; padding: 18px; align-items: start; max-width: 1400px; margin: 0 auto; width: 100%; }
  .sec { display: block; }
  .main-col { grid-column: 1; min-width: 0; } .side-col { grid-column: 2; position: sticky; top: 74px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100dvh - 92px); }
  .main-col > .sec + .sec { margin-top: 18px; }
  .side-col #sec-chat { flex: 1; min-height: 0; display: flex; }
  .side-col #sec-chat .chat { height: auto; flex: 1; }
}
@media (max-width: 959px) { .main-col, .side-col { display: contents; } }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.panel + .panel { margin-top: 14px; }
.h { font-family: var(--display); font-size: 24px; letter-spacing: .02em; margin: 0 0 4px; line-height: 1.05; }
.h.sm { font-size: 18px; }
.kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; color: var(--red2); font-weight: 700; margin-bottom: 4px; }
.banner { border-radius: var(--r); padding: 14px 16px; background: linear-gradient(90deg, #3a0c12, #1a1113); border: 1px solid #6b1a20; margin-bottom: 14px; }
.banner.amber { background: linear-gradient(90deg, #3a2a08, #1a1113); border-color: #7a5a14; }
.banner.green { background: linear-gradient(90deg, #0b2a1e, #1a1113); border-color: #1e6b4c; }

/* ── trope cards ── */
.hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 420px) { .hand { grid-template-columns: 1fr 1fr; gap: 10px; } }
/* Bigger cards: one per row on a phone, with larger type, for reading a draft pool or an 8-card offer */
.hand.big { grid-template-columns: 1fr; }
@media (min-width: 700px) { .hand.big { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); } }
.hand.big .tcard { min-height: 0; padding: 14px; } .hand.big .tcard .name { font-size: 24px; } .hand.big .tcard .desc { font-size: 16px; line-height: 1.35; }
.hand.big .tcard .top { font-size: 12px; } .hand.big .tcard .val { font-size: 20px; }
.poolhead { align-items: center; margin-bottom: 8px; } .poolhead .kicker { margin: 0; } .upnext { margin: -6px 0 14px; }
/* snake draft on a phone: whose pick it is stays in view while you scroll the pool */
@media (max-width: 959px) { .banner.turn { position: sticky; top: var(--topbar-h, 56px); z-index: 15; padding: 10px 14px; box-shadow: 0 10px 20px -10px #000; } }
.tcard { --rc: var(--common); position: relative; border-radius: 14px; padding: 12px 12px 12px; min-height: 172px; text-align: left; width: 100%;
  background: linear-gradient(165deg, #2a1c1e 0%, #170f10 60%); border: 1.5px solid color-mix(in srgb, var(--rc) 55%, transparent);
  box-shadow: inset 0 0 0 1px #ffffff08, 0 8px 20px -12px #000; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  transition: transform .15s, box-shadow .2s, border-color .2s; }
.tcard::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 0; border-top: 2px dotted #ffffff14; }
.tcard.uncommon { --rc: var(--uncommon); }
.tcard.rare { --rc: var(--rare); box-shadow: inset 0 0 0 1px #ffffff08, 0 0 22px -8px #ff3b3b88; }
button.tcard:active { transform: scale(.98); }
.tcard .top { display: flex; justify-content: space-between; align-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rc); height: 20px; }
.tcard .val { font-family: var(--display); font-size: 17px; letter-spacing: .02em; color: var(--text); }
.tcard .val .up { font-size: 16px; margin-left: 2px; } .tcard .val .up-blind { color: #8cc4ff; } .tcard .val .up-mod { color: #ffcf6b; } .tcard .val .up-rev { color: #ff8c8c; }
.tcard .name { font-family: var(--display); font-size: 20px; line-height: 1.05; letter-spacing: .01em; margin-top: 6px; }
.tcard .desc { font-size: 13px; color: var(--muted); line-height: 1.3; }
.tcard .mod { font-family: var(--type); font-size: 13px; color: #ffe2a0; background: #ffb0200f; border-left: 3px solid var(--amber); padding: 5px 8px; border-radius: 4px; line-height: 1.25;
  overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: none; }
/* long notes are cut to two lines with an ellipsis on the small cards; the opened card and the hit animation show all of it */
.sheet .tcard .mod, .fx-card .tcard .mod { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tcard .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.tag { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 6px; border-radius: 5px; background: #ffffff12; color: var(--bone); white-space: nowrap; }
.tag.blind { background: #4da3ff26; color: #8cc4ff; } .tag.mod { background: #ffb02026; color: #ffcf6b; } .tag.rev { background: #ff3b3b26; color: #ff8c8c; }
.tag.bet { background: #ffffff10; color: var(--muted); display: inline-flex; gap: 3px; align-items: center; }
.tcard.hit { border-color: var(--green); background: linear-gradient(165deg, #12362a 0%, #0f1a14 70%); }
.tcard.hit .desc { opacity: .6; }
.stamp { position: absolute; right: 8px; bottom: 30px; font-family: var(--display); font-size: 24px; color: var(--green); border: 3px solid var(--green); padding: 0 8px; border-radius: 6px; transform: rotate(-12deg); opacity: .92; letter-spacing: .04em; background: #0b1a14cc; pointer-events: none; }
.tcard.pending { animation: pend 1s ease-in-out infinite; }
@keyframes pend { 50% { border-color: var(--amber); box-shadow: 0 0 24px -4px #ffb02088; } }
.tcard.selected { outline: 3px solid var(--amber); outline-offset: 2px; transform: translateY(-3px); }
.tcard.dim { opacity: .38; }
/* snake draft: the held pick, with Undo, sits above the tab bar until it goes through */
.pickbar { position: sticky; bottom: calc(82px + var(--safe-b)); z-index: 20; display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: var(--r);
  background: #2a1c08; border: 1px solid #7a5a14; box-shadow: 0 10px 30px #000a; overflow: hidden; }
.pickbar .pb-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; } .pickbar .pb-txt .kicker { margin: 0; color: var(--amber); }
.pickbar .pb-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickbar .pb-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--amber); transform-origin: left; animation: pbt linear forwards; }
@keyframes pbt { to { transform: scaleX(0); } }
@media (min-width: 960px) { .pickbar { bottom: 16px; } }
.tcard.shake { animation: shake .5s; }
@keyframes shake { 20%,60% { transform: translateX(-6px) } 40%,80% { transform: translateX(6px) } }
.tcard .call { margin-top: 6px; min-height: 40px; border-radius: 10px; font-family: var(--display); letter-spacing: .08em; font-size: 16px; background: linear-gradient(180deg, var(--red2), var(--red)); color: #fff; border: 1px solid #ff7070; }

/* compact cards for table rows */
.trow { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; }
.trow .tcard { flex: 0 0 138px; min-height: 128px; scroll-snap-align: start; padding: 10px; }
.trow .tcard .name { font-size: 16px; margin-top: 4px; }
.trow .tcard .desc { display: none; }
.trow .tcard .mod { font-size: 12px; }
.trow .tcard .stamp { font-size: 18px; bottom: 26px; }
.trow .tcard::after { top: 30px; }
.seat { padding: 14px 0; border-top: 1px solid var(--line); }
.seat:first-of-type { border-top: 0; padding-top: 4px; }
.seat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.seat-name { font-weight: 700; font-size: 17px; }
.seat-pts { margin-left: auto; font-family: var(--display); font-size: 18px; }

/* ── players / scores ── */
.plist { list-style: none; margin: 0; padding: 0; }
.plist li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.plist li:first-child { border-top: 0; }
.plist .nm { font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plist .off { opacity: .45; }
.rank { width: 26px; font-family: var(--display); color: var(--muted); font-size: 18px; text-align: center; }
.score { font-family: var(--display); font-size: 22px; }
.score small { font-family: var(--body); font-size: 12px; color: var(--green); margin-left: 4px; font-weight: 700; }
.pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; background: #ffffff10; color: var(--muted); }
.pill.host { background: #ffb02022; color: var(--amber); } .pill.loser { background: #ff3b3b22; color: #ff8c8c; } .pill.ready { background: #3ddc9722; color: var(--green); }

/* ── deal vote ── */
.methods { display: grid; gap: 12px; }
@media (min-width: 640px) { .methods { grid-template-columns: repeat(3, 1fr); } }
.method { text-align: left; border-radius: 16px; padding: 16px; background: var(--panel2); border: 1.5px solid var(--line2); display: flex; flex-direction: column; gap: 6px; min-height: 150px; transition: border-color .15s, transform .1s; }
.method:active { transform: scale(.98); }
.method.mine { border-color: var(--amber); background: linear-gradient(170deg, #3a2a08, var(--panel2)); }
.method .ic { font-size: 30px; }
.method .t { font-family: var(--display); font-size: 22px; }
.method .votes { margin-top: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 700; }

/* ── settings ── */
.setgrid { display: grid; gap: 14px; }
@media (min-width: 640px) { .setgrid { grid-template-columns: 1fr 1fr; } }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border-radius: 12px; background: #0f0a0b; border: 1px solid var(--line2); }
.switch { width: 46px; height: 28px; border-radius: 14px; background: #3a2629; position: relative; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch.on { background: var(--green); } .switch.on::after { transform: translateX(18px); }

/* ── chat ── */
.chat { display: flex; flex-direction: column; height: calc(100dvh - 210px); min-height: 320px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; width: 100%; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.msg { line-height: 1.35; word-wrap: break-word; }
.msg b { margin-right: 6px; }
.msg.sys { font-size: 13px; color: var(--muted); padding: 6px 10px; border-radius: 8px; background: #ffffff06; }
.msg.hit { color: #bff5dd; background: #3ddc9714; border-left: 3px solid var(--green); }
.msg.revenge { color: #ffc2c2; background: #ff3b3b14; border-left: 3px solid var(--red); }
.msg .tm { color: var(--dim); font-size: 11px; margin-left: 6px; }
.reacts { display: flex; gap: 6px; padding: 8px 10px 0; border-top: 1px solid var(--line); overflow-x: auto; }
.reacts button { font-size: 20px; width: 40px; height: 36px; border-radius: 10px; background: #ffffff08; flex: none; }
.chat-form { display: flex; gap: 8px; padding: 8px 10px 10px; }
.chat-form .input { min-height: 44px; }

/* ── claims (live votes) ── */
/* compact view for Discord's picture-in-picture window: only #mini, vote pop-ups, sheets and toasts show */
#mini { display: none; }
html[data-mini] #mini { display: flex; flex-direction: column; gap: 6px; position: fixed; inset: 0; z-index: 40; padding: 6px; background: var(--bg); overflow: auto; }
html[data-mini] #app, html[data-mini] #watch, html[data-mini] #stream, html[data-mini] #decor, html[data-mini] .grain { display: none !important; }
.mini-head { display: flex; align-items: baseline; gap: 6px; font-size: 12px; }
.mini-head b { font-family: var(--display); font-size: 16px; }
.mini-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.mini-card { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-height: 56px; padding: 6px 8px; border-radius: 10px; border: 1.5px solid var(--amber); background: var(--panel); color: var(--text); text-align: left; font: inherit; font-size: 12px; line-height: 1.15; cursor: pointer; }
.mini-card span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mini-card b { font-family: var(--display); font-size: 14px; color: var(--amber); }
.mini-card.hit { border-color: var(--green, #3ddc97); opacity: .7; cursor: default; }
.mini-card.hit b { color: var(--green, #3ddc97); }
.mini-card.wait { border-style: dashed; opacity: .8; cursor: default; }
.mini-note { margin: 0; font-size: 13px; color: var(--muted); }
.mini-keys { margin: 2px 0 0; font-size: 11.5px; color: var(--muted); }
.mini-keys kbd, .vbtn kbd { font: inherit; font-weight: 800; padding: 0 4px; border-radius: 4px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); }
.vbtn kbd { display: none; margin-left: 6px; font-size: 12px; }
html[data-mini] .vbtn kbd { display: inline; }
.mini-card { position: relative; }
.mini-card[data-key]::before { content: attr(data-key); position: absolute; right: 6px; top: 4px; font-size: 10px; font-weight: 800; color: var(--muted); }
.mini-seat { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.banner .steps { margin: 6px 0 0; padding-left: 20px; }
.banner .steps li + li { margin-top: 4px; }
html[data-mini] #claims { top: 4px; width: calc(100% - 8px); }
html[data-mini] .claim { padding: 6px 8px; border-radius: 10px; }
html[data-mini] .claim .what { font-size: 15px; }
html[data-mini] .claim .mod, html[data-mini] .claim .pick, html[data-mini] .claim .beam { display: none; }
html[data-mini] .claim .bar { margin: 4px 0; }
/* the expanded window (>= 420 x 240): bigger cards in a grid, the vote docked at the bottom, a chip per player */
html[data-mini-wide] #mini { padding: 10px 12px; gap: 8px; }
html[data-mini-wide][data-claims] #mini { padding-bottom: 86px; }
.mini-head.wide { align-items: center; gap: 10px; font-size: 12px; }
.mini-head.wide b { font-size: 22px; line-height: 1; }
.mini-head.wide small { color: var(--green); font-weight: 800; font-size: 12px; margin-left: -6px; }
.mini-head.wide .ms-clock { font-size: 14px; }
.mini-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mini-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; background: #ffffff12; color: var(--muted); font-weight: 700; font-size: 12px; }
.mini-chip.on { background: var(--amber); color: #1a1200; }
.mini-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 540px) { .mini-grid { grid-template-columns: repeat(3, 1fr); } }
.mini-card.big { --rc: var(--common); min-height: 84px; padding: 7px 9px; gap: 5px; border-radius: 12px; border-color: color-mix(in srgb, var(--rc) 70%, transparent);
  background: linear-gradient(165deg, var(--panel2), var(--panel)); justify-content: flex-start; }
.mini-card.big.uncommon { --rc: var(--uncommon); } .mini-card.big.rare { --rc: var(--rare); }
.mini-card.big[data-key]::before { display: none; }
.mini-card.big .mc-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--rc); overflow: visible; -webkit-line-clamp: unset; }
.mini-card.big .mc-name { flex: 1; font-family: var(--display); font-size: 15px; line-height: 1.15; -webkit-line-clamp: 3; }
.mini-card.big .mc-call { display: block; border-radius: 9px; padding: 5px 0; text-align: center; font-family: var(--display); font-weight: 900; letter-spacing: .06em; font-size: 13px;
  background: linear-gradient(180deg, var(--red2), var(--red)); color: #fff; -webkit-line-clamp: unset; overflow: visible; }
.mini-card.big.hit { border-color: var(--green); opacity: 1; background: linear-gradient(165deg, #12362a, #0f1a14); }
.mini-card.big.hit .mc-call { background: none; color: var(--green); text-align: left; padding: 0; }
.mini-card.big.wait { border-style: solid; opacity: 1; }
.mini-card.big.wait .mc-call { background: none; border: 1.5px dashed var(--amber); color: var(--amber); }
html[data-mini-wide] #claims { top: auto; bottom: 8px; width: calc(100% - 24px); }
html[data-mini-wide] .claim { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 7px 10px; position: relative; overflow: hidden;
  background: linear-gradient(var(--panel2), var(--panel2)), var(--bg); }
html[data-mini-wide] .claim .acts { grid-column: 2; grid-row: 1 / span 2; }
html[data-mini-wide] .claim .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; margin: 0; border-radius: 0; }
html[data-mini-wide] .claim .vbtn { flex: none; min-height: 38px; padding: 0 12px; font-size: 14px; }
html[data-mini-wide] .claim .tally { display: none; }
html[data-mini-wide] .claim .acts .muted { display: none; }
html[data-mini-wide] .claim > .row { grid-column: 2; grid-row: 1 / span 2; margin: 0 !important; }
html[data-mini-wide] .claim > .row > .muted { display: none; }
html[data-mini-wide] .claim .who { grid-column: 1; } html[data-mini-wide] .claim .what { grid-column: 1; }
#claims { position: fixed; z-index: 60; top: 64px; left: 50%; transform: translateX(-50%); width: min(460px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.claim { pointer-events: auto; background: #1d1214f7; border: 1.5px solid var(--amber); border-radius: 16px; padding: 12px 14px 10px; box-shadow: 0 16px 40px -10px #000c, 0 0 30px -10px #ffb02077; animation: drop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes drop { from { transform: translateY(-30px) scale(.95); opacity: 0; } }
.claim .who { font-size: 13px; color: var(--muted); }
.claim .what { font-family: var(--display); font-size: 21px; line-height: 1.1; margin: 2px 0; }
.claim .mod { font-family: var(--type); font-size: 13px; color: #ffe2a0; }
.claim .bar { height: 4px; border-radius: 2px; background: #ffffff14; margin: 10px 0 8px; overflow: hidden; }
.claim .bar i { display: block; height: 100%; background: var(--amber); transform-origin: left; }
.claim .acts { display: flex; gap: 8px; align-items: center; }
.vbtn { flex: 1; min-height: 44px; border-radius: 12px; font-family: var(--display); font-size: 18px; letter-spacing: .06em; border: 1.5px solid; }
.vbtn.yes { color: var(--green); border-color: var(--green); background: #3ddc9714; } .vbtn.no { color: var(--red2); border-color: var(--red2); background: #ff4a4a14; }
.vbtn.on.yes { background: var(--green); color: #052014; } .vbtn.on.no { background: var(--red2); color: #fff; }
.tally { font-weight: 700; font-size: 14px; white-space: nowrap; }

/* ── bottom sheet & modal ── */
.scrim { position: fixed; inset: 0; z-index: 70; background: #000a; animation: fade .2s; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 700px) { .scrim { align-items: center; } }
@keyframes fade { from { opacity: 0; } }
.sheet { width: min(520px, 100%); max-height: 88dvh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 22px 22px 0 0; padding: 10px 18px calc(18px + var(--safe-b)); animation: up .28s cubic-bezier(.2,1,.3,1); }
@media (min-width: 700px) { .sheet { border-radius: 22px; padding-bottom: 18px; } }
.ask-scrim { z-index: 92; align-items: center; background: #000c; }
.sheet.ask { width: min(380px, calc(100% - 24px)); border-radius: 18px; padding: 18px; background: var(--panel2); border: 1.5px solid var(--amber); box-shadow: 0 24px 60px -10px #000; }
/* invite box: the QR code always sits on white so phone cameras can read it on any skin */
.qr { background: #fff; padding: 10px; border-radius: 12px; width: min(230px, 68vw); margin: 0 auto 10px; } .qr svg { display: block; width: 100%; height: auto; }
.ask-q { margin: 0 0 14px; font-size: 16px; font-weight: 600; line-height: 1.35; }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line2); margin: 0 auto 12px; }
.sheet .tcard { min-height: 0; margin-bottom: 14px; }
.acts-list { display: grid; gap: 10px; }
.act { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line2); min-height: 58px; }
.act .ai { font-size: 22px; width: 28px; text-align: center; flex: none; }
.act b { display: block; } .act span { font-size: 13px; color: var(--muted); }
.act.red { border-color: #ff4a4a77; background: linear-gradient(90deg, #3a0c12, var(--panel2)); }
.act.amber { border-color: #ffb02077; }
.rules h3 { font-family: var(--display); font-size: 19px; margin: 18px 0 6px; letter-spacing: .02em; }
.rules ol { padding-left: 22px; margin: 6px 0; }
.rules p, .rules li { color: #e6d9c9; font-size: 15px; } .rules ul { padding-left: 20px; margin: 6px 0; }
.deck-list { display: grid; gap: 8px; }
.deck-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); }
.deck-item .rr { width: 74px; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* results */
.rtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.rtable td:first-child { white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 479px) { .rtable { font-size: 13px; } .rtable th, .rtable td { padding-left: 2px; padding-right: 2px; } }
.rtable th { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 6px 4px; font-weight: 700; }
.rtable th:first-child, .rtable td:first-child { text-align: left; }
.rtable td { text-align: right; padding: 9px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.rtable td.big { font-family: var(--display); font-size: 18px; }
.outcome { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 6px 0; }

/* toast */
#toast { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 95; pointer-events: none; }
#toast div { background: #2a1416; border: 1px solid var(--line2); color: var(--text); padding: 10px 16px; border-radius: 12px; font-weight: 600; box-shadow: 0 10px 30px #000a; animation: drop .25s; max-width: 90vw; }
#toast div.err { border-color: var(--red2); }

/* ── FX overlay ── */
#fx { position: fixed; inset: 0; z-index: 80; pointer-events: none; display: grid; place-items: center; }
#fx.on { pointer-events: auto; }
.fx-scrim { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, #5c0a10cc, #000e 70%); animation: fxin .2s; }
.fx-flash { position: absolute; inset: 0; background: #fff; animation: flash .45s ease-out forwards; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
@keyframes fxin { from { opacity: 0; } }
.fx-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px; text-align: center; }
.fx-owner { font-family: var(--display); font-size: 20px; letter-spacing: .14em; text-transform: uppercase; animation: rise .4s .1s both; }
.fx-card { width: min(270px, 72vw); animation: cardin .7s cubic-bezier(.2,1.5,.4,1) both; transform-style: preserve-3d; }
.fx-card .tcard { min-height: 240px; padding: 16px; box-shadow: 0 30px 80px -10px #000, 0 0 60px -10px var(--rc); }
.fx-card .tcard .name { font-size: 30px; }
.fx-card .tcard .desc { font-size: 15px; }
@keyframes cardin { 0% { transform: perspective(800px) rotateY(180deg) scale(.3); opacity: 0; } 60% { opacity: 1; } 100% { transform: perspective(800px) rotateY(0) scale(1); } }
.fx-stampbig { position: absolute; top: 46%; font-family: var(--display); font-size: clamp(64px, 22vw, 120px); color: var(--green); border: 6px solid var(--green); padding: 0 18px; border-radius: 12px; background: #06140ecc;
  transform: rotate(-12deg); letter-spacing: .04em; text-shadow: 0 0 30px #3ddc9799; animation: slam .45s .55s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes slam { 0% { transform: rotate(-12deg) scale(3.2); opacity: 0; } 100% { transform: rotate(-12deg) scale(1); opacity: 1; } }
.fx-pts { font-family: var(--display); font-size: 54px; color: var(--amber); text-shadow: 0 0 24px #ffb020aa; animation: rise .5s .9s both; }
.fx-mults { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; animation: rise .4s 1.1s both; }
.fx-mults .tag { font-size: 13px; padding: 5px 9px; }
@keyframes rise { from { transform: translateY(18px); opacity: 0; } }
.fx-mine { font-family: var(--display); color: #fff; background: var(--red); padding: 4px 12px; border-radius: 8px; letter-spacing: .12em; animation: rise .4s both; }
.shake-screen { animation: sshake .5s .55s; }
@keyframes sshake { 10%,50%,90% { transform: translate(-6px, 3px) } 30%,70% { transform: translate(6px, -3px) } }
.particle { position: absolute; top: 46%; left: 50%; width: 10px; height: 14px; border-radius: 3px; animation: burst 1.3s .6s cubic-bezier(.1,.7,.3,1) both; }
@keyframes burst { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); opacity: 0; } }

/* rarer hits get a bigger show: a shock ring for Uncommon; a bigger ring, spinning light rays and a banner for Rare */
.fx-ring { position: absolute; top: 46%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 4px solid var(--uncommon); animation: fxring 1s .55s ease-out both; }
#fx.fx-rare .fx-ring { border-color: var(--rare); border-width: 6px; animation-duration: 1.3s; }
@keyframes fxring { from { transform: scale(.4); opacity: .9; } to { transform: scale(7); opacity: 0; } }
.fx-rays { position: absolute; top: 46%; left: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; opacity: .8;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rare) 34%, transparent) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 58%); mask: radial-gradient(circle, #000 0, transparent 58%); animation: fxrays 3.6s linear both; }
@keyframes fxrays { from { transform: rotate(0); opacity: 0; } 18% { opacity: .8; } to { transform: rotate(55deg); opacity: .8; } }
.fx-rarity { position: absolute; top: 11%; left: 0; right: 0; text-align: center; font-family: var(--display); font-size: clamp(22px, 7vw, 40px); letter-spacing: .3em; color: #fff; padding: 6px 0;
  background: linear-gradient(90deg, transparent, var(--rare), transparent); animation: fxsweep .6s .3s cubic-bezier(.2,.9,.3,1) both; }
@keyframes fxsweep { from { transform: translateX(-100%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fx-ring, .fx-rays { display: none; } }

/* film leader countdown */
.leader { position: relative; width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; background: #d9d0bf; display: grid; place-items: center; overflow: hidden; box-shadow: 0 0 0 10px #111, 0 0 80px #000; }
.leader::before, .leader::after { content: ""; position: absolute; background: #111; }
.leader::before { width: 2px; height: 100%; } .leader::after { height: 2px; width: 100%; }
.leader .ring { position: absolute; inset: 9%; border-radius: 50%; border: 3px solid #111; }
.leader .ring2 { inset: 4%; border-width: 2px; }
.leader .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#0008 var(--a, 0deg), transparent 0); }
.leader .num { position: relative; z-index: 2; font-family: var(--display); font-size: clamp(110px, 30vw, 170px); color: #111; line-height: 1; }
.fx-title { font-family: var(--display); font-size: clamp(40px, 12vw, 72px); letter-spacing: .04em; line-height: .95; text-shadow: 0 0 30px #ff4a4a99, 4px 4px 0 var(--deep); animation: cardin .6s cubic-bezier(.2,1.5,.4,1) both; }
.fx-sub { color: var(--bone); font-family: var(--type); font-size: 17px; animation: rise .4s .4s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .grain { display: none; }
}

/* ── skin-neutral pieces used by skins ── */
#app { position: relative; z-index: 1; }
#decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.segb { min-height: 40px; padding: 0 14px; border-radius: 10px; background: #0f0a0b; border: 1px solid var(--line2); font-weight: 700; font-size: 14px; }
.segb.on { background: var(--amber); color: #1a1200; border-color: var(--amber); }
.segb.on .muted { color: inherit; opacity: .7; }
.segb:disabled { opacity: .55; }
.segb.on:disabled { opacity: 1; }
.viewer-link { margin: 18px 0 0; text-align: center; font-size: 12px; color: var(--dim); }
.viewer-link a { color: var(--muted); }
.skin-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.art-host { position: relative; }
.art { position: absolute; pointer-events: none; user-select: none; }
.beam, .rsticker, .art-beam { display: none; }
.fx-stampbig.long { font-size: clamp(44px, 14vw, 84px); }

/* pause requests */
.icon-btn[hidden] { display: none; }
.pause-btn { width: auto; padding: 0 12px; font-size: 16px; font-weight: 800; color: var(--amber); border-color: var(--amber); }
#pauses { position: fixed; z-index: 85; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); width: min(460px, calc(100% - 20px)); display: flex; flex-direction: column; gap: 8px; }
.preq { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: var(--panel2); border: 2px solid var(--amber); box-shadow: 0 16px 40px -10px #000c; animation: drop .35s cubic-bezier(.2,1.4,.4,1); }
.preq-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--amber); color: #1a1200; font-size: 18px; font-weight: 900; flex: none; animation: pend 1s ease-in-out infinite; }
@media (min-width: 960px) { #pauses { bottom: 24px; } }
.pz { display: inline-block; width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
/* clock strip, picks, runtime lookup */
.movie-strip { white-space: normal; }
.ms-row { display: flex; align-items: center; gap: 10px; }
.ms-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-clock { font-family: var(--body); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--amber); white-space: nowrap; font-size: 14px; }
.ms-bar { height: 3px; margin: 6px -14px -8px; background: #ffffff12; }
.ms-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--red2)); transition: width 1s linear; }
.tcard .pick { font-size: 13px; font-weight: 700; color: var(--text); background: #ffffff0d; border-radius: 6px; padding: 4px 8px; }
.tcard .pick.none { color: var(--muted); font-weight: 600; }
.claim .pick { font-size: 14px; margin-top: 2px; }
.tcard .call.name { background: linear-gradient(180deg, #ffd27a, var(--amber)); color: #1a1200; border-color: #ffe0a0; }
.rt-item { align-items: center; }
.rt-item .grow { min-width: 0; }
.rt-item .eps { width: 64px; min-height: 36px; padding: 0 8px; }
[data-skin="risingsun"] .ms-bar { background: #0000000f; }
[data-skin="risingsun"] .tcard .pick { background: #0000000a; }
[data-skin="risingsun"] .tcard .call.name { background: var(--text); color: #fff; }
[data-skin="anime"] .tcard .call.name { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }

/* ── crest logo (recolors per skin via --crest-* vars) ── */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.logo-crest { margin: 4px 0 6px; line-height: 0; }
.crest { width: min(250px, 68vw); height: auto; display: block; margin: 0 auto; overflow: visible; filter: drop-shadow(0 10px 24px #0008); }
.crest .cr-ring { fill: var(--crest-ring, var(--red)); }
.crest .cr-bulbs, .crest-mini .cr-bulbs { fill: var(--crest-bulb, var(--amber)); }
.crest .cr-line, .crest-mini .cr-line { stroke: var(--crest-bulb, var(--amber)); }
.crest .cr-field, .crest-mini .cr-field { fill: var(--crest-field, #140c0e); }
.crest .cr-text, .crest-mini .cr-text { fill: var(--crest-text, #f3e9dc); }
.crest .cr-accent { fill: var(--crest-bulb, var(--amber)); }
.crest-mini .cr-ring { fill: var(--crest-ring, var(--red)); }
.crest .cr-font { font-family: var(--display); }
.crest .cr-bulbs circle:nth-child(odd) { animation: crestChase 1.2s steps(1) infinite; }
.crest .cr-bulbs circle:nth-child(even) { animation: crestChase 1.2s steps(1) -.6s infinite; }
@keyframes crestChase { 50% { opacity: .35; } }
.mini-logo { display: flex; align-items: center; gap: 8px; }
.crest-mini { width: 30px; height: 30px; flex: none; }
@media (prefers-reduced-motion: reduce) { .crest .cr-bulbs circle { animation: none !important; } }

/* per-skin crest colors (defaults: ring = --red, bulbs = --amber) */
[data-skin="anime"]     { --crest-field: #141033; }
[data-skin="risingsun"] { --crest-bulb: #ffffff; --crest-field: #1c1512; }
[data-skin="action"]    { --crest-field: #0b0908; }
[data-skin="scifi"]     { --crest-ring: #5ef2ff; --crest-bulb: #ffffff; --crest-field: #04060f; --crest-text: #e6fbff; }
[data-skin="fantasy"]   { --crest-bulb: #d4a640; --crest-field: #2b1d12; --crest-text: #f6ecd6; }
[data-skin="comedy"]    { --crest-field: #111111; --crest-text: #ffffff; }
[data-skin="bots"]      { --crest-field: #121418; }
[data-skin="youtube"]   { --crest-bulb: #ffffff; --crest-field: #0f0f0f; }
.crest, .crest-mini { --crest-dummy: 0; }

/* ── video queue (YouTube mode) ── */
#vqueue:empty { display: none; }
.vq { border-bottom: 1px solid var(--line); }
.vq-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-weight: 700; text-align: left; }
.vq-list { max-height: 38vh; overflow-y: auto; padding: 0 10px 10px; display: flex; flex-direction: column; gap: 8px; }
.vq-item { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; background: var(--panel2); }
.vq-thumb { width: 96px; aspect-ratio: 16 / 9; border-radius: 6px; object-fit: cover; flex: none; background: #000; }
.vq-ph { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--muted); }
.vq-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vq-meta a { color: var(--text); font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vq-empty { padding: 0 12px 10px; margin: 0; }
.msg a { color: var(--amber); word-break: break-all; }

/* ── minigames overlay ── */
#games { position: fixed; inset: 0; z-index: 55; display: none; align-items: center; justify-content: center; background: #000b; padding: 12px; }
#games.on { display: flex; animation: fade .2s; }
.g-wrap { position: relative; width: min(440px, 100%); max-height: 100%; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 12px 14px 16px; box-shadow: 0 30px 80px -20px #000; }
.g-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.g-title { font-family: var(--display); font-size: 20px; flex: 1; }
.g-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.g-score b { color: var(--text); }
.g-btn { min-width: 40px; height: 40px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line2); font-weight: 700; font-size: 16px; padding: 0 12px; }
.g-btn.wide { flex: 1; min-width: 0; }
.g-btn:disabled { opacity: .6; }
.g-muted { color: var(--muted); font-size: 14px; margin: 4px 0 12px; }
.g-hint { text-align: center; font-size: 12.5px; margin: 10px 0 0; }
.g-list { display: grid; gap: 10px; }
.g-pick { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line2); min-height: 64px; }
.g-ico { font-size: 28px; }
.g-txt { flex: 1; } .g-txt b { display: block; font-size: 16px; } .g-txt span { color: var(--muted); font-size: 13px; }
.g-best { text-align: right; font-size: 11px; color: var(--muted); line-height: 1.2; } .g-best b { color: var(--amber); font-size: 15px; }
.g-canvas { display: block; width: 100%; height: auto; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.g-pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(2, 48px); gap: 6px; justify-content: center; margin-top: 12px; }
.g-pad button { border-radius: 12px; background: var(--panel2); border: 1px solid var(--line2); font-size: 18px; touch-action: manipulation; }
.g-pad [data-d="up"] { grid-column: 2; } .g-pad [data-d="left"] { grid-column: 1; grid-row: 2; } .g-pad [data-d="down"] { grid-column: 2; grid-row: 2; } .g-pad [data-d="right"] { grid-column: 3; grid-row: 2; }
@media (pointer: fine) and (min-width: 700px) { .g-pad { display: none; } }
.g-match { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.g-tile { aspect-ratio: 3 / 4; border-radius: 10px; background: var(--panel2); border: 1.5px solid var(--line2); padding: 6px; display: grid; place-items: center; text-align: center; font-size: 11.5px; font-weight: 700; line-height: 1.15; transition: transform .15s; overflow: hidden; }
.g-tile:not(.up) { background: repeating-linear-gradient(45deg, var(--panel2) 0 8px, var(--line) 8px 16px); }
.g-tile.up { border-color: var(--amber); transform: scale(1.03); }
.g-tile.done { border-color: var(--green); opacity: .75; transform: none; }
.g-body { position: relative; min-height: 200px; }
.g-over { position: absolute; inset: 0; display: grid; place-items: center; background: #000a; border-radius: 12px; padding: 16px; animation: fade .2s; }
.g-over-card { background: var(--panel); border: 1px solid var(--line2); border-radius: 16px; padding: 18px; width: 100%; text-align: center; }
.g-big { font-family: var(--display); font-size: 28px; margin-bottom: 4px; }
.g-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
[data-tone="light"] .g-over, [data-tone="light"] #games { background: #0007; }

/* synced YouTube player (YouTube mode) */
#watch { display: none; position: fixed; z-index: 50; right: 8px; top: calc(66px + env(safe-area-inset-top, 0px)); width: min(210px, calc(100% - 16px)); background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 18px 40px -10px #000c; overflow: hidden; }
#watch.on { display: block; }
#watch.big { width: min(560px, calc(100% - 16px)); }
#watch.collapsed .w-frame, #watch.collapsed .w-join { display: none; }
/* live stream window: same look as the watch panel, parked bottom-right so the two don't overlap */
#stream { display: none; position: fixed; z-index: 49; right: 8px; bottom: 8px; width: min(300px, calc(100% - 16px)); background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 18px 40px -10px #000c; overflow: hidden; }
#stream.on { display: block; }
#stream.big { width: min(560px, calc(100% - 16px)); }
#stream.collapsed .w-frame, #stream.collapsed .s-set { display: none; }
#stream .w-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#stream .s-set { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
#stream .s-set p { margin: 0; }
.w-head { display: flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 12px; font-weight: 700; background: var(--panel2); }
.w-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.w-b { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line2); font-size: 12px; font-weight: 700; color: var(--text); background: transparent; }
.w-b.red { color: var(--red2, #ff8c8c); }
.w-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.w-frame iframe, .w-frame #ytp { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-join { padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.w-join p { margin: 0; }
.vq-now { font-size: 11px; font-weight: 800; color: var(--green, #3ddc97); }
.vq-btns { display: flex; flex-direction: column; gap: 6px; flex: none; }
@media (min-width: 960px) { #watch { top: auto; right: auto; left: 20px; bottom: 20px; width: 360px; } #watch.big { width: 560px; } }

/* ── Horror art (the base skin): drips under the marquee bulbs, a knife stuck in its corner, ticket + VHS props ── */
[data-skin="horror"] .marquee .edition, [data-skin="horror"] .marquee .logo-crest, [data-skin="horror"] .marquee .tagline { position: relative; z-index: 1; }
[data-skin="horror"] .sk-h-drips { left: 9px; right: 9px; top: 9px; width: calc(100% - 18px); height: 54px; }
[data-skin="horror"] .sk-h-knife { right: -16px; top: -18px; height: 128px; rotate: 30deg; z-index: 2; filter: drop-shadow(0 6px 8px #000c); }
[data-skin="horror"] .sk-h-ticket { right: 10px; top: -16px; width: 82px; rotate: 9deg; filter: drop-shadow(0 4px 6px #000a); }
[data-skin="horror"] .sk-h-vhs { right: 12px; top: -22px; width: 92px; rotate: 7deg; filter: drop-shadow(0 6px 10px #000c); }
[data-skin="horror"] .rsticker { display: block; position: absolute; right: 8px; top: 30px; width: 16px; height: 21px; background: center / contain no-repeat; pointer-events: none; }
[data-skin="horror"] .tcard.rare .rsticker { background-image: var(--art-drop); }
[data-skin="horror"] .tcard:not(.rare) .rsticker, [data-skin="horror"] .tcard.hit .rsticker { display: none; }