/* =========================================================
   PAOLO-OS 3.1 — foglio di stile
   Tutto a mano, niente framework. Griglia da 4px, palette
   fissa a 12 colori, bordi smussati come si usava.
   ========================================================= */

:root{
  --sky-1:#1a1033; --sky-2:#3b2a5e; --sky-3:#8a3f7a; --sky-4:#d96a8a;
  --ink:#241542;   --ink-2:#4a3a63;
  --face:#e8dccb;  --face-hi:#fffaf0; --face-lo:#9d8d79; --face-sh:#6b5d52;
  --pink:#ff6ec7;  --cyan:#4be3d6;   --gold:#ffd166;   --cream:#ffeecf;
  --mono:"Courier New",Courier,"DejaVu Sans Mono",monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--sky-1); color:var(--cream);
  font-family:var(--mono); font-size:15px; line-height:1.5;
  overflow:hidden; -webkit-font-smoothing:none;
  -webkit-tap-highlight-color:transparent;
}
canvas{display:block; image-rendering:pixelated; image-rendering:crisp-edges}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

/* ---- velo CRT: righe di scansione + vignetta ---- */
#crt{
  position:fixed; inset:0; z-index:9000; pointer-events:none;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px),
    radial-gradient(120% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.42) 100%);
  mix-blend-mode:multiply;
}

/* =========================================================
   AVVIO
   ========================================================= */
#boot{
  position:fixed; inset:0; z-index:500;
  background:#0d0820; display:flex; align-items:center; justify-content:center;
  padding:24px; cursor:pointer;
}
.boot-in{width:100%; max-width:620px}
#bootTx{
  font-family:var(--mono); font-size:clamp(11px,2.9vw,15px); line-height:1.85;
  color:#8fe3a0; text-shadow:0 0 8px rgba(143,227,160,.45);
  white-space:pre-wrap; word-break:break-word;
}
#bootHint{
  margin-top:26px; font-size:clamp(11px,2.9vw,15px); color:var(--gold);
  text-shadow:0 0 8px rgba(255,209,102,.4);
}
.cur{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* =========================================================
   SCRIVANIA
   ========================================================= */
#desk{position:fixed; inset:0; z-index:10}
#wall{position:absolute; inset:0; width:100%; height:100%}

#icons{
  position:absolute; inset:14px 14px 62px 14px;
  display:grid; grid-template-columns:repeat(auto-fill,84px);
  grid-auto-rows:96px; gap:6px; align-content:start;
}
.ico{
  display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:8px 4px 6px; border:2px solid transparent; text-align:center;
}
.ico canvas{width:44px; height:44px; flex:none}
.ico span{
  font-size:11px; letter-spacing:.02em; color:var(--cream);
  text-shadow:1px 1px 0 rgba(0,0,0,.85); word-break:break-all; line-height:1.35;
}
.ico:hover,.ico:focus-visible{border-color:rgba(255,238,207,.5); outline:none}
.ico:active{background:rgba(255,110,199,.22)}
.ico.locked canvas{filter:saturate(.5) brightness(.85)}

/* =========================================================
   FINESTRE
   ========================================================= */
