/* Layout: a castle hall. Seal-marked header with treasury balance, a central "claim chamber" flanked by stone pillars, side tower of stats/payouts, ad slots framed like gilded panels. */
:root{
  --bg:#0e1535; --surface:#162059; --surface-2:#1d2a70; --ink:#f3ecdc; --muted:#a8afd6;
  --gold:#d6b25a; --gold-hi:#f4dd94; --gold-ink:#1a1606; --line:rgba(214,178,90,.28);
  --ok:#7fd3a0; --warn:#f0b35a; --fleck:rgba(244,221,148,.10); --vein:rgba(255,255,255,.035);
  --stone-deep:#0f1c6e; --stone:#2440b8; --stone-hi:#3d5fe0; --pfleck:#f1cf6a; --pfleck2:#f8e3a0;
  --ori-lo:#9a4f1f; --ori:#d98a45; --ori-hi:#f6c27a;
  --display:"Marcellus SC","Trajan Pro",Georgia,serif;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"Alegreya Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f4e1ca; --surface:#fff7ec; --surface-2:#f3d8bb; --ink:#3a1108; --muted:#7a4733;
  --gold:#9a5a0e; --gold-hi:#b8741a; --gold-ink:#fff8ec; --line:rgba(154,90,14,.34);
  --ok:#1d6b42; --warn:#a1360b; --fleck:rgba(176,52,20,.11); --vein:rgba(120,30,10,.05);
  --stone-deep:#5e1408; --stone:#a3301a; --stone-hi:#d4572b; --pfleck:#f4d99c; --pfleck2:#86d3cf; color-scheme:light;}

*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.5;
  background-image:
    radial-gradient(circle at 20% 30%,var(--fleck) 0 1.5px,transparent 2px),
    radial-gradient(circle at 70% 80%,var(--fleck) 0 1px,transparent 1.5px),
    linear-gradient(115deg,transparent 40%,var(--vein) 45%,transparent 52%),
    linear-gradient(160deg,transparent 60%,var(--vein) 63%,transparent 70%);
  background-size:90px 90px,60px 60px,100% 100%,100% 100%;background-attachment:fixed}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}

/* header */
header{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,transparent);backdrop-filter:blur(6px);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding-block:12px}
.crest{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.seal{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);object-fit:cover;flex:none}
.seal.l{display:none}
:root[data-theme="light"] .seal.d{display:none}
:root[data-theme="light"] .seal.l{display:block}
.themebtn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);border-radius:999px;padding:5px 12px;cursor:pointer;font-size:.82rem;color:var(--muted)}
.themebtn i{width:12px;height:12px;border-radius:50%;border:1px solid var(--gold);background:linear-gradient(135deg,#2440b8 50%,#b8401c 50%)}
.themebtn:hover{color:var(--ink);border-color:var(--gold)}
.crest b{font-family:var(--display);font-size:1.45rem;letter-spacing:.06em;font-weight:400}
.crest b span{color:var(--gold)}
nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
nav button{background:none;border:1px solid transparent;border-radius:999px;padding:6px 14px;cursor:pointer;font-family:var(--display);letter-spacing:.05em;font-size:.92rem;color:var(--muted)}
nav button[aria-selected="true"]{color:var(--gold-hi);border-color:var(--line);background:var(--surface-2)}
.treasury{display:flex;align-items:baseline;gap:8px;padding:6px 14px;border:1px solid var(--gold);border-radius:6px;background:var(--surface-2)}
.treasury small{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.treasury strong{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--gold-hi);font-weight:500}
.proto{font-size:.78rem;text-align:center;padding:5px 16px;background:var(--gold);color:var(--gold-ink);letter-spacing:.04em}

/* ad slots */
.adslot{border:1px dashed var(--line);border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;background:repeating-linear-gradient(45deg,transparent 0 10px,var(--fleck) 10px 11px)}
.ad-leader{height:90px;max-width:728px;margin:20px auto}
.ad-box{height:250px}

/* grid */
main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;padding-block:8px 48px}
@media (max-width:860px){main{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;position:relative}
.panel.gilded{border:1px solid var(--gold);box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--line)}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:.04em;margin:0;text-wrap:balance}
h1{font-size:clamp(1.6rem,3.6vw,2.3rem)}
h2{font-size:1.25rem}
h3{font-size:1rem;color:var(--gold)}
.lede{font-family:var(--serif);font-size:1.2rem;color:var(--muted);margin:.25rem 0 0;font-style:italic}
.label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.stack{display:flex;flex-direction:column;gap:20px}
.view[hidden]{display:none}

