/* =========================================================================
   CONTA SU DI ME — tema «Il circo del funambolo»
   Notte (:root)          = gran serata: tendone indaco sotto le stelle,
                            luci d'oro, riflettori accesi sulla corda.
   Giorno (.theme-light)  = prove del mattino: piazza color crema, tenda
                            a righe rosse, cielo limpido.
   Motivi ricorrenti: festone di bandierine sopra al logo, mantovana ad
   archetti (tendone) in testa alle card, lampadine dorate agli angoli,
   luce di ribalta accanto ai titoli, pali con pennoni agli estremi della
   corda, funambolo con bilanciere come segnalino.
   ========================================================================= */
:root{
  --bg:#1b1133;
  --bg-soft:#271a47;
  --bg-card:#2d1f52;
  --line:#4c3a7c;
  --text:#f6eed9;
  --muted:#b4a5d6;
  --accent:#f0b93e;
  --accent-2:#c3891b;
  --glow:rgba(240,185,62,.30);
  --good:#63c274;
  --bad:#e05e5e;
  --seal:#f0b93e;
  --seal-2:#8a5d0d;
  --awn-a:#b03a45;
  --awn-b:#efe3c4;
  --rope:#e8c98a;
  --pole:#6b58a5;
  --band-v:#58c06b;
  --band-g:#e9c33f;
  --band-a:#e78a3c;
  --radius:18px;
  --shadow:0 10px 32px rgba(0,0,0,.5);
  --page-img:
    radial-gradient(1.4px 1.4px at 22% 24%, rgba(255,246,214,.5) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 68% 12%, rgba(255,246,214,.4) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 85% 55%, rgba(255,246,214,.3) 50%, transparent 51%),
    linear-gradient(115deg, transparent 42%, rgba(240,185,62,.06) 50%, transparent 58%),
    linear-gradient(245deg, transparent 42%, rgba(240,185,62,.05) 50%, transparent 58%),
    linear-gradient(180deg,#241745 0%,#1b1133 55%,#140b26 100%);
  --page-size: 260px 260px, 320px 320px, 380px 380px, 100% 100%, 100% 100%, 100% 100%;
  --font-display:'Alfa Slab One',Georgia,serif;
  --font-body:'Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif;
}
body.theme-light{
  --bg:#f2e5c9;
  --bg-soft:#faf2dd;
  --bg-card:#fdf8e9;
  --line:#dcc9a0;
  --text:#463125;
  --muted:#94805f;
  --accent:#bb3d33;
  --accent-2:#8c2a22;
  --glow:rgba(187,61,51,.18);
  --good:#4d8f4f;
  --bad:#b03434;
  --seal:#bb3d33;
  --seal-2:#7c1f18;
  --awn-a:#bb3d33;
  --awn-b:#fdf6e2;
  --rope:#a8815a;
  --pole:#b08a4f;
  --band-v:#3f8f4d;
  --band-g:#c2951a;
  --band-a:#c86a1f;
  --shadow:0 10px 26px rgba(120,90,45,.22);
  --page-img:
    repeating-linear-gradient(90deg, rgba(187,61,51,.05) 0 70px, transparent 70px 140px),
    radial-gradient(60% 45% at 18% 8%, rgba(140,100,45,.10), transparent 60%),
    linear-gradient(180deg,#f6ecd4 0%,#f0e2c2 60%,#e9d7ae 100%);
  --page-size: 100% 100%, 100% 100%, 100% 100%;
}
*{box-sizing:border-box;margin:0;padding:0}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background-color:var(--bg);
  background-image:var(--page-img);background-size:var(--page-size);background-attachment:fixed;
  color:var(--text);-webkit-font-smoothing:antialiased;
  min-height:100%;display:flex;overflow-x:hidden;transition:background-color .3s,color .3s;
}
.theme-toggle{position:fixed;top:14px;right:14px;z-index:50;width:44px;height:44px;
  border-radius:50%;background:var(--bg-card);border:1px solid var(--line);color:var(--text);
  font-size:19px;cursor:pointer;box-shadow:var(--shadow);transition:transform .15s,background .3s;
  display:flex;align-items:center;justify-content:center}
.theme-toggle:hover{transform:scale(1.08)}
.theme-toggle:active{transform:scale(.96)}
#app{width:100%;max-width:860px;margin:0 auto;padding:24px 18px 40px;display:flex;flex-direction:column}

/* ---------- schermate ---------- */
.screen{display:none;animation:fade .35s ease}
.screen.active{display:flex;flex-direction:column;flex:1}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* ---------- hero: corda + funambolo ---------- */
.hero{text-align:center;padding:8px 0 18px}
.logo-rope{width:220px;height:auto;display:inline-block}
.lg-bunt-line{fill:none;stroke:var(--line);stroke-width:2}
.lg-b1{fill:var(--awn-a)}
.lg-b2{fill:var(--accent)}
.lg-pole{stroke:var(--pole);stroke-width:5;stroke-linecap:round}
.lg-flag{fill:var(--accent)}
.lg-rope{fill:none;stroke:var(--rope);stroke-width:3;stroke-linecap:round}
.lg-ground{stroke:var(--pole);stroke-width:2.5;stroke-linecap:round;opacity:.55}
.lg-star{fill:var(--accent);font-size:13px;animation:twinkle 2.8s ease-in-out infinite}
.lg-star.s2{animation-delay:-1.1s;font-size:10px}
.lg-star.s3{animation-delay:-2s;font-size:9px}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}
.lg-walker{animation:sway 3.4s ease-in-out infinite;transform-origin:105px 60px}
.lg-walker .lg-bar{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.lg-walker .lg-head{fill:var(--accent)}
.lg-walker .lg-limb{stroke:var(--text);stroke-width:2.6;stroke-linecap:round}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
body:not(.theme-light) .logo-rope{filter:drop-shadow(0 0 24px rgba(240,185,62,.22))}
.brand{font-family:var(--font-display);font-size:34px;font-weight:400;letter-spacing:1px;
  margin-top:10px;color:var(--accent)}
body:not(.theme-light) .brand{text-shadow:0 0 26px var(--glow)}
.tagline{color:var(--muted);margin-top:5px;font-size:15px}

/* ---------- card = pannello del tendone con mantovana e lampadine ---------- */
.card{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);position:relative;margin-bottom:18px;
  background-image:
    radial-gradient(circle at 13px 13px,var(--accent) 2.6px,transparent 3.8px),
    radial-gradient(circle at calc(100% - 13px) 13px,var(--accent) 2.6px,transparent 3.8px),
    radial-gradient(circle at 13px calc(100% - 13px),var(--accent) 2.6px,transparent 3.8px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),var(--accent) 2.6px,transparent 3.8px)}
