/* Stilecroft — neon-sign family. Matte black ground, one hot magenta tube. Grazed plots are lit tubes, rested plots
   are unlit tubes (pale, faint glow), empty plots are dashed outlines. Righteous for words, Nunito Sans for figures
   (the poster face sets 1 as a bare stroke), DM Mono for addresses. Phone first, recomposes past 1000px. */
:root{
  --bg:#0B0A14; --ink:#F1ECFF; --neon:#FF2BD6; --signh:96px;
  --tube:rgba(241,236,255,.55); --dimtube:rgba(241,236,255,.16); --hush:rgba(241,236,255,.6);
  --panel:rgba(241,236,255,.035); --line:rgba(241,236,255,.10);
  --glow:0 0 6px rgba(255,43,214,.9),0 0 18px rgba(255,43,214,.55),0 0 42px rgba(255,43,214,.25);
  --paleglow:0 0 6px rgba(241,236,255,.7),0 0 14px rgba(241,236,255,.25);
  --face:'Righteous',system-ui,sans-serif; --body:'Nunito Sans',system-ui,sans-serif; --mono:'DM Mono',ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:16px/1.5 var(--body);min-height:100vh;padding-top:var(--signh);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(ellipse 70% 40% at 50% 0%,rgba(255,43,214,.13),transparent 70%)}
[hidden]{display:none!important}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
button:disabled{cursor:not-allowed}
code{font-family:var(--mono)}
.hush{color:var(--hush)}
.tubeword{font-family:var(--face);letter-spacing:.06em;text-transform:uppercase}

/* ---- the shop sign (fixed chrome, the buy control lives here) ---- */
#shopsign{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;flex-direction:column;gap:6px;padding:8px 12px 10px;
  background:rgba(11,10,20,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:2px solid var(--neon);box-shadow:0 2px 0 rgba(255,43,214,.35),0 8px 34px rgba(255,43,214,.18)}
.signrow{display:flex;align-items:center;gap:8px;min-width:0}
.signname{display:flex;align-items:center;gap:8px;flex:0 0 auto;text-decoration:none;font-family:var(--face);font-size:19px;letter-spacing:.02em;color:var(--neon);text-shadow:var(--glow)}
.signname img{width:26px;height:26px;border-radius:7px;filter:drop-shadow(0 0 6px rgba(255,43,214,.6))}
.signnav{display:flex;gap:0;margin-left:auto;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;min-width:0}
.signnav a{text-decoration:none;color:var(--hush);padding:6px 5px;border-radius:6px;white-space:nowrap}
.signnav a[aria-current]{color:var(--ink);text-shadow:var(--paleglow)}
.signtether{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.04em;padding:6px 9px;border-radius:999px;border:1px solid var(--tube);color:var(--ink);white-space:nowrap;max-width:96px;overflow:hidden;text-overflow:ellipsis}
.signtether[data-on]{border-color:var(--neon);color:var(--neon);text-shadow:0 0 6px rgba(255,43,214,.6)}
.signtick{flex:0 0 auto;font-family:var(--face);font-size:11px;letter-spacing:.08em;color:var(--hush)}
.signaddr{flex:1 1 auto;min-width:0;font-family:var(--mono);font-size:11px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;
  user-select:all;-webkit-user-select:all;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:rgba(0,0,0,.4)}
.signaddr:not(.islive){color:var(--hush);font-style:italic;user-select:none;-webkit-user-select:none}
.signcopy{flex:0 0 auto;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 10px;border-radius:6px;border:1px solid var(--neon);color:var(--neon);
  text-shadow:0 0 6px rgba(255,43,214,.6);box-shadow:0 0 10px rgba(255,43,214,.25),inset 0 0 8px rgba(255,43,214,.12);transition:background .15s,color .15s}
.signcopy:disabled{border-color:var(--dimtube);color:var(--hush);text-shadow:none;box-shadow:none}
.signcopy.did{background:var(--neon);color:var(--bg);text-shadow:none}
.signgm{flex:0 0 auto;font-size:11px;color:var(--hush);text-decoration:none;border-bottom:1px dotted var(--hush);white-space:nowrap}
.signgm:hover{color:var(--ink)}

/* ---- the croft (main) ---- */
#croft{max-width:1180px;margin:0 auto;padding:14px 12px 40px;display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.fieldcol,.byrecol{min-width:0}
.croftlede{margin:2px 0 12px}
.croftlede h1{margin:0;font:400 30px/1.05 var(--face);color:var(--ink);text-shadow:var(--paleglow);letter-spacing:.01em}
.croftlede h1 em{font-style:normal;color:var(--neon);text-shadow:var(--glow)}
.croftlede p{margin:8px 0 0;color:var(--hush);font-size:15px}

