/* SCRAPWRIGHT — steampunk UI: riveted brass plates, dark leather, parchment, gauge glass. */
:root {
    --ink: #120c08;
    --leather: #2a1a10;
    --leather2: #3a2516;
    --panel: rgba(30, 20, 13, 0.95);
    --panel2: rgba(46, 31, 20, 0.97);
    --brass: #e0b25a;
    --brass2: #a8782e;
    --brass3: #6a4a1e;
    --copper: #c8703a;
    --cream: #f6ead0;
    --parch: #ead8b0;
    --dim: #bfa98a;
    --steam: #9ad8e8;
    --red: #e8503a;
    --green: #8ae070;
    --hp-hi: #6ad860;
    --hp-mid: #f0c040;
    --hp-lo: #f0503a;
    --head: 'Cinzel', 'Georgia', 'Times New Roman', serif;
    --body: 'Alegreya Sans', 'Segoe UI', 'Trebuchet MS', Arial, sans-serif;
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --plate: linear-gradient(180deg, rgba(58, 38, 22, 0.96), rgba(28, 18, 11, 0.96));
    --rivets: radial-gradient(circle at 9px 9px, #f0cf80 0 2px, #6a4a1e 2.6px, transparent 3.2px), radial-gradient(circle at calc(100% - 9px) 9px, #f0cf80 0 2px, #6a4a1e 2.6px, transparent 3.2px), radial-gradient(circle at 9px calc(100% - 9px), #f0cf80 0 2px, #6a4a1e 2.6px, transparent 3.2px), radial-gradient(circle at calc(100% - 9px) calc(100% - 9px), #f0cf80 0 2px, #6a4a1e 2.6px, transparent 3.2px);
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--ink); color: var(--cream); font-family: var(--body); font-weight: 700; font-size: 16px; user-select: none; -webkit-user-select: none; }
body { touch-action: none; }
button { font-family: var(--body); font-weight: 800; color: inherit; background: none; border: none; cursor: pointer; font-size: inherit; }
button:disabled { cursor: default; }
input { font-family: var(--body); font-weight: 800; user-select: text; -webkit-user-select: text; }
small { font-weight: 600; opacity: 0.8; }
.hidden { display: none !important; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; font-size: 20px; }

