:root {
  color-scheme: light;
  --page-halo: #fff8e7;
  --page-halo-side: #eadfce;
  --ink: #29262b;
  --muted: #716b63;
  --paper: #f5f0e7;
  --surface: #fffdf9;
  --surface-soft: #f3ebdf;
  --line: #ded4c5;
  --control-line: #cdbda8;
  --accent: #ad7626;
  --accent-deep: #744a18;
  --stone-accent: #5f5963;
  --button-ink: #fff;
  --focus-ring: #ad762625;
  --clear-hover: #f0e8dc;
  --shadow: rgb(91 68 37 / 12%);
  --status-bg: #f0e9df;
  --spinner-line: #d5c6ae;
  --card-frame: transparent;
  --card-frame-line: transparent;
  --card-frame-shadow: transparent;
  --card-glow: drop-shadow(0 0 7px rgb(184 116 21 / 32%)) drop-shadow(0 0 19px rgb(213 151 39 / 18%));
  --viewer-bg: rgb(248 241 228 / 94%);
  --viewer-glow: drop-shadow(0 0 8px rgb(184 116 21 / 36%)) drop-shadow(0 0 23px rgb(213 151 39 / 20%));
  --viewer-shadow: 0 24px 70px rgb(78 59 31 / 18%);
  --viewer-close-bg: rgb(255 253 249 / 88%);
  --viewer-close-border: rgb(78 59 31 / 22%);
  --viewer-close-hover: #fffdf9;
  --code-bg: #eee6db;
  --error-bg: #f7e8e3;
  --error-line: #ebcfc5;
  --error-ink: #8b352b;
  --game-line: #e5c98e;
  --game-bg-start: #fff9ea;
  --game-bg-end: #f7edda;
  --game-shadow: rgb(138 90 24 / 8%);
  --game-accent: #8a5a18;
  --game-text-bg: #fffdf8;
  --game-text-line: #c49a54;
  --game-submit: #9c671d;
  --game-submit-hover: #734716;
  --game-button-ink: #fff;
  --game-secondary-line: #d7bd8d;
  --game-secondary-ink: #734716;
  --mtg-badge-border: #d8ccbb;
  --mtg-legal: #2f7c54;
  --mtg-banned: #aa4b45;
  --mtg-restricted: #a66f20;
  --mtg-not-legal: #77727b;
  --mtg-unknown: #70608f;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page-halo: #5a432a;
  --page-halo-side: #353039;
  --ink: #f1e8da;
  --muted: #c2b6a5;
  --paper: #25262a;
  --surface: #303136;
  --surface-soft: #3b3835;
  --line: #5a524a;
  --control-line: #776b5d;
  --accent: #d4a14c;
  --accent-deep: #b97927;
  --stone-accent: #d1c6b8;
  --button-ink: #2e261b;
  --focus-ring: #d4a14c55;
  --clear-hover: #4a4239;
  --shadow: rgb(0 0 0 / 35%);
  --status-bg: #393936;
  --spinner-line: #756957;
  --card-frame: transparent;
  --card-frame-line: transparent;
  --card-frame-shadow: transparent;
  --card-glow: drop-shadow(0 0 8px rgb(255 193 65 / 52%)) drop-shadow(0 0 22px rgb(224 151 29 / 28%));
  --viewer-bg: rgb(27 26 28 / 90%);
  --viewer-glow: drop-shadow(0 0 10px rgb(255 193 65 / 58%)) drop-shadow(0 0 27px rgb(224 151 29 / 32%));
  --viewer-shadow: 0 24px 70px rgb(0 0 0 / 42%);
  --viewer-close-bg: rgb(255 248 233 / 92%);
  --viewer-close-border: rgb(255 235 191 / 35%);
  --viewer-close-hover: #fff8e9;
  --code-bg: #343235;
  --error-bg: #4a302f;
  --error-line: #8c5c57;
  --error-ink: #f0c9c3;
  --game-line: #856535;
  --game-bg-start: #3d3328;
  --game-bg-end: #2f2b27;
  --game-shadow: rgb(0 0 0 / 26%);
  --game-accent: #e2b563;
  --game-text-bg: #292827;
  --game-text-line: #c39446;
  --game-submit: #b47726;
  --game-submit-hover: #d0963d;
  --game-button-ink: #2e261b;
  --game-secondary-line: #876b3e;
  --game-secondary-ink: #e6c98c;
  --mtg-badge-border: #756957;
  --mtg-legal: #36845d;
  --mtg-banned: #ba5c55;
  --mtg-restricted: #c08a39;
  --mtg-not-legal: #827c86;
  --mtg-unknown: #8472aa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 50% -14%, var(--page-halo) 0, transparent 29rem),
    radial-gradient(circle at 92% 7%, var(--page-halo-side) 0, transparent 24rem),
    var(--paper);
  color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

header, main, footer { max-width: 1180px; margin: auto; }

header {
  padding: 17px 30px 15px;
  display: grid;
  grid-template-columns: max-content minmax(0, 660px);
  gap: 32px;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.header-identity {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.brand-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .03em;
}

.brand-text span { font-weight: 400; }

.theme-toggle {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--stone-accent);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent);
  background: var(--surface-soft);
  color: var(--accent-deep);
}

