@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

* { box-sizing: border-box; margin:0; padding:0; }
html,body { height:100%; }
body{
  background:#3a6ea5;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.06) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.05) 0 2px, transparent 3px);
  background-size: 40px 40px;
  font-family:"Tahoma","MS Sans Serif",Verdana,sans-serif;
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  padding:8px;
  color:#000;
  overflow:hidden;
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
u{ text-decoration:underline; }

/* ---- Win98 chrome ---- */
#win98window{
  width:min(96vw, 860px);
  background:#c0c0c0;
  border:2px solid #fff;
  border-right-color:#404040; border-bottom-color:#404040;
  box-shadow: inset -1px -1px 0 #808080, 3px 3px 0 rgba(0,0,0,.35);
  padding:3px;
  display:flex; flex-direction:column;
}
#titlebar{
  height:24px;
  background:linear-gradient(90deg,#000080,#1084d0);
  color:#fff; display:flex; align-items:center; justify-content:space-between;
  padding:0 3px 0 4px;
}
#title{ display:flex; align-items:center; gap:6px; font-weight:bold; font-size:13px; overflow:hidden; white-space:nowrap; text-shadow:1px 1px 0 rgba(0,0,0,.4);}
#titleicon{ font-size:13px; }
#wincontrols{ display:flex; gap:2px; }
.winbtn{
  width:20px; height:18px; background:#c0c0c0; font-size:10px; font-weight:bold;
  border:1px solid #fff; border-right-color:#404040; border-bottom-color:#404040;
  cursor:pointer; line-height:1; color:#000;
}
.winbtn:active{ border:1px solid #404040; border-right-color:#fff; border-bottom-color:#fff; }

#menubar{
  height:22px; display:flex; align-items:center; gap:2px; padding:0 4px;
  font-size:13px; position:relative;
}
.menu{ padding:2px 7px; cursor:pointer; }
.menu:hover, .menu.active{ background:#000080; color:#fff; }
#menu-mario{ margin-left:auto; background:#000; padding:2px 8px; border:1px solid #808080; }
#dropdown{
  position:absolute; z-index:60; background:#c0c0c0; display:none;
  border:2px solid #fff; border-right-color:#404040; border-bottom-color:#404040;
  box-shadow:2px 2px 0 rgba(0,0,0,.4); font-size:12px; min-width:150px;
}
#dropdown .ditem{ padding:4px 18px 4px 22px; cursor:pointer; }
#dropdown .ditem:hover{ background:#000080; color:#fff; }
#dropdown .dsep{ height:1px; background:#808080; margin:3px 2px; border-bottom:1px solid #fff; }

/* ---- viewport / canvas ---- */
#viewport{
  position:relative;
  margin:3px 0;
  border:2px solid #808080; border-right-color:#fff; border-bottom-color:#fff;
  background:#008080;
  aspect-ratio: 16 / 10;
  overflow:hidden;
}
#canvas{ width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; }

/* ---- status bar ---- */
#statusbar{ display:flex; gap:3px; height:22px; }
.statuspanel{
  flex:1; font-size:11px; font-weight:bold; display:flex; align-items:center; padding:0 6px;
  border:1px solid #808080; border-right-color:#fff; border-bottom-color:#fff;
  background:#c0c0c0; white-space:nowrap; overflow:hidden;
  font-family:"Press Start 2P", monospace; letter-spacing:-1px;
}
.statuspanel{ font-size:8px; }

/* ---- overlays ---- */
.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:20; text-align:center; padding:12px;
}
.hidden{ display:none !important; }

