/* Coshwold — the board. Flat vector on a cold slate ground, one crimson accent (the robbers' cross), figures in the
   mono so the digit 1 never turns into a bare stroke. Phone first, a wider measure from 640, the page recomposes
   into two columns at 1000 with the waystone pinned across the top at every width. */
:root{
  --ground:#101417; --stone:#1A2024; --stone2:#232B30; --stone3:#2C363C;
  --ink:#E9E4DA; --mute:rgba(233,228,218,.58); --faint:rgba(233,228,218,.32);
  --line:rgba(233,228,218,.12); --line2:rgba(233,228,218,.2);
  --crimson:#CF2740; --crimsondim:rgba(207,39,64,.16); --crimsonline:rgba(207,39,64,.5);
  --moss:#3C4A44; --mossdim:rgba(60,74,68,.55);
  --ws:104px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--ground); color:var(--ink);
  font:400 15px/1.5 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  padding-top:calc(var(--ws) + env(safe-area-inset-top,0px));
}
h1,h2,h3,.poster,.hournum{font-family:"Squada One",Impact,"Arial Narrow",sans-serif;font-weight:400;letter-spacing:.01em}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default;opacity:.55}
input{font:inherit;color:inherit}

/* ---------- the waystone: pinned across the top at every width ---------- */
#waystone{
  position:fixed; top:0; left:0; right:0; z-index:40;
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 8px;
  background:rgba(16,20,23,.96); border-bottom:1px solid var(--line2);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.ws-row{display:flex;align-items:center;gap:8px;min-width:0}
.ws-top{min-height:40px}
.ws-mark{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0}
.ws-mark img{width:26px;height:26px;border-radius:50%;display:block;flex:none}
.ws-mark b{display:none;font-family:"Squada One",Impact,sans-serif;font-weight:400;font-size:21px;letter-spacing:.03em;line-height:1}
.ws-nav{display:flex;gap:12px;margin-left:auto;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.ws-nav a{color:var(--faint);text-decoration:none;padding:3px 0;border-bottom:1px solid transparent;white-space:nowrap}
.ws-nav a[aria-current]{color:var(--ink);border-bottom-color:var(--crimson)}
.ws-wallet{min-height:34px;padding:0 11px;border:1px solid var(--line2);border-radius:3px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap;flex:none}
.ws-wallet[data-on="1"]{color:var(--ink)}
.ws-ca{margin-top:6px;min-height:34px;padding:4px 6px 4px 8px;gap:7px;border:1px solid var(--crimsonline);border-radius:3px;background:var(--crimsondim)}
.ws-tag{display:none;flex:none;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson);font-weight:600}
.ws-addr{
  flex:1 1 auto;min-width:0;display:block;
  font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:clamp(10.5px,2.7vw,13px);line-height:1.25;letter-spacing:-.01em;
  color:var(--ink);overflow-wrap:anywhere;word-break:break-all;user-select:all;-webkit-user-select:all;
}
.ws-addr[data-live="0"]{color:var(--mute);font-family:"IBM Plex Sans",system-ui,sans-serif;font-size:12.5px;letter-spacing:.04em;user-select:none;-webkit-user-select:none}
.ws-copy{flex:none;min-height:28px;padding:0 8px;border-radius:2px;background:var(--crimson);color:#15090C;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ws-copy[data-done="1"]{background:var(--ink);color:#15090C}
.ws-gmgn{flex:none;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);text-decoration:none;padding:0 2px;white-space:nowrap}
.ws-gm-word{display:none}
.ws-gm-arrow{font-size:14px;line-height:1}

/* ---------- the wold: one column on a phone ---------- */
#wold{width:100%;max-width:600px;margin:0 auto;padding:16px 14px 40px;display:block}

.roadhead{margin:0 0 14px}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:0 0 8px}
.roadhead h1{font-size:34px;line-height:1.02;margin:0 0 8px}
.roadlede{color:var(--mute);font-size:13.5px;line-height:1.6;margin:0}
.clockline{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;margin:12px 0 0;font-size:12.5px;color:var(--mute)}
.clockline b{color:var(--ink);font-weight:500}
.clockline .bigfig{font-size:22px;color:var(--ink)}

