/* THAT ONE DAY — Windows 98 on a cloudy sky, chrome everything ✦ */
@font-face{font-family:"Fredoka";src:url(/fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"VT323";src:url(/fonts/vt323.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --grey:#c0c0c0; --grey-l:#dfdfdf; --grey-d:#808080; --grey-dd:#404040; --navy:#000080; --navy2:#1084d0;
  --ink:#000; --ink-soft:#3a3f46; --blue:#2e6ae0; --sky:#6fb1ff;
  --ui:Tahoma,"MS Sans Serif",Verdana,Geneva,sans-serif; --mono:"VT323",monospace; --round:"Fredoka",Tahoma,sans-serif;
  --cur-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='32' viewBox='0 0 12 16' shape-rendering='crispEdges'><path d='M1 0h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-5v1h1v1h1v1h1v1h1v1h-3v-1h-1v-1h-1v-1h-1v-1h-1v1h-1v1h-1v1h-1z' fill='%23000'/><path d='M2 2h1v1h1v1h1v1h1v1h1v1h1v1h1v1h-3v1h1v1h1v1h1v1h-1v-1h-1v-1h-1v-1h-1v-1h-1v1h-1v1h-1z' fill='%23fff'/></svg>") 1 1, auto;
  --cur-hand:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='32' viewBox='0 0 14 16' shape-rendering='crispEdges'><path d='M5 0h2v1h1v7h1v-3h2v1h1v-1h2v1h1v7h-1v2h-1v1h-7v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-2h2v1h1v-8h1z' fill='%23000'/><path d='M5 1h1v8h1v-3h1v3h1v-3h1v3h1v-3h1v1h1v1h-1v6h-1v1h-5v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-10z' fill='%23fff'/></svg>") 5 0, pointer;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.4;cursor:var(--cur-arrow);background:#3f7fe0;overflow-x:hidden}
a{color:var(--navy)}
b{font-weight:700}
button,input,textarea,a.btn98{font:inherit;color:inherit}
a,button,.btn98,.giftbox,label,.win__ctl b,[data-close]{cursor:var(--cur-hand)}
[hidden]{display:none!important}

/* ── sky layers ── */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.clouds{position:absolute;inset:-6% -8%;background:url(/img/clouds.jpg) center/cover;animation:drift 70s ease-in-out infinite alternate;will-change:transform}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1.02)}to{transform:translate3d(2%,1%,0) scale(1.06)}}
.bubbles,.sparkles,.floaties{position:absolute;inset:0}
.bubble{position:absolute;border-radius:50%;width:var(--s);height:var(--s);bottom:-80px;
  background:radial-gradient(circle at 32% 30%,rgba(255,255,255,.85) 0,rgba(255,255,255,.25) 14%,rgba(255,255,255,.04) 40%,rgba(255,255,255,.06) 70%,rgba(255,255,255,.5) 100%);
  box-shadow:inset 0 0 12px rgba(255,255,255,.55),inset -4px -6px 10px rgba(170,200,255,.35),inset 4px 6px 8px rgba(255,210,240,.25);
  animation:bub var(--d) linear infinite;animation-delay:var(--w);opacity:0}
@keyframes bub{0%{transform:translate(0,0);opacity:0}8%{opacity:.9}92%{opacity:.8}100%{transform:translate(var(--x),-118vh);opacity:0}}
.sparkle{position:absolute;width:var(--s);height:var(--s);opacity:0;animation:twinkle var(--d) ease-in-out infinite;animation-delay:var(--w);filter:drop-shadow(0 0 3px #fff)}
.sparkle img,.floaty img{width:100%;height:100%;display:block;object-fit:contain}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(20deg)}}
.floaty{position:absolute;bottom:-90px;width:var(--s);height:var(--s);opacity:0;animation:rise var(--d) linear infinite;animation-delay:var(--w);filter:drop-shadow(0 6px 8px rgba(0,30,90,.25))}
@keyframes rise{0%{transform:translateY(0) rotate(-10deg);opacity:0}8%{opacity:1}92%{opacity:.9}100%{transform:translateY(-120vh) rotate(14deg);opacity:0}}
#confetti{position:fixed;inset:0;z-index:5;pointer-events:none}

