/* Broadway Poker Supply — storefront.

   The obvious move for a poker shop is dark green felt everywhere with gold
   lettering, and it is a trap: a shop is for comparing products, and a dark
   ground makes a grid of twenty items harder to scan, harder to photograph
   against, and harder to keep accessible.

   So the chrome is dark and the shopping surface is light — the split premium
   retail has used for a century. Felt green stays an ACCENT: it appears on
   price, on the buy button, and in the product art, which is where it earns
   attention rather than competing for it.

   One serif for headings because cards and casinos are a serif business, one
   grotesque for everything functional. Nothing decorative in a place where a
   number has to be read correctly.
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root{
  --paper:#FBF9F4;          /* warm off-white — a shop, not a spreadsheet */
  --card:#FFFFFF;
  --sunk:#F2EDE3;
  --line:#E2DACB;
  --line-2:#C8BCA6;
  --ink:#15130F;            /* warm near-black */
  --ink-2:#514A3E;
  --ink-3:#6E6656;

  --night:#14120F;          /* the chrome */
  --night-2:#211E19;
  --night-line:#332E26;

  --felt:#1F5C3A;
  --felt-dark:#164229;
  --felt-wash:#E9F1EB;
  --gold:#9A7B12;           /* darkened from #C9A227 so it holds 4.5:1 on cream */
  --gold-bright:#C9A227;    /* decorative only — never carries text */
  --red:#9E1B2C;

  --ok:#1F6B41;
  --warn:#8A5A00;

  --r:6px;
  --max:1240px;
  --shadow:0 1px 2px rgba(21,19,15,.05), 0 4px 14px rgba(21,19,15,.06);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.6 Inter,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
h1,h2,h3{margin:0;font-family:"Playfair Display",Georgia,serif;font-weight:600;
  line-height:1.18;letter-spacing:-.01em}
h1{font-size:34px}
h2{font-size:24px;margin:0 0 12px}
h3{font-size:18px}
p{margin:0 0 14px}
a{color:var(--felt-dark)}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.prose{max-width:660px}
.prose p{color:var(--ink-2);line-height:1.75}

/* ---------- the sample banner. This is not a real shop and never hides it -- */
.sample{background:var(--gold-bright);color:#15130F;font-size:13.5px;font-weight:500;
  text-align:center;padding:7px 16px}
.sample b{font-weight:700}

