@font-face {
  font-family: 'Pinyon Script';
  src: url(../assets/fonts/PinyonScript.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../assets/fonts/EBGaramond-500.woff2) format('woff2');
  font-weight: 400 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../assets/fonts/EBGaramond-700.woff2) format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url(../assets/fonts/EBGaramond-500-italic.woff2) format('woff2');
  font-weight: 400 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: Cinzel;
  src: url(../assets/fonts/Cinzel.woff2) format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: Nunito;
  src: url(../assets/fonts/Nunito.woff2) format('woff2');
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  --ink: #0b0e1a;
  --panel: #12172a;
  --card: #1b2238;
  --card2: #232c48;
  --line: #36406a;
  --gold: #f0c96a;
  --gold2: #b98a2e;
  --mint: #8fe3c0;
  --red: #ff5a5f;
  --orange: #ff9b54;
  --green: #6fd66a;
  --purple: #c48bff;
  --blue: #74c7ff;
  --text: #f3efe4;
  --dim: #a3abc6;
  --title: Cinzel, Georgia, serif;
  --hand: 'Pinyon Script', cursive; /* ink handwriting: names you sign */
  --paper: 'EB Garamond', Georgia, serif; /* anything written on paper: notices, guide, cards, letters */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: #04050a;
  color: var(--text);
  font: 600 16px/1.35 Nunito, system-ui, sans-serif;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
}
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
small { font-size: 13px; color: var(--dim); font-weight: 500; }

#app {
  position: relative;
  max-width: 560px;
  height: 100%;
  height: 100dvh;
  margin: 0 auto;
  background: #000;
  overflow: hidden;
}

/* ---------- stage: the world */
/* clip, not hidden: a hidden box can still be scrolled (by a tap on a half-seen sign), and then the whole world sits crooked */
#scene { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: #000; touch-action: pan-y; }
#scene.pan { cursor: grab; touch-action: none; }
.stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; overflow: clip; }
.world { position: absolute; left: 0; top: 0; will-change: translate; }
/* The hour of the day, laid over the painting. */
.world::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .8s; }
.stage[data-light="dawn"] .world::after { opacity: 1; background: linear-gradient(rgba(255, 214, 150, .34), rgba(255, 190, 140, .12) 55%, transparent); mix-blend-mode: soft-light; }
.stage[data-light="dusk"] .world::after { opacity: 1; background: linear-gradient(rgba(255, 120, 60, .42), rgba(120, 50, 110, .34)); mix-blend-mode: multiply; }
.stage[data-light="night"] .world::after { opacity: 1; background: linear-gradient(rgba(30, 44, 110, .78), rgba(16, 20, 60, .72)); mix-blend-mode: multiply; }
.stage.zoom { transition: transform .26s ease-in, opacity .26s ease-in; opacity: 0; }
.bg { position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat; transition: filter .7s ease, scale .7s ease; }
/* Depth of field. A scene is sharp, and drifts slowly while it is empty,
   like an establishing shot. Only a fight pulls focus onto the people and
   lets the painting fall soft behind them. */
.stage[data-drift] .bg { animation: drift 34s ease-in-out infinite alternate; }
@keyframes drift { to { transform: scale(1.05); } }
.stage[data-focus] .bg { animation: none; }
.stage[data-focus="fight"] .bg { filter: blur(8px) brightness(.8) saturate(.94); scale: 1.05; }
/* In a fight everyone stands clear of the command window. */
.layer { transition: translate .3s ease, scale .3s ease; }
.stage.fighting .over { scale: calc(1 / var(--fit, 1)); transform-origin: 50% 100%; } /* names stay readable when the line-up shrinks */
/* On a short phone the windows take more of the screen: the fighters stand a little smaller so heads stay in view. */
/* People take the light of the place they stand in. */
.stage[data-tone="night"] .actor:not(.down) .body, .stage[data-light="night"] .actor:not(.down) .body { filter: brightness(.74) saturate(.82) hue-rotate(-8deg); }
.stage[data-tone="dark"] .actor:not(.down) .body { filter: brightness(.84) saturate(.9); }
.stage[data-tone="dusk"] .actor:not(.down) .body, .stage[data-light="dusk"] .actor:not(.down) .body { filter: brightness(.96) sepia(.24) saturate(1.15); }
.stage[data-tone="night"] .bust { filter: brightness(.82) saturate(.88) drop-shadow(0 0 24px rgba(0, 0, 0, .6)); }
.stage[data-tone="dusk"] .bust { filter: sepia(.18) saturate(1.1) drop-shadow(0 0 24px rgba(0, 0, 0, .6)); }
.front { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
/* a map is looked at, not read over: leave the painting its light */
#scene.pan .stage::after { opacity: .45; }
.stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; background: linear-gradient(rgba(6, 8, 18, .45), transparent 14%, transparent 62%, rgba(6, 8, 18, .7)); }
.layer { position: absolute; inset: 0; }

.actor { position: absolute; width: 0; height: 0; transition: opacity .45s; }
.actor.gone { opacity: 0; pointer-events: none; }
.actor.down .body { filter: grayscale(1) brightness(.45); rotate: 82deg; translate: 30px -24px; }
.actor.tappable { cursor: pointer; }
.body { position: absolute; transform-origin: 50% 100%; animation: breathe 3.2s ease-in-out infinite; transition: rotate .3s, translate .3s, filter .2s; }
.body.float { animation: hover 2.6s ease-in-out infinite; }
.body img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); pointer-events: none; }
@keyframes breathe { 50% { transform: scaleY(1.012) translateY(-1px); } }
@keyframes hover { 50% { transform: translateY(-14px); } }
/* An enemy is in a fight, not posing: it leans in toward your party (down
   on the left) and sways with its breath, ready to spring. The lean is in
   every frame, so a still screenshot shows it too. Time stopped holds it. */
