/* COF Tactics look, 10-18. Robert's own SuperHero Tactics palette, loaded last on every page.
   Black is the page, blue is the panel, yellow is the one thing to press,
   red and green are states only, labels are white skewed tags with black text. */

:root{
  --cof-black:#141204;
  --cof-yellow:#FFBE0B;
  --cof-blue:#2854DB;
  --cof-blue-deep:#1C3FAE;
  --cof-red:#E71D36;
  --cof-green:#20BF55;
  --cof-white:#FFFFFF;
  --dots:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.6px) 0 0/6px 6px;
  --dots-dark:radial-gradient(rgba(20,18,4,.16) 1px,transparent 1.6px) 0 0/6px 6px;

  /* Decorative yellow becomes white; only the main action uses --cof-yellow. */
  --yellow:#FFFFFF;
  --ink:#141204;
  --ink-deep:#0A0902;
  --white:#FFFFFF;
  --muted:rgba(255,255,255,.8);
  --faint:rgba(255,255,255,.62);
  --ch:0px;
}

body{background:var(--cof-black);font-size:1.0625rem;font-weight:400}
::selection{background:var(--cof-yellow);color:var(--cof-black)}
:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible{outline-color:var(--cof-yellow)}
.skip{background:var(--cof-yellow);color:var(--cof-black)}

/* ---------- Type ---------- */
h1,h2,.h-display,.teaser-title,.card h3,.w2-city h3,.brand-name{font-synthesis:none}
.h-display{letter-spacing:.02em;line-height:.98;text-shadow:3px 3px 0 var(--cof-blue)}
.h-display .y,.teaser-title .y,.y{color:var(--cof-yellow)}
.lead{font-weight:400}
.section p{line-height:1.5}

/* Wordmark keeps its yellow FAILURE */
.ww-mark{--ww-y:var(--cof-yellow);--ww-c:var(--cof-blue);--ww-k:var(--cof-black)}

/* ---------- Tags: white, skewed, black text ---------- */
.plate,.how-n,.tag,.stamp,.soon-plate{
  display:inline-block;clip-path:none!important;background:var(--cof-white)!important;color:var(--cof-black)!important;
  border:2px solid var(--cof-black);box-shadow:3px 3px 0 var(--cof-blue);transform:skewX(-8deg);transform-origin:0 100%;
  font:700 .8125rem/1 var(--f-body)!important;letter-spacing:.08em;text-transform:uppercase;padding:.42em .65em .38em}
.plate{font:400 1.0625rem/1 var(--f-display)!important;letter-spacing:.06em;padding:.32em .6em .26em}
.stamp{font:400 1.125rem/1 var(--f-display)!important;letter-spacing:.08em;transform:skewX(-8deg) rotate(-2deg)}
.tag.is-rare{background:var(--cof-blue)!important;color:var(--cof-white)!important}
.eyebrow{color:var(--cof-white)}
.tagline{background:var(--cof-black);border:3px solid var(--cof-black);box-shadow:5px 5px 0 var(--cof-blue);font-weight:700}
.brand-of{background:var(--cof-yellow);color:var(--cof-black)}

/* ---------- Buttons: hard corners, thick black outline, hard shadow ---------- */
.btn{--bg:var(--cof-blue);--fg:var(--cof-white);--ext:var(--cof-black);border:3px solid var(--cof-black);background:var(--bg);box-shadow:4px 4px 0 var(--ext);font:700 1rem/1 var(--f-body);letter-spacing:.06em;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background-color .2s}
.btn::before,.btn::after{display:none}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ext)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ext)}
.btn-yellow{--bg:var(--cof-yellow);--fg:var(--cof-black);--ext:var(--cof-blue)}
.btn-ghost{--bg:var(--cof-black);--fg:var(--cof-white);--ext:var(--cof-blue);border-color:var(--cof-white)}
.btn-ghost:hover{--bg:var(--cof-white);--fg:var(--cof-black)}
.btn.is-disabled,.btn-ghost[aria-disabled="true"]{--bg:var(--cof-black);--fg:var(--muted);border-color:rgba(255,255,255,.3);box-shadow:none}
.btn.is-disabled:hover,.btn-ghost[aria-disabled="true"]:hover{--bg:var(--cof-black);--fg:var(--muted);transform:none;box-shadow:none}
.onboard .btn{color:var(--fg)}
.big-play{background:var(--cof-yellow);clip-path:none;border:3px solid var(--cof-black);box-shadow:5px 5px 0 var(--cof-blue)}
.big-play .ic{fill:var(--cof-black)}
.watch-dot{background:var(--cof-blue);clip-path:none;border:2px solid var(--cof-black)}
.check input:checked + .box{background:var(--cof-yellow);border-color:var(--cof-black)}
.status-open,.gg-when.is-open{background:var(--cof-green);border-color:var(--cof-black);color:var(--cof-black)}
.icon-btn,.menu-btn{border:2px solid var(--cof-white);background:var(--cof-black)}

