/* ===== MemeCoin Bank - Pixel Desktop Theme ===== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-teal: #2a6e6e;
  --bg-teal-dark: #1f5454;
  --win-gray: #c0c0c0;
  --win-gray-light: #dfdfdf;
  --win-gray-dark: #808080;
  --win-gray-darker: #404040;
  --win-white: #ffffff;
  --win-black: #000000;
  --win-blue: #000080;
  --win-blue-light: #1084d0;
  --win-red: #c00000;
  --win-green: #008000;
  --win-yellow: #ffff80;
  --win-gold: #ffd700;
  --label-bg: rgba(0, 0, 0, 0.4);
}

body {
  font-family: 'MS Sans Serif', Tahoma, Geneva, sans-serif;
  font-size: 11px;
  color: var(--win-black);
  background: var(--bg-teal);
  overflow-x: hidden;
  -webkit-font-smoothing: none;
  image-rendering: pixelated;
}

img, svg {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ===== Desktop ===== */
.desktop {
  position: relative;
  min-height: calc(100vh - 36px);
  padding: 30px 40px;
  background: var(--bg-teal);
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
}

/* ===== Icon Grid (left side) ===== */
.icon-grid {
  display: grid;
  grid-template-columns: repeat(2, 100px);
  grid-auto-rows: 110px;
  gap: 20px;
  position: relative;
  z-index: 2;
  max-width: 240px;
}

.desk-icon {
  width: 100px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 6px;
  border: 1px dotted transparent;
  user-select: none;
  transition: background 0.05s;
}

.desk-icon:hover {
  background: rgba(255, 255, 255, 0.08);
}

.desk-icon.selected,
.desk-icon:active {
  border: 1px dotted #fff;
  background: rgba(0, 0, 128, 0.4);
}

.icon-art {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.5));
}

.icon-art svg {
  width: 64px;
  height: 64px;
}

.icon-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--win-white);
  text-align: center;
  line-height: 1.4;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
  letter-spacing: 0.5px;
  max-width: 90px;
}

/* ===== Big Pixel Logo (right side) ===== */
.pixel-logo {
  position: absolute;
  top: 60px;
  right: 80px;
  z-index: 1;
  pointer-events: none;
}

.logo-text,
.logo-shadow {
  font-family: 'Press Start 2P', monospace;
  font-size: 80px;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 4px;
  text-align: right;
}

.logo-text {
  position: relative;
  background: linear-gradient(180deg, #ffe048 0%, #ffd700 50%, #806000 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    4px 4px 0 #000,
    -2px -2px 0 #fff8b0;
  filter: drop-shadow(0 0 1px #ffd700);
  z-index: 2;
}

.logo-shadow {
  position: absolute;
  top: 8px;
  left: 8px;
  color: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.logo-coins {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.coin {
  position: absolute;
  width: 22px;
  height: 22px;
  background: radial-gradient(circle at 35% 35%, #ffe048 0%, #ffd700 50%, #806000 100%);
  border: 2px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: serif;
  font-weight: bold;
  color: #806000;
  font-size: 14px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.4);
}

.coin-1 { top: -20px; left: -30px; animation: bob 2.5s infinite ease-in-out; }
.coin-2 { top: 90px; left: -60px; animation: bob 3s infinite ease-in-out 0.5s; }
.coin-3 { bottom: 30px; right: -40px; animation: bob 2.8s infinite ease-in-out 1s; }

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(10deg); }
}

/* ===== Mascot ===== */
.mascot {
  position: absolute;
  bottom: 10px;
  z-index: 1;
  filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, 0.35));
  pointer-events: none;
  animation: walk 24s infinite linear;
}

