:root{
  --bg1:#fff0f7;
  --bg2:#ffd9ea;
  --card:#fffafc;
  --card-solid:#ffffff;
  --text:#74244d;
  --muted:#a0567c;
  --accent:#ff4e9f;
  --accent2:#ff7fba;
  --accent3:#ffb6d7;
  --line:#f5bfd9;
  --success:#169b73;
  --success-bg:#eafff6;
  --warning:#a66a00;
  --warning-bg:#fff7c8;
  --shadow:0 10px 28px rgba(230,64,141,.13);
  --soft-shadow:0 5px 16px rgba(230,64,141,.08);
}

*{
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent;
}

html{
  min-height:100%;
  background:var(--bg2);
}

body{
  margin:0;
  min-height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 12% 4%, rgba(255,255,255,.9), transparent 22rem),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    calc(26px + env(safe-area-inset-bottom))
    env(safe-area-inset-left);
  overscroll-behavior-y:contain;
}

button, input{
  font:inherit;
}

button{
  touch-action:manipulation;
}

.wrap{
  width:min(100%, 900px);
  margin:0 auto;
  padding:10px;
  position:relative;
  z-index:2;
}

.ambient-hearts{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

.ambient-hearts span{
  position:absolute;
  bottom:-40px;
  opacity:.11;
  animation:ambientFloat 16s linear infinite;
}

.ambient-hearts span:nth-child(1){left:7%;animation-delay:0s;font-size:24px}
.ambient-hearts span:nth-child(2){left:27%;animation-delay:4s;font-size:20px}
.ambient-hearts span:nth-child(3){left:50%;animation-delay:8s;font-size:26px}
.ambient-hearts span:nth-child(4){left:72%;animation-delay:2s;font-size:20px}
.ambient-hearts span:nth-child(5){left:89%;animation-delay:11s;font-size:24px}

@keyframes ambientFloat{
  from{transform:translateY(0) rotate(0deg);opacity:0}
  10%{opacity:.11}
  to{transform:translateY(-120vh) rotate(18deg);opacity:0}
}

.hero{
  position:sticky;
  top:6px;
  z-index:20;
  background:rgba(255,250,252,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:2px solid rgba(245,191,217,.92);
  border-radius:26px;
  padding:13px;
  box-shadow:var(--shadow);
}

.hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.brand-icon{
  width:46px;
  height:46px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 46px;
  background:linear-gradient(145deg,#fff,#ffe4f1);
  border:2px solid var(--line);
  font-size:24px;
  box-shadow:var(--soft-shadow);
}

h1{
  margin:0;
  font-size:27px;
  line-height:1.05;
  color:var(--accent);
  font-weight:900;
  letter-spacing:-.5px;
}

.sub{
  margin-top:3px;
  font-size:13px;
  line-height:1.2;
  color:var(--muted);
  font-weight:750;
}

.sound-toggle{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border:none;
  border-radius:15px;
  background:#fff;
  color:var(--text);
  box-shadow:var(--soft-shadow);
  border:2px solid var(--line);
  font-size:20px;
  cursor:pointer;
  transition:transform .12s ease, background .2s ease;
}

.sound-toggle:active{
  transform:scale(.93);
}

.progress-card{
  margin-top:10px;
  padding:11px 12px 10px;
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#fff5fa);
  border:1.5px solid var(--line);
  box-shadow:0 4px 12px rgba(230,64,141,.05);
}

.progress-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

.progress-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.7px;
  color:var(--muted);
  font-weight:900;
}

.progress-main{
  margin-top:2px;
  font-size:20px;
  line-height:1.1;
  font-weight:900;
}

.progress-pct{
  font-size:21px;
  line-height:1;
  font-weight:900;
  color:var(--accent);
}

.bar{
  height:13px;
  margin-top:8px;
  border-radius:999px;
  overflow:hidden;
  background:#ffd8e9;
  border:1px solid var(--line);
  position:relative;
}

.fill{
  height:100%;
  width:0;
  position:relative;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:width .34s cubic-bezier(.2,.8,.2,1);
}

.bar-sparkle{
  position:absolute;
  right:2px;
  top:50%;
  width:8px;
  height:8px;
  transform:translateY(-50%);
  border-radius:50%;
  background:white;
  box-shadow:0 0 8px rgba(255,255,255,.9);
  animation:sparklePulse 1.2s ease-in-out infinite;
}

@keyframes sparklePulse{
  50%{transform:translateY(-50%) scale(.65);opacity:.6}
}

.stars{
  margin-top:6px;
  text-align:center;
  font-size:15px;
  letter-spacing:3px;
  min-height:18px;
}

.quick-actions{
  margin-top:10px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}

.quick-btn{
  min-width:0;
  min-height:44px;
  border-radius:15px;
  padding:9px 10px;
  border:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:14px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  transition:transform .1s ease, box-shadow .18s ease, opacity .18s ease;
}

.quick-btn:active{
  transform:scale(.97);
}

.quick-btn.primary{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:white;
  box-shadow:0 5px 13px rgba(255,78,159,.22);
}

.quick-btn.secondary{
  background:white;
  color:var(--text);
  border:1.5px solid var(--line);
  box-shadow:var(--soft-shadow);
}

.quick-icon{
  font-size:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.refreshing{
  animation:spin .7s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.sync-row{
  min-height:17px;
  margin-top:7px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

.sync-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#f6b9d3;
  transition:background .2s ease;
}

.sync-dot.ok{background:var(--success)}
.sync-dot.busy{background:#f3b133;animation:dotPulse 1s ease infinite}
.sync-dot.error{background:#d84e64}

@keyframes dotPulse{50%{opacity:.35}}

.sync{
  font-size:12px;
  line-height:1;
  font-weight:750;
  color:var(--muted);
}

.content{
  padding-top:3px;
}

.section{
  margin-top:13px;
  background:rgba(255,250,252,.98);
  border:2px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--soft-shadow);
}

.section-header{
  padding:11px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(180deg,#fff1f8,#fff8fc);
  border-bottom:1px solid var(--line);
}

.section-title-wrap{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
}

.section-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:white;
  border:1.5px solid var(--line);
  font-size:21px;
}

.section-title{
  font-size:18px;
  line-height:1.12;
  font-weight:900;
  color:var(--accent);
}

.section-progress{
  margin-top:2px;
  font-size:12px;
  font-weight:800;
  color:var(--muted);
}

.section-badge{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  background:white;
  border:1px solid var(--line);
  color:var(--accent);
  font-size:11px;
  font-weight:900;
}

.items{
  padding:9px;
  display:grid;
  gap:9px;
}

.item{
  position:relative;
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  align-items:center;
  gap:12px;
  min-height:86px;
  padding:11px 12px;
  background:var(--card-solid);
  border:2px solid #ffd9ea;
  border-radius:20px;
  box-shadow:0 4px 12px rgba(230,64,141,.05);
  cursor:pointer;
  overflow:hidden;
  transform:translateZ(0);
  transition:
    transform .12s ease,
    border-color .2s ease,
    background .2s ease,
    opacity .2s ease,
    box-shadow .2s ease;
}

.item:active{
  transform:scale(.988);
}

.item.done{
  background:linear-gradient(145deg,#fffafd,#fff4fa);
  border-color:#efc0d7;
}

.check-wrap{
  width:52px;
  height:52px;
  position:relative;
  align-self:center;
}

.check-input{
  position:absolute;
  inset:0;
  opacity:0;
  z-index:2;
  cursor:pointer;
}

.check-ui{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:2.5px solid #efa6ca;
  background:#fff;
  color:transparent;
  font-size:27px;
  font-weight:900;
  box-shadow:inset 0 2px 7px rgba(230,64,141,.06);
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    background .22s ease,
    color .22s ease,
    border-color .22s ease;
}

.check-input:checked + .check-ui{
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border-color:var(--accent);
  color:white;
  transform:scale(1.05) rotate(-2deg);
  box-shadow:0 7px 16px rgba(255,78,159,.22);
}

.item-content{
  min-width:0;
  align-self:center;
}

.item-text{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  font-size:19px;
  line-height:1.24;
  font-weight:850;
  letter-spacing:-.15px;
  color:var(--text);
}

.item.done .item-text{
  color:#be86a2;
  text-decoration:line-through;
  text-decoration-thickness:1.8px;
}

.item-meta{
  margin-top:7px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
}

.tag.name{
  color:var(--warning);
  background:var(--warning-bg);
  border:1px solid #efd87a;
}

.tag.status{
  color:#bf2a70;
  background:#fff0f7;
  border:1px solid var(--line);
}

.tag.status.done{
  color:var(--success);
  background:var(--success-bg);
  border-color:#b9eed9;
}

.item.completed-now{
  animation:itemSuccess .55s cubic-bezier(.2,.8,.2,1);
}

@keyframes itemSuccess{
  0%{transform:scale(1)}
  35%{transform:scale(1.025);box-shadow:0 9px 24px rgba(255,78,159,.18)}
  100%{transform:scale(1)}
}

.item.completed-now::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at 25% 50%, rgba(255,255,255,.9), transparent 28%);
  opacity:0;
  animation:shine .55s ease;
}

@keyframes shine{
  0%{opacity:0;transform:translateX(-20%)}
  35%{opacity:.8}
  100%{opacity:0;transform:translateX(30%)}
}

.notes{
  margin-top:13px;
  padding:13px;
  background:rgba(255,250,252,.98);
  border:2px solid var(--line);
  border-radius:22px;
  box-shadow:var(--soft-shadow);
}

.notes-title{
  font-size:16px;
  font-weight:900;
  color:var(--accent);
  margin-bottom:8px;
}

.note-row{
  display:grid;
  grid-template-columns:22px minmax(0,1fr);
  gap:7px;
  margin-top:6px;
  font-size:14px;
  line-height:1.34;
  font-weight:750;
}

.toast{
  position:fixed;
  left:50%;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:100;
  transform:translate(-50%,20px);
  opacity:0;
  pointer-events:none;
  max-width:88vw;
  padding:11px 15px;
  border-radius:999px;
  background:rgba(116,36,77,.95);
  color:white;
  box-shadow:0 9px 26px rgba(64,18,44,.24);
  font-size:14px;
  font-weight:850;
  text-align:center;
  transition:all .22s ease;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

.celebration-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:90;
}

.particle{
  position:absolute;
  font-size:20px;
  will-change:transform,opacity;
  animation:particleBurst 1.1s cubic-bezier(.15,.75,.25,1) forwards;
}

@keyframes particleBurst{
  0%{
    transform:translate(-50%,-50%) scale(.55) rotate(0deg);
    opacity:0;
  }
  12%{opacity:1}
  100%{
    transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot));
    opacity:0;
  }
}

.full-complete{
  margin-top:13px;
  padding:26px 16px;
  text-align:center;
  background:linear-gradient(145deg,#fff,#fff0f7);
  border:2px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.full-complete .big{
  font-size:44px;
}

.full-complete .title{
  margin-top:6px;
  font-size:23px;
  line-height:1.18;
  font-weight:900;
  color:var(--accent);
}

.full-complete .text{
  margin-top:5px;
  font-size:14px;
  line-height:1.35;
  font-weight:750;
  color:var(--muted);
}

@media (max-width:430px){
  .wrap{padding:8px}
  .hero{padding:11px;border-radius:23px}
  h1{font-size:25px}
  .brand-icon{width:42px;height:42px;flex-basis:42px}
  .sound-toggle{width:40px;height:40px;flex-basis:40px}
  .progress-card{margin-top:8px;padding:9px 10px}
  .progress-main{font-size:18px}
  .progress-pct{font-size:19px}
  .quick-actions{margin-top:8px}
  .quick-btn{min-height:42px;padding:8px 8px;font-size:13px}
  .item{grid-template-columns:50px minmax(0,1fr);min-height:82px;padding:10px 11px}
  .check-wrap{width:50px;height:50px}
  .item-text{font-size:18.5px;line-height:1.23}
}

@media (orientation:landscape) and (max-height:520px){
  .hero{
    position:relative;
    top:auto;
    padding:8px 10px;
  }
  .hero-top{min-height:38px}
  .brand-icon{width:36px;height:36px;flex-basis:36px;border-radius:12px;font-size:20px}
  h1{font-size:22px}
  .sub{display:none}
  .sound-toggle{width:36px;height:36px;flex-basis:36px;border-radius:12px;font-size:17px}
  .progress-card{margin-top:6px;padding:7px 9px}
  .progress-label,.stars{display:none}
  .progress-main{font-size:16px}
  .progress-pct{font-size:16px}
  .bar{height:9px;margin-top:5px}
  .quick-actions{margin-top:6px}
  .quick-btn{min-height:38px;padding:6px 8px;font-size:12px;border-radius:12px}
  .sync-row{margin-top:4px}
  .section{margin-top:9px}
  .section-header{padding:8px 10px}
  .section-icon{width:32px;height:32px;flex-basis:32px;font-size:18px}
  .section-title{font-size:16px}
  .items{padding:7px;gap:7px}
  .item{grid-template-columns:44px minmax(0,1fr);min-height:68px;padding:8px 10px;border-radius:16px}
  .check-wrap{width:44px;height:44px}
  .check-ui{border-radius:15px;font-size:23px}
  .item-text{font-size:16px;line-height:1.2;-webkit-line-clamp:2}
  .item-meta{margin-top:5px}
  .tag{font-size:10px;padding:4px 6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* v2.2 — controlos de áudio */
.audio-controls{
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

.audio-toggle{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  border-radius:14px;
  border:2px solid var(--line);
  background:#fff;
  color:var(--text);
  box-shadow:var(--soft-shadow);
  font-size:19px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .12s ease, opacity .18s ease, background .18s ease;
}

.audio-toggle:active{
  transform:scale(.93);
}

.audio-toggle.off{
  opacity:.55;
  background:#fff5fa;
}

.audio-toggle.playing{
  box-shadow:0 0 0 3px rgba(255,78,159,.10), var(--soft-shadow);
  animation:audioGlow 1.8s ease-in-out infinite;
}

@keyframes audioGlow{
  50%{ transform:scale(1.035); }
}

@media (max-width:430px){
  .audio-toggle{
    width:39px;
    height:39px;
    min-width:39px;
    min-height:39px;
    border-radius:13px;
    font-size:18px;
  }
}

@media (orientation:landscape) and (max-height:520px){
  .audio-controls{ gap:5px; }
  .audio-toggle{
    width:34px;
    height:34px;
    min-width:34px;
    min-height:34px;
    border-radius:11px;
    font-size:16px;
  }
}


/* v2.3 — alinhamento definitivo dos controlos de áudio */
.hero-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.brand{
  min-width:0;
}

.audio-controls{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:auto;
}

.audio-toggle{
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  max-width:38px !important;
  height:38px !important;
  min-height:38px !important;
  padding:0 !important;
  border-radius:13px;
  font-size:18px;
}

@media (max-width:430px){
  .hero-top{
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
  }

  .audio-controls{
    gap:5px;
  }

  .audio-toggle{
    flex-basis:36px !important;
    width:36px !important;
    min-width:36px !important;
    max-width:36px !important;
    height:36px !important;
    min-height:36px !important;
    font-size:17px;
  }
}

@media (orientation:landscape) and (max-height:520px){
  .audio-controls{
    gap:4px;
  }

  .audio-toggle{
    flex-basis:32px !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    font-size:15px;
  }
}


/* v2.4 — unicórnio + ajuda áudio */
.unicorn-host{
  position:fixed;
  right:8px;
  top:28%;
  z-index:70;
  pointer-events:none;
}

.unicorn-card{
  display:flex;
  align-items:center;
  gap:8px;
  pointer-events:auto;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  transform:translateX(0);
}

.unicorn-card.hidden{
  display:none;
}

.unicorn-emoji{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#ffeef7);
  border:2px solid var(--line);
  box-shadow:0 10px 20px rgba(230,64,141,.16);
  font-size:34px;
  animation:unicornFloat 2.3s ease-in-out infinite;
}

.unicorn-bubble{
  max-width:180px;
  padding:11px 13px;
  border-radius:18px 18px 4px 18px;
  background:rgba(255,255,255,.96);
  border:2px solid var(--line);
  box-shadow:0 10px 20px rgba(230,64,141,.14);
  color:var(--text);
  font-size:14px;
  line-height:1.25;
  font-weight:850;
  text-align:left;
}

.unicorn-card.show{
  animation:unicornSlideIn .42s cubic-bezier(.2,.8,.2,1);
}

.unicorn-card.leave{
  animation:unicornSlideOut .3s ease forwards;
}

@keyframes unicornSlideIn{
  from{transform:translateX(120%);opacity:0}
  to{transform:translateX(0);opacity:1}
}

@keyframes unicornSlideOut{
  from{transform:translateX(0);opacity:1}
  to{transform:translateX(110%);opacity:0}
}

@keyframes unicornFloat{
  50%{transform:translateY(-6px) rotate(-4deg)}
}

.audio-help{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px;
  background:rgba(110,35,75,.18);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

.audio-help.hidden{
  display:none;
}

.audio-help-card{
  width:min(92vw,420px);
  background:#fffafc;
  border:2px solid var(--line);
  border-radius:22px;
  padding:16px 14px 14px;
  box-shadow:0 18px 32px rgba(110,35,75,.22);
}

.audio-help-title{
  color:var(--accent);
  font-size:18px;
  line-height:1.15;
  font-weight:900;
}

.audio-help-text{
  margin-top:8px;
  color:var(--text);
  font-size:14px;
  line-height:1.38;
  font-weight:750;
}

.audio-help-btn{
  margin-top:12px;
  width:100%;
  min-height:46px;
  border:none;
  border-radius:15px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:15px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(255,78,159,.18);
}

@media (max-width:430px){
  .unicorn-host{ right:6px; top:25%; }
  .unicorn-emoji{
    width:52px;height:52px;min-width:52px;font-size:30px;border-radius:18px;
  }
  .unicorn-bubble{
    max-width:150px;
    font-size:13px;
    padding:10px 11px;
  }
}

@media (orientation:landscape) and (max-height:520px){
  .unicorn-host{ top:22%; }
  .unicorn-emoji{
    width:46px;height:46px;min-width:46px;font-size:26px;border-radius:16px;
  }
  .unicorn-bubble{
    max-width:140px;
    font-size:12px;
    padding:8px 10px;
  }
}


/* v2.5 — personagens em baixo */
.character-host{
  position:fixed;
  right:10px;
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:70;
  pointer-events:none;
}

.character-card{
  display:flex;
  align-items:flex-end;
  gap:10px;
  pointer-events:auto;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
  transform:translateX(0);
}

.character-card.hidden{
  display:none;
}

.character-emoji{
  width:88px;
  height:88px;
  min-width:88px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#ffeef7);
  border:2px solid var(--line);
  box-shadow:0 12px 24px rgba(230,64,141,.18);
  font-size:52px;
  animation:characterFloat 2.2s ease-in-out infinite;
}

.character-bubble{
  max-width:205px;
  padding:12px 14px;
  border-radius:18px 18px 18px 6px;
  background:rgba(255,255,255,.97);
  border:2px solid var(--line);
  box-shadow:0 10px 20px rgba(230,64,141,.14);
  color:var(--text);
  font-size:14px;
  line-height:1.28;
  font-weight:850;
  text-align:left;
  margin-bottom:8px;
}

.character-card.show{
  animation:characterSlideIn .42s cubic-bezier(.2,.8,.2,1);
}

.character-card.leave{
  animation:characterSlideOut .3s ease forwards;
}

@keyframes characterSlideIn{
  from{transform:translateY(120%);opacity:0}
  to{transform:translateY(0);opacity:1}
}

@keyframes characterSlideOut{
  from{transform:translateY(0);opacity:1}
  to{transform:translateY(115%);opacity:0}
}

@keyframes characterFloat{
  50%{transform:translateY(-7px) rotate(-3deg)}
}

@media (max-width:430px){
  .character-host{
    right:8px;
    bottom:calc(10px + env(safe-area-inset-bottom));
  }
  .character-emoji{
    width:82px;height:82px;min-width:82px;font-size:48px;border-radius:26px;
  }
  .character-bubble{
    max-width:168px;
    font-size:13px;
    padding:10px 12px;
  }
}

@media (orientation:landscape) and (max-height:520px){
  .character-host{
    bottom:8px;
    right:8px;
  }
  .character-emoji{
    width:68px;height:68px;min-width:68px;font-size:40px;border-radius:22px;
  }
  .character-bubble{
    max-width:150px;
    font-size:12px;
    padding:8px 10px;
    margin-bottom:5px;
  }
}


/* v2.6 — recompensas, mascote fixa e celebrações */
.reward-strip{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:5px;
  margin-top:9px;
}

.reward{
  min-width:0;
  padding:6px 3px;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  opacity:.42;
  transform:scale(.94);
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 3px 8px rgba(230,64,141,.04);
}

.reward > span{
  display:block;
  margin-top:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:8.5px;
  font-weight:900;
  color:var(--muted);
}

.reward.unlocked{
  opacity:1;
  transform:scale(1);
  background:linear-gradient(180deg,#fff,#fff2f8);
  box-shadow:0 5px 12px rgba(255,78,159,.12);
}

.reward.just-unlocked{
  animation:rewardPop .7s cubic-bezier(.2,.8,.2,1);
}

@keyframes rewardPop{
  0%{transform:scale(.75) rotate(-5deg)}
  45%{transform:scale(1.15) rotate(3deg)}
  100%{transform:scale(1)}
}

.mascot-dock{
  position:fixed;
  left:8px;
  bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:65;
  pointer-events:none;
}

.mascot-button{
  position:relative;
  width:82px;
  height:82px;
  border:none;
  border-radius:27px;
  background:linear-gradient(180deg,#fff,#ffeef7);
  border:2px solid var(--line);
  box-shadow:0 12px 24px rgba(230,64,141,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
  cursor:pointer;
  animation:mascotFloat 2.3s ease-in-out infinite;
}

.mascot-emoji{
  font-size:48px;
}

.mascot-badge{
  position:absolute;
  right:-4px;
  bottom:-3px;
  min-width:30px;
  height:30px;
  padding:0 7px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  border:2px solid #fff;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  box-shadow:0 4px 10px rgba(255,78,159,.2);
}

.mascot-speech{
  position:absolute;
  left:72px;
  bottom:47px;
  width:max-content;
  max-width:190px;
  padding:10px 12px;
  border-radius:17px 17px 17px 5px;
  background:rgba(255,255,255,.98);
  border:2px solid var(--line);
  box-shadow:0 10px 20px rgba(230,64,141,.14);
  color:var(--text);
  font-size:13px;
  line-height:1.25;
  font-weight:850;
  animation:speechPop .25s ease;
}

.mascot-speech.hidden{display:none}

@keyframes mascotFloat{
  50%{transform:translateY(-6px) rotate(-3deg)}
}

@keyframes speechPop{
  from{transform:scale(.85);opacity:0}
  to{transform:scale(1);opacity:1}
}

.guest-host{
  position:fixed;
  right:8px;
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:66;
  pointer-events:none;
}

.guest-card{
  display:flex;
  align-items:flex-end;
  gap:9px;
  pointer-events:auto;
  border:none;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.guest-card.hidden{display:none}

.guest-emoji{
  width:76px;
  height:76px;
  min-width:76px;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff,#f8efff);
  border:2px solid #dec8f8;
  box-shadow:0 11px 22px rgba(130,70,170,.14);
  font-size:44px;
  animation:guestFloat 2s ease-in-out infinite;
}

.guest-bubble{
  max-width:180px;
  padding:10px 12px;
  margin-bottom:7px;
  border-radius:17px 17px 6px 17px;
  background:rgba(255,255,255,.97);
  border:2px solid #dec8f8;
  box-shadow:0 10px 20px rgba(130,70,170,.12);
  color:var(--text);
  font-size:13px;
  line-height:1.25;
  font-weight:850;
  text-align:left;
}

.guest-card.show{animation:guestIn .4s cubic-bezier(.2,.8,.2,1)}
.guest-card.leave{animation:guestOut .28s ease forwards}

@keyframes guestFloat{
  50%{transform:translateY(-5px) rotate(3deg)}
}
@keyframes guestIn{
  from{transform:translateY(110%);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes guestOut{
  to{transform:translateY(110%);opacity:0}
}

.category-celebration{
  position:fixed;
  inset:0;
  z-index:110;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(112,33,76,.18);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}

.category-celebration.hidden{display:none}

.category-celebration-card{
  width:min(90vw,420px);
  padding:22px 18px 18px;
  border-radius:28px;
  background:linear-gradient(160deg,#fff,#fff0f7);
  border:2px solid var(--line);
  box-shadow:0 20px 45px rgba(112,33,76,.22);
  text-align:center;
  animation:celebrationCardIn .45s cubic-bezier(.2,.8,.2,1);
}

.category-celebration-icon{
  font-size:58px;
  animation:celebrationIcon 1.1s ease-in-out infinite;
}

.category-celebration-title{
  margin-top:8px;
  font-size:24px;
  line-height:1.12;
  font-weight:900;
  color:var(--accent);
}

.category-celebration-text{
  margin-top:7px;
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  color:var(--text);
}

.category-celebration-btn{
  width:100%;
  min-height:50px;
  margin-top:16px;
  border:none;
  border-radius:17px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  color:#fff;
  font-size:16px;
  font-weight:900;
  box-shadow:0 8px 18px rgba(255,78,159,.2);
}

@keyframes celebrationCardIn{
  from{transform:scale(.78) translateY(18px);opacity:0}
  to{transform:scale(1);opacity:1}
}
@keyframes celebrationIcon{
  50%{transform:scale(1.1) rotate(5deg)}
}

@media(max-width:430px){
  .mascot-button{width:72px;height:72px;border-radius:24px}
  .mascot-emoji{font-size:42px}
  .mascot-speech{left:62px;bottom:41px;max-width:155px;font-size:12px}
  .guest-emoji{width:68px;height:68px;min-width:68px;font-size:39px}
  .guest-bubble{max-width:150px;font-size:12px}
}

@media(orientation:landscape) and (max-height:520px){
  .mascot-button{width:58px;height:58px;border-radius:19px}
  .mascot-emoji{font-size:34px}
  .mascot-speech{left:51px;bottom:32px;max-width:145px;font-size:11px}
  .guest-emoji{width:54px;height:54px;min-width:54px;font-size:31px}
  .guest-bubble{max-width:135px;font-size:11px}
}