:root { --green:#60a5fa; --green-dark:#1d4ed8; --mint:#dbeafe; --page:#eef4ff; --border:#dbe4f0; }
/* Roll an Instrument — a blue music arcade, built for touch and keyboard. */
html { color-scheme:light only; }
body { background:radial-gradient(circle at 88% 0%,#dbeafe 0,transparent 24%),var(--page); }
.app { grid-template-columns:245px minmax(0,1fr); }
.instrument-main { padding:30px 36px 38px; max-width:1600px; width:100%; margin:auto; }
.instrument-main [hidden] { display:none!important; }
.instrument-main button,.instrument-main input,.instrument-main select { font:inherit; }
.instrument-main button { cursor:pointer; }
.instrument-main button:disabled { cursor:not-allowed; opacity:.48; }
.instrument-main button:focus-visible,.instrument-main a:focus-visible,.instrument-main input:focus-visible,.instrument-main select:focus-visible { outline:3px solid #2563eb; outline-offset:3px; }
.roll-header { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-bottom:24px; }
.roll-back { display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#64748b; font-size:11px; font-weight:600; margin-bottom:22px; }
.roll-back:hover { color:#1d4ed8; }
.roll-eyebrow,.box-eyebrow { font-size:9px; font-weight:800; letter-spacing:1.6px; color:#2563eb; }
.roll-eyebrow { display:flex; align-items:center; gap:7px; }
.roll-eyebrow>span { width:6px; height:6px; border-radius:50%; background:#60a5fa; }
.roll-header h1 { font-size:clamp(29px,3.1vw,48px); letter-spacing:-1.8px; line-height:1.12; margin:12px 0; color:#0f172a; }
.roll-header h1 span { color:#2563eb; }
.roll-header p { font-size:12px; color:#64748b; margin:0; line-height:1.8; }
.hero.roll-header h1,.hero.roll-header h1 span { color:#fff; }
.hero.roll-header p,.hero.roll-header .roll-back,.hero.roll-header .roll-eyebrow,.hero.roll-header .header-medallion { color:#dbeafe; }
.hero.roll-header .roll-eyebrow>span { background:#bfdbfe; }
.hero.roll-header .roll-back:hover { color:#fff; }
.header-medallion { width:160px; flex-shrink:0; display:grid; justify-items:center; gap:10px; text-align:center; color:#1d4ed8; }
.header-medallion>i { font-size:46px; transform:rotate(-12deg); }
.header-medallion>span { font-size:9px; font-weight:600; line-height:1.7; }
.roll-stats { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:23px; }
.roll-stats>div { display:flex; align-items:center; gap:11px; padding:16px; border:1px solid #dbe4f3; background:#fff; border-radius:16px; box-shadow:0 3px 10px rgba(15,23,42,.025); }
.stat-symbol { display:grid; place-items:center; width:37px; height:37px; flex-shrink:0; border-radius:12px; background:#eff6ff; color:#2563eb; font-size:16px; }
.coins-symbol { background:#fff7df; color:#b45309; }
.roll-stats p { margin:0; min-width:0; }
.roll-stats p>span { display:block; font-size:9px; color:#64748b; margin-bottom:3px; }
.roll-stats strong { font-size:19px; letter-spacing:-.6px; color:#0f172a; }
.game-navigation { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:0 0 22px; flex-wrap:wrap; }
.game-tabs { display:flex; gap:4px; padding:5px; border:1px solid #dbe4f3; background:#eaf1ff; border-radius:14px; }
.game-tabs button { border:0; background:transparent; color:#64748b; padding:10px 16px; border-radius:10px; font-size:11px; font-weight:700; display:flex; align-items:center; gap:8px; transition:background 180ms,box-shadow 180ms,color 180ms; }
.game-tabs button[aria-selected=true] { background:#fff; color:#1d4ed8; box-shadow:0 2px 7px rgba(15,23,42,.08); }
.game-settings { display:flex; gap:15px; font-size:10px; color:#64748b; }
.game-settings label { display:flex; align-items:center; gap:5px; cursor:pointer; }
.game-settings input { accent-color:#2563eb; }
.roll-workspace { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:20px; align-items:start; }
.roll-left,.game-side { min-width:0; }
.roll-stage { --card-accent:#2563eb; position:relative; overflow:hidden; padding:20px 24px 19px; border:1px solid #cddcf5; border-radius:23px; background:#edf4ff; box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(37,99,235,.035); text-align:center; isolation:isolate; }
.stage-heading { display:flex; justify-content:space-between; gap:10px; position:relative; z-index:1; margin-bottom:22px; font-size:8px; letter-spacing:1.3px; font-weight:800; color:#5675a5; }
.stage-heading>span:first-child { display:flex; align-items:center; gap:6px; }
.stage-orbit { position:absolute; left:50%; top:44%; width:350px; height:350px; border:1px solid #ccdff5; border-radius:50%; transform:translate(-50%,-50%); z-index:-1; pointer-events:none; }
.orbit-two { width:430px; height:430px; border-style:dashed; opacity:.55; }
.reveal-announcement { min-height:27px; font-size:12px; font-weight:700; color:#1d4ed8; margin-bottom:14px; }
.card-scene { perspective:1400px; width:248px; height:334px; max-width:100%; margin:0 auto; position:relative; }
.pull-card { --card-accent:#2563eb; --card-soft:#eff6ff; height:100%; width:100%; background:white; border:2px solid var(--card-accent); border-radius:19px; box-shadow:0 15px 25px rgba(15,23,42,.10),0 3px 0 var(--card-accent); overflow:hidden; padding:16px; transform-style:preserve-3d; position:relative; }
.card-topline { display:flex; justify-content:space-between; align-items:center; font-size:8px; letter-spacing:1.4px; font-weight:800; color:var(--card-accent); }
.mystery-card { background:#fff; border-color:#b1c9ef; box-shadow:0 15px 25px rgba(37,99,235,.08),0 3px 0 #b1c9ef; }
.mystery-symbol { width:130px; height:130px; display:grid; place-items:center; border:1px solid #dbe4f3; border-radius:50%; background:#eff6ff; margin:28px auto 17px; position:relative; }
.mystery-symbol>i { font-size:40px; color:#aac8ef; transform:rotate(-12deg); }
.mystery-symbol>span { position:absolute; font-size:56px; font-weight:800; color:#1d4ed8; right:27px; top:27px; text-shadow:0 2px 0 #fff; }
.mystery-copy { font-size:12px; line-height:1.6; color:#5875a5; font-weight:600; }
.card-footerline { position:absolute; bottom:15px; left:8px; right:8px; font-size:7px; letter-spacing:1px; color:#8c9db7; font-weight:700; }
.pull-card .instrument-photo { height:173px; width:100%; margin:10px 0 6px; object-fit:contain; display:block; background:white; border-radius:9px; }
.instrument-photo.photo-unavailable { display:grid; place-items:center; font-size:34px; color:#b2c0d6; }
.instrument-photo.photo-unavailable>span { display:block; font-size:9px; text-align:center; padding:8px; }
.pull-name { margin:0 0 5px; font-size:20px; letter-spacing:-.6px; line-height:1.15; color:#0f172a; }
.pull-family { font-size:9px; font-weight:600; color:#64748b; margin:0 0 9px; }
.card-badges { display:flex; justify-content:center; align-items:center; gap:5px; flex-wrap:wrap; }
.rarity-badge,.finish-badge { display:inline-flex; align-items:center; gap:4px; font-size:8px; font-weight:800; padding:4px 7px; border-radius:6px; letter-spacing:.25px; background:var(--card-soft,#f1f5f9); color:var(--card-accent,#64748b); }
.finish-badge { background:#f1f5f9; color:#64748b; }
.finish-gold .finish-badge,.finish-badge.gold { color:#854d0e; background:#fef3c7; }
.finish-rainbow .finish-badge,.finish-badge.rainbow { color:#7e22ce; background:#f3e8ff; }
.finish-gold { border-color:#d4a32a; box-shadow:0 15px 25px rgba(146,107,15,.14),0 3px 0 #c79b20,inset 0 0 0 3px #fef3c7; }
.finish-gold::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,rgba(255,226,137,.27) 43%,rgba(255,255,255,.8) 49%,transparent 65%); background-size:220% 100%; animation:card-foil 4s ease-in-out infinite; }
.finish-rainbow { border-color:#a78bfa; box-shadow:0 15px 25px rgba(126,34,206,.15),0 3px 0 #a78bfa; }
.finish-galactic { border-color:#93c5fd; background:radial-gradient(circle at 15% 20%,#334779,#0f172a 60%); box-shadow:0 0 30px #60a5fa66,0 3px 0 #93c5fd; }
.finish-galactic .pull-name,.finish-galactic .card-topline { color:#eff6ff; }
.finish-galactic .pull-family,.finish-galactic .card-footerline { color:#bfdbfe; }
.finish-badge.galactic { color:#e0f2fe; background:#172554; border:1px solid #60a5fa; }
.variant-dots span.owned.galactic { background:radial-gradient(circle,#fff,#60a5fa,#172554); border-color:#60a5fa; box-shadow:0 0 5px #60a5fa; }
.galactic-upgrade { border-top:1px solid #dbeafe; padding-top:15px; margin-top:16px; }
.galaxy-overlay { position:fixed; inset:0; z-index:1050; background:#020617; opacity:1; transition:opacity 450ms ease; pointer-events:none; }
.galaxy-overlay[hidden] { display:none!important; }
.galaxy-overlay.is-departing { opacity:0; }
.galaxy-overlay canvas { position:absolute; inset:0; width:100%; height:100%; }
.galaxy-caption { position:absolute; bottom:9%; left:5%; right:5%; text-align:center; color:#eff6ff; text-shadow:0 2px 20px #020617; }
.galaxy-caption span { display:block; font-size:10px; letter-spacing:3px; color:#93c5fd; margin-bottom:12px; }
.galaxy-caption strong { font-size:clamp(18px,3vw,34px); }
.galaxy-reward { position:absolute; left:50%; top:46%; width:248px; height:334px; opacity:0; transform:translate(-50%,-50%) scale(.25) rotateY(65deg) rotateZ(-10deg); transition:transform 1050ms cubic-bezier(.16,.85,.25,1.15),opacity 600ms ease; filter:drop-shadow(0 0 36px #93c5fd); }
.galaxy-overlay.is-card-visible .galaxy-reward { opacity:1; transform:translate(-50%,-50%) scale(1.08) rotateY(0) rotateZ(0); }
.galaxy-reward .pull-card { box-shadow:0 0 0 3px #bfdbfe44,0 0 65px #60a5fa88; }
.roll-stage[data-finish=galactic] .card-scene.is-revealed { animation:galactic-arrival 1300ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes galactic-arrival { from { transform:scale(.65); filter:brightness(2); } 55% { transform:scale(1.07); filter:brightness(1.3); } to { transform:none; filter:none; } }
.finish-rainbow::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.19; background:linear-gradient(115deg,#fb7185,#fbbf24,#a3e635,#22d3ee,#818cf8,#e879f9,#fb7185); background-size:300% 300%; mix-blend-mode:multiply; animation:rainbow-foil 7s linear infinite; }
.pull-fact { margin:18px auto 15px; max-width:440px; min-height:40px; font-size:10px; line-height:1.7; color:#5875a5; }
.roll-actions { display:flex; flex-direction:column; align-items:center; gap:8px; }
.dice-button { display:flex; align-items:center; justify-content:center; gap:10px; border:1px solid #1d4ed8; border-bottom:4px solid #1e40af; border-radius:15px; background:linear-gradient(135deg,#1d4ed8,#2563eb); color:#fff; padding:14px 22px 12px; box-shadow:0 6px 14px rgba(37,99,235,.14); font-size:13px; font-weight:700; transition:transform 180ms,box-shadow 180ms; }
.dice-button>i { font-size:26px; }
.dice-button>small { font-size:8px; font-weight:500; color:#bfdbfe; border-left:1px solid #6b91d1; padding-left:10px; }
.dice-button:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 9px 20px rgba(37,99,235,.2); }
.dice-button:active:not(:disabled) { transform:translateY(2px); }
.skip-reveal { border:0; background:transparent; color:#1d4ed8; text-decoration:underline; font-size:9px; }
.secondary-roll-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:15px; }
.secondary-roll-actions button { background:transparent; border:0; color:#5875a5; font-size:9px; padding:5px 0; }
.secondary-roll-actions button>i { margin-right:5px; }
.stage-note { font-size:8px; color:#8b9bb8; margin:12px 0 0; }
.recent-pulls { margin-top:20px; }
.game-section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.game-section-heading h2 { margin:0; font-size:13px; color:#0f172a; letter-spacing:-.25px; display:flex; align-items:center; gap:7px; }
.game-section-heading h2>i { color:#2563eb; font-size:12px; }
.game-section-heading>span { font-size:9px; color:#64748b; }
.recent-list { display:flex; gap:10px; overflow:auto; padding:13px 2px 7px; scrollbar-width:thin; }
.recent-card { position:relative; flex:0 0 82px; min-width:0; padding:8px; border:1px solid var(--card-accent,#dbe4f3); border-radius:11px; background:#fff; text-align:center; }
.recent-card img { width:100%; height:65px; object-fit:contain; }
.recent-card strong { display:block; font-size:8px; line-height:1.3; margin-top:6px; }
.recent-card .finish-badge { font-size:6px; padding:3px 5px; margin-top:5px; }
.quiet-copy { font-size:10px; color:#94a3b8; }
.game-side { display:grid; gap:16px; }
.practice-box,.upgrade-box,.duplicate-box { padding:20px; border:1px solid #dbe4f3; border-radius:19px; background:#fff; }
.practice-box { border-top:3px solid #60a5fa; }
.practice-box h2 { font-size:20px; margin:9px 0 5px; letter-spacing:-.7px; }
.box-description { font-size:10px; line-height:1.65; color:#64748b; margin:7px 0 16px; }
.practice-question { font-size:12px; font-weight:600; line-height:1.65; margin:12px 0; }
.quiz-streak { font-size:10px; font-weight:700; color:#1d4ed8; background:#eff6ff; border-radius:8px; padding:8px 10px; margin:0 0 10px; }
.practice-answers { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.practice-answers button { background:#f8fafc; border:1px solid #e2e8f0; padding:10px 8px; border-radius:10px; font-size:10px; color:#475569; }
.practice-answers button:hover:not(:disabled) { background:#eff6ff; border-color:#93c5fd; }
.practice-answers button.correct { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; opacity:1; }
.practice-answers button.wrong { background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.practice-feedback { min-height:15px; font-size:10px; line-height:1.6; color:#1d4ed8; margin:12px 0 0; }
.next-question { border:0; background:transparent; color:#1d4ed8; font-size:10px; font-weight:700; padding:9px 0 0; }
.upgrade-row { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:9px; align-items:center; padding:13px 0; border-bottom:1px solid #edf3ef; }
.upgrade-icon { display:grid; place-items:center; height:32px; width:32px; border-radius:10px; background:#eff6ff; color:#2563eb; font-size:13px; }
.upgrade-row strong { font-size:10px; display:block; }
.upgrade-row p { font-size:8px; line-height:1.5; color:#64748b; margin:4px 0; }
.upgrade-row span { font-size:8px; color:#2563eb; font-weight:600; }
.upgrade-row button { border:1px solid #bfdbfe; background:#eff6ff; color:#1d4ed8; font-size:9px; padding:7px 8px; border-radius:8px; font-weight:700; }
.auto-upgrade { margin-top:17px; padding:13px; border:1px dashed #c7d2fe; background:#f8faff; border-radius:12px; }
.auto-upgrade strong { font-size:11px; color:#4338ca; }
.auto-upgrade p { font-size:9px; line-height:1.6; color:#64748b; }
.auto-upgrade button { width:100%; border:1px solid #c7d2fe; background:#e0e7ff; color:#4338ca; padding:9px; border-radius:9px; font-size:10px; font-weight:700; }
.duplicate-box>div { display:flex; align-items:center; gap:8px; color:#b45309; }
.duplicate-box h2 { font-size:13px; margin:0; color:#0f172a; }
.duplicate-box p { font-size:10px; line-height:1.7; color:#64748b; }
.duplicate-box button { width:100%; border:1px solid #fde68a; background:#fffbeb; color:#92400e; font-size:10px; font-weight:700; padding:10px; border-radius:10px; }
.duplicate-box>span { display:block; font-size:9px; color:#94a3b8; text-align:center; margin-top:8px; }
.catalog-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:10px 0 22px; }
.catalog-heading h2,.guide-intro h2 { font-size:27px; letter-spacing:-1px; margin:8px 0; }
.catalog-heading p,.guide-intro p { font-size:11px; color:#64748b; line-height:1.8; }
.collection-meter { display:grid; min-width:130px; text-align:right; }
.collection-meter strong { font-size:25px; color:#1d4ed8; }
.collection-meter span { font-size:9px; color:#64748b; }
.collection-meter progress { width:130px; height:5px; margin-top:9px; accent-color:#2563eb; }
.catalog-filters { display:flex; gap:10px; align-items:end; flex-wrap:wrap; padding:16px; border:1px solid #dbe4f3; border-radius:15px; background:#fff; }
.catalog-filters label { display:grid; gap:6px; font-size:9px; font-weight:600; color:#64748b; flex:1; min-width:110px; }
.catalog-filters label:first-child { flex:1.6; min-width:180px; }
.catalog-filters input,.catalog-filters select { width:100%; padding:9px; border:1px solid #dbe4f3; border-radius:9px; background:#f8fcfa; color:#334155; font-size:10px; }
.catalog-filters button { border:0; background:transparent; color:#2563eb; font-size:10px; padding:10px 4px; }
.catalog-toolbar { display:flex; justify-content:space-between; gap:12px; margin:18px 0; font-size:9px; color:#64748b; }
.instrument-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
.catalog-card { --card-accent:#64748b; --card-soft:#f1f5f9; min-width:0; border:1px solid #dbe4f3; border-radius:15px; padding:12px; background:#fff; text-align:left; position:relative; transition:transform 200ms,box-shadow 200ms; }
.catalog-card:hover { transform:translateY(-4px); box-shadow:0 8px 18px rgba(15,23,42,.08); }
.catalog-card .instrument-photo { display:block; width:100%; height:115px; object-fit:contain; margin:12px 0; }
.catalog-card .instrument-photo.photo-unavailable { display:grid; }
.catalog-card h3 { font-size:12px; line-height:1.3; letter-spacing:-.3px; margin:7px 0; color:#0f172a; }
.catalog-card p { font-size:8px; color:#64748b; margin:5px 0; }
.catalog-card .card-badges { justify-content:flex-start; }
.catalog-card .variant-dots { display:flex; gap:5px; margin-top:10px; }
.variant-dots span { height:7px; width:7px; border:1px solid #cbd5e1; background:#f1f5f9; border-radius:50%; }
.variant-dots span.owned.normal { background:#2563eb; border-color:#2563eb; }
.variant-dots span.owned.gold { background:#eab308; border-color:#eab308; }
.variant-dots span.owned.rainbow { background:linear-gradient(90deg,#f472b6,#818cf8,#60a5fa); border-color:#a78bfa; }
.catalog-card.is-undiscovered .instrument-photo { opacity:1; filter:grayscale(1); }
.catalog-card.is-owned { border-color:var(--card-accent); box-shadow:inset 0 3px 0 var(--card-accent); }
.catalog-pagination { display:flex; justify-content:center; align-items:center; gap:18px; margin-top:26px; }
.catalog-pagination button { padding:9px 14px; border:1px solid #dbe4f3; border-radius:10px; background:#fff; color:#1d4ed8; font-size:10px; }
.catalog-pagination span { font-size:10px; color:#64748b; }
.guide-intro { margin:15px 0 25px; }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.guide-card { padding:24px; border:1px solid #dbe4f3; border-radius:18px; background:#fff; }
.guide-card h3 { font-size:16px; margin:0 0 10px; }
.guide-card>p { font-size:11px; color:#64748b; line-height:1.8; }
.odds-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #edf3ef; }
.odds-row span { font-size:11px; display:flex; align-items:center; gap:8px; }
.odds-row strong { font-size:12px; }
.odds-row small { font-size:8px; color:#94a3b8; }
.odds-dot { height:8px; width:8px; border-radius:50%; background:var(--card-accent); }
.guide-footnote { font-size:9px!important; }
.how-to-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0; }
.how-to-grid article { padding:22px; border:1px solid #dbe4f3; border-radius:16px; }
.how-to-grid article>span { color:#2563eb; font-size:11px; font-weight:800; }
.how-to-grid h3 { font-size:13px; margin:10px 0; }
.how-to-grid p,.save-info { font-size:10px; color:#64748b; line-height:1.8; }
.save-status { text-align:center; margin:28px 0 0; font-size:9px; color:#94a3b8; }
.account-save-box { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:24px; padding:18px 20px; border:1px solid #dbe4f3; border-radius:16px; background:#fff; }
.account-save-box strong { font-size:12px; color:#1d4ed8; }
.account-save-box p { font-size:10px; color:#64748b; line-height:1.7; margin:7px 0 0; }
.account-save-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.account-save-actions button,.account-choice button { border:1px solid #b1c9ef; border-radius:10px; background:#eff6ff; color:#1d4ed8; padding:10px 12px; font-size:10px; font-weight:700; }
.account-save-actions a,.duplicate-box a { font-size:10px; color:#1d4ed8; }
.account-choice form { display:grid; gap:10px; margin-top:20px; }
.restore-browser-save { display:block; margin:12px auto 0; border:0; background:transparent; color:#1d4ed8; font:inherit; font-size:10px; text-decoration:underline; }
.game-toast { position:fixed; bottom:24px; left:50%; transform:translate(-50%,20px); padding:12px 20px; border:1px solid #dbe4f3; border-radius:13px; background:#fff; box-shadow:0 8px 30px rgba(15,23,42,.15); color:#1d4ed8; font-size:11px; z-index:1100; opacity:0; pointer-events:none; max-width:90vw; transition:opacity 200ms,transform 200ms; }
.game-toast.show { opacity:1; transform:translate(-50%,0); }
.instrument-dialog { border:1px solid #dbe4f3; border-radius:23px; padding:30px; width:min(580px,92vw); max-height:86vh; overflow:auto; color:#0f172a; background:#fff; box-shadow:0 20px 80px rgba(15,23,42,.2); }
.instrument-dialog::backdrop { background:rgba(15,23,42,.48); backdrop-filter:blur(4px); }
.dialog-close { position:absolute; top:12px; right:12px; width:30px; height:30px; border:1px solid #e2e8f0; border-radius:50%; background:#fff; color:#64748b; }
.instrument-dialog .detail-photo { width:100%; height:200px; object-fit:contain; margin:10px 0 20px; }
.instrument-dialog h2 { font-size:26px; letter-spacing:-.8px; margin:10px 0; }
.instrument-dialog p { font-size:11px; line-height:1.8; color:#64748b; }
.detail-finishes { display:grid; gap:9px; margin:18px 0; }
.detail-finish { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; padding:12px; border:1px solid #e2e8f0; border-radius:11px; }
.detail-finish strong { display:block; font-size:11px; }
.detail-finish small { display:block; font-size:9px; color:#64748b; margin-top:4px; }
.detail-finish button { font-size:9px; padding:8px 10px; border:1px solid #fde68a; border-radius:9px; background:#fffbeb; color:#92400e; }
.photo-credit { border-top:1px solid #e2e8f0; padding-top:12px; font-size:9px!important; overflow-wrap:anywhere; }
.photo-credit a { color:#2563eb; }
.celebration-canvas { position:fixed; inset:0; width:100vw; height:100vh; z-index:1000; pointer-events:none; }
.roll-stage.is-rolling .dice-button>i { animation:dice-tumble 700ms linear infinite; }
.spin-card { width:100%; height:100%; position:relative; transform-style:preserve-3d; }
.spin-card>.pull-card { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(1px); }
.spin-card>.spin-back { transform:rotateY(180deg) translateZ(1px); }
.card-scene.is-spinning .spin-card { will-change:transform,filter; }
.card-back-seal { display:grid; place-items:center; width:132px; height:132px; margin:34px auto 20px; border:2px solid #b1c9ef; border-radius:50%; color:#1d4ed8; background:repeating-linear-gradient(45deg,#eff6ff,#eff6ff 6px,#e1ecff 6px,#e1ecff 12px); box-shadow:0 0 0 10px #eff6ff; }
.card-back-seal>i { font-size:50px; }
.roll-stage[data-finish=gold] .card-back-seal { color:#a16207; border-color:#facc15; background:#fef3c7; box-shadow:0 0 0 10px #fffbeb; }
.roll-stage[data-finish=rainbow] .card-back-seal { color:#7c3aed; border-color:#c4b5fd; background:#ede9fe; box-shadow:0 0 0 10px #faf5ff; }
.roll-stage.is-rolling[data-finish=gold] .mystery-card { border-color:#d4a32a; background:#fffbeb; box-shadow:0 0 32px #facc1566,inset 0 0 0 3px #fef3c7; }
.roll-stage.is-rolling[data-finish=gold] .mystery-card::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 25%,#fff6c9aa 45%,#fff 50%,transparent 65%); background-size:220% 100%; animation:card-foil 900ms linear infinite; }
.roll-stage.is-rolling[data-finish=rainbow] .mystery-card { border-color:#a78bfa; background:linear-gradient(135deg,#ffe4e6,#fef3c7,#dbeafe,#dbeafe,#ede9fe,#ffe4e6); background-size:300% 300%; animation:rainbow-foil 1400ms linear infinite; box-shadow:0 0 38px #a78bfa88; }
.roll-stage[data-finish=gold] .card-scene.is-revealed { animation:gold-arrival 850ms cubic-bezier(.2,.8,.2,1) both; }
.roll-stage[data-finish=rainbow] .card-scene.is-revealed { animation:rainbow-arrival 1100ms cubic-bezier(.2,.8,.2,1) both; }
.card-scene.is-revealed { animation:card-arrival 650ms cubic-bezier(.2,.8,.2,1) both; }
.roll-stage.is-celebrating { animation:stage-light 1300ms ease both; }
.app.is-shaking { animation:celebration-shake 550ms ease both; }
@keyframes dice-tumble { to { transform:rotate(360deg); } }
@keyframes card-arrival { 0% { transform:translateY(12px) scale(.91); } 65% { transform:translateY(-4px) scale(1.025); } 100% { transform:none; } }
@keyframes gold-arrival { 0% { transform:scale(.85); filter:brightness(1.7); } 55% { transform:scale(1.055); filter:brightness(1.15); } 100% { transform:none; filter:none; } }
@keyframes rainbow-arrival { 0% { transform:scale(.8) rotateZ(-6deg); filter:brightness(1.5); } 40% { transform:scale(1.08) rotateZ(4deg); } 70% { transform:scale(.99) rotateZ(-1deg); } 100% { transform:none; filter:none; } }
@keyframes stage-light { 0%,100% { box-shadow:inset 0 1px 0 #fff; } 30% { box-shadow:inset 0 0 45px var(--card-soft,#dbeafe),0 0 25px var(--card-soft,#dbeafe); } }
@keyframes celebration-shake { 10%,50% { transform:translate(-4px,1px); } 20%,60% { transform:translate(4px,-2px); } 30%,70% { transform:translate(-3px,-1px); } 40%,80% { transform:translate(3px,2px); } 100% { transform:none; } }
@keyframes card-foil { 0%,20% { background-position:100% 0; } 70%,100% { background-position:-100% 0; } }
@keyframes rainbow-foil { to { background-position:300% 300%; } }
@media(min-width:1650px) { .roll-workspace { grid-template-columns:minmax(0,1fr) 340px; } .card-scene { width:270px;height:360px; } .pull-card .instrument-photo {height:195px;} }
@media(max-width:1250px) { .instrument-main {padding:24px;} .roll-workspace {grid-template-columns:minmax(0,1fr) 285px;gap:15px;} .instrument-grid {grid-template-columns:repeat(4,minmax(0,1fr));} .roll-stats>div {padding:12px;gap:8px;} .roll-stats strong {font-size:16px;} }
@media(max-width:1050px) { .app {grid-template-columns:210px minmax(0,1fr);} .roll-workspace {grid-template-columns:1fr;} .game-side {grid-template-columns:1fr 1fr;align-items:start;} .duplicate-box {grid-column:1/-1;} .header-medallion {width:105px;} .roll-stats {grid-template-columns:repeat(2,1fr);} .instrument-grid {grid-template-columns:repeat(3,minmax(0,1fr));} }
@media(max-width:800px) { .app {display:block;} .sidebar {position:relative;height:auto;} .instrument-main {padding:22px 18px;} .game-side {grid-template-columns:1fr 1fr;} .guide-grid {grid-template-columns:1fr;} }
@media(max-width:550px) { .header-medallion {display:none;} .roll-header h1 {font-size:34px;} .game-side {grid-template-columns:1fr;} .game-tabs {width:100%;} .game-tabs button {flex:1;justify-content:center;padding:10px 9px;font-size:10px;} .game-settings {margin-left:auto;} .roll-stage {padding:18px 14px;} .stage-heading {font-size:7px;} .card-scene {width:235px;height:320px;} .pull-card .instrument-photo {height:160px;} .instrument-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;} .catalog-card {padding:10px;} .catalog-toolbar>span:last-child {display:none;} .how-to-grid {grid-template-columns:1fr;} .catalog-heading {align-items:start;} .catalog-heading h2 {font-size:22px;} .collection-meter {min-width:80px;} .collection-meter progress {width:80px;} .dice-button {font-size:12px;padding:12px 15px;} .roll-stats {gap:8px;} .stat-symbol {height:30px;width:30px;font-size:13px;} .catalog-filters label {min-width:calc(50% - 10px);} .catalog-filters label:first-child {min-width:100%;} }
@media(prefers-reduced-motion:reduce) { .instrument-main *, .app.is-shaking {animation:none!important;transition:none!important;} .catalog-card:hover,.dice-button:hover:not(:disabled) {transform:none;} }

.secondary-roll-actions #buyTicket { padding:11px 15px; border:1px solid #93b9ed; border-radius:11px; background:white; color:#1d4ed8; font-size:11px; font-weight:700; }
.earn-tickets { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:16px; padding:13px; border:1px solid #93c5fd; background:#dbeafe; color:#1d4ed8; border-radius:12px; font-size:10px; font-weight:700; }
.practice-box.needs-practice { border-color:#60a5fa; box-shadow:0 0 0 3px #dbeafe; }
.practice-box.needs-practice .box-eyebrow::after { content:' · EARN COINS HERE'; }

.catalog-card .catalog-description {font-size:9px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:#64748b;margin-top:8px;}

.rainbow-overlay { position:fixed; inset:0; z-index:1050; background:#eff6ff; opacity:1; transition:opacity 450ms ease; pointer-events:none; }
.rainbow-overlay[hidden] { display:none!important; }
.rainbow-overlay.is-departing { opacity:0; }
.rainbow-overlay canvas { position:absolute; inset:0; width:100%; height:100%; }
.rainbow-reward { position:absolute; width:248px; height:334px; filter:drop-shadow(0 0 25px #c4b5fd); will-change:transform; }
.rainbow-reward .pull-card { box-shadow:0 0 0 3px #fff9,0 15px 65px #a78bfa66; }
.rainbow-caption { position:absolute; bottom:7%; left:5%; right:5%; text-align:center; color:#1e3a8a; }
.rainbow-caption span { display:block; font-size:10px; letter-spacing:3px; color:#7c3aed; margin-bottom:10px; }
.rainbow-caption strong { font-size:clamp(19px,3vw,34px); }

.upgrade-group-title { font-size:10px; color:#1e40af; margin:18px 0 0; padding:10px 0 3px; border-top:1px solid #dbeafe; }
.upgrade-group-title:first-child { margin-top:0; border-top:0; }
.upgrade-row .upgrade-requirement { color:#1d4ed8; font-weight:600; }

.upgrade-scroll { max-height:clamp(300px,60vh,520px); overflow-y:auto; overscroll-behavior-y:contain; scrollbar-width:thin; scrollbar-color:#93c5fd #eff6ff; scrollbar-gutter:stable; padding:0 8px 4px 0; border-radius:8px; }
.upgrade-scroll:focus-visible { outline:2px solid #2563eb; outline-offset:4px; }
.upgrade-scroll::-webkit-scrollbar { width:6px; }
.upgrade-scroll::-webkit-scrollbar-track { background:#eff6ff; border-radius:8px; }
.upgrade-scroll::-webkit-scrollbar-thumb { background:#93c5fd; border-radius:8px; }

/* Coin milestones use the same blue surfaces and familiar card controls. */
.achievement-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:20px; }
.achievement-heading h2 { margin:8px 0; font-size:26px; letter-spacing:-.7px; color:#0f172a; }
.achievement-heading p,.achievement-note { font-size:11px; line-height:1.7; color:#64748b; }
.achievement-summary { display:flex; justify-content:space-between; align-items:center; gap:15px; font-size:11px; font-weight:600; color:#1d4ed8; }
.achievement-summary label { display:flex; gap:8px; align-items:center; }
.achievement-summary select { background:#fff; border:1px solid #dbeafe; border-radius:9px; padding:9px; color:#334155; font-size:10px; }
.achievement-note { margin:18px 0 24px; max-width:760px; }
.achievement-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.achievement-category { grid-column:1 / -1; margin:16px 0 3px; font-size:13px; color:#1e40af; }
.achievement-category:first-child { margin-top:0; }
.achievement-card { display:grid; grid-template-columns:32px minmax(0,1fr); gap:10px; padding:18px; border:1px solid #dbe4f3; border-radius:16px; background:#fff; }
.achievement-icon { width:32px; height:32px; display:grid; place-items:center; color:#2563eb; background:#eff6ff; border-radius:10px; }
.achievement-card h4 { font-size:11px; line-height:1.5; color:#0f172a; margin:0; }
.achievement-card p { font-size:9px; line-height:1.6; color:#64748b; margin:5px 0 9px; }
.achievement-card progress { display:block; width:100%; height:5px; accent-color:#2563eb; }
.achievement-progress { display:block; font-size:9px; color:#64748b; margin-top:6px; }
.achievement-action { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:10px; padding-top:12px; border-top:1px solid #eff6ff; }
.achievement-action strong { color:#b45309; font-size:11px; }
.achievement-action button,.achievement-claim-all { background:#eff6ff; border:1px solid #bfdbfe; border-radius:9px; padding:9px 11px; color:#1d4ed8; font-size:10px; font-weight:700; }
.achievement-claim-all { white-space:nowrap; background:#2563eb; color:white; }
.achievement-card.is-ready { border-color:#93c5fd; box-shadow:0 3px 12px #2563eb0b; }
.achievement-card.is-claimed { background:#f8fbff; }
.achievement-ready { font-size:8px; border-radius:12px; background:#2563eb; color:#fff; padding:2px 5px; }
.achievement-empty { grid-column:1 / -1; padding:30px; background:#fff; border:1px dashed #bfdbfe; border-radius:14px; color:#64748b; font-size:12px; }
.auto-animation-controls[hidden] { display:none!important; }
.auto-animation-controls { position:fixed; z-index:1100; left:50%; bottom:max(16px,env(safe-area-inset-bottom)); transform:translateX(-50%); width:max-content; max-width:calc(100vw - 24px); padding:10px 14px; border:1px solid #bfdbfe; background:#ffffffee; backdrop-filter:blur(16px); border-radius:15px; box-shadow:0 6px 26px #1e3a8a1c; }
.auto-animation-controls>span { display:block; color:#5675a5; font-size:8px; letter-spacing:1px; font-weight:700; margin-bottom:7px; }
.auto-animation-controls>div { display:flex; gap:5px; }
.auto-animation-controls button { display:flex; align-items:center; gap:5px; background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; border-radius:8px; padding:7px 9px; font-size:9px; font-weight:700; }
.auto-animation-controls button small { font-size:7px; color:#64748b; }
.auto-animation-controls button[aria-pressed=false] { background:#f8fafc; border-color:#e2e8f0; color:#94a3b8; }
.auto-animation-controls .auto-stop { background:#2563eb; color:#fff; border-color:#2563eb; }
@media(max-width:1250px) { .achievement-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:640px) { .game-tabs { flex-wrap:wrap; } .game-tabs button { flex:1 1 calc(50% - 4px); } .achievement-list { grid-template-columns:1fr; } .achievement-heading { align-items:flex-start; flex-direction:column; gap:8px; } .achievement-summary { align-items:flex-start; flex-direction:column; } .auto-animation-controls { padding:8px 9px; } .auto-animation-controls button { font-size:8px; padding:7px 6px; gap:3px; } }

.tradition-tags { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.tradition-tags:empty { display:none; }
.tradition-tag { display:inline-flex; align-items:center; font-size:8px; line-height:1.3; font-weight:600; border:1px solid #c7d8f5; border-radius:5px; color:#34568b; background:#f1f6ff; padding:3px 5px; }
.tradition-tags.is-compact { justify-content:center; margin:5px 0 0; }
.tradition-tags.is-compact .tradition-tag { font-size:6px; padding:2px 4px; }
.pull-card:not(.mystery-card) { display:flex; flex-direction:column; }
.pull-card:not(.mystery-card)>.instrument-photo { flex:1 1 auto; min-height:0; }
.pull-card:not(.mystery-card)>.card-topline,.pull-card:not(.mystery-card)>.pull-name,.pull-card:not(.mystery-card)>.pull-family,.pull-card:not(.mystery-card)>.card-badges,.pull-card:not(.mystery-card)>.tradition-tags { flex-shrink:0; }
.pull-card:not(.mystery-card)>.card-footerline { position:static; flex-shrink:0; padding-top:8px; }
.catalog-card .tradition-tags { justify-content:center; }
.finish-galactic .tradition-tag { background:#172554; color:#bfdbfe; border-color:#334f80; }
.instrument-dialog .tradition-note { font-size:9px; }

/* Rare Coins keep a distinct red identity inside the site's blue interface. */
.roll-stats .rare-symbol { background:#fee2e2; color:#dc2626; }
.roll-stats .rare-wallet strong { color:#b91c1c; }
.rare-coin-reward[hidden] { display:none!important; }
.rare-coin-reward { display:inline-flex; gap:7px; align-items:center; margin:0 0 12px; border:1px solid #fecaca; border-radius:20px; padding:8px 13px; background:#fef2f2; color:#b91c1c; font-size:12px; font-weight:700; }
.rare-coin-reward.has-effects { animation:rare-coin-drop 600ms cubic-bezier(.2,.8,.25,1); }
@keyframes rare-coin-drop { from { opacity:0; transform:translateY(12px) scale(.8); } 65% { transform:translateY(-3px) scale(1.04); } to { opacity:1; transform:none; } }
.rare-coin-rules { font-size:12px; line-height:1.8; color:#64748b; margin:18px 0; }
.shop-panel .upgrade-box { padding:0; background:transparent; border:0; }
.shop-panel .game-section-heading h2 { font-size:25px; }
.shop-panel .box-description { font-size:12px; margin-bottom:22px; }
.upgrade-shop-content { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.shop-panel #upgradeList { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; grid-column:1 / -1; }
.shop-panel .upgrade-group-title { grid-column:1 / -1; font-size:14px; margin:12px 0 0; }
.shop-panel .upgrade-group-title:first-child { margin-top:0; }
.shop-panel .upgrade-row { grid-template-columns:36px minmax(0,1fr); align-items:start; gap:10px; padding:18px; border:1px solid #dbe4f3; border-radius:15px; background:#fff; }
.shop-panel .upgrade-icon { width:36px; height:36px; border-radius:11px; }
.shop-panel .upgrade-row strong { font-size:14px; }
.shop-panel .upgrade-row p { font-size:11px; line-height:1.7; margin:7px 0; }
.shop-panel .upgrade-row span { font-size:10px; }
.shop-panel .upgrade-row button { grid-column:2; justify-self:start; font-size:11px; padding:9px 12px; }
.shop-panel .upgrade-row button.cost-rare { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.shop-panel .auto-upgrade { margin:0; padding:18px; border-radius:15px; }
.shop-panel .auto-upgrade strong { font-size:14px; }
.shop-panel .auto-upgrade p { font-size:11px; }
.game-navigation { flex-wrap:wrap; }
@media(min-width:1650px) { .shop-panel #upgradeList { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1050px) { .roll-stats>div:last-child { grid-column:1 / -1; } }
@media(max-width:640px) { .shop-panel #upgradeList,.upgrade-shop-content { grid-template-columns:1fr; } .shop-panel .upgrade-row { padding:16px; } .game-tabs button:last-child { flex-basis:100%; } }
@media(prefers-reduced-motion:reduce) { .rare-coin-reward.has-effects { animation:none; } }

.rare-coin-burst { position:fixed; inset:0; z-index:1080; pointer-events:none; overflow:hidden; }
.rare-flying-coin { position:absolute; top:0; left:0; width:40px; height:40px; perspective:500px; will-change:transform,opacity; filter:drop-shadow(0 3px 5px #7f1d1d55); }
.rare-coin-face { position:relative; display:grid; place-items:center; width:40px; height:40px; box-sizing:border-box; border-radius:50%; border:3px solid #fca5a5; background:radial-gradient(circle at 30% 20%,#fff1f2 0%,#fb7185 22%,#dc2626 57%,#991b1b 100%); color:#fff1f2; box-shadow:inset 0 0 0 2px #b91c1c,inset 0 0 0 4px #fda4af99,2px 2px 0 #7f1d1d,3px 3px 0 #991b1b; will-change:transform; }
.rare-coin-face::before { content:''; position:absolute; inset:5px; border:1px dashed #ffe4e6aa; border-radius:50%; }
.rare-coin-face::after { content:''; position:absolute; inset:0; border-radius:50%; background:linear-gradient(120deg,transparent 25%,#ffffff66 38%,transparent 52%); }
.rare-coin-face i { font-size:15px; text-shadow:0 1px 2px #7f1d1d; }
.rare-coin-flight-trail { position:absolute; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#fb7185; box-shadow:0 0 8px #fda4af; will-change:transform,opacity; }
.rare-coin-burst-ring { position:absolute; width:80px; height:80px; border:2px solid #fb7185; border-radius:50%; animation:rare-coin-ring 600ms ease-out both; }
@keyframes rare-coin-ring { from { transform:translate(-50%,-50%) scale(.2); opacity:.8; } to { transform:translate(-50%,-50%) scale(2.7); opacity:0; } }
@media(prefers-reduced-motion:reduce) { .rare-coin-burst-ring { animation:none; } }

.pack-summary[hidden] { display:none!important; }
.pack-summary { width:max-content; max-width:100%; margin:0 auto 16px; padding:7px 14px; border:1px solid #bfdbfe; border-radius:20px; background:#fff; color:#1d4ed8; font-size:11px; font-weight:700; }
.finish-sacrifices { margin:0 0 28px; padding:0 0 24px; border-bottom:1px solid #dbe4f3; }
.finish-sacrifices h2 { font-size:25px; color:#0f172a; }
.sacrifice-paths { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sacrifice-path { padding:22px; border:1px solid #dbe4f3; border-radius:16px; background:#fff; }
.sacrifice-path-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; color:#b45309; background:#fef3c7; }
.path-rainbow .sacrifice-path-icon { color:#7c3aed; background:#ede9fe; }
.path-galactic .sacrifice-path-icon { color:#1d4ed8; background:#dbeafe; }
.sacrifice-path h3 { margin:13px 0 7px; font-size:16px; color:#0f172a; }
.sacrifice-path p { font-size:11px; line-height:1.7; color:#64748b; }
.sacrifice-path .sacrifice-chance { color:#1d4ed8; font-weight:600; }
.sacrifice-level { color:#64748b; font-size:10px; }
.sacrifice-path button,.sacrifice-select-cheapest { border:1px solid #bfdbfe; border-radius:9px; padding:9px 12px; background:#eff6ff; color:#1d4ed8; font:inherit; font-size:11px; font-weight:600; }
.sacrifice-dialog { width:min(670px,94vw); padding:28px; }
.sacrifice-boost { margin:15px 0; padding:13px; border-radius:10px; background:#eff6ff; color:#1d4ed8; font-size:12px; line-height:1.7; font-weight:600; }
.sacrifice-card-list { display:grid; gap:8px; margin:16px 0; max-height:32vh; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; scrollbar-width:thin; }
.sacrifice-card-option { display:grid; grid-template-columns:48px minmax(0,1fr) 66px; align-items:center; gap:12px; padding:10px; border:1px solid #dbe4f3; border-radius:10px; background:#fff; }
.sacrifice-card-option .instrument-photo { width:48px; height:54px; object-fit:contain; background:#f8fafc; border-radius:6px; }
.sacrifice-card-copy strong { display:block; font-size:12px; color:#0f172a; }
.sacrifice-card-copy small { display:block; margin-top:5px; font-size:9px; color:#64748b; }
.sacrifice-card-option input { width:100%; box-sizing:border-box; border:1px solid #bfdbfe; border-radius:7px; padding:9px 6px; color:#1d4ed8; background:#eff6ff; font:inherit; font-size:12px; }
.sacrifice-card-option input:invalid { border-color:#dc2626; }
.sacrifice-review { padding-top:15px; border-top:1px solid #dbe4f3; }
.sacrifice-review strong { font-size:13px; color:#0f172a; }
.sacrifice-review #confirmSacrifice { width:100%; padding:12px; border:1px solid #dc2626; border-radius:10px; color:#fff; background:#dc2626; font:inherit; font-size:12px; font-weight:700; }
.sacrifice-review #confirmSacrifice:disabled { background:#fef2f2; color:#a96363; border-color:#fecaca; cursor:default; }
.extra-odds-guide { padding:14px 18px; border:1px solid #dbe4f3; border-radius:12px; background:#fff; }
.extra-odds-guide summary { color:#1d4ed8; font-size:12px; font-weight:600; cursor:pointer; }
.extra-odds-guide #extraCardOdds { margin-top:15px; }
@media(max-width:1100px) { .sacrifice-paths { grid-template-columns:1fr; } }
@media(max-width:550px) { .sacrifice-dialog { padding:23px 16px; } .sacrifice-card-option { gap:8px; grid-template-columns:38px minmax(0,1fr) 57px; } .sacrifice-card-option .instrument-photo { width:38px; } .sacrifice-card-copy strong { font-size:11px; } }

.sacrifice-path .sacrifice-unlock { color:#b91c1c; background:#fef2f2; border-color:#fecaca; }
.shop-upgrades-heading { grid-column:1 / -1; margin:0; font-size:22px; color:#0f172a; }

.achievement-action strong.achievement-rare-reward { color:#b91c1c; background:#fef2f2; border-radius:7px; padding:5px 8px; }

/* Connected upgrade paths: the site's blue palette, with red currency accents. */
.tree-intro,.quest-board-heading {display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;}
.tree-intro h2,.quest-board-heading h2 {font-size:28px;color:#1e3a8a;margin:8px 0;}
.tree-intro p,.quest-board-heading p {font-size:12px;color:#64748b;line-height:1.8;margin:0;}
.tree-intro-icon {display:grid;place-items:center;width:64px;height:64px;border:1px solid #bfdbfe;border-radius:20px;background:#eff6ff;color:#2563eb;font-size:25px;flex-shrink:0;}
.tree-legend {display:flex;flex-wrap:wrap;gap:12px 20px;padding:13px 17px;border:1px solid #dbeafe;background:#fff;border-radius:12px;color:#64748b;font-size:10px;}
.tree-legend i {color:#2563eb;margin-right:5px;}.tree-legend .tree-rare-legend,.tree-rare-legend i {color:#b91c1c;}
.tree-hint {color:#64748b;font-size:11px;line-height:1.8;margin:12px 0;}
.upgrade-tree-viewport {max-height:70vh;min-height:380px;overflow:auto;overscroll-behavior:contain;border:1px solid #c7d8f5;border-radius:20px;background:#f5f9ff;padding:24px;scrollbar-width:thin;scrollbar-color:#93b4ed #eff6ff;}
.upgrade-tree-viewport:focus-visible {outline:2px solid #2563eb;outline-offset:3px;}
.shop-panel #upgradeList.upgrade-tree-canvas {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start;}
.upgrade-tree-branch {min-width:0;}
.upgrade-branch-heading {display:flex;align-items:center;gap:11px;padding:14px 17px;border:1px solid #bfdbfe;border-radius:14px;background:#eaf2ff;color:#1e40af;}
.upgrade-branch-heading>i {font-size:20px;}.upgrade-branch-heading span {font-size:8px;letter-spacing:1px;text-transform:uppercase;color:#5072ac;}.upgrade-branch-heading h3 {font-size:14px;margin:3px 0 0;}
.upgrade-tree-roots,.upgrade-tree-children {list-style:none;margin:0;padding:0;}
.upgrade-tree-roots {padding-top:18px;}
.upgrade-tree-item {position:relative;margin:0 0 16px;min-width:0;}
.upgrade-tree-children {margin:0 0 0 18px;padding:18px 0 0 22px;border-left:2px solid #bfd3f4;}
.upgrade-tree-children>.upgrade-tree-item::before {content:'';position:absolute;left:-24px;top:34px;width:24px;height:2px;background:#bfd3f4;}
.upgrade-tree-children>.upgrade-tree-item:last-child {margin-bottom:0;}
.upgrade-tree-node {position:relative;padding:16px;border:1px solid #bfdbfe;border-radius:14px;background:#fff;box-shadow:0 4px 12px #1e3a8a06;transition:border-color .2s,box-shadow .2s;min-width:0;}
.upgrade-tree-node:hover {border-color:#7ca5ea;box-shadow:0 6px 18px #1e3a8a0c;}
.upgrade-tree-node.is-owned {border-left:4px solid #2563eb;}.upgrade-tree-node.is-maxed {border-left:4px solid #1e40af;background:#f0f6ff;}.upgrade-tree-node.is-locked {border-style:dashed;background:#f8fafc;}
.upgrade-tree-heading {display:flex;gap:10px;align-items:center;}.upgrade-tree-icon {display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#eff6ff;color:#2563eb;flex-shrink:0;font-size:15px;}
.upgrade-tree-heading h4 {margin:0;color:#153877;font-size:12px;line-height:1.6;}.upgrade-tree-heading small {font-size:9px;color:#64748b;}
.upgrade-tree-progress {display:block;width:100%;height:4px;accent-color:#2563eb;margin:12px 0;}
.upgrade-tree-details {margin:0 0 12px;font-size:10px;color:#64748b;}.upgrade-tree-details summary {cursor:pointer;color:#345b96;padding:3px 0;}.upgrade-tree-details p {font-size:10px;line-height:1.8;margin:8px 0;}
.upgrade-tree-node>button,.quest-card button {border:1px solid #bfdbfe;background:#eff6ff;color:#1d4ed8;border-radius:9px;padding:9px 12px;font:inherit;font-size:10px;font-weight:700;cursor:pointer;}
.upgrade-tree-node>button:disabled,.quest-card button:disabled {opacity:.55;cursor:default;}.upgrade-tree-node>button.cost-rare {color:#b91c1c;background:#fef2f2;border-color:#fecaca;}
.upgrade-tree-node .upgrade-requirement {color:#64748b;font-size:10px;line-height:1.7;}
.shop-panel .auto-upgrade.upgrade-tree-node {display:block;margin:0;}.auto-upgrade.upgrade-tree-node button {margin-top:10px;}
#treeSpecialNodes:empty {display:none;}.finish-sacrifices {margin-top:28px;}
.quest-reset {display:flex;align-items:center;gap:12px;padding:14px 20px;border:1px solid #bfdbfe;border-radius:15px;background:#eff6ff;color:#2563eb;flex-shrink:0;}.quest-reset>i {font-size:23px;}.quest-reset span {font-size:9px;color:#64748b;}.quest-reset strong {display:block;color:#1e40af;font-size:20px;letter-spacing:1px;font-variant-numeric:tabular-nums;margin-top:3px;}
.quest-board-note {font-size:11px;color:#64748b;line-height:1.9;max-width:820px;margin:0 0 24px;}
.quest-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}.quest-card {padding:24px;border:1px solid #bfdbfe;border-radius:18px;background:#fff;box-shadow:0 5px 16px #1e3a8a05;}.quest-card-heading {display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px;}.quest-symbol {display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#eff6ff;color:#2563eb;font-size:18px;}.quest-difficulty {font-size:9px;color:#1d4ed8;background:#eff6ff;border-radius:20px;padding:5px 9px;}.quest-card h3 {font-size:16px;color:#153877;margin:0 0 10px;}.quest-card p {font-size:11px;color:#64748b;line-height:1.8;min-height:40px;margin:0 0 20px;}.quest-card progress {display:block;width:100%;height:6px;accent-color:#2563eb;}.quest-card>small {display:block;font-size:10px;color:#64748b;margin:9px 0 20px;}.quest-card-footer {display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid #eff6ff;}.quest-card-footer strong {font-size:12px;color:#b45309;}.quest-hard {border-color:#fecaca;}.quest-hard .quest-symbol,.quest-hard .quest-difficulty {background:#fef2f2;color:#b91c1c;}.quest-hard .quest-card-footer strong {color:#b91c1c;}.quest-hard progress {accent-color:#dc2626;}.quest-card.is-claimed {background:#f8fbff;}
@media(min-width:1650px){.shop-panel #upgradeList.upgrade-tree-canvas {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:800px){.quest-list {grid-template-columns:1fr;}.shop-panel #upgradeList.upgrade-tree-canvas {grid-template-columns:1fr;}.upgrade-tree-viewport {padding:16px;max-height:65vh;}.tree-intro h2,.quest-board-heading h2 {font-size:23px;}.quest-board-heading {align-items:flex-start;flex-wrap:wrap;}.quest-reset {padding:10px 14px;}.quest-card {padding:20px;}.upgrade-tree-children {margin-left:10px;padding-left:16px;}.upgrade-tree-children>.upgrade-tree-item::before {left:-18px;width:18px;}.game-tabs {flex-wrap:wrap;}}
@media(prefers-reduced-motion:reduce){.upgrade-tree-node {transition:none;}}

/* Hexagonal nodes arranged in staggered musical paths. */
.shop-panel #upgradeList.upgrade-tree-canvas {display:flex;flex-direction:column;gap:32px;min-width:760px;}
.upgrade-tree-branch {padding:0 8px 22px;border-bottom:1px solid #dbeafe;}.upgrade-tree-branch:last-child {border-bottom:0;}
.upgrade-branch-heading {width:fit-content;margin:0 auto 24px;min-width:260px;justify-content:center;background:#edf4ff;}
.upgrade-tree-roots {display:flex;justify-content:center;align-items:flex-start;gap:32px;padding-top:0;}
.upgrade-tree-item {display:flex;flex-direction:column;align-items:center;flex-shrink:0;margin:0;}
.upgrade-tree-roots>.upgrade-tree-item:nth-child(even) {margin-top:40px;}
.upgrade-tree-children {position:relative;display:flex;align-items:flex-start;justify-content:center;gap:18px;padding:24px 8px 0;margin:22px 0 0;border-left:0;border-top:2px solid #aac5ef;}
.upgrade-tree-children::before {content:'';position:absolute;top:-24px;left:50%;height:24px;width:2px;background:#aac5ef;}
.upgrade-tree-children>.upgrade-tree-item::before {left:50%;top:-24px;width:2px;height:24px;background:#aac5ef;}
.upgrade-tree-children>.upgrade-tree-item:nth-child(even) {margin-top:28px;}.upgrade-tree-children>.upgrade-tree-item:nth-child(even)::before {top:-52px;height:52px;}
.upgrade-tree-node,.shop-panel .auto-upgrade.upgrade-tree-node {width:154px;height:178px;box-sizing:border-box;padding:3px;border:0;border-radius:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#a9c8f4;box-shadow:none;filter:drop-shadow(0 5px 5px #1e3a8a18);transition:background .2s;flex-shrink:0;}
.upgrade-tree-node.is-owned {border:0;background:#2563eb;}.upgrade-tree-node.is-maxed {border:0;background:#1e40af;}.upgrade-tree-node.is-locked {border:0;background:#cbd5e1;}
.upgrade-tree-node:hover {border:0;background:#477ed9;box-shadow:none;}
.upgrade-tree-node>button.upgrade-hex-trigger {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:100%;height:100%;clip-path:inherit;border-radius:0;border:0;background:#fff;padding:22px 14px;cursor:pointer;white-space:normal;color:#1e3a8a;}
.upgrade-tree-node.is-owned>button.upgrade-hex-trigger {background:#eaf2ff;}.upgrade-tree-node.is-maxed>button.upgrade-hex-trigger {background:#dbeafe;}.upgrade-tree-node.is-locked>button.upgrade-hex-trigger {background:#f1f5f9;color:#64748b;}
.upgrade-hex-icon {display:grid;place-items:center;font-size:26px;color:#2563eb;height:34px;}.is-locked .upgrade-hex-icon {color:#94a3b8;}
.upgrade-hex-name {font-size:11px;font-weight:700;line-height:1.4;text-align:center;}.upgrade-hex-level {font-size:9px;color:#64748b;font-weight:600;}.upgrade-hex-price {font-size:9px;color:#1d4ed8;font-weight:700;line-height:1.4;}.upgrade-hex-price.is-rare {color:#b91c1c;}.upgrade-busking-status {display:none;}
.upgrade-tree-node>button.upgrade-hex-trigger:focus-visible {outline:0;background:#dbeafe;box-shadow:inset 0 0 0 5px #2563eb;}
.shop-panel .auto-upgrade.upgrade-tree-node {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#dbeafe;text-align:center;padding:25px 16px;}
.auto-upgrade.upgrade-tree-node::before {content:'';position:absolute;inset:3px;clip-path:inherit;background:#eff6ff;z-index:-1;}.auto-upgrade.upgrade-tree-node.is-owned {background:#2563eb;}.auto-upgrade.upgrade-tree-node strong {display:flex;flex-direction:column;gap:8px;font-size:11px;color:#1e3a8a;}.auto-upgrade.upgrade-tree-node strong i {font-size:25px;color:#2563eb;}.auto-upgrade.upgrade-tree-node p {display:none;}.auto-upgrade.upgrade-tree-node button {font-size:9px!important;padding:5px!important;margin:0!important;white-space:normal;background:transparent!important;border:0!important;color:#1d4ed8!important;}
.upgrade-detail-dialog {width:min(440px,90vw);box-sizing:border-box;border:1px solid #bfdbfe;border-radius:22px;padding:32px;color:#153877;background:#fff;box-shadow:0 24px 80px #1e3a8a33;max-height:85vh;overflow:auto;}.upgrade-detail-dialog::backdrop {background:#0f172a66;backdrop-filter:blur(4px);}.upgrade-detail-dialog h2 {font-size:23px;margin:12px 0;}.upgrade-detail-dialog p {font-size:12px;line-height:1.9;color:#64748b;}.upgrade-detail-level {font-weight:700;color:#2563eb!important;}.upgrade-detail-close {position:absolute;right:14px;top:12px;border:0;border-radius:50%;background:#eff6ff;color:#2563eb;width:30px;height:30px;cursor:pointer;}.upgrade-detail-buy {border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1d4ed8;font:inherit;font-size:12px;font-weight:700;padding:12px 16px;margin-top:10px;cursor:pointer;}.upgrade-detail-buy.cost-rare {background:#fef2f2;border-color:#fecaca;color:#b91c1c;}.upgrade-detail-buy:disabled {opacity:.55;cursor:default;}
@media(max-width:800px){.shop-panel #upgradeList.upgrade-tree-canvas {min-width:700px;}.upgrade-tree-roots {gap:22px;}.upgrade-tree-node,.shop-panel .auto-upgrade.upgrade-tree-node {width:140px;height:162px;}.upgrade-tree-children {gap:12px;}.upgrade-tree-viewport {min-height:360px;}.tree-hint::after {content:' Swipe sideways to explore the paths.';color:#2563eb;}}

/* One central map: pan and zoom rather than scroll. */
.upgrade-tree-viewport {position:relative;overflow:hidden;touch-action:none;padding:0;height:680px;min-height:420px;max-height:75vh;cursor:grab;background:#f3f8ff;}
.upgrade-tree-viewport.is-panning {cursor:grabbing;}.upgrade-tree-viewport button {cursor:pointer;}
.shop-panel #upgradeList.upgrade-tree-canvas {position:absolute;left:0;top:0;display:block;width:3800px;height:3800px;min-width:0;transform-origin:0 0;will-change:transform;}
.upgrade-tree-canvas>.upgrade-tree-node,.upgrade-tree-canvas>.auto-upgrade.upgrade-tree-node {position:absolute;transform:translate(-50%,-50%);width:174px;height:200px;margin:0;}
.upgrade-map-wires {overflow:visible;position:absolute;inset:0;width:3800px;height:3800px;pointer-events:none;}.upgrade-map-wires path {fill:none;stroke:#bccde7;stroke-width:5;stroke-linecap:round;}.upgrade-map-wires path.is-active {stroke:#6094e6;}
.upgrade-map-hub {position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;width:192px;height:218px;background:#2563eb;color:#fff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:inset 0 0 0 6px #bfdbfe;}.upgrade-map-hub i {font-size:42px;}.upgrade-map-hub strong {font-size:20px;}.upgrade-map-hub span {font-size:8px;letter-spacing:1px;}
.upgrade-map-toolbar {display:flex;justify-content:space-between;align-items:center;gap:15px;padding:12px 0;font-size:10px;color:#5072ac;}.upgrade-map-toolbar>span {letter-spacing:1px;font-weight:700;}.upgrade-map-toolbar>div {display:flex;align-items:center;gap:6px;}.upgrade-map-toolbar button {border:1px solid #bfdbfe;border-radius:9px;padding:9px 12px;background:#fff;color:#2563eb;font:inherit;font-weight:700;cursor:pointer;}.upgrade-map-toolbar output {min-width:42px;text-align:center;font-variant-numeric:tabular-nums;}
.upgrade-map-tooltip {position:absolute;z-index:5;width:260px;max-width:calc(100% - 24px);box-sizing:border-box;padding:15px 17px;border:1px solid #bfdbfe;border-radius:13px;background:#fff;color:#1e3a8a;box-shadow:0 10px 35px #1e3a8a22;pointer-events:none;cursor:default;}.upgrade-map-tooltip[hidden] {display:none;}.upgrade-map-tooltip strong {font-size:12px;}.upgrade-map-tooltip p {font-size:11px;line-height:1.8;color:#64748b;margin:7px 0 0;}
@media(max-width:800px){.upgrade-tree-viewport {height:540px;min-height:360px;max-height:70vh;padding:0;}.shop-panel #upgradeList.upgrade-tree-canvas {min-width:0;}.tree-hint::after {content:'';}.upgrade-map-toolbar {flex-wrap:wrap;}.upgrade-map-toolbar button {padding:8px 10px;}}

.upgrade-tree-canvas .upgrade-hex-icon {font-size:46px;height:50px;}.upgrade-tree-canvas .upgrade-hex-name {font-size:17px;line-height:1.3;}.upgrade-tree-canvas .upgrade-hex-level {font-size:12px;}.upgrade-tree-canvas .upgrade-hex-price {font-size:12px;}.upgrade-tree-canvas .upgrade-tree-node>button.upgrade-hex-trigger {gap:6px;padding:19px 15px;}.upgrade-tree-canvas .auto-upgrade.upgrade-tree-node strong {font-size:17px;}.upgrade-tree-canvas .auto-upgrade.upgrade-tree-node strong i {font-size:44px;}.upgrade-tree-canvas .auto-upgrade.upgrade-tree-node button {font-size:12px!important;}

.bulk-ticket-actions {display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:9px 0 0;}.bulk-ticket-actions button {font:inherit;font-size:9px;font-weight:600;padding:6px 10px;border:1px solid #bfdbfe;border-radius:8px;color:#1d4ed8;background:#eff6ff;cursor:pointer;}.bulk-ticket-actions button:hover:not(:disabled) {background:#dbeafe;}.bulk-ticket-actions button:disabled {opacity:.5;cursor:default;}.bulk-ticket-actions button:focus-visible {outline:2px solid #2563eb;outline-offset:2px;}

/* Compact purchase controls, matching the game palette. */
.bulk-ticket-panel{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:12px auto;padding:10px 14px;border:1px solid #dbeafe;border-radius:14px;background:#ffffffb3;box-shadow:0 2px 6px #1d4ed805;}
.bulk-ticket-label{font-size:10px;font-weight:600;color:#64748b;display:flex;align-items:center;gap:6px;margin:0;}
.bulk-ticket-label i{color:#2563eb;font-size:11px;}
.bulk-ticket-panel .bulk-ticket-actions{margin:0;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;}
.multi-roll-controls{display:flex;align-items:center;justify-content:center;gap:5px;margin:12px auto;font-size:10px;color:#64748b;}
.multi-roll-controls>span{margin-right:7px;font-weight:600;}
.multi-roll-controls button,.batch-preview-controls button,.batch-preview-controls select{font:inherit;border:1px solid #dbeafe;background:#fff;color:#1d4ed8;border-radius:9px;padding:7px 11px;cursor:pointer;transition:background .2s,box-shadow .2s;}
.multi-roll-controls button{min-width:32px;font-size:11px;font-weight:700;}
.multi-roll-controls button[aria-pressed=true]{background:#2563eb;color:white;border-color:#2563eb;box-shadow:0 3px 8px #2563eb26;}
.multi-roll-controls button:disabled{opacity:.4;cursor:not-allowed;}
.batch-preview-controls{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;margin:12px auto;font-size:10px;}
.batch-preview-controls small{font-size:9px;color:#64748b;flex-basis:100%;}
.batch-preview-controls select{max-width:160px;}
.multi-pack-overlay{position:fixed;inset:0;z-index:10010;background:radial-gradient(ellipse at 50% 35%,#eff6ff,#dbeafe 65%,#bfdbfe);}
.multi-pack-lanes{height:100%;display:flex;align-items:stretch;justify-content:center;max-width:1200px;margin:auto;}
.multi-pack-lane.pack-opening{position:relative;inset:auto;flex:1;min-width:0;background:transparent;z-index:auto;overflow:hidden;}
.multi-pack-lane .pack-opening-header{font-size:10px;}
.multi-pack-lane .pack-opening-caption{font-size:10px;max-width:100%;padding:0 6px;}
.multi-pack-lane .pack-opening-caption strong{font-size:13px;}
.batch-results{width:100%!important;height:auto!important;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;perspective:1200px;}
.batch-results .pull-card{width:200px;height:320px;flex:0 0 200px;}
.batch-card-status{font-size:8px;font-weight:700;letter-spacing:1px;color:var(--card-accent);text-align:center;padding-top:5px;}
.rainbow-reward.is-batch .pull-card,.galaxy-reward.is-batch .pull-card{position:absolute;inset:0;width:100%;height:100%;}
.galaxy-reward.is-batch .pull-card{transform:translateX(calc(var(--batch-offset)*185px)) rotateZ(calc(var(--batch-offset)*5deg));transition:transform .8s cubic-bezier(.16,.85,.25,1.15);}
@media(max-width:600px){.bulk-ticket-panel{gap:8px;padding:9px 10px;}.batch-results .pull-card{width:160px;height:290px;flex-basis:160px;}.multi-pack-lane .pack-opening-header{display:none;}.multi-pack-lane .pack-opening-caption strong{font-size:10px;}.multi-pack-lane .pack-opening-caption p,.multi-pack-lane .pack-opening-steps{display:none;}.has-batch .rainbow-reward,.has-batch .galaxy-reward{width:130px;height:220px;}.galaxy-reward.is-batch .pull-card{transform:translateX(calc(var(--batch-offset)*112px)) rotateZ(calc(var(--batch-offset)*5deg));}.has-batch .pull-card{padding:9px;}.has-batch .pull-name{font-size:14px;}.has-batch .tradition-tags{display:none;}}

/* One collectible card face is shared by the catalog and every reveal. */
.trading-card{border:3px solid var(--card-accent);border-radius:16px;padding:12px;background:linear-gradient(155deg,#fff 35%,var(--card-soft));box-shadow:inset 0 0 0 2px #ffffffdb,inset 0 0 0 5px var(--card-soft),0 8px 18px #0f172a14,0 3px 0 var(--card-accent);}
.trading-card:before{content:'';position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--card-accent) 25%,transparent);border-radius:9px;pointer-events:none;}
.trading-card .card-topline{font-size:7px;letter-spacing:1.5px;padding:1px 1px 8px;border-bottom:1px solid color-mix(in srgb,var(--card-accent) 20%,transparent);}
.trading-card .instrument-photo{border:1px solid #dbe4f3;border-radius:7px;padding:8px;background:#fff;box-shadow:inset 0 2px 8px #1e3a8a08;margin:8px 0 10px;}
.trading-card .pull-name{font-size:19px;font-weight:800;letter-spacing:-.6px;text-align:left;margin:0 0 4px;}
.trading-card .pull-family{font-size:9px;text-align:left;margin:0 0 7px;color:#64748b;}
.trading-card .card-badges{display:flex;justify-content:flex-start;gap:5px;margin:0 0 5px;}
.trading-card .tradition-tags{justify-content:flex-start;gap:3px;}
.trading-card .card-footerline{font-size:6px;letter-spacing:.8px;border-top:1px solid #dbe4f3;margin-top:7px;padding-top:7px;}
.trading-card.finish-gold{border-color:#cba447;background:linear-gradient(140deg,#fffdf5,#fff 45%,#fef3c7);box-shadow:inset 0 0 0 2px #fff7d6,0 8px 20px #a1620720,0 3px 0 #a16207;}
.trading-card.finish-rainbow{border-color:#a78bfa;background:linear-gradient(145deg,#fff,#faf5ff 70%,#e0f2fe);}
.trading-card.finish-galactic{background:linear-gradient(155deg,#172554,#0f172a);border-color:#93c5fd;}
.trading-card.finish-galactic .pull-family{color:#bfdbfe;}
.catalog-card{padding:0;border:0!important;background:transparent;box-shadow:none!important;overflow:visible;border-radius:16px;}
.catalog-card .catalog-card-face{width:100%;height:100%;min-height:355px;padding:11px;transform-style:flat;}
.catalog-card .instrument-photo{height:130px!important;flex:0 0 130px!important;margin:9px 0!important;}
.catalog-card .pull-name{font-size:14px;margin:0 0 4px;color:#0f172a;}
.catalog-card .card-topline{font-size:6px;}
.catalog-card .trading-card-description{font-size:9px;color:#64748b;line-height:1.6;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.catalog-card .card-footerline{margin-top:auto;font-size:5px;}
.catalog-card .variant-dots{margin-top:7px;}
.catalog-card.is-undiscovered .catalog-card-face{filter:grayscale(1);--card-accent:#94a3b8!important;--card-soft:#f1f5f9!important;background:linear-gradient(145deg,#fff,#f1f5f9);}
.catalog-card.is-undiscovered .finish-badge{color:#64748b;background:#e2e8f0;}
.catalog-card.is-owned:hover .catalog-card-face{box-shadow:inset 0 0 0 2px #fff,0 12px 24px #1d4ed820,0 3px 0 var(--card-accent);}
.catalog-card .finish-galactic .pull-name{color:#eff6ff;}.catalog-card .finish-galactic .trading-card-description{color:#bfdbfe;}
.catalog-card:focus-visible{outline:3px solid #2563eb;outline-offset:5px;}
@media(prefers-reduced-motion:reduce){.catalog-card:hover{transform:none;}.finish-gold::after,.finish-rainbow::after{animation:none;}}

/* A matching-finish encore rewards tickets, without covering the collection UI afterward. */
.finish-jackpot-overlay{position:fixed;inset:0;z-index:11010;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#eff6fff0,#dbeafed9);backdrop-filter:blur(8px);pointer-events:none;animation:jackpot-scene 2.6s ease both;}
.finish-jackpot-content{position:relative;z-index:2;text-align:center;padding:30px;max-width:90vw;color:#1e3a8a;animation:jackpot-content .7s cubic-bezier(.16,.85,.25,1.2) both;}
.jackpot-eyebrow{font-size:9px;font-weight:700;letter-spacing:2px;}
.jackpot-seal{width:86px;height:86px;display:grid;place-items:center;margin:20px auto;border:2px solid #fde68a;border-radius:26px;background:linear-gradient(145deg,#fff7d6,#fbbf24);color:#92400e;font-size:36px;box-shadow:0 0 70px #facc1577,inset 0 2px 0 #fff;transform:rotate(-7deg);}
.finish-jackpot-content h2{font-size:clamp(28px,5vw,52px);letter-spacing:-1.5px;margin:15px 0 8px;font-weight:800;}
.finish-jackpot-content p{font-size:12px;color:#64748b;}
.jackpot-ticket-prize{display:inline-block;margin-top:18px;background:#fff;border:1px solid #bfdbfe;border-radius:16px;padding:12px 24px;font-size:24px;color:#2563eb;box-shadow:0 8px 20px #2563eb18;}
.jackpot-flying-ticket{position:absolute;left:50%;top:45%;font-size:20px;color:#eab308;animation:jackpot-ticket 2s var(--delay) cubic-bezier(.12,.6,.3,1) both;}
.jackpot-rainbow{background:radial-gradient(ellipse,#faf5fff5,#e0f2fed9);}.jackpot-rainbow .jackpot-seal{background:linear-gradient(135deg,#fda4af,#fde68a,#a7f3d0,#93c5fd,#c4b5fd);border-color:#c4b5fd;}
.jackpot-galactic{background:radial-gradient(ellipse,#172554f2,#020617eb);}.jackpot-galactic .finish-jackpot-content,.jackpot-galactic .finish-jackpot-content p{color:#e0f2fe;}.jackpot-galactic .jackpot-seal{background:linear-gradient(145deg,#1e3a8a,#6366f1);border-color:#93c5fd;color:#e0f2fe;box-shadow:0 0 70px #818cf177;}.jackpot-galactic .jackpot-flying-ticket{color:#a5b4fc;}
.celebration-canvas{z-index:11020;}
@keyframes jackpot-scene{0%{opacity:0;}12%,86%{opacity:1;}100%{opacity:0;}}
@keyframes jackpot-content{from{opacity:0;transform:translateY(25px) scale(.85);}to{opacity:1;transform:none;}}
@keyframes jackpot-ticket{0%{opacity:0;transform:translate(-50%,-50%) scale(.1);}15%{opacity:1;}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--distance)) rotate(220deg) scale(.65);}}
.sealed-pack{padding:0!important;border-radius:10px!important;border:2px solid #bfdbfe!important;overflow:hidden;}
.sealed-pack .pack-body{inset:0;border-radius:8px;}.sealed-pack .pack-brand{top:14%;font-size:clamp(12px,2vw,20px);}.sealed-pack .pack-edition{top:31%;font-size:6px;}.sealed-pack .pack-title{top:68%;font-size:clamp(14px,2vw,22px);}.sealed-pack .pack-detail{bottom:10%;font-size:6px;}.sealed-pack .pack-brand span{font-size:5px;}.sealed-pack .pack-tear-strip{height:9%;font-size:5px;}
.sealed-pack.finish-rainbow .pack-body,.pack-opening[data-finish=rainbow] .pack-body{background:linear-gradient(130deg,#fb7185,#fbbf24,#4ade80,#38bdf8,#a78bfa);}
.sealed-pack.finish-rainbow .pack-artwork,.pack-opening[data-finish=rainbow] .pack-artwork{opacity:.5;mix-blend-mode:luminosity;}
.sealed-pack.finish-galactic .pack-body,.pack-opening[data-finish=galactic] .pack-body{background:radial-gradient(ellipse at 40% 20%,#4338ca,#0f172a 80%);}
.sealed-pack.finish-galactic .pack-artwork,.pack-opening[data-finish=galactic] .pack-artwork{opacity:.6;filter:brightness(.7) saturate(.6);}
.pack-opening[data-finish=rainbow] .pack-tear-strip{background:linear-gradient(90deg,#fb7185,#fbbf24,#4ade80,#38bdf8,#a78bfa);}
.pack-opening[data-finish=galactic] .pack-tear-strip{background:linear-gradient(90deg,#1e3a8a,#c4b5fd,#312e81);}
.multi-pack-overlay.finish-rainbow{background:radial-gradient(ellipse at 50% 40%,#fff,#faf5ff 60%,#e0f2fe);}.multi-pack-overlay.finish-galactic{background:radial-gradient(ellipse at 50% 40%,#1e3a8a,#0f172a 80%);}
.multi-pack-overlay.finish-galactic .pack-opening-header strong,.multi-pack-overlay.finish-galactic .pack-opening-caption strong{color:#e0f2fe;}
@media(prefers-reduced-motion:reduce){.finish-jackpot-overlay,.finish-jackpot-content,.jackpot-flying-ticket{animation:none;}}

.sealed-pack.finish-galactic .pack-body:before,.pack-opening[data-finish=galactic] .pack-body:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(circle at 16% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 83% 43%,#bfdbfe 0 1px,transparent 2px),radial-gradient(circle at 68% 13%,#fff 0 1.5px,transparent 3px),radial-gradient(circle at 28% 67%,#c4b5fd 0 1px,transparent 2px),radial-gradient(circle at 87% 81%,#fff 0 1px,transparent 2px),radial-gradient(ellipse at 72% 25%,#a78bfa44,transparent 45%);}
.sealed-pack.finish-galactic .pack-brand,.sealed-pack.finish-galactic .pack-title,.sealed-pack.finish-galactic .pack-edition,.pack-opening[data-finish=galactic] .pack-brand,.pack-opening[data-finish=galactic] .pack-title,.pack-opening[data-finish=galactic] .pack-edition{z-index:2;color:#e0f2fe;}

.mystery-card.finish-gold{background:repeating-linear-gradient(45deg,#ffffff15 0 1px,transparent 1px 13px),radial-gradient(ellipse at 32% 20%,#b58631,#52360f 75%);color:#fff0bf;border-color:#eaca7d;}
.mystery-card.finish-rainbow{background:repeating-linear-gradient(45deg,#ffffff24 0 1px,transparent 1px 13px),linear-gradient(135deg,#fb7185,#fbbf24,#4ade80,#38bdf8,#818cf8,#c084fc);color:#fff;border-color:#ddd6fe;}
.mystery-card.finish-galactic{background:radial-gradient(circle at 15% 21%,#fff 0 1px,transparent 2px),radial-gradient(circle at 80% 43%,#bfdbfe 0 1px,transparent 2px),radial-gradient(circle at 70% 14%,#fff 0 1.5px,transparent 3px),radial-gradient(ellipse at 72% 25%,#7c3aed77,transparent 55%),linear-gradient(145deg,#172554,#020617);border-color:#93c5fd;color:#e0f2fe;}
.mystery-card.finish-gold .card-topline,.mystery-card.finish-rainbow .card-topline,.mystery-card.finish-galactic .card-topline{color:inherit;}
.mystery-card.finish-gold .card-back-seal,.mystery-card.finish-rainbow .card-back-seal,.mystery-card.finish-galactic .card-back-seal{color:inherit;}

/* The detail view enlarges the collectible face and keeps information alongside it. */
.instrument-dialog{width:min(820px,94vw);padding:40px 28px 28px;background:linear-gradient(145deg,#fff,#f8fbff);}
#instrumentDetails{display:grid;grid-template-columns:minmax(240px,320px) minmax(220px,1fr);gap:30px;align-items:center;}
.detail-card-display{width:100%;height:470px;perspective:1200px;}
.detail-card-display .pull-card{width:100%;height:100%;padding:18px;border-width:4px;box-shadow:inset 0 0 0 2px #ffffffdb,0 16px 32px #1e3a8a18,0 4px 0 var(--card-accent);}
.detail-card-display .card-topline{font-size:9px;letter-spacing:2px;}.detail-card-display .instrument-photo{padding:12px;min-height:110px;}
.instrument-dialog .detail-card-display .pull-name{font-size:25px;margin:0 0 6px;line-height:1.2;}.instrument-dialog .detail-card-display .pull-family{font-size:11px;margin:0 0 8px;}
.collection-card-face .trading-card-description{font-size:10px;line-height:1.6;color:#64748b;margin:6px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-shrink:0;}
.detail-card-display .card-footerline{font-size:7px;margin-top:8px;}.detail-card-display .variant-dots{display:flex;gap:6px;margin-top:8px;}
.detail-card-display.is-undiscovered .pull-card{filter:grayscale(1);--card-accent:#94a3b8!important;--card-soft:#f1f5f9!important;}
.detail-card-sidebar{text-align:left;min-width:0;}.detail-eyebrow{font-size:8px;font-weight:700;letter-spacing:1.4px;color:#6483b0;}.instrument-dialog .detail-card-sidebar h2{font-size:25px;line-height:1.25;margin:10px 0 5px;}.instrument-dialog .detail-variant-name{margin:0 0 20px;}
.detail-odds-panel{padding:16px;border:1px solid #dbeafe;border-radius:15px;background:#eff6ff;}.detail-odds-panel .detail-chance{display:block;font-size:30px;letter-spacing:-1px;line-height:1.4;color:#1d4ed8;margin:5px 0;}.detail-odds-panel small{font-size:9px;color:#6483b0;}.instrument-dialog .detail-any-chance{font-size:10px;margin:8px 0 0;}
.detail-owned-heading{font-size:12px;color:#1e3a8a;margin:20px 0 10px;}.detail-finish-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}.detail-finish-choice{display:flex;flex-direction:column;align-items:flex-start;gap:5px;border:1px solid #dbeafe;border-radius:12px;padding:10px;background:#fff;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .2s;}.detail-finish-choice small{font-size:8px;color:#64748b;}.detail-finish-choice[aria-pressed=true]{border-color:#2563eb;background:#eff6ff;box-shadow:0 0 0 2px #2563eb12;}.detail-finish-choice:focus-visible{outline:2px solid #2563eb;outline-offset:2px;}
.detail-sell-button{width:100%;margin:18px 0 8px;border:1px solid #bfdbfe;border-radius:11px;padding:11px;font-size:10px;font-weight:700;background:#2563eb;color:#fff;cursor:pointer;}.detail-sell-button:disabled{color:#64748b;background:#f1f5f9;border-color:#e2e8f0;cursor:default;}
.detail-photo-credits{margin-top:14px;font-size:9px;color:#64748b;}.detail-photo-credits summary{cursor:pointer;}.instrument-dialog .detail-photo-credits .photo-credit{font-size:9px;line-height:1.7;}.detail-card-display .finish-galactic .trading-card-description{color:#bfdbfe;}
@media(max-width:640px){.instrument-dialog{padding:40px 18px 24px;}#instrumentDetails{grid-template-columns:1fr;gap:24px;}.detail-card-display{width:min(300px,100%);height:440px;margin:auto;}.detail-card-sidebar{width:100%;}.detail-finish-choices{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* Center the card itself; its information lives in a separate box to the left. */
.instrument-dialog{width:min(1120px,96vw);padding:46px 24px 28px;background:#f4f8ff;}
#instrumentDetails{grid-template-columns:minmax(210px,1fr) minmax(280px,330px) minmax(210px,1fr);gap:24px;align-items:center;}
.detail-card-display{grid-column:2;grid-row:1;height:462px;width:330px;max-width:100%;justify-self:center;}
.detail-card-sidebar{grid-column:1;grid-row:1;border:1px solid #dbeafe;border-radius:18px;background:#fff;padding:20px;box-shadow:0 6px 20px #1e3a8a06;}
.detail-card-display .card-topline{font-size:10px;letter-spacing:1.7px;padding-bottom:10px;}
.instrument-dialog .detail-card-display .pull-name{font-size:28px;font-weight:800;line-height:1.12;margin-bottom:7px;}
.instrument-dialog .detail-card-display .pull-family{font-size:13px;line-height:1.4;margin-bottom:8px;}
.detail-card-display .rarity-badge,.detail-card-display .finish-badge{font-size:11px;padding:5px 8px;}
.detail-card-display .trading-card-description{font-size:12px;line-height:1.55;}
.detail-card-display .tradition-tag{font-size:9px;}
.detail-card-display .card-footerline{font-size:8px;letter-spacing:.7px;}
.catalog-card .pull-name{font-size:17px;line-height:1.2;}.catalog-card .pull-family{font-size:10px;}.catalog-card .trading-card-description{font-size:10px;}.catalog-card .catalog-card-face{min-height:375px;}
@media(max-width:950px){#instrumentDetails{grid-template-columns:minmax(200px,1fr) minmax(250px,320px);gap:20px;}.instrument-dialog{width:min(740px,96vw);}.detail-card-display{width:320px;height:448px;}}
@media(max-width:640px){.instrument-dialog{padding:44px 16px 22px;}#instrumentDetails{grid-template-columns:1fr;gap:24px;}.detail-card-display{grid-column:1;grid-row:1;width:min(320px,100%);height:448px;}.detail-card-sidebar{grid-column:1;grid-row:2;padding:18px;}.instrument-dialog .detail-card-display .pull-name{font-size:26px;}}

.detail-card-display .tradition-tags.is-compact .tradition-tag{font-size:9px;padding:3px 5px;}

.card-rare-drop-badge{position:absolute;top:42px;right:9px;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700;padding:5px 7px;border:1px solid #fecaca;border-radius:8px;color:#b91c1c;background:#fff1f2;box-shadow:0 2px 6px #b91c1c15;z-index:2;}

/* Keep collectible cards uniform while making every description readable. */
.catalog-card .trading-card-description,
.collection-card-face .trading-card-description,
.catalog-card .catalog-description {
  display:block;
  -webkit-line-clamp:unset;
  -webkit-box-orient:initial;
  white-space:normal;
  overflow-wrap:anywhere;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
}
.catalog-card .catalog-card-face { height:430px; min-height:430px; }
.catalog-card .trading-card-description { font-size:12px; line-height:1.6; height:77px; flex:0 0 77px; }
.detail-card-display .trading-card-description { font-size:14px; line-height:1.65; height:93px; flex:0 0 93px; }

/* Vintage: woven papyrus, letterpress ink and worn archive edges. */
.finish-vintage { --paper-ink:#674421; --paper-fiber:repeating-linear-gradient(2deg,#7c51260a 0 1px,transparent 1px 4px),repeating-linear-gradient(91deg,#fff8df30 0 1px,#7c51260b 1px 2px,transparent 2px 7px); }
.trading-card.finish-vintage {border-color:#a78350;background:var(--paper-fiber),radial-gradient(ellipse at 20% 10%,#fff7d9,transparent 55%),linear-gradient(140deg,#dfc699,#f6e9c8 48%,#ceb082);box-shadow:inset 0 0 0 2px #f7eac8,inset 0 0 22px #875b2438,0 8px 18px #61431b20,0 3px 0 #806039;}
.trading-card.finish-vintage:before {border-color:#8c653f66;border-style:double;border-width:3px;border-radius:7px;}
.trading-card.finish-vintage .card-topline,.trading-card.finish-vintage .card-footerline {color:#785630;border-color:#9a754a66;}
.trading-card.finish-vintage .pull-name {font-family:Georgia,'Times New Roman',serif;color:#50371f;letter-spacing:-.4px;}
.trading-card.finish-vintage .pull-family,.trading-card.finish-vintage .trading-card-description {color:#644b30;}
.trading-card.finish-vintage .instrument-photo {background:#fffaf0;border-color:#b59a74;box-shadow:inset 0 0 10px #b3916240;}
.finish-vintage .finish-badge,.finish-badge.vintage {color:#694520;background:#ead6ac;border:1px solid #b69462;}
.variant-dots .vintage.owned {background:#b08a56;box-shadow:0 0 0 1px #826035;}
.mystery-card.finish-vintage,.pack-opening[data-finish=vintage] .pack-card-back {background:repeating-linear-gradient(3deg,#78532a0e 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,#fff3ca40 0 1px,transparent 1px 6px),radial-gradient(ellipse,#f4e7c4,#c6a271);border-color:#a78350;color:#6a4826;box-shadow:inset 0 0 0 5px #d7ba8b,inset 0 0 0 6px #8c653f88,inset 0 0 30px #79522555,0 10px 22px #60402022;}
.mystery-card.finish-vintage .card-topline,.mystery-card.finish-vintage .card-back-seal {color:inherit;}
.pack-opening[data-finish=vintage] {background:radial-gradient(ellipse at 50% 38%,#fffbec,#f1e4cb 60%,#d9c5a5);color:#694520;}
.pack-opening[data-finish=vintage]:before {content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(2deg,#79522506 0 1px,transparent 1px 5px);box-shadow:inset 0 0 140px #79522528;}
.pack-opening[data-finish=vintage] .pack-body {background:repeating-linear-gradient(2deg,#79522512 0 1px,transparent 1px 4px),repeating-linear-gradient(91deg,#fff7df30 0 1px,transparent 1px 5px),linear-gradient(130deg,#d1b181,#f7ebcd 40%,#d7b98b);box-shadow:inset 0 0 28px #81552b50,inset 3px 0 2px #fff0c7;}
.pack-opening[data-finish=vintage] .pack-artwork {filter:grayscale(1) sepia(1);mix-blend-mode:multiply;opacity:.22;}
.pack-opening[data-finish=vintage] .pack-brand,.pack-opening[data-finish=vintage] .pack-title {color:#5d3e20;text-shadow:0 1px #fff1d0;font-family:Georgia,'Times New Roman',serif;}
.pack-opening[data-finish=vintage] .pack-edition,.pack-opening[data-finish=vintage] .pack-detail,.pack-opening[data-finish=vintage] .pack-serial {color:#765630;}
.pack-opening[data-finish=vintage] .pack-tear-strip {background:repeating-linear-gradient(90deg,#845f3422 0 1px,transparent 1px 5px),#dfc69c;color:#71522d;border-color:#8a653f;box-shadow:inset 0 2px #fff0c6;}
.pack-opening[data-finish=vintage] .pack-foil-light {opacity:.12;mix-blend-mode:soft-light;}
.pack-opening[data-finish=vintage] .pack-opening-header strong,.pack-opening[data-finish=vintage] .pack-opening-caption strong {color:#694520;}
.pack-opening[data-finish=vintage] .pack-opening-header span,.pack-opening[data-finish=vintage] .pack-opening-caption>span,.pack-opening[data-finish=vintage] .pack-opening-steps span {color:#98754b;}
.vintage-wax-seal {position:absolute;left:50%;top:50%;width:72px;height:72px;display:grid;place-items:center;z-index:9;border-radius:47% 53% 44% 56% / 55% 44% 56% 45%;background:radial-gradient(circle at 35% 25%,#c77548,#954225 55%,#6d301e);border:3px solid #b6653b;box-shadow:inset 0 0 0 3px #75341f,inset 0 0 0 4px #d29161,0 5px 9px #40200f55;color:#e4ad7b;font-size:44px;text-shadow:0 2px #582817;transform:translate(-50%,-50%);}
.vintage-archive-stamp {position:absolute;bottom:80px;right:18px;transform:rotate(-13deg);padding:6px;border:2px double #866344;opacity:.6;color:#775331;font:9px Georgia,serif;letter-spacing:2px;}
.vintage-paper-wings {position:absolute;inset:40px 0 0;z-index:6;pointer-events:none;perspective:1000px;--unfold:0;}
.vintage-paper-wing {position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(3deg,#79522515 0 1px,transparent 1px 4px),linear-gradient(90deg,#c7a471,#f1dfb8);border:1px solid #a78555;backface-visibility:hidden;box-shadow:inset 0 0 18px #80603930;}
.vintage-paper-wing.left {left:0;transform-origin:left;transform:rotateY(calc(var(--unfold)*-115deg));}
.vintage-paper-wing.right {right:0;transform-origin:right;transform:rotateY(calc(var(--unfold)*115deg));}
.pack-opening[data-finish=vintage] .pack-particles {z-index:8;}
.pack-opening[data-finish=vintage] .vintage-dust {width:3px;height:6px;background:#b48c56;border-radius:1px;animation:none;}
.pack-opening[data-finish=vintage] .pack-reveal-glow {background:radial-gradient(ellipse,#f3d99788,transparent 65%);}
.pack-opening[data-finish=vintage] .pack-back-orbit {border-color:#896b43;box-shadow:0 0 0 8px #896b4308,0 0 0 9px #896b4344;}
.pack-opening[data-finish=vintage] .pack-back-brand,.pack-opening[data-finish=vintage] .pack-back-label,.pack-opening[data-finish=vintage] .pack-back-footer {color:#7b5c37;}
/* Keep the warm Vintage palette inside cards; shared navigation stays blue. */

.pack-opening[data-finish=vintage] .pack-back-mark {color:#87643e;text-shadow:0 1px #fff0cf;}
.jackpot-vintage{background:radial-gradient(ellipse,#fff9e9f5,#dbc6a4e6);}.jackpot-vintage .jackpot-seal{background:linear-gradient(145deg,#efdfba,#b89360);border-color:#ab824e;color:#654622;}

.vintage-paper-wings {opacity:0;}
.vintage-wax-seal:after {content:'';position:absolute;inset:5px 26px;background:#452215;clip-path:polygon(40% 0,70% 0,48% 28%,86% 46%,30% 70%,60% 100%,30% 100%,0 70%,52% 46%,15% 28%);opacity:var(--crack,0);transform:scaleX(calc(1 + var(--crack,0)*2));}

/* Antique printed card stock: rubbed ink, foxing and muted photographs. */
.trading-card.finish-vintage{border-color:#897957;background:radial-gradient(ellipse at 8% 18%,#88734545,transparent 20%),radial-gradient(ellipse at 95% 85%,#856a3740,transparent 23%),repeating-linear-gradient(2deg,#70603312 0 1px,transparent 1px 4px),linear-gradient(125deg,#beb38d,#e3dcbb 44%,#c4b891);box-shadow:inset 0 0 0 2px #d8cdab,inset 0 0 24px #64522255,0 8px 18px #61431b20,0 3px 0 #786847;}
.trading-card.finish-vintage:before{border-color:#6a674580;border-width:4px;opacity:.72;}
.trading-card.finish-vintage:after{content:'';position:absolute;inset:7px;pointer-events:none;z-index:3;border-radius:7px;background:radial-gradient(ellipse at 16% 30%,#e4dcb74d 0,transparent 14%),radial-gradient(ellipse at 82% 65%,#e4dcb755 0,transparent 17%),repeating-linear-gradient(172deg,transparent 0 37px,#ebe2bd33 38px 39px,transparent 40px 69px);box-shadow:inset 0 0 12px #66562b33;}
.trading-card.finish-vintage .pull-name{color:#62523d;text-shadow:1px 0 #d4c8a977;}
.trading-card.finish-vintage .instrument-photo{filter:sepia(.58) saturate(.48) contrast(.85);opacity:.88;background:#dcd3b6;border-color:#8e8161;border-radius:3px;}
.trading-card.finish-vintage .card-topline,.trading-card.finish-vintage .card-footerline{color:#72654b;opacity:.8;}
.pack-opening.is-archive-scene{background:#17120b;perspective:1600px;}
.pack-opening.is-archive-scene:before{display:none;}
.archive-desk{position:absolute;inset:0;background:radial-gradient(ellipse at 47% 43%,#d3a85855,transparent 51%),repeating-linear-gradient(0deg,#1b100a66 0 2px,transparent 2px 150px),repeating-linear-gradient(2deg,#c8954820 0 1px,transparent 1px 7px),repeating-linear-gradient(179deg,#180c0830 0 2px,transparent 2px 21px),linear-gradient(100deg,#34200f,#80562d 45%,#3b2514);box-shadow:inset 0 0 180px 75px #080603d9;transition:filter .1s linear;}
.archive-lamp-light{position:absolute;inset:0;background:radial-gradient(ellipse at 43% 36%,#ffdf8d38,transparent 55%),linear-gradient(135deg,#ffd67b15,transparent 60%);pointer-events:none;}
.archive-stage{position:absolute;width:600px;height:480px;left:50%;top:48%;transform:translate(-50%,-50%) scale(var(--archive-scale,1));perspective:1600px;}
.archive-folder{position:absolute;width:290px;height:375px;left:265px;top:55px;transform-style:preserve-3d;}
.archive-folder-inside,.archive-folder-cover{position:absolute;inset:0;border:1px solid #9c8458;border-radius:3px 8px 7px 3px;background:repeating-linear-gradient(1deg,#735c2f0f 0 1px,transparent 1px 4px),linear-gradient(115deg,#c6b081,#e1cc9f 55%,#b99d6e);box-shadow:inset 0 0 28px #72572644,0 14px 20px #160b0770;}
.archive-folder-cover{transform-origin:0 50%;transform-style:preserve-3d;z-index:4;backface-visibility:visible;}
.archive-folder-cover:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 90% 8%,#68562e44,transparent 23%),radial-gradient(ellipse at 14% 96%,#6b563d44,transparent 28%);pointer-events:none;}
.archive-tab{position:absolute;top:-20px;left:0;background:#c5aa7b;border:1px solid #987d53;border-bottom:0;border-radius:5px 5px 0 0;padding:5px 16px;font:9px Georgia,serif;letter-spacing:1px;color:#665333;}
.archive-label{position:absolute;top:70px;left:28px;font:32px Georgia,serif;color:#594a32;}
.archive-subtitle{position:absolute;top:111px;left:30px;font:italic 12px Georgia,serif;color:#7b6747;}
.archive-stamped{position:absolute;top:180px;left:43px;transform:rotate(-13deg);border:4px double #87472b;padding:9px 17px;font:bold 29px Georgia,serif;letter-spacing:3px;color:#87472b;opacity:.65;}
.archive-number{position:absolute;bottom:48px;left:30px;font:11px 'Courier New',monospace;color:#7c694c;}
.archive-rule{position:absolute;bottom:78px;left:30px;right:30px;border-top:1px solid #8b7650;}
.archive-manuscript{position:absolute;bottom:20px;left:20px;color:#87714a;opacity:.3;font:23px Georgia,serif;}
.archive-card-holder{position:absolute;left:24px;top:20px;width:242px;height:334px;perspective:1200px;transform-style:preserve-3d;}
.archive-card-rotor{width:100%;height:100%;position:relative;transform-style:preserve-3d;}
.archive-card-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;}
.archive-card-front{transform:rotateY(180deg);}
.archive-card-front .pull-card{width:100%;height:100%;box-sizing:border-box;}
.archive-card-back{background:repeating-linear-gradient(2deg,#785d3312 0 1px,transparent 1px 4px),radial-gradient(ellipse,#dad2ac,#b1a379);border:4px double #777554;box-shadow:inset 0 0 0 5px #d3c6a1,inset 0 0 0 7px #8d684a,inset 0 0 30px #64522f55;color:#77543b;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:27px;}
.archive-card-back:before{content:'';position:absolute;inset:17px;border:2px double #92584477;background:repeating-linear-gradient(45deg,#755f3b0b 0 1px,transparent 1px 9px);border-radius:40%;}
.archive-back-brand{font:13px Georgia,serif;letter-spacing:2px;}
.archive-back-ornament{font:85px Georgia,serif;color:#835a44;opacity:.7;}
.archive-back-edition{font:7px Georgia,serif;letter-spacing:2px;}
.archive-caption{position:absolute;bottom:5%;left:15px;right:15px;text-align:center;font:italic 16px Georgia,serif;color:#dfc491;text-shadow:0 2px 4px #000;}
.archive-desk-sheet{position:absolute;left:10%;top:15%;width:230px;height:310px;padding:22px;transform:rotate(-18deg);background:#cdbd92;color:#675534;font:11px Georgia,serif;box-shadow:0 3px 8px #0006;opacity:.6;}
.archive-sheet-staves{margin-top:40px;height:140px;background:repeating-linear-gradient(0deg,transparent 0 9px,#71614066 9px 10px);font-size:27px;line-height:60px;}
.archive-fountain-pen{position:absolute;right:14%;top:26%;width:12px;height:210px;border-radius:7px;background:linear-gradient(90deg,#20130b,#665539 45%,#1b140d);transform:rotate(24deg);box-shadow:4px 3px 5px #0008;}
.archive-fountain-pen:before{content:'';position:absolute;bottom:-22px;left:1px;width:10px;height:27px;background:#bba16a;clip-path:polygon(0 0,100% 0,50% 100%);}
.archive-coffee-ring{position:absolute;right:15%;bottom:15%;width:105px;height:105px;border:5px double #25120766;border-radius:50%;transform:rotateX(18deg);}
@media(max-width:650px){.archive-desk-sheet{left:-100px;}.archive-fountain-pen{right:5%;}.archive-coffee-ring{right:-35px;}.archive-caption{font-size:13px;}}

.find-multi-roll{display:block;margin:9px auto 0;padding:8px 12px;border:1px solid #bfdbfe;border-radius:10px;background:#eff6ff;color:#1d4ed8;font:inherit;font-size:10px;cursor:pointer;}.find-multi-roll:hover{background:#dbeafe;}.find-multi-roll:focus-visible{outline:2px solid #2563eb;outline-offset:3px;}

.residue-wallet{display:flex;align-items:center;gap:9px;}.residue-wallet p{margin:0;}.residue-wallet p>span{display:block;font-size:9px;color:#947339;}.residue-wallet strong{font-size:17px;color:#946817;}.residue-symbol{color:#a77920;background:#fef3c7;}

.dust-icon{width:22px;height:22px;}.upgrade-hex-price.is-residue{color:#facc15;background:#59420c;border-radius:5px;padding:2px 4px;}.upgrade-detail-buy.cost-residue{color:#fef08a;background:#765513;border-color:#c69c35;}

.residue-animation{position:fixed;inset:0;z-index:12000;pointer-events:none;background:radial-gradient(ellipse,#fff9e92b,transparent 70%);}
.residue-animation-card{position:absolute;left:50%;top:46%;width:230px;height:340px;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 22px #59420c33);}
.residue-animation-card .pull-card{width:100%;height:100%;box-sizing:border-box;}
.residue-animation canvas{position:absolute;inset:0;}
.residue-animation-label{position:absolute;top:calc(46% + 205px);left:0;right:0;text-align:center;font-size:18px;font-weight:700;color:#986914;text-shadow:0 1px #fff;}
.residue-preview{margin:8px 0;padding:7px 10px;border:1px solid #e3c784;border-radius:8px;background:#fff8dc;color:#946817;font:inherit;font-size:10px;cursor:pointer;}

.residue-animation{background:none;}
.residue-coat{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;border-radius:inherit;}
.residue-coat i{position:absolute;background:radial-gradient(ellipse,#d8ad42 25%,#b38b2ad9 55%,transparent 74%);border-radius:43%;box-shadow:inset 0 0 8px #ffe39e88;opacity:.9;}
.residue-coat i:after{content:'';position:absolute;inset:0;background:repeating-radial-gradient(circle at 30% 30%,#ffe5a4aa 0 1px,#986d2044 1px 2px,transparent 2px 4px);border-radius:inherit;}

.quest-card.quest-hard{border-color:#e7c774;background:linear-gradient(145deg,#fffdf4,#fff8df);}
.quest-hard .quest-symbol{color:#a77920;background:#fef3c7;}
.quest-hard .quest-difficulty,.quest-hard .quest-card-footer strong{color:#946817;}
.quest-hard progress{accent-color:#d4a52c;}

.quest-hard .quest-difficulty{background:#fef3c7;color:#946817;}


/* The reflection crosses once, disappears, then resets fully off the card. */
.trading-card.finish-gold::after{inset:-30% -90%;background:linear-gradient(110deg,transparent 36%,#fef3c710 42%,#fff9dc42 47%,#ffffff70 50%,#fff9dc42 53%,#fef3c726 57%,transparent 64%);background-size:100% 100%;transform:translateX(-65%);opacity:0;animation:gold-card-reflection 5s linear infinite;will-change:transform,opacity;}
@keyframes gold-card-reflection{0%,12%{transform:translateX(-65%);opacity:0}18%{opacity:.65}58%{opacity:.65}66%{transform:translateX(65%);opacity:0}100%{transform:translateX(65%);opacity:0}}
@media(prefers-reduced-motion:reduce){.trading-card.finish-gold::after{animation:none;opacity:0;will-change:auto}}

/* Shared card proportions; popup fronts match rolled cards. */
.card-scene{width:280px;height:392px;max-width:100%;}
.instrument-dialog .detail-card-display{width:300px;height:420px;max-width:100%;}
.instrument-dialog .detail-card-display .instrument-photo{height:195px!important;min-height:195px!important;max-height:195px!important;flex:0 0 195px!important;padding:3px;box-sizing:border-box;object-fit:contain;}
.instrument-dialog .detail-card-display .pull-card{padding:12px;}
.instrument-dialog .detail-card-display .pull-name{font-size:24px;}
.instrument-dialog .detail-card-display .pull-family{font-size:11px;}
.detail-pull-stats{border:1px solid #bfdbfe;background:#eff6ff;border-radius:12px;padding:12px;margin-top:12px;color:#1e40af;font-size:13px;}.detail-pull-stats small{display:block;color:#64748b;font-size:10px;line-height:1.6;margin-top:5px;}
@keyframes card-preview-turn{from{opacity:.4;transform:rotateY(-15deg)}to{opacity:1;transform:rotateY(0)}}
@media(prefers-reduced-motion:reduce){.card-preview-front,.card-preview-back{animation:none}}
@media(max-width:550px){.card-scene{width:250px;height:350px;}.instrument-dialog .detail-card-display{width:300px;height:420px;}}

.card-preview-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;width:100%;height:420px;}
.card-preview-pair>.card-preview-front,.card-preview-pair>.card-preview-back{position:relative;min-width:0;height:100%;}
.card-preview-pair .pull-card,.card-preview-pair .pack-card-face,.card-preview-pair .archive-card-face{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;border-radius:16px;}
.card-preview-pair .pack-card-back[data-finish=masterpiece]{background:#182538 url('/assets/roll-instrument/images/masterpiece-holographic-foil.jpg?v=shards-3') center/cover;color:#e0f2fe;border-color:#d8efff;}
.masterpiece-back-stamp{position:absolute;left:50%;top:53%;transform:translate(-50%,-50%) rotate(-12deg);border:4px double #d8efff;background:#12243ee8;color:#e0f2fe;border-radius:10px;padding:14px 8px;font-size:18px;font-weight:900;letter-spacing:1px;text-align:center;}
.masterpiece-back-stamp small{display:block;font-size:8px;letter-spacing:3px;margin-top:7px;}
.instrument-dialog .detail-card-display{grid-column:2 / 4;width:100%;height:420px;margin-bottom:0;}
#instrumentDetails{grid-template-columns:minmax(210px,1fr) minmax(260px,300px) minmax(260px,300px);}
@media(max-width:950px){#instrumentDetails{grid-template-columns:1fr}.instrument-dialog .detail-card-display{grid-column:1;grid-row:1;max-width:618px;}.detail-card-sidebar{grid-column:1;grid-row:2;width:100%;}}
@media(max-width:640px){.card-preview-pair{gap:10px;height:350px;}.instrument-dialog .detail-card-display{height:350px;}.instrument-dialog .detail-card-display .instrument-photo{height:150px!important;min-height:150px!important;max-height:150px!important;flex:0 0 150px!important;}.instrument-dialog .detail-card-display .pull-name{font-size:18px;}.instrument-dialog .detail-card-display .pull-card{padding:8px;}.card-preview-pair .pack-back-brand{font-size:7px;letter-spacing:1px}.card-preview-pair .pack-back-orbit{width:100px;height:100px}.masterpiece-back-stamp{font-size:12px;padding:9px 5px;}}

/* Rainbow foil covers only the card; its geometry never moves or scales. */
.finish-rainbow::after{content:none;animation:none;}
.trading-card.finish-rainbow::after,.mystery-card.finish-rainbow::after{content:"";position:absolute;inset:0;width:auto;height:auto;border-radius:inherit;clip-path:inset(0 round 14px);pointer-events:none;background:linear-gradient(115deg,#fb7185,#fbbf24,#a3e635,#22d3ee,#818cf8,#e879f9);background-size:100% 100%;background-position:center;mix-blend-mode:multiply;opacity:.19;transform:none;animation:rainbow-overlay-colors 9s linear infinite;}
@keyframes rainbow-overlay-colors{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.trading-card.finish-rainbow::after,.mystery-card.finish-rainbow::after{animation:none;}}
.trading-card.finish-rainbow{animation:rainbow-card-colors 9s ease-in-out infinite;background:linear-gradient(145deg,#fff,#faf5ff 70%,#e0f2fe);}
@keyframes rainbow-card-colors{0%,100%{border-color:#a78bfa;background-color:#f5f3ff;box-shadow:inset 0 0 28px #a78bfa20,0 8px 18px #8b5cf614,0 3px 0 #a78bfa}25%{border-color:#f9a8d4;background-color:#fdf2f8;box-shadow:inset 0 0 28px #f9a8d420,0 8px 18px #ec489914,0 3px 0 #f9a8d4}50%{border-color:#fcd34d;background-color:#fffbeb;box-shadow:inset 0 0 28px #fcd34d20,0 8px 18px #f59e0b14,0 3px 0 #fcd34d}75%{border-color:#67e8f9;background-color:#ecfeff;box-shadow:inset 0 0 28px #67e8f920,0 8px 18px #06b6d414,0 3px 0 #67e8f9}}
.pack-card-back[data-finish=masterpiece]{background:#182538 url('/assets/roll-instrument/images/masterpiece-holographic-foil.jpg?v=shards-3') center/cover;border-color:#d8efff;}
.pack-opening[data-finish=masterpiece]:not(.is-pack-revealed) .masterpiece-back-stamp{visibility:hidden;}
@media(prefers-reduced-motion:reduce){.trading-card.finish-rainbow{animation:none;}}

.earned-pack-shelf{display:flex;flex-direction:column;align-items:center;gap:7px;margin:15px auto;padding:13px 18px;width:fit-content;max-width:100%;background:#fff8dd;border:1px solid #e7cc79;border-radius:13px}.earned-pack-shelf[hidden]{display:none}.earned-pack-shelf button{border:0;border-radius:9px;background:#255de0;color:#fff;padding:11px 17px;font-size:12px;font-weight:800;cursor:pointer}.earned-pack-shelf button:disabled{opacity:.5}.earned-pack-shelf small{font-size:9px;color:#69572e}

.account-required{position:fixed;inset:0;z-index:10000;background:#edf4fff2;display:grid;place-items:center;padding:24px}.account-required[hidden]{display:none}.account-required section{max-width:440px;padding:32px;border:1px solid #bdd2fa;border-radius:24px;background:#fff;text-align:center;color:#173979;box-shadow:0 18px 50px #2455a51a}.account-required p{font-size:14px;line-height:1.6}.account-required a,.account-required button{display:inline-block;margin:8px;padding:12px 18px;border:1px solid #b5ccf8;border-radius:12px;background:#edf4ff;color:#2455bd;font:inherit;font-size:14px;text-decoration:none;cursor:pointer}

#gameMoreLabel{position:relative}.more-reward-counts{position:absolute;top:-13px;left:50%;transform:translateX(-50%);display:flex;gap:4px;white-space:nowrap;pointer-events:none}.more-reward-count{display:inline-flex;align-items:center;gap:4px;padding:3px 6px;border:2px solid #fff;border-radius:999px;font-size:10px;line-height:1;font-weight:700;box-shadow:0 2px 5px #193d7720}.more-reward-count[hidden]{display:none}.achievement-count{background:#fff0be;color:#946500}.quest-count{background:#dce9ff;color:#245be5}.more-reward-count i{font-size:9px}

.quest-card{display:flex;flex-direction:column}.quest-card progress{margin-top:auto}.quest-hard{border-color:#f0d69b}.quest-hard .quest-symbol,.quest-hard .quest-difficulty{background:#fff4d8;color:#946500}.quest-hard .quest-card-footer strong{color:#946500}.quest-hard progress{accent-color:#d4a017}

.detail-instrument-description{margin:18px 0;padding-top:16px;border-top:1px solid #dbe7fb}.detail-instrument-description h3{font-size:14px;margin:0 0 9px;color:#173979}.detail-instrument-description p{display:block!important;font-size:13px;line-height:1.8;color:#536580;white-space:normal;overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;max-height:none;margin:0;overflow-wrap:anywhere}

#panelUpgrades{opacity:1!important}.sale-values-scroll{overflow-x:auto}.sale-value-table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}.sale-value-table caption{text-align:left;color:#64748b;font-size:11px;padding:10px 0}.sale-value-table th,.sale-value-table td{padding:12px;text-align:right;border-bottom:1px solid #dbeafe}.sale-value-table th:first-child{text-align:left}.sale-value-table thead{background:#eff6ff;color:#1e40af}
/* Opening rules: readable copy and a clear primary action. */
.instrument-dialog.game-rules-dialog{width:min(760px,calc(100vw - 32px));box-sizing:border-box;padding:clamp(24px,4vw,40px);background:#f8fbff;}
.game-rules-dialog h2{font-size:clamp(26px,3vw,32px);line-height:1.3;margin:0 0 22px;}
.instrument-dialog.game-rules-dialog p{font-size:18px;line-height:1.75;color:#334155;margin:0 0 20px;}
.game-rules-dialog strong{color:#123477;font-weight:800;}
.game-rules-dialog #acceptGameRules{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:58px;margin-top:28px;padding:16px 24px;border:0;border-radius:14px;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font:inherit;font-size:18px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(37,99,235,.22);transition:background .15s,box-shadow .15s;}
.game-rules-dialog #acceptGameRules::after{content:'\2192';font-size:22px;}
.game-rules-dialog #acceptGameRules:hover{background:#1e40af;box-shadow:0 8px 20px rgba(37,99,235,.3);}
.game-rules-dialog #acceptGameRules:focus-visible{outline:3px solid #60a5fa;outline-offset:4px;}
.game-rules-dialog #acceptGameRules:active{box-shadow:0 2px 8px rgba(37,99,235,.2);}
.game-rules-warning{padding:18px 20px;margin-top:24px;border:1px solid #f0c36b;border-left:5px solid #d97706;border-radius:12px;background:#fff7e6;}
.game-rules-warning>strong{display:block;color:#854d0e;font-size:18px;line-height:1.5;}
.instrument-dialog.game-rules-dialog .game-rules-warning p{color:#713f12;font-size:16px;line-height:1.7;margin:8px 0 0;}
@keyframes gameRulesEnter{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.game-rules-dialog[open]{animation:gameRulesEnter .22s ease-out;}
.game-rules-dialog[open] .game-rules-warning{animation:gameRulesEnter .3s ease-out;}
@media(prefers-reduced-motion:reduce){.game-rules-dialog[open],.game-rules-dialog[open] .game-rules-warning{animation:none;}}
.game-rules-test-sound{margin-top:14px;padding:10px 16px;min-height:44px;border:1px solid #d97706;border-radius:9px;background:#fff;color:#854d0e;font:inherit;font-size:15px;font-weight:700;cursor:pointer}.game-rules-test-sound:focus-visible{outline:3px solid #d97706;outline-offset:3px}
.detail-trade-history{margin:18px 0;padding:16px;border:1px solid #bcd4ef;border-radius:14px;background:#eef6ff;color:#173b78}.detail-trade-history[hidden]{display:none}.detail-trade-label{display:inline-block;padding:4px 9px;border-radius:7px;background:#dbeafe;color:#245bea;font-size:11px;font-weight:700}.detail-trade-history h3{font-size:15px;margin:10px 0 6px}.detail-trade-history p{font-size:13px;line-height:1.6;margin:0 0 7px}.detail-trade-history small{display:block;font-size:11px;line-height:1.6;color:#607597}

.copy-lock-summary{font-weight:600}.copy-lock-help{display:block;color:var(--muted,#607597);font-size:.85rem;line-height:1.6}.copy-lock-control{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:1rem 0;font-weight:600}.copy-lock-control input{width:6rem;min-height:44px;border:1px solid #b9caec;border-radius:10px;padding:.6rem;font:inherit;background:var(--card,#fff);color:inherit}

.roll-stats{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
@media(max-width:760px){.roll-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.loan-panel{max-width:880px;margin:24px auto;padding:clamp(20px,4vw,36px);border:1px solid var(--theme-border,var(--line,#cbd5e1));border-radius:24px;background:var(--theme-surface,var(--surface,#fff));color:inherit}.loan-panel p{line-height:1.7}.loan-status{padding:20px;border-radius:18px;background:var(--theme-surface-2,var(--surface,#eef4ff));margin:24px 0}.loan-status strong{font-size:1.6rem}.loan-status progress{width:100%;accent-color:#2563eb}.loan-actions{display:grid;grid-template-columns:1fr 1fr;gap:20px}.loan-actions>div{display:grid;gap:12px}.loan-actions input{min-width:0;width:100%;box-sizing:border-box;padding:14px;border:1px solid var(--theme-border,var(--line,#cbd5e1));border-radius:12px;font:inherit;color:inherit;background:var(--theme-surface,var(--surface,#fff))}.loan-actions button{padding:14px 20px;border:0;border-radius:12px;background:#2563eb;color:white;font:inherit;font-weight:700;cursor:pointer}.loan-actions button:disabled{opacity:.5;cursor:default}@media(max-width:600px){.loan-actions{grid-template-columns:1fr}}

.reputation-card{border:1px solid var(--theme-border,var(--border,#cbd5e1));border-radius:18px;padding:20px;margin:20px 0;background:var(--theme-surface-2,var(--surface,#f4f7ff))}.reputation-heading{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.reputation-heading h3{margin:0 0 4px}.reputation-heading>#reputationScore{margin-left:auto}.reputation-emblem{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:#dbeafe;color:#2563eb;font-size:26px;transition:background .3s,color .3s}.reputation-emblem[data-rank="Trusted"]{background:#fef3c7;color:#a16207}.reputation-emblem[data-rank="At Risk"]{background:#fee2e2;color:#b91c1c}.reputation-emblem[data-rank="Building"]{background:#dcfce7;color:#15803d}#reputationMeter{width:100%;height:20px;accent-color:#2563eb;margin:20px 0 8px}.reputation-ranks{display:grid;grid-template-columns:repeat(5,1fr);font-size:12px;gap:6px;text-align:center}.reputation-ranks span{border-top:2px solid var(--theme-border,var(--border,#cbd5e1));padding-top:8px}#reputationReward{font-weight:600}@media(prefers-reduced-motion:reduce){.reputation-emblem{transition:none}}

.reputation-gauge{max-width:380px;margin:8px auto 0;color:var(--theme-text,var(--text,#173b78))}.reputation-gauge svg{display:block;width:100%;height:auto}.reputation-gauge text{font:600 14px Poppins,sans-serif}#reputationMeter[hidden]{display:none}

.reputation-emblem[data-rank="Respected"]{background:#ecfccb;color:#4d7c0f}.reputation-emblem[data-rank="Building"]{background:#fef9c3;color:#a16207}.reputation-emblem[data-rank="Rebuilding"]{background:#ffedd5;color:#c2410c}

.reputation-ranks span.is-current{border-radius:10px;border:2px solid currentColor;font-weight:800;padding:8px 3px;box-shadow:0 3px 12px #173b7815}.reputation-ranks span.is-current:nth-child(1){color:#b91c1c;background:#fee2e2}.reputation-ranks span.is-current:nth-child(2){color:#c2410c;background:#ffedd5}.reputation-ranks span.is-current:nth-child(3){color:#a16207;background:#fef9c3}.reputation-ranks span.is-current:nth-child(4){color:#4d7c0f;background:#ecfccb}.reputation-ranks span.is-current:nth-child(5){color:#15803d;background:#dcfce7}

.loan-actions{align-items:start}.loan-actions>div{grid-template-rows:auto 56px 56px;align-content:start}.loan-actions>div>label{min-height:26px;line-height:26px}.loan-actions input{height:56px}.loan-actions button{min-height:56px;padding:12px;font-size:14px}.loan-repay-buttons{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:10px}.loan-repay-buttons button{width:100%;height:56px;line-height:1.3}

.loan-notification{position:fixed;z-index:2147483200;top:24px;left:50%;transform:translateX(-50%);width:min(580px,calc(100vw - 32px));box-sizing:border-box;display:grid;grid-template-columns:48px minmax(0,1fr) 36px;gap:16px;align-items:start;padding:24px;border:1px solid var(--theme-border,#cbd5e1);border-radius:20px;background:var(--theme-surface,#fff);color:var(--theme-text,#173b78);box-shadow:0 18px 60px #102c6344;font-family:Poppins,sans-serif;overflow:hidden;animation:loan-notice-in .2s ease-out}.loan-notification-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#fff0d1;color:#a65a00;font-size:28px;font-weight:800}.loan-notification strong{font-size:20px;line-height:1.4}.loan-notification p{font-size:15px;line-height:1.6;margin:8px 0 0}.loan-notification-close{width:36px;height:36px;border:0;border-radius:10px;background:var(--theme-surface-2,#edf3ff);color:inherit;font-size:24px;cursor:pointer}.loan-notification-timer{position:absolute;bottom:0;left:0;width:100%;height:4px;background:#f59e0b;transform-origin:left;animation:loan-notice-timer 5s linear forwards}@keyframes loan-notice-timer{to{transform:scaleX(0)}}@keyframes loan-notice-in{from{opacity:0;translate:0 -12px}to{opacity:1;translate:0 0}}@media(prefers-reduced-motion:reduce){.loan-notification{animation:none}}@media(max-width:480px){.loan-notification{padding:18px;gap:10px;grid-template-columns:36px minmax(0,1fr) 32px}.loan-notification-icon{width:36px;height:36px}.loan-notification strong{font-size:18px}}

.roll-bonus-counter{position:absolute;left:16px;top:105px;width:130px;padding:13px;background:#ffffffed;border:1px solid #bcd4fb;border-radius:16px;text-align:left;box-shadow:0 8px 24px #1d4ed810;z-index:4;}.roll-bonus-counter[hidden]{display:none;}.roll-bonus-counter h3{font-size:12px;margin:0 0 12px;color:#193c78;}.roll-bonus-entry{border-top:1px solid #dce8fa;padding:10px 0;display:grid;gap:5px;}.roll-bonus-entry span,.roll-bonus-entry small{font-size:10px;color:#547098;}.roll-bonus-entry strong{font-size:15px;color:#245fd5;}.roll-bonus-entry progress{width:100%;height:6px;accent-color:#2563eb;}@media(max-width:1150px){.roll-bonus-counter{position:static;width:auto;display:flex;gap:15px;align-items:center;margin:0 0 16px;}.roll-bonus-entry{border:0;padding:0;flex:1;}.roll-bonus-counter h3{max-width:80px;margin:0;}}

.roll-loan-summary{display:grid;gap:7px;border-top:1px solid #cbdcf5;padding-top:13px;margin-top:8px;}.roll-loan-summary h3{margin:0 0 2px;}.roll-loan-summary strong{font-size:14px;color:#183c73;}.roll-loan-summary span{font-size:12px;color:#2563eb;}.roll-loan-summary small{font-size:10px;line-height:1.5;color:#64748b;}.roll-loan-summary progress{width:100%;height:6px;accent-color:#2563eb;}.roll-loan-summary[data-status=warning] span{color:#a65c09;}.roll-loan-summary[data-status=overdue] span{color:#b91c1c;font-weight:800;}.roll-loan-summary[data-status=overdue] progress{accent-color:#dc2626;}@media(max-width:1150px){.roll-bonus-counter{flex-wrap:wrap;}.roll-loan-summary{flex:1;min-width:130px;border-top:0;border-left:1px solid #cbdcf5;padding:0 0 0 13px;margin:0;}}
.loan-borrow-dialog{width:min(460px,calc(100vw - 32px));box-sizing:border-box;border:1px solid var(--theme-border,#cbdcf5);border-radius:20px;padding:28px;background:var(--theme-surface,#fff);color:var(--theme-text,#173b78);font-family:inherit;box-shadow:0 20px 70px #142d6344}
.loan-borrow-dialog::backdrop{background:#10203c88;backdrop-filter:blur(4px)}
.loan-borrow-dialog h2{margin:0 0 16px;font-size:23px}
.loan-borrow-dialog p{font-size:14px;line-height:1.7}
.loan-borrow-dialog p:first-of-type{padding:14px;border-radius:10px;background:#fff3d6;color:#865311}
.loan-borrow-dialog-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;flex-wrap:wrap}
.loan-borrow-dialog-actions button{padding:11px 16px;border:1px solid #bfd0ef;border-radius:10px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;background:#edf3ff;color:#234c8a}
.loan-borrow-dialog-actions .loan-borrow-confirm{background:#245be7;color:#fff;border-color:#245be7}
.roll-loan-summary .roll-loan-interest{margin:0;font-size:12px;line-height:1.5;font-weight:800;color:#a65c09}.roll-loan-summary[data-status=overdue] .roll-loan-interest{color:#b91c1c}

.contract-breaker-button{margin-top:18px;padding:14px 20px;border:1px solid #a3c1ef;border-radius:12px;background:#edf3ff;color:#24477d;font:600 14px Poppins,sans-serif}.contract-breaker-button:disabled{opacity:.55}

.catalog-gem-flight{position:fixed;z-index:2147483647;pointer-events:none;color:#5bd8ff;font-size:30px;text-shadow:0 2px 8px #168bd8;}
#catalogCollectGems{border:1px solid #79d9ff;border-radius:12px;background:#e3f8ff;color:#075c92;padding:10px 16px;font-weight:700;}

.catalog-card{position:relative}.catalog-gem-mark{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#86a2ba;border:2px solid #c4d6e7;box-shadow:0 2px 8px #0b376b20;font-size:18px;pointer-events:none}.catalog-gem-mark.is-ready{background:#207cf1;color:#8be5ff;border-color:#79dbff;}

.detail-finish-choice{position:relative;padding-right:42px}.detail-finish-choice .catalog-gem-mark{width:24px;height:24px;top:6px;right:6px;font-size:15px;}

.quest-card-footer{flex-wrap:wrap;gap:10px}.quest-card-footer .quest-refresh{background:#e0f6ff;color:#08699b;border:1px solid #80d8f5}.quest-card small{line-height:1.6}

.detail-copy-thumbnails{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 14px}.detail-copy-thumb{flex:0 0 104px;border:2px solid #c2d5f7;border-radius:12px;background:#f0f5ff;padding:8px 6px;color:#174280;font-size:11px;font-weight:700}.detail-copy-thumb[aria-pressed=true]{border-color:#2872f6;background:#e2eeff;box-shadow:0 0 0 2px #88baff55}.detail-copy-thumb-art{width:88px;height:128px;position:relative;overflow:hidden;border-radius:6px;margin:0 auto 8px}.detail-copy-thumb-art .trading-card{width:240px!important;max-width:none!important;min-width:240px!important;transform:scale(.3667)!important;transform-origin:top left!important;margin:0!important;pointer-events:none}

.detail-variant-tabs{display:flex;gap:5px;background:#edf3ff;border-radius:12px;padding:4px;margin:18px 0 12px}.detail-variant-tabs button{flex:1;border:0;border-radius:9px;background:transparent;color:#5a7097;padding:10px;font-weight:800}.detail-variant-tabs button[aria-selected=true]{background:#fff;color:#235fe3;box-shadow:0 2px 8px #1d4b7f18}.detail-variant-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(106px,1fr));gap:12px}.detail-variant-cards[hidden]{display:none}.detail-mini-card{position:relative;border:2px solid #d3e1fb;border-radius:12px;background:#f7faff;padding:8px 5px;min-width:0;text-align:center}.detail-mini-card[aria-pressed=true]{border-color:#2b71f2;box-shadow:0 0 0 2px #bad7ff55}.detail-mini-card.is-undiscovered .detail-mini-card-art{opacity:.38;filter:grayscale(.5)}.detail-mini-card-art{width:96px;height:142px;margin:auto;position:relative;overflow:hidden;border-radius:7px}.detail-mini-card-art .trading-card{width:240px!important;min-width:240px!important;max-width:none!important;transform:scale(.4)!important;transform-origin:top left!important;margin:0!important;pointer-events:none}.detail-mini-card-label{display:block;margin-top:8px;font-size:10px;color:#264577;font-weight:700;line-height:1.4}.detail-mini-card .catalog-gem-mark{width:23px;height:23px;top:4px;right:4px;font-size:14px}

.game-layout{display:grid;grid-template-columns:172px minmax(0,1fr);gap:22px;align-items:start;margin-top:20px}.game-panels{min-width:0}.game-layout .game-navigation{position:sticky;top:18px;display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:0}.game-layout .game-tabs{display:flex;flex-direction:column;gap:4px;padding:8px;width:100%;border-radius:18px}.game-layout .game-tabs [data-panel]{width:100%;text-align:left;justify-content:flex-start;white-space:normal;padding:11px 10px;font-size:12px}.game-layout .game-tabs [hidden],.game-layout #gameMore{display:none!important}.game-layout .game-settings{justify-content:center;margin:0;padding:10px;background:#fff;border:1px solid #d8e5fb;border-radius:12px}.game-layout .game-panels>[role=tabpanel]{margin-top:0}@media(max-width:950px){.game-layout{grid-template-columns:1fr;gap:16px}.game-layout .game-navigation{position:relative;top:auto}.game-layout .game-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}.game-layout .game-tabs [data-panel]{text-align:center;justify-content:center;padding:10px 5px;font-size:11px}.game-layout .game-settings{align-self:end;padding:6px 12px}}@media(max-width:520px){.game-layout .game-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}.game-layout .game-tabs [data-panel]{font-size:10px;}}

/* Adapt the game to its content width, including narrow desktop panes. */
.instrument-main{min-width:0;container-type:inline-size;container-name:instrument-game}
.game-layout,.game-panels,.game-side,.locker-controls{min-width:0}
.game-side>.locker-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;grid-column:1/-1}
.game-side>.locker-controls .locker-launch{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0;min-height:48px;margin:0;padding:12px 14px;white-space:normal;text-align:left;overflow-wrap:anywhere}
@container instrument-game (max-width:1000px){
 .game-layout{grid-template-columns:minmax(0,1fr);gap:16px}
 .game-layout .game-navigation{position:relative;top:auto}
 .game-layout .game-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
 .game-layout .game-tabs [data-panel]{min-width:0;justify-content:center;text-align:center;min-height:44px;padding:10px 6px;font-size:11px}
 .game-layout .game-settings{align-self:end}
}
@container instrument-game (max-width:500px){
 .game-layout .game-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
 .game-layout .game-tabs [data-panel]{font-size:10px;gap:5px}
 .roll-workspace,.game-side{grid-template-columns:minmax(0,1fr)}
 .game-side>.locker-controls{grid-template-columns:minmax(0,1fr)}
 .roll-stats>div{min-width:0}.roll-stats strong{overflow-wrap:anywhere}
 .instrument-main :is(input,select){font-size:16px}
 .game-panels :is(button,input,select){max-width:100%}
}
@media(max-width:550px){.instrument-main{padding:18px 12px}.instrument-main :is(input,select){font-size:16px}.game-panel{padding:16px}.game-side>.locker-controls{grid-template-columns:minmax(0,1fr)}}