:root{
  /* Family tokens: align with Dog Parent and shared site chrome. */
  --family-bg:#f7f1e6; --family-panel:#fffdf8; --family-ink:#1e1812;
  --family-ink-soft:#4f4538; --family-muted:#6f6252; --family-rule:rgba(30,24,18,.13);
  --family-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  --radius-lg:24px; --radius-md:16px; --radius-sm:10px; --radius-pill:999px;
  --shadow-card:0 6px 24px rgba(43,31,26,.06); --control-min-h:48px; --focus:#c95e2c;

  /* Football tokens: keep the sport identity as an accent layer. */
  --football-field:#14431f; --football-field-deep:#0d3016;
  --football-gold:#d9a83c; --football-gold-deep:#a87c22;
  --football-leather:#7a4a24; --football-leather-deep:#5c3618;
  --off:#c2422e; --def:#1e4a8a; --spc:#6b4ab8;

  /* Local aliases keep the generated result renderer readable. */
  --field:var(--football-field); --field-d:var(--football-field-deep);
  --line:var(--family-panel); --gold:var(--football-gold); --gold-d:var(--football-gold-deep);
  --ink:var(--family-ink); --muted:var(--family-muted); --paper:var(--family-bg); --card:var(--family-panel);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--family-font);background:var(--family-bg);color:var(--family-ink);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
