:root {
  --bg: #1b1d23;
  --panel: #24262e;
  --border: #3a3d47;
  --text: #e8e8ec;
  --muted: #9a9ca6;
  --accent: #6ee7d4;

  --fire: #e53935;
  --ice: #2196f3;
  --earth: #6d4c41;
  --wood: #388e3c;
  --stone: #fdd835;
  --metal: #111111;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  position: relative;
}

/* The tiled background image lives on its own fixed layer, blurred and
   darkened, so it reads as texture rather than competing with the real
   content for attention. Extends past the viewport on all sides so the
   blur doesn't fade to transparent at the screen edges. */
body::before {
  content: "";
  position: fixed;
  inset: -40px;
  background: url("../background.png") repeat;
  filter: blur(2px) brightness(0.55);
  z-index: -1;
}

header {
  padding: 16px 100px 8px;
  text-align: center;
}

header h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.version {
  text-align: center;
  padding: 40px 0 20px;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.03em;
}

.banner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  margin: 12px 24px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.75rem;
}

.banner-container:empty::before {
  content: attr(id);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
}

.game-actions {
  width: 100%;
  max-width: 320px;
}

.app {
  display: flex;
  gap: 20px;
  padding: 16px 24px 32px;
  align-items: flex-start;
}

.palette {
  flex: 0 0 260px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
}

.palette h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}

.palette h2:not(:first-child) {
  margin-top: 20px;
}

.tokens {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  justify-items: center;
}

.token {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 78px;
  aspect-ratio: 2 / 1.7320508;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  cursor: grab;
  font-size: 1.3rem;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}

.token:active { cursor: grabbing; }

.token-count {
  position: absolute;
  bottom: 14%;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.6rem;
  font-family: system-ui, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.token.token-full {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(60%);
}

.token.fire { background: var(--fire); }
.token.ice { background: var(--ice); }
.token.earth { background: var(--earth); }
.token.wood { background: var(--wood); }
.token.stone { background: var(--stone); color: #2b2b2b; }
.token.metal { background: var(--metal); }

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  align-items: center;
}

.controls button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #2f323c;
  color: var(--text);
  cursor: pointer;
  font-size: 0.85rem;
}

.controls button:hover { background: #3a3d47; }

.drag-tooltip {
  position: fixed;
  z-index: 1100;
  pointer-events: none;
  background: #3a1414;
  border: 1px solid #7a2e2e;
  color: #ffd7d7;
  font-size: 0.78rem;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: normal;
  max-width: min(260px, calc(100vw - 16px));
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  display: none;
}

.drag-tooltip-banner {
  top: 12px !important;
  left: 50% !important;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  font-size: 0.85rem;
  padding: 8px 14px;
}

/* Sidebar showing just the current turn's log entries — shown on the Board
   and NPC Cards tabs only (see updateCurrentTurnLogPlacement() in game.js,
   which re-parents this single element between those two tabs' layouts;
   it's simply absent — and so invisible — while Stats or Game Log is
   active). Desktop: fixed-width column to the right, matching the sticky
   sidebar treatment already used for .palette/.game-log. Mobile: full-width
   block below, via the same body.layout-mobile breakpoint. */
.current-turn-log {
  /* Wider than .palette (260px) — there's spare width next to the board on
     desktop, and more room per line means fewer wrapped lines, so the
     entry list stays shorter and is less likely to need its own scrollbar. */
  flex: 0 0 340px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
  text-align: left;
}

.current-turn-log h4 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.current-turn-log-group {
  margin-bottom: 14px;
}

.current-turn-log-group:last-child {
  margin-bottom: 0;
}

.current-turn-log-group h5 {
  margin: 0 0 8px;
  font-size: 0.76rem;
  color: var(--muted);
}

.current-turn-log-group.is-current h5 {
  color: var(--accent);
}

.current-turn-log ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.current-turn-log li {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text);
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}

body.layout-mobile .current-turn-log {
  flex: none;
  width: 100%;
  max-width: 480px;
  max-height: 260px;
  position: static;
}

