/* Solitaire's Journey v1.0.0 — Tronsoft Games */
:root{
  --baize:#14392E; --baize-dark:#0C241D; --mahogany:#4A2018; --mahogany-lit:#66301F;
  --brass:#C8A64B; --brass-dim:rgba(200,166,75,.34); --ivory:#F4EBD8; --garnet:#A32C29;
  --ink:#101A16; --muted:rgba(244,235,216,.58);
  --display:Georgia,"Palatino Linotype","Book Antiqua",serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ledger:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ink);color:var(--ivory);font-family:var(--body);
  -webkit-font-smoothing:antialiased;overscroll-behavior:none}
[hidden]{display:none !important}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden}
.screen[hidden]{display:none}
.muted{color:var(--muted)}
.num{font-family:var(--ledger);letter-spacing:-.02em}
.eyebrow{font-family:var(--ledger);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .3rem}

/* ---- buttons ---- */
button.primary,button.ghost{
  font-family:var(--display);font-size:1rem;letter-spacing:.02em;
  padding:.62rem 1.1rem;border-radius:3px;border:1px solid var(--brass-dim);
  background:linear-gradient(180deg,rgba(200,166,75,.18),rgba(200,166,75,.06));color:var(--ivory)}
button.primary:hover,button.ghost:hover{background:linear-gradient(180deg,rgba(200,166,75,.34),rgba(200,166,75,.12));border-color:var(--brass)}
button.primary[disabled]{opacity:.4;cursor:not-allowed}
button.ghost{font-size:.86rem;padding:.42rem .8rem}
.tiny{font-family:var(--body);font-size:.78rem;padding:.34rem .6rem;border-radius:3px;
  border:1px solid var(--brass-dim);background:rgba(0,0,0,.25);color:var(--ivory)}
.tiny:hover{border-color:var(--brass)}
.tiny[disabled]{opacity:.35;cursor:not-allowed}

/* ---- cover: the art is the page ---- */
#cover{background:#0b1512}
#coverPlate{position:absolute;inset:0;z-index:0}
#coverPlate svg{width:100%;height:100%;display:block}
.coverhead{position:relative;z-index:2;padding:clamp(1.2rem,4vw,3rem);max-width:38rem}
.coverhead h1{font-family:var(--display);font-weight:400;margin:0;line-height:1.02;
  font-size:clamp(2.4rem,6.4vw,4.6rem);letter-spacing:.005em;
  text-shadow:0 2px 26px rgba(0,0,0,.75)}
.coverhead .rule{width:6rem;height:1px;background:var(--brass);margin:.9rem 0}
.coverhead p{margin:0;max-width:30rem;color:rgba(244,235,216,.86);
  text-shadow:0 1px 14px rgba(0,0,0,.8);font-size:clamp(.94rem,1.5vw,1.06rem)}
.coverorders{position:absolute;z-index:2;right:clamp(1rem,3vw,2.6rem);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:.6rem;width:min(20rem,42vw)}
.coverorders button{width:100%;text-align:left}
.coverfoot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:.7rem 1rem;
  font-family:var(--ledger);font-size:.7rem;letter-spacing:.1em;color:rgba(244,235,216,.55);
  background:linear-gradient(180deg,rgba(6,14,11,0),rgba(6,14,11,.8))}
@media (max-width:820px){
  .coverorders{position:relative;top:auto;transform:none;width:auto;padding:0 1.2rem 1.2rem;margin-top:auto}
  .coverhead{padding-bottom:.4rem}
  .coverfoot{position:relative;background:none}
  /* the cover is taller than the phone it is read on: let it scroll rather
     than clip the last destinations off the bottom */
  #cover{justify-content:flex-start;overflow-y:auto}
  #coverPlate{position:fixed}
}

