/* Twisted Roulette: desktop-first UI over a live 3D room.
   Cream paper cards, oxblood red, warm black. Lobster wordmark, Oswald display, Special Elite labels. */
@font-face { font-family: 'Script'; src: url('/fonts/script.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Display'; src: url('/fonts/display.woff2') format('woff2'); font-weight: 200 700; font-display: swap; }
@font-face { font-family: 'Slab'; src: url('/fonts/slab.woff2') format('woff2'); font-display: swap; }
:root {
  --bg: #1a100e; --deep: #120b0a; --cream: #eadfc6; --cream2: #d9cdb0; --ink: #17100e; --red: #8f1d1d; --red2: #b3302a; --hub: #6a2bd9;
  --mute: #a99d87; --dim: #6f6455; --line: rgba(234, 223, 198, .26); --safe: #7fb894;
  --ease: cubic-bezier(.16, 1, .3, 1); --u: clamp(.62rem, 1vw, 1.1rem); --edge: clamp(18px, 3.6vw, 64px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; background: var(--bg); color-scheme: dark; }
body { color: var(--cream); font: 500 15px/1.35 'Display', 'Arial Narrow', sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
input { user-select: text; -webkit-user-select: text; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.vig { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(26, 16, 14, .55) 80%, rgba(26, 16, 14, .9) 100%); }
.grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
#stage { position: fixed; inset: 0; z-index: 2; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(14px, 3.4vh, 40px) var(--edge); animation: fade .45s ease; pointer-events: none; }
.screen > * { pointer-events: auto; }
.screen.dimmed::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(20, 12, 10, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@keyframes fade { from { opacity: 0 } }
.col { width: 100%; max-width: 460px; margin: 0 auto; }
.spacer { flex: 1; min-height: 8px; pointer-events: none; }
.rise { opacity: 0; transform: translateY(14px); animation: rise .7s var(--ease) forwards; animation-delay: var(--d, 0ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
body.noanim .rise { animation-duration: .01s; animation-delay: 0s; }
.stack { display: flex; flex-direction: column; gap: 12px; } .row { display: flex; align-items: center; gap: 12px; } .grow { flex: 1; min-width: 0; }

/* type */
.label, .slab { font-family: 'Slab', 'Courier New', monospace; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; color: var(--mute); }
.h2 { font: 700 44px/1 'Display'; text-transform: uppercase; letter-spacing: .01em; } .h2 i { font-style: normal; color: var(--red2); }
.big { font: 700 calc(var(--u) * 2.9) /1.05 'Display'; }
.sub { font: 400 14.5px/1.55 'Slab', monospace; color: var(--mute); }
svg.i { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* wordmark */
.logo { transform: rotate(-7deg); transform-origin: left center; display: inline-block; line-height: 1; margin: 1vh 0 0 .6vw; }
.logo .l1 { font: 400 calc(var(--u) * 7) /.95 'Script', cursive; color: var(--cream); -webkit-text-stroke: calc(var(--u) * .95) var(--red); paint-order: stroke fill; text-shadow: 0 calc(var(--u) * .35) 0 var(--red), 0 calc(var(--u) * .9) calc(var(--u) * 1.6) rgba(0, 0, 0, .5); letter-spacing: -.01em; padding: 0 .1em; }
.logo .l2 { font: 400 calc(var(--u) * 1.75) /1 'Slab', monospace; letter-spacing: .14em; color: var(--cream); margin: calc(var(--u) * .5) 0 0 calc(var(--u) * 4.4); transform: rotate(3deg); }
.logo.sm .l1 { font-size: calc(var(--u) * 3.6); -webkit-text-stroke-width: calc(var(--u) * .55); } .logo.sm .l2 { font-size: calc(var(--u) * 1); margin-left: calc(var(--u) * 2.2); }

/* corner layout */
.tl { position: absolute; left: var(--edge); top: clamp(14px, 4vh, 48px); } .tr { position: absolute; right: clamp(16px, 2.4vw, 44px); top: clamp(14px, 4vh, 44px); display: flex; gap: 14px; align-items: center; }
.br { position: absolute; right: clamp(16px, 2.4vw, 44px); bottom: clamp(16px, 5.5vh, 60px); } .bl { position: absolute; left: var(--edge); bottom: clamp(12px, 3vh, 30px); }
.menu { display: flex; flex-direction: column; gap: calc(var(--u) * 1.15); margin-top: calc(var(--u) * 2.6); }

/* paper menu cards */
.mcard { display: flex; align-items: center; gap: calc(var(--u) * 1.1); width: calc(var(--u) * 21.5); height: calc(var(--u) * 5.5); padding: 0 calc(var(--u) * 1.3) 0 calc(var(--u) * .9); border-radius: calc(var(--u) * 1.5);
  background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); transform: rotate(var(--r, 0deg)); box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .8), inset 0 -3px 0 rgba(0, 0, 0, .1); transition: transform .25s var(--ease), box-shadow .25s; text-align: left; }
@media (hover: hover) { .mcard:hover { transform: rotate(0deg) translateX(10px) scale(1.02); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .9), inset 0 -3px 0 rgba(0, 0, 0, .1); } } .mcard:active { transform: rotate(0deg) scale(.98); }
.mcard .mi { width: calc(var(--u) * 3.9); height: calc(var(--u) * 3.9); border-radius: calc(var(--u) * 1); background: var(--ink); color: var(--cream); display: grid; place-items: center; flex-shrink: 0; } .mcard .mi svg { width: 52%; height: 52%; }
.mcard .ml { flex: 1; font: 700 calc(var(--u) * 1.7) /1 'Display'; text-transform: uppercase; letter-spacing: .01em; } .mcard .mc { display: flex; opacity: .65; }
.stamp { font: 400 calc(var(--u) * .78) /1 'Slab', monospace; letter-spacing: .08em; color: var(--red); border: 1.5px solid var(--red); border-radius: 6px; padding: 5px 7px 3px; transform: rotate(-8deg); }
.mcard.sel { background: linear-gradient(180deg, var(--red2), var(--red)); color: var(--cream); } .mcard.sel .mi { background: var(--cream); color: var(--red); }
.mcard.slim { height: calc(var(--u) * 4.5); } .mcard small { display: block; font: 400 calc(var(--u) * .82) 'Slab', monospace; letter-spacing: .02em; text-transform: none; opacity: .7; margin-top: 3px; }
.mcard.ghost { background: none; box-shadow: none; border: 1px solid var(--line); color: var(--cream); } .mcard.ghost .mi { background: rgba(234, 223, 198, .1); }

/* profile pill + round buttons */
.pill { display: flex; align-items: center; gap: 12px; height: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * 1.5) 0 calc(var(--u) * .8); border-radius: 99px; background: var(--deep); border: 1px solid var(--line); text-align: left; transition: border-color .2s; }
@media (hover: hover) { .pill:hover, .ib:hover { border-color: var(--cream); } }
.pill .av { width: calc(var(--u) * 3.1); height: calc(var(--u) * 3.1); border-radius: 50%; background: var(--cream); color: var(--ink); display: grid; place-items: center; font: 700 calc(var(--u) * 1.5) 'Display'; }
.pill b { display: block; font: 700 calc(var(--u) * 1.35) /1.05 'Display'; } .pill small { font: 400 calc(var(--u) * .8) 'Slab', monospace; color: var(--mute); }
.pill .pd { width: 1px; height: 55%; background: var(--line); margin: 0 6px; } .pill .pw b { display: flex; align-items: center; gap: 6px; } .pill .pw svg { width: 15px; height: 15px; fill: #e0a63a; stroke: none; }
.ib { width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); min-width: 44px; min-height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); border: 1px solid var(--line); transition: transform .2s, border-color .2s; }
.ib:active { transform: scale(.92); } .ib svg { width: 24px; height: 24px; }
.conn { display: inline-flex; align-items: center; gap: 8px; } .conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--safe); } .conn.off i { background: var(--red2); animation: blink 1.1s infinite; } @keyframes blink { 50% { opacity: .3 } }

