/* Board skin built from the cards themselves: black frame with a pale-gold line, parchment, colour name ribbons,
   glossy stat gems (blue attack, red health, gold coins). Loaded last; overrides board.css / ui2.css. */
#stage {
  --cs-frame: #0f1418; --cs-line: #d9c48a; --cs-ink: #2a1e14;
  --rib-red: #9a2420; --rib-blue: #2a63b0; --rib-purple: #5b2f74; --rib-ochre: #8a6418; --rib-steel: #44566a; --rib-slate: #3a4652;
  --cond: 'Fira Sans Extra Condensed', 'PT Sans Narrow', sans-serif;
  --ally-w: 150px; --ally-h: 182px; --place-w: 160px; --place-h: 78px; --small-w: 84px; --small-h: 106px;
  --leader-w: 170px; --leader-h: 200px; --gem: 40px; --gem-font: 22px; --name: 13px; --rib-h: 24px;
}
#stage.port { --ally-w: 166px; --ally-h: 210px; --place-w: 166px; --place-h: 92px; --small-w: 108px; --small-h: 136px;
  --leader-w: 186px; --leader-h: 204px; --gem: 50px; --gem-font: 28px; --name: 16px; --rib-h: 30px; }

/* ---------- table and battlefield ---------- */
#game { background: #0a0604; }
#board { border-radius: 0; box-shadow: none;
  background: linear-gradient(rgba(12, 6, 2, .62), rgba(12, 6, 2, .78)), url('../assets/tex/table.webp') center / 640px, #24140a; }
#board::after { background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
.mat, .midline, .torch, .region-label, .prop { display: none !important; }
.field { position: absolute; background: var(--cs-frame); border-radius: 24px; box-shadow: 0 22px 50px rgba(0, 0, 0, .7); pointer-events: none; }
.field-art { position: absolute; inset: 12px; border-radius: 14px; filter: saturate(.92); }
.field-shade { position: absolute; inset: 12px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--cs-line), inset 0 0 80px rgba(0, 0, 0, .6);
  background: radial-gradient(ellipse at 50% 50%, rgba(10, 6, 4, .3), rgba(10, 6, 4, .66)); }
#stage.port .field { border-radius: 18px; }
#stage.port .field-art, #stage.port .field-shade { inset: 8px; border-radius: 12px; }

