.reversi {
  /* overflowを明示してview-timelineの基準にする */
  overflow: hidden;
}
/* viewアニメーション判定のモトを設定 */
.scan, .board > div::after {
  animation: linear reverse;
  animation-name: scan1, scan2;
  animation-timeline: view(x), view(y);
  animation-range: contain cover;
}
.WH {
  counter-reset: WH;
  --scan: var(--data1);
  /* 復元 */
  --W: mod(var(--scan) - 1, 8);
  --H: round(down, (var(--scan) - 1) / 8);
}
.WH::after {
  content: counter(WH, zero);
}
/* .lrに対応する.LRと.rlに対応する.RL */
.LR, .RL {
  counter-reset: var(--data1-name) var(--data2-name);
  &::after {
    /* zeroだけの場合でも高さが発生してしまうため1つはつけるようにする */
    content: counter(var(--data2-name), ln) counter(var(--data1-name), zero) '0';
  }
}
.LR {
  --data1-name: lr1;
  --data2-name: lr2;
  /* 取れるマスを取り出す */
  --d: mod(var(--data1) - 1, 8);
  --l: round(down, (var(--data1) - 1) / 8);
  --ul: mod(var(--data2) - 1, 8);
  --ld: round(down, (var(--data2) - 1) / 8);
}
.RL {
  --data1-name: rl1;
  --data2-name: rl2;
  /* 取れるマスを取り出す */
  --u: mod(var(--data1) - 1, 8);
  --r: round(down, (var(--data1) - 1) / 8);
  --dr: mod(var(--data2) - 1, 8);
  --ru: round(down, (var(--data2) - 1) / 8);
  /* 取れるマス開始位置 */
  --Wr: calc(var(--W) + var(--r));
  --Wru: calc(var(--W) + var(--ru));
  --Hru: calc(var(--H) - var(--ru));
  --Hu: calc(var(--H) - var(--u));
  --Wul: calc(var(--W) - var(--ul));
  --Hul: calc(var(--H) - var(--ul));
  --Wl: calc(var(--W) - var(--l));
  --Wld: calc(var(--W) - var(--ld));
  --Hld: calc(var(--H) + var(--ld));
  --Hd: calc(var(--H) + var(--d));
  --Wdr: calc(var(--W) + var(--dr));
  --Hdr: calc(var(--H) + var(--dr));
}
/* afterで数値化し、ターゲットとさせて、またcounterで伝える */
.board > div::after {
  /* wだけの場合でも高さが発生してしまうため1つはつけるようにする */
  --content: if(
    style((--wW: 0) and (--hH: 0)): counter(var(--nL), h8) counter(var(--pL), h) counter(var(--hL), w8) counter(var(--wL), w) '0';
    else: none;
  );
  content: var(--content);
}
.lr > div::after {
  counter-increment: lr1 calc(var(--data1) - 1) lr2 calc(var(--data2) - 1);
}
.rl > div::after {
  counter-increment: rl1 calc(var(--data1) - 1) rl2 calc(var(--data2) - 1);
}
.turn {
  /* ターン切り替え(短くしすぎると精度が悪くなる) */
  animation: turn linear 750ms infinite;
  /* 本来の条件 */
  --aps: if(
    style(--scan: 0): paused;
    else: running;
  );
  animation-play-state: var(--aps);
  /* なるべく同期させる */
  --help1: calc(var(--guide) - clamp(25, var(--guide), 50));
  --help2: calc(var(--guide) - clamp(75, var(--guide), 100));
  --pointer-events: if(
    style((--help1: 0) or (--help2: 0)): all;
    else: none;
  );
  pointer-events: var(--pointer-events);
}
/* 誤差を減らす(実際はboardの方のhover) */
.turn:hover:active {
  animation-play-state: running;
}
/* どちらも左上を原点とする */
.lr > div {
  --w: round(down, (sibling-index() - 1) / 8);
  --h: calc(7 - mod(sibling-index() - 1, 8));
}
.rl > div {
  --w: calc(7 - round(down, (sibling-index() - 1) / 8));
  --h: mod(sibling-index() - 1, 8);
}
.board > div {
  /* アクションと状態(短くしすぎると精度が悪くなる) */
  animation: gb linear 300ms forwards, gw linear 300ms forwards, bw steps(2, jump-none) 200ms infinite;
  /* 初期配置 */
  --init: if(
    style(
      ((--w: 3) and (--h: 3)) or
      ((--w: 4) and (--h: 4))
    ): 1;
    style(
      ((--w: 3) and (--h: 4)) or
      ((--w: 4) and (--h: 3))
    ): 2;
    else: var(--first);
  );
  /* 反転操作をするために配置されているかを分岐させておく */
  --state: if(
    style(--init: 0): 0;
    else: calc(1 + mod(var(--init) - 1 + var(--mode), 2));
  );
  /* マスの斜め＼座標 */
  --p: calc(var(--w) - var(--h) + 5);
  /* マスの斜め／座標 */
  --n: calc(var(--w) + var(--h) - 2);
  /* ー軸識別用 */
  --wL: if(
    style(--w: 0): w0;
    style(--w: 1): w1;
    style(--w: 2): w2;
    style(--w: 3): w3;
    style(--w: 4): w4;
    style(--w: 5): w5;
    style(--w: 6): w6;
    else: w7;
  );
  /* ｜軸識別用 */
  --hL: if(
    style(--h: 0): h0;
    style(--h: 1): h1;
    style(--h: 2): h2;
    style(--h: 3): h3;
    style(--h: 4): h4;
    style(--h: 5): h5;
    style(--h: 6): h6;
    else: h7;
  );
  /* ＼軸識別用 */
  --pL: if(
    style(--p: 0): p0;
    style(--p: 1): p1;
    style(--p: 2): p2;
    style(--p: 3): p3;
    style(--p: 4): p4;
    style(--p: 5): p5;
    style(--p: 6): p6;
    style(--p: 7): p7;
    style(--p: 8): p8;
    style(--p: 9): p9;
    style(--p: 10): p10;
    else: none;
  );
  /* ／軸識別用 */
  --nL: if(
    style(--n: 0): n0;
    style(--n: 1): n1;
    style(--n: 2): n2;
    style(--n: 3): n3;
    style(--n: 4): n4;
    style(--n: 5): n5;
    style(--n: 6): n6;
    style(--n: 7): n7;
    style(--n: 8): n8;
    style(--n: 9): n9;
    style(--n: 10): n10;
    else: none;
  );
  /* 判定を簡単にする */
  --stateturn: calc(var(--state) + 3 * var(--turn) - 2 * var(--state) * var(--turn));
  /* 判定用カウンター（取れるマス数）をリセット */
  --counter-reset: if(
    style(--stateturn: 1): var(--wL) -7 var(--hL) -7 var(--pL) -7 var(--nL) -7;
    else: none;
  );
  counter-reset: var(--counter-reset);
  /* 判定用カウンター（取れるマス数）を進める、緑なら判定にかかる */
  --counter-increment: if(
    style(--state: 0): var(--wL) 7 var(--hL) 7 var(--pL) 7 var(--nL) 7;
    style(--stateturn: 2): var(--wL) var(--hL) var(--pL) var(--nL);
    else: none;
  );
  counter-increment: var(--counter-increment);
  /* noneはcounterで有効になってしまうので */
  --pLcounter: if(
    style(--pL: none): '';
    else: counter(var(--pL), valid);
  );
  --nLcounter: if(
    style(--nL: none): '';
    else: counter(var(--nL), valid);
  );
  /* 緑の場合に置ける状態にあるか */
  --place: if(
    style(--state: 0): counter(var(--wL), valid) counter(var(--hL), valid) var(--pLcounter) var(--nLcounter);
    else: none;
  );
  /* アクションは押していなければ動かない */
  --wW: calc(var(--W) - var(--w));
  --hH: calc(var(--H) - var(--h));
  /* 駒配置操作。押しているマスで有効、ターンにあったアニメーションを有効にする。 */
  --aps1: if(
    style((--wW: 0) and (--hH: 0)): if(
      style(--turn: 0): running, paused;
      else: paused, running;
    );
    else: paused, paused;
  );
  /* 反転操作の判定のために設定 */
  --wWhH: calc(abs(var(--wW)) - abs(var(--hH)));
  --wWr: calc(var(--w) - clamp(var(--W), var(--w), var(--Wr)));
  --wWru: calc(var(--w) - clamp(var(--W), var(--w), var(--Wru)));
  --hHru: calc(var(--h) - clamp(var(--Hru), var(--h), var(--H)));
  --hHu: calc(var(--h) - clamp(var(--Hu), var(--h), var(--H)));
  --wWul: calc(var(--w) - clamp(var(--Wul), var(--w), var(--W)));
  --hHul: calc(var(--h) - clamp(var(--Hul), var(--h), var(--H)));
  --wWl: calc(var(--w) - clamp(var(--Wl), var(--w), var(--W)));
  --wWld: calc(var(--w) - clamp(var(--Wld), var(--w), var(--W)));
  --hHld: calc(var(--h) - clamp(var(--H), var(--h), var(--Hld)));
  --hHd: calc(var(--h) - clamp(var(--H), var(--h), var(--Hd)));
  --wWdr: calc(var(--w) - clamp(var(--W), var(--w), var(--Wdr)));
  --hHdr: calc(var(--h) - clamp(var(--H), var(--h), var(--Hdr)));
  /* 反転操作。どこも押されていなければ無効、押されているマスは無効、関係ないマスも無効 */
  --aps2: if(
    style(--scan: 0): paused;
    style((--wW: 0) and (--hH: 0)): paused;
    style(
      ((--wWr: 0) and (--hH: 0)) or
      ((--wWru: 0) and (--hHru: 0) and (--wWhH: 0)) or
      ((--wW: 0) and (--hHu: 0)) or
      ((--wWul: 0) and (--hHul: 0) and (--wWhH: 0)) or
      ((--wWl: 0) and (--hH: 0)) or
      ((--wWld: 0) and (--hHld: 0) and (--wWhH: 0)) or
      ((--wW: 0) and (--hHd: 0)) or
      ((--wWdr: 0) and (--hHdr: 0) and (--wWhH: 0))
    ): running;
    else: paused;
  );
  animation-play-state: var(--aps1), var(--aps2);
  /* 触れたら変わるまで持っていく */
  --help1: calc(var(--guide) - clamp(1, var(--guide), 70));
  --pointer-events: if(
    style((--scan: 0) and (--help1: 0)): all;
    else: none;
  );
  pointer-events: var(--pointer-events);
  /* マス更新（ここでは処理せず押しているマスを全体に伝える） */
  &:hover:active {
    /* 初期値と最初のマスを区別するために1ずらしておく */
    counter-increment: var(--counter-increment) WH calc(8 * var(--h) + var(--w) + 1);
  }
}
/* 取得したマス数を伝える */
@counter-style w8 {
  system: symbolic;
  symbols: '00000000';
  range: 1 6;
  fallback: invalid;
}
@counter-style w {
  system: symbolic;
  symbols: '0';
  range: 1 6;
  fallback: invalid;
}
@counter-style h8 {
  system: symbolic;
  symbols: '\A\A\A\A\A\A\A\A';
  range: 1 6;
  fallback: invalid;
}
@counter-style h {
  system: symbolic;
  symbols: '\A';
  range: 1 6;
  fallback: invalid;
}
/* 伝わったマス数を上に伝える */
@counter-style zero {
  system: symbolic;
  symbols: '0';
  fallback: invalid;
}
@counter-style ln {
  system: symbolic;
  symbols: '\A';
  fallback: invalid;
}
/* 取れるマス数の範囲 */
@counter-style valid {
  system: cyclic;
  symbols: "置ける\A";
  range: 1 6;
  fallback: invalid;
}
/* 無効 */
@counter-style invalid {
  system: cyclic;
  symbols: "";
}
/* ターン切り替え。同期させるためにguideで修正力を持たせる */
@keyframes turn {
  to {
    --turn: 1;
    --guide: 100;
  }
}
/* 緑→黒。同期させるためにguideで修正力を持たせる */
@keyframes gb {
  to {
    --first: 1;
    --guide: 100;
  }
}
/* 緑→白。同期させるためにguideで修正力を持たせる */
@keyframes gw {
  to {
    --first: 2;
    --guide: 100;
  }
}
/* 黒↔︎白 */
@keyframes bw {
  to {
    --mode: 1;
  }
}
/* 横用 */
@keyframes scan1 {
  to {
    --data1: calc(85dvmin / 1px);
  }
}
/* 縦用 */
@keyframes scan2 {
  to {
    --data2: calc(85dvmin / 1px);
  }
}
/* アニメーションで変えれるようにする */
@property --turn {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --guide {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --mode {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --data1 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
@property --data2 {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}
/* ここで設定しておかないとif文でcalcが解釈計算されない */
@property --scan {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --help1 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --help2 {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --state {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --stateturn {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --w {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --h {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --p {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --n {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --wW {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --hH {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
@property --wWhH {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWr {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWru {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHru {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHu {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWul {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHul {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWl {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWld {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHld {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHd {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --wWdr {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --hHdr {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}