/* Havenmoor UI design system (v2.30): FF7-style windows with a modern finish.
   Deep navy-to-black glass panels with a thin light bevel, white text, steel labels, cyan/teal accents; gold only as a tiny accent.
   Everything is sized in rem so the Options "UI scale" (html font-size) scales the whole interface. */
:root {
  --void: #04070f;
  --panel-top: rgba(16, 28, 64, .94); --panel-bot: rgba(2, 6, 22, .97);
  --panel-top-2: rgba(10, 18, 44, .9); --panel-bot-2: rgba(2, 5, 18, .96);
  --edge: rgba(214, 226, 250, .6); --edge-dim: rgba(190, 210, 250, .3);
  --bevel-hi: rgba(255, 255, 255, .14); --bevel-lo: rgba(0, 0, 0, .55);
  --accent: #7fd8ff; --accent-2: #3ee0c6; --accent-dim: rgba(127, 216, 255, .16); --accent-line: rgba(127, 216, 255, .55);
  --ink: #f2f6ff; --ink-dim: #b9c6e4; --muted: var(--ink-dim); --dim: #8e9cbf;
  --gold: #e8c060; --gold-hi: #ffe39a;
  --hp: #3ee0c6; --hp-2: #3ad66f; --mp: #7fd8ff; --mp-2: #3a6cff; --xp: #c7a4ff; --xp-2: #8a5cff;
  --danger: #ff5d5d; --warn: #ffb648; --good: #6ee7a0; --cursor: var(--accent);
  --track: #050a18; --line: rgba(190, 210, 250, .16); --well: rgba(3, 7, 20, .55);
  --r0: #c8ccd8; --r1: #6ee06e; --r2: #5aa8ff; --r3: #c07aff; --r4: #ffb43a;
  --hand: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='%23ffffff' stroke='%230a1020' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M1.2 5.2h3.6v8H1.2z'/%3E%3Cpath d='M4.8 5.4c0-1 .7-1.7 1.7-1.7h2.3c.6 0 1.1.3 1.4.8h9.4c1 0 1.7.7 1.7 1.6s-.7 1.6-1.7 1.6h-2.3c.9.2 1.4.8 1.4 1.5 0 .9-.7 1.5-1.6 1.5h-.8c.5.3.8.8.8 1.4 0 .9-.7 1.5-1.6 1.5H8.4c-2 0-3.6-1.5-3.6-3.4z'/%3E%3Cpath d='M9.2 4.4V2.2c0-.8.6-1.4 1.3-1.4s1.3.6 1.3 1.4v2.2'/%3E%3C/g%3E%3Cpath d='M8.6 9.6h8M8.9 12.5h6.4' stroke='%23b9c6e4' stroke-width='.9' fill='none' opacity='.7'/%3E%3C/svg%3E");
  /* type system: pixel face only for the world canvas; Cinzel for the logo wordmark; Inter everywhere in the UI */
  --f-display: "Cinzel", Georgia, serif;
  --f-ui: "Inter", "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-body: var(--f-ui);
  --t-xs: .75rem; --t-sm: .875rem; --t-base: .9375rem; --t-md: 1rem; --t-lg: 1.25rem; --t-xl: 1.75rem; --t-2xl: 2.5rem; --t-micro: .66rem;
  --lh: 1.5; --lh-tight: 1.25;
  --shadow-txt: 0 1px 2px rgba(0, 0, 0, .8);
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bevel: inset 0 1px 0 var(--bevel-hi), inset 1px 0 0 var(--bevel-hi), inset 0 -1px 0 var(--bevel-lo), inset -1px 0 0 var(--bevel-lo);
  --glow: 0 0 0 1px rgba(127, 216, 255, .35), 0 0 14px rgba(127, 216, 255, .22);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 16px; height: 100%; }
html, body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body { height: 100%; margin: 0; background: var(--void); color: var(--ink); font-family: var(--f-body); font-size: var(--t-md); line-height: var(--lh); letter-spacing: .005em; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; text-shadow: var(--shadow-txt); -webkit-font-smoothing: antialiased; }
#cv { touch-action: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; position: fixed; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; background: var(--void); }
button { font: inherit; color: inherit; text-shadow: inherit; }
input { font: inherit; }
canvas, img { image-rendering: pixelated; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num, .clock, #hGold, .badge, .mgold, .st .v, .setrow .val, .cmp .r, .dprice, .prow, .qp, .ql, .bar .num, #hud .lv { font-variant-numeric: tabular-nums; }
b, strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- windows ---------- */
.win, .ff {
  position: relative;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bot));
  border: 1px solid var(--edge); border-radius: 3px;
  box-shadow: var(--bevel), 0 10px 26px rgba(0, 0, 0, .5);
}
.win:focus-within, .ff.active, #bCmdWin:focus-within, #bFoes:focus-within { box-shadow: var(--bevel), var(--glow), 0 10px 26px rgba(0, 0, 0, .5); }
.parch { color: var(--ink); background: linear-gradient(180deg, var(--panel-top-2), var(--panel-bot-2)); border: 1px solid var(--edge-dim); border-radius: 3px; box-shadow: var(--bevel), 0 4px 12px rgba(0, 0, 0, .4); }
.well { background: var(--well); border: 1px solid var(--line); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), inset 0 2px 6px rgba(0, 0, 0, .35); }
.eyebrow, .micro { font-family: var(--f-ui); font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0; line-height: 1.3; }

/* ---------- buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; cursor: pointer;
  padding: .3rem .8rem; min-height: 2.25rem; border-radius: 3px; color: var(--ink); font-weight: 600; font-size: var(--t-base); line-height: 1.2;
  background: linear-gradient(180deg, rgba(22, 36, 78, .8), rgba(6, 12, 32, .9)); border: 1px solid var(--edge-dim);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform .08s, border-color .12s, box-shadow .12s, background .12s;
}
.btn:hover:not(:disabled) { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--glow); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--glow); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: linear-gradient(180deg, #9ee6ff, #3ee0c6); color: #04111c; text-shadow: none; border-color: #bff0ff; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 14px rgba(127, 216, 255, .3); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 20px rgba(127, 216, 255, .5); }
.btn.danger { border-color: rgba(255, 93, 93, .6); color: #ffb8b8; }
.btn.sm { min-height: 1.9rem; padding: .1rem .6rem; font-size: var(--t-sm); }
.btn.off .ui { opacity: .45; }
.ibtn .ui { width: 1.35rem; height: 1.35rem; flex: none; }
.ui { image-rendering: pixelated; }
.badge { font-weight: 800; font-size: var(--t-xs); line-height: 1; background: var(--accent); color: #04111c; border-radius: 2px; padding: .18rem .4rem; text-shadow: none; }
.pill { font-size: var(--t-xs); font-weight: 600; padding: .05rem .55rem; border-radius: 2px; border: 1px solid currentColor; white-space: nowrap; }
.pill.ok { color: var(--good); } .pill.go { color: var(--accent); } .pill.lock { color: var(--dim); }

/* ---------- HUD ---------- */
#hud { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: .6rem; width: 18rem; max-width: calc(100vw - 1.2rem); padding: .65rem .8rem .6rem; display: grid; gap: .3rem; z-index: 5; }
.hudtop { display: flex; gap: .6rem; align-items: center; margin-bottom: .15rem; }
#hPortrait { width: 3.1rem; height: 3.1rem; flex: none; border: 1px solid var(--edge); border-radius: 2px; background: #060c22; box-shadow: var(--bevel), 0 2px 4px rgba(0, 0, 0, .5); }
.hudname { min-width: 0; flex: 1; }
#hud .nm { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
#hud .nm b { font-weight: 700; font-size: var(--t-lg); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: #fff; }
#hud .lv { font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; flex: none; }
#hud .sub { font-size: var(--t-sm); color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { display: grid; grid-template-columns: 1.7rem 1fr 4.6rem; align-items: center; gap: .45rem; font-size: var(--t-sm); font-weight: 600; }
.bar .num { text-align: right; white-space: nowrap; color: #fff; }
.bar i { display: block; height: .45rem; background: var(--track); border: 1px solid rgba(0, 0, 0, .7); border-radius: 1px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05); }
.bar i s { display: block; height: 100%; text-decoration: none; transition: width .35s var(--ease); position: relative; }
.bar .hp s { background: linear-gradient(90deg, var(--hp-2), var(--hp)); box-shadow: 0 0 6px rgba(62, 224, 198, .55); }
.bar .mp s { background: linear-gradient(90deg, var(--mp-2), var(--mp)); box-shadow: 0 0 6px rgba(127, 216, 255, .55); }
.bar .xp s { background: linear-gradient(90deg, var(--xp-2), var(--xp)); box-shadow: 0 0 6px rgba(199, 164, 255, .45); }
.bar span:first-child { font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; color: var(--ink-dim); }
#hud.low .bar .hp s { background: linear-gradient(90deg, #ff4d3d, var(--warn)); box-shadow: 0 0 8px rgba(255, 120, 60, .7); animation: lowhp .8s infinite alternate; }
@keyframes lowhp { to { filter: brightness(1.5); } }
.hudfoot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem .5rem; font-size: var(--t-sm); font-weight: 600; align-items: center; margin-top: .1rem; }
#hGold { color: #fff; display: inline-flex; gap: .3rem; align-items: center; white-space: nowrap; }
#hGold .ico { width: 1.1rem; height: 1.1rem; }
.clock { color: var(--ink-dim); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-xs); text-transform: uppercase; }
.ico { width: 1.1rem; height: 1.1rem; image-rendering: pixelated; vertical-align: -.2rem; }
.ico.big { width: 2rem; height: 2rem; flex: none; }

/* ---------- top-right cluster ---------- */
#tr { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .6rem); right: .6rem; display: grid; justify-items: end; gap: .5rem; z-index: 5; }
#tbtns { display: flex; gap: .3rem; padding: .35rem; }
#tbtns .btn { padding: .2rem .55rem; font-size: var(--t-sm); min-height: 2.1rem; }
#miniWrap { padding: .4rem; display: grid; gap: .25rem; }
#mini { display: block; width: 11rem; height: auto; border-radius: 1px; border: 1px solid var(--edge-dim); background: #000; }
.minifoot { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--t-micro); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.netdot::before { content: "●"; margin-right: .25rem; }
.netdot.online { color: var(--accent-2); } .netdot.connecting { color: var(--warn); } .netdot.offline { color: var(--dim); }

/* quest tracker */
#tracker { width: 13rem; padding: .5rem .65rem .55rem; text-align: left; display: grid; gap: .25rem; cursor: pointer; color: inherit; transition: transform .12s, filter .12s, border-color .12s; animation: winin .16s var(--ease); }
#tracker:hover { border-color: var(--accent); } #tracker:active { transform: translateY(1px); }
#tracker:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#tracker .tk-h { display: flex; align-items: center; gap: .35rem; font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
#tracker .tk-h .ui { width: 1rem; height: 1rem; }
#tracker .tk-n { font-weight: 700; font-size: var(--t-base); line-height: 1.25; color: #fff; }
#tracker .tk-o { font-size: var(--t-sm); color: var(--ink-dim); line-height: 1.35; }
#tracker.ready .tk-o { color: var(--good); }
.pbar { display: block; height: .4rem; border-radius: 1px; background: var(--track); border: 1px solid rgba(0, 0, 0, .7); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .05); }
.pbar s { display: block; height: 100%; text-decoration: none; background: linear-gradient(90deg, var(--mp-2), var(--accent)); box-shadow: 0 0 6px rgba(127, 216, 255, .5); transition: width .4s var(--ease); }
.pbar.done s { background: linear-gradient(90deg, var(--hp-2), var(--hp)); box-shadow: 0 0 6px rgba(62, 224, 198, .5); }
@keyframes winin { from { opacity: 0; transform: translateY(6px); } }
@keyframes pop { from { opacity: 0; transform: scale(.96); } }

