:root {
  --deep: #073a79;
  --blue: #079ee3;
  --light: #eefdff;
  --white: #fff;
  --yellow: #ffd440;
  --orange: #ff8c25;
  --purple: #9b42e7;
  --green: #62bd20;
  --ink: #103779;
  --shadow: 0 14px 35px rgba(3, 58, 122, .24), inset 0 2px 0 rgba(255,255,255,.7);
  font-family: Nunito, "Trebuchet MS", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% -20%, rgba(142,241,255,.9), transparent 45%),
    linear-gradient(#14bff0 0%, #078cd1 46%, #03589c 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .2;
  background: repeating-linear-gradient(110deg, transparent 0 95px, rgba(255,255,255,.25) 98px 104px, transparent 108px 190px);
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.panel { background: rgba(255,255,255,.94); border: 3px solid rgba(255,255,255,.75); box-shadow: var(--shadow); }

#bubble-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.bg-bubble { position: absolute; bottom: -80px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.9), rgba(255,255,255,.08) 28%, rgba(0,180,255,.08)); animation: rise linear infinite; }
@keyframes rise { to { transform: translateY(-120vh) translateX(40px) rotate(180deg); opacity: .15; } }
.sea-floor { position: fixed; z-index: -1; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(#e9bf73, #bd7c42); border-radius: 50% 50% 0 0 / 18px 18px 0 0; opacity: .85; }
.sea-floor i { position: absolute; bottom: 40px; width: 20px; height: 100px; border-radius: 50% 50% 10px 10px; background: #8c40be; transform-origin: bottom; animation: sway 3s ease-in-out infinite alternate; }
.sea-floor i:nth-child(1){left:3%}.sea-floor i:nth-child(2){left:6%;height:70px;background:#ef654d;animation-delay:-1s}.sea-floor i:nth-child(3){right:5%;height:120px}.sea-floor i:nth-child(4){right:9%;height:65px;background:#1db784;animation-delay:-2s}.sea-floor i:nth-child(5){left:50%;height:48px;background:#ed5b8b}
@keyframes sway { to { transform: skewX(9deg) rotate(3deg); } }

.screen { min-height: 100vh; display: grid; place-items: center; padding: 30px; }
.profile-card { position: relative; width: min(580px, 96vw); padding: 36px 52px 42px; border-radius: 42px; text-align: center; }
.profile-card h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 6px 0; }
.profile-card > p:not(.eyebrow) { margin: 4px auto 22px; max-width: 410px; }
.profile-mascot { position: absolute; right: -38px; top: -45px; font-size: 94px; filter: drop-shadow(0 10px 8px rgba(0,60,100,.28)); animation: bob 2.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(4deg); } }
.brand { border: 0; background: transparent; color: white; display: flex; align-items: center; gap: 9px; text-align: left; font-weight: 1000; font-size: 22px; line-height: .9; text-shadow: 0 2px 0 #075ca5; }
.brand small { display: block; color: var(--yellow); font-size: 9px; letter-spacing: 1.1px; margin-top: 7px; }
.brand-large { display: inline-flex; color: #148bd2; font-size: 32px; text-shadow: none; margin-bottom: 12px; }
.brand-star { color: #ff7f32; font-size: 40px; -webkit-text-stroke: 2px white; filter: drop-shadow(0 3px 1px rgba(0,64,136,.3)); }
.eyebrow { text-transform: uppercase; color: #098dca; font-size: 13px; font-weight: 900; letter-spacing: 1.8px; margin: 0; }
#student-name { width: 100%; padding: 16px 20px; border: 3px solid #a8def3; border-radius: 18px; color: var(--ink); font-size: 20px; font-weight: 800; outline: none; text-align: center; }
#student-name:focus { border-color: #0ba6e6; box-shadow: 0 0 0 5px rgba(11,166,230,.14); }
.avatar-picker { border: 0; margin: 18px 0; padding: 0; }
.avatar-picker legend { width: 100%; font-weight: 800; margin-bottom: 9px; }
.avatar-picker label { display: inline-grid; place-items: center; margin: 3px; }
.avatar-picker input { position: absolute; opacity: 0; }
.avatar-picker span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 19px; font-size: 37px; background: #e8faff; border: 3px solid transparent; transition: .2s; }
.avatar-picker input:checked + span { background: #fff6be; border-color: var(--yellow); transform: translateY(-4px) scale(1.08); }

.primary-btn, .help-btn, .back-btn, .round-btn { border: 0; font-weight: 900; transition: transform .18s, filter .18s; }
.primary-btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; color: white; padding: 13px 28px; border-radius: 18px; font-size: 19px; background: linear-gradient(#c560ef, #8623d3); border: 3px solid rgba(255,255,255,.45); box-shadow: 0 6px 0 #6517ae, 0 10px 16px rgba(92,22,158,.25); }
.primary-btn.green { background: linear-gradient(#8ad934, #50aa16); box-shadow: 0 6px 0 #34870d, 0 10px 16px rgba(44,119,13,.25); }
.primary-btn.blue { background: linear-gradient(#37b5ff, #087bdc); box-shadow: 0 6px 0 #0756ae, 0 10px 16px rgba(7,83,160,.25); }
.primary-btn:hover, .help-btn:hover, .back-btn:hover, .round-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.primary-btn:active, .help-btn:active { transform: translateY(3px); }
.wide { width: 100%; }
.help-btn { background: white; color: #7c2bc3; padding: 9px 18px; border-radius: 15px; border: 2px solid currentColor; }
.green-outline { color: #3f9c20; }.blue-outline { color: #087bdc; }

.app { padding: 15px 22px 100px; max-width: 1500px; margin: auto; }
.topbar { height: 78px; padding: 9px 15px 9px 20px; border-radius: 27px; background: rgba(255,255,255,.23); display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 15px; backdrop-filter: blur(15px); position: sticky; top: 10px; z-index: 20; }
.topbar nav { justify-self: center; display: flex; gap: 9px; padding: 7px; border-radius: 19px; background: rgba(255,255,255,.88); }
.topbar nav button { border: 0; background: transparent; color: var(--ink); padding: 8px 17px; border-radius: 13px; font-weight: 900; font-size: 15px; }
.topbar nav button.active { background: #dff8ff; box-shadow: inset 0 -3px #16a8e2; }
.player-summary { display: flex; align-items: center; gap: 8px; }
.coin-pill, .player-pill, .icon-btn { border: 2px solid rgba(255,255,255,.6); background: rgba(255,255,255,.9); color: var(--ink); border-radius: 999px; min-height: 45px; font-weight: 900; }
.coin-pill { display: grid; place-items: center; padding: 0 14px; color: #8b5a00; }
.icon-btn { width: 45px; font-size: 19px; }
.player-pill { display: flex; align-items: center; gap: 7px; padding: 4px 13px 4px 5px; }
.player-pill > span:first-child { width: 36px; height: 36px; border-radius: 50%; background: #c7f5ff; display: grid; place-items: center; font-size: 23px; }

.view { display: none; padding-top: 40px; }
.view.active { display: block; animation: enter .35s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(12px); } }
.hero-copy { text-align: center; color: white; text-shadow: 0 3px 0 rgba(4,66,134,.35); }
.hero-copy .eyebrow { color: #c8f5ff; }
.hero-copy h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 5px 0; }
.hero-copy > p:last-child { font-size: 18px; margin: 5px; }
.mini-progress { width: min(700px, 95%); margin: 22px auto 28px; border-radius: 20px; padding: 10px 18px; display: flex; align-items: center; justify-content: center; gap: 13px; }
.progress-piece { width: 62px; height: 38px; display: grid; place-items: center; background: #c6d5dd; color: #71838e; border-radius: 8px; font-size: 24px; filter: grayscale(1); }
.progress-piece.open { background: #f5d189; color: #9d5a17; filter: none; animation: unlock .5s ease-out; }
@keyframes unlock { 50% { transform: scale(1.18) rotate(-4deg); box-shadow: 0 0 25px #ffe45b; } }
.progress-line { width: 36px; border-top: 4px dotted #78b5ce; }

.game-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.game-card { min-width: 0; position: relative; overflow: hidden; border-radius: 32px; background: white; border: 5px solid rgba(255,255,255,.85); box-shadow: var(--shadow); transition: transform .22s; }
.game-card:hover { transform: translateY(-7px); }
.card-scene { height: 245px; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 5%, #4fe3ff, #087dc5 70%, #07559e); border-radius: 26px 26px 12px 12px; }
.card-scene::after { content: ""; position: absolute; inset: auto 0 0; height: 42px; background: #e7bc70; border-radius: 50% 50% 0 0; }
.card-body { text-align: center; padding: 19px 18px 24px; position: relative; }
.card-body h2 { margin: 0; color: var(--ink); font-size: 28px; }
.card-body p { margin: 6px auto 12px; min-height: 42px; }
.card-kicker { color: #098dc9; text-transform: uppercase; letter-spacing: 1px; font-size: 11px; font-weight: 900; min-height: 0 !important; margin: 0 !important; }
.number-badge { position: absolute; top: -25px; left: 17px; width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 4px solid #69cdf1; font-weight: 1000; font-size: 21px; }
.card-coins { height: 40px; display: flex; justify-content: center; gap: 7px; margin-bottom: 12px; }
.coin { display: grid; place-items: center; width: 34px; height: 34px; background: #d5e1e6; color: #9eabb2; border: 3px solid #bfccd2; border-radius: 50%; font-size: 19px; filter: grayscale(1); }
.coin.earned { background: radial-gradient(circle at 35% 25%, #fff8a3, #ffc522 52%, #e58a00); border-color: #ffe875; color: #925100; filter: none; box-shadow: 0 2px 0 #bd7100; }
.card-body .primary-btn { width: 74%; margin: 1px auto 13px; }
.card-body .help-btn { width: 67%; }

.bubble-preview { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; padding: 40px 32px; }
.bubble-preview span { width: 70px; height: 70px; border-radius: 50%; display: grid; place-items: center; color: white; font-size: 35px; font-weight: 1000; border: 4px solid rgba(255,255,255,.75); box-shadow: inset 0 5px 8px rgba(255,255,255,.4), 0 7px 0 rgba(4,50,128,.3); z-index: 1; }
.bubble-preview span:nth-child(odd){background:#ec4e7d}.bubble-preview span:nth-child(even){background:#46bd56}.bubble-preview span:nth-child(3){background:#654ae6}
.shark-preview { position: relative; }
.mini-shark { position: absolute; left: 35px; top: 75px; width: 185px; height: 95px; background: #69d2ee; border: 5px solid #e7fbff; border-radius: 60% 42% 45% 58%; transform: rotate(-4deg); z-index: 2; box-shadow: inset 0 -18px rgba(24,126,175,.25); }
.mini-shark::before { content:""; position:absolute; left:72px; top:-48px; border: 30px solid transparent; border-bottom-color:#69d2ee; transform:rotate(-8deg); }
.mini-shark::after { content:""; position:absolute; left:-45px; top:22px; border: 38px solid transparent; border-right-color:#69d2ee; }
.shark-eye { position:absolute; right:34px; top:18px; width:16px; height:20px; border-radius:50%; background:#102c50; border:5px solid white; box-sizing:content-box; }
.shark-mouth { position:absolute; right:-3px; top:47px; width:60px; height:29px; background:#76364b; border-radius:6px 50% 50% 45%; border:3px solid white; animation: chomp 1.5s infinite; transform-origin:left; }
@keyframes chomp { 50% { transform:scaleY(.25); } }
.preview-fish { position:absolute; right:35px; padding:8px 18px 8px 23px; border-radius:50% 60% 60% 50%; color:white; font-weight:900; z-index:2; border:3px solid white; }
.preview-fish::after { content:""; position:absolute; right:-25px; top:3px; border:15px solid transparent; border-left-color:currentColor; }
.preview-fish.red { top:45px;background:#ed4763;color:#ed4763}.preview-fish.yellow{top:130px;background:#f5bd1e;color:#f5bd1e}.preview-fish.red::before{content:"red";color:white}.preview-fish.yellow::before{content:"3";color:white}
.preview-fish.red,.preview-fish.yellow { font-size:0 }.preview-fish::before{font-size:18px}
.mini-sub { position:absolute; left:35px; bottom:64px; width:145px; height:75px; background:#f49a24; border:5px solid #ffd865; border-radius:55% 44% 44% 55%; z-index:3; color:#0c74b5; display:grid;place-items:center;font-size:45px;box-shadow:inset 0 -14px #dd681f;}
.mini-sub::before{content:"";position:absolute;top:-34px;left:65px;width:30px;height:35px;border:9px solid #ffd865;border-bottom:0;border-radius:14px 14px 0 0}.mini-sub::after{content:"";position:absolute;left:-32px;border:22px solid transparent;border-right-color:#f49a24}.mini-sub span{position:absolute;right:-10px;width:15px;height:60px;border-radius:50%;background:#ffe347;animation:propeller .4s linear infinite}@keyframes propeller{to{transform:rotate(180deg)}}
.preview-beam { position:absolute;left:167px;top:105px;width:120px;height:40px;background:linear-gradient(90deg,rgba(255,242,83,.65),transparent);clip-path:polygon(0 45%,100% 0,100% 100%,0 55%);z-index:2;}
.picture-bubble{position:absolute;right:30px;top:32px;width:65px;height:65px;border-radius:50%;display:grid;place-items:center;background:white;font-size:37px;z-index:3;border:4px solid #9be8ff}.picture-bubble:last-child{top:125px;right:60px}

.section-heading { display:flex; align-items:center; justify-content:center; position:relative; color:white; text-align:center; margin-bottom:25px; }
.section-heading .back-btn { position:absolute; left:0; }
.section-heading h1 { margin:2px; font-size:42px; }.section-heading .eyebrow{color:#c9f5ff}
.back-btn { padding:11px 18px; border-radius:15px; background:white; color:var(--ink); }
.map-layout { display:grid;grid-template-columns:1.45fr .65fr;gap:22px;max-width:1100px;margin:auto; }
.treasure-map { min-height:520px;border-radius:34px;padding:25px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:rgba(8,78,123,.38);overflow:hidden;position:relative; }
.map-piece { display:grid;place-items:center;min-height:350px;background:#6d8b93;color:#49656c;filter:grayscale(1);font-size:60px;position:relative;overflow:hidden;border:5px solid rgba(255,255,255,.3); }
.map-piece:first-child{border-radius:22px 0 0 22px}.map-piece:last-child{border-radius:0 22px 22px 0}
.map-piece.open { filter:none;background:#f1d18e;color:#8b541d;box-shadow:inset 0 0 40px rgba(128,69,20,.18); }
.map-piece.open::before { content:"";position:absolute;inset:0;background:repeating-linear-gradient(15deg,transparent 0 40px,rgba(117,77,31,.08) 42px 44px); }
.map-piece .route { position:absolute;border:5px dashed #bd452e;border-radius:50%;width:80%;height:140px;transform:rotate(-20deg); }
.map-piece .land { font-size:90px;z-index:1;filter:sepia(.4); }
.map-piece.locked::after { content:"🔒";position:absolute;font-size:42px;filter:none; }
.map-info { border-radius:30px;padding:28px;text-align:center; }
.map-compass{font-size:65px;color:#e6a422;animation:spin 8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.map-info h2{font-size:28px;margin:5px}.map-info p{line-height:1.5}.map-list-row{display:flex;align-items:center;justify-content:space-between;padding:10px 5px;border-bottom:2px solid #e4f1f5;font-weight:800}.map-list-row span:last-child{font-size:20px}

.game-toolbar { border-radius:22px;padding:10px 16px;display:grid;grid-template-columns:auto 1fr auto auto;gap:15px;align-items:center;min-height:66px; }
#game-title { font-size:24px;font-weight:1000;text-align:center; }
#game-status { font-weight:900;white-space:nowrap; }
.round-btn { width:46px;height:46px;border-radius:50%;background:#ffe258;font-size:20px;color:#765000; }
.game-stage { margin:18px auto 0;border-radius:32px;min-height:610px;position:relative;overflow:hidden;background:linear-gradient(#26cef3,#0785cd 55%,#04549c); }

/* Bubble Match */
.match-wrap { padding:24px;display:grid;grid-template-columns:minmax(300px,650px) 270px;gap:25px;justify-content:center; }
.match-board { width:min(68vh,650px);max-width:100%;aspect-ratio:1;display:grid;grid-template-columns:repeat(7,1fr);gap:5px;padding:9px;border-radius:25px;background:rgba(2,54,119,.38);border:4px solid rgba(255,255,255,.4); }
.tile { border:0;border-radius:50%;color:white;font-weight:1000;font-size:clamp(18px,3vw,34px);text-shadow:0 2px 0 rgba(0,0,0,.25);box-shadow:inset 0 5px 7px rgba(255,255,255,.45),inset 0 -7px 8px rgba(0,0,0,.12),0 4px 0 rgba(2,57,116,.25);position:relative;transition:transform .25s,opacity .25s; }
.tile::after { content:"";position:absolute;left:19%;top:13%;width:24%;height:14%;border-radius:50%;background:rgba(255,255,255,.55);transform:rotate(-25deg); }
.tile[data-letter="A"]{background:#ed4f83}.tile[data-letter="B"]{background:#43b765}.tile[data-letter="C"]{background:#429dde}.tile[data-letter="D"]{background:#9d58dd}.tile[data-letter="E"]{background:#f09b29}.tile[data-letter="F"]{background:#33bfc1}
.tile.selected { transform:scale(.86);outline:5px solid #fff56b;z-index:2; }
.tile.hint { animation:hint 1s infinite;z-index:3; }
@keyframes hint {50%{transform:scale(1.17);box-shadow:0 0 0 8px #fff46f,0 0 25px #fff}}
.tile.pop { transform:scale(1.4);opacity:0; }
.tile.bonus-row::before{content:"↔";position:absolute;inset:0;display:grid;place-items:center;color:#fff600;font-size:.8em}.tile.bonus-col::before{content:"↕";position:absolute;inset:0;display:grid;place-items:center;color:#fff600;font-size:.8em}.tile.rainbow{background:conic-gradient(#ec426a,#ffbd2e,#52c65a,#36a9e8,#a653dc,#ec426a)}
.match-side { color:white;padding-top:10px; }
.mission-card { background:rgba(255,255,255,.93);color:var(--ink);padding:18px;border-radius:22px;text-align:center;box-shadow:var(--shadow); }
.mission-letter {font-size:52px;color:#e73d78;font-weight:1000}.big-count{font-size:30px;font-weight:1000}.meter{height:16px;background:#cde1e8;border-radius:20px;overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#58be29,#cbe52a);transition:.3s}
.move-count{font-size:22px;font-weight:900;margin:18px 0;text-align:center}.match-tip{background:rgba(0,55,120,.32);padding:14px;border-radius:15px;text-align:center}

/* Shark game */
.shark-game { position:absolute;inset:0;padding:24px;display:flex;flex-direction:column; }
.question-cloud { align-self:center;background:white;border:4px solid #b8efff;border-radius:25px;padding:10px 25px;min-width:300px;text-align:center;z-index:3;box-shadow:var(--shadow); }
.question-cloud small{display:block;color:#5491ab;font-weight:900;text-transform:uppercase}.question-cloud strong{font-size:30px}.ocean-lane{position:relative;flex:1;min-height:440px;}
.shark-character{position:absolute;left:6%;top:45%;width:230px;height:120px;background:#68d3ee;border:6px solid #d8faff;border-radius:58% 44% 45% 58%;z-index:4;transition:left .65s ease-in,top .65s ease-in,transform .4s;box-shadow:inset 0 -24px rgba(19,117,169,.27),0 14px 20px rgba(1,56,116,.25);animation:swim 2s ease-in-out infinite alternate;}
@keyframes swim{to{transform:translateY(-8px) rotate(-2deg)}}
.shark-character::before{content:"";position:absolute;left:78px;top:-65px;border:40px solid transparent;border-bottom-color:#68d3ee;transform:rotate(-10deg)}.shark-character::after{content:"";position:absolute;left:-65px;top:25px;border:45px solid transparent;border-right-color:#68d3ee}
.shark-character .eye{position:absolute;right:48px;top:22px;width:17px;height:20px;border-radius:50%;background:#10283d;border:6px solid white;box-sizing:content-box}.shark-character .mouth{position:absolute;right:-4px;top:62px;width:70px;height:34px;border-radius:5px 60% 60% 45%;background:#773546;border:4px solid white;transition:.2s;transform-origin:left}.shark-character.eating .mouth{height:70px;top:42px;animation:bigchomp .25s 3 alternate}.shark-character.eating{animation:none}@keyframes bigchomp{to{transform:scaleY(.15)}}
.fish-option{position:absolute;right:8%;width:150px;height:84px;border:5px solid white;border-radius:55% 62% 62% 50%;display:grid;place-items:center;color:white;font-size:23px;font-weight:1000;box-shadow:inset 0 -12px rgba(0,0,0,.12),0 7px 10px rgba(0,54,100,.2);transition:transform .2s,opacity .4s;z-index:2;}
.fish-option::after{content:"";position:absolute;right:-53px;border:28px solid transparent;border-left-color:inherit}.fish-option:nth-child(2){top:10%}.fish-option:nth-child(3){top:39%;right:19%}.fish-option:nth-child(4){top:68%}.fish-option:hover{transform:scale(1.08)}.fish-option.wrong{animation:wiggle .35s 2;opacity:.45}@keyframes wiggle{25%{transform:translateX(-10px)}75%{transform:translateX(10px)}}

/* Submarine */
.topic-select {padding:40px;text-align:center;color:white}.topic-select h2{font-size:34px;margin:5px}.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:900px;margin:35px auto}.topic-btn{border:4px solid white;border-radius:26px;background:rgba(255,255,255,.92);padding:26px 12px;color:var(--ink);font-weight:1000;font-size:18px;box-shadow:var(--shadow);transition:.2s}.topic-btn span{font-size:60px;display:block;margin-bottom:8px}.topic-btn:hover{transform:translateY(-7px) rotate(-1deg)}
.sub-game{position:absolute;inset:0;padding:22px}.sub-question{text-align:center;color:white;text-shadow:0 3px rgba(0,50,110,.4);font-size:24px;font-weight:900}.sub-question strong{font-size:34px;display:block}.submarine-character{position:absolute;left:5%;top:42%;width:220px;height:115px;background:#f49a24;border:7px solid #ffd55b;border-radius:58% 45% 45% 58%;z-index:4;box-shadow:inset 0 -22px #d9641e,0 12px 18px rgba(0,47,100,.3);transition:top .45s;animation:swim 2s ease-in-out infinite alternate}.submarine-character::before{content:"";position:absolute;top:-53px;left:102px;width:45px;height:55px;border:13px solid #ffd55b;border-bottom:0;border-radius:18px 18px 0 0}.submarine-character::after{content:"";position:absolute;left:-58px;top:30px;border:38px solid transparent;border-right-color:#f49a24}.sub-window{position:absolute;width:47px;height:47px;border-radius:50%;background:#1dbbe1;border:7px solid #ffe273;top:25px}.sub-window.one{left:42px}.sub-window.two{left:104px}.sub-propeller{position:absolute;right:-17px;top:20px;width:20px;height:75px;border-radius:50%;background:#fff24f;animation:propeller .25s linear infinite}.beam{position:absolute;left:calc(5% + 205px);top:calc(42% + 48px);width:0;height:80px;background:linear-gradient(90deg,rgba(255,244,93,.9),rgba(255,244,93,.08));clip-path:polygon(0 48%,100% 0,100% 100%,0 52%);z-index:1;transform-origin:left center;transition:width .35s,transform .35s;pointer-events:none}.picture-options{position:absolute;left:38%;right:5%;top:100px;bottom:25px;display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.picture-option{border:5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.92);border-radius:28px;font-size:70px;display:grid;place-items:center;box-shadow:var(--shadow);transition:.2s;min-height:150px}.picture-option:hover{transform:scale(1.04)}.picture-option.correct{box-shadow:0 0 0 9px #a9f234,0 0 30px white;animation:correct .5s}@keyframes correct{50%{transform:scale(1.1) rotate(3deg)}}.picture-option.wrong{animation:wiggle .3s 2;opacity:.55}

/* Modals */
.modal { position:fixed;inset:0;background:rgba(0,35,80,.67);display:grid;place-items:center;padding:20px;z-index:100;backdrop-filter:blur(5px); }
.modal-card { border-radius:34px;width:min(620px,96vw);max-height:90vh;overflow:auto;padding:34px;position:relative;text-align:center;animation:modalIn .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes modalIn{from{transform:scale(.7);opacity:0}}
.modal-close { position:absolute;right:15px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:#e5f5fa;color:var(--ink);font-size:27px;font-weight:900; }
.how-icon{font-size:80px;margin:5px}.modal-card h2{font-size:34px;margin:5px}.modal-card p{font-size:17px;line-height:1.5}.result-coins{display:flex;justify-content:center;gap:12px;margin:20px}.result-coins .coin{width:65px;height:65px;font-size:35px}.result-actions{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.result-score{font-size:55px;font-weight:1000;color:#098eca;margin:5px}.new-map-piece{background:#fff1bd;padding:12px;border-radius:15px;color:#9b5f0d;font-weight:900;animation:glow 1s infinite alternate}@keyframes glow{to{box-shadow:0 0 25px #ffce28;transform:scale(1.03)}}
.treasure-scene{overflow:hidden}.chest{font-size:130px;display:inline-block;animation:chestOpen .8s cubic-bezier(.2,1.5,.5,1)}@keyframes chestOpen{from{transform:scale(.5) rotate(-8deg)}50%{transform:scale(1.15) rotate(5deg)}}.treasure-scene h2{color:#e39400}.confetti{position:fixed;z-index:120;font-size:30px;animation:confetti 2.2s ease-out forwards;pointer-events:none}@keyframes confetti{to{transform:translate(var(--x),100vh) rotate(720deg);opacity:0}}
.toast { position:fixed;left:50%;bottom:25px;transform:translate(-50%,120px);background:#083f7a;color:white;padding:12px 24px;border-radius:999px;font-weight:900;z-index:200;box-shadow:var(--shadow);transition:.3s; }.toast.show{transform:translate(-50%,0)}

@media(max-width:1000px){.topbar{grid-template-columns:auto 1fr auto}.topbar nav span,#header-name{display:none}.topbar nav button{font-size:20px;padding:7px 11px}.game-grid{grid-template-columns:1fr;max-width:570px;margin:auto}.card-scene{height:230px}.map-layout{grid-template-columns:1fr}.match-wrap{grid-template-columns:1fr}.match-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.match-board{margin:auto}.topic-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.app{padding:8px 8px 70px}.topbar{height:65px;border-radius:20px;padding:5px 8px;grid-template-columns:auto 1fr}.topbar>.brand{font-size:0}.topbar>.brand .brand-star{font-size:35px}.topbar nav{gap:0;padding:4px}.topbar nav button{font-size:17px;padding:6px 8px}.player-summary{grid-column:2;grid-row:1;justify-self:end}.player-pill{display:none}.coin-pill{padding:0 9px;min-height:39px}.icon-btn{width:39px;min-height:39px}.view{padding-top:25px}.hero-copy h1{font-size:30px}.profile-card{padding:30px 20px}.profile-mascot{font-size:60px;right:-5px;top:-40px}.game-toolbar{grid-template-columns:auto 1fr auto;padding:7px}.game-toolbar #game-status{grid-column:1/-1;text-align:center}.game-stage{min-height:670px}.match-wrap{padding:9px;gap:10px}.match-board{width:100%;gap:3px;padding:5px}.match-side{grid-template-columns:1fr}.mission-card{padding:10px}.move-count{margin:6px}.tile{font-size:20px}.topic-select{padding:30px 10px}.topic-grid{gap:9px}.topic-btn{padding:16px 5px;font-size:15px}.topic-btn span{font-size:43px}.shark-character{width:145px;height:80px;left:2%}.shark-character::before{left:45px;top:-45px;border-width:27px}.shark-character::after{left:-44px;top:16px;border-width:31px}.shark-character .eye{right:28px;top:13px}.shark-character .mouth{right:-4px;top:42px;width:50px;height:24px}.fish-option{width:105px;height:66px;right:7%;font-size:17px}.fish-option:nth-child(3){right:8%}.fish-option::after{right:-42px;border-width:22px}.submarine-character{width:130px;height:76px;left:2%;top:44%}.submarine-character::before{left:60px;top:-39px;width:30px;height:39px;border-width:9px}.submarine-character::after{left:-39px;top:20px;border-width:25px}.sub-window{width:33px;height:33px;border-width:5px;top:18px}.sub-window.one{left:24px}.sub-window.two{left:66px}.sub-propeller{height:50px;top:9px}.picture-options{left:42%;right:3%;top:110px;bottom:15px;gap:8px}.picture-option{font-size:48px;min-height:120px}.section-heading .back-btn{position:static;margin-right:10px}.treasure-map{min-height:350px;padding:9px}.map-piece{min-height:260px}.map-piece .land{font-size:50px}.map-piece .route{height:90px}.modal-card{padding:28px 17px}.card-body .primary-btn,.card-body .help-btn{width:90%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* =========================================================
   OCEAN QUEST — VISUAL REDESIGN V2
   ========================================================= */
:root { --display: "Balsamiq Sans", cursive; font-family: "Nunito Sans", sans-serif; --ease-out: cubic-bezier(.16,1,.3,1); }
body {
  background: #087bb5 url("assets/generated/ocean-world.png") center / cover fixed no-repeat;
  min-height: 100vh;
}
body::before { background: linear-gradient(180deg,rgba(5,54,105,.04),rgba(3,39,80,.18)); opacity:1; }
.sea-floor { display:none; }
#bubble-bg { z-index:0; opacity:.65; }
.screen,.app { position:relative; z-index:1; }
h1,h2,#game-title { font-family:var(--display); letter-spacing:-.02em; }
.brand-mark { display:grid;place-items:center;width:50px;height:50px;border-radius:17px;background:linear-gradient(145deg,#ffdc59,#ff872f);border:3px solid rgba(255,255,255,.88);color:#103d78;font:700 19px var(--display);text-shadow:none;box-shadow:0 5px 12px rgba(6,52,100,.22),inset 0 2px white;transform:rotate(-4deg); }
.brand-star { display:none; }
.brand-large .brand-mark { width:62px;height:62px;font-size:24px; }

.profile-screen { background:linear-gradient(90deg,rgba(4,54,107,.05),rgba(4,54,107,.18)); }
.profile-card { overflow:visible; background:linear-gradient(160deg,rgba(255,255,255,.98),rgba(237,251,255,.94)); border:4px solid rgba(255,255,255,.9); box-shadow:0 26px 80px rgba(3,42,91,.35),inset 0 2px white; }
.centered-brand { justify-content:center;width:100%;text-align:left; }
.profile-mascot { width:240px;height:240px;object-fit:contain;right:-150px;top:45px;font-size:0;filter:drop-shadow(0 18px 14px rgba(3,48,89,.3));animation:subFloat 3.2s ease-in-out infinite; }
@keyframes subFloat { 50% { transform:translateY(-13px) rotate(1.5deg); } }
.profile-card h1 { font-family:var(--display); color:#123d78; }
.avatar-picker span.avatar-art { overflow:hidden;background-color:#dff8ff;background-repeat:no-repeat;border:3px solid transparent; }
.avatar-art::after,.avatar-portrait::after { content:"";display:block;width:100%;height:100%;background-repeat:no-repeat; }
.avatar-finn::after,.avatar-portrait[data-avatar="finn"]::after { background-image:url("assets/generated/submarine.png");background-size:170%;background-position:center; }
.avatar-shark::after,.avatar-portrait[data-avatar="shark"]::after { background-image:url("assets/generated/shark-idle.png");background-size:165%;background-position:center; }
.avatar-cat::after,.avatar-portrait[data-avatar="cat"]::after { background-image:url("assets/generated/animal-atlas.png");background-size:400% 200%;background-position:0 0; }
.avatar-bear::after,.avatar-portrait[data-avatar="bear"]::after { background-image:url("assets/generated/animal-atlas.png");background-size:400% 200%;background-position:100% 100%; }
.avatar-picker span.child-avatar { width:82px;height:82px;padding:5px;border-radius:24px;background:#e8fbff; }
.child-avatar::after,.avatar-portrait[data-avatar^="child-"]::after { background-image:url("assets/generated/child-avatars.png");background-size:400% 100%;background-repeat:no-repeat;background-position:var(--child-pos,0) center; }
.child-1,.avatar-portrait[data-avatar="child-1"]{--child-pos:0}.child-2,.avatar-portrait[data-avatar="child-2"]{--child-pos:33.333%}.child-3,.avatar-portrait[data-avatar="child-3"]{--child-pos:66.666%}.child-4,.avatar-portrait[data-avatar="child-4"]{--child-pos:100%}
.avatar-picker input:checked + .child-avatar { box-shadow:0 0 0 5px rgba(255,205,52,.2),0 10px 18px rgba(10,67,113,.15); }

.app { max-width:1560px;padding:14px 24px 90px; }
.topbar { background:rgba(7,78,128,.56);border:2px solid rgba(255,255,255,.48);box-shadow:0 10px 32px rgba(3,45,92,.22),inset 0 1px white;backdrop-filter:blur(18px) saturate(1.25);height:76px; }
.topbar nav { background:rgba(255,255,255,.9);box-shadow:0 5px 16px rgba(1,59,106,.14); }
.topbar nav button { display:flex;align-items:center;gap:8px; }
.nav-dot { width:12px;height:12px;border-radius:50%;background:#24aade;box-shadow:inset 0 2px rgba(255,255,255,.6); }
.game-dot{background:#ff9a3d}.map-dot{background:#8d68d7}
.topbar nav button.active { background:#e8faff;box-shadow:inset 0 -3px #20aee3; }
.tiny-coin { width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 34% 25%,#fff9ad,#ffd13e 48%,#df8a18);border:2px solid #fff0a0;box-shadow:inset 0 -3px rgba(155,88,0,.18); }
.avatar-portrait { overflow:hidden!important;padding:0; }

#home-view { min-height:850px;position:relative; }
.hero-copy { width:min(730px,58vw);text-align:left;margin:20px 0 8px 6%;position:relative;z-index:3; }
.hero-copy .eyebrow { color:#e6fbff; }
.hero-copy h1 { font-size:clamp(2.8rem,5vw,4.7rem);line-height:.96;max-width:760px;text-shadow:0 5px 0 rgba(5,61,116,.24),0 12px 32px rgba(4,51,96,.16); }
.hero-copy>p:last-child { max-width:610px;font-size:20px;line-height:1.45; }
.home-captain { position:absolute;right:1.5%;top:-25px;width:min(470px,38vw);height:380px;object-fit:contain;filter:drop-shadow(0 24px 20px rgba(3,50,95,.28));animation:subFloat 3.5s ease-in-out infinite;z-index:2; }
.mini-progress { margin:32px 0 35px 6%;width:min(620px,50vw);justify-content:flex-start;background:rgba(255,255,255,.9);border:2px solid rgba(255,255,255,.84); }
.progress-piece { clip-path:polygon(6% 5%,94% 0,100% 86%,54% 100%,0 88%);border-radius:3px;background:#b9c7ca; }
.progress-piece.open { background:linear-gradient(145deg,#f8dfa1,#dcb56d); }

.game-grid { max-width:1300px;margin:0 auto;gap:24px;position:relative;z-index:4; }
.game-card { border:3px solid rgba(255,255,255,.9);border-radius:30px;background:rgba(255,253,247,.96);box-shadow:0 22px 44px rgba(3,43,87,.25),inset 0 2px white; }
.game-card:hover { transform:translateY(-10px) scale(1.012);box-shadow:0 30px 60px rgba(3,43,87,.32),inset 0 2px white; }
.card-scene { height:265px;background:linear-gradient(#41d4ef,#087ec4); }
.card-scene::after { background:linear-gradient(#f5d58f,#e9b966);height:34px; }
.card-body h2 { font-size:32px; }
.card-body .primary-btn { border-radius:16px;background:linear-gradient(#ffc94a,#ff8f2e);box-shadow:0 6px 0 #d66721,0 11px 18px rgba(101,56,16,.2); }
.card-body .primary-btn.green,.card-body .primary-btn.blue { background:linear-gradient(#ffc94a,#ff8f2e);box-shadow:0 6px 0 #d66721,0 11px 18px rgba(101,56,16,.2); }
.help-btn,.green-outline,.blue-outline { color:#1a5790; }
.card-shark-art { position:absolute;width:82%;height:94%;left:-7%;top:0;object-fit:contain;filter:drop-shadow(0 14px 10px rgba(3,51,99,.25));animation:characterFloat 3s ease-in-out infinite;z-index:2; }
.card-sub-art { position:absolute;width:80%;height:92%;left:-7%;top:2%;object-fit:contain;filter:drop-shadow(0 14px 10px rgba(3,51,99,.24));animation:characterFloat 3.3s ease-in-out infinite;z-index:3; }
@keyframes characterFloat { 50% { transform:translateY(-8px) rotate(-1.5deg); } }
.card-fish { position:absolute;width:105px;height:92px;background-image:url("assets/generated/fish-atlas.png");background-size:300% 200%;z-index:3;filter:drop-shadow(0 6px 6px rgba(3,52,98,.24));animation:fishFloat 2.4s ease-in-out infinite; }
.fish-red{right:1%;top:34px;background-position:0 0}.fish-yellow{right:9%;top:130px;background-position:0 100%;animation-delay:-1s}
@keyframes fishFloat{50%{transform:translateX(-8px) translateY(-3px)}}
.atlas-preview { position:absolute;width:82px;height:90px;border-radius:22px;background-image:url("assets/generated/animal-atlas.png");background-size:400% 200%;border:4px solid rgba(255,255,255,.9);z-index:4;box-shadow:0 8px 16px rgba(2,57,108,.22); }
.atlas-cat{right:4%;top:28px;background-position:0 0}.atlas-bear{right:12%;top:137px;background-position:100% 100%}
.preview-beam { left:48%;top:92px;width:42%;height:80px;background:radial-gradient(ellipse at left,rgba(255,250,176,.85),rgba(255,236,96,.28) 58%,transparent 72%);filter:blur(2px);clip-path:polygon(0 43%,100% 0,100% 100%,0 57%);animation:beamGlow 1.8s ease-in-out infinite alternate; }
@keyframes beamGlow{to{opacity:.6;filter:blur(4px)}}
.reef-scene { background:radial-gradient(circle at 50% 10%,#5fe8f5,#087cc0 80%); }
.bubble-preview span { box-shadow:inset 0 7px 12px rgba(255,255,255,.55),inset 0 -10px 14px rgba(0,40,100,.16),0 9px 14px rgba(3,53,102,.24);animation:bubbleLiving 3s ease-in-out infinite; }
.bubble-preview span:nth-child(2n){animation-delay:-1s}.bubble-preview span:nth-child(3n){animation-delay:-2s}
@keyframes bubbleLiving{50%{transform:translateY(-6px) scale(1.025)}}

.game-stage { background:rgba(4,78,126,.32) url("assets/generated/ocean-world.png") center/cover no-repeat; }
.treasure-map { background:#092f68 url("assets/generated/treasure-map-v3.png") center/contain no-repeat; }
.game-stage::before { content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,175,222,.05),rgba(3,61,111,.18));pointer-events:none; }
.game-stage>* { position:relative;z-index:1; }

/* Generated shark states */
.shark-character { width:430px;height:310px;background:none!important;border:0!important;border-radius:0;box-shadow:none!important;overflow:visible;left:2%;top:35%; }
.shark-character::before,.shark-character::after,.shark-character .eye,.shark-character .mouth { display:none; }
.shark-character .shark-state { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(3,42,85,.3));transition:opacity .13s; }
.shark-character .eat-state { opacity:0; }
.shark-character.eating .idle-state { opacity:0; }
.shark-character.eating .eat-state { opacity:1; }
.fish-option { width:170px;height:112px;border:0;background:transparent!important;box-shadow:none;overflow:visible;color:#143d70!important;padding-top:88px;font-size:19px;text-shadow:0 2px white; }
.fish-option::after { content:"";position:absolute;inset:-10px 0 16px;background-image:url("assets/generated/fish-atlas.png");background-size:300% 200%;background-position:var(--fish-x,0) var(--fish-y,0);filter:drop-shadow(0 10px 8px rgba(3,51,97,.28));border:0;z-index:-1; }
.fish-option[data-fish="red"]{--fish-x:0;--fish-y:0}.fish-option[data-fish="blue"]{--fish-x:50%;--fish-y:0}.fish-option[data-fish="green"]{--fish-x:100%;--fish-y:0}.fish-option[data-fish="yellow"]{--fish-x:0;--fish-y:100%}.fish-option[data-fish="orange"]{--fish-x:50%;--fish-y:100%}.fish-option[data-fish="purple"]{--fish-x:100%;--fish-y:100%}

/* Generated submarine and illustrated word cards */
.submarine-character { width:285px;height:225px;background:none!important;border:0!important;border-radius:0;box-shadow:none!important; }
.submarine-character::before,.submarine-character::after,.sub-window,.sub-propeller { display:none; }
.submarine-character img { width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 16px rgba(3,42,85,.32)); }
.picture-option { overflow:hidden;padding:0;background:#fffaf0;border:5px solid rgba(255,255,255,.86);font-size:0;position:relative; }
.picture-option .animal-art { position:absolute;inset:0;background-image:url("assets/generated/animal-atlas.png");background-size:400% 200%;background-position:var(--atlas-x) var(--atlas-y);transition:transform .25s var(--ease-out); }
.picture-option:hover .animal-art { transform:scale(1.05); }
.picture-option .word-reveal { position:absolute;left:10px;right:10px;bottom:8px;transform:translateY(60px);padding:7px;background:rgba(255,255,255,.94);border-radius:12px;color:#123b73;font-size:18px;font-weight:1000;text-transform:uppercase;transition:.35s var(--ease-out); }
.picture-option.correct .word-reveal { transform:translateY(0); }
.picture-option[data-word="cat"]{--atlas-x:0;--atlas-y:0}.picture-option[data-word="dog"]{--atlas-x:33.333%;--atlas-y:0}.picture-option[data-word="fish"]{--atlas-x:66.666%;--atlas-y:0}.picture-option[data-word="bird"]{--atlas-x:100%;--atlas-y:0}.picture-option[data-word="frog"]{--atlas-x:0;--atlas-y:100%}.picture-option[data-word="duck"]{--atlas-x:33.333%;--atlas-y:100%}.picture-option[data-word="rabbit"]{--atlas-x:66.666%;--atlas-y:100%}.picture-option[data-word="bear"]{--atlas-x:100%;--atlas-y:100%}
.beam { height:110px;background:radial-gradient(ellipse at left,rgba(255,251,186,.96),rgba(255,235,90,.32) 55%,transparent 75%);filter:blur(2px);mix-blend-mode:screen; }
.topic-btn span.topic-picture { display:block;width:112px;height:100px;margin:0 auto 10px;background-image:url("assets/generated/vocabulary-atlas.png");background-size:400% 400%;background-repeat:no-repeat;filter:drop-shadow(0 7px 7px rgba(14,57,92,.16)); }
.topic-btn .tp-animals { background-image:url("assets/generated/animal-atlas.png")!important;background-size:400% 200%!important;background-position:0 0; }
.topic-btn .tp-clothes { background-position:0 0; }
.topic-btn .tp-body { background-position:0 66.666%; }
.topic-btn .tp-family { background-position:0 100%; }
.map-piece .land { font:700 22px var(--display);letter-spacing:.04em;background:rgba(255,249,216,.74);padding:10px 13px;border-radius:12px; }
.reward-burst { width:110px;height:110px;margin:0 auto 8px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fffbd0,#ffd449 50%,#f59424 52%,#ffb82d);color:#133d74;font:700 16px var(--display);box-shadow:0 0 0 9px rgba(255,211,66,.16),0 14px 25px rgba(137,79,8,.24);animation:rewardPop .75s var(--ease-out); }
@keyframes rewardPop{from{transform:scale(.3) rotate(-25deg);opacity:0}70%{transform:scale(1.12) rotate(4deg)}}
.illustrated-chest { width:190px;height:145px;margin:0 auto;position:relative;filter:drop-shadow(0 16px 13px rgba(71,43,6,.25));animation:chestOpen .8s var(--ease-out); }
.illustrated-chest::before { content:"";position:absolute;left:20px;right:20px;bottom:5px;height:90px;border-radius:14px 14px 25px 25px;background:linear-gradient(90deg,#8e4a20,#d9862d 16%,#f2b53f 50%,#c66a25 84%,#7f3d1b);border:7px solid #713814;box-shadow:inset 0 8px #ffc94d; }
.illustrated-chest::after { content:"";position:absolute;left:15px;right:15px;top:8px;height:65px;border-radius:65px 65px 12px 12px;background:linear-gradient(#f8bb43,#a95120);border:7px solid #713814;transform-origin:bottom;transform:rotateX(-22deg);box-shadow:inset 0 10px #ffd45d,0 -13px 35px rgba(255,232,91,.8); }
.illustrated-chest i { position:absolute;z-index:3;width:33px;height:42px;left:79px;top:65px;border-radius:7px;background:linear-gradient(#ffe467,#d38a17);border:4px solid #744015; }
.captain-badge { display:inline-block;margin:5px 0 20px;padding:9px 20px;border-radius:999px;background:#ffe278;color:#123d74;font:700 17px var(--display);border:3px solid #edac27; }
.profile-modal-avatar { width:130px!important;height:130px!important;margin:0 auto 10px;border-radius:38px!important;background:#dff8ff;display:block!important;border:4px solid white;box-shadow:0 12px 24px rgba(6,61,109,.18);overflow:hidden; }
.treasure-particle { width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9ac,#ffcf31 50%,#d98216); }
.treasure-particle.p1 { border-radius:5px;background:#fff17a;clip-path:polygon(50% 0,61% 36%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,39% 36%); }
.treasure-particle.p2 { background:rgba(202,249,255,.75);border:2px solid white; }
.map-piece { background-image:url("assets/generated/treasure-map-v3.png")!important;background-size:300% 100%!important;background-repeat:no-repeat!important;border:0!important;min-height:420px; }
.map-piece:nth-child(1){background-position:0 center!important}.map-piece:nth-child(2){background-position:50% center!important}.map-piece:nth-child(3){background-position:100% center!important}
.map-piece.locked { filter:grayscale(1) brightness(.32);opacity:.86; }
.map-piece.locked::after { content:"?";display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.9);color:#123d74;font:700 38px var(--display);box-shadow:0 8px 20px rgba(0,0,0,.25); }
.map-piece.open { filter:none;animation:mapReveal .8s var(--ease-out); }
.map-piece .land,.map-piece .route,.map-piece.open::before { display:none; }
@keyframes mapReveal{from{filter:brightness(2);transform:rotateY(75deg) scale(.85);opacity:.2}}
.illustrated-chest { width:min(390px,80vw);height:310px;background:url("assets/generated/treasure-chest.png") center/contain no-repeat;filter:drop-shadow(0 22px 18px rgba(71,43,6,.3)); }
.illustrated-chest::before,.illustrated-chest::after,.illustrated-chest i { display:none; }

.modal-card { background:linear-gradient(155deg,#fffef8,#ecfaff); }
.how-icon,.chest,.result-score { font-family:var(--display); }

@media(max-width:1000px){.home-captain{width:340px;height:290px;top:45px;opacity:.95}.hero-copy{width:70vw;margin-left:2%}.mini-progress{margin-left:2%;width:62vw}.profile-mascot{width:180px;height:180px;right:-80px}.shark-character{width:310px;height:225px}.submarine-character{width:220px;height:175px}}
@media(max-width:650px){body{background-position:58% center}.profile-mascot{width:125px;height:125px;right:-20px;top:-65px}.brand-large{font-size:25px}.brand-large .brand-mark{width:50px;height:50px}.home-captain{position:relative;display:block;width:260px;height:190px;top:auto;right:auto;margin:-25px auto -45px}.hero-copy{width:96%;text-align:center;margin:8px auto}.hero-copy h1{font-size:37px}.mini-progress{width:96%;margin:20px auto}.shark-character{width:170px;height:135px}.fish-option{width:115px;height:90px;padding-top:70px}.submarine-character{width:150px;height:120px}.picture-option .word-reveal{font-size:14px}.topbar>.brand .brand-mark{width:40px;height:40px;font-size:15px}}

/* V3 interactive game polish */
.shark-arcade{position:absolute;inset:0;overflow:hidden;outline:none;background:linear-gradient(#19bce6 0%,#087ec5 57%,#0759a1 100%);isolation:isolate}
.shark-arcade::before{content:"";position:absolute;inset:0;background:url("assets/generated/ocean-world.png") center/cover;opacity:.45;z-index:-2}
.shark-arcade::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(255,255,255,.25),transparent 26% 70%,rgba(0,39,114,.22));z-index:-1;pointer-events:none}
.arcade-hud{position:absolute;z-index:9;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:18px;align-items:center;padding:10px 20px;border:2px solid rgba(255,255,255,.65);border-radius:999px;background:rgba(4,64,139,.7);backdrop-filter:blur(10px);color:white;box-shadow:0 8px 24px rgba(0,44,104,.25)}
.arcade-hud strong{font-size:20px}.arcade-hud span{color:#fff29c;font-weight:900}
.arcade-seabed{position:absolute;left:0;right:0;bottom:-25px;height:95px;background:linear-gradient(#efd476,#cb9a42);border-radius:50% 50% 0 0/35% 35% 0 0;box-shadow:0 -10px 30px rgba(3,65,98,.3)}
.player-shark{position:absolute;left:42px;top:0;width:250px;height:150px;z-index:4;transition:filter .25s;will-change:transform}
.player-shark img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 16px 13px rgba(0,44,88,.28))}
.player-shark .eat-state{opacity:0}.player-shark.eating .idle-state{opacity:0}.player-shark.eating .eat-state{opacity:1;animation:sharkBite .22s 3 alternate}
@keyframes sharkBite{to{transform:scale(1.12) translateX(14px)}}
.arcade-fish{position:absolute;left:0;top:0;width:105px;height:78px;background-image:url("assets/generated/fish-atlas.png");background-size:300% 200%;background-position:var(--fish-x) var(--fish-y);filter:drop-shadow(0 9px 7px rgba(0,44,88,.25));will-change:transform;animation:fishWiggle .5s ease-in-out infinite alternate}
.arcade-fish.caught{animation:fishCaught .35s forwards}.fish-0{--fish-x:0;--fish-y:0}.fish-1{--fish-x:50%;--fish-y:0}.fish-2{--fish-x:100%;--fish-y:0}.fish-3{--fish-x:0;--fish-y:100%}.fish-4{--fish-x:50%;--fish-y:100%}.fish-5{--fish-x:100%;--fish-y:100%}
@keyframes fishWiggle{to{rotate:3deg;scale:1.04}}@keyframes fishCaught{to{opacity:0;scale:.25;rotate:20deg}}
.key-help{position:absolute;z-index:7;left:28px;bottom:24px;display:flex;align-items:center;gap:7px;color:white;font-weight:900;text-shadow:0 2px 4px #064d94}.key-help kbd{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:white;color:#1268ad;box-shadow:0 5px 0 #acd9ef;font:1000 22px/1 sans-serif}.key-help span{margin-left:7px}
.fish-task{position:absolute;z-index:20;left:50%;top:50%;translate:-50% -50%;width:min(550px,88%);padding:25px;text-align:center;color:#123b73;background:rgba(255,255,255,.96);border:6px solid #baf1ff;border-radius:32px;box-shadow:0 24px 70px rgba(0,31,84,.38);animation:taskIn .38s var(--ease-out)}
@keyframes taskIn{from{opacity:0;scale:.7;translate:-50% -35%}}
.fish-task small{text-transform:uppercase;color:#108dc5;font-weight:1000;letter-spacing:.08em}.fish-task h2{font-size:32px;margin:10px 0 18px}.fish-task p{margin:14px 0 0;color:#5b7692;font-weight:700}.fish-task-options{display:flex;justify-content:center;gap:14px}.fish-task-options button{min-width:105px;padding:14px;border:4px solid #8fdbef;border-radius:18px;background:#e7faff;color:#123b73;font:1000 23px var(--font);text-transform:capitalize;box-shadow:0 7px 0 #75bed6;transition:.18s}.fish-task-options button:hover{transform:translateY(-3px)}.fish-task-options button.wrong{animation:wiggle .3s 2;background:#ffe0df;border-color:#ff918b}.fish-task-options button.correct{background:#e1ffc2;border-color:#86dc34}
.submarine-character{transition:transform .62s cubic-bezier(.2,.8,.2,1)!important;will-change:transform}.submarine-character.flying{animation:none!important;z-index:8}.beam{opacity:0;transition:width .25s,transform .25s,opacity .25s!important;z-index:7}
.picture-options{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);align-content:center;justify-items:center}.picture-option{width:min(100%,245px);height:auto;aspect-ratio:1/1;min-height:0!important;max-height:none;justify-self:center}.picture-option:disabled{cursor:default}
.sub-question span{display:inline-block;margin-top:7px;padding:5px 11px;border-radius:999px;background:rgba(2,58,129,.35);font-size:13px;text-transform:uppercase;letter-spacing:.08em}
.new-map-piece{display:grid;justify-items:center;gap:6px;padding:12px 18px!important}.new-map-piece span{font-size:14px;font-weight:700}.result-map-piece{width:190px;height:115px;border:5px solid #e5b653;border-radius:18px;background-image:url("assets/generated/treasure-map-v3.png");background-size:300% 100%;box-shadow:0 10px 20px rgba(107,67,6,.22);animation:pieceReveal .8s var(--ease-out)}.result-map-piece.piece-0{background-position:0 center}.result-map-piece.piece-1{background-position:50% center}.result-map-piece.piece-2{background-position:100% center}@keyframes pieceReveal{from{opacity:0;transform:scale(.25) rotate(-15deg)}70%{transform:scale(1.08) rotate(2deg)}}
@media(max-width:650px){.player-shark{left:12px;width:165px;height:105px}.arcade-fish{width:78px;height:58px}.arcade-hud{top:10px;padding:7px 12px}.arcade-hud strong{font-size:16px}.key-help span{display:none}.fish-task{padding:18px 12px}.fish-task h2{font-size:25px}.fish-task-options{gap:7px}.fish-task-options button{min-width:78px;padding:11px 7px}.picture-options{left:37%;top:120px}.submarine-character{width:135px!important;height:108px!important}}

/* V4 proportions and single-screen game showcase */
.child-avatar::after,.avatar-portrait[data-avatar^="child-"]::after{background-size:cover!important;background-position:center!important}
.child-1::after,.avatar-portrait[data-avatar="child-1"]::after{background-image:url("assets/generated/child-avatar-1.png")!important}.child-2::after,.avatar-portrait[data-avatar="child-2"]::after{background-image:url("assets/generated/child-avatar-2.png")!important}.child-3::after,.avatar-portrait[data-avatar="child-3"]::after{background-image:url("assets/generated/child-avatar-3.png")!important}.child-4::after,.avatar-portrait[data-avatar="child-4"]::after{background-image:url("assets/generated/child-avatar-4.png")!important}
.avatar-picker span.child-avatar{width:78px;height:78px;padding:0}.avatar-picker input:checked+.child-avatar{transform:translateY(-3px) scale(1.04)}
@media(min-width:1001px){.app{height:100vh;padding:12px 22px 16px;overflow:hidden}.topbar{height:72px;top:0}.view{padding-top:12px}#home-view.active{height:calc(100vh - 100px);display:grid;grid-template-rows:auto auto auto;align-content:start}.home-captain{display:none}.showcase-title{width:auto!important;margin:0 auto!important;text-align:center!important}.showcase-title h1{font-size:clamp(2.4rem,5vh,3.8rem)!important;line-height:.88;margin:3px 0!important;letter-spacing:.035em;background:linear-gradient(#fff 22%,#bff8ff 65%,#68dff3);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #075da4);text-shadow:none!important}.showcase-title>p:last-child{font-size:15px!important;margin:4px!important}.mini-progress{margin:8px auto 10px;padding:6px 14px;min-height:42px}.progress-piece{height:30px;width:50px;font-size:18px}.game-grid{height:auto;gap:18px}.game-card{height:auto;display:grid;grid-template-rows:minmax(180px,27vh) auto}.card-scene{height:auto;min-height:0}.card-body{padding:13px 14px 12px;display:flex;flex-direction:column;align-items:center}.card-body h2{font-size:clamp(20px,2.3vh,27px)}.card-body p{font-size:14px;margin:3px auto 5px;min-height:20px}.card-kicker{font-size:10px!important}.card-coins{height:32px;margin:3px 0 7px}.coin{width:29px;height:29px;font-size:15px}.card-body .primary-btn{padding:9px 24px;margin:0 auto 8px;font-size:17px}.card-body .help-btn{padding:6px 15px;font-size:13px}}
.card-octopus-art{position:absolute;z-index:2;left:-7%;bottom:-5%;width:72%;height:110%;object-fit:contain;filter:drop-shadow(0 12px 9px rgba(3,55,103,.3));animation:octopusFloat 3s ease-in-out infinite alternate}.bubble-preview{display:block;padding:0}.bubble-preview span{position:absolute;width:54px;height:54px;font-size:25px}.bubble-preview span:nth-of-type(1){right:17%;top:16%}.bubble-preview span:nth-of-type(2){right:5%;top:47%}.bubble-preview span:nth-of-type(3){right:22%;top:67%}@keyframes octopusFloat{to{transform:translateY(-6px) rotate(2deg)}}
.card-body .primary-btn.bubble-play{background:linear-gradient(180deg,#d96bff,#8c27d9);box-shadow:0 6px 0 #6614ac,0 11px 20px rgba(104,31,167,.28)}.card-body .primary-btn.shark-play{background:linear-gradient(180deg,#77df65,#28a844);box-shadow:0 6px 0 #147b2c,0 11px 20px rgba(24,125,52,.28)}.card-body .primary-btn.sub-play{background:linear-gradient(180deg,#50c9ff,#1684e8);box-shadow:0 6px 0 #0860b8,0 11px 20px rgba(9,98,184,.28)}.card-body .primary-btn>span{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(255,255,255,.22)}
.treasure-map{width:100%;min-height:0!important;aspect-ratio:3/2;padding:0!important;background:none!important}.map-piece{min-height:0!important;aspect-ratio:1/2;background-size:300% 100%!important}.result-map-piece{width:128px;height:auto;aspect-ratio:1/2;background-size:300% 100%}
.game-stage[data-game="shark"]{min-height:0;height:min(500px,calc(100vh - 190px));max-width:1080px}.game-stage[data-game="shark"] .player-shark{width:315px;height:190px}.game-stage[data-game="shark"] .arcade-fish{width:138px;height:102px}
.arcade-fish.target-fish{z-index:5;filter:drop-shadow(0 0 13px #fff36a) drop-shadow(0 8px 7px rgba(0,44,88,.3))}.arcade-fish.target-fish::after{content:"★";position:absolute;right:4px;top:-20px;display:grid;place-items:center;width:36px;height:36px;border:4px solid white;border-radius:50%;background:#ffd432;color:#9a5700;font-size:21px;box-shadow:0 5px 12px rgba(0,50,110,.28);animation:targetPulse .7s infinite alternate}@keyframes targetPulse{to{transform:scale(1.18) rotate(8deg);filter:brightness(1.12)}}
.fish-task-options button.colour-swatch{width:92px;min-width:92px;aspect-ratio:1;border-radius:22px;font-size:0;border:7px solid white;box-shadow:0 0 0 4px var(--swatch),0 9px 0 color-mix(in srgb,var(--swatch) 70%,#153f72);background:var(--swatch)}.fish-task-options button.colour-swatch::after{content:"";width:22px;height:13px;border-left:6px solid transparent;border-bottom:6px solid transparent;transform:rotate(-45deg)}.fish-task-options button.colour-swatch.correct::after{border-left-color:white;border-bottom-color:white}
@media(max-width:1000px){.treasure-map{aspect-ratio:3/2}.map-piece{aspect-ratio:1/2}.card-octopus-art{width:55%}}

/* V5 audio controls */
.audio-controls{display:flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border:2px solid rgba(255,255,255,.6);border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(3,58,122,.12)}
.audio-controls .icon-btn{border:0;background:#fff4b6;min-height:39px;width:39px}.audio-controls .icon-btn.muted{background:#ffd9d5;color:#b33b3b}
.volume-control{display:flex;align-items:center;gap:4px;color:#0d6fae;font-weight:1000}.volume-control span{font-size:17px}.volume-control input{width:82px;accent-color:#159ee2;cursor:pointer}

/* V5 Submarine Sorter */
.game-stage[data-game="submarine"]{height:min(630px,calc(100vh - 185px));min-height:540px;max-width:1180px;background:linear-gradient(rgba(30,201,237,.68),rgba(4,87,164,.76)),url("assets/generated/ocean-world.png") center/cover}
.sorter-game{position:absolute;inset:0;padding:18px 22px;display:grid;grid-template-rows:auto 132px minmax(0,1fr);gap:12px;overflow:hidden}
.sorter-heading{text-align:center;color:white;text-shadow:0 3px 0 rgba(2,56,112,.34)}.sorter-heading .eyebrow{color:#d8f8ff}.sorter-heading h2{margin:2px;font-size:29px}
.sorter-docks{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;position:relative;z-index:8}
.sorter-dock{border:4px solid rgba(255,255,255,.86);border-radius:24px;color:#123b73;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr;align-items:center;text-align:left;padding:12px 16px;box-shadow:0 10px 20px rgba(1,53,108,.22),inset 0 2px white;transition:.22s var(--ease-out)}
.sorter-dock>span{grid-row:1/3;font-size:42px;margin-right:11px}.sorter-dock strong{font:700 22px var(--display)}.sorter-dock small{font-weight:900;color:#52718b}
.dock-pets{background:#fff1c9}.dock-animals{background:#dff6c8}.dock-family{background:#ffe0e8}.dock-clothes{background:#e5dcff}
.sorter-dock:hover,.sorter-dock.drag-over{transform:translateY(-5px) scale(1.025);box-shadow:0 0 0 7px rgba(255,245,112,.55),0 15px 30px rgba(1,53,108,.28)}
.sorter-dock.wrong{animation:wiggle .28s 2;background:#ffd3d0}.sorter-dock.correct{box-shadow:0 0 0 8px #a5ed4b,0 0 28px white;transform:scale(1.04)}
.sorter-water{position:relative;min-height:0;border:3px solid rgba(255,255,255,.5);border-radius:28px;background:linear-gradient(180deg,rgba(0,171,222,.12),rgba(2,70,142,.28));overflow:hidden}
.sorter-water::after{content:"";position:absolute;left:-5%;right:-5%;bottom:-35px;height:82px;border-radius:50% 50% 0 0;background:#e9c66e;box-shadow:0 -9px 28px rgba(3,66,109,.22)}
.sorter-transport{position:absolute;z-index:4;left:calc(50% - 225px);bottom:15px;width:450px;height:285px;cursor:grab;transition:transform .72s cubic-bezier(.2,.84,.2,1),opacity .35s;filter:drop-shadow(0 15px 12px rgba(1,48,99,.25));animation:sorterFloat 2.4s ease-in-out infinite alternate}
.sorter-transport:active{cursor:grabbing}.sorter-transport.dragging{opacity:.55}.sorter-transport.delivering{animation:none;z-index:12}.sorter-transport.wrong{animation:wiggle .28s 2}
@keyframes sorterFloat{to{translate:0 -7px}}
.sorter-submarine{position:absolute;z-index:2;right:0;bottom:0;width:330px;height:230px;object-fit:contain;pointer-events:none}
.sorter-word-card{position:absolute;z-index:4;left:0;top:3px;width:174px;padding:7px 7px 10px;border:5px solid white;border-radius:25px;background:#fffaf0;text-align:center;box-shadow:0 12px 25px rgba(3,57,107,.28);rotate:-3deg}
.sorter-word-card img{display:block;width:150px;height:150px;aspect-ratio:1;object-fit:contain;border-radius:17px;background:#fffbed}.sorter-word-card strong{display:block;margin-top:3px;color:#123b73;font:700 24px var(--display);text-transform:lowercase}
.sorter-tip{position:absolute;z-index:7;left:50%;bottom:11px;translate:-50% 0;margin:0;padding:7px 15px;border-radius:999px;background:rgba(1,55,123,.72);color:white;font-weight:900;white-space:nowrap}
@media(max-width:1000px){.volume-control input{width:64px}.sorter-game{grid-template-rows:auto 220px minmax(0,1fr)}.sorter-docks{grid-template-columns:repeat(2,1fr)}.sorter-transport{scale:.82;transform-origin:center bottom}.game-stage[data-game="submarine"]{height:720px;min-height:720px}}
@media(max-width:650px){.audio-controls{padding-right:4px}.volume-control span{display:none}.volume-control input{width:54px}.sorter-game{padding:12px 8px;grid-template-rows:auto 205px minmax(0,1fr)}.sorter-heading h2{font-size:22px}.sorter-docks{gap:7px}.sorter-dock{padding:8px;border-radius:17px}.sorter-dock>span{font-size:28px;margin-right:6px}.sorter-dock strong{font-size:16px}.sorter-dock small{font-size:10px}.sorter-transport{left:calc(50% - 225px);scale:.65;bottom:-5px}.sorter-tip{font-size:12px;bottom:6px}.game-stage[data-game="submarine"]{height:680px;min-height:680px}}

/* V7 sorter-aware showcase card */
.sorter-card-preview .card-sub-art{width:61%;height:82%;left:-6%;top:9%;z-index:3}
.sorter-preview-grid{position:absolute;z-index:6;right:10px;top:12px;bottom:34px;width:43%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.sorter-preview-item{min-width:0;overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr) auto;padding:4px 4px 3px;border:3px solid white;border-radius:16px;box-shadow:0 7px 14px rgba(2,54,106,.24);background:#fffaf0;animation:sorterCardFloat 2.6s ease-in-out infinite alternate}
.sorter-preview-item:nth-child(2){animation-delay:-.65s}.sorter-preview-item:nth-child(3){animation-delay:-1.3s}.sorter-preview-item:nth-child(4){animation-delay:-1.95s}
@keyframes sorterCardFloat{from{transform:translateY(2px) rotate(-1deg)}to{transform:translateY(-4px) rotate(1deg)}}
.sorter-preview-item img{display:block;width:100%;height:100%;min-height:0;aspect-ratio:1;object-fit:contain;border-radius:10px;background:#fffbed}
.sorter-preview-item small{display:block;padding-top:1px;color:#123b73;font-size:9px;font-weight:1000;line-height:1;text-align:center}
.sorter-preview-item.preview-pets{background:#fff1c9}.sorter-preview-item.preview-animals{background:#dff6c8}.sorter-preview-item.preview-family{background:#ffe0e8}.sorter-preview-item.preview-clothes{background:#e5dcff}
@media(max-width:1000px){.sorter-preview-grid{width:40%;right:18px}.sorter-card-preview .card-sub-art{width:64%}}