/* How to play: the lesson. The head is a night plate with the rendered board; below it the lesson runs in order,
   stock and night plates in turn. Everything live (the muster, the duel, the storm chart, the bots) is built by
   js/learn.js from the rules engine; the static markup reads in full without it. */

/* ---------- the head ---------- */
.learn-head{min-height:min(80svh,760px);display:flex;align-items:center}
.learn-head .wrap{width:min(var(--wrap), 100% - 2 * var(--gutter))}
.learn-head h1{font-size:clamp(3.4rem,2rem + 6vw,7rem);max-width:none}
.learn-head .lede{color:#dfe3dd;max-width:24em;margin-bottom:30px}
.learn-art.head-art{width:min(60vw,900px);right:max(-5vw,-70px);bottom:auto;top:calc(var(--head-h) + 3vw);
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 16%);mask-image:linear-gradient(to right, transparent 0, #000 16%)}
@media (max-width:1100px){ .learn-art.head-art{width:min(66vw,760px);top:auto;bottom:4%;opacity:.5} .learn-head .wrap{text-shadow:0 2px 14px rgba(16,38,58,.9)} }
@media (max-width:860px){
  .learn-head{min-height:0;display:flex;flex-direction:column-reverse;padding-bottom:24px}
  .learn-art.head-art{opacity:1;width:calc(100% + 2 * var(--gutter));max-width:none;margin:12px calc(-1 * var(--gutter)) 0;-webkit-mask-image:none;mask-image:none;bottom:auto;top:auto}
}

/* ---------- the table of contents: a real sequence, so it is numbered ---------- */
.lesson-nav{padding-block:clamp(36px,4vw,56px)}
.toc-title{font:600 var(--fs-1)/1.2 var(--text);margin:0 0 16px;color:var(--ink-2)}
.toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px 28px;counter-reset:part}
.toc li{margin:0;counter-increment:part;border-top:1px solid var(--rule)}
.toc a{display:flex;gap:.55em;align-items:baseline;padding:9px 0 8px;text-decoration:none;font-size:1.06rem;line-height:1.2}
.toc a::before{content:counter(part);font:400 1.25em/1 var(--display);color:var(--scarlet);min-width:1.1em}
.toc a:hover{color:var(--scarlet)}
@media (max-width:980px){ .toc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:420px){ .toc{grid-template-columns:1fr} }

/* ---------- the fleet ---------- */
.fleet-switch{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 26px}
.fleet-switch-label{font-family:var(--fell);font-style:italic;color:var(--ink-3)}
.fleet-switch-row{display:flex;flex-wrap:wrap;gap:8px}
.fs-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 12px;border:1px solid var(--rule);background:transparent;color:var(--ink);font:500 1rem var(--text);border-radius:2px;cursor:pointer}
.fs-btn i{width:12px;height:12px;border-radius:50%;background:var(--fc);box-shadow:0 0 0 1px var(--ink)}
.fs-btn:hover{border-color:var(--ink)}
.fs-btn[aria-pressed="true"]{border-color:var(--ink);background:var(--stock-hi);box-shadow:2px 2px 0 var(--ink)}
.muster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(8px,1.2vw,18px)}
.muster li{margin:0;display:grid;justify-items:center;text-align:center;gap:2px;align-content:start}
.muster img{width:100%;max-width:130px;background:var(--stock-hi);padding:5px;border:1px solid var(--rule);border-radius:2px;margin-bottom:8px}
.muster .r{font:400 clamp(1.8rem,2.8vw,2.6rem)/1 var(--display);color:var(--scarlet)}
.muster .n{font-weight:600;line-height:1.15;font-size:1rem}
.muster .c{font-size:.92rem;color:var(--ink-2)}
.muster .m{font-family:var(--fell);font-style:italic;font-size:.92rem;color:var(--ink-3);line-height:1.2}
.fleet-notes{margin-top:clamp(40px,5vw,64px)}
.fleet-notes p{color:var(--ink-2)}
@media (max-width:900px){ .muster{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px} .muster img{max-width:120px} }

