/* The Tavern — hand-painted leather, parchment, and firelight UI */
@font-face {
    font-family: "Cinzel";
    src: url("/static/fonts/cinzel-var.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "Cinzel Decorative";
    src: url("/static/fonts/cinzel-decorative-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya";
    src: url("/static/fonts/alegreya-var.woff2") format("woff2");
    font-weight: 400 900;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya";
    src: url("/static/fonts/alegreya-italic-var.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --night: #0c0604;
    --char: #160b08;
    --wood: #24110d;
    --wood-warm: #3b1d13;
    --oxblood: #4c1416;
    --oxblood-deep: #2d0d10;
    --parchment: #ead7b3;
    --parchment-deep: #c4a16e;
    --ink: #241207;
    --cream: #f3e2c0;
    --cream-dim: #c9ad83;
    --cream-faint: #9c805e;
    --bronze: #8b592a;
    --gold: #d9a441;
    --gold-bright: #f2c464;
    --gold-pale: #ffe3a0;
    --ember: #e56f2d;
    --moss: #718b42;
    --line: rgba(217, 164, 65, 0.42);
    --line-soft: rgba(217, 164, 65, 0.2);
    --shadow: 0 18px 55px rgba(0, 0, 0, 0.55);
    --font-display: "Cinzel", Georgia, serif;
    --font-ornate: "Cinzel Decorative", "Cinzel", Georgia, serif;
    --font-body: "Alegreya", Georgia, serif;
    --page-max: 1180px;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='linear' slope='.055'/></feComponentTransfer></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { font-size: calc(16px + 1pt); }
body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--cream);
    font-family: var(--font-body);
    line-height: 1.48;
    -webkit-font-smoothing: antialiased;
    background:
        var(--grain),
        radial-gradient(ellipse 75% 55% at 50% -10%, rgba(229, 111, 45, 0.18), transparent 62%),
        radial-gradient(ellipse 55% 80% at 10% 55%, rgba(76, 20, 22, 0.28), transparent 70%),
        linear-gradient(180deg, #120805 0%, #1d0e0a 45%, #0b0504 100%);
    background-attachment: fixed;
}
body::before {
    content: "";
    position: fixed;
    inset: -24px;
    pointer-events: none;
    z-index: -2;
    background:
        linear-gradient(rgba(6, 11, 9, 0.46), rgba(10, 4, 3, 0.78)),
        url("/static/art/tavern-fantasy-wash.webp") center 46% / cover no-repeat;
    filter: blur(12px) saturate(0.82);
    opacity: 0.68;
    transform: scale(1.055);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 65;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.72);
    opacity: 0.62;
}

::selection { background: rgba(217, 164, 65, 0.4); color: #fff4d8; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
    outline: 2px solid var(--gold-bright);
    outline-offset: 3px;
}
.hidden { display: none !important; }

.ambient-embers { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.ambient-embers i {
    position: absolute;
    bottom: -4vh;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle, var(--gold-pale), var(--ember) 48%, transparent 72%);
    animation: ember-rise 13s linear infinite;
    filter: blur(0.25px);
}
.ambient-embers i:nth-child(1) { left: 5%; animation-duration: 16s; animation-delay: 1s; }
.ambient-embers i:nth-child(2) { left: 14%; animation-duration: 12s; animation-delay: 7s; transform: scale(.65); }
.ambient-embers i:nth-child(3) { left: 24%; animation-duration: 18s; animation-delay: 3s; }
.ambient-embers i:nth-child(4) { left: 35%; animation-duration: 14s; animation-delay: 10s; transform: scale(.75); }
.ambient-embers i:nth-child(5) { left: 46%; animation-duration: 19s; animation-delay: 5s; }
.ambient-embers i:nth-child(6) { left: 57%; animation-duration: 15s; animation-delay: 12s; transform: scale(.6); }
.ambient-embers i:nth-child(7) { left: 68%; animation-duration: 17s; animation-delay: 2s; }
.ambient-embers i:nth-child(8) { left: 78%; animation-duration: 13s; animation-delay: 8s; transform: scale(.7); }
.ambient-embers i:nth-child(9) { left: 88%; animation-duration: 20s; animation-delay: 4s; }
.ambient-embers i:nth-child(10) { left: 95%; animation-duration: 14s; animation-delay: 11s; transform: scale(.6); }
@keyframes ember-rise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.7); }
    10% { opacity: .75; }
    62% { opacity: .38; }
    100% { opacity: 0; transform: translate3d(2.2rem, -108vh, 0) scale(1.12); }
}

