/* Базовые стили */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #05020a;
  --bg-soft: #0b0616;
  --bg-card: #120922;
  --accent: #b668ff;
  --accent-soft: rgba(182, 104, 255, 0.12);
  --accent-strong: #e0b0ff;
  --text-main: #f5f1ff;
  --text-muted: #a89cc4;
  --danger: #ff4f7a;
  --success: #54e3a6;
  --border-subtle: rgba(255, 255, 255, 0.06);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, 0.7);
  --radius-lg: 18px;
  --radius-xl: 24px;
  /* alias used by the clean UI kit */
  --text-ghost: #ede9ff;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "Inter", sans-serif;
  background: radial-gradient(circle at top, #1a0b33 0%, #05020a 45%, #020008 100%);
  color: var(--text-main);
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

/* App container */

#app {
  position: relative;
  width: 100%;
  max-width: 540px;
  min-height: 100vh;
  background: linear-gradient(180deg, #05020a 0%, #05020a 40%, #08030f 100%);
  /* важно: даём странице скролл, иначе нижние секции (например, заказ карты) "пропадают" */
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Верхняя панель */

.top-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  backdrop-filter: blur(24px);
  background: linear-gradient(
    180deg,
    rgba(10, 3, 28, 0.9) 0%,
    rgba(5, 2, 14, 0.9) 60%,
    rgba(5, 2, 14, 0.6) 100%
  );
  border-bottom: 1px solid var(--border-subtle);
}

.top-bar__title {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 0.18em;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.top-bar__logo {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: radial-gradient(circle at 30% 0, #e0b0ff 0%, #7b32ff 40%, #12021f 100%);
  box-shadow: 0 0 18px rgba(182, 104, 255, 0.8);
}

.top-bar__btn {
  border: none;
  outline: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-strong);
  background: rgba(182, 104, 255, 0.12);
  border: 1px solid rgba(182, 104, 255, 0.5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.top-bar__actions{
  display:flex;
  gap:8px;
  align-items:center;
}

.top-bar__btn--icon{
  padding: 6px 10px;
  position: relative;
}

.top-bar__btn--icon::before{content:"";}

.badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 11px;
  font-weight: 700;
  color: #05020a;
  background: linear-gradient(180deg, #C8BFFF, #8A6BFF);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow: 0 0 18px rgba(122, 92, 255, 0.55);
}

.top-bar__btn:not(.top-bar__btn--icon)::before {
  content: "★";
  font-size: 11px;
}

/* Контент */

#view-container {
  padding: 10px 16px 76px;
}

/* Карты */

.card {
  background: radial-gradient(circle at top left, #24123e 0, #120922 40%, #08030f 100%);
  border-radius: var(--radius-xl);
  padding: 16px 14px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.card + .card {
  margin-top: 12px;
}

.card__title {
  font-size: 15px;
  margin: 0 0 4px;
}

.card__subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* Маленький разлом в фоне */

.card::before {
  content: "";
  position: absolute;
  inset: auto auto 4px 50%;
  width: 1px;
  height: 60%;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 0, rgba(224, 176, 255, 0.9) 0, transparent 55%),
    linear-gradient(
      180deg,
      rgba(224, 176, 255, 0.9),
      rgba(182, 104, 255, 0.4),
      rgba(84, 227, 166, 0)
    );
  opacity: 0.5;
  filter: blur(0.3px);
}

/* Статистика */

.stats-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.stat-pill {
  flex: 1;
  background: rgba(5, 2, 14, 0.9);
  border-radius: 12px;
  padding: 8px;
  border: 1px solid var(--border-subtle);
}

.stat-pill__label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 2px;
}

.stat-pill__value {
  font-size: 15px;
}

/* Прогресс-бар */

.progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  margin-top: 6px;
}

.progress__line {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #54e3a6, #b668ff);
}

/* Кнопки */

.btn-primary {
  width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: none;
  outline: none;
  background: linear-gradient(90deg, #b668ff, #54e3a6);
  color: #05020a;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9);
}

.btn-primary:active {
  transform: translateY(1px);
}

/* Список игр */

.games-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.game-card {
  background: radial-gradient(circle at 0 0, #24123e 0, #120922 40%, #08030f 100%);
  border-radius: var(--radius-lg);
  padding: 12px 12px 10px;
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.game-card__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
}

.game-card__title {
  font-size: 14px;
}

.game-card__btn {
  align-self: flex-start;
  margin-top: 4px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(182, 104, 255, 0.7);
  background: rgba(10, 3, 28, 0.8);
  color: var(--accent-strong);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  cursor: pointer;
}

/* Экран игры */

.game-view__question {
  font-size: 14px;
  margin-bottom: 10px;
}

.game-view__hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.game-view__input {
  width: 100%;
  padding: 9px 11px;
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: rgba(5, 2, 14, 0.9);
  color: var(--text-main);
  font-size: 14px;
}

.game-view__input::placeholder {
  color: #5d4f82;
}

.game-view__meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

.game-view__message {
  margin-top: 10px;
  font-size: 13px;
}

.game-view__message--success {
  color: var(--success);
}

.game-view__message--error {
  color: var(--danger);
}

/* Рейтинг */

.rating-list {
  margin-top: 8px;
}

.rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: 13px;
}

.rating-row--me {
  background: rgba(182, 104, 255, 0.08);
  border: 1px solid rgba(182, 104, 255, 0.4);
}

.rating-row__place {
  width: 22px;
  text-align: right;
  color: var(--text-muted);
}

.rating-row__name {
  flex: 1;
}

.rating-row__score {
  font-variant-numeric: tabular-nums;
}

/* Ачивки */

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

.achievements-title {
  font-size: 16px;
}

.achievements-back {
  border: none;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: rgba(5, 2, 14, 0.9);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
}

.achievements-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.achievement-card {
  display: flex;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-lg);
  background: rgba(5, 2, 14, 0.9);
  border: 1px solid var(--border-subtle);
  position: relative;
}

.achievement-card--locked {
  opacity: 0.45;
}

.achievement-icon-wrapper {
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 0, #24123e 0, #08030f 60%);
}

.achievement-icon {
  width: 26px;
  height: 26px;
}

.achievement-content {
  flex: 1;
}

.achievement-title {
  font-size: 13px;
  margin-bottom: 2px;
}

.achievement-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.achievement-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.achievement-rarity {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.achievement-rarity--common {
  color: #7ad8ff;
  border: 1px solid rgba(122, 216, 255, 0.4);
  background: rgba(122, 216, 255, 0.08);
}

.achievement-rarity--rare {
  color: #e0b0ff;
  border: 1px solid rgba(224, 176, 255, 0.5);
  background: rgba(224, 176, 255, 0.1);
}

.achievement-rarity--legendary {
  color: #ffe88f;
  border: 1px solid rgba(255, 232, 143, 0.6);
  background: rgba(255, 232, 143, 0.12);
}

.achievement-progress-text {
  font-size: 10px;
  color: var(--text-muted);
}

/* Иконка замка */

.achievement-lock {
  position: absolute;
  right: 8px;
  top: 8px;
  font-size: 13px;
}

/* Нижнее меню */

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 540px;
  padding: 6px 16px 10px;
  background: radial-gradient(
      circle at top,
      rgba(61, 22, 118, 0.18) 0,
      rgba(3, 0, 8, 0.96) 58%
    ),
    #05020a;
  border-top: 1px solid var(--border-subtle);
  backdrop-filter: blur(18px);
  display: flex;
  gap: 10px;
}

.bottom-nav__item {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 2px;
}

.bottom-nav__icon {
  font-size: 17px;
}

.bottom-nav__label {
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.bottom-nav__item--active {
  color: var(--accent-strong);
}

.bottom-nav__item--active .bottom-nav__icon {
  text-shadow: 0 0 8px rgba(182, 104, 255, 0.9);
}

/* Маленький текст */

.text-muted {
  font-size: 11px;
  color: var(--text-muted);
}

/* Личное досье */

.profile-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-row {
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(5, 2, 14, 0.9);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
}

.profile-row__top {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.profile-row__title {
  max-width: 70%;
}

.profile-row__score {
  font-variant-numeric: tabular-nums;
}

.profile-row__bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-muted);
}

/* Адаптивность */

@media (min-width: 600px) {
  #app {
    border-radius: 26px;
    margin: 18px auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .bottom-nav {
    border-radius: 20px 20px 26px 26px;
  }
}

/* News helpers */
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  font-size:11px;
  color: var(--text-soft);
}

.link{
  color: var(--accent);
  text-decoration:none;
}
.link:hover{ text-decoration:underline; }

/* -------------------- NOTIFICATIONS (v1.0) -------------------- */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  z-index: 50;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding: 14px 12px 18px;
}

