/* Metal, stone, flame and water; all surfaces are native CSS, with no idle work. */
.sumo-app .board{position:relative;isolation:isolate;gap:2px;padding:clamp(5px,1.1vw,10px);border:5px solid #202329;border-radius:4px;background:linear-gradient(135deg,#42454b,#111317 32%,#30333a 75%,#101114);box-shadow:0 0 0 1px #73747b,inset 0 0 0 1px #777982,inset 0 0 0 3px #090a0d,0 10px 24px #0008}
.sumo-app .cell{--stone:#34373d;border:1px solid #4a4d53;border-radius:1px;background:linear-gradient(145deg,#ffffff06,#0002),repeating-linear-gradient(114deg,#ffffff02 0 1px,transparent 1px 5px),var(--stone);box-shadow:inset 0 1px #ffffff0c,inset 0 -1px #0008;overflow:visible}
.sumo-app .cell.center{--stone:#101216;border-color:#42464f;background:linear-gradient(145deg,#ffffff03,#0006),var(--stone)}
.sumo-app .cell:hover:not(:disabled){background:linear-gradient(#ffffff0c,#ffffff04),var(--stone)}
.sumo-app .piece{--piece-color:#b28bea;--rim:#7851a8;position:relative;width:76%;height:76%;color:var(--piece-color);border:2px solid #08090d;background:radial-gradient(ellipse at 30% 20%,#34343d 0,#1d1e25 45%,#0b0c11 78%);box-shadow:inset 0 0 0 2px var(--rim),inset 0 0 0 5px #111219,0 4px 5px #000b;filter:none}
.sumo-app .piece::before{content:"";position:absolute;inset:5px;border:1px solid #ffffff19;border-radius:50%;pointer-events:none}
.sumo-app .piece.red{--piece-color:#f0787d;--rim:#b6424b;background:radial-gradient(ellipse at 30% 20%,#393036 0,#251d22 45%,#0d0b10 78%)}
.sumo-app .piece-symbol{display:block;width:70%;height:70%;filter:drop-shadow(0 1px 1px #000);overflow:visible}
.sumo-app .piece-symbol text{font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP","Yu Gothic","Hiragino Kaku Gothic ProN",serif;font-size:60px;font-weight:600}
.sumo-app .cell.last{box-shadow:inset 0 0 0 2px #a38bb8}
.sumo-app .cell.destination{box-shadow:inset 0 0 0 2px #a8edcc}
.sumo-app .cell.destination::after{content:"";position:absolute;right:4px;bottom:4px;width:13%;height:13%;min-width:5px;min-height:5px;background:#b5f7d8;border:1px solid #17362a;border-radius:50%;pointer-events:none}
.sumo-app .cell.selected,.sumo-app .cell.preview-target{outline:3px solid #f7d995;outline-offset:-3px;z-index:2}
.sumo-app .cell.preview-target{box-shadow:inset 0 0 0 5px #f7d99533}
.sumo-app .cell:focus-visible{outline:3px solid #fff;outline-offset:-3px;z-index:3}
.sumo-app .blue-label{color:#c6a9f0}.sumo-app .red-label{color:#f6a3a6}
.sumo-app .player{min-width:0;max-width:calc(50% - 4px);border:1px solid transparent;line-height:1.45}
.sumo-app .player.is-turn{border-color:currentColor}
.sumo-app .blue-label.is-turn{background:#c6a9f026}.sumo-app .red-label.is-turn{background:#f6a3a626}
@media(max-width:380px){.sumo-app .board{border-width:3px;padding:4px;gap:1px}.sumo-app .piece{border-width:1px}.sumo-app .piece::before{inset:4px}.sumo-app .cell.selected,.sumo-app .cell.preview-target{outline-width:2px}}
/* Short-lived, clipped ghosts never take input or affect the board layout. */
.sumo-app .board-frame{position:relative}
.sumo-app .board-motion{position:absolute;z-index:4;overflow:hidden;pointer-events:none;contain:layout paint}
.sumo-app .board-motion .motion-piece{position:absolute;margin:0;pointer-events:none;transform-origin:center;will-change:transform,opacity}
.sumo-app .piece.motion-hidden{visibility:hidden}