.tactile-art, .piece-shadow { display: none; }
:root[data-art='tactile'] { --sq-light: #bfc7b1; --sq-dark: #98a68f; }
:root[data-art='tactile'] .classic-art { display: none; }
:root[data-art='tactile'] .tactile-art,
:root[data-art='tactile'] .pc > .piece-shadow { display: block; }
:root[data-art='tactile'] .pc::before { display: none; }
:root[data-art='tactile'] .pc > .tactile-art { filter: none; transform-origin: 50% 62%; }
.piece-puppet, .sprite-image, .sprite-face, .scissor-rig, .piece-shadow, .shadow-cast, .shadow-contact, .shadow-shape, .paper-mesh, .paper-shadow-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.piece-puppet { transform-origin: 50% 77%; }
.sprite-image { object-fit: contain; }
.sprite-face { overflow: visible; }
.scissor-rig, .scissor-part { transform-origin: 50% 47.5%; }
.scissor-rig { scale: .95; }
.b .tactile-art .scissor-part, .b .scissor-pin, .scissor-fragment.b .fragment-surface { filter: brightness(.95); }
.scissor-pin { position: absolute; left: 45.4%; top: 42.9%; width: 9.2%; height: 9.2%; border-radius: 50%; border: .75px solid #625540; background: radial-gradient(circle at 34% 25%, #fffef4 7%, #efe0b7 43%, #a38a56 77%, #5d523c); box-shadow: 0 1px 1px #302b2559; }
.b .scissor-pin { border-color: #263b49; background: radial-gradient(circle at 34% 25%, #e1e7e6 7%, #88a3b5 43%, #45617a 77%, #283e51); }
.piece-shadow { transform-origin: 50% 60%; }
.shadow-shape { filter: url(#tactile-cast-filter); scale: var(--shadow-size, 1); transform-origin: 50% 47.5%; }
.shadow-contact .shadow-shape { filter: url(#tactile-contact-filter); scale: 1; }
.shadow-cast { transform: translate(var(--shadow-x, 4%), var(--shadow-y, 11%)); opacity: var(--shadow-opacity, .36); transition: transform 160ms, opacity 160ms, filter 160ms; }
.shadow-contact { transform: translate(0, 2%); opacity: var(--contact-opacity, .25); transition: opacity 160ms; }
:root[data-art='tactile'] .pc.is-selected > .piece-shadow .shadow-cast,
:root[data-art='tactile'] .pc.is-hovered > .piece-shadow .shadow-cast { transform: translate(calc(var(--shadow-x, 4%) + 2%), var(--shadow-y, 11%)) scale(1.025); opacity: calc(var(--shadow-opacity, .36) * .722222); filter: blur(.5px); }
:root[data-art='tactile'] .pc.is-selected .shadow-contact { opacity: calc(var(--contact-opacity, .25) * .44); }
:root[data-art='tactile'] .pc.ghost > .tactile-art { translate: 0 -15%; filter: none; }
:root[data-art='tactile'] .ghost .shadow-cast { transform: translate(calc(var(--shadow-x, 4%) + 6%), calc(var(--shadow-y, 11%) + 8%)) scale(1.09); filter: blur(1.3px); opacity: calc(var(--shadow-opacity, .36) * .638889); }
:root[data-art='tactile'] .ghost .shadow-contact { opacity: 0; }
:root[data-art='tactile'] .pc.lifted { opacity: 0; }
:root[data-art='tactile'] .pc.glow-danger > .tactile-art { filter: drop-shadow(0 0 2px #b8604266); }
:root[data-art='tactile'] .pc.glow-prey > .tactile-art { filter: drop-shadow(0 0 2px #39845e66); }
:root[data-art='tactile'] .pc.glow-immediate > .tactile-art { filter: drop-shadow(0 0 3px #dfc77d90); }
:root[data-art='tactile'] .pc:is(.is-selected,.is-hovered,.ghost,.attacking,.idling) .tactile-art .eyes { opacity: 1; }
:root[data-art='tactile'] .eyes { transition: opacity 180ms; }
:root[data-art='tactile'] .board-frame { padding: 5px; border: 1px solid #a6b19b; border-radius: 17px; background: linear-gradient(135deg,#e5e9d9,#c5cfba 42%,#b0bca5); box-shadow: 0 3px 3px #35452d26, 0 9px 15px -5px #36463045, 0 19px 28px -15px #3743303b, inset 0 2px 2px #ffffffe0, inset 0 -3px 3px #78866b88; }
:root[data-art='tactile'] .board-stage, :root[data-art='tactile'] .board { border-radius: 11px; }
:root[data-art='tactile'] .board-stage::after { content: ''; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px #62755555, inset 1px 2px 4px #3044262e; }
:root[data-art='tactile'] .board::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .028; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%235a624a' d='M0 0h160v160H0z' filter='url(%23n)'/%3E%3C/svg%3E"); }
:root[data-art='tactile'] .pieces { z-index: 4; }
:root[data-art='tactile'] .effects { z-index: 3; }
:root[data-art='tactile'] .attack-arrows { z-index: 5; }
.capture-fragment .eyes, .capture-fragment .piece-shadow { display: none !important; }
.capture-fragment > .piece-art { translate: none !important; filter: none !important; }
.material-fragment { position: absolute; width: 12.5%; height: 12.5%; pointer-events: none; transform-origin: 50% 47.5%; }
.fragment-shadow { position: absolute; inset: 0; opacity: calc(var(--shadow-opacity, .36) * .583333); transform: translate(var(--shadow-x, 4%), calc(var(--shadow-y, 11%) + 1%)); filter: blur(.6px); transform-origin: 50% 47.5%; }
.fragment-surface { position: absolute; inset: 0; transform-origin: 50% 47.5%; }
.scissor-fragment :is(.fragment-surface, .fragment-shadow) { scale: .95; }
.impact-dust { position: absolute; width: 5%; height: 2%; border-radius: 50%; background: radial-gradient(ellipse,#f3e9ce80,transparent 70%); filter: blur(1px); }
.cut-flash { position: absolute; width: 7%; height: .22%; border-radius: 100%; background: #fffae2; box-shadow: 0 0 3px #fff9d088; transform-origin: center; }
.paper-mesh { overflow: visible; }
.paper-fold { position: absolute; z-index: 7; pointer-events: none; }
.paper-fold .eyes { display: none; }
.stone-dust, .stone-cloud { position: absolute; z-index: 5; width: 37.5%; height: 37.5%; pointer-events: none; }
@media (max-width: 719px) and (orientation: portrait) {
  :root[data-art='tactile'] .is-playing .board-frame { padding: 5px; border-width: 1px; border-radius: 14px; }
  :root[data-art='tactile'] .is-playing .board,
  :root[data-art='tactile'] .is-playing .board-stage { border-radius: 7px; }
}