/* ============================== Theme tokens ============================== */
:root{
  --bg-base:#f1f5f9;
  --surface:rgba(255,255,255,0.6);
  --surface-2:rgba(255,255,255,0.85);
  --surface-hover:rgba(255,255,255,0.8);
  --nav-bg:rgba(255,255,255,0.8);
  --border:rgba(15,23,42,0.08);
  --border-hover:rgba(79,70,229,0.3);
  --text-main:#0f172a;
  --text-muted:#64748b;
  --primary:#4f46e5;
  --primary-2:#6366f1;
  --primary-hover:#4338ca;
  --danger:#ef4444;
  --gold:#f59e0b;
  --rose:#e11d48;
  --emerald:#10b981;
  --emerald-d:#059669;
  --warning-bg:#fef3c7;--warning-text:#d97706;
  --input-bg:rgba(255,255,255,0.9);
  --shadow-card:0 8px 32px rgba(2,6,23,.06);
  --shadow-hover:0 16px 48px rgba(79,70,229,.16);
  --cell-bg:#ffffff;--cell-empty:#e6eaf1;--hero-bg:#0f172a;--hero-fg:#ffffff;
  --orb-1:rgba(79,70,229,0.30);--orb-2:rgba(14,165,233,0.30);
  --nav-h:58px;
}
[data-theme="dark"]{
  --bg-base:#0B0F19;
  --surface:rgba(30,41,59,0.4);
  --surface-2:rgba(30,41,59,0.7);
  --surface-hover:rgba(30,41,59,0.6);
  --nav-bg:rgba(11,15,25,0.8);
  --border:rgba(255,255,255,0.1);
  --border-hover:rgba(99,102,241,0.5);
  --text-main:#f8fafc;
  --text-muted:#94a3b8;
  --primary:#6366f1;--primary-2:#818cf8;--primary-hover:#4f46e5;
  --danger:#f87171;
  --warning-bg:rgba(245,158,11,.15);--warning-text:#fcd34d;
  --input-bg:rgba(15,23,42,0.6);
  --shadow-card:0 8px 32px rgba(0,0,0,.4);
  --shadow-hover:0 16px 48px rgba(99,102,241,.25);
  --cell-bg:rgba(255,255,255,.06);--cell-empty:rgba(255,255,255,.03);--hero-bg:#1e293b;--hero-fg:#f8fafc;
  --orb-1:rgba(99,102,241,0.25);--orb-2:rgba(236,72,153,0.15);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  background:var(--bg-base);color:var(--text-main);line-height:1.55;
  min-height:100vh;position:relative;-webkit-tap-highlight-color:transparent;
  transition:background-color .4s ease,color .4s ease;
}

/* ============================== Background orbs ============================== */
.bg-orbs{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.orb{position:absolute;border-radius:50%;filter:blur(80px);animation:float 22s infinite alternate ease-in-out;}
.orb-1{width:600px;height:600px;background:var(--orb-1);top:-120px;left:-120px;}
.orb-2{width:520px;height:520px;background:var(--orb-2);bottom:-120px;right:-120px;animation-delay:-6s;animation-duration:27s;}
@keyframes float{0%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-40px) scale(1.08);}100%{transform:translate(40px,40px) scale(1.04);}}

/* ============================== Navbar ============================== */
.navbar{
  background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);padding:0 22px;min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:50;
}
.brand{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:900;letter-spacing:-0.02em;min-width:0;}
.brand svg{width:26px;height:26px;color:var(--primary);flex:0 0 auto;}
.brand-text{background:linear-gradient(135deg,var(--primary),#8b5cf6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-transform:uppercase;white-space:nowrap;}
.brand-subtitle{font-weight:600;color:var(--text-muted);font-size:.95rem;border-left:2px solid var(--border);padding-left:10px;white-space:nowrap;}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-stat{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-weight:700;font-size:.82rem;color:var(--text-main);}
.nav-stat .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.18);}
.theme-toggle{background:transparent;border:1px solid var(--border);color:var(--text-main);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;flex:0 0 auto;}
.theme-toggle:hover{background:var(--surface-hover);transform:scale(1.05);}
.theme-toggle svg{width:19px;height:19px;}

/* ============================== Buttons ============================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:.95rem;font-weight:700;padding:12px 20px;border:none;border-radius:12px;cursor:pointer;transition:all .2s;letter-spacing:.01em;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 4px 14px rgba(79,70,229,.3);}
.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px rgba(79,70,229,.4);}
.btn-ghost{background:var(--surface);color:var(--text-main);border:1px solid var(--border);}
.btn-ghost:hover:not(:disabled){border-color:var(--border-hover);background:var(--surface-hover);}
.btn-danger{background:transparent;color:var(--danger);border:1px solid var(--danger);}
.btn-danger:hover:not(:disabled){background:var(--danger);color:#fff;}
.btn-success{background:var(--emerald-d);color:#fff;}
.btn-success:hover:not(:disabled){background:#047857;}
.btn-block{width:100%;}
.btn-sm{padding:8px 13px;font-size:.82rem;border-radius:9px;}
.btn-disabled{background:var(--border);color:var(--text-muted);}

/* ============================== Inputs ============================== */
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:.78rem;font-weight:700;color:var(--text-main);margin-bottom:7px;text-transform:uppercase;letter-spacing:.05em;}
.input-wrapper{position:relative;}
.input-wrapper>svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-muted);width:19px;height:19px;}
.form-input{width:100%;font-family:inherit;font-size:1rem;padding:14px 14px 14px 42px;border:1px solid var(--border);border-radius:12px;color:var(--text-main);background:var(--input-bg);transition:all .2s;font-weight:600;}
.form-input.plain{padding-left:14px;}
.form-input.code{text-transform:uppercase;letter-spacing:3px;}
.form-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(79,70,229,.15);}
.form-input::placeholder{color:var(--text-muted);text-transform:none;letter-spacing:normal;font-weight:400;}