/* ---------- the duel ---------- */
.duel{display:grid;gap:clamp(18px,2.4vw,30px);padding:clamp(18px,3vw,40px);border:1px solid rgba(243,234,211,.22);background:rgba(11,27,42,.45)}
.duel-side{border:0;margin:0;padding:0;min-width:0}
.duel-side legend{font:600 1.05rem var(--text);color:var(--stock-hi);margin-bottom:10px;padding:0}
.duel-side legend span{font-family:var(--fell);font-style:italic;font-weight:400;color:#b9c2c3;margin-left:6px}
.duel-row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(4px,.8vw,10px)}
.pick{position:relative;display:block;cursor:pointer}
.pick input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.pick .tile{display:grid;justify-items:center;gap:4px;padding:6px 4px 8px;border:2px solid transparent;border-radius:3px;transition:background-color .15s,border-color .15s}
.pick img{width:100%;max-width:72px;background:var(--stock-hi);border-radius:2px;padding:3px}
.pick b{font:400 clamp(1.1rem,1.8vw,1.5rem)/1 var(--display);color:var(--stock-hi)}
.pick:hover .tile{background:rgba(243,234,211,.08)}
.pick input:checked + .tile{border-color:var(--gold);background:rgba(201,154,59,.16)}
.pick input:focus-visible + .tile{outline:3px solid var(--gold);outline-offset:2px}
.pick.off{cursor:not-allowed}
.pick.off .tile{opacity:.32}
.pick.off input{cursor:not-allowed}
.duel-note{margin:8px 0 0;font-family:var(--fell);font-style:italic;font-size:var(--fs-s);color:#b9c2c3;max-width:none}
.duel-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:clamp(12px,3vw,40px);align-items:center;padding-block:clamp(8px,2vw,24px);
  border-block:1px solid rgba(243,234,211,.16)}