/* mantovana: banda a righe + archetti alternati */
.card::before{content:"";display:block;height:21px;margin:0 10px 16px;
  background-image:
    repeating-linear-gradient(90deg,var(--awn-a) 0 22px,var(--awn-b) 22px 44px),
    radial-gradient(circle 11px at 11px 9px,var(--awn-a) 10px,transparent 11px),
    radial-gradient(circle 11px at 11px 9px,var(--awn-b) 10px,transparent 11px);
  background-size:auto 9px, 44px 12px, 44px 12px;
  background-position:0 0, 0 9px, 22px 9px;
  background-repeat:repeat-x}
.card h2{font-family:var(--font-display);font-size:19px;font-weight:400;letter-spacing:.5px;
  margin-bottom:18px;color:var(--text);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* luce di ribalta accanto ai titoli */
.seal{width:15px;height:15px;border-radius:50%;flex:none;position:relative;
  background:radial-gradient(circle at 38% 32%,#fff2c0 0%,var(--seal) 45%,var(--seal-2) 100%);
  box-shadow:0 0 10px var(--glow),0 0 3px var(--glow)}
.seal::after{content:"";position:absolute;left:5px;bottom:-4px;width:5px;height:5px;
  background:var(--seal-2);border-radius:0 0 3px 3px}
.field{margin-bottom:18px;display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:700}
.muted{color:var(--muted);font-weight:400}
.dot-v{color:var(--band-v)}.dot-g{color:var(--band-g)}.dot-a{color:var(--band-a)}

/* tooltip ⓘ */
.info{display:inline-flex;align-items:center;justify-content:center;cursor:help;color:var(--muted);
  font-style:normal;position:relative;margin-left:4px}
.info::after{content:attr(data-tip);position:absolute;bottom:130%;left:50%;transform:translateX(-50%);
  width:min(300px,72vw);background:var(--bg-soft);border:1px solid var(--line);color:var(--text);
  font-size:12.5px;font-weight:400;line-height:1.5;padding:10px 12px;border-radius:10px;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .15s;z-index:30}
.info:hover::after,.info:focus::after{opacity:1}

input[type=text]{background:var(--bg-soft);border:1px solid var(--line);color:var(--text);
  padding:12px 14px;border-radius:10px;font-size:15px;outline:none;transition:border .15s}
input[type=text]:focus{border-color:var(--accent)}
input::placeholder{color:var(--muted)}

/* ---------- stepper ---------- */
.stepper{display:flex;align-items:center;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;max-width:240px}
.stepper button{background:transparent;color:var(--accent);border:none;font-size:22px;
  width:46px;height:46px;cursor:pointer;transition:background .15s;flex:none}
.stepper button:hover{background:var(--glow)}
.stepper input{background:transparent;border:none;color:var(--text);text-align:center;
  font-size:18px;font-weight:700;width:100%;outline:none;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- segmented ---------- */
.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.segmented button{background:transparent;border:none;color:var(--muted);padding:12px 8px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s}
.segmented button small{display:block;font-size:11px;font-weight:400;opacity:.75;margin-top:1px}
.segmented button + button{border-left:1px solid var(--line)}
.segmented button.active{background:linear-gradient(180deg,var(--glow),transparent);
  color:var(--text);box-shadow:0 0 0 1px var(--accent) inset}

/* ---------- tappe della tournée ---------- */
.tappa-list{list-style:none;display:flex;flex-direction:column;gap:8px;padding-left:6px}
.tappa{display:flex;align-items:center;gap:12px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;cursor:pointer;
  color:var(--text);font-family:inherit;text-align:left;width:100%;transition:all .15s;position:relative}
.tappa:hover{border-color:var(--accent)}
.tappa.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;
  background:linear-gradient(180deg,var(--glow) -80%,var(--bg-soft) 70%)}
.tappa-icon{font-size:22px;flex:none;width:30px;text-align:center}
.tappa-text{flex:1;display:flex;flex-direction:column;gap:1px}
.tappa-name{font-weight:700;font-size:14.5px}
.tappa-desc{font-size:12.5px;color:var(--muted)}
.tappa-best{flex:none;font-size:12px;font-weight:700;color:var(--accent);
  background:var(--bg-card);border:1px solid var(--line);border-radius:20px;padding:4px 9px}

/* ---------- bottoni ---------- */
.btn-primary{width:100%;margin-top:8px;background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#2a1c05;border:none;padding:16px;border-radius:14px;font-size:16px;font-weight:400;
  font-family:var(--font-display);letter-spacing:1px;
  cursor:pointer;transition:transform .1s,box-shadow .2s;text-align:center;display:block;
  box-shadow:0 5px 0 rgba(0,0,0,.28),0 10px 22px var(--glow);text-decoration:none}
body.theme-light .btn-primary{color:#fff}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.28)}
.btn-primary:disabled{filter:grayscale(.7);opacity:.5;cursor:not-allowed;transform:none}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--text);
  padding:10px 16px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;transition:all .15s}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-ghost.xs{padding:5px 10px;font-size:13px}
.btn-ghost.wide{width:100%;margin-top:10px}
.btn-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.btn-row .btn-primary{flex:2;margin-top:0;min-width:150px}
.btn-row .btn-ghost{flex:1;min-width:110px}
.start-row{display:flex;gap:10px;align-items:stretch;margin-top:8px}
.start-row .btn-primary{margin-top:0;flex:1}
.start-row .btn-ghost{flex:none}
.btn-primary.sm{width:auto;padding:10px 16px;font-size:14px;margin-top:0;letter-spacing:.5px}

/* ---------- come funziona / footer ---------- */
.how{margin-top:20px;border-top:1px dashed var(--line);padding-top:14px}
.how summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--muted)}
.how p,.how li{font-size:14px;line-height:1.6;margin-top:10px}
.foot{text-align:center;color:var(--muted);font-size:12.5px;margin-top:8px}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--accent)}

