/* Fotoguest — guest-facing pages: camera, lab envelope, gallery */
:root {
  --sun: #FFC300;
  --orange: #FF8A00;
  --red: #FF2D2D;
  --sky: #00A6E0;
  --green: #28B24B;
  --charcoal: #111111;
  --cream: #FFF8E7;
  --cream-2: #F3E8CC;
  --plastic: #1A1A1A;
  --print: #FFFDF8;
  --led: #FF8A00;
  --ink-blue: #1f3a8a;
  --font: 'Poppins', system-ui, sans-serif;
  --pen: 'Nanum Pen Script', 'Bradley Hand', cursive;
  --rainbow: linear-gradient(180deg, var(--sun) 0 20%, var(--orange) 0 40%, var(--red) 0 60%, var(--sky) 0 80%, var(--green) 0);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--charcoal); background: var(--cream); -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
[hidden] { display: none !important; }
.logo { display: block; height: auto; }
.rainbow { height: 20px; background: var(--rainbow); }

/* ===================================================================== */
/* CAMERA                                                                */
/* ===================================================================== */
body.cam-page { height: 100dvh; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }

.cam {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-columns: minmax(0, 1fr);
  background: var(--cream);
  user-select: none; -webkit-user-select: none;
}

.cam-top {
  display: flex; align-items: center; gap: 12px;
  padding: calc(var(--safe-t) + 8px) 16px 8px;
}
.cam-top .logo { width: 116px; flex: none; }
.cam-title {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang { margin-left: auto; color: inherit; font-size: 12px; font-weight: 600; text-decoration: none; padding: 6px 11px; border: 1.5px solid currentColor; border-radius: 99px; flex: none; opacity: .8; }
.cam .rainbow { height: 15px; }

/* viewfinder */
.vf-wrap { container-type: size; display: grid; place-items: center; padding: 20px 22px 12px; min-height: 0; }
.vf {
  position: relative; overflow: hidden; background: #000;
  width: min(100cqw, 100cqh * 2 / 3); aspect-ratio: 2 / 3;
  border-radius: 14px;
  box-shadow: 0 0 0 9px var(--plastic), 0 0 0 11px #3a3a3a, 0 18px 34px rgba(60,40,0,.25);
}
@media (orientation: landscape) and (max-height: 600px) {
  .vf { width: min(100cqw, 100cqh * 3 / 2); aspect-ratio: 3 / 2; }
}
.vf video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.cam:not([data-state="intro"]) .vf video { opacity: 1; }
.vf video.mirror { transform: scaleX(-1); }

.vf-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(3) infinite;
}
@keyframes grain { 0% { transform: translate(0,0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(3%, -5%); } }

.vf-frame { position: absolute; inset: 14px; pointer-events: none; }
.vf-frame i { position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.7); }
.vf-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.vf-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.vf-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.vf-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.vf-shutter { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.vf.shut .vf-shutter { animation: shut .26s ease-out; }
@keyframes shut { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

.vf-pill {
  position: absolute; left: 50%; top: 26px; transform: translateX(-50%); color: #fff;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12px; padding: 5px 12px; border-radius: 99px; white-space: nowrap;
}
.vf-pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.cam[data-state="intro"] .vf-pill, .cam[data-state="error"] .vf-pill { display: none; }

.vf-hint {
  position: absolute; left: 50%; bottom: 26px; transform: translate(-50%, 14px);
  background: var(--sun); color: var(--charcoal); font-weight: 700; font-size: 15px;
  padding: 9px 18px; border-radius: 99px; opacity: 0; transition: opacity .2s, transform .25s; pointer-events: none;
}
.cam[data-state="wind"] .vf-hint { opacity: 1; transform: translate(-50%, 0); }

.vf-note-on {
  position: absolute; left: 14px; bottom: 26px; background: var(--print); color: var(--ink-blue);
  font: 22px/1 var(--pen); padding: 6px 10px 4px; transform: rotate(-3deg); box-shadow: 0 4px 10px rgba(0,0,0,.25);
}

/* intro card over the viewfinder */
.vf-card {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 26px 22px; gap: 12px; color: var(--cream); text-align: left;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,195,0,.16), transparent 60%),
    linear-gradient(180deg, #1c1c1c, #0b0b0b);
  overflow-y: auto;
}
.intro-kicker { margin: 0; font-size: 15px; opacity: .8; }
.intro-title {
  margin: -6px 0 4px; font-weight: 800;
  font-size: clamp(30px, 11cqw, 44px); line-height: .98; letter-spacing: -.035em; color: var(--sun);
}
.intro-roll { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.35; }
.intro-dev { margin: 0; font-size: 14px; line-height: 1.5; opacity: .8; }
.intro-name { display: grid; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.intro-name input {
  width: 100%; font: 26px/1.1 var(--pen); color: var(--charcoal); background: var(--cream);
  border: 0; border-radius: 6px; padding: 10px 12px 6px;
}
.btn-load {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  margin-top: 6px; border: 0; border-radius: 99px; padding: 15px 22px;
  background: var(--sun); color: var(--charcoal);
  font-weight: 700; font-size: 17px;
  box-shadow: 0 4px 0 #c99a00;
}
.btn-load:active { transform: translateY(2px); box-shadow: 0 2px 0 #c99a00; }
.btn-load:disabled { opacity: .6; }
.btn-load.ghost { background: transparent; color: var(--charcoal); box-shadow: inset 0 0 0 2.5px var(--charcoal); }
.vf-card.error p { font-size: 16px; line-height: 1.5; margin: 0; }

/* film stocks */
.stocks {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.stocks::-webkit-scrollbar { display: none; }
.stock {
  flex: none; display: inline-flex; align-items: center; gap: 7px; scroll-snap-align: center;
  border: 1.5px solid rgba(17,17,17,.25); background: transparent; color: var(--charcoal);
  padding: 6px 13px 6px 7px; border-radius: 99px; font-size: 13px; font-weight: 600;
}
.stock i { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: 0 0 0 1.5px rgba(17,17,17,.3); }
.stock.on { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.cam[data-state="intro"] .stocks { opacity: .35; pointer-events: none; }

/* control deck: the black plastic body */
.deck {
  position: relative; color: var(--cream);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  row-gap: 14px; padding: 18px 22px calc(14px + var(--safe-b));
  background:
    radial-gradient(120% 140% at 50% -40%, #383838 0, transparent 55%),
    var(--plastic);
  border-radius: 26px 26px 0 0;
}
.counter { justify-self: start; display: grid; justify-items: center; gap: 5px; }
.counter-window {
  min-width: 62px; height: 46px; display: grid; place-items: center; padding: 0 8px; overflow: hidden;
  background: linear-gradient(#d9d0b8, var(--cream) 40%, #d2c8ae);
  border-radius: 10px; box-shadow: inset 0 3px 6px rgba(0,0,0,.55), 0 0 0 3px #050505;
}
.counter-window span {
  font-weight: 700; font-size: 27px; line-height: 1; color: var(--charcoal);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.counter-window span.tick { animation: tick .3s ease-out; }
@keyframes tick { from { transform: translateY(-40%); opacity: .2; } to { transform: none; opacity: 1; } }
.counter-label { font-size: 12px; font-weight: 500; opacity: .6; }

.shutter {
  width: 92px; height: 92px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 35%, #555, #2b2b2b 60%, #151515);
  box-shadow: 0 0 0 4px #050505, 0 6px 14px rgba(0,0,0,.6);
}
.shutter-cap {
  width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #ff8e80, var(--red) 45%, #b31414);
  box-shadow: 0 5px 0 #6e0c0c, inset 0 -3px 6px rgba(0,0,0,.25);
  transition: transform .08s, box-shadow .08s, filter .2s;
}
.shutter:active .shutter-cap, .cam.firing .shutter-cap { transform: translateY(4px); box-shadow: 0 1px 0 #6e0c0c; }
.shutter:disabled { cursor: default; }
.cam:not([data-state="ready"]) .shutter-cap { filter: grayscale(.85) brightness(.55); }

.wheel {
  justify-self: end; position: relative; width: 60px; height: 92px; border: 0; padding: 0; background: none;
  display: grid; place-items: center;
}
.wheel-ridges {
  position: absolute; inset: 0 8px 18px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, #4a4a4a 0 2px, #1d1d1d 2px 5px, #0a0a0a 5px 7px);
  box-shadow: inset 6px 0 8px rgba(0,0,0,.7), inset -6px 0 8px rgba(0,0,0,.7), 0 0 0 3px #050505;
}
.wheel.spin .wheel-ridges { animation: spinwheel .5s cubic-bezier(.2,.7,.3,1); }
@keyframes spinwheel { from { background-position-y: 0; } to { background-position-y: -63px; } }
.wheel-label { position: absolute; bottom: 0; font-size: 12px; font-weight: 500; opacity: .6; }
.cam[data-state="wind"] .wheel-ridges { box-shadow: inset 6px 0 8px rgba(0,0,0,.7), inset -6px 0 8px rgba(0,0,0,.7), 0 0 0 3px var(--sun), 0 0 18px rgba(255,195,0,.55); animation: nudge 1.2s ease-in-out infinite; }
.cam[data-state="wind"] .wheel-label { color: var(--sun); opacity: 1; font-weight: 600; }
@keyframes nudge { 0%, 100% { background-position-y: 0; } 50% { background-position-y: -8px; } }

.aux { grid-column: 1 / -1; display: flex; justify-content: center; gap: 8px; }
.aux-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #2a2a2a; border: 0; border-radius: 99px; color: var(--cream);
  padding: 9px 16px; font-size: 13px; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
#noteBtn.on { color: var(--sun); }
.led { width: 8px; height: 8px; border-radius: 50%; background: #4a2a10; }
.flash-btn.on .led { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.flash-btn.charging .led { animation: blink .18s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.cam[data-state="intro"] .deck .aux, .cam[data-state="intro"] .wheel { opacity: .35; pointer-events: none; }

.queue { grid-column: 1 / -1; margin: -4px 0 0; text-align: center; font-size: 12px; opacity: .65; }

/* flash */
.flash-fx { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; }
.flash-fx.fill { opacity: 1; transition: none; }
.flash-fx.pop { animation: pop .45s ease-out; }
.flash-fx.blink { animation: pop2 .3s ease-out; }
@keyframes pop { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pop2 { 0% { opacity: .25; } 100% { opacity: 0; } }

.toast {
  position: fixed; left: 50%; top: calc(var(--safe-t) + 136px); transform: translate(-50%, -10px);
  background: var(--charcoal); color: var(--cream); font-weight: 600; font-size: 14px;
  padding: 9px 18px; border-radius: 99px; opacity: 0; pointer-events: none; transition: .2s; z-index: 40;
  max-width: calc(100vw - 32px); text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* note sheet */
.sheet {
  border: 0; padding: 0; margin: auto auto 0; width: min(560px, 100%); max-width: 100%;
  background: var(--print); color: var(--charcoal); border-radius: 22px 22px 0 0;
}
.sheet::backdrop { background: rgba(0,0,0,.55); }
.sheet form { display: grid; gap: 12px; padding: 22px 20px calc(18px + var(--safe-b)); }
.sheet label { font-weight: 700; font-size: 16px; }
.sheet textarea {
  width: 100%; resize: none; border: 0; border-bottom: 2px solid #d6cdb6; background:
  repeating-linear-gradient(transparent 0 33px, #ece3cc 33px 34px);
  font: 28px/34px var(--pen); color: var(--ink-blue); padding: 0 2px; outline: none;
}
.sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.btn-plain { background: none; border: 0; font-weight: 600; padding: 12px 6px; color: #555; }

/* ===================================================================== */
/* LAB ENVELOPE (roll finished)                                          */
/* ===================================================================== */
.done {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  display: grid; place-items: center; padding: calc(var(--safe-t) + 28px) 16px calc(var(--safe-b) + 28px);
  background: var(--cream);
  animation: rise .5s ease-out;
}
.done::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 20px; background: var(--rainbow); }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.envelope { width: min(420px, 100%); color: var(--charcoal); filter: drop-shadow(0 18px 30px rgba(80,60,0,.28)); }
.env-flap { height: 54px; background: #e6ae00; clip-path: polygon(0 100%, 6% 0, 94% 0, 100% 100%); }
.env-body { background: var(--sun); padding: 22px 22px 26px; display: grid; gap: 14px; }
.env-brand { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.env-brand img { width: 92px; }
.env-body h2 { margin: 0; font-weight: 800; font-size: 28px; line-height: 1.05; letter-spacing: -.03em; }
.env-fields { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--charcoal); }
.env-fields div { display: grid; grid-template-columns: 96px 1fr; align-items: baseline; border-bottom: 2px solid var(--charcoal); padding: 6px 0 2px; }
.env-fields dt { font-size: 12px; font-weight: 600; }
.env-fields dd { margin: 0; font: 25px/1.05 var(--pen); color: var(--ink-blue); overflow-wrap: anywhere; }
.big-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 4px; }
.big-countdown span { background: var(--charcoal); border-radius: 8px; padding: 10px 4px 8px; display: grid; justify-items: center; gap: 2px; }
.big-countdown b {
  font-weight: 700; font-size: 28px; line-height: 1; color: var(--led);
  font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(255,138,0,.6);
}
.big-countdown small { color: #bbb; font-size: 11px; }
.env-copy { margin: 0; font-size: 15px; line-height: 1.55; }
.env-wait { margin: 0; font-size: 13px; font-weight: 700; }
.envelope .btn-load { justify-self: start; }

/* ===================================================================== */
/* CLOSED / EXPIRED                                                      */
/* ===================================================================== */
.closed-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.closed-page::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 20px; background: var(--rainbow); }
.closed-card { width: min(440px, 100%); display: grid; gap: 14px; }
.closed-card .logo { width: 200px; margin-bottom: 10px; }
.closed-card h1 { margin: 0; font-size: 32px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.closed-card p { margin: 0; font-size: 17px; line-height: 1.55; }

/* ===================================================================== */
/* GALLERY                                                               */
/* ===================================================================== */
body.gal-page { background: var(--cream-2); }

.darkroom {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(90% 60% at 50% 30%, #8a1a10 0%, #4b0d08 45%, #1d0503 100%);
  transition: opacity 1.4s ease .5s, visibility 0s linear 1.9s;
}
.darkroom.open { opacity: 0; visibility: hidden; }
.darkroom .envelope { transition: transform .8s cubic-bezier(.5,0,.2,1); }
.darkroom.open .envelope { transform: translateY(110vh) rotate(6deg); }
.darkroom .env-kicker { margin: 0; font-size: 14px; font-weight: 600; }
.darkroom .btn-load { justify-self: stretch; background: var(--charcoal); color: var(--sun); box-shadow: 0 4px 0 #000; }

.gal-head { background: var(--cream); }
.gal-head-inner { max-width: 1200px; margin: 0 auto; display: grid; gap: 12px; padding: calc(var(--safe-t) + 18px) 20px 26px; }
.gal-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gal-top .logo { width: 150px; }
.gal-head h1 {
  margin: 8px 0 0; font-weight: 800;
  font-size: clamp(32px, 7vw, 68px); line-height: 1; letter-spacing: -.04em; overflow-wrap: anywhere;
}
.gal-meta { margin: 0; font-size: 15px; color: #4d4637; }
.gal-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.gal-actions .btn-load { margin: 0; padding: 12px 20px; font-size: 16px; }

.prints { max-width: 1200px; margin: 0 auto; padding: 26px 14px 40px; columns: 2 160px; column-gap: 14px; }
@media (min-width: 720px) { .prints { columns: 3 220px; column-gap: 22px; padding: 36px 20px 60px; } }
@media (min-width: 1100px) { .prints { columns: 4 240px; } }
.print {
  break-inside: avoid; margin: 0 0 18px; display: block; width: 100%;
  background: none; border: 0; padding: 0; text-align: left;
  transform: rotate(var(--r, 0deg));
}
.print-paper { display: block; background: var(--print); padding: 6px; box-shadow: 0 1px 1px rgba(60,40,0,.14), 0 8px 18px rgba(60,40,0,.14); }
.print-img { display: block; position: relative; background: #2a1410; overflow: hidden; }
.print-img img { display: block; width: 100%; height: auto; }
.print .print-img img { filter: brightness(.12) sepia(1) saturate(1.6) hue-rotate(-18deg) contrast(.7) blur(1.5px); }
.print.dev .print-img img { filter: none; transition: filter 3.2s cubic-bezier(.3,.1,.3,1); transition-delay: var(--delay, 0s); }
.no-anim .print .print-img img { filter: none !important; transition: none !important; }
.print figcaption { padding: 6px 4px 0; }
.print .note { display: block; font: 23px/1.05 var(--pen); color: var(--ink-blue); }
.print .by { display: block; font-size: 12px; color: #6a614e; margin-top: 2px; }
.print:hover .print-paper { box-shadow: 0 1px 1px rgba(60,40,0,.14), 0 14px 28px rgba(60,40,0,.22); }

.gal-empty { max-width: 520px; margin: 60px auto; text-align: center; font-size: 18px; padding: 0 16px; }
.gal-foot { text-align: center; padding: 0 16px calc(40px + var(--safe-b)); font-size: 13px; color: #6a614e; }

/* lightbox */
.lb { position: fixed; inset: 0; z-index: 70; background: #0a0a0a; color: #fff; display: grid; grid-template-rows: auto 1fr auto; }
.lb[hidden] { display: none; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--safe-t) + 10px) 14px 6px; font-size: 14px; }
.lb-x { background: #222; border: 0; color: #fff; border-radius: 99px; padding: 9px 16px; font-weight: 600; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 8px; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; background: var(--print); padding: 6px; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; background: rgba(255,255,255,.08); color: #fff; font-size: 26px; border-radius: 10px; }
.lb-prev { left: 10px; } .lb-next { right: 10px; }
@media (hover: none) { .lb-nav { display: none; } }
.lb-bottom { padding: 8px 16px calc(14px + var(--safe-b)); display: grid; gap: 10px; }
.lb-cap .note { font: 28px/1.1 var(--pen); color: #fff; }
.lb-cap .by { font-size: 13px; opacity: .7; }
.lb-actions { display: flex; gap: 10px; }
.lb-actions .btn-load { margin: 0; padding: 12px 20px; font-size: 16px; }
.lb-actions .btn-load.ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }

/* demo: developed print preview */
.demo-print {
  position: fixed; inset: 0; z-index: 45; display: grid; place-items: center; align-content: center; gap: 14px;
  padding: 24px 20px; background: rgba(10,10,10,.88); color: #fff; text-align: center;
}
.demo-print p { margin: 0; font-weight: 600; max-width: 30ch; }
.demo-print img { max-width: min(88vw, 420px); max-height: 62dvh; background: var(--print); padding: 7px; box-shadow: 0 20px 40px rgba(0,0,0,.5); transform: rotate(-1.5deg); }

@media (prefers-reduced-motion: reduce) {
  .vf-grain { animation: none; }
  .print.dev .print-img img { transition-duration: .6s; }
  .darkroom, .darkroom .envelope { transition-duration: .3s; transition-delay: 0s; }
  .cam[data-state="wind"] .wheel-ridges { animation: none; }
}

/* ===================================================================== */
/* CAMERA DESIGNS (Golden Roll and up)                                   */
/* ===================================================================== */
.cam { --skin-bg: var(--cream); --skin-ink: var(--charcoal); --skin-stripes: var(--rainbow); background: var(--skin-bg); color: var(--skin-ink); }
.cam .rainbow { background: var(--skin-stripes); }
.cam .stock { color: var(--skin-ink); border-color: color-mix(in srgb, var(--skin-ink) 25%, transparent); }
.cam .stock.on { background: var(--skin-ink); color: var(--skin-bg); border-color: var(--skin-ink); }
.cam-top:has(.custom) { flex-wrap: wrap; row-gap: 2px; }
.cam-title.custom { order: 3; flex-basis: 100%; font-family: var(--pen); font-size: 26px; font-weight: 400; line-height: 1.05; text-align: center; white-space: normal; padding-bottom: 2px; }
.skin-wedding { --skin-bg: #FBF5EC; --skin-ink: #3b2f2a;
  --skin-stripes: linear-gradient(180deg, #E9B8B0 0 33%, #D9B26A 0 66%, #B9C4A7 0); }
.skin-fiesta { --skin-bg: #FFF0F6; --skin-ink: #2a0f1d;
  --skin-stripes: linear-gradient(180deg, #FF3E9A 0 25%, #FFC300 0 50%, #00A6E0 0 75%, #28B24B 0); }
.skin-garden { --skin-bg: #F1F1E6; --skin-ink: #263022;
  --skin-stripes: linear-gradient(180deg, #8FA37E 0 33%, #D9825B 0 66%, #E8C27A 0); }
.skin-noir { --skin-bg: #141414; --skin-ink: #F3E3B5;
  --skin-stripes: linear-gradient(180deg, #C9A44C 0 50%, #8A6D2C 0); }
.skin-noir .vf { box-shadow: 0 0 0 9px #000, 0 0 0 11px #C9A44C, 0 18px 34px rgba(0,0,0,.5); }
.skin-noir .deck { background: radial-gradient(120% 140% at 50% -40%, #2a2a2a 0, transparent 55%), #050505; }