body {
  background: var(--primary-bg, #6dd3e7);
  padding: 0;
  overflow-x: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.welcome_container {
  display: flex;
}

.welcome_info {
  flex: 1;
}
.hidden-mobile {
  display: none; /* Hide on small screens */
}

.icon-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--icon-number, #f0f0f0);
  border-radius: 25%;
}

.icon {
  padding: 2px;
  font-size: 12px; /* Adjust icon size */
}

.image-container {
  position: relative;
  width: 128px; /* Adjust based on your image size */
  height: 120px; /* Match the width for a square image */
  overflow: hidden;
}

.texture-container {
  width: 32px; /* Set the desired width */
  height: 120px; /* Set the desired height */
  /*background-color: #000; /* Optional: Background color * / */
  overflow: hidden; /* Ensures only the visible part of the texture is shown */
  position: relative; /* Ensure proper stacking context */
}

.castle-image-hp {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 24px;
  color: #fff;
  text-shadow: 0 1px 4px #000, 0 0 8px #000;
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

.wall-image-hp {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 6px #000;
  pointer-events: none;
  z-index: 4;
  white-space: nowrap;
}

.number {
  /*background-color: #ccc;*/
  padding: 3px 6px;
  border-radius: 12px;
  color: var(--number, #ccc);
  font-family: 'Oswald', sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: bold;
  font-size: 12px;
}

.icon-img {
  width: 20px;
}

.hands {
  display: flex;
}

.hand-container {
  flex: 1;
}

.hand {
  display: flex;
  max-width: 650px;
  background: #eee0;
  padding: 1px;
  box-sizing: border-box;
  margin-bottom: 10px;
  position: relative;
}

.spy-icon {
  width: 32px;
  opacity: 100%;
  animation: pulse 2s infinite;
}

.cloudy-round-panel button {
  margin: 10px;
}

.howtocard {
  display: flex;
  flex-direction: column-reverse;
}

.feature-card-img {
  max-height: 60vh;
  width: 100%;
}


.nav-links li {
  margin-left: 20px;
  margin: 8px;
}

.nav-links a {
  color: #a8dadc;
  text-decoration: none;
  font-size: 1.3rem;
  transition: color 0.3s;
}

.coins-on-narrow-view {
  display: flex;
  margin-left: auto;
  margin-right: 15px;
}

/* Default: Show the full text */
.game-name::before {
  content: attr(data-full);
}

.castle-and-resources {
  display: flex;
  flex-direction: column;
}

/* Bottom-align the castle visual to a common ground line.
   .castle-and-resources is top-aligned inside its #castle wrapper, which is
   flex-stretched to the row height of the TALLER castle. So when a short
   renderer (e.g. the tent) faces a taller one (e.g. stacked), the short
   castle's base ends up well above the taller one's — and the scenic
   background fits its horizon to the LOWEST castle base, leaving the short
   castle floating in the sky. Filling the wrapper and pushing the visual to
   the bottom drops every renderer's base onto the same ground line.
   The stacked renderer is excluded on purpose: its castle deliberately
   overflows its visual-group downward (the "pulled-up" desktop trick), so
   filling/bottom-aligning its column would shove it far below the viewport. */
#game .castle-and-resources:not(:has(.castle-and-wall-stacked)) {
  height: 100%;
}
#game .castle-visual-group:not(:has(.castle-and-wall-stacked)) {
  margin-top: auto;
}

/* castle-stat-overlay is only shown in wide+short (overlaid on the castle image).
   castle-stat-flow is the always-visible fallback hidden only in wide+short. */
.castle-stat-overlay {
  display: none;
}

@media (max-height: 600px) {
  .logo {
    display: flex;
    align-items: center;
  }
  .logo small {
    padding-left: 10px;
  }
  .logo a img {
    height: 25px;
  }
  .game-name {
    font-size: 1.1rem;
  }
  .nav-links li {
    margin: 0;
  }
  .castle-and-resources {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .castle-visual-group {
    order: -1;
    position: absolute;
    z-index: -1;
  }
  /* Blue's castle stat sits left of resources (toward center); red's sits right (default DOM order) */
  .castle-stat-flow-blue {
    order: -1;
  }
  /* Both players' castle stat should be top-aligned regardless of the parent's
     align-items (blue uses align-items:end which would push it to the bottom) */
  .castle-stat-flow {
    align-self: flex-start;
  }
  /* Gap between castle stat and the resource stats */
  .castle-and-resources {
    gap: 6px;
  }
  .resource-stats {
    padding: 0;
    opacity: 0.75;
  }
  .number {
    padding: 0;
  }
  /* Lifted out of the castle row into the gap above it. `100% - 225px` was
     written against a tall castle column (a wide-short screen), where it lands
     just above the castles; on a small square embed the column is only ~96px,
     so it resolved to -129px and slid the card up behind the navbar with its
     top third clipped. The max() caps the lift at the navbar's height and
     changes nothing where the original value was already smaller. */
  .last-played-card {
    top: max(-66px, calc(100% - 225px));
    height: 100%;
    left: 50vw;
    transform: translateX(-50%);
  }
  .body {
    padding: 0;
  }
  :root {
    --toggle-height: 20px;
  }
}

@media (max-width: 440px) {
  .banner-on-home {
    display: block;
  }
}

@media (min-width: 660px) and (max-height: 600px) {
  .wide-short-castle-and-wall-indicator-rightside {
    order: -1;
    align-self: baseline;
  }
  /* Enough horizontal room: pull castle/wall group out of the absolute overlay.
     Target layout: [red-resources][red-castle]…[center-card]…[blue-castle][blue-resources]
     - Blue group keeps order:-1 (first in its right-justified row = toward center) ✓
     - Red group needs order:0 so it falls after main-resources-group in DOM order (toward center) */
  .castle-visual-group {
    position: relative;
    z-index: auto;
  }
  #red-castle-visual-group {
    order: 0;
  }
  .castle-and-resources {
    flex-wrap: nowrap;
  }
  .resource-stats {
    opacity: 1;
  }
  /* Override blue's align-items:end so resources and castle are top-aligned */
  .main-resources-group,
  .castle-visual-group {
    align-self: flex-start;
  }
  /* Overlay takes over in wide+short; hide the flow fallback */
  .castle-stat-flow {
    display: none;
  }
}

@media (max-height: 600px) {
  .short-castle-and-wall-indicator-rightside {
    order: -1;
    align-self: baseline;
  }
}

@media (max-width: 660px) and (max-height: 600px) {
  .wide-row-tight-col {
    flex-direction: column;
    /*border: 1px solid #f00;*/
  }
  .dbg {
    /*border: 1px solid #f00;*/
  }
}

@media screen and (max-width: 1148px) {
  .game-name::before {
    content: attr(data-short);
  }
}

@media screen and (max-width: 1030px) {
  .game-name::before {
    content: attr(data-shorter);
  }
}

@media (min-width: 768px) and (min-height: 601px) {
  body {
    /*background: #6dd3e7;*/
    padding-right: 100px;
    padding-left: 100px;
    /*overflow-x: hidden;*/
  }
}

@media (min-width: 768px) {
  .nav-links li {
    margin-left: 10px;
  }
  .nav-links a {
    font-size: 1rem;
  }
  .howtocard {
    display: flex;
    flex-direction: row;
  }

  .feature-card-img {
    width: auto;
  }
  .icon {
    padding: 10px;
    font-size: 20px; /* Adjust icon size */
  }

  .icon-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 25%;
  }

  .number {
    /*background-color: #ccc;*/
    padding: 6px 12px;
    border-radius: 12px;
    /*color: #333;*/
    font-weight: bold;
    font-size: 16px;
  }

  .icon-img {
    width: 30px;
  }

  .image-container {
    position: relative;
    width: 256px; /* Adjust based on your image size */
    height: 240px; /* Match the width for a square image */
    overflow: hidden;
  }

  .texture-container {
    width: 64px; /* Set the desired width */
    height: 240px; /* Set the desired height */
    /*background-color: #000; /* Optional: Background color * / */
    overflow: hidden; /* Ensures only the visible part of the texture is shown */
    position: relative; /* Ensure proper stacking context */
  }

  .hand {
    display: flex;
    max-width: 650px;
    background: #eee0;
    padding: 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    position: relative;
  }

  .hidden-mobile {
    display: block; /* Show on larger screens */
  }
  .coins-on-narrow-view {
    display: none;
  }
}