.hint {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.4;
}

.rules {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.rules summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
  transition: background 0.15s;
}

.rules summary::-webkit-details-marker {
  display: none;
}

.rules summary:hover,
.rules[open] summary {
  background: var(--panel);
}

.rules ul {
  margin: 10px 0 0;
  padding-left: 18px;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.rules li {
  margin-bottom: 6px;
}

.rules li:last-child {
  margin-bottom: 0;
}

.start-game {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0f1512;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s, opacity 0.15s;
}

.start-game:hover:not(:disabled) {
  filter: brightness(1.08);
}

.start-game:disabled {
  background: transparent;
  border-color: var(--border);
  color: var(--muted);
  cursor: not-allowed;
  font-weight: 600;
}

.start-game-hint {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

.start-game:not(:disabled) ~ .start-game-hint {
  display: none;
}

.board-wrap {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
}

.board {
  position: relative;
}

/* Wraps the whole assembled board — not the individual field hexes — in a
   soft white halo, like it's floating in the clouds. filter: drop-shadow on
   a container traces the alpha of the whole composited subtree as a single
   shape, unlike box-shadow which can't follow the board's irregular outline. */
.game-page .board {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 16px rgba(255, 255, 255, 0.55));
}

/* .board-wrap clips overflow for scrolling on large boards, which was also
   cropping the glow at the container edges — pad it out so the halo has
   room to breathe on all sides. */
.game-page .board-wrap {
  padding: 40px;
}

.hex {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2b2e37;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  transition: background 0.1s;
}

.hex::after {
  content: "";
  position: absolute;
  inset: 1px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #f5f5f5;
  z-index: 0;
}

.hex.drag-over::after {
  background: #33465e;
}

.hex.drag-invalid::after {
  background: #4a2323;
}

.hex.hex-center::after {
  background: #f5f5f5;
}

.hex.hex-center.drag-over::after {
  background: #d8ecff;
}

/* Speculative empty hexes on the no-predefined-grid board (setup-board.html):
   near-invisible until a drag interaction gives them a solid border, so
   they read as "you could place here" without cluttering the board at rest. */
.hex.hex-ghost {
  background: rgba(43, 46, 55, 0.3);
}

.hex.hex-ghost::after {
  background: transparent;
  border: none;
}

.hex.hex-ghost.drag-over::after {
  background: #33465e;
  border-style: solid;
}

.hex.hex-ghost.drag-invalid::after {
  background: #4a2323;
  border-style: solid;
}

.hex .platypus-icon {
  position: relative;
  z-index: 1;
  width: 92%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
}

.hex .token-in-hex {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  cursor: grab;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
  /* Embossed 3D feel: a light highlight along the top edge and a soft
     shadow along the bottom, clipped to the hex diamond just like the
     background color is. */
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.25), inset 0 -5px 8px rgba(0, 0, 0, 0.5);
}

.hex .token-in-hex:active { cursor: grabbing; }

/* Each element glows in its own color — filter: drop-shadow (unlike
   box-shadow) traces the clip-path shape, so the glow hugs the hex
   diamond outline instead of the element's square bounding box. */
