/* Love Gacha: the play page. */
html, body { height: 100%; }
body.play-page { overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }

.bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.55), rgba(255,255,255,0) 55%),
    radial-gradient(var(--dot) 2.2px, transparent 2.6px) 0 0 / 26px 26px,
    radial-gradient(var(--dot) 2.2px, transparent 2.6px) 13px 13px / 26px 26px,
    linear-gradient(180deg, var(--bgA), var(--bgB));
}
.theme-dark .bg {
  background:
    radial-gradient(circle at 50% 38%, rgba(120,110,255,.25), rgba(0,0,0,0) 55%),
    radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.5px) 0 0 / 61px 53px,
    radial-gradient(rgba(255,214,236,.35) 1px, transparent 1.6px) 23px 31px / 47px 41px,
    linear-gradient(180deg, var(--bgA), var(--bgB));
}

.app {
  position: fixed; inset: 0; z-index: 1;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: 100%;
  padding: calc(var(--sat) + 8px) calc(var(--sar) + 10px) calc(var(--sab) + 8px) calc(var(--sal) + 10px);
}

/* header */
.top { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.top-title { flex: 1; min-width: 0; text-align: center; }
.eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: var(--inkSoft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top h1 {
  font-family: var(--f-display); font-size: clamp(17px, min(5vw, 3.4vh), 28px); line-height: 1.12; color: var(--ink);
  overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.album-btn {
  flex: none; min-width: 48px; height: 48px; padding: 0 12px 0 8px; border-radius: 999px; border: 0;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); color: var(--panelInk); font-weight: 700; font-size: 15px;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.10), 0 4px 12px -6px rgba(80,10,50,.35);
}
.album-ico {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent) 0 47%, #b33a62 47% 55%, #fff 55%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.15), inset -3px -3px 0 rgba(0,0,0,.06);
}
.album-btn.bump { animation: bump .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.25); } 100% { transform: scale(1); } }
#btn-sound .x { display: none; }
#btn-sound[aria-pressed="false"] .x { display: inline; }
#btn-sound[aria-pressed="false"] .wave { display: none; }

