@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@600;700;800&display=swap');
/* DoD Games: the 3D instruction booklet (Contract A in design/DOD_BRIEF.md) and the manual
   feature section on the game pages.

   The book is a real box in CSS 3D: front and back cover images, a coloured spine with the
   title, and page-block edges on the other three sides. Without JS it is a posed 3D link that
   floats gently and lifts on hover. book3d.js adds the idle sway, the 360 degree turn on hover,
   pointer-follow tilt and the cover opening on click/tap/Enter/Space before navigating.

   Sizing: set --book-w on .book3d (or any ancestor) as a LENGTH (px, rem, vw, clamp()...), never
   a percentage: the faces are placed in 3D with it. Height follows 440:620. Thickness: --book-t. */

.book3d{
  --b3-w:var(--book-w,240px);
  --b3-t:var(--book-t,18px);
  --b3-h:calc(var(--b3-w) * 620 / 440);
  --b3-spine-bg:#141d3a;--b3-spine-ink:#c3ecff;--b3-inside:#101830;
  position:relative;isolation:isolate;display:block;
  width:var(--b3-w);height:var(--b3-h);
  perspective:calc(var(--b3-w) * 5.2);perspective-origin:50% 40%;
  color:inherit;text-decoration:none;border-radius:10px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.book3d[data-game="sill-one"]{--b3-spine-bg:#0a0f0d;--b3-spine-ink:#c7e2d0;--b3-inside:#101915;--b3-glow:rgba(143,214,170,.28)}
.book3d[data-game="tankforge"]{--b3-spine-bg:#162536;--b3-spine-ink:#e2b86f;--b3-inside:#111c29;--b3-glow:rgba(226,184,111,.24)}
.book3d[data-game="retro-casino"]{--b3-spine-bg:#1f5a33;--b3-spine-ink:#f3eed9;--b3-inside:#17452a;--b3-glow:rgba(184,214,122,.24)}

/* Dave on Duty glow behind the book: indigo and cyan, with a breath of the game's own colour */
.book3d::before{
  content:"";position:absolute;z-index:-2;left:-45%;right:-45%;top:-18%;bottom:-22%;pointer-events:none;
  background:
    radial-gradient(closest-side at 50% 46%,var(--b3-glow,rgba(34,211,238,.2)),transparent 72%),
    radial-gradient(closest-side at 42% 52%,rgba(99,102,241,.34),rgba(34,211,238,.1) 60%,transparent 100%);
  opacity:.75;transform:scale(.94);
  transition:opacity .5s ease,transform .6s cubic-bezier(.22,.61,.36,1);
}
.book3d:hover::before,.book3d:focus-visible::before,.book3d.is-active::before{opacity:1;transform:scale(1.04)}
.book3d.is-opening::before{opacity:1;transform:scale(1.22)}
.book3d:focus-visible{outline:3px solid #8fd8ff;outline-offset:12px;border-radius:12px}

/* ---------- the object ---------- */
.book3d-obj{
  position:absolute;inset:0;display:block;transform-style:preserve-3d;
  transform:translate3d(0,0,0) scale(1) rotateX(-7deg) rotateY(26deg);
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.book3d.b3-live .book3d-obj{transition:none}
.book3d:not(.b3-live):hover .book3d-obj,
.book3d:not(.b3-live):focus-visible .book3d-obj{transform:translate3d(0,-10px,0) scale(1.03) rotateX(-8deg) rotateY(20deg)}

.b3-face{
  position:absolute;left:50%;top:50%;display:block;box-sizing:border-box;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.b3-front,.b3-back,.b3-page{width:var(--b3-w);height:var(--b3-h);margin:calc(var(--b3-h) / -2) 0 0 calc(var(--b3-w) / -2)}

/* front cover: hinged on the spine; book3d.js turns it with --b3-open */
.b3-front{
  transform:translateZ(calc(var(--b3-t) / 2)) rotateY(var(--b3-open,0deg));
  transform-origin:0 50%;transform-style:preserve-3d;
  border-radius:2px 5px 5px 2px;
}
.b3-back{transform:rotateY(180deg) translateZ(calc(var(--b3-t) / 2));border-radius:5px 2px 2px 5px;background:#0d1320}
.b3-front img,.b3-back img{
  display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  -webkit-user-drag:none;user-select:none;pointer-events:none;
}
/* card-stock gloss: a soft moving sheen (position driven by --b3-gloss), the fold line by the
   spine and a fine light rim */
.b3-front::after,.b3-back::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    linear-gradient(112deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.26) 46%,rgba(255,255,255,.06) 52%,rgba(255,255,255,0) 62%) var(--b3-gloss,62%) 0/260% 100% no-repeat,
    linear-gradient(90deg,rgba(0,0,0,.42),rgba(255,255,255,.16) 2.6%,rgba(0,0,0,.18) 4.4%,rgba(0,0,0,0) 8%),
    linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,0) 30%,rgba(0,0,0,0) 78%,rgba(0,0,0,.18));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.22);
}
.b3-front::after{transform:translateZ(.4px)}
.b3-back::after{
  background:
    linear-gradient(248deg,rgba(255,255,255,0) 34%,rgba(255,255,255,.2) 46%,rgba(255,255,255,0) 60%) var(--b3-gloss,38%) 0/260% 100% no-repeat,
    linear-gradient(270deg,rgba(0,0,0,.4),rgba(255,255,255,.12) 2.6%,rgba(0,0,0,.16) 4.4%,rgba(0,0,0,0) 8%);
}
@media (prefers-reduced-motion:no-preference){
  .book3d:not(.b3-live) .b3-front::after{animation:b3-gloss 7s ease-in-out infinite}
}
@keyframes b3-gloss{0%,100%{background-position:78% 0,0 0,0 0}50%{background-position:30% 0,0 0,0 0}}

/* inside of the front cover (added by book3d.js), seen while the cover swings open */
.b3-inside{
  position:absolute;inset:0;border-radius:5px 2px 2px 5px;
  transform:rotateY(180deg) translateZ(.4px);
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  background:
    linear-gradient(270deg,rgba(0,0,0,.45),rgba(0,0,0,0) 9%),
    radial-gradient(rgba(255,255,255,.05) 1px,transparent 1.4px) 0 0/10px 10px,
    var(--b3-inside);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* spine: the game's colour, title set top to bottom like a book on a shelf */
.b3-spine{
  width:var(--b3-t);height:var(--b3-h);margin:calc(var(--b3-h) / -2) 0 0 calc(var(--b3-t) / -2);
  transform:rotateY(-90deg) translateZ(calc(var(--b3-w) / 2));
  display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:3px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.4),rgba(255,255,255,.14) 38%,rgba(255,255,255,.04) 58%,rgba(0,0,0,.34)),
    var(--b3-spine-bg);
  box-shadow:inset 0 10px 0 -8px rgba(255,255,255,.18),inset 0 -10px 0 -8px rgba(255,255,255,.18);
}
.b3-spine>span{
  writing-mode:vertical-rl;white-space:nowrap;max-height:88%;overflow:hidden;text-overflow:ellipsis;
  font:700 min(calc(var(--b3-t) * .5),calc(var(--b3-w) * .037))/1 'Sora','Inter',system-ui,sans-serif;
  letter-spacing:.16em;text-transform:uppercase;color:var(--b3-spine-ink);
  text-shadow:0 0 6px rgba(0,0,0,.4);
}

/* page block: cream paper with fine page lines, set a hair inside the covers */
.b3-edge-r{
  width:var(--b3-t);height:calc(var(--b3-h) - 4px);margin:calc(var(--b3-h) / -2 + 2px) 0 0 calc(var(--b3-t) / -2);
  transform:rotateY(90deg) translateZ(calc(var(--b3-w) / 2 - 1.5px));
  background:
    linear-gradient(90deg,rgba(40,30,10,.34),rgba(40,30,10,0) 18%,rgba(40,30,10,0) 82%,rgba(40,30,10,.34)),
    linear-gradient(180deg,rgba(255,255,255,.28),rgba(0,0,0,0) 40%,rgba(40,30,10,.14)),
    repeating-linear-gradient(90deg,#f6f0de 0 1px,#d8ceb2 1px 1.6px,#ece4cc 1.6px 2px);
}
.b3-edge-t,.b3-edge-b{
  width:calc(var(--b3-w) - 2px);height:var(--b3-t);margin:calc(var(--b3-t) / -2) 0 0 calc(var(--b3-w) / -2);
  background:
    linear-gradient(90deg,rgba(40,30,10,.3),rgba(40,30,10,0) 6%),
    linear-gradient(180deg,rgba(40,30,10,.3),rgba(40,30,10,0) 18%,rgba(40,30,10,0) 82%,rgba(40,30,10,.3)),
    repeating-linear-gradient(180deg,#f6f0de 0 1px,#d8ceb2 1px 1.6px,#ece4cc 1.6px 2px);
}
.b3-edge-t{transform:rotateX(90deg) translateZ(calc(var(--b3-h) / 2 - 2px))}
.b3-edge-b{transform:rotateX(-90deg) translateZ(calc(var(--b3-h) / 2 - 2px));filter:brightness(.72)}

/* first page, under the cover (added by book3d.js) */
.b3-page{
  width:calc(var(--b3-w) - 3px);height:calc(var(--b3-h) - 5px);margin:calc(var(--b3-h) / -2 + 2.5px) 0 0 calc(var(--b3-w) / -2);
  transform:translateZ(calc(var(--b3-t) / 2 - 1.2px));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--b3-w) * .045);
  border-radius:1px 4px 4px 1px;text-align:center;color:#26304a;
  background:
    linear-gradient(90deg,rgba(60,45,15,.26),rgba(60,45,15,0) 10%),
    radial-gradient(120% 90% at 60% 40%,#fbf6e6,#efe6cc);
}
.b3-page img{width:34%;height:auto;display:block;filter:drop-shadow(0 4px 8px rgba(40,30,10,.25))}
.b3-page-label{font:700 calc(var(--b3-w) * .052)/1.2 'Sora','Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.b3-page-game{font:500 calc(var(--b3-w) * .048)/1.3 'Inter',system-ui,sans-serif;color:#5a6178;padding-top:calc(var(--b3-w) * .03);border-top:1px solid rgba(38,48,74,.22);min-width:44%}

/* soft desk shadow */
.book3d-shadow{
  position:absolute;z-index:-1;left:4%;right:4%;bottom:-11%;height:15%;pointer-events:none;display:block;
  background:radial-gradient(closest-side,rgba(1,3,12,.72),rgba(1,3,12,.3) 55%,rgba(1,3,12,0));
  filter:blur(3px);transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s;
}
.book3d:not(.b3-live):hover .book3d-shadow{transform:scale(.9);opacity:.8}
.book3d.b3-live .book3d-shadow{transition:none}

/* without JS (or before it runs): a slow float, CSS only */
@media (prefers-reduced-motion:no-preference){
  .book3d:not(.b3-live) .book3d-obj{animation:b3-float 6s ease-in-out infinite}
  .book3d:not(.b3-live) .book3d-shadow{animation:b3-shadow 6s ease-in-out infinite}
}
@keyframes b3-float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes b3-shadow{0%,100%{scale:1}50%{scale:.92}}

@media (prefers-reduced-motion:reduce){
  .book3d-obj,.book3d-shadow,.book3d::before{transition:none!important;animation:none!important}
  .b3-front::after{animation:none!important}
}

/* ================= the manual feature section on the game pages ================= */
.b3-feature{--b3-accent:#8fd8ff}
.b3-panel{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:clamp(28px,5vw,76px);align-items:center;
  padding:clamp(34px,5vw,64px) clamp(28px,5vw,68px);border-radius:28px;border:1px solid transparent;
  background:
    radial-gradient(640px 420px at 24% 50%,rgba(99,102,241,.18),transparent 70%) padding-box,
    radial-gradient(520px 360px at 100% 0%,rgba(34,211,238,.09),transparent 70%) padding-box,
    linear-gradient(160deg,#111a36,#0a1024 70%) padding-box,
    linear-gradient(140deg,rgba(129,140,248,.6),rgba(34,211,238,.28) 38%,rgba(148,163,255,.06) 70%,rgba(34,211,238,.24)) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 30px 80px -30px rgba(3,6,20,.9),0 0 90px -40px rgba(99,102,241,.55);
}
/* Dave's dot grid, faded out towards the copy */
.b3-panel::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(rgba(148,163,255,.11) 1px,transparent 1.4px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 40%,transparent 70%);
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.6) 40%,transparent 70%);
}
/* a thin light sweep along the top edge of the panel */
.b3-panel::after{
  content:"";position:absolute;top:0;left:8%;right:40%;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(143,216,255,.9),transparent);
}

.b3-stage{
  --book-w:clamp(200px,21vw,272px);
  position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--book-w) * .26);
  padding:18px 0 4px;min-width:0;
}
/* the lit pedestal the book floats over */
.b3-stage::before{
  content:"";position:absolute;z-index:-1;left:50%;width:calc(var(--book-w) * 1.7);height:calc(var(--book-w) * .34);
  top:calc(18px + var(--book-w) * 620 / 440 - var(--book-w) * .02);transform:translateX(-50%);pointer-events:none;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(34,211,238,.16),rgba(99,102,241,.1) 60%,transparent);
  box-shadow:0 0 0 1px rgba(143,216,255,.14),0 0 40px -6px rgba(34,211,238,.35);
}
.b3-hint{
  margin:0;display:inline-flex;align-items:center;gap:.5rem;
  font:600 11px/1.3 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8a95bb;
}
.b3-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:linear-gradient(92deg,#818cf8,#22d3ee);box-shadow:0 0 8px rgba(34,211,238,.9)}
.b3-hint .b3-touch{display:none}
@media (hover:none){.b3-hint .b3-mouse{display:none}.b3-hint .b3-touch{display:inline}}

.b3-copy{min-width:0}
.b3-copy .eyebrow{margin:0 0 18px}
.b3-feature .b3-title{
  margin:0 0 16px;font-family:'Sora','Inter',system-ui,sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1.1;letter-spacing:-.02em;text-transform:none;color:#e8ecff;
  text-wrap:balance;
}
.b3-grad{background:linear-gradient(92deg,#818cf8 0%,#22d3ee 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.b3-feature .b3-lede{margin:0 0 22px;max-width:38em;color:#9aa5c9;font:400 16px/1.65 'Inter',system-ui,sans-serif}
.b3-points{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:12px}
.b3-points li{
  position:relative;padding-left:34px;color:#e8ecff;font:500 15px/1.5 'Inter',system-ui,sans-serif;
}
.b3-points li::before{
  content:"";position:absolute;left:0;top:.05em;width:20px;height:20px;border-radius:7px;
  background:linear-gradient(#0f1733,#0f1733) padding-box,linear-gradient(135deg,#818cf8,#22d3ee) border-box;
  border:1px solid transparent;box-shadow:0 0 12px -2px rgba(34,211,238,.5);
}
.b3-points li::after{
  content:"";position:absolute;left:7px;top:calc(.05em + 5px);width:5px;height:8px;
  border:solid var(--b3-accent);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.b3-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.b3-btn{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.6rem;
  padding:.95rem 1.7rem;border-radius:999px;border:0;white-space:nowrap;
  background:linear-gradient(92deg,#818cf8 0%,#22d3ee 100%);color:#04101f;
  font:700 16px/1.2 'Inter',system-ui,sans-serif;text-decoration:none;
  box-shadow:0 8px 30px rgba(99,102,241,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
.b3-btn:hover{color:#04101f;transform:translateY(-2px);box-shadow:0 12px 38px rgba(34,211,238,.4)}
.b3-btn::after{
  content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);transition:left .65s cubic-bezier(.22,.61,.36,1);
}
.b3-btn:hover::after{left:150%}
.b3-btn:focus-visible{outline:3px solid #8fd8ff;outline-offset:4px}
.b3-arrow{display:inline-block;transition:transform .18s}
.b3-btn:hover .b3-arrow{transform:translateX(4px)}
.b3-note{margin:0;color:#8a95bb;font:500 13px/1.4 'Inter',system-ui,sans-serif}

@media (max-width:860px){
  .b3-panel{grid-template-columns:1fr;gap:26px;padding:34px 22px 30px;text-align:left}
  .b3-panel::before{-webkit-mask-image:linear-gradient(180deg,#000,transparent 55%);mask-image:linear-gradient(180deg,#000,transparent 55%)}
  .b3-stage{--book-w:clamp(170px,48vw,220px)}
}
@media (max-width:420px){
  .b3-panel{padding:30px 18px 26px;border-radius:22px}
  .b3-btn{padding:.9rem 1.4rem;font-size:15px}
}
@media (prefers-reduced-motion:reduce){
  .b3-btn,.b3-arrow{transition:none}
  .b3-btn::after{display:none}
}

/* ============ the handbook as the showpiece, straight under the game's hero ============ */
.b3-feature--top{padding-top:clamp(8px,2vw,24px)}
.b3-feature--top .b3-panel{
  grid-template-columns:minmax(340px,6fr) 6fr;min-height:clamp(560px,52vw,680px);
  padding:clamp(44px,6vw,84px) clamp(28px,5.5vw,84px);border-radius:32px;
  background:
    radial-gradient(420px 520px at 26% 40%,rgba(143,216,255,.16),transparent 70%) padding-box,
    radial-gradient(700px 480px at 24% 60%,rgba(99,102,241,.22),transparent 72%) padding-box,
    radial-gradient(520px 360px at 100% 0%,rgba(34,211,238,.1),transparent 70%) padding-box,
    linear-gradient(160deg,#121c3b,#0a1024 70%) padding-box,
    linear-gradient(140deg,#818cf8,rgba(34,211,238,.55) 34%,rgba(148,163,255,.1) 68%,#22d3ee) border-box;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 40px 100px -34px rgba(3,6,20,.95),
    0 0 0 1px rgba(143,216,255,.05),0 0 140px -40px rgba(99,102,241,.7);
}
/* a soft spotlight falling on the book from above */
.b3-feature--top .b3-stage::after{
  content:"";position:absolute;z-index:-2;left:50%;top:-18%;width:calc(var(--book-w) * 2.1);height:120%;
  transform:translateX(-50%);pointer-events:none;
  background:conic-gradient(from 180deg at 50% 0%,transparent 158deg,rgba(143,216,255,.13) 180deg,transparent 202deg);
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 95%);mask-image:linear-gradient(180deg,#000 30%,transparent 95%);
}
.b3-feature--top .b3-stage{--book-w:clamp(250px,25vw,340px);gap:calc(var(--book-w) * .36)}
.b3-feature--top .b3-stage::before{
  background:radial-gradient(closest-side,rgba(34,211,238,.22),rgba(99,102,241,.14) 60%,transparent);
  box-shadow:0 0 0 1px rgba(143,216,255,.2),0 0 60px -6px rgba(34,211,238,.45);
}
.b3-feature--top .b3-title{font-size:clamp(32px,4.2vw,56px)}
.b3-feature--top .b3-lede{font-size:17px}
@media (max-width:860px){
  .b3-feature--top .b3-panel{grid-template-columns:1fr;min-height:0;padding:40px 22px 34px;text-align:left}
  .b3-feature--top .b3-stage{--book-w:clamp(210px,60vw,280px)}
}
@media (max-width:420px){.b3-feature--top .b3-panel{padding:34px 18px 28px;border-radius:24px}}

/* grab and turn: sideways finger drags turn the book, up and down still scroll the page */
.book3d.b3-live{cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.book3d.b3-live img{-webkit-user-drag:none}
.book3d.is-dragging{cursor:grabbing}