/* Focused practice rooms. Shared island controls, purpose-built study surfaces.
   No exercise, scoring, progress or currency state is owned by this stylesheet. */
body.study-room[data-ui="playful"]{
  --ink:#284c41;--muted:#657364;--green:#287052;--card:#fffbed;--line:#e3d4b4;--soft:#e7efdb;
  --room-shade:linear-gradient(180deg,#183d365e,#23433b22 35%,#2e38274d);
  --room-position:center 57%;--room-width:600px;
  --room-font:'Hiragino Maru Gothic ProN','Hiragino Sans','Yu Gothic',system-ui,sans-serif;
  font-family:var(--room-font);color:var(--ink);background:#405b46;min-height:100svh;
  margin:0;padding:0;position:relative;isolation:isolate;line-height:1.5;
}
body.study-room::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--room-shade),url('assets/ui/shimago-practice-rooms-v1/library.webp') var(--room-position)/cover no-repeat}
body.study-room :is(button,input,.jp,[data-jp]){font-family:var(--room-font)}
body.study-room :is(header,main,footer){position:relative}
body.study-room header{background:none;border:0;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));color:var(--ink)}
body.study-room header :is(.hbar,.hrow){max-width:var(--room-width);margin:0 auto;min-height:44px;animation:none}
body.study-room .hrow{padding-right:104px}
body.study-room .hbar{gap:8px;flex-wrap:wrap;padding-right:104px}
body.study-room .hbar .back{white-space:nowrap;font-size:12px;padding:8px 10px;gap:4px}
body.study-room #drewLangToggle{position:absolute;top:calc(12px + env(safe-area-inset-top));right:max(16px,calc((100vw - var(--room-width))/2));min-height:44px;padding:9px 10px;background:linear-gradient(#fffdf6,#efe3c5);border:1px solid #d1bc96;color:#335847;border-radius:15px;box-shadow:inset 0 2px #fff,0 4px #ab9470;font:700 12px/1.2 var(--room-font);gap:5px}
body.study-room .hero{max-width:var(--room-width);min-height:108px;margin:13px auto 0;padding:14px 95px 15px 3px;background:none;border:0;border-radius:0;box-shadow:none;transform:none;animation:none;overflow:visible;display:flex;flex-direction:column;justify-content:center}
body.study-room .hero::before{display:none}
body.study-room .hero :is(.kicker,h1,.sub){position:relative;color:#fff8df;text-shadow:0 2px 5px #1c352b,0 1px 1px #1c352b}
body.study-room .hero .kicker{font:800 10px/1.5 var(--room-font);letter-spacing:.15em}
body.study-room .hero h1{font:700 clamp(25px,5.4vw,31px)/1.2 'Fredoka',var(--room-font);letter-spacing:-.02em;margin:5px 0 0}
body.study-room .hero .sub{font-size:12px;font-weight:600;line-height:1.5;margin:7px 0 0}
body.study-room .room-object{position:absolute;right:0;top:50%;width:88px;height:88px;object-fit:contain;transform:translateY(-50%);filter:drop-shadow(0 5px 3px #102a2940)}
body.study-room main{max-width:calc(var(--room-width) + 32px);margin:0 auto;padding:4px max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
body.study-room footer{padding:8px 16px 16px;color:#fff5de;text-shadow:0 1px 3px #244337;font:700 10px/1.5 var(--room-font);letter-spacing:.16em;text-align:center;animation:none}
/* The standard tactile material remains consistent with home and Listening Lab. */
body.study-room .sg-button{
  --sg-height:46px;--sg-radius:16px;--sg-depth:4px;--sg-press:3px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:44px;min-height:var(--sg-height);
  padding:10px 17px;border:1px solid var(--sg-rim);border-radius:var(--sg-radius);
  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));
  box-shadow:inset 0 2px 0 var(--sg-highlight),inset 0 -2px 0 #ffffff2e,0 var(--sg-depth) 0 var(--sg-base),0 7px 11px #1e3d3020;
  color:var(--sg-ink);font:800 14px/1.3 var(--room-font);text-decoration:none;text-shadow:0 1px #ffffff3b;
}
body.study-room .sg-button--primary{--sg-face-top:#a9ebba;--sg-face-bottom:#6bd59c;--sg-base:#36806b;--sg-rim:#64b48f;--sg-ink:#174d3b}
body.study-room .room-button-audio{--sg-face-top:#9bdefa;--sg-face-bottom:#67bce9;--sg-base:#3a7caa;--sg-rim:#66acd4;--sg-ink:#174c72}
body.study-room .room-button-voice{--sg-face-top:#dec1f7;--sg-face-bottom:#bd96e9;--sg-base:#8463ad;--sg-rim:#b08ad4;--sg-ink:#4c376a}
body.study-room .sg-button--icon{width:44px;min-height:44px;padding:0;flex:none}
body.study-room .sg-button:not(:disabled):not([aria-disabled="true"]):active{transform:translateY(var(--sg-press));box-shadow:inset 0 1px 2px #23403120,0 1px 0 var(--sg-base),0 3px 5px #17382726}
body.study-room .sg-button:focus-visible{outline:3px solid #175f75;outline-offset:5px}
body.study-room .sg-button:disabled{opacity:.52;filter:saturate(.4);cursor:not-allowed}
body.study-room :is(.task-card.vr-card,.empty,.done,.card){background:linear-gradient(145deg,#fffef5,#fff6df);border:1px solid #ead8b1;border-radius:24px;box-shadow:inset 0 2px 0 #fff,inset 0 -3px 0 #f1e3c5,0 6px 0 #b99b6b,0 13px 24px #253f2c40;transform:none;animation:none;color:var(--ink)}
body.study-room :is(.bar,.pbar):not(header){height:9px;background:#567363b8;border:1px solid #fbf2db96;border-radius:999px;box-shadow:inset 0 1px 3px #17332742;margin:0 0 14px;overflow:hidden;animation:none}
body.study-room :is(.bar,.pbar)>i{height:100%;background:linear-gradient(#bdedbf,#79cd95);box-shadow:inset 0 1px #fff8;border-radius:999px}
body.study-room .empty{padding:26px 20px}
body.study-room .empty .big{font-size:40px;line-height:1.1;margin-bottom:10px}
body.study-room .empty :is(h2,p){color:var(--ink)}
body.study-room .empty h2{font-size:22px;line-height:1.3}
body.study-room .empty p{font-size:14px;line-height:1.65}
body.study-room .empty .cta{margin:15px 4px 3px}
/* Vocabulary: one card on a quiet reading desk. */
body.study-room.room-vocabulary{--room-position:43% 56%}
body.room-vocabulary .meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin:0 0 12px;animation:none}
body.room-vocabulary .pill{display:flex;flex-direction:column-reverse;align-items:center;gap:0;background:#fffae9f5;border:1px solid #f6e8c8;border-radius:14px;padding:6px 3px;font-size:10px;font-weight:700;line-height:1.4;box-shadow:0 3px #aa9066;color:#687461}
body.room-vocabulary .pill b{font:700 22px/1.1 'Fredoka',var(--room-font);color:#315b49}
body.room-vocabulary .task-card.vr-card{max-width:none;padding:22px 20px 18px}
body.room-vocabulary .vr-ask{font:700 11px/1.5 var(--room-font);color:var(--muted);margin:0 0 8px}
body.room-vocabulary .vr-jp{font-family:var(--room-font);font-size:clamp(26px,7vw,35px);color:#2c634d;line-height:1.3}
body.room-vocabulary .vr-pos{font-size:12px;margin-top:5px;color:var(--muted)}
body.room-vocabulary .vr-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:19px 0 0;padding:0;border:0;border-radius:0;background:none;overflow:visible}
body.room-vocabulary .vr-mode{font-size:13px;--sg-height:44px;padding:8px 10px}
body.room-vocabulary .vr-mode[aria-pressed="true"]{--sg-face-top:#b9e9f5;--sg-face-bottom:#89cde6;--sg-base:#4b92ad;--sg-rim:#7ebbd0;--sg-ink:#1d5570}
body.room-vocabulary .vr-typed{gap:9px;margin:18px auto 0;max-width:none}
body.room-vocabulary .vr-in{border:2px solid #d0d9bf;border-radius:14px;padding:11px 12px;background:#fffefa;color:#244d40;box-shadow:inset 0 2px 3px #304c3310;font-size:18px;min-height:49px}
body.room-vocabulary .vr-in:focus{border-color:#5b9f84;outline:2px solid #bfe9d34d;outline-offset:2px}
body.room-vocabulary .vr-go{font-size:14px;padding:10px 13px}
body.room-vocabulary .vr-spoken{margin:19px auto 0}
body.room-vocabulary .vr-mic{min-width:190px}
body.room-vocabulary .vr-note{font-family:var(--room-font);font-size:12px;min-height:18px;line-height:1.5;margin-top:12px}
body.room-vocabulary .vr-note:empty{display:none}
body.room-vocabulary .vr-show{font-family:var(--room-font);font-size:12px;margin-top:12px;min-height:44px;color:#617161}
body.room-vocabulary .vr-answer{margin-top:13px;padding-top:13px;border-color:#daceb3}
body.room-vocabulary .vr-en{font-size:clamp(25px,7vw,35px);overflow-wrap:anywhere}
body.room-vocabulary .vr-ex{font-size:13px;line-height:1.5;margin-top:8px;overflow-wrap:anywhere}
body.room-vocabulary .vr-next{display:flex;width:100%;margin:16px auto 0}
body.room-vocabulary .vr-heard .hw{font-size:16px}
/* Grammar: a paper instruction over a mint work surface and chunky word tiles. */
body.study-room.room-grammar{--room-position:57% 59%;--room-shade:linear-gradient(180deg,#3348346b,#52492524 38%,#36482c55)}
body.room-grammar #app:has(.prompt){border:1px solid #e6d6af;border-radius:24px;padding:17px;background:linear-gradient(145deg,#fffdf1,#fff3d7);box-shadow:inset 0 2px #fff,0 6px #b99b6b,0 13px 25px #233b2b40}
body.room-grammar #app>*{animation:none}
body.room-grammar .qn{font:800 10px/1.4 var(--room-font);color:#6e7861;letter-spacing:.08em;margin-bottom:11px}
body.room-grammar .prompt{padding:0;border:0;background:none;box-shadow:none;border-radius:0}
body.room-grammar .prompt .jp{font:800 21px/1.45 var(--room-font);color:#2e5744}
body.room-grammar .prompt .hint{font-size:11px;color:#6a745f;margin-top:6px}
body.room-grammar .build{min-height:76px;padding:10px;border:2px dashed #a8bf9a;border-radius:16px;background:#e8f0d9;box-shadow:inset 0 2px 3px #59784412;margin:17px 0 15px;gap:8px}
body.room-grammar .build:empty::before{font-size:13px;color:#697e60}
body.room-grammar .tiles{gap:9px 8px;padding:0 0 5px;min-height:44px}
body.room-grammar :is(.tile,.btile).sg-button{--sg-radius:12px;--sg-height:44px;--sg-depth:3px;--sg-face-top:#fffef7;--sg-face-bottom:#f4e8ca;--sg-base:#b9aa87;--sg-rim:#d2c4a3;padding:8px 12px;font:600 16px/1.2 'Fredoka',var(--room-font);margin:0;max-width:100%;overflow-wrap:anywhere}
body.room-grammar .btile.sg-button{--sg-face-top:#cdeac0;--sg-face-bottom:#add89a;--sg-base:#739969;--sg-rim:#99bb82;--sg-ink:#345b3b}
/* A chosen word moves to the sentence; its duplicate in the bank takes no space.
   Removing it from the sentence or Clear restores the original tile immediately. */
body.room-grammar .tile.used{display:none}
body.room-grammar .tiles:not(:has(.tile:not(.used))){display:none}
body.room-grammar .row{margin-top:16px;gap:12px}
body.room-grammar .res{font-size:13px;line-height:1.5;padding:10px 12px;margin-top:14px}
body.room-grammar .res .spk{margin-left:5px;vertical-align:middle;--sg-height:44px;width:44px}
body.room-grammar .done{padding:25px 20px}
body.room-grammar .done .cta{margin:13px 3px 2px;font-size:13px}
/* TOEIC: a restrained exam desk, keeping the test itself distraction-free. */
body.study-room.room-exam{--room-width:640px;--ink:#314c49;--muted:#65716d;--navy:#395f59;--room-position:64% 48%;--room-shade:linear-gradient(180deg,#153d3a99,#345d5066 38%,#243f3566)}
body.room-exam header{max-width:672px;margin:auto;min-height:68px;display:flex;gap:10px;padding-bottom:10px}
body.room-exam header h1{font-family:var(--room-font);font-size:15px;font-weight:800;color:#fff7e5;letter-spacing:.02em;text-shadow:0 1px 4px #1e3931;white-space:normal}
body.room-exam header .back{padding:8px 12px;--sg-height:44px;font-size:12px}
body.room-exam #timer{background:#264b42df;color:#fff9e5;border:1px solid #91b49d;border-radius:13px;padding:9px 10px;min-width:65px;font:700 15px/1.3 'Fredoka',var(--room-font);box-shadow:inset 0 2px #ffffff0e,0 3px #19372e}
body.room-exam #timer.low{background:#a3473e;border-color:#e2917f}
body.room-exam main{padding-top:14px}
body.room-exam .card{padding:20px;margin-bottom:18px}
body.room-exam .dir{padding:22px}
body.room-exam .exam-hero{position:relative;min-height:103px;padding:2px 88px 15px 0;border-bottom:1px dashed #dbd1b5;margin-bottom:18px}
body.room-exam .exam-hero img{position:absolute;right:-3px;top:5px;width:85px;height:85px;object-fit:contain;filter:drop-shadow(0 4px 3px #34483122)}
body.room-exam .parttag{font-size:10px;padding:4px 9px;border-radius:8px;background:#e3ead9;color:#426450;letter-spacing:.03em;margin-bottom:8px}
body.room-exam .exam-hero h2{font:800 21px/1.4 var(--room-font);margin:0;letter-spacing:-.03em}
body.room-exam .exam-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:19px}
body.room-exam .exam-facts span{background:#eee9d9;border:1px solid #e5ddc5;border-radius:13px;text-align:center;font-size:11px;padding:9px 3px;color:#6a7568}
body.room-exam .exam-facts b{font:700 26px/1.2 'Fredoka',var(--room-font);color:#3a6454}
body.room-exam .exam-rules{list-style:none;padding:0;margin:0;color:#526454;font-size:12px;line-height:1.7}
body.room-exam .exam-rules li{position:relative;padding-left:16px;margin-bottom:9px}
body.room-exam .exam-rules li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:#80ab86;box-shadow:0 1px #56785a}
body.room-exam .navrow{gap:12px;margin-top:20px}
body.room-exam .navrow .sg-button{padding:12px;font-size:14px;min-height:49px}
body.room-exam .exam-about{margin-top:18px;border-top:1px dashed #dbd1b5;padding-top:5px;font-size:11px;color:#697569;line-height:1.6}
body.room-exam .exam-about summary{cursor:pointer;min-height:40px;display:list-item;align-content:center;padding:10px 0;list-style-position:inside}
body.room-exam .exam-about p{font-size:12px;color:inherit;margin:0 0 8px}
body.room-exam .disc{font-size:11px;line-height:1.5}
body.room-exam .scene{width:100%;max-width:260px;border:1px solid #ddd7c5;border-radius:12px;margin-bottom:10px}
body.room-exam .playbtn{display:flex;margin:12px auto 17px;min-width:180px}
body.room-exam .listenonly{font-size:12px;padding-top:4px;line-height:1.55}
body.room-exam .qno{font-size:11px;margin-bottom:8px;color:#6b7868}
body.room-exam .opts{gap:10px}
body.room-exam .opt{--sg-height:46px;--sg-depth:3px;--sg-radius:13px;justify-content:flex-start;align-items:center;padding:10px 12px;font-size:14px;font-weight:600;text-align:left;gap:10px;line-height:1.4}
body.room-exam .opt .ab{width:25px;height:25px;border:1px solid #b6c8ad;background:#e2ecda;color:#456444;font-size:12px;border-radius:8px}
body.room-exam .opt.pick{--sg-face-top:#bfe9ce;--sg-face-bottom:#a2dcb9;--sg-base:#6c9c7a;--sg-rim:#8ab999}
body.room-exam .opt.pick .ab{background:#467658;color:#fff;border-color:#467658}
body.room-exam .opt.ok{border-color:#79b990;background:#e2f1df}
body.room-exam .opt.bad{border-color:#d99e8e;background:#f9e7df}
body.room-exam .stem{font-size:16px;line-height:1.55;overflow-wrap:anywhere}
body.room-exam .passage{background:#fffdf4;border-color:#ded7bd;line-height:1.65;font-size:14px;overflow-wrap:anywhere}
body.room-exam .report .band{color:#35654e}
body.room-exam .prow .bar{margin:0;border:0;height:9px;background:#e7eadb;box-shadow:none}
body.room-exam .expl{background:#e9efdf;border-color:#78a47a}
@media(min-width:760px){
  body.study-room[data-ui="playful"]{--room-position:center 55%}
  body.study-room::before{background-size:100% 100%,cover}
  body.study-room .hero{min-height:142px;padding-top:22px;padding-bottom:22px}
  body.study-room .room-object{width:104px;height:104px}
  body.room-exam main{padding-top:35px}
}
@media(max-width:420px){
  body.study-room .hbar{padding-right:91px;gap:5px}
  body.study-room .hbar .back{padding:8px 7px;font-size:11px;gap:2px;--sg-radius:13px;--sg-height:44px}
  body.study-room .hbar .back .kw-em{width:15px;height:15px}
  body.study-room .hero{min-height:104px;margin-top:10px;padding-right:82px}
  body.study-room .hero h1{font-size:25px}
  body.study-room .room-object{width:77px;height:77px}
  body.room-vocabulary .task-card.vr-card{padding:19px 17px 14px}
  body.room-grammar .hero .sub{font-size:11px}
  body.room-exam .card{padding:17px}
  body.room-exam .dir{padding:20px}
  body.room-exam .exam-hero h2{font-size:19px}
  body.room-exam .scene{max-width:218px}
  body.room-exam .card:has(.scene) .opts.audio-choices{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  body.room-exam .card:has(.scene) .audio-choices .opt{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  body.study-room *,body.study-room *::before,body.study-room *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* pwa.js loads app-coastal.css later. Keep these room headers and controls in
   their intended material even under its content-page and grammar overrides. */
body.study-room[data-ui="playful"] :is(.hero,.room-heading,.hrow,.bar-in){background:transparent;border:0;box-shadow:none}
body.study-room[data-ui="playful"] :is(.btn.sg-button,a.back.sg-button){
  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 7px 11px #1e3d3020;
  font-family:var(--room-font);
}
body.study-room[data-ui="playful"] :is(.btn.sg-button,a.back.sg-button):not(:disabled):active{box-shadow:inset 0 1px 2px #23403120,0 1px 0 var(--sg-base),0 3px 5px #17382726}