/* Links read white with a thick blue underline; yellow is kept for the main button. */
.inline-link,.who-list a,.form-alt a,.w4-do-action a,.w4-oligarch-pair a{color:var(--cof-white);text-decoration:underline;text-decoration-color:var(--cof-blue);text-decoration-thickness:3px;text-underline-offset:4px}
.inline-link:hover,.who-list a:hover,.form-alt a:hover,.w4-do-action a:hover,.w4-oligarch-pair a:hover{color:var(--cof-yellow);text-decoration-color:var(--cof-yellow)}

/* ---------- Header and footer ---------- */
.site-header:not(.is-solid),.site-header.is-solid{background:rgba(20,18,4,.96);border-bottom:3px solid var(--cof-blue);backdrop-filter:none}
.nav a{font-weight:700;letter-spacing:.06em;font-size:.9375rem}
.nav a:hover,.nav a[aria-current="page"]{color:var(--cof-white)}
.nav a::after{height:3px;background:var(--cof-blue)}
.menu-panel a:last-child{color:var(--cof-yellow)}

/* ---------- Panels: blue halftone, thick black outline, hard extrusion ---------- */
.card-body,.feat,.pillar,.w2-city,.w3-country-card,.honest,.rules li,.deal,.cat,.mem-strip,.login-note{
  background:var(--dots),var(--cof-blue);border:3px solid var(--cof-black);
  --muted:rgba(255,255,255,.92);--faint:rgba(255,255,255,.8)}
