/* oddday — shared look. A tear-off daily calendar on a cobalt desk mat.
   Single deliberate look in every colour scheme (no dark variant by design). */
:root{
  --desk:#2338f0; --desk-deep:#1627c4; --desk-dot:rgba(255,255,255,.13);
  --paper:#fdfdfc; --paper-2:#eceef4; --paper-3:#d9dce8;
  --ink:#111217; --muted:#5b5f6e; --line:#d7dae3;
  --red:#ff3d1f; --red-deep:#c22a10;
  --hi:#e6ff3b; --note:#fff07a; --tape:rgba(255,236,140,.78);
  --news:#efefea;
  --display:"Bagel Fat One","Arial Black",Impact,system-ui,sans-serif;
  --body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --type:"Courier Prime","Courier New",ui-monospace,monospace;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background-color:var(--desk);
  background-image:radial-gradient(var(--desk-dot) 1.2px, transparent 1.3px);
  background-size:22px 22px;
  color:var(--ink); font:17px/1.55 var(--body);
  padding:0 16px; padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:var(--desk-deep); text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--hi); outline-offset:2px}
.wrap{max-width:1080px; margin:0 auto}

/* ── top bar ─────────────────────────────────────────── */
header.site{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-block:18px 22px; flex-wrap:wrap}
.logo{font:400 34px/1 var(--display); color:#fff; text-decoration:none; letter-spacing:-.01em; display:inline-flex; align-items:center; gap:10px}
.logo .dot{width:20px; height:20px; border-radius:50%; background:var(--red); box-shadow:inset -3px -3px 0 rgba(0,0,0,.18); display:inline-block; transform:translateY(-3px)}
.logo small{font:700 12px/1.2 var(--type); color:#fff; opacity:.8; letter-spacing:.02em; max-width:13ch; margin-left:4px}
nav.site{display:flex; gap:10px; flex-wrap:wrap}
nav.site a{font:700 14px/1 var(--type); color:var(--ink); background:var(--paper); text-decoration:none; padding:9px 13px 8px; border:2px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); transition:transform .12s}
nav.site a:nth-child(1){transform:rotate(-2deg)} nav.site a:nth-child(2){transform:rotate(1.5deg)} nav.site a:nth-child(3){transform:rotate(-1deg)}
nav.site a:hover{transform:rotate(0) translateY(-2px)}
nav.site a[aria-current]{background:var(--hi)}

/* ── the calendar sheet ─────────────────────────────── */
.sheet{position:relative; background:var(--paper); border-radius:6px 6px 4px 4px; padding:0 clamp(18px,4vw,44px) clamp(24px,4vw,44px);
  box-shadow:0 7px 0 -2px var(--paper-2), 0 13px 0 -4px var(--paper-3), 0 30px 50px -20px rgba(0,0,30,.55)}
.sheet::before{content:""; display:block; height:30px; margin:0 calc(-1 * clamp(18px,4vw,44px)); border-radius:6px 6px 0 0;
  background:
    radial-gradient(circle at 18% 50%, var(--desk) 0 7px, transparent 7.5px),
    radial-gradient(circle at 82% 50%, var(--desk) 0 7px, transparent 7.5px),
    var(--ink)}
.sheet::after{content:""; position:absolute; left:0; right:0; top:30px; height:8px;
  background:radial-gradient(circle at 6px 0, var(--paper-3) 0 3px, transparent 3.5px) 0 0/14px 8px repeat-x}
@media (min-width:900px){ .sheet.tilt{transform:rotate(-.35deg)} }

.calhead{display:grid; grid-template-columns:auto 1fr auto; gap:6px 22px; align-items:center; padding-top:26px}
.bigdate{font:400 clamp(92px,15vw,168px)/.78 var(--display); color:var(--red); letter-spacing:-.04em; margin:0; padding-top:.06em}
.datemeta{font:700 15px/1.35 var(--type); text-transform:uppercase; letter-spacing:.04em; display:grid; gap:2px}
.datemeta b{font-size:22px; letter-spacing:0}
.datemeta .dayno{display:inline-block; justify-self:start; background:var(--ink); color:var(--paper); padding:2px 8px; margin-top:6px; font-size:13px}
.stamp-true{font:400 20px/1 var(--display); color:var(--red); border:4px solid var(--red); border-radius:10px; padding:10px 14px 8px; text-transform:uppercase; transform:rotate(-9deg); letter-spacing:.02em; text-align:center; opacity:.9;
  -webkit-mask:repeating-radial-gradient(circle at 30% 40%, #000 0 2.2px, rgba(0,0,0,.72) 2.6px 3.4px); mask:repeating-radial-gradient(circle at 30% 40%, #000 0 2.2px, rgba(0,0,0,.72) 2.6px 3.4px)}
.stamp-true small{display:block; font:700 11px/1.2 var(--type); letter-spacing:.08em; margin-top:4px}
@media (max-width:640px){
  .calhead{grid-template-columns:auto 1fr} .stamp-true{grid-column:1/-1; justify-self:start; transform:rotate(-4deg); font-size:16px; margin-top:6px}
}
h1.title{font:400 clamp(40px,6.8vw,78px)/.95 var(--display); letter-spacing:-.02em; margin:18px 0 12px; text-wrap:balance}
h1.title .hl{background:linear-gradient(transparent 58%, var(--hi) 58% 92%, transparent 92%); padding:0 .06em}
.dek{font-size:clamp(17px,2vw,20px); max-width:60ch; margin:0 0 26px; color:var(--ink)}
.dek em{font-style:normal; background:var(--hi); padding:0 .2em}

.stage{display:grid; grid-template-columns:minmax(0,480px) minmax(0,1fr); gap:34px; align-items:start}
@media (max-width:860px){ .stage{grid-template-columns:1fr} }

/* ── buttons ─────────────────────────────────────────── */
.btn{font:400 20px/1 var(--display); letter-spacing:.01em; border:3px solid var(--ink); border-radius:14px; padding:14px 22px 12px; background:var(--red); color:#fff; cursor:pointer; box-shadow:5px 5px 0 var(--ink); transition:transform .08s, box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px); box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(4px,4px); box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper); color:var(--ink)}
.btn.hi{background:var(--hi); color:var(--ink)}

/* ── newspaper clipping (facts) ───────────────────────── */
.clipping{position:relative; background:var(--news); padding:30px 26px 34px; transform:rotate(.6deg);
  clip-path:polygon(0 1.4%,4% 0,9% 1.2%,15% .2%,22% 1.3%,30% 0,37% 1%,45% .1%,53% 1.2%,61% .2%,69% 1.1%,77% 0,85% 1.2%,92% .3%,100% 1%,100% 98.8%,95% 100%,88% 99%,80% 99.9%,72% 98.9%,64% 100%,56% 99%,48% 99.8%,40% 98.9%,32% 100%,24% 99.1%,16% 99.9%,8% 98.9%,0 99.8%);
  filter:drop-shadow(0 10px 14px rgba(0,0,30,.25))}
.clipping .kicker{font:700 12px/1.2 var(--type); letter-spacing:.12em; text-transform:uppercase; border-bottom:2px solid var(--ink); padding-bottom:6px; margin-bottom:12px; display:flex; justify-content:space-between; gap:8px}
.clipping h3{font:400 28px/1.02 var(--display); margin:0 0 12px; letter-spacing:-.01em}
.clipping ol{margin:0; padding-left:20px; display:grid; gap:9px; font-size:16px}
.clipping .label{font:700 12px/1.2 var(--type); letter-spacing:.1em; text-transform:uppercase; margin:18px 0 6px; color:var(--muted)}
.clipping .note{font-size:15px; margin:0; color:#33363f}
.clipping .sources{display:flex; flex-direction:column; gap:3px; font:700 14px/1.35 var(--type)}
.clipping .sources a{color:var(--ink)}
.tape{position:absolute; top:-6px; left:50%; width:110px; height:28px; background:var(--tape); transform:translateX(-50%) rotate(-3deg); box-shadow:0 1px 2px rgba(0,0,0,.08)}
@media (max-width:860px){ .clipping{transform:none} }

/* ── game frame ─────────────────────────────────────── */
.game{position:relative; width:min(100%, 480px, calc((100svh - 40px) * 3 / 4.4)); aspect-ratio:3/4.4; border-radius:12px; overflow:hidden; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); touch-action:none; user-select:none; -webkit-user-select:none; margin-inline:auto; background:#9aa3ad}
@media (max-width:520px){ .game{box-shadow:5px 5px 0 var(--ink)} }

/* ── tip note (visitor suggestions) ─────────────────── */
.tip{position:relative; margin:56px auto 0; max-width:980px; background:var(--note); padding:clamp(26px,4vw,44px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:30px;
  transform:rotate(.5deg); box-shadow:0 2px 0 rgba(0,0,0,.06), 0 26px 40px -18px rgba(0,0,30,.5)}
.tip .tape{left:22%; transform:translateX(-50%) rotate(-6deg)}
.tip .tape.r{left:78%; transform:translateX(-50%) rotate(5deg)}
@media (max-width:860px){ .tip{grid-template-columns:1fr; transform:none} }
.tip .kick{font:700 13px/1.2 var(--type); letter-spacing:.1em; text-transform:uppercase; display:inline-block; background:var(--ink); color:var(--note); padding:4px 8px; transform:rotate(-2deg)}
.tip h2{font:400 clamp(32px,4.6vw,50px)/.98 var(--display); margin:14px 0 14px; letter-spacing:-.01em; text-wrap:balance}
.tip p{margin:0 0 10px; max-width:46ch}
.tip .count{font:700 14px/1.4 var(--type); margin-top:12px}
.tip form{display:grid; gap:13px}
.tip label{font:700 13px/1.2 var(--type); letter-spacing:.04em; text-transform:uppercase; display:grid; gap:6px}
.tip textarea,.tip input{font:17px/1.45 var(--body); color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:10px; padding:12px 14px; width:100%}
.tip textarea{min-height:124px; resize:vertical}
.tip textarea:focus,.tip input:focus{outline:none; box-shadow:4px 4px 0 var(--red)}
.tip .two{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:480px){ .tip .two{grid-template-columns:1fr} }
.tip .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.tip .send{justify-self:start}
.tip .msg{font:700 15px/1.4 var(--type); min-height:1.4em}
.tip .msg.err{color:var(--red-deep)}
.tip .fine{font-size:14px; color:#4a4630}

/* ── day navigation ────────────────────────────────── */
.daynav{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:34px auto 0; max-width:1080px}
.daynav a,.daynav span{font:700 15px/1 var(--type); background:var(--paper); color:var(--ink); text-decoration:none; border:2px solid var(--ink); padding:12px 16px; border-radius:10px; box-shadow:4px 4px 0 var(--ink)}
.daynav span{opacity:.75; box-shadow:none; border-style:dashed; background:transparent; color:#fff; border-color:#fff}

footer.site{margin:48px 0 30px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font:700 14px/1.4 var(--type); color:#fff}
footer.site a{color:#fff}

/* ── archive ───────────────────────────────────────── */
.pagehead h1{font:400 clamp(44px,7vw,84px)/.95 var(--display); color:#fff; margin:10px 0 10px; letter-spacing:-.02em; text-wrap:balance}
.pagehead p{color:#fff; max-width:58ch; font-size:19px; margin:0 0 28px}
.days{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:30px 26px}
.mini{position:relative; display:flex; flex-direction:column; background:var(--paper); color:var(--ink); text-decoration:none; border-radius:5px; padding:0 18px 20px;
  box-shadow:0 5px 0 -2px var(--paper-2), 0 9px 0 -4px var(--paper-3), 0 18px 30px -16px rgba(0,0,30,.6); transition:transform .15s}
.mini::before{content:""; height:16px; margin:0 -18px 12px; background:var(--ink); border-radius:5px 5px 0 0}
.mini:nth-child(odd){transform:rotate(-1deg)} .mini:nth-child(even){transform:rotate(1.2deg)}
.mini:hover{transform:rotate(0) translateY(-4px)}
.mini .d{display:flex; align-items:baseline; gap:10px}
.mini .d b{font:400 64px/.85 var(--display); color:var(--red)}
.mini .d span{font:700 13px/1.3 var(--type); text-transform:uppercase}
.mini h2{font:400 26px/1 var(--display); margin:10px 0 8px}
.mini p{margin:0 0 12px; font-size:15px; color:#33363f}
.mini img{width:100%; max-width:100%; aspect-ratio:1200/630; object-fit:cover; border:2px solid var(--ink); border-radius:6px; background:var(--paper-2)}
.mini.soon{background:transparent; color:#fff; border:3px dashed rgba(255,255,255,.7); box-shadow:none; justify-content:center; align-items:center; text-align:center; min-height:260px}
.mini.soon::before{display:none}
.mini.soon b{font:400 30px/1 var(--display)}

/* ── diary & about (prose sheets) ──────────────────── */
.prose{max-width:66ch}
.prose p{margin:0 0 14px}
.entry{padding-top:22px; margin-top:22px; border-top:2px dashed var(--line)}
.entry:first-of-type{border-top:0; margin-top:6px}
.entry .when{font:700 13px/1.2 var(--type); text-transform:uppercase; letter-spacing:.06em}
.entry .when b{background:var(--ink); color:var(--paper); padding:2px 7px; margin-right:8px; font-weight:700}
.entry h2{font:400 32px/1.02 var(--display); margin:10px 0 12px}
.grade{position:relative; background:var(--hi); border:2px solid var(--ink); padding:12px 14px; font:700 15px/1.45 var(--type); margin-top:16px; transform:rotate(-.4deg)}
.grade::before{content:"Grade"; position:absolute; top:-12px; left:12px; background:var(--ink); color:var(--hi); font:700 11px/1 var(--type); padding:4px 6px; letter-spacing:.1em; text-transform:uppercase}

.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; font:700 14px var(--type); opacity:0; transition:opacity .2s; pointer-events:none}
.toast.on{opacity:1}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} .sheet.tilt,.mini,.tip,.clipping{transform:none!important} }

/* ── "new page daily" sticker ───────────────────────── */
.daily{display:inline-flex; align-items:center; gap:8px; font:700 13px/1.2 var(--type); background:var(--hi); color:var(--ink); border:2px solid var(--ink); border-radius:8px; padding:7px 10px 6px; box-shadow:3px 3px 0 var(--ink); transform:rotate(-2.5deg); text-decoration:none}
.daily i{width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 0 0 rgba(255,61,31,.7); animation:daily-ping 1.6s infinite}
.daily b{font-weight:700; font-variant-numeric:tabular-nums}
@keyframes daily-ping{70%{box-shadow:0 0 0 8px rgba(255,61,31,0)} 100%{box-shadow:0 0 0 0 rgba(255,61,31,0)}}
.headbits{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.comeback{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.comeback a{color:#fff}
@media (prefers-reduced-motion: reduce){ .daily i{animation:none} }

/* ── tip: what happens next, ticket, your tips ─────── */
.tip .steps{list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; max-width:46ch}
.tip .steps li{display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start}
.tip .steps b{display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--note); font:400 17px/1 var(--display)}
.tip .tipright{display:grid; gap:14px; align-content:start}
.tip .hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.ticket{background:#fff; border:3px dashed var(--ink); border-radius:12px; padding:18px; transform:rotate(-.6deg); display:grid; gap:10px}
.ticket[hidden],.mytips[hidden],#tipForm[hidden]{display:none}
.ticket p{margin:0}
.t-head{display:flex; justify-content:space-between; font:700 13px/1 var(--type); text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid var(--ink); padding-bottom:8px}
.t-head b{color:var(--red)}
.t-big{font:400 26px/1.05 var(--display)!important}
.t-link{display:flex; gap:8px}
.t-link input{flex:1; min-width:0; font:700 13px/1.3 var(--type)!important; padding:10px!important}
.t-link .btn{font-size:16px; padding:10px 14px 8px; box-shadow:3px 3px 0 var(--ink)}
.t-again{justify-self:start; background:none; border:0; font:700 14px var(--type); text-decoration:underline; cursor:pointer; padding:0; color:var(--ink)}
.mytips{background:rgba(255,255,255,.55); border:2px solid var(--ink); border-radius:12px; padding:12px 14px}
.mt-head{font:700 12px/1 var(--type); letter-spacing:.1em; text-transform:uppercase; margin-bottom:8px}
.mytips ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.mytips li{display:grid; gap:3px; font-size:15px}
.mytips li > a:first-child{color:var(--ink); text-decoration:none}
.mytips em{font-style:normal; font:700 13px/1.35 var(--type)}
.st{justify-self:start; font:700 11px/1 var(--type); text-transform:uppercase; letter-spacing:.06em; padding:4px 7px; border:2px solid var(--ink); border-radius:999px; background:#fff}
.st-read,.st-later{background:var(--paper-2)} .st-shortlisted{background:var(--hi)} .st-skipped{background:#fff; opacity:.8} .st-built{background:var(--red); color:#fff}
.builtlink{font:700 14px var(--type); color:var(--red-deep)}
.prose .quote{font-size:20px; border-left:5px solid var(--hi); padding-left:12px}
.prose .big{font:400 26px/1.1 var(--display)}
.tracker{list-style:none; display:flex; flex-wrap:wrap; gap:10px; padding:0; margin:22px 0 0}
.tracker li{font:700 13px/1 var(--type); text-transform:uppercase; padding:9px 12px; border:2px dashed var(--line); border-radius:999px; color:var(--muted)}
.tracker li.done{border:2px solid var(--ink); background:var(--hi); color:var(--ink)}
.btn{text-decoration:none; display:inline-block}
.agentnote{position:relative; background:var(--hi); border:2px solid var(--ink); padding:14px 14px 12px; font:700 15px/1.45 var(--type); margin-top:16px!important; transform:rotate(-.4deg)}
.agentnote::before{content:"The agent's note"; position:absolute; top:-12px; left:12px; background:var(--ink); color:var(--hi); font:700 11px/1 var(--type); padding:4px 6px; letter-spacing:.1em; text-transform:uppercase}
.streak{display:inline-flex; align-items:center; gap:7px; font:700 12px/1 var(--type); color:#fff; background:rgba(0,0,0,.18); border:2px dashed rgba(255,255,255,.7); border-radius:999px; padding:6px 10px; transform:rotate(1.5deg)}
.streak .dots{display:inline-flex; gap:3px}
.streak .dots i{width:8px; height:8px; border-radius:2px; background:var(--hi); display:inline-block}
.mini .d b{font-variant-numeric:tabular-nums}

/* ── tear-off-a-page share ─────────────────────────── */
.gift{position:relative; margin:56px auto 0; max-width:980px; display:grid; grid-template-columns:260px minmax(0,1fr); gap:34px; align-items:center; color:#fff}
@media (max-width:760px){ .gift{grid-template-columns:1fr; justify-items:start} }
.gift .kick{font:700 13px/1.2 var(--type); letter-spacing:.1em; text-transform:uppercase; display:inline-block; background:var(--hi); color:var(--ink); padding:4px 8px; transform:rotate(-2deg)}
.gift h2{font:400 clamp(32px,4.6vw,50px)/.98 var(--display); margin:14px 0 12px; text-wrap:balance}
.gift p{margin:0 0 14px; max-width:50ch}
.gift em{font-style:normal; background:var(--hi); color:var(--ink); padding:0 .2em}
.gift-form{display:flex; gap:12px; flex-wrap:wrap; align-items:end}
.gift-form label{font:700 13px/1.2 var(--type); text-transform:uppercase; letter-spacing:.04em; display:grid; gap:6px; flex:1 1 220px}
.gift-form input,.gift-done input{font:17px/1.4 var(--body); color:var(--ink); background:#fff; border:3px solid var(--ink); border-radius:10px; padding:11px 13px; width:100%}
.gift-form[hidden],.gift-done[hidden]{display:none}
.gift-done{display:grid; gap:10px}
.gift-done .gd-big{font:400 28px/1.05 var(--display); margin:0}
.gift-done .t-again{color:#fff}
.gift-page{position:relative; width:230px; height:250px; background:var(--paper); border-radius:6px; color:var(--ink); text-align:center; padding:44px 14px 0; transform:rotate(-4deg);
  box-shadow:0 6px 0 -2px var(--paper-2), 0 11px 0 -4px var(--paper-3), 0 24px 30px -14px rgba(0,0,30,.55); transform-origin:50% 0}
.gp-bind{position:absolute; left:0; right:0; top:0; height:26px; background:var(--ink); border-radius:6px 6px 0 0}
.gp-num{font:400 96px/.85 var(--display); color:var(--red)}
.gp-mon{font:700 14px/1 var(--type); letter-spacing:.1em; margin-top:6px}
.gp-title{font:400 20px/1.05 var(--display); margin-top:10px}
.gp-to{display:inline-block; margin-top:10px; font:700 12px/1 var(--type); background:var(--hi); padding:4px 7px; transform:rotate(-3deg)}
.gift-page.ripped{animation:rip .9s cubic-bezier(.5,-0.3,.6,1.3) forwards}
@keyframes rip{0%{transform:rotate(-4deg)} 25%{transform:rotate(-8deg) translateY(4px)} 55%{transform:rotate(10deg) translate(20px,-18px); clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
  100%{transform:rotate(-6deg) translate(0,0); clip-path:polygon(0 14%,8% 11%,16% 15%,24% 10%,33% 14%,41% 11%,50% 15%,58% 10%,66% 14%,75% 11%,83% 15%,91% 10%,100% 13%,100% 100%,0 100%)}}
.fromtag{position:absolute; top:40px; right:-10px; z-index:2; font:400 18px/1.1 var(--display); background:var(--hi); color:var(--ink); border:3px solid var(--ink); padding:9px 13px 7px; transform:rotate(4deg); box-shadow:4px 4px 0 var(--ink); max-width:70%}
@media (max-width:640px){ .fromtag{position:relative; top:auto; right:auto; display:inline-block; margin-top:14px} }
@media (prefers-reduced-motion: reduce){ .gift-page.ripped{animation:none} }

/* ── tear-off v2: a stub stays behind, you pull the page off ── */
.gift-pad{position:relative; width:250px; height:300px; justify-self:center; touch-action:none}
.gift-stub{position:absolute; left:10px; top:0; width:230px; height:44px; z-index:3}
.gift-stub .gp-bind{position:absolute; left:0; right:0; top:0; height:28px; background:var(--ink); border-radius:6px 6px 0 0;
  background-image:radial-gradient(circle at 22% 50%, var(--desk) 0 6px, transparent 6.5px), radial-gradient(circle at 78% 50%, var(--desk) 0 6px, transparent 6.5px)}
.stub-perf{position:absolute; left:0; right:0; top:28px; height:12px; background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 55%,96% 100%,92% 55%,88% 100%,84% 55%,80% 100%,76% 55%,72% 100%,68% 55%,64% 100%,60% 55%,56% 100%,52% 55%,48% 100%,44% 55%,40% 100%,36% 55%,32% 100%,28% 55%,24% 100%,20% 55%,16% 100%,12% 55%,8% 100%,4% 55%,0 100%)}
.gift .gift-page{position:absolute; left:10px; top:38px; width:230px; height:240px; padding:22px 14px 0; transform:rotate(-2deg); transform-origin:50% 0; cursor:grab; z-index:2; user-select:none; -webkit-user-select:none; touch-action:none;
  --tear:0%; box-shadow:0 6px 0 -2px var(--paper-2), 0 11px 0 -4px var(--paper-3), 0 24px 30px -14px rgba(0,0,30,.55)}
.gift .gift-page:active{cursor:grabbing}
.gift .gift-page:focus-visible{outline:3px solid var(--hi); outline-offset:4px}
.gp-perf{position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg, var(--red) var(--tear), transparent var(--tear)),
  repeating-linear-gradient(90deg, var(--paper-3) 0 6px, transparent 6px 11px)}
.gp-grab{position:absolute; left:50%; bottom:-38px; transform:translateX(-50%) rotate(-3deg); white-space:nowrap; font:700 13px/1 var(--type); color:var(--ink); background:var(--hi); padding:6px 9px; border:2px solid var(--ink); box-shadow:3px 3px 0 var(--ink); animation:grab-bob 1.1s ease-in-out infinite alternate}
@keyframes grab-bob{to{transform:translateX(-50%) rotate(2deg) translateY(4px)}}
.gift .gift-page.pulling .gp-grab{animation:none; background:var(--red); color:#fff}
.gift .gift-page:not(.pulling):not(.ripped){animation:page-wiggle 3.2s ease-in-out infinite}
@keyframes page-wiggle{0%,86%,100%{transform:rotate(-2deg)} 90%{transform:rotate(-5deg)} 94%{transform:rotate(1deg)}}
.gift .gift-page.ripped{animation:rip-off 1s cubic-bezier(.45,-0.25,.7,1) forwards; pointer-events:none}
@keyframes rip-off{
  0%{transform:rotate(-2deg); clip-path:inset(0)}
  18%{transform:translate(0,12px) rotate(4deg); clip-path:polygon(0 3%,6% 0,12% 3%,18% 0,24% 3%,30% 0,36% 3%,42% 0,48% 3%,54% 0,60% 3%,66% 0,72% 3%,78% 0,84% 3%,90% 0,96% 3%,100% 0,100% 100%,0 100%)}
  100%{transform:translate(220px,420px) rotate(62deg); opacity:0; clip-path:polygon(0 3%,6% 0,12% 3%,18% 0,24% 3%,30% 0,36% 3%,42% 0,48% 3%,54% 0,60% 3%,66% 0,72% 3%,78% 0,84% 3%,90% 0,96% 3%,100% 0,100% 100%,0 100%)}}
.gift .gift-page.grow{animation:grow-back .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes grow-back{from{transform:scaleY(0) rotate(-2deg); opacity:0} to{transform:rotate(-2deg); opacity:1}}
.gift .gp-num{font:400 100px/.85 var(--display); color:var(--red); margin-top:6px}
.rrrip{position:absolute; left:50%; top:30px; z-index:5; font:400 44px/1 var(--display); color:var(--hi); -webkit-text-stroke:3px var(--ink); paint-order:stroke; pointer-events:none; opacity:0; transform:translate(-50%,0) scale(.3) rotate(-12deg)}
.rrrip.go{animation:rrrip .9s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes rrrip{0%{opacity:0; transform:translate(-50%,0) scale(.3) rotate(-12deg)} 25%{opacity:1; transform:translate(-50%,-30px) scale(1.15) rotate(-8deg)} 80%{opacity:1; transform:translate(-50%,-44px) scale(1) rotate(-6deg)} 100%{opacity:0; transform:translate(-50%,-60px) scale(.9) rotate(-4deg)}}
.shred{position:absolute; width:12px; height:8px; z-index:4; pointer-events:none; border:1.5px solid var(--ink); border-radius:1px}
.gd-row{display:flex; gap:18px; flex-wrap:wrap}
@media (max-width:760px){ .gift-pad{justify-self:center; margin-bottom:34px} }
@media (prefers-reduced-motion: reduce){ .gift .gift-page:not(.pulling):not(.ripped),.gp-grab{animation:none} .gift .gift-page.ripped{animation:none; opacity:0} }

/* ── rubber-stamp toy: pick up the TRUE STORY stamp and stamp the page ── */
.stamp-true{cursor:grab; transition:transform .15s}
.stamp-true:hover{transform:rotate(-12deg) scale(1.06)}
.stamp-true::after{content:"pick me up"; display:block; font:700 10px/1 var(--type); letter-spacing:.08em; color:var(--ink); margin-top:5px; opacity:.7}
body.stamping, body.stamping *{cursor:none!important}
.stamp-ghost{position:fixed; z-index:60; pointer-events:none; font:400 18px/1 var(--display); color:var(--red); border:4px solid var(--red); border-radius:9px; padding:8px 11px 6px; background:rgba(255,255,255,.35);
  transform:translate(-50%,-60%) rotate(-10deg); box-shadow:0 8px 14px -6px rgba(0,0,0,.35)}
.stamp-ghost small{display:block; font:700 10px/1 var(--type); margin-top:3px}
.stampmark{position:absolute; z-index:4; pointer-events:none; font:400 18px/1 var(--display); color:var(--red); border:4px solid var(--red); border-radius:9px; padding:8px 11px 6px; text-transform:uppercase; opacity:.85;
  -webkit-mask:repeating-radial-gradient(circle at 30% 40%, #000 0 2.2px, rgba(0,0,0,.6) 2.6px 3.4px); mask:repeating-radial-gradient(circle at 30% 40%, #000 0 2.2px, rgba(0,0,0,.6) 2.6px 3.4px);
  animation:thunk .18s cubic-bezier(.2,1.8,.4,1)}
@keyframes thunk{from{transform:var(--r) scale(1.6); opacity:0} to{transform:var(--r) scale(1); opacity:.85}}
.stamp-hint{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:61; font:700 14px/1.3 var(--type); background:var(--ink); color:#fff; padding:10px 14px; border-radius:10px; pointer-events:none}

/* ── the big date flips when poked ── */
.bigdate{cursor:pointer; transform-origin:50% 0; display:inline-block}
.bigdate.flip{animation:flip .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes flip{0%{transform:rotateX(0)} 40%{transform:rotateX(-85deg)} 60%{transform:rotateX(-85deg)} 100%{transform:rotateX(0)}}

/* ── UX fixes: phones get to the game fast; overlays always fit ── */
.overlay{overflow-y:auto; justify-content:safe center}
@media (max-width:640px){
  header.site{padding-block:10px 12px; gap:8px}
  .logo{font-size:28px} .logo small{display:none}
  .headbits{gap:8px; width:100%; justify-content:space-between}
  .daily{font-size:11px; padding:5px 8px 4px} .daily span{display:none}
  .streak{display:none!important}
  nav.site{flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:6px; gap:8px; scrollbar-width:none}
  nav.site::-webkit-scrollbar{display:none}
  nav.site a{flex:0 0 auto; font-size:13px; padding:7px 10px 6px}
  .sheet{display:flex; flex-direction:column}
  .sheet > .calhead{order:1; padding-top:14px; grid-template-columns:auto 1fr; gap:4px 14px}
  .sheet > .title{order:2; margin:8px 0 12px}
  .sheet > .stage{order:3}
  .sheet > .dek{order:4; margin:22px 0 4px; font-size:17px}
  .sheet > .fromtag{order:0}
  .bigdate{font-size:72px}
  .datemeta{font-size:12px; gap:0} .datemeta b{font-size:16px} .datemeta .dayno{margin-top:4px; font-size:11px}
  .stamp-true{position:absolute; right:12px; top:44px; font-size:13px; padding:6px 8px 5px; border-width:3px; grid-column:auto; margin:0}
  .stamp-true small,.stamp-true::after{display:none}
  h1.title{font-size:clamp(34px,10vw,46px)}
  .overlay{padding:16px 14px; gap:9px}
  .overlay h2{font-size:24px}
  .overlay p{font-size:14px; line-height:1.4}
  .overlay .btn{font-size:17px; padding:11px 16px 9px}
  .result-grid{gap:2px 14px} .result-grid dd{font-size:16px; margin-bottom:3px}
  .rank{font-size:17px}
  .hint{font-size:11px}
}
@media (max-height:700px){ .overlay .hint{display:none} }
.game:has(.overlay:not([hidden])) #sprint{display:none!important}
@media (max-width:640px){
  .stamp-true{top:112px; right:10px}
  .overlay .kicker{font-size:11px}
  #end{gap:6px; justify-content:safe center}
  #end h2{font-size:22px}
  #end .rank{font-size:15px}
  #end .result-grid{grid-template-columns:1fr 1fr; font-size:12px}
  #end .result-grid dt{font-size:10px}
  #end .result-grid > div:last-child{display:none}
  #end .row{gap:8px}
  #end .btn{font-size:15px; padding:9px 13px 8px; box-shadow:3px 3px 0 var(--ink)}
}
@media (min-width:641px){
  .calhead{padding-top:16px}
  .bigdate{font-size:clamp(92px,9vw,124px)}
  h1.title{font-size:clamp(40px,5vw,62px); margin:10px 0 8px}
  .dek{margin-bottom:18px}
  header.site{padding-block:14px 16px}
}
@media (min-width:641px){ #start{justify-content:flex-start; padding-top:34px} }

/* ── sound sticker ── */
.sfx{display:inline-flex; align-items:center; gap:6px; font:700 12px/1 var(--type); color:var(--ink); background:var(--paper); border:2px solid var(--ink); border-radius:999px; padding:6px 10px 5px; box-shadow:3px 3px 0 var(--ink); transform:rotate(2deg); cursor:pointer}
.sfx:hover{transform:rotate(0) translateY(-1px)}
.sfx.off{background:transparent; color:#fff; border-color:#fff; box-shadow:none}
.sfx.off .w{display:none}
@media (max-width:640px){ .sfx b{display:none} .sfx{padding:6px 7px} }