/* Wide+short: image sizing override (must come after min-width:768px to win cascade)
   and castle-stat overlay on top of the castle image */
@media (min-width: 660px) and (max-height: 600px) {
  /* Fill all horizontal space remaining after the resource stats */
  .castle-visual-group {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
  }
  /* Stretch castle-and-wall across the full visual group width */
  .castle-and-wall {
    width: 100%;
  }
  .castle-and-wall-stacked > .stacked-castle-shell {
    flex: 4 1 0;
    min-width: 0;
    width: auto;
    max-width: 132px;
  }
  .castle-and-wall-stacked > .stacked-wall-shell {
    flex: 1 1 0;
    min-width: 0;
    max-width: 140px;
  }
  /* The flexed visual group stretches .castle-and-wall-stacked full-width, so
     the wall's base `left/right: calc(100% - 48px)` anchor (tuned for a
     tower-width box) flings the absolutely-positioned wall far from the tower
     and out of view. Anchor it a flat 48px from the tower's outer edge so it
     sits beside the tower regardless of container width. */
  .castle-and-wall-stacked-red .stacked-wall-shell {
    left: 48px;
  }
  .castle-and-wall-stacked-blue .stacked-wall-shell {
    left: auto;
    right: 48px;
  }
  .stacked-castle-frame {
    height: 288px;
  }
  .stacked-wall-column {
    height: 132px;
  }
  /* Image takes 128/160 of castle-and-wall width (4:1 ratio with wall).
     height is derived from aspect-ratio so it scales with available width.
     max-* caps at desktop size and prevents squishing when capped. */
  .image-container {
    flex: 4 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    aspect-ratio: 400 / 376;
    max-height: 145px;
    max-width: 170px;
  }
  /* Wall wrapper for the CLASSIC renderer: takes remaining 1/5, stretches to
     match image height via flex default. MUST exclude the stacked AND tent
     renderers — the stacked wall shell is absolutely positioned/sized (140px),
     and the tent renderer has no separate wall child at all (its wooden
     palisade is an overlay INSIDE the castle shell, so the shell is the
     last child and would get crushed to 30px). This selector's specificity
     (0,2,1) otherwise beats the renderers' own rules. */
  .castle-and-wall:not(.castle-and-wall-stacked):not(.castle-and-wall-tent) > div:last-child {
    flex: 1 1 0;
    min-width: 0;
    max-width: 30px;
  }
  /* Texture-container fills the wall wrapper to match image height */
  .texture-container {
    width: 100%;
    height: 100%;
    max-height: 145px;
  }
  /* Castle HP/wall stat overlaid on the bottom of the castle image */
  .castle-stat-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    border-radius: 0 0 4px 4px;
    z-index: 2;
  }
  /* Compact resource stats — override desktop sizes to prevent overflow onto last-played card */
  .number {
    padding: 3px 6px;
    font-size: 12px;
  }
  .icon {
    padding: 2px;
    font-size: 12px;
  }
  .icon-img {
    width: 20px;
  }
}

/* Wide but short viewport - compact castle/stats like narrow layout */
@media (min-width: 768px) and (min-height: 601px) and (max-height: 819px) {
  .castle-and-wall {
    order: initial;
    position: relative;
    z-index: initial;
    max-width: none;
    width: auto;
  }
  .resource-stats {
    padding: 5px 0;
    opacity: 1;
    gap: 5px;
  }
  .number {
    padding: 3px 6px;
    font-size: 12px;
  }
  .icon {
    padding: 2px;
    font-size: 12px;
  }
  .icon-img {
    width: 20px;
  }
  .image-container {
    width: 128px;
    height: 120px;
  }
  .texture-container {
    width: 32px;
    height: 120px;
  }
  .hand {
    padding: 1px;
  }
  .nav-links li {
    margin: 8px;
    margin-left: 20px;
  }
  .nav-links a {
    font-size: 1.3rem;
  }
  .hidden-mobile {
    display: none;
  }
  .coins-on-narrow-view {
    display: flex;
  }
}

/* Mid-size windows (e.g. a 920x800 embedded portal): wider than a phone and
   tall enough that the compact resource stats tuned for short 601-819px screens
   look too small, but below the 1280x821 "large" layout. Bump the resource
   numbers/icons to a medium size so they stay legible. Placed AFTER the
   601-819 block so it wins on source order where the height ranges overlap. */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 760px) {
  .number {
    font-size: 18px;
  }
  .icon {
    font-size: 18px;
  }
  .icon-img {
    width: 30px;
  }
}

