*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font-family:Tahoma,Arial,sans-serif}
body{background:#008080}
button,a,input{font-family:Tahoma,Arial,sans-serif}
.hidden{display:none!important}

#boot{
  position:fixed;inset:0;background:#000;color:#fff;display:flex;align-items:center;justify-content:center;z-index:99999
}
.bootbox{width:min(560px,88vw);font-family:monospace}
.boot-title{font-size:34px;font-weight:bold;margin-bottom:28px}
.boot-line{margin-bottom:10px}
.progress{height:24px;border:2px solid #aaa;background:#111;padding:2px}
#bar{height:100%;width:0;background:#fff}
#boot-status{margin-top:8px}

#desktop{
  position:fixed;inset:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,.05) 25%,transparent 25%) 0 0/16px 16px,
    #008080;
  padding:18px 18px 58px;
}
.desktop-icon{
  width:92px;text-align:center;color:#fff;text-shadow:1px 1px #000;margin-bottom:18px;cursor:pointer;user-select:none
}
.desktop-icon img{width:52px;height:52px;object-fit:cover;border:1px solid #fff;image-rendering:auto}
.icon-art{font-size:48px;line-height:55px}
.desktop-icon span{display:block;font-size:13px;margin-top:3px}
.desktop-note{
  position:absolute;right:28px;top:26px;background:#fff66d;color:#000;padding:18px;width:180px;
  border:1px solid #d7ca40;box-shadow:4px 4px 8px #0007;transform:rotate(2deg);font-family:"Comic Sans MS",cursive
}

.window{
  position:absolute;background:#c0c0c0;border:3px outset #eee;box-shadow:5px 5px 0 #0006
}
.main-window{left:16%;top:7%;width:min(850px,70vw);z-index:10}
.small-window{width:430px;z-index:30}
.wallet-window{left:49%;top:17%}
.chat-window{left:23%;top:44%}
.trash-window{left:56%;top:52%}
.browser-window{left:10%;top:12%;width:min(900px,78vw);height:68vh;z-index:40}
.hiddenwin{display:none}

.titlebar{
  height:30px;background:#000080;color:#fff;padding:4px 5px 4px 8px;display:flex;align-items:center;justify-content:space-between;
  font-weight:bold;cursor:move;user-select:none
}
.win-buttons{display:flex;gap:2px}
.win-buttons button{width:25px;height:22px;padding:0;border:2px outset #eee;background:#c0c0c0;font-weight:bold}
.window-body{padding:14px;color:#000}
.profile-body{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.portrait-frame{background:#fff;border:3px inset #ddd;padding:8px;position:relative}
.portrait-frame img{display:block;width:100%;height:430px;object-fit:contain}
.camera-label{position:absolute;left:12px;top:12px;background:red;color:#fff;padding:4px 7px;font-size:12px;font-weight:bold}
.profile-info h1{font-size:48px;margin:4px 0 0;font-family:"Comic Sans MS",cursive;line-height:.9}
.ticker{font-size:30px;font-weight:bold;color:#000080;margin:12px 0}
table{border-collapse:collapse;width:100%;background:#fff}
td{border:1px solid #888;padding:8px}
td:first-child{font-weight:bold;background:#ddd;width:40%}
.classic-btn{
  margin-top:12px;padding:7px 12px;background:#c0c0c0;border:3px outset #eee;color:#000;font-weight:bold;cursor:pointer
}
.classic-btn:active{border-style:inset}
.token-big{font-size:54px;font-weight:bold;color:#000080;text-align:center}
.ca-line{background:#fff;border:2px inset #ddd;padding:8px;word-break:break-all}
.link-row{display:flex;gap:7px}
.linkbtn{text-decoration:none;display:inline-block}
.chatlog{background:#fff;min-height:220px;font-family:monospace}
.trash-item{background:#fff;border-bottom:1px solid #aaa;padding:10px}
.browserbar{padding:6px;background:#c0c0c0;border-bottom:2px solid #888}
.browserbar input{width:70%;background:#fff;border:2px inset #ddd;padding:3px}
.fake-page{height:calc(100% - 66px);overflow:auto;background:#fff;padding:24px;text-align:center;font-family:"Comic Sans MS",cursive}
.fake-page h2{font-size:38px;color:#0000cc;text-decoration:underline}
.fake-page marquee{background:#ffff00;border:2px solid #000;padding:7px;color:#f00;font-weight:bold}
.fake-page img{width:280px;display:block;margin:20px auto}
.counter{display:inline-block;background:#000;color:#0f0;font-family:monospace;padding:8px}

.clippy{position:absolute;right:25px;bottom:62px;z-index:70;display:flex;align-items:flex-end}
.paperclip{font-size:70px;transform:rotate(-25deg)}
.bubble{width:250px;background:#fffdd0;border:2px solid #000;padding:12px;box-shadow:4px 4px 0 #0005;margin-right:6px;position:relative}
.bubble:after{content:"";position:absolute;right:-16px;bottom:18px;border-width:8px;border-style:solid;border-color:transparent transparent transparent #000}
.bubble-actions{margin-top:10px;display:flex;gap:6px}
.bubble-actions button{border:2px outset #eee;background:#c0c0c0;padding:5px 12px}

.taskbar{
  position:fixed;left:0;right:0;bottom:0;height:42px;background:#c0c0c0;border-top:3px outset #eee;display:flex;align-items:center;gap:6px;padding:4px;z-index:1000
}
.start-btn{height:32px;font-weight:bold;border:3px outset #eee;background:#c0c0c0;padding:3px 10px}
.task-label{height:31px;min-width:220px;border:2px inset #eee;padding:6px 10px;font-size:13px}
.tray{margin-left:auto;height:31px;border:2px inset #eee;padding:6px 10px;font-size:13px}
.start-menu{
  position:fixed;left:4px;bottom:42px;width:260px;background:#c0c0c0;border:3px outset #eee;z-index:999;display:flex
}
.start-menu.hidden{display:none}
.side-label{width:38px;background:#777;color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);padding:10px;font-weight:bold}
.menu-items{flex:1;padding:4px}
.menu-items button{width:100%;text-align:left;border:0;background:#c0c0c0;padding:12px;font-size:15px}
.menu-items button:hover{background:#000080;color:#fff}

#toast{
  position:fixed;left:50%;top:18px;transform:translate(-50%,-90px);background:#ffffcc;border:3px outset #eee;
  padding:12px 18px;z-index:2000;transition:.2s
}
#toast.show{transform:translate(-50%,0)}

@media(max-width:800px){
  #desktop{overflow:auto;padding-bottom:65px}
  .main-window,.small-window,.browser-window{position:relative!important;left:auto!important;top:auto!important;width:100%!important;margin:18px 0}
  .hiddenwin{display:none!important}
  .profile-body{grid-template-columns:1fr}
  .portrait-frame img{height:auto}
  .desktop-icon{display:inline-block;vertical-align:top}
  .desktop-note{display:none}
  html,body{overflow:auto}
}