/*
  KonniePaw canonical stylesheet entrypoint.

  This is the only shared CSS file templates should link directly.
  Existing files are still imported while the site is migrated page by page.
  New shared styles must be added through layers below, not as page globals.
*/

@layer tokens, base, layout, components, pages, games, utilities, legacy;

@import url("./meow_theme.css?v=20260601-design-system-10");
@import url("./meow_responsive.css?v=20260610-sticky");
@import url("./meow_skin.css?v=20260609-darkpages");
@import url("./meow_dialogs.css?v=20260601-design-system-10");
@import url("./meow_button_style.css?v=20260610-sheet2");
@import url("./meow_mobile.css?v=20260601-design-system-10");
@import url("./meow_navbar_legacy.css?v=20260601-design-system-10");
@import url("./meow_navbar_fix.css?v=20260602-navbar-laptop-compact-7");
@import url("./meow_navbar_drawer.css?v=20260609-navfix2");
@import url("./meow_format.css?v=20260609-icons-3");
@import url("./meow_appmode.css?v=20260609-appnav3");

@layer tokens {
  :root {
    --kp-btn-bg: #fff7e8;
    --kp-btn-bg-active: #f5d59d;
    --kp-btn-border: #b98545;
    --kp-btn-shadow: #9b6b34;
    --kp-btn-text: #3b2817;
    --kp-btn-radius: 999px;
    --kp-btn-font-weight: 700;
    --kp-btn-pop: translateY(-2px) scale(1.015);
    --kp-btn-pressed: translateY(3px);
  }

  html[data-theme="dark"],
  body.meow-dark {
    --kp-btn-bg: #202838;
    --kp-btn-bg-active: #2c3648;
    --kp-btn-border: #4b5568;
    --kp-btn-shadow: #0f172a;
    --kp-btn-text: #f4f0ff;
  }
}

@layer base {
  html {
    color-scheme: light;
  }

  html[data-theme="dark"] {
    color-scheme: dark;
  }

  input,
  textarea,
  select {
    font-weight: 500;
    letter-spacing: 0;
  }
}

@layer components {
  .meow-chat-badge.meow-support-badge {
    background: #0ea678 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(14, 166, 120, .28) !important;
  }

  .meow-user-card .meow-support-badge {
    left: 92px;
  }

  .meow-navbar .meow-user-card .meow-support-badge,
  .meow-navbar.is-game-navbar .meow-user-card .meow-support-badge {
    left: 42px !important;
  }

  .kp-btn {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1.5px solid var(--kp-btn-border);
    border-radius: var(--kp-btn-radius);
    background: var(--kp-btn-bg);
    background-image: none;
    color: var(--kp-btn-text);
    box-shadow: 0 3px 0 var(--kp-btn-shadow), 0 12px 22px rgba(111, 75, 32, .14);
    font: inherit;
    font-weight: var(--kp-btn-font-weight);
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease;
  }

  .kp-btn:hover {
    transform: var(--kp-btn-pop);
    box-shadow: 0 6px 0 var(--kp-btn-shadow), 0 18px 30px rgba(111, 75, 32, .20);
  }

  .kp-btn:active,
  .kp-btn.is-active,
  .kp-btn[aria-pressed="true"],
  .kp-btn[aria-current="true"] {
    transform: var(--kp-btn-pressed);
    background: var(--kp-btn-bg-active);
    box-shadow: 0 1px 0 var(--kp-btn-shadow), 0 8px 14px rgba(111, 75, 32, .12);
  }

  html[data-theme="dark"] .kp-btn,
  body.meow-dark .kp-btn {
    box-shadow: 0 3px 0 var(--kp-btn-shadow), 0 12px 22px rgba(0, 0, 0, .24);
  }

  html[data-theme="dark"] .kp-btn:hover,
  body.meow-dark .kp-btn:hover {
    box-shadow: 0 6px 0 var(--kp-btn-shadow), 0 18px 30px rgba(0, 0, 0, .34);
  }

  html[data-theme="dark"] .kp-btn:active,
  html[data-theme="dark"] .kp-btn.is-active,
  body.meow-dark .kp-btn:active,
  body.meow-dark .kp-btn.is-active {
    box-shadow: 0 1px 0 var(--kp-btn-shadow), 0 8px 14px rgba(0, 0, 0, .26);
  }

  .kp-btn-danger {
    --kp-btn-bg: #ffe9e9;
    --kp-btn-border: #c77b7b;
    --kp-btn-shadow: #9c5a5a;
    --kp-btn-text: #6f1f1f;
  }

  html[data-theme="dark"] .kp-btn-danger,
  body.meow-dark .kp-btn-danger {
    --kp-btn-bg: #3a2026;
    --kp-btn-border: #7f4b55;
    --kp-btn-shadow: #241116;
    --kp-btn-text: #ffd8de;
  }
}

