/* ════════════════════════════════════════════════════════════
   Maid RPG · Mansão das Maids — folha de estilo kawaii ♡
   Sem frameworks, sem fontes externas, sem dependências.
   ════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --pink:       #ff7fae;
  --pink-deep:  #e14a80;
  --pink-soft:  #ffdcea;
  --lav:        #a98bff;
  --mint:       #4fd1bd;
  --butter:     #ffca5f;

  --ink:        #5a2740;
  --ink-soft:   #8a5c74;

  --paper:      #ffffff;
  --card:       rgba(255, 255, 255, .86);
  --card-solid: #fffafc;
  --well:       rgba(255, 255, 255, .62);
  --line:       #ffd2e2;

  --shadow:     0 18px 40px -18px rgba(214, 51, 108, .40);
  --shadow-hi:  0 28px 60px -20px rgba(214, 51, 108, .55);
  --r:          26px;

  --font: ui-rounded, "Segoe UI Rounded", "SF Pro Rounded", "Varela Round",
          "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pink-soft:  rgba(255, 127, 174, .20);
    --ink:        #ffe7f1;
    --ink-soft:   #dcaec5;
    --paper:      #2c1a28;
    --card:       rgba(255, 255, 255, .07);
    --card-solid: #2a1a26;
    --well:       rgba(255, 255, 255, .06);
    --line:       rgba(255, 157, 196, .28);
    --shadow:     0 18px 40px -18px rgba(0, 0, 0, .65);
    --shadow-hi:  0 28px 60px -20px rgba(0, 0, 0, .80);
  }
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.6 var(--font);
  background-color: #fff4f8;
  background-image:
    radial-gradient(62vw 62vw at 6% -10%, #ffd9e8 0%, rgba(255,217,232,0) 60%),
    radial-gradient(55vw 55vw at 102% 2%, #e7dcff 0%, rgba(231,220,255,0) 62%),
    radial-gradient(75vw 52vw at 50% 112%, #d6fbf1 0%, rgba(214,251,241,0) 66%);
  background-attachment: fixed;
  overflow-x: hidden;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #1e111c;
    background-image:
      radial-gradient(62vw 62vw at 6% -10%, #4b2038 0%, rgba(75,32,56,0) 60%),
      radial-gradient(55vw 55vw at 102% 2%, #2f2551 0%, rgba(47,37,81,0) 62%),
      radial-gradient(75vw 52vw at 50% 112%, #143a38 0%, rgba(20,58,56,0) 66%);
  }
}

/* ── enfeites flutuantes ─────────────────────────────────── */
.deco { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.deco span {
  position: absolute; bottom: -10vh; font-size: 22px; opacity: 0;
  animation: drift linear infinite;
  will-change: transform, opacity;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg);          opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .45; }
  100% { transform: translate3d(4vw, -125vh, 0) rotate(340deg); opacity: 0; }
}
.deco span:nth-child(1)  { left:  4%; font-size: 26px; animation-duration: 26s; animation-delay:  -2s; }
.deco span:nth-child(2)  { left: 14%; font-size: 16px; animation-duration: 34s; animation-delay:  -9s; }
.deco span:nth-child(3)  { left: 24%; font-size: 21px; animation-duration: 29s; animation-delay: -17s; }
.deco span:nth-child(4)  { left: 35%; font-size: 15px; animation-duration: 38s; animation-delay:  -5s; }
.deco span:nth-child(5)  { left: 45%; font-size: 24px; animation-duration: 31s; animation-delay: -22s; }
.deco span:nth-child(6)  { left: 55%; font-size: 18px; animation-duration: 27s; animation-delay: -13s; }
.deco span:nth-child(7)  { left: 65%; font-size: 27px; animation-duration: 36s; animation-delay:  -7s; }
.deco span:nth-child(8)  { left: 74%; font-size: 15px; animation-duration: 30s; animation-delay: -25s; }
.deco span:nth-child(9)  { left: 84%; font-size: 22px; animation-duration: 33s; animation-delay: -11s; }
.deco span:nth-child(10) { left: 93%; font-size: 19px; animation-duration: 28s; animation-delay: -19s; }

/* ── layout ──────────────────────────────────────────────── */
.wrap { position: relative; z-index: 1; }
main  { width: min(1180px, calc(100% - 36px)); margin: 0 auto; }

/* ── cabeçalho ───────────────────────────────────────────── */
.top { position: relative; padding: clamp(30px, 6vw, 64px) 20px 34px; text-align: center; }

.eyebrow {
  margin: 0; color: var(--pink-deep);
  font-size: .78rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
}

