.quirtle-game{--quirtle-accent:#10b981;--quirtle-bg:#0f172a;--quirtle-surface:#1e293b;--quirtle-text:#f8fafc;--quirtle-text-muted:#94a3b8;--tile-red:#ef4444;--tile-orange:#f97316;--tile-yellow:#eab308;--tile-green:#22c55e;--tile-blue:#3b82f6;--tile-purple:#a855f7}.quirtle-home{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);flex-direction:column;align-items:center;padding:2rem;display:flex}.quirtle-home h1{color:var(--quirtle-accent);margin-bottom:.5rem;font-size:3rem;font-weight:800}.quirtle-home .subtitle{color:var(--quirtle-text-muted);margin-bottom:2rem}.quirtle-home .how-to-play{background:var(--quirtle-surface);border-radius:1rem;max-width:400px;margin-bottom:2rem;padding:1.5rem}.quirtle-home .how-to-play ul{margin:0;padding:0;list-style:none}.quirtle-home .how-to-play li{padding:.5rem 0 .5rem 1.5rem;position:relative}.quirtle-home .how-to-play li:before{content:"•";color:var(--quirtle-accent);position:absolute;left:0}.quirtle-game .btn{cursor:pointer;border:none;border-radius:.75rem;padding:1rem 2rem;font-size:1rem;font-weight:600;transition:all .2s}.quirtle-game .btn-primary{background:var(--quirtle-accent);color:#fff}.quirtle-game .btn-primary:hover{filter:brightness(1.1)}.quirtle-game .btn-primary:disabled{opacity:.5;cursor:not-allowed}.quirtle-game .btn-secondary{background:var(--quirtle-surface);color:var(--quirtle-text);border:1px solid var(--quirtle-text-muted)}.quirtle-game .btn-secondary:hover{background:#334155}.quirtle-game .btn-back{color:var(--quirtle-text-muted);cursor:pointer;background:0 0;border:none;font-size:1rem;position:absolute;top:1rem;left:1rem}.quirtle-game .btn-back:hover{color:var(--quirtle-text)}.quirtle-game .button-group{flex-direction:column;gap:1rem;width:100%;max-width:300px;display:flex}.quirtle-game .input-group{margin-bottom:1.5rem}.quirtle-game .input-group label{margin-bottom:.5rem;font-weight:500;display:block}.quirtle-game .input-group input{border:1px solid var(--quirtle-text-muted);background:var(--quirtle-surface);width:100%;color:var(--quirtle-text);box-sizing:border-box;border-radius:.75rem;padding:1rem;font-size:1rem}.quirtle-game .input-group input:focus{border-color:var(--quirtle-accent);outline:none}.quirtle-game .error{color:#fecaca;background:#7f1d1d;border-radius:.5rem;margin-bottom:1rem;padding:1rem}.quirtle-create-room,.quirtle-join-room{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex;position:relative}.quirtle-create-room h1,.quirtle-join-room h1{margin-bottom:.5rem;font-size:2rem}.quirtle-create-room .subtitle,.quirtle-join-room .subtitle{color:var(--quirtle-text-muted);margin-bottom:2rem}.quirtle-create-room form,.quirtle-join-room form{width:100%;max-width:300px}.quirtle-lobby{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);flex-direction:column;align-items:center;padding:2rem;display:flex;position:relative}.quirtle-lobby h1{margin-bottom:.5rem;font-size:2rem}.quirtle-lobby .room-code{color:var(--quirtle-accent);letter-spacing:.2em;margin-bottom:2rem;font-size:3rem;font-weight:800}.quirtle-lobby .players-list{background:var(--quirtle-surface);border-radius:1rem;width:100%;max-width:400px;margin-bottom:2rem;padding:1.5rem}.quirtle-lobby .players-list h2{color:var(--quirtle-text-muted);margin-bottom:1rem;font-size:1rem}.quirtle-lobby .player-item{border-bottom:1px solid #334155;align-items:center;gap:.75rem;padding:.75rem 0;display:flex}.quirtle-lobby .player-item:last-child{border-bottom:none}.quirtle-lobby .player-avatar{background:var(--quirtle-accent);border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-weight:700;display:flex}.quirtle-lobby .player-name{flex:1}.quirtle-lobby .host-badge{background:var(--quirtle-accent);color:#fff;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem}.quirtle-lobby .waiting-text{color:var(--quirtle-text-muted);font-style:italic}.quirtle-tile{cursor:pointer;color:#fff;background:#1e293b;border:2px solid #334155;border-radius:8px;justify-content:center;align-items:center;width:50px;height:50px;font-size:1.75rem;transition:transform .15s,box-shadow .15s;display:flex}.quirtle-tile:hover{border-color:#475569;transform:scale(1.05)}.quirtle-tile.selected{border-color:var(--quirtle-accent);box-shadow:0 0 12px #10b98180}.quirtle-tile.disabled{opacity:.5;cursor:not-allowed}.quirtle-tile.disabled:hover{border-color:#334155;transform:none}.quirtle-tile[data-color=red]{color:var(--tile-red)}.quirtle-tile[data-color=orange]{color:var(--tile-orange)}.quirtle-tile[data-color=yellow]{color:var(--tile-yellow)}.quirtle-tile[data-color=green]{color:var(--tile-green)}.quirtle-tile[data-color=blue]{color:var(--tile-blue)}.quirtle-tile[data-color=purple]{color:var(--tile-purple)}.quirtle-tile .shape-circle:before{content:"●"}.quirtle-tile .shape-square:before{content:"■"}.quirtle-tile .shape-diamond:before{content:"◆"}.quirtle-tile .shape-star:before{content:"★"}.quirtle-tile .shape-cross:before{content:"✚"}.quirtle-tile .shape-triangle:before{content:"▲"}.quirtle-tile-used-overlay{color:#fff;pointer-events:none;background:#10b98166;border-radius:8px;justify-content:center;align-items:center;font-size:1.5rem;display:flex;position:absolute;inset:0}.quirtle-hand{background:var(--quirtle-surface);border-radius:1rem;flex-wrap:wrap;justify-content:center;gap:.5rem;padding:1rem;display:flex}.quirtle-board-container{background:var(--quirtle-bg);touch-action:none;flex:1;position:relative;overflow:hidden}.quirtle-board{min-width:100%;min-height:100%;position:relative}.quirtle-board .tile-slot{justify-content:center;align-items:center;width:54px;height:54px;display:flex;position:absolute}.quirtle-board .valid-position{border:2px dashed var(--quirtle-accent);cursor:pointer;background:#10b98133;border-radius:8px;width:50px;height:50px}.quirtle-board .valid-position:hover{background:#10b98166}.quirtle-scoreboard{flex-wrap:wrap;justify-content:center;gap:1rem;padding:.5rem 1rem;display:flex}.quirtle-score-item{text-align:center;background:var(--quirtle-surface);border-radius:.5rem;min-width:70px;padding:.25rem .5rem}.quirtle-score-item.active{background:var(--quirtle-accent)}.quirtle-score-item .name{color:var(--quirtle-text-muted);font-size:.75rem}.quirtle-score-item.active .name{color:#fffc}.quirtle-score-item .score{font-size:1.25rem;font-weight:700}.quirtle-game-screen{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);flex-direction:column;display:flex}.quirtle-game-header{background:var(--quirtle-surface);justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex}.quirtle-game-header .btn-back{position:static}.quirtle-game-footer{background:var(--quirtle-surface);padding:1rem}.quirtle-turn-indicator{text-align:center;background:var(--quirtle-accent);color:#fff;padding:.5rem;font-weight:600}.quirtle-turn-indicator.waiting{background:#334155}.quirtle-score-popup{text-align:center;color:#1e293b;background:#fbbf24;padding:.5rem;font-weight:600}.quirtle-score-popup.qwirkle{background:#f59e0b;animation:.5s ease-in-out pulse}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.quirtle-end-screen{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);flex-direction:column;justify-content:center;align-items:center;padding:2rem;display:flex}.quirtle-end-screen h1{margin-bottom:.5rem;font-size:2.5rem}.quirtle-end-screen .winner{color:var(--quirtle-accent);margin-bottom:2rem;font-size:1.5rem}.quirtle-final-scores{background:var(--quirtle-surface);border-radius:1rem;width:100%;max-width:400px;margin-bottom:2rem;padding:1.5rem}.quirtle-final-scores .score-row{border-bottom:1px solid #334155;justify-content:space-between;padding:.75rem 0;display:flex}.quirtle-final-scores .score-row:last-child{border-bottom:none}.quirtle-final-scores .score-row.winner{color:var(--quirtle-accent);font-weight:700}.quirtle-actions{flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:.5rem;display:flex}.quirtle-actions .btn{padding:.75rem 1.5rem;font-size:.875rem}.quirtle-hint{text-align:center;color:var(--quirtle-text-muted);margin-bottom:.5rem;font-size:.875rem}.quirtle-bag-count{color:var(--quirtle-text-muted);white-space:nowrap;font-size:.875rem}.quirtle-loading{background:var(--quirtle-bg);min-height:100vh;color:var(--quirtle-text);justify-content:center;align-items:center;display:flex}