:root {
    --bg: #070404;
    --red: #94141c;
    --bright: #cf303b;
    --wine: #3d080d;
    --gold: #d8b36a;
    --ivory: #f0e7d5;
    --muted: #b2a494;
    --line: rgba(216, 179, 106, .33);
    --glass: rgba(15, 8, 8, .78)
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: radial-gradient(circle at 50% 15%, rgba(122, 16, 24, .27), transparent 29rem), linear-gradient(180deg, #110606 0%, var(--bg) 60%);
    color: var(--ivory);
    font-family: Inter, system-ui, sans-serif
}

body {
    min-height: 100svh;
    overflow-x: hidden
}

button {
    font: inherit
}

.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .075;
    z-index: 50;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")
}

.vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 145px 35px #000;
    z-index: 40
}

.app {
    width: min(100%, 720px);
    min-height: 100svh;
    margin: 0 auto;
    position: relative
}

.scene {
    min-height: 100svh;
    padding: max(40px, env(safe-area-inset-top)) 24px max(36px, env(safe-area-inset-bottom));
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transform: translateY(10px)
}

.scene.active {
    display: flex;
    animation: enter .75s ease forwards
}

@keyframes enter {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

h1,
h2 {
    font-family: "Cormorant Garamond", Georgia, serif;
    letter-spacing: .015em;
    margin: 0;
    text-wrap: balance
}

h1 {
    font-size: clamp(3rem, 11vw, 5.8rem);
    line-height: .92;
    max-width: 660px
}

h2 {
    font-size: clamp(2.2rem, 8vw, 4.5rem);
    line-height: 1;
    max-width: 650px
}

.eyebrow {
    color: var(--gold);
    letter-spacing: .22em;
    font-size: .72rem;
    font-weight: 600;
    margin: 0 0 18px
}

.subtle {
    color: var(--muted);
    max-width: 520px;
    line-height: 1.65;
    margin: 22px auto
}

.tiny {
    color: #776d63;
    font-size: .71rem;
    margin-top: 20px
}

.primary,
.secondary {
    border-radius: 999px;
    padding: 14px 25px;
    cursor: pointer;
    margin-top: 28px;
    letter-spacing: .065em;
    transition: .25s ease
}

.primary {
    color: #fff8ec;
    border: 1px solid rgba(216, 179, 106, .68);
    background: linear-gradient(180deg, #981620, #610b11);
    box-shadow: 0 10px 40px rgba(148, 20, 28, .25), inset 0 1px rgba(255, 255, 255, .12)
}

.primary:hover,
.primary:active,
.secondary:hover,
.choice:hover {
    transform: translateY(-2px)
}

.secondary {
    color: var(--gold);
    border: 1px solid var(--line);
    background: rgba(10, 7, 7, .72)
}

.sound-toggle {
    position: fixed;
    z-index: 80;
    right: max(14px, env(safe-area-inset-right));
    top: max(14px, env(safe-area-inset-top));
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: rgba(8, 5, 5, .76);
    color: var(--gold);
    cursor: pointer;
    backdrop-filter: blur(9px)
}

.sound-toggle.muted {
    opacity: .45
}

.sigil {
    width: 150px;
    height: 150px;
    border: 1px solid rgba(216, 179, 106, .42);
    border-radius: 50%;
    margin-bottom: 34px;
    position: relative;
    box-shadow: 0 0 70px rgba(148, 20, 28, .22);
    animation: pulse 4s ease-in-out infinite
}

.sigil:before,
.sigil:after {
    content: "";
    position: absolute;
    inset: 25%;
    border: 1px solid rgba(216, 179, 106, .38);
    transform: rotate(45deg)
}

.sigil:after {
    inset: 37%;
    border-color: rgba(207, 48, 59, .7)
}

.sigil span {
    position: absolute;
    width: 1px;
    height: 100%;
    background: linear-gradient(transparent, rgba(216, 179, 106, .5), transparent);
    left: 50%
}

.sigil span:nth-child(2) {
    transform: rotate(45deg)
}

.sigil span:nth-child(3) {
    transform: rotate(90deg)
}

.sigil span:nth-child(4) {
    transform: rotate(135deg)
}

@keyframes pulse {
    50% {
        transform: scale(1.025);
        box-shadow: 0 0 95px rgba(148, 20, 28, .33)
    }
}

.shrine-frame {
    width: min(88vw, 450px);
    height: 330px;
    position: relative;
    margin-bottom: 26px
}

.moon {
    position: absolute;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle at 45% 40%, #cd3941, #761018 56%, #35070a 74%, transparent 75%);
    left: 50%;
    top: 20px;
    transform: translateX(-50%);
    filter: drop-shadow(0 0 50px rgba(148, 20, 28, .4))
}

.torii .beam,
.torii .post {
    position: absolute;
    background: linear-gradient(90deg, #4c080b, #a2161f 50%, #4c080b);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .55)
}

.torii .top {
    width: 84%;
    height: 18px;
    left: 8%;
    top: 98px
}

.torii .mid {
    width: 66%;
    height: 12px;
    left: 17%;
    top: 132px
}

.torii .post {
    width: 18px;
    height: 185px;
    top: 113px
}

.torii .left {
    left: 27%
}

.torii .right {
    right: 27%
}

.dialogue {
    width: min(100%, 610px);
    background: linear-gradient(180deg, rgba(21, 10, 10, .9), rgba(9, 5, 5, .94));
    border: 1px solid var(--line);
    padding: 23px 24px;
    text-align: left;
    box-shadow: 0 25px 70px rgba(0, 0, 0, .34)
}

.dialogue.large p {
    font-size: clamp(1.4rem, 5vw, 2.05rem);
    font-family: "Cormorant Garamond", serif
}

.speaker {
    color: var(--bright);
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 600;
    margin-bottom: 8px
}

.dialogue p {
    margin: 0;
    line-height: 1.5
}

.portrait-stage {
    width: min(86vw, 420px);
    height: 470px;
    position: relative;
    margin: 0 0 -44px;
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer
}

.image-stage {
  width: min(88vw, 430px);
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  margin-bottom: 18px;
  cursor: pointer;
}

.sukuna-portrait {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(216,179,106,.28);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  border-radius: 10px;
}

.halo {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid rgba(216, 179, 106, .3);
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    box-shadow: 0 0 90px rgba(148, 20, 28, .28), inset 0 0 60px rgba(148, 20, 28, .18)
}

.silhouette {
    position: absolute;
    width: 230px;
    height: 390px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #1d0d0e 0%, #090505 68%);
    clip-path: polygon(38% 0, 65% 0, 73% 10%, 78% 22%, 89% 42%, 100% 100%, 0 100%, 13% 42%, 24% 22%, 28% 9%);
    filter: drop-shadow(0 0 22px rgba(207, 48, 59, .18))
}

.hair {
    position: absolute;
    left: 50%;
    top: 36px;
    transform: translateX(-50%);
    width: 150px;
    height: 95px;
    background: #291416;
    clip-path: polygon(4% 51%, 0 27%, 19% 34%, 11% 8%, 35% 22%, 48% 0, 59% 19%, 82% 7%, 76% 30%, 100% 22%, 92% 56%, 78% 84%, 18% 84%)
}

.arm {
    position: absolute;
    width: 105px;
    height: 24px;
    background: #150a0b;
    top: 235px;
    border-radius: 50px;
    opacity: .96
}

.arm-a {
    left: -72px;
    transform: rotate(-23deg)
}

.arm-b {
    right: -72px;
    transform: rotate(23deg)
}

.arm-c {
    left: -60px;
    top: 287px;
    transform: rotate(18deg)
}

.arm-d {
    right: -60px;
    top: 287px;
    transform: rotate(-18deg)
}

.face-mark {
    position: absolute;
    height: 3px;
    background: #a51c25;
    border-radius: 10px
}

.m1 {
    width: 50px;
    top: 120px;
    left: 45px;
    transform: rotate(13deg)
}

.m2 {
    width: 50px;
    top: 120px;
    right: 45px;
    transform: rotate(-13deg)
}

.m3 {
    width: 75px;
    top: 151px;
    left: 78px
}

.kanji {
    position: absolute;
    right: 5px;
    top: 100px;
    writing-mode: vertical-rl;
    color: rgba(216, 179, 106, .16);
    font-size: 4rem;
    font-family: serif
}

.secret-hint {
    min-height: 1.2em;
    color: var(--gold);
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    margin: 18px 0 0
}

.divider {
    width: 240px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line), transparent);
    margin: 34px 0 10px;
    position: relative
}

.divider span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg);
    color: var(--gold);
    padding: 0 13px
}

.choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 13px;
    width: min(100%, 620px);
    margin-top: 20px
}

.choice {
    padding: 20px;
    text-align: left;
    color: var(--ivory);
    background: linear-gradient(135deg, rgba(38, 12, 14, .88), rgba(12, 7, 7, .95));
    border: 1px solid rgba(216, 179, 106, .25);
    cursor: pointer;
    display: grid;
    grid-template-columns: 54px 1fr;
    grid-template-rows: auto auto;
    column-gap: 15px;
    transition: .25s ease
}

.choice:hover {
    border-color: rgba(216, 179, 106, .6);
    background: linear-gradient(135deg, rgba(78, 13, 18, .9), rgba(12, 7, 7, .96))
}

.choice .icon {
    grid-row: 1/3;
    font-family: "Cormorant Garamond", serif;
    font-size: 2.3rem;
    color: var(--bright);
    align-self: center;
    text-align: center
}

.choice strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.35rem
}

.choice small {
    color: var(--muted);
    line-height: 1.45;
    margin-top: 4px
}

.chosen-symbol {
    font-family: "Cormorant Garamond", serif;
    font-size: 5rem;
    color: var(--bright);
    margin-bottom: 18px;
    text-shadow: 0 0 38px rgba(207, 48, 59, .45)
}

