:root {
  --bone:#E7E0D0; --bone-lt:#f4efe2; --bone-dk:#bcb39f;
  --dusk:#2a1a3e; --mag:#7a3b6e; --orange:#e0663f; --sun:#ffcf5c;
  --accent:#ff7a3d; --accent2:#d94f8c; --paper:#F7F3EC; --ink:#1a1024;
}
* { box-sizing:border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  background:radial-gradient(circle at 50% 0%, #2a2130, #120c16 72%);
  height:100dvh; overflow:hidden; display:flex; align-items:stretch; justify-content:center;
  padding:10px; font-family:'VT323', monospace; -webkit-font-smoothing:none;
}

/* machine: phone default, CRT on wide screens */
.machine {
  width:100%;
  background:linear-gradient(158deg, var(--bone-lt), var(--bone) 32%, var(--bone-dk));
  border-radius:24px; padding:10px 10px 10px;
  box-shadow:0 26px 52px rgba(0,0,0,0.55), inset 0 2px 2px rgba(255,255,255,0.7), inset 0 -4px 7px rgba(0,0,0,0.22);
  display:flex; flex-direction:column; position:relative;
}
.brand { display:none; }
.screen {
  position:relative; flex:1; display:flex; flex-direction:column;
  border-radius:16px; overflow:hidden; border:3px solid #05090f;
  box-shadow:inset 0 0 0 2px #120b18, inset 0 0 26px rgba(0,0,0,0.75);
}
.stage { position:relative; flex:1; overflow:hidden; }
.scene { position:absolute; inset:0; width:100%; height:100%; z-index:0; image-rendering:pixelated; }
.scan { position:absolute; inset:0; z-index:5; pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; }
.vignette { position:absolute; inset:0; z-index:5; pointer-events:none;
  background:radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,0.5) 100%); }

/* desktop icons */
.desktop {
  position:absolute; inset:0; z-index:2; padding:20px 18px;
  display:grid; grid-template-columns:repeat(2, 1fr);
  justify-items:center; align-content:space-evenly; gap:12px;
}
.dicon { display:flex; flex-direction:column; align-items:center; gap:7px; width:100px; background:none; border:none; cursor:pointer; padding:4px; }
.dicon-img {
  width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(158deg, rgba(255,255,255,0.10), rgba(0,0,0,0.35));
  border:1px solid rgba(0,0,0,0.5); border-radius:6px;
  box-shadow:inset 2px 2px 0 rgba(255,255,255,0.14), inset -2px -2px 0 rgba(0,0,0,0.4), 0 3px 5px rgba(0,0,0,0.5);
  transition:transform .08s steps(2);
}
.dicon:hover .dicon-img { transform:translateY(-2px); }
.dicon:active .dicon-img { transform:translateY(1px); }
.dicon .glyph { width:40px; height:40px; image-rendering:pixelated; }
.dicon-label {
  font-family:'Press Start 2P', monospace; font-size:8px; line-height:1.3; color:var(--paper); text-align:center;
  text-shadow:0 1px 0 #000, 1px 0 0 rgba(0,0,0,0.7), -1px 0 0 rgba(0,0,0,0.7);
}