/* the table card + call to action */
.tcard, .dock, .panel { border-radius: calc(var(--u) * 2.6); background: rgba(18, 11, 10, .93); border: 1px solid var(--line); padding: calc(var(--u) * 1.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tcard { width: calc(var(--u) * 34); max-width: calc(100vw - 32px); } .tcard .hdr { padding: calc(var(--u) * .5) calc(var(--u) * .7) calc(var(--u) * 1.3); }
.cta { width: 100%; display: flex; align-items: center; justify-content: space-between; height: calc(var(--u) * 8.4); padding: 0 calc(var(--u) * 1) 0 calc(var(--u) * 2); border-radius: calc(var(--u) * 3.6); background: linear-gradient(180deg, var(--red2), var(--red)); color: var(--cream);
  font: 700 calc(var(--u) * 3.3) /1 'Display'; text-transform: uppercase; letter-spacing: .01em; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 16px 40px -16px rgba(179, 48, 42, .8); transition: transform .2s var(--ease), filter .2s; }
.cta .arrow { width: calc(var(--u) * 6.6); height: calc(var(--u) * 6.6); border-radius: calc(var(--u) * 2.2); background: var(--cream); color: var(--red); display: grid; place-items: center; transition: transform .25s var(--ease); } .cta .arrow svg { width: 42%; height: 42%; stroke-width: 2.6; }
@media (hover: hover) { .cta:hover { filter: brightness(1.08); } .cta:hover .arrow { transform: translateX(4px); } } .cta:active { transform: scale(.985); } .cta[disabled] { filter: saturate(.3) brightness(.6); pointer-events: none; }
.cta.sm { height: calc(var(--u) * 5.6); font-size: calc(var(--u) * 2.2); border-radius: calc(var(--u) * 2.2); } .cta.sm .arrow { width: calc(var(--u) * 4.2); height: calc(var(--u) * 4.2); border-radius: calc(var(--u) * 1.4); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 20px; border-radius: 18px; font: 700 18px/1 'Display'; text-transform: uppercase; letter-spacing: .03em; background: var(--deep); border: 1px solid var(--line); transition: transform .18s, background .2s, border-color .2s, filter .2s; }
.btn:active { transform: scale(.97); } @media (hover: hover) { .btn:hover { border-color: var(--cream); } }
.btn.block { width: 100%; } .btn[disabled] { opacity: .35; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); border-color: transparent; } .btn.danger { background: linear-gradient(180deg, var(--red2), var(--red)); color: var(--cream); border-color: transparent; }
@media (hover: hover) { .btn.primary:hover, .btn.danger:hover { filter: brightness(1.08); } }
.btn.ghost { background: none; border-color: transparent; color: var(--mute); } .btn.sm { height: 42px; font-size: 15px; padding: 0 14px; border-radius: 14px; }

/* fields, settings rows */
.field { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 18px; border-radius: 18px; background: var(--deep); border: 1px solid var(--line); transition: border-color .2s; } .field:focus-within { border-color: var(--cream); } .field svg { color: var(--mute); }
.field input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--cream); font: 700 22px 'Display'; } .field input::placeholder { color: var(--dim); font-weight: 500; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); } .kv:first-child { border-top: 0; }
.kv .k { font: 700 18px 'Display'; text-transform: uppercase; } .kv .d { font: 400 12.5px 'Slab', monospace; color: var(--mute); }
.seg { display: inline-flex; padding: 3px; border-radius: 13px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line); }
.seg button { min-width: 40px; height: 32px; padding: 0 12px; border-radius: 10px; font: 700 15px 'Display'; text-transform: uppercase; color: var(--mute); transition: all .2s; } .seg button.on { background: var(--cream); color: var(--ink); } .seg[data-locked="1"] { pointer-events: none; opacity: .7; }
.switch { width: 50px; height: 29px; border-radius: 99px; background: rgba(0, 0, 0, .5); border: 1px solid var(--line); position: relative; flex-shrink: 0; transition: background .25s; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: var(--mute); transition: transform .3s var(--ease), background .25s; } .switch.on { background: var(--red); } .switch.on::after { transform: translateX(21px); background: var(--cream); }
input[type=range] { -webkit-appearance: none; appearance: none; width: 150px; height: 4px; border-radius: 3px; background: var(--line); outline: 0; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 0; } input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--cream); border: 0; }

