/* Lamplight: trial (spec docs/reference/mockups-v3: boards "Trial" and "Divine")
   Score story on a left rail, Favors standing in an altar ledge's sockets, Offerings on a short ledge,
   the host in the scene, Zeus peeking bottom left, the hand flat and upright. No outlines, no tilts. */

.lamp-trial { background: #3a1a14; color: #fff4dc; -webkit-font-smoothing: antialiased; }
.lamp-trial .scene { position: absolute; inset: 0; pointer-events: none; }
.lamp-trial .scene svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lamp-trial .z-back { z-index: 1; }
.lamp-trial .z-boss { z-index: 2; }
/* Poseidon's swell rides low, round his waist, and only on the right half, so the god and the score rail stay clear */
.lamp-trial .z-sea { z-index: 3; translate: 0 calc(236px + var(--ex, 0px));
  -webkit-mask-image: linear-gradient(#000 540px, transparent 690px), linear-gradient(90deg, transparent 620px, #000 940px); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(#000 540px, transparent 690px), linear-gradient(90deg, transparent 620px, #000 940px); mask-composite: intersect; }
.lamp-trial .z-sea .curlL { display: none; }
.lamp-trial .z-sea svg { height: 1080px; bottom: auto; }
.lamp-trial .z-front { z-index: 4; }
.lamp-trial .boltsvg path { stroke-linecap: round; stroke-linejoin: round; }
/* light, not boxes: a dark pool behind the rail, a warm floor under the hand, the hearth's flicker */
.lamp-trial .pool { position: absolute; left: -260px; top: -160px; width: 1060px; height: 1200px; background: radial-gradient(ellipse at 34% 42%, rgba(38,10,18,.64) 0%, rgba(38,10,18,.36) 42%, rgba(38,10,18,0) 70%); }
@keyframes ltrial-flicker { 0% { opacity: .8; } 18% { opacity: 1; } 31% { opacity: .72; } 52% { opacity: .95; } 68% { opacity: .78; } 84% { opacity: 1; } 100% { opacity: .8; } }
.lamp-trial .floor { position: absolute; left: 0; right: 0; top: 690px; bottom: 0; background: linear-gradient(180deg, rgba(44,12,16,0), rgba(44,12,16,.5) 390px); }
/* atmosphere: the painted scene steps back behind the table. It is dimmed (the host stays bright), graded towards the
   sanctuary's darkest colour and falls into a vignette. No blur: a blurred
   background under the stage's clip leaves a dark fringe along the screen edges. */
.lamp-trial .scene .bg { filter: brightness(.76) saturate(1.08); }
.lamp-trial .grade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 72% at 64% 44%, rgba(16,6,20,0) 40%, rgba(16,6,20,.62) 100%),
    linear-gradient(180deg, rgba(20,8,28,.5) 0%, rgba(20,8,28,0) 30%, rgba(20,8,28,0) 58%, rgba(14,6,14,.42) 100%); }
.lamp-trial .grade::after { content: ""; position: absolute; inset: 0; background: var(--pal0); mix-blend-mode: multiply; opacity: .2; }

/* the host god */
.lamp-trial #boss { position: absolute; left: 944px; top: 194px; width: 640px; height: 640px; transform-origin: 50% 100%; cursor: pointer; pointer-events: auto; animation: ltrial-breathe 5s ease-in-out infinite; transition: opacity .45s ease; }
.lamp-trial #boss img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 88%, transparent 100%); }
@keyframes ltrial-breathe { 0%,100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-5px) scale(1.006, 1.012); } }
.lamp-trial #boss.ouch { animation: ltrial-hurt calc(.55s / var(--speed)) ease-out; }
@keyframes ltrial-hurt { 0% { transform: translateX(0); filter: brightness(1); } 12% { transform: translateX(-16px); filter: brightness(1.9) saturate(.6); } 35% { transform: translateX(12px); filter: brightness(1.3); } 60% { transform: translateX(-6px); } 100% { transform: translateX(0); filter: brightness(1); } }
.lamp-trial #boss.sink { animation: ltrial-sink 1.6s cubic-bezier(.5,-0.3,.7,1) forwards; }
@keyframes ltrial-sink { 0% { transform: none; opacity: 1; } 30% { transform: translateY(-30px); } 70% { opacity: .5; } 100% { transform: translateY(520px); opacity: 0; } }
.lamp-trial #boss[data-host] img { filter: none; }

/* ---------------------------------------------------------------- the UI layer */
.lamp-trial .ui { position: absolute; inset: 0; z-index: 10; pointer-events: none; transition: opacity .45s ease; }
.lamp-trial .ui > * { pointer-events: auto; }

