/* The SFX tool: its panel, and what it draws over the page */

.stage[data-tool="sfx"] { cursor: crosshair; }
.pane--sfx { flex: 1 1 40%; }

.character.sfx { display: flex; flex-direction: column; gap: 6px; }
.sfx__head { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx__hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }

/* The looks, shown with the word */
.sfx__gallery { display: flex; flex-direction: column; gap: 5px; }
.sfx__tabs { display: flex; gap: 1px; }
.sfx__tabs .sfx__tab { flex: 1; border-radius: 0; background: var(--ui-2); color: var(--muted); }
.sfx__tabs .sfx__tab.is-on { background: var(--ui-3); color: var(--text); }
.sfx__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 4px; }
.sfx__tile { position: relative; min-width: 0; }
.sfx__tile-pick { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 2px; border: 1px solid var(--line); border-radius: 2px; background: var(--ui-2); color: var(--muted); cursor: pointer; }
.sfx__tile-pick:hover { border-color: var(--blue); color: var(--text); }
.sfx__thumb { display: block; width: 100%; aspect-ratio: 11 / 5; background: #dcdcdc; border-radius: 1px; }
.sfx__tile-name { font-size: 10px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.sfx__tile--add .sfx__tile-pick { border-style: dashed; background: none; }
.sfx__plus { display: flex; align-items: center; justify-content: center; aspect-ratio: 11 / 5; font-size: 20px; line-height: 1; }
.sfx__tile-x { position: absolute; top: 3px; right: 3px; width: 16px; min-width: 0; height: 16px; padding: 0; line-height: 14px; opacity: 0; }
.sfx__tile:hover .sfx__tile-x, .sfx__tile-x:focus-visible { opacity: 1; }

.sfx__section { border-top: 1px solid var(--line); padding-top: 4px; }
.sfx__section > summary { cursor: pointer; padding: 2px 0 4px; color: var(--text); font-weight: 600; list-style: none; user-select: none; }
.sfx__section > summary::-webkit-details-marker, .sfx__more > summary::-webkit-details-marker { display: none; }
.sfx__section > summary::before, .sfx__more > summary::before { content: ""; display: inline-block; margin: 0 6px 1px 1px; border: 4px solid transparent; border-left-color: var(--muted); border-right-width: 0; vertical-align: middle; transition: transform 0.12s; }
.sfx__section[open] > summary::before, .sfx__more[open] > summary::before { transform: rotate(90deg); }
.sfx__body { display: flex; flex-direction: column; gap: 5px; padding: 0 0 6px; }
.sfx__more > summary { cursor: pointer; padding: 1px 0 3px; color: var(--muted); font-size: 11px; list-style: none; user-select: none; }
.sfx__more > summary:hover { color: var(--text); }
.sfx__more > .sfx__body { padding: 2px 0 2px 10px; border-left: 1px solid var(--line); }

.character.sfx label.sfx__slider { display: grid; grid-template-columns: 90px 1fr 46px 18px; align-items: center; gap: 5px; }
.sfx__slider input[type="range"] { width: 100%; min-width: 0; }
.character.sfx .sfx__slider > input[type="number"] { width: 46px; flex: none; padding: 0 3px; text-align: right; }
.sfx__name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfx__unit { color: var(--muted); font-size: 11px; }
.character.sfx label.sfx__row, .sfx__row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.character.sfx .sfx__row > .sfx__name { flex: 0 0 90px; }
.character.sfx .sfx__row > select { flex: 1 1 0; width: 0; min-width: 0; }
.sfx__row > .btn { flex: none; }
.character.sfx label.sfx__check { display: flex; align-items: center; gap: 6px; color: var(--text); }
.sfx__check span { line-height: 1.3; }
.sfx__shapes { flex-wrap: wrap; }

/* An effect given to the SFX */
.sfx__fx { border: 1px solid var(--line); border-radius: 2px; background: var(--ui-2); }
.sfx__fx-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 2px 6px; color: var(--text); }
.sfx__fx-x { width: 18px; min-width: 0; height: 18px; padding: 0; line-height: 16px; }
.sfx__fx-body { display: flex; flex-direction: column; gap: 5px; padding: 0 6px; }
.sfx__fx-body:not(:empty) { padding-bottom: 6px; }
.character.sfx .sfx__add { align-self: flex-start; max-width: 100%; }

/* The options bar */
.obar .sfx__barword { height: 22px; font-weight: 600; letter-spacing: 0.04em; }
.obar .sfx__family { min-width: 120px; max-width: 160px; }
.obar .sfx__pair { display: inline-flex; align-items: center; gap: 5px; }
.obar .sfx__acts { display: inline-flex; gap: 4px; }
.obar .sfx__acts .btn.is-on { background: var(--blue-dark); color: var(--on-blue); }
.obar .sfx__letter-name { cursor: help; }
.icon-btn .sfx-dot { fill: currentColor; stroke: none; }
.obar .sfx__preset { max-width: 140px; }

/* Over the page */
.sfx-guide { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.85; pointer-events: none; }
.sfx-guide--new { stroke-dasharray: none; stroke-width: 1.5; }
.sfx-letter { fill: none; stroke: var(--blue); stroke-width: 1; opacity: 0.35; pointer-events: none; }
.sfx-letter.is-touched { stroke-dasharray: 2 2; opacity: 0.6; }
.sfx-letter.is-on { opacity: 1; stroke-width: 1.5; stroke-dasharray: none; }
.sfx-stem { stroke: var(--blue); stroke-width: 1; pointer-events: none; }
.sfx-knob { fill: var(--blue); stroke: #fff; stroke-width: 1; }
.sfx-handle, .sfx-end { fill: #fff; stroke: var(--blue); stroke-width: 1; shape-rendering: crispEdges; }
.sfx-bend { fill: var(--blue); stroke: #fff; stroke-width: 1; }
.sfx-source { fill: #f0a020; stroke: #fff; stroke-width: 1; }
.sfx-pin { fill: #f0a020; stroke: #fff; stroke-width: 0.8; pointer-events: none; }
html.touch .pane--sfx { display: none; }

/* The guide: where the practice points on the page */
.sfx-mark { fill: none; stroke: #f0a020; stroke-width: 2.5; pointer-events: none; animation: sfx-mark 1.1s ease-in-out infinite; }
@keyframes sfx-mark { 0%, 100% { r: 11px; opacity: 1; } 50% { r: 17px; opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .sfx-mark { animation: none; } }

/* The guide's small drawings */
.sfxg__demo { display: block; flex: none; width: 110px; height: 44px; background: #e4e4e4; border-radius: 3px; }
.sfxg__demo--big { width: 100%; height: auto; aspect-ratio: 110 / 44; }
.sfxg__letter { font-family: "Bangers", Impact, sans-serif; fill: #111; stroke: #fff; stroke-width: 2.4px; paint-order: stroke; text-anchor: middle; dominant-baseline: central; }
.sfxg__guide { fill: none; stroke: var(--blue); stroke-width: 0.8; stroke-dasharray: 2.5 2; }
.sfxg__end { fill: #fff; stroke: var(--blue); stroke-width: 0.9; }
.sfxg__knob { fill: var(--blue); stroke: #fff; stroke-width: 0.7; }
.sfxg__stem { stroke: var(--blue); stroke-width: 0.8; }
.sfxg__box { fill: none; stroke: var(--blue); stroke-width: 1; }
.sfxg__typed { fill: rgb(var(--blue-rgb) / 0.35); }
.sfxg__bubble { fill: #fff; stroke: #111; stroke-width: 1.2; }
.sfxg__ptr { fill: #111; stroke: #fff; stroke-width: 0.9; stroke-linejoin: round; }
.sfxg__press { fill: rgba(240, 160, 32, 0.45); }

/* The card of every shortcut */
.modal--sfxguide { width: min(940px, calc(100vw - 32px)); max-height: calc(100vh - 48px); }
.modal--sfxguide .modal__body { max-height: calc(100vh - 150px); overflow-y: auto; }
.sfxg { display: grid; gap: 12px; }
.sfxg__intro { color: var(--muted); }
.sfxg__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 12px 18px; }
.sfxg__group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal__body .sfxg__title { margin: 0; font-size: 13px; }
.modal__body .sfxg__about { margin: -4px 0 2px; color: var(--muted); font-size: 12px; }
.sfxg__row { display: flex; align-items: center; gap: 10px; padding: 4px; background: var(--ui-dark); border-radius: 4px; }
.sfxg__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sfxg__keys { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.sfxg__label { font-size: 12px; line-height: 1.3; }
.sfxg__plus, .sfxg__or { color: var(--muted); font-size: 11px; }
.sfxg__mouse { padding: 1px 6px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.sk__field .sfxg__mouse, .sk__field .sfxg__plus, .sk__field .sfxg__or { margin: 0 1px; }

/* The practice's card, over the page */
.sfxg-coach { position: fixed; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: 300px; padding: 12px; background: var(--ui); border: 1px solid var(--line); border-left: 3px solid #f0a020; border-radius: 4px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5); transition: border-color 0.2s; }
.sfxg-coach.is-passed { border-left-color: #3fb950; }
.sfxg-coach__head { display: flex; flex-direction: column; gap: 5px; }
.sfxg-coach__count { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.sfxg-coach.is-passed .sfxg-coach__count { color: #3fb950; }
.sfxg-coach__bar { height: 3px; background: var(--ui-darker); border-radius: 2px; overflow: hidden; }
.sfxg-coach__bar > span { display: block; height: 100%; background: #f0a020; transition: width 0.3s; }
.sfxg-coach__text { margin: 0; font-size: 13px; line-height: 1.45; }
.sfxg-coach__text .sk__cap { margin: 0 1px; }
.sfxg-coach__art:empty { display: none; }
.sfxg-coach__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.sfxg-coach__foot .btn { min-height: 24px; padding: 0 10px; font-size: 12px; }