*{box-sizing:border-box;margin:0;padding:0}
body{

  background-color: #07080A;
  color:var(--bone);
  font-family:var(--font-body);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  padding:16px 16px 40px;
  min-height:100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(15, 23, 42, 0.55) 0%, transparent 80%);
  pointer-events: none;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: var(--bg-image);
  background-size: cover;
  background-position: center;
  opacity: var(--bg-fade);
  pointer-events: none;
}

/* Layout */
.wrap{max-width:1180px;margin:0 auto; padding:0 16px;}
@media(min-width:1400px){.wrap{max-width:1380px}}
@media(min-width:1600px){.wrap{max-width:1560px}}

h1{
  font-family:var(--font-display);
  font-size:clamp(32px, 5vw, 48px);
  letter-spacing:.04em;
  line-height:0.9;
  text-transform:uppercase;
  font-weight:400;
  background: var(--metal-gold);
  background-size: 100% 1em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
}
h1 span{
  background: var(--metal-red);
  background-size: 100% 1em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sub{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--dim);
  margin-top:6px;
}
/* The button shares a grid ROW with the wordmark alone, so it centres on
   the logo instead of on the logo plus the line underneath it.
   display:contents lets the h1 and the subtitle act as grid items in their
   own right without touching the markup. */
header{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  align-items:center;
  justify-content:start;
  padding-bottom:16px;
}
.titles{ display:contents; }
header > .menuwrap{ grid-column:1; grid-row:1; }
header h1{ grid-column:2; grid-row:1; }
header .sub{ grid-column:2; grid-row:2; }

/* menu button and the page list it opens. built on details/summary so the
   toggle works without javascript */
.menuwrap{ position:relative; flex:0 0 auto; pointer-events:auto; }

#menubtn{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px;
  width:42px; height:42px;
  border-radius:11px;
  background:var(--slot);
  border:1px solid var(--line);
  box-shadow:0 3px 0 #000;
  cursor:pointer;
  list-style:none;
  transition:filter .2s, box-shadow .1s, transform .1s;
}
#menubtn::-webkit-details-marker{ display:none; }
#menubtn::marker{ content:''; }
/* ---- MENU ICON ----
   Every bar is absolutely centred on the button, so the three of them are
   positioned by their own offsets rather than by flex gaps. When the menu
   opens, bars 1 and 3 both sit at dead centre and rotate, so they cross at
   exactly one point and the X is symmetric by construction.
   scaleX is root 2 because rotating 45deg costs a bar exactly that much of
   its sideways reach. Stretching by root 2 gives it back, so the X is the
   same width as the hamburger it replaced, to the pixel. */
#menubtn i{
  position:absolute; left:50%; top:50%;
  width:18px; height:2px;
  border-radius:2px;
  background:var(--gold);
  transition:transform .2s, opacity .2s;
}
#menubtn i:nth-child(1){ transform:translate(-50%,-50%) translateY(-6px); }
#menubtn i:nth-child(2){ transform:translate(-50%,-50%); }
#menubtn i:nth-child(3){ transform:translate(-50%,-50%) translateY(6px); }
#menubtn:hover{ filter:brightness(1.5); }
#menubtn:active{ transform:translateY(3px); box-shadow:0 0 0 #000; }
#menuwrap[open] #menubtn i:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg) scaleX(1.55); }
#menuwrap[open] #menubtn i:nth-child(2){ opacity:0; }
#menuwrap[open] #menubtn i:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg) scaleX(1.55); }

.menu{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  z-index:60;
  text-align:left;   /* the mobile header centres its text, this must not follow */
  display:flex;
  flex-direction:column;
  min-width:172px;
  padding:6px;
  border-radius:12px;
  background:#141418;
  border:1px solid var(--line);
  box-shadow:0 14px 30px rgba(0,0,0,0.75);
}
.menu a{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--dim);
  text-decoration:none;
  padding:11px 14px;
  border-radius:8px;
  transition:color .2s, background .2s;
}
.menu a:hover{ color:var(--bone); background:rgba(255,255,255,0.05); }




.scorebox{
  text-align:right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}
.scorebox .num{
  font-family:var(--font-display);
  font-size:clamp(42px, 7vw, 64px);
  line-height:1;
  padding-top: 4px;
  background: var(--metal-gold);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8));
}
.scorebox .tier{
  font-family:var(--font-mono);
  font-size:14px;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:4px;
}

.deck{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px}
.spinbar{width:100%;max-width:440px;margin:0 auto}

@media(min-width:1040px){
  body{padding:24px 32px 40px}
  .deck{grid-template-columns:minmax(0,1fr);gap:24px}
  .slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  .right2{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;align-items:start}
  .right2 .full{grid-column:1/-1}
}

