.story-game{--ink:#153a52;--teal:#087d79;--pale:#f4f9fc;max-width:1160px;margin:0 auto;padding:32px 18px 60px;color:var(--ink);font-family:Arial,sans-serif}.story-game *{box-sizing:border-box}.story-intro{text-align:center;margin:0 auto 26px;max-width:800px}.story-intro .eyebrow{font-size:13px;letter-spacing:.16em;color:var(--teal);font-weight:800}.story-intro h1{font-size:clamp(27px,4vw,44px);line-height:1.17;margin:12px 0}.story-intro p{font-size:17px;line-height:1.6}.story-panel{padding:24px;border:1px solid #d5e3ec;background:#fff;border-radius:24px;box-shadow:0 12px 40px #163e5810}.story-game button,.story-game select{font:inherit;color:inherit;border-radius:12px;border:1px solid #b5cbd9;background:#f6fafc;min-height:46px;padding:10px 16px;cursor:pointer}.story-game button:hover:not(:disabled){border-color:var(--teal);background:#eaf7f4}.story-game button:focus-visible,.story-game select:focus-visible{outline:3px solid #f0b641;outline-offset:3px}.story-game button:disabled{opacity:.5;cursor:default}.story-game .primary{background:var(--teal);border-color:var(--teal);color:white;font-weight:700}.story-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.story-controls label{display:flex;align-items:center;gap:8px}.story-controls label:first-child{flex-wrap:wrap}.story-controls input{width:19px;height:19px}.story-counter{margin-left:auto;font-weight:700;color:var(--teal)}.story-game h2{font-size:26px;margin:24px 0 8px}.story-game h3{font-size:15px;margin:16px 0 12px;font-weight:700}.story-slots,.story-bank{display:grid;grid-template-columns:repeat(var(--cards,3),minmax(0,1fr));gap:12px}.story-slots{padding:14px;background:#edf6f9;border-radius:18px;min-height:180px}.story-game .story-card{padding:0;overflow:hidden;background:#fff;border:2px solid #dce6ec;border-radius:16px;min-width:0;position:relative;display:flex;flex-direction:column;text-align:center;align-items:stretch}.story-card img{width:100%;aspect-ratio:10/7;object-fit:contain;display:block}.story-caption{padding:10px 8px 13px;line-height:1.4;font-size:15px;flex:1}.story-number{background:#153a52;color:#fff;border-radius:50%;position:absolute;left:8px;top:8px;min-width:25px;height:25px;display:grid;place-items:center;font-size:13px;font-weight:800}.story-game .story-empty{border:2px dashed #b4cbd8;display:grid;place-items:center;min-height:150px;background:#f8fcfe;font-size:27px;color:#7997a9}.story-game .story-wrong{border-color:#d39b35;box-shadow:0 0 0 3px #f7dc9a}.story-game .story-right{border-color:#419d85}.story-status{min-height:28px;line-height:1.5;font-weight:700;margin:18px 0;color:#087268}.story-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.story-bank{min-height:50px}.story-dots{display:flex;gap:clamp(2px,.6vw,6px);margin:16px 0}.story-dot{height:9px;flex:1;background:#e2edf2;border-radius:8px}.story-dot.done{background:#35a28c}.story-dot.current{background:#f1bb51}.story-complete{text-align:center;background:#edf9f3;padding:32px;border-radius:20px}.story-complete p{font-size:24px}.story-game [hidden]{display:none!important}.story-footer{text-align:center;font:14px/1.7 Arial,sans-serif;padding:25px 15px;color:#466273}.story-footer strong{display:block;color:#153a52}.story-lang{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:14px;background:#f5f9fc}.story-lang a{color:#153a52;font:14px Arial,sans-serif;padding:7px 9px;border-radius:8px;text-decoration:none}.story-lang a[aria-current]{background:#153a52;color:white}.story-home{display:inline-block;margin:0 0 12px;color:#087d79}.story-game #story-title:focus{outline:none}@media(max-width:760px){.story-panel{padding:15px}.story-slots,.story-bank{grid-template-columns:repeat(2,minmax(0,1fr))}.story-counter{margin-left:0}.story-caption{font-size:14px}.story-slots{padding:8px;gap:8px}.story-game h2{font-size:23px}}@media(prefers-reduced-motion:no-preference){.story-card{transition:border-color .15s,transform .15s}.story-card:hover:not(:disabled){transform:translateY(-2px)}}

.story-photo{display:block;width:100%;aspect-ratio:1/1;position:relative;background-repeat:no-repeat;background-color:#eaf1ef}.story-photo-brand{position:absolute;right:6px;bottom:6px;background:#153a52d9;color:#fff;font:700 9px/1.4 Arial,sans-serif;padding:3px 6px;border-radius:5px;letter-spacing:.02em}

/* Real flag images work on systems without emoji flag support. */
.story-lang a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}.story-lang img.story-flag{display:inline-block!important;flex:0 0 28px;width:28px!important;height:20px!important;object-fit:contain;vertical-align:middle;border-radius:2px;box-shadow:0 0 0 1px #173a521a;max-width:none!important}

.story-celebrate{color:#087d55;background:#e8fff0;border-radius:16px;padding:14px;position:relative;animation:story-cheer .6s ease-out}.story-celebrate::before{content:"🌟 🎉 ";}.story-celebrate::after{content:" 🎉 🌟";}@keyframes story-cheer{0%{transform:scale(.9)}55%{transform:scale(1.04)}100%{transform:scale(1)}}@media(prefers-reduced-motion:reduce){.story-celebrate{animation:none}}

.story-title-row{display:flex;align-items:center;gap:12px;margin:24px 0 8px}.story-title-row h2{margin:0;min-width:0;overflow-wrap:anywhere}.story-game .story-read-title{flex:0 0 46px;width:46px;height:46px;padding:6px;font-size:23px;border-radius:50%;background:#eaf7f4}.story-read-title[aria-pressed="true"]{box-shadow:0 0 0 3px #b9e8dc}.story-audio-status{font-size:14px;line-height:1.5;color:#466273;margin:0 0 8px}.story-audio-status:empty{display:none}