:root{
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ---------- THEME: DARK (neutral, classic dark mode) ---------- */
[data-theme="dark"]{
  --bg: #16181D;
  --bg-2: #1E2128;
  --panel: #22252D;
  --panel-2: #2A2E38;
  --line: #3A3F4B;
  --yellow: #E8B54A;
  --pink: #E85D75;
  --teal: #4FC3B0;
  --text: #F0F1F3;
  --muted: #9BA1AD;
  --danger: #E8564F;
  --frame: #0A0B0E;
  --btn-text: #14161A;
  --btn-text-teal: #0E2A25;
  --btn-text-danger: #2A0A08;
  --pink-shadow: #A83E52;
  --teal-shadow: #2E8C7C;
  --danger-shadow: #A8382E;
  --yellow-shadow: #A87F2E;
  --bg-glow-1: rgba(232,93,117,0.08);
  --bg-glow-2: rgba(79,195,176,0.08);
}

/* ---------- THEME: LIGHT ---------- */
[data-theme="light"]{
  --bg: #F5F3EF;
  --bg-2: #FFFFFF;
  --panel: #FFFFFF;
  --panel-2: #E7E4DC;
  --line: #D9D5CC;
  --yellow: #C97A22;
  --pink: #D6425F;
  --teal: #147C6C;
  --text: #1C1C1C;
  --muted: #6E6B64;
  --danger: #B23327;
  --frame: #1C1C1C;
  --btn-text: #FFFFFF;
  --btn-text-teal: #FFFFFF;
  --btn-text-danger: #FFFFFF;
  --pink-shadow: #A22E45;
  --teal-shadow: #0C5348;
  --danger-shadow: #7E241B;
  --yellow-shadow: #935B15;
  --bg-glow-1: rgba(214,66,95,0.08);
  --bg-glow-2: rgba(20,124,108,0.08);
}

/* ---------- THEME: GREEN ---------- */
[data-theme="green"]{
  --bg: #0E2A1C;
  --bg-2: #123625;
  --panel: #153C29;
  --panel-2: #1C4A33;
  --line: #2E6349;
  --yellow: #D4FF5A;
  --pink: #FF8A5B;
  --teal: #5CE0C6;
  --text: #F1FFF6;
  --muted: #9FC7AE;
  --danger: #FF6B6B;
  --frame: #081A11;
  --btn-text: #0E2A1C;
  --btn-text-teal: #0E2A1C;
  --btn-text-danger: #2A0A0A;
  --pink-shadow: #B85B34;
  --teal-shadow: #2E9C86;
  --danger-shadow: #A83A3A;
  --yellow-shadow: #94A83A;
  --bg-glow-1: rgba(212,255,90,0.10);
  --bg-glow-2: rgba(92,224,198,0.14);
}

/* ---------- THEME: RETRO (80s synthwave, sunset neon) ---------- */
[data-theme="retro"]{
  --bg: #1A0B2E;
  --bg-2: #260F42;
  --panel: #341759;
  --panel-2: #431E72;
  --line: #6B32A8;
  --yellow: #FFE156;
  --pink: #FF2E9A;
  --teal: #2EE6FF;
  --text: #FFF3FB;
  --muted: #C9A6E8;
  --danger: #FF4D6D;
  --frame: #FF2E9A;
  --btn-text: #1A0B2E;
  --btn-text-teal: #06222A;
  --btn-text-danger: #2A0A0A;
  --pink-shadow: #B0106A;
  --teal-shadow: #0EA6C0;
  --danger-shadow: #B3243E;
  --yellow-shadow: #B89020;
  --bg-glow-1: rgba(255,46,154,0.25);
  --bg-glow-2: rgba(46,230,255,0.18);
}

/* ---------- THEME: PINK (bubblegum) ---------- */
[data-theme="pink"]{
  --bg: #2B0F1F;
  --bg-2: #391530;
  --panel: #451A3B;
  --panel-2: #552248;
  --line: #7A3564;
  --yellow: #FFD93D;
  --pink: #FF6FB5;
  --teal: #4DD8C9;
  --text: #FFF0F7;
  --muted: #D9A8C4;
  --danger: #FF5C7A;
  --frame: #FF6FB5;
  --btn-text: #2B0F1F;
  --btn-text-teal: #0E332D;
  --btn-text-danger: #2A0A10;
  --pink-shadow: #B23E7E;
  --teal-shadow: #2E9C8C;
  --danger-shadow: #B33A4E;
  --yellow-shadow: #B89020;
  --bg-glow-1: rgba(255,111,181,0.22);
  --bg-glow-2: rgba(77,216,201,0.12);
}

/* ---------- THEME: BLUE (ocean) ---------- */
[data-theme="blue"]{
  --bg: #0B1F33;
  --bg-2: #0F2942;
  --panel: #123453;
  --panel-2: #164066;
  --line: #2A5C8A;
  --yellow: #FFC857;
  --pink: #FF6B8B;
  --teal: #3FD0FF;
  --text: #EAF4FF;
  --muted: #8FB4D9;
  --danger: #FF6B6B;
  --frame: #071626;
  --btn-text: #0B1F33;
  --btn-text-teal: #05303D;
  --btn-text-danger: #2A0A0A;
  --pink-shadow: #B3384F;
  --teal-shadow: #1F9BC0;
  --danger-shadow: #A83A3A;
  --yellow-shadow: #B8862E;
  --bg-glow-1: rgba(63,208,255,0.16);
  --bg-glow-2: rgba(255,200,87,0.08);
}

/* ---------- THEME: YELLOW (sunny) ---------- */
[data-theme="yellow"]{
  --bg: #2A2408;
  --bg-2: #38300C;
  --panel: #453B10;
  --panel-2: #554914;
  --line: #7A6A1E;
  --yellow: #FFE156;
  --pink: #FF6B6B;
  --teal: #3FC7A6;
  --text: #FFFBEA;
  --muted: #D9C87A;
  --danger: #FF5C4D;
  --frame: #FFE156;
  --btn-text: #2A2408;
  --btn-text-teal: #0E332A;
  --btn-text-danger: #2A0A08;
  --pink-shadow: #B33E3E;
  --teal-shadow: #1F8C70;
  --danger-shadow: #A8382E;
  --yellow-shadow: #B89020;
  --bg-glow-1: rgba(255,225,86,0.2);
  --bg-glow-2: rgba(255,107,107,0.1);
}

/* ---------- THEME: ORANGE (sunset) ---------- */
[data-theme="orange"]{
  --bg: #2B1206;
  --bg-2: #3A180A;
  --panel: #481E0D;
  --panel-2: #5A2610;
  --line: #7A3A1A;
  --yellow: #FFB347;
  --pink: #FF6B4A;
  --teal: #4ECDB8;
  --text: #FFF3EA;
  --muted: #D9A98A;
  --danger: #FF4D4D;
  --frame: #FF6B2C;
  --btn-text: #2B1206;
  --btn-text-teal: #0E332C;
  --btn-text-danger: #2A0808;
  --pink-shadow: #B33E28;
  --teal-shadow: #2E9C86;
  --danger-shadow: #A82E2E;
  --yellow-shadow: #B87A1F;
  --bg-glow-1: rgba(255,107,44,0.2);
  --bg-glow-2: rgba(255,179,71,0.12);
}

/* ---------- THEME: SCIFI (navy-black tech HUD, electric blue) ---------- */
[data-theme="scifi"]{
  --bg: #050A14;
  --bg-2: #0A1220;
  --panel: #0E1830;
  --panel-2: #142140;
  --line: #2A3F6B;
  --yellow: #FFD466;
  --pink: #FF4D8F;
  --teal: #4D7FFF;
  --text: #E8EEFF;
  --muted: #7C8FBF;
  --danger: #FF3B5C;
  --frame: #4D7FFF;
  --btn-text: #050A14;
  --btn-text-teal: #050A14;
  --btn-text-danger: #2A0A10;
  --pink-shadow: #B31F5E;
  --teal-shadow: #2A4EC0;
  --danger-shadow: #A8283E;
  --yellow-shadow: #B8901F;
  --bg-glow-1: rgba(77,127,255,0.20);
  --bg-glow-2: rgba(255,77,143,0.08);
}

/* ---------- THEME: HORROR (dark red, spooky) ---------- */
[data-theme="horror"]{
  --bg: #0D0505;
  --bg-2: #170808;
  --panel: #200A0A;
  --panel-2: #2E0D0D;
  --line: #4A1414;
  --yellow: #C9A227;
  --pink: #8B1A2B;
  --teal: #4A7C6B;
  --text: #F0E4E0;
  --muted: #8A6E6E;
  --danger: #E8232F;
  --frame: #E8232F;
  --btn-text: #F0E4E0;
  --btn-text-teal: #0E1F1A;
  --btn-text-danger: #2A0505;
  --pink-shadow: #5C0F1A;
  --teal-shadow: #2A4E42;
  --danger-shadow: #8A1218;
  --yellow-shadow: #8A701A;
  --bg-glow-1: rgba(232,35,47,0.18);
  --bg-glow-2: rgba(74,124,107,0.08);
}

/* ---------- THEME: CIRCUS (bold carnival red/gold/blue) ---------- */
[data-theme="circus"]{
  --bg: #2B0B0F;
  --bg-2: #3A0F14;
  --panel: #481318;
  --panel-2: #591A1F;
  --line: #7A2A2E;
  --yellow: #FFD23F;
  --pink: #FF3E5A;
  --teal: #3F8EFF;
  --text: #FFF6E8;
  --muted: #D9A8A0;
  --danger: #FF3E5A;
  --frame: #FFD23F;
  --btn-text: #2B0B0F;
  --btn-text-teal: #0A1F3A;
  --btn-text-danger: #2A0508;
  --pink-shadow: #B31F35;
  --teal-shadow: #1F5EB3;
  --danger-shadow: #B31F35;
  --yellow-shadow: #B89020;
  --bg-glow-1: rgba(255,210,63,0.15);
  --bg-glow-2: rgba(63,142,255,0.12);
}

/* ---------- THEME: NEON (near-black, hot magenta + mint arcade sign) ---------- */
[data-theme="neon"]{
  --bg: #08050C;
  --bg-2: #100A18;
  --panel: #180F24;
  --panel-2: #221632;
  --line: #3F2A5C;
  --yellow: #F5FF3F;
  --pink: #FF2ED0;
  --teal: #3FFFC4;
  --text: #FFF0FC;
  --muted: #A88AC0;
  --danger: #FF2E4D;
  --frame: #FF2ED0;
  --btn-text: #08050C;
  --btn-text-teal: #08050C;
  --btn-text-danger: #2A0510;
  --pink-shadow: #A80F8E;
  --teal-shadow: #0FA872;
  --danger-shadow: #A80F24;
  --yellow-shadow: #A8AC1F;
  --bg-glow-1: rgba(255,46,208,0.28);
  --bg-glow-2: rgba(63,255,196,0.14);
}

/* ---------- THEME: MIGRAINE (neon pink + neon green, deliberately eye-searing) ----------
   Homage to a wise IT teacher's warning: two equally-bright, saturated, opposing
   hues placed right next to each other make the eye "vibrate" trying to focus on
   the boundary — that's the actual optical phenomenon behind the headache, not
   just "bright colors". No flashing/strobing is used anywhere here on purpose —
   real photosensitive flicker could actually trigger seizures, which is a genuine
   health risk and not remotely the point of the joke. This is loud but static. */
[data-theme="migraine"]{
  --bg: #39FF14;
  --bg-2: #2ECC00;
  --panel: #FF00FF;
  --panel-2: #E600E6;
  --line: #000000;
  --yellow: #FFFF00;
  --pink: #FF0099;
  --teal: #00FFEE;
  --text: #000000;
  --muted: #4D004D;
  --danger: #FF0000;
  --frame: #FF00FF;
  --btn-text: #000000;
  --btn-text-teal: #000000;
  --btn-text-danger: #FFFFFF;
  --pink-shadow: #99005C;
  --teal-shadow: #00998C;
  --danger-shadow: #990000;
  --yellow-shadow: #999900;
  --bg-glow-1: rgba(255,0,255,0.45);
  --bg-glow-2: rgba(0,255,238,0.35);
}
/* Cards/panels get a thick black outline in this theme so the neon-on-neon
   boundaries are as harsh and "buzzy" as possible, on purpose. */
[data-theme="migraine"] .card,
[data-theme="migraine"] .side-panel,
[data-theme="migraine"] .game-card,
[data-theme="migraine"] .tag-card{
  border-width: 3px;
  border-color: #000;
}

/* ---------- TAVERN OVERRIDE (brown/wood — overrides whatever theme is active, but only
   inside the main frame while actually viewing the Tavern; the side panels keep the
   person's normal theme) ---------- */
.tavern-mode .frame{
  --bg: #2a1a0f;
  --bg-2: #3d2817;
  --panel: #4a2f1a;
  --panel-2: #5a3820;
  --line: #6b4226;
  --yellow: #d4a24c;
  --pink: #c17a4a;
  --teal: #8a9b6e;
  --text: #f0dcc0;
  --muted: #b89a78;
  --danger: #b8452f;
  --frame: #1a0f08;
  --btn-text: #2a1a0f;
  --btn-text-teal: #1a2410;
  --btn-text-danger: #2a0805;
  --pink-shadow: #8a5530;
  --teal-shadow: #5a6b48;
  --danger-shadow: #7a2f1f;
  --yellow-shadow: #8a6c2e;
  --bg-glow-1: rgba(212,162,76,0.10);
  --bg-glow-2: rgba(138,155,110,0.08);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background: var(--frame);
  color:var(--text);
  font-family:'Work Sans', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  transition: background .25s ease;
}
.frame{
  padding: 14px;
  min-height: 100vh;
}
.frame-inner{
  background:
    radial-gradient(circle at 15% 0%, var(--bg-glow-1), transparent 45%),
    radial-gradient(circle at 85% 20%, var(--bg-glow-2), transparent 40%),
    var(--bg);
  border-radius: 8px;
  min-height: calc(100vh - 28px);
  transition: background .25s ease;
}

/* Circus theme: classic red/white/blue awning stripes, moving, behind a vivid
   multi-color "tent canvas" background. The stripes are built as a horizontal
   (non-diagonal) repeating pattern on an oversized pseudo-element, then rotated
   as one rigid shape via transform. This guarantees a perfect seam-free loop —
   a diagonal gradient animated with background-position can never line up
   exactly at the loop point (it needs an irrational pixel offset to do so),
   which is what caused the visible broken line before. A horizontal pattern
   only ever needs to travel exactly one whole stripe-width to loop seamlessly,
   and rotating the *whole already-seamless* pattern afterwards can't break it. */
[data-theme="circus"] .frame-inner{
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(100deg,
      #A6362F 0%, #A6362F 20%,
      #C9862B 20%, #C9862B 40%,
      #6B4FA0 40%, #6B4FA0 60%,
      #2E7DA6 60%, #2E7DA6 80%,
      #4E8F3A 80%, #4E8F3A 100%
    ),
    radial-gradient(circle at 15% 0%, var(--bg-glow-1), transparent 45%),
    radial-gradient(circle at 85% 20%, var(--bg-glow-2), transparent 40%);
}
[data-theme="circus"] .frame-inner::before{
  content: '';
  position: absolute;
  top: -60%; left: -60%;
  width: 220%; height: 220%;
  background: repeating-linear-gradient(90deg,
    rgba(201,48,44,0.32) 0px, rgba(201,48,44,0.32) 40px,
    rgba(255,255,255,0.20) 40px, rgba(255,255,255,0.20) 80px,
    rgba(46,125,166,0.32) 80px, rgba(46,125,166,0.32) 120px
  );
  background-size: 120px 100%;
  transform: rotate(20deg);
  animation: circusStripesX 9s linear infinite;
  pointer-events: none;
  z-index: 0;
}
[data-theme="circus"] .frame-inner > *{ position: relative; z-index: 1; }
@keyframes circusStripesX{
  0%{ background-position-x: 0; }
  100%{ background-position-x: 120px; }
}

/* Circus theme: the outer page background slowly cycles through classic circus colors */
[data-theme="circus"] body{
  animation: circusBodyBg 16s ease-in-out infinite;
}
@keyframes circusBodyBg{
  0%{ background-color: #C9302C; }
  33%{ background-color: #F0AD4E; }
  66%{ background-color: #2E7DA6; }
  100%{ background-color: #C9302C; }
}
.topbar{
  max-width:760px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 16px 0;
}
.topbar .brand{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
  color:var(--muted);letter-spacing:.02em;
  cursor:pointer;
}
.topbar .brand:hover{color:var(--text);}
.topbar-controls{display:flex;gap:8px;}
.selector{
  background:var(--panel-2);
  color:var(--text);
  border:2px solid var(--line);
  border-radius:999px;
  padding:7px 10px;
  font-size:13px;
  font-weight:600;
  width:auto;
  cursor:pointer;
}
#app{max-width:1040px;margin:0 auto;padding:16px 16px 60px;}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;}
.display{font-family:'Archivo Black',sans-serif;}
.mono{font-family:'Space Mono',monospace;}
.muted{color:var(--muted);}
button{font-family:'Work Sans',sans-serif;cursor:pointer;border:none;}
input, textarea{font-family:'Work Sans',sans-serif;}
.btn{
  background:var(--pink);
  color:var(--btn-text);
  font-weight:700;
  padding:13px 20px;
  border-radius:999px;
  font-size:15px;
  transition:transform .12s ease, box-shadow .12s ease;
  box-shadow:0 6px 0 var(--pink-shadow);
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--pink-shadow);}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;transform:none;}
.btn-secondary{
  background:transparent;
  color:var(--text);
  border:2px solid var(--line);
  padding:11px 18px;
  border-radius:999px;
  font-weight:600;
}
.btn-teal{background:var(--teal);color:var(--btn-text-teal);box-shadow:0 6px 0 var(--teal-shadow);}
.btn-teal:active{box-shadow:0 2px 0 var(--teal-shadow);}
.btn-danger{background:var(--danger);color:var(--btn-text-danger);box-shadow:0 6px 0 var(--danger-shadow);}
.btn-small{padding:8px 14px;font-size:13px;border-radius:999px;}
input[type=text], input[type=number], textarea, select{
  background:var(--bg-2);
  border:2px solid var(--line);
  color:var(--text);
  border-radius:10px;
  padding:12px 14px;
  font-size:15px;
  width:100%;
  outline:none;
}
input[type=text]:focus, textarea:focus, select:focus{border-color:var(--pink);}
.card{
  background:var(--panel);
  border-radius:var(--radius);
  padding:20px;
  box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.05);
}
.stack{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.center{text-align:center;}
.eyebrow{
  font-family:'Space Mono',monospace;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  color:var(--yellow);
}
.hero{padding:36px 8px 18px;text-align:center;}
.hero .title{font-size:38px;line-height:1.05;}
.hero .title span{color:var(--pink);}
.ticket{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--yellow);
  color:var(--btn-text);
  padding:10px 18px;
  border-radius:10px;
  font-family:'Space Mono',monospace;
  font-weight:700;
  font-size:22px;
  letter-spacing:.08em;
  position:relative;
  box-shadow:0 6px 0 var(--yellow-shadow);
}
.ticket::before,.ticket::after{
  content:'';position:absolute;top:50%;transform:translateY(-50%);
  width:16px;height:16px;background:var(--bg);border-radius:50%;
}
.ticket::before{left:-8px;}
.ticket::after{right:-8px;}
.toast{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);
  background:var(--danger);color:#2A0A0A;font-weight:700;
  padding:10px 18px;border-radius:10px;box-shadow:var(--shadow);
  z-index:200;font-size:14px;max-width:90%;text-align:center;
}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;}
.cat-btn{
  background:var(--bg-2);border:2px solid var(--line);border-radius:12px;
  padding:14px 8px;color:var(--text);text-align:center;font-weight:600;font-size:14px;
}
.cat-btn.selected{border-color:var(--teal);background:rgba(73,217,201,0.12);}
.cat-btn .icon{font-size:26px;display:block;margin-bottom:6px;}
.player-list{display:flex;flex-direction:column;gap:8px;}
.player-row{
  display:flex;align-items:center;gap:10px;background:var(--bg-2);
  padding:10px 12px;border-radius:10px;
}
.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--pink);
  display:flex;align-items:center;justify-content:center;font-weight:700;
  color:var(--btn-text);flex-shrink:0;font-size:14px;
}
.avatar-swatch{
  width:32px;height:32px;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;padding:0;flex-shrink:0;
}
.avatar-swatch.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--panel), 0 0 0 4px var(--text);}
.btn-secondary.selected{background:var(--panel-2);box-shadow:0 0 0 2px var(--teal);}
.avatar-draw-canvas{
  width:220px;height:220px;border-radius:50%;border:2px solid var(--line);
  touch-action:none;cursor:crosshair;align-self:center;background:#fff;
}
.profile-section{
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:14px;gap:10px;
}
.profile-section-title{font-weight:800;font-size:13px;letter-spacing:.02em;}
.tavern-door{
  width:100%;padding:28px 16px;border-radius:16px;
  background:linear-gradient(180deg, #4a2a1a, #2e1810);
  border:2px solid #6b3d22;color:#f2d9b8;
  font-weight:800;cursor:pointer;box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.tavern-door:hover{filter:brightness(1.15);}
.tavern-door .tavern-door-icon{font-size:44px;line-height:1;}
.tavern-door .tavern-door-label{font-size:18px;letter-spacing:.03em;}
.tavern-door .tavern-door-sub{font-size:11px;font-weight:600;opacity:.75;letter-spacing:.05em;}
.tavern-disclaimer{
  font-size:12px;max-width:420px;margin:6px auto 0;
  background:rgba(0,0,0,0.25);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;display:inline-block;
}
.shop-slot{
  width:100%;padding:20px 16px;border-radius:16px;position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:2px dashed var(--line);color:var(--text);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.shop-slot-badge{
  position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;
  background:var(--yellow);color:var(--btn-text);padding:2px 8px;
  border-radius:999px;letter-spacing:.04em;
}
.shop-slot-icon{font-size:32px;line-height:1;}
.shop-slot-label{font-weight:800;font-size:15px;}
.shop-slot-sub{font-size:11px;color:var(--muted);}
.ad-slot{
  width:100%;padding:22px 10px;border-radius:12px;
  border:1px dashed var(--line);background:var(--panel-2);
  color:var(--muted);font-size:11px;text-align:center;letter-spacing:.03em;
  box-sizing:border-box;
}
.chat-room-tabs{
  display:flex;flex-direction:column;gap:8px;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:10px;box-shadow:var(--shadow);
}
.chat-tab{
  position:relative;width:38px;height:38px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--text);
  font-size:17px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
}
.chat-tab.selected{border-color:var(--teal);background:rgba(73,217,201,0.15);}
.chat-tab:disabled{opacity:.4;cursor:not-allowed;}
.chat-tab .notif-dot{
  position:absolute;top:-3px;right:-3px;width:10px;height:10px;
  background:var(--danger);border-radius:50%;border:2px solid var(--panel);
}
.chat-friends-picker{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1;}
.chat-friends-picker-row{
  display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;
  cursor:pointer;position:relative;
}
.chat-friends-picker-row:hover{background:var(--panel-2);}
.host-tag{
  font-size:10px;background:var(--yellow);color:var(--btn-text);padding:2px 8px;
  border-radius:999px;font-weight:700;letter-spacing:.05em;
}
.player-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.tag-card{
  position:relative;background:var(--panel-2);border-radius:12px;
  padding:16px 10px 12px;text-align:center;border:1px solid rgba(255,255,255,0.06);
}
.tag-card .tape{
  position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:38px;height:14px;background:rgba(255,216,102,0.6);border-radius:2px;
}
.tag-card .who{font-size:11px;color:var(--muted);margin-bottom:6px;font-weight:600;}
.tag-card .portrait{font-size:38px;line-height:1;margin-bottom:8px;filter:drop-shadow(0 3px 6px rgba(0,0,0,0.35));}
.tag-card.self .portrait{opacity:.55;}
.tag-card .item{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;}
.tag-card.self .item{color:var(--muted);font-style:italic;}
.tag-card.done{border-color:var(--teal);}
.tag-card.left-player{opacity:.45;filter:grayscale(60%);}
.tag-card.current-turn{
  border-color:var(--teal);
  animation: turnGlow 1.6s ease-in-out infinite;
}
@keyframes turnGlow{
  0%,100%{ box-shadow:0 0 0 3px var(--teal), 0 0 10px rgba(73,217,201,.35); }
  50%{ box-shadow:0 0 0 3px var(--teal), 0 0 20px rgba(73,217,201,.65); }
}
.turn-banner{
  display:flex;align-items:center;gap:10px;justify-content:center;
  background:var(--panel-2);border:2px solid var(--teal);border-radius:999px;
  padding:10px 18px;font-weight:700;font-size:14px;
}
.turn-banner.turn-pop{ animation: turnPop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes turnPop{
  0%{ transform:scale(0.75) translateY(-8px); opacity:0; }
  60%{ transform:scale(1.06) translateY(0); opacity:1; }
  100%{ transform:scale(1); }
}
.turn-banner .avatar{width:26px;height:26px;font-size:12px;}
.tag-card .check{position:absolute;top:-8px;right:-6px;background:var(--teal);color:var(--btn-text-teal);border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;}
.log{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding-right:4px;}
.log-filter-tabs{display:flex;gap:4px;background:var(--bg-2);border-radius:999px;padding:3px;}
.log-filter-tab{background:transparent;border:none;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;transition:background .15s ease,color .15s ease;}
.log-filter-tab.selected{background:var(--panel);color:var(--text);}
.log-filter-tab:hover:not(.selected){color:var(--text);}
.verified-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:var(--teal);color:var(--btn-text-teal);
  font-size:9px;font-weight:900;line-height:1;
  margin-left:3px;vertical-align:middle;
}
.log-entry{background:var(--bg-2);border-radius:10px;padding:9px 12px;font-size:14px;}
.log-entry .name{font-weight:700;color:var(--yellow);}
.log-entry.answer{margin-left:20px;background:transparent;border:1px dashed var(--line);}
.vote-row{display:flex;align-items:center;gap:12px;margin:8px 0;}
.pie{width:44px;height:44px;border-radius:50%;flex-shrink:0;background:var(--line);border:1px solid var(--line);}
.vote-legend{font-size:12px;display:flex;flex-direction:column;gap:2px;}
.vote-legend .legend-yes{color:var(--teal);font-weight:700;}
.vote-legend .legend-no{color:var(--danger);font-weight:700;}
.vote-legend .legend-na{color:var(--muted);font-weight:700;}
.vote-legend .legend-empty{color:var(--muted);}
.my-vote-pill{display:inline-flex;align-items:center;gap:8px;}
.log-entry.guess.correct{background:rgba(73,217,201,0.16);border:1px solid var(--teal);}
.log-entry.guess.wrong{background:rgba(255,107,107,0.1);border:1px solid rgba(255,107,107,0.3);}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;margin-left:6px;}
.pill.yes{background:var(--teal);color:var(--btn-text-teal);}
.pill.no{background:var(--danger);color:var(--btn-text-danger);}
.pill.na{background:var(--muted);color:var(--bg);}
.divider{height:1px;background:var(--line);margin:6px 0;}
.overlay{
  position:fixed;inset:0;background:rgba(15,8,28,0.85);
  display:flex;align-items:center;justify-content:center;z-index:150;padding:20px;
}
.overlay-card{max-width:420px;width:100%;}
.profile-modal-card{
  max-width:760px;width:100%;
  display:flex;flex-direction:column;gap:14px;
}
.profile-sections-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  align-items:start;
}
@media (max-width:820px){
  .profile-modal-card{max-width:480px;}
  .profile-sections-grid{grid-template-columns:1fr;}
}
.rank-row{display:flex;align-items:center;gap:10px;padding:8px 0;}
.rank-num{font-family:'Space Mono',monospace;font-weight:700;color:var(--yellow);width:24px;}
footer.foot{text-align:center;margin-top:24px;}
a.link-btn{color:var(--teal);text-decoration:underline;cursor:pointer;font-size:13px;}
.step-label{font-size:13px;color:var(--muted);margin-bottom:4px;display:block;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px;}