#back-link {
    position: fixed; top: calc(8px + var(--safe-t)); left: calc(8px + var(--safe-l)); z-index: 9999; font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 400;
    color: #fff; background: rgba(0, 0, 0, 0.55); padding: 6px 12px; border-radius: 6px; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.25);
}
#back-link:hover { background: rgba(0, 0, 0, 0.8); }
body.playing #back-link { display: none; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* ------------------------------------------------------------------ shared bits */
.brassbtn, .pnl button, .pbox button, .screen button, .bmenu button, .dchoice {
    background: linear-gradient(180deg, #5a3c20, #3a2614); border: 2px solid var(--brass2); border-radius: 8px; padding: 7px 12px; color: var(--cream);
    box-shadow: inset 0 1px 0 rgba(255, 220, 150, 0.25), 0 2px 0 rgba(0, 0, 0, 0.5); transition: transform 0.08s, border-color 0.12s, background 0.12s;
}
.pnl button:hover:not(:disabled), .pbox button:hover:not(:disabled), .screen button:hover:not(:disabled), .bmenu button:hover:not(:disabled), .dchoice:hover,
.pnl button:focus-visible, .pbox button:focus-visible, .screen button:focus-visible, .bmenu button:focus-visible, .dchoice:focus-visible,
.pnl button:focus, .pbox button:focus, .screen button:focus, .bmenu button:focus, .dchoice:focus {
    outline: none; border-color: var(--brass); background: linear-gradient(180deg, #7a5428, #4a3018); box-shadow: 0 0 0 2px rgba(240, 200, 110, 0.35), inset 0 1px 0 rgba(255, 220, 150, 0.35);
}
.pnl button:active:not(:disabled), .pbox button:active:not(:disabled), .bmenu button:active:not(:disabled) { transform: translateY(1px); }
.pnl button:disabled, .pbox button:disabled, .bmenu button:disabled, .screen button:disabled { opacity: 0.4; filter: grayscale(0.6); }
button.ghost { background: rgba(0, 0, 0, 0.25); border-color: rgba(224, 178, 90, 0.35); }
button.sm { padding: 3px 8px; font-size: 13px; }

.type { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 6px; border-radius: 10px; background: color-mix(in srgb, var(--tc) 32%, #1a120c); border: 1px solid var(--tc); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.type.sm { font-size: 11px; padding: 0 6px 0 4px; }
.status { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--sc); color: #10080a; font-size: 11px; font-weight: 900; letter-spacing: 0.5px; margin-left: 3px; }
.bar { position: relative; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(0, 0, 0, 0.8); overflow: hidden; flex: 1; min-width: 40px; }
.bar b { display: block; height: 100%; border-radius: 3px; transition: width 0.15s; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3); }
.bar.xp { height: 5px; } .bar.xp b { background: linear-gradient(90deg, #5ab8e8, #9ae8ff); }
.bar.stat b { background: linear-gradient(90deg, var(--brass2), var(--brass)) !important; }
.pimg { display: block; object-fit: contain; image-rendering: auto; }
.pimg:not([src]) { visibility: hidden; }
.pimg.unseen { filter: brightness(0); }
.gild { color: #ffe080; text-shadow: 0 0 6px #ffc040; }
.empty { padding: 16px; text-align: center; color: var(--dim); font-style: italic; }
.sect { font-family: var(--head); font-size: 14px; color: var(--brass); letter-spacing: 1px; margin: 12px 0 6px; border-bottom: 1px solid rgba(224, 178, 90, 0.25); padding-bottom: 2px; }
.mchip { display: inline-block; padding: 2px 9px; border-radius: 10px; border: 1px solid var(--tc); background: color-mix(in srgb, var(--tc) 25%, #1a120c); font-size: 14px; }
.parts { display: flex; flex-wrap: wrap; gap: 5px; }
.part { padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(224, 178, 90, 0.3); font-size: 14px; }
.part i { color: var(--dim); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-right: 3px; }
.part.new { border-color: #8af0ff; box-shadow: 0 0 8px rgba(138, 240, 255, 0.45); color: #c8f8ff; }
.trait { font-size: 14px; font-weight: 600; color: var(--parch); margin: 3px 0; }
.trait b { color: var(--brass); font-weight: 800; }
.entry { font-style: italic; font-weight: 600; color: var(--parch); font-size: 15px; line-height: 1.35; }
.mrow { display: block; width: 100%; text-align: left; padding: 7px 10px; margin: 5px 0; border-radius: 8px; border-left: 5px solid var(--tc) !important; background: rgba(0, 0, 0, 0.3); font-size: 15px; }
.mrow.new { background: color-mix(in srgb, var(--tc) 18%, rgba(0, 0, 0, 0.4)); border: 1px solid var(--tc); }
.mmeta { color: var(--dim); font-size: 13px; font-weight: 700; }
.mdesc { font-size: 13px; color: var(--parch); font-weight: 600; margin-top: 2px; opacity: 0.9; }
.tnote { font-size: 13px; color: var(--dim); font-weight: 600; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.chip { padding: 4px 10px !important; border-radius: 14px !important; font-size: 14px; }
.chip.on { background: linear-gradient(180deg, #c8903a, #8a5a20) !important; border-color: #ffd890 !important; color: #1a0e06; }

/* ------------------------------------------------------------------ overworld HUD */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#marks { position: absolute; inset: 0; }
.mark { position: absolute; transform: translate(-50%, -100%); font-family: var(--head); font-weight: 900; font-size: 34px; color: #ffe060; text-shadow: 0 0 2px #000, 0 3px 0 #6a2a0a, 0 0 14px rgba(255, 140, 40, 0.9); animation: markPop 0.3s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes markPop { from { transform: translate(-50%, -100%) scale(0.2); } }
#objective {
    position: absolute; top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); max-width: min(380px, 60vw); padding: 8px 18px; font-size: 14px; line-height: 1.25;
    background: var(--rivets), var(--plate); border: 2px solid var(--brass2); border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); color: var(--parch);
}
#objective .oi { color: var(--brass); display: inline-block; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#banner { position: absolute; top: 22%; left: 50%; transform: translateX(-50%); text-align: center; padding: 10px 40px; background: linear-gradient(90deg, transparent, rgba(20, 12, 6, 0.85) 18%, rgba(20, 12, 6, 0.85) 82%, transparent); white-space: nowrap; }
#banner.in { animation: bannerIn 0.6s ease-out; }
#banner.out { opacity: 0; transition: opacity 0.6s; }
@keyframes bannerIn { from { opacity: 0; letter-spacing: 8px; } }
#banner .b1 { font-family: var(--head); font-weight: 900; font-size: 30px; color: var(--brass); text-shadow: 0 2px 0 #3a2008, 0 0 18px rgba(224, 178, 90, 0.5); letter-spacing: 2px; }
#banner .b2 { font-size: 15px; color: var(--parch); font-style: italic; }
#toasts { position: absolute; top: calc(64px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(520px, 90vw); }
.toast { padding: 6px 16px; border-radius: 10px; background: rgba(28, 18, 10, 0.92); border: 1px solid var(--brass2); font-size: 15px; text-align: center; animation: toastIn 0.25s ease-out; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }
.toast.warn { border-color: var(--red); color: #ffc0b0; }
.toast.out { opacity: 0; transform: translateY(-8px); transition: 0.4s; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-10px); } }

/* ------------------------------------------------------------------ dialogue */
#dialog {
    position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); bottom: calc(14px + var(--safe-b)); width: min(860px, calc(100% - 24px)); min-height: 120px;
    display: flex; gap: 14px; align-items: stretch; padding: 14px 18px 14px 14px; cursor: pointer;
    background: var(--rivets), linear-gradient(180deg, #f2e2bc, #dcc496); color: #2a1a0c; border: 4px solid var(--brass2); border-radius: 14px;
    box-shadow: 0 0 0 2px #3a2410, 0 10px 28px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(120, 80, 30, 0.25); animation: dIn 0.18s ease-out;
}
@keyframes dIn { from { transform: translate(-50%, 16px); opacity: 0; } }
#dialog .dpic { width: 92px; height: 92px; flex: none; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #5a4a3a, #2a1c12); border: 3px solid var(--brass2); align-self: center; }
#dialog .dpic.item { display: grid; place-items: center; font-size: 46px; }
#dialog .dbody { flex: 1; position: relative; min-width: 0; }
#dialog .dname { position: absolute; top: -32px; left: -4px; padding: 3px 14px; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, #6a4420, #3a2410); border: 2px solid var(--brass2); border-bottom: none; color: var(--brass); font-family: var(--head); font-size: 14px; white-space: nowrap; }
#dialog .dtext { font-size: 19px; line-height: 1.38; font-weight: 700; white-space: pre-wrap; min-height: 3.6em; }
#dialog.narration .dtext { font-style: italic; }
#dialog .dmore { position: absolute; right: 0; bottom: -4px; color: var(--copper); font-size: 14px; animation: bob 0.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
#dialog .dchoices { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; flex-wrap: wrap; }
.dchoice { min-width: 90px; font-size: 16px; }

/* ------------------------------------------------------------------ battle */
#battle { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#battle .gauge {
    position: absolute; width: min(330px, 46vw); padding: 8px 14px 9px; pointer-events: auto;
    background: var(--rivets), var(--plate); border: 3px solid var(--brass2); border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); animation: gIn 0.35s ease-out;
}
#battle .gauge.foe { top: calc(16px + var(--safe-t)); left: calc(16px + var(--safe-l)); }
/* Like the classic layout: the foe's gauge top-left (its bot stands top-right), yours bottom-right just above
   the command box (your bot stands bottom-left). --bbox-h tracks the box, whose height changes with each menu. */
#battle .gauge.me { right: calc(16px + var(--safe-r)); bottom: calc(var(--bbox-h, 148px) + 22px + var(--safe-b)); }
#battle.tall-menu .gauge.me { display: none; }
@keyframes gIn { from { opacity: 0; transform: translateY(-10px); } }
.grow { display: flex; align-items: baseline; gap: 6px; }
.gname { font-family: var(--head); font-size: 17px; color: var(--cream); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gown { color: var(--brass); font-size: 14px; }
.glv { font-family: var(--head); color: var(--brass); font-size: 15px; }
.gtypes { display: flex; gap: 4px; margin: 3px 0 4px; align-items: center; flex-wrap: wrap; }
.ghp { display: flex; align-items: center; gap: 6px; }
.ghp span { font-size: 11px; color: var(--brass); font-weight: 900; letter-spacing: 1px; }
.ghp .bar { height: 10px; }
.gnum { text-align: right; font-size: 14px; color: var(--parch); margin: 2px 0 3px; font-variant-numeric: tabular-nums; }
.bnums { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fnum { position: absolute; transform: translate(-50%, -50%); font-family: var(--head); font-weight: 900; font-size: 30px; color: #fff; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.8); animation: fnum 1.2s ease-out forwards; white-space: nowrap; }
@keyframes fnum { 0% { transform: translate(-50%, -30%) scale(0.5); opacity: 0; } 15% { transform: translate(-50%, -60%) scale(1.15); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(-50%, -140%) scale(1); opacity: 0; } }
.fnum.super { color: #ffb040; font-size: 38px; } .fnum.weak { color: #b8b0a0; font-size: 24px; } .fnum.crit { color: #ffe040; font-size: 36px; }
.fnum.chip { color: #e0a0ff; font-size: 22px; } .fnum.heal { color: var(--green); }
.fnum.level { color: var(--brass); font-size: 34px; } .fnum.up { color: #90e0ff; font-size: 22px; } .fnum.down { color: #ff9a8a; font-size: 22px; }
.fnum.trait { color: #ffe9b0; font-size: 20px; font-family: var(--body); } .fnum.miss { color: #ddd; font-size: 22px; }
.bbox {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(12px + var(--safe-b)); width: min(980px, calc(100% - 24px)); min-height: 148px; pointer-events: auto;
    display: flex; gap: 12px; padding: 12px; background: var(--rivets), var(--plate); border: 4px solid var(--brass2); border-radius: 14px; box-shadow: 0 0 0 2px #2a1808, 0 10px 26px rgba(0, 0, 0, 0.6);
}
.bmsg { flex: 1; font-size: 20px; line-height: 1.35; padding: 6px 8px; color: var(--cream); min-height: 3em; }
.bmenu { flex: 0 0 auto; display: grid; gap: 6px; align-content: start; }
.bmenu.cmd { grid-template-columns: 1fr 1fr; width: min(340px, 44%); }
.bmenu .cmd { font-family: var(--head); font-size: 18px; padding: 12px 8px; }
.bmenu .cmd.fight { border-color: #e88a3a; } .bmenu .cmd.team { border-color: #6ad860; } .bmenu .cmd.bag { border-color: #e0b25a; } .bmenu .cmd.run { border-color: #7ab8e8; }
.bmenu.moves { grid-template-columns: 1fr 1fr; width: min(520px, 58%); }
.bmenu .mv { text-align: left; display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'n p' 'i i'; padding: 7px 10px; border-left: 6px solid var(--tc); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 30%, #3a2614), #2a1a0e); }
.mvn { grid-area: n; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mvp { grid-area: p; font-size: 13px; color: var(--parch); font-variant-numeric: tabular-nums; }
.mvi { grid-area: i; font-size: 12px; color: var(--dim); font-weight: 700; }
.eff { font-style: normal; font-weight: 900; padding: 0 5px; border-radius: 4px; margin-left: 4px; font-size: 11px; }
.eff.up { background: #e8803a; color: #1a0a00; } .eff.down { background: #6a6a6a; color: #eee; } .eff.none { background: #2a2a2a; color: #aaa; }
.bmenu .back { grid-column: 1 / -1; padding: 6px; font-size: 14px; }
.bmenu.team, .bmenu.bag { width: min(560px, 60%); grid-template-columns: 1fr 1fr; max-height: min(52vh, 360px); overflow-y: auto; }
.bmenu .tm { display: grid; grid-template-columns: 44px 1fr; grid-template-areas: 'p n' 'p b' 'p h'; column-gap: 8px; text-align: left; padding: 5px 8px; align-items: center; }
.bmenu .tm.active { border-color: var(--brass); }
.tmimg { grid-area: p; width: 44px; height: 44px; }
.tmn { grid-area: n; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bmenu .tm .bar { grid-area: b; }
.tmh { grid-area: h; font-size: 12px; color: var(--dim); }
.bmenu .tabs { grid-column: 1 / -1; }
.bmenu .ilist { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.bmenu .it { display: flex; align-items: center; gap: 8px; text-align: left; padding: 6px 10px; }

/* ------------------------------------------------------------------ panels */
#panel { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(10, 6, 2, 0.45), rgba(10, 6, 2, 0.8)); padding: calc(10px + var(--safe-t)) calc(10px + var(--safe-r)) calc(10px + var(--safe-b)) calc(10px + var(--safe-l)); }
.pnl {
    width: min(760px, 100%); max-height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 18px; position: relative;
    background: var(--rivets), linear-gradient(180deg, rgba(52, 34, 20, 0.98), rgba(26, 17, 10, 0.98)); border: 4px solid var(--brass2); border-radius: 16px;
    box-shadow: 0 0 0 2px #2a1808, 0 18px 50px rgba(0, 0, 0, 0.7), inset 0 0 60px rgba(0, 0, 0, 0.4); animation: pIn 0.18s ease-out; touch-action: pan-y;
}
@keyframes pIn { from { transform: scale(0.96); opacity: 0; } }
.pnl.menu { width: min(520px, 100%); }
.pnl.settings { width: min(600px, 100%); }
.phead { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding-right: 44px; }
.ptitle { font-family: var(--head); font-weight: 900; font-size: 22px; color: var(--brass); text-shadow: 0 2px 0 #1a0e04; letter-spacing: 0.5px; }
.ptitle small { font-family: var(--body); font-size: 14px; color: var(--dim); }
.psub { width: 100%; font-size: 14px; color: var(--dim); font-weight: 600; display: flex; gap: 4px; flex-wrap: wrap; }
.pnl .pclose { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border-radius: 50%; font-size: 16px; }
.pnote { min-height: 22px; margin-top: 8px; text-align: center; color: var(--brass); font-size: 15px; }
.pnote.flash { animation: flash 0.6s; }
@keyframes flash { 0% { color: #fff; transform: scale(1.06); } }
.prow { display: flex; gap: 8px; justify-content: center; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.menu-grid .big { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px; font-size: 26px; }
.menu-grid .big span { font-size: 15px; font-family: var(--head); }
.trainer-card { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: linear-gradient(180deg, #ecdcb6, #d4ba88); color: #2a1a0c; border: 2px solid var(--brass2); box-shadow: inset 0 0 20px rgba(120, 80, 30, 0.3); }
.tc-row { display: flex; justify-content: space-between; font-size: 15px; padding: 2px 0; border-bottom: 1px dashed rgba(90, 60, 20, 0.3); }
.tc-row span { color: #6a4a24; }
.seals { display: flex; gap: 6px; justify-content: center; margin: 10px 0 6px; flex-wrap: wrap; }
.seal { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; background: rgba(60, 40, 20, 0.25); border: 2px dashed rgba(90, 60, 20, 0.4); filter: grayscale(1); opacity: 0.45; }
.seal.got { background: radial-gradient(circle at 35% 30%, #fff2c0, #e0b25a 45%, #8a5a1a); border: 2px solid var(--tc); filter: none; opacity: 1; box-shadow: 0 0 8px var(--tc); }
.tc-obj { font-size: 14px; font-style: italic; color: #4a3014; text-align: center; }

.tlist { display: flex; flex-direction: column; gap: 6px; }
.trow { display: flex; gap: 6px; align-items: stretch; }
.tcell { flex: 1; display: flex; gap: 10px; align-items: center; text-align: left; padding: 6px 10px !important; min-width: 0; }
.timg { width: 60px; height: 60px; flex: none; }
.tinfo { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tname { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttypes { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.thp { font-size: 12px; color: var(--dim); font-weight: 600; }
.tacts { display: flex; flex-direction: column; gap: 4px; }
.tacts button { padding: 3px 8px !important; font-size: 13px; flex: 1; min-width: 44px; }

.sumgrid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
.sumpic { display: flex; flex-direction: column; gap: 6px; align-items: center; text-align: center; }
.bigimg { width: 200px; height: 200px; border-radius: 14px; background: radial-gradient(circle at 50% 45%, rgba(224, 178, 90, 0.25), transparent 70%); }
.xpl { font-size: 12px; color: var(--dim); }
.held { font-size: 13px; color: var(--parch); }
.sumstats { display: flex; flex-direction: column; gap: 3px; }
.srow { display: grid; grid-template-columns: 80px 42px 1fr 52px; gap: 8px; align-items: center; font-size: 15px; }
.srow .sn { color: var(--dim); }
.srow .sv { text-align: right; font-variant-numeric: tabular-nums; }
.srow.up .sn { color: #ffa080; } .srow.down .sn { color: #80b0ff; }
.srow .cal { font-size: 9px; color: var(--brass); letter-spacing: 1px; }

.tabs { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.tab { padding: 6px 12px !important; border-radius: 8px 8px 3px 3px !important; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.tab.on { background: linear-gradient(180deg, #c8903a, #8a5a20) !important; color: #1a0e06; border-color: #ffd890 !important; }
.bagtabs .tab span { font-size: 13px; }
.ilist { display: flex; flex-direction: column; gap: 5px; }
.irow { display: flex; align-items: center; gap: 10px; text-align: left; padding: 7px 10px !important; }
.ii { font-size: 24px; width: 32px; text-align: center; flex: none; }
.in { flex: 1; display: flex; flex-direction: column; font-size: 16px; min-width: 0; }
.in small { font-size: 12px; color: var(--dim); font-weight: 600; }
.ic { font-variant-numeric: tabular-nums; color: var(--parch); }
.iv { font-size: 12px; padding: 2px 8px; border-radius: 6px; background: rgba(224, 178, 90, 0.2); color: var(--brass); }

.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.rcell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px !important; gap: 1px; }
.rcell.owned { border-color: var(--brass) !important; }
.rimg { width: 80px; height: 80px; }
.unk { width: 80px; height: 80px; display: grid; place-items: center; font-family: var(--head); font-size: 34px; color: rgba(224, 178, 90, 0.3); }
.rn { font-size: 11px; color: var(--dim); }
.rname { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rown { position: absolute; top: 4px; right: 6px; color: var(--brass); font-style: normal; font-size: 13px; }
.pager span { color: var(--dim); min-width: 60px; text-align: center; }
.evos { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: center; }
.evo { display: flex; flex-direction: column; align-items: center; padding: 4px 8px !important; font-size: 13px; }
.evo.cur { border-color: var(--brass) !important; }
.eimg { width: 72px; height: 72px; }
.evoarrow { display: flex; flex-direction: column; align-items: center; color: var(--brass); font-size: 20px; }
.evoarrow small { font-size: 11px; color: var(--dim); max-width: 90px; text-align: center; }
.prof { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.prof div { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.prof i { color: var(--dim); font-style: normal; width: 74px; }
.where { font-size: 14px; color: var(--parch); }

.matbar { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); margin-bottom: 8px; }
.mat { font-size: 13px; padding: 1px 7px; border-radius: 6px; background: rgba(224, 178, 90, 0.12); white-space: nowrap; }
.mat.short { color: #ff9a8a; background: rgba(232, 80, 58, 0.12); }
.mats { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.rlist { display: flex; flex-direction: column; gap: 5px; }
.rrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(224, 178, 90, 0.18); }
.rrow button { padding: 5px 10px !important; font-size: 14px; flex: none; }
.rrow .timg { width: 48px; height: 48px; }
.price { color: var(--brass); font-variant-numeric: tabular-nums; white-space: nowrap; }
.locker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lcol { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lcell { display: grid; grid-template-columns: 48px 1fr auto; grid-template-areas: 'p n b' 'p t r'; column-gap: 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: rgba(0, 0, 0, 0.25); }
.lcell .timg { grid-area: p; width: 48px; height: 48px; }
.lname { grid-area: n; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ltypes { grid-area: t; display: flex; gap: 3px; flex-wrap: wrap; }
.lcell button { grid-area: b; padding: 3px 8px !important; font-size: 13px; }
.lcell button.sm { grid-area: r; font-size: 11px; }
.wmap { width: 100%; max-width: 560px; margin: 0 auto; aspect-ratio: 1; }
.wmap svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6)); }
.wmap line { stroke: rgba(90, 60, 20, 0.35); stroke-width: 0.6; stroke-dasharray: 1 1; }
.wmap line.seen { stroke: #6a3a10; stroke-dasharray: none; stroke-width: 0.8; }
.wmap .node circle { fill: rgba(90, 60, 20, 0.35); stroke: rgba(60, 30, 10, 0.5); stroke-width: 0.3; }
.wmap .node.known circle { fill: #8a4a1a; }
.wmap .node.town circle { fill: #5a2a0a; stroke: #e0b25a; stroke-width: 0.5; }
.wmap .node.here circle { fill: #e8503a; stroke: #fff; stroke-width: 0.6; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { r: 3.2; } }
.wmap text { font-family: var(--body); font-size: 2.6px; font-weight: 800; fill: #3a1e08; text-anchor: middle; }
.setrow { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid rgba(224, 178, 90, 0.12); }
.setrow > span { width: 110px; color: var(--parch); }

/* ------------------------------------------------------------------ prompts */
#prompt { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b)); background: rgba(10, 6, 2, 0.72); overflow-y: auto; }
.pbox { width: min(600px, 100%); max-height: 100%; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; background: var(--rivets), linear-gradient(180deg, rgba(52, 34, 20, 0.98), rgba(26, 17, 10, 0.98)); border: 4px solid var(--brass2); border-radius: 16px; box-shadow: 0 0 0 2px #2a1808, 0 18px 50px rgba(0, 0, 0, 0.7); animation: pIn 0.2s ease-out; }
.pbox .ptitle { display: flex; align-items: center; gap: 10px; justify-content: center; text-align: center; flex-wrap: wrap; }
.pbox .psub { justify-content: center; text-align: center; }
.pbox > button.default:last-child { align-self: center; min-width: 180px; margin-top: 8px; font-size: 17px; }
.mrow.btn { cursor: pointer; }
#prompt.evolve { background: radial-gradient(circle at 50% 45%, #2a1a0a, #050302); }
.evobox { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.evotext { font-family: var(--head); font-size: 24px; color: var(--brass); text-shadow: 0 2px 0 #000; max-width: 90vw; }
.evostage { position: relative; width: min(320px, 76vw); height: min(320px, 76vw); }
.evostage .pimg { position: absolute; inset: 0; width: 100%; height: 100%; transition: filter 0.1s; }
.evostage .evo-to { opacity: 0; }
.evostage.show-to .evo-from { opacity: 0; } .evostage.show-to .evo-to { opacity: 1; }
.evostage.glow .pimg { filter: brightness(2.4) saturate(0) drop-shadow(0 0 20px #fff4c0); }
.evostage.done .pimg { filter: drop-shadow(0 0 18px rgba(255, 220, 140, 0.7)); animation: evoPop 0.5s ease-out; }
@keyframes evoPop { from { transform: scale(1.25); } }
.evorays { position: absolute; inset: -40%; background: repeating-conic-gradient(rgba(255, 210, 120, 0.22) 0 8deg, transparent 8deg 20deg); border-radius: 50%; mask-image: radial-gradient(circle, #000 20%, transparent 68%); -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 68%); animation: spin 8s linear infinite; opacity: 0; transition: opacity 1s; }
.evostage.glow .evorays { opacity: 1; }
.timg { border-radius: 8px; }
.repairbox { align-items: center; }
.dial { width: min(340px, 80vw); }
.dial svg { width: 100%; overflow: visible; }
.dial .arc { fill: none; stroke: #3a2614; stroke-width: 16; stroke-linecap: round; }
.dial .zone { fill: none; stroke: #ffd060; stroke-width: 16; filter: drop-shadow(0 0 6px #ffb020); }
.dial line { stroke: #e8503a; stroke-width: 4; stroke-linecap: round; }
.dial .hub { fill: var(--brass); stroke: #3a2008; stroke-width: 2; }
.joints { display: flex; gap: 14px; }
.joints span { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--brass2); background: #1a100a; }
.joints span.ok { background: radial-gradient(circle, #fff6c0, #ffa020); box-shadow: 0 0 10px #ffa020; }
.joints span.bad { background: #5a2018; }
.pbox .weld { font-family: var(--head); font-size: 22px !important; padding: 12px 40px !important; border-color: #ff9040 !important; }
#prompt.ending { background: #050302; }
.endbox { position: relative; width: min(720px, 100%); text-align: center; display: flex; flex-direction: column; gap: 12px; padding: 30px 20px; }
.endsky { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 120%, #c8602a, #4a1a2a 40%, #0a0614 75%); }
.endsky::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 60%, #ffe, transparent), radial-gradient(1px 1px at 85% 50%, #fff, transparent), radial-gradient(1px 1px at 10% 70%, #fff, transparent); animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: 0.4; } }
.endtitle { font-family: var(--head); font-weight: 900; font-size: clamp(28px, 6vw, 48px); color: var(--brass); text-shadow: 0 3px 0 #3a2008, 0 0 30px rgba(255, 180, 80, 0.6); letter-spacing: 3px; }
.endtext { font-size: 18px; line-height: 1.5; color: var(--parch); font-weight: 600; }
.cteams { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cteam { display: flex; flex-direction: column; align-items: center; font-size: 13px; }
.endstats { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; color: var(--brass); font-size: 15px; }
.credits { font-size: 13px; color: var(--dim); font-style: italic; }
.endbox > button { align-self: center; min-width: 220px; font-size: 18px; }

/* ------------------------------------------------------------------ title + new game */
#screens { position: fixed; inset: 0; z-index: 25; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); }
.screen.title { background: radial-gradient(ellipse at center, transparent 30%, rgba(10, 6, 2, 0.75)); }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 0.9; }
.logo .l1, .logo .l2 { font-family: var(--head); font-weight: 900; letter-spacing: 6px; background: linear-gradient(180deg, #fff2c0, #e0b25a 45%, #8a5a1a 55%, #e0b25a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #2a1606) drop-shadow(0 0 22px rgba(224, 160, 70, 0.45)); }
.logo .l1 { font-size: clamp(44px, 11vw, 96px); }
.logo .l2 { font-size: clamp(36px, 9vw, 80px); letter-spacing: 10px; }
.logo .cog { position: absolute; font-size: clamp(60px, 14vw, 130px); color: rgba(224, 178, 90, 0.25); animation: spin 14s linear infinite; z-index: -1; }
.logo .cog.c1 { left: -14%; top: -20%; } .logo .cog.c2 { right: -12%; bottom: -24%; animation-direction: reverse; font-size: clamp(44px, 10vw, 96px); }
.tagline { font-size: clamp(15px, 2.6vw, 20px); font-style: italic; color: var(--parch); text-shadow: 0 2px 4px #000; text-align: center; }
.tmenu { display: flex; flex-direction: column; gap: 10px; width: min(320px, 86vw); }
.tmenu button { font-family: var(--head); font-size: 20px; padding: 12px; display: flex; flex-direction: column; align-items: center; }
.tmenu button small { font-family: var(--body); font-size: 13px; color: var(--dim); }
.tfoot { position: absolute; bottom: calc(14px + var(--safe-b)); font-size: 13px; color: var(--dim); text-shadow: 0 1px 2px #000; text-align: center; padding: 0 12px; }
.screen.newgame { background: rgba(10, 6, 2, 0.6); overflow-y: auto; justify-content: safe center; }
.ngbox { width: min(760px, 100%); padding: 18px 20px; background: var(--rivets), linear-gradient(180deg, rgba(52, 34, 20, 0.98), rgba(26, 17, 10, 0.98)); border: 4px solid var(--brass2); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7); }
.ngbox .ptitle { text-align: center; margin-bottom: 10px; }
.nggrid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: center; }
.ngprev { display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle at 50% 40%, rgba(224, 178, 90, 0.25), rgba(0, 0, 0, 0.3)); }
.ngimg { width: 210px; height: 210px; }
.ngopts { display: flex; flex-direction: column; gap: 6px; }
.ngname { display: flex; align-items: center; gap: 8px; color: var(--parch); }
.ngname input { flex: 1; min-width: 0; width: 100%; font-size: 18px; padding: 6px 10px; border-radius: 8px; border: 2px solid var(--brass2); background: #f2e2bc; color: #2a1a0c; outline: none; }
.ngname input:focus { border-color: var(--brass); box-shadow: 0 0 0 2px rgba(240, 200, 110, 0.4); }
.ngrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ngrow > span { width: 70px; color: var(--dim); font-size: 14px; }
.ngrow .sw { width: 28px; height: 28px; padding: 0 !important; border-radius: 50% !important; border: 2px solid rgba(0, 0, 0, 0.5) !important; }
.ngrow .sw.on { border-color: #fff !important; box-shadow: 0 0 0 2px var(--brass) !important; }
.ngrow .chip { font-size: 13px; padding: 3px 9px !important; }
.ngbox .prow { justify-content: space-between; }
.ngbox #ngstart { font-family: var(--head); font-size: 17px; padding: 10px 18px; }

/* ------------------------------------------------------------------ touch controls */
#touch { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#dpad { position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(22px + var(--safe-b)); width: 150px; height: 150px; pointer-events: auto; touch-action: none; border-radius: 50%; background: radial-gradient(circle, rgba(58, 38, 22, 0.55), rgba(28, 18, 11, 0.4)); border: 3px solid rgba(224, 178, 90, 0.45); }
#dpad i { position: absolute; width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(180deg, rgba(122, 84, 40, 0.8), rgba(58, 38, 20, 0.8)); border: 2px solid rgba(224, 178, 90, 0.6); }
#dpad i::after { content: ''; position: absolute; left: 50%; top: 50%; border: 8px solid transparent; transform: translate(-50%, -50%); }
#dpad .up { left: 50%; top: 8px; margin-left: -22px; } #dpad .up::after { border-bottom-color: var(--brass); margin-top: -4px; }
#dpad .down { left: 50%; bottom: 8px; margin-left: -22px; } #dpad .down::after { border-top-color: var(--brass); margin-top: 4px; }
#dpad .left { top: 50%; left: 8px; margin-top: -22px; } #dpad .left::after { border-right-color: var(--brass); margin-left: -4px; }
#dpad .right { top: 50%; right: 8px; margin-top: -22px; } #dpad .right::after { border-left-color: var(--brass); margin-left: 4px; }
#dpad.up .up, #dpad.down .down, #dpad.left .left, #dpad.right .right { background: linear-gradient(180deg, #e0b25a, #8a5a1a); }
#dpad b { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0cf80, #6a4a1e); }
#tbtns { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(22px + var(--safe-b)); width: 170px; height: 150px; pointer-events: none; }
#tbtns button { position: absolute; pointer-events: auto; touch-action: none; border-radius: 50%; font-family: var(--head); font-weight: 900; color: #1a0e06; border: 3px solid #3a2008; box-shadow: 0 4px 0 #2a1606, inset 0 2px 0 rgba(255, 255, 255, 0.4); }
#tb-a { right: 0; top: 18px; width: 74px; height: 74px; font-size: 28px; background: radial-gradient(circle at 35% 30%, #fff0c0, #e0b25a 50%, #a8782e); }
#tb-b { left: 18px; bottom: 0; width: 62px; height: 62px; font-size: 24px; background: radial-gradient(circle at 35% 30%, #f0c8a0, #c8703a 50%, #8a4a1e); }
#tb-menu { left: 0; top: 0; width: 44px; height: 44px; font-size: 20px; color: var(--brass) !important; background: rgba(28, 18, 11, 0.8); border-color: var(--brass2) !important; }
#tbtns button.down { transform: translateY(3px); box-shadow: 0 1px 0 #2a1606; filter: brightness(1.2); }
/* With touch controls showing, lift the dialogue box above them. */
body.touch #dialog { bottom: calc(190px + var(--safe-b)); }
body.touch .pnl .pclose { width: 44px; height: 44px; top: 8px; right: 8px; font-size: 18px; }
body.touch .phead { padding-right: 52px; }

/* ------------------------------------------------------------------ narrow screens */
@media (max-width: 720px) {
    #dialog { min-height: 104px; gap: 10px; padding: 12px; }
    #dialog .dpic { width: 64px; height: 64px; }
    #dialog .dtext { font-size: 17px; }
    #objective { font-size: 13px; max-width: calc(100vw - 24px); left: calc(12px + var(--safe-l)); right: auto; }
    #banner .b1 { font-size: 24px; }
    #toasts { top: calc(84px + var(--safe-t)); }
    .bbox { flex-direction: column; min-height: 0; gap: 8px; padding: 10px; }
    .bmsg { font-size: 17px; min-height: 2.8em; padding: 2px 4px; }
    .bmenu.cmd, .bmenu.moves, .bmenu.team, .bmenu.bag { width: 100%; }
    .bmenu.team, .bmenu.bag { grid-template-columns: 1fr; max-height: 46vh; }
    .bmenu .ilist { grid-template-columns: 1fr; }
    .bmenu .cmd { padding: 11px 6px; font-size: 16px; }
    .mvn { font-size: 15px; }
    #battle .gauge { width: min(300px, 62vw); padding: 6px 10px; }
    #battle .gauge.me { bottom: calc(var(--bbox-h, 190px) + 18px + var(--safe-b)); }
    .gname { font-size: 15px; }
    .pnl { padding: 14px 12px; border-width: 3px; }
    .ptitle { font-size: 19px; }
    .sumgrid { grid-template-columns: 1fr; }
    .bigimg { width: 160px; height: 160px; }
    .srow { grid-template-columns: 70px 36px 1fr 48px; font-size: 14px; }
    .locker { grid-template-columns: 1fr; }
    .menu-grid .big { padding: 10px 4px; font-size: 22px; }
    .menu-grid .big span { font-size: 13px; }
    .rgrid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .rimg, .unk { width: 64px; height: 64px; }
    .nggrid { grid-template-columns: 1fr; }
    .ngimg { width: 150px; height: 150px; }
    .rrow { flex-wrap: wrap; }
    .rrow .in { flex-basis: calc(100% - 50px); }
}
/* Phones held sideways: short screens. */
@media (max-height: 500px) {
    #dialog { min-height: 0; padding: 8px 12px; }
    #dialog .dpic { width: 56px; height: 56px; }
    #dialog .dtext { font-size: 16px; min-height: 2.6em; }
    body.touch #dialog { bottom: calc(8px + var(--safe-b)); width: calc(100% - 2 * (190px + max(var(--safe-l), var(--safe-r)))); min-width: 280px; }
    #banner { top: 12%; }
    .bbox { min-height: 0; padding: 8px; }
    .bmsg { font-size: 16px; }
    .bmenu.team, .bmenu.bag { max-height: 58vh; }
    #battle .gauge { padding: 5px 10px; }
    .gtypes { display: none; }
    #dpad { width: 130px; height: 130px; bottom: calc(14px + var(--safe-b)); }
    #tbtns { bottom: calc(14px + var(--safe-b)); }
    .logo .l1 { font-size: 46px; } .logo .l2 { font-size: 38px; }
    .screen { gap: 10px; }
    .tmenu button { padding: 8px; font-size: 17px; }
    .nggrid { grid-template-columns: 160px 1fr; }
    .ngimg { width: 150px; height: 150px; }
    .evostage { width: 46vh; height: 46vh; }
}
@media (max-width: 720px) and (max-height: 500px) {
    .bbox { flex-direction: row; }
    .bmenu.cmd { width: 46%; }
    .bmenu.moves, .bmenu.team, .bmenu.bag { width: 60%; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}