.combat-example{margin:28px 0 48px;border:1px solid #8a6939;border-radius:14px;overflow:hidden;background:radial-gradient(ellipse at 50% 25%,#6c482323,transparent 70%),#15130f}.combat-example-heading{padding:26px 28px 8px}.combat-kicker{color:#c6a46a;font-size:12px;letter-spacing:.15em}.combat-example-heading h4{font:600 clamp(24px,3vw,34px) var(--display);margin:12px 0;color:#f1d7a5}.combat-example-heading p{margin:0}.combat-context{font-size:15px;padding:0 28px;color:#bfb49f!important}.combat-progress{display:flex;flex-wrap:wrap;gap:8px;padding:18px 28px;border-bottom:1px solid #4c3d27}.combat-progress span{font-size:13px;padding:6px 10px;border:1px solid #493e2d;border-radius:3px;color:#a69b87}.combat-progress span.active{background:#d6ad65;color:#1a150e;border-color:#d6ad65}.combat-scene{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:82px;margin:24px 28px}.combat-side{padding:18px 12px;border:1px solid #675334;background:#211c1480;text-align:center;border-radius:6px}.combat-player{margin:0!important;font-size:13px;text-transform:uppercase;letter-spacing:.06em}.attacker .combat-player{color:#e0a793!important}.defender .combat-player{color:#a9c6d8!important}.combat-side h5{font:600 20px var(--display);margin:8px 0;color:#e4c58e}.combat-card-space{height:250px;display:grid;place-items:center;position:relative}.combat-card{width:150px;padding:0;border:0;background:none;cursor:zoom-in;transition:transform .35s,opacity .35s;box-shadow:0 8px 18px #0008;border-radius:7px}.combat-card img{display:block;width:100%;height:auto;border-radius:7px}.combat-scene:not([data-step="0"]) .attacker .combat-card{transform:rotate(90deg)}.combat-name{display:block;color:#e0c89e;font-size:17px}.combat-stats{display:flex;gap:12px;justify-content:center;margin:10px 0!important;font-size:17px}.combat-stats b{color:#f4d194}.combat-state{min-height:24px;margin:8px 0 0!important;font-size:14px;color:#ddc28b!important}.combat-damage{position:absolute;bottom:10px;right:12px;background:#7d2523;color:#fff0da;border:1px solid #edb394;padding:6px 10px;border-radius:4px;font-size:15px;box-shadow:0 2px 12px #000}.combat-damage[hidden]{display:none}.combat-arrows{position:absolute;left:calc(50% - 35px);width:70px;top:140px;display:grid;gap:20px;text-align:center;pointer-events:none;color:#efc97e}.combat-arrows>span{font-size:46px;line-height:1;opacity:0;transition:opacity .25s}.combat-arrows small{display:block;font-size:13px;margin-top:5px}.combat-scene[data-step="2"] .outgoing,.combat-scene[data-step="3"] .outgoing,.combat-scene[data-step="3"] .returning{opacity:1}.combat-scene[data-step="4"] .combat-card{opacity:.3;filter:grayscale(1)}.combat-narration{padding:22px 28px;border-top:1px solid #68502d;background:#292116;min-height:155px}.combat-narration>span{color:#c2a16a;font-size:13px}.combat-narration h5{font:600 23px var(--display);color:#efd29b;margin:8px 0}.combat-narration p{margin:0;max-width:85ch}.combat-controls{padding:18px 28px;display:flex;gap:12px;justify-content:space-between}.combat-controls button{font:inherit;padding:10px 16px;border:1px solid #a27d42;background:transparent;color:#edcf99;border-radius:4px;cursor:pointer}.combat-controls #combat-next{background:#bb914e;color:#17120b}.combat-controls button:disabled{opacity:.4;cursor:default}.combat-zoom-hint{font-size:14px;margin:0!important;padding:0 28px 24px}@media(max-width:600px){.combat-example-heading,.combat-narration{padding:20px 16px}.combat-context{padding:0 16px}.combat-progress{padding:14px 16px;gap:5px}.combat-progress span{font-size:11px;padding:5px}.combat-scene{gap:28px;margin:18px 10px}.combat-side{padding:12px 3px;min-width:0}.combat-player{font-size:10px;letter-spacing:0}.combat-side h5{font-size:15px}.combat-card{width:80px}.combat-card-space{height:145px}.combat-name{font-size:14px}.combat-stats{gap:5px;font-size:14px}.combat-state{font-size:12px;min-height:38px}.combat-arrows{left:calc(50% - 15px);width:30px;top:97px;gap:10px}.combat-arrows>span{font-size:28px}.combat-arrows small{font-size:9px}.combat-damage{bottom:0;right:0;padding:4px;font-size:11px}.combat-controls{padding:14px 10px;gap:6px;flex-wrap:wrap}.combat-controls button{padding:9px;font-size:13px}.combat-zoom-hint{padding:0 16px 20px}.combat-narration{min-height:220px}}@media(prefers-reduced-motion:reduce){.combat-card,.combat-arrows>span{transition:none}}
/* Arrows connect the actual card edges, rather than floating between zones. */
.combat-card-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}.combat-card-links g{opacity:0}.combat-card-links .link-line{fill:none;stroke-width:2.5;filter:drop-shadow(0 2px 2px #000)}.attack-link .link-line{stroke:#f2c578}.attack-link circle{fill:#f2c578}.response-link .link-line{stroke:#9bdbec}.response-link circle{fill:#9bdbec}.combat-card-links text{font:600 13px Georgia;paint-order:stroke;stroke:#15130f;stroke-width:5px;stroke-linejoin:round;fill:#f7e7c9}.response-link text{fill:#b6e6f1}.combat-scene[data-step="2"] .attack-link,.combat-scene[data-step="3"] .attack-link,.combat-scene[data-step="3"] .response-link{opacity:1}.combat-universal{background:#17150f;border:1px solid #665231;border-radius:10px;margin:28px 0;padding:26px}.combat-universal h4,.combat-examples-title{font:600 25px var(--display);color:#e8cc95;margin:0 0 18px}.combat-universal ol{padding-left:24px}.combat-universal li{padding:8px 0 8px 8px}.combat-universal strong{color:#e6c790}.combat-principle{padding:18px 0 0;border-top:1px solid #665231;color:#e6c790!important;text-align:center}.combat-examples-title{margin-top:40px}.combat-card{transition:opacity .3s}@media(max-width:600px){.combat-universal{padding:18px}.combat-card-links text{font-size:10px}.combat-card-links .link-line{stroke-width:2}}
.combat-attack-types{margin:32px 0}.combat-attack-types h4{font:600 25px var(--display);color:#e8cc95}.attack-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.attack-type-grid article,.flanking-rule{padding:24px;border:1px solid #695230;border-radius:8px;background:#18150f}.combat-attack-types h5{font:600 21px var(--display);color:#e6c790;margin:0 0 15px}.flanking-rule{margin-top:20px;border-left:3px solid #c49a51}.attack-type-grid ul{padding-left:20px}@media(max-width:700px){.attack-type-grid{grid-template-columns:1fr}.attack-type-grid article,.flanking-rule{padding:18px}}
.combat-scene[data-step="2"] .defender .combat-card,.combat-scene[data-step="3"] .defender .combat-card{transform:rotate(90deg)}
.combat-case-library{margin:32px 0 48px}.combat-case{border:1px solid #695230;border-radius:8px;background:#18150f;margin:12px 0;overflow:hidden}.combat-case summary{padding:20px;cursor:pointer;color:#e8cc95;font:600 20px var(--display)}.combat-case[open] summary{border-bottom:1px solid #695230;background:#292116}.case-body{padding:22px}.case-body h5{font-size:22px;color:#e8cc95}.case-duel{display:grid;grid-template-columns:minmax(0,1fr) 130px minmax(0,1fr);align-items:center;max-width:780px;margin:26px auto;gap:12px}.case-card{margin:0;text-align:center;min-width:0}.case-card>span{display:block;font-size:13px;color:#c6b28e;margin-bottom:12px}.case-card button{display:block;width:150px;max-width:100%;margin:auto;padding:0;border:1px solid #b39355;background:none;border-radius:8px;overflow:hidden;cursor:zoom-in}.case-card img{width:100%;height:auto;display:block}.case-card figcaption{margin-top:12px}.case-card strong,.case-card small,.case-card em{display:block}.case-card strong{color:#e8cc95}.case-card em{font-size:13px;font-style:normal;color:#c7baa4;margin-top:6px}.case-arrows{text-align:center;color:#f2c578;font-size:15px}.case-arrows svg{width:100%;height:30px;fill:none;stroke:#f2c578;stroke-width:3}.case-arrows small{display:block;margin-top:16px;color:#b6e6f1}.case-arrows .case-return{stroke:#9bdbec}.case-result{padding:18px;border-left:3px solid #c49a51;background:#292116}.case-objective{display:flex;align-items:center;justify-content:center;gap:35px;margin:24px 0}.case-objective>div{color:#e8cc95;text-align:center}.objective-arrow{font-size:24px;color:#f2c578}@media(max-width:600px){.case-body{padding:14px}.combat-case summary{font-size:17px;padding:16px}.case-duel{grid-template-columns:minmax(0,1fr) 65px minmax(0,1fr);gap:7px}.case-card button{width:108px}.case-card strong{font-size:14px}.case-card>span,.case-card em{font-size:11px}.case-arrows{font-size:12px}.case-objective{gap:16px}.case-objective .case-card{max-width:45%}}
