@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;500;600;700;800;900&display=swap');
:root{--ink:#253b32;--muted:#7c8175;--paper:#fffaf2;--orange:#fa7049;--green:#2b5844;--line:#e6e7db;--soft:#edf0e4}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans KR',sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;border:0;background:none;touch-action:manipulation}button:disabled{cursor:default;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f47b51;outline-offset:4px}button:hover:not(:disabled){filter:brightness(.96)}.topbar{height:100px;max-width:1320px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Black Han Sans',sans-serif;font-size:38px;letter-spacing:-2px;display:flex;align-items:center;padding:0}.brand span{color:var(--orange)}.brand i{font:800 10px 'Noto Sans KR',sans-serif;letter-spacing:1.6px;margin-left:20px;max-width:110px;line-height:1.6;text-align:left}.topbar nav{display:flex;gap:34px;align-items:center}.topbar nav button{font-size:14px;font-weight:600;padding:13px 0}.topbar .nav-active{border-bottom:2px solid var(--orange)}.profile-dot{font-size:23px;color:#df9e62;margin-left:8px}main{max-width:1320px;margin:auto;padding:32px 48px 28px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;display:flex;gap:9px;align-items:center}.eyebrow:before{content:'';width:7px;height:7px;background:var(--orange);border-radius:50%}.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;background:#f2f0e2;border-radius:26px;min-height:355px;overflow:hidden}.hero-copy{padding:40px 42px;position:relative;z-index:1}.hero h1{font-size:45px;line-height:1.25;letter-spacing:-2.5px;margin:18px 0 15px;font-weight:900}.hero h1 em{color:var(--orange);font-style:normal}.hero p{color:#72796b;font-size:14px;line-height:1.9;margin:0}.hero-actions{display:flex;align-items:center;gap:18px;margin-top:25px}.primary{background:var(--orange);color:white;border-radius:13px;padding:16px 24px;font-weight:800;font-size:15px;box-shadow:0 5px 0 #df603b;display:inline-flex;gap:22px;justify-content:center;align-items:center}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #df603b}.secondary{background:white;border:1px solid var(--line);border-radius:12px;padding:14px 20px;font-weight:700}.text-button{font-size:13px;text-decoration:underline;text-underline-offset:4px;font-weight:500}.hero-art{width:100%;height:100%;position:absolute;right:0;top:0;pointer-events:none}.hero-visual{position:relative;min-height:350px}.float-tag{position:absolute;background:white;padding:10px 17px;border-radius:12px;box-shadow:0 6px 20px #2a42280b;font-size:12px;font-weight:700;transform:rotate(-5deg);top:43px;left:20px}.float-tag.second{top:auto;bottom:38px;left:auto;right:27px;transform:rotate(6deg);color:var(--orange)}.stats-strip{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:23px 7px;margin-bottom:28px}.hello{display:flex;align-items:center;gap:12px;font-size:13px;color:#6e786b}.hello-icon{height:36px;width:36px;border-radius:50%;display:grid;place-items:center;background:#e8eddc;font-size:19px}.hello b{color:var(--ink)}.stat-items{display:flex;gap:32px}.stat{font-size:12px;color:var(--muted)}.stat b{font-size:20px;color:var(--ink);margin-right:5px}.stat+.stat{border-left:1px solid var(--line);padding-left:32px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 0 18px}.section-head h2{margin:0;font-size:23px;letter-spacing:-.7px}.section-head p{font-size:12px;color:var(--muted);margin:7px 0 0}.section-head .pill{font-size:11px;letter-spacing:.4px}.pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:30px;background:var(--soft);font-size:12px;font-weight:600;gap:6px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.course-card{border:1px solid var(--line);border-radius:19px;overflow:hidden;text-align:left;padding:0;background:#fffdf8;transition:transform .2s,box-shadow .2s}.course-card:hover{transform:translateY(-4px);box-shadow:0 8px 25px #2b443014}.card-art{height:148px;position:relative;background:#fbe3cf}.card-art.legs{background:#e7ecd5}.card-art.all{background:#e5e3f2}.card-art canvas{width:100%;height:100%;display:block}.card-art .tag{position:absolute;left:17px;top:15px;background:#fff8;font-size:10px;font-weight:800;border-radius:20px;padding:5px 10px;letter-spacing:1px}.card-body{padding:19px 21px 16px}.card-body h3{font-size:19px;margin:0 0 7px}.card-body p{font-size:12px;color:var(--muted);margin:0 0 17px}.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;border-top:1px solid var(--line);padding-top:12px;color:#798172}.card-meta b{display:grid;place-items:center;background:var(--green);width:25px;height:25px;border-radius:50%;color:white;font-size:17px}.bottom-row{display:flex;gap:20px;justify-content:space-between;margin-top:23px;align-items:center}.coming{font-size:11px;color:var(--muted);display:flex;gap:13px;align-items:center}.coming span{border:1px dashed #d7dbce;border-radius:8px;padding:8px 13px}.safety{font-size:11px;color:#8a8d81;line-height:1.8}footer{max-width:1224px;margin:0 auto;padding:20px 0 24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:10px;color:#93978b;letter-spacing:.3px}footer b{color:var(--green);margin-left:8px}.page-title{font-size:32px;margin:12px 0}.page-desc{color:var(--muted);font-size:14px;line-height:1.8}.back{font-size:13px;margin-bottom:12px;padding:6px 0}.center-panel{max-width:880px;margin:20px auto}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.preview-avatar{background:#eef0df;border-radius:24px;display:flex;align-items:center;flex-direction:column;padding:20px}.preview-avatar canvas{width:100%;height:270px}.profile-form label{display:block;font-size:12px;font-weight:700;margin:15px 0 7px}.profile-form select,.profile-form input[type=number]{width:100%;border:1px solid #dfe3d6;border-radius:9px;padding:12px;background:#fffdfa;color:var(--ink)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.choices{display:flex;gap:10px}.choice{background:white;border:2px solid transparent;border-radius:12px;padding:9px 15px;font-size:22px}.choice.selected{border-color:var(--orange);background:#fff1e6}.swatch{width:37px;height:37px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 1px #ddd}.swatch.selected{box-shadow:0 0 0 3px var(--ink)}.checks{margin:20px 0;font-size:12px;color:var(--muted)}.checks label{display:flex;gap:9px;align-items:center;margin:12px 0;font-weight:500}.checks input{accent-color:var(--orange)}.note{font-size:12px;color:#7b806f;background:#f0f0e4;border-radius:12px;padding:14px 17px;line-height:1.8;margin:15px 0}.course-summary{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center}.course-poster{border-radius:24px;background:#e5ebd5;height:390px;width:100%}.course-list{list-style:none;padding:0;margin:22px 0}.course-list li{display:flex;align-items:center;gap:15px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}.course-list .number{color:#a4ac98;font-size:12px;min-width:20px}.course-list small{margin-left:auto;color:var(--muted);font-size:11px}.mode-badge{background:#f9e6cc;color:#9c6925;border-radius:5px;padding:5px 10px;font-size:11px;font-weight:700}.game-shell{position:relative;max-width:1200px;margin:auto}.game-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}.game-top h2{font-size:20px;margin:0}.game-top .spacer{flex:1}.icon-button{border:1px solid var(--line);border-radius:10px;background:#fffdf8;padding:9px 13px;font-size:12px}.game-stage{position:relative;border-radius:24px;overflow:hidden;background:#e9eddf;aspect-ratio:16/9;min-height:320px}.game-canvas{width:100%;height:100%;display:block}.camera-preview{position:absolute;right:20px;top:80px;width:19%;aspect-ratio:4/3;border:3px solid #fffc;border-radius:14px;background:#1f342d;overflow:hidden}.camera-preview canvas{width:100%;height:100%}.hud{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.hud-timer{background:#fffdf3e8;border-radius:15px;padding:10px 20px;font-size:27px;font-weight:900;min-width:100px;text-align:center;font-variant-numeric:tabular-nums}.hud-score{background:#fffdf3e8;border-radius:15px;padding:10px 20px;font-size:14px}.hud-score b{font-size:27px;margin-right:5px}.game-hint{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);font-size:19px;font-weight:800;text-align:center;background:#fffdf5eb;padding:13px 26px;border-radius:15px;white-space:nowrap;max-width:92%}.judgment{position:absolute;top:24%;left:50%;transform:translateX(-50%) rotate(-7deg);font-size:48px;font-weight:900;color:#f66c42;text-shadow:3px 3px 0 #fff;pointer-events:none;opacity:0}.judgment.show{animation:pop .7s ease forwards}.combo{position:absolute;left:28px;top:110px;font-size:14px;font-weight:800;color:#eb7046}.progress{height:5px;background:#e0e5d7;border-radius:10px;margin-top:15px;overflow:hidden}.progress>div{height:100%;background:var(--orange);transition:width .2s}.stage-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:9px}.game-controls{display:flex;justify-content:center;gap:10px;margin:18px 0}.game-controls button{background:white;border:1px solid var(--line);padding:11px 19px;border-radius:12px;font-size:12px;font-weight:700}.debug{position:absolute;bottom:80px;left:16px;background:#183227d9;color:#bdecb8;font:12px monospace;white-space:pre;padding:10px;border-radius:7px}.overlay{position:absolute;inset:0;background:#1f392ed9;display:flex;align-items:center;justify-content:center;flex-direction:column;color:white;text-align:center;padding:30px;z-index:3;backdrop-filter:blur(5px)}.overlay h2{font-size:32px;margin:10px 0}.overlay p{color:#d2dece;font-size:14px;line-height:1.9;max-width:530px}.overlay .primary{margin:10px}.calibration-canvas{width:100%;height:100%;display:block}.calibration-message{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:#fffc;padding:15px 25px;border-radius:15px;text-align:center;width:max-content;max-width:90%;font-weight:700}.result-banner{text-align:center;padding:25px}.result-banner h1{font-size:38px;margin:15px 0 10px}.big-star{font-size:55px;color:#f6b644;letter-spacing:10px}.result-metrics{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:20px;background:white;margin:24px 0}.result-metrics div{text-align:center;padding:25px 10px}.result-metrics b{display:block;font-size:29px}.result-metrics span{font-size:12px;color:var(--muted)}.result-table{width:100%;border-collapse:collapse;text-align:left;font-size:13px;margin:25px 0}.result-table td,.result-table th{border-bottom:1px solid var(--line);padding:16px 10px}.result-table th{font-size:11px;color:var(--muted);font-weight:500}.record-row{display:flex;gap:22px;align-items:center;background:white;padding:21px 25px;border:1px solid var(--line);border-radius:15px;margin:12px 0;font-size:13px}.record-row b{flex:1}.record-row small{color:var(--muted)}.empty{text-align:center;border:1px dashed #cfd7c4;border-radius:24px;padding:70px 25px;margin:35px 0}.empty h2{font-size:23px}.empty p{font-size:14px;color:var(--muted);margin-bottom:25px}dialog{border:0;border-radius:24px;max-width:610px;width:calc(100% - 35px);padding:32px;color:var(--ink);background:var(--paper)}dialog::backdrop{background:#1c322a99;backdrop-filter:blur(5px)}dialog h2{font-size:25px}dialog p,dialog li{font-size:14px;line-height:1.9;color:#747e6c}dialog .close{position:absolute;right:16px;top:10px;font-size:28px}#hand{display:none;position:fixed;width:40px;height:40px;border:4px solid #fb704b;border-radius:50%;z-index:20;pointer-events:none;background:#fff7;transform:translate(-50%,-50%);box-shadow:0 0 0 5px #ffffff44}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;border-radius:12px;background:#233d33;color:white;font-size:13px;z-index:30;display:none;max-width:90vw}.landscape-note{display:none}body.playing .topbar{height:72px}body.playing main{padding-top:20px}body.playing footer{display:none}@keyframes pop{0%{opacity:0;scale:.7}20%{opacity:1;scale:1.1}75%{opacity:1;scale:1}100%{opacity:0;scale:1.05}}
@media(min-width:1500px){main{padding-top:40px}.hero{min-height:390px}.hero-copy{padding:47px}.hero h1{font-size:50px}.card-art{height:170px}}
@media(max-width:900px){.topbar{padding:0 25px;height:80px}.topbar nav{gap:20px}.brand i{display:none}main{padding:25px}.hero-copy{padding:30px}.hero h1{font-size:35px}.hero-visual{min-height:330px}.hero-actions{gap:13px;flex-wrap:wrap}.float-tag{left:5px;font-size:10px}.stats-strip{gap:20px}.stat-items{gap:18px}.stat+.stat{padding-left:18px}.cards{gap:13px}.card-body{padding:16px}.card-art{height:135px}.bottom-row{flex-wrap:wrap}footer{margin:0 25px}.hero p{font-size:12px}.game-hint{font-size:16px}.course-summary{gap:25px}.course-poster{height:330px}.setup-grid{gap:20px}.record-row{gap:12px}}
@media(max-width:620px){.topbar{height:72px;padding:0 20px}.brand{font-size:32px}.topbar nav{gap:17px}.topbar nav button{font-size:11px}.profile-dot{display:none}main{padding:20px}.hero{display:flex;flex-direction:column}.hero-copy{padding:28px 26px 5px}.hero h1{font-size:36px}.hero-visual{min-height:245px}.float-tag{top:23px;left:25px}.float-tag.second{bottom:20px;right:20px}.hero-actions{margin-top:20px}.primary{font-size:14px;padding:15px 20px}.stats-strip{align-items:flex-start;flex-direction:column;padding:20px 0;gap:18px}.stat-items{width:100%;justify-content:space-between}.stat{font-size:10px}.stat b{font-size:20px}.stat+.stat{padding-left:18px}.section-head h2{font-size:21px}.section-head .pill{display:none}.cards{grid-template-columns:1fr;gap:14px}.course-card{display:grid;grid-template-columns:42% 1fr;align-items:stretch}.card-art{height:100%;min-height:165px}.card-body{padding:20px 16px}.card-body h3{font-size:18px}.card-body p{font-size:11px}.card-meta{font-size:10px}.bottom-row{gap:14px}.coming{font-size:10px;gap:8px}.coming span{padding:6px 9px}footer{margin:0 20px;font-size:9px;gap:20px}.setup-grid,.course-summary{grid-template-columns:1fr}.preview-avatar canvas{height:170px}.preview-avatar{padding:10px}.preview-avatar .pill{display:none}.course-poster{height:220px}.game-top{flex-wrap:wrap;gap:8px}.game-top h2{font-size:16px}.game-stage{min-height:380px;aspect-ratio:3/4}.hud{top:15px;left:14px;right:14px}.hud-timer{font-size:22px;padding:9px 15px;min-width:80px}.hud-score{padding:9px 15px}.hud-score b{font-size:22px}.game-hint{white-space:normal;font-size:15px;width:90%;padding:12px 15px}.camera-preview{width:24%;right:12px;top:75px}.combo{left:17px;top:92px;font-size:11px}.result-metrics{grid-template-columns:repeat(2,1fr)}.result-metrics div{padding:20px 10px}.result-table{font-size:11px}.result-table td,.result-table th{padding:12px 4px}.result-banner h1{font-size:29px}.game-controls{flex-wrap:wrap}.game-controls button{padding:10px 13px}.landscape-note{display:block;text-align:center;font-size:11px;color:var(--muted);margin:9px 0}.record-row{flex-wrap:wrap}.record-row b{flex-basis:50%}.page-title{font-size:27px}}
@media(max-height:580px) and (orientation:landscape){body.playing .topbar,body.playing footer{display:none}body.playing main{padding:8px 20px}.game-top{margin-bottom:6px}.game-top h2{font-size:15px}.game-stage{height:calc(100dvh - 125px);min-height:0;aspect-ratio:auto}.game-controls{position:absolute;bottom:30px;right:15px;margin:0;z-index:2}.game-controls button{font-size:10px;padding:6px}.game-hint{font-size:15px;bottom:12px;padding:8px 15px}.progress{margin-top:7px}.hud{top:12px}.hud-timer{font-size:22px}.hud-score b{font-size:20px}.camera-preview{top:65px;max-width:120px}.combo{top:85px}.landscape-note{display:none}.game-top .icon-button{padding:6px 10px}}
.game-stage{max-height:calc(100dvh - 250px)}.game-hint{white-space:normal;width:max-content;line-height:1.5}.hero-copy{min-width:0}.secondary{color:var(--ink)}h1,h2,h3,p,.game-hint{word-break:keep-all}.overlay h2{font-size:clamp(24px,3vw,32px)}
@media(max-height:580px) and (orientation:landscape){.game-stage{max-height:none}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition:none!important}}
.hero{background:linear-gradient(115deg,#f1f0e4 43%,#e5eddf)}.hero-visual{min-height:380px}.hero-art{pointer-events:none}.partner-strip{display:flex;align-items:center;justify-content:space-between;padding:17px 5px 0;font-size:12px;color:#788170}.partner-strip b{color:var(--ink);font-weight:800}.partner-strip button{padding:8px 14px;border:1px solid #d5decf;border-radius:30px;font-size:12px;font-weight:700}.partner-strip button b{margin-left:17px}.stats-strip{margin-top:3px;padding-top:16px}.card-art{height:180px}.graphics-notice{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:90%;z-index:40;padding:12px 18px;background:#2d483a;color:white;border-radius:12px;font-size:12px}.character-room{padding:0 0 20px}.room-title{margin:10px 0 26px;align-items:center}.room-title .page-title{margin:14px 0 8px;font-size:34px}.studio-layout{display:grid;grid-template-columns:1.13fr 1fr;gap:42px}.studio-display{position:relative;border-radius:28px;background:radial-gradient(ellipse at 50% 45%,#f4f5e8,#e5ebdf);min-height:585px;padding:20px;display:flex;flex-direction:column;overflow:hidden;border:1px solid #dce3d3}.studio-label{display:flex;justify-content:space-between;color:#7c8c75;letter-spacing:1.4px;font-size:10px;font-weight:800}.studio-label span:first-child:before{content:'●';font-size:7px;margin-right:7px;color:#679a72}#studio-canvas{width:100%;height:415px;cursor:grab;flex:1;min-height:300px}#studio-canvas:active{cursor:grabbing}.rotation-controls{display:flex;align-items:center;justify-content:center;gap:21px;font-size:11px;color:#89937e}.rotation-controls button{width:33px;height:33px;border-radius:50%;border:1px solid #ccd6c5;font-size:23px;background:#f8f9ed}.motion-controls{display:flex;gap:5px;justify-content:center;margin:19px 0 2px}.motion-controls button{padding:10px 16px;border-radius:25px;font-size:11px;background:#f7f9f1;color:#77836e;border:1px solid #dce4d3}.motion-controls button.selected{background:#345945;color:white;border-color:#345945}.character-info{padding:0 0 18px}.character-info>span{font-size:10px;letter-spacing:1.5px;font-weight:700;color:#a0886b}.character-info h2{font-size:36px;margin:6px 0;letter-spacing:-1px}.character-info p{font-size:13px;color:#7e8974;margin:0}.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.character-card{border:2px solid transparent;border-radius:17px;background:var(--character-bg);position:relative;overflow:hidden;padding:0;text-align:left;transition:border-color .2s,transform .2s}.character-card.selected{border-color:#54775e;box-shadow:0 0 0 3px #54775e14}.character-card:hover{transform:translateY(-3px)}.character-card canvas{width:100%;height:132px;display:block;pointer-events:none}.character-card>span{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#ffffff65}.character-card b{font-size:13px}.character-card small{font-size:10px;color:#7a8172}.character-card i{position:absolute;top:8px;right:8px;font-style:normal;display:none;width:21px;height:21px;border-radius:50%;background:#41684d;color:white;text-align:center;line-height:21px;font-size:11px}.character-card.selected i{display:block}.outfit-row{display:flex;justify-content:space-between;align-items:center;margin:24px 0;font-size:12px;font-weight:700}.save-character{width:100%;justify-content:space-between}.studio-options>.safety{text-align:center;margin-top:18px}.mini-grid{display:grid;grid-template-columns:repeat(3,1fr)}.character-mini{font-size:14px;padding:9px 17px;font-weight:700}.character-mini small{display:block;font-size:9px;color:#87917b;margin-top:3px}.preview-avatar{background:radial-gradient(#f4f6e9,#e3ebda)}.preview-avatar canvas{height:330px}.preview-avatar .profile-form{width:100%;max-width:330px}.topbar nav{gap:25px}.game-stage{background:#e5eddf}.card-art canvas{pointer-events:none}
@media(max-width:1000px){.studio-layout{gap:24px;grid-template-columns:1fr 1fr}.studio-display{min-height:550px;padding:15px}.character-card canvas{height:105px}.character-grid{gap:8px}.motion-controls button{padding:9px 11px}.room-title .page-title{font-size:29px}}
@media(max-width:620px){.topbar nav{gap:13px}.topbar nav button{font-size:10px}.hero-visual{min-height:275px}.partner-strip{font-size:10px;gap:10px;align-items:center}.partner-strip button{white-space:nowrap;font-size:10px;padding:8px 10px}.partner-strip button b{margin-left:5px}.partner-strip>span{max-width:55%}.card-art{height:100%;min-height:165px}.studio-layout{grid-template-columns:1fr;gap:25px}.room-title .page-title{font-size:26px}.room-title p{font-size:12px;line-height:1.7}.studio-display{min-height:390px;max-height:480px}.studio-label{font-size:9px}#studio-canvas{height:270px;min-height:250px}.character-info{padding:0 0 14px}.character-info h2{font-size:30px}.character-card canvas{height:112px}.character-card>span{padding:9px}.character-card b{font-size:12px}.character-card small{font-size:9px}.outfit-row{margin:20px 0}.preview-avatar canvas{height:255px}.mini-grid{gap:7px}.character-mini{padding:8px 14px}.motion-controls{gap:7px}.motion-controls button{padding:9px 14px}.room-title .pill{display:none}}

.game-stage{max-height:calc(100dvh - 320px)}
@media(max-height:580px) and (orientation:landscape){.game-stage{max-height:none}}

.game-stage{width:100%}

/* Keep the camera video in the render tree for mobile inline playback. */
.camera-source{position:fixed;left:0;bottom:0;width:1px;height:1px;opacity:.01;pointer-events:none;object-fit:cover}
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
button,a,input,select{touch-action:manipulation}
@media(max-width:600px){.game-top{flex-wrap:wrap;gap:6px}.game-top h2{max-width:calc(100% - 70px)}.game-top .icon-button{min-height:40px}.game-hint{white-space:normal}.bottom-row{flex-wrap:wrap}.debug{font-size:10px;max-width:85%;overflow:auto}}
/* Immersive training layout */
body.playing{overflow:hidden;background:#101c22;padding:0}body.playing>.topbar,body.playing>footer{display:none}body.playing main{padding:0;margin:0;max-width:none}body.playing .game-shell{position:fixed;inset:0;max-width:none}body.playing .game-stage{position:absolute;inset:0;width:100%;height:100dvh;max-height:none;min-height:0;aspect-ratio:auto;border-radius:0;background:#17262c}body.playing .game-top{position:absolute;inset:0 0 auto;z-index:8;height:58px;margin:0;padding:7px max(14px,env(safe-area-inset-right)) 7px max(14px,env(safe-area-inset-left));background:linear-gradient(#10232bf2,#10232b95);color:#fff;gap:7px;flex-wrap:nowrap;box-sizing:border-box}body.playing .game-top h2{font-size:15px;white-space:nowrap;max-width:none}body.playing .game-top .pill{background:#ffffff1c;color:#fff;font-size:10px}body.playing .icon-button{min-height:42px;color:#edf7f6;border-color:#ffffff30;background:#ffffff12;padding:8px 11px;white-space:nowrap;font-size:11px}body.playing .hud{top:76px;left:22px;right:22px}body.playing .hud-score,body.playing .hud-timer{background:#112732cf;color:#fff;border:1px solid #ffffff30;border-radius:10px;backdrop-filter:blur(8px)}body.playing .hud-timer{font-size:23px}body.playing .game-hint{bottom:55px;font-size:16px;max-width:70%;background:#112732dc;color:#fff;border:1px solid #ffffff35;border-radius:9px;padding:11px 22px;white-space:normal}body.playing .progress{position:absolute;bottom:0;left:0;right:0;height:4px;margin:0;z-index:6;background:#ffffff30}body.playing .stage-labels,body.playing .game-shell>.safety{display:none}body.playing .game-controls{position:absolute;left:0;right:0;bottom:8px;z-index:8;margin:0;gap:8px}body.playing .game-controls button{min-height:38px;background:#102630d9;color:#fff;border-color:#ffffff50;border-radius:8px;font-size:12px;padding:8px 20px}body.playing .camera-preview{top:auto;bottom:114px;right:20px;width:150px;max-width:18%;border-radius:10px;z-index:2}body.playing .combo{color:#30e8c5;top:140px;text-shadow:0 2px 8px #000}.lesson-open .camera-preview{left:20px;right:auto;bottom:110px}.lesson-open .hud-timer{display:none}.lesson-open .game-hint{left:27%;max-width:42%;font-size:12px;bottom:55px}.lesson-panel{position:absolute;z-index:4;top:75px;bottom:68px;right:max(22px,env(safe-area-inset-right));width:38%;max-width:480px;min-width:300px;padding:23px;overflow:auto;border:1px solid #ffffff45;border-radius:16px;background:#10232bec;backdrop-filter:blur(18px);color:#f2f8f6;box-shadow:0 18px 60px #0005;box-sizing:border-box}.lesson-panel[hidden]{display:none}.lesson-panel .eyebrow{color:#41dfbe;font-size:10px;letter-spacing:2px}.lesson-panel h2{font-size:24px;letter-spacing:-.5px;margin:12px 0}.lesson-panel ol{padding-left:23px;margin:15px 0;display:grid;gap:12px;font-size:14px;line-height:1.65}.lesson-cue{font-size:12px;line-height:1.6;color:#b6c8ce}.lesson-panel small{font-size:10px;color:#a2b8bf;line-height:1.6}.lesson-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}.lesson-actions button{min-height:46px;padding:12px 17px;font-size:12px}.lesson-actions button:disabled{opacity:.45;cursor:not-allowed}.lesson-progress{height:5px;border-radius:8px;background:#ffffff25;margin:12px 0;overflow:hidden}.lesson-progress span{display:block;height:100%;width:0;background:#37e0b9;transition:width .2s}#lesson-status{font-size:13px;font-weight:700;line-height:1.6;color:#6de9ce}.countdown{position:absolute;inset:0;display:grid;place-items:center;color:white;font-size:150px;font-weight:900;background:#10232b55;text-shadow:0 5px 30px #000;z-index:5}.countdown[hidden]{display:none}.speed-readout{position:absolute;right:22px;bottom:35px;font:800 34px sans-serif;color:#fff;text-shadow:0 2px 8px #123;z-index:3}.speed-readout small{display:block;font-size:10px;letter-spacing:1px}.rotate-guard{display:none;position:fixed;inset:0;background:#101d27f5;color:white;z-index:50;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}.rotate-guard>span{font-size:100px;color:#39dcbc}.rotate-guard h2{font-size:25px}.rotate-guard p{font-size:14px;line-height:1.7;color:#b6c9d2}.rotate-guard .secondary{margin-top:24px}#hand{width:52px;height:52px;border:2px solid #fff;display:none;place-items:center;z-index:1000;color:#fff;font:18px sans-serif;box-shadow:0 0 0 5px #20d5b433,0 3px 16px #0008}button.hand-target,a.hand-target{outline:3px solid #32dfbc!important;outline-offset:4px;box-shadow:0 0 20px #2fe3c566!important}.hero-art{border-radius:18px}.studio-display{background:#182831}.studio-label{color:white;text-shadow:0 2px 7px #000}.studio-display canvas{border-radius:18px}.character-card canvas{background:#23343b}.character-card{border-radius:12px}.character-info h2{font-size:36px}.character-room .page-title{font-size:34px}.game-stage .overlay{z-index:12}.game-stage .overlay button{min-height:50px}.game-stage .debug{z-index:9;bottom:140px;max-width:45%}
@media(max-height:520px) and (orientation:landscape){body.playing .game-top{height:49px;padding-top:3px;padding-bottom:3px}body.playing .game-top h2{font-size:12px}body.playing .game-top .pill{display:none}body.playing .icon-button{padding:6px 9px;min-height:38px;font-size:10px}body.playing .hud{top:59px}.lesson-panel{top:56px;bottom:49px;padding:15px;min-width:290px;width:41%}.lesson-panel h2{font-size:19px;margin:7px 0}.lesson-panel ol{font-size:12px;gap:7px;margin:10px 0}.lesson-cue{font-size:11px;margin:8px 0}.lesson-actions button{min-height:42px;padding:9px 12px;font-size:11px}#lesson-status{font-size:12px}.lesson-progress{margin:8px 0}body.playing .game-hint{font-size:13px;bottom:48px;padding:8px 14px}.lesson-open .game-hint{font-size:11px;max-width:42%;left:26%}body.playing .camera-preview{width:105px;bottom:90px}body.playing .hud-score,body.playing .hud-timer{padding:7px 12px}body.playing .hud-score b{font-size:21px}body.playing .game-controls{bottom:6px}body.playing .game-controls button{min-height:34px;padding:6px 16px;font-size:11px}}
@media(orientation:portrait){body.playing .rotate-guard{display:flex}}
@media(max-height:520px) and (orientation:landscape){.lesson-panel{padding:10px 13px;width:44%;min-width:300px}.lesson-panel .eyebrow{display:none}.lesson-panel h2{font-size:16px;margin:3px 0 6px}.lesson-panel ol{font-size:11px;line-height:1.4;gap:4px;margin:6px 0;padding-left:17px}.lesson-cue{font-size:10px;line-height:1.4;margin:5px 0}#lesson-status{font-size:11px;line-height:1.4}.lesson-progress{height:3px;margin:6px 0}.lesson-actions{margin:6px 0;gap:6px}.lesson-actions button{min-height:34px;padding:7px 10px;font-size:10px}.lesson-panel small{font-size:9px;line-height:1.3}}

.avatar-loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;background:#10232bd9;color:#fff;padding:10px 14px;border-radius:8px;font-size:11px;pointer-events:none;white-space:nowrap}