.theme-toggle__icon { width: 21px; height: 21px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }

.header-search { justify-self: end; width: min(100%, 660px); min-width: 0; }

.search-row { display: flex; align-items: flex-start; gap: 10px; }
.search-row form { flex: 1 1 auto; min-width: 0; }

.search-wrap { position: relative; }

.language-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 5px 12px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
}

.language-filter__label {
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.language-filter label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.language-filter input { width: auto; margin: 0; accent-color: var(--accent); }
.language-filter input:disabled { accent-color: var(--accent); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main { padding: 25px 30px 35px; }

.search { display: flex; gap: 10px; }

.search-input { position: relative; flex: 1 1 auto; min-width: 0; }

input {
  width: 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.search-input input { padding-right: 38px; }

input:focus {
  outline: 3px solid var(--focus-ring);
  border-color: var(--accent);
}

button { font: inherit; cursor: pointer; }

.random-card,
.random-game {
  display: inline-flex;
  flex: 0 0 44px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--control-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
}

.random-game { color: var(--stone-accent); }

.random-card:hover,
.random-card:focus-visible,
.random-game:hover,
.random-game:focus-visible { border-color: var(--accent); background: var(--surface-soft); color: var(--accent-deep); }
.random-card:disabled { cursor: wait; opacity: .55; }
.random-game:disabled { cursor: wait; opacity: .55; }

.search-submit {
  padding: 10px 17px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--button-ink);
  font-weight: 650;
  white-space: nowrap;
}

.search-submit:hover { background: var(--accent-deep); }

.search-clear {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 25px;
  height: 25px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
}

.search-clear:hover,
.search-clear:focus-visible { background: var(--clear-hover); color: var(--ink); }

.suggestions {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  margin: 0;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 14px 28px var(--shadow);
  list-style: none;
}

.suggestions li { margin: 0; }

.suggestions button {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.suggestions button:hover,
.suggestions button[aria-selected="true"] { background: var(--surface-soft); color: var(--accent-deep); }

.status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--status-bg);
  font-size: 14px;
}

.spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--spinner-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

#error {
  margin-bottom: 22px;
  padding: 14px;
  border: 1px solid var(--error-line);
  border-radius: 7px;
  background: var(--error-bg);
  color: var(--error-ink);
}

.game-panel {
  margin-bottom: 24px;
  padding: 20px 22px 22px;
  border: 1px solid var(--game-line);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--game-bg-start), var(--game-bg-end));
  box-shadow: 0 12px 30px var(--game-shadow);
}

.game-panel__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.game-kicker {
  margin: 0 0 3px;
  color: var(--game-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.game-panel h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; line-height: 1.1; }
.game-time { color: var(--game-accent); font-size: 13px; font-weight: 700; white-space: nowrap; }

#game-text {
  margin: 18px 0;
  padding: 16px 18px;
  border-left: 3px solid var(--game-text-line);
  border-radius: 0 8px 8px 0;
  background: var(--game-text-bg);
}

