/* Reveal: full-screen walk through each trait after the host reveals the wine. */
.rv { position:fixed; inset:0; z-index:100; background:var(--cream); color:var(--ink); overflow-y:auto; scroll-snap-type:y mandatory; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.rv-p { min-height:100dvh; scroll-snap-align:start; display:flex; flex-direction:column; justify-content:center; padding:56px 20px 40px; max-width:520px; margin:0 auto; }
.rv-skip { position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:14px; z-index:101; width:auto; padding:8px 14px; font:700 13px system-ui; background:color-mix(in srgb, var(--ink) 12%, transparent); color:var(--ink); border-radius:999px; }
.rv-dots { position:fixed; right:8px; top:50%; transform:translateY(-50%); z-index:101; display:grid; gap:7px; }
.rv-dots i { width:6px; height:6px; border-radius:50%; background:var(--muted); opacity:.4; transition:all .3s; } .rv-dots i.on { opacity:1; background:var(--wine); transform:scale(1.5); }
.rv-k { font:800 12px system-ui; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); text-align:center; }
.rv-h { font:800 32px/1.1 Georgia, serif; color:var(--wine); text-align:center; margin:8px 0 6px; text-wrap:balance; }
.rv-sub { text-align:center; color:var(--muted); margin:0 0 6px; }
.rv-hint { text-align:center; color:var(--muted); font:600 13px system-ui; margin-top:40px; animation:rvbob 1.6s ease-in-out infinite; }
@keyframes rvbob { 50% { transform:translateY(7px); } }
.rv-ends { padding:0 4px; display:flex; justify-content:space-between; font:italic 700 22px Georgia, serif; color:var(--wine); margin:34px 0 0; }
.rv-track { position:relative; height:120px; margin:30px 16px 0; }
.rv-line { position:absolute; left:0; right:0; top:44px; height:8px; border-radius:4px; background:color-mix(in srgb, var(--muted) 30%, transparent); }
.rv-tk { position:absolute; top:58px; width:1px; height:6px; background:var(--muted); opacity:.6; transform:translateX(-50%); } .rv-tk.m { height:11px; opacity:1; }
.rv-tn { position:absolute; top:72px; font:700 10px system-ui; color:var(--muted); transform:translateX(-50%); }
.rv-gap { position:absolute; top:46px; height:4px; border-radius:2px; background:var(--wine); opacity:0; transition:opacity .4s ease 2.1s; }
.rv-mk { position:absolute; top:0; width:0; height:56px; left:0; }
.rv-mk::before { content:""; position:absolute; left:-3px; top:6px; bottom:0; width:6px; border-radius:3px; background:var(--c); }
.rv-mk span { position:absolute; left:50%; transform:translateX(-50%); top:-14px; font:800 11px system-ui; letter-spacing:.06em; text-transform:uppercase; color:var(--c); white-space:nowrap; }
.rv-ans { --c:var(--ink); transition:left 1.5s cubic-bezier(.16,.84,.24,1); }
.rv-you span { top:100px; } .rv-you { --c:var(--wine); opacity:0; transition:opacity .4s ease 1.7s, left 0s; }
.rv-p.in .rv-ans { left:var(--a); } .rv-p.in .rv-you { left:var(--y); opacity:1; } .rv-p.in .rv-gap { opacity:.55; }
.rv-pts { text-align:center; margin-top:26px; opacity:0; transform:translateY(8px); transition:all .5s ease 2.3s; }
.rv-p.in .rv-pts { opacity:1; transform:none; }
.rv-pts .n { font:900 54px system-ui; color:var(--wine); } .rv-pts .n small { font:700 18px system-ui; color:var(--muted); }
.rv-pts .t { display:inline-block; margin-top:4px; padding:4px 14px; border-radius:999px; font:800 14px system-ui; }
.rv-pts .t.dead { background:#2e9e5b; color:#fff; } .rv-pts .t.close { background:var(--gold); color:#241a1d; } .rv-pts .t.miss { background:color-mix(in srgb, var(--wine) 18%, transparent); color:var(--wine); }
.rv-pts .m { margin-top:10px; color:var(--muted); font-size:15px; }
.rv-big { font:900 96px/1 system-ui; color:var(--wine); text-align:center; margin-top:14px; font-variant-numeric:tabular-nums; }
.rv-big small { font:700 24px system-ui; color:var(--muted); }
.rv-place { text-align:center; font:800 30px Georgia, serif; margin-top:10px; }
.rv-board { margin-top:18px; }
@media (prefers-reduced-motion: reduce) { .rv-ans, .rv-you, .rv-gap, .rv-pts { transition:none !important; } .rv-hint { animation:none; } }