/* Mooncairn: a moonlit card table. Sizes follow custom properties set by the
   game from the play area's size (src/ui/app.js, layout()): --cw (a card in
   hand), --ew (an enemy), --bw (a card to choose), --pw (a picked-up card,
   enlarged), --gw (a card in a grid) and --fw, the narrowest card whose rules
   text reads at the format's smallest size. */
:root {
  --bg: #0b1424;
  --panel: #151f38;
  --panel-2: #1d2a4a;
  --line: #2f3e66;
  --text: #e8ecff;
  --muted: #9aa6c8;
  --accent: #f0c96a;
  --accent-2: #66d9e8;
  --good: #8ce99a;
  --bad: #ff6b6b;
  --venom: #9be15d;
  --block: #74c0fc;
  --radius: 10px;
  --header-h: 48px;
  --serif: 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  /* The safe areas (docs/PLATFORMS.md, "Layout"), as variables a test can set
     to stand in for a notch. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* The smallest text: 14 px on a desktop, 15 on a tablet, 13 on a phone
     (docs/PLATFORMS.md, "Readable at phone size"). */
  --t-min: 14px;
  color-scheme: dark;
}

/* Tablets: a touch screen 600 px or more each way. */
@media (pointer: coarse) {
  :root {
    --t-min: 15px;
  }
}

/* Phones: under 600 px one way. */
@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  :root {
    --t-min: 13px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  touch-action: manipulation;
}

[hidden] {
  display: none !important;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.35em;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--panel-2);
  font: 600 max(var(--t-min), 0.85em) / 1.5 system-ui, sans-serif;
  text-align: center;
  color: var(--text);
}

/* Key hints follow the last input: none after a touch. */
.mc.in-touch kbd {
  display: none;
}

.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}

.site-logo {
  font-weight: 800;
  font-size: 20px;
  text-decoration: none;
  color: var(--text);
}

.site-header nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}

.page {
  padding: 8px max(8px, var(--safe-r)) 40px max(8px, var(--safe-l));
}

/* The game takes the height under the site header (which grows by the
   status bar in the home-screen app). No pan, pinch, pull-to-refresh,
   selection or long-press menu over it: the screens that scroll say so
   themselves (touch-action: pan-y), and the page around it still zooms. */