/* windows */
.windows { position:absolute; inset:0; z-index:3; pointer-events:none; }
.window {
  position:absolute; width:min(240px, 82%); pointer-events:auto;
  background:var(--bone-lt); border:2px solid #2a2130;
  border-radius:6px 6px 4px 4px; box-shadow:0 12px 28px rgba(0,0,0,0.6);
  display:none; flex-direction:column; overflow:hidden;
}
.window.open { display:flex; }
.titlebar {
  display:flex; align-items:center; gap:6px; padding:5px 6px; cursor:grab;
  background:linear-gradient(180deg, var(--accent2), #a83b6e);
  border-bottom:2px solid #2a2130; user-select:none;
}
.titlebar:active { cursor:grabbing; }
.tbicon { width:16px; height:16px; display:flex; }
.tbicon .glyph { width:16px; height:16px; }
.tbtitle { flex:1; font-family:'Press Start 2P', monospace; font-size:8px; color:#fff; text-shadow:0 1px 0 rgba(0,0,0,0.5); }
.tbclose {
  width:18px; height:18px; display:flex; align-items:center; justify-content:center; text-decoration:none;
  font-family:'Press Start 2P', monospace; font-size:8px; color:#2a2130;
  background:var(--bone); border:1px solid #2a2130; cursor:pointer;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.3);
}
.tbclose:active { box-shadow:inset -1px -1px 0 rgba(255,255,255,0.7), inset 1px 1px 0 rgba(0,0,0,0.3); }
.tbmin {
  width:18px; height:18px; display:flex; align-items:flex-end; justify-content:center;
  font-family:'Press Start 2P', monospace; font-size:8px; color:#2a2130; padding-bottom:3px;
  background:var(--bone); border:1px solid #2a2130; cursor:pointer;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.3);
}
.tbmin:active { box-shadow:inset -1px -1px 0 rgba(255,255,255,0.7), inset 1px 1px 0 rgba(0,0,0,0.3); }
.tbm {
  width:16px; height:16px; display:flex; align-items:center; justify-content:center; flex:none;
  background:var(--accent2); color:#fff; font-family:'Press Start 2P', monospace; font-size:7px; border:1px solid #2a2130;
}
.window.minimized { display:none; }
.window.pop { animation:winpop .14s steps(3); }
@keyframes winpop { from { transform:scale(0.86); opacity:0.4; } to { transform:scale(1); opacity:1; } }
.wbody { padding:12px; display:flex; flex-direction:column; gap:8px; background:var(--bone-lt); }
.wlede { font-family:'VT323', monospace; font-size:17px; color:#5a4a55; letter-spacing:0.03em; }
.wtext { font-family:'VT323', monospace; font-size:17px; line-height:1.25; color:#3a3040; letter-spacing:0.02em; }
.wlink {
  display:flex; align-items:center; gap:9px; text-decoration:none;
  padding:8px 10px; background:var(--bone); color:var(--ink);
  border-top:2px solid #f6f1e4; border-left:2px solid #f6f1e4;
  border-right:2px solid #9a9280; border-bottom:2px solid #9a9280;
  font-family:'VT323', monospace; font-size:17px; letter-spacing:0.02em;
}
.wlink:hover { background:#efe9db; }
.wlink:active { border-top-color:#9a9280; border-left-color:#9a9280; border-right-color:#f6f1e4; border-bottom-color:#f6f1e4; }
.wlink .glyph { width:20px; height:20px; image-rendering:pixelated; flex:none; }

/* taskbar */
.taskbar { position:relative; z-index:6; flex:none; height:34px; display:flex; align-items:center; gap:6px; padding:4px 6px; background:#d9d2c2; border-top:2px solid #f3eee1; }
.start {
  display:flex; align-items:center; gap:6px; height:24px; padding:0 8px 0 5px; text-decoration:none;
  background:#d9d2c2; cursor:pointer; flex:none;
  border-top:2px solid #f6f1e4; border-left:2px solid #f6f1e4; border-right:2px solid #9a9280; border-bottom:2px solid #9a9280;
  font-family:'Press Start 2P', monospace; font-size:8px; color:#3a352b;
}
.start:active { border-top-color:#9a9280; border-left-color:#9a9280; border-right-color:#f6f1e4; border-bottom-color:#f6f1e4; }
.emblem { width:16px; height:16px; display:flex; align-items:center; justify-content:center; background:var(--accent2); color:#fff; font-family:'Press Start 2P', monospace; font-size:7px; border:1px solid #2a2130; }
.tasks { flex:1; display:flex; gap:4px; overflow:hidden; }
.taskbtn {
  height:24px; padding:0 8px; display:flex; align-items:center; gap:5px; max-width:120px; overflow:hidden; white-space:nowrap;
  background:#c9c2b1; cursor:pointer;
  border-top:2px solid #9a9280; border-left:2px solid #9a9280; border-right:2px solid #f3eee1; border-bottom:2px solid #f3eee1;
  font-family:'VT323', monospace; font-size:15px; color:#2a2a2a;
}
.taskbtn.active { background:#efe9db; border-top-color:#f3eee1; border-left-color:#f3eee1; border-right-color:#9a9280; border-bottom-color:#9a9280; }
.taskbtn .glyph { width:14px; height:14px; }
.clockbox { height:24px; display:flex; align-items:center; padding:0 10px; flex:none;
  background:#c9c2b1; border-top:2px solid #9a9280; border-left:2px solid #9a9280; border-right:2px solid #f3eee1; border-bottom:2px solid #f3eee1;
  font-family:'VT323', monospace; font-size:16px; color:#2a2a2a; }
.taskbtn.mini { opacity:0.6; }
.chin { display:none; }

/* start menu */
.start.on { border-top-color:#9a9280; border-left-color:#9a9280; border-right-color:#f6f1e4; border-bottom-color:#f6f1e4; background:#c9c2b1; }
.startmenu[hidden] { display:none; }
.startmenu {
  position:absolute; left:6px; bottom:36px; z-index:20; display:flex; min-width:170px;
  background:var(--bone-lt); border:2px solid #2a2130; box-shadow:0 10px 24px rgba(0,0,0,0.55);
}
.sm-side {
  writing-mode:vertical-rl; transform:rotate(180deg); padding:8px 3px;
  background:linear-gradient(0deg, var(--accent2), #a83b6e); color:#fff;
  font-family:'Press Start 2P', monospace; font-size:8px; letter-spacing:0.1em; user-select:none;
}
.sm-items { display:flex; flex-direction:column; padding:4px; flex:1; }
.sm-item {
  display:flex; align-items:center; gap:8px; padding:6px 8px; background:none; border:none; cursor:pointer;
  font-family:'VT323', monospace; font-size:17px; color:var(--ink); text-align:left; width:100%;
}
.sm-item:hover, .sm-item:focus-visible { background:var(--accent2); color:#fff; outline:none; }
.sm-item .glyph { width:16px; height:16px; image-rendering:pixelated; flex:none; }
.sm-sep { height:2px; margin:3px 4px; border-top:1px solid #9a9280; border-bottom:1px solid #f6f1e4; }

/* boot sequence */
.boot {
  position:absolute; inset:0; z-index:30; background:#0a0510; padding:18px 16px;
  display:flex; flex-direction:column; gap:10px; cursor:pointer;
  transition:opacity .4s steps(4); font-family:'VT323', monospace;
}
.boot.done { opacity:0; pointer-events:none; }
.bootlines { color:#ffb15c; font-size:17px; line-height:1.45; white-space:pre; text-shadow:0 0 6px rgba(255,177,92,0.4); }
.bootbar { width:70%; max-width:220px; height:12px; border:2px solid #ffb15c; padding:2px; }
.bootbar i { display:block; height:100%; width:0; background:repeating-linear-gradient(to right, #ffb15c 0 4px, transparent 4px 6px); transition:width .25s steps(3); }
.bootskip { margin-top:auto; color:#6a5a70; font-size:15px; }

/* danfo dodge game */
.game { position:absolute; inset:0; z-index:25; background:#0a0510; touch-action:none; -webkit-user-select:none; user-select:none; }
.game canvas { width:100%; height:100%; display:block; image-rendering:pixelated; touch-action:none; }
.game-btns { position:absolute; top:8px; right:8px; display:flex; gap:6px; }
.game-btn {
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P', monospace; font-size:9px; color:#2a2130;
  background:var(--bone); border:1px solid #2a2130; cursor:pointer;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,0.7), inset -1px -1px 0 rgba(0,0,0,0.3);
}
.game-btn:active { box-shadow:inset -1px -1px 0 rgba(255,255,255,0.7), inset 1px 1px 0 rgba(0,0,0,0.3); }
.game-btn.off { opacity:0.45; }

/* screensaver */
.saver { position:absolute; inset:0; z-index:40; background:#050308; overflow:hidden; cursor:pointer; }
.saver-logo {
  position:absolute; left:0; top:0; display:inline-block;
  font-family:'Press Start 2P', monospace; font-size:16px; color:var(--sun);
  text-shadow:0 0 8px rgba(255,207,92,0.45); user-select:none; will-change:transform;
}
.saver-hint {
  position:absolute; left:0; right:0; bottom:14px; text-align:center;
  font-family:'VT323', monospace; font-size:16px; color:#6a5a70;
  user-select:none; pointer-events:none;
}

/* crt power-on flicker */
@media (prefers-reduced-motion:no-preference) {
  .stage { animation:crt-on .5s steps(5); }
  @keyframes crt-on {
    0% { opacity:0; filter:brightness(3); }
    40% { opacity:1; filter:brightness(0.4); }
    70% { filter:brightness(1.6); }
    100% { filter:brightness(1); }
  }
  .clockbox .colon { animation:colonblink 2s steps(1) infinite; }
  @keyframes colonblink { 50% { opacity:0.15; } }
}

.dicon:focus-visible .dicon-img, .tbclose:focus-visible, .tbmin:focus-visible, .start:focus-visible, .taskbtn:focus-visible {
  outline:2px solid var(--sun); outline-offset:1px;
}

@media (min-width:860px) {
  .machine { border-radius:24px; padding:14px 16px 0; }
  .screen { border-radius:20px; }
  .desktop { grid-template-columns:repeat(3, 1fr); padding:30px 6vw; }
  .dicon { width:120px; }
  .dicon-img { width:76px; height:76px; }
  .dicon .glyph { width:46px; height:46px; }
  .dicon-label { font-size:9px; }
  .window { width:300px; }
  .taskbar { height:40px; }
  .startmenu { bottom:42px; }
  .saver-logo { font-size:24px; }
  .chin { display:flex; align-items:center; justify-content:flex-end; gap:14px; height:36px; padding:0 22px; }
  .led { width:9px; height:9px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffd59a, #e0663f); box-shadow:0 0 6px rgba(255,140,66,0.8), inset 0 0 2px rgba(0,0,0,0.4); }
  .chin-mark { font-family:'Press Start 2P', monospace; font-size:8px; color:#8f8672; letter-spacing:0.12em; }
}
@media (prefers-reduced-motion:reduce) {
  .dicon:hover .dicon-img { transform:none; }
}