/* sub screens */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; position: relative; } .top .mid { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.code-boxes { display: flex; gap: 12px; justify-content: center; }
.code-boxes input { width: 78px; height: 96px; text-align: center; text-transform: uppercase; border-radius: 20px; background: linear-gradient(180deg, var(--cream), var(--cream2)); border: 0; color: var(--ink); font: 700 54px 'Display'; outline: 0; caret-color: var(--red); transition: transform .2s var(--ease), box-shadow .2s; }
.code-boxes input:nth-child(odd) { transform: rotate(-2deg); } .code-boxes input:nth-child(even) { transform: rotate(1.5deg); } .code-boxes input:focus { transform: translateY(-6px) rotate(0); box-shadow: 0 0 0 4px var(--red2); }
.err { min-height: 20px; text-align: center; color: #ff8d83; font: 400 14px 'Slab', monospace; }
.scroll { overflow-y: auto; flex: 1; margin: 0 calc(var(--edge) * -1); padding: 6px var(--edge) 10px; scrollbar-width: none; } .scroll::-webkit-scrollbar { display: none; }
.how { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: start; } .how > .full { grid-column: 1 / -1; }
.step { display: flex; gap: 14px; align-items: baseline; } .step .n { font: 700 30px/1 'Display'; color: var(--red2); width: 20px; flex-shrink: 0; } .step p { font: 400 14.5px/1.55 'Slab', monospace; color: var(--mute); } .step p b { color: var(--cream); font-weight: 400; }
.matrix { display: grid; grid-template-columns: 1fr 1fr 1fr; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); font: 400 13px 'Slab', monospace; }
.matrix div { padding: 11px; border-top: 1px solid var(--line); color: var(--mute); } .matrix div:nth-child(-n+3) { border-top: 0; } .matrix .h { color: var(--cream); } .matrix .bad { color: #ff8d83; } .matrix .good { color: var(--safe); }
.cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .mini { padding: 14px 8px; border-radius: 16px; background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); text-align: center; } .mini:nth-child(1) { transform: rotate(-2deg); } .mini:nth-child(3) { transform: rotate(2deg); }
.mini svg { width: 26px; height: 26px; margin-bottom: 4px; } .mini b { font: 700 18px 'Display'; text-transform: uppercase; display: block; } .mini span { font: 400 12px/1.35 'Slab', monospace; display: block; margin-top: 3px; opacity: .75; }

/* lobby */
.codecard { background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); border-radius: calc(var(--u) * 1.8); padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); width: calc(var(--u) * 21.5); transform: rotate(-2deg); box-shadow: 0 12px 30px -12px #000; }
.codecard .slab { color: var(--ink); opacity: .6; } .codecard .code { font: 700 calc(var(--u) * 5) /1 'Display'; letter-spacing: .12em; margin: 2px 0 10px; } .codecard .btn { background: var(--ink); color: var(--cream); border: 0; flex: 1; }
.seatrow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); font: 700 19px 'Display'; } .seatrow:first-child { border-top: 0; } .seatrow small { font: 400 12.5px 'Slab', monospace; color: var(--mute); display: block; } .seatrow.gone { opacity: .4; } .seatrow.empty { color: var(--dim); font: 400 13px 'Slab', monospace; }
.seatrow .num { width: 30px; height: 30px; border-radius: 9px; background: var(--cream); color: var(--ink); display: grid; place-items: center; font-size: 16px; } .seatrow .host svg { width: 15px; height: 15px; fill: #e0a63a; stroke: none; } .seatrow .ib { width: 34px; height: 34px; min-width: 34px; min-height: 34px; } .seatrow .ib svg { width: 16px; height: 16px; }
.waiting { text-align: center; color: var(--mute); font: 400 14px 'Slab', monospace; padding: 10px 0; }
.dd::after { content: ''; animation: dd 1.4s steps(4) infinite; } @keyframes dd { 25% { content: '.' } 50% { content: '..' } 75% { content: '...' } }

/* game HUD */
.strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pl { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; border-radius: 12px; background: var(--deep); border: 1px solid var(--line); font: 700 17px 'Display'; text-transform: uppercase; transition: all .3s; }
.pl:nth-child(odd) { transform: rotate(-1.5deg); } .pl:nth-child(even) { transform: rotate(1deg); }
.pl .pips { display: flex; gap: 3px; } .pl .pips i { width: 6px; height: 11px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #f0b860; transition: all .4s; } .pl .pips i.out { background: var(--dim); opacity: .5; }
.pl.active { background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); border-color: transparent; } .pl.active .pips i:not(.out) { background: var(--red); } .pl.active .pips i.out { background: var(--ink); opacity: .25; }
.pl.target { border-color: var(--red2); box-shadow: 0 0 0 2px var(--red2); } .pl.out { opacity: .38; text-decoration: line-through; } .pl svg { width: 14px; height: 14px; } .pl small { opacity: .6; font-size: 13px; }
#labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.tag3d { position: absolute; transform: translate(-50%, -100%); font: 700 20px 'Display'; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; text-shadow: 0 2px 8px #000, 0 0 3px #000; }
.tag3d.me::after { content: ' you'; font: 400 11px 'Slab', monospace; color: var(--mute); }
.tag3d .bub { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 4px) rotate(-3deg) scale(.9); background: var(--cream); color: var(--ink); font: 400 14px 'Slab', monospace; text-transform: none; padding: 7px 11px 5px; border-radius: 12px 12px 12px 2px; opacity: 0; transition: all .3s var(--ease); text-shadow: none; }
.tag3d .bub.show { opacity: 1; transform: translate(-50%, -4px) rotate(-3deg); }
.caption { font: 400 22px/1.35 'Slab', monospace; text-shadow: 0 2px 10px #000, 0 0 4px #000; padding: 0 6px 14px; min-height: 44px; pointer-events: none; text-align: center; }
.caption.flash { animation: cap .5s var(--ease); } @keyframes cap { from { opacity: 0; transform: translateY(8px); } }
.dock { position: relative; overflow: hidden; }
.tbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; } .tbar i { display: block; height: 100%; background: var(--cream); transform-origin: left; } .tbar.hot i { background: var(--red2); }
.dock .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 6px 14px; } .dock .hd .label { font-size: 14px; color: var(--cream); }
.odds { display: flex; align-items: center; gap: 9px; } .odds .ch { display: grid; grid-template-columns: repeat(6, 9px); gap: 3px; } .odds .ch i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--cream); } .odds .ch i.sp { border-color: var(--dim); background: var(--dim); } .odds b { font: 700 17px 'Display'; text-transform: uppercase; } .odds.hot b { color: #ff8d83; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .actions .btn { height: 86px; flex-direction: column; gap: 4px; font-size: 25px; border-radius: 24px; } .actions .btn small { font: 400 12.5px 'Slab', monospace; text-transform: none; letter-spacing: 0; opacity: .75; }
.peekbtn { width: 100%; height: 54px; border-radius: 18px; margin-bottom: 10px; border: 1.5px dashed var(--line); color: var(--cream); display: flex; align-items: center; justify-content: center; gap: 10px; font: 400 15px 'Slab', monospace; touch-action: none; transition: all .2s; }
@media (hover: hover) { .peekbtn:hover { border-color: var(--cream); } } .peekbtn.live { border: 1.5px solid var(--red2); color: #ff8d83; background: rgba(143, 29, 29, .25); } .peekbtn.blank { border: 1.5px solid var(--safe); color: var(--safe); background: rgba(127, 184, 148, .1); }
.targets { display: flex; flex-wrap: wrap; gap: 8px; } .targets .btn { flex: 1 1 40%; }
.targets .btn:not(.ghost) { background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); border: 0; }
.cards { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.pcard { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; border-radius: 12px; background: linear-gradient(180deg, var(--cream), var(--cream2)); color: var(--ink); font: 700 16px 'Display'; text-transform: uppercase; transform: rotate(-2deg); } .pcard:nth-child(odd) { transform: rotate(2deg); } .pcard[disabled] { opacity: .4; pointer-events: none; } .pcard svg { width: 16px; height: 16px; }
.emotes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; } .emotes button { height: 32px; padding: 2px 12px 0; border-radius: 99px; border: 1px solid var(--line); font: 400 13px 'Slab', monospace; color: var(--mute); transition: all .15s; } @media (hover: hover) { .emotes button:hover { color: var(--cream); border-color: var(--cream); } } .emotes button:active { background: var(--cream); color: var(--ink); }
.strip, .dock { transition: opacity .4s; } body.cine .strip, body.cine .dock { opacity: 0; visibility: hidden; pointer-events: none; } body.cine #labels { opacity: 0; }
.bars::before, .bars::after { content: ''; position: fixed; left: 0; right: 0; height: 0; background: #0c0706; z-index: 20; transition: height .5s var(--ease); pointer-events: none; } .bars::before { top: 0; } .bars::after { bottom: 0; } body.cine .bars::before, body.cine .bars::after { height: 10vh; }

/* fx, toast, modal */
.whiteout { position: fixed; inset: 0; z-index: 40; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff 0%, #ffe9c9 30%, rgba(179, 48, 42, .55) 70%, transparent 100%); animation: wo 1s ease-out forwards; } @keyframes wo { 0% { opacity: 1 } 100% { opacity: 0 } }
.redpulse { position: fixed; inset: 0; z-index: 39; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 35%, rgba(143, 29, 29, .6) 100%); animation: wo 2.4s ease-out forwards; }
.banner { position: fixed; left: 50%; top: 20vh; z-index: 30; font: 400 64px 'Script', cursive; color: var(--cream); -webkit-text-stroke: 9px var(--red); paint-order: stroke fill; animation: ban 2.2s var(--ease) forwards; pointer-events: none; white-space: nowrap; }
@keyframes ban { 0% { opacity: 0; transform: translateX(-50%) rotate(-5deg) scale(.8); } 15% { opacity: 1; transform: translateX(-50%) rotate(-5deg) scale(1); } 75% { opacity: 1; transform: translateX(-50%) rotate(-5deg); } 100% { opacity: 0; transform: translateX(-50%) rotate(-5deg); } }
.toast { position: fixed; left: 50%; top: 26px; transform: translate(-50%, -14px) rotate(-1.5deg); z-index: 80; max-width: calc(100% - 40px); padding: 12px 18px 10px; border-radius: 14px; background: var(--cream); color: var(--ink); font: 400 15px 'Slab', monospace; opacity: 0; transition: all .35s var(--ease); pointer-events: none; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.5deg); } .toast.bad { background: var(--red); color: var(--cream); }
.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 24px; background: rgba(12, 7, 6, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fade .25s ease; } .modal .panel { max-width: 400px; width: 100%; padding: 26px; }

/* over */
.over-head .name { font: 400 calc(var(--u) * 7.5) /1 'Script', cursive; color: var(--cream); -webkit-text-stroke: calc(var(--u) * .95) var(--red); paint-order: stroke fill; transform: rotate(-5deg); transform-origin: left; display: inline-block; margin: 10px 0 14px; padding: 0 .08em; }
.rank { display: flex; align-items: center; gap: 10px; padding: 10px 6px; border-top: 1px solid var(--line); font: 700 19px 'Display'; text-transform: uppercase; } .rank:first-child { border-top: 0; } .rank .pos { color: var(--mute); width: 18px; } .rank small { font: 400 12.5px 'Slab', monospace; color: var(--mute); text-transform: none; } .rank.win .pos { color: var(--red2); }

/* game + over: controls live in a right-hand column */
.screen.side > .col { width: calc(var(--u) * 30); max-width: 460px; margin: 0 0 0 auto; } .screen.side .caption { position: fixed; left: 0; right: calc(var(--u) * 30 + var(--edge)); bottom: 6vh; font-size: 26px; padding: 0 5vw; }
body.cine .caption { right: 0 !important; bottom: 13vh !important; }

/* small screens: stack everything */
@media (max-width: 899px), (max-aspect-ratio: 11/10) {
  :root { --u: clamp(.6rem, 2.6vw, .8rem); }
  .screen.home, .screen.lobby, .screen.custom { overflow-y: auto; pointer-events: auto; gap: 16px; background: linear-gradient(180deg, rgba(26, 16, 14, .5), rgba(26, 16, 14, .9)); }
  .tl, .tr, .br, .bl { position: static; } .tr { order: -1; justify-content: flex-end; } .mcard, .codecard, .tcard { width: 100%; }
  .screen.side > .col { width: 100%; max-width: 460px; margin: 0 auto; } .screen.side .caption { position: static; font-size: 18px; padding: 0 0 10px; }
  .how { grid-template-columns: 1fr; } .actions .btn { height: 66px; font-size: 20px; } .emotes { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .emotes button { flex-shrink: 0; }
}