:root{--bg-deep:#070a10;--bg-elevated:#0c1220;--surface:#ffffff12;--surface-strong:#ffffff1a;--border:#ffffff1c;--text:#f2f4f8;--muted:#f2f4f89e;--jade:#3db889;--jade-muted:#3db88959;--jade-dark:#2a9a6e;--porcelain:#5b8def;--porcelain-muted:#5b8def40;--vermillion:#e85d4c;--lotus:#c084fc;--amber:#f59e0b;--frost:#38bdf8;--warn:#f0b429;--danger:#e5484d;--shadow:0 20px 50px #00000080;--radius-lg:18px;--radius-md:14px;--radius-sm:10px;--font-ui:"DM Sans",ui-sans-serif,system-ui,sans-serif;--font-han:"Noto Sans SC",ui-sans-serif,system-ui,sans-serif;--accent:var(--porcelain);--accent2:var(--jade)}*{box-sizing:border-box}body,html{min-height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#070a10;background-color:var(--bg-deep);background-image:radial-gradient(1000px 520px at 88% 8%,#5b8def1f,#0000 55%),radial-gradient(900px 480px at 12% 12%,#3db88924,#0000 58%),radial-gradient(700px 420px at 50% 96%,#f0b4500f,#0000 55%),linear-gradient(180deg,#0c1220,#070a10);background-image:radial-gradient(1000px 520px at 88% 8%,#5b8def1f,#0000 55%),radial-gradient(900px 480px at 12% 12%,#3db88924,#0000 58%),radial-gradient(700px 420px at 50% 96%,#f0b4500f,#0000 55%),linear-gradient(180deg,var(--bg-elevated),var(--bg-deep));background-repeat:no-repeat;background-size:auto,auto,auto,100% 100%;color:#f2f4f8;color:var(--text);font-family:DM Sans,ui-sans-serif,system-ui,sans-serif;font-family:var(--font-ui);margin:0;min-height:100vh;min-height:100dvh}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.ink-btn{-webkit-tap-highlight-color:transparent;border:1px solid #0000;border-radius:10px;border-radius:var(--radius-sm);cursor:pointer;font-family:DM Sans,ui-sans-serif,system-ui,sans-serif;font-family:var(--font-ui);font-size:.9rem;font-weight:600;padding:.55rem 1rem;transition:background .18s ease,border-color .18s ease,transform .15s ease,box-shadow .18s ease}.ink-btn--primary{background:linear-gradient(180deg,#3db889,#2a9a6e);background:linear-gradient(180deg,var(--jade),var(--jade-dark));border-color:#fff3;box-shadow:0 6px 20px #00000059;color:#fff}.ink-btn--primary:hover{filter:brightness(1.05)}.ink-btn--ghost{background:#ffffff0f;border-color:#ffffff1c;border-color:var(--border);color:#f2f4f8;color:var(--text)}.ink-btn--ghost:hover{background:#ffffff1a;border-color:#ffffff2e}.ink-btn:active{transform:scale(.98)}@media (min-width:641px){html{font-size:115%}.ink-btn{font-size:1rem;padding:.58rem 1.1rem}}@media (prefers-reduced-motion:reduce){.card,.hero-card,.ink-btn,.level-card,.next-button,.progressFill{transition:none!important}.card.wrong{animation:none!important}.ink-btn:active{transform:none}}.App{align-items:flex-start;display:flex;justify-content:center;min-height:100vh;padding:max(1.5rem,4vh) 16px 2.5rem}.hero{margin-inline:auto;padding:.25rem 0 1rem;position:relative;width:min(520px,100%)}.hero-glow{background:radial-gradient(circle,#5b8def38,#0000 68%);filter:blur(2px);height:min(280px,45vh);inset:-20% -30% auto auto;pointer-events:none;position:absolute;width:min(320px,70vw)}.hero-card{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:linear-gradient(165deg,#ffffff17,#ffffff0a);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:2rem 1.5rem 2.25rem;position:relative;text-align:center;transition:box-shadow .25s ease,border-color .2s ease}.hero-eyebrow{color:var(--muted);font-size:.75rem;font-weight:600;letter-spacing:.14em;margin:0 0 .35rem;text-transform:uppercase}.hero-title{font-family:var(--font-ui);font-size:clamp(1.85rem,6vw,2.35rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0}.hero-tagline{color:var(--jade);font-size:1.05rem;font-weight:600;margin:.65rem 0 0}.hero-lede{color:var(--muted);font-size:.95rem;line-height:1.55;margin:1rem 0 0;margin-inline:auto;max-width:26rem}.hero-actions{align-items:stretch;display:flex;flex-direction:column;gap:.65rem;margin-top:1.75rem}.hero-cta{font-size:.95rem;padding:.75rem 1.25rem}@media (min-width:480px){.hero-actions{flex-direction:row;flex-wrap:wrap;justify-content:center}.hero-actions .ink-btn{min-width:10rem}}@media (min-width:641px){.hero-title{font-size:clamp(2rem,4.5vw,2.75rem)}.hero-tagline{font-size:1.15rem}.hero-lede{font-size:1.05rem}.hero-eyebrow{font-size:.8rem}.howto-title{font-size:1.22rem}.howto-steps{font-size:.98rem}}.howto-backdrop{align-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05080eb8;display:flex;inset:0;justify-content:center;padding:1rem;position:fixed;z-index:100}.howto-dialog{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:1.35rem 1.25rem 1.25rem;text-align:left;width:min(400px,100%)}.howto-title{font-size:1.15rem;font-weight:700;margin:0 0 1rem}.howto-steps{color:var(--muted);font-size:.92rem;line-height:1.55;margin:0 0 1.1rem;padding-left:1.2rem}.howto-steps li{margin-bottom:.55rem}.howto-steps strong{color:var(--text);font-weight:600}.howto-close{margin-top:.25rem;width:100%}@media (prefers-reduced-motion:reduce){.hero-card{transition:none}}.level-page{margin-inline:auto;width:min(640px,100%)}.level-shell{padding:.15rem 0 1.5rem}.level-back{font-weight:600;margin-bottom:1rem}.level-heading{font-size:clamp(1.35rem,4vw,1.65rem);font-weight:700;letter-spacing:-.02em;margin:0}.level-sub{color:var(--muted);font-size:.92rem;line-height:1.5;margin:.45rem 0 0;max-width:32rem}.level-pairsRow{display:flex;flex-direction:column;gap:.5rem;margin-top:1.35rem}.level-langRow{margin-top:.85rem}.level-pairsLabel{color:var(--muted);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.level-segment{background:#00000038;border:1px solid var(--border);border-radius:var(--radius-sm);display:flex;flex-wrap:wrap;gap:.35rem;padding:.35rem}.level-segBtn{-webkit-tap-highlight-color:transparent;background:#0000;border:none;border-radius:8px;color:var(--muted);cursor:pointer;flex:1 1 auto;font-family:var(--font-ui);font-size:.85rem;font-weight:600;min-width:2.5rem;padding:.45rem .35rem;transition:background .15s ease,color .15s ease}.level-segBtn.is-active{background:#3db88938;box-shadow:inset 0 0 0 1px #3db88973;color:var(--text)}.level-segBtn:hover:not(.is-active){background:#ffffff0d;color:var(--text)}.level-grid{display:flex;flex-direction:column;gap:.75rem;list-style:none;margin:1.25rem 0 0;padding:0}.level-card{grid-column-gap:.9rem;grid-row-gap:.25rem;-webkit-tap-highlight-color:transparent;background:linear-gradient(145deg,#ffffff1a,#ffffff0a);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 12px 32px #00000047;color:inherit;column-gap:.9rem;cursor:pointer;display:grid;font:inherit;grid-template-columns:auto 1fr;grid-template-rows:auto auto;padding:1.1rem 1.15rem 1rem;row-gap:.25rem;text-align:left;transition:transform .18s ease,border-color .18s ease,box-shadow .2s ease;width:100%}.level-card:hover{border-color:#ffffff2e;box-shadow:0 16px 40px #0000005c;transform:translateY(-2px)}.level-card:active{transform:translateY(0)}.level-card-num{align-self:center;color:var(--muted);font-family:var(--font-ui);font-size:1.75rem;font-weight:800;grid-row:1/span 2;line-height:1;opacity:.85}.level-card-title{font-size:1.05rem;font-weight:700}.level-card-blurb{color:var(--muted);font-size:.85rem;grid-column:2;line-height:1.45}.level-card-cta{color:var(--jade);font-size:.82rem;font-weight:700;grid-column:2;margin-top:.45rem}.level-card--jade{border-color:#3db88947}.level-card--porcelain{border-color:#5b8def4d}.level-card--porcelain .level-card-cta{color:var(--porcelain)}.level-card--vermillion{border-color:#e85d4c59}.level-card--vermillion .level-card-cta{color:var(--vermillion)}.level-card--lotus{border-color:#c084fc61}.level-card--lotus .level-card-cta{color:var(--lotus)}.level-card--amber{border-color:#f59e0b61}.level-card--amber .level-card-cta{color:var(--amber)}.level-card--frost{border-color:#38bdf861}.level-card--frost .level-card-cta{color:var(--frost)}@media (min-width:560px){.level-pairsRow{align-items:center;flex-direction:row;gap:1rem;justify-content:space-between}.level-segment{flex:1 1;max-width:22rem}}@media (min-width:641px){.level-heading{font-size:clamp(1.5rem,3vw,1.85rem)}.level-sub{font-size:1rem}.level-card-title{font-size:1.12rem}.level-card-blurb,.level-segBtn{font-size:.92rem}.level-segBtn{padding:.5rem .4rem}.level-pairsLabel{font-size:.78rem}}@media (prefers-reduced-motion:reduce){.level-card:hover{transform:none}}.card{-webkit-tap-highlight-color:transparent;align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:var(--radius-md);cursor:grab;display:flex;flex-direction:column;justify-content:center;min-height:74px;min-width:0;opacity:1;padding:9px 7px;text-align:center;transition:box-shadow .18s ease,border-color .18s ease,background .18s ease,opacity .18s ease;-webkit-user-select:none;user-select:none;width:100%}.card.character{background:linear-gradient(165deg,#ffecd233,#28372d59);border:1px solid #3db88961;box-shadow:0 8px 20px #00000042,inset 0 1px 0 #ffffff1a;color:#fffcf8f5;font-family:var(--font-han);font-size:1.18rem;font-weight:500;letter-spacing:.06em;line-height:1.25}.card.translation{background:linear-gradient(165deg,#6c586c52,#1e182094);border:1px solid #c3a0b459;box-shadow:0 8px 20px #00000047,inset 0 1px 0 #ffffff0f;color:#f5f2f6f2;font-family:var(--font-ui);font-size:1rem;font-weight:400;line-height:1.32}.card-translationInner{align-items:center;display:flex;flex-direction:column;gap:.3rem;min-width:0;width:100%}.card-pinyinLine{color:#fffffff0;display:block;font-size:1.1rem;font-style:normal;font-weight:500;letter-spacing:.04em;line-height:1.25;width:100%}.card-meaningLine{color:#bacdffd1;display:block;font-size:.95rem;font-style:italic;font-weight:400;line-height:1.38;width:100%}.card:active{cursor:grabbing}.card:hover:not(.is-dragging){border-color:#ffffff38;box-shadow:0 14px 32px #00000057,inset 0 1px 0 #ffffff1a;transform:translateY(-2px)}.card.is-dragging{cursor:grabbing;touch-action:none;z-index:20}.card.matched{background:linear-gradient(165deg,#3db88947,#193c2d66)!important;border-color:#3db88980!important;box-shadow:0 6px 16px #00000040!important;cursor:not-allowed;opacity:.55}.card.matched .card-pinyinLine{color:#ebf8f0c7}.card.matched .card-meaningLine{color:#c8dceb8c}.card.is-over{border-color:#5b8deff2}.card.is-over,.card.selected:not(.is-dragging){box-shadow:0 0 0 3px var(--porcelain-muted),0 16px 40px #00000059}.card.selected:not(.is-dragging){border:1px solid #5b8defe6;transform:translateY(-1px) scale(1.02)}.card.character.selected{border-color:#3db889e6;box-shadow:0 0 0 3px var(--jade-muted),0 16px 40px #00000059}.card.translation.selected{border-color:#f0b429f2;box-shadow:0 0 0 3px #f0b42938,0 16px 40px #00000059}.card.wrong{animation:card-shake .32s ease-in-out;border-color:#e5484de6;box-shadow:0 0 0 3px #e5484d33,0 16px 40px #00000059}@keyframes card-shake{0%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}to{transform:translateX(0)}}@media (prefers-reduced-motion:reduce){.card.selected:not(.is-dragging),.card:hover:not(.is-dragging){transform:none}.card.wrong{animation:none}}.matchpair{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:linear-gradient(165deg,#ffffff17,#ffffff0a);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem;margin-inline:auto;padding:1.25rem 1.25rem 1.5rem;text-align:center;width:min(1200px,100%)}.matchpair-topbar{grid-gap:.5rem;align-items:center;display:grid;gap:.5rem;grid-template-columns:1fr auto 1fr;width:100%}.matchpair-topbarSide{display:flex;justify-content:flex-start}.matchpair-topbarSide--end{justify-content:flex-end}.matchpair-topbarCenter{display:flex;justify-content:center}.matchpair-backBtn{font-size:.82rem;padding:.45rem .75rem}.matchpair-levelBadge{background:#3db8892e;border:1px solid #3db88966;border-radius:999px;color:var(--text);display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.06em;padding:.35rem .75rem;text-transform:uppercase}.matchpair-langTag{font-weight:600;letter-spacing:.03em;opacity:.82;text-transform:none}.matchpair-intro{align-items:center;display:flex;flex-direction:column;gap:.35rem;margin:0;padding:0;width:100%}.matchpair-subtitle{color:var(--muted);font-size:.9rem;line-height:1.45;margin:0;max-width:28rem}.matchpair-instructions{font-size:.88rem}.matchpair-statsRow{align-items:center;color:var(--muted);display:flex;flex-wrap:wrap;font-size:.88rem;gap:.35rem .5rem;justify-content:center}.matchpair-stat strong{color:var(--text);font-weight:600}.matchpair-statDot{opacity:.55;-webkit-user-select:none;user-select:none}.matchpair-progressWrap{margin-top:.15rem;width:min(22rem,100%)}.progress{background:#ffffff1a;border:1px solid #ffffff1f;border-radius:999px;height:8px;overflow:hidden;width:100%}.progressFill{background:linear-gradient(90deg,var(--porcelain),var(--jade));border-radius:999px;box-shadow:none;height:100%;transition:width .22s ease}.controls{align-items:center;background:#0000;border-bottom:1px solid #ffffff14;border-top:1px solid #ffffff14;display:flex;flex-wrap:wrap;gap:1rem 1.5rem;justify-content:center;margin-top:.35rem;max-width:26rem;padding:.65rem 0;width:100%}.control-group{align-items:center;display:inline-flex;gap:.5rem}.controls label{color:var(--muted);font-size:.85rem;white-space:nowrap}.controls select{background-color:#121623f5;border:1px solid #ffffff29;border-radius:10px;color:var(--text);color-scheme:dark;cursor:pointer;font-size:.88rem;min-width:6.5rem;outline:none;padding:.45rem .55rem}.controls select:focus,.controls select:hover{border-color:#ffffff47}.controls select option{background-color:#141824;color:#fffffff2}.game-board{grid-row-gap:1.25rem;grid-column-gap:clamp(1.75rem,4vw,3rem);align-items:start;column-gap:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:.5rem;max-width:none;row-gap:1.25rem;width:100%}.game-board .cards-container{align-content:flex-start;display:flex;flex-wrap:wrap;gap:.55rem;justify-content:center;width:100%}.game-board .cards-container .card{box-sizing:border-box;flex:0 0 auto;width:min(10.1rem,100%)}@media screen and (min-width:641px){.game-board .cards-container .card{border-radius:11px;min-height:72px;padding:7px 6px;width:9.45rem}.game-board .cards-container .card.character{font-size:1.1rem}.game-board .cards-container .card.translation{font-size:1.02rem}.game-board .cards-container .card .card-pinyinLine{font-size:1.05rem}.game-board .cards-container .card .card-meaningLine{font-size:.9rem}.game-board--dense .cards-container .card.character{font-size:1.02rem}.game-board--dense .cards-container .card.translation{font-size:.96rem}.game-board--dense .cards-container .card .card-pinyinLine{font-size:.98rem}.game-board--dense .cards-container .card .card-meaningLine{font-size:.84rem}}.game-board--dense .card.character{font-size:1.05rem}.game-board--dense .card.translation{font-size:.96rem}.game-board--dense .card .card-pinyinLine{font-size:1.02rem}.game-board--dense .card .card-meaningLine{font-size:.88rem}.cards-column{align-items:stretch;display:flex;flex-direction:column;gap:.65rem;min-width:0;width:100%}.cards-column h3{color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.06em;margin:0;text-align:center;text-transform:uppercase;width:100%}.cards-column:first-child h3{color:#b4e6cdb8}.cards-column:last-child h3{color:#afc8ffb8}.chinese-character{font-size:2rem;text-align:center}.translation{text-align:center}.pinyin{color:#ffffff8c;font-style:italic}.meaning{font-weight:700;margin-top:.5rem}.next-button-container{display:flex;justify-content:center;margin-top:1.25rem;padding-bottom:.25rem;width:100%}.next-button{font-size:.95rem;padding:.7rem 1.6rem}.next-button:hover{filter:brightness(1.05)}@media screen and (min-width:641px){.matchpair-backBtn{font-size:.92rem;padding:.5rem .85rem}.matchpair-levelBadge{font-size:.84rem;padding:.4rem .85rem}.matchpair-instructions,.matchpair-subtitle{font-size:1rem}.matchpair-statsRow{font-size:.98rem}.controls label{font-size:.92rem}.controls select{font-size:.95rem;padding:.5rem .6rem}.cards-column h3{font-size:.88rem}.progress{height:9px}.next-button{font-size:1.02rem;padding:.75rem 1.75rem}}@media screen and (max-width:640px){.matchpair{gap:.65rem;padding:1.15rem .9rem 1.35rem}.game-board{column-gap:0;grid-template-columns:1fr;row-gap:1.15rem}.cards-column{align-items:center}.game-board .cards-container .card{width:min(9.35rem,calc(50% - .275rem))}.game-board--dense .cards-container .card{width:min(8.85rem,calc(50% - .275rem))}.cards-column h3{padding-top:.25rem}.cards-column:first-child h3{padding-top:0}.next-button{font-weight:600;max-width:18rem;width:100%}.next-button:hover{transform:none}}
/*# sourceMappingURL=main.04bd102a.css.map*/