/* the gate: the count */
.gatepost{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;padding:14px 10px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.gateside{text-align:center;min-width:0}
.gateside b{display:block;font:700 42px/1 var(--body);letter-spacing:-.02em;color:var(--hush)}
.gateside.lit b{color:var(--neon);text-shadow:var(--glow)}
.gateside.unlit b{color:var(--ink);text-shadow:var(--paleglow)}
.gateside small{display:block;margin-top:6px;font-family:var(--face);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hush)}
.gateside i{display:block;margin-top:4px;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;font-style:normal;min-height:11px}
.gateside.paying i{color:var(--neon)}
.gatebell{text-align:center;min-width:88px}
.gatebell b{display:block;font:500 24px/1.1 var(--mono);color:var(--ink)}
.gatebell small{display:block;font-family:var(--face);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hush);margin-top:4px}
.gatebell.ringing b{color:var(--neon);text-shadow:var(--glow);animation:breathe 1.4s infinite}

/* the paddock: six by five */
.paddock{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin-top:14px}
.plotcell{position:relative;aspect-ratio:1/1;border-radius:10px;border:2px dashed var(--dimtube);display:flex;align-items:center;justify-content:center;font:700 14px var(--body);color:rgba(241,236,255,.32);transition:border-color .25s,background .25s,box-shadow .25s}
.plotcell.lit{border:2px solid var(--neon);background:rgba(255,43,214,.16);color:var(--neon);text-shadow:0 0 8px rgba(255,43,214,.85);box-shadow:0 0 10px rgba(255,43,214,.55),inset 0 0 14px rgba(255,43,214,.25);animation:flickeron .55s ease-out}
.plotcell.unlit{border:2px solid var(--tube);background:rgba(241,236,255,.06);color:var(--ink);text-shadow:var(--paleglow);box-shadow:0 0 8px rgba(241,236,255,.22),inset 0 0 10px rgba(241,236,255,.08)}
.plotcell.next{border-style:dashed;border-color:rgba(255,43,214,.5);color:rgba(255,43,214,.7);animation:breathe 1.8s infinite}
.plotcell.mine::after{content:'you';position:absolute;bottom:3px;left:0;right:0;text-align:center;font:700 9px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.paddockkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12px;color:var(--hush)}
.paddockkey span::before{content:'';display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;border:2px solid var(--dimtube)}
.paddockkey .k-lit::before{border-color:var(--neon);background:rgba(255,43,214,.3);box-shadow:0 0 6px rgba(255,43,214,.6)}
.paddockkey .k-unlit::before{border-color:var(--tube);background:rgba(241,236,255,.08)}
.paddockkey .k-bare::before{border-style:dashed}

/* the stile: the action */
.stilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.stileway{border-radius:14px;padding:16px 10px 14px;font-family:var(--face);font-size:22px;letter-spacing:.04em;border:2px solid;background:rgba(0,0,0,.25);transition:transform .12s,opacity .2s;min-width:0}
.stileway.graze{border-color:var(--neon);color:var(--neon);text-shadow:var(--glow);box-shadow:0 0 14px rgba(255,43,214,.4),inset 0 0 18px rgba(255,43,214,.15)}
.stileway.fallow{border-color:var(--tube);color:var(--ink);text-shadow:var(--paleglow);box-shadow:0 0 10px rgba(241,236,255,.2),inset 0 0 14px rgba(241,236,255,.06)}
.stileway small{display:block;margin-top:6px;font:600 12px/1.3 var(--body);letter-spacing:0;color:var(--hush);text-shadow:none}
.stileway:disabled{opacity:.42;box-shadow:none;text-shadow:none}
.stileway:not(:disabled):hover{transform:translateY(-1px)}
.stileway:not(:disabled):active{transform:scale(.98)}
.stilenote{margin:10px 0 0;font-size:14px;color:var(--hush);text-align:center}
.stilenote b{color:var(--ink)}

