/* The XP desktop around the game (site only): sky + hill wallpaper, desktop icons, Notepad, small windows, the taskbar. */
.is-desk{--tb:30px}
.desk{position:relative;height:calc(100vh - var(--tb));height:calc(100dvh - var(--tb));overflow:hidden;
  background:
    radial-gradient(120% 70% at 30% 112%,#5fb23a 0,#4e9f2c 38%,#3d8a22 60%,transparent 61%),
    radial-gradient(90% 55% at 88% 118%,#71c046 0,#5aa834 45%,transparent 46%),
    radial-gradient(60% 30% at 70% 22%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 70%),
    radial-gradient(45% 18% at 22% 30%,rgba(255,255,255,.45) 0,rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#1f5fcf 0,#3d82e0 38%,#86bdf2 72%,#b9dbf8 100%)}

/* the game window, maximized above the taskbar */
.is-desk .xpw{position:absolute;inset:0;height:auto;min-height:0;z-index:10}
.is-desk .xpw[hidden],.np[hidden],.xpwin[hidden]{display:none}

/* desktop icons */
.icons{list-style:none;margin:0;padding:10px 6px;display:flex;flex-direction:column;gap:6px;width:92px;position:relative;z-index:1}
.icon{display:flex;flex-direction:column;align-items:center;gap:4px;width:84px;padding:4px 2px;border:1px solid transparent;background:none;color:#fff;font:12px/1.25 var(--ui);text-align:center;text-decoration:none;text-shadow:1px 1px 1px #000,0 0 2px #000;cursor:default}
.icon img,.icon svg{width:32px;height:32px;flex:none;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.45))}
.icon:hover span,.icon:focus-visible span{background:#0b61ff;outline:1px dotted #fff}
.icon:focus-visible{outline:0}
.icon .pun{background:linear-gradient(90deg,#e0c2ff,#5dffc0);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(1px 1px 0 #000)}

/* readme.txt - Notepad */
.np{position:absolute;z-index:30;left:0;right:0;margin:0 auto;top:6%;width:min(620px,calc(100% - 140px));max-height:calc(100% - 7%);display:flex;flex-direction:column;
  background:#fff;border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 4px 14px rgba(0,0,0,.4)}
.np-title{flex:none;display:flex;align-items:center;gap:6px;height:28px;margin:0 -3px;padding:0 4px 0 7px;border-radius:7px 7px 0 0;color:#fff;
  background:linear-gradient(180deg,#0997ff 0,#0053ee 8%,#0050ee 40%,#06f 88%,#06f 93%,#005bff 95%,#003dd7 96%,#003dd7 100%)}
.np-title svg{width:16px;height:16px;flex:none}
.np-title h2{margin:0;flex:1;font:700 13px/1 var(--ttl);text-shadow:1px 1px #0f1089;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-menu{flex:none;display:flex;background:var(--beige);border-bottom:1px solid #d8d2bd;font-size:12px}
.np-menu span{padding:3px 7px}
.np-body{flex:1;min-height:0;overflow:auto;padding:14px 18px 16px;font:14px/1.55 "Lucida Console","Courier New",monospace;color:#000;border:1px solid #7f9db9;margin:2px}
.np-body p{margin:0 0 10px}
.np-wm{font:700 40px/1 var(--ttl);letter-spacing:-.5px;margin:2px 0 6px!important}
.np-lead{font-size:16px}
.np-kv{display:grid;grid-template-columns:max-content 1fr;gap:5px 14px;margin:12px 0 16px;padding:10px 0;border-top:1px dashed #9aa;border-bottom:1px dashed #9aa}
.np-kv dt{color:#555}
.np-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.np-kv dd[data-mint-slot]{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.np-kv a,.top-last a,.pot-wallet a{color:#0b3fb8}
.np-deal{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.np-small{font-size:12px;color:#555}
/* the big XP button */
.deal{min-width:168px;height:44px;padding:0 26px;border:1px solid #003c74;border-radius:4px;cursor:pointer;color:#000;font:700 18px/42px var(--ttl);letter-spacing:.3px;
  background:linear-gradient(180deg,#fff 0,#ecebe6 86%,#d6d0c5 100%);box-shadow:inset -1px 1px #cee7ff,inset 1px 2px #98b8ea,inset -2px 2px #bcd4f6,inset 1px -1px #89ade4,inset 2px -2px #89ade4}
.deal:hover{box-shadow:inset -1px 1px #fff0cf,inset 1px 2px #fdd889,inset -2px 2px #fbc761,inset 2px -2px #e5a01a}
.deal:active{background:linear-gradient(180deg,#cdcac3 0,#e3e3db 8%,#e5e5de 94%,#f2f2f1 100%)}
.deal:focus-visible{outline:1px dotted #000;outline-offset:-5px}

/* small XP windows: Top 5, Pot */
.xpwin{position:absolute;z-index:31;right:24px;top:24px;width:min(360px,calc(100% - 24px));max-height:calc(100% - 40px);display:flex;flex-direction:column;
  background:var(--beige);border:3px solid #0831d9;border-top:0;border-radius:8px 8px 0 0;box-shadow:3px 4px 14px rgba(0,0,0,.4)}
.xpwin[data-win="pot"]{right:auto;left:120px;top:60px}
.xpwin-body{flex:1;min-height:0;overflow:auto;padding:10px 12px 2px;font-size:12px}
.xpwin-body p{margin:0 0 8px}
.top-pot b,.pot-body b{font-variant-numeric:tabular-nums}
.lb{background:#fff;border:1px solid #7f9db9;min-height:120px;margin:0 0 8px}
.lb ol{list-style:none;margin:0;padding:2px 0}
.lb li{display:grid;grid-template-columns:34px 1fr auto;gap:8px;padding:3px 8px;font-variant-numeric:tabular-nums}
.lb li:nth-child(odd){background:#f3f6fb}
.lb li.is-paid .rk{color:#0a7a3a;font-weight:700}
.lb li.is-me{background:#316ac5;color:#fff}
.lb li.is-me .rk{color:#fff}
.lb li.is-held{color:#8a8a8a}
.lb .who{font-family:"Lucida Console","Courier New",monospace;font-size:11px;line-height:16px}
.lb-empty{margin:0;padding:10px 8px;color:#555}
.top-note{color:#444;font-size:11px}
.top-last{font-size:11px}
.pot-big{font:700 34px/1.1 var(--ttl);margin:4px 0 6px!important;font-variant-numeric:tabular-nums}
.pot-wallet{font-size:11px;color:#444}

/* taskbar */
.tb{position:fixed;left:0;right:0;bottom:0;height:var(--tb);z-index:7000;display:flex;align-items:stretch;gap:6px;color:#fff;
  background:linear-gradient(180deg,#3168d5 0,#4993e6 6%,#2157d7 14%,#2663e0 50%,#2157d7 88%,#1941a5 100%)}
.tb-start{flex:none;display:flex;align-items:center;gap:6px;padding:0 18px 0 10px;border:0;border-radius:0 12px 12px 0;cursor:pointer;color:#fff;font:italic 700 17px/1 var(--ttl);text-shadow:1px 1px 2px #1a3d0e;
  background:linear-gradient(180deg,#3c8f3c 0,#5ec05e 10%,#3a9b3a 50%,#2f8a2f 88%,#226b22 100%);box-shadow:inset -2px 0 3px rgba(0,0,0,.25)}
.tb-start i{width:18px;height:18px;border-radius:3px;background:conic-gradient(#f35325 0 25%,#81bc06 0 50%,#ffba08 0 75%,#05a6f0 0);transform:skewX(-6deg)}
.tb-start[aria-expanded="true"]{background:linear-gradient(180deg,#235e23,#2f8a2f)}
.tb-tasks{flex:1;min-width:0;display:flex;gap:3px;align-items:center;padding:3px 0}
.tb-tasks button{display:flex;align-items:center;gap:6px;max-width:170px;height:100%;padding:0 10px;border:1px solid #1941a5;border-radius:3px;color:#fff;font:12px/1 var(--ui);cursor:pointer;
  background:linear-gradient(180deg,#5a9cf7 0,#3c81f3 10%,#3779e9 85%,#2b5fc6 100%)}
.tb-tasks button[aria-pressed="true"]{background:linear-gradient(180deg,#1e4fb8,#2a62d6)}
.tb-tasks button[hidden]{display:none}
.tb-tasks span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-tray{flex:none;display:flex;align-items:center;gap:10px;padding:0 12px;font:12px/1 var(--ui);font-variant-numeric:tabular-nums;border-left:1px solid #0f3b9e;
  background:linear-gradient(180deg,#0c59b9 0,#139ee9 6%,#18b9f4 12%,#139ee9 30%,#0c8bd8 80%,#0a6ab6 100%)}
.tb-pot{font-weight:700}
.tb-menu{position:fixed;left:0;bottom:var(--tb);z-index:7100;width:220px;background:#fff;border:2px solid #0831d9;border-radius:8px 8px 0 0;box-shadow:3px -2px 10px rgba(0,0,0,.35);overflow:hidden;color:#000;display:flex;flex-direction:column}
.tb-menu[hidden]{display:none}
.tb-menu-h{margin:0 0 4px;padding:10px 12px;color:#fff;font:700 16px/1 var(--ttl);background:linear-gradient(180deg,#1868ce,#0e5bc4 60%,#2a7ee6)}
.tb-menu button,.tb-menu a{display:block;width:100%;padding:7px 14px;border:0;background:none;text-align:left;font:12px/1.3 var(--ui);color:#000;text-decoration:none;cursor:pointer}
.tb-menu button:hover,.tb-menu a:hover{background:#316ac5;color:#fff}

/* no flash of the wrong window before desktop.js runs (boot.js marks first visit / return in <head>) */
html[data-boot="first"] .is-desk .xpw[data-win="game"]{display:none}
.xpw,.np,.xpwin{transform-origin:0 0}

/* hover / pressed */
.icon:active span{background:#0846c8}
.icon:hover img,.icon:hover svg{filter:drop-shadow(1px 1px 1px rgba(0,0,0,.45)) brightness(1.08)}
.icon:active img,.icon:active svg{transform:translateY(1px)}
.tb-tasks button:hover{background:linear-gradient(180deg,#6aa8fa 0,#4b8ff5 10%,#428aef 85%,#3268d0 100%)}
.tb-tasks button:active{background:linear-gradient(180deg,#1a47a8,#2457c4)}
.tb-start:hover{filter:brightness(1.08)}
.tb-start:active{filter:brightness(.92)}
.tb-menu button,.tb-menu a{transition:background-color .08s}
/* the tray: a soft blink when the pot moves */
.tb-pot{transition:color .3s}
.tb-pot.is-tick{animation:tick .7s ease-out}
@keyframes tick{0%{color:#fff69a;text-shadow:0 0 6px #fff69a}100%{color:#fff;text-shadow:none}}

/* welcome: wallpaper, taskbar, icons one by one; readme.txt then zooms out of its icon (desktop.js) */
@media (prefers-reduced-motion:no-preference){
  html[data-boot="first"] .desk{animation:wallIn .55s ease-out both}
  html[data-boot="first"] .tb{animation:tbIn .35s .15s cubic-bezier(.2,.8,.2,1) both}
  html[data-boot="first"] .icons li{animation:iconIn .3s ease-out both}
  html[data-boot="first"] .icons li:nth-child(1){animation-delay:.25s}
  html[data-boot="first"] .icons li:nth-child(2){animation-delay:.31s}
  html[data-boot="first"] .icons li:nth-child(3){animation-delay:.37s}
  html[data-boot="first"] .icons li:nth-child(4){animation-delay:.43s}
  html[data-boot="first"] .icons li:nth-child(5){animation-delay:.49s}
}
@keyframes wallIn{from{opacity:0;filter:brightness(1.4)}to{opacity:1;filter:none}}
@keyframes tbIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes iconIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.is-desk{background:#3a6fd8}

/* phones */
@media (max-width:640px){
  .is-desk{--tb:40px}
  .icons{flex-direction:row;flex-wrap:wrap;width:auto;padding:8px 4px;gap:2px}
  .icon{width:66px;font-size:10.5px;padding:3px 0}
  .icon img,.icon svg{width:28px;height:28px}
  .np{top:84px;left:8px;right:8px;width:auto;margin:0;max-height:calc(100% - 104px)}
  .np-body{padding:10px 12px 12px;font-size:13px}
  .np-wm{font-size:32px}
  .np-lead{font-size:14px}
  .np-kv{grid-template-columns:52px 1fr;gap:4px 8px}
  .deal{width:100%}
  .np-small{width:100%;text-align:center}
  .xpwin,.xpwin[data-win="pot"]{left:8px;right:8px;top:84px;width:auto;max-height:calc(100% - 104px)}
  .tb-start{font-size:16px;padding:0 14px 0 8px}
  .tb-tasks button{padding:0 8px}
  .tb-tasks button img{display:none}
  .tb-tray{padding:0 8px;gap:8px;font-size:12px}
  .xps-left{min-width:0}
}
@media (max-width:380px){ .tb-tasks button[data-task="readme"]{display:none} }