.mini-page {
    --mini-accent: #57cdb9;
    --mini-accent-dark: #144d51;
    --mini-ink: #17253a;
    --mini-muted: #637187;
    --mini-paper: #fff;
    min-height: 100vh;
    color: var(--mini-ink);
    background: linear-gradient(180deg, #edf5f6, #f7f8fb 390px);
}

.mini-page[data-theme="dungeon"] { --mini-accent: #a18af0; --mini-accent-dark: #392c76; }
.mini-page[data-theme="coop"] { --mini-accent: #9bdd7d; --mini-accent-dark: #285840; }
.mini-page[data-theme="festival"] { --mini-accent: #ffc86e; --mini-accent-dark: #7e3e5a; }
.mini-page[data-theme="sort"] { --mini-accent: #f0bd61; --mini-accent-dark: #5e4327; }

.mini-container { max-width: 980px; }
.mini-main { padding: 26px 0 64px; }
.mini-breadcrumb { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; color: var(--mini-muted); font-size: 0.85rem; }
.mini-breadcrumb a { color: #385c75; font-weight: 700; }
.mini-intro { margin: 0 0 22px; text-align: center; }
.mini-kicker { margin: 0 0 8px; color: var(--mini-accent-dark); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; }
.mini-intro h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.04em; }
.mini-intro > p:last-child { max-width: 640px; margin: 10px auto 0; color: var(--mini-muted); line-height: 1.8; }
.mini-shell { overflow: hidden; border: 1px solid #dce4ea; border-radius: 24px; background: var(--mini-paper); box-shadow: 0 20px 55px rgb(22 44 68 / 10%); }
.mini-hud { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 16px 20px; border-bottom: 1px solid #e5ebef; background: #fbfcfd; }
.mini-stat { min-width: 82px; color: var(--mini-muted); font-size: 0.76rem; font-weight: 800; }
.mini-stat strong { display: block; margin-top: 3px; color: var(--mini-ink); font-size: 1.15rem; }
.mini-stage { min-height: 350px; padding: clamp(18px, 4vw, 34px); background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--mini-accent) 17%, white), white 65%); }
.mini-panel { max-width: 700px; margin: 0 auto; text-align: center; }
.mini-panel h2 { margin: 0 0 10px; font-size: clamp(1.25rem, 4vw, 1.75rem); }
.mini-panel p { color: var(--mini-muted); line-height: 1.7; }
.mini-primary,
.mini-choice,
.mini-control,
.mini-answer,
.mini-bin { min-height: 48px; padding: 10px 18px; border: 0; border-radius: 13px; color: #fff; font: inherit; font-weight: 850; background: var(--mini-accent-dark); cursor: pointer; transition: transform 0.15s, filter 0.15s; }
.mini-primary:hover,
.mini-choice:hover,
.mini-control:hover,
.mini-answer:hover,
.mini-bin:hover { filter: brightness(1.08); transform: translateY(-2px); }
.mini-primary:focus-visible,
.mini-choice:focus-visible,
.mini-control:focus-visible,
.mini-answer:focus-visible,
.mini-bin:focus-visible { outline: 3px solid #f0a23e; outline-offset: 3px; }
.mini-button-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.mini-secondary { color: var(--mini-accent-dark); border: 1px solid color-mix(in srgb, var(--mini-accent-dark) 35%, white); background: #fff; }
.mini-status { min-height: 1.7em; margin: 14px 0 0; color: var(--mini-accent-dark); font-weight: 750; }
.mini-how { padding: 22px clamp(18px, 4vw, 34px) 26px; border-top: 1px solid #e5ebef; background: #fbfcfd; }
.mini-how h2 { margin: 0 0 8px; font-size: 1.05rem; }
.mini-how p { margin: 0; color: var(--mini-muted); font-size: 0.9rem; line-height: 1.8; }
.mini-back { display: inline-flex; margin-top: 22px; color: #365d75; font-weight: 800; }
.mini-page .mini-container,
.mini-page .mini-shell,
.mini-page .mini-panel,
.mini-page .mini-how { word-break: keep-all; overflow-wrap: anywhere; }
.mini-page button:disabled { opacity: 0.56; cursor: not-allowed; }
[hidden] { display: none !important; }

/* Math dungeon */
.math-question { display: grid; place-items: center; min-height: 102px; margin: 16px auto; border: 1px solid #e7e2fa; border-radius: 18px; color: #352963; font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 900; background: #f7f4ff; }
.math-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 480px; margin: 18px auto 0; }
.math-answers button { min-height: 58px; color: #382d67; border: 1px solid #e0d9fa; background: #fff; font-size: 1.35rem; }
.math-answers button.is-correct { color: #15533d; border-color: #52b98b; background: #dff8ed; }
.math-answers button.is-correct::after { content: ' 〇'; font-size: 0.95rem; }
.math-answers button.is-wrong { color: #742d37; border-color: #db7582; background: #ffe7e9; }
.math-answers button.is-wrong::after { content: ' ×'; font-size: 0.95rem; }
.math-battle { position: relative; width: min(100%, 500px); margin: 0 auto 16px; padding: 14px 18px 15px; overflow: hidden; border: 1px solid #dcd2fb; border-radius: 19px; background: radial-gradient(ellipse at 50% 45%, #fff 0 25%, #f1edff 100%); box-shadow: inset 0 -4px 0 rgb(83 66 145 / 6%); transition: background 0.25s, border-color 0.25s; }
.math-battle[data-tier="2"] { border-color: #f0c2a1; background: radial-gradient(ellipse at 50% 45%, #fff 0 25%, #fff0e5 100%); }
.math-battle[data-tier="3"] { border-color: #a9d3e4; background: radial-gradient(ellipse at 50% 45%, #fff 0 25%, #e6f6ff 100%); }
.math-battle[data-tier="4"] { border-color: #d4b4ed; background: radial-gradient(ellipse at 50% 45%, #fff 0 25%, #f6eaff 100%); }
.math-battle__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #665b82; font-size: 0.78rem; font-weight: 850; }
.math-battle__heading span:last-child { padding: 4px 9px; border-radius: 999px; color: #fff; background: #6957a8; }
.math-battle[data-boss="true"] .math-battle__heading span:last-child { background: #bd435c; }
.math-arena { position: relative; }
.math-hero { position: absolute; top: 43px; left: 15px; z-index: 2; display: grid; justify-items: center; gap: 1px; transform-origin: 50% 85%; }
.math-hero__sprite { font-size: 2.7rem; line-height: 1; filter: drop-shadow(0 5px 2px rgb(52 37 90 / 16%)); }
.math-hero__name { padding: 3px 7px; border-radius: 999px; color: #3c315b; background: #fff; font-size: 0.62rem; font-weight: 900; }
.math-hero.is-attacking { animation: dungeon-lunge 0.48s ease-in both; }
.math-monster { position: relative; display: grid; justify-items: center; min-height: 145px; padding: 5px 0 3px; }
.math-monster::before { position: absolute; top: 20px; width: 108px; height: 108px; border: 1px solid rgb(112 89 176 / 14%); border-radius: 50%; background: radial-gradient(circle, rgb(194 174 255 / 34%), rgb(194 174 255 / 0%) 70%); content: ''; transition: transform 0.2s, background 0.2s; }
.math-battle[data-tier="2"] .math-monster::before { background: radial-gradient(circle, rgb(255 173 108 / 35%), rgb(255 173 108 / 0%) 70%); }
.math-battle[data-tier="3"] .math-monster::before { background: radial-gradient(circle, rgb(108 204 240 / 38%), rgb(108 204 240 / 0%) 70%); }
.math-battle[data-tier="4"] .math-monster::before { background: radial-gradient(circle, rgb(198 132 236 / 38%), rgb(198 132 236 / 0%) 70%); }
.math-monster__sprite { z-index: 1; display: grid; width: 132px; height: 112px; place-items: center; font-size: clamp(4.5rem, 16vw, 6.2rem); line-height: 1; filter: drop-shadow(0 9px 2px rgb(52 37 90 / 16%)); transform-origin: 50% 72%; }
.math-battle[data-boss="true"] .math-monster__sprite { font-size: clamp(5.25rem, 19vw, 7rem); }
.math-monster__name { z-index: 1; padding: 4px 12px; border-radius: 999px; color: #393051; background: rgb(255 255 255 / 90%); font-size: 0.88rem; font-weight: 900; box-shadow: 0 3px 8px rgb(43 32 74 / 9%); }
.math-health-row { display: flex; justify-content: space-between; max-width: 340px; margin: 9px auto 5px; color: #5d5570; font-size: 0.78rem; font-weight: 850; }
.math-health-row strong { color: #3c315b; font-size: 0.85rem; }
.math-health { overflow: hidden; width: min(100%, 340px); height: 14px; margin: 0 auto; border: 2px solid #fff; border-radius: 999px; background: #dedbe8; box-shadow: 0 0 0 1px rgb(74 57 120 / 14%); }
.math-health span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #71d68f, #26ae75); transition: width 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }
.math-battle[data-boss="true"] .math-health span { background: linear-gradient(90deg, #ffd46a, #ef704e); }
.math-monster.is-hit .math-monster__sprite { animation: dungeon-hit 0.55s ease-out; }
.math-monster.is-hit::before { animation: dungeon-flash 0.55s ease-out; }
.math-attack-projectile { position: absolute; top: 42px; left: calc(50% - 74px); z-index: 4; font-size: 2.2rem; line-height: 1; opacity: 0; pointer-events: none; }
.math-attack-projectile.is-flying { animation: dungeon-attack 0.5s cubic-bezier(0.2, 0.72, 0.25, 1) both; }
.math-impact { position: absolute; top: 17px; left: calc(50% + 14px); z-index: 5; font-size: 2.8rem; line-height: 1; opacity: 0; pointer-events: none; }
.math-impact.is-active { animation: dungeon-impact 0.48s ease-out 0.32s both; }
.math-damage-pop { position: absolute; top: 28px; left: calc(50% + 36px); z-index: 2; color: #ed4d41; font-size: 1.8rem; font-weight: 1000; opacity: 0; text-shadow: 0 2px 0 #fff, 0 0 9px #fff; pointer-events: none; }
.math-damage-pop.is-visible { animation: dungeon-damage 0.7s cubic-bezier(0.1, 0.8, 0.2, 1) both; }
@keyframes dungeon-lunge { 0%, 100% { transform: translateX(0) scale(1); } 35% { transform: translateX(18px) scale(1.08); } 65% { transform: translateX(28px) scale(0.94); } }
@keyframes dungeon-attack { 0% { opacity: 0; transform: translate(-132px, 13px) scale(0.35) rotate(-40deg); } 16% { opacity: 1; } 78% { opacity: 1; transform: translate(10px, -5px) scale(1.15) rotate(14deg); } 100% { opacity: 0; transform: translate(26px, -12px) scale(0.3) rotate(35deg); } }
@keyframes dungeon-impact { 0% { opacity: 0; transform: scale(0.2) rotate(-22deg); } 36% { opacity: 1; transform: scale(1.3) rotate(10deg); } 100% { opacity: 0; transform: scale(0.55) rotate(24deg); } }
@keyframes dungeon-hit { 0%, 100% { transform: translateX(0) scale(1); } 20% { transform: translateX(-11px) scale(0.92); } 45% { transform: translateX(10px) scale(1.08); } 70% { transform: translateX(-5px) scale(1.02); } }
@keyframes dungeon-flash { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.18); background: radial-gradient(circle, rgb(255 239 129 / 88%), rgb(255 239 129 / 0%) 72%); } }
@keyframes dungeon-damage { 0% { opacity: 0; transform: translateY(20px) scale(0.55) rotate(-8deg); } 22% { opacity: 1; transform: translateY(0) scale(1.25) rotate(5deg); } 100% { opacity: 0; transform: translateY(-42px) scale(1) rotate(0); } }
.math-timer-wrap { width: min(100%, 480px); margin: 14px auto 0; }
.math-timer-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; color: #4b4362; font-size: 0.88rem; font-weight: 850; }
.math-timer-head strong { min-width: 72px; padding: 4px 12px; border: 1px solid #d8c9a3; border-radius: 999px; color: #6c4c12; background: #fff3cf; font-size: 1.15rem; line-height: 1.2; }
.math-timer-head[data-urgent="true"] strong { color: #fff; border-color: #d84f58; background: #d84f58; animation: dungeon-countdown 0.55s ease-in-out infinite alternate; }
.math-timer { overflow: hidden; width: 100%; height: 16px; border: 2px solid #fff; border-radius: 999px; background: #e8e4f2; box-shadow: 0 0 0 1px rgb(74 57 120 / 14%); }
.math-timer span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55bd82, #b8c747, #efbb49); transition: width 0.25s linear; }
.math-timer[data-urgent="true"] span { background: #e66d70; }
@keyframes dungeon-countdown { to { transform: scale(1.07); } }
.mini-how ol { margin: 8px 0 0; padding-left: 1.25rem; color: var(--mini-muted); font-size: 0.9rem; line-height: 1.8; }

/* Local co-op maze */
.coop-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; width: min(100%, 540px); margin: 0 auto 18px; padding: 9px; border-radius: 14px; background: #244b39; }
.coop-cell { display: grid; aspect-ratio: 1; place-items: center; border-radius: 5px; color: #fff; font-size: clamp(0.7rem, 2.8vw, 1.2rem); font-weight: 900; background: #dcefd7; }
.coop-cell.is-wall { background: #385d48; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%); }
.coop-cell.is-parcel { color: #956329; background: #ffdda1; }
.coop-cell.is-exit { color: #fff; background: #b65363; }
.coop-cell.is-player-one { color: #163b62; background: #79b8ff; }
.coop-cell.is-player-two { color: #663755; background: #ffb4dc; }
.coop-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 12px; color: var(--mini-muted); font-size: 0.82rem; }
.coop-controls { color: #415c4a; font-size: 0.86rem; line-height: 1.7; }

/* Festival choice game */
.festival-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 580px; margin: 0 auto 22px; }
.festival-stat { padding: 10px 6px; border: 1px solid #f0e2d9; border-radius: 12px; color: #80544b; font-size: 0.78rem; font-weight: 800; background: #fffaf6; }
.festival-stat strong { display: block; margin-top: 3px; color: #5b354b; font-size: 1.2rem; }
.festival-event { max-width: 590px; margin: 0 auto; padding: 15px; border-radius: 16px; color: #5c354b; background: #fff3e8; }
.festival-choices { display: grid; gap: 10px; max-width: 620px; margin: 15px auto 0; }
.festival-choice { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-align: left; color: #60384f; border: 1px solid #edd9dc; background: #fff; }
.festival-choice small { grid-column: 1 / -1; color: #806a72; font-size: 0.82rem; font-weight: 600; }
.festival-choice strong { align-self: center; color: #9a5b3f; font-size: 0.82rem; }
.festival-choice:disabled { opacity: 0.48; cursor: not-allowed; }
.festival-plan-title { margin: 20px 0 8px; color: #674455; font-size: 1rem; }
.festival-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 0 auto 18px; }
.festival-plan > div { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 10px; border: 1px solid #f0e2d9; border-radius: 12px; color: #76525d; font-size: 0.8rem; font-weight: 800; background: #fffaf6; }
.festival-plan strong { color: #673953; font-size: 1.2rem; }
.festival-log-wrap { margin: 20px auto 0; max-width: 620px; text-align: left; }
.festival-log-wrap h3 { margin: 0; color: #704c5a; font-size: 0.95rem; }
.festival-log { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 0; padding: 0; list-style: none; }
.festival-log li { padding: 6px 10px; border-radius: 999px; color: #6a4e5a; font-size: 0.78rem; background: #fff0df; }
.festival-outcome { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; max-width: 500px; margin: 18px auto; }
.festival-outcome-card { padding: 12px; border: 1px solid #efdfd7; border-radius: 12px; color: #80544b; background: #fffaf6; }
.festival-outcome-card span { display: block; font-size: 0.8rem; font-weight: 800; }
.festival-outcome-card strong { display: block; margin-top: 4px; color: #5b354b; font-size: 1.15rem; }

/* Parcel sorting */
.sort-rule { display: inline-block; margin: 0 auto 14px; padding: 9px 15px; border-radius: 999px; color: #64451f; font-weight: 900; background: #fff1cc; }
.sort-belt { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 3vw, 22px); max-width: 520px; margin: 0 auto; padding: 9px; border: 2px solid #e8c879; border-radius: 18px; color: #a4752e; background: repeating-linear-gradient(90deg, #fff7e8 0 22px, #f5e6c8 22px 28px); }
.sort-belt > span { font-weight: 900; letter-spacing: 0.08em; white-space: nowrap; }
.parcel-card { display: grid; width: 130px; height: 130px; margin: 10px auto 18px; place-items: center; border: 3px solid #ebd9bb; border-radius: 24px; background: #fff; box-shadow: 0 10px 20px rgb(100 66 35 / 12%); }
.sort-belt .parcel-card { flex: 0 0 100px; width: 100px; height: 100px; margin: 0; }
.parcel-shape { width: 60px; height: 60px; background: #e96855; }
.parcel-shape[data-shape="circle"] { border-radius: 50%; }
.parcel-shape[data-shape="triangle"] { width: 0; height: 0; border-right: 34px solid transparent; border-bottom: 62px solid #e96855; border-left: 34px solid transparent; background: transparent; }
.parcel-shape[data-color="blue"] { background: #548ed0; }
.parcel-shape[data-color="blue"][data-shape="triangle"] { border-bottom-color: #548ed0; }
.parcel-shape[data-color="yellow"] { background: #e7b541; }
.parcel-shape[data-color="yellow"][data-shape="triangle"] { border-bottom-color: #e7b541; }
.parcel-shape[data-size="small"] { transform: scale(0.65); }
.parcel-shape[data-size="large"] { transform: scale(1.2); }
.parcel-caption { margin: 7px 0 4px !important; color: #584327 !important; font-size: 1.05rem; font-weight: 900; }
.sort-clock-label { margin: 8px 0 5px !important; color: #84683d !important; font-size: 0.78rem; font-weight: 800; }
.sort-progress { overflow: hidden; width: min(100%, 430px); height: 12px; margin: 0 auto 18px; border-radius: 999px; background: #f0e6d4; }
.sort-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8cc97b, #e6b547, #dc715c); transition: width 0.06s linear; }
.sort-bins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 600px; margin: 0 auto; }
.sort-bins .mini-bin { min-height: 64px; padding: 8px; color: #5f4528; border: 1px solid #ead7b3; background: #fff7e8; }
.sort-bins .mini-bin span { display: block; margin-top: 3px; color: #887354; font-size: 0.76rem; }

@media (max-width: 560px) {
    .mini-main { padding-top: 18px; }
    .mini-breadcrumb { margin-bottom: 16px; }
    .mini-intro { margin-bottom: 18px; }
    .mini-shell { border-radius: 18px; }
    .mini-hud { gap: 8px; padding: 13px; }
    .mini-stat { min-width: 64px; font-size: 0.7rem; }
    .mini-stat strong { font-size: 1rem; }
    .mini-stage { min-height: 315px; padding: 18px 12px; }
    .math-hero { left: 7px; }
    .math-hero__sprite { font-size: 2.3rem; }
    .math-attack-projectile.is-flying { animation-name: dungeon-attack-mobile; }
    .coop-board { gap: 3px; padding: 6px; }
    .festival-stats { gap: 5px; }
    .festival-stat { font-size: 0.68rem; }
    .festival-stat strong { font-size: 1rem; }
    .festival-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sort-belt { gap: 6px; padding: 6px; }
    .sort-belt > span { font-size: 0.72rem; }
    .sort-belt .parcel-card { flex-basis: 84px; width: 84px; height: 84px; }
    .sort-bins { gap: 5px; }
    .sort-bins .mini-bin { font-size: 0.82rem; }
}

@keyframes dungeon-attack-mobile { 0% { opacity: 0; transform: translate(-60px, 12px) scale(0.35) rotate(-40deg); } 16% { opacity: 1; } 78% { opacity: 1; transform: translate(9px, -5px) scale(1.05) rotate(14deg); } 100% { opacity: 0; transform: translate(20px, -11px) scale(0.3) rotate(35deg); } }

@media (prefers-reduced-motion: reduce) {
    .math-health span { transition: none; }
    .math-hero.is-attacking,
    .math-attack-projectile.is-flying,
    .math-impact.is-active,
    .math-timer-head[data-urgent="true"] strong { animation-duration: 0.01ms; animation-iteration-count: 1; }
    .math-monster.is-hit .math-monster__sprite,
    .math-monster.is-hit::before,
    .math-damage-pop.is-visible { animation-duration: 0.01ms; }
}

@media (prefers-reduced-motion: reduce) {
    .mini-primary,
    .mini-choice,
    .mini-control,
    .mini-answer,
    .mini-bin { transition: none; }
}