@keyframes idle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes walk {
  0% { right: 5%; transform: scaleX(1) translateY(0); }
  2% { right: 6%; transform: scaleX(1) translateY(-20px); }
  4% { right: 7.5%; transform: scaleX(1) translateY(0); }
  6% { right: 9%; transform: scaleX(1) translateY(-20px); }
  8% { right: 10.5%; transform: scaleX(1) translateY(0); }
  10% { right: 12%; transform: scaleX(1) translateY(-20px); }
  12% { right: 13.5%; transform: scaleX(1) translateY(0); }
  14% { right: 15%; transform: scaleX(1) translateY(-20px); }
  16% { right: 16.5%; transform: scaleX(1) translateY(0); }
  18% { right: 18%; transform: scaleX(1) translateY(-20px); }
  20% { right: 19.5%; transform: scaleX(1) translateY(0); }
  22% { right: 21%; transform: scaleX(1) translateY(-20px); }
  24% { right: 22.5%; transform: scaleX(1) translateY(0); }
  26% { right: 24%; transform: scaleX(1) translateY(-20px); }
  28% { right: 25.5%; transform: scaleX(1) translateY(0); }
  30% { right: 27%; transform: scaleX(1) translateY(-20px); }
  32% { right: 28.5%; transform: scaleX(1) translateY(0); }
  34% { right: 30%; transform: scaleX(1) translateY(-20px); }
  36% { right: 31.5%; transform: scaleX(1) translateY(0); }
  38% { right: 33%; transform: scaleX(1) translateY(-20px); }
  40% { right: 34.5%; transform: scaleX(1) translateY(0); }
  42% { right: 36%; transform: scaleX(1) translateY(-20px); }
  44% { right: 37.5%; transform: scaleX(1) translateY(0); }
  46% { right: 39%; transform: scaleX(1) translateY(-20px); }
  48% { right: 40%; transform: scaleX(1) translateY(0); }
  50% { right: 40%; transform: scaleX(-1) translateY(0); }
  52% { right: 39%; transform: scaleX(-1) translateY(-20px); }
  54% { right: 37.5%; transform: scaleX(-1) translateY(0); }
  56% { right: 36%; transform: scaleX(-1) translateY(-20px); }
  58% { right: 34.5%; transform: scaleX(-1) translateY(0); }
  60% { right: 33%; transform: scaleX(-1) translateY(-20px); }
  62% { right: 31.5%; transform: scaleX(-1) translateY(0); }
  64% { right: 30%; transform: scaleX(-1) translateY(-20px); }
  66% { right: 28.5%; transform: scaleX(-1) translateY(0); }
  68% { right: 27%; transform: scaleX(-1) translateY(-20px); }
  70% { right: 25.5%; transform: scaleX(-1) translateY(0); }
  72% { right: 24%; transform: scaleX(-1) translateY(-20px); }
  74% { right: 22.5%; transform: scaleX(-1) translateY(0); }
  76% { right: 21%; transform: scaleX(-1) translateY(-20px); }
  78% { right: 19.5%; transform: scaleX(-1) translateY(0); }
  80% { right: 18%; transform: scaleX(-1) translateY(-20px); }
  82% { right: 16.5%; transform: scaleX(-1) translateY(0); }
  84% { right: 15%; transform: scaleX(-1) translateY(-20px); }
  86% { right: 13.5%; transform: scaleX(-1) translateY(0); }
  88% { right: 12%; transform: scaleX(-1) translateY(-20px); }
  90% { right: 10.5%; transform: scaleX(-1) translateY(0); }
  92% { right: 9%; transform: scaleX(-1) translateY(-20px); }
  94% { right: 7.5%; transform: scaleX(-1) translateY(0); }
  96% { right: 6%; transform: scaleX(-1) translateY(-20px); }
  98% { right: 5%; transform: scaleX(-1) translateY(0); }
  100% { right: 5%; transform: scaleX(1) translateY(0); }
}

/* ===== Windows ===== */
.window {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  box-shadow:
    inset 1px 1px 0 var(--win-gray-light),
    inset -1px -1px 0 var(--win-gray-dark),
    3px 3px 12px rgba(0, 0, 0, 0.4);
  position: absolute;
  width: 820px;
  z-index: 10;
}

