/* Unified storybook theme shared with the approved park homepage. */
:root{--park-ink:#10284e;--park-muted:#455e78;--park-cream:#fffbee;--park-blue:#439ffc;--park-orange:#ff8c2c;--ink:var(--park-ink);--navy:var(--park-ink);--muted:var(--park-muted)}
html{min-height:100%;background:#bee8ee}
body{min-height:100vh;margin:0;color:var(--park-ink);font-family:ui-rounded,"Trebuchet MS","Microsoft YaHei",system-ui,sans-serif;background:radial-gradient(ellipse at 5% 12%,#ffffffd9 0%,#ffffffb8 5%,transparent 19%),radial-gradient(ellipse at 94% 22%,#ffffffcf 0%,#ffffffa8 5%,transparent 20%),radial-gradient(ellipse at 0% 110%,#9bc875 0%,#c3e299 28%,transparent 52%),radial-gradient(ellipse at 100% 115%,#a4cc7c 0%,#d0e8a4 30%,transparent 54%),linear-gradient(#a9e3fa,#d6f1ec 60%,#e5f0b7);background-attachment:fixed;overflow-x:hidden}
body:before,body:after{display:none}
.park-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;max-width:1280px;margin:0 auto;padding:14px 24px;font-weight:800;color:var(--park-ink)}
.park-nav a{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:8px 18px;border:3px solid #fff;border-radius:22px;background:var(--park-cream);color:var(--park-ink);text-decoration:none;box-shadow:0 4px 0 #d7c795;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.park-nav a:hover{background:#fff0bd}.park-nav a:active{transform:translateY(2px)}
.park-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.park-nav>span{display:flex;align-items:center;gap:10px;font-size:15px}
.park-logo,.mascot{position:relative;display:inline-block;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#fff9e9;filter:none}
.park-logo img{position:absolute;width:869px;max-width:none;height:auto;left:-33px;top:-12px}
.mascot{background:#fff9e9 url('leo-park.png') -33px -12px / 869px auto no-repeat}
.mascot>.lion-art{visibility:hidden;width:48px;height:48px}
main,main.app{position:relative;max-width:1280px;margin:0 auto 24px;padding:20px 24px 24px;border:5px solid #fffdf4;border-radius:32px;background:#fffbeeeb;box-shadow:0 8px 0 #a5c99b66,0 16px 40px #416c5b14}
.header{margin-bottom:16px;gap:12px}
h1,.hero h1{color:var(--park-ink);text-shadow:none;font-weight:900;letter-spacing:0;font-size:clamp(25px,3vw,36px)}
.hero{padding:0 0 8px!important;margin:0!important;min-height:0!important;border:0;background:none;box-shadow:none}
.hero h1{margin:0}.hero h1 span{color:#a85213}
.hero:before,.hero:after{display:none}
.modes{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:14px auto 22px;background:none;padding:0}
.mode,.modes .ctrl,.mode.learn,.mode.learn.active,.modes #learnModeBtn{min-height:56px;min-width:220px;padding:10px 22px;border:3px solid white;border-radius:22px;background:linear-gradient(#64b7ff,#419cfa);color:#fff;box-shadow:0 5px 0 #2d7ac4;text-shadow:0 1px 1px #154a87;filter:none;font-size:22px;font-weight:900}
.mode:not(.learn),.modes #musicModeBtn{background:linear-gradient(#ffa74f,#ff8829);box-shadow:0 5px 0 #c86e21;text-shadow:0 1px 1px #87420d}
.mode.active,.modes .ctrl.selected{outline:3px solid #f5cb58;outline-offset:3px}
.mode:not(.active),.modes .ctrl:not(.selected){filter:saturate(.65)}
.stage{padding:16px 6px 12px;border:0;border-radius:24px;background:none;box-shadow:none}
.banner,.status{color:var(--park-ink);border:2px solid #f1d899;border-radius:20px;background:#fff4d6;box-shadow:none;font-size:18px;line-height:1.5;padding:9px 15px}
.cards,.grid{gap:20px;padding:0 4px}
.card,.card[data-word],.card:nth-child(n){border:3px solid #f6dfb4;outline:4px solid #fffdf6;border-radius:26px;padding:10px 10px 16px;background:linear-gradient(#fffdf8 65%,#fff1d9);box-shadow:0 6px 0 #ddc7a166,0 10px 20px #86683a0c}
.card:nth-child(odd){border-color:#b9dff4;background:linear-gradient(#fffdf8 65%,#eaf6ff);box-shadow:0 6px 0 #9fc9e366,0 10px 20px #386b8a0c}
.picture,.photo{border-radius:18px;background:#fffdf8;object-fit:contain}
.word,.name,.cn{color:var(--park-ink);text-shadow:none}
.word b,.name .initial{color:#bd4d21}
.speaker{display:inline-flex;align-items:center;justify-content:center;border:2px solid white;border-radius:24px;padding:8px 13px;color:#fff;background:linear-gradient(#63baff,#419cfa);box-shadow:0 3px 0 #2d7ac4;text-shadow:0 1px #1d5893;font-size:14px}
.tipline{color:var(--park-muted)}
.topbutton,.topbutton#sound,.action,.action.primary,.action.purple,.ctrl,.quiz-actions button,.bottomline button,.win button{min-height:48px;border:3px solid white;border-radius:20px;padding:9px 18px;background:linear-gradient(#6bbdff,#459ff8);color:#fff;box-shadow:0 4px 0 #2d7ac4;font-weight:800;text-shadow:0 1px #1d5893}
.topbutton#sound,.action.primary,#nextMusicBtn,.win #rest{background:linear-gradient(#ffb258,#ff8c2c);box-shadow:0 4px 0 #ce772b;color:#422806;text-shadow:none}
.letter{color:#bf4c21;text-shadow:2px 2px #fff}
.stars{border-color:#fff;background:#fff3cf;box-shadow:0 3px 0 #dfc580}
.parents{border:2px solid #eee0be;border-radius:20px;background:#fffaf1;color:var(--park-muted);margin:20px auto 0}
.parents .settings{background:none;border:0}
.hint,footer{color:#3d603d}
.card.playing{border-color:#479ff7;outline-color:#fff;box-shadow:0 0 0 5px #b4ddff,0 6px 0 #7db7e5}
.card.correct{border-color:#399358;outline-color:#fff;box-shadow:0 0 0 4px #c3e9bc,0 6px 0 #89bd77}
.card.wrong{border-color:#e3a347;outline-color:#fff;box-shadow:0 0 0 4px #ffe5ad}
.win{border:6px solid #fffdf2;border-radius:30px;background:linear-gradient(#fff5d9,#edf5ce);box-shadow:0 15px 60px #193d4f40}
.win h2{color:#a85213}
button:focus-visible,summary:focus-visible,.park-nav a:focus-visible{outline:4px solid #173e71;outline-offset:5px}
@media(min-width:901px) and (max-height:850px){main,main.app{padding:14px 20px 18px}.park-nav{padding:9px 24px}.header{margin-bottom:10px}.modes{margin:10px auto 18px}.mode,.modes .ctrl{min-height:52px;font-size:20px}.picture,.photo{height:clamp(145px,24vh,220px)}}
@media(max-width:900px){main,main.app{margin:0 14px 20px;padding:18px 16px 22px;max-width:none}.grid,.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.picture,.photo{height:clamp(150px,22vh,225px)}.park-nav{padding:12px 18px}.modes .ctrl,.mode{min-width:200px}}
@media(max-width:520px){main,main.app{margin:0 9px 18px;padding:15px 12px 20px;border-width:3px;border-radius:25px}.park-nav{padding:10px 12px;gap:8px;font-size:14px}.park-nav a{padding:8px 12px}.park-nav>span{font-size:12px;gap:6px}.park-logo{width:34px;height:34px}.park-logo img{width:615px;left:-23px;top:-8px}.modes{gap:10px}.mode,.modes .ctrl,.modes #learnModeBtn{flex:1;min-width:0;min-height:54px;font-size:18px;padding:9px 7px;border-radius:18px}.cards,.grid{gap:19px 14px;padding:0 2px}.card,.card[data-word],.card:nth-child(n){padding:7px 7px 13px;border-radius:22px;outline-width:3px}.picture,.photo{height:clamp(115px,20vh,180px)}.banner,.status{font-size:15px}.name{font-size:22px}.topbutton,.topbutton#sound{font-size:14px;padding:9px 7px}.topbutton .ico{width:18px;margin-right:3px}.speaker{font-size:12px;padding:7px 9px}.word{font-size:30px}.hero h1,h1{font-size:25px}.stage{padding:12px 2px}.mascot{width:40px;height:40px;background-size:724px auto;background-position:-27px -10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media print{body{background:#fff}main,main.app{border:0;box-shadow:none;background:#fff}.park-nav{display:none}}