/* ============================================================
   CaptchaOS — cozy Win98 that slowly betrays you
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Silkscreen:wght@400;700&family=VT323&display=swap');

:root {
  --desktop:      #7ba6a1;   /* cozy sage-teal wallpaper base */
  --desktop-2:    #5f8b86;   /* dither shade */
  --chrome:       #eae3d2;   /* warm beige window body */
  --chrome-dark:  #b8ae97;   /* bevel shadow */
  --chrome-darker:#8c8674;   /* deep bevel / outline */
  --chrome-light: #fffdf5;   /* bevel highlight */
  --ink:          #2b2620;   /* warm near-black */
  --ink-soft:     #5c5548;
  --title:        #3a2e7a;   /* periwinkle active title bar */
  --title-2:      #6a5bc4;
  --title-inactive:#9a938a;
  --accent:       #d9536a;   /* raspberry selection / danger */
  --accent-soft:  #f2c4cc;
  --link:         #2f4fd9;
  --error:        #c62828;
  --ok:           #3a8a4a;

  --px:  2px;                 /* base pixel unit */
  --font-pixel: 'Silkscreen', monospace;
  --font-logo:  'Press Start 2P', monospace;
  --font-body:  'VT323', 'Silkscreen', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: none;
  font-smooth: never;
  image-rendering: pixelated;
  cursor: default;
  user-select: none;
}

img { image-rendering: pixelated; }

/* Crisp retro cursor */
body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M2 2 L2 18 L6 14 L9 21 L12 20 L9 13 L15 13 Z' fill='white' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, auto; }

/* ============================================================
   Bevel primitives — the language of the whole OS chrome
   ============================================================ */
.bevel-out {
  border: var(--px) solid var(--chrome-darker);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--chrome-light),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--chrome-dark);
  background: var(--chrome);
}
.bevel-in {
  border: var(--px) solid var(--chrome-darker);
  box-shadow:
    inset var(--px) var(--px) 0 0 var(--chrome-dark),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 var(--chrome-light);
  background: #fff;
}

/* ============================================================
   Screen + boot
   ============================================================ */
#screen {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

#boot {
  position: absolute;
  inset: 0;
  background: #0a0a12;
  color: #cfe;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  z-index: 9000;
  font-family: var(--font-body);
  font-size: 22px;
}
#boot .logo {
  font-family: var(--font-logo);
  font-size: 26px;
  color: #ffe9a8;
  text-shadow: 3px 3px 0 #b5451f;
  letter-spacing: 1px;
  line-height: 1.6;
  text-align: center;
}
#boot .tagline { color:#7fd7c8; font-size:20px; }
#boot .barwrap { width: 320px; }
#boot .bar {
  height: 22px;
  background: #12121e;
  border: 2px solid #2b2b40;
}
#boot .bar > i {
  display:block; height:100%; width:0%;
  background: repeating-linear-gradient(90deg,#3ad0b0 0 10px,#2ba48c 10px 14px);
  transition: width .12s linear;
}
#boot .blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ============================================================
   Login / lock screen
   ============================================================ */
#login {
  position:absolute; inset:0; z-index:8000;
  display:block; overflow-y:auto; overflow-x:hidden;
  padding: 20px 10px; text-align:center;
  background:
    radial-gradient(120% 80% at 50% 118%, rgba(255,168,96,.20) 0%, transparent 55%),
    radial-gradient(120% 90% at 50% 12%, #1e1c48 0%, #171638 42%, #0e1030 100%);
}
#login::before {
  /* dither texture */
  content:""; position:absolute; inset:0; opacity:.25; pointer-events:none;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.15) 75%),
    linear-gradient(45deg,rgba(0,0,0,.08) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.08) 75%);
  background-size: 6px 6px; background-position:0 0,3px 3px;
}
.login-card {
  position:relative; width: min(420px, 92vw); padding: 0;
  display:inline-block; text-align:left; vertical-align:top;
  /* block-flow scroll container (#login) => a plain, reliable scrollbar */
}
.login-card .head {
  padding: 22px 20px 16px;
  text-align:center;
}
.login-card h1 {
  font-family: var(--font-logo);
  font-size: 20px; color: var(--title);
  text-shadow: 2px 2px 0 var(--chrome-light);
  line-height:1.5;
}
.login-card .sub { font-size: 20px; color: var(--ink-soft); margin-top:10px; }
.login-body { padding: 0 20px 22px; }
.field { margin-bottom: 12px; }
.field label { display:block; font-family:var(--font-pixel); font-size:11px; margin-bottom:6px; color:var(--ink-soft);}
.field input {
  width:100%; font-family:var(--font-body); font-size:22px; padding:6px 8px;
  outline:none;
}
.login-hint { font-size:18px; color:var(--ink-soft); text-align:center; margin-top:10px; min-height:22px;}
.login-hint.bad { color: var(--error); }
.login-hint.good { color: var(--ok); }

/* ============================================================
   Desktop — cozy nighttime scene
   ============================================================ */
#desktop {
  position:absolute; inset:0 0 40px 0; z-index:10;
  background:
    /* warm dusk glow hugging the horizon */
    radial-gradient(120% 70% at 74% 118%, rgba(255,168,96,.28) 0%, transparent 52%),
    /* deep, calm night sky */
    linear-gradient(180deg, #0e1030 0%, #171638 42%, #241f4c 68%, #33284a 84%, #3f2d42 100%);
  overflow:hidden;
  transition: background 1.2s ease;
}
/* soft pixel dither, dark & subtle so the night reads calm */
#desktop::before {
  content:""; position:absolute; inset:0; opacity:.12; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.10) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.10) 75%),
    linear-gradient(45deg,rgba(0,0,0,.14) 25%,transparent 25%,transparent 75%,rgba(0,0,0,.14) 75%);
  background-size: 8px 8px; background-position:0 0,4px 4px;
}
/* faint vignette to make the scene feel enclosed & safe */
.night-sky {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(6,6,20,.45) 100%);
}

/* --- moon (replaces the daytime sun) --- */
#desktop .moon {
  position:absolute; top:40px; right:64px; width:58px; height:58px; z-index:1;
  background: radial-gradient(circle at 38% 34%, #fff8e6, #f2e6bd 70%, #d9c98f 100%);
  border-radius:50%; image-rendering:pixelated; pointer-events:none;
  box-shadow:
    0 0 0 7px rgba(246,235,196,.10),
    0 0 0 15px rgba(246,235,196,.05),
    0 0 40px 10px rgba(255,232,168,.30);
  animation: moonglow 7s ease-in-out infinite;
}
#desktop .moon i, #desktop .moon::before, #desktop .moon::after {
  content:""; position:absolute; border-radius:50%;
  background: rgba(190,176,128,.55); box-shadow: inset 1px 1px 0 rgba(120,108,72,.5);
}
#desktop .moon::before { width:12px; height:12px; top:14px; left:16px; }
#desktop .moon::after  { width:8px;  height:8px;  bottom:14px; right:16px; }
#desktop .moon i       { width:6px;  height:6px;  top:30px; left:34px; }
@keyframes moonglow {
  0%,100% { box-shadow: 0 0 0 7px rgba(246,235,196,.10), 0 0 0 15px rgba(246,235,196,.05), 0 0 34px 8px rgba(255,232,168,.24); }
  50%     { box-shadow: 0 0 0 7px rgba(246,235,196,.14), 0 0 0 15px rgba(246,235,196,.07), 0 0 48px 12px rgba(255,232,168,.38); }
}

/* --- a real-feeling starfield: mostly faint pinpricks, a few bright
       sparklers with diffraction spikes, in warm & cool tints
       (populated by os.js) --- */
#desktop .stars { position:absolute; inset:0 0 34% 0; pointer-events:none; z-index:1; }
#desktop .stars i {
  position:absolute; border-radius:50%;
  color:#fff6e9;                              /* tint drives the dot + glow */
  background: currentColor;
  box-shadow: 0 0 4px 1px currentColor;
  opacity:.5;
  animation: twinkle var(--tw,3.4s) ease-in-out infinite;
  animation-delay: var(--td,0s);
}
#desktop .stars i.warm { color:#ffe6bc; }
#desktop .stars i.cool { color:#c9dcff; }
#desktop .stars i.bright {
  box-shadow: 0 0 5px 1px currentColor, 0 0 14px 3px rgba(255,255,255,.22);
}
#desktop .stars i.bright::before,
#desktop .stars i.bright::after {
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
#desktop .stars i.bright::before {           /* vertical diffraction spike */
  width:1px; height:15px;
  background: linear-gradient(transparent, currentColor 46%, currentColor 54%, transparent);
}
#desktop .stars i.bright::after {            /* horizontal diffraction spike */
  height:1px; width:15px;
  background: linear-gradient(90deg, transparent, currentColor 46%, currentColor 54%, transparent);
}
@keyframes twinkle {
  0%,100% { opacity:.22; transform:scale(.75); }
  50%     { opacity:1;   transform:scale(1.12); }
}

/* --- shooting stars / meteors: a glowing head with a tapering tail
       that streaks across the sky now and then, one at a time --- */
#desktop .meteors { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
#desktop .meteor {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff8e6; opacity:0;
  box-shadow: 0 0 8px 1px rgba(255,246,214,.95), 0 0 2px #fff;
  animation: meteorfly 12s ease-in infinite;
}
#desktop .meteor::before {                 /* the trailing tail */
  content:""; position:absolute; top:50%; right:1px; transform:translateY(-50%);
  width: var(--tail,84px); height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, rgba(255,246,214,.85));
}
#desktop .meteor.m1 { top:9%;  left:16%; --rot:30deg; --tail:78px;  --dist:340px; animation-duration:10s; animation-delay:2s; }
#desktop .meteor.m2 { top:5%;  left:54%; --rot:37deg; --tail:106px; --dist:430px; animation-duration:13s; animation-delay:6.5s; }
#desktop .meteor.m3 { top:15%; left:36%; --rot:25deg; --tail:64px;  --dist:300px; animation-duration:16s; animation-delay:11s; }
@keyframes meteorfly {
  0%, 4%    { opacity:0; transform: rotate(var(--rot,30deg)) translateX(0); }
  9%        { opacity:1; }
  22%       { opacity:1; }
  30%, 100% { opacity:0; transform: rotate(var(--rot,30deg)) translateX(var(--dist,340px)); }
}

/* --- drifting moonlit clouds: cool top-lit rim, shadowed underside,
       soft cast shadow — dimensional rather than flat blobs --- */
#desktop .clouds { position:absolute; inset:0 0 42% 0; pointer-events:none; overflow:hidden; z-index:1; }
#desktop .cloud {
  position:absolute; height:20px; border-radius:999px;
  background: linear-gradient(180deg, #55538a 0%, #3a3860 55%, #2a2848 100%);
  box-shadow:
    inset 0 2px 0 rgba(170,168,226,.45),     /* moonlit top rim   */
    inset 0 -5px 7px rgba(16,14,38,.5),      /* underside shade   */
    0 8px 18px rgba(8,6,24,.32);             /* soft cast shadow  */
  animation: drift linear infinite;
}
#desktop .cloud::before, #desktop .cloud::after {
  content:""; position:absolute; bottom:0; border-radius:50%;
  background: linear-gradient(180deg, #56548c 0%, #3a3860 60%, #2c2a4a 100%);
  box-shadow: inset 0 2px 0 rgba(170,168,226,.4);
}
#desktop .cloud::before { width:54%; height:215%; left:9%; }
#desktop .cloud::after  { width:42%; height:165%; right:12%; }
#desktop .cloud.c1 { top:16%; width:150px; opacity:.72; animation-duration:72s; }
#desktop .cloud.c2 { top:29%; width:108px; opacity:.58; animation-duration:92s;  animation-delay:-30s; }
#desktop .cloud.c3 { top:8%;  width:86px;  opacity:.44; animation-duration:110s; animation-delay:-64s; }
@keyframes drift { from { transform: translateX(-190px); } to { transform: translateX(114vw); } }

/* --- gentle rain: soft moonlit capsules with a slight wind slant
       (drops populated by os.js) --- */
#desktop .rain { position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:2; }
#desktop .rain i {
  position:absolute; top:-16%; width:2px; height:14px; border-radius:2px;
  background: linear-gradient(rgba(196,212,255,0) 0%, rgba(210,222,255,.72) 100%);
  box-shadow: 0 0 3px rgba(184,204,255,.35);
  animation: fall linear infinite;
}
@keyframes fall { to { transform: translate(-26px, 124vh); } }