/* Desktop: title beside the game, score pinned top right */
@media(min-width:1340px){

  /* header is above the deck in the markup for phones. on desktop pull it
     out of flow and park it over the left column so the deck starts at top */
  .wrap{ position:relative; }
  .wrap > header{
    position:absolute; top:0; left:16px;
    width:max-content;
    pointer-events:none;
    padding:0; margin:0;
    align-items:center;
    /* the button is pinned to the window at this width, so it is out of the
       grid and its column is empty. no gap, or the title sits indented from
       the progress bar and the headings underneath it. */
    column-gap:0;
  }
  /* out of the header flow entirely, parked in the empty top left corner,
     and lifted above the deck which otherwise paints over it */
  .wrap > header .menuwrap{
    position:fixed;
    left:16px; top:16px;
    z-index:70;
  }
  .wrap > header h1{ white-space:nowrap; }
  .wrap > header .sub{ white-space:nowrap; }
  .wrap > .bar{ position:absolute; top:82px; left:16px; width:320px; }
  .deck>.side{ padding-top:96px; }   /* clears the title above it */
  .side h2:first-of-type{ margin-top:0; }
  .scorebox{
    position:absolute; top:0; right:16px;
    text-align:right; align-items:flex-end;
    z-index:5;
  }

  .deck{
    display:grid;
    grid-template-columns:320px minmax(0,1fr);
    grid-template-rows: auto auto 1fr;
    row-gap: 20px;
    column-gap: 40px;
    align-items:start;
  }
  .deck>.spinbar{
    grid-column:2;
    grid-row:1;
    max-width:440px;
    margin:0 auto;
    justify-self:center;
  }
  .deck>.main{ grid-column:2; grid-row:2; min-width: 0; }
  .deck>.side{
    grid-column:1; grid-row:1/4;
    position:sticky; top:24px;
  }
  .deck>.side .right2{display:block}
  .deck>.side .right2 > div { min-width: 0; }
  .deck>.side .right2 .full{margin-top:12px}
}

@media(min-width:1600px){
  .deck{
    grid-template-columns:360px minmax(0,1fr);
    column-gap: 60px;
  }
}

.panel{
  border-radius:var(--radius);
  background: var(--panel);
  border: 1px solid var(--line);
  padding:0;
  overflow:hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,0.9);
}
.panel.sealed{
  border:3px solid color-mix(in srgb, var(--tier, var(--gold)) 80%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,0.9),
              0 0 26px color-mix(in srgb, var(--tier, var(--gold)) 28%, transparent);
}
.panel.sealed.t-king  { --tier: var(--gold); }
.panel.sealed.t-throne{ --tier: var(--throne); }
.panel.sealed.t-emp   { --tier: var(--red-hi); }
.panel.sealed.t-war   { --tier: var(--steel); }
.panel.sealed.t-nova  { --tier: var(--tier-nova); }
.panel.sealed.t-rook  { --tier: var(--tier-rook); }
.panel.sealed.t-bilge { --tier: var(--tier-bilge); }
.reel{
  height: 280px;
  position:relative;
  overflow:hidden;
}
.strip{position:absolute;left:0;right:0;top:0}
.strip.blur{filter:blur(2px)}

.cell{
  height: 280px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px 20px;
  text-align:center;
  width:100%;
}
.done { display:block; text-align:center; margin:0 auto; }

.done .flav, .flav {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500;
  line-height: 1.5;
  color: var(--dim);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 8px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.done .meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--dim-lo);
}

