/* Glanzlicht ueber den Goldrahmen des Bretts (Teil von "Lebendiges Brett",
   Schalter in game-settings.js; aus = #boardWrap.mp-lifeOff). Alle 14,4 s
   (3 x Idle-Takt, faellt so nie regelmaessig mit der Duenung zusammen) zieht ein
   schmaler, scharfer Streifen in gut 1 s diagonal ueber den Metallrand: 1 px Rand
   und Polster von #boardWrap, Goldrand und Blende von #board blitzen nacheinander
   auf. Blendmodus overlay: nur das Gold glaenzt, der dunkle Stein bleibt dunkel.
   #boardWrap wird nie neu gebaut, die Schleife startet also nie neu (kein --mp-t
   noetig); #boardWrap::before war frei, ::after gehoert dem Rand-Leuchten. */
#boardWrap {
  --mp-bezel: 17px;   /* 1 Rand + 10 Polster (Wrap) + 2 Rand + 4 Blende (Brett) */
}
#boardWrap::before {
  content: "";
  position: absolute;
  inset: -1px;        /* bis auf den eigenen 1-px-Rand */
  z-index: 4;         /* unter dem Rand-Leuchten (::after, z 5) */
  pointer-events: none;
  box-sizing: border-box;
  border-radius: inherit;
  padding: var(--mp-bezel);
  /* Nur der Ring zwischen Aussenkante und Feldern wird bemalt. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* Streifen in der Mitte eines dreifach breiten Verlaufs: in beiden Endlagen
     (100 % bzw. 0 %) steht er ganz ausserhalb des Rahmens, nichts bleibt liegen. */
  background: linear-gradient(112deg,
    transparent 0 47%,
    rgba(255, 241, 200, .12) 48.5%,
    rgba(255, 244, 214, .6) 50%,
    rgba(255, 241, 200, .12) 51.5%,
    transparent 53% 100%) no-repeat;
  background-size: 300% 100%;
  background-position: 100% 0;
  mix-blend-mode: overlay;
  animation: mpBezelSheen 14.4s linear infinite;
}
/* 16 % = 2,3 s Weg von links aussen nach rechts aussen; ueber dem Rahmen selbst
   ist der Streifen davon etwa 1,3 s zu sehen. */
@keyframes mpBezelSheen {
  0%   { background-position: 100% 0; }
  16%  { background-position: 0% 0; }
  100% { background-position: 0% 0; }
}
/* Schmale Layouts (main-07): Wrap-Polster 8 px. */
@media (orientation: portrait) and (max-width: 1180px) {
  body.mode-demo #boardWrap { --mp-bezel: 15px; }
}
@media (max-width: 820px) {
  body.mode-demo #boardWrap { --mp-bezel: 15px; }
}
/* Handy: Brett ohne Rand (mobile-game.css), nichts zu beleuchten. */
body.mp-phone.mode-demo #boardWrap::before,
#boardWrap.mp-lifeOff::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  #boardWrap::before { display: none; }
}