/* ============================== Glass cards ============================== */
.card{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:20px;padding:28px;box-shadow:var(--shadow-card);position:relative;overflow:hidden;}
.card h2{font-size:1.2rem;font-weight:800;margin-bottom:6px;}
.card .sub{font-size:.92rem;color:var(--text-muted);margin-bottom:20px;}
.icon-box{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;background:linear-gradient(135deg,rgba(79,70,229,.12),rgba(139,92,246,.12));color:var(--primary);border:1px solid var(--border-hover);}
.icon-box svg{width:24px;height:24px;}
.badge{position:absolute;top:18px;right:18px;background:var(--warning-bg);color:var(--warning-text);font-size:.68rem;font-weight:800;padding:5px 10px;border-radius:999px;border:1px solid var(--warning-text);text-transform:uppercase;letter-spacing:.05em;}
.error-message{color:var(--danger);font-size:.84rem;font-weight:600;margin-top:8px;min-height:1.1em;}

/* ============================== Landing ============================== */
.page{flex:1;display:flex;flex-direction:column;}
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 18px;}
.container{max-width:880px;width:100%;}
.hero{text-align:center;margin-bottom:40px;}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:900;letter-spacing:-0.03em;margin-bottom:14px;}
.hero p{font-size:1.08rem;color:var(--text-muted);max-width:560px;margin:0 auto;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.rejoin{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;border:1px solid var(--border-hover);margin-bottom:22px;}
.rejoin .txt b{color:var(--primary);}
.rejoin .acts{display:flex;gap:8px;flex:0 0 auto;}

body.landing{display:flex;flex-direction:column;}

/* ============================== Player ============================== */
body.player{display:flex;flex-direction:column;height:100dvh;overflow:hidden;}
.player .stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;gap:clamp(7px,1.5vh,14px);padding:clamp(8px,1.6vh,18px) 12px;
  --cell:clamp(24px,min(calc((100vw - 96px)/9),calc((100dvh - 330px)/3)),54px);}
