:root { --bg:#eef1f3; --panel:#fff; --ink:#1a2229; --muted:#46525d; --line:#d3dae0; --gold:#8a6420; --gold-soft:#f3ead6;
  --good:#1d7148; --bad:#a83a2a; --field:#f7f9fa; --display:"Cinzel",Georgia,serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0e1317; --panel:#161d23; --ink:#e8ecef; --muted:#aab6c0;
  --line:#2b3640; --gold:#d9b871; --gold-soft:#2c2618; --good:#66cc97; --bad:#f08d79; --field:#11171c; color-scheme:dark } }
:root[data-theme="dark"] { --bg:#0e1317; --panel:#161d23; --ink:#e8ecef; --muted:#aab6c0; --line:#2b3640; --gold:#d9b871;
  --gold-soft:#2c2618; --good:#66cc97; --bad:#f08d79; --field:#11171c; color-scheme:dark }
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.6 var(--body); padding:20px max(16px,env(safe-area-inset-left)) 40px }
.wrap { max-width:960px; margin:0 auto; display:grid; gap:18px }
a { color:var(--gold) }
nav.top { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; justify-content:space-between }
nav.top .brand { font:700 22px var(--display); color:var(--ink); text-decoration:none }
nav.top .brand span { color:var(--gold) }
nav.top .links { display:flex; flex-wrap:wrap; gap:4px 16px; font-weight:600 }
nav.top .links a { text-decoration:none }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:18px; display:grid; gap:12px; min-width:0 }
h1 { font:700 clamp(28px,5vw,40px)/1.1 var(--display); margin:0 }
h2 { font:700 20px var(--display); margin:0 }
h3 { font:600 13.5px var(--body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 }
.hint, .meta { color:var(--muted); font-size:14.5px }
.head { display:flex; gap:16px; align-items:center }
.head img { width:88px; height:88px; border-radius:12px; border:1px solid var(--gold); object-fit:cover; flex:none }
.cta { display:inline-block; font:700 15px var(--body); letter-spacing:.06em; text-transform:uppercase; color:var(--bg); background:var(--gold);
  border-radius:6px; padding:11px 16px; text-decoration:none }
.ghost { display:inline-block; font:600 14px var(--body); color:var(--gold); border:1px solid var(--gold); border-radius:6px; padding:6px 12px; text-decoration:none }
.rolenav { display:flex; flex-wrap:wrap; gap:8px }
.items { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; list-style:none; margin:0; padding:0 }
.items li { display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; padding:6px 8px; background:var(--field); font-size:14.5px; font-weight:600 }
.items img, .ico { width:36px; height:36px; border-radius:6px; flex:none; object-fit:cover }
.items .n { color:var(--gold); font:700 12px var(--mono); min-width:18px; text-align:center }
/* polish layer: same look as the app */
.panel { border-radius:14px; box-shadow:0 1px 2px rgb(16 24 32 / .05), 0 4px 14px rgb(16 24 32 / .04) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .panel { box-shadow:0 1px 2px rgb(0 0 0 / .4) } }
:root[data-theme="dark"] .panel { box-shadow:0 1px 2px rgb(0 0 0 / .4) }
.items li { padding:10px 12px; gap:12px; border-radius:12px; background:var(--panel) }
.icon-wrap { position:relative; width:40px; height:40px; flex:none; display:block }
.icon-wrap img { width:40px; height:40px; border-radius:9px }
.icon-wrap .badge { position:absolute; top:-7px; left:-7px; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--gold); color:var(--bg);
  font:700 11px/20px var(--body); text-align:center; box-shadow:0 0 0 2px var(--panel) }