/* Large desktop: bigger castles/walls/resources. Hand lives in document flow
   at the bottom of #game (no fixed positioning) so it never overlaps the
   castle visuals. To buy back the vertical room we used to get from the
   fixed-position hack, the castle visual is pulled up behind the resource
   panel — the top sliver of the castle gets covered, which is acceptable.
   min-height:821 keeps this disjoint from the wide+short overrides above. */
@media (min-width: 1280px) and (min-height: 821px) {
  #game {
    max-width: 1600px;
  }

  .image-container {
    width: 384px;
    height: 360px;
  }
  .texture-container {
    width: 96px;
    height: 360px;
  }

  .main-resources-group {
    padding: 8px 12px;
    border-radius: 16px;
    position: relative;
    z-index: 2;
  }
  .main-resources-group .icon-img {
    width: 44px;
  }
  .main-resources-group .resource-stats .icon-number:last-child .icon-img {
    width: 24px;
  }
  .resource-value {
    font-size: 1.7em;
  }
  .resource-inc-value {
    font-size: 1.45em;
  }
  .castle-image-hp {
    font-size: 34px;
  }
  .wall-image-hp {
    font-size: 18px;
  }

  .castle-visual-group {
    position: relative;
    z-index: 1;
  }

  /* Lift hand cards above the scaled castle so the wall extension passes
     behind them, and so the cards stay clickable. */
  #game .hands {
    position: relative;
    z-index: 5;
  }

  .last-played-card {
    width: 140px;
    height: 280px;
  }

  .hands {
    justify-content: center;
    padding: 0 20px;
  }
  .hand-container {
    flex: 0 0 auto;
    max-width: none;
  }
  .hand {
    width: max-content;
    max-width: 100%;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    margin: 0 auto;
  }
  .hand:not(.hand-fan) .card-container {
    flex-grow: 0;
    width: 100px;
  }

  /* Help/hint surfaces flow naturally between the castle area and the hand
     (or below). Capped width so they don't sprawl. */
  .card-help-container,
  .current-turn,
  .discard-help {
    width: 90%;
    max-width: 720px;
    margin: 8px auto;
    box-sizing: border-box;
  }
  .card-help-container {
    padding: 0 8px;
  }
}

/* 1366x769-class laptops: this size falls in a gap (wider than the ≤1279
   block, shorter than the ≥821 block), leaving the hand sitting too low with
   dead space above. Lift the hand up 100px; because the card-help text flows
   directly below the hand, the negative margin pulls it up with the cards by
   the same amount (spacing preserved). Margin — not transform — so the
   onboarding spotlight can't trap highlighted cards under its overlay. */
@media (min-width: 1300px) and (max-width: 1400px) and (min-height: 740px) and (max-height: 800px) {
  .hands {
    margin-top: -100px;
  }
}

/* Trim the empty space at the top of the castle frame so the visible
   castle top sits close to the frame's top edge (and thus close to the
   resource panel's bottom). Applied on all viewports inside #game so
   mobile and desktop both benefit; the harness keeps the default 288. */
#game .stacked-castle-frame {
  height: 200px;
}

/* Turn status + hand + card help wrapper. `display:contents` keeps it
   transparent to layout — its children flow (or flex) as if it weren't here. */
.game-action-tail {
  display: contents;
}

/* Desktop, tall renderers: the non-stacked renderers (tent/classic/tower) use a
   360px image-container, so their castle area (~617px) + info bar + turn text +
   hand + card help is taller than typical viewports and the page scrolls — which
   slides the castles against the position:fixed scenic background. (The default
   stacked castle is compact and fits, so a stacked-vs-stacked quick match never
   scrolls — hence we only touch games that contain a non-stacked castle.)

   Fit it to the viewport with a flex column: the castle area shrinks and its
   castle simply overflows downward BEHIND the hand cards (z-index), exactly like
   the ≥940px "big castle" layout. When the viewport is tall enough the castle
   area doesn't shrink, so nothing changes there. overflow:hidden then stops the
   page scrolling (only the decorative castle base past the fold is clipped). */
@media (min-width: 1280px) and (min-height: 601px) {
  .game-board:has(.castle-and-wall:not(.castle-and-wall-stacked)) {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    /* Clip only downward. The board is narrower than the viewport (it is
       centred with side margins), and the stacked castle's HP disc hangs past
       its outer edge — `overflow: hidden` sliced the disc in half on campaign
       boards. `clip` on one axis, unlike `hidden`, leaves the other one truly
       visible instead of turning it into a scroll axis. */
    overflow-x: visible;
    overflow-y: clip;
  }
  .game-board:has(.castle-and-wall:not(.castle-and-wall-stacked)) .castle-container {
    flex: 0 1 auto;
    min-height: 0;
  }
  /* The board now fits the viewport; lock the page so the little decorative
     remainder (body margin, scenic hills below the fold) can't scroll and slide
     the castles against the fixed background. */
  html:has(.game-board .castle-and-wall:not(.castle-and-wall-stacked)),
  body:has(.game-board .castle-and-wall:not(.castle-and-wall-stacked)) {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
}

/* Mobile portrait: shrink the modular castle+wall by 10% so they don't
   crowd the narrow viewport. Anchored at each player's outer-top corner
   so the castles stay glued to the edges of the screen and shrink inward
   and downward. */
@media (max-width: 768px) {
  #game .castle-and-wall-stacked.castle-and-wall-stacked-red {
    transform: scale(0.9);
    transform-origin: left top;
  }
  #game .castle-and-wall-stacked.castle-and-wall-stacked-blue {
    transform: scale(0.9);
    transform-origin: right top;
  }
}

/* Big stacked castle for tall viewports — the scaled-up castles sit to the
   sides of the cards (red left, blue right) with the hand pulled up close to
   the resource panel. Gated by height so very short screens don't get the
   oversized castle. Lowered from 1000 → 940 so ~945px-inner-height windows
   (e.g. a maximised 1920x1080 with browser chrome) get the side-by-side layout
   too — confirmed to have room at that height. */