.window.hidden { display: none; }

.window.focused { z-index: 100; }

.window#window-dashboard { top: 50px; left: 280px; }
.window#window-vote { top: 80px; left: 320px; }
.window#window-holders { top: 110px; left: 360px; }
.window#window-history { top: 140px; left: 400px; }
.window#window-howitworks { top: 80px; left: 320px; width: 700px; }
.window#window-rotation { top: 100px; left: 350px; }

.title-bar {
  background: linear-gradient(90deg, var(--win-blue) 0%, var(--win-blue-light) 100%);
  color: var(--win-white);
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  cursor: move;
  user-select: none;
}

.window:not(.focused) .title-bar {
  background: linear-gradient(90deg, #808080 0%, #c0c0c0 100%);
}

.title-bar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  padding-left: 2px;
}

.title-bar-controls {
  display: flex;
  gap: 2px;
}

.title-btn {
  width: 18px;
  height: 16px;
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  line-height: 1;
  color: var(--win-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-btn:active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
}

.window-body {
  padding: 10px;
  background: var(--win-gray);
  max-height: 70vh;
  overflow-y: auto;
}

.window-body::-webkit-scrollbar { width: 16px; }
.window-body::-webkit-scrollbar-track { background: var(--win-gray); }
.window-body::-webkit-scrollbar-thumb {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
}

.window-intro {
  font-size: 12px;
  margin-bottom: 10px;
  padding: 8px 10px;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
}

/* ===== Hero panel ===== */
.hero-panel {
  background: linear-gradient(135deg, #fffbe0 0%, #fff 100%);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.hero-text h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: 16px;
  color: var(--win-blue);
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.hero-text p {
  font-size: 12px;
  margin-bottom: 4px;
}

.small-text {
  font-size: 11px !important;
  color: var(--win-gray-darker);
}

/* ===== Stats Grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.stat-box {
  background: var(--win-gray);
  border: 2px groove var(--win-gray-light);
  padding: 10px 8px 6px;
  text-align: center;
}

.stat-box legend {
  font-size: 10px;
  font-weight: bold;
  padding: 0 6px;
  color: var(--win-blue);
}

.stat-num {
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 26px;
  font-weight: bold;
  color: var(--win-black);
  background: #000;
  color: #00ff00;
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 4px 6px;
  margin-top: 2px;
  letter-spacing: 1px;
}

.stat-unit {
  font-size: 10px;
  color: var(--win-gray-darker);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== Status row ===== */
.status-row {
  background: var(--win-gray);
  border: 2px groove var(--win-gray-light);
  padding: 10px;
  margin-bottom: 10px;
}

.status-row legend {
  font-size: 11px;
  font-weight: bold;
  padding: 0 4px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.status-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.rule-line {
  margin-top: 10px;
  padding: 6px 10px;
  background: #ffffcc;
  border: 1px solid var(--win-black);
  font-size: 11px;
  text-align: center;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 4px 8px;
}

.status-grid-4 .status-item {
  flex-direction: column;
  align-items: flex-start;
  padding: 6px 8px;
  gap: 2px;
  position: relative;
}

.status-grid-4 .status-item .led {
  position: absolute;
  top: 6px;
  right: 6px;
}

.status-grid-4 .status-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--win-gray-darker);
}

.status-grid-4 .status-value {
  font-size: 16px;
  margin-left: 0;
}

.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--win-black);
  flex-shrink: 0;
}

