/* Desktop polish, account settings, fixed exercise actions and richer shop */

/* Keep Controleer and Volgende in exactly the same slot */
.exercise-action-slot {
  position: relative;
  min-height: 56px;
}
.exercise-action-slot .primary-button {
  position: absolute;
  inset: 0;
  margin: 0 !important;
}
#nextButton { margin-top: 0 !important; }

/* Slightly larger Letterbit flight */
.bit-flight {
  width: 16px !important;
  height: 16px !important;
  border-width: 2px !important;
  margin-left: -2px !important;
  margin-top: -2px !important;
  box-shadow: 0 0 0 6px rgba(40,117,255,.14), 0 8px 20px rgba(11,92,255,.38) !important;
}

/* Account tabs */
.account-page-title {
  margin: 22px 0 14px;
  font-size: clamp(34px, 6vw, 48px);
  letter-spacing: -.05em;
  line-height: 1;
}
.account-tabs {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  padding: 5px;
  margin: 0 0 16px;
  border-radius: 15px;
  background: var(--blue-100);
}
.account-tab {
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}
.account-tab.active {
  color: var(--blue-900);
  background: var(--white);
  box-shadow: 0 5px 18px rgba(13,64,158,.1);
}
.account-tab-panel { display: none; }
.account-tab-panel.active { display: block; animation: enter .2s ease both; }
.account-display-name {
  display: block;
  font-size: clamp(27px, 6vw, 36px);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: white;
}
.settings-panel { display: grid; gap: 24px; }
.settings-group + .settings-group {
  padding-top: 24px;
  border-top: 1px solid rgba(11,92,255,.11);
}
.settings-group h2 {
  margin-bottom: 6px;
  font-size: 22px;
}
.settings-group > p {
  margin-bottom: 15px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.settings-form {
  display: grid;
  gap: 10px;
}
.settings-form label {
  color: var(--blue-950);
  font-size: 12px;
  font-weight: 850;
}
.settings-form input {
  width: 100%;
  min-height: 52px;
  padding: 0 15px;
  border: 2px solid #d9e5f6;
  border-radius: 15px;
  outline: none;
  color: var(--ink);
  background: var(--blue-050);
}
.settings-form input:focus {
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(40,117,255,.1);
}
.settings-form .settings-save-button,
#profileForm .pencil-button.settings-save-button {
  width: fit-content;
  min-width: 148px;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 13px;
  color: white;
  background: var(--blue-700);
  font-size: 12px;
  font-weight: 850;
}
.settings-message {
  min-height: 18px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}
.settings-message.error { color: var(--error); }
.settings-message.success { color: var(--success); }
.settings-logout { margin-top: 4px; }

/* Richer theme cards */
.shop-item-card.theme-showcase {
  min-height: 190px;
  cursor: pointer;
  border-width: 2px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.shop-item-card.theme-showcase:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 56px rgba(13,64,158,.18);
}
.shop-item-card.theme-showcase:focus-visible {
  outline: 3px solid rgba(40,117,255,.28);
  outline-offset: 3px;
}
.theme-showcase .shop-item-preview { position: relative; }
.theme-showcase .shop-item-preview::before {
  content: "";
  position: absolute;
  inset: 28px 16px;
  border: 2px solid rgba(255,255,255,.52);
  border-radius: 20px;
  background:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)) 14px 18px / 46% 8px no-repeat,
    linear-gradient(rgba(255,255,255,.42), rgba(255,255,255,.42)) 14px 36px / 68% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.22), rgba(255,255,255,.22));
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.theme-showcase .shop-item-preview::after { display: none; }
.shop-preview-ocean {
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.58), transparent 18%),
    linear-gradient(145deg, #95f4e9 0%, #12b8af 48%, #04707b 100%) !important;
}
.shop-preview-night {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 34%, rgba(255,255,255,.72) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 48% 72%, rgba(118,174,255,.72) 0 2px, transparent 3px),
    linear-gradient(145deg, #1c3764 0%, #0a1830 52%, #030813 100%) !important;
}
.theme-showcase.is-active,
.theme-showcase:has(.shop-action-button:is(:disabled)) {
  border-color: rgba(40,117,255,.38);
}

