/* =========================================================
   friend.tv.it — site.css (shared)
   ========================================================= */

/* ---------------- Tokens ---------------- */
:root{
  --ink:#151515;
  --panel: rgba(255,255,255,.80);          /* era #ffffffcc */
  --border:#111;
  --shadow: 0 12px 35px rgba(0,0,0,.25);

  --pink:#ff5ccf;
  --mint:#76ffd2;
  --sky:#71d7ff;
  --lemon:#ffe66e;
  --lav:#c9b3ff;

  --radius:14px;
  --dash:2px dashed rgba(0,0,0,.35);

  --max:1200px;
  --sidebarW: clamp(260px, 32vw, 380px);
  --gap:14px;

  --font: Verdana, Tahoma, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;

   /* regola qui quanto può “respirare” la sidebar */
  --sidebar-min: 240px;
  --sidebar-max: 380px;
  --sidebar-fluid: clamp(var(--sidebar-min), 32vw, var(--sidebar-max));
}

/* ---------------- Base ---------------- */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }

body{
  color:var(--ink);
  font-family:var(--font);
  background:
    radial-gradient(12px 12px at 20px 20px, rgba(255,255,255,.75), rgba(255,255,255,0) 70%) 0 0/40px 40px,
    radial-gradient(10px 10px at 10px 10px, rgba(255,92,207,.16), rgba(255,92,207,0) 70%) 0 0/60px 60px,
    linear-gradient(180deg, #f7f1ff 0%, #eefbff 35%, #fff6f8 100%);
}

img{ max-width:100%; height:auto; }

a{ color:inherit; }
a:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 4px solid rgba(255,92,207,.25);
  outline-offset: 2px;
}

code{
  background:rgba(0,0,0,.06);
  padding:2px 6px;
  border-radius:8px;
  border:1px dashed rgba(0,0,0,.25);
}

/* ---------------- Wrapper ---------------- */
.wrap{
  max-width: var(--max);
  margin-inline:auto;
  padding:18px;
}
@media (max-width:560px){
  .wrap{ padding:12px; }
}

/* ---------------- Layout grid ---------------- */
/* default: main + sidebar dx */
.layout{
  display:grid;
  gap: var(--gap);
  align-items:start;
  grid-template-columns: minmax(0,1fr)   minmax(var(--sidebar-min), var(--sidebar-fluid));
  grid-template-areas: "main sidebar";
}
.layout > main{ grid-area: main; min-width:0; }
.layout > aside,
.layout > .sidebarCol{ grid-area: sidebar; min-width:0; }
.layout > *{ min-width:0; } /* IMPORTANT: niente overflow da textarea/pre */

/* sidebar sx */
.layout--sidebar-left{
 grid-template-columns:
    minmax(var(--sidebar-min), var(--sidebar-fluid))
    minmax(0, 1fr);
  grid-template-areas: "sidebar main";
}
/* breakpoint: quando davvero non ci sta -> 1 colonna */
@media (max-width: 980px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }

  .layout--mobile-sidebar-first{
    grid-template-areas:
      "sidebar"
      "main";
  }
}
/* default: sidebar a colonna (desktop) */
.sidebarCol{
  display:flex;
  flex-direction:column;
  gap: var(--gap);
  min-width:0;
}

