/* WICK — deep warm darkness, one candle of light. */
:root{
  --void:#17111A; --room:#241B26; --warm:#332433; --dusk:#4A3440;
  --core:#FFF3D6; --honey:#FFC94A; --amber:#FF9E2C; --ember:#E4572E;
  --bone:#F2E3C4; --muted:#B99B6B;
  --gust:#8FB3C9; --threat:#5E7A94; --coldshadow:#3D4C63; --ice:#CFE6F2;
  --chewy:'Chewy','Comic Sans MS',cursive;
  --bitter:'Bitter',Georgia,serif;
  --sono:'Sono',ui-monospace,Menlo,monospace;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  background:var(--void); color:var(--bone); font-family:var(--bitter);
  overscroll-behavior:none; overflow:hidden;
  -webkit-font-smoothing:antialiased; user-select:none; -webkit-user-select:none;
}
.sono{ font-family:var(--sono); }
a{ color:var(--muted); }
button{ font-family:inherit; cursor:pointer; }
[hidden]{ display:none !important; }

#game{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }

.screen{ position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:24px; z-index:10; background:var(--void); }

/* ============ INTRO ============ */
.intro{ gap:0; transition:opacity .45s ease; }
.intro.out{ opacity:0; pointer-events:none; }
.kicker{ font-weight:600; font-size:.72rem; letter-spacing:.28em; color:var(--muted); }

.lockup{ position:relative; margin:16px 0 4px; }
.glowpool{ position:absolute; left:50%; top:38%; width:340px; height:340px;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(255,201,74,.16) 0%, rgba(255,158,44,.06) 45%, transparent 70%); }
.wordmark{ position:relative; font-family:var(--chewy); font-weight:400;
  font-size:clamp(4.2rem,19vw,7rem); line-height:1; letter-spacing:-.01em;
  color:var(--bone); transform:rotate(-1.5deg);
  text-shadow:-1px -1px 0 rgba(122,143,163,.25);
  display:flex; align-items:flex-end; justify-content:center; }
.ci-wrap{ display:inline-block; width:.44em; margin:0 .015em; }
.ci{ display:block; width:100%; height:auto; transform:translateY(.06em); overflow:visible; }
.ci-flame{ transform-origin:22px 34px; animation:cisway 1.6s ease-in-out infinite; }
@keyframes cisway{
  0%,100%{ transform:rotate(-4deg) scaleY(.96); }
  50%{ transform:rotate(4deg) scaleY(1.04); }
}

.rule{ font-weight:500; font-size:1rem; line-height:1.55; color:var(--bone);
  max-width:30ch; margin-top:20px; }
.dont{ font-family:var(--chewy); font-size:1.5rem; color:var(--honey);
  transform:rotate(-1deg); margin:6px 0 26px; }

.light-btn{ position:relative; width:150px; height:150px; border-radius:50%;
  background:transparent; border:2px solid rgba(255,201,74,.45); overflow:hidden;
  box-shadow:0 0 26px rgba(255,201,74,.14), inset 0 0 22px rgba(255,158,44,.10);
  transition:box-shadow .3s ease; touch-action:none; }
.light-fill{ position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,201,74,.55) 0%, rgba(255,158,44,.28) 55%, transparent 75%);
  transform:scale(0); opacity:0; transition:transform .42s ease-in, opacity .42s ease-in; }
.light-btn.holding .light-fill{ transform:scale(1.15); opacity:1; }
.light-btn.holding{ box-shadow:0 0 60px rgba(255,201,74,.35), inset 0 0 30px rgba(255,158,44,.25); }
.light-label{ position:relative; font-weight:600; font-size:.72rem; letter-spacing:.22em;
  color:var(--honey); }
.hint{ height:1.2em; margin-top:12px; font-size:.72rem; color:var(--muted);
  opacity:0; transition:opacity .25s; }
.hint.show{ opacity:1; }

.motes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.motes i{ position:absolute; width:3px; height:3px; border-radius:50%;
  background:var(--muted); opacity:.35; box-shadow:0 0 6px 1px rgba(185,155,107,.4);
  animation:drift 11s linear infinite; }
.motes i:nth-child(1){ left:22%; top:70%; animation-duration:13s; }
.motes i:nth-child(2){ left:64%; top:82%; animation-delay:-5s; }
.motes i:nth-child(3){ left:81%; top:60%; animation-duration:16s; animation-delay:-9s; }
@keyframes drift{
  0%{ transform:translate(0,0); opacity:0; }
  12%{ opacity:.35; }
  88%{ opacity:.3; }
  100%{ transform:translate(-46px,-260px); opacity:0; }
}

.foot{ position:absolute; bottom:calc(14px + env(safe-area-inset-bottom)); left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:.7rem; color:var(--muted); }
.mute-btn{ background:transparent; border:none; min-width:44px; min-height:44px;
  margin:-9px 0; padding:0; display:flex; align-items:center; justify-content:center; opacity:.85; }
.mute-btn .mb-x{ visibility:hidden; }
.mute-btn.muted .mb-x{ visibility:visible; }
.mute-btn.muted .mb-waves{ visibility:hidden; }
.mute-btn.muted .mb-flame{ opacity:.4; }

/* ============ RESULT ============ */
.result{ z-index:20; background:transparent; pointer-events:none; }
.result-inner{ display:flex; flex-direction:column; align-items:center; width:100%;
  max-width:480px; pointer-events:auto;
  background:var(--void); border-radius:22px; padding:18px 14px 20px; }
.result.reveal .result-inner{ animation:wipe .8s ease-out both; }
@keyframes wipe{
  from{ clip-path:circle(3% at 50% 46%); opacity:.6; }
  to{ clip-path:circle(120% at 50% 46%); opacity:1; }
}
#card{ width:min(420px,92vw); height:auto; display:block; border-radius:14px;
  border:3px solid var(--warm); box-shadow:0 0 40px rgba(255,201,74,.12);
  background:var(--void); }
.result-actions{ margin-top:18px; display:flex; gap:14px; align-items:center; }
.relight-btn{ font-family:var(--chewy); font-size:1.5rem; letter-spacing:.02em;
  color:var(--void); background:var(--honey); border:none; border-radius:14px;
  padding:12px 30px 10px; transform:rotate(-1deg);
  box-shadow:0 5px 0 rgba(228,87,46,.45); transition:transform .08s, box-shadow .08s; }
.relight-btn:active{ transform:rotate(-1deg) translateY(4px); box-shadow:0 1px 0 rgba(228,87,46,.45); }
.share-btn{ font-family:var(--bitter); font-weight:700; font-size:.95rem; letter-spacing:.06em;
  color:var(--bone); background:transparent; border:2px solid var(--bone);
  border-radius:12px; padding:13px 24px; transition:transform .08s; }
.share-btn:active{ transform:translateY(3px); }
.fine{ font-size:.72rem; font-weight:400; color:var(--muted); margin-top:14px;
  letter-spacing:.04em; min-height:1em; }
.fine a{ color:var(--muted); }

@media (max-height:700px){
  .wordmark{ font-size:clamp(3.4rem,15vw,5.4rem); }
  .dont{ margin-bottom:16px; }
  .light-btn{ width:124px; height:124px; }
}

@media (prefers-reduced-motion: reduce){
  .ci-flame{ animation:none; transform:rotate(3deg); }
  .motes i{ animation:none; opacity:0; }
  .result.reveal .result-inner{ animation:fadein .5s ease both; }
  @keyframes fadein{ from{ opacity:0; } to{ opacity:1; } }
}