:root {
  --bg: var(--tg-theme-bg-color, #0b0d11);
  --bg-elevated: #10141b;
  --surface: var(--tg-theme-secondary-bg-color, #151922);
  --surface-2: #1b202b;
  --surface-3: #242b38;
  --text: var(--tg-theme-text-color, #f4f7fb);
  --muted: var(--tg-theme-hint-color, #8c96a8);
  --accent: var(--tg-theme-button-color, #6f91ff);
  --accent-text: var(--tg-theme-button-text-color, #ffffff);
  --accent-soft: color-mix(in srgb, var(--accent) 17%, transparent);
  --border: rgba(255,255,255,.085);
  --border-strong: rgba(255,255,255,.15);
  --green: #4d9b6a;
  --green-soft: rgba(77,155,106,.17);
  --yellow: #b1943f;
  --yellow-soft: rgba(177,148,63,.17);
  --gray: #4a5260;
  --danger: #e16b73;
  --danger-soft: rgba(225,107,115,.13);
  --gold: #e0bd64;
  --shadow: 0 10px 30px rgba(0,0,0,.18);
  --radius: 14px;
  --radius-sm: 10px;
  --safe-top: max(10px, env(safe-area-inset-top));
  --safe-bottom: max(8px, env(safe-area-inset-bottom));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
html { -webkit-text-size-adjust: 100%; }
body {
  min-width: 0;
  overflow-x: hidden;
  background:
    radial-gradient(1000px 420px at 50% -170px, color-mix(in srgb, var(--accent) 15%, transparent), transparent 68%),
    var(--bg);
}
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button, select, input, textarea { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-shell {
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--safe-top) 12px calc(84px + var(--safe-bottom));
}
.content { width: min(100%, 960px); margin: 0 auto; }

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  margin: calc(-1 * var(--safe-top)) -12px 8px;
  padding: var(--safe-top) 12px 10px;
  background: color-mix(in srgb, var(--bg) 91%, transparent);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(18px) saturate(130%);
}
.brand-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 900;
  letter-spacing: -.05em;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 26%, transparent);
}
.brand { font-size: .9rem; font-weight: 850; letter-spacing: .055em; }
.brand-tag {
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px 5px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.topbar-spacer { flex: 1; }
.connection-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #5fc57d;
  box-shadow: 0 0 0 3px rgba(95,197,125,.11);
  flex: 0 0 auto;
}
.connection-dot.offline { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
.chat-pill {
  max-width: min(52vw, 360px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: .78rem;
  font-weight: 650;
}

/* Page headings */
.hero { padding: 16px 2px 10px; }
.hero.compact { padding-top: 10px; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 7px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero h1 { margin: 0; font-size: clamp(1.62rem, 6vw, 2.25rem); line-height: 1.05; letter-spacing: -.035em; }
.hero p { margin: 7px 0 0; color: var(--muted); line-height: 1.45; }
.section-head { display: flex; align-items: center; gap: 10px; padding: 11px 1px 6px; }
.section-head-copy { min-width: 0; flex: 1; }
.section-head h1 { margin: 0; font-size: 1.35rem; letter-spacing: -.025em; }
.section-head p { margin: 3px 0 0; color: var(--muted); font-size: .86rem; }
.back-btn {
  width: 38px; height: 38px; padding: 0;
  display: grid; place-items: center;
  border-radius: 11px;
}

/* Cards */
.card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, #fff 3%), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  margin: 10px 0;
  box-shadow: 0 1px 0 rgba(255,255,255,.025) inset;
}
.card h2, .card h3 { margin: 0 0 8px; letter-spacing: -.02em; }
.card p { line-height: 1.45; }
.muted { color: var(--muted); }
.error { color: #ffabb0; }
.notice {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: var(--accent-soft);
  border-radius: 11px;
  padding: 10px 11px;
  color: color-mix(in srgb, var(--text) 87%, var(--muted));
  line-height: 1.4;
}
.status-banner {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 10px 0;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.status-banner.error-banner { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); background: var(--danger-soft); }
.status-banner.offline-banner { border-color: rgba(224,189,100,.26); background: rgba(224,189,100,.08); }
.status-copy { flex: 1; min-width: 0; }
.status-copy b { display: block; margin-bottom: 2px; }
.status-copy span { color: var(--muted); font-size: .84rem; line-height: 1.35; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.list { display: grid; gap: 8px; }

.btn {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 42px;
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
}
.btn:active { transform: scale(.985); }
.btn:hover { border-color: var(--border-strong); }
.btn.primary {
  background: var(--accent);
  color: var(--accent-text);
  border-color: transparent;
  font-weight: 760;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}
.btn.ghost { background: transparent; }
.btn.danger { color: #ffb5b9; border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--danger-soft); }
.btn:disabled { opacity: .42; cursor: default; transform: none; }

.icon { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; }
.icon svg { width: 100%; height: 100%; display: block; }

/* Home / mode hub */
.feature-card {
  position: relative;
  overflow: hidden;
  min-height: 164px;
  padding: 18px;
  background:
    radial-gradient(360px 150px at 100% 0%, color-mix(in srgb, var(--accent) 31%, transparent), transparent 72%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 94%, var(--accent) 6%), var(--surface));
}
.feature-card::after {
  content: "";
  position: absolute;
  width: 170px; height: 170px; right: -66px; bottom: -102px;
  border-radius: 50%;
  border: 30px solid color-mix(in srgb, var(--accent) 9%, transparent);
  pointer-events: none;
}
.feature-kicker { color: var(--accent); font-size: .74rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.feature-card h2 { margin: 8px 0 6px; font-size: 1.6rem; }
.feature-card p { max-width: 560px; color: var(--muted); margin: 0 0 16px; }
.feature-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; position: relative; z-index: 1; }
.feature-meta { color: var(--muted); font-size: .82rem; }

.action-card {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 30px;
  gap: 11px;
  align-items: center;
  min-height: 92px;
  padding: 13px;
  cursor: pointer;
}
.action-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.action-icon {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.action-icon .icon { width: 21px; height: 21px; }
.action-copy { min-width: 0; }
.action-copy h2 { font-size: .98rem; margin: 0 0 4px; }
.action-copy p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.action-arrow { width: 30px; height: 30px; display: grid; place-items: center; color: var(--muted); }
.action-arrow .icon { width: 17px; height: 17px; }

/* Group picker */
.group-list { background: transparent; border: 0; padding: 0; box-shadow: none; }
.group-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 40px minmax(0,1fr) 24px;
  gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px;
  background: var(--surface);
}
.group-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--surface-3), var(--accent-soft));
  color: var(--text);
  font-weight: 850;
}
.group-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 720; }
.group-btn .check { color: var(--accent); font-size: 1rem; }

/* Profile */
.profile-card { padding: 16px; }
.profile-identity { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.profile-avatar {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 45%, #7c5cff));
  color: var(--accent-text); font-size: 1.35rem; font-weight: 850;
}
.profile-name { font-size: 1.08rem; font-weight: 800; }
.profile-chat { color: var(--muted); font-size: .82rem; margin-top: 2px; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.stat { background: var(--surface-2); border: 1px solid rgba(255,255,255,.045); border-radius: 11px; padding: 10px 11px; }
.stat span { display: block; font-size: .74rem; }
.stat b { display: block; margin-top: 4px; font-size: 1.08rem; letter-spacing: -.02em; }
.leader-row { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 9px; align-items: center; }
.leader-pos { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--muted); font-size: .8rem; font-weight: 750; }
.leader-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leader-score { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.leader-row.me { border-color: color-mix(in srgb, var(--accent) 33%, var(--border)); background: var(--accent-soft); }

/* Shop / lists */
.item { border: 1px solid var(--border); border-radius: 11px; padding: 11px; background: var(--surface-2); }
.item-title { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.item-title b { min-width: 0; }
.price { white-space: nowrap; color: var(--gold); font-weight: 750; }
.shop-item { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.shop-copy .muted { font-size: .82rem; margin-top: 4px; line-height: 1.35; }
.inventory-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.inventory-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; padding: 6px 9px; background: var(--surface-2); font-size: .8rem; }
.inventory-chip b { color: var(--text); }

/* Game */
.game-card { padding: 13px 12px 14px; }
.game-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.game-head-copy { min-width: 0; flex: 1; }
.game-head h2 { margin: 0; font-size: 1.06rem; }
.game-subtitle { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.game-status { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; padding: 5px 8px; font-size: .72rem; font-weight: 800; background: var(--surface-2); color: var(--muted); }
.game-status.active { background: var(--green-soft); color: #92d4a8; }
.board-wrap { display: grid; place-items: center; margin: 13px 0 14px; }
.wordle-board { display: grid; gap: 6px; width: min(100%, 390px); }
.board-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tile {
  aspect-ratio: 1 / 1;
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: 9px;
  font-weight: 850;
  font-size: clamp(1.12rem, 6.3vw, 1.8rem);
  text-transform: uppercase;
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.tile.filled { border-color: rgba(255,255,255,.24); animation: tile-pop .12s ease-out; }
.tile.revealed { animation: tile-reveal .28s ease-out both; }
.tile.green { background: var(--green); border-color: var(--green); color: white; }
.tile.yellow { background: var(--yellow); border-color: var(--yellow); color: white; }
.tile.gray { background: var(--gray); border-color: var(--gray); color: white; }
.tile.hint { box-shadow: inset 0 0 0 2px var(--accent); color: var(--accent); }
.tile.yellow-hint::after {
  content: attr(data-hint);
  position: absolute;
  right: 4px; bottom: 2px;
  font-size: .58rem;
  color: #e7c965;
  font-weight: 900;
}
.input-preview { text-align: center; letter-spacing: .18em; min-height: 24px; font-weight: 750; margin: 8px 0 10px; color: var(--muted); }
.input-preview:not(:empty) { color: var(--text); }
.keyboard { width: min(100%, 650px); margin: 0 auto; display: grid; gap: 5px; }
.key-row { display: flex; gap: 4px; justify-content: center; }
.key {
  flex: 1 1 0;
  min-width: 0;
  max-width: 46px;
  height: 46px;
  padding: 0 2px;
  border: 1px solid rgba(255,255,255,.04);
  border-radius: 7px;
  background: #2b313d;
  color: var(--text);
  font-weight: 760;
  font-size: .86rem;
  transition: transform .08s ease, background .15s ease, opacity .15s ease;
}
.key:active { transform: translateY(1px) scale(.98); }
.key.green { background: var(--green); color: white; }
.key.yellow { background: var(--yellow); color: white; }
.key.gray { background: #3d4450; color: #c0c6d0; }
.key.wide { max-width: 74px; flex-basis: 58px; font-size: .72rem; }
.key:disabled { opacity: .55; }
.segmented { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 3px; }
.segmented::-webkit-scrollbar { display: none; }
.segmented .btn { white-space: nowrap; }
.boost-row { margin: 7px auto 10px; width: min(100%, 650px); }
.result-card { border-color: var(--border-strong); }
.result-card.success { border-color: rgba(77,155,106,.42); background: linear-gradient(180deg, var(--green-soft), var(--surface)); }
.result-card.fail { border-color: rgba(225,107,115,.28); }
.reward-row { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.reward-chip { padding: 6px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-size: .8rem; font-weight: 700; }

/* Forms / misc screens */
.form-grid { display: grid; gap: 7px; margin: 10px 0; }
.form-grid label { font-size: .78rem; font-weight: 700; }
.form-grid select, .form-grid input, .form-grid textarea { width: 100%; }
.text-area { width: 100%; min-height: 88px; resize: vertical; }
.color-choice { min-width: 52px; }
pre.info { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.52; margin: 0; color: var(--muted); }
.skin-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: center; }
.skin-state { font-size: .78rem; color: var(--muted); }
.skin-row.selected { border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); background: var(--accent-soft); }
.demo-banner { background: rgba(224,189,100,.09); color: #efd88f; padding: 9px 11px; border: 1px solid rgba(224,189,100,.25); border-radius: 10px; margin: 10px 0; }

/* Bottom navigation */
.bottom-nav {
  position: fixed;
  z-index: 30;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(18px) saturate(130%);
  padding: 6px 7px calc(6px + var(--safe-bottom));
}
.nav-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  min-height: 50px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  font-size: .68rem;
  font-weight: 700;
}
.nav-btn .icon { width: 20px; height: 20px; }
.nav-btn.active { color: var(--text); background: var(--surface); }
.nav-btn.active .icon { color: var(--accent); }

/* Loading / busy */
.loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 38vh;
  color: var(--muted);
}
.spinner {
  width: 26px; height: 26px;
  border: 2px solid rgba(255,255,255,.12);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.app-shell.is-busy .btn, .app-shell.is-busy .key { pointer-events: none; }
.app-shell.is-busy .topbar::after {
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 35%; height: 2px;
  background: var(--accent);
  animation: busy-line .9s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes busy-line { 0% { transform: translateX(-110%); } 100% { transform: translateX(390%); } }
@keyframes tile-pop { 50% { transform: scale(1.045); } }
@keyframes tile-reveal { from { transform: rotateX(72deg); opacity: .6; } to { transform: rotateX(0); opacity: 1; } }

@media (min-width: 560px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-card { padding: 16px; }
}

@media (min-width: 760px) {
  .app-shell { padding-left: 24px; padding-right: 24px; padding-bottom: 96px; }
  .topbar { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
  .content { padding-bottom: 14px; }
  .desktop-columns { display: grid; grid-template-columns: minmax(0, 1.16fr) minmax(290px, .84fr); gap: 16px; align-items: start; }
  .bottom-nav {
    width: min(620px, calc(100% - 32px));
    left: 50%; right: auto;
    transform: translateX(-50%);
    bottom: 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding-bottom: 6px;
    box-shadow: var(--shadow);
  }
  .feature-card { min-height: 176px; }
  .wordle-board { width: min(100%, 420px); }
}

@media (max-width: 390px) {
  .app-shell { padding-left: 9px; padding-right: 9px; }
  .topbar { margin-left: -9px; margin-right: -9px; padding-left: 10px; padding-right: 10px; }
  .brand-tag { display: none; }
  .chat-pill { max-width: 46vw; }
  .card { padding: 12px; }
  .key { height: 43px; font-size: .78rem; }
  .key.wide { max-width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ===== Mini App UI refresh v3 ===== */
:root {
  --accent-2: #92bcff;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: -1;
}
body::before {
  width: 52vw;
  height: 52vw;
  min-width: 280px;
  min-height: 280px;
  max-width: 620px;
  max-height: 620px;
  top: -16vw;
  right: -18vw;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%);
  filter: blur(10px);
  animation: preeko-float 13s ease-in-out infinite;
}
body::after {
  width: 36vw;
  height: 36vw;
  min-width: 180px;
  min-height: 180px;
  left: -8vw;
  bottom: 10vh;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%);
  filter: blur(18px);
  animation: preeko-float 16s ease-in-out infinite reverse;
}

.topbar {
  border-bottom-color: color-mix(in srgb, var(--accent) 11%, var(--border));
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}
.brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.chat-pill,
.theme-pill {
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}
.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  color: color-mix(in srgb, var(--text) 88%, var(--muted));
  font-size: .74rem;
  font-weight: 760;
  white-space: nowrap;
}
.theme-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.theme-pill.active { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.theme-pill.locked::before { background: var(--gray); box-shadow: none; }
.topbar-theme { max-width: min(34vw, 180px); overflow: hidden; text-overflow: ellipsis; }

.card {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, #fff 6%), var(--surface)),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 3%, transparent), transparent 45%);
  box-shadow: 0 18px 32px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.025);
}
.hero h1 {
  text-wrap: balance;
}
.hero p {
  max-width: 42rem;
}
.metric-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  margin: 4px 0 4px;
}
.metric-strip::-webkit-scrollbar { display: none; }
.metric-pill {
  min-width: 120px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.metric-pill.strong {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2)), var(--surface-2));
}
.metric-label {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.metric-value {
  display: block;
  margin-top: 5px;
  font-size: .92rem;
  line-height: 1.2;
}

.feature-card {
  border-color: color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow: 0 24px 38px rgba(0,0,0,.18);
}
.feature-card-hero {
  overflow: hidden;
}
.feature-card-hero::before {
  content: "";
  position: absolute;
  inset: auto auto 18px 18px;
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 34%, transparent), transparent);
  filter: blur(10px);
  opacity: .8;
}
.feature-card h2 {
  letter-spacing: -.035em;
}
.feature-actions .btn.primary {
  min-width: 150px;
}
.feature-footnote {
  margin-top: 12px;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: .83rem;
}
.action-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 97%, transparent), var(--surface-2));
}
.action-card:hover {
  transform: translateY(-1px);
}
.play-grid .action-card { min-height: 102px; }

.profile-card,
.result-card,
.skin-current {
  position: relative;
  overflow: hidden;
}
.profile-card::after,
.skin-current::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -60px;
  top: -90px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  pointer-events: none;
}
.profile-avatar {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 74%, #fff 26%), var(--accent-2));
  box-shadow: 0 16px 30px color-mix(in srgb, var(--accent) 18%, transparent);
}
.stat {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%), var(--surface-2));
}
.leader-pos {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 88%, var(--accent) 12%), var(--surface-3));
}

