body{color:#fff;background:#1e1e1e;margin:0;padding:24px;font-family:Arial,sans-serif}#app{justify-content:center;align-items:center;display:flex}.board{border:2px solid #333;grid-template-rows:repeat(12,64px);grid-template-columns:repeat(12,64px);display:grid}.square{box-sizing:border-box;justify-content:center;align-items:center;width:64px;height:64px;display:flex;position:relative;overflow:hidden}.move-dot{pointer-events:none;background:#14141459;border-radius:999px;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.square.light{background:#f0d9b5}.square.dark{background:#b58863}.piece{object-fit:contain;pointer-events:none;z-index:1;width:52px;height:52px;position:relative}.selected{box-shadow:inset 0 0 0 4px #0f8}.dragging{cursor:grabbing}.selectable{cursor:grab}.board,.square,.piece{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.piece{pointer-events:none}.modal{z-index:1000;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal.hidden{display:none}.modal-content{text-align:center;background:#fff;border-radius:12px;min-width:280px;padding:24px;box-shadow:0 10px 30px #00000040}.modal-content h2{margin-top:0}.modal-content p,.modal-content h2{color:#000}.modal-content button{cursor:pointer;border:none;border-radius:8px;margin-top:16px;padding:10px 16px;font-size:16px}.game-over-modal{z-index:999999;pointer-events:auto;background:#00000073;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.game-over-modal.hidden{display:none}.game-over-modal-content{text-align:center;pointer-events:auto;background:#fff;border-radius:12px;min-width:280px;padding:24px}#play-again{pointer-events:auto;cursor:pointer}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0b0f14;--bg-elevated:#111821;--panel:#111821e0;--panel-border:#ffffff14;--text:#f3f7fb;--muted:#aab8c5;--primary:#ffb84d;--primary-hover:#ffc56d;--secondary:#1f2b38;--secondary-hover:#2a394a;--shadow:0 20px 60px #00000059;--radius:18px;--radius-sm:12px;--max-width:1120px;--transition:.16s ease}*{box-sizing:border-box}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at top,#ffb84d1f,#0000 30%),linear-gradient(#0b0f14 0%,#0d131b 100%);margin:0;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body{min-height:100vh}button,input,textarea,select{font:inherit}#app{min-height:100vh}.landing-page{width:100%;min-height:100vh;max-width:var(--max-width);flex-direction:column;justify-content:center;gap:32px;margin:0 auto;padding:40px 20px 56px;display:flex}.hero{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:40px}.hero-badge{color:var(--primary);letter-spacing:.02em;background:#ffb84d1f;border:1px solid #ffb84d38;border-radius:999px;align-items:center;margin-bottom:20px;padding:8px 14px;font-size:.88rem;font-weight:600;display:inline-flex}.hero-title{letter-spacing:-.04em;margin:0;font-size:clamp(2.4rem,6vw,5rem);line-height:.95}.hero-subtitle{max-width:720px;color:var(--muted);margin:18px 0 0;font-size:1.08rem;line-height:1.7}.hero-actions{flex-wrap:wrap;gap:14px;margin-top:32px;display:flex}.btn{cursor:pointer;transition:transform var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);border:none;border-radius:999px;outline:none;padding:14px 22px;font-weight:700}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.65;cursor:not-allowed}.btn-primary{background:var(--primary);color:#1c1406}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-secondary{background:var(--secondary);color:var(--text);border:1px solid #ffffff14}.btn-secondary:hover:not(:disabled){background:var(--secondary-hover)}.btn-ghost{color:var(--text);background:0 0;border:1px solid #ffffff24}.btn-ghost:hover:not(:disabled){background:#ffffff0d}.info-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.info-card{border:1px solid var(--panel-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);background:#ffffff0a;padding:24px}.info-card-title{letter-spacing:-.02em;margin:0 0 10px;font-size:1.08rem}.info-card-text{color:var(--muted);margin:0;line-height:1.65}@media (width<=900px){.info-grid{grid-template-columns:1fr}.hero{padding:28px}}@media (width<=640px){.landing-page{padding:24px 16px 40px}.hero{padding:24px}.hero-actions{flex-direction:column}.btn{width:100%}.hero-subtitle{font-size:1rem}}.auth-page{justify-content:center;align-items:center;width:100%;max-width:720px;min-height:100vh;margin:0 auto;padding:40px 20px 56px;display:flex}.auth-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);width:100%;box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:36px}.back-link{color:var(--muted);transition:color var(--transition);margin-bottom:18px;text-decoration:none;display:inline-block}.back-link:hover{color:var(--text)}.auth-title{letter-spacing:-.03em;margin:0;font-size:clamp(2rem,5vw,3rem);line-height:1}.auth-subtitle{color:var(--muted);margin:14px 0 0;line-height:1.7}.auth-form{flex-direction:column;gap:20px;margin-top:28px;display:flex}.form-group{flex-direction:column;gap:10px;display:flex}.form-group label{color:var(--text);font-weight:600}.form-input{width:100%;color:var(--text);transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);background:#ffffff0a;border:1px solid #ffffff1f;border-radius:14px;outline:none;padding:14px 16px}.form-input::placeholder{color:#7f8b97}.form-input:focus{background:#ffffff0f;border-color:#ffb84d80;box-shadow:0 0 0 4px #ffb84d14}.password-strength-wrapper{flex-direction:column;gap:8px;display:flex}.password-strength-bar-bg{background:#ffffff14;border:1px solid #ffffff0f;border-radius:999px;width:100%;height:10px;overflow:hidden}.password-strength-bar-fill{border-radius:999px;width:0%;height:100%;transition:width .18s,background .18s}.password-strength-text{color:var(--muted);margin:0;font-size:.95rem}.strength-empty{background:0 0}.strength-weak{background:#ff5a5f}.strength-strong{background:#39d98a}.form-feedback{border-radius:14px;padding:14px 16px;font-weight:600;line-height:1.5}.form-feedback.hidden{display:none}.form-feedback.error{color:#ff9da1;background:#ff5a5f1f;border:1px solid #ff5a5f4d}.form-feedback.success{color:#91f0bf;background:#39d98a1f;border:1px solid #39d98a4d}.auth-submit{justify-content:center;width:100%}.auth-footer-text{color:var(--muted);margin:20px 0 0}.auth-footer-text a{color:var(--primary);font-weight:700;text-decoration:none}.auth-footer-text a:hover{text-decoration:underline}@media (width<=640px){.auth-page{padding:24px 16px 40px}.auth-card{padding:24px}}.room-page{flex-direction:column;gap:24px;width:100%;max-width:1440px;min-height:100vh;margin:0 auto;padding:28px 20px 40px;display:flex}.room-header{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);justify-content:space-between;align-items:center;gap:16px;padding:24px 28px;display:flex}.room-header-left{flex-direction:column;gap:10px;display:flex}.room-header-actions{align-items:center;gap:12px;display:flex}.room-title{letter-spacing:-.03em;margin:0;font-size:clamp(1.8rem,4vw,3rem);line-height:1}.room-subtitle{color:var(--muted);word-break:break-word;margin:0;font-size:1rem;line-height:1.6}.room-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:24px;display:grid}.room-board-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;overflow:auto}.room-board{aspect-ratio:1;border:1px solid #ffffff14;border-radius:14px;grid-template-rows:repeat(12,minmax(0,1fr));grid-template-columns:repeat(12,minmax(0,1fr));width:min(100%,900px);margin:0 auto;display:grid;overflow:hidden}.room-board-square{-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;min-width:0;min-height:0;display:flex;position:relative;overflow:hidden}.room-board-square.light{background:#d8c3a5}.room-board-square.dark{background:#7c5c3e}.room-piece{object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;width:78%;max-width:100%;height:78%;max-height:100%;display:block}.room-side-panel{flex-direction:column;gap:16px;display:flex}.room-info-card{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--radius-sm);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px}.room-info-title{letter-spacing:-.02em;margin:0 0 10px;font-size:1rem}.room-info-text{color:var(--muted);margin:0;line-height:1.7}@media (width<=1100px){.room-layout{grid-template-columns:1fr}}@media (width<=720px){.room-page{padding:20px 14px 32px}.room-header{flex-direction:column;align-items:flex-start;padding:20px}.room-board-panel{padding:12px}.room-board{width:100%}}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000d9;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:fixed;top:0;left:0}.modal-content{text-align:center;background:#1e1e26;border:1px solid #333;border-radius:12px;width:90%;max-width:400px;padding:2rem;box-shadow:0 10px 25px #00000080}.modal-actions{justify-content:center;gap:10px;margin-top:1.5rem;display:flex}#modal-new-room-btn{color:#fff;cursor:pointer;background-color:#4caf50;border:none;border-radius:6px;padding:10px 20px;font-weight:700}.dragging-piece{pointer-events:none;cursor:grabbing;filter:drop-shadow(0 10px 15px #00000080);will-change:top, left;transition:transform .1s;transform:scale(1.1)}.room-board:active{cursor:grabbing}.promotion-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.promotion-picker{background:var(--surface);border:1px solid var(--border);border-radius:12px;flex-direction:column;align-items:center;gap:16px;padding:24px;display:flex;box-shadow:0 24px 60px #0006}.promotion-label{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0;font-size:.85rem;font-weight:600}.promotion-grid{gap:8px;display:flex}.promotion-option{background:var(--surface-raised,var(--surface));cursor:pointer;border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;width:72px;height:72px;padding:8px;transition:border-color .15s,background .15s,transform .1s;display:flex}.promotion-option:hover{border-color:var(--primary);background:var(--primary-subtle,#ffffff0d);transform:translateY(-2px)}.promotion-option:active{transform:translateY(0)}.promotion-option img{object-fit:contain;pointer-events:none;width:100%;height:100%}