.led-green { background: #00ff00; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5), 0 0 5px #00ff00; animation: blink 2s infinite; }
.led-yellow { background: #ffff00; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5), 0 0 4px #ffff00; }
.led-blue { background: #0080ff; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5); }
.led-red { background: #ff3030; box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5), 0 0 5px #ff3030; animation: blink 3s infinite; }

@keyframes blink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.3; }
}

.status-label {
  font-size: 11px;
  font-weight: bold;
}

.status-value {
  font-family: 'VT323', monospace;
  font-size: 14px;
  font-weight: bold;
  color: var(--win-blue);
  margin-left: auto;
}

/* ===== Vote info grid ===== */
.vote-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.vote-info-item {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 6px 8px;
  text-align: center;
}

.info-key {
  display: block;
  font-size: 10px;
  font-weight: bold;
  color: var(--win-gray-darker);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-val {
  display: block;
  font-family: 'VT323', monospace;
  font-size: 18px;
  font-weight: bold;
  color: var(--win-blue);
  margin-top: 2px;
}

/* ===== Candidates list ===== */
.candidates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.candidate-card {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.candidate-rank {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--win-gold);
  text-shadow: 1px 1px 0 #000;
  min-width: 30px;
}

.candidate-info {
  flex: 1;
}

.candidate-symbol {
  font-size: 14px;
  font-weight: bold;
  color: var(--win-blue);
}

.candidate-ca {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--win-gray-darker);
  word-break: break-all;
}

.candidate-votes {
  font-family: 'VT323', monospace;
  font-size: 20px;
  font-weight: bold;
  color: var(--win-green);
  background: #000;
  padding: 2px 8px;
  border: 1px solid var(--win-black);
  min-width: 50px;
  text-align: center;
}

.vote-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  padding: 6px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  color: var(--win-black);
}

.vote-btn:hover:not(:disabled) {
  background: var(--win-gray-light);
}

.vote-btn:active:not(:disabled) {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
}

.vote-btn:disabled {
  color: var(--win-gray-dark);
  cursor: not-allowed;
}

.vote-btn.voted {
  background: #008000;
  color: var(--win-white);
}

.vote-footer {
  margin-top: 12px;
  padding: 8px;
  background: #ffffcc;
  border: 1px solid var(--win-black);
}

/* ===== Page title ===== */
.page-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--win-blue);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--win-gray-dark);
}

/* ===== Step list ===== */
.step-list {
  list-style: none;
  counter-reset: step;
  margin-bottom: 14px;
}

.step-list li {
  counter-increment: step;
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 10px 12px 10px 44px;
  margin-bottom: 6px;
  position: relative;
}

.step-list li::before {
  content: counter(step);
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: var(--win-blue);
  color: var(--win-white);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 13px;
}

.step-list strong {
  font-size: 13px;
  color: var(--win-blue);
}

.step-list p {
  margin-top: 4px;
  font-size: 12px;
}

.info-fieldset {
  background: var(--win-gray);
  border: 2px groove var(--win-gray-light);
  padding: 10px;
  margin-bottom: 8px;
}

.info-fieldset legend {
  font-size: 11px;
  font-weight: bold;
  padding: 0 6px;
  color: var(--win-blue);
}

.info-fieldset p {
  font-size: 12px;
}

/* ===== Tables ===== */
.table-container {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  max-height: 400px;
  overflow-y: auto;
}

.table-container::-webkit-scrollbar { width: 16px; }
.table-container::-webkit-scrollbar-thumb {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--win-white);
}