#game-answer-form label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 750; }
.game-answer-row { display: flex; align-items: stretch; gap: 10px; }
.game-answer-row input { flex: 1 1 auto; }
.game-answer-actions { display: flex; flex: 0 0 auto; gap: 10px; }
.game-answer-actions button {
  padding: 10px 17px;
  border-radius: 8px;
  font-weight: 700;
  white-space: nowrap;
}
.game-answer-actions button[type="submit"] {
  border: 0;
  background: var(--game-submit);
  color: var(--game-button-ink);
}
.game-answer-actions button[type="submit"]:hover { background: var(--game-submit-hover); }
.game-answer-actions button:disabled { cursor: wait; opacity: .6; }
.game-answer-actions .game-abandon {
  border: 1px solid var(--game-secondary-line);
  background: transparent;
  color: var(--game-secondary-ink);
}
.game-answer-actions .game-abandon:hover,
.game-answer-actions .game-abandon:focus-visible { background: var(--game-text-bg); border-color: var(--game-text-line); }
.game-feedback { min-height: 1.6em; margin: 10px 0 0; color: var(--game-secondary-ink); font-size: 14px; font-weight: 650; }

.result {
  display: grid;
  grid-template-columns: fit-content(360px) minmax(0, 1fr);
  gap: 42px;
  margin-top: 0;
  padding-top: 0;
}

.card-visual {
  position: sticky;
  top: 24px;
  align-self: start;
  min-width: 0;
}

.picture {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 0;
  padding: 11px;
  border: 1px solid var(--card-frame-line);
  border-radius: 18px;
  background: var(--card-frame);
  box-shadow: 0 8px 22px var(--card-frame-shadow);
}

.image-button {
  display: block;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  line-height: 0;
}

.image-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 5px;
}

.picture img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  background: transparent;
  filter: var(--card-glow);
}

.card-meta { margin-top: 13px; text-align: center; }

body.viewer-open { overflow: hidden; }

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--viewer-bg);
}

.image-viewer__image {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  padding: 0;
  border-radius: 0;
  background: var(--card-frame);
  filter: var(--viewer-glow);
  box-shadow: var(--viewer-shadow);
}

.image-viewer__close {
  position: absolute;
  top: 17px;
  right: 17px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--viewer-close-border);
  border-radius: 50%;
  background: var(--viewer-close-bg);
  color: var(--ink);
  font-size: 27px;
  line-height: 1;
  cursor: pointer;
}

.image-viewer__close:hover { background: var(--viewer-close-hover); }
.image-viewer__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

#image-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 320px;
  border: 1px dashed var(--control-line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
}

.rulings-panel {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.rulings-panel summary {
  padding: 13px 0;
  color: var(--accent-deep);
  cursor: pointer;
  font-weight: 700;
}

.rulings-loading {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: rulings-spin .75s linear infinite;
}

@keyframes rulings-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .rulings-loading { animation: none; border-right-color: currentColor; opacity: .55; }
}

.rulings-state { margin: 0 0 13px; color: var(--muted); font-size: 14px; }
.ruling { margin: 0 0 16px; }
.ruling time { display: block; color: var(--accent); font-size: 13px; font-weight: 700; }
.ruling p { margin: 2px 0 0; white-space: pre-wrap; }

.card-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.result h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.04em;
  line-height: 1.1;
}

.popularity-rank {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  margin: 6px 0 0;
  justify-content: center;
  color: var(--accent-deep);
  font-size: 18px;
  font-weight: 700;
}

.popularity-rank__badge { width: 57px; height: 44px; object-fit: contain; }

.card-type {
  margin: 0;
  color: var(--accent);
  font-size: 15px;
  font-weight: 650;
}

pre {
  margin: 0;
  font: 15px/1.65 system-ui, sans-serif;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#card-text {
  padding: 18px 20px;
  border-left: 3px solid var(--accent);
  background: var(--surface-soft);
  border-radius: 0 9px 9px 0;
}

