:root {
  --win-a: #2c3c96; --win-b: #18205e; --win-border: #c9d2ff; --ink: #f4f6ff; --dim: #a9b3e6;
  --gold: #ffe36a; --hp: #5ae05a;   /* fonts: --font, --pixel, --num in client/fonts.css */
}
/* Screen layout (client/js/layout.js): --ui-scale scales every HUD / menu size (1 at 1280x720, clamped, times the
   player's setting), --sat/--sar/--sab/--sal are the safe-area insets (notches, home bar). The page never scrolls or
   zooms: the world canvas and the HUD fill the visible viewport (dvh: mobile browser bars don't cut the HUD). */
:root {
  --ui-scale: 1;
  --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px);
  --vh: 100vh;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; height: var(--vh); background: #000; color: var(--ink); font-family: var(--font); overflow: hidden; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
html { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
input, textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }
canvas#game, #hud { position: fixed; left: 0; top: 0; width: 100%; height: var(--vh); }
@supports (height: 100dvh) { canvas#game, #hud { height: 100dvh; } }
canvas#game { image-rendering: pixelated; touch-action: none; }
[hidden] { display: none !important; }
kbd { font-family: var(--pixel); font-size: 8px; background: #0c1240; border: 1px solid var(--dim); border-radius: 3px; padding: 1px 4px; }

/* PMD-style windows: blue gradient, light rounded border */
.window {
  background: linear-gradient(180deg, var(--win-a), var(--win-b));
  border: 2px solid var(--win-border); border-radius: 8px;
  box-shadow: 0 0 0 2px #0a0e30, 0 6px 18px rgba(0,0,0,0.5);
  color: var(--ink);
}

/* Scrollbars in the window style: a dark inset track and a light-blue rounded thumb with the window rim, gold while
   dragged. Chrome / Edge / Safari use the ::-webkit-scrollbar rules (they ignore them on any element that sets
   scrollbar-color or scrollbar-width, so panels must not set those); Firefox gets the standard properties instead. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: rgba(8, 12, 40, 0.55); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(201, 210, 255, 0.18); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #9aa6f0, #6470c8); border: 2px solid #0a0e30; border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(201, 210, 255, 0.55);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #b6c0ff, #7a86dc); }
::-webkit-scrollbar-thumb:active { background: linear-gradient(90deg, #fff0a0, var(--gold)); }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: #8a96e6 rgba(8, 12, 40, 0.55); } }
.outline { text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 0 #000; }

/* Floor title card: the name rises in, a gold rule draws out between the lines, the words lift away, then the black opens
   as a circle from the middle of the screen (where the leader stands) onto the new floor. Reduce flashing & shake: a fade. */
@property --reveal { syntax: '<percentage>'; inherits: false; initial-value: -10%; }
#title-card {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: #000; font-family: var(--pixel); pointer-events: none; animation: card 2.2s forwards; z-index: 50;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--reveal), #000 calc(var(--reveal) + 8%));
  mask-image: radial-gradient(circle at 50% 50%, transparent var(--reveal), #000 calc(var(--reveal) + 8%));
}
#title-card .t1 { font-size: clamp(16px, 3vw, 30px); color: #fff; order: 0; animation: card-t1 2.2s both; }
#title-card .t2 { font-size: clamp(12px, 2vw, 20px); color: var(--gold); order: 2; animation: card-t2 2.2s both; }
#title-card::after { content: ''; order: 1; height: 2px; width: min(420px, 56vw); margin: -8px 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); animation: card-rule 2.2s both; }
@keyframes card { 0%, 62% { --reveal: -10%; opacity: 1; } 94% { --reveal: 110%; opacity: 1; } 100% { --reveal: 110%; opacity: 0; } }
/* a floor still loading behind the card (ui.js titleCard `until`): everything waits on the name */
#title-card.hold, #title-card.hold .t1, #title-card.hold .t2, #title-card.hold::after { animation-play-state: paused; }
@keyframes card-t1 { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: none; } 50% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes card-t2 { 0%, 8% { opacity: 0; transform: translateY(8px); } 22% { opacity: 1; transform: none; } 50% { opacity: 1; transform: none; } 62%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes card-rule { 0%, 6% { transform: scaleX(0); opacity: 1; } 26% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(1); opacity: 1; } 62%, 100% { transform: scaleX(1.2); opacity: 0; } }
body.fx-calm #title-card { -webkit-mask-image: none; mask-image: none; animation: card-calm 2.2s forwards; }
body.fx-calm #title-card .t1, body.fx-calm #title-card .t2, body.fx-calm #title-card::after { animation: none; }
@keyframes card-calm { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
#banner {
  position: fixed; top: 34%; left: 0; right: 0; text-align: center; font-family: var(--pixel); font-size: clamp(16px, 3vw, 28px);
  color: #ff6a5a; text-shadow: 0 3px 0 #000, 0 0 18px rgba(255,80,60,0.7); pointer-events: none; animation: banner 1.8s forwards; z-index: 25;
}
@keyframes banner { 0% { transform: scale(2); opacity: 0; } 15% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }


/* ---------- title screen, accounts, character creation (client/js/title.js) ---------- */
/* The scene is a pixel canvas (title.js); its sizes come from title.js sizeTitle() in whole steps: --lf / --rf logo and
   ribbon, --lfm / --rfm the same in the menu, --pf "Press Start", --ff the footer, --tz the menu panel's zoom. */
#title {
  position: fixed; inset: 0; z-index: 60; overflow: hidden; background: #5a9ae8; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  --lf: 96px; --rf: 42px; --lfm: 48px; --rfm: 24px; --pf: 16px; --ff: 12px; --tz: 1;
}
#title-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#title-stage {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 3vh, 48px);
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(30px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
/* Press Start: the logo block sits in the upper middle, over the sky (hills and meadow fill the bottom of the scene) */
#title:not(.menu) #title-stage { padding-bottom: max(30px, env(safe-area-inset-bottom), calc(var(--vh) * 0.26)); }
/* the menu: a soft dark vignette over the scene (Pokémon keep walking behind), under the panel and its halo */
#title::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(ellipse 65% 75% at 50% 55%, rgba(6, 10, 40, 0.4), rgba(6, 10, 40, 0.12) 70%, rgba(6, 10, 40, 0)); }
#title.menu::after { opacity: 1; }
#title-logo { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: normal; user-select: none; pointer-events: none; flex: none; }
/* CSS logo: yellow letters, blue outline, bouncy arc */
.logo-css { font-family: "Lilita One", var(--pixel); font-size: var(--lf); line-height: 1; text-align: center; padding: 0.1em 0.2em 0; }
#title.menu .logo-css { font-size: var(--lfm); }
#title.ready .logo-css, #title.ready .logo-online { transition: font-size 0.6s ease; }
#title.ready #title-stage { transition: padding-bottom 0.6s ease; }
.logo-css .w { display: inline-block; white-space: nowrap; margin: 0 0.12em; }
.logo-css .ch, .logo-online .ch { position: relative; display: inline-block; transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); }
/* each letter: the letter itself is the thick blue outline, ::after lays the yellow gradient fill on top */
.logo-css .ch { color: #1b3f9c; -webkit-text-stroke: 0.2em #1b3f9c; text-shadow: 0 0.09em 0 #0b1d55, 0 0.14em 0.06em rgba(0, 0, 0, 0.35); }
.logo-css .ch::after {
  content: attr(data-c); position: absolute; left: 0; top: 0; -webkit-text-stroke: 0; text-shadow: none;
  background: linear-gradient(#fff6a0 12%, #ffd51e 50%, #f39a12 92%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #ffd422;
}
.logo-online .ch::before { content: attr(data-c); position: absolute; inset: 0; z-index: -1; -webkit-text-stroke: 0.16em #7a0f1a; color: #7a0f1a; }
.logo-online {
  position: relative; z-index: 1; margin-top: -0.25em; padding: 0.12em 0.7em 0.18em; font-family: "Lilita One", var(--pixel); font-size: var(--rf);
  letter-spacing: 0.16em; color: #fff; line-height: 1; transform: rotate(-3deg);
  background: linear-gradient(#ff6a52, #d42a32); border: 0.08em solid #ffe36a; border-radius: 0.3em; box-shadow: 0 0.1em 0 #7a0f1a, 0 0.2em 0.3em rgba(0, 0, 0, 0.35);
}
.logo-online .ch { animation: bob 2.4s ease-in-out var(--d, 0s) infinite; }
#title.menu .logo-online { font-size: var(--rfm); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.08em); } }
.press { font: var(--pf) var(--pixel); color: #fff; text-shadow: 0.1em 0 0 #1b3f9c, -0.1em 0 0 #1b3f9c, 0 0.1em 0 #1b3f9c, 0 -0.1em 0 #1b3f9c, 0 0.22em 0 #0b1d55, 0 0 0.75em rgba(0, 0, 0, 0.35); animation: pressblink 1.1s infinite; pointer-events: none; }
@keyframes pressblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
#title-foot {
  position: absolute; left: 0; right: 0; bottom: max(6px, env(safe-area-inset-bottom)); width: fit-content; max-width: calc(100% - 24px); margin: 0 auto; padding: 0.2em 0.9em;
  border-radius: 1em; background: rgba(8, 18, 48, 0.45); text-align: center; font-size: var(--ff); line-height: 1.3; color: #fff; text-shadow: 0 1px 1px #000; pointer-events: none;
}
#title.menu #title-foot { display: none; }

#title-panel, .acct-box { width: min(400px, 100%); max-height: 100%; overflow-y: auto; padding: 12px 14px; font-size: 17px; animation: pop 0.14s ease-out; overscroll-behavior: contain; }
#title-panel { flex: 0 1 auto; min-height: 0; zoom: var(--tz); --pxz: var(--tz); }   /* bigger on big screens (1.25 at 1080p, 1.5 at 1440p, 2 at 4K) */
#title.menu #title-panel { box-shadow: 0 0 0 2px #0a0e30, 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 90px 48px rgba(4, 8, 32, 0.45); }   /* soft dark halo behind the menu */
#title-panel[data-view="create"] { width: min(560px, 100%); }
.thead { font: 11px var(--head); color: var(--gold); padding: 4px 4px 10px; border-bottom: 1px solid rgba(201, 210, 255, 0.35); margin-bottom: 10px; }
.tlist { display: flex; flex-direction: column; gap: 2px; }
.tbtn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 6px 10px 6px 4px; border: 0; border-radius: 6px;
  background: transparent; color: var(--ink); font: 19px var(--font); text-align: left; cursor: pointer; touch-action: manipulation;
}
.tbtn .lbl { flex: none; white-space: nowrap; }
.tbtn .cur { width: 14px; flex: none; color: transparent; font-size: 11px; }
.tbtn:focus-visible, .tbtn:focus, .tbtn:active { outline: none; background: rgba(255, 255, 255, 0.1); }
.tbtn:focus .cur { color: #fff; animation: blink 0.6s steps(2) infinite; }
.tbtn .cur .pxi, .mitem .cursor .pxi { visibility: hidden; }   /* the cursor: a pixel arrow (client/js/pixicons.js) on the picked row */
.tbtn:focus .cur .pxi, .mitem.sel .cursor .pxi { visibility: visible; }
@media (hover: hover) { .tbtn:hover { background: rgba(255, 255, 255, 0.08); } }
.tbtn .sub { margin-left: auto; padding-left: 10px; font-size: 14px; color: var(--gold); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.tmsg { min-height: 20px; margin: 8px 4px 0; font-size: 15px; color: #bfe0ff; }
.tmsg.bad { color: #ff9a7a; }
.tmsg:empty { display: none; }
.tform { display: flex; flex-direction: column; gap: 10px; }
.tfield { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--dim); }
.tfield input {
  width: 100%; min-height: 46px; padding: 8px 12px; border-radius: 6px; border: 2px solid var(--win-border); background: #0c1240; color: #fff;
  font: 18px var(--font); /* 16px or more keeps iOS from zooming in */
}
.tfield input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(255, 227, 106, 0.3); }
.trow { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.tgo, .tback { min-height: 48px; min-width: 96px; padding: 10px 18px; border-radius: 8px; border: 2px solid var(--win-border); cursor: pointer; touch-action: manipulation; }
.tgo { font: 13px var(--head); background: linear-gradient(#ffb84a, #e0782a); color: #2a1200; }
.tback { font: 17px var(--font); background: #0c1240; color: var(--ink); }
.tgo:focus-visible, .tback:focus-visible, .tchip:focus-visible, .tmon:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.tgo:disabled { filter: grayscale(0.6) brightness(0.8); cursor: wait; }
.tnote, .tpara { margin: 4px 2px 0; font-size: 14px; color: var(--dim); line-height: 1.35; }
.tpara { font-size: 16px; color: var(--ink); margin: 0 2px 6px; }
.trow.tstart { justify-content: flex-start; margin-top: 0; }
.tgo.tdanger { background: linear-gradient(#ff8a7a, #d0453a); color: #2a0600; }
/* the recovery codes (title.js showCodes): two columns, one on narrow phones */
.tcodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 10px; margin: 2px 0; padding: 10px 10px 10px 32px; background: #0c1240; border: 2px dashed var(--win-border); border-radius: 8px;
  font: 700 16px/1.3 ui-monospace, Consolas, monospace; color: var(--gold); letter-spacing: 0.03em; user-select: all; }
.tcodes li::marker { color: var(--dim); font-size: 12px; }
@media (max-width: 380px) { .tcodes { grid-template-columns: 1fr; } }
.tstatus { padding: 14px 6px 6px; text-align: center; font-size: 18px; }
.tset { display: flex; flex-direction: column; gap: 12px; padding: 4px; }
.tslider, .tpair { display: grid; grid-template-columns: 82px 1fr auto; align-items: center; gap: 10px; min-height: 44px; }
.tpair { grid-template-columns: 82px auto auto; justify-content: start; }
.tslider input { width: 100%; height: 44px; accent-color: var(--gold); }
.tslider output { min-width: 32px; text-align: right; color: var(--gold); }
.tchip { min-height: 44px; padding: 6px 12px; border-radius: 6px; border: 2px solid var(--win-border); background: #0c1240; color: var(--ink); font: 16px var(--font); cursor: pointer; }
.tchip.on { background: var(--gold); color: #141832; border-color: var(--gold); }
.tcredits { font-size: 15px; line-height: 1.4; color: var(--ink); padding: 0 4px; }
.tcredits p { margin: 0 0 8px; }
.tcredits a { color: #bfe0ff; }
.tcredits code { font-family: var(--pixel); font-size: 9px; }
/* fallback starter + partner picker (until quiz.js, the personality test, is there) */
.tpick-t { font-size: 15px; margin-top: 4px; }
.tmons { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.tmon { min-height: 44px; padding: 2px; border: 2px solid transparent; border-radius: 6px; background: #0c1240; cursor: pointer; touch-action: manipulation; }
.tmon img { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; }
.tmon.sel { border-color: var(--gold); box-shadow: 0 0 10px rgba(255, 227, 106, 0.6); }
.tmon:disabled { opacity: 0.3; cursor: default; }
.tpreview { display: grid; grid-template-columns: 96px 1fr 96px 1fr; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; min-height: 72px; }
.tpreview canvas { width: 96px; height: 72px; image-rendering: pixelated; }
.tinfo small { color: var(--dim); }
/* quiz.js renders the personality test into #creation, above the title background */
#creation { position: fixed; inset: 0; z-index: 61; }
#creation:empty { display: none; }   /* quiz.js may use its own overlay (#quiz) instead */
#acct-modal { position: fixed; inset: 0; z-index: 90;   /* above the personality test (#quiz, 80) */ display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 8, 30, 0.55); }
.acct-box { width: min(420px, 100%); max-height: calc(100vh - 32px); }
body.rom-ui #title-panel, body.rom-ui .acct-box { padding: 4px 10px; }
body.rom-ui .tbtn, body.rom-ui .tgo, body.rom-ui .tback, body.rom-ui .tchip, body.rom-ui .tfield input { border-radius: 0; }
.set-who { margin-right: 6px; }

@media (max-width: 560px) {
  .tmons { grid-template-columns: repeat(4, 1fr); }
  .tpreview { grid-template-columns: 72px 1fr; }
  .tpreview canvas { width: 72px; height: 54px; }
}
/* phones and small windows in landscape: logo left, panel right */
@media (orientation: landscape) and (max-height: 540px) {
  #title.menu #title-stage { flex-direction: row; gap: 4vw; }
  #title-panel { max-height: calc(100vh - 32px); }
  .tbtn { min-height: 44px; font-size: 17px; }
}
/* ---------- PMD menus (sizes follow --k; a column that never outgrows the screen: the list scrolls) ---------- */
.pmd-menu { position: fixed; right: calc(24px + var(--sar)); top: calc(90px * var(--k) + var(--sat)); min-width: calc(260px * var(--k)); max-width: min(calc(440px * var(--k)), 92vw); max-height: calc(var(--vh) - 90px * var(--k) - 16px - var(--sat) - var(--sab)); display: flex; flex-direction: column;
  padding: calc(10px * var(--k)) calc(12px * var(--k)) calc(10px * var(--k)) calc(8px * var(--k)); z-index: 30; font-size: calc(17px * var(--k)); animation: pop 0.12s ease-out; }
.pmd-menu.at { right: auto; max-height: calc(var(--vh) - 16px); }
.pmd-menu .mtitle { font-family: var(--head); font-size: calc(10px * var(--k)); color: var(--gold); padding: 2px calc(34px * var(--k)) calc(8px * var(--k)) calc(22px * var(--k)); border-bottom: 1px solid rgba(201,210,255,0.35); margin-bottom: 6px; flex: none; }
.pmd-menu .mtext { padding: 0 8px calc(8px * var(--k)) calc(22px * var(--k)); color: var(--dim); font-size: calc(15px * var(--k)); line-height: 1.3; flex: none; }
.pmd-menu .mhint { padding: 6px 8px 0 calc(22px * var(--k)); color: var(--dim); font-size: calc(13px * var(--k)); border-top: 1px solid rgba(201,210,255,0.2); margin-top: 6px; flex: none; }
.pmd-menu .mitems { max-height: 64vh; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.pmd-menu .mclose { position: absolute; top: calc(6px * var(--k)); right: calc(6px * var(--k)); width: calc(26px * var(--k)); height: calc(26px * var(--k)); padding: 0; border-radius: 5px; border: 1px solid var(--win-border); background: var(--slot); color: var(--ink); font: calc(9px * var(--k)) var(--pixel); cursor: pointer; }
.pmd-menu .mclose:hover { border-color: var(--gold); }
.pmd-menu .mfoot { display: none; gap: 8px; justify-content: flex-end; padding-top: 8px; flex: none; }
.mitem { display: flex; align-items: center; gap: calc(8px * var(--k)); padding: calc(3px * var(--k)) 8px calc(3px * var(--k)) 4px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.mitem .cursor { width: calc(14px * var(--k)); color: transparent; font-size: calc(11px * var(--k)); flex: none; }
.mitem.sel .cursor { color: #fff; animation: blink 0.6s steps(2) infinite; }
.mitem.sel { background: rgba(255,255,255,0.08); }
.mitem.disabled { opacity: 0.4; cursor: default; }
.mitem .msub { margin-left: auto; color: var(--gold); font-family: var(--head); font-size: calc(9px * var(--k)); padding-left: 16px; }
.mitem .micon { width: calc(24px * var(--k)); height: calc(24px * var(--k)); image-rendering: pixelated; border-radius: 3px; }
.pmd-menu .mitems { max-height: 56vh; overflow-y: auto; }
.pmd-menu .mportrait { float: left; width: 40px; height: 40px; margin: 0 6px 4px 6px; image-rendering: pixelated; border: 2px solid rgba(201,210,255,0.55); border-radius: 3px; }
.pmd-menu .mportrait + .mtitle { padding-top: 6px; }
/* long lists (ui.js menu pageSize): the page in the title's corner, a Pokémon search over the rows */
.pmd-menu .mtitle .mpage { float: right; margin-left: auto; padding-left: 10px; color: var(--dim); }
.pmd-menu .msearch { display: flex; align-items: center; gap: 6px; flex: none; margin: 0 4px 6px calc(22px * var(--k)); padding: 0 8px; border: 2px solid rgba(201,210,255,0.55); border-radius: 6px; background: #0c1240; color: var(--dim); }
.pmd-menu .msearch:focus-within { border-color: var(--gold); }
.pmd-menu .msearch input { flex: 1; min-width: 0; height: calc(26px * var(--k)); border: 0; outline: 0; background: none; color: #fff; font: calc(15px * var(--k)) var(--font); }
.pmd-menu .msearch input::placeholder { color: #8f9ad8; }
.mitem .digit { display: inline-block; min-width: 14px; text-align: center; font-family: var(--head); font-size: 14px; border-bottom: 2px solid transparent; }
.mitem .digit.on { border-bottom-color: var(--gold); }
@keyframes blink { 50% { opacity: 0.3; } }
@keyframes pop { from { transform: scale(0.96); opacity: 0; } }

/* ---------- dialog box (portrait + typewriter; tap it to go on) ---------- */
#dialog { position: fixed; left: 50%; bottom: calc(24px * var(--k) + var(--sab)); transform: translateX(-50%); width: min(calc(720px * var(--k)), 94vw); min-height: calc(120px * var(--k)); max-height: calc(var(--vh) - 24px); overflow-y: auto; padding: calc(14px * var(--k)) calc(18px * var(--k)); display: flex; gap: calc(14px * var(--k)); z-index: 40; font-size: calc(18px * var(--k)); cursor: pointer; }
#dialog .dportrait img { width: calc(80px * var(--k)); height: calc(80px * var(--k)); image-rendering: pixelated; border: 3px solid var(--win-border); border-radius: 4px; background: #0c1240; }
#dialog .dbody { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#dialog .dname { font-family: var(--head); font-size: calc(11px * var(--k)); color: var(--gold); margin-bottom: 6px; }
#dialog .dtext { line-height: 1.35; min-height: calc(48px * var(--k)); }
#dialog .dchoices { display: flex; gap: 6px; margin-top: 6px; align-self: flex-end; flex-direction: column; min-width: calc(120px * var(--k)); }
#dialog .dnext { align-self: flex-end; animation: blink 0.6s steps(2) infinite; }

/* ---------- notices (invites / requests / ready check) ---------- */
#notices { position: fixed; top: calc(112px * var(--k) + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 35; }
.notice { display: flex; gap: calc(10px * var(--k)); padding: calc(10px * var(--k)) calc(12px * var(--k)); width: min(calc(420px * var(--k)), 92vw); animation: pop 0.15s ease-out; }
.notice img { width: calc(48px * var(--k)); height: calc(48px * var(--k)); image-rendering: pixelated; border: 2px solid var(--win-border); border-radius: 4px; }
.notice .nbody { flex: 1; font-size: calc(15px * var(--k)); }
.notice .nbody b { font-family: var(--head); font-size: calc(10px * var(--k)); color: var(--gold); display: block; margin-bottom: 4px; }
.nbtns { display: flex; gap: 8px; margin-top: 8px; }
.nbtns button { font: calc(14px * var(--k)) var(--font); padding: 4px 10px; border-radius: 6px; border: 2px solid var(--win-border); color: #fff; cursor: pointer; background: #0c1240; }
.nbtns .yes { background: #2a7a3a; } .nbtns .no { background: #7a2a2a; }
.ntimer { height: 3px; background: rgba(255,255,255,0.15); margin-top: 8px; border-radius: 2px; overflow: hidden; }
.ntimer i { display: block; height: 100%; width: 100%; background: var(--gold); }

/* ---------- fainted: waiting for rescue ---------- */
#sos { position: fixed; left: 50%; top: 30%; transform: translateX(-50%); width: min(calc(420px * var(--k)), 92vw); padding: calc(14px * var(--k)); text-align: center; font-size: calc(16px * var(--k)); z-index: 30; }
#sos b { font-family: var(--head); font-size: calc(11px * var(--k)); color: #ff9a7a; display: block; margin-bottom: 8px; }
#sos .stime { font-family: var(--pixel); font-size: calc(22px * var(--k)); color: var(--gold); margin: 10px 0; }
#sos button { font: calc(14px * var(--k)) var(--font); padding: 6px 14px; border-radius: 6px; border: 2px solid var(--win-border); background: #7a2a2a; color: #fff; cursor: pointer; }

/* =================================================================== HUD (client/js/hud.js)
   --k scales the HUD: it is --ui-scale (1 at 1280x720, larger on big screens, smaller on narrow ones; layout.js).
   --abar-h / --abar-w are the measured action bar size (set by hud.js) so the log, prompt and bag panel sit above it. */
:root { --k: var(--ui-scale); --abar-h: 74px; --abar-w: 960px; --hud-a: rgba(42, 58, 148, 0.93); --hud-b: rgba(20, 28, 88, 0.93); --slot: #0d1344; --slot-line: #4e5ca8; }

#hud { pointer-events: none; z-index: 10; }
#hud > *, #hud-left > *, #hud-top > *, #hud-right > *, .maprow > * { pointer-events: auto; }
#hud-left, #hud-top, #hud-right, .maprow, #tooltip { pointer-events: none !important; }
body:not(.rom-ui) #hud .window { background: linear-gradient(180deg, var(--hud-a), var(--hud-b)); }
/* pixel icons (client/js/pixicons.js): a rule sets --want, the box the icon takes; it draws at the nearest whole scale */
.gi { --want: calc(16px * var(--k)); }
.ticon { flex: none; vertical-align: middle; }

/* bars: one pixel-art style for every progress bar (HP, EXP, Belly, PP, the party list, the profile, the Team window, the
   rank bars of jobs and results, the Pokedex), like the ROM's HUD bar and the boss bar (client/boss.css): a dark 1-px frame,
   a track with the frame's shadow on its top row, and a fill in a ramp: a light top row, the body, a dark bottom row and one
   glint pixel. --bp is one art pixel: a whole number of device pixels at every UI scale, in zoomed windows too (--pxz, as
   pixicons.js does). --rows is the inner height in art pixels (4 HP, 3 thin, 2 small). The fill takes --f (0-1, set by
   the code: `--f: 0.5`) and optionally --a (where it starts, for a second fill on the same track); its width snaps to
   whole art pixels, never shows 0 for a value above 0 nor full for a value below 1, and changes in steps. HP colours step
   at PMD's pinch line: green above 1/2, yellow (.mid) above 1/4, red (.low) at 1/4 and under (hud.js barCls). */
@property --f { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --a { syntax: '<number>'; inherits: false; initial-value: 0; }
.bar {
  --u: calc(1px / var(--pxdpr, 1) / var(--pxz, 1));
  --bp: max(var(--u), round(nearest, calc(var(--bpx, 1.6px) * var(--k, 1) / var(--pxz, 1)), var(--u)));
  --rows: 4;
  position: relative; display: block; flex: 1; min-width: 0; box-sizing: content-box; height: calc(var(--bp) * var(--rows));
  border: var(--bp) solid var(--frame, #100818); border-radius: 0; overflow: hidden;
  background: var(--trk, #4a1a2c); box-shadow: inset 0 var(--bp) 0 var(--trk0, #26081a);
  /* the frame's corner pixels cut away, like the icons' outline */
  clip-path: polygon(var(--bp) 0, calc(100% - var(--bp)) 0, calc(100% - var(--bp)) var(--bp), 100% var(--bp), 100% calc(100% - var(--bp)), calc(100% - var(--bp)) calc(100% - var(--bp)),
    calc(100% - var(--bp)) 100%, var(--bp) 100%, var(--bp) calc(100% - var(--bp)), 0 calc(100% - var(--bp)), 0 var(--bp), var(--bp) var(--bp));
}
.bar > i {
  --c1: #0e6a34; --c2: #2cb84a; --c3: #7ee864; --c4: #e8ffc8;   /* dark row, body, light row, glint */
  --x0: round(nearest, calc(var(--a) * 100%), var(--bp));
  --x1: clamp(min(var(--bp), calc(var(--f) * 100000px)), round(nearest, calc(var(--f) * 100%), var(--bp)), calc(100% - min(var(--bp), calc((1 - var(--f)) * 100000px))));
  position: absolute; top: 0; bottom: 0; left: var(--x0); width: max(0px, calc(var(--x1) - var(--x0))); display: block; overflow: hidden;
  /* lit from the top left: the light row on top, the dark row under it, a dark last column where the fill ends */
  background: var(--c2); box-shadow: inset 0 var(--bp) 0 var(--c3), inset 0 calc(var(--bp) * -1) 0 var(--c1), inset calc(var(--bp) * -1) 0 0 var(--c1);
  transition: --f 0.3s steps(6, end), --a 0.3s steps(6, end);
}
.bar > i::before { content: ''; position: absolute; left: var(--bp); top: 0; width: var(--bp); height: var(--bp); background: var(--c4); }
@supports not (width: round(nearest, 10px, 3px)) {
  .bar { --bp: max(1px, calc(var(--bpx, 1.6px) * var(--k, 1) / var(--pxz, 1))); }
  .bar > i { left: calc(var(--a) * 100%); width: calc((var(--f) - var(--a)) * 100%); }
}
.bar > i.mid { --c1: #a06800; --c2: #e8b818; --c3: #ffe85a; --c4: #fffbe0; }
.bar > i.low { --c1: #8c1028; --c2: #e0383a; --c3: #ff8a6a; --c4: #ffe0d4; }
.bar.thin { --rows: 3; --trk: #161c4c; --trk0: #0a0c2a; }
.bar.xp > i, .bar.blue > i { --c1: #1c48a8; --c2: #3a8ef0; --c3: #8ad0ff; --c4: #e8faff; }
.bar.belly > i { --c1: #a04a08; --c2: #ec9028; --c3: #ffc860; --c4: #fff2c8; }
.bar.belly > i.low { --c1: #8c1028; --c2: #e0383a; --c3: #ff8a6a; --c4: #ffe0d4; }
.bar.gold > i { --c1: #b06000; --c2: #f0a818; --c3: #ffe050; --c4: #fffbd0; }   /* rank points (jobs, results) */
.bar.gold { --trk: #161c4c; --trk0: #0a0c2a; }
.stat { display: flex; align-items: center; gap: calc(6px * var(--k)); }
.stat label { width: calc(36px * var(--k)); flex: none; font: calc(7px * var(--k)) var(--pixel); color: var(--dim); }
.stat .num { flex: none; min-width: calc(56px * var(--k)); text-align: right; font-size: calc(13px * var(--k)); font-variant-numeric: tabular-nums; line-height: 1; }
.chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 calc(6px * var(--k)); border-radius: 9px; background: rgba(6, 10, 36, 0.7); border: 1px solid rgba(201, 210, 255, 0.35); font-size: calc(12px * var(--k)); line-height: 1.45; white-space: nowrap; cursor: help; }
/* pixel badges (client/js/pixbadge.js: the tactics, LEAD): the art scaled by whole device pixels to about --want tall, the
   pixel icons' rule (a zoomed window's --pxz counts too) */
.pxbadge { --want: 18px; --u: calc(1px / var(--pxdpr, 1) / var(--pxz, 1)); --ip: max(var(--u), round(nearest, calc(var(--want) / var(--gh) - var(--u) / 16), var(--u)));
  display: inline-block; flex: none; vertical-align: middle; width: calc(var(--ip) * var(--gw)); height: calc(var(--ip) * var(--gh)); image-rendering: pixelated; pointer-events: none; }
@supports not (width: round(nearest, 10px, 3px)) { .pxbadge { width: calc(var(--want) * var(--gw) / var(--gh)); height: var(--want); } }
/* staff badges (client/js/staffbadge.js: GM, MOD): a sheet of 30 frames side by side played in 2.4 s (its FRAMES and
   PERIOD), scaled like .pxbadge; frame 0 (no glint, the rim at its mid shade) under Reduce flashing and reduced motion */
.stfb { --want: 18px; --u: calc(1px / var(--pxdpr, 1) / var(--pxz, 1)); --ip: max(var(--u), round(nearest, calc(var(--want) / var(--gh) - var(--u) / 16), var(--u)));
  display: inline-block; flex: none; vertical-align: middle; width: calc(var(--ip) * var(--gw)); height: calc(var(--ip) * var(--gh));
  background-repeat: no-repeat; background-size: calc(100% * 30) 100%; background-position: 0 0; image-rendering: pixelated; animation: stfb-play 2.4s steps(30) infinite; }
@supports not (width: round(nearest, 10px, 3px)) { .stfb { width: calc(var(--want) * var(--gw) / var(--gh)); height: var(--want); } }
@keyframes stfb-play { to { background-position-x: calc(100% * 30 / 29); } }   /* frame k at k / 29 of the way: 30 steps end on frame 29 */
body.fx-calm .stfb { animation: none; }
@media (prefers-reduced-motion: reduce) { .stfb { animation: none; } }

/* top-left: the Poké badge, the player card and the squad's mini cards: client/hudcards.css (client/js/hudcards.js); the
   parts the details, the Lv tag and the level-up look share */
.lvtag { position: absolute; left: 50%; bottom: calc(-9px * var(--k)); transform: translateX(-50%); background: #0a0e30; border: 1px solid var(--win-border); border-radius: 8px; padding: 0 6px; font-size: calc(13px * var(--k)); line-height: 1.35; white-space: nowrap; }
.sdetail { display: none; grid-column: 1 / -1; border-top: 1px solid rgba(201, 210, 255, 0.25); padding-top: 6px; margin-top: 8px; }
#pcard.open > .sdetail { display: block; }
.sd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: calc(13px * var(--k)); }
.sd-stats span { display: flex; justify-content: space-between; gap: 4px; background: rgba(6, 10, 36, 0.55); border-radius: 4px; padding: 1px 6px; }
.sd-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; margin-top: 6px; font-size: calc(13px * var(--k)); }
.sd-move { display: flex; align-items: center; gap: 4px; min-width: 0; cursor: help; }
.sd-move > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-move .pp { margin-left: auto; font-size: calc(11px * var(--k)); color: var(--dim); }
.sd-iq { margin-top: 5px; font-size: calc(12px * var(--k)); color: #d8c8ff; line-height: 1.3; }
.sx { flex: none; width: calc(20px * var(--k)); height: calc(20px * var(--k)); padding: 0; border-radius: 4px; border: 1px solid var(--slot-line); background: var(--slot); color: var(--ink); font: calc(8px * var(--k)) var(--pixel); cursor: pointer; }
.sx:hover { border-color: var(--gold); }
.scard.controlled { box-shadow: 0 0 0 2px #0a0e30, 0 0 0 4px rgba(255, 227, 106, 0.75), 0 6px 18px rgba(0, 0, 0, 0.5); }
.scard.down, #pcard.down { filter: grayscale(0.8); opacity: 0.7; }
/* level-up (hud.js levelUp): the Lv tag pops gold and the EXP bar fills and shines before it starts over. Pixel art like
   the effects on the map: held frames (steps), hard one-pixel rims instead of blurred glows, flat bands instead of gradients */
#pcard.lvup .lvtag, .scard.lvup .slv { animation: lvpop 0.7s steps(6, jump-none) both; color: var(--gold); text-shadow: 1px 0 #3a1a00, -1px 0 #3a1a00, 0 1px #3a1a00, 0 -1px #3a1a00, 0 2px 0 #000; }
#pcard.lvup .lvtag { border-color: var(--gold); }
.lvup .bar.xp { --frame: #a0d6ff; }   /* the frame lights up */
.lvup .bar.xp > i { --c1: #4a90e0; --c2: #9ee0ff; --c3: #ffffff; --c4: #ffffff; }
.lvup .bar.xp > i::after { content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: calc(var(--bp) * 3); background: #ffffff; animation: lvshine 0.9s steps(8, jump-none) 2; }
@keyframes lvpop { 0% { transform: translateX(-50%) scale(1); } 30% { transform: translateX(-50%) scale(1.45); } 100% { transform: translateX(-50%) scale(1); } }
.scard.lvup .slv { animation-name: lvpop2; display: inline-block; }
@keyframes lvpop2 { 0% { transform: scale(1); } 30% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes lvshine { 0% { left: calc(var(--bp) * -3); } 100% { left: 100%; } }
body.fx-calm .lvup .lvtag, body.fx-calm .lvup .slv, body.fx-calm .lvup .bar.xp i::after { animation: none; }   /* Reduce flashing & shake */

/* top-centre: zone / floor / weather / wind, shop + SOS flags, boss */
#hud-top { position: absolute; top: calc(8px + var(--sat)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: min(560px, calc(100vw - 2 * (246px * var(--k)) - 48px)); min-width: 220px; }
#zonebar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px calc(12px * var(--k)); padding: 4px calc(14px * var(--k)); font-size: calc(15px * var(--k)); white-space: nowrap; }
#zb-floor { font: calc(11px * var(--k)) var(--pixel); color: var(--gold); }
.zchip { display: inline-flex; align-items: center; gap: 4px; font-size: calc(13px * var(--k)); cursor: help; }
.wind .pips { display: inline-flex; gap: 2px; }
.wind .pips i { width: calc(6px * var(--k)); height: calc(11px * var(--k)); border-radius: 1px; background: rgba(255, 255, 255, 0.18); }
.wind.w1 .pips i.on { background: #ffe36a; } .wind.w2 .pips i.on { background: #ffa040; } .wind.w3 .pips i.on { background: #ff5a4a; }
.wind.w3 { animation: blink 0.8s steps(2) infinite; }
.flag { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 2px 8px; padding: 4px 12px; border-radius: 8px; border: 2px solid #2a1200; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5); font-size: calc(14px * var(--k)); text-align: center; }
.flag.unpaid, .flag.sos { background: linear-gradient(#ffdc8a, #f0a030); color: #2a1200; }
.flag .fsub { font-size: calc(12px * var(--k)); color: #5a3000; flex-basis: 100%; }
.flag .ficons { display: inline-flex; gap: 2px; }
.flag.thief { background: linear-gradient(#ff6a5a, #c0201a); color: #fff; border-color: #fff; font: calc(10px * var(--k)) var(--pixel); padding: 8px 14px; animation: blink 0.8s steps(2) infinite; }
.flag.sos { animation: blink 1.2s steps(2) infinite; }
/* #bossbar: client/boss.css */

/* top-right: minimap, settings button, party, online list */
#hud-right { position: absolute; top: calc(10px + var(--sat)); right: calc(12px + var(--sar)); width: calc(220px * var(--k)); display: flex; flex-direction: column; align-items: flex-end; gap: calc(6px * var(--k)); }
.maprow { display: flex; align-items: flex-start; gap: 6px; }
/* The minimap (client/js/minimap.js, docs/minimap.md): the canvas is the whole pixel panel (frame, body, map) and sets its own
   CSS size (its device pixels / the device ratio). max-width / max-height are the box it fits in at this layout; --mm-f is
   Settings > Minimap size (0.75 / 1 / 1.35). The big map (M) is placed on whole device pixels by the script. */
#minimap { display: block; flex: none; image-rendering: pixelated; --mm-f: 1; }
#minimap:not(.big) { max-width: calc(192px * var(--k) * var(--mm-f)); max-height: calc(200px * var(--k) * var(--mm-f)); }
#minimap.big { position: fixed; z-index: 20; max-width: 92vw; max-height: min(64vh, 600px); }
#mm-legend { position: fixed; z-index: 20; max-width: calc(100vw - 16px); padding: 6px calc(12px * var(--k)); font-size: calc(13px * var(--k)); }
.mm-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px calc(12px * var(--k)); }
.mm-key { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
#tooltip .mm-keys { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 3px 12px; margin: 2px 0 4px; font-size: calc(13px * var(--k)); color: #cfd6ff; }
#settings-btn { width: calc(30px * var(--k)); height: calc(30px * var(--k)); padding: 0; font-size: calc(17px * var(--k)); line-height: 1; cursor: pointer; color: var(--ink); }
#settings-btn:hover { color: var(--gold); }
#party { width: 100%; padding: 6px 8px; }
.ptitle { display: flex; justify-content: space-between; align-items: center; font: calc(8px * var(--k)) var(--head); color: var(--gold); margin: 1px 0 5px; }
.member { display: flex; align-items: center; gap: 6px; padding: 3px 2px; border-radius: 4px; cursor: pointer; position: relative; }
.member:hover { background: rgba(255, 255, 255, 0.07); }
.member img { width: calc(30px * var(--k)); height: calc(30px * var(--k)); image-rendering: pixelated; border: 2px solid var(--win-border); border-radius: 4px; background: #0c1240; flex: none; }
.member .minfo { flex: 1; min-width: 0; font-size: calc(13px * var(--k)); display: flex; flex-direction: column; gap: 2px; }
.member .mline { display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; }
.member .stat .num { font-size: calc(11px * var(--k)); min-width: calc(40px * var(--k)); }
.member .where { color: var(--dim); font-size: calc(11px * var(--k)); }
.member .crown { color: var(--gold); }
.member .ok { color: #7aff8a; margin-left: auto; } .member .wait { color: var(--dim); margin-left: auto; }
.member.self { background: rgba(255, 227, 106, 0.08); }
.member.down { opacity: 0.5; filter: grayscale(1); }
.member .mally { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.member .mally img { width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-width: 1px; }
.member .mally .bar { width: calc(28px * var(--k)); flex: none; --rows: 2; }

/* bottom-left: message log with scrollback + chat */
#logbox { position: absolute; left: calc(12px + var(--sal)); bottom: calc(var(--abar-h) + 20px + var(--sab)); width: min(calc(440px * var(--k)), calc(100vw - 24px)); padding: 3px 10px 6px; display: flex; flex-direction: column; transition: opacity 0.3s; }
#logbox:not(.active):not(.expanded):not(:focus-within):not(:hover) { opacity: 0.78; }
#logbox.side { bottom: calc(10px + var(--sab)); width: min(calc(440px * var(--k)), calc((100vw - var(--abar-w)) / 2 - 30px)); }   /* wide screens: beside the action bar */
.loghead { display: flex; justify-content: flex-end; height: 14px; }
#log-toggle { border: 0; background: none; padding: 0 2px; cursor: pointer; font-size: calc(11px * var(--k)); color: var(--dim); }
#log-toggle:hover { color: var(--gold); }
#log { height: calc(5 * 1.3em); overflow: hidden; font-size: calc(14px * var(--k)); line-height: 1.3; }
#logbox.expanded #log { height: min(46vh, calc(380px * var(--k))); overflow-y: auto; }
#log div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: fadein 0.2s; }
#logbox.expanded #log div { white-space: normal; }
#log .chat b { color: #9be0ff; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } }
#chat { width: 100%; margin-top: 4px; padding: 4px 8px; font: calc(14px * var(--k)) var(--font); color: var(--ink); background: rgba(6, 10, 36, 0.6); border: 1px solid rgba(201, 210, 255, 0.35); border-radius: 5px; outline: none; opacity: 0.65; }
#chat:focus { opacity: 1; border-color: var(--gold); }

/* bottom-centre: action bar */
#actionbar { position: absolute; left: 50%; bottom: calc(10px + var(--sab)); transform: translateX(-50%); display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: calc(8px * var(--k)); padding: calc(9px * var(--k)) calc(10px * var(--k)) calc(6px * var(--k)); width: max-content; max-width: calc(100vw - 16px); }
#moves, #quick { display: flex; gap: calc(6px * var(--k)); padding-top: 3px; }
#quick { padding-left: calc(8px * var(--k)); border-left: 1px solid rgba(201, 210, 255, 0.25); }
.mslot, .aslot, .islot, #bagbtn { position: relative; border-radius: 6px; background: var(--slot); border: 2px solid var(--slot-line); cursor: pointer; user-select: none; transition: filter 0.1s; }
.mslot:hover, .aslot:hover, .islot:not(.empty):hover, #bagbtn:hover { filter: brightness(1.3); }
.mslot { width: calc(150px * var(--k)); height: calc(54px * var(--k)); padding: calc(5px * var(--k)) calc(7px * var(--k)) calc(5px * var(--k)) calc(8px * var(--k)); display: flex; flex-direction: column; justify-content: space-between;
  border-left: 5px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 30%, var(--slot)), var(--slot) 75%); }
.mtop { display: flex; align-items: center; gap: 5px; min-width: 0; padding-right: 8px; }
.mtop .ticon { --want: calc(18px * var(--k)); }
.mname { font-size: calc(13.5px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mbot { display: flex; align-items: center; gap: 6px; }
.mbot .bar.pp { --rows: 2; --trk: #161c4c; --trk0: #0a0c2a; }   /* PP: a 2-row pixel bar (the bars above) */
.bar.pp > i { --c1: #1c6aa8; --c2: #44aef0; --c3: #9ae2ff; --c4: #effeff; }
.bar.pp > i.low { --c1: #a04a08; --c2: #ec9028; --c3: #ffc860; --c4: #fff2c8; }
.bar.pp > i.out { --f: 0 !important; display: none; }
.ppt { font-size: calc(11px * var(--k)); min-width: calc(34px * var(--k)); text-align: right; line-height: 1; }
.kc { position: absolute; top: calc(-9px * var(--k)); right: -6px; min-width: calc(18px * var(--k)); padding: 2px 4px 1px; background: #0a0e30; border: 1px solid var(--gold); border-radius: 4px; font: calc(8px * var(--k)) var(--pixel); color: var(--gold); text-align: center; line-height: 1.2; z-index: 1; white-space: nowrap; }
.kc.wide { right: 50%; transform: translateX(50%); }
.veil { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(5, 8, 24, 0.66); border-radius: 4px; font: calc(8px * var(--k)) var(--pixel); color: var(--gold); text-align: center; padding: 2px; }
.mslot.nopp .veil, .mslot.blocked .veil, .aslot.blocked .veil { display: flex; }
.mslot.nopp { filter: grayscale(0.75); }
.mslot.blocked { border-color: #a08a2a; }
.mslot.locked { filter: grayscale(0.7); border-color: #b070a8; }   /* Encore / Torment: greyed, the turns left on the veil (client/js/moves2.js) */
.mslot.idle, .aslot.idle { opacity: 0.8; }
.mslot.none { cursor: default; opacity: 0.45; border-left-color: var(--slot-line); background: var(--slot); }
/* linked moves (client/js/linkshop.js): the set on one gold band, a link mark over the gap between its slots */
.mslot.lk, .mslot.lk-in { border-top-color: #f4ac00; border-bottom-color: #f4ac00; }
.mslot.lk { border-right-color: #f4ac00; }
.mslot .mlink { position: absolute; z-index: 2; top: calc(50% - 9px); right: calc(-3px * var(--k) - 17px); display: flex; padding: 2px; border-radius: 4px; background: #3a2a08; border: 1px solid #f4ac00; line-height: 0; pointer-events: none; }
.pressed { animation: pressed 0.18s; }
@keyframes pressed { 50% { transform: scale(0.92); filter: brightness(1.6); } }
.aslot { width: calc(66px * var(--k)); height: calc(54px * var(--k)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: linear-gradient(#2a3478, var(--slot)); }
.aslot .gi { --want: calc(22px * var(--k)); }
.aname { font-size: calc(12px * var(--k)); }
.islot { width: calc(46px * var(--k)); height: calc(54px * var(--k)); display: flex; align-items: center; justify-content: center; }
.islot .kc { right: auto; left: -6px; }
.islot .cnt { position: absolute; right: 3px; bottom: 1px; font-size: calc(12px * var(--k)); text-shadow: -1px 0 #000, 1px 0 #000, 0 1px #000, 0 -1px #000; }
.islot.empty { cursor: default; opacity: 0.4; border-style: dashed; }
#bagbtn { width: calc(52px * var(--k)); height: calc(54px * var(--k)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; margin-top: 3px; }
#bagbtn .gi { --want: calc(24px * var(--k)); }
#bagbtn.on { border-color: var(--gold); box-shadow: 0 0 8px rgba(255, 227, 106, 0.6); }
.bcount { font-size: calc(11px * var(--k)); line-height: 1; }

/* bag panel (B / I) */
#bagpanel { position: absolute; left: 50%; bottom: calc(var(--abar-h) + 20px + var(--sab)); transform: translateX(-50%); width: min(calc(600px * var(--k)), calc(100vw - 16px)); padding: 8px 12px 10px; z-index: 12; }
.bp-head { display: flex; align-items: center; gap: 8px; font: calc(9px * var(--k)) var(--head); color: var(--gold); margin-bottom: 12px; }
.bp-x, .set-x { margin-left: auto; width: 24px; height: 24px; padding: 0; border-radius: 5px; border: 1px solid var(--win-border); background: var(--slot); color: var(--ink); cursor: pointer; font: 9px var(--pixel); }
.bp-x:hover, .set-x:hover { border-color: var(--gold); color: var(--gold); }
.bp-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px 8px; }
.bp-grid .islot { width: auto; height: calc(64px * var(--k)); flex-direction: column; gap: 3px; padding-top: 4px; }
.bp-grid .iname { font-size: calc(11px * var(--k)); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 3px; }
.bp-hint { margin-top: 10px; font-size: calc(12px * var(--k)); color: var(--dim); text-align: center; }
@media (max-width: 640px) { .bp-grid { grid-template-columns: repeat(4, 1fr); } }
/* The bag grows with the team rank (20 to 48 slots, shared/data.js RANKS): up to 5 rows show, the grid scrolls the rest
   (client/js/gridview.js keeps the cursor in view; it sets --gv-h / --gv-gap). */
#bagpanel .bp-grid { max-height: min(calc(5 * var(--gv-h, 64px) + 4.5 * var(--gv-gap, 8px) + 8px), calc(var(--vh) - var(--sat) - var(--sab) - var(--abar-h) - 220px * var(--k))); }

/* prompt, help, settings, tooltip */
#prompt { position: absolute; left: 50%; bottom: calc(var(--abar-h) + 22px + var(--sab)); transform: translateX(-50%); padding: 6px 16px; font-size: calc(16px * var(--k)); white-space: nowrap; }
#help { position: absolute; right: calc(12px + var(--sar)); bottom: calc(var(--abar-h) + 20px + var(--sab)); max-width: min(560px, calc(100vw - 24px)); padding: 10px 14px; font-size: calc(14px * var(--k)); line-height: 1.75; z-index: 15; }
#help > b { font-family: var(--head); font-size: calc(10px * var(--k)); color: var(--gold); margin-right: 8px; }
#help .hl { color: var(--dim); font-size: calc(12px * var(--k)); }
#help .em { font-family: inherit; color: var(--gold); font-weight: 600; }
#settings { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(calc(920px * var(--k)), 96vw); max-height: calc(var(--vh) - 16px - var(--sat) - var(--sab)); overflow: auto; overscroll-behavior: contain; touch-action: pan-y; padding: calc(12px * var(--k)) calc(18px * var(--k)) calc(14px * var(--k)); z-index: 45; font-size: calc(14px * var(--k)); animation: popc 0.12s ease-out; }
@keyframes popc { from { transform: translate(-50%, -50%) scale(0.97); } }
.set-head { display: flex; align-items: center; font: calc(11px * var(--k)) var(--head); color: var(--gold); margin-bottom: 10px; }
.set-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.set-l { width: calc(120px * var(--k)); color: #cfd6ff; }
.sbtn { font: calc(14px * var(--k)) var(--font); padding: 4px 12px; border-radius: 6px; border: 2px solid var(--slot-line); background: var(--slot); color: var(--ink); cursor: pointer; }
.sbtn:hover { border-color: var(--gold); }
.sbtn.on { background: linear-gradient(#ffe88a, #e8b830); color: #141832; border-color: #fff; }
.set-sub { margin: 12px 0 6px; color: var(--dim); font-size: calc(13px * var(--k)); min-height: 18px; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(205px * var(--k)), 1fr)); gap: 4px 20px; }
.set-gt { font: calc(8px * var(--k)) var(--head); color: var(--gold); margin: 8px 0 4px; border-bottom: 1px solid rgba(201, 210, 255, 0.25); padding-bottom: 4px; }
.set-k { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 1px 0; font-size: calc(13px * var(--k)); white-space: nowrap; }
.kcs { display: flex; gap: 3px; }
.keycap { min-width: calc(26px * var(--k)); padding: 3px 5px 2px; border-radius: 4px; border: 1px solid var(--gold); background: #0a0e30; color: var(--gold); font: calc(8px * var(--k)) var(--pixel); cursor: pointer; }
.keycap:hover { background: #1a2260; }
.keycap.add { border-style: dashed; border-color: var(--slot-line); color: #6a74a8; }
.keycap.cap { background: var(--gold); color: #141832; animation: blink 0.6s steps(2) infinite; }
.set-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; font-size: calc(12px * var(--k)); color: #6a74a8; flex-wrap: wrap; }
.set-foot > span { display: flex; gap: 6px; margin-left: auto; }
#tooltip { position: fixed; z-index: 60; max-width: min(calc(290px * var(--k)), calc(100vw - 16px)); padding: calc(8px * var(--k)) calc(11px * var(--k)); font-size: calc(14px * var(--k)); }
.tt-head { display: flex; align-items: center; gap: 6px; font-size: calc(15px * var(--k)); margin-bottom: 4px; }
.tt-head .gi { --want: 18px; }
.tt-type { margin-left: auto; padding: 0 8px; border-radius: 9px; background: var(--tc); color: #141832; font-size: calc(12px * var(--k)); line-height: 1.5; }
.tt-line { line-height: 1.3; margin-top: 3px; color: #cfd6ff; }
.tt-key { margin-top: 6px; font-size: calc(12px * var(--k)); color: var(--dim); }

/* narrow screens (~800 px): smaller columns, the action bar wraps into two rows */
@media (max-width: 900px) {
  #hud-right { width: calc(176px * var(--k)); }
  #minimap:not(.big) { max-width: calc(156px * var(--k) * var(--mm-f)); }
  #moves { width: 100%; justify-content: center; }
  .mslot { width: min(calc(150px * var(--k)), calc((100vw - 150px) / 4)); }
  #quick { border-left: 0; padding-left: 0; }
  #logbox { width: min(calc(360px * var(--k)), calc(100vw - 24px)); }
  #log { height: calc(3 * 1.3em); }
  #hud-top { max-width: calc(100vw - 2 * (246px * var(--k)) - 24px); min-width: 0; }
  #zonebar { font-size: 13px; padding: 3px 8px; }
}

/* ---------- ROM UI: original window frames (9-slice) + PMD font canvases ---------- */
.pmdtext { image-rendering: pixelated; display: inline-block; vertical-align: middle; }
body.rom-ui .window {
  border: 16px solid transparent; border-radius: 0; box-shadow: none; background: none;
  border-image: url(/assets/rom/ui/window_normal_9slice_blue.png) 8 fill / 16px stretch; image-rendering: pixelated;
}
body.rom-ui #hud .window { border-width: 12px; border-image-width: 12px; border-image-source: url(/assets/rom/ui/window_normal_9slice_dungeon.png); }
body.rom-ui .card, body.rom-ui .scard, body.rom-ui #party, body.rom-ui #zonebar, body.rom-ui #logbox, body.rom-ui #tooltip { padding: 0 2px; }
body.rom-ui #actionbar, body.rom-ui #bagpanel { padding: 4px 4px 2px; }
body.rom-ui .mslot, body.rom-ui .aslot, body.rom-ui .islot, body.rom-ui #bagbtn { border-radius: 0; border-color: #e8e8f8; background: #182058; }
body.rom-ui .mslot { border-left: 5px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 25%, #182058), #182058 75%); }
body.rom-ui .kc, body.rom-ui .chip, body.rom-ui .lvtag, body.rom-ui .keycap { border-radius: 0; }
body.rom-ui .pmd-menu { padding: 2px 6px 2px 0; }
body.rom-ui #dialog { padding: 2px 6px; }
body.rom-ui .notice { padding: 0 4px; }
body.rom-ui #prompt, body.rom-ui #help, body.rom-ui #sos, body.rom-ui #settings { padding: 2px 8px; }
/* the ROM's top-bar gauge (rom/ui/hud_topbar_sample_*.png): white rules above and below, flat green over salmon */
body.rom-ui .bar { border-width: var(--bp) 0; border-color: #f8f8f8; background: #ff875f; box-shadow: none; }
body.rom-ui .bar.thin, body.rom-ui .bar.pp, body.rom-ui .bar.gold, body.rom-ui .bar.blue { background: #202848; }
body.rom-ui .bar > i { background: #5fff5f; box-shadow: none; }
body.rom-ui .bar > i::before { content: none; }
body.rom-ui .bar > i.mid { background: #e8c838; } body.rom-ui .bar > i.low { background: #e85838; }
body.rom-ui .bar.xp > i, body.rom-ui .bar.blue > i, body.rom-ui .bar.pp > i { background: #58a8f8; } body.rom-ui .bar.belly > i { background: #f8a848; } body.rom-ui .bar.belly > i.low, body.rom-ui .bar.pp > i.low { background: #e85838; }
body.rom-ui .bar.gold > i { background: #f8d038; }
body.rom-ui .mitem.sel { background: none; }
body.rom-ui .mitem .cursor { color: transparent; font-size: 12px; }
body.rom-ui .mitem.sel .cursor { color: #fff; }
body.rom-ui #title-card { gap: 26px; }

/* ---------- Kecleon brothers shop (client/js/shop.js): big centred window, list + detail; zoomed by --wk (windows.css) ---------- */
#shop { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 30, 0.55); touch-action: manipulation; }
.shop-win { zoom: var(--wk); --pxz: var(--wk); width: min(1120px, calc(var(--zvw) * 0.94)); height: min(760px, calc(var(--zvh) * 0.88)); display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; box-sizing: border-box; animation: pop 0.14s ease-out; font-size: 17px; user-select: none; }
.shop-head { display: flex; align-items: center; gap: 12px; }
.shop-portrait { width: 72px; height: 72px; image-rendering: pixelated; border: 3px solid var(--win-border); border-radius: 4px; background: #0c1240; flex: none; }
.shop-say { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; background: rgba(8, 14, 60, 0.55); border: 1px solid rgba(201, 210, 255, 0.35); border-radius: 6px; padding: 8px 12px; line-height: 1.3; }
.shop-say b { font-family: var(--head); font-size: 10px; color: var(--gold); }
.shop-say.ok span { color: #9be37a; } .shop-say.bad span { color: #ff9a7a; }
.shop-money { display: flex; flex-direction: column; align-items: flex-end; flex: none; padding: 4px 6px; }
.shop-money span { font-size: 13px; color: var(--dim); } .shop-money b { font-family: var(--head); font-size: 13px; color: var(--gold); margin: 3px 0; } .shop-money small { color: var(--dim); font-size: 13px; }
.shop-x { width: 44px; height: 44px; flex: none; align-self: flex-start; font-size: 18px; border-radius: 6px; border: 2px solid var(--win-border); background: #0c1240; color: #fff; cursor: pointer; }
.shop-modes, .shop-tabs { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.shop-modes .grow { flex: 1; }
.shop-btn { min-height: 44px; min-width: 44px; padding: 0 14px; font: 16px var(--font); color: var(--ink); background: #10196a; border: 2px solid rgba(201, 210, 255, 0.55); border-radius: 6px; cursor: pointer; }
.shop-btn:hover { border-color: #fff; }
.shop-btn.on { background: linear-gradient(#ffd75a, #e8a52a); color: #2a1600; border-color: #fff3c0; }
.shop-btn.pick { color: var(--gold); } .shop-btn.pick.on { color: #2a1600; }
.shop-btn.switch { background: #3a1a6a; border-color: #c8a0ff; }
.shop-btn.leave { background: #4a1630; border-color: #ff9ab8; }
.shop-btn.warn { background: #4a2a10; border-color: #ffb84a; }
.shop-btn.ok { background: linear-gradient(#5ac85a, #2e8a3a); border-color: #c8ffc0; color: #fff; font-weight: 600; }
.shop-btn.dis { filter: grayscale(0.8) brightness(0.7); cursor: not-allowed; }
.shop-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.shop-left { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.shop-tabs { flex-wrap: wrap; }
.shop-tabs .shop-btn { flex: none; font-size: 15px; padding: 0 12px; }
.shop-note { color: var(--dim); font-size: 14px; margin-right: auto; }
.shop-list { flex: 1; min-height: 0; overflow-y: auto; border: 1px solid rgba(201, 210, 255, 0.3); border-radius: 6px; background: rgba(6, 10, 44, 0.45); overscroll-behavior: contain; }
.shop-row { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 10px 4px 4px; border-bottom: 1px solid rgba(201, 210, 255, 0.12); cursor: pointer; }
.shop-row .cur { width: 14px; color: transparent; font-size: 12px; }
.shop-row .cur .pxi { visibility: hidden; }
.shop-row.sel .cur .pxi { visibility: visible; }
.shop-row.sel { background: linear-gradient(90deg, rgba(255, 227, 106, 0.28), rgba(255, 227, 106, 0.05)); }
.shop-row.sel .cur { color: var(--gold); }
.shop-row.off .nm, .shop-row.off .pr { opacity: 0.55; }
.shop-row .nm { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shop-row .star { color: var(--gold); font-style: normal; margin-left: 6px; }
.shop-row .own { color: var(--dim); font-family: var(--pixel); font-size: 8px; }
#shop .num { font-weight: 600; letter-spacing: 0; color: var(--gold); }   /* .num: client/fonts.css */
#shop .shop-btn.ok .num { color: #fff; }
.shop-row .pr { font-family: var(--head); font-size: 10px; color: var(--gold); min-width: 74px; text-align: right; }
.shop-empty { padding: 18px; color: var(--dim); text-align: center; }
.shop-detail { min-height: 0; overflow-y: auto; border: 1px solid rgba(201, 210, 255, 0.3); border-radius: 6px; background: rgba(6, 10, 44, 0.45); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.sd-top { display: flex; gap: 14px; align-items: center; }
.sd-top .sd-ico { display: inline-flex; flex: none; border: 2px solid rgba(201, 210, 255, 0.4); border-radius: 6px; background-color: #0c1240; }
.sd-name { font-family: var(--head); font-size: 14px; color: #fff; line-height: 1.4; }
.sd-cat { color: var(--dim); font-size: 15px; margin: 2px 0 6px; }
.sd-prices { display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; color: var(--dim); }
.sd-prices b { color: var(--gold); font-weight: 600; }
.sd-desc { margin: 0; font-size: 17px; line-height: 1.35; }
.sd-note { margin: 0; color: var(--dim); font-size: 14px; line-height: 1.3; }
.sd-note.pick { color: var(--gold); }
.sd-rom { font-size: 14px; color: #cfd6ff; line-height: 1.35; border-left: 3px solid rgba(201, 210, 255, 0.4); padding: 2px 0 2px 10px; white-space: pre-line; }
.sd-rom span { display: block; font-family: var(--head); font-size: 8px; color: var(--dim); margin-bottom: 4px; }
.sd-move { border: 1px solid rgba(201, 210, 255, 0.25); border-radius: 6px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: rgba(20, 30, 100, 0.35); }
.sd-mhead { display: flex; align-items: center; gap: 8px; }
.sd-mhead b { font-size: 17px; }
.sd-type { font-family: var(--pixel); font-size: 8px; color: #141832; background: var(--tc); border-radius: 4px; padding: 4px 6px; }
.sd-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 15px; color: var(--dim); }
.sd-stats b { color: #fff; font-weight: 600; }
.sd-mdesc { margin: 0; font-size: 15px; line-height: 1.3; }
.sd-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-who > span:first-child:not(.sd-mon) { color: var(--dim); font-size: 13px; width: 100%; }
.sd-mon { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 3px; border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(201, 210, 255, 0.25); font-size: 14px; }
.sd-mon img { width: 28px; height: 28px; border-radius: 50%; image-rendering: pixelated; background: #0c1240; }
.sd-mon em { font-style: normal; font-size: 12px; color: var(--dim); }
.sd-mon.yes { border-color: #8fe08f; } .sd-mon.yes em { color: #9be37a; }
.sd-mon.no { opacity: 0.6; } .sd-mon.no em { color: #ff9a7a; }
.sd-actions { position: sticky; bottom: -12px; margin: auto -14px -12px; padding: 8px 14px 10px; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(201, 210, 255, 0.2); background: linear-gradient(rgba(12, 20, 84, 0.92), #0c1454); }   /* the Buy bar stays in reach while a long description scrolls */
.sd-qty { display: flex; align-items: center; gap: 10px; }
.sd-qty b { font-family: var(--head); font-size: 14px; min-width: 30px; text-align: center; }
.sd-qty small { color: var(--dim); font-size: 14px; }
.sd-buy, .sd-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sd-confirm span { flex: 1 1 100%; font-size: 16px; }
.sd-confirm b { color: var(--gold); }
.sd-warn { color: #ff9a7a; font-size: 15px; }
@media (max-width: 760px), (max-height: 520px) {
  .shop-win { width: var(--zvw); height: var(--zvh); max-height: var(--zvh); border-radius: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); font-size: 16px; }
  .shop-portrait { width: 48px; height: 48px; }
  .shop-head { flex-wrap: wrap; gap: 8px; }
  .shop-say { order: 3; flex: 1 1 100%; padding: 6px 8px; font-size: 14px; }
  .shop-money { margin-left: auto; }
  .shop-money b { font-size: 11px; }
  .shop-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(150px, 40%) minmax(0, 1fr); gap: 8px; }
  .shop-modes .shop-btn { padding: 0 10px; font-size: 15px; }
  .shop-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .shop-tabs::-webkit-scrollbar { height: 6px; }
  .sd-name { font-size: 12px; }
}
@media (max-height: 520px) { .shop-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; } }
/* #minimap.flash (an orb revealed something): minimap.js draws the frame gold */