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;
  }
  .last-played-card {
    top: 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);
    overflow: hidden;
  }
  .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;
  }
}


/* 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;
  }
}