.duel-ship{margin:0;display:flex;justify-content:center;transition:transform .45s cubic-bezier(.3,.7,.3,1),filter .45s,opacity .45s}
.duel-ship img{width:min(100%,220px);background:var(--stock-hi);padding:6px;border-radius:3px;box-shadow:6px 6px 0 #000}
.duel-ship.sunk{transform:translateY(14px) rotate(-7deg);filter:grayscale(.9) brightness(.7);opacity:.55}
.duel-ship.def.sunk{transform:translateY(14px) rotate(7deg)}
.duel-ship.taken img{box-shadow:0 0 0 4px var(--gold), 6px 6px 0 #000}
.duel-verdict{text-align:center}
.verdict{font:400 clamp(1.7rem,1.2rem + 2vw,2.8rem)/1.05 var(--display);color:var(--stock-hi);margin:0 auto .35em;max-width:none}
.duel[data-result="win"] .verdict,.duel[data-result="cap"] .verdict{color:var(--gold)}
.why{margin:0 auto;color:#c9cfcc;max-width:24em}
.exc-title{margin:clamp(56px,7vw,96px) 0 26px;font:400 var(--fs-3)/1 var(--display)}
.exceptions{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px)}
.exceptions li{margin:0;display:flex;flex-direction:column;align-items:flex-start}
.exceptions img{aspect-ratio:1;object-fit:cover;width:100%}
.exceptions p{color:#d8dcd6;margin:18px 0 16px;flex:1}
.exceptions b{color:var(--stock-hi)}
.try{font-size:1rem;min-height:42px}
@media (max-width:860px){
  .duel-row{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:8px}
  .duel-stage{grid-template-columns:1fr 1fr;grid-template-areas:"a d" "v v"}
  .duel-ship.att{grid-area:a}.duel-ship.def{grid-area:d}.duel-verdict{grid-area:v}
  .duel-ship img{width:min(100%,150px)}
  .exceptions{grid-template-columns:1fr;max-width:460px}
}

/* ---------- one round ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px);counter-reset:step}
.steps li{margin:0;counter-increment:step;border-top:2px solid var(--ink);padding-top:14px}
.steps h3{font-size:var(--fs-1);display:flex;align-items:baseline;gap:.45em;margin-bottom:.4em}
.steps h3::before{content:counter(step);font:400 1.6em/1 var(--display);color:var(--scarlet)}
.steps p{color:var(--ink-2)}
@media (max-width:980px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .steps{grid-template-columns:1fr} }
.truce{margin:clamp(40px,5vw,64px) 0 0;max-width:640px;padding:22px 26px 10px;background:var(--stock-hi);border:2px solid var(--ink);box-shadow:var(--shadow-block);transform:rotate(-.6deg)}
.truce h3{font:400 var(--fs-2)/1 var(--display);color:var(--scarlet);margin-bottom:.35em}
.meet-title{font:400 var(--fs-3)/1 var(--display);margin:clamp(72px,9vw,120px) 0 .25em}
.meet-intro{color:var(--ink-2);margin-bottom:28px}
.meets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.meet svg{width:100%;height:auto;display:block;overflow:visible}
.meet .cells rect{fill:#a9c0bc;stroke:rgba(28,24,20,.45);stroke-width:1}
.meet .cells rect.hot{fill:#c3d2cd}
.meet .arrow{fill:none;stroke:var(--scarlet);stroke-width:3.2;stroke-linecap:round;marker-end:url(#fc-ah)}
.meet .burst{fill:var(--scarlet);stroke:var(--stock-hi);stroke-width:1.4;stroke-linejoin:round}
#fc-ah path{fill:var(--scarlet)}
.meet figcaption{font-family:var(--text);font-style:normal;font-size:var(--fs-s);color:var(--ink-2);line-height:1.45;margin-top:14px}
.meet figcaption b{color:var(--ink)}
/* the Admiral's line between the meetings and the notes (and between the storm and its notes, below) */
.round .pull,.points .pull{margin:clamp(48px,6vw,80px) 0 0;max-width:42rem}
.round-notes{margin-top:clamp(40px,5vw,64px)}
.round-notes p{color:var(--ink-2)}
@media (max-width:980px){ .meets{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px} }
@media (max-width:520px){ .meets{grid-template-columns:1fr;max-width:380px} }

/* ---------- what each captain sees ---------- */
.seeing .split{align-items:start}
.facts{margin:24px 0 0;display:grid;gap:18px}
.facts div{border-top:1px solid var(--rule);padding-top:14px}
.facts dt{font-weight:600;font-size:var(--fs-1);margin-bottom:.2em}
.facts dd{margin:0;color:var(--ink-2);max-width:34em}
.seeing-art{position:sticky;top:calc(var(--head-h) + 32px)}
.seeing-art img{width:100%;border-radius:3px;box-shadow:0 18px 40px -22px rgba(40,24,10,.6)}
@media (max-width:860px){ .seeing-art{position:static} }

/* ---------- points and the storm ---------- */
.points-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:start}
.tally{margin:0;display:grid;gap:14px}
.tally div{display:grid;grid-template-columns:3.4em 1fr;gap:16px;align-items:baseline;border-top:1px solid rgba(243,234,211,.14);padding-top:12px}
.tally dt{font:400 clamp(2rem,3.4vw,2.8rem)/1 var(--display);color:var(--gold);text-align:right}
.tally dd{margin:0;color:#d8dcd6;line-height:1.4}
.storm{margin:0}
.storm-chart{width:100%;max-width:520px;height:auto;display:block;border:2px solid var(--stock-hi);background:#0b1b2a}
.storm-chart .cell{fill:#9fb7b3;stroke:rgba(16,38,58,.35);stroke-width:.03;transition:fill .35s}
.storm-chart .cell.anch{fill:color-mix(in srgb,var(--ac) 32%,#9fb7b3)}
.storm-chart .cell.cap{fill:#cdbb8a}
.storm-chart .cell.isle{fill:#8c7a55;stroke:rgba(28,24,20,.6)}
.storm-chart .cell.closing{fill:#6d6a78}
.storm-chart .cell.shut{fill:#23303d}
.storm-chart .ring{fill:none;stroke:var(--gold);stroke-width:.07;transition:opacity .35s}
.storm-chart .ring.gone{opacity:0}
.storm-control{display:flex;align-items:center;gap:16px;margin-top:16px;max-width:520px}
.storm-control label{font-weight:600;white-space:nowrap;min-width:5.6em}
.storm-control output{font:400 1.4em var(--display);color:var(--gold)}
.storm-control input{flex:1;accent-color:var(--gold);min-height:32px}
.storm-now{min-height:3em;margin:12px 0 4px;color:var(--stock-hi);max-width:520px}
.points-notes{margin-top:clamp(48px,6vw,80px)}
.points-notes p{color:#d0d6d2}
.points-notes b{color:var(--stock-hi)}
@media (max-width:860px){ .points-grid{grid-template-columns:1fr} }

/* ---------- four ways to win ---------- */
.ends{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px) clamp(32px,6vw,96px)}
.ends div{border-top:2px solid var(--ink);padding-top:16px}
.ends dt{display:flex;align-items:center;gap:.4em;font:400 var(--fs-3)/1 var(--display);color:var(--scarlet);margin-bottom:.3em}
.ends dt .ico{width:1em;height:1em;stroke-width:1.4}
.ends dd{margin:0;color:var(--ink-2);max-width:30em}
.ends-note{margin-top:32px}
@media (max-width:760px){ .ends{grid-template-columns:1fr} }

/* ---------- Pirates! ---------- */
.pirates .split{align-items:start}
.pirates .lede{color:var(--stock-hi)}
.pirate-rules{list-style:none;padding:0;margin:26px 0 22px;display:grid;gap:12px}
.pirate-rules li{margin:0;color:#d8dcd6;padding-left:22px;position:relative}
.pirate-rules li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:9px;background:var(--stock-hi);transform:rotate(45deg)}
.pirate-rules b{color:var(--stock-hi)}
.pirate-art{margin:0}
.pirate-art .print-wrap{max-width:420px;margin-inline:auto;transform:rotate(1.5deg)}
.pirate-art .print{width:100%}
.pirate-ships{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:420px;margin:26px auto 0}
.pirate-ships img{width:100%;background:var(--stock-hi);padding:3px;border-radius:2px}
.pirate-art figcaption{max-width:420px;margin:14px auto 0}

/* ---------- the charts ---------- */
.chart-main{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.chart-main img,.chart-pair img{width:100%;height:auto;background:#fff;padding:clamp(6px,1vw,14px);box-shadow:0 1px 0 var(--rule), 0 20px 40px -26px rgba(40,24,10,.65)}
.chart-copy h3{font:400 var(--fs-3)/1 var(--display);margin-bottom:.15em}
.chart-copy .who,.chart-pair .who{font-family:var(--fell);font-style:italic;color:var(--scarlet);margin:0 0 .8em}
.chart-copy p{color:var(--ink-2)}
.chart-pair{margin-top:clamp(56px,7vw,100px);align-items:start}
.chart-pair figcaption{font-family:var(--text);font-style:normal;font-size:var(--fs-0);color:var(--ink-2);margin-top:18px;line-height:1.5}
.chart-pair figcaption b{color:var(--ink)}
@media (max-width:860px){ .chart-main{grid-template-columns:1fr} }

/* ---------- the bots ---------- */
.crew{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.crew li{margin:0;border-top:2px solid var(--ink);padding-top:14px}
.crew h3{font:400 var(--fs-2)/1 var(--display);margin-bottom:.3em}
.crew p{color:var(--ink-2);font-size:var(--fs-s);line-height:1.5}
.crew .plays{font-family:var(--fell);font-style:italic;color:var(--ink-3)}
.pips{display:flex;gap:5px;margin:0 0 12px}
.pips i{width:22px;height:6px;border:1px solid var(--ink);background:transparent}
.pips i.on{background:var(--scarlet)}
.bots-act{margin-top:clamp(36px,4vw,56px)}
@media (max-width:980px){ .crew{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .crew{grid-template-columns:1fr} }

/* ---------- party mode ---------- */
.tv-frame{margin:0}
.tv-frame img{width:100%;border:10px solid #050708;border-bottom-width:14px;border-radius:6px;box-shadow:0 30px 50px -28px #000}
.party .lede{color:var(--stock-hi)}
.party-steps{list-style:none;margin:22px 0 18px;padding:0;counter-reset:ps;display:grid;gap:12px}
.party-steps li{margin:0;counter-increment:ps;display:grid;grid-template-columns:1.6em 1fr;gap:10px;color:#d8dcd6}
.party-steps li::before{content:counter(ps);font:400 1.5em/1 var(--display);color:var(--gold)}

/* ---------- the send-off ---------- */
.sail-off{text-align:center}
.sail-off .lede{margin-inline:auto}
.sail-off .actions{justify-content:center;margin-top:26px}

@media (prefers-reduced-motion:reduce){ .duel-ship{transition:none} }

/* the Buccaneers' flag flies beside the Pirates! heading */
.with-flag{display:flex;align-items:center;gap:.3em}
.with-flag img{width:1.5em;height:auto;flex:none;transform:rotate(-4deg);filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}