th {
  background: var(--win-gray);
  border: 1px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  padding: 4px 8px;
  text-align: left;
  font-size: 11px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

td {
  padding: 5px 8px;
  font-size: 12px;
  border-bottom: 1px dotted var(--win-gray);
}

tr:hover td {
  background: var(--win-blue);
  color: var(--win-white);
}

tr:hover td .tx-link { color: var(--win-yellow); }

.empty {
  text-align: center;
  padding: 20px !important;
  color: var(--win-gray-dark);
  font-style: italic;
}

.status-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.status-completed { background: #ccffcc; border-color: var(--win-green); color: var(--win-green); }
.status-pending { background: #ffffcc; border-color: #888800; color: #886600; }
.status-failed { background: #ffcccc; border-color: var(--win-red); color: var(--win-red); }

.tx-link {
  color: var(--win-blue);
  text-decoration: underline;
  font-weight: bold;
}

.wallet-addr {
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

/* ===== Memecoin list ===== */
.memecoin-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.memecoin-card {
  background: var(--win-white);
  border: 2px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 10px;
}

.memecoin-card.active {
  background: #ffffcc;
  border: 2px solid var(--win-red);
}

.mc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.mc-symbol {
  font-size: 14px;
  font-weight: bold;
  color: var(--win-blue);
}

.mc-active-tag {
  background: var(--win-red);
  color: var(--win-white);
  padding: 1px 6px;
  font-size: 10px;
  font-weight: bold;
  border: 1px solid var(--win-black);
}

.mc-ca {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--win-gray-darker);
  word-break: break-all;
}

.mc-stats {
  font-size: 11px;
  border-top: 1px dotted var(--win-gray-dark);
  padding-top: 4px;
  margin-top: 4px;
}

/* ===== Status bar (window bottom) ===== */
.status-bar {
  display: flex;
  background: var(--win-gray);
  padding: 2px;
  border-top: 1px solid var(--win-white);
}

.status-section {
  border: 1px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 2px 8px;
  font-size: 11px;
  flex: 1;
}

.status-section:last-child {
  flex: 0 0 120px;
  text-align: right;
}

/* ===== Taskbar ===== */
.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--win-gray);
  border-top: 2px solid var(--win-white);
  display: flex;
  align-items: center;
  padding: 3px;
  gap: 3px;
  z-index: 1000;
  box-shadow: 0 -1px 0 var(--win-gray-darker);
}

.start-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  font-weight: bold;
}

.start-btn:active,
.start-btn.active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
}

.taskbar-divider {
  width: 1px;
  height: 28px;
  background: var(--win-gray-darker);
  border-right: 1px solid var(--win-white);
  margin: 0 3px;
}

.task-list {
  flex: 1;
  display: flex;
  gap: 3px;
  overflow-x: auto;
}

.task-btn {
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  padding: 3px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  min-width: 130px;
  max-width: 180px;
}

.task-btn.active {
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  background: repeating-linear-gradient(45deg, var(--win-gray), var(--win-gray) 2px, var(--win-gray-light) 2px, var(--win-gray-light) 4px);
  font-weight: bold;
}

.tray {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid;
  border-color: var(--win-gray-darker) var(--win-white) var(--win-white) var(--win-gray-darker);
  padding: 4px 12px;
  height: 28px;
}

.tray-text {
  font-size: 11px;
  font-weight: bold;
}

/* ===== Start Menu ===== */
.start-menu {
  position: fixed;
  bottom: 36px;
  left: 3px;
  background: var(--win-gray);
  border: 2px solid;
  border-color: var(--win-white) var(--win-gray-darker) var(--win-gray-darker) var(--win-white);
  display: flex;
  z-index: 999;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.4);
}

.start-menu.hidden { display: none; }

.start-menu-side {
  width: 32px;
  background: var(--win-blue);
  display: flex;
  align-items: flex-end;
  padding: 8px 4px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.side-text {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--win-white);
  letter-spacing: 1px;
  line-height: 1.4;
}

.start-menu-items {
  display: flex;
  flex-direction: column;
  min-width: 200px;
}

.start-menu-item {
  padding: 8px 18px;
  cursor: pointer;
  font-size: 12px;
  border-bottom: 1px solid var(--win-gray-light);
}

.start-menu-item:hover {
  background: var(--win-blue);
  color: var(--win-white);
}

/* ===== Pulsing (countdown) ===== */
.pulsing { color: #ff8080 !important; animation: pulse 1s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .pixel-logo .logo-text,
  .pixel-logo .logo-shadow { font-size: 56px; }
  .mascot svg { width: 180px; height: 240px; }
  .window { width: calc(100vw - 60px); max-width: 800px; }
  .window#window-dashboard,
  .window#window-vote,
  .window#window-holders,
  .window#window-history,
  .window#window-howitworks,
  .window#window-rotation {
    left: 30px;
    top: 30px;
  }
}

