:root{font-family:ui-rounded,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;color:#594744;background:#f8eddf;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:radial-gradient(ellipse at 12% 20%,#ffdbb577,transparent 48%),radial-gradient(ellipse at 84% 75%,#bae2d955,transparent 50%),#f8eddf;overflow:hidden}
button{font:inherit;border:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;color:inherit;user-select:none}button:focus-visible{outline:4px solid #467f8a;outline-offset:3px}button:active{transform:translateY(2px)}button:disabled{cursor:default;opacity:.5}button:disabled:active{transform:none}.hidden{display:none!important}
#game-shell{position:relative;width:min(100vw,calc(100dvh * .5625),540px);aspect-ratio:9/16;max-height:100dvh;overflow:hidden;background:#fff2dd;box-shadow:0 20px 80px #86716624;isolation:isolate}canvas{display:block;width:100%;height:100%;touch-action:none}.screen{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5%;}.screen h2{font-size:clamp(22px,5vw,30px);margin:0 0 14px;font-weight:850}.primary,.secondary{width:100%;border-radius:22px;min-height:64px;font-weight:800;font-size:23px}.primary{background:#f38d72;color:#fff8ed;box-shadow:0 6px 0 #d87562,0 12px 25px #b55b4420}.primary span{float:right;margin-right:10px}.secondary{background:#fffaf0e8;box-shadow:0 4px 0 #ead7bb;font-size:19px}
.site-links,#site-links{position:absolute;z-index:8;top:12px;left:6%;right:6%;display:flex;justify-content:space-between;gap:12px;font-size:11px}#site-links a{display:inline-block;padding:8px 3px;color:#7c7664;text-decoration:none;background:#fff8e688;border-radius:9px;min-height:30px}#site-links a:focus-visible{outline:3px solid #77a99a}
#title-screen{justify-content:space-between;pointer-events:none}.title-copy{align-self:flex-start;margin:10% 0 0 5%;pointer-events:none}.eyebrow{display:inline-block;font-size:12px;letter-spacing:2px;color:#917c66;font-weight:700}.title-copy h1{font-size:clamp(43px,11vw,65px);line-height:1.15;letter-spacing:2px;color:#685448;margin:16px 0;text-shadow:2px 4px 0 #fff9e7}.title-copy h1 span{color:#e98169}.title-copy p{font-size:13px;max-width:230px;line-height:1.7}.title-buttons{width:86%;display:grid;gap:16px;margin-bottom:4%;pointer-events:auto}.title-buttons small{text-align:center;font-size:11px;color:#827563}
#menu-screen{background:#fff3daca;backdrop-filter:blur(5px)}.menu-card{background:#fffcf5;border-radius:30px;padding:22px;width:100%;box-shadow:0 16px 45px #8b796c15}.menu-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.menu-heading h2{font-size:24px;margin:0}.round{min-width:44px;min-height:44px;border-radius:50%;background:#fffaf0e8;font-size:22px;box-shadow:0 2px 0 #dcc6aa55}.mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 12px}.mode-options button{padding:13px 3px;border-radius:16px;background:#eee7db;font-size:15px;font-weight:750}.mode-options button.selected{background:#f2c06d;color:#664719;box-shadow:inset 0 0 0 2px #e7a549}.level-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 22px}.level-grid button{position:relative;min-height:48px;background:#f4eddf;border-radius:13px;font-size:18px;font-weight:800}.level-grid button.selected{background:#9dccba;box-shadow:inset 0 0 0 2px #69a98e}.level-grid button.locked{font-size:13px;opacity:.45}.level-grid .record{position:absolute;bottom:2px;right:5px;font-size:10px}#level-detail{font-size:13px;line-height:1.6;min-height:42px;margin:0}.menu-foot{margin-top:17px;display:grid;gap:12px;justify-items:center;font-size:11px;color:#887b68}.text-button{font-size:11px;background:transparent;text-decoration:underline;color:#9a8c78;min-height:32px}
#race-hud{position:absolute;z-index:2;left:5%;right:5%;top:max(2%,env(safe-area-inset-top));pointer-events:none}.hud-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.hud-heading>span{background:#fff8e6df;border-radius:20px;padding:8px 12px;font-size:14px;font-weight:800}.hud-actions{display:flex;gap:8px;pointer-events:auto}.hud-actions button{min-width:40px;min-height:40px;font-size:20px}.progress-card{background:#fffaf0da;border-radius:16px;padding:10px 14px;margin-top:10px;box-shadow:0 3px 15px #8168470a}.progress-row{display:flex;align-items:center;gap:8px;font-size:12px;margin:3px 0}.progress-row span{width:65px}.progress-row progress{width:100%;height:9px;appearance:none;-webkit-appearance:none;border:0;border-radius:10px;overflow:hidden;background:#e8dcc7}.progress-row progress::-webkit-progress-bar{background:#e8dcc7}.progress-row progress::-webkit-progress-value{background:#ec9f9b;border-radius:10px}#brother-progress::-webkit-progress-value{background:#80b8bd}progress::-moz-progress-bar{background:#ec9f9b}
#controls{position:absolute;z-index:3;bottom:max(2%,env(safe-area-inset-bottom));left:5%;right:5%;display:flex;gap:12px;align-items:stretch;justify-content:center}.direction{flex:1;min-width:64px;min-height:72px;background:#fff8e9;border-radius:22px;font-size:32px;box-shadow:0 5px 0 #debf91;color:#9c8061}#call{flex:1.7;min-height:72px;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:22px;background:#9dcabb;color:#355e51;box-shadow:0 5px 0 #77a99a;padding:6px 3px;line-height:1.25}#call span{font-size:20px}#call strong{font-size:12px}#call small{font-size:10px;margin-top:3px}#call.cooling{background:#c7d8cb;color:#5e7168}#bubble{position:absolute;z-index:3;top:29%;left:8%;right:8%;border-radius:22px;background:#fffdf5f2;padding:12px 15px;font-size:17px;font-weight:750;line-height:1.5;text-align:center;box-shadow:0 4px 0 #d7c8ac44;pointer-events:none}#bubble:after{content:"";position:absolute;bottom:-11px;left:28%;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #fffdf5f2}#effects{position:absolute;z-index:2;bottom:16.5%;left:8%;right:8%;display:flex;justify-content:center;gap:5px;pointer-events:none;font-size:13px;font-weight:750;text-shadow:0 1px #fff}#effects span{background:#fff9e4ed;border-radius:20px;padding:6px 9px}
#dialog-screen{background:#574b3338;backdrop-filter:blur(3px)}.dialog-card{width:100%;max-width:410px;padding:27px 23px;border-radius:30px;background:#fffaf0;box-shadow:0 15px 65px #71604a30;text-align:center}.dialog-card p{font-size:16px;line-height:1.7;margin:8px 0 20px}.dialog-card .primary{font-size:20px}.dialog-card .secondary{margin-top:15px;font-size:18px}.lesson-icon{font-size:58px;margin:4px 0 14px}.lesson-move{display:flex;align-items:center;justify-content:space-evenly;margin:10px 0 22px;font-size:35px}.finger{display:inline-block;animation:pointing 2s ease-in-out infinite}@keyframes pointing{0%,100%{transform:translateX(-28px)}50%{transform:translateX(28px)}}@media(prefers-reduced-motion:reduce){.finger{animation:none}}
#result-screen{justify-content:flex-end;pointer-events:none}.result-card{width:100%;background:#fffaf0f0;border-radius:26px;padding:22px;text-align:center;pointer-events:auto;box-shadow:0 10px 40px #92745918}.result-card h2{font-size:28px;margin:12px 0}.result-card p{font-size:15px;line-height:1.5;margin:8px 0}#result-record{font-size:11px;color:#8a7c69}#result-buttons{display:grid;gap:12px;margin-top:16px}#result-buttons .primary{font-size:20px}#result-buttons .secondary{font-size:17px;min-height:48px}.result-secondary{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skip{position:absolute;z-index:4;right:5%;bottom:5%;background:#fff9e9e6;border-radius:22px;padding:14px 18px;font-weight:700;font-size:14px;min-height:48px}
#menu-screen{padding:50px 12px 12px;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain}.menu-card{padding:16px;flex-shrink:0}.menu-heading .round{min-height:40px;min-width:40px}.mode-options{margin:10px 0 6px}.mode-options button{padding:9px 3px}#level-detail{min-height:32px;font-size:12px}.level-grid{gap:6px;margin:10px 0 14px}.level-grid button{min-height:34px}.menu-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:10px;gap:10px}.menu-foot .text-button{font-size:10px;white-space:nowrap}
@media(min-width:650px){#game-shell{border-radius:28px;border:8px solid #fff7ec;height:min(94dvh,920px);width:auto;max-height:94dvh}}
@media(max-height:620px){.menu-card{padding:14px}.menu-heading h2{font-size:19px}.mode-options{margin:10px 0}.level-grid{gap:5px;margin:8px 0 12px}.level-grid button{min-height:32px;font-size:13px}.menu-foot{margin-top:10px;gap:3px}.menu-card>.primary{min-height:48px}.title-buttons{gap:10px}.title-buttons .primary,.title-buttons .secondary{min-height:48px;font-size:16px}.direction,#call{min-height:64px}.dialog-card{padding:17px}.lesson-icon{font-size:40px}.dialog-card p{font-size:14px}}
@media(orientation:landscape) and (max-height:620px){
  #game-shell{overflow:visible;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none}#scene{border-radius:20px}
  .hud-heading>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-size:11px;padding:7px}.hud-actions{gap:4px}.hud-actions button{min-width:32px;min-height:32px;font-size:16px}.progress-card{padding:7px}.progress-row{font-size:10px}.progress-row span{width:57px;flex-shrink:0}
  #controls{width:min(88vw,350px);left:50%;right:auto;transform:translateX(-50%);bottom:12px;gap:12px}.direction{min-width:72px}#call{min-width:110px}.direction,#call{min-height:64px}#effects{bottom:88px;left:-65px;right:-65px;font-size:11px}#bubble{width:min(88vw,330px);left:50%;right:auto;transform:translateX(-50%);top:26%;font-size:14px;padding:8px}
  #menu-screen,#dialog-screen,#error-screen,#result-screen{width:min(94vw,440px);left:50%;right:auto;transform:translateX(-50%);padding:12px;overflow-y:auto}#menu-screen{justify-content:flex-start}.menu-card{flex-shrink:0}.result-card{padding:16px}.result-card h2{font-size:23px}.result-card p{font-size:13px}.result-card .primary{min-height:48px;font-size:18px}.result-card .secondary{min-height:40px;font-size:15px}#result-buttons{gap:9px;margin-top:10px}
  #title-screen{width:min(94vw,660px);left:50%;right:auto;transform:translateX(-50%);padding:0}.title-copy{position:absolute;left:0;top:6%;margin:0;width:190px}.title-copy h1{font-size:36px;line-height:1.15}.title-copy p{font-size:12px;width:180px}.title-copy .eyebrow{font-size:10px}.title-buttons{position:absolute;right:0;bottom:7%;width:180px;margin:0}.title-buttons small{font-size:10px}.skip{position:fixed;left:calc(50% + 140px);right:auto;bottom:18px;white-space:nowrap}
  #race-hud{position:fixed;width:190px;left:calc(50% - 320px);right:auto;top:14px}#bubble{position:fixed;width:190px;left:calc(50% - 320px);right:auto;transform:none;top:118px}#effects{position:fixed;width:190px;left:calc(50% - 320px);right:auto;bottom:100px;flex-wrap:wrap}
  #menu-screen{padding:8px}.menu-card{padding:12px}.menu-heading h2{font-size:18px}.menu-heading .round{min-height:32px;min-width:32px}.mode-options{margin:6px 0}.mode-options button{padding:8px 3px;font-size:13px}#level-detail{min-height:20px;font-size:11px;line-height:20px;white-space:nowrap}.level-grid{gap:4px;margin:6px 0}.level-grid button{min-height:28px;font-size:12px}.menu-card>.primary{min-height:44px;font-size:18px}.menu-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;font-size:10px;gap:10px}.menu-foot .text-button{min-height:24px;font-size:10px}
  #site-links{position:fixed;top:12px;right:22px;left:auto;flex-direction:column;gap:4px;font-size:10px}#site-links a{min-height:26px;padding:6px 8px}
}