*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --gold:#B08D2D; --dark:#12121C; --dark2:#1e1e2a; --dark3:#2a2a38;
  --parchment:#F5F0E8; --parchment2:#e8e3db; --muted:#8a8a9a; --border:#B08D2D;
  --sq-light:#f0d9b5; --sq-dark:#b58863; --sq-water:#3a78b5; --sq-void:transparent;
}
body { font-family:'Crimson Text',Georgia,serif; background:var(--dark); color:var(--parchment); min-height:100vh; text-wrap:pretty; }
.screen { display:none; min-height:100vh; }
.screen.active { display:flex; flex-direction:column; }

@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
h1,h2,h3,h4 { font-family:'Cinzel',serif; }
.divider { width:60px; height:2px; background:var(--gold); margin:1rem auto;
  animation:dividerGlow 3s ease-in-out infinite alternate; }

@keyframes dividerGlow {
  from { box-shadow:0 0 4px rgba(176,141,45,0.3); }
  to   { box-shadow:0 0 12px rgba(176,141,45,0.6); width:80px; }
}

/* ── BUTTONS ── */
.btn { font-family:'Cinzel',serif; font-size:13px; letter-spacing:1.5px; padding:10px 24px;
  border:1px solid var(--border); background:transparent; color:var(--parchment);
  cursor:pointer; border-radius:4px; transition:background 0.2s ease, border-color 0.2s ease,
  transform 0.15s ease, box-shadow 0.2s ease; }
.btn:hover:not(:disabled) { background:rgba(176,141,45,0.15); border-color:var(--gold);
  transform:translateY(-1px); box-shadow:0 4px 12px rgba(176,141,45,0.15); }
.btn:active:not(:disabled) { transform:translateY(0) scale(0.97); }
.btn:disabled { opacity:0.35; cursor:not-allowed; }
.btn.primary { background:var(--dark2); border-color:var(--gold); }
.btn.primary:hover:not(:disabled) { background:var(--dark3);
  box-shadow:0 4px 20px rgba(176,141,45,0.25); }
