:root{--ema-primary: #0b6fa4;--ema-secondary: #1f9cbf;--ema-accent: #47c9b6;--bg-0: #e8f5fb;--bg-1: #cde8f3;--text-0: #0d2a36;--text-1: #3d5d69;--danger: #d64545;--success: #2f9f6b;--shadow: rgba(13, 42, 54, .22);--radius: 14px;--ui-border: #78b9cf;--ui-surface: rgba(255, 255, 255, .9);--ui-surface-strong: rgba(255, 255, 255, .96);--btn-bg: #f8fdff;--btn-bg-strong: #0b6fa4;--btn-text-strong: #ffffff;--tile-floor: #dff4fb;--tile-wall: #2b5f78;--tile-water: #8ed0ea;--tile-hazard: #99b56f;--tile-exit: #4cc58f;--tile-gate-closed: #1b3b4d;--tile-gate-open: #8fd9eb;--player-main: #1f9cbf;--player-accent: #f4fafe;--entity-key: #b8d3dd;--entity-leak: #2f7da6;--entity-valve: #be5445}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:Trebuchet MS,Segoe UI,sans-serif;color:var(--text-0);background:var(--bg-0)}button,input{font:inherit}button:focus-visible{outline:3px solid var(--ema-accent);outline-offset:2px}.app{min-height:100%;position:relative;overflow:hidden}.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle at 18% 20%,rgba(71,201,182,.3),transparent 42%),radial-gradient(circle at 84% 80%,rgba(11,111,164,.28),transparent 44%),linear-gradient(160deg,var(--bg-0),var(--bg-1));z-index:-1}.layout{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:1rem}.card{background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:var(--radius);box-shadow:0 20px 45px -18px var(--shadow)}.btn{border:1px solid var(--ui-border);border-radius:10px;background:var(--btn-bg);color:var(--text-0);min-height:44px;min-width:120px;padding:.6rem 1rem;cursor:pointer;transition:transform .1s ease,background .18s ease}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--btn-bg-strong);color:var(--btn-text-strong);border-color:var(--ema-primary)}.btn[disabled]{opacity:.45;cursor:not-allowed}.icon-btn{display:inline-flex;align-items:center;gap:.45rem}.icon{width:1rem;height:1rem;fill:currentColor}.small{font-size:.9rem;color:var(--text-1)}.game-card{width:min(96vw,920px);padding:.7rem;position:relative;display:flex;flex-direction:column;gap:.55rem}#game-canvas{display:block;margin:0 auto;background:#000;image-rendering:pixelated;image-rendering:crisp-edges;border-radius:12px;border:1px solid var(--ui-border);touch-action:none}.game-dimmer{position:absolute;top:.7rem;right:.7rem;bottom:.7rem;left:.7rem;border-radius:12px;background:#040e16d1;z-index:5;pointer-events:none}.hud{position:absolute;left:1rem;right:1rem;top:.9rem;display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:.7rem;pointer-events:none;z-index:6}.hud-left,.hud-right{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}.hud-left{min-width:min(240px,100%)}.hud-right{justify-content:flex-end;flex:1}.hud-chip{background:var(--ui-surface-strong);border:1px solid var(--ui-border);border-radius:999px;padding:.26rem .56rem;display:inline-flex;align-items:center;gap:.26rem;font-size:.86rem}.hud-hint{background:#fffffff2;border-radius:999px;padding:.24rem .56rem;font-size:.8rem;color:var(--text-1)}.mini-btn{min-width:84px;min-height:34px;padding:.35rem .6rem;font-size:.8rem}.play-actions{position:relative;z-index:7;display:flex;justify-content:center;gap:.45rem;pointer-events:auto;margin-top:.15rem}.stars{display:flex;align-items:center;justify-content:center;gap:.42rem;margin-top:.2rem}.star{font-size:1.9rem;line-height:1;color:#c1ced6;transform-origin:center;transition:color .18s ease,transform .18s ease}.star.earned{color:#2a97d8;text-shadow:0 0 10px rgba(42,151,216,.48);animation:starFloat 1.7s ease-in-out infinite}.star.empty{color:#9db0bc;text-shadow:none}@supports (-webkit-text-stroke: 1px #9db0bc){.star.empty{color:transparent;-webkit-text-stroke:1.8px #9db0bc}}.hidden{display:none!important}.screens{position:absolute;top:.7rem;right:.7rem;bottom:.7rem;left:.7rem;display:grid;place-items:center;pointer-events:none;z-index:8}.screen{display:none;width:min(92%,520px);text-align:center;padding:1rem 1.1rem;border-radius:var(--radius);border:1px solid var(--ui-border);background:#f1fcfff7;box-shadow:0 12px 32px -16px var(--shadow);pointer-events:auto;animation:reveal .2s ease}.screen.active{display:block}.subtitle{margin-top:-.35rem;color:var(--text-1)}.menu-buttons,.options-row{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-block:.7rem}.levels-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem;margin-bottom:.85rem}.level-btn{min-width:auto;width:100%;padding:.5rem}.level-btn.locked{background:#d7e8ef}.progress-wrap{width:min(100%,350px);height:14px;margin:.9rem auto;border-radius:999px;overflow:hidden;border:1px solid var(--ui-border);background:#f1fbff}.progress-bar{width:0;height:100%;background:linear-gradient(90deg,var(--ema-secondary),var(--ema-accent));transition:width .12s linear}.touch-controls{position:relative;width:min(100%,760px);margin:0 auto;z-index:7;display:none;grid-template-columns:auto auto;justify-content:space-between;align-items:end;gap:.9rem;touch-action:none;pointer-events:auto}.touch-cluster,.touch-actions{pointer-events:auto}.touch-cluster{width:160px;height:160px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:.25rem}.touch-actions{display:flex;align-items:flex-end}.touch-btn{border:1px solid var(--ui-border);border-radius:12px;background:#fcffffe0;min-width:52px;min-height:52px;font-weight:700;color:var(--text-0);touch-action:none}.touch-btn.active{background:#47c9b659}@media(hover:none),(pointer:coarse){.touch-controls.enabled{display:grid}.touch-actions .touch-btn{min-width:84px;min-height:84px;border-radius:18px;font-size:1rem}.layout{align-items:flex-start;padding-top:max(.55rem,env(safe-area-inset-top));padding-bottom:calc(.55rem + env(safe-area-inset-bottom))}}@media(orientation:landscape)and (max-width:980px)and (hover:none),(orientation:landscape)and (max-width:980px)and (pointer:coarse){.layout{padding:max(.35rem,env(safe-area-inset-top)) max(.35rem,env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.35rem,env(safe-area-inset-left));align-items:flex-start}.game-card{width:min(100vw - .6rem,1200px);padding:.45rem;gap:.35rem;display:grid;grid-template-columns:minmax(156px,26vw) auto minmax(156px,26vw);grid-template-rows:auto 1fr auto;align-items:stretch}#game-canvas{grid-column:2;grid-row:1 / 4;margin:0;justify-self:center;align-self:center}.hud{position:static;left:auto;right:auto;top:auto;width:auto;display:contents;gap:0;z-index:6;pointer-events:none}.hud-left{grid-column:1;grid-row:1;width:100%;min-width:0;margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem}.hud-right{grid-column:3;grid-row:1;width:100%;min-width:0;margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:.35rem}.hud-chip,.hud-hint{width:100%;border-radius:12px;font-size:.76rem;line-height:1.25;padding:.3rem .42rem;text-align:left}.play-actions{grid-column:3;grid-row:2;width:100%;margin-top:0;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.35rem;z-index:7}.play-actions .mini-btn{width:100%;min-width:0;min-height:44px;font-size:.8rem}.touch-controls{grid-column:1 / 4;grid-row:3;width:100%;margin:0;grid-template-columns:minmax(156px,26vw) 1fr minmax(156px,26vw);justify-items:stretch;align-items:end;gap:.4rem}.touch-cluster{grid-column:1;justify-self:start;width:min(45vw,158px);height:min(45vw,158px)}.touch-actions{grid-column:3;width:auto;justify-self:end;justify-content:flex-end;align-items:flex-end}.touch-actions .touch-btn{min-width:min(42vw,126px);min-height:70px;border-radius:16px;font-size:1rem}.touch-cluster .touch-btn{min-width:46px;min-height:46px;font-size:1rem}.screens,.game-dimmer{top:.45rem;right:.45rem;bottom:.45rem;left:.45rem}}@media(max-width:860px)and (orientation:portrait){.game-card{width:100%;padding:.5rem}.screens,.game-dimmer{top:.5rem;right:.5rem;bottom:.5rem;left:.5rem}.hud{left:.6rem;right:.6rem;top:.55rem}.levels-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mini-btn{min-width:72px;min-height:32px;font-size:.75rem}}@keyframes reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes starFloat{0%{transform:translateY(0) scale(1);filter:saturate(1)}50%{transform:translateY(-3px) scale(1.08);filter:saturate(1.2)}to{transform:translateY(0) scale(1);filter:saturate(1)}}
