:root {
  color-scheme: dark;
  --night: #151016;
  --panel: #211720;
  --cream: #f4e2c2;
  --muted: #c2ad97;
  --accent: #f4c66a;
  --accent-bright: #ffe6a5;
  --accent-deep: #a66124;
  --line: #a477483f;
  --wash: #32181214;
  --hero: #8ef1da;
  --danger: #ff9b90;
  --serif: Georgia, 'Times New Roman', serif;
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 300px; min-height: 100dvh; background: radial-gradient(ellipse at 50% 5%, #422628, var(--night) 65%); color: var(--cream); }
body[data-theme="teal"] { --panel: #132525; --accent: #83dfd0; --accent-bright: #c3fff0; --accent-deep: #337a72; --line: #83dfd04d; --wash: #07394770; }
body[data-theme="ink"] { --panel: #2e211b; --accent: #edaa91; --accent-bright: #ffd9bf; --accent-deep: #a64f44; --line: #d2a17c58; --wash: #46201055; --hero: #ffe4ad; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--hero); outline-offset: 3px; }
button, a, input { -webkit-tap-highlight-color: transparent; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--serif); line-height: 1.02; }
.topbar {
  max-width: 1000px; margin: auto; min-height: 62px; padding: max(9px, env(safe-area-inset-top), var(--telegram-top, 0px)) max(15px, env(safe-area-inset-right)) 9px max(15px, env(safe-area-inset-left));
  display: flex; align-items: center; justify-content: space-between;
}
.wordmark { border: 0; background: none; padding: 3px 0; font: bold clamp(17px, 4.6vw, 25px) var(--serif); letter-spacing: .08em; }
.wordmark > span { color: var(--accent); }
.crest { display: inline-grid; place-items: center; height: 31px; width: 31px; border: 1px solid var(--accent-deep); border-radius: 9px 9px 14px 14px; background: #36231e; font-size: 19px; }
.top-actions { display: flex; gap: 7px; }
.icon-button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; background: var(--panel); border: 1px solid var(--line); color: var(--accent); border-radius: 9px; font-size: 22px; }
#screen { width: min(100% - 24px, 980px); margin: 0 auto; padding-bottom: max(14px, env(safe-area-inset-bottom), var(--telegram-bottom, 0px)); }
.scene { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 18px 60px #0008, 0 0 0 3px #0003; animation: enter .25s ease-out; }
.tavern {
  display: flex; flex-direction: column; justify-content: space-between; min-height: max(520px, min(780px, calc(100dvh - 80px)));
  background: linear-gradient(#100b1388 0%, transparent 22%, #140e15a0 53%, #130e15 88%), url(assets/tavern.webp) center 43% / cover, #20131a;
}
.scene-kicker, .eyebrow, .tag { color: var(--accent); letter-spacing: .15em; font-weight: 800; font-size: 10px; }
.scene-kicker { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 19px 8px; }
.scene-kicker i { display: inline-block; width: 29px; height: 1px; background: var(--accent-deep); }
.tavern-content { width: min(100% - 34px, 465px); margin: auto auto 0; text-align: center; padding: 0 0 22px; }
.tag { display: inline-block; border-block: 1px solid var(--accent-deep); padding: 7px 10px; }
.tavern h1 { color: var(--cream); font-weight: 900; text-shadow: 0 4px 0 #411f15, 0 9px 21px #000; letter-spacing: -.05em; font-size: clamp(61px, 13vw, 115px); margin: 7px 0 11px; }
.tavern h1 span { color: var(--accent); }
.tavern p { color: var(--cream); font: clamp(17px, 4vw, 22px)/1.23 var(--serif); margin-bottom: 21px; text-shadow: 0 2px 5px #000; }
.primary, .secondary {
  min-height: 47px; border-radius: 9px; padding: 8px 14px; font-weight: 850; text-align: center; transition: transform .15s, filter .15s;
}
.primary { width: 100%; background: linear-gradient(var(--accent-bright), var(--accent) 65%, var(--accent)); color: #211518; box-shadow: inset 0 0 0 2px #fff4, 0 3px 0 var(--accent-deep), 0 7px 12px #0005; border: 1px solid var(--accent-deep); }
.primary span { margin-left: 7px; }
.secondary { background: #211821db; border: 1px solid var(--line); color: var(--cream); }
.primary:not(:disabled):hover, .secondary:hover, .icon-button:hover { filter: brightness(1.12); }
.primary:active, .secondary:active { transform: translateY(2px); }
.secondary-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 13px; }
.network-entry { width: 100%; margin-top: 13px; }
.tavern-ads {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px;
  background: var(--panel); border: 1px dashed var(--line); border-radius: 12px;
}
.tavern-ads section { display: grid; gap: 7px; }
.tavern-ads section + section { border-top: 1px solid var(--line); padding-top: 8px; }
.tavern-ads .secondary { justify-self: start; }
.tavern-ads a { color: var(--muted); font-size: 12px; justify-self: start; }
.tavern-ads [data-banner] { max-width: 100%; overflow: hidden; }
.network-page {
  min-height: min(760px, calc(100dvh - 80px)); display: grid; place-items: center;
  padding: 18px; background: linear-gradient(#1e1015a0, #180e17e8), url(assets/board.webp) center / cover;
}
.network-box {
  width: min(100%, 470px); display: grid; gap: 13px; padding: 16px;
  background: #1e151de8; border: 1px solid var(--line); border-radius: 14px;
}
.network-box h1 { font-size: clamp(30px, 8vw, 44px); }
.network-box a { display: grid; place-items: center; text-decoration: none; }
.network-strip { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-bottom: 8px; color: var(--accent); font-size: 11px; font-weight: 800; }
.network-strip .secondary { min-height: 36px; padding: 5px 8px; }
.network-strip time { color: var(--hero); white-space: nowrap; }
.social-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 5px; }
.social-nav .secondary { flex: 1; min-height: 36px; padding: 6px; font-size: 12px; }
.welcome-art { display: block; width: 100%; max-height: 205px; object-fit: cover; object-position: 50% 44%; border-radius: 9px; margin-bottom: 10px; }
.chat-log { height: min(36dvh, 295px); overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin-bottom: 9px; }
.chat-message { padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.chat-message p { font-size: 13px; }
.avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; margin-right: 5px; border: 1px solid var(--line); background: var(--panel); color: var(--accent); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-gold { border: 2px solid #ffd587; box-shadow: 0 0 0 1px #996323, inset 0 0 5px #e2943f; }
.avatar-large { width: 64px; height: 64px; font-size: 30px; margin: 0; }
.avatar-large.avatar-gold { border-width: 4px; box-shadow: 0 0 0 2px #996323, 0 0 16px #e2943f60; }
.avatar-laurel { border: 2px solid #c6ef8c; box-shadow: 0 0 0 2px #476234, 0 0 10px #94c15899; }
.avatar-large.avatar-laurel { border: 4px double #e4f6b7; }
.avatar-confetti { border: 2px dotted #fb9bdd; box-shadow: 0 0 0 1px #9165e1, 0 0 8px #9165e1aa; }
.daily-page .network-box { max-width: 650px; }
.boss-title { display: flex; align-items: center; gap: 13px; }
.boss-title img { width: clamp(55px, 16vw, 105px); aspect-ratio: 1; object-fit: cover; border: 1px solid var(--accent-deep); border-radius: 12px; }
.boss-vitals { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--accent-bright); font-size: 13px; }
.boss-hand { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 7px; }
.boss-hand .card { width: 100%; min-width: 0; }
.boss-rule, .boss-ranking, .boss-inventory { border: 1px solid var(--line); border-radius: 9px; padding: 9px; background: var(--panel); }
.boss-rule p, .boss-ranking p { margin-top: 7px; font-size: 13px; }
.boss-inventory { display: grid; gap: 6px; }
.boss-inventory progress { width: 100%; accent-color: var(--accent); }
.boss-ad { display: flex; flex-wrap: wrap; gap: 6px; }
.challenge-copy { white-space: pre-line; }
.deck-form { display: grid; gap: 8px; margin-top: 8px; }
.deck-form > p { color: var(--accent); font-weight: 800; }
.deck-list { display: grid; max-height: 34dvh; overflow: auto; }
.deck-list label { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; min-height: 36px; padding: 4px; border-bottom: 1px solid var(--line); }
.icon-shop { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: 8px; margin-top: 8px; }
.icon-shop section { display: grid; gap: 7px; justify-items: center; grid-template-rows: auto 1fr; text-align: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.icon-shop strong { font-size: 13px; }
.icon-shop button { min-height: 39px; width: 100%; padding: 5px; }
.action-link { display: grid; place-items: center; text-align: center; text-decoration: none; }
.shop-tabs { margin: 0 0 12px; }
.shop-tabs [aria-pressed="true"] { border-color: var(--accent); color: var(--accent-bright); background: var(--panel); }
.profile-card { display: flex; align-items: center; gap: 13px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.profile-card strong { overflow-wrap: anywhere; }
.network-roster { display: grid; gap: 5px; list-style: none; padding: 0; margin: 0; }
.network-roster li { display: flex; justify-content: space-between; gap: 7px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 13px; }
.network-roster strong { overflow-wrap: anywhere; }
.network-roster li span { flex-shrink: 0; color: var(--accent); font-size: 11px; align-self: center; }
.network-roster .own-rating { border-color: var(--accent); }
.network-form, .network-form label { display: grid; gap: 7px; }
.network-form label, .sabotage { color: var(--muted); font-size: 12px; }
.network-form input, .sabotage select, .invite-link { width: 100%; min-height: 40px; padding: 7px; background: #171018; color: var(--cream); border: 1px solid var(--line); border-radius: 7px; font: inherit; }
.race-status { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.race-status span { font-size: 10px; color: var(--cream); background: #1c121bdd; border: 1px solid var(--line); padding: 3px 6px; border-radius: 6px; }
.sabotage { display: grid; grid-template-columns: max-content 1fr; gap: 6px; align-items: center; margin: 0 0 7px; }
.network-error { font-size: 13px; color: var(--danger); margin-bottom: 6px; }
.rating-self { display: grid; gap: 4px; border: 1px solid var(--accent-deep); border-radius: 8px; padding: 10px; margin: 0 0 10px; }
.rating-self span { color: var(--accent); font-size: 13px; }
.rating-list { margin: 0 0 10px; }
.album-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 10px; }
.album-filter .secondary { min-height: 36px; padding: 5px 9px; font-size: 12px; }
.album-filter [aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.collection-nav { margin: 0 0 10px; }
.collection-hint { margin-bottom: 10px; }
.card-level { color: var(--accent-bright); font-size: 10px; font-weight: 750; }
.hand .card-level { font-size: 8px; }
.collection-actions { display: grid; gap: 9px; }
.collection-hidden {
  display: grid; align-content: start; gap: 6px; padding: 5px; width: 100%; min-width: 0;
  border: 1px solid var(--line); border-radius: 9px; background: #171018;
  color: var(--cream); text-align: center;
}
.collection-hidden span { font-size: 11px; color: var(--muted); }
.back-art { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.chest-shop { display: grid; gap: 8px; }
.chest-offer {
  display: grid; grid-template-columns: minmax(76px, 32%) minmax(0, 1fr); gap: 10px;
  padding: 8px; background: #171018; border: 1px solid var(--line); border-radius: 10px;
}
.chest-art { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; }
.chest-offer h3 { margin: 0 0 5px; font: bold 17px/1.1 var(--serif); }
.chest-offer .secondary { width: 100%; margin-top: 7px; min-height: 37px; }
.chest-odds { margin-top: 5px; color: var(--accent); font-size: 11px; }
.drop-odds { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.drop-odds li { display: flex; justify-content: space-between; gap: 4px; padding-inline: 5px; font-size: 11px; color: var(--muted); }
.drop-odds b { color: var(--cream); }
.last-pack { width: 100%; margin-top: 10px; }
.pack-grid { margin-top: 10px; }
.pack-revealed { animation: flip .24s ease-out; }
.pack-revealed > span { display: block; padding: 0 3px 4px; }
.pack-back-unlock { font-size: 12px; color: var(--accent); }
.pack-back-unlock .secondary { min-height: 34px; }
.back-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.back-picker strong { font: bold clamp(10px, 3vw, 15px) var(--serif); }
.back-picker button[aria-pressed="true"] { border-color: var(--accent); }
body { --active-back: url(assets/back-silver.webp); }
body[data-back="gold"] { --active-back: url(assets/back-gold.webp); }
body[data-back="mythic"] { --active-back: url(assets/back-mythic.webp); }
.hand.deal .game-card::before {
  content: ''; position: absolute; inset: 2px; z-index: 2; border-radius: 6px;
  background: var(--active-back) center / cover; pointer-events: none; animation: deal .42s ease-out forwards;
}
.reduced .hand.deal .game-card::before { display: none; }
@keyframes deal { 0%, 35% { opacity: 1; } 100% { opacity: 0; } }
.tavern-foot { border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 15px; color: var(--muted); letter-spacing: .11em; font-size: 9px; }
.tavern-foot span:last-child { color: var(--accent); letter-spacing: 0; font-size: 12px; }
.finish h1 { font-size: clamp(45px, 10vw, 79px); }
.finish .tavern-content { padding-bottom: 27px; }
.finish .secondary { width: 100%; margin-top: 13px; }

.battle {
  background: linear-gradient(var(--wash), var(--wash)), linear-gradient(#0b06135c 0%, #1a111988 52%, #160f17 100%), url(assets/board.webp) center 45% / cover, #251820;
  display: flex; flex-direction: column; min-height: min(770px, calc(100dvh - 77px)); padding: 13px clamp(10px, 3vw, 28px) 17px;
}
.battle-hud { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; min-height: 38px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: #170f17d9; color: var(--accent); letter-spacing: .08em; font-size: clamp(9px, 2.4vw, 12px); font-weight: 800; }
.live-dot { width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 9px var(--accent); display: inline-block; border-radius: 50%; vertical-align: 1px; margin-right: 2px; }
.hearts { color: #ff8b86; font-size: clamp(14px, 4.5vw, 21px); text-shadow: 0 1px 4px #42191f; letter-spacing: .08em; }
.hearts span { color: #d89e98; }
.gold { justify-self: end; font-size: 14px; }
.arena { display: flex; flex: 1; flex-direction: column; justify-content: space-evenly; padding: 10px 0; }
.enemy-entry { min-height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 9px 0 11px; text-align: center; text-shadow: 0 2px 4px #000, 0 0 18px #000; }
.enemy-entry > .game-card { width: clamp(106px, 24vw, 158px); transform: rotate(-3deg); flex: none; box-shadow: 0 0 0 2px #1d1015, 0 8px 32px #000a, 0 0 28px #e86b2844; }
.enemy-entry .game-card:hover { transform: rotate(0); }
.enemy-entry .card-caption { display: none; }
.enemy-entry .card-art { aspect-ratio: 1.08; }
.enemy-copy { max-width: 290px; }
.enemy-copy h1 { margin-top: 4px; font-size: clamp(25px, 6.7vw, 38px); }
.quote { margin: 4px 0 6px; color: var(--cream); font: italic 15px var(--serif); }
.trick { font-size: 11px; color: #ffd4ab; font-weight: 800; }
.trick.interrupted { color: var(--hero); }
.trick.active::after { content: ' · действует'; }
.trick-description { font-size: 11px; margin-top: 3px; color: #f6dfcb; }
.power-bar { display: grid; grid-template-columns: 1fr 38px 1fr; align-items: stretch; width: min(100%, 470px); margin: 0 auto; border: 1px solid var(--line); border-radius: 10px; background: #1c131de8; overflow: hidden; }
.hero-power, .enemy-power { min-height: 58px; display: flex; align-items: center; gap: clamp(5px, 2vw, 12px); padding: 6px 9px; }
.hero-power { background: linear-gradient(90deg, #22505279, transparent); color: var(--hero); }
.enemy-power { justify-content: end; text-align: right; background: linear-gradient(270deg, #823a3883, transparent); color: var(--danger); }
.power-bar img { width: clamp(32px, 9vw, 44px); aspect-ratio: 1; object-fit: cover; border: 1px solid currentColor; border-radius: 50%; }
.power-bar div span { display: block; font-size: 8px; letter-spacing: .09em; font-weight: 850; color: var(--cream); }
.power-bar b { display: block; font: 900 27px/.94 var(--serif); }
.versus { place-self: center; font-size: 22px; color: var(--accent); }
.played-tray { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 10px auto 0; }
.played-tray > span:first-child { color: var(--accent-bright); font-size: 9px; letter-spacing: .13em; font-weight: 800; }
.played-slot { width: 39px; height: 39px; display: grid; place-items: center; border: 1px dashed #f0c3826d; border-radius: 8px; background: #21131baa; color: var(--accent); }
.played-slot.occupied { padding: 2px; border-style: solid; border-color: var(--hero); animation: reward .22s ease-out; }
.played-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; }
.hand-panel { width: min(100%, 590px); margin: 0 auto; }
.hand-meta { display: flex; align-items: center; justify-content: space-between; padding: 1px 2px 8px; }
.hand-meta strong { font: bold 17px var(--serif); }
.hand-meta div > span { color: var(--muted); font-size: 10px; margin-left: 7px; }
.hand-meta .energy { color: var(--hero); letter-spacing: .12em; font-size: 14px; white-space: nowrap; }
.hand-meta .energy span { margin-left: 0; font-size: inherit; }
.hand { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(4px, 1.5vw, 10px); align-items: start; }
.game-card {
  --rim: #b8a58d; --rim-dark: #665442; --gem: #6c5b4c;
  position: relative; display: block; width: 100%; padding: 3px; border: 1px solid var(--rim); border-radius: 10px; background: linear-gradient(147deg, var(--rim-dark), #241b25 46%, #0f101a 80%, var(--rim-dark));
  box-shadow: inset 0 0 0 1px #fff2, 0 4px 8px #0007; color: var(--cream); text-align: center; transition: transform .18s, box-shadow .18s;
}
.game-card.uncommon { --rim: #93c07a; --rim-dark: #46644a; --gem: #3b6446; }
.game-card.rare { --rim: #84cdd9; --rim-dark: #345c77; --gem: #2f6480; }
.game-card.epic { --rim: #d9a2f2; --rim-dark: #713b85; --gem: #764497; }
.game-card.legendary { --rim: #f8ce77; --rim-dark: #9e682b; --gem: #875623; }
.game-card.drop-gold { --rim: #ffd66e; --rim-dark: #ae7128; --gem: #8c541c; }
.game-card.drop-mythic { --rim: #ecabff; --rim-dark: #6c3196; --gem: #682c85; box-shadow: 0 0 12px #a243b354; }
.game-card .card-art { display: block; width: 100%; aspect-ratio: 1.1; object-fit: cover; border-radius: 6px 6px 3px 3px; }
.game-card.compact .card-art { aspect-ratio: 1; }
.card-badge, .card-glyph { position: absolute; display: grid; place-items: center; background: var(--gem); color: #fff1ce; border: 1px solid var(--rim); box-shadow: 0 1px 4px #0009; font-weight: 900; }
.card-badge { top: 3px; left: 3px; width: 23px; height: 23px; border-radius: 6px 6px 9px 9px; font-size: 13px; }
.card-glyph { right: 3px; top: 3px; width: 21px; height: 21px; border-radius: 50%; font-size: 12px; }
.card-caption { display: grid; gap: 4px; padding: 6px 4px; }
.card-type { color: var(--rim); font-size: 9px; font-weight: 750; }
.card-type span { color: var(--muted); }
.card-caption strong { font: bold 17px/1.08 var(--serif); overflow-wrap: anywhere; }
.card-caption .short-name { display: none; }
.card-rules { color: var(--cream); font-size: 12px; line-height: 1.28; }
.hand .game-card { min-height: 100%; }
.hand .card-caption { min-height: 39px; padding: 5px 0; align-content: center; }
.hand .card-type { display: none; }
.hand .card-caption strong { font-size: clamp(9px, 2.65vw, 15px); }
.hand .card-caption .short-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hand .card-glyph { display: none; }
.hand .unavailable { filter: saturate(.55) brightness(.82); }
.hand .selected { transform: translateY(-5px); box-shadow: 0 0 0 2px var(--hero), 0 0 15px #59e5cd65; }
.hand .selected::after { content: '✓'; position: absolute; right: 2px; top: 2px; background: var(--hero); color: #132e29; width: 18px; height: 18px; border-radius: 50%; font: bold 12px/18px system-ui; }
.hand button:hover:not(.selected) { transform: translateY(-2px); }
.battle-footer { width: min(100%, 470px); margin: 10px auto 0; }
.battle-tip { display: block; text-align: center; color: var(--muted); font-size: 10px; margin-bottom: 8px; }
.result-panel { position: relative; width: min(100%, 510px); min-height: 126px; display: grid; align-content: center; gap: 7px; padding: 17px 13px 13px; margin: 0 auto; text-align: center; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(#a0662a44, #20151d), var(--panel); animation: reward .38s ease-out; }
.result-panel.defeat { background: linear-gradient(#a22b3d53, #24151d), var(--panel); }
.result-panel h2 { font-size: clamp(22px, 5vw, 29px); }
.result-panel p { color: var(--accent); font-size: 13px; }
.comic-stamp {
  position: absolute; right: 8px; top: -12px; z-index: 1; padding: 4px 8px;
  border: 2px solid #361922; border-radius: 3px 8px 3px 8px; background: #f5cb78;
  color: #401b24; box-shadow: 2px 3px 0 #1b1019; font: 900 italic 14px/1 var(--serif);
  transform: rotate(8deg); animation: stamp .24s cubic-bezier(.18,.75,.3,1.4) both;
}
.defeat .comic-stamp { background: #ffa095; }
.resolved .enemy-entry > .game-card { animation: impact .27s ease-out; }

body[data-theme="teal"] .enemy-entry { display: grid; grid-template-columns: auto minmax(0, 220px); justify-content: center; gap: clamp(12px, 4vw, 28px); text-align: left; }
body[data-theme="teal"] .enemy-entry > .game-card { transform: none; border-radius: 15px; box-shadow: 0 0 32px #4adee95c, 0 7px 20px #0008; }
body[data-theme="teal"] .enemy-copy { border-left: 1px solid var(--accent-deep); padding-left: 10px; }
body[data-theme="ink"] .arena { margin-top: 8px; background: #372012af; border: 1px dashed var(--line); border-radius: 5px; }
body[data-theme="ink"] .enemy-entry > .game-card { transform: rotate(4deg); filter: sepia(.5); }
body[data-theme="ink"] .enemy-copy { padding: 8px 11px; background: #dcc6a4; color: #351f1d; text-shadow: none; border-radius: 3px; }
body[data-theme="ink"] .enemy-copy :is(.quote,.trick,.trick-description,.eyebrow) { color: #563128; }
body[data-theme="ink"] .enemy-copy .interrupted { color: #305644; }
body[data-theme="ink"] .hand-panel { margin-top: 10px; }
body[data-theme="ink"] .power-bar { max-width: calc(100% - 14px); }

dialog { width: min(94vw, 490px); max-height: min(86dvh, 760px); padding: 0; border: 1px solid var(--accent-deep); background: var(--panel); color: var(--cream); border-radius: 17px; box-shadow: 0 14px 75px #000d; }
dialog::backdrop { background: #0b080dd9; backdrop-filter: blur(4px); }
#modal-body { position: relative; padding: 24px 16px 20px; }
.close { position: absolute; top: 9px; right: 9px; }
dialog h2 { font-size: 28px; margin: 5px 42px 11px 0; }
.muted { color: var(--muted); font-size: 13px; }
.large-card { width: min(100%, 230px); margin: 12px auto 17px; animation: flip .28s ease-out; }
.large-card .card-caption { padding: 9px 6px; }
.large-card .card-caption strong { font-size: 22px; }
.large-card .card-badge, .large-card .card-glyph { width: 30px; height: 30px; font-size: 17px; }
.album { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.album .card-caption { min-height: 104px; align-content: start; }
.rules { display: grid; gap: 11px; margin-bottom: 2px; padding-left: 24px; font-size: 14px; }
.rules li::marker { color: var(--accent); font-weight: bold; }
.theme-list { display: grid; gap: 8px; margin-top: 16px; }
.theme-option { display: grid; grid-template-columns: 30px 1fr 13px; align-items: center; gap: 9px; text-align: left; padding: 11px 9px; border-radius: 8px; border: 1px solid var(--line); background: #100d13; }
.theme-option[aria-pressed="true"] { border-color: var(--accent); }
.theme-option > span { font-size: 21px; text-align: center; color: var(--swatch); }
.theme-option b { color: var(--swatch); }
.theme-option small { display: block; margin-top: 2px; color: var(--muted); }
.swatch-amber { --swatch: #f4c66a; }
.swatch-teal { --swatch: #83dfd0; }
.swatch-ink { --swatch: #edaa91; }
.setting { min-height: 48px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); }
.setting input { width: 21px; height: 21px; accent-color: var(--accent); }
.notice { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes enter { from { opacity: .72; } to { opacity: 1; } }
@keyframes flip { from { opacity: 0; transform: perspective(700px) rotateY(-60deg); } to { opacity: 1; transform: perspective(700px) rotateY(0); } }
@keyframes reward { from { opacity: .2; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes stamp { from { opacity: 0; transform: translateY(-14px) rotate(-11deg) scale(1.4); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes impact { 25% { translate: -5px 2px; rotate: -5deg; } 55% { translate: 4px 0; rotate: 3deg; } }
.reduced *, .reduced *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
@media (max-width: 520px) {
  #screen { width: calc(100% - 16px); }
  .scene { border-radius: 15px; }
  .tavern {
    background: linear-gradient(#100b136e, transparent 19%, transparent 46%, #130e15 63%),
      url(assets/tavern.webp) center top / max(100%, 400px) auto no-repeat, #130e15;
  }
  .card-badge { width: 20px; height: 20px; font-size: 11px; }
  .hand .game-card { padding: 2px; border-radius: 7px; }
  .hand .card-caption strong { display: none; }
  .hand .card-caption .short-name { display: block; }
  .hand .card-caption { min-height: 25px; }
}
@media (min-width: 700px) and (max-height: 900px) {
  .hand { max-width: 510px; margin: auto; }
  .hand-meta { max-width: 510px; margin: auto; }
}
@media (max-height: 650px) and (max-width: 520px) {
  .topbar { min-height: 51px; padding-top: max(4px, env(safe-area-inset-top), var(--telegram-top, 0px)); padding-bottom: 4px; }
  .battle { padding-top: 8px; padding-bottom: 10px; }
  .arena { padding-block: 4px; }
  .enemy-entry { display: grid; grid-template-columns: auto minmax(0, 220px); min-height: 130px; padding: 3px 5px 6px; gap: 10px; text-align: left; }
  body[data-theme="teal"] .enemy-entry { gap: 8px; }
  body[data-theme="ink"] .enemy-entry { grid-template-columns: minmax(0, 220px) auto; min-height: 122px; }
  body[data-theme="ink"] .enemy-entry > .game-card { order: 1; }
  body[data-theme="ink"] .enemy-copy { padding: 5px 7px; }
  body[data-theme="ink"] .arena { margin-top: 4px; }
  body[data-theme="ink"] .hand-panel { margin-top: 4px; }
  .enemy-entry > .game-card { width: 83px; }
  .enemy-copy .eyebrow { display: none; }
  .enemy-copy h1 { font-size: 22px; margin-top: 0; }
  .quote { font-size: 13px; }
  .hero-power, .enemy-power { min-height: 46px; padding-block: 3px; }
  .played-tray { margin-top: 5px; }
  .played-slot { width: 33px; height: 33px; }
  .battle-footer { margin-top: 5px; }
  .battle-footer .primary { min-height: 44px; }
  .battle-tip { margin-bottom: 5px; }
}