.root{--void:#0E0620;--void2:#1A0B33;--panel:#1D1038;--violet:#8B2FC9;--magenta:#D94BF0;--cyan:#3EE7F5;--yellow:#F5D93E;--liliac:#C9C2E8;--sqdark:#4A2A7A;--white:#F4EFFF;--dim:#9D8FC4;--boardLight:#C9C2E8;--boardDark:#4A2A7A;min-height:100vh;min-height:100dvh;background:radial-gradient(900px 500px at 50% 0%,#3A1560 0%,var(--void2) 45%,var(--void) 100%);color:var(--white);font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;display:flex;flex-direction:column;align-items:center;padding:calc(22px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(44px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));position:relative;overflow-x:hidden}.root:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,#00000018 3px 4px)}.starField{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:0}.star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 4px 1px #fffa;animation-name:twinkle;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes twinkle{0%,to{opacity:.15;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}.hdr{text-align:center;margin-bottom:16px;z-index:1}.hdr .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 10px #3EE7F5AA}.hdr .eyebrow .live{width:8px;height:8px;border-radius:50%;background:#ff4b4b;box-shadow:0 0 8px #ff4b4b;animation:blink 1.2s infinite}.socialLinks{display:inline-flex;align-items:center;gap:9px;margin-left:2px}.socialIcon{display:flex;color:var(--cyan);opacity:.8;text-shadow:none;transition:opacity .15s ease,filter .15s ease}.socialIcon:hover{opacity:1;filter:drop-shadow(0 0 6px #3EE7F5AA)}@keyframes blink{0%,to{opacity:1}50%{opacity:.35}}.hdr h1{margin:6px 0 0;font-size:clamp(34px,7vw,54px);line-height:.95;font-family:Arial Black,Impact,Haettenschweiler,sans-serif;font-style:italic;letter-spacing:.01em;transform:rotate(-1.5deg);background:linear-gradient(180deg,#FFFFFF 15%,#E9B8FF 45%,var(--magenta) 85%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 14px #D94BF066) drop-shadow(3px 3px 0 #150C24);text-transform:uppercase}.hdr .sub{margin-top:6px;font-family:Arial Black,Impact,sans-serif;font-style:italic;font-size:15px;color:var(--yellow);text-transform:uppercase;letter-spacing:.06em;text-shadow:0 0 12px #F5D93E66,2px 2px 0 #150C24;transform:rotate(-1deg)}.layout{display:flex;gap:22px;flex-wrap:wrap;justify-content:center;align-items:flex-start;z-index:1;width:100%}.boardCol{display:flex;flex-direction:column;gap:10px}.card{display:flex;align-items:center;gap:10px;background:#1d1038cc;border:1px solid #8B2FC966;border-radius:10px;padding:8px 12px 8px 24px;box-shadow:0 0 18px #8b2fc922,inset 0 0 22px #8b2fc91a;width:calc(min(88vw,440px) + 24px);box-sizing:border-box}.card.turnGlow{border-color:var(--cyan);box-shadow:0 0 18px #3ee7f544,inset 0 0 22px #3ee7f51a}.avatarBox{background:#120a26;border-radius:8px;padding:4px;border:1px solid #ffffff18;flex:none}.avatarBox.reactionBox{padding:6px;transition:box-shadow .3s ease,border-color .3s ease}.avatarBox.reactionBox.angry{border-color:#f05348;box-shadow:0 0 22px #f0534877;background:#1a0808}.avatarBox.reactionBox.happy{border-color:#48b2a7;box-shadow:0 0 22px #7cfff177;background:#08150f}.reactionImg{display:block;width:150px;max-width:40vw;height:auto;border-radius:6px}.youAvatarImg{display:block;width:36px;height:36px;object-fit:contain}.cardName{font-family:Arial Black,Impact,sans-serif;font-style:italic;font-size:14px;text-transform:uppercase;letter-spacing:.04em}.cardName.bot{color:var(--magenta);text-shadow:0 0 8px #D94BF055}.cardName.you{color:var(--cyan);text-shadow:0 0 8px #3EE7F555}.cardMeta{flex:1;min-width:0}.tray{display:flex;flex-wrap:wrap;gap:1px;margin-top:2px;min-height:20px;align-items:center}.trayPc{width:20px;height:20px}.trayPc.wpc{filter:drop-shadow(0 1px 1px #00000066)}.trayPc.bpc{filter:drop-shadow(0 1px 1px #00000066) drop-shadow(1px 0 0 #C9C2E8) drop-shadow(-1px 0 0 #C9C2E8) drop-shadow(0 1px 0 #C9C2E8) drop-shadow(0 -1px 0 #C9C2E8)}.trayEmpty{font-size:11px;color:var(--dim);font-style:italic}.trayEmpty.openingTag{color:var(--cyan);font-style:normal;font-weight:700}.puzzleMeta{font-style:normal;line-height:1.3;margin-top:2px}.lead{font-family:Arial Black,Impact,sans-serif;font-size:15px;color:var(--yellow);text-shadow:0 0 8px #F5D93E77,1px 1px 0 #150C24;flex:none}.boardWrap{display:flex;gap:10px}.evalbar{width:14px;border-radius:7px;overflow:hidden;background:#170e2c;border:1px solid #8B2FC955;display:flex;flex-direction:column-reverse;position:relative;flex:none}.evalbar .pfill{background:linear-gradient(#B7F6FF,var(--cyan));box-shadow:0 0 10px #3ee7f5aa;transition:height .5s ease}.evalbar .tick{position:absolute;left:0;right:0;top:50%;height:1px;background:#fff3}.board{border:5px solid #120A26;outline:1px solid #8B2FC966;border-radius:8px;box-shadow:0 0 30px #8b2fc94d,0 16px 40px #0008;width:min(88vw,440px);aspect-ratio:1;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none;position:relative;touch-action:none}.root.noEval .board{width:min(96vw,460px)}.root.noEval .card{width:min(96vw,460px);padding-left:12px}.arrowLayer{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:6;filter:drop-shadow(0 0 4px #F5D93E88)}.brow{flex:1;display:flex}.sq{flex:1;position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}.sq:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px;z-index:3}.sq.light{background:var(--boardLight)}.sq.dark{background:var(--boardDark)}.sq.last:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#d94bf03d}.sq.botLast:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 42%,#FFFFFF77 0%,#F5D93E33 42%,transparent 72%);box-shadow:inset 0 0 16px 2px #f5d93e88;animation:botShine 1.8s ease-in-out infinite}@keyframes botShine{0%,to{opacity:.55}50%{opacity:1}}.sq.playerLast:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 45%,#3EE7F52E 0%,transparent 68%);box-shadow:inset 0 0 9px 1px #3ee7f544}.sq.sel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px var(--cyan),inset 0 0 14px #3ee7f588}.sq.chk{background:radial-gradient(circle,#F0534899 15%,transparent 75%),var(--boardDark)}.sq.chk.light{background:radial-gradient(circle,#F0534899 15%,transparent 75%),var(--boardLight)}.sq.hintFrom:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 16px #f5d93e99}.sq.hintTo:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px var(--yellow),inset 0 0 16px #f5d93e99}.sq.dragOver:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;box-shadow:inset 0 0 0 3px var(--cyan),inset 0 0 18px #3ee7f5aa;z-index:1}.pc{width:87%;height:87%;z-index:2;pointer-events:none}.pc.dragGhost{position:fixed;transform:translate(-50%,-50%);z-index:60;filter:drop-shadow(0 6px 10px #00000088);opacity:.95}.pc.w{filter:drop-shadow(0 2px 2px #00000066)}.pc.b{filter:drop-shadow(0 2px 2px #00000088)}.dot{position:absolute;width:26%;height:26%;border-radius:50%;background:#1d9eb3;box-shadow:0 0 0 2px #1d10384d,0 0 8px #3ee7f599;z-index:1}.dot.ring{width:88%;height:88%;background:transparent;border:4px solid #1D9EB3;box-shadow:0 0 0 2px #1d10384d}.coord{position:absolute;font-size:10px;font-weight:700;opacity:.6;font-family:ui-monospace,Consolas,monospace;color:#150c24}.sq.dark .coord{color:#c9c2e8}.coord.rk{top:3px;left:4px}.coord.fl{bottom:2px;right:4px}.statusRow{display:flex;align-items:center;justify-content:center;gap:10px;min-height:26px;flex-wrap:wrap}.status{text-align:center;font-size:14px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#cbbdf0}.status.over{color:var(--yellow);text-shadow:0 0 10px #F5D93E66}.bang{font-family:Arial Black,Impact,sans-serif;background:#0e2e38;color:var(--cyan);border:2px solid var(--cyan);border-radius:12px 12px 12px 2px;padding:1px 9px;font-size:15px;text-shadow:0 0 8px var(--cyan);box-shadow:0 0 12px #3ee7f566;animation:blink 1s infinite}.replayBadge{font-family:Arial Black,Impact,sans-serif;background:#3a1560;color:var(--yellow);border:2px solid var(--yellow);border-radius:12px;padding:2px 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}.panel{width:min(88vw,300px);display:flex;flex-direction:column;gap:12px}.box{background:#1d1038cc;border:1px solid #8B2FC966;border-radius:10px;padding:12px 14px;box-shadow:0 0 18px #8b2fc922}.boxHead{font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--cyan);text-shadow:0 0 8px #3EE7F566;margin-bottom:8px}.rows{max-height:180px;overflow-y:auto;font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:13px}.mrow{display:grid;grid-template-columns:34px 1fr 1fr;padding:4px 2px;border-bottom:1px solid #8B2FC92E}.mrow .num{color:var(--dim)}.mrow:last-child .cur{color:var(--yellow);font-weight:700;text-shadow:0 0 6px #F5D93E55}.moveGrade{margin-left:3px;font-weight:700}.moveGrade.brilliant{color:var(--cyan);text-shadow:0 0 6px #3EE7F588}.moveGrade.best{color:#6fcf97}.moveGrade.inaccuracy{color:var(--yellow)}.moveGrade.mistake{color:#f0a548}.moveGrade.blunder{color:#f05348}.boardGrade{position:absolute;top:-4px;right:-4px;font-size:11px;font-weight:700;padding:1px 3px;border-radius:6px;background:#150c24dd;z-index:4;line-height:1.2}.boardGrade.brilliant{color:var(--cyan);box-shadow:0 0 6px #3ee7f588}.boardGrade.best{color:#6fcf97}.boardGrade.inaccuracy{color:var(--yellow)}.boardGrade.mistake{color:#f0a548}.boardGrade.blunder{color:#f05348}.empty{padding:10px 2px;color:var(--dim);font-size:12px;font-style:italic}.astats{display:flex;gap:14px;font-family:ui-monospace,Consolas,monospace;font-size:13px}.astats b{font-size:18px;color:var(--magenta);display:block;text-shadow:0 0 8px #D94BF055}.astats span{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em}.pv{margin-top:8px;font-family:ui-monospace,Consolas,monospace;font-size:12px;color:#b9aee0;line-height:1.5;word-break:break-word}.audioRow,.jbHead{display:flex;align-items:center;gap:8px}.jbMole{width:64px;height:auto;display:block;margin:0 auto;filter:drop-shadow(0 0 10px #8B2FC966)}.promoBox .modalCloseX{position:absolute;top:8px;right:8px;width:24px;height:24px;padding:0;border:1px solid #8B2FC966;border-radius:50%;background:#1d1038;color:var(--liliac);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;z-index:1;transition:background .15s ease,color .15s ease,transform .1s ease}.promoBox .modalCloseX:hover{background:#3ee7f522;color:var(--cyan)}.promoBox .modalCloseX:active{transform:scale(.88)}.trackRow{display:flex;align-items:center;gap:8px;margin-bottom:8px}.trackName{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--yellow);text-shadow:0 0 8px #F5D93E44;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trackTag{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border:1px solid #8B2FC966;border-radius:4px;padding:1px 5px;flex:none}.mp3Progress{display:flex;align-items:center;gap:8px}.mp3Time{font-family:ui-monospace,Consolas,monospace;font-size:10px;color:var(--dim);width:30px;flex:none;text-align:center}.playBtn{width:38px;height:38px;border-radius:50%;border:2px solid var(--cyan);background:#0e2e38;color:var(--cyan);font-size:15px;cursor:pointer;flex:none;box-shadow:0 0 12px #3ee7f544;display:flex;align-items:center;justify-content:center;touch-action:manipulation;transition:box-shadow .15s ease,transform .1s ease}.playBtn:hover:not(:disabled){box-shadow:0 0 18px #3ee7f588}.playBtn:active:not(:disabled){transform:scale(.92)}.playBtn.sm{width:30px;height:30px;font-size:9px;border-color:#8b2fc9;color:var(--magenta);background:#241338;box-shadow:0 0 10px #8b2fc933}.playBtn.sm:hover{box-shadow:0 0 16px #d94bf066}.playBtn:disabled{opacity:.4;cursor:default;box-shadow:none}.playBtn.sm.active{border-color:var(--cyan);color:var(--cyan);background:#0e2e38;box-shadow:0 0 12px #3ee7f544}.jbTrackList{max-height:110px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;border:1px solid #8B2FC966;border-radius:8px;padding:4px}.promoBox .jbTrackRow{background:transparent;border:none;text-align:left;color:var(--liliac);font-family:ui-monospace,Consolas,monospace;font-size:11px;padding:4px 6px;border-radius:4px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:none;transition:background .12s ease,color .12s ease}.promoBox .jbTrackRow:hover{background:#3ee7f522}.promoBox .jbTrackRow.cur{background:#8b2fc933;color:var(--cyan);font-weight:700}input[type=range]{flex:1;min-width:0;accent-color:var(--magenta)}.volPct{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--dim);width:34px;text-align:right}.ctrls{display:flex;gap:8px;flex-wrap:wrap}.btn{font-family:Arial Black,Impact,sans-serif;font-style:italic;font-size:12px;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;touch-action:manipulation;background:linear-gradient(180deg,#A957E0,var(--violet));color:#fff;border:none;border-radius:6px;padding:9px 12px;box-shadow:0 3px #150c24,0 0 14px #8b2fc955;transition:filter .15s ease,transform .1s ease,box-shadow .1s ease}.btn:hover:not(:disabled){filter:brightness(1.15)}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #150c24,0 0 10px #8b2fc955}.btn.gold{background:linear-gradient(180deg,#ffe873,#e0b93e);color:#3a2a00;box-shadow:0 3px #150c24,0 0 14px #f5d93e66}.btn.gold:active:not(:disabled){box-shadow:0 1px #150c24,0 0 10px #f5d93e66}.btn.ghost{background:transparent;border:1px solid #8B2FC966;box-shadow:none;color:var(--liliac)}.btn.ghost:hover:not(:disabled){filter:none;border-color:var(--cyan);color:var(--cyan);background:#3ee7f511}.btn.ghost:active:not(:disabled){transform:translateY(1px);box-shadow:none}.btn:disabled{opacity:.4;cursor:default}.btn:focus-visible,.playBtn:focus-visible,select:focus-visible,.modalCloseX:focus-visible,.nameEditBtn:focus-visible,.jbTrackRow:focus-visible,input[type=range]:focus-visible,input[type=text]:focus-visible,.promoBox button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.nameEditBtn{font-size:11px;line-height:1;padding:2px 4px;border:1px solid #3EE7F555;border-radius:4px;background:transparent;color:var(--cyan);cursor:pointer;text-transform:none;opacity:.75;flex:none;transition:opacity .15s ease,background .15s ease}.nameEditBtn:hover{opacity:1;background:#3ee7f522}select{font-family:inherit;font-size:12px;font-weight:700;border-radius:6px;padding:8px;border:1px solid #8B2FC966;background:#1d1038;color:var(--white);cursor:pointer;transition:border-color .15s ease}select:hover{border-color:var(--cyan)}.rows,.jbTrackList,.blindLog{scrollbar-width:thin;scrollbar-color:#8B2FC966 transparent}.rows::-webkit-scrollbar,.jbTrackList::-webkit-scrollbar,.blindLog::-webkit-scrollbar{width:8px}.rows::-webkit-scrollbar-thumb,.jbTrackList::-webkit-scrollbar-thumb,.blindLog::-webkit-scrollbar-thumb{background:#8b2fc966;border-radius:4px}.rows::-webkit-scrollbar-track,.jbTrackList::-webkit-scrollbar-track,.blindLog::-webkit-scrollbar-track{background:transparent}.promoOv{position:absolute;top:0;right:0;bottom:0;left:0;background:#0e0620cc;display:flex;align-items:center;justify-content:center;z-index:10;border-radius:4px;animation:ovFade .15s ease-out}@keyframes ovFade{0%{opacity:0}to{opacity:1}}.promoBox{background:var(--panel);border:1px solid var(--cyan);border-radius:10px;padding:10px;display:flex;gap:6px;box-shadow:0 0 30px #3ee7f566;position:relative;animation:boxPop .18s cubic-bezier(.34,1.4,.64,1)}@keyframes boxPop{0%{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}.promoBox button{font-size:32px;padding:4px 10px;background:transparent;border:none;cursor:pointer;border-radius:6px;transition:background .15s ease}.promoBox button:hover{background:#3ee7f522}.toast{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--cyan);margin-top:6px}.errBox{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--void,#0E0620);color:#f4efff;font-family:Trebuchet MS,Segoe UI,system-ui,sans-serif;text-align:center;padding:24px}@media (max-width:700px){.layout{flex-direction:column;align-items:center}.boardCol,.panel{display:contents}.botCard{order:1}.boardWrap{order:2}.youCard{order:3}.statusRow{order:4}.replayCtrls,.reviewCtrls,.analyzeHint{order:5}.playCtrls,.puzzleCtrls{order:6}.scoreBox{order:7}.analysisBox{order:8}.iconRow{order:9}}@media (min-width:701px){.board{width:min(48vw,60vh,760px)}.root.noEval .board{width:min(52vw,64vh,800px)}.card{width:calc(min(48vw,60vh,760px) + 24px)}.root.noEval .card{width:min(52vw,64vh,800px);padding-left:12px}.panel{width:min(22vw,340px)}}.blindBox{flex-direction:column;gap:10px;width:min(92vw,420px);max-height:85vh;padding:20px 22px}.blindSetup{display:flex;flex-direction:column;gap:12px}.blindHint{font-size:12px;color:var(--liliac);line-height:1.5;margin:0}.blindLabel{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}.blindStatus{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);text-shadow:0 0 8px #F5D93E44}.blindLog{flex:1 1 auto;min-height:180px;max-height:44vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:8px;border:1px solid #8B2FC94D;border-radius:8px;background:#150c2488}.blindMsg{font-size:13px;line-height:1.45;color:var(--liliac)}.blindMsg.you{color:var(--cyan)}.blindWho{display:block;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}.blindInputRow{display:flex;gap:8px}.blindInputRow input[type=text]{flex:1;min-width:0;font-family:inherit;font-size:13px;border-radius:6px;padding:9px 10px;background:#1d1038;color:var(--liliac);border:1px solid #8B2FC966}.blindInputRow input[type=text]:focus{outline:none;border-color:var(--cyan)}.blindCtrls .btn{font-size:10px;padding:8px 10px}@media (prefers-reduced-motion: reduce){.star,.hdr .eyebrow .live,.bang,.sq.botLast:before{animation:none}.promoOv,.promoBox{animation:none}.evalbar .pfill{transition:none}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior-y:contain}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}