/* Final production pass: sturdier window sizing, focus states, and app polish. */
:root{
  --idol-cyan:#58dbff;
  --idol-purple:#a78bfa;
  --idol-gold:#f5c344;
  --idol-ink:#080610;
}

*,*::before,*::after{box-sizing:border-box}
button,input,select,textarea{font:inherit}
button:disabled{cursor:not-allowed!important;opacity:.52;filter:grayscale(.35)}

/* One-command-at-a-time: subtle "working…" cue while a terminal command runs
   (js/commands.js guardedRun). The input is disabled during the run so extra
   Enter presses do nothing; it re-enables automatically when the command ends. */
#t-input.term-input-busy,input.term-input-busy{opacity:.6;cursor:progress}
.term-busy #t-input-bar{opacity:.75}
.term-busy #t-status-state::after{content:' · working…';color:var(--idol-gold);opacity:.85}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--idol-cyan);
  outline-offset:2px;
}
.popup-win{max-width:calc(100vw - 16px);max-height:calc(100vh - 40px);overflow:hidden}
.popup-win.show{animation:windowSignalIn .16s steps(3,end)}
@keyframes windowSignalIn{from{opacity:.3;filter:brightness(1.8)}to{opacity:1;filter:none}}
.popup-tb{min-height:29px;flex:0 0 auto}
.popup-tb-x{transition:filter .1s,transform .1s}
.popup-tb-x:hover{filter:brightness(1.22)}
.popup-tb-x:active{transform:translateY(1px)}

/* RADIO ---------------------------------------------------------------- */
#radio-win{
  width:min(520px,calc(100vw - 18px));
  border-color:#45346b;
  background:linear-gradient(180deg,#0f0b1d 0%,#080610 100%);
  box-shadow:7px 7px 0 rgba(0,0,0,.58),0 0 0 1px rgba(88,219,255,.08);
}
#radio-win .popup-tb{
  background:linear-gradient(180deg,#6f3f91 0%,#40205d 52%,#2a143e 100%);
  border-bottom:1px solid #a78bfa55;
}
#radio-win #scene{height:168px;border-bottom:1px solid #19142c}
#radio-on-air{
  position:absolute;top:9px;left:10px;z-index:5;
  display:flex;align-items:center;gap:5px;
  color:#665d75;font-size:8px;letter-spacing:1.5px;
  text-shadow:0 1px #000;
}
#radio-on-air span{width:6px;height:6px;background:#443a4d;border:1px solid #09060d}
#radio-on-air.live{color:#ff8e9f}
#radio-on-air.live span{background:#ff3d5d;box-shadow:0 0 7px #ff3d5d;animation:onAirBlink 1.4s steps(2,end) infinite}
@keyframes onAirBlink{50%{opacity:.42}}
#radio-win .cw{padding:11px 13px 12px;background:linear-gradient(180deg,rgba(27,20,47,.62),rgba(7,5,14,.82))}
#radio-win .srow{padding:0 2px}
#radio-win #npcard{
  min-height:52px;padding:8px 10px;
  border-color:#29203e;
  background:linear-gradient(90deg,rgba(88,219,255,.035),rgba(167,139,250,.055));
  box-shadow:inset 3px 0 0 var(--cc,#a78bfa);
}
#radio-win #np-title{font-size:12px;color:#f6efff}
#radio-win #np-source{text-transform:uppercase;letter-spacing:1.2px}
#radio-win .brow{align-items:center;justify-content:flex-start;gap:6px}
#radio-win .btn{min-height:27px;padding:4px 11px;border-color:#322846;color:#a59caf;background:#090711}
#radio-win .btn:hover{background:#151024}
#radio-win #vibe-btn{border-color:#725ca3;color:#c6aeff}
.radio-volume{
  min-height:27px;margin-left:auto;padding:0 7px;
  display:flex;align-items:center;gap:6px;
  border:1px solid #272034;background:#090711;color:#6e657b;font-size:9px;
}
.radio-volume input{width:76px;accent-color:var(--idol-purple);cursor:pointer}
.radio-volume output{width:29px;text-align:right;color:#9d91ad;font-variant-numeric:tabular-nums}
#radio-win .crow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
#radio-win .ch{min-height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#radio-win #urlrow{margin-top:3px}
#radio-win #urlinput,#radio-win #urlgo{min-height:27px}
#radio-trust-note{margin-top:7px;color:#393244;font-size:8px;letter-spacing:1px;text-align:right}
#radio-win #radio-term{max-height:116px;overflow:auto;border-top-color:#251c37}
#radio-win #mqwrap{border-color:#1d172a;background:#050408}

/* PAC-iDOL ------------------------------------------------------------- */
#pacman-win{
  width:min(390px,calc(100vw - 18px));
  border-color:#7a3a8a;
  background:#0b0711;
  box-shadow:7px 7px 0 rgba(0,0,0,.62),0 0 24px rgba(167,139,250,.12);
}
#pacman-win .popup-tb{background:linear-gradient(180deg,#df64af,#9f2f80 58%,#70205c)}
#idol-game{display:flex;flex-direction:column!important;align-items:stretch;background:#070510;padding:8px;gap:7px;min-height:0}
#idol-game-hud{
  display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:8px;
  min-height:25px;padding:4px 7px;border:1px solid #2b1d3e;background:#100b19;
  color:#ffb7dc;font:10px 'Share Tech Mono',monospace;letter-spacing:.5px;
  font-variant-numeric:tabular-nums;
}
#idol-game-level{color:#58dbff}
#idol-game-best{color:#8d809a;text-align:right}
#idol-game-lives{color:#ff4d7d;letter-spacing:2px;text-shadow:0 0 7px #ff4d7d}
#idol-game-board{position:relative;align-self:center;line-height:0;border:2px solid #33204c;box-shadow:0 0 0 1px #0a0610,0 0 18px rgba(88,219,255,.12);max-width:100%;overflow:hidden}
#idol-pacman-canvas{display:block;width:min(374px,calc(100vw - 44px));height:auto;aspect-ratio:306/342;image-rendering:pixelated;background:#070510}
#idol-game-status{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(4,2,9,.72);color:#fff;text-align:center;
  font:700 13px 'Share Tech Mono',monospace;letter-spacing:2px;line-height:1.6;
  text-shadow:0 0 10px #a78bfa;
}
#idol-game-status.show{display:flex}
#idol-game-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:7px;color:#5d5269;font:8px 'Share Tech Mono',monospace;text-align:center;letter-spacing:.5px}
#idol-game-actions button,#idol-game-touch button{
  min-height:27px;border:1px solid #3b2a50;background:#100a18;color:#bba8cb;
  font:9px 'Share Tech Mono',monospace;cursor:pointer;
}
#idol-game-actions button:hover,#idol-game-touch button:hover{border-color:#58dbff;color:#58dbff}
#idol-game-touch{display:none;grid-template-columns:repeat(3,36px);grid-template-rows:repeat(2,32px);justify-content:center;gap:3px}
#idol-game-touch [data-ipm-dir="up"]{grid-column:2}
#idol-game-touch [data-ipm-dir="left"]{grid-column:1;grid-row:2}
#idol-game-touch [data-ipm-dir="down"]{grid-column:2;grid-row:2}
#idol-game-touch [data-ipm-dir="right"]{grid-column:3;grid-row:2}

