/* JAZZ CIGARETTES 98, the programs (programs98.js): windows, the boot screen, the screensaver, the cat */
.w98-win{max-height:calc(100dvh - 48px);display:flex;flex-direction:column}
.w98-win .w98-body{overflow:auto;min-height:0}
.w98-icons{flex-wrap:wrap;max-height:calc(100dvh - 170px);align-content:flex-start;column-gap:8px}
.w98-sub{display:flex;flex-direction:column;margin:0 0 2px 22px;border-left:2px solid #808080}
.w98-sub[hidden]{display:none}
.w98-more{width:100%;border:0;background:transparent;font:13px Tahoma,sans-serif;text-align:left;cursor:pointer}
.w98-more b{margin-left:auto;font-weight:400}.w98-more.on{background:#000080;color:#fff}
.w98-item.jc-ctx-item{width:100%;min-height:30px;border:0;background:transparent;font:13px Tahoma,sans-serif;text-align:left;cursor:pointer;padding-left:22px}
.jc-ctx{bottom:auto;min-width:190px}.jc-ctx hr{margin:2px 4px;border:0;border-top:1px solid #808080;border-bottom:1px solid #fff}
.jc-tray-btn{cursor:pointer}
body.jc-refresh{filter:invert(1)}

/* JC-DOS */
.dos-body{padding:0;background:#000}
.dos-out{margin:0;padding:8px 10px 0;height:min(340px,52dvh);overflow:auto;background:#000;color:#c0c0c0;font:14px/1.3 "Courier New",monospace;white-space:pre-wrap;word-break:break-word}
.dos-row{display:flex;align-items:center;padding:0 10px 10px;background:#000;color:#c0c0c0;font:16px "Courier New",monospace;cursor:text}
.dos-ps{white-space:nowrap}
.dos-in{flex:1;min-width:0;padding:0 0 0 2px;background:#000;color:#fff;border:0;outline:0;font:16px "Courier New",monospace;caret-color:#c0c0c0}

/* Bebopsweeper */
.mn-top{display:flex;justify-content:space-between;align-items:center;padding:6px;border:2px inset #fff;margin-bottom:8px}
.mn-led{min-width:46px;padding:1px 4px;background:#000;color:#ff2a2a;font:700 22px/1 "Courier New",monospace;text-align:right;letter-spacing:1px}
.mn-face{width:34px;height:34px;padding:0;background:#c0c0c0;border:2px outset #fff;font:700 14px Tahoma,sans-serif;cursor:pointer}
.mn-face:active{border-style:inset}
.mn-grid{display:grid;grid-template-columns:repeat(9,1fr);border:3px inset #fff;width:100%;aspect-ratio:1;user-select:none;touch-action:manipulation}
.mn-cell{display:flex;align-items:center;justify-content:center;padding:0;min-width:0;background:#c0c0c0;border:3px outset #fff;font:700 15px Tahoma,sans-serif;cursor:pointer;color:#000}
.mn-cell.open{border:1px solid #808080;background:#bdbdbd;cursor:default}
.mn-cell.flag{color:#ff5fa2;font-size:10px;letter-spacing:-.5px}
.mn-cell.badge{background:#c0c0c0;color:#000;font:900 13px "Arial Black",sans-serif}.mn-cell.boom{background:#ff2a2a}
.mn-cell[data-n="1"]{color:#0000ff}.mn-cell[data-n="2"]{color:#008000}.mn-cell[data-n="3"]{color:#ff0000}.mn-cell[data-n="4"]{color:#000080}
.mn-cell[data-n="5"]{color:#800000}.mn-cell[data-n="6"]{color:#008080}.mn-cell[data-n="7"]{color:#000}.mn-cell[data-n="8"]{color:#808080}
.mn-foot{display:flex;justify-content:flex-end;margin-top:6px}
.mn-mode{min-height:30px;padding:0 10px;background:#c0c0c0;border:2px outset #fff;font:12px Tahoma,sans-serif;cursor:pointer}.mn-mode.on{border-style:inset;color:#ff5fa2}
.mn-msg{margin:6px 0 0;font:11px Tahoma,sans-serif;min-height:2.6em}

/* Sticker Paint */
.w98-body:has(.pt-canvas){display:grid;grid-template-columns:auto 1fr;grid-template-areas:"tools wrap" "pal pal" "bar bar";gap:6px}
.pt-tools{grid-area:tools;display:grid;grid-template-columns:repeat(2,26px);gap:2px;align-content:start}
.pt-tool{width:26px;height:26px;padding:0;background:#c0c0c0;border:2px outset #fff;font:14px Tahoma,sans-serif;cursor:pointer}.pt-tool.on{border-style:inset;background:#dcdcdc}
.pt-wrap{grid-area:wrap;border:2px inset #fff;background:#808080;line-height:0}
.pt-canvas{width:100%;height:auto;cursor:crosshair;touch-action:none;image-rendering:pixelated}
.pt-pal{grid-area:pal;display:grid;grid-template-columns:repeat(9,1fr);gap:2px}
.pt-sw{height:18px;padding:0;border:2px inset #fff;cursor:pointer}
.pt-bar{grid-area:bar;display:flex;gap:6px;align-items:center}
.pt-cur{width:30px;height:24px;border:2px inset #fff}
.pt-size,.dp-sel{height:28px;font:16px Tahoma,sans-serif}
.pt-bar button{min-height:28px;padding:0 12px;background:#c0c0c0;border:2px outset #fff;font:12px Tahoma,sans-serif;cursor:pointer}.pt-bar button:last-child{margin-left:auto}

/* Buddy List */
.bd-head{padding:6px;background:#fff8d6;border:2px inset #fff;font:12px Tahoma,sans-serif}
.bd-list{margin-top:6px;max-height:min(300px,46dvh);overflow:auto;background:#fff;border:2px inset #fff;font:12px Tahoma,sans-serif}
.bd-group summary{padding:3px 6px;font-weight:700;cursor:pointer}
.bd-row{display:flex;justify-content:space-between;gap:8px;width:100%;padding:3px 6px 3px 18px;border:0;background:transparent;color:#000;text-decoration:none;font:12px Tahoma,sans-serif;text-align:left;cursor:pointer}
.bd-row:hover{background:#000080;color:#fff}.bd-row i{color:#808080;font-size:11px}.bd-row:hover i{color:#ccc}
.bd-away{margin:6px 0 0;min-height:2.4em;font:11px Tahoma,sans-serif}.bd-foot{margin:6px 0 0;font:11px Tahoma,sans-serif;color:#404040}

/* Properties / Display */
.pr-head{display:flex;align-items:center;gap:10px;padding-bottom:8px;border-bottom:1px solid #808080}.pr-head svg{width:32px;height:32px}
.pr-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0}.pr-dl dt{color:#000}.pr-dl dd{margin:0}
.pr-attr{display:grid;grid-template-columns:1fr 1fr;gap:4px;border:2px groove #fff;padding:6px 8px}
.dp-mon{width:180px;margin:0 auto 10px;padding:10px 10px 22px;background:#c0c0c0;border:2px outset #fff;border-radius:4px 4px 0 0}
.dp-scr{display:block;width:160px;height:112px;background:#000;border:2px inset #808080}
.dp-line{display:flex;align-items:center;gap:8px;margin:6px 0}.dp-line span{min-width:80px}.dp-line .dp-sel{flex:1}
.dp-line button{min-height:28px;padding:0 10px;background:#c0c0c0;border:2px outset #fff;font:12px Tahoma,sans-serif;cursor:pointer}

/* the screensaver, the boot screen, dial-up */
.jc-saver{position:fixed;inset:0;z-index:45000;width:100vw;height:100vh;background:#000;cursor:none}
.jc-boot{position:fixed;inset:0;z-index:46000;background:#000;color:#c0c0c0;cursor:pointer;transition:opacity .28s steps(3)}
.jc-boot.out{opacity:0}
.jc-bios{margin:0;padding:clamp(12px,4vw,40px);font:clamp(11px,1.6vw,16px)/1.4 "Courier New",monospace;white-space:pre-wrap}
.jc-splash{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:12px;background:linear-gradient(#0a2a8a,#2a7ad0 60%,#9ad0ff);color:#fff;text-align:center}
.jc-splash b{font:900 clamp(30px,7vw,72px) "Arial Black",Impact,sans-serif;text-shadow:3px 3px 0 #000;letter-spacing:-.02em}
.jc-splash span{align-self:flex-start;font:700 clamp(18px,3vw,30px) Tahoma,sans-serif;color:#ffcc33}
.jc-flag{width:clamp(40px,7vw,70px);aspect-ratio:1;background:conic-gradient(#ff3333 0 25%,#e8be59 0 50%,#3b7be8 0 75%,#7dff7d 0);transform:skewY(-8deg);border:2px solid #000}
.jc-sbar{flex-basis:100%;height:10px;margin:18px 22% 0;background:repeating-linear-gradient(90deg,#000080 0 14px,#3b7be8 14px 28px,#7ae7ff 28px 42px);background-size:84px 100%;animation:jc-sbar .5s steps(6) infinite}
@keyframes jc-sbar{to{background-position:84px 0}}
.jc-dial{width:min(94vw,320px)}.jc-dial-st{margin:10px 0 0;font:12px Tahoma,sans-serif;min-height:1.5em}
.jc-dial-pic{height:34px;background:linear-gradient(90deg,#000080 0 30%,transparent 30% 36%,#008080 36% 64%,transparent 64% 70%,#808000 70%);border:2px inset #fff;animation:jc-sbar .6s steps(4) infinite;background-size:200% 100%}

/* the deli cat */
.jc-cat{position:fixed;bottom:36px;left:-60px;z-index:29999;display:none;padding:0;border:0;background:transparent;cursor:pointer;line-height:0}
.jc-cat.on{display:block}.jc-cat.sit svg{transform:scaleY(.86) translateY(2px)}
.jc-cat-tip{position:fixed;bottom:66px;z-index:30001;max-width:290px;padding:5px 8px;background:#ffffe1;border:1px solid #000;color:#000;font:12px Tahoma,sans-serif;text-decoration:none}
.jc-cat-tip[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.jc-sbar,.jc-dial-pic{animation:none}}

/* the top edge (chrome98.js): toolbars docked along the top of the screen, in the taskbar's grey (Quick Launch, Address, Links) */
.tb-on{padding-top:30px}
.tb-on .vhs-osd{top:40px}
.tb-on .w98-icons{top:150px}
.tb-top{position:fixed;top:0;left:0;right:0;z-index:15000;display:flex;align-items:center;gap:2px;height:30px;padding:2px 4px;background:#c0c0c0;border-bottom:2px solid #808080;box-shadow:inset 0 -1px 0 #dfdfdf;font:12px Tahoma,Verdana,sans-serif;color:#000;user-select:none}
.tb-group{display:flex;align-items:center;gap:2px;height:100%;padding-left:8px;position:relative}
.tb-group::before{content:"";position:absolute;left:2px;top:3px;bottom:3px;width:3px;border-left:1px solid #fff;border-right:1px solid #808080}
.tb-ql{display:flex;align-items:center;justify-content:center;width:24px;height:22px;border:1px solid transparent;cursor:pointer}
.tb-ql svg{width:16px;height:16px}.tb-ql:hover{border-color:#fff #808080 #808080 #fff}.tb-ql:active{border-color:#808080 #fff #fff #808080}
.tb-addr{flex:1;min-width:0}
.tb-lab{padding:0 4px 0 2px;white-space:nowrap}
.tb-url{flex:1;min-width:0;height:20px;padding:0 4px;background:#fff;border:2px inset #fff;border-color:#808080 #fff #fff #808080;font:12px Tahoma,sans-serif;color:#000;cursor:text}
.tb-link{padding:1px 5px;color:#000;text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer}.tb-link:hover{border-color:#fff #808080 #808080 #fff}
@media (max-width:700px){.tb-links{display:none}}
@media (max-width:420px){.tb-lab{display:none}}

/* ARPANET (1969): a Model 33 teletype on paper */
.tty-body{padding:0;background:#fbf6e4}
.tty-out{margin:0;padding:10px 12px 0;height:min(320px,50dvh);overflow:auto;background:repeating-linear-gradient(#fbf6e4 0 17px,#f1ead2 17px 18px);color:#1c1a3a;font:700 14px/18px "Courier New",monospace;white-space:pre-wrap;text-transform:uppercase;cursor:pointer}
.tty-row{display:flex;align-items:center;padding:4px 12px 10px;background:#fbf6e4;color:#1c1a3a;font:700 16px "Courier New",monospace;cursor:text}
.tty-ps{white-space:nowrap}
.tty-in{flex:1;min-width:0;padding:0 0 0 4px;background:transparent;color:#1c1a3a;border:0;outline:0;font:700 16px "Courier New",monospace;text-transform:uppercase;caret-color:#7a1f1f}

/* the trailer: one big 1999 button to the mint page (index.html; hidden until its link is set) */
.jc-trailer{display:block;width:min(560px,calc(100% - 20px));margin:14px auto 18px;padding:12px 14px;text-align:center;font:900 clamp(15px,4.2vw,22px)/1.15 "Arial Black",Impact,sans-serif;letter-spacing:.02em;color:#030303;background:linear-gradient(#fff36b,#e8be59);border:3px outset #fff7b0;box-shadow:0 0 0 2px #030303,0 0 18px rgba(255,51,51,.45);text-decoration:none}
.jc-trailer[hidden]{display:none}
.jc-trailer b{color:#ff3333;animation:jcBlink 1s steps(1) infinite}
.jc-trailer:active{border-style:inset}
@keyframes jcBlink{50%{visibility:hidden}}
@media (prefers-reduced-motion:reduce){.jc-trailer b{animation:none}}

/* the network bug (index.html): [jazz cigarettes] in the corner of the picture, white lowercase in brackets, the way adult swim
   sits on air. It never takes a click. */
.as-bug{position:fixed;right:16px;bottom:50px;z-index:29999;pointer-events:none;font:700 17px/1 "Helvetica Neue",Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#fff;opacity:.78;text-shadow:0 0 6px rgba(0,0,0,.65),0 1px 2px rgba(0,0,0,.8);white-space:nowrap}
@media (max-width:520px){.as-bug{font-size:13px;right:10px;bottom:46px}}