:root{font-family:"PingFang SC","Microsoft YaHei",sans-serif;color:#604e5c;background:#fff9ee}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 5% 5%,#ffeda7,transparent 25%),radial-gradient(circle at 95% 25%,#ffd9c9,transparent 25%),#fff9ee}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #d9764c;outline-offset:3px}button:disabled{opacity:.45;cursor:default}[hidden]{display:none!important}.page{max-width:1080px;margin:auto;padding:20px 28px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}header a{font-size:19px;font-weight:800;color:#614856;text-decoration:none}header button,.actions button,.voice-box button{border:2px solid #f0d7bf;border-radius:15px;background:white;color:#956852;padding:12px 16px;font-weight:700}.hero{height:210px;border:5px solid white;border-radius:30px;position:relative;background:#a7dcea url('/game/twentyfour/twentyfour-hero.jpg') center 54%/cover;box-shadow:0 10px 28px #d7996328;overflow:hidden}.hero-copy{position:absolute;left:25px;top:23px;padding:14px 20px;border-radius:20px;background:#fffbf0ee}.hero small,.heading small,#levelName{color:#df795c;font-weight:800;letter-spacing:.08em}.hero h1{font-size:clamp(30px,5vw,45px);margin:6px 0;color:#664c62}.hero h1 em,.title-row em{font-style:normal;color:#f17963}.hero p,.heading p,.title-row p{margin:5px 0;color:#927e83}.hero-note{position:absolute;right:22px;bottom:15px;padding:9px 16px;border-radius:30px;background:#fff8dd;color:#a26e55;font-weight:700;transform:rotate(-3deg)}.panel{margin-top:24px;background:white;border:3px solid #f7d8bd;border-radius:28px;padding:26px;box-shadow:0 8px 0 #f3e0cb,0 14px 30px #aa775115}.heading,.game-top,.title-row{display:flex;justify-content:space-between;align-items:center;gap:15px}.heading h2,.title-row h2{margin:8px 0;font-size:25px}.heading>span,.badge{border-radius:20px;background:#e4f5df;color:#65936b;padding:9px 14px;font-weight:800}.difficulties{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.difficulties button{background:#fffaf1;border:3px solid #f1e2d4;border-radius:20px;padding:18px;text-align:left;color:#725b64}.difficulties button.chosen{border-color:#ee9a75;background:#fff0dd;box-shadow:0 4px 0 #f0d2bd}.difficulties b,.difficulties span{display:block}.difficulties b{font-size:20px}.difficulties span{font-size:14px;margin-top:7px;color:#987e7d}.levels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.levels button{border:2px solid #e1efd8;border-radius:18px;padding:17px 8px;background:#f6fff1;color:#66865e;font-weight:800}.levels small{display:block;margin-top:8px;font-weight:500}.plain{background:none;border:0;color:#ce8263;font-weight:800;padding:10px 0}.target{background:#fff3cc;border-radius:50%;width:82px;height:82px;display:grid;place-content:center;text-align:center;color:#bb8a4c;font-size:12px;flex:none}.target strong{display:block;font-size:32px;line-height:1;color:#ef8c63}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.cards button{min-height:112px;background:#fffaf0;border:3px solid #f5d9ba;border-radius:20px;color:#72546c;font-size:42px;font-weight:900;box-shadow:0 5px 0 #efddc9}.cards button.selected{border-color:#f18d6a;background:#fff0d8;transform:translateY(-3px)}.operators{display:flex;justify-content:center;gap:12px}.operators button{width:60px;height:55px;border:2px solid #dcebd5;border-radius:15px;background:#eff9e9;color:#6ca16c;font-size:28px;font-weight:800}.operators button.selected{background:#83bd83;color:white}.selection{text-align:center;margin:18px 0;color:#ac8b83}.actions{display:flex;flex-wrap:wrap;gap:10px}.actions .primary,.next{background:#f58f6d;color:white;border:0;box-shadow:0 4px 0 #df795b}.voice-box,.hint{background:#fff1c8;border-radius:15px;padding:14px;margin-top:14px;line-height:1.6}.voice-box button{margin:6px}.status{min-height:24px;color:#9b7870;font-weight:700}.history{background:#f5faef;border-radius:16px;padding:14px 18px;line-height:1.8;color:#748b70}.bottom{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.next{border-radius:15px;padding:13px 23px;font-weight:800}.next:disabled{opacity:.5}footer{text-align:center;padding:32px;color:#b89e98;font-size:14px}@media(max-width:600px){.page{padding:14px}.hero{height:165px}.hero-copy{top:15px;left:14px;padding:10px 14px}.hero-note{font-size:12px;right:10px;bottom:8px}.panel{padding:17px;margin-top:15px}.heading>span{display:none}.difficulties{grid-template-columns:1fr;gap:8px}.difficulties button{padding:11px 15px}.difficulties span{margin-top:2px}.levels{grid-template-columns:repeat(2,1fr)}.cards{gap:6px}.cards button{min-height:82px;font-size:32px;border-radius:14px}.operators{gap:7px}.operators button{width:53px}.actions button{flex:1 1 42%;padding:12px 7px}.title-row h2{font-size:21px}.target{width:66px;height:66px}.badge{font-size:12px}}
/* Storybook level cards, matching the illustrated word-game collection. */
.level-heading{display:flex;align-items:center;justify-content:space-between;margin:34px 0 20px}.level-heading small{font-size:12px;font-weight:800;letter-spacing:.08em;color:#df795c}.level-heading h3{margin:8px 0;font-size:25px;color:#604e5c}.level-heading p{margin:0;color:#a28b90;font-size:14px}.level-heading>span{padding:9px 16px;border-radius:24px;background:#fff0c8;color:#d19667;font-size:13px;font-weight:800}.levels{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.levels .level-card{display:flex;flex-direction:column;overflow:hidden;min-width:0;padding:0;text-align:left;border:2px solid #f0e1d3;border-radius:20px;background:#fff;color:#604e5c;box-shadow:0 6px 0 #f2e4d8;transition:transform .18s,box-shadow .18s}.levels .level-card:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 9px 0 #f2e4d8}.levels .level-card:disabled{opacity:1;cursor:not-allowed}.level-art{display:block;position:relative;width:100%;height:154px;background-size:400% auto;background-repeat:no-repeat;background-color:#e1f3e8}.level-card:disabled .level-art{opacity:.62}.level-number{position:absolute;top:10px;left:10px;padding:6px 10px;background:#fffbf0ef;border-radius:14px;color:#ad785d;font-size:12px;font-weight:800}.level-copy{display:flex;align-items:flex-start;flex-direction:column;gap:8px;padding:17px 15px 15px;min-height:124px}.level-copy strong{font-size:19px;line-height:1.25}.level-description{color:#a38b90;font-size:13px;font-weight:500;line-height:1.4}.level-progress{margin-top:auto;border-radius:20px;background:#e8f5e5;padding:6px 10px;color:#78a478;font-size:12px;font-weight:800}.level-card:disabled .level-copy{color:#95878d}.level-card:disabled .level-progress{background:#f4f1ee;color:#aaa09d}@media(max-width:700px){.levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.level-art{height:120px}.level-copy{padding:12px;min-height:116px}.level-copy strong{font-size:16px}.level-description{font-size:12px}.level-heading>span{display:none}}@media(max-width:380px){.level-art{height:96px}.level-copy{padding:10px;min-height:115px}.level-progress{font-size:11px}}
.level-art{background-image:url('/game/twentyfour/twentyfour-levels.jpg')}.level-art-1{background-position:0% center}.level-art-2{background-position:11% center}.level-art-3{background-position:22% center}.level-art-4{background-position:33% center}.level-art-5{background-position:44% center}.level-art-6{background-position:56% center}.level-art-7{background-position:67% center}.level-art-8{background-position:78% center}.level-art-9{background-position:89% center}.level-art-10{background-position:100% center}.header-tools{display:flex;gap:8px}.header-tools button{font-size:13px}@media(max-width:480px){.header-tools button{font-size:11px;padding:9px 8px}header a{font-size:15px}}

@media(max-width:600px){body.playing .hero{display:none}body.playing .page{padding:8px 12px}body.playing header{margin-bottom:4px}body.playing .panel{margin-top:6px;padding:12px 14px;border-radius:20px}body.playing .game-top{gap:5px;align-items:center}body.playing .game-top label{font-size:11px;white-space:nowrap}body.playing .game-top select{max-width:72px;font-size:12px}body.playing .game-top .plain{font-size:13px;white-space:nowrap}body.playing .badge{font-size:11px;padding:7px 8px;white-space:nowrap}body.playing .title-row{gap:6px}body.playing .title-row h2{margin:3px 0;font-size:20px}body.playing .title-row p{font-size:12px;line-height:1.3}body.playing .target{width:54px;height:54px}body.playing .target strong{font-size:26px}body.playing .cards{margin:10px 0}body.playing .cards button{min-height:65px;font-size:30px}body.playing .operators button{height:44px;font-size:23px}body.playing .selection{font-size:12px;margin:8px 0}body.playing .actions{gap:7px}body.playing .actions button{min-height:42px;padding:7px;font-size:13px}body.playing .status{font-size:12px;min-height:18px;margin:8px 0}body.playing .history{font-size:12px;padding:8px 10px;line-height:1.5}body.playing .bottom{margin-top:3px}body.playing footer{padding:12px;font-size:12px}}

.access-overlay{position:fixed;inset:0;z-index:100;background:#372f3ab8;display:flex;align-items:center;justify-content:center;padding:20px}.access-card{width:min(100%,400px);background:#fffaf2;border:3px solid #f3d8bd;border-radius:24px;padding:24px;box-shadow:0 16px 48px #382a3333}.access-card h2{margin:0;color:#674e61;font-size:22px}.access-card p{color:#806d76;line-height:1.6}.access-card label{display:block;color:#674e61;font-weight:700;margin-bottom:6px}.access-card input{width:100%;border:2px solid #ead3c0;border-radius:12px;background:white;padding:12px;font-size:18px}.access-buttons{display:flex;gap:10px}.access-buttons button{flex:1;border:0;border-radius:12px;padding:12px;font-weight:700;background:#f5e7da;color:#805b4a}.access-buttons button[type=submit]{background:#80bd87;color:white}#accessMessage{min-height:1.5em;color:#ac5a4e;margin:8px 0}

#homeVoiceStatus:empty{display:none}#homeVoiceStatus:not(:empty){font-size:13px;color:#96736e;margin:8px 4px}
body.playing #homeVoiceStatus{display:none}

@media(min-width:601px){body.playing .hero{display:none}body.playing .page{max-width:1000px;padding:10px 24px}body.playing header{margin-bottom:4px}body.playing .panel{margin-top:6px;padding:16px 22px;border-radius:22px}body.playing .game-top{gap:12px}body.playing .game-top .plain{padding:5px 0}body.playing .title-row h2{margin:4px 0;font-size:23px}body.playing .title-row p{font-size:13px}body.playing .target{width:60px;height:60px}body.playing .target strong{font-size:27px}body.playing .cards{margin:10px 0}body.playing .cards button{min-height:75px;font-size:36px}body.playing .operators button{height:46px;font-size:24px}body.playing .selection{margin:8px 0;font-size:13px}body.playing .actions button{padding:9px 15px}body.playing .status{margin:8px 0;min-height:18px;font-size:13px}body.playing .history{padding:8px 14px;line-height:1.4;font-size:13px}body.playing .bottom{margin-top:3px}body.playing footer{padding:12px}}
/* Keep the first level visible without making the welcome art disappear. */
body:not(.playing) .hero{height:112px;border-width:4px;border-radius:22px}
body:not(.playing) .hero-copy{top:10px;left:14px;padding:8px 14px;border-radius:15px}
body:not(.playing) .hero h1{font-size:28px;line-height:1.05;margin:4px 0}
body:not(.playing) .hero small{font-size:10px}
body:not(.playing) .hero p{font-size:12px}
body:not(.playing) .hero-note{right:15px;bottom:10px;padding:6px 12px;font-size:12px}
body:not(.playing) #home{margin-top:12px;padding:18px 22px}
body:not(.playing) .heading h2{font-size:21px;margin:3px 0}
body:not(.playing) .heading p{font-size:13px}
body:not(.playing) .difficulties{margin:12px 0;gap:10px}
body:not(.playing) .difficulties button{padding:10px 14px;border-radius:15px}
body:not(.playing) .difficulties b{font-size:17px}
body:not(.playing) .difficulties span{font-size:12px;margin-top:3px}
body:not(.playing) .level-heading{margin:17px 0 12px}
body:not(.playing) .level-heading h3{font-size:21px;margin:3px 0}
body:not(.playing) .level-heading p{font-size:12px}
body:not(.playing) #home .voice-access{margin:0 0 9px;line-height:1.35;font-size:12px}
@media(max-width:600px){body:not(.playing) .page{padding:10px 12px}body:not(.playing) header{margin-bottom:8px}body:not(.playing) .hero{height:92px}body:not(.playing) .hero-copy{top:8px;left:10px;padding:6px 11px}body:not(.playing) .hero h1{font-size:23px}body:not(.playing) .hero p{font-size:11px}body:not(.playing) .hero-note{right:8px;bottom:7px;font-size:10px;padding:5px 8px}body:not(.playing) #home{padding:12px 14px;margin-top:9px}body:not(.playing) .heading h2{font-size:18px}body:not(.playing) .heading p{font-size:12px}body:not(.playing) .difficulties{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0}body:not(.playing) .difficulties button{padding:8px 7px;min-width:0}body:not(.playing) .difficulties b{font-size:14px;white-space:nowrap}body:not(.playing) .difficulties span{font-size:11px;line-height:1.3}body:not(.playing) .level-heading{margin:12px 0 9px}body:not(.playing) .level-heading h3{font-size:18px}body:not(.playing) .level-heading p{font-size:11px}}
@media(max-width:600px){body:not(.playing) .level-art{height:104px}}

/* 毛球的数字探险：关卡作为地图上的路标。 */
:root{color:#375159;background:#eaf7ed}
body{background:radial-gradient(circle at 4% 8%,#fff4bf 0,transparent 24%),radial-gradient(circle at 94% 12%,#d0f1df 0,transparent 28%),#edf8f0;color:#375159}
.page{max-width:1120px}
header a{color:#326b60}header button,.actions button,.voice-box button{border-color:#cfdfd1;color:#42695e}
body:not(.playing) .hero{height:104px;border-color:#fffdf0;border-radius:22px;box-shadow:0 6px 0 #bedecd,0 12px 30px #6fa18b22}
body:not(.playing) .hero-copy{background:#fffbeced}.hero h1{color:#325d58}.hero h1 em,.title-row em{color:#f57958}.hero-note{background:#fff4c7;color:#97713e}
.panel{border-color:#d0e8d3;box-shadow:0 7px 0 #c3dfc9,0 16px 30px #709c7b18}
body:not(.playing) #home{border:0;background:#fffdf6;padding:19px 22px 22px}
.heading h2,.level-heading h3{color:#315c54}.heading>span,.badge{background:#def3d5;color:#438268}
.hero small,.heading small,#levelName,.level-heading small{color:#ee805d}
body:not(.playing) .difficulties{gap:8px;margin:10px 0 12px}
body:not(.playing) .difficulties button{background:#f7fbef;border:2px solid #e2eedc;color:#547565;box-shadow:none;padding:9px 13px}
body:not(.playing) .difficulties button.chosen{background:#e5f6d9;border-color:#75b979;box-shadow:0 3px 0 #b1d9ab}
body:not(.playing) .difficulties b{font-size:15px}body:not(.playing) .difficulties span{font-size:11px}
body:not(.playing) .level-heading{margin:15px 0 10px}.level-heading>span{background:#e1f5d8;color:#549369}
.levels{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:22px 18px 20px;overflow:hidden;border:4px solid #cce7c4;border-radius:23px;background:#bde6ac url('/game/twentyfour/twentyfour-map.jpg') center/cover}
.levels:before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(180deg,#ecfae077,#eaf8d864)}
.levels:after{content:'';position:absolute;z-index:-1;left:6%;right:6%;top:50%;border-top:4px dashed #fff6d0bd;transform:rotate(-2deg)}
.levels .level-card{position:relative;overflow:visible;display:flex;flex-direction:column;align-items:center;min-height:150px;padding:12px 8px 9px;border:2px solid #fbfff1;border-radius:19px;text-align:center;background:#fffdf0ed;box-shadow:0 5px 0 #8abc83a8,0 7px 16px #40714b25;color:#355e52;transition:transform .18s,box-shadow .18s}
.levels .level-card:not(:disabled):hover{transform:translateY(-4px);box-shadow:0 8px 0 #8abc83a8,0 12px 20px #40714b28}
.levels .level-card:disabled{opacity:1;background:#f7f8e9dd;border-color:#edf3df;color:#718676;box-shadow:0 4px 0 #95b68a88}
.level-marker{display:grid;place-items:center;width:44px;height:44px;flex:none;border:3px solid #fff8d9;border-radius:50%;background:#ffb15f;color:#fff;font-size:21px;font-weight:900;box-shadow:0 3px 0 #d97e49}
.level-card:disabled .level-marker{background:#aec5a5;box-shadow:0 3px 0 #8fa889;font-size:17px}
.level-copy{display:flex;align-items:center;gap:2px;min-height:0;padding:5px 0 0}.level-number{position:static;padding:0;background:none;color:#b08762;font-size:10px;line-height:1.2}.level-copy strong{font-size:15px;line-height:1.25}.level-description{font-size:10px;line-height:1.3;color:#769082}.level-progress{margin-top:4px;padding:3px 7px;background:#e5f4d7;color:#518b5d;font-size:10px;line-height:1.25}.level-card:disabled .level-copy{color:#708577}.level-card:disabled .level-progress{background:#e9efe4;color:#819686}
body.playing .panel{background:#fffdf5;border-color:#cfe8d4}.cards button{background:#fffdf2;border-color:#efcf94;color:#315e58;box-shadow:0 5px 0 #e9cf9a}.cards button.selected{border-color:#f49360;background:#fff0cf}.operators button{background:#e5f5dd;border-color:#cce7c5;color:#559a6e}.actions .primary,.next{background:#f48461;box-shadow:0 4px 0 #d46c51}.history{background:#edf7e7;color:#527a61}.target{background:#ffedb8}.target strong{color:#ef815a}
@media(max-width:700px){.levels{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:13px;background-position:center top}.levels:after{left:50%;right:auto;top:10%;bottom:10%;border-top:0;border-left:4px dashed #fff8d5c9;transform:none}.levels .level-card{min-height:114px;padding:8px 6px 7px}.level-marker{width:35px;height:35px;font-size:17px}.level-copy{padding-top:3px}.level-copy strong{font-size:14px}.level-description{font-size:10px}.level-progress{font-size:10px;margin-top:3px}.level-number{font-size:10px}}
@media(max-width:600px){body:not(.playing) .hero{height:78px}body:not(.playing) .hero-copy{top:5px}body:not(.playing) .hero h1{font-size:21px}body:not(.playing) .hero p{font-size:10px}body:not(.playing) #home{padding:11px;margin-top:8px}body:not(.playing) .level-heading{margin:10px 0 8px}body:not(.playing) .difficulties{margin:8px 0}.levels{gap:8px;padding:10px}.levels .level-card{min-height:108px}.level-description{display:none}}
@media(prefers-reduced-motion:reduce){.levels .level-card{transition:none}}
/* Keep the illustrated landscape visible between the map stops. */
.levels:before{background:linear-gradient(180deg,#e5f8d333,#eaf8d840)}
.levels .level-card,.levels .level-card:disabled{background:transparent;border-color:transparent;box-shadow:none}
.levels .level-card:not(:disabled):hover{box-shadow:none;transform:translateY(-4px)}
.level-marker{width:52px;height:52px;border-width:4px;box-shadow:0 4px 0 #d97e49,0 6px 10px #38633d35}
.level-card:disabled .level-marker{box-shadow:0 4px 0 #8fa889,0 6px 10px #38633d20}
.level-copy{margin-top:5px;padding:4px 8px 5px;border:1px solid #fffdf2;border-radius:12px;background:#fffdf0ed;box-shadow:0 3px 0 #a8ca99a8;min-width:118px}
.level-description{display:none}
@media(max-width:700px){.level-marker{width:39px;height:39px;border-width:3px}.level-copy{min-width:108px;margin-top:4px;padding:3px 6px}}
/* Map-first home: the landscape is the page, not a card below a banner. */
body:not(.playing) .page{max-width:1280px;padding:10px 18px}
body:not(.playing) header{margin:0 0 8px;min-height:36px}
body:not(.playing) header a{font-size:14px}
body:not(.playing) .header-tools button{padding:7px 10px;font-size:12px}
body:not(.playing) .hero{display:none}
body:not(.playing) #home{padding:0;margin:0;background:transparent;border:0;box-shadow:none}
body:not(.playing) #home .voice-access{display:none}
.map-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 1px 5px}
.map-top small{display:block;color:#d87950;font-size:11px;font-weight:800;letter-spacing:.06em}
.map-top h1{margin:0;color:#305c50;font-size:25px;line-height:1.1}.map-top h1 em{font-style:normal;color:#ec7952}
.difficulty-switch{border:2px solid #c9e2c8;background:#fffdf1;color:#4d805f;border-radius:18px;font-weight:800;font-size:13px;padding:9px 13px;box-shadow:0 3px 0 #c5dec3}
.map-instruction{margin:0 2px 7px;color:#648678;font-size:12px}
.levels{display:block;position:relative;height:min(72vh,690px);min-height:520px;padding:0;border:5px solid #fffdf0;border-radius:24px;background-position:center;background-size:100% 100%;box-shadow:0 7px 0 #9fcaa4,0 14px 26px #537f5a25}
.levels:before{background:linear-gradient(180deg,#fff5d009,#fffae70f)}.levels:after{display:none}
.levels .level-card,.levels .level-card:disabled{position:absolute;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:120px;min-height:0;padding:0;border:0;transform:translate(-50%,-50%);overflow:visible;background:transparent;box-shadow:none}
.levels .level-card:not(:disabled):hover{transform:translate(-50%,calc(-50% - 4px));box-shadow:none}
.levels .level-card:nth-child(1){left:12%;top:77%}.levels .level-card:nth-child(2){left:24%;top:61%}.levels .level-card:nth-child(3){left:38%;top:64%}.levels .level-card:nth-child(4){left:50%;top:52%}.levels .level-card:nth-child(5){left:62%;top:62%}.levels .level-card:nth-child(6){left:75%;top:56%}.levels .level-card:nth-child(7){left:88%;top:48%}.levels .level-card:nth-child(8){left:80%;top:30%}.levels .level-card:nth-child(9){left:66%;top:24%}.levels .level-card:nth-child(10){left:76%;top:11%}
.level-marker{width:54px;height:54px;font-size:22px;background:#ffad52;border:4px solid #fff9d7;box-shadow:0 4px 0 #cd7641,0 7px 12px #355d3a55}.level-card:disabled .level-marker{background:#93b88d;color:#fff;box-shadow:0 4px 0 #6c956d,0 6px 12px #355d3a40}
.level-copy{min-width:0;max-width:120px;margin-top:4px;padding:4px 8px;background:#fffdf1f2;border-radius:11px;box-shadow:0 3px 0 #749d6c80;gap:0}
.level-copy strong{font-size:13px;white-space:nowrap}.level-number{font-size:10px}.level-progress{font-size:9px;white-space:nowrap}.level-card:disabled .level-progress{display:none}
.difficulty-overlay{position:fixed;z-index:110;inset:0;display:grid;place-items:center;padding:18px;background:#234d3b9c}
.difficulty-card{position:relative;width:min(100%,570px);padding:24px;border:4px solid #fffdf1;border-radius:25px;background:#fffdf4;box-shadow:0 12px 0 #6eaf78,0 20px 45px #254d3970;text-align:center}
.difficulty-close{position:absolute;right:13px;top:9px;border:0;background:transparent;color:#759383;font-size:25px;line-height:1}.difficulty-spark{color:#eda45d;font-size:25px}.difficulty-card h2{margin:3px 0 6px;color:#315f52;font-size:23px}.difficulty-card p{margin:0;color:#7c9185;font-size:14px}.difficulty-card .difficulties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:18px 0 0}.difficulty-card .difficulties button{min-width:0;padding:12px 8px;border:2px solid #dcebd7;border-radius:15px;background:#f3f9ed;color:#547565;text-align:center}.difficulty-card .difficulties button.chosen{background:#e2f4d7;border-color:#78b77c}.difficulty-card .difficulties b{font-size:16px}.difficulty-card .difficulties span{font-size:11px;line-height:1.4}
body:not(.playing) footer{padding:10px;font-size:11px}
@media(max-width:700px){body:not(.playing) .page{padding:8px}body:not(.playing) header{margin-bottom:6px}body:not(.playing) header a{font-size:12px}body:not(.playing) .header-tools button{font-size:10px;padding:6px}.map-top h1{font-size:21px}.map-top small{font-size:10px}.difficulty-switch{font-size:11px;padding:7px 9px}.map-instruction{font-size:11px;margin-bottom:5px}.levels{height:1050px;min-height:0;background-size:auto 100%;background-position:center;border-width:3px;border-radius:20px}.levels .level-card,.levels .level-card:disabled{width:116px}.levels .level-card:nth-child(1){left:28%;top:6%}.levels .level-card:nth-child(2){left:72%;top:15%}.levels .level-card:nth-child(3){left:34%;top:24%}.levels .level-card:nth-child(4){left:73%;top:33%}.levels .level-card:nth-child(5){left:30%;top:42%}.levels .level-card:nth-child(6){left:70%;top:51%}.levels .level-card:nth-child(7){left:33%;top:60%}.levels .level-card:nth-child(8){left:73%;top:69%}.levels .level-card:nth-child(9){left:30%;top:78%}.levels .level-card:nth-child(10){left:70%;top:88%}.levels:after{display:block;position:absolute;z-index:-1;left:50%;top:4%;bottom:8%;border-left:4px dashed #fff8d5bb;transform:none}.level-marker{width:46px;height:46px;font-size:19px}.difficulty-card{padding:20px 14px}.difficulty-card h2{font-size:20px}.difficulty-card .difficulties{gap:6px}.difficulty-card .difficulties b{font-size:14px}.difficulty-card .difficulties span{font-size:10px}}
/* Two illustrated map chapters, ten stops each. */
body:not(.playing) .levels{display:grid;height:auto;min-height:0;gap:14px;padding:0;border:0;overflow:visible;background:none;box-shadow:none}
body:not(.playing) .levels:before,body:not(.playing) .levels:after{display:none}
.map-zone{position:relative;isolation:isolate;height:min(72vh,690px);min-height:520px;overflow:hidden;border:5px solid #fffdf0;border-radius:24px;background:#bde6ac url('/game/twentyfour/twentyfour-map.jpg') center/100% 100%;box-shadow:0 7px 0 #9fcaa4,0 14px 26px #537f5a25}
.map-zone:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff5d009,#fffae70f)}
@media(max-width:700px){.map-zone{height:1050px;min-height:0;border-width:3px;border-radius:20px;background-size:auto 100%;background-position:center}.map-zone:after{content:'';position:absolute;z-index:-1;left:50%;top:4%;bottom:8%;border-left:4px dashed #fff8d5bb}}
body:not(.playing) .levels{grid-template-columns:minmax(0,1fr)}

/* A quiet thinking stop in the same paper-cut meadow as the map. */
body.playing{background:linear-gradient(160deg,#e5f3de,#e7f5ef 65%,#d5ebd2)}
body.playing #game{position:relative;overflow:hidden;border:3px solid #fffbed;border-radius:30px;background:#fff9e9 url('/game/twentyfour/twentyfour-thinking.jpg') center/100% 100% no-repeat;box-shadow:0 7px 0 #c8dfc4,0 16px 35px #658a6d24;color:#594123}
body.playing .game-top,body.playing .title-row,body.playing .cards,body.playing .operators,body.playing .selection,body.playing .actions,body.playing .status,body.playing .history,body.playing .bottom,body.playing .voice-box,body.playing .hint{position:relative;z-index:1}
body.playing .game-top{max-width:790px;margin:auto}body.playing .game-top .plain{color:#bb8055}
body.playing .badge{background:#edf0d0;color:#617b4f}
body.playing .title-row{max-width:790px;margin:2px auto 0;text-align:center}
body.playing .title-row>div:first-child{flex:1}body.playing .title-row h2{color:#5b3c1b;font-weight:900;letter-spacing:.02em}
body.playing .title-row h2 em{color:#d78746}body.playing .title-row p{color:#907960}
body.playing #levelName{color:#ba875d}
body.playing .target{background:#f8eab9;color:#ae8b4b}body.playing .target strong{color:#db9850}
body.playing .cards{max-width:730px;margin:12px auto;gap:13px}
body.playing .cards button{background:#fff9eb;border:2px solid #e9c995;border-radius:18px;color:#563718;font-size:40px;box-shadow:0 4px 0 #dfc496,0 7px 12px #9c79531c}
body.playing .cards button.selected{background:#ffedce;border-color:#df9e55;transform:translateY(-3px)}
body.playing .operators{gap:12px}body.playing .operators button{background:#dce9bf;border:0;border-radius:14px;color:#4f6331;box-shadow:0 3px 0 #c2d09d}
body.playing .operators button.selected{background:#88b174;color:#fff}
body.playing .selection{color:#94775d}
body.playing .actions{justify-content:center;max-width:730px;margin:auto}
body.playing .actions button{border:2px solid #e5d4ae;background:#fff9e7;color:#78583a;border-radius:15px}
body.playing .actions .primary{background:#f7cc66;border-color:#e9bf59;color:#674319;box-shadow:0 4px 0 #d9ad55}
body.playing .actions #hint{background:#dce9b7;border-color:#c9dda6;color:#557342}
body.playing .status,body.playing .history,body.playing .bottom,body.playing .hint,body.playing .voice-box{max-width:730px;margin-left:auto;margin-right:auto}
body.playing .status{color:#8c6f54}body.playing .history{background:#f4f6dfeb;color:#6d8054}body.playing .bottom .plain{color:#ba8054}
@media(min-width:601px){body.playing #game{padding:16px clamp(45px,9%,115px) 18px}body.playing .cards button{min-height:82px}body.playing .operators button{min-width:65px}}
@media(max-width:600px){body.playing #game{padding:12px 14px;border-radius:23px;background-image:linear-gradient(#fff9e7c9,#fff9e7c9),url('/game/twentyfour/twentyfour-thinking.jpg');background-size:auto 100%;background-position:22% center}body.playing .title-row{text-align:left}body.playing .title-row h2{font-size:20px}body.playing .title-row p{font-size:12px}body.playing .cards{gap:6px;margin:9px auto}body.playing .cards button{min-height:63px;border-radius:13px;font-size:30px}body.playing .operators{gap:7px}body.playing .operators button{height:42px;box-shadow:0 3px 0 #c2d09d}body.playing .actions{gap:6px}body.playing .actions button{min-height:40px;font-size:13px;padding:7px}body.playing .status{margin-top:7px;margin-bottom:7px}body.playing .history{padding:8px 10px}}
body.playing .game-top .plain{background:#fffbeddd;border-radius:12px;padding:6px 9px}
@media(min-width:601px){body.playing .status,body.playing .history,body.playing .bottom,body.playing .hint,body.playing .voice-box{max-width:650px}}
@media(max-width:600px){body.playing .history{padding-right:62px;min-height:48px}body.playing .history:after{content:'';position:absolute;right:7px;bottom:3px;width:47px;height:47px;border-radius:50%;background:url('/game/twentyfour/twentyfour-thinking.jpg') left bottom/280px auto no-repeat;opacity:.95}}

/* Keep the question selector inside the card even with larger phone fonts. */
@media(max-width:600px){
  body.playing .game-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:'back picker' 'progress progress';gap:4px 6px;align-items:center;max-width:100%}
  body.playing .game-top #back{grid-area:back;justify-self:start;max-width:100%;white-space:normal;text-align:left}
  body.playing .game-top #progress{grid-area:progress;justify-self:center;max-width:100%;white-space:normal;text-align:center;line-height:1.25;padding:5px 10px}
  body.playing .game-top label{grid-area:picker;display:flex;justify-content:flex-end;align-items:center;gap:4px;min-width:0;max-width:100%;white-space:nowrap}
  body.playing .game-top select{min-width:70px;max-width:100%;font:inherit}
}

/* Story scenes are shown only between questions, never over an active calculation. */
.map-actions{display:flex;align-items:center;gap:8px}
.story-overlay{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:14px;background:#183b2dab}
.story-card{width:min(100%,760px);max-height:min(94dvh,720px);overflow:auto;border:4px solid #fffdf0;border-radius:26px;background:#fffdf2;box-shadow:0 12px 0 #78a981,0 24px 55px #1b3e2c70}
.story-art{position:relative;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;padding:16px;background-image:url('/game/twentyfour/twentyfour-story-world.jpg');background-size:400% auto;background-repeat:no-repeat;background-position:0% 52%;background-color:#d4e9c5}
.story-art.chapter-0{background-image:url('/game/twentyfour/twentyfour-story-opening.jpg');background-size:cover;background-position:center 42%}
.story-art.chapter-1{background-position:0% 55%}.story-art.chapter-2{background-position:33.33% 55%}.story-art.chapter-3{background-position:66.66% 55%}.story-art.chapter-4{background-position:100% 55%}
.story-art-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.story-title{padding:7px 12px;border-radius:16px;background:#fffbeded;color:#496d57;font-size:13px;font-weight:800}
.story-art-top button,.story-controls button{border:2px solid #e5d8bb;border-radius:13px;background:#fffbef;color:#806347;padding:8px 12px;font-weight:800}
.story-caption{padding:14px 17px;border:2px solid #fff6df;border-radius:18px;background:#fffaf0f2;box-shadow:0 4px 0 #bea9836b;color:#594c3c}
.story-speaker{display:inline-block;color:#c8784e;font-weight:900;font-size:14px}.story-caption p{margin:5px 0 0;font-size:18px;line-height:1.6;font-weight:700;overflow-wrap:anywhere}
.story-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 15px}.story-controls #storyVoiceStatus{flex:1;min-width:100px;color:#8f8270;font-size:12px}.story-controls #storyNext{background:#f5c86e;border-color:#e9b95c;color:#694a24;box-shadow:0 3px 0 #d2a854}.story-controls label{display:flex;align-items:center;gap:6px;color:#71866d;font-size:12px}.story-controls select{max-width:190px;font:inherit}
@media(max-width:600px){.map-actions{gap:4px}.map-actions .difficulty-switch{font-size:10px;padding:6px}.story-overlay{padding:9px}.story-card{max-height:92dvh;border-width:3px;border-radius:20px}.story-art{min-height:310px;padding:11px;background-size:auto 100%}.story-art.chapter-1{background-position:0% center}.story-art.chapter-2{background-position:33% center}.story-art.chapter-3{background-position:66% center}.story-art.chapter-4{background-position:100% center}.story-art.chapter-0{background-position:63% center}.story-title{font-size:12px}.story-caption{padding:11px 13px}.story-caption p{font-size:16px;line-height:1.55}.story-controls{padding:10px;gap:6px}.story-controls #storyVoiceStatus{flex-basis:100%;min-width:0}.story-controls button{min-height:42px;flex:1}.story-controls label{flex-basis:100%}}

.story-art.chapter-5{background-image:url('/game/twentyfour/twentyfour-story-finale.jpg');background-size:cover;background-position:center 42%}
@media(max-width:600px){.story-art.chapter-5{background-position:63% center}}

.story-art.chapter-6{background-image:url('/game/twentyfour/twentyfour-story-bridge.jpg');background-size:cover;background-position:center 45%}
@media(max-width:600px){.story-art.chapter-6{background-position:42% center}}

/* 每幅地图对应一段故事旅程，路标贴近剧情发生的地点。 */
.map-zone:nth-child(1){background-image:url('/game/twentyfour/twentyfour-map-forest-lake.jpg')}
.map-zone:nth-child(2){background-image:url('/game/twentyfour/twentyfour-map-hill-coast.jpg')}
.levels .map-zone:nth-child(1) .level-card:nth-child(1){left:9%;top:59%}
.levels .map-zone:nth-child(1) .level-card:nth-child(2){left:19%;top:44%}
.levels .map-zone:nth-child(1) .level-card:nth-child(3){left:28%;top:24%}
.levels .map-zone:nth-child(1) .level-card:nth-child(4){left:33%;top:48%}
.levels .map-zone:nth-child(1) .level-card:nth-child(5){left:44%;top:36%}
.levels .map-zone:nth-child(1) .level-card:nth-child(6){left:54%;top:25%}
.levels .map-zone:nth-child(1) .level-card:nth-child(7){left:65%;top:32%}
.levels .map-zone:nth-child(1) .level-card:nth-child(8){left:69%;top:58%}
.levels .map-zone:nth-child(1) .level-card:nth-child(9){left:84%;top:54%}
.levels .map-zone:nth-child(1) .level-card:nth-child(10){left:93%;top:31%}
.levels .map-zone:nth-child(2) .level-card:nth-child(1){left:9%;top:42%}
.levels .map-zone:nth-child(2) .level-card:nth-child(2){left:19%;top:66%}
.levels .map-zone:nth-child(2) .level-card:nth-child(3){left:29%;top:33%}
.levels .map-zone:nth-child(2) .level-card:nth-child(4){left:39%;top:48%}
.levels .map-zone:nth-child(2) .level-card:nth-child(5){left:55%;top:27%}
.levels .map-zone:nth-child(2) .level-card:nth-child(6){left:44%;top:74%}
.levels .map-zone:nth-child(2) .level-card:nth-child(7){left:66%;top:57%}
.levels .map-zone:nth-child(2) .level-card:nth-child(8){left:83%;top:73%}
.levels .map-zone:nth-child(2) .level-card:nth-child(9){left:86%;top:42%}
.levels .map-zone:nth-child(2) .level-card:nth-child(10){left:93%;top:20%}
@media(max-width:700px){
 body:not(.playing) .levels{display:grid;overflow-x:auto;grid-template-columns:850px;scrollbar-width:thin;overscroll-behavior-x:contain;padding-bottom:8px}
 .map-zone{height:490px;background-size:100% 100%;background-position:center}
 .map-zone:after{display:none}
 .levels .map-zone .level-card,.levels .map-zone .level-card:disabled{width:90px}
 .levels .map-zone .level-copy strong{font-size:11px}
 .map-instruction:after{content:'　左右滑动地图，看看前方的路 →';color:#7a957a}
}
.map-instruction-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.restart-adventure{border:0;background:transparent;color:#648678;font-size:12px;text-decoration:underline;text-underline-offset:3px;padding:5px;white-space:nowrap}
@media(max-width:700px){.restart-adventure{font-size:11px}.map-instruction-row{align-items:flex-start}.map-instruction{flex:1}}

.voice-access{color:#917880;font-size:13px;line-height:1.6;margin:0 0 18px}