/* Dintlock — a dark iron ledger. Cut-paper tags and torn panels on an iron ground, typewriter for words,
   JetBrains Mono for every figure (typewriter faces set the digit 1 as a bare stroke). */
:root{
  --iron:#121417; --iron2:#1B2026; --iron3:#252C34; --seam:#333B45;
  --paper:#E9E4DA; --paper2:#D3CBBB; --paperink:#1A1C20;
  --rust:#C94E3B; --rust2:#4A231C; --verd:#5FD3A0; --verd2:#173A2C; --dim:#8B939B;
  --type:'Special Elite', 'Courier New', monospace;
  --body:'Karla', system-ui, sans-serif;
  --fig:'JetBrains Mono', ui-monospace, monospace;
  --railw:60px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--iron);color:var(--paper)}
body{font:15px/1.5 var(--body);
  background-image:linear-gradient(rgba(233,228,218,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(233,228,218,.02) 1px,transparent 1px);
  background-size:28px 28px}
a{color:inherit}
.tk{font-style:normal}
.fig{font-family:var(--fig);font-variant-numeric:tabular-nums}
button{font:inherit;cursor:pointer}

.forge{max-width:1180px;margin:0 auto;padding:12px calc(var(--railw) + 12px) 40px 12px;display:grid;gap:18px}
.forge>*{min-width:0}
.bench>*{min-width:0}

/* ---- cut-paper tags ---- */
.tag{display:inline-flex;align-items:center;gap:6px;background:var(--paper);color:var(--paperink);font:400 15px/1 var(--type);
  padding:7px 10px 5px;letter-spacing:.02em;text-transform:uppercase;box-shadow:2px 3px 0 rgba(0,0,0,.45);
  clip-path:polygon(0 8%,3% 0,97% 2%,100% 10%,99% 92%,96% 100%,4% 98%,0 90%)}
.tag img{display:block;border-radius:3px}
.tag i{font-style:normal;color:#5A5F66;text-transform:none;font:400 12px/1 var(--body);letter-spacing:0}
.tag b{font-weight:600;font-size:15px}
.tag-name{transform:rotate(-1.6deg)}
.tag-bout{transform:rotate(.9deg);background:var(--paper2)}
.tag-bell{transform:rotate(-.6deg)}
.tag-pot{transform:rotate(1.2deg);background:var(--verd);color:#0F2A20}
.tag-pot i{color:#2B5A47}
.tag-deck{position:absolute;top:9px;left:12px;font-size:13px;padding:6px 9px 4px;transform:rotate(-1.4deg);z-index:1}

/* ---- the ledger ---- */
.ledger{background:var(--iron2);border:1px solid var(--seam);padding:12px 10px 12px;position:relative;
  clip-path:polygon(0 0,100% 0,100% 97%,98% 100%,60% 99%,30% 100%,0 98%)}
.ledger::after{content:"";position:absolute;right:14px;top:6px;width:58px;height:14px;background:rgba(233,228,218,.14);transform:rotate(-8deg);pointer-events:none}
.lip{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center;margin:0 0 12px;padding:0 0 0 2px}
.tag-pot{margin-left:auto}
.scrollplate{overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:1px solid var(--seam);border-bottom:1px solid var(--seam)}
.dints{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.dintscap{caption-side:top;text-align:left;font:400 17px/1.2 var(--type);letter-spacing:.01em;padding:10px 4px 8px;color:var(--paper)}
.dintscap span{color:var(--dim);font:400 13px/1.2 var(--body)}
.dints th{font:500 11px/1 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);text-align:left;padding:8px 8px;border-bottom:1px solid var(--seam);white-space:nowrap}
.dints td{padding:8px 8px;border-bottom:1px dashed rgba(51,59,69,.8);vertical-align:middle;white-space:nowrap}
.dints tr:last-child td{border-bottom:0}
.dints tbody tr{transition:background .2s}
.dints tbody tr[data-mine="1"]{background:rgba(95,211,160,.07)}
.dints tbody tr[data-dinted="1"]{color:var(--dim)}
.dints tbody tr[data-dinted="1"] .hand{color:var(--dim)}
.c-n{width:36px;color:var(--dim);font-family:var(--fig)}
.c-blow{text-align:right}
.hand{font-family:var(--fig);font-size:12.5px;text-decoration:none;color:var(--paper);border-bottom:1px dotted var(--dim)}
.you{display:inline-block;margin-left:6px;font:400 11px/1 var(--type);background:var(--verd);color:#0F2A20;padding:3px 5px 1px;text-transform:uppercase}
.plate{font-family:var(--fig);font-size:13px}
.plate s{color:var(--rust);text-decoration:line-through;opacity:.8;margin-right:6px}
.marks{display:inline-flex;align-items:center;gap:3px;font-family:var(--fig);font-size:12px}
.dent{display:inline-block;width:9px;height:9px;background:var(--rust);clip-path:polygon(50% 0,100% 40%,85% 100%,15% 100%,0 40%);transform:rotate(12deg)}
.dent:nth-child(2n){transform:rotate(-20deg)}
.rate{color:var(--dim);margin-left:4px}
.stand{font-family:var(--type);font-size:13px;letter-spacing:.02em}
.stand[data-s="clean"]{color:var(--verd)}
.stand[data-s="dinted"]{color:var(--rust)}
.stand small{font:400 11px/1 var(--fig);color:var(--dim);margin-left:4px}
.blowbtn{background:var(--rust);color:var(--paper);border:0;padding:6px 10px 5px;font:400 13px/1 var(--type);text-transform:uppercase;letter-spacing:.04em;
  clip-path:polygon(4% 0,100% 6%,96% 100%,0 94%)}
.blowbtn:hover{background:#DC5A45}
.blowbtn[disabled]{opacity:.45;cursor:default}
.nob{color:var(--dim);font-size:12px}
.quietrow td{color:var(--dim);white-space:normal;padding:16px 8px;font-family:var(--type)}
.ledgerline{margin:12px 2px 0;font:400 14px/1.5 var(--type);color:var(--paper2);letter-spacing:.01em}
.ledgerline b{color:var(--verd);font-weight:400}

/* ---- the bench ---- */
.bench{display:grid;gap:22px}
.torn{position:relative;background:var(--iron3);padding:46px 14px 14px;border:1px solid var(--seam);
  clip-path:polygon(0 2%,2% 0,98% 1%,100% 3%,100% 98%,97% 100%,3% 99%,0 97%)}
.deck{display:grid;gap:10px}
.yourline{font:400 14px/1.45 var(--type);color:var(--paper2)}
.yourline b{color:var(--verd);font-weight:400}
.yourline em{color:var(--rust);font-style:normal}
.platein{display:grid;gap:5px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.platein input{width:100%;background:var(--iron);border:1px solid var(--seam);color:var(--paper);padding:11px 12px;font:600 18px/1 var(--fig);border-radius:0;outline:none}
.platein input:focus{border-color:var(--verd)}
.deckquote{font-size:12.5px;color:var(--dim)}
.enterbtn{background:var(--paper);color:var(--paperink);border:0;padding:13px 14px 11px;font:400 17px/1 var(--type);text-transform:uppercase;letter-spacing:.05em;
  clip-path:polygon(1% 0,100% 4%,99% 100%,0 96%);box-shadow:3px 4px 0 rgba(0,0,0,.45)}
.enterbtn:hover{background:#fff}
.enterbtn[disabled]{opacity:.5;cursor:default}
.deckwhy{margin:0;font-size:12.5px;color:var(--rust);min-height:1.2em}
.markedlist,.tapelist,.pastlist{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13px}
.markedlist li,.tapelist li,.pastlist li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--seam);padding:5px 0}
.markedlist li:last-child,.tapelist li:last-child,.pastlist li:last-child{border-bottom:0}
.quiet{color:var(--dim);font-family:var(--type)}
.who{font-family:var(--fig);font-size:12px;color:var(--paper)}
.tapelist .did{color:var(--dim)}
.tapelist .did.blow{color:var(--rust)}
.tapelist .did.plated{color:var(--verd)}
.more{display:inline-block;margin-top:10px;font:400 13px/1 var(--type);color:var(--verd);text-transform:uppercase;letter-spacing:.04em}
.rulelines{margin:0;padding:0 0 0 18px;display:grid;gap:8px;font:400 13.5px/1.5 var(--type);color:var(--paper2)}

/* ---- the rail: fixed on the right edge, narrow and vertical on a phone ---- */
#dintrail{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:20;width:var(--railw);max-height:560px;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 12px;
  background:var(--paper);color:var(--paperink);border:1px solid #B9B1A1;border-right:0;box-shadow:-3px 4px 0 rgba(0,0,0,.5);
  clip-path:polygon(0 1.5%,100% 0,100% 100%,0 98.5%,2% 60%,0 30%)}
.railtag{font:400 13px/1 var(--type);text-transform:uppercase;letter-spacing:.08em;color:#5A5F66}
.railaddr{writing-mode:vertical-rl;font:600 11px/1 var(--fig);letter-spacing:.02em;max-height:330px;overflow:hidden;color:var(--paperink);user-select:all;-webkit-user-select:all}
.railaddr[data-live="0"]{font:400 12px/1 var(--type);color:#5A5F66;letter-spacing:.06em}
.railcopy{writing-mode:vertical-rl;background:var(--paperink);color:var(--paper);border:0;padding:12px 7px;font:400 12px/1 var(--type);text-transform:uppercase;letter-spacing:.1em}
.railcopy[data-done="1"]{background:var(--verd);color:#0F2A20}
.railgm{writing-mode:vertical-rl;font:400 11px/1 var(--type);text-transform:uppercase;letter-spacing:.1em;color:#5A5F66;text-decoration:none;padding:4px 0}
.railgm[data-live="0"]{visibility:hidden;height:0;padding:0}
.railplug{writing-mode:vertical-rl;background:var(--rust);color:var(--paper);border:0;padding:12px 7px;font:400 12px/1 var(--type);text-transform:uppercase;letter-spacing:.08em;max-height:150px;overflow:hidden}
.railplug[data-on="1"]{background:var(--verd);color:#0F2A20}

/* ---- footer ---- */
.colophon{border-top:1px solid var(--seam);padding-top:14px;display:grid;gap:8px;font-size:12.5px;color:var(--dim)}
.colrow{display:grid;gap:3px}
.colk{text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.colv{font-family:var(--fig);color:var(--paper);word-break:break-all;font-size:12px}
.collinks{display:flex;gap:14px;flex-wrap:wrap;font:400 13px/1 var(--type);text-transform:uppercase;letter-spacing:.04em}
.collinks a{color:var(--paper2);text-decoration:none;border-bottom:1px solid var(--seam)}
.collinks a.nolink{opacity:.5;pointer-events:none}
.colnote{margin:4px 0 0;font-family:var(--type)}

/* ---- leaves (other views) ---- */
.leaf{background:var(--iron2);border:1px solid var(--seam);padding:18px 14px}
.leaf h1{font:400 30px/1.1 var(--type);margin:0 0 14px;letter-spacing:.01em}
.leaf h2{font:400 18px/1.2 var(--type);margin:20px 0 6px;color:var(--verd)}
.leaf p{margin:0 0 8px;color:var(--paper2)}
.leaf p b{color:var(--paper)}
.leafscroll{overflow-x:auto}
.leaftable{width:100%;min-width:560px;border-collapse:collapse;font-size:13px}
.leaftable th{text-align:left;font:500 11px/1 var(--body);text-transform:uppercase;letter-spacing:.1em;color:var(--dim);padding:8px 6px;border-bottom:1px solid var(--seam)}
.leaftable td{padding:8px 6px;border-bottom:1px dashed var(--seam);font-family:var(--fig);font-size:12.5px;white-space:nowrap}
.drawbtn{background:var(--verd);color:#0F2A20;border:0;padding:6px 10px 5px;font:400 12px/1 var(--type);text-transform:uppercase}

/* ---- the card ---- */
.veil{position:fixed;inset:0;z-index:40;background:rgba(6,8,10,.78);display:flex;align-items:center;justify-content:center;padding:18px}
.card{width:min(440px,100%);background:var(--paper);color:var(--paperink);padding:18px 16px 16px;border:0}
.card.torn{padding-top:18px}
.card.torn{clip-path:polygon(0 3%,3% 0,97% 1%,100% 4%,99% 97%,96% 100%,2% 99%,0 96%)}
.cardtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font:400 19px/1.2 var(--type)}
.cardtop button{background:transparent;border:0;font-size:24px;line-height:1;color:var(--paperink)}
.card p{margin:0 0 8px;font-size:14px}
.card .line{font:400 14px/1.5 var(--type)}
.card .go{display:block;width:100%;margin-top:12px;background:var(--rust);color:var(--paper);border:0;padding:12px;font:400 16px/1 var(--type);text-transform:uppercase;letter-spacing:.05em}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--paper2);padding:10px 12px;font-size:14px;text-align:left}
.wellpick img{width:24px;height:24px}
.note{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:50;background:var(--paper);color:var(--paperink);padding:9px 14px 7px;
  font:400 13px/1.3 var(--type);max-width:calc(100vw - 100px);box-shadow:2px 3px 0 rgba(0,0,0,.5)}

/* ---- ≥ 720: wider measure, larger figures ---- */
@media (min-width:720px){
  body{font-size:16px}
  .forge{padding:18px calc(var(--railw) + 20px) 48px 20px;gap:22px}
  .ledger{padding:16px 16px 16px}
  .dints{font-size:14px}
  .dints th,.dints td{padding:10px 10px}
  .dintscap{font-size:21px}
  .tag{font-size:16px}
  .tag b{font-size:17px}
  .ledgerline{font-size:15px}
  .platein input{font-size:21px}
  .bench{grid-template-columns:1fr 1fr}
  .deck{grid-column:1 / -1}
  .rulebox{grid-column:1 / -1}
}
@media (min-width:720px) and (max-width:999px){
  .bench{grid-template-columns:1fr 1fr}
}

/* ---- ≥ 1000: the page recomposes — ledger left, bench right, the rail wide with the address across it ---- */
@media (min-width:1000px){
  :root{--railw:212px}
  .forge{max-width:1320px;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:auto 1fr;align-items:start;gap:26px;padding-right:calc(var(--railw) + 26px)}
  .ledger{grid-column:1;grid-row:1}
  .rulebox{grid-column:1;grid-row:2;align-self:start}
  .bench{grid-column:2;grid-row:1 / span 2;grid-template-columns:1fr;gap:26px}
  .leaf{grid-column:1 / -1}
  .colophon{grid-column:1 / -1}
  .dints{font-size:14.5px;min-width:0}
  .dintscap{font-size:24px}
  .ledgerline{font-size:16px}
  #dintrail{width:var(--railw);max-height:none;padding:16px 14px;align-items:stretch;gap:12px;
    clip-path:polygon(0 1%,100% 0,100% 100%,0 99%,1% 70%,0 40%)}
  .railtag{font-size:14px}
  .railaddr{writing-mode:horizontal-tb;max-height:none;word-break:break-all;white-space:normal;font-size:12.5px;line-height:1.5}
  .railaddr[data-live="0"]{font-size:14px}
  .railcopy,.railgm,.railplug{writing-mode:horizontal-tb;padding:11px 10px 9px;text-align:center;font-size:13px}
  .railplug{max-height:none;overflow:visible;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
}
@media (min-width:1300px){
  .dints{font-size:15px}
}