/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l)); display: flex; justify-content: space-between; align-items: flex-start; opacity: 0; transform: translateY(-20px); transition: .4s; }
.hud.show { opacity: 1; transform: none; }
.hud-left, .hud-right { display: flex; gap: 10px; align-items: center; pointer-events: auto; flex-wrap: wrap; }
.hud-right { justify-content: flex-end; }
.hud-btn { width: clamp(52px, 10vmin, 70px); height: clamp(52px, 10vmin, 70px); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: 0 6px 0 rgba(74,59,107,.15), 0 10px 24px rgba(74,59,107,.15); font-size: clamp(26px, 5vmin, 36px); display: grid; place-items: center; transition: transform .15s; position: relative; }
.hud-btn.small { width: clamp(42px, 8vmin, 54px); height: clamp(42px, 8vmin, 54px); font-size: clamp(18px, 3.6vmin, 26px); opacity: .75; }
.hud-btn.pressed, .hud-pill.pressed { transform: scale(.9); }
.hud-btn.holding::after { content: ''; position: absolute; inset: -5px; border-radius: 26px; border: 4px solid var(--pink); animation: holdRing 2s linear forwards; clip-path: inset(0 100% 0 0); }
@keyframes holdRing { to { clip-path: inset(0 0 0 0); } }
.hud-pill { height: clamp(46px, 9vmin, 60px); border-radius: 30px; background: rgba(255,255,255,.92); padding: 0 16px 0 10px; display: flex; align-items: center; gap: 6px; box-shadow: 0 6px 0 rgba(74,59,107,.15); font-weight: 900; font-size: clamp(18px, 3.8vmin, 26px); transition: transform .15s; }
.hud-ico { font-size: 1.25em; }
.hud-pill.bump { animation: bounce .6s; }
.hint { position: fixed; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translate(-50%, 30px); background: rgba(255,255,255,.95); border-radius: 30px; padding: 12px 22px; font-weight: 900; font-size: clamp(16px, 3.6vmin, 24px); box-shadow: var(--shadow); opacity: 0; transition: .4s; z-index: 11; pointer-events: none; white-space: nowrap; }
.hint.show { opacity: 1; transform: translate(-50%, 0); }

