/* Socle réutilisable sans styles d'écran ni logique métier. */
* {
  box-sizing:border-box
}
html {
  scroll-padding-top:20px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body)
}
a {
  color:inherit
}
button,input,select {
  font:inherit
}
button,a,input {
  touch-action:manipulation
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:4px
}
button {
  cursor:pointer
}
button:hover {
  border-color:var(--gold)
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  margin-bottom:0
}
h1 em {
  font-style:normal;
  color:var(--gold)
}
.eyebrow {
  font-weight:800;
  margin:0 0 14px
}
.score-line {
  display:flex;
  justify-content:space-between
}
.playfield {
  display:grid;
  grid-template-columns:repeat(10,1fr);
  grid-template-rows:repeat(20,1fr);
  aspect-ratio:1/2;
  border:3px solid #4c596e;
  border-top-color:var(--volt);
  background:var(--inset);
  padding:2px;
  box-shadow:0 4px 0 #06080f;
  overflow:hidden
}
.cell {
  min-width:0;
  min-height:0;
  border:1px solid #181d29
}
.cell.block {
  background:var(--piece);
  border:1px solid #0b1019;
  box-shadow:inset 2px 2px 0 #ffffff55,inset -2px -2px 0 #00000035
}
.cell.ghost {
  border:1px solid #4ce7e488;
  background:#4ce7e419
}
.fighter-svg {
  max-width:240px;
  position:relative;
  z-index:1
}