/* Duell artwork follows the player profile poster: club colour, close-up, outlined name. */
html body #page-duell #duell-page .duel-board{position:relative;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:20px;max-width:860px;margin-inline:auto;align-items:stretch}
html body #page-duell #duell-page .duel-player{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #ffffff20;border-radius:16px;background:#12161b;box-shadow:0 12px 30px #0003}
html body #page-duell #duell-page .duel-player-art{--poster-club:rgb(var(--profile-club-rgb,90 100 114));position:relative;isolation:isolate;display:block;flex:none;height:340px;min-height:0;overflow:hidden;border:0;background:linear-gradient(160deg,var(--poster-club),color-mix(in srgb,var(--poster-club) 76%,#12161b) 48%,#12161b)}
html body #page-duell #duell-page .duel-player-art::before{display:none}
html body #page-duell #duell-page .duel-player-art::after{content:'';position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 62%,#12161b);pointer-events:none}
html body #page-duell #duell-page .duel-backname{position:absolute;z-index:0;left:14px;top:38px;writing-mode:vertical-rl;transform:rotate(180deg);font:italic 800 clamp(36px,calc(560px / var(--poster-name-length)),78px)/.85 var(--font-display,'Barlow Condensed',Arial,sans-serif);text-transform:uppercase;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px #ffffff65;white-space:nowrap;pointer-events:none}
html body #page-duell #duell-page .duel-player-art .duel-face{position:absolute;inset:0;width:100%;height:100%;transform:none}
html body #page-duell #duell-page .duel-player-art .duel-portrait{position:absolute;z-index:1;top:10%;left:52%;width:120%;height:135%;max-width:none;max-height:none;margin:0;transform:translateX(-50%);object-fit:contain;object-position:center top;filter:drop-shadow(0 14px 18px #0005);transition:transform 240ms ease}
html body #page-duell #duell-page .duel-player-art .duel-crest{position:absolute;z-index:4;top:16px;right:16px;left:auto;bottom:auto;width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 4px #0005)}
html body #page-duell #duell-page .duel-option-letter{position:absolute;z-index:4;left:16px;top:16px;width:auto;height:auto;padding:0;background:none;border:0;border-radius:0;color:#ffffffb3;font:600 10px/1.2 var(--font-ui,Inter,sans-serif);letter-spacing:.1em;text-transform:uppercase}
html body #page-duell #duell-page .duel-player-status{z-index:4;top:auto;right:16px;bottom:72px;border:1px solid #ffffff35;background:#101010c9;color:#eee;border-radius:6px;backdrop-filter:blur(8px)}
html body #page-duell #duell-page .duel-player-art .duel-face.no-image .duel-face-fallback{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:90px;height:90px;border:1px solid #ffffff35;background:#ffffff12;color:#fff;font-size:28px}
html body #page-duell #duell-page .duel-player-copy{position:relative;z-index:3;display:flex;flex-direction:column;flex:1;margin-top:-62px;padding:12px 20px 20px;background:linear-gradient(180deg,transparent,#12161bf2 52px,#12161b 85px);min-width:0}
html body #page-duell #duell-page .duel-player-team{font-size:12px;line-height:1.4;color:#c4c7cc;margin:0 0 7px}
html body #page-duell #duell-page .duel-player-copy h3{margin:0 0 18px;font:italic 800 clamp(29px,3vw,42px)/1 var(--font-display,'Barlow Condensed',Arial,sans-serif);letter-spacing:-.025em;color:#fff;text-transform:uppercase;overflow-wrap:anywhere}
html body #page-duell #duell-page .duel-player-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 20px;min-width:0}
html body #page-duell #duell-page .duel-player-facts small{display:block;margin-bottom:6px;color:#8f98a3;font:500 10px/1.3 var(--font-ui,Inter,sans-serif)}
html body #page-duell #duell-page .duel-player-metric strong{font:italic 800 28px/1 var(--font-display,'Barlow Condensed',Arial,sans-serif);color:#fff}
html body #page-duell #duell-page .duel-player-fixture strong{display:block;color:#c8cdd3;font:500 12px/1.4 var(--font-ui,Inter,sans-serif);overflow-wrap:anywhere}
html body #page-duell #duell-page .duel-vote-result{margin-top:auto;padding-top:16px;border-color:#ffffff18}
html body #page-duell #duell-page .duel-vote-result strong{color:#fff;font-size:29px}
html body #page-duell #duell-page .duel-vote-track{height:5px;background:#ffffff12;border-radius:99px;overflow:hidden}
html body #page-duell #duell-page .duel-vote-track i{background:#e9e9e2;border-radius:inherit}
html body #page-duell #duell-page .duel-player-chosen{border-color:#dce0e5;box-shadow:0 0 0 1px #dce0e5,0 12px 30px #0003}
html body #page-duell #duell-page .duel-player .duel-vote-button{margin-top:auto;width:100%;border-radius:10px;min-height:44px}
html body #page-duell #duell-page .duel-board-versus{position:absolute;z-index:5;left:50%;top:170px;transform:translate(-50%,-50%);display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff2b;border-radius:50%;background:#101216;color:#eee;font:700 11px/1 var(--font-ui,Inter,sans-serif);box-shadow:0 4px 16px #0005;pointer-events:none}
html body #page-duell #duell-page .duel-history-faces .duel-face{background:#161b21;border-color:#ffffff20}
/* The same artwork also appears before publication and in the empty-state comparison. */
html body #page-duell #duell-page .duel-selected-player{position:relative;display:flex;flex-direction:column;align-items:stretch;overflow:hidden;padding:0 0 14px;border-radius:12px;background:#12161b;border-color:#ffffff20}
html body #page-duell #duell-page .duel-selected-player .duel-player-art{height:210px;margin:0 0 -36px}
html body #page-duell #duell-page .duel-selected-player>strong{position:relative;z-index:3;padding:0 14px;font:italic 800 26px/1.1 var(--font-display,'Barlow Condensed',Arial,sans-serif);color:#fff;text-transform:uppercase;overflow-wrap:anywhere}
html body #page-duell #duell-page .duel-selected-player>small{position:relative;z-index:3;padding:8px 14px 0;color:#b3bac2}
html body #page-duell #duell-page .duel-selected-player>button{z-index:5;right:10px;top:10px;background:#0d1018c9;border:1px solid #ffffff30;color:#fff}
html body #page-duell #duell-page .duel-selected-player .duel-crest{top:14px;right:48px;width:24px;height:24px}
html body #page-duell #duell-page .duel-selected-player .duel-backname{font-size:36px}
html body #page-duell #duell-page .duel-showcase-card{overflow:hidden;background:#12161b;border-color:#ffffff20}
html body #page-duell #duell-page .duel-showcase-top{display:none}
html body #page-duell #duell-page .duel-showcase-portrait{display:block;padding:0}
html body #page-duell #duell-page .duel-showcase-portrait .duel-player-art{height:230px}
html body #page-duell #duell-page .duel-showcase-portrait .duel-backname{font-size:40px}
html body #page-duell #duell-page .duel-showcase-name{position:relative;z-index:3;margin-top:-40px;padding-top:8px;border-top:0;background:linear-gradient(180deg,transparent,#12161b 32px)}
@media(hover:hover) and (pointer:fine){html body #page-duell #duell-page .duel-player:hover .duel-portrait{transform:translateX(-50%) scale(1.025)}}
@media(max-width:600px){
 html body #page-duell #duell-page .duel-board{grid-template-columns:minmax(0,1fr);max-width:380px;gap:18px}
 html body #page-duell #duell-page .duel-player{display:flex;grid-template-columns:none}
 html body #page-duell #duell-page .duel-player-art{height:330px;border-right:0}
 html body #page-duell #duell-page .duel-board-versus{display:none}
 html body #page-duell #duell-page .duel-player-copy{padding-inline:18px}
 html body #page-duell #duell-page .duel-player-copy h3{font-size:36px}
 html body #page-duell #duell-page .duel-selected-player .duel-player-art{height:180px}
}
@media(prefers-reduced-motion:reduce){html body #page-duell #duell-page .duel-portrait{transition:none}}