:root{--ui-bg: rgba(24, 26, 34, .7);--ui-border: rgba(255, 255, 255, .2);--ui-accent: #ffb347;--ui-accent-2: #7ddcff;--ui-text: #f6f2e7;--ui-shadow: rgba(0, 0, 0, .4);--topbar-height: 48px;--font-body: "Rubik", sans-serif;--font-display: "Schoolbell", "Rubik", sans-serif;--brand-blue: #71d5f6;--brand-blue-deep: #30a9dd;--brand-cream: #fff7e6;--brand-orange: #ff9c2a;--brand-green: #66d46c;--brand-yellow: #ffd652;--brand-shadow: rgba(21, 77, 107, .28)}*{box-sizing:border-box}body{margin:0;overflow:hidden;font-family:var(--font-body);color:#1a2230;background:#ddf7f9}.game-card h2{font-family:var(--font-display);font-weight:400}#game-shell{position:fixed;top:0;right:0;bottom:0;left:0;display:none;flex-direction:column}#topbar-root{flex:0 0 var(--topbar-height)}#game-area{position:relative;flex:1 1 auto;min-height:0}#app{position:absolute;top:0;right:0;bottom:0;left:0}#platform-root{position:fixed;top:0;right:0;bottom:0;left:0;display:none;overflow:auto;padding:20px 24px 32px;z-index:2}canvas{display:block}#ui-root{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:auto;z-index:3}.ui-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:5}.panel{min-width:320px;padding:28px 32px;background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:18px;box-shadow:0 24px 48px var(--ui-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto}.title{font-size:40px;letter-spacing:1px;margin:0 0 18px;text-align:center;color:#fff3d6;text-shadow:0 3px 8px rgba(0,0,0,.4)}.subtitle{text-align:center;margin-bottom:18px;color:#f1e4c7}.menu-buttons{display:grid;gap:12px}button.ui-button{pointer-events:auto;cursor:pointer;border:none;border-radius:12px;padding:12px 16px;font-size:18px;font-weight:600;color:#2b1f0d;background:linear-gradient(135deg,var(--ui-accent),#ffdf9a);box-shadow:0 10px 20px #00000040;transition:transform .12s ease,box-shadow .12s ease}button.ui-button:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 14px 24px #0000004d}button.ui-button.secondary{background:linear-gradient(135deg,var(--ui-accent-2),#bdeaff)}.hud{position:absolute;top:20px;left:20px;display:flex;gap:16px;align-items:center;padding:12px 16px;background:#14141c8c;border-radius:12px;border:1px solid rgba(255,255,255,.2);pointer-events:none}.boss-hud{position:absolute;top:20px;right:20px;display:flex;align-items:center;padding:10px 14px;background:#14141c8c;border-radius:12px;border:1px solid rgba(255,255,255,.2);pointer-events:none;font-size:14px;color:#f6f2e7}.hud .hearts{display:flex;gap:6px;font-size:20px}.hud .objective{font-size:14px;color:#e9dcc2}.snake-hud{position:absolute;top:18px;left:18px;display:grid;gap:8px;padding:12px 16px;background:#10121899;border-radius:14px;border:1px solid rgba(255,255,255,.2);color:#f6f2e7;font-size:16px;letter-spacing:.3px;pointer-events:none;min-width:180px}.snake-hud-length{font-weight:600}.snake-hud-bar{position:relative;height:8px;width:180px;border-radius:999px;background:#ffffff2e;overflow:hidden}.snake-hud-bar-fill{position:absolute;top:0;right:0;bottom:0;left:0;width:0%;background:linear-gradient(120deg,#7bf1a8,#ffd37a);transition:width .2s ease}.snake-overlay .panel{max-width:360px}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0c128c;pointer-events:auto;z-index:6}.controls-list{margin:10px 0 0;padding:0;list-style:none;font-size:16px;line-height:1.6}.credits{font-size:15px;line-height:1.6;color:#e6dbc0}.notice{font-size:14px;text-align:center;color:#d4c9af;margin-top:8px}.game-topbar{position:absolute;top:0;left:0;right:0;height:var(--topbar-height);display:flex;align-items:center;padding:0 16px;background:#101218bf;border-bottom:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:auto;z-index:20}.game-topbar-button{cursor:pointer;border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:6px 12px;font-size:14px;font-weight:600;color:#f6f2e7;background:#ffffff14}.platform-overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:#0c0e1499;color:#f6f2e7;z-index:30}.platform-overlay.active{display:flex}.platform-panel{min-width:280px;max-width:520px;padding:22px 26px;border-radius:16px;background:#181a22eb;border:1px solid rgba(255,255,255,.2);box-shadow:0 18px 40px #00000059;text-align:center}.platform-panel h2{margin:0 0 10px;font-size:20px}.platform-panel p{margin:0 0 16px;color:#e6dbc0}.platform-panel .ui-button{margin:0 auto}.home{max-width:900px;margin:0 auto;display:grid;gap:18px;justify-items:center}.home-logo{display:block;width:250px;max-width:100%;margin:0 auto 6px;filter:drop-shadow(0 12px 20px rgba(22,103,145,.25))}.home h1{margin:0 0 8px;font-size:36px;color:#1a1610}.home-subtitle{margin:0 0 10px;color:#245063;font-weight:500;text-align:center}.game-list{display:grid;gap:18px;width:min(720px,100%)}.game-card{padding:18px 18px 16px;border-radius:18px;border:none;background:linear-gradient(140deg,#fffffff5,#fffc),radial-gradient(circle at 10% 15%,#ffd65240,#ffd65200 55%);color:#1a2230;box-shadow:0 16px 30px #22809c59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;grid-template-columns:1fr auto;column-gap:16px;row-gap:6px;align-items:center}.game-card h2{margin:0 0 8px;font-size:22px;color:#215c76;grid-column:1}.game-card p{margin:0 0 12px;color:#34586b;grid-column:1}.play-button{cursor:pointer;border:none;border-radius:999px;padding:0;background:transparent;box-shadow:0 10px 18px #3fa6cc59;transition:transform .12s ease,box-shadow .12s ease;justify-self:end;grid-column:2;grid-row:1 / span 2}.play-button:hover{transform:translateY(-1px);box-shadow:0 14px 22px #3fa6cc73}.play-button-img{display:block;height:46px;width:auto}.snake-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:#1a2230;text-align:center;padding:24px}.snake-placeholder h1{margin:0;font-size:32px}.snake-placeholder p{margin:0 0 8px;color:#34586b}.touch-controls{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:12}.touch-dpad{position:absolute;left:18px;bottom:20px;display:grid;grid-template-columns:repeat(3,54px);grid-template-rows:repeat(3,54px);gap:8px}.touch-actions{position:absolute;right:18px;bottom:28px;display:flex;gap:12px}.touch-btn{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border:1px solid rgba(255,255,255,.25);border-radius:14px;background:#141822b3;color:#f6f2e7;font-size:14px;font-weight:700;letter-spacing:.6px;width:54px;height:54px;box-shadow:0 10px 18px #0a0c1259;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .1s ease,background .1s ease,box-shadow .1s ease}.touch-btn.is-active{transform:translateY(2px);background:#2e5a6ecc;box-shadow:0 6px 14px #0a0c1259}.touch-btn--up{grid-column:2;grid-row:1}.touch-btn--left{grid-column:1;grid-row:2}.touch-btn--right{grid-column:3;grid-row:2}.touch-btn--down{grid-column:2;grid-row:3}.touch-btn--jump{width:86px;height:86px;border-radius:20px;font-size:16px;background:#ffad4ad9;color:#2b1f0d;box-shadow:0 14px 22px #140c0459}.touch-btn--jump.is-active{background:#ffc170e6}@media (max-width: 420px){.touch-dpad{left:12px;bottom:16px;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:6px}.touch-btn{width:46px;height:46px;font-size:12px}.touch-actions{right:12px;bottom:20px}.touch-btn--jump{width:74px;height:74px;font-size:14px}}