button{font:inherit}
button:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.wrap{max-width:560px;margin:0 auto;padding:0 20px 80px}
/* ---------- landing ---------- */
.hero{max-width:560px;background:var(--field);color:var(--line);margin:20px auto 0;padding:36px 26px 38px;text-align:center;position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background-image:repeating-linear-gradient(0deg,transparent 0 56px,rgba(255,255,255,.07) 56px 58px)}
.hero .badge{display:inline-block;background:var(--gold);color:#3a2a08;font-weight:800;font-size:12px;border-radius:999px;padding:4px 14px;letter-spacing:1px}
.hero h1{font-size:29px;font-weight:900;margin:16px 0 10px;letter-spacing:.5px;line-height:1.35}
.hero p{font-size:14.5px;opacity:.88;max-width:400px;margin:0 auto}
.ball{font-size:44px;margin-top:14px}
.dims{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:22px 0 0}
.dims span{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600}
.cta{display:block;width:100%;max-width:320px;min-height:var(--control-min-h);margin:24px auto 0;background:var(--gold);color:#3a2a08;border:none;border-radius:var(--radius-pill);padding:14px 24px;font-size:16px;font-weight:900;cursor:pointer;letter-spacing:.6px;box-shadow:0 6px 18px rgba(217,168,60,.3);transition:transform .1s ease,box-shadow .16s ease}
.cta:hover{box-shadow:0 8px 20px rgba(217,168,60,.36)}
.cta:active{transform:scale(.98);box-shadow:0 3px 10px rgba(217,168,60,.28)}
.sec-h{font-size:17px;font-weight:800;margin:28px 0 6px;display:flex;align-items:center;gap:8px}
.sec-sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.unit-tag{font-size:11px;font-weight:800;border-radius:var(--radius-pill);padding:3px 9px;color:#fff}
.u-offense{background:var(--off)}.u-defense{background:var(--def)}.u-special{background:var(--spc)}
.roster{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.roster .r-card{background:var(--card);border:1px solid var(--family-rule);border-radius:var(--radius-md);padding:14px 14px 12px;position:relative;box-shadow:var(--shadow-card)}
.r-card .no{position:absolute;top:8px;right:10px;font-size:20px;font-weight:900;color:#d8cfb8;font-style:italic}
.r-card b{font-size:14.5px;display:block;margin:6px 0 2px}
.r-card small{color:var(--muted);font-size:11.5px;display:block}
/* ---------- quiz ---------- */
.yardbar{background:var(--field);border-radius:var(--radius-md);padding:12px 14px 14px;margin:20px 0 18px;color:var(--line);box-shadow:var(--shadow-card)}
.yardbar .yb-top{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:7px;opacity:.9}
.yb-track{height:14px;background:var(--field-d);border-radius:999px;position:relative;overflow:hidden;
  background-image:repeating-linear-gradient(90deg,transparent 0 9%,rgba(255,255,255,.22) 9% 10%)}
.yb-fill{height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold));border-radius:999px;width:0%;transition:width .35s;position:relative}
.yb-fill::after{content:"🏈";position:absolute;right:-4px;top:-4px;font-size:15px}
.q-card{background:var(--card);border:1px solid var(--family-rule);border-radius:var(--radius-md);padding:22px 20px;box-shadow:var(--shadow-card)}
.q-num{font-size:12px;font-weight:800;color:var(--gold-d);letter-spacing:1px;margin-bottom:8px}
.q-text{font-size:21px;font-weight:700;line-height:1.5;min-height:76px}
.q-note{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.5}
.opts{margin-top:18px;display:grid;gap:9px}
.opt{min-height:var(--control-min-h);background:var(--family-bg);border:1.5px solid var(--family-rule);border-radius:var(--radius-md);padding:13px 16px;font-size:15px;cursor:pointer;text-align:left;font-weight:600;transition:all .12s}
.opt.na{border-style:dashed;color:var(--muted);font-size:13px}
.opt:hover{border-color:var(--gold);background:#fdf6e2}
.opt.sel{border-color:var(--gold-d);background:#f6dfaa;color:#3a2a08;box-shadow:0 3px 10px rgba(217,168,60,.18)}
.q-nav{display:flex;justify-content:space-between;margin-top:16px}
.ghost{min-height:44px;background:var(--family-panel);border:1px solid var(--family-rule);border-radius:var(--radius-pill);color:var(--family-ink-soft);font-size:13.5px;cursor:pointer;padding:8px 16px}
/* ---------- result ---------- */
.jersey{max-width:560px;margin:20px auto 0;padding:24px;color:var(--line);text-align:center;position:relative;background:var(--field);border-radius:var(--radius-lg);
  background-image:repeating-linear-gradient(0deg,transparent 0 48px,rgba(255,255,255,.06) 48px 50px)}
.jersey .frame{border:3px solid var(--gold);border-radius:var(--radius-md);padding:26px 18px 24px;background:rgba(0,0,0,.18)}
.jersey .unit{margin-bottom:10px}
.jersey .shirt{font-size:52px;font-weight:900;font-style:italic;color:var(--gold);line-height:1}
.jersey h2{font-size:30px;font-weight:900;margin:8px 0 2px}
.jersey .en{font-size:14px;letter-spacing:2.5px;text-transform:uppercase;opacity:.8}
.jersey .pos{margin-top:8px;font-size:13.5px;background:rgba(255,255,255,.14);display:inline-block;border-radius:999px;padding:4px 14px}
.jersey .tag{margin-top:14px;font-size:15.5px;font-weight:700;color:#ffe9b8}
.jersey .quote{margin-top:6px;font-size:12.5px;opacity:.75;font-style:italic}
.panel{background:var(--card);border:1px solid var(--family-rule);border-radius:var(--radius-md);padding:18px;margin-top:16px;box-shadow:var(--shadow-card)}
.panel h3{font-size:15px;font-weight:800;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.panel p{font-size:14px;color:#3c372e}
.bar-row{display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:10px;margin:9px 0;font-size:12.5px}
.bar-row .bn{font-weight:700}
.bar-bg{height:10px;background:#ede8d8;border-radius:999px;position:relative}
.bar-bg::after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:1.5px;background:#c9c0a6}
.bar-v{position:absolute;top:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold-d),var(--gold))}
.bar-lab{color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.sw-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sw-list ul{list-style:none;font-size:13px}
.sw-list li{padding:4px 0 4px 18px;position:relative}
.sw-list .s li::before{content:"▲";color:#1f8a4c;position:absolute;left:0;font-size:10px;top:8px}
.sw-list .w li::before{content:"▽";color:#c2422e;position:absolute;left:0;font-size:10px;top:8px}
.tip-box{background:#fff7e4;border:1px solid rgba(168,124,34,.55);border-radius:var(--radius-md);padding:14px 16px;font-size:13.5px;margin-top:16px;box-shadow:var(--shadow-card)}
.radar-wrap{display:flex;justify-content:center}
.again{margin-top:24px}
.footnote{text-align:center;color:var(--muted);font-size:11.5px;line-height:1.6;margin-top:20px}
.hidden{display:none}
@media(min-width:600px){.q-text{min-height:56px}}
@media(max-width:420px){
  .wrap{padding-left:16px;padding-right:16px}
  .hero{margin-top:16px;padding:30px 20px 32px}
  .hero h1{font-size:26px}
  .roster{grid-template-columns:1fr}
  .jersey{margin-left:16px;margin-right:16px;padding:20px}
}

/* ---------- production additions (dog_football_quiz) ---------- */
.profile-card{background:var(--card);border:1px solid var(--family-rule);border-radius:var(--radius-md);padding:16px;margin-top:18px;box-shadow:var(--shadow-card);color:var(--family-ink);text-align:left}
.profile-card .ph{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.profile-card .ph b{font-size:14px}
.profile-card .ph small{color:var(--muted);font-size:12px}
.profile-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.profile-row .full{grid-column:1/-1}
.field-input,.field-select{width:100%;min-height:var(--control-min-h);border:1.5px solid var(--family-rule);border-radius:var(--radius-sm);background:var(--family-bg);padding:10px 12px;font:inherit;font-size:15px;color:var(--family-ink)}
.field-input:focus-visible,.field-select:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.quarter-card{background:var(--field);color:var(--line);border-radius:var(--radius-lg);padding:34px 24px;text-align:center;margin-top:20px;box-shadow:var(--shadow-card);
  background-image:repeating-linear-gradient(0deg,transparent 0 56px,rgba(255,255,255,.07) 56px 58px)}
.quarter-card .qc-kicker{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--gold)}
.quarter-card h2{font-size:24px;font-weight:900;margin:10px 0 8px}
.quarter-card p{font-size:14.5px;opacity:.9;max-width:380px;margin:0 auto}
.notice{border-radius:var(--radius-md);padding:12px 14px;font-size:13.5px;margin-top:16px;line-height:1.55}
.notice.close-call{background:rgba(217,168,60,.18);border-left:4px solid var(--gold-d);font-weight:600}
.notice.age{background:#eef4ff;border-left:4px solid var(--def)}
.notice.error{background:#fdecea;border-left:4px solid var(--off)}
.jersey .dog-name{font-size:15px;font-weight:700;color:var(--gold);letter-spacing:.5px;margin-top:6px}
.jersey .explainer{margin-top:10px;font-size:12.5px;opacity:.85;max-width:420px;margin-left:auto;margin-right:auto}
.bar-row{grid-template-columns:78px 1fr 112px}
.bar-lab{color:var(--family-ink-soft);font-weight:700;text-align:right;font-size:12px;font-variant-numeric:normal}
.bar-row.missing .bar-lab{color:var(--muted);font-weight:500}
.share-row{display:grid;gap:10px;margin-top:20px}
.share-row .cta{margin-top:0}
.ghost.wide{width:100%;max-width:320px;margin:0 auto;display:block}
.radar-wrap svg{max-width:100%;height:auto;overflow:visible}
.loading{text-align:center;color:var(--muted);padding:40px 0;font-size:14px}
@media(max-width:420px){.profile-row{grid-template-columns:1fr}.bar-row{grid-template-columns:70px 1fr 96px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.film{margin-top:10px;padding-top:10px;border-top:1px dashed var(--family-rule)}