/* stage */
.stage { position: relative; min-height: 0; }
#machine { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hit {
  position: absolute; border: 0; background: transparent; padding: 0; border-radius: 50%;
  touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab;
}
.hit:active { cursor: grabbing; }
.hit:focus-visible { outline: 4px solid var(--ink); outline-offset: 2px; }
.hit-door { border-radius: 30px; cursor: pointer; }
.hit-door::after {
  content: 'tap me!'; position: absolute; left: 50%; top: calc(100% - 4px); transform: translateX(-50%);
  background: var(--ink); color: var(--panel); font-weight: 700; font-size: 14px; padding: 5px 12px; border-radius: 999px;
  white-space: nowrap; animation: hop 1.1s ease-in-out infinite; pointer-events: none;
}
.theme-dark .hit-door::after { background: var(--panel); color: var(--panelInk); }
@keyframes hop { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.slot-target { position: absolute; pointer-events: none; }

/* tray */
.tray { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }
.hint {
  margin: 0; min-height: 24px; font-weight: 700; font-size: 17px; text-align: center; color: var(--ink);
  transition: opacity .2s;
}
.hint.pulse { animation: hintpop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes hintpop { 0% { transform: scale(.85); opacity: .3; } 100% { transform: scale(1); opacity: 1; } }
.coins {
  position: relative; border: 0; background: rgba(255,255,255,.45); border-radius: 999px; padding: 6px 14px; min-height: 60px; min-width: 120px;
  max-width: 100%; display: flex; align-items: center; justify-content: center; touch-action: none;
  box-shadow: inset 0 3px 8px rgba(80,10,50,.15), 0 1px 0 rgba(255,255,255,.7);
}
.theme-dark .coins { background: rgba(255,255,255,.08); box-shadow: inset 0 3px 8px rgba(0,0,0,.4); }
.coins[disabled] { cursor: default; }
.coin-row { display: flex; align-items: center; }
.coin {
  width: 46px; height: 46px; flex: none; margin-left: -14px; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 35% 30%, #fff8c8 0 12%, #ffd84a 34%, #f0a800 72%, #b97c00 100%);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), inset 0 -3px 0 rgba(140,80,0,.35), 0 3px 6px -2px rgba(100,50,0,.5);
  display: grid; place-items: center; touch-action: none;
}
.coin:first-child { margin-left: 0; }
.coin svg { width: 22px; height: 22px; fill: #c98600; filter: drop-shadow(0 1px 0 rgba(255,255,255,.7)); }
.coin.coin-next { animation: coinwiggle 2.4s ease-in-out infinite; }
@keyframes coinwiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg) translateY(-3px); } 92% { transform: rotate(10deg) translateY(-2px); } }
.coin.dragging { visibility: hidden; }
.coin.arrive { animation: coinin .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes coinin { 0% { transform: translateY(-60px) scale(.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.coin-more { margin-left: 8px; font-weight: 700; font-size: 15px; color: var(--ink); }
.tokens-left { margin: 0; font-size: 14px; font-weight: 600; color: var(--inkSoft); min-height: 20px; }
.coin-fly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.coin-fly-layer .coin { position: absolute; left: 0; top: 0; margin: 0; will-change: transform; }

/* fx canvas */
.fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 95; }

/* opening layer */
.open-layer {
  position: fixed; inset: 0; z-index: 50;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.35), rgba(40,0,30,.55));
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: fadein .25s ease both; touch-action: none;
}
.theme-dark .open-layer { background: radial-gradient(circle at 50% 45%, rgba(120,110,255,.25), rgba(0,0,20,.7)); }
.twist-btn { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: transparent; cursor: grab; touch-action: none; border-radius: 0; }
.twist-btn:focus-visible { outline: none; }
.twist-btn:focus-visible .open-hint { outline: 3px solid #fff; outline-offset: 4px; }
.open-hint {
  position: absolute; left: 50%; bottom: calc(var(--sab) + 12%); transform: translateX(-50%);
  background: #fff; color: #4a1530; font-weight: 700; font-size: 18px; padding: 10px 20px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,.4);
}
.twist-arrows { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.twist-arrows span {
  position: absolute; top: var(--cy, 45%); font-size: 46px; color: #fff; font-weight: 700; text-shadow: 0 3px 10px rgba(0,0,0,.35);
  animation: sway 1.2s ease-in-out infinite; transform: translateY(-50%);
}
.twist-arrows span:first-child { left: calc(var(--cx, 50%) - var(--cr, 100px) - 54px); }
.twist-arrows span:last-child { left: calc(var(--cx, 50%) + var(--cr, 100px) + 10px); animation-delay: -.6s; }
@keyframes sway { 0%, 100% { transform: translateY(-50%) rotate(-14deg); } 50% { transform: translateY(-50%) rotate(14deg); } }
.open-layer.popped .twist-arrows, .open-layer.popped .open-hint { opacity: 0; transition: opacity .15s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* reveal card */
.card-layer {
  position: fixed; inset: 0; z-index: 85; display: grid; place-items: center;
  padding: calc(var(--sat) + 14px) calc(var(--sar) + 14px) calc(var(--sab) + 14px) calc(var(--sal) + 14px);
  overflow-y: auto; overscroll-behavior: contain;
}
.card-layer.dim { background: rgba(40,0,30,.45); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.card-wrap { width: min(100%, 380px); margin: auto; }
.card-wrap.ticket { filter: drop-shadow(0 24px 30px rgba(40,0,30,.45)); }
.card {
  --c: #ff4f7e; --l: #ffb3c8;
  position: relative; width: min(100%, 380px); margin: auto;
  background: #fffdf9; color: #3d1428; border-radius: 26px; padding: 18px 20px 18px;
  text-align: center; box-shadow: 0 30px 60px -20px rgba(40,0,30,.6), 0 0 0 4px var(--l);
  animation: cardin .6s cubic-bezier(.25,1.5,.45,1) both; transform-origin: 50% 40%;
}
.card:focus { outline: none; }
.card.out { animation: cardout .4s cubic-bezier(.6,0,.8,.4) both; }
@keyframes cardin { 0% { transform: scale(.2) rotate(-12deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes cardout { to { transform: translate(var(--ox, 0), var(--oy, -40vh)) scale(.1) rotate(20deg); opacity: 0; } }
.card-rarity {
  margin: 0 auto 10px; display: inline-flex; gap: 6px; align-items: center; padding: 4px 12px; border-radius: 999px;
  background: var(--c); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
}
.card-art {
  margin: 0 auto 10px; width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff, var(--l) 70%);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.06);
}
.card-emoji { font-size: 60px; line-height: 1; }
.card-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-kicker { margin: 0 0 4px; font-family: var(--f-display); font-size: 15px; letter-spacing: .06em; color: var(--c); text-transform: uppercase; }
.card-text { font-family: var(--f-body); font-weight: 650; font-size: clamp(21px, 6vw, 26px); line-height: 1.2; overflow-wrap: anywhere; }
.card-note { margin: 10px 0 0; font-size: 16px; line-height: 1.45; color: #6d3b53; white-space: pre-line; overflow-wrap: anywhere; }
.card-note:empty { display: none; }
.card-meta { margin: 12px 0 0; font-size: 14px; color: #8f6378; font-weight: 600; }
.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.card-actions .btn { flex: 1 1 140px; }

/* coupon: a ticket */
.card--coupon { --ny: 70%; --ty: 40%; border-radius: 18px; padding-top: 22px; box-shadow: none;
  -webkit-mask: radial-gradient(circle 14px at 0 var(--ny), transparent 13.5px, #000 14px) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% var(--ny), transparent 13.5px, #000 14px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 14px at 0 var(--ny), transparent 13.5px, #000 14px) left / 51% 100% no-repeat, radial-gradient(circle 14px at 100% var(--ny), transparent 13.5px, #000 14px) right / 51% 100% no-repeat;
  background:
    repeating-linear-gradient(90deg, var(--c) 0 10px, transparent 10px 18px) 0 var(--ny) / 100% 2px no-repeat,
    linear-gradient(180deg, var(--l) 0 var(--ty), #fffdf9 var(--ty));
}
.card--coupon .card-art { background: #fffdf9; box-shadow: 0 0 0 5px rgba(255,255,255,.6); }
/* memory: a polaroid */
.card--memory { border-radius: 10px; padding: 14px 14px 18px; transform-origin: 50% 50%; }
.card--memory .card-art { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 4px; background: linear-gradient(160deg, var(--l), var(--c)); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); overflow: hidden; }
.card--memory .card-emoji { font-size: 84px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.2)); }
.card--memory { --tilt: -2deg; }
/* promise */
.card--promise { background: radial-gradient(circle at 50% 0, var(--l), #fffdf9 55%); }
.card--promise .card-meta { font-family: var(--f-display); font-size: 15px; color: var(--c); letter-spacing: .02em; }
/* kilig note: a sticky note */
.card--note { border-radius: 6px 6px 26px 6px; background: linear-gradient(180deg, #fffbe6, #fff3c4); box-shadow: 0 30px 60px -20px rgba(40,0,30,.6); }
.card--note::before { content: ''; position: absolute; top: -12px; left: 50%; width: 90px; height: 26px; transform: translateX(-50%) rotate(-3deg); background: rgba(255,255,255,.65); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* golden */
.card--golden {
  background: linear-gradient(135deg, #fff8d6 0%, #ffe27a 30%, #ffd23f 50%, #fff2b0 70%, #f2b500 100%);
  background-size: 220% 220%; animation: cardin .7s cubic-bezier(.25,1.5,.45,1) both, foil 4s ease-in-out infinite;
  box-shadow: 0 30px 70px -18px rgba(150,90,0,.7), 0 0 0 4px #fff3b0, 0 0 40px 6px rgba(255,210,63,.6);
  color: #4d2c00;
}
.card--golden .card-note { color: #6b4300; }
.card--golden .card-meta { color: #8a5a00; }
.card--golden .card-art { background: radial-gradient(circle at 35% 30%, #fffbe6, #ffd23f 70%); box-shadow: 0 0 0 4px rgba(255,255,255,.7), 0 0 30px rgba(255,255,255,.8); }
.card--golden .card-text { font-family: var(--f-display); font-weight: 400; font-size: clamp(21px, 6.2vw, 27px); line-height: 1.25; }
@keyframes foil { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.claimed-stamp {
  position: absolute; top: 14px; right: 12px; transform: rotate(12deg); border: 3px solid var(--c); color: var(--c);
  font-family: var(--f-display); font-size: 13px; padding: 2px 8px; border-radius: 8px; background: rgba(255,255,255,.8);
}

/* sheets (album, claim) */
.sheet-layer {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(40,0,30,.45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadein .2s ease both;
}
.sheet {
  width: min(100%, 560px); max-height: calc(100% - var(--sat) - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--panel); color: var(--panelInk); border-radius: 28px 28px 0 0;
  padding: 18px calc(var(--sar) + 18px) calc(var(--sab) + 22px) calc(var(--sal) + 18px);
  animation: sheetin .35s cubic-bezier(.2,1.2,.4,1) both;
}
.sheet:focus { outline: none; }
@keyframes sheetin { from { transform: translateY(100%); } to { transform: none; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-head h2 { font-family: var(--f-display); font-size: 22px; }
.sheet-sub { margin: 4px 0 12px; font-size: 16px; color: var(--panelInk); opacity: .8; }
.legend { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(0,0,0,.05); }
.legend i { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(180deg, var(--c) 0 50%, #fff 50%); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.shelf li { min-width: 0; }
.shelf button, .shelf .unknown {
  width: 100%; min-height: 118px; border: 0; border-radius: 18px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: #fff; box-shadow: inset 0 -4px 0 rgba(0,0,0,.06), 0 0 0 2px var(--l, #eee); color: #3d1428; text-align: center;
}
.shelf .mini-cap { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: radial-gradient(circle at 35% 30%, #fff, var(--l) 75%); box-shadow: inset 0 0 0 2px var(--c); }
.shelf .s-text { font-size: 14px; line-height: 1.2; font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.shelf .unknown { background: rgba(0,0,0,.04); box-shadow: inset 0 0 0 2px rgba(0,0,0,.06); color: var(--panelInk); opacity: .7; justify-content: center; }
.shelf .unknown .mini-cap { background: linear-gradient(180deg, var(--c) 0 50%, rgba(255,255,255,.8) 50%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); color: transparent; opacity: .55; }
.shelf .s-claimed { font-size: 12px; font-weight: 700; color: var(--c); }
.sheet-small { max-width: 460px; }
.claim-msg { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; background: rgba(0,0,0,.05); font-size: 16px; overflow-wrap: anywhere; }
.claim-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.claim-actions .btn { flex: 1 1 160px; }
.claim-done { margin: 10px 0 0; min-height: 22px; font-weight: 600; text-align: center; }

/* intro */
.intro-layer {
  position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center;
  padding: calc(var(--sat) + 12px) calc(var(--sar) + 12px) calc(var(--sab) + 12px) calc(var(--sal) + 12px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(40,0,30,.35));
  overflow-y: auto;
}
.intro {
  width: min(100%, 440px); margin-top: auto; background: var(--panel); color: var(--panelInk); border-radius: 30px; padding: 20px 20px 16px;
  text-align: center; box-shadow: var(--shadow); animation: sheetin .6s cubic-bezier(.2,1.2,.4,1) .35s both;
}
.intro:focus { outline: none; }
.intro-layer.out { animation: fadeout .35s ease forwards; }
.intro-layer.out .intro { animation: introout .35s ease forwards; }
@keyframes fadeout { to { opacity: 0; } }
@keyframes introout { to { transform: translateY(110%); } }
.intro-eyebrow { margin: 0; font-weight: 600; font-size: 16px; opacity: .85; }
.intro-title { font-family: var(--f-display); font-size: clamp(26px, 8vw, 38px); line-height: 1.1; color: var(--accent); margin: 4px 0 6px; overflow-wrap: anywhere; }
.intro-sub { margin: 0 0 12px; font-size: 16px; font-weight: 500; }
.intro-steps { list-style: none; padding: 0; margin: 0 0 14px; display: flex; justify-content: center; gap: 8px; }
.intro-steps li { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; line-height: 1.15; }
.st-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; font-weight: 700; }
.st-coin { background: radial-gradient(circle at 35% 30%, #fff8c8 0 12%, #ffd84a 34%, #f0a800 72%, #b97c00 100%); }
.st-crank { background: var(--accent); color: #fff; }
.st-pop { background: linear-gradient(180deg, var(--accent) 0 47%, #b33a62 47% 55%, #fff 55%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.15); }
.intro-link { display: inline-block; margin-top: 10px; padding: 10px 6px; font-size: 14px; font-weight: 600; opacity: .8; min-height: 44px; }

/* letter */
.letter-layer {
  position: fixed; inset: 0; z-index: 75; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(40,0,30,.5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadein .4s ease both;
  padding: calc(var(--sat) + 16px) calc(var(--sar) + 14px) calc(var(--sab) + 16px) calc(var(--sal) + 14px);
  display: flex;
}
.letter-wrap { margin: auto; width: min(100%, 460px); display: flex; flex-direction: column; align-items: center; }
.letter-wrap:focus { outline: none; }
.envelope {
  position: relative; width: min(84vw, 320px); aspect-ratio: 1.45; border: 0; padding: 0; background: transparent; border-radius: 14px;
  perspective: 900px; filter: drop-shadow(0 14px 22px rgba(60, 0, 30, .28));
  animation: envin .7s cubic-bezier(.25,1.5,.45,1) both, envfloat 3s ease-in-out .7s infinite;
}
@keyframes envin { from { transform: translateY(40vh) rotate(-10deg); } to { transform: none; } }
@keyframes envfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* Layers, back to front: back (1) · open flap (2) · letter (3) · front pocket (4) · closed flap (5) · seal (6).
   The flap swaps from 5 to 2 halfway through its flip, so the letter slides out IN FRONT of it. */
.env-back, .env-front, .env-flap, .env-paper { position: absolute; inset: 0; border-radius: 14px; }
.env-back { background: var(--accent); filter: brightness(.78); z-index: 1; }
.env-paper {
  inset: 7% 6% 12%; border-radius: 8px; z-index: 3;
  background: repeating-linear-gradient(to bottom, transparent 0 15px, rgba(61, 20, 40, .08) 15px 16px) 50% 70% / 74% 46% no-repeat, #fffdf9;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, .08);
  transition: transform .6s cubic-bezier(.3,1.3,.5,1) .3s;
}
.env-front { background: var(--accent); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); z-index: 4; }
.env-front::after { content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, .13); clip-path: polygon(0 100%, 50% 47%, 100% 100%); }
.env-flap {
  background: var(--accent); clip-path: polygon(0 0, 100% 0, 50% 58%); transform-origin: top; z-index: 5; filter: brightness(.93);
  transition: transform .5s cubic-bezier(.45, 0, .2, 1), z-index 0s linear .25s;
}
.env-seal { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--accent); font-size: 28px; z-index: 6; box-shadow: 0 4px 10px rgba(0,0,0,.2); transition: transform .3s, opacity .3s; }
.env-label { position: absolute; left: 0; right: 0; top: calc(100% + 12px); color: #fff; font-weight: 700; font-size: 17px; text-shadow: 0 2px 8px rgba(0,0,0,.35); }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 2; }
.envelope.open .env-seal { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.envelope.open .env-paper { transform: translateY(-44%); }
.letter {
  width: 100%; background: #fffdf9; color: #3d1428; border-radius: 22px; padding: 22px 22px 18px; box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(255,79,126,.12) 31px 32px);
  animation: letterin .6s cubic-bezier(.25,1.3,.45,1) both;
}
@keyframes letterin { from { transform: translateY(30px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.letter-eyebrow { margin: 0; font-size: 14px; font-weight: 600; color: #8f6378; }
.letter-title { font-family: var(--f-display); font-size: 25px; line-height: 1.15; color: var(--accent); margin: 2px 0 12px; overflow-wrap: anywhere; }
.letter-body p { margin: 0 0 12px; font-size: 17px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.letter-sign { margin: 6px 0 0; font-weight: 650; font-size: 18px; text-align: right; color: var(--accent); overflow-wrap: anywhere; }
.letter-left { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255,79,126,.1); font-weight: 600; font-size: 15px; }
.letter-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.letter-actions .btn { flex: 1 1 130px; }
.letter-actions .btn-main { flex-basis: 100%; }

.tray-foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 6px; min-height: 30px; }
.demo-ribbon { margin: 0; font-size: 14px; font-weight: 600; color: var(--inkSoft); text-align: center; }
.demo-ribbon a { display: inline-flex; align-items: center; min-height: 44px; margin: -7px 0; padding: 0 4px; color: var(--ink); }
.notice {
  position: fixed; z-index: 90; left: 50%; top: calc(var(--sat) + 70px); transform: translateX(-50%); max-width: calc(100% - 24px);
  background: var(--ink); color: var(--panel); padding: 10px 16px; border-radius: 16px; font-weight: 600; font-size: 15px;
  opacity: 0; pointer-events: none; transition: opacity .3s; text-align: center;
}
.notice.show { opacity: 1; }
.noscript { position: fixed; inset: auto 12px 12px; z-index: 100; background: #fff; padding: 12px; border-radius: 12px; }

/* landscape phones: machine left, controls right */
@media (orientation: landscape) and (max-height: 560px) {
  .app { grid-template-columns: minmax(0, 1.15fr) minmax(220px, 1fr); grid-template-rows: auto minmax(0, 1fr); column-gap: 14px; padding-top: calc(var(--sat) + 6px); padding-bottom: calc(var(--sab) + 6px); }
  .stage { grid-column: 1; grid-row: 1 / 3; }
  .top { grid-column: 2; grid-row: 1; }
  .tray { grid-column: 2; grid-row: 2; justify-content: center; gap: 8px; }
  .top h1 { font-size: clamp(16px, 4.5vh, 24px); }
  .intro-layer { align-items: center; }
  .intro { padding: 14px 18px 10px; }
  .intro-steps { margin-bottom: 8px; }
}
@media (min-width: 900px) and (min-height: 640px) {
  .app { padding-top: 18px; padding-bottom: 22px; }
  .top { max-width: 760px; margin: 0 auto; width: 100%; }
  .top h1 { font-size: 30px; }
  .eyebrow { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card--golden { animation: fadein .2s ease both !important; }
}

#claim-layer { z-index: 87; }
.card .btn:not(.btn-main), .letter .btn:not(.btn-main) { background: #fff; color: #4a1530; }
.card .btn-main { background: var(--c); box-shadow: inset 0 -5px 0 rgba(0,0,0,.16), inset 0 2px 0 rgba(255,255,255,.35), 0 8px 20px -8px var(--c); }
.card :focus-visible, .letter :focus-visible { outline-color: #4a1530; }
@media (min-width: 700px) and (min-height: 560px) {
  .sheet-layer { align-items: center; }
  .sheet { border-radius: 28px; max-height: calc(100% - 48px); }
}

/* wide screens: a few big soft capsules floating in the background */
@media (min-width: 1000px) {
  .bg::before, .bg::after {
    content: ''; position: absolute; border-radius: 50%; opacity: .5;
    background: linear-gradient(180deg, var(--accent) 0 47%, rgba(255,255,255,.0) 47% 53%, rgba(255,255,255,.9) 53%);
    box-shadow: inset -18px -18px 40px rgba(0,0,0,.08), inset 12px 12px 30px rgba(255,255,255,.6);
    animation: floaty 9s ease-in-out infinite;
  }
  .bg::before { width: 220px; height: 220px; left: 7%; top: 58%; transform: rotate(-24deg); }
  .bg::after { width: 150px; height: 150px; right: 9%; top: 18%; transform: rotate(32deg); animation-delay: -4s; background: linear-gradient(180deg, #ffd23f 0 47%, rgba(255,255,255,0) 47% 53%, rgba(255,255,255,.9) 53%); }
}
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -18px; } }