/* ---------- briefing ---------- */
.briefing{max-width:620px;width:100%;margin:10px auto 18px}
.mission-tag{font-size:11.5px;background:var(--accent);color:#2a1c05;border-radius:6px;
  padding:3px 9px;letter-spacing:1.5px;flex:none;font-family:var(--font-body);
  text-transform:uppercase;font-weight:700}
body.theme-light .mission-tag{color:#fff}
.pre-icon{font-size:44px;text-align:center;margin:2px 0 10px}
.briefing-lead{font-size:15.5px;line-height:1.65}
.briefing-note{margin-top:12px;font-size:14px;background:var(--bg-soft);border-left:3px solid var(--accent);
  padding:10px 12px;border-radius:0 10px 10px 0;line-height:1.55}
.example-banner{display:flex;flex-direction:column;align-items:center;gap:10px;margin:18px auto 4px;
  background:var(--bg-soft);border:1px dashed var(--accent);border-radius:14px;
  padding:14px 26px;width:min(380px,100%)}
.eb-label{font-family:var(--font-display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.mini-line{display:flex;align-items:center;gap:10px;width:100%}
.ml-lab{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.ml-track{flex:1;height:3px;background:var(--rope);border-radius:2px;position:relative}
.ml-track::before,.ml-track::after{content:"";position:absolute;top:-6px;width:3px;height:15px;
  background:var(--pole);border-radius:2px}
.ml-track::before{left:0}
.ml-track::after{right:0}
.ml-dot{position:absolute;left:37%;top:-5px;width:13px;height:13px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--glow)}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0 6px}
.specs > div{background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.specs dt{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);
  font-family:var(--font-display);font-weight:400}
.specs dd{font-size:15px;font-weight:700;margin-top:3px}

/* ---------- gioco: la pista ---------- */
#screen-game.active{padding-top:6px}
.console{display:flex;flex-direction:column;gap:12px;flex:1}
.console-top{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;background:var(--bg-card);
  border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow)}
.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:6px 14px}
.chip-label{font-family:var(--font-display);font-size:9px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);font-weight:400}
.chip-value{font-size:20px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.chip-value.sm{font-size:13.5px;letter-spacing:.3px}
.tappa-chip{flex:1;min-width:110px}
.dots-chip{flex:none}
.chip-dots{font-size:15px;letter-spacing:3px;line-height:1.1}
.chip-dots .dt{color:var(--line)}
.chip-dots .dt.v{color:var(--band-v)}
.chip-dots .dt.g{color:var(--band-g)}
.chip-dots .dt.a{color:var(--band-a)}
.chip-dots .dt.cur{color:var(--text);animation:ledblink 1.6s ease-in-out infinite}
@keyframes ledblink{0%,70%,100%{opacity:1}85%{opacity:.25}}
#btn-abort{align-self:center;color:var(--muted)}
#btn-abort:hover{color:var(--bad);border-color:var(--bad)}

.stage{display:flex;flex-direction:column;gap:14px;background:var(--bg-card);
  border:1px solid var(--line);border-radius:14px;padding:18px 16px 16px;box-shadow:var(--shadow);
  flex:1;position:relative}

/* insegna del numero da piazzare */
.target-banner{display:flex;flex-direction:column;align-items:center;gap:4px;align-self:center;
  background:radial-gradient(circle at 50% -40%,var(--glow),transparent 70%),var(--bg-soft);
  border:2px solid var(--accent);border-radius:16px;padding:10px 34px 12px;
  box-shadow:0 0 22px var(--glow)}
.tb-label{font-family:var(--font-display);font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.tb-num{font-size:46px;font-weight:700;line-height:1;color:var(--accent);
  font-variant-numeric:tabular-nums}
body:not(.theme-light) .tb-num{text-shadow:0 0 18px var(--glow)}
.tb-sub{font-size:13px;color:var(--muted);font-weight:700}

/* applausometro (timer morbido, solo sfida) */
.applause{display:flex;flex-direction:column;gap:4px;align-items:center}
.ap-label{font-family:var(--font-display);font-size:9.5px;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.ap-track{width:min(420px,92%);height:12px;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:8px;overflow:hidden}
.ap-bar{height:100%;width:100%;border-radius:8px;
  background:repeating-linear-gradient(90deg,var(--accent) 0 10px,var(--accent-2) 10px 20px)}
.ap-msg{font-size:12px;color:var(--muted);font-style:italic}

/* la corda */
.ropebox{position:relative;height:170px;margin-top:4px}
.pole{position:absolute;bottom:18px;width:10px;height:118px;border-radius:5px;
  background:linear-gradient(90deg,var(--pole),var(--line));z-index:1}
.pole-l{left:12px}
.pole-r{right:12px}
.pole-flag{position:absolute;top:-8px;left:9px;width:0;height:0;
  border-top:7px solid transparent;border-bottom:7px solid transparent;
  border-left:16px solid var(--accent)}
.pole-r .pole-flag{left:auto;right:9px;border-left:none;border-right:16px solid var(--accent)}
.track{position:absolute;left:34px;right:34px;top:0;bottom:0;cursor:pointer;touch-action:none;
  -webkit-tap-highlight-color:transparent;outline:none}
.track:focus-visible{outline:2px dashed var(--accent);outline-offset:4px;border-radius:10px}
.rope{position:absolute;left:0;right:0;bottom:48px;height:4px;background:var(--rope);
  border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.3)}
body:not(.theme-light) .rope{box-shadow:0 0 12px rgba(240,185,62,.18),0 2px 4px rgba(0,0,0,.4)}
.arc-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
.arc-svg path{fill:none;stroke-width:4;stroke-linecap:round}
.arc-svg .arc-v{stroke:var(--band-v)}
.arc-svg .arc-g{stroke:var(--band-g)}
.arc-svg .arc-a{stroke:var(--band-a)}
.arc-svg .arc-hop{stroke:var(--accent);stroke-width:3;stroke-dasharray:6 8;opacity:.8}
.rope-lab{position:absolute;bottom:-6px;font-size:21px;font-weight:700;
  font-variant-numeric:tabular-nums;z-index:2}
.lab-min{left:12px}
.lab-max{right:12px}

/* il funambolo (segnalino) */
.walker{position:absolute;bottom:48px;left:50%;width:64px;height:70px;margin-left:-32px;z-index:4;
  pointer-events:none}
.walker svg{width:100%;height:100%;display:block;animation:sway 3s ease-in-out infinite;
  transform-origin:50% 100%}
.walker .w-bar{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.walker .w-head{fill:var(--accent)}
.walker .w-limb{stroke:var(--text);stroke-width:3.4;stroke-linecap:round}
.walker.waiting{left:0!important;opacity:.45}
.walker.waiting svg{animation:bounce-wait 1.6s ease-in-out infinite}
@keyframes bounce-wait{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.walker.placed{transition:none}
.walker.walk{transition:left .95s cubic-bezier(.45,.05,.35,1)}
.walker.walk svg{animation:wobble .5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}

/* tacche sulla corda (sempre visibili in semplificata, numerate al verdetto) */
.ticks{position:absolute;inset:0;pointer-events:none;z-index:2}
.tk{position:absolute;bottom:38px;width:2px;height:10px;background:var(--rope);
  opacity:.75;transform:translateX(-50%)}
.tk.maj{bottom:34px;height:14px;opacity:.95}
.tk b{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:1px;
  font-size:10.5px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;
  background:var(--bg-card);padding:0 2px;border-radius:3px;line-height:1.3}

/* spilla di mira (esercizio «Il gran salto») */
.guess-pin{position:absolute;bottom:43px;width:15px;height:15px;border-radius:50%;
  border:3px dashed var(--accent);background:var(--glow);transform:translateX(-50%);z-index:4;
  pointer-events:none}

/* stella sul punto giusto + etichette */
.goal-star{position:absolute;bottom:56px;left:50%;transform:translateX(-50%) scale(0);
  font-size:26px;z-index:3;transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.goal-star.show{transform:translateX(-50%) scale(1)}
.tick{position:absolute;transform:translateX(-50%);font-size:15px;font-weight:700;
  font-variant-numeric:tabular-nums;z-index:5;white-space:nowrap;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.tick::before{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:2px;height:8px;background:currentColor;opacity:.6}
.tick-target{bottom:24px;color:var(--accent);border-color:var(--accent);z-index:6}
.tick-target::before{top:-10px}
.tick-start{bottom:24px;color:var(--text);border-color:var(--pole);z-index:5}
.tick-start::before{top:-10px}
.tick-guess{bottom:0;color:var(--muted);font-size:13px}
.tick-guess::before{display:none}
.field-hint{text-align:center;font-size:12.5px;color:var(--muted)}
.action-row{display:flex;justify-content:center}
.action-row .btn-primary{max-width:340px}

/* barra del verdetto */
.feedback-bar{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;display:flex;flex-direction:column;gap:8px;animation:fade .3s ease}
.feedback-bar.fb-v{border-color:var(--band-v)}
.feedback-bar.fb-g{border-color:var(--band-g)}
.feedback-bar.fb-a{border-color:var(--band-a)}
.fb-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fb-icon{font-size:20px;line-height:1}
.fb-v .fb-icon{color:var(--band-v)}
.fb-g .fb-icon{color:var(--band-g)}
.fb-a .fb-icon{color:var(--band-a)}
.fb-title{font-family:var(--font-display);font-size:17px;letter-spacing:.5px}
.fb-points{margin-left:auto;font-weight:700;color:var(--accent);font-size:15px}
.fb-detail{font-size:14.5px;line-height:1.55}
.feedback-bar .btn-primary{margin-top:2px}

/* ---------- esito della sessione ---------- */
.feed{max-width:640px;width:100%;margin:10px auto 18px}
.pae-ring{width:190px;height:190px;border-radius:50%;margin:6px auto 12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 50% 30%,var(--glow),transparent 70%),var(--bg-soft);
  border:4px solid var(--line)}
.pae-ring.b-v{border-color:var(--band-v)}
.pae-ring.b-g{border-color:var(--band-g)}
.pae-ring.b-a{border-color:var(--band-a)}
.pr-label{font-family:var(--font-display);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--muted);font-weight:400}
.pr-value{font-size:44px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.pae-ring.b-v .pr-value{color:var(--band-v)}
.pae-ring.b-g .pr-value{color:var(--band-g)}
.pae-ring.b-a .pr-value{color:var(--band-a)}
.pr-sub{font-size:10.5px;color:var(--muted);max-width:130px;text-align:center;line-height:1.3}
.dots-big{display:flex;gap:9px;justify-content:center;font-size:26px;margin:4px 0 6px;flex-wrap:wrap}
.dots-big .dt{color:var(--line)}
.dots-big .dt.v{color:var(--band-v)}
.dots-big .dt.g{color:var(--band-g)}
.dots-big .dt.a{color:var(--band-a)}
.flags-legend{text-align:center;font-size:12.5px;margin-bottom:12px}
.feed-text{font-size:15px;line-height:1.6;margin:10px 0 14px;text-align:center}
.detail-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.dchip{font-size:13px;background:var(--bg-soft);border:1px solid var(--line);border-radius:20px;
  padding:6px 12px}
.record-badge{text-align:center;font-weight:700;color:var(--accent);margin:8px 0 0;font-size:14.5px;
  animation:fade .4s ease}

/* ---------- registro ---------- */
#hist-summary{font-size:13.5px;margin-bottom:12px}
.hist-wrap{overflow-x:auto}
#hist-table{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
#hist-table th,#hist-table td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line)}
#hist-table th{font-family:var(--font-display);font-size:9.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);font-weight:400}
#btn-clear-history{margin-top:14px}

/* ---------- overlay modali ---------- */
.modal-overlay{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(12,7,26,.72);backdrop-filter:blur(3px);padding:16px}
body.theme-light .modal-overlay{background:rgba(95,70,35,.45)}
.modal-box{background:var(--bg-card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;
  gap:10px;width:min(430px,94vw);max-height:92vh;overflow-y:auto}
.modal-box h3{font-family:var(--font-display);font-size:18px;letter-spacing:.5px}

/* ---------- condivisione ---------- */
.share-box{text-align:left}
.share-box h3{text-align:center}
.share-sub{font-size:13px;line-height:1.5;text-align:center}
.share-link{display:flex;gap:8px}
.share-link input{flex:1;min-width:0;font-size:13px}
.share-opts{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.share-opt{flex:1;min-width:88px;text-align:center;background:var(--bg-soft);border:1px solid var(--line);
  border-radius:10px;padding:9px 6px;font-size:13.5px;font-weight:700;color:var(--text);text-decoration:none;
  cursor:pointer;font-family:inherit;transition:all .15s}
.share-opt:hover{border-color:var(--accent);color:var(--accent)}
.share-qr{display:flex;justify-content:center}
.share-qr img{width:150px;height:150px;border-radius:10px;background:#fff;padding:6px}
.qr-fallback{font-size:12.5px;color:var(--muted);padding:14px}

/* ---------- player & accesso ---------- */
.player-steps{margin:12px 0 4px 22px}
.player-steps li{margin-top:8px;line-height:1.6;font-size:15px}
.blocked-card{text-align:center;margin-top:40px}
.blocked-card .btn-primary{margin-top:16px}
body.player #btn-fs-menu{display:none}

/* ---------- report: solo in stampa ---------- */
#print-report{display:none}
@media print{
  body{display:block;background:#fff;color:#000}
  .theme-toggle,#app,.modal-overlay{display:none!important}
  #print-report{display:block;font-family:Georgia,'Times New Roman',serif;padding:24px}
  #print-report h1{font-size:24px;margin-bottom:4px}
  #print-report h2{font-size:16px;margin:18px 0 8px}
  .rep-sub{color:#444;margin-bottom:10px;font-size:13px}
  #print-report table{width:100%;border-collapse:collapse;font-size:12px}
  #print-report th,#print-report td{border:1px solid #999;padding:6px 7px;text-align:center}
  #print-report th{background:#eee}
  .rep-note{font-size:11.5px;color:#444;margin-top:12px;line-height:1.5}
  .rep-foot{font-size:11.5px;color:#444;margin-top:18px;text-align:center}
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  #app{padding:18px 10px 30px}
  .brand{font-size:26px}
  .logo-rope{width:180px}
  .segmented button{font-size:12.5px;padding:10px 4px}
  .tb-num{font-size:38px}
  .target-banner{padding:8px 24px 10px}
  .ropebox{height:150px}
  .walker{width:54px;height:60px;margin-left:-27px}
  .rope-lab{font-size:18px}
  .chip{padding:4px 10px}
  .chip-value{font-size:17px}
  .chip-dots{font-size:13px;letter-spacing:2px}
  .pae-ring{width:160px;height:160px}
  .pr-value{font-size:36px}
  .dots-big{font-size:21px}
  .modal-box{padding:20px 16px}
}