.yilan .yilan-stage { display: flex; justify-content: center; }
.yilan .yilan-canvas { display: block; border-radius: 10px; touch-action: none; max-width: 100%; }
.yilan .yilan-wrap { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.yilan .yilan-wrap input { accent-color: var(--accent); margin: 0; }
.yilan .yilan-pad { display: none; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 52px); gap: 8px; justify-content: center; margin-top: 12px; }
.yilan .yilan-pad .g-btn { font-size: 20px; padding: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.yilan .yilan-pad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.yilan .yilan-pad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.yilan .yilan-pad [data-dir="down"] { grid-column: 2; grid-row: 2; }
.yilan .yilan-pad [data-dir="right"] { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .yilan .yilan-pad { display: grid; } }