/* ---------- chrome ---------- */
header{background:var(--night);color:#F5F1E8}
.masthead{display:flex;align-items:center;gap:22px;padding:16px 0}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:#F5F1E8}
.logo .mark{width:36px;height:36px;flex:none}
.logo b{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:600;
  letter-spacing:-.01em;line-height:1.1;display:block}
.logo span{display:block;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:#A79C86;margin-top:1px}
.search{flex:1;max-width:460px;position:relative}
.search input{width:100%;font:400 15px/1.3 inherit;padding:10px 14px;border-radius:var(--r);
  border:1px solid var(--night-line);background:var(--night-2);color:#F5F1E8}
.search input::placeholder{color:#8A8172}
.search input:focus{outline:2px solid var(--gold-bright);outline-offset:-1px}
.masthead .right{margin-left:auto;display:flex;align-items:center;gap:8px}
.icon-btn{display:flex;align-items:center;gap:8px;background:transparent;border:1px solid var(--night-line);
  color:#F5F1E8;font:500 14px/1 inherit;padding:10px 14px;border-radius:var(--r);cursor:pointer;
  text-decoration:none}
.icon-btn:hover{background:var(--night-2);border-color:#4A443A}
.icon-btn .n{background:var(--gold-bright);color:#15130F;border-radius:20px;
  font-size:11.5px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}

nav.cats{background:var(--night-2);border-top:1px solid var(--night-line)}
nav.cats ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap;overflow-x:auto}
nav.cats a{display:block;color:#CFC6B2;text-decoration:none;font-size:14.5px;padding:12px 15px;
  white-space:nowrap}
nav.cats a:hover{color:#F5F1E8;background:#2C2822}
nav.cats a[aria-current="page"]{color:#15130F;background:var(--gold-bright);font-weight:600}

/* ---------- breadcrumbs, headings ---------- */
.crumbs{font-size:13.5px;color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-2)}
.pagehead{padding:14px 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px}
.pagehead p{margin:8px 0 0;color:var(--ink-2);max-width:620px}

/* ---------- product grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px;
  padding-bottom:20px}
.prod{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
  transition:box-shadow .14s,border-color .14s}
.prod:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.shot{background:var(--sunk);padding:22px;display:flex;align-items:center;justify-content:center;
  aspect-ratio:4/3;position:relative}
.shot svg{width:100%;height:100%;filter:drop-shadow(0 3px 6px rgba(21,19,15,.16))}
/* Supplier photography is square and inconsistently cropped, so it is contained
   rather than covered — a cropped chip photo loses the edge spots, which is the
   part a buyer is looking at. */
.shot img{width:100%;height:100%;object-fit:contain;display:block}
.flag{position:absolute;top:9px;left:9px;font-size:11px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--red);color:#fff}
.flag.low{background:var(--warn)}
.prod .meta{padding:13px 15px 15px;display:flex;flex-direction:column;gap:5px;flex:1}
.prod .name{font-weight:600;font-size:15.5px;line-height:1.35}
.prod .sub{font-size:13.5px;color:var(--ink-3);line-height:1.45;flex:1}
.price{font-family:"Playfair Display",Georgia,serif;font-size:20px;font-weight:600;color:var(--felt-dark)}
.price s{font-family:Inter,sans-serif;font-size:13.5px;color:var(--ink-3);font-weight:400;
  margin-left:7px}
.stars{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.stars i{color:var(--gold);font-style:normal;letter-spacing:1px}

/* ---------- product page ---------- */
.detail{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:44px;
  padding-bottom:30px}
@media (max-width:880px){.detail{grid-template-columns:1fr;gap:26px}}
.hero-shot{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);
  padding:44px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1}
.hero-shot svg{width:100%;height:100%;filter:drop-shadow(0 6px 16px rgba(21,19,15,.18))}
.hero-shot img{width:100%;height:100%;object-fit:contain;display:block}
.gallery{min-width:0}
.thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.thumb{width:64px;height:64px;padding:3px;border:1px solid var(--line);border-radius:8px;
  background:var(--sunk);cursor:pointer;flex:0 0 auto}
.thumb img{width:100%;height:100%;object-fit:contain;display:block}
.thumb[aria-current="true"]{border-color:var(--green,#1F5C3A);box-shadow:0 0 0 1px var(--green,#1F5C3A)}
.drawer .th img,.summary .th img{width:100%;height:100%;object-fit:contain;display:block}
.buybox .price{font-size:32px}
.buybox h1{margin-bottom:8px}
.sku{font-size:13px;color:var(--ink-3);font-family:ui-monospace,Consolas,monospace}
.opt{margin:16px 0}
.opt label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.opt select{width:100%;max-width:340px;font:400 15px/1.3 inherit;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);color:var(--ink)}
.qty{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r);
  width:fit-content;overflow:hidden;background:var(--card)}
.qty button{width:40px;height:44px;border:0;background:transparent;font-size:19px;cursor:pointer;
  color:var(--ink-2)}
.qty button:hover{background:var(--sunk)}
.qty input{width:52px;height:44px;border:0;text-align:center;font:600 15px inherit;
  background:transparent;color:var(--ink);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.buy{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 6px}
.btn{font:600 15px/1.3 inherit;padding:14px 26px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--felt);background:var(--felt);color:#fff}
.btn:hover{background:var(--felt-dark);border-color:var(--felt-dark)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--felt-dark);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--felt-wash)}
.btn.sm{font-size:13.5px;padding:9px 15px}
.btn.wide{width:100%}
.stockline{font-size:13.5px;color:var(--ok);font-weight:500}
.stockline.low{color:var(--warn)}
.stockline.out{color:var(--red)}

.spectable{width:100%;border-collapse:collapse;font-size:14.5px;margin:6px 0 18px}
.spectable th,.spectable td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.spectable th{font-weight:500;color:var(--ink-3);width:44%;font-size:13.5px}

/* ---------- cart drawer ---------- */
.scrim{position:fixed;inset:0;background:rgba(21,19,15,.45);opacity:0;pointer-events:none;
  transition:opacity .16s;z-index:60}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(410px,100%);background:var(--paper);
  z-index:61;transform:translateX(100%);transition:transform .2s ease;display:flex;
  flex-direction:column;box-shadow:-8px 0 30px rgba(21,19,15,.18)}
.drawer.on{transform:translateX(0)}
.drawer header{background:var(--night);padding:0}
.drawer .dh{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.drawer .dh h2{margin:0;color:#F5F1E8;font-size:19px}
.drawer .dh button{background:transparent;border:0;color:#CFC6B2;font-size:24px;cursor:pointer;
  line-height:1;padding:0 4px}
.drawer .items{flex:1;overflow-y:auto;padding:6px 20px}
.line{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.line .th{width:62px;height:62px;flex:none;background:var(--sunk);border-radius:4px;padding:7px;
  display:flex;align-items:center;justify-content:center}
.line .th svg{width:100%;height:100%}
.line .info{flex:1;min-width:0}
.line .info b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.line .info small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:2px}
.line .info .row{display:flex;align-items:center;gap:10px;margin-top:7px}
.line .rm{background:transparent;border:0;color:var(--ink-3);font-size:12.5px;cursor:pointer;
  text-decoration:underline;padding:0}
.line .rm:hover{color:var(--red)}
.drawer .foot{border-top:1px solid var(--line);padding:16px 20px 22px;background:var(--card)}
.totals{font-size:14.5px;color:var(--ink-2)}
.totals div{display:flex;justify-content:space-between;padding:3px 0}
.totals .grand{font-size:19px;font-weight:600;color:var(--ink);padding-top:9px;margin-top:7px;
  border-top:1px solid var(--line);font-family:"Playfair Display",Georgia,serif}
.empty{text-align:center;color:var(--ink-3);padding:54px 20px;font-size:14.5px}

/* ---------- checkout ---------- */
.checkout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:38px;
  padding-bottom:40px}
@media (max-width:860px){.checkout{grid-template-columns:1fr}}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 20px;
  margin:0 0 18px;background:var(--card)}
legend{font-family:"Playfair Display",Georgia,serif;font-size:17px;font-weight:600;padding:0 8px}
.f{margin-bottom:13px}
.f label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:4px}
.f input,.f select{width:100%;font:400 15px/1.3 inherit;padding:10px 12px;
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);color:var(--ink)}
.f input:focus,.f select:focus{outline:2px solid var(--felt);outline-offset:-1px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.summary{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  align-self:start;position:sticky;top:18px}

.notice{border:1px solid var(--line);border-left:3px solid var(--gold-bright);background:var(--sunk);
  border-radius:var(--r);padding:13px 16px;margin:16px 0;font-size:14.5px}
.notice p{margin:0 0 8px}.notice p:last-child{margin:0}

/* ---------- home ---------- */
.banner{background:var(--night);color:#F5F1E8;padding:52px 0 56px;position:relative;overflow:hidden}
.banner .wrap{position:relative;z-index:1}
.banner h1{font-size:clamp(30px,4.4vw,50px);max-width:15ch;color:#FBF9F4}
.banner p{font-size:17.5px;color:#C6BCA6;max-width:52ch;margin:14px 0 24px}
.banner .art{position:absolute;right:-40px;top:50%;transform:translateY(-50%);
  width:min(420px,42vw);opacity:.9;display:flex;gap:-30px}
.banner .art svg{width:46%;filter:drop-shadow(0 10px 26px rgba(0,0,0,.4))}
.banner .art svg:nth-child(2){margin-left:-11%;margin-top:7%}
.banner .art svg:nth-child(3){margin-left:-11%;margin-top:-6%}
@media (max-width:760px){.banner .art{display:none}}

.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  margin:26px 0 32px}
.strip div{background:var(--card);padding:15px 18px}
.strip b{display:block;font-size:14.5px;font-weight:600;margin-bottom:2px}
.strip span{font-size:13px;color:var(--ink-3);line-height:1.45}

.catrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px;
  margin-bottom:34px}
.catcard{display:block;text-decoration:none;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:16px 17px}
.catcard:hover{border-color:var(--felt);background:var(--felt-wash)}
.catcard b{display:block;font-family:"Playfair Display",Georgia,serif;font-size:17px;margin-bottom:4px}
.catcard span{font-size:13px;color:var(--ink-2);line-height:1.5}

.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:8px 0 14px}
.sechead h2{margin:0}
.sechead a{font-size:14px}

footer{background:var(--night);color:#A79C86;margin-top:46px;padding:34px 0 44px;font-size:14px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px}
footer h3{color:#F5F1E8;font-size:15px;margin-bottom:9px;font-family:Inter,sans-serif;font-weight:600}
footer a{color:#C6BCA6;text-decoration:none;display:block;padding:3px 0}
footer a:hover{color:#F5F1E8;text-decoration:underline}
footer .base{border-top:1px solid var(--night-line);margin-top:26px;padding-top:18px;font-size:13px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:620px){
  h1{font-size:27px}
  .masthead{flex-wrap:wrap;gap:12px}
  .search{order:3;max-width:none;flex-basis:100%}
}

/* ------------------------------------------------------------- tools ---- */
/* The calculator sits beside its explanation on a wide screen and above it on a
   narrow one — the tool is what people came for, so it never ends up below a
   wall of text on a phone. */
.toolwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:34px;align-items:start;
  padding:6px 0 8px}
@media (max-width:820px){.toolwrap{grid-template-columns:1fr;gap:20px}
  .toolwrap .tool{order:-1}}
.toolintro{padding:0}
.tool{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 20px}
.trow{margin-bottom:13px}
.trow label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.trow label span{display:block;font-weight:400;font-size:12.5px;color:var(--ink-3)}
.trow input,.trow select{width:100%;font:400 15px/1.3 inherit;padding:9px 11px;
  border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink)}
.trow input:focus,.trow select:focus{outline:2px solid var(--green,#1F5C3A);outline-offset:1px}
.tool .btn{width:100%;margin-top:2px}
.tout{margin-top:15px}
.ttable{width:100%;border-collapse:collapse;font-size:14.5px}
.ttable th{text-align:left;font-weight:600;color:var(--ink-2);padding:7px 8px 7px 0;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ttable td{padding:7px 0 7px 8px;border-bottom:1px solid var(--line)}
.ttable td.num,.ttable th.num{text-align:right;font-variant-numeric:tabular-nums}
.ttable td.sub{color:var(--ink-3);font-size:13px}
.ttable td.mono{font-family:ui-monospace,Consolas,monospace;letter-spacing:.04em}
.ttable.struct tbody tr.brk td{border-bottom:2px solid var(--gold,#C9A227)}
.ttable.rankings th{white-space:normal}
.tnote{font-size:13px;color:var(--ink-3);margin:10px 0 0;line-height:1.55}
.terr{font-size:14px;color:var(--red,#B22234);margin:4px 0 0}
.tverdict{margin:12px 0 0;padding:10px 12px;border-radius:7px;font-size:14.5px;font-weight:600}
.tverdict.yes{background:rgba(31,92,58,.1);color:#1F5C3A}
.tverdict.no{background:rgba(178,34,52,.09);color:#B22234}


/* ------------------------------------------------- tools: visual ones ---- */
.tool.wide{max-width:none}
.trow2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crow{display:flex;gap:8px;margin:12px 0}
.crow .btn{flex:1}

/* The 13x13 starting-hand grid. Square cells, because a chart that is not
   square stops reading as a matrix of two ranks. */
.handgrid{display:grid;grid-template-columns:repeat(13,1fr);gap:2px;margin:4px 0 12px}
.hg{aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:600;border-radius:3px;background:#ece7dd;color:#8a8177;
  font-family:ui-monospace,Consolas,monospace}
.hg.on.pair{background:#1F5C3A;color:#FBF9F4}
.hg.on.suited{background:#4d8f68;color:#FBF9F4}
.hg.on.off{background:#93b8a2;color:#15130F}
@media (max-width:700px){.hg{font-size:8px}}
.key{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:-1px;margin-right:3px}
.key.pair{background:#1F5C3A}.key.suited{background:#4d8f68}.key.off{background:#93b8a2}

/* Tournament clock: sized to be read across a room, not at a desk. */
.clockface{background:#15130F;border-radius:var(--r);padding:26px 18px;text-align:center;color:#FBF9F4}
.clockface.low .ctime{color:#E8734A}
.clevel{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#C9A227}
.ctime{font-size:68px;line-height:1.05;font-family:ui-monospace,Consolas,monospace;font-weight:700;
  font-variant-numeric:tabular-nums}
.cblinds{font-size:26px;font-family:Georgia,serif}
.cnext{font-size:13.5px;color:#9a9287;margin-top:6px}
@media (max-width:600px){.ctime{font-size:48px}.cblinds{font-size:20px}}

/* Room plan, drawn to scale. */
.roomplan{width:100%;max-width:360px;height:auto;display:block;margin:0 auto 14px}

/* Chip scheme preview. */
.chiprow{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin:6px 0 12px}
.chipcell{width:88px;text-align:center}
.chipcell svg{width:72px;height:72px;filter:drop-shadow(0 3px 6px rgba(21,19,15,.2))}
.chipcell b{display:block;font-size:15px;margin-top:4px}
.chipcell span{display:block;font-size:12px;color:var(--ink-3)}

/* Checklist. */
.ttable.checklist td.tick{width:22px;color:#1F5C3A;font-weight:700}
.ttable.checklist th{font-weight:600;white-space:normal}

/* The four-streets diagram on the rules page. */
.streets{width:100%;height:auto;display:block}