:root {
  --aim-blue: #0b45c8;
  --aim-blue-dark: #08287b;
  --aim-blue-mid: #1f62dd;
  --aim-gray: #c0c0c0;
  --aim-gray-light: #ececec;
  --aim-gray-dark: #7b7b7b;
  --aim-text: #101010;
  --aim-online: #0a9d2f;
  --aim-away: #e8aa00;
  --aim-offline: #888;
  font-family: Tahoma, Verdana, Arial, sans-serif;
  color: var(--aim-text);
  background: #12358c;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { min-height: 100vh; overflow: hidden; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.desktop {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(145deg, #083c9f 0%, #0c64a5 45%, #0c3f8d 100%);
  position: relative;
  overflow: hidden;
  padding-bottom: 36px;
}

.desktop::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 3px);
}

.desktop-watermark {
  position: absolute;
  right: clamp(18px, 5vw, 80px);
  top: clamp(18px, 7vh, 90px);
  display: grid;
  justify-items: center;
  color: rgba(255,255,255,.42);
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
  user-select: none;
  pointer-events: none;
}
.desktop-watermark img { width: min(24vw, 210px); opacity: .35; filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)); }
.desktop-watermark strong { font-size: clamp(26px, 4vw, 58px); letter-spacing: .03em; }
.desktop-watermark span { font-size: clamp(10px, 1.25vw, 18px); }

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 36px;
  background: var(--aim-gray);
  border-top: 2px solid #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 5px;
  z-index: 5000;
  box-shadow: 0 -1px 0 #444;
}
.win-button {
  border: 2px solid;
  border-color: #fff #444 #444 #fff;
  background: var(--aim-gray);
  min-height: 27px;
  padding: 2px 8px;
  cursor: pointer;
}
.win-button:active, .win-button.pressed { border-color: #444 #fff #fff #444; padding: 3px 7px 1px 9px; }
.start-button { display: flex; align-items: center; gap: 5px; font-weight: 700; }
.start-button img { width: 20px; height: 20px; object-fit: contain; }
.task-buttons { flex: 1; display: flex; gap: 3px; min-width: 0; }
.task-button { max-width: 190px; min-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tray { height: 27px; min-width: 92px; padding: 3px 8px; border: 2px solid; border-color: #777 #fff #fff #777; display: flex; align-items: center; justify-content: flex-end; gap: 7px; font-size: 11px; }
.tray-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.3); }
.tray-dot.online { background: #23c24d; }
.tray-dot.offline { background: #858585; }

.window {
  position: absolute;
  background: var(--aim-gray);
  border: 2px solid;
  border-color: #fff #333 #333 #fff;
  box-shadow: 4px 5px 14px rgba(0,0,0,.32);
  min-width: 280px;
  z-index: 10;
}
.window.active { z-index: 1000; }
.window-titlebar {
  min-height: 27px;
  background: linear-gradient(90deg, #072676, #0d58d7 72%, #5a8cff);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 4px 3px 5px;
  font-weight: 700;
  font-size: 12px;
  cursor: move;
  user-select: none;
}
.window-titlebar img { width: 17px; height: 17px; object-fit: contain; }
.window-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-control { width: 20px; height: 19px; padding: 0; line-height: 15px; font-family: Arial, sans-serif; font-weight: 900; }
.window-menu { display: flex; gap: 14px; padding: 3px 7px 4px; border-bottom: 1px solid #888; background: #d4d0c8; font-size: 11px; }
.window-menu span:first-letter { text-decoration: underline; }
.window-body { padding: 7px; background: #d4d0c8; }

.signon-window { width: 360px; left: max(12px, calc(50% - 180px)); top: max(16px, calc(45% - 235px)); }
.signon-hero {
  margin: -1px -1px 9px;
  min-height: 178px;
  color: #fff;
  background: radial-gradient(circle at 50% 34%, #2d75eb, #063baf 68%, #042372 100%);
  border: 2px inset #ddd;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.signon-hero img { width: 98px; height: 98px; object-fit: contain; filter: drop-shadow(0 4px 7px rgba(0,0,0,.25)); }
.signon-hero h1 { margin: 3px 0 0; font-size: 25px; letter-spacing: .02em; }
.signon-hero p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.form-row { margin: 9px 4px; }
.form-row label { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 700; }
.retro-input {
  width: 100%;
  background: #fff;
  border: 2px solid;
  border-color: #777 #fff #fff #777;
  padding: 5px 6px;
  outline: none;
}
.retro-input:focus { outline: 1px dotted #000; outline-offset: -4px; }
.signon-actions { display: flex; justify-content: center; margin: 13px 0 6px; }
.primary-button { min-width: 112px; font-weight: 700; }
.signon-links { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; margin: 7px 4px 1px; }
.link-button { border: 0; background: none; padding: 0; color: #003399; text-decoration: underline; cursor: pointer; }
.provider-divider { display: flex; align-items: center; gap: 7px; margin: 11px 4px 8px; color: #555; font-size: 9px; text-transform: uppercase; letter-spacing: .04em; }
.provider-divider::before, .provider-divider::after { content: ''; height: 1px; flex: 1; background: #888; border-bottom: 1px solid #fff; }
.provider-actions { display: grid; grid-template-columns: 1fr; gap: 5px; margin: 0 4px 9px; }
.provider-button { width: 100%; min-height: 29px; display: flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; }
.provider-button:disabled { color: #777; cursor: not-allowed; }
.provider-mark { width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #777; font-family: Arial, sans-serif; font-weight: 900; line-height: 1; }
.google-mark { color: #174ea6; }
.apple-provider-button { background: #d4d0c8; }
.apple-mark { color: #000; font-size: 9px; }
.setup-warning { margin: 8px 4px; padding: 7px; border: 1px solid #a36d00; background: #fff4c4; color: #543700; font-size: 10px; line-height: 1.35; }
.error-box { margin: 7px 4px; padding: 6px; border: 1px solid #9b0000; background: #ffe2e2; color: #700; font-size: 10px; }

.buddy-window { width: 300px; left: 24px; top: 28px; height: min(760px, calc(100vh - 78px)); display: flex; flex-direction: column; }
.buddy-header {
  background: linear-gradient(#fbfbfb, #d9e6ff);
  border: 2px inset #eee;
  margin: 5px;
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 7px;
}
.buddy-header img.avatar { width: 38px; height: 38px; border: 1px solid #777; object-fit: cover; background: #fff; }
.buddy-header strong { display: block; color: #102a67; font-size: 13px; }
.buddy-header small { color: #555; font-size: 10px; }
.status-select { width: 100%; margin-top: 3px; font-size: 10px; padding: 1px 2px; }
.buddy-toolbar { display: flex; gap: 3px; padding: 0 5px 4px; }
.buddy-toolbar button { flex: 1; font-size: 10px; padding: 3px 2px; }
.buddy-list { flex: 1; min-height: 0; overflow: auto; margin: 0 5px 5px; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; font-size: 11px; }
.group-header { display: flex; align-items: center; gap: 4px; padding: 3px 4px; background: #dce7fa; color: #08296d; font-weight: 700; cursor: pointer; border-bottom: 1px solid #c1cce0; user-select: none; }
.group-count { margin-left: auto; color: #555; font-weight: 400; }
.buddy-row { display: grid; grid-template-columns: 14px 22px 1fr auto; align-items: center; gap: 4px; padding: 3px 4px 3px 7px; cursor: default; }
.buddy-row:hover, .buddy-row.selected { background: var(--aim-blue); color: #fff; }
.buddy-row.offline { color: #777; font-style: italic; }
.buddy-row.offline:hover { color: #fff; }
.buddy-avatar { width: 20px; height: 20px; object-fit: cover; border: 1px solid #aaa; background: #eee; }
.presence-icon { font-size: 10px; text-align: center; }
.presence-icon.online { color: var(--aim-online); }
.presence-icon.away { color: var(--aim-away); }
.presence-icon.offline { color: var(--aim-offline); }
.unread-badge { min-width: 17px; height: 17px; border-radius: 8px; background: #cf0715; color: #fff; padding: 1px 5px; text-align: center; font-size: 9px; font-style: normal; font-weight: 700; }
.buddy-footer { padding: 3px 6px 5px; font-size: 9px; color: #444; text-align: center; }

.im-window { width: 470px; height: 440px; display: flex; flex-direction: column; }
.im-window .window-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; }
.im-peer { background: #eef4ff; border: 1px solid #8796b6; padding: 4px 6px; font-size: 10px; display: flex; align-items: center; gap: 6px; }
.im-peer img { width: 25px; height: 25px; object-fit: cover; border: 1px solid #888; background: #fff; }
.transcript { flex: 1; min-height: 130px; overflow: auto; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; padding: 7px; font-family: Verdana, Arial, sans-serif; font-size: 11px; line-height: 1.42; }
.message-line { margin-bottom: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-line .speaker { font-weight: 700; color: #1742a0; }
.message-line.mine .speaker { color: #8c1768; }
.message-line .timestamp { color: #999; font-size: 9px; margin-left: 5px; }
.message-line.system { color: #777; font-style: italic; }
.typing-line { height: 16px; font-size: 9px; color: #4d4d4d; padding-left: 3px; }
.compose-toolbar { display: flex; gap: 3px; align-items: center; }
.compose-toolbar button { font-size: 13px; min-width: 29px; padding: 2px 5px; }
.compose-area { display: grid; grid-template-columns: 1fr 72px; gap: 5px; min-height: 74px; }
.compose-area textarea { resize: none; width: 100%; min-height: 72px; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; padding: 5px; }
.send-button { font-weight: 700; }
.emoji-strip { display: flex; gap: 2px; flex-wrap: wrap; padding: 2px 0; }
.emoji-strip button { border: 1px solid transparent; background: transparent; cursor: pointer; padding: 1px 3px; }
.emoji-strip button:hover { border-color: #888; background: #fff; }

.toast-host { position: fixed; right: 12px; bottom: 48px; z-index: 9000; display: grid; gap: 7px; width: min(320px, calc(100vw - 24px)); }
.toast { background: #ffffdf; border: 2px solid; border-color: #fff #444 #444 #fff; box-shadow: 3px 4px 12px rgba(0,0,0,.3); padding: 8px; font-size: 11px; }

.loading { padding: 15px; text-align: center; font-size: 11px; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  body { overflow: auto; background: #0a3b8c; }
  .desktop { min-height: 100dvh; padding-bottom: 0; overflow: auto; }
  .desktop-watermark { opacity: .25; right: 10px; top: 10px; }
  .taskbar { display: none; }
  .window, .window.active {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% - 12px) !important;
    height: auto;
    min-width: 0;
    margin: 6px;
    box-shadow: none;
  }
  .window-titlebar { cursor: default; }
  .signon-window { margin-top: max(6px, env(safe-area-inset-top)); }
  .buddy-window { height: calc(100dvh - 12px); }
  .im-window { height: calc(100dvh - 12px); }
  .im-window .window-body { min-height: 0; }
  .transcript { min-height: 0; }
}

/* Classic Web V3 media messaging */
.media-status { font-size: 9px; color: #555; margin-left: 2px; }
.media-message { margin: 4px 0 8px; }
.media-heading { display: flex; align-items: baseline; gap: 5px; margin-bottom: 3px; }
.media-heading .timestamp { margin-left: 0; }
.chat-image,
.chat-video {
  display: block;
  max-width: min(100%, 360px);
  max-height: 280px;
  border: 2px solid;
  border-color: #777 #fff #fff #777;
  background: #000;
  object-fit: contain;
}
.chat-image { background: #fff; cursor: zoom-in; }
.chat-video { width: min(100%, 360px); }
.compose-toolbar input[type="file"] { display: none; }

@media (max-width: 720px) {
  .chat-image,
  .chat-video {
    max-width: 100%;
    width: 100%;
    max-height: 240px;
  }
  .media-status { font-size: 8px; }
}

/* Classic Web V4: richer IM composer, profiles and AIM Games */
.buddy-row { grid-template-columns: 14px 22px 1fr auto 25px; }
.buddy-profile-button,
.peer-profile-button { min-width: 24px; padding: 1px 3px; font-size: 11px; }
.buddy-row:hover .buddy-profile-button { color: #000; }
.im-peer-copy { flex: 1; min-width: 0; }
.reply-composer { display: flex; align-items: center; gap: 5px; padding: 4px 5px; background: #fff7cf; border: 1px solid #aa8c32; font-size: 9px; }
.reply-composer > div { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-preview { border-left: 3px solid #6483c6; background: #f0f4ff; padding: 3px 5px; margin: 2px 0 4px; font-size: 9px; color: #444; }
.message-line { position: relative; padding-right: 3px; }
.message-line:hover .message-actions { opacity: 1; }
.message-actions { opacity: .15; display: inline-flex; gap: 2px; margin-left: 4px; vertical-align: middle; transition: opacity .12s; }
.message-actions button { border: 1px solid #aaa; background: #eee; font-size: 9px; padding: 0 3px; cursor: pointer; }
.reaction-row { display: flex; gap: 3px; flex-wrap: wrap; margin: 2px 0 4px 14px; }
.reaction-chip { border: 1px solid #9fa9bf; border-radius: 8px; background: #f3f6ff; padding: 1px 5px; font-size: 9px; cursor: pointer; }
.reaction-chip.mine { background: #dbe7ff; border-color: #5d78b4; }
.emoji-panel, .sticker-panel { border: 2px solid; border-color: #777 #fff #fff #777; background: #efefef; padding: 5px; max-height: 210px; overflow: auto; }
.picker-head { display: flex; gap: 5px; align-items: center; margin-bottom: 4px; }
.emoji-search { flex: 1; min-width: 0; }
.emoji-categories { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 4px; }
.emoji-categories button { font-size: 9px; padding: 2px 5px; }
.emoji-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.emoji-grid button { min-width: 0; padding: 3px 1px; font-size: 17px; background: #fff; border: 1px solid #ccc; cursor: pointer; }
.sticker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.sticker-choice { min-height: 50px; padding: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.sticker-choice .sticker-emoji { font-size: 22px; }
.sticker-choice small { font-size: 8px; }
.sticker-choice.locked { opacity: .55; }
.chat-audio { width: min(100%, 330px); height: 34px; vertical-align: middle; }
.chat-sticker { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: #f5f1ff; border: 1px solid #9386af; border-radius: 4px; }
.chat-sticker .sticker-emoji { font-size: 28px; }

.profile-window { width: 540px; max-height: calc(100vh - 86px); }
.profile-body { max-height: calc(100vh - 125px); overflow: auto; }
.profile-banner { height: 105px; background: linear-gradient(135deg, #1b63d8, #07348f); background-size: cover; background-position: center; border: 2px solid; border-color: #777 #fff #fff #777; }
.profile-identity { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: center; margin: -35px 10px 7px; position: relative; }
.profile-photo { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1px #555, 2px 3px 6px rgba(0,0,0,.3); }
.profile-identity h2 { margin: 34px 0 0; font-size: 18px; color: #0c2c72; }
.profile-handle { color: #555; font-size: 10px; }
.profile-presence { font-size: 10px; font-weight: 700; }
.profile-presence.online { color: #118c31; }.profile-presence.away { color: #a05e00; }.profile-presence.offline { color: #777; }
.profile-mood { margin-top: 3px; font-size: 10px; font-style: italic; }
.profile-owner-actions { display: flex; gap: 4px; flex-wrap: wrap; margin: 5px 3px 8px; }
.retro-fieldset { border: 1px solid #777; margin: 7px 2px; padding: 8px; background: #e9e9e9; font-size: 10px; }
.retro-fieldset legend { font-weight: 700; color: #0d347e; padding: 0 5px; }
.retro-fieldset small { display: block; color: #666; margin-top: 4px; }
.profile-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.profile-badges span { border: 1px solid #7890bd; background: #eef3ff; padding: 2px 5px; border-radius: 8px; }
.profile-gallery { margin-bottom: 8px; }
.profile-gallery-title { font-weight: 700; margin-bottom: 4px; }
.profile-gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.profile-gallery-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid #777; background: #fff; }
.profile-empty { color: #777; font-style: italic; padding: 5px; text-align: center; }
.profile-editor { margin-top: 9px; padding-top: 5px; border-top: 1px solid #777; }
.profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.profile-form-grid label { font-size: 9px; font-weight: 700; }
.profile-form-grid label.wide { grid-column: 1 / -1; }
.profile-form-grid textarea { min-height: 58px; resize: vertical; font-family: inherit; }
.profile-form-actions { text-align: right; margin-top: 8px; }

.games-window { width: 680px; max-height: calc(100vh - 80px); }
.games-body { max-height: calc(100vh - 120px); overflow: auto; }
.games-access { background: #eef4ff; border: 1px solid #8999bb; padding: 5px 7px; margin-bottom: 7px; font-size: 10px; }
.game-catalog { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.game-card { position: relative; min-height: 74px; background: #f2f2f2; border: 2px solid; border-color: #fff #777 #777 #fff; padding: 6px; text-align: left; cursor: pointer; }
.game-card:active { border-color: #777 #fff #fff #777; }
.game-card.locked { color: #777; }
.game-card .game-icon { font-size: 24px; float: left; margin-right: 6px; }
.game-card strong, .game-card small { display: block; }
.game-card small { font-size: 8px; margin-top: 3px; }
.game-lock { position: absolute; right: 5px; top: 5px; }
.game-challenge-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 5px; }
.game-match-list { max-height: 250px; overflow: auto; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; }
.game-match-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 6px; align-items: center; padding: 5px; border-bottom: 1px solid #ddd; }
.game-match-row:last-child { border-bottom: 0; }
.game-match-row small { display: block; color: #555; font-size: 9px; }
.game-icon.small { font-size: 20px; text-align: center; }
.game-row-actions { display: flex; gap: 3px; }
.games-note { font-size: 9px; color: #555; padding: 3px 4px; }

.game-match-window { width: 600px; max-height: calc(100vh - 80px); }
.game-match-body { max-height: calc(100vh - 120px); overflow: auto; }
.game-match-header { display: flex; justify-content: space-between; gap: 8px; align-items: center; background: #eef4ff; border: 1px solid #8999bb; padding: 5px 7px; }
.game-match-header small { display: block; color: #555; font-size: 9px; margin-top: 2px; }
.game-board-wrap { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; }
.ttt-board { width: 270px; display: grid; grid-template-columns: repeat(3, 1fr); background: #777; gap: 2px; padding: 2px; }
.ttt-cell { aspect-ratio: 1; font-size: 42px; font-weight: 700; background: #fff; border: 0; cursor: pointer; }
.ttt-cell.winner { background: #fff0a0; }
.connect-drop-row { width: min(100%, 420px); display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 3px; }
.connect-drop-row button { min-width: 0; padding: 2px; font-size: 9px; }
.connect-board { width: min(100%, 420px); display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 7px; background: #1750bd; border: 2px solid #08296d; }
.connect-cell { aspect-ratio: 1; border-radius: 50%; background: #f5f5f5; border: 1px solid #0d347e; box-shadow: inset 1px 1px 3px rgba(0,0,0,.35); }
.connect-cell.red { background: #df2531; }.connect-cell.yellow { background: #f4d830; }.connect-cell.winner { outline: 3px solid #fff; }
.chess-board { width: min(100%, 430px); display: grid; grid-template-columns: repeat(8, 1fr); border: 2px solid #555; }
.board-cell { aspect-ratio: 1; border: 0; font-size: clamp(20px, 5vw, 35px); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.board-cell.light { background: #f3e3c3; }.board-cell.dark { background: #8f704c; }
.board-cell.selected { outline: 4px solid #1a63dc; outline-offset: -4px; }
.checkers-board .board-cell { font-size: 23px; font-weight: 900; }
.checkers-board .red-piece { color: #d32632; text-shadow: 0 1px #fff; }.checkers-board .black-piece { color: #111; text-shadow: 0 1px #fff; }
.game-match-actions { display: flex; justify-content: center; gap: 5px; min-height: 27px; align-items: center; }
.game-waiting { font-size: 9px; font-style: italic; color: #555; }
.game-chat-box { margin-top: 8px; }
.game-chat-messages { height: 110px; overflow: auto; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; padding: 5px; }
.game-chat-line { font-size: 9px; margin-bottom: 3px; }.game-chat-line.mine strong { color: #8c1768; }
.game-chat-form { display: grid; grid-template-columns: 1fr auto; gap: 4px; margin-top: 4px; }

@media (max-width: 720px) {
  .emoji-grid { grid-template-columns: repeat(7, 1fr); }
  .sticker-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-window, .games-window, .game-match-window { max-height: none; }
  .profile-body, .games-body, .game-match-body { max-height: none; }
  .profile-form-grid { grid-template-columns: 1fr; }
  .profile-form-grid label.wide { grid-column: auto; }
  .profile-gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .game-catalog { grid-template-columns: repeat(2, 1fr); }
  .game-challenge-form { grid-template-columns: 1fr; }
  .game-match-row { grid-template-columns: 26px 1fr; }
  .game-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .game-match-window { height: auto !important; }
}

/* Classic Web V5: functional menus, desktop window controls, resizable IMs */
.window-menu {
  position: relative;
  gap: 1px;
  padding: 1px 4px 2px;
  overflow: visible;
}
.menu-root { position: relative; }
.menu-trigger {
  border: 1px solid transparent;
  background: transparent;
  padding: 2px 6px 3px;
  font: inherit;
  color: #111;
  cursor: default;
}
.menu-trigger:first-letter { text-decoration: underline; }
.menu-trigger:hover,
.menu-trigger.active {
  border-color: #fff #777 #777 #fff;
  background: #e7e4dc;
}
.menu-popup {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  min-width: 178px;
  padding: 2px;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #fff #333 #333 #fff;
  box-shadow: 3px 4px 8px rgba(0,0,0,.28);
  z-index: 12000;
}
.menu-popup.open { display: grid; }
.menu-popup button {
  border: 0;
  background: transparent;
  text-align: left;
  white-space: nowrap;
  padding: 4px 20px 4px 18px;
  font: inherit;
  cursor: default;
}
.menu-popup button:hover,
.menu-popup button:focus { background: var(--aim-blue); color: #fff; outline: 0; }
.menu-separator { height: 1px; margin: 3px 2px; background: #888; border-bottom: 1px solid #fff; }

.minimized-window { display: none !important; }
.task-button.minimized-task { color: #666; font-style: italic; }
.resizable-window { overflow: hidden; }
.resize-grip {
  position: absolute;
  width: 15px;
  height: 15px;
  right: 2px;
  bottom: 2px;
  z-index: 80;
  cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #777 3px 4px, transparent 4px 6px);
}
.maximized-window .resize-grip { display: none; }

.start-menu {
  position: fixed;
  left: 3px;
  bottom: 37px;
  width: 224px;
  padding: 3px;
  z-index: 15000;
  background: #d4d0c8;
  border: 2px solid;
  border-color: #fff #333 #333 #fff;
  box-shadow: 4px 5px 12px rgba(0,0,0,.35);
}
.start-menu-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px;
  margin-bottom: 3px;
  color: #fff;
  background: linear-gradient(90deg, #072676, #0d58d7);
}
.start-menu-brand img { width: 30px; height: 30px; object-fit: contain; }
.start-menu-brand strong, .start-menu-brand small { display: block; }
.start-menu-brand small { font-size: 9px; opacity: .9; }
.start-menu > button {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 6px 9px;
  font: inherit;
}
.start-menu > button:hover { background: var(--aim-blue); color: #fff; }
.start-menu-separator { height: 1px; margin: 3px 2px; background: #888; border-bottom: 1px solid #fff; }

.utility-window { width: 330px; }
.utility-body p { margin: 2px 0 7px; font-size: 10px; }
.buddy-picker-list { height: 210px; }
.utility-actions { display: flex; justify-content: flex-end; gap: 5px; margin-top: 8px; }
.help-window { width: 520px; height: 430px; }
.help-body { height: 100%; overflow: auto; }
.help-body p { font-size: 10px; line-height: 1.45; }
.help-actions { text-align: right; padding: 5px 2px; }
.about-window { width: 350px; }
.about-body { text-align: center; padding: 18px 20px; }
.about-body img { width: 82px; height: 82px; object-fit: contain; }
.about-body h2 { margin: 4px 0 1px; color: #0d347e; }

@media (max-width: 720px) {
  .start-menu { display: none !important; }
  .resize-grip { display: none !important; }
  .window-menu { overflow-x: auto; overflow-y: visible; flex-wrap: nowrap; }
  .menu-popup { position: fixed; left: 8px; right: 8px; top: auto; width: auto; min-width: 0; }
  .im-window [data-max], .im-window [data-min] { display: none; }
  .help-window { height: auto !important; }
}
.people-window { width: 560px; height: 500px; }
.people-body { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.people-body > p { margin: 2px 0 7px; font-size: 10px; }
.people-search { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.people-results { flex: 1; min-height: 150px; overflow: auto; margin-top: 7px; background: #fff; border: 2px solid; border-color: #777 #fff #fff #777; }
.people-result { display: grid; grid-template-columns: 40px 1fr auto; gap: 7px; align-items: center; padding: 6px; border-bottom: 1px solid #ddd; }
.people-result img { width: 38px; height: 38px; object-fit: cover; border: 1px solid #999; background: #eee; }
.people-result small, .people-result span { display: block; font-size: 9px; color: #555; margin-top: 1px; }
.people-result-actions { display: flex; gap: 3px; }
.requests-window { width: 500px; height: 470px; }
.requests-body { height: 100%; overflow: auto; }
.request-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px; border-bottom: 1px solid #ccc; }
.request-row:last-child { border-bottom: 0; }
.request-row small { display: block; color: #666; font-size: 9px; }
.request-row > div:last-child { display: flex; gap: 3px; }
@media (max-width:720px) {
  .people-window, .requests-window { height: auto !important; }
  .people-result { grid-template-columns: 34px 1fr; }
  .people-result-actions { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width:720px) {
  .window-menu { overflow: visible; flex-wrap: wrap; }
  .menu-popup { position: absolute; left: 0; right: auto; top: calc(100% - 1px); min-width: min(220px, calc(100vw - 28px)); }
}

/* Classic Web V6: closeable desktop windows, remembered positions and appearance preferences */
:root {
  --ui-font-family: Tahoma, Verdana, Arial, sans-serif;
  --chat-font-family: Verdana, Arial, sans-serif;
  --chat-font-size: 11px;
  --chat-my-name-color: #8c1768;
  --chat-buddy-name-color: #1742a0;
  --transcript-background: #ffffff;
  --titlebar-start: #072676;
  --titlebar-mid: #0d58d7;
  --titlebar-end: #5a8cff;
  --desktop-a: #083c9f;
  --desktop-b: #0c64a5;
  --desktop-c: #0c3f8d;
}

html[data-theme="teal-98"] {
  --aim-blue: #007f7f; --aim-blue-dark: #005858; --aim-blue-mid: #149f9f;
  --titlebar-start:#004f78; --titlebar-mid:#007f7f; --titlebar-end:#5fb7b7;
}
html[data-theme="purple-night"] {
  --aim-blue:#6641a5; --aim-blue-dark:#35205f; --aim-blue-mid:#805ac1;
  --titlebar-start:#32185f; --titlebar-mid:#6742a8; --titlebar-end:#ab87df;
}
html[data-theme="silver"] {
  --aim-blue:#4f6784; --aim-blue-dark:#34455c; --aim-blue-mid:#7188a1;
  --titlebar-start:#3e5067; --titlebar-mid:#647b95; --titlebar-end:#aebdca;
}
html[data-theme="midnight"] {
  --aim-blue:#243b67; --aim-blue-dark:#101a31; --aim-blue-mid:#35558c;
  --titlebar-start:#0b1220; --titlebar-mid:#1f355f; --titlebar-end:#455f8f;
  --aim-gray:#b9bec8; --aim-gray-light:#e7e9ee; --aim-gray-dark:#666d78;
}

html[data-wallpaper="blue-wave"] { --desktop-a:#083c9f; --desktop-b:#0c64a5; --desktop-c:#0c3f8d; }
html[data-wallpaper="teal-grid"] { --desktop-a:#006f72; --desktop-b:#138e91; --desktop-c:#00585e; }
html[data-wallpaper="purple-glow"] { --desktop-a:#3b1767; --desktop-b:#6d3ca2; --desktop-c:#271247; }
html[data-wallpaper="midnight-stars"] { --desktop-a:#07111f; --desktop-b:#132846; --desktop-c:#050b14; }
html[data-wallpaper="plain"] { --desktop-a:#3b5797; --desktop-b:#3b5797; --desktop-c:#3b5797; }

:root { font-family: var(--ui-font-family); }
body, button, input, textarea, select { font-family: var(--ui-font-family); }
.desktop {
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.14), transparent 22%),
    linear-gradient(145deg, var(--desktop-a) 0%, var(--desktop-b) 45%, var(--desktop-c) 100%);
}
html[data-wallpaper="teal-grid"] .desktop::after { opacity:.10; background-image:linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),linear-gradient(90deg,rgba(255,255,255,.3) 1px,transparent 1px); background-size:32px 32px; }
html[data-wallpaper="midnight-stars"] .desktop::after { opacity:.18; background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#fff 1px,transparent 1px); background-size:47px 47px,79px 79px; background-position:0 0,20px 23px; }
html[data-wallpaper="plain"] .desktop::after { display:none; }
.window-titlebar { background: linear-gradient(90deg, var(--titlebar-start), var(--titlebar-mid) 72%, var(--titlebar-end)); }
.window:not(.active) .window-titlebar { filter:saturate(.45); opacity:.86; }
.window-control[data-close]:hover, #buddy-close:hover { background:#b91c1c; color:#fff; border-color:#ffb3b3 #5f0000 #5f0000 #ffb3b3; }

.transcript { background:var(--transcript-background); font-family:var(--chat-font-family); font-size:var(--chat-font-size); }
.compose-area textarea { font-family:var(--chat-font-family); font-size:var(--chat-font-size); }
.message-line .speaker { color:var(--chat-buddy-name-color); }
.message-line.mine .speaker { color:var(--chat-my-name-color); }

.buddy-search-row { display:grid; grid-template-columns:1fr 28px; gap:3px; padding:0 5px 4px; }
.buddy-search-row .retro-input { min-width:0; padding:3px 5px; font-size:10px; }
.buddy-search-row .win-button { padding:1px 4px; min-width:0; }

.preferences-window { width:570px; height:520px; }
.preferences-body { height:100%; overflow:auto; }
.preferences-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.preferences-grid label { display:grid; gap:3px; font-size:9px; font-weight:700; }
.color-input { width:100%; min-height:29px; padding:2px; background:#fff; border:2px solid; border-color:#777 #fff #fff #777; }
.appearance-preview { margin-top:9px; min-height:82px; background:var(--transcript-background); border:2px solid; border-color:#777 #fff #fff #777; padding:8px; line-height:1.45; }
.appearance-preview .speaker { font-weight:700; margin-top:2px; }
.appearance-preview .preview-buddy { color:var(--chat-buddy-name-color); }
.appearance-preview .preview-me { color:var(--chat-my-name-color); }
.preferences-actions { display:grid; grid-template-columns:auto 1fr auto auto; gap:5px; align-items:center; margin-top:8px; }

.help-window { width:650px; height:470px; }
.help-layout { display:grid; grid-template-columns:145px 1fr; gap:8px; min-height:300px; }
.help-nav { display:flex; flex-direction:column; gap:4px; }
.help-nav .win-button { text-align:left; }
.help-content { background:#fff; border:2px solid; border-color:#777 #fff #fff #777; padding:10px; overflow:auto; }
.help-content h3 { margin:0 0 8px; color:var(--aim-blue-dark); font-size:14px; }
.help-content p { font-size:10px; line-height:1.5; }
.help-actions { display:flex; justify-content:flex-end; gap:5px; padding:7px 0 0; }

.profile-window, .games-window, .game-match-window, .people-window, .requests-window, .help-window, .preferences-window, .utility-window { display:flex; flex-direction:column; }
.profile-window .window-body, .games-window .window-body, .game-match-window .window-body, .people-window .window-body, .requests-window .window-body, .help-window .window-body, .preferences-window .window-body, .utility-window .window-body { flex:1; min-height:0; }
.profile-body, .games-body, .game-match-body { max-height:none; }

@media (max-width:720px) {
  .preferences-window { height:auto !important; }
  .preferences-grid, .help-layout { grid-template-columns:1fr; }
  .help-nav { display:grid; grid-template-columns:repeat(2,1fr); }
  .help-content { min-height:240px; }
  .buddy-search-row { padding-left:5px; padding-right:5px; }
  .window-control[data-min], .window-control[data-max], #buddy-min, #buddy-max { display:none; }
}

/* Classic Web V7: mobile-synced buddy category management */
.category-manager-window { width: 650px; height: 520px; }
.category-manager-window { display:flex; flex-direction:column; }
.category-manager-window .window-body { flex:1; min-height:0; }
.category-manager-body { display:flex; flex-direction:column; gap:7px; height:100%; }
.category-manager-top { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; padding:2px 1px; }
.category-manager-top strong { color:var(--aim-blue-dark); font-size:11px; }
.category-manager-top small { font-size:9px; color:#555; text-align:right; }
.category-add-form { display:grid; grid-template-columns:1fr auto; gap:5px; }
.category-manager-list { flex:1; min-height:170px; overflow:auto; background:#fff; border:2px solid; border-color:#777 #fff #fff #777; }
.category-manager-row { display:grid; grid-template-columns:minmax(130px,1fr) auto; gap:8px; align-items:center; padding:6px; border-bottom:1px solid #d2d2d2; }
.category-manager-row:last-child { border-bottom:0; }
.category-manager-info strong, .category-manager-info small { display:block; }
.category-manager-info strong { font-size:11px; }
.category-manager-info small { color:#666; margin-top:1px; font-size:9px; }
.category-manager-actions { display:flex; gap:4px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.compact-button { min-width:27px; padding-left:5px; padding-right:5px; font-weight:800; }
.danger-button { color:#7f1010; }
.danger-button:hover { color:#fff; background:#a91d1d; }
.category-system-label { color:#666; font-size:9px; font-style:italic; padding:0 5px; }
.category-manager-note { font-size:9px; color:#444; background:#ffffdf; border:1px solid #b9b27b; padding:5px 7px; }
.warning-box { background:#fff4d8; border:1px solid #b58a2d; padding:8px; margin-bottom:8px; line-height:1.4; }
.radio-option { display:block; margin:7px 0; line-height:1.5; }
.inline-select { width:auto; min-width:145px; margin-left:3px; }
.utility-body > label { display:grid; gap:3px; margin:6px 0; font-size:9px; font-weight:700; }

@media (max-width:720px) {
  .category-manager-window { height:auto !important; }
  .category-manager-top { display:block; }
  .category-manager-top small { display:block; text-align:left; margin-top:3px; }
  .category-manager-row { grid-template-columns:1fr; }
  .category-manager-actions { justify-content:flex-start; }
  .category-manager-list { max-height:48vh; }
}


/* V8 account creation / cross-platform identity */
.register-window { width: 390px; left: max(12px, calc(50% - 195px)); top: max(10px, calc(42% - 270px)); }
.choose-username-window { width: 385px; left: max(12px, calc(50% - 192px)); top: max(20px, calc(45% - 210px)); }
.compact-hero { padding-top: 6px; padding-bottom: 4px; }
.compact-hero img { width: 68px; height: 68px; }
.compact-hero h1 { font-size: 21px; }
.field-help { display:block; margin-top:3px; color:#555; font-size:9px; }
.signup-note, .signup-copy { margin:8px 4px; font-size:10px; line-height:1.35; color:#333; }
.menu-text-button { border:0; padding:0; margin:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.menu-text-button:hover { text-decoration:underline; }
.register-window .signon-links { align-items:flex-start; }
@media (max-width: 520px) {
  .register-window, .choose-username-window { width: calc(100vw - 18px); left: 9px !important; top: 9px !important; max-height: calc(100vh - 54px); overflow:auto; }
}

/* Classic Web V10: account center, safety, notifications, chat search and media polish */
.notification-pref-grid { display:grid; gap:7px; font-size:9px; }
.notification-pref-grid label { display:flex; gap:6px; align-items:center; font-weight:700; }
.notification-pref-grid [data-notification-status] { margin-left:6px; color:#555; text-transform:capitalize; }
.account-window { width:560px; height:500px; display:flex; flex-direction:column; }
.account-window .window-body { flex:1; min-height:0; overflow:auto; }
.account-grid { display:grid; grid-template-columns:140px 1fr; gap:5px 10px; align-items:center; font-size:10px; }
.provider-status-row { display:grid; grid-template-columns:1fr 120px auto; gap:8px; align-items:center; padding:6px 4px; border-bottom:1px solid #d3d3d3; }
.provider-status-row:last-child { border-bottom:0; }
.provider-status-row strong { font-size:9px; color:#444; }
.account-note { font-size:9px; line-height:1.45; color:#444; background:#ffffdf; border:1px solid #b9b27b; padding:7px; }
.blocked-row { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:8px; align-items:center; padding:7px; border-bottom:1px solid #d8d8d8; background:#fff; }
.blocked-row img { width:38px; height:38px; object-fit:cover; border:1px solid #777; }
.blocked-row strong, .blocked-row small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blocked-row small { color:#666; font-size:9px; }
.report-textarea { width:100%; min-height:100px; resize:vertical; }
.away-presets { display:flex; flex-wrap:wrap; gap:4px; margin:7px 0; }
.conversation-search { display:grid; grid-template-columns:1fr auto auto; gap:4px; padding:4px; background:var(--aim-gray-light); border-top:1px solid #fff; border-bottom:1px solid #777; }
.conversation-filter-hidden { display:none !important; }
.history-controls { display:flex; gap:7px; align-items:center; padding:3px 4px; background:var(--aim-gray-light); border-bottom:1px solid #aaa; font-size:9px; }
.history-controls [data-history-count] { color:#555; }
.drop-hint { margin:4px; padding:9px; text-align:center; border:2px dashed var(--aim-blue); background:#eef5ff; color:var(--aim-blue-dark); font-weight:700; }
.window.drag-media-active { outline:3px solid rgba(65,105,225,.45); }
.media-actions { margin-top:3px; }
.media-actions .link-button { font-size:9px; }

@media (max-width:720px) {
  .account-window { width:calc(100vw - 12px) !important; height:auto !important; }
  .account-grid { grid-template-columns:1fr; }
  .provider-status-row { grid-template-columns:1fr auto; }
  .provider-status-row strong { grid-column:1; }
  .conversation-search { grid-template-columns:1fr auto; }
  .conversation-search [data-conversation-search-close] { grid-column:2; grid-row:1; }
}
.buddy-context-menu { position:fixed; z-index:9999; min-width:185px; padding:2px; background:var(--aim-gray); border:2px solid; border-color:#fff #555 #555 #fff; box-shadow:2px 2px 0 rgba(0,0,0,.35); }
.buddy-context-menu button { display:block; width:100%; border:0; background:transparent; padding:5px 9px; text-align:left; font-size:10px; color:#111; }
.buddy-context-menu button:hover { background:var(--aim-blue); color:#fff; }

/* ===== V11 SOLO GAMES ===== */
.solo-game-window { width: 620px; height: 640px; max-width: calc(100vw - 16px); max-height: calc(100vh - 52px); display:flex; flex-direction:column; }
.solo-game-window .window-body { flex:1; min-height:0; overflow:auto; }
.solo-game-body { padding:8px; }
.solo-root { min-height:100%; }
.solo-game-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 8px; margin-bottom:8px; background:#eef4ff; border:1px solid #8999bb; font-size:10px; }
.solo-game-toolbar span { color:#555; text-align:right; }
.solo-game-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; margin-top:10px; }
.solo-hint { font-size:9px; color:#555; }
.solo-feedback { margin-top:8px; padding:6px; background:#fffbe6; border:1px solid #b7a35a; font-weight:bold; }

/* Tic-Tac-Toe */
.solo-ttt-board { width:min(330px,85vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(3,1fr); margin:18px auto; background:#777; gap:2px; border:2px solid; border-color:#777 #fff #fff #777; }
.solo-ttt-cell { border:0; background:#fff; font:700 clamp(36px,8vw,70px) Arial,sans-serif; color:#1742a0; cursor:pointer; }
.solo-ttt-cell:nth-child(even) { color:#8c1768; }
.solo-ttt-cell.winner { background:#fff1a8; }

/* Connect Four */
.solo-c4-drop-row { width:min(420px,92vw); margin:0 auto 4px; display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.solo-c4-drop-row .win-button { min-width:0; padding:2px; }
.solo-c4-board { width:min(420px,92vw); aspect-ratio:7/6; margin:auto; padding:5px; background:#1742a0; display:grid; grid-template-columns:repeat(7,1fr); grid-template-rows:repeat(6,1fr); gap:4px; border:2px solid; border-color:#fff #061f63 #061f63 #fff; }
.solo-c4-cell { display:grid; place-items:center; background:#0b2d85; border-radius:50%; }
.solo-c4-cell.winner { outline:3px solid #fff1a8; outline-offset:-2px; }
.solo-c4-cell .disc { width:78%; aspect-ratio:1; border-radius:50%; background:#d7d7d7; border:1px solid #555; box-shadow:inset 1px 1px #fff,inset -1px -1px #777; }
.solo-c4-cell .disc.d1 { background:#f5d324; }
.solo-c4-cell .disc.d2 { background:#d83c3c; }

/* Checkers + Chess */
.solo-checkers-board,.solo-chess-board { width:min(470px,92vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(8,1fr); margin:8px auto; border:3px solid #555; }
.solo-checkers-square,.solo-chess-square { min-width:0; min-height:0; border:0; padding:0; display:grid; place-items:center; cursor:pointer; position:relative; }
.solo-checkers-square.light,.solo-chess-square.light { background:#eee3ca; }
.solo-checkers-square.dark,.solo-chess-square.dark { background:#6d4e34; }
.solo-checkers-square.selected,.solo-chess-square.selected { box-shadow:inset 0 0 0 4px #3c7cff; }
.solo-checkers-square.legal::after,.solo-chess-square.legal::after { content:''; width:26%; aspect-ratio:1; border-radius:50%; background:rgba(66,255,93,.75); position:absolute; }
.checker { width:68%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:18px; font-weight:bold; border:2px solid rgba(255,255,255,.7); box-shadow:0 2px 2px rgba(0,0,0,.45),inset 0 -4px 0 rgba(0,0,0,.2); z-index:1; }
.checker.red { background:#d63232; color:#ffe56e; }
.checker.black { background:#222; color:#ffe56e; }
.checker.king { outline:2px solid #ffe56e; }
.solo-chess-square { font-size:clamp(25px,6vw,48px); line-height:1; color:#111; text-shadow:0 1px 0 rgba(255,255,255,.6); }

/* Word Puzzle */
.word-puzzle-card { max-width:520px; margin:18px auto; padding:16px; text-align:center; background:#fff; border:2px solid; border-color:#fff #777 #777 #fff; box-shadow:inset 0 0 0 1px #bbb; }
.word-puzzle-card small { text-transform:uppercase; letter-spacing:1px; color:#555; }
.scrambled-word { font:700 clamp(27px,7vw,46px) 'Courier New',monospace; letter-spacing:.18em; color:#1742a0; margin:10px 0; word-break:break-word; }
.word-puzzle-card form { display:grid; grid-template-columns:1fr auto; gap:6px; max-width:390px; margin:12px auto 0; }

/* Snake */
.snake-board { width:min(430px,90vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(20,1fr); margin:8px auto; background:#b8c98b; border:4px solid; border-color:#fff #4d5d37 #4d5d37 #fff; }
.snake-cell { border:1px solid rgba(64,80,45,.11); }
.snake-cell.body { background:#1742a0; }
.snake-cell.head { background:#0a2159; }
.snake-cell.food { background:#d53232; border-radius:50%; }
.snake-controls,.merge-controls { display:none; text-align:center; margin:8px 0; }
.snake-controls>button,.merge-controls>button { display:block; margin:0 auto 3px; }
.snake-controls div,.merge-controls div { display:flex; justify-content:center; gap:3px; }

/* Number Merge */
.merge-board { width:min(430px,90vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(4,1fr); gap:7px; padding:7px; margin:10px auto; background:#999; border:3px solid; border-color:#fff #666 #666 #fff; }
.merge-cell { display:grid; place-items:center; background:#cfcfcf; font:700 clamp(22px,7vw,46px) Arial,sans-serif; color:#222; box-shadow:inset 1px 1px #fff,inset -1px -1px #777; }
.merge-cell.v2{background:#eee8d6}.merge-cell.v4{background:#e7d9ae}.merge-cell.v8{background:#efae66}.merge-cell.v16{background:#eb8f50}.merge-cell.v32{background:#e86d4b}.merge-cell.v64{background:#d84a35;color:#fff}.merge-cell.v128{background:#ebd25e}.merge-cell.v256{background:#e4c23d}.merge-cell.v512{background:#d9b423}.merge-cell.v1024{background:#cfa713;color:#fff}.merge-cell.v2048{background:#f0b800;color:#fff}

/* Minesweeper */
.mine-board { width:min(450px,92vw); aspect-ratio:1; display:grid; grid-template-columns:repeat(9,1fr); margin:10px auto; background:#999; border:3px solid; border-color:#fff #666 #666 #fff; }
.mine-cell { border:2px solid; border-color:#fff #777 #777 #fff; background:#c0c0c0; font:bold clamp(10px,3vw,18px) Arial,sans-serif; min-width:0; min-height:0; padding:0; }
.mine-cell.revealed { border:1px solid #999; background:#ddd; }
.mine-cell.n1{color:#0000c8}.mine-cell.n2{color:#087b08}.mine-cell.n3{color:#c00000}.mine-cell.n4{color:#000080}.mine-cell.n5{color:#800000}.mine-cell.n6{color:#008080}.mine-cell.n7{color:#111}.mine-cell.n8{color:#666}
.win-button.pressed { border-color:#777 #fff #fff #777; background:#aaa; }

/* Solitaire */
.solitaire-top { display:grid; grid-template-columns:70px 70px 1fr repeat(4,70px); gap:7px; align-items:start; margin-bottom:12px; min-width:570px; }
.solitaire-spacer { min-width:10px; }
.solitaire-pile { width:70px; min-height:94px; position:relative; }
.playing-card { width:70px; height:94px; border-radius:5px; border:1px solid #222; background:#fff; font:700 15px Arial,sans-serif; padding:4px; text-align:left; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; box-shadow:1px 1px 1px rgba(0,0,0,.35); }
.playing-card b { font-size:28px; align-self:center; }
.playing-card.red-card { color:#c32929; }
.playing-card.black-card { color:#111; }
.playing-card.card-back { color:#fff; background:repeating-linear-gradient(45deg,#1844a4,#1844a4 4px,#2f67d6 4px,#2f67d6 8px); display:grid; place-items:center; text-align:center; }
.playing-card.empty-card { color:#777; background:rgba(255,255,255,.25); border:2px dashed rgba(255,255,255,.65); display:grid; place-items:center; text-align:center; box-shadow:none; }
.playing-card.selected-card { outline:4px solid #f8d443; outline-offset:-2px; }
.solitaire-tableau { display:grid; grid-template-columns:repeat(7,70px); gap:7px; min-width:570px; align-items:start; padding-bottom:130px; }
.tableau-column { min-height:110px; position:relative; }
.tableau-column .playing-card { position:relative; margin-bottom:-66px; z-index:1; }
.tableau-column .playing-card:nth-last-of-type(1) { margin-bottom:0; }
.tableau-drop { position:absolute; inset:0; min-height:100px; width:100%; opacity:0; z-index:0; }

@media (max-width: 720px) {
  .solo-game-window { width:100% !important; height:calc(100vh - 43px) !important; max-width:none; max-height:none; left:0 !important; top:0 !important; }
  .solo-game-body { padding:6px; }
  .solo-game-toolbar { align-items:flex-start; flex-direction:column; }
  .solo-game-toolbar span { text-align:left; }
  .snake-controls,.merge-controls { display:block; }
  .solitaire-top,.solitaire-tableau { transform-origin:top left; transform:scale(.75); }
  .solitaire-top { margin-bottom:-18px; }
  .solitaire-tableau { margin-bottom:-70px; }
  .word-puzzle-card form { grid-template-columns:1fr; }
}

/* Stripe Sandbox billing in My AIM Account */
.billing-fieldset { background:#e9e9e9; }
.billing-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.billing-heading > strong { color:#08287b; }
.billing-sandbox-badge { display:inline-block; padding:3px 6px; border:1px solid #9a6700; background:#fff3b5; color:#6c4800; font-size:8px; font-weight:700; letter-spacing:.04em; }
.billing-plans { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.billing-plan { display:flex; flex-direction:column; gap:6px; padding:8px; border:2px solid; border-color:#fff #777 #777 #fff; background:#f7f7f7; min-width:0; }
.billing-plan > div { display:flex; justify-content:space-between; gap:6px; color:#08287b; }
.billing-plan p, .billing-message { margin:0; font-size:9px; line-height:1.4; }
.billing-plan .win-button { margin-top:auto; }
.billing-notice { margin:6px 0; padding:6px; border:1px solid #8292b0; background:#eef4ff; font-size:9px; line-height:1.4; }
.billing-busy { min-height:14px; margin-top:4px; color:#555; font-size:9px; font-style:italic; }
@media (max-width:720px) {
  .billing-heading { align-items:flex-start; flex-direction:column; }
  .billing-plans { grid-template-columns:1fr; }
}