/* belu.fun home page: a Windows XP desktop with the site open in an IE-style "Belu Browser" window.
   The page fills the screen and never scrolls itself. Only the IE viewport (.ie-view) scrolls,
   so the window chrome, status bar and taskbar stay put.
   Boot intro styles are at the bottom; landing/boot.js runs the timing that CSS can't.
*/
:root{
  --ink:#1b1b1f; --muted:#5e5e66; --faint:#8a8a92; --pink:#ff4d6d; --sun:#ffd60a; --cream:#fffdf7;
  --xp:#ece9d8; --rule:#d4d0c0; --bevel:#b9b6a6; --cell:#c2bfaf; --field:#7f9db9; --link:#2e7be6;
  --ui:"Noto Sans",Tahoma,Verdana,system-ui,sans-serif;
  --fira:"Fira Sans",Tahoma,system-ui,sans-serif;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --vt:VT323,ui-monospace,Consolas,monospace;
  --orb-green:linear-gradient(#7ed67e,#3a9f3a 60%,#2a7f2e);
  --orb-blue:linear-gradient(#8cc4ff,#2e7be6 60%,#1a5bc0);
  --scroll-face:linear-gradient(90deg,#b4c8f6,#c1d3fb 50%,#e3ebfe);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:#3a6ea5 url(img/wallpaper.webp) center/cover no-repeat;color:var(--ink);font-family:var(--ui);
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
p,h1{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.ic{display:block;flex:none;width:16px;height:16px;fill:currentColor}

/* ---------- desktop ---------- */
.xp{height:100vh;height:100dvh;display:flex;flex-direction:column}
.desktop{flex:1;min-height:0;display:flex;gap:24px;padding:20px 24px 24px 20px}

.desk-icons{width:76px;flex:none;display:flex;flex-direction:column;gap:22px}
.desk-icon{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:11px;line-height:15px;
  text-align:center;text-shadow:1px 1px 1px rgba(0,0,0,.8);cursor:default;user-select:none}
.desk-icon .ic{width:34px;height:34px;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.4))}
.desk-icon span{padding:0 2px}
a.desk-icon{cursor:pointer}
a.desk-icon:hover span,a.desk-icon:focus-visible span{background:#316ac5;text-shadow:none}
a.desk-icon:focus-visible{outline:none}
a.desk-icon:focus-visible span{outline:1px dotted #fff}

/* ---------- IE window ---------- */
.ie{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;padding:0 4px 4px;border-radius:8px 8px 0 0;
  background:linear-gradient(#0a5fe8,#0040c8);box-shadow:0 6px 12px rgba(0,0,0,.33);transform-origin:170px calc(100% + 32px)}

.ie-title{height:30px;flex:none;display:flex;align-items:center;gap:6px;padding:0 2px 0 4px;border-radius:7px 7px 0 0;
  background:linear-gradient(#3d95ff,#0a5fe8 14%,#0055e5 50%,#0350d6 88%,#0045c2);color:#fff;user-select:none}
.ie-logo{color:#9ed3ff}
.ie-title-text{flex:1;min-width:0;font:700 13px/1.2 var(--fira);text-shadow:1px 1px 0 #0a1e6e;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win-btn{width:21px;height:21px;flex:none;display:grid;place-items:center;border:1px solid #fff;border-radius:3px;
  background:linear-gradient(#5e9bff,#2663e0)}
.win-btn .ic{width:13px;height:13px}
.win-btn.close{background:linear-gradient(#f08a6c,#d64a24 60%,#c23a16)}

.ie-body{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--xp);font-size:12px;line-height:16px}
.ie-menu,.ie-toolbar,.ie-address{flex:none;display:flex;align-items:center;border-bottom:1px solid var(--rule);
  white-space:nowrap;overflow:hidden;user-select:none}

.ie-menu{height:22px;padding:0 4px}
.ie-menu>span{padding:2px 7px;cursor:default}
.ie-menu>span:hover{background:#316ac5;color:#fff}
.ie-menu>.throbber{margin-left:auto;width:36px;height:20px;padding:0;display:grid;place-items:center;
  background:#fff;border:1px solid var(--bevel);color:#f2b705}
.ie-menu>.throbber:hover{background:#fff;color:#f2b705}
.throbber .ic{width:14px;height:14px}

.ie-toolbar{height:40px;gap:4px;padding:0 6px}
.tb{display:flex;align-items:center;gap:5px;padding:2px 5px;border:1px solid transparent;border-radius:3px;cursor:default}
button.tb,a.tb{cursor:pointer}
button.tb:hover,a.tb:hover{border-color:var(--cell);background:#f7f6f0}
button.tb:active,a.tb:active{background:#e2dfd0;border-color:#a9a698}
.tb:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.tb.off{opacity:.45}
.orb{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.6);box-shadow:0 1px 2px rgba(0,0,0,.25);color:#fff}
.orb .ic{width:14px;height:14px}
.orb.big{width:28px;height:28px}
.orb.big .ic{width:18px;height:18px}
.orb.green{background:var(--orb-green)}
.orb.blue{background:var(--orb-blue)}
.orb.red{background:linear-gradient(#f69a7e,#d9471f)}
.orb.gold{background:linear-gradient(#ffe27a,#f0a800)}
.orb.grey{background:linear-gradient(#d9d9d9,#8a8a8a)}
.caret{width:10px;height:10px;color:#000}
.sep{width:1px;height:26px;flex:none;background:var(--bevel)}

.ie-address{height:30px;gap:6px;padding:0 6px}
.addr-label{color:#6b6b6b}
.url{flex:1;min-width:0;height:22px;display:flex;align-items:center;gap:6px;padding-left:6px;background:#fff;border:1px solid var(--field)}
.url>.ic{width:14px;height:14px;color:var(--link)}
.url-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.url-drop{align-self:stretch;width:18px;display:grid;place-items:center;border-left:1px solid var(--field);
  background:linear-gradient(#c9dcfd,#9dbbf2);color:#2b4fa0}
.url-drop .ic{width:11px;height:11px}
.go{display:flex;align-items:center;gap:4px;padding:0 4px}
.go-arrow{width:18px;height:18px;display:grid;place-items:center;border-radius:3px;background:var(--orb-green);color:#fff}
.go-arrow .ic{width:12px;height:12px}
.sep.links{height:18px}

/* The scrolling page. IE6 always drew its scrollbar, so this one is always there too. */
.ie-view{flex:1;min-height:0;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;
  background:var(--cream);border-top:1px solid var(--field);border-bottom:1px solid var(--field);outline:none}
.ie-view::-webkit-scrollbar{width:17px}
.ie-view::-webkit-scrollbar-track{background:#f4f3ee;border-left:1px solid #e2e0d6}
.ie-view::-webkit-scrollbar-thumb{min-height:32px;border:1px solid #fff;border-radius:3px;
  background:repeating-linear-gradient(#8da4d8 0 1px,transparent 1px 3px) center/7px 10px no-repeat,var(--scroll-face)}
.ie-view::-webkit-scrollbar-thumb:hover{
  background:repeating-linear-gradient(#8da4d8 0 1px,transparent 1px 3px) center/7px 10px no-repeat,linear-gradient(90deg,#c6d7fb,#d5e3fe 50%,#f0f5ff)}
.ie-view::-webkit-scrollbar-button:single-button{display:block;height:17px;border:1px solid #fff;border-radius:3px}
.ie-view::-webkit-scrollbar-button:single-button:vertical:decrement{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 6.5 5 3.5 8 6.5' fill='none' stroke='%234d6185' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat,var(--scroll-face)}
.ie-view::-webkit-scrollbar-button:single-button:vertical:increment{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5 5 6.5 8 3.5' fill='none' stroke='%234d6185' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat,var(--scroll-face)}
@supports not selector(::-webkit-scrollbar){
  .ie-view{scrollbar-color:#b4c8f6 #f4f3ee}
}

.ie-status{height:22px;flex:none;display:flex;align-items:center;gap:6px;padding:0 6px;font-size:11px;user-select:none}
.ie-status>.ic{width:13px;height:13px;color:var(--link)}
.status-text{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell{width:24px;height:16px;flex:none;border:1px solid var(--cell)}
.zone{width:160px;height:16px;flex:none;display:flex;align-items:center;gap:5px;padding:0 6px;border:1px solid var(--cell)}
.zone .ic{width:12px;height:12px;color:var(--link)}

/* ---------- the web page inside IE ---------- */
.page{container-type:inline-size;min-height:100%;display:flex;flex-direction:column;align-items:center;
  gap:clamp(32px,5vw,56px);padding:clamp(32px,5vw,64px) clamp(16px,5vw,64px) 48px}

.hero{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.tagline{font:400 clamp(16px,5cqi,22px)/1.3 var(--fira);color:var(--muted)}

/* Wordmark: "belu" · yellow dot · "fun". Sized in em so the hero, splash and BIOS copies share it. */
.wm{display:flex;align-items:flex-end;gap:2px;font:800 120px/.9 var(--display);letter-spacing:-.05em;color:var(--ink);white-space:nowrap}
.wm .fun{color:var(--pink)}
.wm .dot{width:.25em;height:.25em;flex:none;margin:0 -.012em .117em .078em;border-radius:50%;background:var(--sun);
  outline:.033em solid var(--ink);outline-offset:-.017em}
.hero .wm{font-size:min(120px,27cqi)}

/* Flex, not grid, so a part-filled row (e.g. just Guessure for now) sits centred. Card width stays 1/--cols of the row. */
.games{--cols:4;--gap:32px;width:100%;max-width:1080px;margin:0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:44px var(--gap)}
.games>li{width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
.game{display:flex;flex-direction:column;gap:12px}
.thumb{display:block;aspect-ratio:246/186;overflow:hidden;border:2px solid var(--ink);border-radius:12px;
  box-shadow:4px 4px 0 var(--ink);background:#e9e6dc;transition:transform .12s ease-out,box-shadow .12s ease-out}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
a.game:hover .thumb{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
a.game:active .thumb{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);transition-duration:.05s}
a.game:focus-visible{outline:none}
a.game:focus-visible .thumb{outline:3px solid var(--pink);outline-offset:3px}
/* "Coming soon" placeholders: greyed out, not links. */
.game.soon{cursor:default;opacity:.45}
.ph{display:grid;place-items:center;background:#d9d7d0;color:#fff;font:800 clamp(64px,8vw,110px)/1 var(--display);
  -webkit-text-stroke:3px var(--ink);text-shadow:4px 4px 0 var(--ink)}

.game-title{display:flex;align-items:center;gap:8px;padding-top:4px;font:700 19px/23px var(--fira)}
.new{padding:2px 6px;border-radius:3px;background:#ff2d55;color:#fff;font:400 12px/14px "Lilita One",var(--fira);
  letter-spacing:1px;transform:rotate(6deg)}
.game-desc{font-size:14px;line-height:20px;color:var(--muted)}

@container (max-width:860px){ .games{--cols:3;--gap:24px;row-gap:36px} }
@container (max-width:620px){
  .games{--cols:2;--gap:16px;row-gap:28px}
  .game{gap:8px}
  .game-title{font-size:16px;line-height:20px}
  .game-desc{font-size:13px;line-height:18px}
}

.page-foot{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:8px;text-align:center}
.counter{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.digits{display:flex;gap:2px;padding:3px;border-radius:3px;background:var(--ink)}
.digits b{width:16px;height:22px;display:grid;place-items:center;background:#000;color:#39ff6a;font:400 22px/1 var(--vt)}
.best{font-size:12px;color:var(--faint)}

/* ---------- taskbar (always on screen) ---------- */
.taskbar{height:32px;box-sizing:content-box;padding-bottom:env(safe-area-inset-bottom,0px);flex:none;display:flex;align-items:center;gap:8px;
  background:linear-gradient(#3a81f3,#245edc 12%,#2a63de 50%,#1f51c7 90%,#1941a5);color:#fff;font-size:11px;user-select:none}
.start{height:100%;flex:none;display:flex;align-items:center;gap:6px;padding:0 22px 0 10px;border-radius:0 12px 12px 0;
  background:linear-gradient(#5fc85f,#3a9f3a 25%,#33933a 75%,#2a7f2e);box-shadow:2px 0 3px rgba(0,0,0,.33);
  font:italic 700 19px/1 var(--fira);text-shadow:1px 1px 1px #0b3d0b}
.start .ic{width:18px;height:18px;color:#ffe14d}
.quick{flex:none;display:flex;gap:6px;padding:0 8px;color:#ddebff}
.task{flex:0 1 200px;min-width:0;height:24px;display:flex;align-items:center;gap:6px;padding:0 8px;border:1px solid #11338a;
  border-radius:3px;background:#1e4fb8;box-shadow:inset 1px 1px 2px rgba(0,0,0,.4)}
.task .ic{width:14px;height:14px;color:#9ed3ff}
.task span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray{height:100%;flex:none;margin-left:auto;display:flex;align-items:center;gap:10px;padding:0 14px 0 12px;
  border-left:1px solid #0b4bb8;background:linear-gradient(#1a9bf2,#0f8ae8 50%,#0c73d2)}
.tray .ic{width:14px;height:14px}
.clock{white-space:nowrap}

/* ---------- smaller screens ---------- */
@media (max-width:960px){
  .desk-icons{display:none}
  .desktop{padding:12px 12px 14px}
  .ie{transform-origin:200px calc(100% + 26px)}
}
@media (max-width:640px){
  .desktop{padding:0}
  .ie,.ie-title{border-radius:0}
  .ie{box-shadow:none;padding:0 3px 3px}
  .wide,.tb-label,.addr-label,.go-label,.links,.cell,.quick{display:none}
  .zone{width:auto}
  .tray{gap:8px;padding:0 10px}
  .tray .ic:first-child{display:none}
}

/* ---------- boot intro ----------
   Timeline (seconds): 0 to 0.5 BIOS text burst, 0.5 to 1.25 splash with one pass of the bar,
   0.15 of black, then the desktop at 1.4: taskbar slides up, IE grows out of its taskbar button,
   logo and cards stagger in and settle by about 1.9. Everything is keyed off html.booting,
   which the inline script in index.html sets before first paint. Opacity (not visibility) hides
   the phases so a revealed line can't show through a hidden parent. */
@keyframes reveal{to{opacity:1}}
@keyframes vanish{to{opacity:0}}
@keyframes gone{to{visibility:hidden}}
@keyframes blink{50%{visibility:hidden}}
@keyframes pass{from{transform:translateX(-33px)}to{transform:translateX(188px)}}
@keyframes rise{from{transform:translateY(32px)}}
@keyframes grow{from{transform:scale(.2);opacity:0}}
@keyframes pop{from{transform:translateY(12px);opacity:0}}

.boot{display:none}
.booting .boot{display:block;position:fixed;inset:0;z-index:100;overflow:hidden;background:#000;color:#c8c8c8;
  cursor:default;user-select:none;animation:gone 0s 1.4s forwards}
.boot *{pointer-events:none}

.bios{--size:clamp(15px,2.1vw,30px);position:absolute;inset:0;display:flex;flex-direction:column;
  padding:clamp(20px,3.9vw,56px) clamp(16px,4.4vw,64px);font:400 var(--size)/1.267 var(--vt);animation:vanish 0s .5s forwards}
.bios-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.bios-body{padding-top:calc(var(--size)*1.6)}
.bios .ln{white-space:pre;opacity:0;animation:reveal 0s calc(var(--i) * 35ms) forwards}
.bios .hi{color:#fff}
.bios .cursor{display:block;width:.53em;height:.13em;background:#c8c8c8;
  animation:reveal 0s calc(var(--i) * 35ms) forwards,blink .5s steps(1) infinite}
.bios .wm.mini{font-size:calc(var(--size) * 1.87);color:#fff}
.skip{margin-top:auto;color:var(--sun)}
.skip-tap{display:none}
@media (hover:none){ .skip-keys{display:none} .skip-tap{display:inline} }
@media (max-width:640px){ .bios .wm.mini{display:none} }

.splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:72px;
  opacity:0;animation:reveal 0s .5s forwards,vanish 0s 1.25s forwards}
.splash .wm{font-size:min(120px,22vw);color:#fff}
.bar{width:200px;height:22px;padding:4px;border:2px solid #b9b9b9;border-radius:5px;background:#000;overflow:hidden}
.blocks{display:flex;gap:3px;width:33px;height:100%;animation:pass .75s linear .5s both}
.blocks i{width:9px;flex:none;background:linear-gradient(#d13f59,#ff5c83 38%,#942d3f)}
.splash-foot{position:absolute;left:clamp(16px,3.3vw,48px);right:clamp(16px,3.3vw,48px);bottom:clamp(20px,7vh,64px);
  display:flex;justify-content:space-between;gap:16px;font-size:14px}
.copy{color:var(--faint)}
.edition{font:italic 600 14px var(--fira);color:var(--sun)}

.booting .taskbar{animation:rise .15s ease-out 1.4s both}
.booting .ie{animation:grow .2s ease-out 1.4s both}
.booting .hero{animation:pop .15s ease-out 1.55s both}
.booting .games li{animation:pop .2s ease-out calc(1.6s + var(--i) * 25ms) both}
.booting .page-foot{animation:pop .2s ease-out 1.75s both}