:root {
  --bg: #faf7f0;
  --ink: #1a1a1a;
  --green: #009246;                    /* tricolore, accents, frames */
  --btn-green: #007a3a;                /* green BEHIND white text (contrast >= 4.5) */
  --red: #ce2b37;
  --font-fallback: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overscroll-behavior-y: none; }
button { touch-action: manipulation; }
/* page = flex column: [banner] + #app. The card screen is locked to the viewport height (no page scroll). */
body {
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-fallback);
  font-size: 18px;
  line-height: 1.4;
}

/* Validation banner: a collapsible <details> (summary = title + count) with the close button beside it */
#banner {
  flex: none;   /* static, in flow at the top of the page: it scrolls away with the page and never covers content */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 10px;
  max-height: 40vh; overflow-y: auto;
  background: #fff3cd; color: #5c4400;
  border-bottom: 3px solid #e0a800;
  padding: 4px 14px;
  font-size: 14px;
}
#banner[hidden] { display: none; }
#banner details { min-width: 0; }
#banner summary {
  min-height: 44px; display: flex; align-items: center; cursor: pointer;
  font-size: 16px; font-weight: 700; overflow-wrap: anywhere;
}
#banner ul { margin: 0 0 6px; padding-left: 20px; }
#banner li { margin-bottom: 3px; overflow-wrap: anywhere; }
#banner li.more { list-style: none; margin-left: -20px; font-style: italic; }
.banner-close {
  font: inherit; font-size: 14px; min-width: 44px; min-height: 44px; padding: 6px 14px; border: 1px solid #a07a00;
  background: #fff; color: #5c4400; border-radius: 6px; cursor: pointer;
}

/* Text for screen readers only (live regions, glyph words) */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Message in place of an empty list (no valid levels / categories) */
.empty-msg {
  grid-column: 1 / -1; margin: 0; padding: 16px; text-align: center; font-weight: 700; overflow-wrap: anywhere;
  background: #fff3cd; color: #5c4400; border: 2px dashed #e0a800; border-radius: 16px;
}

/* App column */
#app {
  flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0;
  width: 100%; max-width: 520px; margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