/* ── taskbar (top) ── */
.taskbar{position:fixed;left:0;right:0;top:0;z-index:30;height:32px;background:var(--grey);border-bottom:2px solid;border-color:#fff #808080 #808080 #fff;display:flex;align-items:center;gap:6px;padding:2px 4px;font-size:13px}
.start{display:inline-flex;align-items:center;gap:5px;font-weight:700;padding:2px 8px 2px 5px;background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080}
.flag{display:grid;grid-template-columns:7px 7px;gap:1px;transform:skewX(-8deg)}
.flag b{display:block;width:7px;height:7px}.flag b:nth-child(1){background:#e4432b}.flag b:nth-child(2){background:#3fa33f}.flag b:nth-child(3){background:#3b6fe0}.flag b:nth-child(4){background:#f2c32b}
.task{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;background:var(--grey);border:2px solid;border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080,inset -1px -1px #dfdfdf;background-image:repeating-conic-gradient(#fff 0 25%,#c0c0c0 0 50%);background-size:2px 2px}
.tray{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:2px 10px;border:2px solid;border-color:#808080 #fff #fff #808080;font-variant-numeric:tabular-nums}
.spk{width:14px;height:12px;background:linear-gradient(90deg,#000 0 35%,transparent 35%),#000;clip-path:polygon(0 30%,35% 30%,70% 0,70% 100%,35% 70%,0 70%)}

/* icons (tiny CSS pictograms) */
.ico{display:inline-block;width:16px;height:14px;flex:none;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' shape-rendering='crispEdges'><rect x='1' y='5' width='14' height='8' fill='%23dfe3e8' stroke='%23404040'/><rect x='0' y='3' width='16' height='3' fill='%23fff' stroke='%23404040'/><rect x='7' y='3' width='2' height='10' fill='%232e6ae0'/><path d='M5 1h2v2H5zM9 1h2v2H9z' fill='%232e6ae0'/></svg>") center/contain no-repeat}
.ico-note{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' shape-rendering='crispEdges'><rect x='2' y='0.5' width='11' height='13' fill='%23fff' stroke='%23404040'/><path d='M4 4h7M4 6h7M4 8h5' stroke='%23404040'/></svg>")}
.ico-paint{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' shape-rendering='crispEdges'><rect x='1' y='1' width='14' height='12' fill='%236fb1ff' stroke='%23404040'/><path d='M3 9l3-3 3 3 2-2 3 3' stroke='%23fff' fill='none'/><circle cx='11' cy='4' r='1.5' fill='%23fff'/></svg>")}
.ico-mail{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' shape-rendering='crispEdges'><rect x='1' y='2' width='14' height='10' fill='%23fff' stroke='%23404040'/><path d='M1 2l7 6 7-6' stroke='%23404040' fill='none'/></svg>")}

/* ── desktop icons (wide screens) ── */
.desk-icons{position:fixed;left:14px;top:48px;z-index:1;display:none;flex-direction:column;gap:22px;width:84px}
/* desktop icons retired: the sticker hero covers the left edge */
.dicon{display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;font-size:12px;text-align:center;text-shadow:1px 1px 0 #000}
.dicon img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(1px 3px 2px rgba(0,0,0,.35));transition:transform .2s}
.dicon:hover img{transform:scale(1.12) rotate(-6deg)}
.dicon span{background:rgba(0,0,128,.0);padding:0 2px}

/* ── layout ── */
.page{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:40px 14px 96px}
.stage{animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ── Win98 window ── */
.win{background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080,6px 8px 0 rgba(0,20,80,.22);padding:3px;margin-bottom:22px}
.win__title{display:flex;align-items:center;gap:6px;height:22px;padding:0 3px 0 5px;background:linear-gradient(90deg,var(--navy),var(--navy2));color:#fff;font-weight:700;font-size:13px;letter-spacing:.01em;white-space:nowrap;overflow:hidden}
.win__title>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
.win__title--plain{background:linear-gradient(90deg,#2a5ad8,#78a9ff)}
.win__title--amp{background:linear-gradient(90deg,#1a2c6b,#5a7fd8);font-family:var(--mono);font-size:18px;letter-spacing:.14em;justify-content:center}
.win__title--amp>span:first-of-type{flex:1;text-align:center}
.win__ctl{margin-left:auto;display:flex;gap:2px}
.win__ctl b{display:grid;place-items:center;width:16px;height:14px;background:var(--grey);color:#000;font-size:11px;line-height:1;border:1px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080;font-family:var(--ui);font-weight:700}
.win__menu{display:flex;gap:2px;padding:2px 2px 3px;font-size:13px}
.win__menu span{padding:1px 6px}
.win__menu span:hover{background:var(--navy);color:#fff}
.win__body{padding:12px 12px 14px;background:var(--grey)}
.win__status{display:flex;gap:3px;font-size:12px;margin-top:3px}
.win__status span{flex:1;padding:2px 6px;border:1px solid;border-color:#808080 #fff #fff #808080;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__status span:last-child{flex:0 0 auto;min-width:80px;max-width:60%;text-align:right}
.sunken,input[type=text],input[type=date],textarea,.linkrow input,.notepad,.paint,.list{background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040,inset -1px -1px #dfdfdf}

/* ── chrome text ── */
.chrome{font-family:var(--round);font-weight:700;font-size:clamp(40px,10vw,58px);line-height:1;margin:0 0 10px;letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff 0%,#eef1f5 24%,#8a95a1 46%,#fafbfc 52%,#b8c1cb 70%,#5d6773 88%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px rgba(40,50,70,.75);paint-order:stroke fill;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 6px 10px rgba(0,30,90,.35))}
.chrome--small{font-size:clamp(30px,7.4vw,42px)}
.lead{margin:0 auto;max-width:470px;font-size:14px;color:var(--ink-soft)}
.tag{display:inline-block;font-family:var(--mono);font-size:22px;color:#000;background:#fff;padding:0 12px;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040,3px 3px 0 rgba(0,20,80,.25);transform:rotate(-2deg);margin:4px 0 10px}

/* ── form ── */
.fs{border:2px groove #fff;border-radius:0;padding:8px 12px 12px;margin:0 0 12px}
.fs legend{padding:0 4px;font-size:13px}
.field{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:8px;margin:8px 0 0}
.field>span{font-size:13px}
.field--area{align-items:start}
input[type=text],input[type=date],textarea{width:100%;padding:5px 7px;font-size:15px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none;min-height:34px;font-family:var(--ui)}
input:focus,textarea:focus{outline:1px dotted #000;outline-offset:-4px}
textarea{resize:vertical;font-family:var(--mono);font-size:20px;line-height:1.1}
::placeholder{color:#8a9099}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btnrow{display:flex;gap:8px;margin-top:4px}
.btnrow--wrap{flex-wrap:wrap}
.btnrow--center{justify-content:center;flex-wrap:wrap}
.btn98{display:inline-flex;align-items:center;justify-content:center;min-width:80px;padding:5px 14px;background:var(--grey);color:#000;text-decoration:none;font-size:14px;
  border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080;position:relative;user-select:none}
.btn98:focus{outline:1px dotted #000;outline-offset:-5px}
.btn98:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080,inset -1px -1px #dfdfdf;transform:translate(1px,1px)}
.btn98--primary{border:2px solid #000;box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080;font-weight:700}
.btn98[disabled]{color:#808080;text-shadow:1px 1px 0 #fff;pointer-events:none}
.err{margin:10px 0 0;padding:6px 8px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;color:#b00020;font-size:13px}

/* ── dialogs ── */
.dialog{background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080,6px 8px 0 rgba(0,20,80,.22);padding:3px;width:min(300px,100%);margin:0 auto 22px}
.dialog--about{margin-left:auto;margin-right:0;transform:rotate(1.2deg)}
.dialog__body{padding:14px 14px 12px;text-align:center}
.dialog__q{font-size:26px;margin:0 0 6px;font-family:var(--ui)}
.dialog__small{font-size:12px;color:var(--ink-soft);margin:0 0 12px}
@keyframes blink{to{opacity:0}}

/* ── gift box ── */
.giftbody{text-align:center;background:var(--grey)}
.giftbox{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;padding:8px 10px 6px;margin:6px 0 2px;animation:hover 2.8s ease-in-out infinite}
.giftbox:focus{outline:1px dotted #000}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.giftbox__svg{width:210px;height:210px;display:block;filter:drop-shadow(0 8px 10px rgba(0,30,90,.3))}
.gift__lid{transform-origin:100px 100px;transition:transform .9s cubic-bezier(.3,1.4,.5,1),opacity .5s}
.giftbox.is-open .gift__lid{transform:translate(0,-95px) rotate(-18deg);opacity:0}
.giftbox.is-open .gift__body{animation:bounce .7s cubic-bezier(.3,1.5,.5,1);transform-origin:100px 184px}
.giftbox.is-open{animation:none;cursor:default}
.giftbox.is-open .giftbox__hint{visibility:hidden}
@keyframes bounce{0%{transform:scaleY(1)}30%{transform:scaleY(.82) scaleX(1.08)}70%{transform:scaleY(1.06)}100%{transform:scaleY(1)}}
.giftbox.is-shaking{animation:shake .5s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
.giftbox__label{font-size:13px;background:var(--navy);color:#fff;padding:0 4px;border:1px dotted #fff}
.giftbox__hint{font-family:var(--mono);font-size:19px;color:var(--ink-soft);animation:blink 1.6s steps(2) infinite}
.dateline{font-family:var(--mono);font-size:21px;margin:8px 0 0;color:#000}

/* ── cards ── */
.cards{display:grid;gap:12px;margin-top:10px}
.cards>*{min-width:0;max-width:100%}
.card{position:relative;opacity:0;animation:cardin .6s cubic-bezier(.2,.9,.3,1.12) forwards}
.card:nth-child(1){--r:-.8deg}.card:nth-child(2){--r:.7deg;animation-delay:.35s}.card:nth-child(3){--r:-.5deg;animation-delay:.7s}.card:nth-child(4){--r:.9deg;animation-delay:1.05s}
@keyframes cardin{from{opacity:0;transform:translateY(60px) scale(.9) rotate(calc(var(--r) * 6))}to{opacity:1;transform:rotate(var(--r))}}
.share--bottom{opacity:0;animation:fadeup .5s 1.3s forwards;margin:10px 0}
@keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* Winamp */
.winamp{padding:3px}
.amp{background:linear-gradient(180deg,#d9dde3,#aab2bd);padding:8px;border:1px solid #6b7480}
.amp__lcd{background:#0a1736;border:2px solid;border-color:#404a5a #e8edf4 #e8edf4 #404a5a;padding:6px 8px;color:#8fd0ff;font-family:var(--mono);box-shadow:inset 0 0 14px rgba(70,140,255,.25)}
.amp__top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.amp__time{font-size:40px;line-height:1;letter-spacing:.06em;text-shadow:0 0 8px rgba(143,208,255,.8)}
.amp__eq{display:flex;align-items:flex-end;gap:2px;height:30px;flex:1;max-width:160px}
.amp__eq i{flex:1;background:linear-gradient(180deg,#ff6b6b 0,#ffd166 30%,#8fd0ff 60%,#3b82f6 100%);animation:eq var(--d) ease-in-out infinite alternate;transform-origin:bottom;height:100%}
@keyframes eq{from{transform:scaleY(.1)}to{transform:scaleY(var(--h))}}
.amp__marquee{overflow:hidden;white-space:nowrap;margin:6px 0 2px;font-size:22px;line-height:1;text-shadow:0 0 6px rgba(143,208,255,.6);border-top:1px solid #1e3a7a;border-bottom:1px solid #1e3a7a;padding:3px 0}
.amp__marquee span{display:inline-block;width:max-content;animation:marq var(--m,14s) linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
.amp__meta{display:flex;justify-content:space-between;gap:8px;font-size:15px;text-transform:uppercase;letter-spacing:.06em;opacity:.85;margin-top:3px}
.amp__meta span:nth-child(2){flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amp__sliders{display:flex;gap:10px;align-items:center;margin:8px 0}
.amp__seek,.amp__vol{display:block;height:10px;background:#8c95a1;border:1px solid;border-color:#404a5a #e8edf4 #e8edf4 #404a5a;position:relative}
.amp__seek{flex:1}.amp__vol{width:70px}
.amp__seek b,.amp__vol b{position:absolute;top:-4px;width:26px;height:16px;background:linear-gradient(180deg,#eef1f5,#aab2bd);border:1px solid;border-color:#fff #404a5a #404a5a #fff}
.amp__seek b{left:18%;animation:seek 30s linear infinite}.amp__vol b{right:8px}
@keyframes seek{from{left:2%}to{left:88%}}
.amp__ctl{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.ampb{display:grid;place-items:center;width:32px;height:24px;background:linear-gradient(180deg,#eef1f5,#aab2bd);border:1px solid;border-color:#fff #404a5a #404a5a #fff;font-size:13px;color:#1b2430;text-decoration:none}
.ampb--play{color:#0a4fd6;font-weight:700;width:40px;animation:glow 1.6s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 0 0 rgba(58,130,255,0)}50%{box-shadow:0 0 10px rgba(58,130,255,.9)}}
.ampb--wide{margin-left:auto;width:auto;padding:0 10px;font-family:var(--mono);font-size:17px;text-transform:uppercase;letter-spacing:.06em}
.amp__none{font-family:var(--mono);font-size:18px;color:#1b2430;margin:8px 0 0}

/* Paint (weather) */
.paintwrap{display:grid;gap:8px;padding:4px 6px 6px}
.paint{min-height:190px;background:linear-gradient(180deg,var(--sky1,#6fb1ff),var(--sky2,#e3f2ff));text-align:center;padding:14px 10px 12px;position:relative;overflow:hidden}
.wx__icon{width:92px;height:92px;margin:0 auto 4px;animation:hover 3.2s ease-in-out infinite;filter:drop-shadow(0 6px 8px rgba(0,30,90,.35))}
.wx__icon svg{width:100%;height:100%;display:block}
.wx__label{margin:0;font-family:var(--mono);font-size:19px;color:#0a2a5a}
.wx__main{margin:2px 0 0;font-size:26px;font-weight:700;color:#061a3d;text-shadow:0 1px 0 #fff}
.wx__temps{margin:2px 0 0;font-size:22px;font-weight:700;color:#061a3d}
.list{list-style:none;margin:0;padding:3px;display:grid;grid-template-columns:1fr 1fr;gap:2px;font-size:13px}
.list li{display:flex;justify-content:space-between;gap:6px;padding:4px 8px;background:#fff}
.list li:nth-child(4n+1),.list li:nth-child(4n+2){background:#eef2f7}
.list li b{font-weight:700}

/* Notepad */
.notepad{margin:4px 2px 2px;padding:10px 12px 12px;font-family:var(--mono);font-size:21px;line-height:1.15;color:#000;min-height:120px;position:relative}
.np__date{margin:0 0 8px;color:#444;font-size:19px}
.np__head{margin:0 0 10px;font-size:24px;line-height:1.1}
.np__delta{margin:0 0 8px;color:#555;font-size:18px}
.np__also{list-style:none;padding:0;margin:0 0 10px;font-size:18px;color:#333;line-height:1.15}
.np__also li{padding-left:18px;position:relative;margin-bottom:5px}
.np__also li::before{content:">";position:absolute;left:0}
.np__src{margin:0;font-size:17px;color:#555}
.np__src a{color:var(--navy)}
.notepad--note{font-size:24px;white-space:pre-wrap;word-wrap:break-word}
.np__text{margin:0}
.np__sign{margin:12px 0 0}
.np__sign::after{content:"";display:inline-block;width:10px;height:22px;background:#000;vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}

/* share */
.share__lead{margin:0 0 8px;font-size:14px}
.linkrow{display:flex;gap:6px;margin-bottom:8px}
.linkrow input{flex:1;min-width:0;font-family:var(--mono);font-size:19px;padding:4px 8px;min-height:34px}
.share__hint{margin:10px 0 0;font-family:var(--mono);font-size:18px;text-align:center;color:var(--ink-soft)}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--grey);color:#000;padding:6px 14px;border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:4px 4px 0 rgba(0,20,80,.3);font-size:13px;opacity:0;transition:.2s;z-index:40;pointer-events:none}
.toast.is-on{opacity:1;transform:translateX(-50%)}

@media (max-width:440px){.row{grid-template-columns:1fr}.field{grid-template-columns:1fr;gap:3px}.page{padding:48px 10px 100px}.win__body{padding:10px}.dialog--about{transform:none;margin-right:auto}.list{grid-template-columns:1fr}.win__status span:first-child{display:none}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}.card,.share--bottom{opacity:1;transform:none}}

/* ── liquid chrome title ── */
/* ── sticker hero ── */
.hero{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(540px,88vh,760px);display:grid;place-items:center;margin-bottom:6px}
.hero--gift{height:clamp(440px,70vh,620px)}
.hero__stickers{position:absolute;inset:0;pointer-events:none}
.hero__center{position:relative;z-index:3;text-align:center;padding:0 16px;max-width:760px;isolation:isolate}
.hero__kicker{display:inline-block;margin:0 0 14px;padding:3px 12px;font-family:var(--mono);font-size:21px;letter-spacing:.04em;color:#000;background:#fff;
  border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040,4px 4px 0 rgba(0,20,80,.25);transform:rotate(-2deg);opacity:0;animation:fadeup .6s .9s forwards;white-space:nowrap;max-width:calc(100vw - 24px);overflow:hidden;text-overflow:ellipsis}
.hero__sub{margin:16px auto 0;max-width:460px;font-size:16px;line-height:1.45;color:#fff;text-shadow:0 1px 0 rgba(0,20,80,.6),0 0 14px rgba(0,30,110,.55);opacity:0;animation:fadeup .6s 1.1s forwards}
.hero__sub b{font-weight:700}
.hero__cta{margin-top:20px;font-size:16px;padding:8px 22px;opacity:0;animation:fadeup .6s 1.3s forwards}
.ctitle{position:relative;margin:0 auto;width:min(84vw,620px,calc(52vh * 1.277));line-height:0;opacity:0;animation:titlein 1s .55s cubic-bezier(.2,.9,.25,1.15) forwards}
.ctitle--gift{width:min(90vw,700px,calc(44vh * 1.633))}
.ctitle::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;background:radial-gradient(closest-side,rgba(10,40,130,.42),rgba(10,40,130,.18) 60%,rgba(10,40,130,0));filter:blur(14px);pointer-events:none}
.ctitle__img{display:block;width:100%;height:auto;filter:drop-shadow(0 0 1px #08142e) drop-shadow(0 0 1.5px #08142e) drop-shadow(0 4px 0 rgba(255,255,255,.6)) drop-shadow(0 18px 22px rgba(0,20,70,.55))}
.ctitle__shine{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--m) center/100% 100% no-repeat;mask:var(--m) center/100% 100% no-repeat;
  background:linear-gradient(110deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.95) 50%,rgba(255,255,255,0) 58%) 0 0/300% 100% no-repeat;mix-blend-mode:screen;animation:sweep 5s 1.8s ease-in-out infinite}
@keyframes sweep{0%{background-position:120% 0}45%,100%{background-position:-20% 0}}
@keyframes titlein{from{opacity:0;transform:scale(.4) translateY(30px);filter:blur(8px)}to{opacity:1;transform:none}}

.stk{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:var(--z,1);
  transform:translate(-50%,-50%) translate3d(calc(var(--px,0) * var(--d) * 46px),calc(var(--py,0) * var(--d) * 34px),0);transition:transform .25s ease-out}
.stk__fly{display:block;opacity:0;animation:flyin 1.05s var(--del) cubic-bezier(.18,.9,.25,1.18) forwards}
@keyframes flyin{from{opacity:0;transform:translate(var(--fx),var(--fy)) rotate(var(--fr)) scale(.25)}60%{opacity:1}to{opacity:1;transform:none}}
.stk__img{display:block;width:100%;height:auto;pointer-events:auto;cursor:var(--cur-hand);transform:rotate(var(--r));
  filter:drop-shadow(0 12px 14px rgba(0,25,80,.35));animation:bob var(--b) calc(var(--del) + 1s) ease-in-out infinite alternate;user-select:none;-webkit-user-drag:none}
@keyframes bob{from{transform:rotate(var(--r)) translateY(0)}to{transform:rotate(calc(var(--r) + 5deg)) translateY(-12px)}}
.stk__img.is-boing{animation:boing .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes boing{0%{transform:rotate(var(--r)) scale(1)}35%{transform:rotate(calc(var(--r) + 200deg)) scale(1.25)}100%{transform:rotate(calc(var(--r) + 360deg)) scale(1)}}
.stk--twinkle .stk__img{animation:twk var(--b) calc(var(--del) + 1s) ease-in-out infinite}
@keyframes twk{0%,100%{transform:rotate(var(--r)) scale(.55);opacity:.5}50%{transform:rotate(calc(var(--r) + 25deg)) scale(1.05);opacity:1}}
.glint{position:absolute;z-index:4;width:var(--s);height:var(--s);pointer-events:none;animation:glint .9s ease-out forwards}
.glint img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px rgba(255,255,255,.8))}
@keyframes glint{0%{opacity:0;transform:translate(-50%,-50%) scale(0) rotate(0)}40%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(45deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(90deg)}}


/* ── stickers on windows ── */
.formwin,.share,.giftwin{position:relative}
.deco{position:absolute;z-index:6;pointer-events:none;filter:drop-shadow(0 10px 10px rgba(0,25,80,.35));animation:decobob 3.4s ease-in-out infinite alternate}
@keyframes decobob{from{transform:rotate(var(--r,0)) translateY(0)}to{transform:rotate(calc(var(--r,0) + 4deg)) translateY(-6px)}}
.deco--floppy{width:86px;right:-18px;top:-40px;--r:14deg}
.deco--phone{width:62px;right:-12px;top:-44px;--r:16deg}
.deco--boombox{width:132px;right:-16px;top:-52px;--r:7deg}
.deco--camera{width:110px;right:-14px;bottom:-24px;--r:-12deg}
.deco--pin{width:52px;left:50%;top:-34px;margin-left:-26px;--r:-8deg;animation:none;transform:rotate(-8deg)}
.deco--heart{width:84px;right:-12px;top:-36px;--r:10deg}

/* ── sticker burst from the gift ── */
.burst{position:fixed;left:0;top:0;z-index:20;pointer-events:none;width:var(--s);will-change:transform,opacity;filter:drop-shadow(0 10px 12px rgba(0,25,80,.35))}

/* ── cursor trail ── */
.trail{position:fixed;z-index:35;pointer-events:none;width:var(--s);height:var(--s);animation:trail .8s ease-out forwards}
.trail img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 3px #fff)}
@keyframes trail{from{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-120%) scale(.2) rotate(60deg)}}

/* ── windows open ── */
.formwin,.dialog--about,.giftwin,.share{animation:winopen .45s cubic-bezier(.2,.9,.3,1.15) both}
.formwin{animation-delay:1.4s}.dialog--about{animation-delay:1.7s}
@keyframes winopen{from{opacity:0;transform:scale(.8) translateY(24px)}to{opacity:1;transform:none}}
.win.is-dragging{box-shadow:inset 1px 1px #dfdfdf,inset -1px -1px #808080,10px 14px 0 rgba(0,20,80,.3)}
@media (min-width:980px){.win__title{cursor:move}}
.btn98.is-busy{pointer-events:none}
.btn98.is-busy::after{content:"";width:14px;height:14px;margin-left:8px;background:url(/stickers/sparkle-small.webp) center/contain no-repeat;animation:spinny 1s linear infinite}
@keyframes spinny{to{transform:rotate(360deg)}}

@media (max-width:440px){
  .hero{height:clamp(520px,86vh,680px)}.hero--gift{height:clamp(400px,58vh,520px)}
  .hero__kicker{font-size:16px;padding:2px 9px}.hero__sub{font-size:15px}
  .deco--boombox{width:104px;top:-44px;right:-6px}.deco--camera{width:88px;right:-4px}.deco--floppy{width:66px;right:-4px;top:-32px}.deco--heart{width:66px;right:-4px}.deco--phone{right:-2px}
}
@media (prefers-reduced-motion:reduce){.stk__fly,.ctitle,.hero__kicker,.hero__sub,.hero__cta,.formwin,.dialog--about{opacity:1!important;animation:none!important}}

/* ── 3D chrome gift (gift3d.js); the SVG stays as a no-WebGL fallback ── */
.gift3d{display:none;width:min(82vw,360px);aspect-ratio:1;position:relative;
  background:radial-gradient(circle at 50% 38%,#ffffff 0%,#e4f0ff 38%,#a9cdf7 78%,#86b6ef 100%);
  border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040,inset -1px -1px #dfdfdf}
.gift3d canvas{display:block;width:100%!important;height:100%!important}
.giftbox.has-3d .gift3d{display:block}
.giftbox.has-3d .giftbox__svg{display:none}
.giftbox.has-3d,.giftbox.has-3d.is-shaking{animation:none}
.giftbox.has-3d .giftbox__label{margin-top:8px}

/* ── surreal headline illustration (news3d.js) ── */
.np__fig{margin:0 0 12px;padding:0}
.np__art{position:relative;width:100%;aspect-ratio:16/10;display:none;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040;overflow:hidden;
  background:linear-gradient(180deg,#6a8cff,#b9a8ff 35%,#ffc8e6 60%,#ffe9c9 80%,#e7f0ff)}
.np__art.is-live{display:block}
.np__art canvas{display:block;width:100%!important;height:100%!important}
.np__art::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.32;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.np__fig figcaption{font-family:var(--mono);font-size:16px;color:#666;margin-top:4px;display:none}
.np__art.is-live + figcaption{display:block}

/* ── drag-and-drop gift maker ── */
.maker{padding:10px 10px 12px}
.maker__hint{margin:0 0 8px;text-align:center;font-family:var(--mono);font-size:21px;letter-spacing:.02em;color:#000}
.maker__stage{position:relative;width:100%;aspect-ratio:1.18;max-height:340px;margin:0 auto;
  background:radial-gradient(circle at 50% 40%,#ffffff 0%,#e4f0ff 40%,#a9cdf7 80%,#86b6ef 100%);
  border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040,inset -1px -1px #dfdfdf;overflow:hidden;touch-action:none}
.maker3d{position:absolute;inset:0}
.maker3d canvas{display:block;width:100%!important;height:100%!important}
.maker__zone{position:absolute;inset:14px;border:2px dashed rgba(0,0,128,.35);display:grid;place-items:center;font-family:var(--mono);font-size:22px;color:rgba(0,0,80,.55);pointer-events:none;transition:.2s}
.maker.has-3d .maker__zone{border-color:transparent}
.maker.has-3d .maker__zone span{position:absolute;bottom:4px;opacity:0;transition:.2s}
.maker__stage.is-hot .maker__zone{border-color:rgba(255,255,255,.9);background:rgba(255,255,255,.18);box-shadow:inset 0 0 40px rgba(255,255,255,.8)}
.maker__stage.is-hot .maker__zone span{opacity:1}
.inbox{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;min-height:30px;margin:8px 0 6px}
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 4px 2px 3px;background:#fff;border:1px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040;font-size:13px;max-width:100%;animation:chipin .35s cubic-bezier(.2,.9,.3,1.3)}
@keyframes chipin{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.chip img{width:22px;height:22px;object-fit:contain}
.chip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chip__x{display:grid;place-items:center;width:16px;height:14px;margin-left:2px;background:var(--grey);border:1px solid;border-color:#fff #404040 #404040 #fff;font-size:11px;line-height:1}
.tray{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;margin:0 0 10px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}
.titem{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px 4px;background:none;border:1px dotted transparent;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.titem:hover{border-color:#000080;background:rgba(0,0,128,.06)}
.titem img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,25,80,.3));transition:transform .2s;animation:wob 3s ease-in-out infinite alternate}
.titem:nth-child(2n) img{animation-delay:-1.2s}.titem:nth-child(3n) img{animation-delay:-2s}
@keyframes wob{from{transform:rotate(-4deg) translateY(0)}to{transform:rotate(4deg) translateY(-3px)}}
.titem:hover img{transform:scale(1.12) rotate(-6deg)}
.titem span{font-size:12px;line-height:1.1;text-align:center}
.titem__must{position:absolute;top:0;right:2px;font-style:normal;font-family:var(--mono);font-size:14px;background:#000080;color:#fff;padding:0 3px;line-height:1.1}
.titem.is-lifted img{opacity:.25}
.titem.is-in{opacity:.38}
.titem.is-in::after{content:"\2713";position:absolute;top:4px;left:6px;font-weight:700;font-size:15px;color:#000080}
.titem.is-in .titem__must{display:none}
.ghost{position:fixed;left:0;top:0;width:72px;height:72px;object-fit:contain;z-index:50;pointer-events:none;filter:drop-shadow(0 14px 14px rgba(0,25,80,.35));will-change:transform}
.maker__wrap{font-size:16px;padding:8px 28px}
.maker__wrap.is-ready{animation:readyglow 1.4s ease-in-out infinite}
@keyframes readyglow{0%,100%{box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080,0 0 0 rgba(255,255,255,0)}50%{box-shadow:inset 1px 1px #fff,inset -1px -1px #404040,inset 2px 2px #dfdfdf,inset -2px -2px #808080,0 0 16px rgba(255,255,255,.95)}}
.ask{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:16px;background:rgba(0,20,80,.28);animation:fadeup .2s}
.ask__win{width:min(340px,100%);margin:0;animation:winopen .3s cubic-bezier(.2,.9,.3,1.2) both}
.ask__body{text-align:center;padding:14px}
.ask__icon{width:84px;height:84px;object-fit:contain;margin:0 auto 4px;display:block;filter:drop-shadow(0 8px 8px rgba(0,25,80,.3));animation:wob 2.4s ease-in-out infinite alternate}
.ask__q{font-size:16px;font-weight:700;margin:0 0 10px}
.ask__fields{display:grid;gap:8px;margin-bottom:12px}
.ask__fields textarea{font-family:var(--mono);font-size:20px;line-height:1.1;resize:vertical}
@media (max-width:440px){.titem img{width:50px;height:50px}.tray{gap:2px;padding:6px 4px}.maker__hint{font-size:19px}}

/* ── maker tabs ── */
.tabs{display:flex;gap:2px;padding-left:4px;margin-top:4px;position:relative;z-index:1}
.tab{padding:4px 12px 3px;background:var(--grey);border:2px solid;border-bottom:0;border-color:#fff #404040 transparent #fff;font-size:13px;margin-bottom:-2px;cursor:var(--cur-hand)}
.tab.is-on{padding-top:6px;margin-top:-2px;font-weight:700;background:#fff;border-color:#fff #404040 #fff #fff}
.tray{border-top-color:#808080}
.titem span{font-size:11.5px;min-height:2.3em;display:flex;align-items:center}
.chip__photo{border-radius:2px;object-fit:cover!important}
.photo-pick{display:flex;justify-content:center}
.photo-pick input{position:absolute;width:1px;height:1px;opacity:0}
.photo-prev{display:block;max-width:100%;max-height:190px;margin:0 auto;border:6px solid #fff;box-shadow:2px 3px 0 rgba(0,20,80,.25);transform:rotate(-2deg)}

/* ── Winamp playlist ── */
.amp__pl{list-style:none;margin:8px 0 0;padding:4px;background:#0a1736;border:2px solid;border-color:#404a5a #e8edf4 #e8edf4 #404a5a;font-family:var(--mono);font-size:17px;color:#8fd0ff}
.amp__pl li{display:flex;justify-content:space-between;gap:8px;padding:1px 6px;cursor:var(--cur-hand)}
.amp__pl li span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amp__pl li em{font-style:normal;opacity:.6;white-space:nowrap;text-transform:uppercase;font-size:14px}
.amp__pl li.is-on{background:#1e3a7a;color:#fff}

/* ── photo memory polaroid ── */
.polaroid-wrap{padding:16px 10px 20px;background:repeating-linear-gradient(45deg,#d6dbe4 0 10px,#cfd5df 10px 20px)}
.polaroid{margin:0 auto;width:min(86%,340px);background:#fbfaf6;padding:12px 12px 0;box-shadow:0 10px 22px rgba(0,20,60,.3);transform:rotate(-2.2deg)}
.polaroid__img{position:relative;aspect-ratio:1;overflow:hidden;background:#222}
.polaroid__img img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(.9) sepia(.12)}
.polaroid__img::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.45;
  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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.polaroid__stamp{position:absolute;right:10px;bottom:8px;font-family:var(--mono);font-size:24px;letter-spacing:.06em;color:#ff8a2a;text-shadow:0 0 4px rgba(255,120,30,.9),0 0 1px #ffb070;z-index:1}
.polaroid figcaption{font-family:var(--mono);font-size:22px;text-align:center;padding:10px 0 14px;color:#333}

/* ── first text on a flip phone ── */
.sms{margin:6px;padding:10px 12px 12px;background:linear-gradient(180deg,#bfe4d8,#9fd0c2);border:3px solid #1c2a3a;border-radius:6px;box-shadow:inset 0 0 18px rgba(0,60,50,.25);font-family:var(--mono);color:#0d2620}
.sms__bar{display:flex;justify-content:space-between;font-size:17px;border-bottom:2px solid #0d2620;padding-bottom:3px;margin-bottom:8px}
.sms__from{margin:0 0 6px;font-size:19px}
.sms__body{margin:0;font-size:26px;line-height:1.1;white-space:pre-wrap;word-wrap:break-word}
.sms__foot{margin:10px 0 0;font-size:16px;opacity:.65;text-align:right}

/* ── moon, birthdays, time since ── */
.moonbox{display:flex;align-items:center;gap:14px;padding:12px;margin:4px;background:radial-gradient(circle at 30% 40%,#2a3a72,#0b1230 70%);color:#e9efff}
.moonbox canvas{width:132px;height:132px;flex:none}
.moon__label{margin:0;font-family:var(--mono);font-size:18px;opacity:.75}
.moon__name{margin:2px 0;font-size:24px}
.moon__lit{margin:0;font-family:var(--mono);font-size:18px}
.born{list-style:none;margin:0;padding:0;font-size:21px}
.born li{padding:6px 0;border-bottom:1px dashed #bbb}
.born li b{display:inline-block;min-width:3.2em}
.born li span{display:block;font-size:17px;color:#555;padding-left:3.2em}
.since{padding:12px;margin:4px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}
.since__head{margin:0 0 8px;font-family:var(--mono);font-size:19px;text-align:center}
.since__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.since__grid div{background:#eef2f7;padding:8px;text-align:center}
.since__grid b{display:block;font-size:22px;font-family:var(--round);font-weight:700;color:#000080}
.since__grid span{font-family:var(--mono);font-size:16px}
@media (max-width:440px){.moonbox canvas{width:110px;height:110px}.titem span{font-size:11px}}

/* ── favourite memory (DVD screen) + inside joke (error box) ── */
.deco--dvd{width:104px;right:-12px;top:-46px;--r:8deg}
.dvd{margin:6px;padding:12px 14px 14px;background:radial-gradient(circle at 30% 20%,#2f63e0,#0d2a8a 70%);border:3px solid #111;color:#fff;font-family:var(--mono);box-shadow:inset 0 0 26px rgba(0,0,40,.5)}
.dvd__bar{display:flex;justify-content:space-between;font-size:18px;letter-spacing:.08em;opacity:.85;margin-bottom:10px}
.dvd__body{margin:0;font-size:25px;line-height:1.12;white-space:pre-wrap;word-wrap:break-word;text-shadow:0 0 6px rgba(160,200,255,.7)}
.dvd__foot{margin:12px 0 0;font-size:16px;opacity:.7;text-align:right}
.joke{display:flex;gap:12px;align-items:flex-start;padding:16px 14px 6px}
.joke__icon{width:78px;flex:none;filter:drop-shadow(0 6px 6px rgba(0,25,80,.3));animation:wob 2.4s ease-in-out infinite alternate}
.joke__err{margin:0 0 6px;font-weight:700;font-size:14px}
.joke__body{margin:0;font-family:var(--mono);font-size:23px;line-height:1.12;white-space:pre-wrap;word-wrap:break-word}
.joke__btns{padding:8px 0 12px}
.maker__plus{margin:0 0 10px;text-align:center;font-size:12px;color:#333}
.tray{border-top-color:#808080}

/* ════════ GAME MODE: one full screen at a time, the page never scrolls ════════ */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
.page{position:fixed;left:0;right:0;top:32px;bottom:0;max-width:none;margin:0;padding:0;overflow:hidden}
.stage{position:absolute;inset:0;animation:none}
.hero,.hero--gift{position:absolute;inset:0;width:auto;height:auto;margin:0}
#make .hero__center{padding-bottom:4vh}
.ctitle{width:min(84vw,640px,calc(34vh * 2.21))}

/* make: intro ↔ maker */
#make[data-scr="intro"] .formwin{display:none}
#make[data-scr="maker"] .hero__center{display:none}
.formwin{position:absolute;top:10px;bottom:10px;left:0;right:0;margin:0 auto;width:min(600px,calc(100% - 12px));display:flex;flex-direction:column;z-index:3;animation:winopen .38s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:0s}
.formwin .deco{display:none}
.formwin .maker{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:8px 8px 8px}
.maker__hint{flex:none;margin-bottom:6px}
.maker__stage{flex:1 1 auto;min-height:110px;aspect-ratio:auto;max-height:none}
.inbox{flex:none;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;min-height:32px;margin:6px 0;padding-bottom:2px;scrollbar-width:none}
.inbox::-webkit-scrollbar{display:none}
.inbox:empty::before{content:"nothing inside yet";font-family:var(--mono);font-size:17px;color:#555;margin:auto}
.chip{flex:none}
.tray{flex:none;margin:0 0 6px}
.maker__plus{flex:none;margin:0 0 6px}
.formwin .btnrow{flex:none}
.formwin .err{flex:none;margin:6px 0 0}

/* gift: share / box / reveal */
.scr{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:12px 10px;z-index:3;animation:pop .35s ease-out both}
#gift[data-scr="share"] .scr--share,#gift[data-scr="box"] .scr--box,#gift[data-scr="reveal"] .scr--reveal{display:flex}
.scr__head{text-align:center;flex:none}
.scr__head .hero__kicker{margin-bottom:8px}
.scr__head .hero__sub{margin-top:8px}
.ctitle--gift{width:min(82vw,520px,calc(24vh * 1.633))}
.ctitle--wrapped{width:min(84vw,560px,calc(24vh * 1.853))}
.share,.giftwin{width:min(460px,100%);margin:0;flex:none}
.share__lead{text-align:center}
.giftwin .win__menu{display:none}
.giftbody{padding:8px}
.giftbox{margin:0;padding:4px}
.gift3d{width:min(72vw,300px,34vh)}
.scr__foot{flex:none}

.scr--reveal{justify-content:flex-start;gap:0;padding:0 8px}
.deck{flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center;padding:34px 4px 6px}
.deck>.card{grid-area:1/1;width:min(560px,100%);max-height:100%;display:none;flex-direction:column;opacity:1;transform:none;animation:none;margin:0}
.deck>.card.is-on{display:flex;animation:slidein .45s cubic-bezier(.2,.9,.3,1.12) both}
.deck>.card.is-on.from-left{animation-name:slideinL}
@keyframes slidein{from{opacity:0;transform:translateX(46px) rotate(2deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes slideinL{from{opacity:0;transform:translateX(-46px) rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
.deck>.card>*:not(.win__title):not(.win__menu):not(.win__status):not(.deco):not(.btnrow){flex:1 1 auto;min-height:0;overflow:auto}
.deck .win__status,.deck .win__menu{flex:none}
.decknav{flex:none;width:min(560px,100%);display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 2px 12px}
.decknav .btn98{min-width:96px}
.decknav .btn98[hidden]{display:inline-flex!important;visibility:hidden}
.decknav__pos{display:flex;flex-direction:column;align-items:center;gap:3px;font-family:var(--mono);font-size:19px;color:#fff;text-shadow:1px 1px 0 #00105a}
.decknav__dots{display:flex;gap:4px}
.decknav__dots i{width:8px;height:8px;background:#fff;opacity:.45;border:1px solid #000080}
.decknav__dots i.is-on{opacity:1;background:#000080;border-color:#fff}
.endcard{text-align:center;padding:18px 14px 16px}
.endcard__heart{width:96px;margin:0 auto 6px;display:block;filter:drop-shadow(0 8px 8px rgba(0,25,80,.3));animation:wob 2.4s ease-in-out infinite alternate}
.endcard__big{font-size:20px;font-weight:700;margin:0 0 4px}
.endcard__small{font-family:var(--mono);font-size:19px;margin:0 0 14px;color:#333}

#lost{display:grid;place-items:center}
#lost .dialog{margin:0}
@media (max-width:440px){
  .formwin{top:4px;bottom:4px;width:calc(100% - 8px)}
  .maker__plus{font-size:11px}
  .titem{padding:4px 1px 2px}
  .titem img{width:46px;height:46px}
  .deck{padding-top:30px}
}
@media (max-height:700px){.titem img{width:42px;height:42px}.maker__hint{font-size:18px;margin-bottom:4px}.ctitle--gift{width:min(76vw,calc(22vh * 1.633))}}
/* the page must never scroll, not even programmatically (focus used to nudge it) */
.page,.stage,.scr,.deck{overflow:clip}
.formwin{z-index:10}
#make[data-scr="maker"] .stk{opacity:.0;pointer-events:none;transition:opacity .3s}
@media (min-width:700px){#make[data-scr="maker"] .stk{opacity:1}}
.scr{z-index:10}
.scr--share .deco--phone{right:auto;left:-14px;top:-48px;--r:-14deg}
@media (max-width:700px){.decknav{padding-right:60px}.decknav .btn98{min-width:84px}}

/* ── big bubbly heading on every page of the reveal ── */
.deckhead{flex:none;margin:6px 0 0;height:clamp(58px,13vh,118px);display:flex;align-items:center;justify-content:center;width:100%}
.deckhead img{height:100%;width:auto;max-width:94vw;object-fit:contain;filter:drop-shadow(0 0 1px #08142e) drop-shadow(0 0 1.5px #08142e) drop-shadow(0 4px 0 rgba(255,255,255,.6)) drop-shadow(0 14px 18px rgba(0,20,70,.5))}
.deckhead.is-in img{animation:headin .5s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes headin{from{opacity:0;transform:scale(.6) rotate(-4deg)}to{opacity:1;transform:none}}
.deck{padding-top:22px}
.deck .win__menu,.deck .win__status{display:none}
.deck .notepad{font-size:22px}
.deck .np__head{font-size:27px;line-height:1.12}
.deck .np__also{font-size:19px}
.decknav .btn98{min-height:46px;font-size:16px;min-width:112px}
#deckNext{animation:readyglow 1.4s ease-in-out infinite}

/* ── big, obvious open button + a pixel hand pointing at the box ── */
.giftbox{position:relative}
.openbtn{display:inline-flex;align-items:center;gap:8px;font-size:18px;padding:8px 24px 8px 14px;margin-top:6px;animation:readyglow 1.4s ease-in-out infinite}
.openbtn img{width:34px;height:34px;object-fit:contain;animation:wob 1.6s ease-in-out infinite alternate}
.openhint{margin:6px 0 0;font-family:var(--mono);font-size:17px;color:#333;text-align:center}
.pointer-hand{position:absolute;right:6%;bottom:8%;width:42px;height:48px;pointer-events:none;z-index:2;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.25));
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16' shape-rendering='crispEdges'><path d='M5 0h2v1h1v7h1v-3h2v1h1v-1h2v1h1v7h-1v2h-1v1h-7v-1h-1v-1h-1v-1h-1v-1h-1v-1h-1v-2h2v1h1v-8h1z' fill='%23000'/><path d='M5 1h1v8h1v-3h1v3h1v-3h1v3h1v-3h1v1h1v1h-1v6h-1v1h-5v-1h-1v-1h-1v-1h-1v-1h-1v-1h1v1h1v1h1v-10z' fill='%23fff'/></svg>") center/contain no-repeat;
  transform:rotate(-28deg);animation:tapme 1.1s ease-in-out infinite}
@keyframes tapme{0%,100%{transform:rotate(-28deg) translate(0,0)}50%{transform:rotate(-28deg) translate(-8px,-10px)}}
.giftbox.is-open .pointer-hand{display:none}
.giftbox:not(.has-3d) .pointer-hand{display:none}

/* ── old-school "copying files" wrapping dialog ── */
.wrapping{z-index:60}
.wrapdlg{width:min(360px,100%);margin:0;animation:winopen .3s cubic-bezier(.2,.9,.3,1.2) both}
.wrapdlg__body{text-align:left;padding:14px 14px 12px}
.wrapfly{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.wrapfly__from,.wrapfly__to{width:54px;height:54px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 4px rgba(0,25,80,.3))}
.wrapfly__lane{position:relative;flex:1;height:64px}
.wrapfly__item{position:absolute;left:0;top:20px;width:34px;height:34px;object-fit:contain;animation:flyfile 1.05s ease-in-out forwards}
@keyframes flyfile{0%{left:0;top:22px;transform:scale(.7) rotate(-10deg);opacity:0}15%{opacity:1}50%{top:-2px;transform:scale(1.05) rotate(8deg)}90%{opacity:1}100%{left:calc(100% - 34px);top:22px;transform:scale(.5) rotate(18deg);opacity:0}}
.wrapdlg__msg{margin:0 0 8px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress98{height:24px;padding:2px;background:#fff;border:2px solid;border-color:#808080 #fff #fff #808080;box-shadow:inset 1px 1px #404040}
.progress98 i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#000080 0 12px,transparent 12px 15px);transition:width .35s steps(3)}
.wrapdlg__eta{margin:8px 0 0;font-size:13px;color:#333}
@media (max-width:440px){.deck .notepad{font-size:20px}.deck .np__head{font-size:24px}.decknav .btn98{min-width:96px}}
.scr--share .deco--phone{display:none}
.deckhead{position:relative;isolation:isolate}
.deckhead::before{content:"";position:absolute;inset:-10% 8%;z-index:-1;background:radial-gradient(closest-side,rgba(10,40,130,.45),rgba(10,40,130,0));filter:blur(10px)}
@media (max-width:700px){#gift[data-scr="reveal"] .stk{opacity:.28;transition:opacity .4s}}