.player .hnumwrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex:0 0 auto;}
.player .hlabel{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--text-muted);font-weight:800;}
.player .hnum{width:clamp(56px,10vh,96px);height:clamp(56px,10vh,96px);border-radius:22px;background:var(--hero-bg);color:var(--hero-fg);display:grid;place-items:center;font-weight:850;font-size:clamp(1.8rem,5vh,2.8rem);box-shadow:var(--shadow-card);border:1px solid var(--border);}
.player .hnum.flash{animation:heroflash .55s ease;}
@keyframes heroflash{0%{background:var(--gold);color:#fff;transform:scale(1.14);}100%{transform:scale(1);}}
.player .hsub{font-size:.74rem;color:var(--text-muted);font-weight:600;}
.player .pbar{width:100%;max-width:600px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:7px 12px;flex:0 0 auto;backdrop-filter:blur(12px);}
.player .pinfo{display:flex;flex-direction:column;min-width:0;}
.player .pname{font-weight:750;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw;}
.player .pstatus{font-size:.72rem;color:var(--text-muted);}
.player .chips{width:100%;max-width:600px;display:flex;gap:6px;flex-wrap:nowrap;justify-content:center;overflow-x:auto;padding:2px;flex:0 0 auto;scrollbar-width:thin;}
.player .chip{flex:0 0 auto;padding:5px 11px;border-radius:999px;font-size:.71rem;font-weight:700;background:var(--surface);color:var(--text-muted);border:1px solid var(--border);white-space:nowrap;}
.player .chip.eligible{border-color:var(--gold);color:var(--gold);animation:glow 1.2s ease-in-out infinite alternate;}
.player .chip.won{border-color:var(--emerald);color:var(--emerald);}
.player .chip.mine{border-color:var(--emerald);color:#fff;background:var(--emerald);}
@keyframes glow{to{box-shadow:0 0 0 3px rgba(245,158,11,.25);}}
.player .ticketwrap{flex:1 1 auto;width:100%;display:grid;place-items:center;min-height:0;}
/* physical paper ticket (always light, like a printed card) */
.ticket-card{background:var(--tk-paper);border:3px solid var(--tk-line);border-radius:14px;padding:8px 10px 10px;box-shadow:0 10px 26px rgba(2,6,23,.18);}
.tk-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px;padding:0 2px;}
.tk-title{font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.62rem;color:var(--tk-head);}
.tk-serial{font-family:ui-monospace,Menlo,monospace;font-size:.62rem;font-weight:700;color:var(--tk-ink);opacity:.65;}
table.ticket{border-collapse:collapse;}
.ticket td{width:var(--cell);height:var(--cell);text-align:center;vertical-align:middle;border:2px solid var(--tk-line);font-weight:800;font-size:calc(var(--cell)*.4);user-select:none;color:var(--tk-ink);}
.ticket td.empty{background:var(--tk-empty);}
.ticket td.num{background:var(--tk-cell);cursor:pointer;position:relative;transition:transform .08s;}
.ticket td.num:active{transform:scale(.94);}
.ticket td.num.called::after{content:"";position:absolute;top:4px;right:4px;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 1.5px var(--tk-cell);}
.ticket td.num.marked{color:#9f1239;}
.ticket td.num.marked::before{content:"";position:absolute;inset:13%;border-radius:50%;background:rgba(225,29,72,.28);border:2px solid rgba(225,29,72,.7);}
.player.locked .ticket td.num{cursor:default;}
/* mild colour palettes (illusion of a new ticket on regenerate) */
.tk-0{--tk-paper:#fdeef1;--tk-line:#e7a6b3;--tk-cell:#fff7f9;--tk-empty:#f6dde3;--tk-head:#d6447d;--tk-ink:#7a2540;}
.tk-1{--tk-paper:#fff7e1;--tk-line:#e6c759;--tk-cell:#fffdf2;--tk-empty:#f6ecc8;--tk-head:#c79100;--tk-ink:#6b5512;}
.tk-2{--tk-paper:#fdeede;--tk-line:#eab277;--tk-cell:#fff8f0;--tk-empty:#f6e2cb;--tk-head:#d97a2c;--tk-ink:#7a4521;}
.tk-3{--tk-paper:#e9f1fc;--tk-line:#9dbceb;--tk-cell:#f6faff;--tk-empty:#d6e4f6;--tk-head:#2f6fc7;--tk-ink:#23456f;}
.tk-4{--tk-paper:#e9f7ec;--tk-line:#97d2a7;--tk-cell:#f5fdf7;--tk-empty:#d3eedb;--tk-head:#1f9e63;--tk-ink:#1f5b3c;}
.tk-5{--tk-paper:#f1eafc;--tk-line:#bda6e8;--tk-cell:#faf7ff;--tk-empty:#e3d7f6;--tk-head:#7a4fd1;--tk-ink:#432b73;}

/* ============================== Overlays ============================== */
.overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(2,6,23,.55);backdrop-filter:blur(4px);}
.panel{background:var(--surface-2);backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-card);padding:26px;width:100%;max-width:420px;}
.panel h1{font-size:1.35rem;margin-bottom:4px;}
.panel h2{font-size:1.1rem;margin-bottom:12px;}
.brandmark{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--primary);font-weight:800;margin-bottom:10px;}
.field{display:flex;gap:8px;margin-top:12px;}
.field .btn{flex:0 0 auto;}
.winpanel{text-align:center;}
.winpanel .trophy{font-size:3.4rem;animation:trophy .8s ease;}
@keyframes trophy{0%{transform:scale(0) rotate(-30deg);}60%{transform:scale(1.25) rotate(8deg);}100%{transform:scale(1);}}
.winpanel .prize{font-size:1.5rem;font-weight:850;color:var(--emerald);margin:8px 0 2px;}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:59;}
.winners{list-style:none;margin:14px 0 0;}
.winners li{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:.92rem;}
.winners li b{color:var(--emerald);}

/* ============================== Organizer ============================== */
.org-wrap{max-width:1080px;margin:0 auto;padding:22px 18px;width:100%;}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.section-head h1{font-size:1.5rem;font-weight:900;letter-spacing:-0.02em;}
.create-card{margin-bottom:24px;}
.create-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;}
.create-row .form-group{margin-bottom:0;flex:1 1 200px;}
.create-row .form-group.code{flex:0 0 150px;}
.game-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.game-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.game-card .gname{font-size:1.1rem;font-weight:800;}
.game-card .gcode{font-family:ui-monospace,Menlo,monospace;font-size:1.5rem;font-weight:900;letter-spacing:3px;color:var(--primary);margin:6px 0 2px;}
.game-card .gmeta{font-size:.82rem;color:var(--text-muted);margin-bottom:14px;display:flex;gap:12px;}
.statepill{font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.statepill.lobby{background:var(--warning-bg);color:var(--warning-text);}
.statepill.running{background:rgba(16,185,129,.16);color:var(--emerald-d);}
.statepill.ended{background:var(--border);color:var(--text-muted);}
.game-actions{display:flex;flex-wrap:wrap;gap:7px;}
.empty-note{color:var(--text-muted);text-align:center;padding:40px 0;}

/* Console */
.console-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.console-head .gcode{font-family:ui-monospace,Menlo,monospace;font-weight:900;letter-spacing:2px;color:var(--primary);}
.grid-console{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start;}
.claims{position:sticky;top:calc(var(--nav-h) + 10px);z-index:20;border-color:var(--gold)!important;}
.claims h2 .count{background:var(--rose);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 9px;margin-left:6px;}
.claims h2 .count.zero{background:var(--border);color:var(--text-muted);}
.claim{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1px solid var(--gold);border-radius:11px;background:var(--warning-bg);margin-bottom:8px;}
.claim .m b{display:block;font-size:.95rem;}
.claim .m span{font-size:.78rem;color:var(--text-muted);}
.claim .acts{display:flex;gap:6px;flex:0 0 auto;}
.claim-list{max-height:260px;overflow-y:auto;}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.org-current{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.org-current .big{width:80px;height:80px;border-radius:18px;background:var(--hero-bg);color:var(--hero-fg);display:grid;place-items:center;font-size:2.3rem;font-weight:850;flex:0 0 auto;border:1px solid var(--border);}
.org-current .big.flash{animation:heroflash .55s ease;}
.board{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:12px;}
.board .cell{aspect-ratio:1;display:grid;place-items:center;border-radius:6px;font-size:.76rem;font-weight:700;background:var(--cell-empty);color:var(--text-muted);border:1px solid var(--border);}
.board .cell.on{background:var(--hero-bg);color:var(--hero-fg);border-color:var(--hero-bg);}
.prizes{list-style:none;display:grid;grid-template-columns:1fr;gap:7px;}
.prizes li{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-weight:600;font-size:.88rem;display:flex;justify-content:space-between;gap:8px;align-items:center;}
.prizes li.locked{border-color:var(--emerald);}
.prizes li .who{color:var(--emerald);font-weight:800;font-size:.82rem;}
.checkrow{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 0;}
.checkrow input{width:18px;height:18px;accent-color:var(--primary);}
.switch{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-weight:600;font-size:.9rem;}
.switch input{display:none;}
.switch .track{width:42px;height:24px;border-radius:999px;background:var(--border);position:relative;transition:background .2s;flex:0 0 auto;}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s;}
.switch input:checked + .track{background:var(--emerald);}
.switch input:checked + .track::after{transform:translateX(18px);}
hr.sep{border:none;border-top:1px solid var(--border);margin:14px 0;}

/* ============================== Toasts ============================== */
#toasts{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:80;max-width:92vw;}
.toast{background:var(--text-main);color:var(--bg-base);font-weight:650;padding:11px 18px;border-radius:11px;box-shadow:var(--shadow-card);font-size:.9rem;text-align:center;animation:pop .3s ease both;}
.toast.warn{background:var(--danger);color:#fff;}
.toast.good{background:var(--emerald-d);color:#fff;}
.toast.info{background:var(--primary);color:#fff;}
@keyframes pop{from{transform:translateY(10px);opacity:0;}to{transform:none;opacity:1;}}

@media (max-width:820px){.grid-console{grid-template-columns:1fr;}}
@media (max-width:768px){.grid2{grid-template-columns:1fr;}.brand-subtitle{display:none;}}

/* ============================== Plans + usage (host) ============================== */
.usage-banner{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;padding:14px 18px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow-card);margin-bottom:18px;}
.usage-banner .u-item{display:flex;flex-direction:column;line-height:1.2;}
.usage-banner .u-item .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;}
.usage-banner .u-item .v{font-size:1.05rem;font-weight:800;}
.usage-banner .plan-chip{font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:999px;}
.plan-chip.free{background:var(--warning-bg);color:var(--warning-text);}
.plan-chip.custom{background:rgba(14,165,233,.16);color:#0284c7;}
.plan-chip.unlimited{background:rgba(16,185,129,.18);color:var(--emerald-d);}
.usage-banner .spacer{flex:1 1 auto;}
.usage-banner .meter{min-width:120px;}
.meter-bar{height:7px;border-radius:999px;background:var(--border);overflow:hidden;margin-top:5px;}
.meter-bar > span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px;}
.meter-bar.full > span{background:linear-gradient(90deg,var(--rose),var(--danger));}

.plans-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 12px;}
.plans-head h2{margin:0;}
.plans-head .note{color:var(--text-muted);font-size:.85rem;}
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.plan{position:relative;display:flex;flex-direction:column;padding:20px;border-radius:16px;border:1px solid var(--border);
  background:var(--surface-2);box-shadow:var(--shadow-card);}
.plan.featured{border-color:var(--border-hover);box-shadow:var(--shadow-hover);}
.plan .ribbon{position:absolute;top:14px;right:14px;font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;background:rgba(16,185,129,.18);color:var(--emerald-d);}
.plan h3{font-size:1.05rem;margin:0 0 2px;}
.plan .price{font-size:1.8rem;font-weight:900;letter-spacing:-.01em;}
.plan .price small{font-size:.8rem;font-weight:700;color:var(--text-muted);}
.plan .blurb{color:var(--text-muted);font-size:.85rem;margin:2px 0 12px;}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:7px;margin:0 0 16px;padding:0;font-size:.9rem;}
.plan ul li{display:flex;gap:8px;align-items:flex-start;}
.plan ul li::before{content:"✓";color:var(--emerald-d);font-weight:900;flex:0 0 auto;}
.plan .actions{margin-top:auto;display:flex;flex-direction:column;gap:8px;}
.btn-soon{background:var(--border);color:var(--text-muted);cursor:not-allowed;font-weight:800;}
.btn-soon:hover{transform:none;}

/* ============================== Admin console ============================== */
.admin-wrap{max-width:1180px;margin:0 auto;padding:22px 18px 60px;}
.stat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:20px;}
.stat{padding:14px 16px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow-card);}
.stat .n{font-size:1.7rem;font-weight:900;line-height:1;}
.stat .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;margin-top:5px;}
.admin-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.admin-tabs button{padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface-2);
  color:var(--text-main);font-weight:700;font-size:.88rem;cursor:pointer;transition:all .15s;}
