* { box-sizing: border-box; }

:root {
  font-family: Arial, sans-serif;
  color: #e8edf2;
  background: #101317;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #101317;
}

button, input { font: inherit; }
button { color: inherit; cursor: pointer; }

.app {
  width: min(1000px, calc(100% - 24px));
  margin: 0 auto;
  padding: 18px 0 30px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid #29313a;
  background: #171c21;
  border-radius: 12px;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 4px; font-size: 26px; }
h2 { margin-bottom: 14px; font-size: 20px; }
.subtitle { margin: 0; color: #98a2ad; }
.money { font-size: 22px; font-weight: 700; white-space: nowrap; }

.screen { margin-top: 16px; }
.hidden { display: none !important; }

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

.light-mode-choice {
  grid-column: 2;
  display: grid;
  gap: 7px;
}
.light-mode-choice .mode-card { width: 100%; }

.mode-card,
.game-card {
  min-height: 130px;
  padding: 18px;
  text-align: left;
  border: 1px solid #303943;
  border-radius: 12px;
  background: #171c21;
  transition: transform .12s, border-color .12s, background .12s;
}

.mode-card:hover,
.game-card:hover { transform: translateY(-2px); border-color: #66727e; background: #1b2228; }
.mode-card b,
.game-card strong { display: block; margin-bottom: 10px; font-size: 18px; }
.mode-card span,
.game-card span { color: #a8b0b8; line-height: 1.4; }

.grid {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 14px;
}

.panel {
  padding: 16px;
  border: 1px solid #29313a;
  border-radius: 12px;
  background: #171c21;
}

.panel-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.badge {
  padding: 5px 8px;
  border-radius: 999px;
  background: #252d35;
  color: #b9c2cb;
  font-size: 12px;
  white-space: nowrap;
}

.parts { display: grid; gap: 8px; }
.part {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #11161a;
}
.part span { color: #a8b0b8; }

.score-row {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #29313a;
}

.result {
  min-height: 24px;
  margin-top: 12px;
  color: #c8d0d8;
  text-align: center;
}

.game-picker {
  display: grid;
  gap: 9px;
}
.game-card {
  min-height: auto;
  width: 100%;
}

.game-area { min-height: 330px; }
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.game-header strong { display: block; font-size: 18px; margin-bottom: 4px; }
.game-header span { color: #8f99a3; font-size: 13px; }

.primary {
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 8px;
  background: #e8edf2;
  color: #101317;
  font-weight: 700;
}
.primary:hover { filter: brightness(.94); }
.primary:disabled { opacity: .5; cursor: default; }

.small {
  padding: 7px 9px;
  border: 1px solid #39434d;
  border-radius: 7px;
  background: #20272e;
}
.small:hover { background: #273039; }
.small:disabled { opacity: .45; cursor: default; }
.danger { color: #f2a6a6; }

/* Memory */
.memory-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
}
.memory-cell {
  aspect-ratio: 1;
  border: 1px solid #303943;
  border-radius: 7px;
  background: #20272e;
  transition: background .08s, transform .08s;
}
.memory-cell:disabled { cursor: default; }
.memory-cell.flash {
  background: #2388ff;
  box-shadow: 0 0 14px rgba(35, 136, 255, .55);
  transform: scale(.95);
}
.memory-cell.correct { background: #2f9e63; }
.memory-cell.wrong { background: #b94343; }

/* Math */
.math-stats,
.cats-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 12px;
  color: #a8b0b8;
}
.math-card { text-align: center; }
.math-question {
  margin: 24px 0 16px;
  font-size: 34px;
  font-weight: 800;
}
.math-input {
  width: 100%;
  margin-bottom: 8px;
  padding: 11px 12px;
  border: 1px solid #39434d;
  border-radius: 8px;
  outline: none;
  background: #11161a;
  color: #e8edf2;
  text-align: center;
}
.math-input:focus { border-color: #66727e; }

/* Cats */
.cats-arena {
  position: relative;
  height: 270px;
  overflow: hidden;
  border: 1px solid #29313a;
  border-radius: 10px;
  background: #11161a;
}
.cat-target {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 3px solid #e8edf2;
  border-radius: 50%;
  background: #4aa3ff;
  box-shadow: 0 0 13px rgba(74, 163, 255, .5);
  animation: targetIn .08s ease-out;
}
.cat-target:active { transform: translate(-50%, -50%) scale(.85); }

@keyframes targetIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.65); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.shop { grid-column: 1 / -1; }
.shop-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #242c34;
}
.shop-item:last-child { border-bottom: 0; }
.item-name { font-weight: 700; }
.item-desc { margin-top: 4px; color: #8f99a3; font-size: 13px; }
.market-event-banner {
  display: none;
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid #3e4c59;
  border-radius: 10px;
  background: #141a20;
  color: #dbe3ea;
}
.market-event-banner.active { display: grid; gap: 3px; }
.market-event-banner strong { font-size: 14px; }
.market-event-banner span { color: #aeb8c2; font-size: 12px; line-height: 1.4; }
.market-event-banner small { color: #7f8993; font-size: 11px; }
.market-event-banner.event-ai_development { border-color: #6d5790; }
.market-event-banner.event-overproduction { border-color: #557b62; }
.market-event-banner.event-factory_explosion { border-color: #92585a; }
.market-event-banner.event-black_friday { border-color: #7d6b3e; }
body.theme-light .market-event-banner { background: #f4f6f8; border-color: #c8d0d8; color: #20262c; }
body.theme-light .market-event-banner span { color: #5c6670; }
body.theme-light .market-event-banner small { color: #7b858f; }

.shop-meta {
  margin: -4px 0 10px;
  color: #8f99a3;
  font-size: 13px;
}

.price-line {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 5px;
  font-size: 12px;
}
.base-price { color: #707984; }
.price-change { font-weight: 700; }
.price-change.up { color: #d88b8b; }
.price-change.down { color: #82c497; }
.price-change.flat { color: #98a2ad; }
.shop-item.sold-out {
  opacity: .58;
}
.shop-buy {
  min-width: 96px;
}


@media (max-width: 760px) {
  .modes, .grid { grid-template-columns: 1fr; }
  .light-mode-choice { grid-column: auto; }
  .shop { grid-column: auto; }
  .topbar { align-items: flex-start; flex-direction: column; }
  .memory-board { grid-template-columns: repeat(6, 1fr); }
}

/* Catalog */
.catalog-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 12px;
}
.catalog-tab {
  padding: 8px 10px;
  border: 1px solid #343e48;
  border-radius: 8px;
  background: #1d242b;
  color: #b9c2cb;
  font-size: 12px;
}
.catalog-tab:hover,
.catalog-tab.active {
  background: #29323b;
  border-color: #697580;
  color: #f0f3f5;
}
.catalog-title {
  margin: 4px 0 10px;
  color: #d3d9de;
  font-weight: 700;
}
.catalog-tree {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.catalog-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border: 1px solid #303943;
  border-radius: 9px;
  background: #11161a;
  text-align: left;
}
.catalog-node:hover {
  background: #1c242b;
  border-color: #5e6872;
}
.catalog-node strong { font-size: 14px; }
.catalog-node span { color: #7f8993; font-size: 12px; }
.catalog-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.empty-catalog {
  padding: 24px 8px;
  text-align: center;
  color: #78838d;
}
.shop-items-grid {
  display: grid;
  gap: 8px;
}

@media (max-width: 760px) {
  .catalog-tree { grid-template-columns: 1fr; }
}


.shop-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px;
  border: 1px solid #303943;
  border-radius: 10px;
  background: #11161a;
}
.shop-launch strong { display: block; margin-bottom: 4px; }
.shop-launch p { margin: 0; color: #8f99a3; font-size: 13px; line-height: 1.4; }
.shop-open { width: auto; min-width: 170px; white-space: nowrap; }

.shop-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.shop-modal.hidden { display: none !important; }
.shop-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .72);
}
.shop-window {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-height: min(820px, calc(100vh - 40px));
  overflow: auto;
  padding: 16px;
  border: 1px solid #3b4650;
  border-radius: 14px;
  background: #171c21;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.shop-window-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
  position: sticky;
  top: -16px;
  padding: 16px 0 10px;
  background: #171c21;
  z-index: 2;
}
.shop-window-header h2 { margin-bottom: 4px; }
.shop-window .shop-meta { margin: 0; }

@media (max-width: 760px) {
  .shop-launch { align-items: stretch; flex-direction: column; }
  .shop-open { width: 100%; }
  .shop-modal { padding: 8px; }
  .shop-window { max-height: calc(100vh - 16px); padding: 12px; }
  .shop-window-header { top: -12px; padding-top: 12px; }
}

.part-button {
  width: 100%;
  border: 0;
  color: inherit;
  text-align: left;
  transition: background .12s, transform .12s;
}
.part-button:hover { background: #182027; transform: translateY(-1px); }
.part-button b { overflow: hidden; text-overflow: ellipsis; }
.installed-item { border-left: 3px solid #74a8ff; padding-left: 7px; }
.catalog-view-links { margin-bottom: 10px; display: flex; justify-content: flex-end; }
.active-mini { border-color: #697580; background: #29323b; }


/* Main menu */
.menu-screen { min-height: calc(100vh - 108px); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.menu-hero { text-align: center; margin-bottom: 30px; }
.menu-logo { font-size: clamp(38px, 8vw, 76px); font-weight: 900; letter-spacing: .08em; }
.menu-subtitle { margin-top: 8px; color: #98a2ad; font-size: 16px; }
.main-menu-buttons { width: min(360px, 100%); display: grid; gap: 10px; }
.menu-main-btn, .menu-btn { width: 100%; padding: 15px 18px; border-radius: 10px; border: 1px solid #39434d; font-weight: 700; }
.menu-main-btn { background: #e8edf2; color: #101317; font-size: 18px; border-color: #e8edf2; }
.menu-btn { background: #171c21; color: #e8edf2; font-size: 15px; }
.menu-main-btn:hover, .menu-btn:hover { transform: translateY(-1px); border-color: #66727e; }
.continue-wrap { margin-top: 12px; }
.menu-link-btn { border: 0; background: none; color: #aeb8c2; padding: 8px 12px; }
.menu-link-btn:hover { color: #fff; text-decoration: underline; }
.menu-version { margin-top: 26px; color: #606a74; font-size: 12px; }
.mode-screen-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px; }
.mode-screen-header p { color:#8f99a3; margin: -6px 0 0; }

.menu-modal { position: fixed; inset: 0; z-index: 1100; display:flex; align-items:center; justify-content:center; padding:18px; }
.menu-modal.hidden { display:none !important; }
.menu-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.74); }
.menu-modal-window { position:relative; z-index:1; width:min(720px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:18px; border:1px solid #3b4650; border-radius:14px; background:#171c21; box-shadow:0 18px 60px rgba(0,0,0,.5); }
.menu-modal-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:12px; border-bottom:1px solid #29313a; }
.menu-modal-header h2 { margin:0; }
.menu-modal-body { padding-top:14px; color:#c8d0d8; line-height:1.55; }
.menu-modal-body p:last-child { margin-bottom:0; }
.settings-body { display:grid; gap:14px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px; border:1px solid #303943; border-radius:10px; background:#11161a; cursor:pointer; }
.setting-row span { display:grid; gap:4px; }
.setting-row small { color:#7f8993; }
.setting-row input { width:20px; height:20px; }
.settings-note { color:#707984; font-size:12px; }
.update-log-window { width:min(900px,100%); }
.update-log-content { white-space:pre-wrap; margin:0; padding-top:14px; color:#cdd4db; font:13px/1.6 Consolas, monospace; }

body.no-animations *, body.no-animations *::before, body.no-animations *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }

@media (max-width:760px) {
  .menu-screen { min-height: calc(100vh - 128px); }
  .mode-screen-header { flex-direction:column; }
  .mode-screen-header .small { align-self:flex-start; }
}

/* Info encyclopedia */
.info-library {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  margin-top: 16px;
}
.info-category-list {
  display: grid;
  align-content: start;
  gap: 7px;
}
.info-part-tab {
  width: 100%;
  padding: 10px 11px;
  border: 1px solid #303943;
  border-radius: 8px;
  background: #11161a;
  color: #aeb8c2;
  text-align: left;
}
.info-part-tab:hover { background: #1b2228; color: #e8edf2; }
.info-part-tab.active { background: #29323b; border-color: #697580; color: #f0f3f5; }
.info-category-content {
  min-height: 260px;
  padding: 15px;
  border: 1px solid #303943;
  border-radius: 10px;
  background: #11161a;
}
.info-part-head { display: flex; gap: 12px; align-items: flex-start; }
.info-part-icon { font-size: 28px; line-height: 1; }
.info-part-head h3 { margin: 0 0 7px; font-size: 20px; }
.info-part-head p { margin: 0; color: #a8b0b8; line-height: 1.5; }
.info-details { display: grid; gap: 8px; margin-top: 16px; }
.info-detail { padding: 10px 11px; border-radius: 8px; background: #171c21; color: #c8d0d8; line-height: 1.45; }

/* Tutorial */
.tutorial-window { width: min(620px, 100%); }
.tutorial-content { min-height: 220px; display: flex; flex-direction: column; justify-content: center; padding: 28px 10px 20px; text-align: center; }
.tutorial-step-title { font-size: clamp(24px, 5vw, 34px); font-weight: 900; margin-bottom: 12px; }
.tutorial-step-text { margin: 0 auto; max-width: 530px; color: #aeb8c2; font-size: 16px; line-height: 1.65; }
.tutorial-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #29313a; }
.tutorial-actions { display: flex; gap: 8px; align-items: center; }
.tutorial-next { width: auto; min-width: 110px; }

@media (max-width: 760px) {
  .info-library { grid-template-columns: 1fr; }
  .info-category-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tutorial-footer { align-items: stretch; flex-direction: column; }
  .tutorial-actions { justify-content: flex-end; }
}

/* ===== v0.9 THEMES + CUSTOM SCROLLBAR ===== */
html {
  scrollbar-width: thin;
  scrollbar-color: #58636e #101317;
}

*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: #101317; }
*::-webkit-scrollbar-thumb {
  background: #58636e;
  border: 3px solid #101317;
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: #788592; }

body {
  --bg: #101317;
  --panel: #171c21;
  --panel-2: #11161a;
  --border: #29313a;
  --border-strong: #39434d;
  --text: #e8edf2;
  --muted: #98a2ad;
  --soft: #a8b0b8;
  --button: #1d242b;
  --button-hover: #29323b;
  --scroll-track: #101317;
  --scroll-thumb: #58636e;
  background: var(--bg);
  color: var(--text);
}

body.theme-light {
  --bg: #eef2f5;
  --panel: #ffffff;
  --panel-2: #f4f7f9;
  --border: #cfd7de;
  --border-strong: #aeb9c3;
  --text: #182028;
  --muted: #67737e;
  --soft: #4d5964;
  --button: #e7edf2;
  --button-hover: #dce5eb;
  --scroll-track: #eef2f5;
  --scroll-thumb: #9aa7b2;
}

html.theme-light { scrollbar-color: #9aa7b2 #eef2f5; }
html.theme-light *::-webkit-scrollbar-track { background: #eef2f5; }
html.theme-light *::-webkit-scrollbar-thumb { background: #9aa7b2; border-color: #eef2f5; }
html.theme-light *::-webkit-scrollbar-thumb:hover { background: #7f8d98; }

body.theme-light,
body.theme-light .panel,
body.theme-light .topbar,
body.theme-light .mode-card,
body.theme-light .game-card,
body.theme-light .menu-btn,
body.theme-light .menu-main-btn,
body.theme-light .menu-modal-window,
body.theme-light .shop-window,
body.theme-light .info-category-content,
body.theme-light .info-detail,
body.theme-light .setting-row,
body.theme-light .catalog-node,
body.theme-light .shop-launch,
body.theme-light .cats-arena,
body.theme-light .math-input,
body.theme-light .part,
body.theme-light .catalog-tab,
body.theme-light .info-part-tab {
  background: var(--panel);
  color: var(--text);
  border-color: var(--border);
}
body.theme-light .part,
body.theme-light .math-input,
body.theme-light .catalog-node,
body.theme-light .shop-launch,
body.theme-light .info-category-content,
body.theme-light .info-detail,
body.theme-light .setting-row,
body.theme-light .info-part-tab,
body.theme-light .cats-arena,
body.theme-light .catalog-tab { background: var(--panel-2); }
body.theme-light .subtitle,
body.theme-light .menu-subtitle,
body.theme-light .mode-screen-header p,
body.theme-light .shop-launch p,
body.theme-light .item-desc,
body.theme-light .info-part-head p,
body.theme-light .tutorial-step-text { color: var(--muted); }
body.theme-light .mode-card span,
body.theme-light .game-card span,
body.theme-light .part span,
body.theme-light .settings-note,
body.theme-light .setting-row small,
body.theme-light .shop-meta,
body.theme-light .base-price { color: var(--soft); }
body.theme-light .mode-card:hover,
body.theme-light .game-card:hover,
body.theme-light .catalog-node:hover,
body.theme-light .info-part-tab:hover { background: var(--button-hover); border-color: var(--border-strong); }
body.theme-light .menu-main-btn { background: #182028; color: #fff; border-color: #182028; }
body.theme-light .menu-btn { background: var(--panel); }
body.theme-light .badge { background: #e1e7eb; color: #46525d; }
body.theme-light .menu-link-btn { color: #53606a; }
body.theme-light .menu-link-btn:hover { color: #182028; }
body.theme-light .score-row,
body.theme-light .menu-modal-header,
body.theme-light .tutorial-footer { border-color: var(--border); }
body.theme-light .update-log-content { color: #2d3943; }
body.theme-light .catalog-tab.active,
body.theme-light .info-part-tab.active { background: #dfe7ec; border-color: #93a1ad; color: #182028; }
body.theme-light .shop-item { border-color: #dde3e8; }
body.theme-light .math-input { color: #182028; }
body.theme-light .menu-modal-backdrop { background: rgba(15, 22, 28, .56); }

/* Catalog follows the active theme in all nested areas. */
body.theme-light .catalog-title { color: var(--text); }
body.theme-light .catalog-breadcrumb { color: var(--text); }
body.theme-light .shop-window-header { background: var(--panel); border-color: var(--border); }
body.theme-light .catalog-tabs { color: var(--text); }
body.theme-light .catalog-tab:hover,
body.theme-light .catalog-tab.active { background: var(--button-hover); border-color: var(--border-strong); color: var(--text); }
body.theme-light .catalog-node { background: var(--panel-2); }
body.theme-light .catalog-node:hover { background: var(--button-hover); border-color: var(--border-strong); }
body.theme-light .catalog-node span,
body.theme-light .empty-catalog { color: var(--muted); }
body.theme-light .part-button:hover { background: var(--button-hover); }

/* Modal action buttons follow the active page theme. */
body.theme-light .small {
  background: #ffffff;
  color: #182028;
  border-color: #b9c4cc;
}
body.theme-light .small:hover { background: #eef3f6; }

/* Theme controls keep their own visual previews regardless of the current theme. */
.theme-option span { transition: background .12s, color .12s, border-color .12s, box-shadow .12s; }
.theme-option input#themeDark + span {
  background: #171c21;
  color: #e8edf2;
  border-color: #39434d;
}
.theme-option input#themeDark + span:hover { background: #20272e; }
.theme-option input#themeLight + span {
  background: #ffffff;
  color: #182028;
  border-color: #cfd7de;
}
.theme-option input#themeLight + span:hover { background: #f1f5f7; }
.theme-option input#themeDark:checked + span {
  border-color: #6db7ff;
  box-shadow: 0 0 0 1px rgba(109,183,255,.18);
}
.theme-option input#themeLight:checked + span {
  border-color: #6f8798;
  box-shadow: 0 0 0 1px rgba(111,135,152,.14);
}

/* Theme controls */
.theme-setting { display: grid; gap: 8px; }
.theme-setting-title { display: grid; gap: 4px; }
.theme-setting-title small { color: #7f8993; }
.theme-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.theme-option { cursor: pointer; }
.theme-option input { position: absolute; opacity: 0; pointer-events: none; }
.theme-option span {
  display: block;
  padding: 11px 12px;
  border: 1px solid #303943;
  border-radius: 9px;
  background: #11161a;
  color: #aeb8c2;
  text-align: center;
}
.theme-option input:checked + span { border-color: #697580; background: #29323b; color: #f0f3f5; }

/* Guided onboarding */
.tutorial-overlay { z-index: 1300; align-items: flex-start; justify-content: flex-start; padding: 0; }
.tutorial-overlay .menu-modal-backdrop { z-index: 0; background: rgba(0, 0, 0, .68); }
.tutorial-spotlight {
  position: fixed;
  z-index: 1;
  display: none;
  pointer-events: none;
  border: 2px solid #6db7ff;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.68), 0 0 26px rgba(109,183,255,.42);
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.tutorial-guide {
  position: fixed;
  z-index: 2;
  width: min(360px, calc(100vw - 24px));
  padding: 14px;
  border: 1px solid #3b4650;
  border-radius: 13px;
  background: #171c21;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.tutorial-guide-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tutorial-guide-header > div { min-width: 0; }
.tutorial-guide .badge { display: inline-block; margin-bottom: 8px; }
.tutorial-guide .tutorial-step-title { margin: 0; font-size: 22px; line-height: 1.15; }
.tutorial-guide .tutorial-step-text { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: #aeb8c2; }
.tutorial-guide .tutorial-footer { margin-top: 14px; padding-top: 12px; }
.tutorial-guide .tutorial-actions { justify-content: space-between; width: 100%; }
body.theme-light .tutorial-guide { background: #fff; border-color: #cfd7de; }
body.theme-light .tutorial-guide .tutorial-step-text { color: #596671; }

@media (max-width: 760px) {
  .theme-options { grid-template-columns: 1fr; }
}


/* v1.0 — game catalog + arcade canvases */
.game-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.game-card { min-height: 118px; }
.game-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.game-card-top strong { margin-bottom:0; }
.fps-pill, .fps-live { padding:5px 8px; border-radius:999px; background:#25303a; color:#dbe6ef; font-size:12px; font-weight:700; white-space:nowrap; }
.game-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; color:#8f9ba6; font-size:11px; }
.game-tier-1 { border-left:3px solid #5e9cff; }
.game-tier-2 { border-left:3px solid #5db9a2; }
.game-tier-3 { border-left:3px solid #d4b15c; }
.game-tier-4 { border-left:3px solid #da865e; }
.game-tier-5 { border-left:3px solid #cf6a9d; }
.game-tier-6 { border-left:3px solid #d85b67; }
.game-header-fps { align-items:flex-start; }
.game-header-actions { display:flex; align-items:center; gap:8px; }
.reaction-card, .typing-card { display:grid; gap:14px; text-align:center; margin-top:26px; }
.reaction-btn { min-height:170px; border:1px solid #39434d; border-radius:14px; background:#20272e; color:#d9e0e7; font-size:24px; font-weight:800; }
.reaction-btn.ready { background:#3a9f6b; color:#fff; }
.color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.color-button { min-height:72px; border:0; border-radius:10px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.color-status, #typingStatus, #canvasStatus { margin-top:12px; text-align:center; color:#aeb8c2; min-height:22px; }
.typing-prompt { padding:18px; border-radius:10px; background:#20272e; font-size:24px; font-weight:700; }
.order-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:16px; }
.order-button { min-height:60px; border:1px solid #39434d; border-radius:10px; background:#20272e; font-size:20px; font-weight:700; }
.order-button:disabled { opacity:.3; }
.simon-pad { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:420px; margin:20px auto 0; }
.simon-button { aspect-ratio:1; border:2px solid #24303a; border-radius:18px; opacity:.82; }
.simon-button.red{background:#bf4f5c}.simon-button.blue{background:#397bc7}.simon-button.green{background:#3c9e69}.simon-button.yellow{background:#c9ad43}
.simon-button.lit { filter:brightness(1.6); transform:scale(.98); }
.rush-target { position:relative; margin-top:10px; left:20%; top:15%; width:120px; height:120px; border-radius:50%; border:0; background:#58a8e8; color:#fff; font-weight:900; }
.arcade-canvas { display:block; width:100%; max-width:720px; height:auto; margin:12px auto 0; border:1px solid #303943; border-radius:10px; background:#0d1217; image-rendering:auto; }
@media (max-width:760px){ .game-picker{grid-template-columns:1fr;} .game-meta{font-size:10px;} .color-grid{grid-template-columns:repeat(2,1fr);} .order-grid{grid-template-columns:repeat(3,1fr);} }
body.theme-light .fps-pill, body.theme-light .fps-live { background:#e4e9ee; color:#24303a; }
body.theme-light .game-card { background:#fff; border-color:#cbd3da; }
body.theme-light .game-card:hover { background:#f2f5f7; }
body.theme-light .game-card span, body.theme-light .game-meta { color:#65707a; }
body.theme-light .reaction-btn, body.theme-light .typing-prompt, body.theme-light .order-button { background:#eef2f5; color:#1b242c; }


/* v1.1 — earnings tabs + AFK */
.earn-tabs { display:flex; gap:8px; margin: 12px 0 14px; }
.earn-tab { flex:1; padding:10px 12px; border:1px solid #303943; border-radius:9px; background:#11161a; color:#aeb8c2; font-weight:700; }
.earn-tab:hover { background:#1b2228; }
.earn-tab.active { background:#29323b; border-color:#697580; color:#f0f3f5; }
.earn-section { min-width:0; }
.afk-mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.afk-mode-card { min-height:112px; padding:14px; border:1px solid #303943; border-radius:11px; background:#11161a; text-align:left; }
.afk-mode-card strong { display:block; margin-bottom:7px; font-size:16px; }
.afk-mode-card span { color:#8f99a3; font-size:13px; line-height:1.45; }
.afk-mode-card.active { border-color:#697580; background:#20272e; }
.afk-area { margin-top:12px; }
.afk-status-card { padding:14px; border:1px solid #303943; border-radius:11px; background:#11161a; }
.afk-status-card.overheated { border-color:#a64f4f; box-shadow:0 0 0 1px rgba(166,79,79,.18); }
.afk-summary { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.afk-summary b { font-size:18px; }
.afk-chip-row { display:flex; gap:8px; margin-top:10px; }
.afk-boost { background:#5b3434; color:#ffc4c4; }
.cpu-cooler-card { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; margin-top:14px; padding:12px; border:1px solid #37414b; border-radius:10px; background:#171c21; }
.cpu-cooler-card.hot { border-color:#a64f4f; background:#2b1717; }
.cpu-cooler-card p { margin:4px 0 0; color:#8f99a3; font-size:12px; line-height:1.4; }
.cpu-visual { width:72px; height:72px; display:grid; place-items:center; border-radius:12px; background:#303943; transition:filter .08s; }
.cpu-core { width:50px; height:50px; display:grid; place-items:center; border-radius:8px; background:#db4d4d; color:#fff; font-weight:900; box-shadow:0 0 18px rgba(219,77,77,.4); }
.cpu-cooler-card:not(.hot) .cpu-core { background:#48a879; box-shadow:0 0 18px rgba(72,168,121,.25); }
.cool-button { min-width:120px; min-height:52px; border:1px solid #b95050; border-radius:9px; background:#632424; color:#fff; font-weight:800; touch-action:none; user-select:none; }
.cool-button:disabled { opacity:.45; cursor:default; }
.cool-progress { grid-column:1 / -1; height:8px; overflow:hidden; border-radius:999px; background:#303943; }
.cool-progress > div { height:100%; width:0; background:#4aa879; transition:width .05s linear; }
.afk-controls { margin-top:12px; }
.afk-controls .primary { margin:0; }
.afk-log { min-height:20px; margin-top:10px; text-align:center; color:#8f99a3; font-size:12px; }
body.theme-light .earn-tab, body.theme-light .afk-mode-card, body.theme-light .afk-status-card { background:#fff; color:#1b242c; border-color:#cbd3da; }
body.theme-light .earn-tab.active, body.theme-light .afk-mode-card.active { background:#e9eef2; border-color:#7c8b98; color:#182028; }
body.theme-light .afk-mode-card span, body.theme-light .afk-summary, body.theme-light .afk-log, body.theme-light .cpu-cooler-card p { color:#65707a; }
body.theme-light .cpu-cooler-card { background:#f5f7f8; border-color:#cbd3da; }
body.theme-light .cpu-cooler-card.hot { background:#fff0f0; border-color:#d48d8d; }
@media (max-width:760px) { .afk-mode-grid { grid-template-columns:1fr; } .cpu-cooler-card { grid-template-columns:auto 1fr; } .cool-button { grid-column:1 / -1; width:100%; } }
.diagnostic-window{max-width:760px}.diagnostic-body{padding-top:10px}.diagnostic-ok{padding:14px 16px;border:1px solid rgba(70,190,120,.28);border-radius:14px;background:rgba(70,190,120,.10)}.diagnostic-error{padding:14px 16px;border:1px solid rgba(230,90,105,.28);border-radius:14px;background:rgba(230,90,105,.09)}.diagnostic-count{font-size:1.15rem;font-weight:800;margin-bottom:10px}.diagnostic-list{display:grid;gap:10px}.diagnostic-item{padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}.diagnostic-item b{display:block;margin-bottom:4px}.diagnostic-item small{opacity:.78}.diagnostic-recommend{margin-top:7px;color:var(--accent);font-weight:700}.diagnostic-footer{display:flex;justify-content:flex-end;padding:0 18px 18px}.diagnostic-hc{font-size:1.3rem;font-weight:900;text-align:center;padding:28px 12px}.diagnostic-hc .glitch{display:inline-block;animation:diagGlitch .65s steps(2,end) infinite}@keyframes diagGlitch{0%{transform:translate(0)}50%{transform:translate(2px,-1px)}100%{transform:translate(-1px,1px)}}


/* v1.3.0 — AFK components */
.afk-components-title{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:16px 0 9px}.afk-components-title span{color:#8f99a3;font-size:12px}.afk-components-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.afk-component-card{padding:12px;border:1px solid #303943;border-radius:10px;background:#141a1f;min-width:0}.afk-component-card.active{border-color:#647d95;background:#1a2229}.afk-component-card.broken{border-color:#a64f4f;background:#2a1717}.afk-component-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.afk-component-name{display:flex;align-items:center;gap:8px;min-width:0}.afk-component-name>div{min-width:0}.afk-component-name strong,.afk-component-name small{display:block}.afk-component-name strong{font-size:14px}.afk-component-name small{color:#7f8993;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.afk-component-icon{font-size:22px}.component-toggle{position:relative;display:inline-flex;align-items:center}.component-toggle input{position:absolute;opacity:0;pointer-events:none}.component-toggle span{width:42px;height:23px;border-radius:999px;background:#3a434d;border:1px solid #53606d;display:block;position:relative;cursor:pointer}.component-toggle span:after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#d8dee4;transition:transform .15s}.component-toggle input:checked+span{background:#3f815f;border-color:#69a584}.component-toggle input:checked+span:after{transform:translateX(18px);background:#fff}.component-toggle input:disabled+span{opacity:.35;cursor:not-allowed}.afk-component-card p{margin:10px 0 8px;color:#919ca7;font-size:12px;line-height:1.4;min-height:48px}.afk-component-foot{display:flex;justify-content:space-between;gap:8px;align-items:center}.afk-component-bonus{font-size:11px;color:#b8c2cb}.afk-task-btn{white-space:nowrap}.afk-next-payout{margin-top:10px;padding:9px 10px;border-radius:9px;background:#10161b;color:#aeb8c2;font-size:12px;text-align:center}.part-broken{border-color:#a64f4f!important;box-shadow:0 0 0 1px rgba(166,79,79,.16) inset}.part-broken b{color:#ff9b9b}.broken-item{border-color:#a64f4f;background:rgba(120,35,35,.08)}.breakdown-alert p{margin:10px 0;color:#c9d1d8}.breakdown-percent{font-size:1.1rem}.breakdown-percent b{color:#ff8c8c}.breakdown-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.breakdown-actions .primary{width:auto}.afk-task-window{max-width:760px}.wire-board{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0}.wire-side{display:grid;gap:8px}.wire-port{padding:12px;border:2px solid var(--wire-color);border-radius:9px;background:#11161a;color:#dfe6ec;font-weight:800}.wire-port:before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--wire-color)}.wire-port.selected{box-shadow:0 0 0 2px #e9eef2 inset}.wire-port.connected{opacity:.42}.wire-port.wrong{animation:wireShake .18s linear 2;border-color:#ef6666}.wire-status{text-align:center;color:#aeb8c2;font-weight:700;min-height:24px}@keyframes wireShake{0%{transform:translateX(0)}50%{transform:translateX(3px)}100%{transform:translateX(0)}}.storage-test{display:grid;gap:14px;text-align:center;margin-top:22px}.storage-test-btn{min-height:180px;border:1px solid #3a4651;border-radius:14px;background:#20272e;color:#dce4eb;font-size:28px;font-weight:900}.storage-test-btn.ready{background:#3f9c6a;color:#fff;box-shadow:0 0 30px rgba(63,156,106,.25)}.storage-test-btn:disabled{opacity:.65}.storage-test #storageTestStatus{color:#96a1ab;min-height:22px}
body.theme-light .afk-components-title span{color:#65707a}body.theme-light .afk-component-card{background:#fff;border-color:#cbd3da}body.theme-light .afk-component-card.active{background:#eef3f6;border-color:#8a9aaa}body.theme-light .afk-component-card.broken{background:#fff0f0;border-color:#d48d8d}body.theme-light .afk-component-card p{color:#65707a}body.theme-light .afk-component-name small{color:#707c86}body.theme-light .afk-next-payout{background:#f1f4f6;color:#5f6b75}body.theme-light .wire-port,body.theme-light .storage-test-btn{background:#eef2f5;color:#1b242c}
@media(max-width:760px){.afk-components-grid{grid-template-columns:1fr}.afk-components-title{align-items:start;flex-direction:column}.wire-board{gap:10px}}

.afk-live-tasks{display:grid;gap:9px;margin-top:14px}.afk-task-card{padding:12px;border:1px solid #39434d;border-radius:10px;background:#11161a}.afk-task-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px}.afk-task-head strong{font-size:14px}.afk-task-head span{color:#8f99a3;font-size:12px}.afk-wire-board{margin:10px 0}.afk-storage-test{margin-top:10px}.afk-storage-test .storage-test-btn{min-height:110px}.afk-random-task-hint{color:#8f99a3;font-size:11px}@media(max-width:760px){.afk-task-head{align-items:flex-start;flex-direction:column}}
body.theme-light .afk-task-card{background:#fff;border-color:#cbd3da}body.theme-light .afk-task-head span,body.theme-light .afk-random-task-hint{color:#68747e}

/* v1.3.2 AFK component challenges */
.afk-task-cpu.overheated{border-color:#c65353;background:#2a1717}
.afk-task-cpu p{margin:7px 0 10px;color:#aeb8c2;font-size:12px}
.afk-ad-stack{position:relative;min-height:190px;margin:10px 0}
.afk-ad-modal{position:relative;width:min(310px,92%);margin:-12px auto 0;padding:12px;border:1px solid #5b6570;border-radius:10px;background:#1d2329;box-shadow:0 10px 28px rgba(0,0,0,.35);z-index:1}
.afk-ad-modal:nth-child(2){transform:translate(14px,-4px);z-index:2}.afk-ad-modal:nth-child(3){transform:translate(-12px,4px);z-index:3}.afk-ad-modal:nth-child(4){transform:translate(18px,8px);z-index:4}.afk-ad-modal:nth-child(5){transform:translate(-18px,12px);z-index:5}
.afk-ad-title{font-weight:800;font-size:13px;margin-bottom:7px}.afk-ad-text{font-size:12px;line-height:1.4;color:#b6c0ca;margin-bottom:10px}
.storage-stop-stage{position:relative;min-height:190px;margin:10px 0;border:1px solid #343d46;border-radius:12px;background:#090d11;display:flex;align-items:center;justify-content:center;overflow:hidden}
.storage-glitch-layer{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 8px,rgba(255,50,50,.18) 9px 11px),linear-gradient(90deg,rgba(255,0,0,.0),rgba(255,0,0,.18),rgba(255,0,0,.0));opacity:0}
.storage-stop-sign{font-size:88px;opacity:0;transform:scale(.7);transition:opacity .05s,transform .05s;z-index:2;filter:drop-shadow(0 0 18px rgba(255,0,0,.35))}
.storage-glitch .storage-glitch-layer{opacity:1;animation:storageGlitch .08s steps(2) infinite}.storage-glitch .storage-stop-sign{opacity:.16;transform:scale(.92)}
.storage-stop .storage-stop-stage{background:#16191d}.storage-stop .storage-stop-sign{opacity:1;transform:scale(1)}.storage-stop .storage-glitch-layer{opacity:.12}
@keyframes storageGlitch{0%{transform:translateX(-5px)}50%{transform:translateX(6px)}100%{transform:translateX(-2px)}}
body.theme-light .afk-task-cpu.overheated{background:#fff0f0;border-color:#d48d8d}body.theme-light .afk-task-cpu p{color:#65707a}body.theme-light .afk-ad-modal{background:#fff;border-color:#cbd3da;color:#1b242c}.theme-light .afk-ad-text{color:#5f6b75}.theme-light .storage-stop-stage{background:#eef2f5;border-color:#cbd3da}


/* v1.3.3 — AFK challenges render over the entire game screen */
.afk-fullscreen-tasks{z-index:2500;padding:0;align-items:stretch;justify-content:stretch;background:transparent;pointer-events:none;}
.afk-fullscreen-tasks.hidden{display:none!important}
.afk-task-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;}
.afk-task-layer .afk-task-card{position:absolute;margin:0;pointer-events:auto;box-shadow:0 18px 60px rgba(0,0,0,.5);backdrop-filter:blur(3px);}
.afk-task-layer .afk-task-cpu{left:50%;bottom:26px;transform:translateX(-50%);width:min(430px,calc(100vw - 28px));z-index:30;}
.afk-task-layer .afk-task-gpu{position:static;width:0;height:0;padding:0;border:0;background:transparent;box-shadow:none;backdrop-filter:none;overflow:visible;}
.afk-task-layer .afk-task-gpu > .afk-task-head,.afk-task-layer .afk-task-gpu > p,.afk-task-layer .afk-task-gpu > .wire-status{display:none}
.afk-task-layer .afk-ad-stack{position:fixed;inset:0;min-height:0;margin:0;pointer-events:none;z-index:40;}
.afk-task-layer .afk-ad-modal{position:absolute;width:min(320px,76vw);margin:0!important;pointer-events:auto;transform:none!important;animation:afkAdPop .12s ease-out;}
@keyframes afkAdPop{from{opacity:0}to{opacity:1;}}
.afk-task-layer .afk-task-storage{position:fixed;inset:0;width:auto;height:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;pointer-events:none;z-index:60;overflow:hidden;}
.afk-task-layer .afk-task-storage .afk-task-head,.afk-task-layer .afk-task-storage .wire-status{display:none}
.afk-task-layer .storage-stop-stage{position:fixed;inset:0;min-height:0;margin:0;border:0;border-radius:0;background:transparent;pointer-events:none;}
.afk-task-layer .storage-stop-sign{position:fixed;left:50%;top:50%;font-size:min(26vw,180px);transform:translate(-50%,-50%) scale(.7);}
.afk-task-layer .storage-stop .storage-stop-sign{transform:translate(-50%,-50%) scale(1);}
.afk-task-layer .storage-glitch-layer{position:fixed;inset:0;}
.afk-task-layer .storage-stop .storage-glitch-layer{opacity:.16}
.afk-task-layer .storage-glitch .storage-glitch-layer{opacity:1;animation:storageGlitch .045s steps(2,end) infinite,afkScreenFlash .09s steps(2,end) infinite;}
@keyframes afkScreenFlash{0%{filter:brightness(1.1) saturate(1.3)}50%{filter:brightness(2) saturate(2)}100%{filter:brightness(.95) saturate(1.1)}}
body.theme-light .afk-task-layer .afk-task-cpu.overheated{background:rgba(255,240,240,.96)}
body.theme-light .afk-task-layer .afk-ad-modal{background:#fff;color:#1b242c}
@media(max-width:760px){.afk-task-layer .afk-task-cpu{bottom:12px}.afk-task-layer .afk-ad-modal{width:min(290px,78vw)}}


/* v1.5.0 — manual save slots */
.shop-actions{display:flex;gap:7px;align-items:center}.save-window{width:min(780px,100%)}.save-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}.save-slot{padding:14px;border:1px solid #303943;border-radius:12px;background:#11161a;min-height:170px;display:flex;flex-direction:column;gap:8px}.save-slot.occupied{border-color:#5d6b78}.save-slot-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.save-slot-title{font-weight:800}.save-slot-meta{font-size:12px;color:#8f99a3;line-height:1.45;min-height:50px}.save-slot-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:auto}.save-slot-actions .primary,.save-slot-actions .small{width:100%}.save-slot-empty{color:#7d8994;font-size:13px;margin-top:8px}.reset-confirm-window{width:min(560px,100%)}.reset-confirm-actions{display:grid;gap:8px;margin-top:14px}.reset-confirm-actions .primary,.reset-confirm-actions .small{width:100%}
body.theme-light .save-slot{background:#fff;border-color:#cbd3da}body.theme-light .save-slot.occupied{border-color:#8a9aaa}body.theme-light .save-slot-meta,body.theme-light .save-slot-empty{color:#68747e}
@media(max-width:760px){.save-slots{grid-template-columns:1fr}.shop-actions{width:100%;justify-content:flex-end}.shop-actions .small{flex:1}}

/* v1.5.1 — load saves from main menu */
.save-slot-actions.single-action{grid-template-columns:1fr}


/* v1.5.2 — full mobile / touch layout */
html { -webkit-text-size-adjust: 100%; width: 100%; max-width: 100%; overflow-x: clip; }
body { width: 100%; max-width: 100%; overflow-x: clip !important; overscroll-behavior-x: none; }
.app, .screen, .grid, .panel, .game-area, .earn-section { min-width: 0; max-width: 100%; }
button, input, label { touch-action: manipulation; }

@media (max-width: 760px) {
  .app {
    width: min(100%, calc(100% - 16px));
    padding: 8px 0 calc(18px + env(safe-area-inset-bottom));
  }
  .topbar {
    padding: 12px;
    gap: 8px;
    border-radius: 10px;
  }
  h1 { font-size: 22px; }
  .subtitle { font-size: 12px; }
  .money { font-size: 18px; }

  .screen { margin-top: 10px; }
  .menu-screen {
    min-height: calc(100dvh - 90px);
    justify-content: center;
    padding-bottom: 10px;
  }
  .menu-hero { margin-bottom: 18px; }
  .menu-logo { font-size: clamp(30px, 13vw, 58px); letter-spacing: .05em; }
  .menu-subtitle { font-size: 13px; }
  .main-menu-buttons { width: 100%; max-width: 430px; gap: 8px; }
  .menu-main-btn, .menu-btn { min-height: 48px; padding: 12px 14px; }

  .modes { grid-template-columns: 1fr; gap: 9px; }
  .mode-card { min-height: 92px; padding: 14px; }
  .mode-card b { font-size: 16px; }

  .grid { grid-template-columns: 1fr; gap: 10px; }
  .panel { padding: 12px; border-radius: 10px; }
  .panel-title { align-items: flex-start; flex-wrap: wrap; }
  .panel-title h2 { margin-bottom: 8px; }
  .badge { font-size: 11px; }

  .parts { gap: 6px; }
  .part { padding: 10px; min-height: 46px; }
  .part-button { min-height: 46px; }

  .shop { grid-column: auto; }
  .shop-actions { width: 100%; }
  .shop-actions .small { min-height: 44px; }
  .shop-launch { padding: 12px; }
  .shop-open { width: 100%; min-width: 0; min-height: 46px; }

  .earn-tabs { grid-template-columns: 1fr 1fr; }
  .earn-tab, .afk-mode-card { min-height: 48px; }
  .afk-mode-grid { grid-template-columns: 1fr; }

  .game-picker { grid-template-columns: 1fr; gap: 8px; }
  .game-card { min-height: 0; padding: 13px; }
  .game-card-top { align-items: flex-start; }
  .game-header { flex-wrap: wrap; }
  .game-header-actions { width: 100%; justify-content: flex-end; }
  .game-area { min-height: 250px; }
  .game-header strong { font-size: 16px; }
  .game-header span { font-size: 12px; }
  .fps-pill, .fps-live { font-size: 11px; }

  .memory-board { grid-template-columns: repeat(6, minmax(0,1fr)); gap: 5px; }
  .memory-cell { min-width: 0; }
  .math-question { margin: 18px 0 12px; font-size: 28px; }
  .math-input { font-size: 16px; min-height: 46px; }
  .color-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .color-button { min-height: 62px; }
  .order-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .order-button { min-height: 52px; }
  .reaction-btn { min-height: 150px; }
  .typing-prompt { font-size: 20px; word-break: break-word; }
  .arcade-canvas { width: 100%; max-width: 100%; }

  .catalog-tree { grid-template-columns: 1fr; }
  .catalog-tabs { overflow-x: hidden; overflow-y: visible; flex-wrap: wrap; padding-bottom: 3px; width: 100%; max-width: 100%; }
  .catalog-tab { flex: 1 1 auto; min-height: 42px; min-width: 0; }
  .catalog-node { min-height: 50px; }
  .shop-window,
  .menu-modal-window {
    width: 100%;
    max-height: calc(100dvh - 16px);
    padding: 12px;
    border-radius: 12px;
  }
  .shop-modal, .menu-modal { padding: 8px; }
  .shop-window-header { top: -12px; padding-top: 12px; }
  .menu-modal-header { align-items: flex-start; }
  .menu-modal-header .small { min-height: 44px; flex: 0 0 auto; }
  .menu-modal-body { padding-top: 12px; }
  .info-library { grid-template-columns: 1fr; }
  .info-category-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .info-category-content { min-height: 220px; }
  .theme-options { grid-template-columns: 1fr; }
  .setting-row { min-height: 56px; }

  .tutorial-guide {
    width: calc(100vw - 16px);
    max-width: none;
    padding: 12px;
  }
  .tutorial-guide .tutorial-step-title { font-size: 20px; }
  .tutorial-guide .tutorial-step-text { font-size: 13px; }
  .tutorial-actions { gap: 6px; }
  .tutorial-actions .small, .tutorial-next { min-height: 44px; }

  .diagnostic-footer { padding: 0 12px 12px; }
  .diagnostic-footer .primary { min-height: 46px; }
  .breakdown-actions { display: grid; grid-template-columns: 1fr; }
  .breakdown-actions .primary, .breakdown-actions .small { width: 100%; min-height: 46px; }

  .save-slots { grid-template-columns: 1fr; }
  .save-slot { min-height: 150px; padding: 12px; }
  .save-slot-actions { grid-template-columns: 1fr 1fr; }
  .save-slot-actions .primary, .save-slot-actions .small { min-height: 44px; }

  .afk-components-grid { grid-template-columns: 1fr; }
  .afk-component-card { padding: 11px; }
  .afk-component-card p { min-height: 0; }
  .afk-component-foot { flex-wrap: wrap; }
  .afk-task-layer .afk-task-cpu { width: calc(100vw - 16px); bottom: max(8px, env(safe-area-inset-bottom)); }
  .afk-task-layer .afk-ad-modal { width: min(320px, 82vw); max-width: 82vw; }
  .storage-stop-sign { font-size: min(32vw, 170px); }
}

@media (max-width: 430px) {
  .app { width: calc(100% - 10px); }
  .topbar { padding: 10px; }
  .money { font-size: 16px; }
  .panel { padding: 10px; }
  .game-card { padding: 11px; }
  .memory-board { gap: 4px; }
  .memory-cell { border-radius: 5px; }
  .info-category-list { grid-template-columns: 1fr 1fr; }
  .shop-actions .small { padding-inline: 8px; }
  .save-slot-actions { grid-template-columns: 1fr; }
  .afk-task-layer .afk-ad-modal { width: 88vw; max-width: 88vw; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .app { padding-top: 6px; padding-bottom: 10px; }
  .menu-screen { min-height: auto; padding: 20px 0; }
  .menu-hero { margin-bottom: 12px; }
  .menu-logo { font-size: 34px; }
  .main-menu-buttons { max-width: 460px; grid-template-columns: 1fr 1fr; }
  .menu-main-btn { grid-column: 1 / -1; }
  .menu-btn, .menu-main-btn { min-height: 42px; padding: 9px 12px; }
}


/* v1.5.4 — mobile horizontal overflow hardening */
@media (max-width: 760px) {
  .shop-modal, .menu-modal, .tutorial-overlay, .afk-task-layer {
    max-width: 100vw;
    overflow-x: clip;
  }
  .shop-window, .menu-modal-window, .tutorial-guide {
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
  }
  .shop-window-header, .menu-modal-header, .tutorial-guide-header,
  .panel-title, .game-header, .game-header-actions, .shop-actions,
  .save-slot-head, .afk-component-head, .afk-component-foot {
    min-width: 0;
  }
  .shop-window-header > *, .menu-modal-header > *, .tutorial-guide-header > *,
  .panel-title > *, .game-header > * { min-width: 0; max-width: 100%; }
  .catalog-tabs { overflow-x: hidden; }
}


/* v1.6.0 — Achievements */
.achievements-window { width: min(920px, 100%); }
.achievement-list { display: grid; gap: 12px; }
.achievement-card {
  padding: 14px;
  border: 1px solid #303943;
  border-radius: 12px;
  background: #11161a;
}
.achievement-card.unlocked { border-color: #5d876e; }

.achievement-progress { margin-top: 14px; display: grid; gap: 8px; }
.achievement-progress-label { font-size: 13px; color: var(--muted); }
.achievement-progress-bar { height: 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); overflow: hidden; }
.achievement-progress-bar span { display: block; height: 100%; border-radius: inherit; background: #5d876e; transition: width .25s ease; }
.achievement-card.locked { opacity: .9; }
.achievement-card-head { display: flex; align-items: flex-start; gap: 12px; }
.achievement-icon { font-size: 30px; line-height: 1; }
.achievement-title-wrap { min-width: 0; flex: 1; }
.achievement-title-wrap h3 { margin: 0 0 5px; font-size: 18px; word-break: break-word; }
.achievement-title-wrap p { margin: 0; color: #8f99a3; font-size: 13px; line-height: 1.45; }
.achievement-status { flex: 0 0 auto; font-size: 12px; white-space: nowrap; }
.achievement-reqs { list-style: none; padding: 10px 0 0; margin: 10px 0 0; border-top: 1px solid #252d35; display: grid; gap: 6px; }
.achievement-req { display: grid; grid-template-columns: 18px 120px 1fr; gap: 8px; align-items: center; color: #a8b0b8; font-size: 12px; }
.achievement-req.met { color: #8fd0a3; }
.achievement-req span:last-child { min-width: 0; overflow-wrap: anywhere; }
body.theme-light .achievement-card { background: var(--panel-2); border-color: var(--border); }
body.theme-light .achievement-card.unlocked { border-color: #82a68e; }
body.theme-light .achievement-title-wrap p { color: var(--muted); }
body.theme-light .achievement-reqs { border-color: var(--border); }
body.theme-light .achievement-req { color: var(--soft); }
body.theme-light .achievement-req.met { color: #35734a; }
@media (max-width: 760px) {
  .achievement-card-head { flex-wrap: wrap; }
  .achievement-status { width: 100%; }
  .achievement-req { grid-template-columns: 18px 1fr; }
  .achievement-req b { grid-column: 2; }
  .achievement-req span:last-child { grid-column: 2; }
}


/* v1.6.3 — Achievement celebration */
.confetti-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5000;
}
.achievement-toast {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 5001;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  border: 1px solid #5d876e;
  border-radius: 14px;
  background: #171c21;
  color: #e8edf2;
  box-shadow: 0 14px 40px rgba(0,0,0,.42);
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  pointer-events: none;
  transition: transform .28s ease, opacity .28s ease;
}
.achievement-toast.show {
  transform: translateX(0);
  opacity: 1;
}
.achievement-toast-icon {
  flex: 0 0 auto;
  font-size: 34px;
  line-height: 1;
}
.achievement-toast-text {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.achievement-toast-text strong { font-size: 15px; }
.achievement-toast-text span {
  color: #c0c8cf;
  font-size: 13px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
body.theme-light .achievement-toast {
  background: var(--panel-2);
  border-color: #82a68e;
  color: var(--text);
}
body.theme-light .achievement-toast-text span { color: var(--muted); }
@media (max-width: 760px) {
  .achievement-toast {
    top: 12px;
    right: 12px;
    width: min(340px, calc(100vw - 24px));
  }
}

/* v1.6.5 — visible achievement status */
.menu-btn.has-achievements {
  border-color: #6f9f7f;
}
body.theme-light .menu-btn.has-achievements {
  border-color: #7ca789;
}


/* Manufacturer badges */
.manufacturer-tag, .platform-tag {
  display: inline-block;
  margin-left: 8px;
  font-weight: 800;
  letter-spacing: .1px;
  white-space: nowrap;
}
.manufacturer-tag { text-shadow: 0 0 7px currentColor, 0 0 14px currentColor; }
.manufacturer-amd { color: #e24b56; }
.manufacturer-intel { color: #4d91ff; }
.manufacturer-nvidia { color: #b875ff; }
.manufacturer-board { color: #e1e7ee; text-shadow: 0 0 7px rgba(225,231,238,.45), 0 0 13px rgba(225,231,238,.18); }
.platform-tag { font-size: 11px; opacity: .95; }
.platform-amd { color: #e24b56; text-shadow: 0 0 6px rgba(226,75,86,.55); }
.platform-intel { color: #4d91ff; text-shadow: 0 0 6px rgba(77,145,255,.55); }
.platform-neutral { color: #aeb8c2; }
body.theme-light .manufacturer-board { color: #3c4854; text-shadow: 0 0 7px rgba(60,72,84,.22); }


/* v1.8.18 — AI training */
.earn-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:12px 0 14px; }
.ai-area { margin-top:12px; }
.ai-status-card { padding:14px; border:1px solid #303943; border-radius:11px; background:#11161a; }
.ai-status-card.ai-active { min-height:320px; }
.ai-summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start; }
.ai-summary > div { display:grid; gap:4px; }
.ai-summary b { font-size:18px; }
.ai-summary span { color:#8f99a3; font-size:12px; line-height:1.4; }
.ai-requirement { margin:12px 0; padding:10px; border-radius:9px; border:1px solid #37414b; }
.ai-requirement.ai-ok { border-color:#4d8b68; background:#14231b; }
.ai-requirement.ai-locked { border-color:#8a4d4d; background:#251616; }
.ai-wires-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px 0 10px; }
.ai-wire-col { display:grid; gap:8px; }
.ai-wire-col b { font-size:13px; color:#aeb8c2; }
.ai-wire-btn,.ai-wire-target { min-height:44px; border:1px solid var(--wire-color,#394550); border-radius:9px; background:#171d22; color:#eef3f6; font-weight:700; position:relative; overflow:hidden; padding-left:28px; text-align:left; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; }
.ai-wire-btn::before { content:''; position:absolute; left:9px; top:50%; width:13px; height:13px; transform:translateY(-50%); border-radius:50%; background:var(--wire-color,#697580); box-shadow:0 0 9px color-mix(in srgb, var(--wire-color,#697580) 65%, transparent); }
.ai-wire-target::before { content:''; position:absolute; left:9px; top:50%; width:13px; height:13px; transform:translateY(-50%); border-radius:50%; border:3px solid var(--wire-color,#697580); background:#11161a; box-sizing:border-box; }
.ai-wire-btn:hover,.ai-wire-target:hover { border-color:var(--wire-color,#697580); transform:translateY(-1px); box-shadow:0 0 14px color-mix(in srgb, var(--wire-color,#697580) 24%, transparent); }
.ai-wire-btn:focus-visible,.ai-wire-target:focus-visible { outline:2px solid var(--wire-color,#fff); outline-offset:2px; }
.ai-word-task,.ai-download-task,.ai-file-task { margin-top:22px; }
.ai-word-task { display:grid; gap:10px; max-width:520px; margin-left:auto; margin-right:auto; }
.ai-word-prompt { padding:18px; border:1px dashed #697580; border-radius:10px; text-align:center; font-size:26px; font-weight:900; letter-spacing:.03em; }
.ai-task-status { min-height:20px; margin-top:10px; text-align:center; color:#aeb8c2; font-size:12px; }
.ai-download-task { text-align:center; }
.ai-download-percent { font-size:44px; font-weight:900; margin-bottom:12px; }
.ai-download-bar { height:12px; overflow:hidden; border-radius:999px; background:#303943; }
.ai-download-bar > div { height:100%; background:#4aa879; transition:width .05s linear; }
.ai-file-task { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:center; max-width:620px; margin-left:auto; margin-right:auto; }
.ai-file,.ai-folder { min-height:120px; display:grid; place-items:center; border:2px dashed #4a5662; border-radius:12px; background:#171d22; font-weight:800; user-select:none; }
.ai-file { cursor:grab; touch-action:none; }
.ai-file.selected { border-color:#5e9ee8; }
.ai-file.dragging { cursor:grabbing; transform:scale(.98); }
.ai-folder { touch-action:none; }
.ai-folder.drop-ready { border-color:#4aa879; box-shadow:0 0 0 2px rgba(74,168,121,.2), 0 0 18px rgba(74,168,121,.25); }
.ai-file-arrow { font-size:28px; color:#8f99a3; }
.ai-window-stack { position:relative; min-height:220px; margin:20px auto 0; max-width:640px; }
.ai-fake-window { position:absolute; width:48%; padding:14px; border:1px solid #56636f; border-radius:10px; background:#171d22; box-shadow:0 12px 30px rgba(0,0,0,.28); }
.ai-fake-window:first-child { left:2%; top:12px; transform:rotate(-1deg); }
.ai-fake-window:nth-child(2) { right:2%; top:70px; transform:rotate(1deg); }
.ai-fake-window.closed { opacity:.12; pointer-events:none; transform:scale(.94); }
.ai-fake-window p { color:#8f99a3; font-size:12px; min-height:32px; }
body.theme-light .ai-status-card { background:#fff; color:#1b242c; border-color:#cbd3da; }
body.theme-light .ai-summary span, body.theme-light .ai-task-status { color:#65707a; }
body.theme-light .ai-wire-btn, body.theme-light .ai-wire-target, body.theme-light .ai-file, body.theme-light .ai-folder, body.theme-light .ai-fake-window { background:#f5f7f8; color:#1b242c; border-color:#cbd3da; }
@media (max-width: 700px) {
  .earn-tabs { grid-template-columns:1fr; }
  .ai-wires-grid { grid-template-columns:1fr; }
  .ai-file-task { grid-template-columns:1fr; }
  .ai-file-arrow { transform:rotate(90deg); text-align:center; }
  .ai-fake-window { width:76%; }
  .ai-fake-window:nth-child(2) { right:0; }
}

.ai-badge-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:center}.ai-boost{color:#8fb4ff;border-color:#5877b5;box-shadow:0 0 8px rgba(88,119,181,.28)}.xeon-boost{color:#9d8bff;border-color:#6650a6;box-shadow:0 0 8px rgba(102,80,166,.28)}


/* CPU бонусы для активного заработка */
.cpu-purple-bonus { color: #b875ff; text-shadow: 0 0 7px rgba(184,117,255,.75), 0 0 15px rgba(184,117,255,.42); font-weight: 800; white-space: nowrap; }
.reward-bonus-active { box-shadow: 0 0 10px rgba(184,117,255,.16); }

.hardcore-confirm-window { width:min(560px,100%); }
.hardcore-warning { padding:14px; border:1px solid #5b3e3e; border-radius:10px; background:#211719; }
.hardcore-warning p { margin:0 0 10px; }
.hardcore-warning p:last-child { margin-bottom:0; }
.hardcore-confirm-actions { display:grid; gap:8px; margin-top:14px; }
.hardcore-confirm-actions .primary, .hardcore-confirm-actions .small { width:100%; }
body.theme-light .hardcore-warning { border-color:#d9bcbc; background:#fff4f4; }


/* v1.10.0: купоны и таймер реакции */
.reaction-window-timer { font-size:13px; font-weight:700; color:#a9b5c0; min-height:20px; }
body.theme-light .reaction-window-timer { color:#65707a; }
.purchase-coupon-window { width:min(560px,100%); }
.purchase-price-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:18px 0; }
.purchase-price-grid > div { padding:14px; border:1px solid #39434d; border-radius:12px; display:grid; gap:6px; background:#151b20; }
.purchase-price-grid span { color:#8f99a3; font-size:12px; }
.purchase-price-grid b { font-size:22px; }
.purchase-price-grid .coupon-price { border-color:#8b54c7; box-shadow:0 0 14px rgba(184,117,255,.22); }
.purchase-price-grid .coupon-price b, .purchase-price-grid .coupon-price span { color:#b875ff; }
.purchase-coupon-note { color:#8f99a3; font-size:13px; }
.purchase-coupon-actions { display:grid; gap:8px; padding:0 18px 18px; }
@media (max-width:700px) { .purchase-price-grid { grid-template-columns:1fr; } }


/* v1.10.1: уведомление о получении купона */
.coupon-received-window { width:min(560px,100%); }
.coupon-received-actions { display:grid; gap:8px; padding:0 18px 18px; }
.coupon-received-actions .primary { width:100%; }

.shop-actions .danger { border-color:#7a3f49; }
.shop-actions{flex-wrap:wrap;}


.os-options { display: grid; gap: 10px; }
.os-option { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px solid #303943; border-radius: 10px; background: #171c21; text-align: left; }
.os-option:hover, .os-option.active { border-color: #66727e; background: #1b2228; }
.os-option strong { font-size: 16px; }
.os-option span { color: #98a2ad; font-size: 13px; }
.os-part b { color: #d9e1e8; }


/* v1.14.0 — EXTRA COUPON */
.extra-coupon-button {
  border-color: #b875ff;
  color: #d5a8ff;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(184,117,255,.55);
  box-shadow: 0 0 12px rgba(184,117,255,.18);
}
.extra-coupon-button:hover {
  border-color: #d5a8ff;
  background: #2a2035;
  box-shadow: 0 0 18px rgba(184,117,255,.28);
}
.extra-coupon-purchase-window { width:min(560px,100%); }
.extra-coupon-price {
  display:grid;
  gap:6px;
  margin:18px 0;
  padding:16px;
  border:1px solid #8b54c7;
  border-radius:12px;
  background:#1b1522;
  box-shadow:0 0 18px rgba(184,117,255,.14);
}
.extra-coupon-price span { color:#c6a5e7; font-size:12px; }
.extra-coupon-price b { font-size:28px; color:#d5a8ff; }
.extra-coupon-note { color:#9faab4; font-size:13px; line-height:1.45; }
.extra-coupon-purchase-actions { display:grid; gap:8px; padding:0 18px 18px; }
.extra-coupon-purchase-actions .primary, .extra-coupon-purchase-actions .small { width:100%; }
.extra-coupon-toast {
  position:fixed;
  top:50%;
  left:50%;
  z-index:5003;
  width:min(430px,calc(100vw - 28px));
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  border:2px solid #b875ff;
  border-radius:18px;
  background:rgba(20,15,27,.96);
  color:#f3e8ff;
  box-shadow:0 0 0 1px rgba(184,117,255,.18),0 20px 70px rgba(0,0,0,.55),0 0 36px rgba(184,117,255,.26);
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;
  pointer-events:none;
}
.extra-coupon-toast.show { animation:extraCouponPop 3.6s ease forwards; }
.extra-coupon-toast-icon { flex:0 0 auto; font-size:44px; line-height:1; filter:drop-shadow(0 0 10px rgba(184,117,255,.7)); }
.extra-coupon-toast-text { min-width:0; display:grid; gap:5px; }
.extra-coupon-toast-text strong { font-size:22px; letter-spacing:.05em; }
.extra-coupon-toast-text span { color:#d7cde0; font-size:13px; line-height:1.4; }
@keyframes extraCouponPop {
  0% { transform:translate(-50%,-50%) scale(.65) rotate(-2deg); opacity:0; }
  12% { transform:translate(-50%,-50%) scale(1.04) rotate(1deg); opacity:1; }
  20% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; }
  78% { transform:translate(-50%,-50%) scale(1) rotate(0); opacity:1; }
  100% { transform:translate(-50%,-56%) scale(.94) rotate(1deg); opacity:0; }
}
.sell-blocked-window { width:min(560px,100%); }
.sell-blocked-card {
  padding:18px;
  border:1px solid #7a3f49;
  border-radius:14px;
  background:#251719;
  text-align:center;
}
.sell-blocked-icon { font-size:40px; margin-bottom:8px; }
.sell-blocked-card h3 { margin:0 0 8px; }
.sell-blocked-card p { margin:0; color:#c4aeb2; line-height:1.45; }
.sell-blocked-actions { display:grid; gap:8px; padding:0 18px 18px; }
.sell-blocked-actions .primary { width:100%; }
body.theme-light .extra-coupon-toast { background:rgba(250,247,253,.97); color:#2a2430; }
body.theme-light .extra-coupon-toast-text span { color:#5e5465; }
body.theme-light .extra-coupon-price { background:#faf6ff; }
body.theme-light .sell-blocked-card { background:#fff4f4; border-color:#d8afb4; }
body.theme-light .sell-blocked-card p { color:#6a5559; }
@media (max-width:700px) {
  .extra-coupon-toast { top:auto; bottom:18px; transform:translate(-50%,0) scale(.82); }
  .extra-coupon-toast.show { animation:extraCouponPopMobile 3.6s ease forwards; }
}
@keyframes extraCouponPopMobile {
  0% { transform:translate(-50%,12px) scale(.65); opacity:0; }
  12% { transform:translate(-50%,0) scale(1.04); opacity:1; }
  20% { transform:translate(-50%,0) scale(1); opacity:1; }
  78% { transform:translate(-50%,0) scale(1); opacity:1; }
  100% { transform:translate(-50%,6px) scale(.94); opacity:0; }
}
.event-coupon_giveaway { border-color:#8b54c7; }
body.theme-light .event-coupon_giveaway { border-color:#aa82c8; }


/* v1.14.1 — coupons + OS installation */
.pc-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pc-coupons { display:inline-flex; align-items:center; gap:6px; min-height:24px; }
.pc-coupon { display:inline-flex; align-items:center; padding:4px 8px; border-radius:999px; font-size:11px; font-weight:900; letter-spacing:.02em; }
.pc-coupon-normal { color:#8ff0ae; border:1px solid #4f9d6a; background:#13241a; text-shadow:0 0 7px rgba(96,220,133,.7); box-shadow:0 0 10px rgba(96,220,133,.16); }
.pc-coupon-extra { color:#d7a8ff; border:1px solid #9a5fca; background:#21142b; text-shadow:0 0 8px rgba(184,117,255,.7); box-shadow:0 0 12px rgba(184,117,255,.18); }
.os-install-modal { z-index:5005; }
.os-install-window { width:min(560px,100%); }
.os-install-body { text-align:center; }
.os-install-body p { color:#b9c2cb; line-height:1.5; }
.os-install-progress { height:14px; overflow:hidden; border:1px solid #37424d; border-radius:999px; background:#10161b; box-shadow:inset 0 0 0 1px rgba(255,255,255,.02); }
.os-install-progress > div { height:100%; width:0; border-radius:inherit; background:#71b6ff; box-shadow:0 0 14px rgba(113,182,255,.32); transition:width .05s linear; }
.os-install-status { margin-top:9px; color:#8f99a3; font-size:13px; }
.extra-coupon-both { border-color:#5f9d6e; color:#9be6ad; box-shadow:0 0 12px rgba(96,220,133,.12); }
.extra-coupon-both:hover { background:#17271b; border-color:#7ac58b; }
.extra-coupon-discounted-price { display:grid; gap:6px; margin:0 0 14px; padding:14px 16px; border:1px solid #4f9d6a; border-radius:12px; background:#13241a; box-shadow:0 0 15px rgba(96,220,133,.10); }
.extra-coupon-discounted-price span { color:#8fd59e; font-size:12px; }
.extra-coupon-discounted-price b { font-size:24px; color:#9be6ad; }
.extra-coupon-toast.coupon-normal { border-color:#53ad70; color:#e4ffeb; box-shadow:0 0 0 1px rgba(83,173,112,.18),0 20px 70px rgba(0,0,0,.55),0 0 36px rgba(83,173,112,.24); }
.extra-coupon-toast.coupon-normal .extra-coupon-toast-icon { filter:drop-shadow(0 0 10px rgba(83,173,112,.7)); }
.extra-coupon-toast.coupon-normal .extra-coupon-toast-text strong { text-shadow:0 0 9px rgba(96,220,133,.62); }
.extra-coupon-toast.coupon-normal .extra-coupon-toast-text span { color:#cfe8d5; }

body.theme-light .pc-coupon-normal { color:#27783f; border-color:#6eac80; background:#edf9f0; text-shadow:none; box-shadow:0 0 10px rgba(55,150,82,.14); }
body.theme-light .pc-coupon-extra { color:#71409e; border-color:#aa82c8; background:#f7effc; text-shadow:none; box-shadow:0 0 12px rgba(145,83,187,.14); }
body.theme-light .os-install-progress { background:#edf1f4; border-color:#c6d0d8; }
body.theme-light .os-install-progress > div { background:#5d9be0; }

.mobile-game-controls { display:none; margin:10px auto 0; width:min(360px,100%); grid-template-columns:repeat(3,1fr); gap:8px; touch-action:none; user-select:none; }
.mobile-game-controls .mobile-game-control { min-height:48px; border:1px solid #39434d; border-radius:10px; background:#20272e; color:#e8edf2; font-size:20px; font-weight:800; touch-action:none; user-select:none; -webkit-user-select:none; }
.mobile-game-controls .mobile-game-control:active, .mobile-game-controls .mobile-game-control.pressed { transform:scale(.96); background:#29333c; }
.mobile-controls-1 { grid-template-columns:1fr; max-width:150px; }
.mobile-controls-2 { grid-template-columns:repeat(2,1fr); max-width:240px; }
.mobile-controls-4 { grid-template-columns:repeat(3,1fr); max-width:300px; }
.mobile-controls-5 { grid-template-columns:repeat(3,1fr); max-width:320px; }
@media (max-width:760px) {
  .mobile-game-controls { display:grid; }
  .arcade-canvas { touch-action:none; }
  .game-area { overflow-x:hidden; }
}


/* Component compatibility highlighting — Easy mode */
.shop-item.compatibility-item-good { border-left: 3px solid #47c97b; padding-left: 10px; box-shadow: inset 4px 0 0 rgba(71,201,123,.12); }
.shop-item.compatibility-item-partial { border-left: 3px solid #e8a447; padding-left: 10px; box-shadow: inset 4px 0 0 rgba(232,164,71,.12); }
.shop-item.compatibility-item-bad { border-left: 3px solid #d85a63; padding-left: 10px; box-shadow: inset 4px 0 0 rgba(216,90,99,.12); }
.compatibility-tag { display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; font-size:11px; font-weight:700; }
.compatibility-good { color:#65d991; background:rgba(71,201,123,.10); box-shadow:0 0 9px rgba(71,201,123,.18); }
.compatibility-partial { color:#f0b75e; background:rgba(232,164,71,.11); box-shadow:0 0 9px rgba(232,164,71,.18); }
.compatibility-bad { color:#ef7a83; background:rgba(216,90,99,.10); box-shadow:0 0 9px rgba(216,90,99,.16); }
.compatibility-warning-list { display:grid; gap:8px; margin:12px 0; padding:0; list-style:none; }
.compatibility-warning-list li { padding:10px 12px; border:1px solid #443438; border-radius:8px; background:#1a1518; }
.compatibility-warning-list li b, .compatibility-warning-list li span { display:block; }
.compatibility-warning-list li span { margin-top:3px; color:#aeb8c2; font-size:12px; }
.compatibility-purchase-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 16px; }
body.theme-light .shop-item.compatibility-item-good { border-left-color:#2f9a5f; }
body.theme-light .shop-item.compatibility-item-partial { border-left-color:#b77b22; }
body.theme-light .shop-item.compatibility-item-bad { border-left-color:#b9434b; }
body.theme-light .compatibility-warning-list li { background:#f4f6f8; border-color:#d8dde1; }
body.theme-light .compatibility-warning-list li span { color:#59636d; }
@media (max-width:760px) { .compatibility-purchase-actions { grid-template-columns:1fr; } }


/* v1.15.0 — programming + mobile catalog overflow fixes */
.shop-window, .shop-item, .shop-items-grid, .catalog-tree, .catalog-node { min-width:0; max-width:100%; }
.shop-item > div:first-child, .item-name, .item-desc, .catalog-node strong, .catalog-node span { min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.shop-item { overflow:hidden; }
.shop-buy { max-width:100%; white-space:normal; }
@media (max-width:760px) {
  .shop-item { grid-template-columns:minmax(0,1fr); gap:8px; }
  .shop-item > .shop-actions, .shop-item > button, .shop-buy { width:100%; min-width:0; }
  .shop-item .shop-actions { display:grid; grid-template-columns:1fr; }
  .catalog-tabs { overflow-x:hidden; }
}
.programming-area { min-width:0; }
.programming-card { padding:14px; border:1px solid #303943; border-radius:11px; background:#11161a; min-width:0; }
.programming-summary { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.programming-summary b { display:block; font-size:18px; margin-bottom:5px; }
.programming-summary span { color:#8f99a3; font-size:13px; line-height:1.45; }
.programming-badge-row { display:flex; gap:7px; flex-wrap:wrap; }
.programming-requirement { margin-top:12px; padding:11px 12px; border:1px solid #4a3b55; border-radius:9px; line-height:1.45; }
.programming-requirement.locked { color:#c8b8cd; background:#18151a; }
.programming-editor-wrap { position:relative; margin-top:12px; min-height:170px; overflow:hidden; border:1px solid #39434d; border-radius:9px; background:#0d1217; }
.programming-reference-overlay, .programming-editor { box-sizing:border-box; width:100%; min-height:170px; margin:0; padding:12px; font:13px/1.55 Consolas,Monaco,monospace; white-space:pre-wrap; overflow:auto; overflow-wrap:anywhere; tab-size:2; }
.programming-reference-overlay { position:absolute; inset:0; z-index:1; pointer-events:none; color:rgba(210,220,230,.30); border:0; }
.programming-editor { position:relative; z-index:2; resize:vertical; border:0; outline:none; background:transparent; color:#e8edf2; caret-color:#fff; }
.programming-editor::placeholder { color:rgba(200,210,220,.38); }
.programming-editor:focus { box-shadow:inset 0 0 0 1px #697580; }
.programming-editor-note { margin-top:7px; color:#7f8993; font-size:12px; line-height:1.45; }
.programming-editor-note code { color:#a9b4be; }
.code-keyword { color:rgba(120,183,255,.52); }
.code-string { color:rgba(155,224,168,.52); }
.code-number { color:rgba(215,174,255,.52); }
.programming-actions { display:grid; grid-template-columns:1fr 180px; gap:8px; margin-top:8px; }
.programming-status { margin-top:8px; min-height:20px; color:#aeb8c2; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.programming-status code { color:#9bd6a5; }
body.theme-light .programming-card { background:#f4f6f8; border-color:#c8d0d8; }
body.theme-light .programming-editor-wrap { background:#fff; border-color:#c3cbd2; }
body.theme-light .programming-reference-overlay { color:rgba(45,55,65,.25); }
body.theme-light .programming-editor { color:#20262c; caret-color:#20262c; }
body.theme-light .programming-editor::placeholder { color:rgba(70,80,90,.38); }
body.theme-light .programming-summary span, body.theme-light .programming-status, body.theme-light .programming-editor-note { color:#65707a; }
@media (max-width:700px) { .programming-actions { grid-template-columns:1fr; } .programming-editor-wrap,.programming-reference-overlay,.programming-editor { min-height:190px; } }

/* v1.15.3 — active-line programming guide */
.programming-reference-overlay { opacity:0; transition:opacity .08s ease; pointer-events:none; }
.programming-editor:focus ~ .programming-reference-overlay { opacity:1; }
.programming-editor-wrap { isolation:isolate; }

/* v1.15.3 — exact programming input + responsive earning reward badges */
#rewardInfo {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
  text-align: right;
}
#rewardInfo .cpu-purple-bonus {
  white-space: normal;
  overflow-wrap: anywhere;
}
.programming-editor-note { min-height: 18px; }

@media (max-width: 700px) {
  .mini-games-panel .panel-title { align-items: flex-start; gap: 8px; }
  .mini-games-panel .panel-title h2 { min-width: 0; }
  #rewardInfo { flex: 1 1 100%; width: 100%; text-align: left; }
  .programming-summary { flex-direction: column; }
  .programming-badge-row { width: 100%; }
  .programming-badge-row .badge { white-space: normal; overflow-wrap: anywhere; }
  .programming-editor-wrap { min-height: 190px; }
  .programming-reference-overlay, .programming-editor { min-height: 190px; font-size: 12px; line-height: 1.55; }
}


/* v1.16.0 — black market */
.shop-launch-buttons { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.black-market-button { background:#050505; border-color:#2d2d2d; color:#f2f2f2; box-shadow: inset 0 0 0 1px #111; transition: box-shadow .2s ease, transform .2s ease, opacity .2s ease; }
.black-market-button.black-market-locked { opacity:.58; cursor:not-allowed; filter:grayscale(.45); }
.black-market-button.black-market-ready { box-shadow: 0 0 18px rgba(0,0,0,.95), 0 0 34px rgba(0,0,0,.7), inset 0 0 16px rgba(255,255,255,.08); animation:blackMarketPulse 1.6s ease-in-out infinite; }
@keyframes blackMarketPulse { 0%,100% { transform:translateY(0); box-shadow:0 0 14px rgba(0,0,0,.9), inset 0 0 14px rgba(255,255,255,.05); } 50% { transform:translateY(-1px); box-shadow:0 0 28px rgba(0,0,0,1), inset 0 0 20px rgba(255,255,255,.1); } }
.shop-window.black-market-window { position:relative; overflow:hidden; background:#090909; border-color:#2b2b2b; }
.shop-window.black-market-window::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.18; background-image: radial-gradient(circle at 14% 18%, transparent 0 18px, rgba(255,255,255,.12) 19px 21px, transparent 22px), radial-gradient(circle at 76% 68%, transparent 0 26px, rgba(255,255,255,.08) 27px 30px, transparent 31px), linear-gradient(135deg, transparent 48%, rgba(255,255,255,.08) 49%, transparent 50%), linear-gradient(45deg, transparent 48%, rgba(255,255,255,.06) 49%, transparent 50%); background-size:auto,auto,150px 150px,120px 120px; }
.shop-window.black-market-window > * { position:relative; z-index:1; }
.black-market-breadcrumb-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border:1px solid #3a3a3a; border-radius:999px; background:#070707; color:#ddd; box-shadow:0 0 12px rgba(0,0,0,.7); }
.black-market-item { border-color:#252525 !important; background:rgba(8,8,8,.82) !important; }
.black-market-price-note { color:#bbb; font-weight:700; }
.black-market-buy { background:#0a0a0a !important; border-color:#444 !important; }
.inventory-source { display:inline-flex; align-items:center; padding:2px 7px; margin-left:5px; border-radius:999px; font-size:.74em; font-weight:800; letter-spacing:.02em; }
.inventory-source-catalog { background:rgba(85,170,255,.14); border:1px solid rgba(85,170,255,.28); color:#8fc8ff; }
.inventory-source-black { background:rgba(0,0,0,.7); border:1px solid #444; color:#f2f2f2; box-shadow:0 0 8px rgba(0,0,0,.9); }
.black-market-fire-modal { z-index: 1200; }
.black-market-fire-modal-window { width:min(900px, calc(100vw - 24px)); }
.black-market-fire-body { overflow:hidden; }
.black-market-fire-area { position:relative; min-height:420px; height:min(58vh,520px); border:1px solid #4c1818; border-radius:14px; overflow:hidden; background:repeating-linear-gradient(135deg, rgba(255,80,40,.04) 0 8px, transparent 8px 18px), #120909; box-shadow:inset 0 0 60px rgba(255,50,20,.15); }
.black-market-fire-window { position:absolute; width:54px; height:38px; border:1px solid #7b7b7b; border-radius:8px; background:#e9e9e9; color:#151515; font-weight:900; font-size:18px; cursor:pointer; box-shadow:0 5px 12px rgba(0,0,0,.45); }
.black-market-fire-window:hover { transform:scale(1.06) !important; }
.black-market-fire-window.closed { opacity:.18; transform:scale(.7) !important; pointer-events:none; }
.achievement-child-toggle { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:.85rem; opacity:.8; }
.achievement-child-arrow { width:34px; height:30px; border:1px solid #444; border-radius:8px; background:rgba(255,255,255,.04); color:inherit; cursor:pointer; font-size:20px; line-height:1; transition:transform .3s ease, background .2s ease; }
.achievement-child-arrow.expanded { transform:rotate(180deg); background:rgba(255,255,255,.1); }
.achievement-child-wrap { display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .35s ease, opacity .25s ease; overflow:hidden; }
.achievement-child-wrap.expanded { grid-template-rows:1fr; opacity:1; }
.achievement-child-wrap > .achievement-card { min-height:0; overflow:hidden; margin-top:8px; }
@media (max-width:760px) {
  .shop-launch-buttons { display:grid; grid-template-columns:1fr; width:100%; }
  .shop-launch-buttons > button { width:100%; }
  .black-market-fire-modal-window { width:calc(100vw - 14px); }
  .black-market-fire-area { min-height:300px; height:58vh; }
  .black-market-fire-window { width:46px; height:34px; font-size:15px; }
  .inventory-source { display:inline-flex; margin-left:3px; }
  .achievement-child-toggle { margin-top:8px; }
}


/* v1.16.1 — black market, police debt, achievements and source colors */
.shop-launch-buttons { display:flex; flex-direction:row; justify-content:flex-start; gap:10px; align-items:center; flex-wrap:wrap; }
.inventory-source-catalog { background:rgba(71,201,123,.12); border:1px solid rgba(71,201,123,.34); color:#79df99; box-shadow:0 0 10px rgba(71,201,123,.12); }
.inventory-source-black { background:#030303; border:1px solid #444; color:#f3f3f3; box-shadow:0 0 12px rgba(0,0,0,.95), inset 0 0 8px rgba(255,255,255,.05); text-shadow:0 0 8px rgba(255,255,255,.35); }
.black-market-breadcrumb-chip { color:#fff; box-shadow:0 0 14px rgba(0,0,0,.9), inset 0 0 10px rgba(255,255,255,.04); }
.debt-payout-penalty { color:#ff8d8d; font-weight:800; }
#money.debt-balance { color:#ff8080; text-shadow:0 0 10px rgba(255,70,70,.25); }
.black-market-police-warning-window { width:min(620px, calc(100vw - 24px)); border-color:#5a4a28; }
.black-market-police-warning-modal .menu-modal-backdrop { background:rgba(0,0,0,.72); }
.police-warning-checkbox { display:flex; align-items:center; gap:9px; margin:0 16px 14px; font-size:13px; color:#b9c0c7; }
.police-warning-checkbox input { width:18px; height:18px; accent-color:#6d806d; }
.police-warning-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 16px; }
.black-market-police-fine-window { width:min(560px, calc(100vw - 24px)); border-color:#8e3f42; box-shadow:0 20px 70px rgba(0,0,0,.7), 0 0 30px rgba(220,40,40,.16); }
.black-market-police-fine-modal .menu-modal-backdrop { background:rgba(5,0,0,.86); }
.police-fine-actions { padding:0 16px 16px; }
.police-fine-actions .primary { width:100%; }
.achievement-progress-bar span { background:#5dff82; box-shadow:0 0 9px rgba(93,255,130,.2); }
.achievement-child-wrap { display:block; max-height:0; opacity:0; overflow:hidden; transition:max-height .38s ease, opacity .26s ease; }
.achievement-child-wrap.expanded { max-height:600px; opacity:1; }
.achievement-child-wrap > .achievement-card { margin-top:8px; }
@media (max-width:760px) {
  .shop-launch-buttons { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; }
  .shop-launch-buttons > button { width:100%; min-width:0; }
  .police-warning-actions { grid-template-columns:1fr; }
  .black-market-police-warning-window, .black-market-police-fine-window { width:calc(100vw - 14px); }
  .achievement-child-wrap.expanded { max-height:900px; }
}


/* v1.16.2 — modular UI polish */
.shop-launch-buttons { display:inline-flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:10px; flex-wrap:nowrap; min-width:0; }
.shop-launch-buttons > button { flex:0 1 auto; min-width:0; }
.inventory-source { display:inline-flex; align-items:center; justify-content:center; min-height:22px; padding:3px 9px; margin-left:7px; border-radius:999px; font-size:.68rem; line-height:1; font-weight:900; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle; white-space:nowrap; }
.inventory-source-catalog { background:linear-gradient(180deg, rgba(71,201,123,.22), rgba(71,201,123,.08)); border:1px solid rgba(91,225,143,.48); color:#84e8a3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025), 0 0 12px rgba(71,201,123,.12); text-shadow:0 0 7px rgba(71,201,123,.25); }
.inventory-source-black { background:linear-gradient(180deg,#171717,#050505); border:1px solid #505050; color:#f7f7f7; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 12px rgba(0,0,0,.85); text-shadow:0 0 7px rgba(255,255,255,.25); }
.achievement-child-arrow { border-color:#4c5660; background:#13181d; color:#eef2f5; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.22); }
.achievement-child-arrow:hover { background:#1b2229; border-color:#697580; }
body.theme-light .achievement-child-arrow { border-color:#bec7cf; background:#eef2f5; color:#263039; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 2px 8px rgba(40,50,60,.08); }
body.theme-light .achievement-child-arrow:hover { background:#e3e8ec; border-color:#9da8b1; }
.achievement-child-arrow.expanded { color:inherit; }
@media (max-width:760px) { .shop-launch { align-items:stretch; } .shop-launch-buttons { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); width:100%; } .shop-launch-buttons > button { width:100%; } .inventory-source { margin-left:4px; padding-inline:7px; font-size:.64rem; } }
@media (max-width:420px) { .shop-launch-buttons { grid-template-columns:1fr 1fr; gap:7px; } .shop-launch-buttons > button { padding-inline:8px; font-size:12px; } .inventory-source { font-size:.6rem; letter-spacing:.06em; } }

/* v1.16.2 — shop button + black market scrollbar fixes */
.shop-launch-buttons > button {
  width: auto;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;
}

.shop-window.black-market-window {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4d4d4d #0f0f0f;
}

.shop-window.black-market-window::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

.shop-window.black-market-window::-webkit-scrollbar-track {
  background: #0f0f0f;
}

.shop-window.black-market-window::-webkit-scrollbar-thumb {
  background: #4d4d4d;
  border: 3px solid #0f0f0f;
  border-radius: 999px;
}

.shop-window.black-market-window::-webkit-scrollbar-thumb:hover {
  background: #6a6a6a;
}

@media (max-width: 760px) {
  .shop-launch-buttons > button {
    width: 100%;
  }
}


/* ===== v1.17.3 onboarding / light mode / exam ===== */
.earn-header-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.exam-inline{display:none;white-space:nowrap}
.exam-inline.ready{display:inline-flex;animation:examReadyPulse 1.4s ease-in-out infinite}
.exam-inline:disabled{cursor:default;opacity:.55}
@keyframes examReadyPulse{0%,100%{transform:translateY(0);box-shadow:0 0 0 rgba(180,40,40,0)}50%{transform:translateY(-1px);box-shadow:0 0 16px rgba(180,40,40,.35)}}

.light-mode-section{display:none;margin-top:14px;padding:14px;border:1px solid #4a5d49;border-radius:12px;background:linear-gradient(145deg,#172019,#151b17)}
.light-mode-section.active{display:block}
.light-mode-intro{display:flex;gap:12px;align-items:flex-start}
.light-mode-icon{font-size:26px;line-height:1}
.light-mode-intro h3{margin:0 0 6px;font-size:18px}
.light-mode-intro p{margin:0;color:#b8c4ba;line-height:1.55}
.light-clicker-card{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;margin-top:14px;padding:12px;border:1px solid #34443a;border-radius:10px;background:#111713}
.light-clicker-card strong,.light-clicker-card span{display:block}
.light-clicker-card span{color:#a8b2aa;font-size:13px;line-height:1.4;margin-top:3px}
.light-clicker-btn{min-width:130px}
.light-clicker-count{white-space:nowrap}

.first-visit-intro{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:24px;pointer-events:auto;background:rgba(0,0,0,.34)}
.first-visit-intro.hidden{display:none}
.first-visit-card{width:min(720px,100%);padding:28px;border:1px solid #394550;border-radius:16px;background:#171c21;box-shadow:0 18px 60px rgba(0,0,0,.32);pointer-events:auto}
.first-visit-badge{display:inline-block;padding:5px 9px;border-radius:999px;background:#252d35;color:#aeb8c1;font-size:12px;letter-spacing:.04em}
.first-visit-card h2{margin:14px 0 10px;font-size:28px}
.first-visit-card p{margin:0;max-width:65ch;color:#c8d0d7;line-height:1.7}
.first-visit-card .primary{margin-top:20px;min-width:130px}
.first-visit-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.first-visit-actions .primary,.first-visit-actions .small{margin-top:0}
.first-visit-actions .small{min-height:44px}

.light-coach{position:fixed;right:20px;bottom:20px;z-index:8500;width:min(420px,calc(100vw - 40px));padding:14px 16px;border:1px solid #3b4a56;border-radius:12px;background:#171c21;box-shadow:0 14px 40px rgba(0,0,0,.26);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.light-coach.show{opacity:1;transform:translateY(0);pointer-events:auto}
.light-coach-kind{margin-bottom:5px;color:#94a4b1;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.light-coach strong{display:block;font-size:17px;margin-bottom:5px}
.light-coach p{margin:0;color:#c6ced5;line-height:1.55}

.exam-overlay{z-index:9200}
.exam-window{width:min(820px,calc(100vw - 28px));max-height:min(88vh,900px);overflow:auto}
.exam-body{padding-bottom:12px}
.exam-intro h3{margin:0 0 12px;font-size:22px}
.exam-intro p,.exam-warning{line-height:1.6;color:#c6ced5}
.exam-warning{padding:12px;border-left:3px solid #b94848;border-radius:8px;background:#241719;margin:12px 0}
.exam-actions,.exam-next-wrap{display:flex;gap:10px;justify-content:flex-end;padding:0 16px 16px;flex-wrap:wrap}
.exam-screen-stage{min-height:360px}
.exam-stage-note{margin-bottom:12px;color:#9eabb6}
.exam-components{display:grid;gap:7px}
.exam-component-slot{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:center;padding:11px 13px;border:1px solid #2e3841;border-radius:9px;background:#11161a;opacity:.8}
.exam-component-slot .num{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:#222a31;color:#9ea8b1;font-size:12px;font-weight:700}
.exam-component-slot .name{color:#aab4bd;min-height:20px}
.exam-component-slot.selected{opacity:1;border-color:#667580;background:#192027}
.exam-component-slot.reveal .name{font-size:17px;font-weight:800;color:#f0f4f7;animation:examNameReveal .45s ease}
.exam-component-slot.reveal .num{background:#33404a;color:#fff}
@keyframes examNameReveal{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:translateX(0)}}
.exam-results{display:grid;gap:10px}
.exam-criteria-item{padding:13px;border:1px solid #303a43;border-radius:10px;background:#12171b;animation:examCriterionReveal .45s ease}
.exam-criteria-item.positive{border-color:#385a45;background:#121a15}
.exam-criteria-item.negative{border-color:#6a3c3c;background:#1b1314}
.exam-criteria-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.exam-criteria-name{font-size:17px;font-weight:800}
.exam-criteria-item.positive .exam-criteria-name{color:#82c794}
.exam-criteria-item.negative .exam-criteria-name{color:#e58989}
.exam-criteria-score{font-weight:800;white-space:nowrap}
.exam-criteria-points{margin-top:7px;color:#b9c3ca;line-height:1.5}
@keyframes examCriterionReveal{0%{opacity:0;transform:translateY(7px)}100%{opacity:1;transform:translateY(0)}}
.exam-final-score{margin-top:16px;padding:18px;border-radius:12px;border:1px solid #3e4952;background:#171e24;text-align:center}
.exam-final-score .score-number{font-size:42px;font-weight:900}
.exam-final-score .score-label{margin-top:5px;color:#b8c2ca;font-weight:700}

.exam-analysis-window{width:min(900px,calc(100vw - 28px));max-height:min(90vh,920px)}
.exam-analysis-body{max-height:min(70vh,680px);overflow-y:auto;padding-right:18px}
.exam-analysis-head{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 0 4px;font-size:19px}
.exam-analysis-head span{font-size:14px;color:#9da9b3;white-space:nowrap}
.exam-analysis-sub{margin:8px 0 14px;color:#bac4cb;line-height:1.55}
.exam-analysis-list{display:grid;gap:10px}
.exam-analysis-item{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:13px;border:1px solid #633f3f;border-radius:10px;background:#1a1415}
.exam-analysis-index{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#362224;color:#e99595;font-weight:900}
.exam-analysis-item h3{margin:0 0 6px;font-size:16px}
.exam-analysis-item p{margin:0;color:#c2cbd1;line-height:1.55}
.exam-analysis-offer{padding:14px;border:1px solid #4e5962;border-radius:10px;background:#151c21}
.exam-analysis-offer h3{margin:0 0 8px;font-size:21px}
.exam-analysis-offer p{margin:0;color:#c3ccd2;line-height:1.6}
@media(max-width:700px){.exam-analysis-head{align-items:flex-start;flex-direction:column}.exam-analysis-body{max-height:67vh}.exam-analysis-item{grid-template-columns:28px 1fr}}

@media (max-width:700px){
  .earn-header-tools{width:100%;justify-content:space-between}
  .light-clicker-card{grid-template-columns:1fr;align-items:stretch}
  .light-clicker-btn{width:100%}
  .light-clicker-count{white-space:normal}
  .first-visit-card{padding:22px}
  .first-visit-card h2{font-size:24px}
  .light-coach{right:10px;bottom:10px;width:calc(100vw - 20px)}
}

html.theme-light .first-visit-card, body.theme-light .first-visit-card,
html.theme-light .light-coach, body.theme-light .light-coach{background:#fff}
html.theme-light .first-visit-card p, body.theme-light .first-visit-card p,
html.theme-light .light-coach p, body.theme-light .light-coach p{color:#45515b}
html.theme-light .light-mode-section{background:#f5f8f5;border-color:#b9c9bb}
html.theme-light .light-clicker-card{background:#fff;border-color:#d0d9d2}
html.theme-light .light-mode-intro p{color:#536158}


/* ===== v1.17.4 mode cards / light training / exam exit ===== */
.mode-card { position:relative; overflow:hidden; color:#f4f7fa; border-color:transparent; background:#171c21; }
.mode-card.easy { background:linear-gradient(135deg,#244f35 0%,#43814f 48%,#214b32 100%); border-color:#4b8a5b; }
.mode-card.easy { --card-g1:rgba(143,255,175,.08); --card-g2:rgba(53,142,74,.20); --card-g3:rgba(212,255,222,.10); }
.mode-card.normal { --card-g1:rgba(255,224,170,.08); --card-g2:rgba(224,117,38,.20); --card-g3:rgba(255,241,207,.10); }
.mode-card.hardcore { --card-g1:rgba(255,172,180,.08); --card-g2:rgba(191,55,66,.22); --card-g3:rgba(255,219,223,.10); }
.mode-card.light { --card-g1:rgba(170,235,255,.10); --card-g2:rgba(50,150,203,.22); --card-g3:rgba(222,249,255,.12); }
.mode-card.normal { background:linear-gradient(135deg,#5a331c 0%,#bd6b26 48%,#713b1d 100%); border-color:#c57937; }
.mode-card.hardcore { background:linear-gradient(135deg,#541f22 0%,#b44248 48%,#641f25 100%); border-color:#b84d53; }
.mode-card.light { background-image:radial-gradient(circle at 85% 20%,rgba(255,255,255,.26) 0 9%,transparent 10%),radial-gradient(circle at 18% 82%,rgba(255,255,255,.14) 0 13%,transparent 14%),linear-gradient(135deg,#194f69 0%,#399ac2 48%,#1c678a 100%); border-color:#4da9cf; }
.mode-card.easy:hover { background:linear-gradient(135deg,#2a6240 0%,#4f9760 48%,#25593a 100%); border-color:#70b57f; }
.mode-card.normal:hover { background:linear-gradient(135deg,#6b3d21 0%,#d17b2e 48%,#824722 100%); border-color:#dfa05e; }
.mode-card.hardcore:hover { background:linear-gradient(135deg,#682528 0%,#c85057 48%,#75252b 100%); border-color:#dd7076; }
.mode-card.light:hover { background-image:radial-gradient(circle at 85% 20%,rgba(255,255,255,.30) 0 9%,transparent 10%),radial-gradient(circle at 18% 82%,rgba(255,255,255,.18) 0 13%,transparent 14%),linear-gradient(135deg,#215f7e 0%,#48aad3 48%,#23789f 100%); border-color:#76c7e8; }
.mode-card b,.mode-card span { position:relative; z-index:1; color:#f5f8fa; }
.mode-card span { opacity:.9; }
.light-training-window { width:min(640px,100%); }
.light-training-toggle { display:flex; align-items:flex-start; gap:10px; margin-top:16px; padding:13px; border:1px solid #3a4b57; border-radius:10px; background:#12191e; cursor:pointer; }
.light-training-toggle input { width:18px; height:18px; margin-top:2px; flex:0 0 auto; }
.light-training-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
.exam-exit-window { width:min(600px,100%); }
.exam-exit-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }
body.theme-light .mode-card { color:#fff; }
body.theme-light .mode-card.easy { background:linear-gradient(135deg,#244f35 0%,#43814f 48%,#214b32 100%); border-color:#4b8a5b; }
body.theme-light .mode-card.normal { background:linear-gradient(135deg,#5a331c 0%,#bd6b26 48%,#713b1d 100%); border-color:#c57937; }
body.theme-light .mode-card.hardcore { background:linear-gradient(135deg,#541f22 0%,#b44248 48%,#641f25 100%); border-color:#b84d53; }
body.theme-light .mode-card.light { background-image:radial-gradient(circle at 85% 20%,rgba(255,255,255,.30) 0 9%,transparent 10%),radial-gradient(circle at 18% 82%,rgba(255,255,255,.17) 0 13%,transparent 14%),linear-gradient(135deg,#194f69 0%,#399ac2 48%,#1c678a 100%); border-color:#4da9cf; }
body.theme-light .light-training-toggle { background:#f0f5f8; border-color:#c7d3db; }


/* ===== v1.17.7 hardcore PSU purchase + animated mode cards ===== */
.hardcore-psu-cert-window { width:min(720px, calc(100vw - 28px)); max-height:min(88vh, 900px); overflow:auto; }
.hardcore-psu-cert-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0 16px 14px; }
.hardcore-psu-cert-option { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; padding:14px; text-align:left; border:1px solid #38444e; border-radius:12px; background:#12181d; color:#eef3f6; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.hardcore-psu-cert-option strong { font-size:16px; }
.hardcore-psu-cert-option > span { font-weight:900; white-space:nowrap; }
.hardcore-psu-cert-option small { grid-column:1 / -1; color:#a9b4bd; line-height:1.4; }
.hardcore-psu-cert-option:hover { transform:translateY(-2px); border-color:#6e7d89; background:#1a2229; }
.hardcore-psu-cert-option.selected { border-color:#8fc5e5; background:#17252e; box-shadow:0 0 0 2px rgba(143,197,229,.16), 0 10px 26px rgba(0,0,0,.18); }
.hardcore-psu-cert-option.premium.selected { border-color:#dcb66b; background:#282218; }
.hardcore-psu-cert-option:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.hardcore-psu-cert-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; padding:0 16px 16px; }
.hardcore-psu-owned-note { padding:10px 12px; border-left:3px solid #d49c4a; background:#221c14; border-radius:8px; color:#d3c6b5; }
.hardcore-psu-item { border-color:#38576a; background:linear-gradient(145deg,rgba(55,133,175,.10),rgba(12,18,23,.98)); }
.hardcore-psu-item:hover { border-color:#6aa6c7; box-shadow:0 10px 28px rgba(53,139,184,.12); transform:translateY(-2px); }
.hardcore-psu-buy { border-color:#5b9fc6 !important; }

.mode-card { transform:translateY(0); animation:modeCardIn .58s cubic-bezier(.2,.75,.25,1) both; animation-delay:var(--mode-card-delay,0ms); transition:transform .24s ease, box-shadow .24s ease, border-color .2s ease, background .2s ease; box-shadow:0 8px 22px rgba(0,0,0,.10); }
.mode-card:nth-child(1){--mode-card-delay:0ms}.mode-card:nth-child(2){--mode-card-delay:70ms}.mode-card:nth-child(3){--mode-card-delay:140ms}.mode-card:nth-child(4){--mode-card-delay:210ms}
.mode-card::before { content:""; position:absolute; inset:-35%; background:linear-gradient(110deg,transparent 42%,rgba(255,255,255,.10) 50%,transparent 58%); transform:translateX(-70%) rotate(7deg); animation:modeCardShine 4.8s ease-in-out infinite; pointer-events:none; }
.mode-card::after { content:""; position:absolute; inset:-45%; z-index:0; background:linear-gradient(125deg,transparent 20%,var(--card-g1) 34%,var(--card-g2) 50%,var(--card-g3) 66%,transparent 80%); background-size:220% 220%; transform:translate3d(-12%,0,0) rotate(7deg); animation:modeCardGradient 2s ease-in-out infinite; pointer-events:none; opacity:.95; }
.mode-card:hover { transform:translateY(-5px) scale(1.01); box-shadow:0 16px 34px rgba(0,0,0,.22); }
@keyframes modeCardIn { 0%{opacity:0;transform:translateY(12px) scale(.985)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes modeCardShine { 0%,72%{transform:translateX(-70%) rotate(7deg);opacity:0} 80%{opacity:1} 92%,100%{transform:translateX(70%) rotate(7deg);opacity:0} }
@keyframes modeCardGradient { 0%,100%{background-position:0% 50%; transform:translate3d(-18%,0,0) rotate(7deg) scale(1)} 50%{background-position:100% 50%; transform:translate3d(18%,0,0) rotate(7deg) scale(1.04)} }
body.no-animations .mode-card::before, body.no-animations .mode-card::after { display:none; }
@media(max-width:700px){.hardcore-psu-cert-options{grid-template-columns:1fr}.hardcore-psu-cert-actions{justify-content:stretch}.hardcore-psu-cert-actions button{flex:1}}
body.theme-light .hardcore-psu-cert-option { background:#f4f7f9; border-color:#cbd5dc; color:#182028; }
body.theme-light .hardcore-psu-cert-option small { color:#65727d; }
body.theme-light .hardcore-psu-owned-note { background:#fff8ed; color:#66553d; }


/* v1.17.7 — animated card gradient + hardcore PSU compensation */
.psu-compensation-toast {
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:9000;
  width:min(430px,calc(100vw - 40px));
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 42px 15px 15px;
  border:1px solid #6cb9d8;
  border-radius:14px;
  background:linear-gradient(145deg,rgba(18,31,39,.98),rgba(14,24,30,.98));
  color:#eef9fd;
  box-shadow:0 18px 55px rgba(0,0,0,.38),0 0 30px rgba(70,170,210,.16);
  opacity:0;
  transform:translateY(18px) scale(.97);
  pointer-events:none;
}
.psu-compensation-toast.show { animation:psuCompensationIn .24s ease-out forwards; pointer-events:auto; }
.psu-compensation-toast-icon { flex:0 0 auto; font-size:36px; line-height:1; }
.psu-compensation-toast-text { min-width:0; display:grid; gap:5px; }
.psu-compensation-toast-text strong { font-size:17px; }
.psu-compensation-toast-text span { color:#c8d8df; font-size:13px; line-height:1.45; }
.psu-compensation-close { position:absolute; top:7px; right:8px; border:0; background:transparent; color:#9fb2bb; font-size:24px; line-height:1; cursor:pointer; padding:3px 7px; }
.psu-compensation-close:hover { color:#fff; }
@keyframes psuCompensationIn { to { opacity:1; transform:translateY(0) scale(1); } }
body.theme-light .psu-compensation-toast { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(240,247,250,.98)); color:#17242b; border-color:#8bc6dd; box-shadow:0 18px 48px rgba(42,63,72,.22),0 0 25px rgba(70,170,210,.13); }
body.theme-light .psu-compensation-toast-text span { color:#556873; }
body.theme-light .psu-compensation-close { color:#70828c; }
@media (max-width:700px){ .psu-compensation-toast { right:10px; bottom:10px; width:calc(100vw - 20px); } }


/* v1.17.9 — language selection */
.language-setting{display:grid;gap:10px;padding:13px;border:1px solid #34404a;border-radius:11px;background:#11171b}
.language-setting-title{display:grid;gap:4px}.language-setting-title small{color:#8d99a3;line-height:1.45}
.language-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.language-option{min-height:42px;border:1px solid #3b4751;border-radius:9px;background:#181f25;color:#edf3f6;cursor:pointer;font:inherit}
.language-option.active{border-color:#7fb9d4;background:#21313a;box-shadow:0 0 0 2px rgba(127,185,212,.12)}
.language-prompt{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:22px}
.language-prompt.hidden{display:none!important}.language-prompt-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.76);backdrop-filter:blur(2px)}
.language-prompt-card{position:relative;z-index:1;width:min(640px,100%);padding:28px;border:1px solid #4f7d90;border-radius:17px;background:linear-gradient(145deg,#15232a,#10171c);box-shadow:0 24px 80px rgba(0,0,0,.46)}
.language-prompt-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;background:#22333c;color:#b8dae8;font-size:12px;letter-spacing:.05em}
.language-prompt-card h2{margin:14px 0 9px;font-size:30px}.language-prompt-card p{margin:0;color:#c9d5dc;line-height:1.65}
.language-prompt-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:20px}
body.theme-light .language-setting{background:#f5f7f8;border-color:#cdd6dc}.language-setting .language-option{background:#fff;color:#19232b;border-color:#cbd5dc}.language-setting .language-option.active{background:#eaf4f8;border-color:#6aa9c3}
body.theme-light .language-prompt-card{background:#fff;border-color:#8abfd2}.language-prompt-card p{color:#c9d5dc}.theme-light .language-prompt-card p{color:#4c5b65}
@media(max-width:700px){.language-options{grid-template-columns:1fr}.language-prompt-card{padding:22px}.language-prompt-actions>*{flex:1}}


/* ===== v1.17.10 BOOT LOADING SCREEN ===== */
.boot-loading{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:24px;pointer-events:auto;opacity:1;transition:opacity .35s ease,visibility .35s ease}
.boot-loading.hidden{opacity:0;visibility:hidden;pointer-events:none}
.boot-loading-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(66,122,170,.18),rgba(7,10,14,.94) 58%,rgba(4,6,9,.98));backdrop-filter:blur(7px)}
.boot-loading-card{position:relative;z-index:1;width:min(480px,100%);padding:34px 30px;border:1px solid rgba(112,145,174,.34);border-radius:20px;background:linear-gradient(145deg,rgba(20,28,37,.96),rgba(11,16,21,.98));box-shadow:0 28px 90px rgba(0,0,0,.52);text-align:center}
.boot-loading-logo{font-size:12px;font-weight:900;letter-spacing:.24em;opacity:.7}
.boot-loading-spinner{width:54px;height:54px;margin:24px auto 18px;border:4px solid rgba(255,255,255,.11);border-top-color:var(--accent,#6bb1ff);border-radius:50%;animation:bootSpin .8s linear infinite}
.boot-loading-card h2{margin:0;font-size:24px}
.boot-loading-card p{margin:10px 0 0;color:#9faab5;line-height:1.55}
@keyframes bootSpin{to{transform:rotate(360deg)}}
body.theme-light .boot-loading-backdrop{background:radial-gradient(circle at 50% 35%,rgba(98,171,214,.18),rgba(224,232,237,.92) 62%,rgba(206,216,223,.96))}
body.theme-light .boot-loading-card{background:linear-gradient(145deg,rgba(255,255,255,.97),rgba(239,245,248,.98));border-color:rgba(83,130,158,.3);box-shadow:0 28px 90px rgba(31,54,68,.18)}
body.theme-light .boot-loading-card p{color:#5f6e78}
body.no-animations .boot-loading{transition:none}
body.no-animations .boot-loading-spinner{animation:none}


/* ===== v2.0.4 — knowledge-based onboarding ===== */
@keyframes firstVisitBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes firstVisitCardIn { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes knowledgeModalIn { from { opacity: 0; transform: translateY(18px) scale(.965); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes knowledgeStepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes knowledgeCardHover { from { transform: translateX(0); } to { transform: translateX(3px); } }

.first-visit-intro { background: rgba(0,0,0,.52); animation: firstVisitBackdropIn .22s ease-out; }
.first-visit-card { animation: firstVisitCardIn .34s cubic-bezier(.2,.8,.2,1); }
.first-visit-logo { font-size: 44px; margin-bottom: 2px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
.first-visit-card h2 { font-size: clamp(26px,5vw,34px); }
.first-visit-question { margin-top: 18px; font-size: 18px; font-weight: 800; color: #f0f4f7; }
.first-visit-actions .first-visit-learn { min-width: 230px; }

.knowledge-level-modal:not(.hidden) .knowledge-level-window,
.knowledge-training-modal:not(.hidden) .knowledge-training-window { animation: knowledgeModalIn .30s cubic-bezier(.2,.8,.2,1); }
.knowledge-level-window { width: min(760px, 100%); }
.knowledge-level-badge { display: inline-block; padding: 5px 9px; border-radius: 999px; background: #252d35; color: #aeb8c2; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.knowledge-level-window .menu-modal-header { padding-bottom: 10px; }
.knowledge-level-window .menu-modal-header h2 { margin-top: 10px; font-size: clamp(23px,4vw,31px); }
.knowledge-level-body > p { margin: 0 0 14px; color: #9faab4; line-height: 1.55; }
.knowledge-level-list { display: grid; gap: 8px; }
.knowledge-level-card { display: grid; grid-template-columns: 46px minmax(0,1fr) 24px; align-items: center; gap: 12px; width: 100%; padding: 13px; border: 1px solid #303943; border-radius: 11px; background: #11161a; color: #e8edf2; text-align: left; cursor: pointer; transition: transform .14s ease, border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.knowledge-level-card:hover { transform: translateX(3px); border-color: #6d7a86; background: #1a2127; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.knowledge-level-card:focus-visible { outline: 2px solid #8aa0b0; outline-offset: 2px; }
.knowledge-level-number { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #242d35; color: #f4f7f9; font-size: 20px; font-weight: 900; }
.knowledge-level-copy { display: grid; gap: 4px; min-width: 0; }
.knowledge-level-copy strong { font-size: 16px; }
.knowledge-level-copy small { color: #95a0aa; line-height: 1.4; font-size: 13px; }
.knowledge-level-arrow { justify-self: end; color: #7f8c98; font-size: 20px; }

.knowledge-training-window { width: min(760px,100%); max-height: min(88vh,900px); overflow: auto; }
.knowledge-training-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid #29313a; }
.knowledge-training-heading { display: grid; gap: 9px; min-width: 0; flex: 1; }
.knowledge-training-progress-wrap { width: min(420px, 100%); height: 6px; border-radius: 999px; overflow: hidden; background: #242d35; }
.knowledge-training-progress-bar { width: 100%; height: 100%; }
.knowledge-training-progress-bar span { display: block; width: var(--progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg,#6797bd,#9bc1df); transition: width .28s ease; }
.knowledge-training-content { min-height: 400px; display: flex; flex-direction: column; justify-content: center; padding: 30px 8px 24px; text-align: center; }
.knowledge-training-content.step-in { animation: knowledgeStepIn .24s ease-out; }
.knowledge-training-icon { font-size: clamp(54px,10vw,74px); line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 10px 28px rgba(0,0,0,.18)); }
.knowledge-training-step-label { color: #7f8a95; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.knowledge-training-content h2 { margin: 9px auto 12px; max-width: 620px; font-size: clamp(25px,5vw,36px); }
.knowledge-training-content > p { margin: 0 auto; max-width: 620px; color: #aeb8c2; line-height: 1.7; font-size: 16px; }
.knowledge-training-example { width: min(620px,100%); margin: 18px auto 0; padding: 13px 14px; border: 1px solid #33424e; border-radius: 10px; background: #12191e; color: #d2dae0; line-height: 1.5; text-align: left; }
.knowledge-training-example.hidden { display: none !important; }
.knowledge-training-footer { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid #29313a; }
.knowledge-training-next { width: auto; min-width: 120px; }

body.no-animations .first-visit-intro,
body.no-animations .first-visit-card,
body.no-animations .knowledge-level-modal:not(.hidden) .knowledge-level-window,
body.no-animations .knowledge-training-modal:not(.hidden) .knowledge-training-window,
body.no-animations .knowledge-training-content.step-in { animation: none !important; }

@media (max-width:700px){
  .first-visit-card { padding: 22px; }
  .first-visit-question { font-size: 16px; }
  .first-visit-actions { display: grid; grid-template-columns: 1fr; }
  .first-visit-actions .first-visit-learn { width: 100%; min-width: 0; }
  .knowledge-level-card { grid-template-columns: 38px minmax(0,1fr) 18px; gap: 10px; padding: 11px; }
  .knowledge-level-number { width: 34px; height: 34px; font-size: 17px; }
  .knowledge-level-copy strong { font-size: 14px; }
  .knowledge-level-copy small { font-size: 12px; }
  .knowledge-training-window { max-height: calc(100vh - 16px); }
  .knowledge-training-content { min-height: 330px; padding: 24px 4px 18px; }
  .knowledge-training-content > p { font-size: 14px; line-height: 1.6; }
  .knowledge-training-footer { position: sticky; bottom: -12px; background: var(--panel, #171c21); padding-bottom: 4px; }
}

html.theme-light .knowledge-level-badge { background: #e4eaee; color: #53606a; }
html.theme-light .knowledge-level-card,
body.theme-light .knowledge-level-card { background: #f4f7f9; border-color: #cdd6dd; color: #182028; }
html.theme-light .knowledge-level-card:hover,
body.theme-light .knowledge-level-card:hover { background: #e8eef2; border-color: #9eabb5; }
html.theme-light .knowledge-level-number { background: #dfe7ec; color: #182028; }
html.theme-light .knowledge-level-copy small,
body.theme-light .knowledge-level-copy small { color: #66727d; }
html.theme-light .knowledge-training-header,
body.theme-light .knowledge-training-header,
html.theme-light .knowledge-training-footer,
body.theme-light .knowledge-training-footer { border-color: #cfd7de; }
html.theme-light .knowledge-training-step-label,
body.theme-light .knowledge-training-step-label { color: #6f7c86; }
html.theme-light .knowledge-training-content > p,
body.theme-light .knowledge-training-content > p { color: #52606a; }
html.theme-light .knowledge-training-example,
body.theme-light .knowledge-training-example { background: #f1f5f7; border-color: #ccd6dc; color: #34424c; }

/* v2.0.4 training visual example */
.knowledge-training-visual { width:min(680px,100%); margin:18px auto 0; }
.knowledge-training-visual.hidden { display:none !important; }
.knowledge-ball-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.knowledge-ball-mode { padding:12px; border:1px solid #33424e; border-radius:11px; background:#12191e; text-align:left; }
.knowledge-ball-mode > strong { display:block; margin-bottom:4px; font-size:14px; }
.knowledge-ball-mode > span { display:block; color:#94a0aa; font-size:12px; line-height:1.4; min-height:34px; }
.knowledge-ball-field { position:relative; height:128px; margin-top:10px; overflow:hidden; border:1px solid #2b3842; border-radius:9px; background:radial-gradient(circle at 20% 30%,rgba(109,183,255,.09),transparent 27%),radial-gradient(circle at 75% 75%,rgba(109,183,255,.07),transparent 30%),#0d1318; }
.knowledge-ball { position:absolute; width:12px; height:12px; border-radius:50%; background:#7bbcff; box-shadow:0 0 12px rgba(109,183,255,.45); }
.teleport-field .ball-a { animation: knowledgeTeleportA 1.8s steps(4,end) infinite; }
.teleport-field .ball-b { animation: knowledgeTeleportB 2.15s steps(5,end) infinite; }
.teleport-field .ball-c { animation: knowledgeTeleportC 1.55s steps(4,end) infinite; }
.smooth-field .ball-a { animation: knowledgeSmoothA 3.3s linear infinite; }
.smooth-field .ball-b { animation: knowledgeSmoothB 3.8s linear infinite; }
.smooth-field .ball-c { animation: knowledgeSmoothC 2.9s linear infinite; }
@keyframes knowledgeTeleportA { 0%,100%{left:8%;top:74%}25%{left:33%;top:16%}50%{left:59%;top:66%}75%{left:82%;top:28%} }
@keyframes knowledgeTeleportB { 0%,100%{left:18%;top:22%}20%{left:45%;top:70%}40%{left:76%;top:48%}60%{left:31%;top:38%}80%{left:68%;top:12%} }
@keyframes knowledgeTeleportC { 0%,100%{left:82%;top:78%}33%{left:20%;top:52%}66%{left:58%;top:20%} }
@keyframes knowledgeSmoothA { 0%{left:8%;top:72%}25%{left:28%;top:28%}50%{left:63%;top:64%}75%{left:83%;top:22%}100%{left:8%;top:72%} }
@keyframes knowledgeSmoothB { 0%{left:16%;top:20%}25%{left:48%;top:68%}50%{left:82%;top:46%}75%{left:36%;top:36%}100%{left:16%;top:20%} }
@keyframes knowledgeSmoothC { 0%{left:82%;top:76%}25%{left:62%;top:22%}50%{left:24%;top:54%}75%{left:48%;top:82%}100%{left:82%;top:76%} }
body.no-animations .knowledge-ball { animation:none !important; }
body.theme-light .knowledge-ball-mode { background:#f4f7f9; border-color:#cdd6dd; }
body.theme-light .knowledge-ball-mode > span { color:#687580; }
body.theme-light .knowledge-ball-field { border-color:#c8d2d9; background:#eaf0f4; }
@media (max-width:700px){
  .knowledge-ball-demo { grid-template-columns:1fr; }
  .knowledge-ball-field { height:110px; }
}


/* v2.0.5 — knowledge training continues inside Light Mode */
.light-training-progress { display:none; margin-top:8px; color:#7f8e99; font-size:12px; line-height:1.4; }
.light-training-progress.active { display:block; }
body.theme-light .light-training-progress, html.theme-light .light-training-progress { color:#64727c; }


/* v2.0.7 — task -> spotlight -> action -> result */
.light-guide-spotlight {
  position: fixed;
  z-index: 8400;
  display: none;
  border: 2px solid #79c9ff;
  border-radius: 12px;
  background: transparent;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.62), 0 0 0 4px rgba(121,201,255,.10), 0 0 26px rgba(121,201,255,.62);
  pointer-events: none;
  transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease, opacity .18s ease;
  opacity: 0;
}
.light-guide-spotlight.show { display: block; opacity: 1; animation: guidedSpotlightPulse 1.45s ease-in-out infinite; }
.light-guide-target { position: relative; z-index: 8401 !important; }
.light-coach.guided { z-index: 8500; border-color: #527a96; box-shadow: 0 18px 55px rgba(0,0,0,.48), 0 0 0 1px rgba(121,201,255,.10); }
.light-coach.guided-in { animation: guidedCoachIn .22s cubic-bezier(.2,.8,.2,1); }
@keyframes guidedSpotlightPulse { 0%,100%{box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 0 4px rgba(121,201,255,.08),0 0 20px rgba(121,201,255,.52)}50%{box-shadow:0 0 0 9999px rgba(0,0,0,.62),0 0 0 7px rgba(121,201,255,.12),0 0 34px rgba(121,201,255,.80)} }
@keyframes guidedCoachIn { from { opacity:.3; transform:translateY(12px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }
body.no-animations .light-guide-spotlight.show,
body.no-animations .light-coach.guided-in { animation:none !important; }
body.theme-light .light-guide-spotlight, html.theme-light .light-guide-spotlight { border-color:#2379ae; box-shadow:0 0 0 9999px rgba(20,30,38,.48),0 0 0 4px rgba(35,121,174,.10),0 0 24px rgba(35,121,174,.42); }
@media (max-width:700px){
  .light-guide-spotlight { border-radius:10px; }
  .light-coach.guided { width:calc(100vw - 20px); }
}


/* v2.0.7 — guided training workspace targets */
.training-inspect-target {
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  transition: transform .12s ease, background .12s ease;
}
.training-inspect-target:hover { background: rgba(121,201,255,.06); }
.light-guide-target.training-inspect-target { box-shadow: 0 0 0 2px rgba(121,201,255,.18); }
body.theme-light .training-inspect-target:hover, html.theme-light .training-inspect-target:hover { background: rgba(35,121,174,.07); }