* { box-sizing: border-box; }

html, body, button, img, .mat, .preview {
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}

:root {
  --mat-gap: 9px;
  --card-h: min(calc(33.333dvh - 12.667px), 22vw);
  --card-w: calc(var(--card-h) * 0.686);
  --control-button-h: clamp(72px, calc(var(--card-h) * 0.29), 116px);
  --control-button-w: clamp(120px, calc(var(--control-button-h) * 1.5), 180px);
  --control-font-size: clamp(22px, calc(var(--control-button-h) * 0.34), 34px);
  --control-gap: clamp(8px, calc(var(--control-button-h) * 0.11), 14px);
  --settings-gear-size: clamp(54px, calc(var(--control-button-h) * 0.72), 82px);
  --hud-side: clamp(10px, calc(var(--card-h) * 0.04), 18px);
  --hud-top: clamp(8px, calc(var(--card-h) * 0.03), 18px);
  --hud-counter-font: clamp(42px, calc(var(--card-h) * 0.18), 76px);
  --hud-mana-font: clamp(36px, calc(var(--card-h) * 0.15), 64px);
  --controls-top: clamp(88px, calc(var(--hud-top) + var(--hud-mana-font) * 2.15), 142px);
  --turn-font: clamp(30px, calc(var(--card-h) * 0.105), 46px);
  --card-inner-pad: clamp(6px, calc(var(--card-h) * 0.03), 12px);
  --card-overlay-font: clamp(22px, calc(var(--card-h) * 0.105), 38px);
  --card-overlay-pad-y: clamp(4px, calc(var(--card-h) * 0.018), 9px);
  --card-overlay-pad-x: clamp(7px, calc(var(--card-h) * 0.026), 13px);
  --card-overlay-offset: clamp(6px, calc(var(--card-h) * 0.028), 12px);
  --card-overlay-radius: clamp(4px, calc(var(--card-h) * 0.025), 9px);
  --editor-card-h: min(18vh, 104px);
  --editor-card-w: calc(var(--editor-card-h) * 0.686);
  --editor-overlay-font: clamp(14px, calc(var(--editor-card-h) * 0.17), 22px);
  --editor-overlay-offset: clamp(3px, calc(var(--editor-card-h) * 0.04), 6px);
  --bronze-dark: #261407;
  --bronze-base: #5a3516;
  --bronze-mid: #7b4d22;
  --bronze-light: #a66c2d;
  --gold-dark: #80581f;
  --gold-base: #d5a941;
  --gold-bright: #fff0a3;
  --ui-text: var(--gold-bright);
  --ui-weight: 700;
  --counter-weight: 800;
}

body {
  margin: 0;
  background: #07140d;
  color: var(--ui-text);
  font-family: Arial, sans-serif;
  overflow: hidden;
}

body::before {
  background: var(--board-image, url('../boards/Krea2_turbo_00004_.png'));
  background-position: center;
  background-size: cover;
  content: '';
  inset: -4vh -4vw;
  opacity: 0.85;
  position: fixed;
  transform: scale(1.08);
  z-index: -1;
}

body.fx-attack::after,
body.fx-damage::after {
  animation: combatFlash 0.36s ease-out both;
  content: '';
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: 6;
}

body.fx-attack::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,240,163,0.34), transparent 24%),
    linear-gradient(90deg, transparent, rgba(213,169,65,0.3), transparent);
}

body.fx-damage::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(255,55,45,0.26), transparent 28%),
    linear-gradient(90deg, rgba(140,0,0,0.22), transparent 35%, transparent 65%, rgba(140,0,0,0.22));
}

@keyframes combatFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}

.mat, .editor {
  align-content: center;
  display: grid;
  gap: var(--mat-gap);
  height: 100dvh;
  padding: 10px;
  position: relative;
  width: 100dvw;
}

.mat { grid-template-rows: var(--card-h) var(--card-h) var(--card-h); }
.hidden { display: none !important; }

