@font-face {
  font-family: 'Rozha One';
  src: url('fonts/RozhaOne-Regular.woff2?v=6dcf0eb4') format('woff2');
  font-display: swap;
}

:root {
  --ink: #1a120b;
  --cream: #fff4dc;
  --paint-red: #b3261e;
  --paint-yellow: #f0c02c;
  --steel-top: #cfd3d8;
  --steel-edge: #9aa1a9;
  --night: #2a1840;
  --dusk: #7a3b5c;
  --glow: #ffb347;
  --road: #3b3442;
  --steel: #c9ced6;
  --steel-dk: #8d949e;
  --cart: #c0392b;
  --cart-dk: #8e2a1f;
  --wood: #6b4226;
  --ink: #2b1a0e;
  --paper: #fff6e3;
  --teekha: #3fae4a;
  --meetha: #8a3a1c;
  --hing: #c9a227;
  --good: #3fae4a;
  --bad: #e2463a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #140b20; overflow: hidden; }
body { color: var(--ink); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; }

#game {
  position: relative;
  margin: 0 auto;
  max-width: 560px;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: 46px minmax(0, 1fr) 64px auto;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  touch-action: none;
  background: var(--night);
}
#game.shake { animation: shake .35s; }
@keyframes shake {
  20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 2px); }
}

/* HUD */
#hud {
  display: flex; align-items: center; gap: 6px; padding: 0 8px; min-width: 0;
  background: var(--ink); color: var(--cream);
  border-bottom: 3px solid var(--paint-yellow);
  z-index: 5;
}
.stat { font-size: 15px; white-space: nowrap; }
.stat b { font-family: 'Rozha One', serif; font-weight: 400; font-size: 22px; color: var(--paint-yellow); }
.money { min-width: 64px; }
.strikes { margin-left: auto; display: flex; gap: 2px; font-size: 15px; }
.strikes .on { filter: none; }
.strikes .off { filter: grayscale(1); opacity: .35; }
.icon-btn { background: none; border: 0; font-size: 19px; cursor: pointer; padding: 4px; flex: none; }

