*{margin:0;padding:0;box-sizing:border-box}:root{--host-bg:#11111b;--host-surface:#1a1b26;--host-royal:#5f57f5;--host-royal-secondary:#38348f;--host-blue-primary:#2563eb;--host-blue-secondary:#1e40af;--host-white:#ffffff;--blue-accent:#dbeafe;--host-gray-muted:#64748b;--host-gray-light:#f8fafc;--tokyo-cyan:#7dcfff;--tokyo-green:#9ece6a;--tokyo-yellow:#e0af68;--tokyo-red:#f7768e;--tokyo-border:#3b4261;--tokyo-fg:#a9b1d6;--square-light:#f0d9b5;--square-dark:#b58863;--square-selected:#6a994e;--move-from:#5090d3;--move-to:#81b3f0;--checkmated-king:#8b0000}body{font-family:-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif;background:var(--host-bg);height:100vh;width:100vw;margin:0;display:flex;justify-content:center;align-items:center;overflow:hidden}.outer-container{width:100%;height:100vh;padding:8px;display:flex;justify-content:center;align-items:center;overflow:hidden}.container{background:var(--host-surface);border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,.4);padding:1.5rem;width:calc(100% - 16px);height:calc(100% - 16px);color:var(--tokyo-fg);display:flex;flex-direction:column;overflow:hidden}main{display:grid;grid-template-columns:1fr clamp(280px,17.71vw,340px);gap:clamp(1rem,2vw,2rem);flex:1;min-height:0;overflow:hidden;height:100%;max-width:clamp(800px,51vw,980px);margin:0 auto;align-items:center}.game-area{display:flex;align-items:center;justify-content:center;min-width:clamp(360px,22.92vw,440px);overflow:visible;height:100%}.board-container{display:flex;align-items:center;justify-content:center;width:clamp(360px,22.92vw,440px);height:clamp(360px,22.92vw,440px);padding:clamp(16px,1.04vw,20px);position:relative}.board-wrapper{position:relative;width:clamp(328px,20.83vw,400px);height:clamp(328px,20.83vw,400px);margin:0}.coordinates{position:absolute;display:flex;color:var(--tokyo-border);font-size:.75rem;font-weight:500;user-select:none}.coordinates.top{top:-18px;left:0;right:0;justify-content:space-around;padding:0 2px}.coordinates.left{left:-18px;top:0;bottom:0;flex-direction:column;justify-content:space-around;padding:2px 0}#board{position:absolute;top:0;left:0;width:100%;height:100%;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);border:3px solid var(--tokyo-border);border-radius:4px}.square{display:flex;justify-content:center;align-items:center;font-size:clamp(24px,5vw,36px);cursor:pointer;user-select:none;position:relative;aspect-ratio:1;overflow:hidden}.square.light{background-color:var(--square-light)}.square.dark{background-color:var(--square-dark)}.square.selected{background-color:var(--square-selected)!important}.square.last-move-from{background-color:var(--move-from)!important}.square.last-move-to{background-color:var(--move-to)!important}.square.white-piece{color:var(--host-white);text-shadow:1px 1px 2px rgba(0,0,0,.5)}.square.black-piece{color:var(--host-bg);text-shadow:1px 1px 2px rgba(255,255,255,.2)}@keyframes flashGreen{0%,100%{background-color:inherit}50%{background-color:rgba(154,206,106,.8)}}@keyframes flashRed{0%,100%{background-color:inherit}50%{background-color:rgba(247,118,142,.8)}}.square.flash-green{animation:flashGreen .4s ease-out}.square.flash-red{animation:flashRed .4s ease-out;position:relative;z-index:2}.square.flash-red::before{content:'';position:absolute;inset:0;background-color:rgba(247,118,142,.8);animation:flashFade .4s ease-out;pointer-events:none}@keyframes flashFade{0%{opacity:0}50%{opacity:1}100%{opacity:0}}.square.mated-king::after{content:'';position:absolute;inset:4px;border:3px solid var(--tokyo-red);border-radius:2px;pointer-events:none;z-index:1}.square.mated-king.white-piece,.square.mated-king.black-piece{color:var(--checkmated-king)!important}.copy-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;padding:4px;background:var(--tokyo-border);border:none;border-radius:4px;color:var(--tokyo-fg);cursor:pointer;opacity:0;transition:opacity .2s,background .2s;display:flex;align-items:center;justify-content:center}.move-history-container:hover .copy-btn{opacity:.7}.copy-btn:hover{opacity:1!important;background:var(--host-royal)}.copy-btn.copied{background:var(--tokyo-green);opacity:1}.copy-btn.copied svg{display:none}.copy-btn.copied::after{content:'✓';font-size:14px}.info-panel{background:var(--host-bg);border-radius:8px;padding:clamp(.75rem,.83vw,1rem);display:flex;flex-direction:column;gap:clamp(.75rem,.83vw,1rem);overflow:hidden;width:clamp(280px,17.71vw,340px);height:clamp(360px,22.92vw,440px);align-self:center}.status-indicators{display:flex;padding:.75rem;justify-content:space-evenly;align-items:center;background:var(--host-gray-muted);border:none;border-radius:6px;cursor:pointer;height:auto;position:relative}.indicator{position:relative;display:flex;align-items:center;justify-content:center;height:100%}.indicator .light{font-size:2rem;font-weight:500;transition:all .2s;line-height:1;display:flex;align-items:center;justify-content:center}.indicator .light[data-status=white-wins]{color:var(--tokyo-red)}.indicator .light[data-status=black-wins]{color:var(--tokyo-red)}.indicator .light[data-status=healthy]{color:var(--tokyo-green)}.indicator .light[data-status=ok]{color:var(--tokyo-green)}.indicator .light[data-status=disabled]{color:var(--tokyo-yellow)}.indicator .light[data-status=degraded]{color:var(--tokyo-red)}.indicator .light[data-status=unknown]{color:var(--tokyo-border)}.indicator .light[data-status=white]{color:var(--host-white)}.indicator .light[data-status=black]{color:var(--host-bg)}.indicator .light[data-status=thinking]{color:var(--tokyo-yellow);animation:pulse 1.5s infinite}.indicator .light[data-status=network-error]{color:var(--tokyo-red)}.indicator .light[data-status=draw],.indicator .light[data-status=stalemate]{color:var(--tokyo-yellow)}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.95)}}.indicator:hover::after{content:attr(data-tooltip)": " attr(data-status);position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);background:var(--tokyo-border);color:var(--tokyo-fg);padding:.25rem .5rem;border-radius:4px;font-size:.75rem;white-space:nowrap;z-index:10;pointer-events:none}.error-flash-overlay{position:absolute;inset:0;background:var(--host-bg);border-radius:6px;display:none;align-items:center;justify-content:center;z-index:100;pointer-events:none}.error-flash-overlay.show{display:flex;animation:none}.error-flash-message{color:var(--tokyo-red);font-size:.85rem;font-weight:500;text-align:center;padding:.5rem}.error-flash-message.info{color:var(--tokyo-cyan)}.move-history-container{flex:auto;min-height:0;max-height:100%;position:relative;background:var(--host-surface);border-radius:6px;border:1px solid var(--tokyo-border);overflow:hidden}.move-history-container .copy-btn{right:8px;top:8px;transform:none}.move-history{height:100%;overflow-y:auto;overflow-x:auto;padding:.75rem}.move-history::-webkit-scrollbar{width:6px;height:6px}.move-history::-webkit-scrollbar-track{background:0 0}.move-history::-webkit-scrollbar-thumb{background:var(--tokyo-border);border-radius:3px}.move-grid{display:grid;grid-template-columns:2.5rem 1fr 1fr;gap:.25rem .5rem;font-family:courier new,monospace;font-size:.9rem;align-items:center}.move-number{color:var(--tokyo-yellow);text-align:right;font-weight:600}.move-white,.move-black{padding:.25rem .5rem;border-radius:3px}.move-white:hover,.move-black:hover{background:var(--host-royal)}.move-white{color:var(--host-gray-light)}.move-black{color:var(--tokyo-cyan)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;flex-shrink:0}.btn{padding:.75rem;border:none;border-radius:6px;font-size:.9rem;font-weight:500;cursor:pointer;color:var(--host-white);transition:all .2s}.btn-primary{background:var(--host-blue-primary);color:var(--host-white)}.btn-primary:hover{background:var(--host-royal);transform:translateY(-1px)}.btn-secondary{background:var(--host-blue-secondary);color:var(--host-white)}.btn-secondary:hover:not(:disabled){background:var(--host-royal);transform:translateY(-1px)}.btn-danger{background:var(--tokyo-red);color:var(--host-bg)}.btn-danger:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}.btn:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:2000;justify-content:center;align-items:center;backdrop-filter:blur(4px)}.modal-overlay.show{display:flex}.modal{background:var(--host-surface);border:1px solid var(--tokyo-border);border-radius:12px;padding:1.5rem 2rem;width:90%;max-width:400px;color:var(--tokyo-fg);max-height:calc(100% - 2rem);overflow-y:auto;overscroll-behavior:contain}.modal h2{margin-bottom:1rem;color:var(--host-royal);text-align:center}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--tokyo-cyan)}.form-group .group-label{color:var(--tokyo-cyan)}.form-group.form-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.radio-group{display:flex;gap:1.5rem;justify-content:center}.radio-group label{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--tokyo-fg)}input[type=range]{width:100%;height:4px;background:var(--tokyo-border);border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;background:var(--host-gray-muted);border-radius:50%;cursor:pointer}.fen-input{width:100%;padding:.5rem;background:var(--host-bg);border:1px solid var(--tokyo-border);border-radius:4px;color:var(--tokyo-fg);font-family:courier new,monospace;font-size:.85rem;resize:none;white-space:pre-wrap;word-wrap:break-word}.fen-input:focus{outline:none;border-color:var(--host-royal)}.modal-buttons{display:flex;justify-content:center;gap:1rem;margin-top:1.5rem}.auth-modal{max-width:360px}.auth-tabs{display:flex;gap:0;margin-bottom:1.5rem;border-bottom:1px solid var(--tokyo-border)}.auth-tab{flex:1;padding:.75rem;background:0 0;border:none;color:var(--tokyo-fg);cursor:pointer;font-size:.95rem;transition:color .2s,border-color .2s;border-bottom:2px solid transparent;margin-bottom:-1px}.auth-tab:hover{color:var(--host-royal)}.auth-tab.active{color:var(--host-royal);border-bottom-color:var(--host-royal)}.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password],.account-form input[type=password]{width:100%;padding:.5rem;background:var(--host-bg);border:1px solid var(--tokyo-border);border-radius:4px;color:var(--tokyo-fg);font-size:.9rem}.auth-form input:focus,.account-form input:focus{outline:none;border-color:var(--host-royal)}.auth-indicator{cursor:pointer;border:1px solid transparent;border-radius:6px;transition:border-color .2s,background .2s}.auth-indicator:hover{border-color:var(--host-royal);background:rgba(95,87,245,.15)}.auth-indicator .light[data-status=anonymous]{color:var(--tokyo-yellow)}.auth-indicator .light[data-status=authenticated]{color:var(--tokyo-green)}.modal-message{display:flex;align-items:center;justify-content:center;min-height:2.3rem;margin-bottom:.75rem;padding:.35rem .75rem;border:1px solid transparent;border-radius:6px;font-size:.85rem;line-height:1.3;text-align:center;visibility:hidden}.modal-message.show{visibility:visible}.modal-message.error{background:rgba(247,118,142,.12);color:var(--tokyo-red);border:1px solid rgba(247,118,142,.4)}.modal-message.success{background:rgba(158,206,106,.12);color:var(--tokyo-green);border:1px solid rgba(158,206,106,.4)}.auth-form input:disabled,.account-form input:disabled{opacity:.5;cursor:not-allowed}.auth-tab:disabled{opacity:.5;cursor:not-allowed}.fen-input:disabled,input[type=range]:disabled{opacity:.5;cursor:not-allowed}.radio-group input:disabled+span{opacity:.5}@media(max-width:978px){body{height:auto;min-height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable}.outer-container{padding:8px;min-height:100vh;height:auto;display:flex;justify-content:center;align-items:flex-start;overflow:visible}.container{border-radius:12px;width:calc(100% - 16px);min-height:calc(100vh - 16px);height:auto;padding:1rem;margin:0;display:flex;flex-direction:column;justify-content:center;overflow:visible}main{grid-template-columns:1fr;grid-template-rows:auto auto;gap:.5rem;height:auto;max-width:none;margin:0 auto;align-items:center;justify-items:center;overflow:visible;flex-shrink:0}.game-area{--board-pad:clamp(16px, 2.04vw, 20px);--board-edge:max(280px, min(clamp(360px, 45vw, 440px), calc(100vh - 272px)));min-width:auto;height:auto;display:flex;justify-content:center;align-items:center}.board-container{width:var(--board-edge);height:var(--board-edge);padding:var(--board-pad);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.board-wrapper{width:calc(var(--board-edge) - 2 * var(--board-pad));height:calc(var(--board-edge) - 2 * var(--board-pad));position:relative;margin:0}.coordinates.top{top:-18px;left:0;right:0}.coordinates.left{left:-18px;top:0;bottom:0}#board{position:absolute;top:0;left:0;width:100%;height:100%}.info-panel{width:clamp(360px,45vw,440px);height:clamp(180px,20.4vw,200px);display:grid;grid-template-columns:clamp(150px,18.4vw,180px)1fr;grid-template-rows:min-content min-content 1fr;gap:.5rem 1rem;padding:clamp(.75rem,1.02vw,1rem);align-self:center;overflow:hidden;flex-shrink:0;margin-bottom:1rem}.status-indicators{grid-column:1;grid-row:1;display:flex;padding:.25rem;justify-content:space-evenly;align-items:center;background:var(--host-gray-muted);border:none;border-radius:6px;height:auto;margin:0}.controls{grid-column:1;grid-row:2/4;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:.4rem;align-self:stretch;height:auto;min-height:80px}.btn{padding:.4rem .25rem;font-size:.8rem;min-height:35px;height:100%;width:100%}.move-history-container{grid-column:2;grid-row:1/4;height:100%;min-height:0;max-height:100%;align-self:stretch}.move-grid{grid-template-columns:2rem 1fr 1fr;gap:.25rem .5rem;font-size:.85rem}.move-history{padding:.5rem}.square{font-size:clamp(24px,5vw,36px)}}@media(max-width:530px){body{min-width:0;overflow-x:hidden}.outer-container{width:100%;min-width:0}.container{width:calc(100% - 16px);min-width:0}.game-area{--board-pad:12px;--board-edge:max(240px, min(min(92vw, 440px), calc(100vh - 272px)))}.info-panel{width:min(92vw,440px);min-width:0}}.promotion-modal{max-width:320px}.promotion-choices{display:flex;justify-content:center;gap:.5rem}.promotion-choice{width:56px;height:56px;display:flex;justify-content:center;align-items:center;font-size:36px;line-height:1;background:var(--square-light);border:2px solid var(--tokyo-border);border-radius:6px;cursor:pointer;transition:border-color .2s,background .2s}.promotion-choice:hover,.promotion-choice:focus-visible{outline:none;border-color:var(--host-royal);background:var(--square-selected)}.promotion-choices.white .promotion-choice{color:var(--host-white);text-shadow:1px 1px 2px rgba(0,0,0,.5)}.promotion-choices.black .promotion-choice{color:var(--host-bg);text-shadow:1px 1px 2px rgba(255,255,255,.2)}.account-modal{max-width:360px}.account-name{text-align:center}.danger-zone{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--tokyo-border)}.danger-zone summary{cursor:pointer;color:var(--tokyo-red);text-align:center}.danger-zone p{margin:.75rem 0 1rem;font-size:.85rem;line-height:1.4}.danger-zone .modal-buttons{margin-top:1rem}.confirm-modal{max-width:320px}.confirm-modal h2{font-size:1.2rem}