/* Hao Labs Games — "minimal but edgy" shell. Near-black base, hot ember
   accent, gold for scores/chips, condensed display type, clipped corners. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0a0d;--bg2:#0e0e14;--panel:#13131a;--panel2:#181822;
  --line:rgba(255,255,255,.06);--line2:rgba(255,255,255,.1);
  --ink:#ecedef;--dim:#8a8f9e;--faint:#565b68;
  --acc:#ff4a2d;--acc-glow:rgba(255,74,45,.35);
  --gold:#ffb400;--grn:#3ddc97;--red:#ff4a5e;--vio:#7c5cff;
  --disp:'Chakra Petch','Segoe UI',sans-serif;
  --body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
}
body{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(1200px 500px at 70% -10%,rgba(255,74,45,.06),transparent 60%),
  radial-gradient(900px 420px at 10% 0,rgba(124,92,255,.05),transparent 55%),
  var(--bg);
  color:var(--ink);font-family:var(--body);font-size:15px}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:none;filter:brightness(1.15)}
h1,h2,h3,.disp{font-family:var(--disp);text-transform:uppercase;letter-spacing:.02em}

/* ---- clipped-corner card primitive ---- */
.card,.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  padding:1.3rem 1.4rem;position:relative}
.card::before,.panel::before{content:'';position:absolute;inset:0 auto auto 0;width:34px;height:2px;background:var(--acc);opacity:.85}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 1.5rem;border-bottom:1px solid var(--line);
  background:rgba(9,9,12,.92);backdrop-filter:none;position:sticky;top:0;z-index:50}
