*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:'Trebuchet MS',Arial,sans-serif;color:#07145e}body{background:#bde8ff url(assets/classroom-panorama.webp) center/cover fixed no-repeat;overflow:hidden}button,a{touch-action:manipulation}button{font:900 clamp(15px,1.5vw,22px)/1.2 'Trebuchet MS',Arial,sans-serif;color:#07145e;border:3px solid #bfe6ff;border-radius:22px;background:linear-gradient(white,#e6f6ff);padding:10px 18px;cursor:pointer;box-shadow:0 4px 0 #3688c74d;min-height:44px}button:hover{filter:brightness(1.03)}button:active{translate:0 2px}button:focus-visible,a:focus-visible{outline:4px solid #ffb700;outline-offset:3px}button:disabled{opacity:.5;cursor:default}button.active{border-color:#ffc900;background:#fff4a0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}header{display:flex;align-items:center;gap:12px;padding:7px 16px;background:linear-gradient(#079dff,#0878f4);border-radius:0 0 25px 25px;color:white;min-height:64px}header button{background:#078aff;border-color:#75cfff;color:white;padding:5px;width:46px;height:46px;border-radius:50%;font-size:26px;flex-shrink:0}.brand{display:flex;align-items:center;background:#fff;border-radius:13px;padding:3px 9px;flex-shrink:0}.brand img{display:block;width:132px;height:40px;object-fit:contain}h1{font-size:clamp(18px,2.4vw,34px);margin:0 auto;text-align:center;font-weight:900;color:#07145e;background:linear-gradient(#ffed65,#ffd025);border-radius:26px;padding:9px 22px;box-shadow:0 4px 0 #cc9c2780;min-width:0}#progress{font-size:18px;font-weight:bold;white-space:nowrap}.exit{font-weight:bold;padding:10px;flex-shrink:0}.art{display:block;width:100%;height:100%;max-width:100%;max-height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center;border-radius:12px}.yellow{background:linear-gradient(#fff270,#ffd52e);border-color:#fff595}.green{background:linear-gradient(#6eea37,#08b83f);color:#fff;border-color:#8bf172;box-shadow:0 4px 0 #069c44}.is-menu{position:relative;grid-template-rows:minmax(0,1fr)}.is-menu header{position:absolute;right:20px;bottom:14px;padding:0;min-height:0;background:none;z-index:3;gap:10px}.is-menu header>*{display:none}.is-menu header #full,.is-menu header .exit{display:block}.is-menu header .exit{color:#07145e;background:#fff;border-radius:18px}.menu{min-height:0;display:grid;grid-template-rows:48px minmax(90px,.65fr) minmax(0,1.35fr);gap:12px;width:min(1120px,92%);height:100%;margin:0 auto;padding:12px 0 82px}.menu-tools{display:flex;justify-content:space-between;align-items:center}.menu-tools button{width:48px;height:48px;border-radius:50%;background:linear-gradient(#00dbef,#00a6e4);color:white;border-color:white;font-size:26px;padding:4px}.menu-tools .muted{opacity:.65}.menu-brand{height:48px;background:white;border-radius:0 0 20px 20px;padding:5px 15px}.menu-brand img{height:100%;width:145px;object-fit:contain;display:block}@font-face{font-family:Fredoka;src:url(assets/fonts/fredoka-latin.ttf) format('truetype');font-style:normal;font-weight:300 700;font-display:swap}
.menu-welcome{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(80px,140px) minmax(0,auto) minmax(70px,150px);justify-content:center;align-items:center;gap:12px;min-height:0;width:100%;padding:8px 20px}
.hero-vali-frame{height:100%;min-height:0;position:relative;display:grid;place-items:center}
.hero-vali-frame::after{content:"";position:absolute;bottom:8px;width:70%;height:14px;background:#00759d26;border-radius:50%;filter:blur(5px);z-index:-1}
.hero-vali{height:100%;width:100%;max-height:220px;object-fit:contain;min-height:0;filter:drop-shadow(0 7px 8px #0074a12e)}
.menu-copy{position:relative;min-width:0;padding:12px 30px;border:3px solid white;border-radius:36px;background:linear-gradient(165deg,#fff 45%,#e6faff);box-shadow:0 6px 0 #249cc526,0 13px 24px #0077a322;text-align:center}
.menu-copy::before{content:"";position:absolute;inset:6px;border:1px solid #d2f0fa;border-radius:28px;pointer-events:none}
.menu-welcome h2{position:relative;font-family:Fredoka,'Trebuchet MS',Arial,sans-serif;font-size:clamp(29px,4vw,56px);font-weight:700;line-height:1.03;letter-spacing:.005em;margin:0;text-align:center;text-shadow:none}
.hero-small{display:block;color:#143fb8;font-size:.82em;margin-bottom:2px}
.hero-big{display:block;white-space:nowrap}
.menu-welcome h2 em{font-style:normal;color:#d88000}.menu-welcome h2 strong{color:#008895;font-weight:700}
.menu-welcome p{position:relative;font-family:Fredoka,'Trebuchet MS',Arial,sans-serif;font-weight:600;font-size:clamp(18px,2vw,26px);line-height:1.1;margin:9px auto 0;background:linear-gradient(#fff16a,#ffda29);border:2px solid #fff08a;border-radius:22px;padding:7px 24px;width:fit-content;box-shadow:0 3px 0 #d4a62d33}
.header-scene{width:100%;height:100%;min-height:0;max-height:190px;object-fit:contain;filter:drop-shadow(0 8px 6px #086f9b28);transform:rotate(-4deg)}
.world-grid{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:18px;width:min(100%,940px);justify-self:center}.world-card{min-width:0;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px;padding:10px 18px;border:7px solid var(--accent);border-radius:32px;background:#fff;box-shadow:0 6px 0 #0370a82e;overflow:hidden}.world-art{min-height:0;display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.world-art img{height:100%;width:27%;min-height:0;object-fit:contain}.world-art>span{font-size:35px;color:#00a5dd}.world-caption{display:flex;justify-content:center;align-items:center;gap:12px;font-size:clamp(18px,2.1vw,28px)}.world-caption b{display:grid;place-items:center;border-radius:50%;background:var(--accent);color:white;font-size:20px;width:40px;height:40px;flex:0 0 auto}
#choose{min-height:0;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;padding:16px 5% 22px}.chooser-title{display:flex;justify-content:center;align-items:center;gap:20px}.chooser-title img{height:100px;width:100px;object-fit:contain}.chooser-title h2{font-size:clamp(24px,3vw,40px);margin:0}.chooser-title p{margin:7px 0;font-weight:bold;font-size:19px}.difficulties{display:flex;gap:12px;justify-content:center}.difficulties button{flex:0 1 260px}.back{justify-self:center}#activities{min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,350px));grid-auto-rows:minmax(0,290px);gap:24px;align-content:center;justify-content:center}.activity{min-height:0;min-width:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:minmax(0,1fr) auto;gap:10px;text-align:center;background:#fff;border:6px solid var(--accent);border-radius:30px;padding:16px;overflow:hidden}.activity>.art{grid-column:1/-1;height:100%;max-height:150px;align-self:center}.activity strong{font-size:clamp(20px,2.2vw,28px);display:block}.activity small{display:block;font-size:14px;margin-top:7px;font-weight:500}.activity .arrow{border-radius:50%;width:40px;height:40px;display:grid;place-items:center;color:white;background:var(--accent);align-self:center;font-size:18px}
#play{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) 42px 48px;gap:8px;padding:10px 4% 16px}.instruction{display:flex;align-items:center;gap:10px;justify-content:center;min-height:48px}.instruction h2{font-size:clamp(17px,1.9vw,27px);margin:0;padding:10px 22px;border-radius:26px;background:#ffffffed;text-align:center}.instruction #level-label{background:#ffdf38;border-radius:20px;padding:10px;font-weight:900;white-space:nowrap}.instruction #speak{border-radius:50%;background:#0089ff;color:white;width:48px;padding:7px}.feedback{min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;overflow:hidden}.feedback img{height:42px;width:46px;object-fit:contain}.feedback p{margin:0;text-align:center;font-weight:900;font-size:clamp(15px,1.5vw,21px);background:#ffffffeb;border-radius:20px;padding:6px 16px}.feedback p:empty{background:transparent}footer{display:flex;justify-content:center;gap:12px;min-height:0}footer button{padding:8px 16px;min-height:0}footer .green{min-width:210px}#board{min-height:0;min-width:0;display:grid;gap:14px;width:100%;max-width:1180px;justify-self:center;overflow:hidden}.panel{background:#fffffff5;border-radius:30px;padding:16px;box-shadow:0 4px 0 #0068bd2b;border:2px solid #d7edff;min-height:0;min-width:0}.cards{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));gap:16px;min-height:0;min-width:0}.card,.slot{position:relative;isolation:isolate;min-width:0;min-height:0;overflow:hidden;display:grid;place-items:center;background:white;border:5px solid #0797ff;border-radius:24px;padding:0;box-shadow:0 4px 0 #3688c733}.card>.art,.slot>.art{position:absolute;inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);max-width:none;max-height:none;object-fit:contain;aspect-ratio:auto}.card.selected,.slot.selected{border-color:#ffd000;box-shadow:0 0 0 4px #fff6aa}.card.correct{border-color:#4cce35}.card.wrong{border-color:#ffb53b}.choices{height:100%;width:min(100%,740px);max-height:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));justify-self:center}.listen{grid-template-rows:auto minmax(0,1fr)}.listen-clue{justify-self:center;background:#fff;border-radius:22px;padding:10px 22px;font-size:20px}.sequence{grid-template-rows:repeat(2,minmax(0,1fr))}.sequence-slots,.sequence-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-height:0}.slot{border:3px dashed #92ceff;background:#f2f9ff}.slot .number{font-size:38px;font-weight:900;color:#78b9eb}.sequence-tray .used{opacity:.2}.series{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}.series-line{display:flex;align-items:center;justify-content:center;gap:10px;min-height:0}.series-line>.art{width:0;flex:1 1 0;height:100%;max-width:132px;object-fit:contain}.question-mark{font-size:clamp(36px,5vw,66px);font-weight:bold}.series-choices{width:min(100%,880px);justify-self:center}.routines{grid-template-rows:minmax(0,.8fr) minmax(0,1.2fr)}.routine-context{display:flex;align-items:center;justify-content:center;gap:20px}.routine-context .art{width:65%;height:100%;max-width:450px}.routine-question{font-size:40px}.routine-choices{width:100%;justify-self:center}
#board.groups{grid-template-rows:minmax(0,1fr) minmax(70px,25%);max-width:1180px}.groups:not(#board){display:grid;grid-template-columns:repeat(var(--groups),minmax(0,1fr));gap:16px;min-height:0}.group{min-height:0;min-width:0;display:grid;grid-template-rows:clamp(65px,10dvh,100px) minmax(0,1fr);gap:6px;border:5px solid var(--accent);background:#fffffff5;border-radius:28px;padding:10px;overflow:hidden;cursor:pointer}.group-heading{display:flex;align-items:center;justify-content:center;gap:12px;min-height:0;min-width:0;overflow:hidden}.group h3{margin:0;font-size:clamp(18px,2vw,27px);overflow-wrap:anywhere}.group-example{height:100%;width:clamp(56px,7vw,88px);flex-shrink:0;min-height:0}.inside{--group-card-size:60px;min-height:0;min-width:0;display:grid;grid-template-columns:repeat(2,var(--group-card-size));grid-template-rows:repeat(var(--group-rows),var(--group-card-size));gap:8px;justify-content:center;align-content:center;overflow:hidden}.inside .card{width:var(--group-card-size);height:var(--group-card-size);border:3px solid var(--accent);border-radius:20px;min-height:0}.inside .card:last-child:nth-child(odd){grid-column:1/-1;justify-self:center}.inside .card .art{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}.group-tray{display:grid;grid-template-columns:repeat(var(--tray-cols),minmax(0,1fr));gap:10px;min-height:0;min-width:0;width:min(100%,1050px);justify-self:center;align-items:stretch}.group-tray .card{width:100%;height:100%;max-height:150px}.group-tray .used{visibility:hidden;pointer-events:none}.memory{height:100%;width:min(100%,940px);justify-self:center;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:12px;min-height:0;overflow:hidden}.memory .card{height:100%;background:linear-gradient(145deg,#008cff,#0056ce);border-color:#8edfff}.memory .backface{font-size:clamp(28px,4vw,54px);color:#ffe533;line-height:1}.memory .card.open{background:white}.memory .card.matched{background:#f0ffed;border-color:#6bdc4c}.associations{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(90px,20vw,300px);height:100%;width:min(100%,900px);justify-self:center;min-height:0;overflow:hidden}.association-column{position:relative;z-index:1;min-height:0;min-width:0;display:grid;grid-template-rows:repeat(var(--rows),minmax(0,1fr));gap:12px;align-items:stretch}.association-column .card{height:100%;width:100%;max-width:210px;justify-self:center}.association-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.pair-link{fill:none;stroke:#009bc1;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}.association-links marker path{stroke:none}.reward{animation:pop .3s ease}dialog{border:5px solid #00bfff;border-radius:34px;color:#07145e;max-width:600px;text-align:center;padding:24px;background:#f5fcff}dialog::backdrop{background:#043b7aa8}dialog img{width:170px;height:160px;object-fit:contain}dialog h2{font-size:30px}dialog button{margin:8px}body.dragging{user-select:none}.draggable{touch-action:none;cursor:grab}.drag-ghost{position:fixed;width:90px;height:90px;z-index:1000;pointer-events:none;border:4px solid #ffcf00;border-radius:20px;background:white;padding:3px;opacity:.9}.drag-ghost .art{width:100%;height:100%}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes pop{50%{scale:1.015}}
@media(min-width:1500px){.menu{width:min(1240px,90%)}.world-grid{width:1000px}.world-caption{font-size:28px}}
@media(max-height:700px) and (orientation:landscape){header{min-height:54px;padding:4px 12px}header button{width:42px;height:42px;min-height:0}.brand img{height:34px;width:115px}h1{font-size:23px;padding:7px 18px}#play{grid-template-rows:42px minmax(0,1fr) 30px 42px;gap:6px;padding:6px 4% 10px}.instruction{min-height:0;gap:8px}.instruction h2{padding:7px 16px;font-size:19px}.instruction #level-label{padding:8px}.instruction button{min-height:38px;font-size:17px;padding:6px}.instruction #speak{width:40px}.feedback p{font-size:16px;padding:4px 12px}.feedback img{height:30px}.panel{padding:10px}.group{grid-template-rows:58px minmax(0,1fr);padding:7px;gap:5px}.group h3{font-size:19px}.group-example{width:58px}.group-heading{gap:6px}#board{gap:10px}.inside{gap:6px}.memory,.association-column{gap:8px}.card{border-width:4px;border-radius:19px}.chooser-title img{height:66px}.chooser-title p{font-size:17px}.chooser-title h2{font-size:29px}#choose{gap:9px;padding:10px 5% 14px}#activities{grid-auto-rows:minmax(0,220px);gap:20px}.activity{padding:12px}.activity>.art{max-height:100px}.activity strong{font-size:23px}.menu{grid-template-rows:42px minmax(75px,.65fr) minmax(0,1.35fr);padding:7px 0 60px;gap:8px}.menu-tools button,.menu-brand{height:42px}.menu-tools button{width:42px;min-height:0}.menu-welcome{grid-template-columns:100px minmax(0,auto) 110px;gap:8px;padding:3px 10px}.hero-vali{max-height:120px}.header-scene{max-height:110px}.menu-copy{padding:8px 20px;border-radius:28px}.menu-copy::before{border-radius:21px}.menu-welcome h2{font-size:36px}.menu-welcome p{font-size:18px;margin-top:5px;padding:4px 18px}.world-grid{gap:12px;max-width:820px}.world-card{padding:7px 13px;border-width:5px;border-radius:26px}.world-caption{font-size:21px}.world-caption b{width:32px;height:32px;font-size:17px}.is-menu header{bottom:9px}}
@media(max-width:700px),(orientation:portrait){body{overflow:auto;background-position:center}.shell{height:auto;min-height:100dvh;overflow:visible;grid-template-rows:auto minmax(0,1fr)}header{gap:6px;padding:7px;flex-wrap:wrap}.brand img{width:100px;height:34px}header button{width:42px;height:42px;font-size:23px}header h1{order:1;flex-basis:100%;font-size:20px;margin-top:3px;padding:8px}#progress{margin-left:auto;font-size:16px}.exit{font-size:14px;padding:5px}.is-menu{height:100dvh;min-height:640px;grid-template-rows:minmax(0,1fr);overflow:hidden}.is-menu header{bottom:12px;right:12px;flex-wrap:nowrap}.menu{width:94%;padding:10px 0 76px;grid-template-rows:44px minmax(110px,.6fr) minmax(0,1.4fr);gap:12px}.menu-welcome{grid-template-columns:minmax(65px,90px) minmax(0,1fr);gap:5px;padding:0}.hero-vali{max-height:140px}.header-scene{display:none}.menu-copy{padding:10px 9px;border-radius:26px}.menu-copy::before{inset:4px;border-radius:20px}.menu-welcome h2{font-size:clamp(24px,5.4vw,44px)}.menu-welcome p{font-size:17px;padding:6px 12px;margin-top:7px}.menu-brand{height:42px}.menu-brand img{width:115px}.menu-tools button{height:42px;width:42px;min-height:0}.world-grid{gap:10px}.world-card{padding:10px 7px;border-width:5px;border-radius:24px}.world-art{gap:3px}.world-art>span{font-size:23px}.world-art img{width:30%}.world-caption{font-size:clamp(15px,3vw,23px);gap:5px}.world-caption b{width:28px;height:28px;font-size:14px}#choose{min-height:calc(100dvh - 115px);gap:12px;padding:14px 12px 22px}.chooser-title{gap:6px}.chooser-title img{width:70px;height:84px}.chooser-title h2{font-size:26px}.chooser-title p{font-size:15px}.difficulties{gap:5px}.difficulties button{font-size:13px;padding:8px 6px}#activities{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(180px,280px);gap:12px}.activity{padding:10px;border-width:4px;gap:8px}.activity>.art{max-height:120px}.activity strong{font-size:19px}.activity small{font-size:12px}.activity .arrow{width:28px;height:28px;font-size:13px}#play{height:calc(100dvh - 115px);min-height:530px;padding:9px 10px 14px;grid-template-rows:auto minmax(0,1fr) 38px 48px;gap:8px}.instruction{flex-wrap:wrap;gap:5px}.instruction h2{order:-1;width:100%;font-size:18px;padding:9px 12px}.instruction #level-label{font-size:14px;padding:8px}.instruction button{font-size:16px;padding:7px 12px;min-height:38px}.instruction #speak{width:40px}footer{gap:5px}footer button{font-size:14px;padding:7px 9px}footer .green{min-width:0}.feedback p{font-size:14px;padding:5px 9px}.feedback img{width:34px;height:34px}#board{gap:9px}.panel{padding:8px;border-radius:22px}.card,.slot{border-width:3px;border-radius:18px}.card>.art,.slot>.art{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px)}.sequence-slots,.sequence-tray{gap:7px}.series-line{gap:4px}.question-mark{font-size:36px}.cards{gap:7px}.memory{gap:7px}.memory .backface{font-size:31px}.groups:not(#board){gap:7px}.group{grid-template-rows:70px minmax(0,1fr);padding:5px;gap:4px;border-width:3px;border-radius:20px}.group-heading{flex-direction:column;gap:2px}.group-example{width:43px;height:43px;flex-shrink:0}.group h3{font-size:14px;line-height:1.05;text-align:center}.inside{gap:5px}.inside .card{border-width:2px;border-radius:12px}.inside .card .art{inset:3px;width:calc(100% - 6px);height:calc(100% - 6px)}#board.groups{grid-template-rows:minmax(0,1fr) minmax(65px,30%)}.group-tray{grid-template-columns:repeat(min(var(--tray-cols),5),minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:5px}.associations{gap:clamp(64px,20vw,150px)}.association-column{gap:8px}.pair-link{stroke-width:4}.routine-context{gap:8px}.routine-question{font-size:29px}.listen-clue{font-size:17px;padding:8px 14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.group-tray{height:100%;justify-content:center;align-content:center}
.group-tray .card{height:100%;max-height:none}
@media(orientation:landscape){.world-grid{width:min(100%,940px,calc((100dvh - 140px)*1.4))}}

/* Large desktop displays can use more of the available space without changing touch layouts. */
@media(min-width:1200px) and (min-height:701px) and (hover:hover) and (pointer:fine){
 .menu{width:min(1760px,94%);grid-template-rows:52px minmax(180px,.65fr) minmax(0,1.35fr);padding-bottom:82px}
 .world-grid{width:min(100%,1600px,calc((100dvh - 160px)*1.5));max-width:none;gap:24px}
 .world-card{border-width:8px;border-radius:36px;padding:14px 24px}
 .world-caption{font-family:Fredoka,'Trebuchet MS',Arial,sans-serif;font-weight:600;font-size:clamp(25px,2vw,38px)}
 .world-caption b{width:46px;height:46px;font-size:22px}
 .menu-welcome{grid-template-columns:minmax(150px,235px) minmax(0,auto) minmax(130px,225px);gap:22px;padding:6px 24px}
 .hero-vali{max-height:310px}.header-scene{max-height:240px}
 .menu-copy{padding:16px 38px;border-radius:44px}.menu-copy::before{border-radius:36px}
 .menu-welcome h2{font-size:clamp(44px,min(4.7vw,7.3dvh),102px);line-height:1.02}
 .menu-welcome p{font-size:clamp(22px,2vw,34px);padding:8px 28px;margin-top:10px}
}

/* Explicit arrow heads keep their orientation and scale on mobile Safari. */
.pair-arrow{fill:#009bc1;stroke:none}
.series-line>.series-slot{flex:1 1 0;width:0;max-width:132px;align-self:center;height:min(100%,132px);aspect-ratio:1;min-width:30px}
.series-slot.filled{border-style:solid;border-color:#ffd000;background:white}
/* Five adventures, with the new emotion adventure last in reading order. */
.world-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));width:min(100%,1120px)}
.world-card{grid-column:span 2;order:1}.world-card[data-world="3"]{grid-column:2/span 2}.world-card.emotion-world{order:5;grid-column:4/span 2}
.world-caption{font-size:clamp(17px,1.7vw,25px)}
/* Larger listening targets throughout the game. */
.instruction #speak{width:60px;height:60px;min-height:60px;font-size:30px;padding:8px;border-width:4px;flex-shrink:0}
.listen-clue{min-height:60px;font-size:23px;padding:12px 24px;border-width:4px}
#board.emotions{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);max-width:1240px;overflow:visible;gap:18px}
.emotion-context{display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:8px;min-height:0;padding:12px}
.emotion-scene{min-height:0;min-width:0;display:grid;place-items:center;overflow:hidden;border-radius:18px;background:#f4faff}.emotion-scene>.art{width:100%;height:100%;object-fit:contain}
.emotion-caption{margin:0;font-size:clamp(13px,1.15vw,17px);line-height:1.3;text-align:center;max-height:5.2em;overflow:auto}
.emotion-listen{font-size:20px;min-height:60px;background:linear-gradient(#fff4a3,#ffe141);border-color:white}
.emotion-play{display:grid;grid-template-rows:minmax(100px,.75fr) minmax(0,1fr) auto;gap:14px;min-width:0;min-height:0}
.emotion-targets{display:grid;grid-template-columns:repeat(var(--targets),minmax(0,1fr));gap:12px;min-height:0;justify-items:center}
.emotion-target{display:grid;grid-template-rows:auto minmax(0,1fr);gap:6px;justify-items:center;min-height:0;width:100%}.emotion-target strong{padding:7px 13px;background:white;border:3px solid var(--accent);border-radius:18px;text-align:center;font-size:18px}
.emotion-slot{width:min(100%,155px);height:100%;border:4px dashed var(--accent);background:#ffffffee;border-radius:22px;font-size:50px;color:var(--accent)}.emotion-slot.correct{border-style:solid;border-color:#54cc3b}.emotion-slot.wrong{border-color:#ffc800}
.emotion-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:10px;min-height:0}.emotion-choices[style="--emotions:2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.emotion-option{display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) 48px;gap:4px;min-height:0;min-width:0;background:#fff;border-radius:18px;padding:4px}
.emotion-option>.card{grid-column:1/-1;width:100%;height:100%;border-width:3px;border-radius:16px}.emotion-option>span{font-weight:900;font-size:clamp(12px,1vw,16px);align-self:center;text-align:center;overflow-wrap:anywhere}
.emotion-label-audio{width:48px;height:48px;min-height:48px;padding:3px;border-radius:50%;background:#008aff;color:white;border:3px solid #acecff;font-size:23px;box-shadow:none}
.emotion-explain{font-size:16px;min-height:52px;padding:8px;background:#fff4a8}
#play.emotion-mode{grid-template-rows:auto minmax(0,1fr) minmax(42px,auto) 48px}.emotion-mode .feedback{max-height:92px;overflow:auto}.emotion-mode .feedback p{font-size:clamp(14px,1.2vw,18px);line-height:1.25}.emotion-mode .feedback img{flex-shrink:0}
@media(max-width:700px),(orientation:portrait){
 .world-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:8px;width:100%}.world-card,.world-card[data-world="3"]{grid-column:auto}.world-card.emotion-world{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);padding:7px 14px}.emotion-world .world-art img{width:29%}.world-caption{font-size:clamp(14px,3.2vw,21px)}
 .instruction #speak{width:56px;height:56px;min-height:56px;font-size:29px;padding:6px}.listen-clue{min-height:56px;font-size:19px;padding:10px 16px}
 #play.emotion-mode{height:auto;min-height:calc(100dvh - 115px);grid-template-rows:auto auto auto 48px;gap:10px}
 #board.emotions{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;gap:10px}
 .emotion-context{grid-template-rows:clamp(180px,29dvh,340px) auto auto;padding:8px;gap:6px}.emotion-caption{font-size:14px;max-height:5.2em}.emotion-listen{min-height:58px;width:100%;font-size:20px}
 .emotion-play{grid-template-rows:130px auto auto;gap:10px}.emotion-slot{max-width:120px;font-size:36px}.emotion-target strong{font-size:15px;padding:5px 9px}.emotion-choices{grid-auto-rows:155px;gap:7px}.emotion-option{grid-template-columns:minmax(0,1fr) 48px;gap:3px}.emotion-option>span{font-size:12px}.emotion-mode .feedback{max-height:none;min-height:42px;overflow:visible}.emotion-mode .feedback p{font-size:14px}.emotion-mode footer{position:sticky;bottom:8px;z-index:4;padding:5px;background:#ffffffd9;border-radius:22px}
}
@media(max-height:700px) and (orientation:landscape){.instruction #speak{width:52px;height:52px;min-height:52px;font-size:27px}.listen-clue{min-height:52px;font-size:19px}.emotion-caption{font-size:12px;max-height:3.9em}.emotion-play{grid-template-rows:minmax(80px,.6fr) minmax(0,1fr) auto;gap:7px}.emotion-target strong{font-size:14px;padding:4px 8px}.emotion-label-audio{width:44px;height:44px;min-height:44px;font-size:21px}.emotion-option{grid-template-columns:minmax(0,1fr) 44px}.emotion-choices{gap:6px}.emotion-explain{min-height:44px;padding:5px}.emotion-mode .feedback{max-height:72px}}
@media(max-height:700px) and (orientation:landscape){#play{grid-template-rows:auto minmax(0,1fr) 30px 42px}#play.emotion-mode{grid-template-rows:auto minmax(0,1fr) minmax(42px,auto) 42px}}
#activities:has(.activity:only-child){grid-template-columns:minmax(0,540px);justify-content:center}
.emotion-slot{max-height:155px;align-self:center}.emotion-option>.card{max-height:170px;align-self:center}