/* quando il layout va in 1 colonna: prova a mettere 2 asides affiancati */
@media (max-width: 980px){
  .sidebarCol{
    display:grid;
    gap: var(--gap);

    /* 2 colonne se ci stanno, altrimenti 1 */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

/* super stretto: torna forzatamente 1 colonna, anche se auto-fit tenterebbe */
@media (max-width: 560px){
  .sidebarCol{
    grid-template-columns: 1fr;
  }
}

/* helper */
.full{ width:100%; }
.full-row{ grid-column: 1 / -1; }

/* mobile: 1 colonna */
@media (max-width:1020px){
  .layout{
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "sidebar";
  }
  .layout--mobile-sidebar-first{
    grid-template-areas:
      "sidebar"
      "main";
  }
}

/* ---------------- Topbar ---------------- */
.topbar{
  background:var(--panel);
  border:3px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  margin-bottom: var(--gap);
}

.topbarHeader{
  padding:14px 16px 10px;
  background: linear-gradient(90deg,
    rgba(255,92,207,.25),
    rgba(118,255,210,.25),
    rgba(113,215,255,.25)
  );
  border-bottom:var(--dash);
}
.siteTitle{
  font-weight:1000;
  font-size:18px;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.tagline{
  margin-top:6px;
  font-size:12px;
  opacity:.9;
}

/* Nav pills */
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 14px;
  background: rgba(255,255,255,.65);
}
.nav a{
  text-decoration:none;
  font-weight:900;
  color:#000;
  border:2px solid #000;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow:2px 2px 0 #000;
  display:inline-block;
}
.nav a:active{ transform:translate(2px,2px); box-shadow:0 0 0 #000; }

/* Marquee */
.marquee{
  border-top:var(--dash);
  background: rgba(255,255,255,.65);
  padding:8px 0;
  font-size:12px;
  overflow:hidden;
  white-space:nowrap;
}
.marquee span{
  display:inline-block;
  padding-left:100%;
  animation: scroll 16s linear infinite;
}
@keyframes scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}
@media (prefers-reduced-motion: reduce){
  .marquee span{ animation:none; padding-left:0; }
}

/* ---------------- Boxes ---------------- */
.box{
  background:var(--panel);
  border:3px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  min-width:0px;
  margin-bottom: var(--gap);
}
.box .head{
  padding:10px 12px;
  background: linear-gradient(90deg, rgba(201,179,255,.35), rgba(255,230,110,.35));
  border-bottom:var(--dash);
  font-weight:1000;
  font-size:13px;
}
.box .body{
  padding:12px;
  font-size:12px;
  line-height:1.35;
  min-width:0;
}

/* mini head “interno” (usalo ovunque invece di riscriverlo inline) */
.subhead{
  margin-top:12px;
  padding:10px 12px;
  border-top:var(--dash);
  border-bottom:var(--dash);
  background: linear-gradient(90deg, rgba(255,230,110,.25), rgba(201,179,255,.25));
  font-weight:1000;
  font-size:12px;
}

/* ---------------- Forms ---------------- */
label{
  display:block;
  font-size:11px;
  opacity:.85;
  margin:10px 0 6px;
}

input, select, textarea{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:2px solid #000;
  background:#fff;
  font:inherit;
}

input[type="color"]{ height:40px; padding:6px; }

textarea{
  min-height:140px;
  resize:vertical;
  font-family:var(--mono);
  font-size:12px;
}

/* Griglie form */
.row{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.row3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:10px; }
@media (max-width:560px){
  .row, .row3{ grid-template-columns: 1fr; }
}

.hint{ font-size:11px; opacity:.85; margin-top:8px; }

/* ---------------- Buttons ---------------- */
.btnrow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.btn{
  cursor:pointer;
  user-select:none;
  border:2px solid #000;
  border-radius:12px;
  padding:8px 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  font-weight:1000;
  box-shadow:2px 2px 0 #000;
}
.btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 #000; }

.btn.preset{
  background: linear-gradient(180deg, rgba(255,230,110,.85), rgba(255,255,255,.75));
}

/* code outputs */
.codeOut:focus{ outline: 4px solid rgba(255,92,207,.25); }

/* ---------------- Shared Stage ---------------- */
.stage{
  padding:14px;
  background:
    radial-gradient(900px 450px at 70% 30%, rgba(113,215,255,0.18), transparent 60%),
    radial-gradient(900px 600px at 35% 70%, rgba(255,92,207,0.14), transparent 60%),
    rgba(255,255,255,.65);
  border:3px solid #000;
  border-radius:14px;
  box-shadow:6px 6px 0 #000;
  position:relative;
  overflow:auto;
  min-height:420px;
}

/* ---------------- Footer base ---------------- */
.siteFooter{
  margin-top:var(--gap);
  padding:12px 14px;
  background:var(--panel);
  border:3px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.siteFooter .footerRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
}

.badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border:2px solid #000;
  border-radius:999px;
  background: rgba(255,255,255,.75);
  box-shadow:2px 2px 0 #000;
  font-weight:900;
  text-decoration:none;
  color:#000;
}

/* Extras */
.blink{ animation: blink 1s steps(2,end) infinite; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .blink{ animation:none; }
}

/* ---------------- Index: nostalgia pills + toys ---------------- */
.nostalgia-links{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.nostalgia-links .pill{
  color:#000;
  text-decoration:none;
  font-weight:900;
  border:2px solid #000;
  padding:6px 10px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.55));
  box-shadow:2px 2px 0 #000;
  display:inline-block;
}
.nostalgia-links .pill:active{ transform:translate(2px,2px); box-shadow:0 0 0 #000; }
.nostalgia-links .pill.shy{ opacity:.85; }
.nostalgia-links .pill.shy:hover{ opacity:1; }

.footer-toys{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-top:var(--dash);
  background: rgba(255,255,255,.65);
}

.footer-toys .phrase{
  display:flex;
  gap:8px;
  align-items:baseline;
  flex-wrap:wrap;
  font-size:12px;
}
.footer-toys .phrase .label{ font-weight:900; opacity:.9; }
.footer-toys .phrase .value{
  font-weight:900;
  padding:2px 8px;
  border:1px dashed rgba(0,0,0,.35);
  border-radius:999px;
  background: rgba(255,255,255,.55);
}

.footer-toys .toyBtns{ display:flex; gap:10px; align-items:center; }

/* bottone “segreto” */
.secret8bit{
  border:2px solid #000;
  border-radius:10px;
  padding:6px 10px;
  font-weight:1000;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.65));
  box-shadow:2px 2px 0 #000;

  opacity:0;
  transform: translateY(2px) scale(.98);
  pointer-events:none;
  transition: 150ms ease;
}
.footer-toys:hover .secret8bit{
  opacity:.9;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}