/* what each side would take now */
.quotepair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.quotebox{padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);min-width:0}
.quotebox small{display:block;font-family:var(--face);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--hush)}
.quotebox b{display:block;margin-top:4px;font:700 20px/1.1 var(--body)}
.quotebox.lit b{color:var(--neon);text-shadow:0 0 8px rgba(255,43,214,.7)}
.quotebox u{text-decoration:none;font-size:12px;color:var(--hush)}
.quotelede{margin:14px 0 0;font-size:14px;color:var(--hush)}
.loftnote{margin-top:12px;padding:10px 12px;border:1px dashed var(--dimtube);border-radius:12px;font-size:14px;color:var(--hush);display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.loftnote b{color:var(--ink);font-size:16px}

/* ---- the byre (second column) ---- */
.byrecard{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.byrecard + .byrecard{margin-top:12px}
.byrehead{margin:0 0 8px;font:400 13px var(--face);letter-spacing:.1em;text-transform:uppercase;color:var(--neon);text-shadow:0 0 8px rgba(255,43,214,.55)}
.byrecard p{margin:0;font-size:14px;color:var(--hush)}
.byrecard p + p{margin-top:8px}
.primerlist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.primerlist li{padding:8px 10px;border:1px solid var(--line);border-radius:10px;font-size:12px;color:var(--hush)}
.primerlist b{display:block;font:700 18px/1.1 var(--body);color:var(--ink)}
.furrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:baseline;padding:7px 0;border-top:1px solid var(--line);font-size:13px}
.furrow:first-of-type{border-top:0}
.furrow .fplot{font:700 13px var(--body);min-width:52px}
.furrow .fplot.lit{color:var(--neon);text-shadow:0 0 6px rgba(255,43,214,.6)}
.furrow .fplot.unlit{color:var(--ink)}
.furrow .fwho{font-family:var(--mono);font-size:12px;color:var(--hush);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.furrow .fwho a{text-decoration:none}
.furrow .fago{font-size:11px;color:var(--hush)}
.furrow.bell{color:var(--ink)}
.furrow.bell .fplot{color:var(--hush)}
.hayrow{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.hayrow:first-of-type{border-top:0}
.hayrow .hid{font:700 13px var(--body);color:var(--hush)}
.hayrow .hcount{min-width:0}
.hayrow .hcount b{color:var(--ink)}
.hayrow .hcount b.lit{color:var(--neon);text-shadow:0 0 6px rgba(255,43,214,.6)}
.hayrow .hpaid{font:700 14px var(--body);white-space:nowrap}
.hayrow .hpaid.lit{color:var(--neon)}
.hayrow .hpaid.unlit{color:var(--ink)}
.byreempty{font-size:14px;color:var(--hush);padding:6px 0}
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.statgrid div{text-align:center;padding:8px 4px;border:1px solid var(--line);border-radius:10px}
.statgrid b{display:block;font:700 18px/1.1 var(--body)}
.statgrid small{font-size:11px;color:var(--hush)}

/* ---- rounds / rules / mine views ---- */
.ledgerwrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.ledgertable{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.ledgertable th{font:400 11px var(--face);letter-spacing:.08em;text-transform:uppercase;color:var(--hush);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.ledgertable td{padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.ledgertable tr:last-child td{border-bottom:0}
.ledgertable .lit{color:var(--neon);text-shadow:0 0 6px rgba(255,43,214,.5)}
.ledgertable .unlit{color:var(--ink)}
.rulecard{padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.rulecard + .rulecard{margin-top:12px}
.rulecard h2{margin:0 0 6px;font:400 20px var(--face);color:var(--neon);text-shadow:0 0 8px rgba(255,43,214,.55)}
.rulecard p{margin:0;color:var(--hush);font-size:15px}
.rulecard.worked p b{color:var(--ink)}
.minecard{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.minecard + .minecard{margin-top:10px}
.minecard .mround{font:700 15px var(--body)}
.minecard .mside{font-size:13px;color:var(--hush)}
.minecard .mside b.lit{color:var(--neon)}
.minecard .mside b.unlit{color:var(--ink)}
.minecard .mowed{font:700 18px var(--body);text-align:right}
.gather{padding:9px 14px;border-radius:999px;border:1px solid var(--neon);color:var(--neon);font-weight:700;font-size:13px;text-shadow:0 0 6px rgba(255,43,214,.6);box-shadow:0 0 10px rgba(255,43,214,.25)}
.gather:disabled{border-color:var(--dimtube);color:var(--hush);text-shadow:none;box-shadow:none}
.lostway{padding:30px 16px;text-align:center;border:1px dashed var(--dimtube);border-radius:14px}
.lostway h1{font:400 28px var(--face);margin:0 0 8px}
.lostway code{color:var(--hush)}

/* ---- the hedge (footer) ---- */
.hedgefoot{border-top:1px solid var(--line);padding-top:18px;font-size:13px;color:var(--hush)}
.hedgeline{font-family:var(--face);letter-spacing:.04em;color:var(--ink);text-shadow:var(--paleglow);margin-bottom:10px}
.hedgeaddr{display:grid;grid-template-columns:64px 1fr;gap:6px 10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--line)}
.hedgeaddr span{font-family:var(--face);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.hedgeaddr code{font-size:12px;color:var(--ink);overflow-wrap:anywhere;word-break:break-all;user-select:all;-webkit-user-select:all}
.hedgeaddr code.dim{color:var(--hush);font-style:italic}
.hedgeaddr small{grid-column:2;font-size:12px}
.hedgeaddr small a{margin-right:12px}
.hedgelinks{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-weight:600}
.hedgelinks a{text-decoration:none;color:var(--hush)}
.hedgelinks a:hover{color:var(--neon)}
.hedgesmall{margin-top:10px;font-size:12px}

/* ---- the lantern (modal) + flashes ---- */
#lantern{position:fixed;inset:0;z-index:60;background:rgba(11,10,20,.8);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.lanternbox{width:100%;max-width:460px;background:var(--bg);border:2px solid var(--neon);border-radius:16px;box-shadow:0 0 24px rgba(255,43,214,.35),0 0 60px rgba(255,43,214,.15)}
.lanternhead{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line);font-family:var(--face);font-size:18px;color:var(--neon);text-shadow:0 0 8px rgba(255,43,214,.6)}
.lanternshut{font-size:22px;line-height:1;color:var(--hush);padding:2px 6px}
.lanternbody{padding:14px}
.lanternbody p{margin:0 0 10px;font-size:15px}
.lanternbody p b{color:var(--ink)}
.overstile{display:block;width:100%;margin-top:6px;padding:14px;border-radius:12px;border:2px solid;font-family:var(--face);font-size:19px;letter-spacing:.04em}
.overstile.graze{border-color:var(--neon);color:var(--neon);text-shadow:var(--glow);box-shadow:0 0 14px rgba(255,43,214,.35)}
.overstile.fallow{border-color:var(--tube);color:var(--ink);text-shadow:var(--paleglow)}
.overstile:disabled{opacity:.5;box-shadow:none;text-shadow:none}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-weight:600;text-align:left}
.wellpick img{width:24px;height:24px;border-radius:6px}
.hayflash{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:70;max-width:min(92vw,420px);padding:10px 14px;border-radius:10px;background:var(--bg);border:1px solid var(--neon);color:var(--ink);font-size:14px;box-shadow:0 0 16px rgba(255,43,214,.35);animation:flickeron .4s ease-out}

@keyframes flickeron{0%{opacity:.2}18%{opacity:1}30%{opacity:.35}45%{opacity:1}60%{opacity:.7}100%{opacity:1}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.55}}

/* ---- wider measure (720–999): still one column, bigger object and type ---- */
@media (min-width:720px){
  #shopsign{padding:10px 20px 12px}
  .signname{font-size:23px}
  .signname img{width:30px;height:30px}
  .signnav{font-size:13px;margin-left:8px}
  .signnav a{padding:6px 8px}
  .signtick{font-size:12px}
  .signaddr{font-size:12.5px}
  .signcopy,.signgm{font-size:12px}
  #croft{padding:24px 20px 56px;gap:24px}
  .croftlede h1{font-size:40px}
  .croftlede p{font-size:17px}
  .gatepost{padding:18px 16px;gap:12px}
  .gateside b{font-size:56px}
  .gatebell b{font-size:30px}
  .paddock{gap:10px;margin-top:18px}
  .plotcell{font-size:17px;border-radius:12px}
  .stileway{font-size:26px;padding:20px 14px 18px}
  .stileway small{font-size:13px}
  .quotebox b{font-size:24px}
  #lantern{align-items:center}
}

/* ---- the desktop recomposes: croft left, byre right, hedge spanning ---- */
/* the sign fits on one line only once the name, the nav and a 42-character address all have room */
@media (min-width:1100px){
  #shopsign{flex-direction:row;align-items:center;gap:22px}
  .signrow.signtop{flex:0 0 auto}
  .signrow.signca{flex:1 1 auto;min-width:0;justify-content:flex-end}
}
@media (min-width:1000px){
  #croft{grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"field byre" "hedge hedge";align-items:start;gap:30px;padding:30px 24px 64px}
  .fieldcol{grid-area:field}
  .byrecol{grid-area:byre;position:sticky;top:calc(var(--signh) + 18px)}
  .hedgefoot{grid-area:hedge}
  .croftlede h1{font-size:46px}
  .gateside b{font-size:64px}
  .paddock{gap:12px}
  .plotcell{font-size:19px}
  .stileway{font-size:28px}
}