.brand{font-family:var(--disp);font-weight:700;font-size:1.02rem;letter-spacing:.06em;color:var(--ink);text-transform:uppercase;white-space:nowrap}
.brand b{color:var(--acc)}
.brand .sl{color:var(--faint);font-weight:500}
.topbar nav{display:flex;align-items:center;gap:1.25rem;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--disp);font-weight:600}
.topbar nav a{color:var(--dim);padding:.25rem 0;border-bottom:2px solid transparent}
.topbar nav a:hover{color:var(--ink)}
.topbar nav a.on{color:var(--ink);border-bottom-color:var(--acc)}
.topbar nav a b{color:var(--gold);font-weight:700}
.topbar .who{display:flex;align-items:center;gap:.5rem;color:var(--ink)}
.topbar .cta{background:linear-gradient(135deg,var(--acc),#ff7a2d);color:#100804;padding:.5rem 1.05rem;font-weight:700;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.topbar .cta:hover{filter:brightness(1.12)}

main{flex:1;width:100%;max-width:1120px;margin:0 auto;padding:2.2rem 1.4rem}
footer{padding:1.1rem;text-align:center;color:var(--faint);font-size:.74rem;border-top:1px solid var(--line);letter-spacing:.03em}

/* ---- section headers ---- */
.sec{display:flex;align-items:center;gap:.7rem;margin:2.4rem 0 1.1rem}
.sec h2{font-size:1rem;letter-spacing:.1em}
.sec::before{content:'';width:4px;height:18px;background:var(--acc);transform:skewX(-12deg)}
.sec .more{margin-left:auto;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.sec .more:hover{color:var(--acc)}

/* ---- hero ---- */
.hero{padding:3.2rem 0 2.6rem;position:relative}
.hero .kick{color:var(--acc);font-family:var(--disp);font-weight:600;font-size:.78rem;letter-spacing:.35em;text-transform:uppercase}
.hero h1{font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:700;line-height:1.04;margin:.5rem 0 .8rem}
.hero h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px var(--acc)}
.hero p{color:var(--dim);max-width:520px;line-height:1.65}
.hero .row{display:flex;gap:.8rem;margin-top:1.5rem;flex-wrap:wrap}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  font-family:var(--disp);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.68rem 1.5rem;border:none;cursor:pointer;color:#140a05;
  background:linear-gradient(135deg,var(--acc),#ff7a2d);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.btn:hover{filter:brightness(1.12)}
.btn[disabled]{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc)}
.btn.gold{background:linear-gradient(135deg,var(--gold),#ffd34d);color:#151002}
.btn.block{width:100%}

/* ---- game cards ---- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}
.gcard{position:relative;border:1px solid var(--line);background:var(--panel);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
  display:flex;flex-direction:column;overflow:hidden}
.gcard .art{height:150px;display:flex;align-items:center;justify-content:center;font-size:4.2rem;position:relative;
  background:linear-gradient(135deg,rgba(255,74,45,.16),rgba(124,92,255,.10) 60%,transparent),var(--bg2)}
.gcard .art::after{content:'';position:absolute;inset:0;background:
  repeating-linear-gradient(-55deg,transparent 0 14px,rgba(255,255,255,.02) 14px 15px)}
.gcard.jade .art{background:linear-gradient(135deg,rgba(61,220,151,.15),rgba(46,201,255,.07) 60%,transparent),var(--bg2)}
.gcard.gold .art{background:linear-gradient(135deg,rgba(255,180,0,.16),rgba(255,74,45,.09) 60%,transparent),var(--bg2)}
.gcard .body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.gcard h2{font-size:1.12rem}
.gcard p{color:var(--dim);font-size:.85rem;line-height:1.6;flex:1}
.tags{display:flex;gap:.4rem;flex-wrap:wrap}
.tag{font-family:var(--disp);font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line2);padding:.18rem .5rem;transform:skewX(-8deg)}
.tag.hot{color:var(--acc);border-color:var(--acc-glow)}
.tag.au{color:var(--gold);border-color:rgba(255,180,0,.4)}

/* ---- stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1rem}
.stat{background:var(--panel);border:1px solid var(--line);padding:.9rem 1.05rem;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.stat .n{font-family:var(--disp);font-size:1.55rem;font-weight:700;line-height:1.1}
.stat .n.au{color:var(--gold)}.stat .n.hot{color:var(--acc)}.stat .n.ok{color:var(--grn)}
.stat .l{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:.2rem}

/* ---- avatars / emblems ---- */
.hex{display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--disp);font-weight:700;color:#0c0c10;text-transform:uppercase;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.hexstack{display:flex}
.hexstack .hex{margin-left:-7px;box-shadow:0 0 0 2px #0c0c10}
.hexstack .hex:first-child{margin-left:0}

/* ---- boards / tables ---- */
table.board{width:100%;border-collapse:separate;border-spacing:0 6px;font-size:.88rem}
table.board th{text-align:left;color:var(--faint);font-family:var(--disp);font-weight:600;font-size:.64rem;
  text-transform:uppercase;letter-spacing:.14em;padding:.2rem .8rem}
table.board td{background:var(--panel);padding:.62rem .8rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
table.board tr td:first-child{border-left:2px solid transparent}
table.board tbody tr:hover td{background:var(--panel2)}
table.board tr.me td{border-top-color:var(--acc-glow);border-bottom-color:var(--acc-glow)}
td.rank{font-family:var(--disp);font-weight:700;color:var(--dim);width:3rem;white-space:nowrap}
tr.r1 td.rank{color:var(--gold)}tr.r2 td.rank{color:#cdd3dd}tr.r3 td.rank{color:#c98a4b}
tr.r1 td:first-child{border-left-color:var(--gold)}
td.num{text-align:right;font-family:var(--disp);font-weight:600}
td.num.au{color:var(--gold)}
.updn{font-size:.7rem;margin-right:.25rem}
.updn.up{color:var(--grn)}.updn.dn{color:var(--red)}
.pname{display:flex;align-items:center;gap:.6rem}
.ttag{font-family:var(--disp);font-size:.66rem;font-weight:700;letter-spacing:.08em;padding:.06rem .34rem;transform:skewX(-8deg);color:#0c0c10}
.empty{color:var(--faint);font-size:.84rem;padding:.9rem .3rem}

/* ---- tabs ---- */
.tabs{display:flex;gap:.5rem;margin-bottom:1.3rem;flex-wrap:wrap}
.tabs a{font-family:var(--disp);font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.45rem 1.1rem;color:var(--dim);border:1px solid var(--line2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.tabs a.on{background:linear-gradient(135deg,var(--acc),#ff7a2d);color:#140a05;border-color:transparent}
.tabs a:hover:not(.on){color:var(--ink);border-color:var(--acc-glow)}

/* ---- forms ---- */
.field{margin-bottom:1rem}
.field label{display:block;font-family:var(--disp);font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.35rem}
.field input,.field select{width:100%;padding:.66rem .75rem;background:var(--bg2);border:1px solid var(--line2);color:var(--ink);font-size:.95rem;font-family:var(--body)}
.field input:focus,.field select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(255,74,45,.12)}
.err{border:1px solid rgba(255,74,94,.5);background:rgba(255,74,94,.08);color:#ff9aa8;padding:.6rem .8rem;font-size:.84rem;margin-bottom:1rem;display:none}
.hint{font-size:.78rem;color:var(--dim);margin-top:.9rem;line-height:1.6}
.notice{border:1px solid rgba(255,180,0,.35);background:rgba(255,180,0,.06);color:#e7c87e;padding:.8rem 1rem;font-size:.85rem;line-height:1.55}

/* ---- auth split layout ---- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 110px);align-items:stretch;gap:0;max-width:980px;margin:1.5rem auto;border:1px solid var(--line)}
.auth .side{position:relative;overflow:hidden;background:
  linear-gradient(160deg,rgba(255,74,45,.14),transparent 55%),
  repeating-linear-gradient(-55deg,transparent 0 18px,rgba(255,255,255,.018) 18px 19px),var(--bg2);
  display:flex;flex-direction:column;justify-content:flex-end;padding:2.2rem}
.auth .side .big{font-family:var(--disp);font-weight:700;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.02;text-transform:uppercase}
.auth .side .big em{font-style:normal;color:transparent;-webkit-text-stroke:1.3px var(--acc)}
.auth .side .sub{color:var(--dim);font-size:.84rem;margin-top:.8rem;max-width:320px;line-height:1.6}
.auth .side .glyph{position:absolute;top:-30px;right:-20px;font-size:9rem;opacity:.08;transform:rotate(12deg)}
.auth .formcol{padding:2.4rem 2.6rem;background:var(--panel)}
.auth h1{font-size:1.25rem;margin-bottom:1.3rem}
@media (max-width:760px){.auth{grid-template-columns:1fr;min-height:0}.auth .side{min-height:180px}}

/* ---- wallet ---- */
.wallet-hero{display:flex;align-items:baseline;gap:.8rem;margin:0 0 1.5rem}
.wallet-hero .big{font-family:var(--disp);font-size:2.6rem;font-weight:700;color:var(--gold);text-shadow:0 0 24px rgba(255,180,0,.25)}
.stack{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.2rem;align-items:start}
.tx-amt.pos{color:var(--grn)}.tx-amt.neg{color:var(--red)}

/* ---- profile ---- */
.phead{display:flex;align-items:center;gap:1.2rem;margin-bottom:1.6rem;flex-wrap:wrap}
.phead .meta .u{font-family:var(--disp);font-size:1.5rem;font-weight:700;text-transform:uppercase;display:flex;align-items:center;gap:.6rem}
.phead .meta .d{color:var(--dim);font-size:.8rem;margin-top:.25rem;letter-spacing:.04em}
.boards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.2rem}

.copybox{display:flex;gap:.5rem;align-items:center;background:var(--bg2);border:1px dashed var(--line2);padding:.5rem .7rem;font-family:var(--disp);letter-spacing:.2em;font-weight:700;color:var(--gold)}
.rolebadge{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,180,0,.4);padding:.1rem .35rem;font-family:var(--disp)}

@media (max-width:760px){
  .topbar{flex-wrap:wrap;padding:.7rem 1rem}
  .topbar nav{gap:.9rem;font-size:.72rem;flex-wrap:wrap}
  main{padding:1.5rem 1rem}
  .auth .formcol{padding:1.6rem 1.3rem}
}