/* Champi Chacha. Everything sits over the painted saloon canvas. */
:root {
  --ink: #1a120b;
  --paper: #fff4dc;
  --paper2: #f1e4c6;
  --red: #b3261e;
  --green: #2f6b4f;
  --yellow: #e0b23b;
  /* three faces: --sign for titles, prices and buttons, --ui for reading text,
     --hand for what the customer says (the ticket, bubbles, toasts) */
  --sign: "Baloo 2", "Yatra One", Georgia, serif;
  --ui: "Hind", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --hand: "Kalam", "Chalkboard SE", cursive;
  font-family: var(--ui);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #1a120b; color: var(--ink); overflow: hidden; overscroll-behavior: none; }
body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.noscript { padding: 16px; color: var(--paper); }
#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; display: block; touch-action: none; }
.hidden { display: none !important; }

button { font: inherit; color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 6px; padding: 8px 12px; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }

#hud { position: absolute; left: 0; right: 0; height: 30px; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; padding: 0 8px; pointer-events: none; z-index: 5; }
#hud > * { white-space: nowrap; flex: 0 0 auto; }
#hud > * { pointer-events: auto; }
#money { font-family: var(--sign); font-weight: 800; font-size: 16px; line-height: 1.2; background: var(--red); color: var(--paper); padding: 1px 8px; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--ink); }
#day { font-family: var(--sign); font-size: 12px; line-height: 1.2; background: var(--paper); padding: 2px 6px; border: 2px solid var(--ink); border-radius: 4px; }
#gussa { font-family: var(--sign); font-size: 12px; line-height: 1.2; background: var(--paper); color: var(--red); padding: 2px 6px; border: 2px solid var(--red); border-radius: 4px; }
#mute { margin-left: auto; font-size: 11px; padding: 3px 6px; }

#radio { display: flex; gap: 4px; min-width: 0; flex: 1 1 auto !important; pointer-events: auto; }
#radio button { font-size: 11px; padding: 3px 6px; background: #2a1d14; color: #f3d9a4; border-color: #6b4a2a; box-shadow: none; }
#radioMode { font-family: var(--sign); }
#radioNow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1 1 auto; text-align: left; }

#ticket { position: absolute; z-index: 4; background: #fbf7ee; border: 1px solid #d9d1c0; padding: 6px 6px 8px; box-shadow: 3px 4px 0 rgba(26,18,11,0.35); transform: rotate(-4deg); }
#ticket::before { content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; background: var(--red); border: 2px solid var(--ink); border-radius: 50%; }
#ticket canvas { display: block; width: 100%; height: auto; }
#ask { font-size: 13px; line-height: 1.2; margin-top: 4px; font-family: var(--hand); }
#ask b { display: block; font-weight: 700; }
#ask span { display: block; color: #4a3a2a; }
#ask em { display: block; font-style: normal; color: var(--red); font-weight: 700; }
#ticket.shake { animation: shake .6s; }
@keyframes shake { 0%, 100% { transform: rotate(-4deg); } 25% { transform: rotate(3deg) translateX(-4px); } 75% { transform: rotate(-8deg) translateX(4px); } }

.bubble { position: absolute; z-index: 6; max-width: 180px; background: var(--paper); border: 2px solid var(--ink); border-radius: 12px; padding: 8px 10px; font-family: var(--hand); font-weight: 700; font-size: 15px; line-height: 1.25; box-shadow: 2px 2px 0 var(--ink); }
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -10px; border: 6px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.bubble.father { background: var(--yellow); font-weight: 700; }

#chai { position: absolute; width: 36px; height: 56px; border: 2px solid var(--ink); border-radius: 0 0 10px 10px; background: var(--paper2); overflow: hidden; z-index: 4; }
#chaifill { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: #a3572a; transition: height .3s linear; }
#chai span { position: absolute; left: 0; right: 0; bottom: 2px; text-align: center; font-size: 9px; color: var(--paper); font-family: var(--sign); }
#chai.low #chaifill { background: var(--red); }
#chai::before { content: ""; position: absolute; right: -10px; top: 12px; width: 10px; height: 18px; border: 2px solid var(--ink); border-left: 0; border-radius: 0 8px 8px 0; }

#prompt { position: absolute; left: 8px; right: 60px; z-index: 4; background: rgba(26,18,11,0.82); color: var(--paper); font-size: 13px; padding: 6px 10px; border-radius: 6px; text-align: center; }
#fitkari { position: absolute; left: 12px; z-index: 6; background: #e9e9e9; font-family: var(--sign); animation: pulse 1s infinite; }
@keyframes pulse { 50% { transform: scale(1.06); } }

#tray { position: absolute; left: 0; right: 0; z-index: 5; display: flex; gap: 4px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #3b2a1c; border-top: 3px solid var(--ink); align-items: stretch; }
#tray button { flex: 1 1 0; min-width: 0; padding: 4px 2px; font-size: 11px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; background: var(--paper2); line-height: 1; }
#tray button.on { background: var(--yellow); }
#tray #done { flex: 1.3 1 0; background: var(--green); color: var(--paper); font-family: var(--sign); font-weight: 800; font-size: 15px; }
.ic { display: block; width: 26px; height: 26px; margin-bottom: 2px; background-repeat: no-repeat; background-size: contain; background-position: center; }
.ic-kainchi { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%231a120b' stroke-width='2.4' stroke-linecap='round'><path d='M14 16 L29 5 M14 16 L29 27'/><circle cx='8' cy='10' r='5'/><circle cx='8' cy='22' r='5'/></svg>"); }
.ic-machine { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23b08d57' stroke='%231a120b' stroke-width='2'><rect x='10' y='8' width='12' height='22' rx='2'/><rect x='6' y='3' width='20' height='5' fill='%23ddd'/><path d='M8 3v-2M12 3v-2M16 3v-2M20 3v-2M24 3v-2' stroke-width='1.6'/></svg>"); }
.ic-ustra { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23eee' stroke='%231a120b' stroke-width='2' stroke-linejoin='round'><path d='M3 24 L20 7 L26 11 L9 28 Z'/><path d='M20 7 L29 2 L31 4 L26 11' fill='%234a2a14'/></svg>"); }
.ic-kangha { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%231a120b' stroke='%231a120b' stroke-width='1.4'><rect x='2' y='10' width='28' height='6' rx='2'/><path d='M4 16v10M7 16v10M10 16v10M13 16v10M16 16v10M19 16v10M22 16v10M25 16v10M28 16v10'/></svg>"); }
.ic-gel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%235aa0c8' stroke='%231a120b' stroke-width='2'><rect x='5' y='9' width='22' height='20' rx='3'/><rect x='5' y='5' width='22' height='5' fill='%231a120b'/><path d='M9 17 Q16 14 23 17' fill='none' stroke='%23fff'/></svg>"); }
.ic-tel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%232f6b4f' stroke='%231a120b' stroke-width='2'><path d='M12 2h8v6l4 4v18H8V12l4-4z'/><rect x='11' y='15' width='10' height='8' fill='%23e0b23b'/></svg>"); }
.ic-brush { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23eee' stroke='%231a120b' stroke-width='2' stroke-linejoin='round'><path d='M8 14c0-6 3-10 8-10s8 4 8 10c0 2-2 3-8 3s-8-1-8-3z'/><rect x='12' y='17' width='8' height='12' rx='2' fill='%23b08d57'/></svg>"); }
#tray button:disabled { opacity: .85; }
.ic-dye { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%23222' stroke='%231a120b' stroke-width='2'><rect x='6' y='4' width='20' height='24' rx='2'/><path d='M10 12h12M10 17h12M10 22h8' stroke='%23e0b23b'/></svg>"); }

.panel { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8; width: min(92vw, 400px); background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; padding: 18px 16px; box-shadow: 5px 6px 0 rgba(26,18,11,0.6); text-align: center; }
.panel h1 { font-family: var(--sign); font-weight: 800; font-size: 46px; line-height: 0.95; letter-spacing: .01em; margin: 0 0 8px; color: var(--red); text-shadow: 2px 2px 0 var(--ink); }
.panel h1 span { display: block; }
.panel h1 span + span { color: var(--green); font-size: 40px; }
.panel .tag { font-family: var(--hand); font-weight: 700; font-size: 17px; margin: 0 0 8px; }
.panel p { font-size: 14px; line-height: 1.4; margin: 6px 0; }
.panel .small { font-size: 12px; color: #5a4a3a; }
.panel button { font-family: var(--sign); font-weight: 800; font-size: 20px; padding: 10px 18px; background: var(--yellow); margin: 8px 4px 2px; }
.panel h2 { font-family: var(--sign); margin: 0; font-size: 26px; }
.panel .big { font-family: var(--sign); font-weight: 800; font-size: 44px; color: var(--red); }
.panel .names { font-size: 13px; color: #4a3a2a; }
.panel .stars { font-size: 26px; color: var(--yellow); text-shadow: 1px 1px 0 var(--ink); margin: 2px 0; }
.panel .row { display: flex; justify-content: center; gap: 6px; }

.card { top: auto; bottom: calc(110px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92vw, 360px); padding: 12px; }
.card .rname { font-family: var(--sign); font-weight: 800; font-size: 30px; color: var(--red); }
.card .stamp { display: inline-block; border: 3px solid var(--red); padding: 0 12px; transform: rotate(-6deg); animation: stamp .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes stamp { 0% { transform: scale(3) rotate(-20deg); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }
#tray #done.pulse { animation: pulse .8s infinite; box-shadow: 0 0 0 3px var(--yellow), 2px 2px 0 var(--ink); }
.card .rverdict { font-family: var(--sign); font-size: 18px; }
.card.khush .stamp { border-color: var(--green); color: var(--green); }
.card.theek .stamp { border-color: #7a6a4a; color: #4a3a2a; }
.card.naraaz, .card.bhadak { animation: cardshake .5s .15s; }
@keyframes cardshake { 20% { margin-left: -8px; } 40% { margin-left: 7px; } 60% { margin-left: -5px; } 80% { margin-left: 4px; } }
.card.naraaz::before, .card.bhadak::before { content: "NARAAZ"; position: absolute; top: -14px; right: -6px; background: var(--red); color: var(--paper); font-family: var(--sign); font-size: 14px; padding: 2px 10px; transform: rotate(6deg); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.card.bhadak::before { content: "BHADAK GAYA"; }
.card.naraaz .rpay { color: #7a6a4a; } .card.bhadak .rpay { color: var(--red); }
.card .rpay { font-size: 22px; font-weight: 700; color: var(--green); margin: 2px 0; }
.card .rbits { font-size: 12px; color: #4a3a2a; margin-bottom: 6px; }
.card button { font-size: 16px; padding: 8px 14px; }
.card button:disabled { opacity: .45; }
#intro { z-index: 12; text-align: center; top: 38%; }
#intro .naya { display: inline-block; font-family: var(--sign); font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: var(--red); color: var(--paper); padding: 2px 10px; border-radius: 3px; margin: 0 0 6px; }
#intro .row { display: flex; justify-content: center; gap: 6px; }
#bubble[lang="hi"] { font-family: "Kalam", "Noto Sans Devanagari", "Mangal", "Nirmala UI", sans-serif; }

#toast { position: absolute; left: 50%; top: 57%; transform: translateX(-50%); z-index: 7; background: var(--paper); border: 2px solid var(--ink); padding: 6px 12px; border-radius: 6px; font-family: var(--hand); font-weight: 700; font-size: 14px; max-width: 86%; text-align: center; box-shadow: 2px 2px 0 var(--ink); }
.float { position: absolute; z-index: 7; font-family: var(--sign); font-size: 18px; color: var(--paper); text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); animation: floatup .9s forwards; pointer-events: none; transform: translate(-50%, -100%); }
@keyframes floatup { to { transform: translate(-50%, -220%); opacity: 0; } }
.float.drop { animation: floatdown 1s forwards; color: var(--yellow); }
@keyframes floatdown { 30% { transform: translate(-50%, -160%) rotate(20deg); } to { transform: translate(-50%, 160%) rotate(140deg); opacity: 0; } }

@media (min-width: 700px) {
  #ticket { transform: rotate(-4deg) scale(1.15); transform-origin: top left; }
  .bubble { font-size: 16px; max-width: 240px; }
  #tray { left: 50%; right: auto; width: 560px; transform: translateX(-50%); border: 3px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; }
  #tray button { font-size: 13px; }
}