/* Scena «piazzale»: stato predefinito = stato finale (senza JS o con reduced motion).
   Con JS la radice riceve .is-anim e le classi st-* guidano la storia. */
.sc-piazzale { --pz-red: #b8412f; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; font-family: var(--sans); color: var(--navy); text-align: left; line-height: 1.3; }
.sc-piazzale .pz-in { transition: opacity .7s ease; }
.sc-piazzale.st-out .pz-in { opacity: 0; }

.sc-piazzale .pz-top { display: flex; justify-content: space-between; align-items: baseline; margin: 0 2px 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.sc-piazzale .pz-ex { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }

.sc-piazzale .pz-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.sc-piazzale .k { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.sc-piazzale .k b { font-size: 30px; font-weight: 700; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; letter-spacing: -.02em; display: inline-block; transform-origin: left center; transition: transform .35s ease; }
.sc-piazzale .k b.bump { transform: scale(1.22); }
.sc-piazzale .k span { font-size: 13px; font-weight: 500; color: var(--muted); }

.sc-piazzale .pz-body { display: grid; grid-template-columns: minmax(0, 1fr) 232px; gap: 14px; align-items: stretch; }
.sc-piazzale .pz-map { min-width: 0; }
.sc-piazzale .pz-view { border-radius: 12px; overflow: hidden; background: var(--sand); border: 1px solid var(--line); }
.sc-piazzale .mp { display: block; width: 100%; height: auto; }

.sc-piazzale .sea { fill: var(--water); }
.sc-piazzale .wave { fill: none; stroke: var(--brass); stroke-opacity: .35; stroke-width: 1.5; stroke-linecap: round; }
.sc-piazzale .quay { fill: var(--brass); }
.sc-piazzale .lane { fill: #c9bfa6; opacity: .7; }
.sc-piazzale .slot rect { fill: none; stroke: var(--muted); stroke-opacity: .55; stroke-width: 1.5; stroke-dasharray: 6 5; }
.sc-piazzale .slot text { font-size: 11px; font-weight: 500; fill: var(--muted); font-variant-numeric: tabular-nums; }
.sc-piazzale .slot-e { transition: opacity .4s ease; }
.sc-piazzale .slot-e { opacity: 0; } /* stato finale: il posto è occupato */

.sc-piazzale .hull { fill: var(--navy); transition: fill .6s ease; }
.sc-piazzale .deck { fill: none; stroke: #f7f4ee; stroke-opacity: .28; stroke-width: 1.2; }
.sc-piazzale .nm { font-size: 12.5px; font-weight: 600; fill: #f7f4ee; }
.sc-piazzale .ring { fill: none; stroke: var(--brass); stroke-width: 3; opacity: 0; transition: opacity .4s ease; }
.sc-piazzale .b-blue .hull { fill: var(--pz-red); }
.sc-piazzale .b-blue .ring { opacity: 1; }

.sc-piazzale .tag { transition: opacity .5s ease; }
.sc-piazzale .tag line { stroke: var(--pz-red); stroke-width: 2; }
.sc-piazzale .tag rect { fill: var(--card); stroke: var(--pz-red); stroke-width: 1.5; }
.sc-piazzale .tag circle { fill: var(--pz-red); }
.sc-piazzale .tag text { font-size: 13px; font-weight: 600; fill: var(--navy); }

.sc-piazzale .pz-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 2px 0; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.sc-piazzale .pz-leg span { display: inline-flex; align-items: center; gap: 7px; }
.sc-piazzale .pz-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sc-piazzale .s-sosta { background: var(--navy); }
.sc-piazzale .s-varo { background: var(--pz-red); }
.sc-piazzale .s-libero { border: 1.5px dashed var(--muted); opacity: .8; }

.sc-piazzale .pz-card { position: relative; border: 1.5px dashed var(--line); border-radius: 14px; }
.sc-piazzale .pz-card-in { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 16px; height: calc(100% + 3px); margin: -1.5px; transition: opacity .6s ease, transform .6s ease; }
.sc-piazzale .pz-h strong { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.sc-piazzale .pz-h span { font-size: 14px; font-weight: 500; color: var(--muted); }
.sc-piazzale dl { margin: 14px 0 0; display: grid; gap: 12px; }
.sc-piazzale dl > div { border-top: 1px solid var(--line); padding-top: 10px; }
.sc-piazzale dt { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: 3px; }
.sc-piazzale dd { margin: 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sc-piazzale .pz-badge { font-style: normal; display: inline-block; background: var(--pz-red); color: #f7f4ee; font-size: 13px; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.sc-piazzale .pz-bar { display: block; height: 7px; border-radius: 999px; background: var(--line); margin: 8px 0 5px; overflow: hidden; }
.sc-piazzale .pz-bar i { display: block; height: 100%; width: 100%; background: var(--ok); border-radius: 999px; transform-origin: left; transform: scaleX(.7); transition: transform 1.2s ease .3s; }
.sc-piazzale small { font-size: 12.5px; font-weight: 500; color: var(--ok); }

.sc-piazzale .pz-vuoto { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px 22px; font-size: 14px; font-weight: 400; color: var(--muted); opacity: 0; pointer-events: none; transition: opacity .5s ease; }
.sc-piazzale.is-anim:not(.st-card) .pz-vuoto { opacity: .8; }

/* Storia animata: stati iniziali nascosti finché la classe st-* non scatta */
.sc-piazzale.is-anim:not(.st-enter) .b-ent { opacity: 0; }
.sc-piazzale.is-anim .b-ent { transition: opacity .5s ease; }
.sc-piazzale.is-anim.st-moving .b-ent .hull { fill: var(--pz-red); }
.sc-piazzale.is-anim:not(.st-posata) .slot-e { opacity: 1; }
.sc-piazzale.is-anim.st-posata .slot-e { opacity: 0; }
.sc-piazzale.is-anim:not(.st-varo) .b-blue .hull { fill: var(--navy); }
.sc-piazzale.is-anim:not(.st-sel) .b-blue .ring { opacity: 0; }
.sc-piazzale.is-anim:not(.st-varo) .tag { opacity: 0; }
.sc-piazzale.is-anim:not(.st-card) .pz-card-in { opacity: 0; transform: translateY(8px); }
.sc-piazzale.is-anim:not(.st-card) .pz-bar i { transform: scaleX(0); }

/* Telefono: si mostrano le prime 4 colonne (metà sinistra della mappa), scheda sotto */
@media (max-width: 720px) {
  .sc-piazzale .pz-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sc-piazzale { padding: 10px; border-radius: 14px; }
  .sc-piazzale .pz-kpi { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
  .sc-piazzale .k { padding: 8px 12px; }
  .sc-piazzale .k b { font-size: 26px; }
  .sc-piazzale .k span { font-size: 12.5px; }
  .sc-piazzale .pz-view { aspect-ratio: 372 / 424; }
  .sc-piazzale .mp { width: 204.3%; max-width: none; }
  .sc-piazzale .pz-card-in { padding: 14px; }
  .sc-piazzale dl { grid-template-columns: 1fr 1fr; }
  .sc-piazzale dl > div:last-child { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-piazzale * { transition: none !important; }
}