/* リーチした席をX字の三角で彩る。牌・情報・操作には重ならない背面の装飾。 */
.riichi-fields {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
/* grid itemの重なり順を固定し、南席の白い手牌も装飾で染めない。 */
#game-table > .player-area { z-index: 1; }
.riichi-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* 軸色をくすませず表示し、模様を含むX区画全体を10%透過する。 */
    background: var(--riichi-main);
    opacity: .9;
}
.riichi-field[hidden] { display: none; }
/* きよたかの主色は無彩色の黒。卓の暖色を透かして茶色に寄せない。 */
.riichi-field[data-character="kiyotaka_photo"] { opacity: 1; }
.riichi-field.seat-south { clip-path: polygon(0 100%, 100% 100%, 50% 50%); }
.riichi-field.seat-east { clip-path: polygon(100% 0, 100% 100%, 50% 50%); }
.riichi-field.seat-north { clip-path: polygon(0 0, 100% 0, 50% 50%); }
.riichi-field.seat-west { clip-path: polygon(0 0, 0 100%, 50% 50%); }
.riichi-field-pattern {
    /* 回転前の横1周期・縦12列。従来の表示倍率13/12を保つ。 */
    --riichi-pattern-width: 500.370233px;
    --riichi-pattern-height: 2600px;
    position: absolute;
    /* 20度回しても、横長・縦長の画面の四隅まで覆う。 */
    inset: -25vmax;
    transform: rotate(-20deg);
    background-image: var(--riichi-pattern);
    background-size: var(--riichi-pattern-width) var(--riichi-pattern-height);
    background-repeat: repeat;
    opacity: .68;
    /* 模様の座標で右上25度へ流すと、画面上では右上45度になる。
       速度は従来の1.3倍（約15.011px/秒）。各軸を自身の1周期で戻す。 */
    /* 席ごとに出る時刻が違っても模様の位置をそろえるため、
       表示のたびに riichifield.js の driftDelay が負の animation-delay を入れる。 */
    animation: riichiPatternDriftX 36.779264s linear infinite,
               riichiPatternDriftY 409.838136s linear infinite;
}
@keyframes riichiPatternDriftX {
    from { background-position-x: 0; }
    to { background-position-x: var(--riichi-pattern-width); }
}
@keyframes riichiPatternDriftY {
    from { background-position-y: 0; }
    to { background-position-y: calc(-1 * var(--riichi-pattern-height)); }
}
@media (prefers-reduced-motion: reduce) {
    .riichi-field-pattern { animation: none; will-change: auto; }
    .mimi-wave, .roa-target { animation: none; }
}

/* 和了者の色・模様を、和了演出からリザルトまで卓全体に広げる。 */
.riichi-field[data-expanded="true"] { clip-path: none; }