/* 구독展 — one exhibition, five rooms. Rooms change lighting; type and components stay the same. */
@font-face { font-family: Pretendard; font-weight: 800; font-display: swap; src: local('Pretendard ExtraBold'), url(/src/fonts/Pretendard-ExtraBold.subset.woff2) format('woff2'); }
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: local('Pretendard Medium'), url(/src/fonts/Pretendard-Medium.subset.woff2) format('woff2'); }
/* 展 only, from Pretendard JP (same family, OFL). Declared after the main faces so it is checked first for U+5C55. */
@font-face { font-family: Pretendard; font-weight: 800; font-display: swap; src: url(/src/fonts/PretendardJP-ExtraBold.han.woff2) format('woff2'); unicode-range: U+5C55; }
@font-face { font-family: Pretendard; font-weight: 500; font-display: swap; src: url(/src/fonts/PretendardJP-Medium.han.woff2) format('woff2'); unicode-range: U+5C55; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-display: swap; src: url(/src/fonts/InstrumentSerif-Italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F; }


:root {
  --ink: #111322;
  --paper: #f3efe6;
  --pink: #ffc9dc;
  --blue: #2140d8;
  --teal: #0b5d4b;
  --lime: #d6ff4f;
  --orange: #ff5b2e;
  --orange-ink: #b83a10; /* orange text on light backgrounds; text on orange fills uses --ink */
  --sans: Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', Pretendard, serif; /* Pretendard catches 展 in italic labels */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: #55566a;
  --line: #11132233;
  --cta-bg: var(--ink);
  --cta-fg: var(--paper);
  --focus: var(--blue);
  --card: var(--blue);
}
body:is([data-room="entrance"], [data-room="invite"]) { --bg: var(--teal); --fg: var(--pink); --muted: #ffe3ec; --line: #ffc9dc55; --cta-bg: var(--pink); --cta-fg: #10206e; --focus: var(--lime); }
body[data-room="price"] { --bg: #07080f; --fg: var(--pink); --muted: #c9c2dd; --line: #ffc9dc33; --cta-bg: var(--pink); --cta-fg: #07080f; --focus: var(--lime); }
body[data-room="gallery"] { --bg: #111219; --fg: var(--paper); --muted: #c9c7d6; --line: #ffffff2e; --cta-bg: var(--paper); --cta-fg: var(--ink); --focus: var(--lime); }
body[data-visitor="true"] .owner-only, body:not([data-visitor="true"]) .visitor-only { display: none; }
body[data-room="curate"] { --bg: color-mix(in oklab, var(--card) 62%, #05060c); --fg: #fff; --muted: #e6e8f5; --line: #ffffff40; --cta-bg: var(--pink); --cta-fg: #10206e; --focus: var(--lime); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding: 80px 0 110px; }
@media (max-width: 900px) { html:has(body[data-room="collect"]) { scroll-padding-top: calc(34dvh + 150px); } }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--fg);
  font: 500 16px/1.6 var(--sans); letter-spacing: -.01em; word-break: keep-all; overflow-wrap: break-word;
  transition: background-color .6s var(--ease), color .4s;
}
body::after { /* film grain */
  content: ''; position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: .09; 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");
}
button, input, select { font: inherit; color: inherit; }
button, a, label { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .4; }
a { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[tabindex="-1"]:focus { outline: none; }
h1, h2, h3, h4, p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper); border-radius: 99px; }
.skip:focus { top: 12px; }
.fine { font-size: 13px; line-height: 1.55; color: var(--muted); }
.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 34em; }

/* ---------- Shared components ---------- */
.room-label { display: flex; align-items: baseline; gap: 10px; font-size: 14px; color: var(--muted); }
.room-label i, .hud-brand i, .persona i, .card-meta span:first-child { font: italic 400 1.6em/1 var(--serif); color: var(--fg); letter-spacing: 0; }
.card-meta span:first-child { color: inherit; } /* cards keep their own ink, not the room's light text */
h1, h2 { font-weight: 800; letter-spacing: -.045em; line-height: 1.02; }
h2 { font-size: clamp(34px, 5.6vw, 84px); }
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 0 30px;
  border: 0; border-radius: 99px; background: var(--cta-bg); color: var(--cta-fg); font-weight: 800; font-size: 17px;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.cta:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px currentColor; }
.ghost { min-height: 48px; padding: 0 20px; border: 1.5px solid currentColor; border-radius: 99px; background: transparent; font-weight: 800; }
.ghost.small { min-height: 40px; padding: 0 14px; font-size: 14px; white-space: nowrap; }
.text-btn { border: 0; background: none; padding: 8px 0; text-decoration: underline; text-underline-offset: 4px; color: var(--muted); }
.chip { min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 99px; background: transparent; font-size: 14px; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rise { animation: rise .8s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
/* Room change: you walk on. This room grows past you and fades, the next one comes closer (reverse when going back).
   Into the hall, the room darkens into a wall with a doorway; walking through, the hall opens and its own lights come on. */
.hud { view-transition-name: hud; } /* stays put while the rooms move */
::view-transition-old(root) { animation: .45s cubic-bezier(.5, 0, .9, .4) both walk-past; }
::view-transition-new(root) { animation: .6s var(--ease) .12s both walk-in; }
html[data-dir="back"]::view-transition-old(root) { animation-name: walk-away; }
html[data-dir="back"]::view-transition-new(root) { animation-name: walk-back; }
html[data-to="gallery"][data-dir="fwd"]::view-transition-old(root) { animation: .5s ease-in both to-wall; }
html[data-to="gallery"][data-dir="fwd"]::view-transition-new(root) { animation: 1.15s cubic-bezier(.6, 0, .2, 1) .25s both through-door; }
@keyframes walk-past { to { opacity: 0; transform: scale(1.18); } }
@keyframes walk-in { from { opacity: 0; transform: scale(.92); } }
@keyframes walk-away { to { opacity: 0; transform: scale(.92); } }
@keyframes walk-back { from { opacity: 0; transform: scale(1.12); } }
@keyframes to-wall { to { filter: brightness(.07); transform: scale(1.05); } }
@keyframes through-door { from { clip-path: inset(30% 41% 18% 41% round 3px); transform: scale(1.3); filter: brightness(.55); } to { clip-path: inset(0); transform: none; filter: none; } }

/* Floor guide: after the ticket, before Room 01. The five rooms as a floor plan in their own lights, and what you take home. */
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto auto 1fr; gap: 28px 56px; max-width: 1200px; margin: 0 auto; }
.room-guide .room-head { grid-column: 1; margin: 0; }
.room-guide h2 { font-size: clamp(30px, 4.6vw, 64px); }
.room-guide .lede { max-width: 40em; text-wrap: pretty; }
.plan { --wall: 2.5px; --ink-wall: var(--ink); position: relative; grid-column: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.plan-room { --room: #fbf8f2; --text: var(--ink); --sub: #55566a; position: relative; display: grid; align-content: start; gap: 4px; min-height: 236px; padding: 18px 16px 50px; border: var(--wall) solid var(--ink-wall); background: var(--room); color: var(--text); }
.plan-room + .plan-room { margin-left: calc(var(--wall) * -1); }
.plan-room > i { font: italic 400 30px/1 var(--serif); }
.plan-room > b { font-size: 20px; letter-spacing: -.03em; }
.plan-room > span:last-child { font-size: 14px; line-height: 1.45; color: var(--sub); }
.r-price { --room: #07080f; --text: var(--pink); --sub: #c9c2dd; }
.r-curate { --room: #1d2a6b; --text: #fff; --sub: #dfe3f7; }
.r-gallery { --room: #111219; --text: var(--paper); --sub: #c9c7d6; }
.plan::after { content: ''; position: absolute; left: 20px; right: 14px; bottom: 23px; border-top: 2px dashed var(--orange); pointer-events: none; }
.plan::before { content: ''; position: absolute; right: 8px; bottom: 18px; border: 6px solid transparent; border-left: 9px solid var(--orange); border-right: 0; z-index: 1; }
.plan-art { display: grid; place-items: center start; height: 72px; margin-bottom: 8px; }
.art-tokens { display: flex; }
.art-tokens .token-face { width: 38px; height: 38px; margin-right: -10px; font-size: 11px; box-shadow: 0 4px 10px -6px #0008; }
.art-coins { display: flex; align-items: end; }
.art-coins i { display: grid; place-items: center; width: 34px; height: 34px; margin-right: -12px; border-radius: 50%; background: radial-gradient(closest-side, #ffe08a 62%, #e9b23a 64%, #c8901c 86%, #a8750f 88%); color: #8a5d06; font-size: 14px; font-weight: 800; line-height: 1; box-shadow: 0 4px 8px -2px #0009; }
.art-coins i:nth-child(2) { translate: 0 -12px; } .art-coins i:nth-child(3) { translate: 0 -4px; }
.art-card { position: relative; width: 44px; height: 60px; border-radius: 7px; background: #fff; rotate: -7deg; box-shadow: 0 8px 16px -8px #000c; }
.art-card em { position: absolute; top: 18px; left: -6px; padding: 1px 5px; border: 2px solid #0d7a3a; border-radius: 5px; background: #ffffffd9; color: #0d7a3a; font-size: 11px; font-style: normal; font-weight: 800; line-height: 1.2; rotate: -10deg; }
.art-frame { position: relative; width: 46px; height: 56px; border: 5px solid #0b0c12; background: #fbf8f2; box-shadow: 0 0 0 1px #ffffff26, 0 0 30px 6px #fff3d633; }
.art-frame::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--pink); }
.art-frame::after { content: ''; position: absolute; left: 50%; top: -18px; width: 22px; height: 4px; border-radius: 2px; translate: -50% 0; background: #c9c7d6; }
.art-poster { display: grid; align-content: end; width: 40px; height: 62px; padding: 5px; border-radius: 3px; background: linear-gradient(160deg, var(--blue), #0b5d4b); color: var(--pink); font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 8px 16px -8px #0009; rotate: 4deg; }
.take-home { grid-column: 2; grid-row: 1 / 4; align-self: center; display: grid; gap: 22px; justify-items: center; }
.guide-poster { display: grid; grid-template-rows: auto 1fr auto auto auto; justify-items: start; gap: 6px; width: 220px; aspect-ratio: 9 / 16; padding: 16px; border: 8px solid #fff; border-radius: 4px; background: linear-gradient(165deg, var(--blue) 30%, #0b5d4b); color: var(--pink); box-shadow: 0 30px 50px -30px #111322b3; rotate: 2deg; }
.guide-poster small { font: italic 400 14px/1 var(--serif); color: #ffe3ec; }
.guide-poster .mini-char { align-self: center; justify-self: center; width: 46%; }
.guide-poster strong { font-size: 34px; line-height: 1; letter-spacing: -.05em; }
.gp-line { font-size: 12px; color: #ffe3ec; } .gp-line b { color: var(--pink); }
.take-list { width: 100%; }
.take-list ul { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.take-list li { display: grid; padding-left: 16px; border-left: 3px solid var(--orange); }
.take-list li b { font-size: 16px; letter-spacing: -.02em; }
.take-list li span { font-size: 14px; color: var(--muted); }
.guide-actions { grid-column: 1; align-self: start; }
@media (max-width: 1023px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .take-home, .guide-actions { grid-column: 1; grid-row: auto; }
  .take-home { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; gap: 20px; }
  .guide-poster { width: 108px; padding: 8px; border-width: 5px; gap: 3px; }
  .guide-poster small { font-size: 9px; } .guide-poster strong { font-size: 18px; } .gp-line { font-size: 7.5px; }
  .take-list ul { gap: 6px; margin-top: 8px; } .take-list li b { font-size: 14px; } .take-list li span { font-size: 12px; }
  .plan { grid-template-columns: minmax(0, 1fr); }
  .plan-room { grid-template-columns: 62px auto minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: 8px; row-gap: 0; min-height: 0; padding: 8px 12px 8px 32px; }
  .plan-room + .plan-room { margin: calc(var(--wall) * -1) 0 0; }
  .plan-art { grid-row: 1 / 3; height: 50px; margin: 0; }
  .plan-art > span { scale: .78; transform-origin: left center; }
  .art-tokens .token-face { width: 32px; height: 32px; }
  .plan-room > i { font-size: 22px; } .plan-room > b { font-size: 17px; }
  .plan-room > span:last-child { font-size: 13px; }
  .plan-room > span:last-child { grid-column: 2 / 4; }
  .plan::after { left: 14px; right: auto; top: 14px; bottom: 16px; border-top: 0; border-left: 2px dashed var(--orange); }
  .plan::before { right: auto; left: 9px; bottom: 6px; border: 6px solid transparent; border-top: 9px solid var(--orange); border-bottom: 0; }
}
@media (max-width: 1023px) and (min-width: 641px) { .guide-actions { position: static; } }

/* Token: a round tablet with the service logo. Used in piles, shelf, cards. */
.token { position: absolute; left: 0; top: 0; width: 80px; height: 80px; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; will-change: transform; }
.token.held { cursor: grabbing; z-index: 2; }
.token.held .token-face { scale: 1.1; box-shadow: 0 18px 30px -8px #0006; }
.token.leaving .token-face { scale: 0; opacity: 0; }
.token-face {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 84%, var(--c) 85%); /* ring scales with the token */
  box-shadow: 0 6px 14px -4px #0005; transition: scale .2s var(--ease), opacity .25s;
}
.token-face img { width: 60%; height: 60%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.token-face b { font-size: 1em; font-weight: 800; color: var(--c); letter-spacing: -.04em; }

/* ---------- HUD ---------- */
.hud { position: fixed; inset: 0 0 auto; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(clamp(16px, 3vw, 36px), env(safe-area-inset-right)) 0 max(clamp(16px, 3vw, 36px), env(safe-area-inset-left)); color: var(--fg); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-brand { justify-self: start; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none; letter-spacing: -.03em; }
.hud-brand i { font-size: 1.3em; margin-left: 2px; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark .hole { fill: var(--bg); }
body:is([data-room="entrance"], [data-room="invite"]):not([data-inside="true"]) .brand-mark .hole { fill: var(--blue); } /* HUD sits on the blue top of the poster */
.hud-rooms { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--muted); }
.hud-rooms li { opacity: .55; transition: opacity .3s; }
.hud-rooms li[aria-current] { opacity: 1; color: var(--fg); font-weight: 800; }
.hud-rooms i { font-family: var(--serif); font-size: 1.25em; }
body:is([data-room="entrance"], [data-room="invite"], [data-room="guide"]) .hud-rooms { visibility: hidden; }
.hud-icon { width: 40px; min-height: 40px; padding: 0; border: 1.5px solid var(--line); border-radius: 99px; background: transparent; font-size: 14px; font-weight: 800; }
.share-error { position: fixed; top: 64px; left: 50%; z-index: 30; translate: -50% 0; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100% - 32px)); padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--orange); color: var(--ink); font-weight: 800; }
.share-error .close { background: #ffffff55; }

/* ---------- Rooms ---------- */
.room { position: relative; min-height: 100dvh; padding: 96px clamp(16px, 4vw, 56px) 48px; }
.room-head { display: grid; gap: 14px; max-width: 1200px; margin: 0 auto 36px; }
.back { justify-self: start; padding: 0; }
.room-exit .room-head { position: relative; }
#restart { position: absolute; top: 0; right: 0; z-index: 1; } /* on the label's line, so the share buttons stay in the first screen; above the label, whose rise animation paints it on top */
.room-collect h2 { font-size: clamp(30px, 4.2vw, 60px); }
.room-curate h2 { font-size: clamp(28px, 3.4vw, 50px); }
@media (min-width: 901px) { .room-curate h2 br { display: none; } }
body:not([data-room="entrance"], [data-room="invite"]) .hud, body[data-inside="true"] .hud { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); }
body[data-room="entrance"][data-scrolled="true"]:not([data-inside="true"]) .hud { background: color-mix(in srgb, var(--blue) 86%, transparent); backdrop-filter: blur(10px); }

/* Entrance: the exhibition poster. Title, the persona characters as the show's cast and the ticket.
   Flat things (paper, type, tickets) are what this page draws well, so there is no building to walk into. */
.room.room-entrance { padding: 0; text-align: left; } /* beats the phone .room padding */
.poster {
  display: grid; grid-template-rows: auto 1fr; min-height: 100dvh; overflow: hidden; padding: 0 clamp(20px, 5vw, 72px) clamp(20px, 3dvh, 32px);
  background: linear-gradient(160deg, #2140d8, #1b3fc4 45%, #0b5d4b); color: var(--pink);
}
.poster-rule { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: clamp(68px, 10dvh, 96px) 0 12px; border-bottom: 1.5px solid #ffc9dc99; font: italic 400 clamp(18px, 2.2vw, 28px)/1 var(--serif); }
.poster-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-areas: "type crowd" "ticket crowd"; align-items: end; gap: 20px 32px; padding: clamp(16px, 3dvh, 40px) 0 clamp(18px, 3dvh, 32px); }
.poster-type { grid-area: type; }
#entrance-title { font-size: clamp(88px, min(13vw, 24dvh), 220px); line-height: .9; letter-spacing: -.065em; }
.poster .lede { margin-top: clamp(12px, 2dvh, 24px); color: #ffe3ec; font-size: clamp(16px, 1.5vw, 20px); text-wrap: pretty; }
.poster .lede strong { display: block; margin-bottom: 6px; color: #fff; font-size: 1.3em; font-weight: 800; letter-spacing: -.03em; } /* the hook: the visitor's problem first */
.crowd { grid-area: crowd; position: relative; align-self: end; aspect-ratio: 2; } /* the cast is laid out in % of this box */
.crowd i { position: absolute; left: var(--x); bottom: var(--y); width: var(--w); translate: -50% 0; } /* a group photo: back row smaller and higher */
.crowd svg { display: block; width: 100%; height: auto; }
.poster .ticket { grid-area: ticket; justify-self: start; rotate: -3deg; animation: rise .8s var(--ease) .45s both; }
.poster .ticket-main { background: var(--pink); }
/* The part you tear stands out. Still on the poster after a few seconds, the stub tugs and the arrow points the way. */
.poster .ticket-stub { background: var(--lime); animation: tug 2.4s ease-in-out 4s infinite; }
.poster .ticket-stub b { animation: point 2.4s ease-in-out 4s infinite; }
.poster .ticket:not(.torn):is(:hover, :active) :is(.ticket-stub, .ticket-stub b), .poster .ticket.torn .ticket-stub b { animation: none; }
.poster .ticket.torn .ticket-stub { animation: stub-fall .6s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes tug { 0%, 40%, 100% { translate: 0; rotate: 0deg; } 12% { translate: 12px 2px; rotate: 4deg; } 24% { translate: 2px 0; rotate: 0deg; } 32% { translate: 8px 1px; rotate: 2.5deg; } }
@keyframes point { 0%, 40%, 100% { translate: 0; } 12%, 32% { translate: 8px 0; } }
.floaters { grid-area: crowd; align-self: stretch; position: relative; container-type: size; pointer-events: none; }
.floaters i { position: absolute; left: var(--x); top: calc((100cqh - 50cqw - var(--s)) * var(--y)); width: var(--s); translate: -50% 0; animation: bob 5s ease-in-out calc(var(--i) * -.8s) infinite alternate; } /* above the cast, which takes the bottom 50cqw */
.floaters .token-face { width: 100%; height: auto; aspect-ratio: 1; font-size: 13px; background: #fff; box-shadow: 0 16px 26px -12px #0008; }
@keyframes bob { from { transform: translateY(-7px) rotate(-5deg); } to { transform: translateY(7px) rotate(4deg); } }
@media (max-width: 760px), (orientation: portrait) {
  .poster-body { grid-template-columns: 1fr; grid-template-areas: "type" "crowd" "ticket"; gap: 8px; }
  #entrance-title { font-size: clamp(56px, min(22vw, 12dvh), 180px); }
  .poster .lede { font-size: 15px; }
  .poster .ticket { justify-self: center; rotate: -2deg; }
  .floaters { display: none; } /* one column: no empty space above the cast */
}
body[data-room="entrance"][data-inside="true"] { --bg: var(--paper); --fg: var(--ink); --muted: #55566a; --line: #11132233; --focus: var(--blue); }

/* Footer: the few facts that hold for the whole site. */
.site-footer { display: grid; gap: 4px; padding: 28px clamp(20px, 5vw, 72px) calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid #11132226; background: var(--paper); color: #55566a; font-size: 12px; line-height: 1.6; }
.site-footer b { margin-right: 6px; color: var(--ink); }

/* 지금 전시 중: example shows hung on the paper wall below the poster */
.showing { --fg: var(--ink); --muted: #55566a; --line: #11132233; --focus: var(--blue); display: grid; align-content: start; justify-items: center; min-height: calc(100dvh - 100px); /* tall enough to reach the HUD switch line */ gap: 10px; padding: clamp(64px, 10vh, 104px) 0 72px; background: linear-gradient(#ebe5d8, var(--paper) 40%); color: var(--fg); }
.showing .room-label { justify-content: center; }
.showing h2 { font-size: clamp(30px, 4.4vw, 56px); }
.showing-list { display: flex; align-items: flex-start; gap: clamp(28px, 5vw, 56px); width: 100%; margin: 20px 0 0; padding: 36px clamp(16px, 4vw, 56px) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.showing-list::-webkit-scrollbar { display: none; }
.showing-lede { color: var(--muted); }
.showing-nav { display: flex; gap: 12px; }
.showing-nav .hud-icon { --line: #11132233; color: var(--ink); }
.showing-nav .hud-icon:disabled { opacity: .35; }
.hang { position: relative; flex: 0 0 auto; display: grid; justify-items: center; gap: 14px; scroll-snap-align: center; }
.hang::before { content: ''; position: absolute; top: -22px; left: 50%; width: 42%; height: 7px; translate: -50% 0; border-radius: 4px; background: linear-gradient(#5b5d6e, #2b2d42); box-shadow: 0 18px 30px 6px #ffe8b073; } /* picture light */
.show-card { display: block; width: clamp(168px, 46vw, 216px); padding: 10px; border: 7px solid var(--ink); border-radius: 2px; background: #fffdf8; box-shadow: 0 24px 34px -22px #111322a6; text-align: left; transition: transform .3s var(--ease); }
.show-card:hover { transform: translateY(-4px); }
.poster-mini { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 6px; aspect-ratio: 3 / 4; overflow: hidden; padding: 10px; font-weight: 800; } /* same size on every frame: one hanging line */
.mini-char { width: clamp(56px, 38%, 72px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fffaf0, #ece2cc 70%); box-shadow: 0 8px 18px -10px #0008; }
.poster-mini strong { font-size: 16px; line-height: 1.15; letter-spacing: -.035em; }
.show-tokens { display: flex; align-items: center; justify-content: center; }
.show-tokens .token-face { width: 40px; height: 40px; margin: -3px; font-size: 11px; }
.show-tokens > b { font-size: 22px; letter-spacing: -.03em; opacity: .7; }
.hang-label { max-width: 216px; font-size: 12px; line-height: 1.45; color: var(--muted); text-align: center; }
.hang-label b { display: block; color: var(--ink); font-size: 13px; }
.theme-0 { background: linear-gradient(#f3efe6, #e9e3d6); color: var(--ink); }
.theme-1 { background: linear-gradient(#1b1f4a, #07080f); color: #ffd0df; }
.theme-2 { background: linear-gradient(#2140d8, #0b5d4b); color: #ffc9dc; }
.theme-3 { background: linear-gradient(#ffb36b, #ff6f8e); color: #2b0b1a; }
.theme-4 { background: linear-gradient(#ffffff, #d9d9d9); color: #000; }

.ticket {
  --tear: 0; display: flex; align-items: stretch; min-height: 132px; padding: 0; border: 0; background: none; color: var(--ink);
  text-align: left; filter: drop-shadow(0 22px 30px #0007); touch-action: pan-y; animation: rise .8s var(--ease);
}
.ticket-main, .ticket-stub { background: var(--paper); }
.ticket-main { display: grid; align-content: center; gap: 2px; padding: 16px 26px; border-radius: 16px 0 0 16px; mask: radial-gradient(circle 10px at 100% 50%, #0000 98%, #000); }
.ticket-main strong { font-size: 28px; letter-spacing: -.04em; line-height: 1.15; }
.ticket-main span { font-size: 13px; color: #55566a; }
.ticket-stub {
  display: grid; place-content: center; justify-items: center; gap: 2px; width: 96px; border-left: 2px dashed #11132255; border-radius: 0 16px 16px 0; font-weight: 800;
  transform-origin: 0 100%; transform: translateX(calc(var(--tear) * 1px)) rotate(calc(var(--tear) * .09deg)); transition: transform .2s;
}
.ticket-stub b { font-size: 26px; transition: translate .25s var(--ease); }
.ticket:hover .ticket-stub b { translate: 5px 0; }
.ticket.torn .ticket-stub { animation: stub-fall .6s cubic-bezier(.5, 0, .9, .5) forwards; }
@keyframes stub-fall { to { transform: translate(140px, 420px) rotate(62deg); opacity: 0; } }

/* Invitation: a shared link opens on a card — the friend's result first, then the match you get by making yours. */
.room-invite { display: grid; place-items: center; background: linear-gradient(160deg, #2140d8, #1b3fc4 45%, #0b5d4b); }
.invite-card { --fg: var(--ink); --muted: #55566a; --line: #11132233; --cta-bg: var(--ink); --cta-fg: var(--paper); --focus: var(--blue); display: grid; gap: 16px; width: min(460px, 100%); padding: 28px 26px 24px; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px #000c; rotate: -1.5deg; animation: rise .8s var(--ease) both; }
.invite-card h2 { font-size: clamp(28px, 7vw, 38px); line-height: 1.1; letter-spacing: -.05em; }
.invite-who { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 14px; }
.invite-char { width: 76px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fffaf0, #ece2cc 70%); }
.invite-char svg { display: block; width: 100%; height: 100%; }
.invite-who div { display: grid; gap: 2px; }
.invite-who strong { font-size: 20px; letter-spacing: -.03em; }
.invite-who div span { font-size: 14px; color: #55566a; }
.invite-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.invite-tokens .token-face { width: 40px; height: 40px; font-size: 12px; }
.invite-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; padding: 14px 0; border-block: 1.5px dashed #11132240; }
.invite-facts dt { font-size: 13px; color: #55566a; }
.invite-facts dd { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.invite-match { display: grid; justify-items: start; gap: 2px; padding: 14px 18px; border-radius: 16px; background: linear-gradient(135deg, var(--pink), #c8d4ff); }
.invite-match b { font-size: 14px; }
.invite-match strong { font-size: 44px; line-height: 1; letter-spacing: -.05em; }
.invite-match span { font-size: 14px; }
.invite-actions { display: grid; gap: 10px; }
@media (max-height: 700px) { /* short phones: the invitation and its button fit the first screen */
  .room.room-invite { padding-top: 68px; }
  .invite-card { gap: 10px; padding: 18px 18px 16px; }
  .invite-card h2 { font-size: 24px; }
  .invite-who { grid-template-columns: 52px minmax(0, 1fr); }
  .invite-char { width: 52px; }
  .invite-tokens { display: none; }
  .invite-facts { padding: 10px 0; gap: 6px 16px; }
  .invite-facts dd { font-size: 17px; }
  .invite-match { padding: 10px 14px; }
  .invite-match strong { font-size: 32px; }
}
.friend-note { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 99px; background: var(--lime); color: var(--ink); font-size: 14px; font-weight: 800; }

/* Room 01: collect */
.room-collect { background: linear-gradient(#f3efe6, #ebe5d8); }
.collect-layout { display: grid; grid-template-columns: minmax(300px, 5fr) 6fr; gap: clamp(20px, 3vw, 44px); max-width: 1200px; margin: 0 auto; align-items: start; }
/* The title and the vitrine stay put while the shelf scrolls; the vitrine gives up height on short screens. */
.collect-side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; max-height: calc(100dvh - 196px); }
.collect-side .room-head { margin: 0; }
.vitrine-wrap { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.vitrine {
  position: relative; height: min(50vh, 500px); min-height: 160px; overflow: hidden; touch-action: none; border: 2px solid var(--ink); border-radius: 30px 30px 6px 6px;
  background: linear-gradient(155deg, #ffffffcc, #ffffff40 45%, #ffffff99), radial-gradient(80% 60% at 50% 0%, #fff, transparent);
  box-shadow: inset 0 0 0 10px #ffffff70, inset 0 -30px 40px -20px #11132222, 0 50px 60px -40px #11132266;
}
.vitrine::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 20%, #ffffff8c 24%, transparent 30%, transparent 62%, #ffffff55 64%, transparent 68%); }
.vitrine-empty { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 28px/1 var(--serif); color: #11132255; transition: opacity .3s; }
.vitrine.has-items .vitrine-empty { opacity: 0; }
.plinth { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-radius: 6px; background: var(--ink); color: var(--paper); font-weight: 800; }
.plinth .chip { color: var(--paper); border-color: #f3efe666; }
.shelf { display: grid; gap: 16px; padding-bottom: 96px; }
.search input { width: 100%; min-height: 56px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; font-size: 17px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.shelf-grid h3 { margin: 18px 0 10px; font: italic 400 24px/1 var(--serif); }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pick {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 8px 12px 8px 8px; border: 1.5px solid var(--line); border-radius: 99px;
  background: #ffffffa8; text-align: left; font-size: 14px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; transition: background .2s, transform .2s var(--ease);
}
.pick .token-face { flex: 0 0 42px; width: 42px; height: 42px; font-size: 13px; }
.pick:hover { transform: translateY(-2px); }
.pick[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pick[aria-pressed="true"]::after { content: '✓'; position: absolute; right: 14px; color: var(--lime); }
.empty { padding: 32px 0; color: var(--muted); }
.room-foot {
  position: fixed; inset: auto 0 0; z-index: 10; display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding: 14px clamp(16px, 4vw, 56px) calc(14px + env(safe-area-inset-bottom)); background: #f3efe6e6; backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}

/* Room 02: price */
.room-price { --mx: 50%; --my: 38%; background: radial-gradient(420px 420px at var(--mx) var(--my), #353b85 0, transparent 70%), radial-gradient(50% 60% at 50% 38%, #1d2150 0, #07080f 70%); text-align: center; }
.room-price .room-head { justify-items: center; }
.price-stage { display: grid; justify-items: center; gap: 18px; max-width: 760px; margin: 0 auto; }
.price-sub, .verdict { font-size: clamp(16px, 2vw, 20px); color: var(--muted); }
.verdict { color: var(--lime); font-weight: 800; }
.big-number { font-size: clamp(56px, 12vw, 168px); font-weight: 800; letter-spacing: -.06em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pink); text-shadow: 0 0 60px #ffc9dc55; }
.big-number small { font-size: .22em; letter-spacing: -.02em; color: var(--muted); text-shadow: none; }
#guess { width: min(640px, 100%); height: 44px; accent-color: var(--pink); appearance: none; background: transparent; }
#guess::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #ffffff33); }
#guess::-webkit-slider-thumb { appearance: none; width: 40px; height: 40px; margin-top: -17px; border-radius: 50%; background: var(--pink); border: 4px solid #07080f; box-shadow: 0 0 0 2px var(--pink), 0 0 30px var(--pink); }
#guess::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--pink), #ffffff33); }
#guess::-moz-range-thumb { width: 32px; height: 32px; border-radius: 50%; background: var(--pink); border: 4px solid #07080f; box-shadow: 0 0 0 2px var(--pink); }
.range-scale { display: flex; justify-content: space-between; width: min(640px, 100%); font-size: 13px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; margin-top: 8px; }
/* Guess: the collected works line up above the number. Reveal: a printed admission receipt, one line per work, the
   bar under each line its share of the month. */
.entries { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 640px; margin: 0; padding: 0; list-style: none; }
.entries li { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 50ms + 200ms); }
.entries .token-face { width: 48px; height: 48px; font-size: 13px; }
.receipt {
  width: min(520px, 100%); margin-top: 6px; padding: 22px 22px 34px; background: #fbf8f2; color: var(--ink); text-align: left;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; /* torn-off edge */
  animation: feed 1.6s steps(20) 1s both;
}
/* Fed down out of a slot at its top edge: the torn end comes out first and the paper slides down. */
@keyframes feed { from { transform: translateY(-100%); clip-path: inset(100% 0 0 0); } to { transform: none; clip-path: inset(0); } }
.receipt header { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 1.5px dashed #11132240; }
.receipt h3 { font-size: 18px; letter-spacing: -.03em; }
.receipt header span { overflow: hidden; font-size: 12px; color: #55566a; white-space: nowrap; text-overflow: ellipsis; }
.receipt ol { margin: 0; padding: 4px 0 8px; list-style: none; }
.receipt ol li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; background: linear-gradient(#ff8fb1, #ff8fb1) 44px 100% / calc((100% - 44px) * var(--share)) 3px no-repeat; }
.receipt .token-face { width: 32px; height: 32px; font-size: 10px; }
.receipt li span { min-width: 0; font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.receipt li small { display: block; overflow: hidden; font-size: 12px; font-weight: 500; color: #55566a; white-space: nowrap; text-overflow: ellipsis; }
.receipt li small i { font-style: normal; font-weight: 800; color: var(--orange-ink); }
.receipt li b { font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.receipt li b small { font-size: 12px; font-weight: 500; color: #55566a; } /* the dollar price behind a converted line */
.receipt dl { display: grid; gap: 6px; margin: 0; padding-top: 12px; border-top: 1.5px dashed #11132240; }
.receipt dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.receipt dt { color: #55566a; font-size: 14px; }
.receipt dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.receipt .year dd { font-size: 20px; color: var(--orange-ink); }
.hints { width: min(520px, 100%); padding: 18px 22px 6px; border: 1px solid var(--line); border-radius: 18px; background: #0d0f1af0; text-align: left; } /* solid: the coins pile up behind it */
.hints h3 { font-size: 15px; letter-spacing: -.01em; color: var(--lime); }
.hints ul { display: grid; margin: 6px 0 0; padding: 0; list-style: none; }
.hints li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); animation: rise .6s var(--ease) both; animation-delay: calc(var(--i) * 160ms + 1.5s); }
.hints span { flex-basis: 100%; font-size: 13px; color: var(--muted); }
.hints b { font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.04em; color: var(--lime); font-variant-numeric: tabular-nums; }
.hints small { flex: 1 1 12em; font-size: 15px; color: var(--fg); overflow-wrap: anywhere; }
.hints li:first-child { border-top: 0; }
@media (min-width: 1024px) { /* number on the left, the receipt beside it */
  .price-stage:has(.receipt) { grid-template: auto auto auto 1fr auto / minmax(0, 1fr) 480px; gap: 12px 56px; max-width: 1120px; }
  .price-stage:has(.receipt) > * { grid-column: 1; }
  .price-stage:has(.receipt) > .verdict { grid-row: 1; margin-top: 48px; } /* level with the receipt's first lines */
  .price-stage:has(.receipt) > .big-number { grid-row: 2; }
  .price-stage:has(.receipt) > .hints { grid-row: 3; margin-top: 12px; }
  .price-stage:has(.receipt) > .receipt { grid-column: 2; grid-row: 1 / 5; margin: 0; }
  .price-stage:has(.receipt) > .actions { grid-column: 1 / -1; grid-row: 5; }
  .price-stage:has(.receipt) .big-number { font-size: clamp(72px, 7.6vw, 124px); }
}
/* Coins: the yearly cost piles up behind the numbers, under the floating button. */
.room-price .room-head, .price-stage { position: relative; z-index: 1; }
.coin-layer { position: fixed; inset: 0; pointer-events: none; }
.coins { position: absolute; inset: 0; }
.coins .token { pointer-events: auto; }
.coins .token-face { background: radial-gradient(closest-side, #ffe08a 62%, #e9b23a 64%, #c8901c 86%, #a8750f 88%); box-shadow: 0 4px 8px -2px #0009; }
.coins .token-face b { color: #6b4708; }

/* Room 03: curate */
.room-curate { overflow-x: clip; display: flex; flex-direction: column; min-height: 100dvh; }
.room-curate .curate-layout { width: 100%; }
.room-curate .room-head { margin-bottom: 20px; text-align: center; justify-items: center; }
.curate-layout { display: grid; grid-template-columns: 1fr minmax(0, 380px) 1fr; align-items: center; gap: clamp(16px, 4vw, 64px); max-width: 1100px; margin: 0 auto; }
.tally { display: grid; gap: 2px; color: var(--muted); }
.tally b { font-size: clamp(32px, 4vw, 56px); line-height: 1; letter-spacing: -.05em; color: var(--fg); }
.tally small { font-size: 14px; }
.tally-archive { justify-items: end; text-align: right; }
.deck { position: relative; height: clamp(300px, calc(100dvh - 350px), 540px); container-type: size; }
.room-price .sticky-actions { position: sticky; bottom: 0; z-index: 6; width: calc(100% + 32px); margin: 0 -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: none; backdrop-filter: none; box-shadow: none; } /* no band: the spotlight and receipt show through */
.card {
  --dx: 0px; --dy: 0px; --lean: 0; position: absolute; inset: 0; perspective: 1400px; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  transform: translate(var(--dx), var(--dy)) rotate(calc(var(--lean) * 14deg)); transition: transform .45s var(--ease), opacity .3s;
}
.card[data-depth="1"] { transform: translateY(16px) scale(.95); opacity: .85; }
.card[data-depth="2"] { transform: translateY(32px) scale(.9); opacity: .6; }
.card[data-depth="0"] { cursor: grab; }
.card.dragging { transition: none; cursor: grabbing; }
.card.fly-keep { transform: translate(130vw, -40px) rotate(28deg); transition: transform .34s cubic-bezier(.5, 0, .9, .6); }
.card.fly-archive { transform: translate(-130vw, -40px) rotate(-28deg); transition: transform .34s cubic-bezier(.5, 0, .9, .6); }
.card-inner { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .6s var(--ease); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 22px; overflow: hidden;
  border-radius: 28px; background: var(--paper); color: var(--ink); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 30px 60px -24px #000a, inset 0 0 0 1px #11132222;
}
.card-back { transform: rotateY(180deg); background: var(--ink); color: var(--paper); overflow-y: auto; overscroll-behavior: contain; }
.card-facts { display: grid; margin: 0; }
.card-facts div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid #ffffff24; }
.card-facts dt { font-size: 13px; opacity: .7; }
.card-facts dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.04em; color: var(--lime); }
.card-facts small { font-size: 14px; font-weight: 500; letter-spacing: -.02em; color: var(--paper); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: inherit; opacity: .75; }
.card-art { display: grid; place-items: center; flex: 1 1 auto; min-height: 120px; margin: 0 -22px; background: radial-gradient(60% 70% at 50% 40%, #ffffff55, transparent), var(--c); }
.card-art .token-face { width: clamp(96px, 30%, 128px); height: auto; aspect-ratio: 1; font-size: 30px; background: #fff; box-shadow: 0 0 0 7px #ffffff66, 0 20px 30px -12px #0008; }
.card h3 { font-size: clamp(28px, 4vw, 36px); letter-spacing: -.045em; line-height: 1.05; }
.plan-pills { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.plan-pills button { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1.5px solid #11132233; border-radius: 99px; background: transparent; font-size: 13px; font-weight: 800; }
.plan-pills [aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.plan-one { font-size: 13px; color: #55566a; }
.card-warn { align-self: start; padding: 4px 10px; border-radius: 8px; background: var(--orange); color: var(--ink); font-size: 13px; font-weight: 800; }
@container (max-height: 440px) {
  .card-face { gap: 6px; padding: 14px 16px 16px; }
  .card-art { min-height: 64px; margin: 0 -16px; }
  .card-art .token-face { width: 76px; font-size: 22px; }
  .card h3 { font-size: 24px; }
  .card-price b { font-size: 26px; }
  .card-benefit { -webkit-line-clamp: 1; }
}
@container (max-height: 440px) { .card-facts div { padding: 8px 0; } .card-facts dd { font-size: 22px; } }
@container (max-height: 330px) { .card-benefit, .card-meta { display: none; } .card-art { min-height: 48px; } .card-art .token-face { width: 56px; } }
.card.nudge { animation: nudge 1.6s var(--ease) .6s 2; }
@keyframes nudge { 20% { transform: translateX(26px) rotate(3deg); } 45% { transform: translateX(-26px) rotate(-3deg); } 65% { transform: none; } }
.card-price b { font-size: 34px; letter-spacing: -.05em; }
.card-price span { color: #55566a; font-size: 14px; }
/* Section card: opens a category before its works. Swipe either way or the button moves on. */
.card-section .card-face { justify-content: center; gap: 14px; background: radial-gradient(80% 60% at 50% 20%, #ffffff2e, transparent), var(--c); color: #fff; }
.card-section h3 { font-size: clamp(40px, 6vw, 56px); }
.card-section .card-price span { color: inherit; opacity: .8; }
.section-tokens { display: flex; flex-wrap: wrap; gap: 8px; }
.section-tokens .token-face { width: 56px; height: 56px; font-size: 15px; background: #fff; }
.section-note { align-self: start; padding: 4px 12px; border-radius: 99px; background: #ffffff2e; font-size: 14px; font-weight: 800; }
.card-section .cta { align-self: start; margin-top: 6px; background: #fff; color: var(--ink); }
.room-curate:has(#deck[data-section="true"]) .deck-controls { visibility: hidden; }
@container (max-height: 440px) {
  .card-section .card-face { gap: 6px; }
  .card-section h3 { font-size: 30px; }
  .section-tokens .token-face { width: 40px; height: 40px; font-size: 12px; }
  .card-section .cta { min-height: 44px; margin-top: 0; padding: 0 18px; font-size: 15px; }
}
@container (max-height: 330px) { .section-note { display: none; } }
.card-benefit { font-size: 14px; color: #55566a; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stamp {
  position: absolute; top: 34px; z-index: 2; padding: 6px 14px; border: 4px solid; border-radius: 10px; font-size: 26px; font-weight: 800; letter-spacing: -.03em;
  pointer-events: none; background: #ffffffd9;
}
.stamp-keep { left: 22px; color: #0d7a3a; rotate: -12deg; opacity: clamp(0, calc(var(--lean) * 1.8), 1); }
.stamp-archive { right: 22px; color: #c4380f; rotate: 12deg; opacity: clamp(0, calc(var(--lean) * -1.8), 1); }
.card.fly-keep .stamp-keep, .card.fly-archive .stamp-archive { opacity: 1; }
.deck-controls { display: flex; justify-content: center; gap: clamp(16px, 4vw, 36px); margin-top: 28px; }
.round { display: grid; place-items: center; align-content: center; gap: 0; width: 76px; height: 76px; border: 0; border-radius: 50%; font-size: 12px; font-weight: 800; transition: transform .2s var(--ease); }
.round b { font-size: 26px; line-height: 1; }
.round:hover { transform: scale(1.06); }
.round.archive { background: var(--orange); color: var(--ink); }
.round.keep { background: var(--lime); color: #10200a; }
.round.flip { width: 60px; height: 60px; align-self: center; background: #ffffff26; color: #fff; }
.deck-meta { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; color: var(--muted); font-size: 14px; }
.undo { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid #ffffff59; border-radius: 50%; background: #ffffff14; color: #fff; transition: background .2s, transform .2s var(--ease); }
.undo svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.undo:hover:not(:disabled) { background: #ffffff2e; transform: rotate(-20deg); }
.undo:disabled { opacity: .35; }

/* Room 04: gallery. One long wall under a ceiling track, a dark floor in front; the work you stand before is lit. */
.room.room-gallery {
  display: flex; flex-direction: column; height: 100dvh; min-height: 520px; padding: 60px 0 0; overflow: hidden;
  background: linear-gradient(#0d0d11, #1d1c22 14%, #27262c 55%, #1f1e23); /* ceiling shadow into plaster */
}
.wall {
  --w: min(78vw, 300px); flex: 1; min-height: 0; display: flex; gap: clamp(40px, 8vw, 120px); margin: 0; padding: 0 calc(50% - var(--w) / 2);
  background: linear-gradient(#3b3c48, #2a2b34) 0 18px / 100% 3px no-repeat; /* the track */
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none;
}
.wall::-webkit-scrollbar { display: none; }
.wall:focus-visible { outline-offset: -3px; }
.work { --at: calc(var(--i, 0) * 380ms + 600ms); position: relative; flex: 0 0 var(--w); display: grid; gap: 14px; align-content: center; scroll-snap-align: center; }
.work::before { content: ''; position: absolute; top: 20px; left: 50%; z-index: 1; width: 14px; height: 22px; translate: -50% 0; border-radius: 3px 3px 7px 7px; background: linear-gradient(90deg, #26272f, #555664 45%, #26272f); box-shadow: 0 3px 0 -1px #fff3d6; } /* fixture */
.title-wall::before { content: none; }
.spot { position: absolute; inset: 20px -35% 0; pointer-events: none; background: radial-gradient(16% 26% at 50% 0%, #fff3d633, transparent), radial-gradient(48% 40% at 50% 46%, #fff3d647, #fff3d61f 55%, transparent); animation: light-on .7s var(--at) both; transition: filter .6s; } /* wash on the wall, brighter near the fixture */
@keyframes light-on { 0% { opacity: 0; } 30% { opacity: .9; } 42% { opacity: .1; } 60%, 100% { opacity: 1; } }
.frame { position: relative; padding: 12px; border-radius: 2px; background: linear-gradient(135deg, #34353d, #0d0d11 30%, #17171c 70%, #2c2d34); box-shadow: 0 30px 42px -16px #000e, inset 0 0 0 1px #ffffff24, inset 0 0 0 3px #00000080; }
.frame::after { content: ''; position: absolute; inset: 12px; pointer-events: none; background: linear-gradient(115deg, transparent 30%, #ffffff17 38%, transparent 46%); } /* glass glare */
.art { display: grid; place-items: center; aspect-ratio: 1; background: radial-gradient(60% 50% at 50% 40%, #ffffff40, transparent), var(--c); box-shadow: inset 0 0 0 14px #f6f2e9, inset 0 0 0 15px #00000026, inset 2px 2px 0 15px #ffffff99; } /* mat */
.art .token-face { width: 46%; height: auto; aspect-ratio: 1; font-size: 30px; background: #fff; box-shadow: 0 0 0 8px #ffffff55, 0 20px 30px -12px #0008; }
.untitled .art { background: var(--paper); }
/* Off to the side of where you stand, the light is down. */
.work :is(.frame, .crate, .wall-label, .vinyl) { transition: filter .6s; }
.work:not([data-lit]) :is(.frame, .crate, .wall-label, .vinyl) { filter: brightness(.38); }
.work:not([data-lit]) .spot { filter: opacity(.15); }
.wall-label { justify-self: start; width: min(100%, 220px); padding: 12px 14px; background: #f3efe6; color: var(--ink); font-size: 13px; line-height: 1.45; box-shadow: 0 10px 18px -12px #000; } /* small mounted label */
.wall-label h3 { font-size: 16px; letter-spacing: -.02em; }
.wall-label p { color: #55566a; }
.wall-label .price { margin-top: 6px; color: var(--ink); font-weight: 800; }
.vinyl { display: grid; gap: 14px; color: #f3efe6; } /* lettering painted on the wall */
.vinyl h2 { font-size: clamp(44px, 6vw, 88px); line-height: .95; letter-spacing: -.06em; }
.vinyl > p:last-child { color: #c9c6cf; font-size: 15px; }
.crate { position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; aspect-ratio: 1; border: 10px solid #6b4f30; background: linear-gradient(45deg, transparent 46%, #7a5a37 46% 54%, transparent 54%), repeating-linear-gradient(#b08a5c 0 23%, #8f6c43 23% 25%); color: #2a1e12; font-weight: 800; letter-spacing: .08em; box-shadow: inset 0 0 0 2px #00000026, 0 30px 42px -16px #000d; } /* plywood crate */
.crate::before { content: '취급주의 ↑' / ''; position: absolute; top: 8px; left: 10px; font-size: 11px; letter-spacing: .1em; opacity: .7; }
.crate b { font-size: 44px; letter-spacing: -.02em; }
.crate-logos { display: flex; margin-top: 6px; }
.crate-logos .token-face { width: 36px; height: 36px; margin-left: -8px; font-size: 11px; }
/* The floor: baseboard, polished concrete, a pool of light in front of the lit work. Navigation stands on it. */
.floor {
  display: grid; justify-items: center; gap: 14px; padding: 22px 16px calc(16px + env(safe-area-inset-bottom));
  background: radial-gradient(36% 70% at 50% 0%, #fff3d61c, transparent), linear-gradient(#050507 0 5px, #141318 5px, #1d1c21);
}
.wall-nav { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); font-size: 14px; }
.wall-nav p { min-width: 12em; text-align: center; }
.floor .actions { margin: 0; }
@media (min-width: 901px) {
  .wall { --w: 640px; }
  .work { grid-template-columns: 400px minmax(0, 1fr); align-items: end; }
  .title-wall { grid-template-columns: 1fr; }
  .work::before { left: 200px; } /* over the frame */
  .spot { inset: 20px auto 0 -140px; width: 680px; }
}
/* Walking past: each frame turns toward you as it crosses the wall (browsers with scroll-driven animations). */
@supports (animation-timeline: view()) {
  .work .frame { animation: turn linear both; animation-timeline: view(inline); }
  @keyframes turn { from { transform: perspective(900px) rotateY(24deg); } 50% { transform: none; } to { transform: perspective(900px) rotateY(-24deg); } }
}

/* Exit */
.room-exit { background: var(--paper); }
.exit-layout { display: grid; grid-template-columns: minmax(280px, 440px) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); max-width: 1100px; margin: 0 auto; align-items: start; }
.poster-frame { margin: 0; padding: 14px; border-radius: 10px; background: #fff; box-shadow: 0 40px 70px -40px #1113228c, 0 0 0 1px #11132214; rotate: -1.2deg; }
#poster { animation: print 1.4s steps(18) both .3s; display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 4px; background: #e9e3d6; }
.exit-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; }
.persona { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; gap: 4px 16px; padding: 22px 24px; border-radius: 22px; background: var(--ink); color: var(--paper); }
.persona > :not(.persona-char) { grid-column: 1; }
.persona-char { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: clamp(92px, 24vw, 128px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fffaf0, #ece2cc 70%); box-shadow: 0 0 0 6px #ffffff12, 0 0 40px #fff3d633; } /* the character on a lit disc */
.persona-char svg, .mini-char svg { display: block; width: 100%; height: 100%; }
@media (min-width: 901px) { /* desktop: the character peeks over the card so the persona name keeps the full width */
  .persona { position: relative; grid-template-columns: minmax(0, 1fr); }
  .persona-char { position: absolute; top: -50px; right: 20px; width: 100px; }
}
.persona i { color: var(--pink); }
.persona strong { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: -.045em; line-height: 1.1; }
.persona span { color: #c9c2dd; }
.room-exit .room-head .compat { max-width: 560px; }
.compat { display: grid; gap: 6px; padding: 20px 24px; border-radius: 22px; background: linear-gradient(135deg, var(--pink), #c8d4ff); color: var(--ink); animation: rise .7s var(--ease) both .2s; }
.compat-label { font-size: 14px; font-weight: 800; }
.compat-label i { font: italic 400 1.4em/1 var(--serif); margin-right: 4px; }
.compat strong { font-size: clamp(56px, 8vw, 84px); line-height: .9; letter-spacing: -.06em; }
.compat strong small { font-size: .45em; }
.compat > span { font-size: 20px; font-weight: 800; }
.compat-shared { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.compat-shared .token-face { width: 40px; height: 40px; font-size: 12px; }
.compat > small { font-size: 12px; color: #3d3f55; }
.poster-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.owner-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.field { font-size: 14px; font-weight: 800; }
.title-field { display: flex; align-items: center; gap: 0; min-height: 60px; padding: 0 20px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.title-field input { flex: 1; width: 0; min-width: 0; border: 0; outline: 0; background: none; text-align: right; font-weight: 800; }
.title-field:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.themes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-inline-size: 0; margin: 0; padding: 0; border: 0; } /* fieldsets default to min-content width; five lights on one row */
.themes legend { margin-bottom: 8px; font-size: 14px; font-weight: 800; }
.themes label { position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px 0 6px; border: 1.5px solid var(--line); border-radius: 99px; font-size: 14px; font-weight: 800; cursor: pointer; }
.themes input { position: absolute; opacity: 0; }
.themes label:has(:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.themes label:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.swatch { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px #0002; }
.swatch.gallery { background: linear-gradient(135deg, #f3efe6 50%, #b83a10 50%); }
.swatch.night { background: linear-gradient(135deg, #1b1f4a 50%, #d6ff4f 50%); }
.swatch.pop { background: linear-gradient(135deg, #2140d8 50%, #ffc9dc 50%); }
.swatch.sunset { background: linear-gradient(135deg, #ffb36b 50%, #6a0d8a 50%); }
.swatch.mono { background: linear-gradient(135deg, #ffffff 50%, #d1001f 50%); }
.switch { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch span { position: relative; width: 48px; height: 28px; border-radius: 99px; background: #11132233; transition: background .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: translate .2s var(--ease); box-shadow: 0 1px 3px #0004; }
.switch input:checked + span { background: var(--ink); }
.switch input:checked + span::after { translate: 20px 0; }
.switch input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.exit-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.exit-actions .cta { flex: 1 1 100%; }
.exit-actions .ghost { flex: 1 1 140px; }
.visitor-cta .cta { width: 100%; }
.storage { max-width: 1100px; margin: 72px auto 0; padding-top: 28px; border-top: 2px solid var(--ink); }
.storage h3 { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.archive-total { margin: 14px 0; font-size: 18px; }
.archive-total b { color: var(--orange-ink); }
.exit-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.archive-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.archive-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 14px; border: 1px solid var(--line); border-radius: 20px; background: #fff; position: relative; }
.check { display: flex; align-items: center; gap: 12px; min-width: 0; cursor: pointer; }
.check input { width: 22px; height: 22px; accent-color: var(--ink); flex: 0 0 auto; }
.check .token-face { width: 40px; height: 40px; flex: 0 0 40px; font-size: 12px; }
.check span { display: grid; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
.check small { color: var(--muted); font-size: 13px; }
.check:has(:checked) b { text-decoration: line-through; opacity: .5; }
.archive-list li:has(:checked)::after { content: '해지 완료' / ''; position: absolute; top: 50%; right: 118px; padding: 2px 10px; border: 3px solid var(--orange-ink); border-radius: 8px; color: var(--orange-ink); font-size: 15px; font-weight: 800; rotate: -10deg; translate: 0 -50%; pointer-events: none; animation: stamp-in .3s var(--ease); }
@keyframes stamp-in { from { scale: 1.8; opacity: 0; } }

/* ---------- Dialogs ---------- */
dialog { width: min(640px, calc(100% - 24px)); max-height: min(86dvh, 860px); padding: 0; border: 0; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 100px #0008; }
dialog[open] { display: flex; flex-direction: column; animation: rise .4s var(--ease); }
dialog::backdrop { background: #07080fb3; backdrop-filter: blur(6px); }
.celebrate { width: 100%; max-width: none; height: 100%; max-height: none; background: transparent; box-shadow: none; overflow: hidden; }
.celebrate[open] { display: grid; place-items: center; }
.celebrate-card { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; width: min(420px, calc(100% - 32px)); padding: 36px 28px 28px; border-radius: 26px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 40px 100px #0008; }
.celebrate-card .room-label { justify-content: center; }
.celebrate-card h2 { font-size: clamp(32px, 7vw, 44px); }
.celebrate-card p:not(.room-label) { font-size: 18px; }
.celebrate-card b { color: var(--orange-ink); }
.celebrate-card .cta { margin-top: 10px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 50%; width: 10px; height: 16px; border-radius: 2px; background: var(--c); opacity: 0; animation: burst 2.6s cubic-bezier(.15, .7, .35, 1) var(--d) both; }
.confetti i:nth-child(3n) { width: 12px; height: 12px; border-radius: 50%; }
@keyframes burst {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  28% { opacity: 1; transform: translate(var(--bx), var(--by)) rotate(calc(var(--r) * .3)); }
  100% { opacity: 0; transform: translate(var(--bx), calc(var(--by) + 80vh)) rotate(var(--r)); }
}
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-bottom: 1px solid #11132222; }
.dialog-head > div { display: flex; align-items: center; gap: 14px; }
.dialog-head .token-face { width: 52px; height: 52px; flex: 0 0 52px; font-size: 15px; }
.dialog-head h2 { font-size: 26px; }
.dialog-head .fine { color: #55566a; }
.close { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 50%; background: #11132212; font-size: 24px; }
.dialog-body { display: grid; gap: 26px; padding: 22px; overflow-y: auto; }
.dialog-body h3 { margin-bottom: 10px; font-size: 16px; }
.dialog-body .fine { color: #55566a; }
.price-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 10px; }
.price-table th, .price-table td { padding: 10px 8px; border-bottom: 1px solid #11132218; text-align: left; vertical-align: top; }
.price-table td { text-align: right; white-space: nowrap; font-weight: 800; }
.price-table tbody th small { display: block; font-weight: 500; color: #55566a; }
.select { display: grid; gap: 6px; margin-bottom: 14px; font-size: 14px; font-weight: 800; }
.select select { min-height: 48px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 14px; background: #fff; }
#cancel-guide ol { padding-left: 20px; }
#cancel-guide a { font-weight: 800; }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .collect-layout, .exit-layout { grid-template-columns: minmax(0, 1fr); }
  .collect-side { display: contents; }
  .vitrine-wrap { position: sticky; top: 60px; z-index: 5; margin: 0 -16px; padding: 0 16px 8px; background: linear-gradient(#f3efe6 85%, #f3efe600); }
  .vitrine { height: 34dvh; min-height: 220px; }
  .poster-frame { width: min(78vw, 360px); justify-self: center; }
  .curate-layout { grid-template-columns: 1fr 1fr; }
  .deck { grid-column: 1 / -1; grid-row: 2; }
  .tally-archive { justify-items: start; text-align: left; }
  .tally-keep { justify-items: end; text-align: right; }
}
@media (max-width: 640px) {
  .themes label { flex-direction: column; gap: 4px; min-height: 60px; padding: 6px 2px; border-radius: 16px; font-size: 12px; } /* five across a phone */
  .room { padding-top: 76px; }
  .hud-rooms li:not([aria-current]) { display: none; }
  .hud-brand { font-size: 15px; white-space: nowrap; }
  .room-head { margin-bottom: 22px; }
  .ticket { min-height: 116px; }
  .ticket-main { padding: 14px 18px; }
  .ticket-main strong { font-size: 24px; }
  .ticket-stub { width: 78px; }
  .picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-foot p { font-size: 14px; }
  .room-foot .cta { flex: 1; padding: 0 20px; font-size: 16px; }
  .card-face { padding: 16px 18px 18px; }
  .card-art { margin: 0 -18px; }
  .stamp { font-size: 22px; }
}

/* ---------- Phones: one screen per room, actions in the thumb zone ---------- */
@media (max-width: 900px) {
  .chip, .hud-icon { min-height: 44px; }
  .hud-icon { width: 44px; }
  .plan-pills button { min-height: 40px; }
  .sticky-actions { position: sticky; bottom: 0; z-index: 6; margin: 0 -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 var(--line); } /* frosted bar: a short fade let dark cards show through as a band */
  .room-exit { padding-bottom: 120px; }
  .room-exit .sticky-actions { position: fixed; left: 0; right: 0; margin: 0; background: color-mix(in srgb, #f3efe6 88%, transparent); }
  .room-exit .exit-actions { flex-wrap: nowrap; }
  .room-exit .exit-actions .cta { flex: 1 1 auto; }
  .room-exit .exit-actions .ghost { flex: 0 0 auto; min-height: 56px; padding: 0 16px; }
  .long { display: none; }
  #share-status:not(:empty) { position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); z-index: 7; padding: 12px 16px; border-radius: 14px; background: var(--ink); color: var(--paper); font-size: 14px; animation: rise .3s var(--ease); }
  .room-curate { height: 100dvh; min-height: 480px; padding-top: calc(66px + env(safe-area-inset-top)); padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .room-curate .room-head { margin-bottom: 8px; gap: 2px; }
  .room-curate .room-label { display: none; }
  .room-curate h2 { font-size: clamp(20px, 6vw, 30px); }
  .room-curate .curate-layout { flex: 1; min-height: 0; grid-template-rows: auto minmax(0, 1fr); gap: 8px 16px; }
  .room-curate .deck { height: 100%; min-height: 0; }
  .tally b { font-size: 28px; }
  .tally small { font-size: 12px; }
  .deck-controls { margin-top: 12px; }
  .round { width: 64px; height: 64px; }
  .round.flip { width: 52px; height: 52px; }
  .deck-meta { margin-top: 4px; font-size: 13px; }
}
@media (max-width: 360px) { .hud-rooms { display: none; } }
/* Landscape phones and very short windows */
@media (max-height: 520px) and (orientation: landscape) {
  .room { padding-top: 64px; }
  .poster .lede { display: none; }
  .poster-rule { padding-top: 56px; } /* under the HUD */
  #entrance-title { font-size: clamp(40px, 15dvh, 72px); }
  .room.room-gallery { min-height: 0; }
  .wall { --w: 440px; }
  .work { grid-template-columns: 170px minmax(0, 1fr); align-items: end; }
  .title-wall { grid-template-columns: 1fr; }
  .vinyl h2 { font-size: 36px; }
  .floor { padding-top: 10px; }
  .ticket { min-height: 96px; }
  .room-collect .room-head { grid-column: 1 / -1; margin-bottom: 10px; }
  .room-collect h2 { font-size: 24px; }
  .room-collect h2 br { display: none; }
  .collect-layout { grid-template-columns: 1fr 1.2fr; }
  .collect-side { display: contents; } /* too short for the title beside the vitrine: it scrolls away */
  .vitrine-wrap { position: sticky; top: 64px; margin: 0; padding: 0; background: none; }
  .vitrine { height: calc(100dvh - 250px); min-height: 120px; }
  .room-curate { min-height: 0; padding-top: 60px; }
  .room-curate .room-head, .tally { display: none; }
  .room-curate .curate-layout { display: flex; justify-content: center; flex: 1; min-height: 0; }
  .room-curate .deck { width: min(340px, 60vw); height: 100%; }
  .room-price .room-head { margin-bottom: 8px; }
  .room-price h2 { font-size: 24px; }
  .room-price .big-number { font-size: 56px; }
  .entries .token-face { width: 30px; height: 30px; font-size: 9px; }
  .price-stage { gap: 8px; }
  .round { width: 54px; height: 54px; }
  .deck-controls { margin-top: 8px; }
  .deck-meta { display: none; }
  html:has(body[data-room="collect"]) { scroll-padding-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}