.sheet{
  width: 100%;
  max-width: 560px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(circle at top, rgba(138,107,255,0.18) 0%, rgba(5,2,14,0.92) 42%, rgba(2,0,8,0.96) 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.60);
  overflow: hidden;
}

.sheet__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

.sheet__title{
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sheet__actions{display:flex; gap:8px; align-items:center;}

.sheet__body{ max-height: 72vh; overflow:auto; padding: 10px 12px 14px; }

.notif-empty{
  padding: 18px 10px;
  text-align:center;
  color: var(--text-muted);
  font-size: 12px;
}

.notif-item{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(2,0,8,0.42);
  display:flex;
  gap: 10px;
  cursor:pointer;
}
.notif-item + .notif-item{ margin-top: 8px; }
.notif-item:hover{ border-color: rgba(122,92,255,0.35); }
.notif-item--unread{ background: rgba(122,92,255,0.14); border-color: rgba(122,92,255,0.35); }

.notif-ico{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(182,104,255,0.16);
  border: 1px solid rgba(182,104,255,0.35);
  flex: 0 0 auto;
}

.notif-main{ flex: 1 1 auto; min-width: 0; }
.notif-title{ font-size: 13px; color: var(--text-strong); margin-bottom: 2px; }
.notif-text{ font-size: 12px; color: var(--text-soft); line-height: 1.35; }
.notif-meta{ margin-top: 6px; font-size: 11px; color: var(--text-muted); display:flex; justify-content:space-between; gap:10px; }

.btn-ghost{
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: var(--text-soft);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  cursor:pointer;
}
.btn-ghost:hover{ border-color: rgba(255,255,255,0.28); }


/* =========================================
   LIMINEX Clean UI Kit Overrides (v1)
   ========================================= */

:root{
  --bg-void: #06060B;
  --bg-void2:#0D0B1A;
  --rift:#8A6BFF;
  --rift2:#7A5CFF;
  --text-ghost:#EDE9FF;
  --text-muted:#A89AFF;
}

body{
  background: radial-gradient(circle at top, var(--bg-void2) 0%, var(--bg-void) 70%);
  color: var(--text-ghost);
}

/* Cards -> stone panels */
.card,
.game-card,
.task-card,
.news-card,
.shop-item,
.profile-section{
  background-color: transparent;
  background-image: url("assets/ui/panel.svg");
  /* Keep panel proportions stable across different card heights.
     `100% 100%` was stretching the SVG and the inner frame looked "uneven".
     `cover` keeps the "frame" consistent and centered. */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: border-box;
  border: none !important;
  box-shadow: 0 0 26px rgba(122,92,255,0.22);
}

/* Primary buttons -> stone/glow */
.btn-primary{
  background: transparent !important;
  background-image: url("assets/ui/btn_primary.svg") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  color: var(--text-ghost) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 0 30px rgba(138,107,255,0.25);
}

.btn-primary:active{
  transform: translateY(1px);
  filter: brightness(1.05);
}

/* Secondary button helper (if used) */
.btn-secondary{
  background: transparent !important;
  background-image: url("assets/ui/btn_secondary.svg") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  color: var(--text-ghost) !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 14px 18px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow: 0 0 22px rgba(138,107,255,0.18);
}

/* Many screens still use the legacy `.btn` class (e.g. “Обновить”).
   Map it to the new secondary stone button style to avoid random white buttons. */
.btn{
  background: transparent !important;
  background-image: url("assets/ui/btn_secondary.svg") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: var(--text-ghost) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  font-weight: 700 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 0 18px rgba(138,107,255,0.14);
}

/* Bottom nav icons */
.bottom-nav__icon{
  width: 26px;
  height: 26px;
  display: block;
  margin: 0 auto 6px;
  filter: drop-shadow(0 0 8px rgba(138,107,255,0.55));
  opacity: .85;
}

.bottom-nav__item--active .bottom-nav__icon{
  opacity: 1;
  filter: drop-shadow(0 0 14px rgba(138,107,255,0.85));
  transform: translateY(-1px) scale(1.05);
}

/* Bottom nav background more "stone" */
.bottom-nav{
  background: linear-gradient(180deg, rgba(7,5,12,0.65), rgba(7,5,12,0.95));
  border-top: 1px solid rgba(138,107,255,0.18);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.55);
}

