body {
  font-family: Inter, ui-sans-serif, system-ui, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  transition: background .2s, color .2s;
}
:root {
  --bg: #ffffff;
  --fg: #121212;
  --muted: #6b7280;
  --card: #ffffff;
  --glass: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.55);
  --shadow: 0 10px 28px rgba(0,0,0,.15);
  --ok: #10b981;
  --no: #ef4444;
  --hi: #6366f1;
}
[data-theme="dark"] {
  --bg: #0d1117;
  --fg: #e6edf3;
  --muted: #a3a9b6;
  --card: #0d1117;
  --glass: rgba(20,24,32,.55);
  --glass-border: rgba(255,255,255,.08);
  --shadow: 0 14px 32px rgba(0,0,0,.55);
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px 110px;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
/* Site title replaced by responsive logo image */
.site-title { display:flex; align-items:center; gap:10px; }
/* Hide raw img elements by default; theme rules below will show the correct one. This prevents both
  images from being visible at the same time when cascade conflicts occur. */
.site-title img { display: none !important; height: auto !important; max-width: 240px !important; max-height: 56px !important; }
/* Ensure the logo stays compact on small screens - sizing is controlled on the .site-logo class below */
@media (max-width:760px){ /* no width forcing here to avoid stretching */ }

/* Theme-aware switching: prefer the negative (white) logo in dark mode */
/* Theme-specific logo visibility: default to showing the light-mode logo and hide the dark one */
.logo-light { display: none !important; }
.logo-dark { display: none !important; }
/* Explicitly show only the appropriate logo for the active theme. Use !important to avoid cascade conflicts
   so there is never more than one visible logo. */
body[data-theme="light"] .logo-light { display: block !important; }
body[data-theme="light"] .logo-dark { display: none !important; }
body[data-theme="dark"] .logo-light { display: none !important; }
body[data-theme="dark"] .logo-dark { display: block !important; }
/* Responsive sizing: preserve aspect ratio and avoid stretching. Use max-width and max-height; width:auto keeps
   intrinsic aspect ratio while allowing the image to scale down. */
.site-title .site-logo {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: min(45vw, 240px);
  max-height: 56px;
  object-fit: contain;
}
.site-title .site-logo.logo-dark { /* in case the dark asset needs slight contrast tweak */
  filter: none;
}
@media (max-width:760px){
  .site-title .site-logo { max-width: min(50vw, 180px); max-height: 44px; }
}
.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.glass, .btn {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--fg);
}
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  overflow: hidden;
}
.seg input {
  display: none;
}
.seg label {
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
}
.seg input:checked+label {
  background: rgba(255,255,255,.9);
  color: #111;
  font-weight: 700; /* make selected option bold */
}
[data-theme="dark"] .seg input:checked+label {
  background: rgba(255,255,255,.12);
  color: #fff;
  font-weight: 700; /* bold in dark mode too */
}
.btn {
  padding: 8px 12px;
  cursor: pointer;
}
.namebox {
  display: flex;
  align-items: center;
  gap: 8px;
}
.namebox input {
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.7);
  color: var(--fg);
}
.hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
@media (max-width:980px) {
  .main {
    grid-template-columns: 1fr;
  }
}
.stage {
  position: relative;
  width: 100%;
  /* increased ~10% so boards render slightly larger */
  max-width: 1210px;
  margin: 12px auto 0;
}
.stage img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: #fff;
}
.overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}
.pen {
  position: absolute;
  pointer-events: auto;
  z-index: 2;
  /* allow child tokens to visually overflow slightly so large bridge tokens remain visible */
  overflow: visible;
}

/* label that appears under each pen (outside overlay area) */
/* hide any .pen-label accidentally placed inside .pen elements (avoid duplicates) */
.pen .pen-label { display: none !important; }

/* absolute per-pen label positioned below each pen (outside pen box) */
[hidden] .overlay .pen-label { display: none; }
.overlay .pen-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
  background: rgba(255,255,255,0.95);
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: none; /* hidden by default; shown while dragging via body.dragging */
}
[data-theme="dark"] .overlay .pen-label {
  background: rgba(15,17,23,.8);
  color: #fff;
}

/* Show per-pen labels only when user is dragging a token and the overlay is visible */
body.dragging .overlay:not([hidden]) .pen-label {
  display: block;
}