.game-card {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}
.board-wrap {
  position: relative;
}
.wordle-board {
  position: relative;
}
.wordle-board::before {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 18px;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%);
  filter: blur(8px);
  z-index: -1;
}
.tile {
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, white 4%), var(--surface-2));
}
.tile.hint {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
}
.key {
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-3) 82%, var(--accent) 18%), var(--surface-3));
}
.boost-row .btn {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 90%, var(--accent) 10%), var(--surface-2));
}
.reward-chip,
.inventory-chip {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 96%, transparent), var(--surface-2));
}

.skin-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.skin-card {
  display: grid;
  gap: 12px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  padding: 12px;
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.skin-card.selected {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 11%, var(--surface-2)), var(--surface-2));
}
.skin-card:hover { transform: translateY(-1px); }
.skin-copy {
  display: grid;
  gap: 7px;
}
.skin-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skin-preview {
  --preview-bg: #0b0d11;
  --preview-surface: #151922;
  --preview-accent: #6f91ff;
  --preview-accent-2: #92bcff;
  --preview-green: #4d9b6a;
  --preview-yellow: #b1943f;
  --preview-gray: #4a5260;
  border-radius: 14px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--preview-accent) 22%, rgba(255,255,255,.08));
  background:
    radial-gradient(120px 64px at 100% 0%, color-mix(in srgb, var(--preview-accent) 28%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--preview-surface) 88%, white 12%), var(--preview-bg));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.hero-preview {
  margin-top: 12px;
}
.preview-bar {
  width: 44%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--preview-accent), var(--preview-accent-2));
  margin-bottom: 10px;
}
.preview-board {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.preview-tile,
.preview-key {
  display: block;
  border-radius: 8px;
  background: var(--preview-surface);
}
.preview-tile {
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(255,255,255,.05);
}
.preview-tile.green, .preview-key.green { background: var(--preview-green); }
.preview-tile.yellow, .preview-key.yellow { background: var(--preview-yellow); }
.preview-tile.gray, .preview-key.gray { background: var(--preview-gray); }
.preview-tile.accent { background: color-mix(in srgb, var(--preview-accent) 22%, var(--preview-surface)); }
.preview-tile.surface { background: color-mix(in srgb, var(--preview-accent-2) 10%, var(--preview-bg)); }
.preview-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 10px;
}
.preview-key {
  height: 12px;
}

.bottom-nav {
  border-top-color: color-mix(in srgb, var(--accent) 14%, var(--border));
  box-shadow: 0 -8px 26px rgba(0,0,0,.18);
}
.nav-btn {
  transition: color .12s ease, transform .12s ease, background .12s ease;
}
.nav-btn.active {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 85%, var(--accent) 15%), var(--surface));
}
.nav-btn:active {
  transform: scale(.98);
}

.loading {
  min-height: 42vh;
}
.spinner {
  border-top-color: var(--accent);
}

@keyframes preeko-float {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0, 10px, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .tile.revealed,
  .tile.filled,
  .action-card,
  .nav-btn {
    animation: none !important;
    transition: none !important;
  }
}

@media (min-width: 900px) {
  .metric-strip {
    flex-wrap: wrap;
  }
  .metric-pill { min-width: 0; flex: 1 1 0; }
}

/* ===== UI reset v4: sharper, flatter, lighter ===== */
:root {
  --radius: 10px;
  --radius-sm: 8px;
  --shadow: none;
}
body {
  background: var(--bg);
}
body::before,
body::after,
.feature-card::after,
.feature-card-hero::before,
.profile-card::after,
.skin-current::after,
.wordle-board::before {
  display: none !important;
}
.topbar,
.card,
.item,
.action-card,
.compact-mode-card,
.summary-cell,
.metric-pill,
.inventory-chip,
.reward-chip,
.nav-btn.active,
.stat,
.key,
.tile,
.shop-compact-item,
.skin-card,
.status-banner,
.theme-pill,
.chat-pill {
  background: var(--surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
.topbar {
  backdrop-filter: none;
  border-bottom: 1px solid var(--border);
}
.brand-mark {
  background: var(--accent);
  box-shadow: none;
}
.theme-pill::before,
.connection-dot {
  box-shadow: none;
}
.card,
.item,
.action-card,
.compact-mode-card,
.summary-cell,
.metric-pill,
.inventory-chip,
.reward-chip,
.stat,
.shop-compact-item,
.skin-card,
.status-banner,
.theme-pill,
.chat-pill,
.btn,
.nav-btn.active,
.tile,
.key,
.guess-input,
.overlay-card {
  border-radius: 8px !important;
}
.hero { padding-bottom: 8px; }
.hero h1 {
  font-size: clamp(1.45rem, 5vw, 1.95rem);
}
.hero-eyebrow {
  color: var(--muted);
}
.summary-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 12px;
}
.summary-bar.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.summary-cell {
  border: 1px solid var(--border);
  padding: 10px 11px;
  min-height: 62px;
}
.summary-cell.accent {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
}
.summary-label {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .08em;
}
.summary-value {
  display: block;
  margin-top: 6px;
  font-size: 1rem;
  letter-spacing: -.02em;
}
.daily-hub {
  padding: 14px;
  border: 1px solid var(--border);
}
.daily-hub-top {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.daily-hub-copy h2 {
  margin: 0 0 4px;
  font-size: 1.2rem;
}
.mode-meta-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin-top: 10px;
}
.mode-meta-row::-webkit-scrollbar { display:none; }
.mode-grid.compact-mode-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.compact-mode-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  padding: 12px;
  color: var(--text);
  min-height: 74px;
}
.compact-mode-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mode-icon-wrap {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--accent);
}
.compact-mode-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  text-align: left;
}
.compact-mode-copy b { font-size: .92rem; }
.compact-mode-meta { color: var(--muted); font-size: .76rem; }
.compact-mode-arrow { color: var(--muted); font-size: 1rem; }

.game-card {
  padding: 12px;
}
.board-wrap {
  margin: 10px 0 12px;
}
.wordle-board { width: min(100%, 360px); }
.tile {
  border: 1px solid var(--border);
}
.guess-entry {
  width: min(100%, 360px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
.guess-input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
.guess-submit {
  min-width: 104px;
}
.input-preview,
.keyboard { display: none !important; }

.shop-compact-list {
  display: grid;
  gap: 8px;
}
.shop-compact-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--border);
  padding: 10px 11px;
}
.shop-compact-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.shop-item-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--accent);
  flex: 0 0 auto;
}
.shop-copy {
  min-width: 0;
}
.shop-copy b {
  display: block;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-inline-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: .78rem;
}
.shop-compact-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.icon-btn .icon { width: 16px; height: 16px; }
.inventory-compact {
  padding-top: 12px;
}
.shop-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0,0,0,.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
}
.overlay-card {
  width: min(100%, 540px);
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 12px;
}
.overlay-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.overlay-body {
  color: var(--muted);
  line-height: 1.45;
}

.bottom-nav {
  backdrop-filter: none;
  background: var(--bg);
}
.nav-btn.active {
  border: 1px solid var(--border);
}
.btn {
  background: var(--surface-2);
  border-radius: 8px;
}
.btn.primary {
  background: var(--accent) !important;
  box-shadow: none;
}
.key {
  background: var(--surface-2) !important;
}
.metric-pill {
  min-width: 108px;
  padding: 9px 10px;
}

@media (max-width: 640px) {
  .summary-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-bar.compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mode-grid.compact-mode-grid { grid-template-columns: 1fr 1fr; }
  .daily-hub-top { grid-template-columns: 1fr; }
  .shop-compact-item { grid-template-columns: 1fr; }
  .shop-compact-actions { justify-content: flex-end; }
}

