/* ============================================================
   12 ANGRY MEN — visual system v2
   Vintage saloon / pre-war football clubhouse aesthetic.
   All textures are SVG data URIs so the site stays single-folder.
   ============================================================ */

:root{
  --ink:#0e0905;
  --ink-2:#160f08;
  --wood-deep:#1a0f08;
  --wood-mid:#3a2515;
  --wood-light:#5a3a20;
  --leather:#3d2818;
  --parchment-1:#e8d4ad;
  --parchment-2:#d4bc8c;
  --parchment-shadow:#a88c5a;
  --cream:#f0e2c0;
  --cream-dim:#b8a47e;
  --gold:#c9a13b;
  --gold-bright:#f1d27a;
  --gold-deep:#7a5c1a;
  --brass:#b48a30;
  --win:#7a9b45;
  --loss:#b14a32;
  --tie:#9a8a6a;
  --team-color:#5a3a20;
  --team-accent:#f1d27a;

  /* TEXTURE DATA URIs */
  --tex-fine-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --tex-wood: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cdefs%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='0.02 0.6' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.04 0 0 0 0 0.02 0 0 0 0.85 0'/%3E%3C/filter%3E%3Cfilter id='wk'%3E%3CfeTurbulence baseFrequency='0.04 0.04' numOctaves='2' seed='12'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -0.6'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23wk)' opacity='0.3'/%3E%3C/svg%3E");
  --tex-leather: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
  --tex-foxing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cg fill='%237a5520' fill-opacity='0.22'%3E%3Ccircle cx='40' cy='60' r='3'/%3E%3Ccircle cx='350' cy='30' r='2'/%3E%3Ccircle cx='150' cy='220' r='4'/%3E%3Ccircle cx='280' cy='340' r='2.5'/%3E%3Ccircle cx='80' cy='370' r='3'/%3E%3Ccircle cx='220' cy='100' r='2'/%3E%3Cellipse cx='320' cy='180' rx='5' ry='3'/%3E%3C/g%3E%3C/svg%3E");
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Zilla Slab",serif;
  color:var(--cream);
  background:var(--ink);
  line-height:1.5;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

/* ============ AMBIENT BACKGROUND: dim saloon, oil lamp glow ============ */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(60% 45% at 50% 0%, rgba(244,200,120,.10) 0%, transparent 60%),
    radial-gradient(140% 90% at 50% 0%, #2a1a10 0%, #110a06 55%, #060302 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:var(--tex-fine-grain);
  opacity:.18;
  mix-blend-mode:overlay;
}

a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* ============ TEXTURED SURFACES ============ */

/* Wood plank — dark oak with grain SVG */
.wood{
  background:
    var(--tex-wood),
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.18) 0 1px, transparent 1px 78px,
      rgba(255,255,255,.025) 78px 79px, transparent 79px 156px),
    linear-gradient(180deg,#3a2515 0%,#28190e 70%,#1a0f08 100%);
  background-size: 600px 240px, auto, auto;
  background-blend-mode: multiply, normal, normal;
  box-shadow:
    inset 0 1px 0 rgba(255,210,150,.08),
    inset 0 -3px 12px rgba(0,0,0,.55),
    inset 0 0 80px rgba(0,0,0,.35);
}

/* Parchment — aged paper with fiber + foxing */
.parchment{
  background:
    var(--tex-foxing),
    var(--tex-paper),
    radial-gradient(120% 80% at 50% 30%, #efddb2 0%, #d6be8c 70%, #b89d6a 100%);
  background-blend-mode: multiply, multiply, normal;
  color:#2a1d10;
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    inset 0 0 60px rgba(120,80,40,.4),
    inset 0 0 0 1px rgba(40,20,5,.15);
}

/* Leather — stitched edges */
.leather{
  background:
    var(--tex-leather),
    radial-gradient(120% 90% at 50% 30%, #6a4628, #3d2818 65%, #251609 100%);
  background-blend-mode: multiply, normal;
  border:2px solid #150b06;
  box-shadow:
    inset 0 0 0 4px rgba(0,0,0,.4),
    inset 0 0 0 5px rgba(180,138,48,.25),
    inset 0 -8px 20px rgba(0,0,0,.5),
    0 6px 14px rgba(0,0,0,.4);
  position:relative;
}
.leather::after{
  content:"";position:absolute;inset:8px;border:1px dashed rgba(180,138,48,.45);border-radius:3px;pointer-events:none;
}

/* ============ NAVBAR ============ */
header{position:sticky;top:0;z-index:50}
.navbar{
  display:flex;align-items:center;gap:28px;
  padding:14px 22px;
  border-bottom:4px solid #0a0503;
  box-shadow:0 12px 32px rgba(0,0,0,.65), inset 0 -1px 0 rgba(180,138,48,.15);
  position:relative;
}
.navbar::before{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(241,210,122,.4),transparent);
}
.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}

/* Brass badge */
.badge{
  width:58px;height:58px;border-radius:12px;flex-shrink:0;position:relative;
  background:
    radial-gradient(circle at 30% 25%, #fce4a0 0%, #d4a648 40%, #8a6418 90%);
  border:2px solid #0c0603;
  display:grid;place-items:center;
  box-shadow:
    0 4px 10px rgba(0,0,0,.6),
    inset 0 2px 2px rgba(255,240,200,.55),
    inset 0 -3px 6px rgba(80,50,10,.7);
  font-family:"Rye";color:#2a1606;font-size:26px;line-height:1;
  text-shadow:0 1px 0 rgba(255,230,160,.4);
}
.badge span{transform:translateY(-2px)}
.badge::after{content:"";position:absolute;inset:5px;border:1px solid rgba(40,20,5,.4);border-radius:7px}
.badge::before{
  content:"";position:absolute;inset:0;border-radius:12px;
  background:radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 40%);
}

