/* Shogi lesson marks (public/js/learn-shogi.js). They sit in their own layer
   between the board's highlights and the koma, so a ring around a target or
   a ✕ never hides the piece or the board's own legal-move dots. */
.yl-sg-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.yl-sg-layer > div { position: absolute; width: 11.111%; height: 11.111%; }

/* The promotion zone: the far three ranks, ending on the 星 dots. */
.yl-sg-layer > .yl-sg-zone { left: 0; top: 0; width: 100%; height: 33.333%; background: linear-gradient(180deg, #1d3d5a2e, #1d3d5a14); box-shadow: inset 0 -2.5px 0 #1d3d5a8c; }

/* A piece to capture: a soft vermilion halo and ring under the koma. */
.yl-sg-target::before { content: ''; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle, #c8392b33 0 48%, #c8392b00 72%); box-shadow: 0 0 0 2px #b3261eb8, 0 0 10px #b3261e55; animation: ylSgPulse 2.2s ease-in-out infinite; }
/* The piece to move: the same ring in the site's navy, until it is picked
   up (gold would vanish into the kaya). */
.yl-sg-hero::before { content: ''; position: absolute; inset: 3%; border-radius: 50%; background: radial-gradient(circle, #ffffffa6 0 46%, #ffffff00 72%); box-shadow: 0 0 0 2.5px #1d3d5ae0, 0 0 12px #1d3d5a66; animation: ylSgPulse 1.6s ease-in-out infinite; }
@keyframes ylSgPulse { 0%, 100% { opacity: .75; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.02); } }

/* A square the picked-up piece cannot use; on a piece it cannot take, a
   small badge in the corner above the koma. */
.yl-sg-layer.is-top { z-index: 4; }
.yl-sg-x::before, .yl-sg-x::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: max(2px, 5%); border-radius: 2px; background: #a3261ec2; box-shadow: 0 0 0 .5px #fff6e080; }
.yl-sg-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.yl-sg-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.yl-sg-x.is-on::before, .yl-sg-x.is-on::after { left: 82%; top: 18%; width: 18%; height: max(2px, 4%); background: #fff; box-shadow: none; }
.yl-sg-x.is-on { background: radial-gradient(circle at 82% 18%, #a3261e 0 15%, transparent 16%); }

/* Squares a step points at (the pieces you tapped, the opening's moves). */
.yl-sg-spot { box-shadow: inset 0 0 0 3px #1d3d5acc; background: #ffffff40; }
.yl-sg-spot.is-theirs { box-shadow: inset 0 0 0 3px #b3261e; background: #c8392b24; }
.yl-sg-spot.is-to { box-shadow: inset 0 0 0 2px #1d3d5a99; background: none; }
.yl-sg-spot.is-to::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34%; height: 34%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px dashed #1d3d5acc; }

/* A word on the board itself (the repetition count). */
.yl-sg-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; padding: 6px 14px; border-radius: 16px; background: #13283af0; color: #f3e6c6; font: 600 clamp(12px, 2.4cqw, 15px)/1.4 var(--ya-font-mincho, serif); white-space: nowrap; pointer-events: none; box-shadow: 0 4px 14px #0004; transition: background .2s; }
.yl-sg-tag.is-four { background: #8f2a1df2; color: #fff3df; }

/* A piece in hand waiting to be dropped. */
.yl-hand-hint .sg-stand-bottom .sg-hand-piece { filter: drop-shadow(0 0 2px #1d3d5a) drop-shadow(0 0 6px #1d3d5a99); }
.yl-hand-hint .sg-stand-bottom .sg-hand-piece { animation: ylSgLift 1.6s ease-in-out infinite; }
@keyframes ylSgLift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* The three ways out of check, ticked off in the goal line. */
.yl-sg-ways { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.yl-sg-way { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 12px; border: 1px solid #e0cf9f; background: #fffdf7; font-size: 13px; color: #6f6040; }
.yl-sg-way.is-done { background: #e8f2ea; border-color: #9cc6aa; color: #23523b; }
.yl-sg-way.is-done::before { content: '✓'; margin-right: 5px; font-weight: 700; }
.yl-goal:has(.yl-sg-ways) { flex-wrap: wrap; }
.yl-goal:has(.yl-sg-ways) .yl-goal-text { flex: 1 1 200px; }

@media (prefers-reduced-motion: reduce) {
  .yl-sg-target::before, .yl-sg-hero::before, .yl-hand-hint .sg-stand-bottom .sg-hand-piece { animation: none; }
}