*{box-sizing:border-box} :root{color-scheme:light;--ink:#635242;--purple:#9476cf;--cream:#fff7df}body{margin:0;background:#eeedf7;color:var(--ink);font-family:system-ui,"Microsoft YaHei",sans-serif}button,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #7560bc;outline-offset:3px}[hidden]{display:none!important}.shell{max-width:1200px;margin:auto;display:flex;justify-content:center;align-items:center;gap:85px;min-height:100svh;padding:28px}.intro{width:375px}.brand{font-size:13px;font-weight:850;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand-icon{background:#c9b6ef;border:2px solid #b59ddc;border-radius:14px;padding:8px 12px;font-size:27px;color:white}.eyebrow{display:block;font-size:10px;letter-spacing:2px;margin-top:70px;color:#9988b5}.intro h1{font-family:Georgia,serif;font-weight:500;font-size:42px;line-height:1.14;color:#514564}.description{max-width:295px;color:#8b8194;line-height:1.8;margin:24px 0 0}.legend{line-height:2.8;font-size:13px;margin-top:24px}.legend span{font-size:10px;color:#ad96d6;margin-right:14px;font-weight:bold}.sample-note{margin-top:48px;color:#95899f;font-size:10px;line-height:1.9;letter-spacing:1px}.game{position:relative;width:430px;max-width:100%;min-height:810px;background:#fff6df;border-radius:35px;overflow:hidden;border:7px solid #fffdf6;box-shadow:0 22px 70px #8c7ca633}.awning{position:absolute;inset:0 0 auto;height:95px;background:repeating-linear-gradient(90deg,#edcd79 0 53px,#fae5a7 53px 106px);border-bottom:10px solid #d4af68;border-radius:0 0 32px 32px;opacity:.65}header{position:relative;display:flex;align-items:center;justify-content:space-between;padding:23px 19px 12px}.round{width:42px;height:43px;border:2px solid #d6b775;border-bottom-width:5px;border-radius:15px;background:#fff9df;font-size:26px;font-weight:bold;color:#9b80c8}.level-plaque{background:#bd8759;color:#fff9df;border:3px solid #dcaa70;border-bottom:5px solid #a77348;border-radius:19px;padding:8px 22px;font-weight:850;font-size:16px;letter-spacing:1px;text-shadow:0 2px #865f46}.settings{position:relative;display:flex;justify-content:space-between;align-items:center;padding:7px 21px}.settings select{background:#fffdf1;border:1px solid #e5d6ad;border-radius:9px;max-width:150px;padding:6px 10px;font-size:11px}.demo-tag{font-size:9px;letter-spacing:1px;color:#a29170}.island-art{height:290px;position:relative;margin:5px 18px;overflow:hidden;border-radius:28px;background:linear-gradient(#ddd9fa,#e3e5fb 72%,#cee2bf)}.sun{position:absolute;right:38px;top:25px;color:#f2c84e;font-size:53px}.cloud{position:absolute;width:75px;height:22px;border-radius:30px;background:#fff8}.cloud:before{content:'';position:absolute;left:16px;top:-12px;width:38px;height:30px;border-radius:50%;background:#ffffff99}.one{top:58px;left:25px}.two{top:124px;right:-15px}.hill{position:absolute;border-radius:50%;width:350px;height:160px;bottom:-70px;background:#a9d082;left:-90px}.hill.front{left:100px;bottom:-100px;background:#80ba70}.hero-tile{position:absolute;display:grid;place-items:center;width:108px;height:123px;border:3px solid #fff8;border-bottom:7px solid #0002;border-radius:25px;box-shadow:0 13px 0 #6b4f6620;top:109px}.hero-tile img{width:85px}.pink{left:32px;transform:rotate(-14deg);background:#f4b6c6}.lilac{left:136px;top:80px;z-index:2;background:#c8b0f2;transform:rotate(8deg);align-content:center;gap:7px}.lilac span{font-size:13px}.lilac strong{font-size:29px}.green{right:16px;top:157px;transform:rotate(13deg);background:#b8df8d}.spark{position:absolute;font-size:30px;color:#fff8bc}.a{left:130px;top:35px}.b{left:26px;bottom:14px}.home-copy{text-align:center;padding:8px 25px}.pill{display:inline-block;padding:4px 14px;border-radius:20px;background:#e6edc9;font-size:11px;font-weight:bold;color:#71864b}.home-copy h2{font:700 31px Georgia,serif;margin:13px 0}.home-copy p{font-size:12px;line-height:1.7;color:#9a8c70}.primary{border:2px solid #89b354;border-bottom:5px solid #6f9b40;background:#b5dc7b;color:#415b28;border-radius:16px;padding:13px 20px;font-weight:800;width:100%;box-shadow:inset 0 2px #e2f4bd}.primary:active{transform:translateY(2px)}.map{display:flex;justify-content:center;gap:42px;margin:26px 0 14px;position:relative}.map:before{content:'';height:4px;background:#dec9a0;position:absolute;top:25px;width:190px}.node{position:relative;border:3px solid #dcc698;border-bottom-width:5px;background:#fff3c5;border-radius:50%;width:54px;height:56px;font-size:20px;font-weight:850}.node.done{background:#bddf90;border-color:#95b665}.node:disabled{filter:grayscale(.5);opacity:.6}.bottom-note{text-align:center;font-size:10px;color:#a3977b;padding:0 20px}.progress-row{display:flex;justify-content:space-between;padding:10px 22px 5px;font-size:11px;font-weight:700}.progress{margin:3px 22px;height:8px;border-radius:8px;background:#eddfbc;overflow:hidden}.progress i{display:block;height:100%;background:#b79be4;border-radius:8px;transition:width .3s}.board-wrap{position:relative;height:410px;margin-top:0}.board{position:absolute;width:344px;height:397px;left:50%;top:0;transform:translateX(-50%);transform-origin:top center}.board:before{content:'';position:absolute;inset:40px 0 0;background:radial-gradient(ellipse,#f2e7c7 30%,transparent 72%)}.tile{position:absolute;width:88px;height:92px;border:2px solid #c6b17f;border-bottom:6px solid #bda771;border-radius:17px;background:#fffdf0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:4px;box-shadow:0 5px 8px #6e533a25;transition:filter .15s,transform .15s;overflow:hidden}.tile.image{background:#fff9dc}.tile img{width:55px;height:55px;pointer-events:none}.tile .gloss{font-size:11px;line-height:1.1;max-width:100%;overflow-wrap:anywhere;text-align:center}.tile .pinyin{font-size:11px;color:#806398}.tile .hanzi{font-size:25px;font-weight:700}.tile.text{background:#ebdefc;border-color:#bc9dd9;border-bottom-color:#a98bc7}.tile.blocked{filter:brightness(.67) saturate(.5)}.tile:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 9px 12px #6e533a30}.tile.hinted{outline:4px solid #edbe4a;animation:pulse .8s infinite alternate}.board-decor{position:absolute;font-size:35px;color:#c3d796;bottom:30px;pointer-events:none}.board-decor.left{left:12px}.board-decor.right{right:12px;color:#efcb68}.tray-panel{background:#e4bd83;padding:10px 13px 14px;border-top:3px solid #f4dca6;border-bottom:3px solid #cfa66e;box-shadow:inset 0 2px 10px #cbab7755}.tray-label{display:flex;justify-content:space-between;font-size:9px;font-weight:800;color:#8d6745;padding:0 3px 7px;letter-spacing:1px}.tray{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}.slot{height:68px;border-radius:10px;background:#f9e7ad;border:2px solid #d4ad70;box-shadow:inset 0 2px 3px #ab824522;position:relative;min-width:0}.slot .tile{width:100%;height:100%;border-radius:8px;box-shadow:none;inset:0;padding:2px;border-width:1px 1px 3px}.slot .tile img{width:36px;height:36px}.slot .tile .gloss{font-size:8px}.slot .tile .pinyin{font-size:8px}.slot .tile .hanzi{font-size:18px}.learning{margin:13px 16px 6px;min-height:75px;border:2px solid #eadbb4;border-radius:17px;background:#fffcf2;display:flex;align-items:center;justify-content:space-around;padding:7px 12px;gap:8px}.learning img{width:44px;height:44px}.learning .meaning{font-size:14px;overflow-wrap:anywhere;max-width:112px}.learning .chinese{text-align:center;flex-shrink:0}.learning small{display:block;font-size:11px;color:#a480b7}.learning strong{font-size:24px}.speaker{border:0;border-bottom:4px solid #9b80c5;background:#cdb7ed;border-radius:13px;width:43px;height:43px;font-size:23px;flex-shrink:0}.empty-learning{color:#aa9b7b;font-size:11px;text-align:center}.game-footer{display:flex;justify-content:space-between;align-items:center;padding:2px 18px 12px;gap:10px}.game-footer button{background:transparent;border:0;color:#9980b5;font-size:11px;padding:8px}.game-footer span{font-size:9px;color:#a79c85}.modal-backdrop{position:absolute;inset:0;z-index:100;background:#54463266;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px}.modal{width:100%;max-height:90%;overflow:auto;background:#fff9e5;border:5px solid #f5dba1;border-radius:30px;padding:23px;text-align:center;box-shadow:0 12px #59452b22}.medallion{margin:auto;width:80px;height:80px;background:#ffdf6c;border:5px solid #f2bd54;border-radius:50%;display:grid;place-items:center;font-size:41px;color:#ae7b32}.modal h2{font-size:25px;margin:15px 0 8px}.modal p{font-size:12px;line-height:1.7;color:#968468}.modal button{margin-top:9px;width:100%;padding:12px;border-radius:12px;border:1px solid #dfccaa;background:#f8edd1;font-weight:650;font-size:12px}.modal button.primary{background:#b5dc7b;border-color:#8cac60}.modal button:disabled{opacity:.5}.modal label{font-size:11px;display:block;margin:12px 0}.modal small{display:block;font-size:10px;color:#9a876b;line-height:1.6;margin-top:10px}#toast{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);z-index:200;background:#645575;color:white;font-size:12px;border-radius:12px;padding:10px 16px;max-width:90%;text-align:center;pointer-events:none;opacity:0;transition:opacity .2}#toast.show{opacity:1}@keyframes pulse{to{outline-color:#fff4a7}}@media(max-width:850px){.intro{display:none}.shell{padding:15px;min-height:100svh}.game{min-height:800px}}@media(max-width:480px){body{background:#fff6df}.shell{padding:0;display:block}.game{width:100%;border:0;border-radius:0;min-height:100svh;padding-bottom:env(safe-area-inset-bottom)}header{padding-top:16px}.board-wrap{height:396px}.home-copy h2{font-size:30px}}@media(max-width:370px){.board{transform:translateX(-50%) scale(.93)}.board-wrap{height:370px}.slot{height:62px}.settings{padding-top:3px}}@media(max-height:760px) and (max-width:480px){.board{transform:translateX(-50%) scale(.83)}.board-wrap{height:335px}.learning{min-height:64px;margin-top:8px}.game-footer{padding-bottom:4px}.progress-row{padding-top:4px}.settings{padding-top:0}.island-art{height:230px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Match translated labels to Chinese text size; allow two-line meanings. */
.tile.image{gap:2px;padding:3px}
.tile.image img{width:42px;height:32px;min-height:12px;flex-shrink:1;object-fit:contain}
.tile .gloss{font-size:25px;line-height:1;font-weight:600;flex-shrink:0;overflow-wrap:anywhere}
.slot .tile.image{padding:1px;gap:1px}
.slot .tile.image img{width:25px;height:23px;min-height:8px;flex-shrink:1;object-fit:contain}
.slot .tile .gloss{font-size:18px;line-height:1;font-weight:600}

.map{gap:25px}.map:before{width:240px}
.celebration{position:absolute;inset:0;z-index:150;overflow:hidden;pointer-events:none}
.celebration i{position:absolute;left:var(--x);top:-25px;width:9px;height:17px;border-radius:3px;animation:confetti-fall 2.7s var(--delay) ease-in forwards}
.modal-backdrop:not([hidden]) .medallion{animation:celebrate-pop .65s ease-out}
.reshuffling{opacity:.2;transition:opacity .35s}
@keyframes confetti-fall{0%{transform:translate(0,-20px) rotate(0);opacity:1}85%{opacity:1}100%{transform:translate(var(--drift),920px) rotate(var(--spin));opacity:0}}
@keyframes celebrate-pop{0%{transform:scale(.3) rotate(-20deg)}60%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){.celebration i{animation:none;top:var(--x);opacity:.5}.modal-backdrop:not([hidden]) .medallion{animation:none}}

/* Larger pinyin in the board, tray and learning strip. */
.tile .pinyin{font-size:17px;line-height:1.15;font-weight:600;max-width:100%;overflow-wrap:anywhere;text-align:center}
.slot .tile .pinyin{font-size:12px;line-height:1.1}
.learning small{font-size:16px;line-height:1.2;font-weight:600}

/* Related site resources sit below the game, outside its play area. */
.study-links{max-width:960px;margin:0 auto;padding:12px 28px 32px;color:var(--ink)}
.study-links h2{margin:0 0 8px;font-size:19px;font-weight:700}
.study-links p{margin:0 0 16px;font-size:13px;line-height:1.6;color:#756579}
.study-links nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.study-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:56px;padding:14px;border:1px solid #d8c8e5;border-radius:14px;background:#fffcf2;color:#685181;font-size:14px;line-height:1.5;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.study-links a::after{content:'↗';flex-shrink:0;text-decoration:none}
.study-links a:hover{background:#eee3fb;border-color:#a98bc7}
.study-links a:focus-visible{outline:3px solid #7560bc;outline-offset:3px}
@media(max-width:850px){.study-links{max-width:460px;padding:24px 18px 30px}.study-links nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

.island-art{display:grid;place-items:center}.how-to-art{display:block;width:100%;height:100%;object-fit:cover}

.collect-hint{position:absolute;top:auto;bottom:0;left:50%;transform:translate(-50%,50%);z-index:200;background:#645575;color:#fff;font-size:12px;border-radius:12px;padding:10px 16px;max-width:90%;width:max-content;text-align:center;line-height:1.4;box-shadow:0 5px 15px #40344b44;pointer-events:none}

.login-required-modal{width:min(420px,100%);padding:24px 22px 22px;border-radius:28px}
.login-required-modal .medallion,.login-required-modal p{display:none}
.login-required-modal h2{font-size:24px;margin:0 0 20px;text-transform:none}
.login-required-modal #modalActions{display:grid;gap:10px}
.login-required-modal #modalActions button{margin:0;min-height:52px;font-size:16px;font-weight:750;border:2px solid #d4c392;border-bottom-width:5px;border-radius:16px;background:#fffdf3;color:#80699d}
.login-required-modal #modalActions button.primary{background:#bddc84;border-color:#92b360;color:#4b6033}