.game-root {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1280px;
  height: calc(100vh - var(--header-h) - 16px);
  height: calc(100dvh - var(--header-h) - var(--safe-t) - 16px);
  min-height: 340px;
  max-height: 860px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  overflow: clip;
  background: var(--bg);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

/* Touch screens: no cap on the height, the game is the page's reason. */
@media (pointer: coarse) {
  .game-root {
    max-height: none;
  }
}

/* Phones held sideways: the game takes the screen, edge to edge, and a run
   scrolls the site header out of view (app.js, placeGame()). */
@media (orientation: landscape) and (max-height: 500px) {
  .page {
    padding-right: 0;
    padding-left: 0;
  }
  .game-root {
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .ad-slot,
  .about {
    padding-right: max(8px, var(--safe-r));
    padding-left: max(8px, var(--safe-l));
  }
}

/* Full screen (the site's button takes #game-root): the game fills the
   screen without its frame, and lays itself out again at the new size. */
.game-root:fullscreen {
  border: 0;
  border-radius: 0;
}

.game-root:-webkit-full-screen {
  border: 0;
  border-radius: 0;
}

.ad-slot {
  max-width: 970px;
  margin: 12px auto 0;
  min-height: 0;
}

.about {
  max-width: 820px;
  margin: 24px auto 0;
  color: var(--muted);
  line-height: 1.55;
  padding: 0 8px;
}

.about h1,
.about h2 {
  color: var(--text);
  font-family: var(--serif);
}

.about strong {
  color: var(--text);
}

/* ---------------------------------------------------------------------------
   The game's frame
   --------------------------------------------------------------------------- */

/* The play area keeps inside its edges (--edge-*): where the game meets the
   screen's edges, everything stays inside the safe areas and touch controls
   16 px further in, 24 px at a phone's sides so its rounded corners stay
   clear. The backdrop and dialogs' veils still reach the edges. */
.mc {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
  font-size: max(var(--t-min), 15px);
  padding: var(--edge-t, 0) var(--edge-r, 0) var(--edge-b, 0) var(--edge-l, 0);
  --cw: 110px;
  --ew: 140px;
  --bw: 160px;
  --fw: 175px;
}

/* On a touch screen in the page, 8 px more inside the game's frame. */
@media (pointer: coarse) {
  .mc {
    --edge-t: 0px;
    --edge-r: 8px;
    --edge-b: 8px;
    --edge-l: 8px;
  }
}

/* A phone held sideways, and full screen, meet the screen's edges. */
@media (orientation: landscape) and (max-height: 500px) {
  .mc {
    --edge-t: calc(var(--safe-t) + 16px);
    --edge-r: calc(var(--safe-r) + 24px);
    --edge-b: calc(var(--safe-b) + 16px);
    --edge-l: calc(var(--safe-l) + 24px);
  }
}

.mc.fs {
  --edge-t: calc(var(--safe-t) + 8px);
  --edge-r: calc(var(--safe-r) + 8px);
  --edge-b: calc(var(--safe-b) + 8px);
  --edge-l: calc(var(--safe-l) + 8px);
}

@media (pointer: coarse) {
  .mc.fs {
    --edge-t: calc(var(--safe-t) + 16px);
    --edge-r: calc(var(--safe-r) + 16px);
    --edge-b: calc(var(--safe-b) + 16px);
    --edge-l: calc(var(--safe-l) + 16px);
  }
  .game-root:fullscreen > .am-fs-exit {
    top: calc(var(--safe-t) + 16px);
  }
}

@media (pointer: coarse) and (max-width: 599px), (pointer: coarse) and (max-height: 599px) {
  .mc.fs {
    --edge-r: calc(var(--safe-r) + 24px);
    --edge-l: calc(var(--safe-l) + 24px);
  }
}

/* "Leave full screen" sits at the top in the middle: the top bar parts
   around it; a phone held upright gives it a strip of its own above the
   game; the menus start below it. */
.mc.fs.narrow {
  --edge-t: calc(var(--safe-t) + 68px);
}

.mc.fs:not(.narrow) .mc-top {
  justify-content: space-between;
}

.mc.fs:not(.narrow) .top-l,
.mc.fs:not(.narrow) .top-r {
  max-width: calc(50% - 32px);
}

.mc.fs:not(.narrow) .mc-top[hidden] + .mc-view > .screen {
  padding-top: 76px;
}

/* The title held sideways: the button sits between its two columns. */
.mc.fs.short:not(.portrait) .mc-top[hidden] + .mc-view > .title-screen {
  padding-top: 18px;
  column-gap: 76px;
}

.mc.narrow {
  font-size: max(var(--t-min), 14px);
}

.mc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 70% 10%, #1f3055 0%, var(--bg) 70%);
}

.mc-bg svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.mc-bg[data-act]:not([data-act='']) {
  opacity: 0.85;
}

.mc-top {
  position: relative;
  z-index: 5;
  flex: none;
  background: linear-gradient(#0e1830f0, #0e1830c0);
  border-bottom: 1px solid var(--line);
}

.mc-view {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
}

.mc-fx {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.mc-noscript {
  position: relative;
  z-index: 2;
  padding: 24px;
  text-align: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    transform 0.08s;
}

.btn:hover:not(:disabled) {
  background: #263660;
  border-color: #46598f;
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
}

.btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.btn:focus-visible,
.mc button:focus-visible,
.card:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
}

.btn.primary {
  background: linear-gradient(#f3d27e, #d9a93f);
  border-color: #f7dc95;
  color: #221806;
}

.btn.primary:hover:not(:disabled) {
  background: linear-gradient(#f8dc92, #e2b54e);
}

.btn.danger {
  background: #4a1f2a;
  border-color: #8a3444;
}

.btn.danger:hover:not(:disabled) {
  background: #5c2533;
}

.btn.small {
  min-height: 44px;
  min-width: 44px;
  padding: 4px 12px;
  font-size: max(var(--t-min), 13px);
}

.btn.big {
  min-height: 52px;
  font-size: 17px;
}

.muted {
  color: var(--muted);
}

.center {
  text-align: center;
}

.coin-dot {
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #d6dcef 40%, #8c96b8);
  border: 1px solid #5d6788;
  vertical-align: -0.12em;
}

/* ---------------------------------------------------------------------------
   Top bar
   --------------------------------------------------------------------------- */

/* One row: HP, Silver, the Elixirs and the relics at the left; where the run
   is and the buttons at the right. Narrow (a phone held upright): two rows,
   with the Elixirs and one Relics button, which lists them all, below. Every
   button is 44 px square and 8 px from the next; icons are drawn inside. */
.mc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 8px;
}

.mc-top.two-rows {
  flex-wrap: wrap;
  row-gap: 8px;
  padding-bottom: 6px;
}

.top-l,
.top-r,
.top-l2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.top-l {
  flex: 1 1 auto;
}

.top-r {
  flex: 0 1 auto;
}

.top-r .top-where {
  flex: 0 1 auto;
}

.top-r .top-btns {
  flex: none;
}

.top-l2 {
  flex: 1 0 100%;
}

.top-hp {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.top-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #1a2442;
  border: 1px solid var(--line);
  flex: none;
}

.top-avatar svg {
  width: 100%;
  height: 100%;
  transform: scale(1.5) translateY(8%);
}

.top-hpbar {
  position: relative;
  width: 110px;
  height: 20px;
  border-radius: 10px;
  background: #3a1520;
  border: 1px solid #0006;
  overflow: hidden;
}

.top-hpfill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#ff7b7b, #c9303d);
  transition: width 0.3s;
}

.top-hptext {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-min);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.top-silver {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.top-elixirs {
  display: flex;
  gap: 8px;
  flex: none;
}

.elixir-slot {
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 10px;
  border: 1px dashed #3a4a78;
  background: #0f1830;
}

.elixir-slot.full {
  border-style: solid;
  cursor: pointer;
}

.elixir-slot.full:hover {
  background: #1b2850;
}

.elixir-slot svg {
  width: 100%;
  height: 100%;
}

.top-where {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: var(--t-min);
  color: var(--muted);
  min-width: 0;
  text-align: right;
}

.top-where b {
  color: var(--text);
  font-size: var(--t-min);
}

.top-where span,
.top-where b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-btns {
  display: flex;
  gap: 8px;
}

.tbtn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  cursor: pointer;
}

.tbtn:hover {
  background: var(--panel-2);
}

/* The deck's size, on its button's corner. */
.tbtn-n {
  position: absolute;
  right: -6px;
  bottom: -6px;
  min-width: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--accent);
  color: #221806;
  font-size: var(--t-min);
  font-weight: 800;
  line-height: 1.3;
}

/* Small drawn icons for the top buttons and piles. */
.ic-deck,
.ic-map,
.ic-menu,
.pile-ic {
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.ic-deck {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5' width='12' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M8 3h11a2 2 0 0 1 2 2v14' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
}

.ic-map {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6l6-3 6 3 6-3v15l-6 3-6-3-6 3z M9 3v15 M15 6v15' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ic-menu {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16' stroke='black' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
}

.relic-strip {
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.relic-strip:empty {
  display: none;
}

.relic {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(#2a3a66, #121b34 70%);
  cursor: pointer;
}

.relic svg {
  width: 100%;
  height: 100%;
}

.relic-n {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 18px;
  padding: 0 3px;
  border-radius: 9px;
  background: #0b1020;
  border: 1px solid var(--line);
  font-size: var(--t-min);
  font-weight: 700;
  line-height: 1.2;
}

/* A phone held upright: the relics behind one button. */
.relics-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 12px 0 6px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-weight: 700;
  cursor: pointer;
}

.relics-art {
  width: 32px;
  height: 32px;
}

.relics-art svg {
  width: 100%;
  height: 100%;
}

/* "+3": the relics that didn't fit the row, all listed when pressed. */
.relic.more {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  font-weight: 800;
}

.relic.flash,
.relics-btn.flash {
  animation: relic-flash 0.6s;
}

@keyframes relic-flash {
  0%,
  100% {
    transform: scale(1);
    box-shadow: none;
  }
  40% {
    transform: scale(1.35);
    box-shadow: 0 0 12px #f0c96a;
  }
}

.relic-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.relic-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0c1326;
  line-height: 1.35;
}

.relic-list-art {
  flex: none;
  width: 44px;
  height: 44px;
}

.relic-list-art svg {
  width: 100%;
  height: 100%;
}

.relic-list p {
  margin: 4px 0 0;
}

.mc.narrow .top-hpbar,
.mc.short .top-hpbar {
  width: 84px;
}

/* ---------------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------------- */

.card {
  --w: var(--cw);
  --frame: #6c6f80;
  --inner: #1b2138;
  position: relative;
  flex: none;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border-radius: calc(var(--w) * 0.075);
  background: linear-gradient(170deg, #2a3150, var(--inner) 60%);
  box-shadow:
    0 2px 6px #000a,
    inset 0 0 0 1px #0008;
  color: #eef1ff;
  font-size: calc(var(--w) * 0.083);
  line-height: 1.18;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.card[role='button'],
.card.in-hand,
.card.pick {
  cursor: pointer;
}

.card.big {
  --w: var(--bw);
}

.card.zoomed {
  --w: max(var(--fw), min(240px, 62vw));
}

.card.preview-card {
  --w: var(--pw);
}

.card-frame {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: calc(var(--w) * 0.035) solid var(--frame);
  pointer-events: none;
}

.card.t-attack {
  --frame: #c4574b;
  --inner: #2a1a22;
}

.card.t-skill {
  --frame: #4d86c4;
  --inner: #16223c;
}

.card.t-power {
  --frame: #c49a3a;
  --inner: #2a2416;
}

.card.t-status {
  --frame: #6c7086;
  --inner: #1c1f2c;
}

.card.t-curse {
  --frame: #7d4a92;
  --inner: #1f1428;
}

.card.r-rare .card-frame {
  box-shadow:
    inset 0 0 0 calc(var(--w) * 0.012) #ffe8a3,
    0 0 calc(var(--w) * 0.06) #f0c96a88;
}

.card.r-uncommon .card-frame {
  box-shadow: inset 0 0 0 calc(var(--w) * 0.01) #b7d3ff;
}

.card-cost {
  position: absolute;
  z-index: 2;
  left: calc(var(--w) * -0.05);
  top: calc(var(--w) * -0.05);
  width: calc(var(--w) * 0.27);
  height: calc(var(--w) * 0.27);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9e6ff, #3d86d8 55%, #1d4a8c);
  border: calc(var(--w) * 0.018) solid #0b1330;
  color: #fff;
  font-weight: 800;
  font-size: calc(var(--w) * 0.155);
  text-shadow: 0 1px 2px #0009;
}

.card.c-alchemist .card-cost {
  background: radial-gradient(circle at 35% 30%, #dcffc0, #5cb34a 55%, #2d6a24);
}

.card.c-tidecaller .card-cost {
  background: radial-gradient(circle at 35% 30%, #c9f6ff, #2fb3c9 55%, #19697a);
}

.card.c-warden .card-cost {
  background: radial-gradient(circle at 35% 30%, #ffe9b8, #e0a340 55%, #95611b);
}

.card-name {
  position: absolute;
  top: 3.5%;
  left: 19%;
  right: 5%;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: calc(var(--w) * 0.098);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
}

.card.long-name .card-name {
  font-size: calc(var(--w) * 0.08);
  top: 4.5%;
}

.card.up .card-name {
  color: var(--good);
}

.card-art {
  position: absolute;
  top: 13%;
  left: 7%;
  right: 7%;
  height: 37%;
  border-radius: calc(var(--w) * 0.04);
  overflow: hidden;
  background: #0c1122;
  box-shadow: inset 0 0 0 1px #0009;
}

.card-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.card-type {
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 calc(var(--w) * 0.06);
  border-radius: 99px;
  background: #0c1122;
  border: 1px solid var(--frame);
  font-size: calc(var(--w) * 0.08);
  line-height: 1.2;
  color: #c9d0ee;
  white-space: nowrap;
}

.card-text {
  position: absolute;
  top: 57%;
  left: 7%;
  right: 7%;
  bottom: 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

/* Every line of a card face is at least 0.08 of its width (FACE_TEXT in
   app.js): long texts get the room by a shorter picture. */
.card.mid-text .card-text {
  top: 55%;
  font-size: calc(var(--w) * 0.08);
}

.card.long-text .card-art {
  height: 30%;
}

.card.long-text .card-type {
  top: 40%;
}

.card.long-text .card-gem {
  top: 41.5%;
}

.card.long-text .card-text {
  top: 48%;
  bottom: 4%;
  font-size: calc(var(--w) * 0.08);
}

.card-text .kw {
  color: var(--accent);
}

.card-text .num {
  font-weight: 800;
}

.card-text .num.up {
  color: var(--good);
}

.card-text .num.down {
  color: var(--bad);
}

.tide-clause.off {
  opacity: 0.5;
}

.tide-clause.on {
  color: #b9f4ff;
}

.kw.tide {
  color: var(--accent-2);
}

.card-gem {
  position: absolute;
  top: 49%;
  right: 9%;
  width: calc(var(--w) * 0.06);
  height: calc(var(--w) * 0.06);
  transform: rotate(45deg);
  background: #9cc2ff;
  border: 1px solid #0b1020;
}

.card.r-rare .card-gem {
  background: #ffd45e;
}

.card-price {
  position: absolute;
  left: 50%;
  bottom: calc(var(--w) * -0.13);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 99px;
  background: #0c1122;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: max(var(--t-min), 13px);
}

.card.unknown {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #151c33, #151c33 8px, #121829 8px, #121829 16px);
  border: 2px dashed #2f3e66;
  color: #3f4f80;
  font-size: calc(var(--w) * 0.4);
  font-weight: 800;
  box-shadow: none;
}

.card.picked {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 18px #f0c96a88;
}

/* Grids of cards: as many columns as fit cards whose text reads (app.js, fitGrids()). */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 6px 2px 14px;
}

.card-grid .card {
  --w: var(--gw, var(--fw));
}

.card-grid .card[role='button']:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px #000c;
}

.kw-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 280px;
  font-size: var(--t-min);
  line-height: 1.35;
  color: #d5dbf5;
}

.kw-item {
  padding: 6px 9px;
  border-radius: 8px;
  background: #0f1730e6;
  border: 1px solid var(--line);
}

.kw-item b {
  color: var(--accent);
}

/* The compact face: a card in hand too small for its rules text to read
   (app.js, layout()) shows its cost, its name and its picture, and the
   picked-up card shows enlarged beside the fight with its text. The name
   takes the full width under the cost, on two lines at most. */
.mc.compact-hand .card.in-hand .card-text,
.mc.compact-hand .card.in-hand .card-type {
  display: none;
}

.mc.compact-hand .card.in-hand .card-name {
  --nf: max(var(--t-min), calc(var(--w) * 0.1));
  top: calc(var(--w) * 0.2);
  left: 5%;
  right: 5%;
  max-height: calc(var(--nf) * 2.3);
  font-size: var(--nf);
  line-height: 1.12;
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
}

.mc.compact-hand .card.in-hand .card-art {
  top: calc(var(--w) * 0.24 + max(var(--t-min), calc(var(--w) * 0.1)) * 2.3);
  bottom: 6%;
  height: auto;
}

.mc.compact-hand .card.in-hand .card-gem {
  top: auto;
  bottom: 8%;
}

/* ---------------------------------------------------------------------------
   Screens (everything but the fight)
   --------------------------------------------------------------------------- */

.screen {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  padding: 18px 16px 28px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #2f3e66 transparent;
}

/* A phone held upright: narrower margins, so two readable cards fit a row
   (2 x 163 px and a gap need 338 px; an iPhone 14 in Safari leaves 342). */
.mc.narrow .screen {
  padding-right: 8px;
  padding-left: 8px;
}

.screen h2,
.screen h3 {
  font-family: var(--serif);
}

.menu-title {
  text-align: center;
  font-size: 26px;
  margin: 4px 0 14px;
}

.menu-btns,
.room-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 18px 0 4px;
}

.room-btns.secondary {
  margin-top: 6px;
}

/* Title */
.title-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 20%, #203461 0%, transparent 60%);
}

.title-emblem {
  width: min(210px, 42vw);
  margin-top: 4px;
}

.title-emblem svg {
  width: 100%;
  height: auto;
  display: block;
}

.title-name {
  margin: 4px 0 0;
  font-family: var(--serif);
  font-size: clamp(34px, 7vw, 56px);
  letter-spacing: 2px;
  background: linear-gradient(#ffffff, #c8d2ff 50%, #f0c96a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px #000a);
}

.title-tag {
  margin: 4px 0 16px;
  color: var(--muted);
  font-style: italic;
}

.title-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(400px, 100%);
}

.title-btns > .btn {
  justify-content: flex-start;
  text-align: left;
}

.bt {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.bt b {
  font-size: 17px;
}

.bt span {
  font-size: var(--t-min);
  font-weight: 500;
  opacity: 0.8;
}

.title-small {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.title-small .btn {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 6px 12px;
  font-size: max(var(--t-min), 14px);
}

.title-rec {
  margin: 12px 0 0;
  font-size: var(--t-min);
  color: var(--muted);
}

/* A short screen held sideways (a phone): the title beside its buttons. */
.mc.short:not(.portrait) .title-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  align-content: start;
  justify-items: center;
}

.mc.short:not(.portrait) .title-screen > * {
  grid-column: 1;
}

.mc.short:not(.portrait) .title-screen > .title-btns {
  grid-column: 2;
  grid-row: 1 / span 6;
  align-self: center;
}

.mc.short:not(.portrait) .title-emblem {
  width: min(120px, 24vh);
}

.mc.short:not(.portrait) .title-name {
  font-size: 34px;
}

.mc.short:not(.portrait) .title-tag {
  margin-bottom: 4px;
}

/* Wayfarer select */
.wf-cards {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.wf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: min(170px, 30vw);
  padding: 8px 6px 10px;
  border: 2px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(#1a2546, #111a31);
  cursor: pointer;
  transition:
    transform 0.12s,
    border-color 0.12s;
}

.wf-card:hover {
  transform: translateY(-2px);
}

.wf-card.picked {
  border-color: var(--accent);
  box-shadow: 0 0 16px #f0c96a55;
}

.wf-art {
  width: 100%;
  aspect-ratio: 1;
}

.mc.short .wf-art {
  width: min(100%, 96px);
}

.wf-art svg {
  width: 100%;
  height: 100%;
}

.wf-card b {
  font-family: var(--serif);
  font-size: 17px;
}

.wf-hp {
  font-size: var(--t-min);
  color: var(--muted);
}

.wf-detail {
  max-width: 620px;
  margin: 14px auto 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: #111a31e6;
  border: 1px solid var(--line);
}

.wf-detail h2 {
  margin: 0 0 4px;
}

.wf-blurb {
  margin: 0 0 8px;
  color: var(--muted);
}

.wf-facts {
  display: flex;
  gap: 18px;
  font-size: max(var(--t-min), 14px);
}

.wf-mech {
  margin: 8px 0;
  line-height: 1.4;
}

.wf-relic {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  background: #0c1326;
  font-size: max(var(--t-min), 14px);
  line-height: 1.35;
}

.wf-relic-art {
  width: 40px;
  height: 40px;
  flex: none;
}

.wf-relic-art svg {
  width: 100%;
  height: 100%;
}

.wf-rec {
  margin: 8px 0 0;
  font-size: var(--t-min);
  color: var(--muted);
}

.umbra {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.umbra-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.umbra-label {
  font-size: 16px;
  margin-right: 4px;
}

.umbra-label b {
  color: #c9b3ff;
  font-size: 20px;
}

.umbra-score {
  font-size: var(--t-min);
  color: var(--accent);
}

.umbra-rules {
  margin: 8px 0 0;
  padding-left: 22px;
  font-size: var(--t-min);
  color: #c7cff0;
  line-height: 1.4;
}

/* Daily */
.daily-date {
  text-align: center;
  color: var(--muted);
  margin: -8px 0 12px;
}

.daily-card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #111a31e6;
}

.daily-card p {
  margin: 2px 0;
}

.daily-art {
  width: 96px;
  height: 96px;
  flex: none;
}

.daily-art svg {
  width: 100%;
  height: 100%;
}

.daily-screen > p,
.daily-screen > .btn {
  text-align: center;
}

.daily-screen > .btn {
  display: flex;
  margin: 8px auto;
}

.daily-result {
  text-align: center;
  margin-top: 12px;
}

.daily-streak {
  text-align: center;
  font-weight: 600;
}

.countdown {
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.daily-table,
.score-table,
.char-table {
  margin: 12px auto 0;
  border-collapse: collapse;
  font-size: max(var(--t-min), 14px);
}

.daily-table th,
.daily-table td,
.char-table th,
.char-table td,
.score-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #243257;
  text-align: left;
}

.num {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  touch-action: pan-x pan-y;
}

/* Results */
.over-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.over-art {
  width: 120px;
  height: 120px;
}

.over-screen.won .over-art {
  filter: drop-shadow(0 0 16px #f0c96a);
}

.over-art svg {
  width: 100%;
  height: 100%;
}

.over-title {
  margin: 4px 0 2px;
  font-size: 30px;
}

.over-screen.won .over-title {
  color: var(--accent);
}

.over-sub {
  margin: 0;
  color: var(--muted);
}

.near-miss {
  margin: 8px 0 0;
  padding: 6px 12px;
  border-radius: 8px;
  background: #2b1624;
  border: 1px solid #5c2a44;
}

.over-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 12px 0 4px;
}

.over-score span {
  font-size: var(--t-min);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.over-score b {
  font-size: 44px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-block;
  margin: 4px;
  padding: 2px 10px;
  border-radius: 99px;
  font-size: var(--t-min);
  font-weight: 700;
}

.tag.best {
  background: #3b2f10;
  color: var(--accent);
  border: 1px solid #7a6124;
}

.unlock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 8px 0;
  padding: 8px 14px;
  border-radius: 10px;
  background: #251b44;
  border: 1px solid #5b47a0;
}

.unlock b {
  color: #d9c9ff;
}

.unlock span {
  font-size: var(--t-min);
}

.score-table tr.total td {
  font-weight: 800;
  border-bottom: 0;
}

.over-facts,
.stat-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  width: min(640px, 100%);
  margin: 14px auto 0;
}

.over-facts dt,
.stat-list dt {
  font-size: var(--t-min);
  color: var(--muted);
}

.over-facts dd,
.stat-list dd {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.over-facts > dt,
.stat-list > dt {
  grid-column: auto;
}

.over-achv ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: max(var(--t-min), 14px);
}

.over-achv li {
  margin: 4px 0;
}

.over-achv b {
  color: var(--accent);
}

/* Codex, achievements, stats */
.tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0;
}

.tab.on {
  background: #2b3d6e;
  border-color: var(--accent-2);
}

.codex-body h3 {
  margin: 18px 0 6px;
  text-align: center;
}

.relic-grid,
.enemy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.enemy-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.codex-relic,
.codex-enemy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 10px;
  background: #111a31e6;
  border: 1px solid var(--line);
  font-size: var(--t-min);
  text-align: center;
}

.codex-relic {
  cursor: pointer;
}

.codex-art {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 26px;
  color: #3f4f80;
}

.codex-enemy .codex-art {
  width: 90px;
  height: 90px;
}

.codex-art svg {
  width: 100%;
  height: 100%;
}

.codex-enemy span {
  color: var(--muted);
}

.unknown {
  opacity: 0.6;
}

.achv-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 720px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.achv {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  border-radius: 10px;
  background: #111a31e6;
  border: 1px solid var(--line);
  opacity: 0.6;
}

.achv.got {
  opacity: 1;
  border-color: #7a6124;
}

.achv div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.achv span {
  font-size: var(--t-min);
  color: var(--muted);
}

.achv-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #3a4670, #1a2240);
  border: 2px solid #3a4670;
}

.achv.got .achv-ic {
  background: radial-gradient(circle at 35% 35%, #fff4c8, #f0c96a 50%, #9c7422);
  border-color: #ffe08a;
}

.achv-date {
  font-size: var(--t-min) !important;
}

.death-list {
  max-width: 400px;
  margin: 6px auto;
}

.stats-screen h3 {
  text-align: center;
}

/* Settings and help (in modals) */
.settings {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: min(360px, 80vw);
}

.setting {
  display: grid;
  grid-template-columns: 120px 1fr 44px;
  align-items: center;
  gap: 10px;
}

.setting.check {
  display: flex;
}

.setting input[type='range'] {
  width: 100%;
  height: 44px;
  margin: 0;
  accent-color: var(--accent);
}

/* The whole row is the switch's target. */
.setting.check {
  min-height: 44px;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.setting input[type='checkbox'] {
  width: 24px;
  height: 24px;
  margin: 0 10px;
  accent-color: var(--accent);
}

.setting-danger {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.help {
  max-width: 680px;
  line-height: 1.45;
  font-size: max(var(--t-min), 14px);
}

.help h3 {
  margin: 14px 0 4px;
  font-family: var(--serif);
  color: var(--accent);
}

.help p {
  margin: 4px 0;
}

.kw-list,
.key-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  margin: 6px 0;
}

.kw-list dt,
.key-list dt {
  font-weight: 700;
}

.kw-list dd,
.key-list dd {
  margin: 0;
  color: #c7cff0;
}

/* ---------------------------------------------------------------------------
   Map
   --------------------------------------------------------------------------- */

.map-screen {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.map-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px 4px;
  flex-wrap: wrap;
}

.map-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.map-title h2 {
  margin: 0;
  font-size: 20px;
}

.map-act {
  font-size: var(--t-min);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
}

.map-sub {
  margin: 0;
  font-size: var(--t-min);
  color: var(--muted);
}

.map-scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  display: flex;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: #2f3e66 transparent;
  outline: none;
}

.map-scroll.peek {
  height: min(62vh, 560px);
  flex: none;
  border-radius: 10px;
  background: #0b1424cc;
}

.map-canvas {
  position: relative;
  flex: none;
  margin: 0 auto;
}

.map-lines {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.map-lines line {
  stroke-width: 3;
  stroke-linecap: round;
}

.map-lines .e-closed {
  stroke: #33406a;
  stroke-dasharray: 2 8;
  opacity: 0.5;
}

.map-lines .e-future {
  stroke: #7d8ab8;
  stroke-dasharray: 3 7;
}

.map-lines .e-open {
  stroke: var(--accent);
  stroke-dasharray: 4 6;
  animation: map-dash 0.8s linear infinite;
}

.map-lines .e-walked {
  stroke: #e8ecff;
  stroke-width: 4;
}

@keyframes map-dash {
  to {
    stroke-dashoffset: -20;
  }
}

.map-node {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 5px;
  border-radius: 50%;
  border: 2px solid #3a4a78;
  background: radial-gradient(circle at 40% 35%, #26345c, #111a31);
  cursor: default;
  transition:
    transform 0.15s,
    opacity 0.2s;
}

.map-node .node-ic,
.map-node .node-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-node.s-gone {
  opacity: 0.35;
  filter: grayscale(0.6);
}

.map-node.s-visited {
  border-color: #c8d2ff;
  opacity: 0.8;
}

.map-node.s-current {
  border-color: #fff;
  box-shadow:
    0 0 0 4px #ffffff33,
    0 0 16px #c8d2ff;
}

.map-node.s-reachable {
  border-color: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 12px #f0c96a88;
  animation: node-pulse 1.4s ease-in-out infinite;
}

.map-node.s-reachable:hover,
.map-node.s-reachable:focus-visible {
  transform: scale(1.18);
  animation: none;
}

.map-node.chosen {
  transform: scale(1.3);
  animation: none;
  background: radial-gradient(circle, #f0c96a66, #111a31);
}

@keyframes node-pulse {
  0%,
  100% {
    box-shadow: 0 0 6px #f0c96a66;
  }
  50% {
    box-shadow: 0 0 18px #f0c96acc;
  }
}

.map-node.t-elite {
  border-width: 3px;
}

.map-node.t-boss {
  width: 128px;
  height: 128px;
  margin: -64px 0 0 -64px;
  padding: 8px;
  border-width: 3px;
  border-color: #6d5aa8;
  background: radial-gradient(circle at 50% 40%, #3a2d66, #150f2a);
}

.map-node.t-boss.s-reachable {
  border-color: var(--accent);
}

.boss-art,
.boss-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.boss-name {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 4px;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 700;
  font-size: max(var(--t-min), 14px);
  color: #d9c9ff;
  text-shadow: 0 1px 3px #000;
}

.mc.narrow .map-node.t-boss {
  width: 104px;
  height: 104px;
  margin: -52px 0 0 -52px;
}

.map-legend {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  padding: 6px 10px 8px;
  font-size: var(--t-min);
  color: var(--muted);
  border-top: 1px solid #1f2b4d;
  background: #0b1424cc;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.legend-ic,
.legend-ic svg {
  display: block;
  width: 20px;
  height: 20px;
}

.map-hint {
  position: absolute;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  width: min(420px, 90%);
  padding: 8px 12px;
  border-radius: 10px;
  background: #111a31f0;
  border: 1px solid var(--accent);
  font-size: var(--t-min);
  text-align: center;
  pointer-events: none;
}

.act-intro {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
  background: radial-gradient(ellipse at center, #0b1424f2 30%, #0b1424c0 80%);
  animation: fade-in 0.6s ease-out;
  cursor: pointer;
}

.act-intro.out {
  opacity: 0;
  transition: opacity 0.5s;
}

.act-num {
  color: var(--accent);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: max(var(--t-min), 14px);
}

.act-intro h2 {
  margin: 6px 0;
  font-family: var(--serif);
  font-size: clamp(28px, 6vw, 44px);
}

.act-intro p {
  max-width: 460px;
  margin: 4px 0;
  color: #c7cff0;
}

.act-boss {
  margin-top: 12px !important;
  color: #d9c9ff !important;
  font-weight: 600;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------------
   Rooms
   --------------------------------------------------------------------------- */

.room {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.room-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(640px, 100%);
  text-align: center;
}

.room-art {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 200 / 120;
  max-height: 34vh;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px #0008;
}

.room-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.room-titles h2 {
  margin: 0;
  font-size: 26px;
}

.room-sub {
  margin: 4px 0 0;
  color: var(--muted);
}

/* Rewards */
.reward-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(460px, 100%);
  margin-top: 16px;
}

.reward-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(#1a2546, #121b34);
  text-align: left;
  cursor: pointer;
  transition:
    transform 0.1s,
    border-color 0.1s;
}

.reward-row:hover {
  border-color: var(--accent);
  transform: translateX(3px);
}

.rw-key {
  flex: none;
}

.mc.narrow .rw-key,
.mc.narrow .event-opt kbd {
  display: none;
}

.rw-ic {
  flex: none;
  width: 40px;
  height: 40px;
}

.rw-ic svg {
  width: 100%;
  height: 100%;
}

.rw-ic.coin {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffffff, #d6dcef 40%, #8c96b8);
  border: 2px solid #5d6788;
  box-shadow: inset 0 0 0 5px #c2cae4;
}

.rw-ic.cards {
  background:
    linear-gradient(#4d86c4, #4d86c4) 8px 4px / 22px 30px no-repeat,
    linear-gradient(#c4574b, #c4574b) 14px 8px / 22px 30px no-repeat;
  border-radius: 4px;
}

.rw-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rw-text span {
  font-size: var(--t-min);
  color: var(--muted);
}

.card-choice {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 22px);
  justify-content: center;
  margin-top: 18px;
  padding-top: 6px;
}

.card-choice .card {
  transition: transform 0.12s;
}

.card-choice .card:hover {
  transform: translateY(-6px);
}

.card-choice .card.picked {
  transform: translateY(-8px) scale(1.03);
}

.choice-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.choice-kw {
  min-height: 12px;
  margin-top: 14px;
}

.choice-kw .kw-panel {
  max-width: 520px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.choice-kw .kw-item {
  max-width: 250px;
}

/* Boss relic */
.relic-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 18px;
}

.relic-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(210px, 42vw);
  padding: 12px 10px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: linear-gradient(#211a40, #131029);
  text-align: center;
  font-size: var(--t-min);
  line-height: 1.35;
  cursor: pointer;
}

.relic-card b {
  font-family: var(--serif);
  font-size: 16px;
}

.relic-card.picked {
  border-color: var(--accent);
  box-shadow: 0 0 16px #f0c96a55;
}

.relic-card-art {
  width: 72px;
  height: 72px;
}

.relic-card-art svg {
  width: 100%;
  height: 100%;
}

/* Shop */
.shop-screen .room-art {
  max-height: 18vh;
}

.shop-sec {
  width: 100%;
  max-width: 1040px;
  margin-top: 10px;
}

.shop-sec h3 {
  margin: 8px 0;
  font-size: 16px;
  color: var(--muted);
  text-align: center;
}

.shop-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 22px 12px;
  justify-content: center;
}

.shop-lower {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 24px;
  width: 100%;
  max-width: 1040px;
}

.shop-lower .shop-sec {
  width: auto;
}

.shop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.shop-item {
  position: relative;
  padding: 0 0 18px;
  border: 0;
  background: none;
  cursor: pointer;
  transition: transform 0.12s;
}

.shop-item:hover {
  transform: translateY(-3px);
}

.shop-item .card {
  --w: var(--gw, var(--fw));
}

.shop-item.sold {
  cursor: default;
  display: grid;
  place-items: center;
  width: var(--gw, var(--fw));
  height: calc(var(--gw, var(--fw)) * 1.4 + 18px);
  border-radius: 10px;
  border: 2px dashed #26345c;
}

.shop-row .shop-item.sold,
.shop-item.sold.service {
  width: 96px;
  height: 112px;
}

.sold-tag {
  color: #4d5d90;
  font-weight: 700;
}

.shop-ic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 96px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #111a31e6;
}

.shop-art {
  width: 52px;
  height: 52px;
}

.shop-art svg {
  width: 100%;
  height: 100%;
}

.shop-name {
  font-size: var(--t-min);
  line-height: 1.2;
  min-height: 2.4em;
  text-align: center;
}

.price {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 9px;
  border-radius: 99px;
  background: #0c1122;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: max(var(--t-min), 13px);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sale-tag {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 3;
  padding: 1px 6px;
  border-radius: 6px;
  background: #1f3b2a;
  border: 1px solid #3e7a55;
  color: var(--good);
  font-size: var(--t-min);
  font-weight: 700;
}

.price-line {
  text-align: center;
  font-weight: 600;
}

.remove-art {
  display: grid;
  place-items: center;
}

/* Camp */
.camp-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 16px;
}

.camp-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(220px, 42vw);
  padding: 14px 10px;
  border-radius: 14px;
  border: 2px solid var(--line);
  background: linear-gradient(#1a2546, #121b34);
  text-align: center;
  font-size: var(--t-min);
  line-height: 1.35;
  cursor: pointer;
}

.camp-opt:hover:not(:disabled) {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.camp-opt:disabled {
  opacity: 0.5;
  cursor: default;
}

.camp-opt b {
  font-family: var(--serif);
  font-size: 20px;
}

.camp-ic {
  width: 48px;
  height: 48px;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.camp-ic.heart {
  color: #ff8787;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-5.3-8-11a4.5 4.5 0 0 1 8-2.8A4.5 4.5 0 0 1 20 10c0 5.7-8 11-8 11z'/%3E%3C/svg%3E");
}

.camp-ic.anvil {
  color: #c9d0ee;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 8h13c0 2 2 3 5 3v2c-3 0-5 1-6 3l1 3H6l1-3c-1-2-3-3-4-3z'/%3E%3C/svg%3E");
}

.camp-result {
  margin-top: 14px;
}

/* Events */
.event-text {
  max-width: 560px;
  margin: 14px auto 0;
  line-height: 1.5;
  font-size: 16px;
  text-align: center;
}

.event-opts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(520px, 100%);
  margin-top: 16px;
}

.event-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(#1a2546, #121b34);
  text-align: left;
  cursor: pointer;
}

.event-opt:hover:not(:disabled) {
  border-color: var(--accent);
}

.event-opt:disabled {
  opacity: 0.55;
  cursor: default;
}

.eo-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.eo-text span {
  font-size: var(--t-min);
  color: #c7cff0;
}

.eo-text em {
  font-size: var(--t-min);
  color: var(--bad);
  font-style: normal;
}

/* Treasure */
.chest-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 16px 30px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 20px;
}

.chest-art {
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 0 24px #f0c96a66);
  animation: chest-bob 2s ease-in-out infinite;
}

.chest-art svg {
  width: 100%;
  height: 100%;
}

@keyframes chest-bob {
  50% {
    transform: translateY(-6px);
  }
}

.treasure-items {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 16px;
}

.treasure-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: min(240px, 80vw);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #111a31e6;
  text-align: center;
  font-size: var(--t-min);
  animation: pop-in 0.4s ease-out;
}

.treasure-item b {
  font-family: var(--serif);
  font-size: 16px;
}

.treasure-art {
  width: 72px;
  height: 72px;
}

.treasure-art svg {
  width: 100%;
  height: 100%;
}

@keyframes pop-in {
  from {
    transform: scale(0.7);
    opacity: 0;
  }
}

/* Item details (relics and Elixirs in modals) */
.item-detail {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 420px;
}

.item-big {
  width: 84px;
  height: 84px;
  flex: none;
}

.item-big svg {
  width: 100%;
  height: 100%;
}

.item-words p {
  margin: 6px 0 0;
  line-height: 1.4;
}

.item-kind {
  font-size: var(--t-min);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.elixir-detail {
  display: flex;
  align-items: center;
  gap: 14px;
}

.elixir-big {
  width: 72px;
  height: 72px;
  flex: none;
}

.elixir-big svg {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------------
   Modals, toasts and tooltips
   --------------------------------------------------------------------------- */

.mc-modal {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--edge-t, 0px) + 8px) calc(var(--edge-r, 0px) + 8px) calc(var(--edge-b, 0px) + 8px) calc(var(--edge-l, 0px) + 8px);
  background: #05091acc;
  animation: fade-in 0.15s ease-out;
}

.modal-box {
  display: flex;
  flex-direction: column;
  max-width: min(520px, 100%);
  max-height: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(#18234200, #111a31), #111a31;
  box-shadow: 0 12px 40px #000c;
}

.modal-box.wide {
  width: min(960px, 100%);
  max-width: 100%;
}

/* A phone held upright: a wide dialog (the deck, the codex's cards) takes
   the play area's width, so two readable cards fit a row. */
.mc.narrow .mc-modal {
  padding-right: var(--edge-r, 0px);
  padding-left: var(--edge-l, 0px);
}

.mc.narrow .modal-box.wide {
  padding-right: 6px;
  padding-left: 6px;
  border-width: 1px 0;
}

.modal-title {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 22px;
  text-align: center;
}

.modal-body {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  touch-action: pan-y;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2f3e66 transparent;
}

.modal-body > p {
  line-height: 1.45;
}

.modal-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 14px;
}

.zoom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 4px;
}

.zoom-modal {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.compare {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 6px;
}

.compare .card.zoomed {
  --w: max(var(--fw), min(190px, 38vw));
}

/* Narrow: before above, after below. */
.mc.narrow .compare {
  flex-direction: column;
}

.mc.narrow .compare-arrow {
  transform: rotate(90deg);
}

.compare-arrow {
  width: 28px;
  height: 28px;
  flex: none;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h10V5l7 7-7 7v-5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 10h10V5l7 7-7 7v-5H4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.confirm-card .kw-panel {
  margin: 8px auto 0;
}


.map-modal .modal-body {
  overflow: hidden;
}

.map-peek {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.map-peek .map-legend {
  border: 0;
  background: none;
}

.tips p {
  margin: 6px 0;
  line-height: 1.45;
}

.mc-toast {
  position: absolute;
  z-index: 70;
  right: calc(var(--edge-r, 0px) + 8px);
  top: calc(var(--edge-t, 0px) + 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  width: min(360px, 76%);
  pointer-events: none;
}

.toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px;
  border-radius: 10px;
  background: #111a31f2;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px #000a;
  font-size: max(var(--t-min), 14px);
  text-align: center;
  animation: toast-in 0.25s ease-out;
  transition:
    opacity 0.5s,
    transform 0.5s;
}

.toast span {
  font-size: var(--t-min);
  color: var(--muted);
}

.toast.achv,
.toast.relic {
  border-color: #7a6124;
}

.toast.achv b,
.toast.relic b {
  color: var(--accent);
}

.toast.heal b {
  color: var(--good);
}

.toast.out {
  opacity: 0;
  transform: translateY(-8px);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.mc-tip {
  position: absolute;
  z-index: 80;
  max-width: min(280px, 80%);
  padding: 8px 11px;
  border-radius: 9px;
  background: #0b1226f7;
  border: 1px solid #3a4a78;
  box-shadow: 0 6px 16px #000b;
  font-size: var(--t-min);
  line-height: 1.35;
  pointer-events: none;
}

.mc-tip b {
  color: var(--accent);
}

.mc-tip p {
  margin: 4px 0 0;
}

.tip-sub {
  display: block;
  font-size: var(--t-min);
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   The fight
   --------------------------------------------------------------------------- */

.combat {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(96px, auto) 1fr minmax(96px, auto);
  grid-template-rows: 1fr auto;
  grid-template-areas:
    'field field field'
    'left hand right';
  /* Clipped, not a scroller: nothing (a tap that brings a card into view,
     a focus) can scroll the fight inside itself. */
  overflow: hidden;
  overflow: clip;
}

.field {
  grid-area: field;
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  min-height: 0;
  padding: 34px 10px 8px;
}

.player-side {
  flex: 0 0 26%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.enemy-side {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.unit {
  --uw: var(--ew);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--uw);
  flex: none;
  transition:
    transform 0.2s,
    opacity 0.4s,
    filter 0.2s;
}

.unit-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.unit-art svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.unit.player .unit-art svg {
  filter: drop-shadow(0 0 10px #66d9e833);
}

.unit-bars {
  position: relative;
  width: min(100%, 150px);
  min-width: 72px;
  margin-top: 2px;
}

.hp-bar {
  position: relative;
  height: 20px;
  border-radius: 8px;
  background: #3a1520;
  border: 1px solid #000a;
  overflow: hidden;
}

.hp-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#ff7b7b, #c9303d);
  transition: width 0.25s;
}

.unit.has-block .hp-fill {
  background: linear-gradient(#a6d8ff, #3f7fc4);
}

.hp-venom {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  left: 0;
  background: repeating-linear-gradient(45deg, #9be15dcc, #9be15dcc 4px, #6aa83acc 4px, #6aa83acc 8px);
  pointer-events: none;
}

.hp-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--t-min);
  line-height: 1;
  font-weight: 800;
  text-shadow:
    0 1px 2px #000,
    0 0 3px #000;
  font-variant-numeric: tabular-nums;
}

.block-badge {
  position: absolute;
  left: -12px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  background: linear-gradient(#bfe3ff, #3f7fc4);
  clip-path: polygon(50% 0, 100% 15%, 92% 70%, 50% 100%, 8% 70%, 0 15%);
  font-size: var(--t-min);
  font-weight: 800;
  color: #06142e;
}

.statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 6px;
  min-height: 26px;
  max-width: max(100%, 120px);
  margin-top: 3px;
}

/* Icons, not buttons: a mouse over one shows what it does, a tap on the unit lists them all. */
.status {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  padding: 1px;
  border-radius: 6px;
  background: #0f1730d0;
}

.status.debuff {
  background: #2a1426d0;
}

.status-ic,
.status-ic svg {
  display: block;
  width: 100%;
  height: 100%;
}

.status-n {
  position: absolute;
  right: -5px;
  bottom: -6px;
  font-size: var(--t-min);
  line-height: 1;
  font-weight: 800;
  text-shadow:
    0 0 2px #000,
    0 1px 2px #000;
}

.unit-name {
  margin-top: 1px;
  max-width: calc(var(--uw) + 6px);
  font-size: var(--t-min);
  font-weight: 600;
  line-height: 1.15;
  color: #c7cff0;
  text-align: center;
  text-shadow: 0 1px 2px #000;
}


.intent {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px 1px 2px;
  border-radius: 99px;
  background: #0b1226e0;
  border: 1px solid #2f3e66;
  cursor: pointer;
  white-space: nowrap;
  animation: intent-bob 1.8s ease-in-out infinite;
}

.intent-ic,
.intent-ic svg {
  display: block;
  width: 24px;
  height: 24px;
}

.intent-ic.small,
.intent-ic.small svg {
  width: 16px;
  height: 16px;
}

.intent-n {
  font-weight: 800;
  font-size: 15px;
  color: #ffd2d2;
  font-variant-numeric: tabular-nums;
}

.intent.big-hit {
  border-color: #c9303d;
  box-shadow: 0 0 10px #c9303d88;
}

.intent.big-hit .intent-n {
  color: #ff8a8a;
}

@keyframes intent-bob {
  50% {
    transform: translate(-50%, -3px);
  }
}

.unit.boss .unit-name {
  color: #d9c9ff;
}

.unit.targeted .unit-art {
  filter: drop-shadow(0 0 8px #ff6b6b) drop-shadow(0 0 2px #ff6b6b);
}

.combat.targeting .unit.enemy {
  cursor: crosshair;
}

.combat.targeting .unit.enemy:not(.targeted) {
  opacity: 0.85;
}

.unit.enemy.hurt .unit-art,
.unit.player.hurt .unit-art {
  animation: hurt 0.3s;
}

@keyframes hurt {
  0%,
  100% {
    transform: translateX(0);
    filter: none;
  }
  20% {
    transform: translateX(-6px);
    filter: brightness(2) saturate(0.4);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-3px);
  }
}

.unit.enemy.lunge {
  animation: lunge 0.35s;
}

@keyframes lunge {
  40% {
    transform: translateX(-24px) scale(1.04);
  }
}

.unit.enemy.acting .unit-art {
  filter: brightness(1.3);
}

.unit.dying {
  opacity: 0;
  transform: translateY(12px) scale(0.85);
  filter: grayscale(1) brightness(1.6);
  transition:
    opacity 0.6s,
    transform 0.6s,
    filter 0.3s;
  pointer-events: none;
}

.unit.fleeing {
  transform: translateX(80px);
}

.unit.summoned {
  animation: summon-in 0.45s ease-out;
}

@keyframes summon-in {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.6);
  }
}

.unit-extra {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}

.resolve,
.tide {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px 1px 3px;
  border-radius: 99px;
  border: 1px solid #7a6124;
  background: #2a2110e6;
  font-size: max(var(--t-min), 13px);
  font-weight: 800;
}

.resolve.zero {
  opacity: 0.6;
}

.res-ic {
  width: 16px;
  height: 16px;
  background: radial-gradient(circle at 35% 35%, #fff2c2, #e0a340 60%, #95611b);
  clip-path: polygon(50% 0, 100% 20%, 90% 75%, 50% 100%, 10% 75%, 0 20%);
}

.tide {
  border-color: #2f8fb0;
  background: #0d2733e6;
}

.tide-ic {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(#bff4fb 50%, #2f8fb0 50%);
}

.tide.tide-low .tide-ic {
  background: linear-gradient(#0d2733 60%, #2f8fb0 60%);
}

.tide.spring {
  border-color: var(--accent);
}

/* Energy, piles and End turn */
.ctl-left,
.ctl-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 8px 10px;
  z-index: 6;
}

.ctl-left {
  grid-area: left;
}

.ctl-right {
  grid-area: right;
}

.energy {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d0, #f0c96a 45%, #9c7422);
  border: 3px solid #3b2d0e;
  box-shadow: 0 0 16px #f0c96a66;
  color: #2a1d04;
  font-weight: 900;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.energy.empty {
  background: radial-gradient(circle at 35% 30%, #8a8474, #4f4a3c 55%, #2c281f);
  box-shadow: none;
  color: #1a1710;
}

.energy.pulse {
  animation: pulse 0.4s;
}

@keyframes pulse {
  50% {
    transform: scale(1.18);
  }
}

.pile {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 58px;
  height: 44px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #111a31e6;
  font-weight: 700;
  cursor: pointer;
}

.pile.draw .pile-ic {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3C/svg%3E");
}

.pile.discard .pile-ic {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='3' width='14' height='18' rx='2' transform='rotate(12 12 12)' fill='none' stroke='black' stroke-width='2.5'/%3E%3C/svg%3E");
}

.pile.faded .pile-ic {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 6 6 6 12a6 6 0 0 1-12 0c0-3 2-5 3-7 0 2 1 3 2 3 0-3 0-5 1-8z'/%3E%3C/svg%3E");
  color: #b18cff;
}

.piles {
  display: flex;
  gap: 8px;
}

.end-turn {
  min-width: 112px;
  min-height: 48px;
  font-size: 16px;
}

.end-turn kbd {
  font-size: var(--t-min);
  background: #0003;
  border-color: #0004;
  color: #2a1d04;
}

.combat.enemy-phase .end-turn {
  opacity: 0.5;
}

/* The hand */
.combat-bottom {
  grid-area: hand;
  position: relative;
  height: var(--band, calc(var(--cw) * 1.4 + 34px));
  min-width: 0;
  z-index: 8;
}

.hand {
  position: absolute;
  inset: 0;
}

.card.in-hand {
  position: absolute;
  left: 0;
  bottom: 22px;
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
  transform-origin: 50% 100%;
  transition:
    transform 0.18s ease-out,
    opacity 0.2s,
    box-shadow 0.15s;
  touch-action: none;
}

.card.in-hand.entering {
  opacity: 0;
  transform: translate(calc(var(--x, 0) - 180px), 40px) rotate(-20deg) scale(0.6);
}

.card.in-hand.playable .card-frame {
  box-shadow:
    0 0 0 2px #8ce99a66,
    0 0 10px #8ce99a55;
}

.card.in-hand.unplayable {
  filter: brightness(0.72);
}

.card.in-hand.selected {
  box-shadow:
    0 0 0 3px var(--accent),
    0 0 20px #f0c96acc;
}

.card.in-hand.dragging {
  transform: translate(calc(var(--x, 0) + var(--dx, 0px)), calc(var(--y, 0) + var(--dy, 0px))) rotate(0deg) scale(1.05);
  transition: none;
  z-index: 100 !important;
}

.card.in-hand.will-play {
  box-shadow:
    0 0 0 3px var(--good),
    0 0 24px #8ce99a;
}

.card.in-hand.shake {
  animation: card-shake 0.3s;
}

@keyframes card-shake {
  25% {
    margin-left: -6px;
  }
  75% {
    margin-left: 6px;
  }
}

.card.flying {
  position: absolute;
  z-index: 90;
  margin: 0;
  bottom: auto;
  transform: none;
  pointer-events: none;
  transition: none;
}

.card-key {
  position: absolute;
  left: 50%;
  bottom: calc(-0.2em - 4px);
  transform: translateX(-50%);
  font-size: var(--t-min);
  line-height: 1;
  font-weight: 700;
  color: #7d8ab8;
}

/* Key hints follow the last input: none after a touch. */
.mc.narrow .card-key,
.mc.short .card-key,
.mc.in-touch .card-key,
.mc.in-touch .end-turn kbd {
  display: none;
}

.mc.narrow .card.in-hand,
.mc.short .card.in-hand {
  bottom: 8px;
}

/* Peeking (a phone held sideways): the hand shows the top of each card, and
   the picked-up card rises all the way into view (combat.js, layoutHand()). */
.mc.peek .card.in-hand {
  bottom: calc(8px - var(--hand-drop, 0px));
}

.mc.peek .combat {
  grid-template-rows: minmax(0, 1fr) var(--band);
}

.mc.peek .combat-bottom {
  height: auto;
}

.mc.peek .ctl-left,
.mc.peek .ctl-right {
  align-self: end;
  padding-bottom: 4px;
}

.mc.peek .ctl-left {
  flex-direction: row;
  align-items: flex-end;
}

.mc.peek .ctl-right {
  align-items: flex-end;
}

/* Overlays in the fight */
.play-hint {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(var(--band, calc(var(--cw) * 1.4 + 20px)) + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: min(560px, 92%);
  pointer-events: none;
}

/* On wide screens the top of the field is open sky: show the hint there, clear of the enemies. */
.mc:not(.narrow):not(.short) .play-hint {
  top: 12px;
  bottom: auto;
}

.hint-line {
  padding: 5px 12px;
  border-radius: 99px;
  background: #0b1226e6;
  border: 1px solid var(--line);
  font-size: var(--t-min);
  text-align: center;
}

.play-hint.bad .hint-line {
  border-color: #8a3444;
  color: #ffb3b3;
}

.play-hint .kw-panel {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 560px;
}

.play-hint .kw-item {
  max-width: 260px;
}

/* The selected card, big, at the top left: above the player, clear of the foes. */
.card-preview {
  position: absolute;
  z-index: 25;
  left: 8px;
  right: 8px;
  top: 8px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}

.pv-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 240px;
  min-width: 0;
}

.pv-side .hint-line {
  border-radius: 10px;
  text-align: left;
}

.pv-side.bad .hint-line {
  border-color: #8a3444;
  color: #ffb3b3;
}



.mc.portrait .pv-side {
  max-width: none;
  flex: 1;
}

/* A phone held sideways: the picked-up card as readable text over the
   wayfarer, clear of the hand (combat.js, renderPreview()). */
.pv-panel {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 100%;
}

.pv-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 1 340px;
  min-width: 0;
}

.pv-card .hint-line {
  border-radius: 10px;
}

.pv-card .hint-line.bad {
  border-color: #8a3444;
  color: #ffb3b3;
}

.card-info {
  --frame: var(--line);
  padding: 8px 12px 10px;
  border-radius: 10px;
  border: 2px solid var(--frame);
  background: #0f1730f2;
  box-shadow: 0 6px 16px #000b;
  line-height: 1.3;
}

.card-info.t-attack {
  --frame: #c4574b;
}

.card-info.t-skill {
  --frame: #4d86c4;
}

.card-info.t-power {
  --frame: #c49a3a;
}

.card-info.t-curse {
  --frame: #7d4a92;
}

.ci-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ci-cost {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #b9e6ff, #3d86d8 55%, #1d4a8c);
  border: 2px solid #0b1330;
  color: #fff;
  font-weight: 800;
}

.ci-name {
  font-family: var(--serif);
  font-size: max(var(--t-min), 16px);
}

.card-info.up .ci-name {
  color: var(--good);
}

.ci-type {
  margin-left: auto;
  color: var(--muted);
}

.ci-text {
  margin-top: 4px;
}

.ci-text .kw {
  color: var(--accent);
}

.ci-text .num {
  font-weight: 800;
}

.ci-text .num.up {
  color: var(--good);
}

.ci-text .num.down {
  color: var(--bad);
}

.pending {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  background: #05091ab8;
}

.pending-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #111a31;
}

.pending-box h3 {
  margin: 0 0 10px;
  font-family: var(--serif);
  text-align: center;
}

.pending-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  overflow-y: auto;
  padding: 6px;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.pending-cards .card {
  --w: var(--gw, var(--fw));
}

.pending-btns {
  margin-top: 10px;
}

.turn-banner {
  position: absolute;
  z-index: 30;
  left: 0;
  right: 0;
  top: 38%;
  padding: 10px 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: 1px;
  background: linear-gradient(90deg, transparent, #0b1226e6 25%, #0b1226e6 75%, transparent);
  opacity: 0;
  transform: scaleY(0.2);
  transition:
    opacity 0.2s,
    transform 0.2s;
  pointer-events: none;
}

.turn-banner.show {
  opacity: 1;
  transform: none;
}

.turn-banner.enemy {
  color: #ff9a9a;
}

.turn-banner.win {
  color: var(--accent);
}

.turn-banner.lose {
  color: #ff6b6b;
}

.turn-banner.boss,
.turn-banner.elite {
  color: #d9c9ff;
}

.target-arrow {
  position: absolute;
  inset: 0;
  z-index: 95;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.target-arrow path {
  fill: none;
  stroke: #ff6b6b;
  stroke-width: 5;
  stroke-dasharray: 10 6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px #ff6b6b);
}

.target-arrow circle {
  fill: none;
  stroke: #ff6b6b;
  stroke-width: 4;
}

.float {
  position: absolute;
  z-index: 35;
  transform: translate(-50%, 0);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
  text-shadow:
    0 2px 3px #000,
    0 0 6px #000;
  pointer-events: none;
  animation: float-up 1.05s ease-out forwards;
}

.float.f-dmg {
  color: #ff5c5c;
  font-size: 26px;
}

.float.f-venom {
  color: var(--venom);
}

.float.f-heal {
  color: var(--good);
}

.float.f-block,
.float.f-blocked {
  color: var(--block);
}

.float.f-buff {
  color: #ffe08a;
  font-size: 16px;
}

.float.f-debuff {
  color: #d0a3ff;
  font-size: 16px;
}

.float.f-move {
  color: #e8ecff;
  font-size: 15px;
  font-weight: 700;
}

.float.f-tide {
  color: var(--accent-2);
  font-size: 17px;
}

@keyframes float-up {
  0% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -46px) scale(1);
  }
}

/* Enemy idle animations (classes inside the SVGs). */
.unit-art .bob {
  animation: bob 3s ease-in-out infinite;
}

.unit-art .sway {
  animation: sway 4s ease-in-out infinite;
  transform-origin: 50% 100%;
  transform-box: fill-box;
}

.unit-art .flap {
  animation: flap 0.9s ease-in-out infinite;
}

.unit-art .glow {
  animation: glow 2.4s ease-in-out infinite;
}

@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
}

@keyframes sway {
  50% {
    transform: rotate(2.5deg);
  }
}

@keyframes flap {
  50% {
    transform: scaleY(0.82);
  }
}

@keyframes glow {
  50% {
    opacity: 0.55;
  }
}

/* Phone and short layouts for the fight */
.mc.portrait .combat {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr auto auto;
  grid-template-areas:
    'field field'
    'left right'
    'hand hand';
}

.mc.portrait .field {
  align-items: flex-end;
  padding-top: 40px;
}

.mc.portrait .player-side {
  flex-basis: 28%;
  align-items: flex-end;
}

.mc.portrait .enemy-side {
  align-items: flex-end;
  flex-wrap: wrap;
  align-content: flex-end;
  row-gap: 34px;
}

.mc.portrait .ctl-left,
.mc.portrait .ctl-right {
  flex-direction: row;
  align-items: center;
  padding: 0 8px 4px;
}

.mc.portrait .ctl-left {
  justify-content: flex-start;
}

.mc.portrait .ctl-right {
  justify-content: flex-end;
}

.mc.portrait .energy {
  width: 50px;
  height: 50px;
  font-size: 17px;
}

.mc.portrait .end-turn {
  min-width: 96px;
  min-height: 44px;
}

.mc.portrait .play-hint {
  bottom: calc(var(--band, calc(var(--cw) * 1.4 + 20px)) + 64px);
}

.mc.short .field {
  padding-top: 30px;
}

.mc.short .energy {
  width: 46px;
  height: 46px;
  font-size: 16px;
}

.mc.short .end-turn {
  min-width: 90px;
  min-height: 44px;
  font-size: max(var(--t-min), 14px);
}

.mc.short .ctl-left,
.mc.short .ctl-right {
  gap: 8px;
  padding-bottom: 6px;
}

.mc.short .statuses {
  min-height: 22px;
}

.mc.short .status {
  width: 22px;
  height: 22px;
}

.mc.short .play-hint .kw-panel {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .intent,
  .map-node.s-reachable,
  .map-lines .e-open,
  .unit-art .bob,
  .unit-art .sway,
  .unit-art .flap,
  .unit-art .glow,
  .chest-art {
    animation: none !important;
  }
}

/* Landscape phones: foes are small, so their names live in the tooltip. */
.mc.short .enemy-side .unit-name {
  display: none;
}

/* Keyword highlights keep the size and font of the text around them. */
b.kw {
  font-family: inherit;
  font-size: inherit;
  color: var(--accent);
}

/* Small portrait HUD: Silver joins the inventory row, keeping HP and all
   three navigation controls on one row even at 360 px. Short landscapes
   use one Elixirs inventory button so the battlefield keeps its height. */
.elixirs-btn {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.elixirs-btn span, .elixirs-btn svg { display: block; width: 100%; height: 100%; }
.elixirs-btn b { position: absolute; right: 1px; bottom: 1px; font-size: var(--t-min); }
.elixir-list { display: grid; gap: 8px; }
.mc.compact-top .top-hpbar { width: 60px; }

/* Large desktops keep readable card faces and make the SVG figures use
   their battlefield. The page also uses the available screen height. */
@media (min-width: 1900px) {
  :root { --t-min: 28px; }
  .game-root { max-width: none; max-height: none; }
  .top-hpbar { height: 34px; width: 150px; }
  .top-avatar { width: 44px; height: 44px; }
}
@media (min-height: 1000px) { .game-root { max-height: none; } }

@media (prefers-reduced-motion: reduce) {
  /* Calm decoration; action and result feedback keep their timing. */
  .card.in-hand.shake, .relic.flash, .relics-btn.flash { animation: none; }
  .act-intro, .toast { animation: none; transition: none; }
}
/* A small upright phone can peek too; its third grid row needs the same
   explicit hand band as the landscape grid's second row. */
.mc.portrait.peek .combat-bottom { height: var(--band); }

/* A crowded hand keeps 48 px card strips. Native horizontal scrolling
   exposes the rest; vertical drags still play cards, and the preview reads
   the chosen card outside the scrolling strip. */
.mc.scroll-hand .hand { overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: thin; }
.mc.scroll-hand .card.in-hand { touch-action: pan-x; }
.mc.scroll-hand .combat-bottom::after {
  content: 'Scroll hand';
  position: absolute;
  left: 8px;
  bottom: 2px;
  z-index: 70;
  font-size: var(--t-min);
  color: var(--muted);
  background: var(--bg);
  pointer-events: none;
}
.mc.in-touch.scroll-hand .combat-bottom::after { content: 'Swipe hand'; }