/* Sidebar width is page layout; visuals belong to chess-sidebar.css. */
.position-sidebar-stack { position: relative; z-index: 1; width: 330px; flex-shrink: 0; }
.position-sidebar-stack > chess-sidebar { height: 100%; }
.position-sidebar-layer { position: absolute; inset: 0; pointer-events: none; }
.position-sidebar-layer > chess-sidebar { pointer-events: auto; }
.position-board-tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-top: 16px; }
.position-board-tools > chess-button { min-width: 0; }
.position-board-tools > chess-button > button { padding-inline: 4px; font-size: 1.25rem; }
.position-board-tools > chess-button > button:is([aria-pressed="true"], [aria-checked="true"]) { border-color: transparent; background: var(--button-selected-bg); }
.position-board-tools > chess-button > button:is([aria-pressed="true"], [aria-checked="true"]):not(:focus-visible) { outline: none; }
/* Neutral interface borders, scoped to the position editor. */
body.position-editor {
  --panel-border: #e2e8f0;
  --accent-dark: #347454;
  --button-accent: #347454;
  --button-selected-bg: #eaf4ee;
  --button-border: #dce5df;
  --sidebar-background: #f7f9f8;
  --icon-btn-border-white: #cbd5e1;
}
.position-shell { max-width: 1500px; margin: 0 auto; }
.position-layout { display: flex; justify-content: center; gap: 18px; align-items: flex-start; }
.position-board-panel { position: relative; min-width: 0; flex: 1 1 min(700px, calc(100dvh - 210px)); max-width: none; }
.position-drawing-overlay { position: absolute; z-index: 6; pointer-events: none; }
.position-drawing-overlay > span { position: absolute; inset: 0; }
.position-drawing-overlay svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-plain-route svg path { stroke: #15781b; stroke-width: 2.6; opacity: .76; }
.position-plain-route svg circle { fill: #15781b; stroke: none; opacity: .5; }
.position-plain-route .position-plain-preview-arrow { stroke-width: 1.35; }
.position-plain-route .position-plain-preview-head { fill: #15781b; stroke: none; opacity: .76; }
.drawing-style-preview .position-plain-route::after { content: ""; position: absolute; right: 12%; bottom: 12%; width: 28%; aspect-ratio: 1; border-radius: 2px; background: #15781b80; }
.position-magic-route svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-magic-glow { stroke: #fff3a3; stroke-width: 2.8; opacity: .4; filter: drop-shadow(0 0 1px #ffd12b); }
.position-magic-trail { stroke: #ffe65a; stroke-width: .8; stroke-dasharray: .2 2.4; animation: position-route-flow 2.5s linear infinite; }
.position-magic-star { position: absolute; width: var(--route-size, 3.4%); aspect-ratio: 1; background: var(--route-color, #ffe878); clip-path: polygon(50% 0, 62% 34%, 98% 38%, 71% 61%, 80% 97%, 50% 78%, 20% 97%, 29% 61%, 2% 38%, 38% 34%); transform: translate(-50%, -50%); animation: position-route-twinkle 1.8s ease-in-out infinite; animation-delay: var(--route-delay, 0s); }
@keyframes position-route-flow { to { stroke-dashoffset: -10.4; } }
@keyframes position-route-twinkle { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.7) rotate(-10deg); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(20deg); } }
.position-editor .board-wrap { width: min(700px, 100%); margin-left: auto; }
.position-sidebar-stack section + section, .position-sidebar-stack details { margin-top: 24px; }
.position-board-tools + section { margin-top: 20px; }
.position-sidebar-stack h2 { margin: 0 0 10px; font-size: 1rem; }
.emoji-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.emoji-heading-row h2 { flex: 0 0 auto; margin: 0; }
.position-sidebar-stack label { display: block; font-size: .8rem; margin: 8px 0; }
.position-sidebar-stack input, .position-sidebar-stack select, .position-sidebar-stack textarea { display: block; width: 100%; box-sizing: border-box; padding: 8px; margin-top: 4px; border: 1px solid var(--panel-border); border-radius: 8px; font: inherit; background: #fff; color: var(--ink); user-select: text; }
.position-sidebar-stack :not(chess-button) > button { border: 1px solid var(--panel-border); border-radius: 8px; padding: 8px 10px; font: inherit; background: #fff; color: var(--ink); cursor: pointer; }
.position-sidebar-stack :not(chess-button) > button:disabled { opacity: .5; cursor: default; }
.position-sidebar-stack :not(chess-button) > button[aria-pressed="true"] { outline: 2px solid var(--accent-dark); background: #eef2f6; }
.position-sidebar-stack :is(input, select, textarea):focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 2px; }
.piece-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.drawing-style-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.drawing-style-tools > chess-button[type="preview"] > button { padding: 4px; }
.drawing-emoji-tools { grid-column: span 4; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 0; min-width: 0; min-height: 0; width: 100%; box-sizing: border-box; contain: size; align-self: stretch; border: 2px solid #e2e8f0; border-radius: 10px; background: transparent; }
.drawing-style-tools .drawing-emoji-tools > chess-button { aspect-ratio: auto; min-width: 0; min-height: 0; height: 100%; }
.drawing-style-tools .drawing-emoji-tools .drawing-style-preview, .drawing-style-tools .drawing-emoji-tools #drawing-emoji-choice { width: auto; height: 100%; max-width: 100%; aspect-ratio: 1; }
.drawing-emoji-tools chess-button[type="preview"] > button { padding: 4px; border: 0; border-radius: 0; background: transparent; }
.drawing-emoji-tools #open-drawing-emoji-picker > button { position: relative; padding: 4px; border: 0; border-radius: 0 8px 8px 0; background: transparent; }
.drawing-emoji-tools #drawing-emoji-choice { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1; border-radius: 5px; background: #fff0f6; box-shadow: 0 1px 3px #24271824, inset 0 0 0 1px #ffffff70; font-size: 1.35rem; }
.drawing-emoji-tools chess-button > button[aria-pressed="true"] { background: transparent; }
.drawing-emoji-tools chess-button > button[aria-pressed="true"] .drawing-style-preview { outline: 3px solid var(--button-accent, #347454); outline-offset: -3px; }
.drawing-style-tools #drawing-clear > button { padding: 4px; border: 2px solid #e2e8f0; background: #fff; font-size: 1.65rem; }
.drawing-style-tools #drawing-clear > button:hover:not(:disabled) { border-color: #fca5a5; background: #fff1f2; }
.drawing-style-tools #drawing-clear > button:disabled { opacity: .6; }
.drawing-style-preview { position: relative; display: block; width: 100%; aspect-ratio: 1; height: auto; overflow: hidden; border: 0; border-radius: 5px; background: #d5e0c3; box-shadow: 0 1px 3px #24271824, inset 0 0 0 1px #ffffff70; }
.drawing-style-preview--magic { border-color: #505b7d; background: radial-gradient(ellipse at 55% 45%, #414b73 0%, #252f52 68%, #1c2440 100%); box-shadow: 0 1px 4px #151b3060, inset 0 0 0 1px #ffffff20; }
.drawing-style-preview--neon { border-color: #245b68; background: radial-gradient(ellipse at center, #183b4b, #102631); box-shadow: 0 1px 4px #10202a60, inset 0 0 0 1px #9afaff20; }
.drawing-style-preview--contrast { border-color: #475569; background: linear-gradient(145deg, #edf3f6, #cbd5dc); }
.drawing-style-preview > span { position: absolute; inset: 0; }
.drawing-style-preview svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.drawing-style-preview .position-magic-trail { stroke-width: 2; }
.drawing-style-preview .position-magic-star { width: 27.2%; }
.drawing-style-preview .position-magic-trail, .drawing-style-preview .position-magic-star { animation: none; }
.position-neon-route svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-neon-glow { stroke: #41eaff; stroke-width: 3.8; opacity: .72; filter: drop-shadow(0 0 2px #41eaff) drop-shadow(0 0 5px #00b8ff); }
.position-neon-trail { stroke: #d7ffff; stroke-width: .85; }
.position-arrow-layer svg { pointer-events: none; }
.position-arrowhead { stroke: none !important; }
.position-arrowhead--plain { fill: #15781b !important; opacity: .76; }
.position-arrowhead--magic { fill: #ffe878 !important; }
.position-arrowhead--neon { fill: #d7ffff !important; }
.position-arrowhead--contrast { fill: #f59e0b !important; stroke: #263746 !important; stroke-width: .45; stroke-linejoin: round; }
.position-highlight-layer svg { pointer-events: none; }
.position-plain-arrow { fill: none; stroke: #15781b; stroke-width: 2.6; stroke-linecap: round; opacity: .76; }
.position-plain-highlight { fill: none; stroke: #15781b; stroke-width: 1.4; opacity: .76; }
.position-arrow-layer[data-mark-color="red"] .position-plain-arrow { stroke: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-plain-arrow { stroke: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-plain-arrow { stroke: #f9a825; }
.position-arrow-layer[data-mark-color="red"] .position-arrowhead { fill: #e53935 !important; }
.position-arrow-layer[data-mark-color="blue"] .position-arrowhead { fill: #1976d2 !important; }
.position-arrow-layer[data-mark-color="yellow"] .position-arrowhead { fill: #f9a825 !important; }
.position-highlight-layer[data-mark-color="red"] .position-plain-highlight { stroke: #e53935; }
.position-highlight-layer[data-mark-color="blue"] .position-plain-highlight { stroke: #1976d2; }
.position-highlight-layer[data-mark-color="yellow"] .position-plain-highlight { stroke: #f9a825; }
.position-arrow-layer[data-mark-color="red"] .position-magic-glow, .position-arrow-layer[data-mark-color="red"] .position-magic-trail,
.position-highlight-layer[data-mark-color="red"] .position-magic-glow, .position-highlight-layer[data-mark-color="red"] .position-magic-trail { stroke: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-magic-glow, .position-arrow-layer[data-mark-color="blue"] .position-magic-trail,
.position-highlight-layer[data-mark-color="blue"] .position-magic-glow, .position-highlight-layer[data-mark-color="blue"] .position-magic-trail { stroke: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-magic-glow, .position-arrow-layer[data-mark-color="yellow"] .position-magic-trail,
.position-highlight-layer[data-mark-color="yellow"] .position-magic-glow, .position-highlight-layer[data-mark-color="yellow"] .position-magic-trail { stroke: #f9a825; }
.position-arrow-layer[data-mark-color="red"] .position-neon-glow, .position-arrow-layer[data-mark-color="red"] .position-neon-trail,
.position-highlight-layer[data-mark-color="red"] .position-neon-glow, .position-highlight-layer[data-mark-color="red"] .position-neon-trail { stroke: #e53935; filter: none; }
.position-arrow-layer[data-mark-color="blue"] .position-neon-glow, .position-arrow-layer[data-mark-color="blue"] .position-neon-trail,
.position-highlight-layer[data-mark-color="blue"] .position-neon-glow, .position-highlight-layer[data-mark-color="blue"] .position-neon-trail { stroke: #1976d2; filter: none; }
.position-arrow-layer[data-mark-color="yellow"] .position-neon-glow, .position-arrow-layer[data-mark-color="yellow"] .position-neon-trail,
.position-highlight-layer[data-mark-color="yellow"] .position-neon-glow, .position-highlight-layer[data-mark-color="yellow"] .position-neon-trail { stroke: #f9a825; filter: none; }
.position-arrow-layer[data-mark-color="red"] .position-contrast-trail, .position-arrow-layer[data-mark-color="red"] .position-contrast-head,
.position-highlight-layer[data-mark-color="red"] .position-contrast-frame { stroke: #e53935; fill: #e53935; }
.position-arrow-layer[data-mark-color="blue"] .position-contrast-trail, .position-arrow-layer[data-mark-color="blue"] .position-contrast-head,
.position-highlight-layer[data-mark-color="blue"] .position-contrast-frame { stroke: #1976d2; fill: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"] .position-contrast-trail, .position-arrow-layer[data-mark-color="yellow"] .position-contrast-head,
.position-highlight-layer[data-mark-color="yellow"] .position-contrast-frame { stroke: #f9a825; fill: #f9a825; }
.position-arrow-layer--neon .position-neon-glow { stroke-width: 2.8; }
.position-arrow-layer--neon .position-neon-trail { stroke-width: .9; }
.position-contrast-route svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.position-contrast-outline { stroke: #263746; stroke-width: 2.8; }
.position-contrast-trail { stroke: #f59e0b; stroke-width: 1.2; }
.position-contrast-frame { stroke: #f59e0b; stroke-width: 1.35; }
.position-contrast-head { fill: #f59e0b; stroke: #263746; stroke-width: .45; stroke-linejoin: round; }

.position-drawing-tools .task-intro { margin: 8px 0 0; }
.position-piece { display: block; width: 100%; height: 100%; min-height: 30px; background: center / contain no-repeat; }
.position-piece.king { background-image: var(--active-king); }.position-piece.queen { background-image: var(--active-queen); }
.position-piece.rook { background-image: var(--active-rook); }.position-piece.bishop { background-image: var(--active-bishop); }
.position-piece.knight { background-image: var(--active-knight); }.position-piece.pawn { background-image: var(--active-pawn); }
.position-piece.black.king { background-image: var(--black-king); }.position-piece.black.queen { background-image: var(--black-queen); }
.position-piece.black.rook { background-image: var(--black-rook); }.position-piece.black.bishop { background-image: var(--black-bishop); }
.position-piece.black.knight { background-image: var(--black-knight); }.position-piece.black.pawn { background-image: var(--black-pawn); }
.emoji-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 7px; }
.emoji-search { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 10px 0 12px; padding: 0 10px; border: 1px solid var(--panel-border); border-radius: 12px; background: #fff; color: var(--muted); transition: border-color .15s, box-shadow .15s, background .15s; }
.emoji-heading-row .emoji-search { flex: 0 1 185px; min-width: 120px; min-height: 38px; margin: 0; padding: 0 8px; gap: 6px; }
.emoji-search:focus-within { border-color: var(--accent-dark); background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-dark) 15%, transparent); }
.emoji-search > svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.position-sidebar-stack .emoji-search input { min-width: 0; flex: 1; width: auto; padding: 9px 0; margin: 0; border: 0; outline: 0; background: transparent; color: var(--ink); box-shadow: none; }
.position-sidebar-stack .emoji-search input:focus-visible { outline: 0; }
.position-sidebar-stack .emoji-search input::-webkit-search-cancel-button { display: none; }
.position-sidebar-stack .emoji-search input::placeholder { color: var(--muted); opacity: .85; }
.position-sidebar-stack .emoji-search button { flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: #e9e5da; color: var(--ink); font-size: 19px; line-height: 1; }
.position-sidebar-stack .emoji-search button:hover { background: #ddd7ca; }
.position-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.position-sidebar-stack dialog { width: min(560px, calc(100vw - 32px)); max-height: min(82dvh, 760px); overflow: auto; padding: 20px; border: 1px solid var(--panel-border); border-radius: 18px; background: var(--panel-bg); color: var(--ink); box-shadow: 0 20px 60px #17201640; }
.position-sidebar-stack dialog::backdrop { background: #17201688; backdrop-filter: blur(3px); }
.position-dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.position-dialog-heading h2 { margin: 0; }
.position-dialog-eyebrow { margin: 0 0 5px; color: var(--accent-dark); font-size: .7rem; font-weight: 750; letter-spacing: .12em; }
.position-dialog-description { max-width: 46ch; margin: 7px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.position-dialog-heading button { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; font-size: 1.5rem; }
.position-sidebar-stack dialog section + section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--panel-border); }
.position-sidebar-stack dialog h3 { margin: 0 0 10px; font-size: 1rem; }
.position-sidebar-stack summary { cursor: pointer; font-size: .9rem; }
.position-grid { position: absolute; display: grid; grid-template: repeat(8, 1fr) / repeat(8, 1fr); z-index: 10; }
.position-row { display: contents; }
.position-grid-cell { display: flex; min-width: 0; min-height: 0; }
.position-grid-cell[hidden] { display: none; }
.position-grid-cell > button { width: 100%; height: 100%; }
.position-grid .position-square { background: transparent; border: 0; padding: 0; border-radius: 0; min-height: 0; cursor: crosshair; }
.position-grid .position-square:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: -3px; background: #ffe3bd33; }
#position-status { font-size: .9rem; user-select: text; }
#position-status[data-error="true"] { color: #a32626; }
.position-edit-link { display: inline-block; font-size: .85rem; margin-top: 8px; }
.position-create-link { display: inline-block; margin: 8px 0; }
[hidden] { display: none !important; }
@media (max-width: 850px) {
  .position-layout { flex-wrap: wrap; }
  .position-editor #game-controls { position: static; right: auto; top: auto; transform: none; flex-basis: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .position-editor #game-controls .control-group { flex-direction: row; }
  .position-editor #game-controls > chess-spacer { width: .55rem; height: var(--icon-btn-size); }
  .position-board-panel { flex-basis: 100%; max-width: 100%; }
  .position-sidebar-stack { width: 100%; }
  .position-editor .board-wrap { max-width: 100%; margin: 0 auto; }
  .piece-palette { max-width: 330px; }
}
.adventure-enable { display: flex; gap: .5rem; align-items: center; }
.adventure-enable input { width: auto; }
#adventure-settings [hidden] { display: none; }
#adventure-effects, #adventure-legend { padding-left: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .position-magic-trail, .position-magic-star { animation: none; } }

#play-position:disabled { opacity: .5; cursor: default; }
.task-intro { color: var(--muted); font-size: .85rem; }
.emoji-role-tabs { display: flex; gap: 2px; padding: 0 2px; margin: .45rem 0 .8rem; border-bottom: 2px solid var(--panel-border); }
.emoji-role-tabs chess-button[type="tab"] > button { position: relative; min-height: 44px; padding: 8px 4px; border: 0; border-radius: 8px 8px 0 0; background: transparent; font-size: 1.4rem; }
.emoji-role-tabs chess-button[type="tab"] > button[aria-selected="true"] { background: var(--button-selected-bg); }
.emoji-role-tabs chess-button[type="tab"] > button[aria-selected="true"]::after { content: ""; position: absolute; inset: auto 0 -2px; height: 3px; border-radius: 2px 2px 0 0; background: var(--button-accent); }
.collectible-settings { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -.8rem 0 .8rem; padding: 10px 8px; border: 1px solid var(--button-border); border-top: 0; border-radius: 0 0 10px 10px; background: #eef5f1; }
.collectible-settings[hidden] { display: none; }
.collectible-presets { display: flex; align-items: center; gap: 6px; min-width: 0; }
.collectible-presets chess-button[type="chip"] { width: 36px; flex: 0 0 36px; }
.collectible-presets chess-button[type="chip"] > button { padding-inline: 0; }
.collectible-custom-points { display: flex; align-items: center; gap: 4px; min-width: 0; height: 36px; padding: 0 7px; border: 1px solid var(--panel-border); border-radius: 9px; background: #fff; color: var(--accent-dark); }
.collectible-custom-points:focus-within { border-color: var(--accent-dark); box-shadow: 0 0 0 2px #34745422; }
.collectible-custom-points svg { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; }
.position-sidebar-stack .collectible-custom-points input { width: 4.3rem; min-width: 0; margin: 0; padding: 5px 0; border: 0; outline: 0; background: transparent; color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; box-shadow: none; }
.position-sidebar-stack .collectible-custom-points input:focus-visible { outline: 0; }
.drawing-style-tools chess-button[data-mark-color="red"] { --drawing-preview-color: #e53935; }
.drawing-style-tools chess-button[data-mark-color="blue"] { --drawing-preview-color: #1976d2; }
.drawing-style-tools chess-button[data-mark-color="yellow"] { --drawing-preview-color: #f9a825; }
.drawing-style-tools chess-button:is([data-mark-color="red"], [data-mark-color="blue"], [data-mark-color="yellow"]) .drawing-style-preview svg path:not(.position-contrast-outline) { stroke: var(--drawing-preview-color); }
.drawing-style-tools chess-button .drawing-style-preview .position-plain-route svg circle { fill: var(--drawing-preview-color, #15781b); }
.drawing-style-tools chess-button .drawing-style-preview .position-plain-route::after { background: var(--drawing-preview-color, #15781b); opacity: .5; }
.drawing-style-tools chess-button .drawing-style-preview .position-magic-star { background: var(--drawing-preview-color, var(--route-color, #ffe878)); }
.drawing-style-tools chess-button .drawing-style-preview .position-contrast-head { fill: var(--drawing-preview-color, #ff785a); }
.drawing-style-tools chess-button:is([data-mark-color="red"], [data-mark-color="blue"], [data-mark-color="yellow"]) .drawing-style-preview :is(.position-magic-glow, .position-neon-glow) { filter: drop-shadow(0 0 1px var(--drawing-preview-color)); }

/* Playful routes share the controller's color while keeping distinct shapes. */
.playful-drawing { --playful-color: var(--drawing-preview-color, #ec4899); }
.playful-drawing--stars { --playful-color: var(--drawing-preview-color, #e6a400); }
.playful-drawing--bubbles { --playful-color: var(--drawing-preview-color, #12a9c6); }
.playful-route { stroke: var(--playful-color); stroke-width: .65; opacity: .65; fill: none; }
.playful-decoration { fill: var(--playful-color); stroke: #fff; stroke-width: .18; }
.playful-bubble { fill: var(--playful-color); fill-opacity: .25; stroke: var(--playful-color); stroke-width: .35; }
.playful-shine { fill: #fff; stroke: #fff; stroke-width: .35; }
.playful-wrapper { fill: var(--playful-color); stroke: var(--playful-color); stroke-width: .3; }
.playful-rainbow-band { fill: none; }
.playful-rainbow-band.band-0 { stroke: var(--drawing-preview-color, #f472b6); }
.playful-rainbow-band.band-1 { stroke: var(--drawing-preview-color, #facc15); }
.playful-rainbow-band.band-2 { stroke: var(--drawing-preview-color, #4ade80); }
.playful-rainbow-band.band-3 { stroke: var(--drawing-preview-color, #60a5fa); }
.position-arrow-layer[data-mark-color="red"], .position-highlight-layer[data-mark-color="red"] { --drawing-preview-color: #e53935; }
.position-arrow-layer[data-mark-color="blue"], .position-highlight-layer[data-mark-color="blue"] { --drawing-preview-color: #1976d2; }
.position-arrow-layer[data-mark-color="yellow"], .position-highlight-layer[data-mark-color="yellow"] { --drawing-preview-color: #f9a825; }
.drawing-style-preview--rainbow { background: #f4edff; }
.drawing-style-preview--stars { background: #252f52; }
.drawing-style-preview--bubbles { background: #e0f7fa; }
.drawing-style-preview--candy { background: #fff0f6; }
.playful-candy-emoji { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 3.4px; text-anchor: middle; dominant-baseline: central; fill: initial; stroke: none; }
.playful-drawing--candy .playful-route { stroke-width: .45; stroke-dasharray: .2 1.2; opacity: .6; }

.drawing-emoji-grid { flex: 1; min-height: 0; overflow-y: auto; align-content: start; max-height: none; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.drawing-emoji-sidebar .drawing-emoji-recent-section { flex: 0 0 auto; margin: 0; }
.drawing-emoji-recent-section[hidden] { display: none; }
.drawing-emoji-recent-section h2 { font-size: .85rem; color: var(--muted); }
.drawing-emoji-recent { grid-template-columns: repeat(5, minmax(0, 1fr)); max-height: 112px; overflow-y: auto; }
.emoji-heading-actions { display: flex; align-items: center; gap: 4px; }
#open-emoji-picker, #emoji-animation-toggle { box-sizing: border-box; width: 40px; height: 40px; flex: 0 0 40px; margin: 0; }
#open-emoji-picker > button { width: 40px; height: 40px; min-height: 40px; padding: 0; }
.drawing-emoji-search { display: flex; align-items: center; gap: 9px; min-height: 44px; flex: 0 0 auto; padding: 0 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
.drawing-emoji-search > svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: #94a3b8; stroke-width: 1.8; stroke-linecap: round; }
.position-sidebar-stack .drawing-emoji-search input { min-width: 0; padding: 10px 0; margin: 0; border: 0; background: transparent; color: #334155; font-size: .88rem; }
.position-sidebar-stack .drawing-emoji-search input:focus-visible { outline: none; }
.drawing-emoji-search:focus-within { border-color: #94a3b8; box-shadow: 0 0 0 2px #e2e8f0; }
.drawing-emoji-search input::placeholder { color: #94a3b8; }
.drawing-emoji-sidebar .drawing-emoji-recent-section { padding: 12px; border: 1px solid #e8edf2; border-radius: 14px; background: #fff; }
.drawing-emoji-recent-section h2 { font-size: .75rem; font-weight: 650; color: #64748b; margin-bottom: 8px; }
.drawing-emoji-recent { gap: 3px; }
.drawing-emoji-grid { gap: 6px; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; padding: 2px; }
.drawing-emoji-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; font-weight: 650; color: #475569; }
.drawing-emoji-list-heading span { font-size: .7rem; font-weight: 400; color: #94a3b8; }
#drawing-emoji-empty { margin: 0; padding: 18px 8px; text-align: center; color: #64748b; font-size: .9rem; }
#drawing-emoji-empty span { display: block; margin-top: 6px; color: #94a3b8; font-size: .8rem; }
.position-import-sidebar label { margin: 16px 0; color: #64748b; font-size: .8rem; }
.position-import-sidebar textarea { resize: vertical; min-height: 130px; max-height: 35dvh; background: #fff; font: .8rem/1.5 ui-monospace, monospace; }
.position-import-sidebar > button { width: 100%; min-height: 42px; background: #f1f5f9; }
.position-import-sidebar #load-import { background: #475569; border-color: #475569; color: #fff; }
#import-status { margin: 16px 0 0; font-size: .85rem; color: #64748b; }
#import-status:empty { display: none; }
#import-status[data-error="true"] { color: #b42318; }
.position-import-sidebar .import-game-count { margin: -8px 0 12px; color: #64748b; font-size: .75rem; }
.position-import-sidebar .import-game-count:empty { display: none; }
.import-file-picker { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.position-sidebar-stack .import-file-picker input[hidden] { display: none; }
.position-sidebar-stack .import-file-picker button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid #d1d5db; border-radius: 12px; background: #fff; color: #475569; font-weight: 600; }
.import-file-picker button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
#import-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #64748b; font-size: .75rem; }
.position-sidebar-stack #save-dialog [hidden] { display: none !important; }
.position-sidebar-stack #save-dialog > label, .position-sidebar-stack #save-dialog .save-mode-fields label { margin: 0; color: #64748b; font-size: .76rem; font-weight: 600; }
.position-sidebar-stack #save-dialog > label input, .position-sidebar-stack #save-dialog .save-mode-fields input, .position-sidebar-stack #save-dialog .save-mode-fields select { width: 100%; min-height: 44px; margin-top: 7px; padding: 10px 12px; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; color: #334155; font-size: .88rem; font-weight: 400; }
.position-sidebar-stack #save-dialog > label input:focus-visible, .position-sidebar-stack #save-dialog .save-mode-fields input:focus-visible, .position-sidebar-stack #save-dialog .save-mode-fields select:focus-visible { outline: 2px solid #94a3b8; outline-offset: 1px; border-color: #94a3b8; }
.position-sidebar-stack #save-dialog .save-options { min-width: 0; margin: 24px 0 0; padding: 18px 0 0; border: 0; border-top: 1px solid #e2e8f0; }
.position-sidebar-stack #save-dialog .save-options legend { float: left; width: 100%; margin-bottom: 10px; padding: 0; color: #64748b; font-size: .76rem; font-weight: 650; }
.position-sidebar-stack #save-dialog .save-option { display: flex; align-items: center; gap: 10px; min-height: 42px; box-sizing: border-box; margin: 2px 0; padding: 8px 10px; border-radius: 10px; color: #334155; font-size: .82rem; font-weight: 500; cursor: pointer; }
.position-sidebar-stack #save-dialog .save-option:has(input:checked) { background: var(--button-selected-bg); font-weight: 650; }
.position-sidebar-stack #save-dialog .save-option:hover { background: #f0f3f7; }
.position-sidebar-stack #save-dialog .save-option input[type="radio"] { appearance: none; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; padding: 0; border: 1.5px solid #94a3b8; border-radius: 50%; background: #fff; box-shadow: none; }
.position-sidebar-stack #save-dialog .save-option input[type="radio"]:checked { border: 5px solid var(--button-accent); }
.position-sidebar-stack #save-dialog .save-option:focus-within { outline: 2px solid #94a3b8; outline-offset: 1px; }
.position-sidebar-stack #save-dialog .save-mode-fields { margin-top: 16px; }
.position-sidebar-stack #save-dialog .save-source-name { overflow: hidden; margin: 0; color: #64748b; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.position-sidebar-stack #save-dialog #restore-draft { width: 100%; min-height: 40px; border-color: #dce3ea; background: #fff; color: #475569; font-size: .82rem; }
.position-sidebar-stack #save-dialog [hidden] { display: none !important; }
.save-file-list, .save-game-list { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 12px; }
.save-file-list-heading { display: flex; align-items: center; justify-content: space-between; color: #475569; font-size: .85rem; }
.save-game-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.position-sidebar-stack .save-game-list-heading button { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; border: 1px solid #dce3ea; border-radius: 10px; background: #fff; color: #475569; font-size: .75rem; }
.position-sidebar-stack .save-file-list-heading button { width: 38px; height: 38px; padding: 0; border: 1px solid #dce3ea; border-radius: 11px; background: #fff; color: #475569; font-size: 1.5rem; line-height: 1; }
.save-file-cards, .save-game-cards { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.position-sidebar-stack #save-dialog .save-file-card, .position-sidebar-stack #save-dialog .save-game-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 54px; padding: 11px 12px; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; color: #334155; text-align: left; font-size: .82rem; }
.position-sidebar-stack #save-dialog .save-game-card[aria-pressed="true"] { border-color: #94a3b8; background: #e9eef4; }
.save-game-card small { color: #64748b; font-size: .72rem; }
.save-source-file-name { margin: 0; color: #64748b; font-size: .78rem; }
.position-sidebar-stack #save-dialog #save-editor-options[hidden] { display: none !important; }
.position-sidebar-stack #save-dialog #position-status { margin: 8px 0 0; color: #64748b; font-size: .8rem; line-height: 1.45; }
.position-sidebar-stack #save-dialog #position-status:empty { display: none; }
.position-sidebar-stack #save-dialog .saved-position-link { display: block; margin-top: 12px; color: #475569; font-size: .84rem; font-weight: 650; text-align: center; text-underline-offset: 3px; }
.position-sidebar-stack #save-dialog #play-position { align-self: center; min-height: 36px; margin-top: 12px; padding: 6px 14px; border-color: transparent; background: transparent; color: #64748b; font-size: .84rem; }
.position-sidebar-stack #save-dialog #play-position:not(:disabled):hover { background: #eef2f6; color: #334155; }
#collectible-respawn > button { border-radius: 50%; }
#collectible-respawn > button[aria-checked="true"] { border-color: var(--button-accent, #475569); background: var(--button-accent, #475569); color: #fff; }
/* PGN import: choose a source, then pick a game directly. */
.import-source { display: grid; grid-template-columns: 1fr; gap: 9px; flex: 0 0 auto; }
.position-sidebar-stack .import-source .import-file-card { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 108px; padding: 18px; border: 1px dashed #cbd5e1; border-radius: 16px; background: #fff; color: #475569; font-weight: 600; }
.import-file-card svg { width: 30px; height: 30px; fill: none; stroke: #64748b; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.import-file-type { padding: 3px 6px; border-radius: 5px; background: #f1f5f9; color: #94a3b8; font-size: .65rem; letter-spacing: .04em; }
.position-sidebar-stack .import-source .import-file-card:hover, .position-sidebar-stack .import-source.is-dragging .import-file-card { border-color: #64748b; background: #f1f5f9; }
.position-sidebar-stack .import-source .import-paste-toggle { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #475569; font-size: .85rem; font-weight: 600; }
.import-paste-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.position-import-sidebar[data-loaded="true"] .import-source { grid-template-columns: 1fr auto; align-items: center; }
.position-sidebar-stack .position-import-sidebar[data-loaded="true"] .import-file-card { min-height: 42px; padding: 8px 10px; gap: 7px; border-style: solid; font-size: .8rem; }
.position-import-sidebar[data-loaded="true"] .import-file-card svg { width: 20px; height: 20px; }
.import-paste-area { display: flex; align-items: stretch; gap: 7px; flex: 0 0 auto; }
.import-paste-area[hidden] { display: none; }
.position-import-sidebar .import-paste-area textarea { min-width: 0; min-height: 100px; max-height: 24dvh; margin: 0; font-size: .75rem; }
.position-sidebar-stack .import-paste-area button { flex: 0 0 36px; border-color: #e2e8f0; background: #f1f5f9; color: #475569; font-size: 1.2rem; }
.import-results { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; }
.import-results[hidden] { display: none; }
.position-sidebar-stack .position-import-sidebar .drawing-emoji-search input { margin: 0; padding: 10px 0; background: transparent; border: 0; }
.position-import-sidebar .import-game-count { margin: 0; font-size: .72rem; color: #94a3b8; }
.import-game-cards, .save-file-cards, .save-game-cards { display: flex; flex-direction: column; gap: 7px; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
pgn-choice { display: block; flex: 0 0 auto; min-width: 0; }
.position-sidebar-stack pgn-choice > button.pgn-choice { display: flex; align-items: center; gap: 10px; width: 100%; height: 68px; min-height: 68px; box-sizing: border-box; padding: 10px; border: 1px solid #e8edf2; border-radius: 13px; background: #fff; color: #334155; text-align: left; }
.position-sidebar-stack pgn-choice > button.pgn-choice:hover:not(:disabled), .position-sidebar-stack pgn-choice > button.pgn-choice[aria-pressed="true"] { border-color: #cbd5e1; background: #f1f5f9; }
.position-sidebar-stack pgn-choice > button.pgn-choice[aria-pressed="true"] { outline: none; border-color: #94a3b8; }
.position-sidebar-stack pgn-choice > button.pgn-choice:focus-visible { outline: 2px solid #64748b; outline-offset: -2px; }
.pgn-choice-symbol { display: grid; place-items: center; flex: 0 0 36px; height: 40px; border-radius: 9px; background: #eef2f6; color: #64748b; font-size: 1.35rem; }
.pgn-choice-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pgn-choice-title { overflow: hidden; color: #334155; font-size: .82rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.pgn-choice-description { overflow: hidden; color: #94a3b8; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.pgn-choice-description:empty { display: none; }
.pgn-choice-arrow { color: #94a3b8; font-size: 1.4rem; }
.position-sidebar-stack .position-import-sidebar select[hidden], .position-sidebar-stack .position-import-sidebar button[hidden], .position-import-sidebar span[hidden] { display: none; }
.position-sidebar-stack #import-more { flex: 0 0 auto; padding: 7px; background: transparent; border: 0; color: #64748b; font-size: .75rem; }
.position-import-sidebar #import-status { flex: 0 0 auto; margin: 0; }
.position-sidebar-stack .import-source input[hidden] { display: none; }

.position-sidebar-stack .import-source .import-paste-toggle:hover { border-color: #cbd5e1; background: #f8fafc; }
.position-sidebar-stack .import-source .import-paste-toggle[aria-expanded="true"] { border-color: #94a3b8; background: #f1f5f9; }
.position-sidebar-stack .position-import-sidebar[data-loaded="true"] .import-paste-toggle { min-height: 42px; padding: 8px 10px; border-radius: 12px; font-size: .8rem; }
.position-import-sidebar .import-paste-area { position: relative; display: block; }
.position-import-sidebar .import-paste-area[hidden] { display: none; }
.position-sidebar-stack .position-import-sidebar .import-paste-area textarea { width: 100%; min-height: 92px; padding: 18px 46px 18px 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f5f7fa; resize: vertical; color: #475569; font: .78rem/1.55 ui-monospace, monospace; }
.position-import-sidebar .import-paste-area textarea::placeholder { color: #94a3b8; font: .85rem/1.55 system-ui, sans-serif; }
.position-import-sidebar .import-paste-area textarea:focus-visible { outline: none; border-color: #94a3b8; background: #fff; box-shadow: 0 0 0 2px #e2e8f0; }
.position-sidebar-stack .import-paste-area #import-read { position: absolute; right: 9px; bottom: 9px; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9px; background: #475569; color: #fff; }
.import-library { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; }
.import-library[hidden] { display: none; }
.import-results-tools { display: flex; align-items: center; gap: 8px; }
.import-results-tools .drawing-emoji-search { flex: 1; min-width: 0; }
.position-sidebar-stack .import-library .drawing-emoji-search input { padding: 10px 0; margin: 0; background: transparent; border: 0; min-width: 0; }
#import-library-empty { margin: 0; color: #94a3b8; text-align: center; font-size: .8rem; }

/* PGN results use the sidebar host scroll position for virtualization. */
.position-import-sidebar .import-library, .position-import-sidebar .import-results { flex: 0 0 auto; overflow: visible; }
.position-import-sidebar .import-game-cards { overflow: visible; }
#import-library-files { overflow: visible; flex-shrink: 0; }
.position-sidebar-stack .import-game-card { box-sizing: border-box; }
#import-paste-dialog { width: min(560px, calc(100vw - 40px)); box-sizing: border-box; padding: 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: #fafbfc; }
#import-paste-dialog::backdrop { background: rgb(15 23 42 / 35%); }
#import-paste-dialog textarea { box-sizing: border-box; width: 100%; min-height: 240px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 12px; font: .85rem/1.6 ui-monospace, monospace; resize: vertical; }
#import-paste-dialog .import-paste-area { display: flex; flex-direction: column; }
#import-paste-dialog .import-paste-area[hidden] { display: none; }
#import-paste-dialog #import-read { align-self: flex-end; padding: 8px 20px; border: 0; border-radius: 10px; background: #475569; color: white; }

#import-paste-dialog { color-scheme: light; color: #334155; font-family: system-ui, sans-serif; max-height: calc(100dvh - 48px); overflow-y: auto; box-shadow: 0 20px 60px rgb(15 23 42 / 20%); }
#import-paste-dialog .position-dialog-heading { margin-bottom: 18px; }
#import-paste-dialog .position-dialog-heading h2 { color: #334155; font-size: 1.05rem; }
#import-paste-dialog .position-dialog-heading button { display: grid; place-items: center; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #64748b; cursor: pointer; }
#import-paste-dialog textarea { background: #fff; color: #334155; max-height: 50dvh; }
#import-paste-dialog textarea::placeholder { color: #94a3b8; }
#import-paste-dialog textarea:focus-visible { outline: 2px solid #94a3b8; outline-offset: 2px; }
#import-paste-status { margin: 12px 0 0; font-size: .85rem; color: #64748b; }
#import-paste-status:empty { display: none; }
#import-paste-status[data-error="true"] { color: #b91c1c; }

.import-source[hidden] { display: none; }

.position-import-sidebar[data-loaded="false"][data-has-files="false"] .import-source { margin-block: auto; }
.position-import-sidebar[data-has-files="true"] .import-source { grid-template-columns: 1fr 1fr; }
.position-sidebar-stack .position-import-sidebar[data-has-files="true"] .import-source button { box-sizing: border-box; height: 54px; min-height: 54px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 14px; }
.position-sidebar-stack .position-import-sidebar .import-paste-toggle svg { width: 28px; height: 28px; }
.position-sidebar-stack .position-import-sidebar[data-has-files="false"] .import-paste-toggle { min-height: 108px; border-radius: 16px; }

.position-import-sidebar .import-game-card { height: 68px; min-height: 68px; box-sizing: border-box; }
.position-import-sidebar .import-game-cards { overflow-anchor: none; }

.import-sticky-header { position: sticky; top: 0; z-index: 3; display: flex; flex-direction: column; gap: 14px; background: inherit; }
.import-sticky-header > [hidden] { display: none; }
.position-import-sidebar[data-loaded="false"][data-has-files="false"] .import-sticky-header { flex: 1 0 auto; }
.position-import-sidebar[data-loaded="false"][data-has-files="false"] .import-source { margin-block: auto; }

.import-sticky-header #import-file-name { display: block; min-width: 0; white-space: normal; overflow-wrap: anywhere; color: #475569; font-size: .85rem; font-weight: 600; line-height: 1.4; }
.import-sticky-header #import-file-name[hidden] { display: none; }

.import-board-icon { display: grid; grid-template-columns: repeat(2, 1fr); width: 22px; height: 22px; overflow: hidden; border: 1px solid #94a3b8; border-radius: 3px; background: #fff; }
.import-board-icon > span:nth-child(2), .import-board-icon > span:nth-child(3) { background: #64748b; }

.import-sticky-header #import-file-name { position: relative; box-sizing: border-box; padding: 12px 14px 12px 42px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f1f5f9; }
.import-sticky-header #import-file-name::before { content: ""; position: absolute; left: 15px; top: 13px; width: 13px; height: 17px; box-sizing: border-box; border: 1.5px solid #94a3b8; border-radius: 2px; background: linear-gradient(#94a3b8, #94a3b8) 3px 6px / 6px 1px no-repeat, linear-gradient(#94a3b8, #94a3b8) 3px 10px / 6px 1px no-repeat; }

/* One selection and keyboard-focus treatment across the editor panels. */
.position-sidebar-stack :is(input, select, textarea) { color: #334155; }
.position-sidebar-stack :not(chess-button) > button[aria-pressed="true"],
.position-sidebar-stack pgn-choice > button.pgn-choice[aria-pressed="true"],
.position-sidebar-stack #save-dialog .save-game-card[aria-pressed="true"] {
  border-color: var(--button-accent);
  background: var(--button-selected-bg);
  outline: none;
}
.position-sidebar-stack :is(button, input, select, textarea):focus-visible,
.position-sidebar-stack #save-dialog .save-option:focus-within {
  outline: 2px solid var(--button-accent);
  outline-offset: 2px;
}
.position-sidebar-stack .drawing-emoji-search:focus-within {
  border-color: var(--button-accent);
  box-shadow: 0 0 0 2px #34745422;
}
.position-sidebar-stack .drawing-emoji-search input:focus-visible { outline: none; }
.position-sidebar-stack #save-dialog .save-option input:focus-visible { outline: none; }
.position-sidebar-stack #save-dialog .saved-position-link { color: var(--button-accent); }
.drawing-style-tools { align-items: stretch; }
.position-sidebar-stack h2 { color: #334155; font-weight: 650; }
.position-sidebar-stack .task-intro { color: #64748b; font-size: .78rem; line-height: 1.5; }

.position-sidebar-stack pgn-choice > button.pgn-choice:focus-visible,
.position-sidebar-stack #save-dialog .save-game-card:focus-visible {
  outline: 2px solid var(--button-accent);
  outline-offset: -2px;
}

/* Lesson drawing styles; legacy neon/rainbow rules preserve saved positions. */
.drawing-style-preview--dashed { background: #d5e0c3; }
.drawing-style-preview--chalk { background: #344d43; }
/* Butt caps keep the spaces visible, even on short one-square arrows. */
.position-dashed-line { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #15781b)); stroke-width: 2.1; stroke-dasharray: 2.2 2; stroke-linecap: butt; }
.position-dashed-head { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #15781b)); stroke-width: 1.5; }
.position-chalk-underlay { fill: none; stroke: #263746; stroke-width: 3.7; opacity: .38; }
.position-chalk-line { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #fff8dc)); stroke-width: 3.1; opacity: .95; }
.position-chalk-grain { fill: none; stroke: #fff8dc; stroke-width: .65; stroke-dasharray: .15 .65 .35 1.1; opacity: .8; }
.position-chalk-head { fill: none; stroke: var(--lesson-mark-color, var(--drawing-preview-color, #fff8dc)); stroke-width: 2.6; }
.drawing-style-preview .position-chalk-line { stroke-dasharray: .55 .2 1.1 .25; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="red"] { --lesson-mark-color: #e53935; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="blue"] { --lesson-mark-color: #1976d2; }
:is(.position-arrow-layer, .position-highlight-layer)[data-mark-color="yellow"] { --lesson-mark-color: #f9a825; }

.power-settings { flex-wrap: wrap; justify-content: flex-start; }

.power-buttons { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.power-buttons chess-button { flex: 1 1 auto; }

.power-buttons .power-piece-preview { width: 30px; height: 30px; flex: 0 0 30px; }
.power-piece-random { display: grid; place-items: center; font-size: 25px; font-weight: 700; }

.goal-settings { display: grid; gap: 2px; border: 0; padding: 0; margin: 8px 0; min-width: 0; }
.goal-settings > legend { padding: 0; margin-bottom: 4px; font-size: .8rem; font-weight: 600; }
.goal-row { min-width: 0; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; }
.goal-row:has(input[type="radio"]:checked) { border-color: var(--button-accent); background: var(--button-selected-bg); }
.goal-row > label { display: flex; align-items: center; gap: 7px; min-height: 30px; margin: 0; font-size: .78rem; line-height: 1.3; cursor: pointer; }
.goal-row input[type="radio"] { display: inline-block; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--button-accent); }
.goal-options { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 0 10px; align-items: flex-start; }
.goal-options[hidden], .goal-settings[hidden] { display: none; }
.goal-emoji-group { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; align-items: center; }
.goal-emoji-group--pair { grid-template-columns: repeat(2, 44px); }
.goal-emoji-group > span { grid-column: 1 / -1; margin-bottom: 4px; font-size: .75rem; font-weight: 600; line-height: 1.4; }
.goal-emoji-group > chess-button[type="palette"] { width: 44px; height: 44px; }
.goal-emoji-group > chess-button[type="palette"] > button { min-height: 44px; }
.goal-options > label { display: flex; flex: 1 0 100%; align-items: center; gap: 12px; margin: 0; }
.goal-options input { width: 6em; min-height: 44px; margin: 0; }

#emoji-animation-toggle { flex: 0 0 auto; }

#emoji-animation-toggle .emoji-animation-icon { display: inline-block; font-size: 20px; line-height: 1; transform-origin: center; }
#emoji-animation-toggle[aria-checked="true"] .emoji-animation-icon { animation: emoji-flower-spin 2.4s linear infinite; }
@keyframes emoji-flower-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #emoji-animation-toggle[aria-checked="true"] .emoji-animation-icon { animation-duration: 8s; } }
#emoji-animation-toggle[aria-checked="true"] > button { border-color: transparent; outline: none; box-shadow: none; }
#emoji-animation-toggle > button { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 40px; height: 40px; min-height: 40px; padding: 0; }

.save-fen-settings { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.save-fen-settings summary { cursor: pointer; color: #64748b; font-size: .82rem; font-weight: 650; }
.save-fen-settings[open] summary { margin-bottom: 14px; }

.position-save-animation[hidden] { display:none; }
.position-save-animation { position:relative; display:inline-block; width:32px; height:32px; font-size:26px; }
.position-placement-reaction { position:absolute; inset:0; display:grid; place-items:center; font-size:clamp(24px, 5vw, 48px); pointer-events:none; z-index:3; }

.position-grid .position-square { position:relative; }