@media (min-width: 1280px) and (min-height: 940px) {
  /* Negate most of the castle's layout height so the hand sits much closer
     to the resource panel — the castle visual is positioned via the
     transform below and overflows downward into the hand area. Effective
     layout height: 200 - 130 = 70px. */
  #game .castle-and-wall-stacked {
    margin-bottom: -130px;
  }

  /* Anchor the wall by a top offset that lands it at the bottom of the
     scaled castle, aligning with the castle base. */
  #game .castle-and-wall-stacked .stacked-wall-shell {
    top: 139px;
    bottom: auto;
  }

  /* Scale the castle anchored at its TOP edge — visual top stays glued to
     the resource panel's bottom, visual extends downward past the layout
     box (and past the last-played-card and hand cards) into the lower half
     of the screen. The wall (positioned absolutely inside the castle-and-
     wall-stacked) ends up well below the last-played-card. Cards stay
     above the castle visually via z-index 5. */
  /* Drop the castles ~100px lower and nudge each side outward by 30px (red
     left, blue right). The leading translate shifts the rendered result by
     exact screen pixels regardless of the scale/origin that follow. */
  #game .castle-and-wall-stacked.castle-and-wall-stacked-red {
    transform: translate(-30px, 100px) scale(1.8);
    transform-origin: left top;
  }
  #game .castle-and-wall-stacked.castle-and-wall-stacked-blue {
    transform: translate(30px, 100px) scale(1.8);
    transform-origin: right top;
  }
}

/* Large desktop: castles at more than double their base size.
   ---------------------------------------------------------------------------
   Gated on WIDTH as well as height, and higher than the 1280 above: the castle
   grows sideways as well as down, and at 1280–1599 a castle this big would
   slide under the hand — which would also hide the HP badges, the one thing
   that has to stay readable.

   The scale is capped by the room below the cards, not by taste. The castle box
   is 200px tall and grows downward from the top edge, so the base lands at
   roughly (panel bottom + translate) + 200 * scale; past the viewport bottom
   the castle's base and its wall are simply cut off, and the scenic horizon —
   which tracks the lowest castle base — follows them off-screen and leaves a
   sliver of grass. Hence two height bands rather than one scale. */
/* Stacked castles only — on both sides.
   ---------------------------------------------------------------------------
   The transform is visual: the castle paints far below its layout box, and the
   scenic horizon fits itself to the LOWEST painted castle base. A campaign
   opponent renders as a tent/tower/classic castle, whose column is instead
   bottom-aligned to the row's layout box — so scaling only the player's side
   dragged the horizon down past it and left the opponent hanging 90px in the
   sky at 1920x1080. The 1.8x band above is gentle enough that the opponent
   still lands below the horizon, so a mixed board simply falls back to it. */
@media (min-width: 1600px) and (min-height: 940px) {
  #game .game-board:not(:has(.castle-and-wall:not(.castle-and-wall-stacked)))
    .castle-and-wall-stacked.castle-and-wall-stacked-red {
    transform: translate(-30px, 60px) scale(2.2);
  }
  #game .game-board:not(:has(.castle-and-wall:not(.castle-and-wall-stacked)))
    .castle-and-wall-stacked.castle-and-wall-stacked-blue {
    transform: translate(30px, 60px) scale(2.2);
  }
}

@media (min-width: 1600px) and (min-height: 1040px) {
  #game .game-board:not(:has(.castle-and-wall:not(.castle-and-wall-stacked)))
    .castle-and-wall-stacked.castle-and-wall-stacked-red {
    transform: translate(-30px, 40px) scale(2.6);
  }
  #game .game-board:not(:has(.castle-and-wall:not(.castle-and-wall-stacked)))
    .castle-and-wall-stacked.castle-and-wall-stacked-blue {
    transform: translate(30px, 40px) scale(2.6);
  }
}

/* Large desktop: say what each value counts.
   ---------------------------------------------------------------------------
   At this size the two dark discs beside a castle are big enough to read but
   not to tell apart, so each one carries its own subject as a backdrop — a
   castle behind the castle HP, a brick wall behind the wall HP. The icon is
   laid UNDER a flat dark veil rather than given an `opacity` (which would take
   the number down with it), so the digits keep their full contrast.

   Only the stacked renderer: it is the one that draws these values as discs.
   The tent/classic/tower renderers print bare numbers over their art, and a
   backdrop there would be a change nobody asked for.

   Sizes are in the castle's own units — the surrounding transform paints them
   2.2x or 2.6x larger. min-width rather than width so a three-digit value
   (a castle at 100) stretches the disc into a pill instead of spilling out. */
@media (min-width: 1600px) and (min-height: 940px) {
  #game .castle-image-hp.stacked-castle-hp {
    min-width: 46px;
    height: 46px;
    padding: 0 7px;
    display: grid;
    place-items: center;
    background:
      linear-gradient(rgba(20, 14, 10, 0.55), rgba(20, 14, 10, 0.55)),
      url("/assets/castle-icon.png") center / 68% auto no-repeat,
      rgba(20, 14, 10, 0.84);
  }

  /* Both values are pinned to the OUTER side — the castle's own column, on the
     player's edge of the board. The castle and wall grow towards the middle,
     and so does the hand as the player's card size grows: at 1920 with extra
     large cards the hand starts at x=390 while the castle value ran to x=434,
     so the first card covered it. The hand is centred and the castle column is
     against the board's edge, so anchoring here is clear of the hand at any
     card size and any number of cards.

     They are also offset from each other — the wall's value sits lower and
     slightly inward — because the two discs are otherwise stacked in a column
     against the same edge. */
  #game .castle-and-wall-stacked-red .castle-image-hp.stacked-castle-hp {
    left: 4%;
    right: auto;
  }
  #game .castle-and-wall-stacked-blue .castle-image-hp.stacked-castle-hp {
    left: auto;
    right: 4%;
  }

  #game .castle-and-wall-stacked-red .wall-image-hp.stacked-wall-hp {
    left: 14%;
    top: 8px;
  }
  #game .castle-and-wall-stacked-blue .wall-image-hp.stacked-wall-hp {
    left: 86%;
    top: 8px;
  }

  #game .wall-image-hp.stacked-wall-hp {
    min-width: 34px;
    height: 34px;
    padding: 0 6px;
    display: grid;
    place-items: center;
    background:
      linear-gradient(rgba(20, 14, 10, 0.58), rgba(20, 14, 10, 0.58)),
      url("/assets/icons/resources/wall.png") center / 68% auto no-repeat,
      rgba(20, 14, 10, 0.84);
  }
}