.wordmark .name{
  font-family:"Ultra";font-size:28px;letter-spacing:.5px;color:#f4d684;
  text-shadow:
    0 1px 0 #6a4818,
    0 2px 0 #2c1c08,
    0 3px 0 #1a0f06,
    0 5px 8px rgba(0,0,0,.7);
  line-height:.95;
}
.wordmark .tag{font-size:10px;letter-spacing:3px;color:#a89472;text-transform:uppercase;margin-top:4px;font-weight:600}

nav.links{margin-left:auto;display:flex;gap:2px;flex-wrap:wrap}
nav.links a{
  font-family:"Zilla Slab";font-weight:700;font-size:12px;letter-spacing:1.3px;
  text-transform:uppercase;color:#a89472;padding:9px 11px;border-radius:4px;
  transition:.18s;position:relative;
}
nav.links a:hover{color:#f4d684;text-shadow:0 0 12px rgba(241,210,122,.4)}
nav.links a.active{
  color:#1a0f06;
  background:radial-gradient(circle at 30% 25%, #f4d684 0%, #b88a28 80%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.3), 0 1px 3px rgba(0,0,0,.5);
}
.menu-toggle{display:none;background:none;border:none;color:var(--gold-bright);font-size:22px;cursor:pointer;margin-left:auto}

/* ============ BUTTONS — leather with brass rivets ============ */
.btn, .btn-leather{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;
  font-family:"Zilla Slab";font-weight:700;letter-spacing:1.6px;text-transform:uppercase;font-size:12.5px;
  padding:13px 22px;border-radius:5px;transition:.18s;color:#1f1206;
  background:
    radial-gradient(circle at 30% 20%, #f7d989 0%, #d4a648 60%, #a07820 100%);
  border:2px solid #0c0603;
  box-shadow:
    0 5px 0 #4a3010,
    0 7px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,240,200,.55),
    inset 0 -2px 4px rgba(80,50,10,.4);
  text-shadow:0 1px 0 rgba(255,230,160,.5);
}
.btn:hover, .btn-leather:hover{transform:translateY(-1px);box-shadow:0 6px 0 #4a3010, 0 9px 16px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.55)}
.btn:active, .btn-leather:active{transform:translateY(3px);box-shadow:0 2px 0 #4a3010, 0 3px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,240,200,.55)}
.btn.ghost{
  background:
    var(--tex-leather),
    radial-gradient(120% 90% at 50% 30%, #4a3220, #2a1a0c);
  background-blend-mode: multiply, normal;
  color:#f1d27a;
  box-shadow:
    0 5px 0 #0c0603,
    0 7px 14px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(180,138,48,.2),
    inset 0 0 0 1px rgba(180,138,48,.15);
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}
.btn.sm{padding:9px 16px;font-size:11px}

/* ============ HERO ============ */
.hero{position:relative;padding:72px 0 50px;overflow:hidden}
.hero::before{
  content:"";position:absolute;top:-150px;right:10%;width:720px;height:720px;
  background:radial-gradient(circle, rgba(255,225,150,.28) 0%, rgba(255,210,120,.08) 38%, transparent 65%);
  pointer-events:none;animation:lamp 7s ease-in-out infinite;
}
@keyframes lamp{0%,100%{opacity:.95}45%{opacity:1}70%{opacity:.82}}

.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center;position:relative}
.hero h1{
  font-family:"Ultra";font-size:clamp(40px,5.8vw,76px);line-height:.95;
  text-transform:uppercase;color:var(--cream);
  text-shadow:
    0 1px 0 #2a1606,
    0 2px 0 #1a0f06,
    0 3px 0 #0d0703,
    0 6px 16px rgba(0,0,0,.7);
}
.hero h1 .hl{
  color:#f4d684;
  text-shadow:
    0 1px 0 #6a4818,
    0 2px 0 #2c1c08,
    0 3px 0 #1a0f06,
    0 6px 14px rgba(0,0,0,.7),
    0 0 30px rgba(244,200,120,.3);
}
.hero .sub{
  margin-top:20px;max-width:450px;color:#c4b08a;font-size:17.5px;
  font-style:italic;font-weight:500;
}
.hero .cta-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}

/* ============ CHAMPION PLAQUE — brass on dark wood ============ */
.champ{position:relative;display:grid;place-items:center;min-height:360px}
.champ .glow{
  position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,200,120,.35),transparent 65%);
  filter:blur(8px);animation:lamp 5s ease-in-out infinite;
}
.plaque{
  position:relative;text-align:center;padding:32px 36px 26px;border-radius:8px;
  background:
    var(--tex-wood),
    linear-gradient(180deg,#3a2515 0%,#1d1108 100%);
  background-blend-mode:multiply,normal;
  background-size:600px 240px,auto;
  border:3px solid #0a0503;
  box-shadow:
    0 22px 50px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,210,150,.1),
    inset 0 0 60px rgba(0,0,0,.45);
}
.plaque::before, .plaque::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #f7d989, #8a6418);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.6);
}
.plaque::before{top:8px;left:8px}
.plaque::after{top:8px;right:8px}
/* Bottom corner rivets via extra divs would be cleaner; doing via box-shadow drop screws */
.plaque .trophy{width:130px;height:130px;margin:0 auto 8px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(244,200,120,.2))}
.plaque .label{
  font-family:"Ultra";color:#f4d684;font-size:20px;letter-spacing:1.5px;line-height:1.1;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 4px rgba(0,0,0,.7);
  text-transform:uppercase;
}
.plaque .sub{
  font-family:"Zilla Slab";font-weight:700;letter-spacing:3.5px;font-size:10px;
  color:#a89472;text-transform:uppercase;margin-top:8px;
}

/* ============ PANELS — parchment with corner brackets ============ */
.content{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;padding:20px 0 14px}

.panel{
  position:relative;
  background:
    var(--tex-paper),
    linear-gradient(180deg,#241710 0%,#1a100a 100%);
  background-blend-mode:overlay,normal;
  border:2px solid #0a0503;border-radius:8px;overflow:hidden;
  box-shadow:
    0 18px 38px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,210,150,.06),
    inset 0 0 40px rgba(0,0,0,.4);
}
/* Corner brackets */
.panel::before, .panel::after{
  content:"";position:absolute;width:22px;height:22px;
  border:2px solid rgba(201,161,59,.55);
  pointer-events:none;
}
.panel::before{top:8px;left:8px;border-right:none;border-bottom:none}
.panel::after{bottom:8px;right:8px;border-left:none;border-top:none}

.panel-head{display:flex;align-items:center;justify-content:space-between;padding:18px 24px 12px;position:relative}
.panel-head h2{
  font-family:"Ultra";font-size:21px;letter-spacing:1px;color:#f4d684;text-transform:uppercase;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 5px rgba(0,0,0,.7);
}
.panel-head .via{
  font-family:"Zilla Slab";font-size:10px;letter-spacing:2px;color:#a89472;text-transform:uppercase;
  font-style:italic;
}
.panel-body{padding:0 12px}

