:root{
  --board:#1F1511;
  --clay:#C14B2A;
  --brass:#E9B44C;
  --holo:#A7E8F2;
  --fiber:#D9C7AE;
  --card:#241812;
  --ink:#2A1109;
  --cols:16;
  --disp:'Big Shoulders Display','Oswald',Haettenschweiler,'Arial Narrow',Impact,sans-serif;
  --body:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--board);color:var(--fiber);font-family:var(--body);font-size:15px;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;background:url(texture-cardstock.jpg) center/560px repeat;opacity:.1;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.wrap{max-width:1260px;margin:0 auto;padding:0 18px;position:relative;z-index:1}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(217,199,174,.55)}
h1,h2,h3{font-family:var(--disp);text-transform:uppercase;margin:0;font-weight:800;letter-spacing:.005em;line-height:.9;overflow-wrap:normal;hyphens:none}
a{color:var(--fiber);text-decoration:none}
a:hover{color:var(--holo)}
p{margin:0 0 10px}
img{max-width:100%}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:#1a110d;border-bottom:1px solid rgba(233,180,76,.3);box-shadow:0 2px 0 rgba(0,0,0,.45)}
.topbarin{display:flex;align-items:center;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:9px;min-width:0;color:var(--fiber)}
.brand img{border-radius:4px;display:block;box-shadow:0 1px 0 rgba(255,220,190,.2)}
.bname{font-family:var(--disp);font-size:27px;line-height:1;text-transform:uppercase;letter-spacing:.015em;color:var(--fiber)}
.btick{font-size:11px;color:var(--brass);border:1px solid rgba(233,180,76,.45);padding:3px 6px;border-radius:3px;line-height:1}
.nav{display:flex;align-items:center;gap:20px;margin-left:auto;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:rgba(217,199,174,.78)}
.nav .xlink{color:var(--brass);display:flex}
.acts{display:flex;align-items:center;gap:9px}
.ghost{background:transparent;border:1px solid rgba(233,180,76,.45);color:var(--fiber);font-size:12px;padding:8px 11px;border-radius:3px;cursor:pointer;min-height:38px}
.ghost:hover{border-color:var(--holo);color:var(--holo)}
.primary{display:inline-flex;align-items:center;justify-content:center;background:var(--brass);color:#2A1A08;font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:18px;letter-spacing:.03em;padding:10px 15px 8px;border:0;border-radius:3px;cursor:pointer;box-shadow:0 2px 0 #8d6a24;min-height:40px}
.primary:hover{background:#f6cb6b;color:#2A1A08}
.primary[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.primary.wide{width:100%;margin-top:10px}

/* ---------- card faces ---------- */
.card{position:relative;background:var(--card);border:1px solid rgba(233,180,76,.32);border-radius:5px;box-shadow:0 22px 48px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.4);overflow:hidden;isolation:isolate}
.card::after{content:'';position:absolute;top:-10%;left:-60%;width:140%;height:120%;pointer-events:none;z-index:6;opacity:var(--holoOn,0);transition:opacity .3s ease;mix-blend-mode:screen;background:linear-gradient(104deg,transparent 40%,rgba(167,232,242,.4) 47%,rgba(233,180,76,.3) 51%,rgba(193,75,42,.26) 55%,transparent 63%);transform:translate3d(calc((var(--mx,50) - 50) * 1.1%),0,0)}
.nameplate{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--clay);padding:8px 13px 6px;border-bottom:1px solid rgba(0,0,0,.45);box-shadow:inset 0 1px 0 rgba(255,220,190,.28)}
.nameplate h2{font-size:22px;color:var(--ink)}
.chip{font-size:10px;text-transform:uppercase;letter-spacing:.12em;background:rgba(26,16,12,.6);color:var(--brass);padding:4px 7px;border-radius:2px;white-space:nowrap}
.chip.live{color:var(--holo)}
.pad{padding:13px}
.pad.pt0{padding-top:0}

/* ---------- card table ---------- */
.table{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(300px,1fr);gap:18px;padding:24px 0 8px;align-items:start}
.hero{background:#1c120e url(hero.jpg) 50% 45%/cover no-repeat}
.hero .plate-top{background:var(--clay);padding:18px 20px 16px;box-shadow:inset 0 1px 0 rgba(255,220,190,.3)}
.eyebrow{margin:0 0 9px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(42,17,9,.72)}
.hero h1{font-size:clamp(36px,6.1vw,88px);color:var(--ink);letter-spacing:.002em}
.hero h1 span{display:block;white-space:nowrap}
.hero .sub{margin:12px 0 0;max-width:54ch;font-size:14px;line-height:1.45;color:rgba(42,17,9,.86)}
.ca{display:flex;flex-wrap:wrap;align-items:center;gap:9px;padding:10px 15px;background:#17100c;border-bottom:1px solid rgba(233,180,76,.22)}
.ca code{font-size:12px;color:var(--brass);word-break:break-all}
.copy{background:transparent;border:1px solid rgba(233,180,76,.45);color:var(--fiber);font-size:11px;padding:5px 8px;border-radius:2px;cursor:pointer;min-height:30px}
.copy:hover{color:var(--holo);border-color:var(--holo)}

.frame{position:relative;padding:14px 14px 12px}
.frame::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,14,10,.74),rgba(23,14,10,.48) 35%,rgba(23,14,10,.78));pointer-events:none}
.winhead,.window,.quoteline{position:relative;z-index:2}
.winhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wname{display:flex;align-items:baseline;gap:8px;min-width:0}
.wname strong{font-family:var(--disp);font-size:26px;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;color:var(--brass);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.wstrip{display:flex;gap:6px;overflow-x:auto;margin-left:auto;padding-bottom:2px;max-width:100%;scrollbar-width:none}
.wstrip::-webkit-scrollbar{display:none}
.wtab{flex:0 0 auto;background:rgba(23,14,10,.78);border:1px solid rgba(233,180,76,.32);color:rgba(217,199,174,.85);font-size:11px;padding:6px 9px;border-radius:2px;cursor:pointer;white-space:nowrap;min-height:32px}
.wtab.on{background:var(--brass);color:#2A1A08;border-color:var(--brass)}
.window{background:#120c09;border:3px solid var(--brass);border-radius:3px;padding:8px;box-shadow:inset 0 0 26px rgba(0,0,0,.8),0 1px 0 rgba(255,222,190,.25),0 0 0 1px rgba(0,0,0,.5)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:2px}
.cell{appearance:none;border:0;padding:0;aspect-ratio:1/1;border-radius:1px;background:rgba(217,199,174,.17);box-shadow:inset 0 0 0 1px rgba(23,14,10,.55);cursor:pointer;transition:background .12s,transform .12s}
.cell:hover,.cell:focus-visible{background:var(--holo);transform:scale(1.18);outline:0;z-index:2}
.cell.ping{background:rgba(167,232,242,.55);box-shadow:inset 0 0 0 1px var(--holo)}
.cell.claimed{background:var(--clay);box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.cell.mine{background:var(--brass)}
.cell.press{animation:press .55s ease}
@keyframes press{0%{transform:scale(1.9);background:var(--holo)}60%{transform:scale(.82)}100%{transform:scale(1)}}
.quoteline{margin-top:11px;font-size:12px;color:var(--holo);min-height:18px;letter-spacing:.02em}

.plate{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end;padding:14px 18px;background:linear-gradient(180deg,#d7a742,#a37c2a 55%,#8d6a24);border-top:1px solid rgba(255,230,190,.4);position:relative;overflow:hidden}
.plate::after{content:'';position:absolute;top:0;bottom:0;width:34%;left:-40%;background:linear-gradient(100deg,transparent,rgba(167,232,242,.8),transparent);opacity:0;pointer-events:none}
.plate.tick::after{animation:sweep 1.1s ease}
@keyframes sweep{0%{left:-40%;opacity:.95}100%{left:110%;opacity:0}}
.stat{display:flex;flex-direction:column;min-width:0}
.stat b{font-size:32px;line-height:1;color:#241305;letter-spacing:-.01em}
.stat.flash b{color:#0c3b43}
.stat span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:rgba(36,19,5,.76);margin-top:5px}
.stat.thin b{font-size:18px;color:rgba(36,19,5,.82)}

/* ---------- rail ---------- */
.rail{display:flex;flex-direction:column;gap:18px;position:sticky;top:76px}
.kv{display:flex;justify-content:space-between;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed rgba(217,199,174,.16);font-size:12px;color:rgba(217,199,174,.72)}
.kv b{color:var(--brass);font-size:14px}
.kv.sm b{font-size:12px}
.meter{height:7px;background:rgba(217,199,174,.14);border-radius:2px;margin:11px 0 13px;overflow:hidden}
.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--clay),var(--brass));transition:width .5s ease}
.tabs{display:flex;gap:6px;margin-bottom:9px}
.tabs button{flex:1;background:transparent;border:1px solid rgba(233,180,76,.35);color:rgba(217,199,174,.82);font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:17px;padding:8px 0 6px;border-radius:2px;cursor:pointer;min-height:38px}
.tabs button.on{background:rgba(233,180,76,.18);color:var(--brass);border-color:var(--brass)}
.field{display:flex;align-items:center;gap:8px;border:1px solid rgba(233,180,76,.35);border-radius:3px;background:#17100c;padding:0 11px}
.field input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--fiber);font-family:var(--mono);font-size:16px;padding:11px 0}
.unit{font-size:11px;color:rgba(217,199,174,.6)}
.quote{font-size:11.5px;color:var(--holo);margin-top:8px;min-height:16px;line-height:1.4}
.msg{font-size:11px;color:rgba(217,199,174,.65);margin-top:8px;word-break:break-word;min-height:14px}
.msg a{color:var(--holo);text-decoration:underline}
.feed{list-style:none;margin:0;padding:8px 13px 13px;max-height:282px;overflow-y:auto}
.feed li{display:flex;gap:9px;align-items:baseline;font-size:11.5px;padding:7px 0;border-bottom:1px dashed rgba(217,199,174,.13);color:rgba(217,199,174,.74)}
.feed .id{font-family:var(--mono);color:var(--brass)}
.feed .w{color:var(--fiber);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.feed .t{margin-left:auto;font-family:var(--mono);font-size:10px;color:rgba(217,199,174,.45);white-space:nowrap}
.feed li.wait{font-family:var(--mono);color:rgba(217,199,174,.55);border-bottom:0}
.feed li.wait::after{content:'\2588';margin-left:2px;color:var(--holo);animation:blink 1.1s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

/* ---------- rules card back ---------- */
.ledger{margin:30px 0 0}
.ledgerin{display:grid;grid-template-columns:210px minmax(0,1fr);gap:0}
.surveyor{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-right:1px solid rgba(233,180,76,.25);filter:contrast(1.06)}
.rulelist{list-style:none;margin:0;padding:16px 18px;display:grid;gap:12px}
.rulelist li{display:flex;gap:14px;align-items:baseline;padding-bottom:12px;border-bottom:1px dashed rgba(217,199,174,.15)}
.rulelist li:last-child{border-bottom:0;padding-bottom:0}
.rulelist b{color:var(--brass);font-size:13px;letter-spacing:.06em;flex:0 0 auto}
.rulelist strong{display:block;font-family:var(--disp);font-size:22px;text-transform:uppercase;color:var(--fiber);line-height:1;margin-bottom:5px}
.rulelist p{margin:0;font-size:13.5px;color:rgba(217,199,174,.82);max-width:74ch}
.rulelist .num{color:var(--brass)}

/* ---------- album ---------- */
.album{padding:40px 0 44px;position:relative}
.album::before{content:'';position:absolute;inset:-10px 0 0;background:url(section-album.jpg) center/cover no-repeat;opacity:.3;border-radius:6px}
.album::after{content:'';position:absolute;inset:-10px 0 0;background:linear-gradient(180deg,rgba(31,21,17,.9),rgba(31,21,17,.72) 40%,rgba(31,21,17,.94));border-radius:6px}
.albumhead,.slots,.newworld{position:relative;z-index:2}
.albumhead{padding:0 2px}
.albumhead h2{font-size:clamp(30px,4.6vw,56px);color:var(--brass)}
.albumhead .sub{max-width:64ch;font-size:13.5px;color:rgba(217,199,174,.78);margin-top:9px}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin:20px 0}
.slot{text-align:left;background:rgba(31,21,17,.82);border:1px dashed rgba(233,180,76,.42);border-radius:4px;padding:12px;cursor:pointer;color:var(--fiber);min-height:98px;display:flex;flex-direction:column;gap:5px;font-family:var(--body)}
.slot strong{font-family:var(--disp);font-size:22px;line-height:1;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot .by{font-size:11px;color:rgba(217,199,174,.62);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .st{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--brass);margin-top:auto}
.slot.filled{border-style:solid;border-color:rgba(233,180,76,.55);background:rgba(36,24,18,.9)}
.slot.open{color:rgba(217,199,174,.45)}
.slot.open strong{color:rgba(217,199,174,.4)}
.slot:hover{border-color:var(--holo)}
.formrow{display:flex;gap:9px;flex-wrap:wrap}
.formrow input{flex:1 1 170px;min-width:0;background:#17100c;border:1px solid rgba(233,180,76,.35);border-radius:3px;color:var(--fiber);font-family:var(--body);font-size:14px;padding:11px;outline:0}
.formrow input:focus{border-color:var(--holo)}

/* ---------- footer ---------- */
.foot{border-top:1px solid rgba(233,180,76,.22);padding:20px 0 36px}
.footin{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:12px;color:rgba(217,199,174,.65)}
.fcol{display:flex;align-items:center;gap:9px}
.fcol:nth-child(2){margin:0 auto;word-break:break-all}
.small{font-size:10px}

@media (max-width:1000px){
  .table{grid-template-columns:1fr}
  .rail{position:static}
  .wname strong{max-width:62vw}
  .ledgerin{grid-template-columns:1fr}
  .surveyor{height:190px;border-right:0;border-bottom:1px solid rgba(233,180,76,.25)}
}
@media (max-width:780px){
  :root{--cols:12}
  .nav a:not([data-x]){display:none}
  .nav{gap:10px}
  .hero .plate-top{padding:15px}
  .frame{padding:11px}
  .plate{gap:16px 20px;padding:13px 14px}
  .stat b{font-size:26px}
  .stat.thin b{font-size:16px}
  .rulelist{padding:14px}
}
@media (max-width:430px){
  .bname{font-size:23px}
  .btick{display:none}
  .acts .primary{font-size:15px;padding:9px 11px 7px}
  .ghost{padding:8px 9px}
  .stat{flex:1 1 44%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}