.hex .token-in-hex.fire { background: var(--fire); filter: drop-shadow(0 0 7px rgba(229, 57, 53, 0.65)); }
.hex .token-in-hex.ice { background: var(--ice); filter: drop-shadow(0 0 7px rgba(33, 150, 243, 0.65)); }
.hex .token-in-hex.earth { background: var(--earth); filter: drop-shadow(0 0 7px rgba(141, 110, 99, 0.65)); }
.hex .token-in-hex.wood { background: var(--wood); filter: drop-shadow(0 0 7px rgba(76, 175, 80, 0.65)); }
.hex .token-in-hex.stone { background: var(--stone); color: #2b2b2b; filter: drop-shadow(0 0 7px rgba(253, 216, 53, 0.65)); }
.hex .token-in-hex.metal { background: var(--metal); filter: drop-shadow(0 0 7px rgba(200, 200, 200, 0.5)); }

.dice-container {
  display: inline-flex;
  margin-left: auto;
  padding: 5px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.dice-scene {
  width: 44px;
  height: 44px;
  perspective: 300px;
  pointer-events: none;
}

.dice {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transform: rotateX(-15deg) rotateY(25deg);
}

.dice-container:active .dice {
  filter: brightness(0.95);
}

.dice-face {
  position: absolute;
  width: 44px;
  height: 44px;
  background: #f2f2f2;
  border: 1px solid #c9c9c9;
  border-radius: 8px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 6px;
  box-sizing: border-box;
}

.pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #23252c;
  align-self: center;
  justify-self: center;
}

.face-1 { transform: translateZ(22px); }
.face-6 { transform: rotateY(180deg) translateZ(22px); }
.face-2 { transform: rotateY(-90deg) translateZ(22px); }
.face-5 { transform: rotateY(90deg) translateZ(22px); }
.face-3 { transform: rotateX(-90deg) translateZ(22px); }
.face-4 { transform: rotateX(90deg) translateZ(22px); }

.face-1 .pip { grid-area: 2 / 2; }

.face-2 .pip:nth-child(1) { grid-area: 1 / 1; }
.face-2 .pip:nth-child(2) { grid-area: 3 / 3; }

.face-3 .pip:nth-child(1) { grid-area: 1 / 1; }
.face-3 .pip:nth-child(2) { grid-area: 2 / 2; }
.face-3 .pip:nth-child(3) { grid-area: 3 / 3; }

.face-4 .pip:nth-child(1) { grid-area: 1 / 1; }
.face-4 .pip:nth-child(2) { grid-area: 1 / 3; }
.face-4 .pip:nth-child(3) { grid-area: 3 / 1; }
.face-4 .pip:nth-child(4) { grid-area: 3 / 3; }

.face-5 .pip:nth-child(1) { grid-area: 1 / 1; }
.face-5 .pip:nth-child(2) { grid-area: 1 / 3; }
.face-5 .pip:nth-child(3) { grid-area: 2 / 2; }
.face-5 .pip:nth-child(4) { grid-area: 3 / 1; }
.face-5 .pip:nth-child(5) { grid-area: 3 / 3; }

.face-6 .pip:nth-child(1) { grid-area: 1 / 1; }
.face-6 .pip:nth-child(2) { grid-area: 1 / 3; }
.face-6 .pip:nth-child(3) { grid-area: 2 / 1; }
.face-6 .pip:nth-child(4) { grid-area: 2 / 3; }
.face-6 .pip:nth-child(5) { grid-area: 3 / 1; }
.face-6 .pip:nth-child(6) { grid-area: 3 / 3; }

/* ---- Layout selector (top right) ---- */
.layout-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 600;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.layout-toggle:active {
  filter: brightness(0.9);
}

.home-link {
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 600;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  text-decoration: none;
}

.home-link:hover {
  border-color: var(--accent);
}

.home-link:active {
  filter: brightness(0.9);
}

/* ---- Mobile layout (forced via .layout-mobile, regardless of viewport) ---- */
body.layout-mobile header {
  padding: 8px 66px 6px;
}

body.layout-mobile header h1 {
  font-size: 0.95rem;
}

body.layout-mobile .subtitle {
  font-size: 0.8rem;
}

body.layout-mobile .app {
  flex-direction: column;
  align-items: center;
  padding: 12px 12px 24px;
  gap: 14px;
}

body.layout-mobile .palette {
  flex: none;
  width: 100%;
  max-width: 480px;
  position: static;
  padding: 12px;
}

body.layout-mobile .board-wrap {
  max-width: 480px;
}

body.layout-mobile .tokens {
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

/* The wall palette only ever holds one token — without this, the rule above
   (higher specificity than .tokens-single alone) would squeeze it into a
   1/6-width column meant for a row of six, making it look far too small. */
body.layout-mobile .tokens.tokens-single {
  grid-template-columns: 1fr;
  max-width: 76px;
}

body.layout-mobile .token {
  font-size: 1.1rem;
}

body.layout-mobile .token-count {
  font-size: 0.55rem;
}

body.layout-mobile .board-wrap {
  width: 100%;
  justify-content: flex-start;
  -webkit-overflow-scrolling: touch;
}

body.layout-mobile .dice-container {
  top: 6px;
  left: 6px;
  padding: 6px;
}

body.layout-mobile .dice-scene {
  width: 42px;
  height: 42px;
}

body.layout-mobile .dice-face {
  width: 42px;
  height: 42px;
  padding: 6px;
}

body.layout-mobile .pip {
  width: 7px;
  height: 7px;
}

body.layout-mobile .face-1 { transform: translateZ(21px); }
body.layout-mobile .face-6 { transform: rotateY(180deg) translateZ(21px); }
body.layout-mobile .face-2 { transform: rotateY(-90deg) translateZ(21px); }
body.layout-mobile .face-5 { transform: rotateY(90deg) translateZ(21px); }
body.layout-mobile .face-3 { transform: rotateX(-90deg) translateZ(21px); }
body.layout-mobile .face-4 { transform: rotateX(90deg) translateZ(21px); }

body.layout-mobile .layout-toggle {
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}

body.layout-mobile .home-link {
  top: 12px;
  left: 12px;
  width: 38px;
  height: 38px;
  font-size: 1.1rem;
}

.back-link {
  color: var(--accent);
  text-decoration: none;
}

.back-link:hover {
  text-decoration: underline;
}

.game-page .hex .token-in-hex {
  cursor: default;
}

/* Give the dice some breathing room below the hero palette instead of
   touching it directly. */
.game-page .controls {
  margin-top: 16px;
}

.turn-counter {
  margin: 0 0 10px;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
}

.game-log {
  flex: 0 0 260px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  position: sticky;
  top: 16px;
}

.game-log h2 {
  margin: 0 0 10px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.game-log-entries {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.log-turn h4 {
  margin: 0 0 6px;
  font-size: 0.82rem;
  color: var(--accent);
}

.log-turn ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text);
}

.log-turn li {
  margin-bottom: 4px;
}

.log-turn.log-turn-past h4 {
  color: var(--muted);
}

body.layout-mobile .game-log {
  flex: none;
  width: 100%;
  max-width: 480px;
  max-height: 260px;
  position: static;
}

/* Game Log as its own tab, rather than a Board-tab sidebar. */
.game-log-tab {
  flex: none;
  width: 100%;
  max-width: 640px;
  max-height: none;
  margin: 32px auto;
  position: static;
}

/* ---- Top-of-page turn banner (game.html) ---- */
.game-turn-banner {
  max-width: 520px;
  margin: 0 auto 20px;
  padding: 14px 20px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.game-turn-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 6px;
}

.game-turn-left-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.game-turn-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-turn-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.game-turn-banner .turn-counter {
  margin: 0;
}

.game-turn-top-row .dice-container {
  margin-left: 0;
  padding: 0;
}

.game-timer {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.game-pause-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #2f323c;
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-pause-btn:hover {
  border-color: var(--accent);
}

.game-pause-btn.paused {
  border-color: var(--accent);
  color: var(--accent);
}

.game-current-player {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.4;
}

.game-current-player.is-machine {
  color: var(--muted);
  font-style: italic;
}

/* ---- NPC tab: battle dice, result, and post-battle navigation ---- */
.npc-battle-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}

.npc-battle-area .npc-revealed {
  max-width: 100%;
}

.battle-result {
  margin: 0;
  min-height: 1.2em;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
}

.battle-result.success {
  color: var(--accent);
}

.battle-result.failure {
  color: var(--fire);
}

.npc-nav-buttons {
  display: none;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.npc-nav-buttons.open {
  display: flex;
}

.npc-nav-buttons button {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #0f1512;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.npc-nav-buttons button:hover {
  filter: brightness(1.08);
}

.generate-board {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #2f323c;
  color: var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.generate-board:hover {
  background: #3a3d47;
  border-color: var(--accent);
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.modal-box p {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.resource-choice-actions {
  justify-content: center;
  align-items: center;
}

.resource-choice-actions select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 0.88rem;
}

.modal-btn {
  padding: 8px 18px;
  border-radius: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
}

.modal-btn-secondary {
  background: transparent;
  color: var(--muted);
}

.modal-btn-secondary:hover {
  background: #2f323c;
  color: var(--text);
}

.modal-btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f1512;
}

.modal-btn-primary:hover {
  filter: brightness(1.08);
}

.stats-tab-header {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}

.cost-sheet-link {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.82rem;
}

.cost-sheet-link:hover {
  border-color: var(--accent);
  color: var(--text);
}

.cost-sheet-box {
  max-width: 560px;
  width: 100%;
}

.cost-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.cost-sheet-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}

.modal-close-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.modal-close-btn:hover {
  color: var(--text);
}

.cost-sheet-table-wrap {
  overflow-x: auto;
}

.cost-sheet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.cost-sheet-table th,
.cost-sheet-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.cost-sheet-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}

.cost-sheet-table tbody tr:last-child td {
  border-bottom: none;
}

.cost-sheet-effect {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.85em;
}

.cost-sheet-note {
  margin: 16px 0 0;
  font-size: 0.78rem;
}

.trade-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.trade-token-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.8rem;
}

.trade-token-btn:hover {
  border-color: var(--accent);
}

.trade-token-btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.token-trade-form {
  width: 100%;
}

.trade-error {
  width: 100%;
  text-align: center;
  color: #e77;
  font-size: 0.78rem;
  margin: 4px 0 0;
}

.resume-banner {
  display: none;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: rgba(110, 231, 212, 0.08);
}

.resume-banner.open {
  display: block;
}

.resume-banner p {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: var(--text);
}

.resume-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.setup-turn-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.setup-turn-left {
  flex: 1;
  min-width: 0;
}

.setup-turn-panel .turn-counter {
  margin: 0 0 4px;
  text-align: left;
}

.setup-turn-panel .dice-container {
  margin-left: 0;
  flex-shrink: 0;
}

.setup-current-player {
  margin: 0;
  text-align: left;
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.4;
}

.setup-current-player.is-machine {
  color: var(--muted);
  font-style: italic;
}

/* ---- Game page tabs ---- */
.tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 0 100px 12px;
}

