* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #7C3AED; overscroll-behavior: none; touch-action: none; }
body { font-family: "Baloo 2", "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif; color: #4C1D95; }
button { font-family: inherit; cursor: pointer; touch-action: none; }
#app { position: fixed; inset: 0; overflow: hidden; }
canvas { position: absolute; left: 0; top: 0; display: block; }
#fx { pointer-events: none; z-index: 50; }
.coin { display: inline-block; width: 1em; height: 1em; border-radius: 50%; vertical-align: -0.12em;
  background: radial-gradient(circle at 35% 30%, #FFF6C8 0 18%, #FFD43B 19% 62%, #F5B700 63%); box-shadow: inset 0 0 0 2px #D99A00; }
.coin.lg { width: 1.3em; height: 1.3em; }

/* HUD da casa */
#hud { position: absolute; left: 0; right: 0; top: 0; z-index: 10; padding: calc(env(safe-area-inset-top) + 8px) 10px 0; pointer-events: none; }
#hud .top { display: flex; align-items: center; height: 46px; }
#hud .name { flex: 1; text-align: center; font-weight: 900; font-size: 26px; color: #fff; text-shadow: 0 3px 0 #6D28D9; letter-spacing: 1px; }
#hud .sp { width: 96px; }
.pill { background: rgba(255,255,255,.92); border-radius: 22px; padding: 4px 12px; font-weight: 900; font-size: 20px; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 0 rgba(76,29,149,.18); color: #4C1D95; }
#coins { min-width: 96px; justify-content: center; }
#coins.bump { animation: bump .4s; }
#coins.shake { animation: shake .4s; }
#needs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.need { background: rgba(255,255,255,.92); border-radius: 16px; padding: 3px 6px 5px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 0 rgba(76,29,149,.18); }
.need .ic { font-size: 22px; line-height: 26px; }
.need .lb { font-size: 11px; font-weight: 800; line-height: 13px; margin-top: 2px; }
.bar { width: 100%; height: 9px; border-radius: 6px; background: #E9E3FA; overflow: hidden; }
.bar i { display: block; height: 100%; width: 50%; border-radius: 6px; transition: width .3s; }
.need.low { animation: pulse .9s infinite; background: #FFE4E6; }

#mute { position: absolute; z-index: 60; right: 10px; top: calc(env(safe-area-inset-top) + 8px); width: 46px; height: 46px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); font-size: 24px; box-shadow: 0 4px 0 rgba(76,29,149,.18); }

/* barra de ações */
#bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: space-around; gap: 4px;
  padding: 8px 6px calc(env(safe-area-inset-bottom) + 10px); }
.act { width: 19%; max-width: 84px; height: 76px; border: none; border-radius: 22px; background: #fff; box-shadow: 0 6px 0 #C4B5FD;
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 32px; line-height: 1; padding: 0; color: #4C1D95; }
.act span { font-size: 12px; font-weight: 900; margin-top: 5px; }
.act.on { background: #FFE066; box-shadow: 0 6px 0 #E0B400; }
.act.play { background: linear-gradient(160deg, #7C3AED, #06B6D4); color: #fff; box-shadow: 0 6px 0 #5B21B6; }
.act:active, .tile:active, .big:active, .gcard:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.15); }

/* painel */
#panel { position: absolute; left: 8px; right: 8px; z-index: 11; background: rgba(255,255,255,.95); border-radius: 26px; padding: 10px;
  display: none; box-shadow: 0 6px 0 rgba(76,29,149,.2); }
#panel.open { display: block; animation: up .25s ease-out; }
.grid { display: grid; gap: 8px; }
.grid.g5 { grid-template-columns: repeat(5, 1fr); }
.grid.g4 { grid-template-columns: repeat(4, 1fr); }
.row { display: flex; gap: 12px; justify-content: center; }
.tile { position: relative; border: none; background: #F3EEFF; border-radius: 18px; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 #DDD1FB; padding: 2px; color: #4C1D95; min-height: 52px; }
.tile .em { font-size: 34px; line-height: 1; }
.tile img { width: 86%; height: 86%; object-fit: contain; pointer-events: none; }
.tile.on { background: #FFE066; box-shadow: 0 4px 0 #E0B400; }
.tile.lock .em, .tile.lock img { filter: grayscale(.85); opacity: .55; }
.tile.lock.col img { filter: none; opacity: .7; }
.tile .price { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 10px; padding: 0 6px; font-size: 13px; display: flex; gap: 3px; align-items: center; white-space: nowrap; }
.tile.wide { aspect-ratio: auto; width: 46%; max-width: 170px; height: 96px; }
.tile.wide.xl { width: 70%; max-width: 240px; height: 110px; }
.tile.wide .em { font-size: 46px; }
.tile .lbl { font-weight: 900; font-size: 16px; margin-top: 4px; }
.soap { width: 62px; height: 40px; border-radius: 14px; background: #FF9ECF; position: relative; display: block; }
.soap::after { content: ""; position: absolute; left: 8px; top: 7px; width: 26px; height: 9px; border-radius: 5px; background: rgba(255,255,255,.6); }
.hint { text-align: center; font-size: 20px; margin-top: 6px; opacity: .8; }
.tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 8px; }
.tab { border: none; width: 70px; height: 50px; border-radius: 16px; background: #F3EEFF; font-size: 28px; box-shadow: 0 4px 0 #DDD1FB; }
.tab.on { background: #C4B5FD; box-shadow: 0 4px 0 #8B5CF6; }

/* sobreposições */
#ov { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(46,16,101,.55);
  padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px); }
#ov.open { display: flex; }
.card { position: relative; background: #fff; border-radius: 30px; padding: 18px 16px 20px; width: min(92vw, 420px); text-align: center;
  box-shadow: 0 10px 0 rgba(46,16,101,.3); animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
.card h2 { margin: 2px 0 12px; font-size: 34px; font-weight: 900; color: #6D28D9; }
.card .x { position: absolute; left: 12px; top: 12px; width: 48px; height: 48px; border-radius: 50%; border: none; background: #F3EEFF; font-size: 22px; color: #6D28D9; }
.gcard { display: flex; align-items: center; gap: 12px; width: 100%; height: 92px; margin: 10px 0; border: none; border-radius: 24px; padding: 0 16px; color: #fff; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.gcard .gi { font-size: 32px; letter-spacing: -6px; white-space: nowrap; }
.gcard .gt { font-size: 22px; font-weight: 900; text-align: left; line-height: 1.1; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.g1 { background: linear-gradient(135deg, #FB923C, #F43F5E); }
.g2 { background: linear-gradient(135deg, #38BDF8, #6366F1); }
.g3 { background: linear-gradient(135deg, #34D399, #0EA5E9); }
.big { min-width: 116px; height: 84px; border: none; border-radius: 26px; background: linear-gradient(160deg, #7C3AED, #06B6D4); color: #fff; font-size: 38px; box-shadow: 0 6px 0 #5B21B6; }
.big.pairs { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 120px; min-width: 130px; }
.big.pairs b { font-size: 40px; line-height: 1; }
.big.pairs .cards { display: flex; gap: 4px; margin-bottom: 8px; }
.big.pairs .cards i { width: 16px; height: 22px; border-radius: 4px; background: #fff; border: 2px solid #C4B5FD; }
.res canvas { position: static; width: 160px; height: 133px; margin: -6px auto 0; }
.stars { font-size: 46px; margin-bottom: 6px; }
.stars span { filter: grayscale(1); opacity: .25; display: inline-block; }
.stars span.on { filter: none; opacity: 1; animation: pop .5s both; }
.stars span.on:nth-child(2) { animation-delay: .15s; } .stars span.on:nth-child(3) { animation-delay: .3s; }
.earn { font-size: 34px; font-weight: 900; color: #B45309; margin-bottom: 14px; }

/* título */
.title { text-align: center; color: #fff; animation: pop .5s; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 5vh 0 3vh; }
body.intitle #hud, body.intitle #bar { display: none; }
.logo { font-size: 72px; font-weight: 900; line-height: 1; text-shadow: 0 6px 0 #5B21B6, 0 10px 18px rgba(0,0,0,.25); letter-spacing: 2px; }
.sub { font-size: 26px; font-weight: 900; margin-top: 4px; text-shadow: 0 3px 0 #5B21B6; }
.playbtn { margin-top: 26px; width: 120px; height: 120px; border-radius: 50%; border: 6px solid #fff; background: linear-gradient(160deg, #22C55E, #06B6D4); color: #fff;
  font-size: 54px; padding-left: 10px; box-shadow: 0 8px 0 #0E7490; animation: breathe 1.4s infinite; }
.studio { margin-top: 18px; font-weight: 900; opacity: .85; letter-spacing: 3px; }
body.intitle #ov { background: linear-gradient(rgba(46,16,101,.35), rgba(46,16,101,0) 35%, rgba(46,16,101,0) 65%, rgba(46,16,101,.45)); }

/* jogos */
#ghud { position: absolute; left: 0; right: 0; top: 0; z-index: 12; display: none; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) 64px 8px 10px; }
#ghud .gb { width: 52px; height: 46px; border: none; border-radius: 18px; background: #fff; font-size: 24px; box-shadow: 0 4px 0 rgba(76,29,149,.2); }
#ghud .gi { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
#ghud .pill { font-size: 19px; padding: 4px 10px; }
.hearts i { font-style: normal; font-size: 16px; }
.hearts i.off { filter: grayscale(1); opacity: .3; }
body.ingame #hud, body.ingame #bar, body.ingame #panel { display: none !important; }
body.ingame #ghud { display: flex; }
#mem { position: absolute; z-index: 8; display: none; }
#mem.open { display: grid; }
.mc { font-size: inherit; line-height: 1; border: none; padding: 0; background: none; perspective: 700px; width: 100%; height: 100%; }
.mc .in { position: relative; display: block; width: 100%; height: 100%; transition: transform .35s; transform-style: preserve-3d; }
.mc.f .in { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 18px; display: flex; align-items: center; justify-content: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0 5px 0 rgba(46,16,101,.25); }
.back { background: linear-gradient(135deg, #7C3AED, #06B6D4); border: 4px solid #fff; }
.back .paw { font-size: .55em; opacity: .5; }
.front { background: #fff; transform: rotateY(180deg); }
.mc.ok .front { background: #D9FBE5; animation: pop .4s; }

#toast { position: absolute; left: 50%; top: 40%; z-index: 55; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
  font-size: 40px; font-weight: 900; color: #fff; text-shadow: 0 4px 0 #5B21B6; white-space: nowrap; }
#toast.show { animation: toast 1.4s ease-out; }

@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes up { 0% { transform: translateY(30px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes bump { 50% { transform: scale(1.25); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes pulse { 50% { transform: scale(1.08); } }
@keyframes breathe { 50% { transform: scale(1.07); } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 80% { opacity: 1; transform: translate(-50%, -60%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } }
@media (max-height: 600px) { .act { height: 64px; font-size: 26px; } .need .lb { display: none; } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; } }

/* ---------- fases (v1.1) */
.gcard .gp { display: block; font-size: 14px; font-weight: 800; opacity: .95; margin-top: 3px; letter-spacing: 0; }
#ov.full { padding: 0; background: #7C3AED; align-items: stretch; justify-content: stretch; }
.map { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; }
.mhead { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top) + 8px) 64px 8px 10px; background: #7C3AED; box-shadow: 0 4px 0 rgba(46,16,101,.25); z-index: 2; }
.mhead .x { width: 48px; height: 46px; border-radius: 18px; border: none; background: #fff; font-size: 22px; color: #6D28D9; box-shadow: 0 4px 0 rgba(46,16,101,.25); }
.mhead .mt { flex: 1; color: #fff; font-weight: 900; font-size: 22px; line-height: 1.05; text-shadow: 0 2px 0 #5B21B6; text-align: center; }
.mhead .mt small { display: block; font-size: 15px; opacity: .95; }
.mscroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.mscroll button { touch-action: pan-y; }
.mpath { position: relative; margin: 0 auto; }
.band { position: absolute; left: calc(50% - 50vw); width: 100vw; }
.band .bl { position: relative; margin: 8px auto 0; width: max-content; background: rgba(255,255,255,.92); border-radius: 18px; padding: 4px 16px; font-weight: 900; font-size: 18px; color: #4C1D95; box-shadow: 0 4px 0 rgba(46,16,101,.18); z-index: 3; }
.b-jardim { background: linear-gradient(#BBF7D0, #86EFAC); }
.b-praia { background: linear-gradient(#BAE6FD, #FDE68A); }
.b-noite { background: linear-gradient(#312E81, #5B21B6); background-image: radial-gradient(#fff 1.2px, transparent 1.6px), linear-gradient(#312E81, #5B21B6); background-size: 46px 46px, 100% 100%; }
.b-neve { background: linear-gradient(#E0F2FE, #F8FAFC); background-image: radial-gradient(#fff 2px, transparent 2.6px), linear-gradient(#DBEAFE, #F8FAFC); background-size: 38px 38px, 100% 100%; }
.road { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.road .r1 { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 26; stroke-linecap: round; }
.road .r2 { fill: none; stroke: #FDE68A; stroke-width: 6; stroke-dasharray: 2 16; stroke-linecap: round; }
.node { position: absolute; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; border: 5px solid #fff; padding: 0;
  background: linear-gradient(160deg, #A78BFA, #7C3AED); color: #fff; box-shadow: 0 6px 0 rgba(46,16,101,.35); z-index: 2; }
.node b { font-size: 26px; font-weight: 900; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.node.done { background: linear-gradient(160deg, #4ADE80, #16A34A); }
.node.lock { background: #CBD5E1; color: #64748B; }
.node.lock b { font-size: 22px; text-shadow: none; }
.node.cur { background: linear-gradient(160deg, #FDE047, #F59E0B); animation: breathe 1.2s infinite; }
.node.mile { width: 76px; height: 76px; }
.node.final { width: 88px; height: 88px; border-color: #FFE066; }
.node:active { transform: translate(-50%, -46%); }
.node.nope { animation: shake .4s; }
.node .ns { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); white-space: nowrap; font-size: 17px; letter-spacing: -1px; font-style: normal; }
.node .ns i { font-style: normal; color: rgba(255,255,255,.75); text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.node .ns i.on { color: #FFD43B; text-shadow: 0 2px 0 #B45309; }
.node .gift { position: absolute; right: -14px; top: -14px; font-size: 26px; }
.mpet { position: absolute; width: 64px; height: 64px; transform: translate(-50%, -50%); pointer-events: none; z-index: 3; animation: hop 1s infinite; }
@keyframes hop { 50% { margin-top: -8px; } }
#ghud .lvp { background: #FFE066; }
.res .rlv { font-weight: 900; font-size: 18px; color: #7C3AED; margin-top: -4px; }
.res .tip { font-size: 40px; margin-bottom: 6px; }
.res .bonus { font-size: 22px; font-weight: 900; color: #16A34A; margin: -8px 0 10px; }
.res .prize { display: flex; align-items: center; justify-content: center; gap: 8px; background: #FEF3C7; border-radius: 20px; padding: 6px 10px; margin: -4px auto 12px; font-weight: 900; color: #B45309; font-size: 18px; animation: pop .5s .4s both; }
.res .prize img { width: 52px; height: 52px; }
.res .prize.bigp { background: linear-gradient(135deg, #FDE68A, #FBCFE8); font-size: 22px; }
.res .btns .big { min-width: 92px; }
.big.go { background: linear-gradient(160deg, #22C55E, #06B6D4); box-shadow: 0 6px 0 #0E7490; }
.res.lose h2 { color: #DB2777; }
.tile.rw .em { filter: none; opacity: .9; }
#mem.th-praia .back { background: linear-gradient(135deg, #06B6D4, #2563EB); }
#mem.th-noite .back { background: linear-gradient(135deg, #312E81, #7C3AED); }
#mem.th-neve .back { background: linear-gradient(135deg, #93C5FD, #A5B4FC); }
#ghud .gi { gap: 4px; }
#ghud .pill { font-size: 18px; padding: 4px 9px; }
.res.cmp { padding-top: 12px; }
.res.cmp canvas { width: 120px; height: 100px; }
.res.cmp h2 { margin-bottom: 6px; font-size: 30px; }
.res.cmp .stars { font-size: 38px; margin-bottom: 2px; }
.res.cmp .earn { font-size: 28px; margin-bottom: 10px; }
@media (max-height: 600px) { .res canvas { width: 110px; height: 92px; } .card h2 { font-size: 28px; margin-bottom: 6px; } }
#panel .grid.g4 { max-height: min(42vh, 236px); overflow-y: auto; overflow-x: hidden; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; }
#panel .grid.g4 .tile { touch-action: pan-y; }
#panel .grid.g4 { align-content: start; }
#panel .grid.g4 .tile { aspect-ratio: auto; height: calc((100vw - 64px) / 4); max-height: 130px; }