/* /warpickr page (src/pages/warpickr.mjs). The card, step headings, stepper and empty state come from the .pg-cs rules in clan-search.css;
   everything else of the tool lives here. Rows are rendered by public/js/warpickr.js. */
/* Hero: copy on the left, "How it works" on the right, straight on the dusk sky (no card). Stacks on phones. */
.pg-wp .band-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:center}
.pg-wp .band .lede{max-width:560px;margin-bottom:0}
.pg-wp .band{padding:18px 0 28px}
.pg-wp .band::after{height:160px;background:linear-gradient(180deg,rgba(19,34,71,0) 0%,rgba(19,34,71,.55) 45%,var(--menu-1) 100%)}
.pg-wp .band + .menu-bg{background:linear-gradient(180deg,var(--menu-1),var(--menu-2) 900px)}
@media (min-width:900px){.pg-wp .band-grid{grid-template-columns:minmax(0,1fr) minmax(0,440px);column-gap:56px}}
@media (min-width:1024px){.pg-wp .band{padding:40px 0 36px}}

.pg-wp .hw{min-width:0}
.pg-wp .hw-title{margin:0 0 10px;font:800 12.5px/1.2 "Nunito",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#aab6d6}
.pg-wp .hw-steps{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pg-wp .hw-step{display:flex;align-items:flex-start;gap:12px;min-width:0}
.pg-wp .hw-num{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--gold-2);color:#2a1a00;font:800 13px/1 "Nunito",sans-serif;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pg-wp .hw-t{min-width:0;font-size:13.5px;line-height:1.35;color:#c9d3ee}
.pg-wp .hw-t b{display:block;font-size:15px;color:#fff}
@media (min-width:900px){.pg-wp .hw{padding-left:28px;border-left:1px solid rgba(255,255,255,.14)}}

.pg-wp .hw-num{box-shadow:none}

/* ---------- Tool ---------- */
.pg-wp .war-pickr{padding-top:0}
.pg-wp .wp-sec{padding:18px 16px}
.pg-wp .wp-sec + .wp-sec{border-top:1px solid var(--card-line)}
.pg-wp .wp-sec .step-h{margin:0;min-height:48px}
.pg-wp .wp-sec .step-h small{margin-left:2px;font-size:13px;font-weight:700}
@media (min-width:900px){.pg-wp .wp-sec{padding:24px 28px}}

/* 1 Load: heading | one column with the field, recent clans, status and the JSON fallback, all on the same left edge */
.pg-wp .wp-load{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.pg-wp .wp-load-main{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
@media (min-width:900px){.pg-wp .wp-load{grid-template-columns:250px minmax(0,1fr);column-gap:20px;align-items:start}}
.pg-wp .wp-live-row{display:flex;gap:8px}
.pg-wp .wp-live-row input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 14px;border-radius:12px;border:1.5px solid #cfc8b8;background:#fff;font:800 16px "Nunito",sans-serif;color:var(--stone-ink);text-transform:uppercase}
.pg-wp .wp-live-row input::placeholder{text-transform:none;color:#9aa0ad}
.pg-wp .wp-live-row input:focus{outline:0;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(42,139,224,.2)}
.pg-wp .wp-live-row .btn{flex:0 0 auto;min-height:48px}

.pg-wp .wp-load-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px}
.pg-wp .wp-status{display:flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:0;border-radius:0;background:none;font-size:14px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-status.ok,.pg-wp .wp-status.err{background:none}
.pg-wp .wp-status.ok::before,.pg-wp .wp-status.err::before{content:"";flex:0 0 20px;height:20px;border-radius:50%;background:var(--green-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.pg-wp .wp-status.ok{color:var(--stone-mute)}
.pg-wp .wp-status.ok a{font-weight:800;color:var(--stone-ink);text-decoration:none}
.pg-wp .wp-status.ok a:hover{color:var(--blue-dk);text-decoration:underline}
.pg-wp .wp-status.err{color:var(--red-dk)}
.pg-wp .wp-status.err::before{background:var(--red-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5.5v5.5M10 14.2v.3' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/20px no-repeat}

/* JSON fallback: a quiet link until opened, then a full-width panel */
.pg-wp .wp-paste > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:36px;cursor:pointer;font-size:13.5px;font-weight:800;color:var(--blue-dk)}
.pg-wp .wp-paste > summary::-webkit-details-marker{display:none}
.pg-wp .wp-paste > summary:hover span:first-child{text-decoration:underline}
.pg-wp .wp-paste .pm{flex:0 0 22px;height:22px;border-radius:7px;background:var(--card-2);display:grid;place-items:center;transition:transform .2s}
.pg-wp .wp-paste .pm svg{width:9px;height:9px}
.pg-wp .wp-paste[open]{flex:1 1 100%;padding:6px 14px 14px;border-radius:14px;background:#fff}
.pg-wp .wp-paste[open] .pm{transform:rotate(45deg)}
.pg-wp .wp-paste form{display:grid;gap:8px;margin-top:4px}
.pg-wp .wp-paste-label{font-size:13px;font-weight:800;color:var(--stone-ink)}
.pg-wp .wp-paste-label small{font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-paste textarea{width:100%;min-height:96px;padding:10px 12px;border:1.5px solid #cfc8b8;border-radius:12px;background:#fff;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--stone-ink);resize:vertical}
.pg-wp .wp-paste textarea:focus{outline:0;border-color:var(--blue-2);box-shadow:0 0 0 3px rgba(42,139,224,.2)}
.pg-wp .wp-paste .btn{justify-self:start}

/* 2 Lineup header: heading with the member count under it, the sit-out stepper (the main control) right next to it */
.pg-wp .wp-res-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.pg-wp .wp-res-head .step-t{display:flex;flex-direction:column;gap:1px}
.pg-wp .wp-res-head .step-t small{margin:0;font-size:13px;font-weight:700;line-height:1.2}
.pg-wp .wp-res-head .step-t small:empty{display:none}
.pg-wp .wp-filter{display:flex;align-items:center;gap:14px;padding:5px 5px 5px 14px;border-radius:16px;background:#fff4d1;box-shadow:inset 0 0 0 1.5px #f3c85a}
.pg-wp .wp-filter label{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:#5a3a00;white-space:nowrap}
.pg-wp .wp-filter label img{width:22px;height:20px;object-fit:contain}
.pg-wp .wp-filter .stepper{background:#fff;box-shadow:inset 0 0 0 1.5px #e3b64a;border-radius:12px;overflow:hidden}
.pg-wp .wp-filter .stepper button{width:44px;min-height:44px;font-size:22px;color:#5a3a00}
.pg-wp .wp-filter .stepper button:hover{background:#ffe7a3}
.pg-wp .wp-filter .stepper input{width:52px;min-height:44px;font-size:20px;color:var(--stone-ink);border-color:#f0d58e}
@media (max-width:599px){.pg-wp .wp-filter{flex:1 1 100%;justify-content:space-between}.pg-wp .wp-filter label{font-size:14.5px}}

/* Filters: compact chips with the label inside, like .c-select on /clan */
.pg-wp .wp-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.pg-wp .wp-controls[hidden]{display:none}
.pg-wp .wp-sel{display:inline-flex;align-items:center;min-height:40px;padding-left:11px;border-radius:10px;background:transparent;box-shadow:inset 0 0 0 1px #ddd5c4;font-size:12.5px;font-weight:700;color:var(--stone-mute);cursor:pointer}
.pg-wp .wp-sel:hover{box-shadow:inset 0 0 0 1px var(--stone-3)}
.pg-wp .wp-sel:focus-within{box-shadow:inset 0 0 0 1.5px var(--blue-2),0 0 0 3px rgba(42,139,224,.18)}
.pg-wp .wp-sel{flex:0 0 auto;white-space:nowrap}
.pg-wp .wp-sel select{appearance:none;-webkit-appearance:none;min-height:40px;padding:0 24px 0 5px;border:0;outline:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%235d6170' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 9px center/10px no-repeat;font:800 13px "Nunito",sans-serif;color:var(--stone-ink);cursor:pointer}

/* Wars counted: one summary line that opens the list of wars */
.pg-wp .wars-box{margin-top:14px}
.pg-wp .wars-box[hidden]{display:none}
.pg-wp .wars-box > summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:2px 14px;min-height:32px;cursor:pointer;font-size:13.5px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wars-box > summary::-webkit-details-marker{display:none}
.pg-wp .wars-box > summary b{font-weight:800;color:var(--stone-ink)}
.pg-wp .wars-toggle{display:inline-flex;align-items:center;gap:5px;font-weight:800;color:var(--blue-dk)}
.pg-wp .wars-box > summary:hover .wars-toggle span{text-decoration:underline}
.pg-wp .wars-toggle svg{width:9px;height:9px;transform:rotate(90deg);transition:transform .15s}
.pg-wp .wars-box[open] .wars-toggle svg{transform:rotate(-90deg)}
.pg-wp .wars-box .wars-hide,.pg-wp .wars-box[open] .wars-show{display:none}
.pg-wp .wars-box[open] .wars-hide{display:inline}
.pg-wp .wars-box .c-note{margin:4px 0 8px}
.pg-wp .wars-box .wars-in{margin:0}
.pg-wp .wars-box .wars-in span{font-weight:700}
.pg-wp .wars-box .wars-in b{font-weight:800}
.pg-wp .wars-box .wars-in em{padding:1px 6px;border-radius:6px;background:#efe3ff;color:#5b3a99;font-weight:800}

.pg-wp .wp-caution{margin:10px 0 0;padding:10px 12px;border-radius:12px;background:#fff7e0;box-shadow:inset 0 0 0 1px #f0dca6;font-size:13.5px;font-weight:700;color:#70520a}
.pg-wp .wp-caution[hidden]{display:none}

/* Lineup table: one grid shared by the header and every row so the columns line up */
.pg-wp .wp-table,.pg-wp .wp-res .c-state{margin-top:14px}
.pg-wp .wpl{--cols:minmax(0,1.8fr) minmax(76px,.7fr) minmax(76px,.7fr) minmax(108px,.8fr) 40px 68px;display:block;width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;color:var(--stone-ink)}
.pg-wp .wpl thead,.pg-wp .wpl tbody{display:block}
.pg-wp .wpl tbody{display:flex;flex-direction:column;gap:4px}
.pg-wp .wpl tr{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:16px}
.pg-wp .wpl th{padding:0;text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--stone-mute);white-space:nowrap}
.pg-wp .wpl thead tr{padding:0 8px 8px 16px}
.pg-wp .wpl td{min-width:0;padding:0;background:none}
.pg-wp .wpl .wp-player-row{min-height:62px;padding:8px 8px 8px 16px;border-radius:12px;background:#fff;cursor:pointer;transition:box-shadow .15s}
@media (hover:hover){.pg-wp .wpl .wp-player-row:hover{box-shadow:inset 0 0 0 1.5px #cdd9ea}}
.pg-wp .wpl .wp-player-row.war-excluded{background:#fff0ec;box-shadow:inset 0 0 0 1.5px #f3b5a6}
.pg-wp .wpl .wp-player-row.is-open{border-radius:12px 12px 0 0}

.pg-wp .wp-player{display:flex;flex-direction:column;align-items:flex-start;gap:1px}
.pg-wp .wp-player-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext;font-size:15px;font-weight:800;color:var(--stone-ink);text-decoration:none}
.pg-wp .wp-player-name:hover{color:var(--blue-dk);text-decoration:underline}
.pg-wp .wp-player-tag{padding:0;border:0;background:none;cursor:pointer;font:700 12px "Nunito",sans-serif;letter-spacing:.02em;color:var(--stone-mute)}
.pg-wp .wp-player-tag:hover{color:var(--blue-dk);text-decoration:underline}
.pg-wp .wp-used b,.pg-wp .wp-missed b{display:block;font-size:15px;font-weight:800;line-height:1.3}
.pg-wp .wp-used small,.pg-wp .wp-missed small{display:block;font-size:12px;font-weight:700;line-height:1.3;color:var(--stone-mute)}
.pg-wp .wp-used .wp-sample{color:#8a5a00}
.pg-wp .wp-missed.is-zero b{color:#9aa0ad}
.pg-wp .war-excluded .wp-missed b{color:var(--red-dk)}

.pg-wp .wp-pill{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:800;white-space:nowrap}
.pg-wp .wp-pill.out{padding-left:6px;background:#ffd9cf;color:var(--red-dk)}
.pg-wp .wp-pill.out::before{content:"";width:18px;height:16px;background:url("/game/icons/Icon_HV_Out.png") center/contain no-repeat}
.pg-wp .wp-pill.shield{padding-left:7px;background:#dbe9ff;color:var(--blue-dk)}
.pg-wp .wp-pill.shield::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.6 9-8 11-4.4-2-8-6-8-11V5z' fill='%232a8be0'/%3E%3C/svg%3E") center/contain no-repeat}
.pg-wp .wp-pill.keep,.pg-wp .wp-pill.none{padding:0;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-pill.none{color:#9aa0ad}

.pg-wp .wpl input[type="checkbox"]{appearance:none;-webkit-appearance:none;display:block;width:40px;height:40px;margin:0;border-radius:10px;cursor:pointer;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.6 9-8 11-4.4-2-8-6-8-11V5z' fill='none' stroke='%235d6170' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:inset 0 0 0 1px var(--card-line)}
.pg-wp .wpl input[type="checkbox"]:hover{background-color:var(--card-2)}
.pg-wp .wpl input[type="checkbox"]:checked{background:var(--blue-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.6 9-8 11-4.4-2-8-6-8-11V5z' fill='%23fff'/%3E%3C/svg%3E") center/20px no-repeat;box-shadow:none}
.pg-wp .wpl input[type="checkbox"]:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}

.pg-wp .wp-more{justify-self:end}
.pg-wp .wp-details-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;height:40px;padding:0 10px;border:0;border-radius:10px;background:transparent;cursor:pointer;font:800 13px "Nunito",sans-serif;color:var(--stone-mute)}
.pg-wp .wp-details-button svg{width:11px;height:11px;transform:rotate(90deg);transition:transform .15s}
.pg-wp .wp-details-button[aria-expanded="true"] svg{transform:rotate(-90deg)}
.pg-wp .war-excluded .wp-details-button{color:var(--red-dk)}
@media (hover:hover){.pg-wp .wp-details-button:hover{background:var(--card)}.pg-wp .war-excluded .wp-details-button:hover{background:#ffe2da}}
.pg-wp .wp-details-button:focus-visible{outline:3px solid var(--blue-2);outline-offset:2px}

/* Player details: continues the row it belongs to */
.pg-wp .wpl tr.wp-evidence{display:block;margin-top:-4px;border-radius:0 0 12px 12px;background:#fff}
.pg-wp .wpl tr.wp-evidence[hidden]{display:none}
.pg-wp .wpl tr.wp-evidence.war-excluded{background:#fffaf8;box-shadow:inset 1.5px 0 #f3b5a6,inset -1.5px 0 #f3b5a6,inset 0 -1.5px #f3b5a6}
.pg-wp .wpl .wp-player-row.war-excluded.is-open{box-shadow:inset 1.5px 0 #f3b5a6,inset -1.5px 0 #f3b5a6,inset 0 1.5px #f3b5a6}
.pg-wp .wpl tr.wp-evidence td{display:block;margin:0 16px;padding:16px 0 14px;border-top:1px dashed var(--card-line);font-size:14px;line-height:1.5}
.pg-wp .wp-d-top{display:grid;gap:14px}
@media (min-width:900px){.pg-wp .wp-d-top{grid-template-columns:minmax(0,1fr) minmax(0,380px);column-gap:32px;align-items:start}}
.pg-wp .wp-detail-heading{margin:0 0 4px;font:800 16px/1.3 "Nunito",sans-serif;color:var(--stone-ink)}
.pg-wp .wp-reason{margin:0;max-width:68ch;font-weight:600;color:#3d4254}
.pg-wp .wp-detail-meta{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-detail-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.pg-wp .wp-detail-stats > div{display:flex;flex-direction:column;padding:10px 12px;border-radius:10px;background:var(--card)}
.pg-wp .wp-detail-stats dt{font-size:12px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-detail-stats dd{order:-1;margin:0;font-size:20px;font-weight:900;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--stone-ink)}
.pg-wp .wp-history-summary{margin:16px 0 4px;font-size:13px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-history-summary b{color:var(--stone-ink)}
.pg-wp .wp-war-evidence{list-style:none;margin:0;padding:0;column-gap:32px}
@media (min-width:900px){.pg-wp .wp-war-evidence{columns:2}}
.pg-wp .wp-war-evidence li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:34px;padding:4px 0;border-bottom:1px solid #efebe3;break-inside:avoid;font-size:13px}
.pg-wp .wp-war-label{display:flex;align-items:baseline;gap:10px;min-width:0}
.pg-wp .wp-war-label b{flex:0 0 52px;font-weight:800;color:var(--stone-ink)}
.pg-wp .wp-war-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--stone-mute)}
.pg-wp .wp-war-attacks{display:inline-flex;align-items:baseline;gap:8px;flex:0 0 auto;font-variant-numeric:tabular-nums}
.pg-wp .wp-war-attacks b{font-weight:800;color:var(--stone-ink)}
.pg-wp .wp-war-attacks span{min-width:56px;text-align:right;font-size:12px;font-weight:700;color:#3c762c}
.pg-wp .wp-war-evidence li.is-miss .wp-war-attacks b,.pg-wp .wp-war-evidence li.is-miss .wp-war-attacks span{color:var(--red-dk)}
.pg-wp .wp-detail-warning{margin:12px 0 0;font-size:12.5px;font-weight:700;color:#70520a}
.pg-wp .wp-detail-links{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px}
.pg-wp .wp-detail-links a{display:inline-flex;align-items:center;gap:6px;min-height:40px;font-size:13.5px;font-weight:800;color:var(--blue-dk);text-decoration:none}
.pg-wp .wp-detail-links a:hover{text-decoration:underline}
.pg-wp .wp-detail-links svg{width:9px;height:9px}

/* Under the table: how the numbers work, then actions */
.pg-wp .wp-note{margin:14px 2px 0;max-width:120ch;font-size:12.5px;line-height:1.55;color:var(--stone-mute)}
.pg-wp .wp-note[hidden]{display:none}
.pg-wp .wp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--card-line)}
.pg-wp .wp-actions .btn:disabled{opacity:.5;cursor:default}
.pg-wp .wp-actions-hint{font-size:12.5px;font-weight:700;color:var(--stone-mute)}
.pg-wp .wp-foot{display:inline-flex;gap:18px;margin-left:auto}
.pg-wp .wp-foot .linkish{min-height:36px;padding:0;font-size:13px}
.pg-wp .wp-privacy{margin:6px 0 0;font-size:12px;color:var(--stone-mute)}
.pg-wp .wp-copy-fallback{display:block;margin-top:12px;font-size:13px;font-weight:800}
.pg-wp .wp-copy-fallback[hidden]{display:none}
.pg-wp .wp-copy-fallback textarea{width:100%;margin-top:6px;padding:12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}

/* Phones: each player is a two-line card. Line 1 name, status, shield; line 2 used, missed, details. */
@media (max-width:749px){
  .pg-wp .wpl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pg-wp .wpl .wp-player-row{grid-template-columns:minmax(0,1fr) auto minmax(40px,auto);grid-template-areas:"player decision shield" "used missed more";column-gap:10px;row-gap:6px;padding:10px 8px 8px 14px}
  .pg-wp .wp-player{grid-area:player}
  .pg-wp .wp-decision{grid-area:decision;justify-self:end}
  .pg-wp .wp-shield{grid-area:shield;justify-self:end}
  .pg-wp .wp-used{grid-area:used;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
  .pg-wp .wp-used::before{content:"Used";font-size:12px;font-weight:700;color:var(--stone-mute)}
  .pg-wp .wp-missed{grid-area:missed;justify-self:end;display:flex;align-items:baseline;gap:6px}
  .pg-wp .wp-more{grid-area:more}
  .pg-wp .wp-used b,.pg-wp .wp-missed b{font-size:14px}
  .pg-wp .wpl tr.wp-evidence td{margin:0 14px}
  .pg-wp .wp-detail-stats > div{padding:8px 10px}
  .pg-wp .wp-detail-stats dd{font-size:18px}
  .pg-wp .wp-foot{margin-left:0}
  /* Filters: one row that scrolls sideways, bleeding to the card edges */
  .pg-wp .wp-controls{flex-wrap:nowrap;overflow-x:auto;margin:16px -16px 0;padding:2px 16px 4px;scroll-padding:0 16px;scrollbar-width:none}
  .pg-wp .wp-controls::-webkit-scrollbar{display:none}
}
@media (max-width:419px){.pg-wp .wp-why-label{display:none}.pg-wp .wpl .wp-player-row{grid-template-columns:minmax(0,1fr) auto 40px}}
@media (prefers-reduced-motion:reduce){.pg-wp .wp-paste .pm,.pg-wp .wars-toggle svg,.pg-wp .wp-details-button svg{transition:none}}

/* Recent and saved clans under the tag field */
.pg-wp .wp-recent{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px}
.pg-wp .wp-recent[hidden]{display:none}
.pg-wp .wp-recent-label{font-size:12.5px;font-weight:800;color:var(--stone-mute);margin-right:2px}
.pg-wp .wp-recent-list{display:flex;flex-wrap:wrap;gap:6px}
.pg-wp .wp-rc{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:3px 12px 3px 5px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--card-line);font:800 13.5px "Nunito",sans-serif;color:var(--stone-ink);cursor:pointer;max-width:100%}
.pg-wp .wp-rc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-wp .wp-rc img{width:22px;height:22px;object-fit:contain;flex:0 0 auto}
.pg-wp .wp-rc:hover{box-shadow:inset 0 0 0 1.5px var(--blue-2);color:var(--blue-dk)}

/* Why */
.pg-wp .seo-about .seo-card{background:transparent;border-radius:0;box-shadow:none;color:#c5cee6}
.pg-wp .seo-about h2,.pg-wp .wp-why b{color:#fff}
.pg-wp .seo-about p{color:#c5cee6}
.pg-wp .seo-about a{color:var(--blue-1)}
.pg-wp .seo-about a:hover{color:#fff}
.pg-wp .wp-why{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.pg-wp .wp-why li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.5}
.pg-wp .wp-why svg{flex:0 0 18px;width:18px;height:18px;margin-top:3px;color:var(--green-1)}

/* FAQ on the page's dark background */
.pg-wp .faq-card{background:transparent;border-radius:0;box-shadow:none;color:#fff}
.pg-wp .faq-card h2{color:#fff}
.pg-wp .faq-card details{border-bottom-color:rgba(255,255,255,.16)}
.pg-wp .faq-card summary .pm{background:rgba(255,255,255,.08);color:#fff}
.pg-wp .faq-card summary .pm svg{filter:brightness(0) invert(1)}
.pg-wp .faq-card summary:hover .pm{background:rgba(255,255,255,.16)}
.pg-wp .faq-card details p{color:#c5cee6}
.pg-wp .faq-snip-head a,.pg-wp .faq-card details p a{color:var(--blue-1)}