.tab-btn {
  padding: 8px 18px;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--panel);
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn.active {
  color: var(--text);
  background: #2f323c;
  box-shadow: inset 0 2px 0 var(--accent);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

.tab-placeholder {
  text-align: center;
  margin-top: 60px;
  font-size: 0.95rem;
}

/* ---- NPC Cards tab: a shuffled, clickable deck + the revealed card ---- */
.npc-tab {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 48px;
  padding: 48px 24px;
  flex-wrap: wrap;
}

.npc-deck-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.npc-deck {
  position: relative;
  width: 150px;
  height: 210px;
  cursor: pointer;
  touch-action: manipulation;
}

.card-back-layer,
.npc-deck .card-back {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.card-back-layer.l3 { transform: translate(7px, 7px); }
.card-back-layer.l2 { transform: translate(4.5px, 4.5px); }
.card-back-layer.l1 { transform: translate(2px, 2px); }

.npc-deck .card-back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, #2f323c, var(--panel));
}

.npc-deck .card-back img {
  width: 62%;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.npc-deck:hover .card-back {
  border-color: var(--accent);
}

.npc-deck.deck-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.npc-deck.deck-disabled:hover .card-back {
  border-color: var(--border);
}

@keyframes card-shuffle-jitter {
  0% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-6px, 3px) rotate(-4deg); }
  40% { transform: translate(5px, -4px) rotate(3deg); }
  60% { transform: translate(-4px, -2px) rotate(-2deg); }
  80% { transform: translate(3px, 3px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.npc-deck.shuffling .card-back-layer,
.npc-deck.shuffling .card-back {
  animation: card-shuffle-jitter 0.6s ease;
}

.npc-deck.shuffling .card-back-layer.l2 { animation-delay: 0.05s; }
.npc-deck.shuffling .card-back-layer.l1 { animation-delay: 0.1s; }
.npc-deck.shuffling .card-back { animation-delay: 0.15s; }

.deck-count {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.deck-used-count {
  margin: 0;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
}

.npc-revealed {
  width: 100%;
  max-width: 420px;
  min-height: 210px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.npc-revealed .tab-placeholder {
  margin: 0;
}

.npc-card {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 18px 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.npc-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 12px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.badge.battle { background: var(--fire); color: #fff; }
.badge.lucky-roll { background: var(--stone); color: #2b2b2b; }
.badge.misfortune { background: #4a1f1f; color: #ffb3b3; }
.badge.attack { background: #2f323c; color: var(--text); border: 1px solid var(--fire); }
.badge.defence { background: #2f323c; color: var(--text); border: 1px solid var(--ice); }

.npc-card h3 {
  margin: 0 0 6px;
  font-size: 1.2rem;
}

.npc-card .power {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--accent);
}

.npc-card .flavor {
  margin: 0 0 12px;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}

.npc-card .effect {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

body.layout-mobile .npc-tab {
  padding: 24px 16px;
  gap: 24px;
}

body.layout-mobile .npc-deck {
  width: 120px;
  height: 168px;
}

/* ---- Player Stats tab: hero selection + stat card ---- */
.hero-select {
  text-align: center;
  padding: 48px 20px;
}

.hero-select h3 {
  margin: 0 0 6px;
}

.hero-select-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.hero-select-btn {
  padding: 14px 22px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: #fff;
}

.hero-select-btn:hover {
  filter: brightness(1.1);
}

.hero-select-btn.fire { background: var(--fire); }
.hero-select-btn.ice { background: var(--ice); }
.hero-select-btn.wood { background: var(--wood); }
.hero-select-btn.earth { background: var(--earth); }
.hero-select-btn.stone { background: var(--stone); color: #2b2b2b; }
.hero-select-btn.metal { background: var(--metal); }

.hero-select.hidden,
.hero-card.hidden {
  display: none;
}

.hero-card {
  max-width: 520px;
  margin: 32px auto;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
}

.hero-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.hero-card-title-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hero-card-header h3 {
  margin: 0;
  font-size: 1.38rem;
}

.hero-card-header h3.fire { color: var(--fire); }
.hero-card-header h3.ice { color: var(--ice); }
.hero-card-header h3.wood { color: var(--wood); }
.hero-card-header h3.earth { color: var(--earth); }
.hero-card-header h3.stone { color: var(--stone); }
.hero-card-header h3.metal { color: var(--text); }

.change-hero-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.78rem;
}

.change-hero-btn:hover {
  border-color: var(--accent);
  color: var(--text);
}

.hero-field-affinity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.76rem;
  line-height: 1.4;
}

.hero-field-affinity .affinity-bonus {
  color: var(--accent);
}

.hero-field-affinity .affinity-penalty {
  color: var(--fire);
}

.stat-group {
  margin-bottom: 26px;
}

.stat-group:last-child {
  margin-bottom: 0;
}

.stat-group h4 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 14px;
  text-align: center;
}

.stat-tokens {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.hero-special {
  display: flex;
  justify-content: center;
}

.hero-special-btn {
  background: var(--accent);
  border: none;
  color: #1b1b1b;
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-special-btn:disabled {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: not-allowed;
}

.hero-special-btn .special-cost {
  font-weight: 400;
  opacity: 0.75;
  margin-left: 4px;
}

.hero-special-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 8px 0 0;
}

.trade-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
}

.trade-form select {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
}

.trade-form button {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.78rem;
}

.trade-form button.trade-confirm {
  background: var(--accent);
  color: #1b1b1b;
  border-color: transparent;
  font-weight: 600;
}

.resource-tokens-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
  gap: 18px 8px;
}

.skill-tokens-row {
  justify-content: space-between;
}

.stat-token {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84px;
}

.token-badge {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  margin-bottom: 6px;
  background: radial-gradient(circle at 32% 28%, #fdf0c8, #e8bb52 45%, #a8741f 85%, #7a5313 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.7),
    inset 0 -4px 6px rgba(0, 0, 0, 0.35),
    0 2px 5px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}

.token-icon {
  /* images/tokens.png is a 10-icon sprite, 2107x383; icons are ~140px square
     but not evenly spaced from the strip's edges, so each icon's background
     position is set per-icon (--mx/--my, in px) from its measured bounding
     box center rather than computed from a fixed grid. Scale: 34/140.

     Deliberately NOT using CSS mask-image here: browser support for
     masking a raster image by alpha (vs. luminance) is inconsistent, and
     in several real-world browsers (Firefox, some Chromium builds) the
     mask silently failed to load/apply at all, leaving the token blank.
     background-image is universally reliable, so the sprite's own
     (orange) artwork is shown as-is and re-tinted to bronze with a
     filter chain instead of a mask + background-color trick. */
  width: 34px;
  height: 34px;
  background-image: url("../images/tokens.png?v=5");
  background-repeat: no-repeat;
  background-size: 511.7px auto;
  background-position: calc(var(--mx) * 1px) calc(var(--my) * 1px);
  filter: grayscale(1) sepia(1) saturate(4) brightness(0.5) hue-rotate(-8deg)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.4));
}

/* Tokens with no matching symbol in tokens.png yet render a plain emoji
   glyph instead — override the mask entirely so the character shows as-is. */
.token-icon-emoji {
  -webkit-mask-image: none;
  mask-image: none;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  /* Emoji glyphs render in their own colors, ignoring `color` — neutralize
     that and re-tint toward the same dark bronze as the masked icons. */
  filter: grayscale(1) sepia(1) saturate(4) brightness(0.5) hue-rotate(-8deg)
    drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5));
}

.token-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 2px;
}

.token-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}

.token-controls {
  display: flex;
  gap: 6px;
}

.token-controls button {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #2f323c;
  color: var(--text);
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
}

.token-controls button:hover {
  background: #3a3d47;
  border-color: var(--accent);
}

body.layout-mobile .tabs {
  padding: 0 12px 10px;
}

body.layout-mobile .tab-btn {
  flex: 1;
  padding: 8px 6px;
  font-size: 0.78rem;
}

/* ---- Field hex concentric rings: field color (outer) / wall (middle) / elemental token (center) ---- */
.hex .wall-ring {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 66%;
  height: 66%;
  z-index: 2;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: transparent;
  pointer-events: none;
}

.hex .wall-ring.filled {
  /* Rulebook v1.5: always the placing player's own color — rendered as
     diagonal stripes of two shades of that color (a lighter and a darker
     tint) rather than a flat fill, so it reads as a distinct "wall" texture
     even on a field of that same color. Falls back to neutral grey stripes
     if the owner's element is unknown. */
  background: repeating-linear-gradient(45deg, #7a7f8c, #7a7f8c 6px, #565963 6px, #565963 12px);
  border: 1px solid rgba(0, 0, 0, 0.35);
}

.hex .wall-ring.filled.fire {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--fire) 70%, white),
    color-mix(in srgb, var(--fire) 70%, white) 6px,
    color-mix(in srgb, var(--fire) 65%, black) 6px,
    color-mix(in srgb, var(--fire) 65%, black) 12px
  );
}
.hex .wall-ring.filled.ice {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--ice) 70%, white),
    color-mix(in srgb, var(--ice) 70%, white) 6px,
    color-mix(in srgb, var(--ice) 65%, black) 6px,
    color-mix(in srgb, var(--ice) 65%, black) 12px
  );
}
.hex .wall-ring.filled.wood {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--wood) 70%, white),
    color-mix(in srgb, var(--wood) 70%, white) 6px,
    color-mix(in srgb, var(--wood) 65%, black) 6px,
    color-mix(in srgb, var(--wood) 65%, black) 12px
  );
}
.hex .wall-ring.filled.earth {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--earth) 70%, white),
    color-mix(in srgb, var(--earth) 70%, white) 6px,
    color-mix(in srgb, var(--earth) 65%, black) 6px,
    color-mix(in srgb, var(--earth) 65%, black) 12px
  );
}
.hex .wall-ring.filled.stone {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--stone) 70%, white),
    color-mix(in srgb, var(--stone) 70%, white) 6px,
    color-mix(in srgb, var(--stone) 65%, black) 6px,
    color-mix(in srgb, var(--stone) 65%, black) 12px
  );
}
.hex .wall-ring.filled.metal {
  background: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--metal) 70%, white),
    color-mix(in srgb, var(--metal) 70%, white) 6px,
    color-mix(in srgb, var(--metal) 65%, black) 6px,
    color-mix(in srgb, var(--metal) 65%, black) 12px
  );
}