.admin-tabs button.active{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;border-color:transparent;}
.admin-tabs button .pill{display:inline-block;margin-left:6px;background:var(--rose);color:#fff;border-radius:999px;font-size:.7rem;padding:1px 7px;}
.tablewrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border);background:var(--surface-2);box-shadow:var(--shadow-card);}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;min-width:680px;}
table.data th,table.data td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap;vertical-align:middle;}
table.data th{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:800;}
table.data tr:last-child td{border-bottom:none;}
table.data td.wrap{white-space:normal;min-width:160px;}
.tag{display:inline-block;font-size:.7rem;font-weight:800;padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.03em;}
.tag.active{background:rgba(16,185,129,.16);color:var(--emerald-d);}
.tag.disabled{background:var(--border);color:var(--text-muted);}
.tag.admin{background:rgba(99,102,241,.18);color:var(--primary);}
.tag.unlimited{background:rgba(16,185,129,.18);color:var(--emerald-d);}
.tag.open{background:var(--warning-bg);color:var(--warning-text);}
.tag.resolved{background:rgba(16,185,129,.16);color:var(--emerald-d);}
.tag.dismissed{background:var(--border);color:var(--text-muted);}
.rowacts{display:flex;gap:6px;flex-wrap:wrap;}
.mini-input{width:64px;padding:6px 8px;border-radius:8px;border:1px solid var(--border);background:var(--input-bg);color:var(--text-main);font-weight:700;font-size:.85rem;}
.admin-card{padding:18px;border-radius:14px;background:var(--surface-2);border:1px solid var(--border);box-shadow:var(--shadow-card);margin-bottom:16px;}
.settings-row{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;}
.settings-row .form-group{margin:0;}
.empty-row{padding:26px;text-align:center;color:var(--text-muted);}

