/* Shared Haggle Mart controls: the price-sticker stick and the price-tag buttons.
   Used by the phone controller (pad.html) and by the game itself on a touch screen (index.html). */
.stick, .buttons {
  --blue: #005dbd; --deep: #003e7d; --orange: #ff8105; --sale1: #ff6607; --sale2: #ff9a25; --yellow: #ffd21f; --red: #d81f26; --ink: #10151e;
  font-family: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  touch-action: none; -webkit-user-select: none; user-select: none;
}
.buttons button { font-family: inherit; cursor: pointer; touch-action: none; }
/* The stick: a round yellow price sticker with an orange knob. It sits in the middle of the left side;
   touch anywhere on the left and it jumps under your thumb, let go and it springs home. */
.stick { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; border-radius: 22px; background: #ffffff0a; border: 2px dashed #ffffff22; overflow: hidden; }
.stick .base { position: absolute; left: 50%; top: 50%; width: min(42vmin, 78%); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, #fff3 0 38%, #0000 39%), var(--yellow); border: 5px solid #fff; box-shadow: 0 6px 0 #0006, inset 0 0 0 6px #e0b300;
  pointer-events: none; transition: left 0.12s, top 0.12s; }
.stick.on .base { transition: none; }
.stick .ar { position: absolute; font-style: normal; font-size: min(5vmin, 22px); color: var(--deep); opacity: 0.55; transform: translate(-50%, -50%); }
.stick .ar.u { left: 50%; top: 11%; } .stick .ar.d { left: 50%; top: 89%; } .stick .ar.l { left: 11%; top: 50%; } .stick .ar.r { left: 89%; top: 50%; }
.stick .knob { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffb35a, var(--orange) 55%, #c95a00); border: 4px solid #fff; box-shadow: 0 5px 0 #0007;
  display: grid; place-items: center; transition: transform 0.12s; }
.stick.on .knob { transition: none; }
.stick .knob span { font-weight: 900; font-size: min(3.6vmin, 15px); letter-spacing: 1px; color: #fff; text-shadow: 0 1px 0 #0006; }
.stick.on .ar { opacity: 0.25; }
.stick .ar.hot { opacity: 1; color: var(--red); }
.stick .hint { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-weight: 700; font-size: clamp(10px, 2.8vmin, 13px); opacity: 0.6; pointer-events: none; }

/* The buttons: hanging price tags (hole and all), a SALE! sticker, and a yellow shelf-talker. */
.buttons { flex: 1 1 0; min-width: 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 0.5fr 1fr 1fr; gap: 2.4vmin; }
.b { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.b span { font-weight: 900; font-size: clamp(18px, 6.6vmin, 34px); letter-spacing: 0.5px; text-transform: uppercase; }
.b small { margin-top: 0.6vmin; font-weight: 900; font-size: clamp(10px, 3vmin, 15px); opacity: 0.9; }
.b.tag { border-radius: 14px; clip-path: polygon(16% 0, 100% 0, 100% 100%, 16% 100%, 0 50%); padding-left: 10%; box-shadow: none; filter: drop-shadow(0 5px 0 #0007); }
.b.tag::before { content: ""; position: absolute; left: 8%; top: 50%; width: min(3.4vmin, 14px); aspect-ratio: 1; transform: translateY(-50%); border-radius: 50%; background: var(--deep); box-shadow: inset 0 0 0 2px #0004; }
.b.tag small { padding: 1px 6px; border-radius: 4px; background: #fff; color: var(--ink); opacity: 1; }
.b.p { background: linear-gradient(160deg, #ff3b40, var(--red)); }
.b.k { background: linear-gradient(160deg, #1f86ff, var(--blue)); }
.b.s { grid-column: 1 / 3; border-radius: 18px; background: linear-gradient(130deg, var(--sale1), var(--sale2)); transform: rotate(-2deg); box-shadow: 0 6px 0 #b44a00; }
.b.s span { font-style: italic; font-size: clamp(22px, 8vmin, 42px); text-shadow: 2px 2px 0 #0003; }
.b.s small { padding: 2px 10px; border-radius: 6px; background: #fffffff2; color: #ef5a03; font-size: clamp(11px, 3.2vmin, 16px); }
.b.t { grid-column: 1 / 3; border-radius: 10px; background: var(--yellow); color: var(--red); box-shadow: 0 4px 0 #b89500; flex-direction: row; gap: 10px; }
.b.t span { font-size: clamp(14px, 4.4vmin, 24px); font-style: italic; }
.b.t small { margin: 0; color: var(--deep); }
.b.on { transform: translateY(4px) scale(0.97); filter: brightness(1.2); }
.b.s.on { transform: rotate(-2deg) translateY(4px) scale(0.97); box-shadow: 0 2px 0 #b44a00; }