.hex .wall-ring.drag-over-slot {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

.hex .token-slot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 33%;
  height: 33%;
  z-index: 3;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  pointer-events: none;
}

.hex .token-slot.filled.fire { background: var(--fire); }
.hex .token-slot.filled.ice { background: var(--ice); }
.hex .token-slot.filled.earth { background: var(--earth); }
.hex .token-slot.filled.wood { background: var(--wood); }
.hex .token-slot.filled.stone { background: var(--stone); color: #2b2b2b; }
.hex .token-slot.filled.metal { background: var(--metal); }

/* Conquer Token symbol: the same images/tokens.png sprite technique used
   for Resource Tokens on the Player Stats tab (see .token-icon), scaled
   down to fit the small in-hex slot and tinted darker so it reads as
   engraved into the token's own element color rather than floating on it. */
.hex .token-slot .token-slot-icon {
  width: 34px;
  height: 34px;
  background-image: url("../images/tokens.png?v=5");
  background-repeat: no-repeat;
  background-size: 511.7px auto;
  background-position: calc(var(--mx) * 1px) calc(var(--my) * 1px);
  transform: scale(0.42);
  filter: grayscale(1) sepia(1) saturate(4) brightness(0.35) hue-rotate(-8deg)
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35)) drop-shadow(0 -1px 1px rgba(0, 0, 0, 0.55));
}