/* ============================== Full-game / disabled overlays ============================== */
.fullpanel .cap-badge{display:inline-block;font-weight:800;padding:6px 14px;border-radius:999px;background:var(--warning-bg);color:var(--warning-text);margin-bottom:8px;}

@media (max-width:900px){.plans-grid{grid-template-columns:1fr;}.stat-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.stat-row{grid-template-columns:repeat(2,1fr);}.usage-banner{gap:12px 16px;}}

/* ============================================================================
   Mobile / responsive refinements
   ========================================================================== */

/* Landing: keep the two CTA buttons aligned on one line on wide screens.
   Cards stretch to equal height (grid), and the final button is pinned to the
   bottom of each card so "Join" and "Host an event" sit on the same row. */
.grid2 > .card{display:flex;flex-direction:column;}
.grid2 > .card > .btn-block{margin-top:auto;}

/* Brand text can shrink gracefully instead of overflowing the navbar */
.brand{min-width:0;overflow:hidden;}
.brand-text{overflow:hidden;text-overflow:ellipsis;}

/* ---- Tablet ---- */
@media (max-width:768px){
  .navbar{padding:0 16px;}
  .org-wrap{padding:18px 14px;}
  .admin-wrap{padding:18px 14px 56px;}
  .section-head h1{font-size:1.35rem;}
}

/* ---- Phones ---- */
@media (max-width:560px){
  /* Navbar: tighter so the brand + controls never overlap */
  .navbar{padding:0 12px;gap:8px;min-height:52px;--nav-h:52px;}
  .brand{font-size:.98rem;gap:7px;}
  .brand svg{width:22px;height:22px;}
  .nav-right{gap:7px;}
  .nav-stat{padding:5px 9px;font-size:.74rem;gap:5px;}
  .theme-toggle{width:34px;height:34px;}
  .theme-toggle svg{width:17px;height:17px;}
  .btn-sm{padding:7px 11px;font-size:.8rem;}

  /* Generic page padding */
  .main{padding:28px 14px;}
  .card{padding:20px;border-radius:18px;}
  .org-wrap{padding:16px 12px;}
  .admin-wrap{padding:16px 12px 50px;}
  .section-head h1{font-size:1.25rem;}

  /* Toasts sit a touch higher so on-screen keyboards don't cover them */
  #toasts{bottom:14px;gap:7px;}
  .toast{font-size:.86rem;padding:10px 15px;}

  /* ---------- Player: bigger ticket, compact chrome ---------- */
  .player .stage{
    gap:7px;
    padding:7px 6px;
    --cell:clamp(30px, min(calc((100vw - 36px)/9), calc((100dvh - 250px)/3)), 60px);
  }
  .player .hnumwrap{gap:2px;}
  .player .hlabel{font-size:.56rem;letter-spacing:.2em;}
  .player .hnum{width:62px;height:62px;border-radius:16px;font-size:2rem;}
  .player .hsub{font-size:.68rem;}
  .player .pbar{padding:6px 10px;border-radius:12px;}
  .player .pname{max-width:38vw;font-size:.86rem;}
  .player .pstatus{font-size:.68rem;}
  .player .chips{gap:5px;}
  .player .chip{padding:4px 9px;font-size:.66rem;}
  .ticket-card{padding:5px 6px 6px;border-width:2px;border-radius:12px;}
  .tk-header{margin-bottom:5px;}
  .tk-title,.tk-serial{font-size:.58rem;}

  /* ---------- Organizer console ---------- */
  .console-head{gap:8px;}
  .console-head h1{font-size:1.15rem!important;}
  .grid-console{gap:14px;}
  .claims{position:static;}            /* stop the claims card pinning over content on phones */
  .org-current{gap:10px;}
  .org-current .big{width:64px;height:64px;font-size:1.9rem;border-radius:14px;}
  .board{gap:3px;}
  .board .cell{font-size:.6rem;border-radius:5px;}
  .create-row .form-group,
  .create-row .form-group.code{flex:1 1 100%;}
  .create-row .btn{width:100%;}

  /* Usage banner reflows cleanly */
  .usage-banner{gap:12px 16px;padding:13px 14px;}
  .usage-banner .spacer{display:none;}
  .usage-banner .meter{min-width:100px;}

  /* ---------- Admin console ---------- */
  .stat-row{gap:10px;}
  .stat{padding:11px 12px;}
  .stat .n{font-size:1.35rem;}
  .stat .l{font-size:.66rem;}
  .admin-tabs{gap:5px;}
  .admin-tabs button{padding:7px 12px;font-size:.82rem;}
  .settings-row{gap:12px;}
  .settings-row .form-group{flex:1 1 100%;}
  .settings-row .form-input{width:100%!important;}
  .settings-row .btn{width:100%;}
  /* data tables already scroll horizontally inside .tablewrap */
}

