@font-face{font-family:"Silk";src:url(/fonts/silkscreen-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Silk";src:url(/fonts/silkscreen-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Doto";src:url(/fonts/doto-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Manrope";src:url(/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-display:swap}

:root{
  --ink:#0a0a0b;--p1:#131315;--p2:#1b1b1e;--edge:#2a2a2f;
  --tx:#f1efe9;--mut:#8f8d87;
  --red:#ff3b2f;--amb:#ffb000;--grn:#3dff7a;
  --paper:#efebe1;--pink:#d8d3c6;
  --px:3px;
  --step:steps(4,end);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--tx);font:500 15px/1.5 "Manrope",system-ui,sans-serif;min-height:100vh;overflow-x:hidden;
  font-variant-ligatures:none;font-kerning:normal}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
:focus-visible{outline:2px dashed var(--amb);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* pixel-cut corners (8-bit stepped) */
.pxc{clip-path:polygon(0 var(--px),var(--px) var(--px),var(--px) 0,calc(100% - var(--px)) 0,calc(100% - var(--px)) var(--px),100% var(--px),100% calc(100% - var(--px)),calc(100% - var(--px)) calc(100% - var(--px)),calc(100% - var(--px)) 100%,var(--px) 100%,var(--px) calc(100% - var(--px)),0 calc(100% - var(--px)))}

/* ============ SIGNBOARD ============ */
.sign{max-width:980px;margin:0 auto;padding:16px clamp(14px,4vw,32px) 0}
.sign-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.shop{font:700 clamp(18px,4.6vw,26px)/1 "Silk";letter-spacing:.02em;color:var(--tx);text-shadow:2px 2px 0 var(--red)}
.open{display:flex;align-items:center;gap:7px;font:400 11px/1 "Silk";padding:6px 8px;border:2px solid currentColor;color:var(--grn)}
.open i{width:8px;height:8px;background:currentColor;box-shadow:0 0 8px currentColor;animation:soft 1.6s steps(1) infinite}
@keyframes soft{60%{opacity:.55}}
.open.tutup{color:var(--red)}
.open.tutup i{animation:none;opacity:.6}
@keyframes blink{50%{opacity:.15}}

.board{position:relative;background:#050505;border:6px solid #1c1c1f;outline:2px solid #000;box-shadow:inset 0 0 0 2px #000,0 10px 30px -12px rgba(255,59,47,.35);padding:8px 6px;overflow:hidden}
.board::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 40%);z-index:1}
/* screws */
.board::after{content:"";position:absolute;inset:3px;pointer-events:none;background:
  radial-gradient(circle,#3a3a40 1.5px,transparent 2px) 0 0/8px 8px no-repeat,
  radial-gradient(circle,#3a3a40 1.5px,transparent 2px) 100% 0/8px 8px no-repeat,
  radial-gradient(circle,#3a3a40 1.5px,transparent 2px) 0 100%/8px 8px no-repeat,
  radial-gradient(circle,#3a3a40 1.5px,transparent 2px) 100% 100%/8px 8px no-repeat}
#led{display:block;width:100%;height:clamp(54px,13vw,96px);image-rendering:pixelated}
.hours{font:400 11px/1.4 "Silk";color:var(--mut);margin-top:8px;text-align:right}

main{max-width:980px;margin:0 auto;padding:0 clamp(14px,4vw,32px)}

/* ============ LCD INPUT ============ */
.lcd-wrap{padding:22px 0 8px;display:grid;gap:14px}
@media(min-width:820px){.lcd-wrap{grid-template-columns:minmax(0,520px) 1fr;align-items:center;gap:32px}}
.lcd{position:relative;background:#a9b48a;color:#1e2414;padding:12px 14px 10px;border:6px solid #26262b;outline:2px solid #000;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.25),inset 0 0 24px rgba(30,36,20,.45);transition:background .25s}
.lcd::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(30,36,20,.06) 50%,transparent 50%) 0 0/100% 3px,
             linear-gradient(90deg,rgba(30,36,20,.05) 50%,transparent 50%) 0 0/3px 100%}
.lcd.lit{background:#c3d18f}
.lcd-head{display:flex;justify-content:space-between;align-items:center;font:400 11px/1 "Silk";letter-spacing:.04em}
.lcd-op{font:700 12px/1 "Silk";padding:3px 6px;background:#1e2414;color:#a9b48a;min-width:44px;text-align:center}
.lcd-op.blank{background:none;color:#1e2414;opacity:.45}
.lcd input{width:100%;background:none;border:0;outline:0;font:800 clamp(30px,8.6vw,44px)/1.15 "Doto";letter-spacing:.02em;color:#1e2414;padding:8px 0 2px;caret-color:#1e2414}
.lcd input::placeholder{color:rgba(30,36,20,.28)}
.lcd-hint{font:400 10.5px/1.3 "Silk";min-height:1.3em;opacity:.75}
.lcd-hint.bad{opacity:1;color:#7a1508}
.tag{font-size:15px;color:var(--mut);max-width:400px;text-wrap:balance}

/* ============ KEYS (arcade buttons) ============ */
.shop-sec{padding:18px 0 8px;scroll-margin-top:12px}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{position:relative;padding-bottom:6px}
.key span{display:block;font:700 clamp(12px,3.4vw,15px)/1 "Silk";padding:14px 6px 13px;background:var(--p2);color:var(--mut);
  border:2px solid #000;box-shadow:inset 0 -4px 0 rgba(0,0,0,.4),inset 0 2px 0 rgba(255,255,255,.06),0 6px 0 #000;
  transform:translateY(0);transition:transform .08s,background .15s,color .15s,box-shadow .08s}
.key:active span{transform:translateY(4px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.4),0 2px 0 #000}
.key.on span{background:var(--red);color:#fff;transform:translateY(4px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),inset 0 2px 0 rgba(255,255,255,.25),0 2px 0 #000,0 0 22px -4px rgba(255,59,47,.6)}

.ops{display:flex;gap:6px;overflow-x:auto;padding:14px 6px 6px 2px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ops::-webkit-scrollbar{display:none}
.op{flex:none;font:400 11.5px/1 "Silk";padding:9px 10px 8px;border:2px solid var(--edge);color:var(--mut);background:var(--p1);display:flex;gap:7px;align-items:center;transition:color .12s,border-color .12s}
.op::before{content:"";width:8px;height:8px;background:var(--oc,#777)}
.op.on{color:var(--tx);border-color:var(--oc,var(--tx));box-shadow:3px 3px 0 var(--oc,var(--tx))}

/* ============ PRICE BOARD ============ */
.pboard{margin-top:12px;background:var(--p1);border:2px solid #000;box-shadow:0 0 0 2px var(--edge)}
.pb-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:2px dashed var(--edge);font:700 12px/1 "Silk";color:var(--amb);letter-spacing:.06em}
.pb-blink{width:8px;height:12px;background:var(--amb);animation:blink 1s steps(1) infinite}
.list{list-style:none}
.row{display:grid;grid-template-columns:1fr auto auto;gap:4px 14px;align-items:center;width:100%;text-align:left;padding:14px;border-bottom:1px solid var(--edge);
  position:relative;transition:background .12s}
.list li:last-child .row{border-bottom:0}
.row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--oc,var(--edge));transform:scaleY(0);transform-origin:top;transition:transform .2s steps(3,end)}
.row:hover,.row:focus-visible{background:var(--p2)}
.row:hover::before,.row:focus-visible::before{transform:none}
.r-name{font:700 15px/1.2 "Manrope";letter-spacing:-.005em;align-self:end}
.row.solo .r-name{grid-row:1/3;align-self:center}
.r-ket{grid-column:1;font-size:12.5px;color:var(--mut);line-height:1.3;align-self:start}
.r-price b .dt{font-style:normal;font:800 .8em/1 "Manrope";text-shadow:none;margin:0 .02em}
.r-price{min-width:6.2ch}
.r-price{grid-row:1/3;grid-column:2;text-align:right}
.r-price b{display:block;font:800 clamp(22px,5.8vw,28px)/1 "Doto";color:var(--amb);text-shadow:0 0 10px rgba(255,176,0,.35);white-space:nowrap}
.r-price s{font:400 10.5px/1 "Silk";color:#6b6964}
.r-go{grid-row:1/3;grid-column:3;width:34px;height:34px;display:grid;place-items:center;background:var(--p2);border:2px solid #000;box-shadow:0 3px 0 #000;font:700 14px/1 "Silk";color:var(--mut);transition:transform .08s}
.row:hover .r-go{background:var(--red);color:#fff}
.row:active .r-go{transform:translateY(3px);box-shadow:0 0 0 #000}
.lbl{display:inline-block;vertical-align:2px;margin-left:8px;font:400 9.5px/1 "Silk";padding:3px 5px 2px;background:var(--red);color:#fff;box-shadow:0 0 10px -2px rgba(255,59,47,.7)}
.lbl.g{background:var(--grn);color:#000;animation:none}
.lbl.p{background:var(--amb);color:#000;animation:none}

/* row "flap in" like a split-flap / LED refresh */
.list.flip .row{animation:flip .32s var(--step) both;animation-delay:calc(var(--i)*40ms)}
@keyframes flip{0%{clip-path:inset(0 0 100% 0);opacity:.2}100%{clip-path:inset(0 0 0 0);opacity:1}}

.sk{height:66px;border-bottom:1px solid var(--edge);background:linear-gradient(90deg,transparent,rgba(255,255,255,.035),transparent) 0 0/200% 100%;animation:sh 1.1s linear infinite}
@keyframes sh{to{background-position:-200% 0}}
.empty{padding:22px 14px;color:var(--mut)}

@media(min-width:820px){
  .list{display:grid;grid-template-columns:1fr 1fr}
  .list li{border-right:1px solid var(--edge)}
  .list li:nth-child(2n){border-right:0}
  .list li .row{border-bottom:1px solid var(--edge)}
}

/* ============ HOW / FOOT ============ */
.how{padding:26px 0 34px;color:var(--mut);font-size:14px;display:grid;gap:10px}
.how b{font:700 11px/1 "Silk";color:var(--tx);margin-right:8px;padding:4px 6px;border:2px solid var(--edge)}
.how i{font-style:normal;color:var(--red);font-family:"Silk"}
.pay{display:flex;flex-wrap:wrap;gap:6px}
.pay span{font:400 10.5px/1 "Silk";color:var(--tx);padding:6px 7px 5px;background:var(--p1);border:2px solid var(--edge)}
.foot{width:calc(100% - 2*clamp(14px,4vw,32px));max-width:916px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:16px 0 calc(18px + env(safe-area-inset-bottom));border-top:2px dashed var(--edge);font:400 11px/1 "Silk";color:var(--mut)}
.foot a{color:#000;background:var(--grn);padding:9px 10px 8px;text-decoration:none;box-shadow:0 3px 0 #0d7a33}

/* ============ RECEIPT SHEET ============ */
.sheet-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet-wrap[hidden]{display:none}
.scrim{position:absolute;inset:0;background:rgba(5,5,6,.9);opacity:0;transition:opacity .25s}
.sheet{position:relative;width:100%;max-width:420px;padding:0 14px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:stretch}
.slot{height:14px;margin:0 6px;background:#000;border:3px solid #26262b;border-bottom:0;box-shadow:inset 0 4px 6px rgba(0,0,0,.8);position:relative;z-index:2}
.receipt{position:relative;margin:0 18px;background:var(--paper);color:#1d1c19;font:400 11.5px/1.45 "Silk";padding:16px 16px 22px;
  clip-path:inset(0 0 100% 0);transition:clip-path .55s steps(9,end);
  --zz:linear-gradient(-45deg,transparent 6px,var(--paper) 0) 0 100%/12px 12px repeat-x,linear-gradient(45deg,transparent 6px,var(--paper) 0) 0 100%/12px 12px repeat-x}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;
  background:linear-gradient(-45deg,transparent 5.5px,var(--paper) 6px) 0 0/12px 8px repeat-x,linear-gradient(45deg,transparent 5.5px,var(--paper) 6px) 0 0/12px 8px repeat-x}
.receipt{clip-path:inset(0 0 100% 0)}
.sheet-wrap.open .scrim{opacity:1}
.sheet-wrap.open .receipt{clip-path:inset(0 0 -10px 0)}
.r-shop{font:700 16px/1.1 "Silk";text-align:center}
.r-sub{text-align:center;font-size:10px;opacity:.6;margin-top:2px}
.r-cut{height:0;border-top:2px dashed rgba(29,28,25,.35);margin:10px 0}
.r-row{display:flex;justify-content:space-between;gap:10px}
.r-row span:first-child{opacity:.6}
.receipt h3{font:800 24px/1.1 "Manrope";letter-spacing:-.01em;margin:6px 0 2px;text-transform:none}
.receipt .r-ket{font:500 12.5px/1.35 "Manrope";color:#55534d}
.r-in{display:grid;gap:4px;margin-top:12px}
.r-in span{opacity:.6}
.r-in input{background:#fff;border:2px solid #1d1c19;padding:9px 10px 7px;font:800 22px/1 "Doto";letter-spacing:.02em;outline:0;width:100%;color:#1d1c19}
.r-in input:focus{box-shadow:3px 3px 0 #1d1c19}
.r-warn{margin-top:8px;font:600 12px/1.35 "Manrope";color:#a3170b}
.r-tot{align-items:baseline}
.r-tot span{opacity:1!important;font-weight:700}
.r-tot b{font:800 30px/1 "Doto"}
.r-note{font-size:9.5px;opacity:.6;text-align:center;text-wrap:balance}
.acts{display:grid;grid-template-columns:1fr 2fr;gap:8px;margin-top:22px;opacity:0;transform:translateY(10px);transition:opacity .2s .45s,transform .2s .45s}
.sheet-wrap.open .acts{opacity:1;transform:none}
.acts button{font:700 13px/1 "Silk";padding:16px 8px 15px;border:2px solid #000;box-shadow:0 5px 0 #000}
.acts button:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.btn-x{background:var(--p2);color:var(--mut)}
.btn-go{background:var(--grn);color:#000}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

.stale{margin:0;padding:10px 14px;border-bottom:2px dashed var(--edge);background:#3a2a00;color:#ffd27a;font:600 12px/1.4 "Manrope"}
.stale[hidden]{display:none}