/* --- hub / game picker --- */
.hub-hero{text-align:center;padding:30px 8px 8px;}
.hub-hero h1{font-size:34px;}
.hub-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  max-width:560px;margin:26px auto 0;
}
@media (max-width:480px){ .hub-grid{grid-template-columns:1fr;} }
.game-card{
  position:relative;
  background:var(--panel-2);
  border:2px solid var(--line);
  border-radius:12px;
  padding:22px 16px;
  text-align:center;
  font-weight:600;
  font-size:15px;
  color:var(--text);
  transition:transform .12s ease, border-color .12s ease;
}
.game-card .emoji{font-size:26px;display:block;margin-bottom:8px;}
.game-card:not(.locked):hover{transform:translateY(-2px);border-color:var(--teal);}
.game-card.locked{opacity:.55;cursor:default;}
.game-card .badge{
  position:absolute;top:-8px;right:8px;
  background:var(--yellow);color:var(--btn-text);
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;
  letter-spacing:.03em;
}
.coming-soon-wrap{text-align:center;padding:60px 16px;}
.coming-soon-wrap .big-emoji{font-size:52px;display:block;margin-bottom:12px;}
.hub-tools-section{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);}
.hub-tools-title{font-size:16px;color:var(--muted);text-align:center;margin-bottom:14px;font-weight:600;}
.hub-tools-grid{max-width:280px;}

