/* =========================================================
   KTG MUSIC — sito
   Framework: Bootstrap 5.3 (css/bootstrap.min.css, caricato prima di
   questo file). Da Bootstrap usiamo: navbar + collapse (menu mobile),
   griglia row/col, breadcrumb, form-control/form-label, .btn (tramite le
   sue variabili CSS) e alcune utility (d-flex, w-100, border-bottom-0...).
   Questo file personalizza Bootstrap con la palette del progetto.
   Palette: nero, ambra, lilla. Font: JetBrains Mono ovunque,
   la gerarchia viene da peso e dimensione, non da font diversi.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

:root{
  --bg:        #0D0D0F;
  --surface:   #17161A;
  --surface-2: #201E24;
  --ink:       #F4F2F6;
  --ink-dim:   #B8B3C0;
  --ink-faint: #726C7A;
  --line:      #2A2830;
  --amber:     #E8963C;
  --amber-dim: #8A5F2E;
  --lilac:     #A78BFA;
  --lilac-dim: #6B5BA3;

  /* fallback monospace: alcuni glifi (∆ ∑ ˙ ∫ ˘ √ Ɯ Ƶ) non sono nel JetBrains Mono di Google Fonts */
  --font: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', 'Courier New', monospace;

  --container: 1200px;
  --radius: 6px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
/* Reboot di Bootstrap aggiunge margini e line-height ai titoli/paragrafi: li azzeriamo
   per mantenere il ritmo verticale definito qui sotto */
h1,h2,h3,h4,h5,h6,p,ul,ol{ margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ line-height:inherit; color:inherit; }
:root, [data-bs-theme=dark]{
  --bs-body-bg:#0D0D0F; --bs-body-color:#F4F2F6; --bs-body-font-family:var(--font);
  --bs-border-color:#2A2830; --bs-link-color:#F4F2F6; --bs-link-color-rgb:244,242,246; --bs-link-hover-color:#A78BFA; --bs-link-hover-color-rgb:167,139,250;
  --bs-primary:#E8963C; --bs-primary-rgb:232,150,60; --bs-secondary:#A78BFA; --bs-secondary-rgb:167,139,250;
  --bs-border-radius:6px;
}
html{ scroll-behavior:smooth; }

body{
  background-color:var(--bg);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0px, rgba(255,255,255,.045) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(115deg, rgba(0,0,0,.5) 0px, rgba(0,0,0,.5) 1px, transparent 1px, transparent 6px),
    repeating-linear-gradient(25deg, rgba(255,255,255,.025) 0px, rgba(255,255,255,.025) 1px, transparent 1px, transparent 4px),
    repeating-linear-gradient(25deg, rgba(0,0,0,.3) 0px, rgba(0,0,0,.3) 1px, transparent 1px, transparent 8px),
    linear-gradient(160deg, rgba(255,255,255,.05) 0%, transparent 30%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.6) 100%),
    radial-gradient(ellipse 70% 55% at 15% 5%, rgba(255,255,255,.1), transparent 55%),
    radial-gradient(ellipse 60% 65% at 100% 100%, rgba(0,0,0,.7), transparent 55%);
  background-repeat:repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

a{ color:inherit; text-decoration:none; }
img,svg{ display:block; max-width:100%; }
button{ font-family:var(--font); cursor:pointer; }

.wrap{ max-width:var(--container); margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:var(--font); font-weight:700; letter-spacing:-0.01em; }

.eyebrow{
  font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac);
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--lilac); outline-offset:3px;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(13,13,15,.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.site-header .navbar{ width:100%; }
.site-header .navbar > .wrap{ width:100%; }
.logo{ font-weight:700; font-size:17px; letter-spacing:.03em; }
/* Bootstrap navbar: .navbar > .wrap (contenitore) > brand + toggler + .navbar-collapse */
.site-header .navbar{ --bs-navbar-padding-y:0; --bs-navbar-padding-x:0; --bs-navbar-nav-link-padding-x:0; }
.site-header .navbar > .wrap{ flex-wrap:nowrap; }
.logo.navbar-brand{ padding:0; margin:0; font-size:17px; color:var(--ink); }
.logo.navbar-brand:hover{ color:var(--ink); }
.main-nav .navbar-nav{ gap:36px; list-style:none; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; font-weight:600; }
.main-nav .nav-link{ color:var(--ink-dim); position:relative; padding:4px 0; transition:color .15s ease; }
.main-nav .nav-link:hover, .main-nav .nav-link:focus, .main-nav .nav-link.active{ color:var(--amber); }
.main-nav .nav-link.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--amber); }
.lang-toggle{
  margin-left:auto; margin-right:12px; padding:7px 11px; border:1px solid var(--line); border-radius:var(--radius);
  background:none; color:var(--ink); font-size:11px; font-weight:700; letter-spacing:.08em; line-height:1.4;
  transition:color .15s ease, border-color .15s ease;
}
.lang-toggle:hover{ color:var(--amber); border-color:var(--amber); }
@media (min-width:992px){
  .site-header .navbar-collapse{ order:2; }
  .lang-toggle{ order:3; margin:0 0 0 32px; }
}
.nav-toggle.navbar-toggler{ background:none; border:1px solid var(--line); color:var(--ink); font-size:11px; font-weight:400; padding:8px 12px; border-radius:var(--radius); line-height:1.6; }
.nav-toggle.navbar-toggler:focus{ box-shadow:0 0 0 2px var(--lilac); }

/* sotto i 992px (breakpoint lg di Bootstrap) il menu diventa un pannello a comparsa */
@media (max-width:991.98px){
  .site-header .navbar > .wrap{ flex-wrap:wrap; height:auto; min-height:72px; padding-top:18px; padding-bottom:18px; }
  .main-nav .navbar-nav{ padding-top:20px !important; }
  .main-nav .navbar-nav{ gap:22px; font-size:15px; padding:16px 0 28px; }
}

