:root{
  --red:#D52A2A;
  --teal:#8b056c;
  --dark:#141414;
  --darker:#0E0E0E;
  --text:#EDEDED;
  --yellow:#FFE94A;
  --green:#4CFF72;
  --acid:#E7E901;
}

/* =====================
   RESET / BASE
   ===================== */
*{ box-sizing:border-box; }

html, body{ width:100%; }

body{
  margin:0;

  /* fondo "carta incollata" (desktop); su mobile viene disattivato */
  background-image:url("/bkg.jpeg");
  background-repeat:repeat;
  background-position:top left;
  background-attachment:fixed;
  background-color:#EDEDED;

  font-family:"Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  color:var(--text);

  /* evita il "sito rotto" da overflow orizzontale */
  overflow-x:hidden;
}

img, video, canvas, svg{ max-width:100%; height:auto; }

/* =====================
   WRAP / FRAME
   ===================== */
.wrap{ max-width:1024px; margin:28px auto; padding:0 12px; }

.frame{
  border:10px solid var(--teal);
  background:#c043a2;
  padding:14px;
  box-shadow:0 10px 0 rgba(0,0,0,.25);
}

/* =====================
   FONTS
   ===================== */
@font-face{
  font-family:"bahn";
  src:url("/font/BAHNSCHRIFT.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"tbf";
  src:url("/font/tbf.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =====================
   HEADER
   ===================== */
.header{
  border:6px solid rgba(247,54,238,.7);
  background:#71EB0B;
}

.brand{ padding:18px 18px 10px; }

.brand h1{
  margin:0;
  font-family:"bahn", ui-monospace, monospace;
  font-style:italic;
  font-size:64px;
  letter-spacing:.06em;
  color:var(--acid);
  text-shadow:3px 3px 0 rgba(0,0,0,.35);
  overflow-wrap:anywhere;
}

.tagline{
  margin:0;
  padding:10px 18px 12px;
  background:var(--red);
  color:#fff;
  font-size:20px;
  letter-spacing:.06em;
  border-top:4px solid rgba(0,0,0,.65);
}

/* TICKER */
.ticker{
  font-family:"bahn";
  overflow:hidden;
  white-space:nowrap;
  background:#101010;
  border-top:4px solid rgba(0,0,0,.65);
  border-bottom:4px solid rgba(0,0,0,.65);
}

.ticker-track{
  display:inline-block;
  padding:8px 0;
  animation: scroll-left 18s linear infinite;
}

.ticker-track span{
  display:inline-block;
  margin-right:48px;
  font-size:18px;
  letter-spacing:.12em;
  color:#ffffff;
}

@keyframes scroll-left{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}

/* =====================
   LAYOUT
   ===================== */
.grid{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:14px;
  margin-top:14px;
}

/* =====================
   SIDEBAR / NAV
   ===================== */
.side{
  border:6px solid rgba(0,0,0,.75);
  background:var(--darker);
  padding:10px;
}

.nav a{
  display:block;
  padding:10px;
  margin:8px 0;
  text-decoration:none;
  color:var(--text);
  border:4px solid rgba(255,255,255,.14);
  background:#121212;
  font-size:18px;
}

.nav a::before{ content:"→ "; color:var(--yellow); font-weight:900; }

.nav a:hover{ border-color:rgba(255,255,255,.35); background:#0b0b0b; }

.nav a.active{
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 2px rgba(185,255,0,.25);
}

/* RADIO */
.radio-slot{ position:relative; z-index:5; pointer-events:auto; }
.radio-hint{ margin:10px 0 0; font-size:12px; letter-spacing:.02em; color:rgba(255,255,255,.75); }

#radioSwitch{
  display:block;
  position:relative;
  z-index:6;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer !important;
  pointer-events:auto !important;
  width:100%;
}

#radioSwitch img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  cursor:pointer !important;
  pointer-events:auto !important;
}

.vomito-link{ display:block; margin-top:12px; text-align:center; }
.vomito-link img{ max-width:100%; height:auto; display:block; margin:0 auto; cursor:pointer; }

/* =====================
   MAIN
   ===================== */
.main{
  border:6px solid rgba(0,0,0,.75);
  background:var(--dark);
  /* niente overflow:hidden: rompe sticky e può troncare contenuti su mobile */
  overflow:visible;
}

.main-hd{
  padding:10px 12px;
  background:#101010;
  border-bottom:4px solid rgba(255,255,255,.1);
  color:var(--yellow);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:20px;
  font-weight:900;
}

.main-hd.main-hd-sub{ margin-top:12px; font-size:18px; }

.main-bd{ padding:14px; }

.list {font-family: "bahn"; font-style: italic;}
.sub {font-family: "bahn"; font-style: italic;}

/* =====================
   COMPONENTS
   ===================== */
.collage{
  border:4px solid rgba(255,255,255,.22);
  background:#0c0c0c;
  overflow:hidden;
  margin-bottom:12px;
}

.collage img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  image-rendering:pixelated;
}

.long-text{
  max-width:68ch;
  margin:16px auto;
  text-align:justify;
  text-align-last:left;
  text-justify:inter-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;
  line-height:1.75;
  text-wrap:pretty;
  overflow-wrap:break-word;
  word-break:normal;
}

.list{
  border:4px solid rgba(255,255,255,.22);
  background:#0f0f0f;
  padding:12px;
}

.list a{
  display:block;
  padding:10px 8px;
  margin:6px 0;
  text-decoration:none;
  color:var(--text);
  font-size:18px;
  border-left:6px solid transparent;
}

.list a::before{ content:"▶ "; color:var(--green); font-weight:900; }

.list a:hover{ background:rgba(255,255,255,.06); border-left-color:rgba(76,255,114,.65); }

.list a .sub{
  display:block;
  color:rgba(255,255,255,.70);
  font-size:13px;
  margin-top:4px;
  letter-spacing:.02em;
}

/* =====================
   STORY
   ===================== */
.story{
  border:4px solid rgba(255,255,255,.22);
  background:#0f0f0f;
  padding:16px;
}

.story-image{
  display:block;
  width:100%;
  object-fit:cover;
  margin-bottom:16px;
  border:4px solid rgba(255,255,255,.22);
  image-rendering:pixelated;
}

.story-title{ margin:0 0 8px; font-size:28px; letter-spacing:.04em; color:#fff; }

.story-meta, .meta{
  margin:0 0 14px;
  font-size:13px;
  color:rgba(255,255,255,.72);
  border-left:6px solid rgba(76,255,114,.65);
  padding-left:10px;
  line-height:1.6;
}

.story-text{
  font-family:"Courier New", Courier, ui-monospace, monospace;
  color:rgba(255,255,255,.92);
  font-size:18px;
  line-height:1.75;
  text-rendering:optimizeLegibility;

  max-width:68ch;
  margin:0 auto;

  text-align:justify;
  text-align-last:left;
  text-justify:inter-word;

  hyphens:auto;
  -webkit-hyphens:auto;
  -ms-hyphens:auto;

  overflow-wrap:break-word;
  word-break:normal;

  text-wrap:pretty;
}

.story-text p{ margin:0 0 14px; }

.story-text > p{
  text-indent:1.8em;
}

/* niente rientro sul primo paragrafo della pagina */
.story-text > p:first-of-type{
  text-indent:0;
}



/* =====================
   PAGER
   ===================== */
.story-pager{ margin-top:10px; }

.pager-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:12px 0;
  padding:10px 12px;
  border:4px solid rgba(255,255,255,.18);
  background:#101010;
}

.pager-btn{
  appearance:none;
  border:5px solid rgba(255,255,255,.22);
  background:var(--teal);
  color:#ffffff;
  /* Usa un font simboli affidabile per frecce (alcuni font "di marca" hanno glifi sbilanciati) */
  font-family:"Segoe UI Symbol","Apple Symbols","Noto Sans Symbols2","Noto Sans Symbols","DejaVu Sans","bahn", ui-monospace, monospace;
  font-weight:900;

  /* un singolo glifo: niente tracking che lo sposta */
  letter-spacing:0;

  min-width:92px;
  height:66px;

  /* centratura davvero solida (per testo e SVG) */
  display:flex;
  align-items:center;
  justify-content:center;

  padding:0;
  font-size:34px;
  line-height:1;
  text-align:center;
  cursor:pointer;
}

/* SVG frecce: dimensione e centratura pulita */
.pager-btn svg{
  width:30px;
  height:30px;
  display:block;
}

.pager-btn:hover{ border-color:rgba(255,255,255,.45); box-shadow:inset 0 0 0 3px rgba(255,233,1,.18); }

.pager-counter{
  min-width:100px;
  text-align:center;
  font-family:"bahn", ui-monospace, monospace;
  font-size:16px;
  letter-spacing:.14em;
  color:rgba(255,255,255,.85);
}

/* =====================
   FOOTER
   ===================== */
.colophon{
  font-size:20px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top:14px;
  border:6px solid rgba(0,0,0,.75);

  background-image:url("/static.png");
  background-repeat:repeat;
  background-position:center;

  color:#ffffff;
  padding:14px 16px;
  font-family:"Courier New", Courier, monospace;
  line-height:1.45;

  text-shadow:
    0 2px 2px rgba(0,0,0,1),
    0 4px 6px rgba(0,0,0,0.95),
    0 1px 0 rgba(0,0,0,1);
}

.colophon p{
  background:rgba(0,0,0,0.3);
  padding:8px 12px;
  display:inline-block;
}

/* =====================
   RESPONSIVE (tablet)
   ===================== */
@media (max-width:860px){
  .brand h1{ font-size:46px; }
  .tagline{ font-size:16px; }
  .grid{ grid-template-columns:1fr; }
  .nav a{ font-size:16px; }
}

/* =====================
   MOBILE (smartphone)
   ===================== */
@media (max-width:680px){
body{
  background-attachment:scroll;
  font-size:18px;
  line-height:1.85;
}

/* contenitore pagina: allarga il testo il più possibile */
.wrap{ margin:0; padding:0; max-width:none; }
.frame{ padding:0; border-width:8px; overflow-x:hidden; }
.header{ border-width:4px; }

.brand{ padding:14px 14px 8px; }
.brand h1{ font-size:clamp(30px, 10vw, 44px); letter-spacing:.04em; }
.tagline{ font-size:14px; padding:8px 14px 10px; }

.ticker{ display:none; }

/* Sidebar: su mobile diventa “barra” con menu + GIF sotto */
.side{
  border-width:0;
  background:transparent;
  padding:0;
  margin:0;
}

/* MENU orizzontale (scrollabile) */
.nav{
  display:flex;
  flex-wrap:nowrap;
  gap:8px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding:10px 10px 8px;
  margin:0;
  background:transparent;
  border:0;
}

.nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  margin:0;
  padding:10px 12px;
  border-width:3px;
  border-radius:12px;
  font-size:15px;
  white-space:nowrap;
  scroll-snap-align:start;
}

.nav a::before{ content:""; }

/* Riga GIF sotto al menu */
.radio-slot{
  display:flex;
  align-items:center;
  justify-content:center !important; /* forza centratura */
  flex-wrap:nowrap;
  gap:14px;

  padding:0 10px 12px;
  margin:0;

  width:100%;
  box-sizing:border-box;
  overflow:visible; /* evita tagli locali */
}

/* via testo/hint tra le GIF */
.radio-hint{ display:none !important; }

.radio-switch,
.vomito-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

/* grandezza media (visibili senza invadere) */
#radioSwitch img,
.radio-switch__gif,
.vomito-link img{
      width:clamp(120px, 34vw, 180px);
      height:auto;
      display:block;
      margin:0;
      max-width:100%;
    }

.main{ border-width:4px; }
.main-hd{ font-size:16px; padding:10px 12px; }
.main-hd.main-hd-sub{ font-size:16px; }

.main-bd{ padding:10px; }

.story{
  border:0;
  padding: 0;
  background:#0f0f0f;
}

.story p{
  text-indent:1.8em;
  margin:0;
}

.collage{ border-width:3px; border-radius:12px; }

.story-text{
  padding:0 10px 10px;
}

/* Capoverso: rientro prima riga */
.story-text p,
[data-story-content] p{
  text-indent: 1.8em;
}

/* opzionale: niente rientro sul primo paragrafo della pagina */
.story-text p:first-child,
[data-story-content] p:first-child{
  text-indent: 0;
}

.colophon{ font-size:16px; padding:12px; border-width:4px; }


/* impedisce che i wrapper “tirino” e spingano ai bordi */
.radio-switch,
.vomito-link{
  flex:0 0 auto !important;
  width:auto !important;
  margin:0 !important;
}
}