/* --- app shell: side panels (account, banner, chat) --- */
.app-shell{display:flex;align-items:flex-start;justify-content:center;gap:16px;padding:14px;max-width:1600px;margin:0 auto;}
.app-shell .frame{flex:1;min-width:0;max-width:1100px;padding:0;}
.left-outer{display:flex;gap:8px;align-items:flex-start;flex-shrink:0;}
.left-column{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}
.left-column .side-panel{width:100%;}
.right-column{width:280px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;}
.right-column .side-panel{width:100%;}
.side-panel{
  width:280px;flex-shrink:0;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:14px;
  max-height:calc(100vh - 28px);
  position:relative;
}
.side-panel h3{font-size:14px;margin:0;}
.panel-toggle-btn{display:none;}
.notification-badge{
  position:absolute;top:-8px;right:-8px;
  background:var(--danger);color:#fff;
  border-radius:999px;min-width:20px;height:20px;padding:0 5px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;line-height:1;
  box-shadow:0 0 0 2px var(--panel);
}

/* banner ticker */
.banner-ticker{
  background:var(--bg-2);border-radius:10px;padding:12px 14px;
  min-height:52px;display:flex;align-items:center;font-size:13px;
  position:relative;overflow:hidden;
}
.banner-ticker .tip-text{transition:opacity .3s ease;}
.banner-ticker .tip-text.fading{opacity:0;}

