/* Hexface: Ghoul Horde. One dark, candlelit look by design. */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --bg:#0c0709;--stone:#1d1418;--bone:#efe3cf;--dim:#a8968a;--blood:#c2263a;--ember:#ff8a3d;
  --f-display:"Pirata One",Georgia,serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
html,body{margin:0;height:100%;background:var(--bg);color:var(--bone);font-family:var(--f-body)}
body{overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#app{position:fixed;inset:0;overflow:hidden}
#camfeed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--bg)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#safe{position:fixed;inset:0;pointer-events:none;visibility:hidden;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
#pauseBtn{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);width:44px;height:44px;border-radius:50%;border:1px solid rgba(239,227,207,.35);background:rgba(12,7,9,.55);color:var(--bone);z-index:4;display:grid;place-items:center;cursor:pointer;padding:0}
#pauseBtn svg{width:16px;height:16px}
.screen{position:absolute;inset:0;display:flex;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px calc(env(safe-area-inset-bottom,0px) + 16px);background:radial-gradient(ellipse at 50% 30%,rgba(60,12,20,.9),rgba(12,7,9,.97) 70%);z-index:5;overflow-y:auto}
.panel{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin:auto}
h1{font-family:var(--f-display);font-weight:400;font-size:clamp(3.4rem,16vw,5rem);line-height:.9;margin:0;text-shadow:0 0 24px rgba(255,138,61,.45),0 2px 0 var(--blood);letter-spacing:.02em}
h1 .sub{display:block;font-size:.42em;line-height:1.1;margin-top:.12em;color:var(--ember);text-shadow:0 2px 0 rgba(12,7,9,.8);letter-spacing:.04em}
h2{font-family:var(--f-display);font-weight:400;font-size:2.6rem;margin:0;line-height:1;text-wrap:balance}
.lede{font-size:1.05rem;line-height:1.5;color:var(--dim);margin:0;max-width:32ch;text-wrap:balance}
.lede em{color:var(--bone)}
.label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#preview{width:150px;height:133px;display:block;flex:none}
.altar{display:flex;align-items:flex-end;justify-content:center;gap:2px}
.candle{position:relative;width:86px;flex:none}
.candle.right{transform:scaleX(-1)}
.candle img{display:block;width:100%;height:auto;animation:warm 2.3s ease-in-out infinite}
.candle .glow{position:absolute;left:45.2%;top:23.7%;width:76px;height:76px;margin:-40px 0 0 -38px;border-radius:50%;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(255,176,90,.6),rgba(255,138,61,.2) 38%,rgba(255,138,61,0) 70%);animation:glow 1.7s ease-in-out infinite}
.candle .flame{position:absolute;left:45.2%;top:23.7%;width:7px;height:12px;margin:-7px 0 0 -3.5px;border-radius:50% 50% 45% 45%/62% 62% 38% 38%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 72%,#fffbe8 0 22%,#ffd27a 45%,rgba(255,138,61,.0) 75%);transform-origin:50% 92%;animation:flame 1.05s linear infinite}
.candle.right img{animation-duration:2.9s;animation-delay:-1.1s}
.candle.right .glow{animation-duration:1.45s;animation-delay:-.6s}
.candle.right .flame{animation-duration:1.25s;animation-delay:-.45s}
@keyframes flame{0%{transform:scale(1,1) skewX(0)}14%{transform:scale(.9,1.16) skewX(-5deg)}27%{transform:scale(1.06,.88) skewX(3deg)}41%{transform:scale(.94,1.22) skewX(-2deg)}
  56%{transform:scale(1.03,.92) skewX(6deg)}69%{transform:scale(.88,1.1) skewX(-4deg)}84%{transform:scale(1.04,.96) skewX(2deg)}100%{transform:scale(1,1) skewX(0)}}
@keyframes glow{0%{opacity:.8;transform:scale(1)}18%{opacity:1;transform:scale(1.06)}31%{opacity:.62;transform:scale(.95)}47%{opacity:.92;transform:scale(1.03)}
  60%{opacity:.7;transform:scale(.97)}78%{opacity:1;transform:scale(1.07)}100%{opacity:.8;transform:scale(1)}}
@keyframes warm{0%,100%{filter:brightness(1)}22%{filter:brightness(1.1)}37%{filter:brightness(.93)}58%{filter:brightness(1.06)}76%{filter:brightness(.96)}}
@media (prefers-reduced-motion:reduce){.candle img,.candle .glow,.candle .flame{animation:none}}
.brand{display:block;width:108px;height:auto;margin-bottom:-4px;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 52%,transparent 96%);
  mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 52%,transparent 96%)}
