/* ADVENT calendar page. Dark-only (Samsung dark mode safe): solid dark panels, every picture in WebGL or a canvas. */
html,body{margin:0;height:100%;background:#0b0705;overflow:hidden;color:#fff3e0;font-family:'Outfit',system-ui,sans-serif;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;color-scheme:dark}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
button{font:inherit;color:inherit;cursor:pointer}
#load{position:fixed;inset:0;z-index:30;background:#0b0705;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .8s}
#load p{margin:0;font-size:14px;letter-spacing:.06em;color:#e8c27a}
#load.off{opacity:0;pointer-events:none}
.spin{width:34px;height:34px;border-radius:50%;border:2px solid #3a2a18;border-top-color:#e8c27a;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.pill{border:1px solid rgba(232,194,122,.45);background:rgba(20,12,8,.72);color:#fff3e0;font-size:13px;padding:8px 14px;border-radius:999px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.pill b{color:#f2d18a;font-weight:600}
.topr{display:flex;gap:8px}
.pill.icon{width:38px;height:38px;padding:0;display:flex;align-items:center;justify-content:center}
#mute .x{display:none}
#mute.off .x{display:inline}#mute.off .w{display:none}
#top{position:fixed;left:0;right:0;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 12px) 14px 0;pointer-events:none;opacity:0;transition:opacity .8s}
#top > *{pointer-events:auto}
body.in #top{opacity:1}

#intro{position:fixed;inset:0;z-index:12;display:flex;align-items:flex-end;justify-content:center;padding:0 18px calc(env(safe-area-inset-bottom) + 34px);
  transition:opacity .9s;background:linear-gradient(to top,rgba(8,4,2,.82),rgba(8,4,2,0) 55%)}
#intro.off{opacity:0;pointer-events:none}
.tag{width:100%;max-width:380px;text-align:center;border:1px solid rgba(232,194,122,.55);border-radius:18px;padding:20px 18px 18px;background:rgba(18,10,6,.86)}
.tag .sm,.fin-in .sm,.day{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e8c27a}
.tag h1{margin:6px 0 2px;font:600 46px/1.05 'Cormorant Garamond',serif;color:#fff3e0;overflow-wrap:anywhere}
.tag .from{font:500 26px/1.1 'Caveat',cursive;color:#f2d18a}
.tag .note{margin:12px 0 16px;font-size:14px;color:#e9d9c0;line-height:1.4}
.btn{display:inline-block;text-decoration:none;border:1px solid rgba(232,194,122,.6);background:#22160e;color:#fff3e0;font-size:15px;padding:12px 20px;border-radius:999px}
.btn.gold{background:#e2b95f;border-color:#f3d58a;color:#2a1608;font-weight:600}

.linkbtn{display:block;margin:12px auto 0;background:none;border:0;color:#f2d18a;font:500 14px 'Outfit',sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#remind{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,4,2,.6);opacity:0;pointer-events:none;transition:opacity .4s}
#remind.on{opacity:1;pointer-events:auto}
.rem-in{width:100%;max-width:360px;text-align:center;padding:22px 18px;border-radius:20px;border:1px solid rgba(232,194,122,.55);background:#160c07}
.rem-in .sm{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#e8c27a}
.rem-in p{margin:10px 0 16px;font-size:15px;line-height:1.45;color:#eadbc4}
.rem-in .btn{display:block;margin:0 auto 10px;max-width:260px}
#hint{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 64px);transform:translateX(-50%);z-index:9;font-size:13px;padding:9px 16px;border-radius:999px;
  background:rgba(20,12,8,.78);border:1px solid rgba(232,194,122,.35);white-space:nowrap;opacity:0;transition:opacity .8s;pointer-events:none}
#hint.on{opacity:1}
#toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 64px);transform:translate(-50%,-8px);z-index:14;font-size:14px;padding:11px 18px;border-radius:14px;
  background:#2a1208;border:1px solid rgba(232,194,122,.5);color:#fff3e0;opacity:0;transition:opacity .35s,transform .35s;pointer-events:none;text-align:center;max-width:86vw}
#toast.on{opacity:1;transform:translate(-50%,0)}

#prev{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 12px);transform:translateX(-50%);z-index:9;display:none;gap:6px;align-items:center;
  font-size:11.5px;color:#e9d9c0;background:rgba(20,12,8,.8);border:1px solid rgba(232,194,122,.3);border-radius:999px;padding:5px 6px 5px 12px;white-space:nowrap}
body.in.preview #prev{display:flex}
body.focus #prev,body.focus #hint{opacity:0;pointer-events:none}
.mini{border:1px solid rgba(232,194,122,.45);background:#22160e;border-radius:999px;padding:5px 10px;font-size:11.5px}

#card{position:fixed;inset:0;z-index:15;display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
#card .sheet{width:100%;max-width:440px;max-height:62vh;overflow-y:auto;box-sizing:border-box;padding:16px 20px 0;
  background:#160c07;border:1px solid rgba(232,194,122,.45);border-bottom:0;border-radius:22px 22px 0 0;text-align:center;
  transform:translateY(105%);transition:transform .55s cubic-bezier(.2,.9,.25,1);pointer-events:auto}
#card.on .sheet{transform:none}
#cardPic{display:block;height:min(30vh,270px);width:auto;max-width:72vw;margin:10px auto 2px}
#cardPic.none{display:none}
#card h3{margin:8px 0 4px;font:600 30px/1.1 'Cormorant Garamond',serif;color:#fff3e0}
#card p{margin:0 0 14px;font-size:16px;line-height:1.45;color:#eadbc4}
#card.note p{font:500 25px/1.25 'Caveat',cursive;color:#fbe9c9}
#card.clue h3{color:#f2d18a}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
#card .row{position:sticky;bottom:0;background:#160c07;padding:8px 0 calc(env(safe-area-inset-bottom) + 16px)}

#fin{position:fixed;inset:0;z-index:16;display:flex;align-items:center;justify-content:center;padding:18px;opacity:0;pointer-events:none;transition:opacity .9s;
  background:rgba(8,4,2,.55)}
#fin.on{opacity:1;pointer-events:auto}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fin-in{position:relative;width:100%;max-width:380px;text-align:center;padding:24px 18px;border-radius:20px;border:1px solid rgba(232,194,122,.55);background:rgba(18,10,6,.9)}
.fin-in h2{margin:8px 0 6px;font:600 38px/1.08 'Cormorant Garamond',serif;color:#fff3e0}
.fin-in p{margin:0 0 18px;font:500 26px/1.2 'Caveat',cursive;color:#f2d18a}