.near-bubble { position: fixed; left: 0; top: 0; z-index: 9; background: #fff; border-radius: 20px; padding: 8px 16px; font-weight: 900; font-size: clamp(14px, 3vmin, 20px); box-shadow: 0 5px 0 color-mix(in srgb, var(--c, #ff9fbf) 70%, white), 0 10px 20px rgba(74,59,107,.15); opacity: 0; pointer-events: none; transition: opacity .3s; white-space: nowrap; }
.near-bubble::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-top-color: #fff; border-bottom: 0; }
.near-bubble.show { opacity: 1; pointer-events: auto; }

/* ---------- Título ---------- */
.title-screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 4vmin, 34px); background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%); transition: opacity .7s, transform .7s; }
.title-screen.hide { opacity: 0; transform: scale(1.15); pointer-events: none; }
.title-logo { text-align: center; filter: drop-shadow(0 8px 0 rgba(74,59,107,.12)); animation: floaty 3s ease-in-out infinite alternate; }
.title-small { font-weight: 900; font-size: clamp(22px, 5vmin, 40px); color: #fff; text-shadow: 0 3px 0 #9b6bd0, 0 0 4px #9b6bd0, 0 0 2px #9b6bd0; }
.title-big { font-weight: 900; font-size: clamp(64px, 17vmin, 150px); line-height: .95; background: linear-gradient(180deg, #ffffff 0%, #ffe3f1 45%, #ff9dc8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 3px #e36aa4; paint-order: stroke fill; letter-spacing: 1px; }
.play-btn { width: clamp(110px, 24vmin, 170px); height: clamp(110px, 24vmin, 170px); border-radius: 50%; font-size: clamp(50px, 11vmin, 80px); color: #fff; background: linear-gradient(180deg, #ffa8d2, #ff5f9e); box-shadow: 0 10px 0 #d6458a, 0 20px 50px rgba(214,69,138,.45); padding-left: 10px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.title-friends { display: flex; gap: clamp(6px, 2vmin, 16px); font-size: clamp(34px, 8vmin, 60px); }
.title-friends span { display: inline-block; animation: hop 1.4s ease-in-out infinite; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px) rotate(-6deg); } }

/* ---------- Painel da zona ---------- */
.modal-x { position: absolute; top: 12px; right: 12px; z-index: 2; }
.zone-modal, .album-modal, .map-modal, .outfit-modal, .parents-modal { position: relative; }
.zone-panel { position: relative; }
.zone-head { display: flex; align-items: center; gap: 14px; margin: 0 56px 14px 0; }
.zone-host { width: clamp(64px, 13vmin, 96px); height: clamp(64px, 13vmin, 96px); border-radius: 50%; display: grid; place-items: center; font-size: clamp(40px, 8vmin, 60px); flex: none; animation: talk .6s infinite alternate; }
.zone-name { font-weight: 900; font-size: clamp(22px, 5vmin, 38px); }
.zone-sub { color: var(--ink-soft); font-weight: 800; font-size: clamp(14px, 3vmin, 20px); }
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 24vmin, 170px), 1fr)); gap: clamp(10px, 2vmin, 16px); min-width: min(86vw, 900px); }
.zone-card { position: relative; background: #fff; border-radius: 26px; padding: 14px 8px 10px; box-shadow: 0 7px 0 color-mix(in srgb, var(--zone) 60%, white), 0 12px 24px rgba(74,59,107,.12); display: flex; flex-direction: column; align-items: center; gap: 4px; animation: rise .4s both; transition: transform .15s; }
.zc-icon { font-size: clamp(42px, 9vmin, 64px); line-height: 1.1; }
.zc-title { font-weight: 900; font-size: clamp(14px, 2.8vmin, 19px); text-align: center; line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; }
.zc-levels { display: flex; gap: 2px; font-size: clamp(14px, 2.8vmin, 18px); color: rgba(74,59,107,.25); }
.zc-levels .done { color: #ffc83d; }
.zc-crown { position: absolute; top: -10px; right: -6px; font-size: 28px; transform: rotate(15deg); }

.lvl-panel { text-align: center; padding: 6px 10px; }
.lvl-icon { font-size: clamp(54px, 11vmin, 80px); }
.lvl-title { font-weight: 900; font-size: clamp(22px, 5vmin, 34px); margin-bottom: 14px; }
.lvl-row { display: flex; gap: clamp(6px, 2vmin, 16px); justify-content: center; flex-wrap: wrap; }
.lvl { width: clamp(54px, 14vmin, 100px); height: clamp(72px, 17vmin, 120px); border-radius: 26px; background: #fff; box-shadow: 0 7px 0 color-mix(in srgb, var(--zone) 60%, white); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; transition: transform .15s; }
.lvl-n { font-size: clamp(30px, 7vmin, 46px); font-weight: 900; }
.lvl-stars { color: #ffc83d; font-size: clamp(12px, 2.6vmin, 18px); letter-spacing: 1px; }
.lvl.locked { opacity: .45; }
.lvl.next { background: color-mix(in srgb, var(--zone) 25%, white); animation: pulse 1.4s infinite; }

/* ---------- Mapa ---------- */
.modal-title { font-weight: 900; font-size: clamp(22px, 5vmin, 34px); margin: 0 50px 14px 0; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 26vmin, 190px), 1fr)); gap: 12px; min-width: min(86vw, 860px); }
.map-card { border-radius: 26px; padding: 14px 8px; color: #fff; box-shadow: inset 0 -8px 0 rgba(0,0,0,.08), 0 10px 20px rgba(74,59,107,.15); text-shadow: 0 2px 0 rgba(0,0,0,.12); transition: transform .15s; }
.map-card.pressed { transform: scale(.94); }
.mc-emoji { font-size: clamp(44px, 9vmin, 64px); }
.mc-name { font-weight: 900; font-size: clamp(15px, 3vmin, 20px); }
.mc-sub { font-weight: 800; font-size: clamp(12px, 2.4vmin, 15px); opacity: .95; }

/* ---------- Álbum ---------- */
.album { display: flex; flex-direction: column; gap: 12px; min-width: min(86vw, 860px); }
.album-zname { font-weight: 900; font-size: clamp(16px, 3.4vmin, 22px); margin-bottom: 6px; }
.album-row { display: flex; flex-wrap: wrap; gap: 10px; }
.sticker { width: clamp(56px, 11vmin, 78px); height: clamp(56px, 11vmin, 78px); border-radius: 50%; background: rgba(74,59,107,.06); border: 3px dashed rgba(74,59,107,.2); font-size: clamp(28px, 6vmin, 42px); display: grid; place-items: center; color: rgba(74,59,107,.3); font-weight: 900; transition: transform .15s; }
.sticker.got { background: #fff; border: 4px solid var(--c); box-shadow: 0 5px 0 rgba(74,59,107,.12); color: inherit; animation: rise .4s both; }
.sticker.gold { border-color: #ffc83d; box-shadow: 0 0 0 3px #fff3c4, 0 0 18px rgba(255,200,61,.8); }
.sticker.pressed { transform: scale(.9) rotate(-8deg); }

/* ---------- Visual ---------- */
.outfit { min-width: min(80vw, 640px); }
.outfit-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.outfit-lbl { font-size: 36px; width: 50px; }
.swatch { width: clamp(52px, 10vmin, 68px); height: clamp(52px, 10vmin, 68px); border-radius: 50%; box-shadow: 0 5px 0 rgba(74,59,107,.15), inset 0 0 0 3px rgba(255,255,255,.7); position: relative; transition: transform .15s; font-size: 30px; background: #fff; display: grid; place-items: center; }
.swatch.sel { box-shadow: 0 0 0 5px var(--pink), 0 5px 0 rgba(74,59,107,.15); transform: scale(1.08); }
.swatch.locked { filter: grayscale(.6); opacity: .7; }
.swatch .cost { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 12px; font-size: 12px; font-weight: 900; padding: 2px 6px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.1); }

/* ---------- Pais ---------- */
.parents { min-width: min(88vw, 720px); font-size: 16px; position: relative; }
.p-sec { margin: 14px 0; }
.p-sec label { display: block; font-weight: 900; margin-bottom: 6px; font-size: 15px; color: var(--ink-soft); }
.p-sec.row { display: flex; flex-wrap: wrap; gap: 8px; }
.p-input { font: inherit; font-size: 20px; font-weight: 800; padding: 10px 14px; border-radius: 14px; border: 2px solid #e6dcf5; width: 100%; max-width: 360px; color: var(--ink); -webkit-user-select: text; user-select: text; }
.p-toggle { padding: 10px 14px; border-radius: 14px; background: #eee8f6; font-weight: 800; opacity: .6; }
.p-toggle.on { background: #dff7e4; opacity: 1; box-shadow: inset 0 0 0 2px var(--good); }
.p-seg { display: inline-flex; background: #eee8f6; border-radius: 14px; padding: 4px; gap: 4px; flex-wrap: wrap; }
.p-seg button { padding: 8px 14px; border-radius: 10px; font-weight: 800; }
.p-seg button.on { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.p-report { display: flex; flex-direction: column; gap: 6px; }
.p-bar { display: grid; grid-template-columns: 150px 1fr 60px; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.p-track { height: 12px; border-radius: 8px; background: #eee8f6; overflow: hidden; }
.p-track span { display: block; height: 100%; border-radius: 8px; }
.p-bn { text-align: right; color: var(--ink-soft); }
.p-feel { display: flex; flex-wrap: wrap; gap: 6px; }
.p-feel .pill { font-size: 13px; }
.p-draw { display: flex; flex-wrap: wrap; gap: 8px; }
.p-draw img { width: 120px; border-radius: 12px; box-shadow: 0 3px 10px rgba(0,0,0,.1); background: #fff; }
.p-info { background: #f3eefa; border-radius: 14px; padding: 10px 14px; font-size: 14px; line-height: 1.4; }
.p-danger { padding: 10px 16px; border-radius: 14px; background: #ffe3e3; color: #c0392b; font-weight: 800; }

/* ---------- Descanso / erros ---------- */
.rest { position: fixed; inset: 0; z-index: 2000; background: linear-gradient(180deg, #2d2a5a, #5b4b8a); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 20px; }
.rest-moon { font-size: 120px; animation: floaty 3s infinite alternate; }
.rest-txt { font-weight: 900; font-size: clamp(28px, 6vmin, 46px); }
.rest-sub { opacity: .7; font-weight: 700; }
.rest-gear { position: absolute; bottom: 24px; right: 24px; }
.nogl { display: none; position: fixed; inset: 0; place-items: center; text-align: center; font-weight: 900; font-size: 22px; padding: 30px; z-index: 3000; background: #fff7fb; }
.loading { position: fixed; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 900; font-size: 22px; background: #bfe6ff; z-index: 3000; }
.ld-emoji { font-size: 80px; animation: floaty 1s infinite alternate; }
@media (max-height: 460px) { .title-friends { display: none; } .hud { padding-top: calc(6px + var(--safe-t)); } }