#screen-map { background: #0f6fa1; color: #fff; min-height: 100dvh; overflow: auto; }
.map-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top)) 18px 12px; background: rgba(8, 53, 92, .96); box-shadow: 0 4px 16px rgba(0,0,0,.24); }
.map-header h1 { flex: 1; margin: 0; font: 800 clamp(1.15rem, 3vw, 1.8rem)/1.1 'Fredoka', sans-serif; text-align: center; }
.map-header-button { border: 2px solid rgba(255,255,255,.8); border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; padding: 9px 14px; font: 800 .95rem 'Nunito', sans-serif; cursor: pointer; }
.map-header-button[hidden] { display: none; }
.map-token-preview { min-width: 88px; text-align: right; font-weight: 900; color: #ffd84d; }
.map-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.map-area-link { border: 2px solid rgba(255,255,255,.72); border-radius: 999px; padding: 8px 12px; background: rgba(255,255,255,.13); color: #fff; font: 900 .86rem 'Nunito',sans-serif; cursor: pointer; }
.map-area-link:hover, .map-area-link:focus-visible { background: #ff9225; border-color: #fff; }
.map-modal.map-store-modal { width: min(1120px,calc(100% - 24px)); max-width: 1120px; }
.map-store-modal .map-modal-inner { width: 100%; max-width: none; }
.member-store-shell { color: #213d59; }
.member-store-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 18px; border-radius: 15px; padding: 12px 16px; background: #e9f7ff; }
.member-store-toolbar strong { color: #c97c00; font-size: 1.15rem; }
.member-store-toolbar span { color: #47657f; font-weight: 800; }
.member-avatar-preview { display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 210px; margin: 0 0 18px; border: 3px solid #8ed8f8; border-radius: 20px; padding: 12px 20px; background: linear-gradient(135deg,#dff6ff,#f7fdff); }
.member-avatar-preview img { width: 155px; height: 185px; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(19,67,99,.2)); }
.member-avatar-preview div { display: flex; flex-direction: column; text-align: left; }
.member-avatar-preview strong { color: #155b8e; font: 900 1.45rem 'Fredoka',sans-serif; }
.member-avatar-preview span { color: #52718a; font-weight: 800; }
.member-store-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap: 14px; max-height: min(62dvh,620px); overflow: auto; padding: 4px; }
.member-store-card { position: relative; display: flex; flex-direction: column; align-items: center; min-height: 250px; border: 3px solid #cce7fa; border-radius: 18px; padding: 13px; background: linear-gradient(#fff,#eef8ff); box-shadow: 0 7px 16px rgba(21,76,112,.12); }
.member-store-card.equipped { border-color: #35bf78; background: linear-gradient(#f1fff7,#ddf8e9); }
.member-store-card img { width: 130px; height: 130px; object-fit: contain; }
.member-store-card h3 { margin: 7px 0 10px; color: #164f7d; font: 900 1rem 'Fredoka',sans-serif; }
.member-store-card button { margin-top: auto; border: 0; border-radius: 999px; padding: 9px 14px; background: #ff9225; color: #fff; font-weight: 900; cursor: pointer; }
.member-store-card button:disabled { opacity: .55; }
.member-store-slot { position: absolute; left: 9px; top: 9px; border-radius: 99px; padding: 3px 8px; background: #0c6fa7; color: #fff; font-size: .68rem; font-weight: 900; text-transform: uppercase; }
.member-owned-badge, .member-equipped-badge { margin-top: auto; border-radius: 99px; padding: 7px 11px; background: #20a866; color: #fff; font-weight: 900; }
.member-store-message { margin: 0 0 12px; border-radius: 12px; padding: 9px 12px; background: #e2f8ea; color: #147344; font-weight: 900; }
.member-store-message.error { background: #ffe5e5; color: #a12626; }
.member-store-empty { grid-column: 1/-1; padding: 38px 15px; color: #506b82; font-weight: 800; }
.map-content { width: min(1600px, 100%); margin: 0 auto; padding: 18px; }
.map-overview-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .7fr); gap: 20px; align-items: start; }
.map-overview-image-wrap, .map-world-panel, .map-world-view { border-radius: 22px; overflow: hidden; background: rgba(4,31,56,.72); box-shadow: 0 12px 34px rgba(0,0,0,.32); }
.map-overview-image { display: block; width: 100%; height: auto; }
.map-world-panel { padding: 18px; position: sticky; top: 88px; }
.map-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.map-profile-row label { font-weight: 900; }
.map-profile-row select { max-width: 190px; border: 0; border-radius: 12px; padding: 9px 12px; font: 800 1rem 'Nunito', sans-serif; }
.map-avatar-picker { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin: 0 0 15px; }
.map-avatar-choice { border: 2px solid rgba(255,255,255,.35); border-radius: 13px; padding: 5px 3px; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.map-avatar-choice img { display: block; width: 48px; height: 48px; margin: auto; object-fit: contain; }
.map-avatar-choice span { display: block; font-size: .72rem; font-weight: 900; }
.map-avatar-choice.selected { border-color: #ffd12e; background: rgba(255,209,46,.22); box-shadow: 0 0 0 2px rgba(255,209,46,.2); }
.map-progress-summary { margin-bottom: 15px; }
.map-progress-summary strong { display: block; margin-bottom: 8px; }
.map-progress-track { height: 12px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.2); }
.map-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#ffd329,#ff9c24); }
.map-world-list { display: grid; gap: 9px; }
.map-world-card { display: flex; align-items: center; gap: 12px; width: 100%; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; padding: 10px 12px; background: linear-gradient(135deg,#168bd0,#065b9a); color: #fff; text-align: left; cursor: pointer; }
.map-world-card.locked { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }
.map-world-card:not(.locked):hover { transform: translateY(-2px); box-shadow: 0 7px 18px rgba(0,0,0,.25); }
.map-world-number { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: #ffd12e; color: #18324d; font: 900 1.2rem 'Fredoka', sans-serif; }
.map-world-copy { display: grid; flex: 1; }
.map-world-copy strong { font: 800 1rem 'Fredoka', sans-serif; }
.map-world-copy small { opacity: .86; }
.map-world-state { font-size: 1.25rem; }
.map-world-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 12px 18px; background: #08385e; }
.map-world-caption strong { font: 800 1.2rem 'Fredoka', sans-serif; }
.map-world-caption span { opacity: .88; }
.map-stage { position: relative; width: 100%; aspect-ratio: 3/2; overflow: hidden; background: #071c2d; }
.map-stage > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.map-hotspot { position: absolute; width: clamp(34px, 5.8vw, 76px); aspect-ratio: 1; transform: translate(-50%,-50%); border: 3px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; }
.map-hotspot span { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 4px; border: 2px solid #fff; border-radius: 50%; background: #0d76b9; color: #fff; font-size: .8rem; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.map-hotspot.unlocked { border-color: rgba(255,245,105,.8); box-shadow: 0 0 0 5px rgba(255,211,41,.22), 0 0 20px rgba(255,211,41,.75); animation: mapPulse 1.8s infinite; }
.map-hotspot.completed span { background: #19a768; }
.map-hotspot.locked { border-color: rgba(16,29,45,.45); background: rgba(15,25,38,.42); cursor: not-allowed; }
.map-hotspot.locked span { background: #26394b; }
.map-player-avatar { position: absolute; z-index: 8; width: clamp(62px,8vw,112px); transform: translate(-82%,-78%); pointer-events: none; filter: drop-shadow(0 5px 5px rgba(0,0,0,.4)); animation: mapAvatarBounce 1.8s ease-in-out infinite; }
.map-player-avatar img { display: block; width: 100%; height: auto; max-height: 120px; object-fit: contain; }
.map-player-avatar span { display: block; max-width: 110px; margin: -5px auto 0; overflow: hidden; border: 2px solid #fff; border-radius: 999px; padding: 2px 7px; background: #ff9225; color: #fff; font-size: clamp(.62rem,1.2vw,.82rem); font-weight: 900; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
@keyframes mapPulse { 50% { box-shadow: 0 0 0 9px rgba(255,211,41,.08), 0 0 26px rgba(255,211,41,.9); } }
@keyframes mapAvatarBounce { 50% { transform: translate(-82%,-84%); } }
.map-loading, .map-gate-card { margin: min(12vh,100px) auto; width: min(540px,calc(100% - 24px)); border-radius: 20px; padding: 30px; background: #fff; color: #23364a; text-align: center; box-shadow: 0 16px 42px rgba(0,0,0,.28); }
.map-gate-icon { font-size: 3rem; }
.map-gate-card h2 { font-family: 'Fredoka',sans-serif; }
.map-primary-button { border: 0; border-radius: 99px; padding: 12px 22px; background: #ff9225; color: #fff; font: 900 1rem 'Nunito',sans-serif; cursor: pointer; }
.map-modal { position: fixed; inset: 0; margin: auto; width: min(760px,calc(100% - 32px)); max-width: 760px; max-height: calc(100dvh - 32px); border: 0; border-radius: 22px; padding: 0; overflow: auto; box-shadow: 0 24px 70px rgba(0,0,0,.48); }
.map-modal::backdrop { background: rgba(2,15,28,.72); }
.map-modal-inner { box-sizing: border-box; width: min(760px, calc(100vw - 32px)); max-width: 100%; padding: 26px; color: #23364a; text-align: center; overflow: hidden; }
.map-modal-icon { font-size: 3rem; }
.map-modal h2 { margin: 8px 0; font-family: 'Fredoka',sans-serif; color: #105c91; }
.map-game-shell { box-sizing: border-box; width: 100%; max-width: 700px; margin-inline: auto; }
.map-game-loading { padding: 30px; font-weight: 800; color: #176294; }
.map-game-intro { margin: 0 0 14px; color: #4d6680; font-weight: 700; }
.map-game-progress { height: 12px; overflow: hidden; border-radius: 999px; background: #dceafa; }
.map-game-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #35c878, #ffc934); transition: width .25s ease; }
.map-game-count { margin-top: 8px; color: #557089; font-size: .9rem; font-weight: 800; }
.map-game-prompt-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 0 18px; }
.map-game-prompt-row h3 { margin: 0; color: #123f70; font-size: clamp(1.25rem, 3vw, 2rem); }
.map-question-target { display: flex; align-items: center; justify-content: center; min-height: 112px; margin: -5px auto 15px; }
.map-question-target img { width: 108px; height: 108px; border-radius: 18px; object-fit: cover; box-shadow: 0 5px 14px rgba(23,83,126,.2); }
.map-question-target.multiple { flex-wrap: wrap; gap: 5px; max-width: 500px; }
.map-question-target.multiple img { width: 60px; height: 60px; border-radius: 10px; }
.map-speak-button { flex: 0 0 auto; width: 48px; height: 48px; border: 0; border-radius: 50%; background: #dff5ff; font-size: 1.4rem; cursor: pointer; }
.map-answer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.map-answer-button { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; min-height: 154px; padding: 12px; border: 3px solid #b7d9f4; border-radius: 18px; background: #fff; color: #173d68; font: 800 clamp(1rem, 2.2vw, 1.3rem) 'Nunito', sans-serif; cursor: pointer; box-shadow: 0 5px 0 #b7d9f4; }
.map-answer-label { display: block; }
.map-answer-pictures { display: flex; align-items: center; justify-content: center; gap: 2px; min-height: 78px; width: 100%; overflow: hidden; }
.map-answer-pictures img { width: 78px; height: 78px; border-radius: 12px; object-fit: cover; }
.map-answer-pictures.map-emoji-picture { font-size: 4rem; line-height: 1; }
.map-answer-pictures.repeated { flex-wrap: wrap; align-content: center; }
.map-answer-pictures.repeated img { width: 34px; height: 34px; border-radius: 7px; }
.map-answer-button:hover:not(:disabled), .map-answer-button:focus-visible { transform: translateY(-2px); border-color: #238ee8; }
.map-answer-button.correct { border-color: #16aa62; background: #dff9eb; box-shadow: 0 5px 0 #16aa62; }
.map-answer-button.wrong { border-color: #e45353; background: #fff0f0; box-shadow: 0 5px 0 #e45353; }
.map-sky-math-game { position: relative; min-height: 350px; overflow: hidden; border-radius: 22px; padding: 12px 14px 18px; background: linear-gradient(#55c8ff 0 60%,#dff7ff 60%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.6); }
.map-sky-math-game::before, .map-sky-math-game::after { content: ''; position: absolute; width: 150px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.8); box-shadow: 45px -12px 0 5px rgba(255,255,255,.8),85px 3px 0 -4px rgba(255,255,255,.8); }
.map-sky-math-game::before { left: -45px; top: 105px; }
.map-sky-math-game::after { right: 55px; top: 155px; transform: scale(.7); }
.map-math-guide { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 8px; color: #083d6b; font-weight: 900; }
.map-math-guide img { width: 62px; height: 62px; object-fit: contain; }
.map-math-guide span { border-radius: 999px; padding: 8px 14px; background: #fff; box-shadow: 0 4px 0 #b5dff3; }
.map-math-equation { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 105px; margin: 5px auto; color: #0b487a; }
.map-math-equation > strong { font: 900 clamp(1.7rem,5vw,3rem) 'Fredoka',sans-serif; }
.map-math-group { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3px; width: min(155px,25%); }
.map-math-group img { width: clamp(35px,5.2vw,58px); height: clamp(35px,5.2vw,58px); border-radius: 9px; object-fit: cover; }
.map-math-group.compact { flex-wrap: nowrap; }
.map-math-group.compact b { font: 900 clamp(1.6rem,4vw,2.5rem) 'Fredoka',sans-serif; }
.map-math-group.take-away::after { content: ''; position: absolute; width: 90%; height: 5px; border-radius: 5px; background: #e84949; transform: rotate(-18deg); box-shadow: 0 0 0 2px #fff; }
.map-balloon-field { position: relative; z-index: 3; display: flex; align-items: flex-end; justify-content: space-around; min-height: 150px; padding: 5px 10px; }
.map-math-balloon { position: relative; display: grid; place-items: center; width: clamp(86px,18vw,125px); aspect-ratio: .86; border: 0; border-radius: 50% 50% 48% 48%; color: #fff; cursor: pointer; filter: drop-shadow(0 8px 4px rgba(0,0,0,.2)); animation: mapBalloonFloat 2s ease-in-out infinite; }
.map-math-balloon::after { content: ''; position: absolute; left: 50%; bottom: -34px; width: 2px; height: 38px; background: #536b80; }
.map-math-balloon span { font: 900 clamp(2rem,6vw,3.2rem) 'Fredoka',sans-serif; text-shadow: 0 3px 0 rgba(0,0,0,.2); }
.map-math-balloon.balloon-1 { background: radial-gradient(circle at 35% 25%,#ff9d9d,#ed3b4e 70%); animation-delay: -.5s; }
.map-math-balloon.balloon-2 { background: radial-gradient(circle at 35% 25%,#ffdd78,#ff9225 70%); animation-delay: -1.2s; }
.map-math-balloon.balloon-3 { background: radial-gradient(circle at 35% 25%,#81e6bc,#16a86c 70%); animation-delay: -.1s; }
.map-math-balloon.correct { background: #18ad68; animation: mapBalloonPop .35s forwards; }
.map-math-balloon.wrong { background: #d84141; animation: mapBalloonWobble .35s; }
@keyframes mapBalloonFloat { 50% { transform: translateY(-12px) rotate(2deg); } }
@keyframes mapBalloonPop { to { transform: scale(1.35); opacity: 0; } }
@keyframes mapBalloonWobble { 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
.map-sound-safari { position: relative; min-height: 380px; overflow: hidden; border-radius: 22px; padding: 12px 16px 20px; background: linear-gradient(#78d9ff 0 38%,#9bd56c 38% 56%,#2d8c49 56% 100%); box-shadow: inset 0 0 0 4px rgba(255,255,255,.55); }
.map-sound-safari::before, .map-sound-safari::after { content: ''; position: absolute; bottom: -55px; width: 58%; height: 185px; border-radius: 50% 50% 0 0; background: #17673c; }
.map-sound-safari::before { left: -12%; transform: rotate(8deg); }
.map-sound-safari::after { right: -14%; transform: rotate(-7deg); background: #125b36; }
.map-safari-sun { position: absolute; top: 24px; right: 38px; width: 62px; height: 62px; border-radius: 50%; background: #ffe35a; box-shadow: 0 0 0 13px rgba(255,227,90,.22); }
.map-safari-guide { position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: 9px; color: #114c35; font-weight: 900; }
.map-safari-guide img { width: 70px; height: 70px; object-fit: contain; }
.map-safari-guide span { border: 3px solid #fff; border-radius: 999px; padding: 8px 15px; background: #fffbe4; box-shadow: 0 5px 0 rgba(16,88,51,.25); }
.map-safari-hunt { position: relative; z-index: 4; display: flex; align-items: flex-end; justify-content: space-around; min-height: 210px; gap: 12px; }
.map-safari-target { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(110px,27%,175px); min-height: 145px; border: 5px solid #ffd84c; border-radius: 50% 50% 42% 42%; padding: 8px; background: radial-gradient(circle,#fffbd9 0 52%,#7fba3f 53% 68%,#356f2f 69%); color: #143e2c; cursor: pointer; filter: drop-shadow(0 8px 5px rgba(0,0,0,.28)); transition: transform .2s,filter .2s; }
.map-safari-target:hover, .map-safari-target:focus-visible { transform: scale(1.08) translateY(-4px); filter: drop-shadow(0 12px 6px rgba(0,0,0,.32)); }
.map-safari-target.safari-2 { transform: translateY(-20px); }
.map-safari-target.safari-2:hover, .map-safari-target.safari-2:focus-visible { transform: translateY(-24px) scale(1.08); }
.map-safari-picture .map-answer-pictures { min-height: 78px; }
.map-safari-picture img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
.map-safari-target strong { border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.9); font: 900 1rem 'Fredoka',sans-serif; }
.map-safari-target.correct { border-color: #fff; background: #32bd70; animation: mapSafariFound .55s; }
.map-safari-target.wrong { border-color: #fff; background: #e24e4e; animation: mapBalloonWobble .35s; }
.map-safari-listen { position: relative; z-index: 5; border: 3px solid #fff; border-radius: 999px; padding: 9px 18px; background: #ff9225; color: #fff; font: 900 1rem 'Nunito',sans-serif; cursor: pointer; box-shadow: 0 5px 0 #b85a09; }
@keyframes mapSafariFound { 50% { transform: scale(1.18); filter: brightness(1.25); } }
.map-game-feedback { min-height: 30px; margin-top: 16px; font-weight: 900; color: #234d78; }
.map-game-error { color: #a32929; font-weight: 800; }
.map-game-complete { padding: 6px 0 12px; }
.map-game-complete h3 { margin: 8px 0; color: #155d96; font-size: 1.7rem; }
.map-game-stars { color: #ffc22c; font-size: clamp(2.2rem, 8vw, 4rem); letter-spacing: 4px; filter: drop-shadow(0 3px 0 #c57e00); }
.map-game-complete strong { display: block; color: #15945a; font-size: 1.5rem; }
.map-modal.map-arcade-modal { width: min(1180px,calc(100% - 20px)); max-width: 1180px; max-height: calc(100dvh - 20px); background: #071827; }
.map-arcade-modal .map-modal-inner { width: 100%; max-width: none; padding: 12px; color: #fff; }
.map-arcade-modal .map-modal-icon { display: none; }
.map-arcade-modal h2 { margin: 0 0 8px; color: #fff; }
.map-arcade-shell { display: flex; flex-direction: column; gap: 10px; min-height: min(78dvh,760px); }
.map-arcade-frame { display: block; width: 100%; min-height: min(70dvh,680px); flex: 1 1 auto; border: 0; border-radius: 12px; background: #000; }
.map-arcade-footer { display: flex; align-items: center; justify-content: center; gap: 14px; color: #d9efff; font-weight: 800; }
.map-arcade-footer .map-primary-button { margin: 0; }
.map-arcade-footer .map-primary-button:disabled { opacity: .55; cursor: not-allowed; }
.map-reward-scene { position: relative; width: 220px; height: 170px; margin: 0 auto 4px; overflow: visible; }
.map-reward-avatar { position: absolute; z-index: 2; left: 50%; bottom: 4px; width: 112px; height: 112px; object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); }
.map-reward-coins span { position: absolute; z-index: 3; left: var(--x); top: var(--y); font-size: 1.8rem; opacity: 0; animation: mapCoinDeposit 1.2s cubic-bezier(.2,.75,.25,1) forwards; animation-delay: calc(var(--coin) * 90ms); }
.map-reward-earned { position: absolute; z-index: 4; left: 50%; bottom: 34px; transform: translateX(-50%); padding: 7px 13px; border-radius: 999px; color: #fff; background: #ef8f12; white-space: nowrap; font-size: 1.2rem; font-weight: 900; opacity: 0; animation: mapRewardFade 2.6s 1.05s ease forwards; }
.map-reward-balance { position: absolute; z-index: 4; left: 50%; bottom: 2px; transform: translateX(-50%); color: #176294; white-space: nowrap; font-weight: 900; opacity: 0; animation: mapBalanceReveal .45s 1.65s ease forwards; }
@keyframes mapCoinDeposit { 0% { opacity: 0; transform: translateY(-35px) scale(.7) rotate(-25deg); } 20% { opacity: 1; } 100% { opacity: 0; left: 50%; top: 78px; transform: translate(-50%,0) scale(.35) rotate(210deg); } }
@keyframes mapRewardFade { 0% { opacity: 0; transform: translate(-50%,12px) scale(.8); } 20%,72% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; transform: translate(-50%,-12px) scale(.95); } }
@keyframes mapBalanceReveal { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .map-reward-coins span, .map-reward-earned, .map-reward-balance { animation-duration: .01ms; animation-delay: 0ms; } }
.map-unlock-message { display: inline-block; padding: 8px 15px; border-radius: 999px; background: #e7f8ef; color: #13784c; font-weight: 900; }
@media (max-width: 900px) { .map-overview-grid { grid-template-columns: 1fr; } .map-world-panel { position: static; } }
@media (max-width: 600px) { .map-content { padding: 8px; } .map-header { padding-inline: 8px; gap: 6px; } .map-token-preview { display: none; } .map-header-button { padding: 8px 10px; font-size: .8rem; } .map-world-caption span { font-size: .85rem; } .map-stage { min-width: 760px; } .map-world-view { overflow-x: auto; } .map-hotspot { width: 48px; } .map-answer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; } .map-answer-button { min-height: 130px; padding: 8px 4px; } .map-answer-pictures img { width: 64px; height: 64px; } .map-answer-pictures.repeated img { width: 25px; height: 25px; } .map-question-target { min-height: 75px; } .map-question-target img { width: 72px; height: 72px; } .map-question-target.multiple img { width: 42px; height: 42px; } .map-modal-inner { padding: 20px 10px; } .map-arcade-modal .map-modal-inner { padding: 8px; } .map-arcade-shell { min-height: 76dvh; } .map-arcade-frame { min-height: 66dvh; } .map-arcade-footer { flex-direction: column; gap: 7px; font-size: .8rem; } }
@media (max-width: 600px) { .map-header { flex-wrap: wrap; } .map-header h1 { order: 3; flex-basis: 100%; } .map-header-actions { margin-left: auto; } .map-area-link { padding: 7px 9px; font-size: .74rem; } }
@media (max-width: 600px) { .member-store-toolbar { align-items: flex-start; flex-direction: column; } .member-store-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .member-store-card { min-height: 210px; padding: 9px; } .member-store-card img { width: 105px; height: 105px; } }
@media (max-width: 600px) { .member-avatar-preview { min-height: 160px; gap: 10px; padding: 8px; } .member-avatar-preview img { width: 105px; height: 140px; } .member-avatar-preview strong { font-size: 1.08rem; } }
@media (max-width: 600px) { .map-sky-math-game { min-height: 310px; } .map-math-guide img { width: 48px; height: 48px; } .map-math-equation { gap: 5px; } .map-balloon-field { min-height: 125px; } .map-sound-safari { min-height: 330px; padding-inline: 7px; } .map-safari-guide img { width: 52px; height: 52px; } .map-safari-guide span { padding: 6px 9px; font-size: .78rem; } .map-safari-hunt { min-height: 190px; gap: 5px; } .map-safari-target { width: 31%; min-height: 120px; border-width: 3px; } .map-safari-picture img { width: 58px; height: 58px; } }
@media (prefers-reduced-motion: reduce) { .map-hotspot.unlocked, .map-player-avatar, .map-math-balloon { animation: none; } }