/* Vyxara — site theme. Palette from the Vyxara SVG pack. */
:root{
  --navy:#14223B; --navy2:#253B63; --sky:#6CB8E8; --parch:#F7F0E2; --gold:#C9A45B; --gold2:#E8D3A0;
  --blush:#D8A8B4; --lav:#AEA6D8; --aqua:#A8D8D2; --ink:#14223B; --ink2:#3a4a68; --muted:#5d6b86;
  --navyglass:linear-gradient(135deg,#14223B,#253B63 55%,rgba(108,184,232,.92));
}
:root{--page-bg:#dcebf7;--ink:#14223B;--ink2:#3a4a68;--muted:#5d6b86;--head:#14223B;--accent:#253B63;--pearl:linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,240,226,.97) 55%,rgba(226,241,253,.93));--glass:rgba(255,255,255,.5);--glass-line:rgba(255,255,255,.8);--btn2:linear-gradient(135deg,#fff,#F7F0E2 55%,#DDEFFD);--chip:rgba(255,255,255,.78);--field:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,240,226,.94) 60%,rgba(221,239,253,.7));--card:#fffdf8;--veil:rgba(247,240,226,.55);--halo:0 0 .4em rgba(255,255,255,.95),0 0 .15em rgba(255,255,255,.9);--glow-shadow:0 0 .35em rgba(255,255,255,.9),0 .05em .2em rgba(20,34,59,.18);--t-ink:#14223B;--t-accent:#253B63;--t-soft:#3a4a68;--t-accent2:#2f5d8a;--b-pend:#5a4fa6;--b-pend-bg:rgba(174,166,216,.22);--b-acc:#7d5f1c;--b-acc-bg:rgba(232,211,160,.45);--b-den:#9b3b4b;--b-den-bg:rgba(216,168,180,.3);--alert-ink:#7a2f3f;}
[data-theme="dark"]{--page-bg:#0c1424;--ink:#F1E9DA;--ink2:#D2DAE9;--muted:#A7B2C8;--head:#F7EFDF;--accent:#AFCFF0;--pearl:linear-gradient(135deg,rgba(26,39,68,.95),rgba(19,29,52,.96) 55%,rgba(30,50,88,.93));--glass:rgba(12,20,40,.58);--glass-line:rgba(201,164,91,.38);--btn2:linear-gradient(135deg,#22345a,#18243f 55%,#25426d);--chip:rgba(14,22,42,.82);--field:linear-gradient(135deg,rgba(12,19,36,.92),rgba(22,34,60,.92));--card:#17223b;--veil:rgba(8,14,30,.5);--halo:0 0 .4em rgba(6,12,28,.95),0 0 .15em rgba(6,12,28,.9);--glow-shadow:0 0 .4em rgba(6,12,28,.9),0 .05em .25em rgba(0,0,0,.5);--t-ink:#F4ECDD;--t-accent:#B4D3F2;--t-soft:#CDD6E6;--t-accent2:#9FC5EC;--b-pend:#cfc8f7;--b-pend-bg:rgba(174,166,216,.16);--b-acc:#f1d690;--b-acc-bg:rgba(232,211,160,.14);--b-den:#f4adbb;--b-den-bg:rgba(216,168,180,.15);--alert-ink:#f8c7d0;color-scheme:dark}
/* parchment frames stay lit at night, so what sits on them keeps the day colors */
@media (min-width:821px){[data-theme="dark"] .has-frame,[data-theme="dark"] .on-light{--page-bg:#dcebf7;--ink:#14223B;--ink2:#3a4a68;--muted:#5d6b86;--head:#14223B;--accent:#253B63;--pearl:linear-gradient(135deg,rgba(255,255,255,.97),rgba(247,240,226,.97) 55%,rgba(226,241,253,.93));--glass:rgba(255,255,255,.5);--glass-line:rgba(255,255,255,.8);--btn2:linear-gradient(135deg,#fff,#F7F0E2 55%,#DDEFFD);--chip:rgba(255,255,255,.78);--field:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,240,226,.94) 60%,rgba(221,239,253,.7));--card:#fffdf8;--veil:rgba(247,240,226,.55);--halo:0 0 .4em rgba(255,255,255,.95),0 0 .15em rgba(255,255,255,.9);--glow-shadow:0 0 .35em rgba(255,255,255,.9),0 .05em .2em rgba(20,34,59,.18);--t-ink:#14223B;--t-accent:#253B63;--t-soft:#3a4a68;--t-accent2:#2f5d8a;--b-pend:#5a4fa6;--b-pend-bg:rgba(174,166,216,.22);--b-acc:#7d5f1c;--b-acc-bg:rgba(232,211,160,.45);--b-den:#9b3b4b;--b-den-bg:rgba(216,168,180,.3);--alert-ink:#7a2f3f;color-scheme:light}}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;min-height:100vh;overflow-x:hidden;background:var(--page-bg)}
a{color:var(--accent)}
.vx-bg{position:fixed;left:0;right:0;top:-20vh;bottom:-20vh;z-index:-1;pointer-events:none}

/* ── Canvas: everything is placed on a 1440-wide design and scales with the screen ── */
.vx-stage{container-type:inline-size;width:100%;max-width:1680px;margin:0 auto}
.vx-canvas{--u:calc(100cqw / 1440);position:relative;height:calc(var(--ch) * var(--u))}
.vx-g{display:contents}
.el{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u));transform:rotate(var(--r,0deg))}
.el>*{width:100%;height:100%}
.el-link{display:block;color:inherit;text-decoration:none}
.el-image img{display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
.img-empty{display:grid;place-items:center;background:rgba(255,255,255,.5);border:2px dashed var(--gold2);border-radius:12px;color:var(--muted);font-size:calc(16 * var(--u))}
.tx{display:flex;flex-direction:column}
.tx-in{font-size:calc(var(--fs) * var(--u));line-height:1.25;white-space:pre-wrap;overflow-wrap:break-word}
.is-hidden{opacity:.3}

/* panels */
.sh{position:relative}
.sh-pearl,.w-rules,.w-app,.w-form,.w-letter,.w-status.empty,.w-gallery.empty,.w-message{
  background:var(--pearl);border:2px solid var(--gold2);border-radius:calc(28 * var(--u));
  box-shadow:0 14px 34px -14px rgba(16,33,60,.32),inset 0 0 0 7px rgba(255,255,255,.35)}
.sh-pearl::before,.w-rules::before,.w-form::before,.w-message::before{content:"";position:absolute;inset:9px;border:1px solid rgba(108,184,232,.28);border-radius:inherit;pointer-events:none}
.sh-parchment{background:radial-gradient(120% 90% at 50% 0%,#fffaf0,#F7F0E2 60%,#efe3c8);border:2px solid var(--gold);box-shadow:0 14px 34px -14px rgba(16,33,60,.3)}
.sh-navy{background:var(--navyglass);border:2px solid var(--gold);box-shadow:0 14px 34px -14px rgba(16,33,60,.5)}
.sh-glass{background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border:1px solid var(--glass-line);box-shadow:0 10px 30px -14px rgba(16,33,60,.3)}

/* buttons */
.vxbtn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;width:100%;height:100%;padding:0 1em;border-radius:999px;border:2px solid var(--gold);
  font-family:'Cinzel',serif;font-weight:600;letter-spacing:.03em;text-decoration:none;white-space:nowrap;overflow:hidden;cursor:pointer;
  transition:transform .15s,filter .15s,box-shadow .15s;outline-offset:-6px}
.el .vxbtn{font-size:calc(var(--fs) * var(--u))}
.vxbtn .bt{overflow:hidden;text-overflow:ellipsis}
.vxbtn .arr{font-family:system-ui,sans-serif;font-weight:400}
.vb-primary{color:var(--parch);background:var(--navyglass);outline:1px solid rgba(108,184,232,.5);box-shadow:0 10px 22px -10px rgba(20,34,59,.7)}
.vb-secondary{color:var(--head);background:var(--btn2);outline:1px solid rgba(201,164,91,.45);box-shadow:0 8px 18px -10px rgba(20,34,59,.35)}
.vb-discord{color:#fff;background:linear-gradient(135deg,#14223B,#253B63 55%,#5865F2);outline:1px solid rgba(108,184,232,.45);box-shadow:0 10px 22px -10px rgba(20,34,59,.7)}
.vb-link{border:0;background:none;color:var(--head);padding:0 .3em;outline:0;font-family:'Cormorant Garamond',serif;font-weight:700;letter-spacing:.01em;font-size:1.12em}
.el .vb-link{font-size:calc(var(--fs) * 1.12 * var(--u))}
.vb-link .bt{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .2s}
.vb-link:hover .bt{background-size:100% 1px}
.vxbtn:hover{transform:translateY(-1px);filter:brightness(1.07)}
.vb-link:hover{transform:none}
.vxbtn:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.vxbtn[disabled],.vxbtn.is-off{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.dc-ic{width:1.3em;height:1.3em;flex:none}

/* ── Blocks (widgets) ── */
.wd{color:var(--ink);font-size:max(12px,calc(17 * var(--ts,1) * var(--u)));line-height:1.4}
.wd>*{width:100%;height:100%}
.wd h2,.wd h3{font-family:'Cinzel',serif;font-weight:600;color:var(--head)}
.script{font-family:'Pinyon Script',cursive;color:var(--accent)}
.hint{color:var(--muted);font-size:.92em;font-style:italic}
.w-div{display:block;width:min(70%,400px);height:auto;margin:.3em auto 0}
.badge{display:inline-block;font-family:'Cinzel',serif;font-size:.7em;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.25em .85em;border-radius:999px;border:1px solid currentColor}
.b-pending{color:var(--b-pend);background:var(--b-pend-bg)}
.b-accepted{color:var(--b-acc);background:var(--b-acc-bg)}
.b-denied{color:var(--b-den);background:var(--b-den-bg)}

.w-user{display:flex;align-items:center;gap:.6em;padding:0 .9em 0 .35em;border-radius:999px;background:var(--chip);border:1px solid var(--gold2);font-size:.88em}
.w-user .av{width:2.5em;height:2.5em;border-radius:50%;border:2px solid var(--gold2);flex:none}
.w-user-t{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.w-user-t b{font-family:'Cinzel',serif;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-user-t span{white-space:nowrap}
.w-login{font-size:.8em}

.w-rules{position:relative;display:flex;flex-direction:column;padding:1.7em 2em 1.4em}
.w-rules-box{flex:1;overflow:auto;padding-right:.8em;font-size:1.1em;line-height:1.5;scrollbar-color:var(--gold2) transparent}
.w-rules-box h3{font-size:1.5em;text-align:center;margin:.1em 0 .6em}
.w-rules-box h4{font-family:'Cinzel',serif;font-weight:600;color:var(--accent);font-size:1.08em;margin:1.3em 0 .4em;padding-bottom:.2em;border-bottom:1px solid var(--gold2)}
.w-rules-box p{margin:.5em 0}
.w-rules-box li{margin:.25em 0}
.w-rules-box hr{border:0;height:1px;background:var(--gold2);margin:1.2em 0}
.w-ack{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.7em 1.2em;margin-top:1em;padding-top:1em;border-top:1px solid rgba(201,164,91,.55)}
.w-ack .vxbtn{width:auto;height:2.8em;font-size:.92em}
.w-ack .hint{flex-basis:100%}
.w-ack.done{justify-content:center;font-family:'Cinzel',serif;font-weight:600;color:var(--accent);gap:.6em}
.vx-check{display:flex;align-items:center;gap:.6em;font-weight:700;font-size:1.05em;cursor:pointer}
.vx-check input{position:absolute;opacity:0;width:1px;height:1px}
.vx-check span{width:1.7em;height:1.7em;flex:none;background:url(/static/assets/checkbox_unchecked.svg) center/contain no-repeat}
.vx-check input:checked+span{background-image:url(/static/assets/checkbox_checked.svg)}
.vx-check input:focus-visible+span{outline:2px solid var(--sky);border-radius:6px}
.vx-check input:disabled+span{opacity:.45}

.w-app{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.45em;padding:1.3em 1.1em 1.2em}
.w-app-ic{width:8.2em;height:6.4em;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(16,33,60,.18))}
.w-app h3{font-size:1.2em;margin:.1em 0 0}
.w-app p{margin:0;flex:1;color:var(--ink2);font-size:1.05em;line-height:1.3}
.w-app .vxbtn{height:2.7em;font-size:.82em}

.w-form{position:relative;overflow:auto;padding:1.6em 2.2em 2em}
.w-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.6em}
.w-tab{display:flex;align-items:center;gap:.5em;padding:.35em 1.3em .35em .45em;line-height:1.15;border-radius:999px;border:1.5px solid var(--gold2);background:var(--btn2);color:var(--head);text-decoration:none;font-family:'Cinzel',serif;font-size:.92em}
.w-tab img{width:2.1em;height:2.1em;object-fit:contain}
.w-tab.on{background:var(--navyglass);color:var(--parch);border-color:var(--gold)}
.w-tab small{display:block;font-family:'Cormorant Garamond',serif;font-size:.85em;letter-spacing:0;opacity:.8}
.w-form-head{text-align:center;margin:1.2em 0 1em}
.w-form-head h2{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:700;font-size:2.7em;line-height:1.05;margin:0;color:var(--head)}
.w-form-head .caps{font-family:'Cinzel',serif;text-transform:uppercase;font-size:.78em;letter-spacing:.28em;color:var(--ink2);margin:.35em 0 .5em}
.w-form-head .lead{margin:0;font-size:1.1em;color:var(--ink2)}
.w-form-head .script{font-size:1.6em;margin:0}
.w-q{margin:0 0 1.3em}
.w-q label{display:block;font-weight:700;font-size:1.08em;margin-bottom:.45em}
.w-q .num{font-family:'Cinzel',serif;color:#a8853c}
.req{color:#b26a7a}
.wd input[type=text],.wd textarea,.wd select{width:100%;font:inherit;font-size:1.02em;color:var(--ink);border:1.5px solid var(--gold2);border-radius:14px;padding:.7em 1em;
  background:var(--field);transition:border-color .15s,box-shadow .15s}
.wd input:focus,.wd textarea:focus,.wd select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(108,184,232,.3)}
.wd textarea{min-height:7em;resize:vertical}
.wd select{appearance:none;padding-right:2.6em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%23C9A45B' stroke-width='2'/%3E%3C/svg%3E") right .9em center/1.1em no-repeat,var(--field)}
.count{display:block;text-align:right;color:var(--muted);font-size:.8em;margin-top:.2em}
.w-alert{background:rgba(216,168,180,.25);border:1px solid var(--blush);border-radius:12px;padding:.8em 1em;margin:0 0 1em;color:var(--alert-ink)}
.w-intro{margin:0 auto 1.3em;max-width:38em;text-align:center;font-size:1.12em;line-height:1.45;color:var(--ink)}
.w-callout,.w-notice{border:1.5px solid var(--gold);border-left-width:5px;border-radius:14px;background:rgba(201,164,91,.12);padding:.85em 1.1em;margin:0 0 1.4em;line-height:1.4}
.w-callout h3{margin:0 0 .3em;font-family:'Cinzel',serif;font-size:.95em;letter-spacing:.06em;text-transform:uppercase;color:var(--head)}
.w-callout p,.w-notice p{margin:0;font-size:1.05em;color:var(--ink)}
.w-notice{margin:.4em 0 .9em;font-weight:600}
.w-reqnote{margin:0 0 1.1em;color:var(--muted);font-size:.95em}
.w-q .opt{font-weight:500;font-size:.85em;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w-form-actions{display:flex;flex-wrap:wrap;gap:.8em;margin-top:1em}
.w-form-actions .vxbtn{width:auto;height:3em;font-size:.92em}

.w-status{display:flex;flex-direction:column;gap:1em;overflow:auto;padding:.3em}
.w-status.empty{align-items:center;justify-content:center;text-align:center;padding:2em}
.w-status.empty .vxbtn{width:auto;height:3em;font-size:.9em}
.w-status.empty p{font-size:1.25em;margin:.4em 0 1em}
.w-letter{display:flex;gap:1.3em;align-items:flex-start;padding:1.3em 1.6em;flex:none}
.w-letter .seal{width:5.2em;height:5.2em;flex:none;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(16,33,60,.25))}
.w-letter-body{flex:1;min-width:0}
.w-letter-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5em}
.w-letter h3{font-size:1.2em;margin:0}
.w-letter p{margin:.3em 0;line-height:1.4}
.w-letter .meta{color:var(--muted);font-size:.85em}
.w-steps{list-style:none;display:flex;padding:0;margin:.8em 0 .5em}
.w-steps li{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;gap:.25em;font-family:'Cinzel',serif;font-size:.72em;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.w-steps li img{position:relative;z-index:1;width:2.6em;height:2.6em}
.w-steps li:not(:first-child)::before{content:"";position:absolute;top:1.3em;right:50%;width:100%;height:1px;background:var(--gold2)}
.w-steps li.on{color:var(--head)}
.w-steps li.denied.on{color:var(--b-den)}

.w-gallery{overflow:auto;columns:var(--cols,3) 13em;column-gap:1.1em;padding:.3em}
.w-gallery.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:1.25em;text-align:center}
.w-photo{break-inside:avoid;margin:0 0 1.1em;padding:.55em .55em .2em;background:var(--card);border:1.5px solid var(--gold2);border-radius:16px;box-shadow:0 10px 24px -14px rgba(16,33,60,.35)}
.w-photo button{all:unset;display:block;width:100%;cursor:zoom-in;border-radius:10px;overflow:hidden}
.w-photo img{display:block;width:100%;height:auto;transition:transform .35s}
.w-photo button:hover img{transform:scale(1.03)}
.w-photo button:focus-visible{outline:2px solid var(--sky)}
.w-photo figcaption{font-family:'Pinyon Script',cursive;font-size:1.35em;color:var(--accent);text-align:center;padding:.15em .3em .25em}

.w-message{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2em 2.4em;gap:.5em}
.w-message h2{font-size:1.8em;margin:.2em 0 0}
.w-message-body{font-size:1.2em;line-height:1.45;max-width:30em}
.w-message .vxbtn{width:auto;height:2.9em;font-size:.9em;margin-top:.6em}

/* frames you upload (ornate PNG frames sit behind the content) */
.el-frame{position:absolute;inset:0;z-index:0;object-fit:fill;pointer-events:none}
.has-frame>.wd,.has-frame>.sh,.has-frame>.el-link{position:relative;z-index:1}
.has-frame>.wd{padding:calc(var(--fpt,40) * var(--u)) calc(var(--fp,40) * var(--u)) calc(var(--fp,40) * var(--u))}
.is-plain .sh,.is-plain .wd>*{background:none!important;border-color:transparent!important;box-shadow:none!important}
.is-plain .sh::before,.is-plain .wd>*::before{display:none}

/* gentle floating (islands, stickers) */
.anim-float>*{animation:vxfloat 7s ease-in-out infinite;will-change:transform}
.anim-float:nth-of-type(2n)>*{animation-duration:9s;animation-delay:-3s}
@keyframes vxfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-14 * var(--u)))}}

/* socials */
.w-socials{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6em}
.so{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45em;color:var(--head);text-decoration:none;background:var(--pearl);border:1.5px solid var(--gold);transition:transform .15s,background .15s,color .15s;box-shadow:0 6px 14px -8px rgba(16,33,60,.45)}
.so .so-ic{width:1.35em;height:1.35em;flex:none}
.so-icons .so{width:2.7em;height:2.7em;border-radius:50%}
.so-icons .so-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.so-labels .so{padding:.5em 1.1em;border-radius:999px;font-family:'Cinzel',serif;font-weight:600;font-size:.82em}
a.so:hover{transform:translateY(-2px);background:var(--navyglass);color:var(--parch)}
.so-soon{opacity:.45;cursor:default}

/* ── lightbox ── */
.vx-lb{position:fixed;inset:0;z-index:9000;background:rgba(14,22,40,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px}
.vx-lb img{max-width:min(92vw,1600px);max-height:80vh;border-radius:12px;border:2px solid var(--gold2);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.vx-lb p{margin:0;color:var(--parch);font-family:'Pinyon Script',cursive;font-size:30px;text-align:center}
.vx-lb button{all:unset;cursor:pointer;position:absolute;color:var(--parch);font:30px system-ui;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12)}
.vx-lb button:hover{background:rgba(255,255,255,.25)}
.vx-lb .x{top:16px;right:16px}.vx-lb .pv{left:16px;top:50%}.vx-lb .nx{right:16px;top:50%}

/* ── music ── */
.vx-music{position:fixed;left:14px;bottom:14px;z-index:5000;display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;
  background:var(--chip);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold2);box-shadow:0 8px 24px -12px rgba(16,33,60,.4);
  font:600 12px 'Cinzel',serif;color:var(--head)}
.vx-music button{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--parch);background:var(--navyglass);border:1px solid var(--gold)}
.vx-music button.sm{width:26px;height:26px;background:none;color:var(--head);border:0;font-size:14px}
.vx-music button:focus-visible{outline:2px solid var(--sky)}
.vx-music .t{max-width:170px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.vx-music input{width:72px;accent-color:var(--gold)}
.vx-music.off .t{opacity:.6}
.vx-music.off input,.vx-music.off .sm{display:none}

/* ── phones: elements stack in reading order instead of the free layout ── */
@media (max-width:820px){
  .vx-canvas{--u:1px;height:auto!important;display:flex;flex-direction:column;align-items:center;gap:14px;padding:12px 14px 80px}
  .vx-g{order:-1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px;width:100%;padding:10px 8px;margin-bottom:4px;border-radius:22px;
    background:var(--chip);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold2)}
  .el{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;order:var(--ord)}
  .m-hide{display:none!important}
  .vx-g .el-image{order:-2}
  .vx-g .el-text{order:-1;width:100%}
  .vx-canvas{background:linear-gradient(var(--veil),var(--veil)) 0 0/100% 100%;border-radius:0}
  .el-text .tx-in{text-shadow:var(--halo)}
  .tx-in{font-size:calc(var(--fs) * .62px + 5px)}
  .vx-g .el{width:auto}
  .vx-g .tx-in{font-size:calc(var(--fs) * .5px + 4px)}
  .el-button{width:auto;max-width:100%}
  .el-button .vxbtn{height:auto;min-height:48px;padding:.55em 1.4em;font-size:calc(var(--fs) * .7px + 4px)}
  .vx-g .el-button .vxbtn{min-height:38px;padding:.3em .6em}
  .el-image{width:calc(var(--w) * 1px);max-width:100%;height:auto;aspect-ratio:var(--ar)}
  .el-image.el-small{max-width:96px}
  .vx-g .el-image{width:min(calc(var(--w) * .85px),210px);max-width:none}
  .el-shape{display:none}
  .el-widget{height:auto}
  .wd>*{height:auto}
  .el-w-user .wd>*{height:52px}
  .el-w-user{width:auto;height:52px}
  .el-w-app{max-width:420px;height:auto}
  .wd{font-size:calc(16px * var(--ts,1))}
  .w-rules-box{max-height:60vh}
  .w-form,.w-status,.w-gallery{overflow:visible}
  .w-form{padding:1.3em 1.1em}
  .w-letter{flex-direction:column;align-items:center;text-align:center}
  .w-letter-top{justify-content:center}
  .w-gallery{columns:2 9em}
  .vx-music .t,.vx-music input{display:none}
  .el-frame{display:none}
  .has-frame>.wd{padding:0}
  .is-plain .sh,.is-plain .wd>*{background:var(--pearl)!important;border-color:var(--gold2)!important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ── dark mode: moonlit scene ── */
.vx-bg::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%,rgba(255,255,255,.9),transparent 60%),radial-gradient(1px 1px at 27% 9%,#fff,transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 22%,rgba(255,255,255,.8),transparent 60%),radial-gradient(1px 1px at 63% 12%,#fff,transparent 60%),
    radial-gradient(2px 2px at 78% 26%,rgba(255,245,220,.9),transparent 60%),radial-gradient(1px 1px at 88% 8%,#fff,transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 38%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 95% 40%,#fff,transparent 60%),
    linear-gradient(180deg,rgba(8,18,58,.62),rgba(16,30,78,.42) 45%,rgba(6,12,38,.68))}
[data-theme="dark"] .vx-bg{filter:brightness(.6) saturate(.75) hue-rotate(12deg) contrast(1.05)}
[data-theme="dark"] .vx-bg::after{opacity:1}
.vx-bg-night{display:none}
[data-theme="dark"] .vx-bg-night{display:block;filter:none}
[data-theme="dark"] .vx-bg-night::after{opacity:.35}
[data-theme="dark"] .vx-bg.has-night{display:none}
[data-theme="dark"] .el-image:not(.on-light) img{filter:brightness(.88) saturate(.92)}
[data-theme="dark"] .el-image.el-shadow img{filter:brightness(.88) drop-shadow(0 8px 14px rgba(0,0,0,.4))}
@media (min-width:821px){[data-theme="dark"] .has-frame .el-frame{filter:drop-shadow(0 0 22px rgba(232,211,160,.28))}}
[data-theme="dark"] .sh-pearl,[data-theme="dark"] .w-app,[data-theme="dark"] .w-letter,[data-theme="dark"] .w-form,[data-theme="dark"] .w-message,[data-theme="dark"] .w-rules{box-shadow:0 14px 34px -14px rgba(0,0,0,.6),inset 0 0 0 7px rgba(232,211,160,.06)}
[data-theme="dark"] .vb-link .bt{text-shadow:var(--halo)}
.vx-theme{all:unset;position:fixed;right:14px;bottom:14px;z-index:5000;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:var(--chip);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--gold2);box-shadow:0 8px 24px -12px rgba(16,33,60,.4);color:var(--head)}
.vx-theme svg{width:22px;height:22px}
.vx-theme:hover{border-color:var(--gold)}
.vx-theme:focus-visible{outline:2px solid var(--sky)}

/* ══ Flip-book (rulebook & donator terms) ══ */
.w-book{position:relative;display:flex;flex-direction:column;gap:.7em;height:100%}
.w-book template{display:none}
.bk-bar{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.6em}
.bk-tool{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:.4em;padding:.45em 1.1em;border-radius:999px;background:var(--btn2);border:1.5px solid var(--gold);color:var(--head);font:600 .82em 'Cinzel',serif;box-shadow:0 6px 14px -8px rgba(16,33,60,.45)}
.bk-tool:hover{filter:brightness(1.06)}
.bk-tool:focus-visible{outline:2px solid var(--sky)}
.bk-tool:disabled{opacity:.4;cursor:default}
.bk-mnav{display:none;font-size:1.25em;padding:.15em .95em}
.bk-search{position:relative;flex:0 1 26em}
.bk-search input{width:100%;font:500 .98em 'Cormorant Garamond',serif;color:var(--ink);background:var(--field);border:1.5px solid var(--gold2);border-radius:999px;padding:.5em 1.15em}
.bk-search input:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(108,184,232,.3)}
.bk-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:50;list-style:none;margin:0;padding:0;background:var(--card);border:1.5px solid var(--gold2);border-radius:14px;box-shadow:0 16px 34px -12px rgba(16,33,60,.45);max-height:22em;overflow-y:auto}
.bk-results:empty{display:none}
.bk-results button{all:unset;box-sizing:border-box;display:block;width:100%;padding:.55em .9em;cursor:pointer;font:500 .95em/1.3 'Cormorant Garamond',serif;color:var(--ink)}
.bk-results button:hover,.bk-results button:focus-visible{background:rgba(201,164,91,.18)}
.bk-results b{font-family:'Cinzel',serif;color:#a8853c;margin-right:.35em}
.bk-none{padding:.6em .9em;font-style:italic;color:var(--muted)}
.bk-count{font:600 .78em 'Cinzel',serif;letter-spacing:.08em;color:var(--head);min-width:11em;text-align:center;text-shadow:var(--halo)}
.bk-shell{flex:1;min-height:0;display:flex;align-items:center;gap:.8em}
.bk-static{height:100%}
.bk-arrow{all:unset;box-sizing:border-box;cursor:pointer;flex:none;width:2.9em;height:2.9em;display:grid;place-items:center;border-radius:50%;font-size:1.35em;line-height:1;color:var(--parch);background:var(--navyglass);border:2px solid var(--gold);box-shadow:0 10px 22px -10px rgba(20,34,59,.7);transition:transform .15s,opacity .15s}
.bk-arrow:hover{transform:scale(1.07)}
.bk-arrow:disabled{opacity:.3;cursor:default;transform:none}
.bk-arrow:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.bk-book{position:relative;flex:1;height:100%;min-width:0;padding:1.05em;border-radius:1.1em;
  background:radial-gradient(120% 90% at 30% 10%,#2b4373,#17284a 55%,#0e1830);border:2px solid var(--gold);
  box-shadow:0 26px 50px -22px rgba(10,18,40,.75),inset 0 0 0 1px rgba(255,255,255,.08)}
.bk-book::before{content:"";position:absolute;inset:.42em;border:1px solid rgba(232,211,160,.55);border-radius:.8em;pointer-events:none}
.bk-spread{position:relative;display:flex;height:100%;perspective:2800px}
.bk-page{position:relative;flex:1;min-width:0;overflow:hidden;color:#2a2418;font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;
  background:radial-gradient(130% 100% at 50% 40%,#fffbf2,#f6ecd6 62%,#ead9b4)}
.bk-l{border-radius:.55em 0 0 .55em;box-shadow:-2px 1px 0 #efe3c6,-4px 2px 0 #e1d0a8,-6px 3px 0 #cdb98c;
  background:linear-gradient(to left,rgba(90,64,20,.24),rgba(90,64,20,.06) 5%,transparent 13%),radial-gradient(130% 100% at 50% 40%,#fffbf2,#f6ecd6 62%,#ead9b4)}
.bk-r{border-radius:0 .55em .55em 0;box-shadow:2px 1px 0 #efe3c6,4px 2px 0 #e1d0a8,6px 3px 0 #cdb98c;
  background:linear-gradient(to right,rgba(90,64,20,.24),rgba(90,64,20,.06) 5%,transparent 13%),radial-gradient(130% 100% at 50% 40%,#fffbf2,#f6ecd6 62%,#ead9b4)}
.bk-s,.bk-single .bk-l{border-radius:.55em;box-shadow:2px 2px 0 #efe3c6,4px 4px 0 #e1d0a8;
  background:linear-gradient(to right,rgba(90,64,20,.16),transparent 6%),radial-gradient(130% 100% at 50% 40%,#fffbf2,#f6ecd6 62%,#ead9b4)}
.bk-single .bk-r{display:none}
.bk-in{position:absolute;inset:2em 2.3em 1.6em;display:flex;flex-direction:column}
.bk-run{height:1.6em;flex:none;font:600 .66em 'Cinzel',serif;letter-spacing:.18em;text-transform:uppercase;color:#a8853c;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-body{flex:1;min-height:0;overflow:hidden;font-size:1.03em;line-height:1.42}
.bk-tall .bk-body{overflow-y:auto}
.bk-foot{height:1.7em;flex:none;padding-top:.35em;text-align:center;font:600 .7em 'Cinzel',serif;color:#a8853c;letter-spacing:.1em}
.bk-measure{position:absolute!important;left:0;top:0;visibility:hidden;pointer-events:none}
.bk-b{margin:0 0 .5em}
.bk-p{margin:0 0 .6em}
.bk-ch{text-align:center;margin:.1em 0 .9em}
.bk-chn{font:600 .7em 'Cinzel',serif;letter-spacing:.3em;text-transform:uppercase;color:#a8853c}
.bk-ch h3{font:600 1.5em/1.15 'Cinzel',serif;color:#14223B;margin:.2em 0 .15em}
.bk-tag{font-style:italic;font-size:1.02em;color:#4a5878}
.bk-chd{display:block;width:60%;max-width:16em;height:auto;margin:.4em auto 0}
.bk-h{font:600 .95em 'Cinzel',serif;letter-spacing:.06em;text-transform:uppercase;color:#253B63;margin:.95em 0 .45em;padding-bottom:.25em;border-bottom:1px solid #d9c48f}
.bk-h3{font-style:italic;font-weight:700;font-size:1.08em;color:#7d5f1c;margin:.75em 0 .3em}
.bk-rule{display:flex;gap:.6em;align-items:baseline;margin:0 -.3em .4em;padding:.12em .3em;border-radius:.4em}
.bk-num{flex:none;min-width:2.6em;font:700 .78em 'Cinzel',serif;color:#a8853c;text-decoration:none;cursor:copy}
.bk-num:hover,.bk-num:focus-visible{color:#253B63;text-decoration:underline}
.bk-rt{flex:1;min-width:0}
.bk-sub{margin:.2em 0 0;padding-left:1.3em}
.bk-sub li{margin:.12em 0}
.bk-ul{margin:.2em 0 .7em;padding-left:1.3em}
.bk-ul li{margin:.1em 0}
.bk-ul li::marker{color:#c9a45b}
.bk-cols{columns:3 7em;column-gap:1.2em}
.bk-note{margin:.4em 0 .8em;padding:.45em .8em;border-left:3px solid #c9a45b;background:rgba(201,164,91,.12);border-radius:0 .5em .5em 0;font-style:italic;color:#3a4a68}
.bk-hl{animation:bkhl 3s ease}
@keyframes bkhl{0%,40%{background:rgba(108,184,232,.32);box-shadow:0 0 0 2px rgba(201,164,91,.7)}100%{background:transparent;box-shadow:0 0 0 0 transparent}}
.bk-cover{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.25em}
.bk-logo{width:74%;max-width:20em;height:auto}
.bk-ct{font:600 1.6em/1.15 'Cinzel',serif;color:#14223B;margin-top:.35em}
.bk-cdiv{width:55%;max-width:15em;height:auto}
.bk-cs{font-family:'Pinyon Script',cursive;font-size:1.55em;color:#253B63;line-height:1.2}
.bk-ce{font:600 .68em 'Cinzel',serif;letter-spacing:.2em;text-transform:uppercase;color:#a8853c}
.bk-seal{width:36%;max-width:9em;height:auto;margin-top:.5em}
.bk-turn{font-style:italic;font-size:.92em;color:#7d5f1c;margin-top:.2em}
.bk-ih{font:600 1.45em 'Cinzel',serif;text-align:center;color:#14223B;margin:.1em 0 .7em}
.bk-index{list-style:none;margin:0;padding:0}
.bk-index li{margin:.1em 0}
.bk-index a{display:flex;align-items:baseline;gap:.45em;padding:.38em .35em;color:#14223B;text-decoration:none;border-radius:.4em;font-size:1.04em}
.bk-index a:hover,.bk-index a:focus-visible{background:rgba(201,164,91,.16)}
.bk-in-n{font:600 .85em 'Cinzel',serif;color:#a8853c;min-width:2.4em}
.bk-in-t{font-weight:700}
.bk-dots{flex:1;min-width:1em;border-bottom:1.5px dotted #c9b07a;transform:translateY(-.25em)}
.bk-in-p{font:600 .85em 'Cinzel',serif;color:#253B63}
.bk-end{height:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.45em;padding:0 .5em}
.bk-end h3{font:600 1.45em 'Cinzel',serif;color:#14223B;margin:.15em 0}
.bk-end p{margin:0 0 .5em;color:#3a4a68}
.bk-end form{display:flex;flex-direction:column;align-items:center;gap:.75em}
.bk-end .vx-check{text-align:left;font-size:1em;max-width:22em}
.bk-end .vxbtn{width:auto;height:2.9em;font-size:.88em}
.bk-end .hint{margin:0;color:#6b5a3a}
.bk-endseal{width:5.4em;height:auto;filter:drop-shadow(0 6px 10px rgba(16,33,60,.3))}
.bk-blank-art{display:block;width:62%;height:auto;margin:45% auto 0;opacity:.55}
.bk-noscript{max-height:70vh;overflow:auto;padding:1.5em;color:#2a2418;background:#f6ecd6;border:2px solid var(--gold);border-radius:1em}
/* turning page */
.bk-leaf{position:absolute;top:0;bottom:0;width:50%;z-index:6;transform-style:preserve-3d;pointer-events:none}
.bk-leaf.fwd{left:50%;transform-origin:left center}
.bk-leaf.back{left:0;transform-origin:right center}
.bk-leaf.single{left:0;width:100%;transform-origin:left center}
.bk-face{position:absolute!important;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.bk-backface{transform:rotateY(180deg)}
.bk-shade{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(90deg,rgba(40,28,8,.55),rgba(40,28,8,.08) 40%,rgba(255,255,255,.3) 72%,rgba(40,28,8,.28))}
/* page corners you can click */
.bk-corner{all:unset;position:absolute;bottom:0;z-index:4;width:3.4em;height:3.4em;cursor:pointer}
.bk-corner::after{content:"";position:absolute;bottom:0;width:0;height:0;border-style:solid;transition:border-width .2s;filter:drop-shadow(-1px -1px 2px rgba(60,40,10,.25))}
.bk-corner-r{right:0}
.bk-corner-r::after{right:0;border-width:0 0 1.3em 1.3em;border-color:transparent transparent #e4cf9c transparent}
.bk-corner-l{left:0}
.bk-corner-l::after{left:0;border-width:0 1.3em 1.3em 0;border-color:transparent transparent #e4cf9c transparent}
.bk-corner:hover::after{border-width:0 0 2.2em 2.2em}
.bk-corner-l:hover::after{border-width:0 2.2em 2.2em 0}
.bk-corner:disabled{display:none}
.bk-corner:focus-visible::after{border-bottom-color:#6CB8E8}
.vx-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:9500;padding:.65em 1.3em;border-radius:999px;background:var(--navyglass);color:var(--parch);border:1.5px solid var(--gold);font:600 14px 'Cinzel',serif;letter-spacing:.03em;transition:opacity .25s,transform .25s;pointer-events:none;max-width:90vw;text-align:center}
.vx-toast.show{opacity:1;transform:translate(-50%,0)}

/* ══ Tebex store box ══ */
.w-tebex{display:flex;align-items:center;gap:1.4em;height:100%;padding:1.3em 1.8em;background:var(--pearl);border:2px solid var(--gold2);border-radius:calc(28 * var(--u));box-shadow:0 14px 34px -14px rgba(16,33,60,.32)}
.w-tebex-ic{width:8.5em;height:auto;flex:none;filter:drop-shadow(0 6px 10px rgba(16,33,60,.2))}
.w-tebex-b{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:.55em}
.w-tebex h3{font-size:1.4em;margin:0}
.w-tebex p{margin:0;color:var(--ink2)}
.w-tebex .vxbtn{width:auto;height:3em;font-size:.88em}

/* ══ Credits ══ */
.w-credits{height:100%;overflow:auto;padding:1.8em 2em;background:var(--pearl);border:2px solid var(--gold2);border-radius:calc(28 * var(--u));box-shadow:0 14px 34px -14px rgba(16,33,60,.32)}
.w-credits section{text-align:center}
.w-credits h2{font-size:1.6em;margin:.1em 0 .2em}
.cr-lead{margin:0 0 1.1em;color:var(--ink2);font-size:1.08em}
.cr-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1em}
.cr-card{flex:0 1 14em;display:flex;flex-direction:column;align-items:center;gap:.2em;padding:1em .8em;border-radius:18px;background:var(--card);border:1.5px solid var(--gold2);color:var(--ink);text-decoration:none;box-shadow:0 10px 22px -14px rgba(16,33,60,.4);transition:transform .15s,border-color .15s}
a.cr-card:hover{transform:translateY(-3px);border-color:var(--gold)}
.cr-ic{width:4.3em;height:auto}
.cr-n{font:600 1.08em 'Cinzel',serif;color:var(--head)}
.cr-r{color:var(--ink2);font-style:italic}
.cr-l{margin-top:.3em;font:600 .76em 'Cinzel',serif;color:#a8853c;letter-spacing:.06em}
.w-credits .w-div{margin:1.6em auto}
.cr-empty{text-align:center}

@media (max-width:820px){
  .vx-canvas .el-w-book .wd>*{height:min(84vh,720px)}
  .bk-arrow{display:none}
  .bk-mnav{display:inline-flex}
  .bk-search{flex:1 1 100%;order:5}
  .bk-count{min-width:0;flex:1}
  .bk-book{padding:.55em}
  .bk-in{inset:1.3em 1.25em 1.1em}
  .bk-cols{columns:2}
  .w-tebex{flex-direction:column;text-align:center}
  .w-tebex-b{align-items:center}
  .w-credits{overflow:visible;padding:1.3em 1em}
}

/* dropdown lists: readable in light and dark mode */
.wd select option{background:#fffdf8;color:#14223B}
[data-theme="dark"] .wd select option{background:#17223b;color:#F4ECDD}
.wd select option:checked{background:#C9A45B;color:#14223B}