:root{--bg: #0f172a;--panel: #111827;--muted: #94a3b8;--text: #e5e7eb;--primary: #22c55e;--primary-700: rgb(27.2, 157.6, 75.2);--secondary: #334155;--accent: #ffffff;--danger: #ef4444;--tile-size: 48px;--grid: 40px}@media(min-width: 2000px){:root{--grid: 40px}}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:"Nunito",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:#0f172a;color:var(--text)}.app-header{display:flex;align-items:center;justify-content:space-between;padding:20px 16px;border-bottom:1px solid #1f2937;background:rgba(17,24,39,.8);backdrop-filter:blur(6px)}.app-header .brand{display:flex;gap:12px;align-items:center}.app-header .brand .main-nav{display:flex;gap:20px;margin-left:24px}.app-header .brand .main-nav a{color:var(--text);text-decoration:none;font-weight:600;padding:8px 12px;border-radius:6px;transition:all .2s ease}.app-header .brand .main-nav a:hover{color:var(--primary);background:hsla(0,0%,100%,.05)}.app-header .brand .main-nav a.active{color:var(--primary);background:rgba(34,197,94,.1)}.app-header h1{font-weight:800;letter-spacing:.5px;margin:0}.app-header img{height:48px;width:auto}.app-header .controls{display:flex;gap:8px;align-items:center}.app-header .controls button,.app-header .controls select{transform:translateZ(0);box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 1px hsla(0,0%,100%,.04) inset}.app-header .controls button.primary{background:linear-gradient(180deg, var(--primary), var(--primary-700));color:#052e14;text-shadow:0 1px 0 hsla(0,0%,100%,.3)}.app-header .controls button.primary:hover{filter:brightness(1.08)}.app-header .controls button.secondary{background:linear-gradient(180deg, #4b5563, #374151);color:#e5e7eb}@media(max-width: 900px){.app-header{padding:12px 8px;flex-direction:column;gap:12px}.app-header .brand{gap:8px;justify-content:center;width:100%;flex-direction:column}.app-header .brand h1{font-size:1.5rem}.app-header .brand .main-nav{margin-left:0;gap:16px;margin-top:8px}.app-header .brand .main-nav a{padding:6px 10px;font-size:.9rem}.app-header img{height:44px}.app-header .controls{flex-wrap:wrap;gap:6px;justify-content:center}.app-header .controls label{font-size:.85rem;white-space:nowrap}.app-header .controls select,.app-header .controls button{padding:6px 8px;font-size:.85rem;min-width:auto}}@media(max-width: 600px){.app-header{padding:10px 6px}.app-header .brand{gap:6px;flex-direction:column}.app-header .brand h1{font-size:1.25rem}.app-header .brand .main-nav{gap:12px}.app-header .brand .main-nav a{padding:4px 8px;font-size:.85rem}.app-header img{height:40px}.app-header .controls{width:100%;justify-content:center}.app-header .controls select,.app-header .controls button{padding:5px 6px;font-size:.8rem}}button,select{background:var(--secondary);color:var(--text);border:1px solid #1f2937;border-radius:10px;padding:8px 12px;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 1px hsla(0,0%,100%,.03) inset;transition:transform 120ms ease,filter 120ms ease,box-shadow 120ms ease}select{padding-right:32px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23d1d5db' d='M5 6L0 1h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:10px 6px}select:hover{transform:translateY(-1px);filter:brightness(1.05);border-color:#374151}select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(59,130,246,.3)}select option{background:var(--secondary);color:var(--text)}button.primary{background:linear-gradient(180deg, var(--primary), var(--primary-700));border:none}button.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}button.secondary{background:#374151}button.secondary:hover{transform:translateY(-1px);filter:brightness(1.05)}button:disabled{opacity:.5;cursor:not-allowed}.layout{display:grid;grid-template-columns:minmax(0, 1fr) clamp(240px,22vw,320px);gap:16px;padding:16px}.board-panel,.right-rail{min-width:0}@media(max-width: 900px){.layout{grid-template-columns:1fr}.right-rail{order:2}.board-panel{order:1}}.board-panel{background:rgba(0,0,0,.2);border:1px solid #1f2937;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.board-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid #1f2937;background:rgba(0,0,0,.15)}.board-toolbar .left-bar{display:flex;align-items:center;gap:10px}.board-zoom{display:none;gap:6px}.board-zoom button{padding:6px 10px;line-height:1}.board-toolbar .turn-actions{display:flex;gap:8px}.board-toolbar .turn-actions #endTurnBtn{background:linear-gradient(180deg, var(--primary), var(--primary-700));color:#fff;border:none;padding:10px 16px;font-weight:800;letter-spacing:.2px;box-shadow:0 10px 28px rgba(16,185,129,.35),0 0 0 1px hsla(0,0%,100%,.05) inset}.board-toolbar .turn-actions #endTurnBtn:hover:not(:disabled),.board-toolbar .turn-actions #endTurnBtn:focus-visible:not(:disabled){filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 34px rgba(16,185,129,.45),0 0 0 1px hsla(0,0%,100%,.06) inset}.board-toolbar .turn-actions #endTurnBtn:disabled{opacity:.55;box-shadow:none;filter:none}.board-toolbar .turn-actions #skipTurnBtn{background:#c9c9c9;color:#444;border:1px solid #475569;box-shadow:0 2px 4px rgba(0,0,0,.1)}.board-toolbar .turn-actions #skipTurnBtn:hover:not(:disabled),.board-toolbar .turn-actions #skipTurnBtn:focus-visible:not(:disabled){color:#e2e8f0;border-color:#64748b;background:rgba(51,65,85,.5);transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,.15)}.board-toolbar .turn-actions #skipTurnBtn:disabled{opacity:.5}.turn-indicator{font-weight:800;color:var(--accent)}.board-scroll{position:relative;overflow:hidden;touch-action:auto;width:100%}.board-stage{position:relative;width:100%;max-width:100%;margin:0 auto}#board{display:block;width:100%;height:auto;background:#0b1222;max-width:100%}@media(max-width: 900px){.board-zoom{display:inline-flex}.board-scroll{overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;max-height:65vh}.board-stage{width:fit-content;height:fit-content;max-width:none}#board{width:auto;max-width:none}}.board-hover{outline:2px dashed var(--accent);outline-offset:-2px;border-radius:8px}.right-rail{display:grid;gap:16px}.rack,.scoreboard,.leaderboard{background:rgba(17,24,39,.65);border:1px solid #1f2937;border-radius:12px;padding:12px}.rack h2,.scoreboard h2,.leaderboard h2{margin:4px 0 12px;font-size:18px}.rack-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.rack .small{padding:6px 10px;font-size:.9rem;border-radius:8px}.rack{max-height:220px;overflow:hidden}.rack .rack-tiles{overflow-x:auto}.right-rail{grid-template-rows:auto auto auto;align-content:start;min-height:0}.scoreboard{overflow:hidden;display:block}.scoreboard ul{max-height:162px;overflow-y:auto}.leaderboard{overflow:hidden}.leaderboard .leaderboard-list{max-height:600px;overflow-y:auto}.footer{text-align:center;color:var(--muted);padding:16px}.content-section{border-top:1px solid #1f2937;padding:32px 16px}.content-section .content-container{max-width:800px;margin:0 auto}.content-section .content-container h2{color:var(--primary);font-size:1.75rem;font-weight:800;margin-bottom:16px;text-align:center}.content-section .content-container h3{color:var(--accent);font-size:1.25rem;font-weight:700;margin:24px 0 12px 0}.content-section .content-container p{color:var(--text);line-height:1.6;margin-bottom:16px}.content-section .content-container ul{color:var(--text);line-height:1.6;margin-left:20px}.content-section .content-container ul li{margin-bottom:8px}.content-section .content-container .faq-item{margin-bottom:24px}.content-section .content-container .faq-item h3{margin-top:0;margin-bottom:8px}.content-section .content-container .faq-item p{margin-bottom:0}@media(max-width: 900px){.content-section{padding:24px 12px}.content-section .content-container h2{font-size:1.5rem}.content-section .content-container h3{font-size:1.125rem}}.content-page{min-height:calc(100vh - 120px);padding:32px 16px}.content-page .content-container{max-width:800px;margin:0 auto}.content-page .content-container h1{color:var(--primary);font-size:2.5rem;font-weight:800;margin-bottom:16px;text-align:center}.content-page .content-container .intro{font-size:1.125rem;color:var(--muted);text-align:center;margin-bottom:32px;line-height:1.6}.content-page .content-container .play-link{color:var(--primary);font-weight:700;text-decoration:none;padding:12px 24px;background:rgba(34,197,94,.1);border:2px solid var(--primary);border-radius:8px;display:inline-block;transition:all .2s ease}.content-page .content-container .play-link:hover{background:var(--primary);color:#052e14}.content-page .content-container a{color:var(--primary);text-decoration:none}.content-page .content-container a:hover{text-decoration:underline}.content-page .content-container ol,.content-page .content-container ul{color:var(--text);line-height:1.6;margin-left:20px}.content-page .content-container ol li,.content-page .content-container ul li{margin-bottom:8px}@media(max-width: 900px){.content-page{padding:24px 12px}.content-page .content-container h1{font-size:2rem}.content-page .content-container .intro{font-size:1rem}}@media(min-width: 2000px){.board-scroll{display:flex;justify-content:center}#board{max-width:1500px;margin:0 auto}}.rack-tiles{display:flex;flex-wrap:nowrap;gap:8px;min-height:var(--tile-size);overflow-x:auto;padding-bottom:2px}.tile{width:var(--tile-size);height:var(--tile-size);border-radius:8px;display:grid;place-items:center;background:#0a0f1d;border:1px solid #1f2937;user-select:none;touch-action:none;box-shadow:0 1px 0 hsla(0,0%,100%,.04) inset,0 6px 10px rgba(0,0,0,.35)}.tile .glyph{font-size:22px;filter:drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5))}.tile.dragging{opacity:.7;transform:scale(1.04)}.tile:hover{box-shadow:0 0 0 2px var(--accent) inset,0 1px 0 hsla(0,0%,100%,.04) inset,0 6px 10px rgba(0,0,0,.35)}.scoreboard ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.scoreboard li{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;background:rgba(0,0,0,.22);border:1px solid #1f2937;padding:4px 10px;border-radius:8px;line-height:1.1;transition:filter 120ms ease,box-shadow 120ms ease}.scoreboard li:hover{filter:brightness(1.05)}.scoreboard li .label{display:inline-flex;gap:6px;align-items:baseline}.scoreboard li .tiles-count{color:var(--muted);font-weight:700;font-size:.8em;padding:1px 6px;border-radius:999px;background:hsla(0,0%,100%,.05);border:1px solid hsla(0,0%,100%,.06)}.scoreboard li .score{font-weight:800;font-variant-numeric:tabular-nums;text-align:right;min-width:2.3ch;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid hsla(0,0%,100%,.05)}.scoreboard .me{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}.scoreboard .ai-turn{box-shadow:0 0 0 2px var(--accent) inset}.scoreboard li[style*=border-left]{padding-left:14px}.scoreboard li[style*=border-left]:hover{filter:brightness(1.1)}.leaderboard .leaderboard-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.leaderboard .leaderboard-list li{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;gap:4px 8px;background:rgba(0,0,0,.22);border:1px solid #1f2937;padding:8px 10px;border-radius:8px;line-height:1.1}.leaderboard .leaderboard-list li .player-name{grid-column:1;grid-row:1;font-weight:600}.leaderboard .leaderboard-list li .player-score{grid-column:2;grid-row:1;font-weight:800;font-variant-numeric:tabular-nums;min-width:2.3ch;text-align:right;padding:1px 8px;border-radius:999px;background:rgba(0,0,0,.35);border:1px solid hsla(0,0%,100%,.05)}.leaderboard .leaderboard-list li .player-stats{grid-column:1/-1;grid-row:2;font-size:.8em;color:var(--muted);margin-top:2px}.grid-line{stroke:#223049;stroke-width:1}.toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#111827;color:var(--text);border:1px solid #1f2937;padding:10px 14px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:1000;pointer-events:none}.celebration-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}.confetti{position:absolute;top:0;width:8px;height:8px;border-radius:2px;opacity:0;transform:translate3d(0, -20px, 0) rotate(0deg);animation:confetti-fall 1800ms ease-out forwards;will-change:transform,opacity}@keyframes confetti-fall{0%{opacity:0;transform:translate3d(var(--x, 0px), -20px, 0) rotate(0deg)}10%{opacity:1}100%{opacity:0;transform:translate3d(var(--x, 0px), var(--fall, 1200px), 0) rotate(360deg)}}@keyframes confetti-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:2000}.overlay[hidden]{display:none}.overlay-card{width:min(520px,92vw);background:rgba(17,24,39,.9);border:1px solid #1f2937;border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.55)}.overlay-card h2{margin:0 0 10px}.overlay-card .muted{color:var(--muted);margin:0 0 10px}.overlay-card input[type=text],.overlay-card input[type=search],.overlay-card input[type=email]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #1f2937;background:rgba(0,0,0,.25);color:var(--text)}.overlay-card select{width:100%;padding:12px 40px 12px 12px;border-radius:10px;border:1px solid #374151;background:rgba(0,0,0,.4);color:var(--text);font-size:1rem;font-weight:500;cursor:pointer;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23d1d5db' d='M6 8L0 2h12z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;transition:all .2s ease}.overlay-card select:hover{border-color:#4b5563;background-color:rgba(0,0,0,.5);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)}.overlay-card select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(59,130,246,.3)}.overlay-card select option{background:var(--secondary);color:var(--text);padding:8px}.final-scores{list-style:none;padding:0;margin:10px 0 16px;display:grid;gap:8px}.final-scores li{display:flex;justify-content:space-between;background:rgba(0,0,0,.25);padding:8px 10px;border-radius:10px}.overlay-card .actions{display:flex;justify-content:flex-end}.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}