.legality-section {
  margin: 20px 0 22px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.section-heading { margin-bottom: 12px; }
.section-heading h3 { margin: 0; font-size: 19px; letter-spacing: -.025em; }

.legality-groups {
  display: block;
}

.legality-group {
  min-width: 0;
}

.legality-group + .legality-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.legality-group h4 {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: -.01em;
}

.legality-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mtg-legality {
  --mtg-format: #334155;
  --mtg-status: var(--mtg-not-legal);
  display: inline-flex;
  align-items: stretch;
  min-height: 30px;
  overflow: hidden;
  border: 1px solid var(--mtg-badge-border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font: 600 12px/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  vertical-align: middle;
}

.mtg-legality__format {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0 8px;
  background: var(--mtg-format);
  color: var(--button-ink);
  font-weight: 800;
  letter-spacing: .045em;
}

.mtg-legality__name { display: inline-flex; align-items: center; padding: 0 9px; white-space: nowrap; }

.mtg-legality__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 31px;
  padding: 0 7px;
  border-left: 1px solid var(--mtg-badge-border);
  background: var(--mtg-status);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.mtg-legality[data-status="legal"] { --mtg-status: var(--mtg-legal); }
.mtg-legality[data-status="banned"] { --mtg-status: var(--mtg-banned); }
.mtg-legality[data-status="restricted"] { --mtg-status: var(--mtg-restricted); }
.mtg-legality[data-status="not_legal"] { --mtg-status: var(--mtg-not-legal); }
.mtg-legality[data-status="unknown"] { --mtg-status: var(--mtg-unknown); }
.mtg-legality[data-status="unknown"] .mtg-legality__status {
  background: repeating-linear-gradient(135deg, #695b9b 0 5px, #51467e 5px 10px);
}

.empty-state { margin: 0; color: var(--muted); font-size: 12px; }

#links { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0; }

#links a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  text-underline-offset: 4px;
}

#links a:hover { color: var(--accent-deep); }

details { padding-top: 15px; border-top: 1px solid var(--line); font-size: 13px; }
summary { cursor: pointer; }

#card-json {
  max-height: 450px;
  margin-top: 10px;
  padding: 14px;
  overflow: auto;
  border-radius: 6px;
  background: var(--code-bg);
  font: 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace;
}

.note { margin-top: 20px; color: var(--muted); font-size: 12px; }

footer {
  padding: 25px 30px 30px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}

.footer-note { margin: 0; }

.footer-support {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 9px;
}

.telegram-button {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: #229ed9;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  text-decoration: none;
}

.telegram-button:hover { background: #168ac1; color: #fff; }

.footer-support .bmc-btn {
  min-width: 0 !important;
  height: 38px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
}

.footer-support .bmc-btn svg { height: 23px !important; }
.footer-support .bmc-btn-text { margin-left: 6px !important; font-size: 16px !important; }
.footer-support .logo-outline { fill: #000 !important; }
.footer-support .logo-coffee { fill: #ffdd00 !important; }

[hidden] { display: none !important; }

@media (max-width: 800px) {
  header {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .header-identity { width: 100%; justify-content: space-between; }
  .header-search { justify-self: stretch; width: 100%; }
  .result { grid-template-columns: fit-content(280px) minmax(0, 1fr); gap: 28px; }
  .card-visual { position: static; }
}

@media (max-width: 650px) {
  header { padding: 16px 18px 14px; }
  main { padding: 20px 18px 25px; }
  .header-search { justify-self: center; width: min(100%, 360px); }
  .result { grid-template-columns: 1fr; gap: 25px; }
  .card-visual { justify-self: stretch; width: 100%; max-width: none; }
  .image-button { width: 100%; }
  .picture img { width: 100%; height: auto; max-width: 100%; max-height: none; }
  .image-viewer { padding: 14px; }
  .image-viewer__image { max-width: calc(100vw - 28px); max-height: calc(100vh - 28px); }
  .image-viewer__close { top: 10px; right: 10px; }
  footer { padding: 22px 18px; }
  .footer-support { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .search { flex-direction: row; }
  .search-submit {
    display: inline-flex;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .search-submit__label { display: none; }
  .game-answer-row { flex-direction: column; }
  .game-answer-actions { width: 100%; }
  .game-answer-actions button { flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
}