:root{--bg: #0a0a0f;--surface: rgba(255, 255, 255, .04);--surface-2: rgba(255, 255, 255, .08);--border: rgba(255, 255, 255, .08);--text: #f0f0f5;--text-dim: rgba(255, 255, 255, .55);--accent: #ffd60a;--accent-glow: rgba(255, 214, 10, .3);--success: #30d158;--error: #ff2d55;--warning: #ff9f0a;--tile-bg: rgba(255, 255, 255, .1);--tile-border: rgba(255, 255, 255, .18);color-scheme:dark;font-family:SF Pro Display,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{background:radial-gradient(ellipse at 20% 0%,rgba(120,40,200,.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(0,199,190,.08) 0%,transparent 50%),var(--bg)}.game-container{max-width:1400px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column;gap:12px;transition:background .3s}.warning-flash{animation:warningBg 1s ease-in-out infinite}@keyframes warningBg{0%,to{background:transparent}50%{background:#ff2d5508}}.game-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px;flex-wrap:wrap}.logo{display:flex;align-items:center;gap:10px}.logo-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;background:linear-gradient(135deg,#ffd60a,#ff6b35);color:#0a0a0f;border-radius:10px;text-shadow:0 1px 2px rgba(0,0,0,.2)}.logo-text{font-size:1.3rem;font-weight:800;letter-spacing:.08em;background:linear-gradient(90deg,#ffd60a,#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-sub{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim);display:block}.header-stats{display:flex;gap:12px;flex-wrap:wrap}.stat-box{display:flex;flex-direction:column;align-items:center;padding:4px 12px;min-width:60px}.stat-label{font-size:.55rem;text-transform:uppercase;letter-spacing:.15em;color:var(--text-dim);margin-bottom:2px}.stat-value{font-size:1.1rem;font-weight:700;font-variant-numeric:tabular-nums}.score-value{color:var(--accent);transition:transform .2s}.score-pop{animation:scorePop .5s cubic-bezier(.175,.885,.32,1.275)}@keyframes scorePop{0%{transform:scale(1)}40%{transform:scale(1.5);color:#fff}to{transform:scale(1)}}.combo-value{color:#ff6b35}.best-word{color:var(--success);font-size:.85rem;letter-spacing:.05em}.timer-bar-container{position:relative;height:8px;background:var(--surface-2);border-radius:4px;overflow:hidden}.timer-bar{height:100%;border-radius:4px;transition:width 1s linear,background-color .5s;box-shadow:0 0 12px currentColor}.timer-text{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:.6rem;font-weight:700;color:var(--text-dim);font-variant-numeric:tabular-nums}.score-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:3.5rem;font-weight:900;color:var(--accent);text-shadow:0 0 30px var(--accent-glow),0 0 60px var(--accent-glow);pointer-events:none;z-index:100;animation:scoreFloat 1.5s cubic-bezier(.175,.885,.32,1.275) forwards}@keyframes scoreFloat{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}30%{opacity:1;transform:translate(-50%,-60%) scale(1.2)}to{opacity:0;transform:translate(-50%,-120%) scale(.8)}}.status-bar{padding:8px 16px;border-radius:10px;font-size:.8rem;font-weight:600;text-align:center;letter-spacing:.02em;transition:all .3s}.status-info{background:#5ac8fa1a;color:#5ac8fa;border:1px solid rgba(90,200,250,.2)}.status-success{background:#30d1581a;color:#30d158;border:1px solid rgba(48,209,88,.2);animation:statusGlow .5s ease-out}.status-error{background:#ff2d551a;color:#ff2d55;border:1px solid rgba(255,45,85,.2);animation:statusShake .4s ease-out}.status-warning{background:#ff9f0a1a;color:#ff9f0a;border:1px solid rgba(255,159,10,.2)}@keyframes statusGlow{0%{box-shadow:0 0 20px #30d1584d}to{box-shadow:none}}@keyframes statusShake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}}.game-layout{display:flex;gap:16px;flex:1;align-items:flex-start}.board-wrapper{flex-shrink:0}.board{display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px #0006}.board-row{display:flex;gap:2px}.board-cell{width:38px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:5px;cursor:pointer;position:relative;transition:all .15s;font-size:.55rem;font-weight:700;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.board-cell:hover{filter:brightness(1.3)}.board-cell.hover-place{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:0 0 12px var(--accent-glow)}.board-cell.has-tile{cursor:pointer}.board-cell.has-tile:hover{filter:brightness(.85)}.bonus-label{font-size:.55rem;font-weight:800;color:#ffffffb3;text-transform:uppercase}.tile{display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#ffffff24,#ffffff0f);border:1px solid var(--tile-border);border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;transition:all .15s}.tile-letter{font-size:1.05rem;font-weight:800;line-height:1;letter-spacing:.02em}.tile-value{font-size:.45rem;font-weight:600;color:var(--text-dim);position:absolute;bottom:1px;right:3px}.tile.on-board{width:36px;height:36px}.tile-new{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow),inset 0 0 8px #ffd60a1a;animation:tilePlace .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes tilePlace{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}.hand-section{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}.section-title{font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;color:var(--text-dim);margin-bottom:10px}.hand{display:flex;gap:6px;flex-wrap:wrap}.hand-tile{width:48px;height:52px;font-size:1.3rem;border-radius:8px;background:linear-gradient(145deg,#ffffff1a,#ffffff0a);border:1px solid rgba(255,255,255,.12)}.hand-tile:hover{border-color:#ffffff4d;transform:translateY(-3px);box-shadow:0 6px 20px #0006}.hand-tile.selected{border-color:var(--accent);box-shadow:0 0 16px var(--accent-glow),0 4px 16px #0000004d;transform:translateY(-4px);background:linear-gradient(145deg,#ffd60a26,#ffd60a0d)}.hand-tile .tile-letter{font-size:1.25rem}.hand-tile .tile-value{font-size:.5rem;bottom:3px;right:5px}.empty-hand{color:var(--text-dim);font-size:.8rem;font-style:italic}.actions{display:flex;flex-direction:column;gap:6px}.btn{padding:10px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-size:.75rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:all .2s;text-align:center}.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 16px #0000004d}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:.3;cursor:not-allowed}.btn-primary{background:linear-gradient(135deg,#ffd60a,#ff9f0a);color:#0a0a0f;border:none;font-size:.85rem;padding:12px 16px}.btn-primary:hover:not(:disabled){box-shadow:0 4px 20px #ffd60a4d}.btn-secondary:hover:not(:disabled){background:var(--surface-2)}.btn-warning{color:var(--warning);border-color:#ff9f0a4d}.btn-warning:hover:not(:disabled){background:#ff9f0a1a}.btn-danger{color:var(--error);border-color:#ff2d554d}.btn-danger:hover:not(:disabled){background:#ff2d551a}.btn-large{padding:14px 32px;font-size:.95rem}.info-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}.rules-list{list-style:none;margin-bottom:12px}.rules-list li{font-size:.7rem;color:var(--text-dim);padding:3px 0 3px 14px;position:relative}.rules-list li:before{content:"";position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:var(--accent);transform:translateY(-50%)}.bonus-legend{margin-top:8px}.legend-grid{display:flex;gap:4px;flex-wrap:wrap}.legend-item{width:32px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-size:.55rem;font-weight:800;color:#ffffffe6}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:200;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:40px 48px;text-align:center;animation:slideUp .4s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 20px 60px #00000080}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.game-over-title{font-size:1.8rem;font-weight:900;letter-spacing:.1em;margin-bottom:12px;background:linear-gradient(90deg,var(--accent),#ff6b35);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.final-score{font-size:4rem;font-weight:900;color:var(--accent);text-shadow:0 0 40px var(--accent-glow);margin-bottom:8px;font-variant-numeric:tabular-nums}.final-details{font-size:.8rem;color:var(--text-dim);margin-bottom:24px}.side-panel{flex:1;min-width:220px;max-width:300px;display:flex;flex-direction:column;gap:12px}@media(max-width:900px){.game-layout{flex-direction:column;align-items:center}.side-panel{max-width:100%;width:100%;flex-direction:row;flex-wrap:wrap}.hand-section{flex:1;min-width:200px}.actions{flex-direction:row;flex-wrap:wrap}.btn{flex:1;min-width:80px}.info-panel{flex:1;min-width:200px}.board-cell{width:30px;height:30px}.tile.on-board{width:28px;height:28px}.tile-letter{font-size:.85rem}.hand-tile{width:40px;height:44px}.hand-tile .tile-letter{font-size:1.05rem}}@media(max-width:550px){.game-container{padding:8px}.board-cell{width:22px;height:22px}.tile.on-board{width:20px;height:20px}.tile.on-board .tile-letter{font-size:.7rem}.tile.on-board .tile-value{font-size:.35rem}.bonus-label{font-size:.4rem}.hand-tile{width:36px;height:40px}.header-stats{gap:6px}.stat-box{padding:2px 6px}.stat-value{font-size:.9rem}.game-header{flex-direction:column;align-items:flex-start;gap:8px}}
