/* ═══ styles-app.css : composants générés par app.js (chargé après styles.css) ═══
   Thème clair YOA'S × affiche « 超惑星 ». Couleurs : uniquement les variables du contrat
   (--paper, --paper2, --paper3, --ink, --ink2, --line, --red, --violet, --mint).
   Fontes : --dot (Doto / DotGothic16) et --lat (Manrope) si la page les définit, sinon repli. */

/* ─────────── Puces de ville au-dessus de la liste des 公演 ─────────── */
.cpick{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.cchip{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;
  min-width:98px;padding:8px 15px 9px;margin:0;font:inherit;text-align:left;cursor:pointer;
  color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;
  box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s,background-color .15s;
  -webkit-tap-highlight-color:transparent}
.cchip b{font-size:13.5px;font-weight:700;line-height:1.3;letter-spacing:.04em}
.cchip span{font-family:var(--dot,"Doto","DotGothic16",monospace);font-size:12.5px;font-weight:700;
  line-height:1.2;letter-spacing:.04em;color:var(--red);white-space:nowrap}
.cchip:hover{background:var(--paper3)}
.cchip:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.cchip:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.cchip--on{background:var(--paper3);transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
/* petite pointe des étiquettes du fan club */
.cchip--on::after{content:"";position:absolute;left:18px;bottom:-7px;width:10px;height:10px;
  background:var(--paper3);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  transform:rotate(45deg)}
.cchip--out{opacity:.5}
.cchip--out span{color:var(--ink2)}

/* ─────────── Lignes de 公演 : compléments ─────────── */
.srow__tour em{display:inline-block;font-style:normal;margin-left:8px;padding:1px 9px;border-radius:99px;
  background:var(--red);color:var(--paper);font-size:10px;font-weight:700;letter-spacing:.06em;line-height:1.7;
  vertical-align:1px}
.srow__tog{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11.5px;color:var(--ink2);line-height:1.6}
.srow__tog::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--mint);
  box-shadow:0 0 0 1px var(--ink)}
.srow--few .srow__left{color:var(--red)}
.srow__go{display:inline-flex;align-items:center;gap:7px;margin-top:4px;padding:7px 14px 7px 15px;
  border-radius:10px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:700;line-height:1.4;
  letter-spacing:.04em;white-space:nowrap;box-shadow:0 3px 0 var(--red);transition:transform .12s,box-shadow .12s}
.srow__go::after{content:"";width:6px;height:6px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;
  transform:rotate(45deg);margin-left:1px}
.srow:hover .srow__go{transform:translateY(-1px);box-shadow:0 4px 0 var(--red)}
.srow--out .srow__go{background:var(--paper2);color:var(--ink2);box-shadow:none;border:1px solid var(--line)}
.srow--out:hover .srow__go{transform:none;box-shadow:none}

/* ─────────── Plan de salle (fond blanc, couleur = distance à la scène) ─────────── */
.plan{width:100%;height:auto;display:block}
.plan text{font-family:var(--lat,"Manrope"),"Noto Sans JP",sans-serif}
.plan .pl-stage-t{font-family:var(--dot,"Doto"),"Manrope",sans-serif}
.blk{cursor:pointer;opacity:1;filter:none;stroke:var(--line,rgba(10,10,10,.12));stroke-width:.8;
  transition:fill-opacity .15s,stroke-width .15s}
