/* ══════════════════════════════════════════════════════════════
   MMSummonerMasterSim — THEME
   The look is taken from the cards themselves (see cardback/*.jpg and the
   card frames): crimson, antique gold, bone/ivory type on dark walnut, with
   engraved edges and serif display lettering. Everything below is a token —
   pages and game.css reference var(--…) and never raw hex, so the whole app
   can be re-skinned from this one file.
   ══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&family=Trirong:wght@500;600;700&family=Sarabun:wght@400;500;600&display=swap');

:root{
  /* Surfaces — dark walnut / oxblood, from deepest to raised */
  --bg:#150e0c;          /* page */
  --bg-2:#0d0807;        /* wells: log, inputs, card slots */
  --panel:#1c1310;       /* side panels */
  --surface:#2a1c17;     /* raised: bars, modals, buttons */
  --surface-2:#3a2720;   /* hover */

  /* Edges — aged leather & bronze */
  --border:#4a3025;
  --border-2:#68432c;

  /* Metal */
  --gold:#d9b45b;
  --gold-dim:#9a7c3a;
  --gold-deep:#6b5426;

  /* The house colour of the game */
  --crimson:#b4262c;
  --crimson-2:#d53a35;
  --crimson-deep:#7d1a1f;

  /* Type — bone / parchment */
  --text:#f0e3cd;
  --text-2:#d3bf9f;
  --muted:#a58d6e;
  --muted-2:#7a6449;
  --dim:#57432f;

  /* Semantics (kept readable, warmed to the palette) */
  --good:#7fb069;
  --good-2:#a7cf8e;
  --bad:#e0524a;
  --mana:#5aa9d6;
  --mystic:#a78bfa;      /* mystic cards keep their arcane violet */

  --font-display:'Cinzel','Trirong',Georgia,serif;
  --font-body:'Sarabun','Segoe UI',Tahoma,sans-serif;

  /* Engraved edge used on every panel: dark inner line + gold hairline */
  --engrave:inset 0 0 0 1px #0000005c, inset 0 1px 0 #d9b45b1f;
  --lift:0 2px 10px #00000073;

  /* Woven-parchment page texture — shared by body and full-page overlays */
  --page-weave:
    radial-gradient(ellipse at 50% 0%, #3a221a55 0%, transparent 60%),
    radial-gradient(ellipse at 50% 120%, #5e2a1e33 0%, transparent 55%),
    repeating-linear-gradient(45deg, #ffffff05 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, #00000012 0 1px, transparent 1px 5px);
}

/* ── Parchment-grain page ─────────────────────────────────────
   A woven texture + vignette, drawn with gradients (no image request). */
body{
  font-family:var(--font-body);
  background-color:var(--bg);
  background-image:var(--page-weave);
  background-attachment:fixed;
}

/* ── Display type ─────────────────────────────────────────── */
h1,h2,h3,.logo-main,#battle-phase-text,#turn-anim-text,#win-screen h1{
  font-family:var(--font-display);
  letter-spacing:.5px;
}

/* Gold-leaf heading, as on the card back */
.gilt{
  background:linear-gradient(180deg,#f6e3a4 0%,var(--gold) 45%,#a9822f 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  text-shadow:0 1px 0 #00000040;
}

/* ── Panels ───────────────────────────────────────────────── */
.panel,
#header,#controls,#side-panel,#right-panel,
#atk-panel,#deploy-modal,#fa-modal,#tip{
  box-shadow:var(--engrave);
}

/* ── Buttons: crimson enamel with a gold rim ──────────────── */
.btn{
  font-family:var(--font-body);
  border:1px solid var(--border-2);
  box-shadow:var(--engrave);
  letter-spacing:.3px;
  transition:filter .15s,transform .08s,box-shadow .15s;
}
.btn:hover:not(:disabled){filter:brightness(1.14);box-shadow:var(--engrave),0 0 10px #d9b45b33}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-red{background:linear-gradient(180deg,var(--crimson-2),var(--crimson-deep));color:#fff5e6;border-color:#8d2a26}
/* mystic actions keep their arcane violet — must NOT read as the attack button */
.btn-purple{background:linear-gradient(180deg,#8b5cf6,#5b21b6);color:#f3ecff;border-color:#7c4fd0}
.btn-green{background:linear-gradient(180deg,#6f9e5b,#3f5f34);color:#f4ffe9;border-color:#4d7440}
.btn-gray{background:linear-gradient(180deg,var(--surface-2),var(--surface));color:var(--text-2)}
.btn-yellow,.btn-gold{background:linear-gradient(180deg,var(--gold),#8a6a24);color:#2b1c08;border-color:var(--gold-dim);font-weight:700}
.btn-blue{background:linear-gradient(180deg,#4e91b8,#2c5c7c);color:#eaf6ff;border-color:#3c7295}

/* ── Cards on the field: gilt hover, not a blue glow ──────── */
.card{border-color:var(--border-2)}
.card:hover{border-color:var(--gold);box-shadow:0 0 12px #d9b45b55}
.card-lv{color:var(--gold)}

/* ── Lines (the battlefield rows) ─────────────────────────── */
.line{
  background:
    linear-gradient(180deg,#ffffff07,#00000024),
    repeating-linear-gradient(90deg,#ffffff05 0 1px,transparent 1px 26px);
  border:1px solid #4a302540;
  box-shadow:var(--engrave);
}
.line-at{border-left:3px solid var(--crimson)}
.line-df{border-left:3px solid var(--mana)}
.divider{background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold-dim),var(--gold-deep),transparent);height:2px}

/* ── Inputs ───────────────────────────────────────────────── */
input,select,textarea{font-family:var(--font-body)}
input:focus,select:focus{outline:none;border-color:var(--gold-dim)!important;box-shadow:0 0 0 2px #d9b45b22}

/* ── Scrollbars ───────────────────────────────────────────── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#00000033}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--border-2)}

/* ── Ornament: gold corner brackets for modals/boxes ──────── */
.ornate{position:relative}
.ornate::before,.ornate::after{
  content:'';position:absolute;width:14px;height:14px;pointer-events:none;
  border:2px solid var(--gold-dim);opacity:.8;
}
.ornate::before{top:6px;left:6px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.ornate::after{bottom:6px;right:6px;border-left:0;border-top:0;border-radius:0 0 3px 0}

/* Logo: soft relief (background-clipped text cannot take a text-shadow) */
.gilt-shadow{filter:drop-shadow(0 2px 5px #00000073)}