/* Ponto: um pequeno parque de diversões. Estilos do portal; os jogos mantêm o seu contraste. */
html { scroll-behavior: smooth; scroll-padding-top: 105px; }
body:not(.playing) { background: #fffcf5; color: #3d3156; font-family: 'Nunito', sans-serif; }
#home, #homeHead { --bright:#3d3156; --text:#3d3156; --dim:#665c76; --muted:#756b80; --line:#e8e0ec; --surface:#fff; --accent:#7750bb; --echo:#7750bb; font-family:'Nunito',sans-serif; }
#home .wrap, #homeHead .wrap { max-width:1280px; padding-inline:40px; }
#homeHead { background:#fffcf5ed; border-bottom:1px solid #eee6ed; }
#homeHead .wrap { height:92px; gap:45px; }
#homeHead .brand { font-family:'Nunito',sans-serif; font-weight:1000; font-size:36px; letter-spacing:-2px; text-transform:lowercase; color:#654397; gap:0; }
.brand-dot { color:#f29a61; }
.brand-mark { position:relative; display:inline-grid; place-items:center; width:41px; height:43px; margin-right:10px; color:#fffcf5; background:#8863bc; font-size:36px; border-radius:15px 18px 17px 8px; transform:rotate(-9deg); padding-bottom:7px; }
.brand-mark span { color:#ffd36b; position:absolute; top:-5px; right:6px; font-size:22px; }
.home-nav { display:flex; gap:30px; align-items:center; }
.home-nav a { text-decoration:none; font-weight:800; font-size:14px; color:#7c7385; padding:10px 0; }
.home-nav a.active { color:#7451a8; border-bottom:3px solid #c4b1e1; }
#homeHead .meta { gap:15px; }
#homeHead .metaItem { font-family:inherit; font-weight:800; font-size:12px; }
#homeHead .lvlpill { background:#f0e8f9; border:0; color:#7451a8; font-family:inherit; font-size:13px; font-weight:900; padding:11px 17px; }
#home { padding:26px 0 0; }
.hero { position:relative; display:grid; grid-template-columns:1.08fr 1fr; gap:0; min-height:440px; margin:0 0 24px; border-radius:32px; overflow:hidden; background:#f4f0e4; }
.hero-copy { padding:44px 0 36px 40px; position:relative; z-index:1; }
.welcome { font-size:10px; letter-spacing:1.8px; font-weight:1000; color:#79705f; display:flex; align-items:center; gap:8px; }
.welcome>span { color:#9b7ac9; font-size:24px; }
.hero h1 { font-family:'Nunito',sans-serif; font-size:clamp(38px,4.25vw,57px); font-weight:1000; letter-spacing:-2.6px; line-height:1.1; max-width:none; margin:18px 0; text-wrap:initial; }
.hero h1>span { color:#8758b9; position:relative; white-space:nowrap; }
.hero h1 svg { position:absolute; bottom:-7px; left:0; width:100%; height:17px; fill:none; stroke:#efb762; stroke-width:4; stroke-linecap:round; }
.hero h1 i { font-style:normal; color:#ed9970; }
.hero p { font-size:16px; line-height:1.65; font-weight:600; color:#7a7080; margin:22px 0; }
.explore { display:inline-flex; align-items:center; gap:29px; padding:14px 24px; border:2px solid #674391; border-radius:16px; background:#8963bd; color:white; box-shadow:0 4px 0 #624187; font-size:17px; font-weight:900; text-decoration:none; transition:transform .2s,box-shadow .2s; }
.explore span { font-size:25px; line-height:1; }
.explore:hover { transform:translateY(-3px) rotate(-2deg); box-shadow:0 7px 0 #624187; }
.hero-note { color:#877e89; font-size:11px; margin-top:17px; font-weight:700; }
.hero-note span { color:#6d9c78; padding-right:4px; }
.hero-art { position:relative; align-self:stretch; min-width:0; background:radial-gradient(ellipse at 55% 50%, #e6efc8 0%, transparent 65%); }
.hero-art img { position:absolute; width:112%; max-width:none; bottom:25px; right:-1%; }
.hello-sticker { position:absolute; top:41px; right:39px; transform:rotate(9deg); background:#fffaf0; color:#7c559b; border:2px solid #d6c4e3; border-radius:13px; padding:12px 16px; font-size:17px; font-weight:900; box-shadow:3px 4px 0 #e3dacc; }
.hello-sticker span { color:#eab349; }
.art-caption { position:absolute; bottom:16px; width:100%; text-align:center; font-size:8px; letter-spacing:2.4px; font-weight:900; color:#72916c; }
.dailyCard { display:grid; grid-template-columns:52px 1fr auto; gap:17px; padding:18px 24px; background:#fff1cf; border:1.5px solid #f1dfb1; border-radius:20px; }
.daily-star { color:#a97632; font-size:44px; line-height:1; transform:rotate(9deg); }
.dailyCard .eyebrow { font-family:inherit; font-size:10px; color:#9d7133; font-weight:900; letter-spacing:1.4px; }
.dailyCard .t { display:inline; font-size:19px; color:#654b30; font-weight:1000; }
.dailyCard .s { display:inline; margin-left:13px; color:#957c55; font-size:12px; font-weight:700; }
#dailyBtn { background:#fffaf0; border:1.5px solid #e7ce95; color:#806034; font-family:inherit; font-size:13px; font-weight:900; border-radius:12px; padding:12px 19px; box-shadow:0 3px 0 #ecd9af; }
.dailyCard.done { border-color:#a6c593; background:#e9f2da; }
.sectionHead { margin:36px 0 20px; justify-content:space-between; align-items:center; }
.sectionHead h2 { font-family:inherit; font-size:26px; font-weight:1000; letter-spacing:-.8px; }
.sectionHead h2 span { color:#a780c4; }
.section-kicker { font-size:9px; font-weight:900; letter-spacing:1.8px; color:#a194a6; display:block; margin-bottom:6px; }
#home .eyebrow { font-family:inherit; }
#catCount { font-size:11px; letter-spacing:0; background:#f2edf5; color:#9986ad; padding:8px 13px; border-radius:30px; font-weight:800; }
#cards { grid-template-columns:repeat(6,minmax(0,1fr)); gap:22px; }
.card { grid-column:span 2; display:flex; flex-direction:column; gap:0; padding:9px 9px 0; border:1.5px solid #e6ddec; border-radius:23px; background:#fff; box-shadow:0 5px 0 #f0eaf2; overflow:hidden; transition:transform .2s, box-shadow .2s; font-family:inherit; }
.card:hover { transform:translateY(-7px) rotate(-1deg); border-color:#b9a0d1; box-shadow:0 10px 0 #e8dfef; }
.card:nth-child(even):hover { transform:translateY(-7px) rotate(1deg); }
.card .ico { height:207px; position:relative; border-radius:16px; flex-shrink:0; background:#ece3f6; }
.card .ico img { width:100%; height:100%; object-fit:cover; transition:transform .35s; }
.card:hover .ico img { transform:scale(1.055); }
.play-bubble { position:absolute; bottom:12px; right:12px; width:35px; height:35px; display:grid; place-items:center; border-radius:50%; border:1px solid #ffffffba; background:#ffffffb8; color:#5d447d; font-size:24px; }
.card .tag { margin:18px 15px 5px; color:#9c83b5; font-family:inherit; font-weight:1000; font-size:9px; letter-spacing:1.4px; }
.card h3 { margin:0 15px 7px; font-size:27px; font-weight:1000; letter-spacing:-.9px; }
.card p { margin:0 15px 18px; font-size:13px; line-height:1.6; color:#8c8095; font-weight:600; }
.card .foot { margin:auto 15px 0; padding:12px 0 14px; border-color:#f0ebf4; font-family:inherit; font-size:10px; font-weight:800; color:#a08faa; gap:8px; }
.card:nth-child(4), .card:nth-child(5) { grid-column:span 3; }
.card:nth-child(4) .ico, .card:nth-child(5) .ico { height:237px; }
.card:nth-child(4) .ico img, .card:nth-child(5) .ico img { object-fit:contain; }
.card[data-game=kingdom] .ico { background:#cfebba; }
.card[data-game=stack] .ico { background:#f9cbdc; }
.profile-panel { background:#f6f1fa; border:1px solid #eae1f2; border-radius:26px; margin:44px 0; padding:26px 29px; }
.profile-panel .sectionHead { margin:0 0 20px; }
.profile-panel .sectionHead h2 { font-size:23px; }
.profile-panel .sectionHead .eyebrow { font-size:10px; letter-spacing:0; }
.statRow { gap:12px; }
.stat { background:#fffcff; border:1px solid #e9e0f0; border-radius:15px; text-align:center; padding:18px 10px; }
.stat .v { font-family:inherit; font-weight:1000; font-size:29px; color:#8d68b2; }
.stat .l { font-family:inherit; font-weight:800; font-size:9px; letter-spacing:.6px; color:#9884a9; }
.xpTrack { background:#e5daef; height:8px; margin-top:20px; }
#xpFill { border-radius:8px; background:#ae8acf; }
#xpNote { font-family:inherit; font-size:11px; max-width:none; color:#95839f; margin-bottom:24px; }
.profile-panel .sectionHead:has(+ .achs) { margin:22px 0 12px; }
.profile-panel .sectionHead:has(+ .achs) h2 { font-size:16px; }
.ach { border-color:#e1d6e9; background:#fdfaff; font-size:11px; color:#897397; padding:8px 11px; }
.ach s { font-family:inherit; color:#a292ab; font-size:10px; }
.ach.got { background:#e6f1d9; border-color:#b5d198; color:#5e804c; }
footer.site { display:flex; align-items:center; gap:28px; margin:0; padding:0 0 28px; border:0; font-size:12px; color:#a397aa; }
.footer-brand { font-size:33px; font-weight:1000; letter-spacing:-2px; color:#9a7bb4; text-decoration:none; }
footer.site small { display:block; font-size:10px; margin-top:3px; }
.footer-flower { margin-left:auto; font-size:40px; color:#cbb6de; }
#home :where(button,a):focus-visible, #homeHead :where(button,a):focus-visible { outline:3px solid #7955b0; outline-offset:5px; }
@media(min-width:1000px) { .hero-art img { animation:float-in 700ms ease-out both; } @keyframes float-in { from { opacity:0; transform:translateY(14px) rotate(2deg); } to { opacity:1; transform:none; } } }
@media(max-width:1000px) { #home .wrap,#homeHead .wrap { padding-inline:24px; } #homeHead .wrap { gap:25px; } .hero-copy { padding-left:28px; } .hero h1 { font-size:43px; } .hero-art img { width:125%; right:-10%; bottom:38px; } .hero-art .hello-sticker { right:23px; font-size:14px; } .dailyCard .s { display:block; margin-left:0; } .hero-note { font-size:10px; } }
@media(max-width:720px) { #homeHead .wrap { height:76px; gap:18px; } #homeHead .brand { font-size:30px; } .brand-mark { width:34px; height:37px; font-size:30px; } .home-nav { display:none; } #home { padding-top:16px; } #home .wrap,#homeHead .wrap { padding-inline:18px; } .hero { grid-template-columns:1fr; border-radius:25px; } .hero-copy { padding:28px 24px 0; } .hero h1 { font-size:clamp(34px,8.2vw,53px); letter-spacing:-1.9px; } .welcome { font-size:8px; letter-spacing:1.1px; } .hero p { font-size:14px; margin:20px 0; } .hero-art { height:290px; max-width:440px; width:100%; justify-self:center; } .hero-art img { width:100%; right:0; bottom:18px; } .hello-sticker { top:12px; right:15px; padding:8px 12px; } .art-caption { bottom:11px; font-size:7px; } .hero-note { font-size:10px; } .dailyCard { grid-template-columns:35px 1fr; gap:10px; padding:17px; } .daily-star { font-size:34px; } #dailyBtn { grid-column:2; justify-self:start; min-height:44px; } .sectionHead h2 { font-size:24px; max-width:270px; } .catalogue-head { align-items:end; gap:12px; } #catCount { font-size:9px; max-width:100px; text-align:center; flex-shrink:0; } #cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .card,.card:nth-child(4),.card:nth-child(5) { grid-column:span 1; } .card .ico,.card:nth-child(4) .ico,.card:nth-child(5) .ico { height:150px; } .card .tag { font-size:7px; letter-spacing:.7px; margin:13px 8px 5px; } .card h3 { font-size:21px; margin-inline:8px; } .card p { font-size:11px; margin-inline:8px; } .card .foot { margin-inline:8px; font-size:9px; flex-wrap:wrap; } .profile-panel { padding:20px 16px; } .statRow { grid-template-columns:repeat(3,minmax(0,1fr)); } .profile-panel .sectionHead .eyebrow { max-width:80px; text-align:right; } .ach s { display:none; } footer.site { gap:15px; } }
@media(max-width:420px) { #cards { grid-template-columns:1fr; } .card .ico,.card:nth-child(4) .ico,.card:nth-child(5) .ico { height:210px; } .card h3 { font-size:27px; } .card p { font-size:13px; } .card .tag { font-size:9px; } .card .foot { font-size:11px; } .hero-art { height:250px; } .sectionHead h2 { font-size:23px; } #catCount { max-width:78px; padding:8px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Texto de leitura com mais contraste sobre os fundos pastel. */
.card p { color:#766681; }
.hero-note { color:#766d77; }
#xpNote { color:#7d6a88; }
.ach s { color:#83718e; }
/* Os novos brinquedos têm lugar de destaque sem alterar a ordem dos jogos existentes. */
.card[data-game=stickers],.card[data-game=hair] { grid-column:span 3; }
.card[data-game=stickers] .ico,.card[data-game=hair] .ico { height:237px; }
.card[data-game=stickers] .ico { background:#bfe3d4; }
.card[data-game=hair] .ico { background:#f7d5df; }
.card[data-game=stickers] .ico img,.card[data-game=hair] .ico img { object-fit:contain; }
@media(max-width:720px) { .card[data-game=stickers],.card[data-game=hair] { grid-column:span 1; } .card[data-game=stickers] .ico,.card[data-game=hair] .ico { height:150px; } }
@media(max-width:420px) { .card[data-game=stickers] .ico,.card[data-game=hair] .ico { height:210px; } }