/* the one object: six hours of road */
.road{position:relative;background:var(--stone);border:1px solid var(--line);border-radius:6px;padding:12px 8px 10px;margin:0 0 12px}
.hours{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.hourcol{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;
  min-height:196px;padding:8px 4px 6px;border-radius:4px;background:var(--stone2);border:1px solid transparent;
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s;
}
.hourcol:hover{background:var(--stone3)}
.hourcol[aria-pressed="true"]{border-color:var(--ink);background:var(--stone3)}
.hourcol[data-marked="1"]{background:var(--crimsondim);border-color:var(--crimsonline)}
.hourcol[data-marked="1"][aria-pressed="true"]{border-color:var(--crimson)}
.hournum{font-size:26px;line-height:1;color:var(--ink);margin-bottom:auto}
.hourcol[data-marked="1"] .hournum{color:var(--crimson)}
.tollstack{display:grid;grid-template-columns:repeat(3,7px);gap:2px;justify-content:center;min-height:16px}
.tollmark{width:7px;height:7px;border-radius:1px;background:var(--ink);opacity:.85}
.tollmark[data-more]{background:none;opacity:1;font-size:8px;line-height:7px;color:var(--mute);width:auto}
.tollcount{font-size:10.5px;color:var(--mute);line-height:1}
.tollcount b{color:var(--ink);font-weight:500}
.stakewell{width:100%;height:58px;display:flex;flex-direction:column;justify-content:flex-end;border-top:1px solid var(--line)}
.stakebar{width:100%;background:var(--crimson);border-radius:2px 2px 0 0;min-height:0;height:0;transition:height .45s cubic-bezier(.2,.7,.2,1);opacity:.9}
.stakefig{font-size:9.5px;color:var(--mute);line-height:1;margin-top:4px;text-align:center;white-space:nowrap}
.stakefig b{color:var(--ink);font-weight:500}
.ambushx{
  position:absolute;top:-6px;left:0;width:calc((100% - 25px)/6);height:22px;pointer-events:none;
  display:flex;align-items:center;justify-content:center;transform:translateX(0);transition:transform .55s cubic-bezier(.2,.7,.2,1),opacity .3s;
}
.ambushx[data-off="1"]{opacity:0}
.ambushx svg{width:22px;height:22px;display:block;filter:drop-shadow(0 0 6px rgba(207,39,64,.5))}
.roadfoot{display:flex;justify-content:space-between;gap:10px;margin:10px 2px 0;font-size:11px;color:var(--faint);letter-spacing:.04em}
.roadfoot b{color:var(--crimson);font-weight:500}

/* the action: the saddle under the board */
.saddle{background:var(--stone);border:1px solid var(--line);border-radius:6px;padding:14px 14px 12px;margin:0 0 16px}
.saddlehead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 8px}
.saddlehead h2{font-size:24px;margin:0;line-height:1}
.saddlehead em{font-style:normal;font-size:11.5px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.saddlenote{color:var(--mute);font-size:13px;line-height:1.55;margin:0 0 12px}
.saddlenote b{color:var(--ink);font-weight:500}
.saddlerow{display:grid;grid-template-columns:1fr;gap:10px}
.saddlebtn{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:58px;padding:10px 14px;text-align:left;
  border:1px solid var(--line2);border-radius:4px;background:var(--stone2);transition:border-color .2s,background .2s;
}
.saddlebtn:not(:disabled):hover{border-color:var(--ink)}
.saddlebtn i{font-style:normal;font-family:"Squada One",Impact,sans-serif;font-size:21px;line-height:1;letter-spacing:.02em}
.saddlebtn small{font-size:12px;color:var(--mute)}
.saddlebtn[data-role="robber"]{border-color:var(--crimsonline);background:var(--crimsondim)}
.saddlebtn[data-role="robber"] i{color:var(--crimson)}
.saddlebtn[data-role="robber"]:not(:disabled):hover{border-color:var(--crimson)}
.stakefield{display:flex;align-items:center;gap:8px;margin-top:8px}
.stakefield label{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.stakefield input{
  flex:1;min-width:0;background:var(--ground);border:1px solid var(--line2);border-radius:3px;padding:9px 10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;color:var(--ink);outline:none;
}
.stakefield input:focus{border-color:var(--crimson)}
.stakefield button{min-height:38px;padding:0 10px;border:1px solid var(--line2);border-radius:3px;font-size:12px;color:var(--mute)}
.shutword{font-size:12.5px;color:var(--faint);margin:6px 0 0}

/* the tally: clock, tape, ledger, primer */
.tally{display:grid;gap:12px;margin:0 0 20px}
.tallycard{background:var(--stone);border:1px solid var(--line);border-radius:6px;padding:12px 14px}
.tallyhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 8px}
.tallyhead h3{font-size:19px;margin:0;line-height:1}
.tallyhead span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.gaugegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gaugebox dt{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 3px}
.gaugebox dd{margin:0;font-size:19px;line-height:1.1;color:var(--ink)}
.gaugebox dd small{font-size:11px;color:var(--mute)}
.ifnow{margin:10px 0 0;padding:9px 10px;border-left:2px solid var(--crimson);background:var(--crimsondim);font-size:12.5px;color:var(--mute);line-height:1.5}
.ifnow b{color:var(--ink);font-weight:500}
.tapeln{display:grid;grid-template-columns:30px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.tapeln:first-child{border-top:0}
.tapeln i{font-style:normal;font-family:"Squada One",Impact,sans-serif;font-size:17px;color:var(--mute);text-align:center}
.tapeln[data-k="lurked"] i{color:var(--crimson)}
.tapeln[data-k="rung"] i{color:var(--ink)}
.tapeln em{font-style:normal;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tapeln u{text-decoration:none;color:var(--faint);font-size:11px}
.ledgerln{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line);font-size:12.5px}
.ledgerln:first-child{border-top:0}
.ledgerln b{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;color:var(--mute)}
.ledgerln em{font-style:normal;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledgerln u{text-decoration:none;color:var(--ink)}
.ledgerln[data-quiet="1"] em{color:var(--mute)}
.primerls{margin:0;padding:0 0 0 16px;font-size:13px;color:var(--mute);line-height:1.6}
.primerls li{margin:0 0 5px}
.primerls b{color:var(--ink);font-weight:500}
.muted{color:var(--mute);font-size:13px;margin:0;line-height:1.55}

/* the milestone at the bottom: reference only, the waystone is the buy control */
.milestone{border-top:1px solid var(--line);padding:14px 0 0;font-size:12px;color:var(--faint);display:grid;gap:5px}
.milestone code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;color:var(--mute);overflow-wrap:anywhere;word-break:break-all}
.milestone a{color:var(--mute)}

/* leaf pages: rules, crossings, wallet */
.rulesleaf{background:var(--stone);border:1px solid var(--line);border-radius:6px;padding:16px 16px 14px;margin:0 0 16px}
.rulesleaf h2{font-size:28px;margin:0 0 10px;line-height:1.05}
.rulesleaf p{color:var(--mute);font-size:14px;line-height:1.6;margin:0 0 10px}
.rulesleaf p b{color:var(--ink);font-weight:500}
.wideclip{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:10px}
.datatable{width:100%;border-collapse:collapse;font-size:12.5px;min-width:420px}
.datatable th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:6px 8px;border-bottom:1px solid var(--line2)}
.datatable td{padding:7px 8px;border-bottom:1px solid var(--line);color:var(--ink);white-space:nowrap}
.datatable td.hourcell{font-family:"Squada One",Impact,sans-serif;font-size:17px}
.datatable td.hourcell[data-marked="1"]{color:var(--crimson)}
.smallbtn{min-height:32px;padding:0 10px;border:1px solid var(--crimsonline);border-radius:3px;background:var(--crimsondim);color:var(--crimson);font-size:12px;font-weight:600}

/* the lodge: chooser + confirm */
#lodge{position:fixed;inset:0;z-index:60;background:rgba(6,8,10,.72);display:flex;align-items:flex-end;justify-content:center;padding:0}
#lodge[hidden]{display:none}
.lodgebox{width:100%;max-width:520px;background:var(--stone);border:1px solid var(--line2);border-radius:10px 10px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px))}
.lodgehead{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px}
.lodgehead span{font-family:"Squada One",Impact,sans-serif;font-size:24px;letter-spacing:.02em}
.lodgeshut{width:34px;height:34px;border:1px solid var(--line2);border-radius:50%;font-size:18px;line-height:1;color:var(--mute)}
.lodgebody p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--mute)}
.lodgebody p b{color:var(--ink);font-weight:500}
.gobtn{display:block;width:100%;min-height:50px;margin-top:12px;border-radius:4px;background:var(--crimson);color:#15090C;font-size:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.gobtn[data-role="traveller"]{background:var(--ink)}
.pickwallet{display:grid;gap:8px}
.pickwallet button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);border-radius:4px;text-align:left}
.pickwallet img{width:24px;height:24px;border-radius:5px}
.flashnote{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:70;max-width:min(92vw,460px);padding:10px 14px;border-radius:4px;background:var(--ink);color:#15090C;font-size:13px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* ---------- a wider measure from 640 ---------- */
@media (min-width:640px){
  :root{--ws:100px}
  #wold{max-width:760px;padding:22px 20px 44px}
  .roadhead h1{font-size:44px}
  .roadlede{font-size:15px}
  .hourcol{min-height:250px}
  .hournum{font-size:34px}
  .tollstack{grid-template-columns:repeat(4,8px)}
  .tollmark{width:8px;height:8px}
  .stakewell{height:80px}
  .stakefig{font-size:11px}
  .ambushx svg{width:26px;height:26px}
  .saddlerow{grid-template-columns:1fr 1fr}
  .gaugebox dd{font-size:23px}
  .ws-tag{display:inline}
  .ws-mark b{display:inline}
  .ws-gm-word{display:inline}
  .ws-ca{padding:4px 8px 4px 10px;gap:8px}
  .ws-copy{padding:0 10px}
  .ws-addr{font-size:13px;letter-spacing:0}
}

/* ---------- the page recomposes at 1000: board + saddle left, the tally as a second column, waystone one row ---------- */
@media (min-width:1000px){
  :root{--ws:62px}
  #waystone{display:flex;align-items:center;gap:18px;padding:calc(8px + env(safe-area-inset-top,0px)) 20px 8px}
  .ws-top{display:contents}
  .ws-mark{order:1;flex:none}
  .ws-nav{order:2;margin-left:0;flex:none}
  .ws-ca{order:3;flex:1 1 auto;margin:0 auto;max-width:640px;min-height:44px;padding:4px 10px}
  .ws-wallet{order:4}
  .ws-addr{font-size:13.5px;flex:0 1 auto}
  #wold{
    max-width:1180px;padding:26px 24px 48px;
    display:grid;grid-template-columns:minmax(0,1fr) 372px;grid-template-rows:auto auto auto 1fr auto;
    grid-template-areas:"head head" "road tally" "saddle tally" "spare tally" "foot foot";
    gap:0 26px;align-items:start;
  }
  .roadhead{grid-area:head;display:grid;grid-template-columns:1fr auto;gap:0 30px;align-items:end;margin:0 0 18px}
  .roadhead h1{font-size:56px}
  .roadhead .clockline{margin:0;justify-content:flex-end;align-self:end}
  .road{grid-area:road;padding:18px 14px 14px;margin-bottom:14px}
  .hours{gap:8px}
  .hourcol{min-height:340px;padding:12px 8px 10px}
  .hournum{font-size:46px}
  .tollstack{grid-template-columns:repeat(6,9px);gap:3px}
  .tollmark{width:9px;height:9px}
  .tollcount{font-size:12px}
  .stakewell{height:120px}
  .stakefig{font-size:12px}
  .ambushx{width:calc((100% - 40px)/6);top:-8px}
  .ambushx svg{width:30px;height:30px}
  .saddle{grid-area:saddle;margin:0;padding:18px 18px 16px}
  .saddlehead h2{font-size:28px}
  .tally{grid-area:tally;margin:0;position:sticky;top:calc(var(--ws) + 14px)}
  .milestone{grid-area:foot;margin-top:26px;grid-template-columns:1fr 1fr;gap:6px 24px}
  #lodge{align-items:center;padding:20px}
  .lodgebox{border-radius:10px;padding-bottom:18px}
}