/* ---- inner pages ---- */
.page{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;
  background:radial-gradient(120% 90% at 50% 0%,#173e32,#0b1c17 70%)}
.pagebar{display:flex;align-items:center;gap:1rem;padding:.7rem clamp(.8rem,2.5vw,1.6rem);
  border-bottom:1px solid rgba(200,166,75,.22);background:linear-gradient(180deg,#3d1a12,#2a120c)}
.pagebar h2{font-family:var(--display);font-weight:400;font-size:1.15rem;margin:0;flex:1}
.pagebody{flex:1;overflow:auto;padding:clamp(.9rem,2.5vw,1.8rem);scrollbar-width:thin}
input[type=search]{font:inherit;padding:.42rem .7rem;border-radius:3px;background:rgba(0,0,0,.35);
  color:var(--ivory);border:1px solid var(--brass-dim);min-width:11rem}

.fam{margin:0 0 1.6rem}
.fam h3{font-family:var(--ledger);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .7rem;border-bottom:1px solid rgba(200,166,75,.2);padding-bottom:.35rem}
.grid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr))}
.gamecard{text-align:left;background:linear-gradient(180deg,rgba(20,57,46,.9),rgba(9,26,21,.9));
  border:1px solid rgba(200,166,75,.18);border-radius:4px;padding:.75rem .85rem;color:inherit;
  display:flex;flex-direction:column;gap:.4rem}
.gamecard:hover{border-color:var(--brass);transform:translateY(-1px)}
.gc-top{display:flex;align-items:baseline;gap:.6rem}
.gc-name{font-family:var(--display);font-size:1.02rem;flex:1}
.gc-diff{color:var(--brass);font-size:.72rem;letter-spacing:.1em}
.gc-blurb{margin:0;font-size:.82rem;line-height:1.42;color:rgba(244,235,216,.72)}
.gc-foot{display:flex;gap:.5rem;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin-top:auto}
.tag{border:1px solid var(--brass-dim);border-radius:2px;padding:.05rem .35rem;
  font-family:var(--ledger);letter-spacing:.06em}

/* ---- the road ---- */
.journeySummary{display:grid;grid-template-columns:auto minmax(12rem,1fr) auto;gap:.8rem 1rem;align-items:center;margin:0 0 1rem;padding:.85rem 1rem;background:linear-gradient(90deg,rgba(200,166,75,.12),rgba(0,0,0,.18));border:1px solid rgba(200,166,75,.28);border-radius:5px}
.journeySummary strong{display:block;font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--ivory)}
.journeyMeter{height:.55rem;background:rgba(0,0,0,.35);border:1px solid rgba(200,166,75,.25);border-radius:999px;overflow:hidden}
.journeyMeter span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brass-dim),var(--brass));transition:width .45s ease}
#journeyLegNote{text-align:right;max-width:24rem;font-style:italic}
#roadMap{position:relative;overflow:hidden}.traveler{filter:drop-shadow(0 0 7px rgba(244,235,216,.75))}
.stop.here{animation:journeyPulse 1.8s ease-in-out infinite}@keyframes journeyPulse{0%,100%{stroke-width:2.6;opacity:1}50%{stroke-width:5;opacity:.78}}
.stageMeta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:.8rem 0}
.stageMeta span{padding:.5rem .6rem;background:rgba(244,235,216,.045);border:1px solid rgba(200,166,75,.13);border-radius:3px}
.stageStatus{font-family:var(--ledger);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);font-size:.72rem}
@media(max-width:760px){.journeySummary{grid-template-columns:1fr}.journeyMeter{grid-row:2}#journeyLegNote{text-align:left}.stageMeta{grid-template-columns:1fr}}

.roadwrap{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.roadwrap{grid-template-columns:minmax(0,2fr) minmax(16rem,1fr)}}
#roadMap{min-height:360px;background:linear-gradient(180deg,rgba(8,22,18,.7),rgba(8,22,18,.2));
  border:1px solid rgba(200,166,75,.18);border-radius:4px}
.stop{fill:rgba(244,235,216,.15);stroke:var(--brass);stroke-width:1.6;cursor:pointer}
.stop.done{fill:var(--brass)}
.stop.here{fill:var(--ivory);stroke-width:2.6}
.stop.ahead{fill:rgba(244,235,216,.08)}
#roadStage{background:rgba(0,0,0,.28);border:1px solid rgba(200,166,75,.2);border-radius:4px;padding:1rem}
#roadStage h3{font-family:var(--display);font-weight:400;margin:0 0 .4rem;font-size:1.35rem}
#roadStage .target{display:flex;gap:.6rem;align-items:center;margin:.7rem 0 1rem;font-size:.8rem;color:var(--muted)}
.passport{margin-top:1.2rem;border-top:1px solid rgba(200,166,75,.2);padding-top:.9rem}
.passport h3{font-family:var(--ledger);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);margin:0 0 .8rem}
#passport{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  background:repeating-linear-gradient(0deg,rgba(244,235,216,.045),rgba(244,235,216,.045) 22px,transparent 22px,transparent 23px),
    rgba(244,235,216,.05);border:1px solid rgba(200,166,75,.15);border-radius:3px;padding:.8rem;min-height:8rem}
.stamp{color:rgba(163,44,41,.85);filter:saturate(.95)}

/* ---- tournaments ---- */
#tourneyList{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.tcard{background:rgba(0,0,0,.28);border:1px solid rgba(200,166,75,.2);border-radius:4px;padding:1rem;
  display:flex;flex-direction:column;gap:.5rem}
.tcard h3{font-family:var(--display);font-weight:400;margin:0;font-size:1.2rem}
.rounds{list-style:decimal;margin:.2rem 0;padding-left:1.3rem;font-size:.86rem}
.rounds li{display:flex;justify-content:space-between;gap:1rem;padding:.12rem 0;color:var(--muted)}
.verline{font-family:var(--ledger);font-size:.74rem;letter-spacing:.12em;color:var(--brass);
  margin:0 0 .8rem !important;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.8)}
.ver{font-family:var(--ledger);font-size:.68rem;letter-spacing:.1em;color:var(--brass-dim);
  color:rgba(200,166,75,.7);white-space:nowrap}
.railver{margin-left:.2rem}
@media (max-width:700px){.railver{display:none}}
.pick{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted)}
.pick select{font:inherit;background:rgba(0,0,0,.35);color:var(--ivory);border:1px solid var(--brass-dim);
  border-radius:3px;padding:.2rem .35rem}
#houseNote{font-size:.76rem;color:var(--muted)}
.rounds li.done{color:var(--ivory)}
.rounds li.here{color:var(--brass)}
.tfoot{display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid rgba(200,166,75,.18);padding-top:.5rem;margin-top:auto}
.medal{font-family:var(--ledger);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;
  border:1px solid var(--brass);border-radius:2px;padding:.1rem .4rem;color:var(--brass)}