/* ===== UI reset v5: return to text-version spirit ===== */
:root {
  --bg: #12151e;
  --surface: #171b26;
  --surface-2: #1b2130;
  --surface-3: #20283a;
  --text: #eef2fa;
  --muted: #a2acbf;
  --border: rgba(167, 181, 204, 0.2);
  --border-strong: rgba(190, 203, 224, 0.34);
  --accent: #6bd89a;
  --yellow: #d4ab49;
  --green: #5fb989;
  --gray: #546176;
}
body {
  background: var(--bg);
  color: var(--text);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.brand-wrap { gap: 10px; }
.brand-mark {
  width: 11px;
  height: 11px;
  border-radius: 0;
  background: var(--accent);
  color: transparent;
  font-size: 0;
}
.brand {
  font-size: 1rem;
  letter-spacing: .18em;
  font-weight: 700;
}
.brand-tag,
.chat-pill,
.theme-pill,
.connection-dot { display: none !important; }
.content {
  padding: 18px 18px calc(96px + var(--safe-bottom));
  max-width: 1040px;
  margin: 0 auto;
}
.text-mast {
  margin-bottom: 14px;
}
.accent-rule,
.panel-rule {
  width: 72px;
  height: 6px;
  background: var(--panel-accent, var(--accent));
  margin-bottom: 14px;
}
.text-overline {
  font-size: clamp(1.5rem, 4.8vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #f5f7fb;
}
.text-subline {
  margin-top: 8px;
  color: var(--muted);
  font-size: .96rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero,
.metric-strip,
.summary-bar:not(.text-summary-bar) { display:none !important; }
.text-summary-bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}
.summary-cell,
.metric-pill {
  border: 1px solid var(--border);
  border-radius: 0 !important;
  background: transparent !important;
  padding: 12px 13px;
}
.summary-cell.accent {
  border-color: color-mix(in srgb, var(--yellow) 55%, var(--border));
}
.summary-label,
.metric-label {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.summary-value,
.metric-value {
  margin-top: 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f8fbff;
}
.text-panel,
.result-text-panel,
.profile-card,
.skin-current,
.inventory-compact,
.card,
.item {
  background: transparent !important;
  border: 1px solid var(--border);
  border-radius: 0 !important;
  box-shadow: none !important;
}
.daily-text-panel {
  --panel-accent: var(--accent);
  padding: 16px 16px 14px;
  margin-bottom: 16px;
}
.text-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.text-panel-title {
  font-size: 1.6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.text-panel-meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: .92rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.text-player-name {
  margin-top: 22px;
  font-size: clamp(2rem, 6vw, 3rem);
  line-height: 1;
  font-weight: 500;
  color: #eef3fb;
}
.text-meta-row {
  margin-top: 18px;
  gap: 8px;
}
.text-mode-list {
  display: grid;
  gap: 8px;
}
.text-mode-card,
.compact-mode-card {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 0 !important;
  padding: 12px 14px;
  background: transparent !important;
  min-height: 0;
}
.text-mode-card .mode-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 0 !important;
  background: transparent !important;
  border: 1px solid var(--border);
  color: var(--accent);
}
.text-mode-card .compact-mode-copy b {
  font-size: 1rem;
  font-weight: 600;
}
.text-mode-card .compact-mode-meta,
.text-mode-card .compact-mode-arrow {
  color: var(--muted);
}

.game-screen { --panel-accent: var(--accent); }
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, .6fr);
  gap: 18px;
  align-items: start;
}
.game-board-panel,
.text-side-panel {
  padding: 14px 16px 16px;
}
.text-board-wrap {
  margin: 26px 0 14px;
  justify-items: start;
}
.wordle-board {
  width: min(100%, 520px);
  gap: 10px;
}
.board-row {
  gap: 10px;
}
.tile {
  border-radius: 0 !important;
  border: 2px solid rgba(154, 169, 191, 0.38);
  background: transparent !important;
  color: #e8eef8;
  font-size: clamp(1.4rem, 4vw, 2.3rem);
  font-weight: 700;
}
.tile.green { background: #59b886 !important; border-color: #59b886; }
.tile.yellow { background: #ceb056 !important; border-color: #ceb056; }
.tile.gray { background: #556174 !important; border-color: #556174; }
.game-panel-footer {
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.text-side-panel {
  display: grid;
  gap: 14px;
}
.result-title {
  font-size: 2rem;
  color: var(--panel-accent, var(--accent));
}
.result-stats {
  display: grid;
  gap: 18px;
}
.result-stat-block {
  display: grid;
  gap: 5px;
}
.result-stat-label {
  color: var(--muted);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.result-stat-value {
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 600;
}
.text-guess-entry {
  width: 100%;
  margin: 6px 0 0;
  grid-template-columns: minmax(0,1fr) auto;
}
.text-guess-input,
.guess-input {
  background: transparent !important;
  border: 1px solid var(--border);
  border-radius: 0 !important;
  color: #f3f7fd;
  min-height: 48px;
  font-size: 1rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.text-guess-input::placeholder { color: #71819a; letter-spacing: .04em; text-transform:none; }
.btn,
.icon-btn,
.nav-btn,
.inventory-chip,
.reward-chip,
.leader-pos,
.stat,
.shop-item-icon,
.skin-preview,
.overlay-card {
  border-radius: 0 !important;
}
.btn {
  border: 1px solid var(--border);
  background: transparent !important;
  color: var(--text);
}
.btn.primary {
  background: transparent !important;
  border-color: var(--panel-accent, var(--accent));
  color: var(--panel-accent, var(--accent));
}
.btn.primary:disabled { opacity:.45; }
.text-panel-btn { min-width: 110px; }
.notice {
  margin-top: 10px;
  color: var(--muted);
  font-size: .86rem;
}
.boost-row {
  width: 100%;
  margin: 0;
}
.boost-row .btn {
  white-space: nowrap;
}
.game-exit-btn {
  justify-self: start;
}
.word-reveal-title {
  font-size: clamp(1.8rem, 5.2vw, 3rem);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.word-reveal-sub {
  margin-top: 18px;
  color: var(--muted);
  font-size: .92rem;
}
.text-reward-row {
  margin-top: 18px;
}
.reward-chip,
.inventory-chip {
  background: transparent !important;
  border: 1px solid var(--border);
}

/* profile/shop/skins minimal text-like */
.profile-card,
.skin-current,
.inventory-compact,
.result-card,
.list,
.shop-compact-item,
.skin-card {
  padding: 14px;
}
.profile-avatar {
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--border);
}
.stats {
  gap: 10px;
}
.stat {
  border: 1px solid var(--border);
  background: transparent !important;
}
.shop-compact-item {
  border: 1px solid var(--border);
  background: transparent !important;
}
.shop-item-icon,
.icon-btn {
  background: transparent !important;
  border: 1px solid var(--border);
}
.shop-inline-meta,
.skin-state,
.profile-chat,
.leader-score,
.muted {
  color: var(--muted);
}
.shop-copy b,
.profile-name,
.leader-name { color: #f1f5fb; }
.skin-grid {
  display: grid;
  gap: 10px;
}
.skin-card {
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
}
.skin-preview {
  padding: 8px;
}
.preview-board { gap: 4px; }
.preview-keys { gap: 4px; }
.theme-pill { display:none; }
.bottom-nav {
  background: var(--bg) !important;
  border-top: 1px solid rgba(255,255,255,.07);
}
.nav-btn {
  color: var(--muted);
  background: transparent !important;
}
.nav-btn.active {
  border: 0;
  color: #f2f6fc;
}
.nav-btn.active .icon { color: var(--accent); }
.overlay-backdrop {
  background: rgba(8,10,14,.82);
}
.overlay-card {
  background: var(--bg) !important;
  border: 1px solid var(--border);
}
.status-banner,
.demo-banner {
  border: 1px solid var(--border);
  border-radius: 0 !important;
  background: transparent !important;
}
.loading {
  min-height: 36vh;
}
.spinner {
  border-top-color: var(--accent);
}

@media (max-width: 860px) {
  .text-summary-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .game-layout {
    grid-template-columns: 1fr;
  }
  .wordle-board { width: min(100%, 420px); }
  .result-stat-value { font-size: 1.85rem; }
  .skin-card { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .content { padding: 16px 14px calc(96px + var(--safe-bottom)); }
  .text-overline { font-size: 1.7rem; }
  .text-panel-title { font-size: 1.25rem; }
  .text-player-name { font-size: 1.8rem; }
  .text-summary-bar { gap: 8px; }
  .summary-value, .metric-value { font-size: 1.05rem; }
  .text-guess-entry { grid-template-columns: 1fr; }
  .word-reveal-title { font-size: 1.9rem; }
}

/* ===== UI reset v6: board-first + everything on home ===== */
.bottom-nav {
  grid-template-columns: repeat(3, 1fr) !important;
}
.home-mast {
  margin-bottom: 10px;
}
.home-mast .text-overline {
  font-size: clamp(1.7rem, 5vw, 2.35rem);
}
.home-summary {
  margin-bottom: 12px;
}
.home-daily {
  padding: 13px 14px 12px;
  margin: 0 0 12px;
}
.home-daily .panel-rule {
  width: 58px;
  height: 4px;
  margin-bottom: 10px;
}
.home-daily .text-panel-title {
  font-size: 1.18rem;
}
.home-daily-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  color: var(--muted);
  font-size: .78rem;
  letter-spacing: .04em;
}
.home-section-label {
  margin: 14px 0 7px;
  color: var(--muted);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.home-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 7px;
}
.home-mode-grid .text-mode-card {
  min-height: 68px;
  padding: 9px 10px;
}
.home-mode-grid .mode-icon-wrap {
  width: 28px;
  height: 28px;
}
.home-mode-grid .compact-mode-copy b {
  font-size: .84rem;
}
.home-mode-grid .compact-mode-meta {
  font-size: .68rem;
}
.home-mode-grid .compact-mode-arrow {
  display: none;
}
.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 7px;
}
.utility-card {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  min-height: 58px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 0;
  text-align: left;
}
.utility-icon {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.utility-icon .icon {
  width: 17px;
  height: 17px;
}
.utility-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.utility-copy b {
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.utility-copy span {
  color: var(--muted);
  font-size: .64rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Game: the board is the hero, not the result layout */
.minimal-game-screen {
  max-width: 860px;
  margin: 0 auto;
}
.minimal-game-mast {
  margin-bottom: 14px;
}
.minimal-game-mast .accent-rule {
  width: 64px;
  height: 5px;
  margin-bottom: 12px;
}
.minimal-game-mast .text-overline {
  font-size: clamp(1.35rem, 4.5vw, 2rem);
}
.minimal-game-layout {
  display: grid;
  grid-template-columns: 116px minmax(0,1fr);
  gap: 16px;
  align-items: start;
}
.game-meta-rail {
  display: grid;
  gap: 15px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.meta-rail-item {
  display: grid;
  gap: 3px;
}
.meta-rail-item span {
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.meta-rail-item b {
  font-size: .88rem;
  line-height: 1.2;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.wordle-field-shell {
  --field-line: color-mix(in srgb, var(--accent) 30%, var(--border));
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 10px 8px;
  background: transparent;
}
.field-title {
  text-align: center;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: clamp(1.5rem, 5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: .36em;
  padding-left: .36em;
  margin: 2px 0 10px;
}
.field-line {
  width: 100%;
  height: 1px;
  background: var(--field-line);
}
.field-board-zone {
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) 18px;
  gap: 10px;
  align-items: stretch;
  padding: 12px 0;
}
.field-rail {
  position: relative;
  min-height: 320px;
}
.field-rail::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  background: var(--panel-accent, var(--accent));
  box-shadow:
    0 34px 0 var(--panel-accent, var(--accent)),
    0 68px 0 var(--panel-accent, var(--accent)),
    0 102px 0 var(--panel-accent, var(--accent)),
    0 136px 0 var(--panel-accent, var(--accent)),
    0 170px 0 var(--panel-accent, var(--accent)),
    0 204px 0 var(--panel-accent, var(--accent)),
    0 238px 0 var(--panel-accent, var(--accent)),
    0 272px 0 var(--panel-accent, var(--accent)),
    0 306px 0 var(--panel-accent, var(--accent));
  opacity: .9;
}
.field-board-zone .wordle-board {
  width: min(100%, 420px);
  margin: 0 auto;
  gap: 7px;
}
.field-board-zone .board-row {
  gap: 7px;
}
.field-board-zone .tile {
  border: 1.5px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  background: transparent !important;
  border-radius: 0 !important;
  font-size: clamp(1.25rem, 5vw, 1.9rem);
}
.field-board-zone .tile.green {
  background: var(--green) !important;
  border-color: var(--green);
}
.field-board-zone .tile.yellow {
  background: var(--yellow) !important;
  border-color: var(--yellow);
}
.field-board-zone .tile.gray {
  background: var(--gray) !important;
  border-color: var(--gray);
}
.field-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 0;
  color: var(--muted);
  font-size: .74rem;
}
.minimal-guess-entry {
  width: min(100%, 420px);
  margin: 12px auto 0;
}
.minimal-guess-input {
  min-height: 43px;
}
.wordle-field-shell .boost-row {
  width: min(100%, 420px);
  margin: 8px auto 0;
}
.wordle-field-shell .boost-row .btn {
  min-height: 34px;
  padding: 7px 9px;
  font-size: .72rem;
}
.field-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 420px);
  margin: 10px auto 0;
  color: var(--muted);
  font-size: .74rem;
}
.field-footer .back-btn {
  width: 34px;
  height: 34px;
}
.minimal-result {
  max-width: 620px;
  margin: 12px auto 0;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: .8rem;
}
.minimal-result b {
  color: var(--panel-accent, var(--accent));
  font-size: 1rem;
}

@media (max-width: 760px) {
  .home-mode-grid {
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
  .home-tools-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .minimal-game-layout {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .game-meta-rail {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 8px;
    padding: 8px 0;
  }
  .meta-rail-item {
    gap: 2px;
  }
  .meta-rail-item b {
    font-size: .78rem;
  }
  .wordle-field-shell {
    padding-inline: 0;
  }
  .field-board-zone {
    grid-template-columns: 12px minmax(0,1fr) 12px;
    gap: 5px;
  }
  .field-rail::before {
    width: 3px;
    height: 3px;
  }
}

@media (max-width: 460px) {
  .home-mode-grid {
    grid-template-columns: 1fr;
  }
  .home-mode-grid .text-mode-card {
    min-height: 56px;
  }
  .field-title {
    font-size: 1.35rem;
    letter-spacing: .28em;
    padding-left: .28em;
  }
  .field-board-zone .wordle-board {
    gap: 5px;
  }
  .field-board-zone .board-row {
    gap: 5px;
  }
  .game-meta-rail {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .minimal-result {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ===== UI reset v7: one-screen home + tap-to-type daily ===== */
.home-shell,
.game-shell {
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(66px + var(--safe-bottom));
}
.home-shell .topbar,
.game-shell .topbar {
  flex: 0 0 auto;
  margin-bottom: 0;
}
.home-content,
.game-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 10px 14px 0 !important;
  width: min(100%, 960px);
}
.home-content {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  gap: 8px;
}
.home-content .home-mast {
  margin: 0;
}
.home-content .home-mast .accent-rule {
  width: 48px;
  height: 4px;
  margin-bottom: 7px;
}
.home-content .home-mast .text-overline {
  font-size: clamp(1.2rem, 4.5vw, 1.65rem);
}
.home-content .home-mast .text-subline {
  margin-top: 4px;
  font-size: .7rem;
}
.home-summary {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 0 !important;
}
.home-summary .summary-cell {
  min-height: 48px;
  padding: 7px 8px;
}
.home-summary .summary-label {
  font-size: .56rem;
}
.home-summary .summary-value {
  margin-top: 3px;
  font-size: .88rem;
}
.home-daily-launch {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 8px 10px 8px 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
  border-radius: 0;
}
.home-daily-rule {
  align-self: stretch;
  background: var(--panel-accent, var(--accent));
}
.home-daily-copy {
  display: grid;
  gap: 1px;
}
.home-daily-kicker {
  color: var(--muted);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.home-daily-title {
  font-size: .98rem;
  font-weight: 600;
}
.home-daily-desc {
  color: var(--muted);
  font-size: .68rem;
}
.home-daily-play {
  color: var(--panel-accent, var(--accent));
  font-size: .76rem;
  white-space: nowrap;
}
.home-mode-grid-fixed {
  grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 0;
}
.home-mode-grid-fixed .text-mode-card {
  min-height: 56px !important;
  padding: 7px 8px !important;
}
.home-mode-grid-fixed .mode-icon-wrap {
  width: 24px !important;
  height: 24px !important;
}
.home-mode-grid-fixed .compact-mode-head {
  gap: 6px;
}
.home-mode-grid-fixed .compact-mode-copy b {
  font-size: .7rem !important;
}
.home-mode-grid-fixed .compact-mode-meta {
  font-size: .56rem !important;
  line-height: 1.1;
}
.home-mode-grid-fixed .compact-mode-arrow {
  display: none !important;
}
.home-tools-grid-fixed {
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 6px !important;
  margin: 0;
}
.home-tools-grid-fixed .utility-card {
  grid-template-columns: 20px minmax(0,1fr);
  gap: 5px;
  min-height: 52px;
  padding: 6px;
}
.home-tools-grid-fixed .utility-icon {
  width: 20px;
  height: 20px;
}
.home-tools-grid-fixed .utility-icon .icon {
  width: 14px;
  height: 14px;
}
.home-tools-grid-fixed .utility-copy b {
  font-size: .66rem;
}
.home-tools-grid-fixed .utility-copy span {
  display: block;
  white-space: normal;
  line-height: 1.12;
  font-size: .54rem;
}

/* Daily: no stats rail, no visible text field. Tap the board to summon native keyboard. */
.game-content {
  display: grid;
  align-items: start;
}
.tap-game-screen {
  width: min(100%, 680px);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  align-content: start;
}
.tap-game-mast {
  margin: 0 0 7px;
}
.tap-game-mast .accent-rule {
  width: 48px;
  height: 4px;
  margin-bottom: 7px;
}
.game-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.tap-game-mast .text-overline {
  font-size: clamp(1.05rem, 4.2vw, 1.45rem);
}
.tap-game-mast .text-subline {
  margin-top: 3px;
  font-size: .64rem;
}
.game-attempt-counter {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .64rem;
  letter-spacing: .11em;
  white-space: nowrap;
}
.tap-wordle-field {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto auto auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  align-content: center;
}
.tap-wordle-field .field-title {
  margin: 0 0 6px;
  font-size: clamp(1.1rem, 4.5vw, 1.55rem);
}
.tappable-board-zone {
  cursor: text;
  user-select: none;
  -webkit-user-select: none;
  padding: 7px 0;
  min-height: 0;
  outline: none;
}
.tappable-board-zone:focus-visible .wordle-board,
.tappable-board-zone.typing .wordle-board {
  outline: 1px solid color-mix(in srgb, var(--panel-accent, var(--accent)) 48%, transparent);
  outline-offset: 5px;
}
.tap-game-screen .field-rail {
  min-height: 0;
}
.tap-game-screen .field-rail::before {
  top: 4%;
  height: 3px;
  width: 3px;
  box-shadow:
    0 11vh 0 var(--panel-accent, var(--accent)),
    0 22vh 0 var(--panel-accent, var(--accent)),
    0 33vh 0 var(--panel-accent, var(--accent)),
    0 44vh 0 var(--panel-accent, var(--accent));
}
.tap-game-screen .wordle-board {
  width: min(100%, 390px, calc((100dvh - 235px) * 5 / 6));
  margin: 0 auto;
  gap: 5px;
}
.tap-game-screen[data-rows="7"] .wordle-board {
  width: min(100%, 360px, calc((100dvh - 235px) * 5 / 7));
}
.tap-game-screen .board-row {
  gap: 5px;
}
.tap-game-screen .tile {
  font-size: clamp(1.05rem, 5vw, 1.65rem);
}
.native-word-input {
  position: fixed;
  right: 2px;
  bottom: 2px;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  font-size: 16px;
  caret-color: transparent;
}
.tap-to-type-hint {
  margin: 6px auto 0;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .04em;
  text-align: center;
}
.compact-field-hints {
  justify-content: center;
  padding-top: 5px;
  font-size: .62rem;
}
.tap-wordle-field .boost-row {
  width: min(100%, 390px);
  margin: 5px auto 0;
  gap: 4px;
}
.tap-wordle-field .boost-row .btn {
  min-height: 28px;
  padding: 4px 6px;
  font-size: .59rem;
}
.inline-game-result {
  width: min(100%, 390px);
  margin: 6px auto 0;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .64rem;
}
.inline-game-result b {
  color: var(--panel-accent, var(--accent));
}

/* Settings descriptions live on the cards. */
.settings-card-grid {
  gap: 8px;
}
.settings-info-card {
  grid-template-columns: 96px minmax(0,1fr) auto !important;
  gap: 10px !important;
  padding: 10px !important;
}
.settings-card-title {
  font-size: .86rem;
}
.settings-card-desc {
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.3;
}
.settings-state {
  color: var(--accent);
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.settings-state.locked {
  color: var(--muted);
}

@media (max-width: 520px) {
  .home-content,
  .game-content {
    padding-inline: 10px !important;
  }
  .home-summary {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
  .home-summary .summary-cell {
    padding-inline: 5px;
  }
  .home-mode-grid-fixed {
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
  }
  .home-tools-grid-fixed {
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  }
  .home-tools-grid-fixed .utility-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 2px;
    min-height: 50px;
  }
  .home-tools-grid-fixed .utility-copy span {
    font-size: .5rem;
  }
  .tap-game-screen .field-board-zone {
    grid-template-columns: 10px minmax(0,1fr) 10px;
    gap: 4px;
  }
  .settings-info-card {
    grid-template-columns: 78px minmax(0,1fr) !important;
  }
  .settings-info-card > .btn {
    grid-column: 1 / -1;
    min-height: 32px;
    padding: 5px 8px;
  }
}

@media (max-height: 700px) {
  .home-content,
  .game-content {
    padding-top: 6px !important;
  }
  .home-shell,
  .game-shell {
    padding-bottom: calc(58px + var(--safe-bottom));
  }
  .home-content {
    gap: 5px;
  }
  .home-content .home-mast .text-subline {
    display: none;
  }
  .home-summary .summary-cell {
    min-height: 42px;
    padding-block: 5px;
  }
  .home-daily-launch {
    min-height: 56px;
  }
  .home-mode-grid-fixed .text-mode-card,
  .home-tools-grid-fixed .utility-card {
    min-height: 46px !important;
  }
  .tap-game-screen .wordle-board {
    width: min(100%, 350px, calc((100dvh - 205px) * 5 / 6));
  }
  .tap-game-screen[data-rows="7"] .wordle-board {
    width: min(100%, 330px, calc((100dvh - 205px) * 5 / 7));
  }
  .tap-to-type-hint {
    margin-top: 3px;
  }
}

/* ===== UI reset v8: inventory on home + fixed row rails ===== */
.home-content {
  grid-template-rows: auto auto auto auto auto auto auto !important;
  gap: 5px !important;
  align-content: start !important;
}
.home-content .home-mast .accent-rule {
  margin-bottom: 5px;
}
.home-content .home-mast .text-subline {
  margin-top: 2px;
}
.home-summary .summary-cell {
  min-height: 42px !important;
  padding: 5px 7px !important;
}
.home-daily-launch {
  min-height: 54px !important;
  padding-block: 6px !important;
}
.home-mode-grid-fixed .text-mode-card {
  min-height: 48px !important;
  padding: 5px 7px !important;
}
.home-inventory-strip {
  min-width: 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5px 0;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
}
.home-strip-label {
  display: grid;
  gap: 1px;
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-strip-count {
  color: var(--text);
  font-size: .54rem;
  letter-spacing: .04em;
}
.home-inventory-items {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  overflow: hidden;
}
.home-inventory-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: 1px solid var(--border);
  padding: 4px 5px;
  color: var(--muted);
  font-size: .55rem;
  white-space: nowrap;
}
.home-inventory-chip .icon {
  width: 12px;
  height: 12px;
  color: var(--accent);
}
.home-inventory-chip b {
  color: var(--text);
  font-size: .58rem;
}
.home-inventory-empty,
.home-inventory-more {
  color: var(--muted);
  font-size: .58rem;
}
.home-tools-primary {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 5px !important;
}
.home-tools-primary .utility-card,
.home-extra-grid .utility-card {
  min-height: 42px !important;
  padding: 5px 7px !important;
}
.home-tools-primary .utility-copy b,
.home-extra-grid .utility-copy b {
  font-size: .64rem;
}
.home-tools-primary .utility-copy span,
.home-extra-grid .utility-copy span {
  font-size: .52rem;
}
.home-extra-block {
  min-width: 0;
}
.home-extra-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 1px 0 4px;
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.home-extra-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--border);
}
.home-extra-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
}

/* Do not stretch the daily field on tall screens. */
.tap-game-screen {
  height: auto !important;
  min-height: 0 !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}
.tap-wordle-field {
  grid-template-rows: auto auto auto auto auto auto !important;
  align-content: start !important;
  min-height: 0 !important;
}
.tappable-board-zone {
  align-items: stretch !important;
  padding-block: 7px !important;
}
.tap-game-screen .wordle-board {
  width: min(100%, 390px, calc((100dvh - 225px) * 5 / 6)) !important;
  margin: 0 auto !important;
  gap: 5px !important;
}
.tap-game-screen[data-rows="7"] .wordle-board {
  width: min(100%, 360px, calc((100dvh - 225px) * 5 / 7)) !important;
}
.tap-game-screen .board-row {
  gap: 5px !important;
}

/* One rail dot per Wordle row. The rail uses the same row count and gap as the board,
   so the point-to-point distance is dictated by the board rows rather than viewport height. */
.tap-game-screen .field-rail {
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  grid-template-rows: repeat(var(--rail-rows, 6), minmax(0, 1fr));
  gap: 5px;
  align-self: stretch;
}
.tap-game-screen .field-rail::before {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}
.rail-dot-slot {
  min-height: 0;
  display: grid;
  place-items: center;
}
.rail-dot {
  width: 3px;
  height: 3px;
  display: block;
  background: var(--panel-accent, var(--accent));
}

@media (max-width: 520px) {
  .home-inventory-strip {
    grid-template-columns: 58px minmax(0,1fr);
    gap: 5px;
  }
  .home-inventory-chip {
    padding-inline: 4px;
  }
  .home-inventory-chip > span:not(.icon) {
    display: none;
  }
  .home-tools-primary .utility-card,
  .home-extra-grid .utility-card {
    grid-template-columns: 18px minmax(0,1fr) !important;
    justify-items: stretch !important;
    text-align: left !important;
    gap: 5px !important;
  }
  .home-tools-primary .utility-icon,
  .home-extra-grid .utility-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

@media (min-height: 820px) {
  .game-content {
    padding-top: 12px !important;
  }
  .tap-game-mast {
    margin-bottom: 8px !important;
  }
  .tappable-board-zone {
    padding-block: 8px !important;
  }
}

/* ===== UI v9: status + inventory + deterministic reveal animation ===== */
.home-daily-launch {
  grid-template-columns: 5px minmax(0,1fr) auto auto !important;
  gap: 8px !important;
}
.mode-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: .52rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-won {
  color: #74d59c;
  border-color: rgba(116,213,156,.42);
}
.status-lost {
  color: #e8898f;
  border-color: rgba(232,137,143,.42);
}
.status-draw {
  color: #dfbd67;
  border-color: rgba(223,189,103,.42);
}
.status-active,
.status-ready,
.status-invite {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}
.status-skipped,
.status-cancelled,
.status-expired,
.status-not_started {
  color: var(--muted);
}
.compact-mode-copy .mode-status {
  width: fit-content;
  margin-top: 3px;
}
.home-tools-three {
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
}

.inventory-screen-grid {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
}
.inventory-item-card,
.inventory-empty-card {
  border: 1px solid var(--border);
  padding: 10px;
  background: transparent;
}
.inventory-item-head {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
}
.inventory-item-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.inventory-item-copy b {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory-item-copy span {
  font-size: .64rem;
}
.inventory-item-qty {
  color: var(--accent);
  font-size: .82rem;
}
.inventory-empty-card {
  display: grid;
  gap: 5px;
}

/* Typing must not replay reveal/pop animations. Only a newly submitted row flips. */
.tile.filled,
.tile.revealed {
  animation: none !important;
}
.tile.reveal-animate {
  transform-origin: center;
  backface-visibility: hidden;
  animation: wordle-row-flip .54s cubic-bezier(.22,.72,.26,1) var(--flip-delay,0ms) both !important;
}
@keyframes wordle-row-flip {
  0%   { transform: perspective(520px) rotateX(0deg); filter: brightness(1); }
  47%  { transform: perspective(520px) rotateX(88deg); filter: brightness(.7); }
  53%  { transform: perspective(520px) rotateX(-88deg); filter: brightness(.84); }
  100% { transform: perspective(520px) rotateX(0deg); filter: brightness(1); }
}
.tile.reveal-animate {
  transform-style: preserve-3d;
}

.board-row {
  position: relative;
}
.board-row.has-xp-multiplier::after {
  content: attr(data-multiplier);
  position: absolute;
  right: -31px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--panel-accent,var(--accent));
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.combo-flash {
  width: fit-content;
  margin: 4px auto 0;
  color: var(--panel-accent,var(--accent));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
  animation: combo-flash 1.15s ease-out both;
}
@keyframes combo-flash {
  0% { opacity: 0; transform: translateY(5px) scale(.96); }
  18% { opacity: 1; transform: translateY(0) scale(1.04); }
  72% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-3px) scale(.98); }
}

@media (max-width: 520px) {
  .home-daily-launch {
    grid-template-columns: 4px minmax(0,1fr) auto !important;
  }
  .home-daily-launch > .mode-status {
    grid-column: 2;
    justify-self: start;
  }
  .home-daily-play {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: center;
  }
  .home-tools-three {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  .home-tools-three .utility-card {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 2px !important;
  }
  .board-row.has-xp-multiplier::after {
    right: -25px;
    font-size: .5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tile.reveal-animate,
  .combo-flash {
    animation: none !important;
  }
}

/* ===== Owner Debug Space ===== */
.debug-shell .content {
  max-width: 1080px;
}
.debug-control-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, .55fr);
  gap: 10px;
  margin: 8px 0 10px;
}
.debug-control {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.debug-select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg);
  color: var(--text);
}
.debug-notice {
  padding: 9px 10px;
  margin-bottom: 10px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  background: transparent;
  font-size: .82rem;
  line-height: 1.4;
}
.debug-preview {
  border: 1px solid var(--border);
  padding: 14px;
  min-height: 360px;
  background: transparent;
}
.debug-preview-head {
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.debug-preview-desc {
  margin: 4px 0 14px;
  color: var(--muted);
  font-size: .84rem;
}
.debug-field {
  width: min(100%, 600px);
  margin: 0 auto;
}
.debug-field .field-board-zone {
  cursor: default;
}
.debug-combo {
  width: fit-content;
  margin: 8px auto 0;
  padding: 5px 8px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.debug-skin-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.debug-wallet {
  margin-bottom: 9px;
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.debug-training-row {
  width: min(100%, 460px);
  margin: 0 auto;
}
.debug-empty {
  padding: 20px 0;
  color: var(--muted);
}
@media (max-width: 640px) {
  .debug-control-bar { grid-template-columns: 1fr; }
  .debug-preview { padding: 10px; min-height: 0; }
  .debug-skin-grid { grid-template-columns: 1fr; }
}

/* ===== ui11: playable debug + corrected skin layout + distinct Holo/Radiant ===== */

/* Skin cards: actions must always stay inside the card. */
.settings-card-grid.skin-grid,
.debug-skin-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 285px), 1fr)) !important;
}
.skin-card.settings-info-card {
  min-width: 0;
  grid-template-columns: 92px minmax(0, 1fr) !important;
  grid-template-areas:
    "preview copy"
    "preview action";
  align-items: start !important;
  overflow: hidden;
}
.skin-card.settings-info-card > .skin-preview {
  grid-area: preview;
  width: 92px;
  max-width: 100%;
  min-width: 0;
  align-self: stretch;
}
.skin-card.settings-info-card > .skin-copy {
  grid-area: copy;
  min-width: 0;
  overflow-wrap: anywhere;
}
.skin-card.settings-info-card > .btn {
  grid-area: action;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  min-height: 32px;
  padding: 6px 10px;
  white-space: normal;
}
.skin-badges {
  max-width: 100%;
}

/* Owner-only playable debug sandbox. */
.debug-sandbox {
  border: 1px solid var(--border);
  padding: 12px;
  margin-bottom: 12px;
  min-width: 0;
}
.debug-sandbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.debug-sandbox-head h3 {
  margin: 2px 0 0;
  font-size: 1.08rem;
}
.debug-known-word {
  flex: 0 0 auto;
  border: 1px solid var(--accent);
  padding: 6px 8px;
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.debug-sandbox-controls {
  display: grid;
  grid-template-columns: minmax(120px,.8fr) minmax(110px,.7fr) minmax(150px,1fr) auto;
  gap: 8px;
  align-items: end;
  margin-bottom: 10px;
}
.debug-answer-input {
  text-transform: uppercase;
  letter-spacing: .12em;
}
.debug-game-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 8px;
  font-size: .72rem;
}
.debug-game-status-row .settings-state.won { color: var(--green); }
.debug-game-status-row .settings-state.lost { color: #e57c83; }
.debug-play-field {
  width: min(100%, 560px);
  margin: 0 auto;
  padding-inline: 4px;
}
.debug-play-field .field-board-zone {
  cursor: text;
  outline: none;
}
.debug-play-field .wordle-board {
  width: min(100%, 390px);
}
.debug-tap-hint {
  margin-top: 7px;
  text-align: center;
  color: var(--muted);
  font-size: .65rem;
}
.debug-section-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 9px;
  color: var(--muted);
  font-size: .68rem;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.debug-section-divider i {
  height: 1px;
  flex: 1;
  background: var(--border);
}

/* Holographic theme: actual moving iridescence, not a static violet palette. */
@keyframes preekoHoloShift {
  0% { background-position: 0% 35%; }
  50% { background-position: 100% 65%; }
  100% { background-position: 0% 35%; }
}
@keyframes preekoHoloSheen {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
body[data-skin="holo"] {
  background:
    linear-gradient(125deg,
      #080b16 0%,
      #10182d 16%,
      #22354a 30%,
      #34213f 45%,
      #173f3e 59%,
      #293058 73%,
      #120f26 87%,
      #080b16 100%) !important;
  background-size: 260% 260% !important;
  animation: preekoHoloShift 11s ease-in-out infinite;
}
body[data-skin="holo"] .topbar,
body[data-skin="holo"] .bottom-nav {
  background: rgba(9, 12, 24, .86) !important;
}
body[data-skin="holo"] .card,
body[data-skin="holo"] .item,
body[data-skin="holo"] .debug-sandbox,
body[data-skin="holo"] .debug-preview,
body[data-skin="holo"] .skin-card,
body[data-skin="holo"] .summary-cell,
body[data-skin="holo"] .metric-pill {
  background: rgba(15, 20, 36, .62) !important;
  border-color: rgba(188, 204, 255, .25) !important;
}
body[data-skin="holo"] .accent-rule,
body[data-skin="holo"] .panel-rule,
body[data-skin="holo"] .field-line,
body[data-skin="holo"] .preview-bar {
  background: linear-gradient(90deg,#85e8ff,#c8a6ff,#ffbfe5,#ffe0a4,#8cf1ca,#85e8ff) !important;
  background-size: 200% 100% !important;
  animation: preekoHoloSheen 4.5s linear infinite;
}
body[data-skin="holo"] .brand-mark,
body[data-skin="holo"] .mode-icon-wrap,
body[data-skin="holo"] .shop-item-icon {
  color: #eef7ff !important;
  border-color: rgba(198,184,255,.48) !important;
}
.skin-preview[data-preview-skin="holo"] {
  background:
    linear-gradient(125deg,#111729,#24445a,#49345d,#245a51,#444f80,#241b47,#111729) !important;
  background-size: 240% 240% !important;
  animation: preekoHoloShift 7s ease-in-out infinite;
}
.skin-preview[data-preview-skin="holo"] .preview-bar {
  background: linear-gradient(90deg,#7eeaff,#c7a5ff,#ffbde1,#ffe094,#8cf0c5,#7eeaff) !important;
  background-size: 200% 100% !important;
  animation: preekoHoloSheen 3s linear infinite;
}

/* Radiant: intentionally bright ivory/white, with gold-gradient accents. */
body[data-skin="radiant"] {
  background: #f7f4ec !important;
  color: var(--text) !important;
}
body[data-skin="radiant"] .topbar,
body[data-skin="radiant"] .bottom-nav {
  background: #fbf9f3 !important;
  border-color: rgba(154,119,47,.2) !important;
}
body[data-skin="radiant"] .card,
body[data-skin="radiant"] .item,
body[data-skin="radiant"] .debug-sandbox,
body[data-skin="radiant"] .debug-preview,
body[data-skin="radiant"] .skin-card,
body[data-skin="radiant"] .summary-cell,
body[data-skin="radiant"] .metric-pill,
body[data-skin="radiant"] .btn,
body[data-skin="radiant"] .debug-select,
body[data-skin="radiant"] .icon-btn {
  background: rgba(255,253,248,.82) !important;
  border-color: rgba(154,119,47,.25) !important;
  color: var(--text) !important;
}
body[data-skin="radiant"] .text-overline,
body[data-skin="radiant"] .text-player-name,
body[data-skin="radiant"] .summary-value,
body[data-skin="radiant"] .metric-value,
body[data-skin="radiant"] .shop-copy b,
body[data-skin="radiant"] .profile-name,
body[data-skin="radiant"] .leader-name,
body[data-skin="radiant"] .field-title,
body[data-skin="radiant"] .tile,
body[data-skin="radiant"] .guess-input,
body[data-skin="radiant"] .debug-select {
  color: var(--text) !important;
}
body[data-skin="radiant"] .muted,
body[data-skin="radiant"] .text-subline,
body[data-skin="radiant"] .settings-card-desc,
body[data-skin="radiant"] .debug-preview-desc,
body[data-skin="radiant"] .debug-tap-hint {
  color: var(--muted) !important;
}
body[data-skin="radiant"] .accent-rule,
body[data-skin="radiant"] .panel-rule,
body[data-skin="radiant"] .field-line,
body[data-skin="radiant"] .preview-bar {
  background: linear-gradient(90deg,#8c6115 0%,#d5ad53 34%,#f5dfa2 52%,#bd8b2d 78%,#8c6115 100%) !important;
}
body[data-skin="radiant"] .btn.primary {
  border-color: #ad7b1f !important;
  color: #8c6115 !important;
}
body[data-skin="radiant"] .field-board-zone .tile {
  border-color: rgba(154,119,47,.34) !important;
  background: #fffdf8 !important;
}
body[data-skin="radiant"] .field-board-zone .tile.green { background: var(--green) !important; color:#fff !important; }
body[data-skin="radiant"] .field-board-zone .tile.yellow { background: var(--yellow) !important; color:#fff !important; }
body[data-skin="radiant"] .field-board-zone .tile.gray { background: var(--gray) !important; color:#fff !important; }
.skin-preview[data-preview-skin="radiant"] {
  background: linear-gradient(135deg,#fffdf8 0%,#f7f1e2 55%,#ead8aa 100%) !important;
  border-color: rgba(154,119,47,.38) !important;
}
.skin-preview[data-preview-skin="radiant"] .preview-bar {
  background: linear-gradient(90deg,#8c6115,#e2bc63,#f6dfa0,#a9751d) !important;
}

@media (max-width: 720px) {
  .debug-sandbox-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .debug-sandbox-controls > .btn {
    width: 100%;
    align-self: stretch;
  }
}
@media (max-width: 520px) {
  .skin-card.settings-info-card {
    grid-template-columns: 72px minmax(0, 1fr) !important;
    grid-template-areas:
      "preview copy"
      "action action";
  }
  .skin-card.settings-info-card > .skin-preview { width: 72px; }
  .skin-card.settings-info-card > .btn {
    width: 100%;
    justify-self: stretch;
  }
  .debug-sandbox-head {
    display: grid;
    grid-template-columns: 1fr;
  }
  .debug-known-word { justify-self: start; }
  .debug-sandbox-controls { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-skin="holo"],
  body[data-skin="holo"] .accent-rule,
  body[data-skin="holo"] .panel-rule,
  body[data-skin="holo"] .field-line,
  body[data-skin="holo"] .preview-bar,
  .skin-preview[data-preview-skin="holo"] {
    animation: none !important;
  }
}

/* ===== UX v12: fixed rails, timer, progression, result modal, combo lane ===== */
.home-progress-panel {
  display: grid;
  gap: 7px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  background: transparent;
  margin-bottom: 8px;
}
.home-level-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.home-level-identity,
.home-currency {
  display: flex;
  align-items: center;
  gap: 7px;
}
.home-stat-icon {
  width: 17px;
  height: 17px;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  flex: 0 0 auto;
}
.home-stat-icon .icon,
.home-stat-icon svg {
  width: 100%;
  height: 100%;
}
.home-level-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.home-level-numbers {
  color: var(--muted);
  font-size: .63rem;
  white-space: nowrap;
}
.home-level-track {
  height: 5px;
  width: 100%;
  border: 1px solid var(--border);
  overflow: hidden;
  background: transparent;
}
.home-level-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width .35s ease;
}
body[data-skin="radiant"] .home-level-fill {
  background: linear-gradient(90deg,#aa741c 0%,#f3dda0 48%,#aa741c 100%);
}
body[data-skin="holo"] .home-level-fill {
  background: linear-gradient(90deg,#86e8ff,#cab7ff,#f3bfe9,#e7d48c,#86e8ff);
  background-size: 240% 100%;
  animation: holo-level-shift 5s linear infinite;
}
@keyframes holo-level-shift { to { background-position: 240% 0; } }
.home-currency-row {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.home-currency {
  min-width: 0;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.home-currency-copy {
  display: grid;
  min-width: 0;
}
.home-currency-copy small {
  color: var(--muted);
  font-size: .54rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.home-currency-copy b {
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-title-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center !important;
  gap: 9px !important;
}
.game-timer-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: .62rem;
  letter-spacing: .06em;
  white-space: nowrap;
}
.game-timer-chip .icon {
  width: 14px;
  height: 14px;
  color: var(--panel-accent,var(--accent));
}

/* Rails are full board height. One dot is centered on each Wordle row. */
.tappable-board-zone {
  display: grid !important;
  grid-template-columns: 14px minmax(0,390px) 14px !important;
  justify-content: center !important;
  align-items: stretch !important;
  column-gap: 9px !important;
  padding-block: 7px !important;
}
.tap-game-screen[data-rows="7"] .tappable-board-zone {
  grid-template-columns: 14px minmax(0,360px) 14px !important;
}
.tap-game-screen .field-rail {
  position: relative !important;
  align-self: stretch !important;
  height: 100% !important;
  min-height: 100% !important;
  display: grid !important;
  grid-template-rows: repeat(var(--rail-rows,6),minmax(0,1fr)) !important;
  gap: 5px !important;
  overflow: visible !important;
}
.tap-game-screen .field-rail::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 1px !important;
  height: auto !important;
  transform: translateX(-50%) !important;
  background: color-mix(in srgb,var(--panel-accent,var(--accent)) 18%,transparent) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
.rail-dot-slot {
  position: relative;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  z-index: 1;
}
.rail-dot {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
  background: var(--panel-accent,var(--accent)) !important;
  box-shadow: 0 0 0 2px var(--bg);
}
.left-rail .rail-dot { transform: translateX(-1px); }
.right-rail .rail-dot { transform: translateX(1px); }

/* Smooth single-direction tile hinge; no 88deg -> -88deg snap. */
.tile.reveal-animate {
  transform-origin: 50% 50% !important;
  transform-style: preserve-3d !important;
  backface-visibility: hidden !important;
  will-change: transform,opacity !important;
  animation: wordle-smooth-flip .66s cubic-bezier(.2,.72,.24,1) var(--flip-delay,0ms) both !important;
}
@keyframes wordle-smooth-flip {
  0% { transform: perspective(700px) rotateX(0deg) scale(1); opacity:1; }
  46% { transform: perspective(700px) rotateX(88deg) scale(.985); opacity:.82; }
  54% { transform: perspective(700px) rotateX(88deg) scale(.985); opacity:.82; }
  100% { transform: perspective(700px) rotateX(0deg) scale(1); opacity:1; }
}
.board-row.has-xp-multiplier::after { display:none !important; }
.combo-flash { display:none !important; }

.combo-lane {
  min-height: 34px;
  display: grid;
  grid-template-columns: auto 42px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
.combo-lane-label {
  color: var(--muted);
  font-size: .54rem;
  letter-spacing: .14em;
}
.combo-lane-main {
  font-size: .92rem;
  color: var(--muted);
  text-align: center;
}
.combo-lane-xp {
  color: var(--muted);
  font-size: .58rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.combo-lane.active {
  border-color: color-mix(in srgb,var(--panel-accent,var(--accent)) 62%,var(--border));
  animation: combo-lane-hit .72s cubic-bezier(.18,.82,.24,1) both;
}
.combo-lane.active .combo-lane-main {
  color: var(--panel-accent,var(--accent));
  font-size: 1.12rem;
  animation: combo-number-hit .82s cubic-bezier(.17,.84,.23,1) both;
}
.combo-lane.active .combo-lane-xp {
  color: var(--text);
  font-weight: 700;
}
.combo-lane.active::before,
.combo-lane.active::after {
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:var(--panel-accent,var(--accent));
  border-radius:50%;
  pointer-events:none;
  animation: combo-particle .82s ease-out both;
}
.combo-lane.active::before { left:44%; top:50%; --px:-42px; --py:-14px; }
.combo-lane.active::after { left:48%; top:50%; --px:48px; --py:12px; animation-delay:.04s; }
.combo-lane.combo-x4,
.combo-lane.combo-x5 { box-shadow: 0 0 18px color-mix(in srgb,var(--panel-accent,var(--accent)) 22%,transparent); }
.combo-lane.combo-x5 .combo-lane-main { font-size:1.28rem; }
@keyframes combo-lane-hit {
  0% { transform:scale(.985); opacity:.6; }
  36% { transform:scale(1.012); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}
@keyframes combo-number-hit {
  0% { transform:scale(.55); opacity:0; }
  38% { transform:scale(1.32); opacity:1; }
  62% { transform:scale(.94); }
  100% { transform:scale(1); }
}
@keyframes combo-particle {
  0% { transform:translate(0,0) scale(.4); opacity:1; }
  100% { transform:translate(var(--px),var(--py)) scale(0); opacity:0; }
}

.result-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(5,7,10,.82);
  animation: result-backdrop-in .18s ease-out both;
}
.result-modal-card {
  --result-accent: var(--accent);
  width: min(100%,460px);
  border: 1px solid color-mix(in srgb,var(--result-accent) 58%,var(--border));
  background: var(--bg);
  padding: 18px;
  color: var(--text);
  animation: result-card-in .34s cubic-bezier(.18,.8,.22,1) both;
  box-shadow: 0 18px 60px rgba(0,0,0,.34);
}
.result-modal-mark {
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--result-accent) 68%,var(--border));
  color:var(--result-accent);
  margin-bottom:14px;
  animation: result-mark-pop .52s cubic-bezier(.18,.9,.22,1) .08s both;
}
.result-modal-mark .icon { width:22px; height:22px; }
.result-modal-title {
  color:var(--result-accent);
  font-size:1.55rem;
  letter-spacing:.12em;
  font-weight:800;
}
.result-modal-subtitle {
  margin-top:5px;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.result-modal-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:16px;
}
.result-modal-metric {
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:center;
  gap:8px;
  border-top:1px solid var(--border);
  padding-top:9px;
}
.result-modal-icon {
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  color:var(--result-accent);
}
.result-modal-icon .icon { width:18px; height:18px; }
.result-modal-copy { display:grid; gap:2px; }
.result-modal-copy span { color:var(--muted); font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; }
.result-modal-copy b { font-size:.9rem; }
.result-modal-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:18px;
}
.result-modal-card .btn.primary {
  color:var(--result-accent) !important;
  border-color:var(--result-accent) !important;
}
@keyframes result-backdrop-in { from{opacity:0} to{opacity:1} }
@keyframes result-card-in { from{opacity:0;transform:translateY(14px) scale(.985)} to{opacity:1;transform:none} }
@keyframes result-mark-pop { 0%{opacity:0;transform:scale(.3) rotate(-16deg)} 60%{opacity:1;transform:scale(1.16) rotate(3deg)} 100%{transform:scale(1)} }

/* Adwaita SVGs are filled with currentColor. */
.icon svg { fill: currentColor; }

@media (max-width:520px) {
  .game-title-row { grid-template-columns:minmax(0,1fr) auto; gap:6px !important; }
  .game-attempt-counter { grid-column:1 / -1; justify-self:end; margin-top:-2px; }
  .game-timer-chip { font-size:.58rem; }
  .tappable-board-zone { grid-template-columns:10px minmax(0,1fr) 10px !important; column-gap:6px !important; }
  .tap-game-screen[data-rows="7"] .tappable-board-zone { grid-template-columns:10px minmax(0,1fr) 10px !important; }
  .rail-dot { width:3px !important; height:3px !important; box-shadow:0 0 0 1px var(--bg); }
  .combo-lane { grid-template-columns:auto 36px minmax(0,1fr); padding-inline:6px; }
  .combo-lane-xp { font-size:.53rem; }
  .result-modal-card { padding:15px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-level-fill,
  .tile.reveal-animate,
  .combo-lane.active,
  .combo-lane.active .combo-lane-main,
  .combo-lane.active::before,
  .combo-lane.active::after,
  .result-modal-backdrop,
  .result-modal-card,
  .result-modal-mark {
    animation:none !important;
    transition:none !important;
  }
}

.debug-timer {
  margin-left:auto;
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--muted);
  font-size:.62rem;
}
.debug-timer .icon { width:14px;height:14px;color:var(--accent); }
.debug-play-field .field-board-zone,
.debug-field .field-board-zone {
  display:grid !important;
  grid-template-columns:14px minmax(0,420px) 14px !important;
  justify-content:center !important;
  align-items:stretch !important;
  column-gap:9px !important;
}
.debug-play-field .field-rail,
.debug-field .field-rail {
  position:relative !important;
  align-self:stretch !important;
  height:100% !important;
  min-height:100% !important;
  display:grid !important;
  grid-template-rows:repeat(var(--rail-rows,6),minmax(0,1fr)) !important;
  gap:7px !important;
}
.debug-play-field .field-rail::before,
.debug-field .field-rail::before {
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  left:50% !important;
  width:1px !important;
  height:auto !important;
  transform:translateX(-50%) !important;
  background:color-mix(in srgb,var(--panel-accent,var(--accent)) 18%,transparent) !important;
  box-shadow:none !important;
}

/* ===== UX v13: themed play action, unified HUD, weekly Lexicograph ===== */
.home-content {
  gap: 6px !important;
}
.home-progress-panel {
  margin-bottom: 0 !important;
  padding-block: 7px !important;
}
.home-daily-launch {
  min-height: 56px !important;
  padding-block: 6px !important;
}
.home-daily-play {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid color-mix(in srgb,var(--panel-accent,var(--accent)) 76%,var(--border));
  color: var(--panel-accent,var(--accent));
  background: color-mix(in srgb,var(--panel-accent,var(--accent)) 8%,transparent);
  font-size: .66rem !important;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.home-daily-play .icon {
  width: 10px;
  height: 10px;
}
.home-daily-launch:active .home-daily-play {
  background: color-mix(in srgb,var(--panel-accent,var(--accent)) 15%,transparent);
}
body[data-skin="radiant"] .home-daily-play {
  border-color: #b48329;
  color: #7c5515;
  background: linear-gradient(90deg,rgba(180,131,41,.06),rgba(244,221,164,.18),rgba(180,131,41,.06));
}
body[data-skin="holo"] .home-daily-play {
  border-color: color-mix(in srgb,var(--accent) 62%,var(--accent-2));
  background: linear-gradient(90deg,rgba(134,232,255,.08),rgba(202,183,255,.13),rgba(243,191,233,.08));
  background-size: 180% 100%;
  animation: holo-play-shift 4.5s linear infinite;
}
@keyframes holo-play-shift { to { background-position:180% 0; } }

.lexicograph-bar {
  display: grid;
  gap: 4px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: transparent;
}
.lexicograph-bar::before {
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background: var(--accent);
}
.lexicograph-bar.completed::before { background: var(--green); }
.lexicograph-head,
.lexicograph-task,
.lexicograph-foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  gap:8px;
}
.lexicograph-copy { display:flex; align-items:baseline; gap:7px; min-width:0; }
.lexicograph-kicker {
  color:var(--muted);
  font-size:.48rem;
  letter-spacing:.13em;
  white-space:nowrap;
}
.lexicograph-title {
  font-size:.72rem;
  letter-spacing:.05em;
  white-space:nowrap;
}
.lexicograph-score {
  color:var(--accent);
  font-size:.64rem;
  font-weight:800;
  white-space:nowrap;
}
.lexicograph-challenge {
  min-width:0;
  color:var(--text);
  font-size:.59rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lexicograph-reward {
  color:var(--muted);
  font-size:.53rem;
  white-space:nowrap;
}
.lexicograph-track {
  height:4px;
  border:1px solid var(--border);
  overflow:hidden;
}
.lexicograph-fill {
  display:block;
  height:100%;
  background:var(--accent);
  transition:width .4s ease;
}
.lexicograph-bar.completed .lexicograph-fill { background:var(--green); }
.lexicograph-foot {
  color:var(--muted);
  font-size:.49rem;
}
body[data-skin="radiant"] .lexicograph-fill,
body[data-skin="radiant"] .lexicograph-bar::before {
  background:linear-gradient(90deg,#9d6814,#f1d794,#9d6814);
}
body[data-skin="holo"] .lexicograph-fill,
body[data-skin="holo"] .lexicograph-bar::before {
  background:linear-gradient(90deg,#86e8ff,#cab7ff,#f3bfe9,#e7d48c,#86e8ff);
  background-size:240% 100%;
  animation:holo-level-shift 5s linear infinite;
}

.game-title-row {
  display:block !important;
}
.game-timer-chip,
.game-attempt-counter,
.combo-lane {
  display:none !important;
}
.game-hud {
  display:grid;
  grid-template-columns:1fr 1fr 1.35fr;
  min-height:36px;
  margin:0 0 6px;
  border:1px solid var(--border);
  overflow:hidden;
  position:relative;
}
.game-hud-cell {
  min-width:0;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  column-gap:5px;
  padding:5px 7px;
  border-right:1px solid var(--border);
}
.game-hud-cell:last-child { border-right:0; }
.game-hud-cell .icon {
  width:12px;
  height:12px;
  color:var(--panel-accent,var(--accent));
  grid-row:1 / span 2;
}
.game-hud-label {
  color:var(--muted);
  font-size:.46rem;
  letter-spacing:.12em;
  line-height:1;
}
.game-hud-cell b {
  font-size:.69rem;
  line-height:1.05;
  color:var(--text);
}
.hud-combo {
  grid-template-columns:auto auto 1fr;
  grid-template-rows:1fr;
  gap:7px;
}
.hud-combo .game-hud-label { align-self:center; }
.game-hud-combo {
  font-size:.86rem !important;
  color:var(--muted) !important;
  text-align:center;
}
.game-hud-xp {
  min-width:0;
  color:var(--muted);
  font-size:.48rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.game-hud.combo-active {
  border-color:color-mix(in srgb,var(--panel-accent,var(--accent)) 60%,var(--border));
  animation:hud-combo-hit .72s cubic-bezier(.18,.82,.24,1) both;
}
.game-hud.combo-active .hud-combo {
  background:color-mix(in srgb,var(--panel-accent,var(--accent)) 7%,transparent);
}
.game-hud.combo-active .game-hud-combo {
  color:var(--panel-accent,var(--accent)) !important;
  animation:hud-combo-number .82s cubic-bezier(.17,.84,.23,1) both;
}
.game-hud.combo-active .game-hud-xp {
  color:var(--text);
  font-weight:800;
}
.game-hud.combo-x4,
.game-hud.combo-x5 {
  box-shadow:0 0 17px color-mix(in srgb,var(--panel-accent,var(--accent)) 20%,transparent);
}
.game-hud.combo-x5::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border:1px solid color-mix(in srgb,var(--panel-accent,var(--accent)) 68%,transparent);
  animation:hud-pulse 1s ease-out both;
}
@keyframes hud-combo-hit {
  0%{transform:scale(.987)}
  35%{transform:scale(1.008)}
  100%{transform:scale(1)}
}
@keyframes hud-combo-number {
  0%{transform:scale(.62);opacity:.25}
  42%{transform:scale(1.25);opacity:1}
  68%{transform:scale(.95)}
  100%{transform:scale(1)}
}
@keyframes hud-pulse {
  from{opacity:1;transform:scale(.99)}
  to{opacity:0;transform:scale(1.035)}
}

@media (max-width:520px) {
  .home-content { gap:5px !important; }
  .home-progress-panel { padding:6px 8px !important; }
  .lexicograph-bar { padding:6px 8px; gap:3px; }
  .lexicograph-kicker { display:none; }
  .lexicograph-title { font-size:.66rem; }
  .lexicograph-challenge { font-size:.54rem; }
  .lexicograph-reward { font-size:.49rem; max-width:46%; overflow:hidden; text-overflow:ellipsis; }
  .home-daily-launch { min-height:52px !important; }
  .home-daily-play { min-height:28px; padding:4px 7px; font-size:.6rem !important; }
  .game-hud { grid-template-columns:.9fr .9fr 1.25fr; min-height:34px; }
  .game-hud-cell { padding:4px 5px; column-gap:4px; }
  .game-hud-cell .icon { width:10px;height:10px; }
  .game-hud-label { font-size:.4rem; }
  .game-hud-cell b { font-size:.62rem; }
  .hud-combo { gap:4px; }
  .game-hud-combo { font-size:.78rem !important; }
  .game-hud-xp { font-size:.42rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-daily-play,
  .lexicograph-fill,
  .lexicograph-bar::before,
  .game-hud.combo-active,
  .game-hud.combo-active .game-hud-combo,
  .game-hud.combo-x5::after {
    animation:none !important;
    transition:none !important;
  }
}


/* ===== UX v14: Lexicograph section boundaries ===== */
.lexicograph-section {
  display: grid;
  gap: 6px;
  margin: 7px 0 9px;
  min-width: 0;
}
.lexicograph-boundary {
  height: 1px;
  width: 100%;
  background: var(--border-strong);
  position: relative;
}
.lexicograph-boundary::before,
.lexicograph-boundary::after {
  content: "";
  position: absolute;
  top: -2px;
  width: 5px;
  height: 5px;
  background: var(--accent);
}
.lexicograph-boundary::before { left: 0; }
.lexicograph-boundary::after { right: 0; }
.lexicograph-section.completed .lexicograph-boundary::before,
.lexicograph-section.completed .lexicograph-boundary::after { background: var(--green); }
.lexicograph-section .lexicograph-bar {
  border: 0;
  padding: 5px 7px;
  gap: 4px;
  overflow: visible;
}
.lexicograph-section .lexicograph-bar::before { display: none; }
.lexicograph-copy {
  display: grid !important;
  gap: 2px !important;
  align-items: start !important;
}
.lexicograph-title {
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .1em;
  white-space: nowrap;
}
.lexicograph-kicker {
  display: block !important;
  font-size: .44rem;
  line-height: 1.1;
  letter-spacing: .13em;
  white-space: nowrap;
  color: var(--muted);
}
.lexicograph-head { align-items: center; }
.lexicograph-score { align-self: center; }
body[data-skin="radiant"] .lexicograph-boundary::before,
body[data-skin="radiant"] .lexicograph-boundary::after {
  background: linear-gradient(90deg,#9d6814,#f1d794,#9d6814);
}
body[data-skin="holo"] .lexicograph-boundary::before,
body[data-skin="holo"] .lexicograph-boundary::after {
  background: linear-gradient(90deg,#86e8ff,#cab7ff,#f3bfe9,#e7d48c,#86e8ff);
}
@media (max-width: 560px) {
  .lexicograph-section { gap: 5px; margin: 5px 0 7px; }
  .lexicograph-section .lexicograph-bar { padding: 4px 4px; }
  .lexicograph-title { font-size: .68rem; }
  .lexicograph-kicker { font-size: .39rem; }
}

/* ===== UX v15: aligned game HUD + Lexicograph objective copy ===== */
.game-hud {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  min-height: 42px;
}
.game-hud-cell,
.hud-combo {
  display: grid !important;
  grid-template-columns: 16px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 6px 8px !important;
}
.game-hud-cell .icon {
  width: 14px !important;
  height: 14px !important;
  grid-row: auto !important;
  grid-column: auto !important;
  justify-self: center;
  align-self: center;
  color: var(--panel-accent,var(--accent));
}
.game-hud-copy {
  min-width: 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3px;
}
.game-hud-label {
  display: block;
  min-width: 0;
  font-size: .44rem;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
}
.game-hud-value,
.game-hud-cell b {
  min-width: 0;
  font-size: .7rem;
  line-height: 1;
  white-space: nowrap;
}
.game-hud-value-row {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 5px;
  line-height: 1;
}
.game-hud-combo {
  font-size: .78rem !important;
  text-align: left !important;
}
.game-hud-xp {
  min-width: 0;
  font-size: .43rem;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lexicograph-description {
  color: var(--muted);
  font-size: .49rem;
  line-height: 1.25;
  letter-spacing: .015em;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .game-hud { min-height: 38px; }
  .game-hud-cell,
  .hud-combo {
    grid-template-columns: 13px minmax(0,1fr) !important;
    gap: 5px !important;
    padding: 5px 6px !important;
  }
  .game-hud-cell .icon { width: 11px !important; height: 11px !important; }
  .game-hud-label { font-size: .39rem; }
  .game-hud-value,
  .game-hud-cell b { font-size: .61rem; }
  .game-hud-combo { font-size: .69rem !important; }
  .game-hud-xp { font-size: .37rem; }
  .lexicograph-description {
    font-size: .43rem;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ===== UX v16: Contracts + Training use the Daily game language ===== */
.task-picker-screen,
.task-game-screen {
  width: min(100%, 760px);
  margin: 0 auto;
}
.task-tier-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong);
  margin-top: 8px;
}
.task-tier-row {
  appearance: none;
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) auto 12px;
  align-items: center;
  gap: 9px;
  padding: 10px 4px;
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.task-tier-row:last-child { border-bottom: 0; }
.task-tier-row:active { background: color-mix(in srgb,var(--accent) 7%,transparent); }
.task-tier-row.status-won .task-tier-mark,
.task-tier-row.status-won .task-tier-meta { color: var(--green); }
.task-tier-row.status-lost { opacity: .72; }
.task-tier-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--panel-accent,var(--accent));
}
.task-tier-mark .icon { width: 12px; height: 12px; }
.task-tier-copy { min-width: 0; display: grid; gap: 2px; }
.task-tier-kicker {
  color: var(--muted);
  font-size: .43rem;
  letter-spacing: .12em;
  line-height: 1;
}
.task-tier-title {
  min-width: 0;
  font-size: .72rem;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-tier-desc { color: var(--muted); font-size: .5rem; }
.task-tier-meta {
  display: grid;
  grid-template-columns: 11px auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 4px;
  color: var(--panel-accent,var(--accent));
  text-align: right;
}
.task-tier-meta .icon { width: 10px; height: 10px; grid-row: 1 / span 2; }
.task-tier-meta b { font-size: .68rem; line-height: 1; }
.task-tier-meta span { color: var(--muted); font-size: .4rem; line-height: 1; }
.task-tier-row > .icon:last-child { width: 8px; height: 8px; color: var(--muted); }
.task-empty { padding: 14px 4px; color: var(--muted); font-size: .64rem; }

.task-wordle-field { align-content: start; }
.task-wordle-field .field-title { margin-top: 2px; }
.task-board-zone {
  display: grid !important;
  grid-template-columns: 14px minmax(0,390px) 14px !important;
  justify-content: center !important;
  align-items: stretch !important;
  column-gap: 9px !important;
  padding-block: 8px !important;
}
.task-game-screen .field-rail {
  display: grid !important;
  grid-template-rows: repeat(var(--rail-rows,3),minmax(0,1fr)) !important;
  gap: 5px !important;
  height: 100% !important;
  min-height: 100% !important;
}
.task-game-screen .wordle-board {
  width: min(100%,390px) !important;
  gap: 5px !important;
}
.task-game-screen .board-row { gap: 5px !important; }

.contract-clues {
  width: min(100%,390px);
  margin: 0 auto 6px;
  display: grid;
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.contract-clues-label {
  color: var(--muted);
  font-size: .42rem;
  letter-spacing: .14em;
  line-height: 1;
}
.contract-clue-row {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 4px;
}
.contract-clue-cell {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  color: var(--text);
  font-size: clamp(.66rem,2vw,.82rem);
  font-weight: 700;
}
.contract-clue-cell.green { background: var(--green); border-color: var(--green); color:#fff; }
.contract-clue-cell.yellow { background: var(--yellow); border-color: var(--yellow); color:#fff; }
.contract-clue-cell.gray { background: var(--gray); border-color: var(--gray); color:#fff; }

.task-result {
  width: min(100%,390px);
  margin: 7px auto 0;
  display: grid;
  grid-template-columns: 14px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
.task-result.won { color: var(--green); }
.task-result.lost { color: var(--muted); }
.task-result > .icon { width: 12px; height: 12px; }
.task-result-copy { color: var(--text); font-size: .58rem; font-weight: 700; letter-spacing: .04em; }
.task-result-explanation {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .54rem;
  line-height: 1.3;
}
.task-next-btn { grid-column: 1 / -1; min-height: 29px !important; margin-top: 2px; }

.training-board-zone {
  display: grid !important;
  grid-template-columns: 14px minmax(0,390px) 14px !important;
  justify-content: center !important;
  align-items: stretch !important;
  column-gap: 9px !important;
  padding: 12px 0 !important;
}
.training-task-board { width: min(100%,390px) !important; }
.training-task-row { width: 100%; }
.training-task-row .tile {
  appearance: none;
  cursor: pointer;
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.training-task-row .tile.selected {
  transform: translateY(-2px);
  border-color: var(--panel-accent,var(--accent)) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb,var(--panel-accent,var(--accent)) 20%,transparent);
}
.training-task-row .tile:disabled { cursor: default; }
.training-color-panel {
  width: min(100%,390px);
  margin: 7px auto 0;
  display: grid;
  gap: 6px;
}
.training-color-label {
  color: var(--muted);
  font-size: .45rem;
  letter-spacing: .1em;
  text-align: center;
}
.training-color-choices {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 5px;
}
.training-color-btn {
  min-height: 32px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: .52rem;
  font-weight: 700;
}
.training-color-btn.gray:not(:disabled) { border-color: color-mix(in srgb,var(--gray) 70%,var(--border)); }
.training-color-btn.yellow:not(:disabled) { border-color: color-mix(in srgb,var(--yellow) 70%,var(--border)); }
.training-color-btn.green:not(:disabled) { border-color: color-mix(in srgb,var(--green) 70%,var(--border)); }
.training-color-btn:disabled { opacity: .35; }

body[data-skin="radiant"] .contract-clue-cell.green,
body[data-skin="radiant"] .contract-clue-cell.yellow,
body[data-skin="radiant"] .contract-clue-cell.gray { color:#fff; }

@media (max-width:560px) {
  .task-tier-row { grid-template-columns: 24px minmax(0,1fr) auto 9px; gap: 7px; padding: 8px 2px; }
  .task-tier-mark { width:24px;height:24px; }
  .task-tier-title { font-size:.65rem; }
  .task-tier-desc { font-size:.45rem; }
  .task-tier-meta b { font-size:.61rem; }
  .contract-clues { gap:3px; padding:5px 0; }
  .contract-clue-row { gap:3px; }
  .training-color-btn { min-height:29px; font-size:.47rem; }
}

@media (prefers-reduced-motion:reduce) {
  .training-task-row .tile { transition:none !important; }
}
\n\n/* ===== UX v17: task help + stable contract return ===== */\n.task-mode-mast {\n  display:grid;\n  grid-template-columns:minmax(0,1fr) auto;\n  align-items:end;\n  gap:12px;\n}\n.task-mast-copy { min-width:0; }\n.task-how-btn {\n  min-height:34px;\n  padding:7px 10px;\n  border:1px solid color-mix(in srgb, var(--accent) 38%, var(--border));\n  background:color-mix(in srgb, var(--surface2) 86%, transparent);\n  color:var(--text);\n  display:inline-flex;\n  align-items:center;\n  justify-content:center;\n  gap:7px;\n  font-size:.72rem;\n  font-weight:700;\n  white-space:nowrap;\n  border-radius:4px;\n}\n.task-how-btn .icon { width:14px; height:14px; color:var(--accent); }\n.task-how-btn:active { transform:translateY(1px); }\n.overlay-body { white-space:pre-line; }\n.task-tier-list > .loading { min-height:120px; }\n@media (max-width:560px) {\n  .task-mode-mast { grid-template-columns:minmax(0,1fr) auto; gap:8px; }\n  .task-how-btn { min-height:31px; padding:6px 8px; font-size:.66rem; }\n  .task-how-btn .icon { width:13px; height:13px; }\n}\n
/* ===== UX v18: in-style task guides ===== */
.task-mode-mast {
  display: block;
}
.task-mast-copy { min-width: 0; }
.task-how-btn {
  width: 100%;
  min-height: 32px;
  margin-top: 7px;
  padding: 7px 0 6px;
  border: 0;
  border-top: 1px solid color-mix(in srgb,var(--panel-accent,var(--accent)) 30%,var(--border));
  border-bottom: 1px solid color-mix(in srgb,var(--panel-accent,var(--accent)) 18%,var(--border));
  border-radius: 0 !important;
  background: transparent;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  letter-spacing: .09em;
  font-size: .54rem;
  font-weight: 800;
}
.task-how-btn .icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  color: var(--panel-accent,var(--accent));
}
.task-how-btn .icon:last-child {
  width: 9px;
  height: 9px;
  flex-basis: 9px;
  opacity: .6;
}
.task-how-label { white-space: nowrap; color: var(--text); }
.task-how-rule {
  height: 1px;
  flex: 1 1 auto;
  background: color-mix(in srgb,var(--panel-accent,var(--accent)) 24%,var(--border));
}
.task-how-btn:active {
  transform: none;
  color: var(--text);
  border-color: color-mix(in srgb,var(--panel-accent,var(--accent)) 58%,var(--border));
}

.overlay-card:has(.task-guide) {
  padding: 0;
  overflow: hidden;
  border-color: color-mix(in srgb,var(--accent) 32%,var(--border));
}
.overlay-card:has(.task-guide) .overlay-head {
  margin: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
.task-guide {
  padding: 0 12px 12px;
  color: var(--text);
}
.task-guide-goal {
  display: grid;
  gap: 4px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}
.task-guide-eyebrow {
  color: var(--accent);
  font-size: .47rem;
  font-weight: 800;
  letter-spacing: .13em;
}
.task-guide-goal b {
  font-size: .78rem;
  line-height: 1.35;
}
.task-guide-steps {
  display: grid;
  padding: 5px 0;
}
.task-guide-step {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 9px;
  align-items: start;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb,var(--border) 70%,transparent);
}
.task-guide-step-no {
  color: var(--accent);
  font-size: .56rem;
  font-weight: 900;
  letter-spacing: .06em;
  padding-top: 1px;
}
.task-guide-step-text {
  color: var(--text);
  font-size: .68rem;
  line-height: 1.42;
}
.task-guide-legend {
  display: grid;
  gap: 7px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.task-guide-legend-row {
  display: grid;
  grid-template-columns: 11px 60px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  font-size: .61rem;
  line-height: 1.35;
  color: var(--muted);
}
.task-guide-legend-row b {
  color: var(--text);
  font-size: .54rem;
  letter-spacing: .04em;
}
.task-guide-swatch {
  width: 10px;
  height: 10px;
  border: 1px solid color-mix(in srgb,var(--text) 10%,transparent);
}
.task-guide-swatch.green { background: var(--green); }
.task-guide-swatch.yellow { background: var(--yellow); }
.task-guide-swatch.gray { background: var(--gray); }
.task-guide-note {
  margin-top: 10px;
  padding-left: 9px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: .61rem;
  line-height: 1.42;
}
.training-reference {
  width: min(100%,390px);
  margin: 6px auto 8px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 15px minmax(0,1fr) auto;
  gap: 8px;
  align-items: center;
  border-top: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
  border-bottom: 1px solid color-mix(in srgb,var(--accent) 24%,var(--border));
}
.training-reference .icon {
  width: 13px;
  height: 13px;
  color: var(--accent);
}
.training-reference-label {
  color: var(--muted);
  font-size: .45rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.training-reference-word {
  color: var(--text);
  font-size: .7rem;
  letter-spacing: .14em;
}
body[data-skin="holo"] .task-how-rule,
body[data-skin="holo"] .training-reference {
  border-color: color-mix(in srgb,var(--accent) 50%,var(--border));
}
@media (max-width:560px) {
  .task-how-btn { min-height: 30px; margin-top: 6px; padding: 6px 0; font-size: .5rem; }
  .task-guide { padding: 0 10px 10px; }
  .task-guide-step { grid-template-columns: 23px minmax(0,1fr); gap: 7px; padding: 7px 0; }
  .task-guide-step-text { font-size: .64rem; }
  .task-guide-legend-row { grid-template-columns: 10px 54px minmax(0,1fr); gap: 6px; font-size: .57rem; }
  .training-reference { margin-top: 5px; padding: 6px 7px; }
}