.por{
  width:120px; height:120px;
  border-radius:50%;
  background:var(--bg);
  border:2px solid var(--c-brass);
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 0 0 1px #000, 0 8px 24px color-mix(in srgb, var(--c-brass) 25%, transparent);
  flex: 0 0 auto;
}
.por img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.por.g-conq{border-color:var(--c-conq); box-shadow:0 0 0 1px #000, 0 8px 28px color-mix(in srgb, var(--c-conq) 35%, transparent)}
.por.g-blood{border-color:var(--c-blood); box-shadow:0 0 0 1px #000, 0 8px 28px color-mix(in srgb, var(--c-blood) 35%, transparent)}
.por.g-trade{border-color:var(--c-trade); box-shadow:0 0 0 1px #000, 0 8px 28px color-mix(in srgb, var(--c-trade) 35%, transparent)}

.nm{
  font-family: var(--font-display) !important;
  font-size: 26px;
  color: var(--bone);
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.bty{font-family:var(--font-mono);font-size:14px;font-weight:700;color:var(--red-hi)}
.meta{font-family:var(--font-mono);font-size:12px;color:var(--dim);}

.tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:4px; max-width:100%;}
.tag{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:99px;
  white-space:nowrap;
  color: var(--c-fruit);
  background: color-mix(in srgb, var(--c-fruit) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-fruit) 40%, transparent);
}

.tag.hk { color: var(--tag-hk); background: color-mix(in srgb, var(--tag-hk) 15%, transparent); border-color: color-mix(in srgb, var(--tag-hk) 40%, transparent); }
.tag.sp { color: var(--tag-sp); background: color-mix(in srgb, var(--tag-sp) 15%, transparent); border-color: color-mix(in srgb, var(--tag-sp) 40%, transparent); }
.tag.rc { color: var(--tag-rc); background: color-mix(in srgb, var(--tag-rc) 15%, transparent); border-color: color-mix(in srgb, var(--tag-rc) 40%, transparent); }
.tag.ry { color: var(--tag-ry); background: color-mix(in srgb, var(--tag-ry) 15%, transparent); border-color: color-mix(in srgb, var(--tag-ry) 40%, transparent); }
.tag.ld { color: var(--tag-ld); background: color-mix(in srgb, var(--tag-ld) 15%, transparent); border-color: color-mix(in srgb, var(--tag-ld) 40%, transparent); }
.tag.dd { color: var(--c-dead); background: color-mix(in srgb, var(--c-dead) 15%, transparent); border-color: color-mix(in srgb, var(--c-dead) 40%, transparent); }
.tag.fp { color: var(--tag-fp); background: color-mix(in srgb, var(--tag-fp) 15%, transparent); border-color: color-mix(in srgb, var(--tag-fp) 40%, transparent); }
.tag.fz { color: var(--tag-fz); background: color-mix(in srgb, var(--tag-fz) 15%, transparent); border-color: color-mix(in srgb, var(--tag-fz) 40%, transparent); }
.tag.fl { color: var(--tag-fl); background: color-mix(in srgb, var(--tag-fl) 15%, transparent); border-color: color-mix(in srgb, var(--tag-fl) 40%, transparent); }
.tag.sw { color: var(--c-sword); background: color-mix(in srgb, var(--c-sword) 15%, transparent); border-color: color-mix(in srgb, var(--c-sword) 40%, transparent); }

.btns{display:flex;gap:12px;margin-top:16px}
button{
  font-family:var(--font-display);
  font-size:16px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:16px 12px;
  cursor:pointer;
  flex:1;
  border-radius: 10px;
  /* struck gold, matte finish: soft rim light, gentle horizon, no sheen */
  background: linear-gradient(180deg,
    #FFF6BC 0%, #FFE860 9%, #FFD415 13%, #FFD415 55%, #DFA90B 63%,
    #A87F04 71%, #EBBE14 87%, #FFDF4D 100%);
  border: 1px solid #7A5C04;
  color: #1F0E00;
  font-weight: 700;
  box-shadow:
    0 4px 0 var(--gold-lo),
    0 0 16px rgba(245,158,11,0.18),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(122,60,3,0.35);
  text-shadow: 0 1px 0 rgba(255,250,214,0.55);
  transition: transform 0.1s, box-shadow 0.1s, filter 0.2s;
}

button.ghost{
  background:var(--slot);
  color:var(--bone);
  border: 1px solid var(--line);
  box-shadow: 0 4px 0 #000, 0 0 16px rgba(0,0,0,0.3);
  text-shadow: none;
}

button:active{transform:translateY(4px);box-shadow:0 0 0 var(--gold-lo);}
button.ghost:active{transform:translateY(4px);box-shadow:0 0 0 #000;}

button:not(.ghost):not(:disabled):hover{
  filter:brightness(1.12);
  box-shadow:
    0 4px 0 var(--gold-lo),
    0 0 24px rgba(245,158,11,0.32),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(122,60,3,0.35);
}
button.ghost:not(:disabled):hover{
  filter:brightness(1.15);
  box-shadow: 0 4px 0 #000, 0 0 28px rgba(255,255,255,0.1);
}

button:disabled{
  background: #121214;
  border: 1px solid #27272A;
  color: #52525B;
  box-shadow: none;
  text-shadow: none;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.passes{
  font-family:var(--font-mono); font-size:12px; color:var(--dim);
  letter-spacing:.12em; margin-top:16px; text-align:center;
}
.passes a{
  color:var(--dim);
  text-decoration:none;
  transition:color .2s;
  padding:4px 8px;
}
.passes a:hover{color:var(--bone);}

.slots{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
@media(min-width:520px){.slots{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row}}
@media(min-width:760px){

  .slots{
    grid-template-columns:repeat(5,minmax(0,1fr));
    grid-template-rows:repeat(2, auto);
    grid-auto-flow:column;
  }
}

/* Crew slots */
.slot{
  border-radius:var(--radius);
  padding:16px 10px 14px;
  min-height:240px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  cursor:pointer;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.slot.cap   { border-color: color-mix(in srgb, var(--c-conq) 42%, transparent); }
.slot.fight { border-color: color-mix(in srgb, var(--c-dee) 45%, transparent); }
.slot.hand  { border-color: color-mix(in srgb, var(--c-trade) 42%, transparent); }

.slot:hover:not(.filled){
  transform:translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.2);
}
.slot.cap:hover:not(.filled)   { border-color: color-mix(in srgb, var(--c-conq) 60%, transparent); }
.slot.fight:hover:not(.filled) { border-color: color-mix(in srgb, var(--c-dee) 60%, transparent); }
.slot.hand:hover:not(.filled)  { border-color: color-mix(in srgb, var(--c-trade) 60%, transparent); }

.slot.filled{background:var(--slot); box-shadow: 0 4px 12px rgba(0,0,0,0.5);}

.slot.syn{

  border-color: var(--sc);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 14px -2px color-mix(in srgb, var(--sc) 30%, transparent), inset 0 0 0 1px var(--sc);
}
.slot.s-kin{--sc: var(--c-kin)} .slot.s-royal{--sc: var(--c-royal)} .slot.s-blood{--sc: var(--c-blood)}
.slot.s-gone{--sc: var(--c-dead)} .slot.s-fruit{--sc: var(--c-fruit)} .slot.s-conq{--sc: var(--c-conq)}
.slot.s-crew{--sc: var(--c-crew)} .slot.s-trade{--sc: var(--c-trade)} .slot.s-brass{--sc: var(--c-brass)}
.slot.s-wgen{--sc: var(--c-wgen)} .slot.s-wlord{--sc: var(--c-wlord)} .slot.s-dee{--sc: var(--c-dee)}
.slot.s-sword{--sc: var(--c-sword)}

.slot.faded{opacity:.4; box-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 0 1px var(--line);}

.slot.crowned{
  border-color: var(--sc);
  box-shadow: 0 16px 32px rgba(0,0,0,0.8), inset 0 0 0 2px var(--sc), 0 0 20px -4px color-mix(in srgb, var(--sc) 40%, transparent);
  transform:translateY(-4px);
}
.slot.crowned .who{color:#FFF}

.slot .role{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; margin-bottom:2px; font-weight:700;
}
.slot.cap .role   { color: var(--c-conq); }
.slot.fight .role { color: var(--c-dee); opacity: 1; }
.slot.hand .role  { color: var(--c-trade); opacity: 1; }

.slot .empty{ flex:0 0 auto;
  width:100%; max-width:80px; aspect-ratio:1/1; margin:4px auto 0;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; background:rgba(255,255,255,0.02);
  border:1px dashed var(--line); transition:border-color .2s, color .2s;
}
.slot.cap .empty   { border-color: color-mix(in srgb, var(--c-conq) 25%, transparent); color: color-mix(in srgb, var(--c-conq) 35%, transparent); }
.slot.fight .empty { border-color: color-mix(in srgb, var(--c-dee) 45%, transparent);  color: color-mix(in srgb, var(--c-dee) 60%, transparent); }
.slot.hand .empty  { border-color: color-mix(in srgb, var(--c-trade) 25%, transparent); color: color-mix(in srgb, var(--c-trade) 35%, transparent); }

.slot.cap:hover:not(.filled) .empty   { border-color: var(--c-conq); color: var(--c-conq); }
.slot.fight:hover:not(.filled) .empty { border-color: var(--c-dee); color: var(--c-dee); }
.slot.hand:hover:not(.filled) .empty  { border-color: var(--c-trade); color: var(--c-trade); }

/* flex:0 0 auto is load-bearing HERE AND ON EVERY IN-FLOW CHILD (see the rule
   right below). .slot is a flex column in a grid row, so all the cards in a
   row stretch to the tallest and a card whose own content runs taller than
   that gets its children COMPRESSED by flexbox rather than growing.
   A squeezed avatar turns into an ellipse - that was the first symptom,
   Doflamingo at 80x63.9 against Sanji's 80x75. A squeezed text block is worse:
   its lines stay put while the box shrinks, so the bounty ends up drawn on top
   of the chips. That is what Kam saw on Eustass Kid.
   aspect-ratio does not protect the avatar and line-height does not protect
   the text. Refusing to shrink does both. */
/* The text blocks, for the same reason. .pop is absolutely positioned so it is
   out of the flex flow and deliberately not listed. */
.slot > .role, .slot > .who, .slot > .stags, .slot > .sub, .slot > .crew,
.slot > .empty{ flex:0 0 auto; }

.slot .av{
  width:100%; max-width:80px; aspect-ratio:1/1; flex:0 0 auto; margin:0 auto;
  border-radius:50%;
  overflow:hidden; background:#000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.8); position:relative; display:block;
}
.slot .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.slot .who{
  font-family:var(--font-body);
  font-size:14.5px;
  font-weight:800;
  height:34px;
  /* two lines MUST fit inside the 34px box. inherited line-height was 20.3px,
     so a two-line name came to 40.6px and the second line got its bottom
     sliced off. 17px x 2 lands exactly on 34. */
  line-height:17px;
  margin-top:8px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.slot .stags{display:flex; gap:4px; justify-content:center; flex-wrap:wrap; min-height:18px; width:100%;}
.slot .stag{
  font-family:var(--font-mono);
  font-size:9.5px;
  font-weight:700;
  padding:2px 6px;
  border-radius:999px;
  background: color-mix(in srgb, currentColor 15%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.slot .sub{font-family:var(--font-mono); font-size:10px; color:var(--dim);}
.slot .crew{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  /* min-height, NOT height. A fixed 12px is one line, so a crew name that
     wrapped had its second line hanging outside the box and clipped by the
     card - which is what "SEVEN WARLORDS OF THE SEA" was doing in landscape.
     Short forms in SHORTCREW keep the common ones to one line; this is the
     guard for whatever the manga names next. Same trap as .slot height and
     .who height - see the crew-card notes. */
  text-transform:uppercase; color:var(--dim); min-height:12px;
}
.slot .crew.on{color:var(--sc); font-weight:700;}
.slot .pts{font-family:var(--font-mono); font-size:12px; color:var(--grn); margin-top:10px;}

h2{
  font-family:var(--font-body);
  font-weight:800;
  font-size:14px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone);
  margin:20px 0 10px;
  padding-bottom:8px;
}

.synkey{display:flex;flex-wrap:wrap;gap:8px 12px;margin:8px 0 16px}
.synkey span{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--bone);
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.synkey span:nth-child(1) { color: var(--c-kin) !important; }
.synkey span:nth-child(2) { color: var(--c-royal) !important; }
.synkey span:nth-child(3) { color: var(--c-blood) !important; }
.synkey span:nth-child(4) { color: var(--c-dead) !important; }
.synkey span:nth-child(5) { color: var(--c-fruit) !important; }
.synkey span:nth-child(6) { color: var(--c-crew) !important; }
.synkey span:nth-child(7) { color: var(--c-trade) !important; }
.synkey span:nth-child(8) { color: var(--c-brass) !important; }
.synkey span:nth-child(9) { color: var(--c-wgen) !important; }
.synkey span:nth-child(10) { color: var(--c-wlord) !important; }
.synkey span:nth-child(11) { color: var(--c-dee) !important; }
.synkey span:nth-child(12) { color: var(--c-sword) !important; }

.synkey i{
  width:10px; height:10px; border-radius:50%;
  background:currentColor; display:inline-block; flex:0 0 auto;
}

#syn .syn{
  display:flex; justify-content:space-between; font-size:14px;
  padding:10px 10px; border-bottom:1px solid rgba(255,255,255,0.09);
  background: rgba(9, 9, 11, 0.55);
}
#syn .syn:first-of-type{ border-radius: 8px 8px 0 0; }
#syn .syn:last-of-type{ border-bottom:none; border-radius: 0 0 8px 8px; }
#syn .syn .v{font-family:var(--font-body); color:var(--dim); white-space:nowrap; font-weight:700;}
#syn .syn.on .v{color:var(--gold); font-weight:800;}
#syn .syn em{display:block; font-family:var(--font-body); font-size:13px; color:var(--dim-lo); margin-top:4px;}

/* the trades row uses the same markup as a bonus row but sits outside #syn,
   so it needs its own copy of the row layout */
#trades .syn{
  display:flex; justify-content:space-between; font-size:14px;
  padding:10px; border-radius:8px;
  background: rgba(9, 9, 11, 0.55);
}
#trades .syn .v{font-family:var(--font-body); color:var(--dim); white-space:nowrap; font-weight:700;}
#trades .syn.on .v{color:var(--gold); font-weight:800;}

.tradelist{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:10px 0 8px;
  min-width: 0;
}
.tradelist .tag {
  padding: 5px 10px;
  font-size: 11px;
}
.tradelist .tag.sp {
  color: var(--c-trade);
  background: color-mix(in srgb, var(--c-trade) 20%, transparent);
  border-color: var(--c-trade);
  box-shadow: 0 0 12px color-mix(in srgb, var(--c-trade) 40%, transparent);
  font-weight: 700;
}
.tradelist .tag.off {
  color: var(--dim);
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.1);
  box-shadow: none;
  font-weight: 400;
}

.note{font-family:var(--font-body); font-size:13px; color:var(--dim); margin-top:12px; line-height:1.5;}

.is-done{ position:relative; }

/* reveal on the drawn card, same detail panel the crew cards have */
.cell.landed{ position:relative; }
.cell .pop{
  position:absolute; left:16px; right:16px; bottom:10px;
  border-radius:12px;
  background:#0E0E12;
  box-shadow:inset 0 0 0 1px var(--line), 0 10px 26px rgba(0,0,0,0.6);
  display:flex; flex-direction:column; align-items:center;
  gap:6px; padding:12px 14px 13px;
  text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .15s;
  z-index:5;
}
.cell.landed:hover .pop, .cell.landed.open .pop{ opacity:1; }
.cell.landed:hover .tags, .cell.landed.open .tags{ opacity:0; }
@media (pointer: coarse){
  .cell.landed:hover .pop{ opacity:0; }
  .cell.landed.open .pop{ opacity:1; }
  .cell.landed:hover:not(.open) .tags{ opacity:1; }
}
.cell .pop-n{ font-family:var(--font-body); font-weight:800; font-size:15px; color:var(--bone); }
.cell .pop-c{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); line-height:1.5; }
.cell .pop-b{ font-family:var(--font-mono); font-size:11px; color:var(--gold); }
.cell .pop-t{ display:flex; flex-wrap:wrap; gap:4px; justify-content:center; }
.cell .pop .stag{
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  padding:2px 6px; border-radius:999px;
  background:color-mix(in srgb, currentColor 15%, transparent);
  border:1px solid color-mix(in srgb, currentColor 40%, transparent);
}

/* run end: an aura in the tier's colour blooms behind the verdict,
   and keeps breathing on a Pirate King finish */
/* the old 1px inset ring clipped at the panel's rounded corners and read
   as a broken line - the rank seal now lives on .panel.sealed instead */
.cell.is-done::before{
  content:'';
  position:absolute; inset:-30%;
  background:radial-gradient(circle at 50% 44%,
    color-mix(in srgb, var(--tier, var(--gold)) 26%, transparent), transparent 62%);
  animation: bloom 1.4s cubic-bezier(.2,.8,.3,1) both,
             breathe-soft 5.4s ease-in-out 1.6s infinite alternate;
  pointer-events:none;
}
.is-done.t-king{ --tier: var(--gold); }
.is-done.t-king::before{
  animation: bloom 1.4s cubic-bezier(.2,.8,.3,1) both,
             breathe 3s ease-in-out 1.4s infinite alternate;
}
@keyframes bloom{
  from{ opacity:0; transform:scale(.55); }
  60%{ opacity:1; }
  to{ opacity:.85; transform:scale(1); }
}
@keyframes breathe{ from{ opacity:.6; } to{ opacity:1; } }
@keyframes breathe-soft{ from{ opacity:.8; } to{ opacity:.96; } }

.done .t{
  font-family:var(--font-display);
  font-size:clamp(36px, 7vw, 58px);
  line-height:1;
  letter-spacing:.03em;
  text-transform:uppercase;
  background: var(--tier-metal, var(--metal-gold));
  background-size: 100% 1em;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  animation: rise .4s cubic-bezier(.2,.9,.3,1) both;
}

.is-done.t-king .done .t{
  background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%),
                    var(--metal-gold);
  background-size: 240% 100%, 100% 1em;
  background-position: 130% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
  animation: sheen 5.8s linear 1.2s infinite;
}
.is-done.t-king .done .t span{
  background-image: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%),
                    var(--metal-red);
  background-size: 240% 100%, 100% 1em;
  background-position: 130% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 5.8s linear 1.2s infinite;
}
@keyframes sheen{
  0%{ background-position: 150% 0, 0 0; }
  42%, 100%{ background-position: -190% 0, 0 0; }
}

.is-done.t-emp   { --tier: var(--red-hi); --tier-metal: var(--metal-red); }
.is-done.t-emp::before{
  animation: bloom 1.4s cubic-bezier(.2,.8,.3,1) both,
             breathe 3.2s ease-in-out 1.4s infinite alternate;
}
.is-done.t-war   { --tier: var(--steel); --tier-metal: var(--metal-steel); }
.is-done.t-nova  { --tier: var(--tier-nova); --tier-metal: var(--metal-nova); }
.is-done.t-rook  { --tier: var(--tier-rook); --tier-metal: var(--metal-rook); }
.is-done.t-bilge { --tier: var(--tier-bilge); --tier-metal: var(--metal-bilge); }

.done .bond{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-top:14px;
  color:var(--sc);
  font-weight:700;
  /* dark halo so deep bond colours stay readable over the aura glow */
  text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 10px rgba(0,0,0,0.8);
  animation: rise .4s cubic-bezier(.2,.9,.3,1) .1s both;
}

.done .score{
  margin-top:18px;
  font-family:var(--font-mono);
  animation: rise .4s cubic-bezier(.2,.9,.3,1) .2s both;
  /* the NUMBER holds the centre line, not the number-plus-unit block:
     'pts' hangs off the right without shoving the score off-axis */
  position:relative;
  display:inline-block;
}
.done .score b{ font-size:28px; color:var(--bone); font-weight:700; }
.done .score i{
  font-size:12px; color:var(--dim); font-style:normal;
  letter-spacing:.18em;
  position:absolute; left:100%; bottom:.28em; margin-left:7px;
}

.is-done.t-throne{ --tier: var(--throne); }
.is-done.t-throne::before{
  background:radial-gradient(circle at 50% 44%,
    color-mix(in srgb, var(--throne) 34%, transparent), transparent 64%);
  animation: bloom 1.4s cubic-bezier(.2,.8,.3,1) both,
             breathe 3.4s ease-in-out 1.4s infinite alternate;
}
.is-done.t-throne .done .t{
  background-image: linear-gradient(115deg, transparent 40%, rgba(228,214,255,0.36) 50%, transparent 60%),
                    var(--metal-steel);
  background-size: 240% 100%, 100% 1em;
  background-position: 150% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.85));
  animation: sheen 9.6s linear 1.2s infinite;
}
.is-done.t-throne .done .t span{
  background-image: linear-gradient(115deg, transparent 40%, rgba(228,214,255,0.36) 50%, transparent 60%),
                    var(--metal-violet);
  background-size: 240% 100%, 100% 1em;
  background-position: 150% 0, 0 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sheen 9.6s linear 1.2s infinite;
}

.scorebox .num.t-throne{
  background: var(--metal-violet);
  background-clip: text;
  -webkit-background-clip: text;
  animation: crown-t 2.4s ease-in-out infinite alternate;
}
.scorebox .tier.t-throne{ color: var(--throne-hi); }
@keyframes crown-t{
  from{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 6px rgba(167,139,250,0.22)); }
  to{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 20px rgba(167,139,250,0.6)); }
}

