:root{color-scheme:dark;--bg:#0b1423;--panel:#142238;--mint:#68ebc4;--text:#eef4ff;--muted:#9badc5;--app-height:100dvh}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI","Malgun Gothic",sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:12px;min-height:46px;padding:10px 16px;color:var(--text);background:#213149;touch-action:manipulation}button:hover{filter:brightness(1.12)}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button[disabled]{opacity:.4;cursor:default}[hidden]{display:none!important}.app{max-width:1056px;margin:auto;padding:0 32px}.header{height:94px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #233047;gap:10px}.brand{font-size:23px;font-weight:900;letter-spacing:-.9px;color:white;text-decoration:none;white-space:nowrap}.brand span{color:var(--mint);margin-left:5px}.brand i{font-size:9px;color:var(--mint);margin-left:5px;vertical-align:top}.header-actions{display:flex;gap:6px}.quiet{background:transparent;color:var(--muted);font-size:13px}.eyebrow{color:var(--mint);font-size:11px;font-weight:800;letter-spacing:2.2px}#menu{padding-top:48px}h1{font-size:clamp(30px,4.5vw,48px);letter-spacing:-1.9px;line-height:1.25;margin:14px 0 18px}em{font-style:normal;color:var(--mint)}.intro{color:var(--muted);line-height:1.8}.chooser{margin-top:34px;background:linear-gradient(130deg,#182a40,#122033);border:1px solid #2a3c53;padding:28px;border-radius:22px}.section-top,.level-label{display:flex;justify-content:space-between;align-items:center;gap:8px}.section-top h2{font-size:17px;margin:0}.section-top span,.level-label small{color:var(--muted);font-size:12px}.categories{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0}.categories button{background:#0f1b2d;border:1px solid #30435c;font-weight:650}.categories button[aria-pressed=true]{background:var(--mint);border-color:var(--mint);color:#0b2430}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:12px 0 22px}.levels button{background:#1e3048;border:1px solid transparent;padding:12px 5px}.levels strong{display:block;font-size:18px}.levels small{font-size:11px;color:var(--muted)}.levels button[aria-pressed=true]{border-color:var(--mint);background:#21453f}.levels button[aria-pressed=true] small{color:var(--mint)}.level-label{font-size:12px}.selection-info{border-top:1px solid #304158;padding-top:20px;display:flex;justify-content:space-between;align-items:center;gap:8px}.selection-info p{color:var(--muted);font-size:12px;margin:5px 0}.pill{font-size:11px;color:var(--mint);background:#1a3a35;border-radius:20px;padding:4px 10px;white-space:nowrap}.sample{color:#c5d1e5;font-size:13px;min-height:22px}.slow{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;margin:20px 0}input[type=checkbox]{accent-color:var(--mint);width:17px;height:17px}.primary{background:var(--mint);color:#092822;font-weight:750}.start{width:100%;display:flex;justify-content:space-between;padding:14px 20px}.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0}.notes b{font-size:13px}.notes p,.device-note{color:var(--muted);font-size:12px}.device-note{line-height:1.8}.voice-status{font-size:12px;color:#ffcb9f;margin:10px 0;min-height:0}.voice-status:empty{display:none}#site-footer{display:flex;gap:15px;align-items:center;border-top:1px solid #233047;padding:22px 0;margin-top:35px;color:var(--muted);font-size:10px;letter-spacing:1px}#site-footer small{margin-left:auto}.playing{overflow:hidden}.playing .app{height:var(--app-height);display:flex;flex-direction:column}.playing .header{height:68px;flex-shrink:0}.playing #site-footer{display:none}.playing .voice-status{flex-shrink:0;margin:2px 0;font-size:10px}#game{display:flex;flex:1;min-height:0;flex-direction:column;padding:12px 0}.game-top{display:flex;justify-content:space-between;font-size:12px;color:var(--mint);margin-bottom:10px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;border-radius:12px;background:var(--panel);padding:10px 16px}.stats small{display:block;font-size:10px;color:var(--muted)}.stats b{font-size:19px;font-variant-numeric:tabular-nums}.stats div:first-child b{color:var(--mint)}.progress-track{height:3px;background:#1b2e44;margin-top:8px}.progress-track i{display:block;background:var(--mint);height:100%;width:0;transition:width .2s}.field{position:relative;flex:1;min-height:80px;overflow:hidden;background:repeating-linear-gradient(90deg,transparent,transparent calc(20% - 1px),#18253a 20%)}.field-caption{position:absolute;left:0;right:0;top:40%;text-align:center;color:#50617b;font-size:12px;pointer-events:none}.drop{position:absolute;left:0;top:0;width:max-content;max-width:calc(100% - 12px);background:#243a56;box-shadow:0 6px 12px #0002;border:1px solid #344c69;border-radius:12px;padding:8px 15px;font-size:21px;font-weight:750;line-height:1.5;overflow-wrap:anywhere;will-change:transform}.drop.sentence{font-size:18px}.drop.review{background:#403150;border-color:#70538b;color:#eddbff}.drop.match{background:#214b44;border-color:var(--mint);color:var(--mint)}.drop small{display:block;font-weight:400;font-size:11px;line-height:1.6;color:#decaed}.baseline{height:2px;background:#6885a5;box-shadow:0 -3px 18px #68ebc414}.hint{font-size:12px;color:var(--muted);margin:9px 0;min-height:19px}#answer-form{display:flex;gap:8px;flex-shrink:0}#answer{min-width:0;flex:1;background:#142238;border:1px solid #3e5674;border-radius:12px;color:white;padding:10px 14px;font-size:20px;height:52px}#answer-form button{min-width:84px}.game-footer{font-size:10px;color:var(--muted);text-align:center;padding-top:8px}.overlay{position:fixed;inset:0;background:#06101ee8;display:flex;justify-content:center;align-items:center;z-index:20;padding:20px;backdrop-filter:blur(6px)}.popup{width:min(690px,100%);max-height:calc(100dvh - 30px);overflow:auto;border:1px solid #354c65;background:#16263b;box-shadow:0 25px 90px #0008;border-radius:24px;padding:34px}.popup h2{font-size:clamp(24px,4vw,36px);line-height:1.35;overflow-wrap:anywhere;letter-spacing:-.5px;margin:22px 0 12px}.meaning{color:var(--mint);font-size:21px;line-height:1.6}.pron{color:#b5c3d9;font-size:15px}.popup-note{color:var(--muted);font-size:12px;margin:24px 0}.popup-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.popup-actions small{display:block;font-size:10px;font-weight:400}.secondary{background:#2a3e58}.results{padding:60px 0;text-align:center}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);background:var(--panel);border-radius:18px;padding:25px;margin:30px auto;max-width:600px}.result-grid small{display:block;color:var(--muted)}.result-grid b{font-size:27px}.results>button{display:block;max-width:360px;width:100%;margin:12px auto}.results>p{color:var(--muted)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){.app{padding:0 18px}.header{height:72px}.brand{font-size:19px}#menu{padding-top:30px}.chooser{padding:18px;margin-top:26px}.section-top span{font-size:10px}.categories{gap:5px;margin:18px 0}.categories button{font-size:12px;padding:9px 3px;min-height:44px}.levels{gap:5px}.levels strong{font-size:17px}.selection-info b{font-size:13px}.pill{font-size:9px;padding:3px 7px}.sample{font-size:12px}.notes{gap:8px}.notes b{font-size:12px}.notes p{font-size:10px}#site-footer span{display:none}.playing .header{height:52px}.header-actions{gap:0}.quiet{padding:7px 8px;min-height:40px;font-size:11px}.game-top{font-size:10px;margin-bottom:6px}.stats{padding:7px 10px}.stats b{font-size:16px}.stats small{font-size:9px}#game{padding:8px 0}.drop{font-size:19px;padding:6px 10px}.drop.sentence{font-size:15px}.hint{font-size:10px;margin:6px 0}.game-footer{font-size:9px}#answer{font-size:18px;height:46px;padding:8px 11px}#answer-form button{min-width:66px;padding:7px 11px;font-size:13px}.popup{padding:24px 20px;border-radius:20px}.meaning{font-size:18px}.pron{font-size:13px}.popup-note{font-size:11px}.popup-actions button{font-size:13px}.overlay{padding:15px}}
@media(max-height:500px){.playing .game-footer{display:none}.playing .stats{padding:4px 10px}.playing .header{height:42px}.playing .game-top{margin-bottom:3px}.playing .hint{margin:3px 0}.playing #game{padding:4px 0}.playing .stats small{display:inline;margin-right:5px}.playing .stats b{font-size:13px}.popup{padding:18px 22px}.popup h2{margin:12px 0;font-size:24px}.popup p{margin:8px 0}.popup-actions{margin-top:12px}}
/* Friendly cloud theme */
:root{color-scheme:light;--bg:#f8f7f2;--panel:#fff;--mint:#287d70;--text:#293e46;--muted:#647775}
body{background:radial-gradient(ellipse at 90% 0,#e6f1ed 0,transparent 45%),var(--bg)}
button{background:#e7efeb;border-radius:16px}button:hover{filter:brightness(.97)}.header{border-color:#dce6df}.brand{color:#293e46}.brand i{color:#eda875}
#menu{padding-top:30px}.hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:12px}.hero-copy{padding:12px 0}.hero h1{font-size:clamp(28px,3.5vw,42px);letter-spacing:-1.8px}.hero .intro{font-size:14px}.hero-art{width:100%;height:auto;border-radius:46% 42% 40% 44%;mix-blend-mode:multiply}.hero-tag{display:inline-block;border:1px solid #d7e6dc;border-radius:30px;padding:7px 13px;font-size:11px;color:#547b68;background:#edf4eb}.eyebrow{letter-spacing:1.6px}
.chooser{background:#ffffffed;border:1px solid #dce6df;border-radius:26px;box-shadow:0 14px 40px #4b746608;margin-top:22px}.categories button{background:#edf4ed;border:1px solid #dce7df;color:#3a6454}.categories button:nth-child(2){background:#eef4fb;color:#4e6d91}.categories button:nth-child(3){background:#f3eff9;color:#796094}.categories button:nth-child(4){background:#fcf0e7;color:#956447}.categories button[aria-pressed=true]{background:#287d70;color:#fff;border-color:#287d70;box-shadow:0 4px 0 #1e6155}
.levels button{background:#f7f8f4;border-color:#e6eae2}.levels button[aria-pressed=true]{background:#e6f2e8;border-color:#71a68b}.levels button[aria-pressed=true] small{color:#32684e}.selection-info{border-color:#e6eae2}.pill{background:#eef5e9;color:#58724c}.sample{color:#60766e}.primary{background:#287d70;color:white;box-shadow:0 4px 0 #1f6057}.primary:active{transform:translateY(2px);box-shadow:0 2px 0 #1f6057}.start{border-radius:16px}.secondary{background:#eaf1ed;color:#365d51}.notes>div{background:#fff9;padding:16px;border:1px solid #e4e9e0;border-radius:18px}.notes b{color:#406458}.notes p{margin-bottom:0}.voice-settings{margin-top:20px;background:#edf3ee;border:1px solid #dbe5dd;border-radius:16px;padding:14px 18px;font-size:12px}.voice-settings summary{cursor:pointer;font-weight:700;color:#436959}.voice-controls{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}.voice-controls select{flex:1;min-width:120px;max-width:100%;padding:10px;border:1px solid #bccdc0;border-radius:10px;background:white;font:inherit;color:var(--text)}.voice-settings p{color:var(--muted)}.voice-status{color:#7c572f}.browser-help{padding:18px;background:#fff1cd;border:1px solid #edd9a1;border-radius:18px;margin-bottom:20px;font-size:13px}.browser-help p{margin:8px 0}.browser-help span{display:block;font-size:12px;margin-top:6px;overflow-wrap:anywhere}
#site-footer{border-color:#dce6df}.stats{border:1px solid #dce6df}.progress-track{background:#dfe9df;border-radius:10px;height:5px}.progress-track i{border-radius:10px}.field{background:repeating-linear-gradient(90deg,transparent,transparent calc(20% - 1px),#e3ebe5 20%),linear-gradient(#edf6f4,#f8f7f2);border-radius:18px 18px 0 0;margin-top:8px}.field-caption{color:#768d86}.drop{background:white;border:1px solid #adcfc1;color:#2c574c;box-shadow:0 5px 0 #dce9e3;border-radius:17px}.drop.review{background:#f2eafa;border-color:#c2acd7;color:#694e86}.drop small{color:#7a648c}.drop.match{background:#d8eddd;border-color:#4f9268;color:#245e3a}.baseline{background:#80a999}.hint{color:#667a71}#answer{background:white;border-color:#aac4b6;color:#293e46}.overlay{background:#314e436b;backdrop-filter:blur(7px)}.popup{background:#fffdf8;border:1px solid #e0e6d9;box-shadow:0 25px 90px #1d403433;text-align:center;border-radius:30px}.popup-art{width:110px;height:79px;object-fit:cover;border-radius:45%;mix-blend-mode:multiply;display:block;margin:0 auto 12px}.popup h2{margin-top:14px}.pron{color:#71837c}.meaning{font-weight:650}.audio-status{font-size:11px;color:#85663b;line-height:1.6}.audio-status:empty{display:none}.popup-note{margin:18px 0}.result-grid{border:1px solid #dce6df}.results{background:radial-gradient(ellipse at top,#e3f0e4,transparent 70%)}
@media(max-width:600px){#menu{padding-top:20px}.hero{grid-template-columns:1fr}.hero-copy{text-align:center;padding:4px 0 0}.hero h1{font-size:30px}.hero .intro{font-size:12px}.hero-art{width:220px;margin:-5px auto -5px;max-height:156px;object-fit:cover}.hero-tag{font-size:10px}.eyebrow{font-size:9px}.chooser{margin-top:14px}.notes{gap:6px}.notes>div{padding:11px 8px}.notes p{line-height:1.6}.voice-controls{gap:7px}.voice-controls label{width:100%}.popup-art{width:90px;height:64px}.playing .voice-status{max-height:32px;overflow:auto}.voice-settings{padding:12px 14px}}
@media(max-height:550px){.popup-art{display:none}.popup{max-height:calc(var(--app-height) - 20px)}.audio-status{margin:6px 0}.playing .voice-status{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Bokdol travel and keyboard-aware play area */
.brand{font-size:21px;letter-spacing:-.8px}.hero-art{height:300px;width:100%;object-fit:contain;border-radius:30%;mix-blend-mode:multiply}.destination-preview{color:#457f84;font-size:13px;background:#edf6f5;padding:10px 14px;border-radius:12px}.journey{flex-shrink:0;margin:6px 0 3px;padding:4px 12px 0;background:linear-gradient(#eaf5f6,#f7f4e9);border-radius:14px}.journey-label{display:flex;justify-content:space-between;font-size:10px;color:#698780}.journey-path{position:relative;height:57px;margin:0 10px 0 0;border-bottom:3px dashed #c5d8c8}.journey-fill{position:absolute;bottom:-3px;left:0;height:3px;background:#539981;transition:width 1s}.traveler{position:absolute;width:64px;height:51px;left:0;bottom:0;transition:left 1.1s ease-in-out}.traveler img{position:absolute;width:64px;height:51px;object-fit:contain;inset:0}.traveler .step-two{visibility:hidden}.traveler.walking{animation:trot .3s ease-in-out infinite}.traveler.walking img:first-child{animation:stepOne .5s steps(1) infinite}.traveler.walking .step-two{animation:stepTwo .5s steps(1) infinite}.destination-flag{position:absolute;right:-8px;bottom:0;font-size:28px;color:#b47760}.progress-track{display:none}.arrival-art{height:130px;width:200px;object-fit:contain}.popup-art{object-fit:contain;mix-blend-mode:normal}.field{min-height:0}.playing .voice-status{display:none}.playing .app{position:fixed;top:var(--view-top,0px);left:50%;transform:translateX(-50%);width:100%;padding-bottom:env(safe-area-inset-bottom,0px)}.overlay{top:var(--view-top,0px);bottom:auto;height:var(--app-height)}.popup{max-height:calc(var(--app-height) - 24px)}
@keyframes trot{50%{transform:translateY(-2px) rotate(-1deg)}}@keyframes stepOne{0%,100%{visibility:visible}50%{visibility:hidden}}@keyframes stepTwo{0%,100%{visibility:hidden}50%{visibility:visible}}
@media(max-width:600px){.brand{font-size:16px}.hero-art{height:190px;width:210px;max-height:none}.hero h1{font-size:28px}.playing .header{height:44px}.playing .app{padding-left:12px;padding-right:12px}.stats{padding:5px 10px}.stats small{font-size:9px}.stats b{font-size:14px}.game-top{margin-bottom:4px}.journey{margin-top:5px}.journey-path{height:49px}.traveler,.traveler img{height:45px}.drop{font-size:19px;padding:7px 12px;max-width:calc(100% - 12px)}.drop.sentence{font-size:16px;line-height:1.4}.drop small{font-size:10px;line-height:1.4}.hint{font-size:10px;line-height:1.4;min-height:14px}.game-footer{display:none}#answer{height:44px;font-size:18px}.field{margin-top:5px}.popup-art{height:65px;width:100px}.header-actions .quiet{padding:6px;min-height:40px}}
.compact.playing .header{height:38px}.compact.playing .stats{padding:3px 8px}.compact.playing .stats small{display:inline;margin-right:5px}.compact.playing .stats b{font-size:12px}.compact.playing #game{padding:3px 0}.compact.playing .game-top{font-size:9px;margin-bottom:3px}.compact.playing .journey{padding-top:1px;margin-top:3px}.compact.playing .journey-path{height:38px}.compact.playing .traveler,.compact.playing .traveler img{height:36px}.compact.playing .journey-label{font-size:9px}.compact.playing .hint{margin:4px 0}.compact.playing .drop{font-size:17px;padding:5px 10px}.compact.playing .drop.sentence{font-size:15px}.compact .popup-art{display:none}.compact .popup{padding:16px 20px}.compact .popup h2{margin:8px 0;font-size:23px}.compact .popup p{margin:7px 0}.compact .popup-actions{margin-top:10px}.compact .popup-note{font-size:10px}
@media(prefers-reduced-motion:reduce){.traveler,.traveler img{animation:none!important;transition:none!important}.traveler .step-two{display:none}.journey-fill{transition:none}}

.hero-art{border-radius:0}.traveler img{object-position:center bottom}

.popup-art{width:96px;height:106px;object-fit:contain;border-radius:18px;mix-blend-mode:multiply}@media(max-width:600px){.popup-art{width:64px;height:71px}}
/* Adventure collection, expressions, short stories and travel missions */
.adventure-tip{font-size:12px;color:#557b75}.travel-book{margin:24px 0;padding:20px;background:#fffdf7;border:1px solid #e0e7dc;border-radius:22px}.travel-book summary{cursor:pointer;font-weight:750;color:#355e58;list-style-position:inside}.travel-book summary b{float:right;color:#b77d54}.travel-book p{font-size:12px;color:#647b77}.closet{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:20px;margin-top:18px}.cat-dressed{position:relative}.hero-cat{width:100%;max-width:400px;justify-self:center}.cat-dressed>img{display:block;width:100%;object-fit:contain}.closet-cat{width:200px}.wear-hat,.wear-scarf,.wear-bag{position:absolute;pointer-events:none;line-height:1;z-index:2}.wear-hat{left:68%;top:0;font-size:clamp(20px,4vw,52px);transform:rotate(12deg)}.wear-bag{left:32%;top:37%;font-size:clamp(24px,5vw,58px);transform:rotate(-12deg)}.wear-scarf{left:64%;top:49%;width:16%;height:29%;background:#84c7e2;clip-path:polygon(0 0,100% 7%,60% 100%,35% 82%);transform:rotate(-13deg);opacity:.95}.wear-scarf[data-item=red]{background:#db795c}.traveler .wear-hat{font-size:15px;top:0}.traveler .wear-bag{font-size:16px;top:40%}.traveler .wear-scarf{top:51%}.closet-cat .wear-hat{font-size:30px}.closet-cat .wear-bag{font-size:34px}#wardrobe fieldset{border:0;padding:0;margin:0 0 10px}#wardrobe legend{font-size:12px;font-weight:800}#wardrobe button{font-size:11px;min-height:38px;margin:3px;padding:7px 10px;background:#eef3ec;color:#446962}#wardrobe button[aria-pressed=true]{background:#d8eee5;box-shadow:inset 0 0 0 2px #5b9887}#wardrobe button:disabled{opacity:.6}.passport{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.stamp{background:#f1f0e9;color:#7c8276;padding:12px 5px;min-width:0}.stamp span{display:block;font-size:25px}.stamp b,.stamp small{display:block;font-size:12px}.stamp small{font-size:10px}.stamp.collected{background:#edf6ee;border:2px dashed #75a895;color:#376b5b;transform:rotate(-1deg)}.stamp:disabled{opacity:.65}.reaction-face{position:relative;width:96px;height:106px;margin:0 auto}.reaction-face .popup-art{margin:0!important}.face-expression{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;fill:none;stroke:#696963;stroke-width:2.2;stroke-linecap:round}.happy-expression,.sad-expression{display:none}[data-mood=happy] .happy-expression,[data-mood=sad] .sad-expression{display:block}.tear{stroke:#8ecadd;fill:#aedbe8}.mood-mark{position:absolute;right:-10px;top:12px;color:#d5a13c;font-size:25px}.reaction-face[data-mood=happy]{animation:happyNod .45s ease-in-out 2}.reaction-face[data-mood=sad]{transform:rotate(-5deg)}.cat-line{background:#f0f5e9;border-radius:12px;padding:8px 12px;font-size:13px;color:#587866;margin:8px 0!important}.rush-banner{position:absolute;top:8px;left:6%;right:6%;z-index:5;pointer-events:none;text-align:center;font-size:14px;font-weight:800;background:#fff0c8e8;color:#8c6536;border-radius:18px;padding:8px;animation:happyNod .3s 5}.traveler.zoomies{animation:zoomies .14s linear infinite!important}.traveler.zoomies img{animation-duration:.16s!important}.traveler.zoomies:after{content:'💨';position:absolute;right:88%;bottom:0;font-size:20px}.reward-message{padding:14px;background:#edf5df;border-radius:16px;color:#557543}.travel-comic{max-width:620px;margin:18px auto;border:2px solid #687d75;border-radius:16px;overflow:hidden;background:#fffdf7;text-align:left;box-shadow:4px 5px 0 #dbe6df}.travel-comic header{display:flex;justify-content:space-between;gap:10px;padding:10px 16px;background:#edf2e8;font-size:12px}.comic-scene{position:relative;height:250px;overflow:hidden;background:linear-gradient(#eff8fb 0%,#ffefd5 80%,#dfeaca 80%)}.comic-landmark{position:absolute;right:22px;top:20px;font-size:95px;opacity:.45}.comic-speech{position:absolute;left:6%;top:17px;width:68%;padding:13px 15px;border:2px solid #657a71;border-radius:18px;background:#fffef9;color:#3d5950;font-weight:750;font-size:15px;z-index:3}.comic-speech:after{content:'';position:absolute;left:35%;bottom:-10px;border-width:9px 8px 0;border-style:solid;border-color:#657a71 transparent transparent}.comic-cat{position:absolute;width:180px;left:15%;bottom:17px;transform:rotate(-3deg)}.comic-cat .wear-hat{font-size:27px}.comic-cat .wear-bag{font-size:30px}.comic-prop{position:absolute;left:62%;bottom:22px;font-size:65px;transform:rotate(12deg)}.comic-spark{position:absolute;left:53%;bottom:100px;font-size:25px;color:#c79547}.comic-caption{padding:12px 16px;margin:0!important;font-size:13px;color:#50655a}#mission-summary{font-size:13px;color:#7e8767}#postcard{width:min(680px,94vw);max-height:90dvh;overflow:auto;padding:20px;border:0;border-radius:22px;background:#fffdf7;color:#354c48}#postcard::backdrop{background:#173b3a99;backdrop-filter:blur(4px)}#close-postcard{float:right}#postcard-title{font-size:19px}.mission-stage{position:relative;height:85px;overflow:hidden;border-radius:12px;background:#eef5ed;margin:10px 0}#mission-prop{position:absolute;right:15%;font-size:44px;bottom:8px}#mission-cat{position:absolute;left:8%;bottom:4px;width:100px;transform:scaleX(-1);transition:left .8s,transform .5s}#mission-cat.found-way{left:55%;transform:scaleX(1)}#mission-target{font-size:17px;font-weight:750;color:#27796f}#mission-scene{font-size:12px}#mission-form label{display:block;font-size:11px;color:#668075;text-align:left;margin:7px 0}#mission-form>div{display:flex;gap:6px}#mission-answer{width:100%;min-width:0;font-size:18px;border:1px solid #9bb8ac;border-radius:12px;background:white;color:#344c45;padding:9px 12px}#mission-form button{white-space:nowrap}#mission-message{font-size:12px;color:#8d6832}#mission-skip{font-size:11px;min-height:32px}.popup:has(#mission-panel:not([hidden])) .reaction-face{display:none}.popup:has(#mission-panel:not([hidden])) h2{font-size:23px}.popup:has(#mission-panel:not([hidden])) .meaning{font-size:14px}.popup:has(#mission-panel:not([hidden])) .popup-actions{margin-top:8px}
@keyframes happyNod{50%{transform:translateY(-3px) rotate(2deg)}}@keyframes zoomies{50%{transform:translateY(-3px) rotate(4deg)}}
@media(max-width:600px){.travel-book{padding:14px}.travel-book summary{font-size:13px}.closet{grid-template-columns:1fr;gap:6px}.closet-cat{width:150px;margin:auto}.passport{grid-template-columns:repeat(3,1fr)}.hero-cat{width:210px}.reaction-face{width:64px;height:71px}.mood-mark{font-size:18px}.cat-line{font-size:11px;padding:6px 8px}.comic-scene{height:220px}.comic-cat{width:145px;left:7%}.comic-prop{font-size:50px;left:66%}.comic-speech{font-size:12px;width:80%;padding:10px}.comic-landmark{font-size:75px}.comic-cat .wear-hat{font-size:24px}.comic-cat .wear-bag{font-size:26px}.adventure-tip{font-size:11px}.rush-banner{font-size:11px;padding:5px}.travel-comic header{font-size:10px}.comic-caption{font-size:12px}.mission-stage{height:60px}#mission-cat{width:80px}#mission-prop{font-size:35px}.popup:has(#mission-panel:not([hidden])){padding:14px}.popup:has(#mission-panel:not([hidden])) h2{font-size:19px}#mission-target{font-size:15px}}
.compact .reaction-face{display:none}.compact .cat-line{padding:4px 7px;font-size:10px}.compact .mission-stage{height:48px}.compact #mission-cat{width:64px}.compact #mission-target{font-size:14px}.compact #mission-form label{font-size:10px}.compact #mission-panel p{margin:4px 0}.compact .popup:has(#mission-panel:not([hidden])) .audio-status{display:none}.compact .popup:has(#mission-panel:not([hidden])) .popup-note{display:none}
@media(prefers-reduced-motion:reduce){.reaction-face,.rush-banner,.traveler.zoomies{animation:none!important}#mission-cat{transition:none}}
/* A brief, non-interactive celebration outside the correct-answer popup. */
.popup-shell{position:relative;width:min(690px,100%);max-width:100%;flex-shrink:0}.popup-shell>.popup{width:100%}.overlay{overflow:hidden}.celebration{position:absolute;inset:0;pointer-events:none;z-index:2}.celebration-piece{position:absolute;width:7px;height:11px;border-radius:2px;background:var(--piece);opacity:0;animation:popupConfetti 1.6s var(--delay) ease-out both;will-change:transform,opacity}.celebration-piece.star{width:18px;height:18px;line-height:18px;font-size:20px;background:none;color:var(--piece);text-shadow:0 0 8px #fff8}.popup-shell.celebrating>.popup{animation:popupGlow 1.7s ease-out}.celebration-piece:nth-child(2n){border-radius:50%}
@keyframes popupConfetti{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}65%{opacity:.9}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--turn)) scale(.7)}}
@keyframes popupGlow{0%{box-shadow:0 0 0 0 #efd17900,0 25px 90px #1d403433}25%{box-shadow:0 0 0 4px #efd17988,0 0 35px #91d6ba88,0 25px 90px #1d403433}100%{box-shadow:0 0 0 9px #efd17900,0 25px 90px #1d403433}}
@media(max-width:600px){.celebration-piece{width:5px;height:8px}.celebration-piece.star{font-size:15px;width:14px;height:14px;line-height:14px}}
@media(prefers-reduced-motion:reduce){.celebration{display:none}.popup-shell.celebrating>.popup{animation:none}}
/* Continuous celebration framing each earned travel comic. */
.comic-celebration{position:relative;isolation:isolate;width:calc(100% - 16px);max-width:628px;margin:28px auto;padding:4px;border-radius:21px;background:linear-gradient(110deg,#efd99a,#88cdbb,#b9c6ef,#eac0d8,#efd99a);background-size:300% 300%;animation:comicBorderFlow 8s ease-in-out infinite;box-shadow:0 4px 16px #78aa8f22}.comic-celebration:before{content:'';position:absolute;inset:-7px;z-index:-1;border-radius:25px;background:linear-gradient(100deg,#f0d486,#9ad8cb,#c6b8e6,#efceb0);filter:blur(12px);opacity:.45;animation:comicAura 4s ease-in-out infinite;pointer-events:none}.comic-celebration>.travel-comic{margin:0;max-width:none;position:relative;z-index:1;border:1px solid #8da89a;box-shadow:none;border-radius:17px}.comic-starlight{position:absolute;inset:0;z-index:2;pointer-events:none}.comic-starlight span{position:absolute;font-size:17px;line-height:1;color:var(--spark-color);text-shadow:0 0 7px #fff,0 0 12px var(--spark-color);animation:comicTwinkle var(--duration) var(--phase) ease-in-out infinite;transform:translate(-50%,-50%);opacity:.7}.comic-starlight span:nth-child(3n){font-size:12px}.comic-starlight span:nth-child(2n){font-size:20px}
@keyframes comicBorderFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes comicAura{0%,100%{opacity:.25;transform:scale(.99)}50%{opacity:.55;transform:scale(1.015)}}
@keyframes comicTwinkle{0%,100%{opacity:.25;transform:translate(-50%,-50%) scale(.55) rotate(-12deg)}50%{opacity:1;transform:translate(-50%,calc(-50% - 4px)) scale(1.12) rotate(18deg)}}
@media(max-width:600px){.comic-celebration{width:calc(100% - 12px);margin:22px auto;padding:3px}.comic-starlight span{font-size:13px}.comic-starlight span:nth-child(2n){font-size:16px}.comic-starlight span:nth-child(3n){font-size:10px}.comic-celebration:before{inset:-4px;filter:blur(8px)}}
@media(prefers-reduced-motion:reduce){.comic-celebration,.comic-celebration:before,.comic-starlight span{animation:none!important}.comic-starlight span{opacity:.65}}

/* Two four-frame rows: relaxed blink/tail idle and short-legged walk. */
.bokdol-sprite{display:block;background-image:url('assets/bokdol-sprites.png');background-size:400% 200%;background-repeat:no-repeat;background-position:0 0;animation:bokdolIdle 4.8s steps(1,end) infinite}
.hero-cat{max-width:320px}.hero-sprite{width:100%;aspect-ratio:1}.hero-cat .wear-hat{left:72%;top:17%}.hero-cat .wear-bag{top:49%}.hero-cat .wear-scarf{top:58%;height:23%}
.traveler .travel-sprite{position:absolute;width:64px;height:64px;left:0;bottom:-3px}.traveler .wear-hat{top:7%}.traveler .wear-scarf{top:53%}
.traveler.walking{animation:none}.traveler.walking .travel-sprite{animation:bokdolWalk .8s steps(1,end) infinite}.traveler.zoomies .travel-sprite{animation:bokdolWalk .32s steps(1,end) infinite!important}
@keyframes bokdolIdle{0%,66%,100%{background-position:0 0}72%{background-position:33.333333% 0}76%{background-position:66.666667% 0}80%{background-position:33.333333% 0}85%,96%{background-position:100% 0}}
@keyframes bokdolWalk{0%,100%{background-position:0 100%}25%{background-position:33.333333% 100%}50%{background-position:66.666667% 100%}75%{background-position:100% 100%}}
@media(max-width:600px){.hero-cat{width:190px}.traveler .travel-sprite{width:60px;height:60px;bottom:-3px}}
.compact.playing .traveler .travel-sprite{width:52px;height:52px;bottom:-3px}
@media(prefers-reduced-motion:reduce){.bokdol-sprite,.traveler.walking .travel-sprite,.traveler.zoomies .travel-sprite{animation:none!important;background-position:0 0}}

/* Main-screen Bokdol uses the same walk cycle as the journey. */
.hero-sprite{animation:bokdolWalk .8s steps(1,end) infinite}
@media(prefers-reduced-motion:reduce){.hero-sprite{animation:none!important;background-position:0 0}}

/* A little walk toward a waiting treat, within a shared responsive scene. */
.hero-scene{position:relative;width:100%;max-width:480px;height:320px;justify-self:center}
.hero-scene .hero-cat{position:absolute;left:-18px;bottom:0;width:300px;max-width:none}
.hero-churu{position:absolute;right:-5px;top:116px;width:132px;height:auto;object-fit:contain;pointer-events:none;animation:churuInvite 2.4s ease-in-out infinite}
@keyframes churuInvite{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@media(max-width:600px){.hero-scene{width:min(100%,330px);height:210px;margin:0 auto}.hero-scene .hero-cat{width:210px;left:0;bottom:0}.hero-churu{width:100px;right:0;top:72px}}
@media(prefers-reduced-motion:reduce){.hero-churu{animation:none}}


/* Familiar four-pose artwork, steady in-place pursuit with no body shake. */
.bokdol-sprite{background-image:url('assets/bokdol-sprites.png');background-size:400% 200%;background-position:0 100%;clip-path:none;animation:none}
.hero-scene .hero-cat{animation:none;transform:none;opacity:1}
.hero-sprite{animation:bokdolWalk 1.1s steps(1,end) infinite}
.traveler .travel-sprite{animation:bokdolWalk 1.1s steps(1,end) infinite;animation-play-state:paused}
.traveler.walking .travel-sprite{animation:bokdolWalk 1.1s steps(1,end) infinite;animation-play-state:running}
.traveler.zoomies{animation:none!important}.traveler.zoomies .travel-sprite{animation:bokdolWalk .65s steps(1,end) infinite!important}
@media(prefers-reduced-motion:reduce){.hero-sprite,.traveler .travel-sprite,.traveler.walking .travel-sprite,.traveler.zoomies .travel-sprite{animation:none!important}}

/* Scene motion is synchronized with the continuously running walk phase. */
.hero-scene .hero-churu{animation:none}

/* Destination watercolor atlas: five stages in each of four category rows. */
.field{isolation:isolate;background:#f8f8f1}
.field::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('assets/travel-scenes.png');background-size:500% 400%;background-position:var(--scene-x,0%) var(--scene-y,0%);background-repeat:no-repeat;opacity:.27}
.field::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(#fbfcf7aa,#fffdf320 45%,#fffdf310)}
.field-caption{color:#627b72;text-shadow:0 1px 3px #fff}
.field .drop{z-index:1}.field .rush-banner{z-index:5}