/* Renju-guiden: bräden med skärningspunkter, regelkontroll och övningar */
.rj-figure{margin:20px 0}
.rj-figure figcaption{font-size:14px;color:#535c70;margin-top:8px}
.rj-strip{display:flex;width:max-content;max-width:100%;background:#efe4c8;border-radius:8px;padding:6px 10px}
.rj-point{position:relative;width:42px;height:42px;display:grid;place-items:center;flex:none}
.rj-point::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1.5px solid #6b5a3a}
.rj-point:first-child::before{left:50%}.rj-point:last-child::before{right:50%}
.rj-point.rj-suggest::after{content:'';position:absolute;inset:6px;border:3px solid #1d4ed8;border-radius:50%}
.rj-stone{position:relative;z-index:1;display:block;width:78%;height:78%;border-radius:50%}
.rj-black{background:radial-gradient(circle at 35% 30%,#555 0,#111 55%);box-shadow:0 1px 2px #0005}
.rj-white{background:radial-gradient(circle at 35% 30%,#fff 0,#e9e9e9 70%);border:2px solid #333;box-shadow:0 1px 2px #0004}
.rj-stone.rj-last{outline:3px solid #1d4ed8;outline-offset:2px}

.rj-widget .rj-mount{margin-top:12px}
.rj-loading{color:#535c70}
.rj-scroll{width:100%;max-width:560px;overflow:auto;overscroll-behavior:contain;border-radius:10px}
.rj-scroll .rj-frame{width:100%;transition:width .2s ease}
.rj-scroll.rj-zoomed .rj-frame{width:170%}
.rj-board{max-width:560px}
.rj-board.rj-small{max-width:440px}
.rj-frame{display:grid;grid-template-columns:22px 1fr;grid-template-rows:1fr 22px;background:#efe4c8;border-radius:10px;padding:8px 8px 4px 2px;touch-action:manipulation}
.rj-nums{display:flex;flex-direction:column;justify-content:space-around}
.rj-letters{grid-column:2;display:flex;justify-content:space-around}
.rj-nums span,.rj-letters span{font:700 11px/1 Nunito,sans-serif;color:#4a3f28;text-align:center;flex:1;display:grid;place-items:center}
.rj-grid{position:relative;display:grid;aspect-ratio:1}
.rj-size-9 .rj-grid{grid-template-columns:repeat(9,1fr)}
.rj-size-11 .rj-grid{grid-template-columns:repeat(11,1fr)}
.rj-size-15 .rj-grid{grid-template-columns:repeat(15,1fr)}
.rj-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rj-gridline{stroke:#6b5a3a;stroke-width:.025}
.rj-star{fill:#4a3f28}
.rj-threat{stroke-width:.14;stroke-linecap:round;opacity:.85}
.rj-line-win{stroke:#15803d}
.rj-line-forbidden{stroke:#b91c1c;stroke-dasharray:.3 .18}
.rj-line-one{stroke:#15803d}
.rj-line-two{stroke:#c2410c;stroke-dasharray:.35 .15}
.rj-line-three{stroke:#1d4ed8}
.rj-line-false{stroke:#6b7280;stroke-dasharray:.08 .16}
.rj-line-none{display:none}
.rj-cell{position:relative;z-index:1;display:grid;place-items:center;aspect-ratio:1;min-width:0;padding:0;margin:0;border:0;background:transparent;font:inherit;color:inherit}
button.rj-cell{cursor:pointer;border-radius:50%}
button.rj-cell:focus-visible{outline:3px solid #1d4ed8;outline-offset:1px}
.rj-cell .rj-stone{width:86%;height:86%}
.rj-cell .rj-white{border-width:1.5px}
.rj-suggest::after{content:'';position:absolute;inset:10%;border:3px solid #1d4ed8;border-radius:50%;animation:rj-pulse 1.6s ease-in-out infinite}
@keyframes rj-pulse{0%,100%{transform:scale(.8);opacity:1}50%{transform:scale(1.08);opacity:.55}}
.rj-cand-label{position:relative;z-index:2;font:800 clamp(10px,2.4vw,14px)/1 Nunito,sans-serif;color:#1e3a8a;background:#fffbeb;border-radius:4px;padding:1px 3px}
.rj-win-point::before,.rj-point-one::before,.rj-point-two::before{content:'';position:absolute;inset:22%;border-radius:50%}
.rj-win-point::before,.rj-point-one::before{border:3px solid #15803d}
.rj-point-two::before{border:3px dashed #c2410c;border-radius:4px}
.rj-badge{position:absolute;z-index:3;top:-2px;right:-2px;min-width:16px;height:16px;padding:0 3px;border-radius:8px;background:#1e293b;color:#fff;font:700 10px/16px Nunito,sans-serif;text-align:center}

.rj-result{margin-top:12px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #cbd5e1;border-left-width:6px}
.rj-result.rj-legal{border-left-color:#1d4ed8}
.rj-result.rj-win{border-left-color:#15803d}
.rj-result.rj-forbidden{border-left-color:#b91c1c}
.rj-result-head{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:18px}
.rj-result-text{margin:0}
.rj-icon{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rj-win .rj-icon,.rj-icon-win{color:#15803d}
.rj-forbidden .rj-icon,.rj-icon-forbidden{color:#b91c1c}
.rj-legal .rj-icon,.rj-icon-legal{color:#1d4ed8}
.rj-verdict{font-weight:800;margin:0 0 6px}

.rj-choices,.rj-actions,.rj-answers{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.rj-widget .button{min-height:44px;font-size:14px;padding:10px 14px}
.rj-widget .button[aria-pressed=true]{background:#171d33;color:#fff;border-color:#171d33}
.rj-widget .button[aria-pressed=true] .rj-icon{color:#fff}
.rj-answer{display:inline-flex;align-items:center;gap:8px}
.rj-answer .rj-icon{width:20px;height:20px}
.rj-zoom{margin-bottom:10px}
.rj-reset{margin-top:12px}

.rj-legend{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.rj-legend li{display:block}
.rj-legend .rj-swatch{margin-right:8px;vertical-align:middle}
.rj-swatch{display:inline-block;width:32px;border-top:5px solid}
.rj-legend-one .rj-swatch{border-top-color:#15803d}
.rj-legend-two .rj-swatch{border-top-color:#c2410c;border-top-style:dashed}

.rj-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rj-compare-card{min-width:0;padding:14px;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.rj-compare-card h4{margin:0 0 10px;font-size:17px}
.rj-test{margin-top:12px}
.rj-branches{margin-top:10px;display:grid;gap:10px}
.rj-branches[hidden]{display:none}
.rj-branch-group{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rj-branch-title{flex-basis:100%;margin:0;font-weight:800}
.rj-branch-status{min-height:24px;margin:10px 0 0;font-weight:700;color:#302584}

.rj-progress{font-weight:800;margin:0 0 6px}
.rj-task{margin:0 0 8px}
.rj-score{font-size:28px;font-weight:900;margin:4px 0 8px}
.rj-summary{padding-left:20px}
.rj-step{display:grid;grid-template-columns:max-content 1fr;gap:6px 14px;margin:12px 0 0}
.rj-step dt{font-weight:800}
.rj-step dd{margin:0}
.rj-note{font-size:14px;color:#535c70;margin-top:10px}
.rj-widget a,.rj-widget a:hover{text-decoration:none;font-weight:700;color:#1d4ed8}

@media(max-width:760px){.rj-compare-grid{grid-template-columns:1fr}.rj-point{width:34px;height:34px}.rj-frame{grid-template-columns:18px 1fr;grid-template-rows:1fr 18px;padding:6px 6px 2px 0}.rj-nums span,.rj-letters span{font-size:9px}.rj-badge{min-width:13px;height:13px;font-size:8px;line-height:13px}}
@media(prefers-reduced-motion:reduce){.rj-suggest::after{animation:none}.rj-scroll .rj-frame{transition:none}}
.rj-tree{list-style:none;counter-reset:rj;padding:0;margin:16px 0;display:grid;gap:10px}
.rj-tree li{counter-increment:rj;position:relative;padding:12px 14px 12px 56px;border:1px solid #cbd5e1;border-radius:12px;background:#fff}
.rj-tree li::before{content:counter(rj);position:absolute;left:14px;top:12px;width:30px;height:30px;border-radius:50%;background:#171d33;color:#fff;font-weight:800;display:grid;place-items:center}
.rj-tree strong,.rj-tree span{display:block}
.rj-tree span{margin-top:4px}