/* A dedicated listening studio, using the shared tactile control family.
   Exercise IDs, content, scoring and completion stay with the page controller. */
body.listening-playful[data-ui="playful"]{
  --app-paper:#fff9e9;--app-surface:#fffdf5;--app-ground:transparent;
  --app-ink:#214b40;--app-muted:#576d61;--app-rim:#ddd5bf;--app-edge:#c9bea2;
  --app-sea:#24799e;--app-deep:#205443;--app-soft:#e4eed9;
  --app-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  --app-jp:var(--app-font);--lab-heading:'Fredoka',var(--app-font);
  position:relative;min-height:100svh;padding:0;background:#315957;
  color:var(--app-ink);font-family:var(--app-font);overflow-x:hidden;
}
body.listening-playful[data-ui="playful"].lang-jp [data-jp]{font-family:var(--app-font)}
body.listening-playful[data-ui="playful"] > header{position:relative;z-index:1;background:none;padding:calc(12px + var(--app-safe-top)) max(18px,var(--app-safe-right)) 0 max(18px,var(--app-safe-left))}
body.listening-playful[data-ui="playful"] .hbar{max-width:640px;min-height:44px;margin:0 auto;padding-right:108px;animation:none}
body.listening-playful[data-ui="playful"] #drewLangToggle{position:absolute;top:calc(12px + var(--app-safe-top));right:max(18px,calc((100vw - 640px)/2));min-height:44px;padding:8px 11px;border:1px solid var(--app-rim);border-radius:16px;background:linear-gradient(#fffdf5,#f5e9cf);color:var(--app-deep);box-shadow:inset 0 2px 0 #fff,0 4px 0 var(--app-edge);font:700 13px/1.2 var(--app-font)}
body.listening-playful[data-ui="playful"] .htitle{max-width:640px;min-height:154px;margin:12px auto 0;padding:20px 182px 18px 6px;transform:none;animation:none;background:none;border:0;border-radius:0;box-shadow:none;display:flex;flex-direction:column;justify-content:center;text-align:left}
body.listening-playful[data-ui="playful"] .htitle .kick{font:800 11px/1.5 var(--app-font);letter-spacing:.13em;color:var(--sky-sub);text-shadow:var(--sky-shadow)}
body.listening-playful[data-ui="playful"] .htitle h1{margin:5px 0 0;font:700 clamp(25px,5.5vw,34px)/1.25 var(--lab-heading);letter-spacing:-.035em;color:var(--sky-ink);text-shadow:var(--sky-shadow)}
body.listening-playful[data-ui="playful"] .htitle p{margin:8px 0 0;font:600 13px/1.55 var(--app-font);color:#fff9e9;text-shadow:0 1px 4px #153e54b3}
body.listening-playful[data-ui="playful"] main{position:relative;z-index:1;max-width:676px;margin:0 auto;padding:4px max(18px,var(--app-safe-right)) 14px max(18px,var(--app-safe-left));display:flex;flex-direction:column;gap:15px}
body.listening-playful[data-ui="playful"] .modes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0;padding:0;border:0;border-radius:0;background:none;animation:none}
/* Reuse sg-button materials; page-specific rules must beat the older utilities. */
body.listening-playful[data-ui="playful"] :is(.mode,.listenbtn,.btn,.cta,.back).sg-button{
  --sg-depth:5px;--sg-press:3px;--sg-radius:19px;--sg-height:48px;
  background:radial-gradient(ellipse 80% 65% at 50% -7%,var(--sg-gloss),transparent 82%),linear-gradient(180deg,var(--sg-face-top),var(--sg-face-bottom));
  border:1px solid var(--sg-rim);border-radius:var(--sg-radius);color:var(--sg-ink);
  box-shadow:inset 0 2px 0 var(--sg-highlight),inset 0 -2px 0 #ffffff2e,0 var(--sg-depth) 0 var(--sg-base),0 8px 14px #143d4526;
  font-family:var(--app-font);font-weight:800;line-height:1.3;text-shadow:0 1px 0 #ffffff47;
  transition:transform 180ms var(--sg-ease),box-shadow 150ms ease,filter 150ms ease;
}
body.listening-playful[data-ui="playful"] .back.sg-button{--sg-height:44px;--sg-radius:16px;min-height:44px;padding:8px 14px;font-size:13px}
body.listening-playful[data-ui="playful"] .mode.sg-button{--sg-radius:20px;min-width:0;min-height:75px;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;row-gap:2px;padding:11px 13px;text-align:left;font-size:14px;justify-items:start}
body.listening-playful[data-ui="playful"] .mode .ic{grid-row:1/3;display:grid;place-items:center;align-self:center;width:32px;height:38px;border-radius:13px;background:#ffffff70;font-size:23px}
body.listening-playful[data-ui="playful"] .mode .ic img{width:25px;height:25px}
body.listening-playful[data-ui="playful"] .mode small{font:500 11px/1.4 var(--app-font);color:inherit}
body.listening-playful[data-ui="playful"] .mode.active{--sg-face-top:#99e9ff;--sg-face-bottom:#4ec7ef;--sg-base:#248ab6;--sg-rim:#d3f7ff;--sg-ink:#123f58}
body.listening-playful[data-ui="playful"] .mode:disabled{opacity:.6;filter:saturate(.4)}
body.listening-playful[data-ui="playful"] .meta{min-height:34px;margin:0;padding:6px 12px;border:1px solid #fff9e9a6;border-radius:14px;background:#fff9e9e8;box-shadow:0 2px 0 #285b6833;font:700 12px/1.5 var(--app-font);color:var(--app-ink);gap:6px;animation:none}
body.listening-playful[data-ui="playful"] .bar{height:9px;margin:0 3px;background:#d8e4df;box-shadow:inset 0 2px 1px #426b5220}
body.listening-playful[data-ui="playful"] .bar i{background:linear-gradient(90deg,#52c6ed,#44caaa);box-shadow:inset 0 2px 0 #ffffff66}
body.listening-playful[data-ui="playful"] #stage{animation:none;min-width:0}
body.listening-playful[data-ui="playful"] :is(.card,.done,.empty){min-height:300px;padding:25px;border:2px solid #fffdf5;border-radius:28px;background:var(--app-paper);box-shadow:inset 0 -3px 0 #f1e7cc,0 6px 0 var(--app-edge),0 12px 25px #10395130;color:var(--app-ink)}
body.listening-playful[data-ui="playful"] .card{display:flex;flex-direction:column;justify-content:center;gap:0}
body.listening-playful[data-ui="playful"] .tagline{margin-bottom:14px;font:700 13px/1.5 var(--app-font);letter-spacing:.025em;color:var(--app-muted);text-transform:none}
body.listening-playful[data-ui="playful"] .jpword{margin:0 0 13px;font:600 17px/1.5 var(--app-font);color:var(--app-ink)}
body.listening-playful[data-ui="playful"] .listenbtn.sg-button:not(.small){--sg-face-top:#96dcfa;--sg-face-bottom:#52bbed;--sg-rim:#cff4ff;--sg-base:#2b84b4;--sg-ink:#143f58;width:min(100%,330px);min-height:59px;padding:13px 20px;font-size:17px}
body.listening-playful[data-ui="playful"] .listenbtn.small.sg-button{--sg-height:44px;--sg-radius:15px;min-height:44px;margin-top:13px;padding:8px 15px;font-size:12px}
body.listening-playful[data-ui="playful"] .btn.primary.sg-button{--sg-face-top:#8becbf;--sg-face-bottom:#45d5a0;--sg-rim:#c6ffe3;--sg-base:#258c6c;--sg-ink:#154a3b;width:100%;min-height:51px;padding:12px 22px;font-size:16px}
body.listening-playful[data-ui="playful"] #recBtn{--sg-face-top:#d2b4ff;--sg-face-bottom:#b48aea;--sg-rim:#eddfff;--sg-base:#8060b6;--sg-ink:#382651}
body.listening-playful[data-ui="playful"] .controls{width:min(100%,330px);margin-top:20px;gap:10px;order:2}
body.listening-playful[data-ui="playful"] #out{width:100%;order:1}
body.listening-playful[data-ui="playful"] .dictwrap{width:100%;max-width:460px;margin-top:18px}
body.listening-playful[data-ui="playful"] .dictin{width:100%;min-height:75px;padding:12px 14px;border:2px solid #ccd9c9;border-radius:18px;background:#fffef9;box-shadow:inset 0 3px 0 #eee8d833;resize:vertical;color:var(--app-ink);text-align:left;font-size:16px;line-height:1.5}
body.listening-playful[data-ui="playful"] .dictin::placeholder{color:#62776b;opacity:1}
body.listening-playful[data-ui="playful"] .dictin:focus{border-color:#2793b7;outline:3px solid #58c7eb40;outline-offset:2px}
/* Once graded, the typed answer remains in the feedback. Free its input space
   for the answer comparison and next action without hiding any feedback. */
body.listening-playful[data-ui="playful"] .card:has(.scoreout) .dictwrap{display:none}
body.listening-playful[data-ui="playful"] .scoreout{display:grid;grid-template-columns:50px minmax(0,1fr);gap:8px 12px;align-items:center;max-width:510px;margin:18px auto 0;text-align:left}
body.listening-playful[data-ui="playful"] .ring{grid-column:1;grid-row:1;margin:0;width:50px;height:50px;font-size:16px}
body.listening-playful[data-ui="playful"] .ring i{width:38px;height:38px}
body.listening-playful[data-ui="playful"] .smsg{grid-column:2;grid-row:1;margin:0;font-size:14px;line-height:1.5}
body.listening-playful[data-ui="playful"] .words{grid-column:1/-1;font-size:16px;line-height:1.65;overflow-wrap:anywhere}
body.listening-playful[data-ui="playful"] .heard{grid-column:1/-1;margin:0;font-size:12px;line-height:1.5;overflow-wrap:anywhere;color:var(--app-muted)}
body.listening-playful[data-ui="playful"] .target{margin:9px auto 0;max-width:510px;font-size:13px;line-height:1.5;text-align:left;overflow-wrap:anywhere}
body.listening-playful[data-ui="playful"] .note{font-size:13px;line-height:1.6}
body.listening-playful[data-ui="playful"] :is(.done,.empty){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
body.listening-playful[data-ui="playful"] :is(.done,.empty) .big{font-size:44px;line-height:1;margin:0}
body.listening-playful[data-ui="playful"] :is(.done,.empty) h2{margin:0;font:700 25px/1.3 var(--lab-heading)}
body.listening-playful[data-ui="playful"] :is(.done,.empty) p{margin:0;font-size:14px;color:var(--app-muted)}
body.listening-playful[data-ui="playful"] .cta.sg-button{min-width:185px;margin:0;padding:12px 20px;font-size:15px}
body.listening-playful[data-ui="playful"] footer{position:relative;z-index:1;margin:0;padding:9px 18px calc(16px + var(--app-safe-bottom));color:#fff9e9;text-shadow:0 1px 5px #153e54b3;font:500 11px/1.5 var(--app-font);animation:none}
body.listening-playful[data-ui="playful"] :is(button,a):focus-visible{outline:3px solid #154d58;outline-offset:5px}
body.listening-playful[data-ui="playful"] :is(.back,#drewLangToggle):focus-visible{outline-color:var(--sky-ink)}
body.listening-playful[data-ui="playful"] .sg-button:not(:disabled):active{transform:translateY(3px) scale(.985);box-shadow:inset 0 1px 2px #1e3d2b1a,0 2px 0 var(--sg-base),0 4px 8px #143d4526}
@media(min-width:760px){
  body.listening-playful[data-ui="playful"] > header{padding-top:24px}
  body.listening-playful[data-ui="playful"] #drewLangToggle{top:24px}
  body.listening-playful[data-ui="playful"] .htitle{min-height:167px;margin-top:5px;padding-right:200px}
}
@media(max-width:600px){
  body.listening-playful[data-ui="playful"] > header{padding-top:calc(9px + var(--app-safe-top));padding-left:max(16px,var(--app-safe-left));padding-right:max(16px,var(--app-safe-right))}
  body.listening-playful[data-ui="playful"] #drewLangToggle{top:calc(9px + var(--app-safe-top));right:max(16px,var(--app-safe-right))}
  body.listening-playful[data-ui="playful"] .htitle{min-height:100px;margin-top:7px;padding:8px 111px 8px 2px}
  body.listening-playful[data-ui="playful"] .htitle .kick{font-size:9px}
  body.listening-playful[data-ui="playful"] .htitle h1{font-size:22px;line-height:1.3}
  body.listening-playful[data-ui="playful"] .htitle p{margin-top:5px;font-size:11px;line-height:1.45}
  body.listening-playful[data-ui="playful"] main{padding:3px 16px 11px;gap:12px}
  body.listening-playful[data-ui="playful"] .modes{gap:11px}
  body.listening-playful[data-ui="playful"] .mode.sg-button{min-height:64px;padding:9px 9px;grid-template-columns:25px minmax(0,1fr);column-gap:5px;font-size:12px;--sg-radius:18px}
  body.listening-playful[data-ui="playful"] .mode .ic{width:25px;height:34px;font-size:20px}
  body.listening-playful[data-ui="playful"] .mode .ic img{width:22px;height:22px}
  body.listening-playful[data-ui="playful"] .mode small{font-size:10px}
  body.listening-playful[data-ui="playful"] .meta{min-height:29px;padding:4px 11px;font-size:11px}
  body.listening-playful[data-ui="playful"] :is(.card,.done,.empty){min-height:280px;padding:19px 17px;border-radius:25px}
  body.listening-playful[data-ui="playful"] .listenbtn.sg-button:not(.small){min-height:52px;font-size:16px}
  body.listening-playful[data-ui="playful"] .tagline{font-size:12px;margin-bottom:11px}
  body.listening-playful[data-ui="playful"] .jpword{font-size:16px;margin-bottom:11px}
  body.listening-playful[data-ui="playful"] .listenbtn.small.sg-button{margin-top:10px}
  body.listening-playful[data-ui="playful"] .controls{margin-top:16px}
  body.listening-playful[data-ui="playful"] .dictwrap{margin-top:14px}
  body.listening-playful[data-ui="playful"] .dictin{min-height:64px;padding:9px 12px;line-height:1.4}
  body.listening-playful[data-ui="playful"] .scoreout{margin-top:15px;gap:7px 10px;grid-template-columns:44px minmax(0,1fr)}
  body.listening-playful[data-ui="playful"] .ring{width:44px;height:44px;font-size:15px}
  body.listening-playful[data-ui="playful"] .ring i{width:34px;height:34px}
  body.listening-playful[data-ui="playful"] .smsg{font-size:12px}
  body.listening-playful[data-ui="playful"] .words{font-size:14px;line-height:1.65}
  body.listening-playful[data-ui="playful"] .heard{font-size:11px}
  body.listening-playful[data-ui="playful"] .target{font-size:12px;margin-top:7px}
  body.listening-playful[data-ui="playful"] footer{padding-top:5px;padding-bottom:calc(12px + var(--app-safe-bottom));font-size:10px}
}
@media(min-width:360px) and (max-width:600px) and (min-height:740px) and (orientation:portrait){
  body.listening-playful[data-ui="playful"] .htitle{min-height:138px;padding-right:144px}
  body.listening-playful[data-ui="playful"] main{gap:16px}
  body.listening-playful[data-ui="playful"] .card{min-height:340px;padding:25px 20px}
}
/* Natural flow remains available for long feedback, large text and keyboards. */
@media(prefers-reduced-motion:reduce){body.listening-playful[data-ui="playful"] *{animation:none!important;transition:none!important}}

/* Dictation keeps listen/replay together, leaving room for the answer below. */
body.listening-playful[data-ui="playful"] .card:has(.dictwrap){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:15px 10px;align-content:center;justify-items:center}
body.listening-playful[data-ui="playful"] .card:has(.dictwrap) :is(.tagline,.dictwrap,#out,.controls){grid-column:1/-1;margin:0}
body.listening-playful[data-ui="playful"] .card:has(.dictwrap) .listenbtn{width:100%;max-width:none;min-width:0}
body.listening-playful[data-ui="playful"] .card:has(.dictwrap) .replay{width:114px;min-height:52px;margin:0;padding:9px 8px}
body.listening-playful[data-ui="playful"] #out:empty{display:none}
body.listening-playful[data-ui="playful"] .card:has(.scoreout) .tagline{display:none}
@media(max-width:600px){
  body.listening-playful[data-ui="playful"] .card:has(.dictwrap){gap:14px 9px}
  body.listening-playful[data-ui="playful"] .card:has(.dictwrap) .listenbtn:not(.small){font-size:14px;padding:10px 8px}
  body.listening-playful[data-ui="playful"] .card:has(.dictwrap) .replay{width:99px;min-height:52px;font-size:11px}
}

/* Second-level practice rooms have their own setting. This studio deliberately
   uses its authored interior instead of the homepage's time-of-day ocean. */
body.listening-playful[data-ui="playful"]{--sky-ink:#fff9e9;--sky-sub:#f8ead3;--sky-shadow:0 2px 5px #142b29,0 1px 2px #142b29}
body.listening-playful[data-ui="playful"]::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#183b3517,#183b3500 40%),url('assets/ui/shimago-listening-v1/studio.webp') center top/cover no-repeat}
body.listening-playful[data-ui="playful"] .htitle{min-height:154px;padding:20px 10px 18px;text-align:center;align-items:center}
body.listening-playful[data-ui="playful"] .htitle h1{color:#fff9e9;text-shadow:var(--sky-shadow)}
body.listening-playful[data-ui="playful"] .htitle p{text-shadow:0 1px 4px #142b29,0 1px 2px #142b29}
body.listening-playful[data-ui="playful"] :is(.card,.done,.empty){border-color:#ead9b3;box-shadow:inset 0 2px 0 #fffdf5,inset 0 -3px 0 #efe2c5,0 6px 0 #b79667,0 12px 25px #182e2c45}
body.listening-playful[data-ui="playful"] .meta{border-color:#f8eed1;box-shadow:0 3px 0 #96764e}
@media(min-width:760px){
  body.listening-playful[data-ui="playful"]::before{background-size:100% 100%,cover;background-color:#315957}
}
@media(max-width:600px){
  body.listening-playful[data-ui="playful"] .htitle{min-height:100px;padding:8px 6px}
  body.listening-playful[data-ui="playful"] .htitle h1{font-size:25px}
}
@media(min-width:360px) and (max-width:600px) and (min-height:740px) and (orientation:portrait){
  body.listening-playful[data-ui="playful"] .htitle{min-height:138px;padding:15px 6px}
}
@media(max-width:600px){
  body.listening-playful[data-ui="playful"] .card:has(.scoreout){padding-top:16px;padding-bottom:16px}
  body.listening-playful[data-ui="playful"] .card:has(.scoreout) .scoreout{margin-top:8px}
}