.btn.sm { font-size:11px; padding:5px 12px; letter-spacing:1px; }
.btn.danger { border-color:#922; color:#e8a0a0; }
.btn.danger:hover { background:rgba(192,57,43,0.15); box-shadow:0 4px 12px rgba(192,57,43,0.15); }

/* ── HOME / LANDING ── */
#screen-home { padding:0; overflow-y:auto; overflow-x:hidden; scroll-behavior:smooth; }
#screen-home.active { display:block; opacity:1; animation:fadeIn 0.4s ease-out; }

.bg-canvas { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }

.landing { position:relative; z-index:1; }

/* Hero */
.landing__hero {
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:3rem 2rem; position:relative;
}
.landing__hero-inner {
  animation:frameAppear 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.landing__logo {
  width:320px; max-width:85%; height:auto; margin-bottom:1.5rem;
  filter:drop-shadow(0 0 24px rgba(176,141,45,0.4));
  animation:logoFloat 6s ease-in-out infinite;
}
.landing__tagline {
  font-size:clamp(14px, 2.5vw, 20px); color:var(--muted);
  font-style:italic; letter-spacing:3px; margin-bottom:2.5rem;
}
.landing__hero-ctas { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.landing__cta-play {
  font-size:16px; padding:16px 48px; letter-spacing:3px;
  box-shadow:0 0 24px rgba(176,141,45,0.3);
  animation:btnPulse 2.5s ease-in-out infinite;
}
.landing__cta-play:hover { animation:none; box-shadow:0 0 36px rgba(176,141,45,0.5); }
.landing__cta-learn {
  font-size:13px; padding:14px 32px; letter-spacing:2px;
  text-decoration:none; display:inline-block;
}
.landing__stage {
  margin-top:2rem; font-size:11px; color:var(--muted);
  font-family:'Cinzel',serif; letter-spacing:1.5px;
}
.piece-style-toggle {
  margin-top:1rem; display:flex; align-items:center; gap:0.5rem; justify-content:center;
}
.pst-label { font-size:11px; color:var(--muted); font-family:'Cinzel',serif; letter-spacing:1px; }
.pst-btn {
  font-size:11px; padding:4px 10px; border:1px solid rgba(176,141,45,0.4);
  background:transparent; color:var(--parchment); border-radius:4px; cursor:pointer;
  font-family:'Cinzel',serif; letter-spacing:0.5px; transition:all 0.2s;
}
.pst-btn:hover { border-color:var(--gold); color:var(--gold); }
.pst-btn.active { background:rgba(176,141,45,0.2); border-color:var(--gold); color:var(--gold); }
.piece-style-toggle--battle { flex-wrap:wrap; }
.landing__scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:24px; height:40px; border:2px solid rgba(176,141,45,0.3); border-radius:12px;
}
.landing__scroll-hint::after {
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; background:var(--gold); border-radius:2px;
  animation:scrollDot 2s ease-in-out infinite;
}

@keyframes logoFloat {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-6px); }
}
@keyframes frameAppear {
  from { opacity:0; transform:scale(0.96) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes btnPulse {
  0%,100% { box-shadow:0 0 20px rgba(176,141,45,0.3); }
  50%     { box-shadow:0 0 32px rgba(176,141,45,0.5); }
}
@keyframes scrollDot {
  0%,100% { opacity:1; transform:translateX(-50%) translateY(0); }
  50% { opacity:0.3; transform:translateX(-50%) translateY(12px); }
}

/* Sections */
.landing__section {
  padding:5rem 2rem; position:relative;
}
.landing__section--dark {
  background:rgba(0,0,0,0.3);
}
.landing__section--cta {
  padding:6rem 2rem; text-align:center;
  border-top:1px solid rgba(176,141,45,0.15);
}
.landing__section-inner {
  max-width:900px; margin:0 auto; text-align:center;
}
.landing__heading {
  font-size:clamp(22px, 4vw, 36px); color:var(--gold);
  letter-spacing:3px; font-weight:600;
}
.landing__rule {
  width:60px; height:2px; background:var(--gold); margin:1rem auto 2.5rem;
  box-shadow:0 0 8px rgba(176,141,45,0.4);
}

/* Concept */
.landing__concept-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:24px; text-align:left;
}
.landing__concept-card {
  background:rgba(30,30,42,0.6); border:1px solid rgba(176,141,45,0.15);
  border-radius:8px; padding:2rem 1.5rem;
  transition:border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.landing__concept-card:hover {
  border-color:var(--gold); transform:translateY(-4px);
  box-shadow:0 12px 32px rgba(0,0,0,0.4);
}
.landing__concept-card h3 {
  font-size:15px; color:var(--gold); letter-spacing:1.5px; margin-bottom:0.75rem;
}
.landing__concept-card p {
  font-size:15px; line-height:1.8; color:var(--parchment2);
}
.landing__concept-icon {
  width:40px; height:40px; margin-bottom:1rem; border-radius:4px;
  background:rgba(176,141,45,0.12); border:1px solid rgba(176,141,45,0.25);
  position:relative;
}
.landing__concept-icon::after {
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent;
  border-bottom:14px solid var(--gold);
}
.landing__concept-icon--map::after {
  border:none; width:18px; height:18px;
  background:linear-gradient(135deg, var(--gold) 25%, transparent 25%) -4px 0,
    linear-gradient(225deg, var(--gold) 25%, transparent 25%) -4px 0,
    linear-gradient(315deg, var(--gold) 25%, transparent 25%),
    linear-gradient(45deg, var(--gold) 25%, transparent 25%);
  background-size:9px 9px; opacity:0.7;
}
.landing__concept-icon--xp::after {
  border:none; width:20px; height:20px; border-radius:50%;
  border:2px solid var(--gold); background:transparent;
}

/* Species */
.landing__species-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:18px; text-align:center;
}
.landing__species-card {
  background:rgba(30,30,42,0.5); border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; padding:2rem 1.25rem;
  transition:border-color 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow 0.3s ease;
}
.landing__species-card:hover {
  transform:translateY(-6px) scale(1.02);
  box-shadow:0 16px 36px rgba(0,0,0,0.4);
}
.landing__species-card--human:hover { border-color:var(--gold); }
.landing__species-card--undead:hover { border-color:#7c3aed; }
.landing__species-card--redskin:hover { border-color:#c0392b; }
.landing__species-card--greenskin:hover { border-color:#16a34a; }
.landing__species-emoji {
  font-size:42px; margin-bottom:0.75rem;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.landing__species-card:hover .landing__species-emoji {
  transform:scale(1.25) rotate(-5deg);
}
.landing__species-card h3 {
  font-size:14px; color:var(--parchment); letter-spacing:1.5px; margin-bottom:0.4rem;
}
.landing__species-style {
  font-size:12px; color:var(--gold); font-style:italic; letter-spacing:1px;
  margin-bottom:0.75rem;
}
.landing__species-card p:last-child {
  font-size:13px; color:var(--muted); line-height:1.7;
}

/* Steps */
.landing__steps {
  display:flex; flex-wrap:wrap; justify-content:center; gap:0;
  counter-reset:step; position:relative;
}
.landing__step {
  flex:0 0 180px; text-align:center; padding:1.5rem 1rem; position:relative;
}
.landing__step-num {
  font-family:'Cinzel',serif; font-size:28px; font-weight:700;
  color:var(--gold); margin-bottom:0.75rem;
  text-shadow:0 0 12px rgba(176,141,45,0.3);
}
.landing__step h3 {
  font-size:12px; letter-spacing:2px; color:var(--parchment);
  margin-bottom:0.5rem;
}
.landing__step p {
  font-size:13px; line-height:1.7; color:var(--muted);
}

/* Features */
.landing__features-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:20px; text-align:left;
}
.landing__feature {
  padding:1.5rem; border-left:2px solid rgba(176,141,45,0.3);
  transition:border-color 0.3s ease;
}
.landing__feature:hover { border-color:var(--gold); }
.landing__feature h3 {
  font-size:13px; color:var(--gold); letter-spacing:1.5px; margin-bottom:0.5rem;
}
.landing__feature p {
  font-size:14px; line-height:1.8; color:var(--parchment2);
}

/* Final CTA */
.landing__cta-logo {
  width:180px; max-width:60%; height:auto; margin-bottom:1.5rem;
  filter:drop-shadow(0 0 16px rgba(176,141,45,0.3));
}
.landing__cta-sub {
  font-size:16px; color:var(--muted); font-style:italic;
  margin-bottom:2rem; letter-spacing:1px;
}
.landing__cta-final {
  font-size:16px; padding:16px 56px; letter-spacing:3px;
  animation:btnPulse 2.5s ease-in-out infinite;
}
.landing__cta-final:hover { animation:none; box-shadow:0 0 36px rgba(176,141,45,0.5); }
.landing__powered-by {
  font-size:13px; color:var(--muted); margin-top:2.5rem; letter-spacing:0.5px;
}
.landing__powered-by a {
  color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(176,141,45,0.3);
  transition:border-color 0.3s ease;
}
.landing__powered-by a:hover { border-color:var(--gold); }
.landing__footer-link {
  display:block; margin-top:1.5rem;
  opacity:0.5; transition:opacity 0.3s ease;
}
.landing__footer-link:hover { opacity:0.9; }
.landing__footer-logo {
  height:32px; width:auto;
  filter:drop-shadow(0 0 8px rgba(176,141,45,0.2));
}

/* END screen (kept from before) */
.stone-frame { border:3px solid rgba(176,141,45,0.3); border-radius:4px; padding:3rem 2.5rem;
  background:rgba(10,10,18,0.88); box-shadow:0 0 60px rgba(0,0,0,0.8),inset 0 0 40px rgba(0,0,0,0.5);
  max-width:480px; width:100%; position:relative;
  animation:frameAppear 0.8s cubic-bezier(0.16,1,0.3,1) both; }
.stone-frame--end { padding:2.5rem 2rem; background:rgba(10,10,18,0.9); max-width:440px; }
.torch-corner { position:absolute; width:24px; height:24px;
  background:radial-gradient(circle,#B08D2D,#8a6a1a 60%,transparent);
  border-radius:50%; box-shadow:0 0 20px 8px rgba(176,141,45,0.4);
  animation:torchPulse 3s ease-in-out infinite alternate; }
.torch-corner--tl { top:-12px; left:-12px; animation-delay:0s; }
.torch-corner--tr { top:-12px; right:-12px; animation-delay:0.7s; }
.torch-corner--bl { bottom:-12px; left:-12px; animation-delay:1.4s; }
.torch-corner--br { bottom:-12px; right:-12px; animation-delay:2.1s; }
@keyframes torchPulse {
  from { box-shadow:0 0 20px 8px rgba(176,141,45,0.4); }
  to   { box-shadow:0 0 28px 12px rgba(176,141,45,0.6); }
}
.home-wrapper { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:100vh; padding:2rem; text-align:center; }
.btn-play { font-size:15px; padding:14px 40px; letter-spacing:2px;
  box-shadow:0 0 20px rgba(176,141,45,0.3);
  background:rgba(30,30,42,0.9); border-color:var(--gold); }
.btn-play:hover { box-shadow:0 0 30px rgba(176,141,45,0.5); }
.btn-play-again { font-size:14px; padding:12px 36px; letter-spacing:2px; width:100%;
  box-shadow:0 0 20px rgba(176,141,45,0.3);
  animation:btnPulse 2.5s ease-in-out infinite 1s; }
.btn-play-again:hover { animation:none; }
.version-tag { margin-top:1.5rem; font-size:11px; color:var(--muted); font-family:'Cinzel',serif; letter-spacing:1px; }

/* Landing responsive */
@media(max-width:600px) {
  .landing__hero { padding:2rem 1.25rem; }
  .landing__cta-play { font-size:14px; padding:14px 36px; }
  .landing__section-inner { padding:0 0.5rem; }
  .landing__concept-grid { grid-template-columns:1fr; }
  .landing__species-grid { grid-template-columns:1fr 1fr; }
  .landing__species-card { padding:1.25rem 0.75rem; }
  .landing__steps { flex-direction:column; align-items:center; }
  .landing__step { flex:unset; width:100%; max-width:280px; }
  .landing__features-grid { grid-template-columns:1fr; }
  .landing__heading { font-size:18px; letter-spacing:2px; }
}
@media(max-width:400px) {
  .landing__species-grid { grid-template-columns:1fr; }
  .landing__hero-ctas { flex-direction:column; align-items:center; }
  .player-grid { grid-template-columns:1fr; }
}

/* ── SHARED SCREEN WRAPPER ── */
.screen-inner { max-width:900px; width:100%; margin:0 auto; padding:2.5rem 1.5rem; }
.screen-inner--narrow { max-width:560px; }
.screen-inner--species { max-width:920px; }
.screen-inner--draft { max-width:940px; }
.screen-header { text-align:center; margin-bottom:2rem; }
.screen-header h2 { font-size:26px; color:var(--gold); letter-spacing:3px; }
.screen-header p { color:var(--muted); font-style:italic; margin-top:6px; }
.back-row { margin-bottom:1.5rem; }

/* ── MAP ── */
.map-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; }
.player-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:1rem; }
.map-card { border:1px solid var(--border); border-radius:8px; padding:1.25rem;
  background:rgba(30,30,42,0.6); cursor:pointer; text-align:center;
  transition:border-color 0.25s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1),
  box-shadow 0.25s ease, background 0.25s ease; }
.map-card:hover { border-color:var(--gold); transform:translateY(-4px);
  box-shadow:0 8px 24px rgba(176,141,45,0.12); background:rgba(30,30,42,0.8); }
.map-card:active { transform:translateY(-1px) scale(0.98); }
.map-card .mc-icon { font-size:32px; margin-bottom:8px; transition:transform 0.3s ease; }
.map-card:hover .mc-icon { transform:scale(1.15); }
.map-card h3 { font-size:13px; color:var(--gold); letter-spacing:1px; margin-bottom:5px; }
.map-card p { font-size:13px; color:var(--muted); line-height:1.5; margin-bottom:10px; }
.map-card-preview { line-height:0; border:1px solid rgba(176,141,45,0.2); border-radius:3px; display:inline-block; overflow:hidden; }

/* ── SPECIES ── */
.species-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(185px,1fr)); gap:14px; }
.species-card { border:1px solid color-mix(in srgb, var(--sp-accent, transparent) 25%, transparent); border-radius:8px; padding:1.25rem;
  background:rgba(30,30,42,0.5); cursor:pointer;
  transition:border-color 0.25s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
  box-shadow 0.3s ease, background 0.25s ease; }