/* claim chamber */
.chamber{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;margin-top:20px}
@media (max-width:600px){.chamber{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}}
/* gatehouse: portcullis rises as the cooldown runs out */
.gate{width:200px;flex:none;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.gate svg{width:100%;height:auto;overflow:visible}
.gate .stone{fill:var(--surface-2);stroke:var(--gold);stroke-width:1.2}
.gate .seam{stroke:var(--line);stroke-width:1;fill:none}
.gate .hollow{fill:var(--bg);transition:fill .6s}
.gate .glow{opacity:0;transition:opacity .8s}
.gate.open .glow{opacity:1}
.gate .bars{stroke:var(--gold);stroke-width:2.4;fill:none}
.gate .spikes{fill:var(--gold)}
.gate .portcullis{transition:transform 1.4s cubic-bezier(.6,0,.3,1)}
.gate .flag{fill:var(--gold)}
.gate .time{font-family:var(--mono);font-size:1.5rem;color:var(--gold-hi);line-height:1.1}
.gate .rlabel{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* stone pillars (lapis in dark, red jasper in light) with orichalcum capitals and bases */
.hall{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:22px}
.pillar{display:flex;flex-direction:column;align-items:center}
.pillar svg{display:block;width:46px;height:auto;flex:none}
.shaft{flex:1;width:32px;min-height:120px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 30% 20%,var(--pfleck) 0 1.1px,transparent 1.6px) 0 0/13px 37px,
    radial-gradient(circle at 70% 60%,var(--pfleck2) 0 .9px,transparent 1.4px) 0 0/17px 23px,
    radial-gradient(ellipse 3px 2px at 50% 50%,color-mix(in srgb,var(--pfleck) 85%,white) 0 40%,transparent 70%) 0 0/21px 61px,
    repeating-linear-gradient(90deg,rgba(0,0,10,.28) 0 1.5px,transparent 1.5px 8px),
    linear-gradient(90deg,var(--stone-deep),var(--stone) 35%,var(--stone-hi) 50%,var(--stone) 65%,var(--stone-deep));
  box-shadow:inset 0 0 0 1px rgba(241,207,106,.35)}
@media (max-width:720px){.hall{grid-template-columns:minmax(0,1fr)}.pillar{display:none}}
.reward{font-family:var(--serif);font-size:1.15rem}
.reward strong{font-family:var(--mono);color:var(--gold-hi);font-size:1.35rem;font-weight:500}

.field{display:flex;flex-direction:column;gap:6px}
.field input,.field select{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:10px 12px;width:100%}
.btn{appearance:none;border:1px solid var(--gold);border-radius:6px;padding:12px 22px;cursor:pointer;font-family:var(--display);letter-spacing:.08em;font-size:1rem;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);transition:transform .15s,filter .15s}
.btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:none;color:var(--gold);}
.btn.small{padding:6px 12px;font-size:.82rem}

