/* The Captain's Treasury board.
   Wood, brass recess and rope are all lifted from John's cabin painting, so
   the board is his artwork even though it is assembled in CSS — which is what
   lets it reflow, hold any number of coins, and stay tappable on a phone. */

.tb-page{max-width:1280px;margin:0 auto;padding:0 0 72px}

/* The cabin, behind everything, dimmed until it is atmosphere rather than a
   picture competing with the board. */
.trs-body:has(.tb-page)::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:#050709 url("/images/board/cabin-1600.webp") center/cover no-repeat;
  /* Blurred hard on purpose. Unblurred, John's painted board sits visibly
     behind the real one and you see the same board twice. At this radius it
     is lantern light and depth, which is all it was ever for. */
  filter:blur(14px) saturate(.85);transform:scale(1.08);opacity:.42}
.trs-body:has(.tb-page)::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,transparent 8%,rgba(5,7,9,.72) 62%,rgba(5,7,9,.94) 100%)}

.tb-head{text-align:center;padding:clamp(26px,5vw,54px) var(--pad) clamp(20px,3vw,32px)}
.tb-head__title{font-size:clamp(30px,7vw,54px);text-transform:uppercase;letter-spacing:.02em}
.tb-head__lead{margin:14px auto 0;max-width:54ch;font-size:clamp(14px,2vw,16px);color:#CFC7B6}

/* ── the case ────────────────────────────────────────────────────────
   The first pass was a rectangle of loud tiled planks with a hairline border,
   and it read as cheap for a reason: in John's painting the *surface* is quiet
   and dark, and all the richness lives in the carved frame, the brass corner
   wheels and the crest. So the wood was toned right down and the money was
   spent here instead — a mitred moulding built from layered gradients, lit
   from the upper left the way the cabin lanterns light it. */
.tb-case{
  position:relative;margin:clamp(54px,8vw,104px) clamp(8px,3vw,30px) 0;
  /* extra headroom at the top: the crest straddles the rail and the plate
     must clear it, or the skull sits on the lettering. */
  padding:clamp(52px,7.5vw,98px) clamp(16px,2.4vw,30px) clamp(16px,2.4vw,30px);
  border-radius:6px;
  background:
    /* inner bevel: light catches the top rail, the bottom falls away */
    linear-gradient(178deg,rgba(227,190,114,.20),rgba(0,0,0,0) 14%),
    linear-gradient(2deg,rgba(0,0,0,.60),rgba(0,0,0,0) 16%),
    /* the moulding itself */
    linear-gradient(148deg,#3A2C1B 0%,#241A0F 26%,#16100A 58%,#0D0907 100%);
  box-shadow:
    inset 0 0 0 1px rgba(227,190,114,.26),
    inset 0 1px 0 rgba(255,228,168,.16),
    inset 0 -2px 6px rgba(0,0,0,.75),
    0 2px 0 rgba(255,228,168,.05),
    0 26px 70px rgba(0,0,0,.75),
    0 60px 140px rgba(0,0,0,.55);
}
/* rope posts run down the inside of the frame, as they do in the painting */
.tb-case::before,.tb-case::after{
  content:"";position:absolute;top:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
  width:clamp(13px,1.5vw,20px);pointer-events:none;z-index:2;
  background:url("/images/board/orn-post.webp") center/100% auto repeat-y;
  opacity:.95;filter:brightness(.94) drop-shadow(0 0 6px rgba(0,0,0,.7))}
.tb-case::before{left:clamp(3px,.5vw,7px)}
.tb-case::after{right:clamp(3px,.5vw,7px)}

/* the crest sits astride the top rail */
.tb-crest{
  position:absolute;z-index:4;left:50%;top:0;transform:translate(-50%,-58%);
  width:clamp(210px,32vw,430px);height:auto;pointer-events:none;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.8))}

/* brass wheels pinned at the four corners */
.tb-corner{
  position:absolute;z-index:3;width:clamp(38px,5vw,74px);aspect-ratio:1;
  background:url("/images/board/orn-wheel.webp") center/contain no-repeat;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.85));pointer-events:none}
.tb-corner--tl{left:clamp(-6px,-.4vw,0px);top:clamp(-6px,-.4vw,0px)}
.tb-corner--tr{right:clamp(-6px,-.4vw,0px);top:clamp(-6px,-.4vw,0px);transform:scaleX(-1)}
.tb-corner--bl{left:clamp(-6px,-.4vw,0px);bottom:clamp(-6px,-.4vw,0px);transform:scaleY(-1)}
.tb-corner--br{right:clamp(-6px,-.4vw,0px);bottom:clamp(-6px,-.4vw,0px);transform:scale(-1,-1)}

/* ── the board surface ──────────────────────────────────────────────── */
.tb-board{
  position:relative;padding:clamp(12px,1.8vw,20px) clamp(14px,2vw,24px);
  border-radius:3px;
  background:#080605 url("/images/board/board-surface-1400.webp") center/cover;
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.9),
    inset 0 0 0 2px rgba(227,190,114,.10),
    inset 0 6px 20px rgba(0,0,0,.85),
    inset 0 -10px 40px rgba(0,0,0,.7)}