/* chat */
.chat-box{display:flex;flex-direction:column;flex:1;min-height:0;gap:8px;}
.chat-room-select{width:100%;padding:6px 8px;font-size:12px;border-radius:8px;background:var(--bg-2);border:1px solid var(--line);color:var(--text);}
.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;max-height:340px;}
.chat-msg{font-size:12.5px;line-height:1.4;}
.chat-msg .chat-name{font-weight:700;}
.chat-input-row{display:flex;gap:6px;}
.chat-input-row input{flex:1;padding:8px 10px;font-size:13px;background:#fff;color:#111;border:1px solid var(--line);border-radius:8px;}

/* account panel */
.account-loggedin{display:flex;align-items:center;gap:10px;}
.account-loggedin .avatar{width:40px;height:40px;font-size:15px;}
.account-name{font-weight:700;font-size:14px;}
.account-actions{display:flex;flex-direction:column;gap:8px;}
.auth-form{display:flex;flex-direction:column;gap:8px;}
.auth-form input{padding:10px 12px;}

/* friends */
.friend-row{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;}
.friend-row .avatar{width:28px;height:28px;font-size:11px;}
.friend-online-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex-shrink:0;}
.friend-online-dot.online{background:var(--teal);}

/* mobile: side panels become slide-in overlays opened via topbar buttons */
/* Sivupalstat (chat + tili) ovat kiinteän levyisiä (280px, eivät kutistu), joten
   3-palstalayout tarvitsee oikeasti noin 1180px ollakseen mukava. Vanha 980px-raja
   jätti "ei-kenenkään-maan" välille jossa mikään ei mahtunut kunnolla — nostettu 1200px:ään. */
