@font-face{font-family:Cinzel Decorative;src:url(assets/cinzel.ttf) format("truetype");font-display:swap}
@font-face{font-family:Noto Sans Runic;src:url(assets/runic.ttf) format("truetype");font-display:swap}
@font-face{font-family:Nova Cut;src:url(assets/nova.ttf) format("truetype");font-display:swap}

:root{color-scheme:dark;--bg:#130d0a;--ink:#ead8b7;--muted:#b6a087;--line:#72523466;--metal:#a67b4c;--flame:#f4af4e;--flame-rgb:244 175 78;--title:"Cinzel Decorative",Georgia,serif;--body:Georgia,serif;--labels:"Nova Cut",Georgia,serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:280px;min-height:100svh;background:var(--bg);color:var(--ink);font-family:var(--body)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(90deg,#140d0bf7 0%,#140d0bc2 32%,#140d0b20 69%,#140d0b2e 100%),linear-gradient(0deg,#130d0af5 0%,transparent 31%,transparent 78%,#130d0ac7 100%),url(assets/chamber.webp) center / cover no-repeat}
.candlelight{position:fixed;inset:0;pointer-events:none;z-index:-1}
.candlelight::before,.candlelight::after{
  content:"";position:absolute;inset:0;opacity:.45;
  background-repeat:no-repeat;
  background-position:center;
  /* Match the covered dimensions of the 1672 × 941 chamber image. */
  background-size:max(100vw,177.68dvh) max(100dvh,56.28vw);
}
.candlelight::before{
  background-image:
    radial-gradient(ellipse 11% 17% at 87.6% 22%,#ffba5949,#ef761d27 40%,transparent 100%),
    radial-gradient(ellipse 10% 16% at 89.7% 54%,#ffc16a4a,#ef761d22 42%,transparent 100%),
    radial-gradient(ellipse 33% 52% at 88% 37%,#e7862a20,transparent 100%);
}
.candlelight::after{
  background-image:
    radial-gradient(ellipse 10% 16% at 94.9% 37%,#ffb7564d,#ef761d26 39%,transparent 100%),
    radial-gradient(ellipse 8% 13% at 97.4% 4.4%,#ffc77943,transparent 100%);
}
button,textarea,input{font:inherit}
button{color:inherit;cursor:pointer}
button:focus-visible,textarea:focus-visible{outline:2px solid var(--flame);outline-offset:4px}
button:disabled{cursor:wait}
.runic{font-family:"Noto Sans Runic",serif}
.shell{width:min(1280px,calc(100% - 100px));min-height:100svh;margin:auto;display:flex;flex-direction:column}
.masthead{height:76px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;font:15px var(--title);letter-spacing:.1em;white-space:nowrap}
.brand-sigil{display:grid;place-items:center;width:33px;height:33px;border:1px solid #916841;color:#e9a960;font:23px "Noto Sans Runic",serif;transform:rotate(-9deg);border-radius:50%;box-shadow:inset 0 0 0 3px #1d130e}
.mast-runes{justify-self:center;color:#96693b;letter-spacing:.5em;font-size:13px}
.mast-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.sound,.wallet{border:1px solid var(--line);min-height:34px;padding:7px 11px;background:#170f0dbb;font:13px var(--labels);letter-spacing:.04em;color:#c7ad8e;white-space:nowrap}
.sound span:first-child{color:#edb16b;margin-right:5px}
.sound:hover{border-color:#ac7950}
.wallet{display:flex;align-items:center;gap:8px;border-color:#a6794e;background:#322016;color:#f1cf9b}
.wallet:hover:not(:disabled){border-color:#ecc38a;background:#452a1b}
.wallet.connected{background:#211a13}
.wallet-dot{width:6px;height:6px;border:1px solid #d7ab75;transform:rotate(45deg)}
.wallet.connected .wallet-dot{background:#a7d49c;border-color:#a7d49c;box-shadow:0 0 7px #a7d49c77}
.wallet:disabled{cursor:default}
.chamber{flex:1;display:grid;place-items:center;padding:26px 0}
.ritual{width:min(100%,700px);min-width:0}
.altar-scene{min-height:430px;height:clamp(430px,57vh,560px);position:relative;isolation:isolate;display:grid;place-items:center;border:1px solid #a2714166;background:radial-gradient(ellipse,#160e0ae0 12%,#180e0bc9 72%,#100a09de);overflow:hidden;box-shadow:0 20px 72px #080402a6}
.welcome,.flame-picker{position:relative;width:min(90%,520px);padding:18px 10px 24px;text-align:center;animation:arrive .48s ease-out both}
.welcome .intro{margin-bottom:0}
.rune-rule{display:flex;justify-content:center;align-items:center;gap:14px;color:#bb8957;font-size:15px;letter-spacing:.32em}
.rune-rule::before,.rune-rule::after{content:"";width:54px;height:1px;background:linear-gradient(90deg,transparent,#8c5d37)}
.rune-rule::after{transform:rotate(180deg)}
h1{font:clamp(39px,6vw,68px)/1.02 var(--title);letter-spacing:-.055em;margin:17px 0 12px;color:#f0ddbd;text-shadow:0 3px 28px #000}
h1 em{font-style:normal;color:#d49a59}
.intro{font-size:17px;line-height:1.45;color:#c5ad90;margin:0 0 24px}
.flame-picker h2{margin:0 0 12px;color:#e1c7a3;font:14px var(--labels);text-transform:uppercase;letter-spacing:.16em}
.choices{display:grid;gap:7px;width:min(100%,392px);margin:auto}
.choice{--option:#f2b455;display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:10px;min-height:52px;padding:7px 13px;border:1px solid color-mix(in srgb,var(--option) 35%,#332219);background:linear-gradient(95deg,color-mix(in srgb,var(--option) 8%,#211511),#1b120fed);text-align:left;transition:background-color .2s,border-color .2s}
.choice[data-flame=violet]{--option:#cf9aff}
.choice[data-flame=jade]{--option:#84e1b5}
.choice:hover,.choice:focus-visible{border-color:var(--option);background:linear-gradient(95deg,color-mix(in srgb,var(--option) 20%,#211511),#1b120fed);box-shadow:inset 2px 0 var(--option)}
.choice:focus-visible{outline-color:var(--option);outline-offset:2px}
.choice-icon{height:32px;width:32px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--option) 38%,transparent);border-radius:50%;color:var(--option);font-size:19px}
.choice-name{font:16px var(--labels)}
.choice-color{color:var(--option);font:11px var(--labels);letter-spacing:.07em;text-transform:uppercase;text-align:right}
.inscription-heading{display:flex;align-items:center;gap:12px;min-height:39px;padding:0 2px 8px}
#inscription-title:focus,#title:focus,#welcome-title:focus,#choice-title:focus{outline:none}
.active-flame{color:var(--flame);font:13px var(--labels)}
.change-flame{margin-left:auto;border:0;background:none;color:#d5b18a;padding:4px 1px;font:13px var(--labels);text-underline-offset:4px;text-decoration:underline}
.change-flame:hover{color:var(--flame)}
.circle{position:absolute;pointer-events:none;aspect-ratio:1;width:min(82%,510px);border:1px solid #c48f543e;border-radius:50%;box-shadow:0 0 30px #c0772814,inset 0 0 44px #d2842d12}
.circle-inner{width:min(73%,455px);border-style:dashed;border-color:#d09b573e}
.circle-moving{
  width:min(77.5%,482px);
  border:0;
  box-shadow:none;
  background:
    conic-gradient(from 13deg,transparent 0 11deg,#e0a7608c 27deg,#e0a76024 78deg,transparent 104deg 163deg,#d9aa695f 175deg,#d9aa6915 222deg,transparent 251deg 284deg,#d5a16257 300deg,transparent 322deg),
    repeating-conic-gradient(#e4b47936 0deg .6deg,transparent .6deg 8deg);
  mask-image:radial-gradient(circle closest-side,transparent calc(100% - 4px),#000 calc(100% - 3px) calc(100% - 1px),transparent);
}
@media(prefers-reduced-motion:no-preference){
  .circle-moving{animation:turn-circle 86s linear infinite}
  .candlelight::before{animation:candle-flicker 7.1s ease-in-out infinite}
  .candlelight::after{animation:candle-flicker 9.3s ease-in-out -3.2s infinite reverse}
}
@keyframes turn-circle{to{transform:rotate(1turn)}}
@keyframes candle-flicker{
  0%,100%{opacity:.48}
  12%,53%{opacity:.32}
  23%,72%{opacity:.62}
  35%,84%{opacity:.41}
  43%,92%{opacity:.68}
  61%{opacity:.51}
}
.corner{position:absolute;width:22px;height:22px;border:solid #ac7a48;border-width:1px 0 0 1px;opacity:.8;pointer-events:none}
.tl{top:11px;left:11px}.tr{top:11px;right:11px;transform:rotate(90deg)}.bl{bottom:11px;left:11px;transform:rotate(-90deg)}.br{bottom:11px;right:11px;transform:rotate(180deg)}
.ritual-mark{position:absolute;color:#b48047a8;font-size:19px;text-shadow:0 0 15px #ffac53;pointer-events:none}
.mark-top{top:3%}.mark-bottom{bottom:3%}.mark-left{left:6%}.mark-right{right:6%}
.paper-holder{width:min(68%,390px);height:min(80%,434px);position:relative;filter:drop-shadow(0 22px 25px #060302d9);animation:arrive .48s ease-out both}
.paper{width:100%;height:100%;position:relative;display:flex;flex-direction:column;align-items:center;color:#392014;background:url(assets/parchment.webp) center / 100% 100% no-repeat;isolation:isolate;padding:11% 12% 0}
.paper-runes{color:#6d482d;font-size:15px;letter-spacing:.35em;margin:0 0 10px}
.paper h2{margin:0;font:clamp(17px,2vw,23px) var(--title);text-transform:uppercase;letter-spacing:.09em}
textarea{color:#302016;background:repeating-linear-gradient(transparent 0 32px,#5c391946 32px 33px);border:0;border-radius:0;width:100%;height:132px;max-height:44%;margin:14px 0 0;padding:0 3px;line-height:33px;font-size:19px;resize:none;text-align:center;scrollbar-width:thin;outline:0}
textarea::placeholder{color:#69492f;opacity:1;font-style:italic}
textarea:focus-visible{outline:1px solid #8b532d;outline-offset:4px}
textarea[aria-invalid=true]{outline:1px solid #8b3825}
.count{font:11px var(--labels);color:#583924;align-self:flex-end;margin-top:7px}
.seal{position:absolute;bottom:7%;left:50%;width:clamp(48px,6vw,67px);aspect-ratio:1;transform:translateX(-50%) rotate(-11deg);display:grid;place-items:center;background:radial-gradient(circle at 35% 26%,#a54433 0%,#762b22 42%,#4b1913 72%,#2d100b 100%);border:2px solid #913c2b;border-radius:47% 52% 46% 53% / 56% 48% 53% 44%;color:#e19a66;box-shadow:0 4px 8px #3210098c,inset 0 0 0 4px #4315118c,inset 0 0 0 6px #b4573f}
.seal{opacity:0}
.stamped .seal{opacity:1}
.stamping .seal{animation:stamp .72s both}
@keyframes stamp{0%{opacity:0;transform:translate(-50%,-38px) rotate(-21deg) scale(1.75)}30%{opacity:1;transform:translateX(-50%) rotate(-11deg) scale(.92)}48%{transform:translateX(-50%) rotate(-11deg) scale(1.04);box-shadow:0 0 27px rgb(var(--flame-rgb) / .8),inset 0 0 0 4px #4315118c}100%{opacity:1}}
.seal span{font-size:29px;text-shadow:0 2px #441812}
.igniting .seal{animation:seal .75s both}
@keyframes seal{38%,72%{background:var(--flame);color:#fff7dc;box-shadow:0 0 20px 8px rgb(var(--flame-rgb) / .75),0 0 83px 15px rgb(var(--flame-rgb) / .6)}}
#fire{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.altar-actions{text-align:center;padding-top:17px}
.burn{width:min(100%,390px);min-height:57px;display:inline-flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 21px;background:linear-gradient(180deg,#3d2118,#251410);border:1px solid color-mix(in srgb,var(--flame) 72%,#5b3c28);box-shadow:inset 0 0 0 3px #20110c,0 5px 24px #0005;color:#fae0b6;font:clamp(15px,2vw,20px) var(--title);text-transform:uppercase;letter-spacing:.08em}
.burn:hover:not(:disabled){background:linear-gradient(180deg,#563025,#321a13);box-shadow:inset 0 0 0 3px #2d1710,0 0 28px rgb(var(--flame-rgb) / .19)}
.burn:disabled{opacity:.7}
.button-rune{color:var(--flame);font-size:20px}
.altar-actions p{font-size:13px;color:#b39a7e;margin:10px 0 0}
.ritual-status{margin:8px 0 0;color:var(--flame);font:13px/1.35 var(--labels);text-align:center}
.ritual-status:empty{margin:0}
.ritual:not([data-view=paper]) .ritual-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.receipt{z-index:1;position:absolute;inset:auto;width:min(88%,420px);padding:24px 25px 20px;text-align:center;background:radial-gradient(ellipse at top,rgb(var(--flame-rgb) / .13),transparent 68%),#1b110fee;border:1px solid color-mix(in srgb,var(--flame) 64%,#53402f);box-shadow:0 15px 50px #000a;animation:arrive .55s ease-out both}
.receipt-rune{font-size:32px;color:var(--flame);text-shadow:0 0 15px var(--flame)}
.receipt h2{margin:8px 0;font:clamp(20px,3vw,30px) var(--title);color:#f0dab4}
.receipt h2:focus{outline:none}
.receipt p{min-height:2.6em;margin:12px 0 18px;font-size:16px;line-height:1.42;color:#c9b397}
.transaction{margin:0;text-align:left;border-top:1px solid var(--line);font:12px var(--labels)}
.transaction div{display:flex;justify-content:space-between;gap:12px;padding:10px 0 0}
.transaction dt{color:#baa185}.transaction dd{margin:0;color:#efc994;text-align:right;overflow-wrap:anywhere}
.replay{margin-top:18px;min-height:48px;font-size:clamp(13px,2vw,16px)}
.receipt.dissolving{animation:dissolve .62s ease-in both}
@keyframes dissolve{35%{filter:brightness(1.25);opacity:.85}100%{opacity:0;transform:translateY(-14px) scale(.97);filter:blur(5px) brightness(1.7)}}
@keyframes arrive{from{opacity:0;transform:translateY(8px)}}
.footer{display:flex;justify-content:space-between;align-items:center;min-height:62px;border-top:1px solid var(--line);font:13px var(--labels);letter-spacing:.045em;color:#b9a183}
.footer-star{color:#cf9452;margin:0 6px}.footer-runes{color:#9d744b;letter-spacing:.35em}
@media(max-width:940px){.shell{width:calc(100% - 56px)}}
@media(max-width:720px){
  .shell{width:calc(100% - 34px)}
  .masthead{height:60px;grid-template-columns:1fr auto}
  .mast-runes{display:none}
  .chamber{padding:20px 0}
  .welcome,.flame-picker{padding:16px 3px}
  h1{font-size:clamp(36px,10vw,60px);margin:13px 0 10px}
  .intro{font-size:16px;margin-bottom:18px}
  .choice{min-height:45px;grid-template-columns:27px 1fr auto;gap:7px;padding-inline:8px}
  .choice-icon{width:26px;height:26px;font-size:16px}
  .choice-name{font-size:14px}
  .choice-color{font-size:10px}
  .altar-scene{height:390px;min-height:0}
  .ritual[data-view=paper] .altar-scene{height:360px}
  .paper-holder{width:min(74%,345px);height:80%}
  .paper{padding-top:9%}
  textarea{height:108px;line-height:27px;background:repeating-linear-gradient(transparent 0 26px,#5c391946 26px 27px)}
  .mark-left{left:4%}
  .mark-right{right:4%}
  .footer{min-height:53px;font-size:11px}
  .footer-runes{display:none}
  body::before,.candlelight::before,.candlelight::after{background-position:65% 50%}
}
@media(max-width:360px){.ritual[data-view=paper] .altar-scene{height:330px}.paper-holder{width:81%}.paper-runes{font-size:13px;margin-bottom:6px}textarea{font-size:16px}.footer-star{margin:0 2px}.brand{font-size:13px}.inscription-heading{gap:6px}.change-flame,.active-flame{font-size:11px}}
@media(max-width:520px){.mast-actions{gap:5px}.sound,.wallet{min-height:36px;font-size:12px;padding-inline:8px}.sound{min-width:36px}.sound span:first-child{margin:0}.sound #sound-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media(max-width:350px){.brand{gap:7px;font-size:12px}.brand-sigil{width:25px;height:25px;font-size:17px}.wallet{gap:5px;font-size:11px}.receipt{padding-inline:13px}.transaction{font-size:11px}}
@media(max-width:310px){.brand span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}