.reward-card,
.birthday-card,
.note {
    width: min(100%, 600px);
    border: 1px solid var(--line);
    background: linear-gradient(rgba(8, 5, 5, .84), rgba(8, 5, 5, .92)), radial-gradient(circle at 50% 0%, rgba(148, 20, 28, .38), transparent 55%);
    padding: clamp(28px, 7vw, 52px);
    box-shadow: 0 35px 90px rgba(0, 0, 0, .42)
}

.rarity {
    color: var(--gold);
    letter-spacing: .25em;
    font-size: 1.2rem;
    margin: 0 0 8px
}

.reward-card h2 {
    font-size: clamp(3.6rem, 15vw, 7rem);
    line-height: .8
}

.title {
    color: var(--bright);
    font-family: "Cormorant Garamond", serif;
    letter-spacing: .12em;
    font-size: .92rem
}

.stats {
    display: grid;
    gap: 10px;
    margin-top: 28px;
    text-align: left
}

.stats span {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-top: 1px solid rgba(216, 179, 106, .15);
    padding-top: 10px
}

.stats b {
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--muted)
}

.stats i {
    font-style: normal;
    color: var(--gold);
    font-family: "Cormorant Garamond", serif
}

.birthday-card h2 {
    margin-bottom: 16px
}

.flourish {
    color: var(--gold);
    font-size: 1.5rem
}

.sukuna-toast {
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.3rem, 4.6vw, 1.8rem);
    line-height: 1.48;
    color: #e8ddca
}

.sukuna-toast.spice {
    color: #e5c7c5
}

.signature {
    color: var(--bright);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    margin-top: 24px
}

.envelope {
    width: 170px;
    height: 112px;
    border: 1px solid var(--line);
    background: linear-gradient(145deg, #e3d6c0, #bca98b);
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 22px 60px rgba(0, 0, 0, .38)
}

.envelope:before,
.envelope:after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(0 0, 50% 52%, 100% 0);
    background: #cbb99d
}

.envelope:after {
    clip-path: polygon(0 100%, 50% 48%, 100% 100%);
    background: #d8c8ad
}

.seal {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #86131a;
    color: #e7c27a;
    display: grid;
    place-items: center;
    font-family: "Cormorant Garamond", serif;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .3)
}

.note {
    text-align: left;
    line-height: 1.7
}

.note h2 {
    margin-bottom: 22px
}

.note p {
    color: #ddd2c1
}

.note .date {
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .05em
}

.signoff {
    margin-top: 28px;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    color: var(--ivory) !important
}

.petal {
    position: fixed;
    top: -30px;
    width: 9px;
    height: 18px;
    border-radius: 80% 0 80% 0;
    background: linear-gradient(180deg, #6d0c12, #b01f28);
    opacity: .42;
    z-index: 10;
    pointer-events: none;
    animation: fall linear forwards
}

@keyframes fall {
    to {
        transform: translate3d(var(--drift), 110vh, 0) rotate(520deg);
        opacity: .06
    }
}

.toast {
    position: fixed;
    z-index: 90;
    left: 50%;
    bottom: max(24px, env(safe-area-inset-bottom));
    transform: translate(-50%, 20px);
    padding: 12px 18px;
    border: 1px solid var(--line);
    background: rgba(8, 5, 5, .92);
    color: var(--gold);
    font-family: "Cormorant Garamond", serif;
    opacity: 0;
    pointer-events: none;
    transition: .3s ease;
    max-width: min(90vw, 520px);
    text-align: center
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0)
}

@media(min-width:640px) {
    .choices {
        grid-template-columns: repeat(3, 1fr)
    }

    .choice {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        text-align: center;
        min-height: 220px
    }

    .choice .icon {
        grid-row: auto;
        font-size: 3rem;
        margin-bottom: 10px
    }
}

@media(prefers-reduced-motion:reduce) {

    *,
    *:before,
    *:after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important
    }
}

.choice[data-choice="thread"] .icon {
  font-size: 2.8rem;
  line-height: 1;
}

#chosen-symbol {
  font-family: "Cormorant Garamond", serif;
}