@charset "UTF-8";
:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#133d65;font-synthesis:none;--teal:#00acb6;--navy:#153d65;--gold:#ffc448}
*{box-sizing:border-box}body{margin:0;background:#133e52}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:disabled{opacity:.5;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffb53d;outline-offset:4px}button{border:0}button:active:not(:disabled){transform:translateY(2px)}.app{max-width:480px;min-height:100dvh;margin:0 auto;position:relative;isolation:isolate;overflow:hidden;background:#32b8ef;box-shadow:0 0 90px #0003}.scenery{position:absolute;inset:0 0 auto;height:max(100dvh,840px);background:url('assets/island.png') center 43%/cover no-repeat;z-index:-3}.sky-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(#0086cb16 0,#0099b500 40%,#0f885300 60%,#e4f5ed 1050px)}header{padding:calc(18px + env(safe-area-inset-top)) 20px 0;display:flex;justify-content:space-between;align-items:center;gap:10px}.brand{background:linear-gradient(#bf9059,#8d633e);padding:7px 11px 6px;border:2px solid #e8c388;border-radius:15px;box-shadow:0 4px #71563c,0 6px 10px #245f7144;transform:rotate(-2deg);color:#ffe682;font-size:26px;font-weight:1000;letter-spacing:-1px;text-shadow:0 2px 0 #875326,1px 0 #6e482b,-1px 0 #6e482b}.brand .blue{color:#a9edff}.brand small{display:block;font-size:9px;font-weight:800;letter-spacing:2px;color:#fff9e3;margin-top:2px;text-shadow:none}.wallet{display:flex;align-items:center;gap:8px;background:linear-gradient(#fffef5,#ffe7b4);border:2px solid white;border-radius:25px;padding:6px 13px 6px 6px;box-shadow:0 4px #97763644;color:#7f501f;font-size:22px;min-width:100px}.coin{display:inline-flex;justify-content:center;align-items:center;width:30px;height:30px;border-radius:100%;background:linear-gradient(140deg,#ffe878,#ffbd21);border:2px solid #fff4a1;color:#de9300;text-shadow:0 1px #fff4a3;box-shadow:0 2px #ca8a0c;font-size:21px}main{padding:0 18px 110px;min-height:calc(100dvh - 82px)}h1,h2,h3,p{margin:0}h1{color:white;font-size:clamp(25px,7.2vw,33px);font-weight:950;line-height:1.25;text-shadow:0 3px #197fa2,0 5px 15px #285a7444;letter-spacing:1px;margin-top:25px}h2{font-size:21px;font-weight:900;line-height:1.4}h3{font-size:17px}p{line-height:1.65;font-size:15px;color:#698195}.topline{display:flex;align-items:center;justify-content:space-between;margin-top:15px;gap:8px}.grade{color:#164c72;background:linear-gradient(#f4fdff,#c6efff);border:2px solid #fff;border-radius:22px;padding:9px 13px;box-shadow:0 3px #367f9e40;font-weight:800;font-size:15px}.day-label{color:white;font-size:13px;font-weight:700;text-shadow:0 1px 5px #28586c;background:#007cb52b;border-radius:20px;padding:8px 10px}.hero-space{height:clamp(228px,36dvh,370px);position:relative}.wood-sign{position:absolute;bottom:8px;right:-1px;color:#fff9eb;font-size:14px;font-weight:900;background:linear-gradient(#af7b52,#855535);border:2px solid #cd9a68;border-radius:9px;padding:9px 11px;box-shadow:0 4px #644a33;transform:rotate(2deg)}.panel{background:linear-gradient(125deg,#ffffff 0,#fffdf6 70%,#f6f1e6);border:3px solid #fff;border-radius:25px;box-shadow:0 6px 0 #8c78513a,0 10px 25px #2d64772a;padding:19px;margin-bottom:15px}.row{display:flex;justify-content:space-between;align-items:center;gap:10px}.muted{color:#7a8995;font-size:13px}.eyebrow{color:#009ca4;font-size:12px;font-weight:800;letter-spacing:1.5px;margin-bottom:5px}.task-heading{display:flex;gap:12px;align-items:center}.task-emblem{width:53px;height:53px;flex-shrink:0;border-radius:16px;background:linear-gradient(#c8f3fa,#f9e7bc);font-size:32px;text-align:center;padding-top:5px;box-shadow:inset 0 1px 1px white}.task-heading .copy{flex:1}.task-heading .muted{margin-top:3px}.tokens{display:flex;gap:9px;margin:15px 0}.token{flex:1;min-width:0;text-align:center;border-radius:16px;background:#ecece66e;padding:8px 4px;color:#153e66;font-size:17px;font-weight:800;box-shadow:inset 0 1px 3px #8d9a9e10}.token img{height:49px;max-width:100%;object-fit:contain;display:block;margin:0 auto 3px;mix-blend-mode:multiply}.token .emoji{display:block;font-size:37px;height:49px;line-height:49px}.primary{width:100%;min-height:58px;background:linear-gradient(#10e2df,#00a6b0);border:3px solid #6cffff;border-radius:19px;color:white;font-size:23px;font-weight:950;letter-spacing:2px;text-shadow:0 2px #008c96;box-shadow:0 4px #008894,inset 0 2px 3px #b1ffff}.primary.small{font-size:18px;letter-spacing:0;min-height:49px}.secondary{border-radius:13px;padding:11px 14px;min-height:44px;background:#e6f2f7;color:#28627d;font-weight:800}.text-button{background:transparent;color:#38809b;padding:10px 7px;font-size:14px;font-weight:800;min-height:40px}.wish{display:flex;align-items:center;gap:12px;padding:15px 16px}.wish-image{width:70px;height:65px;object-fit:contain;mix-blend-mode:multiply}.wish .emoji{font-size:47px;width:65px;text-align:center}.wish-copy{flex:1;min-width:0}.wish h3{font-size:17px}.wish-amount{color:#e8891a;font-size:16px;font-weight:900;white-space:nowrap}.wish-amount small{color:#8b929d;font-size:13px}.bar{height:12px;border-radius:20px;background:#d8e0e7;box-shadow:inset 0 2px 2px #687e8c18;overflow:hidden}.bar span{display:block;height:100%;border-radius:20px;background:linear-gradient(#ffe778,#ffba22);border:1px solid #ffe085;transition:width .4s}.wish .bar{margin-top:9px}.wish .muted{display:block;font-size:12px;margin-top:7px}.home-footer{display:flex;justify-content:space-between;gap:8px;margin:22px 3px 0;font-size:13px;color:#345c6e}nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);display:flex;background:linear-gradient(#fff,#fffdf5);border:2px solid white;border-bottom:0;border-radius:24px 24px 0 0;padding:8px 8px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 20px #2865742b;z-index:20}nav button{flex:1;background:none;color:#7b7f86;font-size:14px;font-weight:800;padding:2px 2px 4px;position:relative;min-height:67px}nav .nav-icon{height:36px;display:block;font-size:30px;line-height:36px}nav .nav-icon img{width:43px;height:37px;object-fit:contain;mix-blend-mode:multiply}nav button.active{color:#009fae}nav button.active:after{content:'';position:absolute;bottom:0;left:calc(50% - 12px);width:24px;height:4px;background:#00aab3;border-radius:4px}.subheading{margin:25px 0 18px}.subheading p{color:#eafaff;text-shadow:0 1px 5px #2f678e;font-weight:600;margin-top:8px}.tabs{display:flex;gap:7px;flex-wrap:wrap;margin:15px 0}.tabs button{border:2px solid #ffffffa8;background:#eaf8fff0;color:#3b748a;border-radius:20px;padding:9px 14px;font-size:14px;font-weight:800}.tabs .active{background:#165271;color:#fff;border-color:#4d90a8}.products{display:grid;grid-template-columns:1fr 1fr;gap:13px}.product{background:linear-gradient(135deg,#fff,#f8f4e8);border:2px solid white;border-radius:22px;box-shadow:0 5px #3b779e25;padding:15px 11px;text-align:center;position:relative}.product .art{height:82px;display:flex;align-items:center;justify-content:center;font-size:59px;margin:5px 0 10px;background:radial-gradient(ellipse,#d8eef260,transparent 72%)}.product .art img{width:100px;height:82px;object-fit:contain;mix-blend-mode:multiply}.product h3{font-size:16px}.product .price{color:#b88220;font-weight:800;font-size:15px;margin:8px 0}.product button{width:100%;margin-top:7px;font-size:14px}.product .wish-star{font-size:12px;color:#6990a1;background:transparent;min-height:35px}.owned-tag{position:absolute;right:10px;top:10px;background:#d8f3df;color:#20864e;padding:4px 7px;border-radius:9px;font-size:11px}.notice{font-size:13px;line-height:1.7;color:#4d758b;background:#ffffffd9;padding:12px 14px;border-radius:16px;margin:16px 0}.house-stage{height:clamp(250px,43dvh,400px);position:relative}.collection{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.collection button{background:#e6f3f6;border:2px solid transparent;border-radius:16px;padding:10px;min-width:65px;font-size:30px}.collection button img{height:40px;width:45px;object-fit:contain;mix-blend-mode:multiply}.collection .selected{border-color:#00adb5;background:#dafff7}.display-items{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.display-item{background:#f1f5ed;border:2px solid white;border-radius:16px;text-align:center;padding:12px 8px;min-width:83px;max-width:32%;font-size:13px;font-weight:800}.display-item .mini-art{font-size:37px;height:49px;display:block}.display-item img{height:49px;width:60px;object-fit:contain;mix-blend-mode:multiply}.word-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #e6ebec}.word-row:last-child{border:0}.word-row .word-icon{font-size:33px;width:43px;text-align:center}.word-row .word-copy{flex:1}.word-row b{font-size:19px}.word-row small{font-size:12px;color:#758c9a;display:block;margin-top:4px}.word-row button{min-width:44px}.stats{display:grid;grid-template-columns:repeat(3,1fr);text-align:center;gap:8px;margin:10px 0 18px}.stats b{font-size:27px;display:block;color:#057b9c}.stats span{font-size:12px;color:#6a8999}.lesson{margin-top:20px}.lesson .bar{margin:16px 0;background:#dbe9ec}.lesson .bar span{background:linear-gradient(#49e3d1,#00aaac);border:0}.question-panel{min-height:390px;text-align:center;padding:22px 18px}.question-title{font-size:21px;margin-top:8px}.lesson-art{font-size:85px;margin:22px auto 12px;height:105px;line-height:105px}.lesson-art img{max-height:105px;width:130px;object-fit:contain;mix-blend-mode:multiply}.english-word{font-size:39px;font-weight:900;letter-spacing:1px;color:#17456d}.translation{font-size:18px;color:#6e8b9c;margin:9px 0 17px}.sound-button{border:2px solid #b6e7ed;background:#e3fbff;color:#008ca1;border-radius:17px;padding:12px 18px;font-size:17px;font-weight:800;min-height:50px}.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 15px}.answer{min-height:77px;border:2px solid #cce1e9;border-radius:17px;background:linear-gradient(#fff,#edf6f9);box-shadow:0 4px #bbd6e1;color:#214b6b;font-size:22px;font-weight:800;padding:10px}.answer.picture{font-size:40px}.answer img{max-height:57px;max-width:85px;object-fit:contain;mix-blend-mode:multiply}.answer.correct{border-color:#25b592;background:#dcfff0}.feedback{padding:12px 0;min-height:53px;font-size:15px;font-weight:800;color:#608497;line-height:1.6}.feedback.success{color:#087f65}.letters{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:20px 0}.letters button{width:41px;height:49px;background:#fff;border:2px solid #d2e4e9;border-radius:11px;box-shadow:0 3px #d0e1e5;color:#245c7b;font-size:23px;font-weight:800}.spell{display:block;background:#eaf4f8;border:2px dashed #b7d6e0;border-radius:14px;padding:12px;min-height:65px;font-size:28px;font-weight:800;letter-spacing:3px;overflow-wrap:anywhere;margin:15px 0}.hint-row{display:flex;justify-content:space-between;gap:6px}.reward-amount{font-size:48px;font-weight:950;color:#ec9b1a;margin:14px 0}.finish-stars{font-size:45px;letter-spacing:5px;margin:25px 0 15px}.toast{position:fixed;top:25px;left:50%;transform:translateX(-50%);z-index:50;max-width:90%;width:max-content;background:#133e60f2;border:1px solid #ffffff50;border-radius:18px;color:white;padding:14px 20px;font-size:15px;box-shadow:0 8px 25px #143f6f30;text-align:center}dialog{border:2px solid white;border-radius:25px;padding:24px;width:min(90vw,390px);color:#214e6c;box-shadow:0 15px 60px #16456f55;background:#fffdf6}dialog::backdrop{background:#093e6c80;backdrop-filter:blur(4px)}dialog h2{margin-bottom:13px}dialog p{margin:10px 0 16px}dialog .dialog-art{text-align:center;font-size:70px;margin:10px 0}dialog .dialog-art img{height:110px;max-width:100%;object-fit:contain}dialog .secondary{width:100%;margin-top:12px}.about-line{border-top:1px solid #e3e9e8;margin-top:18px;padding-top:14px;font-size:13px;color:#78909e}.center{text-align:center}.empty{padding:15px 0;color:#708b9b;font-size:15px}.study-note{font-size:13px;color:#577f8e;text-align:center;margin-top:15px}.grade-label{display:flex;align-items:center;justify-content:space-between;margin:15px 0;gap:15px}.grade-label select{max-width:140px}.review-badge{font-size:12px;color:#008d89;background:#d9f9ef;padding:5px 9px;border-radius:20px}.reduce-motion *{transition:none!important}@media(max-height:740px){.hero-space{height:210px}.tokens{margin:10px 0}.panel{padding:15px}.token img{height:41px}.token .emoji{height:41px;line-height:41px}.home-footer{margin-top:14px}}@media(min-width:600px){body:before{content:'英语小岛';position:fixed;left:35px;bottom:35px;color:#ffffff55;font-size:15px;letter-spacing:3px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}@media(min-width:420px){.hero-space{height:clamp(250px,37dvh,370px)}}

/* Keep the task and wish visible on typical portrait phones. */
.hero-space{height:clamp(180px,24dvh,250px)}.home-footer{margin-top:14px}.wish{padding:11px 13px}.wish-image{width:58px;height:53px}.wish h3{font-size:15px}.wish .text-button{font-size:12px;padding:8px 2px}.wish .muted{font-size:11px}.task-heading .muted{font-size:12px}.tokens{margin:12px 0}.token img{height:43px}.token .emoji{height:43px;line-height:43px}.token{padding:7px 4px}.primary{min-height:54px;font-size:22px}.panel{padding:16px}.wish{padding:11px 13px}@media(min-width:420px){.hero-space{height:clamp(195px,26dvh,270px)}}@media(max-height:740px){.hero-space{height:175px}}

.scenery{background-size:auto 760px;background-position:center -65px;background-color:#91dac8}.sky-shade{background:linear-gradient(#008bd800 0,#008bd800 550px,#e4f5ed 900px)}@media(min-width:420px){.scenery{background-size:auto 820px;background-position:center -60px}}

.product .art:has(.product-render){height:134px;margin:0 -3px 10px}.product .art img.product-render{width:100%;height:134px;object-fit:cover;border-radius:14px;filter:none}.dialog-art img.product-render{width:210px;height:210px;object-fit:cover;border-radius:20px;filter:none}


/* Guided listen-and-copy learning */
.learn-steps{display:flex;gap:6px;padding:0;list-style:none;margin:16px 0 22px}.learn-steps li{flex:1;padding:9px 3px;border-radius:12px;background:#eef2eb;color:#899d92;font-size:11px;line-height:1.5}.learn-steps .current{background:#e5f1dc;color:#52795d;box-shadow:inset 0 0 0 1px #aec7a1}.learn-steps .done{background:#d8eee3;color:#38765c}.learn-audio-status{font-size:12px;line-height:1.8;margin:12px 0 20px;color:#69877b}.learn-input-label{display:block;font-size:13px;font-weight:700;color:#4c7568;margin:22px 0 10px}.learn-copy-input{display:block;width:100%;box-sizing:border-box;border:2px solid #c5d9bb;border-radius:15px;background:#fcfff4;text-align:center;font:600 28px/1.5 Arial,sans-serif;letter-spacing:4px;padding:12px 10px;color:#365d52;min-height:64px}.learn-copy-input:focus{outline:3px solid #e8dca5;outline-offset:2px;border-color:#7ba78e}.learn-copy-input[aria-invalid=true]{border-color:#d6a17c;background:#fff8ea}.learn-copy-input:disabled{opacity:1;background:#e6f2e1;color:#4a785e;-webkit-text-fill-color:#4a785e}.learn-copy-input::placeholder{font:400 14px/1.5 sans-serif;letter-spacing:1px;color:#96a98e}#learn-copy-help{font-size:11px;margin:9px 0 15px}#learn-copy-area[hidden]{display:none!important}#learn-next:disabled{opacity:.45;cursor:not-allowed}#learn-copy-check{margin-bottom:7px}.question-panel .learn-steps{text-align:center}

.question-panel:has(#learn-copy-form) .lesson-art{height:104px;margin:12px 0}.question-panel:has(#learn-copy-form) .lesson-art img{height:100px}.question-panel:has(#learn-copy-form) .english-word{font-size:38px;margin:8px 0}.question-panel:has(#learn-copy-form) .learn-audio-status{margin:10px 0 12px}.question-panel:has(#learn-copy-form) .learn-steps{margin:12px 0}.learn-copy-input{scroll-margin-block:100px}

.learn-letter-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;min-height:48px;padding:8px 3px;border:2px solid #c8dcbf;border-radius:14px;background:#f5faee;scroll-margin-block:100px}.learn-letter-slots span{display:grid;place-items:center;min-width:21px;min-height:28px;font:700 25px/1.2 Arial,sans-serif;color:#385f54;border-bottom:2px solid #a9c3a1}.learn-letter-slots[aria-invalid=true]{border-color:#d6a17c;background:#fff5e5}.learn-letter-slots.correct{border-color:#83b898;background:#e0f2df}.learn-letter-bank{display:grid;grid-template-columns:repeat(auto-fit,minmax(44px,1fr));gap:8px;margin:15px 0 12px}.learn-letter-bank button{min-height:48px;border-radius:12px;border:2px solid #d1dcb8;background:linear-gradient(#fffef0,#f0e8c9);color:#476855;font:700 25px/1 Arial,sans-serif;box-shadow:0 3px #c3b98e}.learn-letter-bank button.used{opacity:.25;box-shadow:none}.learn-letter-tools{display:flex;gap:10px}.learn-letter-tools button{flex:1;min-height:44px;font-size:13px;padding:8px}.learn-letter-tools button:disabled{opacity:.4}

/* Adventure home: a clear learning entry, compact wishes and real game previews. */
.front-mode{background:linear-gradient(180deg,#d5eee9 0,#eaf3e6 50%,#f5f5e8 100%)}
.front-mode .scenery,.front-mode .sky-shade{display:none}
.front-mode header{padding:calc(12px + env(safe-area-inset-top)) 19px 0}
.front-mode main{padding:0 15px 104px;min-height:calc(100dvh - 78px)}
.front-greeting{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:19px 2px 12px}
.front-greeting>div>span{font-size:9px;color:#6d9a8b;font-weight:800;letter-spacing:1.5px}
.front-greeting h1{margin:4px 0 0;font-size:21px;line-height:1.3;letter-spacing:0;color:#2d625a;text-shadow:0 2px #fff7}
.front-grade{background:#fffef1c9;border:1px solid white;border-radius:14px;padding:9px 10px;min-height:44px;color:#618376;font-size:11px;white-space:nowrap;font-weight:800}
.front-postcard{height:160px;position:relative;border:2px solid #fff;border-radius:25px;overflow:hidden;background:#b3dddf url('assets/island.png') 66% 52%/cover;box-shadow:0 6px 18px #719a8524;margin-bottom:15px;isolation:isolate}
.front-postcard:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#eef8e9fa 0,#edf7e9eb 27%,#f2f9e74a 61%,#eff6e300 80%);z-index:-1}
.front-postcard-copy{padding:18px 17px;max-width:73%;position:relative}
.front-postcard-copy>span{font-size:9px;color:#638b71;display:inline-block;background:#ffffffa8;border:1px solid #fff9;border-radius:7px;padding:4px 6px;font-weight:800}
.front-postcard-copy h2{font-size:24px;line-height:1.25;color:#356756;letter-spacing:1px;margin:9px 0 7px;font-weight:950;text-shadow:0 2px #fff5}
.front-postcard-copy p{font-size:10px;line-height:1.5;color:#749174}
.front-postcard-tag{position:absolute;bottom:10px;right:9px;border:1px solid #ffffff8c;border-radius:10px;background:#617c5ca3;color:#fffdef;font-size:8px;backdrop-filter:blur(7px);padding:5px 7px}
.front-learning{border:2px solid white;border-radius:24px;background:linear-gradient(135deg,#fffefa,#fcfcf1);box-shadow:0 5px 0 #b1c6ad30,0 8px 22px #7d9a811c;padding:16px;margin-bottom:14px;position:relative;overflow:hidden}
.front-learning:before{content:'';height:4px;position:absolute;top:0;left:24px;right:24px;border-radius:0 0 9px 9px;background:linear-gradient(90deg,#a5dcc6,#e6dba2)}
.front-learning-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.front-learning-title>div>span{font-size:9px;font-weight:800;color:#77a38c;letter-spacing:1px}
.front-learning-title h2{color:#385e52;font-size:19px;margin:4px 0 0;line-height:1.3}
.front-learning-title>small{background:#ebf3e6;border:1px solid #dce9d1;border-radius:10px;padding:6px 8px;font-size:10px;font-weight:800;color:#749264;white-space:nowrap}
.front-learning>p{font-size:11px;color:#91a08b;margin:7px 0 12px;line-height:1.5}
.front-word-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:11px 0 13px}
.front-word{min-width:0;text-align:center;background:#edf4e93b;border:1px solid #e6eddf;border-radius:15px;padding:7px 3px 6px}
.front-word>span{display:grid;place-items:center;height:35px;font-size:28px;line-height:35px}
.front-word img{max-width:58px;max-height:35px;object-fit:contain;mix-blend-mode:multiply}
.front-word .emoji{font-size:28px;line-height:35px}
.front-word>b{display:block;color:#4b7463;font-size:17px;line-height:1.3;font-family:Arial,sans-serif;margin:5px 0 1px;overflow-wrap:anywhere}
.front-word>small{display:block;font-size:9px;color:#95a58e}
.front-learning .front-start{display:flex;align-items:center;justify-content:center;gap:12px;min-height:53px;border:2px solid #b7ead0;border-radius:16px;font-size:19px;font-weight:900;letter-spacing:1px;color:#fffdf2;background:linear-gradient(#5fc2a0,#359c7d);box-shadow:0 4px #287b6540,inset 0 1px #c6ffe3;text-shadow:0 1px #267a62;width:100%}
.front-start>span:last-child{font-size:23px;line-height:1}
.front-learn-footer{display:flex;justify-content:center;gap:7px;color:#9baf95;font-size:9px;margin-top:12px;align-items:center}
.front-learn-footer i{font-size:9px;font-style:normal;color:#bccbb3}
.front-session-progress{display:flex;gap:5px;margin:10px 0 0}
.front-session-progress i{height:4px;flex:1;background:#e6ecd9;border-radius:5px}
.front-session-progress i.done{background:#81bea1}
.front-session-progress i.current{background:#e2c678}
.front-wish{display:flex;align-items:center;gap:8px;background:#fffcf0b8;border:1px solid #fff;border-radius:21px;padding:10px 9px;min-height:88px;margin-bottom:18px;box-shadow:0 3px 12px #759a8010}
.front-wish-art{width:60px;flex-shrink:0;height:63px;background:#f0f0d7;border-radius:14px;overflow:hidden;display:grid;place-items:center}
.front-wish-art img{width:65px;height:65px;object-fit:cover;mix-blend-mode:multiply}
.front-wish-art .emoji{font-size:35px}
.front-wish-copy{flex:1;min-width:0}
.front-wish-copy>span{font-size:8px;display:block;letter-spacing:.5px;color:#a49770}
.front-wish-copy>b{font-size:12px;color:#6a7555;display:block;margin:4px 0 7px;line-height:1.3}
.front-wish-progress{display:flex;align-items:center;gap:7px}
.front-wish-progress>.bar{height:6px;flex:1;background:#e7ead5;box-shadow:none}
.front-wish-progress small{font-size:9px;white-space:nowrap;color:#9b9975}
.front-wish>button{font-size:10px;color:#a28a52;background:#f2e9ce;border:1px solid #e9dfbf;border-radius:11px;min-height:44px;padding:7px;white-space:nowrap}
.front-wish>button>span{display:inline-block;margin-left:4px;color:#b09d71}
.front-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 3px 11px}
.front-section-title>div>span{font-size:8px;letter-spacing:1.6px;color:#8da88b;font-weight:800}
.front-section-title h2{font-size:19px;color:#436b59;margin-top:3px}
.front-section-title>button{font-size:10px;color:#739277;background:#ffffff80;border:1px solid #fff;border-radius:12px;padding:8px;min-height:44px}
.front-section-title>button>b{font-size:9px;background:#e6edda;border-radius:5px;padding:2px 3px;font-weight:600}
.front-featured-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.front-game-card{display:block;text-align:left;min-width:0;padding:0;border:2px solid #fff;border-radius:19px;overflow:hidden;background:#f9fcf2;box-shadow:0 4px 0 #94b4a21a,0 4px 12px #72917d12;color:#4c715d;transition:box-shadow .15s}
.front-game-card .front-game-art{height:94px;display:block;position:relative;overflow:hidden;background:#c9e3d6}
.front-game-art>img{display:block;object-fit:cover;object-position:center;width:100%;height:100%;transition:transform .25s}
.front-game-art>small{position:absolute;top:7px;left:7px;border:1px solid #fff9;border-radius:7px;padding:3px 5px;background:#fffef3db;color:#6c8872;font-size:8px;backdrop-filter:blur(5px)}
.front-game-copy{display:block;padding:10px 9px;position:relative}
.front-game-copy>b{display:block;font-size:13px;color:#4c6b5a;padding-right:15px;line-height:1.3}
.front-game-copy>small{display:block;color:#8fa08a;font-size:9px;line-height:1.5;margin-top:4px;min-height:27px;padding-right:8px}
.front-game-copy>i{font-style:normal;font-size:15px;position:absolute;right:9px;top:9px;color:#89a98f}
.front-game-card.ice .front-game-copy{background:#f2f8f4}.front-game-card.sage .front-game-copy{background:#f3f6e8}.front-game-card.aqua .front-game-copy{background:#edf7ef}.front-game-card.peach .front-game-copy{background:#fcf4e8}
.front-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:15px 4px 0;padding-top:12px;border-top:1px solid #dbe5d0;color:#92a18a;font-size:9px}
.front-bottom button{background:transparent;color:#839881;font-size:10px;padding:8px 4px;min-height:44px}
.front-game-dialog{position:fixed;inset:auto 0 0;width:min(480px,100%);max-width:100%;max-height:82dvh;margin:0 auto;border:1px solid #fff;border-radius:27px 27px 0 0;padding:0 0 env(safe-area-inset-bottom);background:#f4f6e9;color:#4a705c;overflow:hidden}
.front-game-dialog[open]{display:flex;flex-direction:column}
.front-game-dialog::backdrop{background:#2a534b66;backdrop-filter:blur(3px)}
.front-gallery-handle{flex-shrink:0;width:36px;height:4px;border-radius:5px;background:#c6d9c7;margin:10px auto 0}
.front-gallery-header{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:15px 17px 12px;flex-shrink:0}
.front-gallery-header small{font-size:10px;color:#91aa8a}
.front-gallery-header h2{font-size:21px;color:#4c755d;margin:3px 0 0;line-height:1.3}
.front-gallery-header>button{min-height:44px;min-width:44px;border-radius:14px;background:#e4ecda;color:#7e9a7f;font-size:16px}
.front-gallery-tabs{display:flex;gap:5px;padding:0 15px 12px;flex-shrink:0}
.front-gallery-tabs>button{flex:1;min-width:0;min-height:42px;border-radius:12px;background:#e8eddd;color:#8a9f7f;font-size:11px;font-weight:700}
.front-gallery-tabs>button[aria-pressed=true]{background:#6baa89;color:#fffdf1;box-shadow:0 3px #4a8a6d25}
.front-gallery-list{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:0 15px 5px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;scrollbar-width:thin;scrollbar-color:#bbd2b6 transparent}
.front-gallery-list>button{position:relative;border:1px solid #fff;background:linear-gradient(145deg,#fffef6,#ebf2e3);padding:14px 9px;border-radius:17px;text-align:left;min-width:0;min-height:120px;color:#527960;box-shadow:0 2px #adc1a320}
.front-gallery-list>button>span{display:block;font-size:28px;margin-bottom:8px;line-height:1.2;filter:drop-shadow(0 2px 1px #52785326)}
.front-gallery-list b{display:block;font-size:13px;line-height:1.3}
.front-gallery-list small{display:block;font-size:10px;color:#8c9f82;line-height:1.6;margin-top:5px;padding-right:6px}
.front-gallery-list i{font-style:normal;position:absolute;right:12px;top:18px;font-size:19px;color:#a4b69a}
.front-game-dialog .front-gallery-note{text-align:center;font-size:9px;color:#95a98b;padding:11px 5px 14px;margin:0;flex-shrink:0;line-height:1.5}
@media(max-width:350px){.front-greeting h1{font-size:18px}.front-grade{font-size:10px;padding:8px}.front-postcard{height:145px}.front-postcard-copy{padding:14px}.front-postcard-copy h2{font-size:22px}.front-learning{padding:13px}.front-learning-title h2{font-size:17px}.front-learning-title>small{font-size:9px;padding:5px}.front-featured-grid{gap:8px}.front-game-copy{padding:9px 7px}.front-game-copy>b{font-size:12px}.front-wish-art{width:49px;height:56px}.front-wish-art img{width:58px;height:58px}.front-wish>button{font-size:9px;padding:6px}.front-gallery-header h2{font-size:19px}}
@media(hover:hover){.front-game-card:hover .front-game-art>img{transform:scale(1.035)}}
@media(prefers-reduced-motion:reduce){.front-game-art>img{transition:none}}
@media(max-height:740px){.front-greeting{margin-top:13px;margin-bottom:9px}.front-postcard{height:128px;margin-bottom:12px}.front-postcard-copy{padding-top:12px;padding-bottom:12px}.front-postcard-copy h2{font-size:21px;margin-top:7px;margin-bottom:5px}.front-learning{padding-top:13px;padding-bottom:13px}.front-word-row{margin-top:8px;margin-bottom:11px}.front-word{padding-top:5px;padding-bottom:5px}.front-word>span{height:30px}.front-word img{max-height:30px}.front-word .emoji{font-size:26px;line-height:30px}.front-learn-footer{margin-top:10px}}

/* Personal group-photo poster: keep both faces in the clear right-hand area. */
.front-postcard.family-photo-poster{height:180px;background-image:url('assets/home-poster-photo-v1.png');background-position:center;background-size:cover}
.family-photo-poster:before{background:linear-gradient(90deg,#edf8e8f5 0,#edf8e8eb 24%,#edf8e8a3 39%,#edf8e81c 51%,transparent 57%)}
.family-photo-poster .front-postcard-copy{max-width:51%;padding-left:14px;padding-right:3px;padding-top:22px}
.family-photo-poster .front-postcard-copy>span{font-size:8px;letter-spacing:0;padding:4px 5px;white-space:nowrap}
.family-photo-poster .front-postcard-copy h2{font-size:21px;letter-spacing:0;line-height:1.3;margin-top:10px}
.family-photo-poster .front-postcard-copy p{font-size:9px;line-height:1.5}
.family-photo-poster .front-postcard-tag{font-size:7px;bottom:7px;right:7px;padding:4px 6px;background:#68885d9c}
@media(max-width:350px){.front-postcard.family-photo-poster{height:145px}.family-photo-poster .front-postcard-copy{padding-top:14px;padding-left:11px;max-width:51%}.family-photo-poster .front-postcard-copy h2{font-size:18px}.family-photo-poster .front-postcard-copy>span{font-size:7px}.family-photo-poster .front-postcard-copy p{font-size:8px}}
@media(max-height:740px){.front-postcard.family-photo-poster{height:118px}.family-photo-poster .front-postcard-copy{padding-top:11px}.family-photo-poster .front-postcard-copy h2{font-size:18px;margin-top:7px;margin-bottom:5px}.family-photo-poster .front-postcard-copy>span{font-size:7px}.family-photo-poster .front-postcard-copy p{font-size:8px}}