.win{
  position:absolute; display:flex; flex-direction:column;
  background:var(--face); color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:
    inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo),
    5px 5px 0 rgba(13,8,32,.55);
}
.tb{
  display:flex; align-items:center; gap:8px; flex:none;
  height:30px; padding:0 4px 0 8px;
  background:linear-gradient(90deg,var(--ink) 0%,#5b3a86 60%,var(--pink) 100%);
  color:var(--cream); cursor:grab; user-select:none;
}
.win.drag .tb{cursor:grabbing}
.tbT{font-size:12.5px; letter-spacing:.06em; flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.tbX{
  width:22px; height:20px; flex:none; line-height:1;
  background:var(--face); color:var(--ink); font-size:12px; font-weight:700;
  border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
}
.tbX:active{box-shadow:inset -1px -1px 0 var(--face-hi), inset 1px 1px 0 var(--face-lo)}
.wb{flex:1; overflow:auto; padding:14px 15px 16px; font-size:13.5px; line-height:1.72}
.wb::-webkit-scrollbar{width:14px}
.wb::-webkit-scrollbar-track{background:#cabfae}
.wb::-webkit-scrollbar-thumb{background:var(--face); border:2px solid var(--ink)}

.wb p+p{margin-top:11px}
.rule{color:var(--face-sh); letter-spacing:-.06em; overflow:hidden; white-space:nowrap}
.dim{color:var(--ink-2)}
.hi{color:#a3247e; font-weight:700}
.sig{margin-top:16px; text-align:right; color:var(--ink-2)}
.log{font-size:12.5px; line-height:1.95}
.log b{color:#a3247e; font-weight:700}

.fld{
  width:100%; margin:12px 0 10px; padding:9px 10px;
  font:inherit; font-size:15px; letter-spacing:.28em; text-align:center;
  background:#fffaf0; color:var(--ink); border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(107,93,82,.3);
}
.fld:focus{outline:3px solid var(--pink); outline-offset:1px}
.btn{
  padding:9px 18px; font-size:13px; letter-spacing:.08em;
  background:var(--face); color:var(--ink); border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo);
}
.btn:active{box-shadow:inset -2px -2px 0 var(--face-hi), inset 2px 2px 0 var(--face-lo)}
.btn+.btn{margin-left:8px}
.err{margin-top:10px; min-height:20px; color:#b4243c; font-size:12.5px}
.ok{color:#1f7a4d}
.center{text-align:center}
.shot{display:block; width:100%; max-width:300px; margin:6px auto 12px; height:auto}
.bars{display:flex; align-items:flex-end; gap:4px; height:56px; margin:14px 0 4px; justify-content:center}
.bars i{width:9px; background:var(--pink); height:6px; display:block}

/* =========================================================
   BARRA + MENU
   ========================================================= */
#bar{
  position:absolute; left:0; right:0; bottom:0; height:46px; z-index:400;
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background:var(--face); border-top:3px solid var(--ink);
  box-shadow:inset 0 2px 0 var(--face-hi);
}
#startBtn{
  display:flex; align-items:center; gap:7px; flex:none;
  padding:7px 13px; font-size:12.5px; font-weight:700; letter-spacing:.08em;
  color:var(--ink); background:var(--face); border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo);
}
#startBtn.on,#startBtn:active{box-shadow:inset -2px -2px 0 var(--face-hi), inset 2px 2px 0 var(--face-lo)}
.sq{width:12px; height:12px; background:var(--pink); box-shadow:2px 2px 0 var(--cyan)}
#tasks{flex:1; display:flex; gap:6px; overflow:hidden}
#tasks button{
  max-width:150px; padding:6px 11px; font-size:11.5px; color:var(--ink);
  background:var(--face); border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 var(--face-hi), inset -1px -1px 0 var(--face-lo);
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
#clock{
  flex:none; padding:6px 11px; font-size:12px; color:var(--ink);
  border:2px solid var(--face-lo); box-shadow:inset 1px 1px 0 rgba(107,93,82,.22);
}
#menu{
  position:absolute; left:10px; bottom:52px; z-index:420;
  display:flex; min-width:236px; background:var(--face);
  border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 var(--face-hi), 5px 5px 0 rgba(13,8,32,.55);
}
.menu-side{
  flex:none; width:26px; writing-mode:vertical-rl; transform:rotate(180deg);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(0deg,var(--ink),var(--pink));
  color:var(--cream); font-size:12px; letter-spacing:.22em; padding:10px 0;
}
#menuList{list-style:none; flex:1; padding:5px}
#menuList button{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 11px; font-size:12.5px; color:var(--ink); text-align:left;
}
#menuList canvas{width:20px; height:20px; flex:none}
#menuList button:hover,#menuList button:focus-visible{background:var(--ink); color:var(--cream); outline:none}

/* =========================================================
   SORPRESA
   ========================================================= */
#reveal{position:fixed; inset:0; z-index:800; background:var(--sky-1)}
#revealC{width:100%; height:100%}
#revealBar{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
#revealBar button{
  padding:10px 16px; font-size:12px; letter-spacing:.08em;
  color:var(--ink); background:var(--face); border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 var(--face-hi), inset -2px -2px 0 var(--face-lo);
}
#revealBar button:active{box-shadow:inset -2px -2px 0 var(--face-hi), inset 2px 2px 0 var(--face-lo)}

/* =========================================================
   SCHERMI PICCOLI
   ========================================================= */
@media (max-width:760px){
  #crt{background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.1) 0 1px,transparent 1px 4px),
    radial-gradient(130% 100% at 50% 50%,transparent 62%,rgba(0,0,0,.35) 100%);}
  #icons{
    inset:12px 10px 58px 10px;
    grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); grid-auto-rows:92px; gap:4px;
  }
  .ico canvas{width:40px; height:40px}
  .win{
    left:8px !important; top:10px !important;
    width:calc(100% - 16px) !important; height:calc(100% - 66px) !important;
  }
  .tb{height:36px; cursor:default}
  .tbX{width:28px; height:24px; font-size:13px}
  .wb{font-size:13px; padding:13px 13px 18px}
  #bar{height:44px}
  #tasks{display:none}
  #menu{left:8px; right:8px; bottom:50px}
}

@media (prefers-reduced-motion:reduce){
  .cur{animation:none}
}