/* every rank wears its own colour in the corner; the top three also glow */
.scorebox .num.t-emp{
  background: var(--metal-red);
  background-clip: text; -webkit-background-clip: text;
}
.scorebox .tier.t-emp{ color: var(--red-hi); }
.scorebox .num.t-war{
  background: var(--metal-steel);
  background-clip: text; -webkit-background-clip: text;
}
.scorebox .tier.t-war{ color: var(--steel); }
.scorebox .num.t-nova{
  background: var(--metal-nova);
  background-clip: text; -webkit-background-clip: text;
}
.scorebox .tier.t-nova{ color: var(--tier-nova); }
.scorebox .num.t-rook{
  background: var(--metal-rook);
  background-clip: text; -webkit-background-clip: text;
}
.scorebox .tier.t-rook{ color: var(--tier-rook); }
.scorebox .num.t-bilge{
  background: var(--metal-bilge);
  background-clip: text; -webkit-background-clip: text;
}
.scorebox .tier.t-bilge{ color: var(--tier-bilge); }

.scorebox .num.t-king{ animation: crown-k 2.4s ease-in-out infinite alternate; }
.scorebox .num.t-emp{ animation: crown-e 2.8s ease-in-out infinite alternate; }
@keyframes crown-k{
  from{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 5px rgba(253,224,71,0.18)); }
  to{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 18px rgba(253,224,71,0.55)); }
}
@keyframes crown-e{
  from{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 4px rgba(255,64,64,0.14)); }
  to{ filter: drop-shadow(0 4px 8px rgba(0,0,0,0.8)) drop-shadow(0 0 14px rgba(255,64,64,0.45)); }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .done .t, .done .bond, .done .score{ animation:none; }
  .btns{ transition:none; }
  body.over .passes, body.over .sharebar button{ animation:none; }
  .cell.is-done::before, .is-done.t-king .done .t, .is-done.t-king .done .t span,
  .is-done.t-throne .done .t, .is-done.t-throne .done .t span,
  .scorebox .num.t-king, .scorebox .num.t-emp, .scorebox .num.t-throne{ animation:none; }
}

