:root {
  --ground: #0A0D0A; --ink: #D6E2CF; --dim: #6F7C6B; --ash: #3A4339; --soot: #151A14; --rule: #232A22;
  --lamp: #DFFF1F; --lamp-ink: #121600; --out: #FF4D3D;
  --f-show: 'VT323', ui-monospace, monospace; --f-grid: 'JetBrains Mono', ui-monospace, Menlo, monospace; --f-text: 'Space Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ground); }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 14px/1.55 var(--f-text); -webkit-font-smoothing: antialiased; }
a { color: var(--lamp); }
code { font-family: var(--f-grid); }
[hidden] { display: none !important; }

.stadium { max-width: 1180px; margin: 0 auto; padding: 14px 14px 230px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* ---------- the slip: the field map is the form ---------- */
.slipform { border: 1px dashed var(--ash); padding: 12px 12px 14px; background: linear-gradient(180deg, #0D110C, var(--ground)); }
.tagline { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 12px/1 var(--f-grid); color: var(--dim); }
.tagline-mark { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); text-decoration: none; }
.tagline-mark img { image-rendering: pixelated; border: 1px solid var(--ash); }
.tagline-mark b { font: 400 22px/1 var(--f-show); letter-spacing: .06em; text-transform: uppercase; }
.tagline-st { text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.tagline-st.is-ko { color: var(--out); }
.tagline-st.is-on { color: var(--lamp); }

.saying { margin: 12px 0 8px; font: 400 23px/1.08 var(--f-show); color: var(--ink); min-height: 2.2em; }
.saying em { font-style: normal; color: var(--lamp); }
.saying i { font-style: normal; color: var(--out); }

.pitchwrap { margin: 4px -2px 0; }
.pitchmap { margin: 0; font: 600 clamp(8px, calc((100vw - 58px) / 24.8), 15px)/1.18 var(--f-grid); color: var(--ash); white-space: pre; overflow: hidden; text-align: center; letter-spacing: 0; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.pitchmap .ln { color: #2C342B; }
.pitchmap .bx { transition: color .4s, text-shadow .4s; }
.pitchmap .lit { color: var(--lamp); text-shadow: 0 0 6px rgba(223,255,31,.55), 0 0 18px rgba(223,255,31,.25); }
.pitchmap .dark { color: #4A5348; }
.pitchmap .open { color: #374036; }
.pitchmap .next { color: var(--lamp); animation: nudge 1.1s steps(2) infinite; }
.pitchmap .fresh { color: var(--out); text-shadow: 0 0 8px rgba(255,77,61,.6); animation: snuff 1.6s ease-out 3; }
.pitchmap .won { color: var(--lamp); text-shadow: 0 0 10px rgba(223,255,31,.8), 0 0 28px rgba(223,255,31,.45); animation: glowup 1.6s ease-in-out infinite; }
.pitchmap .mine { text-decoration: underline; text-decoration-color: var(--ink); }
.pitchmap.is-drawing .lit { animation: flicker .5s steps(3) infinite; }
.pitchmap .mid { color: var(--dim); }
@keyframes nudge { 50% { color: #5D6B12; } }
@keyframes snuff { 0% { color: #fff; } 100% { color: var(--out); } }
@keyframes glowup { 50% { text-shadow: 0 0 4px rgba(223,255,31,.5); } }
@keyframes flicker { 33% { opacity: .55; } 66% { opacity: .9; } }
.pitchkey { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 6px; font: 400 11px/1.2 var(--f-grid); color: var(--dim); }
.k-lit { color: var(--lamp); } .k-dark { color: #4A5348; } .k-next { color: var(--lamp); }

.potline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 12px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.potline-c { display: flex; flex-direction: column; padding: 8px 6px; min-width: 0; }
.potline-c + .potline-c { border-left: 1px solid var(--rule); }
.potline-k { font: 400 10.5px/1.2 var(--f-grid); color: var(--dim); text-transform: lowercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.potline-c b { font: 400 28px/1 var(--f-show); color: var(--ink); margin: 3px 0 1px; }
.potline-c b.potline-hot { color: var(--lamp); }

.lightrow { margin-top: 12px; }
.lightbtn { width: 100%; min-height: 54px; border: 0; background: var(--lamp); color: var(--lamp-ink); font: 400 27px/1 var(--f-show); letter-spacing: .03em; cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 72%, 97% 100%, 0 100%); }
.lightbtn:disabled { background: var(--soot); color: var(--dim); cursor: default; border: 1px solid var(--ash); }
.lightbtn.is-busy { opacity: .7; }
.lightnote { margin: 7px 0 0; font: 400 11px/1.4 var(--f-grid); color: var(--dim); text-align: center; }
.duebar { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--lamp); font: 400 12px/1.3 var(--f-grid); }
.duebar b { color: var(--lamp); }
.duebar button { border: 0; background: var(--lamp); color: var(--lamp-ink); font: 700 12px/1 var(--f-grid); padding: 9px 12px; cursor: pointer; }

.tabsline { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 400 13px/1.4 var(--f-grid); }
.tabsline a { color: var(--dim); text-decoration: none; }
.tabsline a.is-here { color: var(--lamp); }

/* ---------- the side: pick + tape ---------- */
.sideline { display: grid; gap: 14px; align-content: start; }
.cardhd { margin: 0 0 8px; font: 400 12px/1.3 var(--f-grid); color: var(--dim); }
.pickcard, .tapefeed, .viewpane, .rulesheet { border-left: 2px solid var(--ash); padding: 2px 0 2px 12px; }
.pickcard.is-hot { border-left-color: var(--out); }
.quietline { margin: 0; color: var(--dim); font-size: 13px; }
.pickgrid { margin: 0; font: 400 12px/1.6 var(--f-grid); white-space: pre-wrap; word-break: break-all; color: var(--ink); }
.pickgrid .pk { color: var(--dim); }
.pickgrid .pv { color: var(--lamp); }
.pickgrid .px { color: var(--out); }
.livedot { float: right; color: var(--dim); }
.livedot.is-on { color: var(--lamp); }
.tapelines { list-style: none; margin: 0; padding: 0; font: 400 12px/1.5 var(--f-grid); max-height: 340px; overflow: hidden; }
.tapelines li { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 3px 0; border-bottom: 1px dotted var(--rule); }
.tapelines li .tt { color: var(--dim); }
.tapelines li .tw { overflow-wrap: anywhere; }
.tapelines li.t-dark .tw { color: var(--out); }
.tapelines li.t-won .tw { color: var(--lamp); }
.tapelines li.is-new .tw { animation: printin .7s steps(14) both; }
.tapelines .tapequiet { display: block; color: var(--dim); border: 0; }
@keyframes printin { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- other views ---------- */
.fieldlist { display: grid; gap: 8px; }
.fieldrow { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dotted var(--rule); font: 400 12px/1.5 var(--f-grid); color: var(--ink); text-decoration: none; }
.fieldrow b { font: 400 20px/1 var(--f-show); color: var(--lamp); }
.fieldrow .fo { color: #4A5348; overflow-wrap: anywhere; }
.fieldrow .fo em { font-style: normal; color: var(--lamp); }
.walletrow { padding: 6px 0; border-bottom: 1px dotted var(--rule); font: 400 12px/1.5 var(--f-grid); }

.rulesheet .steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 13px; }
.rulesheet .steps b { color: var(--lamp); font-weight: 700; }
.worked { margin-top: 14px; }
.workedmap { margin: 0; padding: 10px; background: var(--soot); border: 1px dashed var(--ash); font: 400 11.5px/1.55 var(--f-grid); color: var(--ink); overflow-x: auto; white-space: pre; }

.endline { border-top: 1px solid var(--rule); padding-top: 12px; font: 400 11px/1.6 var(--f-grid); color: var(--dim); }
.endline p { margin: 0 0 4px; }
.endline code { color: var(--ink); overflow-wrap: anywhere; }

/* ---------- the CA post: a floating tag above the thumb ---------- */
.capost { position: fixed; z-index: 30; left: 10px; right: 10px; bottom: 128px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 0; background: #11150F; border: 1px solid var(--lamp); box-shadow: 0 0 0 3px rgba(10,13,10,.9), 0 12px 34px rgba(0,0,0,.6); }
.capost-k { flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 9px; background: var(--lamp); color: var(--lamp-ink); font: 400 20px/1 var(--f-show); }
.capost-v { flex: 1; min-width: 0; font: 600 9.8px/1.25 var(--f-grid); color: var(--ink); word-break: break-all; user-select: all; -webkit-user-select: all; }
.capost-v.is-wait { font: 400 11px/1.3 var(--f-grid); color: var(--dim); user-select: none; -webkit-user-select: none; }
.capost-cp { flex: none; border: 1px solid var(--lamp); background: transparent; color: var(--lamp); font: 700 12px/1 var(--f-grid); padding: 9px 11px; cursor: pointer; }
.capost-cp:disabled { border-color: var(--ash); color: var(--dim); cursor: default; }
.capost-cp.is-done { background: var(--lamp); color: var(--lamp-ink); }
.capost-gm { flex: none; font: 400 10px/1 var(--f-grid); color: var(--dim); }

.walletsheet { position: fixed; inset: 0; z-index: 50; background: rgba(5,7,5,.82); display: grid; place-items: center; padding: 20px; }
.walletsheet-in { width: min(360px, 100%); background: var(--soot); border: 1px solid var(--ash); padding: 16px; display: grid; gap: 8px; }
.walletsheet-in button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px; background: var(--ground); color: var(--ink); border: 1px solid var(--ash); font: 400 13px/1 var(--f-grid); cursor: pointer; }
.walletsheet-in img { width: 22px; height: 22px; }
.toastline { position: fixed; z-index: 60; left: 50%; top: 14px; transform: translateX(-50%); background: var(--lamp); color: var(--lamp-ink); padding: 9px 14px; font: 700 12px/1.2 var(--f-grid); max-width: 92vw; }

@media (min-width: 720px) {
  .stadium { padding: 22px 26px 240px; gap: 18px; }
  .pitchmap { font-size: 19px; }
  .saying { font-size: 30px; }
  .slipform { padding: 18px 22px 20px; }
  .lightbtn { max-width: 520px; display: block; margin: 0 auto; }
  .capost { left: 50%; right: auto; transform: translateX(-50%); width: 600px; }
  .capost-v { font-size: 11.5px; }
}
@media (min-width: 1000px) {
  .stadium { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 30px; padding-top: 28px; }
  .slipform { grid-column: 1; grid-row: 1 / span 2; }
  .tabsline { grid-column: 2; grid-row: 1; align-self: start; justify-content: flex-end; }
  .sideline { grid-column: 2; grid-row: 2; }
  .viewpane, .rulesheet, .endline { grid-column: 1 / -1; }
  .rulesheet { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
  .rulesheet > .cardhd { grid-column: 1 / -1; margin-bottom: 0; }
  .worked { margin-top: 0; }
  .pitchmap { font-size: 21px; }
  .saying { font-size: 34px; }
  .tapelines { max-height: 470px; }
  .capost { bottom: 132px; left: auto; transform: none; right: calc(max(0px, (100vw - 1180px) / 2) + 26px); width: min(470px, calc((100vw - 112px) / 2.3)); }
  .capost-v { font-size: 10.6px; }
}