* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; min-height: 100%; }
body {
  height: 100dvh;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--font-ui);
}
button { min-width: var(--touch-target); min-height: var(--touch-target); font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid #216c87; outline-offset: 3px; }
.restored-pointer-focus:not(.tutorial-arrow):focus-visible { outline: none; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 14px; color: white; background: var(--jade); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.game-shell { width: min(1100px, 100%); height: 100%; margin: 0 auto; display: grid; grid-template-rows: auto auto minmax(0,1fr); gap: 8px; }
.hud {
  display: grid;
  gap: 8px;
  padding: 9px 11px;
  border: 2px solid var(--ink-3);
  border-radius: 13px;
  background: var(--ink-2);
}
.hud-overview { display: flex; align-items: center; gap: 18px; }
.brand { flex: 0 0 auto; color: var(--gold); font-size: 20px; font-weight: 800; line-height: 1.1; }
.brand span { color: var(--paper); font-family: var(--font-hanzi); }
.brand small { display: block; margin-top: 4px; color: var(--silver); font: 11px system-ui; letter-spacing: .08em; text-transform: uppercase; }
.hud-status { display: grid; flex: 1; min-width: 0; grid-template-columns: repeat(6,minmax(0,1fr)); align-items: center; gap: 7px 12px; }
.hud-stat { display: grid; min-width: 0; gap: 1px; font: 12px system-ui; }
.hud-stat span { color: var(--silver); }
.hud-stat b { overflow: hidden; color: var(--paper); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.hud-stat.hp, .hud-stat.xp { grid-column: span 2; grid-template-columns: minmax(70px,1fr) max-content; align-items: center; column-gap: 9px; }
.hud-stat.hp span, .hud-stat.xp span { grid-column: 1 / -1; }
.hud-stat.hp b, .hud-stat.xp b { overflow: visible; font-size: 12px; }
.hud-stat.hp i, .hud-stat.xp i { width: 100%; min-width: 0; height: 11px; overflow: hidden; border-radius: 8px; background: #101720; }
.hud-stat.hp em, .hud-stat.xp em { display: block; height: 100%; transition: width .2s; }
.hud-stat.hp em { background: var(--jade); }
.hud-stat.xp em { background: var(--gold); }
.hud-button, .secondary, .primary {
  padding: 9px 14px;
  color: var(--ink);
  border: 0;
  border-radius: 10px;
  background: var(--paper);
  font-weight: 800;
  box-shadow: 0 3px 0 var(--line);
}
.hud-actions { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 6px; padding-top: 7px; border-top: 1px solid var(--ink-3); }
.hud-button { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 6px 8px; text-decoration: none; box-shadow: none; }
.hud-button svg { display: block; width: 27px; height: 27px; flex: 0 0 auto; padding: 4px; color: var(--paper); border-radius: 7px; background: var(--jade); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.hud-button.utility { color: var(--paper); background: var(--ink-3); }
.hud-button.utility svg { color: var(--gold); background: transparent; }
.hud-button .sound-slash { opacity: 0; }
.hud-button[aria-pressed="false"] .sound-waves { opacity: 0; }
.hud-button[aria-pressed="false"] .sound-slash { opacity: 1; }
.primary { color: white; background: var(--jade); box-shadow: 0 3px 0 #1e684c; }
.secondary { background: var(--paper-2); }
.objective {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 11px;
  background: var(--paper);
  font: 14px system-ui;
}
.objective b { color: #aa3020; }
.objective small { margin-left: auto; color: #526171; }
.objective small.warning { color: #aa3020; font-weight: 800; }
.boot-loading { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: clamp(4px,2vh,24px); overflow: hidden; padding: 20px; color: #f5ebcf; background: radial-gradient(ellipse at 50% 30%,#263e48 0,#142434 42%,#0b1423 80%); text-align: center; }
.boot-loading-scene { position: relative; width: min(420px,70vw); height: min(48vh,430px); min-height: 220px; overflow: hidden; border: 2px solid #a2874f; border-radius: 48% 48% 18px 18px / 28% 28% 18px 18px; background: radial-gradient(circle at 52% 20%,#64786d,#263d42 55%,#142531); box-shadow: 0 22px 45px #070d18, inset 0 0 35px #0a1722; }
.boot-loading-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 27%,#e2be704a,transparent 48%); }
.boot-loading-hero { position: absolute; inset: -5% -5% auto; width: 110%; height: 110%; object-fit: cover; opacity: 0; mask-image: radial-gradient(ellipse 62% 69% at 50% 48%,#000 59%,transparent 100%); }
.boot-loading-hero.ready { opacity: 1; animation: hero-walk 1.1s ease-in-out infinite alternate; }
.boot-loading-path { position: absolute; inset: auto 0 0; height: 13%; background: linear-gradient(0deg,#132734,#263b3a00); }
.boot-loading-copy { position: relative; max-width: 520px; text-shadow: 0 3px 12px #071019; }
.boot-loading-mark { color: #e6be68; font: 400 clamp(34px,6vw,58px)/1 var(--font-hanzi); }
.boot-loading-copy h1 { margin: 4px 0 8px; font: 900 clamp(31px,5vw,52px)/1 var(--font-ui); letter-spacing: -.035em; }
.boot-loading-copy p { margin: 0 0 16px; color: #f0dfb9; font: 700 clamp(15px,2vw,19px)/1.4 var(--font-ui); }
.boot-loading-track { width: min(250px,60vw); height: 5px; margin: 0 auto; overflow: hidden; border-radius: 8px; background: #53616a; }
.boot-loading-track i { display: block; width: 34%; height: 100%; border-radius: inherit; background: #e6be68; animation: loading-track 1.6s ease-in-out infinite alternate; }
@keyframes hero-walk { from { transform: translate(-7px,2px) rotate(-1deg); } to { transform: translate(7px,-3px) rotate(1deg); } }
@keyframes loading-track { from { transform: translateX(0); } to { transform: translateX(195%); } }
.prologue-root { position: fixed; inset: 0; z-index: 100; color: #f5ebcf; background: #111a2a; }
.phone-notice-screen { display: grid; min-height: 100dvh; place-items: center; overflow-y: auto; padding: 24px; background: radial-gradient(circle at 50% 25%,#294248,#111a2a 72%); }
.phone-notice-card { width: min(100%,460px); padding: clamp(24px,7vw,38px); border: 2px solid #d8b966; border-radius: 16px; background: #193039; box-shadow: 0 20px 55px #070d18; text-align: center; }
.phone-notice-mark { display: block; margin-bottom: 8px; color: #e5b947; font: 400 44px/1 var(--font-hanzi); }
.phone-notice-card h1 { margin: 0 0 15px; color: #fff5d8; font: 900 clamp(26px,7vw,34px)/1.13 var(--font-ui); }
.phone-notice-card p { margin: 0 0 25px; color: #f5ebcf; font: 650 17px/1.5 var(--font-ui); }
.phone-notice-card button { width: 100%; }
.prologue-screen { position: relative; display: grid; width: 100%; height: 100%; min-height: 100dvh; overflow: hidden; isolation: isolate; background: #111a2a var(--prologue-image) var(--prologue-position,center) / cover no-repeat; }
.prologue-screen::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(8,14,25,.91) 0,rgba(8,14,25,.7) 33%,rgba(8,14,25,.08) 68%),linear-gradient(0deg,rgba(8,14,25,.74),transparent 54%); }
.prologue-screen::after { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: inset 0 0 110px 22px rgba(5,9,16,.8); pointer-events: none; }
.prologue-vignette { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 66% 40%,transparent 0 30%,rgba(8,14,25,.18) 68%,rgba(8,14,25,.62)); animation: prologue-breathe 9s ease-in-out infinite alternate; }
.prologue-title-lockup { align-self: center; justify-self: start; width: min(680px,78vw); margin-left: clamp(28px,7vw,110px); padding-bottom: 6vh; text-shadow: 0 4px 20px rgba(0,0,0,.7); }
.prologue-title-lockup p { margin: 0 0 -12px; color: #e5b947; font: 400 clamp(58px,11vw,138px)/1 var(--font-hanzi); }
.prologue-title-lockup h1 { max-width: 9ch; margin: 0; font: 900 clamp(48px,8vw,104px)/.88 var(--font-ui); letter-spacing: -.045em; }
.prologue-title-lockup span { display: block; max-width: 34ch; margin-top: 22px; color: #f5ebcf; font: 700 clamp(17px,2.1vw,26px)/1.35 var(--font-ui); }
.prologue-actions { position: absolute; right: clamp(20px,4vw,60px); bottom: clamp(20px,4vw,48px); display: flex; align-items: center; gap: 12px; }
.prologue-begin, .prologue-next { min-height: 52px; padding: 13px 23px; color: #111a2a; border: 2px solid #f5ebcf; border-radius: 8px; background: #e5b947; font: 900 17px var(--font-ui); box-shadow: 0 5px 0 #8f6420; }
.prologue-back { min-height: 48px; padding: 11px 16px; color: #f5ebcf; border: 1px solid rgba(245,235,207,.64); border-radius: 8px; background: rgba(17,26,42,.72); font: 800 14px var(--font-ui); backdrop-filter: blur(8px); }
.prologue-skip { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 12px; color: #e6dcc6; font: 650 13px var(--font-ui); text-decoration: underline; text-underline-offset: 3px; text-shadow: 0 1px 7px #07101b; }
.prologue-skip:hover { color: white; }
.prologue-screen > .prologue-skip { position: absolute; top: clamp(16px,3vw,32px); right: clamp(16px,3vw,38px); }
.prologue-story { align-self: end; width: min(620px,77vw); margin: 0 0 clamp(34px,7vh,80px) clamp(24px,7vw,105px); text-shadow: 0 2px 12px rgba(0,0,0,.72); animation: prologue-story-in .52s cubic-bezier(.2,.75,.25,1) both; }
.prologue-story h1 { max-width: 15ch; margin: 14px 0 13px; color: white; font: 900 clamp(34px,5.4vw,72px)/.98 var(--font-ui); letter-spacing: -.035em; }
.prologue-story p { max-width: 56ch; margin: 0; color: #f5ebcf; font: 650 clamp(17px,2vw,24px)/1.5 var(--font-ui); }
.prologue-story h1.typing::after, .prologue-story p.typing::after { content: ''; display: inline-block; width: .52em; height: 1.05em; margin-left: .12em; vertical-align: -.12em; background: #e5b947; animation: prologue-caret .72s steps(1,end) infinite; }
.prologue-progress { display: flex; gap: 7px; }
.prologue-progress i { width: 30px; height: 5px; border-radius: 9px; background: rgba(245,235,207,.34); }
.prologue-progress i.done { background: #36a47a; }
.prologue-progress i.current { width: 54px; background: #e5b947; }
.prologue-controls { display: flex; align-items: center; gap: 11px; margin-top: 25px; }
.prologue-begin:focus-visible, .prologue-next:focus-visible, .prologue-skip:focus-visible, .prologue-back:focus-visible { outline: 4px solid white; outline-offset: 3px; }
@keyframes prologue-story-in { from { opacity: 0; transform: translateY(18px); } }
@keyframes prologue-breathe { to { opacity: .72; transform: scale(1.015); } }
@keyframes prologue-caret { 50% { opacity: 0; } }
@media (max-width: 640px) {
  body { height: auto; min-height: 100dvh; overflow: auto; padding: 7px; }
  .game-shell { min-height: calc(100dvh - 14px); }
  .hud-overview { align-items: flex-start; flex-direction: column; gap: 7px; }
  .hud-status { width: 100%; grid-template-columns: repeat(3,minmax(0,1fr)); }
  .hud-stat.hp, .hud-stat.xp { grid-column: span 3; }
  .hud-actions { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .hud-button { gap: 4px; font-size: 11px; }
  .hud-button svg { width: 24px; height: 24px; }
  .objective { align-items: flex-start; flex-wrap: wrap; }
  .objective small { width: 100%; margin-left: 0; }
  .prologue-screen { background-position: 62% center; }
  .prologue-screen::before { background: linear-gradient(0deg,rgba(8,14,25,.96) 0,rgba(8,14,25,.7) 50%,rgba(8,14,25,.08) 82%); }
  .prologue-title-lockup { align-self: end; width: auto; margin: 0 24px 150px; padding: 0; }
  .prologue-title-lockup h1 { font-size: clamp(48px,15vw,76px); }
  .prologue-title-lockup p { font-size: 68px; }
  .prologue-actions { left: 20px; right: 20px; flex-direction: column; align-items: stretch; }
  .prologue-story { width: auto; margin: 0 22px 30px; }
  .prologue-story h1 { font-size: 37px; }
  .prologue-story p { font-size: 17px; line-height: 1.45; }
  .prologue-screen > .prologue-skip { top: 14px; right: 14px; }
}
@media (min-width: 641px) and (max-width: 850px) {
  .hud-overview { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hud-status { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-loading-hero.ready, .boot-loading-track i, .prologue-vignette, .prologue-story, .prologue-story h1.typing::after, .prologue-story p.typing::after { animation: none; }
}