/* boot */
#bootscreen{ background:#008080; }
.bootbox{ width:70%; max-width:360px; }
.boot-logo{ font-family:"Press Start 2P"; font-size:14px; color:#fff; margin-bottom:6px; }
.boot-sub{ color:#fff; font-size:11px; margin-bottom:16px; }
.progressbar{
  height:20px; background:#000; border:2px solid #808080; border-right-color:#fff; border-bottom-color:#fff;
  padding:2px; display:flex;
}
#progressfill{ width:0%; height:100%; background:repeating-linear-gradient(90deg,#000080 0 10px,transparent 10px 12px); transition:width .2s; }
#bootstatus{ color:#fff; font-size:11px; margin-top:8px; }

/* title */
#titlescreen{ background:linear-gradient(#5c94fc,#008080); }
.titlebox h1{
  font-family:"Press Start 2P"; font-size:26px; line-height:1.3; color:#fff;
  text-shadow:3px 3px 0 #000080, 5px 5px 0 rgba(0,0,0,.3); margin-bottom:10px;
}
.tagline{ color:#ffef00; font-size:12px; margin-bottom:16px; text-shadow:1px 1px 0 #000; }
.besttxt{ margin:10px 0; font-size:11px; color:#fff; text-shadow:1px 1px 0 #000; line-height:1.6;}
.hint{ margin-top:14px; font-size:10px; color:#fff; background:rgba(0,0,0,.4); padding:6px; display:inline-block;}

.w98btn{
  font-family:"Tahoma",sans-serif; font-size:13px; padding:6px 14px; margin:4px;
  background:#c0c0c0; border:2px solid #fff; border-right-color:#404040; border-bottom-color:#404040;
  cursor:pointer; color:#000;
}
.w98btn:active{ border:2px solid #404040; border-right-color:#fff; border-bottom-color:#fff; }
.w98btn.big{ font-size:15px; padding:10px 20px; font-weight:bold; }

/* BSOD */
#bsod{ background:#0000aa; color:#fff; font-family:"Press Start 2P"; align-items:flex-start; }
.bsodinner{ max-width:600px; margin-top:8%; font-size:9px; line-height:1.9; text-align:left; }
.bsod-head{ background:#c0c0c0; color:#0000aa; display:inline-block; padding:3px 10px; margin-bottom:16px;}
.bsod-btns{ margin:16px 0; }
.bsodbtn{ background:#c0c0c0; color:#000; border:none; font-family:"Press Start 2P"; font-size:8px; padding:6px 10px; margin-right:10px; cursor:pointer;}
.blink{ animation:blink 1s steps(1) infinite; margin-top:10px;}
@keyframes blink{ 50%{ opacity:0; } }

/* win */
#winscreen{ background:linear-gradient(#008080,#000080); }

/* HOF */
#hof{ background:#008080; }
.hofbox{ width:88%; max-width:460px; background:#c0c0c0; padding:8px;
  border:2px solid #fff; border-right-color:#404040; border-bottom-color:#404040; }
.hof-title{ font-weight:bold; font-size:13px; margin-bottom:8px; }
.listview-head, .hof-row{ display:grid; grid-template-columns:30px 1fr 70px 50px; font-size:11px; }
.listview-head{ background:#c0c0c0; font-weight:bold; padding:3px;
  border:1px solid #808080; border-right-color:#fff; border-bottom-color:#fff;}
.listview-head span, .hof-row span{ padding:0 4px; }
.listview-body{ background:#fff; height:190px; overflow:auto; text-align:left;
  border:2px solid #808080; border-right-color:#fff; border-bottom-color:#fff; margin-bottom:8px;}
.hof-row{ padding:3px; border-bottom:1px solid #eee; }
.hof-row:nth-child(1){ background:#fffbd0; font-weight:bold; }
.hof-loading{ padding:10px; font-size:11px; color:#666; }

/* error popup */
.errorpop{
  position:absolute; z-index:70; top:24%; left:50%; transform:translateX(-50%);
  width:min(320px,86%); background:#c0c0c0; font-size:12px;
  border:2px solid #fff; border-right-color:#404040; border-bottom-color:#404040;
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  animation:popin .2s ease;
}
@keyframes popin{ from{ transform:translate(-50%,-20px); opacity:0;} }
.errbar{ background:linear-gradient(90deg,#000080,#1084d0); color:#fff; font-weight:bold;
  padding:3px 6px; display:flex; justify-content:space-between; }
.errx{ cursor:pointer; }
.errbody{ display:flex; gap:12px; align-items:center; padding:16px 12px; }
.errico{ font-size:26px; }
.errfoot{ text-align:center; padding-bottom:10px; }

/* touch controls */
#touch{ display:none; width:min(96vw,860px); justify-content:space-between; margin-top:8px; }
.tpad{ display:flex; gap:10px; }
.tbtn{
  width:64px; height:64px; font-size:14px; font-weight:bold; border-radius:8px;
  background:#c0c0c0; border:3px solid #fff; border-right-color:#404040; border-bottom-color:#404040;
  color:#000; touch-action:none;
}
.tbtn:active{ background:#a0a0a0; }
.tbtn-jump{ background:#4caf50; color:#fff; }
@media (hover:none) and (pointer:coarse){ #touch{ display:flex; } .hint{display:none;} }

#foot{ margin-top:10px; font-size:12px; }
#foot a{ color:#ffef00; }
#auth-status{ position:fixed; top:6px; right:10px; font-size:11px; color:#fff; }
</style>