/* Too Many Crooks! skin: the police-lineup wall from the box. Slate, cream lettering with a hard black drop,
   lineup red and a gold for numbers. */
.g-tmc{
  --g-bg:#E7EBED; --g-panel:#D9E0E3; --g-panel-hi:#F1F4F5; --g-face:#FFFFFF;
  --g-red:#C23A22;            /* the page accent slot: the lineup red, darkened for text */
  --g-gold:#C9A14F; --g-jade:#1B2228; --g-ink:#1B2228; --g-muted:#56636B; --g-line:#C4CDD2;
  --tmc-slate:#55646E; --tmc-slate-d:#36424A; --tmc-cream:#F2ECDA; --tmc-hot:#E04B2E; --tmc-gold:#F5D27A;
  --tmc-display:"Oswald",sans-serif; --tmc-mono:"Courier Prime",monospace;
}
@media (prefers-color-scheme: dark){
  .g-tmc{--g-bg:#2C363D; --g-panel:#36424A; --g-panel-hi:#435159; --g-red:#FF8A6B; --g-jade:#36424A;
    --g-ink:#F2ECDA; --g-muted:#C1CAD0; --g-line:#46545D}
}
.g-tmc .g-hero h1{font-family:var(--tmc-display);font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--g-ink);text-shadow:0 5px 0 #AEB9BF}
.g-tmc .g-hero h1 em{font-style:normal;color:var(--tmc-hot)}
@media (prefers-color-scheme: dark){.g-tmc .g-hero h1{text-shadow:0 6px 0 #0A0C10}}
.g-tmc .pill{background:var(--tmc-slate);color:var(--tmc-cream);border-color:var(--tmc-slate)}
.g-tmc .pill::before{background:var(--tmc-gold)}
.g-tmc .pill{font-family:var(--tmc-mono);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.g-tmc h2,.g-tmc h3{font-family:var(--tmc-display);font-weight:700;letter-spacing:.03em;text-transform:uppercase}
.g-tmc .label{font-family:var(--tmc-mono);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g-red)}
@media (prefers-color-scheme: dark){.g-tmc.game .btn.red{color:#1B2228}}

/* hero: a still render with view buttons */
.g-tmc .viewer{background:#1E252A}
.g-tmc .viewer .stage{aspect-ratio:16/10}
.g-tmc .viewer .stage img.poster{object-fit:cover;transition:opacity .25s}
.g-tmc .viewer .bar{background:var(--g-panel)}

/* the three kinds of crook */
.crooks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);margin-top:clamp(28px,4vw,44px)}
.crook{border-radius:10px;padding:0 18px 18px;color:var(--tmc-cream);display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;
  background:linear-gradient(var(--tmc-slate-d),var(--tmc-slate-d)) 0 144px/100% 4px no-repeat,
    repeating-linear-gradient(180deg,transparent 0 27px,rgba(242,236,218,.18) 27px 28px) 0 0/100% 144px no-repeat,var(--tmc-slate)}
.crook svg.bust{width:132px;height:132px;align-self:center;margin:12px 0 8px;overflow:visible}
.crook b{font-family:var(--tmc-display);font-weight:700;font-size:22px;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 2px 0 #0A0C10}
.crook i{font-style:normal;font-family:var(--tmc-mono);font-weight:700;font-size:15px;letter-spacing:.18em;color:var(--tmc-gold)}
.crook p{margin:0;font-size:15px;color:#DCE2E5}
@media (max-width:820px){.crooks{grid-template-columns:1fr}}

/* the three jobs */
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.jobs div{border-radius:10px;padding:18px;display:flex;flex-direction:column;gap:6px;background:var(--g-panel);border:1.5px solid var(--g-line)}
.jobs b{font-family:var(--tmc-mono);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-red)}
.jobs span{font-size:15px}
.jobs .last{background:var(--tmc-slate);color:var(--tmc-cream);border-color:var(--tmc-slate)}
.jobs .last b{color:var(--tmc-gold)}
@media (max-width:820px){.jobs{grid-template-columns:1fr}}

/* crew sheets and dice */
.sheets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,24px);align-items:start}
.sheets figure{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.sheets img{width:100%;aspect-ratio:7/5;border-radius:6px;box-shadow:0 18px 30px -18px rgba(14,16,20,.6);transition:transform .2s}
.sheets figure:hover img{transform:translateY(-4px) rotate(-.6deg)}
.sheets figcaption{font-size:14.5px;color:var(--g-muted)}
.sheets figcaption b{display:block;color:var(--g-ink);font-size:16px;font-family:var(--tmc-display);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:820px){.sheets{grid-template-columns:1fr 1fr}}
.dice-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:18px}
.dice-row .cap{font-family:var(--tmc-mono);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-muted);margin-right:6px}
.die6{width:44px;height:44px;border-radius:8px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:6px;border:1px solid rgba(0,0,0,.35);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.3),0 2px 3px rgba(0,0,0,.3)}
.die6 i{width:7px;height:7px;border-radius:50%;background:currentColor;place-self:center;visibility:hidden}
.die6[data-v="1"] i:nth-child(5),.die6[data-v="2"] i:nth-child(3),.die6[data-v="2"] i:nth-child(7),.die6[data-v="3"] i:nth-child(3),.die6[data-v="3"] i:nth-child(5),.die6[data-v="3"] i:nth-child(7),
.die6[data-v="4"] i:nth-child(1),.die6[data-v="4"] i:nth-child(3),.die6[data-v="4"] i:nth-child(7),.die6[data-v="4"] i:nth-child(9),
.die6[data-v="5"] i:nth-child(1),.die6[data-v="5"] i:nth-child(3),.die6[data-v="5"] i:nth-child(5),.die6[data-v="5"] i:nth-child(7),.die6[data-v="5"] i:nth-child(9),
.die6[data-v="6"] i:nth-child(1),.die6[data-v="6"] i:nth-child(3),.die6[data-v="6"] i:nth-child(4),.die6[data-v="6"] i:nth-child(6),.die6[data-v="6"] i:nth-child(7),.die6[data-v="6"] i:nth-child(9){visibility:visible}

.g-tmc .renders img{aspect-ratio:16/10}
.g-tmc .play-frame iframe{height:min(88vh,940px)}
.g-tmc .g-cta{background:var(--tmc-slate)}
.g-tmc .g-cta h2{font-family:var(--tmc-display);font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--tmc-cream);text-shadow:0 3px 0 #0A0C10}
.g-tmc .g-cta .btn.light{color:#1B2228}

/* home page card */
.feature.g-tmc h3{font-family:var(--tmc-display);font-weight:700;letter-spacing:.02em;text-transform:uppercase}
.feature.g-tmc .feature-art{background:#1E252A;padding:0}
.feature.g-tmc .feature-art img{width:100%;height:100%;object-fit:cover}