@media (max-width: 1200px){
  .app-shell{display:block;padding:0;min-width:360px;}
  .app-shell .frame{max-width:none;}
  .right-column{width:auto;display:block;}
  .left-column{width:auto;display:block;}
  .left-outer{display:block;}

  /* .chat-room-tabs (maailma/lippu/juhla/kaverit-ikonit) oli aiemmin AINA näkyvissä
     aivan sivun huipulla, koska se on DOM:issa .frame:n (varsinaisen sisällön/brändin)
     EDELLÄ, ja koko .app-shell pinoutuu pystysuoraan mobiilissa. Piilotetaan se
     oletuksena ja näytetään vain kun chat-paneeli on oikeasti auki, kiinnitettynä
     silloin paneelin omaan yläreunaan — ei enää koko sivun päällä kelluen.  */
  .chat-room-tabs{display:none;}
  .left-outer:has(.side-panel.open) .chat-room-tabs{
    display:flex;flex-direction:row;justify-content:center;gap:8px;
    position:fixed;top:0;left:0;right:0;z-index:251;
    background:var(--panel);padding:10px;margin:0;
    border-bottom:1px solid var(--line);
  }
  .left-outer:has(.side-panel.open) #leftPanel{padding-top:58px;}

  .side-panel{
    display:none;position:fixed;inset:0;z-index:250;
    width:100%;max-height:100vh;border-radius:0;
    overflow-y:auto;
  }
  .side-panel.open{display:flex;}
  .side-panel .panel-close-btn{display:inline-flex;}
  .panel-toggle-btn{display:inline-flex;}

  /* Yläpalkki: brändi pysyy aina omana rivinään vasemmassa yläkulmassa (ei keskitetä
     sitä), ja kaikki ohjaimet (chat/ääni/kieli/teema/tili) ryhmittyvät omalle
     riville sen alle, keskitettynä. Aiempi flex-wrap+space-between-yhdistelmä
     jätti yksittäiset rivit vasemmalle koska space-between ei keskitä yhtä
     elementtiä rivillä. */
  .topbar{flex-direction:column;align-items:flex-start;gap:10px;row-gap:10px;padding:14px 12px 0;}
  .topbar-controls{width:100%;justify-content:center;flex-wrap:wrap;}
}
.panel-close-btn{display:none;align-self:flex-end;background:transparent;color:var(--muted);font-size:20px;padding:2px 8px;}

/* --- draw & guess --- */
.dg-canvas-wrap{
  position:relative;background:#fff;border-radius:12px;overflow:hidden;
  border:2px solid var(--line);touch-action:none;
}
.dg-canvas-wrap canvas{display:block;width:100%;height:auto;cursor:crosshair;}
.dg-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.dg-mode-tabs{display:flex;gap:4px;background:var(--bg-2);border-radius:10px;padding:3px;}
.dg-mode-tab{background:transparent;border:none;border-radius:8px;padding:6px 10px;font-size:16px;cursor:pointer;line-height:1;}
.dg-mode-tab.selected{background:var(--panel);box-shadow:0 0 0 2px var(--teal);}
.dg-swatches{display:flex;flex-wrap:wrap;gap:6px;}
.dg-swatch{
  width:26px;height:26px;border-radius:50%;border:2px solid var(--line);
  cursor:pointer;padding:0;
}
.dg-swatch.selected{border-color:var(--text);box-shadow:0 0 0 2px var(--teal);}
.dg-slider-row{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--muted);}
.dg-slider-row input[type=range]{flex:1;}
.dg-word-choice{
  background:var(--panel-2);border:2px solid var(--line);border-radius:12px;
  padding:16px;text-align:center;font-weight:700;font-size:16px;color:var(--text);
}
.dg-word-choice:hover{border-color:var(--teal);}
.dg-guess-entry{background:var(--bg-2);border-radius:10px;padding:8px 12px;font-size:14px;}
.dg-guess-entry.correct{background:rgba(73,217,201,0.16);border:1px solid var(--teal);color:var(--teal);font-weight:700;}
.dg-guess-entry .close-tag{color:var(--yellow);font-weight:700;font-size:12px;margin-left:6px;}
.dg-timer{font-family:'Space Mono',monospace;font-weight:700;font-size:15px;}
.dg-timer.low{color:var(--danger);}

/* --- memory game --- */
.mem-grid{display:grid;gap:8px;max-width:100%;overflow-x:auto;padding-bottom:4px;}
.mem-card{
  aspect-ratio:1;min-width:72px;min-height:72px;border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--panel-2);border:2px solid var(--line);
  transition:transform .15s ease;
  position:relative;overflow:hidden;
  padding:6px;text-align:center;
}
.mem-card:hover:not(.mem-flipped):not(.mem-matched){border-color:var(--teal);}
.mem-card.mem-flipped{background:var(--bg-2);border-color:var(--yellow);}
.mem-card.mem-matched{background:rgba(73,217,201,0.15);border-color:var(--teal);cursor:default;opacity:.75;}
.mem-card-visual{
  flex:1;width:100%;min-height:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:6px;overflow:hidden;
}
.mem-card-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.mem-card .mem-emoji{font-size:clamp(18px,4vw,40px);line-height:1;}
.mem-card .mem-name{font-size:clamp(7px,1.3vw,12px);font-weight:700;color:var(--text);line-height:1.1;word-break:break-word;max-width:100%;flex-shrink:0;}
.mem-card .mem-back{font-size:clamp(16px,3.2vw,28px);color:var(--muted);}

/* --- admin-specific --- */
.admin-cat-card{background:var(--panel);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);}
.admin-cat-card .head{display:flex;align-items:center;gap:10px;}
.admin-cat-card .icon-big{font-size:26px;}
.item-chip{display:inline-block;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:13px;margin:3px;}
nav.admin-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}

/* ---------- "They Plot to Destroy Me" ---------- */
.plot-table-scene{
  position:relative;width:100%;padding-top:62%;margin:6px 0 44px;
}
.plot-table-oval{
  position:absolute;left:8%;right:8%;top:8%;bottom:8%;border-radius:50%;
  box-shadow:0 14px 40px rgba(0,0,0,0.45);
  display:flex;align-items:center;justify-content:center;
}
.plot-table-cloth{
  position:absolute;inset:11%;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 4px 16px rgba(0,0,0,0.35);
}
.plot-tracks-on-table{display:flex;flex-direction:column;gap:10px;width:78%;}
.plot-seats{position:absolute;inset:0;}
.plot-seat{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  width:92px;text-align:center;
}
.plot-seat.is-me{filter:drop-shadow(0 0 8px var(--teal));}
.plot-seat-crown{position:absolute;top:-20px;font-size:17px;}
.plot-seat-name{
  font-size:11px;font-weight:700;color:var(--text);
  background:var(--panel);border-radius:999px;padding:2px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:92px;
  box-shadow:var(--shadow);
}
.plot-seat-role{
  font-size:9px;font-weight:800;color:var(--danger);
  background:var(--panel);border-radius:999px;padding:1px 6px;
}
.plot-track{display:flex;flex-direction:column;gap:6px;}
.plot-track-label{
  color:#fff;font-weight:800;font-size:11px;letter-spacing:.03em;
  background:rgba(0,0,0,0.45);border-radius:999px;padding:2px 10px;display:inline-block;width:fit-content;
}
.plot-track-dots{display:flex;gap:6px;}
.plot-track-dot{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,0.4);background:rgba(0,0,0,0.25);flex-shrink:0;}
.plot-track-dot.filled.advance{background:var(--yellow);border-color:var(--yellow);}
.plot-track-dot.filled.expose{background:var(--danger);border-color:var(--danger);}
.plot-my-role{
  background:var(--panel-2);border:2px solid var(--teal);border-radius:10px;
  padding:8px 12px;color:var(--text);font-size:13px;text-align:center;
}
.plot-card{
  width:120px;padding:16px 10px;border-radius:12px;cursor:pointer;
  background:var(--panel-2);border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
}
.plot-card:hover{border-color:var(--teal);}
.plot-card-icon{font-size:28px;}
.plot-card-name{font-size:12px;font-weight:700;}
.plot-played-card{
  display:inline-block;padding:10px 18px;border-radius:10px;font-weight:800;font-size:15px;
  background:var(--panel-2);border:2px solid var(--line);
}
.plot-played-card.advance{border-color:var(--yellow);color:var(--yellow);}
.plot-played-card.expose{border-color:var(--danger);color:var(--danger);}
.plot-chain-trail{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px;
  background:var(--panel-2);border-radius:999px;padding:8px 14px;
}
.plot-chain-step{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
}
.plot-chain-step.current{box-shadow:0 0 0 2px var(--teal);border-radius:50%;}
.plot-chain-step.empty{
  width:22px;height:22px;border-radius:50%;border:2px dashed var(--line);
  color:var(--muted);font-size:11px;font-weight:800;
}
.plot-chain-arrow{color:var(--muted);font-size:12px;}