@layer games {
  .game-root :is(button, .btn):not(.kp-btn):not(.meow-game-action):not(.q-action-btn) {
    font: inherit;
  }
}

@layer pages {
  .landing-page,
  .auth-page,
  .auth-reset-page,
  .pricing-shell {
    --kp-page-btn-bg: #fff7e8;
    --kp-page-btn-bg-active: #f5d59d;
    --kp-page-btn-border: #b98545;
    --kp-page-btn-shadow: #9b6b34;
    --kp-page-btn-text: #3b2817;
    --kp-page-btn-radius: 999px;
    --kp-page-btn-font-weight: 700;
  }

  html[data-theme="dark"] :is(.auth-page, .auth-reset-page, .pricing-shell),
  body.meow-dark :is(.auth-page, .auth-reset-page, .pricing-shell) {
    --kp-page-btn-bg: #202838;
    --kp-page-btn-bg-active: #2c3648;
    --kp-page-btn-border: #4b5568;
    --kp-page-btn-shadow: #0f172a;
    --kp-page-btn-text: #f4f0ff;
  }

  .landing-page :is(a.btn, button.btn),
  .auth-page :is(.submit-btn, .sso-btn, .resend-btn, .signin-link),
  .auth-reset-page .btn,
  .pricing-shell :is(.plan-action.upgrade:not(.status-action), .plan-action.yearly-upgrade:not(.status-action), .promo-reveal summary, .promo-apply) {
    min-height: 44px !important;
    border: 1.5px solid var(--kp-page-btn-border) !important;
    border-radius: var(--kp-page-btn-radius) !important;
    background: var(--kp-page-btn-bg) !important;
    background-image: none !important;
    color: var(--kp-page-btn-text) !important;
    box-shadow: 0 3px 0 var(--kp-page-btn-shadow), 0 12px 22px rgba(111, 75, 32, .14) !important;
    font-family: inherit !important;
    font-weight: var(--kp-page-btn-font-weight) !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, color .14s ease !important;
  }

  .auth-page :is(.submit-btn, .resend-btn),
  .auth-reset-page .btn,
  .pricing-shell :is(.plan-action.upgrade:not(.status-action), .plan-action.yearly-upgrade:not(.status-action), .promo-apply) {
    min-height: 52px !important;
  }

  .landing-page :is(a.btn, button.btn):hover,
  .auth-page :is(.submit-btn, .sso-btn, .resend-btn, .signin-link):hover,
  .auth-reset-page .btn:hover,
  .pricing-shell :is(.plan-action.upgrade:not(.status-action), .plan-action.yearly-upgrade:not(.status-action), .promo-reveal summary, .promo-apply):hover {
    transform: translateY(-2px) scale(1.015) !important;
    box-shadow: 0 6px 0 var(--kp-page-btn-shadow), 0 18px 30px rgba(111, 75, 32, .20) !important;
    filter: none !important;
  }

  .landing-page :is(a.btn, button.btn):active,
  .auth-page :is(.submit-btn, .sso-btn, .resend-btn, .signin-link):active,
  .auth-reset-page .btn:active,
  .pricing-shell :is(.plan-action.upgrade:not(.status-action), .plan-action.yearly-upgrade:not(.status-action), .promo-reveal summary, .promo-apply):active,
  .pricing-shell :is(.plan-action.is-current:not(.status-action), .plan-action[aria-current="true"]:not(.status-action)) {
    transform: translateY(3px) !important;
    background: var(--kp-page-btn-bg-active) !important;
    box-shadow: 0 1px 0 var(--kp-page-btn-shadow), 0 8px 14px rgba(111, 75, 32, .12) !important;
  }

  .landing-page :is(a.btn.demo-cta, button.btn.demo-cta) {
    min-height: 52px !important;
    padding-inline: 28px !important;
    background: #f5d59d !important;
    background-image: none !important;
    border-color: #b98545 !important;
    color: #3b2817 !important;
    box-shadow: 0 4px 0 #9b6b34, 0 16px 30px rgba(111, 75, 32, .18) !important;
    font-weight: 800 !important;
  }

  .landing-page :is(a.btn.demo-cta, button.btn.demo-cta):hover {
    background: #f5d59d !important;
    box-shadow: 0 7px 0 #9b6b34, 0 20px 34px rgba(111, 75, 32, .22) !important;
  }

  .auth-page .submit-btn:disabled {
    opacity: .56 !important;
    cursor: not-allowed !important;
    transform: none !important;
  }

  .auth-page .resend button {
    color: #7b4d1e !important;
    font-weight: 700 !important;
  }

  .landing-page .screen-frame img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: top center !important;
  }

  .landing-page :is(.mode-grid, .math-grid, .coding-layout) .mode-card > .screen-frame {
    display: grid !important;
    grid-template-rows: 38px minmax(0, 1fr) !important;
    height: clamp(230px, 16vw, 270px) !important;
  }

  .landing-page :is(.mode-grid, .math-grid, .coding-layout) .mode-card > .screen-frame img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .landing-page .coding-layout .mode-card > .screen-frame {
    height: clamp(210px, 13vw, 240px) !important;
  }
}

