/* Green Room desktop layout; preserve the original retro desktop language. */
.start-btn.middesk-logo-btn {
  flex: 0 0 142px; width: 142px; padding: 3px 10px;
  background: #A8FF1C; color: #0B3139;
}
.start-icon.middesk-logo-icon {
  width: 118px; height: 18px; padding: 0; flex: 0 0 118px;
  background: transparent; border-radius: 0;
}
.start-icon.middesk-logo-icon svg { width: 118px; height: 15px; flex: none; }
#taskbar { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.taskbar-btn { flex-shrink: 0; }
#main-window { min-width: min(320px, calc(100vw - 16px)); }
#solitaire-window {
  min-width: min(280px, calc(100vw - 16px));
  max-width: calc(100vw - 16px); max-height: calc(100dvh - 52px);
  background: #c0c0c0;
}
#solitaire-window .window-titlebar {
  background: #000080; color: white; font: bold 13px Tahoma, 'MS Sans Serif', sans-serif;
  letter-spacing: 0;
}
#solitaire-window .window-content { container-type: inline-size; background: #008000; position: relative; }
#solitaire-root {
  --kl-card-width: clamp(30px, calc((100cqw - 72px) / 7), 76px);
  --kl-card-height: calc(var(--kl-card-width) * 1.42);
  --kl-card-radius: 3px;
  padding: 0; margin: 0; max-width: none; min-height: 100%;
  border: 0; box-shadow: none; background: #008000; color: #000;
  overflow-x: hidden; font-family: Tahoma, 'MS Sans Serif', sans-serif;
}
.kl-header {
  flex-wrap: wrap; flex: none; margin: 0; padding: 3px 6px; gap: 4px;
  background: #c0c0c0; color: #000; border: 0; border-bottom: 1px solid #808080;
  font-size: 12px;
}
.kl-controls { gap: 3px; }
.kl-btn {
  background: #c0c0c0; color: #000; border-radius: 0;
  border: 2px solid; border-color: #fff #808080 #808080 #fff;
  box-shadow: none; font: 12px Tahoma, 'MS Sans Serif', sans-serif;
  padding: 3px 8px; min-height: 25px;
}
.kl-btn:hover:not(:disabled) { background: #d6d6d6; color: #000; border-color: #fff #808080 #808080 #fff; }
.kl-btn:active:not(:disabled) { border-color: #808080 #fff #fff #808080; }
.kl-btn:disabled { color: #808080; opacity: 1; text-shadow: 1px 1px #fff; border-color: #fff #808080 #808080 #fff; }
.kl-stats { color: #000; gap: 8px; font-size: 11px; }
.kl-stats strong { color: #000; font-weight: normal; }
.kl-board { min-width: 0; width: 100%; gap: 16px; padding: 14px 8px 24px; }
.kl-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.kl-slot-wrapper { min-width: 0; }
.kl-pile-target { background: #007300; border: 1px solid #005b00; border-radius: 3px; }
.kl-pile-target.kl-empty-slot::before { color: #004d00; font-size: clamp(14px, 4cqw, 24px); }
.kl-foundation::before { display: none; }
.kl-foundation.kl-empty-slot::before { display: block; }
.kl-stock-target.kl-empty-stock::after { color: #80c080; }
.kl-card { background: #fff; border: 1px solid #000; box-shadow: 1px 1px #004000; padding: 3px; }
.kl-card-red { color: #c00000; }
.kl-card-black { color: #000; }
/* Preserve each card's inline pile order when highlighting selection. */
.kl-card.selected { outline: 3px solid #A8FF1C !important; box-shadow: 0 0 8px #A8FF1C !important; }
.kl-card.dragging { opacity: 0.35 !important; }
.kl-drag-ghost {
  position: fixed; pointer-events: none; z-index: 99999;
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.45));
}
.kl-drag-ghost .kl-card {
  position: absolute; left: 0;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}
.kl-corner-top, .kl-corner-bottom {
  flex-direction: row; align-self: flex-start; gap: 1px;
  font: bold clamp(10px, 2.7cqw, 14px)/1 'Courier New', monospace;
}
.kl-corner-bottom { align-self: flex-end; }
.kl-corner-suit { font-size: inherit; }
.kl-center-suit { font-size: clamp(18px, 6cqw, 32px); }
.kl-card-back {
  background-color: #0B3139;
  background-image: repeating-conic-gradient(#0B3139 0% 25%, #2A6B73 0% 50%);
  background-size: 4px 4px; border: 3px solid #fff; outline: 1px solid #000;
}
.kl-pixel-plant svg { width: 70%; height: 75%; image-rendering: pixelated; }
.kl-dialog-overlay { background: rgba(0,0,0,.3); overflow-y: auto; }
.kl-dialog { background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: 2px 2px #000; max-height: 100%; overflow-y: auto; }
.kl-dialog h2 { background: #000080; color: #fff; padding: 5px; font: bold 14px Tahoma,sans-serif; }
.kl-dialog p, .kl-dialog ul { color: #000; }
@media (max-width: 600px) {
  #main-window { left: 8px !important; top: 62px !important; width: calc(100vw - 16px) !important; max-height: calc(100dvh - 72px) !important; }
  #player-window { right: 8px !important; top: 46px !important; max-width: calc(100vw - 16px) !important; }
  #form-window { width: calc(100vw - 16px) !important; max-height: calc(100dvh - 52px) !important; }
  #solitaire-window { right: 8px !important; bottom: 8px !important; width: calc(100vw - 16px) !important; max-height: calc(100dvh - 52px) !important; }
  #notification-window { left: 8px !important; bottom: 8px !important; width: calc(100vw - 16px) !important; }
  #solitaire-root { padding: 0; }
  .kl-board { gap: 10px; }
}

/* ── NOTIFICATION WINDOW ── */
#notification-window {
  left: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 24px));
  min-width: 280px;
  min-height: 0;
  box-shadow: 2px 2px 0 var(--win-darker);
  position: absolute;
  overflow: hidden;
  resize: none !important;
}
.login-heading {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: #444;
  margin: 0 0 12px 0;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: balance;
}
#notification-window .window-titlebar {
  background: #A8FF1C;
  color: #0B3139;
  font: bold 12px Tahoma, 'MS Sans Serif', sans-serif;
  letter-spacing: 0;
}
#notification-window .window-title {
  color: #0B3139;
  font-weight: 700;
}
#notification-window .notification-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#notification-window .notification-icon svg {
  display: block;
}
.notification-content {
  padding: 12px 14px 28px;
  background: var(--win-bg);
  color: #000;
  font: 12px Tahoma, 'MS Sans Serif', sans-serif;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.notification-content label {
  display: block;
  font-weight: bold;
  font-size: 11px;
  color: #111;
  letter-spacing: 0.02em;
}
.notification-content input[type="password"] {
  width: 100%;
  height: 28px;
  background: #fff;
  border: 2px solid;
  border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark);
  padding: 2px 6px;
  font: 13px 'IBM Plex Mono', monospace;
  box-sizing: border-box;
  color: #000;
  outline: none;
}
.notification-content input[type="password"]:focus {
  outline: 1px dotted #000;
  outline-offset: -2px;
}
.notification-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.notification-actions .ctrl-btn {
  flex: 1;
  height: 26px;
  font-size: 11px;
  font-family: inherit;
  font-weight: 600;
}
#notification-message {
  min-height: 18px;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 2px;
  word-break: break-word;
}
#notification-message.is-success {
  color: #064e3b;
  font-weight: 600;
}
#notification-message.is-error {
  color: #7f1d1d;
  font-weight: 600;
}
.notification-fineprint {
  display: block;
  font-size: 10px;
  color: #555;
  line-height: 1.25;
  margin-top: -2px;
}
.notification-fineprint[hidden] {
  display: none !important;
}
.notification-counter {
  position: absolute;
  right: 10px;
  bottom: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}
.notification-counter output {
  display: inline-block;
  font-weight: bold;
  color: #000;
  background: #fff;
  border: 1px solid var(--win-dark);
  padding: 0 4px;
  min-width: 16px;
  text-align: center;
  font-size: 11px;
  line-height: 16px;
}

/* ── SOLITAIRE CONFETTI ── */
.prize-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 120;
}
.prize-pixel {
  position: absolute;
  top: -8px;
  width: 6px;
  height: 6px;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.35);
  animation-name: prizeConfettiFall;
  animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation-fill-mode: forwards;
}
@keyframes prizeConfettiFall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 1; }
  100% { transform: translate3d(var(--drift, 0px), 480px, 0) rotate(720deg); opacity: 0; }
}
.kl-win-password {
  font: bold 13px 'IBM Plex Mono', monospace;
  color: #A8FF1C;
  background: #062229;
  border: 1px solid #2A6B73;
  padding: 6px 8px;
  margin: 8px 0;
  letter-spacing: 0.04em;
  user-select: all;
}
.kl-win-sub {
  font-size: 11px;
  color: #DCE6E9;
  margin-bottom: 8px;
}