:root{--bg:#0b0f1a;--panel:#141b2e;--text:#e6edf7;--muted:#8b97ad;--accent:#4ade80;--accent2:#60a5fa}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--accent2);text-decoration:none}body.arcade{background:radial-gradient(80% 50% at 50% -10%,#2b1a5e55,#0000),radial-gradient(60% 40% at 80% 110%,#0e7a4d33,#0000),#07020f;overflow-x:hidden}.grid-floor{transform-origin:top;pointer-events:none;background:linear-gradient(#0000,#07020f 95%),repeating-linear-gradient(90deg,#ff2bd633 0 2px,#0000 2px 80px),repeating-linear-gradient(0deg,#ff2bd622 0 2px,#0000 2px 56px);height:42vh;animation:3.5s linear infinite grid-scroll;position:fixed;bottom:0;left:-50vw;right:-50vw;transform:perspective(360px)rotateX(58deg)}@keyframes grid-scroll{0%{background-position:0 0,0 0,0 0}to{background-position:0 0,0 0,0 56px}}.scanlines{mix-blend-mode:overlay;pointer-events:none;z-index:3;background:repeating-linear-gradient(0deg,#0000 0 3px,#00000026 3px 4px);position:fixed;inset:0}.home{z-index:2;text-align:center;max-width:1500px;margin:0 auto;padding:56px 32px 40px;position:relative}.floaters{pointer-events:none;z-index:1;position:fixed;inset:0}.floaters span{opacity:0;font-size:1.8rem;animation-name:float-up;animation-timing-function:linear;animation-iteration-count:infinite;position:absolute;bottom:-8%}@keyframes float-up{0%{opacity:0;transform:translateY(0)rotate(-8deg)}8%{opacity:.16}85%{opacity:.16}to{opacity:0;transform:translateY(-110vh)rotate(10deg)}}.ticker{background:#0d0620aa;border-top:1px solid #3b2a6e;border-bottom:1px solid #3b2a6e;margin:0 -24px 40px;overflow:hidden}.ticker-track{white-space:nowrap;animation:26s linear infinite ticker-scroll;display:inline-flex}.ticker-track span{color:#b9a8ee;letter-spacing:.28em;padding:9px 0;font-size:.82rem;font-weight:700}@keyframes ticker-scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.zone{margin-bottom:46px}.zone.hidden{display:none}.recent-chips{flex-wrap:wrap;justify-content:flex-start;gap:12px;display:flex}.recent-chip{color:#7dd3fc;letter-spacing:.08em;background:#0a1a26dd;border:1px solid #155e6e;border-radius:999px;align-items:center;gap:9px;padding:9px 18px 9px 12px;font-size:.86rem;font-weight:700;transition:transform .15s,border-color .15s,box-shadow .15s;animation:.5s cubic-bezier(.2,.7,.3,1) backwards card-in;display:inline-flex}.recent-chips .recent-chip:first-child{animation-delay:30ms}.recent-chips .recent-chip:nth-child(2){animation-delay:90ms}.recent-chips .recent-chip:nth-child(3){animation-delay:.15s}.recent-chips .recent-chip:nth-child(4){animation-delay:.21s}.recent-chips .recent-chip:nth-child(5){animation-delay:.27s}.recent-chips .recent-chip:nth-child(6){animation-delay:.33s}.recent-chip:hover{border-color:#22d3ee;transform:translateY(-3px);box-shadow:0 0 18px #22d3ee44}.chip-emoji{font-size:1.25rem}.section-h{color:var(--zc,#19e6a2);letter-spacing:.34em;text-shadow:0 0 14px var(--zc);text-align:left;align-items:center;gap:12px;margin:0 0 18px;font-size:1rem;display:flex}.section-h:after{content:"";background:linear-gradient(90deg, var(--zc), transparent);opacity:.5;flex:1;height:1px}.zone-emoji{text-shadow:none;font-size:1.5rem}.section-h .count{letter-spacing:.1em;border:1px solid var(--zc);opacity:.85;border-radius:999px;padding:2px 10px;font-size:.72rem}.hero-hand{font-size:4rem;animation:2.4s ease-in-out infinite hand-wave;display:inline-block}@keyframes hand-wave{0%,to{transform:rotate(-12deg)}50%{transform:rotate(12deg)}}.neon-title{letter-spacing:.12em;color:#fff;text-shadow:0 0 6px #fff,0 0 18px #19e6a2,0 0 42px #19e6a2,0 0 80px #0c9e6c;margin:8px 0 4px;font-size:clamp(2.6rem,8vw,4.6rem);font-weight:900;animation:4s linear infinite neon-flicker}@keyframes neon-flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}96%{opacity:.75}97%{opacity:1}}.tagline{color:#ff2bd6;letter-spacing:.4em;text-shadow:0 0 12px #ff2bd688;margin:0 0 44px;font-size:clamp(.7rem,2.2vw,1rem);font-weight:700}.cards{text-align:left;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px;display:grid}.cards .card{animation:.55s cubic-bezier(.2,.7,.3,1) backwards card-in}.cards .card:first-child{animation-delay:50ms}.cards .card:nth-child(2){animation-delay:.12s}.cards .card:nth-child(3){animation-delay:.19s}.cards .card:nth-child(4){animation-delay:.26s}.cards .card:nth-child(5){animation-delay:.33s}.cards .card:nth-child(6){animation-delay:.4s}.cards .card:nth-child(7){animation-delay:.47s}@keyframes card-in{0%{opacity:0;transform:translateY(26px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}.card.featured{grid-column:span 2;align-items:center;gap:28px;padding:28px 32px;display:flex}.cards .card.featured:only-child{grid-column:1/-1}@media (width<=620px){.card.featured{text-align:center;flex-direction:column;grid-column:1/-1}}.card.featured .icon-badge{border-radius:32px;flex-shrink:0;width:128px;height:128px}.card.featured .icon-badge:after{animation-name:orbit-xl}@keyframes orbit-xl{0%{transform:rotate(0)translate(76px)rotate(0)}to{transform:rotate(1turn)translate(76px)rotate(-1turn)}}.card.featured .glyph{font-size:4.2rem;animation-duration:2.4s}.card.featured h2{margin-top:0;font-size:1.7rem}.card.featured p{max-width:560px;font-size:1.02rem}.card-body{flex:1}.cards .card:nth-child(odd):hover{transform:translateY(-6px)scale(1.02)rotate(-1deg)}.cards .card:nth-child(2n):hover{transform:translateY(-6px)scale(1.02)rotate(1deg)}.cards .card.featured:hover{transform:translateY(-5px)scale(1.012)}.card{color:var(--text);background:linear-gradient(160deg,#150b30ee,#0b0620ee);border:1px solid #3b2a6e;border-radius:16px;padding:26px 24px 22px;transition:transform .18s,box-shadow .18s,border-color .18s;display:block;position:relative;overflow:hidden}.card:before{content:"";background:linear-gradient(120deg,#0000 30%,#ffffff10 50%,#0000 70%);transition:transform .5s;position:absolute;inset:0;transform:translate(-100%)}.card:hover:before{transform:translate(100%)}.card-green:hover{border-color:#19e6a2;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #19e6a244,0 14px 40px #0008}.card-pink:hover{border-color:#ff2bd6;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #ff2bd644,0 14px 40px #0008}.card{--ic1:#60a5fa;--ic2:#a78bfa}.card-green{--ic1:#19e6a2;--ic2:#86efac}.card-pink{--ic1:#ff2bd6;--ic2:#f472b6}.card-rose{--ic1:#f472b6;--ic2:#fb7185}.card-gold{--ic1:#facc15;--ic2:#fb923c}.card-blue{--ic1:#60a5fa;--ic2:#22d3ee}.card-cyan{--ic1:#22d3ee;--ic2:#67e8f9}.icon-badge{isolation:isolate;width:86px;height:86px;box-shadow:0 0 22px color-mix(in srgb, var(--ic1) 25%, transparent), inset 0 0 18px #0008;background:radial-gradient(circle at 30% 25%,#ffffff14,#0000 60%),linear-gradient(150deg,#181034,#0b0620);border-radius:24px;place-items:center;margin-bottom:10px;display:grid;position:relative}.icon-badge:before{content:"";background:conic-gradient(from 210deg, var(--ic1), var(--ic2), transparent 55%, var(--ic1));z-index:-1;border-radius:26px;position:absolute;inset:-2.5px}.icon-badge:after{content:"✦";color:var(--ic1);text-shadow:0 0 8px var(--ic1);pointer-events:none;font-size:13px;animation:5s linear infinite orbit;position:absolute}@keyframes orbit{0%{transform:rotate(0)translate(52px)rotate(0)}to{transform:rotate(1turn)translate(52px)rotate(-1turn)}}.glyph{filter:drop-shadow(0 0 12px var(--ic1));font-size:2.6rem;line-height:1;animation:3s ease-in-out infinite emoji-bob}.card:hover .glyph{animation:.45s glyph-pop}@keyframes glyph-pop{30%{transform:scale(1.25)rotate(-8deg)}70%{transform:scale(1.08)rotate(6deg)}}@keyframes emoji-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-7px)}}.scene-pong .fx-ball{background:#fff;border-radius:50%;width:11px;height:11px;animation:1.2s ease-in-out infinite alternate fx-pong;position:absolute;box-shadow:0 0 9px #fff}@keyframes fx-pong{0%{transform:translate(-44px,26px)}to{transform:translate(44px,-26px)}}.scene-rps .glyph{opacity:0;animation:2.7s infinite both rps-fade;position:absolute}.scene-rps .g2{animation-delay:.9s}.scene-rps .g3{animation-delay:1.8s}@keyframes rps-fade{0%,30%{opacity:1;transform:scale(1)}36%,96%{opacity:0;transform:scale(.7)}to{opacity:1}}.scene-hippo .fx-fly{font-size:1.35rem;font-style:normal;animation:1.8s ease-in infinite fx-fly;position:absolute}@keyframes fx-fly{0%{opacity:0;transform:translate(64px)scale(1)}18%{opacity:1}78%{opacity:1;transform:translate(8px)scale(.6)}to{opacity:0;transform:translate(0)scale(.15)}}.scene-dance .glyph{animation:1.6s step-end infinite both dance-swap;position:absolute}.scene-dance .g2{animation-delay:.8s}@keyframes dance-swap{0%{opacity:1}50%{opacity:0}to{opacity:1}}.scene-paint .fx-stroke{transform-origin:0;background:linear-gradient(90deg,#f87171,#facc15,#4ade80,#60a5fa,#a78bfa);border-radius:4px;height:6px;animation:2.2s ease-in-out infinite fx-stroke;position:absolute;bottom:18px;left:22px;right:22px}@keyframes fx-stroke{0%{opacity:1;transform:scaleX(0)}65%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}.scene-ball .glyph{animation:1.6s ease-in-out infinite fx-spin-bounce}@keyframes fx-spin-bounce{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-14px)rotate(180deg)}}.card h2{letter-spacing:.14em;margin:12px 0 8px;font-size:1.35rem}.card-rose:hover{border-color:#f472b6;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #f472b644,0 14px 40px #0008}.card-gold:hover{border-color:#facc15;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #facc1544,0 14px 40px #0008}.card-blue:hover{border-color:#60a5fa;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #60a5fa44,0 14px 40px #0008}.card-cyan:hover{border-color:#22d3ee;transform:translateY(-6px)scale(1.02);box-shadow:0 0 30px #22d3ee44,0 14px 40px #0008}.card-cyan h2{color:#22d3ee;text-shadow:0 0 14px #22d3ee66}.card-cyan:hover .play-btn{color:#22d3ee;border-color:#22d3ee}.card-green h2{color:#19e6a2;text-shadow:0 0 14px #19e6a266}.card-pink h2{color:#ff2bd6;text-shadow:0 0 14px #ff2bd666}.card-rose h2{color:#f472b6;text-shadow:0 0 14px #f472b666}.card-gold h2{color:#facc15;text-shadow:0 0 14px #facc1566}.card-blue h2{color:#60a5fa;text-shadow:0 0 14px #60a5fa66}.card-rose:hover .play-btn{color:#f472b6;border-color:#f472b6}.card-gold:hover .play-btn{color:#facc15;border-color:#facc15}.card-blue:hover .play-btn{color:#60a5fa;border-color:#60a5fa}.card p{color:#9d8fc9;margin:0 0 18px;font-size:.95rem;line-height:1.5}.play-btn{letter-spacing:.18em;color:#cfc3f5;background:#1a0f3a;border:1px solid #3b2a6e;border-radius:8px;padding:9px 16px;font-size:.78rem;font-weight:800;animation:1.6s steps(2,start) infinite btn-blink;display:inline-block}@keyframes btn-blink{0%,60%,to{opacity:1}80%{opacity:.55}}.card-green .play-btn:hover,.card-green:hover .play-btn{color:#19e6a2;border-color:#19e6a2}.card-pink .play-btn:hover,.card-pink:hover .play-btn{color:#ff2bd6;border-color:#ff2bd6}.home footer{color:#6e619a;margin-top:52px;font-size:.85rem;line-height:1.6}.home footer a{color:#b9a8ee}.game-page{background:radial-gradient(70% 40% at 50% -10%,#2b1a5e44,#0000),#07020f;flex-direction:column;align-items:center;height:100vh;display:flex;overflow:hidden}.game-bar{background:#0d0620cc;border-bottom:1px solid #3b2a6e;align-items:center;gap:16px;width:100%;padding:8px 18px;display:flex}.game-bar a{color:#b9a8ee}.game-bar a:hover{color:#e6edf7}.game-bar h1{letter-spacing:.08em;text-shadow:0 0 12px #19e6a266;margin:0;font-size:1.05rem;font-weight:800}.game-bar .status{color:#8b7bbf;letter-spacing:.04em;margin-left:auto;font-size:.88rem}.cam-select{color:#8b7bbf;font-size:.82rem}.cam-select select{color:var(--text);background:#1a0f3a;border:1px solid #3b2a6e;border-radius:8px;padding:3px 8px;font-size:.82rem}.stage{flex:1;width:100%;min-height:0;position:relative}canvas.game{background:#060912;width:100%;height:100%;display:block}canvas.preview{opacity:.9;border:1px solid #3b2a6e;border-radius:10px;width:176px;height:132px;position:absolute;bottom:26px;right:26px;box-shadow:0 0 18px #2b1a5e88}.overlay{text-align:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:radial-gradient(60% 45% at 50% 30%,#2b1a5e55,#0000),#07020fe0;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.overlay h2{letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px #fff,0 0 22px #19e6a2,0 0 50px #0c9e6c;margin:0;font-size:2.1rem;font-weight:900}.overlay p{color:#9d8fc9;max-width:460px;margin:0;line-height:1.55}.overlay button{color:#04130b;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;background:linear-gradient(150deg,#2cf0b0,#0c9e6c);border:1px solid #7df5cf;border-radius:12px;margin-top:12px;padding:14px 34px;font-size:1rem;font-weight:800;transition:transform .15s,box-shadow .15s;animation:2.2s ease-in-out infinite btn-glow;position:relative;box-shadow:0 0 24px #19e6a255,inset 0 0 14px #fff2}.overlay button:hover{transform:translateY(-2px)scale(1.04);box-shadow:0 0 42px #19e6a2aa,inset 0 0 14px #fff3}.overlay button:active{transform:translateY(0)scale(.98)}@keyframes btn-glow{0%,to{box-shadow:0 0 18px #19e6a244,inset 0 0 14px #fff2}50%{box-shadow:0 0 34px #19e6a288,inset 0 0 14px #fff2}}.overlay button.alt{color:#041025;background:linear-gradient(150deg,#7cb9fd,#2563eb);border-color:#a8cffe;animation-name:btn-glow-blue;box-shadow:0 0 24px #60a5fa55,inset 0 0 14px #fff2}@keyframes btn-glow-blue{0%,to{box-shadow:0 0 18px #60a5fa44,inset 0 0 14px #fff2}50%{box-shadow:0 0 34px #60a5fa88,inset 0 0 14px #fff2}}.overlay button.alt:hover{box-shadow:0 0 42px #60a5faaa,inset 0 0 14px #fff3}.overlay.hidden{display:none}.overlay .error{color:#f87171}.overlay .btn-row{gap:16px;display:flex}.overlay .hint{color:#6e619a;max-width:440px;font-size:.82rem}.overlay .btn-row.hidden,.overlay .hint.hidden{display:none}.loading{flex-direction:column;align-items:center;gap:12px;width:min(440px,80%);margin-top:12px;display:flex}.loading.hidden{display:none}.loading .bar{background:#1a0f3a;border:1px solid #3b2a6e;border-radius:999px;width:100%;height:12px;overflow:hidden}.loading .fill{background:linear-gradient(90deg,#19e6a2,#22d3ee,#ff2bd6,#19e6a2) 0 0/300% 100%;border-radius:999px;width:0%;height:100%;transition:width .25s;animation:1.6s linear infinite fill-flow;box-shadow:0 0 14px #22d3ee88}@keyframes fill-flow{0%{background-position:0 0}to{background-position:300% 0}}.loading-text{color:#8b7bbf;letter-spacing:.14em;text-transform:uppercase;margin:0;font-size:.88rem}
