@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans','Noto Sans KR',sans-serif;color:#334633;background:#f6f8f3;font-synthesis:none;--green:#587444;--muted:#687560;--stage:#edf2e6;--accent:#78955c;--card:#f1f5e8}*{box-sizing:border-box}body{margin:0}button,a,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #617d47;outline-offset:4px}button:disabled{cursor:wait;opacity:.6}button{transition:background .18s,box-shadow .18s,transform .18s}button:active{transform:translateY(1px)}[hidden]{display:none!important}header{height:88px;max-width:1440px;margin:auto;padding:0 48px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e0e6d8;gap:24px}.brand{text-decoration:none;color:#3e5538;display:flex;align-items:center;gap:12px;font-size:24px;font-weight:800;letter-spacing:-1px;flex-shrink:0}.brand small{display:block;font-size:10px;letter-spacing:1.8px;margin-top:3px;font-weight:600}.brand-icon{width:44px;height:44px;background:#6d895a;border-radius:16px 16px 20px 20px;color:#fff;font:700 38px/34px Georgia;text-align:center;transform:rotate(-7deg);box-shadow:inset 0 2px 1px #ffffff30}nav{display:flex;gap:8px;margin-left:-105px;background:#ecf0e6;padding:5px;border-radius:14px}.nav{font-size:14px;font-weight:600;color:#6b7861;padding:10px 20px;border-radius:10px;min-height:44px}.nav.active{background:#fffefa;color:#456030;box-shadow:0 2px 7px #34432a09}.nav span{background:#e5eddb;color:#587444;padding:2px 6px;border-radius:6px;font-size:12px;margin-left:5px}.icon-btn{width:44px;height:44px;flex-shrink:0;border:1px solid #d7dfcd;border-radius:50%;font-size:22px;display:grid;place-items:center;background:#ffffff85}.icon-btn:hover{background:#fff;box-shadow:0 4px 12px #3543350b}main{max-width:1440px;margin:auto;padding:30px 48px 0}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:11px;font-weight:700;letter-spacing:2px;color:#6b7e59}h1{font-size:32px;letter-spacing:-1.3px;margin:9px 0 8px;font-weight:700}.intro p{font-size:15px;color:#6b7861;margin:0;line-height:1.7}.intro-note{font-size:14px;color:#7a896c;display:flex;align-items:center;gap:16px}.intro-note span{font-size:40px;color:#8ca575;font-weight:400}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;align-items:stretch}.library{border:1px solid #e0e5d7;border-radius:24px;background:#fffefa;padding:24px 20px 20px;display:flex;flex-direction:column;box-shadow:0 5px 20px #39472c03}.section-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}.section-top h2{font-size:17px;margin:0;letter-spacing:-.5px}.count{color:#61774d;background:#edf2e5;border-radius:7px;font-size:12px;padding:3px 7px}.tabs{display:flex;border-radius:12px;background:#f0f2e9;padding:4px;margin-bottom:18px}.tabs button{flex:1;border-radius:9px;min-height:42px;padding:9px 0;font-size:14px;color:#6e7866}.tabs button[aria-selected=true]{background:white;box-shadow:0 2px 5px #3543350c;color:#486435;font-weight:700}.tiny-lock{font-size:14px;margin-left:2px}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.character-card{height:107px;background:#f5f5ef;border:1.5px solid transparent;border-radius:15px;padding:5px 3px 9px;position:relative;overflow:hidden}.character-card:hover{transform:translateY(-3px);background:var(--tint,#edf2e3);box-shadow:0 6px 14px #33462a08}.character-card.selected{border-color:var(--accent);background:var(--card);box-shadow:0 0 0 2px #fff inset}.character-card.selected:after{content:'✓';position:absolute;top:6px;right:6px;background:var(--accent);color:white;font-size:10px;border-radius:50%;width:16px;height:16px;line-height:16px}.character-card img{width:100%;height:70px;object-fit:contain;display:block;pointer-events:none;transition:transform .2s}.character-card:hover img{transform:rotate(-4deg) scale(1.05)}.character-card span{font-size:13px;display:block;font-weight:500;white-space:nowrap}.library-note{font-size:12px;color:#707d63;margin-top:auto;padding-top:20px;text-align:center}.library-note span{margin-right:4px;font-size:16px}.play-column{display:flex;flex-direction:column;gap:14px;min-width:0}.playground{border-radius:24px;border:1px solid #dce4d1;overflow:hidden;background-color:var(--stage);position:relative;min-width:0;display:flex;flex-direction:column;flex:1;background-image:radial-gradient(#617f4517 .8px,transparent .8px),radial-gradient(ellipse at 50% 45%,#ffffff95,transparent 68%);background-size:20px 20px,100% 100%;transition:background-color .45s;box-shadow:inset 0 1px 0 #ffffffc0}.stage-top{padding:26px 28px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;z-index:1}.pill{font-size:10px;letter-spacing:1.1px;background:#fffef6b8;border:1px solid #ffffff90;padding:6px 9px;border-radius:7px;color:#586a48;font-weight:600}.friend-number{font-size:11px;margin-left:10px;color:#728164;font-variant-numeric:tabular-nums}.stage-top h2{font-size:27px;letter-spacing:-1px;margin:16px 0 7px}.stage-top p{font-size:14px;color:#607253;margin:0;line-height:1.75;max-width:36em}.canvas-wrap{position:relative;flex:1;min-height:340px}canvas{width:100%;height:100%;position:absolute;inset:0;touch-action:none;cursor:grab;z-index:2}canvas:active{cursor:grabbing}.floating-note{position:absolute;top:18%;right:10%;transform:rotate(8deg);color:#71865c;font-size:14px;pointer-events:none;transition:opacity .3s}.floating-note span{font-size:30px;display:block;transform:rotate(95deg);margin-left:8px}.playground.interacting .floating-note{opacity:0}.gesture{position:absolute;bottom:5px;left:16px;right:16px;text-align:center;font-size:12px;color:#536647;pointer-events:none;z-index:3;line-height:1.6}.floor-line{position:absolute;bottom:30px;left:12%;width:76%;height:1px;background:linear-gradient(90deg,transparent,#b8c7a77a,transparent)}.loading{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#60724f;z-index:4;pointer-events:none}.stage-bottom{padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px}.traits{display:flex;gap:25px}.traits span{font-size:12px;color:#596e48;display:grid;grid-template-columns:auto auto;gap:6px 12px}.traits b{font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}.traits i{width:80px;height:5px;display:block;border-radius:5px;background:linear-gradient(to right,var(--accent) var(--value,95%),#ffffff9c var(--value,95%));grid-column:1/3}.touch-count{font-size:12px;color:#526b41;background:#ffffff75;border:1px solid #ffffffa0;border-radius:10px;padding:9px 12px;white-space:nowrap}.touch-count strong{font-weight:700;color:#425d32;margin:0 3px;font-variant-numeric:tabular-nums}.bottom-row{display:flex;justify-content:center;margin-top:21px}.instructions{display:flex;gap:32px;color:#6f7e61;font-size:13px;align-items:center;justify-content:center;flex-wrap:wrap}.instructions b{display:inline-grid;place-items:center;font-size:17px;vertical-align:middle;margin-right:6px;color:#738862;font-weight:400;background:#edf1e6;width:30px;height:30px;border-radius:9px}.mobile-hint{font-size:12px;color:#778569}.settings{display:flex;gap:14px;align-items:center;background:#fffefa;border:1px solid #e0e5d7;padding:9px 18px;border-radius:16px;justify-content:space-between;min-height:65px}.settings button{font-size:18px;color:#697b59;white-space:nowrap;min-height:44px;border-radius:10px;padding:7px 10px}.settings button span{font-size:14px;margin-left:6px}.settings button:hover{background:#f0f3e9}.settings button[aria-pressed=true]{color:#425f31;background:#edf3e4}.divider{width:1px;height:24px;background:#e0e7d6}.volume-control{display:flex;align-items:center;gap:9px;color:#627750;font-size:12px}.volume-control input{width:90px;height:34px;accent-color:#6d895a;cursor:pointer;margin:0}.volume-control output{font-size:12px;width:32px;text-align:right;font-variant-numeric:tabular-nums}.volume-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.settings.muted .volume-control{opacity:.6}footer{display:flex;justify-content:space-between;align-items:center;color:#7e8a73;font-size:12px;padding:27px 0 23px;gap:16px}footer button{font-size:12px;color:#68785a;min-height:44px}dialog{border:1px solid #e1e7d6;border-radius:24px;padding:32px;max-width:670px;width:calc(100% - 32px);color:#43533b;background:#fffef8;max-height:85dvh;box-shadow:0 25px 100px #25341d25}dialog::backdrop{background:#26351d45;backdrop-filter:blur(5px)}body:has(dialog[open]){overflow:hidden}.close{position:sticky;top:0;float:right;font-size:27px;line-height:1;background:#f0f3e8;border-radius:50%;width:44px;height:44px;z-index:2}.modal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.modal-card{background:#f2f5e9;border:1px solid transparent;border-radius:16px;padding:12px}.modal-card:hover{border-color:#9bac82;background:#eaf1df}.modal-card img{width:100%;height:108px;object-fit:contain}.modal-card h3{font-size:16px;margin:5px 0}.modal-card p{font-size:12px!important;margin:5px 0}dialog h2{font-size:25px;margin:12px 44px 23px 0;letter-spacing:-.7px}dialog p,dialog li{font-size:15px;line-height:1.9}dialog li{margin:10px 0}@media(min-width:1500px){main{padding-top:40px}.canvas-wrap{min-height:385px}}@media(max-width:1100px){header{padding:0 28px}main{padding:28px 28px 0}.workspace{grid-template-columns:290px minmax(0,1fr);gap:18px}.library{padding:21px 15px}.character-grid{gap:8px}.character-card{height:105px}.intro-note{display:none}.settings{gap:5px;padding:9px 10px}.settings button{padding:7px}.volume-control input{width:65px}.volume-control{gap:5px}.stage-top{padding:24px 22px 0}.stage-bottom{padding:22px}.stage-top p{font-size:13px}.instructions{gap:20px}.mobile-hint{display:none}}
@media(max-width:850px){.workspace{grid-template-columns:250px minmax(0,1fr)}.character-card span{font-size:12px}.settings{flex-wrap:wrap;justify-content:center;gap:4px 14px}.settings .divider{display:none}.stage-bottom{padding:18px;gap:8px}.traits{gap:15px}.traits i{width:65px}.touch-count{padding:8px;font-size:11px}nav{margin:0}}
@media(max-width:700px){header{height:80px;padding:0 18px;gap:12px}.brand{font-size:21px;gap:9px}.brand-icon{width:38px;height:39px;font-size:34px}.brand small{font-size:8px}nav{margin:0;gap:2px;padding:4px}.nav{font-size:13px;padding:8px 11px}.nav span{display:none}header>.icon-btn{display:none}main{padding:23px 16px 0}.intro{margin-bottom:21px}.eyebrow{font-size:10px}h1{font-size:28px;margin-top:8px}.intro p{font-size:14px}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:24px;align-items:stretch}.play-column{gap:10px}.playground{border-radius:22px}.stage-top{padding:23px 21px 0}.stage-top h2{font-size:25px}.stage-top p{font-size:13px}.canvas-wrap{height:315px;min-height:315px;flex:auto}.stage-bottom{padding:18px 21px 21px}.traits{gap:22px}.traits i{width:75px}.touch-count{font-size:12px}.library{padding:21px 16px}.section-top{margin-bottom:15px}.tabs{margin-bottom:14px}.character-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.character-card{height:104px;padding:4px 2px 9px}.character-card img{height:69px}.character-card span{font-size:13px}.library-note{padding-top:16px}.bottom-row{margin-top:19px}.instructions{gap:12px;font-size:12px}.instructions b{margin-right:3px}.settings{flex-wrap:nowrap;padding:8px 10px;gap:5px;justify-content:space-between}.settings button span{font-size:13px;margin-left:4px}.settings button{padding:7px}.volume-control input{width:65px}.settings .divider{display:block}.floating-note{right:7%;font-size:13px}.gesture{font-size:12px}.mobile-hint{display:block;width:100%;text-align:center;margin-top:4px}footer{flex-wrap:wrap;justify-content:center;gap:0 14px;padding:19px 5px}footer>span:last-child{display:none}.modal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}dialog{padding:24px}.modal-card img{height:95px}dialog h2{font-size:22px}.brand small{letter-spacing:1.2px}}
@media(max-width:380px){header{padding:0 12px;gap:8px}.nav{font-size:12px;padding:8px}.brand{font-size:19px}.brand small{font-size:7px}.brand-icon{width:33px;height:35px;line-height:30px;font-size:30px}.settings{flex-wrap:wrap;justify-content:center;gap:2px 14px}.settings .divider{display:none}.character-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stage-top{padding:20px 17px 0}.stage-bottom{padding:17px;flex-wrap:wrap}.traits{gap:18px}.canvas-wrap{min-height:280px;height:280px}.floating-note{font-size:12px}.pill{font-size:9px}.friend-number{font-size:10px}.instructions{gap:8px}.instructions b{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}body.calm *,body.calm *::after{transition:none!important}.character-card:focus-visible{z-index:2}input[type=range]:focus-visible{outline-offset:2px}

.instruction-help{display:none;font-size:12px;text-decoration:underline;text-underline-offset:4px;min-height:44px;color:#5d734c}@media(max-width:700px){.instruction-help{display:block}.instructions{gap:8px 13px}.mobile-hint{margin-top:0}}

.unlock-progress{background:#f1f5e9;border:1px solid #e0e7d4;border-radius:14px;padding:14px;margin-bottom:17px}.unlock-progress>div{display:flex;justify-content:space-between;gap:8px;align-items:center}.unlock-progress b{font-size:13px}.unlock-progress span{font-size:12px;color:#587444;font-variant-numeric:tabular-nums}.unlock-progress progress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:6px;margin:12px 0;background:#dde6d1;overflow:hidden}.unlock-progress progress::-webkit-progress-bar{background:#dde6d1}.unlock-progress progress::-webkit-progress-value{background:#7a995b;border-radius:6px}.unlock-progress progress::-moz-progress-bar{background:#7a995b;border-radius:6px}.unlock-progress p{font-size:12px;line-height:1.7;color:#64794f;margin:0}.unlock-progress small{display:block;margin-top:6px;font-size:11px;color:#728267}.character-card.locked{opacity:1;background:#f0f1eb;border-style:dashed;border-color:#d9dfcf}.character-card.locked img{filter:grayscale(.8);opacity:.4}.character-card.locked:after{content:'잠금';position:absolute;top:6px;right:6px;background:#e3e7dc;color:#657455;padding:2px 5px;border-radius:5px;font-size:9px}.character-card.locked span{color:#768469}.character-card .lock-requirement{font-size:10px;color:#6d7c5f;margin-top:2px}.character-card{height:116px}.character-card img{height:67px}.create-custom{display:flex;align-items:center;gap:10px;margin-top:18px;text-align:left;padding:15px 12px;border:1px dashed #9aad81;background:#f8faef;border-radius:14px;min-height:70px}.create-custom>span{font-size:25px;color:#6d8b52}.create-custom b{font-size:13px}.create-custom small{display:block;font-size:12px;color:#71835e;margin-top:5px}.create-custom:hover{background:#edf3df}.my-collection h3{font-size:14px;margin:20px 0 10px}.my-collection h3 span{font-size:12px;color:#7b896b;margin-left:5px}.empty-custom{font-size:12px;line-height:1.7;color:#7c8870}.custom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.custom-grid .character-card{height:104px}.custom-grid img{height:66px}.preview-badge{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;background:#fff7df;border:1px solid #e9d394;border-radius:100px;padding:6px 12px;font-size:12px;color:#8a6d2b;white-space:nowrap}.maker-intro{font-size:14px!important;margin-top:-10px}.upload-zone{border:1.5px dashed #abbf95;border-radius:16px;background:#f2f6e9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:155px;text-align:center;padding:20px;cursor:pointer}.upload-zone strong{font-size:16px}.upload-zone span{font-size:12px;color:#70865a}.upload-zone input{max-width:100%;font-size:13px}.upload-zone.dragover{background:#e3eed5;border-color:#688a49}.maker-preview{display:flex;align-items:center;gap:20px;margin-top:17px}.maker-preview img{width:125px;height:113px;object-fit:contain;background:repeating-conic-gradient(#eef0e9 0% 25%,#fafbf7 0% 50%) 50%/16px 16px;border-radius:12px;border:1px solid #e0e6d7}.maker-preview label{font-size:13px;display:block;flex:1;min-width:0}.maker-preview input{display:block;width:100%;font:inherit;font-size:15px;border:1px solid #d5dfc9;border-radius:10px;padding:11px;margin-top:7px;color:#43533b;background:white}.maker-check{display:flex;gap:10px;margin:20px 0;font-size:13px;line-height:1.7;align-items:flex-start}.maker-check input{width:18px;height:18px;accent-color:#6c8b50;flex-shrink:0;margin-top:3px}.maker-price{display:flex;justify-content:space-between;border-top:1px solid #e3e9d9;padding:17px 0;font-size:14px}.maker-price strong{font-size:20px}.maker-actions{display:flex;gap:10px}.maker-actions button{flex:1;border-radius:12px;min-height:48px;font-size:14px;font-weight:600;background:#edf2e3}.maker-actions .primary{background:#67864e;color:white}.maker-actions button:disabled{opacity:.55;cursor:not-allowed}.maker-note{font-size:12px!important;color:#77866b;line-height:1.8!important}.maker-error{font-size:13px!important;color:#9b4d40;line-height:1.7!important}.locked-modal-image{width:160px;display:block;margin:0 auto}.unlock-toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:16px 24px;background:#455f34;color:white;border-radius:16px;z-index:9;box-shadow:0 10px 35px #293c2633;font-size:15px;max-width:calc(100% - 32px);text-align:center}.modal-card.locked img{opacity:.4;filter:grayscale(.8)}.payment-status button{padding:12px 18px;border-radius:10px;background:#6a8852;color:white;font-size:14px}.my-collection[hidden]{display:none}@media(min-width:701px){.library{max-height:860px;overflow:auto;scrollbar-width:thin;scrollbar-color:#ccd8bb transparent}.canvas-wrap{min-height:390px;max-height:470px}.play-column{align-self:start}.playground{flex:none}.stage-bottom{padding-bottom:25px}}@media(max-width:700px){.character-card{height:119px}.character-card img{height:71px}.custom-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.maker-preview{gap:13px}.maker-preview img{width:100px;height:90px}.maker-actions{flex-direction:column}.maker-price{font-size:13px}.unlock-progress{margin-bottom:16px}.create-custom{justify-content:center}}@media(max-width:380px){.custom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.floating-note{z-index:4;top:14px;right:24px;transform:none;white-space:nowrap;background:#fffffacc;border:1px solid #ffffff90;padding:7px 12px;border-radius:100px;line-height:1.5;font-size:13px}.floating-note span{display:none}.preview-badge{top:50px}.maker-preview img{background:#f1f4eb}@media(max-width:700px){.floating-note{top:10px;right:16px;font-size:12px}.preview-badge{top:48px}}
.google-login{margin-left:auto;background:#fff;border:1px solid #d9dfd1;border-radius:24px;padding:10px 16px;color:#4b6040;font:inherit;font-size:13px;font-weight:650;cursor:pointer;white-space:nowrap}.google-login:focus-visible{outline:3px solid #91a774;outline-offset:3px}.create-custom:disabled{opacity:.5;cursor:not-allowed}.google-login:disabled{opacity:.6}@media(max-width:700px){.google-login{font-size:11px;padding:8px 10px}header{gap:8px}}
.maker-steps{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.maker-steps span{font-size:13px;background:#eef3e6;padding:8px 12px;border-radius:30px;color:#577447}.admin-notice{padding:13px 16px;background:#fff7e6;border-radius:12px;font-size:14px;line-height:1.7;color:#856528}.ai-working{text-align:center;padding:35px 0}.ai-working p{line-height:1.8}.ai-orb{display:block;width:55px;height:55px;margin:5px auto 28px;border-radius:50%;background:linear-gradient(140deg,#e4eccd,#8bac6d);box-shadow:0 12px 28px #739b5430;animation:ai-breathe 1.6s ease-in-out infinite}.ai-result{width:min(280px,90%);height:250px;object-fit:contain;display:block;margin:auto}.pending-job{border:1px solid #dce5d3;background:#f5f8ef;border-radius:13px;padding:12px;margin:10px 0;font-size:14px}.pending-job p{font-size:13px;line-height:1.6;color:#687a5a}.pending-job button{background:#e5eddb;border:0;border-radius:9px;padding:8px 12px;color:#4d6a3d;font:inherit;cursor:pointer}.pending-job button:disabled{opacity:.5;cursor:default}@keyframes ai-breathe{50%{transform:scale(1.18,.85) translateY(5px)}}@media(prefers-reduced-motion:reduce){.ai-orb{animation:none}}
footer{flex-wrap:wrap;gap:14px}footer a{color:inherit;font-size:14px;text-underline-offset:3px}
/* Playground controls: keep touch targets and both sound levels visible. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.scene-controls{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #dce4d4;border-radius:16px;background:#fffefa;font-size:14px}.scene-controls select,.music-controls select{font:inherit;color:inherit;border:1px solid #d4dfc9;background:#fff;border-radius:10px;min-height:44px;padding:8px 10px;max-width:100%}.scene-controls label{font-weight:600}.scene-controls button{margin-left:auto;min-height:44px;padding:8px 12px;border-radius:10px;background:#edf3e4;white-space:nowrap}.settings{flex-wrap:wrap!important;justify-content:flex-start;gap:6px 14px}.settings .divider{display:none!important}.music-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;flex:1 0 100%;border-top:1px solid #e1e7d9;padding-top:8px}.music-controls select{font-size:14px}.volume-control input{width:90px}.settings.muted .music-controls .volume-control{opacity:1}.settings #motion{margin-left:auto}.scene-controls select:focus-visible,.music-controls select:focus-visible{outline:3px solid #617d47;outline-offset:3px}
.playground{background-image:radial-gradient(ellipse at 50% 30%,#ffffffb0,transparent 75%);background-size:100% 100%}.playground[data-scene=meadow]{background-color:#e2eed8;background-image:linear-gradient(155deg,#f8fbe9aa,transparent 65%),radial-gradient(ellipse at bottom,#b8d5a9,transparent 70%)}.playground[data-scene=peach]{background-color:#fae9e3;background-image:radial-gradient(ellipse at 20% 10%,#fff6df,transparent 70%),linear-gradient(155deg,transparent,#f2c9cc)}.playground[data-scene=sky]{background-color:#e0f0f7;background-image:linear-gradient(180deg,#cfebf8,#f0f9fc 70%,#dbebe6)}.playground[data-scene=night]{background-color:#29344d;background-image:radial-gradient(ellipse at 50% 20%,#58618c,transparent 80%)}.playground[data-scene=night] .stage-top h2,.playground[data-scene=night] .stage-top p,.playground[data-scene=night] .friend-number,.playground[data-scene=night] .traits span,.playground[data-scene=night] .traits b,.playground[data-scene=night] .gesture{color:#f0f3ff}.playground[data-scene=night] .touch-count{background:#f7f8ffeb}.playground[data-scene=night] .icon-btn{background:#f7f8ffeb}
header nav{margin-left:0}header{gap:16px}body.play-expanded{overflow:hidden}.play-column.expanded,.play-column:fullscreen{position:fixed;inset:0;z-index:50;width:100%;height:100dvh;max-height:100dvh;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:#f6f8f3;gap:10px;overflow:auto;display:flex;box-sizing:border-box}.expanded .playground{flex:1;min-height:220px}.expanded .canvas-wrap{height:auto;min-height:100px;max-height:none;flex:1}.expanded .stage-top{padding:16px 24px 0}.expanded .stage-top h2{margin:8px 0 4px}.expanded .stage-bottom{padding:12px 24px}.expanded .settings{flex-shrink:0}.expanded .scene-controls{flex-shrink:0}.expanded .floating-note{font-size:14px}
@media(max-width:700px){header{height:auto;min-height:80px;flex-wrap:wrap;padding:14px 16px;gap:12px}header nav{order:3;width:100%;justify-content:center}header .google-login{margin-left:auto;font-size:12px}main{padding-top:18px}.intro{margin-bottom:16px}.scene-controls{gap:8px;padding:8px 10px}.scene-controls select{flex:1;min-width:0;font-size:13px}.scene-controls button{font-size:13px;padding:8px}.settings{padding:10px;gap:5px 10px}.settings button span{font-size:14px}.settings .volume-control input{width:76px}.music-controls{gap:5px 8px}.music-controls select{max-width:126px;font-size:13px}.music-controls .volume-control{margin-left:auto}.expanded .stage-top p{display:none}.expanded .stage-top h2{font-size:22px}.expanded .stage-bottom{padding:10px 16px}.expanded .traits i{width:55px}.expanded .floating-note{font-size:12px;top:4px}}
@media(max-height:550px){.expanded .stage-top{padding:8px 16px 0}.expanded .stage-top p,.expanded .pill,.expanded .friend-number,.expanded .traits,.expanded .floating-note{display:none}.expanded .stage-top h2{font-size:20px;margin:0}.expanded .stage-bottom{position:absolute;right:10px;bottom:14px;padding:0;z-index:3;pointer-events:none}.expanded .settings{padding:4px 10px}.expanded .music-controls{border:0;padding:0;flex:0 1 auto}.expanded .scene-controls{padding:4px 10px}.expanded .playground{min-height:150px}}
.brand-logo{width:48px;height:48px;display:block;object-fit:contain;flex-shrink:0}
.canvas-wrap.surface-expanded,.canvas-wrap:fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;max-height:none!important;z-index:100;border-radius:0;margin:0;background-size:cover;overflow:hidden}
.surface-expanded .floating-note,.surface-expanded .gesture,.surface-expanded .floor-line,.surface-expanded .preview-badge{display:none!important}
.fullscreen-exit{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));width:44px;height:44px;display:grid;place-items:center;border:1px solid #ffffffaa;border-radius:50%;background:#ffffffe8;color:#425737;box-shadow:0 3px 16px #25361c18;font-size:20px;z-index:10}
@media(max-width:700px){.brand-logo{width:42px;height:42px}}

/* Slowly shifting colors, with stars kept behind the interactive canvas. */
.playground{background-image:radial-gradient(ellipse at 25% 20%,#ffffffc0,transparent 65%),linear-gradient(130deg,var(--stage),var(--card),var(--stage));background-size:180% 180%;animation:scene-drift 20s ease-in-out infinite alternate}
.playground[data-scene=night]{background-color:#17213c;background-image:radial-gradient(ellipse at 20% 15%,#6e55986b,transparent 60%),radial-gradient(ellipse at 80% 75%,#32768b70,transparent 60%),linear-gradient(135deg,#111a33,#34446c,#35284f);background-size:180% 180%}
.canvas-wrap.surface-expanded,.canvas-wrap:fullscreen{background-size:180% 180%;animation:scene-drift 20s ease-in-out infinite alternate}
.night-stars{display:none;position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
[data-scene=night] .night-stars{display:block}
.night-stars i{position:absolute;width:var(--size);height:var(--size);border-radius:50%;background:#fff9e8;box-shadow:0 0 7px 2px #dce9ff70;animation:star-twinkle var(--duration) ease-in-out var(--delay) infinite alternate}
.night-stars i:nth-child(7n)::after{content:'';position:absolute;inset:-4px 1px;background:linear-gradient(transparent,#fff9e8,transparent)}
.night-stars i:nth-child(7n)::before{content:'';position:absolute;inset:1px -4px;background:linear-gradient(90deg,transparent,#fff9e8,transparent)}
[data-scene=night] .floating-note{z-index:3;color:#fff9e8;background:#14203ee6;padding:9px 13px;border:1px solid #cbdcff55;border-radius:12px;text-shadow:0 1px 3px #0008}
@keyframes scene-drift{0%{background-position:0% 20%}50%{background-position:80% 100%}100%{background-position:100% 0%}}
@keyframes star-twinkle{0%{opacity:.25;transform:scale(.7)}100%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.playground,.canvas-wrap.surface-expanded,.canvas-wrap:fullscreen,.night-stars i{animation:none}.night-stars i{opacity:.8}}


@media(min-width:701px){.workspace{display:grid;grid-template-columns:300px minmax(0,1fr);align-items:start}.workspace>.library{grid-column:1;grid-row:1;min-width:0}.workspace>.play-column{grid-column:2;grid-row:1;min-width:0}}
@media(max-width:700px){.workspace{display:flex;flex-direction:column-reverse;gap:22px}}

/* First-visit guide shares the playground's soft green palette. */
dialog.tutorial{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid #dbe5d4;border-radius:28px;background:#fbfdf8;color:#334633;overflow:auto;box-shadow:0 24px 80px #20371c30}dialog.tutorial::backdrop{background:#14271080;backdrop-filter:blur(5px)}.tutorial-top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.tutorial-top>span{font-weight:700}.tutorial-top button{padding:10px;color:#59674e;text-decoration:underline;text-underline-offset:4px}.tutorial-art{height:180px;margin:16px 0 20px;border-radius:22px;background:linear-gradient(130deg,#e6f0d9,#f6f1d9);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.tutorial-art img{width:185px;height:165px;object-fit:contain;transform-origin:50% 80%}.tutorial-art>span{position:absolute;bottom:10px;right:12px;font-size:13px;background:#ffffffed;padding:6px 12px;border-radius:20px}.tutorial-art[data-mode=scene]{background:linear-gradient(130deg,#232b58,#74669b)}.tutorial-art[data-mode=squish] img{animation:tutorial-squish 2.5s ease-in-out infinite}.tutorial-step{font-size:14px!important;font-weight:700;color:#587444;margin:0 0 8px!important}.tutorial-copy h2{font-size:24px;line-height:1.4;margin:0 0 12px;letter-spacing:-.7px}.tutorial-copy>p:last-child{font-size:16px;line-height:1.8;margin:0;word-break:keep-all;min-height:87px}.tutorial-actions{display:flex;gap:12px;margin-top:24px}.tutorial-actions button{padding:13px 20px;border-radius:14px;font-size:16px;background:#eaf0e3}.tutorial-actions .tutorial-next{flex:1;background:#587444;color:white;font-weight:700}.tutorial-note{font-size:13px;line-height:1.6;color:#687560;margin:16px 0 0}.tutorial-replay{background:#eaf0e3;padding:10px 16px;border-radius:12px;font-size:14px}@keyframes tutorial-squish{0%,100%{transform:scale(1)}40%{transform:scale(1.15,.8)}70%{transform:scale(.94,1.06)}}@media(prefers-reduced-motion:reduce){.tutorial-art img{animation:none!important}}@media(max-height:650px){.tutorial-art{height:110px;margin:8px 0 12px}.tutorial-art img{height:110px}.tutorial-actions{margin-top:14px}}@media(max-width:380px){dialog.tutorial{padding:18px}.tutorial-copy h2{font-size:22px}}

.custom-friend{min-width:0;display:flex;flex-direction:column;gap:5px}.custom-friend>.character-card{width:100%}.custom-friend .character-card span{overflow:hidden;text-overflow:ellipsis}.rename-friend{min-height:44px;border-radius:10px;background:#eaf0e3;font-size:14px;font-weight:600}.rename-friend:hover{background:#dce8d3}#renameFriendForm label{display:block;margin:16px 0 8px;font-size:16px}#friendName{width:100%;box-sizing:border-box;padding:13px;border:1px solid #aab9a0;border-radius:12px;font:inherit;font-size:16px}.rename-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:20px}.rename-actions button{padding:12px 22px;border-radius:12px;background:#eaf0e3;min-height:46px}.rename-actions .primary{background:#4c713c;color:white}#renameError{font-size:14px;color:#7b453a;min-height:22px}

/* Fullscreen collision edges follow the actual viewport. */
.canvas-wrap.surface-expanded::after{content:"";position:absolute;inset:var(--stage-inset,24px);border:1px solid #ffffff38;border-radius:24px;pointer-events:none;z-index:0}
html:has(body.mobile-shell){overscroll-behavior:none}
.mobile-shell{-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.mobile-shell img,.mobile-shell canvas,.mobile-shell button,.mobile-shell nav{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}