:root{color-scheme:dark;--bg:#131516;--panel:#1c1f21;--line:#363a3c;--text:#f1eee6;--muted:#adb1ae;--accent:#e4ad64;font-family:system-ui,"Malgun Gothic",sans-serif;font-size:14px;background:var(--bg);color:var(--text)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select,input{touch-action:manipulation}button{border:1px solid #464b4c;border-radius:6px;background:#272b2d;color:var(--text);padding:10px 13px;cursor:pointer;line-height:1.3}button:hover:not(:disabled){background:#363c3e;border-color:#737c7d}button:disabled{opacity:.43;cursor:not-allowed}button.primary{background:var(--accent);color:#261e14;border-color:var(--accent);font-weight:700}button.primary:hover:not(:disabled){background:#f3c78c}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,canvas:focus-visible{outline:2px solid #f6cb90;outline-offset:4px}button[hidden],[hidden]{display:none!important}a{color:inherit;text-decoration:none}.skip{position:fixed;top:-100px;left:16px;z-index:50;padding:10px;background:var(--panel)}.skip:focus{top:12px}.site-header,main,footer{max-width:1240px;margin:auto;padding-left:32px;padding-right:32px}.site-header{display:flex;justify-content:space-between;align-items:center;padding-top:23px;padding-bottom:23px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:750;letter-spacing:-.6px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;font-family:serif;font-size:27px;color:var(--accent);border:1px solid #7e603c;border-radius:10px 2px 10px 2px}.brand small{display:block;font-size:10px;font-weight:500;letter-spacing:1.7px;color:var(--muted);margin-top:4px}.account{display:flex;align-items:center;gap:12px}.account>span{color:var(--muted);max-width:150px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.account button{font-size:12px}.page-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:35px 0 24px}.eyebrow{font-size:10px;color:var(--accent);letter-spacing:2.3px;margin:0 0 8px}h1{font-size:29px;letter-spacing:-1.2px;margin:0;font-weight:650}.page-heading>p{color:var(--muted);font-size:12px;margin:0 0 5px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px;align-items:start}.play-area{min-width:0}.game-frame{position:relative;aspect-ratio:4/3;background:#090b0c;border:1px solid #42433d;border-radius:8px;overflow:hidden;box-shadow:0 12px 50px #0003}.game-frame canvas{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;background:#090b0c}.game-frame:fullscreen{border:0;border-radius:0;display:grid;place-items:center;background:#000;aspect-ratio:auto}.game-frame:fullscreen canvas{max-width:calc(100vh * 4 / 3);max-height:100vh}.game-cover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:17px;background:radial-gradient(ellipse at 50% 30%,#232824,#0b0e10 75%);text-align:center;padding:30px;pointer-events:none}.cover-mark{font-family:serif;font-size:80px;color:#a48452;border:1px solid #74634480;padding:12px 32px;line-height:1.25}.game-cover p{max-width:340px;font-size:13px;color:#c2c4b9;line-height:1.8;margin:8px 0}progress{width:min(240px,75%);height:5px;accent-color:var(--accent)}.game-toolbar{display:flex;gap:9px;align-items:center;margin-top:14px}.game-toolbar .primary{min-width:138px;display:flex;justify-content:space-between;gap:20px}.game-toolbar #fullscreen{margin-left:auto}.keyboard-help{display:flex;flex-wrap:wrap;gap:12px 20px;font-size:11px;color:var(--muted);line-height:2;margin:19px 0}.keyboard-help>span:last-child{width:100%;font-size:11px;color:#7f8987}kbd{font-family:inherit;font-size:10px;background:#242829;border:1px solid #394040;border-bottom-width:2px;border-radius:3px;padding:2px 5px;margin-right:2px}.sidebar{display:flex;flex-direction:column;gap:16px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px}.panel h2{font-size:14px;font-weight:650;margin:0 0 19px;letter-spacing:-.2px}.panel-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.panel-title h2{margin:0}.badge{font-size:10px;border:1px solid #63513c;color:#e3bb85;background:#41362566;border-radius:12px;padding:3px 8px}.panel label:not(.check-label){display:block;font-size:11px;color:#c0c5c2;margin-bottom:8px}select{width:100%;border:1px solid #414749;background:#141819;color:var(--text);border-radius:5px;padding:10px 9px;min-height:38px}.hint{font-size:11px;color:#8e9993;line-height:1.7;margin:8px 0 17px}.slot-info{background:#15191a;border:1px dashed #363e3d;border-radius:5px;padding:13px 10px;min-height:62px;font-size:11px;line-height:1.8;color:#aeb7b1;margin:11px 0}.slot-info strong{display:block;color:#e1d5bc;font-weight:500}.button-row{display:flex;gap:8px}.button-row>button{flex:1;font-size:12px;padding:10px 7px}.file-actions{display:flex;gap:8px;margin-top:10px}.file-actions>button{flex:1;background:transparent;font-size:11px;padding:8px 4px}.text-button{border:0;background:transparent!important;color:#bdb7a8;padding:10px 0 0;font-size:11px;text-align:left;line-height:1.7;display:block}.settings-panel label.volume-label{display:flex;justify-content:space-between;margin-top:20px}.volume-label output{color:var(--accent)}input[type=range]{width:100%;accent-color:var(--accent);margin:2px 0 15px}label.check-label{display:flex;align-items:center;gap:8px;font-size:12px;color:#c1c6c3}input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}.storage-note{margin:0;padding:0 4px;font-size:10px;color:#87918b;line-height:1.85}.notice{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:20;max-width:min(600px,calc(100vw - 32px));width:max-content;background:#2b332f;color:#f2f1e7;border:1px solid #6c7d6b;border-radius:7px;box-shadow:0 5px 30px #0006;padding:13px 20px;font-size:13px;line-height:1.7}.notice.error{background:#382a26;border-color:#b27a61}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:45px;padding-top:19px;padding-bottom:25px;font-size:10px;color:#737e78}dialog{max-width:400px;width:calc(100% - 40px);color:var(--text);background:#202526;border:1px solid #6b6e62;border-radius:10px;padding:25px}dialog::backdrop{background:#0009}dialog h2{font-size:18px;margin-top:0}dialog p{color:#c2c8c3;line-height:1.9;margin:20px 0 25px}
@media(max-width:940px){.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:18px}.site-header,main,footer{padding-left:22px;padding-right:22px}.panel{padding:17px}.page-heading>p{max-width:220px;line-height:1.6}.game-toolbar button{padding:10px;font-size:12px}.game-toolbar .primary{min-width:120px}.cover-mark{font-size:62px}}
@media(max-width:720px){.site-header,main,footer{padding-left:16px;padding-right:16px}.site-header{padding-top:16px;padding-bottom:16px}.brand{font-size:17px}.brand-mark{width:36px;height:38px;font-size:24px}.account>span{display:none}.account button{font-size:11px;padding:9px}.page-heading{padding:25px 0 19px;display:block}.page-heading>p{max-width:none;margin:11px 0 0}.page-heading h1{font-size:25px}.workspace{display:flex;flex-direction:column;gap:22px}.play-area,.sidebar{width:100%}.sidebar{display:grid;grid-template-columns:1fr 1fr;align-items:start}.storage-note{grid-column:1/-1}.game-frame{border-radius:6px}.cover-mark{font-size:53px;padding:8px 23px}.game-cover{gap:8px}.game-cover p{font-size:11px;max-width:270px}.keyboard-help{margin-bottom:0;gap:8px 12px}footer{margin-top:30px;flex-direction:column;gap:8px}}
@media(max-width:430px){.sidebar{grid-template-columns:1fr}.game-toolbar{gap:7px}.game-toolbar .primary{min-width:110px}.game-toolbar button{font-size:11px}.cover-mark{font-size:42px}.panel{padding:19px}}

