:root {
  --pink: #C01553; --plum: #8C1047; --yellow: #FFD23F; --ink: #501300;
  --teal: #013443; --gold: #D79A2A; --gold-light: #CCA96B;
  --display: 'Lilita One', 'Baloo 2', 'Nirmala UI', system-ui, sans-serif;
  --font: 'Baloo 2', 'Nirmala UI', 'Noto Sans Devanagari', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { position: fixed; inset: 0; margin: 0; overflow: hidden; touch-action: none; background: #2B150A; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; font-family: var(--font); }
#cv { position: fixed; left: 0; top: 0; display: block; touch-action: none; }
#safe { position: fixed; visibility: hidden; pointer-events: none; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
#loading { position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px;
  background: radial-gradient(circle, #fff 0 12%, var(--yellow) 22%, transparent 62%); opacity: 0; animation: tw 1s ease-in-out .6s infinite; }
body.ready #loading { display: none; }
@keyframes tw { 50% { opacity: 1; } }

#ui { position: fixed; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; color: #fff; }
#ui button { pointer-events: auto; cursor: pointer; }
#ui button:not(.px-btn):not(.px-h):not(.fbtn) { font-family: var(--font); }

#icons { top: 8px; }

/* In play */
/* Under the dig spot, following it down: the gold screen's speech box. */
#hint { position: absolute; left: 50%; transform: translate(-50%, 6px); width: max-content;
  font: 400 18px/.78 var(--px-font); color: #1A0008; text-transform: uppercase;
  opacity: 0; transition: opacity .2s, transform .2s steps(3); }
#hint.on { transform: translate(-50%, 0); opacity: 1; }
/* What is said in the shaft, in the same box, no tail */
.bubble { position: absolute; max-width: 250px; width: max-content;
  font: 400 15px/1 var(--px-font); text-transform: uppercase;
  text-align: center; text-wrap: balance; transform: translate(-50%, -100%) scale(.7);
  opacity: 0; visibility: hidden; transition: opacity .15s, transform .2s steps(3), visibility .15s; }
.bubble.on { opacity: 1; visibility: visible; transform: translate(-50%, -100%) scale(1); }

/* The stall screen, over the dimmed shaft. */
#s-stalled { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(30, 4, 14, 0.62); }
#s-stalled .stalled { width: 318px; text-align: center; }
#s-stalled .line { margin: 10px 0 0; font-size: 17px; line-height: 1.03; color: #FFF8FF; }
#s-stalled .stall-bar { display: block; width: 240px; height: 64px; margin: 12px auto 0; }
#s-stalled .skill { margin: 10px 8px 4px; font-size: 14px; line-height: 1.01; color: rgba(255, 248, 255, 0.75); }
#s-stalled .stall-buttons { display: flex; gap: 12px; justify-content: center; margin-top: 34px; }
#s-stalled .px-btn { width: 150px; font-size: 17px; }
/* ?tune: live revs, floor and stall for tuning. */
#tune { position: absolute; left: 6px; bottom: 6px; margin: 0; padding: 6px 8px; background: rgba(0, 0, 0, .7); color: #CDFF00;
  font: 11px/1.3 ui-monospace, monospace; pointer-events: none; z-index: 20; }