/* =====================
   ANTI-OVERFLOW HELPERS
   (evita layout "rotto" su mobile e grid/flex che sfondano)
   ===================== */
.grid > *{ min-width: 0; }                 /* importantissimo in CSS Grid */
.nav a, .list a{ overflow-wrap:anywhere; } /* link/titoli lunghi non sfondano */


.lightbox-prev,
.lightbox-next{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px;
  height:64px;
  border-radius:14px;
  border:4px solid rgba(255,255,255,.18);
  background:#121212;
  color:#fff;
  font-family:"Courier New", Courier, monospace;
  font-size:42px;
  line-height:1;
  cursor:pointer;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.95;
}

.lightbox-prev{ left:10px; }
.lightbox-next{ right:10px; }

@media (max-width:680px){
  .lightbox-prev, .lightbox-next{
    width:42px;
    height:58px;
    font-size:40px;
  }
}

/* =====================
   GALLERY / MODAL
   ===================== */

html.is-modal-open,
html.is-modal-open body{
  overflow:hidden;
}

.thumb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:12px;
  padding:6px;
}

.thumb{
  margin:0;
  border:4px solid rgba(255,255,255,.14);
  background:#121212;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 0 rgba(0,0,0,.18);
  cursor:pointer;
  user-select:none;
}

.thumb img{
  width:100%;
  height:140px;
  object-fit:cover;
  display:block;
}

.gallery-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:18px;
}
.gallery-overlay[hidden]{ display:none !important; }

.gallery-full{
  max-width:min(1100px, 92vw);
  max-height:86vh;
  border-radius:14px;
  border:4px solid rgba(255,255,255,.16);
  box-shadow:0 10px 0 rgba(0,0,0,.25);
}

.gallery-close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius:12px;
  border:3px solid rgba(255,255,255,.22);
  background:rgba(20,20,20,.7);
  color:#fff;
  font-size:28px;
  line-height:1;
  cursor:pointer;
}

.gallery-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  border-radius:14px;
  border:3px solid rgba(255,255,255,.22);
  background:rgba(20,20,20,.7);
  color:#fff;
  font-size:34px;
  cursor:pointer;
}

.gallery-prev{ left:14px; }
.gallery-next{ right:14px; }

@media (max-width: 520px){
  .gallery-nav{ width:46px; height:46px; font-size:30px; }
}