.slots{display:flex;gap:14px;justify-content:center;align-items:flex-start}
.slot{display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;color:inherit;cursor:pointer;border-radius:8px}
.slot .oval{position:relative;width:64px;height:84px;border-radius:50%;border:2px solid var(--blood);background:var(--stone);overflow:hidden;box-shadow:0 0 18px rgba(194,38,58,.35);display:grid;place-items:center}
.slot.main .oval{width:84px;height:110px}
.slot:not(.main) .oval{margin-top:13px}
.slot.empty .oval{border-style:dashed;box-shadow:none}
.slot .plus{font-family:var(--f-display);font-size:2rem;color:var(--dim);line-height:1}
.slot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.slot .tag{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bone)}
.slot:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.btn:focus-visible,#pauseBtn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.btn{font-family:var(--f-display);font-size:1.6rem;border:0;border-radius:4px;padding:10px 28px 12px;background:var(--blood);color:var(--bone);cursor:pointer;box-shadow:0 0 0 1px rgba(255,138,61,.4) inset,0 6px 24px rgba(194,38,58,.35);min-height:48px}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:wait}
.btn.ghost{background:transparent;box-shadow:0 0 0 1px var(--dim) inset;font-size:1.3rem}
#titleScreen .panel{gap:12px}
.agree{display:flex;gap:12px;align-items:flex-start;text-align:left;max-width:40ch;font-size:.88rem;line-height:1.45;color:var(--dim);cursor:pointer;padding:6px 8px;border-radius:6px;border:1px solid transparent}
.agree input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--blood);cursor:pointer}
.agree input:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.agree a{color:var(--ember);text-decoration:underline;text-underline-offset:3px}
.agree a:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.agree.nudge{border-color:var(--ember);color:var(--bone);animation:nudge .45s ease-in-out}
.agree-msg{margin:-8px 0 0;font-size:.85rem;color:var(--ember)}
@keyframes nudge{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.agree.nudge{animation:none}}
.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.brandLink{display:block;border-radius:12px}
.brandLink:focus-visible,.site a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.site{font-size:.9rem;color:var(--dim);margin:0;line-height:1.5}
.site a{color:var(--ember);text-decoration:underline;text-underline-offset:3px;display:inline-block;padding:10px 2px}
.fine{font-size:.85rem;color:var(--dim);margin:0;line-height:1.45;max-width:34ch}
.how{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;text-align:left;font-size:.95rem;color:var(--dim);margin:0}
.how dt{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ember);padding-top:3px}
.how dd{margin:0}
#cropWrap{position:relative;width:260px;height:260px;max-width:100%;touch-action:none;cursor:grab}
#cropCanvas{width:100%;height:100%;display:block;border-radius:8px;background:var(--stone)}
#snapWrap{position:relative;width:min(280px,76vw);aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--stone)}
#snapVid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#snapVid.mirror{transform:scaleX(-1)}
#snapWrap svg{position:absolute;inset:0;width:100%;height:100%}
.btn.small{font-size:1.1rem;padding:8px 18px 10px;min-height:44px}
input[type=range]{width:220px;accent-color:var(--blood)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 24px;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.stats div{display:flex;flex-direction:column;gap:4px}
.stats b{font-size:1.6rem;font-weight:500;color:var(--bone)}
@media (prefers-reduced-motion:reduce){h1{text-shadow:0 2px 0 var(--blood)}}