*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#f6f4ef;color:#20201f;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit}

.topbar{height:78px;padding:0 7.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfddd6}
.topbar nav{display:flex;align-items:center;gap:38px;font-size:12px;color:#595852}
.topbar nav a:hover,footer a:hover{color:#f2614a}
h1,h2,h3,p{margin-top:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:30px}
.roster-heading{margin-bottom:28px}
footer{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 7.2%;font-size:9px;color:#8b887f}

.roster-section,.roles-section{padding:80px 12.2%}
.roster-section{background:#ece9e1}
.section-heading h2{font-size:37px;line-height:1.1;letter-spacing:-1.5px;font-weight:500;margin:0}
.filters{display:flex;gap:8px;margin-bottom:22px}
.filter{padding:9px 15px;background:transparent;border:1px solid #d4d0c6;border-radius:18px;color:#77746d;font-size:10px;cursor:pointer}
.filter.active{background:#252523;border-color:#252523;color:white}
.monster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.monster-card{border:0;text-align:left;position:relative;background:#f7f5f0;min-height:213px;padding:0;cursor:pointer;overflow:hidden;transition:transform .2s,box-shadow .2s}
.monster-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px #28251e12}
.monster-portrait{height:155px;display:grid;place-items:center;background:#f0eee8;overflow:hidden}
.monster-portrait img{max-height:145px;max-width:100%;object-fit:contain;transition:transform .25s}
.monster-card:hover .monster-portrait img{transform:scale(1.06)}
.monster-meta{padding:11px 12px}
.monster-meta h3{font-size:12px;font-weight:600;margin:0 0 5px}
.monster-sub{font-size:8px;color:#929087;text-transform:uppercase;letter-spacing:1px}
.mod-badge{position:absolute;left:9px;top:9px;background:#f26850;border-radius:12px;padding:5px 7px;font-size:7px;text-transform:uppercase;letter-spacing:1px;color:white;font-weight:bold}

.roles-section{padding-top:86px;padding-bottom:94px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.role-card{position:relative;min-height:234px;padding:24px 22px 28px;border:1px solid #e2dfd7;background:#f9f8f4;overflow:hidden}
.role-card h3{font-size:23px;font-weight:500;letter-spacing:-.5px;margin-bottom:10px}
.role-card>p{font-size:10px;line-height:1.7;color:#6d6a63;max-width:250px}
.role-tag{position:absolute;bottom:17px;right:18px;font-size:8px;letter-spacing:1.4px;color:#aaa69d}
.alien-card{background:#23232a;color:#f6f4ef;border-color:#23232a}
.alien-card>p{color:#b2afb6}
.jester-card{border-color:#dfb4fa}
.jester-card:before{content:'';position:absolute;width:110px;height:110px;border-radius:50%;background:#A401F6;filter:blur(70px);opacity:.16;right:-30px;top:-30px}
.jester-card .role-tag{color:#A401F6}

.game-hero{min-height:440px;padding:70px 12.2%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.game-hero-copy{max-width:760px;margin:0 auto;text-align:center;position:relative;z-index:1}
.game-hero-copy>p{font-size:13px;line-height:1.8;color:#6c6961;max-width:360px;margin:0 auto 23px}
.game-title-logo{display:block;width:min(560px,90vw);max-height:260px;object-fit:contain;object-position:center;margin:0 auto 24px}
.msm-hero{background:#322431 url('assets/MonsterSeekingMonster/background.png') center/cover fixed no-repeat;color:#fff}
.msm-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#201620d9 0%,#281b28b8 43%,#281b2845 100%)}
.msm-hero .game-hero-copy>p{color:#f0e9ef}
.ptb-hero{background:#030712 url('assets/PushTheButton/background.png') center/cover fixed no-repeat;color:#f6f4ef}
.ptb-hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#030712ee 0%,#030712bc 48%,#03071238 100%)}
.ptb-hero .game-hero-copy>p{color:#aaa8b0}

body:has(.msm-hero){background:#211822 url('assets/MonsterSeekingMonster/background.png') center top/cover fixed no-repeat;color:#fff;font-family:MonsterMingle,Arial,sans-serif}
body:has(.msm-hero) .topbar{background:#241a25d9;border-color:#ffffff2b;color:#fff}
body:has(.msm-hero) .topbar nav{color:#e9dce9}
body:has(.msm-hero) .roster-section{background:#211822d9;color:#fff}
body:has(.msm-hero) .roster-section .section-heading h2{color:#fff}
body:has(.msm-hero) .monster-card{background:#342a36;color:#fff}
body:has(.msm-hero) .monster-portrait{background:#493b4b}
body:has(.msm-hero) .monster-sub{color:#c4b6c4}
body:has(.msm-hero) .filter{border-color:#7d687e;color:#e4d7e4}
body:has(.msm-hero) .filter.active{background:#ff98c7;color:#241a25;border-color:#ff98c7}
body:has(.msm-hero) footer{background:#211822;color:#c6b4c5}
body:has(.msm-hero) dialog{color:#fff;background:#302532}
body:has(.msm-hero) .dialog-image{background:#493b4b}
body:has(.msm-hero) .dialog-copy>p:last-child{color:#ded0df}

body:has(.ptb-hero){background:#030712 url('assets/PushTheButton/background.png') center top/cover fixed no-repeat;color:#f6f4ef;font-family:PushTheButton,Arial,sans-serif}
body:has(.ptb-hero) .topbar{background:#030712db;color:#fff;border-color:#ffffff20}
body:has(.ptb-hero) .topbar nav{color:#d3d0dc}
body:has(.ptb-hero) .roles-section{background:#030712b8;color:#fff}
body:has(.ptb-hero) .section-heading h2{color:#fff}
body:has(.ptb-hero) .role-card{background:#111521e8;border-color:#363c4b}
body:has(.ptb-hero) .role-card>p{color:#bbb9c3}
body:has(.ptb-hero) .role-tag{color:#aaa6b5}
body:has(.ptb-hero) .alien-card{background:#1d1c2beF;border-color:#45405a}
body:has(.ptb-hero) .jester-card{border-color:#A401F6}
body:has(.ptb-hero) footer{background:#030712;color:#aaa6b5}

@font-face{font-family:MonsterMingle;src:url('assets/MonsterSeekingMonster/font.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:PushTheButton;src:url('assets/PushTheButton/font.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}

.directory-page{background:#fff;color:#171717;font-family:Arial,Helvetica,sans-serif}
.directory{max-width:880px;margin:50px auto;padding:0 28px;font-size:16px}
.directory h1{font-size:2em;line-height:1.2;margin:0 0 16px;font-weight:700;letter-spacing:0}
.directory-tagline{font-size:1.17em;font-weight:bold;margin:0 0 22px}
.directory a{color:#00e;text-decoration:underline}
.directory h2{font-size:1.5em;margin:24px 0 12px}
.directory-game-logo{display:block;width:min(240px,70vw);height:92px;object-fit:contain;object-position:left center}
.directory-links li{min-height:100px}

.monster-fallback{font-size:45px;color:#c2bdb2}
.dialog-image{min-height:310px;background:#ece9e1;display:grid;place-items:center;padding:24px}
.dialog-image img{width:100%;max-height:300px;object-fit:contain}
.dialog-copy{align-self:center;padding:40px 38px}
.dialog-copy h2{font-size:31px;line-height:1.05;letter-spacing:-1px;font-weight:500;margin-bottom:16px}
.dialog-copy>p:last-child{font-size:12px;line-height:1.8;color:#6e6b64}
.dialog-close{position:absolute;top:12px;right:14px;width:30px;height:30px;border:0;border-radius:50%;background:#fff;font-size:21px;cursor:pointer;z-index:3}
dialog{border:0;padding:0;width:min(650px,calc(100% - 32px));background:#f6f4ef;color:#252523;box-shadow:0 25px 90px #15130f50;grid-template-columns:42% 58%;overflow:hidden}
dialog[open]{display:grid}
dialog::backdrop{background:#191814a8;backdrop-filter:blur(3px)}

@media(max-width:800px){
  .roster-section,.roles-section{padding-left:8%;padding-right:8%}
  .monster-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
  .game-hero{padding:56px 8%;min-height:660px}
  .directory{margin:34px auto;padding:0 22px}
  .msm-hero,.ptb-hero{background-position:center}
  .msm-hero:before,.ptb-hero:before{background:linear-gradient(180deg,#141019df 0%,#17121dc2 58%,#16111a66 100%)}
}
@media(max-width:560px){
  .topbar{height:64px;padding:0 6%}
  .topbar nav{gap:17px;font-size:10px}
  .roster-section,.roles-section{padding:60px 6%}
  .section-heading h2{font-size:30px}
  .monster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .monster-card{min-height:190px}
  .monster-portrait{height:138px}
  .monster-portrait img{max-height:130px}
  .role-grid{grid-template-columns:1fr}
  .role-card{min-height:205px}
  dialog[open]{display:flex;flex-direction:column}
  .dialog-image{min-height:215px;height:215px}
  .dialog-image img{max-height:190px}
  .dialog-copy{padding:24px 28px 32px}
  .dialog-copy h2{font-size:27px}
}