/* --- cozy hills on the horizon (night-darkened) --- */
#desktop .hill {
  position:absolute; bottom:0; left:0; right:0; height:30%; z-index:2;
  background:
    radial-gradient(60% 120% at 20% 100%, #241f3c 0 60%, transparent 61%),
    radial-gradient(60% 120% at 70% 100%, #1b1730 0 60%, transparent 61%);
  opacity:.92; pointer-events:none;
}

/* --- warm desk-lamp glow: a soft pool of lamplight washing the
       scene from the corner, gently breathing. No drawn fixture —
       just the cozy light it casts. --- */
#desktop .lamp-glow {
  position:absolute; right:-140px; bottom:-160px; width:560px; height:520px;
  z-index:3; pointer-events:none; mix-blend-mode:screen;
  background: radial-gradient(circle at 60% 55%,
              rgba(255,206,128,.40) 0%,
              rgba(255,176,96,.20) 34%,
              rgba(255,150,80,.08) 56%,
              transparent 72%);
  animation: lampflicker 6s ease-in-out infinite;
}
@keyframes lampflicker {
  0%,100% { opacity:.86; transform: scale(1); }
  40%     { opacity:1;   transform: scale(1.015); }
  72%     { opacity:.8;  transform: scale(.99); }
}

.icons { position:absolute; top:14px; left:14px; display:flex; flex-direction:column; gap:14px; z-index:5; }
.dicon {
  width: 84px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:6px 4px; cursor:pointer; border:2px dotted transparent;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.dicon:hover { background: rgba(120,104,196,.22); transform: translateY(-1px); }
.dicon.sel { background: rgba(120,104,196,.4); border-color: rgba(255,240,200,.55); }
.dicon .glyph {
  width:44px; height:44px; display:grid; place-items:center; font-size:30px;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35));
}
.dicon .lbl {
  font-family:var(--font-pixel); font-size:10px; color:#fff; text-align:center;
  text-shadow: 1px 1px 0 #234, 0 0 2px #000; line-height:1.4;
}

/* ============================================================
   Windows
   ============================================================ */
.win {
  position:absolute; min-width:220px; min-height:120px;
  display:flex; flex-direction:column;
  z-index:100;
}
.win .titlebar {
  height:26px; display:flex; align-items:center; gap:6px; padding:0 4px 0 6px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color:#fff; cursor:grab; user-select:none;
  font-family:var(--font-pixel); font-size:11px;
  touch-action:none;                 /* keep pointer drags from being stolen by scroll/pan */
}
.win.inactive .titlebar { background: linear-gradient(90deg,#9a938a,#b7b0a5); }
.win .titlebar .ttl { flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; letter-spacing:.5px;}
.win .titlebar .tico { font-size:13px; }
.win .tbtn {
  width:20px; height:18px; display:grid; place-items:center;
  font-family:var(--font-pixel); font-size:11px; color:var(--ink);
  cursor:pointer;
}
.win .tbtn:active { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light);}
.win .body {
  flex:1; overflow:auto; background: var(--chrome); position:relative;
  border-top: 2px solid var(--chrome-light);
}
.win.dragging { opacity:.96; }
.win .resize {
  position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize;
  touch-action:none;
  background:
    linear-gradient(135deg, transparent 40%, var(--chrome-darker) 40% 50%, transparent 50% 60%, var(--chrome-darker) 60% 70%, transparent 70%);
}

/* generic button */
.btn {
  font-family:var(--font-pixel); font-size:11px; color:var(--ink);
  padding:6px 12px; cursor:pointer; min-width:64px; text-align:center;
}
.btn:active { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light);}
.btn.primary { color:#fff; background: linear-gradient(var(--title-2),var(--title)); }
.btn.danger  { color:#fff; background: linear-gradient(#e2687d,var(--accent)); }
.btn:focus-visible { outline: 2px dashed var(--title); outline-offset:2px; }

/* ============================================================
   Error dialogs — the SIGNATURE element
   ============================================================ */
.errbox { min-width: 300px; max-width: 380px; z-index: 500; position:absolute; }
.errbox .titlebar { background: linear-gradient(90deg,#7a1f1f,#c62828); }
.errbox .body { padding:16px; }
.err-row { display:flex; gap:14px; align-items:flex-start; }
.err-ico {
  width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center;
  font-size:26px;
}
.err-msg { font-size:20px; line-height:1.25; color:var(--ink); padding-top:2px; }
.err-code { font-family:var(--font-pixel); font-size:9px; color:var(--ink-soft); margin-top:8px;}
.err-actions { display:flex; gap:8px; justify-content:center; margin-top:16px; }
@keyframes errpop { 0%{ transform: scale(.6); opacity:0;} 70%{ transform: scale(1.04);} 100%{ transform: scale(1); opacity:1;} }
.errbox { animation: errpop .16s ease-out; }
@keyframes shakeit { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3px,2px)} 40%{transform:translate(3px,-2px)} 60%{transform:translate(-2px,-2px)} 80%{transform:translate(2px,2px)} }
.shake { animation: shakeit .3s linear; }

/* ============================================================
   Taskbar
   ============================================================ */
#taskbar {
  position:absolute; left:0; right:0; bottom:0; height:40px; z-index:6000;
  display:flex; align-items:center; gap:6px; padding:0 6px;
}
#startbtn {
  height:30px; display:flex; align-items:center; gap:8px; padding:0 12px;
  font-family:var(--font-pixel); font-size:12px; font-weight:700; cursor:pointer;
  color:var(--title);
}
#startbtn .s { font-size:16px; }
#startbtn.open { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light);}
#tasks { flex:1; display:flex; gap:6px; overflow:hidden; height:30px; align-items:center;}
.taskitem {
  height:30px; min-width:140px; max-width:200px; display:flex; align-items:center; gap:8px;
  padding:0 10px; font-family:var(--font-pixel); font-size:10px; cursor:pointer;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.taskitem.active { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light); background:#ded5c0;}
#tray {
  height:30px; display:flex; align-items:center; gap:10px; padding:0 12px;
  font-family:var(--font-pixel); font-size:11px;
}
#clock {
  min-width:96px; text-align:center;
  font-family: var(--font-pixel); letter-spacing:1px;
  color:#1a1712;                       /* readable near-black on the white tray */
}
#clock .sec { opacity:.55; }

