:root{
  --ink:#241f18; --ink2:#5c503d; --ink3:#8b7d64;
  --linen:#e7dfcd; --paper:#f6f1e4; --line:#c6b99d;
  --brass:#9a7b2f; --ok:#1f7a4d; --bad:#9a2e2e; --merge:#7a3fa8;
  --shadow:0 1px 0 rgba(255,255,255,.6), 0 2px 10px rgba(58,46,28,.16);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--linen); color:var(--ink);
  font:15px/1.45 "Iowan Old Style", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle at 18% 12%, rgba(255,255,255,.55), transparent 55%);
}
button{font:inherit; color:inherit; cursor:pointer}
/* visible focus, for keyboard_navigation */
button:focus-visible, select:focus-visible, .tick:focus-visible{
  outline:3px solid var(--brass); outline-offset:2px}
button:disabled{cursor:default; opacity:.42}
kbd{font:600 12px ui-monospace,Menlo,Consolas,monospace; background:#fff; border:1px solid var(--line);
  border-bottom-width:2px; border-radius:4px; padding:0 4px}

/* --------------------------------------------------------------- frame */
/* HOUSE LAYOUT: information on the left, the board in the middle, every
   control the player can press on the right. */
.app{
  height:100%; display:grid; gap:10px; padding:10px;
  grid-template-columns:312px minmax(0,1fr) 336px;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"head head head" "info plat control";
}
.head{grid-area:head; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap;
  border-bottom:2px solid var(--ink); padding:0 4px 6px}
.head h1{margin:0; font:700 25px/1 "Iowan Old Style",Georgia,serif; letter-spacing:.02em}
.head .ver{font:600 11px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--ink3);
  border:1px solid var(--line); border-radius:4px; padding:2px 5px; align-self:center}
.head h1 span{color:var(--brass)}
.head .sub{color:var(--ink2); font-size:13px; font-style:italic}
.head .sp{margin-left:auto; display:flex; gap:6px}
.head button{background:var(--paper); border:1px solid var(--line); border-radius:5px; padding:5px 11px;
  box-shadow:var(--shadow); font-size:13px}
.head button:hover:not(:disabled){background:#fff}

#plat{grid-area:plat; position:relative; min-height:0; background:var(--paper);
  border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); overflow:hidden}
#board{display:block; width:100%; height:100%}

/* ---------------------------------------------------------------- rail */
.rail{min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:9px; padding-right:2px}
/* a flex column will shrink its children by default, and a card with
   overflow:hidden then CLIPS its own rows rather than overflowing visibly */