/* -------------------- HOME TILES (Clean UI v2) -------------------- */
.tile-section{ padding: 16px 14px; }

/* Ref-like layout: 4 tiles per row even on mobile (as in provided references) */
.tile-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 8px;
  align-items: stretch;
}

.tile{
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  width: 100%;
  display: block;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
}
.tile::before{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("assets/ui/panel.svg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  filter: drop-shadow(0 0 18px rgba(122,92,255,0.20));
  pointer-events: none;
}
.tile__inner{
  position: relative;
  padding: 10px 10px 10px;
  min-height: 92px;
  height: 100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}
.tile__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.tile__icon{
  width: 26px;
  height: 26px;
  filter: drop-shadow(0 0 10px rgba(138,107,255,0.75));
  opacity: .95;
}
.tile__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-ghost);
  background: rgba(138,107,255,0.35);
  border: 1px solid rgba(138,107,255,0.55);
  box-shadow: 0 0 16px rgba(122,92,255,0.35);
}
.tile__label{
  margin-top: auto;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-ghost);
  line-height: 1.1;
  word-break: break-word;
}

.tile:active .tile__inner{ transform: translateY(1px); }

.tile--locked{
  opacity: .55;
}
.tile--locked .tile__label{ color: rgba(237,233,255,0.65); }
.tile__lock{
  position:absolute;
  right: 10px;
  bottom: 10px;
  font-size: 14px;
  color: rgba(237,233,255,0.75);
  text-shadow: 0 0 14px rgba(138,107,255,0.35);
}