/* Phones */
@media(max-width:519px){

  /* the five-column desktop grid must not reach a phone */
  .slots{
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:none;
    grid-auto-flow:row;
  }

  html, body{
    overflow-x:hidden;
    overscroll-behavior-x:none;
    max-width:100%;
  }
  /* no clip here: html and body already stop sideways scrolling, and this
     was cutting the left arm off the menu icon */
  .wrap{ max-width:100%; }

  /* title stays centred on its own. the button lifts out of the flow so it
     cannot push it off centre, sitting level with the first line of the title */
  /* on a phone the title is centred on its own and the button lifts out of
     the flow, so the grid above is switched back off here */
  header{ position:relative; display:flex; flex-direction:column;
          align-items:center; text-align:center; gap:6px; }
  .titles{ display:flex; flex-direction:column; min-width:0; }
  /* The icon used to sit hard against the screen edge, because the wordmark
     ran almost the full width and left it nowhere to go. Now the icon comes
     in off the edge and the wordmark is sized to leave it a constant 11px
     of clearance at every phone width.
     SIZED BY WIDTH with height:auto, so the logo can only ever scale, never
     change shape. The old rule set a fixed height with max-width:100%, which
     squashed it horizontally at 360px and below: it was 8.8 wide per 1 tall
     at 320px instead of its true 11.1. Never set both height and max-width.
     The 322px cap is 29px tall, the same as the desktop rule, so nothing
     jumps at the 520px breakpoint. */
  /* the button's top is worked out from the logo's own height (its width
     divided by its aspect ratio, 11.114) so the two centres line up at
     every phone width. 0.045 is half of one over 11.114; 20px is half the
     button. */
  header .menuwrap{ position:absolute; left:-16px; z-index:70;
                    top:calc(min(100vw - 112px, 322px) * 0.045 - 20px); }
  #menubtn{
    width:40px; height:40px;
    gap:4px;
    background:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  #menubtn i{ width:17px; }
  #menubtn:active{ transform:none; box-shadow:none; }
  .menu{ left:12px; }   /* sit under the icon, not out at the text edge */
  .scorebox{ text-align:center; align-items:center; }
  .sub{ letter-spacing:.22em; }

  .spinbar{ margin:0 auto; }
  .passes, .note{ text-align:center; }

  .slots{ gap:8px; }
  .slot{
    /* EMPTY SEATS RESERVE A FULL CARD'S HEIGHT. This was min-height:0, so an
       empty seat was 98px and a filled one 187px - and because grid rows size
       to their tallest item, dropping ONE crewmate into a row doubled the
       height of the empty seat beside it and shoved the whole board down.
       Kam, 23 Aug: "the card sizes keep randomly changing sizes, without
       anything being put in that row of seats yet."
       204 is measured, not guessed: every filled card across the whole cast
       comes out 186.8, or 203.2 when its chip row wraps at 390px and below.
       One number above the worst case means the board never moves. */
    min-height:204px;
    padding:8px 5px 7px;
    gap:4px;
    border-radius:10px;
  }
  .slot .av{ max-width:46px; }
  .slot .empty{ max-width:46px; }
  .slot .role{ font-size:8px; letter-spacing:.14em; }
  .slot .who{ font-size:12px; }
  .slot .stag{ font-size:8px; padding:1px 5px; }
  .slot .sub{ font-size:9px; }
  .slot .crew{ font-size:8px; letter-spacing:.04em; }
  .slot .pts{ font-size:11px; }

  .reel, .cell{ height:300px; }
  .cell{ gap:7px; padding:12px 14px; }
  .cell .por{ max-width:104px; }
  .cell .nm{ font-size:24px; }
  .cell .bty{ font-size:15px; }
  .cell .meta{ font-size:12px; }
  .tags{ gap:5px; margin-top:2px; }
  .tag{ font-size:11px; padding:3px 9px; }
}

