/* Responsive layout overrides. Loaded AFTER the inline feature styles so the legacy
   patch scripts cannot undo them. Keep card geometry in index.html; this file governs
   available space, wrapping and page layout only. */
.bar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto auto;gap:14px}
.brand,.nav a,.who .btn{white-space:nowrap}
.search{width:100%;max-width:none;min-width:0}
.nav{min-width:0}
.nav a{padding:7px 8px}
.who{min-width:0}
.who .pill{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.who .pill .dot{display:inline-block;margin-right:7px}
/* The tablet navigation can widen this grid column; the toggle must stay square. */
#theme{display:grid;place-items:center;justify-self:end;width:40px;height:40px;min-width:40px;padding:0}
#theme svg{display:block;width:18px;height:18px;flex-shrink:0}
#theme:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr))}
.sect .head{gap:8px;flex-wrap:wrap}
.sect .head h2{font-size:clamp(16px,3vw,20px)}
.filters>*{min-width:0;max-width:100%}
.filters label{flex:1 1 150px}
.filters input,.filters select{min-width:0;max-width:100%;width:100%}
.filters label:has(input[type=number]){flex:0 1 100px}
#filters input,#filters select,#stat-filter-toggle{height:35px}
#stat-filter-toggle{align-self:flex-end;white-space:nowrap}
#filters .fright{align-self:flex-end;min-height:35px}
.fright{flex:1 1 280px;justify-content:space-between;flex-wrap:wrap}
.count{white-space:nowrap}
.stat-filters{margin:0 0 22px;padding:18px;background:var(--card);border:1px solid var(--edge)}
.stat-filters[hidden]{display:none}
.stat-filters>p{margin:0 0 14px;font-size:14px;color:var(--ink-soft)}
.stat-ranges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.stat-range{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0;margin:0;padding:12px;border:1px solid var(--edge)}
.stat-range legend{font-family:var(--disp);font-size:13px;font-weight:700;padding:0 5px}
.stat-range label{display:flex;flex-direction:column;gap:5px;min-width:0;font-size:12px;color:var(--steel)}
.stat-range input{width:100%;min-width:0;min-height:40px;padding:8px;border:1px solid var(--edge);background:var(--field);color:var(--ink);font:inherit;font-size:15px}
.stat-filter-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.stat-filters .filter-error{color:var(--bad);margin:12px 0 0}
.filter-error:empty{display:none}
@media(max-width:900px){.stat-ranges{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){.stat-ranges{grid-template-columns:minmax(0,1fr)}.stat-filters{padding:12px}}
.pager{flex-wrap:wrap}
.pager button,.vbtn,.mcard input{color:var(--ink)}

/* Let the number of attribute panels follow their ACTUAL column width, rather than
   the viewport. A panel retains enough room for its labels without widening the page. */
.detail{grid-template-columns:220px minmax(0,1fr) 260px;grid-template-areas:"card stats info" "card comments info";gap:0 20px}
.detail>*{min-width:0}
.dcard{grid-area:card;position:static;width:100%;max-width:250px}
.detail-stats{grid-area:stats}
#statwrap{container-type:inline-size}
.cats{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;align-items:start;gap:20px}
/* Share the three row tracks across both columns, so each pair of headings lines up.
   DOM order stays Pace/Shooting/Passing, then Dribbling/Defending/Heading on phones. */
.cat-column{display:contents}
@container(min-width:660px){.cats{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,auto);grid-auto-flow:row}}
@container(max-width:440px){.cats{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}}
.cat{min-width:0}
.attr{grid-template-columns:30px minmax(94px,1fr) 24px 40px;column-gap:6px}
.attr .n{font-size:14px}
.cat .sub .attr .b{width:100%}
.info .row{align-items:baseline;gap:12px}
.info .row b,.info .row b.tight{min-width:0;white-space:normal;text-align:right;overflow-wrap:anywhere}
.info .row span{flex-shrink:0}
.cform{flex-wrap:wrap}
.cform textarea{min-width:0;flex:1 1 220px}
.cmt .cb{min-width:0;overflow-wrap:anywhere}
.basic-info{grid-area:info;margin:0}
.basic-info h3{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--edge);padding-bottom:6px}
.basic-info .info{display:block}
.detail>.comments{grid-area:comments;max-width:none}
/* One score per card or comment; selected arrows show the current user's vote. */
.vote{gap:6px;align-items:center;cursor:default}
.vote .vbtn,.cmt .cv .vbtn{width:32px;height:32px;flex-shrink:0;justify-content:center;padding:6px;color:var(--ink);border:1px solid var(--edge);background:var(--field);border-radius:3px}
.vote .vbtn.on,.cmt .cv .vbtn.on{color:#2a230c;background:var(--gold);border-color:var(--gold)}
.vote .vbtn.down.on,.cmt .cv .vbtn.down.on{color:var(--paper);background:var(--bad);border-color:var(--bad)}
.vbtn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.vcount{min-width:3ch;text-align:center;font-variant-numeric:tabular-nums}
.vote-grid{display:flex;justify-content:center;margin:8px 0 4px}
.vote-list{margin:0;justify-self:end}
.lrow{--list-number-size:38px;grid-template-columns:38px 32px 56px minmax(100px,.7fr) 44px minmax(80px,.5fr) minmax(90px,.6fr) minmax(300px,2.6fr) auto;gap:8px;min-height:80px;padding:8px 12px}
.lrow .lr-rt{width:var(--list-number-size);height:var(--list-number-size)}
.lr-face{width:56px;height:56px}
.lr-player{min-width:0}
.lr-player .lr-nm{display:block}
.lr-bio{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;margin-top:4px;font-size:11px;line-height:1.3;font-variant-numeric:tabular-nums;color:var(--steel)}
.lr-bio span{white-space:nowrap}
.lr-bio b{color:var(--ink-soft);font-weight:600}
.lrow .lr-badges{gap:4px}
.lrow .lr-badges img{height:18px;max-width:22px}
.lrow .lr-st{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;justify-self:stretch;gap:8px}
.lrow .lr-st i{position:relative;flex-direction:column;gap:0;justify-content:center}
.lrow .lr-st b{width:var(--list-number-size);height:var(--list-number-size);max-width:none;flex:none;font-size:17px}
.lrow .lr-st em{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);line-height:12px;white-space:nowrap}
@media(max-width:1200px){
  .lrow{grid-template-columns:38px 32px 56px minmax(90px,180px) minmax(268px,1fr) auto}
  .lr-club,.lr-type,.lr-badges{display:none}
}
.tw-nav{flex-wrap:wrap;max-width:100%}
.tw-nav .btn{max-width:100%;overflow-wrap:anywhere}
.pk-tools input[type=search]{min-width:0}
.pk-row .nm b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}