.pricing-shell .plan-action.status-action,
.pricing-shell .plan-action.status-action:hover,
.pricing-shell .plan-action.status-action:active,
.pricing-shell .plan-action.status-action.is-current,
.pricing-shell .plan-action.status-action[aria-current="true"] {
  cursor: default !important;
  pointer-events: none !important;
  transform: none !important;
  color: #6b5f73 !important;
  background: rgba(255, 250, 240, .74) !important;
  background-image: none !important;
  border: 1px solid rgba(205, 185, 160, .72) !important;
  box-shadow: 0 8px 20px rgba(86, 51, 22, .06) !important;
  font-family: inherit !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .pricing-shell .plan-action.status-action,
html[data-theme="dark"] .pricing-shell .plan-action.status-action:hover,
html[data-theme="dark"] .pricing-shell .plan-action.status-action:active,
body.meow-dark .pricing-shell .plan-action.status-action,
body.meow-dark .pricing-shell .plan-action.status-action:hover,
body.meow-dark .pricing-shell .plan-action.status-action:active {
  color: #cbd5e1 !important;
  background: #1f2937 !important;
  border-color: #374151 !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .16) !important;
}
body.flashcards-game-page .meow-game-setup {
  max-width: 760px;
  margin: 0 auto 22px;
  border: 1px solid rgba(185, 133, 69, .18);
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 219, 145, .36), transparent 32%),
    linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(255, 245, 228, .92));
  box-shadow: 0 18px 50px rgba(82, 51, 22, .10);
}

