/* Board and card visuals (Hearthstone-like). Loaded after style.css and overrides it. */
:root {
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55  0 0 0 0 .42  0 0 0 0 .28  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='300'><filter id='w'><feTurbulence type='fractalNoise' baseFrequency='.006 .22' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 .40  0 0 0 0 .25  0 0 0 0 .12  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23w)'/></svg>");
  --stone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='s'><feTurbulence type='turbulence' baseFrequency='.045' numOctaves='5' seed='3'/><feColorMatrix values='0 0 0 0 .42  0 0 0 0 .38  0 0 0 0 .33  0 0 0 .8 0'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  --gold-frame: linear-gradient(150deg, #fff3c4 0%, #e0b65a 18%, #8a5a18 38%, #f2d37a 55%, #7a4c10 75%, #e8c46a 100%);
  --bronze-frame: linear-gradient(150deg, #f0d2a0 0%, #a77738 20%, #4d300f 45%, #c79a58 62%, #4a2c0a 82%, #b98a4e 100%);
  --steel-frame: linear-gradient(150deg, #eef3f8 0%, #8fa0b2 20%, #39444f 45%, #b9c6d3 62%, #2a333c 82%, #9aabbd 100%);
}

/* ---------- table ---------- */
#game { background: radial-gradient(ellipse at 50% 40%, #2a1a0e 0%, #0a0604 70%); }
#board {
  border-radius: 26px;
  background:
    radial-gradient(ellipse 60% 55% at 50% 48%, rgba(255, 200, 120, .22), transparent 70%),
    var(--noise),
    var(--grain),
    linear-gradient(180deg, #4a2e16 0%, #3a2210 40%, #3a2210 60%, #4a2e16 100%);
  box-shadow: inset 0 0 0 6px #1b0f06, inset 0 0 0 9px #8a6328, inset 0 0 0 12px #2a1708, inset 0 0 160px rgba(0, 0, 0, .9);
}
#board::after { /* vignette & light pool */
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}
.mat { left: 388px; width: 824px; border-radius: 22px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 200, 130, .16), transparent 70%),
    linear-gradient(rgba(110, 70, 30, .28), rgba(50, 25, 8, .38)),
    var(--stone),
    linear-gradient(#5d5348, #3d362f);
  box-shadow: inset 0 0 0 3px #1c140c, inset 0 0 0 5px #9a7a46, inset 0 0 0 7px #241708, inset 0 8px 40px rgba(0, 0, 0, .75), 0 10px 30px rgba(0, 0, 0, .6);
  filter: saturate(.85);
}
.mat.opp { top: 96px; height: 296px; }
.mat.me { top: 466px; height: 296px; }
.midline { left: 360px; width: 880px; top: 427px; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, #6b4a1c 8%, #f3d27a 50%, #6b4a1c 92%, transparent);
  box-shadow: 0 0 18px rgba(255, 200, 100, .55), 0 2px 0 #000; }
.midline::before { content: '⚔'; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #3a2408;
  background: radial-gradient(circle at 35% 30%, #fff2c0, #d8a73e 55%, #6d4710); box-shadow: 0 0 0 3px #2a1606, 0 0 20px rgba(255, 200, 90, .7); }
.region-label { top: 405px; font-size: 13px; letter-spacing: 1px; color: rgba(255, 220, 150, .45); text-shadow: 0 1px 2px #000; }
.region-col.fighting { background: radial-gradient(ellipse at 50% 50%, rgba(255, 190, 90, .28), transparent 72%); box-shadow: 0 0 0 2px rgba(255, 210, 120, .6), 0 0 60px rgba(255, 150, 40, .45); }

/* Slots: carved recesses */
.slot { border: none; background: radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, .28), rgba(0, 0, 0, .12) 70%); box-shadow: inset 0 3px 10px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 230, 180, .12); }
.slot.ally { border-radius: 50% / 46%; width: 126px; height: 160px; margin: 6px 0 0 4px; }
.slot.ally::after { content: ''; position: absolute; inset: 38% 34%; border-radius: 50%; border: 2px solid rgba(255, 220, 160, .08); }
.slot.place { border-radius: 14px; }
.slot.selectable { background: radial-gradient(ellipse at 50% 50%, rgba(255, 220, 120, .35), rgba(255, 200, 80, .08) 70%); box-shadow: 0 0 0 3px rgba(255, 220, 130, .9), 0 0 28px rgba(255, 200, 90, .8), inset 0 0 20px rgba(255, 220, 140, .5); }

/* Torches */
.torch { position: absolute; width: 40px; height: 70px; pointer-events: none; z-index: 2; }
.torch .bracket { position: absolute; left: 14px; bottom: 0; width: 12px; height: 34px; border-radius: 3px; background: linear-gradient(90deg, #2a1a0c, #6d4a24, #2a1a0c); box-shadow: 0 2px 4px #000; }
.torch .flame { position: absolute; left: 6px; bottom: 28px; width: 28px; height: 40px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 75%, #fff8d0 0%, #ffd060 25%, #ff7a1a 55%, rgba(255, 60, 0, 0) 75%); filter: blur(.6px); animation: flicker 1.3s infinite alternate ease-in-out; transform-origin: 50% 90%; }
.torch .glow { position: absolute; left: -110px; top: -110px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 170, 60, .28), rgba(255, 120, 30, .08) 45%, transparent 70%); animation: glowpulse 2.3s infinite alternate ease-in-out; mix-blend-mode: screen; }
@keyframes flicker { 0% { transform: scale(1, 1) rotate(-2deg); opacity: .95; } 30% { transform: scale(.92, 1.08) rotate(2deg); } 60% { transform: scale(1.05, .94) rotate(-1deg); opacity: 1; } 100% { transform: scale(.96, 1.04) rotate(1.5deg); opacity: .9; } }
@keyframes glowpulse { from { opacity: .75; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }

/* ---------- allies: oval portrait like a minion ---------- */
.card.ally { width: 126px; height: 160px; margin: 6px 0 0 4px; }
.card.ally .face, .card.small .face, .card.leader .face, .card.place .face { border: none !important; }
.card .shadow { position: absolute; left: 6%; right: 6%; bottom: -10px; height: 26px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .75), transparent 70%); filter: blur(3px); transition: transform .25s, opacity .25s; }
.card.ally .frame { position: absolute; inset: 0; border-radius: 50% / 46%; background: var(--bronze-frame); box-shadow: 0 0 0 2px #1d1005, 0 10px 18px rgba(0, 0, 0, .6); }
.card.ally.legend .frame { background: var(--gold-frame); box-shadow: 0 0 0 2px #2a1604, 0 0 18px rgba(255, 200, 80, .55), 0 10px 18px rgba(0, 0, 0, .6); }
.card.ally .face { inset: 6px; border-radius: 50% / 46%; background-size: 205%; background-position: 50% 33%; box-shadow: inset 0 0 22px rgba(0, 0, 0, .85), inset 0 -18px 30px rgba(0, 0, 0, .5) !important; }
.card.ally .shade { inset: 6px; border-radius: 50% / 46%; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.card.ally .crown { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); width: 46px; height: 26px; z-index: 3;
  background: var(--gold-frame); clip-path: polygon(0 100%, 8% 30%, 28% 70%, 50% 0, 72% 70%, 92% 30%, 100% 100%); filter: drop-shadow(0 2px 2px #000); }
.card.ally .crown::after { content: ''; position: absolute; left: 50%; top: 52%; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fff, #ff4a3a 50%, #6a0b05); }
.card.ally .nm { bottom: 18px; font-size: 12px; z-index: 2; }
/* Оборона = stone shield behind the portrait */
.card .taunt { position: absolute; left: -14px; right: -14px; top: -10px; bottom: -6px; z-index: -1;
  background: var(--stone), linear-gradient(#9ca3ab, #4b525a); clip-path: polygon(50% 0, 96% 12%, 96% 55%, 50% 100%, 4% 55%, 4% 12%);
  filter: drop-shadow(0 4px 6px #000); }
.card .taunt::after { content: ''; position: absolute; inset: 5px; clip-path: inherit; background: linear-gradient(#c7cdd3, #6c737b); opacity: .5; }
.card.ally.defense .face { box-shadow: inset 0 0 22px rgba(0, 0, 0, .85) !important; }
.card .defense-mark { display: none; }

/* ---------- stats gems ---------- */
.stat { width: 42px; height: 42px; font-size: 22px; font-family: var(--font-title); }
.stat.atk { left: -10px; bottom: -6px; border-radius: 50%; border: none;
  background: radial-gradient(circle at 38% 30%, #fff6c6 0%, #f3c53e 30%, #b27411 62%, #5e3a05 100%);
  box-shadow: 0 0 0 2.5px #2a1704, 0 0 0 4px #d9a948, 0 4px 8px rgba(0, 0, 0, .8); }
.stat.atk::before { content: '⚔'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: rgba(90, 50, 0, .35); z-index: -1; }
.stat.hp { right: -10px; bottom: -6px; border: none; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: radial-gradient(circle at 38% 30%, #ffd2c6 0%, #f04a32 30%, #a3140a 62%, #4a0602 100%);
  box-shadow: 0 0 0 2.5px #2a0603, 0 0 0 4px #c97a5a, 0 4px 8px rgba(0, 0, 0, .8); }
.stat.hp.hurt { color: #ff7d6b; }
.stat.buffed { color: #7dff8a; }
.card.small .stat { width: 30px; height: 30px; font-size: 16px; }
.card.leader .stat.hp { width: 54px; height: 54px; font-size: 28px; right: -10px; bottom: -6px; }

/* ---------- places: framed building tiles ---------- */
.card.place { width: 144px; height: 80px; }
.card.place .frame { position: absolute; inset: 0; border-radius: 14px; background: var(--steel-frame); box-shadow: 0 0 0 2px #121619, 0 8px 14px rgba(0, 0, 0, .6); }
.card.place.legend .frame { background: var(--gold-frame); }
.card.place .face { inset: 5px; border-radius: 10px; background-size: 140%; background-position: 50% 26%; box-shadow: inset 0 0 18px rgba(0, 0, 0, .85) !important; }
.card.place .shade { inset: 5px; border-radius: 10px; }
.card.place .nm { bottom: 7px; z-index: 2; }

/* ---------- companions & items ---------- */
.card.small { width: 80px; height: 100px; }
.card.small .frame { position: absolute; inset: 0; border-radius: 50% / 44%; background: linear-gradient(150deg, #e8c8ff, #8a4ab0 25%, #3a1450 50%, #b47ad8 70%, #2c0e40); box-shadow: 0 0 0 2px #14051d, 0 6px 12px rgba(0, 0, 0, .6); }
.card.small.legend .frame { background: var(--gold-frame); }
.card.small .face { inset: 4px; border-radius: 50% / 44%; background-size: 220%; background-position: 50% 32%; box-shadow: inset 0 0 14px rgba(0, 0, 0, .85) !important; }
.card.small .shade { inset: 4px; border-radius: 50% / 44%; }
.card.small.item { width: 80px; height: 80px; margin-top: 10px; }
.card.small.item .frame { border-radius: 50%; background: var(--bronze-frame); }
.card.small.item .face, .card.small.item .shade { border-radius: 50%; }
.card.small .nm { bottom: 10px; font-size: 10px; z-index: 2; }

/* ---------- leader ---------- */
.card.leader { width: 156px; height: 170px; border-radius: 0; }
.card.leader .frame { position: absolute; inset: 0; border-radius: 50% 50% 18px 18px / 42% 42% 18px 18px; background: var(--gold-frame);
  box-shadow: 0 0 0 3px #1e1004, 0 0 30px rgba(255, 190, 80, .35), 0 12px 24px rgba(0, 0, 0, .8); }
.card.leader .face { inset: 8px; border-radius: 50% 50% 12px 12px / 42% 42% 12px 12px; background-size: 210%; background-position: 50% 24%; box-shadow: inset 0 0 26px rgba(0, 0, 0, .8) !important; }
.card.leader .shade { inset: 8px; border-radius: 50% 50% 12px 12px / 42% 42% 12px 12px; background: linear-gradient(transparent 60%, rgba(0, 0, 0, .45)); }
.card.leader .ward-bubble { border-radius: 50% 50% 22px 22px / 42% 42% 22px 22px; }
.card.leader.hurt-flash .face { animation: herohurt .5s; }
@keyframes herohurt { 0% { filter: brightness(2) sepia(1) hue-rotate(-40deg) saturate(4); } 100% { filter: none; } }

/* Keyword icon row & tokens */
.kw-row { top: -12px; }
.kw { width: 26px; height: 26px; font-size: 14px; background: radial-gradient(circle at 35% 30%, #4a2f18, #1a0e06); border: 1.5px solid #d9a948; box-shadow: 0 2px 6px #000, 0 0 8px rgba(255, 190, 80, .35); }
.tok { background: radial-gradient(circle at 35% 30%, #3a2414, #140a04); border: 1.5px solid #c99a4a; }

/* Оберег bubble — golden shield like divine shield */
.card .ward-bubble { inset: -10px; border-radius: 50% / 46%;
  background: radial-gradient(ellipse at 50% 35%, rgba(255, 245, 190, .25), rgba(255, 220, 120, .05) 55%, rgba(255, 220, 120, .42) 100%);
  border: 2px solid rgba(255, 236, 160, .9); box-shadow: 0 0 22px rgba(255, 220, 120, .8), inset 0 0 22px rgba(255, 230, 150, .55); }
.card.place .ward-bubble { border-radius: 18px; }
.card.small .ward-bubble { border-radius: 50%; }

/* Breakthrough / deathtouch auras */
.card.breakthrough .frame { box-shadow: 0 0 0 2px #1d1005, 0 0 18px rgba(255, 70, 30, .85), 0 10px 18px rgba(0, 0, 0, .6) !important; }
.card.deathtouch .frame { box-shadow: 0 0 0 2px #1d1005, 0 0 18px rgba(150, 60, 255, .9), 0 10px 18px rgba(0, 0, 0, .6) !important; }
.card.indestructible .face::after { border-radius: inherit; }

/* Interaction highlights now act on the frame */
.card.selectable .face, .card.usable .face, .card.chosen .face { box-shadow: inset 0 0 22px rgba(0, 0, 0, .85) !important; }
.card.selectable .frame { box-shadow: 0 0 0 3px #4fd17a, 0 0 26px rgba(79, 209, 122, .95) !important; }
.card.selectable.harm .frame { box-shadow: 0 0 0 3px #ff5a44, 0 0 26px rgba(255, 90, 68, .95) !important; }
.card.usable .frame { box-shadow: 0 0 0 3px #59b6ff, 0 0 20px rgba(89, 182, 255, .9) !important; }
.card.chosen .frame { box-shadow: 0 0 0 4px #e8c46a, 0 0 30px rgba(232, 196, 106, 1) !important; }
.card.selectable { animation: none; }
.card.selectable .frame { animation: selpulse .9s infinite alternate; }
@keyframes selpulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.card:not(.selectable):hover .frame { filter: brightness(1.15); }
.card:hover .shadow { transform: scale(1.1); opacity: .9; }

/* ---------- hand ---------- */
.hand-card { width: 154px; height: 214px; transform-style: preserve-3d; }
.hand-card .face { border-radius: 12px; border: 2px solid #120a04; box-shadow: 0 10px 22px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 220, 160, .25); }
.hand-card .gloss { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; opacity: 0; transition: opacity .2s; }
.hand-card:hover .gloss { opacity: 1; animation: gloss 1.2s ease-out; }
@keyframes gloss { from { background-position: 140% 0; } to { background-position: -40% 0; } }
.hand-card.playable .face { box-shadow: 0 0 0 3px #49e07a, 0 0 22px rgba(73, 224, 122, .9), 0 10px 22px rgba(0, 0, 0, .85); }
.hand-card.fastable .face { box-shadow: 0 0 0 3px #59b6ff, 0 0 22px rgba(89, 182, 255, .9), 0 10px 22px rgba(0, 0, 0, .85); }

/* Card backs */
.card-back { width: 98px; height: 136px; border-radius: 10px; border: none;
  background:
    radial-gradient(circle at 50% 46%, #f3d27a 0 9%, #8a5a18 10% 13%, transparent 14%),
    radial-gradient(circle at 50% 46%, transparent 0 22%, rgba(232, 196, 106, .55) 23% 24%, transparent 25%),
    repeating-conic-gradient(from 0deg at 50% 46%, #5a1f12 0 10deg, #3e140b 10deg 20deg),
    #3e140b;
  box-shadow: 0 0 0 2px #120804, inset 0 0 0 4px #b98a2e, inset 0 0 0 6px #2a1206, inset 0 0 24px rgba(0, 0, 0, .7), 0 8px 16px rgba(0, 0, 0, .8); }
.card-back::after { content: '⚔'; top: 46px; font-size: 26px; color: #3a2008; text-shadow: none; }

/* ---------- end turn & panels ---------- */
.end-turn { left: 1356px; top: 388px; width: 190px; height: 86px; border-radius: 46px; font-size: 21px; letter-spacing: .5px;
  background: radial-gradient(ellipse at 50% 28%, #fff6c8 0%, #f0c04a 40%, #9a6410 85%); border: 4px solid #2a1604;
  box-shadow: 0 0 0 3px #d9a948, 0 8px 0 #1e1002, 0 0 30px rgba(255, 200, 80, .6), inset 0 -8px 14px rgba(120, 60, 0, .5); text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.end-turn.ready { background: radial-gradient(ellipse at 50% 28%, #eaffd8 0%, #6fe08a 40%, #1d7a35 85%); color: #062a0e; animation: glowbtn 1.1s infinite alternate; }
.end-turn.wait { background: radial-gradient(ellipse at 50% 28%, #c8c8c8, #6e6e6e 50%, #2e2e2e); box-shadow: 0 0 0 3px #555, 0 8px 0 #111, inset 0 -8px 14px rgba(0, 0, 0, .5); }
.round-box { left: 1236px; top: 396px; }
.log-panel { background: linear-gradient(rgba(20, 12, 6, .82), rgba(12, 7, 3, .82)); border: 1px solid #6b4b25; box-shadow: inset 0 0 20px rgba(0, 0, 0, .6); }
.pile.deck .card-back { left: 0; top: 0; }
.pile.deck::before { content: ''; position: absolute; left: 4px; top: 4px; width: 98px; height: 136px; border-radius: 10px; background: #2a0e06; box-shadow: 3px 3px 0 #1a0803, 6px 6px 0 #120502; }
.coins .coin-ico { background: radial-gradient(circle at 35% 30%, #fff6c8, #f0c04a 45%, #8a5a10 85%); box-shadow: 0 0 0 2px #3a2405, 0 4px 10px #000, 0 0 16px rgba(255, 200, 80, .6); }

/* ---------- banners ---------- */
.banner { top: 330px; height: 210px; background: none; font-size: 72px; }
.banner::before { content: ''; position: absolute; left: 50%; top: 50%; width: 760px; height: 150px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, rgba(30, 14, 4, .95) 0%, rgba(30, 14, 4, .85) 45%, transparent 72%); }
.banner::after { content: ''; position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; transform: translate(-50%, -50%); z-index: -2;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 120, .14) 0 6deg, transparent 6deg 18deg); -webkit-mask: radial-gradient(circle, #000 0 20%, transparent 55%); mask: radial-gradient(circle, #000 0 20%, transparent 55%);
  animation: rays 6s linear infinite; }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Shatter tiles for deaths */
.shard-tile { position: absolute; background-repeat: no-repeat; pointer-events: none; z-index: 45; box-shadow: 0 0 2px rgba(0, 0, 0, .6); }
.soul { position: absolute; width: 40px; height: 60px; border-radius: 50%; pointer-events: none; z-index: 46; background: radial-gradient(ellipse, rgba(220, 240, 255, .8), rgba(150, 190, 255, .2) 50%, transparent 70%); filter: blur(2px); }

.banner.dim { color: #e6d5ae; font-size: 54px; text-shadow: 0 0 20px rgba(0,0,0,.9), 0 3px 0 #2a1604; }
.banner.dim::after { display: none; }

/* Phones held upright: ask to rotate. */
.rotate-hint { display: none; }
@media (orientation: portrait) and (max-width: 760px) {
  #game .rotate-hint { display: grid; position: fixed; inset: auto 0 0 0; z-index: 400; padding: 10px; place-items: center; text-align: center;
    background: rgba(12, 7, 3, .92); border-top: 1px solid #8a6328; font-size: 16px; color: #e8c46a; }
}