@media(max-width:1100px){
  .bar{grid-template-columns:minmax(0,1fr) auto auto;gap:10px 14px}
  .brand{grid-column:1;grid-row:1}
  #theme{grid-column:2;grid-row:1}
  .who{grid-column:3;grid-row:1}
  .search{grid-column:1;grid-row:2}
  .nav{grid-column:2 / 4;grid-row:2;justify-content:flex-end}
  .detail{grid-template-columns:220px minmax(0,1fr);grid-template-areas:"card stats" "card info" "card comments"}
  .basic-info{margin-top:24px}
}
@media(max-width:760px){
  .bar{padding:10px 12px;gap:8px}
  .brand{gap:7px;font-size:18px}
  .who .pill{display:none}
  .who .btn{font-size:10px;padding:9px 10px}
  .search{grid-column:1 / -1;grid-row:2}
  .nav{grid-column:1 / -1;grid-row:3;display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .nav a{text-align:center;white-space:normal;font-size:12px;padding:8px 3px}
  main{padding:18px 12px 50px}
  .detail{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "stats" "info" "comments";row-gap:20px}
  .dcard{max-width:none;display:grid;grid-template-columns:144px minmax(0,1fr);gap:10px 14px;align-items:start}
  #cardwrap{grid-column:1;grid-row:1}
  .dcard .vote{grid-column:1;grid-row:2;margin-top:0}
  .card-versions{grid-column:2;grid-row:1 / 3;min-width:0}
  .card-versions>.eyebrow{margin-top:0!important}
  .card-versions .versions{gap:6px;margin-top:8px}
  .card-versions .vchip{min-height:32px;padding:5px 7px}
  .filters{padding:10px}
  .filters label{flex-basis:130px}
  .filters label:has(input[type=number]){flex:1 1 90px}
  .mcard.mwide{padding:14px}
  .pk-row{grid-template-columns:32px 30px 26px minmax(0,1fr);gap:6px}
  .pk-row .t{grid-column:2 / -1;justify-content:flex-start;white-space:normal}
  .pk-row .nm{flex-direction:column;gap:2px;align-items:flex-start}
  .pk-row .nm b{max-width:100%}
}
@media(max-width:700px){
  .lrow{--list-number-size:32px;grid-template-columns:36px 30px 48px minmax(0,1fr);gap:10px 8px;padding:10px 8px}
  .lr-rt{width:32px;height:32px}
  .lr-face{width:48px;height:48px}
  .lr-st{grid-column:1 / -1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));width:100%;gap:4px}
  .lrow .lr-st{margin-bottom:15px}
  .lr-st i,.lr-st i:nth-child(n+4){display:flex;flex-direction:column;gap:3px}
  .vote-list{grid-column:1 / -1;justify-self:end}
}
@media(max-width:380px){
  .dcard{grid-template-columns:120px minmax(0,1fr);column-gap:10px}
  .card-versions .versions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .card-versions .vchip{font-size:11px;padding:5px 3px;gap:4px;min-width:0}
  .card-versions .vchip .r{padding:1px 3px}
}
/* Supplied Legends frame and portraits use their original proportions. */
.fc.t-legend{aspect-ratio:156/232;color:#4a3817;text-shadow:none}
.fc.t-legend .fc-st{text-shadow:none}
.fc.t-legend .fc-port{top:20%;height:47%;clip-path:none;transform:scale(.9);transform-origin:bottom center}
/* Seat the Legends flag inside its inset frame, keeping the diagonal cutout. */
.fc.t-legend .fc-bd .fl{width:30cqw;transform:translate(5cqw,2cqw)}