/* Token-driven visual language shared by every character's own theme config. */
:root{--blue:var(--pet-primary);--ink:var(--pet-ink);--muted:var(--pet-muted);--line:var(--pet-border);color:var(--pet-ink);background:var(--pet-background);font-family:var(--pet-font)}
body{background:var(--pet-background);color:var(--pet-ink)}.brand-mark{background:var(--pet-primaryDark)}.pet-card,.practice-card,.wallet,dialog{background:var(--pet-surface);border-color:var(--pet-border)}.pet-card,.practice-card,.feed-card,dialog{border-radius:var(--pet-radius)}.primary{background:var(--pet-primary);border-color:var(--pet-primaryDark)}.pet-heading{background:var(--pet-sceneFrom)}.pet-scene{background:linear-gradient(var(--pet-sceneFrom),var(--pet-sceneTo))}.halo,.halo:after{border-color:var(--pet-sceneLine)}.hill,.hill-two{background:var(--pet-hill)}.growth{background:var(--pet-surface)}progress::-webkit-progress-value{background:var(--pet-accent)}progress::-moz-progress-bar{background:var(--pet-accent)}.feed-card{background:var(--pet-foodBackground);border-color:var(--pet-foodBorder)}.feed-button{color:var(--pet-foodInk);border-color:var(--pet-foodBorder);background:var(--pet-surface)}.speech,.level{background:var(--pet-surface);border-color:var(--pet-sceneLine)}.speech{color:var(--pet-primaryDark)}.pet-heading p,.pet-heading .eyebrow,.eyebrow,.growth p,.small-note,.card-copy,.quiz-guidance{color:var(--pet-muted)}.practice-meta span{background:var(--pet-background);color:var(--pet-primaryDark)}.equation input{background:var(--pet-background);border-color:var(--pet-accent);color:var(--pet-primaryDark)}.question-dots i.current{background:var(--pet-primary)}.question-dots i.done{background:var(--pet-accent)}.question-dots i.incorrect{background:#dca17c}.keypad button{background:var(--pet-background);border-color:var(--pet-border)}.toast{background:var(--pet-primaryDark)}
[data-scene=forest] .pet-scene:before,[data-scene=forest] .pet-scene:after{content:'';position:absolute;width:100px;height:38px;border-radius:0 90% 0 90%;background:var(--pet-sceneLine);opacity:.38;top:30px;right:-45px;transform:rotate(-30deg);z-index:0}[data-scene=forest] .pet-scene:after{top:70px;right:-53px;transform:rotate(13deg)}
[data-scene=moon] .halo{border:0;background:var(--pet-sceneLine);opacity:.5;box-shadow:0 0 65px var(--pet-accent)}[data-scene=moon] .halo:after{border:0;inset:0 0 12% 17%;background:var(--pet-sceneFrom)}[data-scene=moon] .hill{opacity:.4}
[data-scene=cloud] .halo{border:0;border-radius:45%;height:120px;top:36%;box-shadow:-90px 40px 0 -18px var(--pet-sceneLine),90px 30px 0 -10px var(--pet-sceneLine);background:var(--pet-sceneLine);opacity:.45}[data-scene=cloud] .halo:after{border:0}
[data-ui-style=bold] .pet-card,[data-ui-style=bold] .practice-card,[data-ui-style=bold] .feed-card{border:2px solid var(--pet-ink);box-shadow:0 5px 0 var(--pet-ink)}[data-ui-style=ornate] .pet-card{border:1px solid var(--pet-accent);box-shadow:inset 0 0 0 5px var(--pet-surface),0 8px 30px #26384b09}
.equation input.incorrect:disabled{color:#ab7351;-webkit-text-fill-color:#ab7351;border-color:#e5bda7;background:#fff8f1}
#scene-decoration{position:absolute;inset:0;z-index:1;pointer-events:none}.grade-switch{display:flex;align-items:center;gap:12px;background:var(--pet-surface);border:1px solid var(--pet-border);border-radius:13px;padding:12px 14px;font-size:12px;color:var(--pet-primaryDark);white-space:nowrap;min-height:44px}.grade-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.grade-options label{margin:0;padding:13px 8px;justify-content:center;position:relative;font-size:12px}.grade-options input{position:absolute;opacity:0;width:1px;height:1px}.grade-options label:has(input:checked){border-color:var(--pet-primary);background:var(--pet-background);color:var(--pet-primaryDark)}.grade-options label:focus-within{outline:3px solid var(--pet-accent);outline-offset:2px}.grade-scope{font-size:12px;line-height:1.8;background:var(--pet-background);padding:13px;border-radius:12px;color:var(--pet-primaryDark)}.topic-label{display:block;font-size:11px;color:var(--pet-muted);margin:20px 0 9px}.topic-select{width:100%;border:1px solid var(--pet-border);border-radius:12px;padding:13px;background:var(--pet-surface);color:var(--pet-ink);font:inherit;font-size:13px}.grade-fieldset{margin-bottom:12px}.extra-keys{display:flex;gap:8px;margin-bottom:9px}.extra-keys button{border:1px solid var(--pet-border);background:var(--pet-background);color:var(--pet-primaryDark);font-size:12px;border-radius:10px;min-height:36px;flex:1}.equation{white-space:normal;gap:10px;font-size:clamp(23px,4vw,34px);letter-spacing:-.6px}.equation label{overflow-wrap:anywhere;text-align:center;line-height:1.65}.equation input{flex:0 0 102px;width:102px;font-size:26px;min-height:60px}.equation.long{font-size:25px}.answer-feedback{min-height:70px}.answer-feedback.wrong{color:#aa693c}.wrong-answer{display:block;font-size:16px;font-weight:700;line-height:1.8}.question-dots{margin-bottom:20px}.mistake-review{max-height:150px;overflow:auto;text-align:left;border:1px solid var(--pet-border);border-radius:12px;padding:12px;margin-bottom:20px;font-size:12px;line-height:1.9;color:var(--pet-muted)}.mistake-review strong{color:var(--pet-ink);font-size:12px}.review-row{border-top:1px solid var(--pet-border);padding-top:7px;margin-top:7px}.result-reward{margin-top:20px}.home footer{flex-wrap:wrap}.quiz-status{gap:10px}.quiz-status>span:first-child{flex:1}.round-coins{white-space:nowrap}
@media(max-width:720px){.welcome h1{font-size:23px}.grade-switch{font-size:11px;padding:10px;gap:8px}.equation{font-size:28px}.equation.long{font-size:22px}.equation input{flex-basis:90px;width:90px;font-size:23px}.extra-keys button{min-height:34px}dialog{padding:22px}.grade-options{gap:7px}}
@media(max-width:360px){.welcome h1{font-size:20px}.grade-switch{font-size:10px;padding:9px}.equation{font-size:25px}.equation.long{font-size:20px}.equation input{flex-basis:76px;width:76px;font-size:20px}.extra-keys button{min-height:32px}}

/* Kindergarten: a separate stage and countable objects in rows of five. */
.grade-options label:has(input[value="0"]){grid-column:1/-1}
.counting-objects{display:grid;grid-template-columns:repeat(5,32px);gap:8px 12px;justify-content:center;margin:0 auto 16px}
.counting-objects[hidden]{display:none}
.counting-objects span{font-size:32px;line-height:36px;color:var(--pet-primary);text-align:center}
.equation.counting label{font-size:20px;letter-spacing:0}

/* Every character uses the same host contract; Nezha has its own lotus scene. */
#pet-host>nezha-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
#pet-host>yutu-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
[data-scene=sea] .halo{border:0;background:radial-gradient(circle,#ffffff88,transparent 70%);box-shadow:none}
[data-scene=sea] .halo:after{border:0}
[data-scene=sea] .hill{height:17%;bottom:-9%;border-radius:50%;background:#82cbd733}
.sea-garden{position:absolute;inset:0;overflow:hidden}
.sea-wave{position:absolute;width:140%;height:30%;left:-20%;bottom:-13%;border:2px solid #ffffff9c;border-radius:50%;background:#6dbcc722}
.sea-wave:nth-child(2){bottom:-18%;left:-4%;border-color:#75bac866;transform:rotate(-8deg)}
.sea-islet{position:absolute;width:62px;height:22px;left:4%;bottom:9%;background:#97bdc6;border-radius:70% 50% 25% 25%;opacity:.6}
.sea-islet:before{content:'';position:absolute;width:16px;height:21px;left:20px;top:-15px;border-radius:0 100% 0 100%;background:#81b9a1;transform:rotate(-16deg)}
.sea-islet:nth-of-type(2){left:auto;right:5%;bottom:14%;transform:scale(.7)}
.sea-garden b{position:absolute;top:19%;left:17%;font-size:16px;color:#8cbdce;font-weight:400}
.sea-garden b:nth-of-type(2){top:42%;left:82%;font-size:12px;color:#da99a2}
.sea-garden b:nth-of-type(3){top:10%;left:72%;font-size:20px}
.character-list{display:grid;gap:12px}.character-option{display:flex;gap:16px;align-items:center;padding:12px;border:1px solid var(--pet-border);border-radius:16px;background:var(--pet-background)}.character-option>img{width:100px;height:112px;object-fit:contain;flex-shrink:0}.character-option h3{margin:0;font-size:18px}.character-option p{font-size:12px;color:var(--pet-muted);margin:8px 0}.character-option button{min-height:44px;border:1px solid var(--pet-border);border-radius:10px;padding:10px 14px;background:var(--pet-surface);color:var(--pet-primaryDark);font-size:12px}
.moon-garden{position:absolute;inset:0;overflow:hidden}.moon-garden span{position:absolute;color:#a3a3d5;font-size:18px;left:15%;top:37%}.moon-garden span:nth-child(2){left:84%;top:18%;font-size:25px}.moon-garden span:nth-child(3){left:74%;top:53%;font-size:12px}.moon-garden span:nth-child(4){left:28%;top:12%;font-size:12px}.moon-garden i{position:absolute;width:72px;height:120px;border:1px solid #9dc6c6;border-radius:90% 0 90% 0;background:#9dc6c629;bottom:2%;left:-25px;transform:rotate(-24deg)}.moon-garden i:last-child{left:auto;right:-24px;transform:rotate(24deg)}
.test-panel{margin-bottom:22px;padding:16px 18px;border:1px dashed var(--pet-primary);border-radius:16px;background:var(--pet-surface)}.test-panel summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--pet-primaryDark)}.test-panel p{font-size:12px;line-height:1.7;color:var(--pet-muted);margin:10px 0}.test-panel a{color:var(--pet-primaryDark);text-decoration:underline;margin-left:8px}.test-controls{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.test-controls button,.test-controls select{min-height:40px;max-width:100%;padding:8px 10px;border:1px solid var(--pet-border);border-radius:9px;background:var(--pet-background);color:var(--pet-ink);font:inherit;font-size:12px}.test-controls label{font-size:12px}.test-panel #test-effect{margin-bottom:0;color:var(--pet-primaryDark)}
.food-illustration img{display:block;width:48px;height:48px;object-fit:contain;margin-left:-3px}
.evolution-hint{color:var(--pet-primaryDark)!important;font-weight:600}
.test-controls input{width:90px;min-height:40px;padding:8px 10px;border:1px solid var(--pet-border);border-radius:9px;background:var(--pet-background);color:var(--pet-ink);font:inherit;font-size:12px}
.welcome{gap:12px}.welcome>div:first-child{margin-right:auto}.unlock-pet{font:inherit;font-size:12px;min-height:44px;flex-shrink:0;border:1px solid var(--pet-foodBorder);border-radius:12px;padding:10px 12px;background:var(--pet-foodBackground);color:var(--pet-foodInk)}.unlock-pet:disabled{opacity:.58;cursor:not-allowed}
.pet-select{font:inherit;font-size:12px;min-height:44px;flex-shrink:0;margin:0;background:var(--pet-surface);border-color:var(--pet-border);color:var(--pet-primaryDark)}
.pet-select:focus-visible{outline:3px solid var(--pet-accent);outline-offset:3px}
.pet-select:disabled{opacity:.55;cursor:wait}
[data-scene=lotus] .halo{border:1px solid var(--pet-sceneLine);border-radius:50%;opacity:.7}
[data-scene=lotus] .halo:after{inset:25px;border-style:dashed;border-color:var(--pet-accent);opacity:.35}
[data-scene=lotus] .hill{height:27%;bottom:-14%;background:var(--pet-hill)}
[data-scene=lotus] .pet-scene:before,[data-scene=lotus] .pet-scene:after{content:'';position:absolute;width:78px;height:150px;border:1px solid var(--pet-accent);background:#efb4c633;border-radius:90% 10% 90% 10%;bottom:12px;left:-17px;transform:rotate(-32deg);opacity:.55;z-index:0}
[data-scene=lotus] .pet-scene:after{left:auto;right:-17px;transform:rotate(58deg)}
.card-copy strong{color:var(--pet-primaryDark)}
.feed-card{order:-1}
#pet-host>ragdoll-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
[data-scene=starlight] .halo{background:radial-gradient(circle,#ffffffaa,transparent 70%);border-style:dashed}
@media(max-width:720px){.welcome{flex-wrap:wrap;justify-content:flex-start;gap:10px}.welcome>div:first-child{flex:1 0 100%;margin-bottom:3px}.welcome .pet-select{min-width:112px;max-width:none}.welcome .grade-switch{margin-left:auto}}
/* Compact phone home: all primary actions remain next to the pet. No fixed-height clipping. */
@media(max-width:720px){
  .header{padding:9px 14px}.brand{font-size:15px;gap:7px}.brand-mark{width:30px;height:30px;font-size:20px}.wallet{padding:5px 11px}.wallet strong{font-size:18px}
  .home{padding:0 12px}.welcome{margin:0 0 8px;gap:6px;flex-wrap:nowrap}.welcome>div:first-child{display:none}
  .welcome .pet-select{min-width:0;flex:1;width:90px;padding:8px;max-width:150px}.welcome .grade-switch{padding:8px;gap:5px}.unlock-pet{padding:8px;font-size:11px}
  .game-layout{gap:8px}.pet-heading{padding:10px 15px 0;align-items:center}.pet-heading .eyebrow{display:none}.pet-heading h2{font-size:21px}.pet-heading p{margin:3px 0 0;font-size:10px}.level{padding:7px 10px}
  .pet-scene{height:clamp(156px,26svh,230px);min-height:0;max-height:none;flex:none}
  #pet-host{width:min(100%,calc(clamp(156px,26svh,230px)*1.38));max-width:340px;padding:0;margin:0 auto -5px;flex-shrink:0}
  .speech{top:7px;left:12px;padding:5px 9px;font-size:10px;max-width:220px;line-height:1.5}.touch-hint{bottom:5px;font-size:9px}.halo{width:175px;height:175px;top:5%}
  .growth{padding:10px 15px}.growth-label{margin-bottom:6px;font-size:11px}.growth p{font-size:10px;margin-top:5px}.growth #growth-note{display:none}.evolution-hint{margin-top:6px!important}
  .play-panel{gap:8px}.feed-card{padding:10px 12px;grid-template-columns:30px minmax(0,1fr) auto;gap:3px 8px;border-radius:17px}
  .food-illustration{font-size:26px}.food-illustration img{width:32px;height:32px;margin:0}.feed-card .eyebrow{display:none}.feed-card h2{font-size:13px}.feed-card p{font-size:10px;margin:3px 0}.feed-button{grid-column:3;grid-row:1;margin:0;min-height:44px;padding:8px 10px;font-size:12px;gap:9px}.feed-button>span{font-size:11px}.feed-card>#feed-hint{grid-column:1/-1;text-align:left;font-size:10px;margin:2px 0 0}
  .practice-card{padding:12px;border-radius:17px;display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:center}.practice-card>.eyebrow,.practice-card .card-copy,.card-icon{display:none}.practice-card h2{font-size:17px}.practice-meta{margin:0;gap:4px;grid-column:1}.practice-meta span{padding:3px 5px;font-size:9px}.practice-card .primary{grid-column:2;grid-row:1/3;width:auto;min-width:125px;min-height:48px;padding:10px 12px;font-size:13px}.small-note{display:none}
  .home footer{padding:10px 2px;font-size:9px;gap:5px}.test-panel{margin-top:8px}.character-option>img{width:75px;height:88px}
}
@media(max-width:360px){.feed-card{grid-template-columns:24px minmax(0,1fr) auto;gap:3px 5px}.feed-button{font-size:11px;padding:8px}.feed-card h2{font-size:12px}.practice-card .primary{min-width:115px}.unlock-pet{font-size:10px}}

/* Corgi's breezy meadow; art follows the same compact mobile host sizing. */
#pet-host>corgi-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
.corgi-meadow{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.corgi-meadow i{position:absolute;width:23px;height:10px;background:#4cbea52b;border-radius:100% 0 100% 0;transform:rotate(-25deg)}
.corgi-meadow i:nth-child(1){left:12%;top:28%}.corgi-meadow i:nth-child(2){right:16%;top:18%;transform:rotate(25deg)}
.corgi-meadow i:nth-child(3){right:8%;bottom:21%}.corgi-meadow i:nth-child(4){left:21%;bottom:14%;transform:rotate(30deg)}
html[data-scene="meadow"] .scene{background:linear-gradient(145deg,var(--pet-sceneFrom),var(--pet-sceneTo))}

/* Formal home fills one viewport. The test build keeps scrolling for its developer controls. */
body:not(.is-test-build):not(.classic-web){height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body:not(.is-test-build):not(.classic-web) .header{flex:0 0 auto;padding-top:12px;padding-bottom:12px}
body:not(.is-test-build):not(.classic-web) .home{height:calc(100dvh - 59px);min-height:0;width:100%;display:flex;flex-direction:column;padding-top:0}
body:not(.is-test-build):not(.classic-web) .welcome{flex:0 0 auto;margin:5px 0 12px}
body:not(.is-test-build):not(.classic-web) .game-layout{flex:1;min-height:0}
body:not(.is-test-build):not(.classic-web) .pet-card,body:not(.is-test-build):not(.classic-web) .play-panel{min-height:0}
body:not(.is-test-build):not(.classic-web) .pet-scene{min-height:0}
body:not(.is-test-build):not(.classic-web) .home footer{flex:0 0 auto;padding:10px 3px 12px}
@media(min-width:721px){
  body:not(.is-test-build):not(.classic-web) .pet-card{height:100%}
  body:not(.is-test-build):not(.classic-web) .pet-heading{padding-top:18px}
  body:not(.is-test-build):not(.classic-web) .pet-scene{flex:1}
  body:not(.is-test-build):not(.classic-web) .growth{padding-top:15px;padding-bottom:14px}
  body:not(.is-test-build):not(.classic-web) .play-panel{height:100%;gap:10px}
  body:not(.is-test-build):not(.classic-web) .feed-card{padding:17px 19px;gap:5px 11px}
  body:not(.is-test-build):not(.classic-web) .feed-button{margin-top:6px;min-height:45px}
  body:not(.is-test-build):not(.classic-web) .practice-card{padding:20px 22px;display:flex;flex-direction:column}
  body:not(.is-test-build):not(.classic-web) .practice-card>.eyebrow{margin-bottom:10px}
  body:not(.is-test-build):not(.classic-web) .card-copy{margin:9px 0 12px}
  body:not(.is-test-build):not(.classic-web) .practice-meta{margin-bottom:12px}
  body:not(.is-test-build):not(.classic-web) .practice-card .primary{margin-top:auto}
  body:not(.is-test-build):not(.classic-web) .small-note{padding:0 6px}
}
@media(max-width:720px){
  body:not(.is-test-build):not(.classic-web) .header{padding:7px 12px}
  body:not(.is-test-build):not(.classic-web) .home{height:calc(100dvh - 44px);padding:0 10px}
  body:not(.is-test-build):not(.classic-web) .welcome{height:38px;margin:0 0 6px;gap:5px}
  body:not(.is-test-build):not(.classic-web) .welcome .pet-select{height:36px;padding:6px 8px}
  body:not(.is-test-build):not(.classic-web) .welcome .grade-switch,body:not(.is-test-build):not(.classic-web) .unlock-pet{height:36px;min-height:36px;padding:6px 8px}
  body:not(.is-test-build):not(.classic-web) .game-layout{display:flex;flex-direction:column;gap:7px}
  body:not(.is-test-build):not(.classic-web) .pet-card{flex:1;min-height:0}
  body:not(.is-test-build):not(.classic-web) .pet-heading{flex:0 0 auto;padding:8px 13px 0}
  body:not(.is-test-build):not(.classic-web) .pet-heading h2{font-size:20px}
  body:not(.is-test-build):not(.classic-web) .level{padding:6px 9px}
  body:not(.is-test-build):not(.classic-web) .pet-scene{height:auto;min-height:0;max-height:none;flex:1}
  body:not(.is-test-build):not(.classic-web) #pet-host{width:115%;max-width:none;margin:0 0 -5px -7.5%;padding:0}
  body:not(.is-test-build):not(.classic-web) .speech{top:6px;left:10px;max-width:210px;padding:5px 8px}
  body:not(.is-test-build):not(.classic-web) .halo{width:min(48vw,190px);height:min(48vw,190px)}
  body:not(.is-test-build):not(.classic-web) .growth{flex:0 0 auto;padding:8px 13px 9px}
  body:not(.is-test-build):not(.classic-web) .growth-label{margin-bottom:5px}
  body:not(.is-test-build):not(.classic-web) .evolution-hint{margin-top:5px!important}
  body:not(.is-test-build):not(.classic-web) .play-panel{flex:0 0 108px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body:not(.is-test-build):not(.classic-web) .feed-card,body:not(.is-test-build):not(.classic-web) .practice-card{height:108px;padding:9px;border-radius:16px;min-width:0}
  body:not(.is-test-build):not(.classic-web) .feed-card{order:0;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 39px;gap:4px 6px;align-items:center}
  body:not(.is-test-build):not(.classic-web) .food-illustration{font-size:24px;align-self:center}
  body:not(.is-test-build):not(.classic-web) .food-illustration img{width:28px;height:28px}
  body:not(.is-test-build):not(.classic-web) .feed-card h2{font-size:12px;line-height:1.25;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  body:not(.is-test-build):not(.classic-web) .feed-card #food-copy,body:not(.is-test-build):not(.classic-web) .feed-card>#feed-hint,body:not(.is-test-build):not(.classic-web) .feed-card .eyebrow{display:none}
  body:not(.is-test-build):not(.classic-web) .feed-button{grid-column:1/-1;grid-row:2;margin:0;min-height:39px;padding:6px 8px;font-size:11px;gap:4px;white-space:nowrap}
  body:not(.is-test-build):not(.classic-web) .feed-button>span{font-size:10px}
  body:not(.is-test-build):not(.classic-web) .practice-card{display:flex;flex-direction:column;gap:4px;align-items:stretch}
  body:not(.is-test-build):not(.classic-web) .practice-card>.eyebrow,body:not(.is-test-build):not(.classic-web) .practice-card .card-copy,body:not(.is-test-build):not(.classic-web) .card-icon{display:none}
  body:not(.is-test-build):not(.classic-web) .practice-card h2{font-size:15px;line-height:1.25;white-space:nowrap}
  body:not(.is-test-build):not(.classic-web) .practice-meta{display:flex;gap:3px;margin:0;overflow:hidden}
  body:not(.is-test-build):not(.classic-web) .practice-meta span{font-size:8px;padding:3px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body:not(.is-test-build):not(.classic-web) .practice-card .primary{width:100%;min-width:0;min-height:39px;margin-top:auto;padding:6px;font-size:11px;gap:3px;white-space:nowrap}
  body:not(.is-test-build):not(.classic-web) .small-note{display:none}
  body:not(.is-test-build):not(.classic-web) .home footer{padding:6px 2px 7px;font-size:8px}
}
/* The developer build uses the same tidy two-card phone controls without the
   older implicit third grid column that made Chinese text stack vertically. */
@media(max-width:720px){
  body.is-test-build .play-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch}
  body.is-test-build .feed-card,body.is-test-build .practice-card{height:108px;min-width:0;padding:9px;border-radius:16px}
  body.is-test-build .feed-card{order:0;display:grid;grid-template-columns:28px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 39px;gap:4px 6px;align-items:center}
  body.is-test-build .food-illustration{font-size:24px;align-self:center}
  body.is-test-build .food-illustration img{width:28px;height:28px;margin:0}
  body.is-test-build .feed-card .eyebrow,body.is-test-build .feed-card #food-copy,body.is-test-build .feed-card>#feed-hint{display:none}
  body.is-test-build .feed-card h2{font-size:12px;line-height:1.25;word-break:keep-all;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  body.is-test-build .feed-button{grid-column:1/-1;grid-row:2;margin:0;min-height:39px;padding:6px 8px;font-size:11px;gap:4px;white-space:nowrap}
  body.is-test-build .feed-button>span{font-size:10px}
  body.is-test-build .practice-card{display:flex;flex-direction:column;gap:4px;align-items:stretch}
  body.is-test-build .practice-card>.eyebrow,body.is-test-build .practice-card .card-copy,body.is-test-build .card-icon{display:none}
  body.is-test-build .practice-card h2{font-size:15px;line-height:1.25;white-space:nowrap}
  body.is-test-build .practice-meta{display:flex;gap:3px;margin:0;overflow:hidden}
  body.is-test-build .practice-meta span{font-size:8px;padding:3px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  body.is-test-build .practice-card .primary{width:100%;min-width:0;min-height:39px;margin-top:auto;padding:6px;font-size:11px;gap:3px;white-space:nowrap}
}
@media(max-height:650px) and (max-width:720px){
  body:not(.is-test-build):not(.classic-web) .play-panel{flex-basis:104px}
  body:not(.is-test-build):not(.classic-web) .feed-card,body:not(.is-test-build):not(.classic-web) .practice-card{height:104px;padding:8px}
  body:not(.is-test-build):not(.classic-web) .pet-heading p,body:not(.is-test-build):not(.classic-web) .touch-hint,body:not(.is-test-build):not(.classic-web) .home footer{display:none}
  body:not(.is-test-build):not(.classic-web) .home{height:calc(100dvh - 44px)}
}

/* Equal stage zoom preserves visible growth on evolution. */
#pet-host>samoyed-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
[data-scene=snow] .halo{border:0;background:radial-gradient(circle,#e5f4ff66,transparent 70%)}
[data-scene=snow] .halo:after{border:0}
[data-scene=snow] .hill{background:#a2bce82e}
#pet-host>siamese-game-pet,#pet-host>bichon-game-pet{width:100%;transform:scale(var(--pet-zoom,1));transform-origin:50% 88%}
[data-scene=thai] .halo{border:1px solid #d6aa4c99;border-radius:50% 50% 42% 42%;box-shadow:0 0 46px #38bcb32b;background:radial-gradient(circle,#fff6cf99,transparent 69%)}
[data-scene=thai] .halo:after{inset:24px;border:1px dashed #7c4dbc66;border-radius:50%}
[data-scene=thai] .hill{background:#38bcb32b}
.thai-garden{position:absolute;inset:0;overflow:hidden}.thai-garden i{position:absolute;width:74px;height:126px;bottom:3%;left:-22px;border:2px solid #d6aa4c55;border-radius:90% 10% 90% 10%;background:#43c7bd1c;transform:rotate(-25deg)}.thai-garden i:nth-child(2){left:auto;right:-22px;transform:rotate(55deg)}.thai-garden b,.thai-garden span{position:absolute;color:#d6aa4c99;font-weight:400}.thai-garden b:nth-of-type(1){left:15%;top:24%}.thai-garden b:nth-of-type(2){right:14%;top:18%;font-size:20px}.thai-garden span:nth-of-type(1){left:11%;bottom:17%;color:#7c4dbc55;font-size:21px}.thai-garden span:nth-of-type(2){right:10%;bottom:24%;color:#2abbb355;font-size:17px}

/* Food artwork lives in the animation. Let the copy span the old icon track
   too: the compact phone rules above still define that narrow first column. */
.feed-card{grid-template-columns:1fr}
.feed-card>div{grid-column:1/-1;min-width:0}

/* Give the flex child its full row, keeping brand and wallet apart. */
body:not(.classic-web)>.header{width:100%;max-width:1020px;gap:20px;margin:0 auto}body:not(.classic-web)>.header .brand,body:not(.classic-web)>.header .wallet{flex-shrink:0}