.btn{
  /* variabili del componente .btn di Bootstrap, riportate sulla palette */
  --bs-btn-font-family:var(--font); --bs-btn-font-size:12.5px; --bs-btn-font-weight:700; --bs-btn-line-height:1.6;
  --bs-btn-padding-x:24px; --bs-btn-padding-y:14px; --bs-btn-border-radius:var(--radius); --bs-btn-border-width:1px;
  --bs-btn-color:var(--bg); --bs-btn-bg:var(--amber); --bs-btn-border-color:var(--amber);
  --bs-btn-hover-color:var(--bg); --bs-btn-hover-bg:#f2a951; --bs-btn-hover-border-color:var(--amber);
  --bs-btn-active-color:var(--bg); --bs-btn-active-bg:#f2a951; --bs-btn-active-border-color:var(--amber);
  --bs-btn-focus-box-shadow:0 0 0 2px var(--lilac);
  line-height:1.6;
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:14px 24px; border-radius:var(--radius); border:1px solid var(--amber); color:var(--bg); background:var(--amber);
  transition:transform .15s ease, background .15s ease, border-color .25s ease, box-shadow .25s ease;
}
.btn:hover{ background:#f2a951; transform:translateY(-1px); }
button.btn{ line-height:normal; }
.btn.ghost{ --bs-btn-hover-color:var(--lilac); --bs-btn-active-color:var(--lilac); --bs-btn-active-bg:transparent; --bs-btn-active-border-color:var(--lilac); background:transparent; color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--lilac); color:var(--lilac); }
.btn.outline-lilac{ --bs-btn-hover-color:var(--lilac); --bs-btn-active-color:var(--lilac); --bs-btn-active-bg:transparent; background:transparent; color:var(--lilac); border-color:var(--line); }
.btn.outline-lilac:hover{ border-color:var(--lilac); }
.btn.small{ padding:9px 16px; font-size:11px; }
.btn.block{ display:flex; justify-content:center; width:100%; }

/* ---------- breadcrumb ---------- */
.breadcrumb{
  --bs-breadcrumb-margin-bottom:0; --bs-breadcrumb-font-size:11px; --bs-breadcrumb-item-padding-x:.6em;
  --bs-breadcrumb-divider-color:var(--ink-faint); --bs-breadcrumb-item-active-color:var(--ink-faint);
  color:var(--ink-faint); padding-top:20px; line-height:1.6; }
.breadcrumb a{ color:var(--ink-faint); transition:color .15s ease; }
.breadcrumb a:hover{ color:var(--lilac); }

/* ---------- hero ---------- */
.hero{
  position:relative; padding:130px 0 100px; overflow:visible; border-bottom:none;
  cursor:url("../img/ktg0-cursor.png") 20 20, auto;
}
.hero-bg{ position:absolute; top:0; left:0; right:0; bottom:-260px; z-index:0; pointer-events:none; }
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:right center;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 14%, rgba(0,0,0,.6) 38%, #000 62%);
  mask-image:linear-gradient(to right, transparent 0%, transparent 14%, rgba(0,0,0,.6) 38%, #000 62%);
}
.hero-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(to right, var(--bg) 0%, transparent 42%); }
.hero .wrap{ position:relative; z-index:1; }
.hero-content{ max-width:640px; }
.hero .hero-title{ font-size:clamp(22px,3.2vw,32px); letter-spacing:.03em; margin-bottom:14px; }
.hero h1{ font-size:clamp(44px,7vw,68px); line-height:1.05; margin:16px 0 18px; }

.highlight-amber{ color:var(--amber); font-style:italic; }

.cards-section .section-head{ position:relative; z-index:1; }
.cards-section .section-head .eyebrow, .cards-section .section-head h2{
  text-shadow:0 2px 16px rgba(13,13,15,.9), 0 1px 3px rgba(13,13,15,.9);
}

.reveal-card .hover-lilac, .reveal-card .hover-amber{ transition:color .25s ease; }
.reveal-card:hover .hover-lilac{ color:var(--lilac); font-style:italic; }
.reveal-card:hover .hover-amber{ color:var(--amber); font-style:italic; }

@media (max-width:820px){
  .hero-bg img{ mask-image:linear-gradient(to right, transparent 0%, transparent 55%, rgba(0,0,0,.5) 100%); -webkit-mask-image:linear-gradient(to right, transparent 0%, transparent 55%, rgba(0,0,0,.5) 100%); }
}

/* image reveal card (used across grids) */
.reveal-card{ display:block; position:relative; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; background:var(--surface); transition:border-color .25s ease, box-shadow .25s ease; }
.reveal-card:hover{ border-color:var(--amber); box-shadow:0 0 0 1px rgba(232,150,60,.3), 0 16px 34px -14px rgba(232,150,60,.35); }
.reveal-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .35s ease, transform .35s ease; }
.reveal-card:hover img{ opacity:.45; transform:scale(1); }
.reveal-card .card-body{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; justify-content:flex-end; padding:22px; background:linear-gradient(180deg, rgba(23,22,26,.15) 0%, rgba(13,13,15,.9) 85%); }
.reveal-card .dot{ width:24px; height:24px; border-radius:5px; margin-bottom:14px; background:var(--amber); }
.reveal-card .dot.lilac{ background:var(--lilac); }
.reveal-card h3{ font-size:16px; margin-bottom:8px; }
.reveal-card p{ font-size:12px; color:var(--ink-dim); line-height:1.6; }

/* ---------- sections ---------- */
section{ padding:70px 0; border-bottom:1px solid var(--line); }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:32px; gap:20px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(24px,3.4vw,34px); }

/* page hero (secondary pages) */
.page-hero{ padding:20px 0 44px; }
.page-hero h1{ font-size:clamp(30px,5vw,46px); margin-top:8px; }
.page-hero p{ color:var(--ink-dim); max-width:60ch; font-size:14.5px; margin-top:10px; }

/* photo placeholder (used until real images are added) */
.photo-slot{
  background:var(--surface); border:1px dashed var(--lilac); border-radius:var(--radius);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--lilac); font-size:10.5px; padding:10px; line-height:1.5;
}

/* ---------- footer ---------- */
footer{ padding:56px 0 32px; }
.footer-grid{ --bs-gutter-x:32px; --bs-gutter-y:32px; margin-bottom:40px; }
.footer-grid h4{ font-size:11px; color:var(--amber); text-transform:uppercase; letter-spacing:.08em; margin-bottom:14px; }
.footer-grid p, .footer-grid a{ font-size:12.5px; color:var(--ink-dim); line-height:2; display:block; }
.footer-grid a:hover{ color:var(--lilac); }
.social-links{ display:flex; gap:18px; flex-wrap:wrap; }
.social-links .social-link{ display:inline-flex; align-items:center; gap:8px; }
.social-links .social-link svg{ flex-shrink:0; }
.footer-grid h4.foot-name{ text-transform:none; letter-spacing:.02em; font-size:13px; } /* niente maiuscolo: ß diventerebbe SS */
.foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:11px; color:var(--ink-faint); padding-top:24px; border-top:1px solid var(--line); }
.torino-link{ color:inherit; transition:color .2s ease; }
.torino-link:hover{ color:var(--amber); }