.top h1 {
  margin: .12em 0 .2em;
  font-size: clamp(2.7rem, 9vw, 5.4rem); line-height: .95;
  font-weight: 800; letter-spacing: -.025em;
  background: linear-gradient(100deg, var(--pink-deep), var(--pink) 34%, var(--lav) 68%, var(--mint));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(255,255,255,.9)) drop-shadow(0 12px 20px rgba(225,74,128,.22));
}
@media (prefers-color-scheme: dark) {
  .top h1 { filter: drop-shadow(0 3px 0 rgba(0,0,0,.35)) drop-shadow(0 12px 24px rgba(0,0,0,.5)); }
}

.bow { display: inline-block; transform-origin: 50% 78%; animation: wobble 3.4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-9deg) scale(1); } 50% { transform: rotate(9deg) scale(1.1); } }

.lead { margin: 0 auto; max-width: 44ch; color: var(--ink-soft); font-size: 1.02rem; }

.badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 22px 0 0; }
.badges span {
  padding: .42em 1em; border-radius: 999px;
  background: var(--card); border: 2px solid var(--line);
  box-shadow: var(--shadow); font-size: .82rem; font-weight: 800; color: var(--ink-soft);
  backdrop-filter: blur(6px);
}
.badges b { color: var(--pink-deep); }

/* renda / doily */
.lace {
  height: 20px; margin: 6px 0 34px;
  background:
    radial-gradient(circle at 10px 0, var(--paper) 9px, rgba(0,0,0,0) 9.5px) 0 0 / 20px 20px repeat-x,
    linear-gradient(var(--paper), var(--paper)) 0 -14px / 100% 20px repeat-x;
  filter: drop-shadow(0 2px 0 var(--line));
  opacity: .95;
}

/* ── controles ───────────────────────────────────────────── */
.controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 0 0 28px; }

.search {
  display: inline-flex; align-items: center; gap: 10px;
  padding: .55em 1.15em; border-radius: 999px;
  background: var(--card); border: 2px solid var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
  transition: border-color .2s, box-shadow .2s;
}
.search:focus-within { border-color: var(--pink); box-shadow: var(--shadow-hi); }
.search input {
  min-width: min(62vw, 280px); border: 0; outline: 0;
  background: transparent; color: inherit; font: inherit;
}
.search input::placeholder { color: var(--ink-soft); opacity: .75; }

.tagbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tagbar button {
  padding: .36em .95em; border-radius: 999px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink-soft);
  font: inherit; font-size: .8rem; font-weight: 800; cursor: pointer;
  transition: transform .18s, background .2s, color .2s, border-color .2s;
}
.tagbar button:hover { transform: translateY(-2px); border-color: var(--pink); color: var(--pink-deep); }
.tagbar button[aria-pressed="true"] {
  background: linear-gradient(100deg, var(--pink), var(--pink-deep));
  border-color: transparent; color: #fff;
}

.status { margin: 0 0 20px; text-align: center; color: var(--ink-soft); font-weight: 700; }
.status.err {
  max-width: 64ch; margin: 0 auto 26px; padding: 18px 22px; border-radius: 22px;
  background: var(--card); border: 2px dashed var(--pink); color: var(--ink);
  text-align: left; font-weight: 500; box-shadow: var(--shadow);
}
.status.err strong { display: block; margin-bottom: .4em; color: var(--pink-deep); font-size: 1.05rem; }
.status.err code {
  padding: .1em .4em; border-radius: 6px; background: var(--pink-soft);
  font-family: ui-monospace, Consolas, monospace; font-size: .85em;
}

/* ── grade de personagens ────────────────────────────────── */
.grid {
  display: grid; gap: 26px; counter-reset: maid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 285px), 1fr));
}

.char {
  position: relative; display: flex; flex-direction: column;
  counter-increment: maid;
  background: var(--card); border: 2px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); overflow: hidden; backdrop-filter: blur(8px);
  transition: transform .3s cubic-bezier(.2,.9,.3,1.25), box-shadow .3s, border-color .3s;
}
.char:hover, .char:focus-within {
  transform: translateY(-8px) rotate(-.7deg);
  box-shadow: var(--shadow-hi); border-color: var(--pink);
}
.char[hidden] { display: none; }

.frame {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: linear-gradient(160deg, var(--pink-soft), rgba(169,139,255,.22));
}
.frame img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 14%;
  transition: transform .6s cubic-bezier(.2,.8,.3,1);
}
.char:hover .frame img { transform: scale(1.07); }
.frame::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 15px;
  background: radial-gradient(circle at 7.5px 100%, var(--card-solid) 7.5px, rgba(0,0,0,0) 8px) 0 0 / 15px 15px repeat-x;
}

.num {
  position: absolute; z-index: 2; top: 11px; left: 11px;
  padding: .28em .72em; border-radius: 999px;
  background: rgba(255,255,255,.94); color: var(--pink-deep);
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; pointer-events: none;
  box-shadow: 0 4px 12px rgba(90,39,64,.18);
}
.num::after { content: counter(maid, decimal-leading-zero); }

.emoji {
  position: absolute; z-index: 2; top: 8px; right: 10px;
  font-size: 1.5rem; pointer-events: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,.25));
}