/* ---------- ribbons (name banners) ---------- */
.rib { display: flex; align-items: center; justify-content: center; color: #fff; text-transform: uppercase; font-family: var(--cond); font-weight: 800; letter-spacing: .3px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .45); background: linear-gradient(rgba(255, 255, 255, .13), rgba(0, 0, 0, .2)), var(--c, var(--rib-red));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -2px 0 rgba(0, 0, 0, .35), 0 0 0 2px var(--cs-frame); }
.rib.ally { --c: var(--rib-purple); } .rib.place { --c: var(--rib-blue); } .rib.leader { --c: var(--rib-red); }
.rib.companion { --c: #1d7a72; } .rib.item { --c: var(--rib-steel); } .rib.action { --c: var(--rib-red); }
.field-ribbon { position: absolute; width: 300px; height: 30px; font-size: 16px; letter-spacing: .04em; border-radius: 4px; z-index: 1; cursor: help; }
#stage.port .field-ribbon { width: 300px; height: 32px; font-size: 18px; }

/* ---------- board cards = small copies of the card ---------- */
.card .frame { position: absolute; inset: 0; border-radius: 12px; background: var(--cs-frame) !important; box-shadow: 0 10px 22px rgba(0, 0, 0, .65); }
.card .frame::after { content: ''; position: absolute; inset: 5px; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--cs-line); pointer-events: none; }
.card.gold .frame::after { box-shadow: 0 0 0 2.5px #f3cf6a, 0 0 10px rgba(243, 207, 106, .55); }
.card .face { border: none !important; box-shadow: none !important; border-radius: 7px !important; background-color: #1a1410; }
.card .shade { display: none; }
.card .shadow { bottom: -12px; }
.card.created .face { filter: saturate(.75); }

.card.ally { width: var(--ally-w); height: var(--ally-h); margin: 0; border-radius: 12px; }
.card.ally .face { inset: 6px 6px calc(var(--rib-h) + 12px) 6px; background-size: 180%; background-position: 50% 21%; }
.card .nm.rib { font-family: var(--cond) !important; letter-spacing: .2px; left: 3px; right: 3px; bottom: 7px; height: var(--rib-h); padding: 0 calc(var(--gem) * .55); font-size: var(--name); line-height: var(--rib-h); text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  display: block !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; border-radius: 2px; }
.card.place { width: var(--place-w); height: var(--place-h); border-radius: 10px; }
.card.place .frame { border-radius: 10px; }
.card.place .frame::after { inset: 4px; border-radius: 6px; }
.card.place .face { inset: 4px; background-size: 113%; background-position: 50% 24%; }
.card.place .nm.rib { left: 10px; right: 10px; bottom: 6px; height: calc(var(--rib-h) * .8); line-height: calc(var(--rib-h) * .8); font-size: calc(var(--name) * .92); padding: 0 6px; }
.card.small { width: var(--small-w); height: var(--small-h); border-radius: 10px; }
.card.small .frame, .card.small.item .frame { border-radius: 10px; }
.card.small .frame::after { inset: 4px; border-radius: 6px; }
.card.small .face, .card.small.item .face { inset: 4px; border-radius: 6px !important; background-size: 215%; background-position: 50% 21%; }
.card.small.item { height: var(--small-w); }
.card.small.item .face { background-size: 170%; }
.card.leader { width: var(--leader-w); height: var(--leader-h); border-radius: 14px; }
.card.leader .frame { border-radius: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, .75); }
.card.leader .frame::after { inset: 6px; border-radius: 9px; }
.card.leader .face { inset: 6px 6px calc(var(--rib-h) + 22px) 6px; background-size: 175%; background-position: 50% 21%; }
.card.leader .nm.rib { left: 4px; right: 4px; bottom: 12px; height: calc(var(--rib-h) + 6px); line-height: calc(var(--rib-h) + 6px); font-size: calc(var(--name) + 2px); padding: 0 calc(var(--gem) * .95) 0 calc(var(--gem) * .55); }
.card.leader .ward-bubble { border-radius: 18px; }
.legend-medal { position: absolute; left: -8px; top: -8px; width: 30px; height: 30px; border-radius: 50%; z-index: 3; cursor: help;
  background: url('../assets/icons/crown.svg') center / 62% no-repeat, radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212); box-shadow: 0 0 0 2px #5a3e10, 0 2px 4px rgba(0, 0, 0, .6); }
#stage.port .legend-medal { width: 38px; height: 38px; }

/* ---------- gems ---------- */
.stat { border: none !important; border-radius: 50% !important; font-family: var(--cond) !important; font-weight: 800; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .6);
  box-shadow: 0 0 0 3px #caa24e, 0 0 0 4px #5a3e10, 0 4px 8px rgba(0, 0, 0, .6), inset 0 -6px 10px rgba(0, 0, 0, .35) !important; }
.stat::before { display: none !important; }
.stat.atk { left: -10px; bottom: -12px; background: radial-gradient(circle at 34% 28%, #cfe6ff 0, #5a9ae8 18%, #1f56a8 52%, #0b2350 90%) !important; }
.stat.hp { right: -10px; bottom: -12px; background: radial-gradient(circle at 34% 28%, #ffd6d6 0, #e05050 18%, #a51e22 52%, #4a0608 90%) !important; }
.stat.hp.hurt { color: #ffc2b4; }
.stat.buffed { color: #b8ffb8; }
.card.small .stat { bottom: -8px; }
.card.leader .stat.hp { width: calc(var(--gem) * 1.45); height: calc(var(--gem) * 1.45); font-size: calc(var(--gem-font) * 1.4); right: -14px; bottom: -16px; }
.kw { background: radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212) !important; border: none !important; box-shadow: 0 0 0 2px #5a3e10, 0 2px 4px rgba(0, 0, 0, .6) !important; color: #3a2404; }
.kw .ico { filter: brightness(0) opacity(.75); }
.tok { background: var(--cs-frame) !important; border: 1.5px solid var(--cs-line) !important; color: #fff; font-family: var(--cond); }

/* Оборона: grey stone ring and a shield medal instead of the big stone shield */
.card .taunt { left: auto; right: -12px; top: -12px; bottom: auto; width: 32px; height: 32px; z-index: 3; clip-path: none; border-radius: 50%; filter: none;
  background: url('../assets/icons/checked-shield.svg') center / 60% no-repeat, radial-gradient(circle at 34% 28%, #f4f6f8, #9aa3ad 45%, #3c434b) !important; box-shadow: 0 0 0 2px #2a3036, 0 2px 4px rgba(0, 0, 0, .6); }
.card .taunt::after { display: none; }
.card.defense .frame { box-shadow: 0 0 0 3px #9aa3ad, 0 10px 22px rgba(0, 0, 0, .65); }
#stage.port .card .taunt { width: 40px; height: 40px; }

/* Interaction rings around the black frame */
.card.selectable .frame { box-shadow: 0 0 0 3px #57d98a, 0 0 24px rgba(87, 217, 138, .85) !important; }
.card.selectable.harm .frame { box-shadow: 0 0 0 3px #ff6a50, 0 0 24px rgba(255, 106, 80, .9) !important; }
.card.usable .frame { box-shadow: 0 0 0 3px #f6d77a, 0 0 22px rgba(246, 215, 122, .8) !important; }
.card.chosen .frame { box-shadow: 0 0 0 4px #fff0b0, 0 0 30px rgba(255, 224, 140, 1) !important; }
.card.breakthrough .frame { box-shadow: 0 0 0 2px #e0582c, 0 10px 22px rgba(0, 0, 0, .65) !important; }
.card.deathtouch .frame { box-shadow: 0 0 0 2px #9a4ae0, 0 10px 22px rgba(0, 0, 0, .65) !important; }

/* ---------- slots ---------- */
.slot, .slot.ally, .slot.place { border-radius: 12px; opacity: 1; background: rgba(10, 6, 4, .3); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .32); }
.slot.ally::after { display: none; }
.slot.selectable { background: rgba(246, 215, 122, .18); box-shadow: inset 0 0 0 2px #f6d77a, 0 0 22px rgba(246, 215, 122, .6); }
.region-col.fighting { background: rgba(255, 200, 110, .12); box-shadow: inset 0 0 0 2px rgba(246, 215, 122, .7); border-radius: 14px; }

/* ---------- hand, card backs, piles ---------- */
.hand-card .face { border: 2px solid var(--cs-frame) !important; border-radius: 11px; }
.card-back { border-radius: 10px; border: none; background: url('../assets/icons/crossed-swords.svg') center / 26% no-repeat, radial-gradient(circle at 50% 46%, #f0cf78 0 14%, transparent 14.5%), radial-gradient(circle at 50% 46%, #7a1a1a, #3a0808 75%) !important;
  box-shadow: inset 0 0 0 6px var(--cs-frame), inset 0 0 0 7.5px var(--cs-line), 0 8px 16px rgba(0, 0, 0, .7) !important; }
.card-back::after { display: none; }
.pile.deck::before { border-radius: 10px; background: var(--cs-frame); box-shadow: 3px 3px 0 #0a0d10, 6px 6px 0 #070a0c; }
.pile.grave .face { border-radius: 10px; border: 2px solid var(--cs-frame); filter: grayscale(.6) brightness(.55); }
.pile.grave .empty { border-radius: 10px; border: 1.5px solid rgba(217, 196, 138, .3); background: rgba(0, 0, 0, .3); color: rgba(217, 196, 138, .4); font-size: 26px; }
.pile .count { background: var(--cs-frame); border: 1.5px solid var(--cs-line); color: #fff; font-family: var(--cond); font-weight: 700; }
.pile .lbl { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; color: var(--cs-line); }

/* ---------- player info: name label and coin gem ---------- */
.pname { font-family: var(--cond); font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; font-size: 16px; color: var(--cs-line); text-shadow: 0 2px 3px #000; }
#stage.port .pname { font-size: 24px; }
.coins { z-index: 5; }
.coins .coin-ico { display: none !important; }
.coins span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-family: var(--cond); font-weight: 800; font-size: 28px; color: #3a2404; text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
  background: radial-gradient(circle at 34% 28%, #fff6cf 0, #f2cf6a 20%, #c08a22 55%, #5a3a08 92%); box-shadow: 0 0 0 3px #caa24e, 0 0 0 4px #5a3e10, 0 4px 8px rgba(0, 0, 0, .6), inset 0 -6px 10px rgba(0, 0, 0, .3); }
#stage.port .coins span { width: 62px; height: 62px; font-size: 34px; }

/* ---------- end turn = a red name ribbon in a card frame ---------- */
.end-turn { width: 250px; height: 74px; border-radius: 14px; border: 6px solid var(--cs-frame) !important; padding: 0 10px 0 34px;
  font-family: var(--cond) !important; font-weight: 800; font-size: 26px; letter-spacing: .5px; text-transform: uppercase; color: #fff !important; text-shadow: 0 2px 0 rgba(0, 0, 0, .45);
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), var(--rib-red) !important;
  box-shadow: inset 0 0 0 2px var(--cs-line), 0 10px 22px rgba(0, 0, 0, .65) !important; animation: none; }
.end-turn::before { content: ''; position: absolute; left: -22px; top: 50%; width: 48px; height: 48px; transform: translateY(-50%); border-radius: 50%;
  background: url('../assets/icons/hourglass.svg') center / 58% no-repeat, radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212); box-shadow: 0 0 0 2px #5a3e10, 0 3px 6px rgba(0, 0, 0, .6); }
.end-turn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.end-turn:active { transform: translateY(2px); }
.end-turn.ready { animation: endglow 1.3s ease-in-out infinite alternate; }
@keyframes endglow { from { box-shadow: inset 0 0 0 2px var(--cs-line), 0 10px 22px rgba(0, 0, 0, .65), 0 0 0 0 rgba(246, 215, 122, 0); } to { box-shadow: inset 0 0 0 2px var(--cs-line), 0 10px 22px rgba(0, 0, 0, .65), 0 0 26px 4px rgba(246, 215, 122, .7); } }
.end-turn.wait { background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), var(--rib-slate) !important; color: #d8dde2 !important; font-size: 21px; cursor: default; }
.end-turn.wait::before { filter: grayscale(.8) brightness(.8); }
#stage.port .end-turn { width: 214px; height: 72px; font-size: 22px; padding-left: 30px; }
#stage.port .end-turn.wait { font-size: 18px; }

/* ---------- parchment plaques: round, hint, log, powers ---------- */
.round-box, .hint-bar, .power { background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e) !important; color: var(--cs-ink) !important;
  box-shadow: inset 0 0 14px rgba(120, 80, 30, .4), 0 0 0 2px var(--cs-line), 0 0 0 6px var(--cs-frame), 0 10px 20px rgba(0, 0, 0, .55) !important; border: none !important; }
.round-box { width: 250px; padding: 8px 10px 10px; border-radius: 6px; font-family: var(--cond); }
.round-box b { color: var(--cs-ink); font-family: var(--cond); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: 1px; }
.round-box .phases { grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.round-box .ph { background: rgba(60, 40, 20, .1); border: none; border-radius: 3px; color: #6a5a40; font-family: var(--cond); font-weight: 700; font-size: 14px; }
.round-box .ph.on, .round-box .ph.battle.on { color: #fff; background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), var(--rib-red); box-shadow: 0 0 0 1.5px var(--cs-frame); }
#stage.port .round-box { width: 200px; }
.hint-bar { border-radius: 6px; padding: 8px 16px; min-height: 0; align-items: center; justify-content: center; text-align: center; font-family: var(--cond); font-weight: 600; font-size: 17px; line-height: 1.2; }
#stage.land .prompt.wait { display: none; }
.hint-bar .hint-ico { font-size: 20px; }
#stage.port .hint-bar { font-size: 24px; }
.log-panel { background: rgba(10, 8, 6, .72) !important; border: none !important; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(217, 196, 138, .4) !important; font-family: var(--cond); font-size: 20px; line-height: 1.28; color: #e0d2b0; }
.power { border-radius: 8px; padding: 6px 12px 6px 6px; font-family: var(--cond); font-weight: 700; font-size: 18px; filter: saturate(.5) brightness(.8); }
.power .pw-ico { background: radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212) !important; border: none !important; box-shadow: 0 0 0 2px #5a3e10; }
.power .pw-ico .ico { filter: brightness(0) opacity(.7); }
.power .pw-cost { color: #7a1a10; font-family: var(--cond); font-weight: 800; }
.power.ready { filter: none; animation: powerready 1.3s ease-in-out infinite alternate; }
@keyframes powerready { from { box-shadow: inset 0 0 14px rgba(120, 80, 30, .4), 0 0 0 2px var(--cs-line), 0 0 0 6px var(--cs-frame), 0 10px 20px rgba(0, 0, 0, .55); }
  to { box-shadow: inset 0 0 14px rgba(120, 80, 30, .4), 0 0 0 2px #fff0b0, 0 0 0 6px var(--cs-frame), 0 0 24px 6px rgba(246, 215, 122, .65); } }
#stage.port .power { font-size: 22px; }

/* ---------- round medals: top buttons and emotes ---------- */
.icon-btn, .emote-btn { border: none !important; color: #3a2404 !important; background: radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212) !important; box-shadow: 0 0 0 2px #5a3e10, 0 0 0 5px var(--cs-frame), 0 4px 10px rgba(0, 0, 0, .6) !important; }
.icon-btn .ico { filter: brightness(0) opacity(.75); }
.emote-btn { font-size: 0 !important; background: url('../assets/icons/chat-bubble.svg') center / 52% no-repeat, radial-gradient(circle at 40% 30%, #2a3038, var(--cs-frame)) !important;
  box-shadow: 0 0 0 2px var(--cs-line), 0 0 0 5px var(--cs-frame), 0 4px 10px rgba(0, 0, 0, .6) !important; }
.hero-powers { gap: 6px; }
#stage.land .power { padding: 4px 12px 4px 4px; font-size: 17px; }
#stage.land .power .pw-ico { width: 28px; height: 28px; }
.icon-btn:hover, .emote-btn:hover { filter: brightness(1.15); }

/* Prompt over the middle of the field: the same parchment as the hint, so it simply covers it. */
.prompt .ptext { min-width: 680px; text-align: center; border-radius: 6px; padding: 10px 18px; font-family: var(--cond); font-weight: 700; font-size: 20px; text-shadow: none;
  background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e) !important; color: var(--cs-ink) !important;
  box-shadow: inset 0 0 14px rgba(120, 80, 30, .4), 0 0 0 2px var(--cs-line), 0 0 0 6px var(--cs-frame), 0 10px 20px rgba(0, 0, 0, .55) !important; }
#stage.port .prompt .ptext { min-width: 0; font-size: 26px; }
.prompt .btn.small { font-family: var(--cond); font-weight: 800; text-transform: uppercase; color: #fff; border: 4px solid var(--cs-frame); border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), var(--rib-red); box-shadow: inset 0 0 0 1.5px var(--cs-line), 0 6px 14px rgba(0, 0, 0, .6); }

/* A light sweep across a Legend when it lands. */
.card.shine .face::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 246, 210, .75) 48%, transparent 64%); background-size: 260% 100%; animation: cardshine 1.2s ease-out; }
@keyframes cardshine { from { background-position: 150% 0; } to { background-position: -60% 0; } }

/* Big announcements = a red name ribbon across the field. */
.banner { height: 96px; top: calc(var(--banner-y, 330px) + 40px) !important; font-family: var(--cond) !important; font-weight: 800; font-size: 52px !important; letter-spacing: 2px; text-transform: uppercase; color: #fff !important;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45) !important; left: 50% !important; right: auto !important; width: 760px; margin-left: -380px; border-radius: 6px;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), var(--rib-red) !important; border: 8px solid var(--cs-frame);
  box-shadow: inset 0 0 0 2px var(--cs-line), 0 18px 40px rgba(0, 0, 0, .7) !important; }
.banner::before, .banner::after { display: none !important; }
.banner.dim { font-size: 40px !important; height: 80px; background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), var(--rib-slate) !important; color: #e4e8ec !important; }
.banner.red { color: #fff !important; }
#stage.port .banner { width: 820px; margin-left: -410px; }

/* Damage and heal numbers = the card's health gem. */
.float-num { font-family: var(--cond) !important; font-weight: 800; -webkit-text-stroke: 0; text-shadow: 0 2px 0 rgba(0, 0, 0, .6), 0 0 12px rgba(0, 0, 0, .6) !important; }
.splat { width: 74px !important; height: 74px !important; border-radius: 50%; font-family: var(--cond) !important; font-weight: 800; font-size: 34px !important; color: #fff !important;
  background: radial-gradient(circle at 34% 28%, #ffd6d6 0, #e05050 18%, #a51e22 52%, #4a0608 90%) !important;
  box-shadow: 0 0 0 3px #caa24e, 0 0 0 4px #5a3e10, 0 6px 14px rgba(0, 0, 0, .7) !important; text-shadow: 0 2px 2px rgba(0, 0, 0, .6); }
.splat.heal { background: radial-gradient(circle at 34% 28%, #e0ffe6 0, #5ad27a 18%, #1f8a3a 52%, #0a3a16 90%) !important; }

/* Legendary entrance: the title is a gold-lined red ribbon, the card keeps its black frame. */
.epic-card { box-shadow: 0 0 0 10px var(--cs-frame), 0 0 0 12px var(--cs-line), 0 0 60px 10px rgba(255, 210, 120, .45), 0 40px 80px #000 !important; border-radius: 16px; }
.epic-card::before, .epic-card::after { display: none !important; }
.epic-title { font-family: var(--cond) !important; font-weight: 800; font-size: 40px !important; letter-spacing: 3px; text-transform: uppercase; padding: 8px 36px; border-radius: 4px;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), var(--rib-red); border: 6px solid var(--cs-frame); box-shadow: inset 0 0 0 2px var(--cs-line), 0 12px 26px rgba(0, 0, 0, .7); }
.epic-title span { background: none !important; color: #fff !important; -webkit-text-fill-color: #fff; filter: none !important; text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.epic-name { font-family: var(--cond) !important; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #fff4d6; }
#stage.port .epic-title { font-size: 52px !important; }

/* Hand: a lifted card keeps an invisible "stem" down to its place in the fan, so the mouse never falls off it
   and the card does not jump up and down. Smooth ease without overshoot. */
.hand-card { transition: left .45s cubic-bezier(.2, .8, .3, 1), top .45s cubic-bezier(.2, .8, .3, 1), transform .3s cubic-bezier(.2, .7, .2, 1) !important; }
.hand-card::after { content: ''; position: absolute; left: -6px; right: -6px; top: 100%; height: 0; }
.hand-card:hover::after { height: 150px; }
.hand-card:hover { transform: translateY(-150px) scale(1.4) !important; }
.hand-card .face { transition: transform .2s ease-out, box-shadow .2s; }

/* Choice buttons under the prompt: large ribbons; «no / skip» in slate so it is easy to tell apart. */
.prompt .pbtns { gap: 14px; }
.prompt .btn.small { font-size: 22px; padding: 12px 30px; min-width: 180px; }
.prompt .btn.small.cancel { background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), var(--rib-slate); }
.prompt .btn.small:hover { filter: brightness(1.15); transform: translateY(-1px); }
#stage.port .prompt .btn.small { font-size: 28px; padding: 14px 34px; min-width: 240px; }

/* ---------- windows over the game (real screen pixels): card frame + parchment ---------- */
#game > .modal-back { background: rgba(6, 4, 2, .72); }
#game > .modal-back .modal { background: #0f1418; border: none; border-radius: 18px; padding: 22px 26px; box-shadow: inset 0 0 0 2px #d9c48a, 0 30px 70px rgba(0, 0, 0, .8); max-width: min(1200px, 96vw); }
#game > .modal-back .modal h3 { font-family: 'Fira Sans Extra Condensed', sans-serif; font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); color: #f3e7c8; text-align: center; line-height: 1.2; }
#game .mcard { width: clamp(130px, 13vw, 210px); height: calc(clamp(130px, 13vw, 210px) * 1.39); border-radius: 12px; box-shadow: 0 0 0 3px #0f1418, 0 10px 22px rgba(0, 0, 0, .7); }
#game .mcard.on { box-shadow: 0 0 0 4px #f6d77a, 0 0 28px rgba(246, 215, 122, .9); }
#game .modal .btn { font-family: 'Fira Sans Extra Condensed', sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(18px, 1.6vw, 22px); padding: 12px 28px; border-radius: 8px; color: #fff;
  border: 4px solid #0f1418; background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), #9a2420; box-shadow: inset 0 0 0 1.5px #d9c48a; }
#game .modal .btn.danger { background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), #3a4652; }

/* Option choice: the acting card on the left, big parchment options on the right. */
.pick-modal { width: min(1000px, 96vw); }
.pick-win { display: flex; gap: 26px; align-items: center; }
.pick-card { flex: none; width: clamp(150px, 20vw, 290px); aspect-ratio: .72; border-radius: 14px; background-size: cover; background-position: center; box-shadow: 0 0 0 4px #0f1418, 0 0 0 6px #d9c48a, 0 16px 34px rgba(0, 0, 0, .7); }
.pick-body { flex: 1; min-width: 0; }
.pick-body h3 { margin: 0 0 16px !important; }
.pick-opts { display: grid; gap: 12px; }
.pick-opts.numeric { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.pick-opt { display: block; width: 100%; text-align: left; cursor: pointer; border: none; border-radius: 8px; padding: 16px 20px; font-family: 'Fira Sans Extra Condensed', sans-serif; font-weight: 600;
  font-size: clamp(18px, 1.7vw, 24px); line-height: 1.25; color: #2a1e14; background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e);
  box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #d9c48a, 0 0 0 5px #0f1418; transition: transform .15s, box-shadow .15s; }
.pick-opts.numeric .pick-opt { text-align: center; font-weight: 800; font-size: 26px; padding: 12px 6px; }
.pick-opt:hover { transform: translateY(-2px); box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #fff0b0, 0 0 0 5px #0f1418, 0 0 22px rgba(246, 215, 122, .6); }
.pick-opt.cancel { margin-top: 14px; text-align: center; color: #fff; text-transform: uppercase; font-weight: 800; background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), #3a4652; box-shadow: inset 0 0 0 1.5px #d9c48a, 0 0 0 4px #0f1418; }
@media (max-width: 700px) { .pick-win { flex-direction: column; } .pick-card { width: 42vw; } .pick-opt { font-size: 19px; padding: 14px 16px; } }

/* The card a question is about: pulsing gold ring and a small «эта карта» ribbon. */
.card.focus .frame { animation: focuspulse 1s ease-in-out infinite alternate; }
@keyframes focuspulse { from { box-shadow: 0 0 0 3px #f6d77a, 0 0 12px rgba(246, 215, 122, .5) !important; } to { box-shadow: 0 0 0 5px #fff0b0, 0 0 30px rgba(246, 215, 122, 1) !important; } }
.card.focus::before { content: 'Эта карта'; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 2px 12px; border-radius: 3px;
  font: 800 15px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #2a1e14; background: #f6d77a; box-shadow: 0 0 0 2px #0f1418, 0 4px 10px rgba(0, 0, 0, .6); }
#stage.port .card.focus::before { font-size: 20px; top: -36px; }
.pick-opt .term, .hint-bar .term, .prompt .ptext .term { color: #8a1a10 !important; border-bottom-color: rgba(138, 26, 16, .5) !important; text-shadow: none !important; }
#game .sheet-why { margin: 12px 0 4px; padding: 10px 14px; border-radius: 6px; font: 600 18px/1.3 "Fira Sans Extra Condensed", sans-serif; color: #fff; background: linear-gradient(rgba(255,255,255,.1), rgba(0,0,0,.2)), #7a1e1a; box-shadow: inset 0 0 0 1.5px #d9c48a; }

/* ---------- history: who did what to whom ---------- */
.log-panel .has-ref { cursor: help; border-radius: 4px; padding: 1px 4px; margin: 0 -4px 3px; }
.log-panel .has-ref:hover { background: rgba(217, 196, 138, .16); color: #fff; }
.lr { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.lr-card { display: inline-block; width: 46px; height: 64px; border-radius: 5px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #0f1418, 0 0 0 3.5px #8fb8e8; }
.lr-card.theirs { box-shadow: 0 0 0 2px #0f1418, 0 0 0 3.5px #e8907a; }
.lr-arrow { color: #f6d77a; font-size: 22px; text-shadow: 0 2px 2px #000; }
.logref-pop { position: fixed; z-index: 260; pointer-events: none; padding: 14px 18px 16px; border-radius: 14px; background: #0f1418; max-width: min(760px, 70vw);
  box-shadow: inset 0 0 0 2px #d9c48a, 0 18px 40px rgba(0, 0, 0, .8); animation: fadein .15s; }
.lrb-text { font-family: 'PT Serif', serif; font-size: 19px; line-height: 1.3; color: #f3e6c4; text-align: center; margin-bottom: 12px; }
.lrb-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.lrb { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; width: clamp(150px, 13vw, 210px); text-align: center; }
.lrb figcaption { font-family: var(--cond); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 12px; border-radius: 4px; color: #fff; background: #2f6fb0; }
.lrb.theirs figcaption { background: #a8402e; }
.lrb-card { display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #8fb8e8, 0 8px 18px rgba(0, 0, 0, .6); }
.lrb.theirs .lrb-card { box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #e8907a, 0 8px 18px rgba(0, 0, 0, .6); }
.lrb b { font-family: var(--cond); font-size: 18px; color: #fff; line-height: 1.15; }
.lrb small { font-size: 14px; color: #b9ab88; }
.lrb-arrow { font-size: 46px; color: #f6d77a; text-shadow: 0 2px 3px #000; }
.card.logfocus .frame { box-shadow: 0 0 0 4px #f6d77a, 0 0 26px rgba(246, 215, 122, .9) !important; }
#game .log-full .log-line { display: flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(217, 196, 138, .12); }
#game .log-full .lr-card { width: 38px; height: 53px; }

/* ---------- Опережение window: card frame, wine-red ribbon title, the action on the left, your answers on the right ---------- */
#game .priority-panel { background: radial-gradient(ellipse at 50% 0%, #2a1c12, #120c08 75%) !important; border: none !important; border-radius: 18px; padding: 0 22px 20px; width: min(780px, 94vw);
  box-shadow: inset 0 0 0 2px #d9c48a, 0 30px 70px rgba(0, 0, 0, .8) !important; }
#game .pri-head { margin: -1px -22px 14px; padding: 10px; border-radius: 16px 16px 0 0; font: 800 26px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #f6e2a8; text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)), #6e2118; box-shadow: inset 0 0 0 2px #d9c48a; }
#game .pri-what { font: 600 21px/1.3 'Fira Sans Extra Condensed', sans-serif; color: #f3e7c8; }
#game .pri-row { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
#game .pri-vs { text-align: center; }
#game .pri-vs-card { width: 150px; aspect-ratio: .72; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #e8907a, 0 12px 26px rgba(0, 0, 0, .7); }
#game .pri-vs-lbl { margin-top: 8px; font: 700 15px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #e8907a; }
#game .pri-arrow { font-size: 40px; color: #f6d77a; text-shadow: 0 2px 4px #000; }
#game .pri-opts { margin: 0; gap: 14px; }
#game .pri-card { width: 150px; padding: 0; border: none; background: none; color: #f3e7c8; font: 700 16px 'Fira Sans Extra Condensed', sans-serif; }
#game .pri-card .pri-img { height: auto; aspect-ratio: .72; margin-bottom: 8px; border-radius: 10px; background-size: cover !important; background-position: center !important; box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #d9c48a, 0 12px 26px rgba(0, 0, 0, .7); }
#game .pri-card:hover { transform: translateY(-6px); box-shadow: none; }
#game .pri-card:hover .pri-img { box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #f6d77a, 0 0 26px rgba(246, 215, 122, .8); }
#game .pri-btns .btn { font-family: 'Fira Sans Extra Condensed', sans-serif; font-weight: 800; text-transform: uppercase; color: #fff; border: 4px solid #0f1418; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #d9c48a; }
#game .pri-btns .btn.primary { font-size: 22px; padding: 12px 34px; background: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .2)), #5a4630; }
#game .pri-btns .btn.small { background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), #4a3a28; }
#game .pri-why { font-family: 'Fira Sans Extra Condensed', sans-serif; font-size: 17px; color: #d8cba8; }
@media (max-width: 700px) { #game .pri-vs-card, #game .pri-card { width: 110px; } #game .pri-head { font-size: 20px; } }
#game .pri-head.danger { background: linear-gradient(rgba(255, 255, 255, .13), rgba(0, 0, 0, .2)), #9a2420; }
#game .pri-scene { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0 14px; flex-wrap: wrap; }
#game .pri-vs-card.mine { box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #8fb8e8, 0 12px 26px rgba(0, 0, 0, .7); }
#game .pri-vs-card.threat { box-shadow: 0 0 0 3px #0f1418, 0 0 0 6px #ff5a44, 0 0 30px rgba(255, 90, 68, .8); animation: threatpulse .9s ease-in-out infinite alternate; }
#game .pri-vs-lbl.threat { color: #ff8a74; }
#game .pri-vs-lbl.mine { color: #8fb8e8; }
@keyframes threatpulse { to { box-shadow: 0 0 0 3px #0f1418, 0 0 0 6px #ff8a74, 0 0 44px rgba(255, 90, 68, 1); } }
#game .pri-sub { font: 600 18px 'Fira Sans Extra Condensed', sans-serif; color: #f6d77a; margin: 4px 0 10px; }
.card.threat .frame { animation: threatring .8s ease-in-out infinite alternate; }
@keyframes threatring { from { box-shadow: 0 0 0 3px #ff5a44, 0 0 14px rgba(255, 90, 68, .6) !important; } to { box-shadow: 0 0 0 5px #ff8a74, 0 0 34px rgba(255, 90, 68, 1) !important; } }
.card.threat::before { content: 'Под ударом'; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 2px 10px; border-radius: 3px;
  font: 800 15px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #fff; background: #b8281c; box-shadow: 0 0 0 2px #0f1418, 0 4px 10px rgba(0, 0, 0, .6); }
#game .priority-panel { max-height: 96vh; overflow-y: auto; }
#game .pri-vs-card, #game .pri-card { width: clamp(84px, 17vh, 150px); }
#game .pri-head { font-size: clamp(18px, 3.2vh, 26px); }
#game .pri-what { font-size: clamp(16px, 2.6vh, 21px); }

/* ---------- dragging a card from the hand ---------- */
.hand-card.dragging { z-index: 400 !important; cursor: grabbing; transform-origin: 50% 50% !important; }
.hand-card.dragging .face { box-shadow: 0 0 0 3px #f6d77a, 0 0 30px rgba(246, 215, 122, .7), 0 30px 50px rgba(0, 0, 0, .7) !important; }
.hand-card.dragging::after { display: none; }
#stage.drag-on .hand-card:not(.dragging):hover { transform: none !important; }
#stage.drop-ready .field-shade { box-shadow: inset 0 0 0 3px #f6d77a, inset 0 0 80px rgba(246, 215, 122, .25); }
.slot.drop-here { background: rgba(246, 215, 122, .3) !important; box-shadow: inset 0 0 0 3px #fff0b0, 0 0 26px rgba(246, 215, 122, .8) !important; }
.hand-card.playable { cursor: grab; }

/* ---------- choosing between sides / actions of a card: show what you get ---------- */
.choice-modal { width: min(980px, 96vw); }
.choice-row { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin: 6px 0 16px; }
.choice-card { width: clamp(200px, 26vw, 300px); display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border: none; border-radius: 12px; cursor: pointer; text-align: left;
  background: radial-gradient(ellipse at 50% 30%, #f3e7c8, #e2cfa4 70%, #c9b07e); color: #2a1e14; box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #d9c48a, 0 0 0 5px #0f1418; transition: transform .15s, box-shadow .15s; }
.choice-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #fff0b0, 0 0 0 5px #0f1418, 0 0 26px rgba(246, 215, 122, .7); }
.ch-img { width: 100%; aspect-ratio: .72; border-radius: 8px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #0f1418; }
.ch-name { font: 800 20px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; }
.ch-meta { display: flex; gap: 8px; align-items: center; font: 800 18px 'Fira Sans Extra Condensed', sans-serif; }
.ch-cost { padding: 2px 10px; border-radius: 12px; background: #0f1418; color: #f6d77a; }
.ch-st { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; box-shadow: 0 0 0 2px #caa24e; }
.ch-st.atk { background: radial-gradient(circle at 34% 28%, #cfe6ff 0, #5a9ae8 18%, #1f56a8 52%, #0b2350 90%); }
.ch-st.hp { background: radial-gradient(circle at 34% 28%, #ffd6d6 0, #e05050 18%, #a51e22 52%, #4a0608 90%); }
.ch-text { font: 500 16px/1.3 'Fira Sans Extra Condensed', sans-serif; }
.ch-text .term { color: #8a1a10; }
.ch-go { margin-top: auto; text-align: center; padding: 8px; border-radius: 6px; font: 800 18px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #fff;
  background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), #9a2420; box-shadow: inset 0 0 0 1.5px #d9c48a; }
@media (max-width: 700px) { .choice-card { width: 44vw; padding: 8px; } .ch-text { font-size: 14px; } }

/* ---------- mulligan: cards sized to the screen height, buttons always visible ---------- */
.mull-modal { display: flex; flex-direction: column; max-height: 94vh; }
.mull-modal .cards { flex: 1 1 auto; min-height: 0; overflow: auto; }
#game .mull-modal .mcard { width: clamp(90px, min(16vw, 28vh), 210px); height: calc(clamp(90px, min(16vw, 28vh), 210px) * 1.39); }
.mull-modal .row-btns { position: sticky; bottom: 0; padding-top: 10px; background: #0f1418; flex-wrap: wrap; }
.mull-modal p { margin: 6px 0 0 !important; font-size: 15px; }

/* ---------- card or coin: two big choices ---------- */
.draw-modal { width: min(640px, 94vw); }
.draw-big { display: flex; gap: clamp(14px, 4vw, 40px); justify-content: center; margin: 8px 0 6px; }
.draw-opt { display: flex; flex-direction: column; align-items: center; gap: 14px; width: clamp(140px, 40vw, 230px); padding: 18px 12px; border: none; border-radius: 14px; cursor: pointer;
  background: radial-gradient(ellipse at 50% 30%, #f3e7c8, #e2cfa4 70%, #c9b07e); box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #d9c48a, 0 0 0 5px #0f1418; transition: transform .15s, box-shadow .15s; }
.draw-opt:hover { transform: translateY(-5px); box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #fff0b0, 0 0 0 5px #0f1418, 0 0 28px rgba(246, 215, 122, .7); }
.draw-pic { width: clamp(90px, 22vw, 130px); aspect-ratio: .72; border-radius: 10px;
  background: url('../assets/icons/crossed-swords.svg') center / 30% no-repeat, radial-gradient(circle at 50% 46%, #f0cf78 0 15%, transparent 15.5%), radial-gradient(circle at 50% 46%, #7a1a1a, #3a0808 75%);
  box-shadow: inset 0 0 0 6px #0f1418, inset 0 0 0 7.5px #d9c48a, 0 10px 20px rgba(0, 0, 0, .5); }
.draw-opt.opt-coin .draw-pic { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff6cf 0, #f2cf6a 20%, #c08a22 55%, #5a3a08 92%);
  box-shadow: 0 0 0 5px #caa24e, 0 0 0 7px #5a3e10, 0 10px 20px rgba(0, 0, 0, .5), inset 0 -10px 18px rgba(0, 0, 0, .3); }
.draw-lbl { font: 800 clamp(20px, 2.4vw, 26px) 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #2a1e14; line-height: 1.15; text-align: center; }
.draw-lbl small { display: block; text-transform: none; font-weight: 600; font-size: .7em; color: #5a4a30; margin-top: 4px; }

/* ---------- placing an ally: what it will be in each region ---------- */
.slot-prev { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; pointer-events: none; text-align: center; padding: 6px; }
.sp-gems { display: flex; gap: 10px; }
.sp-gem { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 800 24px 'Fira Sans Extra Condensed', sans-serif; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, .6); box-shadow: 0 0 0 3px #caa24e, 0 0 0 4px #5a3e10; }
.sp-gem.atk { background: radial-gradient(circle at 34% 28%, #cfe6ff 0, #5a9ae8 18%, #1f56a8 52%, #0b2350 90%); }
.sp-gem.hp { background: radial-gradient(circle at 34% 28%, #ffd6d6 0, #e05050 18%, #a51e22 52%, #4a0608 90%); }
.sp-note { font: 700 14px/1.15 'Fira Sans Extra Condensed', sans-serif; color: #f3e7c8; background: rgba(15, 20, 24, .85); padding: 3px 8px; border-radius: 4px; }
.slot-prev.bonus .sp-note { color: #2a1e14; background: #f6d77a; }
.slot-prev.bonus .sp-gems { filter: drop-shadow(0 0 10px rgba(246, 215, 122, .9)); }
#stage.port .sp-gem { width: 52px; height: 52px; font-size: 28px; }
#stage.port .sp-note { font-size: 17px; }

/* ---------- a card whose ability can be used right now: pulsing light-blue ring + «Свойство» badge ---------- */
.card.usable { cursor: pointer; }
.card.usable .frame { animation: usablepulse 1.1s ease-in-out infinite alternate; }
@keyframes usablepulse { from { box-shadow: 0 0 0 3px #7fd4ff, 0 0 10px rgba(127, 212, 255, .5) !important; } to { box-shadow: 0 0 0 5px #c8ecff, 0 0 30px rgba(127, 212, 255, 1) !important; } }
.card.usable::after { content: '✦ Свойство'; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 2px 10px; border-radius: 3px; pointer-events: none;
  font: 800 13px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #0f1418; background: #9fdcff; box-shadow: 0 0 0 2px #0f1418, 0 3px 8px rgba(0, 0, 0, .6); }
.card.place.usable::after, .card.small.usable::after { bottom: auto; top: calc(100% + 4px); }
.card.leader.usable::after { display: none; } /* the Leader's abilities have their own buttons */
#stage.port .card.usable::after { font-size: 17px; }

/* ---------- world ranking ---------- */
.rk-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; font-size: 17px; }
.rk-name input { font: inherit; background: #1d130b; color: #f3e7c8; border: 1px solid #6b4b25; border-radius: 6px; padding: 6px 10px; width: 200px; }
.st-tabs.sub { margin-top: 8px; }
.rk-table tr.rk-me td { background: rgba(246, 215, 122, .14); }
.rk-medal { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font: 800 17px 'Fira Sans Extra Condensed', sans-serif; color: #2a1e14; box-shadow: 0 0 0 2px #0f1418; }
.rk-medal.m1 { background: radial-gradient(circle at 34% 28%, #fff6cf, #f2cf6a 30%, #b07a16 80%); }
.rk-medal.m2 { background: radial-gradient(circle at 34% 28%, #ffffff, #c9ced6 35%, #7c838c 85%); }
.rk-medal.m3 { background: radial-gradient(circle at 34% 28%, #ffe2c8, #d08a4a 35%, #7a4418 85%); }
.rk-place { display: inline-block; width: 32px; text-align: center; font-weight: 700; color: #cbbd9c; }

/* ---------- hint: like a card's text box — name-style heading and an italic line ---------- */
.hint-bar { gap: 12px !important; justify-content: flex-start !important; text-align: left !important; padding: 7px 16px 7px 8px !important; }
.hint-bar .hint-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 0 !important;
  background: radial-gradient(circle at 34% 28%, #fff1c0, #d6a948 45%, #7a5212); box-shadow: 0 0 0 2px #5a3e10, 0 2px 4px rgba(0, 0, 0, .5); }
.hint-bar .hint-ico i { width: 64%; height: 64%; background: #3a2404; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.hint-bar .hint-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hint-bar .hint-txt b { font: 800 18px/1.1 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: .4px; color: #2a1e14; }
.hint-bar .hint-txt em { font: italic 400 15px/1.2 'PT Serif', serif; color: #4a3826; }
#stage.port .hint-bar .hint-ico { width: 44px; height: 44px; }
#stage.port .hint-bar .hint-txt b { font-size: 24px; }
#stage.port .hint-bar .hint-txt em { font-size: 20px; }
#stage.land .hint-bar { min-height: 96px; align-items: center; }
#stage.land .hint-bar .hint-txt b { font-size: 17px; }
#stage.land .hint-bar .hint-txt em { font-size: 14px; }

/* ---------- end of game: leaders face to face, the match in numbers, ranking change ---------- */
#game > .over-screen.over2 { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, rgba(62, 20, 36, .92), rgba(14, 4, 8, .97) 75%); animation: fadein .5s; }
.over2 .ov-side { position: absolute; top: 0; bottom: 0; width: 38vw; background-size: auto 232%; background-position: 50% 21%; background-repeat: no-repeat; }
.over2 .ov-me { left: -4vw; clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); animation: ovleft .8s cubic-bezier(.2, .8, .3, 1); }
.over2 .ov-op { right: -4vw; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); animation: ovright .8s cubic-bezier(.2, .8, .3, 1); }
.over2 .ov-side.dim { filter: grayscale(.85) brightness(.35); }
.over2 .ov-side.bright { filter: brightness(.75); }
.over2 .ov-side::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 40%, rgba(14, 4, 8, .85)); }
.over2 .ov-op::after { background: linear-gradient(270deg, transparent 40%, rgba(14, 4, 8, .85)); }
@keyframes ovleft { from { transform: translateX(-30%); opacity: 0; } }
@keyframes ovright { from { transform: translateX(30%); opacity: 0; } }
.over2 .ov-center { position: relative; z-index: 2; width: min(620px, 92vw); max-height: 96vh; overflow-y: auto; text-align: center; padding: 18px 20px 20px; border-radius: 18px; background: rgba(15, 20, 24, .92);
  box-shadow: inset 0 0 0 2px #d9c48a, 0 30px 70px rgba(0, 0, 0, .8); animation: pickpop .5s .2s both cubic-bezier(.2, .8, .3, 1.2); color: #f3e7c8; }
.over2 .ov-title { white-space: nowrap; font: 400 clamp(36px, 6.4vw, 72px)/1.05 'Ruslan Display', serif; background: linear-gradient(#fff6d8, #d9a640); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .8)); }
.over2.lose .ov-title { background: linear-gradient(#e4e8ec, #7c838c); -webkit-background-clip: text; background-clip: text; }
.over2 .ov-sub { margin: 6px 0 14px; font: 600 clamp(17px, 2vw, 21px) 'Fira Sans Extra Condensed', sans-serif; color: #d9c48a; }
.ov-stats { width: 100%; border-collapse: collapse; font: 600 18px 'Fira Sans Extra Condensed', sans-serif; }
.ov-stats th { font-weight: 800; text-transform: uppercase; letter-spacing: .5px; font-size: 14px; color: #a99877; padding: 4px; }
.ov-stats td { padding: 5px 8px; border-top: 1px solid rgba(217, 196, 138, .15); }
.ov-stats td:first-child { text-align: left; color: #cbbd9c; }
.ov-stats td.up { color: #f6d77a; font-weight: 800; }
.ov-highs { display: grid; gap: 8px; margin: 12px 0; }
.ov-high { display: flex; align-items: center; gap: 12px; text-align: left; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); font: 500 16px 'Fira Sans Extra Condensed', sans-serif; }
.ov-high b { display: block; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .5px; color: #a99877; }
.ov-pic { flex: none; width: 46px; height: 64px; border-radius: 5px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #0f1418, 0 0 0 3px #d9c48a; }
.ov-rank { min-height: 30px; margin: 10px 0 14px; font: 500 17px/1.3 'Fira Sans Extra Condensed', sans-serif; }
.ov-wait { color: #a99877; font-style: italic; }
.ov-rank-in { display: flex; align-items: center; gap: 14px; text-align: left; padding: 10px 14px; border-radius: 10px; background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e); color: #2a1e14;
  box-shadow: inset 0 0 14px rgba(120, 80, 30, .35), 0 0 0 2px #d9c48a; animation: pickpop .4s cubic-bezier(.2, .8, .3, 1.3); }
.ov-rank-place { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 800 26px 'Fira Sans Extra Condensed', sans-serif; color: #3a2404;
  background: radial-gradient(circle at 34% 28%, #fff6cf 0, #f2cf6a 20%, #c08a22 55%, #5a3a08 92%); box-shadow: 0 0 0 3px #caa24e, 0 0 0 4px #5a3e10; }
.ov-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ov-btn { cursor: pointer; border: 4px solid #0f1418; border-radius: 8px; padding: 12px 24px; font: 800 20px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #fff;
  background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .2)), #3a4652; box-shadow: inset 0 0 0 1.5px #d9c48a; }
.ov-btn.gold { background: linear-gradient(rgba(255, 255, 255, .14), rgba(0, 0, 0, .2)), #9a2420; }
.ov-btn:hover { filter: brightness(1.15); }
@media (max-width: 700px) { .over2 .ov-side { width: 60vw; opacity: .5; } .ov-stats { font-size: 16px; } }

/* Card hover: what is on the card now and what happened to it. */
.pv-fx { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(217, 196, 138, .1); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .35); font-size: 15px; line-height: 1.35; }
.pv-fx-h { font-family: var(--cond); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #f6d77a; margin: 4px 0 2px; }
.pv-fx-h:first-child { margin-top: 0; }
.pv-fx small { color: #9d917a; }

/* ---------- End screen v3: the two Leaders face to face, stats behind a button ---------- */
.over3 { align-content: center; }
.over3 .ov-vs { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(10px, 3vw, 46px); width: min(1180px, 96vw); }
.over3 .ov-fighter { position: relative; justify-self: center; width: min(34vw, 380px); animation: ovleft .8s cubic-bezier(.2, .8, .3, 1); }
.over3 .ov-fighter.op { animation-name: ovright; }
.over3 .ov-port { aspect-ratio: .78; border-radius: 16px; background-size: cover; background-position: 50% 30%; box-shadow: 0 0 0 5px #0f1418, 0 0 0 7px #d9c48a, 0 24px 50px rgba(0, 0, 0, .75); transition: filter .6s; }
.over3 .ov-fighter.lost .ov-port { filter: grayscale(.8) brightness(.5); }
.over3 .ov-fighter.won .ov-port { box-shadow: 0 0 0 5px #0f1418, 0 0 0 8px #f6d77a, 0 0 50px rgba(246, 215, 122, .55), 0 24px 50px rgba(0, 0, 0, .75); }
.over3 .ov-crown { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); padding: 3px 16px; border-radius: 4px; white-space: nowrap; font: 800 16px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #3a2404; background: linear-gradient(#fff3c4, #d9a640); box-shadow: 0 0 0 2px #0f1418, 0 6px 14px rgba(0, 0, 0, .6); }
.over3 .ov-plate { position: relative; margin: -34px 14px 0; padding: 8px 12px 10px; border-radius: 8px; text-align: center; background: linear-gradient(rgba(255, 255, 255, .1), rgba(0, 0, 0, .25)), #9a2420; box-shadow: 0 0 0 3px #0f1418, inset 0 0 0 1.5px #d9c48a, 0 10px 20px rgba(0, 0, 0, .6); }
.over3 .ov-fighter.op .ov-plate { background-color: #3a4652; }
.over3 .ov-plate b { display: block; font: 800 clamp(18px, 2.2vw, 26px) 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.over3 .ov-plate small { font: 500 15px 'Fira Sans Extra Condensed', sans-serif; color: #f0e2bf; }
.over3 .ov-hp { position: absolute; right: -16px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; font: 800 18px 'Fira Sans Extra Condensed', sans-serif; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #b8281c 60%, #6e1410); box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #d9c48a; }
.over3 .ov-mid { text-align: center; min-width: 0; }
.over3 .ov-title { font-size: clamp(34px, 5.4vw, 72px); }
.over3 .ov-vsword { margin: 6px 0; font: 400 clamp(40px, 6vw, 84px)/1 'Ruslan Display', serif; color: #d9c48a; text-shadow: 0 4px 12px #000; opacity: .85; }
.over3 .ov-sub { margin: 0; font-size: clamp(15px, 1.6vw, 19px); }
.over3 .ov-bottom { position: relative; z-index: 2; width: min(720px, 94vw); margin: 22px auto 0; text-align: center; }
.over3 .ov-rank { margin: 8px 0 12px; }
.over3 .ov-level { margin: -4px 0 12px; font: 600 16px 'Fira Sans Extra Condensed', sans-serif; color: #f6d77a; }
.over3 .ov-ach { display: flex; align-items: center; gap: 12px; margin: 0 auto 8px; max-width: 520px; padding: 8px 14px; border-radius: 10px; text-align: left; color: #2a1e14;
  background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e); box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #d9c48a; animation: fadein .6s; }
.over3 .ov-ach span { font-size: 34px; }
.over3 .ov-ach b { display: block; font: 800 17px 'Fira Sans Extra Condensed', sans-serif; }
.over3 .ov-ach small { font: 500 15px 'Fira Sans Extra Condensed', sans-serif; }
.over3 .ov-btns { margin-bottom: 10px; }
.over3 .ov-btn { padding: 10px 18px; font-size: 18px; }
.over3 .ov-statpanel { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(8, 4, 6, .78); animation: fadein .2s; }
.over3 .ov-statpanel.hidden { display: none; }
.over3 .ov-statin { width: min(560px, 92vw); padding: 18px 20px; border-radius: 16px; background: #0f1418; box-shadow: inset 0 0 0 2px #d9c48a, 0 30px 70px rgba(0, 0, 0, .8); text-align: center; }
@media (max-width: 760px) {
  .over3 .ov-vs { grid-template-columns: 1fr 1fr; }
  .over3 .ov-mid { grid-column: 1 / -1; grid-row: 1; }
  .over3 .ov-fighter { width: 42vw; }
  .over3 .ov-plate b { font-size: 16px; }
  .over3 .ov-hp { width: 40px; height: 40px; font-size: 14px; right: -8px; }
}

/* Awards page */
.ach-head { margin: 4px 0 10px; font: 800 20px 'Fira Sans Extra Condensed', sans-serif; color: #f6d77a; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ach { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .2); opacity: .5; filter: grayscale(1); }
.ach.on { opacity: 1; filter: none; background: rgba(246, 215, 122, .1); box-shadow: inset 0 0 0 1.5px #d9c48a; }
.ach-ico { font-size: 30px; }
.ach b { display: block; font: 800 17px 'Fira Sans Extra Condensed', sans-serif; color: #f3e7c8; }
.ach small { font: 500 14px 'Fira Sans Extra Condensed', sans-serif; color: #b9a77a; }
#game > .over-screen.over3 { overflow-y: auto; padding: 24px 0; }
.shown-pop { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 250; padding: 14px 18px 18px; border-radius: 14px; text-align: center; pointer-events: none;
  background: #120c08; box-shadow: inset 0 0 0 2px #d9c48a, 0 24px 60px rgba(0, 0, 0, .8); animation: fadein .25s; transition: opacity .4s; }
.shown-pop.out { opacity: 0; }
.shown-title { margin-bottom: 10px; font: 800 20px 'Fira Sans Extra Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #f6d77a; }
.shown-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.shown-card { width: clamp(100px, 13vw, 170px); aspect-ratio: 5 / 7; border-radius: 10px; background-size: cover; background-position: center; box-shadow: 0 0 0 3px #0f1418, 0 0 0 5px #e8907a; }
/* Prompt in the right column on wide screens (keeps the field and the health gems visible). */
#stage.land .prompt.side { transform: translate(-50%, 0); width: 300px; max-width: 300px; gap: 10px; }
#stage.land .prompt.side .ptext { min-width: 0; width: 100%; white-space: normal; font-size: 19px; line-height: 1.25; padding: 10px 12px; }
#stage.land .prompt.side .pbtns { flex-direction: column; align-items: stretch; width: 100%; gap: 8px; }
#stage.land .prompt.side .btn.small { min-width: 0; width: 100%; font-size: 19px; padding: 9px 12px; }
/* Fit the end screen on short screens: portraits follow the screen height. */
.over3 .ov-fighter { width: min(30vw, 340px, 42vh); }
.over3 .ov-port { aspect-ratio: .9; }
.over3 .ov-bottom { margin-top: 2.2vh; }
@media (max-width: 760px) { .over3 .ov-fighter { width: min(42vw, 34vh); } }
.hand-limit { position: absolute; z-index: 60; transform: translateX(-50%); white-space: nowrap; padding: 5px 14px; border-radius: 6px; pointer-events: none;
  font: 700 17px 'Fira Sans Extra Condensed', sans-serif; color: #fff; background: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .2)), #9a2420; box-shadow: 0 0 0 3px #0f1418, inset 0 0 0 1.5px #d9c48a, 0 6px 14px rgba(0, 0, 0, .6); animation: fadein .3s; }
/* Spectator view: no hint panel. */
#stage.spectating #hint { visibility: hidden; }

/* ---------- Watchers: chat panel (watchers) and pop-up comments (players) ---------- */
.watch-chat { position: fixed; z-index: 240; font-family: 'Fira Sans Extra Condensed', sans-serif; }
.watch-chat.is-watcher { right: 12px; bottom: 12px; width: min(340px, 92vw); display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  background: rgba(15, 10, 6, .92); box-shadow: inset 0 0 0 1.5px #d9c48a, 0 14px 30px rgba(0, 0, 0, .7); }
.wc-head { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-weight: 700; font-size: 15px; color: #f6e2a8; background: #6e2118; }
.wc-head .wc-eye { padding: 1px 8px; border-radius: 4px; background: rgba(0, 0, 0, .3); }
.wc-min { margin-left: auto; border: none; background: none; color: #f6e2a8; font-size: 20px; cursor: pointer; line-height: 1; }
.wc-list { height: min(36vh, 300px); overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; font-size: 16px; color: #efe2c2; }
.watch-chat.min .wc-list, .watch-chat.min .wc-form { display: none; }
.wc-msg b { color: #f6d77a; margin-right: 4px; }
.wc-msg.mine b { color: #8fd4a0; }
.wc-sys { font-size: 14px; color: #b9a77a; font-style: italic; }
.wc-form { display: flex; gap: 6px; padding: 8px; border-top: 1px solid rgba(217, 196, 138, .25); }
.wc-form input { flex: 1; min-width: 0; padding: 7px 9px; border-radius: 6px; border: none; font: 500 16px 'Fira Sans Extra Condensed', sans-serif; background: #f3e7c8; color: #2a1e14; }
.wc-form button { padding: 0 12px; border: none; border-radius: 6px; cursor: pointer; font-size: 17px; color: #fff; background: #9a2420; }
.watch-chat.is-player { left: 12px; top: 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: min(420px, 80vw); }
.watch-chat.is-player.none { display: none; }
.wc-badge { display: flex; align-items: baseline; gap: 8px; padding: 4px 10px; border: none; border-radius: 6px; cursor: pointer; font: 700 15px 'Fira Sans Extra Condensed', sans-serif; color: #f6e2a8; background: rgba(15, 10, 6, .85); box-shadow: inset 0 0 0 1.5px #d9c48a; }
.wc-badge small { font-weight: 500; color: #b9a77a; }
.watch-chat.muted .wc-badge { opacity: .7; }
.wc-pops { display: flex; flex-direction: column; gap: 5px; }
.wc-pop { padding: 5px 10px; border-radius: 6px; font: 500 16px 'Fira Sans Extra Condensed', sans-serif; color: #2a1e14; background: rgba(243, 231, 200, .95); box-shadow: 0 0 0 2px #0f1418, 0 6px 14px rgba(0, 0, 0, .5); animation: fadein .3s; transition: opacity .6s; }
.wc-pop b { color: #6e2118; }
.wc-pop.out { opacity: 0; }
.watch-chat.is-watcher { width: clamp(240px, 26vw, 340px); }
.wc-list { height: clamp(120px, 26vh, 280px); }

/* ---------- Readability: names on ribbons, cost on hand cards, hand spreads on hover ---------- */
.card .nm.rib.big { font-size: calc(var(--name) * 1.14); }
.card .nm.rib.two { white-space: normal; text-overflow: clip; height: calc(var(--rib-h) * 1.7); line-height: .98; display: flex !important; align-items: center; justify-content: center; font-size: calc(var(--name) * 1.02); padding-top: 1px; }
.card .nm.rib.two span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.ally .nm.rib.two { bottom: 5px; }
.hand-card .cost-now { top: auto; bottom: auto; right: auto; left: -8px; top: -8px; min-width: 38px; height: 38px; border-radius: 19px; font: 800 21px 'Fira Sans Extra Condensed', sans-serif; z-index: 3;
  box-shadow: 0 0 0 2px #0f1418, 0 0 0 3.5px #d9c48a, 0 3px 8px rgba(0, 0, 0, .7); border: none; }
.hand-card { transition: left .45s cubic-bezier(.2, .8, .3, 1), top .45s cubic-bezier(.2, .8, .3, 1), transform .3s cubic-bezier(.2, .7, .2, 1), translate .25s ease-out !important; }
.card.leader .nm.rib { padding: 0 calc(var(--gem) * .95); }
.card.leader .nm.rib.lname-long { font-size: calc(var(--name) - 1px); }
.card .kw.state { font-size: 15px; display: grid; place-items: center; }
.card .kw.state.stun { background: radial-gradient(circle at 35% 30%, #fff3c0, #d9a640 60%, #6e4a10) !important; }
.card .kw.state.ward { background: radial-gradient(circle at 35% 30%, #e8f6ff, #6fb2e0 60%, #1e4a70) !important; }

/* ---------- Phones (portrait layout) ---------- */
#stage.port .round-box { transform: scale(.82); transform-origin: left top; }
#stage.port .pname { max-width: 440px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage.port .hand-card .cost-now { min-width: 52px; height: 52px; border-radius: 26px; font-size: 30px; left: -10px; top: -10px; }
#stage.port .card .stat { font-weight: 800; }

/* Screen change: a short fade-and-settle, like a page turned on the table. */
.screen.screen-in { animation: screenin .32s cubic-bezier(.2, .8, .3, 1); }
@keyframes screenin { from { opacity: 0; transform: scale(.985); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- One button style everywhere: dark card frame, pale-gold line, condensed letters ---------- */
.btn:not(.hs-go) { font-family: 'Fira Sans Extra Condensed', sans-serif; font-weight: 700; letter-spacing: .3px; color: #f3e7c8; border: none; border-radius: 8px;
  background: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .22)), #4a3524; box-shadow: 0 0 0 3px #0f1418, inset 0 0 0 1.5px rgba(217, 196, 138, .8), 0 6px 14px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
.btn:not(.hs-go):hover { filter: brightness(1.15); box-shadow: 0 0 0 3px #0f1418, inset 0 0 0 1.5px #f6d77a, 0 8px 18px rgba(0, 0, 0, .5); }
.btn.primary:not(.hs-go) { background: linear-gradient(rgba(255, 255, 255, .12), rgba(0, 0, 0, .2)), #9a2420; color: #fff; }
.btn.danger:not(.hs-go) { background: linear-gradient(rgba(255, 255, 255, .08), rgba(0, 0, 0, .25)), #5e1712; color: #ffd8cc; }
.btn.small:not(.hs-go) { font-size: 16px; padding: 6px 14px; }
.btn:disabled { filter: grayscale(.8) brightness(.6) !important; }

/* Picture log */
.log-panel .lg-pics { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; vertical-align: middle; }
.log-panel .lg-pic { display: inline-block; width: 24px; height: 33px; border-radius: 3px; background-size: cover; background-position: center; box-shadow: 0 0 0 1.5px #8fb8e8; }
.log-panel .lg-pic.theirs { box-shadow: 0 0 0 1.5px #e8907a; }
.log-panel .lg-pics b { color: #f6d77a; font-weight: 800; }
/* Hero select: key cards */
.hs-keys { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 600 15px 'Fira Sans Extra Condensed', sans-serif; color: #b9a77a; flex-wrap: wrap; }
.hs-keys i { width: 58px; height: 81px; border-radius: 6px; background-size: cover; background-position: center; box-shadow: 0 0 0 2px #0f1418, 0 0 0 3.5px #d9c48a, 0 6px 12px rgba(0, 0, 0, .5); transition: transform .2s; cursor: help; }
.hs-keys i:hover { transform: translateY(-4px) scale(1.6); z-index: 5; position: relative; }
/* Field: a soft vignette so the eye stays on the middle */
.field::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 70px rgba(0, 0, 0, .55), 0 0 40px rgba(246, 215, 122, .12); z-index: 0; }

/* Move coach */
.coach-line { margin-bottom: 6px; padding: 5px 8px; border-radius: 6px; font: 600 15px/1.25 'Fira Sans Extra Condensed', sans-serif; color: #2a1e14; background: rgba(246, 215, 122, .35); box-shadow: inset 0 0 0 1px rgba(110, 33, 24, .35); }
.coach-line b { color: #6e2118; }
.coach-hand { position: fixed; z-index: 450; font-size: 46px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .7)); animation: coachtap 1s ease-in-out infinite; }
@keyframes coachtap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.coach-bubble { position: fixed; z-index: 450; left: 50%; top: 10px; transform: translateX(-50%); max-width: min(560px, 92vw); padding: 10px 16px; border-radius: 10px; pointer-events: none;
  font: 600 18px/1.3 'Fira Sans Extra Condensed', sans-serif; color: #2a1e14; background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e); box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #d9c48a, 0 12px 26px rgba(0, 0, 0, .6); animation: fadein .3s; }
.coach-bubble b { display: block; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #6e2118; }
.coach-glow { outline: 3px solid #f6d77a; outline-offset: 3px; border-radius: 12px; animation: coachglow 1s ease-in-out infinite alternate; }
@keyframes coachglow { to { outline-color: rgba(246, 215, 122, .25); } }

/* Battle forecast between the rows */
.forecast { position: absolute; z-index: 30; transform: translateX(-50%); white-space: nowrap; padding: 2px 9px; border-radius: 12px; cursor: help;
  font: 700 14px 'Fira Sans Extra Condensed', sans-serif; color: #f3e7c8; background: rgba(15, 10, 6, .82); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .55); }
.forecast b.up { color: #8fe0a0; }
.forecast b.dn { color: #ff9a84; }
.forecast i { margin: 0 4px; color: #b9a77a; font-style: normal; }
#stage.port .forecast { font-size: 19px; }
#btn-undo { font-size: 26px; font-weight: 800; }
.hint-bar { flex-wrap: wrap; }
.hint-bar .coach-line { flex: 0 0 100%; order: -1; }

/* Replay controls */
.replay-bar { position: fixed; z-index: 300; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px;
  background: rgba(15, 10, 6, .92); box-shadow: inset 0 0 0 1.5px #d9c48a, 0 10px 24px rgba(0, 0, 0, .7); font: 700 16px 'Fira Sans Extra Condensed', sans-serif; color: #f6e2a8; }
.replay-bar button { min-width: 38px; height: 34px; border: none; border-radius: 6px; cursor: pointer; font-size: 17px; color: #f3e7c8; background: #4a3524; box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .6); }
.replay-bar button:hover { filter: brightness(1.2); }
.replay-bar .rb-pos { min-width: 120px; text-align: center; font-weight: 500; color: #d9c48a; }
.st-replays { display: grid; gap: 6px; }
.st-rep { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, .04); }
.st-rep span { flex: 1; }

.rec-dot { position: fixed; z-index: 500; top: 10px; left: 50%; transform: translateX(-50%); padding: 6px 14px; border: none; border-radius: 16px; cursor: pointer;
  font: 700 15px 'Fira Sans Extra Condensed', sans-serif; color: #fff; background: #b8281c; box-shadow: 0 0 0 2px #0f1418, 0 6px 14px rgba(0, 0, 0, .6); animation: recblink 1.4s ease-in-out infinite; }
@keyframes recblink { 50% { opacity: .65; } }

.turn-clock { position: absolute; z-index: 61; pointer-events: none; }
.turn-clock svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.turn-clock circle { fill: none; stroke: rgba(10, 6, 3, .55); stroke-width: 5; }
.turn-clock .tc-run { stroke: #f2cd6b; stroke-linecap: round; filter: drop-shadow(0 0 5px rgba(255, 210, 110, .8)); transition: stroke-dasharray .2s linear; }
.turn-clock span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, 4px); padding: 2px 12px; border-radius: 999px; white-space: nowrap;
  font: 800 17px/1.2 'Fira Sans Extra Condensed', sans-serif; color: #f6e2a8; background: rgba(15, 10, 6, .9); box-shadow: inset 0 0 0 1px #d9c48a, 0 4px 10px rgba(0, 0, 0, .6); }
.turn-clock.low .tc-run { stroke: #ff6a4a; filter: drop-shadow(0 0 6px rgba(255, 90, 60, .9)); }
.turn-clock.low span { color: #fff; background: #b8281c; animation: recblink 1s ease-in-out infinite; }

/* «Совет» stays one line (full text on hover), so it never covers the history; the history opens taller on click. */
.hint-bar .coach-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hint-bar .coach-line:hover { white-space: normal; }
.log-panel { cursor: pointer; transition: top .25s ease, height .25s ease; }
.log-panel.open { z-index: 75; background: rgba(10, 8, 6, .95) !important; box-shadow: inset 0 0 0 1.5px #d9c48a, 0 14px 30px rgba(0, 0, 0, .7) !important; }
.log-panel::after { content: '⤢'; position: sticky; float: right; bottom: 0; color: #d9c48a; font-size: 14px; opacity: .7; }

/* «Манёвр»: a clear box at the top of the field */
.prompt.man-box { transform: translateX(-50%); z-index: 72; }
.man-box .man-in { display: flex; align-items: center; gap: 14px; padding: 8px 10px 8px 16px; border-radius: 10px; max-width: 760px;
  font: 600 18px/1.25 'Fira Sans Extra Condensed', sans-serif; color: #2a1e14; background: radial-gradient(ellipse at 50% 40%, #f3e7c8, #e2cfa4 70%, #c9b07e);
  box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #d9c48a, 0 12px 26px rgba(0, 0, 0, .6); }
.man-box .man-in b { white-space: nowrap; font-size: 20px; color: #6e2118; text-transform: uppercase; }
.man-box .btn { white-space: nowrap; }
#stage.port .man-box .man-in { font-size: 24px; max-width: 860px; }

/* ---------- Award medals in the card style (gold rim, dark sign from game-icons) ---------- */
.medal { position: relative; display: inline-grid; place-items: center; flex: none; width: var(--m, 64px); height: var(--m, 64px); border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #5a5248, #2e2924 70%); box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #6b6048, inset 0 2px 6px rgba(0, 0, 0, .6); }
.medal i { width: 58%; height: 58%; background: #8a8070; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.medal.on { background: radial-gradient(circle at 34% 28%, #fff1c0, #e0b552 42%, #9a6a1c 80%, #6e4a10); box-shadow: 0 0 0 3px #0f1418, 0 0 0 4.5px #d9c48a, 0 6px 14px rgba(0, 0, 0, .55), inset 0 -3px 6px rgba(90, 55, 10, .5); }
.medal.on i { background: #3a2404; }
.medal.on::after { content: ''; position: absolute; inset: 6%; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255, 240, 200, .55); }
/* End screen: a neat row of new medals */
.over3 .ov-medals { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin: 0 auto 10px; }
.over3 .ov-medals-lbl { font: 800 15px 'Fira Sans Extra Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #f6d77a; margin-right: 4px; }
.over3 .ov-medal { cursor: help; opacity: 0; animation: medalin .55s cubic-bezier(.2, .9, .3, 1.3) forwards; }
.over3 .ov-medal:hover .medal { transform: scale(1.12); }
.over3 .ov-medal .medal { transition: transform .2s; }
@keyframes medalin { from { opacity: 0; transform: translateY(14px) scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
/* Trophy room */
.ach-room { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.ach-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px 12px; border-radius: 12px; text-align: center; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px rgba(217, 196, 138, .18); }
.ach-cell b { font: 800 16px 'Fira Sans Extra Condensed', sans-serif; color: #9d917a; }
.ach-cell small { font: 500 13px/1.25 'Fira Sans Extra Condensed', sans-serif; color: #8a7c62; }
.ach-cell em { font: 500 12px 'Fira Sans Extra Condensed', sans-serif; color: #b9a77a; font-style: normal; }
.ach-cell.on { background: rgba(246, 215, 122, .07); box-shadow: inset 0 0 0 1.5px rgba(217, 196, 138, .55); }
.ach-cell.on b { color: #f6e2a8; }
.ach-cell.on small { color: #d0c3a2; }
/* Player names never run past the left column (full name on hover). */
#stage.land .pname { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#stage.land .pname { font-size: 15px; letter-spacing: .8px; }

/* ---------- Light layer and foil ---------- */
/* Foil: a band of light runs over Legends and gold cards every few seconds. */
.card.legend .face, .card.gold .face { overflow: hidden; }
.card.legend .face::after, .card.gold .face::after { content: ''; position: absolute; inset: -20%; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 246, 210, .0) 42%, rgba(255, 240, 200, .55) 48%, rgba(190, 230, 255, .35) 52%, transparent 60%);
  transform: translateX(-120%); animation: foil 6.5s ease-in-out infinite; }
.card.gold .face::after { animation-delay: 1.7s; }
@keyframes foil { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .card.legend .face::after, .card.gold .face::after { animation: none; display: none; } }

/* A soft glow under the card you point at (on the frame, so the card's own labels stay free). */
.card.ally:hover .frame, .card.leader:hover .frame { box-shadow: 0 0 40px 10px rgba(255, 222, 160, .3), 0 14px 26px rgba(0, 0, 0, .7) !important; }
/* A card picture shown big when you point at it inside a window */
.zoom-card { position: fixed; z-index: 900; pointer-events: none; border-radius: 16px; background-size: cover; background-position: center;
  box-shadow: 0 0 0 4px #0f1418, 0 0 0 6px #d9c48a, 0 24px 60px rgba(0, 0, 0, .85); animation: fadein .12s; }
@media (hover: none) { .zoom-card { display: none; } }
/* Wide screens: a compact hint panel (two lines of explanation at most), so the history below keeps its room. */
#stage.land .hint-bar { min-height: 0 !important; padding: 6px 12px 6px 8px !important; }
#stage.land .hint-bar .hint-ico { width: 30px; height: 30px; }
#stage.land .hint-bar .hint-txt em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Phone (upright): compact Leader bars, big field and hand ---------- */
#stage.port { --gem: 46px; --gem-font: 26px; --name: 15px; --rib-h: 28px; }
#stage.port .card.leader .nm.rib { display: none !important; }          /* the name is written next to the portrait */
#stage.port .pile { transform: scale(.62); transform-origin: top left; }
#stage.port .pile .lbl { display: none; }
#stage.port .pname { font-size: 26px; max-width: 320px; }
#stage.port .coins { transform: scale(.82); transform-origin: top left; }
#stage.port .round-box { transform: scale(.78); transform-origin: left top; }
#stage.port .end-turn { width: 240px; height: 76px; font-size: 24px; }
#stage.port .hint-bar { min-height: 0 !important; padding: 6px 12px !important; font-size: 21px !important; }
#stage.port .hint-bar .hint-txt em { display: none; }                   /* one line on the phone: just what to do */
#stage.port .hint-bar .coach-line { font-size: 20px; }
#stage.port .hero-powers .power { font-size: 22px; }
#stage.port .forecast { font-size: 20px; }
/* The opponent's deck and graveyard are only animation points on the phone (no room in the top bar). */
#stage.port .pile.opp-pile { visibility: hidden; }