.bomberman-demo {
  --board: #101821;
  --floor: #244536;
  --wall: #4c5b68;
  --wall-edge: #28333d;
  --brick: #8f552f;
  --brick-line: #462918;
  --gate: #9ea7b3;
  --gate-edge: #343d49;
  --gate-open: #5fba76;
  --flame: #f5a84d;
  --flame-edge: #bd4b2f;
  --fire-core: #fff0a3;
  --hero: #5d8df2;
  --hero-highlight: #9dbdff;
  --monster: #dc6065;
  --monster-eye: #ffe9df;
  --bomb: #090b0e;
  --bomb-fuse: #515862;
  --power-bonus: #e06a52;
  --shadow: rgba(0, 0, 0, 0.38);
  width: min(100%, 760px);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: #141d27;
  color: #ecf2f0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-sizing: border-box;
}

.bomberman-demo *, .bomberman-demo *::before, .bomberman-demo *::after {
  box-sizing: border-box;
}

.bomberman-demo[data-theme="earth"],
.bomberman-demo[data-theme="light"] {
  --board: #2b372c;
  --floor: #86ae68;
  --wall: #6b746d;
  --wall-edge: #41483f;
  --brick: #ad7441;
  --brick-line: #694023;
  --gate: #dfd7c3;
  --gate-edge: #686153;
  --gate-open: #82c56a;
  --flame: #f0a43d;
  --flame-edge: #b64727;
  --fire-core: #fff1a6;
  --hero: #2e6fba;
  --hero-highlight: #7fb4f5;
  --monster: #b94a4f;
  --monster-eye: #ffe7d8;
  --bomb: #171a1f;
  --bomb-fuse: #2d3138;
  --power-bonus: #d95f46;
  --shadow: rgba(27, 31, 24, 0.26);
  background: #f4f0e8;
  color: #1d241d;
}

.bomberman-demo[data-theme="ocean"] {
  --board: #143747;
  --floor: #6fae9d;
  --wall: #537a8a;
  --wall-edge: #315461;
  --brick: #b17745;
  --brick-line: #6b4224;
  --gate: #d7eef2;
  --gate-edge: #426978;
  --gate-open: #6fc5a9;
  --hero: #1d6fa9;
  --hero-highlight: #7fc8ed;
  --monster: #bd4a60;
  --bomb: #10202a;
  --bomb-fuse: #324b57;
  background: #102735;
}

.bomberman-demo[data-theme="forest"] {
  --board: #243a29;
  --floor: #7fa964;
  --wall: #5d715e;
  --wall-edge: #39483a;
  --brick: #986c3c;
  --brick-line: #563a22;
  --gate: #d8e3cc;
  --gate-edge: #536247;
  --gate-open: #83bd65;
  --hero: #3f72a6;
  --hero-highlight: #89b4df;
  --monster: #ad4c49;
  --bomb: #151c17;
  --bomb-fuse: #354238;
  background: #17241a;
}

.bomberman-demo .header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.bomberman-demo h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  font-family: Georgia, "Times New Roman", serif;
}

.bomberman-demo p {
  margin: 4px 0 0;
  color: color-mix(in srgb, currentColor 68%, transparent);
  font-size: 14px;
  line-height: 1.35;
}

.bomberman-demo .status {
  min-width: 72px;
  padding: 7px 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gate-open) 30%, transparent);
  color: currentColor;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.bomberman-demo .status[data-status="hit"] {
  background: color-mix(in srgb, #e05a4f 34%, transparent);
}

.bomberman-demo .status[data-status="cleared"] {
  background: color-mix(in srgb, #4f9ee8 34%, transparent);
}

.bomberman-demo .board {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: clamp(2px, 0.5vw, 4px);
  width: min(100%, 608px);
  margin: 0 auto;
  padding: clamp(6px, 1.6vw, 12px);
  border: 6px solid var(--board);
  border-radius: 6px;
  background: var(--board);
  touch-action: manipulation;
}

.bomberman-demo .cell {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  background: var(--floor);
}

.bomberman-demo .cell.flame {
  z-index: 3;
  overflow: visible;
}

.bomberman-demo .wall {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 42%), var(--wall);
  box-shadow: inset 0 -4px 0 var(--wall-edge);
}

.bomberman-demo .brick {
  background:
    linear-gradient(45deg, transparent 45%, var(--brick-line) 46%, var(--brick-line) 54%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, var(--brick-line) 46%, var(--brick-line) 54%, transparent 55%),
    var(--brick);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brick-line) 62%, transparent);
}