@media (max-width: 800px) {
  .desktop { padding: 20px; }
  .icon-grid {
    grid-template-columns: repeat(3, 90px);
    grid-auto-rows: 100px;
    gap: 12px;
    max-width: 100%;
  }
  .desk-icon { width: 90px; height: 100px; }
  .icon-art { width: 52px; height: 52px; }
  .icon-art svg { width: 52px; height: 52px; }
  .icon-label { font-size: 8px; }
  .pixel-logo,
  .mascot { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .status-grid { grid-template-columns: 1fr; }
  .vote-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .window { width: calc(100vw - 20px); }
  .window#window-dashboard,
  .window#window-vote,
  .window#window-holders,
  .window#window-history,
  .window#window-howitworks,
  .window#window-rotation {
    left: 10px;
    top: 10px;
  }
  .icon-grid { grid-template-columns: repeat(2, 90px); }
}

/* ===== Tray Icon ===== */
.tray-icon { background: none; border: none; cursor: pointer; padding: 2px; margin-right: 6px; display: flex; align-items: center; }
.tray-icon:hover { background: #a0a0a0; }

/* ===== Minesweeper ===== */
#window-minesweeper { width: auto; }
.mine-header { display: flex; align-items: center; justify-content: space-between; padding: 6px; background: #c0c0c0; border-bottom: 2px inset #808080; }
.mine-counter { background: #000; color: #f00; font-family: 'VT323', monospace; font-size: 22px; padding: 2px 6px; border: 1px inset #808080; min-width: 40px; text-align: center; }
.mine-face { font-size: 20px; cursor: pointer; border: 2px outset #dfdfdf; background: #c0c0c0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.mine-face:active { border-style: inset; }
.mine-grid { display: grid; gap: 0; padding: 6px; background: #c0c0c0; }
.mine-cell { width: 24px; height: 24px; border: 2px outset #fff; background: #c0c0c0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; cursor: pointer; user-select: none; font-family: 'VT323', monospace; }
.mine-cell.revealed { border: 1px solid #808080; background: #d0d0d0; cursor: default; }
.mine-cell.mine-bomb { background: #f00; }
.mine-cell[data-num="1"] { color: #0000ff; }
.mine-cell[data-num="2"] { color: #008000; }
.mine-cell[data-num="3"] { color: #ff0000; }
.mine-cell[data-num="4"] { color: #000080; }
.mine-cell[data-num="5"] { color: #800000; }
.mine-cell[data-num="6"] { color: #008080; }
.mine-cell[data-num="7"] { color: #000; }
.mine-cell[data-num="8"] { color: #808080; }

/* ===== Chat Room ===== */
.chat-body {
  display: flex;
  flex-direction: column;
  height: 360px;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  background: #000;
  border: 2px inset #808080;
  font-family: 'VT323', monospace;
  font-size: 15px;
  color: #0f0;
  line-height: 1.4;
}
.chat-msg {
  margin-bottom: 2px;
  word-break: break-word;
}
.chat-time {
  color: #888;
}
.chat-nick {
  color: #ffd700;
  font-weight: bold;
}
.chat-text {
  color: #0f0;
}
.chat-system {
  color: #f44;
  font-style: italic;
}
.chat-input-area {
  display: flex;
  gap: 4px;
  padding: 6px;
  background: #c0c0c0;
  border-top: 2px outset #dfdfdf;
}
.chat-nick-input {
  width: 90px;
  padding: 3px 6px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  border: 2px inset #808080;
  background: #fff;
}
.chat-msg-input {
  flex: 1;
  padding: 3px 6px;
  font-family: 'VT323', monospace;
  font-size: 14px;
  border: 2px inset #808080;
  background: #fff;
}
.chat-send-btn {
  padding: 3px 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  border: 2px outset #dfdfdf;
  background: #c0c0c0;
  cursor: pointer;
}
.chat-send-btn:active {
  border-style: inset;
}