/* ---------- product / category grid ---------- */
/* griglie a card: .row + .row-cols-* di Bootstrap, qui solo la spaziatura */
.product-grid{ --bs-gutter-x:20px; --bs-gutter-y:20px; }
.category-grid{ --bs-gutter-x:16px; --bs-gutter-y:16px; }
.release-grid{ --bs-gutter-x:18px; --bs-gutter-y:18px; }
.product-grid > .col > *, .category-grid > .col > *, .release-grid > .col > *{ height:100%; }
.product-grid > .col > .reveal-card{ height:280px; }
.product-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px;
  transition:transform .15s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.product-card .photo-slot{ aspect-ratio:1/1; }
.product-card .product-photo{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); cursor:zoom-in; }
.product-card h3{ font-size:13.5px; min-height:2.6em; }
.product-card .price{ color:var(--amber); font-weight:700; font-size:16px; }
.product-card .btn{
  margin-top:auto; background:transparent; color:var(--ink); border:1px solid var(--line);
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.product-card .btn:hover{ background:transparent; transform:none; border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 1px rgba(232,150,60,.3); }

.category-card{
  position:relative; overflow:hidden; display:block; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px; text-align:center;
  transition:transform .15s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.category-card .photo-slot{ aspect-ratio:4/3; margin-bottom:12px; }
.category-card .category-photo{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:var(--radius); margin-bottom:12px; }
.category-card{ display:flex; flex-direction:column; }
.category-card .btn{ margin-top:auto; }
.category-card h3{ font-size:13px; margin-bottom:10px; }


/* ---------- forms ---------- */
form.contact-form{ display:flex; flex-direction:column; gap:18px; max-width:700px; }
form.contact-form label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; display:block; }
form.contact-form input, form.contact-form textarea{
  width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:13px 14px; border-radius:var(--radius); font-family:var(--font); font-size:14px;
}
form.contact-form textarea{ min-height:130px; resize:vertical; }
/* .form-control di Bootstrap con la palette del sito */
.form-control{ line-height:normal; }
.form-control:focus{ background:var(--surface); color:var(--ink); border-color:var(--lilac); box-shadow:0 0 0 1px rgba(167,139,250,.35); }
.form-label{ margin-bottom:6px; }
form.contact-form input:focus, form.contact-form textarea:focus{ border-color:var(--lilac); }
.form-note{ font-size:11px; color:var(--ink-faint); margin-top:4px; }

.social-row{ display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 40px; }
.social-row .btn svg{ flex-shrink:0; }
.contact-block{ margin:44px 0; }
.contact-block .section-head{ margin-bottom:20px; }
.contact-block h2{ font-size:clamp(30px,5vw,46px); }

/* ---------- lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(13,13,15,.92); padding:40px; cursor:zoom-out;
}
.lightbox-overlay[hidden]{ display:none; }
.lightbox-overlay img{ max-width:100%; max-height:100%; border-radius:var(--radius); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); }

/* ---------- checkout ---------- */
.checkout-grid{ --bs-gutter-x:48px; --bs-gutter-y:48px; padding:20px 0 0; }
@media (min-width:992px){ .checkout-side{ width:calc((100% - 96px) * .8 / 1.8 + 48px); } }
.order-summary{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; gap:16px; align-items:center; margin-bottom:32px; }
.order-summary .photo-slot{ width:90px; height:90px; flex-shrink:0; }
.checkout-fields label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; display:block; }
.checkout-fields input{ width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink); padding:13px 14px; border-radius:var(--radius); font-family:var(--font); font-size:14px; }
.pay-methods{ display:flex; gap:12px; margin:20px 0; flex-wrap:wrap; }
.pay-method{
  cursor:pointer;
  flex:1; min-width:140px; padding:14px; border-radius:var(--radius); border:1px solid var(--line); text-align:center; font-size:12.5px; font-weight:600;
  transition:border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.pay-method:hover{ border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 1px rgba(232,150,60,.3); }
.pay-method.active{ border-color:var(--amber); color:var(--amber); box-shadow:0 0 0 1px rgba(232,150,60,.3); }



/* ---------- portfolio ---------- */

.release-card{
  display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px;
  transition:transform .15s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.release-card:hover{
  border-color:var(--amber);
  box-shadow:0 0 0 1px rgba(232,150,60,.35), 0 16px 34px -12px rgba(232,150,60,.4);
}
.release-card .photo-slot{ aspect-ratio:1/1; margin-bottom:12px; }
.release-card .release-cover{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); margin-bottom:12px; }
.release-card h3{ font-size:13px; margin-bottom:4px; }
/* titolo della card nel font del progetto (variabili impostate da player.js) */
.release-card .release-title{ font-family:var(--card-font, inherit); font-weight:var(--card-weight, 700); font-size:17px; line-height:1.2; -webkit-text-stroke:var(--title-stroke, 0px) currentColor; }
.release-title .punct{ font-family:var(--punct-font, inherit); font-weight:var(--punct-weight, inherit); }
.release-card .year{ font-size:11px; color:var(--ink-faint); margin-bottom:12px; }
.release-card .listen-link{
  display:flex; justify-content:center; width:100%; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:9px 16px; border-radius:var(--radius); border:1px solid var(--line); color:var(--ink);
  transition:border-color .2s ease, color .2s ease;
}
.release-card:hover .listen-link{ border-color:var(--lilac); color:var(--lilac); }



.portfolio-teaser-banner{
  position:relative; display:block; margin:0 auto; max-width:480px;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line);
  transition:transform .15s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.portfolio-teaser-banner img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }

/* ---------- servizi ---------- */
.service-card{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:32px; margin-bottom:24px;
  transition:transform .15s ease-out, box-shadow .25s ease, border-color .25s ease;
  will-change:transform;
}
.service-card .photo-slot{ aspect-ratio:4/3; }
.service-card .service-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--radius); }
.service-card h3{ font-size:24px; margin:0 0 16px; }
.service-card p{ color:var(--ink-dim); font-size:14px; line-height:1.7; margin-bottom:20px; }
.service-row{ --bs-gutter-x:40px; --bs-gutter-y:40px; }
@media (min-width:992px){ .service-media{ width:calc((100% - 80px) * .45 + 40px); } }
.service-text{ text-align:center; }
.service-text .btn{ margin:0 auto; }

