:root {
  --ink: #111719;
  --ink-2: #1a2325;
  --panel: #182022;
  --paper: #f1e3be;
  --paper-dim: #c2ad81;
  --gold: #e9b83e;
  --gold-light: #ffe38a;
  --red: #bc3028;
  --red-dark: #741b1b;
  --jade: #4fbf98;
  --blue: #4f9fd9;
  --line: rgba(235, 194, 88, 0.35);
  --shadow: rgba(0, 0, 0, 0.62);
  font-family: "Microsoft YaHei", "Noto Sans SC", sans-serif;
  color: var(--paper);
  background: #080c0d;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; background: #080c0d; }
button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }
.is-hidden { display: none !important; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 1px, transparent 1px 5px), #080c0d;
}

.page-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 12px; }
.game-shell {
  position: relative;
  isolation: isolate;
  width: min(1440px, calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
  width: min(1440px, calc(100vw - 24px), calc((100dvh - 24px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111719;
  border: 1px solid rgba(233,184,62,.45);
  box-shadow: 0 28px 100px rgba(0,0,0,.72), inset 0 0 0 1px #000;
}
#game-root, #game-root canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
#game-root canvas { display: block; }

.loading-screen, .title-screen { position: absolute; z-index: 60; inset: 0; }
.loading-screen { display: grid; place-content: center; justify-items: center; gap: 14px; background: #0a1012; }
.loading-screen img { width: min(520px, 58%); }
.loading-wordmark,.title-wordmark{
  display:grid;
  justify-items:center;
  gap:5px;
  color:#f9e8b0;
  text-align:center;
  filter:drop-shadow(0 12px 18px #000);
}
.loading-wordmark small,.title-wordmark small{color:#d5a741;font:800 clamp(8px,.85vw,12px)/1.2 Georgia,serif;letter-spacing:.28em}
.loading-wordmark strong,.title-wordmark strong{
  position:relative;
  padding:0 .15em .08em;
  color:#ffe6a0;
  font:900 clamp(32px,5.2vw,76px)/1.05 KaiTi,STKaiti,serif;
  letter-spacing:.08em;
  text-shadow:3px 4px 0 #76221d,0 0 18px rgba(236,179,54,.28);
}
.loading-wordmark strong::after,.title-wordmark strong::after{content:"";position:absolute;left:4%;right:4%;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#e1ad3d,transparent)}
.loading-wordmark span,.title-wordmark span{color:#cdbb8f;font:800 clamp(10px,1.1vw,15px)/1.2 KaiTi,serif;letter-spacing:.32em}
.loading-wordmark{width:min(760px,82vw)}
.loading-track { width: min(420px, 60vw); height: 7px; overflow: hidden; background: #202a2a; border: 1px solid var(--line); }
.loading-track i { display: block; width: 0; height: 100%; background: var(--gold); transition: width 120ms linear; }
.loading-screen span { color: var(--paper-dim); font-size: 12px; }

.title-screen {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 18px;
  padding: 5%;
  background: linear-gradient(90deg, rgba(5,8,10,.76), rgba(5,8,10,.2) 42%, rgba(5,8,10,.55));
}
.title-logo { width: min(720px, 64%); filter: drop-shadow(0 12px 18px #000); }
.title-wordmark{width:min(820px,78%)}
.title-wordmark strong{font-size:clamp(42px,6.5vw,94px)}
.title-actions { display: flex; align-items: center; gap: 10px; }
.main-command, .minor-command, .primary-button {
  min-height: 42px;
  cursor: pointer;
  border: 1px solid var(--line);
}
.main-command { min-width: 220px; padding: 9px 30px; color: #21170b; background: var(--gold); box-shadow: 0 6px 0 var(--red-dark), 0 14px 26px #000; }
.main-command:hover { background: var(--gold-light); transform: translateY(-2px); }
.main-command b, .main-command span { display: block; }.main-command b { font: 900 22px/1.1 KaiTi, STKaiti, serif; }.main-command span { margin-top: 2px; font-size: 9px; }
.minor-command { padding: 8px 18px; color: var(--paper); background: rgba(14,20,21,.76); }
.minor-command:hover { border-color: var(--gold); background: #20292a; }
.title-stamp { position: absolute; right: 16px; bottom: 13px; color: rgba(241,227,190,.52); font-size: 10px; }

.hud { position: absolute; z-index: 20; inset: 10px 11px auto; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.player-cluster { display: flex; align-items: center; min-width: min(430px, 39%); filter: drop-shadow(0 7px 8px #000); }
.hud-portrait { position: relative; z-index: 2; width: clamp(58px, 6.2vw, 88px); aspect-ratio: 1; overflow: hidden; flex: 0 0 auto; background: #171d1f; border: 3px solid var(--gold); clip-path: polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%); }
.hud-portrait img { width: 115%; height: 115%; object-fit: cover; transform: translate(-7%, -8%); }
.status-stack { flex: 1; min-width: 0; margin-left: -6px; }
.player-route-line { display:flex; align-items:baseline; gap:8px; height:18px; padding:0 8px 1px 12px; text-shadow:0 2px 4px #000; }
.player-route-line strong { color:#fff0bd; font-family:KaiTi,serif; font-size:clamp(11px,1.05vw,15px); letter-spacing:.08em; }
.player-route-line span { color:#d1a94f; font-size:clamp(7px,.7vw,10px); }
.hud-bar { position: relative; height: clamp(16px,1.6vw,23px); margin-bottom: 4px; overflow: hidden; background: rgba(6,9,10,.88); border: 2px solid #293334; transform: skewX(-9deg); }
.hud-bar i { display: block; width: 100%; height: 100%; transform-origin: left; transition: transform 150ms; }
.hud-bar.hp i { background: linear-gradient(90deg,#8b1f1e,#df3a2d 65%,#ff7a4c); }.hud-bar.mp i { background: linear-gradient(90deg,#175f86,#258ad0 70%,#63caee); }
.hud-bar b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff9dc; font-size: clamp(8px,.85vw,12px); text-shadow: 0 1px 3px #000; transform: skewX(9deg); }
.level-line { display: flex; align-items: center; gap: 8px; height: 18px; padding-left: 12px; }
.level-line strong { flex: 0 0 auto; color: var(--gold); font-size: clamp(10px,1vw,14px); }.xp-track { flex: 1; height: 7px; background: rgba(0,0,0,.75); border: 1px solid #3f4b49; }.xp-track i { display: block; width: 0; height: 100%; background: #e4b438; transition: width 180ms; }

.quest-chip { align-self: flex-start; width: clamp(150px,17vw,230px); padding: 7px 11px; pointer-events: auto; cursor: pointer; text-align: left; background: rgba(14,20,21,.82); border: 1px solid rgba(233,184,62,.3); box-shadow: 0 6px 18px #000; }
.quest-chip:hover { border-color: var(--gold); }.quest-chip small,.quest-chip strong,.quest-chip span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.quest-chip small { color:var(--gold); font-size:8px; }.quest-chip strong { margin-top:2px; font-size:clamp(10px,1vw,13px); }.quest-chip span { margin-top:2px; color:var(--paper-dim); font-size:8px; }

.hud-actions { display: flex; align-items: flex-start; gap: 5px; pointer-events: auto; }
.coin-display { height: clamp(38px,4.3vw,56px); min-width: clamp(98px,10vw,142px); display:flex; align-items:center; gap:9px; padding:0 14px; background:rgba(8,12,14,.86); border:2px solid #3b4544; clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); }
.coin-dot { width:22px; aspect-ratio:1; border-radius:50%; flex:0 0 auto; background:radial-gradient(circle at 35% 35%,#fff0a2,#ebb53d 42%,#8b5018); border:2px solid #ffdd72; }.coin-display strong{color:#fff2b8;font-size:clamp(12px,1.4vw,19px);font-variant-numeric:tabular-nums;}
.hud-actions button { width: clamp(38px,4.3vw,56px); aspect-ratio:1; display:grid; place-items:center; padding:3px; cursor:pointer; background:rgba(22,30,31,.9); border:1px solid rgba(233,184,62,.38); box-shadow:0 5px 13px #000; }
.hud-actions button:hover { border-color:var(--gold);transform:translateY(-2px);}.hud-actions button span{font:900 clamp(14px,1.5vw,20px)/1 KaiTi,STKaiti,serif;color:var(--gold);}.hud-actions button b{font-size:clamp(7px,.65vw,9px);}

.boss-hud { position:absolute; z-index:19; top:11%; left:50%; width:min(520px,46%); transform:translateX(-50%); text-align:center; text-shadow:0 2px 4px #000; }
.boss-hud>div:first-child{display:flex;justify-content:space-between;align-items:end;margin-bottom:3px}.boss-hud strong{font:900 clamp(13px,1.5vw,19px)/1 KaiTi,STKaiti,serif;color:#ffe2a1}.boss-hud span{font-size:9px;color:#ef9c75}.boss-track{height:12px;padding:2px;background:#080b0c;border:1px solid #d9ad4d}.boss-track i{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#831b20,#d43a35,#ff8651);transition:transform 160ms;}
.objective-bar { position:absolute; z-index:18; left:50%; top:11%; transform:translateX(-50%); display:flex; gap:15px; align-items:center; padding:6px 13px; background:rgba(10,15,16,.72); border:1px solid rgba(233,184,62,.3); font-size:10px; }.objective-bar b{color:var(--gold);}

.quickbar { position:absolute; z-index:20; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:5px; pointer-events:auto; }
.quickbar button { position:relative; width:clamp(58px,5.9vw,78px); aspect-ratio:1; display:grid; grid-template-rows:1fr auto; place-items:center; padding:5px 3px 4px; overflow:hidden; cursor:pointer; background:rgba(13,18,20,.9); border:2px solid #4a4540; box-shadow:0 7px 18px #000; }
.quickbar button:hover{border-color:var(--gold);transform:translateY(-2px)}.quickbar button:disabled{filter:grayscale(1);opacity:.46;cursor:not-allowed}.quickbar kbd{position:absolute;top:3px;left:4px;z-index:2;min-width:16px;padding:1px 3px;color:var(--gold-light);background:#080b0c;border:1px solid #4d4a42;font-size:8px}.quickbar b{font-size:clamp(7px,.72vw,10px);white-space:nowrap}.quickbar>button>span{position:absolute;right:4px;top:4px;z-index:2;min-width:17px;height:17px;display:grid;place-items:center;border-radius:50%;background:#b92c26;color:white;font-size:9px}.quickbar .cooldown{position:absolute;inset:0;background:rgba(3,6,7,.74);transform-origin:top;transform:scaleY(0);pointer-events:none}.quickbar button.is-cooling .cooldown{transform:scaleY(var(--cooldown,0))}
.atlas-icon { display:block; width:clamp(31px,3.2vw,44px); aspect-ratio:1; background-image:url('./assets/ui/icons-atlas.png?art=high-detail-art-v3'); background-repeat:no-repeat; background-size:800% 400%; }
.icon-0{background-position:0 0}.icon-1{background-position:14.2857% 0}.icon-2{background-position:28.5714% 0}.icon-3{background-position:42.8571% 0}.icon-4{background-position:57.1428% 0}.icon-5{background-position:71.4285% 0}.icon-6{background-position:85.7142% 0}.icon-7{background-position:100% 0}.icon-8{background-position:0 33.3333%}.icon-9{background-position:14.2857% 33.3333%}.icon-10{background-position:28.5714% 33.3333%}.icon-11{background-position:42.8571% 33.3333%}.icon-12{background-position:57.1428% 33.3333%}.icon-13{background-position:71.4285% 33.3333%}.icon-14{background-position:85.7142% 33.3333%}.icon-15{background-position:100% 33.3333%}

.context-prompt { position:absolute; z-index:21; left:50%; bottom:24%; transform:translateX(-50%); display:flex; align-items:center; gap:6px; padding:6px 10px; color:#19130a; background:var(--gold); border:1px solid #fff0aa; font-size:10px; box-shadow:0 7px 20px #000; }.context-prompt kbd{padding:2px 5px;color:white;background:#7c211e;}
.combo-display{position:absolute;z-index:18;right:5%;top:28%;opacity:0;transform:rotate(-7deg) scale(.72);transition:150ms;pointer-events:none;text-align:right}.combo-display.is-active{opacity:1;transform:rotate(-7deg) scale(1)}.combo-display b{display:block;color:var(--gold);font:900 clamp(35px,5vw,68px)/.8 Georgia,serif;text-shadow:3px 4px 0 #8b251f,0 8px 18px #000}.combo-display span{font:800 clamp(10px,1.3vw,18px)/1 KaiTi,serif}
.toast{position:absolute;z-index:70;left:50%;top:18%;transform:translate(-50%,-12px);padding:8px 16px;color:#181208;background:var(--gold);border:1px solid #fff2a8;font-weight:900;font-size:12px;opacity:0;pointer-events:none;transition:160ms;box-shadow:0 8px 24px #000}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.loot-feed{position:absolute;z-index:18;right:16px;top:21%;display:grid;gap:5px;pointer-events:none}.loot-feed span{padding:5px 9px;background:rgba(11,16,17,.74);border-left:3px solid var(--gold);font-size:9px;animation:loot-in 2.4s both}@keyframes loot-in{0%{opacity:0;transform:translateX(15px)}10%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}

.dialogue-box { position:absolute; z-index:45; left:3%; right:3%; bottom:3%; min-height:142px; display:grid; grid-template-columns:122px 1fr 86px; align-items:stretch; background:#eee0ba; border:5px solid #3c281b; box-shadow:0 16px 46px #000; color:#281b12; }
.dialogue-box::before{content:"";position:absolute;inset:5px;border:2px solid #9a6d32;pointer-events:none}.dialogue-box img{width:122px;height:132px;object-fit:cover;align-self:end;border-right:4px solid #5a3b25}.dialogue-copy{position:relative;z-index:1;padding:16px 18px}.dialogue-copy strong{display:inline-block;padding:3px 12px;margin-top:-30px;margin-bottom:10px;color:#ffe5a1;background:#5d261e;border:2px solid #d5a347;font:800 17px/1.2 KaiTi,serif}.dialogue-copy p{margin:0;font:700 clamp(13px,1.4vw,19px)/1.65 KaiTi,serif}.dialogue-box button{position:relative;z-index:1;align-self:end;margin:0 13px 14px 0;height:38px;cursor:pointer;color:#f6e6ba;background:#7f251e;border:2px solid #d3a344;font-weight:800}

.boss-intro{position:absolute;z-index:50;inset:0;display:grid;place-items:center;pointer-events:none}.cinema-bar{position:absolute;left:0;right:0;height:12%;background:#050707}.cinema-bar.top{top:0}.cinema-bar.bottom{bottom:0}.boss-title{text-align:center;text-shadow:0 5px 16px #000}.boss-title small{color:var(--gold);font-size:13px}.boss-title h2{margin:5px 0;color:#fff0c2;font:900 clamp(42px,6vw,82px)/1 KaiTi,serif;text-shadow:5px 5px 0 #81211e,0 11px 28px #000}.boss-title span{display:inline-block;padding:3px 15px;color:#1c130b;background:var(--gold);font-weight:900;font-size:11px}

.panel-backdrop{position:absolute;z-index:29;inset:0;background:rgba(5,8,9,.7);backdrop-filter:blur(3px)}
.ui-panel { position:absolute; z-index:30; left:50%; top:50%; width:min(1060px,90%); height:min(650px,84%); transform:translate(-50%,-50%); display:flex; flex-direction:column; background:var(--panel); border:1px solid rgba(233,184,62,.6); box-shadow:0 28px 80px #000; }
.ui-panel>header,.cheat-panel>header{min-height:65px;display:flex;align-items:center;gap:15px;padding:10px 16px;background:#87251f;border-bottom:2px solid #d29e39}.ui-panel>header>div:first-child,.cheat-panel>header>div:first-child{flex:1}.ui-panel header small,.cheat-panel header small{color:#efc76e;font-size:9px}.ui-panel header h2,.cheat-panel header h2{margin:2px 0 0;font:900 23px/1 KaiTi,serif}.ui-panel header>button,.cheat-panel header>button{width:36px;height:36px;display:grid;place-items:center;cursor:pointer;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.25)}.ui-panel header>button:hover,.cheat-panel header>button:hover{background:rgba(0,0,0,.46)}
.ui-panel>footer{min-height:70px;display:flex;align-items:center;gap:14px;padding:10px 16px;background:#111719;border-top:1px solid var(--line)}.ui-panel>footer>*:first-child{flex:1}.primary-button{padding:9px 19px;color:#191107;background:var(--gold);font-weight:900}.primary-button:hover:not(:disabled){background:var(--gold-light)}.primary-button:disabled{opacity:.42;cursor:not-allowed}

.map-canvas{position:relative;flex:1;min-height:0;overflow:hidden}.map-canvas>img{width:100%;height:100%;object-fit:cover;opacity:.9}.stage-node{position:absolute;min-width:115px;padding:7px 10px;cursor:pointer;color:#2c1a10;background:#e7d4a0;border:3px solid #6b3d22;box-shadow:0 6px 10px rgba(0,0,0,.42)}.stage-node:hover,.stage-node.is-selected{color:#fff4cc;background:#8d2a24;border-color:var(--gold);transform:translateY(-3px)}.stage-node:disabled{filter:grayscale(1);opacity:.55;cursor:not-allowed}.stage-node b,.stage-node span{display:block}.stage-node b{font:900 16px/1.2 KaiTi,serif}.stage-node span{margin-top:2px;font-size:8px}.stage-0{left:8%;top:63%}.stage-1{left:33%;top:54%}.stage-2{left:57%;top:30%}.stage-3{right:7%;top:25%}.map-panel footer p{margin:0;color:var(--paper-dim);font-size:11px}

.inventory-layout{flex:1;min-height:0;display:grid;grid-template-columns:41% 59%;overflow:hidden}.paper-doll{position:relative;padding:14px 14px 10px;background:linear-gradient(90deg,#20292b,#151b1c)}.paper-doll>img{position:absolute;left:10px;bottom:0;width:57%;max-height:92%;object-fit:contain;object-position:bottom;opacity:.96;mask-image:linear-gradient(#000 78%,transparent)}.equipment-slots{position:relative;z-index:1;margin-left:52%;display:grid;gap:8px}.equipment-slots button{min-height:63px;padding:7px;text-align:left;cursor:pointer;background:rgba(8,12,13,.72);border:1px solid var(--line)}.equipment-slots button:hover{border-color:var(--gold)}.equipment-slots small,.equipment-slots b{display:block}.equipment-slots small{color:var(--gold);font-size:8px}.equipment-slots i{display:none}.equipment-slots b{margin-top:4px;font-size:10px}.derived-stats{position:absolute;z-index:1;left:12px;right:12px;bottom:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#0e1314;border:1px solid var(--line)}.derived-stats span{padding:6px;text-align:center;color:var(--paper-dim);font-size:8px}.derived-stats b{display:block;margin-top:2px;color:var(--paper);font-size:11px}.inventory-layout>div:last-child{padding:12px;overflow:auto}.section-title{display:flex;justify-content:space-between;margin-bottom:9px;color:var(--paper-dim);font-size:10px}.inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(52px,1fr));gap:7px}.item-slot{position:relative;aspect-ratio:1;display:grid;place-items:center;padding:4px;cursor:pointer;background:#101617;border:2px solid #394343}.item-slot:hover,.item-slot.is-selected{border-color:var(--gold)}.item-slot.rare{border-color:#3e9dcc}.item-slot.epic{border-color:#9f55c7}.item-slot.legendary{border-color:#e48a2e}.item-slot .atlas-icon{width:82%}.item-slot span{position:absolute;right:3px;bottom:2px;font-size:8px}.item-detail{display:grid;gap:2px}.item-detail b{font-size:12px}.item-detail span{color:var(--paper-dim);font-size:9px}

.skill-points{color:var(--paper-dim);font-size:10px}.skill-points b{color:var(--gold);font-size:18px}.skill-tree{position:relative;flex:1;min-height:0;background:radial-gradient(circle at 52% 50%,rgba(82,122,101,.18),transparent 55%),#131a1b}.skill-tree>svg{position:absolute;inset:0;width:100%;height:100%}.skill-tree>svg path{fill:none;stroke:#5e675c;stroke-width:8;stroke-linecap:round}.skill-node{position:absolute;width:112px;min-height:103px;display:grid;justify-items:center;align-content:center;gap:4px;padding:7px;cursor:pointer;background:#172021;border:2px solid #485353}.skill-node:hover,.skill-node.is-selected{border-color:var(--gold);transform:translateY(-2px)}.skill-node.is-learned{border-color:var(--jade);box-shadow:inset 0 0 22px rgba(79,191,152,.18)}.skill-node.is-locked{filter:grayscale(1);opacity:.48}.skill-node .atlas-icon{width:45px}.skill-node b{font-size:10px}.skill-node span{color:var(--paper-dim);font-size:8px}.skill-node.n0{left:7%;top:39%}.skill-node.n1{left:31%;top:13%}.skill-node.n2{left:31%;bottom:13%}.skill-node.n3{right:29%;top:13%}.skill-node.n4{right:29%;bottom:13%}.skill-node.n5{right:6%;top:39%}#skill-detail{display:grid;gap:2px}#skill-detail b{font-size:12px}#skill-detail span{color:var(--paper-dim);font-size:9px}

.panel-tabs{display:flex;background:#0f1516;border-bottom:1px solid var(--line)}.panel-tabs button{flex:1;height:42px;cursor:pointer;color:var(--paper-dim);background:transparent;border:0;border-right:1px solid var(--line)}.panel-tabs button.is-active{color:#171008;background:var(--gold);font-weight:900}.store-view,.forge-view{flex:1;min-height:0;padding:15px;overflow:auto}.store-list{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.store-item{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:10px;min-height:74px;padding:9px;background:#111819;border:1px solid #364242}.store-item .atlas-icon{width:48px}.store-item b,.store-item span,.store-item small{display:block}.store-item span{margin-top:3px;color:var(--paper-dim);font-size:8px}.store-item small{color:var(--gold);font-size:9px}.store-item button{height:34px;padding:0 12px;cursor:pointer;color:#191107;background:var(--gold);border:0;font-size:9px}.store-item button:disabled{filter:grayscale(1);opacity:.4}.forge-view{display:grid;grid-template-columns:43% 1fr;align-items:center}.forge-visual{text-align:center}.forge-fire{width:130px;height:95px;margin:0 auto 10px;background:radial-gradient(ellipse at 50% 100%,#fff080,#f15628 42%,transparent 67%);filter:drop-shadow(0 0 18px #e94122);clip-path:polygon(50% 0,64% 33%,83% 20%,78% 60%,100% 70%,69% 100%,26% 100%,0 71%,24% 51%,16% 23%,39% 40%)}.forge-visual span,.forge-visual strong{display:block}.forge-visual span{color:var(--paper-dim);font-size:9px}.forge-visual strong{margin-top:5px;font:900 20px/1 KaiTi,serif;color:var(--gold)}.forge-info{padding:25px;border-left:1px solid var(--line)}.forge-info p{color:var(--paper-dim);font-size:11px}.forge-info .primary-button{margin-top:15px}

.quest-list{flex:1;overflow:auto;padding:14px}.quest-entry{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.quest-entry.is-complete{opacity:.62}.quest-entry b,.quest-entry span,.quest-entry small{display:block}.quest-entry b{color:var(--gold);font-size:13px}.quest-entry span{margin-top:4px;color:var(--paper-dim);font-size:10px}.quest-entry small{margin-top:5px;color:#81c9a8;font-size:8px}.quest-entry button{align-self:center;height:34px;padding:0 12px;cursor:pointer;color:#191107;background:var(--gold);border:0}.quest-entry button:disabled{opacity:.45}

.cheat-panel{position:absolute;z-index:31;top:0;right:0;width:min(390px,88%);height:100%;display:flex;flex-direction:column;background:#151c1d;border-left:1px solid var(--line);box-shadow:-20px 0 60px #000}.cheat-scroll{flex:1;min-height:0;padding:14px;overflow:auto}.cheat-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.cheat-grid label{display:grid;gap:4px;color:var(--paper-dim);font-size:9px}.cheat-grid input{width:100%;height:34px;padding:0 8px;color:var(--paper);background:#0b1011;border:1px solid #3c4746}.cheat-grid input:focus{outline:0;border-color:var(--gold)}.switch-list{margin:13px 0;border-top:1px solid var(--line)}.switch-list label{position:relative;min-height:49px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;border-bottom:1px solid var(--line)}.switch-list span{display:grid;gap:2px}.switch-list b{font-size:11px}.switch-list small{color:#7e8b88;font-size:8px}.switch-list input{position:absolute;opacity:0}.switch-list i{width:38px;height:21px;padding:2px;background:#353d3d;border:1px solid #59605e}.switch-list i::before{content:"";display:block;width:15px;height:15px;background:#999f9b;transition:140ms}.switch-list input:checked+i{background:#8f271f;border-color:#e3b343}.switch-list input:checked+i::before{transform:translateX(17px);background:#ffdc72}.cheat-scroll>.primary-button{width:100%}.cheat-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.cheat-actions button{min-height:36px;cursor:pointer;background:#222c2c;border:1px solid #495554;font-size:9px}.cheat-actions button:hover{border-color:var(--gold)}

.modal-screen{position:absolute;z-index:55;inset:0;display:grid;place-items:center;background:rgba(5,8,9,.78);backdrop-filter:blur(4px)}.modal-box{width:min(380px,82%);padding:27px;text-align:center;background:#172021;border:1px solid var(--line);box-shadow:0 25px 70px #000}.modal-box small{color:var(--gold)}.modal-box h2{margin:6px 0 19px;font:900 34px/1 KaiTi,serif}.modal-box .primary-button,.modal-box .minor-command{width:100%;margin-top:8px}.result-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:15px 0;background:#0b1011;border:1px solid var(--line)}.result-rewards span{padding:9px 4px;color:var(--paper-dim);font-size:9px}.result-rewards b{display:block;margin-top:3px;color:var(--gold);font-size:13px}
.result-box{position:relative;overflow:hidden}.result-box h2{margin-bottom:2px}.result-box::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(74,157,183,.14),transparent 46%);pointer-events:none}.result-box>*{position:relative}.result-box #result-portal-preview{width:128px;height:180px;margin:-18px auto -27px;transform:scale(.72);background-repeat:no-repeat;filter:drop-shadow(0 0 12px rgba(83,192,223,.55))}.result-box #result-return-hint{margin:0 auto 8px;color:#c9c0a7;font-size:10px;line-height:1.6}.result-box .result-rewards{margin-top:9px}

.mobile-controls{position:absolute;z-index:22;inset:auto 0 0;height:34%;pointer-events:none}.mobile-controls button{width:58px;height:58px;display:grid;place-items:center;pointer-events:auto;touch-action:none;color:#fff;background:rgba(14,21,21,.56);border:1px solid rgba(233,184,62,.6);border-radius:50%;font-weight:900}.mobile-controls button:active{background:rgba(160,45,35,.8);transform:scale(.94)}.move-pad,.action-pad{position:absolute;bottom:13px;display:flex;gap:9px;align-items:flex-end}.move-pad{left:13px}.action-pad{right:13px}.action-pad button{width:66px;height:66px;background:rgba(111,31,28,.65);border-color:#da523a}

@media (pointer:coarse),(max-width:900px){
  .page-shell{padding:0}.game-shell{width:min(100vw,calc(100dvh * 16 / 9));border:0}.title-logo{width:68%}.quest-chip{display:none}.hud-actions button{display:none}.hud-actions button[data-panel="cheat"]{display:grid}.coin-display{min-width:85px;padding:0 10px}.player-cluster{min-width:44%}.quickbar{bottom:4px;gap:3px;transform:translateX(-50%) scale(.76);transform-origin:bottom center}.quickbar button[data-action="attack"],.quickbar button[data-action="skill"]{visibility:hidden}.mobile-controls:not(.is-hidden){display:block}.ui-panel{width:94%;height:89%}.inventory-grid{grid-template-columns:repeat(5,1fr)}.dialogue-box{left:2%;right:2%;bottom:2%;min-height:112px;grid-template-columns:90px 1fr 67px}.dialogue-box img{width:90px;height:103px}.dialogue-copy{padding:10px}.dialogue-copy p{font-size:12px}.dialogue-copy strong{font-size:13px;margin-top:-23px}.dialogue-box button{margin:0 8px 9px 0}.stage-node{min-width:90px;padding:5px}.stage-node b{font-size:12px}.skill-node{transform:scale(.82)}.skill-node:hover,.skill-node.is-selected{transform:scale(.82) translateY(-2px)}
}

@media (max-height:540px){
  .hud{inset:6px 8px auto}.hud-portrait{width:52px}.player-cluster{min-width:41%}.quickbar button{width:61px}.ui-panel>header,.cheat-panel>header{min-height:48px;padding:6px 11px}.ui-panel header h2,.cheat-panel header h2{font-size:18px}.ui-panel>footer{min-height:52px;padding:7px 11px}.cheat-scroll{padding:9px}.switch-list{margin:8px 0}.switch-list label{min-height:39px}.switch-list small{display:none}.inventory-grid{grid-template-columns:repeat(7,1fr)}.item-slot{min-width:45px}.store-item{min-height:58px}.dialogue-box{min-height:104px}.dialogue-box img{height:96px}.skill-node{min-height:87px}.skill-node .atlas-icon{width:35px}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Art remaster layer */
:root{
  --panel-glass:linear-gradient(145deg,rgba(29,39,42,.97),rgba(10,15,17,.96));
  --gold-deep:#9a6320;
  --rim:rgba(255,220,126,.72);
}
body{
  background:
    radial-gradient(circle at 50% 40%,rgba(37,55,59,.22),transparent 48%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    #050809;
}
.game-shell{
  border:2px solid rgba(235,189,74,.68);
  box-shadow:0 32px 110px rgba(0,0,0,.88),0 0 42px rgba(180,124,33,.12),inset 0 0 0 1px #050707;
}
.game-shell::before{
  content:"";
  position:absolute;
  z-index:16;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at center,transparent 52%,rgba(1,4,7,.24) 78%,rgba(0,0,0,.58) 100%),
    linear-gradient(180deg,rgba(7,16,25,.08),transparent 30%,rgba(8,4,2,.12));
  box-shadow:inset 0 0 42px rgba(0,0,0,.5);
}
.game-shell::after{
  content:"";
  position:absolute;
  z-index:17;
  left:-12%;
  right:-12%;
  bottom:-8%;
  height:30%;
  pointer-events:none;
  opacity:.3;
  background:
    radial-gradient(ellipse at 18% 55%,rgba(128,167,171,.16),transparent 28%),
    radial-gradient(ellipse at 55% 60%,rgba(108,148,154,.13),transparent 34%),
    radial-gradient(ellipse at 84% 50%,rgba(138,162,164,.12),transparent 26%);
  filter:blur(15px);
  animation:ambient-drift 10s ease-in-out infinite alternate;
}
@keyframes ambient-drift{
  from{transform:translate3d(-2%,1%,0) scaleX(.98)}
  to{transform:translate3d(2%,-2%,0) scaleX(1.04)}
}
.loading-screen{
  background:
    radial-gradient(circle at 50% 42%,rgba(168,103,32,.18),transparent 32%),
    linear-gradient(145deg,#111b20,#050809 72%);
}
.loading-track{
  height:9px;
  padding:2px;
  border-color:rgba(255,210,105,.58);
  box-shadow:0 0 22px rgba(225,162,53,.15);
}
.loading-track i{background:linear-gradient(90deg,#9c3c20,#f1bd45,#fff0a4);box-shadow:0 0 13px #e9a937}
.title-screen{
  gap:22px;
  background:
    radial-gradient(ellipse at 50% 54%,rgba(4,8,12,.1),rgba(3,6,9,.46) 48%,rgba(2,4,6,.82) 100%),
    linear-gradient(90deg,rgba(3,7,11,.5),transparent 45%,rgba(3,7,11,.48));
}
.title-logo{
  filter:drop-shadow(0 8px 0 rgba(63,16,14,.82)) drop-shadow(0 19px 28px rgba(0,0,0,.88)) saturate(1.08);
  animation:title-breathe 4.8s ease-in-out infinite;
}
@keyframes title-breathe{50%{transform:translateY(-4px);filter:drop-shadow(0 8px 0 rgba(63,16,14,.82)) drop-shadow(0 25px 34px #000) saturate(1.16)}}
.art-edition{
  position:absolute;
  top:18px;
  left:18px;
  padding:5px 11px;
  color:#fff0bd;
  background:linear-gradient(90deg,rgba(111,30,25,.92),rgba(80,20,18,.66));
  border-left:3px solid var(--gold);
  font:800 10px/1.2 KaiTi,STKaiti,serif;
  letter-spacing:.18em;
  box-shadow:0 6px 20px #000;
}
.main-command,.minor-command,.primary-button,.hud-actions button,.quickbar button{
  transition:transform 150ms ease,border-color 150ms ease,filter 150ms ease,box-shadow 150ms ease;
}
.main-command{
  position:relative;
  overflow:hidden;
  border-color:#ffdf75;
  background:linear-gradient(180deg,#ffe06b 0,#e8ae31 56%,#bd7020 100%);
  box-shadow:0 5px 0 #6c2119,0 15px 30px rgba(0,0,0,.78),inset 0 1px 0 #fff3b0;
}
.main-command::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.42) 44%,transparent 58%);
  transform:translateX(-140%);
  animation:command-shine 4.2s ease-in-out infinite;
}
@keyframes command-shine{0%,55%{transform:translateX(-140%)}78%,100%{transform:translateX(140%)}}
.hud{filter:drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.hud-portrait{
  background:radial-gradient(circle at 50% 40%,#384a4d,#11191b 70%);
  border-color:#f0c04c;
  box-shadow:0 0 0 2px rgba(56,24,12,.9),0 0 18px rgba(231,174,55,.22);
}
.hud-bar{
  border-color:#596466;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.7),0 2px 0 rgba(255,255,255,.05);
}
.hud-bar.hp i{background:linear-gradient(90deg,#77191d,#c62f28 48%,#ff6a3f 83%,#ffbb68)}
.hud-bar.mp i{background:linear-gradient(90deg,#124b79,#197cbc 52%,#46bfe9 86%,#a3efff)}
.xp-track i{background:linear-gradient(90deg,#a86b20,#f0c34f,#fff0a1);box-shadow:0 0 9px #dfad36}
.quest-chip,.coin-display,.hud-actions button,.quickbar button{
  background:linear-gradient(145deg,rgba(28,38,40,.94),rgba(7,11,13,.92));
  border-color:rgba(228,184,79,.5);
}
.quest-chip{box-shadow:0 8px 24px rgba(0,0,0,.74),inset 3px 0 0 rgba(188,48,40,.7)}
.hud-actions button:hover,.quickbar button:hover{
  border-color:#ffe18b;
  box-shadow:0 8px 22px #000,0 0 14px rgba(238,187,66,.28);
  filter:saturate(1.18) brightness(1.08);
}
.quickbar{filter:drop-shadow(0 10px 18px rgba(0,0,0,.78))}
.quickbar button{clip-path:polygon(8% 0,92% 0,100% 8%,100% 92%,92% 100%,8% 100%,0 92%,0 8%)}
.quickbar button:not(:disabled)::after{
  content:"";
  position:absolute;
  inset:3px;
  pointer-events:none;
  border:1px solid rgba(255,221,128,.11);
}
.boss-hud strong{letter-spacing:.09em;text-shadow:0 2px 0 #6c1718,0 4px 12px #000}
.boss-track{height:14px;padding:3px;border-color:#f0c358;box-shadow:0 0 16px rgba(212,58,53,.32)}
.boss-track i{background:linear-gradient(90deg,#66121b,#c42d2e 55%,#ff7a46 84%,#ffd066);box-shadow:0 0 10px rgba(255,73,45,.75)}
.objective-bar,.context-prompt,.toast{box-shadow:0 8px 24px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.3)}
.dialogue-box{
  background:
    linear-gradient(rgba(255,255,255,.08),rgba(93,55,25,.04)),
    #f2e1b5;
  border-color:#2c1a12;
  box-shadow:0 20px 54px rgba(0,0,0,.86),0 0 0 1px rgba(235,189,74,.55);
}
.dialogue-box::before{border-color:#b98635;box-shadow:inset 0 0 24px rgba(119,71,28,.08)}
.panel-backdrop{background:rgba(2,6,8,.75);backdrop-filter:blur(6px) saturate(.72)}
.ui-panel,.cheat-panel,.modal-box{
  background:var(--panel-glass);
  border-color:rgba(238,194,88,.72);
  box-shadow:0 30px 90px rgba(0,0,0,.9),inset 0 0 40px rgba(80,112,107,.05);
}
.ui-panel>header,.cheat-panel>header{
  background:
    linear-gradient(90deg,rgba(65,15,16,.22),transparent 50%),
    linear-gradient(180deg,#9b3026,#681b1a);
  box-shadow:inset 0 1px 0 rgba(255,229,147,.22);
}
.item-slot,.store-item,.equipment-slots button,.skill-node{
  background:linear-gradient(145deg,#1d282a,#0d1314);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.item-slot:hover,.item-slot.is-selected,.skill-node:hover,.skill-node.is-selected{
  box-shadow:0 0 0 1px rgba(255,222,132,.25),0 8px 18px rgba(0,0,0,.45),inset 0 0 18px rgba(230,176,56,.08);
}
.skill-tree{
  background:
    radial-gradient(circle at 52% 50%,rgba(88,151,126,.18),transparent 46%),
    repeating-linear-gradient(45deg,rgba(255,255,255,.012) 0 1px,transparent 1px 9px),
    #101718;
}
.forge-fire{animation:forge-pulse 1.25s ease-in-out infinite alternate}
@keyframes forge-pulse{to{transform:scale(1.05,.96);filter:drop-shadow(0 0 28px #f05922) brightness(1.16)}}
.combo-display b{
  background:linear-gradient(#fff4ad,#edb332 54%,#c64c21);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-stroke:1px #5c1717;
}
@media (pointer:coarse),(max-width:900px){
  .art-edition{top:8px;left:8px;padding:3px 8px;font-size:8px}
  .game-shell::after{height:24%;opacity:.22}
}

/* High-detail art V3 */
.map-canvas{
  background:#17120c;
  box-shadow:inset 0 0 55px rgba(0,0,0,.82);
}
.map-canvas::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.28),transparent 12%,transparent 88%,rgba(0,0,0,.28)),
    linear-gradient(rgba(255,225,157,.08),transparent 18%,transparent 82%,rgba(40,12,8,.24));
  box-shadow:inset 0 0 32px rgba(30,12,6,.55);
}
.map-canvas>img{opacity:1;filter:saturate(.94) contrast(1.06)}
.stage-node{
  z-index:2;
  min-width:128px;
  color:#ffe9ad;
  background:linear-gradient(145deg,rgba(58,27,19,.94),rgba(17,20,20,.94));
  border:1px solid #d1a649;
  border-left-width:4px;
  box-shadow:0 9px 24px rgba(0,0,0,.66),inset 0 1px 0 rgba(255,235,167,.2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.stage-node:hover,.stage-node.is-selected{
  color:#fff6d4;
  background:linear-gradient(145deg,#9c3027,#44191a);
  border-color:#ffe18a;
  box-shadow:0 12px 28px rgba(0,0,0,.72),0 0 20px rgba(232,181,66,.25);
}
.ui-panel,.cheat-panel,.modal-box{
  outline:1px solid rgba(107,52,26,.8);
  outline-offset:-6px;
}
.ui-panel>header h2,.cheat-panel>header h2{
  letter-spacing:.12em;
  text-shadow:0 2px 0 #4c1111,0 5px 12px #000;
}
.hud-actions button,.quickbar button{
  border-width:2px;
  border-color:rgba(224,181,75,.62);
  box-shadow:0 8px 20px rgba(0,0,0,.78),inset 0 0 14px rgba(209,165,61,.05);
}
.atlas-icon{
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.7)) saturate(1.08);
}

.selection-screen{
  position:absolute;
  z-index:82;
  inset:0;
  display:grid;
  place-items:center;
  padding:5%;
  background:
    radial-gradient(circle at 50% 35%,rgba(119,36,30,.24),transparent 42%),
    linear-gradient(rgba(3,7,9,.72),rgba(3,7,9,.9));
  backdrop-filter:blur(8px) saturate(.72);
}
.selection-shell{
  width:min(920px,92%);
  max-height:94%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  color:#f6e8c0;
  background:
    linear-gradient(135deg,rgba(255,224,143,.045),transparent 35%),
    rgba(12,19,21,.97);
  border:1px solid #d3a33f;
  outline:1px solid rgba(83,37,24,.9);
  outline-offset:-7px;
  box-shadow:0 30px 90px #000,inset 0 0 45px rgba(68,114,104,.05);
}
.selection-shell>header{
  display:flex;
  align-items:center;
  min-height:78px;
  padding:14px 18px;
  background:linear-gradient(180deg,#9a2e25,#621919);
  border-bottom:2px solid #d6a83d;
}
.selection-shell>header>div{flex:1}.selection-shell header small{color:#efca70;font-size:10px;letter-spacing:.18em}
.selection-shell header h2{margin:4px 0 0;font:900 28px/1 KaiTi,STKaiti,serif;letter-spacing:.15em}
.selection-shell>header>button{width:40px;height:40px;color:#ffe8ad;background:rgba(0,0,0,.2);border:1px solid rgba(255,232,173,.3);font-size:24px}
.selection-lead{margin:0;padding:13px 20px;color:#c9b98e;border-bottom:1px solid rgba(218,174,72,.22);font-size:12px}
.save-slot-list{display:grid;gap:10px;min-height:0;padding:17px 20px 20px;overflow:auto}
.save-slot{display:grid;grid-template-columns:1fr 76px;gap:8px}
.save-slot>[data-save-slot]{
  min-height:102px;
  display:grid;
  grid-template-columns:72px 1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  text-align:left;
  color:#f7e8bd;
  background:linear-gradient(145deg,#1e2a2c,#0d1416);
  border:1px solid rgba(219,174,68,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 22px rgba(0,0,0,.42);
}
.save-slot>[data-save-slot]:hover{border-color:#ffe08a;transform:translateY(-2px);box-shadow:0 10px 25px #000,0 0 16px rgba(228,180,67,.16)}
.save-slot img{width:68px;height:68px;object-fit:cover;border:2px solid #c89838;clip-path:polygon(10% 0,90% 0,100% 10%,100% 90%,90% 100%,10% 100%,0 90%,0 10%)}
.save-slot-copy{display:grid;gap:4px}.save-slot-copy strong{font:900 19px/1.2 KaiTi,serif;color:#ffe4a0}.save-slot-copy span{font-size:11px;color:#c7baa0}.save-slot-copy small{font-size:9px;color:#7fae9d}
.save-slot-state{padding:5px 9px;color:#261307;background:#d8a43a;font-size:10px;font-weight:900}
.save-slot>[data-delete-slot]{color:#c7a89b;background:#281719;border:1px solid rgba(190,79,65,.34);font-size:11px}.save-slot>[data-delete-slot]:hover{color:#fff;background:#7e2723}
.selection-shell>footer{min-height:66px;display:flex;align-items:center;gap:15px;padding:11px 20px;background:#0a1011;border-top:1px solid rgba(213,169,64,.3)}
.selection-shell>footer>span{flex:1;color:#bbae8a;font-size:11px}
.character-choice-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:0;padding:16px;overflow:auto}
.character-choice{
  min-height:340px;
  display:grid;
  grid-template-rows:210px 1fr;
  overflow:hidden;
  text-align:left;
  color:#eee1bd;
  background:linear-gradient(145deg,#1b2628,#0d1314);
  border:2px solid rgba(206,164,64,.35);
}
.character-choice:hover,.character-choice.is-selected{border-color:#ffe184;box-shadow:0 14px 35px #000,0 0 22px rgba(226,174,56,.2);transform:translateY(-3px)}
.character-choice img{width:100%;height:210px;object-fit:cover;object-position:center 24%}
.character-choice span{display:grid;align-content:start;gap:6px;padding:13px 16px;border-top:1px solid rgba(226,178,65,.35)}
.character-choice strong{font:900 24px/1 KaiTi,serif;color:#ffe3a0}.character-choice small{color:#d6a941;font-weight:900}.character-choice em{color:#aebcb6;font-size:11px;font-style:normal;line-height:1.6}
@media (max-width:900px),(max-height:560px){
  .selection-screen{
    padding:max(7px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left));
  }
  .selection-shell{width:100%;max-height:100%}
  .selection-shell>header{min-height:54px;flex:0 0 auto;padding:7px 11px}
  .selection-shell header h2{margin-top:2px;font-size:20px}
  .selection-shell>header>button{width:44px;height:44px}
  .selection-shell>footer{min-height:56px;flex:0 0 auto;padding:7px 11px}
  .selection-shell>footer .primary-button{min-height:42px;padding:7px 16px}
  .character-choice-list{grid-template-columns:repeat(3,1fr);gap:7px;padding:8px}
  .character-choice{
    min-height:116px;
    grid-template-columns:84px 1fr;
    grid-template-rows:116px;
    transform:none;
  }
  .character-choice:hover,.character-choice.is-selected{transform:none}
  .character-choice img{width:84px;height:116px;object-position:center 20%}
  .character-choice span{min-width:0;gap:3px;padding:9px 7px;border-top:0;border-left:1px solid rgba(226,178,65,.35)}
  .character-choice strong{font-size:17px}
  .character-choice small{font-size:9px;line-height:1.3}
  .character-choice em{font-size:8px;line-height:1.35}
  .save-slot-list{gap:6px;padding:9px}
  .save-slot>[data-save-slot]{min-height:76px;padding:7px 9px}
  .save-slot{grid-template-columns:1fr 58px}
  .save-slot img{width:54px;height:54px}
}

@media (max-width:600px) and (orientation:portrait){
  body:has(#loading-screen:not(.is-hidden)) .game-shell,
  body:has(#title-screen:not(.is-hidden)) .game-shell,
  body:has(.selection-screen:not(.is-hidden)) .game-shell{
    width:100vw;
    height:100dvh;
    max-height:none;
    aspect-ratio:auto;
  }
  .title-screen{gap:14px;padding:7% 5%}
  .title-wordmark{width:96%}
  .title-wordmark strong{font-size:clamp(35px,10.5vw,58px);letter-spacing:.02em}
  .title-actions{width:min(340px,94%);flex-direction:column}
  .title-actions .main-command,.title-actions .minor-command{width:100%}
  .title-stamp{left:10px;right:10px;text-align:center}
  .character-choice-list{grid-template-columns:1fr}
  .character-choice{grid-template-columns:96px 1fr;grid-template-rows:108px;min-height:108px}
  .character-choice img{width:96px;height:108px}
  .character-choice em{display:block}
  .selection-shell>footer>span{font-size:9px}
}

@media (max-height:430px){
  .selection-shell>header{min-height:48px;padding-block:3px}
  .selection-shell header small{display:none}
  .selection-shell>footer{min-height:49px;padding-block:3px}
  .character-choice-list{gap:6px;padding:6px}
  .character-choice{grid-template-columns:92px 1fr;grid-template-rows:98px;min-height:98px}
  .character-choice img{width:92px;height:98px}
  .character-choice span{padding:7px 8px}
  .character-choice em{display:none}
}

/* Classic side-scrolling RPG equipment panel */
.inventory-panel{
  background:
    radial-gradient(circle at 22% 42%,rgba(171,119,44,.14),transparent 34%),
    linear-gradient(145deg,#202a29,#111718 58%,#0b1011);
}
.inventory-capacity{margin-left:auto;color:#c4b58e;font-size:10px}.inventory-capacity b{margin-left:5px;color:#ffe09a;font-size:14px}
.inventory-layout{
  grid-template-columns:minmax(430px,46%) 1fr;
  background:linear-gradient(90deg,rgba(145,88,32,.08),transparent 48%);
}
.paper-doll{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:0;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(65,36,20,.34),transparent 30%,transparent 70%,rgba(65,36,20,.26)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
    #182021;
  border-right:1px solid rgba(218,174,72,.32);
}
.equipment-identity{
  position:relative;
  z-index:4;
  min-height:66px;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-content:center;
  column-gap:10px;
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(112,34,27,.82),rgba(38,25,20,.45));
  border-bottom:1px solid rgba(229,181,67,.34);
}
.equipment-identity small{grid-row:1/3;align-self:center;padding:5px 7px;color:#2b1909;background:#d9a63c;font-size:8px;font-weight:900}
.equipment-identity strong{color:#ffe4a1;font:900 22px/1.15 KaiTi,serif;letter-spacing:.08em}
.equipment-identity span{color:#b6c7be;font-size:9px}
.equipment-stage{position:relative;flex:1;min-height:230px;overflow:hidden}
.equipment-stage::before{content:"";position:absolute;left:50%;bottom:-100px;width:330px;height:330px;transform:translateX(-50%);border:1px solid rgba(218,177,75,.25);border-radius:50%;box-shadow:0 0 45px rgba(211,156,48,.1),inset 0 0 55px rgba(62,119,97,.1)}
.equipment-aura{position:absolute;left:50%;bottom:9%;width:210px;height:36px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(246,194,72,.34),rgba(76,135,109,.14) 52%,transparent 74%);filter:blur(3px)}
.equipment-stage>img{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:-2%;
  width:52%;
  height:98%;
  transform:translateX(-50%);
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 13px 13px #000) saturate(1.08);
  mask-image:linear-gradient(#000 82%,rgba(0,0,0,.88));
}
.equipment-slots{
  position:absolute;
  z-index:3;
  inset:17px 12px auto;
  margin:0;
  display:grid;
  grid-template-columns:132px 1fr 132px;
  grid-template-rows:74px 74px;
  gap:10px;
  pointer-events:none;
}
.equipment-slots button{
  min-width:0;
  min-height:74px;
  display:grid;
  grid-template-columns:46px 1fr;
  align-items:center;
  gap:7px;
  padding:8px;
  pointer-events:auto;
  text-align:left;
  color:#eadcb8;
  background:linear-gradient(145deg,rgba(29,39,41,.96),rgba(8,13,14,.96));
  border:1px solid rgba(220,176,70,.48);
  box-shadow:0 8px 22px rgba(0,0,0,.5),inset 0 1px rgba(255,239,177,.08);
}
.equipment-slots button[data-equip-slot="weapon"]{grid-column:1;grid-row:1}
.equipment-slots button[data-equip-slot="armor"]{grid-column:1;grid-row:2}
.equipment-slots button[data-equip-slot="charm"]{grid-column:3;grid-row:1}
.equipment-slots button:hover{border-color:#ffe18a;transform:translateY(-2px)}
.equipment-slots button>.atlas-icon,.equipment-slots button>.equipment-empty{display:block;width:42px;height:42px;filter:drop-shadow(0 4px 7px #000)}
.equipment-empty{position:relative;border:1px dashed rgba(206,174,101,.36);background:rgba(255,255,255,.02)}
.equipment-empty::after{content:"空";position:absolute;inset:0;display:grid;place-items:center;color:#766d59;font:900 18px/1 KaiTi,serif}
.equipment-slots button>span{min-width:0;display:grid;gap:4px;padding:0;border:0}
.equipment-slots button small{color:#d5a63c;font-size:8px;letter-spacing:.12em}
.equipment-slots button b{margin:0;overflow:hidden;color:#f5e7bf;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.equipment-slots button[data-rarity="rare"]{border-color:#3e9dcc}.equipment-slots button[data-rarity="epic"]{border-color:#9f55c7}.equipment-slots button[data-rarity="legendary"]{border-color:#e48a2e}
.derived-stats{
  position:relative;
  z-index:4;
  left:auto;
  right:auto;
  bottom:auto;
  flex:0 0 auto;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin:0 12px 12px;
  background:#0b1112;
  border:1px solid rgba(219,176,72,.35);
  box-shadow:0 8px 24px rgba(0,0,0,.38);
}
.derived-stats span{position:relative;min-height:47px;padding:7px 6px 5px 34px;text-align:left;color:#aebbb5;background:rgba(255,255,255,.018);font-size:8px}
.derived-stats span>i{position:absolute;left:7px;top:50%;width:21px;height:21px;display:grid;place-items:center;transform:translateY(-50%);color:#2b1808;background:#d6a43b;border-radius:50%;font-style:normal;font-weight:900}
.derived-stats b{margin-top:2px;color:#fff0bd;font-size:12px}
.inventory-bag{min-width:0;padding:14px;overflow:auto;background:rgba(7,12,13,.3)}
.inventory-bag .section-title{align-items:end;padding:0 2px 9px;border-bottom:1px solid rgba(220,176,70,.22)}
.inventory-bag .section-title>div{display:grid;gap:3px}.inventory-bag .section-title b{color:#f6df9c;font:900 17px/1 KaiTi,serif}.inventory-bag .section-title small{color:#788985;font-size:8px}.inventory-bag .section-title>span{color:#8e8065;font-size:8px}
.inventory-grid{grid-template-columns:repeat(5,minmax(54px,1fr));gap:8px}
.item-slot{min-width:52px;background:radial-gradient(circle at 50% 45%,rgba(65,82,79,.25),transparent 60%),#0b1112}
.item-slot small{position:absolute;left:2px;top:2px;padding:2px 3px;color:#291708;background:#d9a73e;font-size:7px;font-weight:900}
.item-slot.is-equipped{box-shadow:0 0 0 1px #f3c95f,inset 0 0 20px rgba(225,176,57,.15)}
.inventory-panel>footer{background:linear-gradient(90deg,#111817,#0a1011)}
.inventory-panel .item-detail{grid-template-columns:auto 1fr;align-items:center;column-gap:12px;min-width:0}
.inventory-panel .item-detail>b{color:#ffe19a;font:900 15px/1 KaiTi,serif;white-space:nowrap}
.inventory-panel .item-detail>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.item-compare,.item-equipped-note{grid-column:1/-1;display:flex;gap:5px;font-style:normal}
.item-compare i{padding:2px 5px;background:#17201f;font-size:8px;font-style:normal}.item-compare .is-up{color:#72d9a5}.item-compare .is-down{color:#ed796d}
.item-equipped-note{color:#e7bd54;font-size:9px}

@media (max-width:900px),(max-height:560px){
  .inventory-layout{grid-template-columns:42% 58%}
  .equipment-identity{min-height:44px;padding:5px 9px}.equipment-identity strong{font-size:17px}.equipment-identity small{display:none}
  .equipment-stage{min-height:120px}
  .equipment-stage>img{width:48%;height:105%}
  .equipment-slots{inset:7px 6px auto;grid-template-columns:88px 1fr 88px;grid-template-rows:54px 54px;gap:5px}
  .equipment-slots button{min-height:54px;grid-template-columns:31px 1fr;gap:4px;padding:4px}
  .equipment-slots button>.atlas-icon,.equipment-slots button>.equipment-empty{width:29px;height:29px}
  .equipment-slots button small{font-size:7px}.equipment-slots button b{font-size:8px}
  .derived-stats{margin:0 6px 6px}.derived-stats span{min-height:31px;padding:4px 3px 3px 23px;font-size:7px}.derived-stats span>i{left:4px;width:16px;height:16px;font-size:7px}.derived-stats b{font-size:9px}
  .inventory-bag{padding:7px}.inventory-bag .section-title{margin-bottom:5px;padding-bottom:5px}.inventory-bag .section-title small,.inventory-bag .section-title>span{display:none}
  .inventory-grid{grid-template-columns:repeat(5,minmax(42px,1fr));gap:5px}
  .inventory-panel .item-detail{gap:6px}.inventory-panel .item-detail>b{font-size:12px}.inventory-panel .item-detail>span{font-size:8px}
}

@media (max-width:600px) and (orientation:portrait){
  body:has(.ui-panel:not(.is-hidden)) .game-shell{width:100vw;height:100dvh;max-height:none;aspect-ratio:auto}
  .inventory-panel{width:calc(100% - 12px);height:calc(100% - 12px)}
  .inventory-layout{grid-template-columns:1fr;overflow:auto}
  .paper-doll{min-height:410px;border-right:0;border-bottom:1px solid rgba(218,174,72,.32)}
  .inventory-bag{min-height:230px;overflow:visible}
  .equipment-slots{grid-template-columns:98px 1fr 98px}
  .inventory-grid{grid-template-columns:repeat(5,minmax(44px,1fr))}
}

/* Expanded world-map and progression loop */
.map-panel{width:min(1220px,96%);height:min(690px,94%)}
.map-clear-progress{margin-left:auto;display:grid;justify-items:end;gap:2px;padding-right:7px}.map-clear-progress span{color:#efca70;font-size:8px}.map-clear-progress b{color:#fff0b9;font-size:16px}
.map-system-bar{
  flex:0 0 58px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  padding:7px 10px;
  background:#0c1314;
  border-bottom:1px solid rgba(222,177,69,.3);
}
.map-system-bar>span{position:relative;display:grid;grid-template-columns:34px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:4px 10px;color:#a9b5af;background:rgba(255,255,255,.025);border:1px solid rgba(148,139,110,.18)}
.map-system-bar i{grid-row:1/3;width:25px;height:25px;display:grid;place-items:center;color:#29180a;background:#7f8171;border-radius:50%;font-style:normal;font-weight:900}
.map-system-bar b{font-size:10px}.map-system-bar small{font-size:7px;color:#71817b}
.map-system-bar>span.is-active{color:#ffe4a0;border-color:#d5a33e;background:rgba(133,45,34,.3)}.map-system-bar>span.is-active i{background:#e1ac3e}
.map-system-bar>span.is-complete{border-color:rgba(83,190,147,.52)}.map-system-bar>span.is-complete i{background:#53be93}
.map-panel .map-canvas{min-height:0;box-shadow:inset 0 0 38px rgba(0,0,0,.64)}
.map-route-lines{position:absolute;z-index:1;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 2px 2px rgba(0,0,0,.7))}
.map-route-lines path{fill:none;stroke:#d6aa4b;stroke-width:5;stroke-dasharray:8 9;stroke-linecap:round;opacity:.7}
.hub-map-node{position:absolute;z-index:3;left:2.5%;bottom:5%;display:grid;grid-template-columns:38px auto;grid-template-rows:auto auto;align-items:center;column-gap:7px;padding:7px 10px;color:#2a190a;background:#e1c27d;border:2px solid #704425;box-shadow:0 8px 18px rgba(0,0,0,.48)}
.hub-map-node i{grid-row:1/3;width:35px;height:35px;display:grid;place-items:center;color:#ffe7a0;background:#8f2b24;border-radius:50%;font:900 19px/1 KaiTi,serif}.hub-map-node b{font:900 15px/1 KaiTi,serif}.hub-map-node span{font-size:7px}
.map-panel .stage-node{min-width:142px;padding:8px 12px}
.map-panel .stage-node small{display:block;margin-bottom:2px;color:#d6a941;font-size:7px;letter-spacing:.16em}
.map-panel .stage-node.is-cleared::after{content:"已平定";position:absolute;right:-7px;top:-8px;padding:2px 5px;color:#152018;background:#62c496;border:1px solid #b9f1d7;font-size:7px;font-weight:900}
.map-panel .stage-0{left:9%;top:62%}.map-panel .stage-1{left:34%;top:52%}.map-panel .stage-2{left:57%;top:29%}.map-panel .stage-3{right:5%;top:17%}
.map-panel>footer{min-height:64px}
.map-panel>footer p{max-width:78%;line-height:1.5}

@media (max-width:900px),(max-height:560px){
  .map-panel{width:96%;height:94%}
  .map-system-bar{flex-basis:43px;padding:4px 6px}
  .map-system-bar>span{grid-template-columns:25px 1fr;padding:2px 5px}.map-system-bar i{width:20px;height:20px;font-size:9px}.map-system-bar b{font-size:8px}.map-system-bar small{display:none}
  .map-panel .stage-node{min-width:88px;padding:5px 7px}.map-panel .stage-node small{display:none}.map-panel .stage-node b{font-size:11px}.map-panel .stage-node span{font-size:7px}
  .hub-map-node{transform:scale(.75);transform-origin:left bottom}
  .map-panel>footer{min-height:49px;padding:4px 8px}.map-panel>footer p{font-size:8px}.map-panel>footer .primary-button{min-height:38px;padding:5px 10px}
}

/* Mobile system recovery + 2.5D direction pad */
.mobile-system-dock{display:none}
@media (pointer:coarse),(max-width:900px){
  .mobile-system-dock:not(.is-hidden){
    position:absolute;
    z-index:24;
    top:67px;
    right:7px;
    display:flex;
    gap:4px;
    pointer-events:auto;
  }
  .mobile-system-dock button{
    width:45px;
    height:42px;
    display:grid;
    place-items:center;
    padding:3px;
    color:#f8e7b2;
    background:rgba(12,19,20,.88);
    border:1px solid rgba(230,184,74,.62);
    box-shadow:0 5px 14px rgba(0,0,0,.58);
  }
  .mobile-system-dock b{color:#f0bc43;font:900 16px/1 KaiTi,serif}
  .mobile-system-dock span{font-size:7px}
  .move-pad{
    width:154px;
    height:154px;
    display:grid;
    grid-template-columns:repeat(3,48px);
    grid-template-rows:repeat(3,48px);
    gap:5px;
    align-items:center;
  }
  .move-pad button{width:48px;height:48px}
  .move-pad [data-hold="up"]{grid-column:2;grid-row:1}
  .move-pad [data-hold="left"]{grid-column:1;grid-row:2}
  .move-pad [data-hold="right"]{grid-column:3;grid-row:2}
  .move-pad [data-hold="down"]{grid-column:2;grid-row:3}
  .move-pad [data-action="jump"]{grid-column:3;grid-row:3;color:#21180b;background:rgba(226,177,57,.82)}
}
@media (max-height:430px){
  .mobile-system-dock:not(.is-hidden){top:55px}
  .mobile-system-dock button{width:39px;height:36px}.mobile-system-dock span{display:none}
  .move-pad{transform:scale(.82);transform-origin:left bottom}
}

/* V11 tactile mobile controls + polished interface */
.mobile-joystick{display:none}
.ui-panel{
  overflow:hidden;
  background:
    linear-gradient(145deg,rgba(33,43,45,.985),rgba(10,15,17,.985)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.015) 0 1px,transparent 1px 5px);
  border:2px solid rgba(220,171,57,.7);
  box-shadow:0 30px 90px rgba(0,0,0,.88),inset 0 0 0 1px rgba(255,235,163,.11),inset 0 0 45px rgba(4,7,8,.72);
}
.ui-panel::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:6px;
  pointer-events:none;
  border:1px solid rgba(232,190,83,.13);
  box-shadow:inset 0 0 20px rgba(0,0,0,.28);
}
.ui-panel>header,.cheat-panel>header{
  position:relative;
  z-index:6;
  background:
    linear-gradient(180deg,rgba(173,55,42,.98),rgba(102,27,24,.98)),
    repeating-linear-gradient(90deg,rgba(255,227,152,.08) 0 1px,transparent 1px 8px);
  border-bottom:2px solid #d2a43e;
  box-shadow:0 5px 18px rgba(0,0,0,.4),inset 0 1px rgba(255,235,177,.2);
}
.ui-panel>footer{position:relative;z-index:6;background:linear-gradient(180deg,#131b1c,#090e0f)}
.primary-button,.store-item button,.quest-entry button{
  border:1px solid #ffdf79;
  background:linear-gradient(180deg,#f1ca58,#b77b21);
  box-shadow:inset 0 1px rgba(255,255,255,.42),0 4px 10px rgba(0,0,0,.36);
}
.hud-bar{
  border-color:#625339;
  box-shadow:inset 0 0 8px #000,0 2px 7px rgba(0,0,0,.65);
}
.hud-bar::after{
  content:"";
  position:absolute;
  inset:1px 3px 55%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.23),transparent);
  border-radius:50%;
}
.hud-portrait{box-shadow:inset 0 0 0 2px rgba(255,237,169,.22),0 6px 15px rgba(0,0,0,.65)}
.quickbar button{
  background:linear-gradient(145deg,rgba(35,43,43,.96),rgba(8,12,13,.96));
  border-color:#6d5935;
  box-shadow:inset 0 0 0 1px rgba(255,228,143,.08),0 8px 20px rgba(0,0,0,.72);
}

@media (pointer:coarse),(max-width:900px){
  .mobile-controls{height:39%}
  .mobile-joystick{
    --stick-x:0px;
    --stick-y:0px;
    position:absolute;
    left:17px;
    bottom:11px;
    width:132px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    pointer-events:auto;
    touch-action:none;
    border-radius:50%;
    background:
      radial-gradient(circle,rgba(15,23,24,.18) 0 22%,rgba(224,179,65,.12) 23% 25%,transparent 26% 48%,rgba(224,179,65,.2) 49% 51%,transparent 52%),
      conic-gradient(from 45deg,rgba(220,174,63,.12),rgba(9,15,16,.78),rgba(220,174,63,.12),rgba(9,15,16,.78),rgba(220,174,63,.12));
    border:2px solid rgba(232,188,78,.52);
    box-shadow:inset 0 0 24px rgba(0,0,0,.82),0 8px 20px rgba(0,0,0,.52),0 0 0 4px rgba(5,9,10,.28);
  }
  .mobile-joystick::before,.mobile-joystick::after{
    content:"";
    position:absolute;
    pointer-events:none;
    background:rgba(240,204,111,.17);
  }
  .mobile-joystick::before{width:2px;height:76%;left:calc(50% - 1px)}
  .mobile-joystick::after{height:2px;width:76%;top:calc(50% - 1px)}
  .mobile-joystick>i{
    position:absolute;
    width:70%;
    aspect-ratio:1;
    border-radius:50%;
    border:1px dashed rgba(240,204,111,.28);
    box-shadow:inset 0 0 16px rgba(0,0,0,.46);
  }
  .mobile-joystick>b{
    position:relative;
    z-index:2;
    width:50px;
    aspect-ratio:1;
    border-radius:50%;
    transform:translate(var(--stick-x),var(--stick-y));
    transition:transform 55ms linear;
    background:
      radial-gradient(circle at 35% 30%,rgba(255,239,177,.32),transparent 27%),
      linear-gradient(145deg,rgba(142,47,38,.96),rgba(63,20,20,.98));
    border:2px solid #e2af43;
    box-shadow:inset 0 0 0 4px rgba(29,11,10,.35),inset 0 -8px 12px rgba(0,0,0,.3),0 5px 12px rgba(0,0,0,.72);
  }
  .mobile-joystick.is-active>b{transition:none;box-shadow:inset 0 0 0 4px rgba(29,11,10,.25),0 0 17px rgba(239,187,62,.4)}
  .mobile-joystick>span{
    position:absolute;
    bottom:-2px;
    left:50%;
    transform:translateX(-50%);
    color:rgba(255,232,167,.66);
    font:800 8px/1 Microsoft YaHei,sans-serif;
    letter-spacing:.28em;
    text-shadow:0 2px 4px #000;
  }
  .action-pad{
    right:12px;
    bottom:9px;
    width:172px;
    height:132px;
    display:block;
  }
  .action-pad button{
    position:absolute;
    display:grid;
    grid-template-rows:1fr auto;
    align-items:center;
    justify-items:center;
    padding:8px 3px 7px;
    background:
      radial-gradient(circle at 34% 25%,rgba(255,234,163,.2),transparent 30%),
      linear-gradient(145deg,rgba(151,45,35,.93),rgba(63,18,18,.96));
    border:2px solid #dda43b;
    box-shadow:inset 0 0 0 3px rgba(24,9,9,.3),inset 0 -9px 13px rgba(0,0,0,.28),0 7px 17px rgba(0,0,0,.62);
  }
  .action-pad button b{font:900 23px/1 KaiTi,serif;color:#ffe6a0;text-shadow:0 2px 3px #38100e}
  .action-pad button span{font:800 8px/1 Microsoft YaHei,sans-serif;color:#e9c777}
  .action-pad .jump-action{left:0;top:0;width:58px;height:58px;background:linear-gradient(145deg,rgba(43,91,105,.95),rgba(18,45,54,.97));border-color:#81c7d5}
  .action-pad .jump-action b{font-size:19px;color:#d9f6ff}
  .action-pad .interact-action{left:66px;top:1px;width:48px;height:48px;background:linear-gradient(145deg,rgba(145,102,37,.96),rgba(69,42,14,.98));border-color:#f4cf6b}
  .action-pad .interact-action b{font-size:17px;color:#fff0ae}
  .action-pad .attack-action{right:0;bottom:0;width:78px;height:78px}
  .action-pad .skill-action{left:36px;bottom:0;width:64px;height:64px;background:linear-gradient(145deg,rgba(43,105,80,.94),rgba(17,53,39,.97));border-color:#77c49b}
  .action-pad .skill-action b{font-size:20px;color:#d9ffe7}
  .mobile-system-dock:not(.is-hidden){gap:5px}
  .mobile-system-dock button{
    position:relative;
    overflow:hidden;
    border-radius:7px;
    background:linear-gradient(160deg,rgba(35,45,45,.96),rgba(8,13,14,.96));
    border-color:rgba(232,185,70,.72);
    box-shadow:inset 0 0 0 1px rgba(255,231,153,.08),0 6px 15px rgba(0,0,0,.6);
  }
  .mobile-system-dock button::after{content:"";position:absolute;inset:3px;border:1px solid rgba(255,227,145,.1);border-radius:4px;pointer-events:none}
  .mobile-system-dock button:active{transform:translateY(1px);border-color:#ffe38a}
}
@media (max-height:430px){
  .mobile-joystick{width:112px;left:12px;bottom:7px}
  .mobile-joystick>b{width:43px}
  .action-pad{transform:scale(.88);transform-origin:right bottom;right:8px;bottom:6px}
}

/* V14 portrait phone layout: large scene above, dedicated controls below */
@media (max-width:600px) and (orientation:portrait){
  html,body{
    width:100%;
    height:100%;
    min-height:100%;
    overscroll-behavior:none;
  }
  .page-shell{
    width:100%;
    height:100vh;
    height:100dvh;
    min-height:0;
    display:block;
    padding:0;
  }
  .game-shell{
    width:100vw;
    height:100vh;
    height:100dvh;
    max-width:none;
    max-height:none;
    aspect-ratio:auto;
    border:0;
    background:
      linear-gradient(180deg,transparent 0 69%,rgba(5,10,11,.88) 73%,#080d0e 100%),
      #0b1214;
    box-shadow:none;
  }
  .game-shell::after{
    bottom:21%;
    height:19%;
    opacity:.18;
  }
  #game-root{
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100%!important;
    height:72vh!important;
    height:72dvh!important;
    overflow:hidden;
    background:#111719;
  }
  #game-root canvas{
    top:0!important;
    right:auto!important;
    bottom:auto!important;
    left:var(--mobile-canvas-left,0px)!important;
    width:auto!important;
    min-width:100%!important;
    height:100%!important;
    margin:0!important;
    transform:none!important;
    transform-origin:center center!important;
  }
  .hud{
    top:max(5px,env(safe-area-inset-top));
    right:6px;
    bottom:auto;
    left:6px;
    min-height:59px;
    align-items:flex-start;
    filter:drop-shadow(0 4px 8px rgba(0,0,0,.82));
  }
  .player-cluster{
    width:calc(100% - 72px);
    min-width:0;
    max-width:280px;
    align-items:flex-start;
  }
  .hud-portrait{
    width:48px;
    border-width:2px;
  }
  .status-stack{margin-left:-4px}
  .player-route-line{
    height:16px;
    gap:5px;
    padding:0 5px 1px 9px;
  }
  .player-route-line strong{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  .player-route-line span{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:7px}
  .hud-bar{
    height:13px;
    margin-bottom:2px;
    border-width:1px;
  }
  .hud-bar b{font-size:7px}
  .level-line{height:10px;gap:5px;padding-left:8px}
  .level-line strong{font-size:8px}
  .xp-track{height:4px}
  .quest-chip{display:none}
  .hud-actions{
    position:absolute;
    top:0;
    right:0;
  }
  .coin-display{
    width:66px;
    min-width:66px;
    height:31px;
    justify-content:center;
    gap:4px;
    padding:0 5px;
    border-width:1px;
  }
  .coin-dot{width:13px;border-width:1px}
  .coin-display strong{font-size:11px}
  .hud-actions button,
  .hud-actions button[data-panel="cheat"]{display:none}
  .boss-hud{
    top:max(69px,calc(env(safe-area-inset-top) + 66px));
    width:82%;
  }
  .objective-bar{
    top:max(69px,calc(env(safe-area-inset-top) + 66px));
    max-width:72%;
    padding:4px 8px;
    font-size:8px;
  }
  .mobile-system-dock:not(.is-hidden){
    top:max(63px,calc(env(safe-area-inset-top) + 59px));
    right:6px;
    gap:3px;
  }
  .mobile-system-dock button{
    width:32px;
    height:32px;
    padding:1px;
    border-radius:6px;
  }
  .mobile-system-dock b{font-size:13px}
  .mobile-system-dock span{display:none}
  .mobile-controls{
    top:auto;
    right:0;
    bottom:0;
    left:0;
    height:28%;
    background:linear-gradient(180deg,transparent,rgba(4,8,9,.26) 24%,rgba(4,8,9,.58));
  }
  .mobile-joystick{
    left:max(14px,env(safe-area-inset-left));
    bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px));
    width:118px;
  }
  .mobile-joystick>b{width:45px}
  .mobile-joystick>span{bottom:2px}
  .action-pad{
    right:max(10px,env(safe-area-inset-right));
    bottom:max(11px,calc(env(safe-area-inset-bottom) + 6px));
    width:166px;
    height:122px;
    transform:none;
  }
  .action-pad .jump-action{left:3px;top:2px;width:53px;height:53px}
  .action-pad .interact-action{left:66px;top:3px;width:44px;height:44px}
  .action-pad .skill-action{left:39px;bottom:0;width:60px;height:60px}
  .action-pad .attack-action{right:0;bottom:0;width:74px;height:74px}
  .action-pad button b{font-size:21px}
  .action-pad button span{font-size:7px}
  .quickbar{
    left:50%;
    bottom:max(139px,calc(env(safe-area-inset-bottom) + 133px));
    gap:4px;
    transform:translateX(-50%);
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.72));
  }
  .quickbar button{
    width:39px;
    height:39px;
    aspect-ratio:1;
    padding:2px;
    border-width:1px;
  }
  .quickbar button[data-action="attack"],
  .quickbar button[data-action="skill"]{display:none}
  .quickbar .atlas-icon{width:26px}
  .quickbar kbd,.quickbar b{display:none}
  .quickbar>button>span{right:1px;top:1px;min-width:14px;height:14px;font-size:7px}
  .context-prompt{bottom:31%;font-size:9px}
  .combo-display{right:4%;top:24%;transform:rotate(-7deg) scale(.64)}
  .combo-display.is-active{transform:rotate(-7deg) scale(.82)}
  .toast{top:15%;max-width:86%;padding:6px 10px;text-align:center;font-size:10px}
  .loot-feed{top:18%;right:7px}
  .dialogue-box{
    left:6px;
    right:6px;
    bottom:max(8px,env(safe-area-inset-bottom));
    min-height:128px;
    grid-template-columns:72px 1fr 56px;
  }
  .dialogue-box img{width:72px;height:118px}
  .dialogue-copy{padding:10px 8px}
  .dialogue-copy p{font-size:11px;line-height:1.45}
  .dialogue-copy strong{font-size:12px}
  .dialogue-box button{height:36px;margin:0 6px 8px 0;font-size:9px}
}