/* ensure pen content doesn't overflow its box when wrapping occurs. Exclude puente pens which intentionally allow overflow */
.pen:not([data-pen^="puente-enamorados"]) { overflow: hidden; }
.pen[data-visible="false"] {
  display: none;
}
.debug .pen {
  outline: 2px dashed rgba(79,70,229,.6);
  border-radius: 12px;
}
.debug .slots {
  background: rgba(99,102,241,.06);
  border-radius: 12px;
}
.debug .slot {
  background: rgba(79,70,229,.08);
  position: relative;
}
.debug .slot::after {
  content: attr(data-index);
  position: absolute;
  top: 2px;
  left: 6px;
  font: 600 12px/1.1 ui-sans-serif;
  color: #4f46e5;
}

/* Show pyramid floors as debug hotspots (highlight each floor rectangle) */
.debug .pen[data-pen="piramide"] .pyr-bottom,
.debug .pen[data-pen="piramide"] .pyr-middle,
.debug .pen[data-pen="piramide"] .pyr-top {
  outline: 2px dashed rgba(99,102,241,.45);
  background: rgba(99,102,241,.06);
  border-radius: 8px;
  z-index: 4;
  pointer-events: none;
}

/* Ensure pyramid floors are positioned relative to their pen (they use absolute positioning) */
.pen[data-pen="piramide"] { position: absolute; }
.pen[data-pen="piramide"] .pyr-bottom,
.pen[data-pen="piramide"] .pyr-middle,
.pen[data-pen="piramide"] .pyr-top {
  /* floors are absolutely positioned inside the pen; ensure their coordinates are interpreted relative to the pen */
  position: absolute;
}
@keyframes pulseHi {
  0% {
    box-shadow: 0 0 0 0 rgba(99,102,241,.45), 0 0 0 4px rgba(99,102,241,.25) inset;
  }
  50% {
    box-shadow: 0 0 0 8px rgba(99,102,241,.20), 0 0 0 6px rgba(99,102,241,.35) inset;
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99,102,241,.45), 0 0 0 4px rgba(99,102,241,.25) inset;
  }
}
.pen.can-drop {
  border-radius: 14px;
  outline: 2px solid rgba(99,102,241,.65);
  animation: pulseHi 1.2s ease-in-out infinite;
  background: linear-gradient(to bottom, rgba(99,102,241,.12), rgba(99,102,241,.08));
}
/* internal hint pseudo-element removed; use .pen-label positioned elements */
.slots {
  position: absolute;
  /* reduce horizontal insets so slots have more room */
  /* inset uses CSS vars so per-pen overrides can set --slots-inset-vertical and --slots-inset-horizontal */
  --slots-inset-vertical: 6%;
  --slots-inset-horizontal: 4%;
  inset: var(--slots-inset-vertical) var(--slots-inset-horizontal);
  display: flex;
  /* slot sizing is driven by --slot-count (set from JS) and --slot-gap */
  --slot-count: 6;
  /* even tighter gap */
  --slot-gap: 1px;
  gap: var(--slot-gap);
  align-items: flex-end;
  justify-content: flex-start;
}

/* allow selected pens to wrap slots into multiple rows when horizontal space is constrained */
.pen[data-pen="pradera-amor"] .slots,
.pen[data-pen="trio-frondoso"] .slots {
  /* wrapping is opt-in via JS setting .allow-wrap */
  align-content: flex-start;
}