/* ---------- Casino ---------- */
.casino-hud{display:flex;gap:8px;flex-wrap:wrap;background:var(--panel-2);border-radius:10px;padding:8px 12px;}
.casino-hud-item{display:flex;flex-direction:column;gap:2px;min-width:70px;}
.casino-hud-label{font-size:10px;font-weight:700;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;}
.casino-hud-value{font-size:16px;font-weight:800;color:var(--text);}
.casino-hud-value.casino-hud-danger{color:var(--danger);}
.casino-hud-item.casino-hud-pending{background:rgba(255,150,60,0.15);border-radius:8px;padding:4px 8px;}
.casino-canvas-wrap{position:relative;border-radius:12px;overflow:hidden;border:2px solid var(--line);}
.casino-canvas-wrap canvas{display:block;width:100%;height:auto;}
.casino-overlay-layer{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;padding:14px;}
.casino-overlay-layer > *{pointer-events:auto;}
.casino-prompt{
  background:rgba(20,14,8,0.9);color:#f2d9b8;border:2px solid var(--yellow);
  border-radius:999px;padding:10px 20px;font-weight:800;font-size:13px;cursor:pointer;
  margin-bottom:10px;
}
.casino-prompt-panel{
  background:rgba(20,14,8,0.95);color:#f2d9b8;border:2px solid var(--line);
  border-radius:14px;padding:14px;max-width:340px;width:100%;
  display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;
}
.casino-buy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;width:100%;}
.casino-buy-grid .btn-secondary{white-space:normal;line-height:1.3;padding:8px 6px;}
.casino-machine-overlay{
  position:absolute;inset:0;background:rgba(10,7,4,0.88);
  display:flex;align-items:center;justify-content:center;pointer-events:auto;
}
.casino-machine-card{
  background:var(--panel);border-radius:16px;padding:22px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
  max-width:340px;width:90%;
}
.casino-reels{display:flex;flex-direction:column;gap:6px;align-items:center;}
.casino-reels.casino-reels-spinning .casino-reel{animation:casino-spin-blur .08s linear infinite;}
@keyframes casino-spin-blur{0%{transform:translateY(-2px);}50%{transform:translateY(2px);}100%{transform:translateY(-2px);}}
.casino-slot-row{display:flex;gap:6px;justify-content:center;border-radius:8px;padding:3px;}
.casino-reel-win{border-color:var(--yellow) !important;background:rgba(255,215,60,0.25) !important;box-shadow:0 0 8px rgba(255,215,60,0.6);}
.casino-reel{
  width:42px;height:42px;border-radius:8px;background:var(--panel-2);border:2px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;
}
.casino-pending{border-color:var(--yellow) !important;box-shadow:0 0 0 2px rgba(255,215,60,0.4);}
.casino-win-text{color:var(--yellow);font-weight:800;font-size:15px;}
.casino-roulette-result{
  width:70px;height:70px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:#fff;margin:0 auto;
}
.casino-roulette-result.red{background:#b8342f;}
.casino-roulette-result.black{background:#1a1a1a;}
.casino-roulette-result.green{background:#1e6b3a;}
.casino-roulette-wheel{
  width:90px;height:90px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:conic-gradient(from 0deg,
    #b8342f 0deg 9.7deg, #1a1a1a 9.7deg 19.4deg, #b8342f 19.4deg 29.1deg, #1a1a1a 29.1deg 38.8deg,
    #b8342f 38.8deg 48.5deg, #1a1a1a 48.5deg 58.2deg, #b8342f 58.2deg 67.9deg, #1a1a1a 67.9deg 77.6deg,
    #b8342f 77.6deg 87.3deg, #1a1a1a 87.3deg 97deg, #1e6b3a 97deg 106.7deg, #b8342f 106.7deg 116.4deg,
    #1a1a1a 116.4deg 126.1deg, #b8342f 126.1deg 135.8deg, #1a1a1a 135.8deg 145.5deg, #b8342f 145.5deg 155.2deg,
    #1a1a1a 155.2deg 164.9deg, #b8342f 164.9deg 174.6deg, #1a1a1a 174.6deg 184.3deg, #b8342f 184.3deg 194deg,
    #1a1a1a 194deg 203.7deg, #b8342f 203.7deg 213.4deg, #1a1a1a 213.4deg 223.1deg, #b8342f 223.1deg 232.8deg,
    #1a1a1a 232.8deg 242.5deg, #b8342f 242.5deg 252.2deg, #1a1a1a 252.2deg 261.9deg, #b8342f 261.9deg 271.6deg,
    #1a1a1a 271.6deg 281.3deg, #b8342f 281.3deg 291deg, #1a1a1a 291deg 300.7deg, #b8342f 300.7deg 310.4deg,
    #1a1a1a 310.4deg 320.1deg, #b8342f 320.1deg 329.8deg, #1a1a1a 329.8deg 339.5deg, #b8342f 339.5deg 349.2deg,
    #1a1a1a 349.2deg 360deg);
  padding:8px;box-sizing:border-box;
}
.casino-roulette-wheel-spinning{animation:casino-wheel-spin 0.7s linear infinite;}
@keyframes casino-wheel-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
.casino-roulette-wheel .casino-roulette-result{margin:0;width:56px;height:56px;font-size:20px;border:3px solid var(--panel);}
.casino-rank-num{font-weight:800;color:var(--yellow);min-width:22px;}
.casino-poker-hand{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;}
.casino-poker-card{
  width:52px;height:74px;border-radius:8px;background:#1c1c1c;border:2px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  cursor:pointer;position:relative;flex-shrink:0;
}
.casino-poker-card-held{border-color:var(--yellow);box-shadow:0 0 0 2px rgba(255,215,60,0.4);}
.casino-poker-rank{font-size:20px;font-weight:800;}
.casino-poker-suit{font-size:18px;}
.casino-poker-held-label{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-size:9px;font-weight:800;color:var(--yellow);white-space:nowrap;}
.casino-bj-card{
  animation: casino-card-deal .4s ease-out backwards;
}
@keyframes casino-card-deal{
  0%{transform:translateY(-30px) rotate(-8deg);opacity:0;}
  100%{transform:translateY(0) rotate(0deg);opacity:1;}
}

/* ---------- Buy Me a Coffee -kelluva nappi ---------- */
.bmc-float-btn{
  position:fixed;bottom:16px;right:16px;z-index:90;
  display:flex;align-items:center;gap:0;
  height:42px;padding:0;border-radius:999px;
  background:var(--panel);border:1.5px solid var(--line);
  box-shadow:var(--shadow);
  text-decoration:none;color:var(--text);
  overflow:hidden;
  opacity:0.8;
  transition:opacity .2s ease, padding-right .25s ease, box-shadow .2s ease;
}
.bmc-icon{
  width:42px;height:42px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:19px;
}
.bmc-label{
  max-width:0;overflow:hidden;white-space:nowrap;
  font-size:13px;font-weight:700;
  transition:max-width .25s ease;
}
.bmc-float-btn:hover{opacity:1;box-shadow:0 6px 18px rgba(0,0,0,0.25);}
.bmc-float-btn:hover .bmc-label{max-width:140px;padding-right:14px;}
@media (max-width:600px){
  .bmc-float-btn{bottom:12px;right:12px;}
  .bmc-label{display:none;}
}

/* ---------- Sivun footer ---------- */
.site-footer{
  max-width:760px;margin:40px auto 0;padding:16px;
  border-top:1px solid var(--line);
}
.site-footer-inner{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px;font-size:12.5px;color:var(--muted);text-align:center;
}
.site-footer-sep{opacity:0.4;}
.site-footer-link{color:var(--muted);text-decoration:none;}
.site-footer-link:hover{color:var(--text);text-decoration:underline;}

/* ---------- Tourney of Raamu ---------- */
.tourney-chicken-btn{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:var(--panel-2);border:2px solid var(--line);border-radius:12px;
  padding:10px 14px;cursor:pointer;min-width:60px;
  transition:border-color .15s ease, background .15s ease;
}
.tourney-chicken-btn:hover:not(:disabled){border-color:var(--teal);}
.tourney-chicken-btn.selected{border-color:var(--yellow);background:rgba(255,215,60,0.15);}
.tourney-chicken-btn.tourney-chicken-lost{border-color:var(--danger);background:rgba(255,107,107,0.15);}
.tourney-chicken-btn.tourney-chicken-won{border-color:#ffd93d;background:rgba(255,217,61,0.18);}
.tourney-chicken-btn:disabled{opacity:0.6;cursor:default;}

.tourney-race-track{position:relative;height:200px;padding:10px 0;}
.tourney-race-lane{
  position:relative;height:28px;margin-bottom:4px;
  border-bottom:1px dashed var(--line);
}
.tourney-race-chicken{
  position:absolute;left:0;top:0;font-size:24px;
  animation-name:tourney-race-run;animation-timing-function:linear;animation-fill-mode:forwards;
}
@keyframes tourney-race-run{
  0%{left:0%;}
  100%{left:calc(100% - 30px);}
}
.tourney-race-finish-line{
  position:absolute;right:24px;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,#fff 0 6px,#222 6px 12px);
  opacity:0.6;
}

.tourney-hide-map{
  position:relative;width:100%;background:var(--panel-2);border-radius:10px;
  border:1px solid var(--line);overflow:hidden;margin-top:8px;
}
.tourney-hide-walls{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:1;
}
.tourney-hide-walls line{
  stroke:var(--text);stroke-width:6;stroke-linecap:square;opacity:0.85;
}
.tourney-hide-room{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:1px;
  pointer-events:none;z-index:1;
}
.tourney-hide-room-icon{font-size:22px;opacity:0.7;}
.tourney-hide-room-label{
  font-size:10px;color:var(--muted);background:rgba(0,0,0,0.35);
  padding:1px 5px;border-radius:6px;white-space:nowrap;
}
.tourney-hide-room-attacked{
  animation:tourney-room-shake 0.4s ease-in-out 2;
}
.tourney-hide-room-attacked .tourney-hide-room-icon{
  font-size:28px;filter:drop-shadow(0 0 6px rgba(255,60,60,0.8));
}
.tourney-hide-room-occupied .tourney-hide-room-icon{
  filter:drop-shadow(0 0 5px rgba(255,217,61,0.85));
}
.tourney-hide-room-occupied{
  background:rgba(255,217,61,0.12);border-radius:10px;padding:4px 8px;
}
@keyframes tourney-room-shake{
  0%,100%{transform:translate(-50%,-50%) rotate(0deg);}
  25%{transform:translate(-50%,-50%) rotate(-6deg);}
  75%{transform:translate(-50%,-50%) rotate(6deg);}
}
.tourney-hide-player{
  position:absolute;transform:translate(-50%,-50%);
  transition:left 0.06s linear, top 0.06s linear;
  z-index:2;
}
.tourney-hide-monster{
  position:absolute;left:10%;top:85%;font-size:34px;
  transform:translate(-50%,-50%);
  animation:tourney-monster-approach 1.5s ease-in forwards;
  z-index:3;filter:drop-shadow(0 0 8px rgba(255,60,60,0.6));
}
@keyframes tourney-monster-approach{
  0%{left:10%;top:90%;transform:translate(-50%,-50%) scale(0.8);}
  100%{left:var(--tx);top:var(--ty);transform:translate(-50%,-50%) scale(1.4);}
}

.tourney-press-btn{
  width:52px;height:52px;border-radius:12px;border:3px solid rgba(255,255,255,0.25);
  background:var(--btncolor);cursor:pointer;font-size:22px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .1s ease;
}
.tourney-press-btn:hover:not(:disabled){transform:scale(1.08);}
.tourney-press-btn:disabled{cursor:default;}
.tourney-press-btn-used{opacity:0.55;}
.tourney-press-btn-dead{opacity:1;border-color:var(--danger);box-shadow:0 0 10px rgba(255,60,60,0.7);}

.tourney-splash{
  min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:20px;
  background:radial-gradient(circle at 50% 45%, rgba(255,80,80,0.18), transparent 65%), var(--bg);
  border-radius:14px;position:relative;overflow:hidden;
}
.tourney-splash-round{
  font-family:'Space Grotesk',sans-serif;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;font-size:13px;color:var(--muted);
  animation:tourney-splash-fade-in 0.5s ease both;
}
.tourney-splash-icon{
  font-size:88px;line-height:1;
  animation:tourney-splash-icon-pop 0.6s cubic-bezier(.2,1.4,.4,1) both, tourney-splash-icon-pulse 1.6s ease-in-out 0.6s infinite;
  filter:drop-shadow(0 0 24px rgba(255,120,80,0.55));
}
.tourney-splash-title{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(28px,7vw,44px);
  letter-spacing:.02em;
  background:linear-gradient(90deg,#ffd93d,#ff6b6b,#ffd93d);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tourney-splash-title-in 0.7s ease 0.15s both, tourney-splash-shine 2.4s linear infinite;
  text-shadow:0 0 30px rgba(255,150,80,0.25);
}
.tourney-splash-sub{
  font-size:14px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;
  animation:tourney-splash-fade-in 0.5s ease 0.5s both;
}
@keyframes tourney-splash-fade-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
@keyframes tourney-splash-icon-pop{
  0%{opacity:0;transform:scale(0.2) rotate(-15deg);}
  70%{transform:scale(1.15) rotate(4deg);}
  100%{opacity:1;transform:scale(1) rotate(0deg);}
}
@keyframes tourney-splash-icon-pulse{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.08);}
}
@keyframes tourney-splash-title-in{
  0%{opacity:0;transform:scale(0.85) translateY(10px);letter-spacing:.3em;}
  100%{opacity:1;transform:scale(1) translateY(0);letter-spacing:.02em;}
}
@keyframes tourney-splash-shine{
  0%{background-position:0% center;}
  100%{background-position:200% center;}
}

/* ---------- Ydinkoodi ---------- */
.tourney-nuclear-code{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px;
}
.tourney-nuclear-digit{
  width:38px;height:46px;display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:800;font-family:'Space Grotesk',monospace;
  background:var(--panel-2);border:2px solid var(--line);border-radius:8px;
  color:var(--muted);
}
.tourney-nuclear-digit.filled{color:var(--teal);border-color:var(--teal);background:rgba(73,217,201,0.12);}
.tourney-nuclear-digit.fail{color:var(--danger);border-color:var(--danger);background:rgba(255,107,107,0.18);}
.tourney-nuclear-btn{
  width:64px;height:64px;border-radius:50%;font-size:26px;font-weight:800;
  background:var(--panel-2);border:3px solid var(--line);cursor:pointer;
  transition:transform .1s ease, border-color .1s ease;
}
.tourney-nuclear-btn:hover{transform:scale(1.08);border-color:var(--teal);}
.tourney-nuclear-btn:active{transform:scale(0.94);}

.tourney-nuclear-laser-scene{
  position:relative;height:220px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:10px;background:radial-gradient(circle at 50% 100%, rgba(255,0,0,0.12), transparent 70%);
}
.tourney-nuclear-laser-target{position:relative;z-index:2;animation:tourney-laser-shake 0.15s linear 8;animation-delay:0.6s;}
.tourney-nuclear-laser-beam{
  position:absolute;top:0;left:50%;width:10px;height:0;
  background:linear-gradient(180deg,#ff2020,#ff8080);
  box-shadow:0 0 20px 6px rgba(255,30,30,0.8);
  transform:translateX(-50%);
  animation:tourney-laser-strike 0.6s ease-in forwards;
}
.tourney-nuclear-laser-flash{
  position:absolute;inset:0;background:#fff;opacity:0;
  animation:tourney-laser-flash 0.25s ease-out 0.6s;
}
@keyframes tourney-laser-strike{0%{height:0;}100%{height:100%;}}
@keyframes tourney-laser-flash{0%{opacity:0.9;}100%{opacity:0;}}
@keyframes tourney-laser-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}

.tourney-nuclear-explosion-scene{
  position:relative;height:220px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border-radius:10px;background:#1a0800;
}
.tourney-nuclear-explosion-icon{
  font-size:70px;position:relative;z-index:2;
  animation:tourney-explosion-icon-pop 0.5s cubic-bezier(.2,1.6,.4,1) both;
}
.tourney-nuclear-shockwave{
  position:absolute;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,200,60,0.9), rgba(255,80,20,0.5) 50%, transparent 75%);
  animation:tourney-shockwave-expand 1.4s ease-out forwards;
}
.tourney-nuclear-shockwave-2{animation-delay:0.25s;}
.tourney-nuclear-flash{
  position:absolute;inset:0;background:#fff;opacity:0;
  animation:tourney-laser-flash 0.4s ease-out 0.15s;
}
@keyframes tourney-explosion-icon-pop{0%{opacity:0;transform:scale(0.3);}100%{opacity:1;transform:scale(1);}}
@keyframes tourney-shockwave-expand{
  0%{width:20px;height:20px;opacity:0.9;}
  100%{width:600px;height:600px;opacity:0;}
}

/* ---------- Yleinen vahinko/kuolema-animaatio (kaikki minipelit) ---------- */
.tourney-dmg-scene{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:180px;position:relative;padding:10px;
}
.tourney-dmg-progress{
  position:absolute;top:6px;right:10px;font-size:12px;color:var(--muted);font-weight:700;
}
.tourney-dmg-avatar{
  position:relative;width:80px;height:80px;display:flex;align-items:center;justify-content:center;
}
.tourney-dmg-avatar .avatar{width:64px;height:64px;}
.tourney-dmg-icon{
  position:absolute;font-size:30px;z-index:2;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.tourney-dmg-name{font-size:12px;color:var(--muted);margin-top:4px;text-align:center;}

/* Kanakisa: kana juoksee sisään oikealta ja "osuu" pelaajaan */
.tourney-dmg-chicken .tourney-dmg-icon{
  right:-6px;top:6px;
  animation:tourney-dmg-chicken-chase 1s ease-in forwards;
}
@keyframes tourney-dmg-chicken-chase{
  0%{transform:translateX(140px) scale(0.8);opacity:0;}
  60%{transform:translateX(0) scale(1.3);opacity:1;}
  100%{transform:translateX(0) scale(1);opacity:1;}
}
.tourney-dmg-chicken .avatar{animation:tourney-dmg-shake 0.35s ease-in-out 0.6s 3;}

/* HIDE: hirviö hyppää pelaajan päälle ylhäältä */
.tourney-dmg-monster .tourney-dmg-icon{
  left:50%;top:-30px;transform:translateX(-50%);
  animation:tourney-dmg-monster-pounce 0.7s cubic-bezier(.5,0,.8,1) forwards;
}
@keyframes tourney-dmg-monster-pounce{
  0%{top:-60px;opacity:0;transform:translateX(-50%) scale(0.6);}
  70%{top:-4px;opacity:1;transform:translateX(-50%) scale(1.5);}
  100%{top:6px;opacity:1;transform:translateX(-50%) scale(1.2);}
}
.tourney-dmg-monster .avatar{animation:tourney-dmg-shake 0.35s ease-in-out 0.6s 3;}

/* Äänestys: myrkkypullo nousee ja "juodaan" */
.tourney-dmg-poison .tourney-dmg-icon{
  left:50%;bottom:-4px;transform:translateX(-50%);
  animation:tourney-dmg-drink 1s ease-in-out forwards;
}
@keyframes tourney-dmg-drink{
  0%{transform:translateX(-50%) translateY(20px) rotate(0deg);opacity:0;}
  40%{transform:translateX(-50%) translateY(-10px) rotate(-25deg);opacity:1;}
  70%{transform:translateX(-50%) translateY(-14px) rotate(-40deg);opacity:1;}
  100%{transform:translateX(-50%) translateY(-6px) rotate(-25deg);opacity:0.9;}
}
.tourney-dmg-poison .avatar{filter:sepia(0.4) hue-rotate(70deg) saturate(2);}

/* Paina nappia: räjähdys */
.tourney-dmg-explosion .tourney-dmg-icon{
  left:50%;top:50%;transform:translate(-50%,-50%) scale(0);
  animation:tourney-dmg-boom 0.6s ease-out forwards;
  font-size:56px;
}
@keyframes tourney-dmg-boom{
  0%{transform:translate(-50%,-50%) scale(0);opacity:0;}
  50%{transform:translate(-50%,-50%) scale(1.8);opacity:1;}
  100%{transform:translate(-50%,-50%) scale(1.3);opacity:0.9;}
}
.tourney-dmg-explosion .avatar{animation:tourney-dmg-shake 0.3s ease-in-out 0.2s 4;}

/* Onnenpyörä: putoaminen veteen */
.tourney-dmg-water{overflow:visible;}
.tourney-dmg-water .avatar{
  animation:tourney-dmg-splash-fall 1.1s ease-in forwards;
}
.tourney-dmg-water .tourney-dmg-icon{
  left:50%;bottom:-10px;transform:translateX(-50%) scale(0);
  animation:tourney-dmg-splash-pop 1.1s ease-in forwards;
  font-size:26px;
}
@keyframes tourney-dmg-splash-fall{
  0%{transform:translateY(0) rotate(0deg);opacity:1;}
  70%{transform:translateY(28px) rotate(15deg);opacity:1;}
  100%{transform:translateY(34px) rotate(20deg);opacity:0.25;}
}
@keyframes tourney-dmg-splash-pop{
  0%,60%{transform:translateX(-50%) scale(0);opacity:0;}
  75%{transform:translateX(-50%) scale(1.6);opacity:1;}
  100%{transform:translateX(-50%) scale(1.2);opacity:0.8;}
}

@keyframes tourney-dmg-shake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

/* "Naughty naughty" -erikoistapaus: kaikki juovat myrkkyä kerralla */
.tourney-naughty-scene{
  text-align:center;padding:12px;
}
.tourney-naughty-title{
  font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:clamp(24px,6vw,34px);
  color:var(--danger);letter-spacing:.05em;text-transform:uppercase;
  animation:tourney-splash-icon-pop 0.5s cubic-bezier(.2,1.4,.4,1) both, tourney-dmg-shake 0.4s ease-in-out 0.5s 4;
  margin-bottom:14px;
}
.tourney-naughty-players{
  display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
}
.tourney-dmg-player-chip{display:flex;flex-direction:column;align-items:center;gap:4px;}
.tourney-naughty-players .tourney-dmg-avatar{width:60px;height:60px;}
.tourney-naughty-players .tourney-dmg-avatar .avatar{width:48px;height:48px;}
.tourney-naughty-players .tourney-dmg-icon{font-size:22px;}

/* ---------- Voittonäkymän juhlistus ---------- */
.tourney-finish-hero{position:relative;overflow:visible;}
.tourney-winner-emoji{
  animation:tourney-splash-icon-pop 0.6s cubic-bezier(.2,1.4,.4,1) both, tourney-splash-icon-pulse 1.8s ease-in-out 0.6s infinite;
}
.tourney-confetti{
  position:absolute;inset:0;pointer-events:none;overflow:visible;height:0;
}
.tourney-confetti-piece{
  position:absolute;font-size:22px;top:-10px;
  left:calc(10% + (var(--i) * 15%));
  animation:tourney-confetti-fall 2.4s ease-in calc(var(--i) * 0.15s) infinite;
  opacity:0;
}
@keyframes tourney-confetti-fall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:0;}
  10%{opacity:1;}
  100%{transform:translateY(160px) rotate(340deg);opacity:0;}
}
.tourney-winner-row{
  background:rgba(255,217,61,0.1);border-radius:8px;
}
.tourney-winner-crown{margin-right:2px;}

/* ---------- Onnenpyörä ---------- */
.tourney-wheel-wrap{
  position:relative;width:100%;max-width:300px;margin:16px auto 0;
  aspect-ratio:1/1;
}
.tourney-wheel-svg{
  width:100%;height:100%;display:block;overflow:visible;
}
.tourney-wheel-group{
  transform-origin:150px 150px;
  transition:transform 4s cubic-bezier(.15,.75,.25,1);
}
.tourney-wheel-pointer{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  font-size:26px;color:var(--danger);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,0.5));
  z-index:3;
}