/* diagonal shine sweep on hover */
.shine-card::before{
  content:''; position:absolute; top:-60%; left:-60%; width:40%; height:220%;
  background:linear-gradient(120deg, transparent 0%, rgba(232,150,60,.55) 45%, rgba(167,139,250,.5) 58%, transparent 100%);
  transform:rotate(20deg); transition:left .75s ease; pointer-events:none; z-index:2;
}
.shine-card:hover::before{ left:130%; }
.shine-card:hover{
  border-color:var(--amber);
  box-shadow:0 0 0 1px rgba(232,150,60,.3), 0 20px 40px -16px rgba(232,150,60,.35);
}

/* Il player (barra persistente, pagine dei progetti e dei brani) ha il suo foglio: css/player.css */

/* ---------- home ----------
   Sotto l'header fisso, il video dei post-it (img/home/lavagna.mp4) a tutto schermo su fondo bianco;
   poi solo i riquadri dei progetti con "Ascolta ora". */
.home-hero{ position:relative; height:calc(100vh - 72px); height:calc(100svh - 72px); padding:0; border-bottom:none; background:#FFFFFF; overflow:hidden; }
.home-video{ display:block; width:100%; height:100%; object-fit:contain; background:#FFFFFF; }
.home-scroll{
  position:absolute; left:50%; bottom:clamp(14px,3vh,28px); transform:translateX(-50%);
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  color:#151515; font-size:20px; background:rgba(255,255,255,.85); border:1px solid rgba(21,21,21,.25);
  animation:home-bob 2.4s ease-in-out infinite; transition:background .15s ease, color .15s ease;
}
.home-scroll:hover{ background:#151515; color:#FFFFFF; }
@keyframes home-bob{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,6px); } }
/* progetti in home: barra "jukebox" con riquadri grandi, dal più nuovo al più vecchio, che scorre da sola e senza fine (script.js) */
.home-strip-wrap{ position:relative; }
.release-strip{
  display:flex; gap:22px; overflow-x:auto; /* niente scroll-snap: lo scorrimento continuo è fatto in script.js */
  padding:4px 2px 18px; scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.release-strip > .col{ flex:0 0 clamp(240px, 28vw, 380px); }
.release-strip > .col > *{ height:100%; }
.release-strip .release-card{ padding:16px; }
.release-strip .release-title{ font-size:clamp(20px, 2vw, 26px); }
.strip-btn{
  position:absolute; top:40%; z-index:2; width:46px; height:46px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--line); background:rgba(13,13,15,.85); color:var(--ink); font-size:20px;
  transition:border-color .15s ease, color .15s ease, opacity .15s ease;
}
.strip-btn:hover{ border-color:var(--amber); color:var(--amber); }
.strip-prev{ left:-14px; }
.strip-next{ right:-14px; }
@media (max-width:767.98px){ .strip-btn{ display:none; } .release-strip > .col{ flex-basis:78vw; } }
/* l'ancora #progetti non finisce sotto l'header fisso */
.home-section{ scroll-margin-top:72px; }
@media (prefers-reduced-motion: reduce){
  .home-scroll{ animation:none !important; }
}

/* ---------- minigiochi (minigiochi.html + js/minigiochi.js) ----------
   Colori degli ostacoli (solo per i minigiochi, non toccano la palette del sito): uno a caso per ostacolo.
   Fase 1: solo forme geometriche nella palette del sito. Le schede usano lo stile delle card del sito. */
.games{ --mg-bianco:#F4F2F6; --mg-giallo:#F2C94C; --mg-verde:#4CAF7A; }
.games-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } /* nove schede: 3 + 3 + 3 */
@media (max-width:899.98px){ .games-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:559.98px){ .games-grid{ grid-template-columns:1fr; } }
.game-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:10px; text-align:left; padding:22px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--font); transition:border-color .2s ease, transform .15s ease;
}
.game-card:hover{ border-color:var(--amber); }
.game-card:focus-visible{ outline:2px solid var(--lilac); outline-offset:3px; }
.game-card-art{ position:relative; width:100%; height:140px; border-radius:var(--radius); background:var(--bg); border:1px solid var(--line); overflow:hidden; margin-bottom:6px; }
.game-card-art img{ position:absolute; display:block; height:auto; }
/* copertine delle schede: gli stessi sprite dei giochi (img/minigiochi/) */
.gc-synth::after{ content:''; position:absolute; left:0; right:0; bottom:22px; height:2px; background:var(--line); }
.gc-synth .gc-player{ height:62px; width:auto; left:16%; bottom:42px; }
.gc-synth .gc-obstacle{ height:46px; width:auto; left:52%; bottom:23px; }
.gc-synth .gc-far{ height:30px; left:70%; opacity:.9; }
.gc-rain .gc-player{ height:46px; width:auto; left:46%; bottom:8px; }
.gc-rain .gc-guitar{ width:auto; position:absolute; }
.gc-rain .g1{ height:58px; left:18%; top:-6px; transform:rotate(-14deg); }
.gc-rain .g2{ height:50px; left:62%; top:20px; transform:rotate(10deg); }
.gc-rain .g3{ height:44px; left:82%; top:-10px; transform:rotate(-6deg); opacity:.8; }
.gc-rain svg.g1{ width:36px; height:36px; top:6px; } .gc-rain svg.g2{ width:32px; height:32px; top:34px; } .gc-rain svg.g3{ width:28px; height:28px; top:10px; } /* icone social */
.gc-keithy .gc-tank{ position:absolute; left:50%; top:12px; bottom:10px; width:96px; transform:translateX(-50%); border:2px solid var(--ink); border-top:0; overflow:hidden; }
.gc-keithy .gc-tank img{ position:absolute; left:50%; bottom:2px; width:64px; transform:translateX(-50%); }
.gc-keithy .gc-tank::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:46%; background:rgba(167,139,250,.38); }
.game-card-title{ font-size:18px; font-weight:700; }
.game-card-text{ font-size:13px; color:var(--ink-dim); line-height:1.5; }
.game-card-keys{ margin-top:auto; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--lilac); }