/* When wrapping, use a fixed number of columns (wrap-cols) so slots form neat rows. */
.slots.allow-wrap { flex-wrap: wrap; }
.slots.allow-wrap .slot { margin-bottom: 6px; }
.pen[data-pen="pradera-amor"] .slots.allow-wrap,
.pen[data-pen="trio-frondoso"] .slots.allow-wrap {
  --wrap-cols: 3;
}
.pen[data-pen="pradera-amor"] .slots.allow-wrap .slot,
.pen[data-pen="trio-frondoso"] .slots.allow-wrap .slot {
  flex: 0 0 calc((100% - ((var(--wrap-cols,3) - 1) * var(--slot-gap))) / var(--wrap-cols,3));
}
/* Force pradera-amor to prefer a 2x2 arrangement when multiple tokens are placed */
.pen[data-pen="pradera-amor"] .slots.allow-wrap {
  --wrap-cols: 2; /* two columns */
  gap: 8px;
  /* Use a grid when wrapping so slots form stable rows (2,2,2). Use --wrap-cols so
    JS can control the number of columns dynamically. Grid avoids height conflicts
    that can hide tokens when flex-wrapping. */
  display: grid;
  grid-template-columns: repeat(var(--wrap-cols,2), 1fr);
  grid-auto-rows: auto;
  align-items: center;
  gap: var(--slot-gap, 8px);
}
.pen[data-pen="pradera-amor"] .slot .token {
  /* token size is driven by JS via --pradera-token-width and --pradera-token-scale */
  width: var(--pradera-token-width, 90%);
  transform-origin: center bottom;
  transform: scale(var(--pradera-token-scale, 1));
  transition: width .12s ease, transform .12s ease;
  max-width: 100%;
}
.pen[data-pen="pradera-amor"] .slots.allow-wrap .slot {
  /* when wrapping into two columns, make each slot half width so tokens can sit 2x2 */
  /* Grid items will size automatically; ensure they don't keep inline heights that clip content */
  flex: 0 0 calc((100% - var(--slot-gap)) / 2);
  height: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Reduce horizontal spacing between slots inside prado-diferencia */
.pen[data-pen="prado-diferencia"] .slots {
  /* reduce gap by ~10% relative to --slot-gap (use calc for relative adjustment)
     fallback to 1px when --slot-gap is not set */
  gap: calc( (var(--slot-gap, 1px) * 0.90) );
}

/* Slightly reduce horizontal spacing in bosque-semejanza (2% smaller) */
.pen[data-pen="bosque-semejanza"] .slots {
  gap: calc( (var(--slot-gap, 1px) * 0.98) );
}

/* Smaller tokens in Rey de la Selva pen so they fit visually */
.pen[data-pen="rey-selva"] .slot .token {
  width: 64% !important;
  transform: scale(0.9) !important;
}
.pen[data-pen="trio-frondoso"] .slots .slot {
  margin-bottom: 12px; /* more space below slots */
}
.slot {
  /* compute width so N slots fit inside the pen without overflowing
    width = (100% - (N - 1) * gap) / N */
  flex: 0 0 calc((100% - ( (var(--slot-count,6) - 1) * var(--slot-gap) )) / var(--slot-count,6));
  /* allow smaller minimum so more tokens fit on narrow boards */
  min-width: 18px;
  min-height: 44px;
  border: 1px dashed transparent;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;
  background: transparent;
  pointer-events: auto; /* allow clicks on token children (delete button) */
}
.columns {
  display: flex;
  gap: 10px;
  position: absolute;
  inset: 8% 6%;
}
.col {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  justify-content: flex-start;
}
.pyramid {
  position: absolute;
  inset: 10% 14%;
  display: grid;
  gap: 8px;
  align-items: end;
}
.pyr-bottom, .pyr-middle, .pyr-top {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Pyramid token sizing: controllable via variables set on the .pen[data-pen="piramide"]
   --piramide-token-width: percentage of slot width (default 60%)
   --piramide-token-max-height: maximum height for token thumbnail (default 5vh)
   Tokens inside the pyramid will not exceed the provided max height to keep them compact. */
.pen[data-pen="piramide"] .slot .token {
  width: var(--piramide-token-width, 60%) !important;
  max-width: 100%;
  /* cap thumbnail height so tokens are visually small: use --piramide-token-max-height (e.g. 5vh) */
  max-height: var(--piramide-token-max-height, 5vh);
  transform: scale(1) !important;
}
.pen[data-pen="piramide"] .slot .token .thumb { width: 100%; height: auto; max-height: var(--piramide-token-max-height, 5vh); aspect-ratio: 1/1; }
.palette {
  position: sticky;
  bottom: 0;
  padding: 8px 8px 14px;
  z-index: 3;
  background: transparent;
  display: flex;
  gap: var(--palette-gap, 14px); /* dynamic gap based on palette label width */
  align-items: center;
  justify-content: center; /* center tokens when there's room */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-left: 6px;
}
.palette::-webkit-scrollbar{ height:8px }
.palette::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); border-radius: 8px }
.grid { display: block; min-height: 0; }
.token-template, .token {
  width: 72px;
  height: auto; /* allow label below image */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* reduce strong white background so tokens blend with board */
  background: transparent;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  position: relative;
  user-select: none;
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease;
  flex-direction: column;
  padding: 4px 6px 6px;
}