.medal.silver{color:#cfd6dc;border-color:#cfd6dc}
.medal.bronze{color:#c68b52;border-color:#c68b52}

/* ---- ledger ---- */
table{width:100%;border-collapse:collapse;font-size:.88rem}
th,td{text-align:left;padding:.36rem .5rem;border-bottom:1px solid rgba(200,166,75,.12)}
th{font-family:var(--ledger);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
td.num,th.num{text-align:right;font-family:var(--ledger)}
tr.muted td{color:rgba(244,235,216,.38)}

/* ---- the table ---- */
#table{background:var(--ink)}
.rail{display:flex;align-items:center;gap:.8rem;padding:.5rem clamp(.6rem,2vw,1.2rem);
  background:linear-gradient(180deg,#3d1a12,#2a120c);border-bottom:1px solid rgba(200,166,75,.28);
  flex-wrap:wrap}
.rail .title{display:flex;flex-direction:column;min-width:9rem}
#railName{font-family:var(--display);font-size:1.05rem}
#railFamily{font-size:.68rem;color:var(--brass);letter-spacing:.1em}
.rail .stat{font-family:var(--ledger);font-size:.8rem;color:rgba(244,235,216,.8);min-width:4.2rem}
.rail .spacer{flex:1}
.rail .tools{display:flex;gap:.35rem;flex-wrap:wrap}
.tablebody{flex:1;display:flex;min-height:0}
#baizeWrap{flex:1;position:relative;min-width:0;
  background:radial-gradient(120% 100% at 50% 12%,#1b4a3b,#0a1f19 78%);
  border-top:1px solid rgba(0,0,0,.5)}
#baize{position:absolute;inset:0;touch-action:none}
.panel{width:16.5rem;flex:0 0 auto;border-left:1px solid rgba(200,166,75,.2);
  background:linear-gradient(180deg,rgba(10,24,20,.96),rgba(6,16,13,.96));padding:1rem;
  display:flex;flex-direction:column;gap:.7rem;overflow:auto}
.panel h4{font-family:var(--ledger);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass);margin:0}
.panel p{margin:0;font-size:.82rem;line-height:1.45;color:rgba(244,235,216,.75)}
.bar{height:6px;background:rgba(244,235,216,.12);border-radius:3px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--brass);width:0}
@media (max-width:820px){
  .panel{position:static;width:auto;flex:0 0 auto;border-left:none;border-top:1px solid rgba(200,166,75,.2);
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem .8rem}
  .panel .hideNarrow{display:none}
  .tablebody{flex-direction:column}
  #baizeWrap{flex:1 1 auto}
}

/* ---- verdict + toast ---- */
.veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(4,10,8,.72);z-index:5}
.veil[hidden]{display:none}
.card{background:linear-gradient(180deg,#1d5142,#0d2a22);border:1px solid var(--brass);
  border-radius:5px;padding:1.4rem 1.6rem;max-width:26rem;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.card h3{font-family:var(--display);font-weight:400;margin:0 0 .6rem;font-size:1.5rem}
.card p{margin:.2rem 0;font-size:.9rem;color:rgba(244,235,216,.82)}
.card .row{display:flex;gap:.5rem;margin-top:1rem}
#toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:9;
  background:rgba(6,16,13,.95);border:1px solid var(--brass);border-radius:3px;
  padding:.5rem .9rem;font-size:.84rem}
#toast[hidden]{display:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}


/* ---- v1.2.0 rules, results, achievements, interaction ---- */
.gameModal{position:fixed;inset:0;display:none;z-index:900}
.gameModal.open{display:block}
.modalBackdrop{position:absolute;inset:0;background:rgba(3,8,7,.78);backdrop-filter:blur(3px)}
.modalCard{position:relative;z-index:1;width:min(760px,calc(100% - 2rem));max-height:86vh;overflow:auto;margin:7vh auto 0;
  padding:1.2rem 1.35rem 1.35rem;background:linear-gradient(180deg,#18261f,#0c1713);border:1px solid rgba(200,166,75,.45);
  box-shadow:0 28px 80px rgba(0,0,0,.55);border-radius:8px}
.modalCard h2{margin:.2rem 2.5rem .8rem 0;font-family:var(--display);font-weight:400;color:var(--ivory)}
.modalClose{position:absolute;right:.75rem;top:.55rem;border:0;background:transparent;color:var(--brass);font-size:2rem;cursor:pointer}
.modalBody{line-height:1.55}
.modalBody h3{font-family:var(--display);font-weight:400;color:var(--brass);margin:1rem 0 .35rem}
.modalBody ul{margin:.35rem 0 .9rem 1.1rem}
.modalActions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:1rem}
.rulesGrid,.resultsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.rulesGrid>div,.resultsGrid>div{padding:.75rem;background:rgba(244,235,216,.045);border:1px solid rgba(200,166,75,.14);border-radius:4px}
.rulesGrid strong,.resultsGrid strong{display:block;color:var(--brass);font-family:var(--ledger);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.2rem}
.scoreBreakdown{margin-top:1rem;padding:.85rem;border-left:3px solid var(--brass);background:rgba(200,166,75,.08)}
.achievementToast{position:fixed;right:1rem;bottom:1rem;z-index:950;max-width:360px;padding:.85rem 1rem;
  background:#14251d;border:1px solid rgba(200,166,75,.55);color:var(--ivory);box-shadow:0 10px 36px rgba(0,0,0,.45);
  transform:translateY(130%);opacity:0;transition:.35s ease;border-radius:5px}
.achievementToast.show{transform:translateY(0);opacity:1}
.achievementToast strong{display:block;color:var(--brass);font-family:var(--display);font-weight:400;font-size:1.05rem}
.pile.legalTarget,.slot.legalTarget{outline:3px solid rgba(200,166,75,.82);outline-offset:3px;filter:drop-shadow(0 0 7px rgba(200,166,75,.45))}
.pile.invalidMove,.slot.invalidMove{animation:invalidShake .22s linear 2}
@keyframes invalidShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.card.quickHome{animation:quickHome .28s ease}
@keyframes quickHome{from{filter:brightness(1.4)}to{filter:none}}
@media(max-width:680px){.rulesGrid,.resultsGrid{grid-template-columns:1fr}.modalCard{margin-top:3vh;max-height:92vh}}


/* ---- v1.3.0 daily challenge, stats and surprise me ---- */
.dailyHero{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding:1rem 1.1rem;margin-bottom:1rem;background:linear-gradient(90deg,rgba(200,166,75,.12),rgba(0,0,0,.18));border:1px solid rgba(200,166,75,.25);border-radius:6px}
.dailyStamp{display:grid;place-items:center;width:92px;height:92px;border:3px double var(--brass);border-radius:50%;color:var(--brass);font-family:var(--ledger);font-weight:700;letter-spacing:.12em;transform:rotate(-7deg);background:rgba(0,0,0,.18)}
.dailyGrid,.statsSummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1rem 0}
.dailyCard,.statsSummary>div{padding:.85rem;background:rgba(244,235,216,.045);border:1px solid rgba(200,166,75,.14);border-radius:4px}
.dailyCard strong,.statsSummary strong{display:block;color:var(--brass);font-family:var(--ledger);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}
.dailyCard span,.statsSummary span{display:block;margin-top:.2rem;font-size:1.08rem;color:var(--ivory)}
.medalTargets{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin:1rem 0}
.medalTargets>div{padding:.7rem;text-align:center;border:1px solid rgba(200,166,75,.18);background:rgba(0,0,0,.16)}
.medalTargets b{display:block;color:var(--brass);font-family:var(--display);font-weight:400}
.dailyHistory{margin-top:1.2rem}
.dailyHistoryRow{display:grid;grid-template-columns:1.2fr 1.8fr .8fr .8fr;gap:.5rem;padding:.55rem .65rem;border-bottom:1px solid rgba(200,166,75,.12)}
.statsTable{overflow:auto;border:1px solid rgba(200,166,75,.14)}
.statsRow{display:grid;grid-template-columns:1.5fr repeat(6,minmax(5rem,.8fr));gap:.45rem;padding:.55rem .65rem;border-bottom:1px solid rgba(200,166,75,.1);min-width:760px}
.statsRow.header{position:sticky;top:0;background:#14231d;color:var(--brass);font-family:var(--ledger);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.achievementGallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem}
.achievementTile{padding:.8rem;border:1px solid rgba(200,166,75,.15);background:rgba(244,235,216,.04);border-radius:4px;opacity:.48}
.achievementTile.unlocked{opacity:1;border-color:rgba(200,166,75,.42);background:rgba(200,166,75,.08)}
.achievementTile .stamp{float:right;color:var(--brass);font-size:1.25rem}
.surpriseGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.surpriseGrid label{display:grid;gap:.3rem;color:var(--brass);font-family:var(--ledger);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.surpriseGrid select{padding:.6rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.25)}
.surpriseResult{margin-top:1rem;padding:.85rem;border-left:3px solid var(--brass);background:rgba(200,166,75,.08)}
@media(max-width:760px){.dailyGrid,.statsSummary{grid-template-columns:repeat(2,1fr)}.surpriseGrid{grid-template-columns:1fr}.dailyHistoryRow{grid-template-columns:1fr 1fr}}

.settingsGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.settingsGrid label{display:grid;gap:.35rem;color:var(--brass);font-family:var(--ledger);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.settingsGrid select{padding:.65rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.25)}
.settingsGrid .settingCheck{display:flex;align-items:center;gap:.55rem;text-transform:none;letter-spacing:0;color:var(--ivory);font-family:inherit;font-size:.95rem}
body.table-midnight{--felt:#14263a} body.table-burgundy{--felt:#4a1823} body.table-walnut{--felt:#4a301f}
body.card-size-small .card{transform:scale(.9);transform-origin:top left}
body.card-size-large .card{transform:scale(1.08);transform-origin:top left}
body.card-size-xlarge .card{transform:scale(1.18);transform-origin:top left}
body.large-print .card{font-size:1.15em;font-weight:700}
body.reduced-motion *,body.reduced-motion *:before,body.reduced-motion *:after{animation-duration:.001ms!important;transition-duration:.001ms!important}
body.anim-off *{animation:none!important;transition:none!important}
.card.dragging{opacity:.72;filter:drop-shadow(0 12px 14px rgba(0,0,0,.45));z-index:500}
.dropTarget{outline:3px solid rgba(200,166,75,.9);outline-offset:3px;box-shadow:0 0 16px rgba(200,166,75,.4)}
.dropInvalid{animation:invalidShake .22s linear 2;outline:3px solid rgba(190,60,55,.8)}
.noMovesWarning{color:#e2b68f!important}
.cardback-journey .card.back,.cardback-journey .card.faceDown{background:repeating-linear-gradient(45deg,#1a3a31 0 8px,#24493d 8px 16px)}
.cardback-navy .card.back,.cardback-navy .card.faceDown{background:repeating-linear-gradient(45deg,#142a45 0 8px,#1d3a5c 8px 16px)}
.cardback-crimson .card.back,.cardback-crimson .card.faceDown{background:repeating-linear-gradient(45deg,#5a1e28 0 8px,#7a2936 8px 16px)}
.cardback-ivory .card.back,.cardback-ivory .card.faceDown{background:repeating-linear-gradient(45deg,#d9cfb6 0 8px,#eee7d8 8px 16px)}
@media(max-width:700px){.settingsGrid{grid-template-columns:1fr}}


/* ---- v1.5.0 game intelligence ---- */
.legalPreview{outline:3px solid rgba(102,190,255,.85)!important;outline-offset:3px;box-shadow:0 0 18px rgba(102,190,255,.35)!important}
.foundationCaution{outline:3px solid rgba(225,170,70,.9)!important;outline-offset:3px}
.dealCodeBox{display:flex;gap:.7rem;align-items:center;padding:.8rem 0}
.dealCodeBox code{flex:1;padding:.8rem 1rem;background:#09120f;border:1px solid rgba(200,166,75,.3);font-size:1.15rem;color:var(--brass);letter-spacing:.08em}
.dealCodeEntry{display:grid;grid-template-columns:1fr auto;gap:.6rem}
.dealCodeEntry input{padding:.7rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.25);text-transform:uppercase}
.masteryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.masteryCard{padding:.9rem;border:1px solid rgba(200,166,75,.15);background:rgba(244,235,216,.04);border-radius:5px}
.masteryCard h3{margin:.1rem 0 .5rem;font-family:var(--display);font-weight:400}
.masteryBar{height:.55rem;background:rgba(0,0,0,.32);border:1px solid rgba(200,166,75,.18);border-radius:999px;overflow:hidden}
.masteryBar span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dim),var(--brass))}
.masteryMedal{float:right;color:var(--brass);font-family:var(--ledger);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem}
.deadlockPanel{margin-top:.6rem;padding:.7rem;background:rgba(140,60,50,.12);border-left:3px solid rgba(210,90,75,.8)}
.deadlockPanel strong{color:#e5b0a7}
.smartHintNote{font-size:.9rem;color:var(--brass)}
@media(max-width:650px){.dealCodeEntry{grid-template-columns:1fr}.masteryGrid{grid-template-columns:1fr}}

.coachGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.coachGrid label{display:grid;gap:.35rem;color:var(--brass);font-family:var(--ledger);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.coachGrid select{padding:.65rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.25)}
.strategyPanel{margin-top:1rem;padding:.9rem;border-left:3px solid var(--brass);background:rgba(200,166,75,.08)}
.challengeGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.challengeChoice{padding:.9rem;text-align:left;background:rgba(244,235,216,.04);border:1px solid rgba(200,166,75,.18);color:var(--ivory);cursor:pointer}.challengeChoice:hover,.challengeChoice.active{border-color:var(--brass);background:rgba(200,166,75,.1)}.challengeChoice span{display:block;margin-top:.25rem;color:rgba(244,235,216,.65);font-size:.85rem}
.analysisGrade{font-family:var(--display);font-size:3rem;color:var(--brass);float:right;margin-left:1rem}.analysisGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.analysisGrid>div{padding:.7rem;background:rgba(244,235,216,.045);border:1px solid rgba(200,166,75,.13)}.analysisGrid strong{display:block;color:var(--brass);font-family:var(--ledger);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}.personalBest{margin-top:.8rem;padding:.65rem .8rem;border:1px solid rgba(200,166,75,.35);background:rgba(200,166,75,.1);color:var(--ivory)}
:focus-visible{outline:3px solid #e4c66c!important;outline-offset:3px!important}.card[aria-selected="true"]{outline:3px solid #e4c66c;outline-offset:2px}@media(max-width:700px){.coachGrid,.challengeGrid,.analysisGrid{grid-template-columns:1fr}}


/* ---- v1.7.0 campaign & progression ---- */
.profileHero{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1.1rem;margin-bottom:1rem;background:linear-gradient(90deg,rgba(200,166,75,.12),rgba(0,0,0,.18));border:1px solid rgba(200,166,75,.28);border-radius:6px}
.profileSeal{display:grid;place-items:center;width:92px;height:92px;border:3px double var(--brass);border-radius:50%;font-family:var(--display);font-size:1.8rem;color:var(--brass)}
.profileTitle{font-family:var(--display);font-size:1.5rem;color:var(--ivory)}
.profileLevel{font-family:var(--ledger);color:var(--brass);text-transform:uppercase;letter-spacing:.08em}
.profileXp{height:.55rem;background:rgba(0,0,0,.35);border:1px solid rgba(200,166,75,.22);border-radius:999px;overflow:hidden}
.profileXp span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dim),var(--brass))}
.goalsGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.8rem}
.goalCard{padding:.9rem;border:1px solid rgba(200,166,75,.15);background:rgba(244,235,216,.04);border-radius:5px}
.goalCard.complete{border-color:rgba(200,166,75,.48);background:rgba(200,166,75,.09)}
.goalCard h3{margin:.1rem 0 .4rem;font-family:var(--display);font-weight:400}
.goalProgress{height:.5rem;background:rgba(0,0,0,.3);border-radius:999px;overflow:hidden;margin:.55rem 0}
.goalProgress span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dim),var(--brass))}
.goalReward{color:var(--brass);font-family:var(--ledger);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}
.cosmeticGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.75rem}
.cosmeticCard{padding:.8rem;border:1px solid rgba(200,166,75,.14);background:rgba(244,235,216,.04);border-radius:5px;opacity:.45}
.cosmeticCard.unlocked{opacity:1;border-color:rgba(200,166,75,.4)}
.cosmeticSwatch{height:74px;border-radius:4px;margin-bottom:.55rem;border:1px solid rgba(255,255,255,.12)}
.campaignMap{display:grid;gap:1rem}
.regionCard{position:relative;padding:1rem;border:1px solid rgba(200,166,75,.16);background:linear-gradient(135deg,rgba(244,235,216,.035),rgba(0,0,0,.13));border-radius:6px}
.regionCard.locked{opacity:.5}
.regionHeader{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.regionHeader h2{margin:0;font-family:var(--display);font-weight:400}
.regionProgress{font-family:var(--ledger);color:var(--brass);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}
.regionStops{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:.8rem}
.regionStop{padding:.65rem;border:1px solid rgba(200,166,75,.13);background:rgba(0,0,0,.12)}
.regionStop.done{border-color:rgba(200,166,75,.4);background:rgba(200,166,75,.08)}
.regionReward{margin-top:.8rem;padding:.65rem;border-left:3px solid var(--brass);background:rgba(200,166,75,.07)}
@media(max-width:700px){.profileHero{grid-template-columns:1fr}.profileSeal{width:72px;height:72px}}

.audioGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.audioGrid label{display:grid;gap:.35rem;color:var(--brass);font-family:var(--ledger);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em}.audioGrid input[type="range"]{width:100%}.audioGrid .settingCheck{display:flex;align-items:center;gap:.55rem;text-transform:none;letter-spacing:0;color:var(--ivory);font-family:inherit;font-size:.95rem}.celebrationLayer{position:fixed;inset:0;pointer-events:none;z-index:980;overflow:hidden}.confettiBit{position:absolute;width:9px;height:16px;background:var(--brass);opacity:.92;animation:confettiFall 1.8s ease-in forwards}@keyframes confettiFall{0%{transform:translateY(-10vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(110vh) rotate(540deg);opacity:0}}.unlockToast{position:fixed;left:50%;top:1rem;transform:translate(-50%,-160%);z-index:990;min-width:min(440px,calc(100% - 2rem));padding:.9rem 1rem;background:#14251d;border:1px solid rgba(200,166,75,.55);box-shadow:0 12px 38px rgba(0,0,0,.5);transition:.35s ease;color:var(--ivory)}.unlockToast.show{transform:translate(-50%,0)}.unlockToast strong{display:block;color:var(--brass);font-family:var(--display);font-size:1.15rem;font-weight:400}.card.movePulse{animation:movePulse .24s ease}@keyframes movePulse{0%{filter:brightness(1.45);transform:translateY(-3px)}100%{filter:none;transform:none}}.foundationFlare{animation:foundationFlare .5s ease}@keyframes foundationFlare{0%{box-shadow:0 0 0 rgba(230,196,100,0)}50%{box-shadow:0 0 24px rgba(230,196,100,.8)}100%{box-shadow:0 0 0 rgba(230,196,100,0)}}body.reduced-effects .confettiBit{display:none}body.reduced-effects .card,body.reduced-effects .foundationFlare{animation:none!important}.victorySummary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.8rem}.victorySummary>div{padding:.75rem;background:rgba(244,235,216,.045);border:1px solid rgba(200,166,75,.14)}.victorySummary strong{display:block;color:var(--brass);font-family:var(--ledger);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}@media(max-width:700px){.audioGrid,.victorySummary{grid-template-columns:1fr}}
.platformTabs{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1rem}.platformTabs button{padding:.55rem .75rem;background:rgba(244,235,216,.04);border:1px solid rgba(200,166,75,.18);color:var(--ivory)}.platformTabs button.active{border-color:var(--brass);background:rgba(200,166,75,.12)}.platformGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.7rem}.platformStat,.historyCard,.recordCard,.milestoneCard,.profileCard{padding:.8rem;border:1px solid rgba(200,166,75,.15);background:rgba(244,235,216,.04);border-radius:5px}.platformStat strong,.recordCard strong{display:block;color:var(--brass);font-family:var(--ledger);font-size:.7rem;text-transform:uppercase}.historyList{display:grid;gap:.55rem}.historyCard{display:grid;grid-template-columns:1.4fr repeat(5,minmax(70px,.6fr));gap:.55rem}.historyCard.win{border-left:3px solid var(--brass)}.historyCard.loss{border-left:3px solid rgba(180,80,70,.8)}.milestoneCard.done,.profileCard.active{border-color:var(--brass);background:rgba(200,166,75,.09)}.milestoneProgress{height:.5rem;background:rgba(0,0,0,.3);border-radius:999px;overflow:hidden}.milestoneProgress span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dim),var(--brass))}.platformActions{display:flex;flex-wrap:wrap;gap:.55rem;margin:.8rem 0}.platformInput{padding:.65rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.25)}.analyticsBar{height:.55rem;background:rgba(0,0,0,.3);border-radius:999px;overflow:hidden}.analyticsBar span{display:block;height:100%;background:linear-gradient(90deg,var(--brass-dim),var(--brass))}@media(max-width:850px){.historyCard{grid-template-columns:1fr 1fr}.historyCard>strong{grid-column:1/-1}}

/* ---- v2.1.0 UI consolidation ---- */
body.tableOpen .tableSecondary{display:none!important}
.menuHubGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.menuHubGrid button{padding:.9rem;text-align:left;background:rgba(244,235,216,.04);border:1px solid rgba(200,166,75,.16);color:var(--ivory);cursor:pointer}
.menuHubGrid button:hover{border-color:var(--brass);background:rgba(200,166,75,.09)}
.menuHubGrid button span{display:block;margin-top:.2rem;color:rgba(244,235,216,.62);font-size:.82rem}
#btnAutoFinish{font-weight:600}
@media(max-width:680px){.menuHubGrid{grid-template-columns:1fr}}


/* ---- v2.3.0 compact mobile rail ---- */
.mobileStatusRow,.mobileActionRow{display:none}

@media(max-width:620px){
  .rail{
    position:static;
    display:flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .45rem;
    max-height:none;
    overflow:visible;
    background:rgba(7,18,14,.96);
  }
  .rail .title,.rail .stat,.rail .spacer,.rail .railver{display:none!important}
  .rail .tools{display:none!important}

  .mobileStatusRow{
    display:grid;
    grid-template-columns:minmax(0,1.6fr) .7fr .9fr .8fr;
    gap:.35rem;
    align-items:center;
    padding:.45rem .55rem;
    background:rgba(7,18,14,.96);
    border-top:1px solid rgba(200,166,75,.16);
    border-bottom:1px solid rgba(200,166,75,.16);
    font-size:.82rem;
  }
  .mobileStatusRow span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #mobileGameName{color:var(--ivory);font-weight:600}
  #mobileScore,#mobileMoves,#mobileClock{color:var(--brass);text-align:right}

  .mobileActionRow{
    position:sticky;
    bottom:0;
    z-index:85;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.4rem;
    padding:.45rem;
    background:rgba(7,18,14,.97);
    backdrop-filter:blur(6px);
    border-top:1px solid rgba(200,166,75,.2);
  }
  .mobileActionRow button{
    min-height:48px;
    padding:.55rem .35rem;
    font-size:.88rem;
    font-weight:600;
  }
  #baizeWrap{min-height:68vh}
}

@media(max-width:420px){
  .mobileStatusRow{
    grid-template-columns:1fr 1fr;
    row-gap:.25rem;
  }
  #mobileGameName{grid-column:1/-1}
  .mobileActionRow{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #baizeWrap{min-height:70vh}
}


/* ---- v2.4.0 opening experience ---- */
.openingExperience{display:grid;gap:1rem;margin:0 auto 1.2rem;max-width:1180px}
.openingHero{position:relative;overflow:hidden;border:1px solid rgba(200,166,75,.22);border-radius:12px;min-height:360px;background:#0b1713}
.openingHero img{display:block;width:100%;height:100%;min-height:360px;object-fit:cover;object-position:center}
.openingOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(1rem,4vw,2.4rem);background:linear-gradient(90deg,rgba(5,13,10,.92) 0%,rgba(5,13,10,.70) 45%,rgba(5,13,10,.10) 78%,rgba(5,13,10,0) 100%)}
.openingOverlay h1{margin:.2rem 0 .45rem;max-width:620px;font-size:clamp(2rem,5vw,4rem);line-height:.95}
.openingOverlay p{max-width:600px;margin:0 0 1rem;color:rgba(244,235,216,.86);font-size:1rem}
.openingPrimary{display:flex;flex-wrap:wrap;gap:.55rem}
.openingPrimary button{min-width:140px}
.openingCards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.openingCard{padding:1rem;border:1px solid rgba(200,166,75,.16);background:rgba(244,235,216,.04);border-radius:8px}
.openingCard h2{margin:.2rem 0 .4rem}
.openingCard p{min-height:2.8em;color:rgba(244,235,216,.72)}
@media(max-width:800px){
  .openingCards{grid-template-columns:1fr}
  .openingHero{min-height:300px}
  .openingHero img{min-height:300px}
}
@media(max-width:620px){
  .openingExperience{gap:.7rem}
  .openingHero{min-height:270px;border-radius:8px}
  .openingHero img{min-height:270px}
  .openingOverlay{padding:1rem;background:linear-gradient(0deg,rgba(5,13,10,.96) 0%,rgba(5,13,10,.76) 54%,rgba(5,13,10,.08) 100%)}
  .openingPrimary{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #openingContinue{grid-column:1/-1}
  .openingPrimary button{min-width:0;width:100%}
}


/* ---- v2.5.0 library discovery ---- */
.libraryDiscovery{margin:0 0 1rem;padding:1rem;border:1px solid rgba(200,166,75,.16);background:rgba(244,235,216,.035);border-radius:9px}
.discoveryHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.discoveryHeader h2{margin:.1rem 0 0}
.collectionProgress{color:var(--brass);font-size:.9rem;white-space:nowrap}
.discoveryChips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0}
.discoveryChip{padding:.5rem .72rem;border:1px solid rgba(200,166,75,.18);background:rgba(244,235,216,.03);color:var(--ivory)}
.discoveryChip.active{border-color:var(--brass);background:rgba(200,166,75,.12)}
.discoveryFilters{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:.55rem;align-items:end}
.discoveryFilters label{display:grid;gap:.25rem;font-size:.8rem;color:rgba(244,235,216,.72)}
.discoveryFilters select{min-height:42px;padding:.5rem;background:#0d1814;color:var(--ivory);border:1px solid rgba(200,166,75,.22)}
.discoverySummary{margin-top:.65rem;color:rgba(244,235,216,.65);font-size:.85rem}
.gamecard.discoveryHidden{display:none!important}
.gamecard .discoveryMeta{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.gamecard .discoveryTag{padding:.18rem .36rem;border:1px solid rgba(200,166,75,.15);border-radius:999px;font-size:.68rem;color:rgba(244,235,216,.68)}
@media(max-width:760px){
  .discoveryHeader{align-items:flex-start;flex-direction:column}
  .discoveryFilters{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .discoveryFilters{grid-template-columns:1fr}
}

.fam.discoveryFamilyHidden{display:none!important}


/* ---- v2.6.0 UX refinement ---- */
.discoveryUtilityRow{
  display:flex;
  justify-content:flex-end;
  gap:.5rem;
  margin:.6rem 0 0;
}
.discoveryAdvancedFilters{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:.55rem;
  margin-top:.65rem;
  padding:.7rem;
  border:1px solid rgba(200,166,75,.14);
  background:rgba(244,235,216,.025);
  border-radius:7px;
}
.discoveryAdvancedFilters[hidden]{display:none!important}
.discoveryAdvancedFilters label{
  display:grid;
  gap:.25rem;
  font-size:.8rem;
  color:rgba(244,235,216,.72);
}
.discoveryAdvancedFilters select{
  min-height:42px;
  padding:.5rem;
  background:#0d1814;
  color:var(--ivory);
  border:1px solid rgba(200,166,75,.22);
}
button.tertiary{
  opacity:.88;
  border-color:rgba(200,166,75,.14);
  background:rgba(244,235,216,.02);
}
.openingCard:first-child{
  border-color:rgba(200,166,75,.34);
  background:rgba(200,166,75,.055);
}
@media(max-width:760px){
  .discoveryAdvancedFilters{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .discoveryUtilityRow{display:grid;grid-template-columns:1fr 1fr}
  .discoveryAdvancedFilters{grid-template-columns:1fr}
}

/* ---- classes the v2 markup uses -------------------------------------------
   button.secondary, .screenHeader and .resultsCard were written into the
   markup and into six modules without ever reaching this stylesheet, so
   every one of those buttons drew ivory text on the browser's default
   white and the new screens had no frame at all. */
button.secondary{
  font-family:var(--display);font-size:.9rem;letter-spacing:.02em;
  padding:.5rem .95rem;border-radius:3px;border:1px solid var(--brass-dim);
  background:rgba(0,0,0,.28);color:var(--ivory)}
button.secondary:hover{background:rgba(200,166,75,.16);border-color:var(--brass)}
button.secondary[disabled]{opacity:.4;cursor:not-allowed}

.screenHeader{display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding:1rem 1.4rem;border-bottom:1px solid rgba(200,166,75,.18);
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent)}
.screenHeader h1{margin:.15rem 0 0;font-family:var(--display);font-weight:400;
  font-size:1.6rem;color:var(--ivory)}

/* the v2 screens are full-height panels: they scroll their own content */
#screenDaily,#screenStats,#screenMastery,#screenProfile,
#screenGoals,#screenCampaign,#screenPlatform{
  background:var(--baize-dark);overflow:hidden}
#screenDaily>*:not(.screenHeader),#screenStats>*:not(.screenHeader),
#screenMastery>*:not(.screenHeader),#screenProfile>*:not(.screenHeader),
#screenGoals>*:not(.screenHeader),#screenCampaign>*:not(.screenHeader),
#screenPlatform>*:not(.screenHeader){margin-left:1.4rem;margin-right:1.4rem}
#screenDaily,#screenStats,#screenMastery,#screenProfile,
#screenGoals,#screenCampaign,#screenPlatform{overflow-y:auto}
#screenDaily h2,#screenStats h2,#screenMastery h2,#screenCampaign h2{
  font-family:var(--display);font-weight:400;color:var(--brass);margin:1.2rem 1.4rem .5rem}
.resultsCard{max-width:min(560px,calc(100% - 2rem))}

/* the opening block sits in the cover's flow, above the plate art rather
   than behind it: unpositioned content loses to an absolutely positioned
   plate no matter how much of it there is */
.openingExperience{position:relative;z-index:2;margin:0 clamp(1.2rem,4vw,3rem) 3.2rem;
  max-width:44rem}
.openingCard,.openingCard:first-child{backdrop-filter:blur(3px);background:rgba(11,21,18,.9)}
.openingCard:first-child{border-color:rgba(200,166,75,.34)}
@media(max-width:900px){.openingExperience{margin-bottom:1rem;max-width:none}}