/* a breath of lantern light across the top left of the panel */
.tb-board::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:3px;
  background:radial-gradient(120% 90% at 22% 6%,rgba(255,214,150,.10),transparent 55%)}

/* ── engraved plates ────────────────────────────────────────────────── */
.tb-plate{
  position:relative;margin:0 auto;padding:clamp(10px,1.4vw,15px) clamp(22px,4vw,46px);
  max-width:min(760px,92%);text-align:center;border-radius:2px;
  background:linear-gradient(180deg,#100B07,#1B1309 42%,#0C0806);
  box-shadow:
    inset 0 0 0 1px rgba(227,190,114,.28),
    inset 0 2px 5px rgba(0,0,0,.9),
    inset 0 -1px 0 rgba(255,228,168,.10),
    0 3px 10px rgba(0,0,0,.6)}
.tb-plate--top{margin-bottom:clamp(12px,2vw,20px)}
.tb-plate--bottom{margin-top:clamp(12px,2vw,20px)}
/* scroll ends, so the plate reads as a cartouche rather than a box */
.tb-plate::before,.tb-plate::after{
  content:"";position:absolute;top:50%;width:clamp(10px,1.4vw,18px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(227,190,114,.55));}
.tb-plate::before{left:clamp(7px,1vw,14px)}
.tb-plate::after{right:clamp(7px,1vw,14px);transform:scaleX(-1)}

/* Engraved, not printed: dark below the stroke, a thread of light above. */
.tb-plate h2{
  font-size:clamp(15px,2.9vw,27px);letter-spacing:.17em;text-transform:uppercase;
  color:#D9BB7C;
  text-shadow:0 2px 1px rgba(0,0,0,.95),0 -1px 0 rgba(255,232,180,.22)}
.tb-plate p{
  margin:5px 0 0;font-family:var(--display);font-size:clamp(9px,1.5vw,12.5px);
  letter-spacing:.26em;text-transform:uppercase;color:#9C8455;
  text-shadow:0 1px 1px rgba(0,0,0,.9)}
.tb-plate--bottom b{
  display:block;margin-top:4px;font-family:var(--display);
  font-size:clamp(10px,1.7vw,14px);letter-spacing:.3em;text-transform:uppercase;
  color:#C6A76B;text-shadow:0 2px 1px rgba(0,0,0,.95),0 -1px 0 rgba(255,232,180,.18)}

.tb-board__body{display:grid;grid-template-columns:auto 1fr auto;
  gap:clamp(6px,1.4vw,18px);align-items:center;
  padding:clamp(10px,1.8vw,18px) clamp(2px,.8vw,10px)}

.tb-rail{display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:0 clamp(2px,.7vw,9px);
  font-family:var(--display);font-size:clamp(8px,1.05vw,11px);
  letter-spacing:.2em;text-transform:uppercase;color:#8A7549;text-align:center;
  text-shadow:0 1px 1px rgba(0,0,0,.9)}
.tb-rail__rule{width:16px;height:1px;margin:6px 0;
  background:linear-gradient(90deg,transparent,rgba(227,190,114,.5),transparent)}

/* ── slots ──────────────────────────────────────────────────────────── */
.tb-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(7px,1.1vw,13px);
  grid-template-columns:repeat(8,1fr)}
.tb-slot{position:relative;aspect-ratio:1}
.tb-slot__recess{
  position:absolute;inset:0;border-radius:50%;
  background:url("/images/board/slot-220.webp") center/100% 100% no-repeat;
  box-shadow:inset 0 3px 7px rgba(0,0,0,.75),
             0 1px 0 rgba(255,228,168,.07),      /* the lip catching light */
             0 3px 8px rgba(0,0,0,.55)}          /* the recess seated in wood */
.tb-slot__btn{
  position:absolute;inset:0;display:grid;place-items:center;
  padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  transition:transform .22s var(--ease,ease)}
.tb-slot__btn:focus-visible{outline:2px solid var(--gold-lt);outline-offset:4px}

.tb-slot__coin{position:relative;width:92%;height:92%;object-fit:contain;
  /* two shadows: a tight contact shadow where the coin meets the recess, and
     a soft one for the body. One shadow alone makes it look pasted on. */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.95)) drop-shadow(0 5px 11px rgba(0,0,0,.8));
  transition:filter .22s,transform .22s}
.tb-slot--filled .tb-slot__btn:hover{transform:translateY(-4px) scale(1.05)}
.tb-slot--filled .tb-slot__btn:hover .tb-slot__coin{
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.8))
         drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 55%,transparent))}
