/* The Windows 98 style desktop (front page). Markup: src/pages/desktop.mjs, behaviour: desktop.js. */
/* Window chrome (tokens, .win, .tb, .menu, .body, buttons) lives in chrome.css, shared with every inner page. */
*{box-sizing:border-box;margin:0}
.body{scrollbar-color:#c0c0c0 #e8e8e8}
.body::-webkit-scrollbar{width:16px;height:16px}
.body::-webkit-scrollbar-track{background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px}
.body::-webkit-scrollbar-thumb{background:var(--face);box-shadow:var(--raised)}
html,body{height:100%}
body.desktop{background:#008080;font:12px var(--ui);color:var(--ink);overflow:hidden}
.desk{position:fixed;inset:0;height:100dvh;overflow:hidden;background:#008080}
body[data-wall="rift"] .desk{background:radial-gradient(ellipse at 70% 40%,#7a2cff66,transparent 55%),radial-gradient(ellipse at 20% 90%,#00e5c933,transparent 50%),linear-gradient(#0b1b3a,#1d0f45 70%,#2b0f4a)}
body[data-wall="rift"] .desk:before{content:"";position:absolute;left:58%;top:8%;width:6px;height:70%;background:linear-gradient(#fff0,#ff3df2,#38f6ff,#fff0);transform:skewX(-8deg);box-shadow:0 0 30px 10px #b13dff88,-4px 0 0 #38f6ff,4px 0 0 #ff3df2;opacity:.8;pointer-events:none}

.wm{position:absolute;right:28px;top:22px;text-align:right;color:#fff;font:700 36px var(--ui);letter-spacing:3px;text-shadow:3px 3px 0 #004040;pointer-events:none}
.wm small{display:block;font:12px Tahoma,sans-serif;letter-spacing:2px;text-shadow:none;color:#d6ffff;margin-top:4px}
body[data-wall="rift"] .wm{text-shadow:3px 3px 0 #ff3df2,-2px -2px 0 #38f6ff}

.icons{position:absolute;left:14px;top:14px;bottom:50px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(auto-fill,96px);grid-auto-columns:92px;gap:6px;align-content:start}
.ic{display:block;width:88px;padding:4px 2px;text-align:center;color:#fff;text-decoration:none;font-size:12px;text-shadow:1px 1px 0 #000;-webkit-tap-highlight-color:transparent}
.ic .ico{width:44px;height:44px;display:block;margin:0 auto 4px;shape-rendering:crispEdges;filter:drop-shadow(2px 2px 0 #0007)}
.ic.quiet .ico{opacity:.7}
.ic span{display:inline-block;padding:1px 3px;line-height:1.25;overflow-wrap:anywhere}
.ic.sel span,.ic:focus-visible span,.ic:active span{background:var(--navy);outline:1px dotted #fff;outline-offset:-1px}
.ic:focus-visible{outline:none}

.desk .win{position:absolute;width:min(var(--w,460px),calc(100vw - 16px));max-height:calc(100dvh - 48px)}   /* the box itself is chrome.css */
.win.max .game{min-height:100%}
.win.max{left:0!important;top:0!important;width:100%!important;max-height:calc(100dvh - 34px);height:calc(100dvh - 34px)}
.app-gate{padding:16px;color:#fff;font:14px var(--ui)}.app-gate .row{display:flex;gap:6px}.app-gate input{flex:1;min-width:0;font:13px var(--ui);padding:4px 6px;min-height:30px;border:0;box-shadow:var(--field)}.app-gate[hidden]{display:none}
.game{display:flex;gap:16px;align-items:center}
.art{flex:none;width:130px;height:130px;background:linear-gradient(#1d0f45,#6a1fb8);display:grid;place-items:center;box-shadow:var(--field)}
.art-ico{width:96px;height:96px;shape-rendering:crispEdges}
.tracks,.links{list-style:none;padding:0;margin:0 0 12px}
.tracks li,.links li{padding:3px 0;display:flex;justify-content:space-between;gap:10px}
.tracks small,.links small{color:var(--ink)}
fieldset{border:2px groove #fff;padding:10px 12px;display:grid;gap:8px}
legend{padding:0 4px}
input[type=radio]{accent-color:var(--navy);width:16px;height:16px}
label{display:flex;gap:8px;align-items:center;min-height:28px}

.btn{display:inline-block;background:var(--face);border:0;box-shadow:var(--raised);padding:9px 20px;font-weight:700;color:var(--ink)!important;text-decoration:none;min-height:34px;margin-top:4px}
.btn:active{box-shadow:var(--sunk);padding:10px 19px 8px 21px}
.btn.big{font-size:16px;padding:10px 26px;outline:1px dotted #000;outline-offset:-6px}

/* the taskbar box, Start button, clock and focus ring live in chrome.css (shared with inner pages) */
.tbtn{height:28px;padding:4px 10px;border:0;box-shadow:var(--raised);background:var(--face);width:150px;max-width:34%;font:12px var(--ui);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink);cursor:pointer}
.tbtn.on{box-shadow:var(--sunk);background:repeating-conic-gradient(#c0c0c0 0 25%,#fff 0 50%) 0 0/2px 2px;font-weight:700}

.startmenu{position:absolute;left:3px;bottom:34px;width:210px;background:var(--face);display:flex;z-index:9001;box-shadow:var(--raised),3px 3px 0 #0007;padding:2px}
.startmenu[hidden]{display:none}
.startmenu .side{width:28px;background:var(--tb-on);color:var(--tb-ink);font:700 16px var(--ui);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:6px 0;writing-mode:vertical-rl;transform:rotate(180deg);letter-spacing:1px}
.startmenu .side b{margin-top:4px}
.startmenu ul{list-style:none;padding:2px;flex:1;margin:0}
.startmenu button,.startmenu .sm-link{width:100%;display:flex;gap:10px;align-items:center;text-align:left;padding:6px 8px;min-height:36px;background:none;border:0;font:13px var(--ui);color:var(--ink);cursor:pointer;text-decoration:none}
.startmenu button:hover,.startmenu button:focus-visible,.startmenu .sm-link:hover,.startmenu .sm-link:focus-visible{background:var(--navy);color:#fff;outline:none}
.startmenu li.sep{height:2px;margin:3px 2px;box-shadow:inset 0 1px #808080,inset 0 -1px #fff}
.startmenu .sm-ico{width:24px;height:24px}

button:focus-visible,.btn:focus-visible,.body a:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.tb-btns button:focus-visible{outline-offset:-3px}
input:focus-visible{outline:1px dotted #000;outline-offset:2px}

@media (max-width:700px){
  .wm{font-size:24px;right:14px;top:14px}
  .icons{right:8px;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:104px;top:84px;left:8px;bottom:auto}
  .ic{width:100%}
  .ic .ico{width:56px;height:56px}
  .desk .win{left:8px!important;right:8px;top:70px!important;width:auto;max-height:calc(100dvh - 130px)}
  .win.max{top:0!important;left:0!important;right:0;max-height:calc(100dvh - 46px);height:calc(100dvh - 46px)}
  .tb{padding:6px 4px}
  .tb-btns button{width:34px;height:28px;font-size:13px}
  .game{flex-direction:column;text-align:center}
  .art{width:110px;height:110px}
  .task{height:46px}
  .start{height:36px;font-size:15px}
  .tbtn{height:36px;max-width:none;flex:1}
  .tray{padding:9px 8px}
  .startmenu{bottom:46px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.mini-wa{background:#2c2c3a;border:2px solid;border-color:#8a8a9c #15151d #15151d #8a8a9c;margin-bottom:10px;padding:0 6px 6px}
.mini-wa .mw-bar{margin:2px -4px 6px;padding:1px 6px;font:700 10px Arial,sans-serif;letter-spacing:2px;color:#d6d6e6;background:repeating-linear-gradient(90deg,#5a5a78 0 2px,#3b3b52 2px 4px)}
.mini-wa .mw-lcd{background:#000;color:#2ee82e;font:12px "Lucida Console","Courier New",monospace;padding:4px 6px;margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-wa .tracks{background:#000;margin:0;padding:3px 0}
.mini-wa .tracks li{padding:2px 6px;color:#2ee82e;font:12px Arial,sans-serif}
.mini-wa .tracks small{color:#2ee82e}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ss-tabs{display:flex;gap:2px;margin-bottom:8px}
.ss-mon{width:150px;margin:0 auto 12px;padding:10px 10px 18px;background:#c9c9c9;box-shadow:var(--raised)}
.ss-screen{position:relative;height:84px;overflow:hidden;background:#000;box-shadow:inset 1px 1px #404040,inset -1px -1px #fff}
.ss fieldset{display:flex;gap:8px;align-items:center;border:1px solid #808080;box-shadow:1px 1px #fff;padding:8px;margin:0 0 10px}
.ss legend{font:12px Tahoma,sans-serif;padding:0 4px}
.ss select{flex:1;min-width:0;min-height:30px;font:13px Tahoma,sans-serif}
.ss-tabs button{padding:3px 10px;background:var(--face);border:0;box-shadow:var(--raised);font:12px var(--ui);color:var(--ink);cursor:pointer}
.ss-tabs .on{color:var(--ink);font-weight:700}
.ss-screen iframe{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}
.ss fieldset .btn{padding:6px 12px;min-height:30px;margin:0}
.ss select[size]{width:100%;font:13px Tahoma,sans-serif}
.ss-ok{text-align:right}
.ss-ok .btn{min-width:80px}
/* Appearance preview: a tiny window painted in the chosen scheme's three colours */
.ap-prev{background:var(--a,#222)}
.ap-prev i{position:absolute;display:block}
.ap-prev i:nth-child(1){left:12%;top:14%;width:60%;height:20%;background:var(--b,#555)}
.ap-prev i:nth-child(2){left:12%;top:44%;width:76%;height:34%;background:var(--b,#555);opacity:.55}
.ap-prev i:nth-child(3){right:12%;top:14%;width:12%;height:20%;background:var(--c,#fff)}
/* wallpapers: tiles are 128px pictures repeated across the desktop */
body[data-wall="stone"] .desk{background:#000 url(/walls/stone.webp) 0 0/128px}
body[data-wall="sand"] .desk{background:#000 url(/walls/sand.webp) 0 0/128px}
body[data-wall="straw"] .desk{background:#000 url(/walls/straw.webp) 0 0/128px}
body[data-wall="rivets"] .desk{background:#000 url(/walls/rivets.webp) 0 0/128px}
body[data-wall="weave"] .desk{background:#000 url(/walls/weave.webp) 0 0/128px}
body[data-wall="forest"] .desk{background:#000 url(/walls/forest.webp) 0 0/128px}
body[data-wall="thatch"] .desk{background:#000 url(/walls/thatch.webp) 0 0/128px}
body[data-wall="blocks"] .desk{background:#000 url(/walls/blocks.webp) 0 0/128px}
/* the fullscreen screensaver preview: a frame with a see-through layer on top, so a tap anywhere ends it */
.saver{position:fixed;inset:0;z-index:20000;background:#000}
.saver[hidden]{display:none}
.saver iframe,.saver-hit{position:absolute;inset:0;width:100%;height:100%;border:0}

/* folder windows (ZZT, Super ZZT): icons in a row; shortcuts get the little Win98 arrow */
.folder{display:flex;gap:10px;flex-wrap:wrap;padding:6px}
.fi{display:block;width:96px;text-align:center;color:var(--ink);text-decoration:none;font-size:12px;padding:4px 2px;overflow-wrap:anywhere}
.fi-ico{width:40px;height:40px;display:block;margin:0 auto 4px;shape-rendering:crispEdges}
.fi-wrap{position:relative;display:block;width:40px;margin:0 auto}
.fi-arrow{position:absolute;left:0;bottom:4px;width:12px;height:12px;shape-rendering:crispEdges}
.fi:hover span:last-child,.fi:focus-visible span:last-child{background:var(--navy);color:#fff}
.fi span:last-child{display:inline-block;padding:1px 3px}
.steps{padding-left:20px;margin-bottom:12px}
.steps li{margin-bottom:8px}
.only-phone{display:none}
@media (hover:none),(pointer:coarse){.only-pc{display:none}.only-phone{display:block}}

/* America Offline (the browser window) */
.aolb{background:#c0c0c0;display:flex;flex-direction:column;overflow:hidden}
.aol{display:flex;flex-direction:column;height:100%;min-height:0}
.aol-bar{display:flex;gap:6px;align-items:center;padding:4px;background:var(--face)}
.aol-bar button{padding:3px 10px;border:0;box-shadow:var(--raised);background:var(--face);font:12px var(--ui);cursor:pointer;min-height:24px}
.aol-bar button:disabled{color:#808080;cursor:default}
.aol-bar input{flex:1;min-width:0;font:12px var(--ui);padding:3px 5px;border:0;box-shadow:var(--field);background:#fff}
#aol-stat{font-size:11px;color:#444;white-space:nowrap}
.aol-main{flex:1;display:flex;min-height:0}
.aol-fav{flex:none;width:132px;overflow:auto;background:var(--face);padding:4px;display:flex;flex-direction:column;gap:2px}
.aol-fav h3{font:700 11px var(--ui);margin:2px 2px 4px;color:#000080}
.aol-fav button{text-align:left;border:0;background:none;font:12px var(--ui);padding:5px 4px;color:var(--hl);text-decoration:underline;cursor:pointer;min-height:26px}
.aol-fav button:hover,.aol-fav button:focus-visible{background:var(--navy);color:#fff}
.aol-view{position:relative;flex:1;min-width:0;background:#fff;box-shadow:var(--field)}
.aol-view iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff}
.aol-view iframe[hidden]{display:none}
.aol-screen{position:absolute;inset:0;padding:18px 24px;overflow:auto;background:#fff}
.aol-screen[hidden]{display:none}
.aol-logo{display:flex;align-items:center;gap:10px;margin-bottom:12px;font:700 22px Georgia,serif;color:#1f5fd0}
.aol-big{width:44px;height:44px;shape-rendering:crispEdges}
.aol-screen h2{font:700 17px var(--ui);margin-bottom:8px}
.aol-name{display:flex;gap:8px;align-items:center;margin:10px 0}
.aol-name input{font:13px var(--ui);padding:4px 6px;min-height:28px;border:0;box-shadow:var(--field)}
.aol-prog{height:18px;margin:12px 0;box-shadow:var(--field);background:#fff;padding:2px}
.aol-prog i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#000080 0 10px,#fff 10px 12px);transition:width .6s linear}
@media (max-width:700px){.aol-fav{width:96px}.aol-fav button{font-size:11px}}

/* Users window + the login screen */
.usr .btn{margin-right:8px}
.rank{display:inline-block;padding:1px 6px;background:var(--navy);color:#fff;font-size:11px;margin-left:6px}
.usr-vip{display:grid;gap:4px;margin:10px 0}.usr-vip .row{display:flex;gap:6px}.usr-vip input{flex:1;min-width:0;font:13px var(--ui);padding:4px 6px;min-height:30px;border:0;box-shadow:var(--field)}
.login{position:fixed;inset:0;z-index:15000;display:grid;grid-template-rows:64px 1fr 64px;background:linear-gradient(#5a7edc,#3a5fc0 60%,#2b4bb0);color:#fff;font-family:var(--ui)}
.login[hidden]{display:none}
.login-top{background:#00309c;border-bottom:2px solid #f0a040}
.login-bot{background:#00309c;border-top:2px solid #f0a040;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 24px;font-size:12px}
.login-mid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:0;overflow:auto}
.login-brand{padding:24px 36px;text-align:right;border-right:2px solid #ffffff55}
.login-brand h2{margin:8px 0;font-size:clamp(22px,4vw,34px);font-style:italic}.login-brand p{margin:0;font-size:14px;opacity:.9}
.login-logo{width:96px;height:96px}
.login-user{display:flex;gap:16px;align-items:center;padding:24px 36px}
.login-ico{width:64px;height:64px;flex:none;background:#fff;border:2px solid #fff;border-radius:6px;padding:4px}
.login-fields{flex:1;max-width:280px}
.login-fields label{display:grid;gap:3px;margin-bottom:8px;font-size:13px}
.login-fields input{font:13px var(--ui);padding:4px 6px;min-height:32px;border:0;box-shadow:var(--field);color:#000}
.login-err{color:#ffd0d0;min-height:1.4em;font-size:12px;margin:0 0 6px}
.login-btns{display:flex;gap:8px;flex-wrap:wrap}
.login-btns .btn{margin:0;padding:6px 14px;min-width:70px}
@media (max-width:640px){.login-mid{grid-template-columns:1fr;align-content:center}.login-brand{text-align:center;border:0;border-bottom:2px solid #ffffff55;padding:16px}.login-logo{width:56px;height:56px}.login-user{padding:16px 20px;justify-content:center}}

/* before the login screen is answered the desktop shows no icons */
.locked .icons,.locked .wm{visibility:hidden}
.why{padding-left:18px;margin:0 0 10px}.why li{margin-bottom:6px}
.steps .ios,.steps .android{display:none}
.is-ios .steps .ios,.is-android .steps .android{display:list-item}
.is-ios .steps .pc,.is-android .steps .pc{display:none}

/* full screen apps: cover the whole screen (no title bar, no taskbar), with an Exit button that is always on top */
.win[data-full]{position:fixed;left:0!important;top:0!important;width:100%!important;max-width:none;height:100%!important;max-height:none;padding:0;z-index:16000!important;box-shadow:none}
.win[data-full] .tb{display:none}
.win[data-full] .body{flex:1;min-height:0;height:auto;padding:0}
.fs-exit{position:fixed;top:8px;right:8px;z-index:16001;padding:6px 14px;font:700 13px var(--ui);background:var(--face);color:var(--ink);border:0;box-shadow:var(--raised);cursor:pointer}
.fs-exit[hidden]{display:none}