/* DoD Games instruction booklets.
   The page around the booklet (masthead, intro, desk, controls, text version, footer) is Dave on
   Duty: navy, indigo to cyan, Sora and Inter. Inside the paper every booklet shares one DoD
   system (cover layout, Fair Play seal, running heads, folios, the thin indigo to cyan rule),
   while each game keeps its own paper, type and ink, set per theme at the foot of this file.
   Fonts are linked from each manual.html (Google Fonts only). */
:root{
  color-scheme:dark;
  --bg:#070b16;--bg-alt:#0b1122;--panel:#101830;--panel-2:#141d3a;
  --line:rgba(148,163,255,.14);--line-2:rgba(148,163,255,.24);
  --text:#e8ecff;--muted:#9aa5c9;--sky:#8fd8ff;
  --accent:#6366f1;--accent-2:#22d3ee;
  --grad:linear-gradient(92deg,#818cf8 0%,#22d3ee 100%);
  --dod-rule:linear-gradient(90deg,#6366f1 0%,#22d3ee 100%);
  --dod-rule-v:linear-gradient(180deg,#6366f1 0%,#22d3ee 100%);
  --dod-navy:#070b16;
  --shadow:0 20px 60px rgba(3,6,20,.55);
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-head:'Sora','Inter',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font-body);overflow-x:hidden;
  background-image:radial-gradient(900px 520px at 50% -120px,rgba(99,102,241,.16),transparent 70%),radial-gradient(700px 420px at 85% 8%,rgba(34,211,238,.07),transparent 70%);background-repeat:no-repeat}
a{color:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--sky);outline-offset:4px;border-radius:8px}
img{max-width:100%;display:block}
.wrap{width:min(1180px,calc(100% - 48px));margin-inline:auto}
.skip{position:absolute;top:-100px;left:20px;padding:10px 16px;border-radius:999px;background:var(--grad);color:#04101f;font-weight:700;z-index:50;text-decoration:none}.skip:focus{top:12px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- masthead ---------- */
.masthead{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}
.masthead .wordmark{display:inline-flex;align-items:center}
.masthead .wordmark img{height:44px;width:auto}
.masthead nav{display:flex;gap:6px;font-size:14px;font-weight:500}
.masthead nav a{text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:999px;transition:color .18s,background .18s}
.masthead nav a:hover{color:var(--text);background:rgba(129,140,248,.1)}

/* ---------- intro ---------- */
.intro{padding:22px 0 0;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 auto 12px;padding:5px 14px;border-radius:999px;border:1px solid var(--line-2);background:rgba(129,140,248,.07);font:700 12px/1.4 var(--font-body);letter-spacing:.16em;text-transform:uppercase;color:var(--sky)}
.kicker::before{content:'';width:7px;height:7px;border-radius:50%;flex:none;background:var(--grad);box-shadow:0 0 10px rgba(139,147,255,.9)}
.intro h1{font:800 clamp(30px,4.2vw,48px)/1.08 var(--font-head);letter-spacing:-.02em;margin:0 0 10px;color:var(--text)}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{color:var(--muted);max-width:660px;margin:0 auto;font-size:15.5px}

/* =========================================================
   THE DESK AND THE BOOK
   ========================================================= */
.booklet{--s:1;--pw:440px;--ph:620px;--turn:.9s;--ease:cubic-bezier(.645,.045,.355,1);margin:6px 0 0}
.stage{position:relative;perspective:2600px;display:flex;justify-content:center;align-items:flex-start;padding-top:20px;overflow:hidden;user-select:none;-webkit-user-select:none;touch-action:pan-y}
/* a soft pool of light on the desk, in Dave's indigo and cyan */
.stage::before{content:'';position:absolute;left:50%;top:calc(20px + var(--ph) * var(--s) * .52);width:min(1200px,100%);height:calc(var(--ph) * var(--s) * 1.25);transform:translate(-50%,-50%);background:radial-gradient(ellipse at 50% 45%,rgba(99,102,241,.16),rgba(34,211,238,.05) 40%,transparent 68%);pointer-events:none}
.book{position:relative;width:calc(var(--pw) * 2);height:var(--ph);transform-style:preserve-3d;transform-origin:50% 0;transform:scale(var(--s)) translateX(0);transition:transform var(--turn) var(--ease);flex:none}
.book[data-state=front]{transform:scale(var(--s)) translateX(calc(var(--pw) * -.5))}
.book[data-state=back]{transform:scale(var(--s)) translateX(calc(var(--pw) * .5))}

/* layered desk shadow: a tight contact shadow plus two soft ambient layers, following the
   part of the desk the booklet covers (right half closed at the front, left half at the back) */
.desk-shadow{position:absolute;top:0;bottom:0;left:0;right:0;transform:translateZ(-3px);pointer-events:none;border-radius:2px 4px 4px 2px;
  box-shadow:0 1px 1px rgba(0,0,0,.45),0 3px 6px rgba(0,0,0,.35),0 14px 24px -4px rgba(0,0,0,.45),0 34px 60px -10px rgba(0,0,0,.55),0 60px 110px -20px rgba(2,4,14,.7);
  transition:left var(--turn) var(--ease),right var(--turn) var(--ease)}
.book[data-state=front] .desk-shadow{left:50%}
.book[data-state=back] .desk-shadow{right:50%}
/* the old single ellipse, kept as the softest layer under the whole thing */
.book::after{content:'';position:absolute;left:50%;right:0;bottom:-30px;height:44px;background:radial-gradient(ellipse at center,rgba(0,0,0,.5),transparent 70%);filter:blur(8px);transform:translateZ(-4px);transition:left var(--turn),right var(--turn)}
.book[data-state=open]::after{left:0}
.book[data-state=back]::after{left:0;right:50%}

.sheet{position:absolute;top:0;left:50%;width:var(--pw);height:var(--ph);transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform var(--turn) var(--ease);cursor:pointer}
.sheet.flipped{transform:rotateY(-180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background-color:var(--paper);background-image:url(/dodgames/manual/paper.svg);color:var(--page-ink)}
.face.back{transform:rotateY(180deg)}
/* the fold: shading into the spine on both halves of a spread */
.face.front::after,.face.back::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5}
.face.front::after{background:linear-gradient(to right,rgba(0,0,0,.24),rgba(0,0,0,.07) 4%,rgba(0,0,0,0) 10%),linear-gradient(to left,rgba(0,0,0,.07),transparent 3%)}
.face.back::after{background:linear-gradient(to left,rgba(0,0,0,.24),rgba(0,0,0,.07) 4%,rgba(0,0,0,0) 10%),linear-gradient(to right,rgba(0,0,0,.07),transparent 3%)}

/* curl shading while a sheet turns: a highlight and a shadow roll across the lifting face
   (towards the spine on the way up), then the other face comes down dark and clears */
.face.front::before,.face.back::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:6;opacity:0;background-repeat:no-repeat;background-size:260% 100%}
.sheet.turning.fwd .face.front::before{background-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 30%,rgba(255,255,255,.28) 40%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.34) 100%);animation:curl-up var(--turn) ease-in forwards}
.sheet.turning.fwd .face.back::before{background-image:linear-gradient(to left,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 45%,rgba(255,255,255,.16) 60%,rgba(0,0,0,0) 100%);animation:curl-down var(--turn) ease-out forwards}
.sheet.turning.bwd .face.back::before{background-image:linear-gradient(to left,rgba(0,0,0,0) 0%,rgba(0,0,0,.30) 30%,rgba(255,255,255,.28) 40%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.34) 100%);animation:curl-up-b var(--turn) ease-in forwards}
.sheet.turning.bwd .face.front::before{background-image:linear-gradient(to right,rgba(0,0,0,.42) 0%,rgba(0,0,0,.20) 45%,rgba(255,255,255,.16) 60%,rgba(0,0,0,0) 100%);animation:curl-down-b var(--turn) ease-out forwards}
@keyframes curl-up{0%{opacity:0;background-position:100% 0}50%{opacity:1;background-position:0 0}100%{opacity:1;background-position:0 0}}
@keyframes curl-down{0%,48%{opacity:1;background-position:100% 0}100%{opacity:0;background-position:0 0}}
@keyframes curl-up-b{0%{opacity:0;background-position:0 0}50%{opacity:1;background-position:100% 0}100%{opacity:1;background-position:100% 0}}
@keyframes curl-down-b{0%,48%{opacity:1;background-position:0 0}100%{opacity:0;background-position:100% 0}}
/* the turning sheet's shadow on the pages beneath it */
.turn-shade{position:absolute;top:0;bottom:0;width:var(--pw);pointer-events:none;opacity:0;transform:translateZ(1px)}
.turn-shade.r{left:50%;background:linear-gradient(to right,rgba(0,0,0,.42),rgba(0,0,0,.14) 45%,rgba(0,0,0,0) 90%)}
.turn-shade.l{right:50%;background:linear-gradient(to left,rgba(0,0,0,.42),rgba(0,0,0,.14) 45%,rgba(0,0,0,0) 90%)}
.book.shade-r-early .turn-shade.r,.book.shade-l-early .turn-shade.l{animation:shade-early var(--turn) ease-out}
.book.shade-r-late .turn-shade.r,.book.shade-l-late .turn-shade.l{animation:shade-late var(--turn) ease-in}
@keyframes shade-early{0%{opacity:.9}55%{opacity:.25}100%{opacity:0}}
@keyframes shade-late{0%,35%{opacity:0}85%{opacity:.8}100%{opacity:0}}

