:root{
  color-scheme: dark;
  --bg:#0a0b08;
  --panel:#11120d;
  --panel-hi:#191a12;
  --line:#2d2e22;
  --bone:#d9d2ba;
  --dim:#948f78;
  --sick:#c7c15c;
  --rust:#a0501f;
  --blood:#b3261a;
  --blood-text:#ea5a47;
  --gutter:clamp(16px,4vw,32px);
  --f-display:'Anton','Impact','Arial Narrow',sans-serif;
  --f-type:'Special Elite','Courier New',monospace;
  --f-body:'Courier Prime','Courier New',monospace;
  --f-lcd:'VT323','Courier New',monospace;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
body{
  background:var(--bg);color:var(--bone);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  padding-inline:var(--gutter);padding-block:0 4rem;
  position:relative;
}
body::before{ /* grana della pellicola */
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.11;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{ /* vignettatura */
  content:"";position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgba(0,0,0,.65) 100%);
}
code{font-family:var(--f-body);font-weight:700;color:var(--sick);background:#1b1c13;padding:.05em .35em;overflow-wrap:anywhere}
button,input,textarea{font:inherit}
:focus-visible{outline:2px solid var(--sick);outline-offset:3px}

.bar{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:40;
  margin-inline:calc(var(--gutter) * -1);padding:.55rem var(--gutter);
  background:var(--bg);border-bottom:1px solid var(--line);
}
.bar-in{max-width:880px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap}
.logo{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.18em;font-size:.82rem;color:var(--dim)}
.barright{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.sync{font-family:var(--f-type);font-size:.78rem;display:inline-flex;align-items:center;gap:.4rem;color:var(--dim)}
.sync::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dim)}
.sync.ok{color:var(--sick)} .sync.ok::before{background:var(--sick)}
.sync.local,.sync.err{color:var(--blood-text)} .sync.local::before,.sync.err::before{background:var(--blood-text)}
.pipwrap{display:flex;align-items:center;gap:.75rem}
.pipcount{font-family:var(--f-type);font-size:.82rem;color:var(--dim);font-variant-numeric:tabular-nums}
.pips{display:flex;gap:6px}
.pip{width:14px;height:14px;border:2px solid #5b5844}
.pip.done{background:var(--sick);border-color:var(--sick)}
.pip.now{border-color:var(--blood-text);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{background:rgba(234,90,71,.5)}}

.wrap{max-width:880px;margin-inline:auto}
.hero{position:relative;padding-block:clamp(2rem,7vw,4.5rem) 1.5rem}
.hero::before{content:"";position:absolute;inset:-2rem calc(var(--gutter) * -1) auto calc(var(--gutter) * -1);height:22rem;z-index:-1;
  background:radial-gradient(ellipse at 18% 10%,rgba(160,80,31,.28),transparent 62%)}
.eyebrow{font-family:var(--f-type);color:var(--blood-text);letter-spacing:.22em;text-transform:uppercase;font-size:.85rem;margin:0}
h1{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.6rem,16vw,9rem);line-height:.92;letter-spacing:.01em;
  margin:.5rem 0 1.4rem;text-wrap:balance;animation:flick 8s steps(1) infinite;
}
h1 .pi{color:var(--blood-text)}
h1::after{content:"";display:block;height:7px;width:min(62%,430px);background:var(--blood);transform:skewX(-24deg);margin-top:.8rem}
@keyframes flick{0%,89%,100%{opacity:1}90%{opacity:.5}91%{opacity:1}93%{opacity:.3}94%{opacity:1}}
.lede{font-size:1.15rem;max-width:56ch;margin:0 0 1.2rem}
.spec{font-family:var(--f-type);font-size:.88rem;color:var(--dim);letter-spacing:.06em;margin:0 0 2rem}

.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin-bottom:2.2rem}
.cell{background:var(--panel);border:1px solid var(--line);padding:1rem 1.1rem;min-width:0}
.cell.wide{grid-column:1 / -1}
.lab{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;color:var(--dim);margin:0 0 .5rem;font-weight:400}
.big{font-family:var(--f-display);font-size:2.2rem;line-height:1.1;margin:0;overflow-wrap:anywhere;text-transform:uppercase}
.small{font-size:.9rem;margin:.3rem 0 0}
.dim{color:var(--dim)}
.lcd{font-family:var(--f-lcd);font-size:3.2rem;line-height:1;margin:0;color:var(--blood-text);text-shadow:0 0 14px rgba(234,90,71,.55);font-variant-numeric:tabular-nums;background:#050504;display:inline-block;padding:.1rem .6rem;border:1px solid #000}
.entryrow{display:flex;gap:.7rem;flex-wrap:wrap}
.entryrow input{flex:1 1 220px;min-width:0;background:#060605;color:var(--bone);border:2px solid var(--dim);padding:.65rem .8rem;font-family:var(--f-body);font-size:1.05rem}
.entryrow input::placeholder{color:#6f6b58}

.rules{display:grid;gap:.8rem;margin:0 0 2.2rem;padding:0;list-style:none;counter-reset:r}
.rules li{display:grid;grid-template-columns:2.2rem 1fr;gap:.8rem;counter-increment:r}
.rules li::before{content:counter(r);font-family:var(--f-display);font-size:1.7rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--blood-text)}
.h2{font-family:var(--f-type);font-size:1.1rem;text-transform:uppercase;letter-spacing:.2em;color:var(--dim);margin:0 0 1rem;font-weight:400}

.rooms{display:grid;gap:1.3rem}
.room{
  position:relative;background-color:var(--panel);border:1px solid var(--line);scroll-margin-top:5rem;overflow:hidden;
  background-image:
    radial-gradient(circle at 10px 10px,#3b3c2d 2px,transparent 3px),
    radial-gradient(circle at calc(100% - 10px) 10px,#3b3c2d 2px,transparent 3px),
    radial-gradient(circle at 10px calc(100% - 10px),#3b3c2d 2px,transparent 3px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#3b3c2d 2px,transparent 3px);
}
.room-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 1.25rem;padding:1.5rem 1.4rem 1.6rem}
.num{font-family:var(--f-display);font-size:clamp(2.8rem,10vw,4.6rem);line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--dim);font-variant-numeric:tabular-nums}
.room[data-state=open]{border-color:var(--rust);border-left:6px solid var(--blood);box-shadow:0 0 40px rgba(179,38,26,.18)}
.room[data-state=open] .num{-webkit-text-stroke-color:var(--blood-text)}
.room[data-state=done]{border-color:#3d3f23}
.room[data-state=done] .num{-webkit-text-stroke-color:var(--sick)}
.room[data-state=locked]::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(0,0,0,.4) 0 10px,transparent 10px 20px)}
.room.breach{animation:breach 1.1s ease-out}
@keyframes breach{
  0%{transform:translateX(0)}
  8%{transform:translateX(-7px);box-shadow:0 0 70px 10px rgba(179,38,26,.6)}
  16%{transform:translateX(6px)}
  24%{transform:translateX(-3px)}
  32%{transform:translateX(0)}
}
.room-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.8rem;flex-wrap:wrap}
.theme{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--dim);margin:0}
.title{font-family:var(--f-type);font-size:clamp(1.5rem,5vw,2rem);text-transform:uppercase;letter-spacing:.04em;margin:.1rem 0 0;font-weight:400;line-height:1.15}
.pts{font-family:var(--f-type);border:1px solid var(--line);padding:.1rem .6rem;font-size:.9rem;color:var(--dim);white-space:nowrap}
.redact{display:inline-block;height:.9em;background:#2a2b20;vertical-align:-.1em}
.locked-msg{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 0;color:var(--dim)}
.lock{flex:none;color:var(--dim)}
.mission{margin:1rem 0 0;font-size:1.05rem}
.tasks{list-style:none;padding:0;margin:.4rem 0 1rem;display:grid;gap:.7rem}
.tasks label{display:grid;grid-template-columns:1.3rem minmax(0,1fr);gap:.75rem;cursor:pointer}
.tasks input{
  appearance:none;-webkit-appearance:none;margin:.28rem 0 0;width:1.25rem;height:1.25rem;
  border:2px solid var(--dim);background:#060605;display:grid;place-content:center;cursor:pointer;
}
.tasks input:checked{border-color:var(--sick)}
.tasks input:checked::after{content:"\00d7";color:var(--sick);font-size:1.3rem;line-height:1;font-weight:700}
.tasks input:checked + span{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--blood)}
.exit,.warn,.note,.hint{margin:.7rem 0 0;padding:.7rem .9rem;background:var(--panel-hi);border-left:4px solid var(--sick)}
.warn{border-left-color:var(--blood-text)}
.note{border-left-color:var(--dim)}
.hint{border-left-color:var(--rust)}
.exit strong,.warn strong,.note strong,.hint strong{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.12em;font-size:.85rem;font-weight:400}
.warn strong{color:var(--blood-text)} .exit strong{color:var(--sick)} .note strong{color:var(--dim)} .hint strong{color:#e08a52}
.tablewrap{overflow-x:auto;margin:.2rem 0 1rem;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:420px;font-size:.95rem}
th,td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
th{font-family:var(--f-type);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--dim)}
tr:last-child td{border-bottom:0}
.sublist{margin:.2rem 0 1rem;padding-left:1.2rem}
.sublist li{margin:.3rem 0}
.actions{display:flex;align-items:center;gap:.8rem 1rem;flex-wrap:wrap;margin-top:1.3rem}
.hintline{font-size:.88rem;color:var(--dim)}
.btn{
  font-family:var(--f-type);font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;
  background:var(--blood);color:#fff4ee;border:2px solid #000;padding:.7rem 1.4rem;cursor:pointer;
  box-shadow:3px 3px 0 #000;transition:transform .08s,background .15s;
}
.btn:hover{background:#c92d1f}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.btn.ghost{background:transparent;color:var(--bone);border-color:var(--dim)}
.btn.ghost:hover{background:#1d1e15}
.btn.small{font-size:.82rem;padding:.4rem .8rem;box-shadow:none;letter-spacing:.08em}
.confirm{margin-top:1.3rem;padding:1rem;border:2px dashed var(--blood-text);display:flex;flex-wrap:wrap;gap:.8rem}
.confirm p{margin:0;flex:1 1 100%}
.confirm.inline{margin-top:.8rem}

details.room-d summary{
  list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.2rem 1.1rem;align-items:center;padding:1.1rem 1.4rem;
}
details.room-d summary::-webkit-details-marker{display:none}
details.room-d summary:hover{background:#15160f}
.sumtext{display:grid;min-width:0}
.sumside{display:grid;justify-items:end;gap:.3rem}
.stamp{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.08em;color:var(--blood-text);border:3px solid var(--blood-text);padding:.05rem .6rem;transform:rotate(-5deg);font-size:1.15rem;line-height:1.3}
.stamp.ok{color:var(--sick);border-color:var(--sick)}
.took{font-family:var(--f-type);font-size:.88rem;color:var(--dim);font-variant-numeric:tabular-nums}
.done-body{padding:0 1.4rem 1.5rem}

.final{margin-top:2rem;padding:1.6rem 1.4rem 1.8rem;background:var(--panel);border:2px solid var(--sick);box-shadow:0 0 50px rgba(199,193,92,.12);scroll-margin-top:5rem}
.final h2{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.4rem,9vw,4.2rem);line-height:1;margin:.2rem 0 1rem;color:var(--sick)}
.final p{margin:.6rem 0}
.foot{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.88rem;color:var(--dim);display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}

/* plancia organizzatore */
.org{padding-block:clamp(1.5rem,5vw,3rem) 1rem}
.org h1{font-size:clamp(2.6rem,10vw,5rem);margin-bottom:1rem}
.osum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem;margin:0 0 1.2rem}
.osum .cell{padding:.8rem 1rem}
.osum .big{font-size:2rem}
.otools{display:flex;gap:.8rem 1.2rem;flex-wrap:wrap;align-items:center;margin-bottom:1.2rem}
.legend{font-size:.85rem;color:var(--dim);margin:0;flex:1 1 280px}
.sumarea{width:100%;min-height:9rem;background:#060605;color:var(--bone);border:2px solid var(--dim);padding:.7rem;font-family:var(--f-body);font-size:.9rem;margin-bottom:1.2rem}
.pcards{display:grid;gap:1rem}
.pcard{background:var(--panel);border:1px solid var(--line);padding:1rem 1.1rem 1.1rem;min-width:0}
.pcard.needs{border-color:var(--sick);box-shadow:0 0 28px rgba(199,193,92,.1)}
.phead{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;flex-wrap:wrap}
.pname{font-family:var(--f-display);font-size:1.7rem;text-transform:uppercase;line-height:1.1;margin:0;overflow-wrap:anywhere;font-weight:400}
.ptime{font-family:var(--f-type);font-size:.85rem;color:var(--dim);font-variant-numeric:tabular-nums;text-align:right}
.badge{font-family:var(--f-type);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;border:2px solid var(--sick);color:var(--sick);padding:.05rem .5rem;margin-left:.6rem;white-space:nowrap;vertical-align:middle}
.badge.end{border-color:var(--blood-text);color:var(--blood-text)}
.ppips{display:flex;gap:.45rem;flex-wrap:wrap;margin:.8rem 0}
.ppip{width:2.6rem;height:2.6rem;border:2px solid #5b5844;background:transparent;color:var(--dim);font-family:var(--f-type);font-size:1rem;cursor:default;padding:0}
.ppip.lock{opacity:.45}
.ppip.now{border-color:var(--blood-text);color:var(--blood-text);animation:pulse 1.4s ease-in-out infinite}
.ppip.wait{border:2px dashed var(--sick);color:var(--sick);cursor:pointer}
.ppip.ver{background:var(--sick);border-color:var(--sick);color:#0a0b08;cursor:pointer;font-weight:700}
.ppip.wait:hover,.ppip.ver:hover{transform:translateY(-2px)}
.pmeta{margin:.3rem 0 0;font-size:.92rem}
.ptimes{margin:.3rem 0 0;font-size:.85rem;color:var(--dim);font-variant-numeric:tabular-nums}
.pfoot{display:flex;justify-content:flex-end;margin-top:.6rem}
.empty{padding:2rem 1.2rem;border:2px dashed var(--line);color:var(--dim);text-align:center}

@media (max-width:560px){
  .room-in{gap:0 .9rem;padding:1.2rem 1rem 1.3rem}
  details.room-d summary{grid-template-columns:auto minmax(0,1fr);padding:1rem}
  .sumside{grid-column:2;justify-items:start;grid-auto-flow:column;justify-content:start;gap:.9rem;margin-top:.3rem}
  .done-body{padding:0 1rem 1.3rem}
  .ptime{text-align:left}
  .room,.final{scroll-margin-top:7.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- aggiunte per il sito (niente stili inline: la CSP li blocca) ---- */
.redact.w6{width:6ch}.redact.w7{width:7ch}.redact.w8{width:8ch}.redact.w9{width:9ch}.redact.w10{width:10ch}
.lab.mt{margin-top:1.1rem}
.actions.tight{margin-top:.8rem}
.warn.flush{margin:0}
.footbtns{display:flex;gap:.6rem;flex-wrap:wrap}
.entrymsg{margin:.8rem 0 0}
.entrymsg.err{color:var(--blood-text)}
.btn[disabled]{opacity:.55;cursor:wait}
.hint-err{margin:.6rem 0 0;color:var(--blood-text);font-size:.92rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* stati dei pallini: non solo colore (bordo, riempimento, simbolo, tratteggio) */
.ppip{position:relative}
.ppip.lock{background:repeating-linear-gradient(135deg,#1d1e15 0 4px,transparent 4px 8px)}
.ppip.now{border-width:3px}
.ppip.now::after{content:"";position:absolute;left:50%;bottom:3px;width:10px;height:2px;margin-left:-5px;background:currentColor}
.ppip.ver::after{content:"\2713";position:absolute;top:-2px;right:2px;font-size:.7rem;line-height:1}
.ppip.wait::after{content:"?";position:absolute;top:-1px;right:3px;font-size:.7rem;line-height:1}
.ppip.busy{opacity:.6}

.online{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--f-type);font-size:.78rem;color:var(--dim);margin-left:.6rem;vertical-align:middle;letter-spacing:.06em}
.online::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--dim)}
.online.on{color:var(--sick)} .online.on::before{background:var(--sick);border-color:var(--sick)}

/* login plancia */
.login{max-width:30rem}
.login .entryrow input{font-family:var(--f-body)}
.orgbar{display:flex;justify-content:space-between;align-items:center;gap:.8rem;flex-wrap:wrap}
.pfoot .confirm.inline{margin-top:0;flex:1 1 100%}

/* livello non superato entro la mezzanotte: porta chiusa per sempre */
.stamp.fail{color:var(--dim);border-color:var(--dim);text-decoration:line-through;text-decoration-color:var(--blood-text);text-decoration-thickness:3px}
.room[data-state=failed]{border-color:#2d1d18}
.room[data-state=failed] .num{-webkit-text-stroke-color:#5b3a30}
.room[data-state=failed]::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,rgba(0,0,0,.28) 0 10px,transparent 10px 20px)}
.pip.fail{border-color:var(--blood);background:linear-gradient(135deg,transparent 42%,var(--blood-text) 42% 58%,transparent 58%)}
.ppip.fail{border-color:#6b2b20;color:#8a4a3d;text-decoration:line-through;background:repeating-linear-gradient(135deg,#1f1410 0 4px,transparent 4px 8px)}
.ppip.fail::after{content:"\2715";position:absolute;top:-1px;right:3px;font-size:.65rem;line-height:1;text-decoration:none}
.tasks input:disabled{cursor:default;opacity:.55}
.tasks input:disabled + span{cursor:default}
.tasks label:has(input:disabled){cursor:default}

/* plancia: avvio della stanza */
.startbox{background:var(--panel);border:2px solid var(--blood-text);box-shadow:0 0 40px rgba(179,38,26,.15);padding:1.1rem 1.2rem 1.2rem;margin:0 0 1.2rem}
.startbox p{margin:.2rem 0 0;max-width:62ch}
.startbox .actions{margin-top:1rem}
.startline{font-family:var(--f-type);color:var(--sick);letter-spacing:.04em;margin:0 0 1rem}