*{box-sizing:border-box;margin:0;padding:0}:root{--bg: #1a1917;--bg-gradient: radial-gradient(1200px 600px at 50% -10%, #26302a 0%, #1a1917 55%);--panel: #23221f;--panel-light: #2e2c29;--panel-border: #3a3833;--text: #ecebe8;--muted: #a3a19c;--accent: #81b64c;--accent-hover: #95ca5e;--accent-dark: #5d8a35;--danger: #e2574f;--danger-hover: #ef6b63;--gold: #e3b04b;--blue: #4f8ef7;--radius: 14px;--radius-sm: 10px;--shadow-soft: 0 4px 18px rgba(0, 0, 0, .35);--shadow-deep: 0 16px 48px rgba(0, 0, 0, .55);--shadow-btn: 0 3px 10px rgba(0, 0, 0, .3);--transition: .18s cubic-bezier(.4, 0, .2, 1)}html{-webkit-text-size-adjust:100%}body{background:var(--bg);background-image:var(--bg-gradient);background-attachment:fixed;color:var(--text);font-family:Segoe UI,system-ui,-apple-system,Helvetica Neue,sans-serif;min-height:100vh;overflow-x:hidden;line-height:1.45}.container{max-width:1100px;margin:0 auto;padding:20px 16px 40px}.app-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.app-header .logo{font-size:2rem;filter:drop-shadow(0 2px 6px rgba(129,182,76,.35))}.app-header h1{font-size:1.4rem;font-weight:800;letter-spacing:.4px;background:linear-gradient(120deg,var(--text) 40%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.app-header a{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:12px;transition:transform var(--transition)}.app-header a:hover{transform:translate(2px)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 24px;border:none;border-radius:var(--radius-sm);font-size:1rem;font-weight:700;font-family:inherit;cursor:pointer;color:#fff;background:var(--panel-light);box-shadow:var(--shadow-btn),inset 0 1px #ffffff0f;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:manipulation}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0006,inset 0 1px #ffffff14;background:#37342f}.btn:active{transform:translateY(0);box-shadow:var(--shadow-btn)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.btn-primary{background:linear-gradient(180deg,var(--accent) 0%,var(--accent-dark) 100%);color:#17210e;text-shadow:0 1px 0 rgba(255,255,255,.15)}.btn-primary:hover{background:linear-gradient(180deg,var(--accent-hover) 0%,var(--accent) 100%)}.btn-danger{background:linear-gradient(180deg,var(--danger) 0%,#c1443d 100%)}.btn-danger:hover{background:linear-gradient(180deg,var(--danger-hover) 0%,var(--danger) 100%)}.btn-gold{background:linear-gradient(180deg,var(--gold) 0%,#c3963c 100%);color:#241c08}.btn-gold:hover{background:linear-gradient(180deg,#f0bf5c 0%,var(--gold) 100%)}.btn-lg{min-height:56px;padding:18px 36px;font-size:1.15rem}.btn-sm{min-height:44px;padding:10px 16px;font-size:.92rem}.home-hero{text-align:center;padding:48px 0 32px}.home-hero .big-piece{font-size:5rem;display:inline-block;filter:drop-shadow(0 6px 24px rgba(129,182,76,.4));animation:float 4s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.home-hero h1{font-size:clamp(2rem,6vw,2.8rem);font-weight:800;margin:12px 0 8px;letter-spacing:-.5px}.home-hero p{color:var(--muted);font-size:1.1rem}.home-buttons{display:flex;gap:20px;justify-content:center;margin-top:36px;flex-wrap:wrap}.mode-card{background:linear-gradient(160deg,var(--panel) 0%,#1f1e1b 100%);border:1px solid var(--panel-border);border-radius:var(--radius);padding:32px 36px;width:300px;max-width:100%;cursor:pointer;text-align:center;box-shadow:var(--shadow-soft);transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.mode-card:hover{border-color:var(--accent);transform:translateY(-5px);box-shadow:0 14px 34px #00000080,0 0 0 1px #81b64c40}.mode-card:active{transform:translateY(-2px)}.mode-card .icon{font-size:3rem}.mode-card h2{margin:14px 0 6px;font-size:1.25rem;font-weight:800}.mode-card p{color:var(--muted);font-size:.95rem}.panel{background:linear-gradient(160deg,var(--panel) 0%,#201f1c 100%);border:1px solid var(--panel-border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-soft)}.panel h2{margin-bottom:20px;font-weight:800}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:var(--muted);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px}.form-group input[type=text]{width:100%;min-height:48px;padding:12px 16px;border-radius:var(--radius-sm);border:1.5px solid var(--panel-border);background:var(--panel-light);color:var(--text);font-size:1rem;font-family:inherit;transition:border-color var(--transition),box-shadow var(--transition)}.form-group input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px #81b64c2e}.option-row{display:flex;gap:10px;flex-wrap:wrap}.option-btn{min-height:46px;padding:10px 18px;border-radius:var(--radius-sm);border:2px solid var(--panel-border);background:var(--panel-light);color:var(--text);font-size:.95rem;font-weight:700;font-family:inherit;cursor:pointer;transition:border-color var(--transition),background var(--transition),transform var(--transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.option-btn.selected{border-color:var(--accent);background:#81b64c29;box-shadow:0 0 0 3px #81b64c1f}.option-btn:hover{border-color:var(--accent);transform:translateY(-1px)}.game-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;justify-content:center}.board-column{width:min(560px,100%,calc(100dvh - 260px));min-width:260px}.side-column{width:300px;display:flex;flex-direction:column;gap:14px}.player-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 4px;min-width:0}.player-bar .name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.player-bar .sub{color:var(--muted);font-size:.85rem;margin-left:8px;font-weight:500}.clock{font-family:Courier New,monospace;font-size:1.55rem;font-weight:700;background:var(--panel-light);padding:4px 14px;border-radius:var(--radius-sm);border:2px solid transparent;box-shadow:inset 0 2px 6px #0000004d;flex-shrink:0;transition:border-color var(--transition),background var(--transition)}.clock.active{border-color:var(--accent);background:#81b64c24;box-shadow:inset 0 2px 6px #0000004d,0 0 12px #81b64c40}.clock.low{color:var(--danger)}.controls{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}.controls .btn{flex:1 1 auto}.status-box{background:linear-gradient(160deg,var(--panel) 0%,#201f1c 100%);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px 20px;font-size:1.05rem;text-align:center;box-shadow:var(--shadow-soft)}.status-box.result{border-color:var(--gold);font-weight:700;font-size:1.15rem;box-shadow:var(--shadow-soft),0 0 24px #e3b04b1f}.move-list{background:linear-gradient(160deg,var(--panel) 0%,#201f1c 100%);border:1px solid var(--panel-border);border-radius:var(--radius);padding:16px;max-height:320px;overflow-y:auto;font-family:Courier New,monospace;font-size:.95rem;box-shadow:var(--shadow-soft)}.move-list::-webkit-scrollbar{width:8px}.move-list::-webkit-scrollbar-thumb{background:var(--panel-border);border-radius:4px}.move-list .move-row{display:flex;gap:12px;padding:3px 0}.move-list .move-num{color:var(--muted);width:32px}.lobby-grid{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}.lobby-grid .panel{flex:1;min-width:min(320px,100%)}.room-list{display:flex;flex-direction:column;gap:10px}.room-item{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel-light);border:1px solid var(--panel-border);border-radius:var(--radius-sm);padding:14px 16px;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.room-item:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 14px #0000004d}.room-item .room-info{min-width:0}.room-item .room-info .host{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-item .room-info .tc{color:var(--muted);font-size:.9rem}.empty-lobby{color:var(--muted);text-align:center;padding:30px 0}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0a0a08b8;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:overlay-fade .18s ease-out}@keyframes overlay-fade{0%{opacity:0}to{opacity:1}}.modal{background:linear-gradient(160deg,var(--panel) 0%,#1e1d1a 100%);border:1px solid var(--panel-border);border-radius:var(--radius);padding:28px;width:min(420px,100%);text-align:center;box-shadow:var(--shadow-deep)}.modal h3{margin-bottom:8px;font-size:1.4rem;font-weight:800}.modal .modal-buttons{display:flex;gap:12px;justify-content:center;margin-top:22px}.modal .modal-buttons .btn{flex:1;min-height:50px;font-size:1.05rem}.confirm-modal,.draw-modal{border:2px solid var(--gold);animation:modal-pop .22s cubic-bezier(.34,1.4,.64,1)}.confirm-modal{border-color:var(--accent)}.confirm-modal-icon,.draw-modal-icon{font-size:3.2rem;line-height:1}.confirm-modal-text{color:var(--muted);margin:8px 0 4px;font-size:1.02rem}.confirm-modal-text strong{color:var(--text)}.draw-modal h3{margin-top:8px}.draw-modal-buttons,.confirm-modal-buttons{margin-top:24px}@keyframes modal-pop{0%{transform:scale(.88) translateY(8px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}.promotion-modal{width:min(360px,100%);border:2px solid var(--accent);animation:modal-pop .18s cubic-bezier(.34,1.4,.64,1);padding:22px}.promotion-modal h3{font-size:1.15rem;margin-bottom:16px}.promotion-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.promotion-choice{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:78px;padding:10px 4px;border:2px solid var(--panel-border);border-radius:var(--radius-sm);background:var(--panel-light);color:var(--text);font-family:inherit;cursor:pointer;transition:border-color var(--transition),transform var(--transition),background var(--transition);-webkit-tap-highlight-color:transparent;touch-action:manipulation}.promotion-choice:hover{border-color:var(--accent);background:#81b64c24;transform:translateY(-3px)}.promotion-choice:active{transform:translateY(0)}.promotion-glyph{font-size:2.2rem;line-height:1}.piece-white .promotion-glyph{color:#f5f5f0;text-shadow:0 1px 3px rgba(0,0,0,.7)}.piece-black .promotion-glyph{color:#1e1d1a;text-shadow:0 0 3px rgba(255,255,255,.55)}.promotion-name{font-size:.72rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}.promotion-cancel{margin-top:14px;min-height:40px;width:100%;border:none;border-radius:var(--radius-sm);background:transparent;color:var(--muted);font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;transition:color var(--transition),background var(--transition)}.promotion-cancel:hover{color:var(--text);background:var(--panel-light)}@media (max-width: 420px){.promotion-choices{grid-template-columns:repeat(2,1fr)}.promotion-choice{min-height:84px}}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:var(--panel-light);color:var(--text);border:1px solid var(--panel-border);border-left:4px solid var(--gold);border-radius:var(--radius-sm);padding:14px 22px;font-size:.98rem;font-weight:600;box-shadow:var(--shadow-deep);z-index:200;max-width:min(420px,calc(100vw - 32px));animation:toast-in .25s cubic-bezier(.34,1.4,.64,1)}@keyframes toast-in{0%{transform:translate(-50%) translateY(16px);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.draw-banner{background:#e3b04b1a;border:1px solid var(--gold);border-radius:var(--radius);padding:14px 18px;text-align:center;box-shadow:var(--shadow-soft)}.draw-banner .modal-buttons{margin-top:10px;display:flex;gap:10px;justify-content:center}.waiting-spinner{text-align:center;padding:40px 0}.waiting-spinner .spin{display:inline-block;font-size:3rem;animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.share-link-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}.share-link-row input{flex:1;min-width:0;min-height:44px;padding:10px 12px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--panel-light);color:var(--accent);font-size:.9rem;font-family:Courier New,monospace}.premove-banner{display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:#4f8ef71f;border:1px solid var(--blue);border-radius:var(--radius-sm);padding:8px 14px;margin-top:10px;font-size:.95rem;box-shadow:var(--shadow-soft)}.premove-banner .sub{color:var(--muted);font-size:.8rem}.away-badge{margin-left:10px;background:var(--danger);color:#fff;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:10px;animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}@keyframes check-pulse{0%,to{opacity:1}50%{opacity:.45}}.rematch-status{color:var(--gold);font-size:.9rem;margin-top:8px}.rematch-unavailable{color:var(--muted);font-size:.9rem;margin-top:8px}.error-text{color:var(--danger);margin-top:8px;font-size:.9rem}.back-link{color:var(--muted);text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;min-height:44px;margin-bottom:8px;transition:color var(--transition)}.back-link:hover{color:var(--text)}.thinking-indicator{color:var(--gold);font-style:italic}@media (max-width: 900px){.game-layout{flex-direction:column;align-items:center;gap:16px}.board-column{width:min(560px,100%,calc(100dvh - 300px))}.side-column{width:min(560px,100%)}.move-list{max-height:200px}}@media (max-width: 600px){.container{padding:12px 10px 32px}.app-header{margin-bottom:14px}.app-header .logo{font-size:1.6rem}.app-header h1{font-size:1.15rem}.board-column{width:min(100%,calc(100dvh - 280px));min-width:240px}.home-hero{padding:28px 0 20px}.home-hero .big-piece{font-size:3.6rem}.home-buttons{gap:12px;margin-top:24px}.mode-card{width:100%;padding:24px 20px}.panel{padding:20px 16px}.clock{font-size:1.3rem;padding:3px 10px}.player-bar .sub{display:none}.controls{gap:8px}.controls .btn{flex:1 1 30%;padding:10px 8px;font-size:.88rem}.modal{padding:22px 16px}.modal .modal-buttons,.draw-modal-buttons,.confirm-modal-buttons{flex-direction:column}.modal .modal-buttons .btn{width:100%}.option-btn{flex:1 1 28%;padding:10px 8px}.share-link-row .btn{width:100%}.toast{bottom:16px;font-size:.92rem;padding:12px 16px}}@media (max-width: 380px){.controls .btn{font-size:.8rem}.clock{font-size:1.15rem}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}