.card{background:var(--cof-black);border:3px solid var(--cof-black);box-shadow:6px 6px 0 var(--cof-blue-deep)}
.card-body{border-width:3px 0 0}
.card-body p,.feat p,.pillar p,.w2-city p,.w2-city dd,.deal p,.cat p{color:rgba(255,255,255,.92)}
.feat,.pillar,.deal,.cat,.w2-city{box-shadow:6px 6px 0 var(--cof-blue-deep)}
.pillar{border-top:3px solid var(--cof-black)}
.pillar-ic,.feat-ic,.guard-ic,.done-ic,.how-ic{background:var(--cof-white)!important;color:var(--cof-black)!important;clip-path:none!important;border:2px solid var(--cof-black)}
.feat-lead .feat-ic{color:var(--cof-black)!important}
.do-grid .pillar:hover,.cat:hover,.deal:hover{border-color:var(--cof-black);transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--cof-blue-deep)}
.feat,.pillar,.deal,.cat{transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.honest .ic,.rules .ic,.mem-strip .ic,.login-note .ic{color:var(--cof-white)}
.w2-city{border-top:3px solid var(--cof-black)}
.w2-city dt{color:var(--cof-white);text-decoration:underline;text-decoration-color:var(--cof-black);text-decoration-thickness:2px;text-underline-offset:4px}
.frame{border:3px solid var(--cof-black);box-shadow:8px 8px 0 var(--cof-blue),8px 8px 0 3px var(--cof-black)}

/* Money stays yellow (it is the game's currency colour). */
.w2-income,.deal-num{color:var(--cof-yellow)!important}

/* Teaser band: a full blue comic panel between black sections. */
.teaser{background:var(--dots),var(--cof-blue);border-block:4px solid var(--cof-black)}
.teaser .rays{background:repeating-conic-gradient(from -3deg at 50% 50%,rgba(255,255,255,.07) 0deg 7deg,transparent 7deg 20deg)}
.teaser-title{text-shadow:4px 4px 0 var(--cof-black)}
.teaser-line{color:var(--cof-white)}
.teaser .stamp{box-shadow:3px 3px 0 var(--cof-black)}

/* Watch + other dark bands */
.watch{background:var(--ink-deep);border-block:3px solid var(--cof-blue)}
.player{border:3px solid var(--cof-black);box-shadow:8px 8px 0 var(--cof-blue)}

/* ---------- Launch lineup ---------- */
.bl-lineup{background:var(--cof-black)}
.bl-group{background:var(--dots),var(--cof-blue);border:3px solid var(--cof-black)!important;box-shadow:6px 6px 0 var(--cof-blue-deep);padding:0 0 22px!important;
  --muted:rgba(255,255,255,.92);--faint:rgba(255,255,255,.8)}
.bl-group>*:not(.s1-group-pic){margin-left:22px;margin-right:22px}
.bl-group h3{margin-top:22px}
.s1-group-pic{border-bottom:3px solid var(--cof-black)!important;box-shadow:none!important;margin-bottom:0!important}
.bl-group .bl-names{color:var(--cof-white)}
.bl-lines>div{border-left:3px solid var(--cof-white)}
.bl-lines dd{color:rgba(255,255,255,.92)}
.bl-note{color:var(--muted)}
.bl-groups{gap:32px!important}

/* "In the game" is a state: green means ours. */
.s1-in{background:var(--cof-green);color:var(--cof-black);border:2px solid var(--cof-black);box-shadow:2px 2px 0 var(--cof-black);font:700 .8125rem/1 var(--f-body);letter-spacing:.08em;transform:skewX(-8deg);padding:.4em .6em .34em}
.onboard .s1-in{box-shadow:2px 2px 0 var(--cof-black)}

/* ---------- Towns, ladders, misc. lines ---------- */
.s1-town-grid img,.s1-group-pic{box-shadow:6px 6px 0 var(--cof-blue)}
.s1-town-grid img{border:3px solid var(--cof-black)}
.s1-town-next{border-top:3px solid var(--cof-blue)}
.w2-model,.w2-countries article{border-top:3px solid var(--cof-blue)}
.w4-shops,.w4-law-ladder>li{border-top-color:var(--cof-blue)!important;border-top-width:3px!important}
.w4-motion-button{border:2px solid var(--cof-white);color:var(--cof-white)}
.w2-pin{fill:var(--cof-white)}
.w2-pin circle{stroke:var(--cof-black);stroke-width:2}
.w2-pin:hover circle:not(.w2-hit),.w2-pin:focus circle:not(.w2-hit),.w2-pin[aria-pressed=true] circle:not(.w2-hit){fill:var(--cof-yellow);stroke:var(--cof-black)}
.w2-land{fill:var(--cof-blue);stroke:var(--cof-black)}
.w2-map{border:3px solid var(--cof-black);background:var(--ink-deep)}
.w3-country{fill:var(--cof-blue-deep);stroke:rgba(255,255,255,.55)}
.w3-country:hover,.w3-country:focus-visible,.w3-country[aria-pressed=true]{fill:var(--cof-yellow);stroke:var(--cof-black)}
.w3-land.is-life{fill:var(--cof-blue);stroke:var(--cof-white)}
.w3-life-dot{background:var(--cof-white)}
.tv-card::before{background:linear-gradient(90deg,var(--cof-yellow) 0 20%,var(--cof-white) 20% 40%,var(--cof-blue) 40% 60%,var(--cof-red) 60% 80%,var(--cof-green) 80% 100%)}
.tv.is-playing .tv-led{background:var(--cof-green)}

/* ---------- Forms ---------- */
.field input,.field select,.field textarea,.w2-section select{border:2px solid var(--cof-white);background:var(--cof-black);border-radius:0}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cof-yellow)}

