:root{--bar-orange: #FEB444;--bar-orange-soft: #FFC86D;--bar-navy: #003849;--bar-blue: #9FE4F5;--bar-blue-mid: #6ED0E7;--bar-purple: #A775FE;--bar-coral: #FD6A5E;--bar-teal: #0097A7}.hero{background:linear-gradient(160deg,var(--bar-orange) 0%,var(--bar-orange-soft) 100%);border-radius:24px;padding:8px 16px 20px;margin-bottom:14px}.hero-art{display:flex;gap:6px;justify-content:flex-end}.hero-art img{height:76px;width:auto}.hero h1,.hero [class*=title]{color:var(--bar-navy)!important}.chip-nav{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;position:sticky;top:0;background:var(--ds-page, #fff);z-index:5}.chip{flex:0 0 auto;border:2px solid var(--bar-navy);background:var(--bar-blue);color:var(--bar-navy);font-weight:700;font-size:15px;border-radius:999px;min-height:44px;padding:6px 16px;cursor:pointer}.chip:active{background:var(--bar-blue-mid)}.sec{background:var(--bar-orange);border-radius:24px;padding:18px 14px;margin:14px 0;scroll-margin-top:64px}.sec-b{background:var(--bar-orange-soft)}.sec-title{color:var(--bar-navy);font-size:26px;font-weight:800;margin:0 0 4px}.sec-sub{color:#0a4a5e;font-size:15px;margin:0 0 12px;font-weight:600}.mini-title{color:var(--bar-navy);font-weight:800;font-size:17px;margin:18px 0 8px}.tiny{color:#0a4a5e;font-size:13px;text-align:center}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.flip{background:#fff;border:3px solid var(--bar-blue);border-radius:18px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;min-height:44px}.flip.on{border-color:var(--bar-purple);background:#f6efff}.flip-img{width:100%;height:84px;object-fit:contain;border-radius:12px;background:#fff}.flip-letter{font-size:44px;font-weight:800;color:var(--bar-purple);height:84px;display:flex;align-items:center}.flip-word{font-size:19px;font-weight:800;color:var(--bar-navy)}.flip-hint{font-size:12px;color:#4d7d8c}.speak-row{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}.speak{background:#fff;border:2px solid var(--bar-blue-mid);color:var(--bar-navy);border-radius:999px;min-height:44px;padding:6px 14px;font-size:15px;font-weight:700;cursor:pointer}.speak:active{background:var(--bar-blue)}.game{background:#fff;border-radius:20px;padding:14px;margin-top:12px}.q-count{color:#4d7d8c;font-size:13px;text-align:center;margin:0 0 6px}.q-text{color:var(--bar-navy);font-size:20px;font-weight:800;text-align:center;margin:4px 0}.q-sub{color:#0a4a5e;font-size:15px;text-align:center;margin:0 0 10px}.q-img{display:block;margin:0 auto 8px;max-width:220px;max-height:200px;width:auto;height:auto;border-radius:16px;background:#fff}.opts{display:flex;flex-direction:column;gap:10px;margin-top:8px}.opts-img{display:grid;grid-template-columns:1fr 1fr}.opt{background:#fff;border:3px solid var(--bar-blue-mid);border-radius:16px;min-height:56px;padding:10px;font-size:19px;font-weight:800;color:var(--bar-navy);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.opt img{max-width:100%;max-height:150px;object-fit:contain;border-radius:10px}.opt.big{min-height:72px;font-size:24px}.opt.letter-a{border-color:var(--bar-purple);color:var(--bar-purple);font-size:34px}.opt.letter-b{border-color:var(--bar-coral);color:var(--bar-coral);font-size:34px}.opt.right{border-color:var(--bar-teal);background:#e3f6f4}.opt.wrong{border-color:var(--bar-coral);background:#ffe9e7}.opt.dim{opacity:.45}.fb{border-radius:14px;padding:10px 12px;margin-top:12px;text-align:center}.fb p{margin:2px 0 8px;font-size:17px;font-weight:700;color:var(--bar-navy)}.fb.ok{background:#e3f6f4}.fb.no{background:#ffe9e7}.next{background:var(--bar-navy);color:#fff;border:none;border-radius:999px;min-height:48px;padding:8px 22px;font-size:17px;font-weight:800;cursor:pointer}.grid-tap{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tap-cell{background:#fff;border:3px solid var(--bar-blue-mid);border-radius:14px;padding:6px;cursor:pointer;min-height:44px}.tap-cell img{width:100%;height:84px;object-fit:contain}.tap-cell.right{border-color:var(--bar-teal);background:#e3f6f4}.tap-cell.wrong{border-color:var(--bar-coral);background:#ffe9e7;animation:shake .4s}.tap-cell.dim{opacity:.4}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.sort-stage{display:flex;justify-content:center}.num-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.num-cell{background:#fff;border:3px solid var(--bar-blue);border-radius:14px;padding:6px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}.num-cell img{width:100%;height:52px;object-fit:contain}.num-cell span{font-weight:800;color:var(--bar-navy);font-size:14px}.letter-card{background:#fff;border-radius:20px;padding:16px;display:flex;align-items:center;justify-content:space-around;gap:10px;flex-wrap:wrap}.letter-big{font-size:84px;font-weight:800;color:var(--bar-purple);line-height:1}.spin-btn{display:block;margin:8px auto;background:var(--bar-purple);color:#fff;border:none;border-radius:999px;min-height:56px;padding:10px 28px;font-size:20px;font-weight:800;cursor:pointer}.wheel-stage{text-align:center}.wheel-stage.blurred{filter:blur(2px);opacity:.7}.wheel-he{font-size:22px;font-weight:800;color:var(--bar-navy);margin:4px 0 10px}@media (min-width: 768px){.grid-tap{grid-template-columns:repeat(5,1fr)}.num-strip{grid-template-columns:repeat(7,1fr)}.cards{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}html,body{margin:0;padding:0}body{background:#fff3dc;font-family:system-ui,-apple-system,Segoe UI,sans-serif}.file-card{max-width:520px;margin:0 auto;padding:12px 12px 28px}.hero-head h1{font-size:27px;margin:8px 0 2px;font-weight:800}.hero-fact{font-weight:800;color:var(--bar-navy);margin:2px 0;font-size:17px}.hero-intro{color:#0a4a5e;font-size:14px;margin:6px 0 0;line-height:1.5}.closing{color:#0a4a5e;font-size:13px;text-align:center;margin:20px 8px 4px;line-height:1.6}.caption{display:block;font-size:12px;color:#4d7d8c;margin-top:4px}