/* Tarot Girls v2: night sky and gold. Mobile first. Card frame from arcana-motion examples/deck/deck.css. */
:root {
  --bg: #0b0918; --ink: #f1e8d4; --dim: #b9ae95; --mute: #8a809a;
  --gold: #e0bd67; --gold-hi: #f6e2a4; --line: #3b3060; --line-soft: #2a2248; --panel: #1a1436cc;
  --rose: #eeb0c2; --err: #f3bca8; --ok: #9fe0b8;
  --serif: 'Noto Serif KR', 'AppleMyungjo', serif;
  --sans: 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --display: 'Cinzel', 'Noto Serif KR', Georgia, serif;
  --gold-grad: linear-gradient(155deg, #ecd28a 0%, #a47c2c 28%, #f3dc98 52%, #8a6a22 78%, #d8b35b 100%);
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden;
  background: radial-gradient(120% 70% at 50% -10%, #2c2160 0%, #171033 45%, var(--bg) 80%) fixed, var(--bg);
  color: var(--ink); font: 400 16px/1.7 var(--sans); word-break: keep-all; overflow-wrap: anywhere; -webkit-tap-highlight-color: transparent; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }
button, textarea, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
a { color: var(--gold); }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
[tabindex="-1"]:focus { outline: none; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; padding: 8px 14px; border-radius: 10px; background: var(--gold); color: #1d1405; font-weight: 700; text-decoration: none; }
.skip:focus { top: 10px; }
.nb { white-space: nowrap; }

/* ---------- sky */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky::after { content: ''; position: absolute; width: 70vmax; height: 70vmax; left: 50%; top: -38vmax; transform: translateX(-50%);
  background: radial-gradient(circle, #f6e2a414 0%, #7a5cd010 35%, transparent 65%); }
.stars { position: absolute; inset: -50%; background-repeat: repeat; }
.stars.s1 { background-image: radial-gradient(1px 1px at 20px 30px, #fff9 50%, transparent), radial-gradient(1px 1px at 140px 80px, #fff7 50%, transparent), radial-gradient(1.2px 1.2px at 90px 150px, #f6e2a4aa 50%, transparent), radial-gradient(1px 1px at 170px 190px, #fff6 50%, transparent); background-size: 200px 210px; opacity: .8; }
.stars.s2 { background-image: radial-gradient(1.5px 1.5px at 60px 110px, #fffc 50%, transparent), radial-gradient(1.3px 1.3px at 260px 40px, #f6e2a4cc 50%, transparent), radial-gradient(1px 1px at 200px 260px, #fff8 50%, transparent); background-size: 320px 300px; animation: twinkle 6s ease-in-out infinite alternate; }
.stars.s3 { background-image: radial-gradient(2px 2px at 120px 60px, #fff 40%, transparent), radial-gradient(1.8px 1.8px at 380px 300px, #f6e2a4 40%, transparent); background-size: 470px 430px; animation: twinkle 9s ease-in-out -3s infinite alternate; }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }

/* ---------- header */
.top { display: flex; align-items: center; padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 10px; }
.logo { width: 34px; height: 34px; filter: drop-shadow(0 0 8px #e0bd6755); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text .en { font: 700 17px var(--display); letter-spacing: .22em; color: var(--gold); }
.brand-text .ko { font: 500 12px var(--serif); letter-spacing: .3em; color: var(--dim); }

main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 22px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; font-weight: 500; text-decoration: none; transition: transform .15s, box-shadow .2s, background .2s, border-color .2s, opacity .2s; }
.btn.gold { background: linear-gradient(160deg, #f1d58b, #c99a3e 55%, #9c7428); color: #1d1405; font-weight: 700; box-shadow: 0 6px 20px #c99a3e33, inset 0 1px 0 #fff6; }
.btn.gold:hover:not(:disabled) { box-shadow: 0 8px 28px #e0bd6755, inset 0 1px 0 #fff6; transform: translateY(-1px); }
.btn.ghost { background: #ffffff08; border-color: var(--line); color: var(--ink); }
.btn.ghost:hover:not(:disabled) { border-color: var(--gold); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
body.req-busy .g-btn, body.req-busy .e-btns .btn { opacity: .6; pointer-events: none; cursor: progress; }

.eyebrow { font: 600 12px var(--display); letter-spacing: .35em; color: var(--gold); opacity: .9; }
.sec-title { text-align: center; font: 600 19px var(--serif); letter-spacing: .02em; }
.sec-title.small { font-size: 16px; }
.orn { color: var(--gold); font-size: .7em; vertical-align: .2em; }

/* ---------- a tarot card: gold frame, art window (scene + figure), numeral on top, title below */
.tcard { position: relative; aspect-ratio: 312 / 540; border-radius: 3.8% / 2.2%; background: var(--gold-grad);
  box-shadow: 0 6px 22px #000c, inset 0 0 0 2px #fff3; container-type: inline-size; user-select: none; -webkit-user-select: none; }
.tcard .face { position: absolute; inset: 3%; border-radius: 3% / 1.75%; background: #f6ecd2; }
.tcard .num { position: absolute; left: 0; right: 0; top: 3.6%; text-align: center; font: 700 7.5cqw/1.25 var(--display); color: #3a2a0c; letter-spacing: 2px; z-index: 2; }
.tcard .num svg { height: 1.05em; width: 1.05em; vertical-align: -0.15em; margin-left: .2em; }
.tcard .win { position: absolute; left: 7%; right: 7%; top: 9.5%; bottom: 14%; border-radius: 2cqw; overflow: hidden;
  background: radial-gradient(120% 80% at 50% 20%, #3a2d6a, #1a1433 70%); }
.tcard .win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px #3a2a0c, inset 0 0 18px #0008; pointer-events: none; z-index: 2; }
.tcard .cap { position: absolute; left: 4%; right: 4%; bottom: 3.6%; height: 9%; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 2; }
.tcard .cap .en { font: 700 5.2cqw/1.2 var(--display); color: #2a1d06; letter-spacing: .06em; white-space: nowrap; }
.tcard .cap .ko { font: 600 5cqw/1.2 var(--serif); color: #5a4518; }
@container (max-width: 150px) {
  .tcard .cap .en { display: none; }
  .tcard .cap .ko { font-size: 8.5cqw; color: #3a2a0c; }
}
/* an art window anywhere: scene, figure picture, live canvas */
.win img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .45s ease-out; }
.win img.scene { object-fit: cover; }
.win img.ch { object-fit: contain; object-position: 50% 100%; }
.win img.in { opacity: 1; }
.win img.ch.gone { opacity: 0; transition-delay: .25s; }
.win canvas.live { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s; }
.win canvas.live.in { opacity: 1; }

/* card without art: night window, gold rings, numeral or suit sign, name */
.win.ph { color: var(--gold); background: radial-gradient(90% 60% at 50% 42%, #4a3a86 0%, #261d4f 45%, #120d27 100%); }
.ph-ring { position: absolute; left: 50%; top: 42%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 1.5px solid #e0bd6799; box-shadow: 0 0 0 5cqw #e0bd670d, inset 0 0 0 4cqw #e0bd670a; }
.ph-ring::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px dashed #e0bd6766; }
.ph-sign { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; place-items: center; filter: drop-shadow(0 0 6px #e0bd6788); }
.ph-roman { font: 700 19cqw/1 var(--display); color: var(--gold-hi); }
.ph-suit svg { width: 28cqw; height: 28cqw; display: block; color: var(--gold-hi); }
.ph-name { position: absolute; left: 6%; right: 6%; bottom: 9%; text-align: center; font: 600 7cqw/1.3 var(--serif); color: #e9d9ad; letter-spacing: .08em; }
.ph-star { position: absolute; color: #f6e2a4; opacity: .7; }
.ph-star svg { width: 100%; height: 100%; display: block; }
.ph-star.a { width: 6cqw; height: 6cqw; left: 12%; top: 9%; }
.ph-star.b { width: 4.5cqw; height: 4.5cqw; right: 13%; top: 17%; opacity: .5; }

/* card back: the whole card is the back artwork */
.tcard.back { background: url(/assets/back.svg) center / 100% 100% no-repeat; box-shadow: 0 6px 22px #000c; }
.tcard.mini { box-shadow: 0 1px 4px #000a; }
.tcard.mini.rev, .tc-art.rev .tcard, .e-art.rev .tcard { transform: rotate(180deg); }
.rev-tag { display: inline-block; font: 500 11px/1.5 var(--sans); color: var(--rose); border: 1px solid #eeb0c266; border-radius: 999px; padding: 0 7px; vertical-align: 1px; white-space: nowrap; }

/* ---------- gallery */
.intro { text-align: center; padding: 2px 0 14px; }
.intro h1 { margin: 8px 0 10px; font: 700 clamp(27px, 7.6vw, 46px)/1.3 var(--serif); letter-spacing: -.01em; }
.intro h1 em { font-style: normal; background: linear-gradient(100deg, #f6e2a4, #e0bd67 40%, #f3c9d6 75%, #f6e2a4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pitch { max-width: 560px; margin: 0 auto; color: var(--dim); font-size: 15px; }
.g-grid { list-style: none; padding: 0; margin: 14px 0 34px; display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 22px 12px; }
.g-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.g-art { position: relative; border-radius: 4% / 2.3%; transition: transform .25s ease-out; }
.g-art .tcard { transition: filter .35s, box-shadow .25s; }
.g-tile[data-state="available"] .g-art { cursor: pointer; }
.g-tile[data-state="available"] .g-art:hover { transform: translateY(-4px); }
.g-tile[data-state="available"] .g-art:hover .tcard { box-shadow: 0 14px 34px #000c, 0 0 26px #e0bd6744, inset 0 0 0 2px #fff3; }
.g-tile[data-state="busy"] .tcard, .g-tile[data-state="away"] .tcard { filter: saturate(.3) brightness(.55); }
.g-tile[data-state="away"] .g-text { opacity: .55; }
.badge { position: absolute; left: 50%; top: 11.5%; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 5px; max-width: 84%;
  padding: 1px 9px; border-radius: 999px; font: 500 11px/1.6 var(--sans); white-space: nowrap; background: #0b0918d9; border: 1px solid #ffffff22; color: var(--dim); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.g-tile[data-state="available"] .badge { color: var(--ok); border-color: #9fe0b855; }
.g-tile[data-state="busy"] .badge { color: var(--rose); border-color: #eeb0c255; }
.g-tile[data-state="loading"] .badge { color: var(--mute); }
.g-tile[data-state="loading"] .badge::before { animation: dot 1.4s ease-in-out infinite; }
.g-text { display: grid; gap: 3px; text-align: center; }
.g-name { font: 700 15.5px/1.4 var(--serif); }
.g-title { font-size: 12.5px; line-height: 1.5; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-title:empty { display: none; }
.g-spec { list-style: none; padding: 0; margin: 3px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.g-spec li { padding: 0 8px; border-radius: 999px; font-size: 11px; line-height: 1.75; color: #e9d9ad; background: #e0bd6712; border: 1px solid #e0bd6730; }
.g-btn { width: 100%; min-height: 40px; padding: 6px 12px; margin-top: auto; font-size: 14px; }

/* ---------- queue */
.queue { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 6px 0 36px; }
.q-card { width: min(50vw, 220px); }
.q-card .tcard { box-shadow: 0 14px 40px #000c, 0 0 34px #e0bd6730; animation: breathe 5s ease-in-out infinite; }
@keyframes breathe { 50% { box-shadow: 0 14px 40px #000c, 0 0 46px #e0bd6755; } }
.q-info { display: grid; gap: 8px; justify-items: center; max-width: 440px; }
.q-info h2 { font: 700 21px/1.45 var(--serif); }
.q-pos { font: 500 15px/1.6 var(--serif); color: var(--dim); }
.q-pos b { display: block; font: 700 30px/1.3 var(--serif); color: var(--gold-hi); }
.q-copy { font: 400 15px/1.75 var(--serif); color: var(--ink); min-height: 3.5em; }
.q-sub { font-size: 13px; color: var(--mute); }
.q-info .btn { margin-top: 6px; }

/* ---------- counseling room (phone: the whole screen, sized to the visible viewport) */
body[data-view="room"] .foot { display: none; }
.room { position: fixed; left: 0; right: 0; top: var(--app-top, 0px); height: var(--app-h, 100dvh); z-index: 5;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "bar" "stage" "chat" "dock";
  background: radial-gradient(120% 60% at 50% -10%, #2c2160 0%, #171033 50%, var(--bg) 85%); }
.r-bar { grid-area: bar; display: flex; align-items: center; gap: 8px; padding: 6px 10px; padding-top: max(6px, env(safe-area-inset-top)); min-width: 0; }
.r-leave { flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 12px 0 6px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff08; cursor: pointer; font-size: 13.5px; color: var(--dim); }
.r-leave svg { width: 18px; height: 18px; }
.r-leave:hover { color: var(--ink); border-color: var(--gold); }
.r-who { flex: 1; min-width: 0; text-align: center; }
.r-who h2 { font: 700 16px/1.35 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clock { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 11px 0 8px; border-radius: 999px; border: 1px solid #e0bd6733;
  background: #0b091899; font: 600 14px/1 var(--display); letter-spacing: .06em; color: var(--dim); font-variant-numeric: tabular-nums; transition: color .6s, border-color .6s, background .6s; }
.clock svg { width: 15px; height: 15px; color: var(--gold); transition: color .6s; }
.clock.late { color: var(--rose); border-color: #eeb0c277; background: #3a1630aa; animation: soft 2.6s ease-in-out infinite; }
.clock.late svg { color: var(--rose); }
.clock.late::after { content: '마무리'; font: 500 11px var(--sans); letter-spacing: 0; margin-left: 2px; }
@keyframes soft { 50% { box-shadow: 0 0 14px #eeb0c244; } }

.g-stage { grid-area: stage; position: relative; margin: 0 10px; height: clamp(104px, calc(var(--app-h, 100dvh) * .3), 300px); border-radius: 16px; padding: 2px;
  background: var(--gold-grad); box-shadow: 0 10px 30px #0009; transition: height .35s ease; }
.room.picking .g-stage { height: clamp(88px, calc(var(--app-h, 100dvh) * .19), 200px); }
.g-stage .win { position: absolute; inset: 2px; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 80% at 50% 20%, #3a2d6a, #1a1433 70%); }
.g-stage .win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #3a2a0c, inset 0 0 24px #0009; pointer-events: none; z-index: 2; }
.g-stage .win img.still { animation: sway 7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes sway { 50% { transform: translateY(-1.2%) scale(1.01); } }
.plate { position: absolute; left: 2px; right: 2px; bottom: 2px; z-index: 3; padding: 22px 12px 7px; border-radius: 0 0 14px 14px; pointer-events: none;
  background: linear-gradient(180deg, transparent, #0b0918d0 70%); }
.plate-title { font: 500 12.5px/1.45 var(--serif); color: #efe5cf; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 6px #000; }

/* collected cards: phone = a strip on the stage that opens into a row */
.tray { grid-area: stage; align-self: start; justify-self: end; position: relative; z-index: 6; margin: 8px 18px 0 0; display: none; }
.tray.has { display: block; }
.tray-head, .tray-empty { display: none; }
.tray-toggle { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 8px 3px 12px; border-radius: 999px; border: 1px solid #e0bd6766;
  background: #0b0918e0; cursor: pointer; font-size: 12.5px; color: var(--ink); box-shadow: 0 4px 14px #0008; }
.tray-label b { color: var(--gold-hi); font-family: var(--display); }
.tray-minis { display: flex; gap: 3px; }
.tray-minis .tcard { width: 15px; }
.tray-minis .tcard:nth-last-child(n+6) { display: none; }
.tray-minis .tcard.arrived { animation: land .6s ease-out; }
@keyframes land { 40% { transform: scale(1.35); box-shadow: 0 0 12px #f6e2a4; } }
.tray-minis .tcard.mini.rev.arrived { animation: landrev .6s ease-out; }
@keyframes landrev { 0%, 100% { transform: rotate(180deg); } 40% { transform: rotate(180deg) scale(1.35); box-shadow: 0 0 12px #f6e2a4; } }
.chev { width: 16px; height: 16px; color: var(--gold); transform: rotate(180deg); transition: transform .2s; }
.tray.open .chev { transform: none; }
.tray-list { display: none; list-style: none; margin: 0; padding: 0; }
.tray.open .tray-list { position: absolute; right: 0; top: calc(100% + 6px); display: flex; gap: 10px; width: max-content; max-width: calc(100vw - 40px); overflow-x: auto;
  padding: 10px 12px 8px; border-radius: 16px; background: #120d28f2; border: 1px solid var(--line); box-shadow: 0 16px 40px #000c; overscroll-behavior: contain; }
.tray-card { display: grid; justify-items: center; gap: 4px; width: 74px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center; color: var(--ink); border-radius: 8px; }
.tc-art { display: block; width: 100%; }
.tc-cap { display: grid; justify-items: center; line-height: 1.3; }
.tc-n { font-size: 10.5px; color: var(--gold); }
.tc-name { font: 600 12px/1.35 var(--serif); }
.tray-card .rev-tag { font-size: 10px; padding: 0 5px; margin-top: 2px; }
.tray-list li.waiting { opacity: .25; }
.tray-list li.arrived .tcard { animation: glowin 1s ease-out; }
@keyframes glowin { from { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 26px #f6e2a4cc; } }
.tray-card:hover .tcard { box-shadow: 0 6px 18px #000c, 0 0 16px #e0bd6755; }

/* chat */
.chat { grid-area: chat; position: relative; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 10px; min-height: 0;
  scrollbar-width: thin; scrollbar-color: #3b3060 transparent; -webkit-mask-image: linear-gradient(transparent, #000 16px); mask-image: linear-gradient(transparent, #000 16px); }
.log { display: flex; flex-direction: column; gap: 10px; }
.bubble { animation: arrive .35s ease-out both; }
@keyframes arrive { from { opacity: 0; transform: translateY(6px); } }
.bubble.goddess { align-self: flex-start; max-width: 94%; padding: 10px 15px 12px; border-radius: 4px 18px 18px 18px;
  background: linear-gradient(180deg, #251c4cf2, #170f33f2); border: 1px solid var(--line-soft); font: 400 15.5px/1.85 var(--serif); color: #efe5cf; box-shadow: 0 8px 24px #0005; }
.bubble .by { font: 600 10.5px/1.6 var(--display); letter-spacing: .22em; color: var(--gold); }
.msg-body p + p { margin-top: .75em; }
.msg-body strong { color: var(--gold-hi); font-weight: 700; }
.bubble.me { align-self: flex-end; max-width: 84%; padding: 9px 15px; border-radius: 18px 18px 4px 18px; background: #e0bd671f; border: 1px solid #e0bd6744;
  font-size: 15px; line-height: 1.65; white-space: pre-wrap; transition: opacity .3s; }
.bubble.me.sending { opacity: .6; }
.card-note { align-self: center; animation: arrive .4s ease-out both; }
.card-note button { display: flex; align-items: center; gap: 10px; padding: 5px 14px 5px 6px; border-radius: 12px; border: 1px solid #e0bd6744; background: #e0bd670f; cursor: pointer; text-align: left; color: var(--ink); }
.card-note button:hover { border-color: var(--gold); }
.cn-art { width: 26px; flex: none; }
.cn-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; font-size: 13px; }
.cn-n { color: var(--gold); font-size: 12px; }
.cn-text b { font: 600 14px var(--serif); }
.typing { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 94%; margin-top: 10px; padding: 8px 15px; border-radius: 4px 16px 16px 16px;
  background: #1d1640cc; border: 1px solid var(--line-soft); font: 500 13.5px/1.5 var(--serif); color: var(--dim); animation: arrive .35s ease-out both; }
.dots { display: inline-flex; gap: 4px; flex: none; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); animation: dot 1.4s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* dock: composer or card pick, and the one-line notice */
.dock { grid-area: dock; padding: 8px 10px max(6px, env(safe-area-inset-bottom)); border-top: 1px solid #ffffff10; background: #0b0918e6; min-width: 0; }
.composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; align-items: end; }
.composer textarea { width: 100%; resize: none; display: block; overflow-y: hidden; min-height: 46px; max-height: 132px; padding: 11px 15px; border-radius: 23px; border: 1px solid var(--line);
  background: #0d0a1fcc; line-height: 1.5; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s, opacity .2s; }
.composer textarea::placeholder { color: var(--mute); }
.composer textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px #e0bd6722; }
.composer textarea:disabled { opacity: .55; }
.send { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #1d1405;
  background: linear-gradient(160deg, #f1d58b, #c99a3e 55%, #9c7428); box-shadow: 0 4px 14px #c99a3e33, inset 0 1px 0 #fff6; transition: opacity .2s, transform .15s; }
.send svg { width: 20px; height: 20px; margin-left: -2px; }
.send:hover:not(:disabled) { transform: translateY(-1px); }
.send:disabled { opacity: .35; cursor: default; }
.c-hint { grid-column: 1; font-size: 12.5px; line-height: 1.4; color: var(--rose); padding-left: 14px; }
.c-hint:empty { display: none; }
.c-count { grid-column: 2; font-size: 11.5px; color: var(--mute); text-align: center; white-space: nowrap; }
.c-count:empty { display: none; }
.dock-note { margin-top: 6px; text-align: center; font-size: 11px; line-height: 1.5; color: var(--mute); }
.dock-note a { font-weight: 700; }

.pick { display: grid; gap: 2px; }
.pick-prompt { padding: 0 6px; text-align: center; font: 600 15px/1.55 var(--serif); color: var(--gold-hi); }
.fan { position: relative; width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
.fan-card { position: absolute; left: calc(50% - var(--cw) / 2); top: 24px; width: var(--cw); aspect-ratio: 312 / 540; padding: 0; border: 0; border-radius: 6% / 3.5%;
  background: url(/assets/back.svg) center / 100% 100% no-repeat; box-shadow: -1px 2px 6px #000a; cursor: pointer;
  transform-origin: 50% var(--pivot); transform: rotate(var(--a)) translateY(var(--ly, 0%)); transition: transform .2s ease-out, box-shadow .2s, filter .3s; }
.fan.dealing .fan-card { transform: rotate(0deg); transition: none; }
.fan.opening .fan-card { transition: transform .75s cubic-bezier(.2, .8, .25, 1); }
.fan-card.hov { --ly: -8%; z-index: 299; }
.fan-card.sel { --ly: -17%; z-index: 300; box-shadow: 0 0 0 2px var(--gold-hi), 0 0 22px #f6e2a4aa, 0 6px 16px #000c; }
.fan-card:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; z-index: 301; }
.fan.locked .fan-card { cursor: default; }
.fan.locked .fan-card:not(.sel) { filter: brightness(.45); }
.fan.locked .fan-card.sel { animation: chosen 1.2s ease-in-out infinite; }
@keyframes chosen { 50% { box-shadow: 0 0 0 2px var(--gold-hi), 0 0 36px #f6e2a4, 0 6px 16px #000c; } }
.pick-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.pick-help { font-size: 12.5px; line-height: 1.45; color: var(--dim); }
.pick-row .btn { flex: none; min-height: 42px; padding: 8px 18px; font-size: 14.5px; }

/* the reveal: a card that rises from the fan, turns and settles into the tray */
.reveal-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.rv { position: fixed; }
.rv::before { content: ''; position: absolute; left: 50%; top: 45%; width: 260%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, #0b0918f2 35%, #0b0918b3 60%, transparent); animation: arrive .4s ease-out both; }
.rv-flip { position: relative; aspect-ratio: 312 / 540; perspective: 1200px; filter: drop-shadow(0 18px 40px #000d) drop-shadow(0 0 30px #e0bd6744); }
.rv-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.rv .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv .side .tcard { position: absolute; inset: 0; }
.rv .side.front { transform: rotateY(180deg); }
.rv .side.front.rev .tcard { transform: rotate(180deg); }
.rv-name { width: max-content; margin: 12px auto 0; padding: 4px 16px; border-radius: 999px; background: #0b0918e6; border: 1px solid #e0bd6755;
  text-align: center; font: 700 17px/1.5 var(--serif); color: var(--ink); opacity: 0; white-space: nowrap; }

/* ---------- closing */
.end { padding: 4px 0 30px; }
.e-head { display: grid; gap: 16px; justify-items: center; text-align: center; }
.e-card { width: min(44vw, 190px); }
.e-card .tcard { box-shadow: 0 14px 40px #000c, 0 0 34px #e0bd6730; }
.e-copy { display: grid; gap: 6px; justify-items: center; max-width: 600px; width: 100%; }
.e-copy h2 { font: 700 clamp(21px, 5.6vw, 28px)/1.4 var(--serif); }
.e-sub { color: var(--dim); font-size: 15px; }
.e-last { margin: 10px 0 0; width: 100%; padding: 16px 18px 14px; border-radius: 4px 18px 18px 18px; text-align: left; background: linear-gradient(180deg, #251c4cf2, #170f33f2);
  border: 1px solid var(--line-soft); font: 400 15.5px/1.85 var(--serif); color: #efe5cf; box-shadow: 0 12px 34px #0006; }
.e-last footer { margin-top: 8px; text-align: right; font-size: 13px; color: var(--gold); }
.e-cards { margin-top: 26px; }
.e-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
.e-cardbtn { display: grid; justify-items: center; gap: 6px; width: 104px; padding: 0; border: 0; background: none; cursor: pointer; color: var(--ink); text-align: center; border-radius: 8px; }
.e-art { display: block; width: 100%; }
.e-cap { display: grid; justify-items: center; line-height: 1.35; }
.e-cardbtn .tc-name { font-size: 14px; }
.e-cardbtn:hover .tcard { box-shadow: 0 10px 26px #000c, 0 0 18px #e0bd6755; }
.e-actions { display: grid; gap: 14px; justify-items: center; margin-top: 28px; text-align: center; }
.e-remember { max-width: 520px; font: 500 14.5px/1.7 var(--serif); color: var(--ink); }
.e-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- footer */
.foot { padding: 20px var(--gutter) max(24px, env(safe-area-inset-bottom)); text-align: center; font-size: 12.5px; line-height: 1.75; color: var(--mute); border-top: 1px solid #ffffff0d; }
.foot p + p { margin-top: 6px; }
.foot b { color: var(--dim); font-weight: 500; }
.foot .care { color: var(--dim); }
.foot .care a { font-weight: 700; }
.foot .copy { margin-top: 10px; font-family: var(--display); letter-spacing: .15em; }

/* ---------- dialogs and toast */
dialog.modal { border: 1px solid var(--line); border-radius: 22px; padding: 0; color: var(--ink); background: linear-gradient(180deg, #1f1840, #120d27);
  box-shadow: 0 30px 80px #000c; max-height: calc(100dvh - 24px); overscroll-behavior: contain; }
dialog.modal::backdrop { background: #06040fe6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
dialog.modal[open] { animation: arrive .25s ease-out both; }
.card-dlg { width: min(760px, calc(100% - 24px)); }
.card-dlg[open] { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 44px 16px 22px; overflow-y: auto; }
.m-close { position: absolute; right: 8px; top: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #ffffff0d; font-size: 24px; line-height: 1; cursor: pointer; color: var(--dim); }
.m-close:hover { color: var(--ink); background: #ffffff1a; }
.m-slot { position: relative; flex: none; width: min(60vw, calc((100dvh - 330px) * 312 / 540), 300px); min-width: 140px; }
.m-slot .tcard { width: 100%; }
.m-slot.rev .tcard { transform: rotate(180deg); }
.m-info { text-align: center; display: grid; gap: 4px; justify-items: center; }
.m-pos { font: 600 13px var(--serif); color: var(--gold); letter-spacing: .06em; }
.m-num { font: 600 12px var(--display); letter-spacing: .25em; color: var(--mute); }
.m-info h3 { margin: 2px 0 0; font: 700 26px/1.3 var(--serif); }
.m-en { font: 600 14px var(--display); letter-spacing: .12em; color: var(--gold); }
.m-en:empty { display: none; }
.m-meta { font-size: 13.5px; color: var(--dim); }
.m-kw { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.m-kw li { padding: 3px 12px; border-radius: 999px; border: 1px solid #e0bd6755; background: #e0bd6712; font-size: 13.5px; color: #f1e2bb; }
.ask-dlg { width: min(400px, calc(100% - 32px)); }
.ask-dlg[open] { display: grid; gap: 10px; padding: 24px 20px 18px; text-align: center; }
.ask-dlg h3 { font: 700 18px/1.45 var(--serif); }
.ask-dlg p { color: var(--dim); font-size: 14.5px; }
.ask-btns { display: flex; justify-content: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.ask-btns .btn { min-width: 120px; }

.toast { position: fixed; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; width: min(520px, calc(100% - 24px));
  display: flex; align-items: flex-start; gap: 6px; padding: 12px 8px 12px 16px; border-radius: 16px; background: #2a1638f5; border: 1px solid #eeb0c255;
  box-shadow: 0 16px 40px #000c; font-size: 14px; line-height: 1.6; color: var(--ink); animation: drop .3s ease-out both; }
.toast p { flex: 1; }
.toast button { flex: none; width: 32px; height: 32px; margin-top: -4px; border: 0; border-radius: 50%; background: none; font-size: 20px; color: var(--dim); cursor: pointer; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -8px); } }

.noscript { text-align: center; padding: 20px; }

/* ---------- wider screens */
@media (min-width: 560px) {
  .g-grid { gap: 26px 16px; }
  .tray-card { width: 84px; }
}
@media (min-width: 720px) {
  .g-stage { margin: 0 16px; }
  .r-bar { padding-left: 16px; padding-right: 16px; }
  .chat { padding-left: 18px; padding-right: 18px; }
  .dock { padding-left: 16px; padding-right: 16px; }
  .tray { margin-right: 26px; }
}
@media (min-width: 900px) {
  :root { --gutter: 28px; }
  .g-grid { grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 30px 20px; }
  .intro { padding: 12px 0 18px; }
  .queue { grid-template-columns: 240px minmax(0, 420px); justify-content: center; align-items: center; gap: 44px; text-align: left; padding-top: 30px; }
  .q-card { width: 240px; }
  .q-info { justify-items: start; }
  .e-head { grid-template-columns: 230px minmax(0, 600px); justify-content: center; align-items: center; gap: 40px; text-align: left; padding-top: 16px; }
  .e-card { width: 230px; }
  .e-copy { justify-items: start; }
  .card-dlg[open] { flex-direction: row; align-items: center; gap: 32px; padding: 36px 40px; }
  .m-slot { width: min(320px, calc((100dvh - 120px) * 312 / 540)); }
  .m-info { text-align: left; justify-items: start; flex: 1; }
  .m-kw { justify-content: flex-start; }
}
/* desktop room: goddess on the left, conversation in the middle, the tray as a side column */
@media (min-width: 960px) {
  body[data-view="room"] main { max-width: 1280px; }
  .room { position: relative; top: auto; left: auto; right: auto; z-index: auto; height: calc(100dvh - 70px); min-height: 560px; max-height: 1000px; background: none;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) 212px; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "stage bar tray" "stage chat tray" "stage dock tray"; column-gap: 22px; padding-bottom: 16px; }
  .g-stage { margin: 0; height: auto; aspect-ratio: 300 / 470; max-height: 100%; align-self: start; border-radius: 18px; }
  .room.picking .g-stage { height: auto; }
  .g-stage .win { border-radius: 16px; }
  .plate { padding: 30px 16px 12px; border-radius: 0 0 16px 16px; }
  .plate-title { white-space: normal; font-size: 13.5px; }
  .r-bar { padding: 0 2px 8px; border-bottom: 1px solid #ffffff10; }
  .r-who { text-align: left; }
  .r-who h2 { font-size: 19px; }
  .chat { padding: 16px 6px 12px; }
  .bubble.goddess { max-width: 88%; font-size: 16px; }
  .dock { padding: 10px 0 0; background: none; }
  .tray { grid-area: tray; display: flex; flex-direction: column; justify-self: stretch; align-self: stretch; margin: 0; min-height: 0;
    padding: 14px 12px; border-radius: 18px; background: #120d28b3; border: 1px solid var(--line-soft); }
  .tray-toggle { display: none; }
  .tray-head { display: block; font: 600 15px var(--serif); text-align: center; padding-bottom: 10px; border-bottom: 1px solid #ffffff10; }
  .tray-head b { color: var(--gold-hi); font-family: var(--display); margin-left: 4px; }
  .tray-empty { display: block; margin-top: 18px; text-align: center; font-size: 13px; line-height: 1.7; color: var(--mute); }
  .tray-list, .tray.open .tray-list { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; width: auto; max-width: none;
    margin-top: 12px; padding: 2px 2px 8px; overflow-y: auto; background: none; border: 0; box-shadow: none; border-radius: 0; }
  .tray-card { width: 100%; }
}

/* ---------- reduced motion: no fan opening, no flight, no twinkle, no fades (figures are paused in JS) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .stars.s2, .stars.s3 { animation: none !important; opacity: .7; }
  .dots i, .clock.late, .fan.locked .fan-card.sel, .q-card .tcard, .g-stage .win img.still { animation: none !important; }
  .dots i { opacity: .8; }
}