/* Opt-in basalt board. The two decorative layers animate opacity only;
   they never intercept input or alter card geometry, state or combat clocks. */
html[data-board-skin="magma"] {
  --page:#050608;
  --panel:#0d0f12;
  --panel-raised:#17181d;
  --ink:#f1e9e0;
  --muted:#bdb2a8;
  --faint:#a0958d;
  --line:rgba(215,173,133,.18);
  --magma-stone:url('./basalt.svg');
  --magma-cracks:url('./magma-cracks.svg');
  --magma-threads:url('./magma-threads.svg');
}
html[data-board-skin="magma"] body {
  background:radial-gradient(ellipse at 50% 0%,rgba(109,40,19,.065),transparent 65%),linear-gradient(rgba(3,4,6,.55),rgba(3,4,6,.55)),var(--magma-stone),#050608;
}
html[data-board-skin="magma"] .table,
html[data-board-skin="magma"] .privacy-screen {
  position:relative;
  background:var(--magma-stone),#0c0e12;
  border-color:#43332a;
  box-shadow:inset 0 0 0 4px rgba(0,0,0,.35),inset 0 0 0 5px rgba(235,159,90,.055),0 16px 40px rgba(0,0,0,.55);
}
html[data-board-skin="magma"] :is(.table,.privacy-screen)::before,
html[data-board-skin="magma"] :is(.table,.privacy-screen)::after {
  content:""; position:absolute; inset:1px; border-radius:inherit;
  pointer-events:none;
  background-position:0 0; background-size:640px 480px;
}
html[data-board-skin="magma"] :is(.table,.privacy-screen)::before {
  background-image:var(--magma-cracks);
  opacity:.5; animation:assedio-magma-embers 7s ease-in-out infinite alternate;
}
html[data-board-skin="magma"] :is(.table,.privacy-screen)::after {
  background-image:var(--magma-threads);
  opacity:.38; animation:assedio-magma-veins 11s -4s ease-in-out infinite alternate;
}
/* Keep content above fissures. Never transform or clip the board: the mobile
   action bar must keep its existing fixed position against the viewport. */
html[data-board-skin="magma"] .table > :is(.intro,.score-strip),
html[data-board-skin="magma"] .privacy-screen > * { position:relative; z-index:1; }
html[data-board-skin="magma"] .table::before,
html[data-board-skin="magma"] .table::after { z-index:0; }
html[data-board-skin="magma"] .battlefield { z-index:1; }
html[data-board-skin="magma"] .player-score,
html[data-board-skin="magma"] .castle,
html[data-board-skin="magma"] .phase-panel {
  background:linear-gradient(145deg,rgba(215,173,133,.015),transparent 75%),#0b0d10;
}
html[data-board-skin="magma"] .phase-panel { border-color:#49362a; }
html[data-board-skin="magma"] .phase-panel p,
html[data-board-skin="magma"] .privacy-screen > p { color:#d6c8bc; }
html[data-board-skin="magma"] .zone-label { color:#bcb0a3; }
html[data-board-skin="magma"] .modal,
html[data-board-skin="magma"] .sidebar { background:#0b0d11; border-color:#49382d; }
html[data-board-skin="magma"] .modal-head { background:rgba(224,135,72,.05); }
html[data-board-skin="magma"] .button:not(.primary):not(.danger):not(.ghost) { background:#17171c; border-color:#594131; color:var(--ink); }
html[data-board-skin="magma"] .button:not(.primary):not(.danger):not(.ghost):hover:not(:disabled) { background:#242127; }
html[data-board-skin="magma"] .button.ghost { color:#d3c5b9; }
html[data-board-skin="magma"] .combat-reference { color:#d4c6b8; }
html[data-board-skin="magma"] .combat-reference .reference-note { color:#bfb1a2; }
html[data-board-skin="magma"] .online-form input,
html[data-board-skin="magma"] #local-seed { background:#07090c; border-color:#594131; }
html[data-board-skin="magma"] .room-code { border-color:#a77b52; }
html[data-board-skin="magma"] .privacy-emblem { background:#0b0d11; box-shadow:0 0 30px rgba(222,93,35,.1); }
html[data-board-skin="magma"] .local-journal { background:rgba(6,8,11,.7); }
@keyframes assedio-magma-embers { from { opacity:.38; } to { opacity:.82; } }
@keyframes assedio-magma-veins { from { opacity:.22; } to { opacity:.62; } }
@media(max-width:680px) {
  html[data-board-skin="magma"] .phase-panel > .actions { background:linear-gradient(#101217,#07090c); border-color:#59402d; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-board-skin="magma"] :is(.table,.privacy-screen)::before,
  html[data-board-skin="magma"] :is(.table,.privacy-screen)::after { animation:none; opacity:.45; }
}