:root{
  --sky-top:#1A1730; --sky-mid:#5B3A57; --sky-bottom:#C9756B; --sand:#E8B783; --sun:#F6D9A0;
  --ink:#2A1E1A; --ink-soft:#6E5A4F;
  --accent:#C8964F; --accent-soft:#E9C893;
  --dune-back:#D49A66; --dune-mid:#BC7C46; --dune-front:#8E5C32;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Inter", system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; }
html,body{ min-height:100%; }
body{ margin:0; font-family:var(--sans); color:#F3E4CC; background:var(--sky-top); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
.layer{ position:fixed; inset:0; pointer-events:none; }
.sky{ z-index:0; background:linear-gradient(to bottom, var(--sky-top) 0%, #3A2742 24%, var(--sky-mid) 46%, #9A5560 66%, var(--sky-bottom) 82%, var(--sand) 100%); }
.stars{ z-index:1; }
.star{ position:absolute; width:2px;height:2px;border-radius:50%; background:#FBEFD8; opacity:.5; }
.sun{ position:fixed; z-index:2; left:50%; top:15%; width:min(46vw,360px); aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 50% 50%, rgba(250,230,194,.62) 0%, rgba(246,201,144,.42) 30%, rgba(232,165,120,.16) 52%, rgba(232,165,120,0) 72%); }
.dunes{ z-index:3; bottom:0; top:auto; height:30vh; }
.dunes svg{ position:absolute; bottom:0; left:-5%; width:110%; height:100%; }
.vignette{ z-index:20; background:radial-gradient(120% 90% at 50% 30%, rgba(0,0,0,0) 45%, rgba(20,8,14,.18) 80%, rgba(12,5,10,.45) 100%); }
.grain{ z-index:21; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

#app{ position:relative; z-index:10; max-width:480px; margin:0 auto; padding:30px 22px 70px; min-height:100vh; display:flex; flex-direction:column; }
[hidden]{ display:none !important; }
.fade{ animation:fade .7s ease both; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }
.rise{ animation:rise .8s ease both; }
@keyframes rise{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }

/* ---------- Tonight view ---------- */
.dg-top{ display:flex; align-items:center; justify-content:space-between; }
.dg-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.dg-brand svg{ width:17px; height:21px; overflow:visible; }
.dg-brand .ln{ fill:none; stroke:var(--accent-soft); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.dg-brand .nm{ font-family:var(--serif); font-size:15px; letter-spacing:.15em; text-transform:uppercase; color:#FBEFD8; }
.dg-date{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(251,239,216,.6); }
.dg-greet{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,5vw,24px); line-height:1.35; color:#F6E7CC; margin:28px 0 20px; text-shadow:0 1px 18px rgba(0,0,0,.4); }
.dg-sky{ margin:0 0 24px; }
.dg-sky-q{ font-size:12.5px; color:rgba(251,239,216,.72); margin-bottom:11px; }
.dg-skies{ display:flex; gap:8px; }
.dg-sky-pill{ flex:1; text-align:center; font-size:11.5px; padding:10px 4px; border-radius:14px; border:1px solid rgba(233,200,147,.28); color:#EBD9BC; background:none; cursor:pointer; transition:all .2s; font-family:inherit; }
.dg-sky-pill:hover{ border-color:rgba(233,200,147,.5); }
.dg-sky-pill.sel{ background:rgba(233,200,147,.16); border-color:var(--accent-soft); color:#FBEFD8; }
.dg-heavy-note{ font-size:12.5px; line-height:1.55; color:#EBD9BC; background:rgba(20,14,26,.4); border:1px solid rgba(233,200,147,.22); border-radius:12px; padding:12px 14px; margin-top:10px; }
.dg-heavy-note a{ color:var(--accent-soft); }

.dg-tile{ position:relative; background:rgba(20,14,26,.46); border:1px solid rgba(233,200,147,.24); border-radius:22px; padding:24px 24px 22px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.dg-kicker{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-soft); }
.dg-emb{ width:54px; height:54px; margin:14px 0 8px; }
.dg-emb .ln{ fill:none; stroke:var(--accent-soft); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dg-theme{ font-family:var(--serif); font-style:italic; font-size:16px; color:#EBD9BC; }
.dg-tile h2{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,7vw,32px); line-height:1.04; margin:3px 0 12px; color:#FBEFD8; }
.dg-min{ font-size:11.5px; letter-spacing:.07em; color:rgba(251,239,216,.6); }
.btn{ display:inline-block; width:100%; text-align:center; font-family:var(--sans); font-weight:500; font-size:15px; color:#2A1E1A; cursor:pointer;
  background:linear-gradient(135deg,var(--accent-soft),var(--accent)); border:none; border-radius:999px; padding:15px; box-shadow:0 8px 26px rgba(200,150,79,.34); transition:transform .15s, box-shadow .2s; }
.btn:disabled{ opacity:.4; cursor:default; transform:none; box-shadow:none; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(200,150,79,.45); }
.dg-begin{ margin-top:18px; }
.btn.ghost{ background:none; color:#EBD9BC; border:1px solid rgba(233,200,147,.34); box-shadow:none; }
.btn.ghost:hover{ background:rgba(233,200,147,.08); color:#FBEFD8; }

.dg-week-h{ display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 10px; }
.dg-week-h .lbl{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(251,239,216,.5); }
.dg-week-h .key{ font-size:10.5px; color:rgba(251,239,216,.42); }
.dg-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.dg-d{ text-align:center; padding:9px 2px 8px; border-radius:12px; border:1px solid rgba(251,239,216,.12); }
.dg-d .dn{ font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(251,239,216,.5); }
.dg-d .dot{ width:7px; height:7px; border-radius:50%; margin:7px auto 0; background:rgba(233,200,147,.42); }
.dg-d.done .dot{ background:var(--accent-soft); }
.dg-d.today{ border-color:var(--accent-soft); background:rgba(233,200,147,.14); }
.dg-d.today .dn{ color:#FBEFD8; }
.dg-d.today .dot{ background:var(--accent); box-shadow:0 0 8px rgba(233,200,147,.7); }
.dg-foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; }
.dg-foot a{ font-size:12.5px; color:rgba(251,239,216,.8); text-decoration:none; }
.dg-foot a b{ color:var(--accent-soft); font-weight:500; }
.dg-foot .free{ font-size:10.5px; letter-spacing:.04em; color:rgba(251,239,216,.45); }

/* ---------- tile player ---------- */
.dg-player{ flex:1; display:flex; flex-direction:column; }
.dg-pl-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.dg-leave-x{ background:none; border:none; color:rgba(251,239,216,.55); font-size:12px; cursor:pointer; letter-spacing:.04em; padding:6px; }
.dg-leave-x:hover{ color:#FBEFD8; }
.dg-stage{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:10px 0 30px; }
.dg-scene{ font-family:var(--serif); font-size:clamp(21px,4.6vw,26px); line-height:1.62; color:#F4E6CC; text-shadow:0 1px 16px rgba(0,0,0,.4); }
.dg-scene .w{ opacity:.26; transition:opacity .5s ease, color .5s ease; }
.dg-scene .w.on{ opacity:1; }
.dg-choice{ margin-top:30px; }
.dg-choice.hidden{ opacity:0; pointer-events:none; }
.dg-prompt{ font-family:var(--sans); font-size:13px; letter-spacing:.02em; color:rgba(251,239,216,.72); margin-bottom:14px; }
.dg-pills{ display:flex; flex-direction:column; gap:9px; }
.dg-pill{ text-align:left; font-family:var(--serif); font-size:18px; color:#EBD9BC; background:rgba(20,14,26,.34); border:1px solid rgba(233,200,147,.26); border-radius:14px; padding:13px 17px; cursor:pointer; transition:all .18s; }
.dg-pill:hover{ border-color:rgba(233,200,147,.55); background:rgba(233,200,147,.07); }
.dg-pill.sel{ background:rgba(233,200,147,.16); border-color:var(--accent-soft); color:#FBEFD8; }
.dg-input{ width:100%; font-family:var(--serif); font-size:19px; color:#FBEFD8; background:rgba(20,14,26,.34); border:1px solid rgba(233,200,147,.26); border-radius:14px; padding:14px 16px; resize:none; line-height:1.4; }
.dg-input::placeholder{ color:rgba(251,239,216,.4); font-style:italic; }
.dg-input:focus{ outline:none; border-color:var(--accent-soft); }
.dg-actions{ margin-top:26px; display:flex; gap:12px; align-items:center; }
.dg-cont{ flex:1; }
.dg-skip{ background:none; border:none; color:rgba(251,239,216,.5); font-size:12px; cursor:pointer; text-decoration:underline; white-space:nowrap; }
.dg-skip:hover{ color:rgba(251,239,216,.8); }

/* close screen */
.dg-noticing{ font-family:var(--serif); font-style:italic; font-size:clamp(20px,4.4vw,25px); line-height:1.55; color:#F4E6CC; text-align:center; max-width:24em; margin:0 auto 6px; }
.dg-keep{ margin-top:30px; }
.dg-keep.hidden{ opacity:0; max-height:0; overflow:hidden; pointer-events:none; }
.dg-keep-prompt{ font-size:13px; color:rgba(251,239,216,.7); text-align:center; margin-bottom:12px; }
.dg-leave-row{ margin-top:26px; }
.dg-bye{ text-align:center; font-family:var(--serif); font-style:italic; font-size:22px; color:#F4E6CC; padding:40px 0; line-height:1.5; }

.home-link{ position:fixed; left:16px; bottom:14px; z-index:40; font-size:11.5px; letter-spacing:.06em; color:rgba(251,239,216,.55); text-decoration:none; border:1px solid rgba(251,239,216,.18); border-radius:999px; padding:6px 13px; background:rgba(20,14,26,.4); backdrop-filter:blur(6px); }
.home-link:hover{ color:#FBEFD8; border-color:rgba(251,239,216,.4); }