:root {
  --ink: #15111f;
  --panel: rgba(18, 14, 30, 0.88);
  --gold: #ffd23f;
  --hp-hi: #3ccf4e;
  --hp-mid: #f2c12e;
  --hp-lo: #e8433a;
  --font: "Lilita One", "Arial Black", "Segoe UI Black", "Helvetica Neue", Arial, system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: #0d0b14 radial-gradient(circle at 50% 30%, #231c36 0%, #0d0b14 70%);
  color: #fff; font-family: var(--font);
  user-select: none; -webkit-user-select: none; touch-action: none;
}

/* the game is a 16:9 box; sizes use cqh (1% of its height) */
#game {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(100vw, calc(100dvh * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden; container-type: size;
  background: #000;
  box-shadow: 0 0 60px rgba(0,0,0,.8);
}

/* the canvas is drawn at about the screen's real resolution (see fitScreen in main.js), so a
   smooth scale for the last few percent keeps every pixel the same size */
#view {
  position: absolute; inset: 0; width: 100%; height: 100%;
}

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }

.hud-side { position: absolute; top: 1cqh; left: 1cqh; width: 44cqh; display: grid;
  grid-template-columns: 9.5cqh 1fr; grid-template-rows: 10.5cqh 3.4cqh; column-gap: 1.2cqh; row-gap: 0.6cqh;
  background: linear-gradient(90deg, rgba(14,11,24,.7), rgba(14,11,24,.45) 75%, rgba(14,11,24,0)); padding: 0.8cqh; border-radius: 1.4cqh; }

