/* Usagi interaction area only. Shared shell: /assets/toy-page.css */
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.screen-button{margin-left:auto}
.stage{position:relative;background:#252525;border:1px solid #38333c;border-radius:12px;overflow:hidden;height:590px;box-shadow:0 20px 60px #3423390c}
.windowbar{position:absolute;inset:0 0 auto;display:flex;align-items:center;gap:18px;height:46px;border-bottom:1px solid #48424b;background:#2c292f;color:#b5aeb8;padding:0 22px;font-size:11px}
.windowbar .dots{font-size:9px;letter-spacing:3px;color:#8b7989}
#mode{margin-left:auto;font-size:9px;letter-spacing:2px;color:#cbb1c8}
textarea{position:absolute;left:30px;top:74px;width:calc(100% - 60px);height:260px;border:none;outline:none;resize:none;background:transparent;color:#faf7f1;font-family:"Malgun Gothic",sans-serif;font-size:clamp(22px,2.8vw,34px);line-height:1.65;letter-spacing:.03em;caret-color:#d9b5d5;z-index:2;border-radius:4px;padding:0 5px}
textarea:focus{box-shadow:0 0 0 1px #ad83a34d}
textarea::placeholder{color:#88818a}
textarea:disabled::placeholder{color:#6f6971}
.pet{position:absolute;bottom:44px;right:22%;width:340px;max-width:65%;pointer-events:none}
.pet img{display:block;width:100%;height:auto}
.stage-hint{position:absolute;bottom:13px;left:22px;color:#8f8592;font-size:10px;letter-spacing:.7px}
.readout{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px;font-size:12px;color:var(--muted)}
.readout p{margin:0}
.meter{display:flex;gap:20px;font-variant-numeric:tabular-nums}
.meter b{font-weight:600;color:var(--plum);display:inline-block;min-width:26px}
.stage:fullscreen{width:100vw;height:100vh;border:0;border-radius:0;max-width:none}
.stage:fullscreen textarea{top:12%;left:6%;width:88%;height:40%;font-size:clamp(28px,4vw,60px)}
.stage:fullscreen .pet{right:calc(50% - 250px);bottom:12%;width:500px;max-width:80%}
.stage:fullscreen .stage-hint{bottom:5%;left:6%;font-size:14px}
#exit-fullscreen{position:absolute;right:20px;bottom:24px;color:#e2c9df;border-color:#63505f;background:#332d34;z-index:3}
.stage:fullscreen .windowbar{height:8%;font-size:16px}
.stage:fullscreen .windowbar #mode{font-size:12px}
@media(max-width:750px){.toolbar button{padding:11px 12px;font-size:11px}
.screen-button{margin-left:0}
.stage{height:570px}
textarea{left:20px;top:70px;width:calc(100% - 40px);font-size:25px;height:280px}
.pet{right:8%;width:300px;max-width:75%;bottom:38px}
.readout{display:block;line-height:1.8}
.meter{margin-top:7px!important}}
@media(max-width:480px){.pet{right:8%;max-width:80%;width:290px}
.stage:fullscreen .pet{right:10%;bottom:15%;max-width:80%;width:380px}}
@media(max-width:480px){.stage textarea{height:245px}}
.duration-control{display:inline-flex;align-items:center;gap:10px;border:1px solid #d5cfbf;border-radius:10px;padding:4px 8px;background:#fffdf8}
.duration-control>span{font-size:13px;color:#685e50}
.duration-control button{min-width:40px;min-height:40px;padding:6px;font-size:22px;line-height:1}
.duration-control output{min-width:48px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:600px){.toolbar .duration-control{flex:1 1 100%;justify-content:center}
.toolbar .duration-control button{flex:0 0 44px}}

.experience-tabs{display:flex;gap:8px;margin:0 0 20px;scroll-margin-top:24px}.experience-tabs [aria-selected="true"]{background:var(--toy-accent);border-color:var(--toy-accent);color:#fff}.experience-tabs button{flex:0 1 auto}
.stage.challenge-mode:fullscreen{height:100vh;width:100vw}
.stage.challenge-mode:fullscreen textarea{top:25%;height:18%;font-size:clamp(24px,3vw,46px)}
#challenge-prompt{position:absolute;left:30px;right:30px;top:66px;z-index:3}.challenge-caption{display:flex;justify-content:space-between;gap:12px;color:#d8c6d7;font-size:12px}.challenge-caption strong{font-weight:600}#challenge-progress{font-variant-numeric:tabular-nums;white-space:nowrap}#challenge-target{font:22px/1.8 'Malgun Gothic',sans-serif;color:#b9b2bb;white-space:pre-wrap;margin:14px 0 0}#challenge-target .correct{color:#b7dfb6}#challenge-target .next{border-bottom:2px solid #e1bbdb}.stage.challenge-mode{height:650px}.challenge-mode textarea{top:210px;height:120px}.challenge-mode .pet{bottom:48px;width:300px}.stage[data-challenge="lost"]{border-color:#be6c75}.stage[data-challenge="won"]{border-color:#7fae86}.stage:fullscreen #challenge-prompt{top:10%}.stage.challenge-mode:fullscreen textarea{top:25%;height:18%}
@media(max-width:750px){#challenge-prompt{left:20px;right:20px}.challenge-caption{font-size:11px;flex-wrap:wrap}#challenge-target{font-size:20px}.stage.challenge-mode{height:700px}.challenge-mode textarea{top:250px;height:130px}.challenge-mode .pet{bottom:44px;width:290px}.experience-tabs button{flex:1}.stage.challenge-mode:fullscreen textarea{top:38%;height:18%}}

/* Keep the full lyrics readable without covering the input or Usagi. */
#challenge-target{max-height:100px;overflow-y:auto;scrollbar-width:thin;overscroll-behavior:contain}
.stage:fullscreen #challenge-target{max-height:11vh;font-size:clamp(18px,2vw,26px)}
@media(max-width:750px){#challenge-target{max-height:140px}.stage:fullscreen #challenge-target{max-height:20vh}}

/* Karaoke cells: one committed character fills one grey slot. */
#challenge-target{position:relative;line-height:1.9;white-space:normal;padding:4px 3px 8px;scroll-padding-top:8px}
#challenge-target .lyric-cell{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;width:1.45em;height:1.65em;margin:2px;border:1px solid #57525a;border-radius:5px;background:#3e3b41;color:#aaa5ad;line-height:1;box-sizing:border-box}
#challenge-target .separator{width:1em;color:#817b86;font-size:.85em}
#challenge-target .correct{background:#b99ac1;border-color:#d1b3d7;color:#211c25}
#challenge-target .next{background:#534958;border:2px solid #efd2f5;color:#fff;box-shadow:0 0 0 2px #e0b8ec28}
.stage[data-challenge="lost"] #challenge-target .next{border-color:#f08a96;background:#633e48}
@media(prefers-reduced-motion:no-preference){#challenge-target .lyric-cell{transition:background-color .12s,color .12s}}

.challenge-success{position:absolute;inset:46px 0 0;z-index:5;display:grid;place-items:center;background:#211b29e8;padding:24px;text-align:center}
.challenge-success[hidden]{display:none}
.success-card{max-width:520px;padding:40px 30px;border:1px solid #aa88b4;border-radius:20px;background:#342b3c;box-shadow:0 20px 70px #0005;color:#faf7f1}
.success-eyebrow{font-size:13px;letter-spacing:.2em;color:#d8b8e3}.success-card h2{font-size:clamp(25px,4vw,42px);margin:16px 0}.success-card p{line-height:1.8}.success-card button{margin-top:20px}
.stage:fullscreen .challenge-success{top:8%}

.challenge-failure .success-card{border-color:#cf8190;background:#3d2a32}.challenge-failure .success-eyebrow{color:#f0aaba}.challenge-failure h2{color:#ffdce2}

/* Challenge prioritizes the mission lyrics and keeps the input compact. */
.stage.challenge-mode{height:800px}
.stage.challenge-mode #challenge-target{height:300px;max-height:300px;font-size:20px}
.stage.challenge-mode textarea{top:420px;height:80px;font-size:25px;line-height:1.5}
.stage.challenge-mode .pet{width:280px;bottom:44px}
@media(max-width:750px){
 .stage.challenge-mode{height:860px}
 .stage.challenge-mode #challenge-target{height:360px;max-height:360px;font-size:16px}
 .stage.challenge-mode textarea{top:485px;height:82px;font-size:23px}
 .stage.challenge-mode .pet{width:260px;bottom:48px}
}
.stage.challenge-mode:fullscreen{height:100vh;--lyrics-height:clamp(190px,36vh,350px)}
.stage.challenge-mode:fullscreen #challenge-target{height:var(--lyrics-height);max-height:var(--lyrics-height);font-size:clamp(17px,1.7vw,24px)}
.stage.challenge-mode:fullscreen textarea{top:calc(10% + var(--lyrics-height) + 60px);height:clamp(56px,8vh,82px);font-size:clamp(23px,2.3vw,34px);line-height:1.45}
.stage.challenge-mode:fullscreen .pet{width:clamp(140px,28vh,280px);right:50%;transform:translateX(50%);bottom:10%}

@media(max-width:750px){.stage.challenge-mode:fullscreen #challenge-target{font-size:16px}}