/* Roti Toss: dhaba backdrop and HUD bits */

body.game {
  --bg-top: #6a3218;
  --bg-bottom: #2e1608;
  --hud-ink: #fff;
  --hud-chip: rgba(255, 255, 255, .14);
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
  overscroll-behavior: none;
}
body.game .stage { overflow: hidden; overscroll-behavior: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

.subhud .chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; min-height: 28px; }
.subhud .chip b { font-size: 17px; font-variant-numeric: tabular-nums; }
.chip.rt-score { background: var(--chili); }
.chip.rt-score.bump, .chip.rt-wind.bump { animation: rt-bump .25s ease-out; }
@keyframes rt-bump { 50% { transform: scale(1.12); } }
.chip.rt-wind i { font-style: normal; font-weight: 900; display: inline-block; color: #9fe6ff; transition: transform .2s; }
.chip.rt-wind.strong { background: rgba(255, 120, 60, .4); }

.rt-hand {
  position: absolute; left: 0; top: 0; z-index: 6; width: 52px; height: 52px; margin: -7px 0 0 -21px;
  pointer-events: none; opacity: 0; transition: opacity .2s; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4));
}
.rt-hand:not(.show) { opacity: 0 !important; }
.rt-hand svg { width: 100%; height: 100%; }

.rt-pause {
  position: absolute; inset: 0; z-index: 8; display: grid; place-content: center; gap: 4px; border: 0;
  background: rgba(30, 14, 4, .62); color: #fff; font: inherit; text-align: center; cursor: pointer;
}
.rt-pause[hidden] { display: none; }
.rt-pause b { font: 700 34px/1.1 var(--display); }
.rt-pause span { font-weight: 700; font-size: 17px; padding: 10px 22px; margin-top: 10px; border-radius: 999px; background: var(--chili); box-shadow: 0 5px 0 var(--chili-2); }

/* In-run lives: little rotis (the red heart in the header is the cafe-lives wallet) */
.chip.rt-lives { gap: 2px; padding-inline: 8px; }
.chip.rt-lives i { display: inline-grid; width: 20px; height: 20px; transition: transform .2s, opacity .2s; }
.chip.rt-lives svg { width: 100%; height: 100%; }
.chip.rt-lives svg ellipse { fill: rgba(255, 255, 255, .14); stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.chip.rt-lives svg .c { fill: transparent; }
.chip.rt-lives i.on svg ellipse { fill: #f0c070; stroke: #fff3d6; }
.chip.rt-lives i.on svg .c { fill: #8a4a1a; }
.chip.rt-lives.last i.on { animation: rt-beat .8s ease-in-out infinite; }
.chip.rt-lives.gain { animation: rt-gain .6s ease-out; }
.chip.rt-lives.lose { animation: rt-lose .45s ease-out; }
@keyframes rt-beat { 50% { transform: scale(1.2); } }
@keyframes rt-gain { 30% { transform: scale(1.18); box-shadow: 0 0 0 3px rgba(125, 255, 154, .8); } }
@keyframes rt-lose { 20% { transform: translateX(-5px); background: rgba(255, 60, 30, .6); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (max-width: 380px) {
  .subhud { gap: 6px; }
  .subhud .chip { padding-inline: 9px; font-size: 13px; }
  .chip.rt-lives i { width: 17px; height: 17px; }
}

/* Aim mode toggle: Easy aim / Pro ×2 */
.rt-mode {
  position: absolute; z-index: 4; left: 10px; bottom: 10px; display: inline-flex; padding: 3px; gap: 2px;
  border: 0; border-radius: 999px; background: rgba(30, 14, 4, .55); color: #fff; font: inherit; font-weight: 800; font-size: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); min-height: 44px; align-items: center; cursor: pointer;
}
.rt-mode span { padding: 7px 12px; border-radius: 999px; transition: background .2s, color .2s; white-space: nowrap; }
.rt-mode .e { background: #fff3d6; color: #5a2e12; }
.rt-mode.on .e { background: transparent; color: rgba(255, 255, 255, .75); }
.rt-mode.on .p { background: #ffd23f; color: #3a1a06; }
.rt-mode .p { color: rgba(255, 255, 255, .75); }
.rt-mode.nudge { animation: rt-nudge 1.2s ease-in-out 2; }
@keyframes rt-nudge { 30% { transform: scale(1.1); box-shadow: 0 0 0 4px rgba(255, 210, 63, .7); } 60% { transform: scale(1); } }

/* Stage banner */
.rt-stage {
  position: absolute; z-index: 4; left: 50%; top: 30%; transform: translate(-50%, -10px); opacity: 0; pointer-events: none;
  text-align: center; color: #fff; text-shadow: 0 2px 0 rgba(43, 20, 8, .7), 0 0 12px rgba(0, 0, 0, .35); white-space: nowrap;
}
.rt-stage small { display: block; font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: #ffd23f; }
.rt-stage b { font: 700 26px/1.15 var(--display); }
.rt-stage.show { animation: rt-stage 2.6s ease-out forwards; }
@keyframes rt-stage { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1.05); } 20% { transform: translate(-50%, 0) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -12px); } }