/* Very small / narrow phones */
@media (max-width:380px){
  .brand-subtitle{display:none;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .player .hnum{width:56px;height:56px;font-size:1.75rem;}
}

/* ============================================================================
   Organizer console — redesigned (clear, phase-driven layout)
   ========================================================================== */
.con-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.con-title{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 auto;}
.con-title h1{font-size:1.25rem;font-weight:900;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.con-code{font-family:ui-monospace,Menlo,monospace;font-weight:900;letter-spacing:2px;color:var(--primary);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:5px 11px;cursor:pointer;font-size:.95rem;transition:all .15s;flex:0 0 auto;}
.con-code:hover{border-color:var(--border-hover);background:var(--surface-hover);}
.con-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.con-players{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:5px 11px;font-weight:700;font-size:.8rem;color:var(--text-main);}
.con-players .dot{width:8px;height:8px;border-radius:50%;background:var(--emerald);box-shadow:0 0 0 3px rgba(16,185,129,.18);}

/* Command hero */
.con-hero{display:flex;gap:24px;align-items:stretch;margin-bottom:16px;}
.con-hero .hero-num{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:7px;
  padding-right:24px;border-right:1px solid var(--border);min-width:184px;flex:0 0 auto;}
.con-hero .hero-label{font-size:.66rem;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);font-weight:800;}
.con-hero .big{width:104px;height:104px;border-radius:24px;background:var(--hero-bg);color:var(--hero-fg);
  display:grid;place-items:center;font-size:3rem;font-weight:850;border:1px solid var(--border);}
.con-hero .big.flash{animation:heroflash .55s ease;}
.con-hero .hero-count{font-size:.84rem;color:var(--text-muted);font-weight:600;}
.con-hero .hero-progress{width:100%;max-width:160px;height:6px;border-radius:999px;background:var(--border);overflow:hidden;}
.con-hero .hero-progress>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:999px;transition:width .35s ease;}
.con-hero .hero-action{flex:1 1 auto;display:flex;align-items:center;min-width:0;}
.action-block{width:100%;display:flex;flex-direction:column;gap:11px;align-items:flex-start;}
.action-head{font-size:1.15rem;font-weight:800;}
.action-sub{font-size:.88rem;color:var(--text-muted);margin:-5px 0 2px;}
.btn-lg{padding:15px 28px;font-size:1.05rem;border-radius:14px;}
.manual-row{display:flex;align-items:center;gap:9px;font-size:.85rem;color:var(--text-muted);flex-wrap:wrap;}
.manual-row .form-input{width:92px;}
.action-secondary{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}

/* Claims band — calm when empty, alight when there's something to do */
.con-claims{margin-bottom:16px;border:1px solid var(--border);transition:border-color .2s,box-shadow .2s;}
.con-claims.active{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,158,11,.14);}
.claims-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.claims-head h2{font-size:1.12rem;}
.claims-head .count{background:var(--rose);color:#fff;border-radius:999px;font-size:.72rem;padding:1px 9px;margin-left:6px;}
.claims-head .count.zero{background:var(--border);color:var(--text-muted);}
.claims-hint{font-size:.8rem;color:var(--text-muted);}

/* Board + prizes */
.con-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;align-items:start;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.card-head h2{margin:0;font-size:1.12rem;}
.card-head .switch{font-size:.82rem;color:var(--text-muted);}
.mini-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--text-muted);margin-bottom:4px;}
.muted{color:var(--text-muted);font-size:.85rem;}

/* Prize picker (create flow) */
.pp-list{display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;margin-top:6px;}
@media (max-width:440px){.pp-list{grid-template-columns:1fr;}}

@media (max-width:820px){.con-grid{grid-template-columns:1fr;}}
@media (max-width:560px){
  .con-hero{flex-direction:column;gap:14px;}
  .con-hero .hero-num{border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:14px;min-width:0;width:100%;}
  .con-hero .big{width:88px;height:88px;font-size:2.5rem;border-radius:20px;}
  .con-hero .hero-progress{max-width:none;}
  .action-block{align-items:stretch;}
  .action-head,.action-sub{text-align:center;}
  .btn-lg{width:100%;padding:14px;}
  .action-secondary,.manual-row{justify-content:center;}
  .card-head{margin-bottom:12px;}
}

/* ============================================================================
   Admin console — record cards (replaces dense tables; clean on mobile)
   ========================================================================== */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(390px,1fr));gap:14px;}
