/* Photobooth "ROOMS" — per-experience-style skins (see architecture.md §20).
A room style is chosen at creation (START) and broadcast in the snapshot; app.js
mirrors it onto , and everything here keys off that attribute.
Classic is the default look (app.css untouched). Vintage restyles the SAME markup —
scenes don't branch on style except the booth's chrome (booth.js _applyVintage /
_applyMeme). The meme room's block is at the bottom of this file.
Vintage = a 1930s coin-op "photo automat": warm smoky room light, a brushed-metal
cabinet with rivets, an enamel marquee, red velvet curtains that part when your
camera comes alive, and a printed/aged strip. Textures in /client/rooms/vintage/
(curtain.webp, metal.webp, paper.webp) with gradient fallbacks underneath, so the
skin still reads right while they load. */
/* ---- the room itself: warm, yellowed, industrial ---------------------------- */
body[data-room="vintage"] {
/* Token overrides: every scene inherits the vintage material automatically. */
--paper: #3a332a;
--paper-raised: #4a4136;
--ink: #f2e7cf;
--ink-soft: #c8b795;
--line: #60543f;
--pink-tint: #5c3c46;
--blue-tint: #3c4a5c;
--font-display: "Gowun Batang", "Pretendard", serif;
--shadow-soft: 0 10px 32px rgba(0, 0, 0, 0.45);
background:
/* a warm tungsten lamp from above, industrial gloom pooling at the floor */
radial-gradient(1100px 700px at 50% -8%, rgba(255, 208, 130, 0.16), transparent 60%),
radial-gradient(150% 90% at 50% 118%, rgba(12, 9, 5, 0.6), transparent 55%),
linear-gradient(180deg, #4a4034, #3a332a 55%, #2e2820);
background-attachment: fixed;
}
/* Faint animated film grain over the whole room (not just the booth) — the entire
session feels like found footage. Non-interactive and very quiet (4%). */
body[data-room="vintage"]::after {
content: "";
position: fixed;
inset: -60px;
z-index: 2147483000; /* above app content; pointer-events off so it never blocks */
pointer-events: none;
opacity: 0.05;
background-image: url("data:image/svg+xml;utf8,");
animation: room-grain 900ms steps(3) infinite;
}
@keyframes room-grain {
0% { transform: translate(0, 0); }
33% { transform: translate(-24px, 14px); }
66% { transform: translate(18px, -20px); }
100% { transform: translate(0, 0); }
}
/* ---- vintage typography ------------------------------------------------------ */
body[data-room="vintage"] .brand-mark,
body[data-room="vintage"] .choice-title {
font-family: "Gowun Batang", serif;
font-style: italic;
letter-spacing: 0;
}
body[data-room="vintage"] .eyebrow {
font-family: "Space Mono", monospace;
color: var(--ink-soft);
}
/* ---- controls in brass & enamel ---------------------------------------------- */
body[data-room="vintage"] .btn-primary {
background: linear-gradient(180deg, #ecdaae 0%, #d4b57c 55%, #b9975c 100%);
color: #3a2c17;
border: 1px solid #8a6f42;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 3px 10px rgba(0, 0, 0, 0.35);
}
body[data-room="vintage"] .btn-primary.is-ready {
background: linear-gradient(180deg, #b9d4a4 0%, #8fb479 55%, #74995f 100%);
border-color: #5c7a4a;
color: #22301a;
}
body[data-room="vintage"] .choice-card,
body[data-room="vintage"] .group-toggle,
body[data-room="vintage"] .pack-card,
body[data-room="vintage"] .room-card {
background:
linear-gradient(180deg, rgba(255, 240, 205, 0.045), rgba(0, 0, 0, 0.12)),
var(--paper-raised);
}
body[data-room="vintage"] .room-card.is-on {
border-color: #d4b57c;
box-shadow: 0 0 0 1px rgba(212, 181, 124, 0.35), var(--shadow-soft);
}
body[data-room="vintage"] .code-cell,
body[data-room="vintage"] .text-input {
background: #2e2820;
color: var(--ink);
}
/* ---- the machine: a 1930s photo automat around the booth stage ---------------
Markup built by booth.js _applyVintage():
.machine > .machine-marquee
> .machine-body > .machine-rail.is-left | .machine-center(.booth-stage) | .machine-rail.is-right
> .machine-base > .machine-plate | .machine-slot */
.machine {
width: min(100%, 720px);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* The lit enamel sign on top — cream lightbox, dark script, softly glowing. */
.machine-marquee {
align-self: center;
margin-bottom: 10px;
padding: 6px 34px 9px;
background:
radial-gradient(120% 160% at 50% 0%, #fbf3dc 0%, #efe1bd 70%, #e2cfa2 100%);
border: 3px solid #6e6252;
border-radius: 3px;
box-shadow:
0 0 26px rgba(255, 226, 150, 0.28),
inset 0 0 14px rgba(120, 90, 40, 0.25),
0 4px 14px rgba(0, 0, 0, 0.4);
}
.machine-marquee-text {
font-family: "Gowun Batang", serif;
font-style: italic;
font-weight: 700;
font-size: clamp(20px, 4.2vw, 30px);
color: #241c10;
letter-spacing: 0.01em;
white-space: nowrap;
}
/* The cabinet: brushed metal (photo texture over a metal gradient) + rivet rails. */
.machine-body {
display: grid;
grid-template-columns: 34px 1fr 34px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.22)),
url("/client/rooms/vintage/metal.webp") center / cover,
linear-gradient(180deg, #9a948a, #7d766c);
border: 2px solid #59503f;
border-bottom: none;
border-radius: 4px 4px 0 0;
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.machine-rail {
/* a column of rivets down each side, like the automat's panel seams */
background-image: radial-gradient(circle 3px at 50% 13px, rgba(255, 252, 240, 0.75) 0 1.4px, rgba(40, 32, 20, 0.55) 2.2px, transparent 3.2px);
background-size: 100% 30px;
background-repeat: repeat-y;
background-position: center 8px;
}
.machine-center {
padding: 14px 10px;
/* the booth interior behind the curtain gap — near-black warm */
background: linear-gradient(180deg, #17130e, #241d15);
border-left: 2px solid #59503f;
border-right: 2px solid #59503f;
min-width: 0;
}
/* Base strip under the stage: the instruction plate + the dispensing slot. */
.machine-base {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: var(--s2);
padding: 12px 16px;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.3)),
url("/client/rooms/vintage/metal.webp") center / cover,
linear-gradient(180deg, #8d867b, #6d665c);
border: 2px solid #59503f;
border-radius: 0 0 4px 4px;
box-shadow: var(--shadow-soft);
}
.machine-plate {
display: flex;
flex-direction: column;
gap: 2px;
padding: 8px 12px;
background: radial-gradient(140% 200% at 50% 0%, #f6ecd2 0%, #e7d6ae 100%);
border: 2px solid #5f5442;
border-radius: 2px;
box-shadow: inset 0 0 10px rgba(110, 84, 40, 0.22);
min-width: 0;
}
.machine-plate-title {
font-family: "Space Mono", monospace;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.28em;
color: #241c10;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.machine-plate-sub {
font-family: "Gowun Batang", serif;
font-style: italic;
font-size: 11.5px;
color: rgba(36, 28, 16, 0.72);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.machine-slot {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.machine-slot-mouth {
width: 120px;
height: 10px;
background: linear-gradient(180deg, #050403, #1c160f);
border: 2px solid #4c4232;
border-radius: 2px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.2);
}
.machine-slot-ready {
display: flex;
align-items: center;
gap: 6px;
font-family: "Space Mono", monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
color: #3a3123;
background: #e7d6ae;
border: 1px solid #5f5442;
border-radius: 2px;
padding: 2px 8px;
}
.machine-lamp {
width: 8px;
height: 8px;
border-radius: 50%;
background: #7a6a4a;
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
transition: background 300ms ease, box-shadow 300ms ease;
}
.machine-lamp.is-on {
background: #ffb43a;
box-shadow: 0 0 8px rgba(255, 180, 58, 0.9);
}
.machine-lamp.is-blink { animation: lamp-blink 1s steps(2) infinite; }
@keyframes lamp-blink {
0%, 100% { background: #ffb43a; box-shadow: 0 0 8px rgba(255, 180, 58, 0.9); }
50% { background: #7a6a4a; box-shadow: none; }
}
/* ---- the velvet curtains over the live feeds ---------------------------------
Two halves inside .booth-feeds (which is the exact strip-cell box). Closed until
the local camera is live, then they slide apart — stepping into the booth. */
body[data-room="vintage"] .booth-feeds { position: relative; }
.booth-curtain {
position: absolute;
top: 0;
bottom: 0;
width: 51%;
z-index: 4;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 30%),
url("/client/rooms/vintage/curtain.webp") center / cover,
repeating-linear-gradient(90deg, #6d1420 0 14px, #8a1e2c 14px 26px, #5c101a 26px 40px);
box-shadow: inset 0 -12px 22px rgba(0, 0, 0, 0.5);
transition: transform 1600ms cubic-bezier(0.65, 0, 0.25, 1);
will-change: transform;
}
.booth-curtain.is-left { left: 0; border-right: 3px solid rgba(20, 4, 6, 0.8); }
.booth-curtain.is-right { right: 0; border-left: 3px solid rgba(20, 4, 6, 0.8); }
.booth-curtain.is-left.is-open { transform: translateX(-104%); }
.booth-curtain.is-right.is-open { transform: translateX(104%); }
/* ---- grainy live view ---------------------------------------------------------
PREVIEW-ONLY (architecture.md §0): a CSS filter + noise overlay on the on-screen
feeds. The real captured frames are untouched — the strip gets its vintage look
from the 'automat' FILTER at render time. */
body[data-room="vintage"] .booth-video {
filter: sepia(0.42) contrast(1.12) saturate(0.72) brightness(0.98);
}
body[data-room="vintage"] .booth-feeds::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
opacity: 0.16;
background-image: url("data:image/svg+xml;utf8,");
animation: room-grain 800ms steps(4) infinite;
/* plus a soft projector vignette on the feed corners */
box-shadow: inset 0 0 60px rgba(10, 6, 2, 0.55);
}
body[data-room="vintage"] .countdown {
font-family: "Gowun Batang", serif;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.75), 0 0 18px rgba(255, 214, 140, 0.35);
}
/* warm tungsten flash instead of pure white */
body[data-room="vintage"] .booth-flash { background: #ffe9c2; }
/* thumbs read as freshly-printed paper stubs sliding out of the slot */
body[data-room="vintage"] .booth-thumb {
border: 3px solid #efe3c4;
border-radius: 1px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
background: #efe3c4;
}
body[data-room="vintage"] .booth-thumb img { filter: sepia(0.35) contrast(1.08) saturate(0.8); }
/* the permission gate matches the room's gloom */
body[data-room="vintage"] .booth-gate { background: rgba(38, 32, 24, 0.93); }
/* ---- mobile ------------------------------------------------------------------ */
@media (max-width: 640px) {
.machine-body { grid-template-columns: 16px 1fr 16px; }
.machine-rail { background-size: 100% 24px; }
.machine-center { padding: 10px 6px; }
.machine-marquee { padding: 4px 22px 6px; }
.machine-base {
grid-template-columns: 1fr;
justify-items: center;
gap: var(--s1);
padding: 10px 12px;
}
.machine-plate { align-items: center; width: 100%; }
.machine-plate-title { font-size: 12px; letter-spacing: 0.2em; }
}
/* =================================================================================
VINTAGE COMPLETENESS PASS — the two players, every scene, and every overlay.
THE VINTAGE ACCENT PALETTE (canonical — mirrored in Design.md §9). The classic pink
and blue don't sit right against the warm dark room, so on vintage the SAME two
player identities are re-dressed in period materials:
player "pink" → VELVET ROSE #D9705B (tint #5B3A33) — the curtain's warm red
player "blue" → BRASS GOLD #D9A954 (tint #52422A) — the machine's fittings
success green (on dark) #8FBF9A
error / warning (on dark) #E0876C
enamel cream (plates/tickets)#EFE3C4 ink on enamel #2E2214
Everything that says var(--pink)/var(--blue) — cursors, swatches, ready dots, feed
tags, selection borders, sticker handles, the urgent timer — retints automatically.
Below that: hardcoded light-mode colors in modals/overlays are re-materialized. */
body[data-room="vintage"] {
--pink: #D9705B;
--pink-tint: #5B3A33;
--blue: #D9A954;
--blue-tint: #52422A;
}
/* The profile color choices keep their NAMES ("pink"/"blue") in the protocol; on
vintage they read as velvet + brass, which is the point — same two people, new era. */
/* ---- ticket buttons -------------------------------------------------------------
The shared next/ready button (.ready-btn on PROFILE/LAYOUT/THEME/EDIT/FILTER/
DECORATE) becomes a 1930s admission ticket: the generated cutout rides on top of a
brass gradient, so if the image hasn't loaded the button still reads brass. */
body[data-room="vintage"] .ready-btn {
min-width: 190px;
min-height: 58px;
padding: 14px 34px;
border: none;
border-radius: 2px;
background:
url("/client/rooms/vintage/ticket.webp") center / 100% 100% no-repeat,
linear-gradient(180deg, #ecdaae 0%, #d4b57c 55%, #b9975c 100%);
color: #2e2214;
font-family: "Space Mono", monospace;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: none;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.45));
transition: transform 120ms ease, filter 120ms ease;
}
body[data-room="vintage"] .ready-btn:hover:not(:disabled) {
transform: translateY(-2px) rotate(-0.6deg);
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.5)) brightness(1.04);
}
body[data-room="vintage"] .ready-btn.is-ready {
color: #24391f;
filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.45)) sepia(0.25) hue-rotate(55deg) saturate(0.9);
}
/* ---- PROFILE — punch your name into the machine -------------------------------- */
body[data-room="vintage"] .profile-panel {
padding: var(--s3);
background:
linear-gradient(180deg, rgba(255, 240, 205, 0.05), rgba(0, 0, 0, 0.16)),
var(--paper-raised);
border: 2px solid #59503f;
border-radius: 3px;
box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body[data-room="vintage"] .field-label {
font-family: "Space Mono", monospace;
letter-spacing: 0.24em;
}
/* the name goes on an engraved brass nameplate */
body[data-room="vintage"] .profile-panel .text-input {
background: linear-gradient(180deg, #efe0b4, #d9c28c);
border: 2px solid #59503f;
border-radius: 2px;
color: #2e2214;
font-family: "Space Mono", monospace;
letter-spacing: 0.08em;
box-shadow: inset 0 2px 5px rgba(90, 66, 30, 0.35);
}
body[data-room="vintage"] .profile-panel .text-input::placeholder { color: rgba(46, 34, 20, 0.45); }
/* cursor swatches become bakelite machine buttons: deep bezel + brass ring on pick */
body[data-room="vintage"] .swatch {
border: 3px solid #241f17;
box-shadow:
inset 0 4px 8px rgba(255, 255, 255, 0.28),
inset 0 -5px 9px rgba(0, 0, 0, 0.4),
0 3px 8px rgba(0, 0, 0, 0.5);
}
body[data-room="vintage"] .swatch.is-selected {
border-color: #241f17;
box-shadow:
0 0 0 3px #d4b57c,
inset 0 4px 8px rgba(255, 255, 255, 0.28),
inset 0 -5px 9px rgba(0, 0, 0, 0.4),
0 4px 10px rgba(0, 0, 0, 0.55);
}
body[data-room="vintage"] .peer-ready { color: #8fbf9a; }
/* ---- EDIT — the strip comes out of the dispenser -------------------------------- */
body[data-room="vintage"] .edit-right::before {
content: "";
width: min(356px, 92vw);
aspect-ratio: 760 / 320; /* the cropped dispenser band's true shape */
background: url("/client/rooms/vintage/dispenser.webp") center bottom / contain no-repeat;
margin-bottom: calc(-1 * var(--s2) - 2px); /* the strip tucks under the slot */
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
z-index: 1;
pointer-events: none;
}
body[data-room="vintage"] .edit-strip {
box-shadow: inset 0 0 0 1px rgba(46, 34, 20, 0.25), 0 14px 34px rgba(0, 0, 0, 0.5);
}
/* the pool reads as a pile of fresh sepia contact prints */
body[data-room="vintage"] .edit-pool-item {
border: 3px solid #efe3c4;
border-radius: 1px;
background: #efe3c4;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.45);
}
body[data-room="vintage"] .edit-pool-item img { filter: sepia(0.35) contrast(1.08) saturate(0.8); }
body[data-room="vintage"] .edit-pool-item:hover { border-color: #d4b57c; }
body[data-room="vintage"] .edit-pool-item.is-placed { opacity: 0.38; filter: grayscale(0.4); }
/* ---- FILTER — swatch cards as mounted slides ------------------------------------ */
body[data-room="vintage"] .filter-card {
background: transparent;
border: none;
}
body[data-room="vintage"] .filter-sample {
border: 5px solid #efe3c4;
border-bottom-width: 16px;
border-radius: 1px;
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
background: #efe3c4;
}
body[data-room="vintage"] .filter-card.is-active .filter-sample {
border-color: #d4b57c;
box-shadow: 0 0 0 2px rgba(212, 181, 124, 0.4), 0 8px 18px rgba(0, 0, 0, 0.55);
}
body[data-room="vintage"] .filter-cap {
font-family: "Space Mono", monospace;
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
}
body[data-room="vintage"] .gallery-dot { background: #6b5f4a; }
body[data-room="vintage"] .gallery-dot.is-active { background: #d4b57c; }
/* ---- THEME — pack boxes as the automat's sample drawers --------------------------- */
body[data-room="vintage"] .pack-card { border: 2px solid #59503f; border-radius: 3px; }
body[data-room="vintage"] .pack-label { font-family: "Gowun Batang", serif; font-style: italic; }
body[data-room="vintage"] .pack-sub { letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
/* the sample chips read as mounted print snippets */
body[data-room="vintage"] .pack-chip { box-shadow: 0 0 0 2px #efe3c4, 0 2px 6px rgba(0, 0, 0, 0.4); border-radius: 1px; }
body[data-room="vintage"] .pack-chip-more { background: #2e2820; color: var(--ink-soft); }
body[data-room="vintage"] .pack-back {
background: #2e2820;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 2px;
font-family: "Space Mono", monospace;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* keep the selection borders readable over the darker material */
body[data-room="vintage"] .theme-strip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), 0 3px 10px rgba(0, 0, 0, 0.35); }
/* ---- DOWNLOAD — the finished print under the dispenser --------------------------- */
body[data-room="vintage"] .dl-preview {
display: flex;
flex-direction: column;
align-items: center;
}
body[data-room="vintage"] .dl-preview::before {
content: "";
width: min(300px, 80vw);
aspect-ratio: 760 / 320;
background: url("/client/rooms/vintage/dispenser.webp") center bottom / contain no-repeat;
margin-bottom: -6px;
filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
pointer-events: none;
}
body[data-room="vintage"] .dl-canvas { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
body[data-room="vintage"] .dl-status.is-ok { color: #8fbf9a; }
/* share-to-claim promo box: velvet-toned instead of pink */
body[data-room="vintage"] .dl-actions.dl-free.is-promo {
box-shadow: 0 0 0 6px rgba(217, 112, 91, 0.14);
}
/* ---- generic status colors on the dark room -------------------------------------- */
body[data-room="vintage"] .acct-note.is-ok,
body[data-room="vintage"] .dlp-note.is-ok { color: #8fbf9a; }
body[data-room="vintage"] .dlp-note.is-err { color: #e0876c; }
body[data-room="vintage"] .acct-giftcode.is-copied { border-color: #8fbf9a; color: #8fbf9a; }
body[data-room="vintage"] .group-toggle-badge { color: #2e2214; background: #d9c28c; }
body[data-room="vintage"] .group-toggle.is-on .group-toggle-badge { color: #2e2214; background: var(--blue); }
/* ---- overlays & modals (paywall popup, thank-you, profile, toast) ----------------
These live outside #app but inside , so they inherit the vintage tokens; the
rules below only fix the hardcoded light-mode colors left behind. */
body[data-room="vintage"] .dlp-title,
body[data-room="vintage"] .pay-title,
body[data-room="vintage"] .acct-title,
body[data-room="vintage"] .fgate-title {
font-family: "Gowun Batang", serif;
font-style: italic;
letter-spacing: 0;
}
body[data-room="vintage"] .dlp-card-shell {
border: 2px solid #59503f;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
body[data-room="vintage"] .dlp-x { background: #2e2820; color: var(--ink-soft); }
body[data-room="vintage"] .dlp-x:hover { background: #262019; }
body[data-room="vintage"] .dlp-card { background: #3f382e; }
body[data-room="vintage"] .dlp-card-feature {
border-color: #8a6f42;
background: linear-gradient(180deg, #4e4331, #443a2b);
box-shadow: 0 10px 30px rgba(212, 181, 124, 0.12);
}
body[data-room="vintage"] .dlp-pill { background: #2e2820; color: var(--ink-soft); }
body[data-room="vintage"] .dlp-pill-hot { background: linear-gradient(120deg, #c06a52, #a3543e); color: #ffe9dc; }
body[data-room="vintage"] .dlp-feats li { color: #d8ccb2; }
body[data-room="vintage"] .dlp-tick { color: #8fbf9a; }
body[data-room="vintage"] .dlp-card-feature .dlp-tick { color: var(--blue); }
body[data-room="vintage"] .dlp-anchor { color: #8a7d66; }
body[data-room="vintage"] .dlp-btn-premium {
background: linear-gradient(180deg, #ecdaae 0%, #d4b57c 55%, #b9975c 100%);
color: #2e2214;
}
body[data-room="vintage"] .dlp-btn-ghost { background: #2e2820; color: var(--ink); }
body[data-room="vintage"] .dlp-btn-ghost:hover:not(:disabled) { background: #262019; }
body[data-room="vintage"] .dlp-divider { color: #8a7d66; }
body[data-room="vintage"] .dlp-redeem-input {
background: #2e2820;
color: var(--ink);
border-color: var(--line);
}
body[data-room="vintage"] .dlp-redeem-input:focus { border-color: var(--blue); }
body[data-room="vintage"] .dlp-game { background: #3f382e; }
body[data-room="vintage"] .dlp-game:hover { border-color: #8a7d66; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); }
body[data-room="vintage"] .dlp-game.is-fav {
border-color: #8a6f42;
background: linear-gradient(180deg, #4e4331, #443a2b);
box-shadow: 0 10px 28px rgba(212, 181, 124, 0.12);
}
body[data-room="vintage"] .dlp-game.is-fav:hover { border-color: var(--blue); }
body[data-room="vintage"] .dlp-game-fav { background: linear-gradient(120deg, #c06a52, #a3543e); color: #ffe9dc; }
/* thank-you (confetti) screen */
body[data-room="vintage"] .pay-check { color: #8fbf9a; }
body[data-room="vintage"] .pay-check.is-premium {
background: linear-gradient(135deg, var(--pink-tint), var(--blue-tint));
color: #e8c27b;
}
/* profile / account overlay */
body[data-room="vintage"] .acct-avatar { background: var(--pink-tint); color: #f0c9b8; }
body[data-room="vintage"] .acct-avatar.is-guest { background: #2e2820; color: var(--ink-soft); }
body[data-room="vintage"] .acct-plan-badge { color: #2e2214; background: #d9c28c; border-color: #8a6f42; }
body[data-room="vintage"] .acct-giftcode:hover { background: #262019; }
body[data-room="vintage"] .acct-status-card.is-premium {
border-color: #8a6f42;
background: linear-gradient(180deg, #4e4331, var(--paper-raised));
}
/* =================================================================================
MEME ROOM — "recreate the classics" (see architecture.md §20).
Deliberately light-handed: the meme room keeps the classic bright look (no token
flips) plus a faint sunny halftone over the page — the star is the BOOTH's pose
card (built by booth.js _applyMeme()): every countdown deals a random two-character
meme above the camera for the couple to recreate. The card is a prompt only —
never composited into the preview or the strip (§0). */
body[data-room="meme"] {
background:
radial-gradient(rgba(255, 196, 74, 0.14) 1.5px, transparent 1.6px),
radial-gradient(rgba(255, 123, 163, 0.10) 1.5px, transparent 1.6px),
var(--paper);
background-size: 26px 26px, 26px 26px, auto;
background-position: 0 0, 13px 13px, 0 0;
}
/* ---- the pose card above the camera ------------------------------------------- */
.meme-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: min(100%, 440px);
margin: 0 auto var(--s2);
padding: 10px 12px 12px;
background: var(--paper-raised);
border: 1.5px solid var(--line);
border-radius: var(--r-card);
box-shadow: var(--shadow-soft);
}
.meme-card-tag {
align-self: flex-start;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #8c3f5e;
background: var(--pink-tint);
border-radius: var(--r-ctrl);
padding: 3px 8px;
}
.meme-card-img {
display: block;
max-width: 100%;
max-height: clamp(110px, 20vh, 190px);
width: auto;
border-radius: 2px;
}
.meme-card-cap {
font-size: 13px;
font-weight: 600;
color: var(--ink-soft);
text-align: center;
}
/* dealing the next pose: a quick snap-in, like a card slapped on the table */
.meme-card.pop { animation: meme-deal 320ms cubic-bezier(0.34, 1.4, 0.5, 1); }
@keyframes meme-deal {
0% { transform: scale(0.9) rotate(-1.6deg); }
100% { transform: scale(1) rotate(0deg); }
}
@media (max-width: 640px), (max-height: 720px) {
.meme-card { padding: 8px 10px 10px; gap: 5px; }
.meme-card-img { max-height: clamp(90px, 16vh, 150px); }
.meme-card-cap { font-size: 12px; }
}
/* =================================================================================
TREND ROOMS — the 2026 Korean photobooth trend pass (architecture.md §20):
Laundry, Prison, Subway, Airplane, Karaoke. Same rules as vintage/meme: the skin
keys off body[data-room], the booth chrome is built by booth.js _apply