/* Sheriff's Seat game page. DRAFT, 28 Oct. Base tokens from ../wallet/wallet_sheet.css (--ok is gold), extras from ../fair_pass/fp.css.
   Layout copied from ../games/outlaw_camp.html so every game page shares one house style. Gold accent only, no green. */
html,body{height:auto;overflow:visible}html{overflow-x:clip} /* t1145: the document scrolls, body is never a scroll box */
body{min-height:100%;background:var(--char)}
.lockico{width:14px;height:14px;flex:none}
.top{position:fixed;top:0;left:0;right:0;height:60px;z-index:4;display:flex;align-items:center;gap:12px;padding:0 22px;background:linear-gradient(180deg,rgba(28,29,27,.92),rgba(28,29,27,0))}
.top .back{height:36px;padding:0 14px 0 10px;border-radius:18px;border:1px solid rgba(217,164,65,.45);background:rgba(28,29,27,.7);display:flex;align-items:center;gap:6px;font:500 12.5px/1 Inter}
.top .mark{display:flex;align-items:center;gap:8px;font:700 16px/1 'Cormorant Garamond',serif;margin-left:6px}
.top .mark img{height:22px}.top .mark i{font-weight:500;color:var(--glow)}
.top .sp{flex:1}
.pill{height:36px;padding:0 14px;border-radius:18px;display:flex;align-items:center;gap:7px;font:500 12.5px/1 Inter;border:1px solid var(--line2);background:rgba(28,29,27,.7);white-space:nowrap}
.pill.gold{border-color:rgba(217,164,65,.55);color:var(--glow)}
.pill.pass-no{color:var(--dim)}
.pill.pass-ok{color:var(--parch);border-color:rgba(217,164,65,.45)}
.pill.pass-ok:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pill.conn{background:var(--gold);color:var(--char);font-weight:600;border-color:var(--gold)}
.pill.warn{border-color:rgba(217,140,95,.55);color:var(--warn)}
.pill .av{width:24px;height:24px;border-radius:50%;margin-left:-8px;background:radial-gradient(circle at 35% 35%,#F4D27A,#9a6f25 60%,#3a2c12)}
.pill .ring{width:13px;height:13px}
.menu{width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:rgba(28,29,27,.7);display:grid;place-items:center}
/* hero */
.hero{position:relative;height:330px;overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,29,27,.25) 0%,rgba(28,29,27,.15) 40%,var(--char) 100%)}
.hin{position:absolute;z-index:2;left:0;right:0;bottom:22px;max-width:1396px;margin:0 auto;padding:0 28px;display:flex;align-items:flex-end;gap:24px}
.hin .t{flex:1;min-width:0}
.hin .eyebrow{color:var(--glow);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hin h1{font:700 40px/1.05 Cinzel,serif;margin-top:10px;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.hin .lede{font-size:21px;color:var(--parch);opacity:.85;max-width:560px}
.dtags{display:flex;gap:6px;margin-top:12px}
.clock{flex:none;width:360px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:rgba(28,29,27,.78);backdrop-filter:blur(6px)}
.clock .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.clock small,.mclock small{font:600 9.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.clock .big{font:600 30px/1 Cinzel,serif;color:var(--glow);margin-top:6px}
.clock .meta{margin-top:10px;font:400 12px/1.3 Inter;color:var(--dim);text-align:right}
.dayg{height:6px;border-radius:3px;background:rgba(237,230,211,.08);margin-top:12px;overflow:hidden}
.dayg i{display:block;height:100%;background:linear-gradient(90deg,#9a6f25,var(--glow));border-radius:3px}
.dayl{display:flex;justify-content:space-between;margin-top:6px;font:500 10.5px/1 Inter;color:var(--faint)}
.mclock{display:none;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(28,29,27,.82)}
.mclock .big{font:600 22px/1 Cinzel,serif;color:var(--glow);margin-top:4px}
.mclock .rt{margin-left:auto;text-align:right;font:400 11.5px/1.35 Inter;color:var(--dim)}
.mclock .rt b{color:var(--parch);font-weight:600}
/* board */
.board{max-width:1396px;margin:0 auto;padding:8px 28px 40px;display:grid;grid-template-columns:410px 1fr 340px;gap:18px;align-items:start}
.col{display:flex;flex-direction:column;gap:18px;min-width:0}
.pnl{position:relative;border-radius:18px;border:1px solid var(--line2);background:linear-gradient(180deg,#262725,#20211f);padding:18px;min-width:0}
.pnl h2{font:600 15px/1.2 Cinzel,serif;letter-spacing:.08em;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pnl h2 small{font:500 11px/1 Inter;letter-spacing:.02em;color:var(--faint);text-align:right}
/* the lock and notices */
.gate{border-radius:14px;padding:16px;margin-bottom:16px;border:1px solid rgba(217,164,65,.65);background:radial-gradient(120% 120% at 0% 0%,rgba(217,164,65,.16),rgba(28,29,27,.6) 70%);display:flex;gap:14px;align-items:flex-start}
.gate .pad{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--char);border:1px solid var(--line);color:var(--glow);font:600 18px/1 Cinzel,serif}
.gate .pad svg{width:22px;height:22px}
.gate b{display:block;font:600 17px/1.2 Cinzel,serif;letter-spacing:.03em}
.gate p{font:400 12.5px/1.45 Inter;color:var(--dim);margin-top:5px}
.gate .go{margin-top:12px;height:40px;padding:0 18px;border-radius:20px;background:var(--gold);color:var(--char);font:600 13px/1 Inter;display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 18px rgba(217,164,65,.28)}
.gate .go.sec{background:transparent;color:var(--parch);border:1px solid rgba(217,164,65,.5);box-shadow:none}
.gate .rc{display:block;margin-top:8px;font:500 12px/1.3 Inter;color:var(--glow)}
.gate.soft{border-color:rgba(237,230,211,.28);background:radial-gradient(120% 120% at 0% 0%,rgba(237,230,211,.08),rgba(28,29,27,.6) 70%)}
.gate.bad{border-color:rgba(217,140,95,.55);background:radial-gradient(120% 120% at 0% 0%,rgba(217,140,95,.12),rgba(28,29,27,.6) 70%)}
.gate.bad .pad{color:var(--warn);border-color:rgba(217,140,95,.4)}
.gate .code{display:inline-block;margin-top:8px;font:500 11px/1 ui-monospace,Menlo,monospace;color:var(--faint);border:1px solid var(--line2);padding:4px 6px;border-radius:5px}
.locked .lz{opacity:.55;filter:saturate(.6)}
.lab{font:600 10px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px;display:flex;justify-content:space-between;gap:10px}
.lab:first-child{margin-top:0}
.price{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:14px;border-radius:14px;border:1px solid var(--line);background:radial-gradient(120% 90% at 50% 0%,rgba(217,164,65,.1),rgba(43,44,42,.4))}
.price .n{font:600 32px/1 Cinzel,serif}.price .n i{font-style:normal;font-size:15px;color:var(--glow);margin-left:5px}
.price .m{font:400 12px/1.35 Inter;color:var(--dim);text-align:right}
.price .m b{color:var(--parch);font-weight:600}
.slide{height:6px;border-radius:3px;background:rgba(237,230,211,.08);margin-top:10px;overflow:hidden}
.slide i{display:block;height:100%;background:linear-gradient(90deg,var(--glow),#9a6f25);border-radius:3px}
.msg{border-radius:12px;border:1px solid var(--line2);background:rgba(28,29,27,.7);padding:12px 14px;font:500 14px/1.4 Inter;min-height:64px;position:relative}
.msg .cnt{position:absolute;right:10px;bottom:8px;font:500 10.5px/1 Inter;color:var(--faint)}
.sw{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.sw span{aspect-ratio:1;border-radius:50%;border:2px solid transparent;box-shadow:inset 0 0 0 2px var(--char);max-height:34px;justify-self:center;width:100%;max-width:34px}
.sw span.on{border-color:var(--glow)}
.lrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(43,44,42,.55);font:400 13px/1.3 Inter;margin-top:8px}
.lrow b{font-weight:600}.lrow span{color:var(--dim)}
.lrow.low{border-color:rgba(217,140,95,.4)}.lrow.low b{color:var(--warn)}
.act{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.btn.lk{background:rgba(237,230,211,.06);border:1px dashed rgba(237,230,211,.25);color:var(--dim);box-shadow:none}
.btn.lk small{font:500 11px/1 Inter;color:var(--faint);margin-left:2px}
.btn.wait{opacity:.85;cursor:default}
.fineL{display:block;font:400 11.5px/1.4 Inter;color:var(--faint);margin-top:7px}
.steps2{display:flex;gap:6px;margin-top:14px}
.steps2 span{flex:1;font:500 11px/1 Inter;color:var(--faint);padding-top:8px;border-top:3px solid var(--line2)}
.steps2 span.done{border-color:rgba(217,164,65,.5);color:var(--dim)}
.steps2 span.now{border-color:var(--glow);color:var(--parch)}
/* the seat now */
.holder{display:flex;align-items:center;gap:12px;margin-top:14px}
.holder .av2{width:46px;height:46px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#EDE6D3,#8a8170 60%,#2B2C2A);border:1px solid var(--line)}
.holder.me .av2{background:radial-gradient(circle at 35% 35%,#F4D27A,#9a6f25 60%,#3a2c12)}
.holder b{display:block;font:600 16px/1.2 Cinzel,serif}.holder small{display:block;font:400 12px/1.3 Inter;color:var(--dim);margin-top:3px}
.holder .live{margin-left:auto;white-space:nowrap;font:600 10px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);display:flex;gap:6px;align-items:center}
.holder .live:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.holder .live.off{color:var(--faint)}.holder .live.off:before{background:var(--faint);box-shadow:none}
.banner{margin-top:12px;padding:14px 16px;border-radius:12px;border-left:4px solid var(--c,#F4D27A);background:rgba(43,44,42,.6);font:italic 500 20px/1.3 'Cormorant Garamond',serif;color:var(--c,#F4D27A)}
.banner.empty{color:var(--faint);border-left-color:var(--line2)}
.pot{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line2)}
.pot .n{font:600 34px/1 Cinzel,serif}.pot .n i{font-style:normal;font-size:16px;color:var(--glow);margin-left:5px}
.pot .m{font:400 12px/1.35 Inter;color:var(--dim);text-align:right}
.loot{margin-top:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lt{padding:11px 12px;border-radius:12px;border:1px solid var(--line2);background:rgba(43,44,42,.45)}
.lt small{display:block;font:600 9.5px/1.2 Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.lt b{display:block;margin-top:7px;font:600 15px/1.25 Inter}
.lt span{display:block;font:400 11.5px/1.35 Inter;color:var(--dim);margin-top:3px}
.lt.me{border-color:rgba(217,164,65,.55);background:rgba(217,164,65,.08)}
.feed{margin-top:4px}
.fi{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line2);font:400 13px/1.35 Inter}
.fi:first-child{border-top:0}
.fi .k{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font:700 12px/1 Inter;background:rgba(217,164,65,.14);color:var(--glow)}
.fi .k.r{background:rgba(237,230,211,.08);color:var(--dim)}
.fi .tx{min-width:0;flex:1}
.fi .tx q{display:block;quotes:none;font:italic 500 15px/1.3 'Cormorant Garamond',serif;color:var(--c,var(--parch));margin-top:3px;overflow-wrap:anywhere}
.fi .v{margin-left:auto;font-weight:600;white-space:nowrap;text-align:right}
.fi .v small{display:block;color:var(--faint);font-weight:400;font-size:11.5px;margin-top:3px}
/* right */
.tr{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line2)}
.tr:first-of-type{border-top:0}
.tr .no{width:18px;font:600 12px/1 Cinzel,serif;color:var(--gold)}
.tr .av2{width:28px;height:28px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 35%,#EDE6D3,#8a8170 60%,#2B2C2A);border:1px solid var(--line2)}
.tr b{display:block;font:600 13px/1.2 Inter}.tr small{display:block;font:400 11.5px/1.2 Inter;color:var(--dim);margin-top:2px}
.tr .h{margin-left:auto;text-align:right;font:600 13px/1.2 Inter;white-space:nowrap}.tr .h small{text-align:right}
.tr.me{margin:0 -10px;padding:10px;border-radius:10px;background:rgba(217,164,65,.08);border-top-color:transparent}
.tr.me .av2{background:radial-gradient(circle at 35% 35%,#F4D27A,#9a6f25 60%,#3a2c12)}
.nowtag{font:600 8.5px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--glow);border:1px solid var(--line);padding:2px 4px;border-radius:4px;margin-left:5px;vertical-align:1px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:12px}
.stats div{padding:9px;border-radius:10px;border:1px solid var(--line2);background:rgba(43,44,42,.45)}
.stats small{display:block;font:600 9px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.stats b{display:block;margin-top:6px;font:600 14px/1 Inter}
.mine{text-align:center;padding:14px 8px 4px}
.mine p{font:italic 500 17px/1.3 'Cormorant Garamond',serif;color:var(--dim)}
.how{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.hw{padding:13px;border-radius:12px;border:1px solid var(--line2);background:rgba(43,44,42,.45)}
.hw i{font:600 12px/1 Cinzel,serif;font-style:normal;color:var(--gold)}
.hw b{display:block;margin-top:8px;font:600 13.5px/1.2 Inter}.hw span{display:block;margin-top:5px;font:400 12px/1.4 Inter;color:var(--dim)}
.hw.pass{border-color:rgba(217,164,65,.5)}
.wide{grid-column:1/-1}
.bld{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.bld a{height:36px;padding:0 14px;border-radius:18px;border:1px solid var(--line2);display:flex;align-items:center;font:500 12.5px/1 Inter;color:var(--parch)}
.pw{font:400 11.5px/1.4 Inter;color:var(--faint);text-align:center;padding:6px 0 26px}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:.92em}
/* phones in portrait and narrow screens: one column, switched by width only, never asks to rotate */
@media (max-width:820px){
  .top{height:56px;padding:0 12px;gap:8px;background:linear-gradient(180deg,rgba(28,29,27,.95),rgba(28,29,27,.55) 70%,rgba(28,29,27,0))}
  .top .mark,.top .getusd{display:none}
  .top .back{padding:0 12px 0 8px}
  .pill{height:34px;padding:0 11px;font-size:12px}
  .pill .addr{display:none}
  .pill .av{margin-left:-6px}
  .hero{height:380px}
  .hin{flex-direction:column;align-items:stretch;gap:14px;padding:0 16px;bottom:14px}
  .hin h1{font-size:29px;margin-top:8px}
  .hin .lede{font-size:18px}
  .dtags{margin-top:10px}
  .clock{display:none}
  .mclock{display:flex}
  .board{grid-template-columns:1fr;padding:6px 14px 30px;gap:14px}
  .col{gap:14px;display:contents}
  .pnl{padding:16px}
  .how{grid-template-columns:1fr}
  .loot{gap:6px}.lt{padding:10px}.lt b{font-size:14px}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.o8{order:8}
}