/* 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-sidebar-stack .position-save-sidebar { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.position-sidebar-stack .position-save-sidebar > .sidebar-body { flex: 1; min-height: 0; overflow-y: auto; }
.position-sidebar-stack .position-save-sidebar > .sidebar-footer { margin-top: 0; }
.position-sidebar-stack #save-dialog > .sidebar-body { overflow: hidden; }
.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: var(--button-accent); 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: 25; 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-editor .board-wrap { 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, minmax(0, 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: 1px solid var(--button-border); 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; 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--contrast { border-color: #475569; background: linear-gradient(145deg, #edf3f6, #cbd5dc); }
.drawing-style-preview > span { position: absolute; inset: 0; }
.position-sidebar-stack .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, .drawing-style-preview .position-magic-star { animation: none; }

.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; }
[hidden] { display: none !important; }
@media (max-width: 1024px), (max-height: 500px) and (orientation: landscape) {
  .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%; height: max(360px, 70dvh); }
  .position-editor .board-wrap { max-width: 100%; margin-inline: auto; margin-top: 0; }
  .piece-palette { max-width: 330px; }
}
/* Wide landscape keeps the sidebar beside the board under the bar, so zoom never pushes it below the fold. */
@media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape), (min-width: 700px) and (max-height: 500px) and (orientation: landscape) {
  .position-board-panel { flex: 1 1 0; }
  .position-sidebar-stack { 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; }

.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"] { flex: 1 1 0; min-width: 0; margin: 0; }
.emoji-role-tabs chess-button[type="tab"] > button { position: relative; min-height: 44px; min-width: 0; 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; }
/* Playful routes share the controller's color while keeping distinct shapes. */
.drawing-style-preview--candy { background: #fff0f6; }

.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)); }
#open-goals > button { display: flex; align-items: center; justify-content: center; gap: 10px; }
#open-goals > button::before { content: '🎨'; font-size: 32px; line-height: 1; }
.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; }
#emoji-animation-toggle { box-sizing: border-box; width: 40px; height: 40px; flex: 0 0 40px; margin: 0; }
.emoji-palette #open-emoji-picker { grid-column: span 2; width: 100%; height: 100%; min-width: 0; margin: 0; align-self: stretch; justify-self: stretch; }
.emoji-palette #open-emoji-picker > button { box-sizing: border-box; width: 100%; min-height: 46px; height: 100%; padding: 10px; border: 1px dashed var(--button-accent); border-radius: 8px; background: var(--button-selected-bg); color: var(--button-accent); }
.emoji-palette #open-emoji-picker > button:hover { background: #dceee2; border-style: solid; }
.emoji-palette #open-emoji-picker svg { width: 21px; height: 21px; }
.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: 0; border: 0; border-radius: 0; background: transparent; }
.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; }
#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 #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; }
.position-sidebar-stack :is(.save-file-list, .save-game-list) { margin-top: 0; }
.position-sidebar-stack :is(.save-file-list, .save-game-list) > :not(.save-file-cards, .save-game-cards) { flex-shrink: 0; }
.position-sidebar-stack :is(.save-file-cards, .save-game-cards) { flex: 1; }
.position-sidebar-stack .save-game-empty { display: grid; place-items: center; flex: 1; min-height: 0; color: #94a3b8; }
.save-game-empty svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.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; }
.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 { width: 100%; margin: 0; }
.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-button { display: block; width: 100%; min-height: 42px; margin-top: 12px; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--button-bg, #fff); color: var(--button-accent); font-size: .84rem; font-weight: 650; text-align: center; cursor: pointer; }
.position-sidebar-stack #save-dialog .saved-position-button:disabled { opacity: .5; cursor: default; }
:is(#collectible-respawn, #power-respawn) > button { border-radius: 50%; }
:is(#collectible-respawn, #power-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-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 chess-button:is([type="palette"], [type="secondary"], [type="icon"]) > 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;
}
/* A pressed control hides its outline, so keyboard focus needs its own ring. */
.position-sidebar-stack :not(chess-button) > button[aria-pressed="true"]:focus-visible,
.position-sidebar-stack chess-button:is([type="palette"], [type="secondary"], [type="icon"]) > button[aria-pressed="true"]:focus-visible,
.position-sidebar-stack pgn-choice > button.pgn-choice[aria-pressed="true"]:focus-visible,
.position-sidebar-stack #save-dialog .save-game-card[aria-pressed="true"]:focus-visible { outline: 3px solid var(--accent-dark); outline-offset: 3px; }
.position-sidebar-stack :is(button, input, select, textarea):focus-visible {
  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; }
.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. */
.drawing-style-preview--dashed { background: #d5e0c3; }
.drawing-style-preview--chalk { background: #344d43; }

.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[data-animation-mode="loop"] .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[data-animation-mode="loop"] .emoji-animation-icon { animation-duration: 8s; } }
#emoji-animation-toggle[data-animation-mode="loop"] > 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; }

#open-fen-settings { width: 100%; min-height: 44px; margin: 12px 0; padding: 10px 14px; border: 1px solid var(--panel-border); border-radius: 10px; background: #fff; color: var(--button-accent); text-align: left; cursor: pointer; }
#new-file-form { margin: 0; }
#save-fen-settings { display: flex; flex-direction: column; gap: 20px; padding: 3px; }
.fen-section { min-width: 0; margin: 0; padding: 0; border: 0; }
.fen-section legend { margin-bottom: 12px; padding: 0; color: #475569; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fen-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.position-sidebar-stack .fen-form-grid label { margin: 0; min-width: 0; }
.fen-full-width { grid-column: 1 / -1; }
.fen-form-grid label, .fen-castling-field > span, .fen-turn-field > span, .fen-en-passant { color: #64748b; font-size: .74rem; font-weight: 500; }
.position-sidebar-stack #save-fen-settings :is(input:not([type="hidden"]), select) { min-width: 0; min-height: 38px; margin-top: 5px; padding: 8px 9px; border-radius: 8px; font-size: .8rem; font-weight: 400; }
.position-sidebar-stack #save-fen-settings :is(input, select):focus-visible { outline-offset: -2px; }
.fen-castling-field { margin-top: 14px; }
.fen-castling-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: 9px; background: #e9eeeb; }
.fen-castling-group > chess-button { min-width: 0; }
.fen-castling-group > chess-button > button { min-height: 36px; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: #64748b; font-size: .8rem; font-weight: 500; white-space: nowrap; box-shadow: none; }
.fen-castling-group > chess-button > button[aria-checked="true"] { background: #fff; color: #334155; font-weight: 650; box-shadow: 0 1px 3px #24362b12; }
.fen-castling-group > chess-button[role="presentation"] > button[role="checkbox"]::before { content: ''; width: 13px; height: 13px; border: 1px solid #a4ada7; border-radius: 3px; }
.fen-castling-group > chess-button > button[role="checkbox"][aria-checked="true"]::before { content: '✓'; display: grid; place-items: center; border-color: #475569; background: #475569; color: #fff; font-size: 11px; }
.position-sidebar-stack .fen-castling-group > chess-button > button:focus-visible { outline: 2px solid #64748b; outline-offset: -2px; }
.fen-turn-group { margin-top: 6px; }
.fen-castling-rows { display: grid; gap: 8px; margin-top: 8px; }
.fen-castling-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; }
.fen-castling-row > span { color: #475569; font-size: .8rem; }
.position-sidebar-stack .fen-en-passant { display: grid; grid-template-columns: 1fr 84px; align-items: center; gap: 12px; margin: 14px 0 0; }
.position-sidebar-stack #save-fen-settings .fen-en-passant input { margin: 0; text-align: center; }
#save-fen-settings input[type="hidden"], .fen-outputs[hidden] { display: none; }
#fen-settings-status:empty { display: none; }
.position-sidebar-stack #new-file-name:focus-visible { outline-offset: -3px; }

.position-save-animation[hidden] { display:none; }
.position-save-animation { position:relative; display:inline-block; width:32px; height:32px; font-size:26px; }
.position-sidebar-stack #save-dialog[data-success="true"] > .sidebar-body { flex: 1; min-height: 0; }
.position-sidebar-stack #save-dialog[data-success="true"] > .sidebar-footer { display: none; }
.position-sidebar-stack #save-dialog[data-success="true"] { grid-template-rows: auto minmax(0, 1fr); }
.save-success { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; }
.save-success-emoji { position: relative; display: grid; place-items: center; width: 112px; height: 112px; font-size: 80px; }
.save-success-emoji .position-save-animation { position: absolute; inset: 0; width: 100%; height: 100%; font-size: 80px; background: var(--sidebar-background, #fafbfc); }
.save-success-actions { display: grid; gap: 8px; width: 100%; }
.position-sidebar-stack #save-dialog .save-success-actions .saved-position-button { margin: 0; }

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

.save-success-message { margin: 0; color: #334155; font-size: .95rem; font-weight: 600; text-align: center; }
#save-game-no-results, #save-file-empty { margin: 0; color: #64748b; font-size: .82rem; line-height: 1.5; }

/* Both archive modes scroll on the sidebar host and use the same 68px + 7px rows. */
.position-sidebar-stack :is(.save-file-list, .save-game-list) { flex: 0 0 auto; min-height: 0; }
.position-sidebar-stack :is(.save-file-cards, .save-game-cards) { flex: 0 0 auto; overflow: visible; overflow-anchor: none; gap: 7px; }
.position-sidebar-stack :is(#import-game-no-results, #save-game-no-results, #save-file-empty, #import-library-empty) { margin: 0; color: #64748b; text-align: center; font-size: .8rem; }
.position-sidebar-stack .archive-file-name { position: relative; display: block; box-sizing: border-box; min-width: 0; padding: 12px 14px 12px 42px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f1f5f9; overflow-wrap: anywhere; color: #475569; font-size: .85rem; font-weight: 600; line-height: 1.4; }
.position-sidebar-stack .archive-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; }
.position-sidebar-stack .position-import-sidebar[data-loaded="false"][data-has-files="false"] .import-sticky-header { flex: 0 0 auto; }
.archive-drop-surface { display: flex; flex-direction: column; gap: 12px; }
.archive-drop-surface.is-dragging { outline: 2px dashed #64748b; outline-offset: -2px; border-radius: 12px; }

.position-sidebar-stack #save-dialog { display: flex; overflow-y: auto; }
.position-sidebar-stack #save-dialog > .sidebar-body { flex: 1 0 auto; overflow: visible; }
.position-sidebar-stack #save-dialog > .sidebar-footer { margin-top: auto; }
.position-sidebar-stack .save-file-list { gap: 14px; }
.position-sidebar-stack .save-game-list { gap: 10px; }
.position-sidebar-stack .save-game-list > .archive-list-header { margin-bottom: 4px; }
.position-sidebar-stack .import-game-count { margin: 0; font-size: .72rem; color: #94a3b8; }
.position-sidebar-stack .import-game-count:empty { display: none; }
.position-sidebar-stack #save-dialog[data-success="true"] { display: grid; overflow: hidden; }
.position-sidebar-stack #save-dialog[data-success="true"] > .sidebar-body { overflow-y: auto; }

/* Focused task authoring occupies the shared sidebar shell. */
.position-task-sidebar > .sidebar-body { overflow-y: auto; }
.position-task-sidebar > .sidebar-footer { margin-top: 0; }
#task-sidebar .goal-settings { margin: 0; }
.task-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.task-editor { display: grid; gap: 12px; min-width: 0; }
#task-sidebar .task-intro { margin: 0; color: #64748b; font-size: .76rem; line-height: 1.45; }
.task-flow-caption { padding-bottom: 2px; }
.task-empty { padding: 28px 12px; margin: 0; border: 1px dashed var(--panel-border); border-radius: 12px; text-align: center; color: #94a3b8; font-size: .82rem; }
#task-sidebar .task-editor button { min-height: 34px; border: 1px solid var(--panel-border); border-radius: 7px; background: #fff; color: inherit; padding: 5px 8px; cursor: pointer; font: inherit; font-size: .76rem; }
#task-sidebar .task-editor button:disabled { opacity: .35; cursor: default; }
#task-sidebar .task-editor :is(button, input, select):focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.task-list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; min-height: 12px; }
.adventure-task-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; padding: 10px; border: 1px solid var(--panel-border); border-radius: 10px; background: #fff; cursor: grab; }
.adventure-task-card strong { font-size: .78rem; line-height: 1.45; overflow-wrap: anywhere; font-weight: 600; }
.adventure-task-card.is-picking { border-color: var(--accent-dark); background: #f4f8f3; }
.task-card-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-width: 0; }
#task-sidebar .task-card-fields :is(input, select) { flex: 0 1 auto; width: auto; min-width: 0; max-width: 100%; min-height: 34px; margin: 0; padding: 5px 7px; font-size: .78rem; }
#task-sidebar .task-card-fields input { width: 70px; }
#task-sidebar .task-card-fields button { border: 0; padding: 0 4px; color: #64748b; background: transparent; text-align: start; }
.task-card-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 1px; }
#task-sidebar .task-card-actions button { width: 28px; min-width: 28px; min-height: 34px; border: 0; background: transparent; color: #94a3b8; padding: 0; font-size: 1rem; }
#task-sidebar .task-card-actions button:hover { background: #f1f5f9; color: #334155; }
.task-card-error { grid-column: 1 / -1; font-size: .75rem; color: #a12626; margin: 0; }
.task-card-error:empty { display: none; }
.task-catalog-panel { padding: 10px; border-radius: 10px; background: #eef2f0; }
.task-section-caption { margin: 0 0 8px; font-size: .74rem; color: #64748b; }
.task-catalog { display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; }
.task-catalog-card { cursor: grab; min-width: 0; }
#task-sidebar .task-catalog-card button { width: 100%; min-height: 40px; text-align: start; border: 0; padding: 7px 8px; }
#task-sidebar .task-options { margin: 0; padding-top: 10px; border-top: 1px solid var(--panel-border); font-size: .78rem; }
.task-options summary, #goal-legacy-settings summary { cursor: pointer; color: #64748b; }
.task-options[open] summary { margin-bottom: 10px; color: #334155; }
.task-options-value { float: right; max-width: 65%; text-align: end; color: #94a3b8; font-size: .72rem; }
.task-condition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#task-sidebar .task-options label { margin: 0; font-size: .76rem; }
#task-sidebar .task-safe-option { display: flex; align-items: center; gap: 7px; margin-top: 10px; }
#task-sidebar .task-safe-option input { width: auto; margin: 0; }
#task-sidebar .task-marker-palette { display: flex; gap: 5px; margin-top: 8px; }
.task-editor [hidden], #goal-legacy-settings[hidden] { display: none; }
.adventure-task-card.is-drop-target { border-top: 3px solid var(--accent); }
.task-list.is-drop-end { border-bottom: 3px solid var(--accent); }

.task-catalog-description { display: block; margin-top: 3px; font-size: .72rem; line-height: 1.45; color: #64748b; font-weight: 400; }
.task-field-unit { color: #64748b; font-size: .75rem; }

#task-sidebar .task-card-actions button { width: 34px; min-width: 34px; min-height: 40px; color: #64748b; }
#task-sidebar .task-card-fields button { min-height: 40px; padding: 5px 8px; border: 1px solid var(--panel-border); background: #f8faf9; border-radius: 7px; }
#task-sidebar .task-catalog-card button { padding: 12px; min-height: 64px; }

/* Connected task blocks share the editor’s neutral surfaces and green accent. */
.task-editor { gap: 10px; }
.task-catalog-panel { padding: 12px; border: 1px solid var(--panel-border); background: #fff; margin-bottom: 8px; }
.task-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
[data-block-group="target"] { --task-color: #f0f6f2; --task-edge: #d4e4d9; --task-ink: #347454; }
[data-block-group="collect"] { --task-color: #faf5ed; --task-edge: #eadfce; --task-ink: #846438; }
[data-block-group="piece"] { --task-color: #f4f2f8; --task-edge: #e0dbea; --task-ink: #716086; }
#task-sidebar .task-catalog-card button { padding: 8px; min-height: 42px; border: 1px solid var(--task-edge); border-radius: 8px; background: var(--task-color); color: var(--task-ink); font-weight: 600; font-size: .73rem; box-shadow: none; }
.task-catalog-description { display: none; }
.task-chain-marker { position: relative; width: fit-content; min-width: 110px; padding: 9px 16px; background: var(--button-selected-bg); border: 1px solid var(--button-border); color: var(--accent-dark); font-size: .8rem; font-weight: 700; }
.task-chain-start { border-radius: 10px; }
.task-chain-end { border-radius: 10px; padding-top: 16px; }
.task-list { gap: 0; padding: 0; min-height: 0; }
.task-editor:has(.adventure-task-card) .task-chain-start { margin-bottom: -10px; }
.task-editor:has(.adventure-task-card) .task-list { margin-bottom: -10px; }
.adventure-task-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 16px 12px 8px; margin: 0; border: 1px solid var(--task-edge); border-radius: 10px; background: #fff; color: var(--ink); box-shadow: inset 3px 0 0 var(--task-edge); }
.adventure-task-card::before, .task-chain-end::before { content: ''; position: absolute; top: -1px; left: 23px; width: 30px; height: 7px; border-radius: 0 0 5px 5px; background: var(--sidebar-background, #fafbfc); border: 1px solid var(--task-edge, var(--button-border)); border-top: 0; }
.adventure-task-card::after, .task-chain-start::after { content: ''; position: absolute; left: 23px; bottom: -8px; width: 30px; height: 7px; border-radius: 0 0 5px 5px; background: #fff; border: 1px solid var(--task-edge, var(--button-border)); border-top: 0; z-index: 1; pointer-events: none; }
.adventure-task-card.is-picking { background: var(--task-color); border-color: var(--accent-dark); outline: 2px solid var(--accent-dark); outline-offset: 1px; }
.task-block-prefix { order: -1; font-size: 1rem; }
.task-card-fields { gap: 6px; font-size: .8rem; font-weight: 600; }
.task-card-fields :is(input, select) { order: 0; }
.task-block-connector { order: 1; }
.task-card-fields button { order: 2; }
.task-field-unit { order: 3; color: var(--muted); font-size: .8rem; }
#task-sidebar .task-card-fields :is(input, select, button) { color: #273347; background: #fff; border: 1px solid var(--panel-border); border-radius: 7px; min-height: 36px; padding: 5px 9px; font-weight: 600; }
#task-sidebar .task-card-fields input { width: 62px; }
.task-card-actions { grid-column: 1; grid-row: auto; justify-content: flex-end; }
#task-sidebar .task-card-actions button { color: #64748b; min-height: 34px; }
#task-sidebar .task-card-actions button:hover { color: var(--accent-dark); background: var(--button-selected-bg); }
#task-sidebar .adventure-task-card :is(button, input, select):focus-visible { outline-color: var(--accent-dark); }
.adventure-task-card .task-card-error:not(:empty) { color: #651b1b; background: #fff1ee; padding: 6px 8px; border-radius: 5px; font-weight: 500; }
.adventure-task-card.is-drop-target { border-top: 1px solid var(--task-edge); box-shadow: 0 -3px 0 var(--accent-dark); }
.adventure-task-card.is-drop-after { box-shadow: 0 3px 0 var(--accent-dark); }
.task-list.is-drop-end { border-bottom: 3px solid var(--accent-dark); }
.task-empty { padding: 14px 10px; }
.task-target-mode { order: 2 !important; }
.task-collect-emoji { order: 1 !important; }
.task-card-warning { grid-column: 1 / -1; margin: 0; padding: 6px 8px; background: #fff5d7; color: #664600; border-radius: 5px; font-size: .75rem; line-height: 1.45; font-weight: 500; }
.task-card-warning:empty { display: none; }

#task-sidebar .task-catalog-card button:hover { border-color: var(--task-ink); background: var(--task-color); }
#task-sidebar .task-catalog-card button:active { transform: translateY(1px); }
.task-chain-start::after { background: var(--button-selected-bg); }
.task-card-fields { line-height: 1.6; }

.adventure-task-card.is-picking::after { background: var(--task-color); }

.task-chain-start { width: auto; min-width: 0; }
#task-sidebar .task-chain-start .task-options { margin: 0; padding: 0; border: 0; font-weight: 400; }
#task-sidebar .task-chain-start .task-options summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--accent-dark); font-size: .8rem; font-weight: 700; list-style: none; }
#task-sidebar .task-chain-start summary::-webkit-details-marker { display: none; }
.task-settings-icon { font-size: 1rem; line-height: 1; }
#task-sidebar .task-chain-start summary:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 4px; border-radius: 3px; }
.task-marker-choice { order: 2; }

/* The task overlay uses the same form surfaces as the main editor sidebar. */
#task-sidebar #task-conditions[open] summary { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--button-border); }
#task-sidebar .task-condition-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
#task-sidebar .task-condition-grid label { display: grid; gap: 6px; min-width: 0; color: #64748b; font-size: .78rem; line-height: 1.4; }
#task-sidebar .task-condition-grid input { box-sizing: border-box; display: block; width: 100%; min-width: 0; min-height: 40px; margin: 0; padding: 8px 10px; border: 1px solid var(--button-border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: .85rem; user-select: text; }
#task-sidebar #task-conditions .task-safe-option { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 0; color: var(--ink); font-size: .78rem; line-height: 1.5; cursor: pointer; }
#task-sidebar #task-conditions .task-safe-option + .task-safe-option { border-top: 1px solid var(--button-border); }
#task-sidebar #task-conditions .task-safe-option input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent-dark); cursor: pointer; }
#task-sidebar #task-conditions input:disabled { opacity: .5; cursor: default; }

#task-sidebar #task-template { box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--button-border); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: .8rem; }

.position-grid .position-square.is-movable { cursor: grab; }
.position-grid .position-square.is-drag-source { cursor: grabbing; background: #34745422; }
.position-drag-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -50%); line-height: 1; }

#emoji-animation-toggle[data-animation-mode="once"] .emoji-animation-icon { animation: emoji-flower-spin 2.4s linear 1; }
#emoji-animation-toggle[data-animation-mode="once"]:hover .emoji-animation-icon { animation-name: emoji-flower-spin-hover; }
@keyframes emoji-flower-spin-hover { to { transform: rotate(360deg); } }

#emoji-animation-toggle > button { position: relative; }
.emoji-animation-mode-badge { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 2px; border: 1px solid var(--button-border); border-radius: 5px; background: var(--sidebar-background); color: var(--accent-dark); font: 700 11px/1 system-ui, sans-serif; }
.emoji-animation-mode-badge[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { #emoji-animation-toggle[data-animation-mode="once"] .emoji-animation-icon { animation: none; } }

@media (pointer: coarse) {
  .drawing-style-tools .drawing-emoji-tools > chess-button, .drawing-style-tools .drawing-emoji-tools > chess-button > button { min-height: 44px; }
}
@media (pointer: coarse) {
  #emoji-animation-toggle, #emoji-animation-toggle > button { width: 44px; height: 44px; min-height: 44px; flex-basis: 44px; }
}