/* Feature Creature Chess: shared site styles */
:root{--bg:#1d1b3a;--bg2:#14132b;--panel:#2b2859;--panel2:#363273;--ink:#fff7e6;--mute:#b9b4e0;--a:#ffd23f;--a2:#ffb000;--hi:#3fa9ff;--pw:#ff6fb5;--ok:#3ee6a8;--line:#ffffff1a;--max:1120px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{background:var(--bg2)}
body{margin:0;min-height:100vh;background:radial-gradient(1200px 700px at 50% -200px,#3a3680 0%,var(--bg) 55%,var(--bg2) 100%) no-repeat,var(--bg2);color:var(--ink);font-family:"Baloo 2","Trebuchet MS",system-ui,sans-serif;line-height:1.55;font-size:17px}
a{color:var(--a)}a:hover{color:#ffe27a}
img{max-width:100%}
.wrap{width:min(var(--max),100% - 32px);margin:0 auto}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:#14132bea;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;min-height:58px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:800;font-size:1.15rem;letter-spacing:.3px;white-space:nowrap}
.brand .logo{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--a),var(--pw));display:grid;place-items:center;font-size:1.2rem;box-shadow:0 3px 0 #0005}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--mute);text-decoration:none;font-weight:700;padding:6px 11px;border-radius:10px}
.nav a:hover{color:var(--ink);background:#ffffff10}
.nav a[aria-current="page"]{color:#2b2200;background:var(--a)}
.nav a.play{color:#2b2200;background:var(--ok)}
@media (max-width:640px){.site-head .wrap{gap:6px;padding:6px 0}.nav{margin-left:0;width:100%;justify-content:space-between}.nav a{padding:5px 8px;font-size:.92rem}}

/* footer */
.site-foot{margin-top:56px;border-top:1px solid var(--line);background:#14132b;color:var(--mute);font-size:.92rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between;padding:22px 0}
.site-foot nav{display:flex;gap:16px;flex-wrap:wrap}
.site-foot a{color:var(--mute)}.site-foot a:hover{color:var(--ink)}

/* content */
main{display:block}
.hero{padding:56px 0 30px;text-align:center}
.hero h1{font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.05;margin:0 0 12px}
.hero h1 span{color:var(--a)}
.hero p.lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--mute);max-width:720px;margin:0 auto 22px}
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:800;text-decoration:none;background:var(--a);color:#2b2200;border:0;border-radius:14px;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 #0006;transition:transform .1s}
.btn:hover{color:#2b2200;transform:translateY(-1px)}.btn:active{transform:translateY(2px);box-shadow:0 2px 0 #0006}
.btn.alt{background:var(--panel2);color:var(--ink)}.btn.alt:hover{color:var(--ink)}
.btn.big{font-size:1.25rem;padding:14px 30px}
.btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:44px 0 12px;line-height:1.15}
h3{margin:22px 0 6px;font-size:1.2rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.grid{display:grid;gap:14px}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.feat .ic{font-size:1.8rem;line-height:1}
.feat h3{margin:8px 0 4px}
.feat p{margin:0;color:var(--mute);font-size:.98rem}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.modes a{display:block;text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 14px;font-weight:700}
.modes a small{display:block;color:var(--mute);font-weight:500}
.modes a:hover{border-color:var(--a);color:var(--ink)}
.prose{max-width:780px}
.prose p,.prose li{color:#ece6ff}
.prose ul{padding-left:1.2em}
.prose li{margin:4px 0}
.note{background:#ffd23f14;border:1px solid #ffd23f55;border-radius:14px;padding:12px 16px}
table.t{width:100%;border-collapse:collapse;font-size:.95rem}
table.t th,table.t td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t th{color:var(--a)}
.toc{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.toc a{background:var(--panel);border-radius:999px;padding:4px 12px;text-decoration:none;font-weight:700;font-size:.92rem}
kbd{background:#0004;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:0 6px;font-family:inherit;font-size:.9em}

/* monsters */
.mon-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0}
.mon-tools input,.mon-tools select{font:inherit;font-size:16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 12px;min-height:42px}
.mon-tools input{flex:1 1 220px}
.mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.mon{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:8px}
.mon .top{display:flex;gap:12px;align-items:center}
.mon img{width:76px;height:76px;border-radius:50%;border:3px solid #fff4;flex:none;background:#0003;object-fit:cover}
.mon h3{margin:0;font-size:1.15rem}
.mon .sub{color:var(--mute);font-size:.88rem;line-height:1.3}
.tag{display:inline-block;font-size:.78rem;font-weight:800;border-radius:999px;padding:1px 9px;margin:2px 4px 0 0;background:#ffffff14}
.pw{font-size:.92rem;line-height:1.35}
.pw b{display:inline-block;min-width:4.6em}
.pw.team b{color:#7fc8ff}.pw.atk b{color:var(--a)}.pw.tr b{color:var(--pw)}
.empty{color:var(--mute);padding:30px;text-align:center}

/* forms */
form.f{display:grid;gap:12px;max-width:620px}
form.f label{display:grid;gap:4px;font-weight:700}
form.f input,form.f textarea{font:inherit;font-size:16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
form.f textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}
.ok-msg{background:#3ee6a822;border:1px solid #3ee6a888;border-radius:12px;padding:12px 16px}
.err-msg{background:#ff6fb522;border:1px solid #ff6fb588;border-radius:12px;padding:12px 16px}

/* ad slots: invisible until an ad unit is configured in assets/ads.js */
.ad{display:block;margin:22px auto;width:100%;text-align:center}
.ad[hidden]{display:none!important}
.ad .ad-label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:#b9b4e099;margin-bottom:4px}
.ad ins{display:block}
.brand img.logo{background:none;display:block;border-radius:9px;box-shadow:0 3px 0 #0005}
.hero .tags{margin:18px auto 0;max-width:720px;color:#b9b4e0aa;font-size:.92rem;word-spacing:4px}

/* Games dropdown in the main menu */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd>summary{list-style:none;cursor:pointer;color:var(--mute);font-weight:700;padding:6px 11px;border-radius:10px;user-select:none}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-dd>summary::after{content:" \25BE";font-size:.85em}
.nav-dd>summary:hover,.nav-dd[open]>summary{color:var(--ink);background:#ffffff10}
.nav-dd.cur>summary{color:#2b2200;background:var(--a)}
.nav-dd .nav-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;min-width:210px;display:flex;flex-direction:column;gap:2px;padding:6px;background:#2b2859;border:1px solid #ffffff22;border-radius:12px;box-shadow:0 12px 30px #0009}
.nav-dd .nav-menu a{display:block;white-space:nowrap;color:var(--ink)}
.nav-dd .nav-menu a[aria-current="page"]{color:#2b2200;background:var(--a)}
.nav-dd .nav-menu small{display:block;font-weight:500;font-size:.75rem;opacity:.75}
@media (max-width:640px){.nav-dd>summary{padding:5px 8px;font-size:.92rem}}

/* Book link in the header (opens Amazon in a new tab) */
.book-link{display:inline-flex;align-items:center;gap:5px;text-decoration:none;font-weight:800;font-size:.9rem;color:var(--ink);padding:5px 12px;border-radius:999px;border:2px solid var(--pw);background:#ff6fb51f;white-space:nowrap;transition:background .15s,transform .15s}
.book-link:hover,.book-link:focus-visible{background:var(--pw);color:#fff;transform:translateY(-1px)}
.book-link small{font-size:.8em;opacity:.85}
@media (max-width:640px){.book-link{font-size:.8rem;padding:4px 9px}}

/* Books We Liked dropdown (each link opens Amazon in a new tab) */
.book-dd>summary{color:var(--ink);font-size:.9rem;font-weight:800;padding:5px 12px;border:2px solid var(--pw);border-radius:999px;background:#ff6fb51f}
.book-dd>summary:hover,.book-dd[open]>summary{color:#fff;background:var(--pw)}
.nav-dd .nav-menu.r{left:auto;right:0;min-width:270px;max-width:min(340px,92vw)}
.book-dd .nav-menu a{white-space:normal;line-height:1.25;padding:7px 10px}
.book-dd .dd-note{margin:4px 10px 2px;font-size:.72rem;color:var(--mute)}
@media (max-width:640px){.book-dd>summary{font-size:.8rem;padding:4px 9px}.nav-dd .nav-menu.r{right:auto;left:0}}
.book-dd .nav-menu a{display:block;text-decoration:none;color:var(--ink);font-weight:700;border-radius:10px}
.book-dd .nav-menu a:hover,.book-dd .nav-menu a:focus-visible{background:#ffffff14;color:var(--ink)}
.book-dd .nav-menu small{display:block;font-weight:500;font-size:.75rem;color:var(--mute)}