.tb-slot__coin--blank{width:78%;height:78%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#F0DFB4,var(--accent,#C89B3C) 55%,#6E5320)}

/* A coin you have not earned shows as a shadow of itself in the recess —
   enough to want it, not enough to feel owned. */
.tb-slot--locked .tb-slot__ghost{
  position:relative;width:80%;height:80%;object-fit:contain;
  filter:grayscale(1) brightness(.55) contrast(.9);opacity:.62;transition:opacity .22s,filter .22s}
.tb-slot--locked .tb-slot__btn:hover .tb-slot__ghost{opacity:.9;filter:grayscale(.55) brightness(.8)}

/* A token that exists but has no artwork yet must still tease — otherwise it
   is pixel-identical to an empty slot and the board looks like it has nothing
   coming. A dim blank disc reads as "reserved", which is the truth. */
.tb-slot--locked .tb-slot__ghost--none{
  position:relative;width:76%;height:76%;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,
    color-mix(in srgb,var(--accent,#C89B3C) 22%,transparent),
    rgba(255,255,255,.04) 58%,transparent 74%);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent,#C89B3C) 55%,transparent),
             inset 0 3px 10px rgba(0,0,0,.6);
  transition:box-shadow .22s,background .22s}
.tb-slot--locked .tb-slot__btn:hover .tb-slot__ghost--none{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent,#C89B3C) 70%,transparent),
             0 0 14px color-mix(in srgb,var(--accent,#C89B3C) 30%,transparent)}
.tb-slot--blank{opacity:.72}

.tb-tally{margin:clamp(16px,3vw,26px) auto 0;text-align:center;
  font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.tb-tally b{color:var(--parch)}
.tb-tally span{margin-left:12px;white-space:nowrap}

/* ── detail ─────────────────────────────────────────────────────────── */
.tb-locked{overflow:hidden}
.tb-detail{position:fixed;inset:0;z-index:90;display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);overflow-y:auto;
  background:rgba(3,5,7,.86);backdrop-filter:blur(6px)}
.tb-detail[hidden]{display:none}
.tb-detail__in{position:relative;display:grid;gap:clamp(18px,3vw,34px);
  grid-template-columns:minmax(200px,320px) minmax(0,1fr);align-items:start;
  width:min(920px,100%);padding:clamp(22px,3.4vw,38px);
  background:#080605 url("/images/board/board-surface-1400.webp") center/cover;
  border:1px solid rgba(200,155,60,.3);border-radius:4px;
  box-shadow:0 40px 120px rgba(0,0,0,.85),inset 0 0 80px rgba(0,0,0,.7)}
.tb-detail__in:focus{outline:none}
.tb-detail__close{position:absolute;top:8px;right:12px;z-index:2;
  width:44px;height:44px;border:0;background:none;color:var(--parch);
  font-size:28px;line-height:1;cursor:pointer}
.tb-detail__close:hover{color:#fff}

.tb-detail__coin{display:grid;place-items:center}
.tb-detail__coin img{width:100%;height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.8))
         drop-shadow(0 0 30px color-mix(in srgb,var(--accent) 28%,transparent))}
.tb-detail__coin--2up{perspective:1100px}
.tb-detail__coin--2up .trs-coin{width:100%;max-width:320px}
.tb-detail__hint{margin:10px 0 0;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-align:center}

.tb-detail__kicker{margin:0;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold)}
.tb-detail__body h2{margin:8px 0 0;font-size:clamp(22px,3.6vw,34px);text-transform:uppercase}
.tb-detail__series{margin:6px 0 12px;font-family:var(--display);font-size:13px;
  letter-spacing:.08em;color:var(--parch)}
.tb-chip{display:inline-flex;padding:4px 11px;border-radius:2px;font-size:9px;
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:color-mix(in srgb,var(--accent) 84%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}

.tb-story{margin:20px 0 0;padding:16px 18px;border-left:2px solid var(--accent);
  background:rgba(6,10,14,.55)}
.tb-story h3{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.tb-story p{margin:8px 0 0;font-size:14.5px;color:var(--cream)}
.tb-story__note{color:var(--dim)!important;font-style:italic}
.tb-story--locked{border-left-color:rgba(255,255,255,.18)}
.tb-detail__lore{margin:16px 0 0;font-size:13.5px;line-height:1.75;color:#BDB4A3}

.tb-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:12px;margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.tb-facts dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.tb-facts dd{margin:4px 0 0;font-family:var(--display);font-size:14px;color:var(--cream)}

/* ── reflow: fewer columns, bigger slots, never a 40px tap target ────── */
@media(max-width:1100px){ .tb-grid{grid-template-columns:repeat(6,1fr)} }
@media(max-width:820px){
  .tb-grid{grid-template-columns:repeat(5,1fr)}
  .tb-detail__in{grid-template-columns:1fr;justify-items:center;text-align:center}
  .tb-detail__coin{max-width:260px}
  .tb-story{text-align:left}
  .tb-facts{text-align:left}
}
@media(max-width:640px){
  .tb-grid{grid-template-columns:repeat(4,1fr)}
  .tb-board__body{grid-template-columns:1fr}
  .tb-rail{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:10px}
  .tb-rail__rule{display:none}
  .tb-board::before,.tb-board::after{width:9px;background-size:9px auto}
}
@media(max-width:420px){ .tb-grid{grid-template-columns:repeat(3,1fr)} }

@media(prefers-reduced-motion:reduce){
  .tb-slot__btn,.tb-slot__coin,.tb-slot__ghost{transition:none!important}
  .tb-slot--filled .tb-slot__btn:hover{transform:none}
}