:root{
  --bg:#070b13;--panel:#111827;--panel2:#182237;--ink:#f8f4df;--muted:#a8b1c7;
  --gold:#f5c451;--red:#ff6b6b;--green:#70e29b;--blue:#78b9ff;--line:#3a496a;
  --stage-ratio:56.25vw;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#05080e;color:var(--ink);font-family:"Courier New",monospace;overflow:hidden}
body{touch-action:none;overscroll-behavior:none}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
#game-shell,.game-wrap{position:fixed;inset:0;width:100vw;height:100dvh;margin:0;max-width:none!important;max-height:none!important}
#canvasFrame{position:fixed;inset:0;width:100vw!important;height:100dvh!important;margin:0;background:radial-gradient(circle at top,#17233a 0,#090d16 55%,#05070c 100%);overflow:hidden;border:0;border-radius:0;box-shadow:none;max-width:none!important;max-height:none!important}
.game-stage{position:absolute;inset:0;background:#06111d}
canvas#game{width:100%;height:100%;display:block;image-rendering:pixelated;background:#06111d}
#scanlines{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#000 4px);z-index:2}

.mini-btn,.pixel-btn,.xbtn,.dialog-continue{background:rgba(26,36,56,.96);color:var(--ink);border:2px solid #50617e;box-shadow:0 3px 0 #070a10;padding:9px 12px;font-weight:800;border-radius:10px;min-height:38px}
.mini-btn:hover,.pixel-btn:hover,.dialog-continue:hover{background:#24324d}
.pixel-btn.primary{border-color:#9c7a2a;background:#5b481b;color:#fff1b7}
.pixel-btn.primary:hover{background:#735b23}
.hidden{display:none!important}

.screen-hud{position:absolute;inset:0;z-index:6;pointer-events:none;transition:opacity .2s ease}
.brand-chip,.screen-actions,.hud-stack,.touch-controls{pointer-events:auto}
.brand-chip{position:absolute;top:14px;left:14px;width:min(210px,20vw);padding:7px 9px;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:linear-gradient(180deg,rgba(8,12,19,.8),rgba(8,12,19,.42));backdrop-filter:blur(5px);box-shadow:0 8px 20px rgba(0,0,0,.24)}
.brand-chip img{display:block;width:100%;height:auto;max-height:72px;object-fit:contain}
.screen-actions{position:absolute;top:14px;right:14px;display:flex;gap:8px}
.hud-stack{position:absolute;background:linear-gradient(180deg,rgba(9,13,22,.88),rgba(9,13,22,.7));border:1px solid rgba(123,138,163,.75);box-shadow:0 6px 16px rgba(0,0,0,.24);backdrop-filter:blur(4px);border-radius:14px;padding:11px}
.panel-title{color:var(--gold);font-weight:900;letter-spacing:1px;font-size:11px;margin-bottom:8px;text-shadow:0 1px 0 #000}
.hud-hero-panel{left:14px;top:94px;width:238px}
.hud-quest-panel{right:14px;top:72px;width:285px}
.map-panel{right:14px;bottom:14px;width:214px}
.controls-panel{left:14px;bottom:14px;width:238px}
.hud-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;font-size:11px}
.hud-card{border:1px solid rgba(46,61,88,.85);background:rgba(13,20,33,.9);padding:7px;border-radius:10px}
.hud-card b{display:block;color:#fff;font-size:13px;margin-top:2px}
.quest-mini{font-size:11px;line-height:1.5;color:#e5e7eb}
.quest-mini strong{color:#fff}
.controls-grid{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:10px;color:var(--muted)}
.controls-grid b{color:#e8edf8;font-size:10px}
#miniMap{display:block;width:100%;height:auto;border:1px solid #43516c;background:#07111b;border-radius:8px;image-rendering:pixelated}
.map-label{margin-top:6px;font-size:9px;color:#c4d0e3;line-height:1.35}

.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(12,24,42,.35),rgba(3,6,12,.95));z-index:12;padding:20px;overflow:auto}
.overlay.active{display:flex}
.title-overlay{z-index:13}
.title-card,.loading-card{position:relative;width:min(640px,92%);max-height:min(88dvh,760px);text-align:center;background:linear-gradient(180deg,rgba(21,32,51,.98),rgba(7,12,21,.98));border:4px double #9a814c;padding:20px 22px;box-shadow:0 0 0 5px rgba(0,0,0,.5),0 18px 40px rgba(0,0,0,.6);border-radius:18px;overflow:auto}
.title-logo,.loading-logo{display:block;width:min(70vw,420px);max-width:100%;max-height:22dvh;height:auto;margin:0 auto 10px;filter:drop-shadow(0 14px 24px rgba(0,0,0,.35));pointer-events:none;object-fit:contain}
.title-card p{color:#cbd5e1;font-size:13px;line-height:1.55;max-width:560px;margin:2px auto 18px}
.title-card label{display:block;font-size:11px;color:#b8c0d1;letter-spacing:2px;margin-bottom:6px}
.title-card input{width:min(260px,80%);text-align:center;background:#05090f;border:2px solid #526586;color:#fff;padding:11px 12px;font-size:18px;text-transform:uppercase;outline:none;border-radius:12px}
.title-card input:focus{border-color:var(--gold)}
.title-buttons{display:flex;justify-content:center;gap:10px;margin-top:15px;flex-wrap:wrap}
.tiny{font-size:9px;color:#7f8ba5;margin-top:15px;line-height:1.4}

.loading-overlay{z-index:15;background:radial-gradient(circle at top,rgba(24,52,92,.55),rgba(3,6,12,.98) 70%);animation:loadingFallback 3.2s forwards}
.loading-card{max-width:760px;padding:28px 30px 24px}
.loading-sub{font-size:14px;color:#e7eefb;letter-spacing:.4px;margin:8px auto 16px}
.loading-bar-shell{width:min(440px,86%);height:18px;background:#08111f;border:2px solid #526586;border-radius:999px;overflow:hidden;margin:0 auto 14px;box-shadow:inset 0 0 18px rgba(0,0,0,.35)}
.loading-fill{height:100%;width:8%;background:linear-gradient(90deg,#4f8bff,#7bdfff,#f5c451);box-shadow:0 0 16px rgba(123,223,255,.7);border-radius:999px;transition:width .15s ease}
.loading-tip{font-size:11px;color:#b9c8de;max-width:560px;line-height:1.55;margin:0 auto}
.loading-stars,.loading-card::before,.loading-card::after{position:absolute;inset:-10%;content:"";pointer-events:none}
.loading-stars{background:radial-gradient(circle at 12% 24%,rgba(255,255,255,.88) 0 2px,transparent 3px),radial-gradient(circle at 76% 18%,rgba(255,244,180,.85) 0 3px,transparent 4px),radial-gradient(circle at 82% 73%,rgba(123,223,255,.8) 0 2px,transparent 4px),radial-gradient(circle at 24% 78%,rgba(255,255,255,.8) 0 2px,transparent 4px),radial-gradient(circle at 58% 86%,rgba(255,215,132,.78) 0 2px,transparent 4px);animation:twinkle 3.2s linear infinite}
.loading-card::before{background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.2) 45%,transparent 65%);transform:translateX(-120%);animation:shine 3.3s ease-in-out infinite}
.loading-card::after{background:radial-gradient(circle at center,rgba(123,223,255,.18),transparent 48%);animation:pulseAura 3s ease-in-out infinite}
@keyframes twinkle{0%,100%{transform:translateY(0);opacity:.82}50%{transform:translateY(-3px);opacity:1}}
@keyframes shine{0%{transform:translateX(-120%)}46%,100%{transform:translateX(135%)}}
@keyframes pulseAura{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.03)}}
@keyframes loadingFallback{0%,92%{opacity:1;pointer-events:auto}100%{opacity:0;pointer-events:none}}

.dialog{position:absolute;left:4%;right:4%;bottom:4%;z-index:9;background:rgba(8,13,22,.97);border:3px solid #c2a85a;box-shadow:0 5px 0 #000;padding:17px 20px 58px;min-height:138px;border-radius:12px}
.dialog-name{font-size:12px;color:var(--gold);font-weight:900;margin-bottom:8px;letter-spacing:1px}
.dialog-text{font-size:15px;line-height:1.55;color:#fff;white-space:pre-line}
.dialog-continue{position:absolute;right:14px;bottom:12px;padding:7px 12px;min-height:34px;border-color:#9c7a2a;color:#ffe6a2}

.menu-panel{position:absolute;inset:3%;z-index:11;background:rgba(8,13,22,.99);border:3px solid #617394;box-shadow:0 8px 0 #000;padding:14px;border-radius:16px}
.menu-head{display:flex;align-items:center;justify-content:space-between;color:var(--gold);font-weight:900;letter-spacing:1px}
.xbtn{padding:3px 9px;font-size:18px;min-height:34px}
.menu-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.menu-tabs button{background:#121c2e;color:#aeb8cb;border:1px solid #3a4a67;padding:8px 10px;font-weight:bold;border-radius:10px}
.menu-tabs button.active{color:#fff;border-color:#c2a85a;background:#3a3017}
.menu-content{height:calc(100% - 80px);overflow:auto;border-top:1px solid #293751;padding-top:12px;font-size:13px}
.stat-table{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat-card{background:#0e1726;border:1px solid #31405b;padding:10px;border-radius:10px}
.stat-card span{color:#8f9db6;font-size:10px}.stat-card b{display:block;font-size:18px;margin-top:2px}
.list-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 10px;border-bottom:1px solid #263249;background:rgba(19,29,47,.45)}
.list-row button{background:#24324d;color:#fff;border:1px solid #4b6084;padding:6px 9px;border-radius:9px}
.quest-row{padding:10px;border:1px solid #2c3b55;margin-bottom:8px;background:#0d1625;border-radius:10px}
.quest-row.done{opacity:.6}.quest-row strong{color:#ffd978}
.system-actions{display:flex;gap:8px;flex-wrap:wrap}.system-actions button{background:#17233a;color:#fff;border:1px solid #4b6084;padding:9px 12px;border-radius:10px}
.menu-map-wrap{display:grid;grid-template-columns:minmax(0,2fr) minmax(220px,1fr);gap:16px;align-items:start}
#menuMap{width:100%;max-height:58vh;border:2px solid #465975;background:#07111b;border-radius:12px;image-rendering:pixelated}
.map-legend{font-size:12px;line-height:1.7;color:#cbd5e1}.map-legend strong{color:#ffd978}

.battle-ui{position:absolute;inset:0;z-index:8;pointer-events:none}
.enemy-panel{position:absolute;top:5%;left:50%;transform:translateX(-50%);width:44%;background:rgba(3,8,16,.84);border:2px solid #6b7c99;padding:8px 12px;text-align:center;border-radius:14px}
.enemy-name{font-weight:900;letter-spacing:1px;color:#fff}.enemy-hp-wrap{height:9px;background:#280d15;margin-top:6px;border:1px solid #6f2c3e}.enemy-hp{height:100%;background:#e65868;width:100%}
.battle-bottom{position:absolute;left:3%;right:3%;bottom:3%;height:34%;display:grid;grid-template-columns:1.4fr 1fr .75fr;gap:8px}
.battle-log,.battle-commands,.battle-status{background:rgba(5,9,16,.95);border:2px solid #536887;padding:10px;pointer-events:auto;border-radius:14px}
.battle-log{font-size:12px;line-height:1.55;overflow:auto}.battle-commands{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}.battle-commands button{background:#17233a;color:#fff;border:1px solid #607498;padding:9px;font-weight:bold;border-radius:10px}.battle-status{font-size:12px;line-height:1.7}.battle-status b{color:#ffd978}
.toast{position:absolute;top:18px;right:18px;z-index:20;background:#0c1423;border:2px solid #7b8aa3;color:#fff;padding:10px 13px;font-size:12px;box-shadow:0 4px 0 #000;border-radius:12px;max-width:min(75vw,360px)}

.touch-controls{display:none;position:absolute;left:14px;right:14px;bottom:14px;justify-content:space-between;align-items:end;z-index:7;pointer-events:auto}
.dpad{text-align:center}.dpad>button,.dpad div button,.touch-actions button{width:54px;height:46px;background:rgba(11,18,31,.9);color:#fff;border:1px solid rgba(82,101,134,.95);margin:2px;font-weight:bold;border-radius:12px;backdrop-filter:blur(3px);box-shadow:0 4px 14px rgba(0,0,0,.25);touch-action:none}
.touch-actions{display:flex;gap:5px;align-items:flex-end}.touch-actions .a-btn{width:64px;height:64px;border-color:#b3913c;color:#ffe39a;background:rgba(66,45,11,.86)}

#canvasFrame.title-mode .screen-hud,#canvasFrame.title-mode .touch-controls{opacity:0;pointer-events:none}
#canvasFrame.combat-mode .screen-hud{opacity:0;pointer-events:none}
#canvasFrame.combat-mode .touch-controls{opacity:.3;pointer-events:none}

@media(max-width:900px){
  :root{--stage-ratio:56.25vw}
  #canvasFrame{background:#070b13}
  .game-stage{inset:0 auto auto 0;width:100%;height:var(--stage-ratio);max-height:45dvh;border-bottom:2px solid #25334a}
  canvas#game{width:100%;height:100%}
  .screen-hud{top:0;height:100%}
  .brand-chip{top:8px;left:8px;width:135px;padding:5px 7px}
  .screen-actions{top:8px;right:8px;gap:5px}.mini-btn{padding:5px 7px;font-size:9px;min-height:30px}
  .hud-stack{position:absolute;padding:8px 9px;border-radius:11px}
  .panel-title{font-size:9px;margin-bottom:5px}
  .hud-hero-panel{left:8px;top:calc(min(var(--stage-ratio),45dvh) + 10px);width:calc(50% - 12px)}
  .map-panel{right:8px;top:calc(min(var(--stage-ratio),45dvh) + 10px);bottom:auto;width:calc(50% - 12px)}
  .hud-quest-panel{left:8px;right:8px;top:calc(min(var(--stage-ratio),45dvh) + 150px);width:auto}
  .controls-panel{display:none}
  .hud-grid{grid-template-columns:repeat(3,1fr);gap:4px;font-size:8px}.hud-card{padding:5px}.hud-card b{font-size:10px}.quest-mini{font-size:9px;line-height:1.35}
  #miniMap{height:74px;object-fit:fill}.map-label{font-size:8px;margin-top:4px}
  .touch-controls{display:flex;bottom:max(10px,env(safe-area-inset-bottom));left:8px;right:8px}
  .dpad>button,.dpad div button,.touch-actions button{width:50px;height:44px}.touch-actions .a-btn{width:60px;height:60px}
  .dialog{left:3%;right:3%;bottom:86px;min-height:132px;padding:13px 13px 50px}.dialog-text{font-size:12px}.dialog-name{font-size:10px}
  .menu-panel{inset:2%;padding:10px}.menu-tabs{gap:4px;margin:8px 0}.menu-tabs button{font-size:9px;padding:6px}.menu-content{font-size:11px;height:calc(100% - 68px)}.stat-table{grid-template-columns:1fr 1fr}
  .menu-map-wrap{grid-template-columns:1fr}.map-legend{font-size:10px}
  .battle-bottom{grid-template-columns:1fr 1fr;height:38%;bottom:2%;left:2%;right:2%}.battle-status{display:none}.enemy-panel{width:72%;top:3%}.battle-log,.battle-commands{font-size:10px;padding:8px}.battle-commands button{padding:7px 5px;font-size:10px}
  .title-card,.loading-card{width:min(94%,640px);max-height:min(90dvh,720px);padding:16px 14px}.title-logo,.loading-logo{width:min(82vw,320px);max-height:18dvh}.title-card p{font-size:11px;margin-bottom:12px}.title-card input{font-size:16px;padding:9px}.tiny{font-size:8px}.loading-sub{font-size:11px}.loading-tip{font-size:9px}
}

@media(max-width:520px){
  .hud-quest-panel{top:calc(min(var(--stage-ratio),45dvh) + 142px)}
  .hud-grid{grid-template-columns:repeat(2,1fr)}
  .hud-hero-panel{min-height:126px}.map-panel{min-height:126px}
  .touch-actions{flex-direction:column;align-items:flex-end;gap:4px}.touch-actions button{height:38px;width:58px}.touch-actions .a-btn{width:58px;height:58px}
  .battle-bottom{height:44%;grid-template-columns:1fr}.battle-log{max-height:92px}.enemy-panel{width:80%}
  .title-buttons{gap:7px}.pixel-btn{padding:8px 10px;font-size:11px}
}

@media(hover:none),(pointer:coarse){.touch-controls{display:flex}}

.menu-panel:not(.hidden) ~ .touch-controls{opacity:0!important;pointer-events:none!important}