/* Swap indicator */
.swapbar{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin:9px auto 0; padding:5px 13px;
  width:fit-content;
  border-radius:999px;
  background:rgba(255,255,255,0.035);
  box-shadow: inset 0 0 0 1px var(--line);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim);
  transition: box-shadow .2s, color .2s, background .2s;
}

.swapbar.ghost{ visibility:hidden; }
.swapbar.gone{ display:none; }

/* share bar - takes the swap bar's spot once the run is over */
.sharebar{ display:none; }
.sharebar.on{
  display:flex; align-items:center; justify-content:center;
  margin:9px auto 0;
}
.sharebar button{
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:9px 20px;
  border-radius:999px;
  min-width:170px;
}
.swapbar .pips{ display:inline-flex; gap:5px; }
.swapbar i{
  width:8px; height:8px; border-radius:50%; display:block;
  background:var(--gold);
  box-shadow:0 0 8px color-mix(in srgb, var(--gold) 60%, transparent);
}
.swapbar i.off{ background:transparent; box-shadow:inset 0 0 0 1px #3A3A44; }

.swapbar.active{
  color:var(--bone);
  background:rgba(255,255,255,0.07);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bone) 45%, transparent);
}
.swapbar.spent{ opacity:.5; }

.slot{ position:relative; }
/* Card detail panel */
.slot .pop{
  position:absolute; left:50%; bottom:calc(100% + 8px);
  transform:translateX(-50%) translateY(4px);
  width:max-content; max-width:230px;
  padding:9px 11px;
  border-radius:10px;
  background:#14131A;
  box-shadow:0 12px 30px rgba(0,0,0,.75), inset 0 0 0 1px var(--line);
  opacity:0; pointer-events:none;
  transition:opacity .13s, transform .13s;
  z-index:40;
  text-align:left;
}
.slot:hover .pop, .slot.open .pop{
  opacity:1; transform:translateX(-50%) translateY(0);
}