/* Small quality fixes -------------------------------------------------- */
.desk-icon{touch-action:manipulation}
#start-menu[style*="display: none"]{pointer-events:none}
body.pixie-cat-dragging .popup-win{pointer-events:none}

/* ── Desktop icon polish ───────────────────────────────────────────────────
   Make the hand-drawn pixel icons read as one tidy, cohesive set WITHOUT
   changing the early-internet look at rest. At rest: classic icons on the
   wallpaper, just a consistent crisp drop-shadow. On hover / keyboard-focus /
   select: a soft rounded "tile" glow behind the icon + a legible label chip, so
   interaction feels smooth and intentional. Keyboard focus gets a clear ring. */
.desk-icon{border-radius:9px;transition:transform .14s ease;}
.desk-icon-img{
  border-radius:10px;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.5));
  transition:filter .16s ease, transform .14s ease, background .16s ease, box-shadow .16s ease;
}
.desk-icon-label{
  padding:1px 6px;border-radius:6px;
  transition:background .16s ease, color .14s ease, text-shadow .14s ease;
}
.desk-icon:hover .desk-icon-img,
.desk-icon:focus-visible .desk-icon-img,
.desk-icon.selected .desk-icon-img{
  background:radial-gradient(120% 120% at 50% 30%, rgba(120,84,158,.42), rgba(24,16,36,.30) 78%);
  box-shadow:inset 0 0 0 1px rgba(255,214,150,.30), 0 0 15px rgba(255,190,110,.32);
}
.desk-icon:hover .desk-icon-label,
.desk-icon:focus-visible .desk-icon-label,
.desk-icon.selected .desk-icon-label{
  background:rgba(52,26,64,.62);
  color:#ffe5b8;
}
.desk-icon:focus-visible{
  outline:2px solid var(--idol-cyan);
  outline-offset:2px;
  background:transparent;
}

@media (max-width:700px),(pointer:coarse){
  #radio-win{width:calc(100vw - 10px)!important;max-height:calc(100vh - 35px)}
  #radio-win #scene{height:140px}
  #radio-win .crow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .radio-volume{width:100%;margin-left:0;justify-content:flex-end}
  .radio-volume input{flex:1}
  #radio-win.rhythm-mode{width:calc(100vw - 8px)!important}
  #radio-win.rhythm-mode #scene{height:min(430px,calc(100vh - 94px))!important}
  #idol-game-touch{display:grid}
  #idol-game-actions span{display:none}
  #idol-game-actions{grid-template-columns:1fr 1fr}
  #pacman-win{max-height:calc(100vh - 34px)}
  #idol-game{overflow:auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}