body.flashcards-game-page .meow-game-setup-title {
  color: #2f2439;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}

body.flashcards-game-page .meow-game-setup-desc,
body.flashcards-game-page .meow-game-instructions-body,
body.flashcards-game-page .meow-game-input-label {
  color: #5e5268;
}

body.flashcards-game-page .meow-game-setup-actions,
body.flashcards-game-page .meow-game-setup-bottom {
  justify-content: center;
}

body.flashcards-game-page .meow-game-action,
body.flashcards-game-page .meow-game-play,
body.flashcards-game-page .meow-game-save-slot .meow-save-lib-btn {
  min-height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(185, 133, 69, .24);
  box-shadow: 0 10px 24px rgba(82, 51, 22, .10);
  font-weight: 900;
}

body.flashcards-game-page .meow-game-action-library,
body.flashcards-game-page .meow-game-action-save,
body.flashcards-game-page .meow-game-save-slot .meow-save-lib-btn {
  background: #fffdf8;
  color: #7b4d1e;
}

body.flashcards-game-page .meow-game-action-example,
body.flashcards-game-page .meow-game-action-template,
body.flashcards-game-page .meow-game-play {
  background: linear-gradient(135deg, #f0c98d, #d89a46);
  color: #fff;
}

body.flashcards-game-page .meow-game-setup textarea {
  border-radius: 18px;
  border: 1px solid rgba(127, 92, 55, .22);
  background: #fffdf8;
  color: #2f2439;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

body.flashcards-game-page .meow-game-setup .meow-format-box {
  border-color: rgba(185, 133, 69, .22) !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(255, 245, 228, .9)) !important;
  box-shadow: 0 12px 30px rgba(82, 51, 22, .08);
}

body.flashcards-game-page .quiz,
body.flashcards-game-page .deck,
body.flashcards-game-page .matching-game-sequence,
body.flashcards-game-page #cardArea {
  color: #2f2439;
}

body.flashcards-game-page .quiz > .topbar,
body.flashcards-game-page .deck > .topbar,
body.flashcards-game-page .matching-question-nav {
  border: 1px solid rgba(185, 133, 69, .20) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(255, 246, 230, .92)) !important;
  color: #5e5268 !important;
  box-shadow: 0 10px 28px rgba(82, 51, 22, .07) !important;
}

body.flashcards-game-page .topbar-value,
body.flashcards-game-page .matching-question-actions button {
  background: linear-gradient(135deg, #f0c98d, #d89a46) !important;
  color: #fff !important;
}

body.flashcards-game-page #questionCard,
body.flashcards-game-page .flip-card,
body.flashcards-game-page #cardArea,
body.flashcards-game-page .matching-game-sequence .block,
body.flashcards-game-page .meow-game-window-body > .card {
  border: 1px solid rgba(185, 133, 69, .20) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 219, 145, .22), transparent 30%),
    linear-gradient(135deg, rgba(255, 253, 248, .99), rgba(255, 247, 233, .96)) !important;
  box-shadow: 0 18px 48px rgba(82, 51, 22, .10) !important;
}

