/* Last Call - a daily Kegs of Eternity puzzle.
   Cards are authored in the game's own 334x512 CardUI prefab space and scaled as a unit (see .card). */

@font-face { font-family: "Ortica"; src: url("fonts/Ortica-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Grenze"; src: url("fonts/Grenze-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
/* The fight HUD's numbers in the game (HP bars, Block); Ray Larabie, CC0. */
@font-face { font-family: "Fragile Bombers"; src: url("fonts/FragileBombers.otf") format("opentype"); font-display: swap; }

:root {
  --bg-0: #0d0907;
  --bg-1: #17110c;
  --bg-2: #221912;
  --wood: #3b2a1c;
  --wood-hi: #5a4029;
  --line: rgba(255, 214, 140, 0.16);
  --ink: #efe6d6;
  --ink-soft: #cbbda6;
  --muted: #9a8a76;
  --amber: #f2b544;
  --amber-hi: #ffd98a;
  --foam: #fff4dc;
  --blood: #e0463c;
  --blood-dark: #7a1712;
  --block: #6fb6ef;
  --good: #8fd06a;
  --steam: #66c0f4;
  --steam-2: #417a9b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  --radius: 10px;
  --display: "Ortica", "Palatino Linotype", Georgia, serif;
  --text: "Grenze", "Palatino Linotype", Georgia, serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --card-s: 0.42;      /* hand card scale, set per layout */
  --hand-h: 230px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg-0); color: var(--ink); }
body {
  font-family: var(--text);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }
a { color: var(--amber-hi); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------------ app frame */
#app {
  position: relative;
  height: 100dvh;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto 28px auto;
  grid-template-areas: "top" "field" "hud" "hint" "hand";
  overflow: hidden;
  isolation: isolate;
}
#app::before {  /* the mead hall, dimmed so the fighters read first */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 42%, rgba(13, 9, 7, 0.15) 0%, rgba(13, 9, 7, 0.72) 62%, rgba(13, 9, 7, 0.96) 100%),
    url("img/scenes/halls_tall.webp") center 30% / cover no-repeat;
  filter: saturate(0.85);
  z-index: -2;
}
@media (min-aspect-ratio: 1/1) {
  #app::before {
    background:
      radial-gradient(90% 80% at 50% 45%, rgba(13, 9, 7, 0.1) 0%, rgba(13, 9, 7, 0.7) 65%, rgba(13, 9, 7, 0.96) 100%),
      url("img/scenes/halls_wide.webp") center 35% / cover no-repeat;
  }
}
/* The room (app.js placeScene): the day's scene fills the window behind the app, and the bar counter lies across its
   bottom under the cards, wide or tall to match the window. They show while body.has-scene is set, in place of the old
   hall above. */
#scene, #counter { display: none; position: fixed; left: 0; right: 0; pointer-events: none; }
/* Each day is shaded down to one brightness where the fighters stand (--scene-shade, from build_assets.py SCENE_LUMA) and
   a little of its colour taken out, so the fighters stand out alike on every day. */
body.has-scene #scene {
  display: block; top: 0; bottom: 0; z-index: -2;
  filter: brightness(var(--scene-shade, 1)) saturate(0.85);
  background:
    linear-gradient(to bottom, rgba(13, 9, 7, 0.82), rgba(13, 9, 7, 0) 110px),   /* under the top bar, edge to edge */
    radial-gradient(125% 100% at 50% 40%, rgba(13, 9, 7, 0) 55%, rgba(13, 9, 7, 0.55) 100%),
    var(--scene-img) 50% var(--scene-y) / var(--scene-w) var(--scene-h) no-repeat;
}
/* Below the strip, the bar top runs on into the dark in its last planks' colour. */
body.has-counter #counter {
  display: block; top: var(--counter-top); bottom: 0; z-index: -1;
  background:
    var(--counter-img) var(--counter-x, 0px) 0 / var(--counter-w) var(--counter-h) repeat-x,
    linear-gradient(to bottom, transparent var(--counter-h), var(--counter-fill) var(--counter-h), #1f100a);
}
/* The room runs the full width of the window, so the app's own bands would end in mid-air at its edges: the top bar
   sits on the scene's top shade instead, and the HUD's pieces carry their own backs. */
body.has-scene #app::before { display: none; }
body.has-scene .topbar { background: none; border-bottom-color: transparent; }
body.has-scene .hud { background: none; }
body.has-counter .hud::after { display: none; }

