/* ==========================================================================
   OLYMBO — "Lamplight" kit (replaces the Flat Olympus sticker look)
   Light and depth instead of outlines: no ink strokes, no hard ink shadows,
   no tilts. Parkinsans everywhere, Onest for card ranks, cream C+ cards with
   clay suit signs, same-hue slab buttons, owl obols, objects on stone.
   Spec: docs/reference/mockups-v3/ (exported from the Lamplight design canvas).
   ========================================================================== */

/* ---------- type: two alias families so every existing rule switches at once ----------
   "Lamp Display" stands in for the old chunky display face (rules ask for weight 400),
   "Lamp Body" for the old body face (rules ask for 500–900). */
@font-face { font-family: "Lamp Display"; font-weight: 100 1000; font-display: block; src: url("../../assets/fonts/parkinsans-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lamp Display"; font-weight: 100 1000; font-display: block; src: url("../../assets/fonts/parkinsans-latin-ext-800-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lamp Body"; font-weight: 100 650; font-display: block; src: url("../../assets/fonts/parkinsans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Lamp Body"; font-weight: 651 850; font-display: block; src: url("../../assets/fonts/parkinsans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Lamp Body"; font-weight: 851 1000; font-display: block; src: url("../../assets/fonts/parkinsans-latin-700-normal.woff2") format("woff2"); }

:root {
  --f-logo: "Lamp Display", "Parkinsans", "Segoe UI", system-ui, sans-serif;
  --f-chunk: "Lamp Display", "Parkinsans", "Segoe UI", system-ui, sans-serif;
  --f-epic: "Lamp Body", "Parkinsans", "Segoe UI", system-ui, sans-serif;
  --f-body: "Lamp Body", "Parkinsans", "Segoe UI", system-ui, sans-serif;
  --f-rank: "Onest", "Segoe UI", system-ui, sans-serif;
  --bw: 0px;            /* no sticker outlines */
  --drop: 0px;          /* no hard ink drop */
  /* the four C+ suit inks */
  --suit-H: #d7343c; --suit-D: #ea8417; --suit-C: #2b8a48; --suit-S: #253863;
  --cream: #fff4dc;
  --night: rgba(26, 8, 28, .84);
  --soft: 0 22px 40px -16px rgba(10, 2, 14, .65);
  --gold-ring: #d4ad55;
}
html, body { font-family: var(--f-body); }

/* ---------- slab buttons: same-hue gradient, a lip, a shine; no outline, no tilt ---------- */
.btn {
  --c: #ffd860; --cd: #f2ad1c; --lip: #b37608; --tc: #3a2006;
  border: 0; border-radius: 22px; color: var(--tc);
  background: linear-gradient(180deg, var(--c), var(--cd));
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -6px 0 rgba(0,0,0,.08), 0 8px 0 var(--lip), 0 22px 34px -14px rgba(20,4,10,.6);
  font-family: var(--f-chunk); letter-spacing: .2px; text-transform: none;
}
.btn::after { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); width: 70px; }
.btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), inset 0 -6px 0 rgba(0,0,0,.08), 0 12px 0 var(--lip), 0 30px 44px -14px rgba(20,4,10,.6); }
.btn:active { transform: translateY(7px) scale(.98, .95); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), 0 1px 0 var(--lip), 0 8px 14px -6px rgba(20,4,10,.6); }
.btn:focus-visible { outline: 3px solid #ffd25e; outline-offset: 5px; }
.btn-ember { --c: #ff7c50; --cd: #f2492a; --lip: #b3321b; --tc: #fff; text-shadow: 0 3px 0 rgba(100,20,8,.25); }
.btn-sea   { --c: #35d3c9; --cd: #17a29d; --lip: #0b6b6e; --tc: #fff; text-shadow: 0 3px 0 rgba(4,60,62,.25); }
.btn-sky   { --c: #52d2ff; --cd: #1e9be8; --lip: #0f5fa6; --tc: #fff; }
.btn-wine  { --c: #b2508f; --cd: #8a2f6f; --lip: #5a1c4a; --tc: #fff; }
.btn-bone  { --c: #fffaf0; --cd: #f6e3bd; --lip: #c9a66a; --tc: #2a1838; }
.btn-olive { --c: #c6df6a; --cd: #9fc03a; --lip: #5f7d1d; --tc: #22300a; }
.btn-sm { border-radius: 15px; box-shadow: inset 0 2px 0 rgba(255,255,255,.42), 0 5px 0 var(--lip), 0 14px 22px -10px rgba(20,4,10,.6); }
.btn-sm:hover { box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 8px 0 var(--lip), 0 18px 26px -10px rgba(20,4,10,.6); }
.btn-lg { border-radius: 26px; }
.btn-txtshadow { text-shadow: 0 3px 0 rgba(0,0,0,.18); }
.kbd { display: inline-block; padding: 3px 7px 4px; border-radius: 7px; background: rgba(0,0,0,.16); border: 0; box-shadow: none; font: 800 .42em/1 var(--f-body); letter-spacing: .3px; color: inherit; opacity: .9; vertical-align: .25em; }

/* ---------- panels and chips: light, rounded, no stroke ---------- */
.panel { border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, var(--soft); }
.chip { border: 0; box-shadow: 0 10px 22px -10px rgba(10,2,14,.6); background: rgba(255,244,220,.94); }
.chip.dark { background: rgba(22,8,26,.72); color: var(--cream); box-shadow: 0 10px 22px -10px rgba(10,2,14,.6); }
.label { letter-spacing: .6px; text-transform: none; }
.meander { opacity: .25; }

/* ---------- speech bubbles: cream, soft shadow, name in colour, no badge ---------- */
.bubble { border: 0; border-radius: 30px; box-shadow: 0 24px 44px -16px rgba(0,0,0,.75); padding: 18px 26px 20px; font: 600 25px/1.3 var(--f-body); color: #2a1838; transform: scale(.55); }
.bubble .who { position: static; display: block; margin: 0 0 6px; padding: 0; border: 0; border-radius: 0; background: none; transform: none; font: 800 20px/1 var(--f-chunk); letter-spacing: .5px; color: var(--whoc, #7a3fb0); }
.bubble::after { border: 0; width: 40px; height: 34px; margin-top: -1px; transform: none; left: var(--tail-x, 20%); right: auto; top: 100%; bottom: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 34'%3E%3Cpath d='M2 0L9 31L38 0Z' fill='%23fff4dc'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; }
.bubble em { color: #c2401c; }
.bubble b { font-family: var(--f-body); font-weight: 900; }
/* speech pops in like a cartoon balloon: overshoots wide, wobbles, settles */
.bubble.show { animation: bubble-in .46s linear forwards; }
/* hide must still win over show (core.css's own hide rule comes before this file) */
.bubble.hide { animation: bubble-out .2s ease-in forwards; }
@keyframes bubble-in { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.06, .95); } 55% { transform: scale(.98, 1.02); }
  78% { transform: scale(1.005, .995); } 100% { opacity: 1; transform: scale(1); } }

/* ---------- iris wipe between screens (src/ui/transition.js) ---------- */
#iris { position: absolute; inset: 0; z-index: 995; display: none; pointer-events: none; --iris: 0px;
  background: radial-gradient(ellipse at 50% 40%, #2c1338 0, #170a20 60%, #0e0614 100%);
  -webkit-mask-image: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), transparent var(--iris), #000 calc(var(--iris) + 1.5px));
  mask-image: radial-gradient(circle at var(--ix, 50%) var(--iy, 50%), transparent var(--iris), #000 calc(var(--iris) + 1.5px)); }
#iris.on { display: block; pointer-events: auto; }
#iris.fade { -webkit-mask-image: none; mask-image: none; }

/* ---------- pop numbers: glowing, no ink stroke ---------- */
.pop { -webkit-text-stroke: 0; text-shadow: 0 0 22px rgba(0,0,0,.35), 0 5px 0 rgba(0,0,0,.28); font-family: var(--f-chunk); }
.pop.points { text-shadow: 0 0 24px rgba(39,183,255,.9), 0 5px 0 #0f5fa6; color: #effaff; }
.pop.factor { text-shadow: 0 0 24px rgba(255,77,61,.9), 0 5px 0 #9c1c15; color: #fff2ee; }
.pop.gold { text-shadow: 0 0 24px rgba(255,199,64,.95), 0 5px 0 #a86f06; color: #fff7d8; }
.pop.big, .pop.huge { -webkit-text-stroke-width: 0; }
.pop.obol { font-size: 40px; } /* +N / -N rising from an Obol counter */
@keyframes pop-rise { 0% { transform: translate(-50%, -30%) scale(.2); opacity: 0; } 18% { transform: translate(-50%, -60%) scale(1.25); opacity: 1; } 32% { transform: translate(-50%, -62%) scale(1); } 75% { transform: translate(-50%, -110%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -150%) scale(.8); opacity: 0; } }
@keyframes pop-slam { 0% { transform: translate(-50%, -50%) scale(3); opacity: 0; } 14% { transform: translate(-50%, -50%) scale(.9); opacity: 1; } 24% { transform: translate(-50%, -50%) scale(1.06); } 80% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -70%) scale(.9); opacity: 0; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes wobble { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes bob-rot { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes swing { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ---------- rich text on dark and light ---------- */
.t-x { background: linear-gradient(180deg, #ff7a66, #e83a2c); }

/* ---------- tooltip: night glass ---------- */
.tip { width: 340px; padding: 18px 20px; background: rgba(30,10,30,.96); color: var(--cream); border: 0; border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 40px -14px rgba(0,0,0,.7); }
.tip h4 { font: 800 26px/1.05 var(--f-chunk); color: var(--cream); }
.tip .tag { border: 0; background: rgba(255,244,220,.12); color: rgba(255,244,220,.85); letter-spacing: .4px; text-transform: none; font: 700 13px/1 var(--f-body); padding: 5px 8px; }
.tip .tag.r1 { background: #e3a45c; color: #2a1406; } .tip .tag.r2 { background: #5fd6c2; color: #06302a; } .tip .tag.r3 { background: #ff8a7a; color: #3a0d08; } .tip .tag.r4 { background: #d6a6ff; color: #2a1040; }
.tip .fx { border: 0; background: none; padding: 0; font: 600 19px/1.38 var(--f-body); color: rgba(255,244,220,.95); }
.tip .fx + .fx { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,244,220,.1); }
.tip .fl { font: italic 500 15px/1.4 var(--f-body); color: rgba(255,244,220,.55); opacity: 1; }
.tip .keys { letter-spacing: .3px; text-transform: none; font: 700 13px/1 var(--f-body); color: rgba(255,244,220,.55); opacity: 1; }
.tip .t-p { color: #7fd6ff; } .tip .t-f { color: #ff8a7a; } .tip .t-g { color: #ffd25e; } .tip .t-h, .tip .t-k { color: #ffe7b0; }
.tip .t-s-H { color: #ff7a7f; } .tip .t-s-D { color: #ffa94d; } .tip .t-s-C { color: #7fd69a; } .tip .t-s-S { color: #9db4ff; }

/* ---------- owl obols ---------- */
.coin { border: 0 !important; border-radius: 0 !important; background: url("../../assets/ui/coin-owl.webp") 50% 50%/contain no-repeat !important; box-shadow: none !important; filter: drop-shadow(0 2px 1px rgba(60,25,0,.35)); }
.coin::before, .coin::after { display: none !important; }

/* ==========================================================================
   C+ playing cards: cream stock, gold hairline, Onest rank, flat-silhouette
   clay sign in the corner, a big clay sign low-left, clay busts for J/Q/K.
   One em = 1/10.5 of the card width; the card is 150 × 210.
   ========================================================================== */
.card { font-size: 14.286px; }
.card .face { border: 0; border-radius: .9em; overflow: hidden; isolation: isolate;
  background: radial-gradient(130% 90% at 28% 8%, #fffdf7 0%, #fbf1da 55%, #f1deb8 100%);
  box-shadow: inset 0 .1em 0 #fff, inset 0 -.18em 0 rgba(160,110,50,.16), 0 .18em 0 #d6bb86, 0 1.1em 1.7em -.8em rgba(20,8,12,.6);
  animation: none; }
.card .face::after { content: ""; position: absolute; inset: .42em; z-index: 1; border-radius: .55em; box-shadow: 0 0 0 max(1.2px, .07em) var(--gold-ring); pointer-events: none; background: none; height: auto; }
.card.sel .face { box-shadow: inset 0 .1em 0 #fff, 0 .18em 0 #d6bb86, 0 1.3em 2em -.8em rgba(20,8,12,.55), 0 0 2.1em .4em rgba(255,214,120,.95), 0 0 5em 1.1em rgba(255,150,60,.5); animation: none; }
.card.forced .face { box-shadow: inset 0 .1em 0 #fff, 0 .18em 0 #d6bb86, 0 0 0 .3em #52d2ff, 0 0 2em .4em rgba(82,210,255,.7); }
.card.scoring:not(.sel) .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(82,210,255,.75); }
.card .band { display: none; }
.card .idx { left: .62em; top: .85em; width: 3.6em; z-index: 3; font: 600 2.7em/.9 var(--f-rank); letter-spacing: -.05em; color: var(--sc); }
.card .idx { font-size: 1em; }
.card .idx span { font: 600 2.7em/.9 var(--f-rank); letter-spacing: -.05em; color: var(--sc); }
.card .idx i { width: 1.5em; height: 1.5em; margin-top: .3em; background: var(--sc); -webkit-mask: var(--clay) 50% 50%/contain no-repeat; mask: var(--clay) 50% 50%/contain no-repeat; }
.card .idx i svg { display: none; }
.card .idx.br { display: none; }
.card .glyph { position: absolute; left: .7em; bottom: 1.65em; z-index: 2; width: 4.8em; height: 4.8em; background: var(--clay) 50% 50%/contain no-repeat; filter: drop-shadow(0 .18em .16em rgba(60,30,20,.28)); transform-origin: 30% 100%; }
.card .glyph.ace { width: 5.5em; height: 5.5em; left: .65em; bottom: 1.6em; }
.card[data-suit="H"] .glyph { transform: scale(.9); } .card[data-suit="D"] .glyph { transform: scale(1.06); }
.card .court { position: absolute; left: 1.1em; right: 1.1em; top: 5.45em; bottom: 1.7em; z-index: 2; overflow: hidden; border-radius: 4.15em 4.15em .8em .8em; background: var(--tint); box-shadow: inset 0 .3em .7em rgba(60,20,10,.18); }
.card .court i { position: absolute; left: -8%; right: -8%; top: .75em; bottom: -1.7em; background: 50% 0/contain no-repeat; filter: drop-shadow(0 .2em .25em rgba(60,20,10,.25)); }
.card[data-suit="H"] { --clay: url("../../assets/ui/suit-H.webp"); --tint: linear-gradient(180deg, #ffe3d8, #f6b8a6); }
.card[data-suit="D"] { --clay: url("../../assets/ui/suit-D.webp"); --tint: linear-gradient(180deg, #ffeacc, #f7c98e); }
.card[data-suit="C"] { --clay: url("../../assets/ui/suit-C.webp"); --tint: linear-gradient(180deg, #dcf2e0, #a8d9b5); }
.card[data-suit="S"] { --clay: url("../../assets/ui/suit-S.webp"); --tint: linear-gradient(180deg, #dfe5fb, #aebdee); }
.card .pip { display: none; }
/* enhancements change the stock */
.card.e-bonus .face { background: linear-gradient(170deg, #f5faff, #dcebfa 60%, #c3d9f1); }
.card.e-mult .face { background: linear-gradient(170deg, #fff6f4, #fbdcd6 60%, #f4c0b4); }
.card.e-glass .face { background: linear-gradient(155deg, #f7fcff 0%, #e3f2fb 42%, #d0e7f4 72%, #ecf7fd 100%); box-shadow: inset 0 0 0 .32em rgba(255,255,255,.8), inset 0 0 0 .4em rgba(140,195,228,.5), 0 .14em 0 #b7d2e2, 0 1.1em 1.7em -.8em rgba(20,8,12,.6); }
.card.e-steel .face { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 .12em, rgba(0,0,0,.04) .12em .3em), linear-gradient(160deg, #f1f3f6, #c7ced8 50%, #a9b2bf); }
.card.e-stone .face { background: radial-gradient(circle at 70% 70%, rgba(0,0,0,.12) 0 8%, rgba(0,0,0,0) 9%), radial-gradient(circle at 25% 62%, rgba(0,0,0,.1) 0 5%, rgba(0,0,0,0) 6%), linear-gradient(160deg, #bdb7ac, #8e877c); }
.card.e-stone .idx, .card.e-stone .glyph, .card.e-stone .court { display: none; }
.card.e-gold .face { background: linear-gradient(150deg, #fff3c0 0%, #ffd760 32%, #e7a92c 62%, #ffe18f 86%, #cf9116 100%); }
.card.e-gold { --sc: #7a2a14 !important; }
.card.e-lucky .face { background: radial-gradient(circle at 20% 80%, rgba(240,190,60,.45) 0 5%, rgba(240,190,60,0) 6%), linear-gradient(170deg, #f6fff3, #dbf3d1 60%, #bfe5b0); }
.card.e-wild .face { background: conic-gradient(from 45deg, rgba(226,79,92,.16) 0 25%, rgba(238,138,31,.16) 0 50%, rgba(29,146,89,.16) 0 75%, rgba(42,77,181,.16) 0 100%), linear-gradient(170deg, #fff, #f1eee6); }
/* editions sit under the rank and art */
.card.ed-foil .face::before, .card.ed-holo .face::before, .card.ed-poly .face::before { z-index: 1; mix-blend-mode: normal; }
.card.ed-holo .face::before { background: linear-gradient(120deg, rgba(255,120,150,.3), rgba(255,210,110,.3) 25%, rgba(120,230,170,.3) 50%, rgba(120,180,255,.3) 75%, rgba(210,140,255,.3)); background-size: 300% 300%; }
.card.ed-poly .face::before { opacity: .28; }
/* seals sit high on the right edge, like wax */
.card .seal { right: .55em; top: .55em; left: auto; width: 2.1em; height: 2.1em; border: 0; z-index: 4; box-shadow: inset 0 -.2em 0 rgba(0,0,0,.25), inset 0 .15em 0 rgba(255,255,255,.35), 0 .3em .5em -.1em rgba(0,0,0,.5); }
.card .seal.gold { background: radial-gradient(circle at 35% 30%, #ffe9a0, #e8b23a 55%, #a7740d); }
.card .seal.red { background: radial-gradient(circle at 35% 30%, #ff9a8a, #cf3329 55%, #86160f); }
.card .seal.blue { background: radial-gradient(circle at 35% 30%, #a9cbff, #2f63d6 55%, #173a8c); }
.card .seal.purple { background: radial-gradient(circle at 35% 30%, #d4b0ff, #7b3fc2 55%, #4a1f80); }
/* the enhancement name / debuff as a quiet pill on the bottom edge */
.card .tag { left: 50%; bottom: .55em; transform: translateX(-50%); z-index: 4; border: 0; border-radius: 1em; padding: .28em .7em .32em; background: rgba(42,24,56,.82); color: #fff4dc; font: 700 .95em/1 var(--f-body); letter-spacing: .2px; box-shadow: none; white-space: nowrap; }
.card.debuff .face { filter: grayscale(.85) brightness(.72); }
.card.debuff .face::after { background: none; }
.card.debuff .tag { background: rgba(60,90,40,.9); }
/* card back: the clay Olympus framed in gold */
.cardback { border: 0; border-radius: .9em; background: #1d1c24 url("../../assets/ui/card-back.webp") 50% 40%/cover no-repeat; box-shadow: 0 .18em 0 #120f18, 0 1.1em 1.7em -.8em rgba(0,0,0,.6); }
.cardback::before { inset: .42em; border: 0; border-radius: .55em; box-shadow: 0 0 0 .1em #e0bb62; }
.cardback::after, .cardback img, .cardback .em { display: none; }
.card .cardback { font-size: 14.286px; }

/* ==========================================================================
   Objects instead of framed cards: Favors and Offerings are the item art,
   standing on stone. Empty slots are carved sockets.
   ========================================================================== */
.favor { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.favor .art { left: 0; right: 0; top: 0; height: 100%; background: none; border-radius: 0; overflow: visible; }
.favor .art::before { display: none; }
/* Editions on objects (Favors, consumables, wares): the shimmer follows the object's own silhouette (masked by its art,
   --art), never the square box around it. Cards keep their face sweep. */
:is(.ed-foil, .ed-holo, .ed-poly):not(.card)::before { content: none; }
.im, .favor .art, .consum { position: relative; }
:is(.ed-foil, .ed-holo, .ed-poly) :is(.im, .art)::after, .im:is(.ed-foil, .ed-holo, .ed-poly)::after, .consum:is(.ed-foil, .ed-holo, .ed-poly)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  -webkit-mask: var(--art) 50% 50% / contain no-repeat; mask: var(--art) 50% 50% / contain no-repeat; }
:is(.ed-foil :is(.im, .art), .im.ed-foil, .consum.ed-foil)::after { background: linear-gradient(115deg, transparent 25%, rgba(255,220,160,.6) 45%, rgba(255,255,255,.75) 50%, rgba(210,130,60,.35) 58%, transparent 75%); background-size: 250% 100%; animation: foilsweep 3s linear infinite; mix-blend-mode: overlay; }
:is(.ed-holo :is(.im, .art), .im.ed-holo, .consum.ed-holo)::after { background: linear-gradient(115deg, transparent 20%, rgba(255,150,170,.45) 40%, rgba(255,240,200,.6) 50%, rgba(150,200,255,.45) 60%, transparent 80%); background-size: 250% 100%; animation: foilsweep 4s linear infinite; mix-blend-mode: overlay; }
:is(.ed-poly :is(.im, .art), .im.ed-poly, .consum.ed-poly)::after { background: linear-gradient(115deg, rgba(255,200,120,.35), rgba(200,160,255,.35) 50%, rgba(140,210,255,.35)); background-size: 300% 300%; animation: polyshift 4s linear infinite; mix-blend-mode: color; }
.favor .art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(50,25,10,.5)); transition: filter .2s; }
.favor:hover { transform: translateY(-14px) scale(1.06); }
.favor:hover .art img { filter: drop-shadow(0 14px 10px rgba(10,2,20,.45)) drop-shadow(0 0 14px rgba(255,236,190,.8)); }
.favor .nm { top: auto; bottom: -34px; height: auto; color: var(--cream); font: 800 15px/1.1 var(--f-chunk); text-shadow: 0 2px 10px rgba(10,2,20,.85); }
.favor .gem { right: 2px; top: 2px; width: 12px; height: 12px; border: 0; border-radius: 50%; transform: none; background: #e3a45c; box-shadow: 0 0 0 3px rgba(20,6,20,.5); }
.favor.r2 .gem { background: #5fd6c2; } .favor.r3 .gem { background: #ff8a7a; } .favor.r4 .gem { background: #d6a6ff; box-shadow: 0 0 10px #d6a6ff; }
.favor .ord { left: 50%; top: auto; bottom: -26px; width: auto; height: auto; transform: translateX(-50%); background: none; border: 0; color: #6b4b31; font: 800 16px/1 var(--f-chunk); text-shadow: 0 1px 0 rgba(255,236,205,.35); }
.favor .stk span { background: rgba(42,24,56,.88); border-radius: 8px; letter-spacing: .2px; font-weight: 700; }
.favor.masked { background: none; }
.favor.masked .art { background: url("../../assets/ui/coin-blank.webp") 50% 50%/70% no-repeat; filter: grayscale(1) brightness(.4); }
.favor.empty { border: 0; background: radial-gradient(ellipse at 50% 88%, #d6bc93 0 22%, rgba(0,0,0,0) 23%); box-shadow: none; color: transparent; font-size: 0; }
.favor.empty::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: 7px; height: 13px; border-radius: 50%; background: #d6bc93; box-shadow: inset 0 5px 0 #a8875f; }
.favor.empty { background: none; }
.favor.fire { animation: fav-fire calc(.45s / var(--speed)) cubic-bezier(.2,2,.4,1); }
@keyframes fav-fire { 0% { transform: none; } 35% { transform: translateY(-20px) scale(1.18); } 100% { transform: none; } }
@keyframes land { 0% { transform: scale(1.5) translateY(-20px); } 60% { transform: scale(.92); } 100% { transform: none; } }

.consum { border: 0; box-shadow: none; background: none !important; overflow: visible; border-radius: 0; }
.consum img { left: 0; right: 0; top: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 2px rgba(50,25,10,.5)); }
.consum:hover { transform: translateY(-12px) scale(1.06); }
.consum:hover img { filter: drop-shadow(0 14px 10px rgba(10,2,20,.45)) drop-shadow(0 0 16px rgba(140,190,255,.8)); }
.consum span { bottom: -30px; color: var(--cream); font: 800 14px/1.1 var(--f-chunk); text-shadow: 0 2px 10px rgba(10,2,20,.85); }
.consum.k-pack img { filter: drop-shadow(0 3px 2px rgba(50,25,10,.5)); }
.consum.k-pack span { background: none; padding: 0; }
.consum.empty { border: 0; background: none !important; }
.consum.empty::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 7px; height: 13px; border-radius: 50%; background: #d6bc93; box-shadow: inset 0 5px 0 #a8875f; }

/* stone ledge that altars and offering rows stand on */
.ledge { position: absolute; height: 44px; pointer-events: none; box-sizing: border-box;
  /* sculpted marble shelf (assets/ui/ledge.webp, 3D matte); the rounded ends stay put, the plain middle stretches */
  border-style: solid; border-width: 0 23px; border-color: transparent;
  border-image: url("../../assets/ui/ledge.webp?v=matte4") 0 70 fill / 0 23px stretch;
  filter: drop-shadow(0 14px 12px rgba(20,4,10,.42)); }

/* small round icon buttons */
.ibtn { width: 60px; height: 60px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(32,8,30,.55); color: var(--cream); cursor: pointer; 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; }
.ibtn:hover { transform: translateY(-3px) scale(1.07); background: rgba(255,90,54,.9); }
.ibtn .ico, .ibtn svg { width: 28px; height: 28px; }
.ghostbtn { display: inline-flex; align-items: center; gap: 10px; padding: 8px 2px; border: 0; background: none; color: rgba(255,244,220,.85); font: 700 19px/1 var(--f-body); cursor: pointer; transition: color .15s, transform .15s cubic-bezier(.3,1.8,.5,1); }
.ghostbtn:hover { color: #ffd66b; transform: translateY(-2px); }
.ghostbtn .ico { width: 22px; height: 22px; }

:where(button, a, input, [tabindex]):focus-visible { outline: 3px solid #ffd25e; outline-offset: 5px; }

/* particles (#fx sits above #overlay) stay out of the way while a menu or dialog is open */
#stage:has(#overlay .lamp-ov) #fx { opacity: 0; transition: opacity .15s; }

/* a debuffed card keeps its gold hairline (game.css's old debuff shade must not reshape it) */
.card.debuff .face::after { left: .42em; right: .42em; top: .42em; bottom: .42em; height: auto; background: none; }

/* ---------- base rules kept from the retired Flat Olympus sheets (shell.css) ---------- */
.modal-bg { position: absolute; inset: 0; z-index: 600; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.reduced *, .reduced *::before, .reduced *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
.contrast { --points: #00a2ff; --factor: #ff2a1a; }

/* ---------- loader and the NOT SAVED warning ---------- */
#loader { position: absolute; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: 28px; background: radial-gradient(ellipse at 50% 45%, #3a1d48, #1a0c20 70%); transition: opacity .6s; }
#loader.done { opacity: 0; pointer-events: none; }
#loader .lg { width: 640px; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.45)); animation: loader-breathe 2.6s ease-in-out infinite; }
@keyframes loader-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
#loader .lb { width: 460px; height: 14px; border-radius: 10px; background: rgba(255,244,220,.12); box-shadow: inset 0 2px 4px rgba(0,0,0,.4); overflow: hidden; }
#loader .lb i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(180deg, #ffd860, #f2ad1c); box-shadow: 0 0 14px rgba(255,200,64,.7); transform-origin: left; transform: scaleX(0); transition: transform .2s; }
#loader small { font: 600 18px/1 var(--f-body); letter-spacing: .4px; color: rgba(255,244,220,.72); }
#savewarn { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 690; display: flex; align-items: baseline; gap: 12px; padding: 10px 20px 12px; border: 0; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg, #ff7c50, #f2492a); color: #fff; box-shadow: inset 0 2px 0 rgba(255,255,255,.4), 0 5px 0 #b3321b, 0 16px 26px -10px rgba(0,0,0,.6); font: 600 16px/1 var(--f-body); }
#savewarn b { font: 800 22px/1 var(--f-chunk); letter-spacing: .3px; }
#savewarn:hover { filter: brightness(1.06); }