/* Mascot cosmetics */
.mascot-glasses,
.mascot-headphones,
.mascot-crown { display: none; }
.cosmetic-glasses .mascot-glasses {
  position: absolute;
  z-index: 12;
  display: block;
  left: 17px;
  top: 36px;
  width: 64px;
  height: 22px;
  border-top: 5px solid #0a1530;
}
.cosmetic-glasses .mascot-glasses::before,
.cosmetic-glasses .mascot-glasses::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 28px;
  height: 20px;
  border-radius: 9px 9px 13px 13px;
  background: linear-gradient(145deg, #152846, #020713);
  border: 2px solid rgba(255,255,255,.22);
}
.cosmetic-glasses .mascot-glasses::before { left: 0; }
.cosmetic-glasses .mascot-glasses::after { right: 0; }
.cosmetic-headphones .mascot-headphones {
  position: absolute;
  z-index: 11;
  display: block;
  left: 4px;
  top: 16px;
  width: 90px;
  height: 72px;
  border: 7px solid #17223b;
  border-bottom: 0;
  border-radius: 46px 46px 0 0;
}
.cosmetic-headphones .mascot-headphones::before,
.cosmetic-headphones .mascot-headphones::after {
  content: "";
  position: absolute;
  top: 33px;
  width: 15px;
  height: 31px;
  border-radius: 8px;
  background: #17223b;
}
.cosmetic-headphones .mascot-headphones::before { left: -12px; }
.cosmetic-headphones .mascot-headphones::after { right: -12px; }
.cosmetic-crown .mascot-crown {
  position: absolute;
  z-index: 13;
  display: block;
  left: 24px;
  top: -11px;
  width: 50px;
  height: 31px;
  clip-path: polygon(0 100%, 5% 30%, 28% 64%, 48% 5%, 69% 64%, 95% 30%, 100% 100%);
  background: linear-gradient(145deg, #ffe772, #ffb400 72%);
  filter: drop-shadow(0 4px 5px rgba(91,58,0,.24));
}
.shop-preview-cosmetic-glasses { background: linear-gradient(145deg, #8fbfff, #14274a) !important; }
.shop-preview-cosmetic-headphones { background: linear-gradient(145deg, #9cafff, #2a265f) !important; }
.shop-preview-cosmetic-crown { background: linear-gradient(145deg, #fff2a8, #eaa000) !important; }
.mascot-cosmetic-card { cursor: pointer; }
.mascot-cosmetic-card.is-cosmetic-active { border-color: rgba(11,92,255,.42); }

/* Themes should visibly change more than just a few accents */
html[data-theme="ocean"] .training-card,
html[data-theme="ocean"] .exercise-card,
html[data-theme="ocean"] .result-card,
html[data-theme="ocean"] .account-panel,
html[data-theme="ocean"] .shop-item-card {
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(228,250,247,.94));
  border-color: rgba(7,143,149,.18);
}
html[data-theme="ocean"] .progress-track,
html[data-theme="ocean"] .mini-progress { background: #ccece8; }
html[data-theme="night"] .mascot-copy > p:not(.mascot-kicker) { color: #c6d6ee; }
html[data-theme="night"] .topbar { text-shadow: 0 1px 12px rgba(0,0,0,.2); }

/* Desktop: larger canvas without stretching edge-to-edge */
@media (min-width: 900px) {
  .app-shell {
    width: min(100%, 1180px) !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
  .topbar { min-height: 86px; }
  .brand-mark { width: 42px; height: 42px; border-radius: 14px; }
  .brand { font-size: 18px; }
  .wallet { padding: 11px 14px; font-size: 13px; }
  .wallet strong { font-size: 16px; }
  .account-button { min-height: 42px; padding: 0 16px; font-size: 13px; }

  .mascot-hero {
    min-height: 292px !important;
    grid-template-columns: minmax(0, 1fr) 300px !important;
    padding: 38px 44px !important;
    margin-top: 18px !important;
    border-radius: 34px !important;
  }
  .mascot-copy h2 { font-size: 54px !important; }
  .mascot-copy > p:not(.mascot-kicker) { max-width: 440px !important; font-size: 16px !important; }
  .mascot-stage { height: 215px !important; transform: scale(1.28); transform-origin: center; }

  .compact-hero { padding-top: 34px !important; }
  .compact-hero h1 { font-size: 54px !important; max-width: none !important; }
  .training-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px !important; }
  .training-card { min-height: 196px !important; padding: 28px !important; }
  .card-body strong { font-size: 40px !important; }
  .shop-preview { grid-template-columns: 1fr auto; align-items: center; padding: 30px 32px !important; }

  .exercise-card,
  .result-card { width: min(100%, 760px) !important; padding: 36px !important; }
  .question-sentence { font-size: 46px !important; }

  .account-page { width: min(100%, 1000px) !important; }
  .account-grid { grid-template-columns: 1fr !important; }
  .account-panel { padding: 28px !important; }
  .progress-cards { grid-template-columns: 1fr 1fr; }
  .settings-panel { max-width: 820px; }

  .shop-page { width: min(100%, 1080px) !important; }
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px !important; }
  .shop-item-card { min-height: 180px; grid-template-columns: 150px 1fr !important; }
  .shop-item-content { padding: 22px !important; }
}

@media (min-width: 1200px) {
  .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px) {
  .account-tabs { display: grid; width: 100%; }
  .account-tab { padding: 0 10px; }
  .account-page-title { margin-top: 18px; }
  .settings-save-button { width: 100% !important; }
  .theme-showcase .shop-item-preview::before { inset: 28px 11px; }
}