/* Amateur Dentist's Closet — cozy-spooky chibi design system.
   Animal Crossing at dusk: rounded chunky UI, warm lantern glow, twilight plum. */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Baloo+2:wght@500;600;700;800&display=swap');

:root{
  /* aligned to the /play world — darker, blood-red, near-black */
  --night:#0a0810;     --night-2:#120e1c;
  --panel:#191325;     --panel-2:#221a31;
  --card:#1a1426;      --line:#352a48;
  --cream:#ece6f5;     --muted:#9b8db6;
  --amber:#e8a13c;     --pink:#d96ba8;
  --teal:#46c7b0;      --red:#e23b4e;   --purple:#9b78e8;
  --shadow:rgba(0,0,0,.55);

  /* per-type accents */
  --t-prop:#e8a13c;    --t-killer:#e23b4e;
  --t-location:#46c7b0; --t-lore:#9b78e8;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--night);color:var(--cream);
  font-family:"Fredoka",system-ui,sans-serif;-webkit-text-size-adjust:100%;}
body{
  min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(900px 460px at 15% -10%, #1c1430 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 0%, #1a1228 0%, transparent 55%),
    linear-gradient(180deg,#0d0a16 0%, #07050d 100%);
  background-attachment:fixed;
}
/* faint scanlines, like the game */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.05;
  background-image:repeating-linear-gradient(0deg,#000 0 1px,transparent 1px 3px)}
/* faint stars */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff 50%, transparent),
    radial-gradient(1.2px 1.2px at 78% 14%, #ffe9bd 50%, transparent),
    radial-gradient(1.1px 1.1px at 42% 9%,  #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 88% 38%, #fff 50%, transparent),
    radial-gradient(1px 1px at 28% 40%,     #d6c4ff 50%, transparent),
    radial-gradient(1.2px 1.2px at 62% 30%, #fff 50%, transparent);
}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:clamp(16px,4vw,40px);}

a{color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}

/* ── headings & type ── */
h1,h2,h3,h4{font-family:"Baloo 2","Fredoka",sans-serif;margin:0;line-height:1.04}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
  font-weight:600;margin:0 0 2px}

/* ── mascot + bubble ── */
.hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.mascot{flex:0 0 auto;width:104px;height:104px;animation:bob 3.4s ease-in-out infinite;
  filter:drop-shadow(0 8px 10px var(--shadow))}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
.hero-text h1{font-size:clamp(30px,6.4vw,52px);font-weight:800;
  background:linear-gradient(180deg,#fff 0%, var(--amber) 130%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-text p{color:var(--muted);font-size:14px;max-width:54ch;margin:6px 0 0;line-height:1.5}

.bubble{position:relative;background:var(--cream);color:#3a2c54;border-radius:18px;
  padding:12px 16px;font-weight:500;font-size:15px;box-shadow:0 6px 0 rgba(255,255,255,.12),0 10px 18px var(--shadow);
  max-width:560px;animation:pop .3s cubic-bezier(.2,1.3,.5,1)}
.bubble::after{content:"";position:absolute;left:30px;top:-12px;border:7px solid transparent;border-bottom-color:var(--cream)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}

/* ── panels / cards ── */
.panel{background:linear-gradient(180deg,var(--panel) 0%, var(--night-2) 140%);
  border:2px solid var(--line);border-radius:24px;padding:clamp(16px,3vw,24px);
  box-shadow:0 10px 0 rgba(12,7,24,.30),0 18px 30px var(--shadow);margin:22px 0}
.panel-title{display:flex;align-items:center;gap:8px;font-family:"Baloo 2";font-weight:700;
  font-size:17px;color:var(--cream);margin:0 0 14px}

/* ── form controls ── */
.field-grid{display:grid;gap:14px 16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin:0 0 6px;letter-spacing:.02em}
select,input,textarea{width:100%;font-family:inherit;font-size:15px;font-weight:500;color:var(--cream);
  background:rgba(255,255,255,.06);border:2px solid var(--line);border-radius:14px;padding:11px 13px;
  appearance:none;-webkit-appearance:none;transition:border-color .12s,background .12s}
textarea{min-height:88px;resize:vertical;line-height:1.5}
select:focus,input:focus,textarea:focus{outline:none;border-color:var(--amber);background:rgba(255,255,255,.10)}
::placeholder{color:#8c7cae}
select option{background:var(--night-2);color:var(--cream)}

/* ── buttons (chunky AC pills) ── */
.btn{font-family:"Baloo 2","Fredoka";font-weight:700;font-size:15px;cursor:pointer;border:none;
  border-radius:999px;padding:12px 22px;color:#2a2040;background:var(--amber);
  box-shadow:0 5px 0 #c8913a, 0 9px 14px var(--shadow);transition:transform .06s,box-shadow .06s;
  display:inline-flex;align-items:center;gap:8px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #c8913a,0 3px 6px var(--shadow)}
.btn.pink{background:var(--pink);box-shadow:0 5px 0 #c85a93,0 9px 14px var(--shadow);color:#3a1230}
.btn.teal{background:var(--teal);box-shadow:0 5px 0 #3fae99,0 9px 14px var(--shadow);color:#0d3a33}
.btn.ghost{background:rgba(255,255,255,.08);color:var(--cream);box-shadow:0 5px 0 #2c2142,0 9px 14px var(--shadow)}
.btn.big{font-size:18px;padding:15px 28px}
.actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:16px}
.tally{margin-left:auto;font-size:13px;color:var(--muted);font-weight:500}

/* ── chips / tags ── */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
  border-radius:999px;padding:4px 11px;background:rgba(255,255,255,.08);border:1.5px solid var(--line);color:var(--cream)}
.chip.era{border-color:var(--amber);color:var(--amber)}
.chip.lin{border-color:var(--purple);color:var(--purple)}

/* type dot/pill colour */
.type-pill{font-weight:700;font-size:12px;border-radius:999px;padding:4px 12px;color:#211a33;text-transform:lowercase}
.t-prop{background:var(--t-prop)} .t-killer{background:var(--t-killer)}
.t-location{background:var(--t-location)} .t-lore{background:var(--t-lore)}

footer{margin-top:46px;text-align:center;color:var(--muted);font-size:12px;font-weight:500;padding-bottom:30px}
footer .heart{color:var(--pink)}