:root{--bg:#080611;--panel:#151126;--panel2:#21183a;--text:#f5f2ff;--muted:#a99fc2;--accent:#8b5cf6;--accent2:#c084fc;--good:#36d399;--bad:#fb7185;--gold:#fbbf24}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 20% 0,#1b1038 0,#080611 45%);color:var(--text);min-height:100vh}.wrap{max-width:1280px;margin:auto;padding:24px}.top{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}.brand{font-weight:900;letter-spacing:.08em}.badge{background:#2b1d4e;border:1px solid #5b3f91;border-radius:999px;padding:8px 13px}.panel{background:rgba(21,17,38,.93);border:1px solid #2f2750;border-radius:20px;padding:20px;margin-top:18px}.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.grid{display:grid;grid-template-columns:repeat(5,minmax(130px,1fr));gap:10px;margin-top:18px}.cat{min-height:90px;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:800;background:#21183a;border:1px solid #42336d;border-radius:14px;padding:8px}.tile{min-height:86px;border:1px solid #5c45a0;background:linear-gradient(145deg,#291b50,#17102f);color:#f1eaff;border-radius:14px;font-size:28px;font-weight:900;cursor:pointer}.tile:hover{outline:2px solid var(--accent2)}.tile.used{opacity:.25;cursor:not-allowed}.tile.catTile::after{content:' 🐈';font-size:18px}.btn{border:0;border-radius:14px;padding:13px 18px;font-size:16px;font-weight:800;cursor:pointer;background:var(--accent);color:white}.btn.secondary{background:#322752}.btn.good{background:var(--good);color:#06140e}.btn.bad{background:var(--bad);color:#24050b}.btn.gold{background:var(--gold);color:#2b1900}.btn:disabled{opacity:.45;cursor:not-allowed}input,textarea{width:100%;border-radius:12px;border:1px solid #493b70;background:#0f0b1e;color:white;padding:14px;font-size:17px}.scorebar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:18px}.player{background:#171128;border:1px solid #372d5b;padding:14px;border-radius:15px}.player.active{outline:3px solid var(--gold)}.score{font-size:28px;font-weight:900}.question{font-size:clamp(26px,4vw,54px);line-height:1.18;text-align:center;font-weight:900;padding:50px 20px}.answer{font-size:26px;text-align:center;color:#d7c8ff;margin-top:20px}.muted{color:var(--muted)}.center{text-align:center}.huge{font-size:clamp(46px,9vw,110px);font-weight:1000}.buzz{min-height:180px;width:100%;font-size:34px}.hidden{display:none!important}.screen .wrap{max-width:1600px}.screen .grid{gap:14px}.screen .cat{font-size:22px}.screen .tile{font-size:36px;min-height:105px}.screen .scorebar{position:relative}.roomCode{font-size:42px;font-weight:1000;letter-spacing:.18em}.notice{padding:12px 14px;border-radius:12px;background:#2a2147;margin-top:10px}.winner{font-size:46px;font-weight:1000}.finalList{display:grid;gap:12px}.finalItem{display:grid;grid-template-columns:1fr auto;gap:10px;background:#171128;border-radius:14px;padding:14px}@media(max-width:850px){.grid{grid-template-columns:repeat(5,110px);overflow-x:auto}.scorebar{grid-template-columns:repeat(2,1fr)}.wrap{padding:14px}.question{padding:28px 8px}.top{align-items:flex-start}}@media(max-width:500px){.scorebar{grid-template-columns:1fr 1fr}.btn{width:100%}.roomCode{font-size:32px}.player{padding:10px}.score{font-size:23px}}

/* v1.5.8 — Visual Polish / Stream Ready */
:root{--bg:#09051a;--panel:#18112f;--panel2:#281957;--text:#fbf9ff;--muted:#c6b9df;--accent:#8b5cf6;--accent2:#d8b4fe;--good:#36d399;--bad:#fb7185;--gold:#ffd65a}
body{background:radial-gradient(circle at 15% -5%,rgba(124,58,237,.38) 0,transparent 36%),radial-gradient(circle at 88% 12%,rgba(59,130,246,.18) 0,transparent 30%),linear-gradient(155deg,#0d0820 0,#080512 52%,#100725 100%);background-attachment:fixed}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0,rgba(255,255,255,.025) 45%,transparent 65%);z-index:-1}
.brand{color:#eee7ff;text-shadow:0 0 18px rgba(192,132,252,.55)}
.panel{background:linear-gradient(160deg,rgba(31,22,58,.96),rgba(15,10,31,.94));border-color:rgba(167,139,250,.36);box-shadow:0 18px 55px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.045)}
.cat{background:linear-gradient(155deg,#332063,#211442);border-color:#7458b8;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);text-shadow:0 2px 10px rgba(0,0,0,.4)}
.tile{border-color:#8b6ee0;background:linear-gradient(145deg,#3b2377,#201345 72%);color:var(--gold);text-shadow:0 0 16px rgba(255,214,90,.28);box-shadow:0 8px 22px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease}
.tile:hover{outline:none;border-color:#d8b4fe;transform:translateY(-2px);box-shadow:0 10px 28px rgba(91,33,182,.3),0 0 18px rgba(192,132,252,.18)}
.tile.used{transform:none;box-shadow:none;filter:saturate(.5)}
.btn{box-shadow:0 6px 18px rgba(91,33,182,.22);transition:transform .12s ease,filter .12s ease}.btn:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px)}
.btn.secondary{background:linear-gradient(145deg,#493576,#30234f)}
.player{background:linear-gradient(155deg,rgba(36,24,66,.98),rgba(20,14,39,.98));border-color:#514176;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.player.active{outline:2px solid var(--gold);box-shadow:0 0 0 2px rgba(255,214,90,.12),0 0 26px rgba(255,214,90,.17)}
.score{color:#fff;text-shadow:0 0 14px rgba(192,132,252,.2)}
.question{text-shadow:0 3px 20px rgba(0,0,0,.4)}
.answer{color:#eadfff;text-shadow:0 0 16px rgba(192,132,252,.15)}
.notice{background:linear-gradient(145deg,#38295e,#251b42);border:1px solid rgba(167,139,250,.28)}
.roomCode{color:var(--gold);text-shadow:0 0 22px rgba(255,214,90,.24)}
.buzz{background:linear-gradient(145deg,#8b5cf6,#6d28d9);box-shadow:0 10px 35px rgba(109,40,217,.3)}
.screen .panel{border-color:rgba(192,132,252,.42);box-shadow:0 20px 70px rgba(0,0,0,.38),0 0 35px rgba(109,40,217,.08)}
.screen .cat{background:linear-gradient(160deg,#402477,#27164e);border-color:#8969cf}
.screen .tile{background:linear-gradient(145deg,#48278c,#25134f 76%);border-color:#9977e4;color:#ffd86b;text-shadow:0 0 20px rgba(255,216,107,.34)}
.screen .player{border-color:#67518e}
.screen .player.active{outline:3px solid var(--gold);box-shadow:0 0 30px rgba(255,214,90,.2)}

/* v1.6.0 — Mechanics Update: touch + visible BUZZ states */
.btn,.tile,.phoneTile{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (pointer:coarse){.btn{min-height:58px;padding:16px 20px}.phoneTile{min-height:54px!important}.buzz{min-height:210px;font-size:clamp(30px,8vw,44px)}}
.buzz.waiting{background:linear-gradient(145deg,#332b45,#1b1726);color:#a9a1b8;border:2px solid #4d455d;box-shadow:none}
.buzz.ready{background:linear-gradient(145deg,#a855f7,#6d28d9);color:#fff;border:2px solid #d8b4fe;box-shadow:0 0 34px rgba(168,85,247,.48),0 12px 35px rgba(109,40,217,.36)}
.buzz.penalty{background:linear-gradient(145deg,#5a2633,#32151d);color:#ffd6dd;border:2px solid #fb7185;box-shadow:0 0 24px rgba(251,113,133,.18)}

/* UI-01: one-second synchronized tile selection on HOST, PLAYER and OBS. */
.tile.tile-selecting,.tile.tile-selecting:disabled,
.mobileValues .phoneTile.tile-selecting:disabled{
  opacity:1!important;border:2px solid #ffe27c!important;
  color:#fff7db!important;background:linear-gradient(145deg,#b17c19,#694618)!important;
  box-shadow:0 0 0 3px rgba(255,219,108,.45),0 0 36px rgba(255,205,72,.84),inset 0 0 26px rgba(255,238,160,.38)!important;
  position:relative;z-index:1;animation:tileSelectionGlow 1s ease-in-out both;
}
@keyframes tileSelectionGlow{
  0%{transform:scale(1);filter:brightness(1)}
  34%{transform:scale(1.045);filter:brightness(1.38)}
  70%{transform:scale(1.035);filter:brightness(1.22)}
  100%{transform:scale(1.025);filter:brightness(1.1)}
}
/* UI-02: gold response card and WHITE name, network text, and score. */
.scorebar .player.active,.scorebar .player.active.voice-speaking{
  background:linear-gradient(150deg,#665027,#453618)!important;
  color:#fff!important;border-color:#e4bd59!important;
  box-shadow:inset 0 0 24px rgba(242,192,73,.15),0 0 22px rgba(232,182,69,.32)!important;
  transition:background .18s ease,border-color .18s ease!important;
}
.scorebar .player.active b,.scorebar .player.active .score,.scorebar .player.active .muted{
  color:#fff!important;text-shadow:none!important;
}
@media(prefers-reduced-motion:reduce){.tile.tile-selecting{animation:none!important;transform:none!important}}

.player-reaction{display:inline-block;margin-left:6px;font-size:14px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--muted)}
.player-reaction.wrong{color:var(--bad)}

.scorebar .player.answer-wrong,
.scorebar .player.answer-wrong:is(.active,.voice-speaking),
#app .scorebar .player.answer-wrong,
#app .scorebar .player.answer-wrong:is(.active,.voice-speaking){
  background:linear-gradient(145deg,#593039,#381f2c)!important;
  border-color:#df8d97!important;color:#fff!important;
  outline:2px solid #df8d97!important;
  box-shadow:inset 0 0 20px rgba(223,141,151,.12)!important;
}