/* Opening ritual on the night stage (artboard 1h). This layers over ritual.css and
   only changes appearance — the drag, tear and reveal machinery in opening-motion.js
   and the #tear-seal range input are untouched. */
dialog.cinematic-opening{background:#0c1018;color:var(--fg);border:0}
dialog.cinematic-opening::backdrop{background:#05080ceb}
.cinematic-opening .opening-atmosphere{background:radial-gradient(ellipse 70% 50% at 50% 45%,#2a2138 0%,#121522 55%,#0c1018 90%)}
.cinematic-opening .opening-atmosphere::after{content:none}
/* The type aura behind the pack, tinted by the card element like the home stage. */
.cinematic-opening .opening-atmosphere::before{content:'';position:absolute;left:50%;top:46%;width:min(360px,88vw);height:min(520px,62vh);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(var(--aura),transparent 65%);filter:blur(30px)}

/* Header: back on the left, context centred, sound on the right. */
.cinematic-opening .ritual-header{display:flex;align-items:center;justify-content:center;padding:6px 96px 0;min-height:46px}
.cinematic-opening .ritual-header .eyebrow{font-size:calc(12px*var(--scale));color:var(--fg-muted);letter-spacing:1px;font-weight:600;text-align:center;text-transform:uppercase;max-width:none;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cinematic-opening .ritual-sound{position:absolute;right:14px;top:10px;height:40px;padding:0 14px;border-radius:var(--r-pill);white-space:nowrap;background:var(--surface-3);color:var(--fg-2);display:grid;place-items:center;font-size:calc(11px*var(--scale));font-weight:600;line-height:1}
.cinematic-opening .modal-close{left:14px;right:auto;top:10px;width:40px;height:40px;border-radius:50%;background:var(--surface-3);color:var(--fg-2);display:grid;place-items:center}

/* The visible instruction lives in the footer, so the heading only carries the live region. */
.cinematic-opening:not(.ritual-summary) .opening-heading{height:0;min-height:0;margin:0;overflow:hidden}
.cinematic-opening:not(.ritual-summary) .opening-heading h2{display:none}
.cinematic-opening:not(.ritual-summary) .ritual-status-line{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.cinematic-opening .ritual-floor{background:radial-gradient(ellipse,#000000cc,transparent 70%);height:40px}
.cinematic-opening .wrapper{filter:drop-shadow(0 40px 34px #000d)}
.cinematic-opening .sealed-scene{transform:none}
.cinematic-opening[data-phase="choosing"] .sealed-scene{transform:none}

/* The seal: a lit cut line with a leading edge and a draggable head. */
.cinematic-opening .cut-track{height:2px;background:linear-gradient(90deg,transparent,#8ff3ea,#fff,#8ff3ea,transparent);box-shadow:0 0 14px var(--accent),0 0 30px #5fd3c9aa}
.cinematic-opening .cut-track::before{background:linear-gradient(transparent,#5fd3c940,transparent)}
.cinematic-opening .cut-track span{height:2px;background:#fff;box-shadow:0 0 12px #fff,0 0 24px var(--accent)}
.cinematic-opening .cut-track b{width:52px;height:52px;top:-26px;background:#fff;border:4px solid var(--accent);box-shadow:0 0 0 8px #5fd3c940,0 0 30px #5fd3c9aa}
.cinematic-opening .cut-track b::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;border-right:2.4px solid var(--accent-ink);border-top:2.4px solid var(--accent-ink);transform:translate(-65%,-50%) rotate(45deg)}
:root[data-motion="reduced"] .cinematic-opening .cut-track b{box-shadow:0 0 0 6px #5fd3c940}

/* Footer: the instruction, a secondary line, the button, then the cost. */
.cinematic-opening .ritual-footer{gap:12px}
.cinematic-opening .seal-instruction{font-family:var(--font-display);font-weight:800;font-size:calc(20px*var(--scale));letter-spacing:-.4px;color:var(--fg)}
.cinematic-opening .ritual-footer .primary{height:50px;padding:0 30px;border-radius:var(--r-pill);background:none;border:1px solid var(--edge-3);font-weight:700;font-size:calc(14px*var(--scale));color:var(--fg);box-shadow:none}
.cinematic-opening .ritual-footer .primary:disabled{opacity:.45}
.cinematic-opening .reselect-pack{font-size:calc(13px*var(--scale));color:var(--fg-muted)}
.cinematic-opening .cost-line{font-size:calc(12px*var(--scale));color:var(--dim)}
.cinematic-opening .cost-line.short{color:#e59a7a}

/* Choosing ten packs keeps the ring, just on the night palette. */
.cinematic-opening .carousel-controls{color:var(--fg-muted)}
.cinematic-opening .carousel-controls button{background:var(--surface-3);color:var(--fg-2);border-radius:50%;width:40px;height:40px}

/* ---- Card reveal: 1i on a laptop, 1j on a phone ---- */

/* Rarity ladder from artboard 1s: neutral, then gold, then prismatic. */
.tier-badge{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--fg-2);font-size:calc(11px*var(--scale));font-weight:800;letter-spacing:1.4px;text-transform:uppercase;line-height:1.2}
.tier-badge[data-rank="6"],.tier-badge[data-rank="7"],.tier-badge[data-rank="8"],.tier-badge[data-rank="9"]{background:var(--tier-gold);color:#2a1a00}
.tier-badge[data-rank="10"]{background:var(--tier-crown);color:#1a1020}
.type-name{font-size:calc(13px*var(--scale));color:var(--fg-muted);margin-left:10px}

.cinematic-opening .reveal-caption h3{font-family:var(--font-display);font-weight:800;font-size:calc(24px*var(--scale));letter-spacing:-.6px;color:var(--fg);display:flex;align-items:center;justify-content:center;gap:8px}
.cinematic-opening .reveal-caption .rarity{display:flex;align-items:center;justify-content:center;gap:0;margin-top:10px;flex-wrap:wrap}
.cinematic-opening .reveal-context{margin-top:10px;font-size:calc(12px*var(--scale));line-height:1.6;color:var(--fg-muted);max-width:34ch;text-align:center;margin-inline:auto}
.cinematic-opening .type-dot{width:10px;height:10px;border-radius:50%;background:var(--type,#63b7ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--type,#63b7ac) 27%,transparent)}
.cinematic-opening .new-badge{background:var(--accent);color:var(--accent-ink);border-radius:6px;padding:4px 8px;font-size:calc(11px*var(--scale));font-weight:800;letter-spacing:.4px}

.cinematic-opening .reveal-dots span{width:8px;height:8px;border-radius:4px;background:#ffffff40;transition:width .3s}
.cinematic-opening .reveal-dots span.done{background:var(--accent)}
.cinematic-opening .reveal-dots span.current{width:24px;background:var(--fg)}

/* The rail is laptop-only; a phone has no room beside the card. */
.revealed-rail{display:none}
.revealed-strip{display:flex;gap:6px;align-items:flex-start}
.revealed-strip img{width:54px;height:auto;aspect-ratio:367/512;object-fit:cover;border-radius:4px;opacity:.7;display:block;flex:none}
.rail-caption{font-size:calc(11px*var(--scale));letter-spacing:1.6px;font-weight:700;color:var(--fg-muted)}

/* The pack, extraction and swipe stack share one stage and one target size.
   Reserve the same footer space on phones, even when the controls change. */
dialog.cinematic-opening:not(.ritual-summary):not(.batch-unsealing){--opening-footer-height:calc(220px*var(--scale));--card-size:min(39dvh,76vw,calc((100dvh - 110px - var(--opening-footer-height))*.7));--pack-size:min(32dvh,56vw,calc((100dvh - 110px - var(--opening-footer-height))/2.3))}
.cinematic-opening:not(.ritual-summary):not(.batch-unsealing) .ritual-stage{width:100%;min-height:0;flex:1;display:grid;place-items:center}
.cinematic-opening:not(.ritual-summary):not(.batch-unsealing) .ritual-footer{height:var(--opening-footer-height);flex:none;gap:10px}
.cinematic-opening .ritual-footer .seal-instruction{margin:0;line-height:1.3}
.cinematic-opening .ritual-footer .cost-line{margin:0}
/* Each upcoming scan has its own aspect ratio, centred on the same anchor.
   Promoting it to the front must not stretch or reposition its artwork. */
.cinematic-opening .next-card{top:50%;bottom:auto;height:auto;aspect-ratio:var(--next-card-ratio,var(--card-ratio));transform:translateY(-50%)}
.cinematic-opening .reveal-card{padding:0;border:0;aspect-ratio:var(--card-ratio)}

/* Keep both side panels out of flow throughout the entire desktop opening.
   Previously only the cards phase removed the footer and enlarged the card. */
@media(min-width:1000px){
 dialog.cinematic-opening[open]:not(.ritual-summary):not(.batch-unsealing){--card-size:min(52dvh,340px);--pack-size:min(32dvh,268px);--opening-footer-height:0px}
 .cinematic-opening[data-phase="cards"]:not(.ritual-summary) .opening-heading{display:none}
 .cinematic-opening[data-phase="cards"]:not(.ritual-summary) .ritual-stage{position:relative;width:100%;display:flex;align-items:center;justify-content:center}
 .cinematic-opening[data-phase="cards"] .tabletop{width:auto;flex:none}
 .cinematic-opening[data-phase="cards"] .revealed-rail{display:flex;position:absolute;left:8px;top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-end;gap:8px;width:min(26vw,300px);margin:0}
 .cinematic-opening[data-phase="cards"] .revealed-strip{flex-wrap:wrap;justify-content:flex-end}
 .cinematic-opening:not(.ritual-summary):not(.batch-unsealing) .ritual-footer{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:min(360px,calc((100% - var(--card-size))/2 - 48px));height:auto;align-items:flex-start;text-align:left;justify-content:center;gap:14px;padding:0}
 .cinematic-opening[data-phase="cards"] .reveal-caption h3{justify-content:flex-start;font-size:calc(38px*var(--scale));letter-spacing:-1.4px;line-height:1.05}
 .cinematic-opening[data-phase="cards"] .reveal-caption .rarity{justify-content:flex-start}
 .cinematic-opening[data-phase="cards"] .reveal-context{text-align:left;margin-inline:0}
 .cinematic-opening[data-phase="cards"] .ritual-card-actions{align-items:flex-start;justify-content:flex-start;flex-direction:column;gap:8px}
 .cinematic-opening[data-phase="cards"] .reveal-dots{position:static;transform:none;margin:6px 0}
 .cinematic-opening[data-phase="cards"] .skip-btn{position:static;align-self:flex-start;margin-top:4px;color:var(--fg-muted)}
}
/* Compact landscape keeps the existing side-by-side arrangement in every phase. */
@media(max-height:500px) and (min-width:600px){
 dialog.cinematic-opening[open]:not(.ritual-summary):not(.batch-unsealing){--card-size:min(54dvh,30vw);--pack-size:min(39dvh,24vw)}
 .cinematic-opening:not(.ritual-summary):not(.batch-unsealing) .ritual-stage{height:100%;min-height:0}
 .cinematic-opening:not(.ritual-summary):not(.batch-unsealing) .ritual-footer{height:auto;padding-top:0;gap:8px}
}
.cinematic-opening .revealed-rail:has(.revealed-strip:empty){visibility:hidden}

/* ---- Pack results (artboard 1k) ---- */
.cinematic-opening.ritual-summary{background:#0c1018;color:var(--fg)}
.cinematic-opening.ritual-summary .opening-atmosphere{background:radial-gradient(ellipse 90% 40% at 50% 22%,#3a1c14 0%,#141a24 50%,#0c1018 90%)}
.cinematic-opening.ritual-summary .opening-heading{text-align:center}
.cinematic-opening.ritual-summary .opening-heading h2{font-family:var(--font-display);font-weight:800;font-size:calc(28px*var(--scale));letter-spacing:-.8px;color:var(--fg)}
.cinematic-opening.ritual-summary .ritual-status{font-size:calc(11px*var(--scale));letter-spacing:1.6px;font-weight:700;color:var(--fg-muted);text-transform:uppercase}

/* The standout is simply the biggest card in the row, so the separate highlight block goes. */
.cinematic-opening.ritual-summary .pack-highlight{display:none}
.cinematic-opening.ritual-summary .pull-results{display:flex;justify-content:center;align-items:flex-end;gap:6px;flex-wrap:wrap}
.cinematic-opening.ritual-summary .summary-card{position:relative;width:62px;padding:0;background:none;border:0}
.cinematic-opening.ritual-summary .summary-card>strong,.cinematic-opening.ritual-summary .summary-card>.rarity{display:none}
.cinematic-opening.ritual-summary .summary-art img{width:100%;border-radius:4px;display:block}
.cinematic-opening.ritual-summary .summary-card[data-fresh="true"] .summary-art{box-shadow:0 0 0 2px var(--accent);border-radius:4px}
.cinematic-opening.ritual-summary .summary-card[data-standout="true"]{width:130px;margin-left:8px;filter:drop-shadow(0 20px 30px #000c)}
.cinematic-opening.ritual-summary .summary-card[data-standout="true"] .summary-art{box-shadow:0 0 0 2px var(--gold);border-radius:8px}
.cinematic-opening.ritual-summary .summary-card[data-standout="true"] .summary-art img{border-radius:8px}
.cinematic-opening.ritual-summary .new-badge{position:absolute;left:3px;top:3px;padding:2px 5px;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-size:calc(9px*var(--scale));font-weight:800;letter-spacing:0}
.copy-badge{position:absolute;right:3px;bottom:3px;padding:2px 5px;border-radius:4px;background:#0c1018dd;color:var(--fg);font-size:calc(9px*var(--scale));font-weight:700}

.cinematic-opening.ritual-summary .summary-panels{display:flex;flex-direction:column;gap:10px}
.cinematic-opening.ritual-summary .summary-panel{padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--edge)}
.cinematic-opening.ritual-summary .panel-head strong{font-weight:700;font-size:calc(14px*var(--scale));color:var(--fg)}
.cinematic-opening.ritual-summary .panel-head span{font-size:calc(13px*var(--scale));color:var(--fg-muted)}
.cinematic-opening.ritual-summary .panel-head b{color:var(--accent-text)}
.cinematic-opening.ritual-summary .panel-foot{font-size:calc(12px*var(--scale));color:var(--fg-muted)}
.cinematic-opening.ritual-summary progress{width:100%;height:6px;border-radius:3px;overflow:hidden;margin-top:10px}
.cinematic-opening.ritual-summary progress::-webkit-progress-bar{background:var(--edge-2);border-radius:3px}
.cinematic-opening.ritual-summary progress::-webkit-progress-value{background:var(--accent);border-radius:3px}
.cinematic-opening.ritual-summary progress::-moz-progress-bar{background:var(--accent);border-radius:3px}
.cinematic-opening.ritual-summary progress.gold::-webkit-progress-value{background:var(--gold)}
.cinematic-opening.ritual-summary progress.gold::-moz-progress-bar{background:var(--gold)}
.cinematic-opening.ritual-summary .trade-btn{color:var(--accent-text);font-weight:700}
.cinematic-opening.ritual-summary .summary-streak{font-size:calc(12px*var(--scale));color:var(--fg-muted)}

.cinematic-opening.ritual-summary .dialog-actions{display:flex;flex-direction:column;gap:10px;align-items:stretch;background:none}
.cinematic-opening.ritual-summary .dialog-actions .primary{flex:none;height:56px;min-height:56px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:800;font-size:calc(16px*var(--scale));box-shadow:0 12px 34px #5fd3c955;border:0}
.cinematic-opening.ritual-summary .dialog-actions .secondary{flex:none;height:auto;min-height:0;padding:6px 0;background:none;border:0;color:var(--fg-2);font-size:calc(13px*var(--scale));font-weight:600}
.accent-dot{color:var(--accent-text)}

/* ---- Pocket Link reward screen (artboard 1q) ---- */
#modal.reward-modal{background:var(--sheet-bg);color:var(--fg);border:0;box-shadow:var(--shadow)}
.reward-screen{color:var(--fg)}
.reward-top .eyebrow,.reward-title .eyebrow{font-size:calc(11px*var(--scale));letter-spacing:1.6px;font-weight:700;color:var(--fg-muted);text-transform:uppercase}
.reward-title h1{font-family:var(--font-display);font-weight:800;font-size:calc(32px*var(--scale));letter-spacing:-1.2px;color:var(--fg)}
.reward-brand{font-family:var(--font-display);font-weight:800;color:var(--fg)}
.reward-orb .orb-number{font-family:var(--font-display);font-weight:800;font-size:calc(44px*var(--scale));letter-spacing:-1.6px;color:var(--fg)}
.reward-orb .orb-glow{background:radial-gradient(var(--accent-soft),transparent 70%)}
.reward-orb .orb-ring{border-color:var(--edge-2)}
.reward-orb svg{color:var(--accent-text)}
.reward-rows{margin-top:18px}
.reward-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--edge);margin-bottom:8px;font-size:calc(13px*var(--scale));color:var(--fg-2)}
.reward-row strong{color:var(--accent-text);font-weight:800}
.reward-row span{display:flex;align-items:center;gap:8px}
.week-caption{display:flex;justify-content:space-between;gap:10px;font-size:calc(12px*var(--scale));color:var(--fg-muted);margin-top:8px}
.reward-balance{font-size:calc(12px*var(--scale));color:var(--fg-muted);display:flex;align-items:center;gap:6px;justify-content:center;margin-bottom:10px}
.reward-actions .primary{width:100%;height:54px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-ink);font-family:var(--font-display);font-weight:800;font-size:calc(16px*var(--scale));border:0;box-shadow:0 12px 34px #5fd3c955}
.reward-actions .text-btn{display:block;width:100%;text-align:center;margin-top:10px;color:var(--fg-2);font-size:calc(13px*var(--scale));font-weight:600}

/* ---- Rarity badge system (artboard 1s) ---- */
/* Finish and variant tags are square chips beside the rarity pill, never gold,
   so they cannot be mistaken for a rarity tier. */
.finish-chip{display:inline-flex;align-items:center;padding:4px 7px;border-radius:5px;background:var(--surface-3);color:var(--fg-2);font-size:calc(10px*var(--scale));font-weight:700;letter-spacing:.6px;text-transform:uppercase;margin-left:6px}
/* Status chips stay teal / dark / rose for the same reason. */
.new-badge{background:var(--accent);color:var(--accent-ink)}
.copy-badge{background:#0c1018dd;color:#eef2f7}
.row-fav,.pocket-fav{color:#f28aa8}

/* A rare pull adds .rare-current (and a rare pack adds .god-pack), which in the
   pre-overhaul ritual swapped in a pale, lit stage. Those rules carry a class more
   than the night atmosphere, so they win on specificity and the background went
   white while the text stayed light — the card's name vanished on a rare pull, the
   one moment it matters most. Keep the type-tinted lift, on the night ground. */
.cinematic-opening.rare-current .opening-atmosphere,
.cinematic-opening.god-pack .opening-atmosphere{background:radial-gradient(ellipse 70% 55% at 50% 45%,color-mix(in srgb,var(--type,#5fd3c9) 24%,#191325) 0%,#121522 58%,#0c1018 92%)}
.cinematic-opening.rare-current .inspect-reveal{background:var(--tier-gold);border-color:transparent;color:#2a1a00;box-shadow:0 10px 26px #e0a52c40}
.cinematic-opening.god-pack .ritual-status,.cinematic-opening.god-pack .opening-heading h2{color:var(--gold)}