/* =============================================================================
 * apps96.css — styles for the 96 SUITE (apps96.js): MT-DOS, Calc, Outlook
 * Depress, BanSweeper, Drop Cadet, Snake, Ban Hunt, Orca-gotchi, Meltdown,
 * Hydra, Gravity, Popup Storm, Degauss, 8-Mag, Aquarium, Piano, Screensaver,
 * Programs folder. Reuses the Win96 tokens/bevels from retro.css.
 * ===========================================================================*/

/* ---------- generic ---------- */
.a96-canvas{width:100%;height:100%;display:block;touch-action:none}

/* ---------- PROGRAMS folder ---------- */
.a96-progs{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px;padding:10px}
.a96-progs .pi{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 4px;cursor:pointer;
  font-family:var(--sans);font-size:10px;font-weight:700;color:#000;background:transparent;border:1px dotted transparent}
.a96-progs .pi:hover{background:#0000ff18;border-color:#888}
.a96-progs .pi:active{background:#0000ff30}
.a96-progs .pic{font-size:30px;line-height:1;filter:drop-shadow(1px 1px 0 #0003)}

/* ---------- PORTFOLIO (webring) ---------- */
.a96-folio{padding:12px;display:flex;flex-direction:column;gap:9px;font-family:var(--sans);height:100%;box-sizing:border-box}
.a96-folio .fh{text-align:center;font-weight:800;font-size:14px;color:#000080;letter-spacing:1px}
.a96-folio .fh small{display:block;font-weight:400;font-size:10px;color:#555;letter-spacing:0;margin-top:2px}
.a96-folio .site{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;
  text-decoration:none;color:#000;background:var(--face)}
.a96-folio .site:hover{background:#d8d8d8}
.a96-folio .site:active{border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.a96-folio .si{font-size:26px;line-height:1;filter:drop-shadow(1px 1px 0 #0003)}
.a96-folio .sn{flex:1;font-weight:800;font-size:13px}
.a96-folio .sn small{display:block;font-weight:400;font-family:var(--mono);font-size:10px;color:#0000aa;text-decoration:underline}
.a96-folio .go{font-family:var(--mono);font-size:11px;font-weight:700;color:#a00000;white-space:nowrap}
.a96-folio .ff{margin-top:auto;text-align:center;font-family:var(--mono);font-size:10px;color:#555}

/* ---------- MT-DOS ---------- */
.a96-term{height:100%;display:flex;flex-direction:column;background:#000;color:#c9c9c9;
  font-family:var(--mono);font-size:13px;padding:6px}
.a96-term .out{flex:1;overflow:auto;white-space:pre-wrap;word-break:break-word}
.a96-term .line{display:flex;gap:6px;align-items:center}
.a96-term .ps{color:#c9c9c9;white-space:nowrap}
.a96-term .in{flex:1;background:#000;color:#c9c9c9;border:0;outline:0;font:inherit;caret-color:#c9c9c9}
.a96-term .orca{color:#7ee0a0;margin:2px 0}

/* ---------- CALC ---------- */
.a96-calc{padding:8px;display:flex;flex-direction:column;gap:8px;font-family:var(--sans)}
.a96-calc .disp{font-family:var(--mono);font-size:20px;text-align:right;padding:6px 8px;background:#fff;overflow:hidden}
.a96-calc .keys{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.a96-calc .k{font-family:var(--sans);font-size:14px;font-weight:700;padding:9px 0;cursor:pointer;background:var(--face)}
.a96-calc .k:active{border-color:var(--sh) var(--hi) var(--hi) var(--sh)}
.a96-calc .k.op{color:#a00000}
.a96-calc .bal{border-top:1px solid #9a9a9a;padding-top:7px;font-size:11px;display:flex;flex-direction:column;gap:5px}
.a96-calc .bt2{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:#555;text-align:center}
.a96-calc .bal label{display:flex;align-items:center;gap:6px;justify-content:space-between}
.a96-calc .bal .f{width:100px;font-family:var(--mono)}
.a96-calc .eout{font-family:var(--mono);text-align:center;padding:4px;background:#000;color:#33ff66}

/* ---------- OUTLOOK DEPRESS ---------- */
.a96-mail{height:100%;display:flex;flex-direction:column;font-family:var(--sans);font-size:12px;background:var(--face);padding:4px;gap:4px}
.a96-mail .list{flex:none;max-height:45%;overflow:auto;background:#fff}
.a96-mail .row{display:flex;gap:8px;padding:4px 7px;cursor:pointer;border-bottom:1px solid #eee;white-space:nowrap;overflow:hidden}
.a96-mail .row.unread{font-weight:800}
.a96-mail .row:hover{background:#000080;color:#fff}
.a96-mail .row .f{width:34%;overflow:hidden;text-overflow:ellipsis;flex:none}
.a96-mail .row .s{flex:1;overflow:hidden;text-overflow:ellipsis}
.a96-mail .read{flex:1;overflow:auto;background:#fff;padding:10px;line-height:1.55}
.a96-mail .read .hdr{border-bottom:1px solid #ccc;margin-bottom:8px;padding-bottom:6px;color:#333}
.a96-mail .read .ph{color:#888;font-style:italic}
.a96-mail .sub{display:flex;gap:6px;margin-top:8px}
.a96-mail .mono{font-family:var(--mono)}

/* ---------- BANSWEEPER ---------- */
.a96-sw{padding:8px;display:flex;flex-direction:column;gap:8px;align-items:center;font-family:var(--sans)}
.a96-sw .hud{display:flex;justify-content:space-between;align-items:center;width:100%;padding:5px 8px;background:var(--face)}
.a96-sw .led{font-family:var(--mono);font-weight:700;font-size:16px;background:#000;color:#f00;padding:2px 6px;letter-spacing:2px}
.a96-sw .face{font-size:17px;width:34px;height:30px;cursor:pointer;background:var(--face);padding:0}
.a96-sw .grid{display:grid;grid-template-columns:repeat(9,26px);gap:0}
.a96-sw .c{width:26px;height:26px;font-family:var(--sans);font-weight:800;font-size:14px;padding:0;cursor:pointer;
  background:var(--face);border:2px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi);line-height:1}
.a96-sw .c.open{border:1px solid #9a9a9a;background:#d6d6d6}
.a96-sw .c.boom{background:#ff5a5a}
.a96-sw .foot{display:flex;gap:8px;align-items:center;font-size:10px;color:#555}
.a96-sw .flagbtn{font-family:var(--sans);font-size:11px;padding:4px 8px;cursor:pointer;background:var(--face)}

/* ---------- ORCA-GOTCHI ---------- */
.a96-gotchi{height:100%;display:flex;flex-direction:column;gap:8px;padding:10px;font-family:var(--mono);font-size:11px}
.a96-gotchi .scr{position:relative;flex:1;display:grid;place-items:center;background:#04141a;overflow:hidden}
.a96-gotchi .pet{font-size:64px;animation:a96bob 2.8s ease-in-out infinite}
.a96-gotchi .pet.gone{opacity:.18;filter:grayscale(1)}
@keyframes a96bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.a96-gotchi .mood{position:absolute;top:10px;right:12px;font-size:26px}
.a96-gotchi .fx{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center}
.a96-gotchi .float{position:absolute;font-size:20px;animation:a96float .9s ease-out forwards}
@keyframes a96float{to{transform:translateY(-46px);opacity:0}}
.a96-gotchi .bars{display:flex;flex-direction:column;gap:4px}
.a96-gotchi .bars label{display:flex;align-items:center;gap:8px;color:#cde}
.a96-gotchi .bar{flex:1;height:10px;background:#0b0e12;border:1px solid #345;display:block}
.a96-gotchi .bar b{display:block;height:100%;background:linear-gradient(90deg,#ff3ea5,#b06cff);transition:width .3s}
.a96-gotchi .acts{display:flex;gap:6px}
.a96-gotchi .acts .btn{flex:1}
.a96-gotchi .note{min-height:14px;color:#ff9ad8;text-align:center}

/* ---------- MAGIC 8-MAG ---------- */
.a96-8{height:100%;display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px;
  background:#0d0720;color:#e8d8ff;font-family:var(--mono);font-size:12px}
.a96-8 .ball{width:150px;height:150px;border-radius:50%;position:relative;flex:none;
  background:radial-gradient(circle at 34% 28%,#3a3a44,#0a0a0e 60%,#000);box-shadow:0 10px 24px #000b,inset 0 -8px 18px #0009}
.a96-8 .win8{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:78px;height:78px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#1a2a6a,#050a24);display:grid;place-items:center;text-align:center;
  color:#9ecbff;font-size:10.5px;line-height:1.3;padding:8px;border:2px solid #000}
.a96-8 .ball.shake{animation:a96shake .7s ease-in-out}
@keyframes a96shake{0%,100%{transform:translateX(0) rotate(0)}20%{transform:translateX(-13px) rotate(-8deg)}40%{transform:translateX(11px) rotate(7deg)}60%{transform:translateX(-8px) rotate(-5deg)}80%{transform:translateX(5px) rotate(3deg)}}
.a96-8 .q{width:100%;display:flex;gap:6px}
.a96-8 .q input{flex:1}

/* ---------- PIANO ---------- */
.a96-piano{height:100%;display:flex;flex-direction:column;gap:8px;padding:10px;background:#1a1030;font-family:var(--mono);font-size:11px;color:#cde}
.a96-piano .bar{display:flex;gap:8px;align-items:center}
.a96-piano .kbd{position:relative;flex:1;display:flex;min-height:110px}
.a96-piano .wk{flex:1;background:linear-gradient(#fff,#e8e8e8);border:1px solid #444;border-radius:0 0 4px 4px;cursor:pointer;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;color:#999;font-size:9px;user-select:none}
.a96-piano .wk.on{background:#ffd0ee}
.a96-piano .bk{position:absolute;top:0;width:6.2%;height:58%;background:linear-gradient(#333,#000);border-radius:0 0 3px 3px;cursor:pointer;z-index:2;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;color:#777;font-size:8px;user-select:none}
.a96-piano .bk.on{background:#b06cff}

/* ---------- POPUP STORM + ads ---------- */
.a96-storm{padding:12px;font-family:var(--sans);font-size:12px;text-align:center;display:flex;flex-direction:column;gap:8px}
.a96-storm h3{margin:0;font-size:15px}
.a96-storm .best{font-family:var(--mono);color:#555;min-height:12px;margin:0}
.a96-storm .stat{font-family:var(--mono);font-weight:700;min-height:16px}
.a96-ad{position:absolute;z-index:2000;width:240px;background:var(--face);border:2px solid;
  border-color:var(--hi) var(--sh) var(--sh) var(--hi);box-shadow:3px 3px 0 #0006;font-family:var(--sans);font-size:11px;
  animation:a96adin .18s ease-out}
@keyframes a96adin{from{transform:scale(.6);opacity:0}}
.a96-ad .tb{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 5px;
  background:linear-gradient(90deg,#a00080,#ff2bd0);color:#fff;font-weight:800;font-size:10px}
.a96-ad .tb .x{cursor:pointer;background:var(--face);color:#000;padding:0 5px;border:2px solid;border-color:var(--hi) var(--sh) var(--sh) var(--hi)}
.a96-ad .bd{padding:8px;text-align:center;line-height:1.5}
.a96-ad .fake{margin-top:5px;font-family:var(--sans);font-weight:800;font-size:11px;cursor:pointer;padding:4px 12px;
  background:linear-gradient(#ffce5a,#d98a1f);border:2px solid;border-color:#ffe9b0 #6e4a10 #6e4a10 #ffe9b0}

/* ---------- HYDRA ---------- */
.a96-hydra{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;font-family:var(--mono);font-size:12px;padding:10px}
.a96-hydra b{color:#ff5ad0;letter-spacing:1px}
.a96-hydra small{color:#8a6cb0}
.a96-hydra p{margin:2px 0}

/* ---------- SCREENSAVER app + overlay ---------- */
.a96-saver-app{padding:12px;font-family:var(--sans);font-size:12px;display:flex;flex-direction:column;gap:8px;text-align:center}
.a96-saver-app .rowb{display:flex;flex-direction:column;gap:5px}
.a96-saver-app .sv{font-family:var(--sans);font-size:12px;padding:7px;cursor:pointer;background:var(--face)}
.a96-saver-app .sv.on{border-color:var(--sh) var(--hi) var(--hi) var(--sh);background:#dedede;font-weight:800}
.a96-saver{position:fixed;inset:0;z-index:11000;background:#000;cursor:none}

/* ---------- full-screen takeovers ---------- */
.a96-bsod{position:fixed;inset:0;z-index:12000;background:#0000AA;color:#fff;font-family:var(--mono);
  display:grid;place-items:center;padding:30px;cursor:pointer}
.a96-bsod .inner{max-width:640px;white-space:pre-wrap;font-size:14px;line-height:1.6}
.a96-bsod .hdr{background:#AAAAAA;color:#0000AA;padding:0 8px;font-weight:700}
.a96-bsod .blink{animation:a96bl 1s steps(1) infinite}
@keyframes a96bl{50%{opacity:0}}
.a96-melt{position:fixed;inset:0;z-index:11500;pointer-events:none}
.a96-degauss{position:fixed;inset:0;z-index:10500;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(60% 60% at 30% 50%,rgba(255,0,60,.24),transparent 70%),
             radial-gradient(60% 60% at 70% 50%,rgba(0,120,255,.24),transparent 70%);
  animation:a96dg 1.2s ease-out forwards}
@keyframes a96dg{0%{opacity:1}100%{opacity:0}}
body.a96-glitch #desktop,body.a96-glitch #taskbar{animation:a96gl .1s steps(2) infinite}
@keyframes a96gl{0%{transform:translate(0,0)}50%{transform:translate(-5px,3px)}100%{transform:translate(4px,-3px)}}
body.a96-glitch{filter:hue-rotate(90deg) saturate(2.2)}

/* ---------- BAN HUNT ---------- */
.a96-hunt{cursor:none !important}