/* ---------- chat ---------- */
#chat { position: fixed; left: .6rem; bottom: calc(env(safe-area-inset-bottom, 0px) + .6rem); width: min(25rem, calc(100vw - 1.2rem)); z-index: 5; display: grid; grid-template-rows: auto 1fr auto; max-height: 17rem; background: linear-gradient(180deg, var(--panel-top-2), var(--panel-bot-2)); border-color: var(--edge-dim); }
#chatHead { display: flex; justify-content: space-between; align-items: center; padding: .4rem .65rem .1rem; }
#chatLog { overflow-y: auto; padding: .1rem .7rem .4rem; font-size: var(--t-sm); line-height: 1.45; min-height: 3.5rem; max-height: 11.5rem; -webkit-user-select: text; user-select: text; overflow-wrap: anywhere; scrollbar-width: thin; scrollbar-color: rgba(127, 216, 255, .35) transparent; color: var(--ink-dim); }
#chatLog p { margin: .18rem 0; }
#chatLog .who { color: var(--accent); font-weight: 700; }
#chatLog .sys { color: var(--dim); font-style: italic; }
#chatLog .news { color: var(--accent-2); }
#chatLog .old { opacity: .75; }
#chatForm { display: flex; gap: .4rem; padding: 0 .5rem .5rem; }
#chatIn { flex: 1; min-width: 0; background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .4rem .6rem; font-size: var(--t-base); }
#chatIn::placeholder, #heroName::placeholder { color: var(--dim); opacity: 1; }
#chatIn:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
#chat.collapsed { grid-template-rows: auto; }
#chat.collapsed #chatLog, #chat.collapsed #chatForm { display: none; }
#chatToggle { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .15rem .4rem; }
#chatToggle:hover { color: var(--accent); }

