/* V4 World Map Quest. Aged parchment, ink and gold: an illuminated atlas you can walk through. */
@font-face { font-family: 'Cinzel Decorative'; src: url('fonts/cinzel-decorative-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Cinzel Decorative'; src: url('fonts/cinzel-decorative-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('fonts/alegreya-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('fonts/alegreya-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('fonts/alegreya-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('fonts/alegreya-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Alegreya'; src: url('fonts/alegreya-latin-500-italic.woff2') format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }

:root {
  --ink: #2b1b10; --ink-2: #5c4426; --paper: #f4e7c4; --paper-2: #e6d2a2; --paper-3: #cdb27a;
  --wood: #2e1c10; --wood-2: #4a2f1a; --gold: #f2b632; --gold-2: #ffd76a; --accent: #ff014f; --accent-deep: #a40033;
  --sea: #125a70; --green: #1f7a45;
  --display: 'Cinzel Decorative', Georgia, serif; --body: 'Alegreya', Georgia, serif;
  --hud-top: 96px;
}

html, body { background: var(--wood); }
body { font-family: var(--body); color: var(--ink); font-size: 18px; line-height: 1.4; -webkit-tap-highlight-color: transparent; }
.defs { position: absolute; }
body.is-game { height: 100dvh; overflow: hidden; }
body.is-game .plain { display: none; }
body.is-plain .game { display: none; }
body.is-plain { background: var(--paper-2); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }

/* ---------- Buttons ---------- */

.rpg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 11px 26px; border: 3px solid var(--ink); border-radius: 10px;
  background: linear-gradient(#ff2b6c, var(--accent) 55%, #d4003f); color: #fff8e6;
  font: 800 1.14rem/1.1 var(--body); letter-spacing: .01em; text-decoration: none; text-align: center; cursor: pointer;
  box-shadow: 0 5px 0 var(--accent-deep), 0 8px 0 var(--ink), 0 12px 22px rgb(0 0 0 / .35); text-shadow: 0 1px 0 rgb(0 0 0 / .3);
  transition: translate .1s, box-shadow .1s, filter .14s;
}
.rpg-btn:hover { filter: brightness(1.08); translate: 0 -1px; }
.rpg-btn:active { translate: 0 5px; box-shadow: 0 1px 0 var(--accent-deep), 0 3px 0 var(--ink); }
.rpg-btn.is-go { background: linear-gradient(#ffe08a, var(--gold) 60%, #d9962a); color: var(--ink); text-shadow: none; box-shadow: 0 5px 0 #9a6a14, 0 8px 0 var(--ink), 0 12px 22px rgb(0 0 0 / .35); }
.rpg-btn--ghost { background: linear-gradient(var(--paper), var(--paper-2)); color: var(--ink); text-shadow: none; box-shadow: 0 4px 0 var(--paper-3), 0 7px 0 var(--ink); }
.rpg-btn--small { min-height: 46px; padding: 8px 16px; font-size: 1.02rem; box-shadow: 0 3px 0 var(--accent-deep), 0 6px 0 var(--ink); }
.rpg-btn--small.rpg-btn--ghost { box-shadow: 0 3px 0 var(--paper-3), 0 6px 0 var(--ink); }

/* ---------- Opening: a title page, not a dark screen ---------- */

.jf-intro {
  background:
    radial-gradient(1100px 700px at 74% 30%, rgb(255 246 214 / .75), transparent 70%),
    radial-gradient(900px 600px at 10% 90%, rgb(160 118 60 / .36), transparent 70%),
    linear-gradient(135deg, #ecdaa9, #d9bf85);
}
.jf-intro::before {
  content: ''; position: fixed; inset: 12px; z-index: 0; pointer-events: none;
  border: 3px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -9px;
  box-shadow: inset 0 0 90px rgb(90 54 18 / .42);
}
.jf-intro-bg {
  opacity: .62; animation: none; background-repeat: no-repeat, repeat, repeat; background-position: center; background-size: cover, auto, auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 900' preserveAspectRatio='xMidYMid slice'%3E%3Cg fill='none' stroke='%235c4020' stroke-width='3'%3E%3Cpath d='M-20 560C60 540 150 560 240 600S360 640 400 700S430 800 380 920' fill='%23b9c98a' fill-opacity='.5'/%3E%3Cpath d='M1180-20C1150 40 1210 70 1190 130S1120 200 1170 250S1280 300 1300 360S1400 400 1460 380V-20Z' fill='%23b9c98a' fill-opacity='.5'/%3E%3Cpath d='M1000 240C1010 200 1060 190 1080 220S1070 300 1030 310S990 280 1000 240Z' fill='%23b9c98a' fill-opacity='.5'/%3E%3C/g%3E%3Cpath d='M300 690C520 640 700 760 880 560S1120 300 1220 250' fill='none' stroke='%23ff014f' stroke-width='6' stroke-dasharray='4 18' stroke-linecap='round'/%3E%3Cpath d='M1208 236l24 24M1232 236l-24 24' stroke='%23ff014f' stroke-width='7' stroke-linecap='round'/%3E%3Cg transform='translate(1270 730)' stroke='%235c4020' fill='none' stroke-width='2'%3E%3Ccircle r='92'/%3E%3Ccircle r='74'/%3E%3Cpath d='M0-120L14-14L120 0L14 14L0 120L-14 14L-120 0L-14-14Z' fill='%235c4020' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, transparent 0 79px, rgb(92 64 32 / .22) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgb(92 64 32 / .22) 79px 80px);
}
.jf-intro-stage { z-index: 1; }
.jf-intro-hero { position: relative; }
.jf-intro-hero::after {
  content: ''; position: absolute; left: 6%; right: 6%; bottom: -4px; height: 22px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 34 12 / .5), transparent);
}
.jf-kicker { color: var(--accent); font: 800 1.05rem/1 var(--body); letter-spacing: .2em; }
.jf-title { font-size: clamp(2.3rem, 5.4vw, 4.5rem); font-weight: 900; letter-spacing: -.01em; line-height: 1.06; text-shadow: 2px 2px 0 rgb(255 248 224 / .8); }
.jf-title .jf-space:nth-child(12) { flex-basis: 100%; height: 0; overflow: hidden; }
.jf-title .jf-letter:first-child { color: var(--accent); }
.jf-tagline { font-size: clamp(1.14rem, 1.7vw, 1.36rem); }
.jf-btn { border-radius: 10px; border-width: 3px; border-color: var(--ink); background: linear-gradient(var(--paper), var(--paper-2)); font: 800 1.1rem/1 var(--body); box-shadow: 0 4px 0 var(--ink); }
.jf-btn:hover { border-color: var(--ink); }
.jf-primary { background: linear-gradient(#ff2b6c, var(--accent) 60%, #d4003f); color: #fff8e6; box-shadow: 0 4px 0 var(--accent-deep), 0 7px 0 var(--ink); }
.jf-link { color: var(--ink-2); font: 500 1.05rem/1.2 var(--body); min-height: 44px; }
.jf-link:hover { color: var(--ink); }
.jf-dialog { border: 3px solid var(--ink); border-radius: 6px; background: var(--paper); box-shadow: 0 0 0 5px var(--paper), 0 0 0 7px var(--ink), 8px 12px 0 7px rgb(60 34 12 / .24); }
.jf-speaker { border: 2px solid var(--ink); border-radius: 4px; font: 800 1rem/1.3 var(--body); }
.jf-line { font-size: clamp(1.22rem, 2vw, 1.55rem); }
.jf-heading { font-weight: 900; }
.jf-mission { font-size: clamp(1.14rem, 1.7vw, 1.34rem); }
.jf-reward { color: var(--ink-2); font-style: italic; font-weight: 500; }
.jf-subheading { color: var(--ink); font-weight: 800; }
.jf-keys kbd { background: var(--paper); border-color: var(--ink); font-family: var(--body); font-weight: 800; }
.jf-controls li { font-size: 1.05rem; }
.jf-input { border-color: var(--ink); background: #fff8e6; font-size: 1.1rem; }
.jf-ask { font-weight: 800; }

/* ---------- The world ---------- */

.game { position: fixed; inset: 0; overflow: hidden; background: #0b2a35; color: var(--ink); }
.shake, .viewport { position: absolute; inset: 0; }
.viewport { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.viewport.is-dragging { cursor: grabbing; }
.layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.layer--sky { z-index: 3; pointer-events: none; }
.world { position: absolute; left: 0; top: 0; z-index: 2; width: 3400px; height: 2000px; transform-origin: 0 0; will-change: transform; pointer-events: none; }
.nodes, .sprite { position: absolute; left: 0; top: 0; }

.node {
  --grow: 1; --wob: 0; position: absolute; width: 176px; height: 204px; margin: -176px 0 0 -134px; padding: 0;
  border: 0; background: none; cursor: pointer; pointer-events: auto; touch-action: none;
  transform: scale(var(--grow)) rotate(calc(var(--wob) * 1deg)); transform-origin: 50% 90%;
}
.node__art { position: absolute; inset: 40px 2px 0; display: block; transition: opacity .3s; }
.node__art svg { width: 100%; height: 100%; overflow: visible; }
.node__label {
  position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; gap: 6px; align-items: baseline; white-space: nowrap;
  padding: 3px 12px; border: 3px solid var(--ink); border-radius: 6px; background: var(--paper); color: var(--ink);
  font: 800 23px/1.15 var(--body); box-shadow: 0 3px 0 var(--ink);
}
.node__label small { color: var(--accent-deep); font-size: 19px; font-weight: 800; }
.node__label small:empty { display: none; }
.node__badge {
  position: absolute; right: 8px; top: 58px; display: none; place-items: center; width: 44px; height: 44px;
  border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink);
}
.node__badge .ico { width: 26px; height: 26px; }
.node.is-locked .node__badge--lock { display: grid; }
.node.is-locked .node__art { opacity: .62; filter: grayscale(.85) sepia(.5) brightness(.8); }
.node.is-locked .node__label { background: var(--paper-2); color: var(--ink-2); box-shadow: none; }
.node.is-done .node__badge--done { display: grid; background: var(--green); color: #fff; }
.node.is-next .node__label { background: linear-gradient(var(--gold-2), var(--gold)); }
.node.is-next .node__art { animation: bob 1.1s ease-in-out infinite; }
.node.is-next::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 58px; border: 6px solid var(--gold-2); border-radius: 50%;
  box-shadow: 0 0 22px var(--gold-2), inset 0 0 18px var(--gold-2); animation: halo 1.2s ease-in-out infinite;
}
.node--bug { width: 140px; height: 164px; margin: -150px 0 0 -70px; }
.node--bug .node__label { background: var(--accent); color: #fff8e6; }
.node--bug .node__art { animation: shudder .4s steps(2) infinite; }
.node--dock { pointer-events: none; }
.node--dock .node__label, .node--dock .node__badge { display: none !important; }
@keyframes bob { 50% { transform: translateY(-9px); } }
@keyframes halo { 50% { transform: scale(1.1); opacity: .6; } }
@keyframes shudder { 50% { transform: translateX(3px) rotate(2deg); } }

.sprite { z-index: 3; will-change: transform; }
.sprite__hop { position: absolute; left: -58px; bottom: 0; width: 116px; transform-origin: 50% 100%; }
.sprite__boat { position: absolute; left: -44px; bottom: -22px; width: 204px; }
.sprite__boat .ship { width: 100%; height: auto; overflow: visible; }
.sprite.is-sailing .sprite__body { transform: translateY(-58px) scale(.5); transform-origin: 50% 100%; }
.sprite.is-west .sprite__boat { transform: scaleX(-1); }

.map-say {
  position: absolute; left: 0; top: 0; z-index: 12; max-width: min(300px, 80vw); margin: 0; padding: 9px 14px; pointer-events: none;
  border: 3px solid var(--ink); border-radius: 12px 12px 12px 2px; background: #fff8e6; color: var(--ink);
  font: 700 1.08rem/1.25 var(--body); box-shadow: 0 4px 0 var(--ink);
}

.go {
  position: absolute; left: 50%; bottom: 26px; z-index: 14; display: grid; justify-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 460px); margin: 0;
  translate: -50% 0;
}
.go .rpg-btn { min-height: 62px; padding: 12px 34px; font-size: 1.28rem; background: linear-gradient(#ffe08a, var(--gold) 60%, #d9962a); color: var(--ink); text-shadow: none; box-shadow: 0 5px 0 #9a6a14, 0 8px 0 var(--ink), 0 14px 26px rgb(0 0 0 / .4); }
.go__keys { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 3px 10px; border-radius: 8px; background: rgb(43 27 16 / .78); color: #fff3cf; font: 500 1rem/1.3 var(--body); }
.go__keys:empty { display: none; }
.go__keys kbd { padding: 1px 7px; border: 2px solid #fff3cf; border-radius: 5px; font: 800 .95rem/1.3 var(--body); }
.recenter { position: absolute; right: 18px; top: calc(var(--hud-top) + 12px); z-index: 14; display: grid; place-items: center; width: 54px; height: 54px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--ink); }
.ico { width: 24px; height: 24px; display: block; }

.alert { position: absolute; z-index: 13; margin: -44px 0 0 -24px; color: var(--accent); font: 900 92px/1 var(--display); text-shadow: 3px 3px 0 #fff8e6, -3px -3px 0 #fff8e6, 3px -3px 0 #fff8e6, -3px 3px 0 #fff8e6; pointer-events: none; }

/* ---------- HUD ---------- */

.hud { position: absolute; inset: 0; z-index: 40; pointer-events: none; transition: opacity .25s; }
body[data-mode='boot'] .hud, body[data-mode='cine'] .hud, body[data-mode='pan'] .hud { opacity: 0; visibility: hidden; }
body[data-mode='cine'] .jf-ring, body[data-mode='cine'] .jf-arrow, body[data-overlay] .jf-ring, body[data-overlay] .jf-arrow, body[data-mode='opening'] .jf-ring, body[data-mode='opening'] .jf-arrow { visibility: hidden; }
.hud__top { display: grid; grid-template-columns: minmax(230px, 280px) minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; }
.plate, .tracker, .dock { pointer-events: auto; }
.plate {
  display: flex; gap: 10px; align-items: center; padding: 7px 12px 7px 8px; border: 3px solid var(--ink); border-radius: 12px;
  background: linear-gradient(var(--paper), var(--paper-2)); box-shadow: 0 4px 0 var(--ink);
}
.plate__lv {
  display: grid; place-items: center; flex: none; width: 58px; height: 58px; border: 3px solid var(--ink); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9a8, var(--gold) 60%, #b57a16); line-height: .9;
}
.plate__lv small { font: 800 .72rem/1 var(--body); }
.plate__lv b { font: 900 1.7rem/1 var(--display); }
.plate__txt { display: grid; min-width: 0; flex: 1; }
.plate__txt strong { font: 800 1.02rem/1.1 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plate__txt em { color: var(--accent-deep); font: italic 500 .98rem/1.15 var(--body); }
.xpbar { display: block; height: 11px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 6px; background: var(--ink); overflow: hidden; }
.xpbar i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }
.plate__xp { font: 700 .82rem/1.2 var(--body); color: var(--ink-2); }

.tracker { justify-self: center; width: min(520px, 100%); }
.jf-guide.is-mounted {
  width: 100%; max-width: none; min-width: 0; padding: 6px 14px 8px; border: 3px solid var(--ink); border-radius: 10px;
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--ink); font: 500 1rem/1.2 var(--body); box-shadow: 0 4px 0 var(--ink);
}
.jf-guide-recap { color: var(--ink-2); font: italic 500 .96rem/1.15 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jf-guide-step { color: var(--accent-deep); font: 800 .88rem/1.2 var(--body); letter-spacing: .04em; }
.jf-guide-text { color: var(--ink); font: 800 1.14rem/1.15 var(--body); }
.jf-guide-track { height: 6px; background: var(--paper-3); border-radius: 3px; }
.jf-guide-track span { background: linear-gradient(90deg, var(--accent), var(--gold)); }
.jf-ring { border-color: var(--gold-2); border-width: 4px; box-shadow: 0 0 calc(8px + var(--jf-glow) * 22px) var(--gold-2); }
.jf-ring.is-dim { box-shadow: 0 0 calc(8px + var(--jf-glow) * 22px) var(--gold-2), 0 0 0 100vmax rgb(0 0 0 / .55); }
.jf-arrow span { border-top-color: var(--gold); filter: drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -1px 0 var(--ink)); }

.dock { display: flex; gap: 4px; padding: 4px; border: 3px solid var(--ink); border-radius: 12px; background: var(--wood); box-shadow: 0 4px 0 var(--ink); }
.dock__btn {
  --pop: 1; position: relative; display: grid; justify-items: center; gap: 1px; min-width: 54px; min-height: 54px; padding: 5px 5px 3px;
  border: 0; border-radius: 8px; background: transparent; color: #f6e6bf; font: 700 .86rem/1 var(--body); text-decoration: none; cursor: pointer;
  transform: scale(var(--pop));
}
.dock__btn:hover { background: var(--wood-2); }
.dock__btn--hot { background: var(--accent); color: #fff; }
.dock__btn--hot:hover { background: #d4003f; }
.dock__n { position: absolute; top: 1px; right: 2px; min-width: 20px; padding: 2px 4px; border-radius: 10px; background: var(--gold); color: var(--ink); font: 800 .78rem/1 var(--body); }

.ghost { position: fixed; left: 0; top: 0; z-index: 4895; width: 52px; pointer-events: none; }

/* ---------- Location scene ---------- */

.scene { position: absolute; inset: 0; z-index: 20; background: radial-gradient(circle at 50% 30%, var(--wood-2), var(--wood) 70%); }
.scene__frame {
  position: absolute; left: 16px; right: 16px; top: calc(var(--hud-top) + 8px); bottom: 74px; display: grid;
  grid-template-columns: minmax(0, 1.38fr) minmax(320px, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
  padding: 10px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(135deg, #7a5430, #4a2f1a);
  box-shadow: inset 0 0 0 2px var(--gold), 0 8px 26px rgb(0 0 0 / .5);
}
.scene__view { position: relative; grid-column: 1; grid-row: 1; min-height: 0; overflow: hidden; border: 3px solid var(--ink); border-radius: 6px; background: #1a2230; }
.scene__paint { position: absolute; inset: 0; overflow: hidden; }
.paint { width: 100%; height: 100%; max-width: none; }
.jefslot { position: absolute; left: 11%; bottom: 3%; height: 64%; aspect-ratio: 600 / 810; z-index: 3; }
.jefslot .jef-char { width: 100%; height: 100%; }
.scene__npc { position: absolute; right: 10%; bottom: 3%; height: 56%; aspect-ratio: 200 / 280; z-index: 2; }
.npc { width: 100%; height: 100%; overflow: visible; }
.ribbon {
  position: absolute; left: 14px; top: 12px; z-index: 4; display: grid; padding: 5px 22px 7px 14px; border: 3px solid var(--ink); border-radius: 4px;
  background: linear-gradient(#ff2b6c, #c8003c); color: #fff8e6; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.ribbon span { font: 800 .9rem/1.1 var(--body); letter-spacing: .08em; }
.ribbon strong { font: 900 clamp(1.15rem, 2.1vw, 1.7rem)/1.1 var(--display); }
.say {
  position: relative; grid-column: 1; grid-row: 2; min-height: 104px; padding: 18px 18px 12px; border: 3px solid var(--ink); border-radius: 6px;
  background: var(--paper); box-shadow: inset 0 0 0 2px var(--paper-3);
}
.say__who { position: absolute; left: 14px; top: -14px; padding: 2px 12px; border: 3px solid var(--ink); border-radius: 4px; background: var(--accent); color: #fff8e6; font: 800 1rem/1.2 var(--body); }
.say.is-npc .say__who { background: var(--gold); color: var(--ink); }
.say__who:empty { display: none; }
.say__text { margin: 0; font: 500 clamp(1.1rem, 1.5vw, 1.26rem)/1.32 var(--body); }

.quest {
  grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow-y: auto; padding: 16px 20px 18px; border: 3px solid var(--ink); border-radius: 6px;
  background: linear-gradient(170deg, #fbf0d0, var(--paper) 40%, var(--paper-2)); box-shadow: inset 0 0 26px rgb(120 84 30 / .25); overscroll-behavior: contain;
}
.q__kick, .scroll-card__kick { margin: 0; color: var(--accent-deep); font: 800 .95rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.q__role { margin: 3px 0 2px; font: 900 clamp(1.3rem, 2vw, 1.72rem)/1.14 var(--display); }
.q__co { margin: 0; font: 700 1.14rem/1.2 var(--body); }
.q__co span { color: var(--ink-2); font-weight: 500; font-style: italic; }
.q__meta { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 8px 0; padding: 6px 0; border-block: 2px solid var(--paper-3); }
.q__meta dt { color: var(--ink-2); font: 800 .82rem/1.1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.q__meta dd { margin: 0; font: 700 1.04rem/1.2 var(--body); }
.q__sum { margin: 8px 0; font: italic 500 1.1rem/1.3 var(--body); }
.quest h3, .panel h3 { margin: 12px 0 5px; font: 800 1.02rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.q__obj { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.q__obj li { display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: start; font: 500 1.06rem/1.26 var(--body); }
.q__obj i { display: grid; place-items: center; width: 26px; height: 26px; border: 3px solid var(--ink); border-radius: 5px; background: #fff8e6; color: transparent; }
.q__obj .ico { width: 18px; height: 18px; stroke-width: 3.4; }
.q__obj li.is-done i { background: var(--green); color: #fff; }
.q__loot, .slots { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.q__xp { margin: 6px 0 0; color: var(--accent-deep); font: 800 1.1rem/1.2 var(--body); }
.item {
  display: inline-block; padding: 5px 11px; border: 2px solid var(--gold); border-radius: 7px; background: linear-gradient(#3a2a52, #231834); color: #ffefc2;
  font: 700 1rem/1.15 var(--body); box-shadow: 0 2px 0 var(--ink), inset 0 0 0 1px rgb(255 215 106 / .3); transition: opacity .2s;
}
.item--scroll { background: linear-gradient(#1f6a5c, #124840); }
.item.is-taken { opacity: .26; }
.item.is-empty { background: var(--paper-2); color: var(--ink-2); border-color: var(--paper-3); box-shadow: none; opacity: .75; }
.item.is-flying { opacity: 1; display: block; }

.scene__actions { position: absolute; left: 0; right: 0; bottom: -66px; z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.scene__actions .rpg-btn { pointer-events: auto; min-width: 240px; }
.stamp {
  position: absolute; left: 30%; top: 40%; z-index: 7; padding: 10px 22px; translate: -50% -50%; border: 6px double var(--ink, #c8102e); border-color: var(--ink);
  color: var(--ink); font: 900 clamp(1.5rem, 3.6vw, 2.8rem)/1.05 var(--display); text-align: center; pointer-events: none; background: rgb(255 248 224 / .9); white-space: nowrap; opacity: 0;
}

.bounties { display: grid; gap: 8px; margin: 10px 0; }
.bounty {
  min-height: 52px; padding: 9px 14px; border: 3px solid var(--ink); border-radius: 8px; background: linear-gradient(#fff8e6, var(--paper-2)); color: var(--ink);
  font: 800 1.08rem/1.2 var(--body); text-align: left; cursor: pointer; box-shadow: 0 3px 0 var(--ink);
}
.bounty:hover:not(:disabled) { background: linear-gradient(var(--gold-2), var(--gold)); }
.bounty[aria-pressed='true'] { background: linear-gradient(var(--gold-2), var(--gold)); }
.bounty:disabled:not([aria-pressed='true']) { opacity: .5; }
.abilities { display: grid; gap: 8px; }
.ability { padding: 8px 12px; border: 2px solid var(--ink); border-radius: 7px; background: #fff8e6; }
.ability h4 { margin: 0; font: 800 1.08rem/1.2 var(--body); }
.ability p { margin: 2px 0; font-size: 1.02rem; line-height: 1.26; }
.ability span { color: var(--accent-deep); font-weight: 800; }

.fx-blink { animation: blink 1.6s steps(2) infinite; }
.fx-arm { animation: arm 2.6s ease-in-out infinite; }
.fx-belt { animation: belt 4s linear infinite; }
.fx-sig { animation: sig 1.6s ease-in-out infinite; }
.fx-sig2 { animation-delay: .3s; }
.fx-sway { transform-box: fill-box; transform-origin: 0 50%; animation: sway 2.8s ease-in-out infinite; }
.fx-sway2 { animation-delay: .5s; }
.fx-swell { animation: swell 3.4s ease-in-out infinite; }
.fx-rain { animation: rainy .5s linear infinite; }
.fx-clock { animation: spin 6s linear infinite; }
.fx-gondola { animation: gondola 7s ease-in-out infinite; }
.fx-lens { animation: lens 5s ease-in-out infinite; }
.fx-float { animation: floaty 2.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
@keyframes arm { 50% { transform: rotate(9deg); } }
@keyframes belt { to { transform: translateX(120px); } }
@keyframes sig { 50% { opacity: .2; } }
@keyframes sway { 50% { transform: skewY(4deg) scaleX(.97); } }
@keyframes swell { 50% { transform: translateX(26px); } }
@keyframes rainy { to { transform: translate(-9px, 34px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gondola { 50% { transform: translateX(240px); } }
@keyframes lens { 50% { transform: translate(-140px, 24px); } }
@keyframes floaty { 50% { transform: translateY(-10px); } }

/* ---------- Battle ---------- */

.battle { position: absolute; inset: 0; z-index: 20; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: var(--wood); }
.battle__arena { position: relative; overflow: hidden; min-height: 0; }
.foe { --hit: 0; position: absolute; right: 11%; bottom: 25%; width: clamp(170px, 27vw, 380px); z-index: 2; transform-origin: 50% 100%; }
.foe.is-boss { width: clamp(210px, 34vw, 470px); bottom: 20%; }
.foe .mon { width: 100%; height: auto; overflow: visible; filter: brightness(calc(1 + var(--hit) * 2.4)); }
.jefslot--battle { left: 12%; bottom: 3%; height: 60%; }
.battle__fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.battle__fx span { position: absolute; left: 0; top: 0; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 6px; background: var(--ink); color: var(--gold-2); font: 500 1.05rem/1.2 'JetBrains Mono', monospace; white-space: nowrap; }
.bar-hp { position: absolute; z-index: 3; display: grid; gap: 3px; width: min(300px, 42vw); padding: 6px 10px 8px; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.bar-hp strong { font: 800 1.02rem/1.1 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-hp--foe { right: 18px; top: calc(var(--hud-top) + 10px); }
.bar-hp--jef { left: 18px; top: calc(var(--hud-top) + 10px); }
.bar-hp__track { display: block; height: 13px; border: 2px solid var(--ink); border-radius: 7px; background: var(--ink); overflow: hidden; }
.bar-hp__track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #d4003f, #ff5a8a); }
.bar-hp--jef .bar-hp__track i { background: linear-gradient(90deg, #1f7a45, #54d68c); }
.battle__cmd { position: relative; z-index: 3; display: grid; gap: 8px; padding: 10px max(230px, 14vw) 14px 16px; border-top: 4px solid var(--ink); background: linear-gradient(var(--wood-2), var(--wood)); color: #f6e6bf; }
.battle__log { margin: 0; min-height: 1.5em; font: 700 1.16rem/1.25 var(--body); }
.moves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.move {
  display: grid; grid-template-columns: auto 1fr; gap: 0 9px; align-items: center; min-height: 66px; padding: 7px 12px; border: 3px solid var(--ink); border-radius: 9px;
  background: linear-gradient(var(--paper), var(--paper-2)); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 4px 0 var(--ink);
}
.move:hover:not(:disabled), .move:focus-visible { background: linear-gradient(var(--gold-2), var(--gold)); }
.move:disabled { opacity: .55; cursor: default; }
.move kbd { grid-row: 1 / 3; padding: 3px 9px; border: 2px solid var(--ink); border-radius: 5px; background: #fff8e6; font: 800 1rem/1.2 var(--body); }
.move strong { font: 800 1.16rem/1.1 var(--body); }
.move span { font: 500 .98rem/1.1 var(--body); color: var(--ink-2); }
.battle__skip { position: absolute; right: 230px; top: 8px; min-height: 40px; padding: 4px 8px; border: 0; background: none; color: #f6e6bf; font: 700 1.02rem/1 var(--body); text-decoration: underline; cursor: pointer; }
.loot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.loot p { margin: 0; font: 800 1.02rem/1 var(--body); }
.loot ul { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.moves .rpg-btn { grid-column: 1 / -1; justify-self: start; min-width: 240px; }

.wipe { position: fixed; inset: 0; z-index: 4700; display: none; grid-auto-rows: 1fr; pointer-events: none; }
.wipe.is-on { display: grid; }
.wipe i { display: block; margin-bottom: -1px; background: var(--ink); transform: scaleX(0); }

/* ---------- The crossing ---------- */

.cine { position: absolute; inset: 0; z-index: 60; overflow: hidden; background: #111; }
#cineBack { z-index: 1; }
.cine__ship { position: absolute; left: 50%; top: 0; z-index: 2; width: min(44vw, 440px); min-width: 280px; aspect-ratio: 470 / 400; transform-origin: 50% 85%; will-change: transform; }
.cine__ship .ship { width: 100%; height: 100%; overflow: visible; }
.jefslot--ship { left: 42%; bottom: 25%; height: auto; width: 19%; z-index: 3; }
.jefslot--ship .jef-char { height: auto; }
.jefslot--ship .jef-shadow { display: none; }
.jefslot--ship .jef-bubble { left: 60%; bottom: 100%; font: 700 1.05rem/1.2 var(--body); }
#cineFront { z-index: 3; pointer-events: none; }
.cine__bar { position: absolute; left: 0; right: 0; z-index: 4; height: 9vh; background: #070707; }
.cine__bar--top { top: 0; }
.cine__bar--bottom { bottom: 0; }
.cine__cap { position: absolute; left: 0; right: 0; top: 12vh; z-index: 5; text-align: center; color: #fff8e6; pointer-events: none; text-shadow: 0 3px 0 rgb(0 0 0 / .55), 0 0 22px rgb(0 0 0 / .4); }
.cine__cap p { margin: 0; }
#cineBig { font: 900 clamp(1.9rem, 5.4vw, 4.2rem)/1.08 var(--display); }
#cineSmall { font: italic 500 clamp(1.14rem, 2vw, 1.6rem)/1.2 var(--body); }
.cine__qte { position: absolute; left: 50%; bottom: 13vh; z-index: 6; translate: -50% 0; min-height: 66px; padding: 14px 38px; font-size: 1.4rem; }
.cine__skip { position: absolute; left: 16px; bottom: calc(9vh + 8px); z-index: 8; min-height: 46px; padding: 6px 12px; border: 2px solid #fff8e6; border-radius: 8px; background: rgb(0 0 0 / .5); color: #fff8e6; font: 700 1.02rem/1 var(--body); cursor: pointer; }
.cine.is-map { background: none; pointer-events: none; }
.cine.is-map canvas, .cine.is-map .cine__ship, .cine.is-map .cine__skip { display: none; }
.cine.is-still { background: linear-gradient(#8fb6d6, #125a70); }
.cine.is-still canvas, .cine.is-still .cine__ship { display: none; }
.passport { position: absolute; inset: 0; z-index: 7; display: grid; place-items: center; align-content: center; gap: 14px; pointer-events: none; }
.passport__page {
  position: relative; width: min(460px, 88vw); min-height: 300px; padding: 22px 26px; border: 4px solid var(--ink); border-radius: 10px; color: var(--ink);
  background: repeating-linear-gradient(0deg, transparent 0 27px, rgb(92 64 32 / .14) 27px 28px), linear-gradient(160deg, #f8ecca, #e8d5a6); box-shadow: 0 0 0 6px #1b2d4a, 0 16px 40px rgb(0 0 0 / .5);
}
.passport__kick { margin: 0; color: #1b2d4a; font: 900 1.5rem/1.1 var(--display); }
.passport__name { margin: 8px 0 0; font: 800 1.2rem/1.2 var(--body); }
.passport__line { margin: 0; font: 500 1.08rem/1.2 var(--body); }
.passport__stamp {
  position: absolute; right: 18px; bottom: 26px; display: grid; justify-items: center; padding: 7px 14px; border: 5px double var(--accent); border-radius: 10px; color: var(--accent);
  font: 700 .98rem/1.2 var(--body); text-align: center; background: rgb(255 248 224 / .55);
}
.passport__stamp b { font: 900 1.34rem/1.1 var(--display); }
.passport__stamp--out { right: auto; left: 16px; bottom: 74px; border-color: #1f7a45; color: #1f7a45; }
.passport__go { pointer-events: auto; }

/* ---------- Modals ---------- */

.modal, .tally { position: absolute; inset: 0; z-index: 35; display: grid; place-items: center; padding: 14px; background: rgb(20 12 6 / .62); overflow-y: auto; }
.modal { padding-top: calc(var(--hud-top) + 16px); }
.scroll-card, .tally__card {
  display: grid; gap: 8px; width: min(520px, 100%); padding: 22px 26px 24px; border: 3px solid var(--ink); border-radius: 10px; color: var(--ink);
  background: linear-gradient(170deg, #fbf0d0, var(--paper) 40%, var(--paper-2)); box-shadow: inset 0 0 30px rgb(120 84 30 / .28), 0 0 0 6px var(--paper), 0 0 0 9px var(--ink), 0 22px 50px rgb(0 0 0 / .5);
}
.scroll-card h2, .tally__card h2 { margin: 0; font: 900 clamp(1.8rem, 4.4vw, 2.7rem)/1.08 var(--display); }
.scroll-card__lead { margin: 0; font: 500 1.14rem/1.3 var(--body); }
.scroll-card label { margin-top: 6px; font: 800 1.08rem/1.2 var(--body); }
.scroll-card input { min-height: 54px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 8px; background: #fff8e6; font: 700 1.2rem/1.2 var(--body); }
.scroll-card .rpg-btn { margin-top: 8px; }

.tally { padding-top: calc(var(--hud-top) + 14px); }
.tally__card { width: min(680px, 100%); margin-bottom: 70px; }
.tally__title { margin: 0; color: var(--accent-deep); font: italic 500 1.3rem/1.2 var(--body); }
.tally__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 4px 0; }
.tally__grid div { padding: 7px 6px; border: 2px solid var(--ink); border-radius: 7px; background: #fff8e6; text-align: center; }
.tally__grid dt { font: 700 .92rem/1.1 var(--body); color: var(--ink-2); }
.tally__grid dd { margin: 2px 0 0; font: 900 1.26rem/1.15 var(--display); overflow-wrap: anywhere; }
.tally__note { margin: 0; color: var(--ink-2); font: italic 500 1rem/1.2 var(--body); }
.tally__pitch { margin: 2px 0 6px; font: 800 1.2rem/1.28 var(--body); }
.tally__actions { display: flex; flex-wrap: wrap; gap: 14px 12px; }
.tally__link { justify-self: start; min-height: 44px; margin-top: 4px; padding: 6px 2px; border: 0; background: none; color: var(--ink-2); font: 700 1.06rem/1.2 var(--body); text-decoration: underline; cursor: pointer; }

.panel {
  position: absolute; right: 14px; top: calc(var(--hud-top) + 8px); bottom: 74px; z-index: 44; display: grid; grid-template-rows: auto minmax(0, 1fr); width: min(460px, calc(100vw - 28px));
  border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(170deg, #fbf0d0, var(--paper) 40%, var(--paper-2)); box-shadow: 0 0 0 4px var(--wood), 0 16px 40px rgb(0 0 0 / .5);
}
.panel__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 82px 0 6px; border-bottom: 3px solid var(--ink); }
.panel__tabs button { min-height: 44px; padding: 6px 10px; border: 0; border-radius: 6px 6px 0 0; background: none; color: var(--ink-2); font: 800 1rem/1 var(--body); cursor: pointer; }
.panel__tabs [aria-current='true'] { background: var(--ink); color: var(--paper); }
.panel__close { position: absolute; right: 6px; top: 6px; min-height: 44px; min-width: 70px; padding: 4px 10px; border: 3px solid var(--ink); border-radius: 7px; background: var(--paper); color: var(--ink); font: 800 1rem/1 var(--body); cursor: pointer; }
.panel__body { min-height: 0; overflow-y: auto; padding: 12px 16px 18px; overscroll-behavior: contain; outline: 0; }
.panel__hint { margin: 0 0 6px; font: italic 500 1.04rem/1.25 var(--body); color: var(--ink-2); }
.log { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.log__row { border: 2px solid var(--paper-3); border-radius: 6px; background: #fff8e6; }
.log__row.is-now { border-color: var(--ink); background: linear-gradient(var(--gold-2), var(--gold)); }
.log__row.is-locked { opacity: .6; background: none; }
.log__line, .log summary { display: flex; justify-content: space-between; gap: 10px; min-height: 44px; align-items: center; padding: 6px 10px; font: 700 1.02rem/1.2 var(--body); cursor: default; }
.log summary { cursor: pointer; }
.log em { flex: none; color: var(--accent-deep); font: 800 .9rem/1 var(--body); font-style: normal; }
.log__more { padding: 0 12px 8px; font-size: 1rem; }
.log__more p { margin: 2px 0; }
.log__more ul { margin: 4px 0 0; padding-left: 18px; }
.legend { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.legend li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.legend strong { font: 800 1.06rem/1.1 var(--body); }
.legend p { margin: 0; font-size: 1rem; line-height: 1.2; }
.legend__mark { display: block; width: 44px; height: 30px; border: 2px solid var(--ink); border-radius: 6px; background: var(--paper-2); }
.legend__mark.is-gold { background: repeating-linear-gradient(90deg, var(--gold-2) 0 10px, #fff3c0 10px 16px); }
.legend__mark.is-next { background: radial-gradient(closest-side, transparent 55%, var(--gold) 60%, transparent 90%); }
.legend__mark.is-done { background: var(--green); }
.legend__mark.is-lock { background: #8a7a60; }
.legend__mark.is-bug { background: radial-gradient(circle, #7a1230 40%, transparent 44%), var(--paper-2); }
.legend__mark.is-prints { background: radial-gradient(ellipse 6px 3px at 30% 40%, #3a2010 90%, transparent), radial-gradient(ellipse 6px 3px at 70% 66%, #3a2010 90%, transparent), var(--paper-2); }
.legend__mark.is-fog { background: linear-gradient(135deg, #e4cf9e, #b08a50); }
.sheet__name { margin: 0; font: 900 1.5rem/1.1 var(--display); }
.sheet__role { margin: 2px 0 6px; font: 700 1.06rem/1.2 var(--body); color: var(--accent-deep); }
.sheet__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.sheet__facts dt { color: var(--ink-2); font: 800 .84rem/1.1 var(--body); }
.sheet__facts dd { margin: 0; font-weight: 700; }
.sheet__sound { margin: 12px 0; }
.sheet__sound .jf-sound { min-height: 44px; font: 800 1rem/1 var(--body); border: 2px solid var(--ink); }
.sheet__links { display: flex; flex-wrap: wrap; gap: 14px 10px; align-items: center; }
.post { display: grid; grid-template-columns: 84px 1fr; gap: 12px; align-items: center; padding: 6px; border: 2px solid var(--paper-3); border-radius: 7px; background: #fff8e6; color: var(--ink); text-decoration: none; }
.post img { width: 84px; height: 84px; border-radius: 5px; object-fit: cover; background: var(--paper-3); }
.post strong { display: block; font: 800 1.04rem/1.2 var(--body); }
.post small { color: var(--ink-2); font-size: .95rem; }
.posts { display: grid; gap: 7px; margin-bottom: 12px; }

.raven { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 14px; background: rgb(20 12 6 / .72); overflow-y: auto; }
.raven__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 22px; width: min(900px, 100%); padding: 22px 24px 24px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(170deg, #fbf0d0, var(--paper) 40%, var(--paper-2)); color: var(--ink); box-shadow: 0 0 0 6px var(--paper), 0 0 0 9px var(--ink); }
.raven__card h2 { margin: 0; font: 900 clamp(1.7rem, 3.4vw, 2.4rem)/1.1 var(--display); outline: 0; }
.raven__side p { margin: 4px 0; font-size: 1.1rem; line-height: 1.3; }
.raven__portrait { width: 150px; margin: 8px 0; }
.raven__links { display: flex; flex-wrap: wrap; gap: 12px; }
.jef-form { display: grid; gap: 10px; }
.jef-field { display: grid; gap: 3px; }
.jef-field label { font: 800 1.04rem/1.2 var(--body); }
.jef-field input, .jef-field textarea { width: 100%; min-height: 46px; padding: 8px 12px; border: 3px solid var(--ink); border-radius: 7px; background: #fff8e6; color: var(--ink); font: 500 1.08rem/1.25 var(--body); }
.jef-field [aria-invalid='true'] { border-color: var(--accent); }
.jef-error { margin: 0; color: var(--accent-deep); font-weight: 700; }
.jef-submit { justify-self: start; min-height: 54px; padding: 10px 26px; border: 3px solid var(--ink); border-radius: 10px; background: linear-gradient(#ff2b6c, var(--accent) 60%, #d4003f); color: #fff8e6; font: 800 1.14rem/1 var(--body); cursor: pointer; box-shadow: 0 4px 0 var(--accent-deep), 0 7px 0 var(--ink); }
.jef-form-status { margin: 0; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 7px; background: #fff8e6; }
.flyraven { position: fixed; left: 0; top: 0; z-index: 4800; width: 70px; opacity: 0; pointer-events: none; }

.levelup { position: absolute; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; overflow: hidden; background: rgb(20 8 4 / .72); color: #fff8e6; text-align: center; }
.levelup__rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; margin: -110vmax 0 0 -110vmax; background: repeating-conic-gradient(rgb(255 215 106 / .34) 0 11deg, transparent 11deg 22deg); }
.levelup p { position: relative; margin: 0; }
.levelup__kick { color: var(--gold-2); font: 900 clamp(2.4rem, 8vw, 5.4rem)/1 var(--display); text-shadow: 0 4px 0 var(--ink); }
.levelup__num { font: 900 clamp(5rem, 22vw, 13rem)/1 var(--display); color: #fff; text-shadow: 0 6px 0 var(--accent), 0 12px 0 var(--ink); }
.levelup__class { font: 800 clamp(1.3rem, 3.4vw, 2rem)/1.2 var(--body); }

/* ---------- Plain route ---------- */

/* the plain route wears the premium site (shared/sections.css); only the bar is ours */
.plain { background: #07080b; }
.plain__bar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; padding: 10px clamp(14px, 3vw, 32px); background: rgb(7 8 11 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid rgb(255 255 255 / .08); color: #f4f1ec; }
.plain__bar nav { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.plain__bar nav a { padding: 8px 2px; font-weight: 600; color: #9b9a97; text-decoration: none; }
.plain__bar nav a:hover { color: #f4f1ec; }
.plain__brand { font: 900 1.4rem/1 var(--display); text-decoration: none; color: #f4f1ec; }
.plain .sx-sec { scroll-margin-top: 70px; }
.plain__hero { padding: 42px 0 26px; }
.plain__hero h1 { margin: 4px 0; font: 900 clamp(2.1rem, 6vw, 3.8rem)/1.06 var(--display); }
.plain__lead { max-width: 62ch; margin: 8px 0; font-size: 1.2rem; line-height: 1.4; }
.plain__cta { display: flex; flex-wrap: wrap; gap: 16px 12px; margin-top: 16px; }
.plain__sec { padding: 26px 0; border-top: 2px solid var(--paper-3); scroll-margin-top: 70px; }
.plain__sec h2 { margin: 0 0 10px; font: 900 clamp(1.6rem, 4vw, 2.3rem)/1.1 var(--display); }
.offers, .edu { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.offers article, .edu article { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 8px; background: #fff8e6; }
.offers h3, .edu h3 { margin: 0 0 3px; font: 800 1.18rem/1.2 var(--body); }
.offers p, .edu p { margin: 2px 0; }
.offers span { color: var(--accent-deep); font-weight: 800; }
.job { margin-bottom: 8px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 8px; background: #fff8e6; }
.job summary { display: grid; cursor: pointer; }
.job__role { font: 800 1.2rem/1.2 var(--body); }
.job__dates { color: var(--accent-deep); font-weight: 700; }
.job ul { margin: 6px 0 0; padding-left: 20px; }
.skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.skills h3 { margin: 0 0 4px; font: 800 1.1rem/1.2 var(--body); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 3px 10px; border: 2px solid var(--ink); border-radius: 6px; background: #fff8e6; font-weight: 700; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 24px; }
.contact__link { font-weight: 800; }
.foot { padding: 18px 0 0; border-top: 2px solid var(--paper-3); text-align: center; font-weight: 700; }

/* ---------- Phones: follow camera, big targets, HUD out of the way ---------- */

@media (max-width: 1080px) {
  .hud__top { grid-template-columns: 210px minmax(0, 1fr) auto; gap: 8px; }
  .dock__btn { min-width: 48px; font-size: .8rem; }
  .plate__xp { display: none; }
}

@media (max-width: 760px) {
  body { font-size: 17px; }
  .hud__top { display: grid; grid-template-columns: 1fr; gap: 5px; padding: 6px 8px 0; padding-top: max(6px, env(safe-area-inset-top)); }
  .plate { padding: 3px 8px 3px 4px; gap: 7px; box-shadow: 0 3px 0 var(--ink); }
  .plate__lv { width: 42px; height: 42px; }
  .plate__lv small { display: none; }
  .plate__lv b { font-size: 1.3rem; }
  .plate__txt { grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; }
  .plate__txt strong { font-size: .98rem; }
  .plate__txt em { font-size: .94rem; text-align: right; white-space: nowrap; }
  .xpbar { grid-column: 1 / -1; height: 10px; margin: 2px 0 1px; }
  .jf-guide.is-mounted { padding: 4px 11px 6px; box-shadow: 0 3px 0 var(--ink); }
  .jf-guide-recap { font-size: .92rem; }
  .jf-guide-step { font-size: .84rem; }
  .jf-guide-text { font-size: 1.05rem; }
  .tracker { width: 100%; }
  .dock { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 3px 4px; padding-bottom: max(3px, env(safe-area-inset-bottom)); border-width: 3px 0 0; border-radius: 0; box-shadow: none; }
  .dock__btn { min-width: 0; min-height: 56px; padding: 6px 2px 4px; font-size: .78rem; }
  .go { bottom: 76px; max-width: calc(100vw - 24px); width: calc(100vw - 24px); }
  .go .rpg-btn { width: 100%; min-height: 60px; padding: 10px 14px; font-size: 1.14rem; }
  .recenter { top: calc(var(--hud-top) + 8px); right: 10px; }
  .map-say { font-size: 1.04rem; }

  .scene__frame {
    left: 4px; right: 4px; top: calc(var(--hud-top) + 8px); bottom: 136px; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(170px, 32%) auto minmax(0, 1fr); gap: 16px 0; padding: 5px; row-gap: 12px;
  }
  .scene__view { grid-column: 1; grid-row: 1; }
  .say { grid-column: 1; grid-row: 2; min-height: 92px; padding: 15px 11px 7px; }
  .say__text { font-size: 1.08rem; line-height: 1.26; }
  .quest { grid-column: 1; grid-row: 3; padding: 11px 13px 14px; }
  .q__role { font-size: 1.26rem; }
  .scene__actions { bottom: -72px; padding: 0 8px; }
  .scene__actions .rpg-btn { width: 100%; }
  .ribbon { left: 6px; top: 6px; padding: 3px 18px 4px 9px; }
  .ribbon span { font-size: .78rem; }
  .ribbon strong { font-size: 1rem; }
  .stamp { left: 50%; top: 26%; font-size: 1.7rem; }

  .battle__cmd { padding: 8px 8px 74px; }
  .battle__log { font-size: 1.04rem; min-height: 2.5em; }
  .moves { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .move { min-height: 58px; }
  .battle__skip { position: static; justify-self: end; min-height: 44px; }
  .bar-hp { width: 46vw; }
  .bar-hp--foe { right: 6px; top: calc(var(--hud-top) + 8px); }
  .bar-hp--jef { left: 6px; top: calc(var(--hud-top) + 8px); }
  .foe { right: 3%; bottom: 14%; width: 46vw; }
  .foe.is-boss { width: 54vw; bottom: 12%; }
  .jefslot--battle { left: 2%; bottom: 1%; height: 52%; }

  .cine__ship { width: 76vw; min-width: 0; }
  .cine__skip { left: 8px; }
  .cine__qte { width: calc(100vw - 32px); bottom: calc(9vh + 60px); }

  .modal, .tally { padding: calc(var(--hud-top) + 14px) 10px 76px; place-items: start center; }
  .scroll-card, .tally__card { padding: 16px; box-shadow: inset 0 0 30px rgb(120 84 30 / .28), 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
  .tally__card { margin-bottom: 0; }
  .tally__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tally__actions .rpg-btn { flex: 1 1 100%; }

  .panel { left: 6px; right: 6px; top: calc(var(--hud-top) + 8px); bottom: 70px; width: auto; }
  .panel__tabs { padding-right: 78px; }
  .panel__tabs button { padding: 6px 7px; font-size: .96rem; }
  .raven { place-items: start center; padding: 10px 8px 80px; }
  .raven__card { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); }
  .raven__portrait { display: none; }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .jf-title { font-size: clamp(2rem, 10vw, 2.9rem); }
  .jf-intro::before { inset: 6px; }
  .jf-intro-bg { opacity: .26; }
}

/* Landscape phones: everything in one row, nothing stacked. */
@media (max-height: 520px) and (min-width: 761px) {
  .hud__top { grid-template-columns: 190px minmax(0, 1fr) auto; padding: 4px 8px; gap: 6px; }
  .plate__lv { width: 42px; height: 42px; }
  .plate__lv small, .plate__xp { display: none; }
  .plate__lv b { font-size: 1.3rem; }
  .plate { padding: 2px 6px; }
  .plate__txt strong { font-size: .92rem; }
  .jf-guide.is-mounted { padding: 2px 9px 3px; }
  .jf-guide-recap { display: none; }
  .jf-guide-text { font-size: .98rem; }
  .jf-guide-step { font-size: .78rem; }
  .jf-guide-track { height: 4px; margin-top: 2px; }
  .dock__btn { min-width: 44px; min-height: 44px; padding: 2px; font-size: .74rem; }
  .dock__btn .ico { width: 20px; height: 20px; }
  .go { bottom: 8px; }
  .go__keys { display: none; }
  .go .rpg-btn { min-height: 50px; padding: 6px 22px; font-size: 1.04rem; }
  .scene__frame { left: 6px; right: 6px; bottom: 58px; top: calc(var(--hud-top) + 4px); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 4px; gap: 4px; }
  .say { min-height: 62px; padding: 9px 8px 3px; }
  .say__text { font-size: 1rem; line-height: 1.16; }
  .say__who { top: -10px; font-size: .84rem; padding: 0 8px; }
  .scene__actions { bottom: -52px; }
  .scene__actions .rpg-btn { min-height: 46px; padding: 4px 18px; font-size: 1.04rem; }
  .ribbon { left: 4px; top: 4px; padding: 2px 16px 2px 7px; }
  .ribbon span { display: none; }
  .ribbon strong { font-size: .94rem; }
  .battle__cmd { padding: 3px 8px 6px; gap: 3px; }
  .battle__log { font-size: .98rem; min-height: 1.2em; }
  .move { min-height: 50px; padding: 3px 8px; }
  .move strong { font-size: 1.02rem; }
  .cine__cap { top: 10vh; }
  .modal, .tally { place-items: start center; padding-top: calc(var(--hud-top) + 6px); }
}

@media (prefers-reduced-motion: reduce) {
  .node__art, .node::before, .fx-blink, .fx-arm, .fx-belt, .fx-sig, .fx-sway, .fx-swell, .fx-rain, .fx-clock, .fx-gondola, .fx-lens, .fx-float { animation: none !important; }
  .stamp { opacity: 1; }
}