:root{
  --bg:#090a12;
  --panel:#131524;
  --panel2:#1b1e31;
  --text:#f4f5ff;
  --muted:#9ea3be;
  --accent:#9c5cff;
  --accent2:#22d3ee;
  --danger:#ff5c7a;
  --green:#28d17c;
  --yellow:#ffd84a;
  --game-height:clamp(650px,calc(100dvh - 205px),820px);
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;background:radial-gradient(circle at top,#22133a 0,#090a12 42%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
button,input,select{font:inherit}
button{cursor:pointer;border:0;border-radius:12px;padding:12px 18px;background:linear-gradient(135deg,var(--accent),#6636d9);color:white;font-weight:800;box-shadow:0 8px 25px #6e3cce44;transition:transform .15s,filter .15s,opacity .15s}
button:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}
button:disabled{opacity:.42;cursor:not-allowed;transform:none}
input,select{border:1px solid #ffffff22;background:#0d0f1a;color:white;border-radius:12px;outline:none}
input:focus,select:focus{border-color:var(--accent2);box-shadow:0 0 0 3px #22d3ee22}
.ghost{background:#262a41;box-shadow:none}
.secondary{background:linear-gradient(135deg,#147e91,#1655a5)}
.danger{background:linear-gradient(135deg,#d93857,#8f1730);box-shadow:0 8px 25px #9d183844}
.compact{width:auto!important;margin:0!important;padding:9px 13px}
.hidden{display:none!important}
.error{color:#ff8da3;min-height:20px;margin:8px 0 0}

header{max-width:1500px;margin:auto;padding:24px;display:flex;justify-content:space-between;align-items:center}
h1{margin:0;letter-spacing:-2px;font-size:34px}h1 span{color:var(--accent2)}
header p{margin:2px 0;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:10px}
.sound-toggle-global{display:inline-flex;align-items:center;gap:8px;min-width:124px;justify-content:center;transition:transform .15s,filter .15s,opacity .15s,border-color .15s,box-shadow .15s}
.sound-toggle-global #soundIcon{font-size:16px;line-height:1}
.sound-toggle-global.muted{opacity:.72;border:1px solid #ffffff18;background:#1d2032}
.sound-toggle-global:not(.muted){border:1px solid #22d3ee55;box-shadow:0 0 18px #22d3ee1f}

main{max-width:1500px;margin:auto;padding:0 24px 30px}
.panel{background:linear-gradient(180deg,#171a2b,#111321);border:1px solid #ffffff12;border-radius:20px;box-shadow:0 18px 55px #0007}

/* Home and live room browser */
.home-shell{max-width:1120px;margin:5vh auto;display:grid;grid-template-columns:minmax(320px,1fr) minmax(430px,1.15fr);gap:18px;align-items:start}
.home{max-width:none;margin:0;padding:36px;text-align:center}
.home h2{font-size:30px;margin:0 0 8px}.home>p{color:var(--muted)}
.field-label{display:block;text-align:left;color:var(--muted);font-size:13px;font-weight:700;margin-top:22px}
.home input{width:100%;padding:16px;margin:8px 0 12px}
.home-actions{display:grid;gap:12px}
.join{display:grid;grid-template-columns:1fr auto;gap:10px}.join input{margin:0;text-transform:uppercase;letter-spacing:4px}
.home-note{font-size:12px;line-height:1.5;text-align:left;padding:12px 14px;border-radius:12px;background:#0d0f1a88;border:1px solid #ffffff0f}
.room-browser{padding:26px;min-height:410px}
.room-browser-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.room-browser-head h2{margin:0 0 4px}.room-browser-head p{margin:0;color:var(--muted)}
.waiting-rooms{display:grid;gap:10px;max-height:480px;overflow:auto;padding-right:3px}
.room-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px;border:1px solid #ffffff12;border-radius:14px;background:#20243a}
.room-row.room-playing{background:linear-gradient(135deg,#162c3d,#20243a);border-color:#22d3ee33}
.room-info{display:grid;gap:5px;text-align:left;min-width:0}.room-info>span{font-size:13px;color:var(--muted)}
.room-title-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.room-title-line strong{font-size:16px}
.room-status{padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;letter-spacing:.6px}.room-status.waiting{background:#28d17c22;color:#74f0ad}.room-status.playing{background:#22d3ee22;color:#68e8fa}
.join-room-btn{width:auto!important;margin:0!important;flex:0 0 auto;padding:10px 16px}
.empty-rooms{padding:38px 18px;text-align:center;color:var(--muted);border:1px dashed #ffffff22;border-radius:14px;background:#0d0f1a88}

/* Room header */
.topline{padding:13px 18px;display:flex;align-items:center;gap:12px;margin-bottom:14px}
.room-code{display:flex;gap:9px;align-items:baseline}.topline small{color:var(--muted)}.topline strong{font-size:22px;letter-spacing:4px}.topline-spacer{flex:1}
.pill{padding:7px 11px;border-radius:999px;background:#272a41;color:#d9dbef;font-size:12px;font-weight:900;letter-spacing:.5px}
.role-pill{background:#3b275c;color:#d9c4ff}.role-pill.guest-role{background:#143d49;color:#70efff}
.guest-banner{margin-bottom:14px;padding:12px 18px;display:flex;align-items:center;gap:12px;border-color:#22d3ee33;background:linear-gradient(90deg,#102732,#151827)}
.guest-banner strong{color:#6eeafa}.guest-banner span{color:#c0c6db;font-size:13px}

/* Main game layout */
.layout{display:grid;grid-template-columns:245px minmax(0,1fr) 310px;gap:14px;height:var(--game-height);align-items:stretch}
.layout>aside{padding:18px;height:100%;min-height:0}
.roster-panel{overflow:auto}
.table{height:100%;min-height:0;padding:20px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.section-heading h3{margin:0 0 10px}.count-badge{font-size:11px;color:var(--muted);background:#252941;padding:4px 7px;border-radius:999px}
.score-goal{margin:-2px 0 10px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.35px;text-transform:uppercase}
.player{--player-color:#8da0c8;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 9px 10px 11px;border-radius:10px;margin:7px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--player-color) 14%,#20243a),#20243a 70%);border:1px solid color-mix(in srgb,var(--player-color) 38%,transparent);border-left:4px solid var(--player-color)}
.player.active{outline:2px solid var(--player-color);box-shadow:0 0 18px color-mix(in srgb,var(--player-color) 25%,transparent)}.player.you{background:linear-gradient(90deg,color-mix(in srgb,var(--player-color) 22%,#292146),#292146 72%)}.player.disconnected{opacity:.58}
.player-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--player-color);font-weight:850}.player small{color:var(--muted)}.player-side{display:grid;justify-items:end;gap:2px;flex:0 0 auto}.player-score{color:var(--player-color)!important;font-weight:900}.player-cards{font-size:10px}
.player-color-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--player-color);box-shadow:0 0 8px var(--player-color);margin-right:7px}
.offline-dot{font-size:9px;color:#ff8da3;margin-left:5px;text-transform:uppercase}
.remove-bot{width:26px!important;height:26px;padding:0!important;margin:0!important;border-radius:8px;background:#4b2430;box-shadow:none}.remove-bot:hover{background:#743346}
.roster-panel>button{width:100%;margin-top:16px}
.bot-controls{margin-top:18px;padding-top:16px;border-top:1px solid #ffffff14}.bot-controls label{display:grid;gap:7px;color:var(--muted);font-size:13px}.bot-controls select{width:100%;padding:10px}.bot-controls small{display:block;margin-top:8px;color:var(--muted)}
.guest-roster{margin-top:22px;padding-top:16px;border-top:1px solid #ffffff14}.empty-inline{color:var(--muted);font-size:12px;margin:8px 0}
.guest-row{padding:9px;border-radius:10px;background:#17242e;margin:7px 0;border:1px solid #22d3ee1f}.guest-row.you{outline:1px solid #22d3ee88}
.guest-name{display:flex;align-items:center;justify-content:space-between;gap:8px}.guest-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.guest-name small{color:#ffcf77}
.guest-actions{display:flex;gap:6px;margin-top:7px}.mini-btn{font-size:10px;padding:5px 7px!important;margin:0!important;width:auto!important;border-radius:7px;box-shadow:none}

/* Cards and table */
.table-scoreline{height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 8px;color:var(--muted);font-size:12px;font-weight:800}.table-scoreline span:last-child{color:#d8dcf4;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.center-zone{flex:1;display:flex;align-items:center;justify-content:center;gap:38px;min-height:0}
.deck,.card{width:126px;height:180px;border-radius:17px;position:relative;color:white}
.deck{background:#0a0c14 url('assets/cards/card-back.png') center/contain no-repeat;border:none;padding:0;width:136px;height:204px;overflow:hidden;box-shadow:0 15px 30px #0008}
.deck::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 62%,rgba(0,0,0,.6));border-radius:17px}
.deck span{position:absolute;top:10px;left:50%;transform:translateX(-50%) rotate(-6deg);z-index:1;background:rgba(0,0,0,.5);padding:4px 8px;border-radius:999px;font-size:16px;letter-spacing:.5px}
.deck b{position:absolute;right:10px;bottom:10px;z-index:1;min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;padding:0 8px;border-radius:999px;background:rgba(0,0,0,.82);border:2px solid rgba(255,255,255,.8);font-size:16px}
.art-card{border:none;background:transparent;box-shadow:none;padding:0;border-radius:17px;overflow:hidden;user-select:none;transition:.15s}
.art-card:hover:not(:disabled){transform:translateY(-12px) rotate(-1deg)}.art-card:disabled{opacity:1}
.card-art{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.45))}
.top-card .art-card{width:150px;height:225px}.hand{height:205px;min-height:205px;flex:0 0 205px;display:flex;overflow-x:auto;overflow-y:hidden;padding:22px 8px 8px;gap:0;align-items:flex-end}
.hand .art-card{flex:0 0 116px;margin-right:-24px;height:174px;width:116px}.hand .art-card:last-child{margin-right:0}
.turn{text-align:center;font-size:18px;font-weight:800;min-height:24px}.guest-hand-message{margin:auto;align-self:center;text-align:center;display:grid;gap:6px;color:var(--muted);padding:24px;border:1px dashed #ffffff20;border-radius:14px;min-width:min(460px,90%)}.guest-hand-message strong{color:#dbe0ff}

/* Reactions */
.reaction{position:absolute;inset:0;z-index:5;background:#090b16ef;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:35px}
.reaction h2{font-size:36px;margin:0}.reaction .timer{font-size:58px;color:var(--accent2);font-weight:1000}.reaction-cards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.reaction-cards .art-card{width:100px;height:150px}
.round-overlay{position:absolute;inset:0;z-index:4;background:#090b16f2;display:flex;align-items:center;justify-content:center;padding:28px}.round-summary-card{width:min(560px,94%);max-height:90%;overflow:auto;padding:26px;border-radius:18px;background:linear-gradient(180deg,#20243a,#141728);border:1px solid #ffffff22;box-shadow:0 24px 80px #000a;text-align:center}.round-summary-card h2{margin:0 0 8px;font-size:32px}.round-summary-card .round-points{font-size:48px;font-weight:1000;color:var(--accent2);line-height:1}.round-summary-card>p{color:var(--muted)}.round-breakdown{display:grid;gap:7px;margin-top:16px;text-align:left}.round-breakdown-row{--player-color:#aab4d2;display:flex;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:9px;background:#111420;border-left:4px solid var(--player-color)}.round-breakdown-row strong{color:var(--player-color)}.round-wait{margin-top:18px;color:#d5d9ef!important;font-weight:800}

/* Feed and chat */
.right-rail{display:flex;overflow:hidden}
.feed-section{min-height:0;display:flex;flex:1;flex-direction:column;overflow:hidden}
#log{flex:1;overflow:auto;min-height:0;padding-right:4px}.log-item{--event-color:#78819d;font-size:13px;color:#c6c9dc;padding:10px 9px;margin:0 0 7px;border-radius:9px;border-left:4px solid var(--event-color);background:#0e111d}.log-player-name{color:var(--name-color);font-weight:900}.log-time{display:block;color:#666e8b;font-size:9px;margin-top:4px}
.chat-toggle{position:relative;display:inline-flex;align-items:center;gap:8px}.chat-toggle.unread{border:1px solid #22d3eeaa;box-shadow:0 0 0 3px #22d3ee1d,0 0 22px #22d3ee35;animation:chatPulse 1.2s ease-in-out infinite alternate}.chat-unread{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ff4167;color:white;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:1000;box-shadow:0 0 12px #ff416777}
@keyframes chatPulse{from{filter:brightness(1)}to{filter:brightness(1.2)}}
.chat-backdrop{position:fixed;inset:0;background:#03040a88;z-index:29}
.chat-dock{position:fixed;z-index:30;top:0;right:0;width:min(390px,94vw);height:100dvh;padding:18px;background:linear-gradient(180deg,#171a2b,#0f111d);border-left:1px solid #ffffff1f;box-shadow:-24px 0 70px #000b;display:flex;flex-direction:column;transform:translateX(102%);transition:transform .22s ease;visibility:hidden}.chat-dock.open{transform:translateX(0);visibility:visible}.chat-dock-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #ffffff14}.chat-dock-head h3{margin:0 0 3px}
.chat-status{font-size:10px;color:#6ff0ab;text-transform:uppercase;font-weight:900;letter-spacing:.6px}.chat-status.muted{color:#ffb56e}
.chat-messages{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:8px;padding:12px 2px}
.chat-message{--sender-color:#8994af;padding:9px 10px;border-radius:11px;background:linear-gradient(90deg,color-mix(in srgb,var(--sender-color) 11%,#20243a),#20243a 70%);border:1px solid color-mix(in srgb,var(--sender-color) 28%,#ffffff0b);border-left:4px solid var(--sender-color)}.chat-message.guest{background:linear-gradient(90deg,color-mix(in srgb,var(--sender-color) 12%,#152b35),#152b35 72%)}.chat-message.system{background:transparent;border:0;padding:4px 2px;color:var(--muted);font-size:11px;display:flex;justify-content:space-between;gap:8px}
.chat-meta{display:flex;align-items:center;gap:6px;margin-bottom:4px}.chat-meta strong{font-size:12px;color:var(--sender-color)}.chat-meta time,.chat-message.system time{color:#717792;font-size:9px;margin-left:auto}.chat-role{font-size:8px;text-transform:uppercase;color:#6feaff;background:#22d3ee1c;padding:2px 4px;border-radius:5px}.chat-text{font-size:13px;line-height:1.35;overflow-wrap:anywhere}
.chat-form{display:grid;grid-template-columns:1fr auto;gap:8px}.chat-form input{width:100%;min-width:0;padding:11px}.chat-form button{align-self:stretch}.chat-error{font-size:11px;min-height:16px;margin-top:4px}

/* Dialogs */
dialog{max-width:760px;width:calc(100% - 32px);border:1px solid #ffffff22;border-radius:20px;background:#141728;color:white;padding:28px;box-shadow:0 30px 100px #000}dialog::backdrop{background:#05060bbb}.close{float:right;padding:6px 12px;background:#272a41;box-shadow:none}.rules-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.rule{padding:10px;border-radius:10px;background:#20243a}.rule b{display:block;color:var(--accent2)}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:15px 0}.color-choice{height:75px;border:3px solid #ffffffaa}.color-choice.red{background:linear-gradient(145deg,#ff405f,#a8122e)}.color-choice.blue{background:linear-gradient(145deg,#2d9cff,#1655a5)}.color-choice.green{background:linear-gradient(145deg,#34d687,#12854d)}.color-choice.yellow{background:linear-gradient(145deg,#ffd84a,#d3870a);color:#1e1730}.target-choice{display:block;width:100%;margin:8px 0}

@media(max-width:1120px){
  .layout{grid-template-columns:220px minmax(0,1fr);height:auto}
  .roster-panel,.table{height:var(--game-height)}
  .right-rail{grid-column:1/-1;height:300px}
}
@media(max-width:820px){
  header{padding:18px}main{padding:0 12px 20px}.home-shell{grid-template-columns:1fr;margin:3vh auto}.room-browser{min-height:auto}
  .topline{flex-wrap:wrap}.topline-spacer{display:none}.room-code{margin-right:auto}.guest-banner{align-items:flex-start;flex-direction:column;gap:4px}
  .layout{grid-template-columns:1fr}.layout>aside{min-height:0}.roster-panel{order:2;height:auto;max-height:520px}.table{order:1;height:620px}.right-rail{order:3;grid-column:auto;height:300px}
  .center-zone{gap:20px}.hand .art-card{flex-basis:105px;width:105px;height:158px}.rules-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  h1{font-size:28px}.header-actions{gap:6px}.sound-toggle-global{min-width:auto;padding:10px 12px}.sound-toggle-global #soundLabel{display:none}.home{padding:24px}.room-browser{padding:20px}.room-row{align-items:flex-start;flex-direction:column}.join-room-btn{width:100%!important}.join{grid-template-columns:1fr}.join button{width:100%}
  .topline{padding:12px}.topline .pill{font-size:10px}.center-zone{gap:10px}.deck{width:116px;height:174px}.top-card .art-card{width:132px;height:198px}.table{padding:12px}
}

/* v0.8 premium room setup, settings, and motion system */
:root{
  --active-color:#22d3ee;
  --active-color-soft:#22d3ee24;
}
body::before{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(34,211,238,.035) 43% 44%,transparent 45% 100%),
    radial-gradient(circle at 12% 18%,rgba(156,92,255,.16),transparent 28%),
    radial-gradient(circle at 87% 12%,rgba(34,211,238,.12),transparent 26%),
    radial-gradient(circle at 50% 110%,rgba(255,65,103,.09),transparent 34%);
  background-size:160px 160px,auto,auto,auto;
}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:50;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.45),rgba(34,211,238,.18) 20%,transparent 58%);
}
body.fx-card-play::after{animation:screenFlash .45s ease-out}
body.fx-special-play::after{animation:specialFlash .75s ease-out}
header h1{font-style:italic;text-shadow:0 0 18px rgba(34,211,238,.2),0 4px 0 rgba(0,0,0,.7)}
header h1 span{text-shadow:0 0 24px rgba(34,211,238,.48)}
.panel{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:#ffffff18;box-shadow:0 18px 55px #0008,inset 0 1px 0 #ffffff0d}
button{position:relative;overflow:hidden}
button::after{content:'';position:absolute;inset:-50% auto -50% -65%;width:45%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,#ffffff38,transparent);transition:left .5s ease;pointer-events:none}
button:hover:not(:disabled)::after{left:125%}

.create-options{display:grid;gap:10px;margin:4px 0 14px;text-align:left}
.option-card{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border-radius:14px;border:1px solid #ffffff14;background:linear-gradient(135deg,#111522,#181c2e);transition:border-color .18s,transform .18s,box-shadow .18s}
.option-card:hover{border-color:#22d3ee55;transform:translateY(-1px);box-shadow:0 10px 28px #0005}
.option-card>input[type=checkbox]{margin:5px 0 0;width:18px;height:18px;accent-color:#22d3ee;flex:0 0 auto}
.option-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#22d3ee13;border:1px solid #22d3ee26;font-size:18px;flex:0 0 auto}
.option-card strong{display:block;color:#f7f8ff;font-size:13px}.option-card small{display:block;color:var(--muted);font-size:11px;line-height:1.45;margin-top:3px}
.option-content{display:grid;gap:7px;min-width:0;flex:1}.option-content select,.option-content input{width:100%;padding:9px 10px}
.privacy-option{cursor:pointer}
.room-row{position:relative;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.room-row::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 55%,#22d3ee0d);pointer-events:none}
.room-row:hover{transform:translateY(-2px);border-color:#22d3ee55;box-shadow:0 14px 34px #0006}

.privacy-pill.private{background:#4a2334;color:#ff9ab0;border:1px solid #ff5c7a55;box-shadow:0 0 16px #ff5c7a1d}
.privacy-pill.public{background:#173b34;color:#77efbd;border:1px solid #28d17c48}
.score-pill{background:linear-gradient(135deg,#2c2648,#162d45);border:1px solid #8d7bff38}

.table{isolation:isolate;border-color:color-mix(in srgb,var(--active-color) 32%,#ffffff12);transition:border-color .35s,box-shadow .35s}
.table::before{content:'';position:absolute;inset:-18%;z-index:0;pointer-events:none;opacity:.32;background:radial-gradient(circle at 50% 43%,var(--active-color-soft),transparent 48%);filter:blur(18px);transition:background .35s,opacity .35s}
.table>*{position:relative;z-index:1}
.table[data-active-color=red]{--active-color:#ff405f;--active-color-soft:#ff405f2b;box-shadow:0 18px 55px #0008,0 0 34px #ff405f18,inset 0 1px 0 #ffffff0d}
.table[data-active-color=blue]{--active-color:#2d9cff;--active-color-soft:#2d9cff2b;box-shadow:0 18px 55px #0008,0 0 34px #2d9cff18,inset 0 1px 0 #ffffff0d}
.table[data-active-color=green]{--active-color:#34d687;--active-color-soft:#34d6872b;box-shadow:0 18px 55px #0008,0 0 34px #34d68718,inset 0 1px 0 #ffffff0d}
.table[data-active-color=yellow]{--active-color:#ffd84a;--active-color-soft:#ffd84a2b;box-shadow:0 18px 55px #0008,0 0 34px #ffd84a18,inset 0 1px 0 #ffffff0d}
.table-scoreline{display:grid;grid-template-columns:minmax(80px,1fr) auto minmax(140px,1fr);align-items:center}
.table-scoreline>span:last-child{justify-self:end}
.active-color-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;background:#0c0f19c7;border:1px solid #ffffff1c;font-size:10px;letter-spacing:.5px;color:#dce1f5;white-space:nowrap;box-shadow:inset 0 1px 0 #ffffff0c}
.active-color-badge i{width:10px;height:10px;border-radius:50%;background:#8994af;box-shadow:0 0 12px currentColor}
.active-color-badge.red i{background:#ff405f}.active-color-badge.blue i{background:#2d9cff}.active-color-badge.green i{background:#34d687}.active-color-badge.yellow i{background:#ffd84a}
.active-color-badge.red{border-color:#ff405f55}.active-color-badge.blue{border-color:#2d9cff55}.active-color-badge.green{border-color:#34d68755}.active-color-badge.yellow{border-color:#ffd84a55}
.center-zone{position:relative}
.center-zone::before{content:'';position:absolute;width:min(55vw,560px);height:min(55vw,560px);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 22px,#ffffff08 23px 24px);animation:arenaRotate 26s linear infinite;pointer-events:none;opacity:.45}
.deck{transition:transform .2s,filter .2s,box-shadow .2s}.deck:hover:not(:disabled){transform:translateY(-6px) rotate(-1deg);filter:brightness(1.08);box-shadow:0 20px 36px #0009,0 0 25px var(--active-color-soft)}
.top-card{perspective:900px}
.card-slam{animation:cardSlam .68s cubic-bezier(.14,.75,.22,1)}
.hand .art-card{transform-origin:center bottom}.hand .art-card:hover:not(:disabled){z-index:8;filter:brightness(1.08)}
.turn{color:#f5f7ff;text-shadow:0 0 16px var(--active-color-soft)}

.player{position:relative;overflow:hidden}.player-main{min-width:0;flex:1;display:grid;gap:7px}.player-progress{height:4px;border-radius:999px;background:#080a11;overflow:hidden;border:1px solid #ffffff0d}.player-progress i{display:block;height:100%;border-radius:inherit;background:var(--player-color);box-shadow:0 0 10px var(--player-color);transition:width .45s ease}.player.active::after{content:'';position:absolute;inset:-2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--player-color) 22%,transparent),transparent);transform:translateX(-110%);animation:activeSweep 1.8s linear infinite;pointer-events:none}.player.turn-pop{animation:turnPop .7s ease}

.reaction{background:radial-gradient(circle at center,#25132aee,#080a13f7 64%);overflow:hidden}
.reaction::before,.reaction::after{content:'';position:absolute;width:520px;height:520px;border-radius:50%;border:2px solid #ff5c7a66;box-shadow:0 0 70px #ff5c7a28;animation:reactionRing 2.2s linear infinite;pointer-events:none}.reaction::after{width:390px;height:390px;border-style:dashed;animation-direction:reverse;animation-duration:1.6s}.reaction>*{position:relative;z-index:1}.reaction h2{text-transform:uppercase;font-style:italic;letter-spacing:-1px;text-shadow:0 0 28px #ff5c7a66}.reaction .timer{text-shadow:0 0 30px #22d3ee66}.reaction-enter{animation:reactionImpact .75s ease}
.round-summary-card{border-width:2px;background:linear-gradient(160deg,#252a44,#11131f 64%);box-shadow:0 30px 100px #000c,0 0 40px color-mix(in srgb,var(--active-color) 22%,transparent)}
.round-summary-card h2{text-transform:uppercase;font-style:italic}.round-points{text-shadow:0 0 25px #22d3ee55}

.right-rail{border-color:#ffffff17}.feed-section::before{content:'LIVE TELEMETRY';display:block;font-size:8px;letter-spacing:1.8px;color:#22d3ee88;margin-bottom:8px}.log-item{transition:transform .15s,border-color .15s}.log-item:hover{transform:translateX(3px)}
.chat-dock{border-left-color:#22d3ee3b;background:linear-gradient(180deg,#171d31,#0b0e18);box-shadow:-24px 0 90px #000d,0 0 34px #22d3ee16}.chat-dock::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,#22d3ee0c,transparent 35%,#9c5cff0b)}
.chat-dock>*{position:relative}.chat-dock-head h3{text-transform:uppercase;font-style:italic;letter-spacing:.4px}

.settings-dialog{max-width:900px;max-height:min(90dvh,780px);overflow:auto;padding:30px;background:linear-gradient(155deg,#171b2d,#0d101b 70%);border:1px solid #22d3ee38;box-shadow:0 35px 120px #000,0 0 50px #22d3ee12}
.settings-title{padding-right:45px}.settings-title h2{font-size:34px;margin:3px 0 7px;text-transform:uppercase;font-style:italic}.settings-title p{margin:0;color:var(--muted)}.settings-kicker{font-size:9px;letter-spacing:2.5px;color:#22d3ee;font-weight:1000}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:22px 0}.settings-card{padding:18px;border-radius:16px;background:linear-gradient(145deg,#1b2034,#111522);border:1px solid #ffffff14;box-shadow:inset 0 1px 0 #ffffff0c}.local-settings-card{grid-column:1/-1}.settings-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:16px}.settings-card-head>span{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#22d3ee13;border:1px solid #22d3ee28}.settings-card h3{margin:0 0 3px}.settings-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}.settings-card>label:not(.switch-row){display:grid;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.settings-card select,.settings-card input[type=number]{width:100%;padding:11px;margin-top:7px}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 0;border-top:1px solid #ffffff0d;cursor:pointer}.switch-row:first-of-type{border-top:0}.switch-row span{display:grid;gap:3px}.switch-row strong{font-size:13px}.switch-row small{color:var(--muted);font-size:10px;line-height:1.35}.switch-row input{appearance:none;width:46px;height:25px;border-radius:999px;background:#30364c;border:1px solid #ffffff18;position:relative;flex:0 0 auto;transition:.2s}.switch-row input::after{content:'';position:absolute;width:19px;height:19px;top:2px;left:3px;border-radius:50%;background:#b7bfd7;transition:.2s;box-shadow:0 2px 8px #0007}.switch-row input:checked{background:linear-gradient(90deg,#147e91,#22d3ee);border-color:#65ecff66}.switch-row input:checked::after{left:23px;background:white;box-shadow:0 0 12px #fff8}.switch-row input:disabled{opacity:.45;cursor:not-allowed}
.score-formula{margin:12px 0;padding:12px;border-radius:12px;background:#0b0e18;border:1px solid #22d3ee1f;display:grid;gap:3px}.score-formula strong{color:#76eafa}.score-formula span{color:var(--muted);font-size:11px}.custom-score-wrap{margin-top:12px}.settings-notice{min-height:20px;color:#aeb6d1;font-size:12px}.settings-save{width:100%;padding:14px;text-transform:uppercase;letter-spacing:.7px}

.fx-layer{position:fixed;inset:0;z-index:80;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;left:var(--x);top:-8vh;width:9px;height:18px;border-radius:2px;background:var(--piece-color);box-shadow:0 0 10px color-mix(in srgb,var(--piece-color) 55%,transparent);animation:confettiFall var(--duration) cubic-bezier(.16,.75,.25,1) var(--delay) forwards}

@keyframes screenFlash{0%{opacity:0}20%{opacity:.38}100%{opacity:0}}
@keyframes specialFlash{0%{opacity:0;filter:hue-rotate(0)}18%{opacity:.72}45%{opacity:.24;filter:hue-rotate(70deg)}100%{opacity:0;filter:hue-rotate(0)}}
@keyframes arenaRotate{to{transform:rotate(360deg)}}
@keyframes cardSlam{0%{opacity:0;transform:translateY(-90px) rotateY(-24deg) rotateZ(8deg) scale(1.35);filter:brightness(1.8)}55%{opacity:1;transform:translateY(8px) rotateY(4deg) rotateZ(-2deg) scale(.96)}75%{transform:translateY(-3px) scale(1.03)}100%{transform:none}}
@keyframes activeSweep{to{transform:translateX(110%)}}
@keyframes turnPop{0%{transform:scale(.94)}45%{transform:scale(1.045);filter:brightness(1.22)}100%{transform:none}}
@keyframes reactionRing{to{transform:rotate(360deg) scale(1.04)}}
@keyframes reactionImpact{0%{opacity:0;transform:scale(1.12)}55%{opacity:1;transform:scale(.98)}100%{transform:none}}
@keyframes confettiFall{0%{transform:translate3d(0,-8vh,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate3d(var(--drift),110vh,0) rotate(var(--spin));opacity:.85}}

.motion-off *, .motion-off *::before, .motion-off *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}

@media(max-width:820px){
  .settings-grid{grid-template-columns:1fr}.local-settings-card{grid-column:auto}
  .table-scoreline{grid-template-columns:1fr auto}.table-scoreline #leaderLabel{grid-column:1/-1;justify-self:stretch;text-align:center}
}
@media(max-width:520px){
  #settingsBtn{padding:10px 11px}.create-options{gap:8px}.option-card{padding:11px}.option-icon{display:none}
  .active-color-badge b{display:none}.active-color-badge{padding:6px}.settings-dialog{padding:22px}.settings-title h2{font-size:27px}
}
@media(prefers-reduced-motion:reduce){
  .center-zone::before,.player.active::after{animation:none}
}
.table>.reaction{position:absolute;z-index:5}
.table>.round-overlay{position:absolute;z-index:4}