:root{--bg: #141830;--panel: #1c2142;--panel-2: #252b55;--line: #333b6e;--fg: #eef0ff;--muted: #a3aad0;--accent: #ffd23f;--accent-shadow: #b8901a;--accent-ink: #2a2100;--danger: #ff6b6b;--font-display: "Silkscreen", ui-monospace, "Courier New", monospace;--font-body: "Lexend", system-ui, "Segoe UI", sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background-color:var(--bg);background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:26px 26px;color:var(--fg);font:15px/1.5 var(--font-body)}h1,h2,h3{margin:0;text-wrap:balance}.muted{color:var(--muted)}.small{font-size:13px}.error{color:var(--danger);margin:0}.center-note{text-align:center;margin-top:30vh}.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.btn{font:500 14px/1 var(--font-body);color:var(--fg);background:var(--panel-2);border:0;border-radius:6px;padding:10px 14px;box-shadow:0 3px #0d1024;cursor:pointer;transition:transform 60ms,box-shadow 60ms,background .12s;white-space:nowrap}.btn:hover:not(:disabled){background:#2f3666}.btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #0d1024}.btn:disabled{opacity:.45;cursor:default}.btn:focus-visible,.tool:focus-visible,.room-thumb:focus-visible,.level-thumb:focus-visible,.touch-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 3px 0 var(--accent-shadow);font-weight:700}.btn-primary:hover:not(:disabled){background:#ffe066}.btn-primary:active:not(:disabled){box-shadow:0 1px 0 var(--accent-shadow)}.btn-danger{background:var(--danger);color:#2a0606;box-shadow:0 3px #a33a3a}.btn-quiet{background:transparent;box-shadow:none;color:var(--muted)}.btn-quiet:hover:not(:disabled){background:var(--panel-2);color:var(--fg)}.btn-small{padding:7px 10px;font-size:13px}.btn-big{padding:14px 20px;font-size:16px}.app-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;font:700 20px/1 var(--font-display);letter-spacing:.02em}.logo-blocks{display:grid;grid-template-columns:10px 10px;gap:2px}.logo-blocks i{width:10px;height:10px;border-radius:2px}.logo-blocks i:nth-child(1){background:#3fbf5a}.logo-blocks i:nth-child(2){background:#f5c518}.logo-blocks i:nth-child(3){background:#9b4de0}.logo-blocks i:nth-child(4){background:#3a8ef0}.user{display:flex;align-items:center;gap:8px;color:var(--muted)}.page-title{font:700 26px/1.2 var(--font-display);letter-spacing:.01em}.list-page{max-width:1100px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));display:grid;gap:24px}.list-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}.list-head p{margin:6px 0 0}.empty{display:grid;justify-items:start;gap:12px;padding:24px;border:2px dashed var(--line);border-radius:10px}.empty p{margin:0}.level-grid{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.level-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto}.level-thumb{all:unset;cursor:pointer;display:block;background:#bfe5ff;aspect-ratio:3 / 1;overflow:hidden}.level-thumb canvas{width:100%;height:100%;object-fit:contain;image-rendering:pixelated;display:block}.level-info{padding:12px 14px 4px;display:grid;gap:2px;min-width:0}.level-name{font-size:16px;font-weight:700;overflow-wrap:anywhere}.level-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 14px 14px}.editor{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--panel)}.name-input{flex:1 1 200px;min-width:0;font:700 18px/1.2 var(--font-display);color:var(--fg);background:transparent;border:2px solid transparent;border-radius:6px;padding:6px 8px}.name-input:hover{border-color:var(--line)}.name-input:focus{outline:none;border-color:var(--accent)}.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.save-msg{color:var(--muted);font-size:13px}.editor-body{flex:1;display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:20px;padding:20px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px));align-items:start}.panel-title{font:700 12px/1 var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:6px 0 10px}.palette{display:grid;gap:6px}.palette .panel-title:not(:first-child){margin-top:16px}.tool{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;text-align:left;background:var(--panel);color:var(--fg);border:2px solid transparent;border-radius:8px;padding:7px 8px;cursor:pointer;font:inherit}.tool:hover{background:var(--panel-2)}.tool-active{border-color:var(--accent);background:var(--panel-2)}.tool-text{display:grid;min-width:0}.tool-name{font-weight:700;font-size:14px}.tool-desc{font-size:12px;color:var(--muted);line-height:1.3}.tool kbd{font:12px/1 var(--font-display);color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:3px 5px}.swatch{width:34px;height:34px;border-radius:4px;background:var(--c);box-shadow:inset 4px 4px 0 var(--l),inset -4px -4px 0 var(--d)}.swatch-erase{background:repeating-linear-gradient(45deg,#3a4170 0,#3a4170 6px,#2a305a 6px,#2a305a 12px);box-shadow:none}.swatch-start{background:#2b2d42;box-shadow:inset 0 9px #2b2d42,inset 0 19px #8ef6ff;border:3px solid #151726}.canvas-wrap{display:grid;justify-items:center;gap:12px;min-width:0}.room-label{justify-self:start;font-weight:700}.room-canvas{width:100%;max-width:min(624px,calc(100vh - 220px));min-width:260px;aspect-ratio:1;border-radius:8px;box-shadow:0 0 0 3px var(--line),0 10px 30px #0006;cursor:crosshair;touch-action:none;image-rendering:pixelated}.side{display:grid;gap:24px}.room-map{display:grid;gap:4px}.room-thumb{padding:0;border:2px solid transparent;border-radius:4px;background:none;cursor:pointer;line-height:0}.room-thumb canvas{width:100%;height:auto;image-rendering:pixelated;border-radius:2px}.room-thumb:hover{border-color:var(--line)}.room-thumb-active{border-color:var(--accent)}.resize-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.field-label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}.story-input,.text-input{width:100%;font:14px/1.4 var(--font-body);color:var(--fg);background:var(--panel);border:2px solid var(--line);border-radius:6px;padding:8px 10px;resize:vertical}.story-input:focus,.text-input:focus{outline:none;border-color:var(--accent)}.tabs{display:flex;gap:4px;overflow-x:auto;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--panel)}.tab{font:700 13px/1 var(--font-display);letter-spacing:.04em;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px 10px;cursor:pointer;white-space:nowrap}.tab:hover{color:var(--fg)}.tab-active{color:var(--fg);border-bottom-color:var(--accent)}.tab:focus-visible,.seg-btn:focus-visible,.color-btn:focus-visible,.frame-btn:focus-visible,.theme-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.tool canvas{width:34px;height:34px;border-radius:4px;image-rendering:pixelated}.block-preview{border-radius:6px;image-rendering:pixelated;box-shadow:0 0 0 2px var(--line);max-width:100%}.seg{display:flex;flex-wrap:wrap;gap:4px;background:var(--panel);border-radius:8px;padding:4px}.seg-btn{flex:1 0 auto;font:500 13px/1 var(--font-body);color:var(--muted);background:none;border:0;border-radius:6px;padding:9px 12px;cursor:pointer}.seg-btn:hover{color:var(--fg);background:var(--panel-2)}.seg-active{color:var(--accent-ink);background:var(--accent);font-weight:700}.seg-active:hover{color:var(--accent-ink);background:var(--accent)}.pixel-editor{display:grid;grid-template-columns:minmax(0,416px) minmax(180px,220px);gap:16px;align-items:start;justify-content:center;width:100%}.pixel-canvas{width:100%;aspect-ratio:1;border-radius:8px;box-shadow:0 0 0 3px var(--line),0 10px 30px #0006;cursor:crosshair;touch-action:none;image-rendering:pixelated}.pixel-tools{display:grid;gap:12px}.pixel-tools .seg-btn{flex-basis:40%}.color-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}.color-btn{aspect-ratio:1;border:1px solid rgba(0,0,0,.35);border-radius:3px;cursor:pointer;padding:0}.shift-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.shift-grid .btn{padding:7px 0}.color-active{outline:3px solid var(--fg);outline-offset:1px;position:relative;z-index:1}.art-empty{max-width:460px}.frames{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.frame-btn{padding:2px;line-height:0;background:var(--panel);border:2px solid var(--line);border-radius:6px;cursor:pointer}.frame-btn canvas{width:52px;height:52px;image-rendering:pixelated;background:repeating-conic-gradient(#d9dcec 0,#d9dcec 25%,#eef0fa 0,#eef0fa 50%) 0 0 / 8px 8px;border-radius:3px}.frame-active{border-color:var(--accent)}.cfg{display:grid;gap:12px}.cfg-title{margin:0;font-weight:700}.cfg-row{display:grid;gap:2px}.cfg .seg-btn{padding:7px 8px;flex-basis:auto}.check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}.check input{width:18px;height:18px;accent-color:var(--accent)}.swatch-config{background:var(--panel-2);box-shadow:inset 0 0 0 3px var(--accent);border-radius:50%}.key-chip{font:700 12px/1 var(--font-body);color:#1a1c2c;padding:4px 6px;border-radius:4px}.key-A{background:#e8433f}.key-B{background:#3a8ef0}.key-C{background:#3fbf5a}.key-D{background:#f5c518}.bg-page{display:grid;gap:14px;padding:20px max(16px,env(safe-area-inset-right,0px)) 32px max(16px,env(safe-area-inset-left,0px))}.bg-page .pixel-editor{grid-template-columns:minmax(0,720px) minmax(180px,220px);justify-content:start}.bg-fill{width:auto}.music-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}.music-item{display:flex;align-items:center;justify-content:space-between;gap:4px;background:var(--panel);border:2px solid transparent;border-radius:8px;padding:4px 4px 4px 0}.music-active{border-color:var(--accent)}.music-pick{flex:1;text-align:left;background:none;border:0;color:var(--fg);font:500 14px/1.2 var(--font-body);padding:8px 10px;cursor:pointer}.music-pick:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}.settings-page{width:100%;max-width:720px;margin:0 auto;display:grid;gap:20px;padding:24px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px))}.choice{border:0;margin:0;padding:0;min-width:0}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.theme-btn{height:72px;border:3px solid transparent;border-radius:8px;cursor:pointer;display:flex;align-items:end;padding:6px 8px;font:700 13px/1 var(--font-body)}.theme-btn span{background:#0a0c1cbf;color:#fff;padding:4px 6px;border-radius:4px}.theme-active{border-color:var(--accent)}@media (max-width: 980px){.editor-body{grid-template-columns:1fr}.palette{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));order:2}.palette .panel-title{grid-column:1 / -1}.tool{grid-template-columns:28px 1fr}.tool .swatch{width:28px;height:28px}.tool kbd,.tool-desc{display:none}.canvas-wrap{order:1}.room-canvas{max-width:100%;min-width:0}.side{order:3}.pixel-editor,.bg-page .pixel-editor{grid-template-columns:minmax(0,1fr)}}.game-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:#0a0c1cf0;display:flex;flex-direction:column;align-items:center;gap:12px;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));overflow-y:auto}.game-top{width:100%;max-width:760px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.game-title{font:700 16px/1.2 var(--font-display);min-width:0;overflow-wrap:anywhere}.hud{display:flex;align-items:center;gap:14px;font:700 16px/1 var(--font-display);font-variant-numeric:tabular-nums}.hud-item{display:flex;align-items:center;gap:4px}.hud-chip{font:700 11px/1 var(--font-body);background:#f27ab8;color:#3b0a24;padding:5px 8px;border-radius:99px}.heart{width:16px;height:14px;background:#e8433f;clip-path:polygon(50% 100%,0 40%,0 15%,15% 0,35% 0,50% 18%,65% 0,85% 0,100% 15%,100% 40%)}.heart-empty{background:#3a4170}.ammo-dot{width:14px;height:6px;border-radius:3px;background:#ffe14d;box-shadow:0 0 0 2px #b8901a}.coin-dot{width:14px;height:14px;border-radius:50%;background:#f5c518;box-shadow:inset 0 0 0 3px #b8860b}.game-actions{display:flex;gap:8px}.game-stage{position:relative;width:min(100%,624px,calc(100vh - 170px));aspect-ratio:1;flex-shrink:0}.game-canvas{width:100%;height:100%;border-radius:8px;image-rendering:pixelated;display:block;box-shadow:0 0 0 3px var(--line)}.game-toast{position:absolute;top:12px;left:50%;transform:translate(-50%);background:#f27ab8;color:#3b0a24;font-weight:700;padding:8px 14px;border-radius:6px;max-width:90%;text-align:center}.story-bubble{position:absolute;left:12px;right:12px;bottom:12px;background:#fff8ec;color:#3a2408;border:3px solid #f28c28;border-radius:8px;padding:10px 14px;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}.game-end{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:10px;background:#0a0c1cb8;border-radius:8px;text-align:center;padding:16px}.game-end h2{font:700 26px/1.2 var(--font-display)}.game-end p{margin:0 0 6px}.game-help{margin:0;color:var(--muted);font-size:13px;text-align:center}.touch-pad{display:none;width:100%;max-width:624px;justify-content:space-between;align-items:center}.touch-btn{width:72px;height:72px;border-radius:12px;border:0;background:var(--panel-2);color:var(--fg);font:700 22px/1 var(--font-display);box-shadow:0 4px #0d1024;touch-action:none;-webkit-user-select:none;user-select:none}.touch-btn:active{transform:translateY(2px);box-shadow:0 2px #0d1024}.touch-jump{width:96px;font-size:16px;background:var(--accent);color:var(--accent-ink);box-shadow:0 4px 0 var(--accent-shadow)}@media (pointer: coarse){.touch-pad{display:flex}.game-help{display:none}}.login-page{display:grid;place-items:center;padding:48px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px))}.login-card{width:100%;max-width:380px;display:grid;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}.login-card .page-title{margin-bottom:8px}.login-card .btn-big{margin-top:8px}@media (prefers-reduced-motion: reduce){.btn,.touch-btn{transition:none}}a.logo{color:var(--fg);text-decoration:none}.main-nav{display:flex;gap:4px;margin-right:auto;margin-left:12px}.nav-link{font:700 13px/1 var(--font-display);letter-spacing:.04em;color:var(--muted);text-decoration:none;padding:10px 12px;border-radius:6px}.nav-link:hover{color:var(--fg);background:var(--panel-2)}.nav-active,.nav-active:hover{color:var(--accent-ink);background:var(--accent)}.nav-link:focus-visible,a.btn:focus-visible,a.logo:focus-visible{outline:3px solid var(--accent);outline-offset:2px}a.btn{display:inline-block;text-decoration:none}.user-name{font-weight:700;color:var(--fg)}.page-error{padding:12px 16px 0}.login-note{margin:0 0 6px}.badge{justify-self:start;font:700 11px/1 var(--font-body);background:var(--accent);color:var(--accent-ink);padding:4px 7px;border-radius:99px;margin-top:4px}.publish{font-size:13px;color:var(--muted)}.home{max-width:1100px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right,0px)) 48px max(16px,env(safe-area-inset-left,0px));display:grid;gap:24px}.home-hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#23295a,#1a1f45);border:1px solid var(--line);border-radius:14px;padding:40px 28px;display:grid;gap:14px;justify-items:start}.home-title{font:700 clamp(26px,5vw,42px)/1.1 var(--font-display);letter-spacing:.01em;max-width:14ch}.home-lead{margin:0;color:var(--muted);max-width:52ch;font-size:16px}.home-actions{margin-top:6px}.home-actions .btn{min-width:140px;text-align:center;font-family:var(--font-display);letter-spacing:.04em}.hero-blocks{position:absolute;right:28px;top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(4,34px);gap:6px;opacity:.9}.hero-blocks i{width:34px;height:34px;border-radius:5px;background:var(--c);box-shadow:inset 4px 4px #ffffff59,inset -4px -4px #00000040;animation:hop 2.4s var(--d) ease-in-out infinite}@keyframes hop{0%,80%,to{transform:translateY(0)}90%{transform:translateY(-8px)}}@media (max-width: 760px){.hero-blocks{display:none}}@media (prefers-reduced-motion: reduce){.hero-blocks i{animation:none}}.home-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.home-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:12px;align-content:start}.home-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.home-card-head a{color:var(--muted)}.home-card-title{font:700 15px/1.2 var(--font-display);letter-spacing:.03em}.home-login{border-color:var(--accent)}.home-login p{margin:0}.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.strip-item{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;width:100%;padding:6px;border-radius:8px;color:var(--fg)}.strip-item:hover{background:var(--panel-2)}.strip-item:focus-visible{outline:3px solid var(--accent)}.strip-thumb{display:block;aspect-ratio:2 / 1;background:#bfe5ff;border-radius:6px;overflow:hidden}.strip-thumb canvas{width:100%;height:100%;object-fit:cover;object-position:left bottom;image-rendering:pixelated;display:block}.strip-name{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.strip-plus{display:grid;place-items:center;background:var(--panel-2);font:700 32px/1 var(--font-display);color:var(--accent)}.tips{margin:0;padding-left:20px;display:grid;gap:8px}.home-tips p{margin:0}.arcade-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.arcade-search{max-width:320px;flex:1 1 200px}.room-ghost{aspect-ratio:1;border:2px dashed var(--line);border-radius:4px;background:none;color:var(--muted);font:700 14px/1 var(--font-display);cursor:pointer;padding:0;min-width:0}.room-ghost:hover{border-color:var(--accent);color:var(--accent)}.room-ghost:focus-visible{outline:3px solid var(--accent);outline-offset:1px}.room-canvas-wrap{position:relative;width:100%;display:grid;justify-items:center}.room-missing{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center}.room-missing p{margin:0;font-weight:700}.decor-thumb{border-radius:4px;background:repeating-conic-gradient(#d9dcec 0,#d9dcec 25%,#eef0fa 0,#eef0fa 50%) 0 0 / 8px 8px}.library{display:grid;gap:8px}.library-list{list-style:none;margin:0;padding:0;display:grid;gap:6px;max-height:320px;overflow-y:auto}.library-item{display:grid;grid-template-columns:40px 1fr auto auto;gap:8px;align-items:center;background:var(--panel);border-radius:6px;padding:4px}.library-item canvas{image-rendering:pixelated;border-radius:4px;background:repeating-conic-gradient(#d9dcec 0,#d9dcec 25%,#eef0fa 0,#eef0fa 50%) 0 0 / 8px 8px}.library-name{font-size:13px;font-weight:700;min-width:0;overflow-wrap:anywhere}@media (max-width: 640px){.app-header{flex-wrap:wrap}.main-nav{order:3;width:100%;margin:0}}