/* D2 game pages (Archery Glade, Outlaw Camp) plus the shared FAQ card. DRAFT 28 Oct pt947u.
   Loads after d2_sheriff.css. No lines anywhere. Panels split by fill shade and spacing, pills filled, gold only on the main button and key numbers. */
@media (max-width:380px){.hide-xs{display:none}}
.sp-pill.off{opacity:.55;cursor:default}
.sp-pill.off:hover{background:rgba(20,22,20,.62)}
/* scene button height per art, set with --scy on body */
.sc-main{top:var(--scy,calc(61% - 57px))}
@media (max-width:820px){.sc-main{top:var(--scy-m,calc(64% - 54px))}}

/* max price stepper (Archery) */
.stp{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px;background:var(--well)}
.stp button{flex:none;width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.07);color:var(--txt);font:500 20px/1 Inter;cursor:pointer;transition:background .2s}
.stp button:hover{background:rgba(255,255,255,.12)}
.stp button{touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.stp button:disabled{opacity:.35;cursor:default}
.stp b,.stp small{font-variant-numeric:tabular-nums}
.stp div{flex:1;text-align:center}
.stp b{display:block;font:600 16px/1.2 Inter}
.stpr{display:flex;justify-content:space-between;gap:12px;margin-top:10px;padding:0 4px;font:400 13px/1.3 Inter;color:var(--mut);font-variant-numeric:tabular-nums}
.stpr b{font-weight:600;color:var(--txt);font-size:15px}.stpr span:last-child b{color:#E0A93A}
.stpx{margin:8px 4px 0;text-align:center;font:400 12px/1.45 Inter;color:var(--mut);text-wrap:pretty}
.stp small{display:block;font:400 12px/1.3 Inter;color:var(--mut);margin-top:3px}
.loot.three{grid-template-columns:repeat(3,1fr)}
.facts .lrow b{text-align:right}
.facts .lrow.note{justify-content:center;text-align:center}.facts .lrow.note span{color:var(--mut)}

/* Outlaw Camp pieces, ported from ../games/outlaw_camp.html without the borders */
.pers{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.per{border:0;border-radius:8px;padding:10px 4px 9px;text-align:center;background:var(--well);color:var(--txt);cursor:pointer;transition:background .2s}
.per:hover{background:rgba(255,255,255,.07)}
.per svg{width:26px;height:26px;display:block;margin:0 auto}
.per b{display:block;font:600 11.5px/1.15 Inter;margin-top:7px}
.per small{display:block;font:400 10px/1.2 Inter;color:var(--fnt);margin-top:3px}
.per.on{background:rgba(217,164,65,.16)}
.per.on b{color:var(--gold)}
.pdesc{margin-top:10px;padding:11px 13px;border-radius:8px;background:var(--well);font:400 12.5px/1.45 Inter;color:var(--mut)}
.pdesc b{color:var(--txt);font-weight:600}
.budget{display:flex;align-items:stretch;gap:8px}
.budget .in{flex:1;height:48px;border-radius:8px;background:var(--well);display:flex;align-items:center;justify-content:space-between;padding:0 14px;font:600 18px/1 Inter}
.budget .in small{font:500 12px/1 Inter;color:var(--mut)}
.budget .q{display:flex;gap:6px}
.budget .q span{height:48px;min-width:46px;padding:0 10px;border-radius:8px;display:grid;place-items:center;font:500 12.5px/1 Inter;color:var(--mut);background:rgba(255,255,255,.05)}
.budget .q span.on{color:var(--txt);background:rgba(255,255,255,.12)}
.opp{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:var(--well);margin-top:12px}
.opp .av2{width:38px;height:38px;border-radius:50%;flex:none;background:#8a8170}
.opp b{display:block;font:600 14px/1.2 Inter}.opp small{display:block;font:400 12px/1.3 Inter;color:var(--mut);margin-top:3px}
.opp .t{margin-left:auto;text-align:right;font:600 14px/1 Inter;white-space:nowrap}.opp .t small{text-align:right}
.ch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.loot.two{grid-template-columns:repeat(2,1fr)}
.house{font:600 8.5px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.08);padding:3px 5px;border-radius:4px;margin-left:5px;vertical-align:1px}
.oc{display:flex;align-items:center;gap:11px;padding:10px 8px;margin:0 -8px;border-radius:8px;transition:background .2s}
.oc:hover{background:var(--hov)}
.oc .av2{width:34px;height:34px;border-radius:50%;flex:none;background:#8a8170}
.oc.me .av2{background:var(--gold)}
.oc b{display:block;font:600 13.5px/1.2 Inter}.oc small{display:block;font:400 11.5px/1.3 Inter;color:var(--mut);margin-top:2px}
.oc .h{margin-left:auto;text-align:right;font:600 13px/1.2 Inter;white-space:nowrap}
.oc .h small{text-align:right}
.oc .live{font:600 9.5px/1 Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--txt);display:inline-flex;gap:5px;align-items:center}
.oc .live:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.how.five{grid-template-columns:repeat(5,1fr)}

/* FAQ accordion card. Plain details/summary, no rules, open state by fill only. ?faq=1 opens the first, ?faq=all opens every one. */
.faq .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;align-items:start}
.faq details{border-radius:10px;background:rgba(6,7,8,.5);transition:background .2s}
.faq details:hover{background:rgba(6,7,8,.62)}
.faq details[open]{background:rgba(6,7,8,.7)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 14px 14px 16px;font:600 14px/1.35 Inter,sans-serif;color:#F2EEE3}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus{outline:0}
.faq summary:focus-visible{background:rgba(255,255,255,.05);border-radius:10px}
.faq summary i{flex:none;width:18px;height:18px;display:grid;place-items:center;background:none;font:400 17px/1 Inter,sans-serif;font-style:normal;transition:transform .2s cubic-bezier(.25,.8,.35,1)}
.faq summary i{font-size:0!important;color:transparent}
.faq summary i::before{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23E0A93A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px 14px no-repeat}
@media (prefers-reduced-motion:reduce){.faq summary i{transition:none}}
.faq details[open] summary i{transform:rotate(180deg)}
.faq details p{padding:0 16px 8px;font:400 13.5px/1.5 Inter,sans-serif;color:rgba(242,238,227,.66)}
.faq details p:last-child{padding-bottom:16px}
@media (max-width:820px){
 .faq .qa{grid-template-columns:minmax(0,1fr);gap:6px}
 .faq summary{padding:13px 12px 13px 14px;font-size:13.5px}
 .faq details p{padding:0 14px 8px}
 .pers{gap:5px}.per b{font-size:10.5px}
 .loot.three{grid-template-columns:repeat(3,minmax(0,1fr))}
 .how.five{grid-template-columns:1fr}
}
/* scene pills on narrow phones stay on one line */
.sp-pill{white-space:nowrap}
@media (max-width:440px){
 .sc-top{left:8px;right:8px;gap:6px}
 .sc-top .sc-gap{margin-left:-6px}
 .sc-top .sp-pill:not(.brand){padding:0 10px;font-size:12.5px}
 .sc-top .sp-pill:not(.brand) svg{display:none}
 .sc-bot .sp-pill.hide-s{display:none}
}
.hin .lede{max-width:640px}
.o9{order:9}

.stats.yr{grid-template-columns:repeat(3,minmax(0,1fr))}.stats.yr div{min-width:0}.stats.yr small{white-space:nowrap;letter-spacing:.06em}.stats.yr b{white-space:nowrap;font-variant-numeric:tabular-nums}.stats.yr .u{display:block;margin-top:4px;font:500 10px/1 Inter;font-style:normal;letter-spacing:.02em;color:var(--mut)}

/* fold fix: compact fire/take panel */
.nx{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:8px;background:var(--well)}
.nx .price{display:flex;align-items:baseline;gap:10px;padding:0;margin:0;border:0;border-radius:0;background:none;min-width:0}
.nx .k{flex:none;font:600 10px/1 Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--fnt)}
.nx .price .n{font:600 24px/1 Inter;color:var(--gold);white-space:nowrap}
.nx .price .n i{font-style:normal;font-size:13px;margin-left:4px;color:var(--mut);font-weight:500}
.nx .an{flex:none;font:500 12px/1.2 Inter;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.lz .slide{margin-top:8px}
.lz .lab{margin:12px 0 6px}
.stp{height:44px;box-sizing:border-box;padding:4px 6px}
.stp button{width:36px;height:36px;font-size:18px}
.stp b{font-size:15px}
.stpr{margin-top:6px}
a.stpq{display:table;margin:4px auto 0;cursor:pointer;padding:6px 4px;font:500 12px/1.2 Inter;color:var(--mut);text-decoration:underline;text-decoration-color:rgba(242,238,227,.3);text-underline-offset:3px;-webkit-tap-highlight-color:transparent}
.faq details{scroll-margin-top:84px}
.balL{margin-top:10px;text-align:center;font:400 12px/1.3 Inter;color:var(--mut);font-variant-numeric:tabular-nums}
.balL b{color:var(--txt);font-weight:600}
.balL.low b{color:#E07A5F}
#play .act{margin-top:8px}
#play .fineL{text-align:center}

/* t1115: sticky action bar on phone, scene and button on one screen */
details.addmsg{margin-top:12px;border-radius:8px;background:var(--well);padding:0 12px}
details.addmsg summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:12px 0;font:500 13px/1.2 Inter;color:var(--txt);-webkit-tap-highlight-color:transparent}
details.addmsg summary::-webkit-details-marker{display:none}
details.addmsg summary:after{content:"+";font:400 18px/1 Inter;color:var(--gold)}
details.addmsg[open] summary:after{content:"\2212"}
details.addmsg[open]{padding-bottom:12px}
details.addmsg .lab:first-of-type{margin-top:2px}
@media (max-width:820px){
 .abar{position:sticky;bottom:8px;z-index:6;margin:0 -8px;padding:8px;border-radius:14px;background:rgba(18,20,22,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -10px 28px rgba(0,0,0,.4)}
 .abar .stpr{margin-top:5px}
 .abar .act,#play .abar .act{margin-top:8px}
}
/* body was a scroll container (ss.css overflow:auto), which kept position:sticky from pinning to the viewport */
html:not(.gm-lock) body.has-stage:not(.v-scene){overflow:visible}

/* t1126: "How to play" link on the chapter eyebrow line, right-aligned, same eyebrow style */
.eyebrow.ebrow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;white-space:nowrap}
@media (max-width:420px){.eyebrow.ebrow{letter-spacing:.12em;gap:8px}}
@media (max-width:359px){.eyebrow.ebrow{font-size:10px;letter-spacing:.1em;gap:6px;flex-wrap:wrap;row-gap:6px}.eyebrow .htp{margin-left:auto}}
.eyebrow .htp{flex:none;color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.eyebrow .htp:hover{text-decoration:underline;text-underline-offset:3px}
#howto{scroll-margin-top:12px}
/* t1127: feed name line sits on the centre line of the 28px number box; price and time stay stacked on the right */
#feed .fi .tx{padding-top:5px}

/* t1151: scene top bar is a 3 column grid, so the centre pill (Fair Pass) sits on the screen's centre line on every width.
   Brand left, Fair Pass centre (or an empty gap on the Fair Pass page), Ecosystem map right; on phones the map pill is its icon. */
.sc-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.sc-top>*{grid-row:1}
.sc-top>.brand{justify-self:start;grid-column:1}
.sc-top>.sc-gap{width:0;margin:0;grid-column:2}
.sc-top>.eco{justify-self:end;grid-column:3}
.sc-top>.fp{grid-column:2}
.sc-top .sp-pill.eco svg{display:inline-block}
@media (max-width:440px){
 .sc-top .sc-gap{margin:0}
 .sc-top .sp-pill.eco{width:40px;padding:0;justify-content:center}
 .sc-top .sp-pill.eco .lbl{display:none}
 .sc-top .sp-pill.eco svg{display:block;width:17px;height:17px}
 .sc-top .sp-pill.fp{padding:0 12px}
 .sc-top .sp-pill.brand{padding:0 12px;gap:6px;font-size:14px}
 .sc-top .sp-pill.brand img{height:17px}
}
@media (max-width:344px){
 .sc-top .sp-pill.brand img{display:none}
 .sc-top .sp-pill.fp{padding:0 10px}
}
/* p30: the game dashboards use the p27 Fair Pass dashboard top bar (brand, centred game name, Ecosystem map) */
.dash>.sc-top.gtop{position:relative;top:auto;left:auto;right:auto;z-index:2;max-width:1340px;width:calc(100% - 20px);margin:10px auto 0}
.dash>.sc-top.gtop+.hero{padding-top:12px}
@media (max-width:820px){.dash>.sc-top.gtop{width:calc(100% - 20px);margin:12px auto 0}.dash>.sc-top.gtop+.hero{padding-top:12px}}
@media (max-width:440px){.dash>.sc-top.gtop{width:calc(100% - 16px)}}
/* p30: game names are longer than "Fair Pass", so on phones the name pill sits centred in the space between the brand and the map icon */
@media (max-width:440px){.dash>.sc-top.gtop{grid-template-columns:auto minmax(0,1fr) auto;column-gap:6px}.dash>.sc-top.gtop>.fp{justify-self:center;min-width:0;white-space:nowrap}}
/* p31 (pt1169u): back pill to the chapter scene on the left of the dashboard top bar, logo beside it, game name stays on the centre line */
.dash>.sc-top>.lgrp{grid-column:1;grid-row:1;justify-self:start;display:flex;align-items:center;gap:8px;min-width:0}
.dash>.sc-top .sp-pill.back{font-weight:600}
@media (max-width:440px){
 .dash>.sc-top,.dash>.sc-top.gtop{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:8px;column-gap:0}
 .dash>.sc-top>.lgrp{gap:6px}
 .dash>.sc-top .sp-pill.back{padding:0 12px;font-size:13px}
 .dash>.sc-top .sp-pill.brand{width:40px;padding:0;justify-content:center;gap:0}
 .dash>.sc-top .sp-pill.brand .bt{display:none}
 .dash>.sc-top .sp-pill.brand img{display:block;height:19px}
 .dash>.sc-top>.fp,.dash>.sc-top.gtop>.fp{grid-row:2;grid-column:1/-1;justify-self:center}
}
/* p31 (t1170u): the scene's bottom place pill sits on the page centre line like the top pill (3 column grid, not flex gaps that shift with the side pill widths) */
.scene>.sc-bot{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:10px}
.scene>.sc-bot>.sc-gap{display:none}
.scene>.sc-bot>*{grid-row:1;min-width:0}
.scene>.sc-bot>a:first-child{grid-column:1;justify-self:start}
.scene>.sc-bot>.cur{grid-column:2;justify-self:center}
.scene>.sc-bot>a:last-child{grid-column:3;justify-self:end}
@media (max-width:440px){.scene>.sc-bot{column-gap:8px}}
/* p31 (t1175u): right-hand section labels in the heading's own serif, smaller, gold, on the heading baseline; they drop under the heading, left-aligned, if the row is too narrow */
h2.slh{display:flex;flex-wrap:wrap;align-items:baseline!important;justify-content:space-between;column-gap:12px;row-gap:4px}
h2.slh>small.sl{font-family:Cinzel,serif!important;font-weight:600!important;font-size:12px!important;line-height:1.2!important;letter-spacing:.08em!important;
  text-transform:inherit;font-variant-caps:inherit;color:var(--gold,#D9A441)!important;opacity:1!important;margin:0!important;padding:0!important;background:none!important;
  align-self:baseline!important;vertical-align:baseline;white-space:nowrap;position:static!important;transform:none!important}
/* p31 (t1176u/t1177u): desktop board rows. Row 1: play card, middle card, right stack (two cards), bottoms aligned.
   Row 2: the two lower cards span the full board, 60/40. Tracks: 420 | t2 | t3 | 340, where t1+t2 is 60% of the row. */
@media (min-width:821px){
  .board.rw{grid-template-columns:420px minmax(0,calc(60% - .6 * 12px - 432px)) minmax(0,1fr) 340px;grid-template-rows:auto auto;align-items:stretch;column-gap:12px;row-gap:12px}
  .board.rw>.col{display:contents}
  .board.rw .r-p{grid-column:1;grid-row:1 / span 2}
  .board.rw .r-m{grid-column:2 / span 2;grid-row:1 / span 2}
  .board.rw .r-a{grid-column:4;grid-row:1}
  .board.rw .r-b{grid-column:4;grid-row:2}
  .board.rw .r-l{grid-column:1 / span 2;grid-row:3}
  .board.rw .r-r{grid-column:3 / span 2;grid-row:3}
  .board.rw .r-full{grid-column:1 / -1}
  .board.rw>.col>.pnl{margin:0}
  /* play card: roomier, evenly spaced */
  .board.rw .r-p{display:flex;flex-direction:column}
  .board.rw .r-p>.lz{flex:1;display:flex;flex-direction:column;gap:16px;justify-content:space-between}
  .board.rw .r-p>.lz>*,.board.rw .r-p .abar>*{margin-top:0!important;margin-bottom:0!important}
  .board.rw .r-p .abar{display:flex;flex-direction:column;gap:16px}
  .board.rw .r-p .abar:empty,.board.rw .r-p .lz>:empty{display:none}
  /* stretched cards spread their blocks instead of leaving a dead gap at the bottom */
  .board.rw .r-m,.board.rw .r-a,.board.rw .r-b,.board.rw .r-l,.board.rw .r-r{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
  .board.rw .r-m>*,.board.rw .r-a>*,.board.rw .r-b>*,.board.rw .r-l>*,.board.rw .r-r>*{margin-top:0!important}
  .board.rw .r-l>.bld,.board.rw .r-r>.bld{margin-top:auto!important}
}
/* p31 (t1178u): clock cards centre their content in the stretched title row; the label's two parts sit apart without a dot */
small.lb{display:inline-flex;gap:.9em;align-items:baseline}
@media (min-width:821px){
  .dash .hin .clock{justify-content:center!important;gap:0}
}
/* p31 (t1179u): Last Arrow's Latest arrows card spans the full board row, its ten arrows in two columns of five */
@media (min-width:821px){
  .board.rw .r-full .feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:36px}
}
/* p31 (t1179u): the middle card's blocks stack from the top and the pot well takes up the spare height, so there is no orphan gap */
@media (min-width:821px){
  .board.rw .r-m{justify-content:flex-start}
  .board.rw .r-m>.pot{flex:1 1 auto;align-items:center}
}
/* p31 (t1180u): Outlaw Camp keeps three columns; every column ends on the same line as Manual play, the last card in each column takes the spare height and spreads its rows */
@media (min-width:821px){
  .board.rwc{grid-template-columns:420px minmax(0,1fr) 340px;align-items:stretch;gap:12px}
  .board.rwc>.col{display:flex;flex-direction:column;gap:12px}
  .board.rwc>.col>.pnl{margin:0}
  .board.rwc>.col>.pnl:last-child{flex:1 1 auto;display:flex;flex-direction:column}
  .board.rwc>.col>.pnl:last-child>:not(h2){flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between}
  .board.rwc>.col>.pnl:last-child>:not(h2)>*{margin-top:0;margin-bottom:0}
}

/* p33 (t1202u-t1207u): one row on phones. Round back button and the logo on the left, the game name on the centre line, the Ecosystem map on the right. Nothing overlaps. */
@media (max-width:440px){
 .dash>.sc-top,.dash>.sc-top.gtop{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:8px;row-gap:0}
 .dash>.sc-top>.fp,.dash>.sc-top.gtop>.fp{grid-row:1;grid-column:2;justify-self:center;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 14px;font-size:13px}
 .dash>.sc-top>.eco{grid-row:1;grid-column:3;justify-self:end}
 .dash>.sc-top .sp-pill.back{width:40px;padding:0;justify-content:center;font-size:22px;line-height:1}
 .dash>.sc-top .sp-pill.back .bl{display:none}
 .dash>.sc-top .sp-pill.back .chev{display:block;margin-top:-3px}
}
@media (max-width:344px){.dash>.sc-top>.lgrp .brand{display:none}}
/* p33 (t1202u-t1207u): clear space between the price block (and the gold progress bar under it) and the slippage card */
#play .lz>.abar{margin-top:14px!important}
/* p33 (t1248u): phone top bar polish. No inner box behind the back label, and from 441 to 600px the bar uses the same two row layout as small phones so the brand and game pills never overlap */
.dash>.sc-top .sp-pill.back .bl{background:none!important;border:0!important;border-radius:0!important;padding:0!important;box-shadow:none!important;color:inherit!important;font:inherit!important}
@media (min-width:441px) and (max-width:600px){
 .dash>.sc-top,.dash>.sc-top.gtop{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);row-gap:8px;column-gap:0}
 .dash>.sc-top>.lgrp{gap:6px}
 .dash>.sc-top .sp-pill.brand{width:40px;padding:0;justify-content:center;gap:0}
 .dash>.sc-top .sp-pill.brand .bt{display:none}
 .dash>.sc-top .sp-pill.brand img{display:block;height:19px}
 .dash>.sc-top>.fp,.dash>.sc-top.gtop>.fp{grid-row:2;grid-column:1/-1;justify-self:center}
}