/* ---- Palette variants used on the game page ---- */
.tokens-single {
  grid-template-columns: 1fr;
  max-width: 78px;
  margin: 0 auto;
}

.token.wall-token {
  background: repeating-linear-gradient(
    45deg,
    #6b6f7a,
    #6b6f7a 6px,
    #565963 6px,
    #565963 12px
  );
}

/* Elemental heroes: no badge/frame, just a distinctly colored character
   glyph (a placeholder for the per-hero PNG artwork to come later) — a
   white halo keeps even the dark elements (earth, metal) legible on any
   hex color. */
.token.hero-token {
  clip-path: none;
  border-radius: 10px;
  aspect-ratio: 1;
  max-width: 56px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 1.7rem;
}

.hero-token {
  text-shadow: -0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff;
}

/* Board hero pieces get a thicker outline than the palette/stats icons —
   bigger and semi-transparent (see .hero-piece below) means the thin 0.5px
   outline used elsewhere would nearly disappear against a busy field. */
.hero-piece {
  text-shadow: -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
    0 0 4px #fff;
}

.hero-token.fire, .hero-piece.fire { color: var(--fire); }
.hero-token.ice, .hero-piece.ice { color: var(--ice); }
.hero-token.earth, .hero-piece.earth { color: var(--earth); }
.hero-token.wood, .hero-piece.wood { color: var(--wood); }
.hero-token.stone, .hero-piece.stone { color: var(--stone); }
.hero-token.metal, .hero-piece.metal { color: var(--metal); }

/* A hero placed on the board sits above everything else in the hex, free to
   roam any hex regardless of what's layered underneath it. */
.hero-piece {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 90%;
  height: 90%;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  cursor: grab;
  opacity: 0.6;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 5px rgba(0, 0, 0, 0.6));
}

.hero-piece:active { cursor: grabbing; }