/* thumbnail area inside tokens (palette tokens get fixed size; placed tokens in slots are overridden) */
.token-template .thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}
.token .thumb { width: 48px; height: 48px; border-radius: 8px; background-size: cover; background-position: center; }

/* ensure palette entries are centered and not stretched */
.palette .token-template { flex: 0 0 auto; }
@keyframes floaty {
  0% {
    transform: translateY(-2px) scale(1.04) rotate(-2deg);
  }
  100% {
    transform: translateY(-6px) scale(1.08) rotate(-1deg);
  }
}
@keyframes haloPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(99,102,241,.35), 0 6px 18px rgba(0,0,0,.25);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(99,102,241,.10), 0 12px 26px rgba(0,0,0,.28);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(99,102,241,.35), 0 6px 18px rgba(0,0,0,.25);
  }
}
.dragging-token {
  position: relative;
  animation: floaty .8s ease-in-out infinite alternate;
}
.dragging-token::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 2px solid rgba(99,102,241,.55);
  animation: haloPulse 1.2s ease-in-out infinite;
  pointer-events: none;
}
.stage.drag-overlay-on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  border-radius: 18px;
  pointer-events: none;
}
.stage.drag-overlay-on .pen {
  /* Do not hide pens when dragging; keep overlays visible */
  opacity: 1;
  filter: none;
  transition: none;
}
/* Ensure puente-enamorados subzones (.slots[data-sub]) are visible while dragging
   and highlighted so the user can drop onto left/right banks. Also ensure debug
   mode shows them clearly for editing positions. */
body.dragging .overlay:not([hidden]) [data-pen^="puente-enamorados"] .slots[data-sub] {
  opacity: 1;
  visibility: visible;
  z-index: 4;
  outline: 2px dashed rgba(99,102,241,.45);
  background: rgba(99,102,241,.06);
  border-radius: 8px;
}
/* explicit debug styling for puente subzones so they are visible when debug mode is active */
.debug [data-pen^="puente-enamorados"] .slots[data-sub] {
  background: rgba(99,102,241,.06);
  border-radius: 8px;
  outline: 2px dashed rgba(99,102,241,.45);
}

/* Reduce the placed dinosaur size inside the puesto-observacion slot and nudge it 10% up
   (this affects the token positioning inside the slot, not the pen box). */
.pen[data-pen="puesto-observacion"] .slot .token {
  width: 70% !important; /* ~10% smaller than default 78% */
  transform-origin: center bottom;
  transform: translateY(-15%) scale(0.9); /* Nudge the observation token 5% further up for improved alignment */
}

/* Bridge subpens: allow 6 tokens each by shrinking placed tokens and slot widths */
.pen[data-pen^="puente-enamorados"] {
  /* ensure the pen itself allows visible overflow so larger tokens aren't clipped */
  overflow: visible;
}
.pen[data-pen^="puente-enamorados"] .slots {
  --slot-gap: 6px; /* default gap, may be adjusted by JS */
  padding: 6px; /* prevent tokens touching pen edges */
  box-sizing: border-box;
}

/* Ensure bridge pens and tokens are visible above other overlay content and thumbnails show correctly */
.pen[data-pen^="puente-enamorados"] {
  z-index: 30; /* above typical pen z-index */
  overflow: visible;
}
.pen[data-pen^="puente-enamorados"] .slot {
  position: relative;
  z-index: 31;
}
.pen[data-pen^="puente-enamorados"] .slot .token {
  z-index: 32;
}
.pen[data-pen^="puente-enamorados"] .token .thumb {
  width: 100%;
  height: auto;
  max-height: var(--bridge-token-max-height, 8vh);
  background-size: cover;
  background-position: center;
  display: block;
}