.rail>.card{flex:0 0 auto}
.rail.info{grid-area:info}
.rail.control{grid-area:control}
.card{background:var(--paper); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); padding:9px 11px; overflow:hidden}
.card h2{margin:0 0 6px; font:600 11px/1 sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.purseline{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.purseline b{font:700 25px/1.1 Georgia,serif}
.purseline small{color:var(--ink2); font-size:12px; font-style:italic; text-align:right}

table.ledger{width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px}
table.ledger th:nth-child(1),table.ledger td:nth-child(1){width:31%}
table.ledger th:nth-child(2),table.ledger td:nth-child(2){width:10%}
table.ledger th:nth-child(3),table.ledger td:nth-child(3){width:17%}
table.ledger th:nth-child(4),table.ledger td:nth-child(4){width:12%}
table.ledger th:nth-child(5),table.ledger td:nth-child(5){width:9%}
table.ledger th:nth-child(6),table.ledger td:nth-child(6){width:20%}
table.ledger th{font:600 10px/1 sans-serif; padding-right:4px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink3); text-align:right; padding:0 3px 3px; border-bottom:1px solid var(--line)}
table.ledger th:first-child,table.ledger th:last-child{text-align:left}
table.ledger td{padding:3px; border-bottom:1px dotted var(--line); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
table.ledger td.n{text-align:right; font-variant-numeric:tabular-nums}
table.ledger td.b{font-weight:700}
table.ledger td.lead{font-size:11px; color:var(--ink2)}
table.ledger tr.off td{opacity:.42}
table.ledger tr.own td{background:rgba(154,123,47,.09)}
.chip{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:baseline}
em.safe{display:inline-block; margin-left:4px; font:700 9px/1 sans-serif; color:var(--ok);
  border:1px solid currentColor; border-radius:50%; width:12px; height:12px; text-align:center;
  padding:1px 0 0; font-style:normal}

ul.stand{list-style:none; margin:0; padding:0; font-size:13px}
ul.stand li{display:flex; justify-content:space-between; gap:8px; padding:3px 2px; border-bottom:1px dotted var(--line)}
ul.stand li.you .nm{font-weight:700}
ul.stand li.act{background:rgba(154,123,47,.12)}
ul.stand em{font-style:normal; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3)}
ul.stand .v{font-variant-numeric:tabular-nums}

.brow{display:grid; grid-template-columns:auto 1fr auto auto auto; align-items:center; gap:7px;
  padding:4px 2px; border-bottom:1px dotted var(--line); font-size:13px}
.brow .bp{font-variant-numeric:tabular-nums}
.brow .bq{font-size:11px; color:var(--ink3)}
.stp{display:inline-flex; align-items:center; gap:4px}
.stp button{width:22px; height:22px; line-height:1; padding:0; border:1px solid var(--line);
  background:#fff; border-radius:4px}
.stp b{min-width:14px; text-align:center; font-variant-numeric:tabular-nums}
.buyfoot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; flex-wrap:wrap}
.acts2{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
.buyfoot .tot{font-size:12px; color:var(--ink2); font-variant-numeric:tabular-nums}
.go,#btnBuy,#btnFinish{background:var(--ink); color:var(--paper); border:0; border-radius:5px;
  padding:7px 13px; font-size:13px; box-shadow:var(--shadow)}
#btnFinish{background:var(--brass)}
ul.log{list-style:none; margin:0; padding:0; font-size:12px; color:var(--ink2); max-height:190px; overflow-y:auto}
ul.log li{padding:2px 0; border-bottom:1px dotted var(--line)}

/* -------------------------------------------------- THE ASSAY STRIP */
.strip{padding:9px 11px}
.striphead{display:flex; align-items:baseline; gap:8px; margin-bottom:4px}
.striphead h2{margin:0; font:600 11px/1 sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3)}
.striphead .ph{font-weight:700; margin-left:auto; font-size:13px}
.strip .nt{margin:0 0 7px; color:var(--ink2); font-size:11.5px; font-style:italic; line-height:1.35}
#rack{display:grid; grid-template-columns:minmax(0,1fr); gap:6px}
.tick{--tint:var(--ink3); position:relative; text-align:left; background:#fffdf7;
  border:1px solid var(--line); border-left:5px solid var(--tint); border-radius:5px;
  padding:5px 8px 6px; box-shadow:var(--shadow);
  display:grid; column-gap:8px; row-gap:0;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-areas:"lbl hd" "lbl sb" "lbl cs"}
