:root {
      --ink: #172026;
      --muted: #5f6d76;
      --paper: #fffaf1;
      --panel: #ffffff;
      --line: #dce7e3;
      --green: #13a45f;
      --green-soft: #dff6e9;
      --red: #de4634;
      --red-soft: #ffe0da;
      --blue: #246bfe;
      --yellow: #ffcb45;
      --shadow: 0 18px 50px rgba(23, 32, 38, 0.14);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: Arial, Helvetica, sans-serif;
      background:
        radial-gradient(circle at 12% 16%, rgba(255, 203, 69, 0.32), transparent 25rem),
        radial-gradient(circle at 88% 12%, rgba(36, 107, 254, 0.16), transparent 25rem),
        linear-gradient(135deg, #f8fbff 0%, var(--paper) 100%);
    }

    button,
    input {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .brand-home-button {
      position: fixed;
      top: 8px;
      left: 8px;
      z-index: 54;
      width: 82px;
      height: 82px;
      padding: 0;
      background: transparent;
    }

    .brand-logo {
      width: 100%;
      height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 7px 10px rgba(23, 32, 38, 0.16));
      pointer-events: none;
    }

    .top-controls {
      position: fixed;
      top: 12px;
      right: 14px;
      z-index: 55;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      gap: 10px;
      max-width: calc(100vw - 112px);
    }

    .money-counter {
      position: static;
      min-width: 118px;
      min-height: 52px;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      color: var(--ink);
      background: #fff7c8;
      box-shadow: 0 7px 0 rgba(23, 32, 38, 0.2);
      font-weight: 900;
      cursor: pointer;
      transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .money-counter:hover,
    .money-counter:focus-visible {
      transform: translateY(-2px);
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.2);
      outline: none;
    }

    .money-counter:active {
      transform: translateY(4px);
      box-shadow: 0 3px 0 rgba(23, 32, 38, 0.2);
    }

    .money-symbol {
      width: 32px;
      height: 32px;
      display: inline-grid;
      place-items: center;
      border-radius: 50%;
      color: #ffffff;
      background: var(--green);
      font-size: 1.3rem;
    }

    .money-total {
      font-size: 1.8rem;
      line-height: 1;
    }

    .screen-flash {
      position: fixed;
      inset: 0;
      z-index: 20;
      background: transparent;
      opacity: 0;
      pointer-events: none;
    }

    .screen-flash.correct {
      animation: flash-correct 220ms ease-out;
    }

    .screen-flash.incorrect {
      animation: flash-incorrect 220ms ease-out;
    }

    .money-rain {
      position: fixed;
      inset: 0;
      z-index: 30;
      overflow: hidden;
      pointer-events: none;
    }

    .penny {
      position: absolute;
      left: 0;
      top: 0;
      width: 44px;
      height: 44px;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3CradialGradient id='c' cx='34%25' cy='28%25' r='70%25'%3E%3Cstop offset='0' stop-color='%23ffd7a0'/%3E%3Cstop offset='0.48' stop-color='%23d9823b'/%3E%3Cstop offset='1' stop-color='%238d451f'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='50' cy='50' r='46' fill='%23733f1d'/%3E%3Ccircle cx='50' cy='50' r='40' fill='url(%23c)'/%3E%3Ccircle cx='50' cy='50' r='31' fill='none' stroke='%23f4b36a' stroke-width='5'/%3E%3Ctext x='50' y='60' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='34' font-weight='900' fill='%236b3419'%3E1c%3C/text%3E%3C/svg%3E");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      filter: drop-shadow(0 7px 7px rgba(23, 32, 38, 0.22));
      transform-origin: 50% 50%;
      will-change: transform;
    }

    @keyframes flash-correct {
      0%, 44% {
        background: var(--green);
        opacity: 0.5;
      }
      100% {
        background: var(--green);
        opacity: 0;
      }
    }

    @keyframes flash-incorrect {
      0%, 44% {
        background: var(--red);
        opacity: 0.5;
      }
      100% {
        background: var(--red);
        opacity: 0;
      }
    }

    .app {
      width: 100%;
      min-height: 100vh;
      margin: 0;
      padding: 0;
    }

    .view {
      display: none;
    }

    .view.active {
      display: block;
    }

    .login-view.active {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 28px 18px;
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 203, 69, 0.34), transparent 24rem),
        radial-gradient(circle at 82% 18%, rgba(36, 107, 254, 0.16), transparent 25rem),
        linear-gradient(135deg, #f8fbff 0%, var(--paper) 100%);
    }

    body.logged-out .brand-home-button,
    body.logged-out .game-back-button,
    body.logged-out .money-counter,
    body.logged-out .profile-dock {
      display: none;
    }

    .login-shell {
      width: min(980px, 94vw);
      display: grid;
      gap: 22px;
      justify-items: center;
    }

    .login-logo {
      width: min(620px, 86vw);
      display: block;
      filter: drop-shadow(0 16px 24px rgba(23, 32, 38, 0.14));
    }

    .login-card {
      width: min(900px, 100%);
      display: grid;
      gap: 20px;
      padding: clamp(18px, 4vw, 32px);
      border: 3px solid var(--ink);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 18px 0 rgba(23, 32, 38, 0.12);
    }

    .login-user-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 14px;
    }

    .login-user-card {
      min-height: 154px;
      display: grid;
      align-content: center;
      justify-items: center;
      gap: 10px;
      padding: 14px;
      border: 3px solid var(--ink);
      border-radius: 12px;
      color: var(--ink);
      background: linear-gradient(160deg, #ffffff 0%, #eaf1ff 100%);
      box-shadow: 0 10px 0 rgba(23, 32, 38, 0.14);
      font-weight: 900;
      transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .login-user-card:hover,
    .login-user-card.selected {
      transform: translateY(-3px);
      box-shadow: 0 13px 0 rgba(23, 32, 38, 0.14);
    }

    .login-user-card:active {
      transform: translateY(5px);
      box-shadow: 0 5px 0 rgba(23, 32, 38, 0.14);
    }

    .login-user-card.create {
      background: linear-gradient(160deg, #fff7d8 0%, #ffffff 70%);
      border-style: dashed;
    }

    .login-card-avatar,
    .selected-login-avatar {
      width: 70px;
      height: 70px;
      display: grid;
      place-items: center;
      border: 3px solid #ffffff;
      border-radius: 16px;
      background: linear-gradient(135deg, #fff7c8, #95d8ff);
      box-shadow: 0 5px 0 rgba(23, 32, 38, 0.16);
      font-size: 2.6rem;
    }

    .login-card-name {
      max-width: 100%;
      overflow-wrap: anywhere;
      font-size: 1.1rem;
      text-align: center;
    }

    .login-detail-card {
      display: grid;
      gap: 12px;
      padding: 16px;
      border: 2px solid var(--line);
      border-radius: 12px;
      background: #f8fbff;
    }

    .selected-player-row {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }

    .selected-player-row > div {
      min-width: 0;
    }

    .selected-player-row strong {
      font-size: 1.4rem;
      overflow-wrap: anywhere;
    }

    .login-delete-button {
      min-height: 38px;
      align-self: flex-start;
      padding: 0 10px;
      border: 2px solid #d94a3a;
      border-radius: 7px;
      color: #a52f25;
      background: #fff5f3;
      font-size: 0.8rem;
      font-weight: 900;
    }

    .login-delete-button:hover,
    .login-delete-button:focus-visible {
      background: #ffe4df;
      outline: none;
    }

    .empty-player-note {
      margin: 0;
      color: var(--muted);
      font-weight: 900;
      text-align: center;
    }

    .profile-dock {
      position: static;
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      min-height: 52px;
      max-width: min(360px, calc(100vw - 260px));
      padding: 6px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 8px 20px rgba(23, 32, 38, 0.12);
      font-weight: 900;
    }

    .profile-button {
      min-height: 40px;
      flex: 1 1 auto;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      padding: 0 8px;
      border-radius: 8px;
      color: var(--ink);
      background: transparent;
      font-weight: 900;
    }

    .profile-dock .account-button {
      flex: 0 0 auto;
      white-space: nowrap;
    }

    #activeAccountName {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .profile-button:hover,
    .profile-button:focus-visible {
      background: #f0f6ff;
      outline: none;
    }

    .home-view.active {
      min-height: 100vh;
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 28px;
      padding: clamp(74px, 10vh, 104px) 18px 32px;
    }

    .home-title {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .home-hero-logo {
      width: min(740px, 86vw);
      height: auto;
      display: block;
      filter: drop-shadow(0 16px 24px rgba(23, 32, 38, 0.12));
    }

    .account-panel {
      display: grid;
      gap: 14px;
    }

    .login-heading {
      margin: 0;
      color: #174284;
      font-size: clamp(1.55rem, 4vw, 2.25rem);
      line-height: 1;
    }

    .login-subtitle {
      margin: -6px 0 2px;
      color: #465c7d;
      font-weight: 800;
      line-height: 1.35;
    }

    .login-form-title {
      margin: 8px 0 -4px;
      color: #174284;
      font-size: 0.9rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .account-form,
    .avatar-picker {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }

    .account-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    }

    .create-account-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .create-account-form .avatar-picker {
      grid-column: 1 / -1;
    }

    .create-account-form .account-button {
      justify-self: start;
    }

    .account-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-weight: 900;
    }

    .account-avatar {
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: #fff7c8;
      font-size: 1.7rem;
    }

    .account-form input {
      min-height: 42px;
      width: 100%;
      border: 1px solid #7f9db9;
      border-radius: 2px;
      padding: 0 10px;
      color: var(--ink);
      background: #ffffff;
      font-weight: 900;
      outline: none;
    }

    .account-form input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.14);
    }

    .account-button,
    .avatar-button {
      min-height: 42px;
      border-radius: 4px;
      padding: 0 14px;
      border: 1px solid #7f9db9;
      background: linear-gradient(180deg, #ffffff 0%, #ece9d8 100%);
      color: var(--ink);
      font-weight: 900;
    }

    .account-button.primary {
      border-color: #c28f13;
      background: linear-gradient(180deg, #fff3a8 0%, #ffcb45 100%);
      color: var(--ink);
    }

    .avatar-button {
      width: 44px;
      padding: 0;
      font-size: 1.35rem;
    }

    .avatar-button.active {
      border-color: var(--green);
      box-shadow: 0 0 0 4px var(--green-soft);
    }

    .account-message {
      min-height: 20px;
      margin: 0;
      color: #174284;
      font-weight: 900;
    }

    .account-settings-view.active {
      min-height: 100vh;
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 18px;
      padding: 120px 18px 32px;
    }

    .account-settings-card {
      width: min(560px, 100%);
      display: grid;
      gap: 16px;
      padding: clamp(18px, 4vw, 28px);
      border: 3px solid var(--ink);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 14px 0 rgba(23, 32, 38, 0.12);
    }

    .account-settings-player {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .account-settings-player .account-avatar {
      width: 72px;
      height: 72px;
      font-size: 2.5rem;
    }

    .account-settings-player h2 {
      margin: 0;
      font-size: clamp(2rem, 6vw, 3rem);
      line-height: 1;
      overflow-wrap: anywhere;
    }

    .account-option-row {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 12px;
      padding: 12px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #f8fbff;
      font-weight: 900;
    }

    .danger-button {
      min-height: 48px;
      padding: 0 16px;
      border-radius: 8px;
      color: #ffffff;
      background: var(--red);
      box-shadow: 0 7px 0 #9f2417;
      font-weight: 900;
    }

    .danger-button:active {
      transform: translateY(4px);
      box-shadow: 0 3px 0 #9f2417;
    }

    .category-picker {
      width: min(960px, 100%);
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
      gap: clamp(14px, 3vw, 24px);
    }

    .category-card {
      min-height: 210px;
      position: relative;
      overflow: hidden;
      display: grid;
      align-content: end;
      justify-items: start;
      gap: 8px;
      padding: 18px;
      border: 2px solid rgba(23, 32, 38, 0.12);
      border-radius: 12px;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 18px 38px rgba(23, 32, 38, 0.12);
      text-align: left;
      transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .category-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 17px 0 rgba(23, 32, 38, 0.16);
    }

    .category-card:active {
      transform: translateY(6px);
      box-shadow: 0 8px 0 rgba(23, 32, 38, 0.16);
    }

    .category-card::before,
    .category-card::after,
    .category-art::before,
    .category-art::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .category-card.math {
      background: linear-gradient(160deg, #fff7d8 0%, #ffffff 58%);
    }

    .category-card.spelling {
      background: linear-gradient(160deg, #dff6e9 0%, #ffffff 58%);
    }

    .category-card.typing {
      background: linear-gradient(160deg, #eaf1ff 0%, #ffffff 58%);
    }

    .category-card.prek {
      background: linear-gradient(160deg, #ffeaf4 0%, #ffffff 58%);
    }

    .category-card.games {
      background: linear-gradient(160deg, #eef7e4 0%, #ffffff 58%);
    }

    .category-card.math::before {
      right: 20px;
      top: 24px;
      width: 98px;
      height: 98px;
      border: 6px solid #d39b14;
      border-radius: 18px;
      background:
        linear-gradient(#ffffff 0 0) 24px 18px / 50px 8px no-repeat,
        linear-gradient(#ffffff 0 0) 45px 46px / 8px 50px no-repeat,
        var(--yellow);
      transform: rotate(8deg);
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
    }

    .category-card.math::after {
      left: 24px;
      top: 28px;
      width: 72px;
      height: 72px;
      border: 5px solid var(--ink);
      border-radius: 50%;
      background: #ffffff;
      box-shadow:
        46px 18px 0 -18px #246bfe,
        74px 66px 0 -19px #13a45f;
    }

    .category-card.spelling::before {
      right: 22px;
      top: 28px;
      width: 112px;
      height: 88px;
      border: 5px solid var(--ink);
      border-radius: 14px 14px 10px 10px;
      background:
        linear-gradient(90deg, transparent 49%, #9fc7ff 49% 51%, transparent 51%),
        repeating-linear-gradient(180deg, #ffffff 0 16px, #e8f2ff 16px 19px);
      transform: rotate(-7deg);
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
    }

    .category-card.spelling::after {
      left: 24px;
      top: 30px;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 5px solid var(--ink);
      border-radius: 14px;
      background: #ffffff;
      box-shadow:
        48px 10px 0 -4px #ffda77,
        92px 42px 0 -7px #a7ed3b;
    }

    .category-card.typing::before {
      right: 20px;
      top: 34px;
      width: 132px;
      height: 86px;
      border: 5px solid var(--ink);
      border-radius: 16px;
      background:
        radial-gradient(circle at 24px 28px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 52px 28px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 80px 28px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 108px 28px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 36px 56px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 64px 56px, #ffffff 0 6px, transparent 7px),
        radial-gradient(circle at 92px 56px, #ffffff 0 6px, transparent 7px),
        #246bfe;
      transform: rotate(5deg);
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
    }

    .category-card.typing::after {
      left: 30px;
      top: 38px;
      width: 50px;
      height: 70px;
      border: 5px solid var(--ink);
      border-radius: 999px;
      background: linear-gradient(180deg, #ffffff 0 47%, #ffda77 47% 100%);
      transform: rotate(-12deg);
    }

    .category-card.prek::before {
      right: 24px;
      top: 28px;
      width: 110px;
      height: 110px;
      border: 5px solid var(--ink);
      border-radius: 50%;
      background:
        radial-gradient(circle at 32px 34px, #246bfe 0 14px, transparent 15px),
        radial-gradient(circle at 76px 32px, #ffcb45 0 14px, transparent 15px),
        radial-gradient(circle at 36px 76px, #13a45f 0 14px, transparent 15px),
        radial-gradient(circle at 78px 78px, #de4634 0 14px, transparent 15px),
        #ffffff;
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
    }

    .category-card.prek::after {
      left: 26px;
      top: 38px;
      width: 66px;
      height: 76px;
      border: 5px solid var(--ink);
      border-radius: 14px;
      background: #ffffff;
      transform: rotate(-8deg);
      box-shadow:
        48px 12px 0 -13px #ffcb45,
        78px 56px 0 -15px #246bfe;
    }

    .category-card.games::before {
      right: 24px;
      top: 28px;
      width: 112px;
      height: 112px;
      border: 5px solid var(--ink);
      border-radius: 8px;
      background:
        linear-gradient(45deg, #ffffff 25%, #172026 25% 50%, #ffffff 50% 75%, #172026 75%) 0 0 / 56px 56px;
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
      transform: rotate(4deg);
    }

    .category-card.games::after {
      left: 30px;
      top: 38px;
      width: 52px;
      height: 80px;
      border: 5px solid var(--ink);
      border-radius: 18px 18px 8px 8px;
      background: var(--yellow);
      box-shadow:
        42px 28px 0 -12px #246bfe,
        76px 8px 0 -14px #13a45f;
    }

    .category-art {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .category-card-title {
      position: relative;
      z-index: 1;
      display: block;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 900;
      line-height: 0.95;
    }

    .category-card-text {
      position: relative;
      z-index: 1;
      color: var(--muted);
      font-size: 1rem;
      font-weight: 900;
      line-height: 1.25;
    }

    .game-picker {
      width: min(860px, 100%);
      display: grid;
      gap: 20px;
    }

    .game-category {
      display: grid;
      gap: 10px;
    }

    .category-title {
      margin: 0;
      color: var(--muted);
      font-size: 1.2rem;
      font-weight: 900;
      letter-spacing: 0;
      text-transform: uppercase;
    }

    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 14px;
    }

    .game-choice {
      min-height: 132px;
      padding: 16px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      color: var(--ink);
      background: var(--panel);
      box-shadow: 0 10px 0 rgba(23, 32, 38, 0.18);
      text-align: left;
      transition: transform 150ms ease, box-shadow 150ms ease;
    }

    .game-choice:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 0 rgba(23, 32, 38, 0.18);
    }

    .game-choice:active {
      transform: translateY(5px);
      box-shadow: 0 5px 0 rgba(23, 32, 38, 0.18);
    }

    .game-choice-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: 12px;
      border-radius: 8px;
      color: #ffffff;
      background: var(--blue);
      font-size: 1.4rem;
      font-weight: 900;
    }

    .game-choice-title {
      display: block;
      margin-bottom: 8px;
      font-size: 1.45rem;
      font-weight: 900;
      line-height: 1;
    }

    .game-choice-text {
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .category-menu-view.active {
      min-height: 100vh;
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 20px;
      padding: 120px 18px 32px;
    }

    .category-menu-header {
      width: min(860px, 100%);
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 14px;
    }

    .category-menu-title {
      margin: 0;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      line-height: 0.95;
      letter-spacing: 0;
    }

    .back-button {
      min-height: 46px;
      padding: 0 16px;
      border: 2px solid var(--line);
      border-radius: 8px;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 6px 0 rgba(23, 32, 38, 0.12);
      font-weight: 900;
    }

    .learning-view.active {
      min-height: 100vh;
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 18px;
      padding: 116px 18px 32px;
    }

    .learning-title {
      margin: 0;
      font-size: clamp(2.4rem, 6vw, 4.2rem);
      line-height: 0.95;
      letter-spacing: 0;
      text-align: center;
    }

    .learning-panel {
      width: min(760px, 100%);
      display: grid;
      gap: 16px;
      justify-items: center;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 14px 0 rgba(23, 32, 38, 0.12);
      padding: clamp(18px, 4vw, 30px);
    }

    .difficulty-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .difficulty-button,
    .word-action,
    .times-button,
    .helper-control-button,
    .letter-button,
    .choice-button {
      min-height: 44px;
      border-radius: 8px;
      padding: 0 16px;
      color: var(--ink);
      background: var(--panel);
      border: 2px solid var(--line);
      font-weight: 900;
    }

    .difficulty-button.active,
    .times-button.active,
    .letter-button.active,
    .choice-button.active {
      color: #ffffff;
      border-color: var(--blue);
      background: var(--blue);
    }

    .word-action {
      background: linear-gradient(180deg, #ffda77, var(--yellow));
      border: 0;
      box-shadow: 0 7px 0 #d39b14;
    }

    .word-action:disabled {
      cursor: default;
      opacity: 0.58;
    }

    .prek-panel {
      width: min(860px, 100%);
    }

    .prek-prompt {
      min-height: 120px;
      display: grid;
      place-items: center;
      padding: 10px 18px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 10px 0 rgba(23, 32, 38, 0.12);
      font-size: clamp(4rem, 14vw, 8rem);
      font-weight: 900;
      line-height: 0.9;
      text-align: center;
    }

    .color-options,
    .letter-options,
    .paint-tools,
    .paint-colors {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }

    .color-choice,
    .letter-choice,
    .paint-tool,
    .paint-color {
      min-height: 58px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 7px 0 rgba(23, 32, 38, 0.14);
      color: var(--ink);
      font-weight: 900;
    }

    .color-choice {
      min-width: 148px;
      padding: 0 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-size: 1.2rem;
    }

    .color-swatch {
      width: 28px;
      height: 28px;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: var(--swatch-color);
    }

    .letter-choice {
      width: 88px;
      height: 82px;
      font-size: 3rem;
    }

    .keyboard-hint,
    .free-type-output,
    .prek-feedback {
      margin: 0;
      color: var(--muted);
      font-size: clamp(1.2rem, 4vw, 1.6rem);
      font-weight: 900;
      text-align: center;
    }

    .prek-feedback.correct {
      color: var(--green);
    }

    .prek-feedback.incorrect {
      color: var(--red);
      font-size: clamp(1.6rem, 5vw, 2.7rem);
    }

    .free-type-output {
      min-height: 150px;
      display: grid;
      place-items: center;
      padding: 16px;
      border: 3px dashed var(--line);
      border-radius: 8px;
      color: var(--ink);
      font-size: clamp(4rem, 16vw, 9rem);
      line-height: 1;
    }

    .free-type-trail {
      width: min(620px, 100%);
      min-height: 48px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
    }

    .typed-key {
      min-width: 36px;
      min-height: 36px;
      display: grid;
      place-items: center;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      font-weight: 900;
    }

    .paint-canvas {
      width: min(720px, 100%);
      height: 420px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 12px 0 rgba(23, 32, 38, 0.12);
      touch-action: none;
    }

    .paint-tool.active,
    .paint-tool.active {
      background: var(--yellow);
      box-shadow: 0 7px 0 #d39b14;
    }

    .paint-color {
      width: 54px;
      padding: 0;
      background: var(--paint-color);
    }

    .paint-color.active {
      box-shadow:
        0 0 0 4px #ffffff,
        0 0 0 8px var(--blue),
        0 7px 0 rgba(23, 32, 38, 0.14);
      transform: translateY(-2px);
    }

    #chessView.learning-view.active {
      gap: 24px;
      padding: 16px 18px 32px;
      background: #f7f7f7;
    }

    #chessView .learning-title {
      width: calc(100vw - 36px);
      max-width: 900px;
      padding: 0 0 18px;
      border-bottom: 3px solid var(--ink);
      font-size: clamp(3rem, 8vw, 4.6rem);
    }

    .chess-panel {
      width: min(660px, 100%);
      gap: 12px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .chess-controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 12px;
    }

    .chess-controls label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 900;
      color: var(--muted);
    }

    .chess-controls select {
      min-height: 42px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      font-weight: 900;
    }

    .chess-controls .word-action {
      min-height: 50px;
      padding: 0 24px;
      border-radius: 8px;
      background: linear-gradient(180deg, #ffda77, var(--yellow));
      box-shadow: 0 8px 0 #d39b14;
    }

    .chess-board {
      width: min(560px, calc(100vw - 54px));
      aspect-ratio: 1;
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      grid-template-rows: repeat(8, 1fr);
      border: 4px solid var(--ink);
      border-radius: 6px;
      overflow: hidden;
      background: #7da968;
      box-shadow: 0 14px 0 #d9e1df;
    }

    .chess-square {
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      min-width: 0;
      min-height: 0;
      padding: 0;
      color: var(--ink);
      font-family: "Segoe UI Symbol", "Arial Unicode MS", Arial, Helvetica, sans-serif;
      font-size: clamp(2rem, 8vw, 4.4rem);
      font-weight: 900;
      line-height: 1;
      border-radius: 0;
    }

    .chess-square.light {
      background: #f5e9bf;
    }

    .chess-square.dark {
      background: #78a75f;
    }

    .chess-square.selected {
      box-shadow: inset 0 0 0 6px rgba(36, 107, 254, 0.72);
    }

    .chess-square.legal {
      box-shadow: inset 0 0 0 5px rgba(36, 107, 254, 0.42);
    }

    .chess-square.check {
      background: var(--red-soft);
    }

    .chess-piece {
      width: 82%;
      height: 82%;
      display: block;
      transform: translateY(-1px);
      pointer-events: none;
      background-image: url("../../public/image/chess-pieces-sprite.svg");
      background-repeat: no-repeat;
      background-size: 600% 200%;
      filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.28));
    }

    .chess-piece.moving {
      position: relative;
      z-index: 4;
      will-change: transform;
      animation: chess-piece-slide 280ms cubic-bezier(0.22, 0.78, 0.3, 1);
    }

    .chess-piece.moving.capture {
      animation-name: chess-piece-capture;
    }

    @keyframes chess-piece-slide {
      from { transform: translate(var(--chess-move-x), var(--chess-move-y)) translateY(-1px); }
      to { transform: translate(0, 0) translateY(-1px); }
    }

    @keyframes chess-piece-capture {
      0% { transform: translate(var(--chess-move-x), var(--chess-move-y)) translateY(-1px) scale(1); }
      72% { transform: translate(0, 0) translateY(-1px) scale(1.12); }
      100% { transform: translate(0, 0) translateY(-1px) scale(1); }
    }

    .chess-piece.king {
      background-position-x: 0%;
    }

    .chess-piece.queen {
      background-position-x: 20%;
    }

    .chess-piece.rook {
      background-position-x: 80%;
    }

    .chess-piece.bishop {
      background-position-x: 40%;
    }

    .chess-piece.knight {
      background-position-x: 60%;
    }

    .chess-piece.pawn {
      background-position-x: 100%;
    }

    .chess-piece.white {
      background-position-y: 0%;
    }

    .chess-piece.black {
      background-position-y: 100%;
    }

    .chess-credit {
      max-width: min(560px, calc(100vw - 54px));
      margin: -4px 0 0;
      color: var(--muted);
      font-size: 0.72rem;
      font-weight: 800;
      text-align: center;
    }

    .chess-credit a {
      color: inherit;
    }

    .chess-status {
      min-height: 28px;
      margin: 0;
      color: var(--muted);
      font-size: 1.15rem;
      font-weight: 900;
      text-align: center;
    }

    body.in-game #chessView.learning-view.active {
      padding-top: 94px;
    }

    .helper-panel {
      width: min(900px, 100%);
    }

    .helper-section-label {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .times-chooser,
    .multiplier-chooser {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .times-button {
      min-width: 58px;
      background: #ffffff;
    }

    .helper-equation {
      padding: 10px 18px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #fff7c8;
      box-shadow: 0 9px 0 rgba(23, 32, 38, 0.14);
      font-size: clamp(2.4rem, 8vw, 4.8rem);
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .helper-controls {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 10px;
    }

    .helper-control-button {
      min-width: 54px;
      border-color: var(--ink);
      background: #ffffff;
      font-size: 1.4rem;
    }

    .helper-multiplier {
      min-height: 44px;
      display: inline-grid;
      place-items: center;
      padding: 0 16px;
      border-radius: 8px;
      background: var(--green-soft);
      color: var(--ink);
      font-weight: 900;
    }

    .helper-sentence {
      margin: 0;
      color: var(--muted);
      font-size: clamp(1.2rem, 4vw, 1.7rem);
      font-weight: 900;
      text-align: center;
    }

    .skip-count-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 7px;
    }

    .skip-count-number {
      min-width: 44px;
      min-height: 38px;
      display: grid;
      place-items: center;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--ink);
      font-weight: 900;
    }

    .array-board {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
      gap: 10px;
    }

    .array-group {
      min-height: 96px;
      display: grid;
      align-content: start;
      gap: 8px;
      padding: 10px;
      border: 2px solid var(--ink);
      border-radius: 8px;
      background: var(--group-color, #fff7c8);
      box-shadow: 0 6px 0 rgba(23, 32, 38, 0.12);
    }

    .array-group-label {
      font-size: 0.9rem;
      font-weight: 900;
    }

    .dot-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .multiply-dot {
      width: 18px;
      height: 18px;
      border: 2px solid var(--ink);
      border-radius: 50%;
      background: #ffffff;
      box-shadow: inset 0 -3px 0 rgba(23, 32, 38, 0.14);
    }

    .shown-word {
      min-height: 94px;
      display: grid;
      place-items: center;
      color: var(--ink);
      font-size: clamp(3rem, 10vw, 5.8rem);
      font-weight: 900;
      line-height: 1;
      text-align: center;
    }

    .hidden-word {
      color: var(--muted);
      font-size: clamp(2.1rem, 7vw, 4rem);
    }

    .word-input {
      width: min(420px, 100%);
      min-height: 62px;
      border: 2px solid var(--line);
      border-radius: 8px;
      padding: 0 18px;
      color: var(--ink);
      background: #ffffff;
      font-size: clamp(1.7rem, 5vw, 2.6rem);
      font-weight: 900;
      text-align: center;
      outline: none;
    }

    .word-input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(36, 107, 254, 0.14);
    }

    .word-form {
      width: min(420px, 100%);
      display: grid;
      justify-items: stretch;
      gap: 10px;
    }

    .word-feedback {
      min-height: 32px;
      margin: 0;
      color: var(--muted);
      font-size: 1.1rem;
      font-weight: 900;
      text-align: center;
    }

    .word-feedback.correct {
      color: var(--green);
    }

    .word-feedback.incorrect {
      color: var(--red);
      font-size: clamp(1.6rem, 5vw, 2.7rem);
    }

    .letter-bank,
    .choice-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
    }

    .letter-button {
      min-width: 48px;
      font-size: 1.35rem;
    }

    .letter-button:disabled {
      cursor: default;
      opacity: 0.62;
    }

    .built-word {
      min-height: 58px;
      display: grid;
      place-items: center;
      padding: 8px 14px;
      border: 2px dashed var(--line);
      border-radius: 8px;
      color: var(--ink);
      font-size: 2rem;
      font-weight: 900;
      letter-spacing: 0;
    }

    .adventure-scene {
      width: min(620px, 100%);
      min-height: 170px;
      position: relative;
      overflow: hidden;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background:
        linear-gradient(180deg, #c9f4ff 0 62%, #8bd46a 62% 100%);
    }

    .adventure-scene::before {
      content: "";
      position: absolute;
      left: 8%;
      top: 26px;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: #ffdf5d;
      box-shadow: 0 0 0 9px rgba(255, 223, 93, 0.24);
    }

    .path-line {
      position: absolute;
      left: 24px;
      right: 24px;
      bottom: 38px;
      height: 8px;
      border-radius: 999px;
      background: rgba(23, 32, 38, 0.18);
    }

    .adventure-character {
      position: absolute;
      left: 28px;
      bottom: 38px;
      width: 54px;
      height: 70px;
      transform: translateX(var(--quest-progress, 0px));
      transition: transform 420ms ease;
    }

    .adventure-character::before {
      content: "";
      position: absolute;
      left: 13px;
      top: 0;
      width: 28px;
      height: 28px;
      border: 3px solid var(--ink);
      border-radius: 50%;
      background: #ffd69b;
    }

    .adventure-character::after {
      content: "";
      position: absolute;
      left: 8px;
      top: 29px;
      width: 38px;
      height: 36px;
      border: 3px solid var(--ink);
      border-radius: 10px 10px 8px 8px;
      background: var(--blue);
      animation: hero-bob 520ms ease-in-out infinite;
    }

    .goal-flag {
      position: absolute;
      right: 24px;
      bottom: 54px;
      width: 42px;
      height: 70px;
      border-left: 5px solid var(--ink);
    }

    .goal-flag::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 42px;
      height: 28px;
      border: 3px solid var(--ink);
      background: var(--yellow);
    }

    .quest-progress-text {
      margin: 0;
      color: var(--muted);
      font-weight: 900;
    }

    @keyframes hero-bob {
      0%, 100% { transform: translateY(0) rotate(-2deg); }
      50% { transform: translateY(-6px) rotate(2deg); }
    }

    .shop-view.active {
      min-height: 100vh;
      display: grid;
      align-content: start;
      justify-items: center;
      gap: 22px;
      padding: 122px 18px 32px;
    }

    .shop-title {
      margin: 0;
      font-size: clamp(2.6rem, 7vw, 4.6rem);
      line-height: 0.95;
      letter-spacing: 0;
    }

    .shop-purchase-notice {
      width: min(760px, 100%);
      margin: -8px 0 0;
      padding: 12px 16px;
      border: 2px solid #8ecbaa;
      border-radius: 8px;
      color: #11663d;
      background: #effcf4;
      font-weight: 900;
      text-align: center;
    }

    .shop-purchase-notice:empty {
      display: none;
    }

    .shop-layout {
      width: min(1240px, 100%);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
      align-items: stretch;
    }

    .shop-panel {
      min-width: 0;
      min-height: 390px;
      padding: 18px;
      border: 2px solid var(--line);
      border-radius: 10px;
    }

    .shop-panel.items-panel {
      background: #f2f7ff;
      border-color: #bdd1f6;
    }

    .shop-panel.owned-panel {
      background: #f1fbf5;
      border-color: #b7dfc8;
    }

    .shop-panel-header {
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 12px;
      padding-bottom: 10px;
      border-bottom: 2px solid var(--line);
    }

    .shop-panel-title {
      margin: 0;
      color: var(--muted);
      font-size: 0.95rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .shop-add-button {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 50%;
      color: #ffffff;
      background: var(--blue);
      box-shadow: 0 4px 0 #174dbd;
      font-size: 1.8rem;
      font-weight: 900;
      line-height: 1;
    }

    .shop-add-button:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 #174dbd;
    }

    .shop-item-grid,
    .owned-slot {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
      gap: 14px;
      align-items: stretch;
    }

    .shop-item {
      min-width: 0;
      display: grid;
      align-content: start;
      gap: 10px;
      padding: 14px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 7px 18px rgba(23, 32, 38, 0.1);
    }

    .shop-item.owned {
      background: #f5fff9;
    }

    .item-media {
      width: 100%;
      aspect-ratio: 1;
      overflow: hidden;
      display: grid;
      place-items: center;
      border: 2px solid var(--ink);
      border-radius: 7px;
      background: #e8f4ff;
    }

    .item-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      background: #ffffff;
    }

    .item-icon {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      background: linear-gradient(180deg, #a8f0ff, #246bfe);
      color: #ffffff;
      font-size: clamp(2.2rem, 7vw, 4rem);
      font-weight: 900;
    }

    .item-name {
      margin: 0;
      font-size: 1.25rem;
      font-weight: 900;
      line-height: 1.15;
      overflow-wrap: anywhere;
    }

    .item-price,
    .item-purchase-date,
    .shop-message {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      font-weight: 800;
      line-height: 1.35;
    }

    .item-purchase-date {
      font-size: 0.88rem;
    }

    .owned-total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 16px;
      padding: 14px;
      border: 2px solid #8ecbaa;
      border-radius: 8px;
      background: #ffffff;
      font-weight: 900;
    }

    .owned-total strong {
      color: var(--green);
      font-size: 1.35rem;
    }

    .purchase-button {
      min-height: 46px;
      width: 100%;
      border-radius: 8px;
      padding: 0 12px;
      color: var(--ink);
      background: linear-gradient(180deg, #ffda77, var(--yellow));
      box-shadow: 0 5px 0 #d39b14;
      font-weight: 900;
    }

    .purchase-button:disabled {
      cursor: default;
      opacity: 0.58;
      box-shadow: 0 5px 0 #d39b14;
    }

    .shop-empty {
      min-height: 120px;
      grid-column: 1 / -1;
      display: grid;
      place-items: center;
      padding: 14px;
      border: 2px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
      font-weight: 900;
      text-align: center;
    }

    .item-upload-preview {
      width: 116px;
      aspect-ratio: 1;
      overflow: hidden;
      display: grid;
      place-items: center;
      border: 2px dashed var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: #f4f7f8;
      font-weight: 900;
    }

    .item-upload-preview img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #ffffff;
    }

    .admin-lock-button {
      position: fixed;
      right: 18px;
      bottom: 18px;
      z-index: 70;
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #fff7c8;
      box-shadow: 0 8px 0 rgba(23, 32, 38, 0.2);
    }

    .lock-icon {
      position: relative;
      width: 26px;
      height: 22px;
      border: 4px solid var(--ink);
      border-radius: 5px;
      background: var(--yellow);
    }

    .lock-icon::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 14px;
      width: 20px;
      height: 18px;
      border: 4px solid var(--ink);
      border-bottom: 0;
      border-radius: 14px 14px 0 0;
      transform: translateX(-50%);
    }

    .admin-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: grid;
      place-items: center;
      overflow-y: auto;
      padding: 18px;
      background: rgba(23, 32, 38, 0.42);
    }

    .login-detail-card[hidden],
    .admin-modal[hidden],
    .admin-panel[hidden],
    .password-form[hidden] {
      display: none;
    }

    .admin-dialog {
      width: min(420px, 100%);
      max-height: calc(100vh - 36px);
      overflow-y: auto;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: var(--shadow);
      padding: 20px;
    }

    .admin-dialog h2 {
      margin: 0 0 14px;
      font-size: 2rem;
      line-height: 1;
      letter-spacing: 0;
    }

    .modal-copy {
      margin: 0 0 16px;
      color: var(--muted);
      font-weight: 800;
      line-height: 1.45;
    }

    .admin-dialog form,
    .admin-panel {
      display: grid;
      gap: 12px;
    }

    .admin-dialog label {
      color: var(--muted);
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
    }

    .admin-dialog input {
      width: 100%;
      min-height: 54px;
      border: 2px solid var(--line);
      border-radius: 8px;
      padding: 0 14px;
      color: var(--ink);
      font-size: 1.35rem;
      font-weight: 900;
      outline: none;
    }

    .admin-dialog input:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(36, 107, 254, 0.14);
    }

    .admin-dialog input[type="file"] {
      min-height: 58px;
      padding: 10px;
      font-size: 0.95rem;
    }

    .modal-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: flex-end;
    }

    .admin-action,
    .admin-close {
      min-height: 46px;
      border-radius: 8px;
      padding: 0 16px;
      color: var(--ink);
      font-weight: 900;
    }

    .admin-action {
      background: linear-gradient(180deg, #ffda77, var(--yellow));
      box-shadow: 0 7px 0 #d39b14;
    }

    .admin-action.danger {
      color: #ffffff;
      background: var(--red);
      box-shadow: 0 7px 0 #9f2417;
    }

    .admin-action:disabled {
      cursor: default;
      opacity: 0.45;
      box-shadow: none;
    }

    .admin-close {
      border: 2px solid var(--line);
      background: var(--panel);
    }

    .admin-message {
      min-height: 22px;
      margin: 0;
      color: var(--muted);
      font-weight: 800;
    }

    .game-layout {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 220px minmax(380px, 1fr) 220px;
      grid-template-rows: auto 1fr;
      column-gap: 0;
      align-items: start;
    }

    .game-title {
      position: fixed;
      top: 14px;
      left: 104px;
      z-index: 3;
      width: fit-content;
      margin: 0;
      padding: 0 10px 6px;
      background: transparent;
      font-size: clamp(2.6rem, 4vw, 3.25rem);
      line-height: 0.92;
      letter-spacing: 0;
    }

    .mode-tabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 0;
    }

    .flash-mode-tabs {
      grid-column: 1 / -1;
      justify-self: center;
      align-self: start;
      width: min(680px, calc(100vw - 180px));
      margin-top: 86px;
      padding: 10px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.94);
      box-shadow: 0 10px 0 rgba(23, 32, 38, 0.12);
      z-index: 2;
    }

    .mode-button,
    .chart-toggle-button,
    .submit-button {
      color: var(--ink);
      font-weight: 900;
      transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    }

    .mode-button,
    .chart-toggle-button {
      min-height: 44px;
      padding: 0 16px;
      border: 2px solid var(--line);
      border-radius: 6px;
      background: var(--panel);
    }

    .mode-button.active {
      color: #ffffff;
      border-color: var(--blue);
      background: var(--blue);
      box-shadow: 0 8px 20px rgba(36, 107, 254, 0.22);
    }

    .mode-button:hover,
    .brand-home-button:hover,
    .chart-toggle-button:hover,
    .submit-button:hover {
      transform: translateY(-1px);
    }

    .chart-toggle-button {
      display: none;
      border-color: var(--ink);
      background: #fff7c8;
    }

    .chart-toggle-button.show {
      display: inline-flex;
      align-items: center;
    }

    .chart-toggle-button.active {
      background: var(--yellow);
      box-shadow: 0 7px 0 #d39b14;
    }

    .multiplication-filter {
      display: none;
      align-items: center;
      gap: 8px;
      min-height: 44px;
      padding: 4px 6px 4px 10px;
      border: 2px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 900;
    }

    .multiplication-filter.show {
      display: inline-flex;
    }

    .multiplication-filter select {
      min-height: 34px;
      border: 2px solid var(--line);
      border-radius: 6px;
      background: #f8fbff;
      color: var(--ink);
      font-weight: 900;
      outline: none;
    }

    .multiplication-filter select:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(36, 107, 254, 0.14);
    }

    .specific-factor-select {
      display: none;
    }

    .specific-factor-select.show {
      display: inline-block;
    }

    .game-shell {
      display: grid;
      justify-items: center;
      padding-top: 0;
    }

    .game-shell.chart-open {
      width: min(1050px, calc(100vw - 32px));
      grid-template-columns: minmax(360px, 560px) minmax(360px, 430px);
      align-items: start;
      justify-content: center;
      gap: 18px;
    }

    .card-frame {
      width: min(430px, 100%);
      padding: 14px;
      background: rgba(255, 255, 255, 0.68);
      box-shadow: 0 26px 58px rgba(23, 32, 38, 0.1);
    }

    .game-board {
      grid-column: 1 / -1;
      grid-row: 2;
      z-index: 1;
      display: grid;
      justify-content: center;
      align-content: start;
      min-height: calc(100vh - 170px);
      padding-top: 28px;
    }

    .card-area {
      min-height: min(720px, calc(100vh - 104px));
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: none;
      padding: 34px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 18px;
      overflow: hidden;
    }

    .card-area.gold-card {
      border-color: #8a5a00;
      background:
        linear-gradient(180deg, rgba(255, 248, 204, 0.98), rgba(255, 226, 112, 0.92)),
        #ffffff;
      box-shadow:
        inset 0 0 0 5px rgba(255, 203, 69, 0.4),
        0 0 34px rgba(255, 203, 69, 0.46);
    }

    .multiplication-chart-panel {
      display: none;
      width: min(560px, calc(100vw - 36px));
      margin: 0 auto 14px;
      padding: 12px;
      border: 3px solid var(--ink);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.96);
      box-shadow: 0 10px 0 rgba(23, 32, 38, 0.12);
    }

    .multiplication-chart-panel.show {
      display: block;
    }

    .multiplication-chart-title {
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 0.95rem;
      font-weight: 900;
      text-align: center;
      text-transform: uppercase;
    }

    .multiplication-chart-grid {
      display: grid;
      grid-template-columns: repeat(13, minmax(28px, 1fr));
      gap: 3px;
      font-size: clamp(0.68rem, 1.4vw, 0.95rem);
      font-weight: 900;
    }

    .chart-cell {
      min-height: 28px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      color: var(--ink);
      background: #f6faf9;
      border: 1px solid #d9e6e2;
      font-weight: 900;
    }

    .chart-cell.header {
      color: #ffffff;
      background: var(--blue);
      border-color: var(--blue);
      cursor: pointer;
    }

    .chart-cell.corner {
      color: var(--ink);
      background: var(--red-soft);
      border-color: #ff9b8c;
      cursor: pointer;
    }

    .chart-cell.axis-highlight {
      background: var(--green-soft);
      border-color: #8eddb5;
      box-shadow: inset 0 0 0 2px #ffffff;
    }

    .chart-cell.header.axis-highlight {
      color: var(--ink);
      background: #bff0d4;
      border-color: var(--green);
    }

    .section-label {
      margin: 0;
      color: var(--muted);
      font-size: 1rem;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0;
      text-align: center;
    }

    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    .problem-card {
      align-self: center;
      display: grid;
      gap: 10px;
      margin-top: 42px;
    }

    .stack-problem {
      width: min(300px, 100%);
      margin: 0 auto;
      display: grid;
      grid-template-columns: 0.45fr 1fr;
      align-items: end;
      justify-items: end;
      column-gap: 12px;
      color: var(--ink);
      font-weight: 900;
      line-height: 0.9;
    }

    .top-number,
    .bottom-number,
    .operator {
      font-size: clamp(5rem, 18vw, 8.4rem);
    }

    .top-number {
      grid-column: 2;
    }

    .operator {
      grid-column: 1;
      grid-row: 2;
      justify-self: center;
      padding-bottom: 8px;
    }

    .bottom-number {
      grid-column: 2;
      grid-row: 2;
    }

    .problem-line {
      grid-column: 1 / -1;
      width: 100%;
      height: 6px;
      border-radius: 999px;
      background: var(--ink);
    }

    .answer-row {
      width: min(320px, 100%);
      margin: 0 auto;
      display: grid;
      gap: 10px;
    }

    input[type="number"] {
      width: 100%;
      min-width: 0;
      min-height: 76px;
      border: 2px solid var(--line);
      border-radius: 8px;
      padding: 0 18px;
      color: var(--ink);
      background: #ffffff;
      font-size: clamp(2.2rem, 7vw, 3.1rem);
      font-weight: 900;
      outline: none;
      text-align: center;
    }

    input[type="number"]:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(36, 107, 254, 0.14);
    }

    .submit-button {
      min-height: 56px;
      border-radius: 8px;
      padding: 0 18px;
      background: linear-gradient(180deg, #ffda77, var(--yellow));
      box-shadow: 0 8px 0 #d39b14;
    }

    .submit-button:active {
      transform: translateY(4px);
      box-shadow: 0 4px 0 #d39b14;
    }

    .submit-button:disabled {
      cursor: default;
      opacity: 0.64;
      transform: none;
      box-shadow: 0 8px 0 #d39b14;
    }

    .feedback {
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 1.15rem;
      font-weight: 900;
      text-align: center;
    }

    .feedback.correct {
      color: var(--green);
    }

    .feedback.incorrect {
      color: var(--red);
    }

    .feedback.answer-reveal {
      font-size: clamp(2.1rem, 8vw, 4rem);
      line-height: 1;
    }

    @media (max-width: 760px) {
      .app {
        width: 100%;
        padding-top: 0;
      }

      .account-form,
      .create-account-form {
        grid-template-columns: 1fr;
      }

      .profile-dock {
        max-width: calc(100vw - 220px);
      }

      .profile-dock .account-button {
        min-height: 38px;
        padding: 0 10px;
      }

      .category-picker {
        grid-template-columns: 1fr;
      }

      .category-card {
        min-height: 190px;
      }

      .category-menu-header {
        align-items: start;
        flex-direction: column;
      }

      .game-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }

      .game-title,
      .game-board,
      .game-shell {
        grid-column: 1;
        grid-row: auto;
      }

      .game-title {
        top: 12px;
        left: 96px;
        max-width: calc(100vw - 232px);
        font-size: clamp(1.9rem, 7vw, 2.7rem);
      }

      .flash-mode-tabs {
        width: min(560px, calc(100vw - 24px));
        margin-top: 104px;
      }

      .game-shell.chart-open {
        width: min(560px, calc(100vw - 24px));
        grid-template-columns: 1fr;
      }

      .card-area {
        min-height: 570px;
        padding: 22px;
      }

      .shop-layout {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 480px) {
      .top-controls {
        top: 8px;
        right: 8px;
        max-width: calc(100vw - 88px);
        gap: 6px;
      }

      .money-counter {
        min-width: 96px;
      }

      .profile-dock {
        gap: 4px;
        max-width: calc(100vw - 198px);
      }

      .profile-button {
        gap: 5px;
        padding: 0 4px;
      }

      .profile-dock .account-avatar {
        width: 38px;
        height: 38px;
        font-size: 1.35rem;
      }

      .game-title {
        left: 90px;
        max-width: calc(100vw - 196px);
        font-size: 1.55rem;
      }

      .brand-home-button {
        width: 72px;
        height: 72px;
      }

    }

    /* Shared visual system */
    :root {
      --ink: #162129;
      --muted: #5d6b73;
      --paper: #f5f8f7;
      --panel: #ffffff;
      --line: #d9e3df;
      --line-strong: #b9c9c3;
      --green: #159a5b;
      --green-soft: #e2f5e9;
      --red: #d94a3a;
      --red-soft: #fde7e3;
      --blue: #2867d7;
      --blue-soft: #e7efff;
      --yellow: #f6c94d;
      --yellow-soft: #fff5cf;
      --violet: #7757c8;
      --violet-soft: #eee9fb;
      --shadow: 0 14px 36px rgba(22, 33, 41, 0.1);
    }

    body {
      background: var(--paper);
      font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    }

    .login-view.active {
      background: var(--paper);
    }

    button,
    input,
    select {
      letter-spacing: 0;
    }

    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 3px solid rgba(40, 103, 215, 0.32);
      outline-offset: 3px;
    }

    .brand-home-button {
      top: 10px;
      left: 12px;
      width: 70px;
      height: 70px;
    }

    .game-back-button {
      position: fixed;
      top: 23px;
      left: 90px;
      z-index: 54;
      width: 44px;
      height: 44px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 5px 14px rgba(22, 33, 41, 0.12);
      font-size: 1.7rem;
      font-weight: 900;
      line-height: 1;
      transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
    }

    .game-back-button:hover {
      transform: translateX(-2px);
      background: var(--blue-soft);
      box-shadow: 0 7px 18px rgba(22, 33, 41, 0.14);
    }

    .game-back-button:active {
      transform: translateX(-4px);
    }

    .game-back-button[hidden] {
      display: none;
    }

    body.in-game .game-title {
      left: 146px;
    }

    .brand-logo,
    .home-hero-logo,
    .login-logo {
      filter: drop-shadow(0 9px 14px rgba(22, 33, 41, 0.12));
    }

    .top-controls {
      top: 10px;
      right: 12px;
      align-items: center;
      gap: 8px;
    }

    .profile-dock,
    .money-counter {
      min-height: 48px;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      box-shadow: 0 5px 14px rgba(22, 33, 41, 0.1);
    }

    .profile-dock {
      padding: 4px;
      background: #ffffff;
    }

    .money-counter {
      min-width: 112px;
      padding: 7px 12px;
      background: var(--yellow-soft);
    }

    .money-counter:hover,
    .money-counter:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 7px 18px rgba(22, 33, 41, 0.13);
    }

    .money-counter:active {
      transform: translateY(1px);
      box-shadow: 0 3px 10px rgba(22, 33, 41, 0.12);
    }

    .money-symbol {
      width: 30px;
      height: 30px;
      font-size: 1.15rem;
    }

    .money-total {
      font-size: 1.45rem;
    }

    .home-view.active {
      gap: 24px;
      padding: 82px 20px 44px;
    }

    .home-hero-logo {
      width: min(650px, 78vw);
      max-height: 170px;
      object-fit: contain;
    }

    .category-picker {
      width: min(980px, 100%);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }

    .category-card {
      --card-accent: var(--blue);
      --card-tint: var(--blue-soft);
      min-height: 184px;
      gap: 5px;
      padding: 18px;
      border: 1px solid var(--line);
      border-top: 5px solid var(--card-accent);
      border-radius: 8px;
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
      box-shadow: var(--shadow);
    }

    .category-card:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 38px rgba(22, 33, 41, 0.14);
    }

    .category-card:active {
      transform: translateY(1px);
      box-shadow: 0 8px 20px rgba(22, 33, 41, 0.12);
    }

    .category-card.math {
      --card-accent: #d59518;
      --card-tint: #fff5d5;
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card.spelling {
      --card-accent: var(--green);
      --card-tint: var(--green-soft);
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card.typing {
      --card-accent: var(--blue);
      --card-tint: var(--blue-soft);
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card.prek {
      --card-accent: #d75292;
      --card-tint: #fde8f2;
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card.games {
      --card-accent: #5c8d45;
      --card-tint: #eaf4e5;
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card.reading {
      --card-accent: var(--violet);
      --card-tint: var(--violet-soft);
      background: linear-gradient(180deg, var(--card-tint) 0 60%, #ffffff 60% 100%);
    }

    .category-card::after,
    .category-art {
      display: none;
    }

    .category-card.spelling::after {
      display: none;
    }

    .category-card::before {
      right: 18px;
      top: 18px;
      transform-origin: top right;
      box-shadow: 0 7px 15px rgba(22, 33, 41, 0.14);
    }

    .category-card.math::before { transform: rotate(8deg) scale(0.64); }
    .category-card.spelling::before { transform: rotate(-7deg) scale(0.64); }
    .category-card.typing::before { transform: rotate(5deg) scale(0.62); }
    .category-card.prek::before { transform: scale(0.56); }
    .category-card.games::before { transform: rotate(4deg) scale(0.55); }

    .category-card.reading::before {
      content: "";
      position: absolute;
      width: 118px;
      height: 84px;
      border: 4px solid #513d8a;
      border-radius: 7px;
      background:
        linear-gradient(90deg, transparent 48%, #513d8a 48% 52%, transparent 52%),
        repeating-linear-gradient(180deg, #ffffff 0 12px, #d8cff3 12px 14px);
      transform: rotate(-3deg) scale(0.74);
    }

    .category-card-title {
      font-size: clamp(1.75rem, 3vw, 2.25rem);
      line-height: 1;
    }

    .category-card-text {
      max-width: 90%;
      font-size: 0.92rem;
      font-weight: 700;
    }

    .category-menu-view.active,
    .learning-view.active,
    .account-settings-view.active,
    .shop-view.active {
      padding-top: 98px;
    }

    .category-menu-header,
    .game-picker {
      width: min(940px, 100%);
    }

    .category-menu-header {
      align-items: center;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--line);
    }

    .category-menu-title,
    .learning-title,
    .shop-title {
      font-size: clamp(2.15rem, 5vw, 3.4rem);
      line-height: 1;
    }

    .category-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 14px;
    }

    .game-choice {
      min-height: 112px;
      display: grid;
      grid-template-columns: 58px minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      column-gap: 14px;
      row-gap: 5px;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: 0 8px 22px rgba(22, 33, 41, 0.09);
    }

    .game-choice:hover {
      border-color: var(--line-strong);
      transform: translateY(-2px);
      box-shadow: 0 13px 27px rgba(22, 33, 41, 0.13);
    }

    .game-choice:active {
      transform: translateY(1px);
      box-shadow: 0 5px 15px rgba(22, 33, 41, 0.1);
    }

    .game-choice-icon {
      position: relative;
      grid-column: 1;
      grid-row: 1 / 3;
      width: 54px;
      height: 54px;
      margin: 0;
      overflow: hidden;
      border: 1px solid rgba(22, 33, 41, 0.12);
      border-radius: 8px;
      color: var(--ink);
      background: var(--blue-soft);
      box-shadow: none;
    }

    .game-choice-icon::before,
    .game-choice-icon::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .game-choice-title,
    .game-choice-text {
      grid-column: 2;
      min-width: 0;
    }

    .game-choice-title {
      align-self: end;
      margin: 0;
      font-size: 1.18rem;
      line-height: 1.1;
    }

    .game-choice-text {
      align-self: start;
      font-size: 0.86rem;
      font-weight: 700;
    }

    .icon-flash,
    .icon-multiply,
    .icon-balance {
      background: var(--yellow-soft);
    }

    .icon-spell,
    .icon-builder,
    .icon-spelling-list {
      background: var(--green-soft);
    }

    .icon-type,
    .icon-quest,
    .icon-keys {
      background: var(--blue-soft);
    }

    .icon-color,
    .icon-letter,
    .icon-paint {
      background: #fde8f2;
    }

    .icon-chess,
    .icon-memory,
    .icon-snake,
    .icon-mines {
      background: #eaf4e5;
    }

    .icon-reading {
      background: var(--violet-soft);
    }

    .icon-flash::before,
    .icon-multiply::before,
    .icon-spell::before,
    .icon-builder::before,
    .icon-spelling-list::before,
    .icon-type::before,
    .icon-quest::before,
    .icon-letter::before,
    .icon-keys::before {
      inset: 0;
      display: grid;
      place-items: center;
      color: var(--ink);
      font-weight: 900;
      line-height: 1;
    }

    .icon-flash::before { content: "+"; font-size: 2.4rem; }
    .icon-multiply::before { content: "x"; font-size: 2rem; }
    .icon-spell::before { content: "Aa"; font-size: 1.35rem; }
    .icon-builder::before { content: "ABC"; font-size: 0.9rem; }
    .icon-spelling-list::before { content: "LIST"; font-size: 0.72rem; }
    .icon-type::before { content: "abc"; font-size: 1rem; }
    .icon-quest::before { content: ">"; font-size: 2rem; }
    .icon-letter::before { content: "A"; font-size: 2rem; }
    .icon-keys::before { content: "KEY"; font-size: 0.8rem; }

    .icon-balance::before {
      left: 8px;
      right: 8px;
      top: 25px;
      height: 4px;
      border-radius: 4px;
      background: var(--ink);
      transform: rotate(-5deg);
    }

    .icon-balance::after {
      left: 24px;
      top: 13px;
      width: 5px;
      height: 31px;
      background: var(--ink);
      box-shadow: -15px 19px 0 5px #e9ad22, 15px 16px 0 5px #e9ad22;
    }

    .icon-reading::before {
      inset: 12px 7px 10px;
      border: 3px solid #513d8a;
      border-radius: 4px;
      background: #ffffff;
    }

    .icon-reading::after {
      left: 25px;
      top: 12px;
      bottom: 10px;
      width: 3px;
      background: #513d8a;
    }

    .icon-memory::before,
    .icon-memory::after {
      width: 23px;
      height: 29px;
      border: 2px solid #426c31;
      border-radius: 4px;
      background: #ffffff;
    }

    .icon-memory::before {
      left: 10px;
      top: 15px;
      transform: rotate(-8deg);
    }

    .icon-memory::after {
      right: 9px;
      top: 10px;
      background: #b9dda9;
      transform: rotate(8deg);
    }

    .icon-snake::before {
      left: 8px;
      top: 24px;
      width: 34px;
      height: 9px;
      border-radius: 8px;
      background: #159a5b;
      box-shadow: 12px -12px 0 -1px #159a5b, 28px -12px 0 -1px #2867d7;
    }

    .icon-mines::before {
      left: 16px;
      top: 16px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #30363a;
      box-shadow: 0 -10px 0 -8px #30363a, 0 10px 0 -8px #30363a, -10px 0 0 -8px #30363a, 10px 0 0 -8px #30363a;
    }

    .icon-mines::after {
      left: 24px;
      top: 11px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #ffffff;
    }

    .icon-chess::before {
      inset: 3px;
      background-image: url("../../public/image/chess-pieces-sprite.svg");
      background-repeat: no-repeat;
      background-position: 60% 100%;
      background-size: 600% 200%;
    }

    .icon-color::before {
      left: 13px;
      top: 13px;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 18px 0 #f3b51e, 0 18px var(--green), 18px 18px var(--red);
    }

    .icon-paint::before {
      left: 24px;
      top: 8px;
      width: 7px;
      height: 38px;
      border-radius: 4px;
      background: var(--ink);
      transform: rotate(38deg);
    }

    .back-button,
    .account-button,
    .difficulty-button,
    .word-action,
    .times-button,
    .helper-control-button,
    .letter-button,
    .choice-button,
    .paint-tool,
    .color-choice,
    .letter-choice,
    .purchase-button,
    .submit-button,
    .mode-button,
    .chart-toggle-button {
      border-radius: 7px;
    }

    .back-button,
    .account-button,
    .difficulty-button,
    .times-button,
    .helper-control-button,
    .letter-button,
    .choice-button,
    .paint-tool,
    .color-choice,
    .letter-choice {
      border: 1px solid var(--line-strong);
      box-shadow: 0 3px 0 rgba(22, 33, 41, 0.1);
    }

    .word-action,
    .submit-button,
    .purchase-button {
      border: 1px solid #d39b19;
      background: var(--yellow);
      box-shadow: 0 4px 0 #c18d15;
    }

    .word-action:active,
    .submit-button:active,
    .purchase-button:active,
    .back-button:active {
      transform: translateY(2px);
      box-shadow: 0 2px 0 rgba(22, 33, 41, 0.12);
    }

    .learning-panel,
    .account-settings-card,
    .login-card,
    .multiplication-chart-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      box-shadow: var(--shadow);
    }

    .login-card {
      box-shadow: 0 16px 40px rgba(22, 33, 41, 0.12);
    }

    .login-user-card {
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      box-shadow: 0 7px 18px rgba(22, 33, 41, 0.1);
    }

    .login-user-card:hover,
    .login-user-card.selected {
      box-shadow: 0 11px 24px rgba(22, 33, 41, 0.14);
    }

    .login-user-card:active {
      box-shadow: 0 5px 14px rgba(22, 33, 41, 0.1);
    }

    /* Math Balance */
    .math-balance-panel {
      width: min(780px, 100%);
    }

    .mini-toolbar,
    .game-stats,
    .answer-choice-grid,
    .reading-actions {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 9px;
    }

    .mini-toolbar .choice-button {
      min-width: 108px;
    }

    .game-stats {
      justify-content: space-between;
      padding: 10px 14px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      font-weight: 800;
    }

    .balance-stage {
      width: min(640px, 100%);
      min-height: 250px;
      display: grid;
      align-content: end;
      padding: 22px 12px 18px;
    }

    .balance-beam {
      position: relative;
      width: min(540px, 88%);
      height: 8px;
      margin: 0 auto 64px;
      border-radius: 8px;
      background: var(--ink);
      transform: rotate(-3deg);
      transition: transform 350ms ease;
    }

    .balance-beam.balanced {
      transform: rotate(0);
    }

    .balance-beam.wrong {
      animation: balance-wobble 480ms ease-in-out 2;
    }

    .balance-beam::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 8px;
      width: 0;
      height: 0;
      border-left: 34px solid transparent;
      border-right: 34px solid transparent;
      border-bottom: 68px solid #53636c;
      transform: translateX(-50%);
    }

    .balance-pan {
      position: absolute;
      top: -98px;
      width: 42%;
      min-height: 78px;
      display: grid;
      place-items: center;
      padding: 12px;
      border: 3px solid var(--ink);
      border-radius: 8px 8px 32px 32px;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(22, 33, 41, 0.12);
      font-size: clamp(1.9rem, 6vw, 3rem);
      font-weight: 900;
    }

    .balance-pan.left { left: 0; }
    .balance-pan.right { right: 0; background: var(--yellow-soft); }

    .answer-choice-grid {
      max-width: 560px;
    }

    .number-choice {
      width: 94px;
      min-height: 68px;
      border: 2px solid var(--blue);
      border-radius: 8px;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 4px 0 #b9cbed;
      font-size: 1.8rem;
      font-weight: 900;
    }

    .number-choice:hover { background: var(--blue-soft); }
    .number-choice.correct { border-color: var(--green); background: var(--green-soft); }
    .number-choice.incorrect { border-color: var(--red); background: var(--red-soft); }

    .game-feedback {
      min-height: 38px;
      margin: 0;
      color: var(--muted);
      font-size: 1.15rem;
      font-weight: 900;
      text-align: center;
    }

    .game-feedback.correct { color: var(--green); }
    .game-feedback.incorrect { color: var(--red); font-size: clamp(1.35rem, 4vw, 2rem); }

    @keyframes balance-wobble {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(4deg); }
    }

    /* Memory Match */
    .memory-panel {
      width: min(760px, 100%);
    }

    .memory-grid {
      --memory-columns: 4;
      width: min(480px, 100%);
      display: grid;
      grid-template-columns: repeat(var(--memory-columns), minmax(58px, 1fr));
      gap: 10px;
    }

    .memory-card {
      position: relative;
      aspect-ratio: 1;
      min-width: 0;
      padding: 0;
      border: 1px solid #9eb7aa;
      border-radius: 8px;
      background: transparent;
      perspective: 700px;
    }

    .memory-card-inner {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
      transition: transform 320ms ease;
    }

    .memory-card.flipped .memory-card-inner,
    .memory-card.matched .memory-card-inner {
      transform: rotateY(180deg);
    }

    .memory-card-face {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      border-radius: 7px;
      backface-visibility: hidden;
    }

    .memory-card-back {
      color: #ffffff;
      background: var(--blue);
      font-size: clamp(1.4rem, 5vw, 2.2rem);
      font-weight: 900;
    }

    .memory-card-front {
      background: #ffffff;
      transform: rotateY(180deg);
    }

    .memory-card.matched .memory-card-front {
      background: var(--green-soft);
    }

    .memory-symbol {
      --shape-color: var(--blue);
      width: 52%;
      height: 52%;
      display: block;
      background: var(--shape-color);
    }

    .shape-circle { border-radius: 50%; }
    .shape-square { border-radius: 6px; }
    .shape-diamond { transform: rotate(45deg) scale(0.76); }
    .shape-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
    .shape-star { clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 34%); }
    .shape-hexagon { clip-path: polygon(25% 7%, 75% 7%, 100% 50%, 75% 93%, 25% 93%, 0 50%); }
    .shape-cross { clip-path: polygon(34% 0, 66% 0, 66% 34%, 100% 34%, 100% 66%, 66% 66%, 66% 100%, 34% 100%, 34% 66%, 0 66%, 0 34%, 34% 34%); }
    .shape-ring { border: 10px solid var(--shape-color); border-radius: 50%; background: transparent; }

    /* Snake */
    .snake-panel {
      width: min(720px, 100%);
    }

    .snake-toolbar {
      width: min(500px, 100%);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .snake-stats {
      display: flex;
      gap: 16px;
      color: var(--muted);
      font-weight: 900;
    }

    .snake-board-wrap {
      position: relative;
      width: min(500px, 100%);
      aspect-ratio: 1;
      border: 4px solid var(--ink);
      border-radius: 8px;
      overflow: hidden;
      background: #dff0c7;
      box-shadow: 0 9px 0 #c3cfcb;
    }

    .snake-canvas {
      width: 100%;
      height: 100%;
      display: block;
      image-rendering: pixelated;
    }

    .snake-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 24px;
      color: #ffffff;
      background: rgba(22, 33, 41, 0.82);
      font-size: clamp(1.5rem, 6vw, 2.6rem);
      font-weight: 900;
      text-align: center;
    }

    .snake-overlay[hidden] {
      display: none;
    }

    .snake-controls {
      width: 194px;
      display: grid;
      grid-template-columns: repeat(3, 58px);
      grid-template-rows: repeat(2, 58px);
      gap: 10px;
    }

    .snake-control {
      display: grid;
      place-items: center;
      border: 1px solid var(--line-strong);
      border-radius: 8px;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 4px 0 #b8c8c2;
      font-size: 1.7rem;
      font-weight: 900;
    }

    .snake-control:active {
      transform: translateY(3px);
      box-shadow: 0 1px 0 #b8c8c2;
    }

    .snake-control.up { grid-column: 2; grid-row: 1; }
    .snake-control.left { grid-column: 1; grid-row: 2; }
    .snake-control.down { grid-column: 2; grid-row: 2; }
    .snake-control.right { grid-column: 3; grid-row: 2; }

    /* Windows-style Minesweeper */
    .minesweeper-panel {
      width: min(1060px, 100%);
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .mines-window {
      width: max-content;
      max-width: 100%;
      padding: 6px;
      border-color: #ffffff #4c4c4c #4c4c4c #ffffff;
      border-style: solid;
      border-width: 4px;
      color: #000000;
      background: #c0c0c0;
      box-shadow: 0 9px 0 #d5ddda;
      font-family: Arial, Helvetica, sans-serif;
    }

    .mines-menu {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 3px 4px 7px;
      font-size: 0.9rem;
      font-weight: 700;
    }

    .mines-menu label {
      display: flex;
      align-items: center;
      gap: 7px;
    }

    .mines-menu select {
      min-height: 32px;
      border: 2px inset #ffffff;
      border-radius: 0;
      background: #ffffff;
      font-weight: 700;
    }

    .mines-flag-mode {
      min-height: 34px;
      padding: 0 10px;
      border: 3px outset #eeeeee;
      border-radius: 0;
      background: #c0c0c0;
      font-weight: 900;
    }

    .mines-flag-mode.active {
      border-style: inset;
      background: #a8a8a8;
    }

    .mines-scorebar {
      min-height: 66px;
      display: grid;
      grid-template-columns: 78px 1fr 78px;
      align-items: center;
      gap: 16px;
      margin-bottom: 7px;
      padding: 7px 9px;
      border-color: #777777 #ffffff #ffffff #777777;
      border-style: solid;
      border-width: 4px;
    }

    .mines-counter {
      min-width: 70px;
      padding: 3px 5px;
      color: #ff1b13;
      background: #050505;
      font-family: "Courier New", monospace;
      font-size: 2rem;
      font-weight: 900;
      line-height: 1;
      text-align: center;
      text-shadow: 0 0 5px rgba(255, 27, 19, 0.55);
    }

    .mines-face {
      justify-self: center;
      width: 46px;
      height: 46px;
      display: grid;
      place-items: center;
      padding: 0;
      border: 4px outset #eeeeee;
      border-radius: 0;
      background: #c0c0c0;
      font-size: 1.65rem;
      line-height: 1;
    }

    .mines-face:active {
      border-style: inset;
    }

    .mines-board-scroll {
      max-width: min(100%, calc(100vw - 48px));
      overflow: auto;
      border-color: #777777 #ffffff #ffffff #777777;
      border-style: solid;
      border-width: 4px;
      background: #808080;
    }

    .mines-board {
      --mine-cell-size: 28px;
      display: grid;
      width: max-content;
      grid-template-columns: repeat(var(--mine-columns), var(--mine-cell-size));
      grid-template-rows: repeat(var(--mine-rows), var(--mine-cell-size));
      background: #c0c0c0;
    }

    .mine-cell {
      width: var(--mine-cell-size);
      height: var(--mine-cell-size);
      display: grid;
      place-items: center;
      padding: 0;
      border-color: #ffffff #777777 #777777 #ffffff;
      border-style: solid;
      border-width: 3px;
      border-radius: 0;
      color: #000000;
      background: #c0c0c0;
      font-size: calc(var(--mine-cell-size) * 0.68);
      font-weight: 900;
      line-height: 1;
    }

    .mine-cell.revealed {
      border: 1px solid #808080;
    }

    .mine-cell.flagged {
      color: #d70000;
    }

    .mine-cell.exploded {
      background: #ff0000;
    }

    .mine-cell.wrong-flag {
      color: #000000;
      background: #ffb5b5;
    }

    .mine-cell.n1 { color: #0000ff; }
    .mine-cell.n2 { color: #008000; }
    .mine-cell.n3 { color: #ff0000; }
    .mine-cell.n4 { color: #000080; }
    .mine-cell.n5 { color: #800000; }
    .mine-cell.n6 { color: #008080; }
    .mine-cell.n7 { color: #000000; }
    .mine-cell.n8 { color: #808080; }

    .mines-status {
      min-height: 24px;
      margin: 10px 4px 2px;
      font-weight: 800;
      text-align: center;
    }

    /* Reading */
    .reading-panel {
      width: min(1080px, 100%);
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .spelling-list-panel {
      width: min(680px, 100%);
      align-items: stretch;
      justify-items: stretch;
    }

    .spelling-list-form {
      display: grid;
      gap: 14px;
    }

    .spelling-list-label {
      color: var(--ink);
      font-size: 1.05rem;
      font-weight: 900;
    }

    .spelling-list-input {
      width: 100%;
      min-height: 310px;
      resize: vertical;
      padding: 16px;
      border: 2px solid var(--line-strong);
      border-radius: 8px;
      color: var(--ink);
      background: #ffffff;
      font: 800 1.1rem/1.55 "Trebuchet MS", "Segoe UI", Arial, sans-serif;
    }

    .spelling-list-input:focus {
      border-color: var(--blue);
      outline: 3px solid rgba(40, 103, 215, 0.18);
      outline-offset: 2px;
    }

    .spelling-list-summary {
      min-height: 26px;
      margin: 0;
      color: var(--muted);
      font-weight: 900;
    }

    .reading-layout {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
      gap: 16px;
      align-items: start;
    }

    .story-sheet,
    .reading-quiz {
      display: grid;
      gap: 14px;
      padding: clamp(18px, 3vw, 28px);
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .story-sheet {
      scroll-margin-top: 86px;
    }

    .story-level {
      width: max-content;
      margin: 0;
      padding: 5px 9px;
      border-radius: 999px;
      color: #513d8a;
      background: var(--violet-soft);
      font-size: 0.78rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .story-title {
      margin: 0;
      font-size: clamp(1.8rem, 4vw, 2.6rem);
      line-height: 1.05;
    }

    .story-copy {
      display: grid;
      gap: 14px;
      color: #33434b;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(1.05rem, 2vw, 1.23rem);
      line-height: 1.62;
    }

    .story-copy p { margin: 0; }

    .reading-progress {
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 900;
      text-transform: uppercase;
    }

    .reading-question {
      margin: 0;
      font-size: clamp(1.35rem, 3vw, 1.8rem);
      line-height: 1.2;
    }

    .reading-options {
      display: grid;
      gap: 9px;
    }

    .reading-option {
      min-height: 52px;
      padding: 10px 13px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      color: var(--ink);
      background: #ffffff;
      font-weight: 800;
      line-height: 1.25;
      text-align: left;
    }

    .reading-option:hover { background: var(--violet-soft); }
    .reading-option.correct { border-color: var(--green); background: var(--green-soft); }
    .reading-option.incorrect { border-color: var(--red); background: var(--red-soft); }

    @media (max-width: 820px) {
      .category-picker {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .reading-layout {
        grid-template-columns: 1fr;
      }

      .reading-quiz {
        position: static;
      }
    }

    @media (max-width: 600px) {
      .brand-home-button {
        width: 58px;
        height: 58px;
      }

      .game-back-button {
        top: 18px;
        left: 78px;
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
      }

      body.in-game .game-title {
        top: 78px;
        left: 12px;
        width: calc(100vw - 24px);
        max-width: none;
        text-align: center;
      }

      body.in-game .flash-mode-tabs {
        margin-top: 136px;
      }

      .top-controls {
        max-width: calc(100vw - 78px);
      }

      .profile-dock {
        max-width: calc(100vw - 190px);
      }

      .profile-dock .account-button {
        display: none;
      }

      body.in-game .profile-dock {
        display: none;
      }

      .money-counter {
        min-width: 98px;
      }

      .category-menu-view.active,
      .learning-view.active,
      .account-settings-view.active,
      .shop-view.active {
        padding-top: 84px;
      }

      .home-view.active {
        padding-top: 76px;
      }

      .home-hero-logo {
        width: min(510px, 100%);
      }

      .category-picker {
        grid-template-columns: 1fr;
      }

      .category-card {
        min-height: 164px;
      }

      .category-menu-header {
        align-items: center;
        flex-direction: row;
      }

      .category-grid {
        grid-template-columns: 1fr;
      }

      .balance-stage {
        min-height: 220px;
        padding-inline: 0;
      }

      .balance-pan {
        min-height: 68px;
        font-size: 1.7rem;
      }

      .number-choice {
        width: calc(50% - 6px);
      }

      .mini-toolbar .choice-button {
        min-width: 0;
        flex: 1 1 88px;
      }

      .memory-grid {
        gap: 7px;
      }

      .story-sheet,
      .reading-quiz {
        padding: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .chess-piece.moving,
      .chess-piece.moving.capture {
        animation: none;
      }
    }