.lock-screen {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 1.2rem;
    background: #08100d;
}
.lock-screen::before {
    content: "";
    position: absolute;
    inset: -22px;
    z-index: 0;
    background:
        linear-gradient(rgba(4, 12, 10, .18), rgba(7, 3, 2, .5)),
        url("/static/art/tavern-fantasy-wash.webp") center 46% / cover no-repeat;
    filter: blur(6px) saturate(.88);
    transform: scale(1.025);
}
.lock-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 43%, transparent 0 15rem, rgba(3, 1, 1, .46) 36rem, rgba(3, 1, 1, .82));
}
.lock-panel {
    position: relative;
    z-index: 2;
    width: min(31rem, 94vw);
    min-height: min(38rem, 88vh);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 4.2rem 4rem 3.4rem;
    color: var(--ink);
    text-align: center;
    background:
        var(--grain),
        radial-gradient(ellipse at 50% 12%, rgba(255, 241, 197, .72), transparent 50%),
        linear-gradient(145deg, #ead7b3, #d4b47f 72%, #c4935c);
    border: 1px solid #6d3d1f;
    border-radius: .7rem .42rem .72rem .46rem;
    box-shadow:
        inset 0 0 0 4px rgba(93, 47, 22, .16),
        inset 0 0 38px rgba(91, 43, 17, .25);
    filter: drop-shadow(0 28px 45px rgba(0, 0, 0, .72));
}
.lock-panel::before {
    content: "";
    position: absolute;
    inset: .6rem;
    pointer-events: none;
    border: 1px solid rgba(105, 54, 25, .48);
    border-radius: .38rem .22rem .42rem .28rem;
}
.lock-crest {
    width: 8.4rem;
    height: 6.5rem;
    object-fit: contain;
    margin: -2.25rem 0 -.4rem;
    filter: drop-shadow(0 8px 12px rgba(65, 27, 8, .34));
}
.lock-kicker {
    margin: 0 0 .4rem;
    color: #7b321d;
    font-family: var(--font-display);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lock-panel h1 {
    margin: 0;
    color: #35140d;
    font-family: var(--font-ornate);
    font-size: clamp(2rem, 7vw, 3.1rem);
    line-height: 1.1;
    text-shadow: 0 1px rgba(255, 235, 190, .7);
}
.lock-invitation { margin: .65rem 0 1rem; color: #67462d; font-style: italic; }
.unlock-form { width: min(20rem, 100%); display: grid; gap: .65rem; }
.unlock-form input {
    width: 100%;
    color: var(--cream);
    text-align: center;
    letter-spacing: .08em;
    background: rgba(42, 16, 11, .94);
    border: 1px solid #8c5429;
    border-radius: .25rem;
    padding: .72rem .9rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .58);
}
.unlock-form input::placeholder { color: #bb956d; letter-spacing: .02em; }
.lock-foot { margin: 1rem 0 -1.15rem; color: #8d633f; font-size: .73rem; font-style: italic; }
.lock-sconce {
    position: absolute;
    z-index: 1;
    width: clamp(9rem, 16vw, 14rem);
    filter: drop-shadow(0 0 28px rgba(255, 158, 53, .42));
    opacity: .88;
}
.lock-sconce-left { left: clamp(-5rem, 4vw, 4rem); transform: scaleX(-1); }
.lock-sconce-right { right: clamp(-5rem, 4vw, 4rem); }

.app {
    position: relative;
    z-index: 2;
    width: min(100%, var(--page-max));
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 1.25rem 6rem;
}
.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) auto minmax(8rem, 1fr);
    align-items: center;
    gap: 1rem;
    margin: 0 -.7rem 1.35rem;
    padding: .45rem .8rem .55rem;
    background: var(--grain), linear-gradient(180deg, rgba(49, 24, 15, .98), rgba(19, 9, 6, .98));
    border: 1px solid rgba(139, 89, 42, .48);
    border-top: 0;
    border-radius: 0 0 .55rem .55rem;
    box-shadow: inset 0 -2px rgba(217, 164, 65, .17), 0 12px 34px rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px);
}
.back { justify-self: start; color: var(--cream-dim); font-size: .76rem; text-decoration: none; transition: color .15s ease; }
.back:hover { color: var(--gold-bright); }
.brand { display: flex; align-items: center; justify-content: center; gap: .7rem; }
.brand-mark {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: auto;
    height: 2.65rem;
    aspect-ratio: 422 / 326;
}
.brand-mark img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(242, 196, 100, .22));
}
.brand h1 {
    margin: 0;
    color: var(--gold-bright);
    font-family: var(--font-ornate);
    font-size: 1rem;
    line-height: 1.15;
    letter-spacing: .035em;
    text-shadow: 0 2px 4px #000;
}
.brand p { margin: .08rem 0 0; color: var(--cream-faint); font-size: .69rem; font-style: italic; }
.topbar-flourish {
    justify-self: end;
    width: min(9rem, 100%);
    height: 1rem;
    opacity: .65;
    background: url("/static/art/ui-kit-components/chapter_divider_gold.png") center / contain no-repeat;
}

.view { animation: view-enter .38s ease-out both; }
@keyframes view-enter { from { opacity: 0; transform: translateY(.4rem); } to { opacity: 1; transform: none; } }
.eyebrow, .chapter-kicker {
    color: var(--gold);
    font-family: var(--font-display);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.tavern-intro {
    position: relative;
    min-height: 13rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: .2rem 0 1.4rem;
    padding: 2rem clamp(1.4rem, 4vw, 3.4rem);
    background:
        var(--grain),
        radial-gradient(ellipse at 50% 0%, rgba(115, 67, 31, .24), transparent 58%),
        linear-gradient(110deg, rgba(20, 8, 6, .98), rgba(39, 17, 11, .9) 52%, rgba(20, 8, 6, .98));
    border: 1px solid var(--line-soft);
    border-radius: .55rem;
    box-shadow: inset 0 0 42px #000, var(--shadow);
}
.tavern-intro::before, .tavern-intro::after {
    content: "";
    position: absolute;
    width: 5rem;
    height: 5rem;
    background: url("/static/art/ui-kit-components/ornamental_corner_large.png") center / contain no-repeat;
    opacity: .58;
}
.tavern-intro::before { inset: .35rem auto auto .35rem; }
.tavern-intro::after { inset: auto .35rem .35rem auto; transform: rotate(180deg); }
.intro-copy { position: relative; z-index: 2; width: min(43rem, 100%); margin-inline: auto; text-align: center; }
.intro-copy .eyebrow { margin: 0 0 .55rem; }
.intro-copy h2 {
    margin: 0;
    color: var(--gold-pale);
    font-family: var(--font-ornate);
    font-size: clamp(1.65rem, 4vw, 2.75rem);
    line-height: 1.15;
    text-shadow: 0 3px 10px #000;
}
.intro-copy > p:last-child { margin: .6rem 0 0; max-width: 33rem; color: var(--cream-dim); font-size: 1.06rem; font-style: italic; }
.section-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: 1.8rem 0 .9rem;
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: clamp(.88rem, 2vw, 1.05rem);
    font-weight: 800;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}