@media (pointer: coarse){ .slot:hover .pop{ opacity:0; } .slot.open .pop{ opacity:1; } }

.slot .pop-n{ font-family:var(--font-body); font-weight:800; font-size:13px; color:var(--bone); }
.slot .pop-c{ font-family:var(--font-mono); font-size:10px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); margin-top:3px; line-height:1.5; }
.slot .pop-b{ font-family:var(--font-mono); font-size:11px; color:var(--gold); margin-top:4px; }
.slot .pop-t{ display:flex; flex-wrap:wrap; gap:4px; margin-top:7px; }
.slot .pop-t .stag{ font-size:9px; padding:1px 6px; max-width:none; overflow:visible; }

.slot .stag.more{
  color:var(--dim) !important;
  box-shadow:inset 0 0 0 1px #3A3A44;
  flex:0 0 auto;
}

.slot.open{ z-index:41; }

.slot.lifted{
  border-color: var(--bone);
  box-shadow: 0 14px 30px rgba(0,0,0,0.8), inset 0 0 0 2px var(--bone);
  transform: translateY(-6px) scale(1.02);
}
.slot.lifted .who{ color:#FFF; }
.slot.lifted .av{ box-shadow: 0 4px 12px rgba(0,0,0,0.8), 0 0 0 2px var(--bone); }

.slots.swapping .slot.filled:not(.lifted){ cursor:pointer; }
.slots.swapping .slot.filled:not(.lifted):hover{
  border-color: color-mix(in srgb, var(--bone) 55%, transparent);
}

/* DRAG TO TRADE SEATS.
   touch-action:none is what stops the browser scrolling the page instead of
   letting us drag, so it is confined to the portrait circle: a drag from a
   face reorders the crew, a drag from anywhere else on the card still scrolls
   the page. On a phone the seat grid fills most of the screen, so marking the
   whole card would have trapped scrolling. */
/* NO touch-action here. The portrait was marked touch-action:none so a finger
   could drag it, which also meant a scroll that began on a face went nowhere.
   Drag is mouse-only now, so the page scrolls from anywhere again. */
.slot .av img{ -webkit-user-drag:none; user-select:none; }

/* A press on a crewmate is a game action, never a text selection. Holding one
   was starting the browser's own select-and-highlight (and on a phone, the
   copy/share callout), which fought the press-and-hold that opens the detail
   card. Kam, 23 Aug: "The holding thing is selecting text when i do it".
   The popup itself is left selectable so its text can still be copied. */
.slot{ user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.slot .pop{ user-select:text; -webkit-user-select:text; }
.slots.dragging{ cursor:grabbing; }
.slots.dragging .slot{ transition:none; }          /* no lag under the finger */
.slots.dragging .slot.filled:not(.lifted){ opacity:.85; }
.slot.drop-target{
  border-color: var(--bone);
  box-shadow: inset 0 0 0 2px var(--bone), 0 0 18px rgba(0,0,0,0.55);
  transform: scale(1.03);
}

/* Desktop spacing pass. Must stay last: it overrides the base rules above. */
@media(min-width:1040px) and (min-height:700px){

  body{ padding:8px 32px 8px; }
  .deck{ margin-top:8px; row-gap:10px; }

  .btns{ margin-top:10px; }

  .spinbar{ text-align:center; }
  .spinbar #passes, .spinbar .mutewrap{ display:inline-block; margin-top:8px; }
  .spinbar .mutewrap{ margin-left:14px; padding-left:14px; position:relative; }
  .spinbar .mutewrap::before{
    content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
    width:1px; height:11px; background:var(--line);
  }
  .swapbar{ margin-top:8px; padding:4px 12px; }
  .sharebar.on{ margin-top:8px; }
  .sharebar button{ padding:7px 18px; }

  .reel, .cell{ height:262px; }
  .cell{ padding:7px 20px; gap:9px; }
  .cell .por{ max-width:104px; }

  .main h2{ margin:0 0 6px; padding-bottom:0; }

  /* min-height, NOT height. A fixed height cannot grow, so a card whose
     content runs past 228px had nowhere to put the overflow and pushed its
     bottom line - the crew name - through the border. Jesus Burgess needed
     236px and got 228, so "BLACKBEARD PIRATES" sat ON the card edge with all
     8px of bottom padding eaten. Measured: content 228 inside a 226 box.
     The cards in a row still match each other, because grid items stretch to
     the tallest in the row; the row is now allowed to be taller than 228.
     Same reason .who is a minimum: it reserves the space that keeps the chip
     rows aligned, without trapping a name that wraps to two lines. */
  .slot{ padding:10px 10px 8px; gap:6px; min-height:228px; }
  .slot .av, .slot .empty{ max-width:80px; }
  .slot .who{ min-height:34px; margin-top:5px; }
  .slots{ gap:8px; }
}

/* run over: the dead controls fold away and the countdown and share
   rise in behind them, so the screen settles rather than snaps */
.btns{ max-height:90px; transition: max-height .5s ease .1s, opacity .3s ease, margin .5s ease .1s; }
body.over .btns{ max-height:0; opacity:0; margin-top:0; overflow:hidden; pointer-events:none; }
body.over .passes{ animation: rise .45s cubic-bezier(.2,.9,.3,1) .35s both; }
body.over .sharebar button{ animation: rise .45s cubic-bezier(.2,.9,.3,1) .5s both; }
body.over .swapbar{ display:none; }
body.over .passes{ margin-top:18px; }
body.over #passes b{ color:var(--gold); font-weight:700; }
body.over .sharebar.on{ margin:14px auto 4px; }
body.over .sharebar button{
  color:#1F0E00;
  font-size:12px;
  padding:12px 30px;
  border: 1px solid #7A5C04;
  background: linear-gradient(180deg,
    #FFF6BC 0%, #FFE860 9%, #FFD415 13%, #FFD415 55%, #DFA90B 63%,
    #A87F04 71%, #EBBE14 87%, #FFDF4D 100%);
  box-shadow:
    0 3px 0 var(--gold-lo),
    0 0 14px rgba(245,158,11,0.22),
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 3px rgba(122,60,3,0.35);
  text-shadow: 0 1px 0 rgba(255,250,214,0.55);
}
body.over .sharebar button:hover{
  filter:brightness(1.12);
}
@media(max-width:1339px){
  body.over .scorebox{ display:none; }
}

/* ---- WORDMARK ----
   The title ships as a transparent PNG instead of live text, so nobody can
   select it letter by letter and it renders identically everywhere. The
   drop shadow and the metal are baked into the image, so the h1's own
   background is switched off here and the shadow moved onto the image.
   The PNG is cropped tight to the glyphs, so its height is exactly the
   old line box (font-size x 0.9). Scale it by that and it lands where
   the text did, to the pixel. */
h1.wm{ background:none; filter:none; line-height:0; }
h1.wm img{ display:block; width:auto; max-width:100%;
           filter:drop-shadow(0 2px 4px rgba(0,0,0,0.8)); }
h1.wm img{ height:clamp(29px, 4.5vw, 43px); }

/* Phone sizing for the wordmark. Must come AFTER the base h1.wm rules
   above, or the desktop height wins and the logo gets squashed. */
@media(max-width:519px){
  h1.wm img{ width:min(calc(100vw - 112px), 322px); height:auto; }
}