:root{color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:#06070d;color:#eae7f0}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(ellipse at 50% 25%,#172039 0%,#0b101b 36%,#06070d 78%)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
.vault-screen{width:min(100%,1120px);min-height:100svh;margin:auto;padding:16px clamp(12px,3vw,38px) max(24px,env(safe-area-inset-bottom))}
.masthead,footer{display:flex;align-items:center;justify-content:space-between;gap:16px}
.masthead{padding:8px 2px 24px;border-bottom:1px solid #303446}
.brand{font-size:.86rem;font-weight:800;letter-spacing:.16em;color:#e1d5fa;text-decoration:none}
.chapter,.eyebrow{font-size:.67rem;letter-spacing:.25em;text-transform:uppercase;color:#aca3c6}.chapter a{font-size:.8rem;letter-spacing:.02em;color:#a6e4e1;text-decoration:none;margin-left:10px}
.gateway{text-align:center;margin:clamp(16px,3.5vh,44px) auto 24px}
.gateway h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2rem,6vw,4.2rem);font-weight:400;letter-spacing:.025em;margin:8px 0 4px}
.state-message{min-height:48px;color:#bbb9c9;margin:4px 0 15px;font-size:clamp(.88rem,2.1vw,1.04rem);line-height:1.5}
.wall-frame{position:relative;isolation:isolate;overflow:hidden;border-radius:13px;border:5px solid #252331;box-shadow:0 25px 65px #000c,0 0 70px #1a214d45,inset 0 0 40px #000b}
.wall{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));aspect-ratio:1.83/1;position:relative;z-index:2;background:#07080c;user-select:none;-webkit-user-select:none;touch-action:manipulation}
.brick{position:relative;appearance:none;border:1px solid #11151c;border-bottom-color:#06080d;border-radius:2px;min-width:0;padding:0;margin:0;background:linear-gradient(145deg,#46444d 0%,#262832 40%,#181c24 93%);box-shadow:inset 2px 2px 6px #73758120,inset -3px -5px 8px #000a,1px 2px 2px #0009;cursor:pointer;transform:translate(0,0);transition:transform 1.6s cubic-bezier(.23,.8,.2,1),opacity 1.4s ease,filter .2s ease}
.brick:nth-child(3n){background:linear-gradient(155deg,#373944,#262731 39%,#151721)}
.brick:nth-child(7n){background:linear-gradient(145deg,#55525b,#292831 48%,#1b1d28)}
.brick:nth-child(5n){filter:brightness(.85)}
.brick::before{content:"";position:absolute;inset:3px;border-top:1px solid #c5bcc315;border-left:1px solid #b0a8b40a;border-radius:1px;pointer-events:none}
.brick:focus-visible{outline:3px solid #8ad1ce;outline-offset:-4px;z-index:4}
.brick:active{filter:brightness(1.35)}
.glyph{opacity:0;pointer-events:none;position:absolute;inset:0;display:grid;place-items:center;text-shadow:0 0 10px #86ddea,0 0 21px #7658ee;color:#a7f8ee;font-family:Georgia,serif;font-size:clamp(14px,3.4vw,35px);transition:opacity .35s ease}
.wall.awakened .glyph{opacity:1}
.wall.awakened .brick:has(.glyph){box-shadow:inset 0 0 15px #5a54a755,0 0 9px #41878530}
.wall.awakened .brick.chosen .glyph{color:#f0d2ff;text-shadow:0 0 13px #ca87ff,0 0 23px #8030c4}
.world-beyond{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .7s;background:radial-gradient(ellipse at 45% 45%,#f5d8ff 0%,#8ac5ed 8%,#663e9f 21%,#193a68 37%,#0b162b 62%,#060711 90%),repeating-conic-gradient(from 20deg,#09ffe0,#614af2,#46b4ff,#09ffe0);box-shadow:inset 0 0 130px #000}
.wall-frame.opening .world-beyond{opacity:1}
.wall-frame.opening .brick{transform:translate(var(--leave-x),var(--leave-y)) rotate(var(--twist));opacity:0;pointer-events:none}
.wall-shadow{pointer-events:none;position:absolute;inset:0;z-index:3;box-shadow:inset 0 0 32px 13px #020309b3}
.sigil-progress{min-height:25px;margin:13px auto 0;letter-spacing:.18em;font-size:.89rem;color:#c5d7ee}
.message{color:#ffc4c4;font-size:.92rem;max-width:560px;margin:14px auto}
.actions{min-height:48px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px auto 12px}
.action{cursor:pointer;min-height:43px;padding:10px 18px;background:linear-gradient(110deg,#45528b,#554477);border:1px solid #8f89be;border-radius:9px;color:#f7f3ff;font-weight:650;letter-spacing:.015em}
.action.outline{background:#171824;color:#d2cde1;border-color:#424357}
.action[hidden],.owner-guide[hidden],.message[hidden],.sigil-progress[hidden]{display:none}
.action:disabled{opacity:.5;cursor:wait}
.owner-guide{margin:15px auto 0;max-width:620px;text-align:left;border:1px solid #50465d;background:#0d0b17b8;border-radius:13px;padding:16px;line-height:1.5;color:#d6d0e6}
.owner-guide h2{font-size:1rem;margin:0 0 6px;color:#e6d3fb}
.owner-guide p{margin:8px 0}
footer{padding-top:25px;border-top:1px solid #2a2a3e;color:#827f99;font-size:.75rem}
footer a{color:#c9b9e2;text-decoration:none}
@media(max-width:640px){.masthead{padding-bottom:15px}.chapter{letter-spacing:.13em}.gateway{margin-top:24px}.gateway h1{font-size:2.25rem}.wall-frame{border-width:3px}.wall{aspect-ratio:1.18/1}.brick{box-shadow:inset 1px 1px 4px #a9b8bf22,inset -2px -4px 7px #0009}footer span{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Tap/click controls keep native panning, pinch zoom and browser navigation. */
.wall{touch-action:manipulation}
.brick{-webkit-touch-callout:none}
.wall-help{max-width:640px;margin:22px auto 12px;font-size:.84rem;line-height:1.6}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.actions:not(:has(:not([hidden]))){display:none}
.hold-meter{position:absolute;inset:auto 8% 12%;height:4px;border-radius:2px;background:#0b172a99;overflow:hidden;opacity:0;pointer-events:none}
.hold-fill{display:block;width:100%;height:100%;background:#bcf6ff;transform:scaleX(0);transform-origin:left}
.brick.holding .hold-meter,.brick.hold-complete .hold-meter{opacity:1}
.brick.hold-complete .hold-fill{transform:scaleX(1)}
.cosmic-vault .wall-frame .brick,.brick{transition:transform 800ms cubic-bezier(.23,.8,.2,1),opacity 700ms ease}
.cosmic-vault .wall-frame .brick:active,.cosmic-vault .wall-frame .brick.chosen,.cosmic-vault .wall-frame .brick.holding{filter:none}
.cosmic-vault .brick.holding,.cosmic-vault .brick.hold-complete{outline:2px solid #bcf6ff;outline-offset:-3px}
.cosmic-vault .brick:disabled{opacity:1;cursor:default}
.cosmic-vault .wall-frame.opening .brick{opacity:0;will-change:transform,opacity}
.cosmic-vault .wall-frame.opening .wall{background:transparent}
.cosmic-vault .wall-frame.opening .wall::before{opacity:0}
.cosmic-vault .wall-frame .wall::before{animation:none!important;transform:translate3d(0,0,0);opacity:.8}
.cosmic-vault .wall .glyph{transition:opacity 160ms ease}
.cosmic-vault .wall{min-height:288px}
@media(max-width:380px){.cosmic-vault .vault-screen{padding-left:8px;padding-right:8px}.cosmic-vault .wall{gap:1px}.cosmic-vault .wall-frame{padding:3px}}
@media(prefers-reduced-motion:reduce){.cosmic-vault .brick,.cosmic-vault .glyph{transition:none!important}}


/* Selected stones remain gold for the current sequence. */
.brick.tapped,body.cosmic-vault .wall-frame .wall .brick.tapped{
 background:radial-gradient(ellipse at 50% 0%,#fffde9 0%,#fff694b3 30%,transparent 72%),linear-gradient(135deg,#fff18b,#ffd21c 42%,#ffb900 75%,#ffdf4f);
 border-color:#fff8b0;border-bottom-color:#ffd629;
 box-shadow:inset 0 0 3px #ffffe8,inset 0 0 12px #fff276cc,0 0 10px #ffe329e6,0 0 22px #ffbe008c;
 filter:none;
}
body.cosmic-vault .wall-frame .wall .brick.tapped::before{
 background:linear-gradient(115deg,transparent 15%,#fffde880 38%,transparent 60%);
 border-color:#fffcd0a6;box-shadow:inset 0 1px 3px #fffde999;
}
body.cosmic-vault .wall-frame .wall .brick.tapped .glyph{color:#5a3610;text-shadow:none}