/* ---------------- 8-bit mode ---------------- */
body.mode-8bit{
  image-rendering: pixelated;
  filter: contrast(1.15) saturate(1.1);
}
body.mode-8bit *{
  border-radius: 0 !important;
  text-shadow: none !important;
}
body.mode-8bit .topbar,
body.mode-8bit .box,
body.mode-8bit .stage{
  box-shadow: 6px 6px 0 #000 !important;
  border-width: 3px !important;
}
body.mode-8bit,
body.mode-8bit input,
body.mode-8bit select,
body.mode-8bit textarea,
body.mode-8bit button{
  font-family: var(--mono) !important;
  letter-spacing: .2px;
}
/* scanlines */
body.mode-8bit::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  opacity: .10;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.20) 0px,
    rgba(0,0,0,.20) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  z-index: 9999;
}

/* ---------------- Chaos mode ---------------- */
body.chaos-on{ filter: saturate(1.05) contrast(1.05); }

body.chaos-bg-a{ /* default-ish */ }
body.chaos-bg-b{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, rgba(0,0,0,0) 2px 6px),
    radial-gradient(900px 500px at 70% 30%, rgba(113,215,255,0.22), transparent 60%),
    radial-gradient(900px 700px at 30% 70%, rgba(255,92,207,0.18), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f2fff9 40%, #fff0fb 100%);
}
body.chaos-bg-c{
  background:
    linear-gradient(90deg, rgba(118,255,210,.20), rgba(255,92,207,.18), rgba(113,215,255,.18)),
    repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 6px, rgba(0,0,0,0) 6px 12px),
    #fff;
}

#chaosLayer{
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
}
#chaosLayer::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.08) 0px,
    rgba(0,0,0,.08) 1px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0) 5px
  );
  opacity:.35;
  mix-blend-mode:multiply;
}

#chaosNoise{
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.35) 0 1px, transparent 2px);
  background-size: 120px 120px;
  animation: chaos-noise 600ms steps(2,end) infinite;
  mix-blend-mode:multiply;
}
@keyframes chaos-noise{
  0%{ transform: translate(0,0); filter: blur(0px); }
  50%{ transform: translate(6px,-4px); filter: blur(.2px); }
  100%{ transform: translate(-5px,3px); filter: blur(0px); }
}

.chaos-glitch{
  position:absolute;
  font-family: var(--mono);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
  color:#111;
  background: rgba(255,255,255,.75);
  border: 2px solid #000;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 3px 3px 0 #000;
  white-space: pre;
  opacity:.95;
  transform: rotate(var(--rot, 0deg));
}
.chaos-glitch::before,
.chaos-glitch::after{
  content: attr(data-txt);
  position:absolute;
  left: 10px;
  top: 8px;
  opacity:.8;
  mix-blend-mode:multiply;
}
.chaos-glitch::before{
  transform: translate(-2px, 0);
  color: rgba(255, 92, 207, .85);
  clip-path: inset(0 0 55% 0);
  animation: chaos-glitch 700ms infinite linear;
}
.chaos-glitch::after{
  transform: translate(2px, 0);
  color: rgba(113, 215, 255, .9);
  clip-path: inset(45% 0 0 0);
  animation: chaos-glitch 900ms infinite linear reverse;
}
@keyframes chaos-glitch{
  0%{ filter: blur(0px); }
  20%{ filter: blur(.2px); }
  60%{ filter: blur(.35px); }
  100%{ filter: blur(.2px); }
}

