@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Space+Mono:wght@400;700&display=swap');

:root { --void:#09041a; --panel:#160c31eF; --line:#55358f; --cyan:#65f6ff; --pink:#ff4fd8; --yellow:#ffe66d; --muted:#a99acb; font-family:'Chakra Petch',system-ui,sans-serif; color:#fff; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow-x:hidden; background:radial-gradient(circle at 50% -10%,#4e1d7e 0,#1c0d3c 35%,var(--void) 72%); }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.18; background:repeating-linear-gradient(0deg,transparent 0 3px,#fff 4px,#fff 5px); mix-blend-mode:overlay; z-index:5; }
body::after { content:""; position:fixed; inset:48% -10% -20%; pointer-events:none; background:linear-gradient(90deg,transparent 49.7%,#ff4fd833 50%,transparent 50.3%),linear-gradient(#ff4fd833 1px,transparent 1px); background-size:100% 100%,55px 55px; transform:perspective(260px) rotateX(55deg); transform-origin:top; opacity:.32; }
button,input { font:inherit; }
button { border:0; cursor:pointer; font-weight:700; letter-spacing:.08em; }
button:disabled { opacity:.35; cursor:not-allowed; filter:grayscale(.5); }
.shell { width:min(1120px,92vw); margin:auto; padding:42px 0 80px; position:relative; z-index:1; }
.hero { text-align:center; margin-bottom:30px; }
.eyebrow,.panel-title,.table-top,.score-readout span,.hint { font:700 .72rem 'Space Mono',monospace; letter-spacing:.18em; color:var(--cyan); }
h1 { margin:10px 0 4px; line-height:.82; font-size:clamp(3.3rem,10vw,7.6rem); letter-spacing:.05em; text-shadow:4px 4px 0 #9b30ff,0 0 30px #ff4fd899; transform:skew(-5deg); }
h1 span { color:var(--cyan); }
.hero p { color:var(--yellow); letter-spacing:.12em; text-transform:uppercase; }
.panel { position:relative; background:linear-gradient(145deg,#201043eF,#0f0925eF); border:1px solid var(--line); border-radius:8px; box-shadow:0 0 0 1px #65f6ff19,0 20px 70px #0008,0 0 28px #8f2aff21; padding:22px; }
.panel::before { content:""; position:absolute; inset:6px; border:1px solid #65f6ff1f; border-radius:4px; pointer-events:none; }
.lobby-panel { width:min(480px,100%); margin:auto; display:grid; gap:14px; overflow:hidden; }
.lobby-panel h2 { margin:2px 0 0; color:#fff; letter-spacing:.12em; text-align:center; }
.leaderboard-panel { width:min(480px,100%); margin:16px auto 0; }.leaderboard-row { display:flex; justify-content:space-between; gap:12px; padding:10px 4px; border-bottom:1px solid #ffffff12; color:var(--muted); font-family:'Space Mono',monospace; }.leaderboard-row strong { color:var(--yellow); font-size:.72rem; white-space:nowrap; }
.queue-status { margin:0; color:var(--muted); text-align:center; font-family:'Space Mono',monospace; line-height:1.6; }.queue-status strong { color:var(--yellow); }
.matchmaking-panel { text-align:center; }
.ai-setup-panel { text-align:center; }.ai-setup-panel h2 { margin:2px 0 0; color:#fff; letter-spacing:.12em; }.ai-roster { display:grid; gap:6px; margin:4px 0; text-align:left; }.ai-roster-row { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; color:var(--muted); background:#65f6ff0d; border:1px solid #65f6ff25; font:700 .75rem 'Space Mono',monospace; }.ai-roster-row span { color:#fff; }.ai-roster-row button { flex:0 0 auto; }
.queue-orbit { position:relative; width:82px; height:82px; margin:4px auto 0; border:1px solid #65f6ff66; border-radius:50%; box-shadow:0 0 26px #65f6ff33; animation:queue-spin 2.4s linear infinite; }
.queue-orbit::before { content:""; position:absolute; inset:12px; border:1px dashed #ff4fd888; border-radius:50%; }
.queue-orbit span { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }.queue-orbit span:nth-child(1) { left:36px; top:-5px; }.queue-orbit span:nth-child(2) { right:4px; bottom:14px; background:var(--pink); box-shadow:0 0 14px var(--pink); }.queue-orbit span:nth-child(3) { left:6px; bottom:14px; background:var(--yellow); box-shadow:0 0 14px var(--yellow); }
@keyframes queue-spin { to { transform:rotate(360deg); } }
.invite-callout { display:grid; gap:4px; padding:14px 16px; color:var(--muted); background:#65f6ff12; border:1px solid var(--cyan); box-shadow:0 0 18px #65f6ff22; font-family:'Space Mono',monospace; }
.invite-callout strong { color:var(--cyan); font-size:.8rem; letter-spacing:.14em; }
.invite-callout b { color:var(--yellow); letter-spacing:.18em; }
.panel-glow { position:absolute; width:180px; height:180px; right:-75px; top:-75px; background:#ff4fd844; filter:blur(40px); }
label { display:grid; gap:7px; font:700 .75rem 'Space Mono',monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
input { width:100%; padding:13px 14px; color:#fff; background:#0a0619; border:1px solid #62409b; border-radius:4px; outline:none; }
input:focus { border-color:var(--cyan); box-shadow:0 0 16px #65f6ff55; }
.primary,.secondary,.small { padding:13px 17px; border-radius:4px; transition:transform .15s,box-shadow .15s; }
.primary { color:#09041a; background:var(--cyan); box-shadow:4px 4px 0 #a82dff,0 0 20px #65f6ff66; }
.secondary { color:#fff; background:#2a1550; border:1px solid #8d55dd; }
.primary:hover,.secondary:hover,.small:hover { transform:translateY(-2px); box-shadow:0 0 20px #ff4fd866; }
.small { color:var(--cyan); background:transparent; border:1px solid var(--cyan); padding:8px 11px; font-size:.68rem; }
.divider { display:flex; align-items:center; gap:10px; margin:8px 0; color:var(--pink); font:700 .65rem 'Space Mono',monospace; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,var(--pink)); }.divider::after { background:linear-gradient(90deg,var(--pink),transparent); }
.error { color:#ff6f91; font-family:'Space Mono',monospace; }
.match-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--muted); font:700 .75rem 'Space Mono',monospace; }.match-bar b { color:var(--cyan); letter-spacing:.16em; }
.game-grid { display:grid; grid-template-columns:270px 1fr; gap:16px; }
.scoreboard { align-self:start; }.panel-title { display:flex; justify-content:space-between; margin-bottom:15px; }.panel-title span { color:var(--pink); }
.player { display:flex; justify-content:space-between; padding:12px 8px; margin:3px 0; color:var(--muted); border-bottom:1px solid #ffffff0d; font-family:'Space Mono',monospace; }.player strong { color:#fff; }.player.active { color:var(--cyan); background:#65f6ff12; border-left:3px solid var(--cyan); }.scoreboard .primary { width:100%; margin-top:20px; }
.table { min-height:540px; text-align:center; overflow:hidden; }.table-top { min-height:20px; color:var(--yellow); text-transform:uppercase; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--pink); box-shadow:0 0 12px var(--pink); }.table h2 { margin:15px 0 0; color:#fff; font-size:clamp(1.3rem,3vw,2rem); letter-spacing:.16em; }
.dice-tray { display:flex; justify-content:center; align-items:center; gap:14px; flex-wrap:wrap; min-height:140px; margin:32px 0 20px; }
.die { position:relative; width:78px; height:78px; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); padding:11px; border:2px solid #9e62e7; border-radius:8px; color:#160c31; background:linear-gradient(145deg,#fff,#b8c9ff); box-shadow:5px 5px 0 #ff4fd8,0 0 18px #65f6ff55; transition:transform .16s,box-shadow .16s; }.die:hover { transform:translateY(-7px) rotate(-2deg); }.die.selected { border-color:var(--yellow); transform:translateY(-12px) rotate(3deg); box-shadow:5px 5px 0 var(--yellow),0 0 32px #ffe66daa; }
.pip { width:13px; height:13px; align-self:center; justify-self:center; border-radius:50%; background:#130724; }.top-left{grid-column:1;grid-row:1}.top-right{grid-column:3;grid-row:1}.middle-left{grid-column:1;grid-row:2}.center{grid-column:2;grid-row:2}.middle-right{grid-column:3;grid-row:2}.bottom-left{grid-column:1;grid-row:3}.bottom-right{grid-column:3;grid-row:3}
.score-readout { display:grid; gap:3px; margin:10px 0 18px; }.score-readout strong { color:var(--yellow); font:700 clamp(2.4rem,6vw,4rem) 'Space Mono',monospace; text-shadow:0 0 22px #ffe66d88; }.actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }.hint { color:var(--muted); margin-top:22px; font-size:.62rem; }
.series-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:18px; }.series-actions .primary:disabled { opacity:.55; }
.hot-table { border-color:var(--yellow); box-shadow:0 0 0 1px #ffe66d55,0 0 55px #ff4fd855,0 0 120px #65f6ff22; }.hot-burst { display:flex; justify-content:center; align-items:baseline; gap:10px; margin:-5px 0 -12px; color:var(--pink); font-weight:700; font-size:clamp(2rem,6vw,4.8rem); letter-spacing:.08em; text-shadow:0 0 8px #fff,0 0 24px var(--pink),5px 5px 0 #7027c6; animation:hot-pulse .65s ease-in-out infinite alternate; }.hot-burst small { color:var(--yellow); font:700 1rem 'Space Mono',monospace; }
@keyframes hot-pulse { from { transform:scale(.98) rotate(-2deg); filter:brightness(1); } to { transform:scale(1.04) rotate(2deg); filter:brightness(1.5); } }
.farkle-event { animation:farkle-shake .48s ease-in-out 2; }.farkle-event .table { border-color:#ff6f91; box-shadow:0 0 0 2px #ff6f9144,0 0 70px #ff4fd866; }.farkle-burst { display:flex; flex-direction:column; align-items:center; gap:3px; margin:18px 0 -10px; color:#ff6f91; font-weight:700; font-size:clamp(2.2rem,7vw,5.2rem); line-height:.9; letter-spacing:.1em; text-shadow:0 0 10px #fff,0 0 28px #ff4fd8,5px 5px 0 #7d245f; animation:farkle-pop 1.45s cubic-bezier(.2,.8,.2,1) both; }.farkle-burst small { color:var(--yellow); font:700 .75rem 'Space Mono',monospace; letter-spacing:.18em; }.farkle-burst::before,.farkle-burst::after { content:"✦"; color:var(--yellow); font-size:1.2rem; animation:farkle-spark 1.45s ease-out both; }.farkle-burst::after { content:"✧"; animation-delay:.08s; } 
@keyframes farkle-pop { 0% { opacity:0; transform:scale(.35) rotate(-8deg); filter:blur(8px); } 35% { opacity:1; transform:scale(1.14) rotate(3deg); filter:blur(0); } 72% { opacity:1; transform:scale(1) rotate(-1deg); } 100% { opacity:0; transform:scale(.96); } }.farkle-burst::before { transform:translateX(-90px) rotate(-20deg); }.farkle-burst::after { transform:translateX(90px) rotate(20deg); } @keyframes farkle-spark { 0% { opacity:0; transform:translateY(20px) scale(.4); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-28px) scale(1.5); } }.farkle-event .hot-burst { animation-name:hot-pulse; }
@keyframes farkle-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px) rotate(-.25deg); } 50% { transform:translateX(5px) rotate(.25deg); } 75% { transform:translateX(-3px); } }
.sizzle-burst { display:flex; flex-direction:column; align-items:center; gap:4px; margin:24px 0 -12px; color:var(--cyan); font-weight:700; line-height:.95; letter-spacing:.1em; text-shadow:0 0 8px #fff,0 0 24px var(--cyan),4px 4px 0 #7d245f; animation:sizzle-pop .9s cubic-bezier(.2,.8,.2,1) both; }.sizzle-burst span { font-size:clamp(1.8rem,5vw,3.8rem); }.sizzle-burst small { color:var(--yellow); font:700 .68rem 'Space Mono',monospace; letter-spacing:.18em; }.sizzle-burst::before,.sizzle-burst::after { content:'✦'; color:var(--pink); font-size:1.1rem; animation:sizzle-spark .9s ease-out both; }.sizzle-burst::before { transform:translateX(-120px) rotate(-18deg); }.sizzle-burst::after { content:'✧'; transform:translateX(120px) rotate(18deg); animation-delay:.08s; }
@keyframes sizzle-pop { 0% { opacity:0; transform:scale(.35) rotate(-7deg); filter:blur(7px); } 35% { opacity:1; transform:scale(1.12) rotate(2deg); filter:blur(0); } 100% { opacity:1; transform:scale(1) rotate(0); } } @keyframes sizzle-spark { 0% { opacity:0; transform:translateY(18px) scale(.3); } 35% { opacity:1; } 100% { opacity:0; transform:translateY(-24px) scale(1.5); } }
.player.winner { color:var(--yellow); text-shadow:0 0 12px #ffe66d88; }.winner-event .table { border-color:var(--yellow); box-shadow:0 0 0 2px #ffe66d55,0 0 90px #ffe66d66; }.loser-event .table { border-color:#ff6f91; box-shadow:0 0 0 2px #ff6f9144,0 0 70px #ff4fd855; }
.outcome-burst { display:flex; flex-direction:column; align-items:center; gap:4px; margin:38px 0 -4px; font-weight:700; line-height:.9; letter-spacing:.12em; animation:outcome-drop 1.2s cubic-bezier(.2,.8,.2,1) both; }.outcome-burst span { font-size:clamp(2.8rem,8vw,6rem); }.outcome-burst small { font:700 .75rem 'Space Mono',monospace; letter-spacing:.18em; }.winner-burst { color:var(--yellow); text-shadow:0 0 10px #fff,0 0 30px var(--yellow),6px 6px 0 #a82dff; }.loser-burst { color:#ff8db2; text-shadow:0 0 10px #fff,0 0 28px var(--pink),5px 5px 0 #70275f; animation-name:outcome-fade; }
@keyframes outcome-drop { 0% { opacity:0; transform:translateY(-35px) scale(.55) rotate(-6deg); } 45% { opacity:1; transform:translateY(6px) scale(1.08) rotate(2deg); } 100% { opacity:1; transform:translateY(0) scale(1); } } @keyframes outcome-fade { 0% { opacity:0; transform:scale(.7); } 35% { opacity:1; transform:scale(1.05); } 100% { opacity:1; transform:scale(1); } }
@media (max-width:760px) { .game-grid { grid-template-columns:1fr; }.scoreboard { order:2; }.table { order:1; }.die { width:64px; height:64px; }.pip { width:11px; height:11px; } }