:root { color-scheme: light; --ink:#30271f; --cream:#fffaf0; --red:#a94b47; --green:#3f805a; --blue:#3b7e99; --cluster:#a85049; --cluster-dark:#7f3833; --cluster-soft:#f7ddd8; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body,#app { width:100%; height:100%; margin:0; overflow:hidden; }
body { color:var(--ink); font-family:"Arial Rounded MT Bold","Trebuchet MS",Arial,sans-serif; }
button { font:inherit; touch-action:manipulation; }

.home { width:100vw; height:100dvh; padding:clamp(8px,1.5vw,18px); display:grid; place-items:center; overflow:hidden; background:linear-gradient(#f7fbff24,#dff3ff38),url("assets/optimist-menu-wallpaper-v109.webp") center/cover no-repeat; }
.home-panel { width:min(1200px,100%); height:min(760px,100%); min-height:0; padding:clamp(14px,3vmin,32px); display:grid; grid-template-rows:auto auto minmax(0,1fr); overflow:hidden; border:3px solid #fff9; border-radius:30px; background:#fffdf6ed; box-shadow:0 22px 65px #261c174d; }
.eyebrow { color:#866531; font:800 clamp(.68rem,1.5vmin,.86rem) Arial,sans-serif; letter-spacing:.08em; }
.home h1 { margin:2px 0 clamp(8px,2vmin,18px); color:#663f1c; font-size:clamp(2rem,6vmin,4.2rem); line-height:1; }
.game-links { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(7px,1.2vw,14px); }
.game-link { --accent:var(--red); --soft:#f7ddd8; min-width:0; min-height:0; padding:clamp(10px,2vmin,20px); border:4px solid var(--accent); border-radius:clamp(18px,3vmin,28px); display:grid; grid-template-rows:minmax(0,1fr) auto auto; place-items:center; gap:8px; color:var(--ink); background:var(--soft); cursor:pointer; box-shadow:0 10px 22px #4f3b2d29; }
.game-link.listen { --accent:var(--blue); --soft:#dcecf1; }
.game-link.search { --accent:var(--green); --soft:#dcecdf; }
.game-link.bingo { --accent:#765396; --soft:#eadff1; }
.game-link.check { --accent:#d26d31; --soft:#f8e1cf; }
.game-link.remember { --accent:#6e5ba7; --soft:#e8e2f5; }
.game-link.missing { --accent:#b45c84; --soft:#f4dce8; }
.game-link.say { --accent:#318b76; --soft:#d9eee8; }
.game-link.selected { outline:6px solid color-mix(in srgb,var(--accent) 30%,white); transform:translateY(-3px); }
.game-icon { align-self:center; width:min(15vmin,150px); aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:clamp(2.8rem,8vmin,6rem); box-shadow:inset 0 0 0 7px #ffffff55,0 10px 20px #2c211b2d; }
.game-link strong { text-align:center; font-size:clamp(1.15rem,2.8vmin,2rem); line-height:1.05; }
.game-link small { font:clamp(.7rem,1.5vmin,.94rem) Arial,sans-serif; }
.start-cue { width:clamp(38px,6vmin,58px); height:clamp(38px,6vmin,58px); margin-top:3px; display:grid; place-items:center; border-radius:50%; color:#fff; background:var(--accent); font-size:clamp(1.15rem,2.5vmin,1.7rem); }

.orbit-panel { width:min(1240px,100%); grid-template-rows:auto auto minmax(0,1fr); }
.orbit-menu { position:relative; align-self:center; justify-self:center; width:min(100%,1000px); height:100%; max-height:600px; min-height:0; }
.orbit-lines { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.orbit-line { stroke:#b9a992; stroke-width:5; stroke-linecap:round; transition:stroke .2s,stroke-width .2s; }
.orbit-line[data-target="memory"] { --orbit-color:var(--red); }
.orbit-line[data-target="listen"] { --orbit-color:var(--blue); }
.orbit-line[data-target="bingo"] { --orbit-color:#76549c; }
.orbit-line[data-target="check"] { --orbit-color:#c8642e; }
.orbit-line[data-target="remember"] { --orbit-color:#6556a1; }
.orbit-line[data-target="missing"] { --orbit-color:#a95178; }
.orbit-line[data-target="say"] { --orbit-color:#2e8b7b; }
.orbit-line.selected { stroke:var(--orbit-color); stroke-width:11; filter:drop-shadow(0 0 5px var(--orbit-color)); }
.orbit-game { --accent:var(--red); position:absolute; z-index:1; min-width:0; min-height:0; padding:clamp(7px,1.4vmin,13px); border:5px solid #fff; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:clamp(2px,.6vmin,6px); color:#fff; background:var(--accent); cursor:pointer; box-shadow:0 9px 20px #261c1747; }
.orbit-game.memory { --accent:var(--red); --spark:#ff6e68; }
.orbit-game.listen { --accent:var(--blue); --spark:#64ddff; }
.orbit-game.search { --accent:var(--green); --spark:#70ff9d; }
.orbit-game.bingo { --accent:#76549c; --spark:#c68aff; }
.orbit-game.check { --accent:#c8642e; --spark:#ffac45; }
.orbit-game.remember { --accent:#6556a1; --spark:#a999ff; }
.orbit-game.missing { --accent:#a95178; --spark:#ff72ba; }
.orbit-game.say { --accent:#2e8b7b; --spark:#4cffe1; }
.orbit-game.selected { outline:8px solid color-mix(in srgb,var(--accent) 68%,white); transform:translate(-50%,-50%) scale(1.04); box-shadow:0 0 0 4px #fff,0 0 25px 9px color-mix(in srgb,var(--accent) 58%,transparent); }
.orbit-game strong { max-width:90%; text-align:center; font-size:clamp(.76rem,1.7vmin,1.15rem); line-height:1.02; }
.orbit-game small { max-width:82%; text-align:center; font:clamp(.58rem,1.15vmin,.8rem)/1.05 Arial,sans-serif; }
.orbit-game .start-cue { flex:0 0 auto; width:clamp(26px,4vmin,38px); height:clamp(26px,4vmin,38px); margin:0; background:#ffffff33; font-size:clamp(.85rem,1.8vmin,1.2rem); }
.orbit-icon { font-size:clamp(1.65rem,4.7vmin,3.3rem); line-height:1; }
.orbit-sun { left:50%; top:50%; width:clamp(185px,30vmin,255px); aspect-ratio:1; transform:translate(-50%,-50%); box-shadow:0 0 0 15px #ffd46980,0 13px 28px #261c1750; }
.orbit-sun strong { font-size:clamp(1.1rem,2.8vmin,1.75rem); }
.orbit-planet { left:var(--orbit-x); top:var(--orbit-y); width:clamp(110px,19vmin,160px); aspect-ratio:1; transform:translate(-50%,-50%); }

.cluster-home { --page-accent:var(--red); width:100vw; height:100dvh; padding:clamp(8px,1.5vw,18px); display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,#f8e7d9,#eed3c4); }
.cluster-home.listen { --page-accent:var(--blue); background:linear-gradient(135deg,#f8eadc,#dcecf1); }
.cluster-home.search { --page-accent:var(--green); background:linear-gradient(135deg,#f7ead9,#d9eddd); }
.cluster-home.bingo { --page-accent:#765396; background:linear-gradient(135deg,#f8eadc,#eadff1); }
.cluster-home.check { --page-accent:#d26d31; background:linear-gradient(135deg,#f8eadc,#f8e1cf); }
.cluster-home.remember { --page-accent:#6e5ba7; background:linear-gradient(135deg,#f4ebdf,#e8e2f5); }
.cluster-home.missing { --page-accent:#b45c84; background:linear-gradient(135deg,#f8eadc,#f4dce8); }
.cluster-home.say { --page-accent:#318b76; background:linear-gradient(135deg,#f8eadc,#d9eee8); }
.cluster-panel { position:relative; width:min(1080px,100%); height:min(780px,100%); min-height:0; padding:clamp(12px,2.5vmin,26px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(8px,1.5vmin,16px); overflow:hidden; border:3px solid #fff9; border-radius:34px 24px 38px 27px; background:radial-gradient(circle at 7% 88%,color-mix(in srgb,var(--page-accent) 18%,transparent) 0 4%,transparent 4.4%),radial-gradient(circle at 94% 13%,#ffd46942 0 5%,transparent 5.4%),radial-gradient(circle at 88% 91%,color-mix(in srgb,var(--page-accent) 12%,transparent) 0 7%,transparent 7.4%),#fffdf6ed; box-shadow:0 22px 65px #261c174d; }
.choice-header { display:flex; align-items:center; gap:clamp(10px,2vw,20px); }
.choice-header h1 { margin:1px 0 0; color:#513b28; font-size:clamp(1.5rem,4vmin,3rem); line-height:1; }
.choice-header h1 span { color:var(--page-accent); }
.back-button { flex:0 0 auto; width:clamp(46px,7vmin,68px); aspect-ratio:1; border:0; border-radius:50%; color:#fff; background:var(--page-accent); font-size:clamp(1.8rem,4vmin,3rem); line-height:1; cursor:pointer; box-shadow:0 7px 16px #3b2d2535; }
.cluster-links { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.6vw,18px); }
.cluster-links.count-7 { grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.cluster-links.count-5 { grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.cluster-links.count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
.cluster-links.count-3 { grid-template-rows:minmax(0,1fr); }
.cluster-links.count-2 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.cluster-links.single { grid-template-columns:minmax(260px,560px); justify-content:center; }
.cluster-link { --accent:var(--cluster); --tilt:0deg; --bounce-delay:0s; position:relative; min-width:0; min-height:0; padding:clamp(10px,2vmin,20px); overflow:hidden; border:5px solid var(--cluster); border-radius:clamp(22px,4vmin,40px) clamp(16px,3vmin,30px) clamp(26px,5vmin,46px) clamp(18px,3.5vmin,34px); display:grid; grid-template-rows:minmax(0,1fr) auto auto; place-items:center; gap:8px; color:#fff; background:linear-gradient(#17202b42,#17202ba5),var(--preview) center/cover no-repeat; cursor:pointer; box-shadow:0 12px 26px #4f3b2d35; transform:rotate(var(--tilt)); animation:cluster-bounce-in .42s var(--bounce-delay) cubic-bezier(.2,.85,.3,1.18) both; }
.cluster-link::after { content:"✦"; position:absolute; right:10px; top:7px; color:#fff; font-size:clamp(1rem,2.2vmin,1.55rem); text-shadow:0 2px 6px #0008; }
@keyframes cluster-bounce-in { 0%{transform:translateY(16px) scale(.94) rotate(0deg)} 72%{transform:translateY(-3px) scale(1.015) rotate(var(--tilt))} 100%{transform:rotate(var(--tilt))} }
.cluster-link.selected { outline:7px solid color-mix(in srgb,var(--cluster) 34%,white); transform:translateY(-3px); }
.cluster-link strong { padding:7px 13px; border-radius:12px; background:#17120dbd; text-align:center; font-size:clamp(1.05rem,2.7vmin,1.9rem); line-height:1.05; white-space:nowrap; }
.cluster-links.count-7 .cluster-link strong,.cluster-links.count-5 .cluster-link strong,.cluster-links.count-4 .cluster-link strong { white-space:normal; }
.cluster-links.count-7 .cluster-link { grid-column:span 2; padding:clamp(7px,1.4vmin,13px); gap:4px; }
.cluster-links.count-7 .cluster-link:nth-child(1) { --tilt:-1.1deg; --bounce-delay:.02s; }
.cluster-links.count-7 .cluster-link:nth-child(2) { --tilt:.8deg; --bounce-delay:.06s; }
.cluster-links.count-7 .cluster-link:nth-child(3) { --tilt:-.6deg; --bounce-delay:.10s; }
.cluster-links.count-7 .cluster-link:nth-child(4) { --tilt:1.2deg; --bounce-delay:.14s; }
.cluster-links.count-7 .cluster-link:nth-child(5) { --tilt:.9deg; --bounce-delay:.18s; grid-column:2 / span 2; }
.cluster-links.count-7 .cluster-link:nth-child(6) { --tilt:-1deg; --bounce-delay:.22s; grid-column:4 / span 2; }
.cluster-links.count-7 .cluster-link:nth-child(7) { --tilt:.7deg; --bounce-delay:.26s; grid-column:6 / span 2; }
.cluster-links.count-7 .cluster-link.selected { transform:translateY(-5px) rotate(0deg) scale(1.025); box-shadow:0 0 0 7px color-mix(in srgb,var(--cluster) 30%,transparent),0 17px 31px #4f3b2d4a; }
.cluster-links.count-7 .cluster-symbol { width:min(10vmin,82px); border-width:5px; font-size:clamp(2rem,5vmin,3.6rem); }
.cluster-links.count-7 .start-cue { width:clamp(30px,4.5vmin,42px); height:clamp(30px,4.5vmin,42px); }
.cluster-links.count-7 .cluster-link strong { font-size:clamp(.85rem,1.8vmin,1.25rem); }
.cluster-symbol { align-self:center; width:min(18vmin,155px); aspect-ratio:1; display:grid; place-items:center; border:7px solid #ffffffb5; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(3rem,9vmin,6.5rem); box-shadow:0 10px 24px #1b130d66; }
.cluster-link .start-cue { background:var(--cluster); }

.cluster-orbit-panel { width:min(1240px,100%); }
.cluster-orbit-menu { position:relative; align-self:center; justify-self:center; width:min(100%,1000px); height:100%; max-height:600px; min-height:0; }
.cluster-orbit-lines { position:absolute; inset:0; z-index:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.cluster-orbit-line { stroke:#b9a992; stroke-width:5; stroke-linecap:round; transition:stroke .2s,stroke-width .2s; }
.cluster-orbit-line.selected { stroke:var(--line-color); stroke-width:11; filter:drop-shadow(0 0 5px var(--line-color)); }
.cluster-game-hub { --hub-color:var(--red); position:absolute; z-index:1; left:50%; top:50%; width:clamp(165px,26vmin,215px); aspect-ratio:1; padding:clamp(12px,2vmin,20px); border:6px solid #fff; border-radius:clamp(28px,5vmin,48px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:#fff; background:var(--hub-color); box-shadow:0 0 0 14px color-mix(in srgb,var(--hub-color) 30%,transparent),0 13px 28px #261c174b; transform:translate(-50%,-50%); pointer-events:none; }
.cluster-game-hub.memory { --hub-color:var(--red); }
.cluster-game-hub.listen { --hub-color:var(--blue); }
.cluster-game-hub.search { --hub-color:var(--green); }
.cluster-game-hub.bingo { --hub-color:#765396; }
.cluster-game-hub.check { --hub-color:#d26d31; }
.cluster-game-hub.remember { --hub-color:#6e5ba7; }
.cluster-game-hub.missing { --hub-color:#b45c84; }
.cluster-game-hub.say { --hub-color:#318b76; }
.cluster-game-hub>span { font-size:clamp(2.5rem,6vmin,4.2rem); line-height:1; }
.cluster-game-hub strong { max-width:92%; text-align:center; font-size:clamp(1rem,2.4vmin,1.55rem); line-height:1.02; }
.cluster-game-hub small { font:clamp(.62rem,1.25vmin,.82rem) Arial,sans-serif; }
.cluster-orbit-tile { --accent:var(--cluster); position:absolute; z-index:1; left:var(--orbit-x); top:var(--orbit-y); width:clamp(132px,20vmin,160px); aspect-ratio:1; min-width:0; min-height:0; padding:clamp(7px,1.2vmin,11px); overflow:hidden; border:6px solid var(--cluster); border-radius:clamp(24px,4.5vmin,42px); display:grid; grid-template-rows:minmax(0,1fr) auto auto; place-items:center; gap:3px; color:#fff; background:linear-gradient(#17202b35,#17202bb0),var(--preview) center/cover no-repeat; cursor:pointer; box-shadow:0 10px 22px #261c1742; transform:translate(-50%,-50%); transition:transform .2s,box-shadow .2s; }
.cluster-orbit-tile .cluster-symbol { width:clamp(48px,8vmin,68px); border-width:4px; font-size:clamp(1.8rem,4.5vmin,3rem); }
.cluster-orbit-tile strong { max-width:100%; padding:4px 7px; border-radius:9px; background:#17120dc7; text-align:center; font-size:clamp(.68rem,1.35vmin,.92rem); line-height:1.02; }
.cluster-orbit-tile .start-cue { width:clamp(27px,4vmin,36px); height:clamp(27px,4vmin,36px); margin:0; background:var(--cluster); font-size:clamp(.8rem,1.6vmin,1.05rem); }
.cluster-orbit-tile.selected { outline:8px solid color-mix(in srgb,var(--cluster) 68%,white); transform:translate(-50%,-50%) scale(1.055); box-shadow:0 0 0 4px #fff,0 0 25px 9px color-mix(in srgb,var(--cluster) 58%,transparent); }

.game { --accent:var(--cluster); --soft:var(--cluster-soft); width:100vw; height:100dvh; min-height:0; padding:clamp(5px,1vw,10px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(5px,.8vw,9px); overflow:hidden; background:radial-gradient(circle at 12% 5%,#fff9,transparent 25%),linear-gradient(135deg,#f8e7d9,#f4d4ce); }
.game.listen-game { --accent:var(--blue); --soft:#dcecf1; background:linear-gradient(135deg,#f8eadc,#dcecf1); }
.game.search-game { --accent:var(--green); --soft:#dcecdf; background:linear-gradient(135deg,#f7ead9,#d9eddd); }
.game.bingo-game { --accent:#765396; --soft:#eadff1; background:linear-gradient(135deg,#f8eadc,#eadff1); }
.game.check-game { --accent:#d26d31; --soft:#f8e1cf; background:linear-gradient(135deg,#fff1df,#f6d7c0); }
.game.remember-game { --accent:#6e5ba7; --soft:#e8e2f5; background:linear-gradient(135deg,#f8f0e7,#e8e2f5); }
.game.missing-game { --accent:#b45c84; --soft:#f4dce8; background:linear-gradient(135deg,#fff1e2,#f4dce8); }
.game.say-game { --accent:#318b76; --soft:#d9eee8; background:linear-gradient(135deg,#fff2df,#d9eee8); }
.topbar { min-height:0; padding:6px 9px; display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:8px; border-radius:17px; background:#fffdf6f2; box-shadow:0 7px 18px #49342624; }
.title { min-width:0; display:flex; align-items:center; gap:9px; }
.title-badge { flex:0 0 auto; width:clamp(34px,5vmin,46px); aspect-ratio:1; display:grid; place-items:center; border-radius:12px; color:#fff; background:var(--accent); font-size:clamp(1.2rem,2.5vmin,1.7rem); }
.title-badge.cluster-badge { background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); box-shadow:inset 0 0 0 3px #ffffff55; }
.title h1 { margin:0; overflow:hidden; font-size:clamp(.9rem,2.1vmin,1.5rem); line-height:1.05; white-space:nowrap; text-overflow:ellipsis; }
.title p { margin:2px 0 0; font:clamp(.62rem,1.2vmin,.82rem) Arial,sans-serif; }
.score { min-width:72px; padding:6px 9px; border:2px solid color-mix(in srgb,var(--accent) 25%,white); border-radius:12px; background:var(--soft); text-align:center; font-size:clamp(.72rem,1.5vmin,.95rem); white-space:nowrap; }
.search-game .topbar { grid-template-columns:minmax(190px,1fr) minmax(420px,auto) auto; }
.search-game .score { padding:3px 7px; display:flex; align-items:center; gap:clamp(8px,1.3vw,18px); border:0; background:transparent; }
.search-word-now { min-width:clamp(150px,18vw,290px); padding:4px 12px; border:2px solid color-mix(in srgb,var(--accent) 32%,white); border-radius:12px; display:flex; align-items:baseline; justify-content:center; gap:7px; background:#fffdf8; color:#30241b; }
.search-word-now small { color:var(--accent); font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.search-word-now strong { overflow:hidden; text-overflow:ellipsis; font-size:clamp(.86rem,1.7vmin,1.12rem); }
.search-word-speaker { flex:0 0 auto; width:clamp(31px,4.2vmin,39px); height:clamp(31px,4.2vmin,39px); margin-left:3px; padding:0; border:2px solid #fff; border-radius:10px; display:grid; place-items:center; color:#49351f; background:#ffd469; font-size:clamp(.9rem,1.7vmin,1.12rem); cursor:pointer; box-shadow:0 2px 5px #5b421f35; }
.search-word-speaker:active { transform:scale(.94); }
.search-progress { padding:3px 10px 4px; border:2px solid color-mix(in srgb,var(--accent) 25%,white); border-radius:12px; display:grid; gap:1px; background:var(--soft); }
.search-progress > span:first-child { font-size:clamp(.67rem,1.25vmin,.86rem); line-height:1; }
.search-progress-stars { display:flex; gap:clamp(3px,.35vw,6px); line-height:1; }
.search-progress-star { position:relative; color:#d8d3c5; font-size:clamp(11px,1.35vmin,17px); font-style:normal; text-shadow:0 1px 0 #fff; transition:color .25s,transform .25s; }
.search-progress-star.filled { color:#efb820; text-shadow:0 0 3px #fff4a8,0 1px 1px #9a6100; }
.search-progress-star.sparkling { animation:search-star-sparkle .9s cubic-bezier(.2,.8,.2,1); }
.search-progress-star.sparkling::before,.search-progress-star.sparkling::after { content:"✦"; position:absolute; color:#fff2a0; font-size:.65em; text-shadow:0 0 5px #ffc400; animation:search-star-rays .9s ease-out both; }
.search-progress-star.sparkling::before { left:-5px; top:-7px; }
.search-progress-star.sparkling::after { right:-6px; bottom:-6px; animation-delay:.12s; }
@keyframes search-star-sparkle { 0%{transform:scale(.2) rotate(-25deg)} 55%{transform:scale(1.65) rotate(12deg)} 100%{transform:scale(1)} }
@keyframes search-star-rays { 0%{opacity:0;transform:scale(.2)} 40%{opacity:1;transform:scale(1.25)} 100%{opacity:0;transform:translateY(-7px) scale(.5)} }
@media (max-width:900px) { .search-game .topbar { grid-template-columns:minmax(135px,1fr) auto auto; } .search-word-now { min-width:120px;padding-inline:5px;gap:4px; } .search-word-now small { display:none; } .search-word-speaker { width:30px;height:30px;margin-left:1px; } .search-game .score { gap:4px; } .search-progress { padding-inline:5px; } .search-progress-star { font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .search-progress-star.sparkling,.search-progress-star.sparkling::before,.search-progress-star.sparkling::after { animation:none!important; } }
.controls { display:flex; gap:5px; }
.control { min-width:clamp(38px,5vmin,48px); min-height:clamp(36px,5vmin,46px); padding:3px 7px; border:0; border-radius:12px; display:grid; place-items:center; color:#3d310c; background:#ffd469; cursor:pointer; box-shadow:0 4px 9px #4b392629; }
.control span { font-size:clamp(1.25rem,2.8vmin,1.8rem); line-height:1; }
.control.close { color:#fff; background:#cf4e43; }
.control.close span { font-size:clamp(1.7rem,3.3vmin,2.2rem); }
.control.restart { color:#fff; background:var(--accent); }
.control:disabled { opacity:.55; }

.intro-stage { min-height:0; display:grid; place-items:center; overflow:hidden; }
.intro-card { width:min(980px,100%); height:100%; min-height:0; padding:clamp(8px,1.7vmin,18px); border:5px solid #fff; border-radius:clamp(18px,3vmin,30px); display:grid; grid-template-rows:minmax(0,1fr) auto auto; place-items:center; gap:clamp(7px,1.3vmin,14px); overflow:hidden; background:#fffaf0e8; box-shadow:0 14px 34px #49362935; }
.intro-demo { width:100%; height:100%; min-height:0; padding:clamp(7px,1.5vmin,15px); border:0; border-radius:22px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(6px,1.2vw,13px); overflow:hidden; color:var(--ink); background:linear-gradient(135deg,#ffffff,#f8f1e7); cursor:pointer; box-shadow:inset 0 0 0 4px var(--cluster-soft); }
.intro-photo,.intro-back,.intro-master,.intro-missing { position:relative; flex:0 1 auto; width:clamp(90px,18vmin,185px); aspect-ratio:1; overflow:hidden; border:4px solid #fff; border-radius:18px; display:grid; place-items:center; background:#f4f0e9; box-shadow:0 7px 15px #4936292d; }
.intro-photo img,.intro-master img { width:100%; height:100%; display:block; object-fit:contain; }
.intro-back { color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(2.4rem,7vmin,5rem); }
.intro-master { width:clamp(300px,65vw,690px); aspect-ratio:1.5; }
.intro-master img { object-fit:cover; }
.intro-master i { position:absolute; right:6%; bottom:2%; font-style:normal; font-size:clamp(2rem,6vmin,4.5rem); filter:drop-shadow(0 4px 3px #0005); animation:intro-point .75s ease-in-out infinite alternate; }
.intro-round,.intro-choice,.intro-chip { flex:0 0 auto; width:clamp(62px,11vmin,112px); aspect-ratio:1; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; color:#fff; background:#ffd469; font-size:clamp(2rem,6vmin,4rem); box-shadow:0 7px 15px #49362935; }
.intro-choice.yes { background:#42a861; }.intro-choice.no { background:#d45147; }
.intro-chip { width:clamp(48px,8vmin,82px); background:var(--cluster); animation:intro-chip .85s ease-in-out infinite alternate; }
.intro-arrow,.intro-plus { flex:0 0 auto; color:var(--cluster-dark); font-size:clamp(1.8rem,5vmin,3.5rem); }
.intro-slots { display:flex; gap:7px; }
.intro-slots i { width:clamp(58px,10vmin,105px); aspect-ratio:1; border:4px dashed #6e5ba7; border-radius:15px; display:grid; place-items:center; color:#6e5ba7; background:#fff; font-size:clamp(1.5rem,4vmin,3rem); font-style:normal; }
.intro-missing { border-style:dashed; border-color:#b45c84; color:#b45c84; background:#fff8fc; font-size:clamp(3rem,8vmin,6rem); }
.search-game .intro-demo { flex-wrap:nowrap; gap:clamp(12px,2vw,24px); }
.search-game .intro-master { flex:0 1 690px; min-width:0; height:min(100%,460px); aspect-ratio:1.5; }
.search-game .intro-master img { object-fit:cover; }
.listen-game .intro-photo,.check-game .intro-photo,.say-game .intro-photo { width:clamp(150px,28vmin,300px); }
.remember-game .intro-photo,.missing-game .intro-photo { width:clamp(125px,22vmin,235px); }
.memory-game .intro-photo,.memory-game .intro-back { width:clamp(110px,20vmin,205px); }
.intro-listen-cue { display:flex; align-items:center; gap:7px; color:var(--cluster-dark); }
.intro-listen-cue span { font-size:clamp(1.7rem,4vmin,2.7rem); }
.intro-listen-cue i { width:clamp(8px,1.5vmin,13px); aspect-ratio:1; border-radius:50%; background:var(--cluster); animation:intro-dot .65s ease-in-out infinite alternate; }
.intro-listen-cue i:nth-child(3){animation-delay:.15s}.intro-listen-cue i:nth-child(4){animation-delay:.3s}
.mode-options { width:min(660px,100%); display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.4vw,15px); }
.mode-options button { position:relative; min-height:clamp(68px,12vmin,108px); padding:7px 50px 7px 10px; border:5px solid #fff; border-radius:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:8px; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); cursor:pointer; box-shadow:0 8px 17px #49362935; }
.mode-options button>span { font-size:clamp(2rem,5vmin,3.6rem); }.mode-options button strong { font-size:clamp(.9rem,2.2vmin,1.35rem); }.mode-options button small { font-size:clamp(1.2rem,3vmin,2rem); }
.mode-options button .start-cue { position:absolute; right:8px; width:clamp(34px,5vmin,48px); height:clamp(34px,5vmin,48px); margin:0; background:#ffd469; font-size:clamp(1rem,2.2vmin,1.4rem); }
.mode-options button.selected { border-color:#ffd469; outline:5px solid #ffd46955; transform:translateY(-3px); }
.intro-start { min-width:min(280px,72%); min-height:clamp(66px,11vmin,100px); border:5px solid #fff; border-radius:20px; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; background:#25805d; cursor:pointer; box-shadow:0 8px 17px #173b2c44; }
.intro-start span { font-size:clamp(2rem,5vmin,3.5rem); }.intro-start strong { font-size:clamp(1rem,2.5vmin,1.5rem); }
@keyframes intro-dot { to{transform:translateY(-7px);background:#ffd469} }
@keyframes intro-point { to{transform:translate(-9px,-8px) scale(1.08)} }
@keyframes intro-chip { to{transform:translateY(-10px) scale(1.08);box-shadow:0 0 18px #ffd469} }
.mini-reward { position:fixed; z-index:45; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; color:#ffd469; font-size:clamp(5rem,18vmin,11rem); line-height:1; text-shadow:0 0 0 #fff,0 0 20px #ffb300,0 8px 18px #0004; animation:mini-reward-pop .82s cubic-bezier(.2,.9,.25,1.15) forwards; }
@keyframes mini-reward-pop { 0%{transform:translate(-50%,-50%) scale(.15) rotate(-25deg);opacity:0} 35%{transform:translate(-50%,-50%) scale(1.2) rotate(8deg);opacity:1} 100%{transform:translate(-50%,-70%) scale(.82) rotate(0);opacity:0} }

.memory-board { width:100%; height:100%; min-height:0; overflow:hidden; display:grid; grid-template-columns:repeat(var(--land-cols),minmax(0,1fr)); grid-template-rows:repeat(var(--land-rows),minmax(0,1fr)); gap:clamp(4px,.6vw,8px); perspective:1200px; }
.memory-card { position:relative; min-width:0; min-height:0; padding:0; border:0; border-radius:12px; background:transparent; cursor:pointer; perspective:900px; }
.card-inner { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .32s; }
.memory-card.open .card-inner { transform:rotateY(180deg); }
.face { position:absolute; inset:0; overflow:hidden; border:clamp(2px,.35vw,4px) solid #fff; border-radius:clamp(9px,1.1vw,15px); backface-visibility:hidden; box-shadow:0 5px 13px #4c372d35; }
.back { display:grid; place-items:center; color:#fff; background:radial-gradient(circle at 20% 22%,#ffffff38 0 7%,transparent 8%),repeating-linear-gradient(45deg,transparent 0 15px,#ffffff11 16px 18px),linear-gradient(145deg,var(--cluster),var(--cluster-dark)); }
.back span { width:48%; aspect-ratio:1; display:grid; place-items:center; border:3px solid #fff9; border-radius:50%; font-size:clamp(1.5rem,4vw,3.5rem); }
.front { display:grid; grid-template-rows:minmax(0,1fr) auto; background:#f8f5ed; transform:rotateY(180deg); }
.front img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; }
.word-label { min-height:25px; padding:3px 4px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#fffffff4; color:#171421; text-align:center; white-space:nowrap; font:800 clamp(.56rem,1.15vmin,.9rem)/1 Arial,sans-serif; }
.word-label.long { font-size:clamp(.46rem,.94vmin,.7rem); }
.article-het { color:#d52218; }
.memory-card.matched .face { box-shadow:0 0 0 4px #48ad64,0 5px 13px #4c372d35; }

.listen-stage { min-height:0; display:grid; grid-template-columns:minmax(65px,10vw) minmax(0,1fr); gap:clamp(7px,1.2vw,14px); }
.big-speaker { align-self:center; width:100%; aspect-ratio:1; max-height:155px; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; background:#ffd469; cursor:pointer; box-shadow:0 10px 25px #49362935; }
.big-speaker span { font-size:clamp(2.2rem,7vw,5rem); }
.options { min-height:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(6px,1vw,12px); }
.option { min-width:0; min-height:0; padding:clamp(4px,.7vw,9px); overflow:hidden; border:5px solid #fff; border-radius:clamp(14px,2vw,24px); background:#f8f5ed; cursor:pointer; box-shadow:0 8px 18px #4936292d; }
.option img { width:100%; height:100%; display:block; object-fit:contain; border-radius:12px; }
.option.wrong { border-color:#d54d43; animation:shake .3s; }
@keyframes shake { 25%{transform:translateX(-7px)} 75%{transform:translateX(7px)} }

.search-stage { min-height:0; display:grid; place-items:center; overflow:hidden; }
.search-image-wrap { position:relative; max-width:100%; max-height:100%; display:inline-block; line-height:0; border:5px solid #fff; border-radius:18px; overflow:hidden; box-shadow:0 10px 25px #49362935; }
.search-image { display:block; max-width:100%; max-height:calc(100dvh - 78px); width:auto; height:auto; cursor:crosshair; user-select:none; -webkit-user-drag:none; }
.found-mark { position:absolute; z-index:3; width:clamp(22px,3vmin,34px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border:2px solid #fff8c7; border-radius:50%; color:#fff8c7; background:radial-gradient(circle at 35% 30%,#ffe986,#e8a719 70%); box-shadow:0 2px 5px #4b350080,0 0 7px #ffd84daa; pointer-events:none; line-height:1; }
.found-mark strong { font-size:clamp(12px,1.8vmin,20px); text-shadow:0 1px 2px #9b6100; }
.found-mark.just-found { animation:found-magic-pop .85s cubic-bezier(.2,.8,.2,1); }
.found-mark.just-found::before,.found-mark.just-found::after,.found-mark.just-found i::before,.found-mark.just-found i::after,.found-mark.just-found b::before { content:"✦"; position:absolute; color:#fff5ac; font-style:normal; font-weight:900; font-size:clamp(12px,2vmin,22px); text-shadow:0 0 4px #fff,0 0 9px #ffc400; animation:found-sparkle-out .9s ease-out both; }
.found-mark.just-found::before { left:-22px; top:-19px; }
.found-mark.just-found::after { right:-23px; bottom:-19px; animation-delay:.08s; }
.found-mark.just-found i::before { right:-17px; top:-24px; animation-delay:.16s; }
.found-mark.just-found i::after { left:-19px; bottom:-24px; animation-delay:.24s; }
.found-mark.just-found b::before { right:-30px; top:5px; animation-delay:.12s; }
@keyframes found-magic-pop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-25deg)} 55%{transform:translate(-50%,-50%) scale(1.45) rotate(8deg);box-shadow:0 0 20px 8px #ffd84dcc} 100%{transform:translate(-50%,-50%) scale(1)} }
@keyframes found-sparkle-out { 0%{opacity:0;transform:scale(.25)} 35%{opacity:1;transform:scale(1.25) rotate(25deg)} 100%{opacity:0;transform:translateY(-10px) scale(.7) rotate(55deg)} }
@media (prefers-reduced-motion:reduce) { .found-mark,.found-mark::before,.found-mark::after,.found-mark i::before,.found-mark i::after,.found-mark b::before { animation:none!important; } }
.plate-choice-stage { min-height:0; display:grid; place-items:center; overflow:auto; padding:clamp(3px,1vmin,10px); }
.plate-choice-card { width:min(1180px,100%); min-height:0; padding:clamp(10px,2vmin,22px); border:5px solid #fff; border-radius:clamp(20px,3vmin,32px); background:linear-gradient(145deg,#fffdf5ee,#edf7eff2); box-shadow:0 14px 34px #49362935; }
.plate-choice-heading { display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vmin,18px); text-align:left; }
.choice-magnifier { width:clamp(52px,8vmin,76px); aspect-ratio:1; display:grid; place-items:center; border:5px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(2rem,5vmin,3.4rem); box-shadow:0 7px 15px #173d3440; transform:rotate(-12deg); }
.plate-choice-heading h2 { margin:0; font-size:clamp(1.25rem,3vmin,2.15rem); line-height:1; }
.plate-choice-heading p { margin:5px 0 0; color:#49635a; font:700 clamp(.7rem,1.5vmin,1rem) Arial,sans-serif; }
.plate-choice-path { width:68%; height:18px; margin:clamp(5px,1vmin,10px) auto; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(90deg,var(--cluster),#e6b845,var(--cluster-dark)) center/100% 4px no-repeat; }
.plate-choice-path i { width:14px; aspect-ratio:1; border:3px solid #fff; border-radius:50%; background:#ffd469; box-shadow:0 0 0 3px var(--cluster); }
.plate-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(8px,1.5vw,18px); }
.plate-option { min-width:0; padding:7px; border:5px solid #fff; border-radius:clamp(16px,2vw,24px); overflow:hidden; color:#18392f; background:#fff; cursor:pointer; box-shadow:0 8px 20px #49362930; transition:transform .18s,box-shadow .18s; }
.plate-option:hover,.plate-option:focus-visible { transform:translateY(-5px) rotate(-.4deg); box-shadow:0 14px 25px #254c3d45; outline:4px solid #ffd469; }
.plate-option.plate-complete { border-color:#f5c742;box-shadow:0 0 0 4px #fff,0 0 22px #e7b52f99; }
.plate-option.plate-complete .plate-preview>b { color:#fff;background:#2f8a62; }
.plate-preview { position:relative; display:block; aspect-ratio:1.5; overflow:hidden; border-radius:14px; background:#dcecdf; }
.plate-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.plate-preview b { position:absolute; left:8px; top:8px; width:clamp(36px,5vmin,52px); aspect-ratio:1; display:grid; place-items:center; border:4px solid #fff; border-radius:50%; color:#fff; background:var(--cluster-dark); font-size:clamp(1.25rem,3vmin,2rem); box-shadow:0 4px 10px #0004; }
.plate-preview em { position:absolute; right:8px; bottom:7px; color:#ffe17e; font-style:normal; font-size:clamp(1.5rem,4vmin,2.8rem); filter:drop-shadow(0 3px 2px #183b35aa); }
.plate-copy { padding:8px 4px 3px; display:grid; place-items:center; gap:2px; line-height:1.05; }
.plate-copy strong { font-size:clamp(.95rem,2vmin,1.3rem); }
.plate-copy small { color:#35594d; font:800 clamp(.65rem,1.35vmin,.9rem) Arial,sans-serif; }
.plate-copy i { color:#e6aa23; font-style:normal; letter-spacing:2px; font-size:clamp(.8rem,1.8vmin,1.1rem); }
.plate-copy u { color:#64776f; text-decoration:none; font:clamp(.58rem,1.15vmin,.78rem) Arial,sans-serif; }

.bingo-stage { min-height:0; display:grid; grid-template-columns:minmax(130px,18vw) minmax(0,1fr); gap:clamp(7px,1.2vw,14px); }
.bingo-caller { min-height:0; padding:clamp(6px,1vw,11px); display:grid; grid-template-rows:auto minmax(0,1fr); gap:clamp(7px,1vw,12px); border:4px solid #fff; border-radius:clamp(14px,2vw,22px); background:#fffaf0c9; box-shadow:0 8px 18px #4936292d; }
.bingo-goals { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.bingo-goal { min-width:0; padding:6px 4px; border:3px solid #d7d0c5; border-radius:12px; display:grid; place-items:center; gap:4px; background:#f0ece5; opacity:.64; }
.bingo-goal.active { border-color:#ffd469; background:#fff3bd; opacity:1; box-shadow:0 0 0 3px #ffd46944; }
.bingo-goal.done { border-color:var(--cluster); background:var(--cluster-soft); opacity:1; }
.bingo-goal small { font-size:clamp(.55rem,1.15vmin,.75rem); line-height:1; text-align:center; }
.line-goal { display:flex; gap:3px; }
.line-goal i,.card-goal i { width:clamp(8px,1.4vmin,13px); aspect-ratio:1; border-radius:50%; background:var(--cluster); box-shadow:inset 0 0 0 2px #fff9; }
.card-goal { width:clamp(30px,4.8vmin,45px); display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.bingo-machine-wrap { align-self:center; justify-self:center; width:min(100%,180px); min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); place-items:center; gap:4px; }
.drawn-word-slot { position:relative; z-index:4; width:100%; min-height:clamp(40px,6.5vmin,58px); display:grid; place-items:end center; overflow:visible; }
.drawn-word-card { max-width:100%; padding:clamp(6px,1vmin,10px) clamp(7px,1.2vw,13px); overflow:hidden; border:4px solid var(--cluster); border-radius:11px; background:#fff; color:#211d18; text-align:center; white-space:nowrap; font-size:clamp(.62rem,1.45vmin,.95rem); line-height:1; box-shadow:0 7px 15px #1b130d44; transform-origin:bottom center; }
.drawn-word-card.long { padding-inline:5px; font-size:clamp(.43rem,1.05vmin,.68rem); }
.drawn-word-card.waiting { visibility:hidden; transform:translateY(48px) scale(.25); opacity:0; }
.drawn-word-card.released { visibility:visible; animation:word-card-release .55s cubic-bezier(.18,.86,.3,1.22); }
@keyframes word-card-release { from{transform:translateY(58px) scale(.25) rotate(5deg);opacity:0} 65%{transform:translateY(-6px) scale(1.06) rotate(-2deg);opacity:1} to{transform:none;opacity:1} }
.bingo-machine { position:relative; align-self:center; justify-self:center; width:min(100%,165px); aspect-ratio:.82; padding:8%; border:0; border-radius:48% 48% 22% 22%; display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); cursor:pointer; box-shadow:inset 0 0 0 5px #ffffff55,0 12px 24px #1b130d44; }
.machine-drum { position:relative; width:88%; aspect-ratio:1; overflow:hidden; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; background:radial-gradient(circle at 35% 28%,#fff,#e5f4f5 48%,#9acdd0); box-shadow:inset 0 0 20px #16525a55; }
.machine-drum i { position:absolute; width:25%; aspect-ratio:1; border-radius:50%; background:#ffd469; box-shadow:inset 0 0 0 3px #fff8; }
.machine-drum i:nth-child(1) { left:8%; top:53%; }
.machine-drum i:nth-child(2) { right:7%; top:17%; background:#ef6658; }
.machine-drum i:nth-child(3) { right:13%; bottom:7%; background:#76bd69; }
.machine-drum strong { position:relative; z-index:2; width:48%; aspect-ratio:1; display:grid; place-items:center; border:4px solid #fff; border-radius:50%; background:var(--cluster); font-size:clamp(1.6rem,4vw,3.2rem); box-shadow:0 4px 12px #0003; }
.machine-chute { position:absolute; z-index:3; left:50%; top:-7px; width:32%; height:21px; transform:translateX(-50%); border:4px solid #fff9; border-radius:7px 7px 2px 2px; background:var(--cluster-dark); box-shadow:0 -3px 8px #0002; }
.machine-button { width:48%; aspect-ratio:1; margin-top:4px; display:grid; place-items:center; border:4px solid #fff9; border-radius:50%; background:#ffd469; font-size:clamp(1.2rem,3vw,2rem); box-shadow:0 5px 10px #0003; }
.bingo-machine.drawing { animation:machine-rattle 1.02s ease-in-out; }
.bingo-machine.drawing .machine-drum { animation:machine-spin 1.02s cubic-bezier(.4,0,.2,1); }
.bingo-machine.drawing .machine-drum strong { animation:symbol-counterspin 1.02s ease-in-out; }
.bingo-machine.drawing .machine-drum i:nth-child(1) { animation:ball-one .25s linear 4 alternate; }
.bingo-machine.drawing .machine-drum i:nth-child(2) { animation:ball-two .21s linear 5 alternate; }
.bingo-machine.drawing .machine-drum i:nth-child(3) { animation:ball-three .28s linear 4 alternate; }
.bingo-machine.drawing .machine-chute { animation:chute-glow .28s ease-in-out 3 alternate; }
@keyframes machine-rattle { 20%{transform:rotate(-3deg)} 38%{transform:rotate(4deg) translateY(-2px)} 55%{transform:rotate(-4deg)} 73%{transform:rotate(3deg) translateY(-1px)} }
@keyframes machine-spin { 28%{transform:rotate(-100deg) scale(.96)} 72%{transform:rotate(230deg) scale(1.03)} to{transform:rotate(360deg)} }
@keyframes symbol-counterspin { to{transform:rotate(-360deg)} }
@keyframes ball-one { to{left:61%;top:12%;transform:scale(.8)} }
@keyframes ball-two { to{right:54%;top:62%;transform:scale(1.15)} }
@keyframes ball-three { to{right:35%;bottom:61%;transform:scale(.88)} }
@keyframes chute-glow { to{background:#ffd469;box-shadow:0 0 14px #ffd469} }
.bingo-board { min-height:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:clamp(5px,.8vw,10px); }
.bingo-cell { position:relative; min-width:0; min-height:0; padding:clamp(3px,.5vw,7px); overflow:hidden; border:clamp(3px,.45vw,5px) solid #fff; border-radius:clamp(10px,1.5vw,18px); background:#f8f5ed; cursor:pointer; box-shadow:0 7px 16px #4936292d; }
.bingo-cell img { width:100%; height:100%; display:block; object-fit:contain; border-radius:10px; }
.bingo-cell.marked { border-color:var(--cluster); }
.bingo-cell.wrong { border-color:#d54d43; animation:shake .3s; }
.bingo-cell.winning { z-index:2; border-color:#ffd469; animation:golden-bingo .8s ease-in-out infinite alternate; }
.bingo-cell.winning::before,.bingo-cell.winning::after { content:"✦"; position:absolute; z-index:4; color:#fff3a1; font-size:clamp(1.2rem,3vmin,2.4rem); text-shadow:0 0 8px #ffbf00,0 0 14px #ffbf00; animation:cell-sparkle .75s ease-in-out infinite alternate; }
.bingo-cell.winning::before { left:7%; top:4%; }
.bingo-cell.winning::after { right:8%; bottom:5%; animation-delay:.25s; }
@keyframes golden-bingo { from{box-shadow:0 0 0 4px #ffd469,0 0 12px #ffbd19,0 8px 18px #49362935} to{box-shadow:0 0 0 7px #fff3a1,0 0 30px #ffae00,0 8px 18px #49362935} }
@keyframes cell-sparkle { from{transform:scale(.5) rotate(0);opacity:.45} to{transform:scale(1.35) rotate(45deg);opacity:1} }
.bingo-mark { position:absolute; inset:50% auto auto 50%; width:min(44%,100px); aspect-ratio:1; transform:translate(-50%,-50%); display:grid; place-items:center; border:5px solid #ffffffd9; border-radius:50%; color:#fff; background:radial-gradient(circle at 32% 25%,#ffffff77 0 8%,transparent 9%),var(--token-color,var(--cluster)); font-size:clamp(1.7rem,5vmin,3.7rem); line-height:1; box-shadow:inset 0 0 0 4px #ffffff2e,0 8px 18px #1b130d55; }
.bingo-mark.drop { animation:chip-drop .55s cubic-bezier(.2,.85,.35,1.25); }
@keyframes chip-drop { from{transform:translate(-50%,-190%) scale(1.35) rotate(-30deg);opacity:0} to{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1} }

.token-picker { min-height:0; display:grid; place-items:center; overflow:hidden; }
.token-picker-card { width:min(880px,100%); max-height:100%; padding:clamp(12px,3vmin,28px); border:5px solid #fff; border-radius:28px; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; place-items:center; gap:clamp(7px,1.5vmin,15px); background:#fffaf0e8; box-shadow:0 15px 40px #49362935; }
.token-cluster-symbol { width:clamp(48px,8vmin,78px); aspect-ratio:1; display:grid; place-items:center; border:5px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(1.8rem,4vmin,3rem); box-shadow:0 7px 16px #1b130d44; }
.token-picker h2 { margin:0; font-size:clamp(1.35rem,3.5vmin,2.5rem); }
.token-options { width:100%; min-height:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(6px,1.3vw,14px); }
.token-options button { min-width:0; min-height:0; padding:clamp(5px,1vw,11px); border:5px solid #fff; border-radius:22px; display:grid; place-items:center; background:#f2eee8; cursor:pointer; box-shadow:0 7px 16px #4936292d; }
.token-options button span { width:min(100%,125px); aspect-ratio:1; display:grid; place-items:center; border:6px solid #ffffffd9; border-radius:50%; color:#fff; background:radial-gradient(circle at 32% 25%,#ffffff77 0 8%,transparent 9%),var(--token-color); font-size:clamp(2rem,6vmin,4.8rem); line-height:1; box-shadow:inset 0 0 0 5px #ffffff2e,0 8px 16px #1b130d44; }
.token-options button.selected { border-color:#ffd469; background:#fff3bd; transform:translateY(-4px); box-shadow:0 0 0 5px #ffd46955,0 9px 18px #49362935; }
.token-start { min-width:min(240px,70%); min-height:clamp(58px,9vmin,86px); padding:8px 22px; border:0; border-radius:18px; display:flex; align-items:center; justify-content:center; gap:14px; color:#fff; background:#25805d; cursor:pointer; box-shadow:0 8px 16px #173b2c44; }
.token-start span { font-size:clamp(1.7rem,4vmin,2.8rem); }
.token-start small { font-size:clamp(.9rem,2vmin,1.2rem); }
.token-start:disabled { opacity:.35; cursor:default; }

.line-celebration { position:fixed; z-index:25; left:50%; top:50%; min-width:min(360px,76vw); padding:12px 25px; transform:translate(-50%,-50%); border:5px solid #fff; border-radius:24px; display:grid; place-items:center; color:#573d00; background:linear-gradient(135deg,#fff8c7,#ffd469); box-shadow:0 0 35px #ffbd19,0 15px 40px #0004; animation:line-pop .38s cubic-bezier(.2,.9,.3,1.2); pointer-events:none; }
.line-celebration strong { font-size:clamp(2rem,6vmin,4rem); line-height:1; }
.line-celebration small { font-size:clamp(.8rem,2vmin,1.1rem); }
.line-sparkles { color:#fff; font-size:clamp(1.4rem,4vmin,2.8rem); text-shadow:0 0 10px #ff9d00; animation:line-sparkle .6s ease-in-out infinite alternate; }
@keyframes line-pop { from{transform:translate(-50%,-50%) scale(.35);opacity:0} }
@keyframes line-sparkle { to{transform:scale(1.22);filter:brightness(1.25)} }

.bingo-celebration { position:fixed; inset:0; z-index:30; overflow:hidden; display:grid; place-items:center; padding:18px; background:#18213bbf; }
.celebration-effects { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.celebration-card { position:relative; z-index:2; width:min(90vw,500px); padding:clamp(18px,4vmin,34px); border:6px solid #fff; border-radius:30px; background:#fffaf0; text-align:center; box-shadow:0 22px 70px #0008; animation:celebration-pop .5s cubic-bezier(.2,.9,.3,1.25); }
.celebration-symbol { width:clamp(72px,14vmin,116px); aspect-ratio:1; margin:auto; display:grid; place-items:center; border:6px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(2.8rem,8vmin,5.5rem); box-shadow:0 8px 20px #1b130d55; }
.celebration-card h2 { margin:8px 0 2px; color:var(--cluster-dark); font-size:clamp(2.1rem,7vmin,4.4rem); line-height:1; }
.celebration-card p { margin:7px 0 0; font-size:clamp(.9rem,2.3vmin,1.25rem); }
.continue-bingo { width:min(220px,70%); min-height:84px; margin-top:15px; border:0; border-radius:18px; display:inline-grid; grid-template-columns:auto 1fr; place-items:center; gap:10px; color:#fff; background:#25805d; cursor:pointer; box-shadow:0 8px 16px #173b2c44; }
.continue-bingo span { font-size:2.3rem; }
.continue-bingo small { font-size:1rem; }
@keyframes celebration-pop { from{transform:scale(.3) rotate(-8deg);opacity:0} to{transform:scale(1);opacity:1} }

.confetti .celebration-effects i { position:absolute; left:var(--x); top:-12%; width:12px; height:25px; border-radius:3px; background:var(--c); transform:rotate(var(--rot)); animation:confetti-fall var(--dur) var(--delay) linear infinite; }
@keyframes confetti-fall { to{top:112%;transform:translateX(70px) rotate(calc(var(--rot) + 720deg))} }
.balloons .celebration-effects i { position:absolute; left:var(--x); bottom:-18%; color:var(--c); font-size:clamp(32px,6vmin,68px); line-height:1; text-shadow:inset 0 0 0 3px #fff; animation:balloon-rise var(--dur) var(--delay) ease-in infinite; }
.balloons .celebration-effects i::after { content:""; position:absolute; left:50%; top:82%; width:2px; height:44px; background:#fff9; }
@keyframes balloon-rise { to{bottom:118%;transform:translateX(40px)} }
.stars .celebration-effects i { position:absolute; left:var(--x); top:-10%; color:var(--c); font-style:normal; font-size:clamp(24px,5vmin,55px); text-shadow:0 0 12px currentColor; animation:star-fall var(--dur) var(--delay) ease-in infinite; }
@keyframes star-fall { 50%{transform:translateX(-35px) rotate(190deg) scale(1.4)} to{top:110%;transform:translateX(35px) rotate(380deg) scale(.7)} }
.bears .celebration-effects i { position:absolute; left:var(--x); top:-12%; font-style:normal; font-size:clamp(30px,6vmin,70px); filter:drop-shadow(0 5px 4px #0004); animation:bear-fall var(--dur) var(--delay) ease-in infinite; }
@keyframes bear-fall { 35%{transform:translateX(35px) rotate(18deg)} 70%{transform:translateX(-25px) rotate(-16deg)} to{top:112%;transform:translateX(15px) rotate(10deg)} }
.flowers .celebration-effects i,.sunmoon .celebration-effects i,.cakes .celebration-effects i,.candy .celebration-effects i { position:absolute; left:var(--x); top:-13%; font-style:normal; font-size:clamp(28px,6vmin,68px); filter:drop-shadow(0 5px 5px #0004); animation:party-fall var(--dur) var(--delay) ease-in infinite; }
@keyframes party-fall { 30%{transform:translateX(42px) rotate(100deg) scale(1.1)} 65%{transform:translateX(-35px) rotate(230deg) scale(.9)} to{top:113%;transform:translateX(25px) rotate(380deg) scale(1.05)} }
.fireworks .burst { position:absolute; left:var(--x); top:var(--y); width:5px; height:5px; animation:burst-show 1.35s var(--delay) ease-out infinite; }
.fireworks .burst b { position:absolute; width:8px; height:28px; border-radius:8px; background:var(--c); transform-origin:4px 50px; transform:rotate(var(--a)) translateY(-48px) scaleY(.2); animation:spark 1.35s var(--delay) ease-out infinite; }
@keyframes burst-show { 0%,20%{opacity:0} 28%,80%{opacity:1} 100%{opacity:0} }
@keyframes spark { 0%,22%{transform:rotate(var(--a)) translateY(0) scaleY(.2)} 70%{transform:rotate(var(--a)) translateY(-70px) scaleY(1)} 100%{transform:rotate(var(--a)) translateY(-95px) scaleY(.05);opacity:0} }

.check-stage { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,27vw); gap:clamp(8px,1.3vw,15px); }
.check-picture { position:relative; min-width:0; min-height:0; padding:clamp(5px,.8vw,10px); overflow:hidden; border:5px solid #fff; border-radius:clamp(16px,2vw,25px); display:grid; place-items:center; background:#f8f5ed; box-shadow:0 10px 24px #49362935; }
.check-picture img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; border-radius:15px; }
.check-picture.correct { border-color:#4cad69; box-shadow:0 0 0 6px #4cad6944,0 10px 24px #49362935; }
.question-bubble { position:absolute; right:clamp(8px,1.5vw,18px); top:clamp(8px,1.5vw,18px); width:clamp(48px,8vmin,82px); aspect-ratio:1; display:grid; place-items:center; border:5px solid #fff; border-radius:50%; color:#fff; background:#d26d31; font-size:clamp(2rem,6vmin,4rem); box-shadow:0 7px 16px #49362944; }
.check-panel { min-height:0; padding:clamp(7px,1.2vw,13px); border:4px solid #fff; border-radius:22px; display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1.35fr); gap:clamp(8px,1.3vw,15px); background:#fffaf0c9; box-shadow:0 8px 18px #4936292d; }
.check-speaker { justify-self:center; align-self:center; width:min(100%,145px); aspect-ratio:1; max-height:100%; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; background:#ffd469; cursor:pointer; box-shadow:0 9px 20px #49362935; }
.check-speaker span { font-size:clamp(2.3rem,6vw,4.8rem); }
.check-answers { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,1vw,12px); }
.check-answers button { min-width:0; min-height:0; border:5px solid #fff; border-radius:clamp(15px,2vw,24px); display:grid; place-items:center; color:#fff; cursor:pointer; box-shadow:0 8px 17px #49362935; }
.check-answers button span { font-size:clamp(3rem,8vmin,6rem); line-height:1; }
.check-yes { background:#42a861; }
.check-no { background:#d45147; }
.check-answers button.wrong { border-color:#ffd469; animation:shake .3s; filter:saturate(.65); }
.check-answers button.right { border-color:#ffd469; box-shadow:0 0 0 6px #ffd46955,0 8px 17px #49362935; }

.remember-stage { min-height:0; display:grid; place-items:center; overflow:hidden; }
.remember-presentation { width:100%; height:100%; min-height:0; display:grid; place-items:center; }
.remember-big-card { position:relative; width:min(70vw,560px); height:100%; min-height:0; padding:clamp(6px,1vw,12px); overflow:hidden; border:6px solid #fff; border-radius:clamp(18px,3vw,30px); display:grid; place-items:center; background:#f8f5ed; box-shadow:0 14px 32px #49362944; animation:remember-card-in .32s ease-out; }
.remember-big-card img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; border-radius:16px; }
.remember-number { position:absolute; left:12px; top:12px; width:clamp(42px,7vmin,70px); aspect-ratio:1; display:grid; place-items:center; border:5px solid #fff; border-radius:50%; color:#fff; background:#6e5ba7; font-size:clamp(1.5rem,4vmin,2.8rem); box-shadow:0 6px 13px #30265b55; }
.remember-ready { display:grid; place-items:center; gap:18px; }
.remember-ready>span { width:clamp(100px,22vmin,190px); aspect-ratio:1; display:grid; place-items:center; border:7px solid #fff; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); font-size:clamp(4rem,13vmin,8rem); box-shadow:0 13px 28px #1b130d44; }
.remember-ready>div { display:flex; gap:10px; }
.remember-ready i { width:clamp(18px,3vmin,30px); aspect-ratio:1; border:4px solid #fff; border-radius:50%; background:#6e5ba7; box-shadow:0 4px 8px #30265b44; }
@keyframes remember-card-in { from{transform:scale(.72);opacity:0} }
.remember-recall { width:100%; height:100%; min-height:0; display:grid; grid-template-rows:minmax(72px,24%) minmax(0,1fr); gap:clamp(7px,1.2vw,14px); }
.remember-slots { min-height:0; display:grid; grid-template-columns:repeat(var(--remember-count),minmax(0,1fr)); gap:clamp(6px,1vw,12px); }
.remember-slot { position:relative; min-width:0; min-height:0; overflow:hidden; border:4px dashed #9c8ec4; border-radius:16px; display:grid; place-items:center; background:#ffffff8f; }
.remember-slot b { color:#6e5ba7; font-size:clamp(1.5rem,5vmin,3.5rem); }
.remember-slot.filled { border-style:solid; border-color:#6e5ba7; background:#fff; }
.remember-slot img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; }
.remember-slot span { position:absolute; left:5px; top:5px; width:clamp(24px,4vmin,38px); aspect-ratio:1; display:grid; place-items:center; border:3px solid #fff; border-radius:50%; color:#fff; background:#6e5ba7; }
.remember-options { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(6px,1vw,12px); }
.remember-options button { min-width:0; min-height:0; padding:5px; overflow:hidden; border:5px solid #fff; border-radius:clamp(14px,2vw,22px); background:#f8f5ed; cursor:pointer; box-shadow:0 8px 18px #4936292d; }
.remember-options button img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; }
.remember-options button:disabled { opacity:.3; }
.remember-options button.wrong { border-color:#d45147; animation:shake .3s; }
.remember-options button.right { border-color:#49aa67; transform:scale(.96); }

.missing-stage { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) minmax(105px,28%); gap:clamp(7px,1.2vw,14px); }
.missing-table { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(6px,1vw,12px); }
.missing-card { position:relative; min-width:0; min-height:0; padding:2px; overflow:hidden; border:3px solid #fff; border-radius:clamp(12px,1.7vw,19px); display:grid; place-items:center; background:#f8f5ed; box-shadow:0 8px 18px #4936292d; }
.missing-card img { width:100%; height:100%; min-height:0; display:block; object-fit:cover; object-position:center; }
.missing-card.speaking { border-color:#ffd469; box-shadow:0 0 0 6px #ffd46955,0 9px 20px #49362935; transform:translateY(-3px); }
.missing-card.back-card { color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); }
.missing-card.back-card span { width:45%; aspect-ratio:1; display:grid; place-items:center; border:4px solid #fff9; border-radius:50%; font-size:clamp(2rem,6vmin,4.5rem); }
.missing-card.empty { border-style:dashed; border-color:#b45c84; background:#fff8fc; }
.missing-card.empty>span { color:#b45c84; font-size:clamp(3rem,10vmin,7rem); }
.missing-card.empty.found { border-style:solid; border-color:#49aa67; animation:remember-card-in .35s; }
.missing-bottom { min-height:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(7px,1vw,12px); }
.missing-watch { grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:clamp(10px,2vw,22px); }
.missing-watch span { font-size:clamp(3rem,9vmin,6rem); }
.missing-watch i { width:clamp(16px,3vmin,28px); aspect-ratio:1; border-radius:50%; background:#b45c84; animation:watch-dot .7s ease-in-out infinite alternate; }
.missing-watch i:nth-child(3){animation-delay:.2s}.missing-watch i:nth-child(4){animation-delay:.4s}
@keyframes watch-dot { to{transform:translateY(-12px);background:#ffd469} }
.missing-speaker { align-self:center; width:clamp(70px,11vmin,105px); aspect-ratio:1; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; background:#ffd469; cursor:pointer; box-shadow:0 7px 15px #49362935; }
.missing-speaker span { font-size:clamp(2rem,5vmin,3.5rem); }
.missing-options { min-height:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(5px,.8vw,9px); }
.missing-options button { min-width:0; min-height:0; padding:2px; overflow:hidden; border:3px solid #fff; border-radius:12px; background:#f8f5ed; cursor:pointer; box-shadow:0 6px 13px #4936292d; }
.missing-options button img { width:100%; height:100%; min-height:0; display:block; object-fit:cover; object-position:center; }
.missing-options button.wrong { border-color:#d45147; animation:shake .3s; }
.missing-options button.right { border-color:#49aa67; box-shadow:0 0 0 5px #49aa6744; }

.say-stage { min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,27vw); gap:clamp(8px,1.3vw,15px); }
.say-picture { position:relative; min-width:0; min-height:0; padding:clamp(6px,1vw,12px); overflow:hidden; border:6px solid #fff; border-radius:clamp(18px,2.5vw,28px); display:grid; grid-template-rows:minmax(0,1fr) auto; place-items:center; background:#f8f5ed; box-shadow:0 11px 26px #49362935; }
.say-picture>img { width:100%; height:100%; min-height:0; display:block; object-fit:contain; border-radius:16px; }
.say-word { width:100%; min-height:clamp(44px,8vmin,78px); padding:7px 10px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:14px; color:#211d18; background:#fff; text-align:center; white-space:nowrap; font-size:clamp(1.3rem,4vmin,3rem); line-height:1; box-shadow:0 -5px 16px #49362918; animation:word-card-release .4s ease-out; }
.say-word.long { font-size:clamp(.85rem,2.5vmin,1.8rem); }
.say-prompt { position:absolute; right:clamp(10px,2vw,22px); bottom:clamp(10px,2vw,22px); min-width:clamp(100px,17vmin,170px); padding:8px 13px; border:5px solid #fff; border-radius:40px; display:flex; align-items:center; justify-content:center; gap:5px; background:#318b76; box-shadow:0 8px 18px #1c534655; }
.say-prompt span { font-size:clamp(2.2rem,6vmin,4.5rem); }
.say-prompt i { width:clamp(8px,1.5vmin,14px); aspect-ratio:1; border-radius:50%; background:#fff; animation:say-dot .65s ease-in-out infinite alternate; }
.say-prompt i:nth-child(3){animation-delay:.15s}.say-prompt i:nth-child(4){animation-delay:.3s}
@keyframes say-dot { to{transform:translateY(-8px);background:#ffd469} }
.say-panel { min-height:0; padding:clamp(7px,1.2vw,13px); border:4px solid #fff; border-radius:22px; display:grid; grid-template-rows:minmax(0,1fr) minmax(0,1.2fr); gap:clamp(8px,1.2vw,14px); background:#fffaf0c9; box-shadow:0 8px 18px #4936292d; }
.say-hear { justify-self:center; align-self:center; width:min(100%,145px); aspect-ratio:1; max-height:100%; border:5px solid #fff; border-radius:50%; display:grid; place-items:center; background:#ffd469; cursor:pointer; box-shadow:0 9px 20px #49362935; }
.say-hear span { font-size:clamp(2.3rem,6vw,4.8rem); }
.say-actions { min-height:0; display:grid; grid-template-columns:1fr 1fr; gap:clamp(7px,1vw,12px); }
.say-actions button { min-width:0; min-height:0; border:5px solid #fff; border-radius:clamp(15px,2vw,24px); display:grid; place-items:center; color:#fff; cursor:pointer; box-shadow:0 8px 17px #49362935; }
.say-actions button span { font-size:clamp(2.7rem,7vmin,5.5rem); line-height:1; }
.say-again { background:#d8892d; }
.say-next { background:#42a861; }
.say-wait { min-height:0; border:5px dashed #78af9f; border-radius:22px; display:flex; align-items:center; justify-content:center; gap:10px; color:#318b76; background:#e8f6f2; }
.say-wait span { font-size:clamp(2.6rem,7vmin,5rem); }
.say-wait b { font-size:clamp(2.2rem,6vmin,4.5rem); }

.win { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:18px; background:#2d241d70; }
.win-card { position:relative; z-index:2; width:min(90vw,470px); padding:22px; border-radius:26px; background:#fff; text-align:center; box-shadow:0 20px 55px #0004; }
.win-card .party { display:grid; place-items:center; font-size:3.8rem; }
.win-cluster-symbol { width:74px; aspect-ratio:1; display:grid; place-items:center; border:5px solid #ffffffb5; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--cluster),var(--cluster-dark)); box-shadow:0 8px 18px #1b130d33; }
.win-card h2 { margin:0; font-size:2rem; }
.win-actions { margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.win-actions button { min-height:84px; border:0; border-radius:16px; color:#fff; background:var(--accent); font-size:1rem; cursor:pointer; }
.win-actions button:first-child { background:#25805d; }
.win-actions button:last-child { background:#cf4e43; }

@media (orientation:portrait) {
  .game-links { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); }
  .game-link { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto auto; text-align:center; }
  .game-icon { width:min(12vmin,85px); }
  .game-link strong { justify-self:center; }
  .game-link small { display:none; }
  .cluster-links { grid-template-columns:1fr; grid-template-rows:auto; }
  .cluster-links.count-7 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); }
  .cluster-links.count-7 .cluster-link { grid-column:auto; }
  .cluster-links.count-7 .cluster-link:nth-child(5),.cluster-links.count-7 .cluster-link:nth-child(6) { grid-column:auto; }
  .cluster-links.count-7 .cluster-link:nth-child(7) { grid-column:1 / -1; width:calc(50% - 4px); justify-self:center; }
  .cluster-links.count-5 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); }
  .cluster-links.count-4 { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .cluster-links.count-3 { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); }
  .cluster-links.count-2 { grid-template-columns:1fr; grid-template-rows:repeat(2,minmax(0,1fr)); }
  .cluster-links.single { grid-template-rows:minmax(0,1fr); }
  .cluster-link { grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:1fr; text-align:left; }
  .cluster-symbol { width:min(18vmin,105px); }
  .cluster-link strong { justify-self:start; }
  .memory-board { grid-template-columns:repeat(var(--port-cols),minmax(0,1fr)); grid-template-rows:repeat(var(--port-rows),minmax(0,1fr)); }
  .listen-stage { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .big-speaker { justify-self:center; width:min(72px,16vw); }
  .search-image { max-height:calc(100dvh - 95px); }
  .bingo-stage { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); }
  .bingo-caller { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr; align-items:center; padding:5px 8px; }
  .bingo-machine-wrap { width:min(185px,46vw); grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr; gap:3px; }
  .drawn-word-slot { min-height:38px; width:min(105px,27vw); order:2; place-items:center; }
  .drawn-word-card { padding:5px 6px; border-width:3px; font-size:clamp(.5rem,1.45vw,.7rem); }
  .drawn-word-card.long { padding-inline:3px; font-size:clamp(.38rem,1.05vw,.56rem); }
  .bingo-machine { width:min(75px,17vw); aspect-ratio:1; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:1fr; border-radius:20px; padding:5px; }
  .machine-chute { left:auto; right:-7px; top:50%; width:18px; height:28%; transform:translateY(-50%); }
  .machine-button { width:30px; margin:0 0 0 3px; font-size:1rem; border-width:2px; }
  .machine-drum { border-width:3px; }
  .machine-drum strong { border-width:2px; font-size:1.3rem; }
  .check-stage { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .check-panel { grid-template-columns:auto minmax(0,1fr); grid-template-rows:1fr; padding:6px 9px; }
  .check-speaker { width:min(72px,16vw); }
  .check-answers button { min-height:clamp(60px,13vw,95px); }
  .remember-recall { grid-template-rows:minmax(62px,22%) minmax(0,1fr); }
  .missing-stage { grid-template-rows:minmax(0,1fr) minmax(95px,25%); }
  .missing-table { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); }
  .say-stage { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) auto; }
  .say-panel { grid-template-columns:auto minmax(0,1fr); grid-template-rows:1fr; padding:6px 9px; }
  .say-hear { width:min(72px,16vw); }
  .say-actions,.say-wait { min-height:clamp(62px,14vw,100px); }
  .search-game .intro-demo { flex-wrap:wrap; }
  .search-game .intro-master { order:3; flex-basis:min(92%,690px); width:min(92%,690px); height:auto; }
}
@media (max-width:640px) {
  .home { padding:6px; }
  .home-panel { padding:10px; border-radius:20px; }
  .cluster-panel { padding:9px; border-radius:20px; }
  .home h1 { font-size:1.9rem; margin-bottom:6px; }
  .game-links { gap:6px; }
  .game-link { padding:6px 9px; border-width:3px; border-radius:15px; }
  .game-icon { width:min(10vh,60px); font-size:2rem; }
  .game-link strong { font-size:1rem; }
  .cluster-link { padding:7px; border-width:3px; border-radius:16px; }
  .cluster-symbol { width:min(13vh,66px); font-size:2.3rem; border-width:4px; }
  .cluster-link strong { font-size:.95rem; }
  .start-cue { width:34px; height:34px; }
  .game { padding:5px; gap:5px; }
  .topbar { padding:4px 6px; }
  .title p { display:none; }
  .word-label { font-size:.56rem; }
  .plate-options { grid-template-columns:1fr; }
  .plate-choice-card { width:min(440px,100%); }
  .plate-preview { aspect-ratio:2.15; }
}
@media (orientation:landscape) and (max-height:650px) {
  .home-panel { padding:10px 16px; }
  .home h1 { font-size:2.1rem; margin-bottom:6px; }
  .game-link { padding:8px; }
  .game-icon { width:min(17vh,100px); font-size:3rem; }
  .topbar { padding:4px 7px; }
  .title p { display:none; }
  .search-image { max-height:calc(100dvh - 60px); }
}
@media (prefers-reduced-motion:reduce) { .card-inner { transition:none; } .cluster-link,.option.wrong,.bingo-cell.wrong,.check-answers button.wrong,.remember-options button.wrong,.missing-options button.wrong,.missing-watch i,.say-prompt i,.bingo-machine.drawing .machine-drum,.bingo-machine.drawing .machine-drum i,.bingo-mark.drop,.celebration-card,.celebration-effects *,.mini-reward,.intro-listen-cue i,.intro-master i,.intro-chip { animation:none; } }


/* v13 menu + trein-editie */
.home { padding:clamp(5px,.8vw,10px); }
.home-panel.orbit-panel { width:min(1500px,99.5vw); height:min(920px,99dvh); padding:clamp(8px,1.5vmin,18px); }
.home h1 { margin-bottom:clamp(3px,.8vmin,8px); font-size:clamp(1.8rem,4.6vmin,3.4rem); }
.optimist-orbit-menu { width:min(100%,1280px); max-height:720px; }
.optimist-hub { position:absolute; z-index:1; left:50%; top:50%; width:clamp(175px,28vmin,255px); aspect-ratio:1; transform:translate(-50%,-50%); overflow:hidden; display:grid; place-items:center; border:8px solid #fff; border-radius:50%; background:#fff; background-clip:padding-box; box-shadow:0 0 0 15px #ffd46952,0 14px 30px #261c1748; }
.optimist-mark{position:relative;width:100%;height:100%}.optimist-mark img{position:absolute;left:50%;top:50%;width:82%;height:82%;transform:translate(-50%,-50%);object-fit:contain;display:block}.optimist-mark .mark-1{z-index:4}.optimist-mark .mark-2{z-index:3}.optimist-mark .mark-3{z-index:5}.optimist-mark .mark-4{z-index:2}.optimist-mark .mark-5{z-index:6}.optimist-mark .mark-6{z-index:1}
.official-optimist-logo,.launch-logo-hub>img{display:block;width:74%;height:74%;object-fit:contain}
.orbit-game.orbit-planet { width:clamp(125px,20.5vmin,180px); }
.orbit-game.orbit-featured { width:clamp(158px,24vmin,215px); box-shadow:0 0 0 10px #ffffff55,0 12px 24px #261c1748; }
.orbit-game.orbit-featured strong { font-size:clamp(.95rem,2.15vmin,1.35rem); }
.orbit-line[data-target="search"] { --orbit-color:var(--green); }

.cluster-home { padding:clamp(5px,.8vw,10px); }
.cluster-panel.cluster-orbit-panel { width:min(1480px,99.5vw); height:min(900px,99dvh); padding:clamp(8px,1.35vmin,16px); }
.cluster-orbit-menu { width:min(100%,1260px); max-height:720px; }
.cluster-orbit-tile { width:clamp(150px,22vmin,190px); }
.cluster-game-hub { width:clamp(175px,27vmin,235px); }
.cluster-orbit-line.selected,.orbit-line.selected { stroke-width:12; filter:drop-shadow(0 0 6px currentColor); }

.train-listen-stage { min-height:0; display:grid; grid-template-rows:auto minmax(150px,1fr) minmax(210px,42%); gap:clamp(5px,.7vmin,8px); overflow:hidden; }
.train-question { min-height:58px; display:flex; align-items:center; justify-content:center; gap:clamp(8px,1vw,14px); }
.train-speaker { width:clamp(54px,7vmin,72px); aspect-ratio:1; border:4px solid #fff; border-radius:50%; display:grid; place-items:center; background:#ffd469; cursor:pointer; box-shadow:0 7px 15px #49362935; }
.train-speaker span { font-size:clamp(1.7rem,3.8vmin,2.7rem); }
.train-question-word { min-width:min(270px,55vw); padding:10px 18px; border:4px solid #fff; border-radius:18px; background:#fffaf0e8; text-align:center; font-size:clamp(1rem,2.35vmin,1.45rem); font-weight:900; box-shadow:0 7px 15px #49362925; }
.train-choices { align-self:stretch; width:min(1180px,96%); min-height:0; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(105px,1fr)); grid-auto-rows:minmax(0,1fr); gap:clamp(3px,.45vw,6px); overflow:hidden; }
.train-choice,.train-choice-slot { min-width:0; min-height:0; border-radius:13px; }
.train-choice { padding:3px; overflow:hidden; border:4px solid #fff; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#f8f5ed; cursor:pointer; box-shadow:0 5px 12px #49362927; }
.train-choice img { width:100%; height:100%; min-height:0; object-fit:contain; display:block; border-radius:9px; }
.train-choice .word-label { min-height:22px; font-size:clamp(.5rem,1.05vmin,.78rem); }
.train-choice.wrong { border-color:#d54d43; animation:shake .3s; }
.train-choice-slot.used { border:3px dashed #baa99570; background:#ffffff24; box-shadow:inset 0 0 0 2px #fff4; }

.train-track { position:relative; align-self:end; width:100%; height:100%; min-height:210px; overflow:hidden; display:flex; align-items:end; padding-bottom:18px; }
.train-track::before { content:""; position:absolute; left:0; right:0; bottom:20px; height:9px; background:repeating-linear-gradient(90deg,#5d4939 0 34px,#b18a5b 34px 43px); box-shadow:0 9px 0 #6f5a45; }
.train { position:relative; z-index:2; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:clamp(4px,.45vw,8px); padding:0 clamp(8px,1.2vw,18px) 18px; }
.train.arriving { animation:train-arrive .82s cubic-bezier(.15,.78,.28,1); }
.train.departing { animation:train-depart 1s cubic-bezier(.45,.05,.8,.35) forwards; }
@keyframes train-arrive { from{transform:translateX(112%)} 70%{transform:translateX(-1.5%)} to{transform:none} }
@keyframes train-depart { from{transform:none} to{transform:translateX(-118%)} }
.locomotive { position:relative; flex:0 0 clamp(120px,15vw,205px); height:clamp(110px,16vmin,180px); display:flex; align-items:flex-end; justify-content:center; padding-bottom:25px; }
.loco-cab { position:absolute; left:24%; bottom:36px; width:62%; height:62%; border:5px solid #fff; border-radius:20px 20px 8px 8px; display:grid; place-items:center; background:linear-gradient(145deg,#357d86,#205865); box-shadow:inset 0 0 0 5px #ffffff28,0 8px 15px #36261f3d; }
.loco-cab span { font-size:clamp(3rem,7vmin,5.4rem); filter:drop-shadow(0 3px 2px #0003); }
.loco-base { position:absolute; left:5%; right:0; bottom:25px; height:28px; border:4px solid #fff; border-radius:9px; background:#284b55; }
.loco-smoke { position:absolute; left:10%; top:0; font-size:clamp(2.2rem,5vmin,4rem); animation:smoke-puff 1.1s ease-in-out infinite alternate; }
@keyframes smoke-puff { to{transform:translate(-8px,-10px) scale(1.13);opacity:.65} }

.train-wagon { position:relative; flex:1 1 0; min-width:105px; max-width:210px; height:clamp(120px,18vmin,190px); padding-bottom:25px; }
.wagon-body { position:absolute; left:2%; right:2%; bottom:25px; height:49%; border:5px solid #fff; border-radius:9px 9px 15px 15px; background:linear-gradient(180deg,var(--cluster) 0 72%,var(--cluster-dark) 72% 100%); box-shadow:inset 0 0 0 4px #ffffff22,0 8px 15px #36261f3a; }
.wagon-body::before,.wagon-body::after { content:""; position:absolute; top:12%; bottom:14%; width:7px; border-radius:4px; background:#ffffff55; }
.wagon-body::before{left:8%}.wagon-body::after{right:8%}
.wagon-rail { position:absolute; left:5%; right:5%; top:-14px; height:18px; border:5px solid #fff; border-bottom:0; border-radius:10px 10px 0 0; background:var(--cluster-dark); }
.wagon-cargo { position:absolute; z-index:3; left:8%; right:8%; bottom:52%; height:58%; display:flex; align-items:flex-end; justify-content:center; overflow:visible; }
.word-wagon .wagon-cargo img { max-width:100%; max-height:100%; object-fit:contain; display:block; border:4px solid #fff; border-radius:13px; background:#fff; box-shadow:0 5px 10px #2b201a35; }
.wagon-word { position:absolute; left:4%; right:4%; bottom:-23px; z-index:5; min-height:23px; padding:3px 5px; overflow:hidden; border:3px solid #fff; border-radius:9px; background:#fff; color:#211d18; text-align:center; white-space:nowrap; font-size:clamp(.48rem,.92vmin,.72rem); font-weight:900; }
.empty-wagon-star { align-self:flex-end; margin-bottom:10px; color:#fff8cf; font-size:clamp(2rem,4.8vmin,3.6rem); text-shadow:0 3px 8px #0004; }
.animal-cargo { position:relative; width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; }
.animal-face { position:relative; z-index:3; font-size:clamp(3rem,7vmin,5rem); line-height:1; filter:drop-shadow(0 5px 4px #0003); animation:animal-bob .8s ease-in-out infinite alternate; }
@keyframes animal-bob { to{transform:translateY(-6px) rotate(3deg)} }
.animal-props { position:absolute; inset:auto 0 0; display:flex; align-items:flex-end; justify-content:space-between; gap:2px; font-size:clamp(1.15rem,2.6vmin,2rem); }
.animal-props i { font-style:normal; filter:drop-shadow(0 2px 2px #0002); }
.cargo-label { position:absolute; left:8%; right:8%; bottom:9%; color:#fff; text-align:center; font-size:clamp(.43rem,.8vmin,.62rem); font-weight:900; letter-spacing:.03em; }
.wheel { position:absolute; z-index:7; bottom:4px; width:clamp(25px,3.4vmin,37px); aspect-ratio:1; border:5px solid #fff; border-radius:50%; background:radial-gradient(circle,#c9a359 0 22%,#3b342e 24% 62%,#171412 64%); box-shadow:0 4px 7px #0004; }
.wheel.left{left:16%}.wheel.right{right:14%}
.train.arriving .wheel,.train.departing .wheel { animation:wheel-spin .25s linear infinite; }
@keyframes wheel-spin { to{transform:rotate(360deg)} }

@media (max-width: 900px), (max-height: 650px) {
  .home-panel.orbit-panel,.cluster-panel.cluster-orbit-panel { width:100%; height:100%; border-radius:20px; }
  .orbit-game.orbit-planet { width:clamp(105px,18vmin,145px); }
  .orbit-game.orbit-featured { width:clamp(135px,21vmin,175px); }
  .optimist-hub { width:clamp(145px,24vmin,200px); }
  .cluster-orbit-tile { width:clamp(125px,19vmin,155px); }
  .train-listen-stage { grid-template-rows:auto minmax(100px,1fr) minmax(170px,42%); }
  .train-choices { grid-template-columns:repeat(auto-fit,minmax(82px,1fr)); }
  .locomotive { flex-basis:110px; }
  .train-wagon { min-width:78px; }
}


/* ===== Luister en kies: station/trein-editie v14 ===== */
.train-listen-game { background:linear-gradient(180deg,#aee2ff 0%,#eaf7ff 30%,#fff3d9 72%,#e5d2aa 100%)!important; }
.train-listen-stage { min-height:0; height:100%; display:grid!important; grid-template-rows:minmax(0,1fr) clamp(195px,27vh,290px)!important; gap:0!important; overflow:hidden!important; }
.station-scene { position:relative; min-height:0; overflow:hidden; padding:clamp(86px,12vh,118px) clamp(10px,1.2vw,18px) clamp(22px,3vh,34px); background:linear-gradient(180deg,#d8f0ff00 0 22%,#fff6dd 22% 78%,#d7c095 78% 100%); }
.station-canopy { position:absolute; inset:0 0 auto; height:clamp(90px,13vh,125px); background-image:linear-gradient(180deg,#ffffff12,#00000008),url('assets/train-style/station-canopy.jpg'); background-size:cover; background-position:center 10%; border-bottom:6px solid #e9b944; box-shadow:0 10px 20px #3e2d1530; z-index:0; }
.station-title { position:absolute; left:clamp(16px,3vw,46px); bottom:8px; display:flex; align-items:center; gap:10px; padding:6px 14px; border:3px solid #f4cf5b; border-radius:12px 12px 2px 2px; background:#16685fdd; color:#fff; box-shadow:0 4px 9px #0003; }
.station-title span { font:900 clamp(.58rem,1.2vmin,.78rem)/1 Arial,sans-serif; letter-spacing:.16em; color:#ffe582; }
.station-title strong { font:900 clamp(.75rem,1.8vmin,1.02rem)/1 Arial,sans-serif; }
.station-clock { position:absolute; left:50%; bottom:9px; width:clamp(44px,5.7vmin,62px); aspect-ratio:1; transform:translateX(-50%); border:5px solid #d8a52c; border-radius:50%; background:#fff8df; box-shadow:0 4px 10px #0003,inset 0 0 0 3px #2c7168; }
.station-clock::before { content:""; position:absolute; inset:7px; border:2px dotted #7f6334; border-radius:50%; }
.station-clock i,.station-clock b { position:absolute; left:50%; top:50%; width:3px; transform-origin:50% 100%; border-radius:4px; background:#382b1b; }
.station-clock i { height:27%; transform:translate(-50%,-100%) rotate(8deg); }
.station-clock b { height:37%; transform:translate(-50%,-100%) rotate(96deg); }
.train-question { position:absolute!important; z-index:4; top:clamp(66px,9.2vh,90px); left:50%; transform:translateX(-50%); width:auto!important; margin:0!important; display:flex!important; align-items:center; gap:8px; padding:5px 9px; border-radius:999px; background:#fffaf0f3; box-shadow:0 6px 16px #44331d32; }
.train-speaker { width:clamp(42px,5.5vmin,57px)!important; height:clamp(42px,5.5vmin,57px)!important; flex:0 0 auto; border:4px solid #fff!important; }
.train-question-word { min-width:clamp(145px,18vw,240px); min-height:42px; padding:8px 16px!important; display:grid; place-items:center; border:3px solid #e8d4b3!important; border-radius:14px; background:#fff; color:#20180f; font-size:clamp(.92rem,2.25vmin,1.35rem)!important; box-shadow:inset 0 0 0 3px #fff7e8; }
.train-choices { position:relative; z-index:2; align-self:stretch!important; width:min(1500px,98.5%)!important; height:100%; min-height:0!important; margin:0 auto!important; display:grid!important; grid-template-columns:repeat(var(--choice-cols),minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important; grid-auto-flow:row!important; gap:clamp(5px,.75vw,11px)!important; padding:clamp(28px,4vh,42px) 0 4px!important; overflow:visible!important; }
.train-choice,.train-choice-slot { position:relative; min-width:0!important; min-height:0!important; border-radius:clamp(12px,1.3vw,18px)!important; }
.train-choice { padding:4px 4px 10px!important; overflow:visible!important; border:4px solid #fff!important; display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; background:#fffaf1!important; cursor:pointer; box-shadow:0 8px 15px #5b41272c!important; transition:transform .15s,box-shadow .15s; }
.train-choice:hover { transform:translateY(-3px); box-shadow:0 12px 18px #5b412738!important; }
.train-choice.wrong { border-color:#dc544a!important; animation:shake .3s; }
.platform-card-image { min-height:0; overflow:hidden; display:block; border-radius:10px; background:#fff; }
.train-choice img { width:100%!important; height:100%!important; min-height:0!important; display:block!important; object-fit:contain!important; border-radius:8px!important; }
.train-choice .word-label { min-height:clamp(24px,3vh,31px)!important; padding:4px 3px!important; font-size:clamp(.54rem,1.25vmin,.83rem)!important; }
.train-choice-slot.used { border:3px dashed #b2926750!important; background:linear-gradient(180deg,#ffffff18,#c39c6442)!important; box-shadow:inset 0 -8px 0 #b9905e33!important; }
.card-feet { position:absolute; z-index:-1; bottom:-13px; width:10px; height:18px; border-radius:0 0 5px 5px; background:#806543; box-shadow:0 4px 4px #0002; }
.card-feet.left{left:20%}.card-feet.right{right:20%}
.platform-edge { position:absolute; z-index:1; left:0; right:0; bottom:0; height:clamp(25px,3.2vh,36px); border-top:5px solid #e9c357; background-image:linear-gradient(#d9c8a6aa,#bca078bb),url('assets/train-style/platform-tiles.jpg'); background-size:auto,cover; box-shadow:0 -5px 12px #5d421f25; }
.platform-edge span { position:absolute; left:0; right:0; top:4px; height:7px; background:repeating-linear-gradient(90deg,#f4d94b 0 20px,#f6edb7 20px 30px); opacity:.9; }

.train-yard { position:relative; min-height:0; overflow:hidden; display:flex; align-items:flex-end; padding:0 10px 14px; background:linear-gradient(180deg,#d3b985 0 7%,#b99a68 7% 13%,#92714b 13% 17%,#6d5237 17% 23%,#59422e 23% 100%); border-top:5px solid #957448; box-shadow:inset 0 10px 16px #0002; }
.train-yard::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 58px,#00000012 59px 61px); pointer-events:none; }
.rails { position:absolute; left:0; right:0; bottom:7px; height:44px; }
.rails::before,.rails::after { content:""; position:absolute; left:0; right:0; height:7px; border-radius:4px; background:linear-gradient(#4b4b4b,#171717); box-shadow:0 2px 1px #fff3; }
.rails::before{top:5px}.rails::after{bottom:5px}
.rails b { position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 32px,#604327 33px 44px,transparent 45px 61px); }
.train { position:relative!important; z-index:2; width:min(1540px,99%)!important; height:100%!important; margin:0 auto!important; display:flex!important; flex-direction:row!important; align-items:flex-end!important; justify-content:flex-end!important; gap:clamp(0px,.25vw,4px)!important; transform:translateX(0); }
.train.arriving { animation:train-arrive-new .95s cubic-bezier(.18,.76,.32,1) both!important; }
.train.departing { animation:train-depart-new 1.05s cubic-bezier(.58,.06,.92,.45) both!important; }
@keyframes train-arrive-new { from{transform:translateX(-115vw)} to{transform:translateX(0)} }
@keyframes train-depart-new { from{transform:translateX(0)} to{transform:translateX(115vw)} }
.locomotive { position:relative!important; order:99; flex:0 0 clamp(205px,23vw,350px)!important; height:clamp(145px,22vh,245px)!important; padding:0!important; display:flex!important; align-items:flex-end!important; justify-content:flex-end!important; }
.locomotive>img { width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 9px 8px #0005); }
.steam-puff { position:absolute; z-index:-1; top:4%; color:#f5f5f5; filter:drop-shadow(0 3px 3px #0003); font-size:clamp(1.7rem,4vmin,3rem); opacity:.9; animation:steam 1.5s ease-out infinite; }
.steam-puff.p1{right:17%}.steam-puff.p2{right:8%;animation-delay:.6s}
@keyframes steam { from{transform:translate(0,12px) scale(.55);opacity:.25} to{transform:translate(18px,-30px) scale(1.25);opacity:0} }
.train-wagon { position:relative!important; flex:1 1 0!important; min-width:0!important; max-width:250px!important; height:clamp(135px,20vh,225px)!important; padding:0!important; display:flex; align-items:flex-end; justify-content:center; }
.wagon-shell { position:absolute; z-index:1; left:0; right:0; bottom:0; width:100%; height:78%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 7px 6px #0004); }
.wagon-cargo { position:absolute!important; z-index:3!important; left:10%!important; right:10%!important; top:0!important; bottom:auto!important; height:67%!important; padding:0!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; overflow:visible!important; background:transparent!important; border:0!important; }
.word-cargo-card { width:78%; height:92%; padding:4px; border:4px solid #fff; border-radius:13px 13px 7px 7px; display:grid; grid-template-rows:minmax(0,1fr) auto; background:#fffaf0; box-shadow:0 4px 9px #0003; animation:cargo-pop .35s cubic-bezier(.2,.9,.3,1.25); }
.word-cargo-card img { width:100%; height:100%; min-height:0; object-fit:contain; border-radius:8px; }
.wagon-word { min-height:22px; padding:3px 2px; display:flex; align-items:center; justify-content:center; background:#fff; color:#1e1710; text-align:center; font:800 clamp(.48rem,1.05vmin,.72rem)/1 Arial,sans-serif; }
.empty-wagon-sign { position:absolute; bottom:17%; padding:4px 10px; border:3px solid #f4cf4f; border-radius:999px; color:#fff9cf; background:#047e87; font:900 clamp(.5rem,1.05vmin,.7rem)/1 Arial,sans-serif; box-shadow:0 3px 6px #0002; }
@keyframes cargo-pop { from{transform:translateY(20px) scale(.7);opacity:0} to{transform:none;opacity:1} }
.animal-cargo { width:86%; height:100%; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; border:4px solid #ffdd5a; border-radius:16px 16px 8px 8px; background:#fff4d0; box-shadow:0 5px 10px #0003; }
.animal-cargo img { width:100%; height:100%; min-height:0; object-fit:cover; object-position:center 45%; }
.animal-name { display:block; padding:3px 4px; color:#fff; background:#0a8c94; text-align:center; font:900 clamp(.45rem,.95vmin,.65rem)/1 Arial,sans-serif; }
.animal-sparkles { position:absolute; top:-6px; right:-6px; color:#ffe46a; font-size:clamp(.8rem,1.8vmin,1.25rem); text-shadow:0 2px 4px #8d5d00; animation:animal-sparkle .8s ease-in-out infinite alternate; }
@keyframes animal-sparkle { to{transform:scale(1.18) rotate(6deg);filter:brightness(1.25)} }

@media (max-width:900px) {
 .train-listen-stage { grid-template-rows:minmax(0,1fr) clamp(165px,26vh,220px)!important; }
 .station-scene { padding-top:75px; }
 .train-choices { gap:4px!important; padding-top:30px!important; }
 .locomotive { flex-basis:clamp(160px,25vw,230px)!important; }
 .train-wagon { height:clamp(115px,18vh,170px)!important; }
 .train-choice .word-label { font-size:clamp(.46rem,1.05vmin,.66rem)!important; }
}


/* v15 train/perron refinement */
.train-listen-stage { grid-template-rows:minmax(0,1fr) clamp(210px,29vh,320px)!important; }
.station-scene {
  padding:clamp(120px,17vh,168px) clamp(18px,2vw,28px) clamp(22px,3vh,34px)!important;
  background:
    linear-gradient(180deg,rgba(216,240,255,0) 0 20%,#f8ecd2 20% 80%,#dcc193 80% 100%),
    radial-gradient(circle at 15% 10%,#ffffffbb 0 4%,transparent 5%),
    radial-gradient(circle at 55% 8%,#ffffffaa 0 4%,transparent 5%),
    linear-gradient(180deg,#8fd4ff 0 22%,transparent 22% 100%)!important;
}
.station-canopy { height:clamp(116px,16vh,150px)!important; border-bottom:7px solid #dfb247!important; }
.station-title { display:none!important; }
.station-clock {
  left:50%!important; top:14px!important; bottom:auto!important;
  width:clamp(72px,8vmin,96px)!important; transform:translateX(-50%);
  z-index:5; box-shadow:0 6px 16px #0003,inset 0 0 0 4px #2c7168!important;
}
.station-clock::before { inset:10px!important; }
.station-clock i,.station-clock b { width:4px!important; }
.train-question {
  top:clamp(94px,13vh,126px)!important; z-index:6;
  padding:8px 12px!important; gap:10px!important;
  border-radius:20px!important; background:#fffaf3f8!important;
}
.train-question-word {
  min-width:clamp(180px,22vw,280px)!important; min-height:52px!important;
  padding:10px 18px!important; font-size:clamp(1rem,2.4vmin,1.48rem)!important;
}
.train-speaker {
  width:clamp(48px,6vmin,64px)!important; height:clamp(48px,6vmin,64px)!important;
  border:4px solid #fff!important; border-radius:50%!important;
  background:linear-gradient(180deg,#ffdb66,#f0b93a)!important; box-shadow:0 4px 10px #0002!important;
  display:grid!important; place-items:center!important; font-size:clamp(1.15rem,2.6vmin,1.6rem)!important;
}
.speaker-glyph { transform:translateX(1px); filter:drop-shadow(0 1px 0 #fff8); }
.train-choices {
  width:min(1340px,96.5%)!important; gap:clamp(12px,1vw,16px)!important;
  padding:clamp(14px,2vh,24px) 0 6px!important;
}
.train-choice,.train-choice-slot {
  min-height:clamp(132px,19vh,186px)!important; border-radius:18px!important;
}
.train-choice {
  padding:8px 8px 12px!important; grid-template-rows:minmax(0,1fr)!important;
  background:#fffdf8d9!important; backdrop-filter:blur(1px); border:4px solid #f5f0e6!important;
}
.train-choice .word-label { display:none!important; }
.platform-card-image {
  position:relative; height:100%; border-radius:14px!important; overflow:hidden;
  background:#fff; box-shadow:inset 0 0 0 3px #f0e6d6;
}
.train-choice img { object-fit:contain!important; }
.train-choice-slot.used {
  border:0!important; background:transparent!important; box-shadow:none!important;
}
.train-choice-slot.used::before {
  content:""; position:absolute; inset:0; border-radius:18px;
  background:linear-gradient(180deg,transparent 0 55%, rgba(120,90,52,.08) 55% 100%);
}
.card-feet { width:12px!important; height:18px!important; bottom:-10px!important; background:#8b6a45!important; z-index:1!important; }
.platform-edge {
  height:clamp(38px,4.8vh,52px)!important; border-top:6px solid #e9c357!important;
  background-image:linear-gradient(#ead6b4ee,#d3b184ee),url('assets/train-style/platform-tiles.jpg')!important;
}
.platform-edge span { top:6px!important; height:9px!important; }
.train-yard {
  background:linear-gradient(180deg,#ceb07f 0 6%,#8b6944 6% 14%,#654934 14% 100%)!important;
  border-top:0!important; padding:0 20px 14px!important;
}
.train-yard::after {
  content:""; position:absolute; left:0; right:0; top:-18px; height:22px;
  background:linear-gradient(180deg,#f4e0bc 0,#dcc094 100%); border-top:4px solid #d8b44b;
}
.rails { bottom:10px!important; height:56px!important; }
.rails::before,.rails::after { height:8px!important; }
.rails::before { top:8px!important; }
.rails::after { bottom:8px!important; }
.rails b { background:repeating-linear-gradient(90deg,transparent 0 38px,#604327 39px 54px,transparent 55px 73px)!important; }
.train { gap:0!important; justify-content:flex-end!important; }
.train-wagon { max-width:236px!important; height:clamp(150px,21vh,235px)!important; margin-right:-2px!important; }
.train-wagon::after {
  content:""; position:absolute; right:-8px; bottom:33px; width:16px; height:8px;
  background:#222; border-radius:6px; z-index:0; box-shadow:0 1px 0 #777;
}
.train-wagon:first-child::before {
  content:""; position:absolute; left:-8px; bottom:33px; width:16px; height:8px;
  background:#222; border-radius:6px; z-index:0; box-shadow:0 1px 0 #777;
}
.locomotive { flex-basis:clamp(220px,24vw,360px)!important; margin-left:-10px!important; }
.locomotive::before {
  content:""; position:absolute; left:-8px; bottom:34px; width:18px; height:8px; background:#222; border-radius:6px; z-index:0;
}
.steam-puff {
  top:-18%!important; z-index:2!important; font-size:clamp(1.7rem,4.2vmin,3.2rem)!important;
}
.steam-puff.p1{ right:20%!important; }
.steam-puff.p2{ right:14%!important; animation-delay:.45s!important; }
.steam-puff.p3{ right:8%!important; animation-delay:.85s!important; }
@keyframes steam { from{transform:translate(0,10px) scale(.52);opacity:.32} to{transform:translate(4px,-46px) scale(1.3);opacity:0} }
.wagon-shell { height:84%!important; }
.wagon-cargo {
  left:13%!important; right:13%!important; top:auto!important; bottom:29%!important;
  height:42%!important; align-items:flex-end!important; overflow:visible!important;
}
.wagon-photo-board {
  position:relative; width:74%; height:100%; display:flex; align-items:flex-end; justify-content:center;
  animation:cargo-pop .35s cubic-bezier(.2,.9,.3,1.25);
}
.board-stick {
  position:absolute; bottom:-8px; width:10px; height:24px; border-radius:6px; background:linear-gradient(#b78f57,#8e6639); box-shadow:0 1px 3px #0003;
}
.board-face {
  position:relative; width:100%; height:calc(100% - 16px); padding:5px; border:5px solid #ffe6a4; border-radius:14px;
  background:#fffef8; box-shadow:0 6px 12px #0003; overflow:hidden;
}
.board-face img { width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; }
.wagon-waiting-space { width:72%; height:48%; border-radius:12px; background:linear-gradient(180deg,#ffffff22,#ffffff08); }
.empty .wagon-waiting-space::after { content:""; display:block; width:100%; height:100%; border-radius:12px; border:2px dashed #fff7c4aa; }
.animal-cargo {
  position:relative; width:76%!important; height:100%!important; display:block!important;
  border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important;
}
.cargo-straw {
  position:absolute; left:4%; right:4%; bottom:8%; height:32%; border-radius:14px 14px 10px 10px;
  background:radial-gradient(circle at 20% 35%,#f7e493 0 9%,transparent 10%), radial-gradient(circle at 48% 50%,#ebd27c 0 8%,transparent 9%), radial-gradient(circle at 74% 42%,#f7e493 0 8%,transparent 9%), linear-gradient(180deg,#efd986,#d6b45e);
  box-shadow:0 5px 10px #0002;
}
.animal-cargo img {
  position:absolute; left:7%; right:7%; bottom:20%; width:86%!important; height:76%!important;
  object-fit:contain!important; object-position:center bottom!important;
}
.animal-name { display:none!important; }
.animal-sparkles { top:-4px!important; right:0!important; }
@media (max-width:900px) {
  .train-listen-stage { grid-template-rows:minmax(0,1fr) clamp(176px,28vh,236px)!important; }
  .station-scene { padding-top:108px!important; }
  .train-choices { gap:8px!important; }
  .train-choice,.train-choice-slot { min-height:110px!important; }
  .train-wagon { height:clamp(120px,19vh,176px)!important; }
  .locomotive { flex-basis:clamp(168px,26vw,250px)!important; }
}


/* v16 station refinement */
.train-listen-stage { grid-template-rows:minmax(0,1fr) clamp(214px,30vh,330px)!important; }
.station-scene {
  padding:clamp(132px,18vh,180px) clamp(22px,2vw,34px) clamp(28px,3.5vh,40px)!important;
  background:
    linear-gradient(180deg,#9ed6ff 0 20%, transparent 20% 100%),
    linear-gradient(180deg,transparent 0 48%, #f5e3bb 48% 80%, #d7ba8c 80% 100%)!important;
}
.station-scene::before {
  content:""; position:absolute; inset:auto 0 clamp(38px,5vh,52px) 0; height:calc(100% - clamp(170px,24vh,220px));
  background:
    linear-gradient(180deg, transparent 0 30%, rgba(255,255,255,.22) 30% 32%, transparent 32% 100%),
    repeating-linear-gradient(90deg, rgba(160,129,78,.13) 0 88px, rgba(255,255,255,.22) 88px 90px, rgba(160,129,78,.10) 90px 176px),
    linear-gradient(180deg,#fbf1d9,#eedbb9);
  z-index:0; pointer-events:none;
}
.station-canopy { height:clamp(124px,17vh,162px)!important; background-position:center 18%!important; }
.station-clock {
  top:18px!important; width:clamp(88px,10vmin,116px)!important; z-index:7!important;
}
.train-question {
  top:clamp(100px,14vh,142px)!important; min-width:min(480px,90vw); justify-content:center;
  background:#fff8eef0!important; border:4px solid #fff!important; box-shadow:0 10px 20px #00000022!important;
}
.train-question-word {
  min-width:clamp(190px,24vw,320px)!important; min-height:58px!important; border-radius:18px!important;
  font-size:clamp(1.06rem,2.6vmin,1.6rem)!important;
}
.train-speaker {
  width:clamp(52px,6.4vmin,70px)!important; height:clamp(52px,6.4vmin,70px)!important;
}
.speaker-glyph { width:66%; height:66%; display:block; }
.speaker-glyph path { fill:none; stroke:#0f5f72; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.train-choices {
  width:min(1320px,95%)!important; gap:clamp(12px,1vw,18px)!important; padding-top:clamp(22px,3vh,30px)!important;
  z-index:2!important;
}
.train-choice,.train-choice-slot { min-height:clamp(148px,20vh,205px)!important; }
.train-choice { background:transparent!important; border:0!important; box-shadow:none!important; padding:0 0 16px!important; }
.train-choice:hover { transform:translateY(-1px)!important; box-shadow:none!important; }
.platform-card-image {
  position:relative; display:block; width:100%; height:100%; border-radius:16px!important;
  background:#fffefb!important; border:5px solid #f7f1e4; box-shadow:0 10px 18px #00000017, inset 0 0 0 2px #eadfcb;
}
.platform-card-image::before {
  content:""; position:absolute; left:10px; right:10px; top:10px; bottom:10px;
  border-radius:10px; box-shadow:inset 0 0 0 1px #e5d3b8;
}
.train-choice img { padding:8px!important; object-fit:contain!important; }
.card-feet { bottom:-14px!important; width:11px!important; height:20px!important; background:#8a6a45!important; z-index:2!important; }
.train-choice-slot.used { background:transparent!important; border:0!important; box-shadow:none!important; }
.train-choice-slot.used::before {
  content:""; position:absolute; inset:10px 6px 18px; border-radius:16px;
  background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.02));
  border:3px dashed rgba(146,114,71,.25);
}
.train-choice-slot.used::after {
  content:""; position:absolute; left:16px; right:16px; bottom:8px; height:8px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(110,82,50,.22), rgba(110,82,50,0) 70%);
}
.platform-edge { height:clamp(44px,5.4vh,58px)!important; }
.train-yard {
  padding:0 24px 12px!important; background:linear-gradient(180deg,#ead7b5 0 11%, #7d5e41 11% 21%, #644733 21% 100%)!important;
}
.train-yard::after { top:-26px!important; height:30px!important; background:linear-gradient(180deg,#f3e2be 0,#dfc394 100%)!important; }
.rails { bottom:8px!important; height:60px!important; }
.train { width:min(1500px,98%)!important; gap:0!important; }
.train-wagon {
  max-width:248px!important; margin-right:-14px!important; z-index:2;
}
.train-wagon::after {
  right:-12px!important; bottom:34px!important; width:20px!important; height:10px!important; background:#1f1f1f!important; z-index:2!important;
}
.train-wagon:first-child::before {
  left:-12px!important; bottom:34px!important; width:20px!important; height:10px!important; background:#1f1f1f!important; z-index:2!important;
}
.locomotive { margin-left:-16px!important; }
.locomotive::before { left:-14px!important; bottom:35px!important; width:24px!important; height:10px!important; z-index:2!important; }
.steam-puff {
  top:-30%!important; z-index:5!important; font-size:clamp(2rem,4.5vmin,3.5rem)!important;
}
.steam-puff.p1{ right:16%!important; }
.steam-puff.p2{ right:11%!important; }
.steam-puff.p3{ right:6%!important; }
@keyframes steam { from{transform:translate(0,16px) scale(.52);opacity:.34} to{transform:translate(0,-62px) scale(1.45);opacity:0} }
.wagon-shell { z-index:3!important; height:86%!important; }
.wagon-cargo {
  left:16%!important; right:16%!important; bottom:30%!important; height:46%!important; z-index:2!important;
}
.wagon-photo-board { width:76%!important; height:100%!important; }
.board-stick { bottom:-2px!important; height:18px!important; }
.board-face { border:5px solid #ffe8ad!important; box-shadow:0 5px 9px #00000026!important; }
.wagon-waiting-space { width:74%!important; height:44%!important; }
.animal-cargo {
  width:78%!important; height:100%!important; z-index:2!important;
}
.cargo-straw { left:2%!important; right:2%!important; bottom:6%!important; height:28%!important; }
.animal-cargo img {
  left:8%!important; right:8%!important; bottom:10%!important; width:84%!important; height:72%!important;
}
@media (max-width: 900px) {
  .station-scene { padding-top:120px!important; }
  .train-question { top:100px!important; }
  .train-choice,.train-choice-slot { min-height:118px!important; }
  .train-wagon { margin-right:-10px!important; }
}


/* v17 — coherent station, in-wagon cargo, connected train */
.train-listen-stage{
  grid-template-rows:minmax(0,1fr) clamp(210px,30vh,325px)!important;
  gap:0!important;
  background:#d9efff;
}
.station-scene{
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:clamp(142px,19vh,188px) clamp(24px,2.2vw,38px) clamp(50px,6vh,68px)!important;
  background:
    linear-gradient(180deg,rgba(160,216,255,.08) 0 33%,rgba(255,255,255,0) 33%),
    linear-gradient(180deg,#f8eed8 0 70%,#dfc79e 70% 100%)!important;
}
.station-canopy{
  position:absolute!important; z-index:3!important; left:0!important; right:0!important; top:0!important;
  height:clamp(132px,18vh,176px)!important;
  background-image:url('assets/train-style/station-canopy.jpg')!important;
  background-size:cover!important; background-position:center top!important;
  border-bottom:7px solid #e5b747!important;
  box-shadow:0 7px 18px #4c361f35!important;
}
.station-clock{
  position:absolute!important; z-index:10!important; left:50%!important; top:10px!important;
  width:clamp(102px,11vmin,136px)!important; aspect-ratio:1!important;
  transform:translateX(-50%)!important;
  border:8px solid #e3ae38!important; border-radius:50%!important;
  background:#fff8dd!important; box-shadow:0 6px 13px #0003!important;
}
.station-clock::before{content:""!important;position:absolute!important;inset:10px!important;border:3px solid #295b5c!important;border-radius:50%!important;}
.station-clock i,.station-clock b{position:absolute!important;left:50%!important;top:50%!important;width:4px!important;border-radius:4px!important;background:#3c2c21!important;transform-origin:50% 0!important;}
.station-clock i{height:28%!important;transform:rotate(0deg)!important;}
.station-clock b{height:36%!important;transform:rotate(112deg)!important;}
.train-question{
  position:absolute!important; z-index:12!important; left:clamp(22px,3vw,48px)!important; right:auto!important; top:clamp(42px,6vh,58px)!important;
  transform:none!important; min-width:0!important; max-width:min(420px,42vw)!important; min-height:62px!important;
  padding:7px 10px!important; display:flex!important; gap:8px!important; align-items:center!important;
  border:5px solid #e5b747!important; border-radius:18px!important;
  background:#fff9e9f5!important; box-shadow:0 8px 16px #0002!important;
}
.train-question-word{
  min-width:clamp(150px,18vw,250px)!important; min-height:50px!important; padding:6px 12px!important;
  border:0!important; border-radius:12px!important; background:transparent!important; box-shadow:none!important;
  font-size:clamp(1rem,2.2vmin,1.45rem)!important;
}
.train-speaker{
  flex:0 0 auto!important; width:48px!important; height:48px!important; padding:7px!important;
  border:3px solid #f4c848!important; border-radius:12px!important;
  background:#17859a!important; box-shadow:inset 0 0 0 2px #ffffff33,0 3px 7px #0002!important;
}
.speaker-glyph{width:100%!important;height:100%!important;display:block!important;}
.speaker-glyph path{fill:none!important;stroke:#fff8d8!important;stroke-width:5!important;stroke-linecap:round!important;stroke-linejoin:round!important;}

/* The cards stand in two clear rows on the station platform. Used places become actual empty platform. */
.train-choices{
  position:relative!important; z-index:2!important; width:min(1380px,96%)!important; height:100%!important; margin:0 auto!important;
  display:grid!important; grid-template-columns:repeat(var(--choice-cols),minmax(0,1fr))!important; grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(8px,.72vw,12px)!important; padding:0!important; align-items:end!important;
}
.train-choice,.train-choice-slot{position:relative!important;min-width:0!important;min-height:0!important;height:100%!important;}
.train-choice{
  padding:0 0 16px!important; border:0!important; background:transparent!important; box-shadow:none!important;
  display:block!important; overflow:visible!important; cursor:pointer!important;
}
.platform-card-image{
  position:absolute!important; left:0!important; right:0!important; top:0!important; bottom:18px!important;
  display:block!important; overflow:hidden!important; border:5px solid #fff!important; border-radius:16px!important;
  background:#fff!important; box-shadow:0 9px 16px #59442624!important;
}
.platform-card-image::before{display:none!important;}
.train-choice img{width:100%!important;height:100%!important;padding:4px!important;object-fit:contain!important;border-radius:10px!important;display:block!important;}
.train-choice .word-label{display:none!important;}
.card-feet{position:absolute!important;bottom:0!important;width:10px!important;height:21px!important;border-radius:4px!important;background:#80603d!important;}
.card-feet.left{left:28%!important}.card-feet.right{right:28%!important}
.train-choice-slot.used{background:transparent!important;border:0!important;box-shadow:none!important;}
.train-choice-slot.used::before,.train-choice-slot.used::after{display:none!important;content:none!important;}
/* More of the tiled platform becomes visible when a photo board disappears. */
.station-scene::before{
  content:""!important; position:absolute!important; z-index:0!important; left:0!important; right:0!important; bottom:0!important;
  height:calc(100% - clamp(132px,18vh,176px))!important;
  background:
    repeating-linear-gradient(90deg,rgba(118,90,54,.10) 0 88px,rgba(255,255,255,.35) 88px 91px,rgba(118,90,54,.08) 91px 178px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.18) 0 58px,rgba(138,105,63,.12) 59px 61px),
    linear-gradient(180deg,#f7ecd2,#e5cda4)!important;
  pointer-events:none!important;
}
.platform-edge{
  position:absolute!important; z-index:4!important; left:0!important; right:0!important; bottom:0!important;
  height:clamp(48px,5.6vh,62px)!important; border-top:6px solid #f0cc48!important;
  background:linear-gradient(180deg,#e4c99d 0 58%,#c19d69 58% 100%)!important;
  box-shadow:0 -5px 12px #0001!important;
}
.platform-edge::before{
  content:"";position:absolute;left:0;right:0;top:5px;height:10px;
  background:repeating-linear-gradient(90deg,#f7dc58 0 25px,#f7dc58 25px 40px,#fff3b7 40px 52px);
}

/* Track bed and a single connected train. */
.train-yard{
  position:relative!important; min-height:0!important; overflow:hidden!important; padding:0 18px 10px!important;
  background:linear-gradient(180deg,#8a6849 0 18%,#654932 18% 100%)!important;
  border-top:6px solid #b08a5d!important; box-shadow:inset 0 10px 18px #0002!important;
}
.train-yard::before{
  content:""!important;position:absolute!important;left:0!important;right:0!important;top:0!important;height:26px!important;
  background:linear-gradient(180deg,#dec398,#c5a471)!important;border-bottom:3px solid #9a7449!important;
}
.train-yard::after{display:none!important;content:none!important;}
.rails{position:absolute!important;z-index:1!important;left:0!important;right:0!important;bottom:4px!important;height:66px!important;}
.rails::before,.rails::after{content:""!important;position:absolute!important;left:0!important;right:0!important;height:8px!important;border-radius:4px!important;background:linear-gradient(#343434,#161616)!important;box-shadow:0 2px 0 #777!important;}
.rails::before{top:10px!important}.rails::after{bottom:10px!important}
.rails b{position:absolute!important;inset:0!important;background:repeating-linear-gradient(90deg,transparent 0 36px,#4f3926 37px 52px,transparent 53px 71px)!important;}
.train{
  position:relative!important; z-index:3!important; width:min(1510px,99%)!important; height:100%!important; margin:0 auto!important;
  display:flex!important; flex-direction:row!important; align-items:flex-end!important; justify-content:flex-end!important; gap:0!important;
  padding:0 0 12px!important;
}
.train.arriving{animation:train-arrive-v17 1.15s cubic-bezier(.16,.75,.28,1) both!important;}
.train.departing{animation:train-depart-v17 1.22s cubic-bezier(.58,.06,.9,.44) both!important;}
@keyframes train-arrive-v17{from{transform:translateX(-120vw)}75%{transform:translateX(1.2%)}to{transform:translateX(0)}}
@keyframes train-depart-v17{from{transform:translateX(0)}to{transform:translateX(120vw)}}
.train-wagon{
  position:relative!important; flex:0 1 clamp(168px,15.5vw,235px)!important; width:clamp(168px,15.5vw,235px)!important; max-width:235px!important;
  height:clamp(150px,21vh,232px)!important; margin-right:-28px!important; padding:0!important; overflow:visible!important;
}
.wagon-shell{position:absolute!important;z-index:5!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:84%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 6px 5px #0004)!important;}
.wagon-coupler,.loco-coupler{
  position:absolute!important;z-index:2!important;bottom:34px!important;height:10px!important;background:#202020!important;border-radius:6px!important;box-shadow:inset 0 2px 0 #666,0 2px 2px #0005!important;
}
.left-coupler{left:-16px!important;width:28px!important}.right-coupler{right:-16px!important;width:28px!important}
.locomotive{
  position:relative!important;order:99!important;flex:0 0 clamp(225px,24vw,355px)!important;height:clamp(165px,23vh,252px)!important;
  margin-left:-24px!important;padding:0!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;overflow:visible!important;
}
.locomotive>img{position:relative!important;z-index:4!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 8px 7px #0005)!important;}
.loco-coupler{left:-18px!important;width:30px!important;z-index:2!important;}
.train-wagon::before,.train-wagon::after,.locomotive::before{display:none!important;content:none!important;}

/* Photo boards and animals are cargo INSIDE the open wagon: the wagon front sits in front of them. */
.wagon-cargo{
  position:absolute!important; z-index:3!important; left:13%!important; right:13%!important; bottom:27%!important; height:58%!important;
  display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:hidden!important;
  border-radius:18px 18px 5px 5px!important;
}
.wagon-photo-board{
  position:relative!important;width:78%!important;height:92%!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;
  transform:translateY(11%)!important;animation:cargo-pop .35s cubic-bezier(.2,.9,.3,1.25)!important;
}
.board-stick{position:absolute!important;bottom:-4px!important;width:9px!important;height:25px!important;border-radius:5px!important;background:#8e6639!important;}
.board-face{
  position:relative!important;width:100%!important;height:calc(100% - 8px)!important;padding:4px!important;border:4px solid #ffe9aa!important;border-radius:13px!important;
  background:#fffef9!important;box-shadow:0 5px 9px #0003!important;overflow:hidden!important;
}
.board-face img{width:100%!important;height:100%!important;object-fit:contain!important;border-radius:8px!important;display:block!important;}
.wagon-waiting-space{display:none!important;}
.animal-wagon .animal-cargo{
  position:absolute!important;z-index:3!important;left:12%!important;right:12%!important;bottom:26%!important;height:62%!important;width:auto!important;
  overflow:hidden!important;border-radius:22px 22px 8px 8px!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.cargo-straw{
  position:absolute!important;z-index:1!important;left:3%!important;right:3%!important;bottom:0!important;height:34%!important;border-radius:50% 50% 12px 12px!important;
  background:radial-gradient(circle at 18% 45%,#f6e493 0 8%,transparent 9%),radial-gradient(circle at 48% 54%,#e6c86e 0 8%,transparent 9%),radial-gradient(circle at 78% 44%,#f3de85 0 8%,transparent 9%),linear-gradient(180deg,#efd984,#d2ad55)!important;
}
.animal-cargo img{
  position:absolute!important;z-index:2!important;left:7%!important;right:7%!important;bottom:-5%!important;width:86%!important;height:104%!important;
  object-fit:cover!important;object-position:center top!important;border:0!important;border-radius:46% 46% 12% 12%!important;box-shadow:none!important;
}
.animal-sparkles{position:absolute!important;z-index:4!important;right:5%!important;top:2%!important;color:#ffe467!important;text-shadow:0 2px 4px #6f4a00!important;}
/* Wagon shell must be the visible foreground rail, hiding the lower part of cargo. */
.word-wagon .wagon-shell,.animal-wagon .wagon-shell{z-index:5!important;}

/* Steam comes from the locomotive chimney, not from track level. */
.steam-puff{
  position:absolute!important;z-index:7!important;top:-17%!important;right:8.2%!important;margin:0!important;
  font-size:clamp(1.9rem,4.3vmin,3.5rem)!important;line-height:1!important;pointer-events:none!important;
  filter:drop-shadow(0 3px 2px #0002)!important;animation:steam-v17 1.35s ease-out infinite!important;
}
.steam-puff.p1{right:8.5%!important;animation-delay:0s!important}.steam-puff.p2{right:7.5%!important;animation-delay:.42s!important}.steam-puff.p3{right:9.5%!important;animation-delay:.84s!important}
@keyframes steam-v17{0%{transform:translate(0,12px) scale(.45);opacity:.15}30%{opacity:.7}100%{transform:translate(-10px,-58px) scale(1.45);opacity:0}}

@media(max-width:900px){
  .train-listen-stage{grid-template-rows:minmax(0,1fr) clamp(180px,29vh,242px)!important;}
  .station-scene{padding:118px 12px 48px!important;}
  .station-canopy{height:116px!important;}
  .station-clock{width:88px!important;top:8px!important;}
  .train-question{left:12px!important;top:58px!important;max-width:46vw!important;min-height:50px!important;}
  .train-question-word{min-width:110px!important;font-size:.9rem!important;}
  .train-speaker{width:40px!important;height:40px!important;}
  .train-choices{gap:6px!important;width:98%!important;}
  .train-wagon{width:clamp(112px,16vw,155px)!important;flex-basis:clamp(112px,16vw,155px)!important;margin-right:-20px!important;height:160px!important;}
  .locomotive{flex-basis:clamp(160px,24vw,230px)!important;height:175px!important;margin-left:-18px!important;}
}


/* v18 — wagon floor alignment + clearer station facade */
.station-scene{
  padding-top:clamp(178px,23vh,220px)!important;
  background:#f4e6c7!important;
}
.station-canopy{
  height:clamp(170px,22vh,212px)!important;
  background-size:100% 100%!important;
  background-position:center top!important;
  border-bottom:8px solid #dcae3e!important;
}
/* Complete station facade remains behind the waiting boards and is revealed as boards disappear. */
.station-scene::before{
  content:""!important;
  position:absolute!important;z-index:0!important;left:0!important;right:0!important;
  top:clamp(170px,22vh,212px)!important;bottom:0!important;height:auto!important;
  background:
    linear-gradient(90deg,transparent 0 4.2%,#2f7774 4.2% 5.2%,transparent 5.2% 17.6%,#2f7774 17.6% 18.6%,transparent 18.6% 31%,#2f7774 31% 32%,transparent 32% 44.4%,#2f7774 44.4% 45.4%,transparent 45.4% 57.8%,#2f7774 57.8% 58.8%,transparent 58.8% 71.2%,#2f7774 71.2% 72.2%,transparent 72.2% 84.6%,#2f7774 84.6% 85.6%,transparent 85.6% 100%),
    repeating-linear-gradient(0deg,rgba(153,117,69,.10) 0 54px,rgba(255,255,255,.48) 55px 57px),
    linear-gradient(180deg,#f7edd9 0 73%,#e4cca4 73% 100%)!important;
  border-top:4px solid #c79b3c!important;
  box-shadow:inset 0 8px 14px #8d6c3b17!important;
  pointer-events:none!important;
}
.station-scene::after{
  content:""!important;position:absolute!important;z-index:1!important;left:0!important;right:0!important;
  top:clamp(170px,22vh,212px)!important;height:68px!important;pointer-events:none!important;
  background:
    radial-gradient(ellipse 10% 68px at 10% 68px,transparent 0 56%,#d7ad58 58% 63%,transparent 65%) 0 0/20% 68px repeat-x!important;
  opacity:.72!important;
}
.train-choices{z-index:2!important;}
.platform-edge{z-index:4!important;}
/* Raise each photo board so its lower edge meets the wagon floor line above the wheels. */
.wagon-cargo{
  bottom:31%!important;
  height:61%!important;
}
.wagon-photo-board{
  height:94%!important;
  transform:translateY(-4%)!important;
}
.board-stick{bottom:-2px!important;height:21px!important;}
@media(max-width:900px){
  .station-scene{padding-top:142px!important;}
  .station-canopy{height:136px!important;}
  .station-scene::before{top:136px!important;}
  .station-scene::after{top:136px!important;}
}


/* v18b — thin framed photo boards, slightly higher in wagons */
.wagon-photo-board{
  width:80%!important;
  height:96%!important;
  transform:translateY(-10%)!important;
}
.board-face{
  width:100%!important;
  height:calc(100% - 5px)!important;
  padding:2px!important;
  border:2px solid #f4d98a!important;
  border-radius:8px!important;
  background:#fffef9!important;
  box-shadow:0 4px 8px #0002!important;
}
.board-face img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  border-radius:5px!important;
  display:block!important;
}
.board-stick{
  bottom:-1px!important;
  width:7px!important;
  height:18px!important;
  border-radius:4px!important;
}
.wagon-cargo{
  bottom:34%!important;
  height:62%!important;
}



/* --- themed games v19 --- */
.memory-scene.museum-scene { position:relative; min-height:0; overflow:hidden; padding:clamp(10px,1.4vw,18px); border-radius:26px; background:radial-gradient(circle at 50% 10%,#f2ddae 0 12%,transparent 13%), linear-gradient(180deg,#6a4b36 0 16%,#8b6548 16% 21%,#cbb08c 21% 100%); box-shadow:inset 0 0 0 6px #ffffff55; }
.museum-memory { position:relative; z-index:2; height:100%; padding:clamp(18px,2.2vw,28px) clamp(12px,1.5vw,18px) clamp(10px,1vw,16px); }
.museum-banner { position:absolute; top:20px; width:72px; height:170px; background:linear-gradient(180deg,#7c4aa2,#5d337f); border:4px solid #dab860; border-bottom-left-radius:18px; border-bottom-right-radius:18px; z-index:1; }
.museum-banner.left{ left:24px; } .museum-banner.right{ right:24px; }
.museum-display { position:absolute; bottom:18px; width:90px; height:120px; border-radius:16px; background:linear-gradient(180deg,#b98f63,#8a6342); box-shadow:inset 0 0 0 5px #ebd5b5; display:grid; place-items:center; z-index:1; }
.museum-display.left{ left:20px; } .museum-display.right{ right:20px; }
.museum-display span { font-size:2.4rem; filter:drop-shadow(0 3px 3px rgba(0,0,0,.2)); }
.museum-memory .memory-card .back { background:linear-gradient(180deg,#8d643e,#6b482d); border-color:#f0d69d; }
.museum-memory .memory-card .back span { border-radius:18px; border:3px solid #f8e5bc; width:54%; height:54%; background:linear-gradient(180deg,#cda64d,#9a7422); }
.museum-memory .memory-card .front { background:#fff9ee; border-color:#e5c57c; }
.museum-memory .memory-card.matched .face { box-shadow:0 0 0 4px #48ad64,0 5px 13px #4c372d35,inset 0 0 0 4px #fff3; }

.detective-check { position:relative; overflow:hidden; padding:clamp(10px,1.2vw,16px); border-radius:24px; background:linear-gradient(180deg,#3b4f2e 0,#27453a 100%); }
.detective-check::before { content:""; position:absolute; right:6%; top:10%; width:24%; height:32%; border-radius:12px; background:rgba(244,225,183,.16); box-shadow:0 0 0 3px rgba(244,225,183,.18); transform:rotate(-4deg); }
.detective-decor .route { position:absolute; right:12%; top:15%; width:18%; height:18%; border:4px dashed #b46752; border-color:#b46752 transparent transparent #b46752; border-radius:50% 0 0 0; opacity:.7; }
.detective-decor .pin { position:absolute; left:36%; top:11%; width:18px; height:18px; border-radius:50%; background:#d84f46; box-shadow:0 0 0 4px #f7dacd; z-index:3; }
.detective-check .check-picture { background:#fff8e9; border-color:#f0d69d; transform:rotate(-1deg); }
.detective-check .question-bubble.detective { background:#c48d2e; font-size:clamp(1.8rem,4vmin,3rem); }
.detective-panel { background:#f4e8c8; border-color:#e6cf98; grid-template-rows:auto auto minmax(0,1fr); }
.detective-note { padding:12px 10px; border-radius:18px; background:#fff9ea; box-shadow:inset 0 0 0 3px #ead6ad; text-align:center; }
.detective-note p { margin:0; font:800 clamp(1rem,2.6vmin,1.7rem)/1.15 Arial,sans-serif; color:#18345a; }
.detective-note small { display:block; margin-top:6px; font:700 clamp(.72rem,1.5vmin,.95rem)/1 Arial,sans-serif; color:#7c6048; }

.space-remember { position:relative; overflow:hidden; border-radius:28px; background:linear-gradient(180deg,#042b68 0,#08153b 52%,#d9dde6 53%,#ced3dc 100%); }
.space-sky { position:absolute; inset:0 0 auto 0; height:52%; pointer-events:none; }
.space-sky .planet { position:absolute; border-radius:50%; opacity:.95; }
.space-sky .earth { left:3%; top:6%; width:64px; height:64px; background:radial-gradient(circle at 30% 30%,#93d1ff,#4b7bbb 70%); }
.space-sky .purple { right:4%; top:8%; width:70px; height:70px; background:radial-gradient(circle at 35% 35%,#cbb4f4,#8962c8 72%); }
.space-sky .purple::after { content:""; position:absolute; inset:30px -10px auto -10px; height:10px; border:2px solid #dccdff; border-radius:50%; }
.space-sky .star { position:absolute; width:8px; height:8px; background:#fff4a8; transform:rotate(45deg); box-shadow:0 0 12px #fff4a8; }
.space-sky .s1{ left:20%; top:18%; } .space-sky .s2{ left:62%; top:10%; } .space-sky .s3{ left:78%; top:22%; }
.space-launchpad { position:relative; z-index:2; width:100%; height:100%; min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr); align-content:center; gap:clamp(12px,1.5vw,20px); padding:clamp(18px,2vw,28px); }
.rocket-row { display:grid; grid-template-columns:repeat(var(--remember-count,4),minmax(0,1fr)); gap:clamp(8px,1vw,14px); align-items:end; }
.rocket-row.show { grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); }
.space-rocket { position:relative; display:grid; place-items:end center; min-height:200px; }
.rocket-number { position:absolute; top:0; font:800 clamp(1.4rem,4vmin,2.6rem)/1 Arial,sans-serif; color:#fff; }
.rocket-body { position:relative; width:min(100%,120px); height:160px; border-radius:60px 60px 18px 18px; background:linear-gradient(180deg,#ffffff 0,#f0f0f5 55%,#b9c0cb 100%); box-shadow:0 10px 20px rgba(0,0,0,.22), inset 0 0 0 4px #fff8; }
.rocket-body::before { content:""; position:absolute; inset:-12px 18px auto; height:30px; border-radius:999px 999px 10px 10px; background:var(--rocket-color,#ef6f53); }
.space-rocket:nth-child(1){ --rocket-color:#ef6f53; } .space-rocket:nth-child(2){ --rocket-color:#4f91f0; } .space-rocket:nth-child(3){ --rocket-color:#86c93e; } .space-rocket:nth-child(4){ --rocket-color:#f2c63f; }
.rocket-body::after { content:""; position:absolute; left:50%; bottom:-2px; transform:translateX(-50%); width:42px; height:18px; border-radius:0 0 16px 16px; background:#7e8896; }
.space-rocket .rocket-window { position:absolute; left:50%; top:34px; transform:translateX(-50%); width:62px; height:62px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 6px #c3c8d1, 0 5px 10px rgba(0,0,0,.18); overflow:hidden; display:grid; place-items:center; }
.space-rocket .rocket-window img { width:90%; height:90%; object-fit:contain; }
.space-rocket .rocket-body .rocket-window:empty::after { content:""; width:0; height:0; }
.space-rocket .rocket-body .rocket-window:empty { background:#eef1f6; }
.space-rocket .rocket-body .rocket-window:empty::before { content:""; position:absolute; inset:auto 0 0 0; }
.space-rocket .rocket-body .rocket-window + * { }
.space-rocket .rocket-body .rocket-window:empty::after { content:""; position:absolute; }
.space-rocket .rocket-body > .rocket-window { }
.space-rocket .rocket-body { }
.space-rocket .rocket-body { }
.space-rocket .rocket-body { }
.space-rocket .rocket-body { }
.space-rocket::before, .space-rocket::after { content:""; position:absolute; bottom:28px; width:26px; height:52px; background:var(--rocket-color,#ef6f53); }
.space-rocket::before { left:calc(50% - 56px); border-radius:18px 0 18px 18px; transform:skewY(18deg); }
.space-rocket::after { right:calc(50% - 56px); border-radius:0 18px 18px 18px; transform:skewY(-18deg); }
.space-rocket.active .rocket-body { box-shadow:0 0 0 6px rgba(255,212,105,.35),0 10px 22px rgba(0,0,0,.24); transform:translateY(-6px); }
.space-rocket.filled .rocket-body { box-shadow:0 0 0 4px rgba(92,201,119,.35),0 10px 22px rgba(0,0,0,.24); }
.remember-space-instruction { align-self:center; justify-self:start; margin-left:8px; padding:14px 18px; border-radius:20px; background:#ffffffea; box-shadow:0 10px 22px rgba(0,0,0,.18); color:#173763; }
.remember-space-instruction strong { display:block; font:800 clamp(1rem,2.6vmin,1.5rem)/1.1 Arial,sans-serif; }
.remember-space-instruction span { display:block; margin-top:6px; font:700 clamp(.78rem,1.6vmin,.98rem)/1.2 Arial,sans-serif; }
.space-options { align-self:end; }
.space-options button { background:#fff; border-color:#dbe1eb; }
.space-options button img { object-fit:contain; }

.magic-missing { position:relative; overflow:hidden; padding:clamp(18px,2vw,24px) clamp(20px,1.8vw,28px) clamp(12px,1vw,18px); border-radius:28px; background:linear-gradient(180deg,#6c1731 0,#4f214d 30%,#311b52 65%,#7a4a28 66%,#8d5a31 100%); }
.magic-curtain { position:absolute; top:0; width:15%; height:44%; background:linear-gradient(90deg,#9f1b2f,#c72a3f 45%,#8f1227); z-index:0; }
.magic-curtain.left{ left:0; border-bottom-right-radius:36px; } .magic-curtain.right{ right:0; border-bottom-left-radius:36px; }
.magic-arch { position:absolute; left:8%; right:8%; top:10px; height:32%; border:8px solid #c98c43; border-bottom:none; border-radius:90px 90px 0 0; box-shadow:0 0 0 12px rgba(255,214,128,.12); }
.magic-missing .missing-table, .magic-missing .missing-bottom { position:relative; z-index:2; }
.magic-missing .missing-table { margin-top:clamp(34px,6vmin,64px); }
.magic-missing .missing-card { background:#fffaf2; border-color:#f3e0ba; }
.magic-missing .missing-card.empty { background:#f8ecff; border-color:#d498d2; }
.magic-missing .missing-bottom { align-items:center; }

.studio-say { position:relative; overflow:hidden; padding:clamp(12px,1.4vw,18px); border-radius:26px; background:radial-gradient(circle at 50% 100%,#f4dcb7 0,#d6b79e 14%,transparent 15%), linear-gradient(180deg,#17204b 0,#231858 48%,#28396c 100%); }
.studio-say::before { content:""; position:absolute; inset:12px 12px auto auto; width:22%; height:34%; background:radial-gradient(circle,#fff6aa 0 2px,transparent 3px) 0 0/26px 26px; opacity:.18; }
.studio-screen-wrap { min-height:0; display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:10px; }
.studio-onair { justify-self:start; padding:8px 14px; border-radius:12px; background:#d64747; color:#fff; text-transform:uppercase; font:800 clamp(.75rem,1.6vmin,1rem)/1 Arial,sans-serif; box-shadow:0 6px 14px rgba(0,0,0,.22); }
.studio-screen.say-picture { border-color:#5072d9; background:#fefefe; box-shadow:0 0 0 8px rgba(255,255,255,.08),0 14px 30px rgba(0,0,0,.28); }
.studio-screen.say-picture::before { content:""; position:absolute; left:-8px; right:-8px; top:-10px; height:14px; background:radial-gradient(circle,#fff7ba 0 3px,transparent 4px) 0 0/42px 14px; }
.studio-mic { justify-self:center; width:72px; height:72px; border-radius:50% 50% 40% 40%; background:radial-gradient(circle at 35% 30%,#fafafa,#a3a9b4 72%); box-shadow:inset 0 0 0 6px #e7eaf0,0 8px 16px rgba(0,0,0,.25); position:relative; }
.studio-mic::before { content:""; position:absolute; left:50%; top:64px; transform:translateX(-50%); width:10px; height:34px; background:#7d8898; border-radius:10px; }
.studio-mic::after { content:""; position:absolute; left:50%; top:94px; transform:translateX(-50%); width:52px; height:8px; background:#7d8898; border-radius:8px; }
.studio-panel { background:#fff8f1; border-color:#90b1ff; }
.say-caption-bubble { margin-top:8px; padding:12px 14px; border-radius:18px; background:#eef5ff; color:#1f4f95; font:800 clamp(.88rem,1.8vmin,1.15rem)/1.2 Arial,sans-serif; text-align:center; }

@media (max-width: 900px) {
  .memory-scene.museum-scene { padding-inline:8px; }
  .museum-banner, .museum-display { display:none; }
  .rocket-row.show, .rocket-row.recall { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .space-rocket { min-height:170px; }
  .rocket-body { width:min(100%,104px); height:142px; }
  .magic-curtain { width:18%; }
}


/* v20 memory refinement */
.memory-scene.museum-scene {
  position:relative;
  min-height:0;
  overflow:hidden;
  padding:clamp(6px,.8vw,10px);
  border-radius:26px;
  background:
    linear-gradient(180deg,#6f513d 0 14%,#8d6a4f 14% 18%,#ead7b5 18% 79%,#d4b38b 79% 82%,#a87a53 82% 100%);
  box-shadow:inset 0 0 0 5px #ffffff45;
}
.museum-corner {
  position:absolute;
  top:10px;
  width:56px;
  height:56px;
  border:5px solid #d8b46b;
  border-bottom:none;
  opacity:.55;
  pointer-events:none;
}
.museum-corner.left { left:12px; border-right:none; border-radius:18px 0 0 0; }
.museum-corner.right { right:12px; border-left:none; border-radius:0 18px 0 0; }
.museum-memory.memory-board {
  position:relative;
  z-index:2;
  height:100%;
  padding:clamp(10px,1vw,14px) clamp(6px,.7vw,10px) clamp(8px,.8vw,12px);
  gap:clamp(3px,.45vw,6px);
}
.museum-memory .memory-card {
  border-radius:14px;
}
.museum-memory .memory-card .face {
  border-radius:14px;
}
.museum-memory .memory-card .back {
  background:linear-gradient(180deg,#926743 0,#785334 100%);
  border:3px solid #efdaa6;
  box-shadow:0 4px 10px rgba(76,55,45,.16), inset 0 0 0 2px rgba(255,255,255,.18);
}
.museum-memory .memory-card .back::before {
  content:"";
  position:absolute;
  inset:8px;
  border-radius:11px;
  border:2px solid rgba(255,244,213,.42);
}
.museum-memory .memory-card .back span {
  border-radius:16px;
  border:2px solid #f8e5bc;
  width:48%;
  height:48%;
  background:linear-gradient(180deg,#cda64d,#9a7422);
}
.museum-memory .memory-card .front {
  background:#fffaf1;
  border:3px solid #e3c37d;
  box-shadow:0 4px 10px rgba(76,55,45,.12), inset 0 0 0 2px rgba(255,255,255,.18);
}
.museum-memory .memory-card .front img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.museum-memory .memory-card .front .word-label {
  background:rgba(255,252,246,.95);
}
.museum-memory .memory-card.matched::after {
  content:"✓";
  position:absolute;
  top:6px;
  right:6px;
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#4fb06a;
  color:#fff;
  font:900 0.95rem/1 Arial,sans-serif;
  box-shadow:0 3px 8px rgba(0,0,0,.18);
  z-index:5;
}
.museum-memory .memory-card.matched .face {
  box-shadow:0 0 0 2px rgba(79,176,106,.95), 0 5px 13px rgba(76,55,45,.18), inset 0 0 0 3px rgba(255,255,255,.28);
}
.museum-memory .memory-card.open .front {
  transform:translateY(-1px);
}
@media (max-width: 900px) {
  .memory-scene.museum-scene { padding:6px; }
  .museum-corner { display:none; }
  .museum-memory.memory-board { padding:8px 4px 6px; gap:4px; }
}

/* v21: preserve cluster identity on memory backs */
.museum-memory .memory-card .back {
  background:
    radial-gradient(circle at 20% 22%,#ffffff2f 0 7%,transparent 8%),
    linear-gradient(145deg,var(--cluster),var(--cluster-dark))!important;
  border-color:color-mix(in srgb,var(--cluster) 55%,#f3dfae)!important;
}
.museum-memory .memory-card .back span {
  background:color-mix(in srgb,var(--cluster) 78%,#d7b45a)!important;
  border-color:#fff6d8!important;
}


/* v22 — luister en kies restored: clear photo cards + prettier station */
.train-listen-game .station-scene{
  position:relative!important;
  padding:clamp(198px,25vh,236px) 16px clamp(20px,2.3vh,30px)!important;
  background:linear-gradient(180deg,#a7d8ff 0 12%,#d9efff 12% 20%,#f6e7c6 20% 100%)!important;
  overflow:hidden!important;
}
.train-listen-game .station-canopy{
  position:absolute!important; left:0!important; right:0!important; top:0!important;
  height:clamp(188px,24vh,226px)!important;
  background-image:url('assets/train-style/station-pretty.jpg')!important;
  background-size:cover!important;
  background-position:center top!important;
  border-bottom:6px solid #d6a640!important;
  box-shadow:0 4px 12px rgba(0,0,0,.10)!important;
}
.train-listen-game .station-canopy::after{
  content:""!important; position:absolute!important; left:0!important; right:0!important; bottom:-1px!important; height:12px!important;
  background:linear-gradient(180deg,#e9c863 0,#cc9b33 100%)!important;
}
.train-listen-game .station-scene::before{
  content:""!important;
  position:absolute!important; left:0!important; right:0!important; top:clamp(188px,24vh,226px)!important; bottom:0!important;
  z-index:0!important;
  background:
   repeating-linear-gradient(90deg,transparent 0 4.3%, #2d7978 4.3% 5.2%, transparent 5.2% 17.6%, #2d7978 17.6% 18.5%, transparent 18.5% 31%, #2d7978 31% 31.9%, transparent 31.9% 44.2%, #2d7978 44.2% 45.1%, transparent 45.1% 57.4%, #2d7978 57.4% 58.3%, transparent 58.3% 70.6%, #2d7978 70.6% 71.5%, transparent 71.5% 83.8%, #2d7978 83.8% 84.7%, transparent 84.7% 100%),
   repeating-linear-gradient(0deg, rgba(255,255,255,.62) 0 2px, transparent 2px 53px),
   linear-gradient(180deg,#f7edd8 0 72%,#e2c89e 72% 100%)!important;
  border-top:3px solid #c49534!important;
}
.train-listen-game .station-scene::after{
  content:""!important; position:absolute!important; left:0!important; right:0!important; bottom:0!important; height:clamp(58px,6.3vh,74px)!important;
  z-index:1!important;
  background:
    linear-gradient(180deg,#ead0a3 0 30%, #d0af7d 30% 100%),
    repeating-linear-gradient(90deg,#f5dc5b 0 24px,#fff0ad 24px 34px,#f5dc5b 34px 50px);
  border-top:5px solid #f2cd42!important;
  box-shadow:0 -4px 0 rgba(255,255,255,.33) inset!important;
}
.train-listen-game .station-clock{
  z-index:4!important; width:clamp(112px,14vmin,144px)!important; aspect-ratio:1!important; top:10px!important;
  background:#fff7dc!important; border:8px solid #e0b43c!important; box-shadow:0 8px 16px rgba(0,0,0,.12)!important;
}
.train-listen-game .train-question{
  position:absolute!important; left:18px!important; top:56px!important; z-index:5!important;
  display:flex!important; align-items:center!important; gap:10px!important; justify-content:flex-start!important;
  max-width:min(620px,64%)!important; min-height:68px!important;
}
.train-listen-game .train-speaker{
  width:66px!important; height:66px!important; border-radius:20px!important; border:4px solid #f0bf4a!important;
  background:#2e93a8!important; box-shadow:0 7px 14px rgba(0,0,0,.13)!important; padding:10px!important;
}
.train-listen-game .train-speaker .speaker-glyph{ width:100%!important; height:100%!important; fill:none!important; stroke:#fff7da!important; stroke-width:5!important; stroke-linecap:round!important; stroke-linejoin:round!important; }
.train-listen-game .train-question-word{
  min-width:220px!important; padding:14px 24px!important; border-radius:24px!important; border:4px solid #e8bc54!important;
  background:#fffaf0!important; box-shadow:0 7px 16px rgba(0,0,0,.10)!important;
  font-size:clamp(1rem,2.5vmin,1.55rem)!important; font-weight:900!important;
}
.train-listen-game .train-choices{
  position:relative!important; z-index:3!important;
  width:min(1320px,95%)!important; margin:0 auto!important;
  display:grid!important; grid-template-columns:repeat(var(--choice-cols),minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(140px,1fr))!important; gap:12px!important; align-items:end!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot{
  position:relative!important; min-height:154px!important; height:100%!important;
}
.train-listen-game .train-choice{
  display:flex!important; align-items:flex-end!important; justify-content:center!important;
  padding:0 0 10px!important; background:transparent!important; border:0!important; box-shadow:none!important; overflow:visible!important;
}
.train-listen-game .platform-card-image{
  position:relative!important; display:block!important;
  width:88%!important; height:calc(100% - 18px)!important; left:auto!important; right:auto!important; top:auto!important; bottom:auto!important;
  overflow:hidden!important; border:4px solid #fff!important; border-radius:18px!important; background:#fff!important;
  box-shadow:0 8px 18px rgba(89,68,38,.16)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important; height:100%!important; display:block!important; object-fit:cover!important; border-radius:12px!important; padding:3px!important;
}
.train-listen-game .card-feet{
  position:absolute!important; bottom:0!important; width:10px!important; height:23px!important; border-radius:4px!important; background:#8c673f!important;
}
.train-listen-game .card-feet.left{ left:calc(50% - 34px)!important; }
.train-listen-game .card-feet.right{ right:calc(50% - 34px)!important; }
.train-listen-game .train-choice-slot.used{ background:transparent!important; border:0!important; box-shadow:none!important; }
.train-listen-game .train-choice-slot.used::before{ content:""!important; position:absolute!important; left:6%!important; right:6%!important; top:8px!important; bottom:20px!important; border-radius:16px!important; border:3px dashed rgba(170,142,100,.32)!important; background:rgba(255,251,242,.10)!important; }
.train-listen-game .train-choice-slot.used::after{ content:""!important; position:absolute!important; left:calc(50% - 16px)!important; right:calc(50% - 16px)!important; bottom:0!important; height:22px!important; background:linear-gradient(90deg,#8c673f 0 8px,transparent 8px 24px,#8c673f 24px 32px)!important; }
.train-listen-game .train-track{ overflow:visible!important; }
@media (max-width: 900px){
  .train-listen-game .station-scene{ padding-top:160px!important; padding-inline:10px!important; }
  .train-listen-game .station-canopy{ height:148px!important; }
  .train-listen-game .station-scene::before{ top:148px!important; }
  .train-listen-game .train-question{ left:10px!important; top:48px!important; max-width:70%!important; }
  .train-listen-game .train-speaker{ width:52px!important; height:52px!important; border-radius:16px!important; }
  .train-listen-game .train-question-word{ min-width:140px!important; padding:10px 14px!important; font-size:.95rem!important; }
  .train-listen-game .train-choices{ width:98%!important; gap:8px!important; grid-template-rows:repeat(2,minmax(100px,1fr))!important; }
  .train-listen-game .train-choice,.train-listen-game .train-choice-slot{ min-height:104px!important; }
  .train-listen-game .platform-card-image{ width:94%!important; border-radius:14px!important; }
  .train-listen-game .platform-card-image img{ border-radius:10px!important; }
}


/* v23 — luister en kies: duidelijke 2 rijen uitsneden op het perron */
.train-listen-game .train-listen-stage{
  grid-template-rows:minmax(0,1fr) clamp(175px,28vh,250px)!important;
}
.train-listen-game .station-scene{
  position:relative!important;
  min-height:0!important;
  padding:clamp(198px,25vh,236px) 12px 18px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
.train-listen-game .train-choices{
  position:relative!important;
  z-index:6!important;
  width:min(1460px,96%)!important;
  margin:0 auto!important;
  display:grid!important;
  grid-template-columns:repeat(var(--choice-cols), minmax(0,1fr))!important;
  grid-template-rows:repeat(2, auto)!important;
  grid-auto-rows:auto!important;
  gap:clamp(8px,.8vw,12px)!important;
  align-items:end!important;
  height:auto!important;
  max-height:none!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot{
  position:relative!important;
  width:100%!important;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:0.88 / 1!important;
}
.train-listen-game .train-choice{
  padding:0!important;
  display:block!important;
  overflow:visible!important;
}
.train-listen-game .platform-card-image{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:18px!important;
  width:auto!important;
  height:auto!important;
  border:4px solid #fff!important;
  border-radius:18px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 8px 18px rgba(89,68,38,.16)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  padding:3px!important;
  border-radius:12px!important;
  background:#fff!important;
}
.train-listen-game .card-feet{
  position:absolute!important;
  bottom:0!important;
  width:10px!important;
  height:22px!important;
  border-radius:4px!important;
  background:#8c673f!important;
}
.train-listen-game .card-feet.left{left:28%!important;}
.train-listen-game .card-feet.right{right:28%!important;}
.train-listen-game .train-choice-slot.used::before{
  top:0!important;
  bottom:18px!important;
  left:0!important;
  right:0!important;
  border-radius:18px!important;
}
.train-listen-game .train-choice-slot.used::after{
  left:28%!important;
  right:28%!important;
  bottom:0!important;
  height:22px!important;
  background:linear-gradient(90deg,#8c673f 0 10px,transparent 10px calc(100% - 10px),#8c673f calc(100% - 10px) 100%)!important;
}
@media (max-width: 900px){
  .train-listen-game .station-scene{
    padding:150px 8px 12px!important;
  }
  .train-listen-game .train-choices{
    width:99%!important;
    gap:6px!important;
  }
  .train-listen-game .train-choice,
  .train-listen-game .train-choice-slot{
    aspect-ratio:0.86 / 1!important;
  }
  .train-listen-game .platform-card-image{
    bottom:14px!important;
    border-width:3px!important;
    border-radius:12px!important;
  }
  .train-listen-game .card-feet,
  .train-listen-game .train-choice-slot.used::after{
    height:16px!important;
  }
}


/* v24 — luister en kies final layout refinement */
.train-listen-game .train-listen-stage{
  grid-template-rows:minmax(0,1fr) clamp(188px,27vh,248px)!important;
}
.train-listen-game .station-scene{
  padding:clamp(154px,19vh,182px) 14px 16px!important;
  align-items:flex-end!important;
}
.train-listen-game .station-canopy{
  height:clamp(148px,18vh,172px)!important;
  background-position:center 8%!important;
}
.train-listen-game .station-scene::before{
  top:clamp(148px,18vh,172px)!important;
}
.train-listen-game .station-clock{
  top:8px!important;
  width:clamp(98px,11vmin,124px)!important;
  z-index:7!important;
}
.train-listen-game .train-question{
  top:28px!important;
  left:20px!important;
  max-width:min(500px,52%)!important;
  min-height:60px!important;
}
.train-listen-game .train-speaker{
  width:58px!important; height:58px!important; border-width:4px!important;
}
.train-listen-game .train-question-word{
  min-width:180px!important;
  min-height:58px!important;
  padding:10px 18px!important;
  font-size:clamp(.96rem,2.1vmin,1.35rem)!important;
  border-radius:22px!important;
}
.train-listen-game .train-choices{
  width:min(1460px,97.5%)!important;
  height:clamp(246px,38vh,334px)!important;
  max-height:clamp(246px,38vh,334px)!important;
  grid-template-columns:repeat(var(--choice-cols), minmax(88px,1fr))!important;
  grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(8px,.7vw,12px)!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  aspect-ratio:auto!important;
}
.train-listen-game .train-choice{
  display:block!important;
  padding:0!important;
  overflow:visible!important;
}
.train-listen-game .platform-card-image{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:18px!important;
  width:auto!important;
  height:auto!important;
  border:3px solid #fff!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 12px rgba(89,68,38,.14)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  padding:2px!important;
  border-radius:12px!important;
  background:#fff!important;
}
.train-listen-game .card-feet{height:20px!important;width:9px!important;bottom:0!important;}
.train-listen-game .card-feet.left{left:26%!important;}
.train-listen-game .card-feet.right{right:26%!important;}
.train-listen-game .train-choice-slot.used::before{
  left:0!important; right:0!important; top:0!important; bottom:18px!important;
  border:3px dashed rgba(170,142,100,.28)!important; border-radius:16px!important; background:rgba(255,251,242,.08)!important;
}
.train-listen-game .train-choice-slot.used::after{
  left:26%!important; right:26%!important; bottom:0!important; height:20px!important;
  background:linear-gradient(90deg,#8c673f 0 9px,transparent 9px calc(100% - 9px),#8c673f calc(100% - 9px) 100%)!important;
}
.train-listen-game .train-yard{
  padding-top:10px!important;
}
.train-listen-game .word-wagon .wagon-cargo{
  bottom:35%!important;
  height:62%!important;
  left:10%!important;
  right:10%!important;
  align-items:flex-end!important;
}
.train-listen-game .word-wagon .wagon-photo-board{
  width:82%!important;
  height:100%!important;
  transform:translateY(-14%)!important;
}
.train-listen-game .word-wagon .board-face{
  width:100%!important;
  height:calc(100% - 4px)!important;
  padding:2px!important;
  border:3px solid #ffffff!important;
  border-radius:10px!important;
  background:#fffef9!important;
  box-shadow:0 5px 10px rgba(0,0,0,.18)!important;
}
.train-listen-game .word-wagon .board-face img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:6px!important;
  display:block!important;
  background:#fff!important;
}
.train-listen-game .word-wagon .board-stick{
  width:8px!important;
  height:19px!important;
  bottom:-1px!important;
}
@media (max-width: 1200px){
  .train-listen-game .station-scene{padding:144px 10px 14px!important;}
  .train-listen-game .station-canopy{height:140px!important;}
  .train-listen-game .station-scene::before{top:140px!important;}
  .train-listen-game .train-question{max-width:56%!important;}
  .train-listen-game .train-choices{height:clamp(216px,34vh,286px)!important;max-height:clamp(216px,34vh,286px)!important;}
}
@media (max-width: 900px){
  .train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) clamp(166px,26vh,220px)!important;}
  .train-listen-game .station-scene{padding:132px 8px 10px!important;}
  .train-listen-game .station-canopy{height:126px!important;}
  .train-listen-game .station-scene::before{top:126px!important;}
  .train-listen-game .train-question{top:18px!important; left:10px!important; max-width:66%!important;}
  .train-listen-game .train-speaker{width:50px!important;height:50px!important;}
  .train-listen-game .train-question-word{min-width:120px!important;min-height:48px!important;padding:8px 12px!important;font-size:.94rem!important;}
  .train-listen-game .train-choices{width:99%!important;height:clamp(178px,29vh,230px)!important;max-height:clamp(178px,29vh,230px)!important;gap:6px!important;}
  .train-listen-game .platform-card-image{bottom:14px!important;border-width:2px!important;border-radius:12px!important;}
  .train-listen-game .platform-card-image img{padding:2px!important;border-radius:9px!important;}
  .train-listen-game .card-feet,.train-listen-game .train-choice-slot.used::after{height:15px!important;width:7px!important;}
  .train-listen-game .card-feet.left{left:27%!important;}.train-listen-game .card-feet.right{right:27%!important;}
  .train-listen-game .word-wagon .wagon-photo-board{width:84%!important;transform:translateY(-12%)!important;}
  .train-listen-game .word-wagon .board-face{border-width:2px!important;padding:2px!important;}
}


/* v25 approved 2x5 station layout */
.train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) clamp(190px,27vh,250px)!important;gap:0!important;}
.train-listen-game .station-scene{position:relative!important;min-height:0!important;padding:124px 7% 18px!important;background:linear-gradient(#b7e1ff 0 20%,#ead7ae 20% 100%)!important;overflow:hidden!important;}
.train-listen-game .station-canopy{position:absolute!important;inset:0 4% auto 4%!important;height:124px!important;background:url('assets/train-style/station-approved.jpg') center top/100% 100% no-repeat!important;border:0!important;box-shadow:none!important;}
.train-listen-game .station-clock{position:absolute!important;z-index:7!important;top:30px!important;left:50%!important;transform:translateX(-50%)!important;width:64px!important;aspect-ratio:1!important;background:#fff4d8!important;border:5px solid #d9a92f!important;border-radius:50%!important;}
.train-listen-game .train-question{position:absolute!important;z-index:8!important;left:2.5%!important;top:20px!important;width:250px!important;display:grid!important;grid-template-columns:1fr 52px!important;gap:7px!important;align-items:center!important;}
.train-listen-game .train-question-word{min-width:0!important;min-height:52px!important;padding:10px 14px!important;border:3px solid #e0b144!important;border-radius:18px!important;background:#fffaf0!important;text-align:center!important;font-size:1rem!important;}
.train-listen-game .train-speaker{width:52px!important;height:52px!important;border-radius:16px!important;border:3px solid #e0b144!important;background:#1f6b7b!important;padding:9px!important;}
.train-listen-game .train-speaker .speaker-glyph{width:100%!important;height:100%!important;fill:none!important;stroke:#fff!important;stroke-width:5!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.train-listen-game .train-choices{position:relative!important;z-index:5!important;width:100%!important;height:calc(100% - 6px)!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;gap:12px 18px!important;margin:0!important;align-items:stretch!important;}
.train-listen-game .train-choice,.train-listen-game .train-choice-slot{position:relative!important;min-width:0!important;min-height:0!important;height:100%!important;width:100%!important;aspect-ratio:auto!important;}
.train-listen-game .train-choice{padding:0 0 12px!important;background:transparent!important;border:0!important;overflow:visible!important;}
.train-listen-game .platform-card-image{position:absolute!important;inset:0 0 14px 0!important;border:3px solid #fff!important;border-radius:14px!important;background:#fff!important;overflow:hidden!important;box-shadow:0 5px 12px #0002!important;}
.train-listen-game .platform-card-image img{width:100%!important;height:100%!important;object-fit:cover!important;padding:2px!important;border-radius:10px!important;}
.train-listen-game .card-feet{position:absolute!important;bottom:0!important;width:7px!important;height:16px!important;background:#8b653e!important;border-radius:3px!important;}.train-listen-game .card-feet.left{left:28%!important}.train-listen-game .card-feet.right{right:28%!important}
.train-listen-game .train-choice-slot.used::before{content:""!important;position:absolute!important;inset:0 0 14px 0!important;border:2px dashed #b8956866!important;border-radius:14px!important;background:#fff2!important;}.train-listen-game .train-choice-slot.used::after{display:none!important;}
.train-listen-game .train-yard{position:relative!important;background:#5e422f!important;border-top:4px solid #bb9364!important;padding:0 14px 8px!important;overflow:hidden!important;}
.train-listen-game .train{width:min(1500px,99%)!important;height:100%!important;margin:0 auto!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;gap:-1px!important;padding-bottom:7px!important;}
.train-listen-game .train-wagon{position:relative!important;flex:1 1 0!important;width:auto!important;max-width:none!important;height:100%!important;margin:0 -9px 0 0!important;padding:0!important;}
.train-listen-game .wagon-shell,.train-listen-game .animal-wagon-full{position:absolute!important;inset:auto 0 0 0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 4px 3px #0003)!important;}
.train-listen-game .animal-wagon-full{z-index:4!important;}
.train-listen-game .wagon-cargo{position:absolute!important;z-index:3!important;left:12%!important;right:12%!important;bottom:33%!important;height:60%!important;overflow:visible!important;}
.train-listen-game .wagon-photo-board{position:absolute!important;inset:0!important;transform:translateY(-5%)!important;}
.train-listen-game .board-face{position:absolute!important;inset:0!important;border:3px solid #fff!important;border-radius:9px!important;background:#fff!important;padding:2px!important;overflow:hidden!important;box-shadow:0 4px 8px #0002!important;}
.train-listen-game .board-face img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:6px!important;}
.train-listen-game .locomotive{position:relative!important;flex:0 0 19%!important;height:100%!important;margin-left:-6px!important;}.train-listen-game .locomotive>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;}
.train-listen-game .rails{position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:56px!important;}
@media(max-width:900px){.train-listen-game .station-scene{padding:112px 4% 12px!important}.train-listen-game .station-canopy{height:110px!important}.train-listen-game .train-question{width:210px!important;top:14px!important}.train-listen-game .train-choices{gap:7px 9px!important}.train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) 170px!important}.train-listen-game .locomotive{flex-basis:20%!important}}


/* v26 — fullscreen start from Padlet */
html,body {
  width:100%;
  height:100%;
  min-height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
  overscroll-behavior:none;
  background:#f7efd9;
}
body {
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  min-height:100svh;
  touch-action:manipulation;
  -webkit-text-size-adjust:100%;
}
#app {
  width:100vw;
  height:100dvh;
  min-height:100svh;
  overflow:hidden;
}
body.experience-started #app {
  width:100vw;
  height:100dvh;
}
.launch-screen {
  position:relative;
  width:100vw;
  height:100dvh;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  background:linear-gradient(180deg,#bde8fa 0%,#e9f8ff 51%,#56bfd2 51.2%,#238fae 100%);
}
.launch-screen::before {
  content:"";
  position:absolute;
  inset:51% 0 auto;
  height:8px;
  background:linear-gradient(90deg,#ffffff00,#fff 20% 80%,#ffffff00);
  opacity:.75;
  pointer-events:none;
}
.launch-screen::after { content:"";position:absolute;inset:51% 0 0;background:repeating-radial-gradient(ellipse at 50% -7%,transparent 0 31px,#bdebf255 32px 34px,transparent 35px 67px);pointer-events:none; }
.launch-button {
  position:relative;
  z-index:3;
  width:clamp(490px,57vmin,690px);
  min-height:clamp(500px,72vmin,680px);
  padding:clamp(20px,3.2vmin,34px) clamp(26px,4vmin,48px) clamp(18px,2.6vmin,28px);
  border:7px solid #fff;
  border-radius:clamp(38px,6vmin,62px);
  display:grid;
  grid-template-rows:auto auto minmax(170px,1fr) auto auto;
  place-items:center;
  gap:clamp(8px,1.5vmin,15px);
  color:#214a52;
  background:linear-gradient(180deg,#fffffff5,#fffdf4f4);
  cursor:pointer;
  box-shadow:0 25px 60px #07506b48,inset 0 0 0 5px #f5cb4d3d;
  -webkit-tap-highlight-color:transparent;
  transition:transform .16s ease,box-shadow .16s ease;
  opacity:0;
  transform:translateY(18px) scale(.96);
  pointer-events:none;
  animation:launch-card-arrive .85s 4.55s cubic-bezier(.2,.8,.25,1) forwards;
}
.launch-screen.launch-ready .launch-button { pointer-events:auto; }
.launch-button:disabled { cursor:default; }
.launch-heading { display:grid;place-items:center;gap:2px; }
.launch-heading small { color:#278796;font:900 clamp(.7rem,1.3vmin,.9rem)/1 Arial,sans-serif;letter-spacing:.16em; }
.launch-heading b { color:#244d58;font-size:clamp(2rem,4.8vmin,3.55rem);line-height:1; }
.launch-route { padding:6px 13px;border-radius:999px;display:flex;align-items:center;gap:clamp(6px,1.4vmin,14px);color:#45626a;background:#e5f6f7;font:800 clamp(.7rem,1.35vmin,.94rem)/1 Arial,sans-serif; }
.launch-route i { display:flex;align-items:center;gap:4px;font-style:normal; }
.launch-route em { font-style:normal;font-size:1.25em; }
.launch-route > span { color:#e2a61f;font-size:1.5em; }
.launch-card-berth { width:100%;height:100%;min-height:170px; }
.launch-voyage { position:absolute;z-index:4;left:50%;top:50%;width:clamp(330px,46vmin,520px);height:clamp(190px,30vmin,330px);transform:translate(-50%,-43%);display:grid;place-items:center;pointer-events:none;overflow:visible; }
.launch-boat { position:relative;z-index:2;opacity:0;animation:optimist-sail-in 3.45s .9s cubic-bezier(.16,.72,.28,1) both; }
.launch-button:active {
  transform:scale(.97);
  box-shadow:0 13px 32px #07506b42,inset 0 0 0 5px #f2c94a55;
}
.launch-logo {
  width:clamp(170px,28vmin,270px);
  aspect-ratio:1;
  padding:10px;
  border:5px solid #fff;
  border-radius:42% 52% 45% 50%;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 25px #174f5b33;
  animation:optimist-bob 2.8s 4.35s ease-in-out infinite;
}
.launch-logo img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 7px #0002);
}
.launch-wake { position:absolute;left:50%;bottom:8%;width:54%;height:24px;transform:translateX(-50%);border-radius:50%;border-bottom:5px solid #e5fbff;box-shadow:0 9px 0 -2px #8edce8;opacity:0;animation:wake-in 3.25s .9s ease-out both; }
.launch-button strong {
  min-width:58%;
  padding:clamp(12px,2vmin,17px) clamp(24px,4vmin,40px);
  border-radius:999px;
  color:#fff;
  background:linear-gradient(180deg,#2ba3ad,#197986);
  font:900 clamp(1.25rem,2.8vmin,1.9rem)/1 Arial,sans-serif;
  letter-spacing:.05em;
  text-transform:uppercase;
  box-shadow:0 8px 0 #11616c,0 12px 20px #195b6260;
}
.launch-button strong span { display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-right:7px;border-radius:50%;color:#1c7e89;background:#fff;font-size:.7em;vertical-align:middle; }
.launch-instruction { color:#567078;font:800 clamp(.72rem,1.35vmin,.92rem)/1 Arial,sans-serif; }
.launch-sun { position:absolute;z-index:0;left:9%;top:10%;width:clamp(90px,12vmin,150px);aspect-ratio:1;border-radius:50%;background:#ffd95d;box-shadow:0 0 0 18px #ffdf7250,0 0 55px #fff09c; }
.launch-cloud { position:absolute;z-index:1;width:clamp(110px,16vmin,190px);height:clamp(38px,5.5vmin,65px);border-radius:999px;background:#fff;box-shadow:0 8px 20px #4e94a822; }
.launch-cloud::before,.launch-cloud::after { content:"";position:absolute;border-radius:50%;background:#fff; }
.launch-cloud::before { width:45%;aspect-ratio:1;left:15%;bottom:8%; }.launch-cloud::after { width:34%;aspect-ratio:1;right:15%;bottom:7%; }
.cloud-one { right:8%;top:13%; }.cloud-two { left:19%;top:31%;transform:scale(.68);opacity:.85; }
.drifting-cloud { left:-18%;right:auto;animation:launch-cloud-drift var(--cloud-speed,38s) linear infinite;opacity:var(--cloud-opacity,.78);transform:scale(var(--cloud-scale,.72)); }
.cloud-three { top:9%;--cloud-speed:44s;--cloud-scale:.58;--cloud-opacity:.68;animation-delay:-7s; }
.cloud-four { top:23%;--cloud-speed:56s;--cloud-scale:.82;--cloud-opacity:.72;animation-delay:-31s; }
.cloud-five { top:39%;--cloud-speed:49s;--cloud-scale:.48;--cloud-opacity:.58;animation-delay:-18s; }
.launch-wind { position:absolute;z-index:3;inset:7% 0 43%;overflow:hidden;pointer-events:none;opacity:0;animation:wind-window 4.1s .65s ease both; }
.launch-wind i { position:absolute;left:-30%;width:26%;height:28px;border-top:5px solid #fff;border-radius:50%;filter:drop-shadow(0 2px 2px #4ea5ba55);animation:wind-gust 1.15s linear infinite; }
.launch-wind i:nth-child(1){top:18%;animation-delay:-.1s}.launch-wind i:nth-child(2){top:51%;width:36%;animation-delay:-.55s}.launch-wind i:nth-child(3){top:76%;width:20%;animation-delay:-.85s}
.launch-wind b { position:absolute;left:-12%;top:32%;font-size:clamp(17px,2.3vmin,29px);animation:wind-leaf 1.8s .9s linear both; }.launch-wind b:last-child{top:68%;animation-delay:1.35s;animation-duration:1.55s}
.launch-island { position:absolute;z-index:1;right:-3%;top:46%;width:28%;height:8%;border-radius:70% 30% 0 0;background:#70b75e;box-shadow:inset 0 -9px #d5c16d; }
.launch-school { position:absolute;z-index:2;right:1%;top:24%;width:clamp(340px,31vw,600px);height:clamp(190px,26vh,300px);display:grid;align-items:end;filter:drop-shadow(0 15px 15px #07506b55);transform:perspective(800px) rotateY(-4deg);transform-origin:right bottom; }
.launch-school img { display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom; }
.launch-waves { position:absolute;z-index:2;inset:auto 0 3%;height:18%;pointer-events:none;overflow:hidden; }
.launch-waves i { position:absolute;width:32%;height:22px;border-top:5px solid #8dd8e3;border-radius:50%;animation:wave-drift 5s linear infinite; }.launch-waves i:nth-child(1){left:4%;top:18%}.launch-waves i:nth-child(2){left:42%;top:58%;animation-delay:-2s}.launch-waves i:nth-child(3){right:-3%;top:12%;animation-delay:-3.5s}
@keyframes optimist-sail-in { 0%{transform:translateX(-75vw) rotate(-8deg);opacity:0} 12%{opacity:1} 72%{transform:translateX(5%) rotate(3deg);opacity:1} 88%{transform:translateX(-2%) rotate(-1deg)} 100%{transform:none;opacity:1} }
@keyframes optimist-bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(1.5deg)} }
@keyframes wake-in { 0%{width:4%;opacity:0;transform:translateX(-220%)}35%{opacity:1}85%{width:70%;opacity:1}100%{width:54%;opacity:.45;transform:translateX(-50%)} }
@keyframes launch-card-arrive { from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none} }
@keyframes wind-window { 0%,100%{opacity:0}14%,78%{opacity:1} }
@keyframes wind-gust { from{transform:translateX(0)}to{transform:translateX(135vw)} }
@keyframes wind-leaf { 0%{transform:translateX(0) rotate(0);opacity:0}15%{opacity:1}100%{transform:translateX(118vw) translateY(45px) rotate(540deg);opacity:.25} }
@keyframes wave-drift { from{transform:translateX(-18px)}to{transform:translateX(40px)} }
@keyframes launch-cloud-drift { from{left:-20%}to{left:112%} }
@media (orientation:portrait) and (max-width:900px) {
  .launch-button { width:min(88vw,590px);min-height:min(76vh,680px); }
}
@media (orientation:landscape) and (max-height:700px) { .launch-button{width:min(68vw,590px);min-height:92vh;padding-block:12px;grid-template-rows:auto auto minmax(125px,1fr) auto auto}.launch-logo{width:min(30vh,210px)}.launch-route{padding-block:4px}.launch-instruction{display:none} }
@media (max-width:1100px) { .launch-school{right:-9%;opacity:.82;transform:scale(.8) perspective(700px) rotateY(-6deg);transform-origin:right center}.launch-sun{left:4%}.cloud-two{left:7%} }
@media (orientation:portrait) and (max-width:700px) { .launch-school{right:-20%;top:31%;transform:scale(.58);transform-origin:right top}.launch-island{width:42%}.launch-heading small{letter-spacing:.09em} }
@media (prefers-reduced-motion:reduce) { .launch-boat,.launch-logo,.launch-wake,.launch-waves i,.launch-wind,.launch-wind i,.launch-wind b,.launch-button,.drifting-cloud { animation:none!important;opacity:1;transform:none; } }
@supports (height:100dvh) {
  .home,.cluster-home,.game,.launch-screen { min-height:100dvh; }
}


/* v27 — approved Luister en kies station layout, 2 x 4 cards and colorful wagons */
.train-listen-game{background:#cfeeff!important;}
.train-listen-game .train-listen-stage{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) clamp(188px,25vh,235px)!important;
  gap:0!important;
  height:100%!important;
  overflow:hidden!important;
}
.train-listen-game .station-scene{
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:clamp(150px,18vh,176px) clamp(170px,11vw,210px) clamp(48px,5.3vh,62px)!important;
  background:linear-gradient(180deg,#9bd5ff 0 19%,#dff2ff 19% 30%,#efd9b5 30% 100%)!important;
}
.train-listen-game .station-canopy{
  position:absolute!important;left:0!important;right:0!important;top:0!important;height:clamp(142px,17vh,164px)!important;
  background:url('assets/train-style/station-pretty.jpg') center top/cover no-repeat!important;
  border-bottom:5px solid #d6a640!important;z-index:1!important;
}
.train-listen-game .station-name{
  position:absolute!important;left:50%!important;bottom:8px!important;transform:translateX(-50%)!important;
  min-width:180px!important;padding:6px 18px!important;border:4px solid #d5a13b!important;border-radius:6px!important;
  background:#174e52!important;color:#f6d797!important;text-align:center!important;text-transform:uppercase!important;
  font:900 clamp(.82rem,1.7vmin,1.15rem)/1 Arial,sans-serif!important;letter-spacing:.05em!important;
  box-shadow:0 4px 8px rgba(0,0,0,.18)!important;
}
.train-listen-game .station-clock{
  position:absolute!important;left:50%!important;top:8px!important;transform:translateX(-50%)!important;
  width:clamp(86px,10vmin,112px)!important;aspect-ratio:1!important;border:6px solid #e0b43c!important;border-radius:50%!important;
  background:#fff7dc!important;box-shadow:0 6px 14px rgba(0,0,0,.15)!important;z-index:3!important;
}
.train-listen-game .station-scene::before{
  content:""!important;position:absolute!important;inset:clamp(142px,17vh,164px) 0 0 0!important;z-index:0!important;
  background:linear-gradient(180deg,rgba(243,226,193,.95),rgba(224,198,157,.97))!important;
}
.train-listen-game .station-scene::after{
  content:""!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;height:clamp(46px,5vh,58px)!important;z-index:2!important;
  border-top:6px solid #f2cb3e!important;background:linear-gradient(180deg,#ead1a7 0,#caa97a 100%)!important;
  box-shadow:inset 0 6px 0 rgba(255,255,255,.23)!important;
}
.train-listen-game .train-question{
  position:absolute!important;left:clamp(18px,2.1vw,34px)!important;top:clamp(72px,8.4vh,94px)!important;z-index:5!important;
  display:flex!important;align-items:center!important;gap:10px!important;
}
.train-listen-game .train-speaker{
  width:clamp(58px,6.5vmin,72px)!important;height:clamp(58px,6.5vmin,72px)!important;padding:10px!important;
  border:4px solid #e6ad35!important;border-radius:18px!important;background:#1f8798!important;box-shadow:0 5px 12px rgba(0,0,0,.16)!important;
}
.train-listen-game .speaker-glyph{width:100%!important;height:100%!important;fill:none!important;stroke:#fff!important;stroke-width:5!important;stroke-linecap:round!important;stroke-linejoin:round!important;}
.train-listen-game .train-question-word{
  min-width:clamp(190px,22vw,300px)!important;min-height:clamp(58px,6.8vh,74px)!important;padding:10px 18px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;border:4px solid #e7b342!important;border-radius:20px!important;
  background:#fffaf1!important;color:#211d18!important;font:900 clamp(1.05rem,2.4vmin,1.55rem)/1 Arial,sans-serif!important;box-shadow:0 5px 12px rgba(0,0,0,.12)!important;
}
.train-listen-game .train-choices{
  position:relative!important;z-index:4!important;width:min(1220px,100%)!important;height:100%!important;margin:0 auto!important;
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:repeat(2,minmax(0,1fr))!important;
  gap:clamp(10px,1vw,16px)!important;align-items:stretch!important;overflow:visible!important;
}
.train-listen-game .train-choice,.train-listen-game .train-choice-slot{
  position:relative!important;min-width:0!important;min-height:0!important;height:100%!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;overflow:visible!important;
}
.train-listen-game .platform-card-image{
  position:absolute!important;inset:0!important;display:block!important;overflow:hidden!important;border:5px solid #fff!important;border-radius:20px!important;background:#fff!important;
  box-shadow:0 7px 14px rgba(59,44,31,.16)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important;height:100%!important;object-fit:cover!important;padding:3px!important;border-radius:14px!important;background:#fff!important;display:block!important;
}
.train-listen-game .train-choice.wrong .platform-card-image{border-color:#d54d43!important;animation:shake .3s!important;}
.train-listen-game .train-choice-slot.used::before{
  content:""!important;position:absolute!important;inset:0!important;border:3px dashed rgba(150,116,72,.24)!important;border-radius:20px!important;background:rgba(255,255,255,.04)!important;
}
.train-listen-game .platform-edge{display:none!important;}
.train-listen-game .train-yard{
  position:relative!important;min-height:0!important;overflow:hidden!important;padding:0 10px 8px!important;
  background:linear-gradient(180deg,#826249 0 18%,#5b402c 18% 100%)!important;border-top:5px solid #b08a5d!important;
}
.train-listen-game .rails{position:absolute!important;left:0!important;right:0!important;bottom:3px!important;height:54px!important;z-index:1!important;}
.train-listen-game .rails::before,.train-listen-game .rails::after{content:""!important;position:absolute!important;left:0!important;right:0!important;height:8px!important;background:linear-gradient(#444,#161616)!important;border-radius:4px!important;box-shadow:0 2px 0 #777!important;}
.train-listen-game .rails::before{top:8px!important}.train-listen-game .rails::after{bottom:8px!important}.train-listen-game .rails b{position:absolute!important;inset:0!important;background:repeating-linear-gradient(90deg,transparent 0 34px,#4f3926 35px 49px,transparent 50px 68px)!important;}
.train-listen-game .train{
  position:relative!important;z-index:3!important;width:min(1580px,99%)!important;height:100%!important;margin:0 auto!important;padding:0 0 9px!important;
  display:flex!important;flex-direction:row!important;align-items:flex-end!important;justify-content:flex-end!important;gap:0!important;
}
.train-listen-game .train-wagon{
  position:relative!important;flex:1 1 0!important;min-width:0!important;max-width:245px!important;height:100%!important;margin-right:-24px!important;padding:0!important;overflow:visible!important;
}
.train-listen-game .wagon-shell{position:absolute!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;height:88%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 4px 4px rgba(0,0,0,.28))!important;z-index:5!important;}
.train-listen-game .wagon-cargo{position:absolute!important;left:13%!important;right:13%!important;bottom:34%!important;height:60%!important;z-index:3!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:hidden!important;}
.train-listen-game .wagon-photo-board{width:82%!important;height:100%!important;transform:translateY(-10%)!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;}
.train-listen-game .board-face{width:100%!important;height:100%!important;padding:2px!important;border:3px solid #fff!important;border-radius:10px!important;background:#fff!important;box-shadow:0 4px 8px rgba(0,0,0,.18)!important;overflow:hidden!important;}
.train-listen-game .board-face img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:6px!important;display:block!important;}
.train-listen-game .animal-cargo-v27{position:absolute!important;left:15%!important;right:15%!important;bottom:34%!important;height:62%!important;z-index:3!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;overflow:visible!important;}
.train-listen-game .animal-cargo-v27 img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 22%!important;border-radius:50% 50% 20% 20%!important;filter:drop-shadow(0 3px 2px rgba(0,0,0,.12))!important;mask-image:radial-gradient(ellipse 56% 54% at 50% 56%,#000 72%,transparent 100%)!important;-webkit-mask-image:radial-gradient(ellipse 56% 54% at 50% 56%,#000 72%,transparent 100%)!important;}
.train-listen-game .locomotive{position:relative!important;flex:0 0 clamp(230px,23vw,350px)!important;height:100%!important;margin-left:-18px!important;display:flex!important;align-items:flex-end!important;justify-content:flex-end!important;overflow:visible!important;}
.train-listen-game .locomotive>img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 6px 5px rgba(0,0,0,.35))!important;z-index:4!important;}
.train-listen-game .steam-puff{position:absolute!important;z-index:8!important;top:-7%!important;right:7%!important;font-size:clamp(1.7rem,3.8vmin,3rem)!important;animation:steam-v27 1.35s ease-out infinite!important;}
.train-listen-game .steam-puff.p2{animation-delay:.42s!important}.train-listen-game .steam-puff.p3{animation-delay:.84s!important}
@keyframes steam-v27{0%{transform:translate(0,14px) scale(.4);opacity:.1}30%{opacity:.7}100%{transform:translate(-10px,-50px) scale(1.35);opacity:0}}
.train-listen-game .train.arriving{animation:train-arrive-v27 1.1s cubic-bezier(.15,.78,.28,1) both!important}.train-listen-game .train.departing{animation:train-depart-v27 1.25s cubic-bezier(.58,.06,.9,.44) both!important}
@keyframes train-arrive-v27{from{transform:translateX(-120vw)}75%{transform:translateX(1%)}to{transform:translateX(0)}}
@keyframes train-depart-v27{from{transform:translateX(0)}to{transform:translateX(120vw)}}
@media(max-width:1000px){
  .train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) clamp(165px,24vh,205px)!important;}
  .train-listen-game .station-scene{padding:130px 110px 42px!important;}
  .train-listen-game .station-canopy{height:124px!important;}.train-listen-game .station-scene::before{inset:124px 0 0 0!important;}
  .train-listen-game .train-question{left:12px!important;top:55px!important;}.train-listen-game .train-speaker{width:52px!important;height:52px!important;}.train-listen-game .train-question-word{min-width:145px!important;min-height:52px!important;padding:8px 12px!important;font-size:.96rem!important;}
  .train-listen-game .train-choices{gap:7px!important;}.train-listen-game .platform-card-image{border-width:3px!important;border-radius:14px!important;}.train-listen-game .platform-card-image img{padding:2px!important;border-radius:10px!important;}
  .train-listen-game .train-wagon{margin-right:-18px!important;}.train-listen-game .locomotive{flex-basis:220px!important;}
}
@media(max-width:760px){
  .train-listen-game .station-scene{padding:118px 72px 38px!important;}.train-listen-game .station-canopy{height:112px!important;}.train-listen-game .station-scene::before{inset:112px 0 0 0!important;}
  .train-listen-game .station-clock{width:76px!important;}.train-listen-game .station-name{min-width:130px!important;padding:5px 10px!important;font-size:.72rem!important;}
  .train-listen-game .train-choices{gap:5px!important;}.train-listen-game .platform-card-image{border-width:2px!important;border-radius:10px!important;}.train-listen-game .platform-card-image img{padding:1px!important;border-radius:8px!important;}
}


/* v28 — luister en kies: duidelijkere uitsneden, kaarten hoger in wagons, dieren zonder achtergrond */
.train-listen-game .platform-card-image img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#fff!important;
}
.train-listen-game .wagon-cargo{
  left:10.5%!important;
  right:10.5%!important;
  bottom:38%!important;
  height:66%!important;
  overflow:visible!important;
}
.train-listen-game .wagon-photo-board{
  width:86%!important;
  height:100%!important;
  transform:translateY(-18%)!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
}
.train-listen-game .board-face{
  padding:2px!important;
  border:3px solid #fff!important;
  border-radius:10px!important;
  background:#fff!important;
  overflow:hidden!important;
}
.train-listen-game .board-face img{
  object-fit:contain!important;
  object-position:center center!important;
  background:#fff!important;
}
.train-listen-game .animal-cargo-v27{
  left:7%!important;
  right:7%!important;
  bottom:38%!important;
  height:68%!important;
  z-index:4!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.train-listen-game .animal-cargo-v27 img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  border-radius:0!important;
  background:transparent!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.16))!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.train-listen-game .animal-wagon .wagon-shell,
.train-listen-game .word-wagon .wagon-shell{
  z-index:5!important;
}
@media(max-width:1000px){
  .train-listen-game .wagon-cargo{bottom:36%!important;height:67%!important;}
  .train-listen-game .wagon-photo-board{transform:translateY(-16%)!important;}
  .train-listen-game .animal-cargo-v27{bottom:36%!important;height:69%!important;}
}
@media(max-width:760px){
  .train-listen-game .wagon-cargo{left:9%!important;right:9%!important;bottom:34%!important;height:70%!important;}
  .train-listen-game .wagon-photo-board{width:88%!important;transform:translateY(-12%)!important;}
  .train-listen-game .animal-cargo-v27{left:5%!important;right:5%!important;bottom:34%!important;height:72%!important;}
}


/* v29 — luister en kies: dunnere lijsten, uitsneden vullen kader, dieren groter en strakker */
.train-listen-game .train-choices{
  gap:clamp(8px,.85vw,12px)!important;
}
.train-listen-game .platform-card-image{
  border:3px solid #fff!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 6px 12px rgba(59,44,31,.14)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important;
  height:100%!important;
  padding:2px!important;
  border-radius:12px!important;
  object-fit:cover!important;
  object-position:center center!important;
  background:#fff!important;
}
.train-listen-game .wagon-cargo{
  left:10.5%!important;
  right:10.5%!important;
  bottom:39%!important;
  height:67%!important;
}
.train-listen-game .wagon-photo-board{
  width:88%!important;
  height:100%!important;
  transform:translateY(-20%)!important;
}
.train-listen-game .board-face{
  width:100%!important;
  height:100%!important;
  padding:2px!important;
  border:2px solid #fff!important;
  border-radius:9px!important;
  background:#fff!important;
  box-shadow:0 4px 8px rgba(0,0,0,.16)!important;
  overflow:hidden!important;
}
.train-listen-game .board-face img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:6px!important;
  background:#fff!important;
}
.train-listen-game .animal-cargo-v27{
  left:10%!important;
  right:10%!important;
  bottom:39%!important;
  height:71%!important;
  z-index:4!important;
  overflow:visible!important;
}
.train-listen-game .animal-cargo-v27 img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center 36%!important;
  transform:scale(1.12)!important;
  background:transparent!important;
  border-radius:0!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.16))!important;
  clip-path:ellipse(33% 41% at 50% 46%)!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
@media(max-width:1000px){
  .train-listen-game .platform-card-image{border-width:2px!important;border-radius:14px!important;}
  .train-listen-game .platform-card-image img{padding:2px!important;border-radius:10px!important;}
  .train-listen-game .wagon-cargo{bottom:37%!important;height:69%!important;}
  .train-listen-game .wagon-photo-board{transform:translateY(-17%)!important;}
  .train-listen-game .animal-cargo-v27{bottom:37%!important;height:72%!important;}
}
@media(max-width:760px){
  .train-listen-game .platform-card-image{border-radius:10px!important;}
  .train-listen-game .platform-card-image img{padding:1px!important;border-radius:8px!important;}
  .train-listen-game .wagon-cargo{left:9%!important;right:9%!important;bottom:34%!important;height:72%!important;}
  .train-listen-game .wagon-photo-board{width:90%!important;transform:translateY(-12%)!important;}
  .train-listen-game .animal-cargo-v27{left:8%!important;right:8%!important;bottom:34%!important;height:75%!important;}
  .train-listen-game .animal-cargo-v27 img{transform:scale(1.08)!important;clip-path:ellipse(35% 42% at 50% 47%)!important;}
}


/* v30 — voorbeeldstation + verfijnronde luister en kies */
.train-listen-game{background:#cfeeff!important;}
.train-listen-game .train-listen-stage{
  grid-template-rows:minmax(0,1fr) clamp(180px,24vh,225px)!important;
}
.train-listen-game .station-scene{
  position:relative!important;
  overflow:hidden!important;
  padding:118px 118px 34px!important;
  background:
    linear-gradient(180deg,rgba(159,219,255,.20) 0 18%, rgba(239,223,182,.00) 18% 100%),
    linear-gradient(180deg,#e6d6ad 0 17%, #efe3c4 17% 18%, #e6d6ad 18% 40%, #f0e6ce 40% 41%, #e6d6ad 41% 63%, #f0e6ce 63% 64%, #e6d6ad 64% 86%, #d4b98f 86% 100%)!important;
}
.train-listen-game .station-canopy{
  position:absolute!important; left:0!important; right:0!important; top:0!important;
  height:158px!important;
  background-image:url('assets/train-style/station-pretty.jpg')!important;
  background-size:cover!important;
  background-position:center top!important;
  border-bottom:6px solid #e1b24d!important;
  box-shadow:0 8px 18px rgba(63,45,20,.24)!important;
  z-index:0!important;
}
.train-listen-game .station-canopy::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  bottom:-34px!important;
  width:260px!important;
  height:58px!important;
  background:url('assets/train-style/station-sign-center.webp') center/contain no-repeat!important;
  z-index:2!important;
  pointer-events:none!important;
}
.train-listen-game .station-name{display:none!important;}
.train-listen-game .station-clock{
  position:absolute!important;
  left:50%!important;
  top:12px!important;
  transform:translateX(-50%)!important;
  width:96px!important;
  aspect-ratio:1!important;
  border:0!important; background:transparent!important; box-shadow:none!important;
  z-index:3!important;
}
.train-listen-game .station-clock::before,
.train-listen-game .station-clock i,
.train-listen-game .station-clock b{display:none!important;}
.train-listen-game .station-scene::before,
.train-listen-game .station-scene::after{
  content:""!important;
  position:absolute!important;
  bottom:18px!important;
  width:128px!important;
  height:290px!important;
  z-index:1!important;
  pointer-events:none!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center bottom!important;
}
.train-listen-game .station-scene::before{
  left:8px!important;
  background-image:url('assets/train-style/station-decor-left.webp')!important;
}
.train-listen-game .station-scene::after{
  right:8px!important;
  background-image:url('assets/train-style/station-decor-right.webp')!important;
}
.train-listen-game .train-question{
  position:absolute!important;
  left:20px!important;
  top:58px!important;
  transform:none!important;
  z-index:4!important;
  background:#fff6ddf0!important;
  border:4px solid #e3b347!important;
  border-radius:26px!important;
  box-shadow:0 7px 16px rgba(80,57,25,.18)!important;
  padding:10px 12px!important;
  gap:10px!important;
}
.train-listen-game .train-speaker{
  width:70px!important; height:70px!important;
  border-radius:22px!important;
  background:#0d8aa3!important;
  border:4px solid #ffe7a0!important;
  box-shadow:none!important;
}
.train-listen-game .train-question-word{
  min-width:clamp(220px,23vw,340px)!important;
  min-height:70px!important;
  padding:10px 18px!important;
  border:4px solid #e1b24b!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:none!important;
  font-size:clamp(1rem,2.05vmin,1.45rem)!important;
}
.train-listen-game .train-choices{
  position:relative!important;
  z-index:2!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:minmax(150px,1fr)!important;
  gap:14px 18px!important;
  padding-top:78px!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot{
  position:relative!important;
  min-height:150px!important;
  aspect-ratio:auto!important;
}
.train-listen-game .platform-card-image{
  position:absolute!important;
  inset:0 0 16px 0!important;
  border:2px solid #f3f0ea!important;
  border-radius:18px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 8px 16px rgba(54,40,21,.12)!important;
}
.train-listen-game .platform-card-image img{
  width:100%!important; height:100%!important;
  padding:2px!important;
  border-radius:14px!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  background:#fff!important;
}
.train-listen-game .card-feet{bottom:0!important;height:18px!important;width:8px!important;background:#8c673f!important;border-radius:3px!important;}
.train-listen-game .card-feet.left{left:29%!important;}
.train-listen-game .card-feet.right{right:29%!important;}
.train-listen-game .train-choice-slot.used::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 16px 0!important;
  border:2px dashed rgba(176,145,102,.38)!important;
  border-radius:18px!important;
  background:rgba(255,250,242,.22)!important;
}
.train-listen-game .train-choice-slot.used::after{display:none!important;}
.train-listen-game .train-yard{
  background:linear-gradient(180deg,#6f4f39 0%,#5d4230 100%)!important;
  border-top:4px solid #d0a170!important;
  padding:0 18px 10px!important;
  overflow:visible!important;
}
.train-listen-game .train{
  width:min(1500px,99%)!important;
  gap:0!important;
  padding-bottom:7px!important;
}
.train-listen-game .train-wagon{height:100%!important;margin-right:-12px!important;}
.train-listen-game .wagon-shell{height:88%!important;z-index:5!important;}
.train-listen-game .word-wagon .wagon-cargo{
  left:11%!important; right:11%!important; bottom:39%!important; height:66%!important;
}
.train-listen-game .word-wagon .wagon-photo-board{
  width:86%!important; height:100%!important; transform:translateY(-20%)!important;
}
.train-listen-game .word-wagon .board-face{
  width:100%!important; height:100%!important;
  padding:2px!important;
  border:2px solid #fff!important;
  border-radius:9px!important;
  background:#fff!important;
  overflow:hidden!important;
  box-shadow:0 5px 10px rgba(0,0,0,.16)!important;
}
.train-listen-game .word-wagon .board-face img{
  width:100%!important; height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:6px!important;
  display:block!important;
}
.train-listen-game .word-wagon .board-stick{display:none!important;}
.train-listen-game .animal-cargo-v27{
  position:absolute!important;
  left:10%!important; right:10%!important; bottom:38%!important; height:70%!important;
  z-index:3!important; display:flex!important; align-items:flex-end!important; justify-content:center!important;
  overflow:hidden!important;
}
.train-listen-game .animal-cargo-v27 img{
  width:100%!important; height:100%!important;
  object-fit:cover!important;
  object-position:center 32%!important;
  transform:scale(1.14)!important;
  background:transparent!important;
  border-radius:0!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))!important;
  clip-path:ellipse(34% 44% at 50% 43%)!important;
  -webkit-clip-path:ellipse(34% 44% at 50% 43%)!important;
  mask-image:none!important; -webkit-mask-image:none!important;
}
.train-listen-game .locomotive{flex:0 0 clamp(230px,23vw,350px)!important;margin-left:-18px!important;}
.train-listen-game .steam-puff{top:-10%!important;right:8%!important;}
@media(max-width:1200px){
  .train-listen-game .station-scene{padding:118px 88px 28px!important;}
  .train-listen-game .station-scene::before,.train-listen-game .station-scene::after{width:104px!important;height:250px!important;}
}
@media(max-width:980px){
  .train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) 190px!important;}
  .train-listen-game .station-scene{padding:112px 54px 22px!important;}
  .train-listen-game .train-question{left:12px!important;top:54px!important;padding:8px 10px!important;}
  .train-listen-game .train-speaker{width:58px!important;height:58px!important;border-radius:18px!important;}
  .train-listen-game .train-question-word{min-width:150px!important;min-height:56px!important;font-size:1rem!important;}
  .train-listen-game .train-choices{gap:12px!important;grid-auto-rows:minmax(132px,1fr)!important;padding-top:74px!important;}
  .train-listen-game .platform-card-image{border-radius:16px!important;}
  .train-listen-game .platform-card-image img{border-radius:12px!important;}
  .train-listen-game .word-wagon .wagon-photo-board{transform:translateY(-16%)!important;}
}
@media(max-width:760px){
  .train-listen-game .train-listen-stage{grid-template-rows:minmax(0,1fr) 168px!important;}
  .train-listen-game .station-scene{padding:104px 14px 14px!important;}
  .train-listen-game .station-scene::before,.train-listen-game .station-scene::after{display:none!important;}
  .train-listen-game .station-canopy{height:136px!important;}
  .train-listen-game .station-canopy::after{width:210px!important;height:48px!important;bottom:-28px!important;}
  .train-listen-game .station-clock{width:82px!important;}
  .train-listen-game .train-question{left:10px!important;top:46px!important;max-width:calc(100% - 20px)!important;}
  .train-listen-game .train-speaker{width:50px!important;height:50px!important;border-radius:16px!important;}
  .train-listen-game .train-question-word{min-width:118px!important;min-height:48px!important;padding:8px 12px!important;font-size:.96rem!important;}
  .train-listen-game .train-choices{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;grid-auto-rows:minmax(96px,1fr)!important;padding-top:64px!important;}
  .train-listen-game .platform-card-image{inset:0 0 12px 0!important;border-width:2px!important;border-radius:12px!important;}
  .train-listen-game .platform-card-image img{padding:1px!important;border-radius:10px!important;}
  .train-listen-game .word-wagon .wagon-cargo{left:10%!important;right:10%!important;bottom:34%!important;height:70%!important;}
  .train-listen-game .word-wagon .wagon-photo-board{width:90%!important;transform:translateY(-10%)!important;}
  .train-listen-game .animal-cargo-v27{left:8%!important;right:8%!important;bottom:34%!important;height:74%!important;}
  .train-listen-game .animal-cargo-v27 img{transform:scale(1.08)!important;clip-path:ellipse(36% 45% at 50% 43%)!important;-webkit-clip-path:ellipse(36% 45% at 50% 43%)!important;}
}


/* v31 — luister en kies: station exacter naar voorbeeld, 1 rij van 5 tussen pilaren */
.train-listen-game .station-scene{padding:132px 150px 24px!important;background:linear-gradient(180deg,#aee2ff 0 8%,#e6d4a9 8% 30%,#f2e4c6 30% 31%,#e5d2a6 31% 54%,#f2e4c6 54% 55%,#e5d2a6 55% 78%,#f2e4c6 78% 79%,#dcc291 79% 100%)!important;}
.train-listen-game .station-canopy{height:166px!important;background-image:url('assets/train-style/station-pretty.jpg')!important;background-size:cover!important;background-position:center top!important;border-bottom:4px solid #e0b24d!important;}
.train-listen-game .station-canopy::after{content:""!important;position:absolute!important;left:50%!important;top:0!important;transform:translateX(-50%)!important;width:390px!important;height:165px!important;background:url('assets/train-style/station-centerpiece.webp') center top/contain no-repeat!important;z-index:3!important;pointer-events:none!important;}
.train-listen-game .station-clock,.train-listen-game .station-name{display:none!important;}
.train-listen-game .station-scene::before,.train-listen-game .station-scene::after{content:""!important;position:absolute!important;bottom:22px!important;width:150px!important;height:330px!important;z-index:1!important;pointer-events:none!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center bottom!important;}
.train-listen-game .station-scene::before{left:6px!important;background-image:url('assets/train-style/station-decor-left-clean.webp')!important;}
.train-listen-game .station-scene::after{right:6px!important;background-image:url('assets/train-style/station-decor-right-clean.webp')!important;}
.train-listen-game .train-question{top:72px!important;left:18px!important;z-index:4!important;}
.train-listen-game .train-choices{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(185px,1fr)!important;gap:12px!important;padding-top:86px!important;align-items:stretch!important;}
.train-listen-game .train-choice,.train-listen-game .train-choice-slot{min-height:185px!important;}
.train-listen-game .platform-card-image{inset:0 0 14px 0!important;border:2px solid #f5f1e8!important;border-radius:18px!important;background:#fff!important;box-shadow:0 6px 14px rgba(52,38,22,.12)!important;}
.train-listen-game .platform-card-image img{padding:2px!important;border-radius:15px!important;object-fit:cover!important;object-position:center center!important;}
.train-listen-game .card-feet{height:18px!important;width:8px!important;bottom:0!important;}
.train-listen-game .card-feet.left{left:30%!important;}.train-listen-game .card-feet.right{right:30%!important;}
.train-listen-game .train-choice-slot.used::before{inset:0 0 14px 0!important;border-radius:18px!important;background:rgba(255,248,236,.18)!important;}
.train-listen-game .train-yard{padding:0 14px 10px!important;}
.train-listen-game .word-wagon .wagon-cargo{left:11%!important;right:11%!important;bottom:40%!important;height:68%!important;}
.train-listen-game .word-wagon .wagon-photo-board{width:84%!important;height:100%!important;transform:translateY(-20%)!important;}
.train-listen-game .word-wagon .board-face{border:2px solid #fff!important;border-radius:9px!important;padding:2px!important;background:#fff!important;box-shadow:0 4px 10px rgba(0,0,0,.18)!important;overflow:hidden!important;}
.train-listen-game .word-wagon .board-face img{border-radius:6px!important;object-fit:cover!important;object-position:center center!important;}
.train-listen-game .animal-cargo-v27{left:10%!important;right:10%!important;bottom:40%!important;height:72%!important;overflow:visible!important;}
.train-listen-game .animal-cargo-v27 img{object-position:center 22%!important;transform:scale(1.18)!important;clip-path:ellipse(33% 43% at 50% 42%)!important;-webkit-clip-path:ellipse(33% 43% at 50% 42%)!important;}
@media(max-width:1200px){.train-listen-game .station-scene{padding:128px 110px 22px!important;}.train-listen-game .station-scene::before,.train-listen-game .station-scene::after{width:110px!important;height:280px!important;}.train-listen-game .train-choices{grid-auto-rows:minmax(168px,1fr)!important;}}
@media(max-width:900px){.train-listen-game .station-scene{padding:120px 48px 18px!important;}.train-listen-game .station-scene::before,.train-listen-game .station-scene::after{display:none!important;}.train-listen-game .station-canopy::after{width:310px!important;height:132px!important;}.train-listen-game .train-question{top:60px!important;left:12px!important;}.train-listen-game .train-choices{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(132px,1fr)!important;gap:8px!important;padding-top:74px!important;}.train-listen-game .train-choice,.train-listen-game .train-choice-slot{min-height:132px!important;}.train-listen-game .platform-card-image{border-radius:14px!important;}.train-listen-game .platform-card-image img{border-radius:11px!important;}}
@media(max-width:700px){.train-listen-game .train-choices{grid-template-columns:repeat(5,minmax(0,1fr))!important;grid-auto-rows:minmax(92px,1fr)!important;gap:6px!important;}}


/* v32 — luister en kies met houten kratten (optie A: 1 rij van 5) */
.train-listen-game .train-choices{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  grid-auto-rows:minmax(0,1fr)!important;
  gap:12px!important;
  padding-top:86px!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot{
  min-height:200px!important;
}
.train-listen-game .train-choice{
  padding:0 0 14px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
.train-listen-game .platform-card-image{
  position:absolute!important;
  inset:0 0 16px 0!important;
  border-radius:16px!important;
  border:4px solid #bb8747!important;
  background:
    linear-gradient(180deg,#e2bd81 0%,#d7ac68 100%)!important;
  box-shadow:
    0 6px 12px rgba(67,41,16,.22),
    inset 0 0 0 2px #f4d39b,
    inset 0 -8px 0 rgba(132,80,30,.18)!important;
  overflow:hidden!important;
}
.train-listen-game .platform-card-image::before{
  content:""!important;
  position:absolute!important;
  left:10px!important; right:10px!important; top:10px!important; bottom:24px!important;
  border-radius:10px!important;
  border:2px solid rgba(129,83,36,.55)!important;
  background:#fff8ee!important;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)!important;
  z-index:1!important;
}
.train-listen-game .platform-card-image::after{
  content:""!important;
  position:absolute!important;
  left:0!important; right:0!important; bottom:0!important; height:20px!important;
  background:
    linear-gradient(180deg,rgba(124,78,30,.18),rgba(124,78,30,.30)),
    repeating-linear-gradient(90deg,#c89558 0 28px,#b88348 28px 32px)!important;
  border-top:2px solid rgba(128,80,31,.35)!important;
}
.train-listen-game .platform-card-image img{
  position:absolute!important;
  left:14px!important; right:14px!important; top:14px!important; bottom:30px!important;
  width:calc(100% - 28px)!important;
  height:calc(100% - 44px)!important;
  padding:0!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:8px!important;
  z-index:2!important;
  background:#fff8ee!important;
}
.train-listen-game .card-feet{
  width:9px!important; height:20px!important; bottom:0!important; background:#9d7342!important; border-radius:5px!important;
}
.train-listen-game .card-feet.left{left:31%!important;}
.train-listen-game .card-feet.right{right:31%!important;}
.train-listen-game .train-choice-slot.used{
  background:transparent!important; border:0!important; box-shadow:none!important;
}
.train-listen-game .train-choice-slot.used::before{
  content:""!important;
  position:absolute!important;
  inset:0 0 16px 0!important;
  border-radius:16px!important;
  border:3px dashed rgba(153,111,60,.40)!important;
  background:linear-gradient(180deg,rgba(231,201,154,.22),rgba(208,172,118,.10))!important;
}
.train-listen-game .train-choice-slot.used::after{
  content:""!important;
  position:absolute!important;
  left:0!important; right:0!important; bottom:0!important; height:20px!important;
  background:repeating-linear-gradient(90deg,#b88348 0 28px,#a77239 28px 32px)!important;
  border-radius:0 0 10px 10px!important;
}
.train-listen-game .word-wagon .wagon-cargo{
  left:10%!important; right:10%!important; bottom:41%!important; height:68%!important;
}
.train-listen-game .word-wagon .wagon-photo-board{
  width:86%!important; height:100%!important; transform:translateY(-18%)!important;
}
.train-listen-game .word-wagon .board-face{
  position:absolute!important;
  inset:0!important;
  border-radius:12px!important;
  border:3px solid #b57f42!important;
  background:linear-gradient(180deg,#e3be82 0%,#d6ab67 100%)!important;
  box-shadow:0 4px 9px rgba(0,0,0,.18), inset 0 0 0 2px #f2d39e!important;
  overflow:hidden!important;
  padding:0!important;
}
.train-listen-game .word-wagon .board-face::before{
  content:""!important;
  position:absolute!important;
  left:8px!important; right:8px!important; top:8px!important; bottom:18px!important;
  border-radius:8px!important;
  border:2px solid rgba(129,83,36,.5)!important;
  background:#fff8ee!important;
  z-index:1!important;
}
.train-listen-game .word-wagon .board-face::after{
  content:""!important;
  position:absolute!important;
  left:0!important; right:0!important; bottom:0!important; height:16px!important;
  background:repeating-linear-gradient(90deg,#c89558 0 24px,#b88348 24px 28px)!important;
  border-top:2px solid rgba(128,80,31,.35)!important;
}
.train-listen-game .word-wagon .board-face img{
  position:absolute!important;
  left:11px!important; right:11px!important; top:11px!important; bottom:22px!important;
  width:calc(100% - 22px)!important;
  height:calc(100% - 33px)!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:6px!important;
  z-index:2!important;
  display:block!important;
}
@media (max-width:1100px){
  .train-listen-game .train-choice,
  .train-listen-game .train-choice-slot{min-height:178px!important;}
}
@media (max-width:900px){
  .train-listen-game .train-choices{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:8px!important;padding-top:76px!important;}
  .train-listen-game .train-choice,
  .train-listen-game .train-choice-slot{min-height:142px!important;}
  .train-listen-game .platform-card-image{border-width:3px!important;border-radius:14px!important;}
  .train-listen-game .platform-card-image::before{left:8px!important;right:8px!important;top:8px!important;bottom:22px!important;}
  .train-listen-game .platform-card-image img{left:11px!important;right:11px!important;top:11px!important;bottom:27px!important;width:calc(100% - 22px)!important;height:calc(100% - 38px)!important;}
}


/* v33 — VISUAL RESET: match approved screenshot instead of assembling loose station pieces */
.train-listen-game {
  background:#cfeeff!important;
}
.train-listen-game .train-listen-stage {
  height:100%!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) clamp(184px,25vh,235px)!important;
  gap:0!important;
  overflow:hidden!important;
}
.train-listen-game .station-scene {
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:clamp(110px,14vh,138px) clamp(155px,10vw,190px) clamp(36px,4vh,48px)!important;
  background-image:url('assets/train-style/station-reference-bg.jpg')!important;
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
/* The station is now one continuous image. Hide every separately assembled decorative station part. */
.train-listen-game .station-canopy,
.train-listen-game .station-name,
.train-listen-game .station-clock,
.train-listen-game .station-scene::before,
.train-listen-game .station-scene::after,
.train-listen-game .platform-edge {
  display:none!important;
  content:none!important;
}
/* Cover the baked prompt area with the live prompt in the same visual position. */
.train-listen-game .train-question {
  position:absolute!important;
  left:clamp(20px,2.2vw,36px)!important;
  top:clamp(54px,6.4vh,72px)!important;
  z-index:8!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 10px!important;
  border:4px solid #e4b13f!important;
  border-radius:26px!important;
  background:#fff8e9!important;
  box-shadow:0 6px 15px rgba(71,48,18,.18)!important;
}
.train-listen-game .train-speaker {
  width:clamp(62px,6.7vmin,76px)!important;
  height:clamp(62px,6.7vmin,76px)!important;
  padding:10px!important;
  border:4px solid #ffe59a!important;
  border-radius:20px!important;
  background:#0e8ba0!important;
  box-shadow:none!important;
}
.train-listen-game .speaker-glyph {
  width:100%!important;
  height:100%!important;
  fill:none!important;
  stroke:#fff!important;
  stroke-width:5!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
.train-listen-game .train-question-word {
  min-width:clamp(210px,22vw,320px)!important;
  min-height:clamp(62px,6.7vh,78px)!important;
  padding:10px 18px!important;
  border:3px solid #e0b14b!important;
  border-radius:20px!important;
  background:#fff!important;
  font:900 clamp(1rem,2.2vmin,1.45rem)/1 Arial,sans-serif!important;
  color:#20180f!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-shadow:none!important;
}
/* Five crates, exactly one row, matching the approved screenshot. */
.train-listen-game .train-choices {
  position:relative!important;
  z-index:7!important;
  width:100%!important;
  height:100%!important;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:clamp(10px,.9vw,14px)!important;
  align-items:end!important;
  justify-items:stretch!important;
  padding-top:clamp(90px,11vh,116px)!important;
  margin:0!important;
}
.train-listen-game .train-choice,
.train-listen-game .train-choice-slot {
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.train-listen-game .platform-card-image {
  position:absolute!important;
  inset:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.train-listen-game .platform-card-image img {
  position:absolute!important;
  left:8%!important;
  right:8%!important;
  top:10%!important;
  bottom:17%!important;
  width:84%!important;
  height:73%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:4px!important;
  padding:0!important;
  background:#fff!important;
  z-index:1!important;
}
.train-listen-game .platform-card-image::after {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:url('assets/train-style/crate-frame.webp') center/100% 100% no-repeat!important;
  z-index:2!important;
  pointer-events:none!important;
}
.train-listen-game .card-feet {
  display:none!important;
}
.train-listen-game .train-choice-slot.used::before {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:url('assets/train-style/crate-frame.webp') center/100% 100% no-repeat!important;
  opacity:.28!important;
  filter:saturate(.6)!important;
}
.train-listen-game .train-choice-slot.used::after {
  display:none!important;
}
/* Train zone */
.train-listen-game .train-yard {
  position:relative!important;
  min-height:0!important;
  overflow:hidden!important;
  padding:0 12px 8px!important;
  background:linear-gradient(180deg,#76533d 0 16%,#5d412e 16% 100%)!important;
  border-top:4px solid #c59a68!important;
}
.train-listen-game .train {
  position:relative!important;
  z-index:3!important;
  width:min(1500px,99%)!important;
  height:100%!important;
  margin:0 auto!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  gap:0!important;
  padding:0 0 8px!important;
}
.train-listen-game .train-wagon {
  position:relative!important;
  flex:1 1 0!important;
  min-width:0!important;
  height:100%!important;
  margin-right:-12px!important;
  overflow:visible!important;
}
.train-listen-game .wagon-shell {
  position:absolute!important;
  left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  height:88%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  z-index:5!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.26))!important;
}
/* Same crate as on platform, scaled to wagon */
.train-listen-game .word-wagon .wagon-cargo {
  position:absolute!important;
  left:10%!important;
  right:10%!important;
  bottom:39%!important;
  height:68%!important;
  z-index:3!important;
  overflow:visible!important;
}
.train-listen-game .word-wagon .wagon-photo-board {
  position:absolute!important;
  inset:0!important;
  transform:translateY(-18%)!important;
}
.train-listen-game .word-wagon .board-face {
  position:absolute!important;
  inset:0!important;
  border:0!important;
  background:transparent!important;
  padding:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.train-listen-game .word-wagon .board-face img {
  position:absolute!important;
  left:9%!important;right:9%!important;top:10%!important;bottom:18%!important;
  width:82%!important;height:72%!important;
  object-fit:cover!important;
  object-position:center center!important;
  border-radius:3px!important;
  z-index:1!important;
}
.train-listen-game .word-wagon .board-face::after {
  content:""!important;
  position:absolute!important;
  inset:0!important;
  background:url('assets/train-style/crate-frame.webp') center/100% 100% no-repeat!important;
  z-index:2!important;
  pointer-events:none!important;
}
/* Animals: transparent cutouts, large and clearly inside wagon */
.train-listen-game .animal-cargo-v27 {
  position:absolute!important;
  left:5%!important;
  right:5%!important;
  bottom:39%!important;
  height:72%!important;
  z-index:4!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  overflow:visible!important;
}
.train-listen-game .animal-cargo-v27 img {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:scale(1.16)!important;
  background:transparent!important;
  border-radius:0!important;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.16))!important;
  clip-path:none!important;
  -webkit-clip-path:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.train-listen-game .locomotive {
  position:relative!important;
  flex:0 0 clamp(230px,23vw,350px)!important;
  height:100%!important;
  margin-left:-18px!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:flex-end!important;
  overflow:visible!important;
}
.train-listen-game .locomotive>img {
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  z-index:4!important;
}
/* keep smoke / motion / sound from previous versions */
@media (max-width:1100px) {
  .train-listen-game .station-scene {
    padding-inline:clamp(88px,8vw,120px)!important;
  }
  .train-listen-game .train-choices {
    padding-top:88px!important;
    gap:8px!important;
  }
}
@media (max-width:850px) {
  .train-listen-game .station-scene {
    padding:104px 24px 28px!important;
  }
  .train-listen-game .train-question {
    left:12px!important;
    top:48px!important;
  }
  .train-listen-game .train-speaker {
    width:54px!important;height:54px!important;border-radius:17px!important;
  }
  .train-listen-game .train-question-word {
    min-width:130px!important;
    min-height:52px!important;
    padding:8px 12px!important;
    font-size:.96rem!important;
  }
  .train-listen-game .train-choices {
    gap:6px!important;
    padding-top:76px!important;
  }
  .train-listen-game .animal-cargo-v27 img {
    transform:scale(1.10)!important;
  }
}



/* v102 — Optimist fleet launch and clockwise magical menu reveal */
.fleet-launch{
  position:relative;display:block;padding:0;
  background:linear-gradient(#f7fbff14,#dff3ff25),url("assets/optimist-menu-wallpaper-v109.webp") center/cover no-repeat;
}
.fleet-launch::before,.fleet-launch::after{display:none}
.launch-cloud-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.launch-cloud-layer i{position:absolute;left:-18%;width:clamp(100px,13vw,230px);height:clamp(32px,4vw,68px);border-radius:999px;background:#ffffffc7;box-shadow:0 8px 22px #5799ad20;animation:fleet-cloud 48s linear infinite}
.launch-cloud-layer i::before,.launch-cloud-layer i::after{content:"";position:absolute;bottom:8%;border-radius:50%;background:inherit}.launch-cloud-layer i::before{left:16%;width:44%;aspect-ratio:1}.launch-cloud-layer i::after{right:14%;width:34%;aspect-ratio:1}
.launch-cloud-layer i:nth-child(1){top:8%;animation-delay:-9s;transform:scale(.65)}.launch-cloud-layer i:nth-child(2){top:23%;animation-duration:61s;animation-delay:-36s;transform:scale(.9);opacity:.72}.launch-cloud-layer i:nth-child(3){top:38%;animation-duration:55s;animation-delay:-21s;transform:scale(.5);opacity:.58}
.optimist-fleet{position:absolute;z-index:5;inset:50% 0 0;overflow:visible;pointer-events:none}
.fleet-boat{position:absolute;left:var(--x);top:var(--y);width:clamp(134px,21.5vmin,196px);transform:translate(-50%,-50%) scale(var(--scale)) rotateY(var(--face,0deg));transform-origin:50% 50%;filter:drop-shadow(0 9px 8px #164d6542);animation:fleet-idle var(--speed) var(--delay) ease-in-out infinite alternate}
.fleet-boat img{display:block;width:100%;height:auto}.fleet-boat b{position:absolute;left:24%;right:5%;bottom:3%;height:9%;border-radius:50%;border-bottom:4px solid #eaffffcc;opacity:.7}
.fleet-1{--x:6%;--y:20%;--scale:.72;--speed:4.2s;--delay:-1.2s;--mx:27%;--my:42%;--turn:10deg;z-index:4}
.fleet-2{--x:14%;--y:18%;--scale:.88;--speed:4.8s;--delay:-2.8s;--mx:32%;--my:50%;--turn:-8deg;z-index:3}
.fleet-3{--x:23%;--y:8%;--scale:.54;--speed:3.9s;--delay:-.6s;--mx:37%;--my:36%;--turn:7deg;z-index:5}
.fleet-4{--x:31%;--y:16%;--scale:.78;--speed:4.5s;--delay:-2s;--mx:42%;--my:48%;--turn:-9deg;z-index:2}
.fleet-5{--x:39%;--y:10%;--scale:.63;--speed:4.1s;--delay:-3s;--mx:46%;--my:39%;--turn:8deg;z-index:6}
.fleet-6{--x:46%;--y:18%;--scale:.96;--speed:5s;--delay:-1.5s;--mx:48%;--my:51%;--turn:-7deg;z-index:1}
.fleet-launch.gathering .fleet-boat{animation:fleet-gather 7.20s linear both}
.launch-logo-hub{z-index:4;top:77.5%;pointer-events:none;opacity:0}.fleet-launch.gathering .launch-logo-hub{animation:official-logo-reveal .7s 5.55s ease-in-out forwards}
.launch-button.fleet-start{position:absolute;z-index:6;left:50%;bottom:4%;width:min(560px,86vw);min-height:0;padding:14px 24px;border:4px solid #fff;border-radius:28px;grid-template:1fr auto/1fr auto;gap:5px 18px;background:#fff9ddea;backdrop-filter:blur(10px) saturate(1.15);box-shadow:0 14px 36px #164d6540,inset 0 0 0 3px #f5cb4d35;transform:translateX(-50%);animation:fleet-start-arrive .7s 1.9s cubic-bezier(.2,.8,.25,1) both}
.launch-button.fleet-start:active{transform:translateX(-50%) scale(.98)}
.fleet-start .launch-heading{align-items:start;justify-items:start}.fleet-start .launch-heading b{font-size:clamp(1.5rem,3vw,2.35rem)}.fleet-start .launch-heading small{font-size:clamp(.62rem,1vw,.78rem)}.fleet-start strong{grid-column:2;grid-row:1/3;min-width:170px;padding:12px 25px}.fleet-start .launch-instruction{grid-column:1;justify-self:center;width:100%;text-align:center}.fleet-launch.gathering .fleet-start{animation:fleet-button-away .28s forwards;pointer-events:none}
.home-panel.orbit-panel{background:linear-gradient(145deg,#fffbe5a8,#ffefba96);backdrop-filter:blur(4px) saturate(1.06);border-color:#fffbe8d9}
.home.home-entering .home-panel{animation:glass-panel-in .46s ease-out both}.home.home-entering .optimist-hub{animation:hub-arrive 1.15s .08s cubic-bezier(.3,.02,.2,1) both}.home.home-entering .orbit-line{stroke-dasharray:540;stroke-dashoffset:540;animation:orbit-line-grow .72s var(--enter-delay) ease-out forwards}.home.home-entering .orbit-game{animation:orbit-game-arrive .78s calc(var(--enter-delay) + .42s) cubic-bezier(.16,.88,.22,1.22) both}.home.home-entering .orbit-game::after{content:"✦";position:absolute;z-index:5;right:3%;top:2%;color:var(--spark);font-size:clamp(1.8rem,4vmin,3.3rem);text-shadow:0 0 5px #fff,0 0 12px var(--spark),0 0 24px var(--spark);opacity:0;pointer-events:none;animation:orbit-spark .78s calc(var(--enter-delay) + 1.02s) ease-out both}
@keyframes fleet-cloud{from{left:-20%}to{left:112%}}
@keyframes fleet-idle{from{transform:translate(-50%,-50%) scale(var(--scale)) rotateY(var(--face,0deg)) rotate(-2deg)}to{transform:translate(-50%,calc(-50% - 7px)) scale(var(--scale)) rotateY(var(--face,0deg)) rotate(2deg)}}
@keyframes fleet-gather{0%{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--scale)) rotateY(var(--face,0deg));opacity:1}22%{left:var(--mx);top:var(--my);transform:translate(-50%,-50%) scale(calc(var(--scale) * .82)) rotateY(var(--half-face,0deg)) rotate(var(--turn));opacity:1}42%,68%{left:50%;top:55%;transform:translate(-50%,-50%) scale(.74) rotateY(0deg);opacity:1}76%,100%{left:50%;top:55%;transform:translate(-50%,-50%) scale(.74) rotateY(0deg);opacity:0}}
@keyframes official-logo-reveal{0%{opacity:0}100%{opacity:1}}
@keyframes fleet-start-arrive{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.94)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
@keyframes fleet-circle-draw{to{stroke-dashoffset:0}}
@keyframes fleet-circle-fill{to{opacity:1}}
@keyframes fleet-logo-image-reveal{0%{opacity:0;transform:scale(.92);filter:brightness(1.7)}55%{opacity:.78;transform:scale(.98);filter:brightness(1.16)}100%{opacity:1;transform:scale(1);filter:brightness(1)}}
@keyframes fleet-button-away{to{opacity:0;transform:translate(-50%,16px) scale(.95)}}
@keyframes glass-panel-in{from{opacity:0;transform:scale(.96);backdrop-filter:blur(0)}to{opacity:1;transform:none}}
@keyframes hub-arrive{from{opacity:1;transform:translate(-50%,calc(-50% + 26vh));filter:brightness(1)}to{opacity:1;transform:translate(-50%,-50%);filter:brightness(1)}}
@keyframes orbit-line-grow{to{stroke-dashoffset:0}}
@keyframes orbit-game-arrive{from{left:50%;top:50%;opacity:0;transform:translate(-50%,-50%) scale(.18)}to{left:var(--orbit-x);top:var(--orbit-y);opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes orbit-spark{0%{opacity:0;transform:scale(.15) rotate(-35deg)}35%{opacity:1;transform:scale(1.45) rotate(12deg)}100%{opacity:0;transform:scale(2.1) rotate(36deg)}}
@media (max-width:760px){.fleet-boat{width:clamp(78px,17vw,130px)}.launch-button.fleet-start{grid-template:1fr auto/1fr auto}.fleet-start strong{min-width:125px}.launch-logo-hub{top:73%}}
@media (prefers-reduced-motion:reduce){.fleet-boat,.launch-cloud-layer i{animation:none!important}.fleet-launch.gathering .fleet-boat{opacity:0}.fleet-launch.gathering .launch-morph-logo,.fleet-launch.gathering .launch-morph-logo img,.home.home-entering .home-panel,.home.home-entering .optimist-hub,.home.home-entering .orbit-line,.home.home-entering .orbit-game,.home.home-entering .orbit-game::after{animation:none!important;opacity:1;stroke-dashoffset:0}.fleet-launch.gathering .launch-morph-logo img{transform:scale(1)}}

/* v114: one shared side-view silhouette forms the mark without an asset swap. */
.fleet-boat{width:clamp(134px,20.75vmin,189px)}
.fleet-1{--y:40%;--fx:-30px;--fy:0px}.fleet-2{--y:38%;--fx:10px;--fy:-5px}.fleet-3{--y:28%;--fx:8px;--fy:12px}.fleet-4{--y:36%;--fx:24px;--fy:0px}.fleet-5{--y:30%;--fx:0px;--fy:0px}.fleet-6{--y:38%;--fx:-24px;--fy:0px}
.fleet-boat{filter:none}
.optimist-mark{position:relative;width:100%;height:100%}.optimist-mark img{position:absolute;left:50%;top:50%;width:74%;height:74%;object-fit:contain;display:block}
.optimist-mark .mark-yellow{transform:translate(-50%,-50%);z-index:6}.optimist-mark .mark-cyan{transform:translate(calc(-50% + 8px),calc(-50% + 12px));z-index:5}.optimist-mark .mark-green{transform:translate(calc(-50% - 30px),-50%);z-index:4}.optimist-mark .mark-orange{transform:translate(calc(-50% + 10px),calc(-50% - 5px));z-index:3}.optimist-mark .mark-pink{transform:translate(calc(-50% + 24px),-50%);z-index:2}.optimist-mark .mark-purple{transform:translate(calc(-50% - 24px),-50%);z-index:1}
@keyframes fleet-gather{0%{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(var(--scale)) rotateY(var(--face,0deg));opacity:1}22%{left:var(--mx);top:var(--my);transform:translate(-50%,-50%) scale(calc(var(--scale) * .82)) rotateY(var(--half-face,0deg)) rotate(var(--turn));opacity:1}42%,68%{left:calc(50% + var(--fx));top:calc(55% + var(--fy));transform:translate(-50%,-50%) scale(1);opacity:1}76%{left:calc(50% + var(--fx));top:calc(55% + var(--fy));transform:translate(-50%,-50%) scale(1);opacity:.45}84%,100%{left:calc(50% + var(--fx));top:calc(55% + var(--fy));transform:translate(-50%,-50%) scale(1);opacity:0}}

/* v117: trajectories are the reverse decomposition of the official end mark. */
.fleet-1{--y:50%;--arrive:0s}.fleet-2{--y:48%;--arrive:.10s}.fleet-3{--y:38%;--arrive:.20s}.fleet-4{--y:46%;--arrive:.30s}.fleet-5{--y:40%;--arrive:.40s}.fleet-6{--y:48%;--arrive:.50s}
.fleet-launch.gathering .fleet-boat{animation-duration:6.8s;animation-delay:var(--arrive)}
.fleet-launch.gathering .launch-logo-hub{animation-delay:6.45s}

/* v118: clean morph, followed by the circle and glow. */
.launch-logo-hub{opacity:1;overflow:visible;border-color:transparent;background:transparent;background-clip:border-box;box-shadow:none;isolation:isolate}
.launch-logo-hub::before{content:"";position:absolute;z-index:0;inset:-8px;border:8px solid #fff;border-radius:50%;background:#fff;box-shadow:0 0 0 15px #ffd46952,0 14px 30px #261c1748;opacity:0;transform:scale(.94)}
.launch-logo-hub>img{position:relative;z-index:1;width:74%;height:74%;opacity:0;object-fit:contain}
.fleet-launch.gathering .launch-logo-hub{animation:none}
.fleet-launch.gathering .launch-logo-hub>img{animation:launch-official-morph .78s 5.50s ease-in-out forwards}
.fleet-launch.gathering .launch-logo-hub::before{animation:launch-circle-after-morph .68s 6.34s ease-out forwards}
@keyframes launch-official-morph{0%{opacity:0;filter:saturate(.94) brightness(1.05)}45%{opacity:.52}100%{opacity:1;filter:none}}
@keyframes launch-circle-after-morph{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}

/* v119: one calm yellow presentation surface for every standalone concept image. */
:is(.front,.option,.bingo-cell,.check-picture,.remember-big-card,.remember-slot,.remember-options button,.missing-card,.missing-options button,.say-picture,.train-choice,.platform-card-image,.word-cargo-card,.board-face){background:#fff3bd!important}
:is(.front,.option,.bingo-cell,.check-picture,.remember-big-card,.remember-slot,.remember-options button,.missing-card,.missing-options button,.say-picture,.train-choice,.platform-card-image,.word-cargo-card,.board-face)>img{background:#fff3bd!important;mix-blend-mode:multiply}

/* v120: shared, uncropped concept-image viewport across every game. */
:root{--concept-image-bg:#fff;--concept-image-ratio:4/3}
:is(.front,.option,.bingo-cell,.check-picture,.remember-big-card,.remember-slot,.remember-options button,.missing-card,.missing-options button,.say-picture,.train-choice,.platform-card-image,.word-cargo-card,.board-face){background:var(--concept-image-bg)!important}
:is(.front,.option,.bingo-cell,.check-picture,.remember-big-card,.remember-slot,.remember-options button,.missing-card,.missing-options button,.say-picture,.train-choice,.platform-card-image,.word-cargo-card,.board-face) img{object-fit:contain!important;object-position:center center!important;background:var(--concept-image-bg)!important}
.train-listen-game .platform-card-image::before,.train-listen-game .word-wagon .board-face::before{background:var(--concept-image-bg)!important}
.train-listen-game .platform-card-image img,.train-listen-game .word-wagon .board-face img,.train-listen-game .animal-cargo-v27 img{object-fit:contain!important;object-position:center center!important;background:var(--concept-image-bg)!important;mask-image:none!important;-webkit-mask-image:none!important}
.museum-memory .memory-card .front img,.missing-card img,.missing-options button img{object-fit:contain!important;object-position:center center!important}

/* v121: normalized source assets already contain the shared yellow canvas. */
:is(.front,.option,.bingo-cell,.check-picture,.remember-big-card,.remember-slot,.remember-options button,.missing-card,.missing-options button,.say-picture,.train-choice,.platform-card-image,.word-cargo-card,.board-face) img{mix-blend-mode:normal!important}














/* v165: keuzemenu's geometrisch gecentreerd, ook op brede Chromebook-schermen */
.home-panel.orbit-panel{position:relative;display:block}
.home-panel.orbit-panel>.eyebrow{position:absolute;z-index:8;left:clamp(14px,2vw,28px);top:clamp(12px,2vh,22px)}
.home-panel.orbit-panel>h1{position:absolute;z-index:8;left:clamp(14px,2vw,28px);top:clamp(26px,4vh,43px);margin:0}
.optimist-orbit-menu{position:absolute;left:50%;top:50%;width:min(94%,1280px);height:min(78vh,620px);max-height:none;transform:translate(-50%,-50%)}
.cluster-panel.cluster-orbit-panel{position:relative;display:block}
.cluster-panel.cluster-orbit-panel>.choice-header{position:absolute;z-index:8;left:clamp(10px,1.5vw,22px);top:clamp(10px,1.5vh,18px)}
.cluster-orbit-menu{position:absolute;left:50%;top:50%;width:min(94%,1260px);height:min(78vh,620px);max-height:none;transform:translate(-50%,-50%)}
@media (orientation:landscape) and (max-height:720px){
  .optimist-orbit-menu,.cluster-orbit-menu{height:min(76vh,540px);width:min(92%,1160px)}
  .home-panel.orbit-panel>h1{font-size:clamp(1.55rem,4vh,2.25rem)}
  .cluster-panel.cluster-orbit-panel>.choice-header h1{font-size:clamp(1.35rem,3.6vh,2rem)}
}