.bomberman-demo .gate-cell {
  background: radial-gradient(circle, color-mix(in srgb, var(--gate-open) 65%, white 35%) 0 32%, var(--gate-open) 34% 54%, transparent 56%), var(--floor);
}

.bomberman-demo .flame {
  background: radial-gradient(circle, color-mix(in srgb, var(--flame-edge) 52%, transparent), transparent 68%), var(--floor);
  box-shadow: inset 0 0 9px color-mix(in srgb, var(--fire-core) 55%, transparent), 0 0 7px color-mix(in srgb, var(--flame) 65%, transparent);
}

/* Arm bar: a pill that spans the full width of the cell (or height for up/down).
   The gradient runs from the center-facing side (bright core) to the outer edge (darker).
   Each direction positions the bar so it fills the correct axis. */
.bomberman-demo .flame::before {
  content: "";
  position: absolute;
  /* default (right): horizontal bar filling full width, centered vertically */
  top: 35%;
  left: 0;
  width: 100%;
  height: 30%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--fire-core), var(--flame) 52%, var(--flame-edge));
  box-shadow: 0 0 5px color-mix(in srgb, var(--flame) 76%, transparent);
}

/* left arm: gradient reversed so bright side faces right (toward center) */
.bomberman-demo .flame-left::before {
  background: linear-gradient(90deg, var(--flame-edge), var(--flame) 52%, var(--fire-core));
}

/* up arm: vertical bar, bright at bottom (toward center), dark at top */
.bomberman-demo .flame-up::before {
  top: 0;
  left: 35%;
  width: 30%;
  height: 100%;
  background: linear-gradient(180deg, var(--flame-edge), var(--flame) 52%, var(--fire-core));
}

/* down arm: vertical bar, bright at top (toward center), dark at bottom */
.bomberman-demo .flame-down::before {
  top: 0;
  left: 35%;
  width: 30%;
  height: 100%;
  background: linear-gradient(180deg, var(--fire-core), var(--flame) 52%, var(--flame-edge));
}

/* Tip arrow shown only on flame-head cells.
   Each direction positions the arrowhead at the far edge. */
.bomberman-demo .flame::after {
  content: "";
  position: absolute;
  display: none;
  background: var(--fire-core);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 22% 50%);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--flame) 74%, transparent));
  /* default (right): arrowhead at right edge */
  right: -14%;
  top: 27%;
  width: 30%;
  height: 46%;
  border-radius: 50% 50% 50% 12%;
}

.bomberman-demo .flame-left::after {
  right: auto;
  left: -14%;
  /* flip horizontally */
  clip-path: polygon(100% 0, 0 50%, 100% 100%, 78% 50%);
}

.bomberman-demo .flame-up::after {
  right: auto;
  left: 27%;
  top: -14%;
  width: 46%;
  height: 30%;
  border-radius: 50% 50% 12% 50%;
  clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 78%);
}

.bomberman-demo .flame-down::after {
  right: auto;
  left: 27%;
  top: auto;
  bottom: -14%;
  width: 46%;
  height: 30%;
  border-radius: 12% 50% 50% 50%;
  clip-path: polygon(0 0, 50% 100%, 100% 0, 50% 22%);
}

.bomberman-demo .flame-head::after { display: block; }

.bomberman-demo .flame-center::before,
.bomberman-demo .flame-center::after { display: none; }

