/* ==========================================================================
   css/size.css — the Lv. 100 popup and the size wizard (DECISIONS 304)
   --------------------------------------------------------------------------
   js/ui/size.js builds both inside openModal; js/ui/pokemon.js adds the Size panel
   on the summary. The previews reuse the game's own classes on purpose - .actor
   (css/scene.css) for the map, .battle-sprite.you / .battle-platform.you
   (css/game.css) for the arena - so what the wizard shows is exactly what the map
   and the battle draw, phone sizes included. Only the boxes around them live here.
   ========================================================================== */

/* Popup: the Exp. Share gift layout (.gift-pop, css/layout.css) with a bigger picture. */
.size-pop-art {
  width: 76px; height: 76px;
  display: flex; align-items: center; justify-content: center;
}
.size-pop-img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }

/* Wizard */
.size-wiz > * + * { margin-top: 12px; }
.size-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.size-prev { margin: 0; min-width: 0; }
.size-prev figcaption { margin-top: 4px; font-size: 0.75rem; color: var(--muted); text-align: center; }

/* The map: a grass patch in the scene's placeholder colours; the actors are placed in scene
   units by createActor, so percentages of this box (1000 x 600 units). */
.size-ow {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse at 50% 88%, rgba(0, 0, 0, 0.1), transparent 55%),
    linear-gradient(180deg, #9bd37a 0%, #7cc05f 100%);
}
/* The normal size (step 0) as a dashed box at the follower's feet, to compare with. */
.size-ghost {
  position: absolute;
  width: var(--follower-h, 40px);
  height: var(--follower-h, 40px);
  transform: translate(-50%, -100%);
  border: 1px dashed rgba(255, 255, 255, 0.75);
  border-radius: 4px;
  pointer-events: none;
}

/* The arena: the day field with the back sprite on its platform, centred in the box. */
.size-arena {
  position: relative;
  height: 250px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: url(../assets/ui/battle/backgrounds/field-day.png) center / cover no-repeat, linear-gradient(180deg, #8fd0ff 0%, #bfe6ff 42%, #8cc96a 43%, #5fa64b 100%);
  image-rendering: pixelated;
}
.size-arena .battle-sprite.you,
.size-arena .battle-platform.you { left: 30%; }

.size-now { text-align: center; }
.size-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* The steps: one cell per step, the level under it. Unlocked = accent dot, chosen and below =
   filled, the chosen one ringed; locked = grey with a padlock. */
.size-track { display: grid; grid-template-columns: repeat(var(--steps, 17), minmax(0, 1fr)); gap: 3px; }
.size-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 0;
  padding: 5px 0 4px;
  border: var(--panel-border);
  border-radius: var(--radius-xs);
  background: var(--panel-2);
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.size-cell:disabled { cursor: default; opacity: 0.55; }
.size-dot {
  display: flex; align-items: center; justify-content: center;
  width: 12px; height: 12px;
  border-radius: 50%;
}
.size-cell.is-open .size-dot { border: 2px solid var(--accent); }
.size-cell.is-on .size-dot { background: var(--accent); }
.size-cell.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); color: var(--text); }
.size-cell.is-open:not(:disabled):hover { background: var(--panel-3); }
.size-cell:focus-visible { outline: none; box-shadow: var(--focus); }
.size-lv { font-size: 9px; line-height: 1; font-variant-numeric: tabular-nums; }
.size-progress { margin-bottom: 0; text-align: center; }

/* The summary's Size panel: the same steps as a thin bar. */
.size-mini { display: grid; grid-template-columns: repeat(var(--steps, 17), minmax(0, 1fr)); gap: 2px; margin: 4px 0 8px; }
.size-mini span { height: 6px; border-radius: 2px; background: var(--hp-track); }
.size-mini span.is-open { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.size-mini span.is-on { background: var(--accent); }

/* Phones: the previews under each other, the cells without their level (the line under it says it). */
@media (max-width: 600px) {
  .size-previews { grid-template-columns: 1fr; }
  .size-ow { height: 170px; }
  .size-arena { height: 230px; }
  .size-lv { display: none; }
  .size-track { gap: 2px; }
  .size-cell { padding: 6px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .size-ow .actor-body { animation: none !important; }
}

/* --------------------------------------------------------------------------
   Size chips in the lists (size fase 2, DECISIONS 414): XL from step 6, XXL
   from 12, a golden MAX on 17. Same quiet shape as the form chips, so the
   cards stay calm; js/sprites.js sizeChip() builds them. */
.size-chip {
  display: inline-flex; align-items: center;
  padding: 0 5px; border-radius: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; line-height: 15px;
  background: rgba(255, 255, 255, 0.14); color: var(--text, #fff);
}
.size-chip.s-xxl { background: rgba(126, 200, 227, 0.24); color: #bfe7f7; }
.size-chip.s-max { background: rgba(255, 216, 107, 0.22); color: #ffd86b; box-shadow: inset 0 0 0 1px rgba(255, 216, 107, 0.45); }
@media (max-width: 420px) {
  .size-chip { font-size: 8px; padding: 0 4px; line-height: 13px; }
}

/* --------------------------------------------------------------------------
   Size Contest / Meetweek (#contest, DECISIONS 414). Reuses the panel and
   market-pick styles; only what those do not cover lives here. */
.contest-week { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.contest-week .sprite-wrap img { width: 96px; height: 96px; image-rendering: pixelated; }
.contest-rows { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.contest-row {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: var(--radius-sm, 8px);
  background: var(--panel-2, rgba(255, 255, 255, 0.05));
}
.contest-rank { flex: none; width: 26px; font-weight: 800; color: var(--muted, #b8c0d4); font-variant-numeric: tabular-nums; }
.contest-row.first .contest-rank { color: #ffd86b; }
.contest-row img { width: 28px; height: 28px; image-rendering: pixelated; }
.contest-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contest-meta { flex: none; color: var(--muted, #b8c0d4); font-size: 12px; font-variant-numeric: tabular-nums; }
.contest-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
@media (max-width: 600px) {
  /* Mobiel-regel (PLAN-SIZE-VISUEEL par. 2): kleiner beeld, één kolom kiezers. */
  .contest-week .sprite-wrap img { width: 72px; height: 72px; }
  .contest-picks { grid-template-columns: 1fr; }
}