.chaos-popup{
  position:absolute;
  width: 320px;
  border: 2px solid #000;
  border-radius: 10px;
  background: rgba(255,255,255,.92);
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  pointer-events: auto;
}
.chaos-popup .bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 7px 8px;
  background: linear-gradient(90deg, #76ffd2, #ff5ccf);
  border-bottom: 1px solid rgba(0,0,0,.25);
  font-weight: 900;
  font-size: 12px;
}
.chaos-popup .x{
  width: 18px; height: 18px;
  display:grid; place-items:center;
  border: 1px solid rgba(0,0,0,.65);
  border-radius: 4px;
  background: rgba(255,255,255,.85);
  cursor: pointer;
}
.chaos-popup .body{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.25;
}
.chaos-popup .icon{ font-size: 24px; display:grid; place-items:center; }
.chaos-popup .btnrow{ padding: 0 12px 12px; display:flex; justify-content:flex-end; }
.chaos-popup button{
  border: 2px solid #000;
  border-radius: 10px;
  padding: 7px 12px;
  background: #efefef;
  font-weight: 900;
  cursor:pointer;
}
@media (prefers-reduced-motion: reduce){
  #chaosNoise, .chaos-glitch::before, .chaos-glitch::after{ animation:none !important; }
}



/* mini label "ribbit" che appare e svanisce */
.ribbit-pop{
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 9999999;
  pointer-events: none;

  padding: 6px 10px;
  font: 900 12px/1.1 Tahoma, Verdana, Arial, sans-serif;
  color: #111;
  background: rgba(255,255,255,.92);
  border: 2px solid #000;
  border-radius: 999px;
  box-shadow: 2px 2px 0 #000;
  white-space: nowrap;

  animation: ribbitFloat 650ms ease-out forwards;
}

@keyframes ribbitFloat{
  0%   { opacity: 0; transform: translate(-50%, -120%) scale(.92); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-120% - 30px)) scale(1); }
}

/* ===== Liminal Access Dialog ===== */
#liminalAccess{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
#liminalAccess.is-on{ display:flex; }

#liminalAccess .veil{
  position:absolute; inset:0;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
}

#liminalAccess .win{
  position: relative;
  width: min(520px, calc(100vw - 24px));
  border: 3px solid #000;
  border-radius: 14px;
  background: rgba(255,255,255,.92);
  box-shadow: 8px 8px 0 #000;
  overflow: hidden;
}

#liminalAccess .bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  background: linear-gradient(90deg, rgba(118,255,210,.85), rgba(255,92,207,.70));
  border-bottom: 2px dashed rgba(0,0,0,.35);
  font-weight: 1000;
}
#liminalAccess .title{
  font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  letter-spacing: .4px;
}
#liminalAccess .body{
  padding: 12px;
  font-size: 12px;
  line-height: 1.35;
}
#liminalAccess .actions{
  padding: 0 12px 12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}
#liminalAccess .btnx{
  border:2px solid #000;
  border-radius:10px;
  padding: 7px 12px;
  background: rgba(255,255,255,.85);
  font-weight: 1000;
  cursor:pointer;
  box-shadow: 2px 2px 0 #000;
}
#liminalAccess .btnx:active{ transform: translate(2px,2px); box-shadow:0 0 0 #000; }

/* “ribbit” tag */
.voidTag{
  position: fixed;
  left: 0; top: 0;
  transform: translate(-50%,-50%);
  z-index: 999998;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.85);
  box-shadow: 2px 2px 0 #000;
  font-weight: 1000;
  font-size: 12px;
  pointer-events:none;
  opacity: 0;
  animation: voidPop 650ms ease-out forwards;
}
@keyframes voidPop{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.9); filter: blur(.2px); }
  20%{ opacity:1; transform: translate(-50%,-55%) scale(1); }
  100%{ opacity:0; transform: translate(calc(-50% + 18px), calc(-50% - 20px)) scale(.95); }
}