/* left rail: the score story, no box */
.lamp-trial .rail { position: absolute; left: 64px; top: 38px; width: 480px; text-shadow: 0 2px 14px rgba(30,6,12,.55); pointer-events: none; }
.lamp-trial .r-trial { font: 800 48px/1 var(--f-chunk); letter-spacing: .3px; white-space: nowrap; text-shadow: 0 4px 0 rgba(70,16,10,.35), 0 0 30px rgba(40,10,16,.5); }
.lamp-trial.is-boss .r-trial { font-size: 40px; }
.lamp-trial .r-where { margin-top: 10px; font: 600 20px/1.2 var(--f-body); color: rgba(255,244,220,.8); }
.lamp-trial .r-reward { display: flex; align-items: center; gap: 9px; margin-top: 12px; font: 600 19px/1 var(--f-body); color: rgba(255,244,220,.8); }
.lamp-trial .r-reward b { font: 800 24px/1 var(--f-chunk); color: #ffd25e; }
.lamp-trial .r-reward .coin { width: 24px; height: 24px; }
.lamp-trial .rail .rule { display: flex; align-items: center; gap: 10px; margin-top: 12px; max-width: 470px; font: 600 17px/1.25 var(--f-body); color: rgba(255,244,220,.9); pointer-events: auto; cursor: help; }
.lamp-trial .rule .ic { flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: rgba(30,8,14,.6); box-shadow: 0 0 16px rgba(166,224,122,.45); }
.lamp-trial .rule .ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lamp-trial .rule .rt span { color: #c8f0a4; font-weight: 900; }

/* the grudge: a big number and a warm bar */
.lamp-trial .grudge { position: absolute; left: 64px; top: 202px; width: 470px; cursor: help; }
.lamp-trial.is-boss .grudge { top: 226px; }
.lamp-trial .g-label { display: flex; align-items: center; gap: 12px; font: 700 19px/1 var(--f-body); color: rgba(255,244,220,.82); text-shadow: 0 2px 12px rgba(30,6,12,.6); }
.lamp-trial .g-face { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-view-box: inset(4% 27% 50% 27%); /* the head of a matte bust */ background: #ffb25a; box-shadow: 0 4px 12px -2px rgba(30,6,12,.55); }
.lamp-trial .g-face.hit { animation: ltrial-bop calc(.5s / var(--speed)) cubic-bezier(.2,1.6,.4,1); }
.lamp-trial .g-num { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; height: 112px; white-space: nowrap; }
.lamp-trial .g-big { display: inline-block; font: 800 112px/1 var(--f-chunk); color: #fff4dc; text-shadow: 0 6px 0 rgba(96,22,10,.38), 0 0 44px rgba(255,120,60,.38); transform-origin: 20% 70%; }
.lamp-trial .g-big.hit { animation: ltrial-ghit calc(.5s / var(--speed)) cubic-bezier(.2,1.6,.4,1); }
@keyframes ltrial-ghit { 0% { transform: scale(1); } 20% { transform: scale(1.22); color: #fff; } 100% { transform: scale(1); } }
@keyframes ltrial-bop { 0% { transform: scale(1); } 30% { transform: scale(1.2); } 100% { transform: scale(1); } }
.lamp-trial .g-of { font: 800 32px/1 var(--f-chunk); color: rgba(255,244,220,.58); }
.lamp-trial .grudge .bar { position: relative; margin-top: 12px; width: 440px; height: 26px; border-radius: 99px; background: rgba(30,8,14,.6); box-shadow: inset 0 3px 8px rgba(0,0,0,.4); overflow: hidden; }
.lamp-trial .grudge .ghost { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; background: #fff1cf; transition: width calc(.55s / var(--speed)) ease-out calc(.5s / var(--speed)); }
.lamp-trial .grudge .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 99px; background: linear-gradient(180deg, #ffb257 0%, #ff6a3a 55%, #e0401f 100%); box-shadow: inset 0 3px 0 rgba(255,255,255,.38); transition: width calc(.5s / var(--speed)) cubic-bezier(.3,1.35,.5,1); }
.lamp-trial .g-note { margin-top: 10px; font: 600 18px/1.2 var(--f-body); color: rgba(255,244,220,.82); text-shadow: 0 2px 12px rgba(30,6,12,.6); }
.lamp-trial .g-note b { font-weight: 900; color: #fff4dc; }
.lamp-trial .grudge .gn1, .lamp-trial .grudge.chipped .gn0 { display: none; }
.lamp-trial .grudge.chipped .gn1 { display: inline; }

/* the hand readout: name + level, then Points × Factor slabs */
.lamp-trial .readout { position: absolute; left: 64px; top: 462px; width: 520px; pointer-events: none; }
.lamp-trial.is-boss .readout { top: 476px; }
.lamp-trial .ro-name { display: flex; align-items: baseline; gap: 14px; height: 56px; white-space: nowrap; text-shadow: 0 4px 0 rgba(70,16,10,.32), 0 0 26px rgba(30,6,12,.55); transform-origin: 10% 70%; }
.lamp-trial .ro-name.say { animation: ltrial-namepop calc(.4s / var(--speed)) cubic-bezier(.2,1.7,.4,1); }
@keyframes ltrial-namepop { from { transform: scale(.6); opacity: .2; } to { transform: scale(1); opacity: 1; } }
.lamp-trial #hname { font: 800 54px/1 var(--f-chunk); }
.lamp-trial #hname.long { font-size: 44px; }
.lamp-trial #hname.muted { font: 600 25px/56px var(--f-body); color: rgba(255,244,220,.72); text-shadow: 0 2px 12px rgba(30,6,12,.6); }
.lamp-trial .ro-lv { font: 700 20px/1 var(--f-body); color: #ffd25e; text-shadow: none; }
.lamp-trial .ro-row { display: flex; align-items: center; gap: 18px; margin-top: 40px; width: 440px; } /* as wide as the grudge bar above it */
.lamp-trial .num { position: relative; flex: 1 1 0; min-width: 176px; height: 108px; box-sizing: border-box; padding: 0 26px; border-radius: 28px; display: flex; align-items: center; justify-content: center; transition: filter .25s; }
.lamp-trial .num.pts { background: linear-gradient(180deg, #52d2ff 0%, #22a3ef 60%, #1688da 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -5px 0 rgba(0,40,90,.12), 0 8px 0 #0f5fa6, 0 0 50px rgba(39,183,255,.42), 0 22px 30px -14px rgba(0,20,60,.6); }
.lamp-trial .num.fac { background: linear-gradient(180deg, #ff7a66 0%, #f2483a 60%, #de3226 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), inset 0 -5px 0 rgba(90,0,0,.12), 0 8px 0 #9c1c15, 0 0 50px rgba(255,77,61,.42), 0 22px 30px -14px rgba(60,0,0,.6); }
.lamp-trial .num.dim { filter: saturate(.3) brightness(.78); }
.lamp-trial .num b { display: block; font: 800 68px/1 var(--f-chunk); color: #fff; text-shadow: 0 4px 0 rgba(0,0,0,.16); white-space: nowrap; }
.lamp-trial .num i { position: absolute; left: 8px; top: -30px; font: 700 16px/1 var(--f-body); font-style: normal; letter-spacing: .4px; text-shadow: 0 2px 10px rgba(30,6,12,.7); }
.lamp-trial .num.pts i { color: #a8e6ff; } .lamp-trial .num.fac i { color: #ffb9ae; }
.lamp-trial .num.fac.hot { animation: ltrial-hot .5s ease infinite alternate; }
@keyframes ltrial-hot { from { filter: brightness(1); } to { filter: brightness(1.15) drop-shadow(0 0 22px rgba(255,150,60,.9)); } }
.lamp-trial .ro-x { font: 800 50px/1 var(--f-chunk); color: rgba(255,244,220,.85); text-shadow: 0 0 20px rgba(30,6,12,.6); }

/* ---------------------------------------------------------------- Favors: objects standing in the altar's sockets */
.lamp-trial .f-head { position: absolute; left: 592px; top: 26px; font: 700 18px/1 var(--f-body); color: rgba(255,244,220,.85); text-shadow: 0 2px 12px rgba(30,6,12,.65); pointer-events: none; }
.lamp-trial .f-head span, .lamp-trial .o-head span { margin-left: 8px; font-weight: 900; color: rgba(255,244,220,.76); }
.lamp-trial .ledge.altar { left: 580px; top: 178px; width: 710px; height: 40px; z-index: 0; }
.lamp-trial .f-row { position: absolute; left: 592px; top: 52px; z-index: 2; display: flex; gap: 14px; }
.lamp-trial .fslot { position: relative; width: 126px; height: 150px; flex: none; }
.lamp-trial .fslot .pad, .lamp-trial .oslot .pad { position: absolute; left: 25px; right: 25px; bottom: 7px; height: 13px; border-radius: 50%; background: #d6bc93; box-shadow: inset 0 5px 0 #a8875f; transition: transform .22s, opacity .22s; }
.lamp-trial .fslot .sord { position: absolute; left: 0; right: 0; bottom: -9px; height: 13px; text-align: center; font: 800 13px/13px var(--f-chunk); letter-spacing: 1.5px; color: rgba(106,76,48,.82); text-shadow: 0 1px 0 rgba(255,248,232,.75), 0 -1px 0 rgba(84,58,34,.22); pointer-events: none; } /* engraved into the shelf's front face, not printed under it */
.lamp-trial .fslot:hover .pad, .lamp-trial .fslot:focus-within .pad { transform: scale(.72); opacity: .6; }
.lamp-trial .fslot .favor { --w: 116px; --h: 116px; position: absolute; left: 5px; bottom: 14px; z-index: 1; transition: transform calc(.22s / var(--speed)) cubic-bezier(.3,1.8,.5,1), opacity .25s; }
.lamp-trial .fslot .favor .art { translate: 0 calc(var(--sink, .05) * 100%); } /* stands on its own base (tools/sink.py); the edition shimmer moves with it */
.lamp-trial .fslot .favor .nm, .lamp-trial .fslot .favor .ord, .lamp-trial .fslot .favor .gem { display: none; }
.lamp-trial .fslot .favor:hover, .lamp-trial .fslot .favor:focus-visible { transform: translateY(-18px) scale(1.08); z-index: 5; }
.lamp-trial .fslot .favor:hover .art img, .lamp-trial .fslot .favor:focus-visible .art img { filter: drop-shadow(0 16px 10px rgba(30,8,14,.45)) drop-shadow(0 0 14px rgba(255,244,214,.9)) drop-shadow(0 0 28px rgba(255,190,90,.7)); }
.lamp-trial .fslot .favor.drag { transition: none; z-index: 400; }
.lamp-trial .fslot .favor.fire { animation: ltrial-ffire calc(.55s / var(--speed)) cubic-bezier(.2,1.6,.4,1); }
.lamp-trial .fslot .favor.fire .art img { filter: drop-shadow(0 0 14px rgba(255,214,120,.95)) drop-shadow(0 0 34px rgba(255,96,60,.8)); }
@keyframes ltrial-ffire { 0% { transform: scale(1); } 30% { transform: scale(1.32) translateY(-12px); } 60% { transform: scale(.92); } 100% { transform: scale(1); } }
.lamp-trial .fslot .favor .stk { bottom: -4px; }

/* ---------------------------------------------------------------- top right: Offerings, obols, icon buttons */
.lamp-trial .topr { position: absolute; right: 40px; top: 26px; z-index: 6; display: flex; align-items: flex-start; gap: 26px; }
.lamp-trial .o-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lamp-trial .o-head { font: 700 18px/1 var(--f-body); color: rgba(255,244,220,.85); text-shadow: 0 2px 12px rgba(30,6,12,.65); white-space: nowrap; }
.lamp-trial .o-head span { margin-left: 4px; }
.lamp-trial .ledge.mini { z-index: 0; left: -14px; right: -14px; top: 152px; height: 40px; } /* same line and height as the Favors altar: 178–218 */
.lamp-trial .o-row { position: relative; z-index: 1; display: flex; gap: 6px; margin-top: 50px; } /* slots end at 202, like the Favor slots */
.lamp-trial .oslot { position: relative; width: 96px; height: 104px; flex: none; }
.lamp-trial .oslot .pad { left: 20px; right: 20px; }
.lamp-trial .oslot .consum { --w: 84px; --h: 84px; position: absolute; left: 6px; bottom: 17px; z-index: 1; transition: transform calc(.22s / var(--speed)) cubic-bezier(.3,1.8,.5,1); }
.lamp-trial .oslot .consum img { translate: 0 calc(var(--sink, .06) * 100%); }
.lamp-trial .oslot .consum span { display: none; }
.lamp-trial .oslot .consum:hover, .lamp-trial .oslot .consum:focus-visible { transform: translateY(-14px) scale(1.08); }
.lamp-trial .oslot .consum.fire { animation: ltrial-ffire calc(.55s / var(--speed)) cubic-bezier(.2,1.6,.4,1); }
.lamp-trial .obols { display: flex; align-items: center; gap: 14px; padding: 30px 6px 0 4px; }
.lamp-trial .obols .coin { width: 46px; height: 46px; }
.lamp-trial .obols b { min-width: 34px; font: 800 56px/1 var(--f-chunk); color: #ffe08a; text-shadow: 0 4px 0 rgba(120,60,0,.4), 0 0 26px rgba(255,190,60,.45); }
.lamp-trial .icons { display: flex; gap: 12px; padding-top: 34px; }

/* ---------------------------------------------------------------- speech: cream bubbles with a soft tail */
.lamp-trial .bubble { z-index: 70; box-sizing: border-box; max-width: none; background: #fff4dc; color: #2a1838; border-radius: 30px; padding: 18px 26px 20px; font: 600 24px/1.3 var(--f-body); box-shadow: 0 24px 44px -16px rgba(30,6,12,.75); }
.lamp-trial .bubble::after { display: none; }
.lamp-trial .bubble .tail { position: absolute; width: 42px; height: 42px; fill: #fff4dc; }
.lamp-trial #pb { left: 1550px; top: 214px; width: 330px; transform-origin: 0% 60%; }
.lamp-trial #pb .tail { left: -30px; top: 62px; }
.lamp-trial #zb { left: 36px; top: 704px; width: 392px; transform-origin: 30% 120%; }
.lamp-trial #zb .tail { left: 120px; bottom: -30px; }

/* Zeus peeks in from the bottom left */
.lamp-trial .zeus { position: absolute; left: -74px; top: 792px; width: 400px; height: 400px; z-index: 2; cursor: pointer; }
.lamp-trial .zeus img { width: 100%; height: 100%; object-fit: contain; display: block; animation: ltrial-peek 6s ease-in-out infinite; }
@keyframes ltrial-peek { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.lamp-trial .zeus.laugh img { animation: ltrial-laugh .12s linear 10; }
@keyframes ltrial-laugh { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* ---------------------------------------------------------------- the deck, the actions */
.lamp-trial .deckpile { position: absolute; left: 1482px; top: 844px; width: 124px; height: 174px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.3,1.8,.5,1); }
.lamp-trial .deckpile:hover, .lamp-trial .deckpile:focus-visible { transform: translateY(-8px); }
.lamp-trial .deckpile .cardback { position: absolute; inset: 0; font-size: 11.8px; }
.lamp-trial .deckpile .cardback:nth-child(1) { transform: translate(6px, -6px); }
.lamp-trial .deckpile .cardback:nth-child(2) { transform: translate(-3px, -3px); }
.lamp-trial .deck-n { position: absolute; left: 1482px; top: 1030px; width: 124px; text-align: center; font: 800 24px/1 var(--f-chunk); color: #fff4dc; text-shadow: 0 2px 10px rgba(30,6,12,.8); pointer-events: none; }
.lamp-trial .deck-n .of { color: rgba(255,244,220,.72); }
.lamp-trial .acts { position: absolute; left: 1640px; top: 810px; width: 240px; display: flex; flex-direction: column; gap: 22px; }
.lamp-trial .act { position: relative; }
.lamp-trial .acts .btn.stack { width: 100%; box-sizing: border-box; flex-direction: column; justify-content: center; gap: 7px; padding: 0 20px 6px; white-space: nowrap; letter-spacing: -.3px; border-radius: 26px; }
.lamp-trial #playBtn { height: 108px; font-size: 32px; }
.lamp-trial #discBtn { height: 88px; font-size: 30px; }
.lamp-trial .acts .btn.stack .kbd { font-size: 12px; padding: 3px 8px 4px; border-radius: 9px; background: rgba(40,0,0,.2); vertical-align: 0; }
.lamp-trial .acts .btn.off { filter: saturate(.25) brightness(.72); cursor: not-allowed; transform: none; }
.lamp-trial .badge { position: absolute; right: -18px; top: -26px; z-index: 2; width: 50px; height: 50px; border-radius: 50%; background: #fff4dc; font: 800 30px/50px var(--f-chunk); text-align: center; box-shadow: 0 5px 0 rgba(90,30,20,.35), 0 10px 18px -6px rgba(0,0,0,.55); pointer-events: none; }
.lamp-trial .badge.pl { color: #d9401f; } .lamp-trial .badge.di { color: #0e8a86; }
/* the last play: the badge turns ember and glows (a glow, not a bounce) */
.lamp-trial .badge.pl.last { background: #ff6a3a; color: #fff4dc; animation: ltrial-last calc(1.2s / var(--speed)) ease-in-out infinite; }
.lamp-trial .badge.pl.last.bump { animation: bump .32s cubic-bezier(.2,2,.4,1), ltrial-last calc(1.2s / var(--speed)) ease-in-out .32s infinite; }
@keyframes ltrial-last { 0%,100% { box-shadow: 0 5px 0 rgba(120,30,10,.45), 0 10px 18px -6px rgba(0,0,0,.55), 0 0 0 0 rgba(255,120,60,.0); } 50% { box-shadow: 0 5px 0 rgba(120,30,10,.45), 0 10px 18px -6px rgba(0,0,0,.55), 0 0 26px 8px rgba(255,120,60,.75); } }
.lamp-trial .sortbtn { justify-content: center; width: 100%; padding: 6px 0; text-shadow: 0 2px 10px rgba(30,6,12,.8); }
.lamp-trial .sortbtn .kbd { font-size: 12px; background: rgba(255,244,220,.14); color: rgba(255,244,220,.85); vertical-align: 0; }

/* tall screens: the bottom of the table follows the bottom edge */
.lamp-trial .deckpile, .lamp-trial .deck-n, .lamp-trial .acts, .lamp-trial .zeus, .lamp-trial #zb, .lamp-trial #table, .lamp-trial .hint, .lamp-trial #boss, .lamp-trial #pb { translate: 0 var(--ex, 0px); }

/* ---------------------------------------------------------------- cards on the table: C+ stock at board size, flat and upright */
.lamp-trial #table { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.lamp-trial #table .card { width: 168px; height: 236px; font-size: 16px; pointer-events: auto; --r: 0deg; }
.lamp-trial #table .card .cardback { font-size: 16px; }
.lamp-trial #table .card.sel { --lift: -34px; }
.lamp-trial #table .card.sel.scoring { --lift: -58px; }
.lamp-trial #table .card.sel:hover { --lift: -46px; }
.lamp-trial #table .card.sel.scoring:hover { --lift: -64px; }
.lamp-trial #table .card.sel:not(.scoring) .face { box-shadow: inset 0 .1em 0 #fff, 0 .18em 0 #d6bb86, 0 1.1em 1.7em -.8em rgba(20,8,12,.6), 0 0 1.4em .2em rgba(255,214,120,.5); filter: brightness(.9) saturate(.8); }
/* game.css stretches a debuffed face's ::after over its lower half; keep it the gold hairline */
.lamp-trial .card.debuff .face::after { left: .42em; right: .42em; top: .42em; bottom: .42em; height: auto; }
.lamp-trial #table .card.hit .face { animation: ltrial-chit calc(.4s / var(--speed)) cubic-bezier(.2,1.8,.4,1); }
@keyframes ltrial-chit { 0% { transform: scale(1); } 35% { transform: scale(1.17); } 100% { transform: scale(1); } }
.lamp-trial #table .card .face.nope { animation: ltrial-deny .32s; }
@keyframes ltrial-deny { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }

/* scoring juice */
.lamp-trial .orb { position: absolute; z-index: 925; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; pointer-events: none; box-shadow: inset 0 3px 0 rgba(255,255,255,.55), 0 0 16px 5px rgba(255,255,255,.45); }
.lamp-trial .dmg { position: absolute; z-index: 928; pointer-events: none; transform: translate(-50%, -50%); white-space: nowrap; font: 800 140px/1 var(--f-chunk); color: #fff7e4; text-shadow: 0 7px 0 rgba(130,32,10,.45), 0 0 44px rgba(255,150,60,.95), 0 0 110px rgba(255,90,40,.75); }
.lamp-trial .hint { position: absolute; left: 0; right: 0; bottom: 10px; z-index: 30; display: none; text-align: center; font: 700 16px/1 var(--f-body); color: rgba(255,244,220,.62); text-shadow: 0 2px 10px rgba(30,6,12,.9); pointer-events: none; }

/* ---------------------------------------------------------------- end states and the Trial's title card */
.lamp-trial .ov { position: absolute; inset: 0; z-index: 60; display: none; }
.lamp-trial .ov.on { display: block; }
.lamp-trial #end .veil { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(40,10,16,.35), rgba(30,6,12,.78)); animation: ltrial-fadein .4s ease-out both; }
.lamp-trial #end.lose .veil { background: radial-gradient(ellipse at 50% 42%, rgba(30,14,34,.42), rgba(14,6,20,.84)); }
.lamp-trial #end .end { position: absolute; left: 0; top: 268px; width: 1920px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; translate: 0 calc(var(--ex, 0px) / 2); }
.lamp-trial #endT { margin: 0 0 6px; font: 800 136px/1 var(--f-chunk); color: #ffd25e; white-space: nowrap; text-shadow: 0 8px 0 rgba(120,50,0,.45), 0 0 60px rgba(255,170,50,.8); animation: ltrial-endin calc(.7s / var(--speed)) cubic-bezier(.2,1.7,.4,1) both; }
.lamp-trial #endT span { display: inline-block; opacity: 0; animation: ltrial-letter calc(.5s / var(--speed)) cubic-bezier(.2,1.7,.4,1) calc(.1s + var(--i) * 38ms) forwards; }
.lamp-trial #end.won #endT { animation: none; }
.lamp-trial #end.lose #endT { font-size: 124px; color: #fff4dc; text-shadow: 0 8px 0 rgba(60,10,20,.5), 0 0 50px rgba(255,90,60,.5); }
/* (124px keeps "The grudge holds" clear of the host's bubble on the right) */
@keyframes ltrial-endin { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes ltrial-letter { from { opacity: 0; transform: translateY(40px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes ltrial-fadein { from { opacity: 0; } to { opacity: 1; } }
.lamp-trial #endS { margin: 0; max-width: 1300px; font: 600 28px/1.35 var(--f-body); color: rgba(255,244,220,.9); text-shadow: 0 2px 12px rgba(20,4,10,.7); animation: ltrial-fadein .5s ease-out .35s both; }
.lamp-trial #endS b, .lamp-trial #endLoot b { font: 800 34px/1 var(--f-chunk); color: #ffd25e; }
/* the tribute, line by line, as soft coin chips */
.lamp-trial #endLoot { margin: 10px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1240px; animation: ltrial-fadein .5s ease-out .55s both; }
.lamp-trial #endLoot .tchip { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 2px 12px; border-radius: 26px; background: rgba(28,6,14,.55); box-shadow: 0 12px 24px -12px rgba(10,2,6,.8); font: 600 22px/1 var(--f-body); color: rgba(255,244,220,.88); white-space: nowrap; }
.lamp-trial #endLoot .tchip .coin { width: 30px; height: 30px; }
.lamp-trial #endLoot b { font-size: 28px; }
.lamp-trial #endLoot:empty { display: none; }
.lamp-trial #end .btns { margin-top: 26px; animation: ltrial-fadein .4s ease-out .75s both; }
.lamp-trial #end .btns:empty { display: none; }
.lamp-trial #end .btns .btn { height: 104px; padding: 0 44px 4px; font-size: 46px; gap: 18px; border-radius: 28px; }
.lamp-trial #end .btns .coin { width: 40px; height: 40px; }
.lamp-trial #end .btns .kbd { font-size: 14px; padding: 4px 10px 5px; border-radius: 9px; background: rgba(40,0,0,.2); vertical-align: 0; }
/* the title card that opens a Trial: no veil, no clicks */
.lamp-trial #end.intro { pointer-events: none; }
.lamp-trial #end.intro .veil { background: radial-gradient(ellipse 55% 40% at 50% 34%, rgba(30,6,12,.55), rgba(30,6,12,0) 70%); }
.lamp-trial #end.intro .end { top: 280px; }
.lamp-trial #end.intro #endT { font-size: 120px; }
/* a finished Trial clears the table so only the title, the facts and one slab are left */
.lamp-trial.ended .ui > :not(.topr):not(.zeus), .lamp-trial.ended #table, .lamp-trial.ended .hint, .lamp-trial.ended .o-wrap { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
/* the end screens keep Zeus and his bubble above the veil: he heckles the result */
.lamp-trial.ended .ui { z-index: 61; }
.lamp-trial.ended #zb { z-index: 62; }

/* ---------------------------------------------------------------- Divine Trial reveal (board "Divine") */
.lamp-trial.vs-on .ui, .lamp-trial.vs-on #boss, .lamp-trial.vs-on #pb, .lamp-trial.vs-on #zb { opacity: 0; pointer-events: none; }
.lamp-trial #vs { z-index: 80; overflow: clip; transition: opacity .4s ease; }
.lamp-trial #vs.out { opacity: 0; }
.lamp-trial #vs .vs-dark { position: absolute; inset: 0; background: radial-gradient(ellipse 50% 75% at 76% 55%, rgba(30,10,14,.15), rgba(22,8,12,.72) 60%, rgba(14,6,10,.9) 100%); animation: ltrial-fadein .5s ease-out both; }
.lamp-trial #vs .vs-glow { position: absolute; left: -200px; top: -140px; width: 1200px; height: 900px; background: radial-gradient(ellipse at 40% 40%, rgba(110,200,90,.22), rgba(110,200,90,0) 60%); mix-blend-mode: screen; opacity: 0; transition: opacity 1s ease; }
.lamp-trial #vs.s2 .vs-glow { opacity: 1; }
.lamp-trial #vs .vs-host { position: absolute; left: 1090px; top: 236px; width: 860px; height: 860px; object-fit: contain; object-position: 50% 100%; transform-origin: 50% 100%; transform: translateX(120px) scale(.94); opacity: 0; filter: brightness(.4); transition: transform .9s cubic-bezier(.2,1.2,.4,1), opacity .6s ease, filter .9s ease; }
.lamp-trial #vs .vs-keeper { position: absolute; left: -150px; top: 690px; width: 400px; height: 400px; object-fit: contain; filter: brightness(.5) saturate(.8); transform: translateX(-100px); opacity: 0; transition: transform .9s cubic-bezier(.2,1.2,.4,1), opacity .6s; }
.lamp-trial #vs.s1 .vs-host { transform: none; opacity: 1; filter: drop-shadow(0 0 40px rgba(130,210,100,.35)); }
.lamp-trial #vs.s1 .vs-keeper { transform: none; opacity: 1; }
.lamp-trial #vs .vs-lamp { position: absolute; left: -110px; top: 880px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(120,190,255,.6), rgba(80,150,255,.15) 40%, rgba(80,150,255,0) 66%); mix-blend-mode: screen; animation: ltrial-flicker 2s ease-in-out infinite; }
.lamp-trial #vs .med { position: absolute; left: 150px; top: 96px; width: 180px; height: 180px; border-radius: 50%; background-color: #1d0e10; background-size: cover; background-position: center; box-shadow: 0 20px 40px -14px rgba(0,0,0,.8), 0 0 60px rgba(130,210,100,.55); transform: scale(3.2); opacity: 0; transition: transform .55s cubic-bezier(.2,1.8,.4,1), opacity .2s; }
.lamp-trial #vs.s2 .med { transform: none; opacity: 1; }
.lamp-trial #vs .ring { position: absolute; left: 240px; top: 186px; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(166,224,122,0) 55%, rgba(166,224,122,.7) 62%, rgba(166,224,122,0) 70%); opacity: 0; }
.lamp-trial #vs.s2 .ring { animation: ltrial-ring 1s ease-out forwards; }
.lamp-trial #vs.s2 .ring.r2 { animation-delay: .15s; }
@keyframes ltrial-ring { 0% { opacity: 1; transform: scale(.6); } 100% { opacity: 0; transform: scale(5); } }
.lamp-trial #vs .vs-txt { position: absolute; left: 370px; top: 104px; width: 1000px; }
.lamp-trial #vs .kick { font: 700 20px/1 var(--f-body); letter-spacing: .6px; color: #a6e07a; text-shadow: 0 2px 12px rgba(0,0,0,.7); opacity: 0; transition: opacity .4s; }
.lamp-trial #vs.s2 .kick { opacity: 1; }
.lamp-trial #vs .ttl { margin: 10px 0 0; white-space: nowrap; font: 800 80px/.95 var(--f-chunk); color: #fff4dc; text-shadow: 0 6px 0 rgba(20,40,10,.55), 0 0 40px rgba(130,210,100,.4); }
.lamp-trial #vs .ttl.long { font-size: 64px; }
.lamp-trial #vs .ttl span { display: inline-block; opacity: 0; transform: translateY(30px) scale(.6); }
.lamp-trial #vs.s3 .ttl span { animation: ltrial-letter2 .5s cubic-bezier(.2,1.8,.4,1) calc(var(--i) * 35ms) forwards; }
@keyframes ltrial-letter2 { to { opacity: 1; transform: none; } }
.lamp-trial #vs .vs-body { position: absolute; left: 150px; top: 330px; width: 920px; display: flex; flex-direction: column; gap: 30px; }
.lamp-trial #vs .rule2, .lamp-trial #vs .facts { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s cubic-bezier(.2,1.4,.4,1); }
.lamp-trial #vs.s4 .rule2, .lamp-trial #vs.s4 .facts { opacity: 1; transform: none; }
.lamp-trial #vs .facts { transition-delay: .1s; }
.lamp-trial #vs .rule2 h2 { margin: 0; font: 800 46px/1.05 var(--f-chunk); color: #fff4dc; text-shadow: 0 3px 14px rgba(0,0,0,.6); }
.lamp-trial #vs .rule2 h2 span { color: #a6e07a; font-weight: inherit; }
.lamp-trial #vs .rule2 p { margin: 10px 0 0; font: 600 22px/1.35 var(--f-body); color: rgba(255,244,220,.88); text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.lamp-trial #vs .facts { display: flex; gap: 46px; }
.lamp-trial #vs .fact small { display: block; font: 700 15px/1 var(--f-body); letter-spacing: .3px; color: rgba(255,244,220,.78); }
.lamp-trial #vs .fact b { display: flex; align-items: center; gap: 10px; margin-top: 8px; font: 800 44px/1 var(--f-chunk); color: #fff4dc; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.lamp-trial #vs .fact b.hl { color: #a6e07a; }
.lamp-trial #vs .fact .x2 { padding: 5px 10px 6px; border-radius: 12px; background: linear-gradient(180deg, #ff7a66, #e83a2c); box-shadow: 0 4px 0 #9c1c15; font-size: 22px; color: #fff; text-shadow: none; }
.lamp-trial #vs .fact .coin { width: 34px; height: 34px; }
/* the demo: the real hand under the rule */
.lamp-trial #vs .demo { display: flex; align-items: flex-start; gap: 27px; height: 214px; }
.lamp-trial #vs .demo[hidden] { display: none; }
.lamp-trial #vs .cw { position: relative; flex: none; transform: translateY(60px) scale(.8); opacity: 0; transition: transform .5s cubic-bezier(.25,1.4,.45,1), opacity .4s; transition-delay: calc(var(--i) * .06s); }
.lamp-trial #vs .cw.keep { margin-left: 30px; }
.lamp-trial #vs.s5 .cw { transform: none; opacity: 1; }
.lamp-trial #vs .cw .card { --lift: 0px; width: 131px; height: 184px; font-size: 12.5px; cursor: default; pointer-events: none; }
.lamp-trial #vs .cw .card .cardback { font-size: 12.5px; }
.lamp-trial #vs .cw .card .tag { display: none; }
.lamp-trial #vs .cw .card .face { transition: filter .5s ease, transform .3s cubic-bezier(.3,1.8,.5,1), box-shadow .5s; }
.lamp-trial #vs.s6 .cw { transition-delay: calc(var(--i) * .28s); }
.lamp-trial #vs.s6 .cw.hit .card .face { filter: grayscale(.9) brightness(.62); transform: translateY(10px); transition-delay: calc(var(--i) * .28s); }
.lamp-trial #vs.s6 .cw.keep .card .face { box-shadow: inset 0 .12em 0 #fff, 0 .2em 0 #d6bb86, 0 1.1em 1.6em -.75em rgba(0,0,0,.7), 0 0 2em .4em rgba(255,200,110,.75); transition-delay: calc(var(--i) * .28s); }
.lamp-trial #vs .vine { position: absolute; z-index: 5; top: 10px; right: 9px; width: 54px; height: 54px; border-radius: 50%; background-color: #1d0e10; background-size: cover; background-position: center; box-shadow: 0 0 18px rgba(130,210,100,.7); opacity: 0; transform: scale(2); transition: opacity .3s ease, transform .45s cubic-bezier(.2,1.8,.4,1); transition-delay: calc(var(--i) * .28s); }
.lamp-trial #vs.s6 .vine { opacity: .95; transform: none; }
.lamp-trial #vs .vtag { position: absolute; z-index: 6; left: 50%; bottom: -14px; transform: translateX(-50%) scale(.4); opacity: 0; padding: 6px 13px 7px; border-radius: 15px; white-space: nowrap; font: 800 19px/1 var(--f-chunk); transition: opacity .25s, transform .35s cubic-bezier(.2,1.8,.4,1); transition-delay: calc(var(--i) * .28s); }
.lamp-trial #vs.s6 .vtag { opacity: 1; transform: translateX(-50%) scale(1); }
.lamp-trial #vs .vtag.no { background: linear-gradient(180deg, #e5f6dc, #b9dfa6); color: #24451a; box-shadow: 0 3px 0 #6f9b5c; }
.lamp-trial #vs .vtag.ok { background: linear-gradient(180deg, #ffd860, #f2ad1c); color: #3a2006; box-shadow: 0 3px 0 #b37608; }
.lamp-trial #vs .vsb { left: 1150px; top: 186px; width: 420px; font-size: 26px; transform-origin: 90% 120%; }
.lamp-trial #vs .vsb .tail { right: 70px; bottom: -30px; }
.lamp-trial #vs .vacts { position: absolute; left: 150px; top: 900px; display: flex; align-items: center; gap: 30px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.lamp-trial #vs.s7 .vacts { opacity: 1; pointer-events: auto; }
.lamp-trial #vs #fight { height: 112px; padding: 0 40px 4px; font-size: 46px; gap: 16px; border-radius: 28px; animation: ltrial-ready 1.8s ease-in-out infinite; }
.lamp-trial #vs #fight .kbd { font-size: 14px; padding: 4px 10px 5px; border-radius: 9px; background: rgba(40,0,0,.2); vertical-align: 0; }
@keyframes ltrial-ready { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.12) drop-shadow(0 0 18px rgba(255,120,70,.6)); } }
.lamp-trial #vs .ghostbtn { font-size: 20px; color: rgba(255,244,220,.9); text-shadow: 0 2px 10px rgba(0,0,0,.8); }

/* calm for those who ask for it (OS setting or the game's reduced motion) */
@media (prefers-reduced-motion: reduce) {
  .lamp-trial *, .lamp-trial *::before, .lamp-trial *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; transition-delay: 0s !important; }
}
.reduced .lamp-trial *, .reduced .lamp-trial *::before, .reduced .lamp-trial *::after { animation-delay: 0s !important; transition-duration: .001s !important; transition-delay: 0s !important; }
.lamp-trial #vs .vs-host, .lamp-trial #vs .vs-keeper, .lamp-trial #vs .vs-lamp, .lamp-trial #vs .vacts, .lamp-trial #vs .vsb { translate: 0 var(--ex, 0px); }