@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#111615;--muted:#8f9b95;--copper:#ed9b75;--line:#303934}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 20%,#27362b66,transparent 45%),var(--bg);color:#eceee5;font-family:'DM Sans',sans-serif}.grain{position:fixed;inset:0;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.8' filter='url(%23n)'/%3E%3C/svg%3E")}header,main,footer{max-width:1440px;margin:auto;padding-left:6%;padding-right:6%}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:7px;font-size:20px;font-weight:700;letter-spacing:1px;text-decoration:none;color:inherit}.thin{font-weight:400;color:var(--muted)}.sigil{font-size:36px;color:var(--copper);margin-right:9px}.header-note,.eyebrow,.hint,.section-head h2,.legend,footer{font-size:10px;letter-spacing:1.5px}.header-note{color:#a6b4a9;display:flex;align-items:center;gap:9px}.header-note i{width:6px;height:6px;background:#9cbe87;border-radius:50%;box-shadow:0 0 12px #9cbe8777}.intro{display:flex;justify-content:space-between;align-items:center;padding:58px 0 44px}.eyebrow{color:var(--copper);font-weight:700;letter-spacing:2.5px}h1{font-family:'Barlow Condensed',Impact,sans-serif;text-transform:uppercase;font-weight:700;font-size:clamp(60px,6.8vw,100px);line-height:.96;letter-spacing:-1px;margin:22px 0}h1 em{font-style:normal;color:var(--copper)}.intro p{color:var(--muted);font-size:14px;line-height:1.8}.seal{width:170px;height:170px;border:1px solid #59624855;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:14px;transform:rotate(-9deg);margin-right:40px;outline:1px solid #59624833;outline-offset:10px;color:#a8b39a}.seal span{font-family:'Barlow Condensed',sans-serif;font-size:96px}.seal small{font-size:10px;letter-spacing:2px;line-height:1.8}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px}.section-head h2{text-transform:uppercase;font-size:12px;letter-spacing:2px}.section-head h2 span{color:var(--copper);margin-right:12px}.hint{color:var(--muted);letter-spacing:.2px}.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}.card{min-width:0;background:#1a211e;border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:transform .25s,border-color .25s}.card:hover{transform:translateY(-5px);border-color:#7e7961}.name{padding:15px 13px;display:flex;align-items:center;gap:9px}.name>span{color:#8e9b87;font-size:11px}.name input{font:600 13px 'DM Sans',sans-serif;width:100%;min-width:0;background:transparent;border:0;color:#eceee5;padding:5px;border-bottom:1px solid transparent;border-radius:0}.name input:hover{border-color:#667562}.name input:focus{outline:2px solid var(--copper);outline-offset:3px}.portrait{height:220px;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#4a5b4366,#111714)}.portrait img{width:100%;height:100%;object-fit:cover;object-position:50%;transition:transform .7s}.card:hover img{transform:scale(1.07)}.portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#131b18)}.hero-title{position:absolute;z-index:1;bottom:15px;left:16px;right:12px}.hero-title small{font-size:9px;letter-spacing:1.4px;color:#c6cfc0}.hero-title h3{font-family:'Barlow Condensed',sans-serif;text-transform:uppercase;font-size:27px;line-height:1.05;letter-spacing:.4px;margin:7px 0 0}.position{padding:16px;display:flex;align-items:center;gap:12px;border-top:1px solid var(--line);min-height:76px}.position strong{font-family:'Barlow Condensed',sans-serif;font-size:32px;color:var(--copper)}.position small{font-size:8px;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:4px}.position b{font-size:12px;font-weight:500}.controls{text-align:center;padding:30px 0}.rules{display:flex;justify-content:center;gap:27px;font-size:12px;color:var(--copper);margin-bottom:24px}.rules b{color:#aab4aa;font-weight:400;margin-left:5px}button{border:1px solid #ffbd97;background:var(--copper);color:#211b17;border-radius:3px;min-width:300px;padding:18px 25px;cursor:pointer;font:700 14px 'DM Sans',sans-serif;box-shadow:0 4px 35px #ed9b7514;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;transition:background .2s,transform .2s}button:hover{background:#ffc29b;transform:translateY(-2px)}button:focus-visible{outline:3px solid white;outline-offset:5px}button:disabled{cursor:wait;opacity:.65}button span{font-size:24px;line-height:16px}#status{font-size:11px;color:var(--muted);min-height:18px;margin-top:15px}.legend{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:15px;padding:22px 0;letter-spacing:.3px;color:#a6b0a5}.legend>span{font-size:9px;letter-spacing:1.5px;color:#6e7d71}.legend b{color:var(--copper);margin-right:8px}footer{display:flex;justify-content:space-between;gap:20px;padding-top:28px;padding-bottom:28px;color:#6f7c72;font-size:8px;letter-spacing:1px}footer a{color:inherit}.drawing .card{animation:shuffle .55s both;animation-delay:calc(var(--i)*60ms)}@keyframes shuffle{0%{opacity:.2;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:none}}@media(min-width:1500px){.portrait{height:270px}}@media(max-width:900px){header,main,footer{padding-left:4%;padding-right:4%}.cards{gap:8px}.portrait{height:180px}.name{padding:12px 6px;gap:2px}.position{padding:12px 8px;gap:7px}.hero-title{left:10px}.hero-title h3{font-size:22px}.seal{margin-right:10px;width:135px;height:135px}.legend{flex-wrap:wrap}}@media(max-width:650px){header{height:76px}.header-note{display:none}.intro{padding:36px 0 24px}.intro h1{font-size:64px}.intro p{font-size:12px}.seal{display:none}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card:last-child{grid-column:1/-1;max-width:calc(50% - 6px);width:100%;justify-self:center}.portrait{height:190px}.hint{font-size:9px;max-width:130px;text-align:right}.rules{gap:12px;flex-wrap:wrap;font-size:10px}.legend{justify-content:center;font-size:10px}.legend>span{width:100%;text-align:center}footer{flex-direction:column;text-align:center;line-height:1.8}.desktop{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Three alternatives per player */
.hero-options{display:grid;gap:1px;background:var(--line)}.hero-options .portrait{height:145px}.hero-options .hero-title{bottom:12px}.hero-options .hero-title h3{font-size:23px}.hero-options .portrait:after{background:linear-gradient(transparent 15%,#131b18ee)}.card:hover .hero-options img{transform:none}.hero-options .portrait:hover img{transform:scale(1.07)}.position{border-bottom:1px solid var(--line);background:#202923}.controls{padding-top:28px}@media(max-width:900px){.hero-options .portrait{height:130px}.hero-options .hero-title h3{font-size:21px}}@media(max-width:650px){.hero-options .portrait{height:140px}}


#language{font:500 12px "DM Sans",sans-serif;border:1px solid var(--line);background:#1a211e;color:#eceee5;border-radius:4px;padding:9px 12px;cursor:pointer}#language:focus-visible{outline:2px solid var(--copper)}.header-note{margin-left:auto;margin-right:26px}@media(max-width:650px){.brand{font-size:16px;gap:4px}.sigil{margin-right:2px}#language{padding:8px}}
/* Clear, uncropped hero artwork with separate captions */
.hero-options{gap:10px;padding:10px;background:#141c18}.hero-options .portrait{height:auto;overflow:hidden;border:1px solid #354138;border-radius:5px;background:#202a24;display:flex;flex-direction:column}.hero-options .portrait img{display:block;width:100%;height:auto;aspect-ratio:256/144;object-fit:contain;object-position:center;filter:none;transition:filter .25s}.hero-options .portrait:after{display:none}.hero-options .hero-title{position:static;padding:10px 11px 12px;background:linear-gradient(120deg,#26332b,#1b251f);min-height:77px}.hero-options .hero-title small{font-size:8px;color:#b7c7b8;letter-spacing:1.5px}.hero-options .hero-title h3{font-size:22px;margin:6px 0 0;line-height:1.1;overflow-wrap:anywhere}.card:hover .hero-options img,.hero-options .portrait:hover img{transform:none}.hero-options .portrait:hover{border-color:#b6886a}.hero-options .portrait:hover img{filter:brightness(1.08)}@media(max-width:900px){.hero-options{padding:6px;gap:8px}.hero-options .hero-title{padding:9px 8px;min-height:73px}.hero-options .hero-title h3{font-size:20px}}@media(max-width:650px){.hero-options .portrait{height:auto}.hero-options .hero-title h3{font-size:21px}}

.hero-media{position:relative;aspect-ratio:256/144;background:radial-gradient(ellipse,#3a4b3e,#101913);overflow:hidden}.hero-options .hero-media img{height:100%;width:100%;object-fit:contain}.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s}.hero-video.playing{opacity:1}.portraits-paused .hero-video{opacity:0}#animation-toggle{min-width:0;margin:0 0 16px;padding:9px 12px;font-size:11px;letter-spacing:.2px;background:#202b24;color:#d8e1d4;border:1px solid #455546;box-shadow:none;gap:8px}#animation-toggle:hover{background:#2d3a30}.hero-media{aspect-ratio:1;background:radial-gradient(ellipse at 50% 65%,#3a4b3e,#101913)}.hero-media:has(.hero-video.playing) img{opacity:0}.portraits-paused .hero-media img{opacity:1}.hero-options .hero-media img{object-fit:contain}
.portraits-paused .hero-media:has(.hero-video.playing) img{opacity:1}