:root { color-scheme:dark; --ink:#101719; --paper:#f4ecdf; --muted:#aaa397; --line:#d8c9ad; --amber:#d6ad5b; --burgundy:#7a3e48; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; min-height:100svh; position:relative; color:var(--paper); background:radial-gradient(circle at 50% -5%, #77603a3b 0, transparent 36%),radial-gradient(circle at 8% 82%, #743c4624 0, transparent 31%),linear-gradient(145deg,#172226 0,#0e171a 52%,#080e11 100%); font-family:"Avenir Next",Avenir,ui-rounded,sans-serif; display:flex; flex-direction:column; }
body:not(.studio-mode)::before { content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.25; background-image:repeating-linear-gradient(112deg,transparent 0 17px,#f4ecdf08 18px,transparent 19px 31px); mix-blend-mode:soft-light; }
body:not(.studio-mode)::after { content:""; position:fixed; inset:12px; z-index:0; pointer-events:none; border:1px solid #d6ad5b24; box-shadow:inset 0 0 80px #0005; }
body:not(.studio-mode)>* { position:relative; z-index:1; }
.app-shell { width:min(100%, 620px); margin:0 auto; padding:22px 22px 28px; flex:1; display:flex; flex-direction:column; }
.experience-screen { width:min(100%, 680px); min-height:calc(100svh - 48px); margin:0 auto; padding:22px; flex:1; display:flex; flex-direction:column; }
.experience-card { position:relative; margin:auto 0; padding:clamp(42px,9vw,72px) clamp(28px,9vw,72px); overflow:hidden; text-align:center; border:1px solid #d6ad5b75; border-radius:2px; background:linear-gradient(145deg,#253033d9,#10191cde); box-shadow:inset 0 0 70px #d6ad5b0b,0 28px 80px #0008; }
.experience-card::before { content:""; position:absolute; inset:10px; pointer-events:none; border:1px solid #d6ad5b2c; }
.experience-card::after { content:"✦"; position:absolute; top:4px; left:50%; width:42px; transform:translateX(-50%); color:var(--amber); background:#182225; font-size:.74rem; line-height:14px; }
.experience-card .lede { max-width:390px; margin-left:auto; margin-right:auto; }
.experience-button { min-width:144px; min-height:48px; margin-top:32px; padding:12px 24px; border:1px solid #f0d28b; border-radius:2px; color:#1b1a15; background:linear-gradient(#e2c477,#c99d49); font:inherit; font-size:.72rem; font-weight:900; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; box-shadow:0 8px 28px #d6ad5b30; }
.experience-button:hover { background:linear-gradient(#efd58e,#d6ad5b); }
.experience-button:focus-visible { outline:2px solid #fff; outline-offset:3px; }
.experience-button.secondary { color:#eadfcf; background:#222b2d; border-color:#9e8356; box-shadow:none; }
.wedding-reveal { width:min(100%,330px); margin:30px auto 0; padding:17px 22px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-top:1px solid #d6ad5b66; border-bottom:1px solid #d6ad5b66; color:#d6ad5b; }
.wedding-reveal span { font-size:.62rem; font-weight:900; letter-spacing:.22em; }
.wedding-reveal strong { color:var(--paper); font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:1.22rem; font-weight:400; font-style:italic; }
.final-time { display:inline-flex; flex-direction:column; gap:5px; margin-top:26px; padding:0 18px; color:var(--muted); }
.final-time span { font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.final-time strong { color:var(--paper); font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:2.7rem; font-weight:400; letter-spacing:.02em; }
header { display:flex; align-items:center; justify-content:space-between; }
.brand { color:var(--paper); text-decoration:none; letter-spacing:.18em; font-size:.68rem; font-weight:800; display:flex; align-items:center; gap:11px; }
.brand span { position:relative; width:25px; height:16px; border:0; border-radius:0; box-shadow:none; }
.brand span::before,.brand span::after { content:""; position:absolute; top:1px; width:12px; height:12px; border:1.5px solid var(--amber); border-radius:50%; box-shadow:0 0 12px #d6ad5b4d; }
.brand span::before { left:2px; }.brand span::after { right:2px; }
.icon-button { color:#d5c6ad; background:#131d20b8; border:1px solid #9e835688; border-radius:50%; width:36px; height:36px; font-size:1rem; cursor:pointer; }
.intro { margin:clamp(36px,7vh,66px) 0 18px; text-align:center; }
.eyebrow { margin:0 0 13px; color:var(--amber); font-size:.64rem; letter-spacing:.25em; font-weight:900; text-transform:uppercase; }
.unlocked-badge { width:max-content; margin:-4px auto 14px; padding:5px 9px; color:#e8d39a; border:1px solid #d6ad5b66; background:#171e1fd9; font-size:.55rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1 { font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif; font-weight:400; font-size:clamp(2.4rem,8vw,4rem); line-height:.98; letter-spacing:-.035em; margin:0; }
.lede { color:#c1b8a9; max-width:330px; font-family:Baskerville,"Iowan Old Style","Palatino Linotype",Georgia,serif; font-size:1.12rem; font-style:italic; line-height:1.5; margin:20px 0 0; }
.panel-area { margin:auto 0 12px; }
.puzzle-frame { width:min(88vw, 420px); aspect-ratio:1; margin:0 auto; position:relative; background:#13262d88; border:1px solid #71909955; border-radius:8px; box-shadow:inset 0 0 42px #7ab4aa12, 0 20px 50px #0006; overflow:hidden; touch-action:none; }
.puzzle-frame canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#boardCanvas { pointer-events:none; }
#puzzleCanvas { z-index:1; cursor:crosshair; }
.solved-seal { z-index:2; pointer-events:none; opacity:0; position:absolute; inset:50% auto auto 50%; transform:translate(-50%, -50%) scale(.7); width:max-content; min-width:176px; color:#ead18e; background:linear-gradient(145deg,#2a3435f5,#121a1cf5); border:1px solid var(--amber); border-radius:2px; font-weight:900; font-size:.72rem; letter-spacing:.2em; padding:18px; transition:.35s ease; box-shadow:0 0 0 4px #101719,0 0 0 5px #d6ad5b55,0 18px 45px #0009; text-align:center; }
.solved-seal.show { pointer-events:auto; opacity:1; transform:translate(-50%, -50%) scale(1); }
.solved-seal span { display:block; }
.solved-seal button { display:block; width:100%; min-height:40px; margin-top:14px; padding:9px 12px; border:1px solid #efd58e; border-radius:2px; color:#211b12; background:linear-gradient(#e0c173,#c59a49); font:inherit; font-size:.62rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; box-shadow:0 6px 18px #0005; }
.solved-seal button:hover { background:linear-gradient(#efd58e,#d6ad5b); }
.solved-seal button:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.solved-seal button[hidden] { display:none; }
.level-nav { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:10px; margin:18px 0 13px; }
.level-group { display:flex; gap:10px; }
.panel-group { display:grid; grid-template-columns:repeat(6,30px); gap:10px; }
.level { width:35px; height:35px; border-radius:50%; border:1px solid #8b7758; background:#111a1dcc; color:#b8ad9d; font-family:Baskerville,"Iowan Old Style",Georgia,serif; font-size:.76rem; font-weight:700; cursor:pointer; box-shadow:inset 0 0 0 3px #0d1518; }
.level.active { border-color:var(--amber); color:#f0d58f; box-shadow:inset 0 0 0 3px #0d1518,0 0 16px #d6ad5b3d; }.level.done { background:var(--amber); color:#211b12; border-color:#efd48d; box-shadow:inset 0 0 0 3px #b78b3e; }.level.locked,.level:disabled { opacity:.28; cursor:not-allowed; }.panel { width:30px; height:30px; font-family:inherit; font-size:.72rem; }.nav-divider { height:25px; width:1px; background:#8b775866; margin:5px 2px; }
.level.bonus { color:#e8c66f; font-family:inherit; font-size:.82rem; }.level.bonus.done { color:#211b12; }
.reset-button { border:1px solid #8b775866; border-radius:2px; color:#bdb2a2; background:#111a1db3; padding:10px 16px; font:inherit; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; margin:0 auto; cursor:pointer; }
footer { text-align:center; padding:18px; color:#81735f; font-family:Baskerville,"Iowan Old Style",Georgia,serif; font-size:.72rem; font-style:italic; letter-spacing:.08em; } footer a { color:#a08a68; text-decoration:none; }
.empty-player { margin:auto; text-align:center; color:#91a6a5; }.empty-player span { display:block; width:52px; height:52px; border:2px solid var(--amber); border-radius:50%; margin:0 auto 20px; }.empty-player h1 { color:var(--paper); }.empty-player a { display:inline-block; margin-top:18px; color:#182017; background:var(--amber); border-radius:5px; padding:11px 15px; text-decoration:none; font-size:.8rem; font-weight:800; }
@media (min-width:650px) { .app-shell { padding-top:30px; } .panel-area { margin-top:30px; } }
@media (max-width:480px) { body:not(.studio-mode)::after { inset:7px; }.experience-screen,.app-shell { padding:18px; }.experience-card { padding:46px 24px; }.intro { margin:30px 0 16px; }.intro h1 { font-size:clamp(2.15rem,13vw,3.15rem); }.wedding-reveal { padding:15px 10px; gap:12px; }.wedding-reveal strong { font-size:1.08rem; }.level-nav { gap:10px 7px; }.level-group { gap:7px; }.level { width:32px; height:32px; }.panel-group { flex-basis:100%; grid-template-columns:repeat(6,28px); justify-content:center; gap:7px; }.panel { width:28px; height:28px; }.nav-divider { display:none; } }