/* =====================================================================
   rooms.css - the look of every room
   ===================================================================== */

/* ---------- shared room frame ---------- */
.room {
  position: fixed; inset: 0; z-index: 20;
  overflow-y: auto; overflow-x: hidden; overflow-x: clip; -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(70% 50% at 50% 0%, var(--g1, #5b1330), transparent 70%),
    radial-gradient(60% 45% at 90% 100%, var(--g2, #3b1d5e), transparent 70%),
    var(--base, #1a0710);
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
  visibility: hidden;
  transition: clip-path .95s var(--ease), visibility 0s .95s;
}
.room.open { clip-path: circle(150% at var(--cx, 50%) var(--cy, 50%)); visibility: visible; transition: clip-path .95s var(--ease), visibility 0s 0s; }
.room.settled { clip-path: none; transition: none; }
.room.front { z-index: 22; }
.room.instant { transition: none !important; }

/* tiny stars on every room background */
.room::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 38% 72%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 66% 30%, var(--blush), transparent),
    radial-gradient(1px 1px at 84% 80%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 52% 12%, #ffe9b8, transparent),
    radial-gradient(1.5px 1.5px at 24% 88%, var(--lav), transparent),
    radial-gradient(1px 1px at 92% 46%, rgba(255,255,255,.6), transparent);
}

[data-room=birthday] { --g1: #7a1f42; --g2: #b23a63; --base: #1d0711; }
[data-room=memories] { --g1: #6b2037; --g2: #4b2a63; --base: #1a0812; }
[data-room=letter]   { --g1: #5b1330; --g2: #8c2a4a; --base: #16060d; }
[data-room=artwork]  { --g1: #3b1d5e; --g2: #7a1f42; --base: #140815; }
[data-room=stickers] { --g1: #4b2a7a; --g2: #8c2a4a; --base: #150a1e; }
[data-room=movie]    { --g1: #4a0f20; --g2: #1b0b2e; --base: #0b0206; }
[data-room=surprise] { --g1: #2a1a5e; --g2: #7a1f42; --base: #0a0414; }

.room-head { position: sticky; top: 0; z-index: 6; height: 0; padding: calc(14px + var(--safe-t)) 14px 0; pointer-events: none; }
.back {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 4px; padding: .6rem 1rem .6rem .6rem;
  border-radius: 999px; background: rgba(30, 8, 18, .62); border: 1px solid rgba(244, 194, 201, .25);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .8rem; letter-spacing: .04em; height: 46px;
  transition: transform .3s var(--ease), border-color .3s;
}
.back:hover { transform: translateX(-2px); border-color: var(--gold); }
.back svg { width: 20px; height: 20px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.room-body {
  position: relative; z-index: 1; max-width: 760px; margin: 0 auto;
  padding: calc(86px + var(--safe-t)) 20px calc(var(--dock-h) + 64px + var(--safe-b));
}
.room-body.wide { max-width: 1100px; }
@media (min-width: 860px) { .room-body { padding: 112px 32px 90px; } }

.room-title { text-align: center; display: grid; gap: 6px; justify-items: center; }
.room-title h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(2.3rem, 8vw, 3.8rem); line-height: 1.05; letter-spacing: .01em; }
.room-title .intro { max-width: 30ch; }

/* =====================================================================
   A. BIRTHDAY
   ===================================================================== */
.bday-deco { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.bunting { position: absolute; top: calc(64px + var(--safe-t)); left: -2%; right: -2%; display: flex; justify-content: space-between; }
.bunting::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(230, 194, 122, .6); }
.bunting i {
  position: relative; width: clamp(18px, 4.4vw, 36px); height: clamp(22px, 5.4vw, 44px); background: var(--c);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0;
  animation: sway 3.6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.45s);
}
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@media (min-width: 860px) { .bunting { top: 84px; } }

.balloon {
  position: absolute; width: 50px; height: 64px; border-radius: 50% 50% 48% 48%; opacity: .55;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .6), transparent 34%), var(--c);
  animation: balloon 7s ease-in-out infinite alternate;
}
.balloon::after { content: ''; position: absolute; top: 100%; left: 50%; width: 1px; height: 90px; background: rgba(255, 255, 255, .3); }
.balloon.b1 { --c: #c8467a; left: 2%; top: 30%; }
.balloon.b2 { --c: #b9a4ee; right: 3%; top: 40%; animation-delay: -2s; }
.balloon.b3 { --c: #e6c27a; right: 14%; top: 15%; width: 42px; height: 54px; animation-delay: -4s; }
@keyframes balloon { from { translate: 0 0; rotate: -3deg; } to { translate: 6px -22px; rotate: 3deg; } }
@media (min-width: 860px) { .balloon { width: 80px; height: 100px; opacity: .8; } .balloon.b1 { left: 9%; } .balloon.b2 { right: 10%; } .balloon.b3 { right: 22%; width: 60px; height: 76px; } }

.bday-body { text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; padding-top: calc(118px + var(--safe-t)); }
@media (min-width: 860px) { .bday-body { padding-top: 140px; } }
.bday-script { font-family: var(--display); font-weight: 400; display: flex; flex-direction: column; align-items: center; line-height: 1; margin: .2rem 0 .3rem; }
.bday-script > span { font-size: clamp(2.2rem, 8vw, 3.4rem); color: var(--blush); }
.bday-name {
  font-weight: 400; font-size: clamp(3.6rem, 17vw, 6.8rem); padding: .1em .14em .34em; margin: -.1em 0 -.34em;
  background: linear-gradient(100deg, var(--gold), #fff1d6 40%, var(--blush) 75%, var(--lav));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.cake-wrap { position: relative; width: min(76vw, 330px); margin: 1.2rem auto 0; }
.cake-glow {
  position: absolute; left: -12%; right: -12%; top: -18%; height: 80%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 210, 130, .75), transparent);
  opacity: calc(var(--lit, 1) * .55); transition: opacity .7s ease;
}
.cake-wrap.done .cake-glow { opacity: .35; }
#cake { position: relative; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); }

.candle { cursor: pointer; outline: none; }
.candle .hit { fill: transparent; }
.candle .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.3s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); transition: opacity .35s, transform .35s; }
.candle .glow { transition: opacity .35s; }
.candle.out .flame { animation: none; transform: scale(.1); opacity: 0; }
.candle.out .glow { opacity: 0; }
.candle .smoke { opacity: 0; fill: none; stroke: rgba(255, 255, 255, .6); stroke-width: 2; stroke-linecap: round; }
.candle.out .smoke { animation: smoke 1.8s ease-out forwards; }
.candle:focus-visible .hit { stroke: var(--gold); stroke-width: 2; stroke-dasharray: 4 4; }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); } 50% { transform: scale(.94, 1.07) rotate(2deg); } 100% { transform: scale(1.05, .96) rotate(-1deg); } }
@keyframes smoke { 0% { opacity: .75; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-28px); } }

.cake-status { min-height: 2em; margin-top: .8rem; font-family: var(--script); font-size: 1.55rem; color: var(--gold); }
.cake-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cake-actions .btn.listening { border-color: var(--blush); box-shadow: 0 0 0 4px rgba(244, 194, 201, .15); animation: glowRing 1.6s infinite; }
@keyframes glowRing { 0% { box-shadow: 0 0 0 0 rgba(244, 194, 201, .4); } 100% { box-shadow: 0 0 0 16px rgba(244, 194, 201, 0); } }

.msg-card {
  margin-top: 1.8rem; width: 100%; max-width: 560px; padding: 1.7rem 1.6rem; text-align: left;
  border-radius: 22px; background: linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02));
  border: 1px solid rgba(244, 194, 201, .22); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: var(--serif); font-size: 1.32rem; line-height: 1.55;
}
.msg-card p + p { margin-top: .9em; }

/* =====================================================================
   B. MEMORIES (timeline)
   ===================================================================== */
.timeline { position: relative; margin-top: 2.4rem; padding: 10px 0; }
.timeline::before {
  content: ''; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px; opacity: .55;
  background: linear-gradient(180deg, transparent, var(--gold) 8%, var(--blush) 92%, transparent);
}
.memory {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-left: 54px; margin-bottom: 52px;
  opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.memory.in { opacity: 1; transform: none; }
.memory::before {
  content: ''; position: absolute; left: 11px; top: 26px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--gold); box-shadow: 0 0 16px var(--gold);
}
.polaroid {
  position: relative; display: block; width: 100%; max-width: 340px; text-align: left; padding: 12px 12px 14px;
  background: #fffaf0; color: #3a1a24; border-radius: 4px; cursor: zoom-in;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5); transform: rotate(var(--rot, -2deg));
  transition: transform .5s var(--ease), box-shadow .5s;
}
.polaroid::before {
  content: ''; position: absolute; top: -13px; left: 50%; width: 88px; height: 26px; margin-left: -44px;
  background: rgba(244, 194, 201, .78); transform: rotate(-3deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  clip-path: polygon(3% 0, 97% 0, 100% 15%, 96% 50%, 100% 85%, 97% 100%, 3% 100%, 0 85%, 4% 50%, 0 15%);
}
.polaroid:hover { transform: rotate(0) translateY(-6px) scale(1.02); box-shadow: 0 28px 60px rgba(0, 0, 0, .55); }
.polaroid .ph { aspect-ratio: 4 / 5; overflow: hidden; background: #e5d6d0; border-radius: 2px; }
.polaroid .ph img { width: 100%; height: 100%; object-fit: cover; }
.polaroid .meta { padding: 12px 4px 0; }
.polaroid .date { font-size: .62rem; letter-spacing: .24em; text-transform: uppercase; color: #a07a2c; font-weight: 700; }
.polaroid .ttl { font-family: var(--script); font-size: 1.85rem; line-height: 1.05; margin-top: 2px; color: #5b1330; }
.mem-cap { margin-top: 16px; max-width: 340px; font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.45; color: rgba(251, 241, 227, .85); }
.end-note { text-align: center; margin-top: 10px; font-family: var(--script); font-size: 1.5rem; color: var(--gold); opacity: .8; }
.end-note::after { content: ''; display: inline-block; width: 1.4em; text-align: left; animation: dots 1.6s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

@media (min-width: 860px) {
  .timeline::before { left: 50%; margin-left: -1px; }
  .memory { width: 50%; padding: 0 58px 0 0; align-items: flex-end; text-align: right; margin-bottom: 64px; }
  .memory::before { left: auto; right: -8px; }
  .memory:nth-child(even) { margin-left: 50%; padding: 0 0 0 58px; align-items: flex-start; text-align: left; }
  .memory:nth-child(even)::before { right: auto; left: -8px; }
}

/* =====================================================================
   C. LETTER
   ===================================================================== */
.env-stage { display: grid; justify-items: center; gap: 22px; margin-top: 2.6rem; }
.envelope { position: relative; width: min(84vw, 400px); aspect-ratio: 3 / 2; transition: transform .8s var(--ease), opacity .8s ease; }
.envelope > * { position: absolute; }
.env-back { inset: 0; background: linear-gradient(180deg, #e9c4c0, #d6a2a8); border-radius: 8px; box-shadow: 0 26px 60px rgba(0, 0, 0, .55); }
.env-peek {
  left: 6%; right: 6%; top: 6%; bottom: 8%; z-index: 2; border-radius: 4px; background: #fbf1e3;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, .15); transition: transform 1s var(--ease) .35s;
}
.env-peek::before { content: ''; position: absolute; left: 12%; right: 12%; top: 18%; height: 2px; background: rgba(140, 42, 74, .25); box-shadow: 0 14px 0 rgba(140, 42, 74, .2), 0 28px 0 rgba(140, 42, 74, .2); }
.env-front { inset: 0; z-index: 3; background: linear-gradient(160deg, #f6d4d3, #e0aeb3); clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); border-radius: 8px; }
.env-flap {
  left: 0; right: 0; top: 0; height: 56%; z-index: 4; transform-origin: 50% 0;
  background: linear-gradient(180deg, #f1c7c9, #d99da6); clip-path: polygon(0 0, 100% 0, 50% 100%);
  transition: transform .9s var(--ease);
}
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.envelope.open .env-peek { transform: translateY(-58%); }
.seal {
  left: 50%; top: 55%; width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 6; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #dd5f84, #8c1d44 60%, #5b1330);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(230, 194, 122, .55);
  animation: sealPulse 2.2s ease-in-out infinite; transition: transform .5s var(--ease), opacity .4s;
}
.seal svg { width: 28px; height: 28px; fill: var(--gold); }
.seal:hover { transform: scale(1.1); }
@keyframes sealPulse { 0%, 100% { box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(230,194,122,.55), 0 0 0 0 rgba(244,194,201,.5); } 60% { box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 3px rgba(230,194,122,.55), 0 0 0 18px rgba(244,194,201,0); } }
.envelope.open .seal { opacity: 0; transform: scale(.4) rotate(40deg); pointer-events: none; }
.env-hint { font-family: var(--script); font-size: 1.6rem; color: var(--gold); animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -6px; } }
.env-stage.leaving .envelope { transform: translateY(40px) scale(.9); opacity: 0; }
.env-stage.leaving .env-hint { opacity: 0; }

.paper-view { margin-top: 1.8rem; display: grid; justify-items: center; gap: 26px; animation: paperIn 1s var(--ease); }
@keyframes paperIn { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.paper {
  width: 100%; max-width: 620px; padding: clamp(28px, 6vw, 56px) clamp(22px, 6vw, 56px); border-radius: 6px;
  background: linear-gradient(rgba(255, 255, 255, .5), transparent 35%), #fbf1e3; color: #3a1a24;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), inset 0 0 60px rgba(160, 110, 60, .12);
}
.paper .greet { font-family: var(--script); font-size: 2.3rem; color: #7a1f42; margin-bottom: .5em; }
.paper p { font-family: var(--script); font-size: 1.75rem; line-height: 1.4; }
.paper.serif p { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.6; }
.paper p + p { margin-top: .8em; }
.paper .greet, .paper p, .paper .sign { opacity: 0; transform: translateY(10px); animation: lineIn2 .9s var(--ease) forwards; animation-delay: calc(var(--i) * .3s + .4s); }
@keyframes lineIn2 { to { opacity: 1; transform: none; } }
.paper .sign { margin-top: 1.4em; font-family: var(--script); font-size: 1.75rem; color: #7a1f42; line-height: 1.2; }
.paper .sign b { display: block; font-weight: 700; font-size: 2.1rem; }

/* =====================================================================
   D. ARTWORK
   ===================================================================== */
.tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 14px; margin: 1.6rem -4px 6px; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .tabs { justify-content: center; flex-wrap: wrap; overflow: visible; } }
.tab {
  flex: none; min-height: 44px; padding: .65rem 1.2rem; border-radius: 999px; border: 1px solid rgba(244, 194, 201, .3);
  font-size: .86rem; color: rgba(251, 241, 227, .78); transition: all .35s var(--ease);
}
.tab:hover { border-color: var(--gold); color: var(--cream); }
.tab.on { background: linear-gradient(135deg, #b23a63, #7a1f42); border-color: var(--gold); color: #fff; box-shadow: 0 6px 20px rgba(178, 58, 99, .4); }

.masonry { columns: 2; column-gap: 12px; padding: 4px 0; }
@media (min-width: 700px) { .masonry { columns: 3; column-gap: 18px; } }
.tile {
  position: relative; display: block; width: 100%; margin-bottom: 12px; break-inside: avoid; overflow: hidden; cursor: zoom-in;
  border-radius: 14px; background: #2a0a17; border: 1px solid rgba(244, 194, 201, .15); box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
  opacity: 0; transform: translateY(18px) scale(.98); animation: tileIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * .07s);
}
@media (min-width: 700px) { .tile { margin-bottom: 18px; } }
@keyframes tileIn { to { opacity: 1; transform: none; } }
.tile img { width: 100%; height: auto; transition: transform .9s var(--ease); }
.tile:hover img { transform: scale(1.06); }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 12px 10px; text-align: left;
  background: linear-gradient(transparent, rgba(10, 2, 6, .88)); font-family: var(--script); font-size: 1.3rem;
  transform: translateY(100%); transition: transform .45s var(--ease);
}
.tile:hover .cap, .tile:focus-visible .cap { transform: none; }
@media (hover: none) { .tile .cap { transform: none; font-size: 1.05rem; padding-top: 22px; } }
.empty-note { text-align: center; color: var(--blush); font-family: var(--script); font-size: 1.5rem; padding: 40px 0; }

/* =====================================================================
   E. STICKERS
   ===================================================================== */
.collect { max-width: 420px; margin: 1.6rem auto 1.8rem; text-align: center; }
.collect-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.collect-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--blush)); transition: width .8s var(--ease); }
#collectText { margin-top: 9px; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }

.sticker-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .sticker-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (min-width: 960px) { .sticker-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; } }
.sticker { position: relative; aspect-ratio: 3 / 4; perspective: 900px; touch-action: pan-y; display: block; width: 100%; opacity: 0; transform: translateY(20px); animation: tileIn .7s var(--ease) forwards; animation-delay: calc(var(--i) * .06s); }
.sticker .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .2s ease-out; }
.sticker.leave .tilt { transition: transform .7s var(--ease); }
.sticker .flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s var(--ease); }
.sticker.collected .flip { transform: rotateY(180deg); }
@media (hover: hover) { .sticker:not(.collected):hover .flip { transform: rotateY(-10deg); } }
.face { position: absolute; inset: 0; border-radius: 18px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face.cover {
  display: grid; place-items: center; align-content: center; gap: 10px; text-align: center;
  background: radial-gradient(circle at 50% 35%, #6a1a38, #2a0a17 75%); border: 1px solid rgba(230, 194, 122, .5);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .45), inset 0 0 0 6px rgba(20, 4, 11, .4), inset 0 0 0 7px rgba(230, 194, 122, .25);
}
.face.cover svg { width: 42%; fill: var(--gold); filter: drop-shadow(0 0 10px rgba(230, 194, 122, .7)); }
.face.cover small { font-size: .6rem; letter-spacing: .28em; text-transform: uppercase; color: rgba(251, 241, 227, .6); }
.face.front {
  transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px;
  background: linear-gradient(160deg, #fff8ee, #f7dfe4 55%, #e3d6f8); color: #3a1a24;
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
}
.face.front .art { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; }
.face.front .art img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(90, 20, 50, .3)); }
.face.front .num { position: absolute; top: 10px; left: 12px; font-size: .62rem; letter-spacing: .18em; color: rgba(90, 20, 50, .55); font-weight: 700; }
.face.front .name { font-family: var(--script); font-size: 1.45rem; line-height: 1; margin-top: 6px; text-align: center; color: #5b1330; }
.face.front .tag { margin-top: 6px; font-size: .58rem; letter-spacing: .22em; text-transform: uppercase; padding: .28rem .7rem; border-radius: 99px; font-weight: 700; color: #3a1a24; background: #eadfcc; }
.sticker.r-rare .tag { background: #bfe0ff; }
.sticker.r-epic .tag { background: #dbbcff; }
.sticker.r-legendary .tag { background: linear-gradient(90deg, #f6d27a, #ffb7c8, #c9b8f0); }
.sticker.r-rare .face.front { border-color: #9fd0ff; }
.sticker.r-epic .face.front { border-color: #c79bff; }
.sticker.r-legendary .face.front { border-color: #f2cf7b; box-shadow: 0 22px 44px rgba(0,0,0,.5), 0 0 30px rgba(230, 194, 122, .35); }
.shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), transparent 48%); mix-blend-mode: soft-light; }
.sticker:hover .shine { opacity: 1; }
.sticker.r-epic .face.front::after, .sticker.r-legendary .face.front::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: color-dodge;
  background: linear-gradient(115deg, transparent 20%, rgba(255, 120, 200, .35) 35%, rgba(120, 200, 255, .35) 50%, rgba(255, 230, 120, .35) 65%, transparent 80%);
  background-size: 260% 260%; background-position: var(--mx, 50%) var(--my, 50%);
}

/* =====================================================================
   F. MOVIE
   ===================================================================== */
.cinema { position: relative; margin-top: 2rem; padding: 0 clamp(14px, 4vw, 44px); }
.cinema::before, .cinema::after {
  content: ''; position: absolute; top: -16px; bottom: -16px; width: clamp(14px, 4vw, 50px); z-index: 2; border-radius: 6px;
  background: repeating-linear-gradient(90deg, #7a1230 0 9px, #4d0a1f 9px 16px, #8c1a3a 16px 26px);
  box-shadow: 0 0 40px rgba(0, 0, 0, .6);
}
.cinema::before { left: 0; } .cinema::after { right: 0; }
.screen {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #000;
  box-shadow: 0 0 0 5px #1a0710, 0 0 0 6px rgba(230, 194, 122, .55), 0 40px 120px rgba(200, 40, 80, .28);
}
.media { position: absolute; inset: 0; }
.media video, .media iframe { width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }

.poster { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; text-align: center; transition: opacity .7s ease, visibility .7s; }
.poster.hide { opacity: 0; visibility: hidden; pointer-events: none; }
.poster-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-image: radial-gradient(80% 90% at 50% 15%, #a3254f, transparent 70%), radial-gradient(70% 80% at 85% 105%, #3b1d5e, transparent 70%);
  background-color: #1a0610;
}
.poster-bg::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(230, 194, 122, .5); z-index: 1; }
.poster-bg.has-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 25%, rgba(10, 2, 6, .88)); }
.poster-text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(3px, 1.2vw, 12px); padding: 2%; }
.poster-small { font-size: clamp(.5rem, 1.6vw, .72rem); letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.poster h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 6vw, 3.6rem); letter-spacing: .08em; text-transform: uppercase; line-height: 1.05; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.poster-tag { font-family: var(--script); font-size: clamp(1rem, 3vw, 1.7rem); color: var(--blush); }
.play-big {
  width: clamp(44px, 10vw, 76px); height: clamp(44px, 10vw, 76px); border-radius: 50%; margin: clamp(2px, 1vw, 10px) 0;
  display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 1.5px solid var(--gold);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: glowRing 2.4s infinite; transition: transform .3s var(--ease), background .3s;
}
.play-big:hover { transform: scale(1.1); background: rgba(255, 255, 255, .2); }
.play-big svg { width: 40%; fill: var(--cream); margin-left: 6%; }
.poster-credits { font-size: clamp(.48rem, 1.5vw, .7rem); letter-spacing: .28em; text-transform: uppercase; color: rgba(251, 241, 227, .65); }
@media (max-width: 520px) { .poster-small, .poster-credits { display: none; } }

.controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 8px; padding: 26px 12px 10px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82)); transition: opacity .4s;
}
.screen.idle .controls { opacity: 0; }
.controls button { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; }
.controls button:hover { background: rgba(255, 255, 255, .12); }
.controls svg { width: 20px; height: 20px; fill: none; stroke: var(--cream); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.controls #cPlay svg { fill: var(--cream); stroke: none; }
.controls .time { font-size: .72rem; color: rgba(251, 241, 227, .8); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; }
.controls input[type=range] {
  -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4px; border-radius: 99px; cursor: pointer; outline: none;
  background: linear-gradient(90deg, var(--gold) var(--p, 0%), rgba(255, 255, 255, .25) var(--p, 0%));
}
.controls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 3px rgba(230, 194, 122, .35); }
.controls input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border: 0; border-radius: 50%; background: var(--cream); }
.controls .vol { flex: none; width: 70px; }
@media (max-width: 560px) { .controls .vol, #cMute { display: none; } .controls { gap: 4px; padding: 20px 8px 6px; } }

/* =====================================================================
   G. SURPRISE
   ===================================================================== */
.surprise-body { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.4rem; }
.surprise-title {
  font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 14vw, 6rem); line-height: 1.1; padding: 0 .1em .1em;
  background: linear-gradient(100deg, var(--lav), #fff 40%, var(--blush) 70%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.surprise-lines p {
  font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 5vw, 2rem); margin: .5em 0;
  opacity: 0; transform: translateY(12px); transition: opacity 1.3s ease, transform 1.3s var(--ease);
}
.surprise-lines p.in { opacity: 1; transform: none; }
.surprise-final {
  display: grid; justify-items: center; gap: 22px; max-width: 520px; padding: 1.8rem 1.5rem; border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); border: 1px solid rgba(201, 184, 240, .3);
  animation: paperIn 1.4s var(--ease);
}
.surprise-final img { max-height: 280px; border-radius: 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.surprise-final p { font-family: var(--script); font-size: clamp(1.7rem, 6vw, 2.3rem); line-height: 1.3; color: var(--cream); white-space: pre-line; }