.actor.enemy:not(.down):not(.hurt) .body { animation: ready 2.4s ease-in-out infinite; }
.actor.enemy:not(.down):not(.hurt) .body.float { animation: readyfloat 2.6s ease-in-out infinite; }
.stage.stopped .actor.enemy .body { animation-play-state: paused; }
@keyframes ready { 0%, 100% { transform: skewX(1.5deg); } 50% { transform: skewX(3deg) translateX(-5px) scaleY(1.02); } }
@keyframes readyfloat { 0%, 100% { transform: skewX(1.5deg); } 50% { transform: skewX(3deg) translate(-6px, -14px); } }
.shadow { position: absolute; top: -12px; height: 26px; border-radius: 50%; background: radial-gradient(rgba(0, 0, 0, .5), transparent 70%); }
.actor.hurt .body { animation: shake .24s linear; }
.actor.hurt .body img { filter: brightness(2.6) saturate(.2) !important; }
.actor.guarding .body img { filter: brightness(1.3) drop-shadow(0 0 14px var(--blue)) !important; }
@keyframes shake { 20% { translate: -10px 0; } 50% { translate: 9px 0; } 80% { translate: -5px 0; } }
.stage.hit { animation: quake .3s linear; }
.stage.shake { animation: quake .16s linear; }
.stage.shakebig { animation: quake .28s linear 2; }
.whiteout { position: absolute; inset: 0; z-index: 975; pointer-events: none; background: #fff; animation: fade .26s ease-out forwards; }
.actor.acting { z-index: 2000 !important; }
.actor.acting .body img { filter: drop-shadow(0 0 10px rgba(255, 233, 166, .85)) !important; }
.ally .body img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.banner.foe { border-color: rgba(255, 150, 150, .7); }
.banner.danger { color: #ffd166; border-color: #ff7a59; box-shadow: 0 0 26px rgba(255, 90, 60, .6); }
.stage.hit::before { content: ''; position: absolute; inset: 0; z-index: 980; pointer-events: none; background: radial-gradient(transparent 45%, rgba(255, 40, 50, .55)); animation: fade .35s ease-out forwards; }
@keyframes quake { 20% { translate: -12px 4px; } 50% { translate: 10px -4px; } 80% { translate: -5px 2px; } }
@keyframes fade { to { opacity: 0; } }
/* blows land as light, not pictures: slash, bolt, pillar, heal, burst */
.fx { position: absolute; z-index: 900; width: 0; height: 0; pointer-events: none; mix-blend-mode: screen; }
.fx::before, .fx::after { content: ''; position: absolute; }
.fx.slash::before { left: -190px; top: -7px; width: 380px; height: 14px; border-radius: 50%; rotate: calc(-38deg + var(--r));
  background: linear-gradient(90deg, transparent, var(--c) 30%, #fff 50%, var(--c) 70%, transparent); box-shadow: 0 0 26px 6px var(--c); animation: cut .32s ease-out forwards; }
.fx.slash::after { left: -150px; top: -4px; width: 300px; height: 8px; border-radius: 50%; rotate: calc(34deg + var(--r));
  background: linear-gradient(90deg, transparent, #fff, transparent); box-shadow: 0 0 18px 4px var(--c); animation: cut .32s .09s ease-out both; }
@keyframes cut { 0% { scale: 0 1; opacity: 1; } 55% { scale: 1 1; opacity: 1; } 100% { scale: 1.15 .1; opacity: 0; } }
.fx.burst::before { left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(#fff 0%, var(--c) 28%, transparent 68%); animation: boom .5s ease-out forwards; }
.fx.burst::after { left: -130px; top: -130px; width: 260px; height: 260px; border-radius: 50%; border: 6px solid var(--c); box-shadow: 0 0 30px var(--c); animation: ring .55s ease-out forwards; }
@keyframes boom { 0% { scale: .1; opacity: 1; } 60% { scale: 1; opacity: .95; } 100% { scale: 1.25; opacity: 0; } }
@keyframes ring { 0% { scale: .2; opacity: 1; } 100% { scale: 1.6; opacity: 0; } }
.fx.bolt::before, .fx.pillar::before { left: -34px; bottom: -150px; width: 68px; height: 900px; transform-origin: 50% 100%;
  background: linear-gradient(90deg, transparent, var(--c) 35%, #fff 50%, var(--c) 65%, transparent); box-shadow: 0 0 46px 12px var(--c); animation: strike .45s ease-out forwards; }
.fx.bolt::before { width: 30px; left: -15px; clip-path: polygon(40% 0, 100% 0, 60% 34%, 95% 36%, 45% 70%, 80% 72%, 50% 100%, 30% 74%, 55% 68%, 15% 40%, 50% 36%); }
.fx.bolt::after, .fx.pillar::after { left: -110px; top: 40px; width: 220px; height: 70px; border-radius: 50%; background: radial-gradient(#fff, var(--c) 40%, transparent 70%); animation: boom .45s ease-out forwards; }
@keyframes strike { 0% { scale: 1 0; opacity: 1; } 30% { scale: 1 1; opacity: 1; } 100% { scale: .2 1; opacity: 0; } }
.fx.heal::before { left: -110px; top: -110px; width: 220px; height: 220px; border-radius: 50%; border: 5px solid var(--c); box-shadow: 0 0 30px var(--c), inset 0 0 30px var(--c); animation: ring .6s ease-out forwards; }
.fx.heal::after { left: -6px; top: -100px; width: 12px; height: 200px; background: linear-gradient(transparent, var(--c), transparent); box-shadow: 0 0 20px var(--c); animation: lift .6s ease-out forwards; }
@keyframes lift { from { translate: 0 60px; opacity: 1; } to { translate: 0 -80px; opacity: 0; } }

.over { position: absolute; left: -100px; width: 200px; text-align: center; pointer-events: none; display: none; }
.enemy { cursor: pointer; }
.enemy .over { display: block; }
.enemy::after { content: ''; position: absolute; left: -110px; top: -300px; width: 220px; height: 310px; }
.ename { font: 800 24px/1.1 Nunito, sans-serif; white-space: nowrap; width: max-content; position: relative; left: 50%; translate: -50% 0; text-shadow: 0 2px 3px #000, 0 0 6px #000; }
.ename small { color: var(--gold); font-size: 17px; }
.over .bar { height: 14px; width: 150px; margin: 4px auto 0; }
.estate { display: block; width: max-content; margin: 5px auto 0; font: 800 17px/1.1 Nunito, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; text-shadow: 0 2px 3px #000, 0 0 6px #000; }
.estate:empty { display: none; }
/* what to do about it, said as a plate: open = strike now, gathering = brace */
.estate.open { padding: 3px 12px; color: #fff; background: #c8323f; border: 1.5px solid #ffd0d0; border-radius: 3px; text-shadow: none; box-shadow: 0 0 14px rgba(255, 80, 90, .7); }
.estate.wind { padding: 3px 12px; color: #2a1a06; background: #ffd166; border-radius: 3px; text-shadow: none; box-shadow: 0 0 14px rgba(255, 180, 60, .7); }
.weak { display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 3px; text-shadow: 0 2px 3px #000; }
.weak small { color: #fff; font-size: 17px; }
.elem { font: 800 17px/1.2 Nunito, sans-serif; padding: 1px 9px; border-radius: 10px; background: rgba(8, 12, 28, .8); border: 1px solid currentColor; color: #fff; }
.elem.fire { color: #ff9b54; } .elem.ice { color: #9fd8ff; } .elem.thunder, .elem.lightning { color: #ffe66b; } .elem.holy, .elem.light { color: #fff2c0; } .elem.dark { color: #c48bff; } .elem.wind { color: #8fe3c0; } .elem.earth { color: #d9a066; }
.arrow { display: none; position: absolute; left: 50%; top: -30px; margin-left: -15px; width: 30px; height: 20px;
  background: var(--gold); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.target .arrow { display: block; }
@keyframes bob { to { translate: 0 8px; } }

.pop { position: absolute; z-index: 2500; /* over every fighter, wherever they stand */ translate: -50% 0; font: 900 46px/1 Nunito, sans-serif; white-space: nowrap; pointer-events: none;
  -webkit-text-stroke: 2px #1a0f08; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, .55); animation: rise .9s ease-out forwards; }
.pop.dmg { color: #fff; }
.pop.crit { color: var(--gold); font-size: 68px; }
.pop.spill { color: var(--orange); font-size: 56px; }
.pop.heal { color: var(--green); }
.pop.mp { color: var(--blue); font-size: 32px; }
.pop.poison { color: var(--purple); font-size: 32px; }
.pop.tag { color: var(--orange); font-size: 28px; font-style: italic; }
@keyframes rise { 0% { opacity: 0; transform: translateY(16px) scale(.5); } 15% { opacity: 1; transform: translateY(-8px) scale(1.2); } 30% { transform: translateY(-14px) scale(1); } 100% { opacity: 0; transform: translateY(-70px); } }

.banner { position: absolute; left: 50%; top: 150px; z-index: 6; translate: -50% 0; padding: 10px 34px; z-index: 960; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(10, 12, 26, .92) 18%, rgba(10, 12, 26, .92) 82%, transparent);
  border-block: 2px solid var(--gold); font: 700 34px/1.1 var(--title); color: var(--gold);
  opacity: 0; transition: opacity .15s; pointer-events: none; }
.banner.on { opacity: 1; }
.stage.fighting .banner { top: 34px; } /* clear of the fighters, who stand higher in a fight */

/* Manhwa panels: a big move is drawn the way a page would draw it.
   Slanted panels with white gutters drop in one under another: who,
   what, and what it did. */
/* the page sits in the open part of the screen, above the windows */
.page { position: absolute; inset: 0 0 var(--ui, 300px) 0; z-index: 970; pointer-events: none; transition: opacity .16s; }
.page.dim::before { content: ''; position: absolute; inset: 0 0 calc(-1 * var(--ui, 300px)) 0; background: rgba(4, 5, 12, .6); }
.page.out { opacity: 0; }
.pnl { position: absolute; left: 0; right: 0; background: #fff; clip-path: var(--cut); animation: pnlin .22s cubic-bezier(.2, 1.3, .4, 1) both; animation-delay: var(--d, 0s); }
.pnl.l { --from: -100%; }
.pnl > div { position: absolute; inset: 7px 0; overflow: hidden; clip-path: var(--cut);
  background: repeating-linear-gradient(173deg, transparent 0 13px, rgba(255, 255, 255, .13) 13px 15px), linear-gradient(100deg, #0d0f22 12%, var(--c, #6a3fb0) 150%); }
.pnl img { position: absolute; right: 0; top: -6%; height: 118%; animation: cutslide .45s ease-out both; animation-delay: var(--d, 0s); }
.pnl b { position: absolute; left: 30px; bottom: 17%; z-index: 1; max-width: 64%; font: italic 900 54px/1 var(--title); color: #fff;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill; text-shadow: 0 0 18px var(--c, #6a3fb0), 4px 5px 0 #000; }
.pnl.card > div { background: #05060c; }
.pnl.card b { left: 0; right: 0; bottom: auto; top: 50%; translate: 0 -50%; max-width: none; text-align: center; white-space: nowrap; }
/* the blow itself: an impact frame, ink lines racing in on whoever took it */
.pnl.hit > div { background: radial-gradient(circle at 50% 55%, #fff 0 24%, transparent 60%), repeating-conic-gradient(from 0deg at 50% 55%, #fff 0 4.5deg, #111 4.5deg 6deg); }
.pnl.hit img { right: auto; left: 50%; top: 6%; height: 92%; transform: translateX(-50%); animation: hitshake .32s linear both; animation-delay: calc(var(--d, 0s) + .16s); }
@keyframes pnlin { from { translate: var(--from, 100%) 0; } }
@keyframes cutslide { from { translate: 120px 0; } }
@keyframes hitshake { 0% { translate: 0 0; filter: brightness(3) saturate(0); } 25% { translate: 16px -6px; } 50% { translate: -14px 5px; filter: none; } 75% { translate: 8px -2px; } }
/* A telling blow: for a blink the world is ink on paper. */
.stage.impact .world { filter: grayscale(1) contrast(2.3) brightness(1.15); }
.lines { position: absolute; inset: 0; z-index: 972; pointer-events: none; animation: fade .32s ease-out forwards;
  background: repeating-conic-gradient(from 0deg at var(--x) var(--y), transparent 0 3.2deg, rgba(255, 255, 255, .95) 3.2deg 4.4deg);
  -webkit-mask: radial-gradient(circle at var(--x) var(--y), transparent 15%, #000 56%); mask: radial-gradient(circle at var(--x) var(--y), transparent 15%, #000 56%); }

/* big portrait of whoever is talking; it rises above open windows */
.bust { position: absolute; left: -10px; bottom: calc(var(--ui, 300px) - 90px); height: 880px; max-height: calc(100% - var(--ui, 300px) - 40px);
  filter: drop-shadow(0 0 24px rgba(0, 0, 0, .6)); animation: bustin .25s ease-out; }
@keyframes bustin { from { transform: translateX(-24px); opacity: 0; } }
/* A quiet full-portrait breath. This is idle animation, not a physics rig.
   Individual scale leaves the goddess's centering translate untouched. */
.bust[data-idle="true"] { transform-origin: 50% 100%;
  animation: bustin .25s ease-out, portrait-breathe 5s 1s ease-in-out infinite; }
@keyframes portrait-breathe { 50% { scale: 1 1.005; } }
@media (prefers-reduced-motion: reduce) {
  .bust[data-idle="true"] { animation: none; }
}

/* name plates on a map: small, still, pinned to the building */
.pin { position: absolute; translate: -50% -100%; z-index: 700; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; min-height: 92px; padding: 14px 12px 0; background: none; border: 0; cursor: pointer; }
.pin span { display: flex; flex-direction: column; align-items: center; padding: 5px 16px 4px; background: rgba(20, 14, 8, .82); border: 1.5px solid rgba(240, 201, 106, .85); border-radius: 5px;
  font: 700 25px/1.15 var(--title); color: #f7e3ae; white-space: nowrap; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.pin small { font: 700 16px/1.2 Nunito, sans-serif; color: #e9dcc0; display: block; }
.pin em { font-style: normal; display: flex; flex-direction: column; align-items: center; }
.pin.who span { flex-direction: row; gap: 9px; padding-left: 6px; }
.pin.who img { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(240, 201, 106, .9); object-fit: cover; background: #1a1410; }
.pin i { width: 11px; height: 11px; rotate: 45deg; background: var(--gold); border: 1.5px solid #3a2a0c; box-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.pin:active span { background: rgba(60, 44, 18, .9); }
.pin.glow span { background: linear-gradient(#f7d98a, #c9962f); border-color: #fff0c2; color: #2a1a06; }
.pin.glow small { color: #4a360c; }
.pin.locked { filter: grayscale(1); opacity: .7; }
.pin.home span { border-color: #fff; color: #fff; }
.pin.home i { background: #fff; }
/* A plate that hangs under its point, when the space above holds something to see. */
.pin.below { translate: -50% 0; flex-direction: column-reverse; justify-content: flex-start; padding: 0 12px 14px; }
/* Kept in the layout (its width places it), just unseen and untappable. */
.pin.gone { visibility: hidden; }
/* A notice named on a world-map place card: a long name wraps, never cut. */
.btn.gold.work .lbl { flex: 1; min-width: 0; text-wrap: balance; }
/* Hunting grounds (.ground) on the world map: smaller plates, so the capital and the tower lead. */
.pin.ground span { font-size: 20px; padding: 4px 12px 3px; }
/* ways forward on an expedition: System choices hanging in the air */
.pin.way { translate: -50% -50%; padding: 0; }
.pin.way i { display: none; }
.pin.way span { min-width: 190px; padding: 27px 22px; border-radius: 6px; border: 1.5px solid rgba(120, 214, 255, .85); color: #e8f7ff; font-size: 27px;
  background: linear-gradient(rgba(10, 28, 64, .72), rgba(6, 14, 36, .82)); box-shadow: 0 0 18px rgba(90, 190, 255, .35); backdrop-filter: blur(3px); }
.pin.way.elite span, .pin.way.final span, .pin.way.floor span { border-color: #ff7a80; box-shadow: 0 0 18px rgba(255, 90, 95, .4); color: #ffd9da; }
.pin.way.treasure span { border-color: var(--gold); box-shadow: 0 0 18px rgba(240, 201, 106, .35); color: var(--gold); }
.pin.way.camp span { border-color: #8ff08a; box-shadow: 0 0 18px rgba(111, 214, 106, .35); color: #d6ffd3; }
.pin.way.glow span { background: linear-gradient(#7a1420, #3a0810); }
.pin.way.back span, .pin.way.handover span { background: linear-gradient(#f7d98a, #c9962f); border-color: #fff0c2; color: #2a1a06; box-shadow: 0 0 18px rgba(240, 201, 106, .5); }

.logo { position: absolute; left: 0; right: 0; top: 13%; text-align: center; }
.logo small { display: block; font: 700 24px/1 var(--title); letter-spacing: 14px; color: #fff; text-shadow: 0 2px 8px #000; }
.logo b { display: block; margin-top: 12px; font: 900 82px/.95 var(--title); color: var(--gold);
  text-shadow: 0 3px 0 #7a4c12, 0 6px 0 #2a1806, 0 0 30px rgba(240, 201, 106, .6); }
.logo i { display: block; margin-top: 18px; font: italic 600 26px/1.2 Nunito, sans-serif; color: #fff; text-shadow: 0 2px 8px #000; }

/* ---------- floating windows over the world */
/* the System button lives at the bottom, under the thumb */
#hud { display: flex; justify-content: space-between; align-items: center; }
#hud .sysbtn { margin-left: auto; }
/* the way out: always the same corner, opposite System, never among the choices */
.backbtn, .chip.backchip { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 16px 6px 12px; cursor: pointer; background: rgba(20, 14, 8, .6); border: 1px solid rgba(240, 201, 106, .7); border-radius: 4px;
  font: 700 12px/1 var(--title); letter-spacing: 2px; color: #f3dfa6; text-transform: uppercase; backdrop-filter: blur(4px); }
.backbtn i, .chip.backchip i { width: 9px; height: 9px; rotate: 45deg; border: solid var(--gold); border-width: 0 0 2px 2px; margin-left: 4px; }
.backbtn:active, .chip.backchip:active { background: rgba(60, 44, 18, .8); }
#hud[hidden], #hud:empty { display: none; }
.sysbtn, .chip.sys { position: relative; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 14px 6px 12px; cursor: pointer; background: rgba(10, 24, 56, .55); border: 1px solid rgba(120, 214, 255, .7); border-radius: 4px;
  font: 700 12px/1 var(--title); letter-spacing: 2px; color: #cfeeff; text-transform: uppercase; backdrop-filter: blur(4px); box-shadow: 0 0 12px rgba(90, 190, 255, .3); }
.sysbtn i, .chip.sys i { width: 9px; height: 9px; rotate: 45deg; border: 2px solid #9fe4ff; box-shadow: 0 0 8px #9fe4ff; }
.foot .chip.sys { margin-left: auto; min-height: 44px; border-radius: 4px; }
.sysbtn.news::after { content: ''; position: absolute; right: -5px; top: -5px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); }
/* the System window: a pane of blue light. Fixed size, so nothing jumps
   when you change tab; tabs sit at the bottom under the thumb. */
.sheet.system { place-items: end center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(2, 6, 18, .3); backdrop-filter: none; }
.syswin { --c: #63cdff; --c2: rgba(99, 205, 255, .28); width: 100%; height: min(76dvh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: #e6f5ff;
  background: linear-gradient(rgba(7, 22, 54, .84), rgba(3, 10, 30, .9)); border: 1px solid var(--c); border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(3, 10, 30, .8), 0 0 26px rgba(70, 180, 255, .5), inset 0 0 50px rgba(70, 180, 255, .09); backdrop-filter: blur(9px); animation: sysopen .16s ease-out; }
.syswin::before, .syswin::after { content: ''; position: absolute; width: 16px; height: 16px; border: 2px solid #b5eaff; pointer-events: none; }
.syswin { position: relative; }
.syswin::before { left: -3px; top: -3px; border-right: 0; border-bottom: 0; }
.syswin::after { right: -3px; bottom: -3px; border-left: 0; border-top: 0; }
@keyframes sysopen { from { scale: 1 .5; } }
.syshead { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; padding: 10px 10px 8px; border-bottom: 1px solid var(--c2); }
.sysname { display: flex; align-items: center; gap: 10px; }
.sysname i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--c)); }
.sysname i:last-child { background: linear-gradient(270deg, transparent, var(--c)); }
.systitle { padding: 5px 16px; border: 1px solid var(--c); font: 800 15px/1 Nunito, sans-serif; letter-spacing: 5px; text-transform: uppercase; color: #fff; text-shadow: 0 0 10px var(--c); box-shadow: inset 0 0 12px var(--c2); }
.syscap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.syscap small { font: 800 9px/1 Nunito, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: var(--c); }
.sysx, .sysopt { width: 40px; height: 40px; padding: 0; background: none; border: 1px solid var(--c2); border-radius: 2px; color: #cfeeff; font-size: 22px; line-height: 1; cursor: pointer; }
.sysopt { font-size: 18px; }
.sysopt.on { border-color: var(--c); color: #fff; box-shadow: inset 0 0 12px var(--c2); }
.sysbody { display: flex; flex-direction: column; gap: 7px; padding: 12px 14px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--c2) transparent; overscroll-behavior: contain; }
.sysbody > * { flex-shrink: 0; }
.systabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-image: linear-gradient(90deg, transparent, var(--c2), transparent) 1; border-top: 1px solid; }
.systabs button { position: relative; min-height: 48px; padding: 0 1px; white-space: nowrap; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
  font: 800 11.5px/1 Nunito, sans-serif; letter-spacing: .4px; text-transform: uppercase; color: #8fb8d6aa; transition: color .15s; }
.systabs button::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 7px; height: 2px; border-radius: 2px; background: var(--c); box-shadow: 0 0 8px var(--c); scale: 0 1; transition: scale .18s ease-out; }
.systabs button.on { color: #fff; text-shadow: 0 0 10px var(--c); }
.systabs button.on::after { scale: 1 1; }
.systabs button:active { color: #fff; }
.systabs button:focus-visible { outline: none; color: #fff; }
/* lines of the status screen */
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.sline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; min-height: 22px; }
.sline span, .slabel, .sstat span { font: 800 11px/1.2 Nunito, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #7fd0ff; white-space: nowrap; }
.sline b { font: 800 15px/1.2 Nunito, sans-serif; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sline.big b { font-size: 24px; text-shadow: 0 0 12px var(--c); }
.sline.dim b, .sline.dim span { color: #8fa6bd; }
.sline.hot b { color: var(--gold); }
.srule { height: 1px; margin: 3px 0; background: linear-gradient(90deg, transparent, var(--c2) 12%, var(--c2) 88%, transparent); }
.sstat { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 34px; }
.sstat span { flex: 0 0 38px; }
.sstat em { margin-left: auto; padding: 3px 7px; font: 800 12px/1 Nunito, sans-serif; font-style: normal; color: #cfe6f7; border: 1px solid var(--c2); border-radius: 2px; white-space: nowrap; }
.sstat .splus { flex: none; margin-left: auto; }
.sstat em + .splus { margin-left: 0; }
.sstat b { font: 800 19px/1 Nunito, sans-serif; color: #fff; }
.sstat b.wow { color: var(--gold); text-shadow: 0 0 10px rgba(240, 201, 106, .6); }
.splus { width: 40px; height: 40px; padding: 0; background: rgba(99, 205, 255, .12); border: 1px solid var(--c); border-radius: 2px; color: #fff; font: 800 20px/1 Nunito, sans-serif; cursor: pointer; box-shadow: 0 0 8px var(--c2); }
.splus:disabled { border-color: var(--c2); color: transparent; background: none; box-shadow: none; cursor: default; }
.splus:active:not(:disabled) { background: var(--c); color: #04122c; }
.slabel { display: block; margin-top: 2px; }
.snote.lay { text-align: left; color: #cfe0f2; line-height: 1.45; }
.srow { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(99, 205, 255, .16); }
.srow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.srow b { font: 800 16px/1.2 Nunito, sans-serif; color: #fff; }
.srow em { font-style: normal; font-size: 13px; color: #7fd0ff; }
.srow em.stars { color: var(--gold); letter-spacing: 2px; }
.srow small, .syswin small { color: #a9c3d9; }
.srow.locked { opacity: .4; }
.syswin .bar.prof { height: 5px; border: 0; background: rgba(99, 205, 255, .14); border-radius: 0; }
.syswin .bar.prof i { background: var(--c); border-radius: 0; box-shadow: 0 0 6px var(--c); }
.syswin .bar.exp { height: 16px; border: 1px solid var(--c2); border-radius: 0; background: rgba(3, 10, 30, .6); }
.syswin .bar.exp i { background: linear-gradient(90deg, #2a7fd6, var(--c)); border-radius: 0; }
.syswin .bar.exp span { line-height: 14px; font-size: 11px; letter-spacing: 1px; }
.syswin .pchip { background: rgba(3, 10, 30, .5); border: 1px solid var(--c2); border-radius: 2px; }
.syswin .face { border-color: var(--c2); border-radius: 2px; }
.suse { min-width: 62px; min-height: 40px; background: rgba(99, 205, 255, .12); border: 1px solid var(--c); border-radius: 2px; color: #fff; font: 800 12px/1 Nunito, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.suse:disabled { border-color: var(--c2); color: #5f7f99; background: none; }
.sact { display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 50px; padding: 8px 14px; text-align: left; cursor: pointer; background: rgba(99, 205, 255, .08); border: 1px solid var(--c2); border-left: 3px solid var(--c); border-radius: 2px; color: #fff; }
.sact b { font: 800 15px/1.2 Nunito, sans-serif; }
.sact:active { background: var(--c2); }
.snote { margin-top: 4px; font-size: 13px; line-height: 1.4; color: #8fa6bd; }
.coins { display: inline-flex; align-items: center; gap: 4px; }
.topright { margin-left: auto; font-size: 14px; color: var(--gold); font-weight: 800; }
.topright .gold { font-size: 16px; }

#ui { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; flex-direction: column; gap: 8px; padding: 0 10px calc(10px + env(safe-area-inset-bottom)); pointer-events: none; }
#ui > * { pointer-events: auto; }
#talk { display: none; padding: 10px 14px; background: rgba(8, 12, 28, .7); border: 1px solid rgba(240, 201, 106, .7); border-radius: 6px; backdrop-filter: blur(5px); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
#talk.on { display: block; }
#talk b { display: inline-block; margin: -22px 0 4px -4px; padding: 2px 12px; background: var(--gold); color: #24180a; border-radius: 8px; font: 800 13px/1.4 Nunito, sans-serif; }
#talk p { font-size: 15px; line-height: 1.4; }

/* ---------- panel */
#panel { max-height: 62dvh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border-radius: 14px; }
#panel:empty { display: none; }
/* the System window: translucent blue glass */
.window { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px; background: linear-gradient(rgba(10, 28, 64, .62), rgba(6, 14, 36, .72)); border: 1px solid rgba(120, 214, 255, .8); border-radius: 6px;
  box-shadow: 0 0 22px rgba(90, 190, 255, .35), inset 0 0 34px rgba(90, 190, 255, .1); backdrop-filter: blur(7px); }
.window::before, .window::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid #9fe4ff; pointer-events: none; }
.window::before { left: -2px; top: -2px; border-right: 0; border-bottom: 0; }
.window::after { right: -2px; bottom: -2px; border-left: 0; border-top: 0; }
.window.slim { padding: 8px; gap: 6px; }
.choices { display: flex; flex-direction: column; gap: 6px; }
.choices.grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.choices.grid2 .choice:last-child:nth-child(odd) { grid-column: span 2; }
.btn.choice { min-height: 48px; padding: 6px 16px; font-size: 16px; background: linear-gradient(rgba(10, 28, 64, .66), rgba(6, 14, 36, .76)); border: 1px solid rgba(120, 214, 255, .75); border-radius: 6px; box-shadow: none; backdrop-filter: blur(5px); }
.btn.choice small { font-size: 12px; }
.btn.choice.ghost { min-height: 40px; justify-content: center; text-align: center; border-color: rgba(255, 255, 255, .25); color: var(--dim); font-size: 14px; }
.btn.choice.gold, .btn.choice.glowb { background: linear-gradient(rgba(247, 217, 138, .95), rgba(201, 150, 47, .95)); border-color: #fff0c2; color: #2a1a06; font-family: var(--title); justify-content: flex-start; text-align: left; }
.btn.choice.gold .lbl, .btn.choice.glowb .lbl { flex: 1; }
.btn.choice.glowb small, .btn.choice.gold small { color: #5a4210; font-family: Nunito, sans-serif; }
.btn.choice.next { justify-content: flex-end; text-align: right; min-height: 42px; border-color: rgba(240, 201, 106, .7); color: var(--gold); }
.btn.choice.next .lbl { flex: none; }
.row.small { justify-content: center; gap: 18px; }
.row.small > * { flex: none; }
.link { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; min-height: 44px; padding: 6px 10px; color: #fff; font-size: 13px; text-decoration: underline; text-shadow: 0 1px 4px #000; cursor: pointer; }

.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.pchip { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; background: rgba(8, 12, 28, .6); border: 1px solid rgba(255, 255, 255, .15); border-radius: 10px; }
.pchip > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pchip > div > b { font: 800 12px/1.1 Nunito, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* HP over an enemy's head: a pip a point. A boss's are grouped by the part they belong to. */
.vp { display: flex; align-items: center; gap: 4px; min-width: 0; }
.vp i { display: block; width: 20px; height: 20px; border: 2.5px solid rgba(255, 140, 140, .55); border-radius: 50%; background: rgba(34, 8, 12, .85); box-shadow: 0 2px 3px #000; transition: background .2s; }
.vp i.on { background: radial-gradient(circle at 35% 30%, #ffc9c9, #d23a45); border-color: #ffe0e0; box-shadow: 0 0 8px rgba(255, 90, 95, .7), 0 2px 3px #000; }
.egauge { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin: 5px -140px 0; }
.vline { display: flex; align-items: center; gap: 4px; }
.vline small { flex: 0 0 18px; font: 800 10px/1 Nunito, sans-serif; color: #b9c4dc; letter-spacing: .5px; }
.vline .bar { flex: 1; height: 14px; }
.vline .bar span { font-size: 10px; line-height: 12px; white-space: nowrap; }
.pchip.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(240, 201, 106, .6); }
.pchip.down { opacity: .4; }
.cheats { max-height: 44dvh; overflow-y: auto; }
.runhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.runhead span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.runhead b { font: 800 15px/1.2 var(--title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* a long request name wraps to a second line rather than being cut */
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.paths.n1 { grid-template-columns: 1fr; }
.paths.n2 { grid-template-columns: 1fr 1fr; }
.path { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 4px; cursor: pointer; background: rgba(27, 34, 56, .9); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.path.elite, .path.final { border-color: var(--red); }
.path.camp { border-color: var(--green); }
.path.treasure { border-color: var(--gold); }
.path:active { translate: 0 2px; }
.cheats { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.cheat { display: flex; flex-direction: column; justify-content: center; min-height: 47px; padding: 4px 10px; text-align: left; cursor: pointer; background: rgba(27, 34, 56, .9); border: 1px solid var(--line); border-radius: 12px; }
.cheat b { font: 800 15px/1.15 var(--title); color: var(--gold); }
.cheat small { font-size: 11px; line-height: 1.2; }
.cheat:last-child:nth-child(odd) { grid-column: span 2; }
/* Phones: every power must be on screen at once, so names only, three
   across. Tapping one makes the goddess explain it. */
@media (max-width: 480px), (max-height: 700px) {
  .cheats { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; overflow: visible; }
  .cheat { min-height: 44px; padding: 4px 6px; }
  .cheat b { font-size: 11.5px; hyphens: manual; }
  .cheat small { display: none; }
  .cheat:last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-height: 700px) {
  #talk { padding: 8px 12px; }
  #talk p { font-size: 13px; line-height: 1.3; }
  .cheat { min-height: 40px; }
  .cheatmove { padding: 4px 8px; }
  .cheatmove small { display: none; }
  .cheatmove span { font-size: 12px; line-height: 1.25; }
  .cheatmove em { display: none; }
}
.cheat.on { border-color: var(--gold); box-shadow: 0 0 12px rgba(240, 201, 106, .5); background: #2f2c52; }
.scroll { display: flex; flex-direction: column; gap: 8px; }
.scroll.short { max-height: 30vh; overflow-y: auto; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
.list { display: flex; flex-direction: column; gap: 8px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hint { color: var(--dim); font-size: 14px; text-align: center; }
.glowtext { color: var(--gold); }
h3 { font: 700 15px/1.2 var(--title); color: var(--gold); margin-top: 8px; letter-spacing: 1px; }
.dim { color: var(--dim); }
.good { color: var(--green); }
.wow { color: var(--gold); }

.rune { display: inline-block; flex: none; rotate: 45deg; border: 2px solid var(--gold); box-shadow: 0 0 6px rgba(240, 201, 106, .6); margin: 0 6px; }
.btn.gold .rune { border-color: #5a4210; box-shadow: none; }
.rune.fire { border-color: #ff9b54; } .rune.ice { border-color: #9fd8ff; } .rune.thunder { border-color: #ffe66b; } .rune.light { border-color: #fff2c0; } .rune.dark { border-color: #c48bff; } .rune.wind { border-color: #8fe3c0; } .rune.earth { border-color: #d9a066; }
.coin { display: inline-block; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3c9, #e2b34d 55%, #9c6c1c); border: 1px solid #7a5415; }
.coin.s { background: radial-gradient(circle at 35% 30%, #ffffff, #c9d2dc 55%, #7d8794); border-color: #5c6672; }
.coin.c { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c9793f 55%, #7a3f17); border-color: #5e2f10; }
.coins > span { display: inline-flex; align-items: center; gap: 3px; }
.coins { gap: 7px; }
.pursechip { align-self: flex-end; display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: rgba(8, 12, 28, .7); border: 1px solid rgba(240, 201, 106, .5); border-radius: 4px; color: var(--gold); font-weight: 800; font-size: 14px; }
.pursechip small { color: #cdbf9a; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
.sheet-in .feeline { font-size: 13px; color: #a9c3d9; }
.gem { display: inline-block; flex: none; rotate: 45deg; margin: 0 9px; border-radius: 3px; background: linear-gradient(135deg, #cfeeff, #5aa9e6 55%, #2a4f9c); border: 1px solid #dff4ff; box-shadow: 0 0 8px rgba(116, 199, 255, .6); }
.look .face { width: 100% !important; height: auto !important; aspect-ratio: 1; }
.face { flex: none; border: 2px solid var(--gold2); border-radius: 10px; background: #2a3152; object-fit: cover; }
.mini { flex: none; object-fit: contain; border: 2px solid var(--line); border-radius: 10px; background: #2a3152; }
.empty { width: 36px; height: 36px; border: 2px dashed var(--line); border-radius: 8px; flex: none; }

.btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 14px; text-align: left; cursor: pointer;
  background: linear-gradient(var(--card2), var(--card)); border: 1.5px solid var(--line); border-radius: 12px; font-size: 18px; font-weight: 800;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.btn:active:not(:disabled) { translate: 0 2px; box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.btn:disabled { opacity: .4; }
.btn .lbl { flex: 1; display: flex; flex-direction: column; }
.btn .right { color: var(--gold); font-size: 15px; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.btn.gold { background: linear-gradient(#f7d98a, #c9962f); border-color: #fff0c2; color: #2a1a06; justify-content: center; text-align: center; font-family: var(--title); font-size: 20px; }
.btn.gold .lbl { flex: none; }
.btn.gold small { color: #5a4210; font-family: Nunito, sans-serif; font-weight: 700; }
.btn.ghost { background: transparent; box-shadow: none; justify-content: center; text-align: center; min-height: 48px; font-size: 16px; }
.btn.ghost .lbl { flex: none; }
.btn.skill { min-height: 52px; font-size: 16px; }
.btn.on { border-color: var(--gold); background: linear-gradient(#3a3566, #2a2850); }
.grid2 .btn { min-height: 72px; font-size: 20px; }
.grid2 .btn.gold { justify-content: flex-start; text-align: left; }

.chip { min-height: 44px; padding: 6px 14px; background: var(--card); border: 1.5px solid var(--line); border-radius: 22px; cursor: pointer; font-size: 14px; font-weight: 700; white-space: nowrap; }
.chip.on { border-color: var(--gold); color: var(--gold); }
.chip:disabled { opacity: .4; }
.chip.buy { color: var(--gold); border-color: var(--gold2); display: flex; align-items: center; gap: 4px; }
.chip.buy span { display: flex; align-items: center; gap: 4px; }
.foot { display: flex; gap: 5px; align-items: center; }
.foot .chip { min-height: 44px; min-width: 44px; padding: 4px 10px; font-size: 13px; background: rgba(8, 12, 28, .6); }
.foot .chip.backchip { background: rgba(20, 14, 8, .6); font-size: 12px; }

.top { display: flex; align-items: center; gap: 10px; }
.top > b { font: 800 18px/1.2 var(--title); color: var(--gold); }
.top-mid { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.top-mid b { font: 800 19px/1.2 var(--title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gold { color: var(--gold); font-weight: 800; display: flex; align-items: center; gap: 4px; }
.back { width: 44px; height: 44px; font-size: 30px; line-height: 1; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.rank { display: grid; place-items: center; width: 48px; height: 48px; flex: none; font: 900 24px/1 var(--title); color: #2a1a06;
  background: radial-gradient(circle at 35% 30%, #fff3c9, #e2b34d 55%, #9c6c1c); border: 2px solid #fff0c2; border-radius: 50%; box-shadow: 0 0 10px rgba(240, 201, 106, .5); }
.rank.big { width: 60px; height: 60px; font-size: 30px; }
.rank.huge { width: 130px; height: 130px; font-size: 68px; animation: slam .5s cubic-bezier(.2, 2, .4, 1); }
@keyframes slam { from { scale: 3; opacity: 0; } }

/* places in town: each card is a picture of the place */
.places { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.place { position: relative; height: 84px; padding: 0; overflow: hidden; cursor: pointer; text-align: left;
  background-size: cover; background-position: center; border: 1.5px solid var(--gold2); border-radius: 12px; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.place span { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 10px;
  background: linear-gradient(transparent 20%, rgba(8, 10, 22, .92)); }
.place b { font: 800 18px/1.1 var(--title); color: #fff; text-shadow: 0 2px 4px #000; }
.place small { color: var(--gold); font-weight: 700; }
.place:active { translate: 0 2px; }
.place.locked { filter: grayscale(.9) brightness(.6); }
.place.glow { border-color: var(--gold); animation: glow 1s infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 16px var(--gold); } }

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tiles.n1 { grid-template-columns: 1fr; }
.tiles.n2 { grid-template-columns: 1fr 1fr; }
.tiles.n3 { grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 104px; padding: 8px 2px; cursor: pointer;
  background: linear-gradient(var(--card2), var(--card)); border: 1.5px solid var(--line); border-radius: 12px; text-align: center; box-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.tile b { font-size: 16px; }
.tile:active { translate: 0 2px; }
.tile.node.elite, .tile.node.final { border-color: var(--red); }
.tile.node.camp { border-color: var(--green); }
.tile.node.treasure { border-color: var(--gold); }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pcard { display: flex; gap: 8px; align-items: center; padding: 5px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; min-width: 0; }
.pcard.active { border-color: var(--gold); background: #2f2c52; box-shadow: 0 0 10px rgba(240, 201, 106, .4); }
.pcard.down { opacity: .45; }
.pinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pinfo b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.bar { position: relative; height: 14px; background: #0a0c16; border: 1px solid #000; border-radius: 7px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#8ff08a, #3fae45); border-radius: 7px; transition: width .25s; }
.bar span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 12px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.bar.hp i { background: linear-gradient(#ff8a7a, #d23a45); }
.bar.mp i { background: linear-gradient(#8fb8ff, #4a68d8); }
.bar.exp i, .bar.rp i { background: linear-gradient(#fbe29a, #cf9a35); }
.bar.bond i { background: linear-gradient(#ffb3d1, #e25591); }
.bar.exp, .bar.rp, .bar.bond { height: 18px; border-radius: 9px; }
.bar.exp span, .bar.rp span, .bar.bond span { line-height: 16px; font-size: 12px; }

.cheatmove { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: rgba(18, 48, 96, .5); border: 1px solid rgba(120, 214, 255, .5); border-radius: 4px; }
.cheatmove small { font: 800 10px/1.1 Nunito, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: #7fd0ff; }
.cheatmove b { font: 800 17px/1.2 var(--title); color: var(--gold); }
.cheatmove span { font-size: 13px; line-height: 1.35; color: #d6e8f5; }
.cheatmove em { font-size: 12px; line-height: 1.3; font-style: normal; color: #8fc7e8; }
.syswin .grade { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 1px 6px; margin-left: 6px; border: 1px solid currentColor; color: #8fb8d6; }
.syswin .grade.extra { color: #7dffa1; }
.syswin .mini { border-color: var(--c2); border-radius: 2px; background: rgba(3, 10, 30, .5); }
.syswin .grade.unique { color: var(--gold); }
.syswin .grade.ultimate { color: #ff9ecb; box-shadow: 0 0 8px rgba(255, 158, 203, .6); }
.syswin .umv { color: #cfe6f7; }
.syswin .umv b { font-size: 13px; color: var(--gold); }

.story { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.story p { font-size: 17px; line-height: 1.45; }
.story .btn.gold { margin-top: auto; }
.who { color: var(--gold); font: 800 20px/1.2 var(--title); }
.loot { display: flex; gap: 16px; justify-content: center; font-size: 20px; font-weight: 800; color: var(--gold); }
.loot span { display: flex; align-items: center; gap: 4px; }
.loot.dim { font-size: 14px; font-weight: 500; }

/* the isekai status window */
.sys { padding: 8px 12px; background: rgba(18, 48, 96, .93); border: 1.5px solid var(--blue); border-radius: 8px; color: #e4f4ff; font-size: 14px;
  box-shadow: 0 0 14px rgba(116, 199, 255, .5); animation: sysin .25s ease-out; transition: opacity .5s; }
.sys.out { opacity: 0; }
.sys.static { box-shadow: none; animation: none; }
@keyframes sysin { from { opacity: 0; translate: 0 -8px; } }
#toasts { position: absolute; left: 10px; right: 10px; top: calc(12px + env(safe-area-inset-top)); z-index: 50; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.sysbox { padding: 10px 12px; background: rgba(18, 48, 96, .55); border: 1.5px solid var(--blue); border-radius: 10px; display: flex; flex-direction: column; gap: 6px; }
.sysrow { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sysrow span { display: flex; align-items: center; gap: 4px; }
.bignum { font: 900 26px/1 var(--title); color: var(--gold); }

.stat { display: flex; align-items: center; gap: 8px; padding: 4px 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: 10px; }
.sname { width: 72px; color: var(--mint); }
.svals { flex: 1; display: flex; flex-direction: column; }
.svals b { font-size: 20px; }
.plus { width: 48px; height: 48px; font-size: 24px; font-weight: 900; background: linear-gradient(#f7d98a, #c9962f); border: 0; border-radius: 12px; color: #2a1a06; cursor: pointer; }
.plus.wide { width: 60px; font-size: 16px; }
.plus:disabled { opacity: .2; }

.rowcard { display: flex; align-items: center; gap: 10px; padding: 8px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; }
.rowcard > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rowcard.locked { opacity: .45; }
.stars { color: var(--gold); font-size: 15px; letter-spacing: 2px; }
.rowcard.gear b { font: 800 18px/1.2 var(--title); color: #fff; }
.rowcard.pick { cursor: pointer; }
.rowcard.pick.on { border-color: var(--gold); background: #2f2c52; }
.check { font-size: 13px; color: var(--gold); white-space: nowrap; }

.tabs { display: flex; gap: 4px; }
.tabs button { flex: 1; min-height: 44px; background: transparent; border: 0; border-bottom: 3px solid var(--line); cursor: pointer; font-size: 15px; font-weight: 700; color: var(--dim); }
.tabs button.on { color: var(--gold); border-color: var(--gold); }

.rankbox { display: flex; gap: 10px; align-items: center; }
.rankbox > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.quest { position: relative; width: 100%; text-align: left; cursor: pointer; padding: 10px; overflow: hidden; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.quest > * { position: relative; }
.qthumb { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .28; -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%); mask-image: linear-gradient(90deg, transparent, #000 70%); }
.quest.exam { border-color: var(--gold); animation: glow 1s infinite alternate; }
.qhead { display: flex; gap: 8px; align-items: center; }
.qhead b { font-size: 17px; }
.qinfo { display: flex; justify-content: space-between; color: var(--dim); font-size: 14px; }
.qinfo span { color: var(--gold); display: flex; align-items: center; gap: 4px; }
.tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 800; color: #10131f; background: var(--dim); white-space: nowrap; }
.tag.ok { background: var(--mint); }
.tag.bad { background: var(--red); color: #fff; }
.tag.gold { background: var(--gold); }
.tag.k-chore { background: #d9c7a0; } .tag.k-gather { background: #a9e06a; } .tag.k-deliver { background: #f2d16b; } .tag.k-hunt { background: #8fe3c0; }
.tag.k-slay { background: #ff9b54; } .tag.k-escort { background: #74c7ff; } .tag.k-clear { background: #c48bff; } .tag.k-investigate { background: #b9c4f0; }
.tag.k-bandits { background: #8a4a2a; color: #fff; } .tag.k-rescue { background: #ff9ec0; } .tag.k-bounty { background: #d23a45; color: #fff; }
.tag.k-defend { background: #5a8fd6; color: #fff; } .tag.k-campaign { background: #b3202c; color: #fff; } .tag.k-exam { background: var(--gold); }
/* rank stamp on a notice */
/* Rank stamps are inked in the rank's metal (RANKS[].metal, as on the guild card). */
.stamp { --ink: #a3271f; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border: 2px solid var(--ink); border-radius: 50%; color: var(--ink); font: 900 15px/1 var(--title); rotate: -8deg; background: rgba(255, 255, 255, .35); }
.stamp.hard { background: var(--ink); color: #fff; }
.stamp[data-metal="copper"] { --ink: #a4532b; } .stamp[data-metal="iron"] { --ink: #4d545c; } .stamp[data-metal="silver"] { --ink: #6f7884; }
.stamp[data-metal="gold"] { --ink: #a87a0e; } .stamp[data-metal="platinum"] { --ink: #5e7286; } .stamp[data-metal="mithril"] { --ink: #23809c; } .stamp[data-metal="adamantite"] { --ink: #3c3f6e; }
/* the notice on the counter, and the guild's seal on it */
.held { position: absolute; right: 22px; bottom: calc(var(--ui, 300px) + 26px); z-index: 2; width: 318px; display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 14px; rotate: 4deg; color: #3a2a14;
  background: linear-gradient(#fbf3dc, #ecdcb4); border: 1px solid #b89c62; border-radius: 3px; box-shadow: 0 10px 22px rgba(0, 0, 0, .55); animation: slidein .25s ease-out; }
@keyframes slidein { from { translate: 60px 30px; } }
.held b { font: 800 25px/1.15 var(--title); color: #2a1a06; }
.held small { font-size: 18px; color: #7a6238; font-weight: 700; }
.held .qhead { display: flex; align-items: center; gap: 8px; }
.held .tag { font-size: 16px; padding: 3px 10px; }
.held .stamp { width: 40px; height: 40px; font-size: 20px; }
.held .qinfo span { font-size: 22px; color: #8a5a00; font-weight: 800; }
.seal { position: absolute; right: 10px; bottom: 14px; padding: 4px 12px; rotate: -14deg; border: 4px double #b3202c; border-radius: 6px; color: #b3202c; font: normal 900 27px/1 var(--title); letter-spacing: 2px; text-transform: uppercase;
  background: rgba(255, 255, 255, .25); animation: thump .28s cubic-bezier(.2, 1.6, .4, 1); }
.seal.complete { border-color: #2f7d32; color: #2f7d32; }
.seal.failed { border-color: #5a5a5a; color: #5a5a5a; }
@keyframes thump { from { scale: 2.6; } }
/* where you have just arrived */
.arrive { position: absolute; left: 0; right: 0; top: 34%; z-index: 965; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 20px; pointer-events: none; text-align: center;
  background: linear-gradient(90deg, transparent, rgba(6, 8, 18, .82) 20%, rgba(6, 8, 18, .82) 80%, transparent); border-block: 2px solid var(--gold); transition: opacity .35s; animation: arrivein .4s ease-out; }
.arrive.out { opacity: 0; }
.arrive b { font: 800 50px/1.05 var(--title); color: var(--gold); letter-spacing: 3px; }
.arrive small { font: 600 24px/1.2 Nunito, sans-serif; color: #fff; }
@keyframes arrivein { from { scale: 1 0; } }
/* a notice in your hand */
.guild-paper.notice-paper { width: min(460px, 100%); max-height: none; overflow: visible; padding: 15% 9% 8%; background: center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 10px 18px #000a); } /* the same painted paper as on the board */
.notice-paper h2 { margin: 10px 0 8px; text-align: left; color: #2a1a06; font-size: 23px; }
.notice-paper small { color: #7a6238; font-weight: 700; }
.nhead { display: flex; align-items: center; gap: 10px; }
.nhead .stamp { width: 46px; height: 46px; font-size: 23px; border-width: 3px; }
.nhead > div { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.notice-paper .ndesc { font-style: italic; text-align: left; font-size: 18px; }
.notice-paper .nclient { text-align: right; font-size: 14px; font-weight: 800; color: #6a5330; }
.nrows { display: flex; flex-direction: column; gap: 5px; padding: 8px 0; margin-top: 10px; border-block: 1px dashed #b89c62; font-size: 16px; }
.nrows > div { display: flex; justify-content: space-between; gap: 10px; }
.nrows span { color: #7a6238; }
.nrows b { color: #2a1a06; display: flex; align-items: center; gap: 4px; }
.nrows .nrule { color: #6a5330; font-size: 13px; font-weight: 700; }
.pips.done { color: var(--green); }
.qkind { display: flex; justify-content: center; }
.qkind .tag { font-size: 14px; padding: 3px 14px; }
.pips { display: flex; gap: 4px; font-weight: 800; color: var(--gold); }
.pips { gap: 0; align-items: center; }
.pips i { position: relative; width: 11px; height: 11px; margin-left: 15px; border-radius: 50%; background: #3b4a66; }
.pips i:first-child { margin-left: 0; }
.pips i + i::before { content: ''; position: absolute; right: 100%; top: 4.5px; width: 15px; height: 2px; background: #3b4a66; }
.pips i.done + i::before { background: var(--mint); }
.pips i:last-child { border-radius: 2px; rotate: 45deg; }
.pips i:last-child::before { rotate: -45deg; transform-origin: 100% 50%; translate: -2px 4px; }
.pips i.done { background: var(--mint); }
.pips i.now { background: var(--gold); box-shadow: 0 0 0 3px rgba(240, 201, 106, .28), 0 0 10px var(--gold); }

.title { display: flex; flex-direction: column; gap: 10px; flex: 1; justify-content: center; }
.tagline { color: var(--mint); text-align: center; font-size: 16px; font-style: italic; }
.credits { color: var(--dim); text-align: center; font-size: 13px; padding: 8px; }
.looks { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.look { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; }
.look.on { border-color: var(--gold); background: #2f2c52; box-shadow: 0 0 10px rgba(240, 201, 106, .4); }
.look small { font-size: 11px; }
.name { display: flex; align-items: center; gap: 10px; color: var(--mint); }
input, textarea { flex: 1; width: 100%; padding: 10px; background: #070912; border: 1.5px solid var(--line); border-radius: 10px; font-size: 18px; user-select: text; -webkit-user-select: text; }
textarea { font-size: 12px; word-break: break-all; }

.sheet { position: absolute; inset: 0; z-index: 40; background: rgba(4, 5, 10, .38); backdrop-filter: blur(1.5px); display: grid; place-items: center; padding: 16px; }
.sheet-in { width: 100%; max-height: 100%; overflow-y: auto; padding: 18px 16px; background: rgba(12, 22, 50, .92); border: 1px solid rgba(116, 199, 255, .7); border-radius: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 40px rgba(240, 201, 106, .25); }
.sheet-in h2 { color: var(--gold); text-align: center; font: 800 24px/1.15 var(--title); }
.sheet-in p { font-size: 16px; line-height: 1.45; text-align: center; }
.quote { color: var(--mint); font-style: italic; }
/* A word from someone who came along. */
.cheer { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 4px; }
.cheer .face { flex: none; border-radius: 50%; }
.sheet-in .cheer p { margin: 0; font-style: italic; text-align: left; }
.cheer b { display: block; font-style: normal; font-size: 13px; color: var(--dim); }
.sheet-in .news { font-size: 14px; color: #cfe0f2; border-top: 1px solid rgba(116, 199, 255, .35); padding-top: 8px; }
.appraise { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 12px; background: rgba(18, 48, 96, .55); border: 1px solid rgba(116, 199, 255, .5); border-radius: 8px; text-align: center; }
.appraise small { color: #7fd0ff; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.sheet-in .appraise p { font-size: 14px; line-height: 1.35; }
.appraise b { display: flex; align-items: center; gap: 5px; color: var(--gold); font-size: 20px; }
.rankup { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rankup small { color: var(--gold); letter-spacing: 8px; font: 700 16px/1 var(--title); }
.rankup b { font: 800 24px/1 var(--title); }
.joined { display: flex; flex-direction: column; align-items: center; }
.joined b { font: 800 26px/1.1 var(--title); color: var(--gold); }
.joinart { height: 240px; object-fit: contain; align-self: center; filter: drop-shadow(0 0 14px rgba(240, 201, 106, .35)); }
.wideart { width: 100%; border-radius: 10px; border: 1.5px solid var(--gold2); }

@media (min-height: 780px) { .grid2 .btn { min-height: 84px; } }

/* ---------- the fight window: who stands, what you can do, the switches.
   Same glass and hairlines as the System window; three rows, fixed height. */
.gl { display: block; flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--g) center / contain no-repeat; mask: var(--g) center / contain no-repeat; }
.gl.attack { --g: url(../assets/ui/icons/attack.svg); } .gl.punch { --g: url(../assets/ui/icons/punch.svg); } .gl.skills { --g: url(../assets/ui/icons/skills.svg); }
.gl.items { --g: url(../assets/ui/icons/items.svg); } .gl.brace { --g: url(../assets/ui/icons/brace.svg); } .gl.run { --g: url(../assets/ui/icons/run.svg); }
.window.bw { padding: 7px; gap: 6px; }

/* party strip: one row. Face and name, then HP and MP, each a bar with its number. */
.bw .chips { gap: 4px; }
.bw .chips.n1 { grid-template-columns: 1fr; } .bw .chips.n3 { grid-template-columns: repeat(3, 1fr); } .bw .chips.n4 { grid-template-columns: repeat(4, 1fr); }
.bw .pchip { border-radius: 3px; border-color: rgba(120, 214, 255, .22); background: rgba(3, 10, 30, .55); padding: 4px 5px; }
.bw .pchip .face { border-width: 1px; border-radius: 3px; }
.bw .chips.n3 .pchip, .bw .chips.n4 .pchip { display: grid; grid-template-columns: 24px 1fr; gap: 3px 5px; align-items: center; }
.bw .chips.n3 .pchip > div, .bw .chips.n4 .pchip > div { display: contents; }
.bw .chips.n3 .face, .bw .chips.n4 .face { width: 24px !important; height: 24px !important; }
.bw .chips.n3 .vline, .bw .chips.n4 .vline { grid-column: 1 / -1; gap: 3px; }
.bw .chips.n3 .vline small, .bw .chips.n4 .vline small { flex-basis: 15px; font-size: 9px; }
.bw .pchip > div > b { font-size: 11.5px; }
.bw .vline .bar { height: 13px; border-radius: 2px; border-color: rgba(0, 0, 0, .7); }
.bw .vline .bar i { border-radius: 1px; }
.bw .vline .bar span { line-height: 11px; }
/* alone, or while a list is open: one line, face, name, HP, MP */
.bw .chips.n1 .pchip > div, .bw.picking .chips .pchip > div { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.bw .chips.n1 .pchip > div > b, .bw.picking .chips .pchip > div > b { flex: 0 1 auto; max-width: 30%; font-size: 13px; }
.bw .chips.n1 .vline, .bw.picking .chips .vline { flex: 1; min-width: 0; grid-column: auto; gap: 4px; }
.bw .chips.n1 .face, .bw.picking .chips .face { width: 28px !important; height: 28px !important; }
.bw.picking .chips { grid-template-columns: 1fr; }
.bw.picking .chips .pchip { display: flex; gap: 8px; }
.bw.picking .chips .pchip:not(.active) { display: none; }
.bw .pchip.active { border-color: var(--gold); box-shadow: 0 0 9px rgba(240, 201, 106, .55), inset 0 0 8px rgba(240, 201, 106, .12); }

/* commands: one obvious gold one, the rest glass */
.cmd { min-height: 60px; }
.cmds { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.5fr; gap: 5px; }
.cmds.five { grid-template-columns: 1.25fr 1fr 1fr 1fr 1.2fr; }
.cmdb { min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; padding: 4px 2px; cursor: pointer;
  background: linear-gradient(rgba(16, 36, 78, .82), rgba(8, 18, 44, .9)); border: 1px solid rgba(120, 214, 255, .45); border-radius: 3px; color: #dff3ff; transition: opacity .15s, translate .08s; }
.cmdb b { font: 800 11px/1 Nunito, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; }
.cmdb .gl { color: #9fe4ff; }
.cmdb.main { flex-direction: row; gap: 6px; background: linear-gradient(#f7d98a, #c9962f); border-color: #fff0c2; color: #2a1a06; box-shadow: 0 0 12px rgba(240, 201, 106, .35); }
.cmdb.main b { font: 700 15px/1 var(--title); letter-spacing: .3px; }
.cmdb.main .gl { width: 22px; height: 22px; color: #4a3508; }
.cmds.five .cmdb.main { flex-direction: column; gap: 3px; }
.cmds.five .cmdb.main b { font-size: 13px; }
.cmdb:disabled { opacity: .38; cursor: default; }
.cmds.idle .cmdb { opacity: .38; }
.cmdb:active:not(:disabled) { translate: 0 2px; }
/* Brace only appears when something heavy is coming: it should be seen. */
.cmdb.brace { border-color: #ffd166; color: #ffe6a6; box-shadow: 0 0 12px rgba(255, 209, 102, .55), inset 0 0 10px rgba(255, 209, 102, .2); animation: bracepulse 1s ease-in-out infinite alternate; }
.cmdb.brace .gl { color: #ffd166; }
@keyframes bracepulse { to { box-shadow: 0 0 20px rgba(255, 209, 102, .85), inset 0 0 14px rgba(255, 209, 102, .3); } }
/* the signature move: its name over the gauge that pays for it */
.cmdb.sig { gap: 7px; color: #9fc3dc; border-color: rgba(120, 214, 255, .28); }
.cmdb.sig:disabled { opacity: 1; }
.cmds.idle .cmdb.sig { opacity: .6; }
.cmdb.sig b { font: 700 var(--fs, 12px)/1.05 var(--title); letter-spacing: 0; text-transform: none; text-align: center; }
.cmds.five .cmdb.sig b { font-size: calc(var(--fs, 12px) * .76); }
.cmdb.sig.ready { border: 1px solid var(--gold); color: #fff; background: linear-gradient(rgba(120, 80, 10, .78), rgba(60, 36, 4, .88)); animation: sigpulse .9s ease-in-out infinite alternate; }
.cmdb.sig.ready b { color: var(--gold); text-shadow: 0 0 10px rgba(240, 201, 106, .8); }
@keyframes sigpulse { from { box-shadow: 0 0 8px rgba(240, 201, 106, .45), inset 0 0 10px rgba(240, 201, 106, .2); } to { box-shadow: 0 0 20px rgba(240, 201, 106, .9), inset 0 0 14px rgba(240, 201, 106, .3); } }
.upips { display: flex; align-items: center; gap: 5px; }
.upips i { width: 8px; height: 8px; rotate: 45deg; border: 1.5px solid rgba(120, 214, 255, .6); }
.upips i.on { background: #63cdff; box-shadow: 0 0 8px #63cdff; }
.sig.ready .upips i.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* switches: what it is, small, over how it stands */
.bw .foot { gap: 5px; }
.bw .foot .chip.sw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 48px; min-height: 44px; padding: 3px 9px;
  background: rgba(3, 10, 30, .5); border: 1px solid rgba(120, 214, 255, .28); border-radius: 3px; color: #dff3ff; }
.bw .foot .chip.sw small { font: 800 8.5px/1 Nunito, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; color: #8fb4cf; }
.bw .foot .chip.sw b { font: 800 13px/1 Nunito, sans-serif; }
.bw .foot .chip.sw .gl { width: 15px; height: 15px; color: #8fb4cf; }
.bw .foot .chip.sw .gl + b { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; }
.bw .foot .chip.sw.on { border-color: var(--gold); }
.bw .foot .chip.sw.on b { color: var(--gold); }

/* Skills and Items: tiles that open upward over the window, two across, so most lists show whole. */
.list.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; max-height: min(36dvh, 214px); overflow-y: auto; padding: 6px 0 14px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent); mask-image: linear-gradient(#000 calc(100% - 16px), transparent); } /* more below fades out instead of being cut */
.list.pick > :only-child { grid-column: 1 / -1; }
.bw .btn.skill { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-content: start; align-items: center; gap: 3px 5px; min-height: 58px; padding: 7px 8px; border-radius: 3px;
  border: 1px solid rgba(120, 214, 255, .3); background: linear-gradient(rgba(16, 36, 78, .82), rgba(8, 18, 44, .9)); box-shadow: none; font-size: 14px; line-height: 1.15; }
.bw .btn.skill .rune { width: 9px; height: 9px; margin: 0 4px 0 3px; }
.bw .btn.skill .gem { margin: 0 4px 0 3px; }
.bw .btn.skill .lbl { display: contents; }
.bw .btn.skill small { grid-column: 1 / -1; grid-row: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-size: 11px; line-height: 1.25; font-weight: 600; color: #a9c3d9; }
.bw .btn.skill .right { grid-area: 1 / 3; font-size: 13px; }
.bw .btn.skill.hot { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(240, 201, 106, .18); }
.tag { position: absolute; right: 6px; top: -6px; padding: 2px 6px; font: 800 9.5px/1.1 Nunito, sans-serif; letter-spacing: 1px; text-transform: uppercase; font-style: normal; color: #2a1a06; background: var(--gold); border-radius: 2px; }
.waiting { min-height: 54px; display: flex; align-items: center; justify-content: center; color: #a9c3d9; }

/* In a fight, one System notice at a time, at the very top. */
#toasts.fight .sys:not(:last-child) { display: none; }
#toasts.fight .sys { font-size: 13px; line-height: 1.3; }
#toasts { transition: opacity .15s; }
#toasts.fight.hush { opacity: 0; }


/* ---------- glass. System surfaces are see-through, the way anime draws
   them (Solo Leveling: dark glass you can see the room through, bright thin
   frame; Shield Hero: bare icons over the scene). The painting behind is
   dimmed and softened a little so words stay readable; nothing is filled in.
   Only the outer surface filters what is behind it: parts inside it carry a
   hairline and almost no fill, so layers never add up to a solid slab. */
:root { --dim-behind: blur(3px) brightness(.7) saturate(1.15); }
.window { background: linear-gradient(rgba(30, 96, 200, .17), rgba(10, 40, 110, .3)); -webkit-backdrop-filter: var(--dim-behind); backdrop-filter: var(--dim-behind);
  box-shadow: 0 0 22px rgba(90, 190, 255, .3), inset 0 0 40px rgba(90, 190, 255, .09); }
.window, .syswin, .sys, .btn.choice { text-shadow: 0 1px 2px rgba(0, 6, 20, .85); }
.bw .pchip { background: rgba(3, 10, 30, .16); border-color: rgba(150, 224, 255, .3); }
.cmdb { background: linear-gradient(rgba(140, 220, 255, .1), rgba(140, 220, 255, .03)); border-color: rgba(150, 224, 255, .55); }
.cmdb.main { background: linear-gradient(rgba(250, 222, 146, .94), rgba(204, 153, 50, .94)); text-shadow: none; }
.cmdb.sig { border-color: rgba(150, 224, 255, .32); }
.cmdb.sig.ready { background: linear-gradient(rgba(150, 100, 14, .5), rgba(80, 48, 6, .6)); }
.bw .foot .chip.sw, .bw .foot .chip.sys { background: rgba(3, 10, 30, .14); -webkit-backdrop-filter: none; backdrop-filter: none; }
.bw .foot .chip.backchip { background: rgba(40, 28, 10, .3); }
/* a list is for reading: the glass behind it is a shade darker */
.bw.picking { background: linear-gradient(rgba(16, 56, 130, .34), rgba(6, 22, 66, .48)); }
.bw .btn.skill { background: rgba(140, 220, 255, .06); border-color: rgba(150, 224, 255, .34); }
.cheat { background: rgba(4, 14, 40, .3); border-color: rgba(150, 224, 255, .34); border-radius: 4px; }
.cheat.on { background: rgba(240, 201, 106, .16); }

.btn.choice { background: linear-gradient(rgba(30, 96, 200, .17), rgba(10, 40, 110, .3)); -webkit-backdrop-filter: var(--dim-behind); backdrop-filter: var(--dim-behind); }
.btn.choice.gold, .btn.choice.glowb { text-shadow: none; }
#talk { background: rgba(8, 12, 28, .38); -webkit-backdrop-filter: blur(5px) brightness(.62); backdrop-filter: blur(5px) brightness(.62); }
#talk p { text-shadow: 0 1px 2px rgba(0, 0, 0, .9); }
.sys { background: rgba(24, 80, 170, .34); -webkit-backdrop-filter: blur(5px) brightness(.62); backdrop-filter: blur(5px) brightness(.62); }
.syswin { background: linear-gradient(rgba(20, 70, 160, .26), rgba(6, 24, 72, .44)); -webkit-backdrop-filter: blur(7px) brightness(.56) saturate(1.1); backdrop-filter: blur(7px) brightness(.56) saturate(1.1); }
.syswin .pchip { background: rgba(3, 10, 30, .2); }
/* (the dim layer under a sheet must not filter, or the sheet's own glass would have nothing behind it to blur) */
.sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* a sheet lies over other windows: what is under it is words, so it is blurred right out */
.sheet-in { background: rgba(12, 38, 98, .6); -webkit-backdrop-filter: blur(18px) brightness(.5); backdrop-filter: blur(18px) brightness(.5); }
/* No see-through support: fall back to the darker fill so nothing becomes unreadable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .window, .btn.choice { background: linear-gradient(rgba(10, 28, 64, .78), rgba(6, 14, 36, .86)); }
  #talk { background: rgba(8, 12, 28, .82); } .sys { background: rgba(18, 48, 96, .93); }
  .syswin { background: linear-gradient(rgba(7, 22, 54, .9), rgba(3, 10, 30, .94)); } .sheet-in { background: rgba(12, 22, 50, .94); }
}

/* World records: a row that stays on top and jumps to each book */
.sjump { position: sticky; top: -12px; z-index: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: -12px -14px 0; padding: 6px 10px; background: #0c2452; border-bottom: 1px solid var(--c2); }
.sjump button { min-height: 40px; padding: 0 2px; background: rgba(99, 205, 255, .08); border: 1px solid var(--c2); border-radius: 2px; color: #cfeeff; cursor: pointer; font: 800 10.5px/1 Nunito, sans-serif; letter-spacing: .8px; text-transform: uppercase; }
.sjump button:active { background: var(--c2); }

/* what a command costs or gives, under its name */
.cmdb b small { display: block; margin-top: 3px; font: 800 9.5px/1 Nunito, sans-serif; letter-spacing: .5px; text-transform: none; opacity: .85; }
.cmdb.main b small { font-family: Nunito, sans-serif; color: #4a3508; }
.cmdb.sig .cost { font: 800 10px/1 Nunito, sans-serif; color: #9fe4ff; letter-spacing: .5px; }
.cmdb.sig.ready .cost { color: var(--gold); }

/* a horde: copies of the creature standing around the one in front */
.actor .clone { position: absolute; pointer-events: none; object-fit: contain; transform: var(--flip, none);
  animation: pourin .5s ease-out both, bob 2.8s ease-in-out infinite alternate; }
@keyframes pourin { from { opacity: 0; translate: 70px 18px; } }
/* thrown off its feet: a white flash, then up, away and spinning */
.actor .clone.fell { animation: thrown .6s cubic-bezier(.2, .7, .4, 1) forwards; }
@keyframes thrown {
  0% { filter: brightness(3.2); opacity: 1; translate: 0 0; rotate: 0deg; }
  18% { filter: brightness(2.2); }
  100% { filter: brightness(1); opacity: 0; translate: var(--fx, 40px) var(--fy, -90px); rotate: var(--fr, 40deg); }
}
.actor.gone .clone { opacity: 0; }
.egauge .count { font: 900 30px/1 Nunito, sans-serif; color: #ffb3b3; text-shadow: 0 2px 3px #000, 0 0 8px rgba(255, 60, 60, .6); }
/* the running kill count: big, top right, like a 1-vs-1000 game */
.ko { position: absolute; right: 26px; top: 160px; z-index: 955; display: flex; align-items: baseline; gap: 6px; pointer-events: none; font-style: italic; }
.ko b { font: 900 64px/1 Nunito, sans-serif; color: #fff; text-shadow: 0 3px 0 #b3202c, 0 0 18px rgba(255, 60, 60, .7), 0 2px 6px #000; }
.ko small { font: 900 30px/1 var(--title); color: var(--gold); text-shadow: 0 2px 4px #000; }
.ko.bump b { animation: kobump .28s ease-out; }
@keyframes kobump { from { scale: 1.45; } }
.ko.final { right: 50%; translate: 50% 0; top: 25%; flex-direction: column; align-items: center; gap: 0; transition: top .25s ease-out; }
.ko.final b { font-size: 150px; }
.ko.final small { font-size: 46px; letter-spacing: 6px; }
.ko.final em { font: 800 26px/1 var(--title); font-style: normal; letter-spacing: 5px; text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px #000, 0 0 14px rgba(255, 90, 90, .6); margin-top: 8px; }
/* "HORDE: 40 Bog Toads": a slanted band across the field when a horde appears */
.hordein { position: absolute; left: -20px; right: -20px; top: 30%; z-index: 960; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 0 26px;
  background: linear-gradient(90deg, transparent, rgba(120, 10, 20, .82) 18%, rgba(120, 10, 20, .82) 82%, transparent); rotate: -4deg; pointer-events: none;
  border-block: 3px solid rgba(255, 200, 120, .8); animation: bandin .28s cubic-bezier(.2, .8, .3, 1.2); transition: opacity .3s, translate .3s; }
.hordein small { font: 800 26px/1 var(--title); letter-spacing: 14px; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 4px #000; }
.hordein b { font: 900 italic 58px/1 Nunito, sans-serif; color: #fff; text-shadow: 0 3px 0 #6b0c14, 0 0 18px rgba(255, 80, 80, .6); }
.hordein.out { opacity: 0; translate: -60px 0; }
@keyframes bandin { from { translate: 120% 0; } }
/* over a crowd, the horde's name and count sit on a dark plate so they read */
.horde .over { display: flex; flex-direction: column; align-items: center; }
.horde .over .ename, .horde .over .egauge { width: max-content; margin-inline: auto; left: auto; translate: none; padding: 2px 14px; background: rgba(10, 4, 8, .62); border-radius: 4px; }
.horde .over .ename { border-radius: 4px 4px 0 0; padding-top: 5px; }
.horde .over .egauge { margin-top: 0; border-radius: 0 0 4px 4px; padding-bottom: 4px; }
.ko { transition: opacity .2s; }
.ko.zero { opacity: 0; }
/* Status: a stat, its fight value and its + always fit the half-width column */
.sstat { gap: 6px; }
.sstat span { flex-basis: 34px; }
.sstat b { min-width: 0; }
.sstat em { padding: 3px 5px; font-size: 11px; }
.sstat .splus { width: 40px; height: 40px; }
.syswin .sgrid:has(.splus) { column-gap: 10px; }
.sstat:has(.splus) span { letter-spacing: .3px; font-size: 10px; }
/* the power picker: a darker plate behind each name so gold reads on a bright sky */
.cheat { background: rgba(4, 12, 34, .62); }
.cheat b { text-shadow: 0 1px 2px #000; }
/* with a + beside it, the fight value tucks under the number instead of crowding it */
.sstat:has(.splus) { display: grid; grid-template-columns: 44px minmax(0, 1fr) 40px; grid-template-rows: auto auto; column-gap: 6px; row-gap: 2px; align-items: center; }
.sstat:has(.splus) span { grid-area: 1 / 1 / 3 / 2; }
.sstat:has(.splus) b { grid-area: 1 / 2 / 3 / 3; }
.sstat:has(.splus):has(em) b { grid-area: 1 / 2; align-self: end; }
.sstat:has(.splus) em { grid-area: 2 / 2; justify-self: start; align-self: start; margin: 0; padding: 1px 5px; font-size: 10.5px; }
.sstat:has(.splus) .splus { grid-area: 1 / 3 / 3 / 4; margin: 0; }

/* ---------- System window polish (2026-10-15 review)
   Frame: the corner brackets sit exactly on the frame, not floating off it. */
.syswin { box-shadow: 0 0 26px rgba(70, 180, 255, .45), inset 0 0 50px rgba(70, 180, 255, .09); }
.syswin::before, .syswin::after { width: 18px; height: 18px; border-width: 2px; z-index: 3; }
.syswin::before { left: -2px; top: -2px; }
.syswin::after { right: -2px; bottom: -2px; }
/* a big number glows; its glow is never clipped into a box */
.sline.big b { overflow: visible; }
/* the page scrolls: the last line fades out at the edge instead of being sliced in half */
.sysbody { padding-bottom: 26px; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
/* every value on the Status page lines up on the right, like the lines above it */
.sstat:not(:has(.splus)) span { flex: 0 0 auto; margin-right: auto; }
.sstat:not(:has(.splus)) em { margin-left: 0; }

/* ---------- title screen polish (2026-10-15) */
/* wide screens: the sides are the scene itself, blurred and dark, not black bars */
body::before { content: ''; position: fixed; inset: -60px; z-index: -1; background: var(--scene, none) center / cover; filter: blur(34px) brightness(.32) saturate(1.2); }
#app { box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
/* the party dissolves into the dark band the menu sits on */
.titlefade { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; z-index: 900; pointer-events: none;
  background: linear-gradient(transparent, rgba(4, 8, 20, .55) 38%, rgba(4, 8, 20, .92) 72%, #04060f); }
.logo { z-index: 901; }
.logo small { font-size: 22px; letter-spacing: 12px; text-transform: uppercase; color: #f3e6c4; }
.logo b { background: linear-gradient(#fff4cf, #f0c96a 45%, #b9842a); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(0 2px 0 #4a2d08) drop-shadow(0 6px 14px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(240, 201, 106, .35)); }
.logo i { display: inline-block; padding: 6px 18px; font-size: 24px; background: rgba(4, 10, 26, .42); border-radius: 30px; text-shadow: 0 1px 3px #000; }
/* both choices in the same type, same height; the gold one is the obvious one */
[data-screen="title"] .btn.choice { min-height: 60px; font-family: var(--title); font-size: 19px; }
[data-screen="title"] .btn.choice:not(.gold) { background: rgba(10, 30, 70, .55); }
.link.chip2 { min-width: 120px; padding: 6px 16px; text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: .5px; color: #cfe2f5;
  background: rgba(10, 20, 44, .55); border: 1px solid rgba(150, 200, 240, .35); border-radius: 22px; }

/* ---------- System window, 2026-10-15 audit: Status / Skills / Item Box / Titles / Log */
/* rows you can tap look like rows, with a small › at the end */
.slink { width: 100%; background: none; border: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; }
.sline.slink { min-height: 40px; }
.srow.slink { padding: 8px 2px; border-bottom: 1px solid rgba(99, 205, 255, .16); }
.slink:active { background: rgba(99, 205, 255, .12); }
.sgo { margin-left: 6px; font-style: normal; color: var(--c); }
.sline.wrap b { white-space: normal; text-align: right; }
/* HP and MP: the points are the headline, Body and Mana the small print */
.svital { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; min-width: 0; }
.svital span { grid-row: 1 / 3; font: 800 13px/1 Nunito, sans-serif; letter-spacing: 1.5px; color: #7fd0ff; }
.svital b { font: 800 28px/1 Nunito, sans-serif; color: #fff; text-shadow: 0 0 12px var(--c); }
.svital small { grid-column: 2; font-size: 11.5px; line-height: 1.25; color: #a9c3d9; }
.svital .splus { grid-column: 3; grid-row: 1 / 3; }
.syswin .sstat span { letter-spacing: .6px; }
.spts { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 40px; font: 700 13px/1.3 Nunito, sans-serif; color: var(--gold); }
.sundo { min-width: 72px; min-height: 40px; background: none; border: 1px solid var(--c); border-radius: 2px; color: #fff; font: 800 12px/1 Nunito, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.srow.scheat { border: 1px solid rgba(240, 201, 106, .35); border-left: 3px solid var(--gold); padding: 10px; background: rgba(240, 201, 106, .06); }
.syswin .grade { white-space: nowrap; }
.srow.slink.on { background: rgba(99, 205, 255, .1); box-shadow: inset 3px 0 0 var(--c); }
.sshown { flex: none; font-style: normal; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c); }
.sfight { flex: none; font-style: normal; font-size: 11px; color: #8fa6bd; }
.suse { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 8px; }
.suse small { font-size: 10.5px; letter-spacing: 0; text-transform: none; color: #cfe6f7; font-weight: 700; }
.snote.sflav { margin-top: 0; font-style: italic; }
.slog { padding: 8px 2px; border-bottom: 1px solid rgba(99, 205, 255, .16); font: 600 14px/1.35 Nunito, sans-serif; color: #e6f5ff; }
.slog:first-child { color: #fff; text-shadow: 0 0 8px var(--c); }
.sact.danger { border-left-color: #ff6b6b; background: rgba(255, 80, 80, .08); }
.sact.danger b { color: #ffb3b3; }
/* in a fight the window is half height, so the foes stay in view above it */
.sheet.system.fight .syswin { height: min(48dvh, 440px); }

/* ---------- the Guild Card: the guild's paper, not System glass */
.sheet.gcard .sheet-in { height: min(86dvh, 760px); max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.gcard .ghead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 2px solid #b89c62; }
.gcard .ghead > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcard .gname { font: 800 24px/1.1 var(--title); color: #2a1a06; }
.gcard .grank { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border: 3px double #8a6a2c; border-radius: 50%; font: 900 34px/1 var(--title); color: #7a1d12; background: rgba(255, 255, 255, .35); }
.gcard .gline { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: #5a4210; }
.gcard .gline b { color: #2a1a06; text-align: right; }
.gcard .gline em { font-style: normal; font-weight: 700; color: #3f6d1f; }
.gcard .gtabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px; }
.gcard .gtabs button { min-height: 40px; padding: 0 2px; background: rgba(120, 90, 30, .1); border: 1px solid #b89c62; border-radius: 3px; color: #5a4210; font: 800 11px/1 Nunito, sans-serif; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; }
.gcard .gtabs button.on { background: #6a4e1c; border-color: #6a4e1c; color: #fbf3dc; }
.gcard .gbook { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.gcard .grow { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(138, 106, 44, .3); }
.gcard .grow > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gcard .grow b { font: 800 15px/1.2 Nunito, sans-serif; color: #2a1a06; }
.gcard .grow em { font-style: normal; font-size: 12px; color: #7a6238; }
.gcard .grow small { font-weight: 600; color: #4a3818; line-height: 1.4; }
.gcard .grow small.gweak { color: #7a1d12; font-weight: 800; }
.gcard .grow .face, .gcard .grow .mini { flex: none; border: 1px solid #b89c62; border-radius: 3px; }
.gcard .gmore { margin: 8px 0; font-size: 13px; font-style: italic; color: #7a6238; }
/* with no points to spend the + keeps its place but is not drawn */
.syswin .splus:disabled { visibility: hidden; }
.syswin .sstat:has(.splus) { grid-template-columns: 74px minmax(0, 1fr) 40px; } /* room for DEFENSE */
/* the top block gives Name and Class the room they need: never "Otherworl…" */
.syswin .sgrid.stop { grid-template-columns: 1.45fr 1fr; }
.syswin .sgrid.stop .sline b { overflow: visible; }

/* ---------- battle command row: named moves (2026-10-15)
   Every button is a move with a name, the way a Pokemon has four: the
   fighter's own free move (gold, leftmost), two MP moves picked for the
   moment, then the signature. Brace joins only when a heavy blow is coming.
   The row keeps its height; long names shrink to fit (`--fs`). */
.cmds.n1 { grid-template-columns: 1fr; }
.cmds.n2 { grid-template-columns: 1.2fr 1fr; }
.cmds.n3 { grid-template-columns: 1.25fr 1fr 1fr; }
.cmds.n4 { grid-template-columns: 1.2fr 1fr 1fr 1.1fr; }
.cmds.n5 { grid-template-columns: 1.1fr .85fr 1fr 1fr 1.05fr; }
.cmdb { position: relative; }
.cmdb { container-type: inline-size; }
.cmdb .nm { font-size: min(var(--fs, 12px), calc((100cqw - 8px) / (var(--n, 8) * .62))); }
.cmdb.main, .cmds.five .cmdb.main { flex-direction: column; gap: 5px; padding: 5px 3px; }
.cmdb.main b, .cmds.five .cmdb.main b { font: 700 15px/1.05 var(--title); letter-spacing: 0; text-transform: none; text-align: center; }
.cmdb.main > small { font: 800 10px/1 Nunito, sans-serif; letter-spacing: .3px; color: #4a3508; white-space: nowrap; }
.cmdb.move { gap: 4px; padding: 7px 4px 5px; border-left-width: 3px; }
.cmdb.move b { font: 800 12px/1.08 Nunito, sans-serif; letter-spacing: 0; text-transform: none; text-align: center; }
.cmdb.move > small { font: 700 9.5px/1.15 Nunito, sans-serif; color: #a9c3d9; text-align: center; }
.cmdb.move > small.cost { font-weight: 800; color: #9fe4ff; white-space: nowrap; }
.cmdb.move { gap: 2px; }
.cmdb.move.fire { border-left-color: #ff8a3c; } .cmdb.move.ice { border-left-color: #9fd8ff; } .cmdb.move.thunder { border-left-color: #ffe66b; }
.cmdb.move.wind { border-left-color: #8fe3c0; } .cmdb.move.earth { border-left-color: #d9a066; } .cmdb.move.light { border-left-color: #ffe9a6; }
.cmdb.move.dark { border-left-color: #c48bff; }
.cmdb.move.hot:not(:disabled) { border-top-color: var(--gold); border-right-color: var(--gold); border-bottom-color: var(--gold); box-shadow: inset 0 0 10px rgba(240, 201, 106, .2); }
.cmdb .tag { right: 3px; top: -7px; padding: 2px 5px; font-size: 9px; }
.cmds.n5 .cmdb.move > small, .cmds.n5 .cmdb.main > small { font-size: 8.5px; }
.cmds.n5 .cmdb.main b { font-size: 13px; }
/* Items lives with the switches, and only when you have something to use */
.bw .foot .chip.sw.items b { font-size: 12px; }
/* What the hero's power shows over an enemy (All-Seeing Eye, Deja Vu: its
   next move; Elsewhere, Unmake: which part comes off), on dark plates. */
.enext { display: block; width: max-content; max-width: 320px; margin: 5px auto 0; padding: 2px 10px; font: 800 15px/1.2 Nunito, sans-serif; color: #cfeeff;
  background: rgba(4, 14, 40, .72); border: 1px solid rgba(120, 214, 255, .5); border-radius: 3px; text-align: center; text-shadow: 0 1px 2px #000; }
.enext:empty { display: none; }
.eparts { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 7px; width: 420px; margin: 6px 0 0 50%; translate: -50% 0; }
.eparts:empty { display: none; }
.eparts small { flex-basis: 100%; text-align: center; font: 800 17px/1.1 Nunito, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #ffe6a6; text-shadow: 0 1px 3px #000; }
.epart { padding: 4px 12px; font: 800 21px/1.2 Nunito, sans-serif; color: #dfe9f2; background: rgba(4, 14, 40, .7); border: 1px solid rgba(150, 224, 255, .4); border-radius: 3px; }
.epart.on { color: #2a1a06; background: var(--gold); border-color: #fff0c2; box-shadow: 0 0 12px rgba(240, 201, 106, .7); }
/* Endless Host: the soldiers behind your party, shadows of what you beat */
.actor.hostline { pointer-events: none; transition: translate .25s ease-out; }
.hostline .soldier { position: absolute; object-fit: contain; filter: brightness(.18) saturate(0) drop-shadow(0 0 6px rgba(110, 160, 255, .75)); opacity: .9; animation: pourin .5s ease-out both; }
.hostline.charge { translate: 0 -26px; }
.hostcount { position: absolute; z-index: 5; display: flex; align-items: baseline; gap: 8px; pointer-events: none; padding: 3px 12px; background: rgba(4, 10, 30, .62); border: 1px solid rgba(120, 180, 255, .55); border-radius: 4px; }
.hostcount small { font: 800 18px/1 var(--title); letter-spacing: 2px; text-transform: uppercase; color: #9fc3ff; }
.hostcount em { font: 800 16px/1 Nunito, sans-serif; font-style: normal; color: #9fc3ff; }
.hostcount b { font: 900 30px/1 Nunito, sans-serif; color: #fff; text-shadow: 0 0 10px rgba(120, 170, 255, .9); }
/* Stop the Clock: while time stands still the world loses its colour */
.stage.stopped .bg, .stage.stopped .actor.enemy img { filter: grayscale(.85) brightness(.8) !important; }
/* Full Strength: the land behind them splits */
.stage.split::after { content: ''; position: absolute; inset: 0; z-index: 940; pointer-events: none;
  background: linear-gradient(104deg, transparent 49.2%, #fff 49.6%, #ffe9a6 50%, #fff 50.4%, transparent 50.8%); animation: splitin 1.4s ease-out forwards; }
@keyframes splitin { 0% { opacity: 0; clip-path: inset(0 0 100% 0); } 20% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: .55; } }
/* a road sign at the edge of the town map: the place is off the painting, this way */
.pin.road span { background: linear-gradient(#6b4a24, #4a3216); border-color: #c9a46a; border-radius: 2px; }
.pin.road i { display: none; }
/* pick a power: the chosen card keeps its line readable */
.cheat.on small { color: #f6e9c8; }
/* four party chips on a small phone: the face steps aside so the whole name fits, never "Sera…" */
@media (max-width: 400px) {
  .bw .chips.n4 .pchip { grid-template-columns: 1fr; }
  .bw .chips.n4 .pchip > .face, .bw .chips.n4 .pchip > .mini, .bw .chips.n4 .pchip > img { display: none; }
}
/* the Guild Card's five books fit a small phone */
.gcard .gtabs button { letter-spacing: 0; }
@media (max-width: 400px) { .gcard .gtabs button { font-size: 10px; } }

/* ---------- the opening (2026-10-15): the truck, the wish, the cards, the fall */
.whitehold { position: absolute; inset: 0; z-index: 980; pointer-events: none; background: #fff; opacity: 0; transition: opacity .35s ease-out; }
.whitehold.on { opacity: 1; transition-duration: .08s; }
.wishes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wishes .btn.wish { min-height: 64px; background: rgba(18, 26, 58, .82); border: 1px solid rgba(240, 201, 106, .6); }
.wishes .btn.wish .lbl { font-size: 17px; }
.wishes .again { grid-column: 1 / -1; justify-self: center; }
button.link.chip2.again { min-height: 44px; cursor: pointer; margin: 2px auto 0; display: block; }
/* the few cards that answered: big, two across */
.cheats.few { grid-template-columns: 1fr 1fr; max-height: none; overflow: visible; }
.cheats.few .cheat { min-height: 76px; padding: 10px; }
.cheats.few .cheat b { font-size: 18px; }
/* the fall: the sky streams upward past you */
.stage.falling .world { animation: fallsky 3.4s cubic-bezier(.3, 0, .7, 1) forwards; filter: blur(1.5px) brightness(1.1); }
@keyframes fallsky { from { transform: translateY(-14%) scale(1.25); } to { transform: translateY(10%) scale(1.05); } }
.fallcap { text-align: center; font: 600 17px/1.4 Nunito, sans-serif; color: #fff; text-shadow: 0 2px 8px #000; background: none; border: 0; box-shadow: none; }
/* the first Status Open */
.btn.status-open { min-height: 64px; font-size: 22px; letter-spacing: 3px; }
.firststatus .syslines { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.firststatus .sys.static { animation: syslinein .3s ease-out; }
@keyframes syslinein { from { opacity: 0; translate: 0 8px; } }
/* review fixes (2026-10-15) */
.cardhint { margin: 4px 0 2px; text-align: center; font: 700 15px/1.3 Nunito, sans-serif; color: #f3e6c4; }
/* while the HORDE banner plays, the crowd's own name plate waits */
.stage:has(.hordein) .horde .over { opacity: 0; }
/* the Guild Card's book fades at its foot instead of cutting a line in half */
.gcard .gbook { padding-bottom: 22px; -webkit-mask-image: linear-gradient(#000 calc(100% - 26px), transparent); mask-image: linear-gradient(#000 calc(100% - 26px), transparent); }
/* the fall: a light blur, the painting still reads */
.stage.falling .world { filter: blur(.6px) brightness(1.1); }
/* Status on a small phone: numbers get their own room, the small print goes */
@media (max-width: 400px) {
  .syswin .svital small { display: none; }
  .syswin .sstat:has(.splus) { grid-template-columns: 62px minmax(0, 1fr) 40px; }
  .syswin .sstat span { font-size: 9.5px; letter-spacing: 0; }
  .syswin .sstat b, .syswin .svital b { font-size: 17px; }
}
/* Hero's Day: the city lit up gold for a few days after the war */
.stage[data-light="festival"] .world::after { opacity: 1; background: radial-gradient(ellipse at 50% 35%, rgba(255, 214, 120, .5), rgba(255, 140, 80, .34) 65%, rgba(170, 60, 110, .36)); mix-blend-mode: soft-light; }
/* a road sign can glow too when the next destination is outside town */
.pin.road.glow span { background: linear-gradient(#f7d98a, #c9962f); border-color: #fff0c2; color: #2a1a06; box-shadow: 0 0 16px rgba(240, 201, 106, .55); }
/* the Guild Ledger on the Guild Card */
.gcard .gledger { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; padding: 7px 10px; background: rgba(120, 90, 30, .08); border: 1px dashed #b89c62; border-radius: 3px; }
.gcard .lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.gcard .lhead b { font: 800 14px/1.2 var(--title); color: #2a1a06; letter-spacing: .5px; }
.gcard .lhead small { font-size: 12px; }
.gcard .lline { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.3; color: #3a2a14; }
.gcard .lline span { flex: 1; min-width: 0; }
.gcard .lline b { flex: none; color: #2a1a06; }
.gcard .lline i { flex: none; width: 13px; height: 13px; border: 1.5px solid #8a6a2c; border-radius: 2px; }
.gcard .lline.done { color: #7a6238; }
.gcard .lline.done span { text-decoration: line-through; }
.gcard .lline.done b { color: #3f6d1f; }
.gcard .lline.done i { background: #3f6d1f; border-color: #3f6d1f; box-shadow: inset 0 0 0 2px #f5ead0; }
/* Hero's Day: a gold banner over the plaza, below every sign */
.banner.fest { top: 75%; padding: 10px 28px; font: 800 30px/1.2 var(--title); color: #2a1a06; letter-spacing: 1px;
  background: linear-gradient(#f7d98a, #c9962f); border: 2px solid #fff0c2; border-radius: 6px; box-shadow: 0 0 30px rgba(240, 201, 106, .7); }
/* the Guild Card on a small phone: "clients pay +100%" wraps as one piece; tabs are full tap size */
.gcard .gline em { white-space: nowrap; }
.gcard .gtabs button { min-height: 44px; }
@media (max-width: 400px) { .gcard .gline em { display: block; } }
/* the Guild Card's "Your way" line is a button: tap to change how you live */
.gcard .gway { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; background: rgba(120, 90, 30, .08); border: 1px dashed #b89c62; border-radius: 3px; padding: 0 10px; cursor: pointer; font: inherit; }
/* ---------- the Item Box: its own button beside Status, its own window */
#hud .hudright { margin-left: auto; display: flex; gap: 8px; }
#hud .sysbtn { margin-left: 0; }
.boxbtn { position: relative; display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 6px 12px; cursor: pointer; background: rgba(10, 24, 56, .55); border: 1px solid rgba(240, 201, 106, .7); border-radius: 4px;
  font: 800 13px/1 var(--title); letter-spacing: 1.5px; text-transform: uppercase; color: #fff3d6; backdrop-filter: blur(6px); }
.boxbtn i { width: 11px; height: 9px; border: 2px solid #f0c96a; border-radius: 2px; box-shadow: 0 0 8px rgba(240, 201, 106, .8); }
/* one page, no tabs: the window is shorter and its corners are gold */
.sheet.system.box .syswin { grid-template-rows: auto minmax(0, 1fr); height: min(60dvh, 520px); }
.sheet.system.box .syswin::before, .sheet.system.box .syswin::after { border-color: var(--gold); }
.sysopt.blank { visibility: hidden; }

/* item icons (game-icons.net) */
.gl.potion { --g: url(../assets/ui/icons/potion.svg); } .gl.ether { --g: url(../assets/ui/icons/ether.svg); }
.gl.elixir { --g: url(../assets/ui/icons/elixir.svg); } .gl.feather { --g: url(../assets/ui/icons/feather.svg); }
.gl.cargo { --g: url(../assets/ui/icons/cargo.svg); } .gl.purse { --g: url(../assets/ui/icons/purse.svg); }
/* Item Box as a list (owner's choice): a picture at the start of each row */
.ipic { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 4px; background: radial-gradient(circle at 50% 40%, rgba(99, 205, 255, .18), rgba(3, 10, 30, .55) 72%); border: 1px solid rgba(99, 205, 255, .35); }
.ipic .gl { width: 24px; height: 24px; }
.ipic .mini { width: 38px; height: 38px; border: 0; }
.it-potion .gl { color: #ff7a8a; } .it-ether .gl { color: #7cc6ff; } .it-elixir .gl { color: #ffd166; } .it-feather .gl { color: #ff9a4a; } .ipic.cargo .gl { color: #e9c98a; }
.btn.irow { display: flex; align-items: center; gap: 10px; }
.boxtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.boxtop small { font-style: italic; color: #a9c3d9; }

/* ---------- Battle text: one system (2026-10-15).
   As in Octopath, Trails, Persona and Granblue: the display face (Cinzel)
   is the world speaking — move names, enemy names, damage numbers, the big
   result words — outlined over the scene and leaning forward when it pops.
   The text face (Nunito) is the System speaking — effects, costs, HP and the
   small stamps (WEAK, CRITICAL, OPEN) on coloured plates. One colour, one
   meaning: white a hit, gold your power, yellow "strike now", red danger,
   green healing, blue MP. */
.pop { font: 900 54px/1 var(--title); letter-spacing: .01em; -webkit-text-stroke: 5px #1a0f05; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(0, 0, 0, .55); }
.pop.crit { font-size: 74px; color: var(--gold); }
.pop.spill { font-size: 60px; }
.pop.heal { color: #7dffa6; }
.pop.ouch { color: #ff9b9b; }
.pop.mp, .pop.poison { font-size: 34px; }
.pop.tag { font: 900 22px/1 Nunito, sans-serif; letter-spacing: .14em; font-style: normal; color: #2a1a06; background: linear-gradient(#ffe08a, #f0b43c);
  padding: 5px 12px 4px; border-radius: 4px; -webkit-text-stroke: 0; text-shadow: none; box-shadow: 0 3px 8px rgba(0, 0, 0, .6); }
@keyframes rise { 0% { opacity: 0; transform: translateY(16px) scale(.5) skewX(-8deg); } 13% { opacity: 1; transform: translateY(-6px) scale(1.22) skewX(-8deg); }
  26% { transform: translateY(-12px) scale(1) skewX(-8deg); } 62% { opacity: 1; transform: translateY(-20px) skewX(-8deg); } 100% { opacity: 0; transform: translateY(-46px) skewX(-8deg); } }
.pop.tag { animation-name: stamp; }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.6); } 14% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(-20px); } }

/* enemy plate: level in the System's voice, the name in the world's */
.ename { font: 700 25px/1.1 var(--title); color: #fff; -webkit-text-stroke: 4px #12090380; paint-order: stroke fill; text-shadow: 0 2px 4px #000; }
.ename small { font: 800 16px/1 Nunito, sans-serif; color: #f0d690; letter-spacing: .04em; -webkit-text-stroke: 3px #120903aa; margin-left: 4px; }
.estate { font: 900 15px/1 Nunito, sans-serif; letter-spacing: .14em; }
.estate.open { padding: 4px 12px 3px; color: #2a1a06; background: linear-gradient(#ffe08a, #f0b43c); border: 0; border-radius: 4px; box-shadow: 0 0 14px rgba(255, 200, 80, .65); }
.estate.wind { padding: 4px 12px 3px; color: #fff; background: linear-gradient(#e0434f, #a81f2b); border-radius: 4px; box-shadow: 0 0 14px rgba(255, 70, 70, .65); }

/* the big counts: same face as the numbers they total */
.ko b, .ko.final b { font-family: var(--title); font-weight: 900; -webkit-text-stroke: 4px #1a0f05; paint-order: stroke fill; }
.hordein b { font-family: var(--title); font-style: normal; font-weight: 900; transform: skewX(-8deg); -webkit-text-stroke: 4px #1a0f05; paint-order: stroke fill; }

/* command row: every move named in the same face; effect and cost in the System's */
.cmdb.move b { font: 700 15px/1.05 var(--title); letter-spacing: 0; }
.cmds.n5 .cmdb.move b { font-size: 13px; }
/* the Voice of the World names the moment, then speaks */
#toasts .sys .vow { font-weight: 900; color: var(--gold); letter-spacing: .02em; }
/* corner plates on a move: yellow only means "strike now" */
.cmdb .tag.t-allfoes { background: linear-gradient(#cfe3ff, #8fb2e0); color: #0d1a2e; }
.cmdb .tag.t-kills, .cmdb .tag.t-breaks { background: linear-gradient(#ff8a8a, #c8323f); color: #fff; }
.cmdb .tag.t-revive { background: linear-gradient(#b9ffcf, #5fd18a); color: #0c2416; }
.cmdb .tag { font-size: 10.5px; }
/* a horde's count, in the same face as every other number */
.egauge .count { font: 900 30px/1 var(--title); color: #fff; -webkit-text-stroke: 4px #6b0c14; paint-order: stroke fill; text-shadow: 0 2px 4px #000; }
/* HP and MP numbers stay readable on any bar */
.bar span { -webkit-text-stroke: 2.5px rgba(0, 0, 0, .55); paint-order: stroke fill; }

/* ---------- Effects in the painting's colours (2026-10-15). The manga ink
   look (black-and-white rays, a grey flash) fought the painted art; the
   same beats now glow in the move's own colour (--c). */
.pnl.hit > div { background:
  radial-gradient(circle at 50% 55%, rgba(255, 250, 235, .95) 0 9%, color-mix(in srgb, var(--c, #f0c96a) 80%, transparent) 22%, transparent 58%),
  repeating-conic-gradient(from 0deg at 50% 55%, color-mix(in srgb, var(--c, #f0c96a) 42%, transparent) 0 2.4deg, transparent 2.4deg 8deg),
  radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c, #f0c96a) 35%, #120c22), #07070f 75%); }
.pnl { background: linear-gradient(90deg, #f0c96a, #fff3c4, #f0c96a); } /* a thin gold frame, not paper white */
@keyframes hitshake { 0% { translate: 0 0; filter: brightness(2.2); } 25% { translate: 16px -6px; } 50% { translate: -14px 5px; filter: none; } 75% { translate: 8px -2px; } }
.stage.impact .world { filter: brightness(1.55) saturate(1.25) contrast(1.05); }
.lines { background: repeating-conic-gradient(from 0deg at var(--x) var(--y), transparent 0 4deg, rgba(255, 228, 160, .55) 4deg 4.8deg); }
/* A popped stamp is not a move button's corner tag: the shared `.tag` rule pinned it to the
   right edge too, so KILLING BLOW stretched across the field and shrank to a thin gold bar. */
.pop.tag { right: auto; }

/* Drawn effects (Pipoya): a strip of frames stepped through once. They glow
   over the painting rather than sitting on it like stickers. */
.vfx { position: absolute; z-index: 900; translate: -50% -50%; pointer-events: none; background-repeat: no-repeat;
  background-size: calc(var(--n) * 100%) 100%; mix-blend-mode: screen; animation: vfx var(--t) steps(var(--n)) forwards; }
@keyframes vfx { to { background-position-x: calc(var(--n) * var(--w) * -1px); } }
/* the drawn effects carry their own transparency: a plain blend keeps the monster solid under them */
.vfx { mix-blend-mode: normal; }
/* the cut-in's name band and backdrop in the System's deep blue, not ink black */
.pnl.card > div { background: linear-gradient(100deg, #0b1a3c, #13285a 55%, #0b1a3c); }
.pnl.hit > div { background:
  radial-gradient(circle at 50% 55%, rgba(255, 250, 235, .95) 0 9%, color-mix(in srgb, var(--c, #f0c96a) 80%, transparent) 22%, transparent 58%),
  repeating-conic-gradient(from 0deg at 50% 55%, color-mix(in srgb, var(--c, #f0c96a) 42%, transparent) 0 2.4deg, transparent 2.4deg 8deg),
  radial-gradient(circle at 50% 55%, color-mix(in srgb, var(--c, #f0c96a) 40%, #1a3170), #0b1a3c 78%); }

/* Title key art (2026-10-16): built from the game's own art so the hero is
   the star — big, in front, in his action pose — with the Demon Lord looming. */
.titleart { position: absolute; inset: 0; z-index: 899; pointer-events: none; overflow: hidden; }
.titleart img { position: absolute; }
/* 2026-10-16: the key art is one painting (bg/keyart: the dragon over the
   capital, the wall-top in front); the hero stands on that wall-top, full
   length, with the city and the dragon over his shoulder. */
.tglow { position: absolute; left: 50%; bottom: 8%; width: 90%; height: 60%; translate: -54% 0;
  background: radial-gradient(closest-side, rgba(255, 222, 140, .62), rgba(255, 190, 90, .22) 55%, transparent); }
.thero { left: 50%; bottom: 6%; height: 64%; translate: -56% 0; filter: drop-shadow(0 0 22px rgba(255, 214, 120, .55)); }
/* the dragon's head fills the top of the painting: the name stands low,
   on the dark wall-top just over the menu, clear of both faces */
.logo { top: auto; bottom: calc(var(--ui, 300px) + 18px); }
/* the title's buttons line up on the centre, like the logo above them */
.titlemenu .btn.choice { justify-content: center; text-align: center; }
.titlemenu .btn.choice .lbl { align-items: center; }

/* The hero's aura (2026-10-16). He always looks the same; the light around him
   is the colour of the power he carries (CHEATS[id].color), so you can tell
   at a glance which one it is. Soft, not neon, and it breathes slowly. Any
   frame of the breath looks right, because screenshots stop it mid-way. */
.titleart { --aura: #ffd678; }
.tglow { background: radial-gradient(closest-side, color-mix(in srgb, var(--aura) 55%, transparent), color-mix(in srgb, var(--aura) 20%, transparent) 55%, transparent); }
/* In a fight: his own shape in that colour, blurred, behind him. A layer of
   its own, so a hit's white flash and a guard's blue still land on the
   picture and the aura stays around it. */
.aura { position: absolute; inset: 0; pointer-events: none; filter: blur(7px); opacity: .62;
  animation: aurabreath 4.2s ease-in-out infinite alternate; }
.aura::before { content: ''; position: absolute; inset: -2.5% -5% -1% -5%; background: var(--aura);
  -webkit-mask: var(--src) center / 100% 100% no-repeat; mask: var(--src) center / 100% 100% no-repeat; }
.aura ~ img { position: relative; }
@keyframes aurabreath { from { opacity: .48; } to { opacity: .8; } }
.actor.down .aura, .actor.gone .aura { opacity: 0; animation: none; }
/* The title, the moment the Status opens, his cut-in page: the picture
   itself takes a layered glow. */
.thero, .bust.glow, .pnl img.glow {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--aura) 75%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--aura) 50%, transparent)); }
.thero { animation: auraglow 4.2s ease-in-out infinite alternate; }
.bust.glow { animation: bustin .25s ease-out, auraglow 4.2s ease-in-out infinite alternate; }
@keyframes auraglow {
  from { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--aura) 65%, transparent)) drop-shadow(0 0 18px color-mix(in srgb, var(--aura) 40%, transparent)); }
  to { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--aura) 85%, transparent)) drop-shadow(0 0 30px color-mix(in srgb, var(--aura) 60%, transparent)); } }
/* the mark beside a power's name in the Status window: the same colour */
.pmark { display: inline-block; width: 9px; height: 9px; margin: 0 7px 2px 3px; vertical-align: middle; rotate: 45deg; border-radius: 2px;
  background: var(--c); box-shadow: 0 0 8px var(--c), 0 0 2px #fff; }
@media (prefers-reduced-motion: reduce) {
  .aura, .thero { animation: none; }
  /* fighters stand still; an enemy keeps its lean toward your party */
  .body, .body.float, .actor.enemy:not(.down):not(.hurt) .body, .actor.enemy:not(.down):not(.hurt) .body.float, .actor .clone:not(.fell) { animation: none; }
  .actor.enemy:not(.down) .body { transform: skewX(2deg); }
  .bust.glow { animation: bustin .25s ease-out; }
}

/* ---------- Polish pass (2026-10-16, v88) ---------- */
/* A talking portrait never shows a hard cut: it stands clear of the screen's
   left edge, a side its painting was cropped at fades out, and its lower body
   fades before the speech window instead of smudging through the glass. */
.bust { left: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(to top, transparent 78px, #000 118px);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(to top, transparent 78px, #000 118px);
  mask-composite: intersect; }
.bust[data-framing="dialogue"] { top: var(--portrait-top, 16%); bottom: auto;
  height: var(--portrait-height, 1200px); max-height: none; }
.bust[data-placement="center"] { left: 50%; translate: -50% 0; }
@media (max-height: 700px) {
  .bust[data-framing="dialogue"] { top: var(--portrait-compact-top, var(--portrait-top, 16%));
    height: var(--portrait-compact-height, var(--portrait-height, 1200px)); }
}
.bust[data-mask="none"] {
  /* Her transparent sprite already has clean edges; fading it exposes the scenery through her body. */
  -webkit-mask-image: none;
  mask-image: none; }
.bust[data-mask="bottom"] { /* Preserve hands at the sides of a transparent portrait. */
  -webkit-mask-image: linear-gradient(to top, transparent 78px, #000 118px);
  mask-image: linear-gradient(to top, transparent 78px, #000 118px); }
/* Enemies stand on the floor: a soft dark pool under their feet, so a boss in
   a dark hall does not float. */
.actor.enemy .shadow { top: -24px; height: 50px; background: radial-gradient(closest-side, rgba(0, 0, 0, .9), rgba(0, 0, 0, .55) 50%, transparent); }
/* A boss's health: one slim gold-framed bar, cut into its parts; a part that
   has come off goes dark. Anything with many points gets the same bar. */
.ebar { display: flex; gap: 3px; width: 230px; height: 16px; margin: 4px auto 0; padding: 2px; background: rgba(10, 4, 8, .82);
  border: 1.5px solid #e7c26a; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .7); }
.ebar.boss { width: 330px; height: 18px; }
.ebar span { flex: 1; position: relative; background: #3a1016; border-radius: 1px; overflow: hidden; }
.ebar span i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ff8f8f, #d8303c 55%, #9c1824); transition: width .25s ease-out; }
.ebar span.lost { background: #120709; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
/* Title: the hero stands whole, boots on the top of the name, so nothing
   runs behind the letters; the name keeps a soft dark backing of its own. */
.thero { bottom: calc(var(--ui, 300px) + 258px); height: min(52%, calc(93% - var(--ui, 300px) - 258px)); }
.tglow { bottom: calc(var(--ui, 300px) + 150px); height: 56%; }
.logo { padding: 30px 0 4px; background: radial-gradient(ellipse 62% 58% at 50% 56%, rgba(4, 6, 14, .72), rgba(4, 6, 14, .4) 60%, transparent); }

/* A temporary, quiet title while the cast and protagonist are redesigned. */
.logo.simple-logo { top: 30%; bottom: auto; padding: 24px; background: rgba(4, 10, 26, .6); }
.simple-logo small { font-size: 18px; letter-spacing: 5px; }
.simple-logo b { font-size: 88px; line-height: 1.15; }
.simple-logo i { margin-top: 16px; background: none; font-size: 23px; }
/* Prologue: the last walk home. The whole screen is the tap target. */
.prologue-intro, .prologue-end { position: absolute; inset: 0; z-index: 901; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: 40px 48px 120px; text-align: center; color: #fff; border: 0; font: inherit; }
.prologue-intro { background: linear-gradient(rgba(4, 8, 18, .2), rgba(4, 8, 18, .72)); text-shadow: 0 2px 10px #000; cursor: pointer; pointer-events: auto; animation: prologue-in .5s ease-out; }
.prologue-intro small { font: 600 24px/1.4 Nunito, sans-serif; letter-spacing: .08em; opacity: .8; }
.prologue-intro p { margin: 0; font: 600 46px/1.25 var(--title); }
.pings { display: grid; gap: 12px; width: min(100%, 520px); margin-top: 18px; }
.ping { display: grid; gap: 2px; padding: 14px 20px; text-align: left; border-radius: 22px; text-shadow: none;
  background: rgba(240, 242, 248, .9); color: #1d222c; box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0; animation: ping-in .35s ease-out forwards; }
.ping b { font: 800 19px/1.2 Nunito, sans-serif; color: #59606e; }
.ping span { font: 600 24px/1.3 Nunito, sans-serif; }
.tap-on { position: absolute; bottom: 64px; font: 600 20px Nunito, sans-serif; opacity: .65; animation: tap-on 1.6s ease-in-out infinite alternate; }
/* The horn: headlights flood white, then everything goes dark. */
.prologue-end { background: #05070d; animation: headlights 1.4s ease-in forwards; }
/* The white space between lives, the classic place to meet a goddess. */
.stage[data-light="void"] .world::after { opacity: 1; transition: none;
  background: radial-gradient(ellipse at 50% 42%, #fff 0 30%, #fbf8ef 58%, #e9e4d6 100%); }
/* Opening your eyes: an eye-shaped gap parts, blinks once, then opens on the scene. */
.eyelids { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.eyelids i { position: absolute; left: 50%; top: 27%; width: 130%; height: 0; translate: -50% -50%; border-radius: 50%;
  box-shadow: 0 0 0 200vmax #07070a, inset 0 0 60px 30px #07070a; }
.eyelids.open i { animation: eye-open 3s ease-in-out forwards; }
.stage:has(.eyelids.open) :is(.world, .front) { animation: waking 3s ease-out both; }
@keyframes eye-open { 0% { height: 0; } 22% { height: 22%; } 34% { height: 3%; } 100% { height: 260%; } }
@keyframes prologue-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ping-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes tap-on { to { opacity: .3; } }
@keyframes headlights { 0% { background: rgba(255, 250, 225, 0); } 25% { background: #fffbe6; } 55% { background: #fffbe6; } 100% { background: #000; } }
@keyframes waking { from { filter: blur(14px) brightness(1.9); } to { filter: none; } }
/* Her spell: a ring of light opens under you, rises, and everything goes white. */
.transfer { position: absolute; inset: 0; z-index: 902; pointer-events: none; overflow: hidden; }
.transfer-circle { position: absolute; left: 50%; bottom: -4%; width: 900px; aspect-ratio: 1; translate: -50% 0;
  border-radius: 50%; transform: rotateX(68deg) scale(.2); opacity: 0;
  background: radial-gradient(circle, transparent 38%, rgba(255, 230, 150, .9) 39% 40.5%, transparent 41.5% 52%, rgba(255, 240, 190, .8) 53% 54%, transparent 55%),
    repeating-conic-gradient(rgba(255, 225, 140, .55) 0 2deg, transparent 2deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 66%, transparent 69%); mask: radial-gradient(circle, #000 66%, transparent 69%);
  filter: drop-shadow(0 0 18px rgba(255, 214, 120, .9)); animation: transfer-ring 2.6s ease-out forwards; }
.transfer-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 80%, #fffdf2, #fff6dc 60%, #fff);
  opacity: 0; animation: transfer-flash 2.6s ease-in forwards; }
.from-white { position: absolute; inset: 0; z-index: 902; background: #fff; pointer-events: none; animation: from-white 1.6s ease-out forwards; }
@keyframes from-white { 0%, 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes transfer-ring { 0% { opacity: 0; transform: rotateX(68deg) scale(.2) rotate(0); } 25% { opacity: 1; } 100% { opacity: 1; transform: rotateX(68deg) scale(1.15) rotate(120deg); } }
@keyframes transfer-flash { 0%, 45% { opacity: 0; } 85%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .eyelids.open { display: none; } .prologue-intro, .ping, .prologue-end, .tap-on, .stage:has(.eyelids.open) :is(.world, .front), .transfer-circle, .transfer-flash { animation: none; opacity: 1; } .from-white { display: none; } }
.opening-action { text-align: center; justify-content: center; }
.registration .name { margin-bottom: 14px; }
.registration { display: flex; flex-direction: column; gap: 10px; }
#panel:has(> .registration) { max-height: none; overflow: visible; border-radius: 0; }
/* The registration contract: clauses in book print, then your name in ink on
   the signature line beside the guild's red seal. Focusing the line leans the
   paper in (zoom toward the signature). */
.registration .contract { transition: scale .3s ease, translate .3s ease; transform-origin: 50% 100%; }
.registration.signing .contract { scale: 1.05; }
.contract p, .contract li { font-size: 16px; }
.contract ol { margin: 4px 0 10px; }
.contract .agree { font-style: italic; text-align: center; }
.contract .sign { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; }
.registration .name { width: 58%; display: flex; flex-direction: column; align-items: stretch; gap: 2px; color: #514027; }
.registration .name small { text-align: center; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #7a6040; }
.registration input { width: 100%; min-width: 0; padding: 0 4px 2px; text-align: center; border: 0; border-bottom: 1.5px solid #6b4a2280; border-radius: 0; background: none; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none; font: 40px/1.2 var(--hand); color: #1f2340; caret-color: #1f2340; }
.registration input:-webkit-autofill { -webkit-text-fill-color: #1f2340; box-shadow: 0 0 0 40px transparent inset; transition: background-color 9999s; } /* no autofill tint */
.registration input::placeholder { color: #7a5c3a66; }
.contract .seal { position: static; translate: none; flex: none; display: grid; place-items: center; width: 50px; height: 50px; padding: 9px; margin-bottom: 4px; border: 0; border-radius: 48% 52% 50% 46%; rotate: -12deg; color: #6e121a;
  background: radial-gradient(circle at 35% 30%, #c94a52, #8e1d26 70%); box-shadow: inset 0 0 0 4px #a22a33, inset 0 0 0 6px #7a1820, 0 2px 3px #0006; }
.contract .seal svg { width: 100%; height: 100%; }
.guild-paper { font-family: var(--paper); width: 100%; padding: 22px; color: #382b1b; background: linear-gradient(125deg, #fff7e2, #e8d5aa); border: 1px solid #af8a50; border-radius: 3px; box-shadow: 0 8px 28px #0007; }
.guild-paper .paper-heading { display: block; text-align: center; text-transform: uppercase; letter-spacing: .09em; font-size: 12px; color: #766044; }
.guild-paper h2 { margin: 8px 0 16px; text-align: center; color: #392a18; font: 700 26px/1.2 var(--title); }
.guild-paper h3 { margin: 16px 0 5px; color: #61491f; font-size: 17px; }
.guild-paper p, .guild-paper li { font-size: 18px; line-height: 1.45; }
.guild-paper p { margin: 8px 0 14px; }
.guild-paper ol { padding-left: 22px; }
.guild-paper li + li { margin-top: 8px; }
.guild-paper > .btn { width: 100%; min-height: 54px; margin-top: 12px; justify-content: center; }
.guild-document .guild-paper { max-width: 460px; max-height: 100%; overflow-y: auto; }
.guild-paper .rank-ladder { font-weight: 800; text-align: center; letter-spacing: .04em; }
.card-name { display: block; text-align: center; font: 700 30px var(--title); overflow-wrap: anywhere; }
.card-rank { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 18px 0; }
.card-rank b { font: 700 64px/1 var(--title); }
.guild-document .guild-paper > small:last-of-type { display: block; text-align: center; color: #766044; }
/* A locked place on a map: still a dark plate you can read, just greyed and dashed. */
.pin.locked { filter: none; opacity: 1; }
.pin.locked span { background: rgba(16, 16, 20, .88); border: 1.5px dashed rgba(200, 200, 210, .7); color: #d8d6d0; }
.pin.locked small { color: #f0c96a; }
.pin.locked i { background: #9a9aa4; }
/* The request board: the notice under the window's edge fades, not cut. */
/* A named monster (the hunt's Matriarch, "Grandfather", the nest lord, what
   the investigation found): the climax of its request, so its name sits on a
   red plate and a faint red glow rings the picture. (quests.js: `named`) */
.actor.named .ename { width: max-content; padding: 4px 14px 5px; border-radius: 4px; -webkit-text-stroke: 0;
  background: linear-gradient(#a3141c, #6a0a10); box-shadow: 0 0 0 1px #f0c06a, 0 2px 10px #000a; text-shadow: 0 1px 2px #000; }
.actor.named .ename small { -webkit-text-stroke: 0; color: #ffd98a; }
.actor.named:not(.down) .body img { filter: drop-shadow(0 0 10px #ff3b3baa) drop-shadow(0 0 2px #ff6a6a); }
/* story set pieces (2026-10-16): Rina's sealed letter in the Item Box (game-icons.net envelope, Lorc) */
.gl.letter { --g: url(../assets/ui/icons/letter.svg); } .ipic.letter .gl { color: #e98a7a; }
/* Paper (reusable: guide, handouts, forms, letters): a painted sheet
   (assets/art/ui/handout-0), plain enough to stretch to any length. Notices
   use their own pinned papers. */
.guild-paper { position: relative; border: 0; border-radius: 0; background: none; box-shadow: none;
  background: url(../assets/art/ui/handout-0.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 12px 22px #000a); }
.document-shell { width: 100%; max-width: 460px; max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.guild-document { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #04050acc; cursor: pointer; }
.guild-document .document-shell { max-height: calc(100% - 40px); cursor: auto; }
.doc-choices { width: 100%; max-width: 460px; }
.dismiss-hint { padding: 6px 26px; background: radial-gradient(closest-side, #000a, transparent); color: #f3e6c8; font-size: 13px; letter-spacing: .04em; text-shadow: 0 1px 3px #000; margin-bottom: env(safe-area-inset-bottom); }
.pin.interior span { background: #152236e8; border-color: #dec78d; }

/* Rooms use the painted people and furniture as their actual tap targets. */
.scene-hotspot { position: absolute; z-index: 650; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; min-width: 88px; min-height: 88px; }
.scene-hotspot > span { position: absolute; bottom: 0; left: 50%; translate: -50% 0; padding: 5px 12px; border: 1px solid #d7c28f88; border-radius: 4px; background: #17202bd9; color: #fff1cf; font: 600 23px/1.2 Nunito, sans-serif; white-space: nowrap; pointer-events: none; }
.scene-hotspot:hover > span { border-color: #f2d998; background: #29343ceb; }
.scene-hotspot:focus-visible { outline: 2px solid #f2d998; outline-offset: -2px; background: #f0d99a0c; }
.arrive { border-block-width: 1px; animation: welcome-in .4s ease-out; }
@keyframes welcome-in { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .arrive { animation: none; transition: none; } }
.pin.figure { min-height: 630px; min-width: 270px; }
.pin.figure > span, .pin.figure > i { position: relative; z-index: 2; }
.interior-figure { position: absolute; bottom: 25px; height: 610px; width: 260px; object-fit: contain; object-position: bottom; pointer-events: none; mask-image: linear-gradient(#000 80%, transparent); filter: drop-shadow(0 6px 8px #0005); }
/* Show the counter-side upper body rather than a miniature figure standing on the bar. */
.interior-figure { height: 520px; width: 440px; object-fit: cover; object-position: top; }

/* Journal tabs outside the guild card still need full-size tap targets. */
.gtabs button { min-height: 44px; }

/* ---------- story dialogue and choices (owner, 2026-10-19/20; one block, replaces six passes)
   Anime-subtitle look, distinct from the blue Status window: no boxes, borders
   or corners. One soft fade behind the conversation; centred speech; choices
   are centred text on bands that fade out at both ends. */
#ui:has(#talk.on) { padding-top: 24px; background: linear-gradient(to top, rgba(6, 6, 12, .88), rgba(6, 6, 12, .66) 45%, rgba(6, 6, 12, 0)); }
#talk { padding: 0 4% 4px; text-align: center; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#talk b { display: block; margin: 0 0 2px; padding: 0; background: none; border-radius: 0; color: #f2c98a; font: 700 12px/1.3 Nunito, sans-serif; letter-spacing: .08em; opacity: .9; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
#talk p { color: #f4f1ea; font-size: 16px; line-height: 1.4; text-shadow: 0 0 4px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .9); }
.choices { gap: 2px; align-items: stretch; }
.btn.choice, .btn.choice.gold, .btn.choice.glowb {
  --band: rgba(0, 0, 0, .42);
  width: 100%; min-width: 0; min-height: 40px; padding: 4px 16px; justify-content: center; text-align: center; white-space: normal; overflow: visible;
  border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  background: linear-gradient(90deg, transparent, var(--band) 22%, var(--band) 78%, transparent);
  color: #f4f1ea; font-family: Nunito, sans-serif; font-size: 14px; font-weight: 700; text-transform: none; letter-spacing: 0; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.btn.choice.gold, .btn.choice.glowb { --band: rgba(60, 40, 10, .5); color: #f6dca6; } /* the suggested choice */
.btn.choice:hover, .btn.choice:focus-visible { --band: rgba(242, 201, 138, .2); }
.btn.choice.seen { color: rgba(255, 255, 255, .5); } /* already asked: still there, read like a past line */
.btn.choice .lbl { display: block; flex: 1 1 auto; min-width: 0; text-align: center; white-space: normal; }
.btn.choice .lbl small { display: inline; margin-left: 8px; color: rgba(255, 255, 255, .7); font-size: 12px; font-weight: 600; }
.choices.grid2 .btn.choice { width: auto; }
.pursechip { border: 0; background: none; }

/* Scene labels and the way out: text on a soft glow, no box. */
.scene-hotspot > span, .backbtn { border: 0; text-shadow: 0 1px 3px rgba(0, 0, 0, .9); background: radial-gradient(closest-side, rgba(8, 10, 16, .7), rgba(8, 10, 16, .45) 65%, transparent); }
.scene-hotspot > span { border-radius: 999px; padding: 8px 22px; }
.scene-hotspot:hover > span, .backbtn:active { background: radial-gradient(closest-side, rgba(60, 44, 18, .8), transparent); }
.backbtn { padding: 6px 22px 6px 14px; color: #f2c98a; }

/* Status: a small icon in the top-right corner of the game frame. */
#app > .sysbtn { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 60; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; gap: 0; border: 0; border-radius: 50%; background: radial-gradient(rgba(10, 24, 56, .7), transparent 72%); }
#app > .sysbtn[hidden] { display: none; }
#app > .sysbtn i { width: 13px; height: 13px; }
#toasts { padding-right: 58px; } /* top notices leave room for it */

/* ---------- the guild card (owner, 2026-10-20). Isekai guild cards are issued
   cards whose colour is the rank (Isekai Smartphone; Mushoku Tensei's guild card);
   the metals follow Overlord's copper→adamantite plates. Colours per metal come
   from RANKS[].metal via data-metal. */
.guild-id-card { --m1: #f0b98a; --m2: #b06a3c; --m3: #6e3a1c; --ink: #3b1d0b;
  position: relative; width: min(340px, 86vw); aspect-ratio: 1.586; margin: 0 auto; padding: 14px 20px; border-radius: 12px; text-align: left; color: var(--ink);
  display: grid; grid-template: auto auto 1fr auto / auto 1fr; align-items: center; column-gap: 14px;
  background: linear-gradient(115deg, transparent 30%, #ffffff55 45%, transparent 60%), repeating-linear-gradient(90deg, #ffffff0d 0 1px, #0000000d 1px 3px), linear-gradient(160deg, var(--m1), var(--m2) 55%, var(--m3));
  box-shadow: inset 0 1px 0 #fff8, inset 0 -1px 0 #0005, 0 10px 24px #000b; }
.guild-id-card::before { content: ''; position: absolute; inset: 6px; border-radius: 8px; border: 1.5px solid #0000003a; outline: 1px solid #ffffff40; outline-offset: -3px; pointer-events: none; }
.guild-id-card .tag-crest { grid-row: 1 / 4; width: 72px; height: 72px; padding: 8px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--ink); opacity: .8; filter: drop-shadow(0 1px 0 #ffffff66); }
.guild-id-card .paper-heading { grid-column: 2; text-align: left; color: var(--ink); opacity: .75; font-size: 10px; letter-spacing: .18em; }
.guild-id-card .card-name { grid-column: 2; text-align: left; margin-top: 2px; font: 700 26px/1.1 var(--title); text-shadow: 0 1px 0 #ffffff66; overflow-wrap: anywhere; }
.guild-id-card .card-rank { grid-column: 2; display: flex; justify-content: flex-start; align-items: baseline; gap: 10px; margin: 0; }
.guild-id-card .card-rank b { font: 700 54px/1 var(--title); text-shadow: 0 1px 0 #ffffff77, 0 -1px 0 #0004; }
.guild-id-card .card-rank span { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.guild-id-card .card-branch { grid-column: 1 / -1; color: var(--ink); text-align: left; border-top: 1px solid #0003; padding-top: 6px; font-size: 11px; font-weight: 700; opacity: .9; }
.guild-id-card[data-metal="iron"] { --m1: #c9ccd0; --m2: #7d8288; --m3: #43474d; --ink: #1d2024; }
.guild-id-card[data-metal="silver"] { --m1: #f4f6f8; --m2: #b9c0c8; --m3: #7d8590; --ink: #262b33; }
.guild-id-card[data-metal="gold"] { --m1: #fff0b0; --m2: #d9a93a; --m3: #8a5f12; --ink: #3b2603; }
.guild-id-card[data-metal="platinum"] { --m1: #ffffff; --m2: #d4dbe2; --m3: #98a3ae; --ink: #2a3440; }
.guild-id-card[data-metal="mithril"] { --m1: #e8fbff; --m2: #8fd3e8; --m3: #3c7f98; --ink: #0d2c38; }
.guild-id-card[data-metal="adamantite"] { --m1: #8a8fb8; --m2: #3c3f63; --m3: #16172a; --ink: #e9e6ff; }

/* ---------- the request board up close (owner, 2026-10-20): painted paper
   notices (assets/art/ui/notice-N, cut by scripts/cut-sprites.py) pinned by hand
   at BOARD.slots: own spot, size and tilt, edges overlapping. */
.board-cork { position: absolute; z-index: 650; }
.notice { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 34px 12px 14px; border: 0; text-align: center; white-space: normal; cursor: pointer; color: #3a2410;
  background: center / 100% 100% no-repeat; filter: drop-shadow(1px 4px 3px #0008); -webkit-tap-highlight-color: transparent; transition: scale .12s; }
.notice[data-paper="0"], .notice-paper[data-paper="0"] { background-image: url(../assets/art/ui/notice-0.webp); aspect-ratio: 282 / 421; }
.notice[data-paper="1"], .notice-paper[data-paper="1"] { background-image: url(../assets/art/ui/notice-1.webp); aspect-ratio: 255 / 399; }
.notice[data-paper="2"], .notice-paper[data-paper="2"] { background-image: url(../assets/art/ui/notice-2.webp); aspect-ratio: 299 / 424; }
.notice[data-paper="3"], .notice-paper[data-paper="3"] { background-image: url(../assets/art/ui/notice-3.webp); aspect-ratio: 309 / 418; }
.notice[data-paper="4"], .notice-paper[data-paper="4"] { background-image: url(../assets/art/ui/notice-4.webp); aspect-ratio: 317 / 455; }
.notice[data-paper="5"], .notice-paper[data-paper="5"] { background-image: url(../assets/art/ui/notice-5.webp); aspect-ratio: 298 / 424; }
.notice b { max-width: 100%; white-space: normal; font: 700 15px/1.1 var(--title); color: #2c1a08; text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
.notice small { max-width: 100%; white-space: normal; font: 600 14px/1.2 var(--paper); color: #5a3c1a; text-wrap: balance; }
.notice .stamp { position: absolute; top: 15%; right: 17%; width: 28px; height: 28px; font-size: 16px; border-width: 2px; opacity: .85; rotate: 12deg; }
.notice:active { scale: .95; }
.notice-paper .coins { color: #4a3208; }
.notice-paper .nhead .tag { position: static; }
.board-foot { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; }
.board-foot .btn.choice { flex: 1; }