/* Street */
#street {
  position: relative; overflow: hidden;
  /* the road: patched asphalt, a kerb, and a strip of gutter under the shops */
  background:
    linear-gradient(transparent 63%, #8d8a80 63%, #8d8a80 64.4%, #57524f 64.4%, #57524f 65.4%, transparent 65.4%),
    radial-gradient(ellipse 30% 6% at 70% 82%, #47403f 60%, transparent 62%),
    radial-gradient(ellipse 22% 5% at 22% 92%, #514846 60%, transparent 62%),
    linear-gradient(#3f3a3c, #4a4446);
}
.skyline { position: absolute; left: 0; right: 0; top: 0; height: 63.5%; pointer-events: none; }
.skyline svg { width: 100%; height: 100%; display: block; }
.skyline .kite { animation: kite 3s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes kite { from { transform: rotate(-8deg) translateY(2px); } to { transform: rotate(8deg) translateY(-3px); } }
#banner {
  position: absolute; left: 50%; top: 32px; transform: translateX(-50%) rotate(-1.2deg); z-index: 1; text-align: center;
  background:
    repeating-linear-gradient(95deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px),
    #f0c02c;
  color: #9b1d12; border: 3px solid #6e140c; border-radius: 3px; padding: 1px 14px 3px;
  box-shadow: 0 3px 0 rgba(0,0,0,.45), inset 0 0 0 2px #f7da6a; white-space: nowrap; pointer-events: none;
}
#banner b { display: block; font-family: 'Rozha One', 'Noto Sans Devanagari', serif; font-weight: 400; font-size: 21px; line-height: 1.15; }
#banner small { display: block; font-size: 9px; font-weight: 800; color: #5a1a0a; letter-spacing: .6px; text-transform: uppercase; }
.nimbu {
  position: absolute; top: 34px; font-size: 13px; line-height: 1.05; text-align: center; z-index: 1; pointer-events: none;
  transform-origin: 50% 0; animation: swing 2.4s ease-in-out infinite alternate;
  border-top: 10px solid transparent; background: linear-gradient(#000, #000) 50% 0/1px 100% no-repeat;
}
.nimbu.left { left: calc(50% - 150px); } .nimbu.right { left: calc(50% + 136px); animation-delay: -1.2s; }
@keyframes swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
#dog { position: absolute; left: 6px; top: 66%; font-size: 26px; z-index: 0; pointer-events: none; }
#dog span { display: inline-block; transform: scaleX(-1); }
#dog i { font-style: normal; font-size: 12px; position: absolute; top: -8px; right: -10px; animation: zz 2s infinite; }
#dog.hop span { animation: hop .3s 2; }
#dog.hop i { display: none; }
@keyframes zz { 50% { transform: translate(4px, -4px); opacity: .4; } }
@keyframes hop { 50% { transform: scaleX(-1) translateY(-8px); } }
.bulbs {
  position: absolute; left: -10px; right: -10px; top: 6px; height: 26px;
  background: radial-gradient(circle at 50% 70%, #ffe08a 0 4px, rgba(255,200,90,.45) 5px, transparent 11px) 0 0/34px 26px repeat-x;
  border-top: 2px solid rgba(0,0,0,.6);
  border-radius: 0 0 50% 50% / 0 0 40% 40%;
  animation: twinkle 1.6s steps(2) infinite;
}
@keyframes twinkle { 50% { filter: brightness(.75); } }
#game.powercut .bulbs { animation: none; filter: brightness(.15); }

#traffic { position: absolute; left: 0; right: 0; top: 60%; height: 20%; pointer-events: none; }
.vehicle { position: absolute; top: 0; left: 0; will-change: transform; }
.vehicle svg, .rickshaw svg { width: 100%; height: 100%; display: block; overflow: visible; }

#queue {
  position: absolute; left: 0; right: 0; bottom: 34px; top: 30px; z-index: 2;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.lip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40px;
  background: linear-gradient(#f1f3f5, #c2c8ce 60%, #8f979f);
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  display: grid; grid-template-columns: repeat(4, 1fr); align-items: end;
  z-index: 2;
}
.donna { position: relative; height: 34px; display: flex; justify-content: center; }
.donna svg.leaf { position: absolute; bottom: 2px; width: 74%; max-width: 92px; height: 30px; }
.donna .onplate { position: absolute; bottom: 12px; width: 36px; height: 30px; }
.donna .onplate svg { width: 100%; height: 100%; }
.donna.closed { opacity: .35; }

.slot { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.cust { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; transition: transform .45s cubic-bezier(.3,1.4,.5,1), opacity .4s; }
.cust.enter { transform: translateY(70%); opacity: 0; }
.cust.leave { transform: translateY(60%); opacity: 0; }
.cust.leave.angry { transform: translate(40%, 30%) rotate(10deg); }
.person { width: min(118%, 17vh, 160px); aspect-ratio: 120 / 150; margin-bottom: -6px; }
.person svg { width: 100%; height: 100%; display: block; }
.cust.chew .person { animation: chew .22s infinite alternate; }
@keyframes chew { to { transform: translateY(2px) scaleY(.98); } }
.cust.flash .bubble { animation: flash .5s 3; }
@keyframes flash { 50% { transform: scale(1.18); background: #ffe08a; } }

.pbar { width: 70%; height: 6px; background: rgba(0,0,0,.45); border-radius: 4px; overflow: hidden; margin-top: -4px; z-index: 1; }
.pbar i { display: block; height: 100%; width: 100%; background: var(--good); transform-origin: left; }

.bubble {
  position: relative; background: var(--paper); border-radius: 12px; padding: 4px 6px;
  font-size: clamp(12px, 1.7vh, 15px); line-height: 1.2; text-align: center; margin-bottom: 4px; min-width: 70%; z-index: 3;
  box-shadow: 0 2px 0 rgba(0,0,0,.35); border: 2px solid #000;
}
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -6px; border: 6px solid transparent; border-top-color: #000; border-bottom: 0; }
.bubble .p { display: block; font-weight: 800; color: #fff; border-radius: 6px; padding: 1px 4px; margin-bottom: 2px; white-space: nowrap; }
.p.teekha, .chip.teekha { background: var(--teekha); }
.p.meetha { background: var(--meetha); }
.p.hing { background: var(--hing); color: #2b1a0e; }
.bubble .cnt { font-weight: 700; }
.bubble s { color: var(--bad); font-weight: 700; }
.bubble.sukha { background: #ffe08a; font-weight: 800; }
.bubble .hisaab { display: flex; gap: 4px; margin-top: 3px; justify-content: center; }
.bubble .hisaab button { border: 2px solid #000; border-radius: 8px; padding: 3px 6px; font-weight: 800; cursor: pointer; font-size: 12px; }
.bubble .hisaab .ok { background: #d8f5d0; }
.bubble .hisaab .liar { background: #ffd2cc; }
.shout {
  position: absolute; top: -6px; left: 50%; transform: translate(-50%, -100%);
  background: #fff; border: 2px solid #000; border-radius: 10px; padding: 3px 7px; font-size: 12px; font-weight: 800;
  white-space: nowrap; z-index: 4; animation: pop .25s;
}
.slot:first-child .shout { left: 2px; transform: translate(0, -100%); animation: none; }
.slot:last-child .shout { left: auto; right: 2px; transform: translate(0, -100%); animation: none; }
@keyframes pop { from { transform: translate(-50%, -80%) scale(.6); } }

/* Tray */
.tray {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  /* the glass case: glare streaks over a heap of puris */
  background:
    linear-gradient(115deg, transparent 0 20%, rgba(255,255,255,.55) 21% 24%, transparent 25% 60%, rgba(255,255,255,.4) 61% 63%, transparent 64%),
    linear-gradient(rgba(190,225,235,.35), rgba(190,225,235,.15)),
    var(--tex-pile) 0 6px/66px 60px, #f2d9a6;
  border-top: 5px solid #b8c0c8; border-bottom: 5px solid #b8c0c8; box-shadow: inset 0 0 0 2px var(--ink);
}
.hand {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 2px solid var(--ink); border-radius: 10px; padding: 3px 10px; min-width: 220px; max-width: 94%; min-height: 50px;
  box-shadow: 0 3px 0 var(--ink);
}
.hand .hp { width: 40px; height: 30px; }
.hand .hp svg { width: 100%; height: 100%; }
.hand .steps { display: flex; gap: 4px; font-size: 11px; font-weight: 700; flex-wrap: wrap; }
.hand .steps span { padding: 1px 6px; border-radius: 2px; border: 1.5px dashed #b3a58c; color: #8a8070; }
.hand .steps span.done { background: var(--ink); border: 1.5px solid var(--ink); color: var(--cream); }
.hand .empty { font-size: 13px; color: #6b5a44; line-height: 30px; }
.hand .col { display: flex; flex-direction: column; gap: 3px; }
.hand .hint { font-size: 12px; font-weight: 800; color: var(--paint-red); line-height: 1.15; }
.guide { outline: 3px dashed var(--paint-red); outline-offset: 2px; border-radius: 12px; animation: guide .9s infinite; z-index: 6; }
@keyframes guide { 50% { box-shadow: 0 0 0 7px rgba(255,224,138,.55); } }
.guide::after {
  content: "👆"; position: absolute; bottom: -10px; left: 50%; font-size: 30px; line-height: 1;
  animation: point .6s infinite alternate; pointer-events: none; z-index: 7; filter: drop-shadow(0 2px 0 #000);
}
@keyframes point { from { transform: translate(-50%, 0); } to { transform: translate(-50%, -10px); } }
.cow.guide { outline: none; }
#combo { position: absolute; right: 8px; font-family: 'Rozha One', serif; color: var(--paint-yellow); text-shadow: 2px 2px 0 var(--ink); font-size: 20px; }

/* Counter */
.counter {
  background: linear-gradient(170deg, #eef0f2, #c9ced3 60%, #b4bac1);
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 4px 0 rgba(26,18,11,.2);
}
.row { display: grid; gap: 6px; }
.row.matkas { grid-template-columns: repeat(3, 1fr); }
.row.tools { grid-template-columns: repeat(4, 1fr); }
.station {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  background: none; border: 0; border-radius: 12px; padding: 2px 2px 3px;
  cursor: pointer; touch-action: none; transition: transform .08s;
}
.station:active, .station.hit { transform: scale(.94); }
.station .art { display: block; width: 100%; height: clamp(46px, 8vh, 96px); }
.matka .art { height: clamp(58px, 10.5vh, 120px); }
.station .art svg { width: 100%; height: 100%; }
.station .lbl {
  font-family: 'Rozha One', serif; font-size: 14px; line-height: 1.1; color: #c0001a; white-space: nowrap;
  background: #ffd400; border: 2px solid #fff; outline: 2px solid var(--ink); border-radius: 8px; padding: 1px 7px 0; margin-top: -2px;
  box-shadow: 0 3px 0 var(--ink);
}
kbd { font-family: system-ui, sans-serif; font-size: 9px; opacity: .6; border: 1px solid currentColor; border-radius: 3px; padding: 0 2px; margin-left: 2px; }
@media (hover: none) { kbd { display: none; } }
.station.golden { animation: golden .5s infinite alternate; }
@keyframes golden { to { box-shadow: 0 0 22px 6px #ffd700; } }
.station.no { animation: no .3s; }
@keyframes no { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* FX */
#fx { position: absolute; inset: 0; pointer-events: none; z-index: 20; overflow: hidden; }
.float {
  position: absolute; transform: translate(-50%, -50%); font-weight: 900; font-size: 15px; color: #fff;
  text-shadow: 0 2px 0 #000, 0 0 6px #000; white-space: nowrap; animation: rise 1.1s forwards; pointer-events: none;
}
.float.good { color: #b9ffb0; } .float.bad { color: #ffb3a8; } .float.money { color: #ffe08a; font-size: 18px; }
@keyframes rise { to { transform: translate(-50%, -160%); opacity: 0; } }
.bee { position: absolute; font-size: 26px; pointer-events: auto; cursor: pointer; left: 0; top: 0; will-change: transform; }
.bee.flee { transition: transform .6s ease-in, opacity .6s; opacity: 0; }
.cow {
  position: absolute; font-size: 86px; line-height: 1; pointer-events: auto; cursor: pointer; bottom: 0; left: 0;
  transition: transform 2.2s linear; will-change: transform;
}
.cow span { display: inline-block; }
.cow.wiggle span { animation: no .3s; }
.splat {
  position: absolute; pointer-events: auto; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #7b5a33, #5b3f1f 55%, rgba(80,55,25,.85) 70%, transparent 72%);
  transform: translate(-50%, -50%);
}
.splat::before, .splat::after {
  content: ""; position: absolute; border-radius: 50%; background: #5b3f1f;
}
.splat::before { width: 30%; height: 30%; left: -12%; top: 20%; }
.splat::after { width: 22%; height: 22%; right: -10%; bottom: 8%; }
.rickshaw { position: absolute; width: 170px; height: 113px; bottom: 30%; left: 0; transition: transform 1s linear; }

#dark {
  position: absolute; inset: 0; z-index: 19; pointer-events: none; opacity: 0; transition: opacity .4s;
  --x: 50%; --y: 70%;
  background: radial-gradient(circle at var(--x) var(--y), transparent 0, transparent 70px, rgba(5,2,10,.96) 120px);
}
#game.powercut #dark { opacity: 1; }

#toast {
  position: absolute; left: 50%; top: 56px; transform: translate(-50%, -20px); opacity: 0; z-index: 25;
  background: var(--paper); border: 2px solid #000; border-radius: 12px; padding: 8px 12px; font-weight: 700;
  font-size: 14px; max-width: 92%; text-align: center; transition: opacity .25s, transform .25s; pointer-events: none;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Screens */
.screen {
  position: absolute; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 8, 32, .82); padding: 16px; overflow-y: auto;
}
.screen.hidden { display: none; }
.card {
  background: var(--paper); border: 3px solid #000; border-radius: 20px; padding: 16px 18px; max-width: 440px; width: 100%;
  box-shadow: 0 8px 0 rgba(0,0,0,.5); text-align: center; max-height: 100%; overflow-y: auto;
}
.card h1, .card h2.title { margin: 4px 0; font-size: 30px; letter-spacing: -.5px; }
.card .tag { margin: 0 0 8px; color: #7a4b2b; font-weight: 700; }
.logo { width: 120px; height: 84px; margin: 0 auto; }
.logo svg { width: 100%; height: 100%; }
.how { text-align: left; font-size: 14px; padding-left: 20px; margin: 8px 0 12px; line-height: 1.4; }
.how s { color: var(--bad); font-weight: 700; }
.recipe { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 8px 0 4px; }
.recipe .stp { width: 72px; font-size: 12px; font-weight: 800; line-height: 1.15; }
.recipe .stp .ic { display: block; width: 62px; height: 52px; margin: 0 auto 2px; background: #6b4226; border-radius: 10px; border: 2px solid #000; padding: 3px; }
.recipe .stp .ic svg { width: 100%; height: 100%; }
.recipe .stp small { display: block; font-weight: 600; color: #7a4b2b; }
.recipe .arr { font-size: 18px; margin-top: 16px; }
.how li { margin-bottom: 4px; }
.chip { color: #fff; border-radius: 6px; padding: 0 4px; }
.big-btn {
  background: var(--cart); color: #fff; border: 3px solid #000; border-radius: 14px; padding: 12px 20px;
  font-size: 19px; font-weight: 900; cursor: pointer; box-shadow: 0 5px 0 #000; touch-action: manipulation;
}
.big-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.big-btn.alt { background: var(--teekha); }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.fact { font-size: 13px; color: #5a4a36; background: #fbe7bd; border-radius: 10px; padding: 8px 10px; margin: 12px 0 4px; }
.keys { font-size: 12px; color: #6b5a44; margin: 8px 0 0; }
@media (hover: none) { .keys { display: none; } }
.best { font-size: 13px; font-weight: 700; margin: 6px 0 0; }
.rank { font-size: 18px; font-weight: 900; color: var(--cart); margin: 0 0 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.stats div { background: #fff; border: 2px solid #000; border-radius: 10px; padding: 6px; font-size: 13px; }
.stats b { display: block; font-size: 20px; }

@media (max-height: 640px) {
  #game { grid-template-rows: 42px minmax(0, 1fr) 58px auto; }
}

/* desi extras */
.icon-btn.off { opacity: .35; filter: grayscale(1); }
.float.hawk { font-size: 12px; color: #ffe08a; animation-duration: 2.2s; z-index: 1; }
.cust.dance .person { animation: dance .32s infinite alternate; }
@keyframes dance { from { transform: rotate(-7deg) translateY(0); } to { transform: rotate(7deg) translateY(-6px); } }
.cust.snap::before { content: ""; position: absolute; inset: 0; background: #fff; border-radius: 12px; animation: snap .35s forwards; z-index: 5; pointer-events: none; }
@keyframes snap { from { opacity: .95; } to { opacity: 0; } }
.station.cracked .art { filter: grayscale(.8) brightness(.7); }
.station.cracked::after { content: "💥 phoota"; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); font-weight: 900; font-size: 13px; color: #fff; background: #c0392b; border: 2px solid #000; border-radius: 6px; padding: 1px 5px; }
.ball {
  position: absolute; left: 0; top: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center; z-index: 22;
}
.ball i { width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff6b5a, #b0170a 70%); box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 3px 4px rgba(0,0,0,.5); position: relative; }
.ball i::after { content: ""; position: absolute; inset: 2px 8px; border-left: 1.5px dashed #fff; border-right: 1.5px dashed #fff; opacity: .8; }
.shagun { position: absolute; font-size: 34px; pointer-events: auto; cursor: pointer; animation: bob .7s ease-in-out infinite alternate; z-index: 22; }
@keyframes bob { to { transform: translateY(-10px) rotate(6deg); } }
.procession { position: absolute; left: 0; font-size: 46px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.5)); line-height: 1; white-space: nowrap; will-change: transform; }

.station.guide::after { bottom: 26px; }