/* Force bridge pens and their tokens above other overlay content so placed dinos are visible */
.pen[data-pen^="puente-enamorados"] {
  z-index: 40; /* higher than default pens */
}
.pen[data-pen^="puente-enamorados"] .slots {
  overflow: visible; /* let tokens overflow the slots area if necessary */
  z-index: 42; /* ensure slots and tokens render above nearby content */
}
.pen[data-pen^="puente-enamorados"] .slot .token {
  visibility: visible !important;
  display: flex !important;
}
.pen[data-pen^="puente-enamorados"] .slot {
  /* slot sizing uses --slot-count; keep small min-width so many tokens fit */
  flex: 0 0 calc((100% - ( (var(--slot-count,6) - 1) * var(--slot-gap) )) / var(--slot-count,6));
  min-width: 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pen[data-pen^="puente-enamorados"] .slot .token {
  /* Bridge tokens: default appear larger (2x) but respect slot constraints.
     Expose these vars on the .pen element so positions in HTML can tweak them:
       --bridge-token-width: percentage width of slot (default 120%% meaning visually larger than slot)
       --bridge-token-max-height: max thumbnail height inside token (e.g. 8vh)
       --bridge-token-scale: additional transform scale (default 1)
     Tokens will shrink via max-width and max-height when they would overflow the slot. */
  /* Use a smaller default overflow to avoid tokens being pushed off-screen while keeping them visually larger than slot */
  width: var(--bridge-token-width, 120%) !important; /* default slight overflow */
  max-width: none !important; /* allow visual overflow beyond slot width when desired */
  /* cap the token's thumbnail height so it scales down responsively */
  max-height: var(--bridge-token-max-height, 12vh) !important;
  transform-origin: center bottom;
  /* apply an optional extra scale; keep default 1 to let width drive size */
  transform: scale(var(--bridge-token-scale, 1));
  transition: width .12s ease, transform .12s ease;
  box-sizing: border-box;
  /* Ensure token content is never too small to be invisible */
  min-width: 28px !important;
  min-height: 28px !important;
}

/* Ensure the thumbnail inside bridge tokens respects the bridge max-height */
.pen[data-pen^="puente-enamorados"] .slot .token .thumb {
  max-height: var(--bridge-token-max-height, 12vh) !important;
  width: auto !important;
  height: auto !important;
  aspect-ratio: 1/1 !important;
  /* Ensure the thumbnail has a visible minimum size */
  min-width: 24px !important;
  min-height: 24px !important;
}

/* Ensure bridge token thumbnails occupy token content area and use cover so images are visible */
.pen[data-pen^="puente-enamorados"] .token .thumb {
  width: 100% !important;
  height: auto !important;
  max-height: var(--bridge-token-max-height, 8vh) !important;
  background-size: cover !important;
  background-position: center !important;
  display: block !important;
}

/* Quarantine tokens: larger and more prominent */
.pen[data-pen="cuarentena"] .slot .token {
  /* Editable via CSS variables on the pen element:
    --cuarentena-token-width: width percentage of the slot (default 70%)
    --cuarentena-token-scale: extra transform scale multiplier (default 1)
    --cuarentena-token-max-height: cap token height inside the slot (default 95%)
    Example: <div class="pen" data-pen="cuarentena" style="--cuarentena-token-width:50%; --cuarentena-token-scale:0.9"> */
  width: var(--cuarentena-token-width, 70%) !important;
  max-width: 100%;
  max-height: var(--cuarentena-token-max-height, 95%);
  transform-origin: center center;
  transform: scale(var(--cuarentena-token-scale, 1)) !important;
  z-index: 20;
}

/* Ensure the quarantine token is centered within the pen both horizontally and vertically */
.pen[data-pen="cuarentena"] .slots {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px; /* keep some breathing room for large token */
}

/* Make quarantine slot itself a centered box so single token sits centered */
.pen[data-pen="cuarentena"] .slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
}
/* keep existing .pen.can-drop visual rules elsewhere; no extra behaviour needed here */
#toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9999;
  display: grid;
  gap: 8px;
  pointer-events: none;
}
.toast-msg {
  background: var(--glass);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  color: var(--fg);
  box-shadow: var(--shadow);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  pointer-events: auto;
  animation: toastIn .16s ease-out;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 8px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
[data-pen="rio"] .slots {
  display: flex;
  /* stack tokens bottom -> top */
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-start;
  inset: 4% 6%;
  gap: 6px;
}
/* Nudge these pens' slot containers 8% upwards for visual alignment (except bosque-semejanza)
   bosque-semejanza is handled separately so only its .slots are moved, not the pen itself. */
.pen[data-pen="prado-diferencia"] .slots,
.pen[data-pen="trio-frondoso"] .slots,
.pen[data-pen="pradera-amor"] .slots {
  transform: translateY(-8%);
}

/* Move ONLY the slot container inside bosque-semejanza up by 8% (do not move the pen box) */
.pen[data-pen="bosque-semejanza"] .slots {
  transform: translateY(-8%);
}

/* Larger, more congruent tokens in Pradera del Amor; they scale down only when multiple tokens force it */
.pen[data-pen="pradera-amor"] {
  /* default width for tokens inside this pen — adjustable via JS by setting --pradera-token-width on the pen or slots */
  --pradera-token-width: 90%;
}
.pen[data-pen="pradera-amor"] .slot .token {
  width: var(--pradera-token-width, 90%);
  transition: width .12s ease, transform .12s ease;
}

/* When pradera-amor wraps (many tokens), allow tokens to shrink but keep aspect ratio */
.pen[data-pen="pradera-amor"] .slots.allow-wrap .slot .token {
  width: 100%;
}
[data-pen="rio"] .slot {
  width: 86%;
  min-width: 0;
  height: 76px;
}
.panel {
  position: relative;
  z-index: 2;
}
/* total score label next to total value */
.score-total-label { font-size: 13px; color: var(--muted); display:block; }

/* Rey label styling: species on top, descriptive text below */
.rey-label { display: inline-block; line-height: 1; }
.rey-label .rey-species { display: block; font-weight: 700; font-size: 14px; color: var(--fg); }
.rey-label .rey-desc { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); }