.ghost, .cta { display:inline-flex; align-items:center; justify-content:center; min-height:40px; border-radius:10px; transition:background-color .15s, border-color .15s, filter .15s }
.ghost { color:var(--ink); border-color:var(--line); background:var(--panel); padding:0 14px }
.ghost:hover { border-color:var(--gold); background:var(--gold-soft) }
.cta { box-shadow:0 1px 2px rgb(0 0 0 / .15), inset 0 1px 0 rgb(255 255 255 / .18); padding:0 18px }
.cta:hover { filter:brightness(1.08) }
.face { transition:border-color .15s } .face:hover { border-color:var(--gold) }
.grid a { border-radius:12px; transition:background-color .15s, border-color .15s }
.grid img { border-radius:12px }
tbody tr { transition:background-color .15s } tbody tr:hover { background:var(--field) }
.tier { border-radius:8px }
.guide, .abil li { border-radius:12px }
.support .ghost { color:var(--gold); border-color:var(--gold) }
a.godcell { text-decoration:none; color:var(--ink) } a.godcell:hover { color:var(--gold) }
nav.top .links a:hover, .fresh a:hover { text-decoration:underline; text-underline-offset:3px }
.prose p { margin:0 0 10px } .prose p:last-child { margin:0 }
.abil { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.abil li { border:1px solid var(--line); border-radius:8px; padding:8px 12px; background:var(--field) }
.abil .k { font:700 12px var(--body); letter-spacing:.08em; text-transform:uppercase; color:var(--gold) }
.abil .nm { font-weight:700 }
.faces { display:flex; flex-wrap:wrap; gap:6px }
.face { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:2px 10px 2px 2px;
  background:var(--field); font-size:14px; text-decoration:none; color:var(--ink) }
.face img { width:26px; height:26px; border-radius:50%; object-fit:cover }
.good { color:var(--good); font-weight:600 } .bad { color:var(--bad); font-weight:600 }
.tbl { overflow-x:auto }
table { border-collapse:collapse; width:100%; font-size:14.5px; font-variant-numeric:tabular-nums }
th, td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); white-space:nowrap }
th { font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted) }
td.num, th.num { text-align:right }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px }
.grid a { display:grid; justify-items:center; gap:4px; text-decoration:none; color:var(--ink); font-weight:600; font-size:13.5px; text-align:center;
  border:1px solid transparent; border-radius:8px; padding:6px 2px }
.grid a:hover { border-color:var(--gold); background:var(--gold-soft) }
.grid img { width:64px; height:64px; border-radius:10px; object-fit:cover }
.tier { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:6px; font:700 15px var(--body); color:#fff }
.t-S { background:#b8860b } .t-A { background:#2e7d4f } .t-B { background:#3a6ea5 } .t-C { background:#6b6f76 } .t-D { background:#9b3d30 }
.guide { border:1px solid var(--line); border-radius:8px; padding:10px 12px; display:grid; gap:6px; background:var(--field) }
table.skills td { padding:3px 4px; text-align:center; min-width:22px; font-size:12.5px; color:var(--muted) }
table.skills td:first-child { text-align:left; color:var(--ink); font-weight:600; white-space:nowrap }
table.skills td.lit { background:var(--gold); color:var(--bg); font-weight:700; border-radius:4px }
.godcell { display:flex; align-items:center; gap:8px; font-weight:600 } .godcell img { width:32px; height:32px; border-radius:6px }
.foot { color:var(--muted); font-size:13.5px; display:grid; gap:6px }
.foot ul { margin:0; padding-left:18px } .foot p { margin:0 }
.support { color:var(--ink); font-size:15px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px }
@media (max-width:520px) { .head img { width:64px; height:64px } }
@media (max-width:400px) { th, td { padding:6px 4px } th { letter-spacing:0 } .godcell { gap:6px } .godcell img { width:26px; height:26px }
  .tier { width:26px; height:26px; font-size:13px } table { font-size:13.5px } }

/* home page: all gods with a Build button */
.hero h1 { margin:0 0 6px }
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border-radius:10px; font-weight:700;
  text-decoration:none; background:var(--gold); color:var(--bg); border:1px solid var(--gold); transition:filter .15s, background-color .15s }
.btn:hover { filter:brightness(1.08) }
.btn.ghost { background:transparent; color:var(--gold) }
.btn.ghost:hover { background:var(--gold-soft); filter:none }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px }
.filters input { flex:1 1 200px; min-width:0; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--bg);
  color:var(--ink); font:inherit }
.filters input:focus { outline:2px solid var(--gold); outline-offset:1px }
.seg { display:flex; flex-wrap:wrap; gap:6px }
.seg button { min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--panel); color:var(--ink);
  font:600 14px var(--body, inherit); cursor:pointer }
.seg button[aria-pressed="true"] { background:var(--gold); border-color:var(--gold); color:var(--bg) }
.ggrid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px }
.gcard { display:grid; grid-template-rows:1fr auto; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel);
  transition:border-color .15s, box-shadow .15s }
.gcard:hover { border-color:var(--gold); box-shadow:0 4px 14px rgba(0,0,0,.08) }
.gcard[hidden] { display:none }
.gface { display:grid; justify-items:center; gap:3px; padding:12px 8px 8px; text-decoration:none; color:var(--ink); text-align:center }
.gface img { width:72px; height:72px; border-radius:12px; object-fit:cover }
.gname { font-weight:700; font-size:15px; line-height:1.2 }
.grole { font-size:12.5px; color:var(--muted) }
.gbuild { display:block; text-align:center; padding:9px 0; font-weight:700; font-size:14px; text-decoration:none; color:var(--gold);
  border-top:1px solid var(--line); background:var(--gold-soft) }
.gbuild:hover { background:var(--gold); color:var(--bg) }
@media (max-width:420px) { .ggrid { grid-template-columns:repeat(2,minmax(0,1fr)) } }