/* ------------------------------------------------------------------ top bar */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: linear-gradient(to bottom, rgba(13, 9, 7, 0.92), rgba(13, 9, 7, 0.55));
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; flex: none; text-decoration: none; }
.topbar > * { min-width: 0; }
.puzzle-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark { width: 30px; height: 30px; }
.brand-name {
  font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; white-space: nowrap;
  background: linear-gradient(180deg, var(--foam) 0%, var(--amber-hi) 45%, var(--amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}
.puzzle-meta { display: flex; flex-direction: column; line-height: 1.1; font-size: 13px; color: var(--ink-soft); min-width: 0; }
.puzzle-meta b { color: var(--ink); font-size: 14px; }
.diff { display: inline-flex; gap: 1px; vertical-align: -2px; }
.diff i { width: 10px; height: 12px; border-radius: 2px 2px 3px 3px; background: rgba(255, 255, 255, 0.14); display: inline-block; }
.diff i.on { background: linear-gradient(180deg, var(--foam) 0 28%, var(--amber) 28% 100%); }
.top-actions { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center;
  color: var(--ink-soft); transition: background 0.15s, color 0.15s;
}
.icon-btn:hover, .icon-btn:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--ink); }
/* a finger-sized hit area around the small round buttons, without moving anything */
.icon-btn { position: relative; }
.icon-btn::after { content: ""; position: absolute; inset: -5px; }
.icon-btn svg { width: 20px; height: 20px; }
.btn-steam {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 3px;
  background: linear-gradient(to bottom, #67c1f5 5%, #417a9b 95%);
  color: #fff; font-family: var(--ui); font-weight: 600; font-size: 14px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(102, 192, 244, 0.25);
  transition: filter 0.15s, transform 0.15s;
}
.btn-steam:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn-steam svg { width: 18px; height: 18px; }
.btn-steam.small { padding: 6px 10px; font-size: 13px; }

/* ------------------------------------------------------------------ battlefield */
.field {
  grid-area: field;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  align-items: end;
  padding: 8px 10px 0;
  min-height: 0;
  container-type: inline-size;   /* cqw for the fighters' scale */
}
.side { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; min-height: 0; gap: 4px; }
.side.enemies { justify-content: space-evenly; }

.fighter { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; flex: 1 1 0; height: 100%; justify-content: flex-end; }
/* A black outline round every fighter, drawn here over the art rather than baked into it: four hard shadows, one to each
   side, trace the picture's own edge. Every filter a sprite takes starts with them (a hit flash or a death changes the art,
   never the line: black stays black). --ol is the line's width. After the line, a soft dark halo (--halo) sets the fighter
   off from a busy room: invisible on a dark day, a shadow round the figure on a bright one. */
.fighter {
  --ol: 1px;
  --halo: drop-shadow(0 0 18px rgba(0, 0, 0, 0.72));
  --outline: drop-shadow(var(--ol) 0 0 #000) drop-shadow(calc(var(--ol) * -1) 0 0 #000)
             drop-shadow(0 var(--ol) 0 #000) drop-shadow(0 calc(var(--ol) * -1) 0 #000) var(--halo);
}
.fighter .sprite-wrap { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
/* --k is the fighter's height on a common scale, as a share of its slot (app.js spriteScale): renders are cropped to the
   model, so without it a bug would stand as tall as a troll. The slot counts only as tall as the dwarf's column can hold a
   dwarf at that scale (66% of the field's width, 640px at most), or a tall window would stretch everyone but him. */
.fighter .sprite {
  max-width: 100%; max-height: calc(var(--k, 1) * min(100%, 640px)); max-height: calc(var(--k, 1) * min(100%, 640px, 66cqw));
  object-fit: contain; object-position: bottom; filter: var(--outline) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); transform-origin: 50% 100%;
}
/* A slot narrower than its fighter would shrink it below the scale: a wide dwarf on a phone, a golem among three enemies.
   They may spill a little, as a group does: enemies into their neighbours (clicks go through the picture to the slot
   under it), the hero only toward them. */
.side.enemies .fighter .sprite { max-width: 140%; pointer-events: none; }
.fighter.hero .sprite { max-width: 130%; }
.fighter.hero .sprite-wrap { justify-content: safe center; }
.fighter .ground {
  position: absolute; left: 10%; right: 10%; bottom: -6px; height: 18px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent); z-index: -1;
}
.fighter.enemy { cursor: default; }
.fighter.enemy.targetable { cursor: pointer; }
.fighter.enemy.targetable .sprite { animation: target-pulse 1.1s ease-in-out infinite; }
@keyframes target-pulse {
  0%, 100% { filter: var(--outline) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 0 rgba(242, 181, 68, 0)); }
  50%      { filter: var(--outline) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 14px rgba(242, 181, 68, 0.95)); }
}
.fighter.dead .sprite { filter: var(--outline) grayscale(1) brightness(0.45); opacity: 0.55; transform: translateY(8px) rotate(-3deg); transition: all 0.6s ease-in; }
.fighter.dead .bars { opacity: 0.35; }
.fighter.departed .sprite { opacity: 0; transform: translateX(60px); transition: all 0.7s ease-in; }
.fighter.departed .bars { opacity: 0.25; }
.intent .intent-if { color: #ffd98a; margin-left: 1px; }
.intent img.intent-summon { width: 1.4em; height: 1.4em; object-fit: contain; }

.bars { --hp-h: 18px; width: min(100%, 190px); margin-top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; z-index: 2; }
.name { font-family: var(--display); font-size: 14px; text-align: center; color: var(--ink); text-shadow: 0 2px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The game's HP bar (CustomProgressBar.prefab; its pieces come from Tools/LastCall/assets/build_assets.py hpbar), in the
   prefab's proportions to the bar's height --hp-h: a dark gradient well; inset from the frame, the fill (a light-over-dark
   strip tinted #CF4122) over the same strip in #800000, which marks the HP a hit is taking and drains after the fill as
   the game's catch-up does; the numbers in the game's font with its black outline and drop; the thin frame over it all. */
.hp-row { position: relative; display: flex; align-items: center; }
.hpbar { position: relative; flex: 1; height: var(--hp-h); border-radius: calc(var(--hp-h) * 0.08); background: url("img/ui/hp_well.webp") 0 0 / 100% 100%; }
.hpbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border: 0 solid transparent;
  border-image: url("img/ui/hp_frame.webp") 25 95 / calc(var(--hp-h) * 0.256) calc(var(--hp-h) * 0.974) stretch;
}
.hpbar .well { position: absolute; inset: calc(var(--hp-h) * 0.077) calc(var(--hp-h) * 0.154); overflow: hidden; }
.hpbar .ghost, .hpbar .fill { position: absolute; left: 0; top: 0; bottom: 0; background: 0 0 / 100% 100% no-repeat; }
.hpbar .ghost { background-image: url("img/ui/hp_lost.webp"); transition: width 0.6s ease-in 0.35s; }
.hpbar .fill { background-image: url("img/ui/hp_fill.webp"); transition: width 0.18s ease-out; }
.hpbar .txt, .block-badge {
  font-family: "Fragile Bombers", var(--ui); line-height: 1; color: #fff; white-space: nowrap;
  -webkit-text-stroke: calc(var(--hp-h) * 0.12) #000; paint-order: stroke fill; text-shadow: calc(var(--hp-h) * 0.05) calc(var(--hp-h) * 0.07) 0 #000;
}
.hpbar .txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--hp-h) * 0.88); }   /* digits ~62% of the bar */
/* Block: the game's shield, hanging off the bar's left end over its cap (FighterUI.prefab); the bar stays put as it comes
   and goes. */
.block-badge {
  position: absolute; z-index: 1; left: calc(var(--hp-h) * -1.1); top: calc(50% - var(--hp-h) * 0.8);
  width: calc(var(--hp-h) * 1.66); height: calc(var(--hp-h) * 1.72); display: grid; place-items: center; padding-bottom: calc(var(--hp-h) * 0.22);
  background: url("img/attr/agility.webp") center / contain no-repeat; font-size: calc(var(--hp-h) * 1.05);
  transition: transform 0.15s;
}
.block-badge.zero { visibility: hidden; }
@media (max-width: 559px) {
  /* Narrow slots: over the bar's left end instead, not into the next fighter's bar or off the screen, the numbers making
     room for it. */
  .block-badge { left: calc(var(--hp-h) * -0.4); }
  .hp-row:has(.block-badge:not(.zero)) .txt { padding-left: calc(var(--hp-h) * 1.26); }
}
.chips { display: flex; flex-wrap: wrap; gap: 3px; justify-content: flex-start; min-height: 28px; }   /* left-aligned, as in the game */
.chip {
  position: relative; width: 24px; height: 24px; border-radius: 5px; background: rgba(0, 0, 0, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); cursor: help;
}
.chip img { width: 100%; height: 100%; object-fit: contain; padding: 1px; }
.chip span { position: absolute; right: -3px; bottom: -4px; font-family: var(--ui); font-weight: 800; font-size: 11px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }

/* Over the head, as in the game (--sprite-h is the sprite's drawn height, app.js), never higher than the top of the slot. */
.intent {
  position: absolute; bottom: min(calc(var(--sprite-h, 100%) + 6px), calc(100% - 1.95em)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.15em; padding: 0.15em 0.55em 0.15em 0.3em; border-radius: 2em;
  background: rgba(10, 7, 5, 0.82); box-shadow: 0 0 0 1.5px rgba(242, 181, 68, 0.55), 0 3px 10px rgba(0, 0, 0, 0.6);
  /* Sized from the screen: it floats alone over the fighter, away from the HUD, so it has to be big enough to find at a glance. */
  font-family: var(--ui); font-weight: 800; font-size: clamp(16px, 1.6vmin + 9px, 26px); color: #fff; text-shadow: 0 1px 2px #000;
  z-index: 3; cursor: help; white-space: nowrap;
}
.intent img { width: 1.5em; height: 1.5em; }
.intent.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }

/* floating combat text */
.pop {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, 0);
  font-family: var(--display); font-size: 34px; color: #fff; pointer-events: none; white-space: nowrap; z-index: 20;
  -webkit-text-stroke: 5px #000; paint-order: stroke fill;
  animation: pop-rise 1.05s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.pop.dmg { color: #ff5b4d; font-size: 40px; }
.pop.big { font-size: 54px; }
.pop.blocked { color: var(--block); font-size: 26px; }
.pop.armor { color: #c9c9c9; font-size: 22px; }
.pop.buff { color: var(--amber-hi); font-size: 24px; }
.pop.heal { color: var(--good); }
.pop.self { color: #ff9b7a; font-size: 28px; }
@keyframes pop-rise {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(0.6); }
  14%  { opacity: 1; transform: translate(-50%, -8px) scale(1.18); }
  30%  { transform: translate(-50%, -14px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70px) scale(0.95); }
}
.hit .sprite { animation: hit-flash 0.32s ease-out; }
@keyframes hit-flash {
  0%   { transform: translateX(0); filter: var(--outline) brightness(2.2) saturate(0.2) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
  25%  { transform: translateX(10px) rotate(2deg); }
  55%  { transform: translateX(-6px) rotate(-1deg); filter: var(--outline) brightness(1.2) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.6)); }
  100% { transform: translateX(0); }
}
.lunge .sprite { animation: lunge 0.34s ease-out; }
@keyframes lunge { 0% { transform: translateX(0); } 40% { transform: translateX(28px) scale(1.04); } 100% { transform: translateX(0); } }
.lunge-l .sprite { animation: lunge-l 0.34s ease-out; }
@keyframes lunge-l { 0% { transform: translateX(0); } 40% { transform: translateX(-28px) scale(1.04); } 100% { transform: translateX(0); } }
.shake { animation: shake 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  10%, 90% { transform: translate3d(-2px, 1px, 0); }
  20%, 80% { transform: translate3d(4px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 2px, 0); }
  40%, 60% { transform: translate3d(6px, -1px, 0); }
}

/* ------------------------------------------------------------------ HUD strip */
.hud {
  grid-area: hud;
  position: relative;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px;
  background: linear-gradient(to bottom, rgba(13, 9, 7, 0), rgba(13, 9, 7, 0.75) 40%);
  z-index: 4;
}
/* The HUD's shade carries on under the hint and the hand, down to the bottom edge, so the table the cards lie on reads
   as the same room getting darker, not as a second page below the first. */
.hud::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(13, 9, 7, 0.75), rgba(13, 9, 7, 0.9) 160px, rgba(13, 9, 7, 0.94));
}
body.poster .hud::after, body.clip .hud::after { display: none; }
.attrs { display: flex; gap: 2px; padding: 3px 6px; border-radius: 8px; background: rgba(0, 0, 0, 0.55); box-shadow: inset 0 0 0 1px var(--line); }
.attr { display: flex; align-items: center; gap: 1px; padding: 0 3px; font-family: var(--ui); font-weight: 800; font-size: 14px; color: #fff; cursor: help; border-radius: 5px; }
.attr img { width: 22px; height: 22px; object-fit: contain; }
.attr.zero { opacity: 0.42; }
.attr.up { color: var(--amber-hi); }
.attr.down { color: #ff8a7a; }
.ap { display: flex; align-items: center; gap: 3px; }
.ap .gem {
  width: 22px; height: 22px;
  background: url("img/ui/ap.webp") center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(111, 182, 239, 0.8));
  transition: opacity 0.2s, transform 0.2s, filter 0.2s;
}
.ap .gem.spent { opacity: 0.22; filter: none; transform: scale(0.85); }
.ap .gem.gain { animation: gem-in 0.5s ease-out; }
@keyframes gem-in { 0% { transform: scale(2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.ap .ap-num { font-family: var(--display); font-size: 18px; color: #cfe9ff; margin-left: 2px; text-shadow: 0 2px 3px #000; }
.perks, .beers { display: flex; gap: 6px; align-items: center; }
.perk {
  display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 4px; border-radius: 14px;
  background: rgba(60, 38, 16, 0.82); box-shadow: inset 0 0 0 1px rgba(242, 181, 68, 0.45);
  font-size: 13px; color: var(--amber-hi); cursor: help; white-space: nowrap;
}
.perk.gold { gap: 4px; color: #ffd98a; font-weight: 700; }
.perk.gold img { width: 18px; height: 18px; object-fit: contain; }
.perk .perk-dot { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--foam), var(--amber) 55%, #8a5a12); }
.perk.legendary { background: rgba(80, 52, 6, 0.9); box-shadow: inset 0 0 0 1px var(--amber-hi), 0 0 10px rgba(242, 181, 68, 0.35); }
.beer {
  position: relative; width: 40px; height: 40px; border-radius: 8px; padding: 2px;
  background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 1px rgba(143, 208, 106, 0.55);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.beer img { width: 100%; height: 100%; object-fit: contain; }
.beer:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--good), 0 0 12px rgba(143, 208, 106, 0.5); }
.beer:disabled { opacity: 0.35; cursor: not-allowed; }
.beer .beer-cost { position: absolute; left: -4px; top: -6px; width: 16px; height: 20px; }
.beer.selected { box-shadow: inset 0 0 0 2px var(--amber-hi), 0 0 14px rgba(242, 181, 68, 0.6); transform: translateY(-3px); }
.hud-spacer { flex: 1; }
.rounds { display: flex; gap: 3px; align-items: center; font-size: 12px; color: var(--muted); }
.rounds .mug { width: 22px; height: 22px; opacity: 1; transition: opacity 0.3s, transform 0.3s; }
.rounds .mug.used { opacity: 0.25; filter: grayscale(1); transform: rotate(-20deg) translateY(2px); }

/* ------------------------------------------------------------------ hand */
.hand-zone {
  grid-area: hand;
  position: relative;
  height: var(--hand-h);
  padding: 0 10px calc(8px + env(safe-area-inset-bottom));
  z-index: 6;
}
.hand { position: relative; height: 100%; min-width: 0; }
.hand .card {
  position: absolute; left: 50%; bottom: 0;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.1), opacity 0.25s, filter 0.2s;
  transform-origin: 50% 110%;
  cursor: pointer;
}
.hand .card.unplayable { filter: saturate(0.55) brightness(0.62); cursor: not-allowed; }
.hand .card.selected { z-index: 30 !important; }
.hand .card.leaving { opacity: 0; pointer-events: none; }
/* a played card's ghost keeps its slot for the rest of the round (renderHand), so the cards around it never move */
.hand .card.gone { opacity: 0.1; pointer-events: none; }
.hand .card.gone.fading { animation: gone-in 0.3s ease-out; }
@keyframes gone-in { from { opacity: 0; } to { opacity: 0.1; } }
/* a drawn card deals into its slot (the inner box moves: the card's own transform places it in the fan) */
.hand .card.dealt .card-inner { animation: dealt-in 0.35s ease-out; }
@keyframes dealt-in { from { opacity: 0; translate: 0 28px; } }
.hand .card:focus-visible .card-inner { filter: drop-shadow(0 0 10px var(--amber-hi)); }
.hand .card:focus-visible, .icon-btn:focus-visible, .beer:focus-visible, .fighter:focus-visible, .btn-end:focus-visible,
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-steam:focus-visible, .btn-ghost:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 3px; }
/* game pieces aren't text: a long press should inspect, not select a word or open the phone's callout */
.hand, .card, .fighter, .hud, .intent, .chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
/* tall phones: the hand wraps into rows instead of fanning (layoutHand adds .grid) */
.hand.grid { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-end; gap: 6px; height: auto; margin: 0 auto; }
.hand.grid .card { position: relative; left: auto; bottom: auto; }
.hand-zone:has(.hand.grid) { height: auto; }
.end-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; padding-bottom: 4px; }
.btn-end {
  position: relative; min-width: 118px; padding: 10px 16px; margin-left: auto;
  font-family: var(--display); font-size: 19px; letter-spacing: 0.03em; color: #fff4dc;
  background: linear-gradient(180deg, #7a5a2c 0%, #4a3217 100%);
  border-radius: 6px; box-shadow: inset 0 0 0 2px #c89b4e, inset 0 0 0 4px #2a1c0c, 0 6px 16px rgba(0, 0, 0, 0.6);
  text-shadow: 0 2px 0 #000; transition: transform 0.12s, filter 0.2s;
}
.btn-end:hover { filter: brightness(1.15); }
.btn-end:active { transform: translateY(2px); }
.btn-end.nudge { animation: nudge 1.3s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { box-shadow: inset 0 0 0 2px #c89b4e, inset 0 0 0 4px #2a1c0c, 0 0 0 0 rgba(242, 181, 68, 0); } 50% { box-shadow: inset 0 0 0 2px #ffd98a, inset 0 0 0 4px #2a1c0c, 0 0 22px 4px rgba(242, 181, 68, 0.7); } }
.btn-ghost { font-family: var(--ui); font-weight: 600; font-size: 13px; color: var(--muted); padding: 4px 6px; border-radius: 6px; }
.btn-ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

/* hint line: its own grid row between the HUD and the hand, so it never covers anything or moves the layout */
.hintline {
  grid-area: hint; justify-self: center; align-self: center; max-width: calc(100% - 20px);
  padding: 3px 14px; border-radius: 20px; background: rgba(0, 0, 0, 0.72); box-shadow: 0 0 0 1px var(--line);
  font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 8; pointer-events: none;
  opacity: 0; transition: opacity 0.2s;
}
.hintline.show { opacity: 1; }

/* ------------------------------------------------------------------ cards (prefab space 334x512) */
.card { --s: var(--card-s); width: calc(334px * var(--s)); height: calc(512px * var(--s)); position: relative; flex: none; }
.card-inner { position: absolute; left: 0; top: 0; width: 334px; height: 512px; transform: scale(var(--s)); transform-origin: 0 0; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55)); }
.card-art { position: absolute; left: 26px; top: 51px; width: 280px; height: 210px; background: #222 center / cover no-repeat; }
.card-frame, .card-banner, .card-cost, .card-glow { position: absolute; display: block; pointer-events: none; }
.card-frame  { left: 0; top: 0; width: 334px; height: 512px; }
.card-banner { left: 3.5px; top: 209px; width: 327px; height: 162px; }
.card-cost   { left: -7.5px; top: 12px; width: 65px; height: 106px; }
.card-glow   { left: -20px; top: -10px; width: 374px; height: 532px; opacity: 0; transition: opacity 0.2s; }
.card.selected .card-glow, .card.playable:hover .card-glow { opacity: 1; }
.card-title {
  position: absolute; left: 34.5px; top: 260px; width: 265px; height: 50px; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 32px; color: #fff; white-space: nowrap;
  -webkit-text-stroke: 5px #1a1410; paint-order: stroke fill; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.card-title.long { font-size: 27px; }
.card-title.xlong { font-size: 23px; }
.card-desc {
  position: absolute; left: 34.5px; top: 325px; width: 265px; height: 162px; display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--text); font-weight: 600; font-size: 32px; line-height: 1.08; color: #f3ece2;
}
.card-desc.small { font-size: 27px; }
.card-desc b { color: #fff; font-weight: 600; }
.card-desc b.up { color: #8fe36a; }
.card-desc b.down { color: #ff7d6e; }
.card-desc em { font-style: normal; color: var(--amber-hi); }
/* attribute keywords as their icons, in card text and tooltips (app.js attrIcons) */
.attr-ico { display: inline-block; height: 1.15em; width: auto; vertical-align: -0.22em; }
.card-lvl { position: absolute; right: 18px; top: 18px; display: flex; gap: 4px; }
.card-lvl i { width: 14px; height: 14px; transform: rotate(45deg); background: #ffd98a; box-shadow: 0 0 0 2px #3a2208; }

/* ------------------------------------------------------------------ inspect overlay (big card + keyword help) */
.inspect {
  position: absolute; inset: 0; z-index: 40; display: none; align-items: center; justify-content: safe center; flex-direction: column; gap: 14px;
  background: rgba(8, 6, 4, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 16px; overflow-y: auto;
}
.inspect.open { display: flex; }
.inspect .card { --s: 0.8; }
.inspect > .kw { max-width: 360px; display: flex; flex-direction: column; gap: 6px; }
.kw-item { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--ink-soft); background: rgba(0, 0, 0, 0.5); border-radius: 8px; padding: 6px 10px; box-shadow: inset 0 0 0 1px var(--line); }
.kw-item img { width: 22px; height: 22px; flex: none; }
.kw-item b { color: var(--amber-hi); }
.inspect-actions { display: flex; gap: 10px; }

/* ------------------------------------------------------------------ tooltip */
.tip {
  position: fixed; z-index: 90; max-width: 260px; padding: 8px 10px; border-radius: 8px; pointer-events: none;
  background: rgba(20, 14, 9, 0.96); box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.35), var(--shadow);
  font-size: 15px; color: var(--ink); opacity: 0; transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
}
.tip.show { opacity: 1; transform: translateY(0); }
.tip b { color: var(--amber-hi); }

/* ------------------------------------------------------------------ modals */
.modal {
  position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 14px;
  background: rgba(6, 4, 3, 0.78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.modal.open { display: flex; animation: fade-in 0.2s ease-out; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 28px); overflow: auto;
  background: linear-gradient(180deg, #241a12 0%, #17110c 100%);
  border-radius: 14px; box-shadow: 0 0 0 1px rgba(242, 181, 68, 0.3), 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 22px 20px 20px; animation: sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}
@keyframes sheet-in { from { transform: translateY(18px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet h2 { font-family: var(--display); font-size: 26px; color: var(--amber-hi); margin-bottom: 10px; line-height: 1.1; }
.sheet h3 { font-family: var(--display); font-size: 18px; color: var(--ink); margin: 16px 0 6px; }
.sheet p { color: var(--ink-soft); margin-bottom: 8px; }
.sheet p b { color: var(--ink); }
.sheet .close { position: absolute; right: 8px; top: 8px; z-index: 3; background: rgba(0, 0, 0, 0.5); border-radius: 50%; }
.sheet ul { margin: 4px 0 10px 18px; color: var(--ink-soft); }
.sheet li { margin-bottom: 4px; }

.rules-grid { display: grid; grid-template-columns: 26px 1fr; gap: 6px 10px; align-items: center; margin: 8px 0 12px; }
.rules-grid img { width: 26px; height: 26px; object-fit: contain; }
.rules-grid div { font-size: 15px; color: var(--ink-soft); }
.rules-grid div b { color: var(--ink); }

/* result sheet */
.result-hero { position: relative; margin: -22px -20px 14px; border-radius: 14px 14px 0 0; overflow: hidden; aspect-ratio: 16 / 7; background: #000 center / cover no-repeat; }
.result-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(23, 17, 12, 0.95) 100%); }
.stamp {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%) rotate(-4deg); z-index: 2;
  font-family: var(--display); font-size: 44px; line-height: 1; white-space: nowrap; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill;
  animation: stamp 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}
.stamp.win { color: var(--amber-hi); }
.stamp.lose { color: #ff8a7a; }
@keyframes stamp { from { transform: translateX(-50%) rotate(-4deg) scale(2.2); opacity: 0; } to { transform: translateX(-50%) rotate(-4deg) scale(1); opacity: 1; } }
.result-line { text-align: center; font-size: 17px; color: var(--ink-soft); margin-bottom: 12px; }
.share-grid { font-family: var(--ui); text-align: center; font-size: 22px; letter-spacing: 2px; line-height: 1.3; margin: 6px 0 12px; }
.row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px;
  font-family: var(--display); font-size: 18px; color: #2a1606; text-decoration: none;
  background: linear-gradient(180deg, var(--amber-hi) 0%, var(--amber) 60%, #c98a1c 100%);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25), 0 6px 18px rgba(242, 181, 68, 0.25); transition: filter 0.15s, transform 0.12s;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 8px;
  font-family: var(--display); font-size: 16px; color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }
.countdown { text-align: center; color: var(--muted); font-size: 14px; margin-top: 10px; }
.itch-note { text-align: center; color: var(--muted); font-size: 13px; margin: 6px 0 2px; }
.countdown b { font-family: var(--ui); color: var(--ink); font-size: 16px; letter-spacing: 0.04em; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0 12px; text-align: center; }
.stats div b { display: block; font-family: var(--display); font-size: 26px; color: var(--ink); line-height: 1.1; }
.stats div span { font-size: 12px; color: var(--muted); font-family: var(--ui); }
.dist { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.dist-row { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: center; font-family: var(--ui); font-size: 13px; }
.dist-bar { height: 20px; min-width: 22px; border-radius: 3px; background: #3a2c20; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: flex-end; padding: 0 6px; }
.dist-bar.me { background: linear-gradient(90deg, #c98a1c, var(--amber)); color: #2a1606; }

.trick { margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(242, 181, 68, 0.08); box-shadow: inset 0 0 0 1px rgba(242, 181, 68, 0.3); }
.trick h4 { font-family: var(--display); color: var(--amber-hi); font-size: 16px; margin-bottom: 4px; }
.trick p { margin: 0; color: var(--ink); font-size: 16px; }
.trick ol { margin: 6px 0 0 20px; color: var(--ink-soft); font-size: 15px; }

/* the how-to's start button stays in reach however far the rules scroll */
.howto-go { position: sticky; bottom: -20px; display: flex; justify-content: center; padding: 12px 0 16px; margin-top: 8px;
  background: linear-gradient(to bottom, rgba(23, 17, 12, 0), #17110c 45%); }
.more-rules { margin: 4px 0 6px; color: var(--ink-soft); }
.more-rules summary { cursor: pointer; font-family: var(--display); font-size: 17px; color: var(--ink); margin-bottom: 6px; }
.keys { font-size: 14px; }
.pitch-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; margin: 10px 0 4px; text-align: center; }
.archive-item .diff { display: inline-flex; vertical-align: middle; }

/* the pitch */
.pitch { margin-top: 16px; border-radius: 12px; overflow: hidden; background: #0f141a; box-shadow: 0 0 0 1px rgba(102, 192, 244, 0.25); }
.pitch-media { position: relative; aspect-ratio: 16 / 9; background: #000 center / cover no-repeat; }
/* The creative (promo.js): a trailer playing muted with a button to watch it with sound, or the capsule as a link. */
a.pitch-media { display: block; }
.pitch-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; cursor: pointer; }
.pitch-media video[controls] { cursor: auto; }
.pitch-sound {
  position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px;
  border-radius: 20px; background: rgba(0, 0, 0, 0.66); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: #fff; font-family: var(--ui); font-weight: 700; font-size: 14px;
}
.pitch-sound:hover { background: rgba(0, 0, 0, 0.8); }
.pitch-sound .play { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pitch-sound .play::after { content: ""; margin-left: 2px; border-left: 8px solid #111; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.pitch-body { padding: 14px 14px 16px; font-family: var(--ui); font-weight: 400; }
.pitch-body h3 { margin: 0 0 6px; font-family: var(--display); font-weight: 700; font-size: 20px; color: #fff; }
.pitch-body p { color: #c6d4df; font-size: 15px; margin-bottom: 12px; line-height: 1.45; }
.pitch-body .row { justify-content: flex-start; }

.toast {
  position: fixed; left: 50%; top: 64px; transform: translate(-50%, -10px); z-index: 120; opacity: 0; pointer-events: none;
  padding: 9px 16px; border-radius: 20px; background: var(--foam); color: #2a1606; font-family: var(--ui); font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow); transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* round-over banner inside the field */
.banner {
  position: absolute; inset: 0; z-index: 35; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 10px; text-align: center; padding: 16px;
  background: radial-gradient(closest-side, rgba(8, 6, 4, 0.85), rgba(8, 6, 4, 0.55));
}
.banner.open { display: flex; animation: fade-in 0.25s ease-out; }
.banner h2 { font-family: var(--display); font-size: 36px; color: #ff8a7a; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.banner p { color: var(--ink); font-size: 18px; max-width: 420px; }

.grid-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 13px; color: var(--muted); margin: -2px 0 10px; }
.grid-legend span { white-space: nowrap; }

/* lessons */
.banner h2.good { color: var(--amber-hi); }
.banner .lesson-tip { color: var(--amber-hi); font-size: 16px; }
.banner .btn-secondary { margin-top: 2px; }
.lesson-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.lesson-head img { width: 52px; height: 52px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px #000); }
.lesson-head h2 { margin-bottom: 0; }
.lesson-n { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; }
.lesson-skip { text-align: center; margin-top: -4px; }
.archive-list.lessons .archive-item b { white-space: nowrap; }

/* foam burst on a win */
.foam { position: fixed; pointer-events: none; z-index: 95; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--foam) 40%, rgba(255, 244, 220, 0.2) 70%, transparent 72%); animation: foam-fly var(--t, 1.4s) cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes foam-fly { from { transform: translate(0, 0) scale(0.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* archive */
.archive-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.archive-item { text-decoration: none; padding: 8px 6px; border-radius: 8px; text-align: center; background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); font-family: var(--ui); font-size: 13px; color: var(--ink-soft); }
.archive-item b { display: block; font-family: var(--display); font-size: 17px; color: var(--ink); }
.archive-item.won { box-shadow: inset 0 0 0 1px rgba(143, 208, 106, 0.6); }
.archive-item.lost { box-shadow: inset 0 0 0 1px rgba(224, 70, 60, 0.5); }
.archive-item:hover { background: rgba(255, 255, 255, 0.1); }

.footer-note { margin-top: 14px; text-align: center; font-family: var(--ui); font-weight: 400; font-size: 12px; color: var(--muted); }
.footer-note a { color: var(--muted); }

/* ------------------------------------------------------------------ misc states */
.beer.dim { opacity: 0.4; }
.beer.bomb { box-shadow: inset 0 0 0 1px rgba(255, 140, 80, 0.55); }
.beer .bomb-n { position: absolute; right: -3px; bottom: -4px; font-family: var(--ui); font-weight: 800; font-size: 12px; color: #fff; text-shadow: 0 0 3px #000, 0 1px 2px #000; }
.hand .card.pickable { filter: drop-shadow(0 0 10px rgba(143, 208, 106, 0.9)); cursor: pointer; }
.card-up {
  position: absolute; right: 14px; top: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--display); font-size: 34px; color: #2a1606; background: radial-gradient(circle at 35% 30%, #fff5d0, var(--amber) 60%, #9a6512);
  box-shadow: 0 0 0 3px #3a2208, 0 4px 10px rgba(0, 0, 0, 0.5);
}
.card-desc .kw { color: var(--amber-hi); }
.card-desc b.mv { color: #ffe08a; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.card-desc b.mv.up { color: #9df07a; }
.card-desc b.mv.down { color: #ff8a7a; }
.card-desc .g { color: #9df07a; } .card-desc .r { color: #ff8a7a; } .card-desc .y { color: #ffe08a; }
.tip .kw, .tip b.mv { color: var(--amber-hi); font-weight: 600; }
.btn-end:disabled { filter: grayscale(0.6) brightness(0.7); cursor: default; }
.btn-primary:disabled { filter: grayscale(0.7) brightness(0.7); cursor: default; }
.side.enemies .fighter { max-width: calc(100% / var(--n, 1)); }
.objective {
  position: absolute; left: 10px; top: 8px; z-index: 4; padding: 3px 12px; border-radius: 14px; cursor: help;
  background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-soft); white-space: nowrap;
}
.objective b { color: var(--amber-hi); }
.deck-title { font-family: var(--display); font-size: 20px; color: var(--amber-hi); text-align: center; }
.deck-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.deck-row .card { --s: 0.42; }
.beer.deck img { object-fit: cover; border-radius: 5px; }

/* ------------------------------------------------------------------ poster mode (social images, rendered headless) */
.poster-head, .poster-foot { display: none; }
body.poster #app {
  max-width: none; height: 100vh;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "phead phead" "field hand" "hud hand" "pfoot pfoot";
}
body.poster-tall #app {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto minmax(0, 0.95fr) auto;
  grid-template-areas: "phead" "field" "hud" "hand" "pfoot";
}
body.poster .topbar, body.poster .hintline, body.poster #btn-reset, body.poster .rounds, body.poster .btn-end, body.poster .hud-spacer { display: none !important; }
body.poster .intent.bob { animation: none; }
body.poster .hud { justify-content: center; background: none; padding-bottom: 10px; }
body.poster .field { padding: 10px 18px 0; }
body.poster .hand-zone { height: auto; min-height: 0; padding: 10px 22px 10px 8px; display: flex; }
body.poster-tall .hand-zone { padding: 6px 26px 10px; }
body.poster .hand {
  flex: 1; height: auto; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 3), max-content);
  gap: 12px; justify-content: center; align-content: center;
}
body.poster .hand .card { position: relative; left: auto; bottom: auto; transition: none; --s: var(--card-s); }
body.poster .objective { display: none; }
body.poster .poster-head {
  grid-area: phead; display: flex; align-items: center; gap: 16px; padding: 14px 28px 6px;
  background: linear-gradient(to bottom, rgba(13, 9, 7, 0.95), rgba(13, 9, 7, 0.4));
}
.ph-keg { width: 54px; height: 54px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6)); }
.ph-title { font-family: var(--display); font-size: 40px; line-height: 1; letter-spacing: 0.04em;
  background: linear-gradient(180deg, var(--foam) 0%, var(--amber-hi) 45%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.7)); }
.ph-title span { font-size: 0.8em; }
.ph-sub { font-size: 18px; color: var(--ink-soft); margin-top: 4px; }
.ph-sub .diff i { width: 13px; height: 15px; }
.ph-ask { margin-left: auto; font-family: var(--display); font-size: 30px; color: #fff; -webkit-text-stroke: 5px #000; paint-order: stroke fill; text-align: right; }
body.poster .poster-foot {
  grid-area: pfoot; display: flex; align-items: center; gap: 18px; padding: 8px 28px 14px;
  background: linear-gradient(to top, rgba(13, 9, 7, 0.97), rgba(13, 9, 7, 0.6));
}
.pf-logo { height: 58px; width: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.pf-text { font-size: 20px; color: var(--ink); line-height: 1.25; }
.pf-text b { color: var(--amber-hi); font-weight: 600; }
.pf-text u { text-decoration-color: var(--amber); text-underline-offset: 3px; }
.pf-steam { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 4px;
  background: linear-gradient(to bottom, #67c1f5 5%, #417a9b 95%); color: #fff; font-family: var(--ui); font-weight: 700; font-size: 18px; }
.pf-steam svg { width: 22px; height: 22px; }
/* 4:5 portrait: everything a size up, the ask on its own line */
body.poster-tall .poster-head { flex-wrap: wrap; padding: 26px 34px 8px; }
body.poster-tall .ph-keg { width: 72px; height: 72px; }
body.poster-tall .ph-title { font-size: 58px; }
body.poster-tall .ph-sub { font-size: 24px; }
body.poster-tall .ph-ask { margin: 8px 0 0; width: 100%; text-align: center; font-size: 42px; }
body.poster-tall .name { font-size: 22px; }
body.poster-tall .intent { font-size: 22px; }
body.poster-tall .intent img { width: 34px; height: 34px; }
body.poster-tall .bars { width: min(100%, 300px); --hp-h: 26px; }
body.poster-tall .attr { font-size: 20px; }
body.poster-tall .attr img { width: 30px; height: 30px; }
body.poster-tall .ap .gem { width: 30px; height: 30px; }
body.poster-tall .ap .ap-num { font-size: 26px; }
body.poster-tall .beer { width: 56px; height: 56px; }
body.poster-tall .perk { font-size: 18px; }
body.poster-tall .poster-foot { flex-wrap: wrap; justify-content: center; padding: 14px 34px 30px; }
body.poster-tall .pf-logo { height: 84px; }
body.poster-tall .pf-text { font-size: 26px; text-align: center; }
body.poster-tall .pf-steam { margin: 6px auto 0; font-size: 22px; }

/* ------------------------------------------------------------------ clip mode (short videos, recorded headless) */
body.clip #app {
  grid-template-rows: auto auto minmax(0, 0.8fr) auto minmax(0, 1.2fr) auto;
  grid-template-areas: "phead" "cap" "field" "hud" "hand" "pfoot";
}
body.clip-tall #app { grid-template-rows: auto auto minmax(0, 0.72fr) auto minmax(0, 1.28fr) auto; }
body.clip .poster-head { justify-content: center; flex-wrap: nowrap; background: none; }
body.clip-tall .poster-head { padding: 16px 34px 0; }
body.clip-tall .ph-keg { width: 56px; height: 56px; }
body.clip-tall .ph-title { font-size: 44px; }
body.clip-tall .ph-sub { font-size: 21px; }
body.clip-tall .cap-main { font-size: 54px; }
body.clip-tall .cap-sub { font-size: 28px; }
body.clip-tall .poster-foot { padding: 6px 34px 16px; }
body.clip-tall .pf-logo { height: 64px; }
body.clip-tall .pf-text { font-size: 22px; }
/* 9:16 for Shorts, Reels and TikTok. Their buttons and captions cover the top strip, the bottom fifth and a column on
   the right, so the board lives in between and the foot is allowed to disappear under the caption. */
body.clip-story #app { padding-top: 110px; }
body.clip-story .field { padding: 6px 30px 0; }
body.clip-story .hand-zone { padding: 8px 132px 8px 30px; }
body.clip-story .poster-foot { min-height: 400px; align-items: flex-start; padding-top: 20px; }
/* at 0.36x on a phone, the page's own sizes come out at 6-8 px; these land around 12-15 */
body.clip-story .name { font-size: 34px; }
body.clip-story .intent { font-size: 40px; }
body.clip-story .intent img { width: 52px; height: 52px; }
body.clip-story .attr { font-size: 30px; }
body.clip-story .attr img { width: 40px; height: 40px; }
body.clip-story .ap .gem { width: 40px; height: 40px; }
body.clip-story .ap .ap-num { font-size: 36px; }
body.clip-story .bars { width: 100%; --hp-h: 44px; }
body.clip-story .cap-sub { font-size: 38px; }
.ph-url { font-size: 22px; color: var(--amber-hi); margin-top: 2px; letter-spacing: 0.02em; }
body.clip-tall .ph-url { font-size: 18px; }
.cap-think { display: flex; align-items: center; justify-content: center; gap: 18px; }
.cap-count { min-width: 1ch; font-family: var(--display); font-size: 64px; line-height: 1; color: #ffd98a; -webkit-text-stroke: 7px #000; paint-order: stroke fill; }
.clip-cap.burnt .cap-think { display: none; }
.clip-cap { grid-area: cap; text-align: center; padding: 4px 40px 6px; }
.cap-main { font-family: var(--display); font-size: 62px; line-height: 1.08; color: #fff; -webkit-text-stroke: 8px #000; paint-order: stroke fill; white-space: nowrap; overflow: hidden; padding: 0 6px; }
.cap-sub { margin-top: 6px; min-height: 1.25em; font-size: 32px; line-height: 1.25; color: var(--amber-hi); text-shadow: 0 2px 5px #000, 0 0 12px #000; }
.cap-step { display: inline-block; margin-right: 18px; padding: 2px 18px 0; border-radius: 999px; background: var(--amber); color: #1a0f07;
  -webkit-text-stroke: 0; font-size: 0.6em; vertical-align: 0.2em; }
.cap-fuse { height: 26px; width: 60%; margin: 12px 0 0; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; opacity: 0; transition: opacity 0.3s; }
.cap-fuse i { display: block; height: 100%; background: linear-gradient(to right, #ff6a2b, #ffd98a); transform-origin: left; }
.clip-cap.burning .cap-fuse { opacity: 1; }
.clip-cap.burning .cap-fuse i { transform: scaleX(0); transition: transform 4s linear; }

.cap-pop { animation: cap-pop 0.3s ease-out; }
@keyframes cap-pop { 0% { transform: scale(1.12); } 100% { transform: scale(1); } }
body.clip .hand .card.clip-pick { transform: translateY(-16px) !important; z-index: 5 !important; }
.clip-pick { outline: 6px solid #ffd98a; outline-offset: 4px; border-radius: 16px; box-shadow: 0 0 44px 12px rgba(255, 200, 90, 0.6); }
.clip-chosen { outline: 5px dashed #9fd8ff; outline-offset: 4px; border-radius: 16px; box-shadow: 0 0 36px 8px rgba(120, 190, 255, 0.55); }
.clip-target .sprite { filter: var(--outline) drop-shadow(0 0 22px rgba(255, 80, 50, 1)) drop-shadow(0 0 6px rgba(255, 80, 50, 1)); }
.clip-stamp { position: fixed; left: 50%; top: 38%; z-index: 90; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(2.4);
  font-family: var(--display); font-size: 150px; color: #ffd98a; -webkit-text-stroke: 12px #3a1405; paint-order: stroke fill;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.85)); }
.clip-stamp.show { animation: clip-stamp 0.45s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes clip-stamp { to { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); } }
.clip-end { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: 0 70px; text-align: center; opacity: 0; transition: opacity 0.5s;
  background: radial-gradient(ellipse at 50% 42%, #2e1e10, #0a0705 70%); }
.clip-end.show { opacity: 1; }
body.clip-story .clip-end { padding-bottom: 240px; }
.ce-logo { width: 820px; max-width: 88%; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.8)); }
.ce-cta { font-family: var(--display); font-size: 86px; line-height: 1; color: #f3d9a4; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.7)); }
.ce-line { font-size: 34px; line-height: 1.3; color: var(--ink); max-width: 800px; }
.ce-url { font-size: 36px; color: var(--ink-soft); margin-bottom: -14px; }
.ce-site { font-family: var(--display); font-size: 60px; color: var(--amber-hi); }

/* ------------------------------------------------------------------ responsive */
/* Phones, up to the widest (430 px): at full size the top bar would push the Wishlist button off the edge and the HUD
   would take three lines. */
@media (max-width: 519px) {
  body { font-size: 16px; }
  .topbar { gap: 6px; padding: 6px 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-name { font-size: 19px; }
  .puzzle-meta .ptitle, .puzzle-meta .wd-long { display: none; }
  #btn-sound { display: none; }
  .icon-btn { width: 32px; height: 32px; }
  .btn-steam.small { padding: 6px 8px; }
  .btn-steam.small span { display: none; }
  .hud { gap: 5px 6px; padding: 4px 8px; }
  .ap .gem { width: 17px; height: 17px; }
  .ap .ap-num { font-size: 16px; }
  .rounds .mug { width: 17px; height: 17px; }
  #btn-reset { width: 28px; height: 28px; }
  .objective { font-size: 13px; }
  .bars { --hp-h: 16px; }
  .intent { font-size: 14px; }
  .attr { font-size: 13px; padding: 0 2px; }
  .attr img { width: 19px; height: 19px; }
  .beer { width: 36px; height: 36px; }
  .btn-end { min-width: 96px; font-size: 16px; padding: 9px 10px; }
}
@media (min-width: 760px) {
  :root { --card-s: 0.5; --hand-h: 280px; }
  .brand-name { font-size: 26px; }
  .puzzle-meta { font-size: 14px; }
  .field { padding: 16px 40px 0; grid-template-columns: 1fr 1.4fr; }
  .bars { width: min(100%, 230px); --hp-h: 20px; }
  .name { font-size: 16px; }
}
@media (min-width: 1100px) {
  :root { --card-s: 0.56; --hand-h: 310px; }
}
@media (max-height: 700px) and (max-width: 759px) {
  :root { --card-s: 0.36; --hand-h: 196px; }
}
@media (max-width: 519px) and (min-height: 760px) {
  :root { --card-s: 0.35; }
}
@media (min-width: 380px) and (max-width: 519px) {
  .btn-steam.small span { display: inline; }
}
/* laptops with browser chrome: a shorter hand so the fighters stay more than thumbnails */
@media (min-width: 760px) and (max-height: 720px) {
  :root { --card-s: 0.42; --hand-h: 232px; }
}
@media (max-height: 760px) {
  .inspect .card { --s: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}