/* ---------- dialog ---------- */
#dialog { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem); width: min(45rem, calc(100vw - 1.2rem)); padding: 1rem 1.2rem 1.1rem; z-index: 30; cursor: pointer; min-height: 6.5rem; transform: translateX(-50%); animation: dlgin .16s var(--ease); box-shadow: var(--bevel), var(--glow), 0 10px 26px rgba(0, 0, 0, .5); }
@keyframes dlgin { from { opacity: 0; transform: translate(-50%, 10px); } }
.dlgrow { display: flex; gap: .9rem; align-items: flex-start; }
.pframe { position: relative; flex: none; padding: 2px; background: linear-gradient(180deg, rgba(40, 60, 120, .9), rgba(6, 12, 34, .95)); border: 1px solid var(--edge); border-radius: 2px; box-shadow: var(--bevel), 0 3px 8px rgba(0, 0, 0, .55); }
.pframe canvas { display: block; width: 5.2rem; height: 5.2rem; border-radius: 1px; background: #070e2a; box-shadow: inset 0 0 0 1px #000; }
.dlgbody { min-width: 0; flex: 1; }
#dlgWho { position: absolute; left: .9rem; top: -.9rem; display: inline-block; font-weight: 700; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: linear-gradient(180deg, #0f1c44, #06102c); padding: .22rem .7rem; border: 1px solid var(--accent-line); border-radius: 2px; line-height: 1.3; text-shadow: none; box-shadow: 0 0 10px rgba(127, 216, 255, .25), 0 2px 6px rgba(0, 0, 0, .5); }
#dlgWho:empty { display: none; }
#dlgText { font-size: 1.125rem; min-height: 3.4rem; white-space: pre-wrap; line-height: 1.55; letter-spacing: .01em; color: #fff; }
#dlgItems { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
#dlgItems:empty { display: none; }
#dlgItems .ico.big { padding: 2px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: 2px; }
#dlgOpts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
#dlgOpts .btn { padding: .4rem 1.1rem; font-size: var(--t-md); min-height: 2.5rem; }
#dlgOpts .btn:focus-visible::before { content: ""; width: 1.1rem; height: .75rem; background: var(--hand) center / contain no-repeat; }
#dlgMore { position: absolute; right: 1rem; bottom: .5rem; color: var(--accent); font-size: .7rem; filter: drop-shadow(0 0 4px rgba(127, 216, 255, .8)); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
@keyframes bob { to { transform: translateY(3px); } }

/* ---------- modal shell ---------- */
#scrim { position: fixed; inset: 0; z-index: 24; background: radial-gradient(ellipse at center, rgba(2, 5, 18, .5), rgba(2, 5, 18, .82)); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade .16s ease-out; }
#scrim.out { animation: fadeout .14s ease-in forwards; }
@keyframes fade { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
#modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(58rem, calc(100vw - 1.2rem)); height: min(44rem, calc(100vh - 1.2rem)); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; z-index: 25; animation: modin .16s var(--ease); overflow: hidden; box-shadow: var(--bevel), var(--glow), 0 20px 50px rgba(0, 0, 0, .6); }
#modal.out { animation: modout .14s ease-in forwards; }
@keyframes modin { from { opacity: 0; transform: translate(-50%, -49%) scale(.985); } }
@keyframes modout { to { opacity: 0; transform: translate(-50%, -49%) scale(.99); } }
#mHead { min-width: 0; display: flex; gap: .1rem; padding: .5rem .6rem 0; align-items: flex-end; border-bottom: 1px solid var(--edge-dim); background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent); }
#mHead .eyebrow { align-self: center; margin: 0 .5rem 0 .3rem; }
.tab { border-radius: 2px 2px 0 0; border: 1px solid transparent; border-bottom: none; min-height: 2.5rem; padding: .25rem .7rem; font-size: var(--t-base); background: none; box-shadow: none; margin-bottom: -1px; color: var(--ink-dim); position: relative; }
.tab::after { content: ""; position: absolute; left: .4rem; right: .4rem; bottom: 0; height: 2px; background: transparent; transition: background .12s; }
.tab:hover:not(:disabled) { border-color: transparent; box-shadow: none; color: #fff; background: rgba(127, 216, 255, .06); }
.tab .ui { width: 1.3rem; height: 1.3rem; }
.tab .k { font-weight: 700; font-size: var(--t-micro); color: var(--dim); border: 1px solid var(--line); border-radius: 2px; padding: 0 .3rem; line-height: 1.4; }
.tab[aria-selected="true"] { color: #fff; background: linear-gradient(180deg, rgba(127, 216, 255, .14), rgba(127, 216, 255, .04)); border-color: var(--edge-dim); border-bottom-color: transparent; padding-bottom: .4rem; }
.tab[aria-selected="true"]::after { background: var(--accent); box-shadow: 0 0 8px rgba(127, 216, 255, .7); }
#mHead .sp { flex: 1; }
#mClose { align-self: center; margin-bottom: .3rem; }
#mBody { overflow-y: auto; overflow-x: hidden; padding: .9rem 1.1rem 1.1rem; min-height: 0; scrollbar-width: thin; scrollbar-color: rgba(127, 216, 255, .35) transparent; }
#mFoot { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: .3rem .9rem; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-dim); background: rgba(0, 0, 0, .3); }
#mFoot kbd, .help kbd { font-family: var(--f-ui); font-weight: 600; border: 1px solid var(--edge-dim); border-bottom-width: 2px; border-radius: 2px; padding: 0 .35rem; color: var(--ink); font-size: var(--t-xs); background: rgba(0, 0, 0, .3); }
#mFoot .gold-t { font-size: var(--t-base); font-weight: 700; }
#mBody h3 { font-family: var(--f-ui); font-size: var(--t-micro); letter-spacing: .14em; color: var(--accent); margin: 1.25rem 0 .6rem; font-weight: 700; line-height: 1.3; text-transform: uppercase; display: flex; align-items: center; gap: .6rem; }
#mBody h3::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent-line), transparent); }
#mBody h3:first-child { margin-top: 0; }
.empty { color: var(--ink-dim); font-style: italic; margin: .3rem 0; font-size: var(--t-base); }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gold-t { color: #fff; display: inline-flex; align-items: center; gap: .3rem; }

/* ---------- item slots ---------- */
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, 3.6rem); gap: .4rem; justify-content: start; }
.slot {
  --rc: var(--r0); position: relative; width: 3.6rem; height: 3.6rem; padding: 0; display: grid; place-items: center; cursor: pointer; border-radius: 2px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--rc) 14%, #0a1230), #050a1e 75%);
  border: 1px solid color-mix(in srgb, var(--rc) 55%, #0a1020); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .7), inset 0 0 10px color-mix(in srgb, var(--rc) 22%, transparent), 0 1px 0 rgba(0, 0, 0, .5);
  transition: transform .1s, box-shadow .12s, border-color .12s;
}
.slot img { width: 2.5rem; height: 2.5rem; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.slot:hover { transform: translateY(-2px); border-color: var(--rc); }
.slot.sel, .slot:focus-visible { border-color: var(--accent); outline: none; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px var(--accent), 0 0 14px rgba(127, 216, 255, .5); z-index: 1; }
.slot.empty { cursor: default; background: rgba(0, 0, 0, .3); border: 1px dashed var(--line); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5); }
.slot.empty:hover { transform: none; }
.slot .cnt { position: absolute; right: .2rem; bottom: .05rem; font-weight: 800; font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: #fff; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.slot .rmk { position: absolute; left: .15rem; top: .1rem; font-size: var(--t-xs); color: var(--good); text-shadow: 1px 1px 0 #000; }
.slot[data-rar="4"] { animation: legend 2s infinite alternate; }
@keyframes legend { to { box-shadow: inset 0 0 0 1px #000, inset 0 0 14px color-mix(in srgb, var(--rc) 55%, transparent), 0 0 10px color-mix(in srgb, var(--rc) 50%, transparent); } }
.slot.locked { opacity: .5; }

.subtabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .7rem; }
.subtabs .btn { min-height: 1.9rem; }
.subtabs .btn[aria-selected="true"] { border-color: var(--accent); color: #fff; background: linear-gradient(180deg, rgba(127, 216, 255, .22), rgba(127, 216, 255, .08)); }
.subtabs .n { font-weight: 700; font-size: var(--t-xs); color: var(--dim); font-variant-numeric: tabular-nums; }
.invlayout { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 1rem; align-items: start; }
.detail { padding: .8rem; display: grid; gap: .55rem; align-content: start; min-height: 13rem; position: sticky; top: 0; }
.detail .dh { display: flex; gap: .65rem; align-items: center; }
.detail .dh .slot { flex: none; cursor: default; } .detail .dh .slot:hover { transform: none; }
.dname { font-weight: 700; font-size: var(--t-lg); line-height: 1.2; color: var(--rc, var(--ink)); }
.dtag { font-size: var(--t-sm); color: var(--ink-dim); }
.dtext { font-size: var(--t-base); line-height: 1.5; color: #dbe3f7; }
.dprice { font-size: var(--t-sm); color: var(--ink-dim); display: flex; gap: .8rem; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { font-size: var(--t-sm); padding: .08rem .5rem; border-radius: 2px; background: rgba(0, 0, 0, .35); border: 1px solid var(--line); }
.chip b { color: var(--accent); font-weight: 600; }
.dacts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
.cmp { display: grid; gap: .2rem; font-size: var(--t-sm); border-top: 1px solid var(--line); padding-top: .45rem; }
.cmp .hd { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.cmp .r { display: grid; grid-template-columns: 3rem 1fr auto; gap: .4rem; align-items: baseline; }
.cmp .r span:first-child { color: var(--ink-dim); font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; }
.up { color: var(--good); } .dn { color: var(--danger); } .eq { color: var(--ink-dim); }

/* tooltip */
#tip { position: fixed; z-index: 60; width: 17rem; padding: .7rem .8rem; pointer-events: none; display: grid; gap: .35rem; animation: fade .12s; font-size: var(--t-base); line-height: 1.45; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rr { color: var(--rc); }

/* ---------- equipment / paper doll ---------- */
.doll { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) 5.2rem; gap: .4rem; align-items: center; padding: .8rem .6rem; background: radial-gradient(ellipse at 50% 60%, rgba(127, 216, 255, .12), transparent 65%), linear-gradient(180deg, rgba(3, 7, 20, .55), rgba(3, 7, 20, .3)); }
.doll .col { display: grid; gap: .8rem; justify-items: center; }
.eqslot { display: grid; gap: .15rem; justify-items: center; width: 100%; }
.eqslot .slot { width: 3.8rem; height: 3.8rem; }
.eqslot .slot.blank img { opacity: .28; filter: grayscale(1); }
.eqslot .lbl { font-weight: 700; font-size: var(--t-micro); color: var(--ink-dim); letter-spacing: .12em; text-transform: uppercase; }
.eqslot .slot.tgt { border-color: var(--accent); animation: tgt .7s infinite alternate; }
@keyframes tgt { to { box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(127, 216, 255, .7); } }
.figure { display: grid; justify-items: center; gap: .3rem; position: relative; }
.figure canvas { width: 9rem; height: 13.5rem; max-width: 100%; position: relative; z-index: 1; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); animation: idle 3s ease-in-out infinite alternate; }
@keyframes idle { to { transform: translateY(-3px); } }
.figure::after { content: ""; position: absolute; bottom: 1.5rem; width: 7.5rem; height: 1.6rem; border-radius: 50%; background: radial-gradient(ellipse, rgba(127, 216, 255, .35), transparent 70%); border: 1px solid rgba(127, 216, 255, .25); }
.figure .fn { font-weight: 700; font-size: var(--t-lg); text-align: center; position: relative; z-index: 1; color: #fff; }
.figure .fs { font-size: var(--t-sm); color: var(--ink-dim); text-align: center; position: relative; z-index: 1; }
.statlist { display: grid; gap: .25rem; }
.st { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: .5rem; align-items: center; padding: .3rem .55rem; border-radius: 2px; background: rgba(0, 0, 0, .28); font-size: var(--t-md); }
.st .k { font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.st .bar2 { height: .35rem; border-radius: 1px; background: var(--track); overflow: hidden; border: 1px solid rgba(0, 0, 0, .6); }
.st .bar2 s { display: block; height: 100%; background: linear-gradient(90deg, var(--mp-2), var(--accent)); box-shadow: 0 0 6px rgba(127, 216, 255, .5); text-decoration: none; transition: width .3s var(--ease); }
.st .v { font-weight: 700; min-width: 2.6ch; justify-content: flex-end; display: inline-flex; gap: .4rem; align-items: baseline; color: #fff; }
.st .arrow { font-size: var(--t-sm); animation: nudge .5s infinite alternate; }
@keyframes nudge { to { transform: translateY(-2px); } }
.st.chg { background: var(--accent-dim); }
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .3rem; margin-top: .5rem; }
.meta .st { grid-template-columns: 1fr auto; }
.meta .st .k { font-size: var(--t-sm); letter-spacing: 0; text-transform: none; font-weight: 600; }
.meta .st:last-child { grid-column: 1 / -1; }
.skills { display: grid; gap: .3rem; }
.skill { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .45rem .7rem; border-radius: 2px; background: rgba(0, 0, 0, .25); font-size: var(--t-base); }
.skill.locked { opacity: .72; }
.skill b { font-weight: 700; color: #fff; } .skill small { display: block; color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.4; }
.skill .acts { display: flex; gap: .4rem; align-items: center; }

/* ---------- shop ---------- */
.shoplist { display: grid; gap: .3rem; }
.srow { --rc: var(--r0); display: grid; grid-template-columns: 2.6rem 1fr auto; gap: .6rem; align-items: center; padding: .3rem .5rem; border-radius: 2px; background: rgba(0, 0, 0, .25); border: 1px solid transparent; border-left: 3px solid color-mix(in srgb, var(--rc) 60%, transparent); cursor: pointer; text-align: left; width: 100%; color: inherit; font-size: var(--t-base); transition: background .1s, border-color .1s; }
.srow:hover { background: rgba(127, 216, 255, .08); }
.srow.sel, .srow:focus-visible { border-color: var(--edge-dim); border-left-color: var(--accent); background: var(--accent-dim); outline: none; }
.srow .slot { width: 2.6rem; height: 2.6rem; pointer-events: none; } .srow .slot img { width: 1.9rem; height: 1.9rem; }
.srow .nm { font-weight: 700; color: var(--rc); line-height: 1.25; display: block; }
.srow small { color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.35; display: block; }
.srow.poor .pr { color: var(--danger); }
.srow.own small.own { color: var(--good); }
.mgold { display: inline-flex; gap: .3rem; align-items: center; font-weight: 700; font-size: var(--t-base); color: #fff; }

/* ---------- rows (online, generic) ---------- */
.rows { display: grid; gap: .3rem; }
.row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .5rem .7rem; border-radius: 2px; background: rgba(0, 0, 0, .25); font-size: var(--t-base); border-left: 3px solid transparent; }
.row .t { min-width: 0; display: flex; gap: .6rem; align-items: center; }
.row .t > div { min-width: 0; }
.row .t b { font-weight: 700; color: #fff; }
.row .t small { display: block; color: var(--ink-dim); font-size: var(--t-sm); }
.row .acts { display: flex; gap: .4rem; align-items: center; }
.row.me { border-left-color: var(--accent); background: var(--accent-dim); }
.done { opacity: .8; }

/* ---------- quest journal ---------- */
.qhead { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 .6rem; font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; color: var(--accent); text-transform: uppercase; }
.qhead:first-of-type { margin-top: 0; }
.qhead::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent-line), transparent); }
.qhead .n { color: var(--dim); }
.qlist { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.qcard { padding: .8rem .9rem .85rem; display: grid; gap: .45rem; align-content: start; }
.qcard.tracked { border-color: var(--accent-line); box-shadow: var(--bevel), inset 3px 0 0 var(--accent), var(--glow); }
.qcard .qt { display: flex; gap: .5rem; align-items: baseline; justify-content: space-between; }
.qcard .qn { font-weight: 700; font-size: var(--t-md); line-height: 1.25; color: #fff; }
.qcard .ql { font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.qcard .ql.hard { color: var(--danger); }
.qcard .qs { font-size: var(--t-base); line-height: 1.5; }
.qcard .qg { font-size: var(--t-sm); color: var(--ink-dim); }
.qcard .qp { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: var(--t-sm); font-weight: 600; }
.qcard .rw { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: var(--t-sm); color: var(--ink-dim); }
.qcard .rw .rc { display: inline-flex; align-items: center; gap: .2rem; padding: 0 .35rem 0 .15rem; border-radius: 2px; background: rgba(0, 0, 0, .3); border: 1px solid var(--line); color: var(--ink); }
.qcard .rw .ico { width: 1.15rem; height: 1.15rem; }
.qcard .btn.on { border-color: var(--accent); color: #fff; background: linear-gradient(180deg, rgba(127, 216, 255, .22), rgba(127, 216, 255, .08)); }
.qcard.doneq { opacity: .85; }

/* ---------- world map ---------- */
.maplayout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.mapframe { padding: .5rem; display: grid; gap: .4rem; }
.mapcanvas { position: relative; border-radius: 2px; overflow: hidden; border: 1px solid var(--edge-dim); background: #04061a; box-shadow: inset 0 0 20px #000; line-height: 0; }
.mapcanvas canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.mapcap { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--t-sm); color: var(--ink-dim); flex-wrap: wrap; }
.mapcap .lg { display: inline-flex; align-items: center; gap: .25rem; margin-right: .6rem; }
.mapcap .dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.realm { display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .6rem; align-items: center; padding: .5rem .6rem; border-radius: 2px; background: rgba(0, 0, 0, .28); border: 1px solid var(--line); border-left: 3px solid transparent; width: 100%; text-align: left; color: inherit; cursor: pointer; transition: background .1s, border-color .1s; }
.realm:hover:not(.locked) { background: rgba(127, 216, 255, .08); border-color: var(--edge-dim); }
.realm.sel { border-color: var(--edge-dim); border-left-color: var(--accent); background: var(--accent-dim); }
.realm.locked { cursor: default; opacity: .75; }
.realm .ri { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 2px; background: radial-gradient(circle, rgba(127, 216, 255, .18), rgba(0, 0, 0, .3)); border: 1px solid var(--edge-dim); }
.realm.locked .ri { background: rgba(0, 0, 0, .4); border-color: var(--line); filter: grayscale(1); }
.realm .ri img { width: 1.7rem; height: 1.7rem; }
.realm b { display: block; font-weight: 700; line-height: 1.25; color: #fff; } .realm small { color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.35; display: block; }
.realm.here { border-left-color: var(--accent-2); }
.realminfo { padding: .7rem .8rem; font-size: var(--t-base); line-height: 1.5; color: var(--ink-dim); margin-top: .5rem; }
.realminfo b { color: #fff; }

/* ---------- settings ---------- */
.setlist { display: grid; gap: .5rem; max-width: 34rem; }
.setrow { display: grid; grid-template-columns: 12rem 1fr 3.6rem; gap: .8rem; align-items: center; padding: .55rem .8rem; border-radius: 2px; background: rgba(0, 0, 0, .25); font-size: var(--t-base); }
.setrow label, .setrow .lb { font-weight: 700; color: #fff; }
.setrow small { display: block; font-weight: 400; color: var(--ink-dim); font-size: var(--t-xs); line-height: 1.35; margin-top: .1rem; }
.setrow .val { text-align: right; color: var(--accent); font-weight: 700; font-size: var(--t-base); }
.setrow.tg { grid-template-columns: 1fr auto; }
input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 1.4rem; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: .45rem; border-radius: 1px; background: linear-gradient(90deg, var(--accent) var(--p, 50%), var(--track) var(--p, 50%)); border: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 1px 2px #000; }
input[type=range]::-moz-range-track { height: .45rem; border-radius: 1px; background: var(--track); border: 1px solid rgba(0, 0, 0, .6); }
input[type=range]::-moz-range-progress { height: .45rem; border-radius: 1px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: .9rem; height: 1.3rem; margin-top: -.5rem; border-radius: 2px; background: linear-gradient(180deg, #fff, #c9d6f0); border: 1px solid #0a1020; box-shadow: 0 0 0 1px rgba(127, 216, 255, .5), 0 2px 4px rgba(0, 0, 0, .6); }
input[type=range]::-moz-range-thumb { width: .9rem; height: 1.3rem; border-radius: 2px; background: linear-gradient(180deg, #fff, #c9d6f0); border: 1px solid #0a1020; }
input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.sw { position: relative; width: 3.2rem; height: 1.6rem; border-radius: 2px; border: 1px solid var(--edge-dim); background: var(--track); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; }
.sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.35rem; height: calc(1.6rem - 6px); border-radius: 1px; background: linear-gradient(180deg, #c9d6f0, #8e9cbf); transition: transform .15s var(--ease), background .15s; }
.sw[aria-checked="true"] { background: rgba(62, 224, 198, .18); border-color: var(--accent-2); box-shadow: 0 0 8px rgba(62, 224, 198, .3); }
.sw[aria-checked="true"]::after { transform: translateX(1.45rem); background: linear-gradient(180deg, #d8fff6, var(--accent-2)); }
.seg { display: inline-flex; gap: .25rem; flex-wrap: wrap; }
.seg .btn { opacity: .85; }
.seg .btn[aria-pressed="true"] { opacity: 1; border-color: var(--accent); color: #fff; background: linear-gradient(180deg, rgba(127, 216, 255, .26), rgba(127, 216, 255, .08)); font-weight: 700; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 10px rgba(127, 216, 255, .25); }
.seg .btn[aria-pressed="true"]::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); flex: none; }
input.inp { background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .4rem .6rem; font: inherit; font-size: var(--t-md); }
input.inp:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
select.sel { background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .35rem .5rem; font: inherit; font-size: var(--t-md); }
select.sel:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
.setnote { color: var(--ink-dim); font-size: var(--t-sm); line-height: 1.5; max-width: 34rem; margin: .5rem 0 0; }

/* ---------- hero popup ---------- */
#pop { position: fixed; z-index: 20; padding: .8rem; display: grid; gap: .5rem; min-width: 14rem; font-size: var(--t-base); animation: winin .14s var(--ease); }
#pop .pophead { display: flex; gap: .6rem; align-items: center; }
#pop .pophead canvas { width: 2.6rem; height: 2.6rem; border-radius: 2px; border: 1px solid var(--edge); background: #060c22; }
#pop .t { font-weight: 700; font-size: var(--t-md); color: #fff; }
#pop small { color: var(--ink-dim); display: block; font-size: var(--t-sm); }
#pop .acts { display: flex; flex-wrap: wrap; gap: .4rem; }

/* ---------- battle (FF7-style window strip) ---------- */
.ff { color: #fff; font-family: var(--f-body); text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
#battle { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); padding: 0 .5rem; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, 1.95fr); gap: .35rem; z-index: 15; animation: rise .2s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
#bFoes, #bCmdWin, #bParty { height: 11rem; padding: .5rem .6rem; overflow: hidden; }
#bFoes { display: grid; gap: .1rem; align-content: start; grid-auto-rows: min-content; }
#bFoes .foe { display: grid; grid-template-columns: 1.7rem 1fr; align-items: center; text-align: left; background: none; border: 0; padding: .1rem .3rem .1rem .1rem; cursor: pointer; border-radius: 2px; color: inherit; font-size: 1.05rem; line-height: 1.15; }
#bFoes .foe:hover:not(.dead) { background: rgba(127, 216, 255, .08); }
.mark { display: inline-block; width: 1.5rem; height: 1rem; background: var(--hand) center / contain no-repeat; visibility: hidden; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
#bFoes .foe.sel { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
#bFoes .foe.sel .mark { visibility: visible; animation: handbob .5s ease-in-out infinite alternate; }
@keyframes handbob { to { transform: translateX(.22rem); } }
#bFoes .foe.dead { opacity: .3; cursor: default; }
#bFoes .foe .hpb { grid-column: 2; height: .2rem; margin: .15rem 0 .3rem; background: var(--track); border-radius: 1px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
#bFoes .foe .hpb s { display: block; height: 100%; background: linear-gradient(90deg, #ff5d5d, #ffb0a0); box-shadow: 0 0 6px rgba(255, 93, 93, .6); transition: width .35s; text-decoration: none; }
#bCmds { display: grid; gap: .05rem; align-content: start; max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(127, 216, 255, .35) transparent; margin: -.15rem; padding: .15rem; }
#bCmdWin { padding: .45rem .5rem; }
#bCmds .btn { display: flex; align-items: center; gap: .3rem; min-height: 1.72rem; padding: .05rem .3rem .05rem 1.9rem; position: relative; background: none; border: 0; box-shadow: none; border-radius: 2px; color: #fff; font-size: 1.02rem; font-weight: 600; text-align: left; justify-content: flex-start; white-space: nowrap; text-shadow: inherit; flex: none; }
#bCmds .btn::before { content: ""; position: absolute; left: .15rem; top: 50%; width: 1.5rem; height: 1rem; margin-top: -.5rem; background: var(--hand) center / contain no-repeat; visibility: hidden; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .8)); }
#bCmds .btn:focus, #bCmds .btn:focus-visible { outline: none; background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); color: #fff; border: 0; }
#bCmds .btn:focus::before { visibility: visible; animation: handbob .5s ease-in-out infinite alternate; }
#bCmds .btn:hover:not(:disabled) { filter: none; color: #fff; border: 0; background: rgba(127, 216, 255, .08); box-shadow: none; }
#bCmds .btn:focus:hover:not(:disabled) { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
#bCmds .btn:active:not(:disabled) { transform: none; }
#bCmds .btn:disabled { opacity: .38; filter: none; }
#bCmds .btn small { color: var(--accent); margin-left: auto; padding-left: .4rem; font-size: .85rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
#bCmds .empty { padding: .3rem .4rem; color: var(--ink-dim); font-size: 1rem; }
.ph { display: grid; grid-template-columns: minmax(0, 1.25fr) 4.8rem 3.6rem minmax(0, 1.3fr); gap: .5rem; font-size: var(--t-micro); letter-spacing: .14em; font-weight: 700; color: var(--ink-dim); padding: 0 .3rem .2rem; font-family: var(--f-ui); border-bottom: 1px solid var(--line); margin-bottom: .2rem; }
.ph span:nth-child(2), .ph span:nth-child(3) { text-align: right; }
#bRows { display: grid; gap: .15rem; }
.prow { display: grid; grid-template-columns: minmax(0, 1.25fr) 4.8rem 3.6rem minmax(0, 1.3fr); gap: .5rem; align-items: center; padding: .12rem .3rem; border-radius: 2px; font-size: 1.15rem; }
.prow.me.ready { background: var(--accent-dim); box-shadow: inset 3px 0 0 var(--accent); }
.prow .pn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
.prow .pn i { font-style: normal; font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-left: .4rem; }
.prow.me.ready .pn { color: #fff; }
.prow .hp, .prow .mp { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.prow .hp b, .prow .mp b { font-weight: 700; color: #fff; }
.prow .hp.warn b { color: var(--warn); } .prow .hp.crit b { color: var(--danger); animation: hpblink .7s steps(2) infinite; }
@keyframes hpblink { 50% { opacity: .55; } }
.prow .mp small, .prow .hp small { font-size: .8rem; color: var(--ink-dim); }
.prow .gauges { display: grid; gap: .22rem; }
.atb, .lim { display: block; height: .45rem; background: var(--track); border-radius: 1px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), inset 0 1px 2px #000, 0 0 0 2px rgba(255, 255, 255, .04); overflow: hidden; position: relative; }
.lim { height: .3rem; }
.atb s, .lim s { display: block; height: 100%; width: 0; text-decoration: none; transition: width .18s linear; }
.atb s { background: linear-gradient(90deg, var(--mp-2), var(--accent)); box-shadow: 0 0 8px rgba(127, 216, 255, .7); }
.prow.ready .atb s { background: linear-gradient(90deg, var(--accent), #ffffff); animation: atbready .5s steps(2) infinite; }
@keyframes atbready { 50% { filter: brightness(1.3); } }
.lim s { background: linear-gradient(90deg, #2a9d8f, var(--accent-2)); box-shadow: 0 0 8px rgba(62, 224, 198, .6); animation: gaugeglow 1.6s ease-in-out infinite alternate; }
.lim.full s { background: linear-gradient(90deg, #ff58c8, #ffd0f0); box-shadow: 0 0 10px rgba(255, 88, 200, .8); animation: atbready .4s steps(2) infinite; }
@keyframes gaugeglow { to { filter: brightness(1.25); } }
.prow.ally { opacity: .75; grid-template-columns: minmax(0, 1fr) auto; font-size: 1rem; }
.prow.ally .ac { color: var(--ink-dim); font-size: .85rem; }
#bLog { position: fixed; top: calc(env(safe-area-inset-top, 0px) + .6rem); left: 50%; transform: translateX(-50%); padding: .4rem 1.3rem; font-size: 1.15rem; z-index: 15; width: max-content; max-width: calc(100vw - 1.2rem); text-align: center; border-radius: 3px; }

/* ---------- toasts, banners, level-up ---------- */
#toasts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 4.6rem); left: 50%; transform: translateX(-50%); display: grid; gap: .4rem; justify-items: center; z-index: 40; pointer-events: none; width: max-content; max-width: calc(100vw - 1.2rem); }
.toast { padding: .5rem 1rem .5rem .65rem; font-size: var(--t-base); font-weight: 600; line-height: 1.35; display: flex; gap: .55rem; align-items: center; animation: tin .16s var(--ease); overflow: hidden; border-left: 3px solid var(--accent); }
.toast.out { animation: tout .2s ease-in forwards; }
.toast .ico, .toast .ui { width: 1.6rem; height: 1.6rem; flex: none; }
.toast.news { border-left-color: var(--accent-2); color: #fff; }
.toast.quest { border-left-color: var(--accent); }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--accent); box-shadow: 0 0 6px var(--accent); width: 100%; transform-origin: left; animation: tbar var(--life, 2.6s) linear forwards; }
@keyframes tin { from { opacity: 0; transform: translateY(-8px); } }
@keyframes tout { to { opacity: 0; transform: translateY(-6px); } }
@keyframes tbar { to { transform: scaleX(0); } }
#region { position: fixed; top: 20%; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity .7s; pointer-events: none; z-index: 4; text-align: center; display: grid; justify-items: center; gap: .5rem; }
#region span { font-family: var(--f-ui); font-weight: 800; font-size: clamp(.95rem, 3.4vw, 1.9rem); line-height: 1.3; color: #fff; text-shadow: 0 2px 0 rgba(2, 6, 22, .9), 0 0 18px rgba(0, 0, 0, .9), 0 0 24px rgba(127, 216, 255, .35); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; padding: .3rem 1rem; background: radial-gradient(ellipse, rgba(2, 6, 22, .55), transparent 72%); }
#region::before, #region::after { content: ""; width: min(18rem, 60vw); height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 8px rgba(127, 216, 255, .7); transform: scaleX(0); transition: transform .8s var(--ease); }
#region.show { opacity: 1; } #region.show::before, #region.show::after { transform: scaleX(1); }
#banner { position: fixed; left: 0; right: 0; top: 24%; z-index: 45; pointer-events: none; display: grid; justify-items: center; gap: .3rem; padding: 1.1rem 1rem; background: linear-gradient(90deg, transparent, rgba(4, 10, 30, .92) 15%, rgba(4, 10, 30, .92) 85%, transparent); border-top: 1px solid var(--accent-line); border-bottom: 1px solid var(--accent-line); box-shadow: 0 0 30px rgba(127, 216, 255, .12); animation: bnr 3.6s var(--ease) forwards; text-align: center; }
#banner .bt { font-family: var(--f-ui); font-weight: 800; font-size: clamp(1.1rem, 4vw, 1.9rem); line-height: 1.3; color: #fff; text-shadow: 0 2px 0 rgba(2, 6, 22, .9), 0 0 18px rgba(127, 216, 255, .55); letter-spacing: .16em; text-transform: uppercase; display: flex; align-items: center; gap: .8rem; }
#banner .bt .ui { width: 2rem; height: 2rem; }
#banner .bs { font-size: var(--t-lg); font-weight: 600; line-height: 1.35; color: var(--ink-dim); max-width: min(38rem, 92vw); }
@keyframes bnr { 0% { opacity: 0; transform: scaleY(.1); } 8% { opacity: 1; transform: scaleY(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
#levelup { position: fixed; inset: 0; z-index: 46; pointer-events: none; display: grid; place-items: center; animation: lufade 4.6s ease forwards; }
#levelup .rays { position: absolute; width: 60rem; height: 60rem; max-width: 160vw; background: repeating-conic-gradient(from 0deg, rgba(127, 216, 255, .16) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#levelup .card { position: relative; padding: 1.3rem 1.8rem 1.4rem; display: grid; gap: .7rem; justify-items: center; min-width: min(22rem, 90vw); animation: luin .4s var(--ease); box-shadow: var(--bevel), var(--glow), 0 10px 26px rgba(0, 0, 0, .5); }
#levelup .lt { font-family: var(--f-ui); font-weight: 800; font-size: clamp(1.25rem, 5vw, 2rem); line-height: 1.3; color: #fff; text-shadow: 0 2px 0 rgba(2, 6, 22, .9), 0 0 20px rgba(127, 216, 255, .7); letter-spacing: .18em; text-transform: uppercase; }
#levelup .ll { font-size: var(--t-lg); font-weight: 600; } #levelup .ll b { color: var(--accent); font-size: var(--t-2xl); line-height: 1.1; font-variant-numeric: tabular-nums; }
#levelup .ls { display: grid; grid-template-columns: repeat(3, auto); gap: .4rem 1.4rem; font-size: var(--t-md); font-weight: 700; font-variant-numeric: tabular-nums; }
#levelup .ls div { display: flex; gap: .4rem; align-items: baseline; }
#levelup .ls span { font-weight: 700; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
#levelup .lk { color: var(--accent-2); font-size: var(--t-md); font-weight: 600; text-align: center; max-width: 24rem; }
@keyframes luin { from { opacity: 0; transform: scale(.8) translateY(14px); } 70% { transform: scale(1.03); } }
@keyframes lufade { 0%, 88% { opacity: 1; } 100% { opacity: 0; } }
#levelup .spark { position: absolute; width: 5px; height: 5px; background: #fff; box-shadow: 0 0 6px var(--accent); animation: rise2 1.8s ease-out infinite; }
@keyframes rise2 { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-70px) rotate(90deg); } }

/* ---------- touch pad ---------- */
#pad { position: fixed; right: .9rem; bottom: calc(env(safe-area-inset-bottom, 0px) + .9rem); display: flex; align-items: flex-end; gap: .9rem; z-index: 6; }
#dpad { display: grid; grid-template-columns: repeat(3, 3.1rem); grid-template-rows: repeat(3, 3.1rem); }
#dpad button, #aBtn { background: radial-gradient(circle at 40% 30%, rgba(30, 48, 100, .85), rgba(4, 8, 24, .9)); border: 1px solid var(--edge-dim); color: var(--ink); font-size: 1.1rem; touch-action: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .5); transition: border-color .1s, box-shadow .1s; }
#dpad button { border-radius: 50%; }
#dpad button:active, #aBtn:active { border-color: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 12px rgba(127, 216, 255, .6); transform: translateY(1px); }
#dpad [data-d=up] { grid-column: 2; grid-row: 1; } #dpad [data-d=left] { grid-column: 1; grid-row: 2; } #dpad [data-d=right] { grid-column: 3; grid-row: 2; } #dpad [data-d=down] { grid-column: 2; grid-row: 3; }
#aBtn { width: 4rem; height: 4rem; border-radius: 50%; font-weight: 800; font-size: var(--t-lg); margin-bottom: 1.1rem; color: var(--accent); }

/* ---------- title ---------- */
#title { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; padding: 1rem; background: #0a0e24; overflow-y: auto; isolation: isolate; }
.tw { width: min(40rem, 100%); padding: 1.7rem 1.7rem 1.4rem; display: grid; gap: .9rem; }
.tw h1 { font-weight: 400; font-size: clamp(1.5rem, 5.4vw, 2.4rem); line-height: 1.4; margin: 0; color: var(--ink); text-wrap: balance; }
.tw .lede { margin: 0; color: var(--ink-dim); max-width: 56ch; font-size: 1.0625rem; line-height: 1.6; }
.tw .actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.tw .actions .btn { padding: .55rem 1.1rem; font-size: var(--t-md); min-height: 2.75rem; }
#contInfo { color: var(--ink-dim); font-size: var(--t-base); }
#create { display: grid; gap: .75rem; }
.field { display: grid; gap: .25rem; }
#create label { font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
#heroName { background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .55rem .7rem; font-size: 1.0625rem; width: min(19rem, 100%); }
#heroName:focus, #siEmail:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
#siEmail { background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .55rem .7rem; font-size: 1.0625rem; width: min(19rem, 100%); }
#classPick { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .5rem; }
.cls { background: rgba(0, 0, 0, .3); border: 1px solid var(--line); border-radius: 3px; padding: .5rem; cursor: pointer; display: grid; gap: .25rem; justify-items: center; text-align: center; color: inherit; transition: transform .1s, border-color .1s, box-shadow .1s; }
.cls:hover { transform: translateY(-2px); border-color: var(--accent); }
.cls[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-dim); box-shadow: var(--glow); }
.cls b { font-weight: 700; font-size: var(--t-md); color: #fff; }
.cls small { font-size: var(--t-sm); color: var(--ink-dim); line-height: 1.35; }
.cls canvas { width: 3.75rem; height: 5.8rem; image-rendering: auto; }
.netline { margin: 0; font-size: var(--t-base); color: var(--ink-dim); }
.netline.online { color: var(--accent-2); } .netline.connecting { color: var(--warn); }
.help { font-size: var(--t-sm); line-height: 1.8; color: var(--ink-dim); margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 1400px) { .tab .k { display: none; } .tab { padding: .25rem .55rem; font-size: var(--t-sm); } }
@media (max-width: 760px) {
  #modal { width: 100vw; height: 100dvh; max-height: 100dvh; top: 0; left: 0; transform: none; border-radius: 0; border-width: 0 0 1px; animation: modin3 .16s var(--ease); }
  #modal.out { animation: modout3 .14s ease-in forwards; }
  @keyframes modin3 { from { opacity: 0; transform: translateY(12px); } } @keyframes modout3 { to { opacity: 0; transform: translateY(8px); } }
  #mHead { padding: calc(env(safe-area-inset-top, 0px) + .4rem) .35rem 0; gap: .15rem; overflow-x: auto; scrollbar-width: none; }
  #mHead .eyebrow { display: none; }
  .tab { padding: .25rem .5rem; flex-direction: column; gap: 0; min-height: 2.9rem; font-size: var(--t-sm); flex: 1 1 0; min-width: 0; }
  .tab .k { display: none; }
  .tab[aria-selected="false"] > span:not(.k) { display: none; }
  .tab[aria-selected="true"] { flex: 3.4 1 0; }
  .tab { font-size: var(--t-xs); padding: .25rem .25rem; overflow: hidden; white-space: nowrap; }
  .tab .ui { flex: none; }
  .tab { flex-direction: row; gap: .25rem; justify-content: center; }
  #mFoot .keys { display: none; }
  #mBody { padding: .7rem .7rem .9rem; }
  .invlayout, .cols, .maplayout { grid-template-columns: minmax(0, 1fr); }
  .detail { position: static; min-height: 0; }
  .slotgrid { grid-template-columns: repeat(auto-fill, 3.3rem); gap: .35rem; }
  .slot { width: 3.3rem; height: 3.3rem; }
  .setrow { grid-template-columns: 1fr 3rem; } .setrow > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; } .setrow.tg { grid-template-columns: 1fr auto; } .setrow.tg > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .doll { grid-template-columns: 3.9rem minmax(0, 1fr) 3.9rem; padding: .6rem .4rem; }
  .figure canvas { width: 6.6rem; height: 9.9rem; }
  .qlist { grid-template-columns: minmax(0, 1fr); }
  #hud { width: min(15rem, calc(100vw - 9.4rem)); padding: .45rem .55rem; gap: .2rem; }
  .bar { grid-template-columns: 1.6rem 1fr 3.9rem; gap: .3rem; font-size: var(--t-xs); }
  #hPortrait { width: 2.3rem; height: 2.3rem; }
  #hud .nm b { font-size: var(--t-md); }
  #hud .sub { font-size: var(--t-xs); }
  .clock { display: none; }
  #tr { gap: .35rem; }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 10.6rem); }
  #tbtns { flex-direction: column; gap: .25rem; padding: .3rem; }
  #tbtns .btn { font-size: var(--t-sm); padding: .15rem .4rem; justify-content: flex-start; min-height: 1.75rem; }
  #tbtns .btn .lbl { display: none; } #tbtns .btn .badge { position: absolute; top: -.35rem; right: -.35rem; }
  #tbtns { flex-direction: row; flex-wrap: wrap; width: 6.4rem; justify-content: center; }
  #tbtns .btn { width: 1.65rem; padding: 0; justify-content: center; }
  #mini { width: 100%; }
  #miniWrap { width: 6.4rem; }
  #miniName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .minifoot { font-size: var(--t-micro); flex-direction: column; gap: 0; }
  #tracker { width: 6.4rem; padding: .3rem .4rem; } #tracker .tk-n { font-size: var(--t-xs); line-height: 1.25; } #tracker .tk-o { display: none; }
  #chat.collapsed { width: auto; }
  #battle { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: .35rem; padding: 0 .35rem; }
  #bFoes, #bCmdWin { height: 9.7rem; padding: .4rem .45rem; }
  #bParty { grid-column: 1 / -1; height: auto; order: 3; padding: .4rem .5rem; }
  #bFoes .foe { font-size: 1rem; grid-template-columns: 1.5rem 1fr; }
  #bCmds .btn { font-size: 1.02rem; min-height: 1.75rem; padding-left: 1.75rem; }
  .ph, .prow { grid-template-columns: minmax(0, 1.25fr) 3.6rem 2.9rem minmax(0, .8fr); gap: .3rem; font-size: 1rem; }
  .prow .pn i { font-size: .6rem; margin-left: .25rem; }
  .ph { font-size: .58rem; }
  #bLog { font-size: 1rem; padding: .3rem .8rem; }
  #chat { max-height: 12.5rem; }
  #chatLog { max-height: 7.5rem; }
  #dpad { grid-template-columns: repeat(3, 2.9rem); grid-template-rows: repeat(3, 2.9rem); }
  .pframe canvas { width: 3.6rem; height: 3.6rem; }
  #dlgText { font-size: 1.0625rem; }
  .cls canvas { width: 2.5rem; height: 3.9rem; }
  .st { grid-template-columns: 2.4rem 1fr auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* map markers */
.mk { position: absolute; transform: translate(-50%, -50%); line-height: 1; pointer-events: none; }
.mk.me { width: .8rem; height: .8rem; border-radius: 50%; background: #fff; border: 2px solid #ff4d4d; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); z-index: 3; }
.mk.me::after { content: ""; position: absolute; inset: -.5rem; border-radius: 50%; border: 2px solid #ff4d4d; animation: ping 1.4s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.mk.other { width: .5rem; height: .5rem; border-radius: 50%; background: var(--accent); border: 1px solid #000; }
.mk.ws img { width: 1.5rem; height: 1.5rem; filter: drop-shadow(0 1px 0 #000); }
.mk.town.go { pointer-events: auto; cursor: pointer; border-color: var(--gold); z-index: 2; } .mk.town.go:hover, .mk.town.sel { background: var(--gold); color: #1a1208; } .mk.town.dim { opacity: .55; }
.mk.town { font-weight: 700; font-size: var(--t-xs); color: #fff; background: rgba(4, 10, 30, .85); border: 1px solid var(--edge-dim); padding: .2rem .35rem; border-radius: 2px; white-space: nowrap; }

/* 3D mode: WebGL canvas sits under the 2D overlay canvas */
#gl{touch-action:none;position:fixed;inset:0;width:100%;height:100%;display:none;z-index:0}
body.gfx3d #gl{display:block}
body.gfx3d #cv{background:transparent}

/* keyboard help */
.kbhelp { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(2, 4, 20, .72); padding: 12px; }
.kbbox { max-width: 720px; width: 100%; max-height: 92vh; overflow: auto; padding: 1rem 1.2rem; display: grid; gap: .6rem; }
.kbbox h2 { margin: 0 0 .2rem; font-size: var(--t-lg); color: #fff; }
.kbsec h3 { margin: .3rem 0; font-size: var(--t-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.kbrow { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: .6rem; padding: .18rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-base); }
.kbk { display: flex; gap: .3rem; flex-wrap: wrap; }
kbd { font: 600 var(--t-xs) var(--f-ui); padding: .05rem .4rem; border: 1px solid var(--edge-dim); border-bottom-width: 2px; border-radius: 2px; background: rgba(6, 12, 32, .8); color: #fff; }
/* battle key hints */
#bCmds .bk { font: 700 .72rem var(--f-ui, system-ui); min-width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center; border: 1px solid var(--edge-dim); border-bottom-width: 2px; border-radius: 2px; background: rgba(6, 12, 32, .8); color: var(--ink-dim); margin-right: .2rem; text-shadow: none; flex: none; }
@media (pointer: coarse) { #bCmds .bk { display: none; } }

/* ---------- mobile UX pass (portrait phones + short landscape) ---------- */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  /* compact hero card: portrait, name/level, HP + MP; XP becomes a hairline; gold inline */
  #hud { width: min(11.5rem, calc(100vw - 8rem)); left: max(.45rem, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + .45rem); padding: .35rem .45rem .4rem; gap: .18rem; }
  .hudtop { gap: .4rem; margin-bottom: 0; }
  #hPortrait { width: 2rem; height: 2rem; }
  #hud .sub, .hudfoot .clock { display: none; }
  #hud .nm b { font-size: var(--t-base); }
  #hud .bar { grid-template-columns: 1.3rem 1fr auto; font-size: var(--t-xs); }
  #hud .bar .num { min-width: 2.6rem; }
  #hud .bar i { height: .4rem; }
  #hud .bar:nth-of-type(2) .num, #hud .bar:nth-of-type(3) .num { display: none; }   /* MP number hidden (bar only) */
  #hud .bar:nth-of-type(2) { grid-template-columns: 1.3rem 1fr; }
  #hud .bar:has(.xp) { grid-template-columns: 1fr; }
  #hud .bar:has(.xp) > span { display: none; }
  #hud .bar:has(.xp) i { height: .2rem; border-width: 0; }
  #hud .hudfoot { font-size: var(--t-xs); }
  #hGold .ico { width: .9rem; height: .9rem; }

  /* right column: small minimap + quest tracker only */
  #tr { right: max(.45rem, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + .45rem); display: contents; }
  #miniWrap { position: fixed; right: max(.45rem, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + .45rem); width: 5.6rem; padding: .25rem; opacity: .92; }
  .minifoot { display: none; }
  #tracker { position: fixed; right: max(.45rem, env(safe-area-inset-right, 0px)); top: calc(env(safe-area-inset-top, 0px) + 5.2rem); width: 5.6rem; }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 4.6rem); }

  /* menu buttons: one row along the bottom-left, big enough to tap (>=44px) */
  #tbtns { position: fixed; left: max(.45rem, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + .5rem); width: auto; flex-direction: row; flex-wrap: nowrap; gap: .25rem; padding: .25rem; z-index: 5; opacity: .94; }
  #tbtns .btn { width: 2.75rem; height: 2.75rem; min-height: 2.75rem; padding: 0; justify-content: center; }
  #tbtns .btn .ui { width: 1.4rem; height: 1.4rem; }
  #bSound { display: none; }   /* sound lives in Options on phones */

  /* chat pill sits above the menu row */
  #chat { left: max(.45rem, env(safe-area-inset-left, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 4.1rem); width: min(20rem, calc(100vw - 9.5rem)); opacity: .94; }
  #chat.collapsed { width: auto; }
  #chat.collapsed #chatHead { padding: .2rem .4rem; gap: .5rem; }

  /* thumb controls: smaller, translucent, hugging the corner */
  #pad { right: max(.6rem, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + .6rem); gap: .5rem; opacity: .6; transition: opacity .2s; }
  #pad:active, #pad:focus-within { opacity: .9; }
  #dpad { grid-template-columns: repeat(3, 2.7rem); grid-template-rows: repeat(3, 2.7rem); }
  #dpad button { font-size: 1rem; }
  #aBtn { width: 3.6rem; height: 3.6rem; margin-bottom: .9rem; }
}
@media (max-height: 500px) and (pointer: coarse) {
  #tracker { display: none; }
  #chat { display: none; }
}
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
  #tbtns .btn .lbl { display: none; }
  #tbtns .btn .badge { position: absolute; top: -.35rem; right: -.35rem; }
  #mini { width: 100%; }
}
@media (max-width: 760px) {
  /* portrait: menu row spans the bottom; controls float above it */
  #tbtns { right: max(.45rem, env(safe-area-inset-right, 0px)); justify-content: space-between; }
  #tbtns .btn { flex: 1 1 0; width: auto; }
  #pad { bottom: calc(env(safe-area-inset-bottom, 0px) + 4.1rem); }
  #chat { width: min(20rem, calc(100vw - 14rem)); }
}

/* ---------- account / conflict ---------- */
#conflict { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(26rem, calc(100vw - 2rem)); padding: 1rem 1.1rem; z-index: 70; display: grid; gap: .6rem; }
#conflict[hidden] { display: none; }
#conflict h3 { margin: 0; color: #fff; font-size: var(--t-lg); }
#conflict p { margin: 0; line-height: 1.5; }
#conflict .actions { display: flex; flex-wrap: wrap; gap: .5rem; }
#signin[hidden] { display: none; }
#signin { display: grid; gap: .6rem; }
#signin .actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- colour grade (Options > Colour grade) ---------- */
#gradeFx { position: fixed; inset: 0; pointer-events: none; z-index: 1; display: none;
  background: radial-gradient(ellipse at 50% 46%, rgba(0, 0, 0, 0) 54%, rgba(8, 10, 30, .38) 100%),
    linear-gradient(120deg, rgba(255, 226, 160, .16), rgba(255, 226, 160, 0) 46%),
    linear-gradient(0deg, rgba(20, 30, 80, .14), rgba(20, 30, 80, 0) 40%); }
body.grade:not(.gfx3d):not(.inbattle) #gradeFx { display: block; }
@media (pointer: fine) { body.grade:not(.gfx3d) #cv { filter: saturate(1.14) contrast(1.05) brightness(1.02); } }

/* FFT-style boot screen */
#boot { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 9vh 1rem 8vh; background: radial-gradient(ellipse at 50% 38%, #1a1530 0%, #0a0814 55%, #030208 100%); transition: opacity .6s ease; font-family: 'Cinzel', 'Trajan Pro', Georgia, serif; }
#boot.gone { opacity: 0; pointer-events: none; }
#boot::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px); pointer-events: none; }
#boot .bt { text-align: center; color: #e9d38a; text-shadow: 0 2px 0 #3a2a08, 0 0 24px rgba(233,211,138,.35); }
#boot .bo { display: block; font-size: 1.1rem; color: #c9a74a; margin-bottom: .6rem; }
#boot h2 { margin: 0; font-size: clamp(2.2rem, 8vw, 4.2rem); letter-spacing: .28em; font-weight: 700; padding-left: .28em; }
#boot h3 { margin: .1em 0 0; font-size: clamp(.9rem, 2.6vw, 1.35rem); letter-spacing: .6em; font-weight: 400; padding-left: .6em; color: #d8c8a0; }
#boot .rule { display: block; width: min(420px, 70vw); height: 7px; margin: 1rem auto 0; border-top: 1px solid #c9a74a; border-bottom: 1px solid #c9a74a; opacity: .75; }
#boot .bcrystal { width: 54px; height: 54px; display: grid; place-items: center; perspective: 300px; }
#boot .bcrystal b { width: 26px; height: 40px; background: linear-gradient(135deg, #b9f0ff, #4aa8e8 55%, #1d5fa8); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 10px #6cc6ff); animation: bspin 2.4s linear infinite; }
@keyframes bspin { to { transform: rotateY(360deg); } }
#boot .bwin { width: min(560px, 100%); padding: 1rem 1.3rem 1.1rem; border-radius: 3px; background: linear-gradient(var(--panel-top), var(--panel-bot)); border: 1px solid var(--edge); box-shadow: var(--bevel), 0 8px 30px rgba(0,0,0,.7); color: #f2efe2; }
#boot .bnow { margin: 0 0 .6rem; font-size: 1.05rem; letter-spacing: .12em; text-shadow: 1px 1px 0 #000; }
#boot .dots::after { content: ''; animation: bdots 1.4s steps(4) infinite; }
@keyframes bdots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
#boot .bbar { height: 10px; border: 1px solid var(--edge-dim); background: #070b22; padding: 1px; }
#boot .bbar s { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #7fd8ff 0 6px, #3f8fd8 6px 8px); transition: width .35s ease; }
#boot .btip { margin: .8rem 0 0; font: .9rem/1.45 Georgia, serif; color: #d9d6c6; min-height: 2.6em; text-shadow: 1px 1px 0 #000; }
@media (prefers-reduced-motion: reduce) { #boot .bcrystal b, #boot .dots::after { animation: none; } }

/* Marta's Diner shift */
#diner { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: .8rem; background: rgba(4, 6, 20, .72); overflow-y: auto; }
#dinerBox { width: min(640px, 100%); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .7rem; }
#dinerBox h3 { margin: 0; font-size: 1.15rem; color: #fff; }
#dinerBox small { color: var(--ink-dim); }
#dinerBox .dtop { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
#dinerBox .dtop > div:first-child { min-width: 180px; flex: 1; }
#dinerBox .dstat { font-size: .9rem; white-space: nowrap; } #dinerBox .dstat b { color: var(--accent); }
#dinerBox .dbar { height: 6px; margin: .3rem 0 .15rem; background: var(--track); border: 1px solid rgba(0, 0, 0, .6); border-radius: 1px; overflow: hidden; }
#dinerBox .dbar s { display: block; height: 100%; background: linear-gradient(90deg, var(--mp-2), var(--accent)); transition: width .3s; }
#dinerBox .dbar.pat s { background: linear-gradient(90deg, var(--hp-2), var(--hp)); transition: width .2s linear; }
#dinerBox .dpantry { display: flex; flex-wrap: wrap; gap: .5rem; }
#dinerBox .dp { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .45rem; background: rgba(0, 0, 0, .3); border-radius: 2px; font-size: .85rem; }
#dinerBox .dp img { width: 22px; height: 22px; image-rendering: pixelated; }
#dinerBox .dseats { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: .5rem; }
#dinerBox .dseat { display: flex; gap: .6rem; align-items: center; padding: .55rem; min-height: 98px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 3px; }
#dinerBox .dseat.empty { justify-content: center; opacity: .45; }
#dinerBox .dsprite { width: 52px; height: 80px; image-rendering: pixelated; flex: none; }
#dinerBox .dbody { flex: 1; min-width: 0; font-size: .88rem; }
#dinerBox .ding { display: flex; flex-wrap: wrap; gap: .1rem .6rem; font-size: .78rem; margin-top: .1rem; }
#dinerBox .ding .ok { color: var(--good); } #dinerBox .ding .no { color: #f09a8a; }
#dinerBox .drow { display: flex; gap: .4rem; margin-top: .35rem; }
#dinerBox .drow .btn { padding: .25rem .7rem; font-size: .8rem; min-height: 0; }
#dinerBox .dmsg { margin: 0; min-height: 2.4em; font-size: .92rem; }
#dinerBox .dcook { padding: .7rem; border: 1px solid var(--accent-line); border-radius: 3px; background: rgba(0, 0, 0, .3); text-align: center; }
#dinerBox .dcook p { margin: 0 0 .5rem; }
#dinerBox .dtrack { position: relative; height: 26px; margin: 0 0 .6rem; background: #3a1a18; border: 1px solid var(--edge); border-radius: 2px; cursor: pointer; touch-action: manipulation; }
#dinerBox .dtrack i { position: absolute; top: 0; bottom: 0; } #dinerBox .zg { background: #3fa84a; } #dinerBox .zp { background: #b8f06a; }
#dinerBox .dtrack em { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #fff; }
#dinerBox .dacts { display: flex; justify-content: flex-end; }
#dinerBox .dsum { text-align: center; padding: .6rem 0; } #dinerBox .dsum p { margin: .4rem 0; } #dinerBox .dq { color: var(--ink-dim); }

/* Painted opening: illustrated backdrop with a slow drift, drifting cloud banks and sparkles */
#title::before { content: ''; position: fixed; inset: -3%; z-index: -2; background: #0a0e24 url(assets/title_bg.jpg) 50% 50% / cover no-repeat; animation: tdrift 48s ease-in-out infinite alternate; }
#title::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 38% 16% at 20% 78%, rgba(255,255,255,.34), transparent 70%), radial-gradient(ellipse 44% 14% at 70% 84%, rgba(255,255,255,.3), transparent 70%), radial-gradient(ellipse 30% 10% at 45% 22%, rgba(255,255,255,.22), transparent 70%), radial-gradient(ellipse at center, transparent 55%, rgba(6, 8, 28, .45));
  background-size: 160% 100%, 160% 100%, 160% 100%, 100% 100%; animation: tclouds 70s linear infinite; }
@keyframes tdrift { from { transform: scale(1.02) translate(-1%, 0); } to { transform: scale(1.09) translate(1.2%, -1%); } }
@keyframes tclouds { from { background-position: 0 0, 0 0, 0 0, 0 0; } to { background-position: 160% 0, -160% 0, 160% 0, 0 0; } }
@media (min-aspect-ratio: 13/10) {
  .tw { width: min(94vw, max(34rem, calc(0.36 * max(100vw, 182vh)))); min-height: min(92vh, calc(0.5 * max(56vw, 100vh))); align-content: center; }
}
@media (max-aspect-ratio: 13/10) { #title::before { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { #title::before, #title::after { animation: none; } }
#boot { background: radial-gradient(ellipse 46% 52% at 50% 48%, rgba(6, 8, 30, .96) 0 55%, rgba(6, 8, 30, .45) 100%), linear-gradient(rgba(4, 3, 14, .55), rgba(4, 3, 14, .75)), url(assets/title_bg.jpg) 50% 50% / cover no-repeat, #05040e; } /* dark centre hides the backdrop's blurred patch while loading */

/* ---------- phone declutter (v2.10): slim HUD, small minimap, chat as an icon, controls in the corners ---------- */
@media (max-width: 760px) {
  #hud { width: 9.4rem; padding: .3rem .4rem .32rem; gap: .14rem; opacity: .94; }
  #hPortrait { width: 1.75rem; height: 1.75rem; }
  .hudtop { gap: .35rem; }
  #hud .nm b { font-size: var(--t-sm); }
  #hud .bar, #hud .bar:nth-of-type(2), #hud .bar:nth-of-type(3), #hud .bar:has(.xp) { grid-template-columns: 1fr; }
  #hud .bar > span { display: none; }
  #hud .bar i { height: .36rem; }
  #hud .bar:has(.xp) i { height: .16rem; }
  #miniWrap { width: 4.6rem; padding: .18rem; opacity: .82; }
  #tracker { top: calc(env(safe-area-inset-top, 0px) + 4.1rem); width: 4.6rem; font-size: var(--t-xs); opacity: .9; }
  #toasts { top: calc(env(safe-area-inset-top, 0px) + 3.8rem); }
  #tbtns { padding: .15rem; gap: .2rem; background: linear-gradient(180deg, rgba(10, 18, 44, .88), rgba(2, 5, 18, .92)); box-shadow: var(--bevel); }
  #tbtns .btn { height: 2.45rem; min-height: 2.45rem; }
  #tbtns .btn .ui { width: 1.25rem; height: 1.25rem; }
  /* chat: a round icon next to the hero card; tap to open a panel above the menu row */
  #chat { left: max(.45rem, env(safe-area-inset-left, 0px)); right: max(.45rem, env(safe-area-inset-right, 0px)); width: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 3.6rem); max-height: 11rem; z-index: 8; opacity: .97; }
  #chat.collapsed { right: auto; left: 10.3rem; top: calc(env(safe-area-inset-top, 0px) + .45rem); bottom: auto; width: 2.3rem; height: 2.3rem; padding: 0; border-radius: 50%; }
  #chat.collapsed #chatHead { padding: 0; height: 100%; justify-content: center; }
  #chat.collapsed .eyebrow { display: none; }
  #chat.collapsed #chatToggle { font-size: 0; background: none; border: 0; width: 100%; height: 100%; padding: 0; }
  #chat.collapsed #chatToggle::before { content: '\1F4AC'; font-size: 1.1rem; }
  #chat.collapsed.unread::after { content: ''; position: absolute; top: .1rem; right: .1rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); border: 1px solid #fff; }
  /* controls: D-pad bottom-left, action button bottom-right, both faint until touched */
  #pad { left: max(.5rem, env(safe-area-inset-left, 0px)); right: max(.5rem, env(safe-area-inset-right, 0px)); bottom: calc(env(safe-area-inset-bottom, 0px) + 3.5rem); justify-content: space-between; gap: 0; pointer-events: none; opacity: .5; }
  #pad > * { pointer-events: auto; }
  #pad:active, #pad:focus-within { opacity: .85; }
  #dpad { grid-template-columns: repeat(3, 2.55rem); grid-template-rows: repeat(3, 2.55rem); }
  #aBtn { width: 3.3rem; height: 3.3rem; margin-bottom: .4rem; }
}
body.pad-off #dpad { display: none; }
body.pad-off #pad { justify-content: flex-end; }
/* arcade mini-games */
#arcade { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: .6rem; background: rgba(4, 6, 20, .78); overflow-y: auto; }
#arcBox { width: min(560px, 100%); padding: .7rem .8rem; display: flex; flex-direction: column; gap: .5rem; align-items: center; }
#arcBox .atop { width: 100%; display: flex; gap: .8rem; align-items: center; justify-content: space-between; }
#arcBox h3 { margin: 0; color: #fff; font-size: 1.05rem; } #arcInfo { color: var(--ink-dim); font-size: .8rem; flex: 1; text-align: right; }
#arcCv { width: 100%; max-height: 62vh; aspect-ratio: auto; image-rendering: pixelated; border: 1px solid var(--edge-dim); border-radius: 2px; touch-action: none; background: #000; object-fit: contain; }
#arcBox .ahint { font-size: .75rem; color: var(--ink-dim); text-align: center; max-width: 46ch; }
#arcBox .abtns { display: flex; gap: .6rem; } #arcBox .abtns .btn { min-width: 4.5rem; min-height: 2.6rem; touch-action: none; user-select: none; }
/* what's new */
.newslist { display: flex; flex-direction: column; gap: .8rem; }
.newsrel { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 3px; background: rgba(0, 0, 0, .25); }
.newsrel .nh { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; font-size: .8rem; color: var(--ink-dim); } .newsrel .nh b { color: var(--accent); }
.newsrel .ntag { background: var(--accent-dim); border: 1px solid var(--accent-line); color: var(--accent); padding: 0 .5rem; border-radius: 2px; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.newsrel h4 { margin: .15rem 0 .2rem; color: #fff; } .newsrel p { margin: 0 0 .3rem; font-size: .88rem; }
.newsrel ul { margin: 0 0 .4rem; padding-left: 1.1rem; font-size: .82rem; color: var(--ink-dim); }
.newsrel img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 2px; image-rendering: auto; }
#btnNews { text-decoration: none; display: inline-flex; align-items: center; }

/* companions */
.petlist{display:grid;gap:.5rem}.pet{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border:1px solid var(--line);border-left:3px solid transparent;border-radius:2px;background:rgba(0,0,0,.25);flex-wrap:wrap}
.pet.on{border-left-color:var(--accent);background:var(--accent-dim)}.pico{width:3.4rem;height:3.4rem;display:grid;place-items:center;flex:none}.petico{image-rendering:pixelated;max-width:100%;max-height:100%;transform:scale(2);transform-origin:center bottom}
.pinfo{flex:1;min-width:10rem;display:grid;gap:.15rem}.pinfo small{opacity:.8}.pinfo .bar2{display:block;height:.35rem;background:var(--track);border-radius:1px;overflow:hidden;border:1px solid rgba(0,0,0,.6)}.pinfo .bar2 s{display:block;height:100%;background:linear-gradient(90deg,var(--xp-2),var(--xp));box-shadow:0 0 6px rgba(199,164,255,.5)}
/* street-map labels on the overview */
.mk.bld, .mk.exit { font-weight: 700; font-size: .66rem; color: #ffe9b8; background: rgba(58, 34, 16, .92); border: 1px solid #e0b060; padding: .15rem .3rem; border-radius: 2px; white-space: nowrap; z-index: 2; }
.mk.exit { color: #dbe8ff; background: rgba(18, 28, 64, .92); border-color: #8fb0f0; }
.mk.npcm { font-size: .8rem; filter: drop-shadow(0 1px 0 #000); z-index: 1; }

.mk.pin { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; font-weight: 800; font-size: .62rem; color: #2a1a08; background: #f2c14e; border: 1px solid #5a3a10; box-shadow: 0 1px 0 #000; z-index: 2; }
.mk.pin.exit { background: #8fb0f0; color: #0a1a3a; border-color: #1a2a5a; }
.maplegend { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin-top: .55rem; font-size: var(--t-xs); }
.maplegend .lgi { display: inline-flex; align-items: center; gap: .3rem; }
.maplegend .lgi b { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; font-size: .62rem; color: #2a1a08; background: #f2c14e; }
.maplegend .lgi.exit b { background: #8fb0f0; color: #0a1a3a; }
/* guide chat */
#guide { position: fixed; right: 1rem; bottom: 1rem; width: min(26rem, calc(100vw - 2rem)); height: min(34rem, calc(100vh - 6rem)); display: flex; flex-direction: column; z-index: 60; padding: .6rem; gap: .5rem; }
#guide[hidden] { display: none; }
#guide .gh { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } #guide .gh b { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-micro); }
#guide .gs { flex: 1; font-size: .7rem; opacity: .8; min-width: 8rem; }
#guide .gm { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .4rem; padding: .2rem; min-height: 0; }
#guide .gmsg { max-width: 90%; padding: .45rem .65rem; border-radius: 3px; line-height: 1.4; font-size: var(--t-sm); white-space: pre-wrap; }
#guide .gmsg.me { align-self: flex-end; background: var(--accent-dim); border: 1px solid var(--accent-line); }
#guide .gmsg.bot { align-self: flex-start; background: rgba(3, 7, 20, .6); border: 1px solid var(--line); }
#guide .gc { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 4.6rem; overflow-y: auto; }
#guide .chip { font: inherit; font-size: .72rem; padding: .2rem .55rem; border-radius: 2px; border: 1px solid var(--edge-dim); background: rgba(6, 12, 32, .7); color: inherit; cursor: pointer; }
#guide .chip:hover, #guide .chip:focus-visible { border-color: var(--accent); }
#guide .gf { display: flex; gap: .4rem; } #guide .gf input { flex: 1; min-width: 0; background: var(--track); border: 1px solid var(--edge-dim); border-radius: 3px; color: var(--ink); padding: .4rem .6rem; }
#guide .gf input:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }
@media (max-width: 600px) { #guide { right: .5rem; left: .5rem; width: auto; bottom: .5rem; height: min(70vh, 32rem); } }

/* ---- social: whispers, party chat, invite cards, trade window ---- */
#chatLog .whis { color: #e8b0ff; } #chatLog .pchat { color: #8be88b; }
#soccards { position: fixed; top: 4.6rem; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: .4rem; width: min(24rem, calc(100vw - 2rem)); pointer-events: none; }
#soccards .soccard { pointer-events: auto; padding: .55rem .7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; justify-content: space-between; font-size: var(--t-base); border-left: 3px solid var(--accent); }
#soccards .soccard span { min-width: 0; flex: 1 1 10rem; }
#trade { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 65; width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; padding: .8rem; display: grid; gap: .6rem; }
#trade[hidden] { display: none; }
#trade .th b { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-micro); }
#trade .tcols { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#trade h4 { margin: 0 0 .3rem; font-size: var(--t-sm); color: var(--ink-dim); font-weight: 600; }
#trade .tcol { min-width: 0; background: var(--track); border-radius: 2px; padding: .5rem; min-height: 5rem; }
#trade .trow { display: flex; align-items: center; gap: .4rem; font-size: var(--t-sm); padding: .1rem 0; } #trade .trow img { width: 1.4rem; height: 1.4rem; image-rendering: pixelated; } #trade .trow span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#trade .tempty { color: var(--ink-dim); font-style: italic; font-size: var(--t-sm); }
#trade .tgrid { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 9rem; overflow-y: auto; }
#trade .tslot { position: relative; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--edge-dim); border-radius: 2px; background: #060c22; cursor: pointer; } #trade .tslot.on { border-color: var(--accent); box-shadow: var(--glow); }
#trade .tslot img { width: 100%; height: 100%; image-rendering: pixelated; } #trade .tslot .cnt { position: absolute; right: 1px; bottom: 0; font-size: .65rem; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#trade .tgold { display: flex; align-items: center; gap: .4rem; font-size: var(--t-sm); } #trade .tgold input { width: 6rem; background: var(--track); border: 1px solid var(--edge-dim); border-radius: 2px; color: var(--ink); padding: .3rem .4rem; }
#trade .tstate { font-size: var(--t-sm); color: var(--accent); }
#trade .acts { display: flex; gap: .4rem; justify-content: flex-end; }
#pop { max-width: min(22rem, calc(100vw - 20px)); } #pop .acts { display: flex; flex-wrap: wrap; gap: .35rem; }

/* ---- welcome screen polish ---- */
.tw .chips { list-style: none; margin: -.2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tw .chips li { font-size: var(--t-xs); padding: .15rem .65rem; border-radius: 999px; border: 1px solid var(--edge-dim); color: var(--ink-dim); background: rgba(3, 7, 20, .35); letter-spacing: .04em; }
.herocard { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; border-radius: 3px; background: rgba(3, 7, 20, .45); border: 1px solid var(--edge-dim); border-left: 3px solid var(--accent); }
.herocard[hidden] { display: none; }
.herocard canvas { width: 3.4rem; height: 3.4rem; image-rendering: auto; flex: none; border-radius: 2px; background: rgba(6, 12, 34, .7); border: 1px solid var(--edge-dim); }
.herocard b { display: block; font-size: 1.1rem; color: #fff; } .herocard small { color: var(--ink-dim); font-size: var(--t-base); }
.tnews { padding: .55rem .8rem; border-radius: 3px; background: rgba(127, 216, 255, .06); border: 1px solid var(--line); border-left: 2px solid var(--accent); font-size: var(--t-sm); line-height: 1.5; color: var(--ink-dim); }
.tnews[hidden] { display: none; }
.tnews b { color: #fff; font-weight: 600; } .tnews ul { margin: .3rem 0; padding-left: 1.1rem; color: var(--ink-dim); } .tnews a { color: var(--accent); font-size: var(--t-sm); }
#hall summary, .ctrl summary { cursor: pointer; color: var(--ink-dim); font-size: var(--t-sm); } #hall summary b { color: var(--ink); }
.tw .foot { opacity: .7; } .tw .foot a { color: inherit; }

/* ---------- arena duel panel ---------- */
#duel { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 66; width: min(42rem, calc(100vw - 1rem)); max-height: calc(100vh - 1rem); overflow-y: auto; padding: .7rem; display: grid; gap: .5rem; }
#duel[hidden] { display: none; }
#duel .dhead { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--t-sm); color: var(--ink-dim); } #duel .dhead b { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: var(--t-micro); }
#duel .dfield { display: grid; grid-template-columns: 1fr auto 1fr; gap: .4rem; align-items: center; } #duel .dside { display: grid; gap: .35rem; min-width: 0; } #duel .dvs { color: var(--accent); font-weight: 700; }
#duel .dcard { position: relative; display: flex; gap: .4rem; align-items: center; background: var(--track); border: 1px solid var(--line); border-radius: 2px; padding: .3rem; transition: opacity .3s, border-color .2s, transform .15s; min-width: 0; }
#duel .dcard.mine { border-color: var(--accent-line); } #duel .dcard.down { opacity: .35; filter: grayscale(1); } #duel .dcard.guard { border-color: var(--mp); } #duel .dcard.hurt { transform: translateX(3px); border-color: var(--danger); }
#duel.picking .dcard:not(.down) { cursor: pointer; border-color: var(--accent); }
#duel .dport { width: 3.2rem; height: 3.2rem; image-rendering: pixelated; object-fit: contain; flex: none; background: #060c22; border-radius: 2px; }
#duel .dinfo { min-width: 0; flex: 1; display: grid; gap: .15rem; } #duel .dn { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #duel .dn small { color: var(--ink-dim); font-weight: 400; }
#duel .dbar { position: relative; height: .75rem; background: #000; border-radius: 1px; overflow: hidden; } #duel .dbar s { display: block; height: 100%; text-decoration: none; transition: width .5s; } #duel .dbar.hp s { background: linear-gradient(90deg, var(--hp-2), var(--hp)); } #duel .dbar.mp s { background: linear-gradient(90deg, var(--mp-2), var(--mp)); } #duel .dbar b { position: absolute; inset: 0; font-size: .6rem; line-height: .75rem; text-align: center; color: #fff; text-shadow: 0 0 2px #000; }
#duel .dbar[hidden] { display: none; }
#duel .dfloat { position: absolute; right: .5rem; top: 0; font-weight: 700; pointer-events: none; animation: dfl 1.1s ease-out forwards; text-shadow: 0 0 3px #000; } #duel .dfloat.dmg { color: var(--danger); } #duel .dfloat.crit { color: #ffd34d; font-size: 1.2em; } #duel .dfloat.heal { color: var(--hp); } #duel .dfloat.mpv { color: var(--mp); }
@keyframes dfl { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-1.4rem); opacity: 0; } }
#duel .dtimer { height: .4rem; background: var(--track); border-radius: 1px; overflow: hidden; } #duel .dtimer s { display: block; height: 100%; width: 0; background: var(--accent); text-decoration: none; } #duel .dtimer.low s { background: var(--danger); }
#duel .dlog { min-height: 5.2rem; max-height: 7rem; overflow: hidden; font-size: var(--t-sm); background: var(--track); border-radius: 2px; padding: .35rem .5rem; display: grid; align-content: end; gap: .1rem; } #duel .dlog .bad { color: var(--danger); } #duel .dlog .good { color: var(--good); }
#duel .dctl .dmain, #duel .dctl .dsub { display: flex; flex-wrap: wrap; gap: .35rem; } #duel .dnote { color: var(--ink-dim); font-style: italic; font-size: var(--t-sm); padding: .3rem 0; }
#duel .dres { text-align: center; padding: .5rem; border: 1px solid var(--accent-line); border-radius: 3px; background: rgba(3, 7, 20, .6); } #duel .dres h3 { margin: 0 0 .3rem; color: #fff; letter-spacing: .14em; text-transform: uppercase; } #duel .dres h3.good { color: var(--accent-2); } #duel .dres[hidden] { display: none; }
@media (max-width: 520px) { #duel .dfield { grid-template-columns: 1fr; } #duel .dvs { display: none; } }

.namerow { display: flex; gap: .4rem; } .namerow input { flex: 1; min-width: 0; }
.qcard.dim { opacity: .55; } .qcard .qt { font-weight: 700; } .qcard .qd { font-size: var(--t-sm); }

/* phones: while a panel, dialog, battle or duel is up, the walking controls and bottom toolbar get out of the way */
@media (pointer: coarse), (max-width: 760px) {
  body.uiopen #pad, body.uiopen #tbtns { opacity: 0; pointer-events: none; transform: translateY(1rem); }
  #pad, #tbtns { transition: opacity .2s, transform .2s; }
  body.induel #hud, body.induel #chat, body.induel #tracker, body.induel #miniWrap { display: none; }
  #duel { top: calc(env(safe-area-inset-top, 0px) + .5rem); transform: translateX(-50%); max-height: calc(100% - 1rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  #duel .btn { min-height: 2.6rem; padding-inline: .8rem; }
}

#photo { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; width: min(46rem, calc(100vw - 1rem)); max-height: calc(100% - 1rem); padding: .6rem; display: grid; gap: .5rem; }
#photo[hidden] { display: none; } #photo img { width: 100%; max-height: calc(100vh - 8rem); object-fit: contain; border-radius: 2px; background: #000; } #photo .acts { display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap; }

/* ---- Opening: dark glass window over the painted backdrop, light rays, drifting motes, mouse parallax ---- */
#title::before { translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -10px); transition: translate .6s ease-out; filter: saturate(1.12) contrast(1.04); }
#title .tfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#title .tfx canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#title .tfx .rays { position: absolute; inset: -20% -10% 20% -10%; background: repeating-conic-gradient(from 195deg at 78% -8%, rgba(255,240,200,.16) 0deg 2.2deg, transparent 2.2deg 7deg); mask-image: radial-gradient(ellipse 80% 90% at 78% 0%, #000 0%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 80% 90% at 78% 0%, #000 0%, transparent 72%); mix-blend-mode: screen; animation: trays 14s ease-in-out infinite alternate; }
#title .tfx .vig { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 38%, rgba(6,8,30,.62) 100%), linear-gradient(to bottom, rgba(6,8,30,.0) 60%, rgba(6,8,30,.55)); }
@keyframes trays { from { opacity: .55; transform: rotate(-1.2deg); } to { opacity: 1; transform: rotate(1.2deg); } }
.tw { background: linear-gradient(180deg, rgba(12, 22, 56, .72), rgba(2, 6, 22, .86)); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-radius: 4px; border: 1px solid var(--edge); box-shadow: var(--bevel), 0 0 0 1px rgba(127, 216, 255, .12), 0 18px 60px rgba(2, 6, 24, .7), 0 0 80px rgba(60, 120, 255, .12); animation: tin2 .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tin2 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.tw .eyebrow { text-align: center; letter-spacing: .38em; font-size: var(--t-micro); color: var(--accent); opacity: .9; }
.tw h1 { font-family: var(--f-display); font-weight: 700; text-align: center; font-size: clamp(2.1rem, 8.2vw, 3.7rem); line-height: 1.04; letter-spacing: .07em; text-transform: uppercase; text-shadow: none; filter: drop-shadow(0 2px 0 rgba(2, 6, 24, .9)) drop-shadow(0 0 16px rgba(255, 214, 120, .22)); }
.tw h1, .tw h1 em { background: linear-gradient(180deg, #fff6d0 0%, #f2cf74 48%, #c8933a 52%, #f6dc94 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tw h1 em { display: block; font-size: .62em; letter-spacing: .34em; margin-top: .25em; }
.tw h1::after { content: ''; display: block; height: 1px; margin: .6rem auto 0; width: 62%; background: linear-gradient(90deg, transparent, var(--accent), transparent); box-shadow: 0 0 8px rgba(127, 216, 255, .6); }
.tw .lede { text-align: center; margin-inline: auto; font-size: .98rem; color: var(--ink-dim); }
.tw .chips { justify-content: center; }
.tw .actions { justify-content: center; }
.tw #btnNew.primary, .tw #btnCont.primary { font-size: 1.15rem; padding: .7rem 2rem; letter-spacing: .06em; animation: tpulse 2.6s ease-in-out infinite; }
@keyframes tpulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 0 rgba(127, 216, 255, 0), 0 0 16px rgba(127, 216, 255, .3); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 0 5px rgba(127, 216, 255, .1), 0 0 30px rgba(127, 216, 255, .55); } }
.tw > * { animation: tfade .5s ease-out both; }
@keyframes tfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tw, .tw > *, .tw #btnNew.primary, .tw #btnCont.primary, #title .tfx .rays, #dlgMore, .lim s { animation: none !important; } #title::before { transition: none; } }
#titleNews ul { display: none; } #titleNews { padding: .5rem .8rem; }
@media (max-width: 640px), (max-height: 760px) { .tw .chips { display: none; } .tw { padding-block: 1.2rem; gap: .65rem; } }
#titleNews a { display: block; margin-top: .25rem; }
@media (min-aspect-ratio: 13/10) { .tw { width: min(94vw, max(34rem, calc(0.43 * max(100vw, 182.5vh)))); min-height: min(94vh, calc(0.57 * max(56vw, 100vh))); align-content: center; } }
/* hold the title's entrance until the loading splash is gone, so the two logos never overlap */
body:has(#boot:not(.gone)) #title .tw, body:has(#boot:not(.gone)) #title .tw > *, body:has(#boot:not(.gone)) #title .tfx { animation-play-state: paused !important; }
body:has(#boot:not(.gone)) #title .tfx { opacity: 0; }
#title .tfx { transition: opacity 1.2s ease .3s; }
.tw { animation-delay: .25s; } .tw > * { animation-delay: calc(.25s + var(--d, 0s)); }
.tw > :nth-child(2) { --d: .08s; } .tw > :nth-child(3) { --d: .16s; } .tw > :nth-child(4) { --d: .24s; } .tw > :nth-child(n+5) { --d: .32s; }
#boot { transition: opacity .45s ease; }

/* phone text-fit fixes: nothing may spill past its box */
@media (max-width: 600px) {
  #tracker { max-width: calc(100vw - .9rem); overflow: hidden; }
  #tracker .tk-h { font-size: .58rem; letter-spacing: .02em; min-width: 0; align-items: flex-start; }
  #tracker .tk-h > span { min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
  #tracker .tk-n { overflow-wrap: anywhere; hyphens: auto; }
  .tab[aria-selected="true"] { flex: 0 0 auto; overflow: visible; padding-inline: .5rem; }
  .eqslot .lbl { font-size: .58rem; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .eqslot { min-width: 0; }
  #dlgText, #dlg .txt { overflow-wrap: anywhere; }
  #dlgWho { left: .6rem; top: -.75rem; font-size: .66rem; padding: .18rem .55rem; }
  #region span { letter-spacing: .08em; white-space: normal; max-width: calc(100vw - 2rem); text-wrap: balance; }
}

/* hero card: grid tracks may shrink below their content, so bars and the name/LV row stay inside the frame */
#hud { grid-template-columns: minmax(0, 1fr); }
#hud > * { min-width: 0; }
#hud .nm b { flex: 1 1 auto; }
#hud .bar { min-width: 0; max-width: 100%; }
#hud .bar i { min-width: 0; }

/* phones: the quest tracker sits fully below the minimap instead of covering its lower edge */
@media (max-width: 600px) and (orientation: portrait) {
  #tracker { top: calc(env(safe-area-inset-top, 0px) + 5.5rem) !important; }
}

/* touch: battle commands and targets are big, separated tap targets (>= 44 px) instead of thin list rows */
@media (pointer: coarse), (max-width: 600px) {
  #battle { gap: .4rem; }
  #bFoes, #bCmdWin { height: auto; min-height: 9.7rem; max-height: 46vh; overflow-y: auto; }
  #bCmdWin { padding: .4rem; }
  #bCmds { grid-template-columns: 1fr 1fr; gap: .35rem; margin: 0; padding: 0; }
  #bCmds .btn { min-height: 2.9rem; padding: .2rem .5rem; justify-content: center; text-align: center; font-size: 1.1rem; border: 1px solid var(--edge-dim); border-radius: 3px; background: linear-gradient(180deg, rgba(22, 36, 78, .8), rgba(6, 12, 32, .9)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); touch-action: manipulation; }
  #bCmds .btn::before { display: none; }
  #bCmds .btn:focus, #bCmds .btn:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); background: linear-gradient(180deg, rgba(22, 36, 78, .8), rgba(6, 12, 32, .9)); border: 1px solid var(--edge-dim); }
  #bCmds .btn:active:not(:disabled) { transform: translateY(1px); background: var(--accent-dim); border-color: var(--accent); box-shadow: var(--glow); }
  #bCmds .btn:disabled { opacity: .4; }
  #bCmds .btn small { display: block; font-size: .7rem; opacity: .8; }
  #bFoes .foe { min-height: 2.8rem; padding: .25rem .4rem; border: 1px solid transparent; border-radius: 3px; touch-action: manipulation; }
  #bFoes .foe.sel:not(.dead) { background: var(--accent-dim); border-color: var(--accent-line); box-shadow: inset 3px 0 0 var(--accent); }
  #bFoes .foe .hpb { height: .3rem; }
}

/* d-pad lights up under the thumb: cyan rim on a dark glass disc */
#dpad button.on { border-color: var(--accent); box-shadow: 0 0 .9rem rgba(127, 216, 255, .75), inset 0 0 .6rem rgba(127, 216, 255, .35); transform: translateY(1px) scale(.97); color: var(--accent); }
#pad:has(#dpad button.on) { opacity: .95 !important; }

/* title-screen sound switch */
#title .tw { position: relative; }
.tmute { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; padding: 0.4rem; min-width: 0; }
.tmute.off { opacity: 0.6; }

/* title backdrop graded by the player's local time of day and season */
#title::before { transition: filter 1.2s; }
#title[data-tod="dawn"]::before { filter: saturate(1.1) sepia(.25) hue-rotate(-18deg) brightness(.95); }
#title[data-tod="dusk"]::before { filter: sepia(.4) saturate(1.3) hue-rotate(-28deg) brightness(.78); }
#title[data-tod="night"]::before { filter: brightness(.4) saturate(.8) hue-rotate(12deg) contrast(1.1); }
#title[data-season="autumn"]:not([data-tod="night"])::before { filter: sepia(.18) saturate(1.15) hue-rotate(-12deg); }
#title[data-season="winter"]:not([data-tod="night"])::before { filter: saturate(.7) brightness(1.05) hue-rotate(8deg); }
#title[data-tod="night"] .tw { box-shadow: 0 0 40px rgba(60, 90, 200, .25); }