.portrait { border: 0.5cqh solid #d8a23a; border-radius: 1.2cqh; overflow: hidden;
  background: linear-gradient(160deg, #f4e4a0, #c9a85a); }
.portrait canvas { width: 100%; height: 100%; image-rendering: pixelated; display: block; }

.info { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.mon-name { font-size: 3.6cqh; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  color: #fff; -webkit-text-stroke: 0.5cqh var(--ink); paint-order: stroke fill;
  text-shadow: 0 0.5cqh 0 var(--ink); overflow: hidden; max-width: 100%; }
.tags { display: flex; gap: 0.6cqh; }
.tag { font-size: 1.8cqh; padding: 0.2cqh 1cqh; border-radius: 1cqh; color: #fff;
  -webkit-text-stroke: 0.25cqh rgba(0,0,0,.55); paint-order: stroke fill;
  border: 0.35cqh solid rgba(0,0,0,.45); white-space: nowrap; }
.tag.item { background: #e5c14a; color: #3b2a07; -webkit-text-stroke: 0; }
.tag.status { color: #fff; }
.tag.status.par { background: #d6b21e; }
.tag.status.brn { background: #e0582a; }
.tag.status.frz { background: #4fb6d8; }
.tag.status.psn { background: #9a3ab8; }

.hpbar { position: relative; align-self: stretch; height: 3.4cqh; border: 0.5cqh solid var(--ink); border-radius: 1cqh;
  background: #2a2638; overflow: hidden; }
.hpbar .ghost, .hpbar .fill { position: absolute; top: 0; bottom: 0; left: 0; }
.hpbar .ghost { background: #f4f1e8; }
.hpbar .fill { background: var(--hp-hi); box-shadow: inset 0 -0.8cqh 0 rgba(0,0,0,.18); }
.hpnum { position: absolute; top: 50%; transform: translateY(-50%); left: 1cqh; font-size: 2.4cqh;
  -webkit-text-stroke: 0.45cqh var(--ink); paint-order: stroke fill; color: #fff; line-height: 1; }

.mon-name .lv { font-size: 2.6cqh; color: #ffe066; margin-left: 1cqh; }
.xpbar { height: 1cqh; background: #2a2638; border-radius: 0.5cqh; overflow: hidden; margin-top: 0.4cqh; }
.xpbar div { height: 100%; background: #5aa0ff; }
.card .c-lv { position: absolute; top: 1cqh; right: 1.2cqh; font-size: 2.4cqh; color: #ffe066; -webkit-text-stroke: 0.3cqh var(--ink); paint-order: stroke fill; }
.balls { grid-column: 1 / 3; display: flex; align-items: center; gap: 0.6cqh; }
.ball { width: 3.2cqh; height: 3.2cqh; border-radius: 50%; border: 0.4cqh solid var(--ink);
  background: linear-gradient(#e8433a 0 44%, var(--ink) 44% 56%, #f6f2ee 56%); position: relative; }
.ball::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1cqh; height: 1cqh;
  transform: translate(-50%,-50%); border-radius: 50%; background: #fff; border: 0.4cqh solid var(--ink); }
.ball.active { box-shadow: 0 0 0 0.6cqh var(--gold); }
.ball.out { background: #3a3646; opacity: .55; }
.ball.out::after { background: #3a3646; }

#relics { position: absolute; left: 1.4cqh; top: 17.5cqh; display: flex; gap: 0.8cqh; flex-wrap: wrap; max-width: 44cqh; }
#relics canvas { width: 4.6cqh; height: 4.6cqh; image-rendering: pixelated; filter: drop-shadow(0 0.3cqh 0 rgba(0,0,0,.5)); }
.detail .d-desc { font: 700 3.2cqh/1.35 system-ui, sans-serif; margin: 0.8cqh 0; }
#title-stats { font: 700 3cqh system-ui, sans-serif; opacity: .8; min-height: 3cqh; }
#boss-bar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 3cqh; width: 70cqh; text-align: center; }
.boss-name { font-size: 4cqh; color: #ffe066; -webkit-text-stroke: 0.5cqh #3a1d05; paint-order: stroke fill; margin-bottom: 0.6cqh; }
#boss-bar .hpbar { height: 3.4cqh; }
#boss-bar .fill { background: #e8433a; }

#floor-label { position: absolute; right: 2cqh; top: 1.2cqh; font-size: 3cqh; opacity: .85;
  -webkit-text-stroke: 0.4cqh var(--ink); paint-order: stroke fill; display: none; }
#btn-pause { position: absolute; left: 50%; transform: translateX(-50%); top: 1.5cqh; pointer-events: auto;
  width: 7cqh; height: 7cqh; border-radius: 50%; border: 0.4cqh solid rgba(255,255,255,.25); background: rgba(0,0,0,.4);
  color: #fff; font: 900 3cqh var(--font); cursor: pointer; display: grid; place-items: center; padding: 0; }
#btn-pause svg { width: 4.4cqh; height: 4.4cqh; }

/* ---------- Callouts, banners, fades ---------- */
#callouts { position: absolute; inset: 0; pointer-events: none; }
.callout { position: absolute; top: 24cqh; font-size: 4.6cqh; font-style: italic; color: var(--ink);
  background: #fffbea; padding: 0.8cqh 2.6cqh; border-radius: 4cqh; border: 0.7cqh solid #d8a23a;
  box-shadow: 0 0.6cqh 0 rgba(0,0,0,.4); white-space: nowrap; }
.callout.left { left: -1cqh; animation: slideL 1.3s ease forwards; }
.callout.right { right: -1cqh; animation: slideR 1.3s ease forwards; }
@keyframes slideL { 0% { transform: translateX(-110%); } 12%, 82% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
@keyframes slideR { 0% { transform: translateX(110%); } 12%, 82% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }

#banner { position: absolute; left: 0; right: 0; top: 36cqh; text-align: center; pointer-events: none;
  font-size: 11cqh; font-style: italic; color: #ffe066; -webkit-text-stroke: 1.2cqh #3a1d05; paint-order: stroke fill;
  text-shadow: 0 1.2cqh 0 #3a1d05; white-space: nowrap; opacity: 0; }
#banner small { display: block; font-size: 5cqh; margin-top: 1cqh; -webkit-text-stroke: 0.8cqh #3a1d05; text-shadow: 0 0.6cqh 0 #3a1d05; color: #fff6d8; }
#banner.show { animation: bannerIn 1.8s ease forwards; }
@keyframes bannerIn { 0% { transform: translateX(100%) skewX(-8deg); opacity: 1; }
  15% { transform: translateX(0) skewX(-8deg); opacity: 1; }
  80% { transform: translateX(-4%) skewX(-8deg); opacity: 1; }
  100% { transform: translateX(-110%) skewX(-8deg); opacity: 0; } }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .18s; }
#fade.on { opacity: 1; }

/* ---------- Controls ---------- */
#controls { position: absolute; inset: 0; pointer-events: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 70%; pointer-events: auto; }
#stick { position: absolute; width: 26cqh; height: 26cqh; border-radius: 50%; left: 6cqh; bottom: 6cqh;
  background: rgba(255,255,255,.08); border: 0.6cqh solid rgba(255,255,255,.25); }
#knob { position: absolute; left: 50%; top: 50%; width: 11cqh; height: 11cqh; margin: -5.5cqh 0 0 -5.5cqh;
  border-radius: 50%; background: rgba(255,255,255,.35); border: 0.6cqh solid rgba(255,255,255,.6); }
body.no-touch #stick-zone { display: none; }

#move-buttons { position: absolute; right: 2cqh; bottom: 3cqh; width: 50cqh; display: grid;
  grid-template-columns: 1fr 1fr; gap: 1.6cqh; pointer-events: auto; transition: opacity .2s; }
#move-buttons.calm { opacity: .4; }
.mbtn { position: relative; height: 12cqh; letter-spacing: .02em; border-radius: 2.4cqh; border: 0.7cqh solid var(--ink);
  color: #fff; font: 900 3cqh/1.05 var(--font); text-align: center; overflow: hidden; cursor: pointer;
  -webkit-text-stroke: 0.35cqh rgba(0,0,0,.6); paint-order: stroke fill; padding: 0 1cqh; opacity: .9;
  box-shadow: inset 0 -1.2cqh 0 rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.mbtn .key { position: absolute; top: 0.6cqh; left: 1cqh; font-size: 2.2cqh; opacity: .8; z-index: 1; }
body:not(.no-touch) .mbtn .key { display: none; }
.mbtn .cd { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(10,8,18,.6); height: 0; z-index: 0; }
.mbtn.pressed { transform: translateY(0.4cqh); filter: brightness(1.2); }
.mbtn span.nm { position: relative; z-index: 1; }

/* PC: moves laid out like the mouse. left column = left button, right column = right button, bottom row = with Shift */
body.no-touch #move-buttons { width: 34cqh; gap: 0.8cqh; bottom: 1.5cqh; right: 1.5cqh; }
body.no-touch .mbtn { height: 7.6cqh; padding-top: 2cqh; opacity: .7; font-size: 2.3cqh; border-width: 0.5cqh; }
body.no-touch .mbtn:nth-child(1) { border-top-left-radius: 8cqh; }
body.no-touch .mbtn:nth-child(2) { border-top-right-radius: 8cqh; }
body.no-touch .mbtn:nth-child(3) { border-bottom-left-radius: 6cqh; }
body.no-touch .mbtn:nth-child(4) { border-bottom-right-radius: 6cqh; }
body.no-touch .mbtn .key { top: 0.8cqh; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5cqh; opacity: .9; }
body.no-touch .mbtn .key b { font-size: 2.4cqh; line-height: 1; }
body.no-touch .mouse-ico { height: 2.6cqh; }
.mouse-ico { height: 3.6cqh; width: auto; display: block; }

/* ---------- Swap ---------- */
#btn-swap { position: absolute; right: 2cqh; bottom: 31cqh; pointer-events: auto; overflow: hidden;
  font: 900 3.4cqh var(--font); color: #fff; padding: 1.6cqh 4cqh; border-radius: 3cqh; cursor: pointer;
  border: 0.6cqh solid var(--ink); background: linear-gradient(#5a6fd8, #3a4aa8); box-shadow: inset 0 -0.8cqh 0 rgba(0,0,0,.25);
  -webkit-text-stroke: 0.3cqh rgba(0,0,0,.5); paint-order: stroke fill; }
body.no-touch #btn-swap { bottom: 19cqh; right: 1.5cqh; font-size: 2.6cqh; padding: 1cqh 3cqh; }
#btn-swap.off { display: none; }
#btn-swap .nm, #btn-swap .key { position: relative; z-index: 1; }
#btn-swap .key { margin-left: 1.4cqh; font-size: 2.4cqh; opacity: .75; }
body:not(.no-touch) #btn-swap .key { display: none; }
#btn-swap .cd { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(10,8,18,.6); }
#btn-swap.open { filter: brightness(1.25); }
#swap-tray { position: absolute; right: 2cqh; bottom: 42cqh; pointer-events: auto; z-index: 3;
  display: flex; gap: 1.6cqh; justify-content: flex-end; flex-wrap: wrap; max-width: 90cqh; }
body.no-touch #swap-tray { bottom: 27cqh; }
.swap-chip { width: 14cqh; background: var(--panel); border: 0.6cqh solid #5a6fd8; border-radius: 2cqh; padding: 0.8cqh;
  cursor: pointer; text-align: center; }
.swap-chip canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; }
.swap-chip .mini { height: 1.2cqh; background: #2a2638; border-radius: 1cqh; overflow: hidden; margin-top: 0.6cqh; }
.swap-chip .mini div { height: 100%; }
.swap-chip.off { opacity: .35; pointer-events: none; border-color: #3a3358; }

/* ---------- Screens ---------- */
.screen { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center;
  gap: 2.6cqh; padding: 5cqh 8cqh; background: rgba(10, 8, 18, .55); text-align: center; overflow-y: auto; justify-content: safe center; }
.screen.dim { background: rgba(10, 8, 18, .8); }
.screen > * { flex-shrink: 0; }
.screen h2 { margin: 0; font-size: 7cqh; color: #ffe066; -webkit-text-stroke: 0.8cqh #3a1d05; paint-order: stroke fill; }
.row { display: flex; gap: 2.4cqh; align-items: center; justify-content: center; }
.hint { font: 700 3.2cqh system-ui, sans-serif; opacity: .75; }

.logo { line-height: .9; margin-bottom: 4cqh; transform: skewX(-8deg); }
.logo div { -webkit-text-stroke: 1.4cqh #2a1205; paint-order: stroke fill; text-shadow: 0 1.6cqh 0 #2a1205; }
.logo-top { font-size: 11cqh; color: #ff6a3a; }
.logo-mid { font-size: 19cqh; color: #ffe066; }

.big-btn { font: 900 6cqh var(--font); padding: 2.2cqh 8cqh; border-radius: 3cqh; border: 0.8cqh solid var(--ink);
  background: linear-gradient(#ff7a3a, #e2401a); color: #fff; cursor: pointer; -webkit-text-stroke: 0.5cqh var(--ink);
  paint-order: stroke fill; box-shadow: 0 1.2cqh 0 var(--ink); }
.big-btn:active { transform: translateY(0.8cqh); box-shadow: 0 0.4cqh 0 var(--ink); }
.big-btn.alt { background: linear-gradient(#7a5aff, #4a2ad8); }
.big-btn:disabled { filter: grayscale(1) brightness(.6); }
.small-btn { font: 900 3.8cqh var(--font); padding: 1.6cqh 5cqh; border-radius: 2.4cqh; border: 0.6cqh solid var(--ink);
  background: #3a3358; color: #fff; cursor: pointer; }
.small-btn:disabled { opacity: .4; }
a.small-btn { text-decoration: none; display: inline-block; }

.help { text-align: left; font: 700 3.3cqh/1.45 system-ui, sans-serif; padding-left: 5cqh; margin: 0; max-width: 150cqh; }
.help li { margin-bottom: 1.2cqh; }
kbd { background: #2b2540; border: 0.3cqh solid #555; border-bottom-width: 0.8cqh; border-radius: 1cqh; padding: 0 1cqh; font: 900 3cqh var(--font); }

/* monster detail panel (starter, recruit, party) */
.detail { width: 100%; max-width: 130cqh; min-height: 24cqh; background: var(--panel); border-radius: 2.4cqh; padding: 2cqh;
  display: flex; gap: 2.4cqh; align-items: center; text-align: left; border: 0.4cqh solid rgba(255,255,255,.1); }
.detail canvas { width: 20cqh; height: 20cqh; image-rendering: pixelated; flex: none; }
.detail .d-name { font-size: 5cqh; }
.detail .d-stats { font: 700 3cqh system-ui, sans-serif; opacity: .85; margin: 0.8cqh 0; }
.detail .d-moves { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqh; }
.detail .d-move { font-size: 2.8cqh; padding: 0.6cqh 1.2cqh; border-radius: 1cqh; -webkit-text-stroke: 0.25cqh rgba(0,0,0,.55); paint-order: stroke fill; }
/* moves editor (party screen, new-move offer) */
.mv-ed { display: flex; flex-direction: column; gap: 0.8cqh; margin-top: 0.6cqh; }
.mv-head { font-size: 3cqh; color: #ffe066; }
.mv-head span { font: 700 2.3cqh system-ui, sans-serif; color: #fff; opacity: .7; margin-left: 1cqh; }
.mv-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8cqh; }
.mv-known { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8cqh; }
.mv { position: relative; font: 400 2.7cqh var(--font); color: #fff; text-align: left; cursor: pointer; padding: 0.6cqh 1.2cqh; border-radius: 1cqh;
  border: 0.4cqh solid rgba(0,0,0,.35); -webkit-text-stroke: 0.25cqh rgba(0,0,0,.55); paint-order: stroke fill; }
.mv i { display: block; font: 700 1.9cqh system-ui, sans-serif; font-style: normal; -webkit-text-stroke: 0; opacity: .9; }
.mv small { display: block; font: 700 1.9cqh system-ui, sans-serif; -webkit-text-stroke: 0; opacity: .85; }
.mv.sel { outline: 0.6cqh solid var(--gold); }
.mv.new::after { content: "NEW"; position: absolute; top: -1.2cqh; right: -0.6cqh; font: 400 1.8cqh var(--font); background: var(--gold); color: var(--ink);
  padding: 0 0.8cqh; border-radius: 0.8cqh; -webkit-text-stroke: 0; }
.mv.big { font-size: 3.6cqh; cursor: default; }
.mv-new { display: flex; }

/* monster cards */
#starter-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqh; max-width: 150cqh; }
#starter-list .card { width: 22cqh; }
.party-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqh; }
.party-list .card { width: 22cqh; }
.card { position: relative; background: #241e38; border-radius: 2.4cqh; padding: 1.4cqh; border: 0.6cqh solid #3a3358; cursor: pointer; }
.card canvas { width: 100%; aspect-ratio: 1; image-rendering: pixelated; display: block; background: radial-gradient(circle at 50% 60%, rgba(255,255,255,.12), transparent 70%); }
.card .c-name { font-size: 3.2cqh; margin-top: 0.6cqh; }
.card .c-types { display: flex; gap: 0.6cqh; justify-content: center; margin-top: 0.6cqh; }
.card .c-types .tag { font-size: 2.1cqh; }
.card .c-hp { font: 900 2.8cqh var(--font); margin-top: 0.6cqh; }
.card.sel { border-color: var(--gold); background: #3b3020; }
.card.lead::after { content: "OUT"; position: absolute; top: 1cqh; left: 1cqh; font-size: 2.2cqh; background: #5a6fd8;
  padding: 0.2cqh 1cqh; border-radius: 1cqh; border: 0.3cqh solid var(--ink); }
.card.out { opacity: .55; }
#pick-list .card.done { opacity: .35; pointer-events: none; }
#recruit-full { display: flex; flex-direction: column; gap: 1.6cqh; align-items: center; }

/* settings */
#screen-settings { gap: 2cqh; padding-top: 3cqh; padding-bottom: 3cqh; }
#screen-settings .big-btn { padding-top: 1.6cqh; padding-bottom: 1.6cqh; }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqh; width: 100%; max-width: 150cqh; text-align: left; }
.set-col { display: flex; flex-direction: column; gap: 1.2cqh; align-items: stretch; background: var(--panel);
  border-radius: 2.4cqh; padding: 2cqh 3cqh; border: 0.4cqh solid rgba(255,255,255,.1); }
.set-col h3 { margin: 0.6cqh 0 0; font-size: 4cqh; color: #ffe066; font-weight: 400; }
.set-col .hint { font-size: 2.6cqh; }
.set-col kbd { font-size: 2.4cqh; }
.set-row { display: grid; grid-template-columns: 18cqh 1fr 8cqh; align-items: center; gap: 2cqh; font-size: 3.6cqh; }
.set-row b { font: 900 3.2cqh var(--font); text-align: right; font-weight: 400; }
.set-row input[type=range] { width: 100%; accent-color: var(--gold); height: 4cqh; cursor: pointer; }
#set-keys { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 1cqh 2cqh; align-items: center; font-size: 3.2cqh; }
.keybtn { font: 400 3cqh var(--font); min-width: 12cqh; padding: 0.6cqh 1.6cqh; border-radius: 1.4cqh; border: 0.5cqh solid var(--ink);
  background: #2b2540; color: #fff; cursor: pointer; border-bottom-width: 1cqh; }
.keybtn.wait { background: var(--gold); color: var(--ink); }

#result-title { font-size: 12cqh !important; }
#result-stats { font: 700 3.8cqh/1.6 system-ui, sans-serif; margin-bottom: 2cqh; }
#version { position: absolute; right: 3cqh; bottom: 2cqh; font: 700 2.6cqh system-ui, sans-serif; opacity: .55; }

/* phones held upright: ask for landscape */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 20; background: #0d0b14; align-items: center; justify-content: center;
    font: 900 6vw var(--font); color: #ffe066; text-align: center; padding: 10vw; }
  #game { width: 100vw; }
}

/* evolution altar: branches and the relics to offer */
.altar-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqh; max-width: 130cqh; }
.altar-row button { font: 900 3cqh var(--font); color: #fff; background: #241e38; border: 0.6cqh solid #3a3358; border-radius: 2cqh;
  padding: 1cqh 2cqh; cursor: pointer; display: flex; align-items: center; gap: 1cqh; }
.altar-row button span { font: 700 2.4cqh system-ui, sans-serif; opacity: .8; }
.altar-row button.sel { border-color: #c87aff; background: #3a2a52; }
.altar-row button.match { box-shadow: inset 0 0 0 0.4cqh #ffe066; }
.altar-row canvas { width: 5cqh; height: 5cqh; image-rendering: pixelated; }
.altar-row button.off { opacity: .35; cursor: default; }
.altar-fuse { font: 700 2.6cqh/1.4 system-ui, sans-serif; max-width: 120cqh; text-align: center; }
.altar-fuse b { font: 900 2.8cqh var(--font); color: #e0b0ff; }
#screen-altar { gap: 1.6cqh; }
#screen-altar h2 { margin: 0; }
#screen-altar .party-list .card { width: 14cqh; padding: 0.8cqh; }
#screen-altar .card .c-types, #screen-altar .card .c-hp { display: none; }
#screen-altar .card .c-name { font-size: 2.4cqh; }

/* move descriptions and the Info screen */
.mv-desc, .d-mvdesc { font: 700 2.6cqh/1.35 system-ui, sans-serif; text-align: left; max-width: 120cqh; opacity: .92; }
.mv-desc span, .d-mvdesc span { opacity: .7; font-size: 2.3cqh; }
.d-move { cursor: pointer; }
.d-move.sel { outline: 0.4cqh solid #fff; }
#relics { pointer-events: auto; cursor: pointer; }
.info-tabs { display: flex; gap: 1cqh; }
.info-tabs button { font: 900 3.2cqh var(--font); padding: 1cqh 3cqh; border-radius: 2cqh; border: 0.6cqh solid var(--ink); background: #2b2540; color: #ccc; cursor: pointer; }
.info-tabs button.on { background: #ffd23f; color: var(--ink); }
.info-body { width: 100%; max-width: 130cqh; display: flex; flex-direction: column; gap: 1cqh; text-align: left; }
.info-body h3 { margin: 1.4cqh 0 0; color: #ffe066; font-size: 3.4cqh; }
.info-row { display: flex; align-items: center; gap: 2cqh; background: var(--panel); border-radius: 1.6cqh; padding: 1cqh 1.6cqh; font: 700 2.7cqh/1.45 system-ui, sans-serif; }
.info-row canvas { width: 7cqh; height: 7cqh; image-rendering: pixelated; flex: none; }
.info-row b { font: 900 3cqh var(--font); }
.info-row b.fz { color: #e0b0ff; font-size: 2.8cqh; }
.info-row .tag { display: inline-block; margin: 0.2cqh 0; }
.info-row .tag.elem { background: #4a3a6a; }
.info-row .lbl { opacity: .7; font-size: 2.4cqh; margin-right: 0.6cqh; }

/* hover tooltips (mouse only) */
#tip { position: fixed; z-index: 100; max-width: 300px; pointer-events: none; opacity: 0; transition: opacity .08s;
  background: rgba(18, 14, 30, .96); border: 2px solid #ffd23f; border-radius: 10px; padding: 7px 10px; color: #fff;
  font: 600 13px/1.4 system-ui, sans-serif; box-shadow: 0 4px 0 rgba(0,0,0,.4); }
#tip.show { opacity: 1; }
#tip b { display: block; font: 900 15px "Lilita One", "Arial Black", Arial, sans-serif; color: #ffe066; }
#tip i { display: block; font-style: normal; font-size: 11.5px; opacity: .7; margin-bottom: 3px; }
.tipped { text-decoration: underline dotted; cursor: help; }
#hud .tag, #hud .tipped { pointer-events: auto; }

#btn-continue small { display: block; font: 800 2.4cqh system-ui, sans-serif; opacity: .85; }

/* the bracer's slots in the HUD (one per monster, lit in its type colour) */
.balls .slot { width: 2.6cqh; height: 2.6cqh; transform: rotate(45deg); border: 0.4cqh solid var(--ink); border-radius: 0.5cqh;
  /* filled from the bottom (the diamond's lower corner) up to its HP */
  background: linear-gradient(to top left, var(--c) 0 var(--hp, 100%), #1c1828 var(--hp, 100%) 100%);
  box-shadow: 0 0 0.8cqh var(--c), inset 0.3cqh 0.3cqh 0 rgba(255,255,255,.45); margin: 0 0.3cqh; }
.balls .slot.low { animation: slotlow .7s steps(2) infinite; }
@keyframes slotlow { 50% { box-shadow: 0 0 1.2cqh #ff4a3a, inset 0.3cqh 0.3cqh 0 rgba(255,255,255,.45); } }
.balls .slot.active { outline: 0.4cqh solid var(--gold); outline-offset: 0.2cqh; }
.balls .slot.out { background: #3a3646; box-shadow: none; opacity: .6; }
.balls .slot.empty { background: rgba(255,255,255,.06); box-shadow: none; border-style: dashed; opacity: .6; }

/* trainer select */
#trainer-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2cqh; max-width: 150cqh; }
#trainer-list .card { width: 22cqh; text-align: center; }
#trainer-list .card.locked { opacity: .55; }
#trainer-list .c-pow { font: 800 2.3cqh system-ui, sans-serif; opacity: .8; }
#trainer-detail .t-pow { font-size: 3cqh; color: #ffe066; margin-left: 1cqh; }
#trainer-detail .t-down { color: #ffa08a; }
#trainer-detail .t-up { color: #a8f0a0; }
.t-looks { display: flex; align-items: center; gap: 1cqh; font: 800 2.6cqh system-ui, sans-serif; margin: 1cqh 0; }
.t-looks button { font: 900 2.8cqh var(--font); padding: 0.6cqh 2.4cqh; border-radius: 1.6cqh; border: 0.5cqh solid var(--ink); background: #2b2540; color: #ccc; cursor: pointer; }
.t-looks button.on { background: #ffd23f; color: var(--ink); }

/* the pause menu: the trainer's phone */
#screen-pause { justify-content: center; }
.phone { position: relative; width: 58cqh; max-height: 92cqh; padding: 2.4cqh 3.4cqh 2cqh; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh;
  background: radial-gradient(circle at 50% 0%, rgba(90,216,255,.2), transparent 60%), linear-gradient(#1e1a34, #100d1a);
  border: 1.2cqh solid #2c2738; border-radius: 6cqh; box-shadow: 0 0 0 0.5cqh var(--ink), 0 2cqh 5cqh rgba(0,0,0,.55); }
.phone::before { content: ""; position: absolute; top: 1.1cqh; left: 50%; transform: translateX(-50%); width: 13cqh; height: 2.4cqh; background: #0a0810; border-radius: 1.4cqh; }
.phone-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; font: 800 2.2cqh system-ui, sans-serif; opacity: .9; }
.phone-batt { width: 3.8cqh; height: 1.8cqh; border: 0.3cqh solid #fff; border-radius: 0.5cqh; background: linear-gradient(90deg, #8af08a 0 72%, transparent 72%); }
.phone-link { font: 800 2cqh system-ui, sans-serif; color: #5ad8ff; letter-spacing: .1em; }
.phone-title { font-size: 6cqh; color: #ffe066; -webkit-text-stroke: 0.5cqh #3a1d05; paint-order: stroke fill; line-height: 1; }
.phone-sub { font: 700 2.4cqh system-ui, sans-serif; opacity: .75; margin-top: -0.6cqh; }
.phone-apps { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqh 4cqh; margin: 1cqh 0; }
.phone .app { display: flex; flex-direction: column; align-items: center; gap: 0.8cqh; background: none; border: none; color: #fff; font: 900 2.6cqh var(--font); cursor: pointer; padding: 0; }
.phone .app svg { width: 11cqh; height: 11cqh; padding: 2.4cqh; border-radius: 3cqh; border: 0.5cqh solid var(--ink); box-shadow: 0 0.6cqh 0 var(--ink); }
.phone .a-party svg { background: linear-gradient(#4fbe5a, #2c7a36); }
.phone .a-info svg { background: linear-gradient(#5a8ae8, #3a52a8); }
.phone .a-gear svg { background: linear-gradient(#8a8ea0, #5a5e6e); }
.phone .a-quit svg { background: linear-gradient(#e8604a, #a83a2a); }
.phone .app:active svg, .phone .app:hover svg { transform: translateY(0.3cqh); box-shadow: 0 0.3cqh 0 var(--ink); }
.phone .big-btn { width: 100%; }
.phone-home { width: 14cqh; height: 0.8cqh; border-radius: 1cqh; background: rgba(255,255,255,.4); }