/* area di gioco a tutto schermo, sopra menu e barra del player; solo il gioco, punteggi e tasti negli angoli */
html.game-open, html.game-open body{ overflow:hidden; }
.game-area{ position:fixed; inset:0; z-index:3000; display:flex; flex-direction:column; background:var(--bg); }
.game-area[hidden]{ display:none; }
.game-hud{ position:absolute; top:14px; left:18px; z-index:2; pointer-events:none; }
.game-title{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.game-scores{ display:flex; gap:18px; font-size:13px; margin:0; padding:7px 12px; border-radius:var(--radius); background:rgba(13,13,15,.7); border:1px solid var(--line); }
.game-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.game-score strong{ color:var(--amber); font-variant-numeric:tabular-nums; }
.game-status{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:2; margin:0; max-width:min(92vw, 640px); padding:6px 14px; border-radius:999px; background:rgba(13,13,15,.72); border:1px solid var(--line); font-size:12px; color:var(--ink-dim); text-align:center; pointer-events:none; }
.game-status:empty{ display:none; }
.game-stage{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:62px 14px 56px; }
.game-canvas{ display:block; width:100%; height:100%; object-fit:contain; border:0; border-radius:0; background:var(--bg); touch-action:none; }
.game-canvas.is-aim{ cursor:none; } /* Battaglia spaziale: il mirino disegnato prende il posto della freccia */
.game-canvas:focus-visible{ outline:2px solid var(--lilac); outline-offset:-2px; }
.game-actions{ position:absolute; top:12px; right:14px; z-index:2; display:flex; gap:8px; margin:0; }
.game-actions .btn{ --bs-btn-padding-y:8px; --bs-btn-padding-x:14px; padding:8px 14px; font-size:11px; }
/* transizione d'ingresso: il titolo grande che viene verso il primo piano e svanisce */
.game-intro{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; background:var(--bg); pointer-events:none; animation:game-intro-bg 1.15s ease forwards; }
.game-intro span{ font-size:clamp(44px, 9vw, 140px); font-weight:800; letter-spacing:-.02em; color:var(--ink); text-align:center; line-height:1; padding:0 4vw; text-shadow:0 0 40px rgba(167,139,250,.45); animation:game-intro-title 1.15s cubic-bezier(.55,0,.75,.2) forwards; }
@keyframes game-intro-title{
  0%{ opacity:0; transform:scale(.7); filter:blur(4px); }
  25%{ opacity:1; transform:scale(1); filter:blur(0); }
  55%{ opacity:1; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(5); filter:blur(10px); }
}
@keyframes game-intro-bg{ 0%, 70%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){
  .game-intro, .game-intro span{ animation:game-intro-fade .35s ease forwards; }
  @keyframes game-intro-fade{ 0%{ opacity:1; } 100%{ opacity:0; } }
}

/* copertina di Inseguimento: strada, testa, polizia dietro, ostacoli colorati */
.gc-chase{ background:linear-gradient(90deg, transparent 33%, var(--line) 33% 34%, transparent 34% 66%, var(--line) 66% 67%, transparent 67%), #1A191E; }
.gc-chase .gc-player{ height:44px; width:auto; left:50%; top:30px; transform:translateX(-50%); }
.gc-car{ position:absolute; left:50%; top:80px; width:26px; height:44px; transform:translateX(-50%); border-radius:6px; background:linear-gradient(#16161A 0 36%, #F4F2F6 36% 66%, #16161A 66%); }
.gc-car-lights{ position:absolute; left:3px; right:3px; top:20px; height:5px; background:linear-gradient(90deg, #FF3B3B 50%, #3B7BFF 50%); }
.gc-block{ position:absolute; top:8px; height:28px; width:auto; }
.gc-block.b1{ left:12%; height:30px; top:10px; }
.gc-block.b2{ left:80%; }
/* Inseguimento: barra della distanza dalla polizia, in basso a destra */
.chase-meter{ position:absolute; right:18px; bottom:16px; z-index:2; display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:var(--radius); background:rgba(13,13,15,.72); border:1px solid var(--line); }
.chase-bar{ display:block; width:min(30vw, 180px); height:10px; border-radius:5px; background:var(--surface); overflow:hidden; }
.chase-fill{ display:block; height:100%; width:100%; background:var(--mg-verde); transition:width .2s linear, background .3s ease; }
.chase-fill.is-danger{ background:#FF3B3B; }
@media (prefers-reduced-motion: reduce){ .chase-fill{ transition:none; } }

/* Canestro e Battaglia spaziale: stelle, prossima stella e vite sotto i punteggi */
.game-side{ position:absolute; top:58px; left:18px; z-index:2; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; margin:0; padding:7px 12px; border-radius:var(--radius); background:rgba(13,13,15,.7); border:1px solid var(--line); pointer-events:none; }
.game-side strong{ color:var(--amber); font-variant-numeric:tabular-nums; }
/* copertina di Canestro: tabellone, anello con la rete, la testa e la parabola tratteggiata */
.gc-hoop .gc-board{ position:absolute; left:50%; top:12px; width:84px; height:46px; transform:translateX(-50%); border:2px solid var(--line); border-radius:4px; }
.gc-hoop .gc-rim{ position:absolute; left:50%; top:46px; width:56px; height:12px; transform:translateX(-50%); border:3px solid var(--amber); border-radius:50%; }
.gc-hoop .gc-net{ position:absolute; left:50%; top:52px; width:46px; height:26px; transform:translateX(-50%); clip-path:polygon(0 0, 100% 0, 80% 100%, 20% 100%); background:repeating-linear-gradient(90deg, rgba(244,242,246,.5) 0 1.5px, transparent 1.5px 8px), repeating-linear-gradient(0deg, rgba(244,242,246,.5) 0 1.5px, transparent 1.5px 9px); }
.gc-hoop .gc-arc{ position:absolute; left:22%; top:40px; width:36%; height:70px; border-top:2px dashed rgba(244,242,246,.6); border-left:2px dashed rgba(244,242,246,.6); border-radius:100% 0 0 0; }
.gc-hoop .gc-player{ height:42px; width:auto; left:16%; bottom:8px; transform:rotate(-12deg); }
/* copertina di Battaglia spaziale: navicelle a triangolo, cimette verdi, la testa in basso */
.gc-space{ background:radial-gradient(1px 1px at 20% 30%, var(--ink-faint) 50%, transparent 51%), radial-gradient(1px 1px at 70% 20%, var(--ink-faint) 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, var(--ink-faint) 50%, transparent 51%), radial-gradient(1px 1px at 40% 70%, var(--ink-faint) 50%, transparent 51%), var(--bg); }
.gc-ship{ position:absolute; width:26px; height:26px; }
.gc-ship.s1{ left:12%; top:14px; }
.gc-ship.s2{ left:36%; top:30px; }
.gc-ship.s3{ left:60%; top:12px; }
.gc-ship.s4{ left:82%; top:26px; }
.gc-shot{ position:absolute; width:16px; height:15px; }
.gc-shot.t1{ left:calc(50% - 8px); top:58px; }
.gc-shot.t2{ left:calc(50% - 8px); top:80px; }
.gc-space .gc-player{ height:40px; width:auto; left:50%; bottom:8px; transform:translateX(-50%); }

/* copertina di Bowling: pista con canaline, i 10 birilli a triangolo, la testa in basso */
.gc-bowling{ background:linear-gradient(transparent 86%, #2A2420 86%), var(--bg); }
.gc-bowling .gc-tower{ position:absolute; left:4%; bottom:14%; width:80%; height:auto; }
.gc-bowling .gc-player{ height:36px; width:auto; right:6%; bottom:16%; transform:rotate(-10deg); }
/* Bowling: messaggio dopo ogni tiro; il gioco è a tutta pagina (stage senza margini) */
.bowl-msg{ position:absolute; left:50%; top:46%; z-index:3; margin:0; transform:translate(-50%, -50%); font-size:clamp(34px, 6vw, 64px); font-weight:800; color:var(--ink); text-shadow:0 2px 18px rgba(0,0,0,.8); pointer-events:none; opacity:0; white-space:nowrap; }
.bowl-msg.is-on{ animation:bowl-msg 1.2s ease forwards; }
@keyframes bowl-msg{ 0%{ opacity:0; transform:translate(-50%, -50%) scale(.7); } 15%{ opacity:1; transform:translate(-50%, -50%) scale(1); } 75%{ opacity:1; } 100%{ opacity:0; } }
@media (prefers-reduced-motion: reduce){ .bowl-msg.is-on{ animation:bowl-msg-fade 1.2s linear forwards; } @keyframes bowl-msg-fade{ 0%, 80%{ opacity:1; transform:translate(-50%, -50%); } 100%{ opacity:0; transform:translate(-50%, -50%); } } }
.game-stage.is-full{ padding:0; }
/* BET and SHOOT: dichiarazione dei birilli (centrata in alto); bloccata durante il tiro */
.bet-box{ position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--radius); background:rgba(13,13,15,.8); border:1px solid var(--line); }
.bet-btn{ width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink); font-size:18px; line-height:1; padding:0; }
.bet-btn:hover{ border-color:var(--amber); color:var(--amber); }
.bet-btn:focus-visible{ outline:2px solid var(--lilac); outline-offset:2px; }
.bet-value{ min-width:1.6em; text-align:center; font-size:22px; color:var(--amber); font-variant-numeric:tabular-nums; }
.bet-box.is-locked{ opacity:.55; }
/* schermi più stretti: sempre al centro, ma sotto la fascia di punteggi, tasti e credito */
@media (max-width:1099.98px){ .bet-box{ top:112px; } }
@media (max-width:699.98px){ .bet-box{ top:150px; } }
.bet-box.is-locked .bet-btn{ pointer-events:none; }
.ff-badge{ position:absolute; right:18px; bottom:16px; z-index:2; margin:0; padding:6px 12px; border-radius:var(--radius); background:var(--amber); color:var(--bg); font-weight:800; font-size:14px; letter-spacing:.06em; }
.ff-badge[hidden]{ display:none; } /* Bowling e Ping pong: campo a tutta pagina */
/* copertina di Ping pong: campo verticale, porte, racchette, la testa come pallina */
.gc-pong{ background:#14131A; border-left:5px solid #3B3F4A; border-right:5px solid #3B3F4A; }
.gc-pong .gc-goal{ position:absolute; left:0; right:0; height:5px; background:linear-gradient(90deg, #3B3F4A 0 40%, transparent 40% 60%, #3B3F4A 60%); }
.gc-pong .gc-goal.top{ top:0; } .gc-pong .gc-goal.bottom{ bottom:0; }
.gc-pong .gc-midline{ position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--line); }
.gc-pong .gc-paddle{ position:absolute; width:52px; height:7px; border-radius:4px; }
.gc-pong .gc-paddle.bot{ top:16px; left:30%; background:var(--lilac); }
.gc-pong .gc-paddle.me{ bottom:16px; left:46%; background:var(--amber); }
.gc-pong .gc-player{ height:30px; width:auto; left:58%; top:42%; transform:rotate(14deg); }

/* copertina di Punizioni di calcio: porta con rete e portiere, barriera di vigili, la testa come pallone */
.gc-free{ background:linear-gradient(transparent 58%, #10241A 58%), var(--bg); }
.gc-free .gc-goalframe{ position:absolute; left:50%; top:14px; width:104px; height:38px; transform:translateX(-50%); border:3px solid var(--ink); border-bottom:0; background:repeating-linear-gradient(90deg, rgba(244,242,246,.22) 0 1px, transparent 1px 8px), repeating-linear-gradient(0deg, rgba(244,242,246,.22) 0 1px, transparent 1px 8px); }
.gc-free .gc-keeper{ position:absolute; left:calc(50% + 14px); top:28px; width:11px; height:24px; border-radius:6px 6px 2px 2px; background:var(--mg-giallo, #F2C94C); transform:rotate(14deg); }
.gc-free .gc-wall{ position:absolute; top:70px; width:15px; height:34px; border-radius:8px 8px 6px 6px; background:#16203A; }
.gc-free .gc-wall::before{ content:''; position:absolute; left:3px; top:-8px; width:9px; height:9px; border-radius:50%; background:#F2C6A8; box-shadow:0 -3px 0 -1px #F4F2F6; }
.gc-free .w1{ left:calc(50% - 30px); } .gc-free .w2{ left:calc(50% - 8px); } .gc-free .w3{ left:calc(50% + 14px); }
.gc-free::after{ content:''; position:absolute; left:19%; top:24px; width:33%; height:80px; border-top:2px dashed rgba(244,242,246,.6); border-left:2px dashed rgba(244,242,246,.6); border-radius:100% 0 0 0; }
.gc-free .gc-player{ height:34px; width:auto; left:16%; bottom:6px; transform:rotate(-10deg); }

/* Salva l'alieno: vasca a sinistra, riga e casella a destra */
.game-stage.is-alien{ display:grid; grid-template-columns:auto minmax(0, 560px); gap:clamp(20px, 4vw, 56px); align-items:center; justify-content:center; }
.game-canvas.is-tank{ width:auto; height:calc(100vh - 140px); max-height:760px; max-width:42vw; object-fit:contain; }
.alien-panel{ display:flex; flex-direction:column; gap:14px; }
.alien-meter{ height:10px; border-radius:5px; background:var(--surface); border:1px solid var(--line); overflow:hidden; }
.alien-meter-fill{ display:block; height:100%; width:0; background:var(--lilac); transition:width .25s linear, background .3s ease; }
.alien-meter-fill.is-danger{ background:var(--amber); }
.alien-level{ font-size:14px; }
.alien-level strong{ color:var(--lilac); font-variant-numeric:tabular-nums; }
.alien-line{ font-size:clamp(18px, 2.4vw, 24px); line-height:1.5; min-height:3em; color:var(--ink); }
.alien-line.is-solved{ color:var(--amber); }
.alien-gap{ color:var(--lilac); letter-spacing:.12em; }
.alien-form{ display:flex; gap:10px; }
.alien-form .alien-input{ flex:1; font-size:18px; }
.alien-form.is-wrong .alien-input{ border-color:#E5484D; animation:alien-shake .32s ease; }
@keyframes alien-shake{ 25%{ transform:translateX(-6px); } 50%{ transform:translateX(6px); } 75%{ transform:translateX(-3px); } }
.alien-sources{ font-size:13px; color:var(--ink-dim); line-height:1.6; }
@media (max-width:767.98px){
  .game-stage.is-alien{ grid-template-columns:1fr; align-content:start; overflow-y:auto; }
  .game-canvas.is-tank{ height:42vh; max-width:none; justify-self:center; }
}
@media (prefers-reduced-motion: reduce){
  .alien-form.is-wrong .alien-input{ animation:none; }
  .alien-meter-fill{ transition:none; }
}

/* ---------- studio (studio.html + js/studio.js): sequencer a 16 passi ----------
   Tutto con le variabili del sito. Su telefono la griglia scorre in orizzontale (.studio-scroll),
   i controlli di ogni traccia restano agganciati a sinistra. Passo in riproduzione = ambra. */
.studio-app{ display:flex; flex-direction:column; gap:14px; padding-bottom:40px; }
.studio-bar{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); }
.studio-field{ display:flex; flex-direction:column; gap:6px; margin:0; }
.studio-field.tiny{ gap:3px; }
.studio-label{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }
.studio-pair{ display:flex; align-items:center; gap:10px; }
.studio-value{ font-size:12px; color:var(--ink-dim); min-width:3.2em; font-variant-numeric:tabular-nums; }
.studio-input, .studio-select{ background:var(--surface-2); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); padding:6px 8px; font-family:var(--font); font-size:13px; }
.studio-select.small{ padding:3px 6px; font-size:12px; }
.studio-bpm{ width:68px; }
.studio-range{ width:130px; accent-color:var(--amber); }
.studio-range.small{ width:84px; }
.studio-input:focus-visible, .studio-select:focus-visible, .studio-range:focus-visible{ outline:2px solid var(--lilac); outline-offset:2px; }
.studio-play{ min-width:96px; justify-content:center; }
.studio-play[aria-pressed="true"]{ background:var(--lilac); border-color:var(--lilac); color:var(--bg); }
.studio-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.studio-status{ min-height:1.4em; margin:0; font-size:12px; color:var(--amber); }
.studio-help{ font-size:12px; color:var(--ink-faint); line-height:1.6; max-width:80ch; margin:0; }

/* griglia */
.studio-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px; }
.studio-grid{ min-width:720px; display:flex; flex-direction:column; gap:12px; }
.studio-steps{ display:grid; grid-template-columns:repeat(16, minmax(36px, 1fr)); gap:4px; }
.studio-steps > :nth-child(4n+1):not(:first-child){ margin-left:6px; } /* un piccolo stacco ogni battito */
.studio-num{ font-size:10px; text-align:center; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.studio-num.is-now{ color:var(--amber); }
.studio-head{ position:sticky; left:0; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:6px; max-width:calc(100vw - 72px); }
.studio-name{ font-size:13px; font-weight:700; min-width:5.5em; }
.studio-ctrls{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.studio-ctrls .studio-field.tiny{ flex-direction:row; align-items:center; gap:6px; }
.studio-toggle{ width:28px; height:26px; border-radius:4px; border:1px solid var(--line); background:var(--surface-2); color:var(--ink-dim); font-size:11px; font-weight:700; padding:0; }
.studio-toggle[aria-pressed="true"]{ background:#E5484D; border-color:#E5484D; color:#fff; }
.studio-toggle.is-solo[aria-pressed="true"]{ background:var(--amber); border-color:var(--amber); color:var(--bg); }
.studio-cell{ height:40px; padding:0; border-radius:4px; border:1px solid var(--line); background:var(--surface-2); color:var(--bg); font-size:10px; font-weight:700; transition:background .08s ease, box-shadow .08s ease; touch-action:manipulation; }
.studio-cell.is-beat{ background:#29262F; }
.studio-cell:hover{ border-color:var(--lilac-dim); }
.studio-cell.is-on{ background:var(--lilac); border-color:var(--lilac); }
.studio-row.is-melodic .studio-cell.is-on{ background:#C9B8FF; border-color:#C9B8FF; }
.studio-cell.is-now{ box-shadow:inset 0 0 0 2px var(--amber); }
.studio-cell.is-on.is-now{ background:var(--amber); border-color:var(--amber); }
.studio-cell:focus-visible, .studio-toggle:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
/* con un "solo" attivo le altre tracce si attenuano */
.studio-app.has-solo .studio-row:not(:has(.is-solo[aria-pressed="true"])) .studio-steps{ opacity:.45; }
@media (prefers-reduced-motion: reduce){ .studio-cell{ transition:none; } }
@media (max-width:767.98px){
  .studio-bar{ gap:12px 16px; padding:12px; }
  .studio-range{ width:110px; }
  .studio-scroll{ padding:10px; }
  .studio-head{ max-width:calc(100vw - 54px); }
}

/* ---------- merch (merch.html, vestiti-*.html): due sezioni, Strumenti e Vestiti ----------
   Stessa navigazione degli strumenti: categorie → pagina con i prodotti → acquisto. */
.merch-section + .merch-section{ padding-top:8px; }
.merch-head{ margin-bottom:20px; }
.merch-head h2{ font-size:clamp(24px, 3.4vw, 34px); margin:6px 0 6px; }
.merch-head p{ color:var(--ink-dim); font-size:13.5px; max-width:60ch; margin:0; }
.product-card .product-line{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--lilac); }
.product-card h3{ margin-bottom:0; }
.product-card .product-desc{ font-size:12px; line-height:1.55; color:var(--ink-dim); margin:0; }
.product-size{ display:flex; align-items:center; gap:10px; margin:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.product-size select{ text-transform:none; letter-spacing:0; padding:4px 8px; font-size:12px; }
.product-size.is-one{ display:block; }
.product-card .price{ margin-top:auto; }
.product-card .product-size{ margin-top:auto; } /* taglia e prezzo in fondo alla scheda, allineati tra le schede */
.product-card .product-size + .price{ margin-top:0; }
.order-size{ font-size:12px; color:var(--ink-dim); margin-top:4px; }

/* copertina dei Rigori: come le punizioni, senza barriera, con il dischetto */
.gc-pen .gc-spot{ position:absolute; left:50%; bottom:12px; width:16px; height:5px; transform:translateX(-50%); border-radius:50%; background:rgba(244,242,246,.7); }
.gc-pen::after{ display:none; }
.gc-pen .gc-player{ left:50%; bottom:16px; transform:translateX(-50%); }
.gc-duel .gc-glove{ position:absolute; left:calc(50% - 40px); top:22px; width:14px; height:14px; border-radius:4px 4px 6px 6px; background:#F4F2F6; box-shadow:0 0 0 2px var(--lilac); }

/* Run!: legenda di tutti gli elementi (a sinistra; su schermi stretti in alto, più compatta) */
.run-legend{ position:absolute; left:18px; top:50%; transform:translateY(-50%); z-index:2; list-style:none; margin:0; padding:10px 12px; display:flex; flex-direction:column; gap:8px; max-width:250px; border-radius:var(--radius); background:rgba(13,13,15,.8); border:1px solid var(--line); font-size:11.5px; line-height:1.35; color:var(--ink-dim); pointer-events:none; }
.run-legend li{ display:flex; align-items:center; gap:10px; }
.run-legend canvas{ width:36px; height:36px; flex:0 0 36px; }
.run-legend strong{ color:var(--ink); }
@media (max-width:1099.98px){
  .run-legend{ top:58px; transform:none; flex-direction:row; flex-wrap:wrap; max-width:calc(100% - 36px); gap:4px 12px; padding:6px 10px; }
  .run-legend li span span{ display:none; } /* solo icona e nome: i dettagli restano nella riga di stato */
  .run-legend canvas{ width:26px; height:26px; flex-basis:26px; }
}
/* studio: campionatore ed effetti */
.studio-sampler-head{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; flex:1 1 100%; }
.studio-sample-info{ margin:0; font-size:12px; color:var(--ink-dim); }
.studio-checkfield{ flex-direction:row; align-items:center; gap:8px; align-self:center; }
.studio-check{ width:18px; height:18px; accent-color:var(--amber); }
.studio-check:focus-visible{ outline:2px solid var(--lilac); outline-offset:2px; }
.studio-fx .studio-name{ align-self:center; }
.studio-row[data-track="sample"] .studio-cell.is-on{ background:var(--amber); border-color:var(--amber); }
.studio-row[data-track="sample"] .studio-cell.is-on.is-now{ background:#fff; border-color:#fff; }
.studio-row[data-track="sample"]{ padding-top:10px; border-top:1px dashed var(--line); }

/* ---------- iPhone installato (PWA) e viewport-fit=cover: margini di sicurezza (notch, barra Home, lati in orizzontale) ----------
   env() vale 0 su desktop; nelle pagine dentro l'iframe del guscio (classe ktg-in-frame, da js/pwa.js) i margini sono già
   del guscio, quindi lì valgono 0 */
:root{ --sa-t:env(safe-area-inset-top, 0px); --sa-r:env(safe-area-inset-right, 0px); --sa-b:env(safe-area-inset-bottom, 0px); --sa-l:env(safe-area-inset-left, 0px); }
html.ktg-in-frame{ --sa-t:0px; --sa-r:0px; --sa-b:0px; --sa-l:0px; }
.site-header{ padding-top:var(--sa-t); }
.wrap{ padding-left:max(24px, var(--sa-l)); padding-right:max(24px, var(--sa-r)); }
footer{ padding-bottom:calc(32px + var(--sa-b)); }
.game-area{ padding:var(--sa-t) var(--sa-r) var(--sa-b) var(--sa-l); }
.game-hud{ top:calc(14px + var(--sa-t)); left:calc(18px + var(--sa-l)); }
.game-actions{ top:calc(12px + var(--sa-t)); right:calc(14px + var(--sa-r)); }
.game-status{ bottom:calc(16px + var(--sa-b)); }
.bet-box{ top:calc(14px + var(--sa-t)); }

/* striscia "Aggiungi alla schermata Home" (solo Safari su iPhone/iPad) e pillola "Aggiornamento disponibile" (js/pwa.js) */
.pwa-strip{ position:fixed; left:12px; right:12px; bottom:calc(12px + var(--ktg-bar-h, 0px) + var(--sa-b)); z-index:450; display:flex; align-items:center; gap:12px; max-width:560px; margin:0 auto; padding:10px 10px 10px 14px; border-radius:var(--radius); background:var(--surface-2); border:1px solid var(--line); box-shadow:0 18px 40px -12px rgba(0,0,0,.7); font-size:12.5px; line-height:1.45; color:var(--ink-dim); }
.pwa-strip img{ width:36px; height:36px; border-radius:8px; flex:0 0 auto; }
.pwa-strip p{ margin:0; flex:1; min-width:0; }
.pwa-strip strong{ color:var(--ink); }
.pwa-strip-close{ flex:0 0 auto; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); font-size:18px; line-height:1; padding:0; }
.pwa-update{ position:fixed; left:50%; top:calc(12px + var(--sa-t)); transform:translateX(-50%); z-index:4000; display:inline-flex; align-items:center; gap:10px; padding:8px 8px 8px 16px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); box-shadow:0 12px 30px -10px rgba(0,0,0,.7); font-size:12.5px; color:var(--ink); white-space:nowrap; }
.pwa-update button{ border:0; border-radius:999px; padding:6px 14px; background:var(--lilac); color:#0D0D0F; font-weight:700; font-size:12px; }
.pwa-strip-close:focus-visible, .pwa-update button:focus-visible{ outline:2px solid var(--lilac); outline-offset:2px; }