body.flashcards-game-page #questionCard::before,
body.flashcards-game-page .matching-game-sequence .block::before {
  background: linear-gradient(90deg, #f0c98d, #d89a46, #e6be78) !important;
}

body.flashcards-game-page .question,
body.flashcards-game-page #question,
body.flashcards-game-page .block-title {
  border: 1px solid rgba(185, 133, 69, .16) !important;
  border-left: 4px solid #d89a46 !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 241, .82) !important;
  color: #2f2439 !important;
  font-family: inherit !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

body.flashcards-game-page .face {
  border: 1px solid rgba(185, 133, 69, .18) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, rgba(255, 253, 248, .98), rgba(255, 247, 233, .96)) !important;
  color: #2f2439 !important;
  box-shadow: 0 18px 48px rgba(82, 51, 22, .10) !important;
}

body.flashcards-game-page .back {
  background: linear-gradient(135deg, rgba(255, 250, 241, .98), rgba(239, 252, 245, .96)) !important;
}

body.flashcards-game-page .label,
body.flashcards-game-page .gh-flash-label,
body.flashcards-game-page .multi-hint,
body.flashcards-game-page .small {
  color: #746654 !important;
  letter-spacing: 0 !important;
}

body.flashcards-game-page .text,
body.flashcards-game-page .front .text,
body.flashcards-game-page .back .text {
  color: #2f2439 !important;
  font-weight: 780 !important;
}

body.flashcards-game-page .back .text {
  color: #366342 !important;
}

body.flashcards-game-page .opt,
body.flashcards-game-page .pair-row,
body.flashcards-game-page .drag-item,
body.flashcards-game-page .slot,
body.flashcards-game-page input.answer {
  border: 1px solid rgba(185, 133, 69, .20) !important;
  border-radius: 16px !important;
  background: rgba(255, 253, 248, .96) !important;
  color: #2f2439 !important;
  box-shadow: 0 8px 22px rgba(82, 51, 22, .06) !important;
}

body.flashcards-game-page .opt:hover,
body.flashcards-game-page .drag-item:hover {
  transform: translateY(-1px);
  border-color: rgba(216, 154, 70, .46) !important;
  box-shadow: 0 12px 28px rgba(82, 51, 22, .10) !important;
}

body.flashcards-game-page .opt.correct,
body.flashcards-game-page .slot.correct {
  border-color: rgba(61, 150, 91, .52) !important;
  background: #eefaf2 !important;
  color: #255536 !important;
}

body.flashcards-game-page .opt.wrong,
body.flashcards-game-page .slot.wrong {
  border-color: rgba(204, 76, 76, .46) !important;
  background: #fff0ee !important;
  color: #7b2c25 !important;
}

body.flashcards-game-page .actions button,
body.flashcards-game-page .nextbar button,
body.flashcards-game-page .btn,
body.flashcards-game-page .restart,
body.flashcards-game-page #showAnswer,
body.flashcards-game-page #rightBtn,
body.flashcards-game-page #wrongBtn,
body.flashcards-game-page #laterBtn {
  min-height: 44px;
  border-radius: 14px !important;
  border: 1px solid rgba(185, 133, 69, .24) !important;
  background: #fffdf8 !important;
  color: #7b4d1e !important;
  box-shadow: 0 10px 24px rgba(82, 51, 22, .10) !important;
  font-weight: 850 !important;
}

body.flashcards-game-page .flip-btn,
body.flashcards-game-page #checkBtn,
body.flashcards-game-page #showAnswer,
body.flashcards-game-page .btn.primary,
body.flashcards-game-page .btn.blue {
  background: linear-gradient(135deg, #f0c98d, #d89a46) !important;
  color: #fff !important;
}

body.flashcards-game-page #rightBtn,
body.flashcards-game-page .btn.good {
  background: linear-gradient(135deg, #7dbf85, #3d965b) !important;
  color: #fff !important;
}

body.flashcards-game-page #wrongBtn,
body.flashcards-game-page .btn.bad {
  background: linear-gradient(135deg, #e7987e, #cc5c4e) !important;
  color: #fff !important;
}

body.flashcards-game-page .answer-box,
body.flashcards-game-page .done-box,
body.flashcards-game-page .summary {
  border: 1px solid rgba(185, 133, 69, .18) !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 241, .92) !important;
  color: #366342 !important;
  box-shadow: 0 10px 26px rgba(82, 51, 22, .07) !important;
}

/* Coins hidden for launch (nothing to spend them on yet) — reversible: delete this block. */
.meow-stat-pill[title="Coins"]{display:none!important}

/* PERF 2026-06-08: backdrop-filter causes severe scroll jank in Chrome (recomputes the blurred backdrop under every card on each scroll frame). Panels already use semi-opaque backgrounds, so disabling the blur is visually negligible but restores 60fps. Measured: games 48->61fps, library 47->60fps. */
*, *::before, *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }