:root{--canvas:#faf5e8;--pinyin:#ab3b29;--audio:#6e6e6e;--trophy:#ffbc0f;--trophy-shadow:#a66b05;--not-yet:#d63d29;--not-yet-shadow:#8f1a14;--knew-it:#409c30;--knew-it-shadow:#1a6314;--drinks:#c23d26;--drinks-fore:#94291a;--drinks-shadow:#7d2114;--home-width:680px}*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--canvas);color:#1d1d1d;font-family:"Avenir Next",Avenir,"Nunito Sans",system-ui,sans-serif}button{font:inherit;cursor:pointer}button:focus-visible{outline:3px solid #181818;outline-offset:3px}.app-shell{min-height:100dvh}.home-view{min-height:100dvh;padding-bottom:76px}.world-header{position:sticky;z-index:3;top:0;display:grid;grid-template-columns:74px 1fr 74px;align-items:center;min-height:86px;padding:18px max(20px,calc((100vw - var(--home-width))/2));background:var(--drinks);border-bottom:1px solid rgba(255,255,255,.2)}.world-arrow{height:42px;color:#fff;border:0;background:transparent;font-size:37px;font-weight:800;line-height:1}.world-arrow.is-disabled{opacity:.34}.world-picker{position:relative;display:grid;place-items:center;width:118px;height:68px;margin:auto;padding:0;border:0;background:transparent}.world-picker img{position:absolute;width:83px;height:83px;object-fit:contain;transform:translateX(-16px)}.world-picker strong{z-index:1;margin-left:43px;color:white;font-size:29px;font-weight:900}.world-picker-popover{position:fixed;z-index:5;top:78px;left:50%;display:flex;gap:8px;padding:10px;transform:translateX(-50%);border-radius:999px;background:#202020;box-shadow:0 7px 16px rgba(0,0,0,.25)}.world-picker-popover button{width:44px;height:44px;color:white;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:#c23d26;font-size:19px;font-weight:800}.world-picker-popover .is-current{color:var(--drinks-fore);background:white}.pack-list{display:grid;gap:18px;width:min(calc(100% - 34px),var(--home-width));margin:24px auto}.pack-card{position:relative;min-height:164px;overflow:hidden;padding:15px 24px 36px;border:2px solid var(--shadow);border-radius:28px;color:white;background:var(--pack);box-shadow:0 7px 0 var(--shadow);transition:min-height .25s ease}.pack-card::after{position:absolute;inset:0;content:"";pointer-events:none;background:radial-gradient(circle at 89% 3%,rgba(255,255,255,.16),transparent 43%)}.pack-copy{position:relative;z-index:1;display:grid;max-width:70%}.pack-english{margin:4px 0 6px;font-family:"Avenir Next",Avenir,sans-serif;font-size:16px;font-weight:600}.pack-chinese{margin:0;font-size:42px;font-weight:600;line-height:.95}.pack-subtitle{margin:8px 0 0;font-family:"Avenir Next",Avenir,sans-serif;font-size:18px;font-weight:500;line-height:1.18}.pack-hero{position:absolute;z-index:1;right:12px;bottom:7px;width:95px;height:95px;object-fit:contain;filter:drop-shadow(0 8px 5px rgba(0,0,0,.14))}.pack-status{position:absolute;z-index:2;top:14px;right:15px;display:flex;align-items:center;gap:5px;width:104px;height:43px;padding:0 10px;border:0;border-radius:999px;color:white;background:color-mix(in srgb,var(--shadow) 50%,transparent);font-size:17px;font-weight:700}.pack-status img{width:21px;height:21px;object-fit:contain}.pack-status small{font-size:14px;font-weight:500;opacity:.85}.pack-expand{position:absolute;z-index:3;inset:0;border:0;background:transparent}.pack-actions{position:relative;z-index:4;display:none;margin-top:42px}.pack-card.is-expanded{min-height:276px}.pack-card.is-expanded .pack-actions{display:block}.start-card{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:57px;border:0;border-radius:14px;color:var(--fore);background:#fff;box-shadow:0 5px 0 rgba(255,255,255,.28);font-size:21px;font-weight:700}.home-nav{position:fixed;z-index:4;right:0;bottom:0;left:0;display:grid;grid-template-columns:64px 1fr 64px;align-items:center;height:58px;padding:0 max(26px,calc((100vw - var(--home-width))/2));border-top:1px solid rgba(171,59,41,.15);background:var(--canvas)}.home-nav button{display:grid;place-items:center;width:50px;height:48px;border:0;background:transparent;color:var(--drinks);font-size:24px}.home-nav button:last-child{justify-self:end}.home-nav img{width:37px;height:37px;object-fit:contain}.home-nav strong{justify-self:center;padding:7px 19px 10px;border-radius:18px;color:white;background:var(--drinks);box-shadow:0 3px 0 var(--drinks-fore);font-size:21px;font-weight:800}
.review-view{width:min(100% - 40px,660px);min-height:100dvh;margin:0 auto;padding:8px 0 20px}.review-header{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;height:58px}.circle-button{display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;color:#252525;background:white;font-size:27px;font-weight:700;box-shadow:0 2px 5px rgba(0,0,0,.08)}.review-progress{justify-self:center;display:flex;align-items:center;gap:7px;padding:9px 13px;border:1px solid rgba(255,255,255,.85);border-radius:999px;color:#777;background:rgba(255,255,255,.64);box-shadow:0 2px 5px rgba(0,0,0,.07);font-size:15px;font-weight:600}.review-progress i{width:1px;height:16px;background:#cfcfcf}.review-progress img{width:18px;height:18px;object-fit:contain}.review-progress b{color:var(--trophy);font-size:15px}.card-stack{position:relative;margin-top:11px}.flashcard{position:relative;display:grid;grid-template-rows:minmax(260px,1fr) 83px 50px 58px;min-height:min(67dvh,620px);overflow:hidden;padding:30px 30px 18px;border-radius:34px;background:white;box-shadow:0 9px 20px rgba(0,0,0,.10);touch-action:none;user-select:none;transform-origin:50% 90%;transition:transform .2s ease,opacity .2s ease,background .2s ease}.flashcard:focus-visible{outline:4px solid var(--pinyin);outline-offset:5px}.artwork{display:grid;place-items:center}.artwork img{width:min(100%,390px);height:min(100%,350px);object-fit:contain;filter:drop-shadow(0 10px 8px rgba(0,0,0,.11));pointer-events:none}.card-hanzi,.card-pinyin,.card-english{margin:0}.card-hanzi{align-self:center;overflow:hidden;font-size:82px;font-weight:700;line-height:1;text-align:center;white-space:nowrap}.card-pinyin{align-self:center;color:var(--pinyin);font-size:40px;font-weight:700;line-height:1;text-align:center}.card-footer{display:grid;grid-template-columns:1fr 62px;align-items:center}.card-english{color:rgba(0,0,0,.45);font-size:23px;font-weight:600}.card-footer button{height:54px;border:0;background:transparent;color:var(--audio);font-size:24px;font-weight:800}.verdict,.collect-stamp{position:absolute;z-index:2;display:none;padding:9px 16px;border:5px solid currentColor;border-radius:12px;font-size:30px;font-weight:900;letter-spacing:.4px;line-height:1;transform:rotate(8deg)}.verdict-left{top:43%;right:18px;color:var(--not-yet)}.verdict-right{top:43%;left:18px;color:var(--knew-it);transform:rotate(-8deg)}.collect-stamp{right:18px;bottom:52px;left:18px;color:var(--trophy);text-align:center;transform:rotate(-7deg)}.flashcard.show-left{background:#fff7f5}.flashcard.show-right{background:#f5fbf3}.flashcard.show-up{background:#fffdf3}.flashcard.show-left .verdict-left,.flashcard.show-right .verdict-right,.flashcard.show-up .collect-stamp{display:block}.result-controls{display:grid;grid-template-columns:62px 1fr 1fr;gap:12px;margin-top:20px}.collect-button,.result-button{height:62px;border:0;border-radius:17px;color:white;font-size:34px;font-weight:900}.collect-button{display:grid;place-items:center;background:var(--trophy);box-shadow:0 4px 0 var(--trophy-shadow)}.collect-button img{width:31px;height:31px}.result-button{box-shadow:0 5px 0}.not-yet{background:var(--not-yet);box-shadow-color:var(--not-yet-shadow)}.knew-it{background:var(--knew-it);box-shadow-color:var(--knew-it-shadow)}.collect-button:active,.result-button:active,.start-card:active{transform:translateY(3px);box-shadow:0 1px 0}.display-controls{display:flex;justify-content:center;gap:14px;margin-top:18px}.display-controls button{width:44px;height:44px;border:1px solid rgba(0,0,0,.16);border-radius:50%;color:var(--pinyin);background:white;font-size:16px;font-weight:700}.display-controls button:first-child{color:#bf6929}.display-controls button.is-on{color:white;background:var(--pinyin);box-shadow:0 3px 0 rgba(0,0,0,.18)}.display-controls button:first-child.is-on{background:#bf6929}
.trophy-dialog{width:min(100% - 36px,640px);padding:27px;border:0;border-radius:30px;background:var(--canvas);box-shadow:0 18px 45px rgba(0,0,0,.3)}.trophy-dialog::backdrop{background:rgba(0,0,0,.3)}.trophy-dialog header{display:flex;justify-content:space-between;align-items:start}.trophy-dialog h2,.trophy-dialog p{margin:0}.trophy-dialog h2{color:var(--pinyin);font-size:27px}.trophy-dialog header p{margin-top:3px;color:#777;font-size:17px;font-weight:600}.trophy-dialog header button{width:38px;height:38px;border:0;border-radius:50%;background:white;font-size:25px}.trophy-summary{margin:18px 0!important;color:#777;font-weight:600}.trophy-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.trophy-tile{display:grid;place-items:center;aspect-ratio:1;border-radius:9px}.trophy-tile img{width:100%;height:100%;object-fit:contain}.trophy-tile.locked img{filter:grayscale(1) contrast(.6);opacity:.42}.reset-button{display:block;margin:22px auto 0;border:0;background:transparent;color:var(--pinyin);font-weight:700;text-decoration:underline}.toast{position:fixed;z-index:9;bottom:24px;left:50%;padding:10px 14px;border-radius:12px;color:white;background:#262626;font-weight:600;opacity:0;transform:translate(-50%,12px);transition:.2s}.toast.visible{opacity:1;transform:translate(-50%,0)}[hidden]{display:none!important}@media(max-width:520px){.world-header{grid-template-columns:48px 1fr 48px;padding-right:18px;padding-left:18px;min-height:77px}.pack-list{width:calc(100% - 28px);gap:17px;margin-top:18px}.pack-card{min-height:157px;padding-left:21px}.review-view{width:calc(100% - 28px)}.flashcard{grid-template-rows:minmax(215px,1fr) 76px 45px 54px;min-height:min(64dvh,590px);padding:25px 20px 16px}.artwork img{max-height:285px}.card-hanzi{font-size:72px}.card-pinyin{font-size:36px}.trophy-grid{grid-template-columns:repeat(4,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.001ms!important}}