/* Tutorial Responsive Styles */
@media (max-width: 768px) {
  .tutorial-container {
    margin: 15px auto;
    padding: 0 15px;
    gap: 15px;
  }

  .tutorial-panel {
    padding: 30px 25px;
  }

  .tutorial-title {
    font-size: 1.6rem;
    margin-bottom: 20px;
  }

  .tutorial-description {
    font-size: 1rem;
    margin: 20px 0;
  }

  .tutorial-image {
    max-height: 300px;
  }

  .tutorial-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .tutorial-btn {
    width: 100%;
    padding: 11px 20px;
    font-size: 0.95rem;
  }

  .tutorial-btn-primary,
  .tutorial-btn-secondary {
    flex: none;
    min-width: unset;
  }

  .tutorial-btn-success {
    margin-top: 10px;
    padding: 12px 20px;
  }
}

@media (max-width: 480px) {
  .tutorial-container {
    margin: 10px auto;
    padding: 0 10px;
  }

  .tutorial-panel {
    padding: 20px 15px;
  }

  .tutorial-title {
    font-size: 1.4rem;
    margin-bottom: 15px;
  }

  .progress-text {
    font-size: 0.8rem;
  }

  .progress-bar {
    height: 5px;
  }

  .tutorial-description {
    font-size: 0.95rem;
    margin: 15px 0;
    line-height: 1.6;
  }

  .tutorial-image {
    max-height: 250px;
  }

  .tutorial-image-container {
    margin: 20px 0;
  }

  .tutorial-buttons {
    gap: 8px;
  }

  .tutorial-btn {
    padding: 10px 15px;
    font-size: 0.9rem;
  }

  .tutorial-btn-success {
    margin-top: 8px;
    padding: 11px 15px;
    font-size: 1rem;
  }
}

@keyframes pulse {
  0% {
    opacity: 55%;
  }

  70% {
    opacity: 100%;
  }

  100% {
    opacity: 55%;
  }
}

/* Game Over Page Responsive */
@media (max-width: 768px) {
  .game-over-container {
    padding: 15px;
  }

  .game-over-content {
    padding: 30px 25px;
  }

  .game-over-title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
  }

  .final-score-section {
    gap: 20px;
    padding: 20px 0;
    margin: 30px 0;
  }

  .score-card {
    min-width: 100px;
    padding: 15px 20px;
  }

  .score-value {
    font-size: clamp(2rem, 3.5vw, 2.5rem);
  }

  .score-divider {
    font-size: clamp(1.5rem, 3vw, 2rem);
  }

  .finishing-card-label {
    font-size: 0.9rem;
  }

  .game-over-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .game-over-container {
    padding: 10px;
    align-items: flex-start;
    padding-top: 20px;
  }

  .game-over-content {
    padding: 20px 15px;
    border-radius: 12px;
    max-height: 95vh;
  }

  .game-over-header {
    margin-bottom: 20px;
  }

  .game-over-title {
    font-size: 1.8rem;
    letter-spacing: 0;
  }

  .winner-badge {
    padding: 6px 12px;
    font-size: 0.7rem;
    margin-bottom: 10px;
  }

  .final-score-section {
    gap: 12px;
    padding: 15px 0;
    margin: 20px 0;
  }

  .score-card {
    min-width: 70px;
    padding: 10px 12px;
    gap: 6px;
  }

  .score-label {
    font-size: 0.8rem;
  }

  .score-value {
    font-size: 2rem;
  }

  .score-badge {
    padding: 3px 8px;
    font-size: 0.65rem;
  }

  .score-divider {
    font-size: 1.5rem;
  }

  .finishing-card-section {
    padding: 15px;
    margin: 20px 0;
    border-left-width: 3px;
  }

  .finishing-card-label {
    font-size: 0.85rem;
  }

  .finishing-card-label strong {
    font-size: 1rem;
  }

  .game-over-buttons {
    gap: 10px;
  }

  .game-over-btn {
    padding: 11px 20px;
    font-size: 0.9rem;
    border-radius: 6px;
  }

  .finishing-card-section {
    padding: 15px;
    margin: 20px 0;
  }

  .finishing-card-label {
    font-size: 0.9rem;
  }

  .finishing-card-label strong {
    font-size: 1rem;
  }
}

/* Extra small screens / landscape phones */
@media (max-width: 360px), (max-height: 500px) {
  .game-over-container {
    padding: 5px;
    padding-top: 10px;
  }

  .game-over-content {
    padding: 15px 12px;
    border-radius: 10px;
    max-height: 98vh;
  }

  .game-over-header {
    margin-bottom: 15px;
  }

  .game-over-title {
    font-size: 1.5rem;
    line-height: 1.2;
  }

  .winner-badge {
    padding: 5px 10px;
    font-size: 0.65rem;
    margin-bottom: 8px;
  }

  .final-score-section {
    gap: 10px;
    padding: 12px 0;
    margin: 15px 0;
  }

  .score-card {
    min-width: 60px;
    padding: 8px 10px;
    gap: 4px;
  }

  .score-label {
    font-size: 0.7rem;
  }

  .score-value {
    font-size: 1.8rem;
  }

  .score-divider {
    font-size: 1.5rem;
  }

  .score-badge {
    padding: 3px 8px;
    font-size: 0.6rem;
    top: -8px;
    right: 4px;
  }

  .finishing-card-section {
    padding: 12px;
    margin: 15px 0;
  }

  .finishing-card-label {
    font-size: 0.85rem;
  }

  .finishing-card-label strong {
    font-size: 0.95rem;
  }

  .game-over-buttons {
    gap: 8px;
    margin-top: 15px;
  }

  .game-over-btn {
    padding: 10px 16px;
    font-size: 0.85rem;
    border-radius: 6px;
  }
}

/* Victory screen tabs + Match Stats — portrait phones.
   - Tab buttons become icon-only (drop the text label).
   - Header + tab bar stay fixed; the active tab panel scrolls internally so
     the Result / Match Stats content doesn't overflow ("fall out") the panel
     on short portrait screens. */
