:root{--header-h: 56px;--nav-ctrl-h: 44px;--pad: 12px;--clock-w: clamp(160px, 25vw, 500px);--board-size: min( 50vw, calc(100dvh - var(--header-h) - var(--nav-ctrl-h) - 2 * var(--pad)) );--nav-btn-w: calc(var(--board-size) / 9);--nav-btn-h: min(34px, calc(var(--nav-btn-w) * 0.667));--nav-btn-br: calc(var(--nav-btn-h) * 0.18)}@media(orientation: portrait){:root{--pad: 4px;--clock-w: clamp(100px, 28vw, 300px);--board-size: min( calc(100vw - 2 * var(--pad)), calc(0.667 * (100dvh - var(--header-h)) - var(--nav-ctrl-h)) )}}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html,body{height:100dvh;overflow:hidden;background:#2b2b2b;color:#e8e8e8;font-family:system-ui,sans-serif;font-size:15px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.play-app{display:flex;flex-direction:column;height:100dvh;overflow:hidden;padding-top:env(safe-area-inset-top, 0px);padding-bottom:env(safe-area-inset-bottom, 0px);padding-left:env(safe-area-inset-left, 0px);padding-right:env(safe-area-inset-right, 0px);box-sizing:border-box}.play-header{height:var(--header-h);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:#1a1a1a;border-bottom:2px solid #555}.play-header h1{font-size:1.3rem;font-weight:600;letter-spacing:.04em}.play-brand{display:flex;align-items:center;gap:12px;min-width:0}.play-brand h1{margin:0;white-space:nowrap}.play-brand-logo{display:block;height:calc(var(--header-h) - 12px);width:auto;border-radius:8px;flex-shrink:0}.play-header-right{display:flex;align-items:center;gap:14px}.play-user-info{font-size:.85rem;color:#aaa}.language-dropdown{position:relative}.language-dropdown__button{display:flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #e6b27a;border-radius:5px;background:#f5eee4;color:#9a5a20;cursor:pointer;font-size:.85rem;font-weight:600;letter-spacing:.03em;line-height:1.4;outline:none;white-space:nowrap;transition:background .15s,box-shadow .15s;box-shadow:0 1px 4px rgba(0,0,0,.08)}.language-dropdown__button:hover{background:#e6b27a;color:#f5eee4}.language-dropdown__options{position:absolute;top:calc(100% + 5px);right:0;display:flex;flex-direction:column;gap:4px;padding:5px;background:#f5eee4;border:1px solid #e6b27a;border-radius:6px;z-index:200;box-shadow:0 4px 16px rgba(0,0,0,.22)}.language-dropdown__options[hidden]{display:none}.language-dropdown__option{display:flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid rgba(0,0,0,0);border-radius:4px;background:rgba(0,0,0,0);color:#9a5a20;cursor:pointer;font-size:.85rem;font-weight:600;white-space:nowrap;text-align:left;transition:background .15s}.language-dropdown__option:hover,.language-dropdown__option[aria-selected=true]{background:#e6b27a;color:#f5eee4;border-color:#e6b27a}.language-dropdown__flag{width:22px;height:15px;flex-shrink:0;object-fit:cover;border-radius:2px}.language-dropdown__label{display:inline-block}.play-layout{flex:1;min-height:0;display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:var(--pad);overflow:hidden}.board-area{display:flex;flex-direction:row;align-items:flex-start;gap:8px;flex-shrink:0}.play-board-col{flex-shrink:0;width:var(--board-size);display:flex;flex-direction:column}.play-board-frame{width:var(--board-size);height:var(--board-size);display:flex;overflow:hidden;background:linear-gradient(160deg, #e6b27a, #9a5a20);padding:0;border-radius:5px 5px 0 0;flex-shrink:0;box-shadow:0 2px 3px hsl(31.1111111111,68.3544303797%,77.0196078431%),0 8px 24px rgba(0,0,0,.55)}.play-board{flex:1;display:grid;--cs: 0.22fr;grid-template-columns:var(--cs) repeat(8, 1fr) var(--cs);grid-template-rows:var(--cs) repeat(8, 1fr) var(--cs);user-select:none;touch-action:none}.board-notation{display:flex;align-items:center;justify-content:center;align-self:stretch;justify-self:stretch;font-size:calc(var(--board-size)/36);font-weight:700;color:rgb(247.753164557,232.6797468354,216.446835443);overflow:hidden;pointer-events:none;line-height:1}.play-board--no-coords{--cs: 0}.play-board--no-coords .board-notation{visibility:hidden}#play-nav-controls{width:var(--board-size);flex-shrink:0;display:flex;align-items:center;justify-content:space-around;padding:5px 6px;gap:4px;background:hsl(35.2941176471,45.9459459459%,87.7450980392%);border:1px solid #e6b27a;border-top:2px solid rgb(223.5443037975,158.1164556962,87.6556962025);border-radius:0 0 5px 5px;box-shadow:0 4px 12px rgba(0,0,0,.35)}.nav-btn{flex:1;height:var(--nav-btn-h);min-width:0;border:1px solid #e6b27a;border-radius:var(--nav-btn-br);background:#f5eee4;color:#9a5a20;cursor:pointer;font-size:calc(var(--nav-btn-h)*.5);line-height:1;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 1px 4px rgba(0,0,0,.06);outline:none;touch-action:manipulation;transition:background .2s,color .2s,box-shadow .2s}.nav-btn:hover:not(:disabled){background:#e6b27a;color:#f5eee4;box-shadow:0 2px 8px rgba(0,0,0,.12)}.nav-btn:active:not(:disabled){background:#9a5a20;color:#f5eee4}.nav-btn:disabled{opacity:.4;cursor:default}.clock-bar{width:100%;max-width:500px;height:calc(min(50vw,500px)/4);flex-shrink:0;display:flex;flex-direction:row;overflow:hidden;border-radius:6px;box-shadow:0 4px 14px rgba(0,0,0,.45)}.clock-half{flex:1;min-width:0;display:flex;flex-direction:column}.clock-half--black{background:#1a1a1a}.clock-half--white{background:#ede8e0}.clock-swatch{height:10px;width:100%;flex-shrink:0;cursor:pointer;border:3px solid rgba(0,0,0,0);border-bottom-width:0;transition:border-color .15s,filter .15s}.clock-swatch--black{background:#0d0d0d}.clock-swatch--black.active{border-color:#f6c947}.clock-swatch--black:hover{filter:brightness(2.5)}.clock-swatch--white{background:#f5eee4}.clock-swatch--white.active{border-color:#f6c947}.clock-swatch--white:hover{filter:brightness(0.82)}.clock-time-area{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:6px 4px}.clock-display{font-size:clamp(1rem,var(--clock-w)*.1,2.5rem);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1;white-space:nowrap}.clock-half--black .clock-display{color:#e0e0e0}.clock-half--white .clock-display{color:#1a1a1a}.clock-dot{display:block;width:clamp(8px,var(--clock-w)*.035,18px);height:clamp(8px,var(--clock-w)*.035,18px);border-radius:50%;flex-shrink:0;transition:background .25s,box-shadow .25s}.clock-half--black .clock-dot{background:#3a3a3a}.clock-half--white .clock-dot{background:#c0b8ae}.clock-dot.active{background:#4caf50 !important;box-shadow:0 0 8px rgba(76,175,80,.85)}.clock-center{flex-shrink:0;width:clamp(70px,var(--clock-w)*.22,110px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#252525;border-left:1px solid #3a3a3a;border-right:1px solid #3a3a3a}.clock-icon-btn{width:clamp(28px,var(--clock-w)*.12,60px);height:clamp(28px,var(--clock-w)*.12,60px);border:none;border-radius:50%;background:#484848;color:#e8e8e8;cursor:pointer;font-size:clamp(.8rem,var(--clock-w)*.06,1.4rem);line-height:1;display:flex;align-items:center;justify-content:center;padding:0;touch-action:manipulation;transition:background .15s,transform .12s}.clock-icon-btn:hover{background:#666;transform:scale(1.1)}.clock-icon-btn:active{transform:scale(0.9)}.clock-icon-btn--danger{background:#7a2020;color:#ff9090}.clock-icon-btn--danger:hover{background:#9a2828}.sq{position:relative;display:flex;align-items:center;justify-content:center;align-self:stretch;justify-self:stretch;cursor:pointer;-webkit-user-select:none;user-select:none}.sq--light{background:#f5eee4}.sq--dark{background:#94703e}.sq--selected{background:#f6f669 !important}.sq--last-from,.sq--last-to{background:#cdd16e !important}.sq:hover{filter:brightness(1.08)}.sq-piece{width:90%;height:90%;object-fit:contain;pointer-events:none;z-index:1}.sq-dot{width:32%;height:32%;border-radius:50%;background:rgba(0,0,0,.18);pointer-events:none;position:absolute;z-index:2}.sq-capture-ring{position:absolute;inset:0;border-radius:50%;border:4px solid rgba(0,0,0,.18);pointer-events:none;z-index:2}.play-sidebar{width:50vw;flex-shrink:0;min-height:0;display:flex;flex-direction:column;gap:10px;overflow-y:auto}.play-controls{background:#3a3a3a;border-radius:8px;padding:14px;display:flex;flex-direction:column;gap:12px;flex-shrink:0}.play-control-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.play-control-row label{font-size:.82rem;color:#aaa;white-space:nowrap}.play-color-btns{display:flex;gap:6px}.play-color-btn{flex:1;padding:5px 10px;border:2px solid rgba(0,0,0,0);border-radius:5px;background:#555;color:#e8e8e8;cursor:pointer;font-size:.82rem;touch-action:manipulation;transition:background .15s,border-color .15s}.play-color-btn.active{background:#9a5a20;border-color:rgb(212.4193548387,127.2580645161,50.0806451613);color:#f5eee4}.play-color-btn:hover:not(.active){background:#666}.play-select{background:#555;color:#e8e8e8;border:1px solid #777;border-radius:5px;padding:4px 8px;font-size:.85rem;cursor:pointer}.play-btn-row{display:flex;flex-direction:column;gap:8px;margin-top:4px}.play-btn{padding:8px 14px;border:none;border-radius:6px;background:#555;color:#e8e8e8;font-size:.88rem;cursor:pointer;touch-action:manipulation;transition:background .15s,opacity .15s}.play-btn:hover:not(:disabled){background:#666}.play-btn:disabled{opacity:.4;cursor:default}.play-btn--primary{background:#9a5a20;color:#f5eee4}.play-btn--primary:hover:not(:disabled){background:rgb(187.7806451613,109.7419354839,39.0193548387)}.play-btn--danger{background:#8b3030}.play-btn--danger:hover:not(:disabled){background:#a03535}.play-status{background:#3a3a3a;border-radius:6px;padding:10px 14px;font-size:.92rem;min-height:38px;line-height:1.4;flex-shrink:0}.play-status .status-check{color:#e05050;font-weight:700}.play-game-header{font-size:.78rem;color:#aaa;padding:4px 2px 6px;flex-shrink:0;line-height:1.5}.play-game-header .gh-event{font-weight:600;color:#e8e8e8}.play-game-header .gh-players{color:#e8e8e8}.play-game-header .gh-sep{color:#aaa}.play-move-list{background:#3a3a3a;border-radius:6px;padding:8px 12px;font-size:.82rem;line-height:1.8;flex:1;min-height:60px;overflow-y:auto;word-break:break-word}.play-move-list em{color:#aaa}.play-move-list .ml-num{color:#aaa}.play-move-list .ml-move{margin-right:4px;cursor:pointer;border-radius:3px;padding:1px 3px}.play-move-list .ml-move:hover{background:hsla(0,0%,100%,.12)}.play-move-list .ml-move--active{background:rgba(255,200,50,.35);font-weight:600}@media(orientation: portrait){body{overflow-y:auto;height:auto;min-height:100dvh}.play-app{height:auto;min-height:100dvh;overflow:visible}.play-layout{flex-direction:column;align-items:flex-start;overflow:visible;padding:4px;gap:6px}.clock-bar{height:calc(var(--clock-w)/4)}.play-sidebar{width:calc(var(--board-size) + var(--clock-w) + 8px);max-width:100%;flex:none;overflow-y:visible}.play-move-list{flex:none;max-height:200px}}.promotion-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;gap:12px;z-index:1000}.promotion-btn{width:80px;height:80px;border:2px solid #e6b27a;border-radius:8px;background:#f5eee4;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:6px;transition:transform .1s}.promotion-btn:hover{transform:scale(1.08)}.promotion-btn img{width:100%;height:100%;object-fit:contain}.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:1100}.settings-dialog{background:#f5eee4;border:2px solid #e6b27a;border-radius:10px;padding:24px 28px 20px;min-width:280px;max-width:360px;box-shadow:0 8px 32px rgba(0,0,0,.45)}.settings-dialog h2{margin:0 0 18px;font-size:1.1rem;color:#9a5a20;border-bottom:1px solid hsl(31.1111111111,68.3544303797%,64.0196078431%);padding-bottom:10px}.settings-dialog .settings-row{display:flex;align-items:center;gap:12px;padding:8px 0}.settings-dialog .settings-row label{flex:1;cursor:pointer;font-size:.95rem;color:#333}.settings-dialog .settings-row input[type=checkbox]{width:18px;height:18px;accent-color:#9a5a20;cursor:pointer}.settings-dialog .settings-row--text label{min-width:60px;flex:none}.settings-dialog .play-text-input{flex:1;padding:5px 8px;border:1px solid #e6b27a;border-radius:5px;background:hsl(35.2941176471,45.9459459459%,95.7450980392%);color:#333;font-size:.9rem}.settings-dialog .play-text-input:focus{outline:2px solid #9a5a20}.settings-dialog .settings-footer{margin-top:18px;display:flex;justify-content:flex-end}.settings-dialog .settings-footer button{padding:7px 22px;background:#9a5a20;color:#f5eee4;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .15s}.settings-dialog .settings-footer button:hover{background:#e6b27a}