:root {
  --sand: #ffe7b3;
  --sand-dark: #f7cf87;
  --sea: #19c3d6;
  --sea-deep: #0a8fc4;
  --foam: #f4fbff;
  --sky: #6fd2ff;
  --paper: #fdf8ec;
  --paper-edge: #e9dcc0;
  --ink: #2a2a3a;
  --ink-soft: #6a6070;
  --red: #f0524a;
  --blue: #2a5aa8;
  --gold: #e9a92b;
  --panel: rgba(255, 255, 255, .9);
  --hand: "Caveat", "Segoe Print", "Noto Color Emoji", "Segoe UI Emoji", cursive;
  --type: "Special Elite", "Courier New", "Noto Color Emoji", "Segoe UI Emoji", monospace;
  --slab: "Alfa Slab One", Georgia, "Noto Color Emoji", "Segoe UI Emoji", serif;
  --emoji: "Noto Color Emoji", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--type);
  font-size: 16px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 30%, rgba(190, 130, 50, .22) 1px, transparent 1.6px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .85) 1px, transparent 1.7px) 0 0 / 31px 27px,
    radial-gradient(circle at 40% 80%, rgba(160, 100, 40, .16) 1.2px, transparent 2px) 0 0 / 41px 37px,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='70' viewBox='0 0 160 70'%3E%3Cpath d='M0 20 Q20 12 40 20 T80 20 T120 20 T160 20' fill='none' stroke='%23e9b96a' stroke-opacity='.45' stroke-width='3'/%3E%3Cpath d='M0 23 Q20 15 40 23 T80 23 T120 23 T160 23' fill='none' stroke='%23fff6dc' stroke-opacity='.7' stroke-width='1.5'/%3E%3Cpath d='M-40 55 Q-20 47 0 55 T40 55 T80 55 T120 55 T160 55' fill='none' stroke='%23e9b96a' stroke-opacity='.35' stroke-width='3'/%3E%3Cpath d='M-40 58 Q-20 50 0 58 T40 58 T80 58 T120 58 T160 58' fill='none' stroke='%23fff6dc' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E") 0 0 / 160px 70px,
    radial-gradient(ellipse at 50% 100%, #ffd98f, transparent 70%),
    linear-gradient(var(--sand), var(--sand-dark));
  background-attachment: fixed;
}
body.sunset { --sand: #e8b98a; --sand-dark: #b9805a; --sea: #3b5f8f; --sea-deep: #23365f; --sky: #f39a6b; }
body.night { --sand: #8d8199; --sand-dark: #5d5470; --sea: #1c2c55; --sea-deep: #0b1433; --sky: #1a1f44; }

button { font: inherit; color: inherit; }
.flag { font-family: var(--emoji); font-style: normal; }
.hand { font-family: var(--hand); }

/* ---------- The beach: sky, sea, waves, tide ---------- */

.beach { position: fixed; inset: 0 0 auto; height: 34vh; min-height: 210px; z-index: 0; pointer-events: none; }
.sky { position: absolute; inset: 0 0 55%; overflow: hidden; background: linear-gradient(var(--sky), color-mix(in srgb, var(--sky) 45%, white)); transition: background 2s; }
.cloud { position: absolute; width: 90px; height: 26px; border-radius: 20px; background: #fff; opacity: .9; animation: cloud 70s linear infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 40px; height: 40px; left: 14px; top: -20px; }
.cloud::after { width: 30px; height: 30px; left: 44px; top: -13px; }
.cloud.c1 { top: 45%; left: -10%; }
.cloud.c2 { top: 70%; left: 30%; transform: scale(.7); animation-duration: 95s; animation-delay: -40s; }
.cloud.c3 { top: 40%; left: 60%; transform: scale(1.2); animation-duration: 120s; animation-delay: -80s; }
@keyframes cloud { from { translate: -20vw 0; } to { translate: 120vw 0; } }
.sun {
  position: absolute; top: 14px; right: 9%; width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle, #fff7b0, #ffd23f 60%, #ffb02e);
  box-shadow: 0 0 30px 10px rgba(255, 210, 63, .45);
  pointer-events: auto; cursor: pointer; border: 0; padding: 0;
  transition: transform .4s, background 2s;
}
.sun:active { transform: scale(.9); }
body.night .sun { background: radial-gradient(circle at 35% 35%, #fff, #dfe4f2 60%, #b8bfd6); box-shadow: 0 0 30px 6px rgba(220, 230, 255, .35); }
.sun.shades::after { content: "😎"; position: absolute; inset: 0; display: grid; place-items: center; font: 40px var(--emoji); }
.night-stars { position: absolute; inset: 0 0 55%; opacity: 0; transition: opacity 2s;
  background: radial-gradient(1.5px 1.5px at 12% 30%, #fff, transparent), radial-gradient(1px 1px at 33% 15%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 40%, #fff, transparent), radial-gradient(1px 1px at 70% 22%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 45%, #fff, transparent), radial-gradient(1px 1px at 22% 50%, #fff, transparent); }
body.night .night-stars { opacity: 1; }
.sea { position: absolute; inset: 45% 0 0; background: linear-gradient(var(--sea-deep), var(--sea) 60%, #7fe6e0); transition: background 2s; }
.sea::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 40px, rgba(255, 255, 255, .12) 40px 42px, transparent 42px 90px); animation: glitter 5s linear infinite; }
@keyframes glitter { to { background-position: 180px 0; } }
.wave {
  position: absolute; left: 0; right: 0; height: 40px;
  background-repeat: repeat-x;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Cpath d='M0 20 Q25 4 50 20 T100 20 T150 20 T200 20 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 200px 40px;
  animation: wave 9s linear infinite;
}
.wave.w1 { top: 12%; opacity: .15; animation-duration: 14s; }
.wave.w2 { top: 38%; opacity: .2; animation-duration: 11s; animation-direction: reverse; }
.wave.w3 { top: 64%; opacity: .25; }
@keyframes wave { to { background-position-x: 200px; } }
/* The tide: foam and wet sand roll in and out over the beach */
.shore { position: absolute; left: -5%; right: -5%; bottom: -26px; height: 46px; animation: tide 7s ease-in-out infinite; }
.shore::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 46'%3E%3Cpath d='M0 14 Q20 2 40 14 T80 14 T120 14 T160 14 V46 H0Z' fill='%23f4fbff'/%3E%3Cpath d='M0 22 Q20 12 40 22 T80 22 T120 22 T160 22 V46 H0Z' fill='%23cfe9f2'/%3E%3C/svg%3E");
  background-size: 160px 46px; background-repeat: repeat-x;
  animation: wave 6s linear infinite;
}
.shore::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 30px; background: linear-gradient(rgba(120, 90, 50, .28), transparent); }
@keyframes tide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(18px); } }

/* Beach props */
.props { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.prop { position: absolute; font-family: var(--emoji); pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; user-select: none; line-height: 1; }
.umbrella { left: 1.5%; bottom: 24vh; font-size: 74px; transform: rotate(-12deg); }
.deco { pointer-events: none; cursor: default; }
.wet-sand { position: absolute; left: 0; right: 0; top: 34vh; height: 7vh; background: linear-gradient(rgba(190, 140, 70, .35), transparent); }
.footprints { position: absolute; left: 20vw; top: 44vh; font: 18px var(--emoji); opacity: .28; transform: rotate(-25deg); letter-spacing: 26px; filter: sepia(1); }
.palm { left: -14px; top: 22vh; font-size: 110px; transform-origin: 50% 100%; animation: sway 6s ease-in-out infinite; }
.palm2 { right: -18px; top: 30vh; font-size: 96px; transform: scaleX(-1); }
@keyframes sway { 50% { transform: rotate(3deg); } }
.coconut { position: absolute; left: 50%; top: 20%; font-size: 26px; animation: coco 2.4s ease-in forwards; }
@keyframes coco { 25% { transform: translateY(80px); } 30% { transform: translateY(70px) rotate(40deg); } 100% { transform: translateY(80px) rotate(90deg); opacity: 0; } }
.towel { right: 4vw; top: 52vh; width: 70px; height: 120px; border-radius: 6px; transform: rotate(14deg);
  background: repeating-linear-gradient(#ff6fa8 0 14px, #fff 14px 22px, #3fc4e6 22px 36px, #fff 36px 44px); box-shadow: 0 4px 8px rgba(150, 100, 40, .25); }
.shades { right: 6vw; top: 57vh; font-size: 30px; transform: rotate(-18deg); }
.icecream { left: 4vw; top: 62vh; font-size: 40px; transform: rotate(-20deg); }
.flipflop { left: 9vw; bottom: 12vh; font-size: 34px; }
.flipflop.hop { animation: hop .3s; }
@keyframes hop { 50% { transform: translateY(-14px) rotate(-15deg); } }
.starfish { right: 11vw; bottom: 22vh; font-size: 26px; filter: hue-rotate(-30deg) saturate(1.6); }
.bucket { right: 12vw; bottom: 8vh; font-size: 34px; }
.shell { font-size: 22px; opacity: .85; transition: transform .2s; }
.shell:hover { transform: scale(1.2) rotate(10deg); }
.shell.found { opacity: 0; pointer-events: none; transition: opacity .6s; }
.castle { right: 3%; bottom: 6vh; font-size: 46px; }
.castle[data-stage="0"] { opacity: .35; filter: grayscale(1); }
.crab { bottom: 2vh; font-size: 34px; left: -60px; }
.crab.walk { animation: crabwalk 14s linear forwards; }
@keyframes crabwalk { 0% { left: -60px; } 10%, 30% { transform: translateY(0); } 20% { transform: translateY(-4px); } 100% { left: 110vw; } }
.gull { top: 6vh; font-size: 30px; left: 110vw; }
.gull.fly { animation: gullfly 12s linear forwards; }
@keyframes gullfly { 0% { left: 110vw; transform: translateY(0); } 50% { transform: translateY(24px); } 100% { left: -80px; transform: translateY(0); } }
.bottle { font-size: 34px; top: 26vh; left: 55vw; transform: rotate(70deg); opacity: 0; pointer-events: none; transition: opacity 1s, top 4s ease-out; }
.bottle.ashore { opacity: 1; pointer-events: auto; top: 31vh; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: rotate(60deg) translateY(-3px); } }

/* The volleyball: tap it in the air to keep it up */
.ball {
  position: fixed; z-index: 6; width: 52px; height: 52px; border: 0; padding: 0; background: none;
  cursor: pointer; touch-action: manipulation; left: 0; top: 0; will-change: transform;
}
.ball svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .25)); }
.ball-shadow { position: fixed; z-index: 2; width: 44px; height: 10px; border-radius: 50%; background: rgba(90, 60, 20, .3); pointer-events: none; z-index: 5; left: 0; top: 0; }
.ball-count { position: fixed; z-index: 7; left: 0; top: 0; font: 22px var(--slab); color: #fff; text-shadow: 0 2px 0 var(--red), 0 0 6px rgba(0, 0, 0, .3); pointer-events: none; opacity: 0; transition: opacity .3s; }
.ball-count.show { opacity: 1; }

/* ---------- Header ---------- */

.top {
  position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: 980px; margin: 0 auto; padding: 12px 16px;
}
.logo {
  display: inline-block; padding: 7px;
  background: radial-gradient(circle at 50% 50%, transparent 3px, var(--paper) 3.5px) -5px -5px / 10px 10px;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .2)); cursor: pointer; user-select: none; position: relative;
}
.logo span { display: block; padding: 4px 12px; background: var(--red); color: var(--paper); font: 22px var(--slab); letter-spacing: .06em; }
.logo.big span { font-size: clamp(34px, 10vw, 64px); padding: 8px 24px; }
.logo.cancelled::after {
  content: "FOUND ME"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 13px var(--type); color: #1d2d6b; transform: rotate(-14deg);
  border: 2px solid #1d2d6b; border-radius: 50%; opacity: .75;
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.chip { background: var(--panel); border-radius: 999px; padding: 4px 11px; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); white-space: nowrap; }
.chip b { font-family: var(--slab); font-weight: normal; }
.chip small { color: var(--ink-soft); }
.top-btns { display: flex; gap: 6px; }

.btn {
  border: 2px solid var(--ink); background: var(--paper); border-radius: 10px; padding: 8px 14px;
  font-family: var(--type); font-size: 15px; cursor: pointer; box-shadow: 0 3px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { background: #fff; }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.icon { width: 40px; padding: 8px 0; }
.btn.primary { background: linear-gradient(#ff7a6e, var(--red)); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #d9544b; }
.btn.quick { background: linear-gradient(#fff7c8, #ffe27a); }
.btn.quick b { font-family: var(--slab); font-weight: normal; display: inline-block; min-width: 3ch; text-align: right; }
.btn.quick[data-odds="good"] b { color: #2f8a4a; }
.btn.quick[data-odds="mid"] b { color: #c07a00; }
.btn.quick[data-odds="bad"] b { color: #c8423a; }
.btn.big { font-size: 20px; padding: 12px 22px; }
.btn.off { text-decoration: line-through; opacity: .6; }
.btn:focus-visible, .stamp-live:focus-visible, .slot:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Desk (a beach towel) ---------- */

.desk { position: relative; z-index: 4; max-width: 760px; margin: 0 auto; padding: 4px 16px 140px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.card-meta {
  border: 2px solid #29c4e0;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; width: 100%; max-width: 680px;
  background: var(--panel); border-radius: 10px; padding: 6px 12px; font-size: 14px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15);
}
.card-meta b { font-weight: normal; font-family: var(--hand); font-size: 20px; }
.card-mods { display: flex; gap: 4px; flex-wrap: wrap; }
.mod { font-size: 12px; border-radius: 999px; padding: 1px 8px; background: #eef9fc; border: 1px solid #9ad8e6; white-space: nowrap; }
.mod-sticky { background: #fff2cf; border-color: #f0c040; }
.mod-shiny { background: linear-gradient(90deg, #fff6b0, #ffe0f0, #d8f6ff); border-color: #f0b020; animation: rainbow 2s linear infinite; background-size: 200% 100%; }
.mod-windy { background: #f0f4ff; border-color: #a8b8e8; }
.mod-sandy { background: #fff1d6; border-color: #e8b96a; }
.chain { font-family: var(--emoji); font-size: 18px; display: flex; align-items: center; gap: 2px; }
.chain i { font-family: var(--type); color: var(--ink-soft); font-style: normal; font-size: 13px; }
.chain .dest { outline: 2px dashed var(--red); outline-offset: 1px; border-radius: 3px; }

.pc-wrap {
  width: 100%; max-width: 680px; container-type: inline-size; perspective: 1400px; padding: 3cqw;
  background: repeating-linear-gradient(90deg, #ff6b6b 0 6%, #fff 6% 9%, #ffd23f 9% 15%, #fff 15% 18%, #29c4e0 18% 24%, #fff 24% 27%);
  border-radius: 6px; box-shadow: 0 6px 14px rgba(90, 60, 20, .3);
}
.postcard {
  position: relative; width: 100%; aspect-ratio: 3 / 2; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.4, .1, .2, 1); transform: rotate(var(--tilt, -.8deg));
}
.postcard.flipped { transform: rotateY(180deg) rotate(calc(var(--tilt, -.8deg) * -1)); }
.postcard.arrive { animation: arrive .55s cubic-bezier(.2, .8, .3, 1.2); }
.postcard.leave { animation: leave .38s ease-in forwards; }
.postcard.shake { animation: shake .35s; }
@keyframes arrive { from { transform: translate(60%, -40%) rotate(14deg); opacity: 0; } }
@keyframes leave { to { transform: translate(-70%, 30%) rotate(-16deg); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-1.2%) rotate(-1.5deg); } 50% { transform: translateX(1.2%); } 75% { transform: translateX(-.6%) rotate(-.4deg); } }
.postcard.gust { animation: gust .6s ease-out; }
@keyframes gust { 30% { transform: rotate(-3.5deg) translate(-2%, -1%) skewX(-2deg); } 60% { transform: rotate(1.5deg); } }
.postcard.mod-wet .back { background: radial-gradient(ellipse 40% 30% at 20% 70%, rgba(80, 160, 220, .18), transparent 70%), radial-gradient(ellipse 25% 35% at 75% 85%, rgba(80, 160, 220, .14), transparent 70%), var(--paper); }
.postcard.mod-wet .pc-message p { filter: blur(.35px); }
.postcard.mod-sandy .back::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle, rgba(200, 150, 70, .55) .6px, transparent 1.1px) 0 0 / 9px 11px, radial-gradient(circle, rgba(170, 120, 50, .4) .7px, transparent 1.2px) 4px 5px / 13px 9px; mask: linear-gradient(160deg, transparent 30%, #000 80%); }
.postcard.mod-sticky .glue { background: rgba(240, 190, 60, .45); }
.postcard.mod-shiny .back::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 5; mix-blend-mode: soft-light;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 240, 150, .9) 45%, rgba(255, 180, 230, .8) 52%, rgba(160, 230, 255, .8) 58%, transparent 72%) 0 0 / 250% 100%; animation: shine 3s linear infinite; }
@keyframes shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
body.hula .postcard { animation: hula 1.2s ease-in-out infinite; }
@keyframes hula { 50% { transform: rotate(3deg) translateX(2%); } }

.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--paper); border-radius: 1.2cqw; overflow: hidden;
  box-shadow: 0 2px 0 var(--paper-edge), 0 10px 22px rgba(0, 0, 0, .28);
}
.back {
  display: grid; grid-template-columns: 1fr 1px 41%; gap: 0 3cqw; padding: 4cqw 4cqw 3.5cqw;
  background: radial-gradient(circle at 80% 90%, rgba(200, 170, 110, .18), transparent 40%), var(--paper);
}
.front { transform: rotateY(180deg); }
.pc-message { overflow: hidden; }
.pc-message { position: relative; z-index: 1; }
.pc-message p { margin: 0; font-size: 3.6cqw; line-height: 1.2; color: var(--pen-ink, #23305e); font-family: var(--pen), var(--hand); }
.pc-message .ps, .pc-message .sign { display: block; margin-top: .55em; }
.pc-message .sign { text-align: right; font-weight: 700; }
.pc-divider { background: var(--paper-edge); margin: 2cqw 0; }

/* Doodles and coffee stains */
.doodles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.doodles span { position: absolute; font-family: var(--emoji); opacity: .5; filter: saturate(.8); }
.doodles .stain { position: absolute; width: 17cqw; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%;
  box-shadow: inset 0 0 0 .5cqw rgba(140, 90, 40, .2), inset 0 0 0 1.2cqw rgba(140, 90, 40, .06); background: radial-gradient(circle at 60% 40%, rgba(160, 110, 50, .07), transparent 60%); }

/* Papers */
.postcard[data-paper="1"] .back { --paper: #fff3f0; }
.postcard[data-paper="2"] .back { --paper: #f0f7ff; }
.postcard[data-paper="3"] .back { --paper: #ecdcb8; --paper-edge: #cdb486; }
.postcard[data-paper="4"] .back { background: repeating-linear-gradient(transparent 0 4.3cqw, rgba(42, 90, 168, .15) 4.3cqw calc(4.3cqw + 1px)), var(--paper); }
.postcard[data-paper="5"] .back { background: linear-gradient(90deg, rgba(42, 90, 168, .08) 1px, transparent 1px) 0 0 / 3cqw 3cqw, linear-gradient(rgba(42, 90, 168, .08) 1px, transparent 1px) 0 0 / 3cqw 3cqw, var(--paper); }
.postcard[data-paper="6"] .back { background: radial-gradient(ellipse at center, transparent 55%, rgba(150, 100, 40, .22)), radial-gradient(circle at 15% 85%, rgba(150, 100, 40, .12), transparent 25%), #f6ecd2; }
.postcard .back { background-color: var(--paper); }

/* Borders */
.postcard[data-border="1"] .back { border: 1.6cqw solid transparent; border-image: repeating-linear-gradient(45deg, #e0403a 0 2.5cqw, #fff 2.5cqw 3.6cqw, #2a5aa8 3.6cqw 6.1cqw, #fff 6.1cqw 7.2cqw) 22; padding: 2.6cqw; }
.postcard[data-border="2"] .back { outline: .45cqw dashed #c9a46a; outline-offset: -2cqw; }
.postcard[data-border="3"] .back { box-shadow: inset 0 0 0 1cqw var(--paper), inset 0 0 0 1.35cqw #9b2335, inset 0 0 0 1.8cqw var(--paper), inset 0 0 0 2cqw #9b2335, 0 10px 22px rgba(0, 0, 0, .28); }
.postcard[data-border="4"] .back { border: 1.1cqw dotted #f0a020; }

/* Picture sides */
.front-polaroid { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, hsl(var(--h) 60% 88%) 0 3cqw, hsl(var(--h) 60% 84%) 3cqw 6cqw); }
.pola { position: absolute; width: 38%; background: #fff; padding: 2cqw 2cqw 6cqw; box-shadow: 0 1cqw 2cqw rgba(0, 0, 0, .25); }
.pola.p1 { left: 8%; top: 10%; transform: rotate(-7deg); }
.pola.p2 { right: 8%; top: 18%; transform: rotate(6deg); }
.pola-pic { aspect-ratio: 1; display: grid; place-items: center; background: linear-gradient(hsl(var(--h) 70% 70%), hsl(calc(var(--h) + 40) 70% 55%)); font: 14cqw var(--emoji); }
.pola i { position: absolute; left: 0; right: 0; bottom: 1.2cqw; text-align: center; font: 3.6cqw var(--hand); font-style: normal; color: #333; }
.pola-title { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font: 7cqw var(--slab); color: #fff; text-shadow: .4cqw .4cqw 0 var(--red); }
.front-retro { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#ffcf6b, #ff8a5c 60%, #e0507a); }
.retro-sun { position: absolute; left: 50%; top: 12%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: linear-gradient(#fff6a0, #ffb040); }
.retro-stripes { position: absolute; left: 0; right: 0; top: 32%; height: 22%; background: repeating-linear-gradient(transparent 0 1.6cqw, #ff8a5c 1.6cqw 3cqw); }
.retro-greet { position: absolute; left: 0; right: 0; top: 50%; text-align: center; }
.retro-greet small { display: block; font: 4.5cqw var(--hand); color: #fff; text-shadow: .3cqw .3cqw 0 rgba(0, 0, 0, .3); }
.retro-greet b span { display: inline-block; font: 9cqw/1 var(--slab); font-weight: normal; color: hsl(calc(var(--h) + var(--i) * 40) 85% 55%); -webkit-text-stroke: .35cqw #fff; text-shadow: .6cqw .6cqw 0 rgba(60, 20, 60, .45); transform: rotate(calc((var(--i) - 3) * 1.2deg)); }
.retro-motif { position: absolute; right: 5%; bottom: 5%; font: 13cqw var(--emoji); }
.front-night { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(1px 1px at 20% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 15%, #fff, transparent), radial-gradient(1px 1px at 45% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 45%, #fff, transparent), linear-gradient(#141a48, hsl(var(--h) 50% 30%) 70%, #0d2a3a 70%); }
.night-moon { position: absolute; right: 10%; top: 8%; font: 14cqw var(--emoji); }
.night-motif { position: absolute; left: 6%; bottom: 8%; font: 16cqw var(--emoji); filter: brightness(.85); }
.front-night .greet { text-shadow: .4cqw .4cqw 0 #6a3aa8, .8cqw .8cqw 0 rgba(0, 0, 0, .3); }
.pc-right { position: relative; }
.stamp-spot { position: absolute; top: 0; right: 0; width: 19cqw; aspect-ratio: 100 / 120; }
.card-mark { position: absolute; left: -60%; top: -50%; width: 220%; height: 200%; pointer-events: none; }
.card-mark svg { width: 100%; height: 100%; display: block; }
.glue { position: absolute; inset: 0; background: rgba(215, 190, 130, .35); border-radius: 2px; opacity: 0; transition: opacity .6s; }
.glue.show { opacity: 1; }
.stamp-live {
  --lift: 0;
  position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; z-index: 2;
  transform-origin: 50% 50%;
  filter: drop-shadow(calc(var(--lift) * 5px) calc(1px + var(--lift) * 7px) calc(1px + var(--lift) * 5px) rgba(0, 0, 0, calc(.15 + var(--lift) * .3)));
}
.stamp-live:active { cursor: grabbing; }
.stamp-live svg { width: 100%; height: 100%; display: block; }
.stamp-live.tense svg { animation: jitter .09s infinite; }
@keyframes jitter { 50% { transform: translate(.6px, -.5px) rotate(.4deg); } }
/* Jelly wobbles: only the picture wobbles, the stamp's corners stay put */
.stamp-live svg { transform-origin: 50% 60%; }
.stamp-live.jelly svg { animation: jelly .45s cubic-bezier(.3, 1.6, .5, 1); }
.stamp-live.jelly-big svg { animation: jellybig .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes jelly { 30% { transform: scale(1.06, .93); } 60% { transform: scale(.96, 1.05); } }
@keyframes jellybig { 20% { transform: scale(1.18, .82) rotate(-3deg); } 45% { transform: scale(.88, 1.14) rotate(3deg); } 70% { transform: scale(1.05, .96); } }
.stamp-live { --steam: 0; }
.stamp-live svg { filter: saturate(calc(1 + var(--steam) * .4)) brightness(calc(1 + var(--steam) * .08)); }
.stamp-live.crumble svg { animation: crumble .9s ease-in forwards; }
@keyframes crumble { 0% { transform: none; } 20% { transform: rotate(-6deg) scale(1.05); } 40% { transform: rotate(5deg) scale(.95); } 100% { transform: translateY(60%) rotate(40deg) scale(.4); opacity: 0; filter: grayscale(1); } }
.stamp-live.peeled { animation: flyoff .65s cubic-bezier(.5, -.3, .7, 1) forwards; pointer-events: none; }
.stamp-live.gone { visibility: hidden; }
.stamp-live { pointer-events: none; }
.work { position: absolute; left: -14%; top: -11.667%; width: 128%; height: 123.333%; z-index: 3; touch-action: none; cursor: crosshair; overflow: visible; }
.work .cutline { fill: none; stroke: #5a6c9a; stroke-width: 1.2; stroke-dasharray: 2.5 2.5; animation: march 1s linear infinite; }
@keyframes march { to { stroke-dashoffset: -10; } }
/* The ripped part of the line: white paper fibers around a dark gap, with loose hairs */
.work .tear-fiber polyline { fill: none; stroke: #fffdf6; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(.5px 1.2px .6px rgba(90, 60, 20, .55)); }
.work .tear-hair line { stroke: #fffdf6; stroke-width: .7; stroke-linecap: round; }
.work .tear-gap polyline { fill: none; stroke: #5a3a1e; stroke-width: 1.2; stroke-linejoin: round; opacity: .9; }
.work .cursor-sc { font-size: 13px; fill: #c8423a; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); pointer-events: none; }
.work .cursor-sc.shut { font-size: 11px; }
.work .residue { fill: #f1e2a6; stroke: #e0c97c; stroke-width: .4; opacity: .95; }
.work .strand { fill: none; stroke: #fff4c2; stroke-width: .9; stroke-linecap: round; opacity: .85; animation: wiggle .3s ease-in-out infinite alternate; }
@keyframes wiggle { to { stroke-width: .5; opacity: .6; } }
.stamp-spot.popout { animation: popout .75s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes popout { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(-5deg); } 70% { transform: scale(.96) rotate(2deg); } 100% { transform: scale(1); } }
.stowaway { position: absolute; left: 30%; top: 40%; z-index: 4; font: 7cqw var(--emoji); animation: scuttle 2.5s ease-in forwards; pointer-events: none; }
@keyframes scuttle { 0% { transform: translate(0, 0) scale(.3); } 15% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-40%, 10%) rotate(-10deg); } 45% { transform: translate(-90%, 0) rotate(10deg); } 100% { transform: translate(-600%, 80%) rotate(-10deg); opacity: 0; } }
.work .scissors { font-size: 10px; fill: #222; animation: snip .6s ease-in-out infinite alternate; }
@keyframes snip { to { opacity: .4; } }
.work .curl { fill: #efe4cc; stroke: #c8b89a; stroke-width: .6; filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, .35)); }
/* Minigames */
.work .thermo { fill: #fff; stroke: #5a6c9a; stroke-width: .8; }
.work .thermo-zone { fill: rgba(72, 168, 104, .55); }
.work .thermo-fill { fill: #f0a020; transition: fill .2s; }
.work .thermo-fill.hot, .work .thermo-bulb.hot { fill: #e0302a; }
.work .thermo-bulb { fill: #f0a020; stroke: #5a6c9a; stroke-width: .8; }
.work .kettle { font: 9px var(--emoji); }
.work .kettle.on { animation: rattle .12s infinite alternate; }
@keyframes rattle { to { transform: translate(.6px, -.4px); } }
.work .steam { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 2; stroke-linecap: round; filter: blur(.6px); }
.work .rbar { fill: #fff; stroke: #5a6c9a; stroke-width: .8; }
.work .rzone { fill: rgba(72, 168, 104, .7); }
.work .rmark { fill: #f0524a; stroke: #fff; stroke-width: .6; }
.work .rhits { font: 7px var(--type); fill: #f0524a; letter-spacing: 1px; }
.work .tickle-hint { font: 6px var(--hand); fill: #8a4a12; animation: snip .4s ease-in-out infinite alternate; }
.work .feather { font: 14px var(--emoji); pointer-events: none; }
.work .laugh { font: 8px var(--emoji); font-weight: bold; fill: #f0524a; }
.work .handle { fill: rgba(255, 210, 63, .5); stroke: #f0a020; stroke-width: 1.4; animation: glow .9s ease-in-out infinite alternate; }
@keyframes glow { to { r: 10; fill: rgba(255, 210, 63, .15); } }
.stamp-spot.cut::before {
  content: ""; position: absolute; inset: -6.7% -8% -6.7% -8%; background: var(--paper); z-index: 1;
  box-shadow: 2px 4px 6px rgba(0, 0, 0, .25);
  clip-path: polygon(0 2%, 6% 0, 14% 1.5%, 25% 0, 37% 2%, 50% .5%, 63% 2%, 76% 0, 88% 1.5%, 100% 0, 99% 12%, 100% 25%, 98.5% 40%, 100% 55%, 98.5% 70%, 100% 85%, 99% 100%, 86% 98.5%, 72% 100%, 58% 98%, 44% 100%, 30% 98.5%, 16% 100%, 2% 98.5%, 0 88%, 1.5% 72%, 0 58%, 1.5% 44%, 0 30%, 1.5% 16%);
  transform: rotate(-2deg) translate(-2%, -2%);
}
@keyframes flyoff { to { transform: translate(-150%, -260%) rotate(-50deg) scale(1.6); opacity: 0; } }
.pc-address { position: absolute; left: 0; right: 0; bottom: 7cqw; display: flex; flex-direction: column; gap: .5cqw; font-size: 3.8cqw; color: var(--pen-ink, #23305e); font-family: var(--pen), var(--hand); }
.pc-address span { border-bottom: 1px solid var(--paper-edge); padding: 0 .5cqw .3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-address .to-country { font-weight: 700; letter-spacing: .04em; }
.pc-airmail { position: absolute; bottom: 0; right: 0; font-size: 1.9cqw; color: var(--blue); border: 1px solid var(--blue); padding: .4cqw 1cqw; letter-spacing: .08em; }

/* Picture side */
.front-sky {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(hsl(var(--h) 70% 72%), hsl(calc(var(--h) + 30) 75% 85%) 55%, hsl(200 70% 50%) 55%, hsl(200 70% 38%) 72%, #f1d9a7 72%);
}
.front-sun { position: absolute; width: 18cqw; height: 18cqw; border-radius: 50%; top: 8%; left: 8%; background: radial-gradient(circle, #fff7b0, #ffcc3a 70%); box-shadow: 0 0 6cqw rgba(255, 210, 60, .6); }
.front-motif { position: absolute; right: 6%; bottom: 14%; font: 22cqw var(--emoji); filter: drop-shadow(0 1cqw 1cqw rgba(0, 0, 0, .2)); }
.front-flag { position: absolute; left: 4%; bottom: 6%; font: 9cqw var(--emoji); }
.greet { position: absolute; left: 0; right: 0; top: 30%; text-align: center; color: #fff; text-shadow: .4cqw .4cqw 0 var(--red), .8cqw .8cqw 0 rgba(0, 0, 0, .25); }
.greet small { display: block; font: 4cqw var(--hand); text-shadow: .2cqw .2cqw 0 rgba(0, 0, 0, .35); }
.greet b { display: block; font: 9cqw/1 var(--slab); font-weight: normal; padding: 0 4%; }

/* Meters */
.meters { width: 100%; max-width: 680px; display: grid; gap: 6px; background: var(--panel); border-radius: 10px; padding: 8px 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.meter { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 8px; font-size: 13px; }
.m-bar { height: 12px; border: 2px solid var(--ink); border-radius: 7px; background: #fff; overflow: hidden; }
.m-fill { height: 100%; width: 0; transition: width .08s linear; }
.m-fill.peel { background: repeating-linear-gradient(45deg, #48a868 0 6px, #5cbf7c 6px 12px); }
.m-fill.strain { background: var(--gold); }
.m-fill.strain.hot { background: var(--red); }
.m-val { text-align: right; font-family: var(--slab); color: var(--red); }
.hint { margin: 0; text-align: center; font-family: var(--hand); font-size: 22px; color: #8a4a12; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); min-height: 1.2em; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------- Splash ---------- */

.splash { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(15, 95, 136, .55); backdrop-filter: blur(3px); transition: opacity .5s; }
.splash.gone { opacity: 0; pointer-events: none; }
.splash-card { text-align: center; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tag { margin: 0; font-size: 30px; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .4); }
.loading { color: #fff; margin: 0; max-width: 420px; }

/* ---------- Modals ---------- */

.modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 16px; background: rgba(15, 50, 80, .5); }
.modal[hidden] { display: none; }
.modal-box {
  position: relative; width: 100%; max-width: 460px; max-height: calc(100vh - 32px); overflow: auto;
  background: var(--paper); border-radius: 14px; padding: 20px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  animation: pop .25s cubic-bezier(.2, .8, .3, 1.3);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-box h2 { margin: 0 0 4px; font: 26px var(--slab); font-weight: normal; color: var(--red); }
.modal-sub { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }
.modal-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; background: none; font-size: 20px; cursor: pointer; border-radius: 50%; }
.modal-close:hover { background: rgba(0, 0, 0, .07); }

.result-box, .detail-box { text-align: center; }
.result-box .btn { margin: 4px; }
.r-status { margin: 0; font: 28px var(--slab); color: var(--red); }
.r-status.dup { color: var(--ink-soft); font-size: 22px; }
.r-stamp { width: 150px; margin: 10px auto; }
.r-stamp svg { width: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.r-title { margin: 6px 0 2px; font-family: var(--hand); font-size: 24px; line-height: 1.1; }
.r-id { margin: 0 0 8px; font-size: 13px; color: var(--ink-soft); }
.rar { font-weight: bold; }
.rar.common { color: #6a6a6a; } .rar.uncommon { color: #2f8a4a; } .rar.rare { color: #2a5aa8; } .rar.legendary { color: #c07a00; }
.r-grade { font-size: 18px; margin-bottom: 8px; }
.r-grade b { font-family: var(--slab); font-weight: normal; }
.r-grade small { display: block; font-size: 13px; color: var(--ink-soft); }
.stars { color: var(--gold); letter-spacing: .05em; }
.stars.g0, .slot-q.g0 { color: #999; }
.q { color: var(--ink-soft); }
.r-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; text-align: left; }
.r-table td { padding: 5px 4px; border-bottom: 1px dashed var(--paper-edge); }
.r-table td:last-child { text-align: right; font-family: var(--slab); width: 40px; }
.r-table .sum td { border-bottom: 0; font-weight: bold; font-size: 16px; }
.d-foot { font-size: 13px; color: var(--ink-soft); margin: 0; }
.d-foot small { word-break: break-all; }

.album-box { max-width: 900px; height: calc(100vh - 32px); display: flex; flex-direction: column; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tab { border: 2px solid var(--ink); border-radius: 999px; background: #fff; padding: 5px 12px; cursor: pointer; font-size: 14px; }
.tab.on { background: var(--ink); color: var(--paper); }
.album-body { flex: 1; overflow: auto; padding-right: 4px; }
.sec { margin-bottom: 16px; }
.sec h3 { margin: 0 0 6px; font: 20px var(--hand); font-weight: 700; border-bottom: 2px solid var(--paper-edge); }
.sec h3 small { font-family: var(--type); font-weight: normal; font-size: 12px; color: var(--ink-soft); }
.c-head { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; text-align: left; }
.c-head:hover small { color: var(--red); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.slot {
  display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: rgba(0, 0, 0, .035);
  border-radius: 6px; padding: 5px 3px; cursor: pointer; min-height: 104px;
}
.slot:hover { background: rgba(200, 66, 58, .1); }
.slot svg { width: 56px; height: auto; display: block; }
.slot-id { font-size: 9px; color: var(--ink-soft); }
.slot-q { font-size: 9px; color: var(--gold); }
.slot.unknown { justify-content: center; font: 26px var(--slab); color: #c9bc9f; border: 2px dashed #d8cbb0; background: none; cursor: default; }
.slot.unknown.more { cursor: pointer; font-size: 13px; color: var(--ink-soft); }
.slot.unknown.country { min-height: 44px; font-size: 18px; }
.empty { font-size: 26px; text-align: center; color: var(--ink-soft); }
.pals { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pal { display: grid; grid-template-columns: 34px 1fr; column-gap: 8px; background: rgba(0, 0, 0, .035); border-radius: 8px; padding: 8px; font-size: 13px; }
.pal .flag { grid-row: span 3; font-size: 28px; }
.pal b { font: 20px var(--hand); font-weight: 700; }
.pal small { color: var(--ink-soft); }
.pal.unknown { opacity: .5; }

.help-box { max-width: 560px; }
.help-steps { padding-left: 20px; line-height: 1.45; font-size: 14px; }
.help-steps li { margin-bottom: 6px; }
.help-steps ul { padding-left: 18px; margin: 4px 0; }
.help-grades { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.secrets { margin: 10px 0 0; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ---------- Toast & confetti ---------- */

.toast {
  position: fixed; left: 50%; top: 38%; z-index: 40; transform: translate(-50%, -50%) scale(.6);
  font: 30px var(--slab); color: #fff; text-shadow: 0 3px 0 var(--ink), 0 0 12px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .25s; text-align: center; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.toast.bad { color: #ffd9d4; }
.toast.good { color: #fff3b0; }
.toast.egg { color: #c9ffe0; font-size: 22px; }
.sp-chip { display: inline-block; background: #fff3c4; border: 1px solid #f0c040; border-radius: 999px; padding: 1px 7px; margin: 1px 2px; font-size: 12px; white-space: nowrap; }
.combo { font: 14px var(--slab); color: #c0307a; margin-top: 3px; }

/* Crazy alerts for special stamps */
.alert { position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; overflow: hidden; cursor: pointer; background: rgba(255, 80, 120, .25); animation: flash .25s 3 alternate; }
.alert[hidden] { display: none; }
@keyframes flash { to { background: rgba(255, 230, 60, .35); } }
.alert-rays { position: absolute; width: 260vmax; height: 260vmax; background: repeating-conic-gradient(rgba(255, 255, 255, .35) 0 10deg, transparent 10deg 20deg); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.alert-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px; animation: slam .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes slam { from { transform: scale(4) rotate(-20deg); opacity: 0; } }
.alert-emoji { font: 96px var(--emoji); animation: wobble .5s ease-in-out infinite alternate; }
@keyframes wobble { from { transform: rotate(-12deg) scale(1); } to { transform: rotate(12deg) scale(1.15); } }
.alert-name {
  font: clamp(38px, 11vw, 92px)/1 var(--slab); font-weight: normal; transform: rotate(-4deg);
  background: linear-gradient(90deg, #ff3d6e, #ffb800, #3ddc84, #2ab7ff, #b45cff, #ff3d6e); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px #fff; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .3)); animation: rainbow 1s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }
.alert-text { font: 22px var(--hand); font-weight: 700; color: #fff; background: rgba(0, 0, 0, .35); border-radius: 999px; padding: 4px 14px; }
.alert.mega { background: rgba(120, 40, 255, .35); }
.alert.mega .alert-emoji { font-size: 140px; }
.alert.mega .alert-name { font-size: clamp(44px, 13vw, 120px); animation: rainbow .5s linear infinite, pulse .4s ease-in-out infinite alternate; }
@keyframes pulse { to { scale: 1.08; } }
body.quake .desk, body.quake .top { animation: quake .5s; }
@keyframes quake { 10%, 50%, 90% { transform: translate(-6px, 3px) rotate(-.6deg); } 30%, 70% { transform: translate(6px, -3px) rotate(.6deg); } }

.alert.doom { background: rgba(20, 0, 10, .6); animation: doomflash .3s 3 alternate; }
@keyframes doomflash { to { background: rgba(120, 0, 20, .6); } }
.alert.doom .alert-rays { background: repeating-conic-gradient(rgba(255, 40, 40, .25) 0 10deg, transparent 10deg 20deg); animation-direction: reverse; }
.alert.doom .alert-name { background: linear-gradient(90deg, #888, #fff, #c33, #888); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
.alert.doom .alert-emoji { animation: droop 1s ease-in-out infinite alternate; }
@keyframes droop { from { transform: rotate(-20deg); } to { transform: rotate(20deg) translateY(10px); } }
.confetti.skull { width: auto; height: auto; background: none; font: 26px var(--emoji); }
.q.neg, #tears.neg { color: #c8102e; font-weight: bold; }
.quip { font-family: var(--hand); font-size: 18px !important; color: #8a4a12 !important; margin-top: 4px; }
#result.doom .modal-box { background: linear-gradient(#fff, #f3e6e6); box-shadow: 0 0 0 4px #333, 0 12px 40px rgba(0, 0, 0, .5); animation: pop .25s, quake .6s .2s; }
#result.doom .r-status { color: #333; }
.slot.wrecked svg { filter: grayscale(.85) sepia(.3); transform: rotate(-8deg); }
.slot.wrecked::after { content: "💀"; position: absolute; font: 16px var(--emoji); translate: 18px -6px; }
.slot { position: relative; }
.confetti { position: fixed; z-index: 41; top: -20px; width: 9px; height: 14px; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

@media (max-width: 560px) {
  .top { padding: 10px 12px; }
  .logo span { font-size: 18px; padding: 3px 9px; }
  .chip { font-size: 12px; padding: 3px 8px; }
  .umbrella { font-size: 48px; bottom: 18vh; }
  .desk { padding: 4px 12px 120px; }
  .pc-wrap { padding: 2.5cqw; }
  .album-box { padding: 16px 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .wave, .shore, .shore::before, .crab.walk, .gull.fly, .bottle.ashore { animation: none; }
}

/* ==========================================================================
   Vintage 70s holiday: faded film colors, sunburst stripes, groovy fonts,
   grain and a warm photo filter. Layered over everything above.
   ========================================================================== */

:root {
  --sand: #f3d9a4;
  --sand-dark: #dcae6b;
  --sea: #5aa9a2;
  --sea-deep: #2f6f78;
  --sky: #f6b65f;
  --paper: #f8ecd2;
  --paper-edge: #dcc59a;
  --ink: #4a2c1a;
  --ink-soft: #8a6a4a;
  --red: #d9622b;
  --blue: #2f6f78;
  --gold: #e8a33d;
  --panel: rgba(250, 238, 212, .94);
  --brown: #5a3a22;
  --rust: #b8442f;
  --orange: #d9622b;
  --mustard: #e8a33d;
  --avocado: #8a9a3b;
  --cream: #f8ecd2;
  --stripes: linear-gradient(var(--brown) 0 20%, var(--rust) 20% 40%, var(--orange) 40% 60%, var(--mustard) 60% 80%, var(--avocado) 80%);
  --type: "Righteous", "Trebuchet MS", "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
  --slab: "Shrikhand", "Alfa Slab One", Georgia, "Noto Color Emoji", "Segoe UI Emoji", serif;
}

/* Film: fine grain, a warm vignette and slightly faded colors over the whole holiday */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 60; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .22; mix-blend-mode: multiply; animation: grain .5s steps(4) infinite;
}
@keyframes grain { 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } }
body::before {
  content: ""; position: fixed; inset: 0; z-index: 59; pointer-events: none;
  background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(110, 60, 20, .32)), linear-gradient(rgba(255, 190, 110, .08), rgba(255, 150, 80, .1));
  mix-blend-mode: multiply;
}
.beach, .props, .ball { filter: sepia(.28) saturate(1.15) hue-rotate(-6deg) contrast(.96); }
.front { filter: sepia(.3) saturate(1.2) contrast(.95); }

/* Sunset sky with a striped retro sun */
.sky { background: linear-gradient(#f7d58f, #f6b65f 55%, #ef8f52); }
.cloud, .cloud::before, .cloud::after { background: #fbe9c6; }
.sun {
  width: 84px; height: 84px; top: 6px;
  background: linear-gradient(#ffe7a0, #f7b347 45%, #e5662f);
  box-shadow: 0 0 40px 14px rgba(247, 160, 70, .45);
  -webkit-mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 70%, #000 70% 78%, transparent 78% 82%, #000 82% 89%, transparent 89% 92%, #000 92%);
  mask: linear-gradient(#000 52%, transparent 52% 57%, #000 57% 66%, transparent 66% 70%, #000 70% 78%, transparent 78% 82%, #000 82% 89%, transparent 89% 92%, #000 92%);
}
.sea { background: linear-gradient(var(--sea-deep), var(--sea) 60%, #93c9b6); }

/* Groovy logo with stacked stripes underneath */
.logo { background: none; filter: none; padding: 0 0 14px; }
.logo span {
  background: var(--orange); color: var(--cream); border-radius: 14px; font: 24px var(--slab); letter-spacing: .02em;
  text-shadow: 2px 2px 0 var(--rust);
  box-shadow: 0 4px 0 var(--mustard), 0 8px 0 var(--avocado), 0 12px 0 var(--brown);
}
.logo.big span { font-size: clamp(38px, 11vw, 72px); padding: 6px 28px 10px; border-radius: 24px; text-shadow: 4px 4px 0 var(--rust); }
.tag { font-family: var(--slab); font-size: 26px; color: var(--cream); text-shadow: 3px 3px 0 var(--rust), 5px 5px 0 var(--brown); }
.splash { background: rgba(120, 60, 25, .55); }

/* Panels, chips and buttons: cream, chunky brown outlines, mustard drop shadows */
.chip, .card-meta, .meters {
  background: var(--panel); border: 2.5px solid var(--brown); border-radius: 16px; box-shadow: 3px 3px 0 var(--mustard);
}
.chip b, .m-val { font-family: var(--slab); color: var(--rust); }
.card-meta b { color: var(--brown); }
.btn {
  border: 3px solid var(--brown); border-radius: 999px; background: var(--cream); color: var(--brown);
  font-family: var(--type); box-shadow: 0 4px 0 var(--brown);
}
.btn:hover { background: #fff4dc; }
.btn:active:not(:disabled) { box-shadow: 0 0 0 var(--brown); }
.btn.primary { background: linear-gradient(var(--orange), var(--rust)); color: var(--cream); text-shadow: 1px 1px 0 var(--brown); }
.btn.primary:hover:not(:disabled) { background: linear-gradient(#e6743c, var(--rust)); }
.btn.quick { background: linear-gradient(#f3c45c, var(--mustard)); }
.mod { background: #fbe6c0; border-color: var(--mustard); color: var(--brown); }

/* A 70s beach towel under the postcard */
.pc-wrap {
  background: repeating-linear-gradient(90deg, var(--brown) 0 5%, var(--rust) 5% 10%, var(--orange) 10% 15%, var(--mustard) 15% 20%, var(--avocado) 20% 25%, var(--cream) 25% 27%);
  border-radius: 14px; box-shadow: 0 8px 0 rgba(90, 58, 34, .35), 0 10px 18px rgba(90, 58, 34, .3);
}
.face { box-shadow: 0 2px 0 var(--paper-edge), 0 10px 22px rgba(90, 58, 34, .35); }

/* Meters with groovy stripes */
.m-bar { border-color: var(--brown); background: var(--cream); }
.m-fill.peel { background: repeating-linear-gradient(90deg, var(--avocado) 0 8px, var(--mustard) 8px 16px, var(--orange) 16px 24px); }
.m-fill.strain { background: var(--mustard); }
.m-fill.strain.hot { background: var(--rust); }
.hint { color: var(--brown); font-family: var(--type); font-size: 18px; }

/* Modals: cream cards with thick outlines and offset shadows */
.modal { background: rgba(90, 50, 20, .5); }
.modal-box { background: var(--cream); border: 4px solid var(--brown); border-radius: 24px; box-shadow: 8px 8px 0 var(--mustard), 12px 12px 0 var(--orange); }
.modal-box h2, .r-status { font-family: var(--slab); color: var(--rust); text-shadow: 2px 2px 0 var(--mustard); }
.tab { border-color: var(--brown); background: #fff4dc; color: var(--brown); font-family: var(--type); }
.tab.on { background: var(--brown); color: var(--cream); }
.sec h3 { border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--rust) 0 25%, var(--orange) 25% 50%, var(--mustard) 50% 75%, var(--avocado) 75%) 1; }
.slot { background: rgba(232, 163, 61, .12); }
.slot.unknown { border-color: #d9b98a; color: #c9a06a; }
.r-table td { border-bottom-color: #e2cfa8; }
.sp-chip { background: #fbe6c0; border-color: var(--mustard); }

/* Toasts and alerts: big groovy stacked-shadow letters on sunburst stripes */
.toast { font-family: var(--slab); color: var(--cream); text-shadow: 3px 3px 0 var(--rust), 6px 6px 0 var(--brown); }
.toast.good { color: #fff0b8; }
.toast.bad { color: #ffd2b8; }
.alert { background: rgba(120, 50, 20, .35); }
.alert-rays { background: repeating-conic-gradient(rgba(232, 163, 61, .55) 0 7.5deg, rgba(217, 98, 43, .5) 7.5deg 15deg, rgba(184, 68, 47, .45) 15deg 22.5deg, rgba(248, 236, 210, .35) 22.5deg 30deg); }
.alert-name {
  background: linear-gradient(var(--cream) 0 34%, var(--mustard) 34% 52%, var(--orange) 52% 70%, var(--rust) 70% 86%, var(--brown) 86%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 2px var(--brown); filter: drop-shadow(5px 5px 0 var(--brown)); animation: none;
}
.alert.mega .alert-name { animation: pulse .4s ease-in-out infinite alternate; }
.alert-text { background: var(--brown); color: var(--cream); font-family: var(--type); font-size: 18px; }
.alert.doom { background: rgba(40, 20, 10, .7); }
.alert.doom .alert-name { background: linear-gradient(#e8dccb 0 40%, #a89a88 40% 70%, #5a4a3a 70%); -webkit-background-clip: text; background-clip: text; }
.confetti:not(.skull) { border-radius: 50% 50% 0 0; }

@media (max-width: 560px) {
  .logo span { font-size: 19px; }
  .sun { width: 60px; height: 60px; }
}

/* ---------- Power-ups ---------- */
.powers { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.power {
  display: flex; align-items: center; gap: 3px; padding: 4px 9px; border: 2.5px solid var(--brown); border-radius: 999px;
  background: var(--cream); box-shadow: 0 3px 0 var(--brown); cursor: pointer; font: 15px var(--type); color: var(--brown);
}
.power span { font-family: var(--emoji); font-size: 18px; }
.power b { font-family: var(--slab); font-weight: normal; color: var(--rust); }
.power:disabled { opacity: .4; cursor: default; }
.power.on { background: #e9f3c9; border-color: var(--avocado); }
.power:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.postcard.frozen .back { box-shadow: inset 0 0 0 1.4cqw rgba(160, 220, 255, .7), inset 0 0 6cqw rgba(160, 220, 255, .6), 0 10px 22px rgba(0, 0, 0, .28); }

/* ---------- More minigame pieces ---------- */
.work .lung { fill: #8fc6e8; }
.work .lung.hot { fill: #e0302a; }
.work .orbit { fill: none; stroke: rgba(90, 58, 34, .35); stroke-width: 1.2; stroke-dasharray: 3 3; animation: march 1s linear infinite; }
.work .orbit-done { fill: none; stroke: var(--orange); stroke-width: 2.4; stroke-linecap: round; }
.work .spot { fill: rgba(255, 210, 63, .35); stroke: #f0a020; stroke-width: 1.2; }
.work .spot-core { fill: #f0a020; }
.work .simon { opacity: .35; stroke: #fff; stroke-width: 1; transition: opacity .1s; }
.work .simon.lit { opacity: 1; filter: drop-shadow(0 0 3px #fff); }

/* ---------- Mishaps ---------- */
.postcard.dizzy { animation: dizzy 1.2s cubic-bezier(.5, 0, .5, 1); }
@keyframes dizzy { 50% { transform: rotate(200deg) scale(.85); } 100% { transform: rotate(360deg); } }
.postcard.upside { animation: upside 2.6s ease-in-out; }
@keyframes upside { 15%, 85% { transform: rotate(180deg); } }
.postcard.blownaway { animation: blownaway 1.6s ease-in-out; }
@keyframes blownaway { 35% { transform: translate(120vw, -30vh) rotate(60deg); } 36% { transform: translate(-120vw, 20vh) rotate(-40deg); } 100% { transform: rotate(var(--tilt, -.8deg)); } }
body.ouch::before { background: rgba(220, 40, 40, .35) !important; }
.speech {
  position: absolute; bottom: 105%; right: 10%; z-index: 6; width: max-content; max-width: 34cqw; padding: 1cqw 2cqw;
  background: #fff; border: .4cqw solid var(--brown); border-radius: 2cqw; font: 2.8cqw var(--type); color: var(--brown);
  animation: pop .25s cubic-bezier(.2, 1.6, .4, 1);
}
.speech::after { content: ""; position: absolute; top: 100%; right: 20%; border: 1.2cqw solid transparent; border-top-color: var(--brown); }
.splat { position: absolute; width: 9cqw; height: 7cqw; background: radial-gradient(circle at 40% 40%, #fff, #f2f2ee 55%, #d8d8d0); border-radius: 46% 54% 40% 60% / 55% 40% 60% 45%; box-shadow: 2cqw .5cqw 0 -1.8cqw #eee, -2cqw 1.5cqw 0 -2.2cqw #eee; opacity: .92; }
.runner { position: fixed; z-index: 45; bottom: 6vh; left: -140px; display: flex; align-items: center; gap: 6px; pointer-events: none; animation: run 3.5s linear forwards; }
.runner span { font: 46px var(--emoji); }
.runner i { font: 15px var(--type); font-style: normal; background: #fff; border: 2px solid var(--brown); border-radius: 12px; padding: 3px 9px; color: var(--brown); white-space: nowrap; }
.runner.fast { animation-duration: 1.6s; }
.runner.fly { bottom: 45vh; animation: run 2s linear forwards, wiggle .2s infinite alternate; }
@keyframes run { to { left: 110vw; } }

/* ---------- Forgery desk ---------- */
.forge-box { text-align: center; max-width: 380px; }
.forge-art { position: relative; width: 210px; margin: 10px auto; cursor: crosshair; touch-action: none; }
.forge-art > svg { width: 100%; display: block; }
.forge-art .forge-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#forge-target { fill: rgba(232, 163, 61, .25); stroke: var(--rust); stroke-width: 1; stroke-dasharray: 2 2; }
#forge-pen { font: 14px var(--emoji); }
.forge-msg { font: 18px var(--type); color: var(--brown); min-height: 1.3em; }
.fake-row { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 6px; }
.btn.fake { background: #e8dcf0; font-size: 14px; padding: 6px 12px; }
.btn.fake[hidden] { display: none; }

/* ---------- Mr. Hinge's shop ---------- */
.shop-box { max-width: 560px; }
.hinge { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; }
.hinge-face { font: 56px var(--emoji); flex: none; animation: bob 3s ease-in-out infinite; }
.hinge-say { position: relative; margin: 0; flex: 1; background: #fff; border: 3px solid var(--brown); border-radius: 16px; padding: 8px 12px; font: 16px var(--type); color: var(--brown); }
.hinge-say::before { content: ""; position: absolute; left: -12px; top: 50%; translate: 0 -50%; border: 8px solid transparent; border-right-color: var(--brown); }
.shop-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow: auto; }
.shop-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; background: rgba(232, 163, 61, .12); border-radius: 12px; padding: 6px 8px; }
.shop-row b { font-family: var(--slab); font-weight: normal; color: var(--rust); }
.shop-row small { display: block; font-size: 12px; color: var(--ink-soft); }
.shop-ico { font: 30px var(--emoji); text-align: center; }
.shop-stamp svg { width: 44px; display: block; }
.shop-row .btn { padding: 6px 12px; font-size: 14px; white-space: nowrap; }
.closed-sign { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px; margin: 6px auto; background: var(--rust); color: var(--cream); border: 4px solid var(--brown); border-radius: 18px; transform: rotate(-4deg); box-shadow: 6px 6px 0 var(--mustard); }
.closed-sign b { font: 44px var(--slab); font-weight: normal; letter-spacing: .05em; }
.closed-sign span { font: 20px var(--type); }
.closed-sign small { font-size: 13px; opacity: .85; text-align: center; }
.postcard, .powers, .meters { user-select: none; -webkit-user-select: none; }
.hinge-face { width: 110px; flex: none; font-size: 56px; line-height: 1; animation: none; }
.hinge-face svg { width: 100%; display: block; filter: drop-shadow(3px 4px 0 rgba(90, 58, 34, .35)); }
.hinge-face.talk svg { animation: hingetalk .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hingetalk { 30% { transform: scale(1.06, .95) rotate(-3deg); } 60% { transform: scale(.97, 1.04) rotate(2deg); } }
@media (max-width: 560px) { .hinge-face { width: 80px; } }

/* ---------- Forgery workshop ---------- */
.workshop-box { max-width: 720px; }
.ws-grid { display: grid; grid-template-columns: 200px 1fr; gap: 14px; align-items: start; }
.ws-preview { position: relative; width: 180px; margin: 6px auto; cursor: crosshair; touch-action: none; }
.ws-preview > svg { width: 100%; display: block; filter: drop-shadow(3px 4px 0 rgba(90, 58, 34, .3)); }
.ws-preview .ws-pen { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#ws-target { fill: rgba(232, 163, 61, .25); stroke: var(--rust); stroke-width: 1; stroke-dasharray: 2 2; }
#ws-penc { font: 14px var(--emoji); }
.ws-steps { display: flex; flex-direction: column; gap: 8px; }
.ws-step { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: rgba(232, 163, 61, .12); border-radius: 12px; padding: 8px; }
.ws-step > b { width: 100%; font-family: var(--slab); font-weight: normal; color: var(--rust); }
.ws-step select, .ws-step input { font: 14px var(--type); color: var(--brown); background: #fff8e8; border: 2px solid var(--brown); border-radius: 10px; padding: 5px 8px; max-width: 100%; }
.ws-step select { flex: 1; min-width: 140px; }
.ws-step input { width: 90px; }
.ws-step .btn { padding: 5px 12px; font-size: 14px; }
.ws-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ws-or { width: 100%; font-size: 12px; color: var(--ink-soft); }
.ws-claim { font-size: 14px; background: #fff8e8; border: 2px dashed var(--mustard); border-radius: 12px; padding: 8px 10px; margin: 10px 0; }
.ws-claim i { color: var(--rust); }
.ws-h { font: 18px var(--slab); color: var(--rust); margin: 14px 0 6px; font-weight: normal; }
.ws-fakes { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-fake { width: 70px; text-align: center; }
.ws-fake svg { width: 56px; display: block; margin: 0 auto; }
.ws-fake small { font-size: 9px; color: var(--ink-soft); }
.fake-tag { font: 11px var(--type); font-style: normal; color: #7a3aa8; background: #efe2fa; border-radius: 999px; padding: 0 6px; }
.hinge-heart { margin: -4px 0 8px; font-size: 14px; }
.hinge-heart span { font-family: var(--emoji); }
.hinge-heart small { font-family: var(--type); color: var(--ink-soft); }
@media (max-width: 560px) { .ws-grid { grid-template-columns: 1fr; } }

/* ---------- Mr. Hinge pops in when something rare turns up ---------- */
.cameo { position: fixed; z-index: 42; right: 10px; bottom: 6px; display: flex; align-items: flex-end; flex-direction: row-reverse; gap: 6px; pointer-events: none; transform: translateX(130%) rotate(12deg); transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.cameo.in { transform: translateX(0) rotate(-4deg); }
.cameo-art { width: 130px; flex: none; font: 64px var(--emoji); }
.cameo-art svg { width: 100%; display: block; filter: drop-shadow(4px 4px 0 rgba(90, 58, 34, .35)); }
.cameo.in .cameo-art { animation: hingetalk .6s .4s cubic-bezier(.3, 1.6, .5, 1); }
.cameo-say { position: relative; max-width: 220px; margin: 0 0 90px; background: #fff; border: 3px solid var(--brown); border-radius: 16px; padding: 8px 12px; font: 15px var(--type); color: var(--brown); box-shadow: 3px 3px 0 var(--mustard); }
.cameo-say::after { content: ""; position: absolute; right: -12px; bottom: 16px; border: 8px solid transparent; border-left-color: var(--brown); }
@media (max-width: 560px) { .cameo-art { width: 90px; } .cameo-say { max-width: 170px; margin-bottom: 60px; font-size: 13px; } }