.section-title::before, .section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(217, 164, 65, .72));
}
.section-title::after {
    background: linear-gradient(90deg, rgba(217, 164, 65, .72), transparent);
}
.unfinished-heading {
    position: relative;
    margin: 1.8rem 0 .9rem;
}
.unfinished-heading .section-title { margin: 0; }
.tale-delete-toggle {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    min-height: 1.75rem;
    padding: .26rem .48rem;
    color: var(--cream-faint);
    font-family: var(--font-display);
    font-size: .57rem;
    font-weight: 700;
    letter-spacing: .045em;
    text-transform: uppercase;
    background: rgba(22, 11, 8, .7);
    border: 1px solid rgba(196, 161, 110, .24);
    border-radius: .28rem;
    box-shadow: 0 0 0 .35rem rgba(22, 11, 8, .88);
    opacity: .76;
    transition: color .15s ease, border-color .15s ease, opacity .15s ease, background .15s ease;
}
.tale-delete-toggle:hover,
.tale-delete-toggle[aria-pressed="true"] {
    color: var(--cream-dim);
    border-color: rgba(217, 164, 65, .46);
    background: rgba(59, 29, 19, .78);
    opacity: 1;
}
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.card {
    position: relative;
    isolation: isolate;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow: hidden;
    padding: 2.15rem 1.65rem 1.55rem;
    color: var(--ink);
    text-align: center;
    appearance: none;
    background:
        var(--grain),
        radial-gradient(ellipse at 50% 0%, rgba(255, 242, 204, .8), transparent 55%),
        linear-gradient(150deg, #ead9b8, #d5b681 72%, #c7955c);
    border: 1px solid #70401f;
    border-radius: .72rem .42rem .68rem .46rem;
    box-shadow:
        0 15px 18px rgba(0, 0, 0, .5),
        inset 0 0 0 4px rgba(97, 50, 22, .13),
        inset 0 0 34px rgba(93, 44, 18, .2);
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.card::before {
    content: "";
    position: absolute;
    inset: .55rem;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(104, 55, 27, .46);
    border-radius: .38rem .22rem .42rem .26rem;
}
.card:nth-child(2) { background-color: #dfc48f; }
.card:nth-child(3) { background-color: #d8b77e; }
.card:hover {
    transform: translateY(-.28rem) rotate(-.2deg);
    box-shadow: 0 20px 25px rgba(0, 0, 0, .62), inset 0 0 0 4px rgba(97, 50, 22, .13), inset 0 0 34px rgba(93, 44, 18, .18);
}
.card:nth-child(2):hover { transform: translateY(-.28rem) rotate(.18deg); }
.level {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.8rem;
    padding: .24rem .65rem;
    color: #6e2c1d;
    font-family: var(--font-display);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(100, 48, 28, .44);
}
.card h3 { margin: .7rem 0 .25rem; color: #521d16; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.2; }
.card p { margin: 1.3rem 0 1rem; color: #4f321f; line-height: 1.42; overflow-wrap: anywhere; }
.card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    width: min(13rem, 92%);
    min-height: 2.75rem;
    margin: auto auto 0;
    padding: .6rem 1rem;
    color: var(--gold-pale);
    font-family: var(--font-display);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .035em;
    text-shadow: 0 2px 3px #160502;
    background: linear-gradient(180deg, #6d2621, #3c1215);
    border: 1px solid #9a622e;
    border-radius: .35rem;
    box-shadow: inset 0 0 0 1px rgba(255, 220, 136, .1), 0 5px 10px rgba(59, 25, 10, .3);
}
.card-cta b { color: var(--gold-bright); font-size: 1rem; }

.session-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.session-entry { min-width: 0; }
.session-list.is-deleting .session-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: .45rem;
}
.session {
    min-height: 5rem;
    display: grid;
    grid-template-columns: .75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .9rem;
    width: 100%;
    padding: .9rem 1.15rem;
    color: var(--cream);
    text-align: left;
    appearance: none;
    background: var(--grain), linear-gradient(135deg, rgba(58, 29, 19, .98), rgba(28, 12, 10, .98));
    border: 1px solid rgba(160, 100, 45, .54);
    border-radius: .45rem;
    box-shadow: 0 9px 15px rgba(0, 0, 0, .38), inset 0 0 18px rgba(0, 0, 0, .3);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.session::before {
    content: "";
    width: .55rem;
    height: .55rem;
    background: var(--gold);
    border: 1px solid #4b2712;
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(242, 196, 100, .22);
}
.session:hover {
    transform: translateY(-2px);
    border-color: rgba(217, 164, 65, .82);
    box-shadow: 0 13px 18px rgba(0, 0, 0, .5), inset 0 0 22px rgba(104, 45, 22, .24);
}
.session:disabled {
    cursor: default;
    transform: none;
    opacity: .72;
    border-color: rgba(160, 100, 45, .4);
}
.session > div { min-width: 0; }
.session strong { display: block; color: var(--gold-pale); font-family: var(--font-display); font-size: .82rem; line-height: 1.3; overflow-wrap: anywhere; }
.session .muted { color: var(--cream-faint); font-size: .78rem; }
.session > span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding-left: .8rem;
    color: var(--gold-bright) !important;
    font-family: var(--font-display);
    font-size: .64rem !important;
    letter-spacing: .07em;
    white-space: nowrap;
    text-transform: uppercase;
    border-left: 1px solid rgba(217, 164, 65, .22);
}
.session > span::after { content: "›"; font-size: 1.2rem; line-height: 1; }
.session-list.is-deleting .session > span { display: none; }
.session-delete {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 4.6rem;
    padding: .55rem .65rem;
    color: #d4ad8b;
    font-family: var(--font-display);
    font-size: .59rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04em;
    text-transform: uppercase;
    background: var(--grain), linear-gradient(180deg, rgba(71, 31, 25, .9), rgba(39, 17, 15, .96));
    border: 1px solid rgba(169, 93, 65, .48);
    border-radius: .38rem;
    box-shadow: inset 0 1px rgba(255, 220, 176, .06), 0 6px 12px rgba(0, 0, 0, .28);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.session-list.is-deleting .session-delete { display: inline-flex; }
.session-delete:hover { color: #f1c9a5; border-color: rgba(210, 116, 78, .7); }
.session-delete.confirm {
    max-width: 6.4rem;
    color: #ffe0bd;
    background: var(--grain), linear-gradient(180deg, #792d27, #481719);
    border-color: #c06d48;
}
.session-delete:disabled { cursor: wait; opacity: .68; }
.empty-tale {
    margin: .7rem 0;
    padding: 1.1rem;
    color: var(--cream-faint);
    text-align: center;
    font-style: italic;
    border: 1px dashed rgba(217, 164, 65, .24);
    background: rgba(12, 6, 4, .38);
}
.muted { color: var(--cream-faint); }

.text-btn {
    color: var(--gold-bright);
    background: transparent;
    border: 0;
    padding: .45rem 0;
    font-family: var(--font-display);
    font-size: .72rem;
    letter-spacing: .05em;
}
.text-btn:hover { color: var(--gold-pale); }
.play-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    min-height: 2.45rem;
    padding: .48rem .75rem;
    color: var(--gold-pale);
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(77, 35, 23, .96), rgba(35, 15, 12, .98));
    border: 1px solid rgba(217, 164, 65, .54);
    border-radius: .35rem;
    box-shadow: inset 0 1px rgba(255, 229, 166, .08), 0 4px 10px rgba(0, 0, 0, .3);
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.play-back:hover {
    color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(98, 43, 25, .98), rgba(44, 17, 14, .98));
    border-color: rgba(242, 196, 100, .8);
    transform: translateY(-1px);
}
.hero-stage { width: min(52rem, 100%); margin: .35rem auto 0; }
.hero-heading { max-width: 42rem; margin: 0 auto 1rem; text-align: center; }
.hero-heading .eyebrow { margin: 0 0 .45rem; }
.hero-heading h2 { margin: 0; color: var(--gold-pale); font-family: var(--font-ornate); font-size: clamp(1.5rem, 4vw, 2.4rem); }
.lede { margin: .45rem auto 0; color: var(--cream-dim); font-style: italic; }
.hero-form {
    position: relative;
    isolation: isolate;
    min-height: 36rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: center;
    gap: 1rem;
    padding: 4.5rem 4.5rem;
    color: var(--ink);
    background:
        var(--grain),
        radial-gradient(ellipse at 50% 0%, rgba(255, 241, 197, .72), transparent 54%),
        linear-gradient(145deg, #ead7b3, #d4b47f 74%, #c4935c);
    border: 1px solid #6d3d1f;
    border-radius: .7rem .42rem .72rem .46rem;
    box-shadow: 0 24px 34px rgba(0, 0, 0, .62), inset 0 0 0 4px rgba(93, 47, 22, .14), inset 0 0 38px rgba(91, 43, 17, .22);
}
.hero-form::before {
    content: "";
    position: absolute;
    inset: .65rem;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(105, 54, 25, .44);
    border-radius: .38rem .22rem .42rem .28rem;
}
.hero-form label { display: grid; gap: .3rem; color: #5b321f; font-weight: 700; }
.hero-form label > span { font-family: var(--font-display); font-size: .69rem; letter-spacing: .06em; text-transform: uppercase; }
.hero-form small { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; text-transform: none; }
.hero-form .hero-vibe, .hero-form .btn-primary { grid-column: 1 / -1; }
input, select, textarea {
    width: 100%;
    color: var(--cream);
    background: rgba(32, 13, 9, .94);
    border: 1px solid rgba(166, 107, 52, .74);
    border-radius: .26rem;
    padding: .68rem .78rem;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .55), 0 1px rgba(255, 223, 155, .08);
}
input::placeholder, textarea::placeholder { color: #a88563; }
select { color-scheme: dark; }
textarea { min-height: 4rem; resize: vertical; }
.btn-primary, #btn-unlock {
    min-height: 3.2rem;
    color: #2d1408;
    background: linear-gradient(180deg, #f0c66d 0%, #c98c35 52%, #a96325 100%);
    border: 1px solid #6f391b;
    border-radius: .38rem;
    padding: .72rem 1.35rem;
    font-family: var(--font-display);
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-shadow: 0 1px rgba(255, 238, 179, .65);
    box-shadow: inset 0 1px rgba(255, 239, 178, .72), inset 0 -2px rgba(91, 40, 13, .28), 0 5px 8px rgba(0, 0, 0, .4);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-primary:hover, #btn-unlock:hover { filter: brightness(1.08); box-shadow: inset 0 1px rgba(255, 247, 203, .82), inset 0 -2px rgba(91, 40, 13, .24), 0 0 14px rgba(242, 196, 100, .28); }
.btn-primary:active, #btn-unlock:active { transform: translateY(1px); filter: brightness(.94); box-shadow: inset 0 2px 5px rgba(78, 31, 10, .36), 0 2px 4px rgba(0, 0, 0, .38); }
.btn-primary:disabled { cursor: not-allowed; filter: grayscale(.68) brightness(.78); }

.play { min-height: calc(100vh - 7rem); display: flex; flex-direction: column; }
.play-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    margin: 0 0 .85rem;
    padding: .45rem .9rem .65rem;
    border-bottom: 1px solid var(--line-soft);
}
.play-chapter { text-align: center; }
.chapter-kicker { display: block; margin-bottom: .1rem; }
.play-title { color: var(--gold-pale); font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: .04em; }
.play-hero { font-style: italic; }
.auto-roll-control {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .55rem;
    min-width: 8.4rem;
    cursor: pointer;
    user-select: none;
}
.auto-roll-control input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}
.toggle-track {
    position: relative;
    flex: 0 0 auto;
    width: 2.65rem;
    height: 1.45rem;
    padding: .16rem;
    background: linear-gradient(180deg, #28120e, #130806);
    border: 1px solid rgba(217, 164, 65, .48);
    border-radius: 2rem;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .72), 0 1px rgba(255, 228, 163, .08);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.toggle-track i {
    display: block;
    width: 1.02rem;
    height: 1.02rem;
    background: linear-gradient(145deg, #d8c09a, #7e6547);
    border: 1px solid #3b2113;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .55);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), background .2s ease;
}
.auto-roll-control input:checked + .toggle-track {
    background: linear-gradient(180deg, #7c351d, #471514);
    border-color: var(--gold);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, .54), 0 0 10px rgba(229, 111, 45, .18);
}
.auto-roll-control input:checked + .toggle-track i {
    background: linear-gradient(145deg, #ffe7a7, #d79d39);
    transform: translateX(1.18rem);
}
.auto-roll-control input:focus-visible + .toggle-track { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.toggle-copy { display: grid; line-height: 1.05; }
.toggle-copy strong { color: var(--gold-pale); font-family: var(--font-display); font-size: .62rem; letter-spacing: .045em; text-transform: uppercase; }
.toggle-copy small { margin-top: .16rem; color: var(--cream-faint); font-size: .67rem; font-style: italic; }
.play-stage {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 50rem);
    justify-content: center;
    align-items: stretch;
    gap: 0;
    min-height: 0;
    transition: grid-template-columns .25s ease, gap .25s ease;
}
.play.dice-active .play-stage {
    grid-template-columns: minmax(0, 1fr) minmax(19.5rem, 22rem);
    justify-content: stretch;
    align-items: start;
    gap: 1rem;
}
.story-column {
    min-width: 0;
    min-height: calc(100vh - 10rem);
    display: flex;
    flex-direction: column;
}
.log {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .95rem;
    min-height: 16rem;
    padding: .6rem .35rem 1rem;
}
.bubble {
    position: relative;
    isolation: isolate;
    max-width: 82%;
    min-width: min(15rem, 85%);
    padding: 1.3rem 1.5rem 1.25rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.55;
    border: 1px solid rgba(217, 164, 65, .72);
    border-radius: .55rem;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, .42),
        inset 0 0 0 1px rgba(255, 225, 157, .08),
        inset 0 0 24px rgba(0, 0, 0, .34);
}
.bubble::before {
    content: "";
    position: absolute;
    inset: .28rem;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(217, 164, 65, .22);
    border-radius: .32rem;
}
.bubble.dm {
    align-self: flex-start;
    color: var(--cream);
    background:
        var(--grain),
        linear-gradient(145deg, rgba(52, 26, 18, .98), rgba(25, 12, 10, .98) 66%, rgba(43, 16, 16, .98));
    border-color: rgba(176, 116, 55, .74);
    border-top-left-radius: .16rem;
}
.bubble.you {
    align-self: flex-end;
    color: var(--cream);
    background:
        var(--grain),
        linear-gradient(145deg, rgba(86, 25, 28, .98), rgba(46, 13, 17, .98) 72%, rgba(72, 19, 21, .98));
    border-color: rgba(222, 170, 76, .82);
    border-top-right-radius: .16rem;
}
.bubble.dm::after,
.bubble.you::after {
    content: "";
    position: absolute;
    top: 1.13rem;
    width: .52rem;
    height: .52rem;
    background: var(--gold);
    border: 2px solid #4b2712;
    box-shadow: 0 0 0 1px rgba(242, 196, 100, .38), 0 2px 5px #000;
    transform: rotate(45deg);
}
.bubble.dm::after { right: -.34rem; }
.bubble.you::after { left: -.34rem; }
.bubble.dm .who { color: #e6b75d; }
.bubble.you .who { color: #f1cf84; }
.bubble.dm .who::after,
.bubble.you .who::after {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 1px;
    margin: 0 0 .2rem .55rem;
    background: linear-gradient(90deg, rgba(217, 164, 65, .62), transparent);
}
.bubble.roll {
    align-self: center;
    min-width: min(18rem, 80%);
    max-width: 76%;
    padding: .85rem 1.5rem;
    color: var(--gold-pale);
    font-family: var(--font-display);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    background: linear-gradient(180deg, rgba(54, 27, 16, .97), rgba(23, 11, 8, .98));
    border-color: rgba(217, 164, 65, .7);
    border-radius: 2rem;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .38), inset 0 0 18px rgba(217, 164, 65, .08);
}
.bubble.roll::before {
    inset: .24rem;
    border-radius: 2rem;
}
.who {
    display: block;
    margin: 0 0 .28rem;
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.dm-status {
    width: min(26rem, 90%);
    margin: .2rem auto .5rem;
    padding: .7rem 1rem;
    color: var(--cream-dim);
    text-align: center;
    font-style: italic;
    background: rgba(27, 13, 10, .9);
    border: 1px solid rgba(217, 164, 65, .34);
    border-radius: 2rem;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .34), 0 6px 14px rgba(0, 0, 0, .25);
}
.composer {
    position: sticky;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: .65rem;
    align-items: end;
    padding: 1rem 1.15rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--grain), linear-gradient(180deg, rgba(40, 19, 13, .96), rgba(16, 7, 5, .99));
    border: 1px solid rgba(217, 164, 65, .3);
    border-radius: .42rem;
    box-shadow: 0 -10px 28px rgba(0, 0, 0, .48);
    backdrop-filter: blur(8px);
}
.composer textarea { min-height: 3.65rem; }
.composer .btn-primary { min-width: 7.5rem; }

.dice-panel {
    position: sticky;
    top: 5.25rem;
    z-index: 18;
    isolation: isolate;
    min-width: 0;
    min-height: 35rem;
    max-height: calc(100vh - 6.2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--cream);
    background:
        var(--grain),
        radial-gradient(ellipse at 50% 0%, rgba(121, 58, 24, .3), transparent 43%),
        linear-gradient(155deg, rgba(55, 26, 17, .99), rgba(20, 9, 7, .995) 68%, rgba(44, 13, 15, .99));
    border: 1px solid rgba(217, 164, 65, .62);
    border-radius: .72rem;
    box-shadow: 0 24px 48px rgba(0, 0, 0, .66), inset 0 0 0 1px rgba(255, 222, 151, .08), inset 0 0 42px rgba(0, 0, 0, .38);
    animation: dice-panel-enter .34s cubic-bezier(.16, .8, .26, 1) both;
}
.dice-panel::before {
    content: "";
    position: absolute;
    inset: .35rem;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(217, 164, 65, .2);
    border-radius: .48rem;
    background:
        url("/static/art/ui-kit-components/ornamental_corner_small.png") left top / 3.4rem no-repeat,
        url("/static/art/ui-kit-components/ornamental_corner_small.png") right bottom / 3.4rem no-repeat;
}
@keyframes dice-panel-enter {
    from { opacity: 0; transform: translate3d(1.25rem, .35rem, 0) scale(.985); }
    to { opacity: 1; transform: none; }
}
.dice-panel-heading {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: .45rem;
    min-height: 4.6rem;
    padding: .55rem .8rem .45rem .5rem;
    border-bottom: 1px solid rgba(217, 164, 65, .22);
}
.dice-panel-heading img {
    align-self: end;
    width: 3.65rem;
    height: 3.65rem;
    margin: 0 0 -.2rem -.15rem;
    object-fit: contain;
    filter: drop-shadow(0 5px 8px rgba(0, 0, 0, .65));
}
.dice-kicker {
    display: block;
    color: var(--gold);
    font-family: var(--font-display);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}
.dice-panel-heading h2 {
    margin: .12rem 0 0;
    color: var(--gold-pale);
    font-family: var(--font-ornate);
    font-size: .95rem;
    line-height: 1.15;
    text-shadow: 0 2px 5px #000;
}
.dice-expression {
    max-width: 7.2rem;
    padding: .36rem .52rem;
    overflow: hidden;
    color: #32170c;
    font-family: var(--font-display);
    font-size: .67rem;
    font-weight: 900;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(145deg, #f2d99e, #b9833f);
    border: 1px solid #71401f;
    border-radius: 2rem;
    box-shadow: inset 0 1px rgba(255, 244, 200, .65), 0 3px 8px rgba(0, 0, 0, .4);
}
.dice-context {
    position: relative;
    margin: .75rem .85rem .35rem;
    padding: .72rem .82rem .76rem;
    color: #3d2112;
    background:
        var(--grain),
        linear-gradient(145deg, rgba(237, 216, 176, .98), rgba(195, 157, 101, .97));
    border: 1px solid #724422;
    border-radius: .28rem .46rem .3rem .42rem;
    box-shadow: inset 0 0 18px rgba(98, 50, 22, .18), 0 5px 12px rgba(0, 0, 0, .36);
    transform: rotate(-.18deg);
}
.dice-context::after {
    content: "";
    position: absolute;
    top: -.18rem;
    right: 1.2rem;
    width: 1.45rem;
    height: 1.45rem;
    opacity: .86;
    background: url("/static/art/ui-kit-components/wax_seal_medallion.png") center / contain no-repeat;
    transform: rotate(11deg);
}
.dice-context-meta { display: flex; align-items: center; gap: .4rem; padding-right: 1.2rem; }
.dice-purpose, .dice-stakes {
    color: #782b20;
    font-family: var(--font-display);
    font-size: .53rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.dice-stakes { color: #694227; }
.dice-stakes::before { content: "◆"; margin-right: .38rem; color: #a66e32; font-size: .4rem; }
.dice-reason {
    margin: .35rem 0 0;
    padding: 0;
    color: #3b2416;
    font-size: .84rem;
    font-style: italic;
    font-weight: 650;
    line-height: 1.32;
}
.dice-tray {
    position: relative;
    flex: 1 1 15rem;
    min-height: 15rem;
    margin: .25rem .65rem .4rem;
    border-radius: 1.1rem;
    filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .48));
}
.dice-tray canvas {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 15rem;
    touch-action: none;
    cursor: grab;
    border-radius: 1.1rem;
}
.dice-tray canvas:active { cursor: grabbing; }
.dice-result {
    position: absolute;
    inset: 50% auto auto 50%;
    min-width: 11.5rem;
    display: grid;
    justify-items: center;
    padding: .7rem 1.35rem .82rem;
    color: var(--gold-pale);
    text-align: center;
    background:
        var(--grain),
        linear-gradient(180deg, rgba(69, 31, 18, .97), rgba(23, 10, 8, .985));
    border: 1px solid rgba(242, 196, 100, .78);
    border-radius: .45rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .72), inset 0 0 20px rgba(217, 164, 65, .1);
    transform: translate(-50%, -50%);
    animation: dice-result-enter .28s cubic-bezier(.18, .9, .32, 1.2) both;
}
.dice-result::before, .dice-result::after { content: "◆"; position: absolute; top: 50%; color: var(--gold); font-size: .48rem; transform: translateY(-50%); }
.dice-result::before { left: .42rem; }
.dice-result::after { right: .42rem; }
.dice-result > span:first-child { color: var(--cream-dim); font-family: var(--font-display); font-size: .53rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dice-result strong {
    margin: -.1rem 0;
    color: var(--gold-bright);
    font-family: var(--font-ornate);
    font-size: 2.75rem;
    line-height: 1.05;
    text-shadow: 0 0 18px rgba(242, 196, 100, .38), 0 3px 6px #000;
}
.dice-result > span:last-child { max-width: 14rem; color: var(--cream); font-size: .7rem; font-style: italic; line-height: 1.2; }
.outcome-success .dice-result { border-color: rgba(164, 200, 89, .9); box-shadow: 0 10px 28px rgba(0, 0, 0, .72), 0 0 24px rgba(113, 139, 66, .22); }
.outcome-success .dice-result strong { color: #e6efa8; }
.outcome-failure .dice-result { border-color: rgba(209, 91, 62, .88); box-shadow: 0 10px 28px rgba(0, 0, 0, .72), 0 0 24px rgba(156, 34, 38, .2); }
.outcome-failure .dice-result strong { color: #f1ad7b; }
@keyframes dice-result-enter {
    from { opacity: 0; transform: translate(-50%, -42%) scale(.75); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.dice-actions {
    display: grid;
    gap: .48rem;
    padding: .15rem .85rem .85rem;
    text-align: center;
}
.dice-hint { min-height: 1.2em; margin: 0; color: var(--cream-faint); font-size: .72rem; font-style: italic; line-height: 1.2; }
.btn-roll-dice {
    min-height: 2.85rem;
    color: #2d1408;
    font-family: var(--font-display);
    font-size: .69rem;
    font-weight: 900;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #f1c86c 0%, #c38632 54%, #92501e 100%);
    border: 1px solid #6d3518;
    border-radius: .38rem;
    box-shadow: inset 0 1px rgba(255, 241, 178, .76), inset 0 -2px rgba(70, 27, 9, .32), 0 5px 11px rgba(0, 0, 0, .48);
    transition: transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.btn-roll-dice span { display: inline-block; margin-right: .35rem; color: #732619; transition: transform .35s ease; }
.btn-roll-dice:hover { filter: brightness(1.1); box-shadow: inset 0 1px rgba(255, 246, 202, .82), 0 0 15px rgba(242, 196, 100, .26); }
.btn-roll-dice:hover span { transform: rotate(90deg) scale(1.12); }
.btn-roll-dice:active { transform: translateY(1px); }
.btn-roll-dice:disabled { cursor: default; filter: grayscale(.45) brightness(.72); }
.dice-panel.is-auto .btn-roll-dice { display: none; }
.dice-panel.is-auto .dice-actions { min-height: 2.7rem; align-content: center; }
.dice-panel.is-rolling .dice-expression { animation: expression-pulse .8s ease-in-out infinite alternate; }
@keyframes expression-pulse { to { filter: brightness(1.16); box-shadow: inset 0 1px rgba(255, 244, 200, .7), 0 0 12px rgba(242, 196, 100, .28); } }

.toasts { position: fixed; right: 1rem; bottom: 5rem; z-index: 75; display: flex; flex-direction: column; gap: .45rem; }
.toast {
    min-width: 16rem;
    padding: 1rem 1.3rem;
    color: var(--cream);
    background: var(--grain), linear-gradient(145deg, rgba(79, 26, 24, .98), rgba(31, 13, 11, .98));
    border: 1px solid rgba(217, 164, 65, .68);
    border-radius: .42rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .55), inset 0 0 16px rgba(0, 0, 0, .3);
}

@media (max-width: 900px) {
    .card-grid { gap: .55rem; }
    .card { min-height: 19rem; padding-inline: 1.2rem; }
    .card p { font-size: .9rem; }
    .session { padding-inline: 1rem; }
}

@media (max-width: 760px) {
    html { font-size: 16px; }
    body::after { box-shadow: inset 0 0 55px rgba(0, 0, 0, .62); }
    .app { padding: 0 .75rem 7rem; }
    .topbar { grid-template-columns: 1fr auto; margin-inline: -.3rem; }
    .brand { grid-column: 1; grid-row: 1; justify-content: flex-start; }
    .back { grid-column: 2; grid-row: 1; font-size: 0; }
    .back::after { content: "Manor ↗"; font-size: .7rem; }
    .topbar-flourish { display: none; }
    .brand-mark { width: auto; height: 2.3rem; }
    .tavern-intro { min-height: 11rem; padding: 1.6rem 1.3rem; }
    .intro-copy { width: 100%; }
    .intro-copy > p:last-child { font-size: .92rem; }
    .card-grid { grid-template-columns: 1fr; }
    .card { width: min(26rem, 100%); min-height: 19rem; margin-inline: auto; padding: 2.15rem 1.6rem 1.5rem; }
    .card h3 { font-size: 1.18rem; }
    .card p { margin-top: 1.3rem; font-size: 1rem; }
    .session-list { grid-template-columns: 1fr; }
    .session { min-height: 5.2rem; }
    .hero-form { min-height: 0; grid-template-columns: 1fr; padding: 3.2rem 2.6rem; }
    .hero-form .hero-vibe, .hero-form .btn-primary { grid-column: auto; }
    .play-head { grid-template-columns: auto 1fr auto; gap: .55rem; padding-inline: .3rem; }
    .play-back { min-height: 2.35rem; padding: .42rem .58rem; font-size: .62rem; }
    .auto-roll-control { min-width: 2.65rem; gap: .35rem; }
    .toggle-copy small { display: none; }
    .toggle-copy strong { font-size: .55rem; }
    .play.dice-active .play-stage { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .story-column { min-height: calc(100vh - 9rem); }
    .bubble { max-width: 96%; min-width: 0; padding: 1.15rem 1.2rem 1.1rem; }
    .composer { grid-template-columns: 1fr; }
    .composer .btn-primary { width: 100%; }
    .dice-panel {
        position: fixed;
        inset: calc(4.35rem + env(safe-area-inset-top)) .55rem calc(.55rem + env(safe-area-inset-bottom));
        z-index: 60;
        min-height: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        box-shadow: 0 0 0 100vmax rgba(6, 3, 2, .78), 0 20px 46px rgba(0, 0, 0, .76), inset 0 0 0 1px rgba(255, 222, 151, .08);
    }
    .dice-panel-heading { flex: 0 0 auto; }
    .dice-context { flex: 0 0 auto; }
    .dice-tray { flex: 1 1 16rem; min-height: 14rem; }
    .dice-tray canvas { min-height: 14rem; }
    .dice-actions { flex: 0 0 auto; padding-bottom: 1rem; }
    .lock-sconce { display: none; }
    .lock-panel { min-height: 34rem; padding: 4rem 3rem 3.2rem; }
}

@media (max-width: 420px) {
    .lock-panel { min-height: 31.5rem; padding: 3.6rem 2.25rem 3rem; }
    .lock-crest { width: 7rem; height: 5.4rem; }
    .lock-foot { font-size: .66rem; }
    .tavern-intro { min-height: 12rem; }
    .intro-copy { width: 100%; }
    .section-title { letter-spacing: .08em; }
    .card { min-height: 18.5rem; }
    .session { grid-template-columns: .65rem minmax(0, 1fr); padding: .9rem 1rem; }
    .session > span { grid-column: 2; justify-self: start; padding: .35rem 0 0; border-left: 0; border-top: 1px solid rgba(217, 164, 65, .18); }
    .hero-form { padding: 2.6rem 1.7rem; }
    .bubble.dm, .bubble.you { padding: 1rem 1.05rem; }
    .bubble.roll { max-width: 94%; padding: .75rem 1.1rem; }
    .play-head { gap: .4rem; }
    .toggle-copy { display: none; }
    .dice-panel { inset: calc(4rem + env(safe-area-inset-top)) .35rem calc(.35rem + env(safe-area-inset-bottom)); }
    .dice-panel-heading { grid-template-columns: 3rem minmax(0, 1fr) auto; padding-right: .6rem; }
    .dice-panel-heading img { width: 3.4rem; height: 3.4rem; }
    .dice-context { margin-inline: .65rem; }
    .dice-reason { font-size: .8rem; }
    .dice-tray { margin-inline: .45rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .ambient-embers, .lock-sconce { display: none; }
}