.species-card:hover { transform:translateY(-5px) scale(1.02); border-color:var(--sp-accent);
  box-shadow:0 12px 28px rgba(0,0,0,0.3); background:color-mix(in srgb, var(--sp-accent) 10%, rgba(30,30,42,0.75)); }
.species-card:active { transform:translateY(-1px) scale(0.98); }
.sp-label { color:var(--sp-accent, var(--gold)); }
.unit-row-actions { display:flex; align-items:center; gap:7px; }
.unit-cost { color:var(--sp-accent, var(--gold)); }
.draft-empty { color:var(--muted); font-style:italic; font-size:13px; padding:6px 0; }
.turn-panel--player { border-color:#16a34a; }
.turn-panel--enemy { border-color:#dc2626; }
.t-label--player { color:#16a34a; }
.t-label--enemy { color:#dc2626; }
.t-label--check { color:#f59e0b; }
.sp-emoji { font-size:36px; margin-bottom:8px; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
.species-card:hover .sp-emoji { transform:scale(1.2) rotate(-5deg); }
.sp-desc { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:10px; }
.sp-roster { border-top:1px solid rgba(255,255,255,0.07); padding-top:8px; }
.sp-unit { font-size:12px; color:var(--muted); margin-bottom:2px; }

/* ── DRAFT ── */
.draft-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.draft-panel { background:rgba(30,30,42,0.6); border:1px solid var(--border); border-radius:8px; padding:1.1rem; }
.draft-panel h3 { font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:.9rem; }
.unit-row { display:flex; justify-content:space-between; align-items:center;
  padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05);
  transition:background 0.2s ease, padding-left 0.2s ease; border-radius:4px; }
.unit-row:hover { background:rgba(176,141,45,0.06); padding-left:4px; }
.unit-row:last-child { border-bottom:none; }
.unit-name { font-size:14px; }
.unit-tag { font-size:11px; color:var(--muted); margin-left:4px; }
.unit-cost { font-family:'Cinzel',serif; font-size:12px; margin-right:6px; }
.xp-row { display:flex; align-items:baseline; gap:10px; justify-content:center; margin-bottom:1.25rem; }
.xp-num { font-family:'Cinzel',serif; font-size:40px; font-weight:700; }
.xp-num.ok { color:#27ae60; } .xp-num.low { color:#dc2626; }
.xp-lbl { font-size:14px; color:var(--muted); }
.draft-warn { font-size:12px; color:#dc2626; margin-top:5px; font-style:italic; }
.draft-sub { color:var(--muted); font-style:italic; margin-top:6px; }
.ai-box { background:rgba(0,0,0,0.2); border:1px solid rgba(255,255,255,0.06);
  border-radius:8px; padding:.9rem; margin-top:10px; }
.ai-box h3 { font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:6px; }
.ai-line { font-size:13px; color:var(--muted); margin-bottom:2px; }
.ai-prev-extra { display:none; margin-top:8px; border-top:1px solid rgba(255,255,255,0.07); padding-top:8px; }
.ai-prev-extra h3 { font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:4px; }
.btn-begin { width:100%; margin-top:12px; padding:11px; letter-spacing:2px; }
.btn-confirm { padding:11px; letter-spacing:2px; width:100%; }

/* ── BATTLE ── */
#screen-battle { flex-direction:row !important; align-items:flex-start;
  padding:1rem; gap:12px; flex-wrap:wrap; overflow-x:auto; }
.b-left, .b-right { display:flex; flex-direction:column; gap:8px; flex:0 0 148px; min-width:148px; max-width:148px; }
.b-centre { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px; }
.info-panel { background:rgba(30,30,42,0.75); border:1px solid var(--border); border-radius:8px; padding:.8rem;
  transition:border-color 0.3s ease, box-shadow 0.3s ease; }
.info-panel h4 { font-size:10px; letter-spacing:2px; color:var(--muted); margin-bottom:7px; }
.turn-panel { border-width:2px; text-align:center; transition:border-color 0.4s ease, box-shadow 0.4s ease; }
.t-emoji { font-size:24px; margin-bottom:3px; transition:transform 0.3s ease; }
.t-label { font-family:'Cinzel',serif; font-size:11px; letter-spacing:1px; transition:color 0.3s ease; }
.stat { font-size:13px; color:var(--parchment2); margin-bottom:3px; }
.stat-s { font-size:12px; color:var(--muted); margin-bottom:2px; }
.h-scroll { max-height:160px; overflow-y:auto; font-size:12px; color:var(--muted); }
.h-scroll::-webkit-scrollbar { width:3px; }
.h-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }
.h-entry { padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.04); line-height:1.4;
  animation:slideInLeft 0.25s ease-out; }

@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-8px); }
  to   { opacity:1; transform:translateX(0); }
}
.sel-name { font-size:15px; margin-bottom:2px; }
.sel-meta { font-size:12px; color:var(--muted); }
.sel-meta--moves { margin-top:4px; color:#16a34a; }
.sel-meta--attacks { color:#dc2626; }

/* ── BOARD WRAP ── */
.board-wrap { position:relative; display:inline-block; border:2px solid var(--border); border-radius:8px;
  transition:box-shadow 0.4s ease; }
#board-wrap { box-shadow:0 8px 32px rgba(0,0,0,0.8); background:#0a0a12; }
#mce-board-area { position:absolute; pointer-events:all; z-index:1; }
#mce-board-area svg { display:block; overflow:visible; touch-action:manipulation; }
.board-canvas { display:block; }
.board-svg { position:absolute; top:0; left:0; pointer-events:all; overflow:visible; touch-action:manipulation; }
.board-lights { position:absolute; top:0; left:0; pointer-events:none; mix-blend-mode:screen; z-index:2; }

/* ── BATTLE PANELS ── */
.info-panel--selected { border-color:var(--gold); min-height:85px; }
.info-panel--log { flex:1; }
.sel-info { color:var(--muted); font-style:italic; font-size:13px; }
.legend-swatch { margin-top:0; }

/* ── SVG BOARD ── */
#dungeon-board { display:block; }

/* Square interaction states */
.sq { cursor:pointer; }
.sq:hover .sq-bg { filter:brightness(1.2); }
.sq.selected .sq-bg { filter:brightness(1.4); }
.sq-bg { transition:filter 0.15s ease-out, fill 0.2s ease; }

/* Piece animation */
.piece-anim { will-change:transform; }
.piece-anim use { filter:drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }

/* Coordinate labels */
.coord { font-family:'Cinzel',serif; font-size:9px; fill:#8a8a9a; pointer-events:none; user-select:none; }

/* ── END ── */
#screen-end { align-items:center; justify-content:center; text-align:center; padding:3rem 2rem; }
.end-icon { font-size:64px; margin-bottom:1rem; filter:drop-shadow(0 0 16px currentColor);
  animation:endIconDrop 0.6s cubic-bezier(0.34,1.56,0.64,1) both 0.3s; }
.end-title { font-size:42px; font-weight:700; letter-spacing:4px; margin-bottom:.5rem;
  text-shadow:0 0 20px rgba(176,141,45,0.4);
  animation:fadeIn 0.5s ease-out both 0.5s; }

@keyframes endIconDrop {
  from { opacity:0; transform:scale(0.5) translateY(-20px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.end-victory .end-icon { animation:endIconDrop 0.6s cubic-bezier(0.34,1.56,0.64,1) both 0.3s,
  victoryPulse 3s ease-in-out infinite 1s; }
.end-defeat .end-icon { filter:drop-shadow(0 0 16px #dc2626); }
@keyframes victoryPulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.08); }
}
.end-victory .end-title { color:#B08D2D; }
.end-defeat .end-title { color:#dc2626; }
.end-sub { font-size:18px; font-style:italic; color:var(--muted); margin:1rem 0; }
.end-stats { display:flex; gap:14px; margin-bottom:1.5rem; flex-wrap:wrap; justify-content:center; }
.end-stat { background:rgba(30,30,42,0.7); border:1px solid var(--border); border-radius:8px;
  padding:.7rem 1.2rem; min-width:85px; }
.end-val { font-family:'Cinzel',serif; font-size:24px; font-weight:600; }
.end-val--text { font-size:14px; }
.end-lbl { font-size:11px; color:var(--muted); margin-top:2px; }
.end-pieces { margin-bottom:1.5rem; font-size:12px; color:var(--muted); line-height:1.8; }
.end-pieces-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:4px; }
.end-piece-tag { background:rgba(30,30,42,0.6); border:1px solid rgba(255,255,255,0.08);
  border-radius:4px; padding:2px 8px; font-size:11px; }
.end-piece-tag--alive { border-color:rgba(39,174,96,0.3); color:#27ae60;
  animation:pieceGlow 2s ease-in-out infinite alternate;
  animation-delay:calc(var(--i,0) * 0.1s); }
.end-piece-tag--dead { border-color:rgba(220,38,38,0.2); color:#dc2626;
  animation:pieceFade 0.8s ease-out both;
  animation-delay:calc(var(--i,0) * 0.08s); }

@keyframes pieceGlow {
  from { box-shadow:0 0 0 rgba(39,174,96,0); }
  to   { box-shadow:0 0 6px rgba(39,174,96,0.4); }
}
@keyframes pieceFade {
  from { opacity:1; transform:translateY(0); }
  to   { opacity:0.5; transform:translateY(2px); }
}
.end-btn-row { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.end-btn-row .btn { flex:1; min-width:120px; }
.btn-rematch { font-size:12px; padding:10px 16px; letter-spacing:1.5px; }
.btn-undo { margin-top:6px; width:100%; font-size:10px; padding:4px 8px; }


/* ── PLACEMENT ── */
#screen-place { flex-direction:row !important; align-items:flex-start; padding:1rem; gap:12px; }
.place-tray {
  background:rgba(30,30,42,0.7); border:1px solid var(--border); border-radius:8px;
  padding:1rem; min-width:160px; flex:0 0 160px;
}
.place-btn-row { display:flex; gap:6px; flex-wrap:wrap; }
.place-btn-row .btn { flex:1; }
.place-header { text-align:center; margin-bottom:4px; }
.place-header h2 { font-size:18px; color:var(--gold); letter-spacing:2px; }
.place-sub { font-size:12px; color:var(--muted); font-style:italic; margin-top:2px; }
.tray-list { margin-top:4px; }
.place-team-list { font-size:12px; color:var(--muted); margin-top:4px; max-height:180px; overflow-y:auto; }
.place-ai-list { font-size:12px; color:var(--muted); max-height:180px; overflow-y:auto; }
.place-panel-label { font-family:'Cinzel',serif; font-size:10px; letter-spacing:1.5px; color:var(--gold); margin:6px 0 3px; }
.place-panel-unit { padding:2px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.place-panel-unit span { color:var(--muted); opacity:0.7; }
.place-tray h3 { font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:10px; }
.tray-piece {
  display:flex; align-items:center; gap:10px; padding:8px 10px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:6px; cursor:pointer;
  background:rgba(30,30,42,0.5); font-size:14px;
  transition:border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, opacity 0.3s ease;
}
.tray-piece:hover { border-color:var(--gold); background:rgba(176,141,45,0.12); transform:translateX(3px); }
.tray-piece.selected { border-color:#c9a83e; background:rgba(201,168,62,0.18);
  box-shadow:0 0 12px rgba(201,168,62,0.2); }
.tray-piece.placed { opacity:0.35; cursor:default; pointer-events:none; transform:none; }
.tray-piece-name { font-size:13px; color:var(--parchment); }
.tray-piece-type { font-size:11px; color:var(--muted); }
.tray-piece-info { flex:1; }
.tray-piece-status { font-size:11px; color:var(--muted); }
.tray-piece-status--placed { color:#27ae60; }
.place-centre { display:flex; flex-direction:column; align-items:center; gap:12px; }
.place-hint {
  font-family:'Crimson Text',serif; font-size:13px; color:var(--muted);
  font-style:italic; text-align:center; max-width:420px; line-height:1.6;
}
.place-hint span { color:var(--gold); font-style:normal; }
.place-actions { display:flex; gap:10px; margin-top:4px; }

@keyframes flicker-a {
  0%,100% { opacity:0.88; }
  18%     { opacity:0.72; }
  35%     { opacity:0.82; }
  52%     { opacity:0.62; }
  74%     { opacity:0.80; }
}
@keyframes flicker-b {
  0%,100% { opacity:0.78; }
  28%     { opacity:0.90; }
  50%     { opacity:0.65; }
  72%     { opacity:0.85; }
}
@keyframes flicker-c {
  0%,100% { opacity:0.72; }
  22%     { opacity:0.88; }
  48%     { opacity:0.62; }
  68%     { opacity:0.82; }
  88%     { opacity:0.58; }
}
@keyframes glow-pulse-a {
  0%,100% { opacity:0.45; }
  35%     { opacity:0.22; }
  65%     { opacity:0.50; }
}
@keyframes glow-pulse-b {
  0%,100% { opacity:0.35; }
  42%     { opacity:0.52; }
  72%     { opacity:0.20; }
}
@keyframes glow-pulse-c {
  0%,100% { opacity:0.50; }
  28%     { opacity:0.28; }
  55%     { opacity:0.55; }
  82%     { opacity:0.22; }
}
/* Delays and durations set inline per element via JS for randomisation */
.flicker-a { animation: flicker-a 5.5s ease-in-out infinite; }
.flicker-b { animation: flicker-b 6.8s ease-in-out infinite; }
.flicker-c { animation: flicker-c 4.9s ease-in-out infinite; }
.glow-a    { animation: glow-pulse-a 5.5s ease-in-out infinite; }
.glow-b    { animation: glow-pulse-b 6.8s ease-in-out infinite; }
.glow-c    { animation: glow-pulse-c 4.9s ease-in-out infinite; }

@media(max-width:960px) {
  #screen-place { flex-wrap:wrap; }
  #screen-place .b-left { flex:0 0 100%; order:2; flex-direction:row; flex-wrap:wrap; }
  #screen-place .b-centre { flex:1 1 100%; order:1; }
  #screen-place .b-right { flex:0 0 100%; order:3; flex-direction:row; flex-wrap:wrap; }
  #screen-place .b-left .info-panel,
  #screen-place .b-right .info-panel { flex:1; min-width:140px; }
}
@media(max-width:660px) {
  #screen-battle { flex-direction:column !important; }
  .draft-layout { grid-template-columns:1fr; }
  .b-left,.b-right { flex-direction:row; flex-wrap:wrap; flex:unset; width:100%; min-width:unset; max-width:unset; }
  .b-left { order:2; } .b-centre { order:1; } .b-right { order:3; }
  .info-panel { flex:1; min-width:120px; }
  .board-wrap { width:100%; }
  .board-wrap .board-svg,
  .board-wrap .board-canvas,
  .board-wrap .board-lights { width:100% !important; height:auto !important; }
  #screen-place { flex-direction:column !important; padding:0.75rem; }
  #screen-place .b-left,
  #screen-place .b-right { flex:unset; width:100%; min-width:unset; max-width:unset; }
  .place-header h2 { font-size:15px; }
  .screen-inner { padding:1.5rem 1rem; }
  .screen-header h2 { font-size:20px; letter-spacing:2px; }
  .xp-num { font-size:32px; }
  .end-title { font-size:28px; }
  .stone-frame--end { padding:1.5rem 1.25rem; }
}

/* ── TURN ORDER ── */
.turn-order-panel { padding:8px 12px; }
.turn-order-panel h4 { font-size:10px; letter-spacing:1.5px; color:var(--muted); margin-bottom:6px; }
.turn-order-opts { display:flex; flex-direction:column; gap:4px; }
.turn-opt { font-size:12px; color:var(--parchment); cursor:pointer; display:flex; align-items:center; gap:4px; }
.turn-opt input[type="radio"] { accent-color:var(--gold); }

/* ── REPLAY ── */
#screen-replay { padding:1rem; }
.replay-layout { display:flex; gap:16px; width:100%; max-width:1100px; margin:0 auto;
  align-items:flex-start; min-height:calc(100vh - 2rem); }
.replay-board { flex:1; position:relative; min-width:0; }
.replay-board .dungeon-board { width:100%; height:auto; display:block; }
#replay-board-area { position:relative; z-index:1; }
#replay-board-area svg { width:100%; height:auto; display:block; }
.bg-canvas-replay { position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0; border-radius:8px; }
.replay-sidebar { width:240px; flex-shrink:0; background:rgba(30,30,42,0.7);
  border:1px solid var(--border); border-radius:8px; padding:12px; display:flex;
  flex-direction:column; gap:10px; max-height:calc(100vh - 2rem); }
.replay-title { font-size:12px; letter-spacing:2px; color:var(--gold); text-align:center; }
.replay-controls { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.rp-play-btn { font-size:16px !important; padding:8px 14px !important; }
.rp-counter { font-size:11px; color:var(--muted); text-align:center; font-family:'Cinzel',serif; }
.replay-log { flex:1; overflow-y:auto; font-size:11px; color:var(--muted); line-height:1.6; }
.rp-entry { padding:3px 6px; border-radius:3px; cursor:pointer;
  transition:background 0.15s; }
.rp-entry:hover { background:rgba(176,141,45,0.1); }
.rp-entry.rp-active { background:rgba(176,141,45,0.2); color:var(--parchment);
  border-left:2px solid var(--gold); }
.btn-replay { margin-top:12px; }

@media(max-width:700px) {
  .replay-layout { flex-direction:column; }
  .replay-sidebar { width:100%; max-height:200px; }
}

/* ── ACCESSIBILITY: Keyboard cursor ── */
@keyframes kb-cursor-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.5; }
}
.kb-cursor {
  animation: kb-cursor-pulse 1.2s ease-in-out infinite;
}

/* ── ACCESSIBILITY: Screen reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── ACCESSIBILITY: Unit tooltip ── */
.unit-tooltip {
  position: absolute;
  z-index: 100;
  background: rgba(18, 18, 28, 0.95);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 8px 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  font-size: 13px;
  max-width: 200px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
.unit-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.tt-name {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 2px;
}
.tt-meta {
  color: var(--muted);
  font-size: 12px;
}
.tt-cost {
  color: var(--parchment);
  font-size: 12px;
  margin-top: 2px;
}
.tt-abilities {
  color: #16a34a;
  font-size: 11px;
  margin-top: 4px;
  font-style: italic;
}
.tt-owner {
  color: var(--muted);
  font-size: 11px;
  margin-top: 3px;
  border-top: 1px solid rgba(176, 141, 45, 0.2);
  padding-top: 3px;
}

/* ── ACCESSIBILITY: Focus visible for buttons/panels ── */
.info-panel:focus, .btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.btn-hex { margin-top:6px; border-color:#7c3aed; color:#c4b5fd; }
.btn-hex:hover { background:rgba(124,58,237,0.2); box-shadow:0 0 12px rgba(124,58,237,0.3); }
.site-version { position:fixed; bottom:8px; right:12px; font-size:11px; color:var(--parchment); opacity:0.7; pointer-events:none; z-index:9999; }

/* ── RULES SCREEN ── */
#screen-rules.active { display:block; overflow-y:auto; }
.rules-screen { max-width:760px; padding-bottom:4rem; }

.rules-section {
  margin-bottom:2.5rem;
  padding-bottom:2rem;
  border-bottom:1px solid rgba(176,141,45,0.15);
}
.rules-section:last-of-type { border-bottom:none; }

.rules-heading {
  font-size:18px;
  color:var(--gold);
  letter-spacing:2px;
  margin-bottom:1rem;
}

.rules-text {
  font-size:15px;
  line-height:1.8;
  color:var(--parchment2);
}
.rules-note {
  margin-top:0.75rem;
  font-size:13px;
  color:var(--muted);
  font-style:italic;
}

.rules-list {
  list-style:none;
  padding:0;
}
.rules-list li {
  font-size:14px;
  line-height:1.8;
  color:var(--parchment2);
  padding:0.25rem 0 0.25rem 1.25rem;
  position:relative;
}
.rules-list li::before {
  content:'';
  position:absolute;
  left:0;
  top:0.65em;
  width:6px;
  height:6px;
  background:var(--gold);
  border-radius:1px;
  transform:rotate(45deg);
}

/* Terrain cards */
.rules-terrain-grid {
  display:flex;
  flex-direction:column;
  gap:12px;
}
.rules-terrain-card {
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:0.75rem 1rem;
  background:rgba(30,30,42,0.5);
  border:1px solid rgba(176,141,45,0.1);
  border-radius:6px;
}
.rules-terrain-card h4 {
  font-size:13px;
  color:var(--parchment);
  letter-spacing:1px;
  margin-bottom:0.25rem;
}
.rules-terrain-card p {
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
}
.rules-terrain-swatch {
  flex-shrink:0;
  width:32px;
  height:32px;
  border-radius:4px;
  border:1px solid rgba(255,255,255,0.1);
}
.rules-terrain-swatch--floor { background:#4a3728; }
.rules-terrain-swatch--water { background:var(--sq-water); }
.rules-terrain-swatch--void { background:#0a0a12; border-style:dashed; }

/* Unit reference table */
.rules-faction-group {
  margin-bottom:1.5rem;
}
.rules-faction-title {
  font-size:14px;
  letter-spacing:1.5px;
  margin-bottom:0.75rem;
  padding-bottom:0.5rem;
  border-bottom:1px solid rgba(176,141,45,0.2);
}
.rules-faction-title--human { color:#B08D2D; }
.rules-faction-title--undead { color:#7c3aed; }
.rules-faction-title--redskin { color:#c0392b; }
.rules-faction-title--greenskin { color:#16a34a; }

.rules-unit-table {
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}
.rules-unit-table th {
  text-align:left;
  font-family:'Cinzel',serif;
  font-size:11px;
  letter-spacing:1px;
  color:var(--muted);
  padding:0.4rem 0.6rem;
  border-bottom:1px solid rgba(176,141,45,0.2);
}
.rules-unit-table td {
  padding:0.4rem 0.6rem;
  color:var(--parchment2);
  border-bottom:1px solid rgba(255,255,255,0.04);
  vertical-align:top;
}
.rules-unit-table tr:last-child td { border-bottom:none; }
.rules-unit-table .rules-unit-name {
  color:var(--parchment);
  font-weight:600;
  white-space:nowrap;
}
.rules-unit-table .rules-unit-cost {
  color:var(--gold);
  white-space:nowrap;
}
.rules-unit-table .rules-unit-ability {
  color:var(--muted);
  font-style:italic;
  font-size:12px;
}

/* Rules footer */
.rules-footer {
  text-align:center;
  padding-top:1.5rem;
}
.rules-footer p {
  font-size:13px;
  color:var(--muted);
}
.rules-footer a {
  color:var(--gold);
  text-decoration:none;
  border-bottom:1px solid rgba(176,141,45,0.3);
  transition:border-color 0.3s ease;
}
.rules-footer a:hover { border-color:var(--gold); }

/* Rules button on landing */
.landing__cta-rules {
  font-size:13px;
  padding:14px 32px;
  letter-spacing:2px;
}

/* Rules responsive */
@media(max-width:600px) {
  .rules-screen { padding-left:1rem; padding-right:1rem; }
  .rules-unit-table { font-size:12px; }
  .rules-unit-table th,
  .rules-unit-table td { padding:0.3rem 0.4rem; }
  .rules-terrain-card { padding:0.5rem 0.75rem; }
}