.bomberman-demo .flame-center {
  background:
    linear-gradient(var(--flame), var(--flame)) center / 100% 34% no-repeat,
    linear-gradient(90deg, var(--flame), var(--flame)) center / 34% 100% no-repeat,
    radial-gradient(circle, var(--fire-core) 0 20%, var(--flame) 22% 54%, var(--flame-edge) 56% 72%, transparent 74%),
    var(--floor);
}

.bomberman-demo .hero,
.bomberman-demo .monster,
.bomberman-demo .bomb,
.bomberman-demo .bonus,
.bomberman-demo .gate {
  position: absolute;
  display: block;
  z-index: 2;
}

.bomberman-demo .hero {
  isolation: isolate;
  width: 62%;
  height: 72%;
  border: 2px solid #8b1a1a;
  /* chubby oval — wider than tall */
  border-radius: 46% 46% 42% 42% / 52% 52% 48% 48%;
  background:
    /* ---- FACE (top 44%) ---- */
    /* rosy cheeks */
    radial-gradient(ellipse 12% 8% at 22% 34%, rgba(230,120,120,0.55) 0 100%, transparent 100%),
    radial-gradient(ellipse 12% 8% at 78% 34%, rgba(230,120,120,0.55) 0 100%, transparent 100%),
    /* beady black eyes */
    radial-gradient(circle at 36% 28%, #000 0 5%, transparent 6%),
    radial-gradient(circle at 64% 28%, #000 0 5%, transparent 6%),
    /* eye whites */
    radial-gradient(circle at 36% 28%, #fff 0 8%, transparent 9%),
    radial-gradient(circle at 64% 28%, #fff 0 8%, transparent 9%),
    /* mouth: thin dark line */
    radial-gradient(ellipse 18% 2% at 50% 40%, #5a2a2a 0 100%, transparent 100%),
    /* pale skin face band */
    linear-gradient(180deg, #f2dfc0 0 44%, transparent 44%),

    /* ---- NECKLACE ---- */
    /* left ear of rabbit pendant */
    radial-gradient(ellipse 2.5% 5.5% at 47% 51%, #fff 0 100%, transparent 100%),
    /* right ear of rabbit pendant */
    radial-gradient(ellipse 2.5% 5.5% at 53% 51%, #fff 0 100%, transparent 100%),
    /* rabbit head circle */
    radial-gradient(circle at 50% 58%, #fff 0 6.5%, transparent 7%),
    /* bow tie dot below head */
    radial-gradient(circle at 50% 64%, #fff 0 2%, transparent 2.5%),
    /* chain dots */
    radial-gradient(circle at 26% 49%, #fff 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 34% 51%, #fff 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 42% 52%, #fff 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 58% 52%, #fff 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 66% 51%, #fff 0 1.8%, transparent 2.2%),
    radial-gradient(circle at 74% 49%, #fff 0 1.8%, transparent 2.2%),

    /* ---- RED JACKET (bottom 56%) ---- */
    linear-gradient(180deg, transparent 44%, #c0201a 44%);
  box-shadow:
    inset 0 3px 0 rgba(255,255,255,0.2),
    inset 0 -5px 0 rgba(80,10,10,0.35),
    0 3px 6px var(--shadow);
}

/* Cartman's blue/red beanie hat with yellow pom-pom */
.bomberman-demo .hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -28%;
  left: 5%;
  width: 90%;
  height: 38%;
  border-radius: 50% 50% 0 0;
  background:
    /* pom-pom */
    radial-gradient(circle at 50% 14%, #f5c518 0 18%, transparent 19%),
    /* blue band top, red band bottom */
    linear-gradient(180deg, #1a5fa8 0 60%, #c0201a 60%);
  box-shadow: 0 -1px 0 #0d3d72;
}

/* drop shadow under hero */
.bomberman-demo .hero::after {
  content: "";
  position: absolute;
  left: 10%;
  bottom: -9%;
  width: 80%;
  height: 16%;
  border-radius: 50%;
  background: rgba(10,18,28,0.32);
  filter: blur(1px);
}

.bomberman-demo .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 23%;
  left: 9%;
  width: 82%;
  height: 25%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(12, 30, 66, 0.24));
}

.bomberman-demo .hero::after {
  content: "";
  position: absolute;
  left: 13%;
  bottom: -9%;
  width: 74%;
  height: 18%;
  border-radius: 50%;
  background: rgba(10, 18, 28, 0.32);
  filter: blur(1px);
}

.bomberman-demo .monster {
  width: 62%;
  height: 62%;
  border-radius: 50% 50% 42% 42%;
  background:
    radial-gradient(circle at 34% 36%, var(--monster-eye) 0 7%, transparent 8%),
    radial-gradient(circle at 65% 36%, var(--monster-eye) 0 7%, transparent 8%),
    var(--monster);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}

.bomberman-demo .monster-gastly {
  width: 70%;
  height: 60%;
  border-radius: 50%;
  /* dark core fading to transparent edges — the "gas ball" look */
  background:
    /* white dot pupils inside eyes */
    radial-gradient(circle at 37% 38%, #fff 0 3.5%, transparent 4%),
    radial-gradient(circle at 63% 38%, #fff 0 3.5%, transparent 4%),
    /* large white sclera eyes */
    radial-gradient(circle at 36% 36%, #fff 0 10%, transparent 11%),
    radial-gradient(circle at 64% 36%, #fff 0 10%, transparent 11%),
    /* dark purple body with transparent edge so it looks gaseous */
    radial-gradient(ellipse at 50% 44%, #2a0a38 0 38%, #4a1568 44% 62%, rgba(90, 30, 120, 0.5) 70%, transparent 82%);
  filter: drop-shadow(0 0 5px rgba(160, 60, 220, 0.7));
  box-shadow: none;
}

/* gas wisps / haze ring around Gastly */
.bomberman-demo .monster-gastly::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 20%;
  width: 160%;
  height: 80%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 42%,
    rgba(120, 40, 180, 0.28) 46% 52%,
    transparent 56%,
    rgba(100, 30, 160, 0.18) 60% 66%,
    transparent 70%
  );
  animation: none;
}

.bomberman-demo .monster-gastly::after {
  content: "";
  position: absolute;
  left: -22%;
  bottom: -18%;
  width: 144%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(80, 20, 130, 0.55) 0 35%,
    rgba(120, 50, 190, 0.3) 38% 58%,
    transparent 62%
  );
  filter: blur(2px);
}

.bomberman-demo .monster-haunter {
  width: 64%;
  height: 64%;
  border-radius: 50% 50% 44% 44%;
  background:
    /* pupils */
    radial-gradient(circle at 36% 39%, #1a0028 0 4%, transparent 5%),
    radial-gradient(circle at 64% 39%, #1a0028 0 4%, transparent 5%),
    /* eye glow: red-ringed menacing eyes */
    radial-gradient(circle at 36% 38%, #fff 0 8%, #c03030 9% 14%, transparent 15%),
    radial-gradient(circle at 64% 38%, #fff 0 8%, #c03030 9% 14%, transparent 15%),
    /* jagged bottom mouth shadow */
    radial-gradient(ellipse at 50% 88%, #2a0040 0 28%, transparent 30%),
    /* main body: deep purple, lighter at top */
    linear-gradient(175deg, #6b3a9e 0 28%, #4a1a78 32% 72%, #2e0d52 74%);
  box-shadow: 0 0 8px rgba(110, 50, 180, 0.7), inset 0 -3px 0 rgba(20, 5, 40, 0.4);
  /* spiky ghost outline */
  clip-path: polygon(
    50% 0%,
    58% 8%, 68% 2%, 72% 12%,
    84% 8%, 84% 20%,
    96% 28%, 88% 36%,
    100% 50%, 90% 56%,
    94% 70%, 82% 70%,
    78% 86%, 64% 80%,
    50% 92%, 36% 80%,
    22% 86%, 18% 70%,
    6% 70%, 10% 56%,
    0% 50%, 12% 36%,
    4% 28%, 16% 20%,
    16% 8%, 28% 12%,
    32% 2%, 42% 8%
  );
}

/* disembodied left hand */
.bomberman-demo .monster-haunter::before {
  content: "";
  position: absolute;
  left: -28%;
  top: 38%;
  width: 32%;
  height: 30%;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(160deg, #7040a8 0 50%, #3d1464 52%);
  box-shadow: 0 0 4px rgba(110, 50, 180, 0.6);
  clip-path: polygon(20% 0%, 50% 0%, 80% 0%, 100% 40%, 85% 100%, 50% 100%, 15% 100%, 0% 40%);
  transform: rotate(-20deg);
}

/* disembodied right hand */
.bomberman-demo .monster-haunter::after {
  content: "";
  position: absolute;
  right: -28%;
  top: 38%;
  width: 32%;
  height: 30%;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(160deg, #7040a8 0 50%, #3d1464 52%);
  box-shadow: 0 0 4px rgba(110, 50, 180, 0.6);
  clip-path: polygon(20% 0%, 50% 0%, 80% 0%, 100% 40%, 85% 100%, 50% 100%, 15% 100%, 0% 40%);
  transform: rotate(20deg);
}

.bomberman-demo .monster-gengar {
  width: 72%;
  height: 70%;
  border-radius: 46% 46% 36% 36%;
  background:
    /* pupils */
    radial-gradient(circle at 35% 35%, #600 0 3.5%, transparent 4%),
    radial-gradient(circle at 65% 35%, #600 0 3.5%, transparent 4%),
    /* red eyes */
    radial-gradient(circle at 35% 34%, #e02020 0 9%, transparent 10%),
    radial-gradient(circle at 65% 34%, #e02020 0 9%, transparent 10%),
    /* mouth shadow behind teeth */
    radial-gradient(ellipse at 50% 80%, #1a0030 0 26%, transparent 28%),
    /* body */
    linear-gradient(175deg, #6a3090 0 22%, #4b1a72 26% 70%, #2e0d52 72%);
  box-shadow: inset 0 -5px 0 rgba(15, 5, 35, 0.4), 0 3px 5px var(--shadow);
  /* rounded body with two ear spikes at top */
  clip-path: polygon(
    28% 0%, 34% 14%,   /* left ear base → left ear tip area */
    22% 6%,            /* left ear outer edge */
    14% 18%, 0% 18%,   /* left shoulder */
    0% 55%, 4% 72%,
    10% 86%, 24% 96%,
    38% 100%, 50% 100%, 62% 100%,
    76% 96%, 90% 86%,
    96% 72%, 100% 55%,
    100% 18%, 86% 18%,
    78% 6%,            /* right ear outer edge */
    66% 14%, 72% 0%    /* right ear */
  );
}

/* teeth: white serrated edge across the mouth area */
.bomberman-demo .monster-gengar::before {
  content: "";
  position: absolute;
  left: 16%;
  bottom: 14%;
  width: 68%;
  height: 18%;
  background:
    /* 5 teeth as white triangles via repeating gradient */
    repeating-linear-gradient(
      90deg,
      #1a0030 0 3%,
      #fff 3% 17%,
      #1a0030 17% 20%
    );
  clip-path: polygon(
    0% 0%, 10% 100%, 20% 0%, 30% 100%, 40% 0%, 50% 100%, 60% 0%, 70% 100%, 80% 0%, 90% 100%, 100% 0%, 100% 0%, 0% 0%
  );
}

/* grin curve line above teeth */
.bomberman-demo .monster-gengar::after {
  content: "";
  position: absolute;
  left: 14%;
  bottom: 28%;
  width: 72%;
  height: 12%;
  border-bottom: 3px solid rgba(255, 220, 240, 0.7);
  border-radius: 0 0 60% 60%;
}

.bomberman-demo .bomb {
  width: 55%;
  height: 55%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.48) 0 11%, transparent 12%), var(--bomb);
  box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.08), 0 1px 4px rgba(0, 0, 0, 0.38);
}

.bomberman-demo .bomb::before {
  content: "";
  position: absolute;
  top: -16%;
  left: 54%;
  width: 34%;
  height: 26%;
  border-top: 3px solid var(--bomb-fuse);
  border-right: 3px solid var(--bomb-fuse);
  border-radius: 0 70% 0 0;
}

.bomberman-demo .bonus-power {
  width: 48%;
  height: 68%;
  border-radius: 62% 62% 52% 52%;
  background:
    radial-gradient(circle at 48% 70%, var(--fire-core) 0 18%, transparent 19%),
    radial-gradient(circle at 58% 40%, var(--flame) 0 22%, transparent 23%),
    linear-gradient(135deg, transparent 0 22%, var(--fire-core) 23% 35%, transparent 36%),
    var(--power-bonus);
  clip-path: polygon(50% 0, 72% 25%, 92% 48%, 84% 80%, 50% 100%, 16% 80%, 8% 48%, 28% 25%);
}

.bomberman-demo .bonus-bomb {
  width: 62%;
  height: 54%;
  background:
    radial-gradient(circle at 28% 60%, rgba(255, 255, 255, 0.42) 0 4%, transparent 5%),
    radial-gradient(circle at 28% 60%, var(--bomb) 0 19%, transparent 20%),
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.42) 0 4%, transparent 5%),
    radial-gradient(circle at 50% 34%, var(--bomb) 0 19%, transparent 20%),
    radial-gradient(circle at 72% 60%, rgba(255, 255, 255, 0.42) 0 4%, transparent 5%),
    radial-gradient(circle at 72% 60%, var(--bomb) 0 19%, transparent 20%);
}

.bomberman-demo .bonus-bomb::before,
.bomberman-demo .bonus-bomb::after {
  content: "";
  position: absolute;
  border-top: 2px solid var(--bomb-fuse);
  border-right: 2px solid var(--bomb-fuse);
  border-radius: 0 70% 0 0;
}

.bomberman-demo .bonus-bomb::before {
  top: 2%;
  left: 47%;
  width: 14%;
  height: 16%;
}

.bomberman-demo .bonus-bomb::after {
  top: 30%;
  right: 12%;
  width: 12%;
  height: 14%;
}

.bomberman-demo .gate {
  width: 66%;
  height: 74%;
  border: 3px solid var(--gate-edge);
  border-bottom-width: 6px;
  border-radius: 48% 48% 3px 3px;
  background: linear-gradient(90deg, transparent 0 42%, color-mix(in srgb, var(--gate-edge) 70%, transparent) 43% 57%, transparent 58%), var(--gate);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.24), 0 2px 4px var(--shadow);
}

.bomberman-demo .toolbar,
.bomberman-demo .meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.bomberman-demo .pad {
  display: grid;
  grid-template-columns: repeat(3, 38px);
  grid-template-rows: repeat(2, 38px);
  gap: 4px;
}

.bomberman-demo .pad button:first-child { grid-column: 2; }
.bomberman-demo .pad button:nth-child(2) { grid-column: 1; grid-row: 2; }
.bomberman-demo .pad button:nth-child(3) { grid-column: 2; grid-row: 2; }
.bomberman-demo .pad button:nth-child(4) { grid-column: 3; grid-row: 2; }

.bomberman-demo button {
  min-height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  color: currentColor;
  font: 800 14px/1 inherit;
  cursor: pointer;
}

.bomberman-demo .action {
  min-width: 76px;
  padding: 0 12px;
}

.bomberman-demo .meta span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-height: 32px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font-size: 13px;
  font-weight: 800;
}

.bomberman-demo .meta b {
  opacity: 0.68;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}