/* Dark mode: improve token label legibility */
[data-theme="dark"] .token .label, [data-theme="dark"] .token-template .label {
  /* use black text in dark mode as requested */
  color: #000000;
  text-shadow: none;
  font-weight: 400;
}

/* Provide a subtle white background for palette token labels in dark mode so names stay readable */
[data-theme="dark"] .palette .token-template .label {
  background: rgba(255,255,255,0.92);
  padding: 2px 6px;
  border-radius: 6px;
  display: inline-block;
}

/* make tokens inside slots scale to slot size so they fit responsively */
.slot .token {
  position: relative;
  width: 78%; /* token width is percentage of slot width */
  max-width: 100%;
  height: auto;
  transform: none;
  transition: width .12s ease, transform .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Ensure pradera-amor placed tokens override the general .slot .token rule
   so the JS-driven --pradera-token-width and --pradera-token-scale take effect. */
.pen[data-pen="pradera-amor"] .slot .token {
  width: var(--pradera-token-width, 90%) !important;
  transform: scale(var(--pradera-token-scale, 1)) !important;
  transition: width .12s ease, transform .12s ease;
  max-width: 100%;
}

/* thumbnail inside placed token should scale with token width */
.slot .token .thumb { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; }

@media (max-width:480px){
  .token-template { width: 72px; }
  .token .thumb, .token-template .thumb { width: 48px; height: 48px; }
  .slot .token { transform: scale(0.68); }
}
.card {
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px 16px;
  margin-bottom: 18px;
}
.card h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 16px;
}
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.row + .row { margin-top: 8px; }
.total {
  font-weight: bold;
  font-size: 18px;
  margin-top: 12px;
}
.small {
  font-size: 13px;
}

/* Token label under image */
.token .label { margin-top: 6px; font-size: 12px; text-align: center; width: 100%; }
/* hide labels for tokens placed inside slots to reduce clutter */
.slot .token .label { display: none; }
/* keep palette token labels visible */
.palette .token-template .label { display: block; }

/* Ensure token-template (palette items) follow same layout as tokens and are centered */
.token-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
}
.token .delete {
  position: absolute;
  top: -6px;
  right: -6px;
  background: transparent; /* remove solid background so it doesn't show a circle */
  color: rgba(0,0,0,0.6);
  border: none;
  width: 16px;
  height: 16px;
  padding: 0;
  line-height: 16px;
  font-size: 14px;
  cursor: pointer;
}

/* stronger dragging visuals */
.dragging-token { transform: translateY(-8px) scale(1.06); box-shadow: 0 14px 30px rgba(0,0,0,.22); z-index: 9999; }
.dragging-token::before { inset: -10px; }

/* Add gap between pen name rows in sidebar breakdown */
#score-breakdown .row { padding: 6px 0; border-bottom: 1px dashed rgba(0,0,0,.04); }
#score-breakdown .row:last-child { border-bottom: none; }

/* container for absolute labels positioned relative to the stage */
#stage-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5; /* above overlays */
}

/* Mode rules card responsiveness */
#mode-rules #mode-rules-body { font-size: 13px; line-height: 1.3; color: var(--muted); }
@media (max-width: 760px){
  #mode-rules { padding: 8px 10px; }
  #mode-rules #mode-rules-body { font-size: 12px; }
}