.tick .lbl{grid-area:lbl; align-self:center; text-align:center; font-size:13px !important}
.tick .hd{grid-area:hd} .tick .sb{grid-area:sb} .tick .cs{grid-area:cs}
.tick:hover:not(:disabled){background:#fff; transform:translateY(-1px)}
.tick.sel{outline:2px solid var(--ink); outline-offset:1px}
.tick .lbl{font:700 12px/1 ui-monospace,Menlo,Consolas,monospace; color:var(--ink3); letter-spacing:.06em}
.tick .hd{font-weight:700; font-size:13px; line-height:1.15}
.tick .sb{font-size:11px; color:var(--ink2); line-height:1.25}
.tick .cs{font:600 11px/1.3 ui-monospace,Menlo,Consolas,monospace; color:var(--brass)}
.tick.found{--tint:var(--ok)} .tick.merge{--tint:var(--merge)}
.tick.dead,.tick.sealed{--tint:var(--bad); background:#f3ece2}
.tick.plain{--tint:var(--ink3)}
.empty{margin:6px 2px; color:var(--ink3); font-style:italic; font-size:13px}

/* ------------------------------------------------------------ overlays */
.veil{position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(36,31,24,.55); padding:16px}
.veil[hidden]{display:none}          /* an author display rule outranks the UA [hidden] rule */
.sheet{background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:20px 22px;
  max-width:560px; width:100%; box-shadow:0 18px 50px rgba(20,16,10,.45); max-height:88vh; overflow:auto}
.sheet h2{margin:0 0 4px; font:700 23px/1.1 Georgia,serif}
.sheet h2 span{color:var(--brass)}
.sheet p{margin:6px 0; font-size:14px; color:var(--ink2)}
.sheet .row{display:flex; gap:14px; flex-wrap:wrap; margin:14px 0 4px}
.sheet label{font:600 10px/1 sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3);
  display:block; margin-bottom:4px}
.sheet select{font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:5px; background:#fff}
.sheet .acts{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap}
.sheet .acts button{background:var(--ink); color:var(--paper); border:0; border-radius:5px; padding:9px 16px}
.sheet .acts button.ghost{background:transparent; color:var(--ink); border:1px solid var(--line)}
.sheet ul{margin:6px 0; padding-left:18px; font-size:13px; color:var(--ink2)}
.sheet ul li{margin:3px 0}
.sbtn{--tint:var(--ink); display:block; width:100%; text-align:left; margin:6px 0; padding:9px 12px;
  background:#fffdf7; border:1px solid var(--line); border-left:5px solid var(--tint); border-radius:5px;
  font-weight:700; box-shadow:var(--shadow)}
.sbtn em{display:block; font-style:normal; font-weight:400; font-size:12px; color:var(--ink2)}
.sbtn.go{background:var(--ink); color:var(--paper); border-color:var(--ink); text-align:center}
.disp{margin:10px 0; border-top:1px solid var(--line)}
.drow{display:grid; grid-template-columns:86px auto 1fr; align-items:center; gap:10px;
  padding:7px 2px; border-bottom:1px dotted var(--line)}
.drow .dl{font-weight:700}
.drow .ds{font-size:12px; color:var(--ink2)}
.tot{font-size:15px !important; color:var(--ink) !important}

#toast{position:fixed; left:50%; bottom:18px; transform:translate(-50%,14px); z-index:60;
  background:var(--ink); color:var(--paper); padding:9px 15px; border-radius:6px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; max-width:80vw}
#toast.on{opacity:1; transform:translate(-50%,0)}

/* ------------------------------------------------------------- narrow */
@media (max-width:1180px){
  /* below three columns the page SCROLLS. Holding the app to 100% height
     squeezes the auto rows, and any rail with visible overflow then paints
     its cards over the rail beneath it. */
  html,body{height:auto}
  .app{height:auto; min-height:100%}
  .app{grid-template-columns:minmax(0,1fr) 320px;
    grid-template-rows:auto minmax(0,1fr) auto;
    grid-template-areas:"head head" "plat control" "info info"}
  .rail.info{overflow:visible; flex-direction:row; flex-wrap:wrap; align-items:flex-start}
  .rail.info>.card{flex:1 1 240px}
}
@media (max-width:860px){
  html,body{height:auto}
  .app{height:auto; min-height:100%; grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto 44vh auto auto;
    grid-template-areas:"head" "plat" "control" "info"}
  /* the wider query turns the info rail into a wrapping ROW; single column must
     put it back, or its cards lay over the control rail */
  /* align-items:flex-start survives from the wider query and would leave
     these cards sized to their text in a column */
  .rail.info{flex-direction:column; align-items:stretch; overflow:visible}
  .rail.info>.card{flex:0 0 auto}
  .rail.control{overflow:visible}
  #rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head h1{font-size:21px}
}
@media (max-width:560px){
  #rack{grid-template-columns:minmax(0,1fr)}
  .app{grid-template-rows:auto 40vh auto auto}
}

/* reduced_motion: nothing essential moves, and the incidental motion stops */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-duration:0.01ms !important; animation-duration:0.01ms !important;
    animation-iteration-count:1 !important; scroll-behavior:auto !important}
  .tick:hover:not(:disabled){transform:none}
  #toast{transition:none}
}
/* scalable_ui: the layout holds when text is enlarged */
@media (max-width:1180px){ .app{align-content:start} }