@media (max-width: 768px) and (orientation: portrait) {
  .go-tab-label {
    display: none;
  }

  .go-tab {
    padding: 11px 10px;
  }

  .go-tab i {
    font-size: 1.1em;
  }

  .game-over-content {
    max-height: 92vh;
    max-height: 92dvh;
  }

  .go-tab-panel {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Height-based responsive for very short screens (embedded iframes, landscape phones) */
@media (max-height: 600px) {
  .game-over-container {
    padding: 10px;
    min-height: 100%;
  }

  .game-over-content {
    padding: 20px 25px;
    margin: 0;
  }

  .game-over-header {
    margin-bottom: 15px;
  }

  .game-over-title {
    font-size: clamp(1.3rem, 3vh, 2rem);
    line-height: 1.2;
  }

  .winner-badge {
    padding: 6px 12px;
    font-size: 0.7rem;
    margin-bottom: 8px;
  }

  .final-score-section {
    gap: 15px;
    padding: 12px 0;
    margin: 15px 0;
  }

  .score-card {
    min-width: 70px;
    padding: 10px 15px;
    gap: 6px;
  }

  .score-label {
    font-size: 0.75rem;
  }

  .score-value {
    font-size: clamp(1.5rem, 4vh, 2rem);
  }

  .score-divider {
    font-size: clamp(1.2rem, 3vh, 1.8rem);
  }

  .score-badge {
    padding: 3px 8px;
    font-size: 0.6rem;
    top: -8px;
  }

  .finishing-card-section {
    padding: 12px;
    margin: 12px 0;
  }

  .finishing-card-label {
    font-size: 0.85rem;
  }

  .finishing-card-label strong {
    font-size: 0.95rem;
  }

  .game-over-buttons {
    gap: 8px;
    margin-top: 12px;
  }

  .game-over-btn {
    padding: 9px 18px;
    font-size: 0.85rem;
  }
}

@media (max-height: 450px) {
  .game-over-container {
    padding: 5px;
  }

  .game-over-content {
    padding: 15px 20px;
    border-radius: 10px;
  }

  .game-over-header {
    margin-bottom: 10px;
  }

  .game-over-title {
    font-size: clamp(1.2rem, 3vh, 1.5rem);
    line-height: 1.1;
  }

  .winner-badge {
    padding: 4px 10px;
    font-size: 0.65rem;
    margin-bottom: 6px;
  }

  .final-score-section {
    gap: 10px;
    padding: 10px 0;
    margin: 10px 0;
  }

  .score-card {
    min-width: 60px;
    padding: 8px 12px;
    gap: 4px;
  }

  .score-label {
    font-size: 0.7rem;
  }

  .score-value {
    font-size: clamp(1.3rem, 3.5vh, 1.8rem);
  }

  .score-divider {
    font-size: clamp(1rem, 2.5vh, 1.5rem);
  }

  .score-badge {
    padding: 2px 6px;
    font-size: 0.55rem;
    top: -6px;
  }

  .finishing-card-section {
    padding: 10px;
    margin: 10px 0;
  }

  .finishing-card-label {
    font-size: 0.8rem;
  }

  .finishing-card-label strong {
    font-size: 0.85rem;
  }

  .game-over-buttons {
    gap: 6px;
    margin-top: 10px;
  }

  .game-over-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

@media (max-height: 350px) {
  .game-over-container {
    padding: 3px;
  }

  .game-over-content {
    padding: 10px 15px;
    border-radius: 8px;
  }

  .game-over-header {
    margin-bottom: 8px;
  }

  .game-over-title {
    font-size: clamp(1rem, 2.5vh, 1.3rem);
    line-height: 1;
  }

  .winner-badge {
    padding: 3px 8px;
    font-size: 0.6rem;
    margin-bottom: 4px;
  }

  .final-score-section {
    gap: 8px;
    padding: 8px 0;
    margin: 8px 0;
  }

  .score-card {
    min-width: 50px;
    padding: 6px 10px;
    gap: 3px;
  }

  .score-label {
    font-size: 0.65rem;
  }

  .score-value {
    font-size: clamp(1.2rem, 3vh, 1.5rem);
  }

  .score-divider {
    font-size: clamp(0.9rem, 2vh, 1.2rem);
  }

  .score-badge {
    display: none;
  }

  .finishing-card-section {
    padding: 8px;
    margin: 8px 0;
  }

  .finishing-card-label {
    font-size: 0.75rem;
  }

  .finishing-card-label strong {
    font-size: 0.8rem;
  }

  .game-over-buttons {
    gap: 5px;
    margin-top: 8px;
  }

  .game-over-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
}

/* Combined small width and small height (tiny embedded iframes) */
@media (max-width: 400px) and (max-height: 500px) {
  .game-over-container {
    padding: 5px;
  }

  .game-over-content {
    padding: 12px 15px;
    border-radius: 8px;
  }

  .game-over-header {
    margin-bottom: 8px;
  }

  .game-over-title {
    font-size: clamp(1.1rem, 2.5vh, 1.4rem);
    line-height: 1.1;
  }

  .winner-badge {
    padding: 4px 8px;
    font-size: 0.6rem;
    margin-bottom: 5px;
  }

  .final-score-section {
    gap: 8px;
    padding: 8px 0;
    margin: 8px 0;
    flex-wrap: wrap;
  }

  .score-card {
    min-width: 55px;
    padding: 6px 10px;
    gap: 3px;
  }

  .score-label {
    font-size: 0.65rem;
  }

  .score-value {
    font-size: clamp(1.2rem, 2.8vh, 1.6rem);
  }

  .score-divider {
    font-size: clamp(0.9rem, 2vh, 1.3rem);
  }

  .finishing-card-section {
    padding: 8px;
    margin: 8px 0;
  }

  .finishing-card-label {
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .finishing-card-label strong {
    font-size: 0.8rem;
  }

  .game-over-buttons {
    gap: 5px;
    margin-top: 8px;
  }

  .game-over-btn {
    padding: 7px 12px;
    font-size: 0.75rem;
  }
}

/* Cards Overview Responsive */
@media (max-width: 768px) {
  .cards-overview-header {
    margin-bottom: 20px;
  }

  .cards-overview-header h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
  }

  .cards-overview-subtitle {
    font-size: 0.9rem;
  }

  .cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }

  .card-grid-item {
    border-radius: 2px;
  }

  .card-grid-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }

  .card-grid-image {
    aspect-ratio: 3 / 4;
    padding-bottom: 8px;
  }

  .card-grid-info {
    padding: 10px;
  }

  .card-grid-title {
    font-size: 0.85rem;
    margin-bottom: 6px;
  }

  .cost-badge {
    padding: 3px 6px;
    font-size: 0.7rem;
  }

  .tutorial-nav-link {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .cards-overview-header h3 {
    font-size: 1.2rem;
  }

  .cards-overview-subtitle {
    font-size: 0.85rem;
  }

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

  .card-grid-title {
    font-size: 0.8rem;
  }

  .card-type-badge {
    padding: 5px 10px;
    font-size: 0.65rem;
  }

  .cost-badge {
    padding: 2px 5px;
    font-size: 0.65rem;
    gap: 2px;
  }
}

@media (min-width: 769px) {
  .cards-overview-header {
    margin-bottom: 30px;
  }

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

/* Card Details Responsive */
@media (max-width: 1024px) {
  .card-details-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .card-image-wrapper {
    max-width: 350px;
    margin: 0 auto;
  }

  .card-details-title {
    font-size: 1.8rem;
  }

  .card-details-description {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .card-details-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  .card-navigation-counter {
    width: 100%;
    text-align: right;
  }

  .card-details-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .card-image-wrapper {
    max-width: 100%;
  }

  .card-details-title {
    font-size: 1.6rem;
  }

  .card-details-section-label {
    font-size: 0.85rem;
  }

  .card-details-description {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .card-navigation-buttons {
    gap: 10px;
  }

  .card-nav-button {
    padding: 14px 16px;
    font-size: 0.9rem;
  }

  .card-nav-button:hover {
    transform: none;
  }

  .card-nav-prev:hover {
    transform: none;
  }
}

@media (max-width: 480px) {
  .card-details-container {
    gap: 15px;
    padding: 16px 18px;
  }

  .card-details-header {
    padding-bottom: 8px;
  }

  .card-back-link {
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .card-navigation-counter {
    font-size: 0.8rem;
  }

  .card-image-wrapper {
    max-width: 100%;
  }

  .card-details-title {
    font-size: 1.4rem;
  }

  .card-details-section-label {
    font-size: 0.75rem;
    margin-bottom: 10px;
  }

  .card-details-description {
    font-size: 0.9rem;
    line-height: 1.6;
  }

  .card-nav-button {
    padding: 12px 14px;
    font-size: 0.85rem;
    gap: 8px;
  }

  .card-nav-button i {
    font-size: 1rem;
  }
}

/* Map Responsive Styles */
@media (max-width: 768px) {
  .map-container {
    gap: 20px;
    padding: 0 15px;
  }

  .map-wrapper {
    padding: 15px 0;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    padding-left: 10px;
    padding-right: 10px;
  }

  .hex:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
  }

  .map-info-section {
    max-width: 100%;
    padding: 0;
  }

  .map-info-panel {
    min-height: 180px;
    border-radius: 10px;
  }

  .map-description-panel {
    border-radius: 10px;
  }

  .map-description-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }

  .map-description-text {
    font-size: 0.9rem;
    margin-bottom: 10px;
  }

  .play-now-btn {
    padding: 12px 24px;
    font-size: 0.95rem;
  }

  /* Keep the activity/info panel and its content within the viewport. The map
     column uses `align-items: center`, so any child that can't shrink overflows
     equally on BOTH sides (clipped left, spilling right). Let the flex chain
     shrink (min-width:0), wrap long names/ids, and clip residual overflow. */
  .map-container { box-sizing: border-box; max-width: 100%; }
  .map-info-section { min-width: 0; max-width: 100%; box-sizing: border-box; }
  .map-description-panel {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .map-description-content { min-width: 0; max-width: 100%; }
  .worldmap-summary-list,
  .worldmap-summary-day,
  .worldmap-summary-row,
  .worldmap-activity-list,
  .worldmap-activity-entry,
  .worldmap-activity-text { min-width: 0; }
  .worldmap-summary-player,
  .worldmap-activity-name,
  .worldmap-activity-name-static,
  .worldmap-activity-text,
  .worldmap-summary-day-label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}

@media (max-width: 480px) {
  .map-container {
    gap: 15px;
    padding: 0 10px;
  }

  .map-wrapper {
    padding: 10px;
    border-radius: 8px;
  }

  .hex:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }

  .hex:active {
    transform: scale(0.96);
  }

  .map-info-panel {
    min-height: 150px;
    padding: 15px;
    border-radius: 8px;
  }

  .map-info-placeholder i {
    font-size: 2rem;
    margin-bottom: 8px;
  }

  .map-info-placeholder p {
    font-size: 0.9rem;
  }

  .map-description-panel {
    border-radius: 8px;
    padding: 15px;
  }

  .map-description-content {
    padding: 0;
  }

  .map-description-title {
    font-size: 1rem;
    margin-bottom: 10px;
  }

  .map-description-text {
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 8px;
  }

  .play-now-btn {
    padding: 11px 20px;
    font-size: 0.9rem;
    width: 100%;
    justify-content: center;
  }
}

/* Swipe-up gesture hint for first-time mobile users */
@keyframes swipe-hint-anim {
  0%   { transform: translateX(-50%) translateY(0);     opacity: 0; }
  15%  { transform: translateX(-50%) translateY(0);     opacity: 1; }
  25%  { transform: translateX(-50%) translateY(6px);   opacity: 1; }
  60%  { transform: translateX(-50%) translateY(-44px); opacity: 1; }
  78%  { transform: translateX(-50%) translateY(-44px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);     opacity: 0; }
}

@keyframes swipe-hint-down-anim {
  0%   { transform: translateX(-50%) translateY(0);    opacity: 0; }
  15%  { transform: translateX(-50%) translateY(0);    opacity: 1; }
  25%  { transform: translateX(-50%) translateY(-6px); opacity: 1; }
  60%  { transform: translateX(-50%) translateY(44px); opacity: 1; }
  78%  { transform: translateX(-50%) translateY(44px); opacity: 0; }
  100% { transform: translateX(-50%) translateY(0);    opacity: 0; }
}

.swipe-up-hint {
  display: none;
  position: fixed;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 9999;
  animation: swipe-hint-anim 2.2s ease-in-out infinite;
}

.swipe-up-hint.swipe-down-demo {
  animation: swipe-hint-down-anim 2.2s ease-in-out infinite;
}

.swipe-up-hint.swipe-up-hint-visible {
  display: flex;
}

.swipe-hint-arrow {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}

.swipe-hint-hand {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

/* Mid-height landscape band (height 500–600, width > 660). There's vertical
   room to spare here, so lift the play area (castle visuals, turn indicator,
   card-help text and the hand) and shrink the centred last-played card so the
   board sits higher and doesn't crowd the hand below. The card is an absolutely
   positioned sibling, so moving the rest doesn't move it.

   NB: we lift the CASTLE VISUALS (.castle-visual-group), not the whole
   .castle-row, on purpose. The resource stats live in .castle-row too, and a
   `transform` on an ancestor breaks `position: sticky` on its descendants —
   so transforming .castle-row would make the sticky resource stats below
   impossible. .castle-visual-group is a sibling of .main-resources-group, so
   the castles still rise while the resources stay stickable. */
@media (min-width: 661px) and (min-height: 501px) and (max-height: 600px) {
  /* Lift the upper stack (castle, turn box, hand) up to claw back vertical
     room on these short wide viewports (e.g. an 800x600 embedded iframe). The
     card-help panel is pinned separately below (see #cardhelptextdiv). */
  .castle-visual-group,
  #current-turn-wrap,
  .hands {
    transform: translateY(-70px);
  }
  /* The cards' visual bottom lands well inside the viewport here, but the help
     panel's flow box would sit below the fold (and the translate lift above is
     visual-only, so it can't pull the help up without also reserving its full
     height and forcing a scroll). Pin the help panel just below the cards at
     the bottom of the viewport instead: always visible, no scroll, directly
     under the hand. min-height:0 drops the desktop 100px reservation so it
     doesn't add page height. */
  #cardhelptextdiv {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
    width: 92%;
    max-width: 720px;
    margin: 0;
    min-height: 0;
    z-index: 30;
  }
  /* Cap the panel to the gap between the cards and the bottom edge so a long,
     multi-line description (which grows upward from the pinned bottom) can never
     climb back over the cards. The body already scrolls internally past this. */
  #cardhelptextdiv .card-help-panel {
    max-height: 50px;
  }
  /* Resource stats stick just below the sticky navbar (top:0, ~52px tall) as
     the board scrolls down, so they're pushed down by the navbar instead of
     sliding under it. They travel within their .castle-and-resources parent. */
  .main-resources-group {
    position: sticky;
    top: 52px;
    z-index: 50;
  }
  .last-played-card {
    transform: translateX(-50%) scale(0.8);
    transform-origin: top center;
  }
}

/* Mid-size embedded portals (e.g. 920x800): the cards fit on-screen but the
   board is just tall enough that the in-flow card-help panel spills below the
   fold (made worse by the larger resource stats above). Same remedy as the
   short-screen case: pin the help to the bottom (out of flow, so it stops
   adding page height) and nudge the cards up a touch so they clear it. Capped
   to this height band — below it the short-screen rules above apply; above it
   the board fits and the help sits in flow normally. */
@media (min-width: 768px) and (max-width: 1279px) and (min-height: 760px) and (max-height: 880px) {
  #cardhelptextdiv {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 6px;
    width: 92%;
    max-width: 720px;
    margin: 0;
    min-height: 0;
    z-index: 30;
  }
  #cardhelptextdiv .card-help-panel {
    max-height: 50px;
  }
  /* Lift the hand so the cards clear the bottom-pinned help panel. */
  .hands {
    transform: translateY(-30px);
  }
}

/* Mobile portrait: take the turn indicator out of normal flow. Its text (turn
 * hint + effect pills) otherwise pushes the hand down far enough to create a
 * vertical scrollbar on the tight portrait viewport. Absolute → it overlays its
 * static spot (between the castle and the hand) without reserving height, so the
 * hand stays put and the board fits. */
@media (max-width: 768px) and (orientation: portrait) {
  #current-turn-wrap {
    position: absolute;
  }
}

