/* Reusable die face icons 1–6.
Usage: <span class="die-face pips--3" aria-label="3"></span>
Size inherits from font size; adjust by font-size on the element or container.
*/
.die-face {
  --die-bg: #fff;
  --die-fg: #111;
  --die-size: 1.2em;          /* overall square size */
  --die-radius: 0.22em;       /* corner radius */
  --pip: 0.22em;              /* pip diameter */
  --o: 0.35em;                /* offset from center to place pips */

  position: relative;
  display: inline-block;
  width: var(--die-size);
  height: var(--die-size);
  border-radius: var(--die-radius);
  background: var(--die-bg);
  border: 2px solid var(--die-fg);
  box-sizing: content-box;
  vertical-align: -0.2em; /* nudge to align with text baseline */
  transform-origin: 50% 50%;
}

/* Single pseudo-element renders center pip + shadows for others */
.die-face::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pip);
  height: var(--pip);
  margin-left: calc(var(--pip) / -2);
  margin-top: calc(var(--pip) / -2);
  background: var(--die-fg);
  border-radius: 50%;
  box-shadow: none;
}

/* 1: just center */
.pips--1::before {
  background: var(--die-fg);
  box-shadow: none;
}

/* 2: top-left & bottom-right */
.pips--2::before {
  background: transparent;
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 0 var(--die-fg),
    var(--o) var(--o) 0 0 var(--die-fg);
}

/* 3: center + top-left & bottom-right */
.pips--3::before {
  background: var(--die-fg);
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 0 var(--die-fg),
    var(--o) var(--o) 0 0 var(--die-fg);
}

/* 4: four corners */
.pips--4::before {
  background: transparent;
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 0 var(--die-fg),
    var(--o) calc(var(--o) * -1) 0 0 var(--die-fg),
    calc(var(--o) * -1) var(--o) 0 0 var(--die-fg),
    var(--o) var(--o) 0 0 var(--die-fg);
}

/* 5: four corners + center */
.pips--5::before {
  background: var(--die-fg);
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 0 var(--die-fg),
    var(--o) calc(var(--o) * -1) 0 0 var(--die-fg),
    calc(var(--o) * -1) var(--o) 0 0 var(--die-fg),
    var(--o) var(--o) 0 0 var(--die-fg);
}

/* 6: three rows of two (no center) */
.pips--6::before {
  background: transparent;
  box-shadow:
    calc(var(--o) * -1) calc(var(--o) * -1) 0 0 var(--die-fg),
    var(--o) calc(var(--o) * -1) 0 0 var(--die-fg),
    calc(var(--o) * -1) 0 0 0 var(--die-fg),
    var(--o) 0 0 0 var(--die-fg),
    calc(var(--o) * -1) var(--o) 0 0 var(--die-fg),
    var(--o) var(--o) 0 0 var(--die-fg);
}

/* Logo face: hide pips and show centered 59° Nord logo while keeping die frame */
.face--logo {
  background-image: url('../images/59nord_logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 64% auto; /* keep aspect ratio */
}
.face--logo::before { /* hide pip rendering */
  width: 0;
  height: 0;
  margin: 0;
  background: transparent;
  box-shadow: none !important;
}

/* Rolling animation */
@keyframes die-rolling {
  0%   { transform: rotate(0deg) scale(1); }
  25%  { transform: rotate(120deg) scale(0.92); }
  50%  { transform: rotate(240deg) scale(1.04); }
  75%  { transform: rotate(320deg) scale(0.96); }
  100% { transform: rotate(360deg) scale(1); }
}
.is-rolling {
  animation: die-rolling 1.0s linear infinite;
  will-change: transform;
}

/* Held (pressed-in) look for die icon itself */
.die-face.is-held {
  box-shadow: inset 0 0 0 2px rgba(227,6,19,0.55);
  border-color: rgba(227,6,19,0.8);
  filter: saturate(1.2);
}

/* Optional helper sizes */
.die-face.sm { --die-size: 1em; --pip: 0.18em; --o: 0.3em; }
.die-face.lg { --die-size: 1.5em; --pip: 0.26em; --o: 0.44em; }