/* ==========================================================================
   OLYMBO — Lamplight overlays (src/ui/screens/overlays.js)
   Boards: Pause.dc.html (pause + settings), RunInfo.dc.html, Deck.dc.html, Codex.dc.html.
   Every dialog root is `.modal-bg.lamp-ov` plus a variant: .lamp-pause .lamp-runinfo .lamp-deck .lamp-codex
   (full-screen sheets) or .lamp-dlg (cream question / save cards). The item menu is `.lamp-menu`.
   Board weights in Parkinsans: 800 -> var(--f-chunk); 700 -> 900 body; 600 -> 700 body; 500 -> 500 body.
   ========================================================================== */

/* ---------- shared shell ---------- */
/* no fade on the root: an opacity animation there would make it a backdrop root and stop the veils' backdrop blur */
.lamp-ov.modal-bg { display: block; background: none; animation: none; }
.lamp-ov .pz-veil, .lamp-ov .ri-veil, .lamp-ov .dk-veil, .lamp-ov .cx-bg, .lamp-ov .cx-veil { animation: ov-fade .3s ease-out both; }
.lamp-ov .ov-dlg { outline: none; }
.lamp-ov .ov-dlg:focus { outline: none; }
.lamp-ov.lamp-pause .ov-dlg, .lamp-ov.lamp-runinfo .ov-dlg, .lamp-ov.lamp-deck .ov-dlg, .lamp-ov.lamp-codex .ov-dlg {
  position: absolute; inset: 0; width: 1920px; height: 1080px; overflow: clip;
  color: #fff4dc; font-family: var(--f-body); -webkit-font-smoothing: antialiased; user-select: none; }
.lamp-ov h1, .lamp-ov h2, .lamp-ov h3 { letter-spacing: normal; }
.lamp-ov .t-p { color: #7fd6ff; font-weight: 900; } .lamp-ov .t-f { color: #ff8a7a; font-weight: 900; }
.lamp-ov .t-x { color: #ff6f5e; background: none; padding: 0; font-weight: 900; }
.lamp-ov .t-g { color: #ffd25e; font-weight: 900; } .lamp-ov .t-h, .lamp-ov .t-k { color: #ffe7b0; font-weight: 900; }
.lamp-ov .t-muted { color: rgba(255,244,220,.55); opacity: 1; }
.lamp-ov .t-s-H { color: #ff7a7f; font-weight: 900; } .lamp-ov .t-s-D { color: #ffa94d; font-weight: 900; }
.lamp-ov .t-s-C { color: #7fd69a; font-weight: 900; } .lamp-ov .t-s-S { color: #9db4ff; font-weight: 900; }
@keyframes ov-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ov-rise { from { opacity: 0; transform: translateY(30px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ov-rowin { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes ov-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* round close button of the sheets (top right) */
.lamp-ov .ov-close, .lamp-ov .dk-close, .lamp-ov .ri-xx, .lamp-ov .cx-close {
  display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; color: #fff4dc; cursor: pointer;
  background: rgba(255,244,220,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 10px 20px -8px rgba(0,0,0,.6);
  transition: transform .16s cubic-bezier(.3,1.8,.5,1), background .16s; }
.lamp-ov .ov-close, .lamp-ov .dk-close { position: absolute; right: 56px; top: 54px; width: 64px; height: 64px; z-index: 5; }
.lamp-ov .ov-close:hover, .lamp-ov .dk-close:hover, .lamp-ov .cx-close:hover, .lamp-ov .ri-close:hover .ri-xx, .lamp-ov .ri-close:focus-visible .ri-xx { transform: scale(1.08); background: rgba(255,90,54,.9); }
.lamp-ov .ov-close svg, .lamp-ov .dk-close svg, .lamp-ov .ri-xx svg, .lamp-ov .cx-close svg { width: 28px; height: 28px; stroke-width: 2.6; }
.lamp-ov :where(button, input):focus-visible { outline: 3px solid #ffd25e; outline-offset: 5px; }
.lamp-ov button { -webkit-tap-highlight-color: transparent; }

/* ==========================================================================
   PAUSE + SETTINGS (board Pause)
   ========================================================================== */
.lamp-pause .pz-veil { position: absolute; inset: 0; pointer-events: none;
  -webkit-backdrop-filter: blur(14px) saturate(.85) brightness(.55); backdrop-filter: blur(14px) saturate(.85) brightness(.55);
  background: linear-gradient(90deg, rgba(20,8,24,.82) 0%, rgba(20,8,24,.5) 38%, rgba(20,8,24,.35) 100%); }
.lamp-pause .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 32px; padding: 0 9px; box-sizing: border-box; border-radius: 9px;
  background: rgba(255,244,220,.12); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); font: 900 15px/1 var(--f-body); color: #fff4dc; opacity: 1; vertical-align: middle; letter-spacing: 0; }
.lamp-pause .pz-left { position: absolute; left: 96px; top: 96px; width: 470px; animation: ov-rise .45s cubic-bezier(.2,1.4,.4,1) both; }
.lamp-pause .pz-left > small { display: block; font: 900 17px/1 var(--f-body); letter-spacing: .4px; color: #ffd25e; }
.lamp-pause .pz-left h1 { margin: 10px 0 0; font: 800 92px/1 var(--f-chunk); color: #fff4dc; text-shadow: 0 6px 0 rgba(40,8,16,.5); }
.lamp-pause .pz-sub { margin: 12px 0 0 3px; font: 700 21px/1.35 var(--f-body); color: rgba(255,244,220,.82); }
.lamp-pause .pz-sub b { color: #fff4dc; font-weight: 900; }
.lamp-pause .pz-resume { margin-top: 38px; width: 400px; height: 104px; padding: 0 0 4px; gap: 16px; border-radius: 28px; font: 800 42px/1 var(--f-chunk); letter-spacing: .3px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -6px 0 rgba(0,0,0,.08), 0 9px 0 var(--lip), 0 26px 40px -14px rgba(110,18,8,.6); }
.lamp-pause .pz-resume:hover { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.08), 0 14px 0 var(--lip), 0 34px 50px -14px rgba(110,18,8,.6), 0 0 50px rgba(255,120,70,.6); }
.lamp-pause .pz-resume svg { width: 34px; height: 34px; fill: currentColor; stroke: none; filter: drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.lamp-pause .pz-resume .kbd { margin-left: 6px; background: rgba(60,0,0,.2); text-shadow: none; }
.lamp-pause .pz-links { margin-top: 34px; display: flex; flex-direction: column; gap: 6px; width: 400px; }
.lamp-pause .pz-lk { display: flex; align-items: center; gap: 16px; height: 60px; padding: 0 20px; border: 0; border-radius: 18px; background: none; color: rgba(255,244,220,.9);
  font: 800 24px/1 var(--f-chunk); white-space: nowrap; cursor: pointer; text-align: left; transition: background .15s, color .15s, transform .16s cubic-bezier(.3,1.8,.5,1); }
.lamp-pause .pz-lk:hover { background: rgba(255,244,220,.08); color: #fff4dc; transform: translateX(4px); }
.lamp-pause .pz-lk svg { width: 26px; height: 26px; stroke-width: 2.4; flex: none; }
.lamp-pause .pz-lk .kbd { margin-left: auto; }
.lamp-pause .pz-lk.danger { color: #ff9b88; }
.lamp-pause .pz-lk.danger:hover { background: rgba(255,90,54,.14); color: #ffb5a6; }
.lamp-pause .pz-saved { margin-top: 26px; display: flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: default;
  font: 700 17px/1 var(--f-body); color: rgba(255,244,220,.66); }
.lamp-pause .pz-saved i { width: 10px; height: 10px; border-radius: 50%; background: #7fe0b0; box-shadow: 0 0 10px rgba(127,224,176,.8); }
.lamp-pause .pz-saved.bad { color: #ff9b88; cursor: pointer; }
.lamp-pause .pz-saved.bad i { background: #ff6f5e; box-shadow: 0 0 10px rgba(255,111,94,.8); }

.lamp-pause .pz-set { position: absolute; left: 700px; top: 96px; width: 1124px; height: 888px; box-sizing: border-box; padding: 34px 44px; border-radius: 34px;
  background: rgba(24,10,28,.8); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 40px 80px -30px rgba(0,0,0,.85); animation: ov-rise .45s .05s cubic-bezier(.2,1.4,.4,1) both; }
.lamp-pause.solo .pz-set { left: 398px; }
.lamp-pause .pz-head { display: flex; align-items: center; gap: 20px; }
.lamp-pause .pz-head h2 { margin: 0; font: 800 44px/1 var(--f-chunk); color: #fff4dc; }
.lamp-pause .pz-tabs, .lamp-pause .pz-seg { display: flex; gap: 4px; padding: 5px; background: rgba(0,0,0,.3); box-shadow: inset 0 2px 6px rgba(0,0,0,.4); }
.lamp-pause .pz-tabs { margin-left: auto; border-radius: 20px; }
.lamp-pause .pz-tabs button { height: 46px; padding: 0 20px; border: 0; border-radius: 15px; background: none; color: rgba(255,244,220,.8); font: 800 21px/1 var(--f-chunk); cursor: pointer; transition: background .2s, color .2s; }
.lamp-pause .pz-tabs button:hover { color: #fff4dc; }
.lamp-pause .pz-tabs button.on { background: linear-gradient(180deg, #ffd860, #f2ad1c); color: #3a2006; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #b37608; }
.lamp-pause .pz-rows { margin-top: 30px; display: flex; flex-direction: column; gap: 6px; }
.lamp-pause .pz-row { display: flex; align-items: center; gap: 24px; min-height: 92px; padding: 0 6px; border-bottom: 1px solid rgba(255,244,220,.07); }
.lamp-pause .pz-row:last-child { border-bottom: 0; }
.lamp-pause .pz-lab { width: 330px; flex: none; }
.lamp-pause .pz-lab b { display: block; font: 800 25px/1.1 var(--f-chunk); color: #fff4dc; }
.lamp-pause .pz-lab > span { display: block; margin-top: 5px; font: 700 16px/1.3 var(--f-body); color: rgba(255,244,220,.62); }
/* volume: ten chunky steps; the hidden range input under them carries keyboard and screen-reader use */
.lamp-pause .pz-vol { position: relative; display: flex; align-items: center; gap: 6px; flex: 1; border-radius: 12px; }
.lamp-pause .pz-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.lamp-pause .pz-vol:has(.pz-range:focus-visible) { outline: 3px solid #ffd25e; outline-offset: 6px; }
.lamp-pause .pz-vol button { flex: 1; height: 38px; padding: 0; border: 0; border-radius: 10px; background: rgba(255,244,220,.1); cursor: pointer; transition: background .12s, transform .12s; }
.lamp-pause .pz-vol button:hover { transform: translateY(-2px); }
.lamp-pause .pz-vol button.on { background: linear-gradient(180deg, #ffd860, #f2ad1c); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 3px 0 #b37608; }
.lamp-pause .pz-vol button.on.mute { background: rgba(255,244,220,.1); box-shadow: none; }
.lamp-pause .pz-pct { width: 74px; flex: none; text-align: right; font: 800 28px/1 var(--f-chunk); color: #fff4dc; }
.lamp-pause .pz-seg { border-radius: 18px; background: rgba(0,0,0,.28); box-shadow: inset 0 2px 6px rgba(0,0,0,.35); }
.lamp-pause .pz-seg button { height: 46px; min-width: 96px; padding: 0 18px; border: 0; border-radius: 13px; background: none; color: rgba(255,244,220,.78); font: 800 20px/1 var(--f-chunk); cursor: pointer; transition: background .2s, color .2s; }
.lamp-pause .pz-seg button:hover { color: #fff4dc; }
.lamp-pause .pz-seg button.on { background: #fff4dc; color: #2a1838; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.lamp-pause .pz-full, .lamp-pause .pz-ghost { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border: 0; border-radius: 15px;
  background: rgba(255,244,220,.1); color: #fff4dc; font: 800 20px/1 var(--f-chunk); cursor: pointer; transition: background .15s; }
.lamp-pause .pz-full:hover, .lamp-pause .pz-ghost:hover { background: rgba(255,244,220,.18); }
.lamp-pause .pz-full svg, .lamp-pause .pz-ghost svg { width: 22px; height: 22px; stroke-width: 2.4; }
.lamp-pause .pz-swatch { display: flex; gap: 6px; }
.lamp-pause .pz-swatch i { width: 26px; height: 26px; border-radius: 7px; }
.lamp-pause .pz-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin-top: 30px; }
.lamp-pause .pz-key { display: flex; align-items: center; gap: 14px; font: 700 19px/1.3 var(--f-body); color: rgba(255,244,220,.88); }
.lamp-pause .pz-key .ks { display: flex; gap: 6px; width: 150px; flex: none; justify-content: flex-end; }
.lamp-pause .pz-foot { position: absolute; left: 44px; right: 44px; bottom: 30px; display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid rgba(255,244,220,.08);
  font: 700 17px/1 var(--f-body); color: rgba(255,244,220,.6); }
.lamp-pause .pz-foot > i { width: 10px; height: 10px; border-radius: 50%; background: #7fe0b0; }
.lamp-pause .pz-ghost { margin-left: auto; }

/* ==========================================================================
   CREAM CARDS: confirm, save trouble, save recovery
   ========================================================================== */
.lamp-dlg.modal-bg { display: flex; align-items: center; justify-content: center; background: rgba(10,4,14,.62); animation: ov-fade .25s ease-out both; }
.lamp-dlg .ov-card { position: relative; width: 600px; max-height: 960px; overflow: auto; box-sizing: border-box; padding: 38px 42px 34px; border-radius: 32px;
  background: #fff4dc; color: #2a1838; box-shadow: 0 40px 80px -24px rgba(0,0,0,.85); animation: ov-rise .4s cubic-bezier(.2,1.4,.4,1) both; scrollbar-width: thin; scrollbar-color: #d8bf98 transparent; }
.lamp-dlg.wide .ov-card { width: 900px; }
.lamp-dlg .ov-card h2 { display: flex; align-items: center; gap: 14px; margin: 0 60px 18px 0; font: 800 40px/1.05 var(--f-chunk); color: #2a1838; }
.lamp-dlg .ov-card h2 svg { width: 34px; height: 34px; stroke-width: 2.6; color: #c2401c; }
.lamp-dlg .ov-x { position: absolute; right: 24px; top: 24px; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: rgba(42,24,56,.08); color: #2a1838; cursor: pointer; transition: background .15s, color .15s, transform .16s cubic-bezier(.3,1.8,.5,1); }
.lamp-dlg .ov-x:hover { background: #f2492a; color: #fff; transform: scale(1.08); }
.lamp-dlg .ov-x svg { width: 24px; height: 24px; stroke-width: 2.6; }
.lamp-dlg .ov-btns { margin-top: 30px; display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.lamp-dlg .ov-btns.end { justify-content: flex-end; }
.lamp-dlg .ov-btns .btn { height: 72px; padding: 0 30px 3px; font-size: 28px; }
/* the question card */
.lamp-dlg.ask .ov-card { text-align: center; }
.lamp-dlg.ask .ov-card h2 { justify-content: center; margin: 0; font-size: 44px; }
.lamp-dlg .ov-confirm p { margin: 14px 0 0; font: 700 21px/1.4 var(--f-body); color: #4a3558; }
.lamp-dlg .ov-lamps { margin: 22px auto 0; display: flex; justify-content: center; gap: 8px; }
.lamp-dlg .ov-lamps i { width: 16px; height: 22px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 70%, #ffd25e 0 40%, #f2832a 41% 70%, rgba(0,0,0,0) 71%); }
.lamp-dlg .ov-go { height: 72px; padding: 0 26px; border: 0; border-radius: 22px; background: rgba(42,24,56,.08); color: #a8321f; font: 800 26px/1 var(--f-chunk); cursor: pointer; transition: background .15s; }
.lamp-dlg .ov-go:hover { background: rgba(168,50,31,.12); }
/* save trouble + recovery */
.lamp-dlg .ov-save p { margin: 0 0 14px; font: 700 19px/1.45 var(--f-body); color: #4a3558; }
.lamp-dlg .ov-save p b { color: #2a1838; font-weight: 900; }
.lamp-dlg .ov-save .note { font-size: 15px; color: rgba(42,24,56,.6); margin-top: 16px; }
.lamp-dlg .ov-save .imsg { min-height: 1em; color: #a8321f; }
.lamp-dlg .ov-save textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical; border: 0; border-radius: 16px; padding: 12px 14px;
  background: rgba(42,24,56,.07); box-shadow: inset 0 2px 6px rgba(42,24,56,.12); color: #2a1838; font: 700 13px/1.4 ui-monospace, Consolas, monospace; outline: none; }
.lamp-dlg .ov-save textarea:focus-visible { outline: 3px solid #f2ad1c; outline-offset: 2px; }
.lamp-dlg .ov-sec { margin: 22px 0 10px; font: 900 15px/1 var(--f-body); letter-spacing: .3px; color: rgba(42,24,56,.6); }
.lamp-dlg .ov-none { font: 700 17px/1 var(--f-body); color: rgba(42,24,56,.5); }
.lamp-dlg .ov-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 10px; border-radius: 18px; background: rgba(42,24,56,.06); }
.lamp-dlg .ov-row > div { flex: 1; min-width: 0; font: 800 19px/1.3 var(--f-chunk); }
.lamp-dlg .ov-row small { display: block; margin-top: 3px; font: 700 15px/1.3 var(--f-body); color: rgba(42,24,56,.6); }
.lamp-dlg .ov-row .btn-sm { font-size: 19px; padding: 10px 16px 12px; }
.lamp-dlg .ov-row input[type=file] { max-width: 330px; font: 700 15px/1 var(--f-body); color: #4a3558; }
.lamp-dlg .ov-row input[type=file]::file-selector-button { margin-right: 12px; padding: 10px 16px 12px; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, #ffd860, #f2ad1c); color: #3a2006; font: 800 17px/1 var(--f-chunk); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #b37608; }

/* ==========================================================================
   RUN INFO (board RunInfo)
   ========================================================================== */
.lamp-runinfo .ri-veil { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: radial-gradient(ellipse 80% 90% at 40% 50%, rgba(26,6,16,.9), rgba(26,6,16,.82) 60%, rgba(26,6,16,.7)); }
.lamp-runinfo .ri-sheet { position: absolute; inset: 0; animation: ov-rise .45s cubic-bezier(.2,1.4,.4,1) both; }
.lamp-runinfo .ri-head { position: absolute; left: 120px; top: 58px; }
.lamp-runinfo .ri-head h1 { margin: 0; font: 800 70px/1 var(--f-chunk); color: #fff4dc; letter-spacing: .4px; text-shadow: 0 5px 0 rgba(60,12,20,.55); }
.lamp-runinfo .ri-head p { margin: 10px 0 0 4px; font: 700 21px/1 var(--f-body); color: rgba(255,244,220,.72); }
.lamp-runinfo .ri-close { position: absolute; right: 64px; top: 54px; display: flex; align-items: center; gap: 14px; padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(255,244,220,.7); font: 700 16px/1 var(--f-body); }
.lamp-runinfo .ri-close:focus-visible { outline: none; }
.lamp-runinfo .ri-xx { width: 64px; height: 64px; }
.lamp-runinfo .kbd { display: inline-block; padding: 3px 9px 4px; border-radius: 8px; background: rgba(255,244,220,.14); box-shadow: none; color: rgba(255,244,220,.9); font: 900 13px/1.1 var(--f-body); opacity: 1; vertical-align: middle; }
.lamp-runinfo .ri-lbl { font: 900 18px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.86); }
.lamp-runinfo .ri-lbl span { font-weight: 900; color: rgba(255,244,220,.72); }
/* hands */
.lamp-runinfo .ri-hands { position: absolute; left: 104px; top: 196px; width: 1020px; }
.lamp-runinfo .ri-cols, .lamp-runinfo .ri-row { display: grid; grid-template-columns: 270px 236px 70px 196px 1fr; }
.lamp-runinfo .ri-cols { align-items: end; padding: 0 18px 10px; font: 900 15px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.7); }
.lamp-runinfo .ri-row { position: relative; align-items: center; height: 80px; padding: 0 18px; border-radius: 24px; transition: background .2s;
  animation: ov-rowin .45s cubic-bezier(.2,1.4,.4,1) both; }
.lamp-runinfo .ri-row:hover { background: radial-gradient(ellipse 70% 120% at 30% 50%, rgba(255,170,70,.22), rgba(255,170,70,.06) 60%, rgba(255,170,70,0)); }
.lamp-runinfo .ri-row.top { background: radial-gradient(ellipse 70% 120% at 30% 50%, rgba(255,170,70,.14), rgba(255,170,70,0) 70%); }
.lamp-runinfo .ri-nm { font: 800 30px/1 var(--f-chunk); color: #fff4dc; white-space: nowrap; }
.lamp-runinfo .ri-row.zero .ri-nm { color: rgba(255,244,220,.62); }
.lamp-runinfo .ri-hands.dense .ri-row { height: 62px; }
.lamp-runinfo .ri-hands.dense .ri-nm { font-size: 26px; }
.lamp-runinfo .ri-ex { display: flex; gap: 6px; opacity: .88; transition: opacity .2s, transform .25s cubic-bezier(.3,1.8,.5,1); }
.lamp-runinfo .ri-row:hover .ri-ex { opacity: 1; transform: translateY(-3px); }
/* mini C+ cards */
.lamp-runinfo .mc { position: relative; width: 38px; height: 54px; box-sizing: border-box; padding-top: 5px; border-radius: 7px; display: flex; flex-direction: column; align-items: center;
  background: radial-gradient(130% 90% at 28% 8%, #fffdf7 0%, #fbf1da 55%, #f1deb8 100%); box-shadow: 0 2px 0 #cdb083, 0 6px 10px -4px rgba(0,0,0,.6);
  font: 600 17px/1 var(--f-rank); letter-spacing: -.04em; }
.lamp-runinfo .mc::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; box-shadow: 0 0 0 1px #d4ad55; pointer-events: none; }
.lamp-runinfo .mc i { display: block; width: 13px; height: 13px; margin-top: 3px; background: currentColor;
  -webkit-mask: var(--sg) 50% 50%/contain no-repeat; mask: var(--sg) 50% 50%/contain no-repeat; }
.lamp-runinfo .mc.kick { opacity: .4; transform: translateY(6px) scale(.92); }
.lamp-runinfo .mc.H { color: #d7343c; --sg: url("../../../assets/ui/suit-H.webp"); }
.lamp-runinfo .mc.D { color: #ea8417; --sg: url("../../../assets/ui/suit-D.webp"); }
.lamp-runinfo .mc.C { color: #2b8a48; --sg: url("../../../assets/ui/suit-C.webp"); }
.lamp-runinfo .mc.S { color: #253863; --sg: url("../../../assets/ui/suit-S.webp"); }
.lamp-runinfo .ri-row:hover .mc:not(.kick) { animation: ri-mcup .35s cubic-bezier(.2,1.8,.4,1) both; }
@keyframes ri-mcup { from { transform: translateY(0); } 50% { transform: translateY(-6px); } to { transform: translateY(-3px); } }
.lamp-runinfo .ri-lv { display: flex; align-items: center; gap: 6px; font: 900 19px/1 var(--f-body); color: #ffd25e; }
.lamp-runinfo .ri-lv svg { width: 16px; height: 16px; fill: #ffd25e; stroke: #ffd25e; filter: drop-shadow(0 0 6px rgba(255,200,80,.8)); }
.lamp-runinfo .ri-pf { display: flex; align-items: center; gap: 10px; }
.lamp-runinfo .pp { min-width: 66px; height: 46px; box-sizing: border-box; padding: 0 12px; border-radius: 15px; display: flex; align-items: center; justify-content: center;
  font: 800 28px/1 var(--f-chunk); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.lamp-runinfo .pp.p { background: linear-gradient(180deg, #52d2ff, #1e9be8); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #0f5fa6, 0 0 22px rgba(39,183,255,.28); }
.lamp-runinfo .pp.f { background: linear-gradient(180deg, #ff7a66, #e83a2c); box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 4px 0 #9c1c15, 0 0 22px rgba(255,77,61,.28); }
.lamp-runinfo .ri-row.zero .pp { filter: saturate(.55) brightness(.85); }
.lamp-runinfo .ri-pf em { font: 800 24px/1 var(--f-chunk); font-style: normal; color: rgba(255,244,220,.7); }
.lamp-runinfo .ri-pl { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.lamp-runinfo .ri-pl b { min-width: 44px; text-align: right; font: 800 26px/1 var(--f-chunk); color: #fff4dc; }
.lamp-runinfo .ri-row.zero .ri-pl b { color: rgba(255,244,220,.6); }
.lamp-runinfo .ri-bar { width: 110px; height: 10px; border-radius: 10px; background: rgba(255,244,220,.1); overflow: hidden; }
.lamp-runinfo .ri-bar span { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, #ffb257, #ffd25e); box-shadow: 0 0 10px rgba(255,190,80,.7);
  transform-origin: left; animation: ov-grow .7s cubic-bezier(.2,1.2,.4,1) both; }
.lamp-runinfo .ri-hint { margin: 14px 0 0 18px; font: 700 17px/1 var(--f-body); color: rgba(255,244,220,.72); }
/* right column */
.lamp-runinfo .ri-side { position: absolute; left: 1250px; top: 196px; width: 590px; display: flex; flex-direction: column; gap: 30px; }
.lamp-runinfo .ri-blk { display: flex; flex-direction: column; gap: 12px; animation: ov-rowin .45s cubic-bezier(.2,1.4,.4,1) both; }
.lamp-runinfo .ri-list { display: flex; flex-direction: column; gap: 12px; }
.lamp-runinfo .ri-list.icons { flex-direction: row; flex-wrap: wrap; gap: 10px 14px; }
.lamp-runinfo .ri-obj { width: 64px; height: 64px; background: 50% 50%/contain no-repeat; filter: drop-shadow(0 8px 8px rgba(0,0,0,.5)); transition: transform .16s cubic-bezier(.3,1.8,.5,1); }
.lamp-runinfo .ri-obj:hover { transform: translateY(-4px) scale(1.06); }
.lamp-runinfo .ri-item { display: flex; align-items: center; gap: 18px; }
.lamp-runinfo .ri-item .im { flex: none; width: 76px; height: 76px; border-radius: 50%; background-size: cover; background-position: center; box-shadow: 0 10px 18px -6px rgba(0,0,0,.6); }
.lamp-runinfo .ri-item .im.obj { border-radius: 0; background-size: contain; background-repeat: no-repeat; box-shadow: none; filter: drop-shadow(0 8px 8px rgba(0,0,0,.5)); }
.lamp-runinfo .ri-item .im.boss { box-shadow: 0 0 0 4px rgba(166,224,122,.3), 0 0 26px rgba(140,200,90,.6); }
.lamp-runinfo .ri-item .im.deck { background-color: #fff4dc; }
.lamp-runinfo .ri-item b { display: block; font: 800 30px/1 var(--f-chunk); color: #fff4dc; }
.lamp-runinfo .ri-item > span > span { display: block; margin-top: 6px; font: 700 18px/1.3 var(--f-body); color: rgba(255,244,220,.8); }
.lamp-runinfo .ri-item .ivy, .lamp-runinfo .ri-item .ivy span { color: #a6e07a; font-weight: 900; }
.lamp-runinfo .ri-item .seed { letter-spacing: 1.5px; color: #fff4dc; font-weight: 900; }
.lamp-runinfo .ri-none { font: 700 19px/1.35 var(--f-body); color: rgba(255,244,220,.74); }
.lamp-runinfo .ri-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; column-gap: 16px; margin-top: 4px; }
.lamp-runinfo .ri-fact small { display: block; font: 900 15px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.72); }
.lamp-runinfo .ri-fact b { display: block; margin-top: 6px; font: 800 28px/1 var(--f-chunk); color: #fff4dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lamp-runinfo .ri-fact b.g { color: #ffe08a; }

/* ==========================================================================
   DECK (board Deck, C+ cards built by components.js)
   ========================================================================== */
.lamp-deck .dk-veil { position: absolute; inset: 0; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(26,6,16,.84), rgba(20,5,12,.92)); }
.lamp-deck .dk-head { position: absolute; left: 96px; top: 46px; }
.lamp-deck .dk-head h1 { margin: 0; font: 800 64px/1 var(--f-chunk); color: #fff4dc; text-shadow: 0 4px 0 rgba(60,12,20,.55); }
.lamp-deck .dk-head p { margin: 10px 0 0 3px; font: 700 20px/1 var(--f-body); color: rgba(255,244,220,.8); }
.lamp-deck .dk-head p b { font-weight: 900; color: #ffd25e; }
.lamp-deck .dk-ctl { position: absolute; right: 150px; top: 56px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lamp-deck .dk-ctl small { font: 900 14px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.7); }
.lamp-deck .dk-seg { display: flex; gap: 4px; padding: 5px; border-radius: 20px; background: rgba(10,2,8,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.lamp-deck .dk-seg button { height: 46px; padding: 0 20px; border: 0; border-radius: 15px; background: none; color: rgba(255,244,220,.82); font: 800 21px/1 var(--f-chunk); cursor: pointer;
  transition: background .2s, color .2s, transform .16s cubic-bezier(.3,1.8,.5,1); }
.lamp-deck .dk-seg button:hover { color: #fff4dc; transform: translateY(-2px); }
.lamp-deck .dk-seg button.on { background: linear-gradient(180deg, #ffd860, #f2ad1c); color: #3a2006; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #b37608; }
.lamp-deck .dk-suit { position: absolute; left: 84px; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lamp-deck .dk-suit svg { width: 46px; height: 46px; }
.lamp-deck .dk-suit b { font: 800 34px/1 var(--f-chunk); color: #fff4dc; }
.lamp-deck .dk-suit small { font: 700 14px/1 var(--f-body); color: rgba(255,244,220,.72); }
.lamp-deck .dk-cw { position: absolute; width: 112px; height: 157px; transition: opacity .35s, filter .35s;
  animation: dk-deal calc(.5s / var(--speed, 1)) cubic-bezier(.2,1.5,.4,1) both; }
@keyframes dk-deal { from { opacity: 0; transform: translateY(-30px) scale(.7); } to { opacity: 1; transform: none; } }
.lamp-deck .dk-cw:hover { z-index: 50; }
.lamp-deck .dk-cw .card { width: calc(112px * var(--dk, 1)); height: calc(157px * var(--dk, 1)); font-size: calc(10.67px * var(--dk, 1)); cursor: default; transform: none; will-change: auto;
  transition: transform .22s cubic-bezier(.3,1.8,.5,1), opacity .35s, filter .35s; }
.lamp-deck .dk-cw:hover .card { transform: translateY(-.8em) scale(1.32); }
.lamp-deck .dk-cw.out .card { opacity: .34; filter: grayscale(.85); }
.lamp-deck .dk-cw.out:hover .card { opacity: .9; filter: none; }
.lamp-deck .dk-out { display: none; position: absolute; left: 50%; top: 44%; z-index: 6; transform: translate(-50%, -50%); padding: 4px 8px 5px; border-radius: 10px;
  background: rgba(20,6,12,.85); color: #fff4dc; font: 800 16px/1 var(--f-chunk); white-space: nowrap; pointer-events: none; }
.lamp-deck .dk-cw.out .dk-out { display: block; }
.lamp-deck .dk-cw.out:hover .dk-out { display: none; }
.lamp-deck .dk-foot { position: absolute; left: 96px; right: 96px; top: 984px; display: flex; align-items: center; justify-content: space-between; }
.lamp-deck .dk-stats { display: flex; gap: 40px; }
.lamp-deck .dk-st small { display: block; font: 900 14px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.72); }
.lamp-deck .dk-st b { display: block; margin-top: 6px; font: 800 28px/1 var(--f-chunk); color: #fff4dc; }
.lamp-deck .dk-st b.p { color: #7fd6ff; } .lamp-deck .dk-st b.f { color: #ff9d8c; } .lamp-deck .dk-st b.g { color: #ffd25e; } .lamp-deck .dk-st b.ivy { color: #a6e07a; }
.lamp-deck .dk-back { height: 76px; padding: 0 32px 4px; gap: 14px; border-radius: 24px; font: 800 32px/1 var(--f-chunk); }
.lamp-deck .dk-back .kbd { display: inline-block; padding: 3px 9px 4px; border-radius: 8px; background: rgba(40,0,0,.2); font: 900 13px/1 var(--f-body); text-shadow: none; opacity: 1; vertical-align: middle; }

/* ==========================================================================
   CODEX (board Codex)
   ========================================================================== */
.lamp-codex .ov-dlg { background: #1b0f26; }
.lamp-codex .cx-bg { position: absolute; inset: 0; background: url("../../../assets/bg/stage8.webp") 50% 50%/cover no-repeat; filter: saturate(.8) brightness(.62); pointer-events: none; }
.lamp-codex .cx-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(22,10,30,.9) 0%, rgba(22,10,30,.55) 30%, rgba(22,10,30,.62) 70%, rgba(22,10,30,.92) 100%), linear-gradient(180deg, rgba(22,10,30,.5), rgba(22,10,30,0) 30%, rgba(22,10,30,.7)); }
.lamp-codex .cx-head { position: absolute; left: 72px; top: 40px; }
.lamp-codex .cx-head h1 { margin: 0; font: 800 84px/1 var(--f-chunk); color: #ffd25e; text-shadow: 0 6px 0 rgba(110,50,0,.45), 0 0 40px rgba(255,170,50,.35); }
.lamp-codex .cx-head p { margin: 12px 0 0 3px; font: 700 21px/1.3 var(--f-body); color: rgba(255,244,220,.86); }
.lamp-codex .cx-prog { position: absolute; left: 72px; top: 194px; width: 250px; }
.lamp-codex .cx-prog small { display: block; font: 900 15px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.72); }
.lamp-codex .cx-prog b { display: block; margin-top: 6px; font: 800 40px/1 var(--f-chunk); color: #fff4dc; }
.lamp-codex .cx-prog b i { font-style: normal; font-size: 24px; color: rgba(255,244,220,.6); }
.lamp-codex .cx-bar { margin-top: 10px; height: 12px; border-radius: 8px; background: rgba(0,0,0,.35); box-shadow: inset 0 2px 4px rgba(0,0,0,.4); overflow: hidden; }
.lamp-codex .cx-bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(180deg, #ffd860, #f2ad1c); transform-origin: left; animation: ov-grow .8s cubic-bezier(.2,1.2,.4,1) both; }
.lamp-codex .cx-tabs { position: absolute; left: 380px; top: 66px; display: flex; gap: 4px; padding: 6px; border-radius: 22px; background: rgba(10,2,14,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.lamp-codex .cx-tabs button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; height: 68px; padding: 0 20px; border: 0; border-radius: 16px; background: none;
  color: rgba(255,244,220,.82); font: 800 21px/1 var(--f-chunk); cursor: pointer; transition: background .2s, color .2s, transform .16s cubic-bezier(.3,1.8,.5,1); }
.lamp-codex .cx-tabs button small { font: 700 14px/1 var(--f-body); color: rgba(255,244,220,.62); }
.lamp-codex .cx-tabs button:hover { color: #fff4dc; transform: translateY(-2px); }
.lamp-codex .cx-tabs button.on { background: linear-gradient(180deg, #ffd860, #f2ad1c); color: #3a2006; box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 4px 0 #b37608; }
.lamp-codex .cx-tabs button.on small { color: rgba(58,32,6,.75); }
.lamp-codex .cx-filt { position: absolute; left: 384px; top: 178px; display: flex; align-items: center; gap: 8px; }
.lamp-codex .cx-chip { height: 36px; padding: 0 16px; border: 0; border-radius: 18px; background: rgba(255,244,220,.08); color: rgba(255,244,220,.82); font: 700 16px/1 var(--f-body); cursor: pointer; transition: background .15s, color .15s; }
.lamp-codex .cx-chip:hover { background: rgba(255,244,220,.16); color: #fff4dc; }
.lamp-codex .cx-chip.on { background: #fff4dc; color: #2a1838; }
.lamp-codex .cx-chip .dot { display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 50%; vertical-align: 0; }
.lamp-codex .cx-filt .sep { width: 1px; height: 22px; margin: 0 6px; background: rgba(255,244,220,.18); }
.lamp-codex .cx-pager { position: absolute; right: 520px; top: 182px; display: flex; pointer-events: none; align-items: center; justify-content: flex-end; gap: 10px; font: 700 16px/1 var(--f-body); color: rgba(255,244,220,.75); white-space: nowrap; }
.lamp-codex .cx-pg { pointer-events: auto; width: 34px; height: 34px; padding: 0 0 3px; border: 0; border-radius: 50%; background: rgba(255,244,220,.1); color: #fff4dc; font: 800 20px/1 var(--f-chunk); cursor: pointer; transition: background .15s; }
.lamp-codex .cx-pg:hover:not(:disabled) { background: rgba(255,244,220,.22); }
.lamp-codex .cx-pg:disabled { cursor: not-allowed; opacity: .45; }
/* shelves */
.lamp-codex .cx-ledge { left: 380px; width: 1020px; }
.lamp-codex .cx-row { position: absolute; left: 386px; display: flex; gap: 2px; }
.lamp-codex .cx-it { position: relative; width: 126px; height: 140px; padding: 0 0 16px; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-end; justify-content: center; box-sizing: border-box; }
.lamp-codex .cx-it .pad { position: absolute; left: 28px; right: 28px; bottom: 7px; height: 13px; border-radius: 50%; background: #d6bc93; box-shadow: inset 0 5px 0 #a8875f; }
.lamp-codex .cx-it .ob { position: relative; display: block; width: 104px; height: 104px; background: 50% 50%/contain no-repeat; translate: 0 calc(var(--sink, .05) * 100%); /* stands on its own base (tools/sink.py) */
  filter: drop-shadow(0 3px 2px rgba(50,25,10,.5)); transition: transform .22s cubic-bezier(.3,1.8,.5,1), filter .2s; }
.lamp-codex .cx-it:hover .ob, .lamp-codex .cx-it:focus-visible .ob { transform: translateY(-14px) scale(1.07); filter: drop-shadow(0 14px 10px rgba(10,2,20,.45)) drop-shadow(0 0 14px rgba(255,236,190,.75)); }
.lamp-codex .cx-it.unk .ob { filter: brightness(0) saturate(0) opacity(.6) drop-shadow(0 0 1px rgba(255,244,220,.25)); }
.lamp-codex .cx-it.unk:hover .ob, .lamp-codex .cx-it.unk:focus-visible .ob { filter: brightness(0) saturate(0) opacity(.75) drop-shadow(0 0 10px rgba(255,236,190,.35)); }
.lamp-codex .cx-it.sel .ob { transform: translateY(-10px) scale(1.06); filter: drop-shadow(0 12px 8px rgba(10,2,20,.45)) drop-shadow(0 0 18px rgba(255,214,120,.95)); }
.lamp-codex .cx-it.unk.sel .ob { filter: brightness(0) saturate(0) opacity(.8) drop-shadow(0 0 16px rgba(255,214,120,.8)); }
.lamp-codex .cx-it .tick { position: absolute; left: 50%; bottom: -2px; width: 26px; height: 6px; margin-left: -13px; border-radius: 4px; background: #ffd25e; box-shadow: 0 0 12px rgba(255,210,94,.9); opacity: 0; transition: opacity .2s; }
.lamp-codex .cx-it.sel .tick { opacity: 1; }
.lamp-codex .cx-empty { position: absolute; left: 380px; top: 420px; width: 1020px; text-align: center; font: 700 22px/1.4 var(--f-body); color: rgba(255,244,220,.7); }
/* detail panel on a podium */
.lamp-codex .cx-det { position: absolute; left: 1452px; top: 104px; width: 404px; height: 910px; box-sizing: border-box; padding: 30px 34px; border-radius: 30px;
  background: rgba(20,8,26,.78); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -24px rgba(0,0,0,.8); display: flex; flex-direction: column; align-items: center; text-align: center; }
.lamp-codex .cx-stage { position: relative; width: 240px; height: 300px; flex: none; }
.lamp-codex .cx-stage .big { position: absolute; left: 20px; top: 8px; width: 200px; height: 200px; background: 50% 50%/contain no-repeat; translate: 0 calc(var(--sink, .05) * 100%); z-index: 2; filter: drop-shadow(0 4px 3px rgba(40,15,10,.5)); }
.lamp-codex .cx-stage.unk .big { filter: brightness(0) saturate(0) opacity(.7); }
.lamp-codex .pod { position: absolute; left: 32px; top: 196px; width: 176px; height: 108px; z-index: 1; }
.lamp-codex .pod::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 26px; border-radius: 50%;
  background: radial-gradient(ellipse 30% 30% at 50% 47%, rgba(85,48,26,.38) 0, rgba(85,48,26,.38) 62%, rgba(85,48,26,0) 66%), #f6ead3; box-shadow: 0 6px 0 #d8bf98; }
.lamp-codex .pod .pl-body { position: absolute; left: 24px; width: 128px; top: 13px; height: 65px; border-radius: 0 0 50% 50%/0 0 8px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 19px, rgba(110,70,35,.22) 19px, rgba(110,70,35,.22) 22px, var(--band) 22px, var(--band) 26px, rgba(0,0,0,0) 26px),
    repeating-linear-gradient(90deg, rgba(110,70,35,.12) 0, rgba(110,70,35,.12) 2px, rgba(0,0,0,0) 2px, rgba(0,0,0,0) 13px),
    linear-gradient(90deg, #ecdcbc 0, #ecdcbc 56%, #ccb08a 56%, #ccb08a 100%); }
.lamp-codex .pod .pl-foot { position: absolute; left: 12px; width: 152px; top: 70px; height: 16px; border-radius: 50%; background: #ead8b6; box-shadow: 0 5px 0 #c4a47e; }
.lamp-codex .pod .pl-foot::after { content: ""; position: absolute; z-index: -1; left: -12px; width: 176px; top: 14px; height: 18px; border-radius: 50%; background: #e2cda8; box-shadow: 0 5px 0 #b0906c, 0 10px 0 1px rgba(10,2,20,.3); }
.lamp-codex .cx-det h2 { margin: 18px 0 0; font: 800 38px/1.05 var(--f-chunk); color: #fff4dc; }
.lamp-codex .cx-tier { display: inline-block; margin-top: 10px; padding: 6px 14px 7px; border-radius: 14px; font: 900 15px/1 var(--f-body); letter-spacing: .3px; color: #2a1406; background: var(--band); }
.lamp-codex .cx-rule { margin-top: 18px; font: 500 21px/1.4 var(--f-body); color: rgba(255,244,220,.96); }
.lamp-codex .cx-flav { margin-top: 16px; font: italic 700 17px/1.4 var(--f-body); color: rgba(255,244,220,.6); }
.lamp-codex .cx-facts { margin-top: auto; width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.lamp-codex .cx-fact { display: flex; justify-content: space-between; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(255,244,220,.1); font: 700 16px/1.3 var(--f-body); color: rgba(255,244,220,.68); }
.lamp-codex .cx-fact b { font-weight: 900; color: #fff4dc; text-align: right; }
.lamp-codex .cx-hint { margin-top: 22px; width: 100%; box-sizing: border-box; padding: 14px 18px; border-radius: 18px; background: rgba(255,244,220,.07); font: 700 18px/1.4 var(--f-body); color: rgba(255,244,220,.8); }
.lamp-codex .cx-hint b { display: block; margin-bottom: 4px; font: 800 22px/1 var(--f-chunk); color: #ffd25e; }
.lamp-codex .t-common { --band: #e3a45c; } .lamp-codex .t-uncommon { --band: #5fd6c2; } .lamp-codex .t-rare { --band: #ff8a7a; } .lamp-codex .t-legendary { --band: #d6a6ff; }
.lamp-codex .t-boss { --band: #a6e07a; } .lamp-codex .t-decree { --band: #ffd25e; } .lamp-codex .t-invocation { --band: #c9a6ff; } .lamp-codex .t-constellation { --band: #8fb8ff; } .lamp-codex .t-mystery { --band: #ff9fcf; }
/* the Keeper */
.lamp-codex .cx-keeper { position: absolute; left: -60px; top: 560px; width: 460px; height: 520px; object-fit: contain; object-position: 50% 100%; pointer-events: none; }
.lamp-codex .cx-bub { position: absolute; left: 72px; top: 330px; width: 270px; z-index: 3; box-sizing: border-box; padding: 18px 26px 20px; border-radius: 30px;
  background: #fff4dc; color: #2a1838; font: 700 20px/1.3 var(--f-body); box-shadow: 0 24px 44px -16px rgba(30,6,24,.75); }
.lamp-codex .cx-bub .who { display: block; margin-bottom: 6px; font: 800 20px/1 var(--f-chunk); letter-spacing: .5px; color: #3c7a8a; }
.lamp-codex .cx-bub .tail { position: absolute; left: 66px; bottom: -30px; width: 42px; height: 42px; fill: #fff4dc; }
.lamp-codex .cx-close { position: absolute; right: 30px; top: 24px; z-index: 5; width: 56px; height: 56px; background: rgba(10,2,14,.6); }
.lamp-codex .cx-close svg { width: 26px; height: 26px; }

/* ==========================================================================
   ITEM MENU (sell / use popover under a Favor or consumable)
   ========================================================================== */
.lamp-menu { position: absolute; z-index: 650; display: flex; gap: 12px; align-items: center; padding: 12px 14px 16px; border-radius: 22px;
  background: rgba(30,10,30,.96); color: #fff4dc; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 40px -14px rgba(0,0,0,.7);
  animation: mn-in .22s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes mn-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
.lamp-menu .btn { font-size: 22px; padding: 10px 16px 12px; gap: 10px; }
.lamp-menu .btn svg { width: 22px; height: 22px; stroke-width: 2.6; }
.lamp-menu .mn-coin { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; margin: -6px -6px -6px 0; padding: 0 4px; box-sizing: border-box;
  background: url("../../../assets/ui/coin-blank.webp") 50% 50%/contain no-repeat; color: #5a3406; font: 800 15px/1 var(--f-chunk); text-shadow: 0 1px 0 rgba(255,240,200,.6);
  filter: drop-shadow(0 2px 1px rgba(60,25,0,.35)); }
.lamp-menu .why { max-width: 210px; padding: 0 6px; font: 900 15px/1.25 var(--f-body); color: #ff9b88; }

/* ---------- motion ---------- */
.reduced .lamp-ov *, .reduced .lamp-ov *::before, .reduced .lamp-ov *::after, .reduced .lamp-menu { transition-duration: .001ms !important; animation-duration: .001ms !important; animation-delay: 0s !important; }
@media (prefers-reduced-motion: reduce) {
  .lamp-ov, .lamp-ov *, .lamp-ov *::before, .lamp-ov *::after, .lamp-menu { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* Codex detail podium: the sculpted marble art (assets/ui/podium.webp, 3D matte) */
.lamp-codex .pod { height: 101px; background: url("../../../assets/ui/podium.webp?v=matte4") 50% 0 / 100% auto no-repeat; filter: drop-shadow(0 10px 8px rgba(10,2,20,.35)); }
.lamp-codex .pod::after, .lamp-codex .pod .pl-foot { display: none; }
.lamp-codex .pod .pl-body { display: none; }