/* =====================================================================
   NENA PLAY — DESIGN SYSTEM  "papel recortado & brinquedo"
   Carrega DEPOIS de style.css: manda por cascata.
   Ver DESIGN.md (normativo).
   ===================================================================== */

:root{
  --paper-d:#E3C9A6;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ===== 1. TIPOGRAFIA ================================================= */
.app-wordmark,.premenu-title,.game-card-title,.category-title,.category-back-title,
.game-header-title,.victory-title,.mascot-greeting,.more-drawer-title,.bottom-nav-label,
.coin-count,.level-number,.prog-ring-pct,.victory-btn,.game-instruction{
  font-family:var(--font-display);letter-spacing:0;
}
.level-number,.coin-count,.prog-ring-pct,.mpb-stat-value{font-variant-numeric:tabular-nums}

/* ===== 2. FUNDO DO APP ============================================== */
#menu-screen{
  background:
    radial-gradient(120% 70% at 50% 0%,#33266E 0%,rgba(51,38,110,0) 60%),
    linear-gradient(180deg,#150F33 0%,#241A52 52%,#2B1F5C 100%);
}
.menu-scene{z-index:0}
.menu-scene::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:var(--grain);background-size:160px 160px;opacity:.045;
}
.scene-blob{position:absolute;border-radius:50%;filter:blur(46px);pointer-events:none}
.scene-blob-a{width:280px;height:280px;top:-90px;left:-110px;background:rgba(139,92,246,.42)}
.scene-blob-b{width:240px;height:240px;top:26%;right:-100px;background:rgba(47,212,198,.22)}
.scene-stars{position:absolute;top:0;left:0;width:100%;height:300px}
.scene-moon{animation:npMoon 9s ease-in-out infinite}
@keyframes npMoon{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.scene-hills{position:absolute;bottom:0;left:0;width:100%;height:400px}
/* faíscas genéricas do menu antigo: fora */
.menu-content::before{display:none!important}

/* ===== 3. TECLA FÍSICA (base de todo botão) ========================= */
.back-btn,.sound-btn,.victory-btn,.category-back-btn,.more-drawer-btn,.cat-tab,.cat-tab-back,
.premenu-card,.game-card,.menu-coins,.player-age-badge,.bottom-nav-btn{
  transition:transform .12s var(--ease-out),box-shadow .12s var(--ease-out),background .15s;
}
.back-btn,.sound-btn{
  width:var(--tap);height:var(--tap);min-width:var(--tap);
  border-radius:18px;background:var(--paper);border:3px solid var(--ink);
  box-shadow:inset 0 -5px 0 var(--paper-d),0 4px 0 var(--ink);color:var(--ink);font-size:24px;font-weight:900;
}
.back-btn:active,.sound-btn:active{transform:translateY(4px);box-shadow:inset 0 -1px 0 var(--paper-d),0 0 0 var(--ink)}
.back-btn span{color:var(--ink)}

.victory-btn{
  border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 5px 0 var(--ink);
  font-weight:800;min-height:60px;font-size:19px;
}
.victory-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.menu-btn{background:var(--paper);color:var(--ink);box-shadow:0 5px 0 var(--ink)}

.category-back-btn{
  background:var(--paper);color:var(--ink);border:3px solid var(--ink);border-radius:16px;
  box-shadow:inset 0 -5px 0 var(--paper-d),0 4px 0 var(--ink);min-height:44px;font-weight:800;padding:6px 16px;
}
.category-back-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}

.more-drawer-btn{
  border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:0 5px 0 var(--ink);
  min-height:88px;background:var(--paper);color:var(--ink);
}
.more-drawer-btn{box-shadow:inset 0 -6px 0 var(--paper-d),0 5px 0 var(--ink)}
.more-drawer-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.more-drawer-label{color:var(--ink);font-weight:800}

.age-btn{border:3px solid var(--ink)!important;box-shadow:0 6px 0 var(--ink)!important}
.age-btn:active{transform:translateY(6px)!important;box-shadow:0 0 0 var(--ink)!important}

/* ===== 4. CABEÇALHO DO MENU ======================================== */
.menu-header{
  background:none;padding:10px 14px 6px;
  padding-top:max(10px,calc(env(safe-area-inset-top) + 6px));min-height:58px;align-items:center;
}
.app-wordmark{
  display:flex;gap:6px;align-items:baseline;font-size:29px;font-weight:800;line-height:1;
  transform:rotate(-2.5deg);padding:2px 0 6px;transform-origin:left center;
}
.app-wordmark span{
  text-shadow:
    -2px 0 var(--ink),2px 0 var(--ink),0 -2px var(--ink),0 2px var(--ink),
    -2px -2px var(--ink),2px -2px var(--ink),-2px 2px var(--ink),2px 2px var(--ink),
    0 6px 0 rgba(27,18,53,.45);
}
.wm-a{color:var(--sun)}
.wm-b{color:var(--bubble)}
.menu-header-status{display:flex;align-items:center;gap:8px;flex-shrink:0}

.menu-coins{
  background:var(--paper);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  border-radius:var(--r-pill);padding:5px 13px;min-height:40px;gap:6px;
}
.menu-coins:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.coin-icon{display:flex;align-items:center;justify-content:center;font-size:16px}
.coin-icon svg{display:block}
.coin-count{color:var(--ink);font-weight:800;font-size:18px}

.player-age-badge{
  background:linear-gradient(180deg,#A78BFA,var(--grape));border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);border-radius:var(--r-pill);padding:6px 12px;min-height:40px;
}
.player-age-badge:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.player-age-badge #player-age-display{font-family:var(--font-display);font-weight:800;font-size:18px;color:#fff}
.player-age-badge .age-label{font-size:11px;font-weight:800;color:rgba(255,255,255,.82)}

.menu-content{padding:4px 16px 12px}
/* urso + balão lado a lado; o nena-char é desenhado por spans absolutos
   sobre uma âncora de tamanho zero, então reservamos a caixa na mão */
.menu-mascot{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;text-align:left}
.menu-mascot .mascot-with-acc:has(.nena-char){width:44px;height:58px;flex-shrink:0}
.menu-mascot .mascot-bounce:has(.nena-char){position:absolute;left:22px;top:7px;width:0;height:0;overflow:visible}
.mascot-greeting{
  display:inline-block;background:var(--paper);color:var(--ink);border:3px solid var(--ink);
  box-shadow:0 4px 0 var(--ink);border-radius:var(--r-lg);padding:7px 16px;font-size:15px;
  font-weight:800;margin-top:0;transform:rotate(-1deg);flex-shrink:1;
}

/* ===== 5. PRÉ-MENU DE CATEGORIAS =================================== */
.premenu-grid{grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:20px}
.premenu-card{
  position:relative;overflow:hidden;isolation:isolate;
  border:3px solid var(--ink);border-radius:var(--r-lg);
  box-shadow:0 6px 0 var(--cat-d,#6836DC),0 6px 0 3px rgba(11,7,26,.55);
  padding:86px 12px 16px;gap:3px;color:var(--ink);min-height:196px;justify-content:flex-start;
  background:linear-gradient(180deg,var(--cat-l,#B79BFC),var(--cat,#8B5CF6))!important;
}
.premenu-card::before{
  content:'';position:absolute;left:-3px;right:-3px;top:80px;bottom:-3px;z-index:-1;
  background:var(--paper);border-top:3px solid var(--ink);
  border-radius:38px 38px 21px 21px / 18px 18px 21px 21px;
}
.premenu-card:active{transform:translateY(6px);box-shadow:0 0 0 var(--cat-d,#6836DC),0 0 0 3px rgba(11,7,26,.55)}
.premenu-card:nth-child(1){--cat:var(--cat-learn);--cat-l:#6FF0E4;--cat-d:var(--cat-learn-d)}
.premenu-card:nth-child(2){--cat:var(--cat-play);--cat-l:#FFB37A;--cat-d:var(--cat-play-d)}
.premenu-card:nth-child(3){--cat:var(--cat-create);--cat-l:#FF95BE;--cat-d:var(--cat-create-d)}
.premenu-card:nth-child(4){--cat:var(--cat-toy);--cat-l:#B79BFC;--cat-d:var(--cat-toy-d)}

.premenu-icon{
  position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:64px;height:64px;border-radius:50%;background:var(--paper);
  border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:34px;line-height:1;filter:none;animation:none;
}
.premenu-title{font-size:21px;font-weight:800;color:var(--ink);text-shadow:none;line-height:1.1}
.premenu-desc{font-size:11.5px;font-weight:700;color:var(--ink-soft);opacity:1;line-height:1.25;padding:0 2px}
.premenu-progress{height:8px;background:rgba(27,18,53,.14);border-radius:var(--r-pill);margin-top:7px}
.premenu-progress-bar{background:linear-gradient(90deg,var(--lime),var(--lime-d));border-radius:var(--r-pill)}
.premenu-stars{color:var(--ink-soft);font-size:11px;font-weight:800;text-shadow:none;margin-top:2px}
.premenu-count{
  background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-pill);
  font-size:10.5px;font-weight:800;padding:3px 11px;margin-top:7px;
}

/* ===== 6. CABEÇALHOS DE SEÇÃO / ABAS ============================== */
.category-header{gap:9px;margin-bottom:11px;padding-left:2px}
.category-icon{font-size:20px}
.category-title{
  font-size:19px;font-weight:800;color:var(--paper);
  text-shadow:0 2px 0 var(--ink);transform:rotate(-1deg);
}
.category-count,.category-age-hint{
  background:rgba(255,246,233,.12);border:2px solid rgba(255,246,233,.22);
  color:rgba(255,246,233,.8);border-radius:var(--r-pill);padding:2px 10px;font-weight:800;font-size:10.5px;
}
.category-back-title{font-size:20px;font-weight:800;color:var(--paper);text-shadow:0 2px 0 var(--ink)}
.cat-tab{
  border:2px solid rgba(255,246,233,.2);background:rgba(255,246,233,.08);
  color:rgba(255,246,233,.85);border-radius:14px;padding:8px 13px;min-height:40px;font-weight:800;
}
.cat-tab-active{
  background:var(--paper)!important;border-color:var(--ink);color:var(--ink);
  box-shadow:0 3px 0 var(--ink);transform:none;
}
.cat-tab:active{transform:translateY(2px)}
.cat-tab-back{
  width:40px;min-width:40px;height:40px;border-radius:13px;background:var(--paper);
  border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);color:var(--ink);
}
.cat-tab-back:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}

/* ===== 7. CARD DE JOGO — ficha de papel recortado ================= */
.category-grid{grid-template-columns:repeat(3,1fr);gap:12px}
.game-card{
  --cat:var(--grape);--cat-l:#B79BFC;--cat-d:var(--grape-d);
  background:var(--paper)!important;
  border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--cat-d),0 5px 0 3px rgba(11,7,26,.55);
  aspect-ratio:1/1.14;min-height:112px;
  padding:0 0 17px;justify-content:flex-end;overflow:hidden;
  contain-intrinsic-size:auto 130px;
}
.game-card[data-cat="learn"]{--cat:#2FD4C6;--cat-l:#7FEDE2;--cat-d:#17A99D}
.game-card[data-cat="play"]{--cat:#FF8A3D;--cat-l:#FFBE8B;--cat-d:#E06718}
.game-card[data-cat="create"]{--cat:#FF5E9C;--cat-l:#FFA1C4;--cat-d:#DB3A78}
.game-card[data-cat="toy"]{--cat:#8B5CF6;--cat-l:#C0AAFD;--cat-d:#6836DC}
/* variação tonal dentro da mesma família: o grid não vira parede de uma cor só */
.category-grid .game-card[data-cat="learn"]:nth-child(3n+2){--cat:#39C0EA;--cat-l:#93E1F7;--cat-d:#1794BC}
.category-grid .game-card[data-cat="learn"]:nth-child(3n){--cat:#3FD98C;--cat-l:#93EFC1;--cat-d:#1EAF68}
.category-grid .game-card[data-cat="play"]:nth-child(3n+2){--cat:#FFB020;--cat-l:#FFD584;--cat-d:#D98A00}
.category-grid .game-card[data-cat="play"]:nth-child(3n){--cat:#FF6B5E;--cat-l:#FFAAA1;--cat-d:#DB4335}
.category-grid .game-card[data-cat="create"]:nth-child(3n+2){--cat:#C86BFF;--cat-l:#E3B3FF;--cat-d:#A03FDB}
.category-grid .game-card[data-cat="create"]:nth-child(3n){--cat:#FF8AB0;--cat-l:#FFC2D5;--cat-d:#DB5C88}
.category-grid .game-card[data-cat="toy"]:nth-child(3n+2){--cat:#6C8BFF;--cat-l:#AFC0FF;--cat-d:#4360DB}
.category-grid .game-card[data-cat="toy"]:nth-child(3n){--cat:#A855D6;--cat-l:#D3A4EC;--cat-d:#8232AF}

/* palco colorido (redefine o antigo brilho ::before) */
.game-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:60%;z-index:1;
  background:linear-gradient(180deg,var(--cat-l),var(--cat));
  border-bottom:3px solid var(--ink);
  border-radius:0 0 34px 34px / 0 0 15px 15px;
}
/* neutraliza o shimmer diagonal antigo */
.game-card::after{
  top:0;left:0;width:100%;height:100%;background:none;transform:none;animation:none!important;
}
.game-card:active::after{animation:none!important}
.game-card:active{transform:translateY(5px);box-shadow:0 0 0 var(--cat-d),0 0 0 3px rgba(11,7,26,.55)}
@media(hover:hover){
  .game-card:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--cat-d),0 7px 0 3px rgba(11,7,26,.55)}
  .game-card:hover .game-card-icon{transform:translateX(-50%) scale(1.07) rotate(-3deg)}
}
.game-card:focus-visible{outline:3px solid var(--sun);outline-offset:3px}

.game-card-icon{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-size:28px;line-height:1;margin:0;z-index:3;filter:none;
  transition:transform .18s var(--ease-bounce);
}
.game-card:active .game-card-icon{transform:translateX(-50%) scale(.92)}
.game-card-title{
  position:relative;z-index:3;color:var(--ink);text-shadow:none;
  font-size:12.5px;font-weight:800;line-height:1.08;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding:0 6px;letter-spacing:-.1px;
}
.game-card-progress{bottom:6px;left:9px;right:9px;z-index:4;gap:4px}
.game-card-progbar{height:6px;background:rgba(27,18,53,.16);border-radius:var(--r-pill)}
.game-card-progfill{background:linear-gradient(90deg,var(--lime),var(--lime-d));border-radius:var(--r-pill)}
.game-card-proglabel{font-size:8.5px;color:var(--ink-soft);font-weight:800}

/* adesivos */
.game-card-badge{
  top:5px;right:5px;z-index:5;font-family:var(--font-display);font-size:8.5px;font-weight:800;
  padding:2px 6px;border-radius:8px;border:2px solid var(--ink);box-shadow:0 2px 0 var(--ink);
  transform:rotate(-8deg);letter-spacing:.2px;color:var(--ink);
}
.badge-new{background:var(--sun)!important;color:var(--ink)!important}
.badge-complete{background:var(--lime)!important;color:var(--ink)!important}
.badge-mastered{background:var(--sun)!important;color:var(--ink)!important}
.game-card-diff{
  top:6px;left:6px;z-index:5;font-size:11px;filter:none;
  background:var(--sun);border:2px solid var(--ink);border-radius:50%;
  box-shadow:0 2px 0 var(--ink);
  width:22px;height:22px;display:flex;align-items:center;justify-content:center;
}
.game-card-diff.diff-easy{background:var(--lime)}
.game-card.locked{opacity:.55;filter:grayscale(45%)}
.game-card.locked::after{
  content:'🔒';display:flex;align-items:center;justify-content:center;
  background:rgba(27,18,53,.5);font-size:26px;z-index:6;
}
.game-card.game-mastered{box-shadow:0 5px 0 var(--cat-d),0 5px 0 3px rgba(11,7,26,.55)}
.game-card.game-mastered::after{
  content:'';top:0;left:0;width:100%;height:100%;border:3px solid var(--sun);
  border-radius:17px;background:none;box-shadow:none;animation:none!important;z-index:5;pointer-events:none;
}
.game-card.toy-card{border:3px solid var(--ink)}
.card-deco{display:none}

/* ===== 8. NAV INFERIOR ============================================ */
.menu-bottom-nav{
  background:var(--ink);border-top:3px solid #392A6E;box-shadow:none;
  padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));gap:7px;
}
.bottom-nav-btn{
  background:rgba(255,246,233,.09);border:2px solid rgba(255,246,233,.14);
  border-radius:17px;padding:9px 4px;min-height:60px;gap:4px;color:var(--paper);
}
.bottom-nav-btn::after{display:none}
.bottom-nav-btn:active{transform:translateY(3px);background:rgba(255,246,233,.2)}
.bottom-nav-icon{display:flex;align-items:center;justify-content:center;line-height:1}
.bottom-nav-icon svg{
  width:26px;height:26px;display:block;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.bottom-nav-label{font-size:11px;font-weight:700;color:rgba(255,246,233,.92);letter-spacing:.1px}
.bottom-nav-adventure .bottom-nav-icon{color:var(--lime)}
.bottom-nav-bedtime .bottom-nav-icon{color:var(--teal)}
.bottom-nav-stories .bottom-nav-icon{color:var(--mango)}
.bottom-nav-more .bottom-nav-icon{color:var(--sun)}

.pet-float-avatar{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.pet-float-name{font-family:var(--font-display);font-weight:700;color:var(--paper)}
.more-drawer-panel{background:var(--night);border-top:3px solid var(--ink)}
.more-drawer-title{font-size:20px;font-weight:800;color:var(--paper);text-shadow:0 2px 0 var(--ink)}

/* ===== 9. HEADER DE JOGO ========================================== */
.game-header{
  background:linear-gradient(180deg,rgba(21,15,51,.78),rgba(21,15,51,.58));
  border-bottom:3px solid var(--ink);box-shadow:none;
  padding:11px 12px 12px;padding-top:max(11px,calc(var(--safe-top) + 4px));gap:10px;
  min-height:calc(var(--tap) + 26px);
}
.game-header-title{font-size:18px;font-weight:800;color:var(--paper);text-shadow:0 2px 0 var(--ink)}
.game-info{gap:8px}
.level-badge,.moves-badge,.round-display{
  background:var(--paper);border:2px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  border-radius:var(--r-pill);min-height:38px;
}
.level-label{color:var(--ink-soft);font-size:10px}
.level-number{font-size:18px;font-weight:800;color:var(--grape-d)}
.stars-display{font-size:16px;filter:drop-shadow(0 2px 0 rgba(27,18,53,.45))}
.game-instruction{
  font-size:17px;font-weight:800;color:var(--paper);
  text-shadow:0 2px 0 var(--ink);padding:10px 16px;
}

/* ===== 10. MOVIMENTO ============================================== */
@keyframes npPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.premenu-card,.game-card{animation:npPop .24s var(--ease-bounce) backwards}
.premenu-card:nth-child(2){animation-delay:.05s}
.premenu-card:nth-child(3){animation-delay:.1s}
.premenu-card:nth-child(4){animation-delay:.15s}
.category-grid .game-card:nth-child(n+4){animation-delay:.04s}
.category-grid .game-card:nth-child(n+7){animation-delay:.08s}
.category-grid .game-card:nth-child(n+10){animation-delay:.12s}
.category-grid .game-card:nth-child(n+13){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){
  .premenu-card,.game-card,.scene-moon{animation:none!important}
}

/* ===== 11. RESPONSIVO (320–430px é o alvo real) =================== */
@media(max-width:359px){
  .category-grid{grid-template-columns:repeat(3,1fr);gap:9px}
  .app-wordmark{font-size:25px}
  .game-card{min-height:104px;aspect-ratio:1/1.24;padding-bottom:11px}
  .game-card::before{height:56%}
  .game-card-icon{width:46px;height:46px;font-size:24px;top:7px}
  .game-card-title{font-size:11px;line-height:1.06}
  .game-card-progress{bottom:4px}
  .premenu-card{padding:78px 8px 14px;min-height:172px}
  .premenu-icon{width:56px;height:56px;font-size:30px}
  .premenu-title{font-size:18px}
  .bottom-nav-label{font-size:10px}
}
@media(min-width:431px) and (max-width:719px){
  .category-grid{grid-template-columns:repeat(4,1fr)}
}
@media(min-width:720px){
  .premenu-grid{grid-template-columns:repeat(4,1fr);max-width:860px;margin-left:auto;margin-right:auto}
  .category-grid{grid-template-columns:repeat(6,1fr);max-width:860px;margin:0 auto}
  .app-wordmark{font-size:34px}
}

/* =====================================================================
   12. TELAS INTERNAS — mesma casca do menu
   Meus Pets / Quartinho, Progresso, Conquistas, Loja, Album,
   Historias, Eventos.  Ver DESIGN.md (normativo).
   ===================================================================== */

/* ----- 12.1 fundo noturno + grao + blobs --------------------------- */
#friends-screen,#progress-screen,#achievements-screen,#shop-screen,
#album-screen,#stories-screen,#events-screen{
  isolation:isolate;
  background:
    radial-gradient(120% 70% at 50% 0%,#33266E 0%,rgba(51,38,110,0) 60%),
    linear-gradient(180deg,#150F33 0%,#241A52 52%,#2B1F5C 100%)!important;
}
/* grao de papel */
#friends-screen::before,#progress-screen::before,#achievements-screen::before,
#shop-screen::before,#album-screen::before,#stories-screen::before,#events-screen::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grain);background-size:160px 160px;opacity:.05;
}
/* blob roxo do canto */
#friends-screen::after,#progress-screen::after,#achievements-screen::after,
#shop-screen::after,#album-screen::after,#stories-screen::after,#events-screen::after{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  width:300px;height:300px;top:-120px;left:-120px;border-radius:50%;
  filter:blur(52px);background:rgba(139,92,246,.40);
}
/* segundo blob nas telas que ja tem camada de fundo propria */
.friends-bg,.stories-bg{background:none!important}
.events-bg{background:none}
.friends-bg,.stories-bg,.events-bg{z-index:-1!important;overflow:hidden}
.friends-bg::after,.stories-bg::after,.events-bg::after{
  content:'';position:absolute;width:260px;height:260px;top:26%;right:-110px;
  border-radius:50%;filter:blur(50px);background:rgba(47,212,198,.22);
}

/* ----- 12.2 cabecalho comum de tela interna ------------------------ */
.friends-header,.progress-header,.achievements-header,.shop-header,
.album-header,.stories-header,.events-header{
  display:flex;align-items:center;gap:10px;flex-shrink:0;
  padding:10px 14px 8px;
  padding-top:max(10px,calc(env(safe-area-inset-top) + 6px));
  min-height:calc(var(--tap) + 12px);background:none;
}
.friends-title,.progress-title,.achievements-title,.shop-title,
.album-title,.stories-title,.events-title{
  flex:1;margin:0;text-align:center;
  font-family:var(--font-display);font-weight:800;font-size:22px;line-height:1.1;
  color:var(--paper);transform:rotate(-1.5deg);
  text-shadow:0 3px 0 var(--ink),2px 0 0 var(--ink),-2px 0 0 var(--ink),0 -2px 0 var(--ink);
}
/* pilulas de contagem: papel recortado */
.friends-badge,.progress-total,.shop-balance,.album-count,
.achievements-count,.stories-badge,.events-badge{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:2.5px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 3px 0 var(--ink);padding:5px 13px;min-height:40px;
  font-family:var(--font-display);font-weight:800;font-size:17px;
  color:var(--ink);font-variant-numeric:tabular-nums;
}
.friends-badge-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center;font-size:15px}

/* areas de conteudo rolam sem estourar a barra de status */
.friends-content,.progress-content,.achievements-content,.shop-content,
.album-content,.stories-list,.events-content{
  flex:1;min-height:0;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:4px 14px calc(26px + env(safe-area-inset-bottom,0px));
}
.achievements-progress{flex-shrink:0}

/* ===================================================================== */
/* 12.3  MEUS PETS + QUARTINHO                                           */
/* ===================================================================== */
.friends-section{margin-bottom:18px}
.friends-section-header{padding:2px 2px 9px}
.friends-section-header h3{
  font-family:var(--font-display);font-weight:800;font-size:18px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);
  display:flex;align-items:center;gap:9px;
}
.friends-section-header h3::before{width:6px;height:20px;border-radius:3px;border:2px solid var(--ink)}
.friends-section-header p{color:rgba(255,246,233,.72);font-size:12.5px;font-weight:700;margin:3px 0 0}
.friends-section-mourning .friends-section-header h3{color:#CFC6FF}
.friends-section-mourning .friends-section-header p{color:rgba(207,198,255,.7)}

.friends-hint{
  background:linear-gradient(180deg,#FFE27A,var(--sun));
  border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);
  color:var(--ink);font-weight:800;font-size:14px;padding:12px 16px;
  transform:rotate(-.7deg);margin-bottom:18px;
}

/* --- cartao do pet: papel recortado com faixa de estado --- */
.friend-card{
  --st:var(--teal);--st-d:#17A99D;
  background:linear-gradient(180deg,var(--st) 0 11px,#FFFDF5 11px,var(--paper) 100%)!important;
  border:3px solid var(--ink)!important;border-radius:22px;
  box-shadow:0 6px 0 var(--st-d),0 6px 0 3px rgba(11,7,26,.5)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  margin-bottom:18px;overflow:hidden;
}
.friend-card.adopted   {--st:var(--lime);--st-d:#8CB81F}
.friend-card.sick      {--st:var(--teal);--st-d:#17A99D}
.friend-card.sleeping  {--st:#A78BFA;--st-d:#6836DC}
.friend-card.pet-needy {--st:var(--mango);--st-d:#E06718}
.friend-card.active-pet{--st:var(--sun);--st-d:#D9A800}
.friend-card.visiting  {--st:var(--bubble);--st-d:#DB3A78}
.friend-card.mourning  {--st:#9A8FC4;--st-d:#6E6499}
.friend-card.ranaway   {--st:var(--tomato);--st-d:#C43030}
.friend-card.locked    {opacity:.6;filter:grayscale(.5)}
.friend-card-top{padding:18px 15px 10px;gap:13px}
.friend-card-bottom{padding:0 15px 15px}

.friend-avatar{width:86px;height:86px}
.friend-avatar-bg{border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink)}
.friend-avatar::before{inset:-8px;border-width:3px;border-color:transparent!important}
.friend-card.pet-needy .friend-avatar::before{border-color:var(--mango)!important}
.friend-card.sick .friend-avatar::before{border-color:var(--teal)!important}
.pet-active-badge{
  background:var(--sun);border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);
  border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;
}
.pet-tap-hint{color:var(--ink-soft);font-weight:800;font-size:10.5px;opacity:.75}

.friend-name{font-family:var(--font-display);font-size:19px;font-weight:800;color:var(--ink)}
.pet-active-label{
  background:var(--sun);color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-pill);
  padding:1px 9px;font-size:10.5px;font-weight:800;
}
.friend-personality,.friend-mood{color:var(--ink-soft);font-weight:700;font-size:12.5px}
.friend-speech{
  background:rgba(27,18,53,.07);border:2px solid rgba(27,18,53,.14);
  border-radius:12px;color:var(--ink-soft);font-style:normal;font-weight:700;font-size:13px;
  padding:7px 11px;margin-top:7px;
}

/* barrinhas de estado dentro do cartao */
.pet-status-bars{gap:6px;margin:8px 0 2px}
.pet-stat-icon{font-size:15px;width:22px}
.pet-stat-bar{
  height:12px;border-radius:var(--r-pill);
  background:rgba(27,18,53,.16);border:2px solid var(--ink);overflow:hidden;
}
.pet-stat-fill{border-radius:var(--r-pill)}
.pet-stat-fill::after{display:none}

/* avisos de necessidade: cor conta a historia, nao so o texto */
.pet-need-alert{
  display:inline-flex;align-items:center;gap:5px;margin:5px 5px 0 0;
  background:linear-gradient(180deg,#FF9A9A,var(--tomato));
  border:2.5px solid var(--ink);border-radius:var(--r-pill);
  box-shadow:0 3px 0 var(--ink);
  color:#fff;font-weight:800;font-size:12px;padding:3px 11px;
}
.pet-need-alert.pet-need-hunger{background:linear-gradient(180deg,#FFA85E,var(--mango))}
.pet-need-alert.pet-need-sleep,
.pet-need-alert.pet-need-energy{background:linear-gradient(180deg,#A78BFA,var(--grape))}
.pet-need-alert.pet-need-sick{background:linear-gradient(180deg,#5EE0D4,var(--teal));color:var(--ink)}

/* botoes de acao = tecla fisica, alvo 56px */
.friend-actions{gap:9px}
.friend-action-btn{
  min-height:var(--tap);padding:8px 12px;border-radius:16px;
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);
  font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink);
  transition:transform .12s var(--ease-out),box-shadow .12s;
}
.friend-action-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.friend-action-btn.feed-btn    {background:linear-gradient(180deg,#FFA85E,var(--mango))!important;color:var(--ink)!important}
.friend-action-btn.sleep-btn   {background:linear-gradient(180deg,#A78BFA,var(--grape))!important;color:#fff!important}
.friend-action-btn.play-btn    {background:linear-gradient(180deg,#FFE27A,var(--sun))!important;color:var(--ink)!important}
.friend-action-btn.gift-btn    {background:linear-gradient(180deg,#FF89B8,var(--bubble))!important;color:#fff!important}
.friend-action-btn.pet-btn     {background:linear-gradient(180deg,#FF89B8,var(--bubble))!important;color:#fff!important}
.friend-action-btn.medicine-btn{background:linear-gradient(180deg,#5EE0D4,var(--teal))!important;color:var(--ink)!important}
.friend-action-btn.mourn-btn   {background:linear-gradient(180deg,#FFFDF5,var(--paper))!important;color:var(--ink)!important}
.friend-action-btn.friend-action-primary{flex:1.35;box-shadow:0 6px 0 var(--ink)}
.friend-action-btn.friend-action-primary:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.friend-action-btn.friend-action-blocked{opacity:.5;filter:grayscale(.45)}
.friend-action-btn:disabled{opacity:.42}

/* menu de comida dentro do cartao */
.pet-food-menu{
  background:rgba(27,18,53,.06);border:2.5px dashed rgba(27,18,53,.2);
  border-radius:16px;padding:11px;margin-top:11px;
}
.pet-food-title{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:14px;margin-bottom:8px}
.pet-food-item{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:2.5px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink);
  min-height:78px;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.pet-food-item:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.pet-food-name{font-weight:800;font-size:11px;color:var(--ink)}
.pet-food-qty{
  background:var(--lime);border:2px solid var(--ink);border-radius:var(--r-pill);
  color:var(--ink);font-weight:800;font-size:11px;
}
.pet-food-fav-badge{
  background:linear-gradient(180deg,#FF89B8,var(--bubble));border:2px solid var(--ink);
  border-radius:var(--r-pill);color:#fff;font-weight:800;font-size:10px;padding:1px 7px;
}
.pet-food-empty-msg{color:var(--ink-soft);font-weight:700;font-size:12.5px}
.pet-food-shop-btn{
  min-height:52px;background:linear-gradient(180deg,#FFE27A,var(--sun));
  border:3px solid var(--ink);border-radius:15px;box-shadow:0 5px 0 var(--ink);
  color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:15px;
  transition:transform .12s,box-shadow .12s;
}
.pet-food-shop-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}

/* botao "Ir pro Quartinho" */
.friends-room-btn{
  min-height:66px;padding:12px 16px;
  background:linear-gradient(180deg,#6FF0E4,var(--teal))!important;color:var(--ink)!important;
  border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);
  font-family:var(--font-display);font-weight:800;
  transition:transform .12s,box-shadow .12s;
}
.friends-room-btn:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.friends-room-btn-icon{
  width:44px;height:44px;flex:0 0 auto;border-radius:50%;font-size:22px;line-height:1;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.friends-room-btn-label{font-size:17px;color:var(--ink)}
.friends-room-btn-count{
  background:var(--sun);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--r-pill);font-weight:800;font-size:12px;padding:3px 11px;
}

/* cabecalho da sub-tela Quartinho */
.friends-back-btn{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));color:var(--ink);
  border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);
  min-height:48px;font-family:var(--font-display);font-weight:800;padding:6px 15px;
  transition:transform .12s,box-shadow .12s;
}
.friends-back-btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--ink)}
.friends-room-title{
  font-family:var(--font-display);font-weight:800;font-size:19px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);
}
.friend-room-hint{color:rgba(27,18,53,.6);font-weight:700;font-size:11.5px}
.friend-lock-overlay{background:rgba(27,18,53,.55)}
.lock-requirement{
  background:var(--sun);color:var(--ink);border:2.5px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);border-radius:var(--r-pill);
  padding:4px 12px;font-weight:800;font-size:12px;
}
.friend-heart{font-size:15px}

/* ===================================================================== */
/* 12.4  PROGRESSO                                                       */
/* ===================================================================== */
.prog-hero{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:3px solid var(--ink);border-radius:22px;
  box-shadow:0 6px 0 var(--ink-soft),0 6px 0 3px rgba(11,7,26,.45);
  backdrop-filter:none;-webkit-backdrop-filter:none;padding:16px;margin-bottom:14px;
}
.prog-hero-val{color:var(--ink);font-family:var(--font-display);font-weight:800;font-size:17px}
.prog-hero-lbl{color:var(--ink-soft);font-size:11.5px;font-weight:800}
.prog-ring-pct{color:var(--ink);font-weight:800}
.prog-ring-label{color:var(--ink-soft);font-weight:800}
.prog-ring-svg circle:first-child{stroke:rgba(27,18,53,.14)}
.prog-cat-rings{
  background:rgba(255,246,233,.09);border:2.5px solid rgba(255,246,233,.2);
  border-radius:18px;padding:12px 4px;margin-bottom:14px;
}
.prog-cat-name{color:rgba(255,246,233,.85);font-size:10px;font-weight:800}
.prog-cat-pct{color:var(--paper);font-size:12px;font-weight:800;font-family:var(--font-display)}
.prog-cat-ring-wrap circle:first-child{stroke:rgba(255,246,233,.18)}
.prog-separator{
  font-family:var(--font-display);font-weight:800;font-size:16px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);opacity:1;margin:6px 0 12px;
}
.progress-game-card{
  background:linear-gradient(180deg,#FFFDF5,var(--paper))!important;
  border:3px solid var(--ink);border-radius:20px;
  box-shadow:0 5px 0 var(--ink-soft),0 5px 0 3px rgba(11,7,26,.45);
  min-height:78px;padding:12px 14px;margin-bottom:14px;
  transition:transform .12s,box-shadow .12s;
}
.progress-game-card:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink-soft),0 0 0 3px rgba(11,7,26,.45)}
.progress-game-card.game-mastered{box-shadow:0 5px 0 #D9A800,0 5px 0 3px rgba(11,7,26,.5)}
.progress-game-icon{border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);border-radius:16px}
.progress-game-name{font-family:var(--font-display);font-weight:800;color:var(--ink);font-size:17px}
.progress-game-detail{color:var(--ink-soft);font-weight:700;font-size:12.5px}
.progress-bar-container{
  height:12px;background:rgba(27,18,53,.16);border:2px solid var(--ink);
  border-radius:var(--r-pill);overflow:hidden;
}
.progress-bar-fill{background:linear-gradient(90deg,var(--lime),var(--lime-d));border-radius:var(--r-pill)}
.level-dot{background:rgba(27,18,53,.16);border:2px solid rgba(27,18,53,.34)}
.level-dot.completed{background:var(--lime);border-color:var(--ink)}
.level-dot.perfect{background:var(--sun);border-color:var(--ink)}

/* ===================================================================== */
/* 12.5  CONQUISTAS                                                      */
/* ===================================================================== */
.achievements-progress{
  background:rgba(255,246,233,.09);border:2.5px solid rgba(255,246,233,.2);
  border-radius:20px;padding:14px;margin:0 14px 14px;
}
.achievements-ring-text{font-family:var(--font-display);font-weight:800;color:var(--paper);font-size:22px}
.achievements-ring-label{color:rgba(255,246,233,.75);font-weight:800;font-size:11px}
.achievements-ring-bg{stroke:rgba(255,246,233,.18)}
.achievements-stat{color:var(--paper);font-weight:800;font-size:12px}
.achievements-stat-bar{
  background:rgba(27,18,53,.42);border:2px solid var(--ink);
  border-radius:var(--r-pill);overflow:hidden;
}
.achievements-stat-fill{border-radius:var(--r-pill)}
.achievement-category-label{
  font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.5px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);
}
.achievement-category-line{background:rgba(255,246,233,.22)}
.achievement-card{
  --rar:var(--grape);--rar-d:#6836DC;
  background:linear-gradient(180deg,#FFFDF5,var(--paper))!important;
  border:3px solid var(--ink)!important;border-radius:18px;
  box-shadow:0 5px 0 var(--rar-d),0 5px 0 3px rgba(11,7,26,.5);
  min-height:106px;padding:12px 8px;color:var(--ink);
}
.achievement-card.rarity-bronze {--rar:#D08A45;--rar-d:#A5642A}
.achievement-card.rarity-silver {--rar:#C9CEDA;--rar-d:#8E96A8}
.achievement-card.rarity-gold   {--rar:var(--sun);--rar-d:#D9A800}
.achievement-card.rarity-diamond{--rar:#8BE8FF;--rar-d:#2FA9CC}
.achievement-card.locked{
  background:rgba(255,246,233,.08)!important;
  border:3px dashed rgba(255,246,233,.26)!important;box-shadow:none;
}
.achievement-card.locked .achievement-card-title{color:rgba(255,246,233,.88)}
.achievement-card.locked .achievement-card-desc {color:rgba(255,246,233,.62)}
.achievement-card.locked .achievement-card-emoji{opacity:.8;filter:grayscale(.3)}
.achievement-card-emoji{font-size:32px;line-height:1}
.achievement-card-title{font-family:var(--font-display);font-weight:800;font-size:13px;color:var(--ink);line-height:1.12}
.achievement-card-desc{font-size:10.5px;font-weight:700;color:var(--ink-soft);line-height:1.22}
.achievement-card-check{
  width:25px;height:25px;border-radius:50%;
  background:var(--lime);border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);
  color:var(--ink);font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}

/* ===================================================================== */
/* 12.6  LOJINHA                                                         */
/* ===================================================================== */
.shop-mascot-preview{
  background:rgba(255,246,233,.09);border:2.5px solid rgba(255,246,233,.2);
  border-radius:20px;padding:12px;margin-bottom:16px;
}
.shop-preview-label{color:rgba(255,246,233,.8);font-weight:800;letter-spacing:1px;font-size:11px}
.shop-category{margin-bottom:22px}
.shop-cat-header{
  display:flex;align-items:center;gap:9px;background:none!important;
  padding:0 0 9px;border:0;border-radius:0;
  font-family:var(--font-display);font-weight:800;font-size:17px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);
}
.shop-cat-hint{
  color:rgba(255,246,233,.72);font-size:12.5px;font-weight:700;
  font-style:normal;margin:0 0 10px;
}
.shop-cat-inv{
  background:var(--sun);color:var(--ink);border:2px solid var(--ink);
  border-radius:var(--r-pill);padding:2px 10px;font-size:11.5px;font-weight:800;
}
.shop-item{
  background:linear-gradient(180deg,#FFFDF5,var(--paper))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:3px solid var(--ink)!important;border-radius:20px;
  box-shadow:0 5px 0 var(--ink-soft),0 5px 0 3px rgba(11,7,26,.45);
  padding:14px 10px;color:var(--ink);gap:7px;
}
.shop-item.owned {box-shadow:0 5px 0 #8CB81F,0 5px 0 3px rgba(11,7,26,.48)}
.shop-item.active{box-shadow:0 5px 0 #D9A800,0 5px 0 3px rgba(11,7,26,.48)}
.shop-item.expensive{opacity:.62;filter:grayscale(.32)}
.shop-item-emoji{font-size:38px;line-height:1}
.shop-item-title{font-family:var(--font-display);font-weight:800;font-size:15px;color:var(--ink)}
.shop-item-desc{color:var(--ink-soft);font-weight:700;font-size:12px}
.shop-item-status{color:var(--ink-soft);font-weight:800;font-size:12px}
.shop-buy-btn,.shop-use-btn,.shop-buy-food-btn,.shop-buy-med-btn{
  width:100%;min-height:var(--tap);justify-content:center;
  border:3px solid var(--ink);border-radius:15px;box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(180deg,#FFE27A,var(--sun));
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.shop-buy-btn:active,.shop-use-btn:active,
.shop-buy-food-btn:active,.shop-buy-med-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}
.shop-equip-btn  {background:linear-gradient(180deg,#CDF05A,var(--lime))}
.shop-unequip-btn{background:linear-gradient(180deg,#FFFDF5,var(--paper))}
.shop-buy-med-btn{background:linear-gradient(180deg,#5EE0D4,var(--teal))}
.shop-food-fav-badge{
  background:linear-gradient(180deg,#FF89B8,var(--bubble));border:2px solid var(--ink);
  border-radius:var(--r-pill);color:#fff;font-weight:800;font-size:11px;padding:2px 9px;
}
.shop-food-stock{
  background:var(--lime);border:2px solid var(--ink);border-radius:var(--r-pill);
  color:var(--ink);font-weight:800;font-size:11px;padding:2px 9px;
}
.shop-progress-btn{background:none;border:0;box-shadow:none;min-height:46px;padding:4px 0}
.shop-progress-label{color:var(--ink-soft);font-weight:800;font-size:11.5px}
.shop-progress-track{
  height:11px;background:rgba(27,18,53,.18);border:2px solid var(--ink);
  border-radius:var(--r-pill);overflow:hidden;
}
.shop-progress-fill{background:linear-gradient(90deg,var(--sun),#D9A800);border-radius:var(--r-pill)}

/* ===================================================================== */
/* 12.7  ALBUM                                                           */
/* ===================================================================== */
.album-tabs{padding:0 14px 10px;gap:8px}
.album-tab{
  min-height:var(--tap);min-width:66px;border-radius:16px;padding:8px 13px;
  background:rgba(255,246,233,.08);border:2.5px solid rgba(255,246,233,.2);
  color:var(--paper);transition:transform .12s,box-shadow .12s;
}
.album-tab.active{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));border-color:var(--ink);
  box-shadow:0 4px 0 var(--ink);transform:none;
}
.album-tab.complete{
  background:linear-gradient(180deg,#CDF05A,var(--lime));border-color:var(--ink);
  box-shadow:0 4px 0 var(--ink);
}
.album-tab.active .album-tab-count,
.album-tab.complete .album-tab-count{color:var(--ink)}
.album-tab-count{font-weight:800;font-size:11px;color:rgba(255,246,233,.9)}
.album-tab:active{transform:translateY(3px);box-shadow:0 0 0 var(--ink)}
.album-page-header{
  border:3px solid var(--ink);border-radius:20px;box-shadow:0 5px 0 var(--ink);
  color:var(--ink);margin-bottom:12px;
}
.album-page-title{font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--ink)}
.album-page-progress{color:var(--ink-soft);font-weight:800;font-size:12.5px}
.album-progress-bar{
  height:12px;background:rgba(255,246,233,.14);border:2px solid rgba(255,246,233,.3);
  border-radius:var(--r-pill);overflow:hidden;
}
.album-progress-fill{background:linear-gradient(90deg,var(--lime),var(--lime-d));border-radius:var(--r-pill)}
.album-sticker{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 var(--ink-soft),0 5px 0 3px rgba(11,7,26,.45);
  min-height:106px;
}
.album-sticker.collected{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:3px solid var(--ink);
  box-shadow:0 5px 0 var(--grape-d),0 5px 0 3px rgba(11,7,26,.5);
}
.album-sticker.collected::before{display:none}
.album-sticker.empty{
  background:rgba(255,246,233,.07);border:3px dashed rgba(255,246,233,.28);
  box-shadow:none;opacity:1;
}
.album-sticker-name{font-weight:800;color:var(--ink);font-size:11.5px}
.album-sticker.empty .album-sticker-name{color:rgba(255,246,233,.62)}
.album-tip{color:rgba(255,246,233,.72);font-weight:700;font-size:12.5px}

/* ===================================================================== */
/* 12.8  HISTORIAS                                                       */
/* ===================================================================== */
.story-card{
  background:linear-gradient(180deg,#FFFDF5,var(--paper))!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  border:3px solid var(--ink)!important;border-radius:20px;
  box-shadow:0 5px 0 #E06718,0 5px 0 3px rgba(11,7,26,.5);
  min-height:90px;padding:14px;margin-bottom:16px;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.story-card:active{transform:translateY(5px);box-shadow:0 0 0 #E06718,0 0 0 3px rgba(11,7,26,.5)}
.story-card.read{box-shadow:0 5px 0 #8CB81F,0 5px 0 3px rgba(11,7,26,.5)}
.story-card-icon{
  width:58px;height:58px;flex:0 0 auto;border-radius:50%;font-size:30px;line-height:1;
  background:linear-gradient(180deg,#FFBE8B,var(--mango));
  border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.story-card-title{font-family:var(--font-display);font-weight:800;font-size:17px;color:var(--ink)}
.story-card-desc{color:var(--ink-soft);font-weight:700;font-size:12.5px}
.story-card-age,.story-card-endings{
  background:rgba(27,18,53,.09);border:2px solid rgba(27,18,53,.16);
  border-radius:var(--r-pill);padding:2px 9px;
  font-size:10.5px;font-weight:800;color:var(--ink-soft);
}
.story-card-check{font-size:20px}
.story-choice-btn{
  min-height:var(--tap);border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 5px 0 var(--ink);
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  font-family:var(--font-display);font-weight:800;font-size:16px;color:var(--ink);
  transition:transform .12s,box-shadow .12s;
}
.story-choice-btn:active{transform:translateY(5px);box-shadow:0 0 0 var(--ink)}

/* ===================================================================== */
/* 12.9  EVENTOS                                                         */
/* ===================================================================== */
.events-empty-title{
  font-family:var(--font-display);font-weight:800;font-size:20px;
  color:var(--paper);text-shadow:0 2px 0 var(--ink);
}
.events-empty-text{color:rgba(255,246,233,.78);font-weight:700;font-size:13.5px}
.events-next-item{
  background:rgba(255,246,233,.09);border:2.5px solid rgba(255,246,233,.2);
  border-radius:16px;padding:11px 14px;min-height:54px;
  color:var(--paper);font-weight:700;font-size:13px;
}
.events-mascot-bubble{
  background:linear-gradient(180deg,#FFFDF5,var(--paper));
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:16px;
  color:var(--ink);font-family:var(--font-display);font-weight:800;
}
.event-activity-card{
  border:3px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);
  min-height:74px;transition:transform .12s,box-shadow .12s;
}
.event-activity-card:active{transform:translateY(6px);box-shadow:0 0 0 var(--ink)}
.event-act-title{
  font-family:var(--font-display);font-weight:800;font-size:17px;
  color:#fff;text-shadow:0 2px 0 rgba(27,18,53,.75);
}
.event-act-desc{color:rgba(255,255,255,.92);font-weight:700;font-size:12.5px}
.events-reward-banner{
  background:linear-gradient(180deg,#FFE27A,var(--sun));
  border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);border-radius:18px;
  color:var(--ink);font-weight:800;
}
.events-reward-hint{color:rgba(255,246,233,.78);font-weight:700}

/* ===================================================================== */
/* 12.10  RESPONSIVO + MOVIMENTO                                         */
/* ===================================================================== */
@media(max-width:359px){
  .friends-title,.progress-title,.achievements-title,.shop-title,
  .album-title,.stories-title,.events-title{font-size:19px}
  .friends-content,.progress-content,.achievements-content,.shop-content,
  .album-content,.stories-list,.events-content{padding-left:10px;padding-right:10px}
  .friend-card-top{padding:15px 12px 9px;gap:10px}
  .friend-avatar{width:74px;height:74px}
  .friend-name{font-size:17px}
  .friend-action-btn{font-size:13.5px;min-height:54px;padding:6px 8px}
  .album-sticker,.achievement-card{min-height:96px}
  .shop-item{padding:12px 8px}
  .story-card-icon{width:50px;height:50px;font-size:26px}
}
@media(min-width:720px){
  .friends-content,.progress-content,.achievements-content,.shop-content,
  .album-content,.stories-list,.events-content{max-width:820px;margin:0 auto;width:100%}
}
@media(prefers-reduced-motion:reduce){
  .friend-card,.friend-card.sick,.friend-card.pet-needy,.friend-card.visiting,
  .friend-card.ranaway,.achievement-card,.prog-hero,.pet-stat-low .pet-stat-bar,
  .friend-avatar::before{animation:none!important}
}

/* ===================================================================== */
/* 12.11  AJUSTES DA 2a PASSADA (contraste, recorte, transbordo)         */
/* ===================================================================== */

/* numeros dos badges de cabecalho herdavam branco do tema antigo */
.friends-badge span,.progress-total span,.shop-balance span,
.stories-badge span,.events-badge span,
#progress-total-stars,#shop-balance,#friends-visit-count,
#stories-read-count,#events-completed-count{color:var(--ink)}

/* titulo nao pode quebrar em duas linhas quando o header tem 3 acoes */
.friends-title{font-size:20px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.friends-header{gap:8px;padding-left:12px;padding-right:12px}
.friends-header .friends-badge{padding:5px 11px;font-size:16px}

/* --- overlays sobre o avatar: viram adesivo de papel, nao emoji solto */
.pet-mood-big{
  top:-14px;font-size:24px;line-height:44px;text-align:center;
  width:44px;height:44px;border-radius:50%;
  background:var(--paper);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  filter:none!important;
}
.pet-mood-face{
  bottom:-3px;right:-3px;font-size:16px;line-height:30px;text-align:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);
}
.pet-active-badge{
  top:-6px;left:-6px;width:28px;height:28px;font-size:15px;line-height:23px;
  text-align:center;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 2px 0 var(--ink);
  display:block;
}
.pet-tap-hint{
  bottom:-13px;font-size:9.5px;font-weight:800;color:var(--ink);
  background:var(--sun);border:2px solid var(--ink);border-radius:var(--r-pill);
  padding:1px 8px;line-height:1.5;
}

/* --- loja: o mascote tinha ancora de tamanho zero e vazava do painel */
.shop-mascot-preview{padding:14px 0 12px;min-height:124px;position:relative;overflow:visible}
.shop-preview-mascot{margin:8px auto 0}
.shop-preview-mascot.mascot-with-acc:has(.nena-char){width:60px;height:78px;position:relative}
.shop-preview-mascot .mascot-bounce:has(.nena-char){position:absolute;left:30px;top:10px;width:0;height:0;overflow:visible}

/* --- album: a figurinha nao coletada sumia no fundo escuro ---------- */
.album-sticker.empty .album-sticker-emoji{filter:none;opacity:.5;font-size:34px}
.album-sticker.empty .album-sticker-name{color:rgba(255,246,233,.7)}

/* --- progresso: trilho da barra mais firme sobre o papel ------------ */
.progress-bar-container{background:rgba(27,18,53,.22)}

/* --- historias: variacao tonal pra lista nao virar parede laranja --- */
.stories-list .story-card:nth-child(4n+2){box-shadow:0 5px 0 #1794BC,0 5px 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+3){box-shadow:0 5px 0 #DB3A78,0 5px 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+4){box-shadow:0 5px 0 #6836DC,0 5px 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+2):active{box-shadow:0 0 0 #1794BC,0 0 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+3):active{box-shadow:0 0 0 #DB3A78,0 0 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+4):active{box-shadow:0 0 0 #6836DC,0 0 0 3px rgba(11,7,26,.5)}
.stories-list .story-card:nth-child(4n+2) .story-card-icon{background:linear-gradient(180deg,#93E1F7,#39C0EA)}
.stories-list .story-card:nth-child(4n+3) .story-card-icon{background:linear-gradient(180deg,#FFA1C4,var(--bubble))}
.stories-list .story-card:nth-child(4n+4) .story-card-icon{background:linear-gradient(180deg,#C0AAFD,var(--grape))}
.stories-list .story-card.read{box-shadow:0 5px 0 #8CB81F,0 5px 0 3px rgba(11,7,26,.5)}

/* dois adesivos de humor no mesmo avatar mostram o mesmo dado duas vezes:
   quando existe o grande, o pequeno vira ruido */
.friend-avatar:has(.pet-mood-big) .pet-mood-face{display:none}

/* .stories-list e flex-column de altura fixa: definir min-height nos cards
   substitui o min-height:auto e libera o flex-shrink a esmagar o conteudo.
   flex-shrink:0 devolve a altura natural sem perder o alvo de toque. */
.story-card,.friend-card,.events-next-item,.progress-game-card{flex-shrink:0}

/* destaque "NARRADA": historia-narrada.css carrega antes daqui, entao
   trocamos o brilho difuso (proibido pelo DESIGN.md) por sombra dura */
.story-card.narrated-highlight{
  border:3px solid var(--ink)!important;
  box-shadow:0 5px 0 #D9A800,0 5px 0 3px rgba(11,7,26,.5)!important;
}
.stories-list .story-card.narrated-highlight:active{
  box-shadow:0 0 0 #D9A800,0 0 0 3px rgba(11,7,26,.5)!important;
}
.story-card.narrated-highlight .story-card-icon{background:linear-gradient(180deg,#FFE27A,var(--sun))}
.story-card.narrated-highlight::before{
  top:-9px;right:10px;
  background:linear-gradient(180deg,#FFE27A,var(--sun));
  border:2.5px solid var(--ink);box-shadow:0 3px 0 var(--ink);
  border-radius:10px;color:var(--ink);
  font-family:var(--font-display);font-size:10px;font-weight:800;
  letter-spacing:.4px;padding:2px 9px;transform:rotate(-6deg);
}

/* Eventos: o fundo tematico vem inline do JS e derrubava o contraste.
   Mantemos o tema transparecendo sob um veu noturno em vez de apaga-lo. */
.events-bg::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,15,51,.74),rgba(36,26,82,.84));
}
.events-empty-text{color:rgba(255,246,233,.86)}
.events-empty-icon{filter:drop-shadow(0 4px 0 rgba(27,18,53,.5))}

.album-sticker.empty .album-sticker-emoji{opacity:.72;filter:brightness(1.25)}

/* 320px: o header de Meus Pets tem 3 acoes; o titulo volta a quebrar
   em vez de virar reticencias, e a ficha de conquista ganha folga. */
@media(max-width:359px){
  .friends-header{gap:6px;padding-left:8px;padding-right:8px}
  .friends-title{font-size:15px;white-space:normal;line-height:1.05;letter-spacing:-.2px}
  .friends-header .friends-badge{padding:4px 8px;font-size:14px;gap:4px}
  .friends-room-btn-label{font-size:15px}
  .achievement-card{min-height:114px;padding:10px 5px;gap:4px}
  .achievement-card-emoji{font-size:28px}
  .achievement-card-title{font-size:11.5px}
  .achievement-card-desc{font-size:9.5px;line-height:1.18}
}