/* captcha */
.captcha{border:1px solid var(--line);border-radius:8px;padding:14px;background:var(--bg)}
.captcha p{margin:0 0 10px;font-size:.95rem}
.captcha p b{color:var(--gold)}
.icons{display:flex;gap:8px;flex-wrap:wrap}
.icons button{width:54px;height:54px;border-radius:8px;border:1px solid var(--line);background:var(--surface);cursor:pointer;display:grid;place-items:center;padding:0;transition:border-color .15s,background .15s}
.icons button:hover{border-color:var(--gold)}
.icons button[aria-pressed="true"]{border-color:var(--gold);background:var(--surface-2);box-shadow:0 0 0 2px var(--gold) inset}
.icons svg{width:30px;height:30px;fill:var(--ink)}
.msg{min-height:1.5em;font-size:.92rem}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--warn)}

/* level teaser */
.meter{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold-hi));width:0;transition:width .6s}
.rowbetween{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}

/* side */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stats div{display:flex;flex-direction:column}
.stats .mono{font-size:1.05rem}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.feed li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.88rem}
.feed li:last-child{border-bottom:0}
.feed .addr{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.chip{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:1px 8px;color:var(--gold)}

/* ptc */
.ptc{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:16px}
.ad{border:1px solid var(--line);border-radius:8px;padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.ad .rowbetween span{font-size:.85rem;color:var(--muted)}
.ad.done{opacity:.55}
.viewer{margin-top:18px}
.viewer .screen{border:1px solid var(--line);border-radius:8px;min-height:160px;display:grid;place-items:center;text-align:center;padding:20px;background:var(--bg)}

/* withdraw */
.coins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
@media (max-width:480px){.coins{grid-template-columns:minmax(0,1fr)}}
.coin{border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer;background:var(--bg);text-align:left}
.coin[aria-pressed="true"]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.coin b{font-family:var(--display);letter-spacing:.06em;display:block}
.coin span{font-size:.82rem;color:var(--muted)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line)}
th{font-weight:500;color:var(--muted);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.tablewrap{overflow-x:auto}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,calc(100% + 48px));visibility:hidden;background:var(--surface-2);border:1px solid var(--gold);color:var(--ink);padding:12px 20px;border-radius:8px;transition:transform .35s;z-index:20;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0);visibility:visible}
.coinburst{position:fixed;pointer-events:none;z-index:30;font-family:var(--mono);color:var(--gold-hi);font-size:1.3rem;animation:rise 1.4s ease-out forwards}
@keyframes rise{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-90px)}}
footer{border-top:1px solid var(--line);padding-block:20px;color:var(--muted);font-size:.85rem}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* sign-in */
.inline{display:flex;gap:8px;flex-wrap:wrap}
.inline input{flex:1;min-width:0}
.signedin{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:.92rem}
.signedin .mono{overflow-wrap:anywhere}
.linkbtn{background:none;border:0;color:var(--gold);text-decoration:underline;cursor:pointer;padding:0;font-size:.85rem}

/* header profile button */
.profilebtn{display:flex;align-items:center;gap:6px;border:1px solid var(--gold);border-radius:6px;background:var(--surface-2);padding:6px 14px;cursor:pointer;font-family:var(--display);letter-spacing:.05em;font-size:.92rem;color:var(--ink)}
.profilebtn svg{width:16px;height:16px;fill:var(--gold)}
.profilebtn:hover,.profilebtn[aria-current="page"]{border-color:var(--gold-hi);color:var(--gold-hi)}

/* treasury vault: the main balance display, top of the side tower */
.vault{display:flex;flex-direction:column;gap:2px}
.vault-bal{font-size:2rem;font-weight:500;color:var(--gold-hi);line-height:1.15;margin-top:4px;overflow-wrap:anywhere}
.vault-sub{font-size:.85rem;color:var(--muted)}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.stats3 div{display:flex;flex-direction:column;min-width:0}
.stats3 .label{font-size:.66rem}

/* profile */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin:20px 0 0}
.kv div{border:1px solid var(--line);border-radius:8px;padding:12px 14px;background:var(--bg);min-width:0}
.kv dt{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.kv dd{margin:4px 0 0;font-size:1.05rem;overflow-wrap:anywhere}