:root{
  --wall:#121110; --wall2:#1c1a18; --felt:#15171a; --letter:#f4f1e8; --dim:#a9a69c;
  --red:#d7261e; --yellow:#ffd23f; --neonred:#ff3b5c; --neonblue:#41d9ff;
  --paper:#fbfaf5; --ink:#1d1c1a; --ticket:#ffe9a8; --green:#1f8a4c;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --cond: "Avenir Next Condensed","Arial Narrow","Roboto Condensed","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--wall);color:var(--letter);font-family:var(--cond);line-height:1.4;overflow-x:hidden;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 34px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.02) 0 2px,transparent 2px 68px);}
a{color:inherit}
a:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--yellow);color:#000;padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}

/* ---------- storefront: lightbox sign + window ---------- */
.storefront{padding:18px 14px 8px;max-width:760px;margin:0 auto}
.lightbox{background:linear-gradient(#fffdf2,#fff6d6);color:var(--red);border:6px solid #2a2724;border-radius:6px;
  text-align:center;padding:14px 10px 12px;box-shadow:0 0 0 2px #000,0 0 38px rgba(255,236,170,.45),inset 0 0 30px rgba(255,210,63,.35)}
.lightbox h1{margin:2px 0;line-height:.92;text-transform:uppercase;font-weight:800;letter-spacing:.01em}
.lb-top{display:block;font-size:clamp(2.1rem,11vw,3.6rem);color:#1d3f8f}
.lb-main{display:block;font-size:clamp(1.5rem,7.6vw,2.6rem);color:var(--red);letter-spacing:.06em}
.lightbox-small{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#4a463f}

.window{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px;flex-wrap:wrap}
.neon{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 140px;
  border:3px solid rgba(65,217,255,.75);border-radius:22px;padding:8px 14px 10px;
  box-shadow:0 0 10px rgba(65,217,255,.7),inset 0 0 10px rgba(65,217,255,.45)}
.neon-open{font-family:"Brush Script MT","Snell Roundhand",cursive,var(--cond);font-style:italic;font-weight:700;font-size:2.1rem;line-height:1;
  color:#ffe6ec;text-shadow:0 0 4px #fff,0 0 10px var(--neonred),0 0 22px var(--neonred),0 0 40px var(--neonred);animation:flick 6s infinite}
.neon-247{font-weight:800;font-size:2.6rem;line-height:1;letter-spacing:.04em;color:#e6fbff;
  text-shadow:0 0 4px #fff,0 0 10px var(--neonblue),0 0 22px var(--neonblue),0 0 40px var(--neonblue)}
@keyframes flick{0%,18%,22%,25%,53%,57%,100%{opacity:1}20%,24%,55%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.neon-open{animation:none}}

.take-number{flex:1 1 170px;display:grid;text-decoration:none;background:var(--red);color:#fff;border-radius:10px;padding:10px 14px;
  text-align:center;border:3px solid #7d0f0a;box-shadow:0 6px 0 #7d0f0a}
.take-number:active{transform:translateY(3px);box-shadow:0 3px 0 #7d0f0a}
.tn-label{font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
.tn-num{font-family:var(--mono);font-weight:800;font-size:2rem;line-height:1.05;color:#ffeb7a;text-shadow:0 0 8px rgba(255,90,60,.9);
  background:#1a0a08;border-radius:6px;margin:4px 0;padding:2px 0}
.tn-call{font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.06em}
.tn-phone{font-weight:800;font-size:1.12rem;white-space:nowrap}

/* ---------- menu board (letter board) ---------- */
.board{padding:22px 10px 8px;max-width:760px;margin:0 auto}
.board-frame{position:relative;background-color:var(--felt);
  background-image:repeating-linear-gradient(180deg,#0e1013 0 2px,#191c20 2px 9px);
  border:10px solid #3b2b1f;border-radius:4px;padding:26px 16px 18px;
  box-shadow:0 0 0 2px #000,0 0 50px rgba(255,255,255,.08),inset 0 0 60px rgba(0,0,0,.6),inset 0 12px 30px rgba(255,255,255,.07)}
.sticker{position:absolute;top:-18px;right:-6px;margin:0;width:104px;height:104px;border-radius:50%;background:var(--yellow);color:#111;
  display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(9deg);text-align:center;
  box-shadow:0 4px 0 rgba(0,0,0,.4);border:3px dashed rgba(0,0,0,.25);line-height:1.05}
.sticker strong{font-size:1.9rem}
.st-stars{font-size:.7rem;letter-spacing:1px;color:#b3261e}
.sticker span:last-child{font-family:var(--mono);font-size:.6rem;max-width:72px;text-transform:uppercase}
.board-title{margin:0;font-size:3rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;line-height:1}
.board-sub{margin:4px 0 0;color:var(--dim);font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;max-width:62%}
.board-cat{margin:24px 0 6px;display:inline-block;background:var(--red);color:#fff;font-size:.86rem;letter-spacing:.24em;
  text-transform:uppercase;padding:3px 10px 2px;border-radius:2px}
.lines{list-style:none;margin:0;padding:0}
.lines li{display:flex;flex-wrap:wrap;align-items:baseline;padding:9px 0 8px;border-bottom:1px solid rgba(255,255,255,.07)}
.item{font-size:1.38rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;text-shadow:0 0 6px rgba(255,255,255,.25)}
.lead{flex:1 1 20px;min-width:16px;margin:0 8px;border-bottom:3px dotted rgba(244,241,232,.45);transform:translateY(-4px)}
.tag{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--yellow);white-space:nowrap}
.desc{flex-basis:100%;color:var(--dim);font-size:.96rem;margin-top:2px;letter-spacing:.01em}
.board-note{margin:22px 0 0;padding:12px;border:2px dashed rgba(255,210,63,.6);color:var(--letter);font-size:1rem;text-align:center}
.board-note strong{color:var(--yellow);text-transform:uppercase;letter-spacing:.06em;display:block}
.board-note a{color:var(--yellow);font-weight:700}

/* ---------- customer notes on a ticket rail ---------- */
.rail{padding:34px 0 10px;max-width:760px;margin:0 auto;position:relative}
.rail-title{margin:0 14px;font-size:1.7rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.1}
.rail-title span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--dim);font-weight:400;margin-top:4px}
.rail-bar{height:12px;margin:16px 6px 0;border-radius:6px;background:linear-gradient(#e7e7e7,#8d8d8d 60%,#5a5a5a);box-shadow:0 3px 6px rgba(0,0,0,.6)}
.notes{list-style:none;margin:-4px 0 0;padding:0 14px;display:grid;gap:16px}
.note{position:relative;background:var(--ticket);color:var(--ink);padding:22px 16px 20px;
  font-family:var(--mono);
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,
        conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
          mask:linear-gradient(#000,#000) top/100% calc(100% - 10px) no-repeat,
        conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/16px 10px repeat-x;
  padding-bottom:30px}
.note::before{content:"";position:absolute;top:0;left:0;right:0;height:10px;background:rgba(0,0,0,.18)}
.n1{transform:rotate(-1.4deg)} .n2{transform:rotate(1.1deg);background:#fff} .n3{transform:rotate(-.6deg)}
.n4{transform:rotate(1.5deg);background:#fff} .n5{transform:rotate(-1deg)}
.note figure{margin:0}
.note-no{margin:0 0 8px;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#7a4b00;border-bottom:1px dashed rgba(0,0,0,.3);padding-bottom:6px}
.note blockquote{margin:0;font-family:var(--cond);font-size:1.08rem;line-height:1.38;color:#1b1a18}
.note figcaption{margin-top:10px;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:#4c463b}
.note figcaption::before{content:"\2014  "}
@media (min-width:640px){.notes{grid-template-columns:1fr 1fr}.n5{grid-column:1/-1}}

/* ---------- receipt ---------- */
.receipt-wrap{padding:34px 18px 10px;display:flex;justify-content:center}
.receipt{width:100%;max-width:380px;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:.86rem;line-height:1.5;
  padding:26px 20px 34px;position:relative;box-shadow:0 12px 30px rgba(0,0,0,.55);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 8px repeat-x,
        linear-gradient(#000,#000) center/100% calc(100% - 16px) no-repeat,
        conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 8px repeat-x;
          mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 8px repeat-x,
        linear-gradient(#000,#000) center/100% calc(100% - 16px) no-repeat,
        conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 8px repeat-x}
.receipt h2{margin:0 0 8px;font-size:1.25rem;text-transform:uppercase;letter-spacing:.08em;line-height:1.2}
.receipt address{font-style:normal;text-transform:uppercase}
.receipt a{color:var(--ink)}
.r-center{text-align:center}
.r-dim{color:#6b675e}
.r-small{font-size:.74rem}
#printed{margin:8px 0 0;text-transform:uppercase;font-size:.76rem}
.r-rule{margin:14px 0;border-top:2px dashed #9c978b;height:0}
.r-double{border-top:4px double #1d1c1a}
.r-head{margin:0 0 6px;text-transform:uppercase;font-weight:700;letter-spacing:.12em}
.r-table{width:100%;border-collapse:collapse}
.r-table th{text-align:left;font-weight:400;text-transform:uppercase;padding:2px 0;vertical-align:top}
.r-table th span{display:block;text-transform:none;color:#6b675e;font-size:.76rem}
.r-table td{text-align:right;padding:2px 0;white-space:nowrap;text-transform:uppercase;vertical-align:top}
.r-total th,.r-total td{font-weight:700;font-size:1rem}
.r-total tr:last-child th,.r-total tr:last-child td{font-size:1.2rem}
.r-thanks{margin:16px 0 8px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.r-link{display:inline-block;font-weight:700;padding:6px 2px}
.barcode{height:56px;margin:16px auto 4px;max-width:250px;
  background:repeating-linear-gradient(90deg,#111 0 2px,transparent 2px 4px,#111 4px 5px,transparent 5px 8px,#111 8px 11px,transparent 11px 12px,#111 12px 13px,transparent 13px 17px,#111 17px 19px,transparent 19px 21px)}

/* ---------- order ticket ---------- */
.order{padding:30px 14px 20px;max-width:560px;margin:0 auto}
.ticket{display:grid;background:#fff;color:var(--ink);border-radius:10px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.ticket-main{padding:18px 18px 20px;border-left:10px solid var(--red)}
.t-top{display:flex;justify-content:space-between;margin:0;font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#7a2a20}
.ticket h2{margin:6px 0 8px;font-size:2.6rem;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.t-fields{margin:0 0 16px;font-family:var(--mono);font-size:.9rem}
.t-fields div{display:flex;gap:10px;border-bottom:1px solid #cfcac0;padding:7px 0}
.t-fields dt{width:58px;flex:none;text-transform:uppercase;color:#7a7468;font-size:.74rem;padding-top:2px}
.t-fields dd{margin:0;font-family:"Bradley Hand","Segoe Print","Comic Neue",var(--cond);font-size:1.1rem;color:#1c3d8f}
.t-call{display:block;text-align:center;text-decoration:none;background:var(--red);color:#fff;font-weight:800;font-size:1.5rem;letter-spacing:.02em;
  padding:14px 10px;border-radius:8px;box-shadow:0 5px 0 #7d0f0a}
.t-call:active{transform:translateY(3px);box-shadow:0 2px 0 #7d0f0a}
.ticket-stub{background:var(--ticket);padding:16px 18px 18px;border-top:3px dashed #a99a6a;display:grid;gap:10px;position:relative}
.ticket-stub::before,.ticket-stub::after{content:"";position:absolute;top:-12px;width:22px;height:22px;border-radius:50%;background:var(--wall)}
.ticket-stub::before{left:-11px}.ticket-stub::after{right:-11px}
.stub-label{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7a5d00}
.t-alt{display:block;text-align:center;text-decoration:none;font-weight:700;padding:12px;border:2px solid var(--ink);border-radius:8px;background:#fffaf0}

/* ---------- footer ---------- */
.foot{text-align:center;padding:24px 16px 36px;color:var(--dim);font-family:var(--mono);font-size:.74rem}
.foot p{margin:4px 0}
.foot .small{font-size:.68rem;opacity:.85}

@media (min-width:700px){
  .storefront{padding-top:32px}
  .board-frame{padding:34px 34px 26px}
  .item{font-size:1.6rem}
  .ticket{grid-template-columns:1.6fr 1fr}
  .ticket-stub{border-top:0;border-left:3px dashed #a99a6a;align-content:center}
  .ticket-stub::before,.ticket-stub::after{left:-12px;right:auto}
  .ticket-stub::before{top:-11px}.ticket-stub::after{top:auto;bottom:-11px}
}