/* winXJ — frozen-window smear toy. XP-flavoured chrome, modern touch. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; width: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #245edb;
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  -webkit-user-select: none; user-select: none;
  touch-action: none;
}
#desktop { position: fixed; inset: 0; z-index: 1; }
#desktop canvas { display: block; touch-action: none; }

/* ---------------- taskbar ---------------- */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: 44px; z-index: 50;
  display: flex; align-items: stretch;
  background: linear-gradient(#3a6fd8 0%, #245edb 8%, #2b6bdf 45%, #1d50c4 92%, #14409f 100%);
  border-top: 1px solid #5b8ef0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
#startBtn {
  display: flex; align-items: center; gap: 7px;
  border: none; cursor: pointer; color: #fff;
  font-family: inherit; font-style: italic; font-weight: 700; font-size: 19px;
  padding: 0 22px 3px 13px; margin-right: 8px;
  text-shadow: 1px 1px 1px rgba(0,0,0,.45);
  background: radial-gradient(120% 130% at 30% 20%, #6dd34f 0%, #4cb02f 42%, #2f8d1e 100%);
  border-radius: 0 12px 12px 0 / 0 18px 18px 0;
  box-shadow: inset 0 2px 1px rgba(255,255,255,.5), inset -2px -3px 4px rgba(0,0,0,.25);
}
#startBtn:active { filter: brightness(.92); }
#startBtn .flag { display: inline-flex; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); transform: rotate(-3deg); }
.startlabel { line-height: 1; }

.tb-tools { display: flex; align-items: center; gap: 2px; padding-left: 4px; }
.tb-spacer { flex: 1; }

.tbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin: 2px 1px; padding: 0;
  border: 1px solid transparent; border-radius: 6px;
  background: transparent; color: #fff; cursor: pointer;
}
.tbtn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); }
.tbtn:active { background: rgba(0,0,0,.18); }

.tray {
  display: flex; align-items: center; gap: 8px;
  padding: 0 12px 0 12px; margin-left: 6px;
  background: linear-gradient(#1c8ad6 0%, #1577c4 50%, #0f63ad 100%);
  border-left: 1px solid #0d4ea0; box-shadow: inset 1px 0 0 rgba(255,255,255,.25);
}
.clock { color: #fff; font-size: 13px; min-width: 56px; text-align: center; text-shadow: 0 1px 1px rgba(0,0,0,.4); }

/* chaos / stability meter */
.chaos {
  width: 78px; height: 15px; border-radius: 3px;
  background: #0a2d63; border: 1px solid #0a2247;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55); overflow: hidden;
}
.chaos i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(#7bf06a, #36b62a);
  transition: width .12s linear, background .25s linear;
}
#muteBtn .ic-off { display: none; }
#muteBtn.muted .ic-on { display: none; }
#muteBtn.muted .ic-off { display: inline; }

/* ---------------- start menu / help ---------------- */
#startMenu {
  position: fixed; left: 6px; bottom: 50px; z-index: 60;
  width: min(330px, calc(100vw - 12px));
  background: #fff; border-radius: 9px 9px 6px 6px;
  border: 1px solid #0a3bb5; overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
  animation: smpop .16s ease-out;
}
#startMenu[hidden] { display: none; }
@keyframes smpop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.sm-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; color: #fff; font-weight: 700; font-size: 19px;
  background: linear-gradient(#1f6fe0, #15479f);
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
}
.sm-body { padding: 13px 16px 14px; color: #20324d; }
.sm-lead { margin: 0 0 9px; font-size: 15px; }
.sm-steps { margin: 0 0 14px; padding-left: 20px; line-height: 1.5; font-size: 13.5px; color: #3a4a63; }
.sm-steps li { margin-bottom: 4px; }
.sm-actions { display: flex; gap: 9px; margin-bottom: 12px; }
.sm-btn {
  flex: 1; cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 700;
  padding: 10px 12px; border-radius: 7px; border: 1px solid #9cb0cd;
  background: linear-gradient(#fbfdff, #dfe7f3); color: #1c2b44;
}
.sm-btn:active { filter: brightness(.95); }
.sm-btn.primary { border-color: #2f8d1e; background: linear-gradient(#62c44a, #3a9c26); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); }
.sm-foot { font-size: 12px; color: #7c8aa0; }
.sm-foot a { color: #1f6fe0; font-weight: 700; text-decoration: none; }
.sm-foot a:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .startlabel { font-size: 17px; }
  .chaos { width: 58px; }
  .clock { min-width: 48px; font-size: 12px; }
}