.touch-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 4px; user-select:none; }
.touch-controls[hidden] { display:none; }
.touch-controls button { touch-action:none; min-width:50px; min-height:50px; padding:6px; }
.touch-controls button:active,.touch-controls button.pressed { background:#735824; border-color:var(--accent); }
.dpad { display:grid; grid-template-columns:repeat(3,50px); grid-template-rows:repeat(2,50px); gap:4px; }
.dpad-up { grid-column:2; }.dpad-left { grid-column:1; grid-row:2; }.dpad-down { grid-column:2; grid-row:2; }.dpad-right { grid-column:3; grid-row:2; }
.touch-actions { display:flex; gap:6px; align-items:center; }.touch-actions span { display:block; font-size:11px; opacity:.7; }
@media(max-width:430px) { .touch-controls { gap:8px; }.dpad { grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px); }.touch-controls button { min-width:44px;min-height:44px; }.touch-actions { gap:4px; } }

.play-area:fullscreen { width:100vw;height:100dvh;max-height:100vh;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px;overflow:hidden;background:#090b0c; }
.play-area:fullscreen .game-frame { flex:1;min-height:0;width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none; }
.play-area:fullscreen .game-frame canvas { width:100%;height:100%;object-fit:contain; }
.play-area:fullscreen .game-toolbar { flex-shrink:0;width:min(600px,100%);margin:0; }
.play-area:fullscreen .touch-controls { flex-shrink:0;width:min(600px,100%);padding:2px 0; }
.play-area:fullscreen .keyboard-help { display:none; }
@media(orientation:landscape) and (max-height:500px) {
  .play-area:fullscreen:has(#touch-controls:not([hidden])) { display:grid;grid-template-columns:minmax(0,1fr) 160px;grid-template-rows:1fr auto;gap:8px; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .game-frame { grid-column:1;grid-row:1/3;height:100%;min-width:0; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .game-toolbar { grid-column:2;grid-row:1;align-self:start;flex-direction:column;gap:4px; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .game-toolbar button { width:100%;min-width:0;font-size:11px;padding:7px; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) #fullscreen { margin-left:0; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .touch-controls { grid-column:2;grid-row:2;flex-direction:column;gap:8px; }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .dpad { grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px); }
  .play-area:fullscreen:has(#touch-controls:not([hidden])) .touch-controls button { min-width:44px;min-height:44px; }
}