.rec-grid.sm{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));}
.rec{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;}
.rec-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.rec-idwrap{min-width:0;flex:1 1 auto;}
.rec-title{font-weight:800;font-size:.98rem;word-break:break-word;line-height:1.25;}
.rec-title.rec-code,.rec-code{font-family:ui-monospace,Menlo,monospace;letter-spacing:2px;color:var(--primary);}
.rec-sub{color:var(--text-muted);font-size:.78rem;margin-top:3px;word-break:break-word;}
.rec-tags{display:flex;gap:6px;flex-wrap:wrap;flex:0 0 auto;}
.rec-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:13px 0;padding:13px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.fact{display:flex;flex-direction:column;gap:3px;min-width:0;}
.fact .k{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:800;}
.fact .v{font-weight:700;font-size:.9rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.rec-wrap{word-break:break-word;font-weight:600;}
.rec-limits{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.rec-lim-label{font-size:.64rem;text-transform:uppercase;letter-spacing:.05em;font-weight:800;color:var(--text-muted);align-self:center;}
.mini-field{display:flex;flex-direction:column;gap:4px;}
.mini-flabel{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;}
.rec-acts{display:flex;gap:7px;flex-wrap:wrap;margin-top:auto;}
.empty-card{grid-column:1/-1;padding:34px;text-align:center;color:var(--text-muted);background:var(--surface-2);
  border:1px dashed var(--border);border-radius:16px;font-size:.92rem;}

/* Stats: a touch cleaner */
.stat{transition:border-color .15s;}
.stat:hover{border-color:var(--border-hover);}

@media (max-width:560px){
  .rec-grid,.rec-grid.sm{grid-template-columns:1fr;gap:12px;}
  .rec{padding:15px;border-radius:14px;}
  .rec-facts{gap:10px 16px;}
  .rec-acts .btn,.rec-limits .btn{flex:1 1 auto;}   /* full-width tap targets on phones */
  .mini-field{flex:1 1 44%;}
  .mini-field .mini-input{width:100%;}
}


/* ============================ Room chat ============================ */
/* Theme tokens so light & dark both read well */
:root{
  --chat-bg:#ffffff;
  --chat-surface:#f1f4f9;          /* others' bubbles */
  --chat-line:rgba(15,23,42,.10);
  --chat-pin-bg:#fff8ec;
  --chat-quote:rgba(79,70,229,.08);
  --chat-shadow:0 18px 50px rgba(2,6,23,.18);
}
[data-theme="dark"]{
  --chat-bg:#0f1626;
  --chat-surface:rgba(255,255,255,.07);
  --chat-line:rgba(255,255,255,.12);
  --chat-pin-bg:rgba(245,158,11,.12);
  --chat-quote:rgba(129,140,248,.16);
  --chat-shadow:0 18px 50px rgba(0,0,0,.55);
}

/* Floating launcher (player) */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;border-radius:50%;
  border:none;background:var(--primary);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(79,70,229,.45);transition:transform .15s ease,opacity .15s ease}
.chat-fab:hover{transform:translateY(-2px)}
.chat-fab.open{opacity:0;pointer-events:none}
.chat-fab svg{width:25px;height:25px}
.chat-badge{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:var(--rose,#e11d48);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg-base)}

/* Floating chat panel (player) */
.chat-panel{position:fixed;right:18px;bottom:18px;z-index:61;width:370px;max-width:calc(100vw - 24px);
  height:min(72vh,580px);display:flex;flex-direction:column;border:1px solid var(--chat-line);border-radius:18px;
  background:var(--chat-bg);box-shadow:var(--chat-shadow);overflow:hidden}
@media(max-width:480px){.chat-panel{right:0;bottom:0;width:100vw;height:100dvh;max-width:100vw;border-radius:0}}
.chat-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--chat-line);
  background:linear-gradient(180deg,rgba(79,70,229,.06),transparent)}
.chat-title{font-weight:800;color:var(--text-main)}
.chat-x{border:none;background:transparent;color:var(--text-muted);font-size:15px;cursor:pointer;padding:5px 9px;border-radius:8px;line-height:1}
.chat-x:hover{background:var(--chat-surface);color:var(--text-main)}

/* Pinned bar */
.chat-pinned{border-bottom:1px solid var(--chat-line);background:var(--chat-pin-bg);padding:8px 12px;display:flex;flex-direction:column;gap:6px;max-height:132px;overflow-y:auto}
.cp-head{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gold,#b45309)}
[data-theme="dark"] .cp-head{color:#fcd34d}
.cp-item{display:flex;align-items:center;gap:8px}
.cp-text{flex:1;min-width:0;font-size:12.5px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cp-text b{font-weight:800}
.cp-x{flex:none;border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:12px;padding:2px 5px;border-radius:6px}
.cp-x:hover{background:rgba(0,0,0,.06);color:var(--text-main)}

/* Message list (shared) */
.chat-messages{flex:1;min-height:0;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:10px}
.chat-messages.org{height:320px;flex:none;background:var(--chat-bg);border:1px solid var(--chat-line);border-radius:14px}
.cmsg{max-width:86%;align-self:flex-start}
.cmsg.me{align-self:flex-end}
.cwrap{position:relative;display:flex;flex-direction:column;gap:2px}
.cmsg.me .cwrap{align-items:flex-end}
.cbubble{position:relative;background:var(--chat-surface);border:1px solid var(--chat-line);border-radius:14px;border-top-left-radius:5px;
  padding:8px 11px;color:var(--text-main)}
.cmsg.me .cbubble{background:var(--primary);color:#fff;border-color:transparent;border-radius:14px;border-top-right-radius:5px}
.cmsg.org .cbubble{background:var(--chat-pin-bg);border-color:rgba(245,158,11,.5)}
[data-theme="dark"] .cmsg.org .cbubble{color:var(--text-main)}
.cmsg.org.me .cbubble{background:var(--primary);color:#fff;border-color:transparent}
.cmsg.tagged .cbubble{box-shadow:0 0 0 2px var(--primary)}
.cmsg.flash .cbubble{animation:cflash 1.1s ease}
@keyframes cflash{0%,100%{box-shadow:0 0 0 0 rgba(79,70,229,0)}30%{box-shadow:0 0 0 3px rgba(79,70,229,.55)}}
.cmeta{display:flex;align-items:center;gap:6px;margin-bottom:1px}
.cfrom{font-size:12px;font-weight:800;opacity:.9}
.ctime{font-size:10.5px;opacity:.6;margin-left:auto;padding-left:8px}
.cbadge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:999px;background:var(--gold,#f59e0b);color:#1a1205}
.cbody{font-size:14px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.cedited{font-size:10px;opacity:.6;margin-top:2px;display:inline-block}
.cbody .mention{font-weight:800;color:var(--primary);background:rgba(99,102,241,.14);border-radius:5px;padding:0 3px}
.cmsg.me .cbody .mention{color:#fff;background:rgba(255,255,255,.24)}

/* Reply quote inside a bubble */
.cquote{display:flex;flex-direction:column;gap:1px;border-left:3px solid var(--primary);background:var(--chat-quote);
  border-radius:6px;padding:4px 8px;margin-bottom:5px;cursor:pointer;max-width:100%}
.cmsg.me .cquote{border-left-color:rgba(255,255,255,.7);background:rgba(255,255,255,.16)}
.cq-from{font-size:11px;font-weight:800;opacity:.9}
.cq-text{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Per-message actions */
.cmore{position:absolute;top:-9px;right:-2px;width:24px;height:24px;border-radius:50%;border:1px solid var(--chat-line);
  background:var(--chat-bg);color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;opacity:0;transition:opacity .12s;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-card)}
.cmsg.me .cmore{right:auto;left:-2px}
.cwrap:hover .cmore,.cmsg.menu .cmore{opacity:1}
.cactions{display:none;gap:4px;margin-top:5px;flex-wrap:wrap}
.cmsg.menu .cactions{display:flex}
.cmsg.me .cactions{justify-content:flex-end}
.cact{border:1px solid var(--chat-line);background:var(--chat-bg);color:var(--text-main);font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:8px;cursor:pointer}
.cact:hover{background:var(--chat-surface);border-color:var(--border-hover)}

/* Locked / nudge */
.chat-locked{padding:14px;text-align:center;border-top:1px solid var(--chat-line)}
.chat-locked p{margin:0 0 10px;color:var(--text-muted);font-size:13px}

/* Reply / edit context bar */
.chat-reply{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--chat-line);background:var(--chat-quote)}
.cr-info{flex:1;min-width:0;display:flex;flex-direction:column;border-left:3px solid var(--primary);padding-left:8px}
.cr-label{font-size:11px;font-weight:800;color:var(--primary)}
.cr-text{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-x{flex:none;border:none;background:transparent;color:var(--text-muted);font-size:13px;cursor:pointer;padding:4px 7px;border-radius:7px}
.cr-x:hover{background:var(--chat-surface);color:var(--text-main)}

/* Composer */
.chat-composer{position:relative;display:flex;gap:8px;align-items:flex-end;padding:11px 12px;border-top:1px solid var(--chat-line);background:var(--chat-bg)}
.con-chat .chat-composer{border-top:none;padding:10px 0 0;background:transparent}
.chat-input{flex:1;resize:none;max-height:96px;border:1px solid var(--chat-line);border-radius:12px;
  background:var(--input-bg);color:var(--text-main);padding:10px 12px;font:inherit;font-size:14px;line-height:1.4;outline:none}
.chat-input:focus{border-color:var(--border-hover)}
.chat-send{flex:none;width:42px;height:42px;border-radius:12px;border:none;background:var(--primary);color:#fff;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-send:hover{background:var(--primary-hover)}

/* Mention autocomplete */
.chat-mentions{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:5;max-height:210px;overflow-y:auto;
  background:var(--chat-bg);border:1px solid var(--chat-line);border-radius:12px;box-shadow:var(--chat-shadow)}
.chat-mentions .mi{padding:9px 12px;font-size:14px;color:var(--text-main);cursor:pointer}
.chat-mentions .mi.sel,.chat-mentions .mi:hover{background:var(--chat-surface)}

/* Organizer chat card */
.con-chat{margin-top:16px}
.con-chat .card-head{display:flex;align-items:center;justify-content:space-between}

/* ============================================================================
   Mobile fixes — player ticket spacing + chat redesign & touch gestures
   ========================================================================== */

/* ---- Ticket sits right under the prize chips on phones (no large mid-screen gap) ---- */
@media (max-width:560px){
  .player .stage{justify-content:flex-start;}
  .player .ticketwrap{place-items:start center;padding-top:2px;}
}
@media (max-width:380px){
  .player .ticketwrap{padding-top:0;}
}

/* ---- Mobile chat polish ---- */
@media (max-width:480px){
  .chat-head{padding:14px 16px;}
  .chat-title{font-size:1.02rem;}
  .chat-messages{padding:12px 12px 16px;gap:9px;-webkit-overflow-scrolling:touch;}
  .cmsg{max-width:90%;}
  .cbubble{padding:9px 12px;border-radius:16px}
  .cmsg:not(.me) .cbubble{border-top-left-radius:6px}
  .cmsg.me .cbubble{border-top-right-radius:6px}
  .cbody{font-size:14.5px}
  .chat-reply{padding:9px 12px}
  .chat-composer{gap:8px;padding:10px 10px calc(10px + env(safe-area-inset-bottom))}
  .chat-input{font-size:16px;padding:11px 13px}      /* 16px keeps iOS from zooming on focus */
  .chat-send{width:44px;height:44px}
}

/* ---- Touch devices: long-press + swipe replace the tiny hover menu ---- */
@media (hover:none){
  .cmore{display:none}                                /* no hover target on touch; use long-press instead */
  .cbubble{-webkit-touch-callout:none}               /* suppress the iOS callout during long-press */
  .cactions{gap:6px;margin-top:6px}
  .cmsg.menu .cactions{animation:cact-in .14s ease}
  .cact{padding:9px 14px;font-size:13px;border-radius:10px}
}
@keyframes cact-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Gesture hint (shown on touch only, dismissed after first use) */
.chat-hint{display:none}
@media (hover:none){
  .chat-hint{display:block;font-size:11.5px;text-align:center;color:var(--text-muted);
    padding:7px 12px;border-bottom:1px solid var(--chat-line);background:var(--chat-bg)}
}

/* Swipe-to-reply: the bubble slides, revealing a reply arrow behind it */
.cwrap{will-change:transform}
.cmsg.swiping{user-select:none}
.cmsg::after{content:'\21A9';position:absolute;top:50%;transform:translateY(-50%);
  font-size:18px;font-weight:700;color:var(--primary);opacity:0;transition:opacity .12s ease;pointer-events:none;z-index:0}
.cmsg:not(.me)::after{left:6px}
.cmsg.me::after{right:6px}
.cmsg.swiping::after{opacity:.45}
.cmsg.willreply::after{opacity:1}

/* ============================================================================
   Auth gate spinner — shown while an existing session is verified on refresh
   (so the login card never flashes before the dashboard/console loads)
   ========================================================================== */
.auth-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  min-height:55vh;color:var(--text-muted);text-align:center;padding:24px;}
.auth-loading .spinner{width:42px;height:42px;border-radius:50%;
  border:3px solid var(--border);border-top-color:var(--primary);animation:authspin .8s linear infinite;}
.auth-loading p{font-size:.95rem;font-weight:600;margin:0;}
@keyframes authspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.auth-loading .spinner{animation-duration:1.6s;}}