/* ---------- Creator pages (onboard) ---------- */
.onboard{--ink:#141204;background:var(--cof-black)}
.onboard .site-header,.onboard .site-footer{background:var(--cof-black)}
.ob-picture{border:3px solid var(--cof-black);box-shadow:6px 6px 0 var(--cof-blue)}
.ob-picture figcaption{background:var(--dots),var(--cof-blue)}
.ob-offer,.ob-start{border-top:3px solid var(--cof-blue)}

/* Phone: tags stay readable */
@media (max-width:699px){
  .h-display{text-shadow:2px 2px 0 var(--cof-blue)}
  .bl-group>*:not(.s1-group-pic){margin-left:16px;margin-right:16px}
}
@media (prefers-reduced-motion:reduce){.btn,.feat,.pillar,.deal,.cat{transition:none}}

/* Header action is blue so the hero's yellow button stays the only yellow on screen. */
.site-header .btn-yellow{--bg:var(--cof-blue);--fg:var(--cof-white);--ext:var(--cof-black)}
@media (max-width:520px){
  .btn{white-space:normal;text-align:center;line-height:1.15}
  .bar .btn-sm{padding:.5em .7em;font-size:.8125rem;letter-spacing:.03em;white-space:nowrap}
  .bar .w2-logo{width:118px!important;height:44px!important}
}

/* Beta section: one blue halftone band, white numbers, the yellow button is its one action. */
.bl-beta{background:var(--dots),var(--cof-blue);border-top:3px solid var(--cof-black);border-bottom:3px solid var(--cof-black)}
.bl-beta .h-display{text-shadow:3px 3px 0 var(--cof-black)}
.bl-beta-steps li{border-top:3px solid var(--cof-black)}
.bl-beta-steps li:before{font-family:var(--f-display);font-weight:400;color:var(--cof-white);text-shadow:2px 2px 0 var(--cof-black)}
.bl-beta-steps p,.bl-types dd,.bl-beta .lead,.bl-designations>p{color:var(--cof-white)}
.bl-designations,.bl-signup{border-top-color:rgba(20,18,4,.55)}
.bl-types dt{color:var(--cof-white);font-family:var(--f-display);font-weight:400;letter-spacing:.03em;font-size:24px;text-transform:uppercase}
.bl-beta .btn-yellow{--ext:var(--cof-black)}
.bl-signup [role=status]:focus{outline-color:var(--cof-white)}
/* Store strip sits right under it: its join button is a second way in, so it goes blue. */
.store-ctas .btn-yellow{--bg:var(--cof-blue);--fg:var(--cof-white);--ext:var(--cof-black)}

/* Partner pages (onboard.css): small labels go white; yellow stays for the one button. */
.onboard .nav a[aria-current=page],.ob-kicker,.ob-hero-picture figcaption,.ob-names h2,.ob-coming{color:var(--cof-white)}
.ob-names{border-left:4px solid var(--cof-blue)}
.ob-start li::marker{color:var(--cof-white)}
.ob-kicker{font-family:var(--f-display);font-weight:400;letter-spacing:.06em}
.onboard a:focus-visible{outline-color:var(--cof-yellow)}
.bl-note{margin-top:36px;color:var(--cof-white)}
.ob-kicker{display:inline-block;background:var(--cof-white);color:var(--cof-black);border:2px solid var(--cof-black);box-shadow:3px 3px 0 var(--cof-blue);transform:skewX(-8deg);padding:.35em .6em .25em;font-size:15px;line-height:1}
.tag.is-rare{background:var(--cof-blue);color:var(--cof-white)!important}
@media (max-width:600px){.tv-chs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- Critic round 1 fixes ---------- */
:root{--f-mono:"Comic Neue","Comic Sans MS",system-ui,sans-serif}
.mono{font-variant-numeric:tabular-nums}

/* Home: the dogs card and the range card are one blue panel, no black slabs. */
.c-dogs{background:var(--dots),var(--cof-blue)}
.c-dogs .card-body{background:none;box-shadow:none;border:0}
.w4-action-card .card-body{align-self:stretch;display:flex;flex-direction:column;justify-content:center}

/* Oligarchs band: halftone, pure white text, visible link underline. */
.w4-oligarchs{background:var(--dots),var(--cof-blue);border-top:3px solid var(--cof-black);border-bottom:3px solid var(--cof-black)}
.w4-oligarchs p:not(.tag),.w4-oligarchs .lead,.w4-codename,.w4-oligarch-pair p,.w4-oligarch-pair h3{color:var(--cof-white)!important}
.w4-oligarchs .h-display{text-shadow:3px 3px 0 var(--cof-black)}
.w4-codename{text-shadow:2px 2px 0 var(--cof-black)}
.w4-oligarch-pair article{border-top:3px solid var(--cof-black)}
.w4-oligarch-pair a{text-decoration-color:var(--cof-black)}

/* Lineup note under the cards. */
.bl-groups + p{margin-top:36px}

/* Dark list rows and TV tiles become hard-outlined panels. */
.who-list li,.tv-ch,.tv-item,.tv-now{background:var(--dots),var(--cof-blue);border:3px solid var(--cof-black);box-shadow:4px 4px 0 var(--cof-blue-deep)}
.who-list li:hover,.tv-ch:hover,.tv-item:hover{border-color:var(--cof-white)}
.who-list .who-not{background:var(--cof-black);border-color:var(--cof-red);box-shadow:4px 4px 0 rgba(231,29,54,.45)}
.tv-ch[aria-pressed="true"],.tv-item.is-on{background:var(--cof-white);color:var(--cof-black);border-color:var(--cof-black)}
.tv-ch[aria-pressed="true"] *,.tv-item.is-on *{color:var(--cof-black)!important}
.tv-ch *,.tv-item *,.tv-now *{color:var(--cof-white)}
.who-list li .check-ic,.who-list li svg{color:var(--cof-white)}

/* Members: gun cards, power cards and the four tiles are blue panels too. */
.gun,.pw,.tile{background:var(--dots),var(--cof-blue);border:3px solid var(--cof-black);box-shadow:6px 6px 0 var(--cof-blue-deep)}
.gun.is-rare{border-top-color:var(--cof-black)}
.gun:hover{box-shadow:8px 8px 0 var(--cof-black)}
.pw:hover{border-color:var(--cof-white);box-shadow:6px 6px 0 var(--cof-black)}
.tile p,.pw-s,.pw-group,.gun p{color:var(--cof-white)}
.tile.is-locked{background:var(--cof-black);border-color:rgba(255,255,255,.3);box-shadow:none}
[data-g]{--gc:var(--cof-white)}
.fchips{padding-left:var(--gutter,16px)!important;padding-right:var(--gutter,16px)!important}
@media (min-width:700px){.fchips{padding-left:0!important;padding-right:0!important}}

/* Blog: tag chips are white skewed tags; "In the game" is green everywhere. */
.chip-tag{background:var(--cof-white);color:var(--cof-black);border:2px solid var(--cof-black);box-shadow:3px 3px 0 var(--cof-blue);transform:skewX(-8deg);min-height:0;padding:.45em .7em .38em}
.chip-tag:hover{background:var(--cof-yellow);color:var(--cof-black);border-color:var(--cof-black)}
.badge-in{background:var(--cof-green);color:var(--cof-black);border:2px solid var(--cof-black)}
.post-body{color:rgba(255,255,255,.9)}
.post-body ul li::marker{color:var(--cof-white)}
.post-body blockquote{border-left-color:var(--cof-blue)}

/* Phone: people tags on one line. */
@media (max-width:520px){.w3-person .tag,.w3-people .tag,.w3-life .tag{white-space:nowrap;font-size:.75rem!important}}

/* 375 fix: two life cards must share the width, tags may break between place and class */
@media (max-width:520px){.w3-lives{grid-template-columns:repeat(2,minmax(0,1fr))}.w3-life .tag{white-space:normal;font-size:.75rem!important;line-height:1.25}}

/* Critic round 2 fixes */
.bl-lines>div{padding-left:14px}
.rays-soft{display:none}
.members-note{background:var(--cof-black);border:3px solid var(--cof-blue);box-shadow:4px 4px 0 var(--cof-blue-deep)}
.ob-start ol{list-style:none;padding:0;counter-reset:obs;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ob-start li{counter-increment:obs;background:var(--dots),var(--cof-blue);border:3px solid var(--cof-black);box-shadow:4px 4px 0 var(--cof-blue-deep);padding:16px 18px 18px;font-size:20px;line-height:1.3;color:var(--cof-white)}
.ob-start li::before{content:counter(obs,decimal-leading-zero);display:block;font:400 32px/1 "Bangers",Impact,sans-serif;color:var(--cof-white);text-shadow:2px 2px 0 var(--cof-black);margin-bottom:8px}
@media (max-width:700px){.ob-start ol{grid-template-columns:1fr}}