/* a page corner lifts a little under the pointer */
@media(hover:hover){
  .book:not([data-state=back]) .sheet:not(.flipped):not(.turning):hover{transform:rotateY(-7deg)}
  .book:not([data-state=front]) .sheet.flipped:not(.turning):hover{transform:rotateY(-173deg)}
}

/* card-stock covers: thicker, a bevelled board edge and a little gloss */
.sheet.is-cover .face.front,.sheet.is-last .face.back{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28),inset -2px 0 0 rgba(255,255,255,.07)}
.sheet.is-cover .face.front::after{background:linear-gradient(to right,rgba(0,0,0,.35),rgba(255,255,255,.08) 1.2%,rgba(0,0,0,0) 3%),linear-gradient(to left,rgba(0,0,0,.28),rgba(0,0,0,0) 1.5%)}
.sheet.is-last .face.back::after{background:linear-gradient(to left,rgba(0,0,0,.35),rgba(255,255,255,.08) 1.2%,rgba(0,0,0,0) 3%),linear-gradient(to right,rgba(0,0,0,.28),rgba(0,0,0,0) 1.5%)}
.gloss{position:absolute;inset:0;background:linear-gradient(118deg,rgba(255,255,255,.2),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 62%,rgba(255,255,255,.07));pointer-events:none;z-index:4}