/* Same out-of-flow treatment for small short windows in EITHER orientation
 * (quick game, campaign, onboarding alike). The portrait rule above only covers
 * portrait; small landscape windows in the 501-700px height band (e.g. 591×502,
 * which sits above the ≤500px landscape-phone layout in landscape-mobile.css)
 * otherwise keep the turn indicator in flow, reserving height that pushes the
 * hand down and opens a gap. Capped at max-width:660 so it stays disjoint from
 * the wide-short embedded-iframe layout (min-width:661 block above), which keeps
 * the turn box in flow on purpose. */
@media (max-width: 660px) and (min-height: 501px) and (max-height: 700px) {
  #current-turn-wrap {
    position: absolute;
  }
}


/* Small square embeds — 512x512, 562x562, 584x584 and the like ─────────────
   The compact short-screen layout above packs the whole board into the top of
   the viewport and leaves a band of empty ground under the hand: at 562x562 the
   cards ended at y=458 and the help at y=510 in a 562px viewport, with the
   scenery below doing nothing.

   Gated to the same max-height the compact layout uses, with min-width to keep
   portrait phones out (they have their own scrolling stacked layout) and
   max-width to keep the wide-short band (661+, handled above) out.

   Bottom-anchor the hand rather than nudging it down by a measured amount: a
   flex column whose min-height reaches to just above the pinned help, with an
   auto top margin on the hand. Same remedy the onboarding lesson uses for the
   same symptom (see card-themes.css, "Down at the bottom edge") and it holds
   for boards of any height above the hand — a compact stacked-vs-stacked match
   sits its castles far higher than a classic or tent one, and a flat margin
   that suits one leaves a band of dead grass under the other.

   min-height, not height: where the board is already taller than the box (at
   512x512 there is no spare room at all) it simply grows, the auto margin
   resolves to 0, and nothing moves. Pinning the help panel is what pays for
   the room — out of flow it stops adding page height. */
@media (min-width: 480px) and (max-width: 660px) and (max-height: 600px) {
  /* Onboarding is left out: the lesson carries its own hand lifts (portrait
     rules in onboarding.css) tuned against the castle it spotlights. */
  #game:not(.onboarding-active) .game-board {
    display: flex;
    flex-direction: column;
    /* Viewport minus the board's own top offset (8px body margin + the ~52px
       navbar) and the pinned help band below it (46px panel cap + 4px inset). */
    min-height: calc(100vh - 112px);
  }

  #game:not(.onboarding-active) .hands {
    margin-top: auto;
  }

  #cardhelptextdiv {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4px;
    width: 94%;
    margin: 0;
    min-height: 0;
    z-index: 30;
  }

  /* Capped so a long description, which grows upward from the pinned bottom,
     can never climb back over the cards. */
  #cardhelptextdiv .card-help-panel {
    max-height: 46px;
  }
}