:root{--primary:#6c5ce7;--primary-light:#a29bfe;--primary-dark:#4834d4;--accent:#00cec9;--accent-dark:#00b894;--danger:#ff7675;--danger-dark:#d63031;--warning:#fdcb6e;--success:#55efc4;--bg:#0f1220;--bg2:#161b2e;--bg3:#1e2238;--tile-bg:#1e2238;--tile-border:#2d3561;--text:#e8eaf6;--text-muted:#8892b0;--text-dim:#4a5568;--font-main:"Poppins", sans-serif;--font-ui:"Inter", sans-serif;--radius-sm:8px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--shadow-glow:0 0 20px #6c5ce766;--shadow-accent:0 0 20px #00cec966;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;font-family:var(--font-main);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow:hidden}.screen{background:var(--bg);opacity:0;pointer-events:none;z-index:10;flex-direction:column;transition:opacity .3s;display:flex;position:fixed;inset:0}.screen.active{opacity:1;pointer-events:all}.overlay-screen{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:50;background:#0a0c18eb;justify-content:center;align-items:center}#splash-screen{justify-content:center;align-items:center;overflow:hidden}.splash-bg{background:radial-gradient(ellipse at 30% 20%, #6c5ce74d 0%, transparent 60%), radial-gradient(ellipse at 70% 80%, #00cec933 0%, transparent 60%), var(--bg);position:absolute;inset:0}.splash-content{z-index:2;flex-direction:column;align-items:center;gap:40px;width:100%;max-width:400px;padding:40px 24px;display:flex;position:relative}.logo-container{text-align:center}.logo-dice{filter:drop-shadow(0 0 24px #6c5ce7cc);margin-bottom:16px;font-size:72px;animation:3s ease-in-out infinite floatDice;display:block}@keyframes floatDice{0%,to{transform:translateY(0)rotate(-5deg)}50%{transform:translateY(-16px)rotate(5deg)}}.logo-title{background:linear-gradient(135deg, var(--primary-light), var(--accent));-webkit-text-fill-color:transparent;letter-spacing:2px;-webkit-background-clip:text;font-size:36px;font-weight:900;line-height:1.1}.logo-title span{letter-spacing:6px;font-size:28px}.logo-subtitle{color:var(--text-muted);letter-spacing:1px;margin-top:12px;font-size:13px}.splash-buttons{flex-direction:column;gap:12px;width:100%;display:flex}.splash-version{color:var(--text-dim);font-size:11px;font-family:var(--font-ui)}.floating-particles{pointer-events:none;position:absolute;inset:0}.particle{opacity:0;border-radius:50%;animation:linear infinite particleFloat;position:absolute}@keyframes particleFloat{0%{opacity:0;transform:translateY(100vh)scale(0)}10%{opacity:.6}90%{opacity:.3}to{opacity:0;transform:translateY(-20vh)scale(1)}}.btn{border-radius:var(--radius-md);font-family:var(--font-main);cursor:pointer;transition:all var(--transition);text-transform:uppercase;letter-spacing:1px;border:none;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-size:15px;font-weight:700;display:flex;position:relative;overflow:hidden}.btn:after{content:"";background:#fff0;transition:background .2s;position:absolute;inset:0}.btn:hover:after{background:#ffffff14}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 24px #6c5ce780}.btn-primary:hover{box-shadow:0 6px 32px #6c5ce7b3}.btn-secondary{background:var(--bg3);color:var(--primary-light);border:1.5px solid var(--primary)}.btn-secondary:hover{background:#6c5ce726}.btn-ghost{color:var(--text-muted);border:1.5px solid var(--tile-border);background:0 0}.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}.btn-large{border-radius:var(--radius-lg);padding:18px 32px;font-size:17px}.btn-full{width:100%;margin-top:auto}.btn-icon{font-size:18px}.btn-back{background:var(--bg3);width:40px;height:40px;color:var(--text);cursor:pointer;transition:all var(--transition);border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;display:flex}.btn-back:hover{background:var(--tile-border)}.btn-icon-round{width:36px;height:36px;color:var(--text);cursor:pointer;transition:all var(--transition);background:#ffffff14;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.btn-icon-round:hover{background:#ffffff26}.screen-header{border-bottom:1px solid var(--tile-border);align-items:center;gap:16px;padding:16px 20px;display:flex}.screen-header h2{font-size:20px;font-weight:700}#mode-screen{padding-bottom:24px;overflow-y:auto}.mode-grid{flex-direction:column;gap:12px;padding:20px;display:flex}.mode-card{background:var(--bg3);border:2px solid var(--tile-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);align-items:center;gap:16px;padding:20px;display:flex;position:relative}.mode-card:hover{border-color:var(--primary);background:#6c5ce71a}.mode-card.active{border-color:var(--primary);background:#6c5ce726}.mode-icon{font-size:32px}.mode-name{font-size:18px;font-weight:700}.mode-desc{color:var(--text-muted);margin-top:2px;font-size:13px}.mode-badge{background:var(--primary);color:#fff;letter-spacing:1px;text-transform:uppercase;border-radius:20px;padding:3px 8px;font-size:10px;font-weight:700;position:absolute;top:12px;right:12px}.mode-badge.new{background:var(--danger)}.difficulty-section{padding:0 20px 20px}.difficulty-section h3{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;font-size:14px}.difficulty-tabs{gap:8px;display:flex}.diff-btn{background:var(--bg3);border:1.5px solid var(--tile-border);color:var(--text-muted);border-radius:var(--radius-sm);font-family:var(--font-main);cursor:pointer;transition:all var(--transition);flex:1;padding:10px 8px;font-size:12px;font-weight:600}.diff-btn.active{border-color:var(--accent);color:var(--accent);background:#00cec91a}#mode-screen .btn-full{width:calc(100% - 40px);margin:0 20px}#game-screen{background:var(--bg);flex-direction:column;display:flex}.top-bar{border-bottom:1px solid var(--tile-border);background:#161b2ee6;flex-shrink:0;justify-content:space-between;align-items:center;height:56px;padding:10px 16px;display:flex}.top-left,.top-center,.top-right{align-items:center;gap:8px;display:flex}.level-badge{background:linear-gradient(135deg, var(--primary), var(--accent));color:#fff;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:700}.score-display{flex-direction:column;align-items:center;display:flex}.score-label{letter-spacing:2px;color:var(--text-muted);font-size:9px;font-family:var(--font-ui)}.score-value{color:var(--warning);font-size:22px;font-weight:800;line-height:1}.stat-chip{background:var(--bg3);border-radius:20px;align-items:center;gap:4px;padding:4px 10px;font-size:14px;font-weight:700;display:flex}.stat-chip.highlight{border:1px solid var(--primary);color:var(--primary-light);background:#6c5ce733}.timer-bar-container{background:var(--bg3);flex-shrink:0;height:6px;position:relative}.timer-bar{background:linear-gradient(90deg, var(--accent), var(--primary));width:100%;height:100%;transition:width 1s linear}.timer-text{color:var(--accent);font-size:12px;font-weight:700;position:absolute;top:8px;right:8px}.canvas-container{background:var(--bg);flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}#game-canvas{image-rendering:pixelated;display:block}.move-overlay{opacity:.6;transition:opacity var(--transition);flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;bottom:12px;right:12px}.move-overlay:hover{opacity:1}.move-row{align-items:center;gap:4px;display:flex}.move-btn{border:1.5px solid var(--primary);width:44px;height:44px;color:var(--text);cursor:pointer;transition:all var(--transition);background:#6c5ce74d;border-radius:10px;justify-content:center;align-items:center;font-size:18px;display:flex}.move-btn:hover{background:#6c5ce799;transform:scale(1.05)}.move-btn:active{background:var(--primary);transform:scale(.95)}.move-center{width:44px;height:44px}.bottom-hud{background:var(--bg2);border-top:1px solid var(--tile-border);flex-direction:column;flex-shrink:0;gap:12px;padding:12px 16px;display:flex;position:relative}.hud-row{align-items:center;gap:12px;display:flex}.hud-actions{justify-content:space-between}.dice-inventory{flex:1}.inventory-label{color:var(--text-dim);letter-spacing:1px;text-transform:uppercase;font-size:10px;font-family:var(--font-ui);margin-bottom:6px}.dice-slots{gap:8px;display:flex}.dice-slot{background:var(--bg3);border:1.5px solid var(--tile-border);border-radius:var(--radius-sm);cursor:pointer;width:48px;height:48px;transition:all var(--transition);flex-direction:column;justify-content:center;align-items:center;gap:2px;font-size:10px;display:flex}.dice-slot:hover{border-color:var(--primary);background:#6c5ce726}.dice-slot.selected{border-color:var(--accent);background:#00cec91a;box-shadow:0 0 12px #00cec94d}.dice-slot .slot-icon{font-size:20px}.dice-slot .slot-name{color:var(--text-muted);font-size:9px;font-family:var(--font-ui)}.dice-display-area{align-items:center;gap:12px;display:flex}.dice-current{background:linear-gradient(135deg, var(--primary), var(--primary-dark));border-radius:var(--radius-sm);flex-direction:column;justify-content:center;align-items:center;gap:2px;width:64px;height:64px;transition:all .3s;display:flex;position:relative;box-shadow:0 4px 20px #6c5ce780}.dice-current.rolling{animation:.4s diceRoll}@keyframes diceRoll{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(-20deg)scale(1.2)}50%{transform:rotate(20deg)scale(1.1)}75%{transform:rotate(-10deg)scale(1.15)}}.dice-face{font-size:26px;font-weight:800;line-height:1}.dice-type-label{color:#ffffffb3;font-size:9px;font-family:var(--font-ui);letter-spacing:1px}.dice-result{color:var(--warning);text-align:center;text-shadow:0 0 20px #fdcb6ecc;min-width:40px;font-size:32px;font-weight:900}.btn-roll{background:linear-gradient(135deg, var(--primary), var(--accent));border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition);border:none;flex-direction:column;justify-content:center;align-items:center;min-width:120px;padding:12px 24px;display:flex;box-shadow:0 4px 24px #6c5ce780}.btn-roll:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px #6c5ce7b3}.btn-roll:active:not(:disabled){transform:scale(.96)}.btn-roll:disabled{opacity:.4;cursor:not-allowed}.roll-text{font-family:var(--font-main);color:#fff;font-size:18px;font-weight:800}.roll-sub{color:#ffffffb3;font-size:10px;font-family:var(--font-ui);margin-top:2px}.action-buttons{flex-direction:column;gap:6px;display:flex}.btn-action{background:var(--bg3);border:1px solid var(--tile-border);border-radius:var(--radius-sm);color:var(--text);cursor:pointer;transition:all var(--transition);font-size:12px;font-weight:700;font-family:var(--font-ui);white-space:nowrap;justify-content:center;align-items:center;padding:6px 12px;display:flex}.btn-action:hover:not(:disabled){border-color:var(--primary);background:#6c5ce733}.btn-action:disabled{opacity:.3;cursor:not-allowed}.toast{background:var(--bg3);border-left:3px solid var(--accent);border-radius:var(--radius-sm);white-space:nowrap;opacity:0;pointer-events:none;z-index:100;padding:8px 16px;font-size:13px;font-weight:600;transition:all .3s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)translateY(0)}.toast.show{opacity:1;transform:translate(-50%)translateY(-8px)}.toast.danger{border-color:var(--danger)}.toast.success{border-color:var(--success)}.toast.warning{border-color:var(--warning)}.popup-card{background:var(--bg2);border:1px solid var(--tile-border);border-radius:var(--radius-xl);flex-direction:column;align-items:center;gap:20px;width:90%;max-width:360px;padding:36px 28px;animation:.3s cubic-bezier(.34,1.56,.64,1) popIn;display:flex;box-shadow:0 24px 80px #0009}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}.popup-card h2{font-size:24px;font-weight:800}.popup-buttons{flex-direction:column;gap:10px;width:100%;display:flex}.popup-stats{background:var(--bg3);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:12px;width:100%;padding:16px;display:grid}.stat-item{text-align:center}.stat-item-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;font-size:11px;font-family:var(--font-ui)}.stat-item-value{color:var(--warning);font-size:22px;font-weight:800}.win-card{border-color:var(--success)}.win-celebration{font-size:64px;animation:.5s infinite alternate celebrate}@keyframes celebrate{0%{transform:scale(1)rotate(-5deg)}to{transform:scale(1.1)rotate(5deg)}}.win-title{color:var(--success)}.star-rating{gap:8px;font-size:36px;display:flex}.lose-card{border-color:var(--danger)}.lose-icon{font-size:64px;animation:.5s shake}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-8px)}40%,80%{transform:translate(8px)}}.lose-title{color:var(--danger)}.lose-reason{border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);text-align:center;background:#ff76751a;width:100%;padding:10px 16px;font-size:13px}.result-stats{background:var(--bg3);border-radius:var(--radius-md);grid-template-columns:1fr 1fr;gap:12px;width:100%;padding:16px;display:grid}#leaderboard-screen{overflow-y:auto}.lb-tabs{border-bottom:1px solid var(--tile-border);flex-shrink:0;gap:0;display:flex}.lb-tab{color:var(--text-muted);font-family:var(--font-main);cursor:pointer;transition:all var(--transition);background:0 0;border:none;border-bottom:2px solid #0000;flex:1;padding:12px;font-size:13px;font-weight:600}.lb-tab.active{color:var(--accent);border-bottom-color:var(--accent)}.lb-list{flex-direction:column;flex:1;gap:8px;padding:12px 16px;display:flex}.lb-item{background:var(--bg3);border-radius:var(--radius-sm);align-items:center;gap:12px;padding:12px 14px;display:flex}.lb-item.me{border:1.5px solid var(--primary);background:#6c5ce71a}.lb-rank{text-align:center;width:28px;font-size:16px;font-weight:800}.lb-rank.gold{color:var(--warning)}.lb-rank.silver{color:#b2bec3}.lb-rank.bronze{color:#d4845a}.lb-avatar{font-size:28px}.lb-name{flex:1;font-size:14px;font-weight:600}.lb-score{color:var(--warning);font-size:16px;font-weight:800}.lb-my-rank{border-top:1px solid var(--tile-border);text-align:center;color:var(--text-muted);flex-shrink:0;padding:16px;font-size:13px}#howtoplay-screen{overflow-y:auto}.htp-content{flex-direction:column;flex:1;gap:24px;padding:20px;display:flex}.htp-section h3{color:var(--primary-light);margin-bottom:8px;font-size:16px;font-weight:700}.htp-section p{color:var(--text-muted);margin-bottom:6px;font-size:13px;line-height:1.6}.tile-legend{flex-direction:column;gap:8px;display:flex}.legend-item{color:var(--text-muted);align-items:center;gap:10px;font-size:13px;display:flex}.tile-dot{font-size:18px}.tile-dot.normal{color:#4a5568}.tile-dot.trap{color:var(--danger)}.tile-dot.treasure{color:var(--accent)}.tile-dot.key{color:var(--warning)}.tile-dot.door{color:#a29bfe}.tile-dot.teleport{color:#fd79a8}.tile-dot.boost{color:var(--success)}.tile-dot.exit{color:#00b894}kbd{background:var(--bg3);border:1px solid var(--tile-border);color:var(--text);border-radius:4px;padding:2px 6px;font-family:monospace;font-size:12px}#howtoplay-screen .btn-full{width:calc(100% - 40px);margin:0 20px 20px}@media (width>=768px){.splash-content{gap:48px}.logo-title{font-size:48px}.logo-dice{font-size:96px}.mode-grid{flex-flow:wrap}.mode-card{flex:1;min-width:200px}.bottom-hud{padding:16px 24px}}@media (width>=1024px){#game-screen{grid-template-rows:56px 1fr;grid-template-columns:1fr 280px;display:grid}.top-bar{grid-area:1/1/2/-1;width:100%}.timer-bar-container{grid-area:2/1/3/-1;width:100%}.canvas-container{grid-area:2/1/-1/2;width:100%;height:100%}.bottom-hud{border-top:none;border-left:1px solid var(--tile-border);flex-direction:column;grid-area:2/2/-1/3;width:100%;height:100%}}