/* page-edge stacks either side of the spine; the outermost layer is the cover board */
.edge{position:absolute;top:1px;bottom:1px;pointer-events:none;transform:translateZ(-1px)}
.edge-r{left:calc(50% + var(--pw));width:calc(var(--stack-r,0px) + 3px);background:linear-gradient(to right,transparent calc(100% - 3px),var(--board) calc(100% - 3px)),repeating-linear-gradient(to right,#ebe4cf 0 1px,#bdb59c 1px 2px);border-radius:0 3px 3px 0;box-shadow:2px 0 5px rgba(0,0,0,.35);transition:width var(--turn)}
.edge-l{right:calc(50% + var(--pw));width:calc(var(--stack-l,0px) + 3px);background:linear-gradient(to left,transparent calc(100% - 3px),var(--board) calc(100% - 3px)),repeating-linear-gradient(to left,#ebe4cf 0 1px,#bdb59c 1px 2px);border-radius:3px 0 0 3px;box-shadow:-2px 0 5px rgba(0,0,0,.35);transition:width var(--turn)}
.book[data-state=front] .edge-l,.book[data-state=back] .edge-r{display:none}
/* saddle stitch: two staples through the spine, visible when open */
.staple{position:absolute;left:calc(50% - 2px);width:4px;height:46px;border-radius:2px;background:linear-gradient(to right,#6f7479,#e9edf0 45%,#8b9197);box-shadow:0 1px 2px rgba(0,0,0,.5);transform:translateZ(3px);z-index:999;opacity:0;transition:opacity .3s;pointer-events:none}
.staple-1{top:22%}.staple-2{top:calc(78% - 46px)}
.book[data-state=open] .staple{opacity:1}

/* opening straight onto a page (a #p= link) should not slide there */
.booklet.instant .book,.booklet.instant .sheet,.booklet.instant .edge,.booklet.instant .desk-shadow{transition:none!important}

/* ---------- single-page mode (phones) ---------- */
.booklet.single .book{width:var(--pw)}
.booklet.single .sheet{left:0}
.booklet.single .sheet.flipped{transform:rotateY(-100deg);opacity:0;transition:transform var(--turn) var(--ease),opacity .25s calc(var(--turn) * .55)}
.booklet.single .edge-l,.booklet.single .staple,.booklet.single .turn-shade.l{display:none}
.booklet.single .edge-r{left:var(--pw)}
.booklet.single .turn-shade.r{left:0}
.booklet.single .book::after{left:0;right:0}
.booklet.single .desk-shadow{left:0;right:0}

/* ---------- controls ---------- */
.controls{display:flex;align-items:center;justify-content:center;gap:10px;margin:22px auto 8px;flex-wrap:wrap}
.controls button{appearance:none;position:relative;overflow:hidden;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--text);font:600 14px/1 var(--font-body);padding:12px 18px;border-radius:999px;cursor:pointer;min-width:44px;min-height:44px;transition:transform .18s,box-shadow .18s,background .18s,border-color .18s}
.controls button:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(148,163,255,.4);transform:translateY(-1px)}
.controls button:disabled{opacity:.38;cursor:default}
.controls .next{background:var(--grad);color:#04101f;border-color:transparent;box-shadow:0 8px 30px rgba(99,102,241,.35);padding-inline:22px}
.controls .next:hover:not(:disabled){background:var(--grad);border-color:transparent;box-shadow:0 12px 38px rgba(34,211,238,.4);transform:translateY(-2px)}
.controls .next::after{content:'';position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,1,.36,1);pointer-events:none}
.controls .next:hover:not(:disabled)::after{left:150%}
.counter{min-width:230px;text-align:center;font:600 13px/1.3 var(--font-body);letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums;padding:9px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(16,24,48,.6)}
.hint-keys{text-align:center;font-size:12.5px;color:var(--muted);margin:0 0 30px}
.booklet:not(.ready) .stage{min-height:420px}
.booklet:not(.ready) .stage::after{content:'Opening the booklet…';position:absolute;top:45%;left:0;right:0;text-align:center;color:var(--muted);font:500 15px var(--font-body)}
.booklet.failed .stage::after{content:''}

/* ---------- plain-text version ---------- */
.text-version{padding:18px 0 56px}
.text-version details{border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(16,24,48,.85),rgba(11,17,34,.85));padding:6px 22px}
.text-version summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;font:700 17px/1.3 var(--font-head);color:var(--text)}
.text-version summary::-webkit-details-marker{display:none}
.text-version summary::after{content:'+';flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-2);color:var(--sky);font:600 18px/1 var(--font-body)}
.text-version details[open] summary::after{content:'−'}
.text-version details[open] summary{border-bottom:1px solid var(--line);margin-bottom:6px}
#manual-text{columns:2 360px;column-gap:48px;margin:18px 0 12px}
.tx-page{break-inside:avoid;margin:0 0 28px}
.tx-page h3{font:700 19px/1.25 var(--font-head);margin:0 0 8px;color:var(--text)}
.tx-page h3::before{content:attr(data-num);display:block;font:700 11px/1 var(--font-body);letter-spacing:.16em;color:var(--sky);margin-bottom:6px}
.tx-page p,.tx-page li,.tx-page td,.tx-page th,.tx-page dt,.tx-page dd{font-size:15px;color:var(--muted)}
.tx-page p{margin:0 0 10px}
.tx-page ul,.tx-page ol{margin:0 0 10px;padding-left:20px}
.tx-page table{border-collapse:collapse;width:100%;margin:0 0 10px}.tx-page td,.tx-page th{border-top:1px solid var(--line);padding:5px 8px 5px 0;text-align:left;vertical-align:top}
.tx-page th{color:var(--text);font-size:13px}
.tx-page dl{margin:0 0 10px}.tx-page .ctl{display:flex;gap:10px}.tx-page dt{font-weight:700;color:var(--text)}.tx-page dd{margin:0}
.tx-page aside{border-left:2px solid var(--accent);padding:2px 0 2px 12px;margin:0 0 10px}
.tx-page .b-warning{border-left-color:#f59e0b}
.tx-page .box-tab{display:block;font-weight:700;color:var(--sky);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.tx-page .b-warning .box-tab{color:#fbbf24}
.tx-page figure{margin:10px 0 14px}.tx-page figure img{width:auto;max-width:100%;max-height:260px;border-radius:10px;border:1px solid var(--line)}
.tx-page .b-images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 14px}.tx-page .b-images figure{margin:0}
.tx-page .b-images img{max-height:200px}
.tx-page .b-picture img{max-height:340px}
.tx-page figcaption{font-size:13px;color:var(--muted);margin-top:6px;font-style:italic}
.tx-page .plate-no{font-style:normal;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-right:6px;font-size:11px}

/* ---------- footer ---------- */
.footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0 34px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.footer img{height:36px;width:auto}.footer a{color:var(--muted)}.footer a:hover{color:var(--text)}

/* =========================================================
   PAGE TYPOGRAPHY (inside the booklet, at design size 440 x 620)
   --fs is each theme's body size; --fit (set by booklet.js, 1 = natural) shrinks a page
   that would otherwise run off its foot, so text is never cut.
   ========================================================= */
.pg{--fit:1;--pic:1;position:absolute;inset:0;padding:32px 38px 26px;display:flex;flex-direction:column;font:calc(var(--fs,13.2px) * var(--fit)) / 1.5 var(--body-font);color:var(--page-ink)}
.run{position:relative;display:flex;justify-content:space-between;gap:12px;font:600 9px/1 var(--label-font);letter-spacing:1.6px;text-transform:uppercase;color:var(--page-muted);border-bottom:1px solid var(--rule);padding-bottom:9px;margin-bottom:15px;flex:none}
/* the DoD detail: a thin indigo to cyan rule where the running head meets its line */
.run::after{content:'';position:absolute;left:0;bottom:-1.5px;width:46px;height:2px;border-radius:1px;background:var(--dod-rule)}
.back .run::after{left:auto;right:0;background:linear-gradient(270deg,#6366f1,#22d3ee)}
.pg-h{font:var(--head-weight,700) calc(var(--head-size,24px) * (.55 + .45 * var(--fit)))/1.1 var(--head-font);letter-spacing:var(--head-track,-.3px);color:var(--head-ink);margin:0 0 .5em;flex:none}
.pg-body{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column}
.pg-body>*{margin:0 0 .76em;flex:none}.pg-body>*:last-child{margin-bottom:0}
.b-p{margin:0 0 .76em}
.b-list,.b-steps{padding-left:1.36em;margin:0 0 .76em}.b-list li,.b-steps li{margin:0 0 .3em}
.b-list li::marker{color:var(--accent)}
.b-steps{list-style:none;padding:0;counter-reset:st}
.b-steps li{counter-increment:st;position:relative;padding-left:2.1em}
.b-steps li::before{content:counter(st);position:absolute;left:0;top:.05em;width:1.45em;height:1.45em;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 .83em/1.75em var(--label-font);text-align:center}
.b-controls{margin:0 0 .76em;display:grid;gap:.45em}
.b-controls .ctl{display:grid;grid-template-columns:minmax(78px,auto) 1fr;gap:10px;align-items:start}
.b-controls dt{font:700 .8em/1.2 var(--label-font);letter-spacing:.6px;text-transform:uppercase;background:var(--key-bg);color:var(--key-ink);border-radius:6px;padding:.45em .7em;text-align:center;box-shadow:0 2px 0 var(--key-shadow)}
.b-controls dd{margin:0;padding-top:.2em}
.b-table{width:100%;border-collapse:collapse;font-size:.9em;margin:0 0 .76em}
.b-table th{font:700 .8em/1.2 var(--label-font);letter-spacing:1px;text-transform:uppercase;text-align:left;color:var(--page-muted);border-bottom:1.5px solid var(--page-ink);padding:0 6px .45em 0}
.b-table td{border-bottom:1px solid var(--rule);padding:.38em 6px .38em 0;vertical-align:top}
.b-table td:first-child{font-weight:700}
.b-tip,.b-warning{position:relative;border:1.5px solid var(--accent);border-radius:8px;padding:1.05em .9em .6em;margin:1.05em 0 .76em !important;background:var(--tip-bg)}
.b-warning{border-color:var(--warn);background:var(--warn-bg)}
.b-tip p,.b-warning p{margin:0 0 .3em}
.box-tab{position:absolute;top:-9px;left:10px;background:var(--accent);color:var(--accent-ink);font:700 9.5px/1 var(--label-font);letter-spacing:1.4px;text-transform:uppercase;padding:4px 8px;border-radius:4px}
.b-warning .box-tab{background:var(--warn);color:#fff}

/* pictures: never cropped, always their own shape, and a printed white mat frames each one.
   --pic (set by booklet.js) sizes them: below 1 on a tight page, where pictures give up room
   before the text does, and above 1 on a page with paper to spare */
.pg-body>.b-image{margin:.3em 0 .9em;display:flex;flex-direction:column;align-items:center}
.b-image img,.b-images img{width:auto;height:auto;max-width:calc(100% - 8px);border-radius:3px;background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--rule),0 3px 6px 2px rgba(0,0,0,.14)}
.b-image img{max-height:calc(212px * var(--pic))}
.b-image figcaption,.b-images figcaption{align-self:stretch;font-size:.8em;line-height:1.4;color:var(--page-muted);margin-top:.85em;font-style:italic}
/* two pictures side by side: a subgrid lines the pictures up on a common foot and the captions
   on a common top, even when the two pictures are not the same shape */
.pg-body>.b-images{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:0;margin:.3em 0 .9em}
.b-images figure{grid-row:span 2;display:grid;grid-template-rows:subgrid;justify-items:center;margin:0;min-width:0}
.b-images img{align-self:end}
.b-images figcaption{justify-self:stretch}
.b-images img{max-height:calc(170px * var(--pic))}
.pg-body>.float-mid{margin-top:auto !important;margin-bottom:auto !important;padding-bottom:18px}

/* full-page picture ("plate"): the art bleeds across the page on a dark mat in the game's colour */
/* the body runs edge to edge on a picture page (so the plate can bleed without being clipped);
   everything else on it keeps the normal margins */
.pg-picture .pg-body{margin:0 -38px}
.pg-picture .pg-body>*:not(.pic-plate){margin-left:38px;margin-right:38px}
.pg-body>.pic-plate{flex:1 1 auto;min-height:calc(230px * min(1, var(--pic)));margin:.1em 0 .9em;position:relative;display:flex;flex-direction:column;justify-content:center;background:var(--plate-bg);color:var(--plate-ink);padding:16px 16px 14px;box-shadow:inset 0 10px 14px -12px rgba(0,0,0,.6),inset 0 -10px 14px -12px rgba(0,0,0,.6)}
.pic-plate::before,.pic-plate::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--dod-rule);opacity:.85}
.pic-plate::before{top:0}.pic-plate::after{bottom:0;opacity:.35}
/* the frame takes the picture's own shape (booklet.js sets aspect-ratio once it loads) and gives
   up height when the page is tight; the picture is then letterboxed, never cropped */
.pic-frame{position:relative;flex:0 1 auto;width:100%;aspect-ratio:16/9;min-height:0}
.pic-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 12px rgba(0,0,0,.55))}
.pic-plate figcaption{flex:none;display:flex;gap:10px;align-items:baseline;font-size:.8em;line-height:1.4;margin-top:12px;color:var(--plate-ink)}
.plate-no{flex:none;font:700 9px/1 var(--label-font);letter-spacing:1.6px;text-transform:uppercase;padding:4px 6px;border-radius:3px;background:rgba(255,255,255,.12);color:var(--plate-ink)}
/* the plate number sits in the plate's top corner, like a printed plate mark */
.pic-plate .plate-no{position:absolute;top:12px;left:16px}
.pic-plate{padding-top:40px}
.pg-body>.pic-plate:last-child{margin-bottom:.5em}
.pg-picture .pg-body>.b-p{font-size:1.04em}

/* folio: the DoD mark on the spine side, the page number on the outer corner */
.folio{display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 11px/1 var(--label-font);color:var(--page-muted);padding-top:10px;flex:none}
.back .folio{flex-direction:row-reverse}
.folio-brand{display:inline-flex;align-items:center;gap:7px;font-size:8.5px;letter-spacing:1.5px;text-transform:uppercase;opacity:.9}
.back .folio-brand{flex-direction:row-reverse}
.folio-chip{display:inline-grid;place-items:center;height:18px;padding:0 3px;border-radius:5px;background:var(--dod-navy);box-shadow:inset 0 -1.5px 0 rgba(34,211,238,.55)}
.folio-chip img{height:14px;width:auto}
.folio-num{font-size:12px;letter-spacing:.5px;min-width:26px;text-align:right}
.back .folio-num{text-align:left}
.fine{font-size:10.5px;color:var(--page-muted);margin:6px 0 0}

/* DoD badge used inside the paper: the logo on a small navy plate (the logo is drawn for dark
   backgrounds, so it is never put straight onto paper), sized by height */
.dod-badge{display:inline-flex;align-items:center;align-self:flex-start;gap:10px;background:var(--dod-navy);border-radius:8px;padding:7px 12px 9px;position:relative;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.dod-badge img{height:26px;width:auto}
.dod-badge::after{content:'';position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:1px;background:var(--dod-rule)}

/* inside cover */
.pg-inside{justify-content:flex-start}
.pg-inside .dod-badge{margin-bottom:18px}
.promise-box{margin-top:18px !important}.promise-box .b-list{margin:4px 0 2px}
.inside-foot{margin-top:auto}

/* notes */
.pg-notes .lines{flex:1;background:repeating-linear-gradient(to bottom,transparent 0 27px,var(--rule) 27px 28px);margin-top:6px}

/* blank backs (single-page mode) */
.pg-blank{background:linear-gradient(to right,rgba(0,0,0,.03),transparent)}

/* =========================================================
   COVER: one layout for every DoD booklet
   navy spine strip + top band with the logo, the game's art, the game's title panel,
   and the Fair Play seal on the seam between them
   ========================================================= */
.pg-cover{padding:0;background:var(--cover-bg);color:var(--cover-ink);overflow:hidden}
.cover-spine{position:absolute;top:0;bottom:0;left:0;width:24px;background:var(--dod-navy);z-index:3;display:flex;align-items:center;justify-content:center}
.cover-spine::after{content:'';position:absolute;top:0;bottom:0;right:0;width:2px;background:var(--dod-rule-v)}
.cover-spine span{transform:rotate(-90deg);white-space:nowrap;font:700 7.5px/1 'Inter',sans-serif;letter-spacing:3px;text-transform:uppercase;color:#9aa5c9}
.pg-back .cover-spine{left:auto;right:0}
.pg-back .cover-spine::after{right:auto;left:0}
.pg-back .cover-spine span{transform:rotate(90deg)}
.cover-band{position:absolute;left:24px;right:0;top:0;height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 16px;background:var(--dod-navy);z-index:2}
.cover-band::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--dod-rule)}
.cover-logo{height:30px;width:auto}
.cover-plat{font:700 9.5px/1 'Inter',sans-serif;letter-spacing:2px;border:1px solid rgba(148,163,255,.45);padding:5px 8px;border-radius:999px;color:#e8ecff}
.cover-art{position:absolute;left:24px;right:0;top:52px;bottom:37%;overflow:hidden;background:var(--cover-bg)}
.cover-art img{width:100%;height:100%;object-fit:cover}
.cover-art::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.12),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 70%,var(--cover-bg))}
.cover-title{position:absolute;left:24px;right:0;bottom:0;height:37%;padding:26px 28px 44px 26px;display:flex;flex-direction:column;justify-content:flex-end}
.cover-title h1{font:var(--cover-weight,700) var(--cover-size,54px)/.95 var(--cover-font);letter-spacing:var(--cover-track,-1.5px);margin:0 0 10px;color:var(--cover-title);max-width:300px}
.cover-sub{font:700 11.5px/1.2 var(--label-font);letter-spacing:3px;text-transform:uppercase;margin:0;color:var(--cover-sub)}
.cover-foot{position:absolute;left:50px;right:28px;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:3;font:700 8px/1 'Inter',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--cover-ink);opacity:.72}
.age{font:700 9px/1 'Inter',sans-serif;letter-spacing:1px;border:1.5px solid currentColor;border-radius:4px;padding:4px 6px}
.cover-code{margin-left:auto;text-align:right}
/* the Fair Play seal: a foil stamp in DoD navy with an indigo to cyan ring */
.seal{position:absolute;right:20px;top:calc(63% - 46px);width:92px;height:92px;border-radius:50%;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:#e8ecff;transform:rotate(-8deg);
  background:radial-gradient(circle at 35% 28%,#1d2a56,#0b1122 62%,#070b16);
  box-shadow:0 0 0 3px #070b16,0 0 0 5px #6f7cf5,0 0 0 6px #22d3ee,0 6px 14px rgba(0,0,0,.45)}
.seal::before{content:'';position:absolute;inset:6px;border-radius:50%;border:1px dashed rgba(143,216,255,.45)}
.seal img{height:22px;width:auto;margin-bottom:2px}
.seal strong{font:800 11.5px/1 'Sora',sans-serif;letter-spacing:.6px}
.seal-bot{font:700 6.5px/1.2 'Inter',sans-serif;letter-spacing:1.2px;color:#8fd8ff}
.seal::after{content:'';position:absolute;inset:0;border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%);pointer-events:none}

/* ---------- back cover ---------- */
.pg-back{background:var(--cover-bg);color:var(--cover-ink);align-items:center;justify-content:center;text-align:center;padding:40px 48px 40px 40px}
.back-logo{height:64px;width:auto;margin-bottom:16px}
.back-rule{width:64px;height:2px;border-radius:1px;background:var(--dod-rule);margin:0 auto 16px}
.back-tag{font:600 15px/1.35 'Sora',sans-serif;letter-spacing:-.1px;margin:0 0 16px;color:var(--cover-sub)}
.back-blurb{font:13px/1.55 'Inter',sans-serif;max-width:310px;margin:0 0 22px;opacity:.9}
.back-info{display:grid;gap:4px;font:11.5px/1.5 'Inter',sans-serif;opacity:.85}
.back-code{position:absolute;bottom:26px;left:30px;right:50px;display:flex;justify-content:space-between;gap:10px;font:700 8.5px/1.3 'Inter',sans-serif;letter-spacing:1.5px;opacity:.62;border-top:1px solid currentColor;padding-top:8px;text-align:left}
.back-code span:last-child{text-align:right}

/* =========================================================
   THEMES (the game's own paper, type and ink)
   ========================================================= */
/* Retro Casino 5in1: cream handheld plastic, green LCD, red buttons */
.theme-retro{--paper:#f4efdc;--page-ink:#23301f;--page-muted:#5f6b56;--head-ink:#1d3b27;--rule:#d4cdb2;--accent:#2f6b3a;--accent-ink:#f4efdc;--warn:#c8423b;--warn-bg:rgba(200,66,59,.06);--tip-bg:rgba(47,107,58,.06);--key-bg:#2b3530;--key-ink:#d2ef8d;--key-shadow:#141a17;
  --body-font:'DM Sans',sans-serif;--label-font:'Space Grotesk',sans-serif;--head-font:'Pixelify Sans',monospace;--head-weight:700;--head-size:25px;--head-track:.2px;
  --cover-bg:#1f5a33;--cover-ink:#f4efdc;--cover-title:#f4efdc;--cover-sub:#d2ef8d;--cover-font:'Pixelify Sans',monospace;--cover-size:46px;--cover-track:0;--board:#17452a;
  --plate-bg:radial-gradient(circle at 1px 1px,rgba(255,255,255,.07) 1px,transparent 1.5px) 0 0/9px 9px,#1f5a33;--plate-ink:#f4efdc}
.theme-retro .cover-art{display:flex;align-items:center;justify-content:center;padding:34px 70px 30px;background:radial-gradient(circle at 1px 1px,rgba(255,255,255,.08) 1px,transparent 1.5px) 0 0/10px 10px,radial-gradient(ellipse at 50% 40%,#2a7444,#1f5a33 70%)}
.theme-retro .cover-art img{width:auto;height:100%;aspect-ratio:1;object-fit:cover;border-radius:22%;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.theme-retro .cover-art::after{display:none}
.theme-retro .pg-inner .pg-h{border-left:6px solid #c8423b;padding-left:10px}

/* TankForge: an army field manual, olive card and amber stencil */
.theme-tank{--paper:#ece6d2;--page-ink:#1f2a22;--page-muted:#5d6553;--head-ink:#1b2a1f;--rule:#cfc6aa;--accent:#3e5a2c;--accent-ink:#f3eed9;--warn:#b3541e;--warn-bg:rgba(179,84,30,.07);--tip-bg:rgba(62,90,44,.07);--key-bg:#1e2a33;--key-ink:#e2b86f;--key-shadow:#0b1117;
  --body-font:'DM Sans',sans-serif;--label-font:'Saira Condensed',sans-serif;--head-font:'Saira Stencil One',sans-serif;--head-weight:400;--head-size:27px;--head-track:.5px;
  --cover-bg:#162536;--cover-ink:#f0f3ee;--cover-title:#e2b86f;--cover-sub:#f0f3ee;--cover-font:'Saira Stencil One',sans-serif;--cover-weight:400;--cover-size:56px;--cover-track:1px;--board:#0f1a26;
  --plate-bg:linear-gradient(rgba(226,184,111,.07) 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,rgba(226,184,111,.07) 1px,transparent 1px) 0 0/22px 22px,#162536;--plate-ink:#f0f3ee}
.theme-tank .run{font-size:10px;letter-spacing:2.2px}
.theme-tank .front .pg-inner::before{content:'FIELD MANUAL';position:absolute;right:-46px;top:50%;transform:rotate(90deg);font:400 11px 'Saira Stencil One',sans-serif;letter-spacing:6px;color:rgba(62,90,44,.22)}
.theme-tank .plate-no{font-size:10px;background:rgba(226,184,111,.18);color:#e2b86f}

/* Sill One: a gardener's handbook on warm deckle paper */
.theme-sill{--fs:14px;--paper:#f6f1e6;--page-ink:#2a302b;--page-muted:#6b716a;--head-ink:#1f2b23;--rule:#ddd5c3;--accent:#5d8a69;--accent-ink:#fbf8f1;--warn:#b86b2e;--warn-bg:rgba(184,107,46,.06);--tip-bg:rgba(93,138,105,.07);--key-bg:#e5ecdf;--key-ink:#2e5a3f;--key-shadow:#c3cfbb;
  --body-font:'Newsreader',Georgia,serif;--label-font:'DM Sans',sans-serif;--head-font:'Newsreader',Georgia,serif;--head-weight:400;--head-size:30px;--head-track:-.5px;
  --cover-bg:#0a0f0d;--cover-ink:#e9eeea;--cover-title:#f2f5ee;--cover-sub:#c7e2d0;--cover-font:'Newsreader',Georgia,serif;--cover-weight:400;--cover-size:60px;--cover-track:-1.5px;--board:#050807;
  --plate-bg:radial-gradient(ellipse at 50% 35%,#1d2e24,#0e1611 75%);--plate-ink:#e9eeea}
.theme-sill .pg{line-height:1.45}
.theme-sill .pg-h{font-style:italic}
.theme-sill .b-table{font-family:'DM Sans',sans-serif;font-size:.8em}
.theme-sill .cover-art img{object-position:100% 50%}
.theme-sill .plate-no{font-family:'DM Sans',sans-serif}

@media(max-width:760px){
  .wrap{width:calc(100% - 32px)}
  .masthead{min-height:68px;flex-wrap:wrap;gap:8px;padding:12px 0}.masthead .wordmark img{height:38px}.masthead nav{gap:2px;font-size:13px}.masthead nav a{padding:8px 9px}
  .intro{padding-top:22px}.intro p{font-size:15px}
  .controls{gap:8px}
  .controls button{padding:12px 14px}
  .counter{min-width:0;flex-basis:100%;order:-1;background:none;border:0;padding:2px 0}
  #manual-text{columns:1}
  .text-version details{padding:4px 16px}
}
@media(prefers-reduced-motion:reduce){
  .booklet{--turn:.01s}
  .sheet.turning .face::before,.turn-shade{animation:none!important}
  .controls button,.controls .next::after{transition:none}
}