/* Start menu */
#startmenu {
  position:absolute; left:6px; bottom:44px; width:240px; z-index:6100; display:none;
}
#startmenu.open { display:block; }
#startmenu .banner {
  width:34px; position:absolute; left:0; top:0; bottom:0;
  background: linear-gradient(var(--title-2),var(--title));
  writing-mode: vertical-rl; transform: rotate(180deg);
  color:#fff; font-family:var(--font-logo); font-size:12px; text-align:center;
  padding:10px 0; letter-spacing:2px;
}
#startmenu .items { margin-left:34px; padding:6px; }
.smitem {
  display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer;
  font-family:var(--font-body); font-size:20px; color:var(--ink);
}
.smitem:hover { background: linear-gradient(90deg,var(--title),var(--title-2)); color:#fff; }
.smitem .g { font-size:20px; width:24px; text-align:center; }
.smsep { height:2px; background:var(--chrome-dark); margin:4px 6px; box-shadow:0 1px 0 var(--chrome-light); }

/* ============================================================
   Captcha kit
   ============================================================ */
.cap { padding:0; width:340px; }
.cap .banner {
  background: linear-gradient(180deg,#4a83d6,#2f5fb0); color:#fff; padding:12px 14px;
}
.cap .banner .k { font-family:var(--font-pixel); font-size:12px; }
.cap .banner .q { font-size:22px; margin-top:6px; line-height:1.15; }
.cap .banner .q b { color:#ffe08a; }
.cap .grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; background:#2f5fb0; padding:3px;}
.cap .cell {
  aspect-ratio:1; position:relative; cursor:pointer; overflow:hidden;
  background:#cfd8e6; display:grid; place-items:center; font-size:34px;
}
.cap .cell.sel::after {
  content:"✔"; position:absolute; top:4px; left:4px; width:22px; height:22px;
  background:#2f5fb0; color:#fff; display:grid; place-items:center; border-radius:50%;
  font-size:14px; box-shadow:0 0 0 3px #fff;
}
.cap .foot { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:#fff;}
.cap .foot .robo { display:flex; gap:8px; align-items:center; font-size:12px; color:#5c5548; font-family:var(--font-pixel);}
.cap .refresh { cursor:pointer; font-size:20px; }
.cap-msg { font-size:18px; padding:6px 12px; min-height:26px; }
.cap-msg.bad { color:var(--error); } .cap-msg.good { color:var(--ok); }
.cap-counter { font-family:var(--font-pixel); font-size:9px; color:#5c5548; padding:0 12px 8px; }

/* checkbox captcha */
.cbx-wrap { padding:20px; display:flex; align-items:center; gap:14px; }
.cbx {
  width:34px; height:34px; background:#fff; cursor:pointer; position:relative;
}
.cbx.on::after{ content:"✔"; position:absolute; inset:0; display:grid; place-items:center; color:var(--ok); font-size:26px;}
.cbx.loading::after{ content:""; width:20px; height:20px; border:3px solid #ccc; border-top-color:var(--title); border-radius:50%; position:absolute; inset:0; margin:auto; animation:spin .6s linear infinite;}
@keyframes spin { to { transform: rotate(360deg);} }

/* traffic light / bolt captchas share a stage */
.cap-stage { background:#20242e; padding:16px; display:grid; place-items:center; min-height:200px; position:relative;}
.cap-help { font-size:16px; color:#5c5548; padding:8px 12px; text-align:center;}

/* bolt captcha */
.bolt-plate { position:relative; width:220px; height:150px; background:linear-gradient(135deg,#8b90a0,#5a6072); border:4px solid #3c414f;}
.bolt {
  position:absolute; width:40px; height:40px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #d9dde6, #8b90a0 70%);
  border:3px solid #40454f; display:grid; place-items:center; cursor:pointer;
  transition: transform .05s linear;
}
.bolt::before{ content:""; width:22px; height:5px; background:#3c414f; position:absolute; }
.bolt.spinning::before { animation: boltspin .4s linear; }
@keyframes boltspin { to { transform: rotate(180deg);} }
.bolt.out { transform: scale(0); opacity:0; transition: all .3s ease-in;}
.bolt.active { box-shadow: 0 0 0 3px #ffe08a; }

/* mechanical (two-bolt, split controls) captcha */
.mech2 { display:flex; gap:26px; justify-content:center; align-items:flex-start; padding:6px 4px; }
.mbolt { display:flex; flex-direction:column; align-items:center; gap:6px; width:118px; }
.mbolt .mkey {
  font-family:var(--font-pixel); font-size:10px; color:#20242e;
  background:#ffe08a; border:2px solid #b58a1f; padding:3px 6px; text-align:center;
}
.mbolt .marrow { font-size:20px; color:#ffe08a; line-height:.7; }
/* the 2D hex nut (drawn straight) */
.mnut {
  width:86px; height:86px; position:relative; display:grid; place-items:center;
  background: radial-gradient(circle at 40% 34%, #9aa0b0, #565c6b 72%);
  border:3px solid #2b2f3a;
  clip-path: polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
}
.mnut::before {                       /* the nut's threaded bore */
  content:""; position:absolute; width:58px; height:58px; border-radius:50%;
  background:#20242e; box-shadow: inset 0 0 0 4px #454b59; z-index:1;
}
/* the bolt head that rotates inside the nut */
.mbolt-head {
  width:48px; height:48px; position:relative; z-index:2;
  background: radial-gradient(circle at 34% 28%, #eef1f7, #aab0be 72%);
  border:3px solid #2b2f3a; transform-origin:50% 50%; transition: transform .06s linear;
  clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);
}
.mbolt-head::before, .mbolt-head::after { content:""; position:absolute; background:#2b2f3a; }
.mbolt-head::before { left:50%; top:16%; width:5px; height:68%; transform:translateX(-50%); }
.mbolt-head::after  { top:50%; left:16%; height:5px; width:68%; transform:translateY(-50%); }
.mbolt.done .mbolt-head { transform: scale(0) rotate(540deg) !important; opacity:0; transition: all .45s ease-in; }
.mbolt.done .mnut::before { box-shadow: inset 0 0 0 4px #4f9c5a; }
.mbolt .mprog { width:100%; height:12px; background:#12121e; border:2px solid #2b2f3a; padding:1px; }
.mbolt .mprog > i {
  display:block; height:100%; width:0%;
  background: repeating-linear-gradient(90deg,#3ad0b0 0 8px,#2ba48c 8px 12px); transition: width .1s linear;
}
.mbolt.done .mprog > i { background:#4f9c5a; width:100% !important; }
.mbolt .mtag { font-family:var(--font-pixel); font-size:8px; color:#8f96a5; }
.mbolt.done .mtag { color:#4f9c5a; }

/* ============ nut-rotation captcha — match the reference bolt ============ */
.nutcap { width:272px; }
.nc-body { position:relative; background:#e6e8ee; padding:12px; }
.nc-ref {
  position:absolute; top:12px; left:12px; width:58px; height:66px; z-index:2;
  background:#f4f5f8; border:2px solid #b8bcc6;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #c8ccd4;
  display:flex; align-items:flex-start; justify-content:center; overflow:hidden;
}
.nc-stage { display:grid; place-items:center; min-height:212px; }

/* the bolt: hex head + threaded shaft + travelling hex nut */
.nc-bolt { display:flex; flex-direction:column; align-items:center; }
.nc-head {
  width:50px; height:28px; z-index:1;
  background: linear-gradient(180deg,#d8dbe2,#a4aab6 65%,#7f8593);
  border:2px solid #565b67;
  clip-path: polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);
}
.nc-track { position:relative; width:44px; height:150px; margin-top:-2px; }
.nc-shaft {
  position:absolute; left:50%; top:0; bottom:0; width:22px; transform:translateX(-50%);
  background:
    repeating-linear-gradient(-24deg, rgba(255,255,255,.55) 0 2px, transparent 2px 6px),
    linear-gradient(90deg,#868c9a,#c6cad2 45%,#868c9a);
  border:2px solid #565b67; border-top:none; border-radius:0 0 4px 4px;
}
.nc-nut {
  position:absolute; left:50%; width:52px; height:26px; z-index:2;
  top: calc((100% - 26px) * var(--pos,0) / 100);
  transform: translateX(-50%);
  background: linear-gradient(180deg,#e3e6ec,#a9aeba 58%,#868c99);
  border:2px solid #4c515c;
  clip-path: polygon(0 50%,16% 0,84% 0,100% 50%,84% 100%,16% 100%);
}
.nc-nut::before {                    /* the shaft passing through the bore */
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58%; height:36%; border-radius:2px;
  background: linear-gradient(#5f646f,#868c99);
}
.nc-nut.turn { animation: nutturn .18s ease; }         /* a quick 'turning' flip */
@keyframes nutturn { 50% { transform: translateX(-50%) scaleX(.55); } }
.nc-nut.locked { border-color:#3a8a4a; }
.nc-nut.locked::before { background:#3a8a4a; }

/* the small reference bolt, scaled down inside its window — anchored to the
   top so the shrink is deterministic (a centered transform-origin depended
   on delicate box-size math and could clip the whole thing out of view) */
.nc-mini { transform: scale(.36); transform-origin: top center; margin-top: 3px; }

/* arrow controls */
.nc-controls { display:flex; gap:14px; justify-content:center; margin-top:8px; }
.nc-arrow {
  width:40px; height:30px; display:grid; place-items:center; cursor:pointer;
  font-size:18px; color:var(--ink);
  background:#eceef3; border:2px solid #b8bcc6;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #c8ccd4;
}
.nc-arrow:active { box-shadow: inset 2px 2px 0 #c8ccd4; }

.nc-foot { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#fff; }
.nc-refresh {
  width:30px; height:30px; display:grid; place-items:center; cursor:pointer;
  font-size:17px; color:#2f5fb0; background:#eceef3; border:2px solid #b8bcc6;
}
.nutcap .cap-msg { padding:4px 12px; min-height:22px; }

/* ============ Cozy Ambient Mixer (mixer.exe) ============ */
.mx { background:var(--chrome); padding:12px 14px 14px; }
.mx-head { font-family:var(--font-pixel); font-size:11px; color:var(--title); letter-spacing:.5px; }
.mx-sub { font-size:16px; color:var(--ink-soft); margin:4px 0 12px; line-height:1.2; }
.mx-row {
  display:flex; align-items:center; gap:8px; padding:8px 0;
  border-bottom:1px dotted var(--chrome-dark);
}
.mx-ico { width:22px; text-align:center; font-size:18px; }
.mx-name { width:104px; font-size:16px; color:var(--ink); }
.mx-row.muted .mx-ico, .mx-row.muted .mx-name { opacity:.45; }

/* Win98 fader */
.mx-slider { -webkit-appearance:none; appearance:none; flex:1; height:18px; background:transparent; cursor:pointer; }
.mx-slider::-webkit-slider-runnable-track {
  height:8px; background:#fff; border:2px solid var(--chrome-darker);
  box-shadow: inset 1px 1px 0 var(--chrome-dark);
}
.mx-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:18px; margin-top:-7px;
  background: var(--chrome); border:2px solid var(--chrome-darker);
  box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
}
.mx-slider::-moz-range-track { height:8px; background:#fff; border:2px solid var(--chrome-darker); }
.mx-slider::-moz-range-thumb {
  width:12px; height:18px; border-radius:0; background:var(--chrome); border:2px solid var(--chrome-darker);
}
.mx-slider:disabled { opacity:.5; cursor:not-allowed; }

.mx-btn {
  width:30px; height:24px; display:grid; place-items:center; cursor:pointer; font-size:13px;
  background:var(--chrome); border:2px solid var(--chrome-darker);
  box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
}
.mx-btn:active { box-shadow: inset 1px 1px 0 var(--chrome-dark); }
.mx-foot { font-size:14px; color:var(--ink-soft); margin-top:12px; text-align:center; line-height:1.3; }

/* board frozen after a spy accusation */
.mx.mx-frozen { position:relative; }
.mx.mx-frozen .mx-row, .mx.mx-frozen .mx-moist { pointer-events:none; opacity:.5; filter:grayscale(.4); }
.mx.mx-frozen::after {
  content:"⛔ AUDIO BOARD FROZEN"; position:absolute; inset:0; z-index:5;
  display:grid; place-items:center; letter-spacing:1px;
  font-family:var(--font-pixel); font-size:12px; color:#c62828;
  background:rgba(20,24,34,.14);
}

/* fader + Trust Tax lock veil */
.mx-fader { position:relative; flex:1; display:flex; align-items:center; }
.mx-row.locked .mx-slider { opacity:.4; }
.mx-tax {
  position:absolute; inset:-4px 0; display:grid; place-items:center; cursor:not-allowed;
  font-size:13px; color:#7a1f1f;
  background: repeating-linear-gradient(45deg, rgba(217,83,106,.16) 0 6px, transparent 6px 12px);
}
.mx-tax:hover { background: repeating-linear-gradient(45deg, rgba(217,83,106,.28) 0 6px, transparent 6px 12px); }

/* Chassis Moisture meter */
.mx-moist { margin-top:12px; }
.mx-moist-top { display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--font-pixel); font-size:9px; color:var(--ink-soft); letter-spacing:1px; }
.mx-moist-val { font-family:var(--font-pixel); font-size:11px; color:var(--title); }
.mx-moist-bar { height:14px; background:#fff; margin-top:4px; padding:1px; overflow:hidden; }
.mx-moist-bar > i {
  display:block; height:100%; width:0%;
  background: repeating-linear-gradient(90deg,#5aa9d6 0 8px,#3f86b8 8px 12px);
  transition: width .18s linear;
}
.mx-moist.high .mx-moist-val { color:var(--error); }
.mx-moist.high .mx-moist-bar > i { background: repeating-linear-gradient(90deg,#e2687d 0 8px,#c62828 8px 12px); }
.mx-moist-hint { font-size:13px; color:var(--ink-soft); margin-top:5px; line-height:1.3; }

/* Trust Tax audio captcha */
.taxcap { width:344px; }
.tx-body { background:#20242e; padding:14px 14px 8px; color:#dfe7ff; }
.tx-note { font-size:17px; line-height:1.25; color:#a9c8ff; margin-bottom:12px; }
.tx-note b { color:#ffe08a; }
.tx-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.tx-play {
  font-family:var(--font-pixel); font-size:11px; color:#20242e; cursor:pointer;
  background:#ffe08a; border:2px solid #b58a1f; padding:8px 12px;
}
.tx-play:active { box-shadow: inset 2px 2px 0 #b58a1f; }
.tx-eq { display:flex; align-items:flex-end; gap:3px; height:22px; }
.tx-eq i { width:4px; height:4px; background:#3ad0b0; }
.tx-eq.on i { animation: txeq .6s ease-in-out infinite; }
.tx-eq.on i:nth-child(2){ animation-delay:.1s } .tx-eq.on i:nth-child(3){ animation-delay:.2s }
.tx-eq.on i:nth-child(4){ animation-delay:.3s } .tx-eq.on i:nth-child(5){ animation-delay:.15s }
@keyframes txeq { 0%,100%{ height:4px } 50%{ height:20px } }
.tx-input { width:100%; letter-spacing:6px; text-align:center; }

/* fogged-glass overlay */
#fog {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:9500; cursor:grab; touch-action:none;
  image-rendering:auto;
}
#fog:active { cursor:grabbing; }
#fog-hint {
  position:fixed; left:50%; top:46%; transform:translate(-50%,-50%);
  z-index:9501; pointer-events:none;
  font-family:var(--font-pixel); font-size:16px; color:#3a4a55;
  text-shadow:0 1px 0 rgba(255,255,255,.6); letter-spacing:2px;
  transition: opacity .3s ease; animation: blink 1.4s steps(2) infinite;
}

/* traffic-light captcha — cozy 2D pixel scene + selection grid */
.tl-scene-wrap { padding:3px; background:#2f5fb0; }
.tl-scene {
  position:relative; width:100%; aspect-ratio:1; overflow:hidden;
  background: linear-gradient(#a7d9f0 0%, #cfeaf2 44%, #e9d9b8 58%, #d8c199 66%);
  image-rendering:pixelated;
}
.tl-sun {
  position:absolute; top:8%; right:12%; width:15%; height:15%;
  background:#ffe08a; border-radius:50%; box-shadow:0 0 0 5px rgba(255,224,138,.35);
}
.tl-cloud { position:absolute; height:8%; width:22%; background:#fff; border-radius:999px; opacity:.92; }
.tl-cloud::before, .tl-cloud::after { content:""; position:absolute; background:#fff; border-radius:50%; }
.tl-cloud::before { width:55%; height:150%; left:14%; top:-72%; }
.tl-cloud::after  { width:42%; height:130%; right:12%; top:-42%; }
.tl-cloud.c1 { top:13%; left:9%; }
.tl-cloud.c2 { top:27%; left:54%; width:18%; }
/* cozy hills / treeline on the horizon */
.tl-city {
  position:absolute; left:0; right:0; bottom:22%; height:26%; opacity:.85;
  background:
    radial-gradient(60% 120% at 18% 100%, #6f9c74 0 60%, transparent 61%),
    radial-gradient(72% 130% at 55% 100%, #5f8f68 0 60%, transparent 61%),
    radial-gradient(60% 120% at 88% 100%, #6f9c74 0 60%, transparent 61%);
}
.tl-road { position:absolute; left:0; right:0; bottom:0; height:22%; background:#3a3f46; border-top:3px solid #2a2d33; }
.tl-road::after {
  content:""; position:absolute; top:46%; left:0; right:0; height:9%;
  background: repeating-linear-gradient(90deg,#ffd23f 0 8%,transparent 8% 18%);
}
/* the traffic light itself */
.tl-light { position:absolute; top:0; bottom:0; width:25%; z-index:2; }
.tl-pole { position:absolute; left:50%; transform:translateX(-50%); width:14%; bottom:0;
  background: linear-gradient(90deg,#2b2f36,#4a515c 50%,#2b2f36); }
.tl-head {
  position:absolute; left:50%; transform:translateX(-50%); width:60%; height:44%;
  background:#1c2028; border:2px solid #0e1015; border-radius:14%;
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly;
  padding:6% 0; box-shadow: inset 0 0 0 2px #333a45;
}
.tl-lamp { width:52%; aspect-ratio:1; border-radius:50%; background:#2a2d33; }
.tl-lamp.r { background:#ff5a5a; box-shadow:0 0 6px 1px rgba(255,90,90,.7); }
.tl-lamp.y { background:#ffd23f; }
.tl-lamp.g { background:#4fd06a; }
/* selection grid laid over the scene */
.tl-grid { position:absolute; inset:0; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); }
.tl-cell { position:relative; cursor:pointer; border:1px solid rgba(255,255,255,.4); transition: background .08s; }
.tl-cell:hover { background: rgba(255,255,255,.14); }
.tl-cell.sel { background: rgba(47,95,176,.45); box-shadow: inset 0 0 0 3px #2f5fb0; }
.tl-cell.sel::after {
  content:"✔"; position:absolute; top:4px; left:4px; width:20px; height:20px;
  display:grid; place-items:center; background:#2f5fb0; color:#fff; border-radius:50%;
  font-size:12px; box-shadow:0 0 0 2px #fff;
}

/* ============================================================
   Browser app
   ============================================================ */
.br { display:flex; flex-direction:column; height:100%; background:#fff;}
.br .chrome { background: var(--chrome); padding:6px; display:flex; flex-direction:column; gap:6px; border-bottom:2px solid var(--chrome-dark);}
.br .tabs { display:flex; gap:2px; }
.br .tab { padding:6px 12px; font-family:var(--font-pixel); font-size:10px; background:var(--chrome-dark); cursor:pointer; }
.br .tab.active { background:#fff; }
.br .bar { display:flex; gap:6px; align-items:center; }
.br .nav { display:flex; gap:2px; }
.br .navbtn { width:28px; height:26px; display:grid; place-items:center; cursor:pointer; font-size:14px;}
.br .url { flex:1; font-family:var(--font-body); font-size:20px; padding:4px 10px; outline:none; }
.br .go { }
.br .view { flex:1; overflow:auto; background:#fff; padding:0; }

/* search engine home */
.se { display:flex; flex-direction:column; align-items:center; padding:60px 20px; gap:20px; min-height:100%;
      background: radial-gradient(120% 80% at 50% 0%, #eef4f2, #fff); }
.se .logo { font-family:var(--font-logo); font-size:30px; color:var(--title); text-shadow:2px 2px 0 var(--accent-soft); }
.se .logo b:nth-child(1){color:#d9536a} .se .logo b:nth-child(2){color:#e0a020} .se .logo b:nth-child(3){color:#3a8a4a} .se .logo b:nth-child(4){color:#2f4fd9}
.se .sub { font-size:18px; color:var(--ink-soft); margin-top:-8px;}
.se .searchrow { display:flex; width:min(520px,90%); }
.se input { flex:1; font-family:var(--font-body); font-size:22px; padding:8px 12px; outline:none;}
.se .tips { font-size:16px; color:var(--ink-soft); max-width:460px; text-align:center; }
.se .lucky { display:flex; gap:10px; }

/* results */
.sr { padding:16px 22px; font-family:var(--font-body); }
.sr .stat { font-size:16px; color:var(--ink-soft); margin-bottom:16px;}
.sr .res { margin-bottom:18px; max-width:600px; }
.sr .res .u { font-size:15px; color:var(--ok); }
.sr .res .t { font-size:24px; color:var(--link); cursor:pointer; line-height:1.1;}
.sr .res .t:hover { text-decoration:underline; }
.sr .res .d { font-size:18px; color:var(--ink-soft); line-height:1.2; }
.sr .pages { display:flex; gap:8px; margin:20px 0; font-size:22px; align-items:center; flex-wrap:wrap;}
.sr .pages .pg { cursor:pointer; color:var(--link); padding:2px 6px;}
.sr .pages .pg.on { color:var(--ink); font-weight:bold; background:var(--accent-soft);}

/* "Search Successful" page shown after the mechanical captcha */
.success { padding:26px 22px; font-family:var(--font-body); text-align:center; }
.success .success-badge { font-size:56px; line-height:1; margin-bottom:8px; }
.success h1 {
  font-family:var(--font-logo); font-size:24px; color:var(--ok);
  text-shadow:2px 2px 0 #cdead0; line-height:1.4; margin-bottom:10px;
}
.success > p { font-size:19px; color:var(--ink-soft); margin-bottom:18px; }
.success .success-card { background:#fff; text-align:left; max-width:600px; margin:0 auto; }

/* generic app content */
.pad { padding:14px; font-size:20px; line-height:1.35; }
.pad textarea { width:100%; height:100%; min-height:200px; border:none; outline:none; resize:none; font-family:var(--font-body); font-size:22px; background:#fff; padding:8px;}

/* ============================================================
   Snake game
   ============================================================ */
.snake-wrap { display:flex; flex-direction:column; height:100%; background:#1a1f18; }
.snake-hud {
  display:flex; justify-content:space-between; align-items:center; padding:6px 12px;
  font-family:var(--font-pixel); font-size:11px; color:#bdf0b0; background:#0f130d;
}
.snake-hud .lvl b { color:#ffe08a; }
.snake-canvas-wrap { flex:1; display:grid; place-items:center; padding:10px; position:relative; }
#snakeCanvas { background:#0d110b; box-shadow: inset 0 0 0 2px #2c3a26; image-rendering:pixelated;}
.snake-over {
  position:absolute; inset:0; display:none; flex-direction:column; gap:14px;
  align-items:center; justify-content:center; background:rgba(10,14,9,.86); color:#e8ffd8;
  font-family:var(--font-pixel); text-align:center; padding:20px;
}
.snake-over.show { display:flex; }
.snake-over h2 { font-size:16px; color:#ff6b6b; line-height:1.6; }
.snake-start {
  position:absolute; inset:0; display:flex; flex-direction:column; gap:16px;
  align-items:center; justify-content:center; background:rgba(10,14,9,.92); color:#bdf0b0;
  font-family:var(--font-pixel); text-align:center; padding:20px;
}
.snake-start h2 { font-size:16px; color:#ffe08a; line-height:1.7;}
.snake-start p { font-size:11px; color:#8fbf82; line-height:1.9; font-family:var(--font-pixel);}

/* ============================================================
   Rickroll finale + CRT overlay
   ============================================================ */
/* Subtle CRT scanlines — now always on for a cozy retro-tube feel.
   The finale bumps intensity via .on. */
#crt {
  position:absolute; inset:0; z-index:12000; pointer-events:none; display:block;
  opacity:.45;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
  animation: crtflicker 4s steps(2) infinite;
}
#crt.on {
  opacity:1;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px);
}
@keyframes crtflicker { 0%,96%,100% { opacity:.45; } 98% { opacity:.32; } }

.finale {
  position:absolute; inset:0; z-index:11000; display:none; flex-direction:column;
  align-items:center; justify-content:center; gap:22px; padding:24px; text-align:center;
  background: radial-gradient(120% 120% at 50% 50%, #241a3a, #0a0713);
  overflow:hidden;
}
.finale.show { display:flex; }
.finale .rr {
  font-family:var(--font-logo); font-size:26px; color:#ffe08a; line-height:1.7;
  text-shadow: 3px 3px 0 #d9536a; z-index:2;
}
.finale .dancer { font-size:90px; animation: dance .5s steps(2) infinite; z-index:2;}
@keyframes dance { 50% { transform: translateY(-14px) rotate(6deg);} }
.finale .lyric { font-family:var(--font-body); font-size:26px; color:#a9c8ff; min-height:32px; z-index:2;}
.finale .q { font-family:var(--font-pixel); font-size:14px; color:#fff; line-height:1.8; z-index:2;}
.finale .opts { display:flex; flex-direction:column; gap:10px; z-index:2; }
.finale .disco { position:absolute; inset:0; opacity:.5; z-index:0;
  background: conic-gradient(#d9536a,#e0a020,#3a8a4a,#2f4fd9,#6a5bc4,#d9536a);
  animation: spin 6s linear infinite; filter: blur(40px);}
.finale .finale-inner { z-index:2; display:flex; flex-direction:column; align-items:center; gap:20px; }
.finale .notes { display:flex; gap:18px; font-size:30px; z-index:2; }
.finale .notes span { display:inline-block; animation: dance .5s steps(2) infinite; }
.finale .notes span:nth-child(2){ animation-delay:.1s } .finale .notes span:nth-child(3){ animation-delay:.2s }
.finale .notes span:nth-child(4){ animation-delay:.3s } .finale .notes span:nth-child(5){ animation-delay:.4s }
.finale .marquee { width:min(560px,86vw); overflow:hidden; white-space:nowrap;
  border-top:2px solid #6a5bc4; border-bottom:2px solid #6a5bc4; padding:6px 0; z-index:2; }
.finale .marquee > span { display:inline-block; padding-left:100%;
  font-family:var(--font-pixel); font-size:13px; color:#ffe08a; animation: mq 13s linear infinite; }
@keyframes mq { to { transform: translateX(-200%); } }
.finale .you { min-width:180px; font-size:20px; padding:14px 22px; animation: dance .6s steps(2) infinite; }

/* Blue Screen of Death — the exit */
.bsod-body { background:#0000aa !important; overflow:hidden; }
.bsod {
  position:fixed; inset:0; background:#0000aa; color:#fff; z-index:99999;
  font-family:var(--font-body), monospace; font-size:22px; line-height:1.5;
  padding:9vh 9vw; overflow:auto;
}
.bsod .bsod-face { font-family:var(--font-logo); font-size:64px; margin-bottom:18px; }
.bsod h1 { font-family:var(--font-pixel); font-size:26px; margin-bottom:22px; letter-spacing:1px; }
.bsod p { margin-bottom:16px; max-width:900px; }
.bsod .stop { background:#c0c0c0; color:#0000aa; display:inline-block;
  padding:3px 12px; margin:6px 0 18px; font-family:var(--font-pixel); font-size:13px; }

/* generic modal veil for captcha gates */
.veil {
  position:absolute; inset:0; background:rgba(20,24,34,.55); z-index:400;
  display:grid; place-items:center;
}

/* utility */
.center { display:grid; place-items:center; height:100%; }
.stack { display:flex; flex-direction:column; gap:10px; }
.row { display:flex; gap:8px; }
.hidden { display:none !important; }
.nowrap { white-space:nowrap; }

/* responsive-ish for small screens */
@media (max-width: 640px) {
  .win { max-width: 96vw; }
  #boot .logo { font-size: 18px; }
}

/* ============================================================
   Text captcha + pattern captcha (login gauntlet & browser gate)
   ============================================================ */
.cap-glyph {
  background:#20242e; color:#dfe7ff; text-align:center;
  font-family:var(--font-logo); font-size:30px; letter-spacing:2px;
  padding:20px 12px; user-select:none; overflow:hidden; line-height:1.4;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
}
.cap-glyph .cap-quote { font-family:var(--font-body); font-size:24px; color:#a9c8ff; letter-spacing:0; }
.cap-note { font-size:16px; color:var(--ink-soft); padding:8px 12px 0; text-align:center; }
.cap-inwrap { padding:12px 12px 4px; }
.cap-input {
  width:100%; font-family:var(--font-body); font-size:24px; padding:8px 10px;
  color:var(--ink); outline:none;
}
.cap-input:focus { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light), 0 0 0 2px var(--title); }
.cap-input:disabled { color:var(--ok); background:#eef7ee; }

.cap-seq {
  display:flex; align-items:center; justify-content:center; gap:8px;
  flex-wrap:wrap; padding:20px 12px; background:#20242e;
}
.cap-seqcell {
  min-width:52px; height:52px; padding:0 6px; display:grid; place-items:center;
  font-size:26px; background:#cfd8e6; color:#000;
}
.cap-qcell { background:#ffe08a; color:#7a1f1f; font-family:var(--font-logo); font-size:22px; }
.cap-opts {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:12px;
}
.cap-opt {
  aspect-ratio:1; display:grid; place-items:center; font-size:26px; cursor:pointer;
  background:var(--chrome); min-height:48px; color:#000;
}
.cap-opt:hover { background:#ded5c0; }
.cap-opt.sel { box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light), 0 0 0 3px var(--title); background:#dfe7ff; }

/* the locked mini-window that drops over a gated browser window */
.lockbox { width:344px; max-width:94%; }
.lockbox .lockhead {
  background: linear-gradient(90deg,#7a1f1f,#c62828); color:#fff;
  font-family:var(--font-pixel); font-size:11px; padding:6px 10px;
  display:flex; align-items:center; gap:8px;
}
.lockbox .lockbody { background:var(--chrome); }
.veil.locking { animation: errpop .16s ease-out; }

/* login gauntlet chrome */
.login-prog {
  font-family:var(--font-pixel); font-size:10px; color:var(--title);
  text-align:center; padding:2px 0 12px; letter-spacing:.5px;
}
.login-host .cap { width:auto; }
.login-host .banner { border-radius:0; }
/* compact the login captchas so even the tallest (step 6) fits the card */
.login-host .cap .banner { padding:10px 12px; }
.login-host .cap .banner .k { font-size:11px; }
.login-host .cap .banner .q { font-size:18px; margin-top:4px; }
.login-host .cap-glyph { font-size:20px; padding:12px 10px; letter-spacing:1px; line-height:1.3; }
.login-host .cap-glyph .cap-quote { font-size:17px; }
.login-host .cap-note { font-size:14px; padding:6px 12px 0; }
.login-host .cap-inwrap { padding:10px 12px 2px; }
.login-host .cap-input { font-size:20px; padding:6px 9px; }
.login-host .foot { padding:8px 12px; }
.login-host .cap-msg { font-size:16px; padding:4px 12px; min-height:20px; }
.login-host .cap-counter { padding:0 12px 6px; }

/* app windows get a sensible default size floor */
.appwin .body { background:#fff; }

/* ============================================================
   Alive Test — the full-screen "are you still there?" takeover.
   Blanks the whole OS, looms a giant Spud behind a lone panel.
   Signature: a live PRESENCE scope that jumps with your motion,
   the same energy that gates the music.
   ============================================================ */
#aac-overlay {
  position:absolute; inset:0; z-index:10000; overflow:hidden;
  background: radial-gradient(120% 100% at 50% 26%, #17131f 0%, #06050b 100%);
  animation: aac-fade .35s ease-out;
}
@keyframes aac-fade { from { opacity:0; } to { opacity:1; } }

/* Spud, enormous, leaning in from the top with his face in full view and
   his eyes cast down at the little screen below. */
.aac-bg { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aac-bg .spud-guy {
  position:absolute; left:18%; top:-2%; bottom:auto; cursor:default;
  transform: translateX(-50%) scale(15);
  transform-origin: top center;
  opacity:.96;
  animation: aac-loom 5s ease-in-out infinite;
}
/* the giant eyes track the cursor (driven from presence.js) */
@keyframes aac-loom {
  0%,100% { transform: translateX(-50%) scale(15); }
  50%     { transform: translateX(-50%) scale(15) translateY(-.5px); }
}

/* the little screen he's watching — small, over on the right */
.aac-panel {
  position:absolute; right:5vw; top:50%; left:auto; bottom:auto;
  transform:translateY(-50%);
  z-index:2; width:272px; max-width:86vw;
  background: var(--chrome); border:2px solid var(--chrome-darker);
  box-shadow:
    inset 2px 2px 0 0 var(--chrome-light),
    inset -2px -2px 0 0 var(--chrome-dark),
    0 16px 50px rgba(0,0,0,.8);
  animation: aac-pop .32s ease-out;
}
@keyframes aac-pop {
  from { opacity:0; transform:translateY(-50%) translateX(18px); }
  to   { opacity:1; transform:translateY(-50%) translateX(0); }
}
.aac-titlebar {
  height:28px; display:flex; align-items:center; gap:8px; padding:0 8px;
  background: linear-gradient(90deg,#1c2028,#2a3140); color:#dfe7ff;
  font-family:var(--font-pixel); font-size:11px; letter-spacing:.5px;
}
.aac-titlebar .tico { font-size:14px; }
.aac-panel .body { background:#161a22; }
.aac { font-family: var(--font-body); color:#dfe7ff; }

/* --- the presence scope / VU meter --- */
.aac-scope {
  position:relative; background:#0f1219; padding:14px 14px 10px;
  border-bottom:2px solid #2a3140; overflow:hidden;
}
.aac-scope::after {                 /* eerie tube scanline */
  content:""; position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
.aac-bars {
  display:flex; align-items:flex-end; justify-content:center; gap:3px;
  height:56px; position:relative; z-index:1;
}
.aac-bars i {
  width:6px; height:5px; border-radius:1px;
  background: linear-gradient(#8fe0a0, #ffd591 58%, #e0657f);
  transition: height .06s linear;
}
.aac-read {
  display:flex; align-items:baseline; justify-content:space-between;
  margin-top:10px; position:relative; z-index:1;
}
.aac-read .lab { font-family:var(--font-pixel); font-size:9px; color:#7f8aa5; letter-spacing:2px; }
.aac-score {
  font-family:var(--font-logo); font-size:30px; color:#ffd591; line-height:1;
  text-shadow:0 0 10px rgba(255,190,110,.5); transition: color .2s;
}
.aac-peak {
  position:relative; z-index:1; text-align:right; margin-top:2px;
  font-family:var(--font-pixel); font-size:9px; color:#5c6580;
}

/* --- task card --- */
.aac-task { padding:14px 16px 16px; }
.aac-eyebrow { font-family:var(--font-pixel); font-size:9px; letter-spacing:2px; color:#e0657f; }
.aac-instru { font-size:22px; color:#fff; margin:6px 0 12px; line-height:1.15; }
.aac-stage { display:flex; flex-direction:column; align-items:center; gap:12px; padding:4px 0; min-height:150px; justify-content:center; }
.aac-hint { font-size:15px; color:#8f98b5; text-align:center; }
.aac-status {
  font-family:var(--font-pixel); font-size:10px; margin-top:12px; min-height:16px;
  color:#7fd7c8; letter-spacing:.5px; text-align:center;
}
.aac-status.bad { color:#e0657f; animation: aacnudge .3s linear; }
.aac-status.ok  { color:#8fe0a0; }
@keyframes aacnudge { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 75%{transform:translateX(3px)} }
.aac-done { font-size:64px; color:#8fe0a0; text-shadow:0 0 16px rgba(143,224,160,.6); animation: errpop .3s ease-out; }

/* --- demo: smooth circle --- */
.aac-demo { position:relative; width:128px; height:128px; }
.aac-demo.circle .guide { position:absolute; inset:10px; border-radius:50%; border:2px dashed rgba(159,168,210,.4); }
.aac-demo.circle .orbit { position:absolute; inset:10px; animation: orbit 2.4s linear infinite; }
.aac-demo.circle .orbit .dot {
  position:absolute; top:-5px; left:50%; width:10px; height:10px; margin-left:-5px; border-radius:50%;
  background:#ffd591; box-shadow:0 0 8px 2px rgba(255,213,145,.8);
}
.aac-demo.circle .prog {
  position:absolute; inset:6px; border-radius:50%;
  background: conic-gradient(#8fe0a0 calc(var(--p,0) * 1%), rgba(255,255,255,.05) 0);
  -webkit-mask: radial-gradient(circle, transparent 44%, #000 46%);
          mask: radial-gradient(circle, transparent 44%, #000 46%);
}
@keyframes orbit { to { transform: rotate(360deg); } }

/* --- demo: wiggle --- */
.aac-demo.wiggle { display:grid; place-items:center; }
.aac-demo.wiggle .cur {
  font-size:52px; animation: wig .34s steps(2) infinite;
  filter: drop-shadow(0 0 6px rgba(255,213,145,.5));
}
@keyframes wig { 0%,100%{transform:translateX(-11px) rotate(-7deg)} 50%{transform:translateX(11px) rotate(7deg)} }

/* --- demo: rhythm --- */
.aac-demo.rhythm { display:grid; place-items:center; cursor:pointer; }
.aac-beat {
  width:74px; height:74px; border-radius:50%; border:2px solid #2a3140; position:relative;
  display:grid; place-items:center; color:#7f8aa5; font-family:var(--font-pixel); font-size:9px;
}
.aac-beat .pulse { position:absolute; inset:-2px; border-radius:50%; border:2px solid #ffd591; opacity:0; }
.aac-beat.hit .pulse { animation: beatpulse .5s ease-out; }
@keyframes beatpulse { 0%{opacity:.85; transform:scale(1)} 100%{opacity:0; transform:scale(1.55)} }

/* --- wiggle progress bar --- */
.aac-fill { width:160px; height:12px; background:#0f1219; border:2px solid #2a3140; padding:1px; }
.aac-fill > i {
  display:block; height:100%; width:0%; transition: width .12s linear;
  background: repeating-linear-gradient(90deg,#8fe0a0 0 8px,#6fc487 8px 12px);
}

/* ============================================================
   Spud the Potato — the taskbar mascot who wants nothing from you.
   Sits on the bar with tea; blinks, sips, and heckles on click.
   ============================================================ */
:root {
  --spud:        #c98a4b;   /* warm potato skin */
  --spud-shade:  #a86a34;
  --spud-line:   #6e451f;   /* outline / dimples */
  --spud-hi:     #e6b072;   /* top highlight */
  --spud-cheek:  #e58f8f;
  --spud-cup:    #f2e9d6;
  --spud-tea:    #a9673a;
}
#spud {
  position:relative; flex:0 0 auto; width:60px; align-self:stretch;
  margin:0 12px;                        /* clean, uncrowded gap from the clock */
  z-index:2;                            /* peek above taskbar siblings */
}
#spud[hidden] { display:none; }
/* the whole guy is scaled up here (origin = the bar he sits on) so he grows
   UPWARD and bigger, while the speech bubble / text / voice stay untouched */
.spud-guy {
  position:absolute; left:50%; bottom:calc(100% + 10px); cursor:pointer;
  width:38px; height:46px;
  transform: translateX(-50%) scale(1.5);
  transform-origin: bottom center;      /* feet rest on the taskbar's top edge */
  animation: spud-bob 3.2s ease-in-out infinite;
}
.spud-guy:focus-visible { outline:2px dashed var(--title); outline-offset:6px; border-radius:6px; }

/* Spud's tiny pixel umbrella — pops up when the mixer gets too rainy */
.spud-brolly { display:none; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:34px; height:22px; z-index:4; }
#spud.rainy .spud-brolly { display:block; animation: brolly-in .3s ease-out; }
.spud-brolly::before {                 /* canopy: three colourful panels */
  content:""; position:absolute; top:0; left:0; width:34px; height:15px;
  background: conic-gradient(from 180deg at 50% 100%,
    #d9536a 0 60deg, #ffe08a 60deg 120deg, #6a5bc4 120deg 180deg);
  border:2px solid #3a2e7a; border-bottom:none; border-radius:34px 34px 0 0;
}
.spud-brolly::after {                  /* the stick */
  content:""; position:absolute; top:13px; left:50%; transform:translateX(-50%);
  width:2px; height:11px; background:#3a2e7a;
}
@keyframes brolly-in {
  from { transform:translateX(-50%) translateY(8px) scale(.5); opacity:0; }
  to   { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}
@keyframes spud-bob {
  0%,100% { transform: translateX(-50%) translateY(0)    scale(1.5); }
  50%     { transform: translateX(-50%) translateY(-2px) scale(1.5); }
}

/* body — a lumpy potato with a 2px outline and warm shading */
.spud-body {
  position:absolute; left:2px; bottom:0; width:32px; height:39px;
  background:
    radial-gradient(70% 55% at 34% 26%, var(--spud-hi) 0%, transparent 55%),
    linear-gradient(160deg, var(--spud) 0%, var(--spud) 58%, var(--spud-shade) 100%);
  border:2px solid var(--spud-line);
  border-radius: 52% 52% 46% 46% / 62% 62% 40% 40%;
  box-shadow: inset 0 -3px 4px rgba(110,69,31,.35);
}
/* potato "eyes" / dimples for spud-ness */
.spud-dimple { position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--spud-line); opacity:.5; }
.spud-dimple.d1 { top:6px; right:5px; }
.spud-dimple.d2 { bottom:9px; left:5px; }
.spud-dimple.d3 { bottom:5px; right:8px; width:2px; height:2px; }

/* big expressive eyes */
.spud-eyes { position:absolute; top:9px; left:50%; transform:translateX(-50%);
  display:flex; gap:5px; }
.spud-eyes .eye {
  width:9px; height:10px; background:#fffdf5; border:1.5px solid var(--spud-line);
  border-radius:50%; display:grid; place-items:center; overflow:hidden;
  transition: transform .07s ease;      /* blink squishes vertically */
}
.spud-eyes .eye b {
  width:4px; height:5px; background:var(--ink); border-radius:50%;
  transform: translate(0.5px, 1px);      /* pupils look down at the tea */
  animation: spud-glance 6s ease-in-out infinite;
}
@keyframes spud-glance {
  0%,40%,100% { transform: translate(.5px,1px); }
  55%,70%     { transform: translate(-1.5px,0); }   /* side-eye */
}
.spud-eyes.blink .eye { transform: scaleY(.12); }

/* rosy cheeks */
.spud-cheek { position:absolute; top:19px; width:5px; height:3px; border-radius:50%;
  background:var(--spud-cheek); opacity:.6; }
.spud-cheek.c1 { left:5px; } .spud-cheek.c2 { right:5px; }

/* mouth — a small line that flaps open while talking */
.spud-mouth {
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  width:6px; height:2px; background:var(--spud-line); border-radius:0 0 4px 4px;
  transition: height .06s, width .06s;
}
.spud-guy.talking .spud-mouth { animation: spud-talk .16s steps(1) infinite; }
@keyframes spud-talk {
  0%   { height:2px; width:6px; }
  50%  { height:6px; width:7px; border-radius:50%; }
  100% { height:3px; width:5px; }
}
/* while sipping, eyes contentedly squint and the mouth hides behind the cup */
.spud-guy.sipping .spud-eyes .eye { transform: scaleY(.3); }
.spud-guy.sipping .spud-mouth { opacity:0; }

/* the tea cup, held out to the side */
.spud-cup {
  position:absolute; right:-2px; bottom:7px; width:12px; height:10px;
  background: linear-gradient(var(--spud-cup), #ded1b4);
  border:1.5px solid var(--spud-line); border-radius:2px 2px 3px 3px; z-index:2;
}
.spud-cup::before {                     /* tea surface */
  content:""; position:absolute; left:1px; right:1px; top:1px; height:3px;
  background:var(--spud-tea); border-radius:1px;
}
.spud-cup::after {                      /* handle */
  content:""; position:absolute; right:-4px; top:2px; width:4px; height:5px;
  border:1.5px solid var(--spud-line); border-left:none; border-radius:0 3px 3px 0;
}
.spud-guy.sipping .spud-cup {
  animation: spud-sip 1.1s ease-in-out;
}
@keyframes spud-sip {
  0%,100% { transform: translate(0,0) rotate(0); }
  45%,60% { transform: translate(-6px,-6px) rotate(-24deg); }  /* lift to mouth */
}

/* rising steam */
.spud-steam { position:absolute; right:0; bottom:17px; width:12px; height:16px; z-index:1; }
.spud-steam i {
  position:absolute; bottom:0; width:2px; height:8px; border-radius:2px;
  background: linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,0));
  opacity:0; animation: spud-steam 2.4s ease-out infinite;
}
.spud-steam i:nth-child(1){ left:2px;  animation-delay:0s;   }
.spud-steam i:nth-child(2){ left:5px;  animation-delay:.8s;  }
.spud-steam i:nth-child(3){ left:8px;  animation-delay:1.6s; }
@keyframes spud-steam {
  0%   { opacity:0; transform: translateY(2px) scaleY(.6); }
  30%  { opacity:.8; }
  100% { opacity:0; transform: translateY(-12px) translateX(2px) scaleY(1.2); }
}

/* speech bubble — deliberately native OS chrome so Spud stays the star */
.spud-bubble {
  position:absolute; right:-6px; bottom:calc(100% + 88px);   /* clear his head now he sits above the bar */
  width:max-content; max-width:250px; min-width:120px;
  padding:9px 12px 10px; text-align:left;
  background: var(--chrome); border:2px solid var(--chrome-darker);
  box-shadow:
    inset 2px 2px 0 0 var(--chrome-light),
    inset -2px -2px 0 0 var(--chrome-dark),
    3px 4px 0 rgba(20,16,40,.35);
  transform-origin: bottom right; transform: scale(.28); opacity:0;
  pointer-events:none;
  transition: transform .2s cubic-bezier(.22,1.35,.4,1), opacity .15s ease;
}
.spud-bubble.show { transform: scale(1); opacity:1; pointer-events:auto; }
.spud-bubble::after {                   /* tail pointing down to Spud */
  content:""; position:absolute; right:14px; bottom:-9px; width:12px; height:9px;
  background: var(--chrome);
  border-right:2px solid var(--chrome-darker); border-bottom:2px solid var(--chrome-darker);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  transform: skewX(-14deg);
}
.spud-bubble .sb-name {
  font-family:var(--font-pixel); font-size:9px; letter-spacing:1px;
  color:var(--title); margin-bottom:3px;
}
.spud-bubble .sb-text {
  font-family:var(--font-body); font-size:19px; line-height:1.2; color:var(--ink);
  min-height:22px;
}
.spud-bubble .sb-text::after {          /* typewriter caret while talking */
  content:"▌"; color:var(--ink-soft); opacity:0; margin-left:1px;
}
.spud-bubble.typing .sb-text::after { opacity:1; animation: blink 1s steps(2) infinite; }

/* context-aware moods — the body stays cozy; only these quiet cues shift.
   At "suspicious"+ his pupils track the cursor instead of idly glancing,
   and the bubble's name + border lean toward the OS's raspberry. */
#spud.watching .spud-eyes b { animation: none; transition: transform .12s ease; }
#spud.mood-2 .sb-name { color:#9a5a52; }
#spud.mood-2 .spud-bubble, #spud.mood-3 .spud-bubble { border-color:#b06a72; }
#spud.mood-3 .sb-name { color:#c0424f; letter-spacing:2px; }
#spud.mood-3 .spud-bubble {
  box-shadow:
    inset 2px 2px 0 0 var(--chrome-light),
    inset -2px -2px 0 0 var(--chrome-dark),
    3px 4px 0 rgba(60,16,30,.42);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .spud-guy { transform: translateX(-50%) scale(1.5) !important; }
  .spud-eyes .eye b { transform: translate(.5px,1px) !important; }
  .spud-guy.sipping .spud-eyes .eye { transform: scaleY(.3) !important; }
  .spud-guy.sipping .spud-mouth { opacity:1 !important; }
  .spud-steam i { opacity:0 !important; }
  .spud-bubble { transform: scale(1) !important; opacity:1 !important; pointer-events:auto !important; }
}
/* ============================================================
   Spud-Pet — desktop-docked Tamagotchi widget (spud_pet.exe)
   ============================================================ */
#spudpet {
  position: absolute; right: 12px; bottom: 50px; width: 218px;
  z-index: 8500; padding: 0; display: flex; flex-direction: column;
  font-family: var(--font-body);
  border: 2px solid var(--chrome-darker);
  box-shadow: inset 2px 2px 0 var(--chrome-light), inset -2px -2px 0 var(--chrome-dark),
              0 6px 20px rgba(0,0,0,.4);
}
#spudpet.pulse { animation: sp-pulse .4s ease; }
@keyframes sp-pulse { 0%,100%{ transform: scale(1);} 50%{ transform: scale(1.04);} }
#spudpet.shake { animation: shakeit .3s linear; }

#spudpet .sp-title {
  display: flex; align-items: center; gap: 6px; padding: 4px 6px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color: #fff; font-family: var(--font-pixel); font-size: 10px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
#spudpet .sp-tico { font-size: 13px; }
#spudpet .sp-ttl { flex: 1; letter-spacing: .5px; }
#spudpet .sp-x {
  cursor: pointer; width: 17px; height: 15px; display: grid; place-items: center;
  background: var(--chrome); color: var(--ink); font-size: 10px;
  box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
}
#spudpet .sp-x:hover { background: #f2c4cc; }
#spudpet .sp-x:active { box-shadow: inset -1px -1px 0 var(--chrome-light), inset 1px 1px 0 var(--chrome-dark); }

#spudpet .sp-stage {
  position: relative; margin: 7px; height: 104px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: 4px;
  background: radial-gradient(circle at 50% 38%, #3a496a, #171f2f 78%);
  box-shadow: inset 0 0 0 2px #0d1320, inset 0 0 22px rgba(0,0,0,.55);
}
/* twinkle + scanlines so the little screen feels alive */
#spudpet .sp-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay; opacity: .5;
}
#spudpet .sp-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 40%, transparent 55%, rgba(0,0,0,.45) 100%);
}
#spudpet canvas {
  width: 104px; height: 104px; image-rendering: pixelated;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.4));
}
#spudpet[data-mode="hyper"] .sp-stage { background: radial-gradient(circle at 50% 38%, #6b5624, #2a2110 78%); }
#spudpet[data-mode="frozen"] .sp-stage { background: radial-gradient(circle at 50% 38%, #315060, #16232b 78%); }
#spudpet[data-mode="sleep"] .sp-stage { background: radial-gradient(circle at 50% 38%, #26324e, #10162a 78%); }
#spudpet[data-mode="trust"] .sp-stage { background: radial-gradient(circle at 50% 38%, #5a2f3e, #24141c 78%); }

#spudpet .sp-dialog {
  position: relative; margin: 2px 7px 6px; padding: 6px 8px; min-height: 42px;
  font-size: 15px; line-height: 1.18; color: var(--ink); background: #fffdf5;
  border: 2px solid var(--chrome-darker);
  box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
}
#spudpet .sp-dialog::before {   /* little speech tail pointing up at the screen */
  content: ""; position: absolute; top: -7px; left: 22px;
  border: 6px solid transparent; border-bottom-color: var(--chrome-darker);
}
#spudpet .sp-name {
  display: inline-block; color: #fff; background: var(--title-2);
  font-family: var(--font-pixel); font-size: 8px; padding: 1px 4px; margin-right: 5px;
  vertical-align: 1px;
}
#spudpet.talking .sp-dialog { box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark), 0 0 0 2px var(--title-2); }

#spudpet .sp-meters { padding: 2px 8px 6px; display: flex; flex-direction: column; gap: 5px; }
#spudpet .sp-mrow { display: flex; align-items: center; gap: 6px; font-size: 12px; }
#spudpet .sp-mico { width: 15px; text-align: center; font-size: 12px; }
#spudpet .sp-mlbl { width: 56px; font-family: var(--font-pixel); font-size: 8px; color: var(--ink-soft); }
#spudpet .sp-meter {
  flex: 1; height: 13px; background: #20242e; padding: 2px; overflow: hidden;
  border: 1px solid #10131a;
  box-shadow: inset 1px 1px 0 rgba(0,0,0,.5);
}
#spudpet .sp-meter > i {
  display: block; height: 100%; width: 50%; border-radius: 1px;
  background: linear-gradient(180deg, #6ef0cf, #2ba48c);
  box-shadow: 0 0 5px rgba(110,240,207,.6);
  transition: width .25s linear;
}
#spudpet .sp-meter.low > i, #spudpet .sp-meter.cold > i {
  background: linear-gradient(180deg, #ff8a9e, #b23a4f);
  box-shadow: 0 0 6px rgba(217,83,106,.7);
  animation: sp-blinklow 1s steps(2) infinite;
}
#spudpet .sp-meter.hot > i {
  background: linear-gradient(180deg, #ffd27a, #e2687d);
  box-shadow: 0 0 6px rgba(226,104,125,.7);
  animation: sp-blinklow .5s steps(2) infinite;
}
@keyframes sp-blinklow { 50% { opacity: .5; } }

#spudpet .sp-btns { padding: 0 8px 9px; display: flex; flex-direction: column; gap: 5px; }
#spudpet .sp-act {
  font-family: var(--font-body); font-size: 15px; padding: 6px 9px; cursor: pointer;
  color: var(--ink); text-align: left; letter-spacing: .3px;
  transition: background .1s ease, transform .06s ease;
}
#spudpet .sp-act:hover { background: #f6f0e2; }
#spudpet .sp-act:active { transform: translateY(1px); box-shadow: inset 2px 2px 0 0 var(--chrome-dark), inset -2px -2px 0 0 var(--chrome-light); }

/* ---- Caffeine crisis: the whole screen calibrates 180° ---- */
#screen.sp-calibrating {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
  transition: transform 1.1s cubic-bezier(.6,-0.2,.3,1.3);
}
.sp-banner {
  position: absolute; top: 0; left: 0; right: 0; z-index: 12500;
  background: repeating-linear-gradient(45deg, #7a1f1f 0 14px, #c62828 14px 28px);
  color: #ffe08a; font-family: var(--font-pixel); font-size: 11px;
  text-align: center; padding: 6px; letter-spacing: 1px;
  text-shadow: 1px 1px 0 #000; animation: sp-slidedown .3s ease;
}
@keyframes sp-slidedown { from { transform: translateY(-100%);} to { transform: translateY(0);} }

/* ---- Warmth crisis: frozen read-only lock ---- */
#sp-freeze {
  position: absolute; inset: 0; z-index: 8000; cursor: not-allowed;
}
#sp-freeze .sp-frost {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(234,246,251,.55), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(207,234,242,.5), transparent 45%),
    linear-gradient(160deg, rgba(191,227,239,.42), rgba(150,196,214,.5));
  backdrop-filter: blur(1px);
  box-shadow: inset 0 0 90px 30px rgba(255,255,255,.35);
}
#sp-freeze .sp-frost-tag {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  background: #16232b; color: #bfe3ef; font-family: var(--font-pixel); font-size: 11px;
  padding: 8px 14px; border: 2px solid #3a5561; letter-spacing: 1px;
}

/* ---- Paranoia crisis: the rapid-fire Vibe Check ---- */
#sp-vibe {
  position: absolute; inset: 0; z-index: 11500;
  background: rgba(10,10,18,.72); display: grid; place-items: center;
  animation: sp-fade .2s ease;
}
#sp-vibe.done { opacity: 0; transition: opacity .25s ease; }
@keyframes sp-fade { from { opacity: 0;} to { opacity: 1;} }
.sp-vibe-card { width: 340px; padding: 0; overflow: hidden; }
.sp-vibe-head {
  background: linear-gradient(90deg, var(--accent), #e2687d); color: #fff;
  font-family: var(--font-pixel); font-size: 10px; padding: 8px 10px;
}
.sp-vibe-prog { float: right; opacity: .85; }
.sp-vibe-timer { height: 6px; background: #2b2620; }
.sp-vibe-timer > i { display: block; height: 100%; width: 100%; background: #ffe08a; }
.sp-vibe-body { padding: 16px; text-align: center; }
.sp-vibe-q { font-size: 20px; margin-bottom: 14px; line-height: 1.2; }
.sp-vibe-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sp-vibe-opt { font-size: 26px; padding: 8px 14px; }
.sp-vibe-in { width: 150px; text-align: center; }
.sp-vibe-msg { min-height: 24px; font-size: 16px; text-align: center; padding: 0 12px 12px; }
.sp-vibe-msg.ok { color: var(--ok); } .sp-vibe-msg.bad { color: var(--error); }

/* ============================================================
   brew.exe — café terminal
   ============================================================ */
.brewwin .body { padding: 0; background: #0d120e; display: flex; flex-direction: column; }
.brew {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: #0d120e; color: #9ff0c4; font-family: var(--font-body); font-size: 17px;
}
.brew-out {
  flex: 1; overflow-y: auto; padding: 8px 10px; line-height: 1.28;
  white-space: pre-wrap; word-break: break-word;
}
.brew-ln { min-height: 1.28em; }
.brew-ln.dim { color: #5f8f74; }
.brew-ln.echo { color: #cfeede; }
.brew-ln.err { color: #ff8a8a; }
.brew-ln.ok { color: #a9f0b8; }
.brew-ln.hd { color: #ffe08a; }
.brew-ln.art { color: #7fd7c8; font-family: var(--font-pixel); font-size: 11px; line-height: 1.5; }
.brew-line {
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-top: 2px solid #1c2a20; background: #0a0f0b;
}
.brew-prompt { color: #4fd0a0; font-family: var(--font-pixel); font-size: 11px; flex: 0 0 auto; }
.brew-in {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: #d6ffe6; font-family: var(--font-body); font-size: 17px; caret-color: #4fd0a0;
}
.brew-in:disabled { opacity: .5; }

.brew-sudo {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(6,9,7,.9); display: grid; place-items: center; padding: 10px;
}
.brew-sudo[hidden] { display: none; }
.brew-sudo-inner { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 8px; }
.brew-sudo-bar {
  background: #20242e; color: #ff8a8a; font-family: var(--font-pixel); font-size: 10px;
  padding: 8px 10px; letter-spacing: 1px;
}
.brew-sudo-x {
  align-self: flex-end; font-family: var(--font-pixel); font-size: 9px; color: #9fb0c0;
  cursor: pointer; padding: 3px 6px; border: 1px solid #3a4450;
}
.brew-sudo-x:hover { color: #fff; background: #3a4450; }

/* ============================================================
   Taskbar Quick Launch — every app as a hover-labelled icon
   ============================================================ */
#quicklaunch {
  display: flex; align-items: flex-end; gap: 4px; height: 38px;
  padding: 0 6px; margin: 0 4px; flex: 0 0 auto; max-width: 52%;
  overflow-x: auto; overflow-y: hidden;
  border-left: 2px solid var(--chrome-dark);
  border-right: 2px solid var(--chrome-dark);
  box-shadow: inset 1px 0 0 var(--chrome-light), inset -1px 0 0 var(--chrome-light);
}
#quicklaunch::-webkit-scrollbar { height: 4px; }
#quicklaunch::-webkit-scrollbar-thumb { background: var(--chrome-dark); }
.qlicon {
  position: relative; width: 34px; height: 34px; flex: 0 0 auto; margin-bottom: 1px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; user-select: none; border-radius: 5px;
  transition: background .12s ease, transform .1s ease;
}
.qlicon .ql-glyph {
  display: block; width: 30px; height: 30px; display: grid; place-items: center;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,.35));
}
.qlicon .ql-glyph svg { width: 30px; height: 30px; image-rendering: pixelated; }
.qlicon .ql-emoji { font-size: 22px; line-height: 1; }
.qlicon:hover { background: rgba(255,253,245,.16); }
.qlicon:hover .ql-glyph { transform: translateY(-1px); }
.qlicon.bounce { animation: ql-bounce .32s ease; }
@keyframes ql-bounce { 0%,100%{ transform: translateY(0);} 40%{ transform: translateY(-5px);} }
/* Ubuntu-style running dot under the icon */
.qlicon .ql-dot {
  position: absolute; left: 50%; bottom: 1px; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: transparent;
  transition: background .15s ease, box-shadow .15s ease, width .15s ease;
}
.qlicon.running .ql-dot {
  width: 12px; background: #7fd7c8; box-shadow: 0 0 4px #7fd7c8;
}
.qlicon.running { background: rgba(127,215,200,.12); }
/* hover name tag floating above the dock */
.qlicon .ql-tip {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(4px);
  white-space: nowrap; font-family: var(--font-pixel); font-size: 9px;
  background: #16232b; color: #eae3d2; padding: 4px 7px; border: 1px solid #3a5561;
  opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease;
  z-index: 6300;
}
.qlicon:hover .ql-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================================
   Window Draft — per-window condensation (window_fog.js)
   ============================================================ */
.wfog-blur {
  position: absolute; inset: 0; z-index: 40; pointer-events: none;
  opacity: 0; transition: opacity .3s ease;
  background: rgba(255,255,255,0.01);
}
.wfog-canvas {
  position: absolute; inset: 0; z-index: 41; width: 100%; height: 100%;
  opacity: 0; transition: opacity .3s ease; cursor: grab; touch-action: none;
  pointer-events: none;   /* clear glass must never block clicks/typing beneath it */
}
.wfog-canvas:active { cursor: grabbing; }
.wfog-hint {
  position: absolute; left: 50%; top: 50%; z-index: 42;
  transform: translate(-50%, -50%);
  font-family: var(--font-pixel); font-size: 10px; color: #2b3a44;
  background: rgba(255,255,255,.55); padding: 6px 10px;
  opacity: 0; pointer-events: none; transition: opacity .3s ease; text-align: center;
}
.wfog-hint.show { opacity: 1; }
.wfog-warn {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  z-index: 46; max-width: 92%; text-align: center;
  background: rgba(20,8,8,.88); border: 1px solid #ff8a8a;
  padding: 6px 10px; display: none; flex-direction: column; gap: 4px;
  pointer-events: none;
}
.wfog-warn.show { display: flex; animation: wfog-in .15s ease; }
.wfog-warn-msg {
  font-family: var(--font-pixel); font-size: 9px; line-height: 1.5; color: #ffdede;
  text-shadow: 1px 1px 0 #000;
}
.wfog-warn-timer {
  font-family: var(--font-pixel); font-size: 11px; color: #ffe08a; letter-spacing: .5px;
}
.wfog-lock {
  position: absolute; inset: 0; z-index: 50;
  background: repeating-linear-gradient(135deg, rgba(120,10,10,.92) 0 16px, rgba(70,4,4,.92) 16px 32px);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 16px; text-align: center;
}
.wfog-lock.show { display: flex; animation: wfog-in .18s ease; }
@keyframes wfog-in { from { opacity: 0; } to { opacity: 1; } }
.wfog-lock-msg {
  font-family: var(--font-pixel); font-size: 11px; line-height: 1.7; color: #ffdede;
  text-shadow: 1px 1px 0 #000;
}
.wfog-lock-timer {
  font-family: var(--font-pixel); font-size: 20px; color: #fff;
  background: rgba(0,0,0,.35); padding: 4px 12px; letter-spacing: 1px;
}

/* ============================================================
   radio.exe — retro lo-fi radio set
   ============================================================ */
.rkwin .body { padding: 0; background: #2a2018; }
.rk { position: relative; height: 100%; display: flex; flex-direction: column;
  font-family: var(--font-body);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #6a4a30, #3a2818);
}
.rk-set { padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; height: 100%; }

/* amber VFD-style display */
.rk-display {
  position: relative; background: #0d1712; border: 2px solid #10231a;
  box-shadow: inset 0 0 18px rgba(0,0,0,.7); border-radius: 4px;
  padding: 10px 14px; display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: baseline; gap: 8px;
}
.rk-freq { font-family: var(--font-logo); font-size: 26px; color: #ffcf6a;
  text-shadow: 0 0 8px rgba(255,207,106,.6); letter-spacing: 1px; }
.rk-fm { font-family: var(--font-pixel); font-size: 9px; color: #d98a3a; }
.rk-name { font-family: var(--font-pixel); font-size: 10px; color: #7fd7c8; justify-self: start; }
.rk-eq { display: flex; gap: 2px; align-items: flex-end; height: 20px; }
.rk-eq i { width: 3px; background: #7fd7c8; box-shadow: 0 0 4px #7fd7c8;
  animation: rk-eq 1s ease-in-out infinite; }
.rk-eq i:nth-child(1){ height: 8px;  animation-delay: 0s; }
.rk-eq i:nth-child(2){ height: 16px; animation-delay: .15s; }
.rk-eq i:nth-child(3){ height: 11px; animation-delay: .3s; }
.rk-eq i:nth-child(4){ height: 18px; animation-delay: .45s; }
.rk-eq i:nth-child(5){ height: 7px;  animation-delay: .6s; }
@keyframes rk-eq { 0%,100%{ transform: scaleY(.4);} 50%{ transform: scaleY(1);} }

.rk-ticks { display: flex; justify-content: space-around; }
.rk-tick { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font-pixel); font-size: 9px; color: #c8905c; }
.rk-tick b { width: 8px; height: 8px; border-radius: 50%; background: #2a1c12;
  box-shadow: inset 0 0 0 2px #1a1008; transition: background .15s, box-shadow .15s; }
.rk-tick.on { color: #ffcf6a; }
.rk-tick.on b { background: #ffcf6a; box-shadow: 0 0 8px #ffcf6a; }
.rk-tick:hover b { box-shadow: inset 0 0 0 2px #ffcf6a; }

/* the tuning knob */
.rk-knobwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: auto; }
.rk-knob { width: 78px; height: 78px; border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: radial-gradient(circle at 38% 34%, #6b6b74, #2b2b34 70%, #16161c);
  box-shadow: 0 4px 10px rgba(0,0,0,.5), inset 0 2px 3px rgba(255,255,255,.2),
              inset 0 -3px 6px rgba(0,0,0,.6);
  display: grid; place-items: center; position: relative; }
.rk-knob::after { content: ""; position: absolute; inset: 10px; border-radius: 50%;
  background: repeating-conic-gradient(#3a3a44 0 6deg, #2b2b34 6deg 12deg); opacity: .5; }
.rk-knob.grab { box-shadow: 0 2px 6px rgba(0,0,0,.5), inset 0 0 0 2px #7fd7c8; }
.rk-dial { width: 100%; height: 100%; position: relative; z-index: 1; }
.rk-dial i { position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 4px; height: 20px; background: #ffcf6a; border-radius: 2px; box-shadow: 0 0 6px #ffcf6a; }
.rk-knoblbl { font-family: var(--font-pixel); font-size: 9px; color: #c8905c; letter-spacing: 2px; }

/* frequency-alignment captcha overlay */
.rk-align { position: absolute; inset: 0; z-index: 5; background: rgba(8,10,16,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px; }
.rk-align[hidden], .rk-vibe[hidden] { display: none; }
.rk-align-head { font-family: var(--font-pixel); font-size: 11px; color: #ffcf6a; text-align: center; }
.rk-wave { border: 2px solid #10231a; background: #0d1320; image-rendering: pixelated; max-width: 100%; }
.rk-sliders { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 280px; }
.rk-sliders label { display: flex; align-items: center; gap: 10px;
  font-family: var(--font-pixel); font-size: 9px; color: #7fd7c8; }
.rk-sliders input[type=range] { flex: 1; accent-color: #7fd7c8; }
.rk-align-msg { font-size: 15px; color: #c8d6e0; text-align: center; min-height: 20px; }
.rk-align-msg.good { color: #7fd7c8; }

/* idle vibe-check overlay */
.rk-vibe { position: absolute; inset: 0; z-index: 6; background: rgba(8,10,16,.92);
  display: grid; place-items: center; padding: 16px; }
.rk-vibe-card { background: var(--chrome); border: 2px solid var(--chrome-darker);
  box-shadow: inset 2px 2px 0 var(--chrome-light), inset -2px -2px 0 var(--chrome-dark);
  padding: 0 0 14px; width: 100%; max-width: 300px; overflow: hidden; }
.rk-vibe-head { background: linear-gradient(90deg, var(--title), var(--title-2)); color: #fff;
  font-family: var(--font-pixel); font-size: 10px; padding: 8px 10px; }
.rk-vibe-q { padding: 16px 14px 12px; font-size: 19px; line-height: 1.2; color: var(--ink); text-align: center; }
.rk-vibe-opts { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; }
.rk-vibe-opt { width: 100%; }

/* ============================================================
   recycle_bin.exe — waste-sorting facility
   ============================================================ */
.rbwin .body { padding: 0; background: #d7d0c0; }
.rb { height: 100%; display: flex; flex-direction: column; font-family: var(--font-body); }
.rb-head {
  font-family: var(--font-pixel); font-size: 9px; color: #fff; padding: 7px 10px;
  background: linear-gradient(90deg, #3a8a4a, #2f6f8f); letter-spacing: .5px;
}
.rb-bins { display: flex; gap: 8px; padding: 12px; }
.rb-bin {
  flex: 1; position: relative; min-height: 96px; cursor: default;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 4px; padding: 8px 4px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 22%, #eae3d2), #cfc7b4);
  border: 2px solid var(--tint);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.18);
  transition: transform .1s ease, box-shadow .1s ease;
}
.rb-bin-mouth {
  position: absolute; top: 8px; left: 12px; right: 12px; height: 10px;
  background: #1b1b22; border-radius: 3px; box-shadow: inset 0 3px 4px rgba(0,0,0,.7);
}
.rb-bin-glyph { font-size: 26px; margin-top: 12px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.3)); }
.rb-bin-label {
  font-family: var(--font-pixel); font-size: 8px; text-align: center; color: #2b2620;
  line-height: 1.3;
}
.rb-bin.rb-over { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--tint), inset 2px 2px 0 rgba(255,255,255,.4); }
.rb-bin.rb-accept { animation: rb-gulp .24s ease; }
@keyframes rb-gulp { 50% { transform: translateY(4px) scaleY(.9); } }

.rb-pool {
  flex: 1; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px;
  padding: 10px 12px; overflow-y: auto; background: #20242e;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.4);
}
.rb-item {
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; cursor: grab;
  background: var(--chrome); color: var(--ink); font-size: 14px; user-select: none;
  border: 2px solid var(--chrome-darker);
  box-shadow: inset 1px 1px 0 var(--chrome-light), inset -1px -1px 0 var(--chrome-dark);
  touch-action: none; transition: opacity .1s ease;
}
.rb-item:active { cursor: grabbing; }
.rb-item-glyph { font-size: 18px; }
.rb-item-label { font-family: var(--font-body); }
.rb-item.dragging { opacity: .25; }
.rb-ghost {
  position: fixed; z-index: 13000; pointer-events: none; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; padding: 6px 9px; font-size: 14px;
  background: var(--chrome); color: var(--ink);
  border: 2px solid var(--title); box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
.rb-ghost .rb-item-glyph { font-size: 18px; }
.rb-status { padding: 6px 12px; background: #cfc7b4; border-top: 2px solid var(--chrome-dark); }
.rb-count { font-family: var(--font-pixel); font-size: 9px; color: #3a5a44; }
.rb-clear {
  width: 100%; text-align: center; color: #7fd7c8; font-size: 20px; padding: 24px 12px;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
}

/* the taskbar freeze penalty */
#taskbar.rb-frozen {
  pointer-events: none;
  filter: grayscale(.6) brightness(.7);
}
#taskbar.rb-frozen::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: repeating-linear-gradient(45deg, rgba(198,40,40,.12) 0 12px, rgba(0,0,0,.12) 12px 24px);
}
#rb-freeze-badge {
  position: absolute; right: 120px; top: 50%; transform: translateY(-50%); z-index: 3;
  font-family: var(--font-pixel); font-size: 10px; color: #ffdede;
  background: #7a1f1f; border: 1px solid #c62828; padding: 4px 8px; letter-spacing: 1px;
}

/* ============================================================
   terms_wizard.js — "Terms of Un-Service" installer wizard
   ============================================================ */
#tw-modal {
  position: absolute; inset: 0; z-index: 12800;
  display: grid; place-items: center; padding: 16px;
  background: rgba(10,10,20,.62); animation: tw-fade .18s ease;
}
@keyframes tw-fade { from { opacity: 0; } to { opacity: 1; } }
.tw-win { width: min(560px, 94vw); display: flex; flex-direction: column; overflow: hidden; }
.tw-title {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  background: linear-gradient(90deg, var(--title), var(--title-2));
  color: #fff; font-family: var(--font-pixel); font-size: 11px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.tw-tico { font-size: 14px; }
.tw-body { display: flex; min-height: 300px; }
.tw-side {
  width: 130px; flex: 0 0 130px; padding: 14px 10px;
  background: linear-gradient(180deg, #1e1c48, #0e1030); color: #cdeee8;
  display: flex; flex-direction: column; gap: 18px;
}
.tw-logo {
  font-family: var(--font-logo); font-size: 18px; color: #ffe9a8;
  text-shadow: 2px 2px 0 #b5451f; line-height: 1.5; text-align: center;
}
.tw-steps { display: flex; flex-direction: column; gap: 8px; font-family: var(--font-pixel); font-size: 9px; }
.tw-step { color: #6a7bb0; padding-left: 12px; position: relative; line-height: 1.6; }
.tw-step::before { content: "▸"; position: absolute; left: 0; }
.tw-step.done { color: #7fd7c8; }
.tw-step.active { color: #ffe08a; }
.tw-main { flex: 1; display: flex; flex-direction: column; background: var(--chrome); }
.tw-head { padding: 12px 14px 8px; font-size: 18px; color: var(--ink); }
.tw-doc {
  flex: 1; margin: 0 14px; padding: 12px; overflow-y: auto; max-height: 220px;
  background: #12100a; color: #ffe6a8; border: 2px solid var(--chrome-darker);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.5);
  font-family: var(--font-body); font-size: 17px; line-height: 1.4;
  text-shadow: 0 0 6px rgba(255,207,106,.35);
}
.tw-para { margin-bottom: 12px; }
.tw-filler { color: #a88a52; text-shadow: none; opacity: .85; }
.tw-final { color: #ffe6a8; }
.tw-pancake {
  color: #ffe6a8; text-decoration: underline; cursor: pointer;
}
.tw-pancake:hover { color: #fff; text-shadow: 0 0 8px #ffcf6a; }
.tw-pancake.found { color: #7fd7c8; text-shadow: 0 0 8px #7fd7c8; }
.tw-progress {
  display: flex; justify-content: space-between; padding: 8px 14px;
  font-family: var(--font-pixel); font-size: 9px; color: var(--ink-soft);
}
.tw-progress b { color: var(--title-2); }
.tw-foot {
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 10px 14px; background: #ded5c0; border-top: 2px solid var(--chrome-dark);
  position: relative;
}
.tw-continue.armed { background: linear-gradient(var(--ok), #2f6f3a); color: #fff; }
.tw-agree { position: relative; will-change: transform; }
.tw-agree.fleeing { box-shadow: 0 0 0 2px var(--accent); }

/* ============================================================
   screensaver.js — sleep protocol overlay + pattern lock
   ============================================================ */
#ss-overlay {
  position: absolute; inset: 0; z-index: 11800; overflow: hidden;
  background: #0a0a18; animation: ss-in .6s ease; cursor: none;
}
@keyframes ss-in { from { opacity: 0; } to { opacity: 1; } }
#ss-overlay .ss-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#ss-overlay .ss-tag {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  font-family: var(--font-pixel); font-size: 11px; color: #7fd7c8;
  letter-spacing: 1px; opacity: .7; animation: ss-pulse 3s ease-in-out infinite;
}
@keyframes ss-pulse { 50% { opacity: .3; } }

#ss-lock {
  position: absolute; inset: 0; z-index: 12200; display: grid; place-items: center;
  background: rgba(6,7,16,.86); animation: ss-in .2s ease;
}
.ss-lock-card { width: 300px; padding: 0; overflow: hidden; }
.ss-lock-head {
  background: linear-gradient(90deg, #3a2e7a, #6a5bc4); color: #fff;
  font-family: var(--font-pixel); font-size: 10px; padding: 8px 10px;
}
.ss-lock-cv {
  display: block; margin: 12px auto 6px; background: #12142a;
  border: 2px solid var(--chrome-darker); touch-action: none; cursor: crosshair;
  image-rendering: pixelated;
}
.ss-lock-msg {
  font-size: 14px; color: #c8d6e0; text-align: center; padding: 4px 12px 8px;
  min-height: 34px; line-height: 1.3;
}
.ss-lock-msg.bad { color: #ff8a8a; font-family: var(--font-pixel); font-size: 9px; }
.ss-lock-foot { padding: 0 12px 14px; text-align: center; }

/* ============================================================
   destiny.exe — Spud's fortune parlor
   ============================================================ */
.dzwin .body { padding: 0; background: #1a1330; }
.dz { height: 100%; display: flex; flex-direction: column; font-family: var(--font-body);
  background: radial-gradient(circle at 50% 0%, #2a1f52, #140f26 75%); }
.dz-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 8px 2px; }
.dz-wiz { width: 150px; height: 150px; image-rendering: pixelated; }
.dz-speak {
  font-size: 15px; color: #cdb8ff; text-align: center; min-height: 20px; padding: 0 10px 4px;
  text-shadow: 0 0 8px rgba(150,120,255,.4);
}
.dz-cards { display: flex; gap: 10px; justify-content: center; padding: 6px 10px 10px; }
.dz-card { width: 96px; height: 140px; perspective: 700px; cursor: pointer; }
.dz-card-inner {
  position: relative; width: 100%; height: 100%; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.4,.1,.3,1); will-change: transform;
}
.dz-card.flipped .dz-card-inner { transform: rotateY(180deg); }
.dz-card:hover:not(.flipped) .dz-card-inner { transform: translateY(-4px) rotateZ(-1deg); }
.dz-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}
.dz-back {
  background: repeating-linear-gradient(45deg, #3a2e7a 0 6px, #2a2160 6px 12px);
  border: 2px solid #6a5bc4; display: grid; place-items: center;
}
.dz-back-art { font-size: 34px; color: #ffe08a; text-shadow: 0 0 10px #ffcf6a; }
.dz-front { transform: rotateY(180deg); background: #141024; border: 2px solid #ffcf6a; }
.dz-front canvas { width: 96px; height: 118px; image-rendering: pixelated; }
.dz-cardname {
  font-family: var(--font-pixel); font-size: 7px; color: #ffcf6a; text-align: center;
  padding: 2px; line-height: 1.3; flex: 1; display: grid; place-items: center;
}
.dz-reading {
  flex: 1; margin: 0 10px; padding: 8px 10px; overflow-y: auto; min-height: 40px;
  background: rgba(10,8,20,.6); border: 1px solid #3a2e6a;
  font-size: 15px; color: #d8ccff; line-height: 1.3;
}
.dz-line { margin-bottom: 8px; animation: dz-in .3s ease; }
.dz-line b { color: #ffcf6a; }
@keyframes dz-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.dz-verdict { color: #7fd7c8; font-family: var(--font-pixel); font-size: 10px; line-height: 1.5;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid #3a2e6a; }
.dz-foot { padding: 8px 10px; text-align: center; }