/* Shared CardBench visual language, loaded after the FFTCG component styles. */
:root {
  --ink: #edf1e8;
  --muted: #9ba69c;
  --bg: #0d1210;
  --panel: #151b18;
  --panel-2: #1c2420;
  --line: #344139;
  --gold: #d8a94a;
  --gold-soft: #f0d28d;
  --gold-bright: #f0d28d;
  --green: #64b486;
  --red: #df786f;
  --shadow: 0 18px 48px rgb(0 0 0 / 28%);
  font-family: Inter, "Noto Sans JP", "Yu Gothic UI", sans-serif;
}

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 14% -10%, rgb(63 102 77 / 34%), transparent 32rem),
    radial-gradient(circle at 90% 10%, rgb(111 82 39 / 18%), transparent 30rem),
    var(--bg);
}

body::before { display: none; }

.site-header {
  min-height: 72px;
  padding: 12px clamp(18px, 4vw, 64px);
  border-bottom-color: rgb(255 255 255 / 8%);
  background: rgb(13 18 16 / 88%);
}

.brand { gap: 11px; letter-spacing: .08em; }
.brand b { color: var(--ink); font-size: 17px; font-weight: 700; }
.brand small { color: var(--muted); letter-spacing: .2em; }
.brand::before {
  width: 40px;
  height: 40px;
  border: 1px solid var(--gold);
  border-radius: 50% 50% 46% 54%;
  clip-path: none;
  color: var(--gold-soft);
  background: transparent;
  font-family: Georgia, serif;
  font-size: 20px;
  transform: rotate(-5deg);
}

.room-code { color: var(--muted); border-color: var(--line); }
.room-code b { color: var(--gold-bright); }

main {
  width: min(1440px, calc(100% - 32px));
  min-height: calc(100vh - 132px);
  padding: 28px 0 48px;
}

footer {
  padding: 18px clamp(18px, 4vw, 64px);
  border-top-color: rgb(255 255 255 / 6%);
  color: #657168;
}

h1 { margin-bottom: 12px; font-size: clamp(34px, 6vw, 64px); line-height: 1; }
h2 { font-size: clamp(25px, 3vw, 36px); }
p { line-height: 1.75; }
.eyebrow { color: var(--gold); font-size: 11px; letter-spacing: .22em; }

.panel {
  border-color: var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, rgb(31 40 35 / 96%), rgb(20 27 24 / 96%));
  box-shadow: var(--shadow);
}

.btn {
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: #111612;
  background: var(--gold);
  box-shadow: none;
  font-size: 13px;
}
.btn-secondary { border-color: #48564d; color: var(--ink); background: #27322c; }
.btn-ghost { border-color: #3a463f; color: #b9c3ba; background: transparent; }
.btn-danger { border-color: #70423f; color: #ffd3cf; background: #3b2422; }

input, select, textarea {
  min-height: 40px;
  padding: 11px 12px;
  border-color: #3c4941;
  border-radius: 9px;
  background: #101613;
}
input:focus, select:focus, textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(216 169 74 / 12%); }

.hero { grid-template-columns: minmax(0, 1.15fr) minmax(520px, .85fr); gap: clamp(24px, 7vw, 90px); min-height: 68vh; margin-bottom: 70px; }
.entry-grid { gap: 12px; }
.entry-card { min-height: 330px; padding: 30px 24px 24px; }
.entry-card h2 { margin-bottom: 30px; }
.entry-number { color: rgb(216 169 74 / 14%); }

.notice { border-radius: 8px; }
.deck-totals span,
.card-search-result,
.deck-row,
.locked-banner,
.empty-zone,
.player-chip,
.selected-deck-ready,
.waiting-host,
.random-result,
.game-board,
.player-bar,
.play-zone,
.lb-summary,
.control-panel,
.phase-buttons button,
.button-grid button,
.card-menu,
.library-modal { border-radius: 9px; }

.game-card { border-radius: 10px; }
.icon-button { border-radius: 50%; }
.modal-backdrop { backdrop-filter: blur(7px); }

@media (max-width: 1120px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
}

@media (max-width: 760px) {
  main { width: min(100% - 22px, 1440px); padding-top: 24px; }
  .site-header { min-height: 64px; padding-inline: 12px; }
  .brand::before { width: 34px; height: 34px; }
  .hero { gap: 38px; margin-bottom: 65px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}