/* Segmented controls (used on Games screen) */
.segmented{
  display:flex;
  gap: 8px;
}
.seg-btn{
  flex: 1;
  width: 100%;
  border-radius: 999px;
  padding: 10px 12px;
  border: 1px solid rgba(182, 104, 255, 0.55);
  background: rgba(10, 3, 28, 0.55);
  color: var(--text-ghost);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Make notification sheet look more like "stone" */
.sheet{
  background-image: url("assets/ui/panel.svg");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  border: none;
}
.sheet__top{
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.notif-item{
  background-image: url("assets/ui/panel.svg");
  background-size: cover;
  background-position: center;
  background-repeat:no-repeat;
  border: none;
}

/* Give small cards a consistent minimum height so the panel frame doesn't collapse */
.card{
  min-height: 120px;
}

/* When card is used as a thin header strip (e.g. tabs), don't force min-height */
.card.card--compact,
.card.compact{
  min-height: unset;
}
.notif-item--unread{ filter: brightness(1.06); }


/* ===========================
   UI NORMALIZATION (v7)
   Goal: make all blocks look like "Личное досье" panels.
   Remove decorative framed SVG everywhere, except the history block.
   =========================== */

:root{
  --panel-bg: radial-gradient(circle at top left, #24123e 0, #120922 40%, #08030f 100%);
}

/* Remove framed SVG backgrounds globally */
.card,
.game-card,
.task-card,
.news-card,
.shop-item,
.profile-section,
.sheet,
.notif-item{
  background-image: none !important;
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Cards must not force a minimum height (breaks composition) */
.card{ min-height: unset !important; }

/* Tiles: remove framed overlay and use dossier-like panel style */
.tile{
  background: var(--panel-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-soft) !important;
}
.tile::before{ background-image: none !important; }



/* Toggle buttons (use main btn-primary skin) */
.toggle-row{
  display:flex;
  gap:12px;
  margin-top:10px;
}
.toggle-row .btn-primary{
  width:auto !important;
  flex:1;
  margin-top:0 !important;
}
.btn-primary.is-active{
  outline: none !important;
  box-shadow: 0 0 30px rgba(138,107,255,0.25);
}


/* Games page: remove green accents */
#tab-mini, #tab-season{
  outline: none !important;
  border-color: transparent !important;
}


/* tile-section header align */
.tile-section .card__title,
.tile-section .card__subtitle{
  padding-left: 0;
  padding-right: 0;
}




.input{
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid rgba(138,107,255,0.25);
  background: rgba(0,0,0,0.35);
  color: var(--text-ghost, #EDE9FF);
  outline:none;
}
.input:focus{
  border-color: rgba(138,107,255,0.55);
  box-shadow: 0 0 18px rgba(138,107,255,0.18);
}
.quiz-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
}
.quiz-btn.is-active{
  outline: none;
  box-shadow: 0 0 22px rgba(138,107,255,0.25);
  border-color: rgba(138,107,255,0.55);
}