.body { display: flex; flex-direction: column; gap: 11px; flex: 1; padding: 4px 20px 20px; }
.kicker { margin: 0; color: var(--pink-deep); font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.body h3 { margin: 0; font-size: 1.36rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.sub { margin: 0; color: var(--ink-soft); font-size: .93rem; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tags li {
  padding: .22em .7em; border-radius: 999px;
  background: var(--pink-soft); color: var(--pink-deep);
  font-size: .74rem; font-weight: 800;
}

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; }
.stats div { padding: 9px 4px; border-radius: 15px; background: var(--well); border: 1px dashed var(--line); }
.stats b { display: block; color: var(--pink-deep); font-size: 1.18rem; line-height: 1.15; }
.stats small { color: var(--ink-soft); font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.attrs { display: grid; gap: 6px; }
.attr {
  display: grid; grid-template-columns: 5.7em 1fr 1.5em; align-items: center; gap: 9px;
  color: var(--ink-soft); font-size: .73rem; font-weight: 800;
}
.bar { height: 8px; border-radius: 999px; background: var(--pink-soft); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: var(--c, var(--pink)); }
.attr b { color: var(--ink); font-size: .84rem; text-align: right; }

.power {
  margin: 0; padding: 10px 13px; border-radius: 16px; font-size: .84rem; font-weight: 700;
  background: linear-gradient(100deg, rgba(255,127,174,.18), rgba(169,139,255,.18));
  border: 1px solid var(--line);
}
.power span { display: block; color: var(--ink-soft); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.extras { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.extras a {
  padding: .28em .8em; border-radius: 999px; text-decoration: none;
  background: var(--well); border: 1px solid var(--line); color: var(--ink-soft);
  font-size: .74rem; font-weight: 800;
}
.extras a:hover { background: var(--pink-soft); color: var(--pink-deep); }

/* botão principal — o ::after cobre o cartão inteiro como alvo de clique */
.cta {
  position: relative; z-index: 1; margin-top: auto;
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: .68em 1.1em; border-radius: 999px; text-decoration: none;
  background: linear-gradient(100deg, var(--pink), var(--pink-deep)); color: #fff;
  font-size: .92rem; font-weight: 800;
  box-shadow: 0 10px 20px -9px rgba(225,74,128,.95);
  transition: filter .2s, gap .2s;
}
.cta::after { content: ""; position: absolute; inset: -100em -2em -2em; z-index: -1; }
.char:hover .cta { filter: brightness(1.07); gap: .8em; }

/* esqueleto de carregamento */
.skel { border-style: dashed; }
.skel .frame { animation: pulse 1.5s ease-in-out infinite; }
.skel .ln { height: 12px; border-radius: 999px; background: var(--pink-soft); animation: pulse 1.5s ease-in-out infinite; }
.skel .w70 { width: 70%; }
.skel .w45 { width: 45%; }
.skel .w90 { width: 90%; }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: .95; } }

/* ── regras rápidas ──────────────────────────────────────── */
.rules { margin: 64px 0 0; }
.rules > h2 {
  margin: 0 0 6px; text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 800;
  color: var(--pink-deep); letter-spacing: -.02em;
}
.rules > p { margin: 0 auto 26px; max-width: 54ch; text-align: center; color: var(--ink-soft); }

.rulegrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }
.rule {
  padding: 20px; border-radius: 22px;
  background: var(--card); border: 2px dashed var(--line);
  box-shadow: var(--shadow); backdrop-filter: blur(6px);
}
.rule .ico { display: block; font-size: 1.8rem; line-height: 1; }
.rule h3 { margin: .45em 0 .25em; font-size: 1.02rem; font-weight: 800; }
.rule p { margin: 0; color: var(--ink-soft); font-size: .88rem; }

.dice {
  margin-top: 12px; padding: .5em 1em; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--line); background: var(--well); color: var(--ink);
  font: inherit; font-size: .86rem; font-weight: 800;
  transition: transform .18s, border-color .2s;
}
.dice:hover { transform: translateY(-2px); border-color: var(--pink); }
.dice.rolled { animation: pop .45s cubic-bezier(.2,.9,.3,1.6); }
@keyframes pop { 0% { transform: scale(.82) rotate(-12deg); } 60% { transform: scale(1.14) rotate(6deg); } 100% { transform: scale(1); } }

/* ── rodapé ──────────────────────────────────────────────── */
footer { margin: 66px 0 34px; text-align: center; color: var(--ink-soft); font-size: .85rem; }
footer p { margin: .3em 0; }
footer .heart { display: inline-block; color: var(--pink); animation: beat 1.6s ease-in-out infinite; }
@keyframes beat { 0%, 100% { transform: scale(1); } 25% { transform: scale(1.25); } 40% { transform: scale(1); } }

/* ── acessibilidade ──────────────────────────────────────── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--pink); outline-offset: 2px; border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .deco { display: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}