/* ============ TABLE ============ */
table{width:100%;border-collapse:collapse;font-family:"Zilla Slab"}
thead th{
  font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:#a89472;
  text-align:right;padding:10px 10px;border-bottom:1px solid rgba(201,161,59,.25);font-weight:700;
}
thead th:first-child,tbody td:first-child{text-align:left;padding-left:14px}
thead th:nth-child(2),tbody td:nth-child(2){text-align:left}
tbody td{padding:13px 10px;text-align:right;font-size:14.5px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.04)}
tbody tr{transition:.15s}
tbody tr:hover{background:rgba(201,161,59,.07)}
tbody tr.me{
  background:linear-gradient(90deg,rgba(241,210,122,.12),rgba(241,210,122,.04));
  box-shadow:inset 3px 0 0 var(--team-accent,#f4d684);
}
tbody tr:last-child td{border-bottom:none}
.rank{
  display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #f7d989, #8a6418);
  color:#1f1206;font-weight:800;font-size:12px;margin-right:10px;vertical-align:middle;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5);
}
.team{display:inline-flex;align-items:center;gap:9px}
.team .av{width:28px;height:28px;border-radius:50%;background:#3a2515;border:1px solid rgba(201,161,59,.4);object-fit:cover;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.team .nm{font-weight:700}
.streak{font-weight:800;font-size:13px;letter-spacing:.5px;padding:4px 9px;border-radius:4px;display:inline-block;min-width:42px;text-align:center}
.s-w{color:#cfe3a6;background:rgba(122,155,69,.2);border:1px solid rgba(122,155,69,.5)}
.s-l{color:#f0b6a6;background:rgba(177,74,50,.2);border:1px solid rgba(177,74,50,.5)}
.s-t{color:#ddd0a8;background:rgba(154,138,106,.2);border:1px solid rgba(154,138,106,.5)}
.panel-foot{padding:16px 22px 20px;display:flex;justify-content:center}

.loading,.empty{padding:34px 20px;text-align:center;color:#a89472;font-size:12.5px;letter-spacing:2px;text-transform:uppercase;font-style:italic}
.err{padding:22px;color:#f0b6a6;font-size:13px;text-align:center}

/* ============ DRAMA NOTE — torn parchment ============ */
.drama{
  position:relative;border-radius:3px;padding:26px 28px 28px;color:#2a1d10;
  transform:rotate(-1.2deg);
  background:
    var(--tex-foxing),
    var(--tex-paper),
    radial-gradient(120% 130% at 30% 0%, #efddb2 0%, #d4bc8c 70%, #b89d6a 100%);
  background-blend-mode:multiply,multiply,normal;
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    inset 0 0 60px rgba(120,80,40,.35);
  -webkit-mask:radial-gradient(circle at 8px 8px, transparent 0, transparent 3.4px, #000 3.7px) -8px -8px/16px 16px;
          mask:radial-gradient(circle at 8px 8px, transparent 0, transparent 3.4px, #000 3.7px) -8px -8px/16px 16px;
}
.drama .kicker{font-family:"Zilla Slab";font-weight:800;letter-spacing:2.2px;font-size:10.5px;text-transform:uppercase;color:#7a5520}
.drama h3{font-family:"Ultra";font-size:26px;margin:8px 0 2px;color:#1f1206;line-height:1;text-shadow:0 1px 0 rgba(255,255,255,.3)}
.drama .quote{font-family:"Caveat";font-size:25px;font-weight:700;color:#5a3d18;margin-bottom:10px;line-height:1.2}
.drama p{font-family:"Caveat";font-size:22px;line-height:1.4;color:#3a2a16}
.drama .btn{margin-top:18px;transform:rotate(0)}
.pin{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);width:22px;height:22px;border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%,#e85530 0%,#9c2818 65%,#5a1408 100%);
  box-shadow:
    0 4px 6px rgba(0,0,0,.6),
    inset 0 1px 1px rgba(255,200,180,.5),
    inset 0 -2px 3px rgba(0,0,0,.4);
}

/* ============ QUICK LINKS — wood signs ============ */
.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:32px 0 72px}
.qcard{
  text-align:center;padding:28px 16px 24px;border-radius:6px;cursor:pointer;transition:.2s;
  border:3px solid #0a0503;position:relative;
  background:
    var(--tex-wood),
    linear-gradient(180deg,#3a2515 0%,#1d1108 100%);
  background-blend-mode:multiply,normal;
  background-size:600px 240px,auto;
  box-shadow:
    0 12px 24px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,210,150,.08),
    inset 0 0 40px rgba(0,0,0,.35);
}
.qcard::before, .qcard::after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #d4a648, #6a4818);
  top:8px;
}
.qcard::before{left:8px}
.qcard::after{right:8px}
.qcard:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:0 18px 32px rgba(0,0,0,.6)}
.qcard:hover .qi{color:var(--gold-bright);transform:scale(1.08)}
.qi{width:52px;height:52px;margin:0 auto 14px;color:var(--gold);transition:.2s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.qcard .t{
  font-family:"Ultra";font-size:18px;letter-spacing:1px;color:#f4d684;text-transform:uppercase;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 4px rgba(0,0,0,.7);
}
.qcard .d{font-size:10px;letter-spacing:1.8px;color:#a89472;text-transform:uppercase;margin-top:6px;font-weight:600}

/* ============ STUB PAGE LAYOUT ============ */
.page{padding:54px 0 84px}
.page-head{text-align:center;margin-bottom:40px}
.page-head h1{
  font-family:"Ultra";font-size:clamp(38px,5.4vw,64px);color:var(--cream);text-transform:uppercase;
  text-shadow:0 1px 0 #2a1606, 0 2px 0 #1a0f06, 0 3px 0 #0d0703, 0 6px 14px rgba(0,0,0,.7);
  line-height:1;
}
.page-head h1 .hl{
  color:#f4d684;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 0 #1a0f06, 0 6px 14px rgba(0,0,0,.7);
}
.page-head .lead{margin-top:16px;color:#c4b08a;font-size:17px;max-width:660px;margin-left:auto;margin-right:auto;font-style:italic}

.section{margin-bottom:44px}
.section h2{
  font-family:"Ultra";font-size:22px;color:#f4d684;text-transform:uppercase;letter-spacing:1px;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 4px rgba(0,0,0,.7);
  margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid rgba(201,161,59,.25);
  position:relative;
}
.section h2::after{
  content:"";position:absolute;left:0;bottom:-1px;width:80px;height:2px;
  background:linear-gradient(90deg,#f4d684,transparent);
}
.section h3{font-family:"Ultra";font-size:16px;color:var(--cream);text-transform:uppercase;letter-spacing:1px;margin:18px 0 8px}
.section p{color:#c4b08a;margin-bottom:12px;max-width:780px}
.section ul{color:#c4b08a;padding-left:22px;margin-bottom:12px;max-width:780px}
.section ul li{margin-bottom:6px}

.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.mini{
  padding:20px 22px;border-radius:6px;border:2px solid #0a0503;
  background:
    var(--tex-paper),
    linear-gradient(180deg,#2a1a10 0%,#1a100a 100%);
  background-blend-mode:overlay,normal;
  box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,210,150,.06),
    inset 0 0 30px rgba(0,0,0,.4);
}
.mini h4{
  font-family:"Ultra";font-size:14px;color:#f4d684;text-transform:uppercase;letter-spacing:.8px;
  margin-bottom:8px;
  text-shadow:0 1px 0 #6a4818, 0 2px 3px rgba(0,0,0,.6);
}
.mini p{font-size:13.5px;color:#c4b08a;margin:0;line-height:1.5}
.mini .meta{font-size:10px;letter-spacing:1.8px;color:#8a7456;text-transform:uppercase;margin-top:10px;font-weight:600}

.stub{
  text-align:center;padding:60px 24px;border-radius:6px;
  border:2px dashed rgba(201,161,59,.3);
  background:rgba(36,23,16,.5);color:#a89472;max-width:700px;margin:0 auto;
}
.stub h3{font-family:"Ultra";color:#f4d684;font-size:18px;text-transform:uppercase;margin-bottom:10px;text-shadow:0 1px 0 #6a4818}
.stub p{font-size:14px;line-height:1.6}
.stub code{background:rgba(0,0,0,.4);padding:1px 6px;border-radius:3px;color:#f1d27a;font-family:monospace;font-size:12.5px}

/* ============ FOOTER ============ */
footer{
  margin-top:auto;border-top:4px solid #0a0503;padding:26px 22px;text-align:center;
  color:#a89472;font-size:12px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;
  position:relative;
}
footer::before{
  content:"";position:absolute;left:0;right:0;top:-4px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(241,210,122,.4),transparent);
}
footer .built{margin-top:6px;font-size:10px;opacity:.7;font-style:italic;letter-spacing:1.5px;text-transform:none}
footer a{color:#f1d27a}

/* ============ reveal animation ============ */
.reveal{opacity:0;transform:translateY(22px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.32s}
.d4{animation-delay:.46s}.d5{animation-delay:.6s}.d6{animation-delay:.74s}

/* ============ AUTH GATE — saloon door + team picker ============ */
#auth-gate{
  position:fixed;inset:0;z-index:1000;
  font-family:"Zilla Slab",serif;
  display:grid;place-items:center;
  overflow:auto;padding:20px 0;
}
#auth-gate .auth-bg{
  position:fixed;inset:0;z-index:0;
  background:
    var(--tex-wood),
    radial-gradient(60% 45% at 50% 25%, rgba(244,200,120,.16) 0%, transparent 65%),
    linear-gradient(180deg,#2a1a10 0%,#0a0503 100%);
  background-blend-mode:multiply,normal,normal;
  background-size:600px 240px,auto,auto;
}
#auth-gate .auth-bg::after{
  content:"";position:absolute;inset:0;background:var(--tex-fine-grain);opacity:.2;mix-blend-mode:overlay;
}
#auth-gate.unlocking{opacity:0;transform:scale(.95);transition:.35s}
#auth-gate .hidden{display:none !important}

.auth-screen{
  position:relative;z-index:1;width:min(880px,94vw);padding:24px 18px;
  display:flex;flex-direction:column;align-items:center;
}
.auth-header{text-align:center;margin-bottom:24px}
.auth-header .badge{width:68px;height:68px;font-size:32px;margin:0 auto 14px;border-radius:14px}
.auth-header h1{
  font-family:"Ultra";color:#f4d684;font-size:34px;text-transform:uppercase;
  text-shadow:0 1px 0 #6a4818, 0 2px 0 #2c1c08, 0 3px 0 #1a0f06, 0 6px 12px rgba(0,0,0,.7);
  margin-bottom:8px;line-height:1;
}
.auth-header .tag{font-size:10.5px;letter-spacing:3px;color:#a89472;text-transform:uppercase;font-weight:700}
.back-link{
  background:none;border:none;color:#a89472;cursor:pointer;font-family:"Zilla Slab";
  font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;margin-bottom:14px;
}
.back-link:hover{color:#f4d684}

.team-picker{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;width:100%;
}
.team-card{
  background:
    var(--tex-paper),
    linear-gradient(180deg,#2a1a10 0%,#180e07 100%);
  background-blend-mode:overlay,normal;
  border:2px solid #0a0503;border-radius:6px;
  padding:14px 10px;cursor:pointer;transition:.18s;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,210,150,.06);
}
.team-card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.65),0 0 0 1px rgba(241,210,122,.5),inset 0 1px 0 rgba(255,210,150,.1);
}
.tc-av-wrap{
  width:54px;height:54px;border-radius:50%;
  background:#3a2515;border:2px solid rgba(201,161,59,.4);
  overflow:hidden;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.tc-av-wrap img{width:100%;height:100%;object-fit:cover}
.tc-name{
  font-family:"Ultra";font-size:11.5px;color:#f4d684;text-transform:uppercase;letter-spacing:.5px;
  line-height:1.2;
  text-shadow:0 1px 0 #6a4818, 0 2px 3px rgba(0,0,0,.6);
}
.tc-owner{font-size:9.5px;letter-spacing:1.5px;color:#a89472;text-transform:uppercase;font-weight:700}

.pw-form{
  width:min(420px,92vw);
  background:
    var(--tex-paper),
    linear-gradient(180deg,#241710 0%,#1a100a 100%);
  background-blend-mode:overlay,normal;
  border:3px solid #0a0503;border-radius:8px;
  padding:28px 24px 24px;
  box-shadow:0 22px 50px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,210,150,.06);
}
.pw-form input{
  width:100%;padding:14px;font-family:"Zilla Slab";font-size:16px;font-weight:600;
  background:#0e0905;color:#f4d684;border:2px solid #0a0503;border-radius:5px;
  letter-spacing:3px;text-align:center;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.7);
}
.pw-form input:focus{outline:none;border-color:var(--team-accent,#f4d684);box-shadow:inset 0 2px 4px rgba(0,0,0,.7),0 0 0 3px rgba(241,210,122,.2)}
.pw-form .err-msg{color:#f0b6a6;font-size:11px;letter-spacing:2px;text-transform:uppercase;height:16px;margin:10px 0 4px;font-weight:700;text-align:center}
.pw-form .btn-leather{width:100%;justify-content:center;margin-top:6px}

.auth-foot{margin-top:20px;font-size:11px;letter-spacing:1.5px;color:#8a7456;text-transform:uppercase;font-weight:600}
.auth-foot a{color:#f1d27a;text-decoration:underline}

/* ============ SPREADSHEET / SORTABLE TABLES ============ */
table.sheet{
  width:100%;border-collapse:separate;border-spacing:0;
  font-family:"Zilla Slab","Segoe UI",system-ui,sans-serif;
  background:#150e08;
  border:1px solid #0a0503;border-radius:4px;overflow:hidden;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
table.sheet thead{
  background:linear-gradient(180deg,#3a2515 0%,#28190e 100%);
  position:sticky;top:0;z-index:2;
}
table.sheet thead th{
  font-family:"Zilla Slab",sans-serif;font-weight:700;
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:#a89472;
  padding:9px 10px;text-align:right;
  border-bottom:2px solid #0a0503;border-right:1px solid rgba(0,0,0,.35);
  white-space:nowrap;user-select:none;
  background:linear-gradient(180deg,#3a2515,#28190e);
}
table.sheet thead th:first-child,
table.sheet tbody td:first-child{text-align:left;padding-left:14px}
table.sheet thead th:last-child{border-right:none}
table.sheet thead th.sortable{cursor:pointer;transition:color .15s}
table.sheet thead th.sortable:hover{color:#f4d684}
table.sheet thead th.sortable::after{
  content:"";display:inline-block;width:0;height:0;margin-left:6px;vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid rgba(168,148,114,.3);
}
table.sheet thead th[data-dir="asc"]::after{
  border-top:none;border-bottom:5px solid #f4d684;
}
table.sheet thead th[data-dir="desc"]::after{
  border-top:5px solid #f4d684;
}
table.sheet tbody td{
  font-size:13.5px;font-weight:500;color:#dccca0;
  padding:8px 10px;text-align:right;
  border-bottom:1px solid rgba(255,255,255,.04);
  border-right:1px solid rgba(255,255,255,.02);
  white-space:nowrap;
}
table.sheet tbody td:last-child{border-right:none}
table.sheet tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
table.sheet tbody tr:hover{background:rgba(241,210,122,.07)}
table.sheet tbody tr.me{
  background:linear-gradient(90deg,rgba(241,210,122,.14),rgba(241,210,122,.05));
  box-shadow:inset 3px 0 0 var(--team-accent,#f4d684);
}
table.sheet tbody tr.me:nth-child(even){background:linear-gradient(90deg,rgba(241,210,122,.16),rgba(241,210,122,.05))}
table.sheet tbody tr:last-child td{border-bottom:none}
table.sheet a{color:#f1d27a}
table.sheet a:hover{text-decoration:underline}
table.sheet td.num,table.sheet th.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet td.pos-QB{color:#e8b3a0}
table.sheet td.pos-RB{color:#a3c870}
table.sheet td.pos-WR{color:#9ad0d6}
table.sheet td.pos-TE{color:#d4a84a}
table.sheet td.pos-K,table.sheet td.pos-DEF{color:#a89472}
table.sheet td.up{color:#a3c870;font-weight:700}
table.sheet td.dn{color:#d49080;font-weight:700}

.sheet-wrap{
  background:linear-gradient(180deg,#241710 0%,#1a100a 100%);
  border:2px solid #0a0503;border-radius:6px;overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,210,150,.05);
}
.sheet-wrap .sheet-head{
  padding:14px 18px 10px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid rgba(201,161,59,.18);
}
.sheet-wrap .sheet-head h2{
  font-family:"Ultra";font-size:18px;letter-spacing:.5px;color:#f4d684;text-transform:uppercase;
  text-shadow:0 1px 0 #6a4818, 0 2px 4px rgba(0,0,0,.6);
}
.sheet-wrap .sheet-head .meta{font-size:10px;letter-spacing:1.5px;color:#a89472;text-transform:uppercase;font-weight:700}
.sheet-wrap .sheet-foot{padding:10px 16px;background:rgba(0,0,0,.25);font-size:10.5px;color:#a89472;letter-spacing:1.4px;text-transform:uppercase;font-weight:600;display:flex;justify-content:space-between}
.sheet-wrap table.sheet{border:none;border-radius:0;background:transparent}

/* Wide tables scroll horizontally instead of being clipped (wrapper added by
   sheet.js). Transparent on desktop so sticky headers work + tables fill width. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(min-width:901px){ .table-scroll{overflow:visible} }

.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar label{font-size:10.5px;letter-spacing:1.5px;color:#a89472;text-transform:uppercase;font-weight:700}
.toolbar select,.toolbar input[type=search]{
  background:#0e0905;color:#f4d684;border:2px solid #0a0503;border-radius:4px;
  padding:7px 11px;font-family:"Zilla Slab";font-weight:600;font-size:13px;letter-spacing:.5px;
  cursor:pointer;
}
.toolbar select:focus,.toolbar input:focus{outline:none;border-color:#c9a13b}
.toolbar input[type=search]{cursor:text;min-width:200px;letter-spacing:1px}
.toolbar .stat{font-size:10.5px;color:#a89472;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;margin-left:auto}
.toolbar .stat strong{color:#f4d684;font-family:"Ultra";font-size:13px;letter-spacing:1px;margin:0 4px}

/* ============================================================
   OLD WEST OVERLAY — wanted posters, tin stars, branding iron
   ============================================================ */

/* Tin star — sheriff's badge */
.tin-star{
  --star-size: 200px;
  width: var(--star-size); height: var(--star-size);
  position:relative;display:grid;place-items:center;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.7));
}
.tin-star svg{width:100%;height:100%}
.tin-star .face{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:#1f1206;
}
/* Constrain the text to the star's centre disc (r=31 → 62% dia) so nothing
   spills onto the points. The inner box is sized to the disc's inscribed
   square; the name auto-shrinks in JS to whatever fits. */
.tin-star .face .face-inner{
  width:50%;max-height:52%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
}
.tin-star .face .lbl{
  font-family:"Rye",serif;font-size:8px;letter-spacing:1px;
  text-transform:uppercase;color:#3a200a;line-height:1.1;
}
.tin-star .face .who{
  font-family:"Sancreek","Rye",serif;font-size:15px;line-height:1.0;color:#1a0d04;
  text-transform:uppercase;letter-spacing:.3px;overflow-wrap:break-word;
  text-shadow:0 1px 0 rgba(255,255,255,.25);max-width:100%;
}
.tin-star .face .role{
  font-family:"Rye",serif;font-size:7.5px;letter-spacing:1px;
  text-transform:uppercase;color:#5a3818;line-height:1.1;
}

/* Wanted poster — plain parchment, matches Sheriff's Book panel */
.wanted{
  position:relative;padding:26px 24px 28px;border-radius:4px;
  color:#1a0d04;text-align:center;
  background:
    var(--tex-paper),
    radial-gradient(120% 80% at 50% 0%, #f1dcaa 0%, #d6bb84 70%, #b29168 100%);
  background-blend-mode:multiply,normal;
  border:2px solid #3a200a;
  box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 0 60px rgba(120,80,30,.35);
  transform:rotate(var(--tilt, -.5deg));
}
.wanted::before{ /* corner tape */
  content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:60px;height:18px;background:rgba(230,210,160,.6);border:1px solid rgba(120,80,30,.3);
  box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.wanted .top{
  font-family:"Rye",serif;font-size:11px;letter-spacing:5px;color:#7a3a14;
  text-transform:uppercase;margin-bottom:4px;
}
.wanted h2{
  font-family:"Sancreek","Rye",serif;font-size:clamp(34px,4vw,52px);line-height:.95;color:#1a0d04;
  text-transform:uppercase;letter-spacing:1px;margin:2px 0 8px;
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}
.wanted .face-frame{
  margin:12px auto 14px;width:120px;height:120px;border-radius:50%;
  border:4px double #1a0d04;background:#3a2515;overflow:hidden;
  box-shadow:inset 0 0 8px rgba(0,0,0,.5);
  display:grid;place-items:center;
}
.wanted .face-frame img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) saturate(.7) contrast(1.05)}
.wanted .charge{
  font-family:"IM Fell English SC","Rye",serif;font-size:14px;letter-spacing:1px;
  color:#1a0d04;margin:8px auto;max-width:90%;font-weight:700;text-transform:uppercase;
}
.wanted .reward{
  font-family:"Rye",serif;font-size:12px;letter-spacing:2.5px;color:#7a3a14;
  text-transform:uppercase;margin-top:14px;padding-top:14px;border-top:1px solid rgba(58,32,10,.35);
}
.wanted .reward strong{font-family:"Sancreek",serif;font-size:18px;color:#1a0d04;letter-spacing:1px;display:block;margin-top:4px}
.wanted .net{
  font-family:"Sancreek",serif;font-size:26px;color:#9c1d12;line-height:1;margin-top:4px;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
}
.wanted em, .wanted i{color:#1a0d04;font-style:italic}

/* Wooden sign (signboard) */
.signboard{
  position:relative;padding:24px 18px 22px;text-align:center;
  background:
    var(--tex-wood),
    linear-gradient(180deg,#5a3818 0%,#3a2515 50%,#241710 100%);
  background-blend-mode:multiply,normal;
  background-size:600px 240px,auto;
  border:3px solid #0a0503;border-radius:4px;
  box-shadow:
    0 14px 28px rgba(0,0,0,.6),
    inset 0 1px 0 rgba(255,210,150,.08),
    inset 0 0 40px rgba(0,0,0,.4);
  transform:rotate(var(--tilt,-.5deg));
}
.signboard::before, .signboard::after{ /* rope holes */
  content:"";position:absolute;top:-6px;width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#0a0503,#1a0d04);
  border:2px solid #2a1a0a;
}
.signboard::before{left:18%}
.signboard::after{right:18%}
.signboard svg{display:block;margin:0 auto 10px}
.signboard .t{
  font-family:"Sancreek","Rye",serif;font-size:22px;color:#f4d684;letter-spacing:1.2px;
  text-transform:uppercase;line-height:1;
  text-shadow:0 1px 0 #5a3818, 0 2px 0 #2c1c08, 0 3px 5px rgba(0,0,0,.7);
}
.signboard .d{
  font-family:"Rye",serif;font-size:10px;letter-spacing:2.5px;color:#c4b08a;
  text-transform:uppercase;margin-top:8px;font-weight:600;
}
.signboard:hover{transform:translateY(-3px) rotate(var(--tilt,-.5deg))}

/* Rope divider — section break */
.rope{
  height:18px;margin:30px 0;position:relative;
  background:
    repeating-linear-gradient(90deg,
      #2a1a08 0 6px, #4a2e14 6px 12px, #2a1a08 12px 14px, #6a4424 14px 18px, #2a1a08 18px 22px);
  border-top:1px solid rgba(0,0,0,.5);
  border-bottom:1px solid rgba(0,0,0,.5);
  box-shadow:0 4px 8px rgba(0,0,0,.4);
  border-radius:9px;
}
.rope::before,.rope::after{
  content:"";position:absolute;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#f7d989,#8a6418);
  box-shadow:0 2px 4px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,230,160,.4);
}
.rope::before{left:-6px}
.rope::after{right:-6px}

/* Old west section header */
.oldwest-head{
  text-align:center;margin:30px 0 26px;position:relative;
}
.oldwest-head h2{
  font-family:"Sancreek","Rye",serif;font-size:clamp(28px,3.8vw,44px);line-height:1;
  color:#f4d684;text-transform:uppercase;letter-spacing:2px;
  text-shadow:
    0 1px 0 #5a3818, 0 2px 0 #2c1c08, 0 3px 0 #1a0f06, 0 6px 14px rgba(0,0,0,.7);
}
.oldwest-head .sub{
  font-family:"Rye",serif;font-size:11px;letter-spacing:6px;color:#a89472;
  text-transform:uppercase;margin-top:8px;
}
.oldwest-head .sub::before,.oldwest-head .sub::after{
  content:"—";margin:0 12px;color:#7a5520;
}

/* Sheriff's tally / standings inside ledger frame */
.ledger-frame{
  background:
    var(--tex-paper),
    radial-gradient(120% 80% at 50% 0%, #f1dcaa 0%, #d6bb84 70%, #b29168 100%);
  background-blend-mode:multiply,normal;
  border:2px solid #3a200a;border-radius:4px;padding:18px 20px;
  color:#2a1a08;position:relative;
  box-shadow:0 14px 30px rgba(0,0,0,.55),inset 0 0 60px rgba(120,80,30,.35);
}
.ledger-frame::after{
  content:"";position:absolute;inset:6px;border:1px solid rgba(58,32,10,.35);border-radius:3px;pointer-events:none;
}
.ledger-frame h2{
  font-family:"Sancreek","Rye",serif;font-size:26px;color:#1a0d04;letter-spacing:1.5px;
  text-transform:uppercase;text-align:center;border-bottom:1px solid rgba(58,32,10,.35);padding-bottom:10px;margin-bottom:12px;
}
.ledger-frame .credit{font-family:"Rye",serif;font-size:10px;letter-spacing:2.5px;color:#7a5520;text-align:center;text-transform:uppercase;margin-top:10px;font-weight:700}
.ledger-frame table{width:100%;border-collapse:collapse;font-family:"IM Fell English","Zilla Slab",serif;font-feature-settings:"tnum" 1;color:#1a0d04}
.ledger-frame thead th{
  font-family:"Rye",serif;font-size:10px;letter-spacing:2px;color:#5a3818;text-transform:uppercase;
  text-align:right;padding:6px 8px;border-bottom:2px solid rgba(58,32,10,.5);font-weight:700;
}
.ledger-frame thead th:first-child,
.ledger-frame tbody td:first-child{text-align:left}
.ledger-frame tbody td{padding:8px;text-align:right;font-size:15px;color:#1a0d04;border-bottom:1px solid rgba(58,32,10,.18);font-weight:600}
.ledger-frame tbody td,
.ledger-frame tbody td a,
.ledger-frame tbody td span{color:#1a0d04}
.ledger-frame tbody tr:last-child td{border-bottom:none}
.ledger-frame tbody tr.me{background:rgba(154,29,18,.1);box-shadow:inset 3px 0 0 #9c1d12}
.ledger-frame tbody tr.me td{color:#1a0d04}
.ledger-frame .rank{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:#1a0d04;color:#f1dcaa !important;font-family:"Rye",serif;font-size:11px;
  margin-right:8px;vertical-align:middle;
}

/* Bulletin notice — town announcement */
.bulletin{
  position:relative;padding:18px 22px 22px;border-radius:2px;
  color:#1a0d04;font-family:"IM Fell English","Zilla Slab",serif;
  background:
    var(--tex-foxing),
    var(--tex-paper),
    radial-gradient(120% 100% at 50% 0%, #e8d199 0%, #c89f60 80%);
  background-blend-mode:multiply,multiply,normal;
  border:1px solid rgba(58,32,10,.35);
  box-shadow:0 12px 22px rgba(0,0,0,.5),inset 0 0 50px rgba(120,80,30,.35);
  transform:rotate(.6deg);
}
.bulletin .stamp{
  position:absolute;top:14px;right:14px;width:74px;height:74px;border:3px solid #9c1d12;border-radius:50%;
  color:#9c1d12;font-family:"Rye",serif;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;
  display:grid;place-items:center;line-height:1.1;text-align:center;padding:8px;
  transform:rotate(-12deg);opacity:.78;
}
.bulletin .kicker{font-family:"Rye",serif;font-size:10px;letter-spacing:3px;color:#7a3a14;text-transform:uppercase;margin-bottom:4px;font-weight:700}
.bulletin h3{font-family:"Sancreek","Rye",serif;font-size:26px;color:#1a0d04;letter-spacing:1px;text-transform:uppercase;line-height:1;margin-bottom:8px}
.bulletin .quote{font-family:"Caveat",cursive;font-size:21px;color:#5a3818;line-height:1.2;margin-bottom:8px}
.bulletin p{font-family:"IM Fell English",serif;font-size:15px;color:#3a200a;line-height:1.5}
.bulletin .signoff{font-family:"Caveat",cursive;font-size:18px;color:#7a3a14;margin-top:12px;text-align:right;font-weight:700}

/* The "Most Wanted" board */
.wanted-board{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;
}
.wanted-board .wanted:nth-child(odd){--tilt: -1.5deg}
.wanted-board .wanted:nth-child(even){--tilt: 1.5deg}
.wanted-board .wanted:nth-child(3n){--tilt: -.5deg}

/* Signpost grid — trail heads */
.signpost-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0}
.signpost-grid .signboard:nth-child(odd){--tilt: -.8deg}
.signpost-grid .signboard:nth-child(even){--tilt: 1deg}
@media(max-width:880px){.signpost-grid{grid-template-columns:repeat(2,1fr)}}

/* Brand badge override — make it a tin star feel */
.badge.star{
  background:
    radial-gradient(circle at 30% 25%, #fce4a0 0%, #d4a648 40%, #8a6418 90%);
  clip-path: polygon(
    50% 0%, 60% 30%, 95% 30%, 67% 50%, 80% 90%, 50% 65%,
    20% 90%, 33% 50%, 5% 30%, 40% 30%
  );
  border:none;border-radius:0;
}

/* ============ TABS — old west wooden bar ============ */
.tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px;border-radius:6px;
  background:
    var(--tex-wood),
    linear-gradient(180deg,#3a2515,#1d1108);
  background-blend-mode:multiply,normal;
  background-size:600px 240px,auto;
  border:2px solid #0a0503;
  box-shadow:0 8px 18px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,210,150,.06);
  position:sticky;top:74px;z-index:30;
  margin-bottom:24px;
}
.tab{
  font-family:"Rye",serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;
  background:transparent;color:#a89472;border:none;cursor:pointer;
  padding:10px 16px;border-radius:4px;transition:.18s;
  display:flex;align-items:center;gap:8px;
}
.tab:hover{color:#f4d684;background:rgba(241,210,122,.08)}
.tab.active{
  color:#1a0d04;
  background:radial-gradient(circle at 30% 25%, #f7d989 0%, #c89a3a 80%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.5);
  text-shadow:0 1px 0 rgba(255,255,255,.4);
}
.tab-panels > .tab-panel{display:none}
.tab-panels > .tab-panel.active{display:block;animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Hero stat strip */
.stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin-bottom:26px;
}
.stat-strip .cell{
  padding:18px 18px;border-radius:6px;border:2px solid #0a0503;text-align:center;
  background:
    var(--tex-paper),
    linear-gradient(180deg,#2a1a10,#1a100a);
  background-blend-mode:overlay,normal;
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,150,.06);
}
.stat-strip .cell .lbl{font-family:"Rye",serif;font-size:9.5px;letter-spacing:2.5px;color:#a89472;text-transform:uppercase;font-weight:700}
.stat-strip .cell .v{font-family:"Sancreek",serif;font-size:28px;color:#f4d684;line-height:1.1;margin-top:6px;text-shadow:0 1px 0 #5a3818, 0 2px 4px rgba(0,0,0,.6)}
.stat-strip .cell .sub{font-size:11px;color:#a89472;margin-top:4px;font-family:"Zilla Slab"}

/* Champion card (Hall of Fame) */
.champ-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.champ-card{
  position:relative;text-align:center;padding:26px 22px 22px;border-radius:8px;
  border:3px solid #0a0503;
  background:
    var(--tex-wood),
    linear-gradient(180deg,#3a2515 0%,#1d1108 100%);
  background-blend-mode:multiply,normal;
  background-size:600px 240px,auto;
  box-shadow:0 14px 30px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,210,150,.08),inset 0 0 50px rgba(0,0,0,.4);
}
.champ-card .yr{font-family:"Rye",serif;font-size:13px;letter-spacing:4px;color:#c89a3a;text-transform:uppercase;margin-bottom:8px}
.champ-card .av{width:84px;height:84px;border-radius:50%;border:3px solid #f4d684;margin:8px auto 12px;background:#1a0d04;overflow:hidden;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.6)}
.champ-card h3{font-family:"Sancreek","Rye",serif;font-size:22px;color:#f4d684;line-height:1.1;text-transform:uppercase;letter-spacing:1px;text-shadow:0 1px 0 #5a3818, 0 2px 4px rgba(0,0,0,.7);margin-bottom:4px}
.champ-card .owner{font-family:"Rye",serif;font-size:10.5px;letter-spacing:2.5px;color:#a89472;text-transform:uppercase;margin-bottom:14px}
.champ-card .meta{font-family:"IM Fell English",serif;font-size:13.5px;color:#c4b08a;line-height:1.4}
.champ-card .meta strong{color:#f4d684}

/* ============ BETTING / KTC / TRADES specific ============ */
.bet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.bet-card{
  position:relative;
  background:
    var(--tex-paper),
    linear-gradient(180deg,#2a1a10 0%,#1a100a 100%);
  background-blend-mode:overlay,normal;
  border:2px solid #0a0503;border-radius:6px;
  padding:18px 20px;
  box-shadow:0 10px 22px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,150,.06);
}
.bet-card .player{font-family:"Ultra";color:#f4d684;font-size:16px;text-transform:uppercase;margin-bottom:4px;text-shadow:0 1px 0 #6a4818}
.bet-card .matchup{font-size:11px;color:#a89472;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;font-weight:600}
.bet-card .props{display:flex;flex-direction:column;gap:8px}
.bet-card .prop{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid rgba(201,161,59,.15)}
.bet-card .prop-label{font-size:13px;color:#c4b08a}
.bet-card .prop-line{font-family:"Ultra";color:#f4d684;font-size:15px}
.bet-card .pff{
  display:inline-block;background:rgba(241,210,122,.1);color:#f4d684;border:1px solid rgba(241,210,122,.3);
  font-size:10px;padding:2px 8px;border-radius:3px;letter-spacing:1px;text-transform:uppercase;font-weight:700;margin-left:8px;
}
.pick{
  color:var(--win);font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:1.5px;
  background:rgba(122,155,69,.15);border:1px solid rgba(122,155,69,.4);padding:3px 8px;border-radius:3px;
}
.pick.fade{color:var(--loss);background:rgba(177,74,50,.15);border-color:rgba(177,74,50,.4)}

.trade-card{
  background:
    var(--tex-paper),
    linear-gradient(180deg,#241710 0%,#1a100a 100%);
  background-blend-mode:overlay,normal;
  border:2px solid #0a0503;border-radius:6px;
  padding:18px 22px;margin-bottom:14px;
  box-shadow:0 8px 18px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,150,.06);
}
.trade-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.trade-head .when{font-size:11px;color:#a89472;letter-spacing:1.5px;text-transform:uppercase;font-weight:700}
.trade-head .week{font-family:"Ultra";color:#f4d684;font-size:13px}
.trade-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}
.trade-side h4{font-family:"Ultra";color:#f4d684;font-size:13px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(201,161,59,.25)}
.ti-group{margin-bottom:10px}
.ti-head{
  font-family:"Zilla Slab";font-weight:800;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;
  display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;padding:2px 0;
}
.ti-head.got{color:#a3c870}
.ti-head.gave{color:#d49080}
.ti-head .ti-sum{font-family:"Ultra";font-size:13px;letter-spacing:.5px;color:#f4d684}
.trade-side ul{list-style:none;padding:0;margin:0;color:#c4b08a;font-size:13px}
.trade-side ul li{padding:4px 0;border-bottom:1px solid rgba(201,161,59,.08);display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.trade-side .ti-label{flex:1;min-width:0}
.trade-side .ti-val{font-family:"Ultra";font-size:12px;color:#a89472;letter-spacing:.5px;flex-shrink:0}
.trade-arrow{font-family:"Ultra";color:#f4d684;font-size:24px;align-self:center;text-shadow:0 1px 0 #6a4818}

.trade-net{
  margin-top:10px;padding:8px 12px;border-radius:4px;text-align:center;
  font-family:"Ultra";font-size:14px;letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid;
}
.trade-net.net-win{
  color:#cfe3a6;background:rgba(122,155,69,.18);border-color:rgba(122,155,69,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.trade-net.net-loss{
  color:#f0b6a6;background:rgba(177,74,50,.18);border-color:rgba(177,74,50,.5);
  text-shadow:0 1px 0 rgba(0,0,0,.3);
}
.trade-net.net-even{
  color:#ddd0a8;background:rgba(154,138,106,.15);border-color:rgba(154,138,106,.4);
}

/* Asset picker — checkbox list of a roster's players + picks (trade analyzer) */
.asset-list{
  max-height:340px;overflow-y:auto;border:2px solid #0a0503;border-radius:5px;
  background:linear-gradient(180deg,#1a100a,#120b06);padding:4px;
}
.asset-list label{
  display:flex;align-items:baseline;gap:8px;padding:5px 8px;border-radius:3px;
  cursor:pointer;font-size:13px;color:#c4b08a;border-bottom:1px solid rgba(201,161,59,.08);
}
.asset-list label:hover{background:rgba(241,210,122,.07)}
.asset-list label.on{background:rgba(241,210,122,.13);color:#f0e2c0}
.asset-list input{accent-color:#c9a13b;flex-shrink:0}
.asset-list .a-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.asset-list .a-pos{
  font-size:9.5px;letter-spacing:1px;font-weight:800;color:#a89472;text-transform:uppercase;flex-shrink:0;
}
.asset-list .a-val{font-family:"Ultra";font-size:11.5px;color:#a89472;letter-spacing:.5px;flex-shrink:0}
.asset-list label.on .a-val{color:#f4d684}
.asset-list .a-empty{padding:14px;text-align:center;color:#a89472;font-size:12px;font-style:italic}

.ktc-table .nm{font-weight:700}
.ktc-table .val{color:#f4d684;font-family:"Ultra";font-size:16px}

/* ============================================================
   THE BALLOT BOX — member polls (home page)
   ============================================================ */
.ballot-banner{
  font-family:"Zilla Slab";font-size:12px;color:#e0c88a;letter-spacing:.4px;line-height:1.5;
  background:rgba(180,138,48,.12);border:1px solid rgba(180,138,48,.4);border-radius:5px;
  padding:10px 14px;margin-bottom:16px;
}
.ballot-banner code{background:rgba(0,0,0,.35);padding:1px 5px;border-radius:3px;color:#f4d684}
.ballot-create{
  padding:18px 20px;border-radius:6px;margin-bottom:20px;border:2px solid #0a0503;
  background:var(--tex-leather),linear-gradient(180deg,#3d2818,#241710);
  background-blend-mode:overlay,normal;
  box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,210,150,.07);
}
.ballot-create h3{font-family:"Sancreek","Rye",serif;color:#f4d684;font-size:19px;letter-spacing:.5px;margin:0 0 12px}
.ballot-create label{display:block;font-size:10px;letter-spacing:1.5px;color:#c9a13b;text-transform:uppercase;font-weight:700;margin-bottom:5px}
.ballot-create input[type=text]{
  width:100%;background:#0e0905;color:#f0e2c0;border:2px solid #0a0503;border-radius:4px;
  padding:9px 11px;font-family:"Zilla Slab";font-weight:500;font-size:14px;box-sizing:border-box;margin-bottom:8px;
}
.ballot-create input[type=text]:focus{outline:none;border-color:#c9a13b}
.ballot-create .opt-row{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.ballot-create .opt-row input{margin-bottom:0}
.ballot-create .opt-x{
  background:rgba(177,74,50,.18);color:#f0b6a6;border:1px solid rgba(177,74,50,.5);border-radius:4px;
  width:32px;height:34px;flex-shrink:0;cursor:pointer;font-size:16px;line-height:1;
}
.ballot-create .opt-x:hover{background:rgba(177,74,50,.35)}
.ballot-create .create-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ballot-create .add-opt{
  background:none;border:1px dashed rgba(201,161,59,.5);color:#c9a13b;border-radius:4px;
  padding:6px 12px;font-family:"Zilla Slab";font-weight:700;font-size:11px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;
}
.ballot-create .add-opt:hover{border-color:#c9a13b;color:#f4d684}
.ballot-create .create-msg{font-family:"Zilla Slab";font-size:12.5px;font-weight:700}

.poll-grid{display:grid;grid-template-columns:1fr;gap:16px}
.poll-card{
  padding:18px 22px 16px;border-radius:6px;border:2px solid #0a0503;
  background:var(--tex-paper),linear-gradient(180deg,#241710,#1a100a);
  background-blend-mode:overlay,normal;
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,210,150,.06);
}
.poll-card.closed{opacity:.82}
.poll-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(201,161,59,.2)}
.poll-head .poll-q-wrap{min-width:0}
.poll-card .poll-q{font-family:"Sancreek","Rye",serif;font-size:20px;line-height:1.12;color:#f4d684;letter-spacing:.4px;margin:0 0 5px;text-shadow:0 1px 0 #5a3818}
.poll-card .poll-sub{font-family:"Zilla Slab";font-size:10.5px;letter-spacing:1px;color:#a89472;text-transform:uppercase;font-weight:700}
.poll-body{min-width:0}
.poll-body .poll-hint{font-family:"Zilla Slab";font-size:11px;color:#a89472;letter-spacing:.5px;margin-top:8px;font-style:italic}
.poll-admin{display:flex;gap:8px;flex-shrink:0}
.poll-admin button{
  background:rgba(0,0,0,.3);color:#c4b08a;border:1px solid rgba(201,161,59,.3);border-radius:4px;
  padding:4px 10px;font-family:"Zilla Slab";font-weight:700;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;
}
.poll-admin button:hover{border-color:#c9a13b;color:#f4d684}
.poll-admin button.danger:hover{border-color:#b14a32;color:#f0b6a6}
.poll-opt{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 16px;border-radius:4px;margin-bottom:8px;cursor:pointer;overflow:hidden;
  border:1px solid rgba(201,161,59,.25);background:rgba(0,0,0,.28);
  font-family:"Zilla Slab";font-size:14.5px;color:#e8d8b2;transition:border-color .15s;
}
.poll-opt:hover{border-color:rgba(201,161,59,.6)}
.poll-opt .bar{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(201,161,59,.32),rgba(201,161,59,.14));width:0;transition:width .4s ease;z-index:0}
.poll-opt.leader .bar{background:linear-gradient(90deg,rgba(122,155,69,.4),rgba(122,155,69,.16))}
.poll-opt .opt-text{position:relative;z-index:1;font-weight:600}
.poll-opt .opt-pct{position:relative;z-index:1;font-family:"Ultra";font-size:12px;color:#f4d684;letter-spacing:.5px;flex-shrink:0}
.poll-opt.mine{border-color:#f1d27a;box-shadow:inset 0 0 0 1px rgba(241,210,122,.4)}
.poll-opt.mine .opt-text::after{content:" ✓";color:#cfe3a6;font-weight:800}
.poll-card.closed .poll-opt{cursor:default}
.poll-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.poll-foot .poll-meta{font-family:"Zilla Slab";font-size:11px;color:#a89472;letter-spacing:.5px}
.poll-foot .poll-admin{display:flex;gap:8px}
.poll-foot button{
  background:rgba(0,0,0,.3);color:#c4b08a;border:1px solid rgba(201,161,59,.3);border-radius:4px;
  padding:3px 9px;font-family:"Zilla Slab";font-weight:700;font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;cursor:pointer;
}
.poll-foot button:hover{border-color:#c9a13b;color:#f4d684}
.poll-foot button.danger:hover{border-color:#b14a32;color:#f0b6a6}
.ballot-empty{padding:30px;text-align:center;color:#a89472;font-family:"Rye",serif;font-size:12px;letter-spacing:2px}

/* ============================================================
   THIS WEEK'S SHOWDOWNS — horizontal face-off + head-to-head
   ============================================================ */
.showdown-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));gap:14px}
.showdown{
  padding:14px 20px 13px;border-radius:6px;border:2px solid #0a0503;
  background:var(--tex-paper),linear-gradient(180deg,#241710,#1a100a);
  background-blend-mode:overlay,normal;
  box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,210,150,.06);
}
.showdown.mine{border-color:#c9a13b;box-shadow:0 8px 18px rgba(0,0,0,.4),inset 0 0 0 1px rgba(241,210,122,.4)}
.showdown .sd-kick{display:flex;justify-content:space-between;font-family:"Rye",serif;font-size:9px;letter-spacing:2px;color:#a89472;text-transform:uppercase;margin-bottom:12px}
/* Face-off: each team anchored to its OUTER edge, VS coin centred between. */
.showdown .sd-faceoff{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.showdown .sd-side{display:flex;align-items:center;gap:11px;min-width:0}
.showdown .sd-side.left{justify-content:flex-start;text-align:left}
.showdown .sd-side.right{justify-content:flex-end;text-align:right;flex-direction:row-reverse}
.showdown .sd-side img{
  width:46px;height:46px;border-radius:50%;border:2px double #c9a13b;object-fit:cover;
  background:#3a2515;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.showdown .sd-side .nm{font-family:"Zilla Slab";font-weight:700;font-size:14.5px;color:#e8d8b2;line-height:1.18;min-width:0;overflow-wrap:break-word}
.showdown .sd-side.lead .nm{color:#f4d684}
.showdown .sd-side .pts{display:block;font-family:"Ultra";font-size:15px;color:#f4d684;margin-top:3px;letter-spacing:.5px}
.showdown .sd-vs{
  font-family:"Sancreek",serif;font-size:11px;letter-spacing:.5px;color:#2a1608;flex-shrink:0;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#f4d684,#c9a13b 70%,#8a6a24);
  border:2px solid #1a0d04;box-shadow:0 2px 6px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4);
}
.showdown .sd-rec{margin-top:12px;padding-top:10px;border-top:1px solid rgba(201,161,59,.22);text-align:center;font-family:"Zilla Slab";font-size:11.5px;letter-spacing:.5px;color:#a89472}
.showdown .sd-rec strong{color:#f4d684;font-family:"Ultra";font-size:12px;letter-spacing:.5px}

/* ============ responsive ============ */
@media(max-width:880px){
  nav.links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:linear-gradient(180deg,#3a2515,#1d1108);border-top:2px solid #0a0503;padding:8px 0;
  }
  nav.links.open{display:flex}
  nav.links a{padding:14px 22px;border-radius:0;width:100%}
  .menu-toggle{display:block}
  .hero-grid,.content{grid-template-columns:1fr}
  .champ{min-height:280px;order:-1}
  .quick{grid-template-columns:repeat(2,1fr)}
  .team-picker{grid-template-columns:repeat(2,1fr)}
  .trade-sides{grid-template-columns:1fr;gap:8px}
  .trade-arrow{display:none}
}

/* ============================================================
   MOBILE — tighten spacing & typography on small screens
   ============================================================ */
@media(max-width:640px){
  /* navbar: shrink the brand so it never forces the page wider than the screen
     (!important beats index.html's inline brand font-size) */
  .navbar{gap:10px;padding:12px 14px}
  .badge{width:42px;height:42px;font-size:19px}
  .wordmark .name{font-size:19px !important;letter-spacing:.3px !important}
  .wordmark .tag{font-size:8px;letter-spacing:1.5px}

  .wrap{padding:0 14px}
  .page{padding:34px 0 60px}
  .page-head{margin-bottom:26px}
  /* long single-word headings (e.g. "Commissioner's") must fit a phone */
  .page-head h1{font-size:clamp(26px,8vw,44px);overflow-wrap:break-word}
  .page-head .lead{font-size:15px}

  /* toolbars: let search flex, keep controls tappable */
  .toolbar{gap:8px 10px}
  .toolbar input[type=search]{min-width:0;flex:1 1 130px}
  .toolbar select{flex:0 1 auto;max-width:52vw}
  .toolbar .stat{margin-left:0}

  /* sheets: smaller, tighter cells so more fits before scrolling */
  .sheet-wrap .sheet-head{flex-wrap:wrap;gap:2px 12px;padding:12px 14px 8px}
  .sheet-wrap .sheet-head h2{font-size:16px}
  .sheet-wrap .sheet-foot{flex-wrap:wrap;gap:2px 10px;padding:9px 12px}
  table.sheet thead th{font-size:9.5px;letter-spacing:.8px;padding:8px 8px}
  table.sheet tbody td{font-size:12.5px;padding:7px 8px}
  table.sheet thead th:first-child,table.sheet tbody td:first-child{padding-left:11px}

  /* section rhythm */
  .section{margin-bottom:30px}
  .card-grid{grid-template-columns:1fr}
}

@media(max-width:400px){
  .team-picker{grid-template-columns:1fr}
  .quick{grid-template-columns:1fr}
}

/* Long slash-joined lineup string (tools.html DPI note) — allow it to wrap */
#lineup-desc{overflow-wrap:anywhere}

/* Let the home-page Marshal's Tally / Bulletin grid tracks shrink below their
   content on mobile (paired with the .table-scroll around the tally table). */
.frontier-row > *{min-width:0}
@media(max-width:640px){
  .wanted{transform:none}   /* the slight rotate() pokes past the viewport edge */
}