:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#3d495f;background:#0b1020;line-height:1.5;font-weight:400;--board-size: min(72vmin, 680px)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(135deg,#d3ddff,#cddbff)}button,input,select{font:inherit}button{background:#4f8cff;color:#fff;border:none;border-radius:10px;padding:.7rem 1rem;cursor:pointer}button:hover{background:#3f7ef0;color:#fff}.ready-button.ready{background:#2ea043;cursor:default}.ready-button.ready:hover{background:#2ea043}.button:disabled{background:#ffffff14;color:#fff6;cursor:not-allowed}input,select{width:100%;background:#ffffff08;border:1px solid rgba(71,65,65,.12);border-radius:8px;padding:.7rem .8rem;color:#3d495f}select option{color:#0b1020;background:#fff}.app-shell{display:grid;grid-template-columns:360px 1fr;min-height:100vh}.sidebar{padding:1.5rem;background:#d3ddff;border-right:1px solid rgba(255,255,255,.08)}.sidebar h1{margin-top:0;font-size:2.2rem}.logo-area{display:flex;align-items:center;gap:.75rem}.logo-area img{width:48px;height:48px;object-fit:contain}.logo-area h1{margin:0}.panel{background:#ffffff08;border:1px solid rgba(71,65,65,.08);border-radius:12px;padding:1rem;margin-bottom:1rem}.clock-row{width:var(--board-size);display:flex;justify-content:space-between;align-items:center;gap:1rem}.player-clock-row{width:100%;display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--board-size) * .02)}.clock-thresholds{display:flex;flex-direction:column;flex-shrink:0;gap:.15rem;min-width:calc(var(--board-size) * .094);font-size:calc(var(--board-size) * .025);font-weight:700;padding-right:calc(var(--board-size) * .01);border-right:rgba(0,0,0,.1) 1px solid}.clock-status-group{position:relative;display:flex;align-items:center;gap:calc(var(--board-size) * .01)}.player-clock{display:flex;flex-direction:row;align-items:center;flex-shrink:0;gap:calc(var(--board-size) * .01);width:calc(var(--board-size) * .3);padding:calc(var(--board-size) * .001) calc(var(--board-size) * .01);border-radius:10px;border:1px solid rgba(71,65,65,.1);background:#47414133;color:#0b1020}.player-clock-timer{display:flex;flex-direction:column;padding-left:calc(var(--board-size) * .01)}.clock-line{display:flex;align-items:baseline;white-space:nowrap}.player-clock.active{border-color:#59d38d;border-width:1px;box-shadow:0 0 0 3px #59d38d66}.player-clock.has-thresholds{width:calc(var(--board-size) * .3)}.player-clock-name{font-size:calc(var(--board-size) * .018);opacity:.8}.player-clock-value{font-size:calc(var(--board-size) * .04);font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums}.clock-gold{color:#ffcf55}.clock-green{color:#34eb4c}.clock-red{color:#ff4242}.clock-default{color:#0b1020}.player-clock-bank{font-size:calc(var(--board-size) * .03);font-weight:700;font-variant-numeric:tabular-nums}.clock-hundredths,.bank-hundredths{font-size:calc(var(--board-size) * .02)}.taken-material-box{display:flex;flex-direction:column;flex-shrink:0;gap:.15rem;min-width:calc(var(--board-size) * .094);font-size:calc(var(--board-size) * .025);line-height:calc(var(--board-size) * .027);font-weight:700}.taken-material-box.black{color:#000}.taken-material-box.white{color:#fff}.resign-button-and-score{margin-left:auto;display:flex;gap:1rem}.resign-button{padding:0rem .7rem;font-size:calc(var(--board-size) * .05)}.score-box{min-width:calc(var(--board-size) * .07);flex-shrink:0;text-align:center;padding:calc(var(--board-size) * .014) calc(var(--board-size) * .03);border-radius:10px;border:1px solid rgba(71,65,65,.12);background:#47414133;font-size:calc(var(--board-size) * .04);font-weight:800;color:#0b1020}.time-input-pair{display:flex;align-items:center;gap:.4rem}.time-input-pair input{width:4rem;flex:none}.time-input-pair span{opacity:.75;font-size:.85rem}.crawford-rule-checkbox{display:flex;align-items:center;gap:.3rem}.crawford-rule-checkbox label{width:100%}.panel label{display:block;margin-bottom:.5rem;color:#3d495f}.actions{display:flex;flex-direction:column;gap:.75rem}.settings-grid{display:grid;grid-template-columns:1fr;gap:.7rem}.join-row{display:flex;gap:.5rem}.join-row input{flex:1}.match-buttons-row{display:flex;gap:.5rem}.match-buttons-row button{flex:1}.create-pane,.join-pane{display:flex;flex-direction:column;gap:.75rem;padding-top:.25rem}.join-pane{flex-direction:row}.join-pane input{flex:1}.time-control-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.time-control-button{background:#ffffff0f;color:#3d495f;border:1px solid rgba(255,255,255,.14);padding:.6rem .4rem;font-size:.85rem}.time-control-button.selected{background:#4f8cff;border-color:#4f8cff;color:#fff}.custom-settings{border-radius:10px;padding:.6rem .8rem}.custom-settings summary{cursor:pointer;color:#3d495f;font-size:.9rem}.custom-settings .settings-grid{margin-top:.75rem}.ai-opponent-row{border-radius:10px;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.5rem}.ai-checkbox{display:flex;align-items:center;gap:.3rem}.ai-opponent-row label{color:#3d495f;display:flex;align-items:center;gap:.4rem;width:100%}.ai-skill-row{display:flex;flex-direction:column;gap:.3rem}.ai-skill-row input[type=range]{width:100%}.copy-pane{position:relative}.copy-pane p{margin:0 0 .6rem;color:#3d495f}.copy-pane-row{display:flex;align-items:center;gap:.6rem}.copy-pane-code{flex:1;font-size:1.3rem;font-weight:700;letter-spacing:.08em}.copy-pane-dismiss{position:absolute;top:.5rem;right:.5rem;width:1.75rem;height:1.75rem;padding:0;line-height:1;background:transparent;border:none;color:#3d495f;font-size:1.2rem;cursor:pointer}.copy-pane-dismiss:hover{color:#fff;background:transparent}.info-box p{margin:.3rem 0}.match-end-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0b102000;z-index:20}.tutorial-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90%,560px);height:min(80%,640px);background:#121a2e;border:1px solid rgba(255,255,255,.12);border-radius:14px;color:#fff;padding:1.5rem 2rem;text-align:left;overflow-y:auto;z-index:30}.tutorial-dismiss{position:absolute;top:.5rem;right:.75rem;width:1.75rem;height:1.75rem;padding:0;line-height:1;background:transparent;border:none;color:#ff3617;font-size:1.2rem;cursor:pointer}.match-end-panel{position:relative;min-width:140px;background:#121a2e;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:1.5rem 2rem;text-align:center;color:#fff}.match-end-panel h2{margin:0 0 1rem}.match-end-dismiss{position:absolute;top:.5rem;right:.75rem;width:1.75rem;height:1.75rem;padding:0;line-height:1;background:transparent;border:none;color:#aab8d1;font-size:1.2rem;cursor:pointer}.match-end-dismiss:hover{color:#fff;background:transparent}.match-end-actions{display:flex;align-items:flex-start;justify-content:center;gap:1rem}.match-end-action{display:flex;flex-direction:column;align-items:center;gap:.3rem}.match-end-substatus{font-size:.75rem;opacity:.75}.rematch-button.selected{border:2px solid #59d38d}.rematch-button:disabled{background:#ffffff14;color:#fff6;cursor:not-allowed}.leave-button{background:#d64545}.leave-button:hover{background:#c23a3a}.match-end-sidebar .match-end-actions{justify-content:flex-start}.error-box{background:#ff5c5c24;border-color:#ff5c5c57;color:#ff4242}.player-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}.player-list li{display:flex;justify-content:space-between;background:#ffffff05;border-radius:8px;padding:.5rem .75rem}.tutorial-button-panel{display:flex;justify-content:center;padding-top:4rem;gap:2rem}.tutorial-button{background:#4f8cff;color:#fff;border:none;border-radius:20px;padding:.7rem 1rem;cursor:pointer;display:flex;justify-content:center}.board-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--board-size) * .01);gap:calc(var(--board-size) * .035)}.board-wrap{position:relative;width:var(--board-size);max-width:100%}.game-area{display:flex;align-items:center;padding-bottom:1rem;gap:calc(var(--board-size) * .015)}.board-column{display:flex;flex-direction:column;align-items:center;gap:calc(var(--board-size) * .02)}.cube-column{position:relative;z-index:2;width:calc(var(--board-size) * .1);height:var(--board-size);flex:none}.cube-tooltip{display:none;position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:.5rem;width:200px;z-index:9999;background:#121a2e;border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:.3rem .5rem;font-size:.75rem;font-weight:400;color:#edf3ff;text-align:left;white-space:normal}.cube-position-center{top:calc(50% - var(--board-size) * .05)}.cube-position-top{top:0}.cube-position-bottom{top:calc(100% - var(--board-size) * .1)}.game-finished-box{position:absolute;top:50%;left:100%;transform:translateY(-50%);margin-left:.5rem;width:calc(var(--board-size) * .4);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:calc(var(--board-size) * .014) calc(var(--board-size) * .02);border-radius:10px;border:1px solid rgba(0,0,0,.836);background:#ffffff0d;text-align:center;font-size:calc(var(--board-size) * .02);line-height:calc(var(--board-size) * .027);color:#0b1020}.game-finished-box.winner{background:#daffe1d5;border-color:#00bb22e3}.game-finished-box.loser{background:#ffdadad5;border-color:#bb0000e3}.resignation-panel,.cube-decision-box{position:absolute;top:50%;left:110%;transform:translateY(-50%);margin-left:.5rem;width:calc(var(--board-size) * .4);z-index:5;display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:calc(var(--board-size) * .014) calc(var(--board-size) * .02);border-radius:10px;border:1px solid rgba(250,8,8,.836);background:#ffffff1a;text-align:center;font-size:calc(var(--board-size) * .02)}.cube-decision-box.cube-accepted{background:#daffe1d5;border-color:#00bb22e3;color:#0b1020}.board-column>.clock-row:first-child .cube-decision-box,.board-column>.clock-row:first-child .resignation-panel,.board-column>.clock-row:first-child .game-finished-box{top:auto;bottom:0;transform:none}.board-column>.clock-row:last-child .cube-decision-box,.board-column>.clock-row:last-child .game-finished-box,.board-column>.clock-row:last-child .resignation-panel{top:0;transform:none}.resignation-panel,.cube-decision-box p{margin:0}.cube-decision-timer{font-weight:700}.resign-panel-actions,.cube-decision-actions{display:flex;gap:.4rem}.cube-decision-actions button{padding:.4rem .7rem}.resign-panel-actions button{padding:.3rem .5rem}.empty-board{width:var(--board-size);height:var(--board-size);display:flex;align-items:center;justify-content:center;border:1px dashed rgba(71,65,65,.2);border-radius:16px;background:#47414105;color:#3d495f;--cube-size: min(var(--board-size) * .55, 300px);--cube-half: calc(var(--cube-size) / 2)}.moves-panel{width:var(--board-size);background:#47414108;border:1px solid rgba(71,65,65,.08);border-radius:12px;padding:1rem}.game-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.75rem}.game-tab{background:#ffffff0f;border:2px solid transparent;padding:.4rem .7rem;font-size:.85rem}.game-tab-white{background:#edf3ff;color:#0b1020}.game-tab-black{background:#0b1020;color:#fff;border-color:#ffffff40}.game-tab.selected{border-color:#4f8cff}.move-grid{display:grid;grid-template-columns:repeat(2,minmax(100px,1fr));gap:.5rem}.move-row{display:flex;gap:.5rem;background:#ffffff05;border-radius:8px;padding:.5rem .75rem;cursor:pointer}.move-row.selected{outline:2px solid #4f8cff}.animated-cube-container{position:relative;width:var(--cube-size, 300px);height:var(--cube-size, 300px);flex:none;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px}.animated-cube{width:100%;height:100%;position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d}#animated-cube{-webkit-animation:rotatecube 30s infinite linear;-moz-animation:rotatecube 30s infinite linear;animation:rotatecube 30s infinite linear;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.animated-cube div{width:var(--cube-size, 300px);height:var(--cube-size, 300px);display:block;position:absolute;line-height:var(--cube-size, 300px);text-align:center;font-size:calc(var(--cube-size, 300px) * .7);font-weight:700}@-webkit-keyframes rotatecube{9%{-webkit-transform:rotateX(90deg) rotateY(360deg) rotateZ(-90deg)}17%{-webkit-transform:rotateX(90deg) rotateY(360deg) rotateZ(-90deg)}25%{-webkit-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg)}33%{-webkit-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg)}42%{-webkit-transform:rotateX(90deg) rotateY(360deg) rotateZ(0deg)}50%{-webkit-transform:rotateX(90deg) rotateY(360deg) rotateZ(0deg)}58%{-webkit-transform:rotateX(-90deg) rotateY(180deg) rotateZ(0deg)}66%{-webkit-transform:rotateX(-90deg) rotateY(180deg) rotateZ(0deg)}75%{-webkit-transform:rotateX(180deg) rotateY(0deg) rotateZ(180deg)}83%{-webkit-transform:rotateX(180deg) rotateY(0deg) rotateZ(180deg)}92%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}to{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}}@-moz-keyframes rotatecube{9%{-moz-transform:rotateX(90deg) rotateY(360deg) rotateZ(-90deg)}17%{-moz-transform:rotateX(90deg) rotateY(360deg) rotateZ(-90deg)}25%{-moz-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg)}33%{-moz-transform:rotateX(90deg) rotateY(0deg) rotateZ(90deg)}42%{-moz-transform:rotateX(90deg) rotateY(360deg) rotateZ(0deg)}50%{-moz-transform:rotateX(90deg) rotateY(360deg) rotateZ(0deg)}58%{-moz-transform:rotateX(-90deg) rotateY(180deg) rotateZ(0deg)}66%{-moz-transform:rotateX(-90deg) rotateY(180deg) rotateZ(0deg)}75%{-moz-transform:rotateX(180deg) rotateY(0deg) rotateZ(180deg)}83%{-moz-transform:rotateX(180deg) rotateY(0deg) rotateZ(180deg)}92%{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}to{-moz-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}}@keyframes rotatecube{9%{transform:rotateX(90deg) rotateY(360deg) rotate(-90deg)}17%{transform:rotateX(90deg) rotateY(360deg) rotate(-90deg)}25%{transform:rotateX(90deg) rotateY(0) rotate(90deg)}33%{transform:rotateX(90deg) rotateY(0) rotate(90deg)}42%{transform:rotateX(90deg) rotateY(360deg) rotate(0)}50%{transform:rotateX(90deg) rotateY(360deg) rotate(0)}58%{transform:rotateX(-90deg) rotateY(180deg) rotate(0)}66%{transform:rotateX(-90deg) rotateY(180deg) rotate(0)}75%{transform:rotateX(180deg) rotateY(0) rotate(180deg)}83%{transform:rotateX(180deg) rotateY(0) rotate(180deg)}92%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(0) rotateY(0) rotate(0)}}.cube-side{background:#fff9fe;color:#000;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 0 3px #000}.animated-cube .cube-side.one{-webkit-transform:rotateY(0deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateY(0deg) translateZ(var(--cube-half, 150px));transform:rotateY(0) translateZ(var(--cube-half, 150px))}.animated-cube .cube-side.two{-webkit-transform:rotateY(-90deg) rotateZ(90deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateY(-90deg) rotateZ(90deg) translateZ(var(--cube-half, 150px));transform:rotateY(-90deg) rotate(90deg) translateZ(var(--cube-half, 150px))}.animated-cube .cube-side.four{-webkit-transform:rotateY(90deg) rotateZ(-90deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateY(90deg) rotateZ(-90deg) translateZ(var(--cube-half, 150px));transform:rotateY(90deg) rotate(-90deg) translateZ(var(--cube-half, 150px))}.animated-cube .cube-side.eight{-webkit-transform:rotateX(-90deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateX(-90deg) translateZ(var(--cube-half, 150px));transform:rotateX(-90deg) translateZ(var(--cube-half, 150px))}.animated-cube .cube-side.sixteen{-webkit-transform:rotateX(90deg) rotateZ(180deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateX(90deg) rotateZ(180deg) translateZ(var(--cube-half, 150px));transform:rotateX(90deg) rotate(180deg) translateZ(var(--cube-half, 150px))}.animated-cube .cube-side.thirty-two{-webkit-transform:rotateX(180deg) rotateZ(180deg) translateZ(var(--cube-half, 150px));-moz-transform:rotateX(180deg) rotateZ(180deg) translateZ(var(--cube-half, 150px));transform:rotateX(180deg) rotate(180deg) translateZ(var(--cube-half, 150px))}.mini-cube-container{--cube-size: calc(var(--board-size) * .1);--cube-half: calc(var(--board-size) * .05);position:absolute;left:0;width:var(--cube-size);height:var(--cube-size);cursor:pointer;transition:top .5s ease;-webkit-perspective:calc(var(--board-size) * .5);-moz-perspective:calc(var(--board-size) * .5);perspective:calc(var(--board-size) * .5)}.mini-cube-container.cube-disabled{cursor:default}.mini-cube{transition:transform .6s ease-in-out}.mini-cube.show-1{transform:rotateX(0) rotateY(0) rotate(0)}.mini-cube.show-2{transform:rotateX(90deg) rotateY(0) rotate(-90deg)}.mini-cube.show-4{transform:rotateX(90deg) rotateY(0) rotate(90deg)}.mini-cube.show-8{transform:rotateX(90deg) rotateY(0) rotate(0)}.mini-cube.show-16{transform:rotateX(-90deg) rotateY(180deg) rotate(0)}.mini-cube.show-32{transform:rotateX(180deg) rotateY(0) rotate(180deg)}.mini-cube .cube-side{background:#edf3ff;color:#0b1020;box-shadow:0 0 0 1px #0b102040}.mini-cube .cube-side .moves-until-active-display{font-size:.75rem;font-weight:400;color:#ff4242;margin-left:.3rem}.mini-cube-container.cube-disabled .cube-side{background:#edf3ff8c;color:#50525a99}.mini-cube-container.cube-disabled:hover .cube-tooltip{display:block}@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}:root{--board-size: min(85vw, 70vh, 680px)}}