.blk:hover{filter:none;opacity:1;stroke:var(--ink);stroke-width:1.6}
.blk:focus{outline:none}
.blk:focus-visible{stroke:var(--violet);stroke-width:2.6}
/* presque épuisé : même teinte estompée + contour pointillé */
.blk--few{fill-opacity:.5;stroke:var(--ink);stroke-width:1;stroke-dasharray:2.2 1.8}
/* complet : gris clair hachuré (motif #tpHatch injecté par app.js) */
.blk--out,.blk--out:hover{cursor:default;fill:url(#tpHatch);fill-opacity:1;opacity:1;filter:none;
  stroke:var(--line,rgba(10,10,10,.12));stroke-width:.8}
/* sélection : noir plein */
.blk--sel,.blk--sel:hover,.blk--sel:focus,.blk--sel:focus-visible{fill:var(--ink);fill-opacity:1;opacity:1;filter:none;
  stroke:var(--ink);stroke-width:2.4}
.blk--sel+.blklb{fill:var(--paper)}
.blk--sel+.mikdot{fill:var(--paper);stroke:var(--ink)}
.vmini .blk,.vmini .blk:hover{cursor:default;stroke:var(--line,rgba(10,10,10,.12));stroke-width:.8}

/* légende */
.legend .lg i{flex:0 0 auto;display:block;width:10px;height:10px;border-radius:2px}
.lg small{font-size:10px;opacity:.55;margin:0 1px}
.lg--grad i{width:46px;height:9px;border-radius:99px;border:1px solid var(--line,rgba(10,10,10,.12));
  background:linear-gradient(90deg,var(--red),var(--violet) 50%,var(--paper3))}
.lg--mik i{width:9px;height:9px;border-radius:50%;background:var(--ink);
  box-shadow:0 0 0 1.5px var(--paper),0 0 0 2.5px var(--line,rgba(10,10,10,.12))}
.lg--few i{background:transparent;border:1px dashed var(--ink);
  box-shadow:inset 0 0 0 10px color-mix(in srgb,var(--violet) 50%,transparent)}
.lg--out i{border:1px solid var(--line,rgba(10,10,10,.12));
  background:repeating-linear-gradient(45deg,var(--paper2) 0 2px,var(--line,rgba(10,10,10,.12)) 2px 3.5px)}
.lg--sel i{background:var(--ink)}

/* mention « イメージ図 » sous le plan */
.plannote{margin-top:8px;font-size:11px;line-height:1.85;color:var(--ink2)}
.plannote::before{content:"イメージ図";display:inline-block;margin-right:8px;padding:0 9px;border-radius:99px;
  background:var(--paper3);border:1px solid var(--ink);color:var(--ink);font-size:10px;font-weight:700;line-height:1.75}

/* puces de bloc : point noir pour les blocs 注釈付き */
.chip--mik::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);flex:0 0 auto}
.pick__alt{margin-top:9px}

/* ─────────── Bannière de la modale et photos de salle absentes ─────────── */
.mbanner--none{background-color:var(--paper2)}
.vphoto--none{display:block;aspect-ratio:16/9;min-height:120px;background:var(--paper2);border-radius:inherit}
.vcredit{margin-top:6px;font-size:10px;line-height:1.6;color:var(--ink2)}

/* ─────────── Panier ─────────── */
.citem__top{display:flex;align-items:flex-start;gap:12px}
.cdate{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:56px;height:58px;border:1.5px solid var(--ink);border-radius:10px;background:var(--paper);
  box-shadow:0 3px 0 var(--ink)}
.cdate b{font-family:var(--dot,"Doto","DotGothic16",monospace);font-size:17px;font-weight:800;line-height:1;
  color:var(--red);letter-spacing:.02em}
.cdate i{font-style:normal;font-size:10.5px;line-height:1;margin-top:5px;color:var(--ink2)}
.citem__tt{flex:1;min-width:0}
.citem__k{display:block;font-family:var(--lat,"Manrope"),sans-serif;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;color:var(--violet);margin-bottom:3px}
.citem__tt .citem__b{margin-top:6px}
.cill{display:flex;justify-content:center;margin:22px 0 2px}
.cill img{display:block;width:118px;height:auto}
.cill--none{display:none}
.cgo{margin-top:6px}
.cleft{margin:14px 0 0;font-size:11.5px;line-height:1.7;color:var(--ink2);text-align:center}
.cleft--max{color:var(--ink);font-weight:700}

/* ─────────── Responsive ─────────── */
@media (max-width:620px){
  .cpick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
  .cchip{min-width:0;padding:7px 10px 8px;border-radius:10px}
  .cchip b{font-size:12.5px}
  .cchip span{font-size:11px}
  .srow__go{padding:6px 12px;font-size:11.5px}
  .cdate{width:50px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .cchip,.srow__go,.blk{transition:none}
  .srow:hover .srow__go{transform:none}
}

/* « + » au plafond : reste cliquable pour afficher la raison (toast), mais grisé */
.step button.is-max{opacity:.32;cursor:not-allowed}
.vcredit a{color:inherit;text-decoration:underline;text-underline-offset:2px}