:where(#app) > * { flex: none; }   /* zero specificity: .tiles / .card-wrap override it */
/* Top row on every screen: language switch, right-aligned, in flow */
.topbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* Start screen */
.start { display: flex; flex-direction: column; align-items: center; gap: 28px; padding-top: 12vh; text-align: center; }
.start h1 { font-size: 28px; margin: 0; }
.btn {
  font: inherit; font-size: 20px; padding: 14px 24px; width: 100%; min-height: 56px;
  border: 3px solid transparent; border-radius: 999px; background: var(--btn-green); color: #fff; cursor: pointer;
  overflow-wrap: anywhere;
}
.btn:active { filter: brightness(0.9); }

/* Language switch (own row, see .topbar) */
#lang {
  display: flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: #fff;
}
.lang-btn {
  font: inherit; font-size: 14px; font-weight: 700; min-width: 44px; min-height: 44px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
}
.lang-btn.active { background: var(--ink); color: #fff; }

/* Setup screens */
.question {
  background: #ffe066; border: 3px solid #e0b800; border-radius: 20px;
  padding: 20px 16px; text-align: center; font-size: 22px; font-weight: 700;
  margin-bottom: 24px; overflow-wrap: anywhere;
}
.stack { display: flex; flex-direction: column; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.btn.marked { border-color: var(--ink); box-shadow: 0 0 0 3px #fff inset; }
.btn-yes { background: var(--btn-green); color: #fff; }
.btn-no { background: var(--red); color: #fff; }
.btn-level, .btn-player { color: var(--ink); font-weight: 700; }
.btn-num { font-size: 28px; font-weight: 700; background: #fff; color: var(--ink); border-color: #ccc; }
.btn-secondary { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-cancel { background: #fff; color: var(--ink); border-color: #999; }
.btn-start { margin-top: 24px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.rows { display: flex; flex-direction: column; gap: 12px; }
.prow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.name-input {
  font: inherit; font-size: 18px; min-height: 56px; min-width: 0; padding: 0 14px;
  border: 3px solid #ccc; border-radius: 16px; background: #fff; color: var(--ink);
}
.level-field { font-size: 16px; padding: 8px 10px; color: var(--ink); font-weight: 700; }
.level-field.empty { background: #fff; border: 3px dashed #999; font-weight: 400; }
.topfield {
  background: #fff; border: 3px solid var(--ink); border-radius: 16px;
  padding: 16px; text-align: center; font-size: 20px; font-weight: 700; overflow-wrap: anywhere;
}

/* Modal */
.backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.panel {
  width: 100%; max-width: 420px; max-height: 90vh; max-height: 90dvh; overflow-y: auto;
  background: var(--bg); border-radius: 20px; padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.panel > * { flex: none; }   /* buttons never squash: the panel scrolls instead */
.panel h2 { margin: 0; text-align: center; font-size: 20px; }
.dlg-section { display: flex; flex-direction: column; gap: 10px; }
.dlg-section > * { flex: none; }
.panel h3 { margin: 0; text-align: center; font-size: 16px; }

/* Stesso / popup: two buttons side by side */
.pair { display: flex; gap: 12px; }
.pair > .btn { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
.pair.bottom { margin-top: 14px; }
.pair.bottom > .btn { font-size: 17px; }

/* Game screen */
.topfield-btn { width: 100%; font: inherit; font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; display: block; }
.scegli { margin: 12px 0 8px; text-align: center; font-size: 20px; }
/* tiles fill the height left between the heading and the bottom bar */
.tiles { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, 1fr); gap: 10px; }
.tile {
  font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 6px; background: #fff; color: var(--ink);
  border: 2px solid #ddd; border-radius: 16px; cursor: pointer;
}
.tile:active { filter: brightness(0.95); }
.tile-name {
  font-size: 14px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; hyphens: auto; text-align: center;
  color: color-mix(in srgb, var(--acc) 78%, #000);
}
.circle {
  flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
  border: 3px solid var(--acc); background: color-mix(in srgb, var(--acc) 18%, #fff);
}
.circle img { width: 70%; height: 70%; object-fit: contain; }

/* ==========================================================================
   CARD STYLE - adjust from a Canva screenshot
   Everything that makes the card look like a physical card lives in this block.
   ONE geometry for both variants (sfondo template / CSS frame), driven by custom properties on each .card
   face (so a later batch can set them per category from inline styles). Units: --u = one pixel of the
   750x1050 Canva template (scales with the card), text-top/bottom = fractions of the card height.
   ========================================================================== */
:root {
  --card-ratio: 5 / 7;                 /* width / height of the card */
  --card-radius: 14px;
  --card-cream: #f8f8f1;               /* off-white of the Canva cards (docs/riferimenti) */
  --card-edge: 1px solid rgba(60, 40, 0, 0.18);   /* hairline edge of the physical card */
  /* tricolore frame of the Canva cards (CSS variant): green left, red right, diagonal stripes top/bottom.
     Sizes are fractions of the card height, taken from the reference cards (docs/riferimenti). */
  --frame-w-f: 0.04;
  --frame-h-f: 0.054;
  --frame-dash-f: 0.03;
  --frame-angle: 115deg;
  --frame-green: #009246;
  --frame-white: #ffffff;
  --frame-red: #ce2b37;
  --card-title-weight: 800;
  --card-shadow: 0 8px 20px rgba(60, 40, 0, 0.22), 0 2px 4px rgba(60, 40, 0, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  --card-grow-time: 350ms;             /* card grows from the tile (app.js reads this) */
  --card-pad: 8px;                     /* text area inset inside the frame */
  --card-btn-bg: rgba(255, 255, 255, 0.88);   /* semi-opaque pill: readable on top of a template image */
  --card-btn-color: var(--ink);
  --card-btn-border: 2px solid var(--ink);
  --card-btn-radius: 999px;
  --card-btn-size: 15px;
  --card-right-bg: #c9f0d4;            /* Hilfe: correct option */
  --card-right-border: #009246;
  --card-wrong-bg: #f8c9cd;            /* Hilfe: wrongly tapped option */
  --card-wrong-border: #ce2b37;
  --card-flip-time: 0.5s;
}
/* The card screen is locked to the viewport (body.screen-carta); .card-wrap takes the height left between the
   top field and the timer/bottom bar and is a size container, so the card is exactly as big as fits (cqw/cqh). */
.card-wrap {
  flex: 1 1 0; min-height: 0; container-type: size;
  display: flex; align-items: center; justify-content: center;
  perspective: 1400px; margin-top: 8px;
}
/* .card-flip = the 3D element (rotates); .card = one face (front / back) */
.card-flip {
  position: relative; flex: none; transform-style: preserve-3d;
  --card-h: var(--card-h-fixed, min(100cqh, calc(100cqw * 7 / 5)));   /* the preview (?anteprima) sets --card-h-fixed */
  --frame-w: calc(var(--card-h) * var(--frame-w-f));
  --frame-h: calc(var(--card-h) * var(--frame-h-f));
  --frame-dash: calc(var(--card-h) * var(--frame-dash-f));
  height: var(--card-h); aspect-ratio: var(--card-ratio); width: auto;
  transition: transform var(--card-flip-time) ease;
  touch-action: pan-y; -webkit-user-select: none; user-select: none;
}
.card-flip.card-new { animation: card-in 0.25s ease-out; }   /* only a newly drawn card fades in, never a re-render */
.card-flip.flipped { transform: rotateY(180deg); }
/* Face geometry (per-face custom properties; defaults here, a later batch overrides them inline per category).
   Text area = from --text-top to (1 - --text-bottom) of the card height, inside the frame horizontally.
   The reference icon (bottom right) sits at ~78-88% of the height, so the bottom 22% is free for it and the pills. */
.card {
  --u: calc(var(--card-h) / 1050);     /* one pixel of the 750x1050 template */
  --text-top: 0.20;
  --text-bottom: 0.22;
  /* category icon: the CSS variant always draws it; a template only when sfide.csv icona_posizione is set. Sizes/offsets in u.
     app.js sets --text-top, --text-bottom and --icon-size per category from sfide.csv (these are the fallbacks). */
  --icon-size: 100;
  --icon-gap: 8px;                     /* minimum space between the icon and the pills */
  --icon-edge: 85;                     /* distance from the left/right edge */
  --icon-top: 70;                      /* alto: distance from the top */
  --icon-bottom: 128;                  /* basso: distance from the bottom (icon spans ~78-88% of the height) */
  position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--card-cream) center / cover no-repeat;
  border: var(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow);
  isolation: isolate;
  padding: calc(var(--card-h) * var(--text-top)) calc(var(--frame-w) + var(--card-pad)) calc(var(--card-h) * var(--text-bottom));
}
/* tricolore frame (CSS variant only; the template/immagine variants bring their own artwork) */
.card:not(.card-tpl):not(.card-image)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(var(--frame-angle), var(--frame-green) 0 var(--frame-dash), var(--frame-white) var(--frame-dash) calc(var(--frame-dash) * 2), var(--frame-red) calc(var(--frame-dash) * 2) calc(var(--frame-dash) * 3)) top / 100% var(--frame-h) no-repeat,
    repeating-linear-gradient(var(--frame-angle), var(--frame-green) 0 var(--frame-dash), var(--frame-white) var(--frame-dash) calc(var(--frame-dash) * 2), var(--frame-red) calc(var(--frame-dash) * 2) calc(var(--frame-dash) * 3)) bottom / 100% var(--frame-h) no-repeat,
    linear-gradient(var(--frame-green), var(--frame-green)) left / var(--frame-w) 100% no-repeat,
    linear-gradient(var(--frame-red), var(--frame-red)) right / var(--frame-w) 100% no-repeat;
}
.card-back { transform: rotateY(180deg); cursor: pointer; }
/* sfondo variant (front AND back): the template fills the face */
.card-tpl { background-size: 100% 100%; background-origin: border-box; }
@keyframes card-in { from { opacity: 0; } to { opacity: 1; } }
/* CSS variant: title centred between the top frame and the text area ... */
.card-title {
  position: absolute; z-index: 1;
  left: calc(var(--frame-w) + var(--card-pad)); right: calc(var(--frame-w) + var(--card-pad));
  top: var(--frame-h); height: calc(var(--card-h) * var(--text-top) - var(--frame-h));
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: calc(44 * var(--u)); font-weight: var(--card-title-weight); line-height: 1.1;
  text-transform: uppercase; overflow-wrap: anywhere; text-wrap: balance;
}
.card-title-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }   /* max 2 lines, then an ellipsis */
/* alto-* icon (CSS variant): the title never touches it. Left/right: symmetric padding of icon edge + icon size + 6u on BOTH sides
   (the title stays centred); centre: the title box starts below the icon and still ends at --text-top. */
.icon-pos-alto-sinistra .card-title, .icon-pos-alto-destra .card-title {
  left: calc((var(--icon-edge) + var(--icon-size) + 6) * var(--u)); right: calc((var(--icon-edge) + var(--icon-size) + 6) * var(--u));
}
.icon-pos-alto-centro .card-title {
  top: calc((var(--icon-top) + var(--icon-size) + 6) * var(--u));
  height: calc(var(--card-h) * var(--text-top) - (var(--icon-top) + var(--icon-size) + 6) * var(--u));
}
/* ... and the category icon (accent circle) bottom-right by default; icon-pos-<alto|basso>-<sinistra|centro|destra> moves it.
   .icon-box = anything placed like the icon (the icon itself, the preview's dotted icon box) */
.card .icon-box {
  position: absolute; z-index: 1; width: calc(var(--icon-size) * var(--u)); height: calc(var(--icon-size) * var(--u));
  font-size: calc(var(--icon-size) * var(--u) * 0.5);
  right: calc(var(--icon-edge) * var(--u)); bottom: calc(var(--icon-bottom) * var(--u));
}
.icon-pos-alto-sinistra .icon-box, .icon-pos-alto-centro .icon-box, .icon-pos-alto-destra .icon-box { top: calc(var(--icon-top) * var(--u)); bottom: auto; }
.icon-pos-alto-sinistra .icon-box, .icon-pos-basso-sinistra .icon-box { left: calc(var(--icon-edge) * var(--u)); right: auto; }
.icon-pos-alto-centro .icon-box, .icon-pos-basso-centro .icon-box { left: 50%; right: auto; transform: translateX(-50%); }
/* text area contents, in order: [media] [prompt] [Hilfe options] */
.card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.card-body.fit-scroll { overflow-y: auto; }   /* last resort of fitCard(): text is never clipped, the area scrolls */
/* cue that more is below: a shadow over the bottom edge, shown (.more-below, set by app.js) until scrolled to the end */
.card-body.fit-scroll::after {
  content: ""; flex: none; position: sticky; bottom: 0; height: 24px; margin-top: -24px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.card-body.fit-scroll.more-below::after { opacity: 1; }
.card-prompt {
  flex: 1 0 auto; min-width: 0; min-height: calc(2 * 1.2 * 14px);   /* 2 lines at the minimum font size (14px) */
  display: flex; flex-direction: column; overflow: hidden; overflow-wrap: normal;
  font-family: var(--card-font, var(--font-fallback));
  color: var(--card-color, var(--ink));
  text-align: var(--card-align, center);
  font-size: var(--card-fs, 28px); line-height: 1.2;
}
.fit-break .card-prompt { overflow-wrap: anywhere; hyphens: auto; -webkit-hyphens: auto; }   /* fitCard(): a word is wider than the line even at the minimum size */
.card-text { margin: auto 0; }   /* auto margins: vertically centred, overflow only goes downwards */
.card-image { padding: 0; background-color: var(--card-cream); }
.card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* pills: bottom 6px; sketch: [aiuto] bottom-left, [soluzione] bottom-right. The icon (ours and the templates') sits at
   ~78-88% of the height: its bottom edge is 128u above the card bottom, the pills' top edge 50px, so on cards at least
   ~410px high the pills are below the icon whatever its position. On shorter cards (container query on .card-wrap,
   threshold 430px height; width 307px = height 430 via the 5:7 ratio) the icon's height range reaches the pills row, so
   the pills use the free side(s) of an icon at the bottom (icon-pos-basso-*, set by app.js; a template without
   icona_posizione has no class and keeps the old rule: both pills left, clear of the template's bottom-right icon).
   icon-pos-alto-* never touches the pills. If even that is too narrow (big icon, tiny card) the pills shrink to their
   minimum width and the label is cut with an ellipsis rather than overlapping the icon. */
.card-actions {
  position: absolute; left: 10px; right: 10px; bottom: 6px; display: flex; gap: 6px; pointer-events: none;
}
.card-actions .btn-soluzione { margin-left: auto; }
@container (max-height: 430px) or (max-width: 307px) {
  .card-actions .btn-soluzione { margin-left: 0; }
  .card-actions .card-btn { flex: 0 1 auto; min-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* template without icona_posizione / full card image: the baked-in icon sits bottom-right (74-90% of the width), the pills
     (two, and [nascondi] is wider than [aiuto]) stay left of it and shrink with an ellipsis if needed */
  .card:not([class*="icon-pos-"]) .card-actions { right: 27%; }
  /* basso-destra: pills left of the icon */
  .icon-pos-basso-destra .card-actions { right: calc((var(--icon-edge) + var(--icon-size)) * var(--u) + var(--icon-gap)); }
  /* basso-sinistra: pills right of the icon, pushed to the right edge */
  .icon-pos-basso-sinistra .card-actions { left: calc((var(--icon-edge) + var(--icon-size)) * var(--u) + var(--icon-gap)); justify-content: flex-end; }
  /* basso-centro: one pill on each side of the icon, each at most half the free width */
  .icon-pos-basso-centro .card-actions { justify-content: space-between; }
  .icon-pos-basso-centro .card-actions .card-btn { max-width: calc(50% - var(--icon-size) * var(--u) / 2 - var(--icon-gap)); }
}
/* very small cards (landscape phones, card < 360px high): both pills must fit beside the icon, so they get tighter */
@container (max-height: 360px) or (max-width: 257px) {
  .card-actions { gap: 4px; }
  .card-actions .card-btn { font-size: 13px; padding: 6px 7px; }
}
.card-btn {
  pointer-events: auto; font: inherit; font-size: var(--card-btn-size); font-weight: 700; padding: 6px 10px; min-height: 44px;
  background: var(--card-btn-bg); color: var(--card-btn-color); border: var(--card-btn-border);
  border-radius: var(--card-btn-radius); cursor: pointer;
}
/* Hilfe: the 3 option buttons */
.card-opts { flex: none; display: flex; flex-direction: column; gap: 4px; }
.card-opt {
  font: inherit; font-size: var(--opt-fs, var(--card-btn-size)); line-height: 1.15; padding: 3px 9px; min-height: 44px; text-align: left;
  overflow-wrap: anywhere; color: var(--card-btn-color); background: var(--card-btn-bg);
  border: var(--card-btn-border); border-radius: 12px; cursor: pointer;
}
.card-opt:disabled { cursor: default; color: var(--card-btn-color); }
.card-opt.right { background: var(--card-right-bg); border-color: var(--card-right-border); }
.card-opt.wrong { background: var(--card-wrong-bg); border-color: var(--card-wrong-border); }
.card-opt.dim { opacity: 0.6; }
.card-image .card-opts { position: absolute; left: 10px; right: 10px; bottom: calc(6px + 44px + 8px); }   /* above the pills */
/* grid fades in after [chiudi] */
.tiles.fade-in { animation: card-in 0.25s ease-out; }
/* END CARD STYLE */

/* ---- Preview (index.html?anteprima): cards side by side at a fixed height, with caption ---- */
body.screen-anteprima #app { max-width: 1500px; }
body.screen-anteprima .topbar { justify-content: space-between; align-items: center; gap: 12px; }
.pv-back {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; font-size: 16px; font-weight: 700;
  color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px; text-decoration: none;
}
.pv-title { margin: 4px 0 12px; font-size: 24px; overflow-wrap: anywhere; }
.pv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 16px; }
.pv-sizes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pv-label { font-weight: 700; }
.pv-btn {
  font: inherit; font-size: 15px; min-height: 44px; padding: 6px 14px; cursor: pointer;
  color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 999px;
}
.pv-btn[aria-pressed="true"] { color: #fff; background: var(--ink); }
.pv-btn:focus-visible, .pv-back:focus-visible { box-shadow: 0 0 0 2px #fff; }
/* one column on a phone, as many as fit on a desktop; a card wider than the column scrolls inside its own cell, never the page */
.pv-grid {
  display: grid; align-items: start; gap: 28px 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--card-h-fixed) * 5 / 7 + 24px)), 1fr));
}
.pv-item { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-stage { display: flex; max-width: 100%; overflow-x: auto; padding: 8px 12px 14px; }
.pv-stage .card-wrap { flex: none; margin: 0 auto; height: var(--card-h-fixed); width: calc(var(--card-h-fixed) * 5 / 7); }   /* the size container of the card (pill container queries) */
.pv-cap { width: 100%; max-width: 440px; font-size: 14px; }
.pv-name { margin: 0 0 6px; font-size: 16px; text-align: center; overflow-wrap: anywhere; }
.pv-info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.pv-info dt { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; color: #555; }
.pv-info dd { margin: 0; overflow-wrap: anywhere; }
/* [anteprima_area]: dashed = text area, dotted = app icon box */
.pv-overlay { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pv-area {
  position: absolute; left: calc(var(--frame-w) + var(--card-pad)); right: calc(var(--frame-w) + var(--card-pad));
  top: calc(var(--card-h) * var(--text-top)); bottom: calc(var(--card-h) * var(--text-bottom));
  outline: 2px dashed #d0021b; outline-offset: -1px; background: rgba(208, 2, 27, 0.05);
}
.pv-icon-box { outline: 2px dotted #0057d8; outline-offset: -1px; background: rgba(0, 87, 216, 0.08); }

/* ---- Card screen: locked to the viewport; order = topbar, topfield, card, timer slot, bottom bar ---- */
body.screen-carta { height: 100vh; height: 100dvh; }
body.screen-carta .topfield { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Small screens: compact grid ---- */
@media (max-height: 740px) {
  #app { padding-bottom: 12px; }
  .topfield { padding: 8px 12px; font-size: 17px; }
  .scegli { margin: 8px 0 6px; font-size: 18px; }
  .pair.bottom { margin-top: 8px; }
  .pair.bottom > .btn { min-height: 44px; font-size: 16px; padding-top: 6px; padding-bottom: 6px; }
  .tiles { gap: 8px; }
  .tile { flex-direction: row; justify-content: flex-start; gap: 6px; min-height: 60px; padding: 6px; border-radius: 14px; }
  .tile-name { text-align: left; font-size: 12px; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }   /* long words break as a last resort, never clip */
  .tile .circle { width: 34px; height: 34px; font-size: 17px; border-width: 2px; }
}
/* tall screens: big tiles, bigger icon circle */
@media (min-height: 741px) {
  .tile .circle { width: 52px; height: 52px; font-size: 26px; }
}

/* ---- Card features (timer, media) ---- */
.card-below { margin-top: 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.card-timer {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 12px; row-gap: 4px;
  width: 100%; max-width: 420px; padding: 8px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 16px;
}
.timer-display { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.btn-timer {
  font: inherit; font-size: 16px; font-weight: 700; min-height: 44px; padding: 6px 14px; min-width: 0;
  background: var(--btn-green); color: #fff; border: 0; border-radius: 999px; cursor: pointer; overflow-wrap: anywhere;
}
.timer-msg { grid-column: 1 / -1; font-weight: 800; font-size: 20px; text-align: center; }
.timer-msg:empty { display: none; }
.card-timer.timeup { background: var(--red); border-color: #8f1b24; color: #fff; animation: timeup-pulse 0.5s ease-in-out 6; }
@keyframes timeup-pulse { 50% { transform: scale(1.05); } }
.card-media { flex: 0 1 auto; align-self: center; max-width: 100%; }
.card-media-img { min-height: 40px; max-height: calc(var(--card-h) * 0.33); object-fit: contain; border-radius: 10px; }   /* shrinks first */
.card-media-audio { flex: none; width: 100%; height: 40px; }
.card-media-missing {
  padding: 6px 10px; font-size: 13px; color: #6b5d33; background: rgba(0, 0, 0, 0.06);
  border: 1px dashed #a09060; border-radius: 10px; text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .card-flip, .card-flip.card-new { transition: none; animation: none; }
  .tiles.fade-in { animation: none; }
  .card-timer.timeup { animation: none; }
}
@media (max-width: 340px) {
  .tile { gap: 4px; padding: 5px; }
  .tile .circle { width: 28px; height: 28px; font-size: 14px; }
  .tile-name { font-size: 13px; }
}

/* ---- Landscape phones: card on the left (full height), controls stacked and centred on the right; 4 tile columns ---- */
@media (orientation: landscape) and (max-height: 520px) {
  body.screen-carta #app, body.screen-gioco #app { max-width: 900px; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.screen-carta #app {
    display: grid; column-gap: 16px; row-gap: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto auto auto 1fr;
  }
  body.screen-carta #app > * { grid-column: 2; width: 100%; max-width: 360px; justify-self: center; }
  body.screen-carta .topbar { grid-row: 1; }
  body.screen-carta .topfield { grid-row: 3; }
  body.screen-carta .card-below { grid-row: 4; }
  body.screen-carta .pair.bottom { grid-row: 5; }
  body.screen-carta #app > .card-wrap { grid-column: 1; grid-row: 1 / span 6; max-width: none; justify-self: stretch; margin-top: 0; }
}

/* ---- Keyboard focus: dark ring outside + white ring inside it (visible on dark buttons / the dark backdrop) ---- */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.btn:focus-visible, .tile:focus-visible, .card-btn:focus-visible, .card-opt:focus-visible, .btn-timer:focus-visible,
.topfield-btn:focus-visible, .name-input:focus-visible, .banner-close:focus-visible { box-shadow: 0 0 0 2px #fff; }
.btn.marked:focus-visible { box-shadow: 0 0 0 3px #fff inset, 0 0 0 2px #fff; }
/* #lang clips (overflow: hidden): its buttons get an inset ring */
.lang-btn:focus-visible { outline-offset: -5px; box-shadow: none; }
.lang-btn.active:focus-visible { outline-color: #fff; }
#banner summary:focus-visible { outline-offset: 0; }
.card-back:focus-visible { outline-offset: -8px; }
/* elements only focused by script (headings, top field, card front) show no ring */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Hilfe: result glyphs */
.card-opt .glyph { display: inline-block; margin-right: 0.4em; font-weight: 800; }
.card-opt[aria-disabled="true"] { cursor: default; }

/* Edit players screen ('modifica'): name | level | [rimuovi] per row, then add / save+cancel / new game */
.prow.edit { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding-bottom: 10px; border-bottom: 2px solid #ddd; }   /* name | [rimuovi], level below */
.prow.edit .level-field { grid-column: 1 / -1; grid-row: 2; padding: 8px 12px; font-size: 16px; border-radius: 16px; min-height: 44px; }
.btn-remove { width: auto; font-size: 14px; padding: 8px 12px; background: #fff; color: var(--ink); border-color: var(--red); border-radius: 16px; }
.btn-add { margin-top: 14px; }
.edit-actions { margin-top: 18px; }
.btn-new { margin-top: 28px; }