.row {
  display: grid;
  gap: 12px;
  grid-template-columns: calc((var(--card-w) * 5) + 32px);
  justify-content: center;
  min-height: 0;
}

.hp, .mana {
  align-items: center;
  display: flex;
  flex-direction: column;
  font-size: var(--hud-counter-font);
  font-weight: var(--counter-weight);
  justify-content: center;
  line-height: 1.15;
  min-height: 0;
  position: absolute;
  text-align: center;
  text-shadow: 0 2px 2px #000, 0 0 5px #000;
  z-index: 3;
}

.mana { font-size: var(--hud-mana-font); }
.enemy { color: #ff4d4d; }
.player { color: #5da4ff; }

.hp.enemy { left: var(--hud-side); top: var(--hud-top); }
.hp.player { left: var(--hud-side); top: calc(var(--hud-top) + var(--hud-counter-font) * 0.86); }
.mana.enemy { right: var(--hud-side); top: var(--hud-top); }
.mana.player { right: var(--hud-side); top: calc(var(--hud-top) + var(--hud-mana-font) * 0.9); }

.field, .hand {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, var(--card-w));
  justify-content: center;
  min-height: 0;
}

.slot, .card-slot {
  aspect-ratio: 59 / 86;
  background:
    linear-gradient(180deg,
      rgba(166,108,45,0.31) 0%,
      rgba(123,77,34,0.29) 42%,
      rgba(90,53,22,0.32) 72%,
      rgba(38,20,7,0.36) 100%);
  border: 0;
  color: inherit;
  height: var(--card-h);
  min-height: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: var(--card-w);
}

.slot svg, .card-slot svg {
  height: 100%;
  inset: 0;
  pointer-events: none;
  position: absolute;
  width: 100%;
}

.outline {
  fill: rgba(90, 53, 22, 0.38);
  stroke: url(#slotGold);
  stroke-width: 1.2;
}

.slot.selected .outline, .card-slot.selected .outline {
  filter: drop-shadow(0 0 4px rgba(255,240,163,0.9));
  stroke: var(--gold-bright);
}
.slot.cursor-focus .outline,
.card-slot.cursor-focus .outline {
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.95));
  stroke: #ffffff;
}
.editor-card.cursor-focus::before {
  border: 2px solid #ffffff;
  border-radius: 4px;
  box-shadow: 0 0 7px rgba(255,255,255,0.82);
  content: '';
  inset: -2px;
  pointer-events: none;
  position: absolute;
  z-index: 3;
}
.slot.summon-target .outline { stroke: #62ff76; }
.slot.attack-target .outline { stroke: #ff6652; }
.slot.anim-summon .outline {
  animation: outlinePulse 0.45s ease-in-out infinite alternate;
  stroke: #62ff76;
}
.slot.anim-attack .outline {
  animation: outlinePulse 0.22s ease-in-out infinite alternate;
  stroke: var(--gold-bright);
}
.slot.anim-spell .outline {
  animation: outlinePulse 0.35s ease-in-out infinite alternate;
  stroke: #8f7cff;
}

@keyframes outlinePulse {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

.field-card, .hand-card {
  height: 100%;
  inset: 0;
  padding: var(--card-inner-pad);
  position: absolute;
  width: 100%;
  z-index: 1;
}

.field-card.defense { transform: rotate(90deg) scale(0.72); }

.field-card img, .hand-card img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.stat-stack {
  background: rgba(0,0,0,0.78);
  border-radius: var(--card-overlay-radius);
  color: var(--ui-text);
  font-size: var(--card-overlay-font);
  font-weight: var(--ui-weight);
  line-height: 1.04;
  min-width: calc(var(--card-overlay-font) * 3.15);
  padding: var(--card-overlay-pad-y) var(--card-overlay-pad-x);
  position: absolute;
  right: var(--card-overlay-offset);
  text-align: right;
  top: var(--card-overlay-offset);
  z-index: 2;
}

.field-card.used .stat-stack,
.field-card.inactive .stat-stack { color: #888; }

.controls {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  min-height: 0;
  padding: 0;
  position: absolute;
  right: 8px;
  top: var(--controls-top);
  z-index: 4;
}

.difficulty-menu {
  animation: difficultyPop 0.16s ease-out both;
  display: flex;
  flex-direction: column;
  gap: var(--control-gap);
  position: absolute;
  right: calc(var(--control-button-w) + 8px);
  top: 17px;
  transform: translateY(-50%);
  transform-origin: right center;
}

.difficulty-menu button {
  width: calc(var(--control-button-w) * 1.18);
}

button {
  background:
    linear-gradient(180deg,
      var(--bronze-light) 0%,
      var(--bronze-mid) 42%,
      var(--bronze-base) 70%,
      var(--bronze-dark) 100%);
  border: 1px solid var(--gold-base);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,240,163,0.42),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 0 5px rgba(213,169,65,0.22);
  color: var(--gold-bright);
  font-size: var(--control-font-size);
  font-weight: var(--ui-weight);
  height: var(--control-button-h);
  line-height: 1;
  padding: 0 calc(var(--control-button-w) * 0.08);
  text-shadow: 0 1px 1px #000;
  white-space: nowrap;
  width: var(--control-button-w);
}

button:active {
  filter: brightness(1.12);
  transform: translateY(1px);
}

button:disabled {
  background: linear-gradient(#3b3022, #20160c);
  border-color: #6e5a35;
  box-shadow: none;
  color: #6d6454;
}

button.cursor-focus,
input.cursor-focus {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.settings-gear {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  bottom: 5px;
  color: var(--ui-text);
  display: flex;
  font-size: calc(var(--settings-gear-size) * 0.64);
  height: var(--settings-gear-size);
  justify-content: center;
  padding: 0;
  position: fixed;
  right: 8px;
  text-shadow: 0 2px 2px #000, 0 0 5px #000;
  width: var(--settings-gear-size);
  z-index: 4;
}

.settings-gear:active {
  filter: brightness(1.14);
  transform: translateY(1px);
}

.settings-screen {
  align-items: center;
  background: rgba(8, 6, 4, 0.78);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 18px;
  position: fixed;
  z-index: 7;
}

.settings-screen.hidden { display: none; }

.settings-panel {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,240,163,0.14), transparent 32%),
    linear-gradient(180deg, rgba(90,53,22,0.95), rgba(18,11,7,0.96));
  border: 2px solid var(--gold-base);
  border-radius: 14px;
  box-shadow: 0 0 18px rgba(0,0,0,0.72), inset 0 0 20px rgba(255,240,163,0.08);
  color: var(--ui-text);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: min(360px, calc(100vw - 36px));
  padding: 18px;
  text-shadow: 0 1px 1px #000;
}

.settings-panel h1 {
  font-size: 22px;
  line-height: 1;
  margin: 0 0 4px;
  text-align: center;
}

.setting-row {
  display: grid;
  gap: 10px;
  grid-template-columns: 70px 1fr;
  align-items: center;
  font-size: 15px;
  font-weight: var(--ui-weight);
}

.setting-row input {
  accent-color: var(--gold-base);
  width: 100%;
}

.setting-toggle input {
  height: 20px;
  justify-self: start;
  width: 20px;
}

.settings-panel button {
  align-self: center;
  margin-top: 4px;
  width: calc(var(--control-button-w) * 0.86);
}

@keyframes difficultyPop {
  from { opacity: 0; transform: translate(10px, -50%) scaleX(0.82); }
  to { opacity: 1; transform: translate(0, -50%) scaleX(1); }
}

.turn {
  bottom: 6px;
  color: var(--ui-text);
  font-size: var(--turn-font);
  font-weight: var(--ui-weight);
  left: 10px;
  position: absolute;
  text-shadow: 0 2px 2px #000, 0 0 5px #000;
}

.preview {
  align-items: center;
  background: rgba(0,0,0,0.72);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 10px;
  position: fixed;
  z-index: 5;
}

.preview.hidden { display: none; }

.preview img {
  max-height: calc(100vh - 20px);
  max-width: calc(100vw - 20px);
  object-fit: contain;
  pointer-events: none;
}

.preview div {
  display: none;
}

.editor {
  grid-template-columns: 1fr 0.72fr;
  grid-template-rows: 28px 1fr;
  padding-right: 70px;
}

.editor-stats {
  color: var(--ui-text);
  font-size: 17px;
  font-weight: var(--ui-weight);
  grid-column: 1 / 3;
  text-shadow: 0 2px 2px #000, 0 0 5px #000;
}

.editor-pool, .editor-deck {
  align-content: start;
  display: grid;
  gap: 7px;
  grid-auto-rows: var(--editor-card-h);
  grid-template-columns: repeat(auto-fill, var(--editor-card-w));
  min-height: 0;
  overflow: auto;
  padding: 2px;
}

.editor-card {
  aspect-ratio: 59 / 86;
  background: transparent;
  border: 0;
  color: inherit;
  height: var(--editor-card-h);
  min-height: 0;
  overflow: visible;
  padding: 0;
  position: relative;
  width: var(--editor-card-w);
}

.editor-card img {
  height: 100%;
  inset: 0;
  object-fit: contain;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 1;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.56));
}

.editor-card .count {
  background: rgba(38,20,7,0.88);
  border: 1px solid var(--gold-base);
  color: var(--gold-bright);
  font-size: clamp(13px, calc(var(--editor-card-h) * 0.15), 19px);
  font-weight: var(--ui-weight);
  left: 4px;
  padding: 1px 4px;
  position: absolute;
  top: 4px;
  z-index: 2;
}

.editor-card .stat-stack {
  font-size: var(--editor-overlay-font);
  min-width: calc(var(--editor-overlay-font) * 2.9);
  padding: clamp(2px, calc(var(--editor-card-h) * 0.015), 5px) clamp(3px, calc(var(--editor-card-h) * 0.025), 6px);
  right: var(--editor-overlay-offset);
  top: var(--editor-overlay-offset);
}

.editor-card.disabled { opacity: 0.42; }

.result-screen {
  align-items: center;
  background:
    radial-gradient(circle at 50% 47%, rgba(255,240,163,0.2), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(213,169,65,0.14), transparent 42%),
    linear-gradient(90deg, rgba(8,18,26,0.9), rgba(38,20,7,0.93) 46%, rgba(8,18,26,0.9));
  display: flex;
  inset: 0;
  justify-content: center;
  overflow: hidden;
  padding: 22px;
  position: fixed;
  z-index: 8;
}

.result-screen::before,
.result-screen::after {
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.result-screen::before {
  background: radial-gradient(circle at 50% 50%, transparent 0 20%, rgba(255,240,163,0.2) 31%, transparent 58%);
  filter: blur(18px);
  opacity: 0.78;
}

.result-screen.defeat::before {
  background: radial-gradient(circle at 50% 50%, transparent 0 18%, rgba(156,106,218,0.24) 32%, transparent 60%);
  filter: blur(20px);
  opacity: 0.72;
}

.result-screen.victory {
  animation: resultFade 0.45s ease-out both, victoryDawn 2.8s ease-in-out infinite alternate;
}

.result-screen.defeat {
  animation: resultFade 0.45s ease-out both, shadowPulse 2.6s ease-in-out infinite alternate;
}

.result-aura {
  display: none;
}

.result-orbit {
  display: none;
}

.result-panel {
  background:
    linear-gradient(180deg, rgba(255,240,163,0.18), transparent 22%),
    linear-gradient(145deg, rgba(71,42,16,0.96), rgba(24,13,7,0.97));
  border: 3px double var(--gold-base);
  border-radius: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255,240,163,0.35),
    0 0 32px rgba(0,0,0,0.88),
    0 0 34px rgba(213,169,65,0.28);
  max-height: calc(100vh - 44px);
  max-width: min(760px, calc(100vw - 44px));
  overflow: hidden;
  padding: clamp(14px, 3.4vh, 22px) clamp(18px, 3.4vw, 28px) clamp(16px, 3.6vh, 24px);
  position: relative;
  text-align: center;
  text-shadow: 0 2px 2px #000, 0 0 7px #000;
  transform: translateZ(0);
  width: min(760px, calc(100vw - 44px));
  z-index: 1;
}

.victory .result-panel {
  animation: panelRise 0.65s cubic-bezier(.2, .9, .2, 1.08) both;
}

.defeat .result-panel {
  animation: panelRise 0.65s cubic-bezier(.2, .9, .2, 1.08) both;
  background:
    linear-gradient(180deg, rgba(156,106,218,0.14), transparent 24%),
    linear-gradient(145deg, rgba(42,24,54,0.96), rgba(11,8,14,0.98));
  border-color: #9c6ada;
  box-shadow:
    inset 0 1px 0 rgba(204,170,255,0.28),
    0 0 34px rgba(0,0,0,0.9),
    0 0 28px rgba(90,42,138,0.34);
}

.result-kicker {
  color: var(--gold-bright);
  font-size: clamp(18px, min(2.1vw, 3.4vh), 28px);
  font-weight: var(--ui-weight);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.result-panel h1 {
  color: var(--gold-bright);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(72px, min(11vw, 17vh), 132px);
  line-height: 0.9;
  margin: 10px 0 12px;
  text-transform: uppercase;
}

.victory .result-panel h1 {
  animation: titleFlash 1.8s ease-in-out infinite alternate;
}

.defeat .result-panel h1 {
  color: #cfa6ff;
  animation: shadowTitle 1.8s ease-in-out infinite alternate;
}

.result-rule {
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  height: 2px;
  margin: 0 auto 14px;
  width: 80%;
}

.defeat .result-rule {
  background: linear-gradient(90deg, transparent, #cfa6ff, transparent);
}

.result-panel p {
  color: #ffe8a8;
  font-size: clamp(22px, min(2.6vw, 4vh), 34px);
  line-height: 1.35;
  margin: 0 auto 12px;
  max-width: 720px;
}

.result-stats {
  color: #d7c28a;
  font-size: clamp(18px, min(2vw, 3vh), 26px);
  font-weight: var(--ui-weight);
  margin-bottom: 16px;
}

.result-panel button {
  font-size: clamp(30px, min(4vw, 7vh), 54px);
  height: clamp(62px, 9vh, 92px);
  padding: 0 clamp(28px, 4.2vw, 58px);
  width: auto;
}

@media (min-aspect-ratio: 1.65/1) {
  .result-panel {
    max-width: min(760px, calc(100vw - 44px));
    width: min(760px, calc(100vw - 44px));
  }

  .result-panel h1 {
    font-size: clamp(64px, min(9vw, 15vh), 112px);
  }
}

@keyframes resultFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes victoryGlow {
  from { background-color: rgba(30,18,2,0.12); }
  to { background-color: rgba(213,169,65,0.1); }
}

@keyframes victoryDawn {
  from { background-color: rgba(80,45,10,0.08); }
  to { background-color: rgba(213,169,65,0.1); }
}

@keyframes shadowPulse {
  from { background-color: rgba(12,5,18,0.1); }
  to { background-color: rgba(80,35,120,0.16); }
}

@keyframes panelRise {
  from { opacity: 0; transform: translateY(28px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes titleFlash {
  from { text-shadow: 0 2px 2px #000, 0 0 10px rgba(255,240,163,0.45); }
  to { text-shadow: 0 2px 2px #000, 0 0 26px rgba(255,240,163,0.95), 0 0 48px rgba(213,169,65,0.5); }
}

@keyframes shadowTitle {
  from { text-shadow: 0 2px 2px #000, 0 0 10px rgba(156,106,218,0.46); }
  to { text-shadow: 0 2px 2px #000, 0 0 26px rgba(156,106,218,0.86), 0 0 42px rgba(22,7,38,0.8); }
}

@media (max-aspect-ratio: 1.15/1) {
  :root {
    --mat-gap: 7px;
    --card-h: min(calc(33.333dvh - 4.667px), 22vw);
    --card-w: calc(var(--card-h) * 0.686);
    --control-button-h: clamp(60px, calc(var(--card-h) * 0.34), 92px);
    --control-button-w: clamp(98px, calc(var(--control-button-h) * 1.45), 138px);
    --control-font-size: clamp(20px, calc(var(--control-button-h) * 0.34), 30px);
    --control-gap: clamp(7px, calc(var(--control-button-h) * 0.1), 12px);
    --settings-gear-size: clamp(52px, calc(var(--control-button-h) * 0.72), 68px);
    --hud-side: 8px;
    --hud-top: 4px;
    --hud-counter-font: clamp(32px, calc(var(--card-h) * 0.42), 48px);
    --hud-mana-font: clamp(28px, calc(var(--card-h) * 0.35), 42px);
    --controls-top: 96px;
    --turn-font: clamp(22px, calc(var(--card-h) * 0.27), 34px);
    --card-inner-pad: clamp(5px, calc(var(--card-h) * 0.04), 9px);
    --card-overlay-font: clamp(16px, calc(var(--card-h) * 0.18), 24px);
    --card-overlay-pad-y: clamp(3px, calc(var(--card-h) * 0.018), 6px);
    --card-overlay-pad-x: clamp(5px, calc(var(--card-h) * 0.026), 9px);
    --card-overlay-offset: clamp(4px, calc(var(--card-h) * 0.028), 8px);
    --card-overlay-radius: clamp(3px, calc(var(--card-h) * 0.025), 7px);
    --editor-card-h: min(14.5vh, 86px);
    --editor-card-w: calc(var(--editor-card-h) * 0.686);
    --editor-overlay-font: clamp(12px, calc(var(--editor-card-h) * 0.16), 17px);
    --editor-overlay-offset: clamp(3px, calc(var(--editor-card-h) * 0.035), 5px);
  }

  .mat {
    align-content: center;
    gap: 7px;
    padding: 0 58px 0 8px;
  }

  .row { gap: 8px; }
  .field, .hand { gap: 6px; }

  .controls {
    right: 5px;
    top: var(--controls-top);
  }

  .turn {
    bottom: 4px;
    left: 8px;
  }

  .editor {
    grid-template-columns: 1fr;
    grid-template-rows: 24px 1fr 0.55fr;
    padding: 38px 58px 8px 8px;
  }

  .editor-stats { grid-column: 1; font-size: 14px; }
  .editor-pool, .editor-deck { gap: 5px; }

  .result-screen {
    padding: 16px;
  }

  .result-panel {
    max-width: calc(100vw - 86px);
    padding: 16px 18px 18px;
    width: 470px;
  }

  .result-kicker { font-size: clamp(14px, 4vw, 20px); }
  .result-panel h1 { font-size: clamp(52px, 15vw, 92px); margin: 8px 0 10px; }
  .result-panel p { font-size: clamp(16px, 4.5vw, 24px); }
  .result-stats { font-size: clamp(14px, 3.5vw, 20px); margin-bottom: 12px; }
  .result-panel button {
    font-size: clamp(26px, 7vw, 42px);
    height: clamp(54px, 13vw, 74px);
    padding: 0 clamp(22px, 6vw, 40px);
    width: auto;
  }
}