:root{--bg:#0d5fa3;--bg2:#2f88ca;--panel:#c0c0c0;--hi:#fff;--lo:#7f7f7f;--title1:#000080;--title2:#1084d0;--text:#111}
*{box-sizing:border-box}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{margin:0;font-family:"MS Sans Serif",Tahoma,sans-serif;background:linear-gradient(145deg,var(--bg),var(--bg2));color:var(--text);min-height:100vh;overflow:hidden}
body.booting{overflow:hidden}

#desktopRoot{opacity:0;transform:scale(1.02);filter:blur(3px)}
body.booted #desktopRoot{animation:desktopIn .55s ease forwards}

.boot-screen{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;overflow:hidden;padding:10px}
.boot-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom, rgba(80,180,255,.07) 0 1px, transparent 2px 4px);opacity:.35;animation:bootScan 6s linear infinite}
.boot-screen.hidden{display:none}
.boot-screen.exiting{animation:bootOpen .55s ease forwards}

.bios-screen{position:relative;z-index:2;width:min(980px,100%);height:min(680px,92vh);background:#000;padding:12px 14px;overflow:hidden}
.bios-text{margin:0;color:#66b9ff;font:600 20px/1.23 "Courier New",monospace;white-space:pre-wrap;text-shadow:0 0 8px rgba(102,185,255,.35);padding-right:320px}
.bios-hint{position:absolute;left:14px;right:14px;bottom:10px;color:#8fd0ff;font:700 18px/1.2 "Courier New",monospace;opacity:.95;animation:blink 1s steps(2,end) infinite}

.bsod-screen{position:absolute;inset:0;display:none;background:#0a3aa9;color:#fff;padding:56px 42px;font-family:"Segoe UI",Tahoma,sans-serif}
.bsod-screen.show{display:block}
.bsod-title{font-size:88px;line-height:1;margin-bottom:20px}
.bsod-text{font-size:26px;line-height:1.35;max-width:980px;margin-bottom:14px}

.energy-badge{position:absolute;right:26px;top:48px;width:270px;color:#f5e663;z-index:3;text-align:center;filter:drop-shadow(0 0 2px rgba(245,230,99,.2));image-rendering:pixelated}
.energy-badge::before{content:"";position:absolute;left:18px;right:18px;top:-8px;height:96px;border:4px solid #f5e663;border-bottom:0;border-radius:170px 170px 0 0;opacity:.95;box-shadow:0 0 0 1px #9c8b2a,0 0 0 3px rgba(0,0,0,.55) inset}
.energy-script{position:relative;font:700 48px/1 "Courier New",monospace;letter-spacing:0;transform:scaleY(1.05);text-transform:lowercase;text-shadow:1px 0 0 #f5e663,-1px 0 0 #f5e663,0 1px 0 #f5e663}
.energy-bar{margin-top:0;padding-top:4px;border-top:4px solid #33f05a;color:#33f05a;font:700 20px/1 "Courier New",monospace;letter-spacing:0;word-spacing:-2px;text-shadow:1px 1px 0 rgba(0,0,0,.5)}

.container{position:relative;height:calc(100vh - 38px);padding:10px}
.hero,.stats{display:none}
.desktop{display:grid;grid-template-columns:repeat(auto-fill,92px);grid-auto-rows:92px;gap:12px;align-content:start;z-index:1;position:relative}
.desk-icon{width:92px;height:92px;background:transparent;border:0;color:#fff;text-align:center;cursor:pointer;padding:4px;border-radius:2px}
.desk-icon span{display:block;font-size:12px;line-height:1.15;text-shadow:1px 1px 0 #000;margin-top:2px}
.desk-img{width:32px;height:32px;display:block;margin:2px auto 4px;image-rendering:pixelated}
.desk-icon:hover,.desk-icon:focus-visible{background:rgba(255,255,255,.16);outline:none}

.win-window{position:absolute;display:none;z-index:8;background:var(--panel);border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);box-shadow:2px 2px 0 #000}
.win-window.open{display:block}
.win-window.active{z-index:16}
.win-title{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--title1),var(--title2));color:#fff;padding:4px 6px;font-size:12px;font-weight:700;cursor:move;user-select:none}
.win-close{border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);background:#cfcfcf;color:#000;font-weight:700;cursor:pointer;line-height:1;padding:1px 7px}
.win-body{padding:10px;max-height:70vh;overflow:auto;font-size:14px;line-height:1.4}
.iframe-wrap{padding:0;height:calc(100% - 22px)}
#iframeHint{padding:8px}
#appFrame{width:100%;height:100%;border:0;background:#fff;display:block;min-height:360px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.card{background:#d8d8d8;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);padding:10px;display:flex;flex-direction:column;gap:8px}
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}.desc{margin:0;font-size:.86rem;line-height:1.35;min-height:40px}.muted{font-size:.78rem}
.badge{font-size:.68rem;padding:3px 6px;border:1px solid #000;background:#e5e5e5}.badge.live{background:#0a9b4b;color:#fff}.badge.beta{background:#d47f00;color:#fff}.badge.private{background:#7a2cff;color:#fff}
a.btn,button.btn{text-decoration:none;color:#000;background:#cfcfcf;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);padding:5px 9px;font-weight:700;font-size:.8rem;cursor:pointer}

.taskbar{position:fixed;left:0;right:0;bottom:0;height:38px;padding:5px 8px;background:var(--panel);border-top:2px solid var(--hi);box-shadow:0 -2px 0 #000;z-index:30;display:flex;align-items:center;gap:8px}
.start-btn{font-weight:700;font-size:12px;background:#cfcfcf;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);padding:4px 14px;cursor:pointer}
.start-btn.open,.start-btn:active{border-top:2px solid var(--lo);border-left:2px solid var(--lo);border-right:2px solid var(--hi);border-bottom:2px solid var(--hi)}
.taskbar-windows{display:flex;gap:6px;min-width:0;flex:1}
.task-btn{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:4px 8px;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);background:#d8d8d8;cursor:pointer}
.task-btn.active{background:#efefef;border-top:2px solid var(--lo);border-left:2px solid var(--lo);border-right:2px solid var(--hi);border-bottom:2px solid var(--hi)}
.tray{display:flex;gap:6px}.tray-pill{font-size:11px;min-width:68px;text-align:center;padding:3px 6px;background:#d9d9d9;border-top:2px solid var(--lo);border-left:2px solid var(--lo);border-right:2px solid var(--hi);border-bottom:2px solid var(--hi)}
.start-menu{position:fixed;left:8px;bottom:40px;width:300px;background:#c0c0c0;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);box-shadow:2px 2px 0 #000;z-index:35;display:none}
.start-menu.open{display:block}.start-head{background:linear-gradient(180deg,#000080,#1084d0);color:#fff;font-weight:700;padding:7px 9px;font-size:12px}.start-items{padding:6px;max-height:52vh;overflow:auto}.start-item{display:flex;justify-content:space-between;text-decoration:none;color:#000;font-size:12px;padding:6px 7px}.start-item:hover{background:#000080;color:#fff}
body.mobile-mode .desktop{
  display:grid;
  grid-template-columns:repeat(3,minmax(86px,1fr));
  gap:12px 10px;
  padding:6px 4px 10px;
  max-height:240px;
  overflow-y:auto;
  overflow-x:hidden;
}
body.mobile-mode .desk-icon{
  width:100%;
  height:92px;
  min-width:0;
}
body.mobile-mode .win-window{
  width:auto !important;
  left:8px !important;
  right:8px !important;
  top:118px !important;
  height:calc(100vh - 168px) !important;
}
body.mobile-mode #readerWindow,
body.mobile-mode #aboutWindow{
  height:auto !important;
  max-height:calc(100vh - 176px) !important;
}
body.mobile-mode #readerWindow .win-body,
body.mobile-mode #aboutWindow .win-body{
  max-height:none !important;
  overflow:visible;
  padding-bottom:12px;
}
body.mobile-mode .win-body{max-height:calc(100vh - 230px)}
body.mobile-mode #browserWindow .win-body{padding:0}
body.mobile-mode .taskbar{height:40px;padding:5px 6px}
body.mobile-mode .taskbar-windows{display:none}
body.mobile-mode .start-menu{width:min(92vw,320px)}

.easter-toast{position:fixed;right:10px;bottom:48px;z-index:60;max-width:320px;background:#000;color:#39ff14;border:2px solid #39ff14;padding:8px 10px;font-size:12px;display:none;box-shadow:0 0 14px rgba(57,255,20,.35)}
.easter-toast.show{display:block;animation:pop .18s ease}

.easter-layer{position:absolute;inset:8px 8px 48px 8px;pointer-events:none;z-index:4}
.easter-item{position:absolute;pointer-events:auto;cursor:pointer;font-size:18px;line-height:1;background:rgba(0,0,0,.15);border:1px dashed rgba(255,255,255,.35);padding:5px 6px;border-radius:6px;backdrop-filter:blur(1px);animation:floatEgg 4.2s ease-in-out infinite}
.easter-item:nth-child(even){animation-duration:5.4s}
.easter-item.revealed{border-style:solid;border-color:#39ff14;box-shadow:0 0 12px rgba(57,255,20,.5)}
@keyframes floatEgg{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

@keyframes bootScan{from{transform:translateY(0)}to{transform:translateY(4px)}}
@keyframes bootOpen{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes desktopIn{from{opacity:0;transform:scale(1.02);filter:blur(3px)}to{opacity:1;transform:scale(1);filter:blur(0)}}

@media (max-width:720px){
  .boot-screen{padding:8px}
  .bios-screen{height:min(560px,92vh);padding:8px 10px}
  .bios-text{font-size:14px;line-height:1.2;padding-right:0;padding-top:120px}
  .bios-hint{font-size:13px;left:10px;right:10px;bottom:8px}
  .bsod-screen{padding:22px 16px}
  .bsod-title{font-size:56px}
  .bsod-text{font-size:18px}
  .energy-badge{right:50%;transform:translateX(50%);top:8px;width:220px}
  .energy-badge::before{height:74px;left:12px;right:12px;border-width:3px}
  .energy-script{font-size:34px}
  .energy-bar{font-size:14px;border-top-width:3px}
  .container{padding:8px}
  .desktop{grid-template-columns:repeat(3,minmax(86px,1fr));gap:12px 10px}
  .desk-icon{width:100%;height:92px}
  .task-btn{max-width:130px}
  .tray-pill{min-width:56px;font-size:10px}

  /* hard default placement guard for initial Reader window */
  #readerWindow.win-window.open{
    left:8px !important;
    right:8px !important;
    top:118px !important;
    width:auto !important;
    height:auto !important;
  }
}



body.matrix-flash{filter:hue-rotate(95deg) contrast(1.18)}



/* 90s lore dock - fixed bottom line */
.easter-dock{position:fixed;left:10px;right:10px;bottom:46px;z-index:26;display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;padding:2px 4px}
.egg-btn{flex:0 0 auto;background:#cfcfcf;border-top:2px solid var(--hi);border-left:2px solid var(--hi);border-right:2px solid var(--lo);border-bottom:2px solid var(--lo);padding:5px 9px;font:700 11px "MS Sans Serif",Tahoma,sans-serif;cursor:pointer;white-space:nowrap}
.egg-btn.active,.egg-btn:active{border-top:2px solid var(--lo);border-left:2px solid var(--lo);border-right:2px solid var(--hi);border-bottom:2px solid var(--hi);background:#e8e8e8}

/* Theme overhauls */
body{transition:background .45s ease, filter .35s ease}
body.lore-matrix{--theme-bg:url('./assets/themes/matrix-pixel.png');background-image:linear-gradient(rgba(0,10,0,.56),rgba(0,10,0,.56)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}
body.lore-matrix #desktopRoot{filter:hue-rotate(80deg) saturate(1.25)}
body.lore-tmnt{--theme-bg:url('./assets/themes/tmnt-pixel.png');background-image:linear-gradient(rgba(8,22,4,.48),rgba(8,22,4,.48)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}
body.lore-tmnt .win-title{background:linear-gradient(90deg,#134d1f,#2e7d32)}
body.lore-element{--theme-bg:url('./assets/themes/element-pixel.png');background-image:linear-gradient(rgba(18,12,34,.45),rgba(18,12,34,.45)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}
body.lore-element .win-title{background:linear-gradient(90deg,#223a7a,#f08c2b)}
body.lore-hacker{--theme-bg:url('./assets/themes/hacker-pixel.png');background-image:linear-gradient(rgba(2,8,18,.55),rgba(2,8,18,.55)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}
body.lore-hacker #desktopRoot{filter:contrast(1.1) saturate(0.85)}
body.lore-hacker .win-title{background:linear-gradient(90deg,#0a0,#040)}
body.lore-catdog{--theme-bg:url('./assets/themes/catdog-pixel.png');background-image:linear-gradient(rgba(22,14,2,.18),rgba(10,18,30,.18)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}

@media (max-width:720px){
  .easter-dock{bottom:44px;justify-content:flex-start}
  .egg-btn{font-size:10px;padding:4px 8px}
}


body.no-anim *, body.no-anim *::before, body.no-anim *::after{animation:none !important; transition:none !important;}


/* theme background adaptivity by viewport */
@media (max-width:720px){
  body.lore-matrix,body.lore-tmnt,body.lore-element,body.lore-hacker,body.lore-catdog,body.lore-spiderman,body.lore-mario{
    background-attachment:scroll;
    background-size:auto 100vh;
    background-position:center top;
  }
}
@media (min-width:721px){
  body.lore-matrix,body.lore-tmnt,body.lore-element,body.lore-hacker,body.lore-catdog,body.lore-spiderman,body.lore-mario{
    background-size:cover;
    background-position:center center;
    background-attachment:fixed;
  }
}


.mikenet-bar{display:flex;gap:8px;align-items:center;padding:6px;background:#d9d9d9;border-bottom:2px solid #7f7f7f}
.mikenet-logo{font-size:12px;white-space:nowrap;display:flex;align-items:center;gap:4px}
.mikenet-addr{flex:1;min-width:0;padding:5px 8px;border-top:2px solid #7f7f7f;border-left:2px solid #7f7f7f;border-right:2px solid #fff;border-bottom:2px solid #fff;background:#fff;color:#111;font:12px "Courier New",monospace}

body.lore-spiderman{--theme-bg:url('./assets/themes/spiderman-pixel.png');background-image:linear-gradient(rgba(12,16,44,.40),rgba(44,6,12,.40)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}

body.lore-mario{--theme-bg:url('./assets/themes/mario-pixel.png');background-image:linear-gradient(rgba(10,20,70,.30),rgba(80,30,5,.28)),var(--theme-bg);background-position:center center;background-size:cover;background-attachment:fixed;background-repeat:no-repeat}

body.lore-mario .desk-icon, body.lore-spiderman .desk-icon{font-size:0;padding-top:40px}
body.lore-mario .desk-icon span, body.lore-spiderman .desk-icon span{font-size:12px}