/* Fight Night phone controller, dressed as Haggle Mart: store blue, SALE-sticker orange, price-tag yellow, Roboto Condensed Black. */
:root {
  --blue: #005dbd; --deep: #003e7d; --night: #06213f; --orange: #ff8105; --sale1: #ff6607; --sale2: #ff9a25;
  --yellow: #ffd21f; --red: #d81f26; --green: #19e36b; --paper: #fffdf5; --ink: #10151e; --slot: #ff8105;
  --cond: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
#pad, #pad * { touch-action: none; -webkit-user-select: none; user-select: none; }
button { touch-action: manipulation; font-family: var(--cond); cursor: pointer; }
html, body { margin: 0; height: 100%; overflow: hidden; color: #fff; font-family: var(--cond); touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none; }
/* The aisle: deep store blue with shelf lines. */
body { background: repeating-linear-gradient(180deg, #0000 0 86px, #ffffff0d 86px 90px, #0000 90px 96px), radial-gradient(ellipse at 50% 0%, var(--blue), var(--deep) 55%, var(--night)); background-color: var(--night); }
[hidden] { display: none !important; }
.page { position: fixed; inset: 0; display: flex; flex-direction: column; height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
.msg { min-height: 1.3em; margin: 0; text-align: center; font-weight: 700; font-size: 15px; opacity: 0.92; }

/* A price-tag button (join/start/overlay). */
.tagbtn { position: relative; padding: 12px 26px 12px 34px; font-size: clamp(16px, 4.6vmin, 22px); font-weight: 900; letter-spacing: 0.5px; color: #fff;
  background: linear-gradient(130deg, var(--sale1), var(--sale2)); border: 0; border-radius: 10px;
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%); box-shadow: 0 5px 0 #b44a00; text-transform: uppercase; }
.tagbtn::before { content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--deep); box-shadow: inset 0 0 0 2px #0003; }
.tagbtn.alt { background: var(--paper); color: var(--deep); box-shadow: 0 5px 0 #9aa4ae; }
.tagbtn:active { transform: translateY(3px); }

/* Join */
#join { align-items: center; justify-content: center; gap: 12px; }
.sign { display: flex; flex-direction: column; align-items: center; transform: rotate(-3deg); margin-bottom: 6px; }
.sign span { font-weight: 900; font-size: 20px; letter-spacing: 3px; padding: 3px 12px; background: var(--blue); border: 3px solid #fff; border-radius: 8px; }
.sign b { font-weight: 900; font-style: italic; font-size: clamp(40px, 12vmin, 64px); line-height: 0.95; color: var(--yellow); text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #0006; letter-spacing: -1px; }
label { display: flex; flex-direction: column; gap: 3px; font-weight: 900; font-size: 13px; letter-spacing: 2px; width: min(320px, 90vw); }
input { font: 900 24px var(--cond); padding: 9px 12px; border-radius: 10px; border: 3px solid var(--yellow); background: var(--paper); color: var(--deep); }
#room { text-transform: uppercase; letter-spacing: 12px; text-align: center; font-size: 32px; }

/* Header bar: the store sign strip */
.bar { flex: none; display: flex; align-items: center; gap: 2vmin; padding: 5px 8px; border-radius: 12px; background: var(--blue); border: 2px solid #ffffff55; box-shadow: 0 3px 0 #0005; }
.bar .me { font-weight: 900; font-size: 20px; padding: 1px 10px; border-radius: 7px; background: var(--slot); color: #fff; }
.bar .status { flex: 1; font-weight: 700; font-size: 15px; }
.icon, .x { flex: none; width: clamp(34px, 9vmin, 46px); height: clamp(34px, 9vmin, 46px); padding: 0; font-size: 20px; font-weight: 900; line-height: 1;
  color: var(--deep); background: var(--paper); border: 0; border-radius: 10px; box-shadow: 0 3px 0 #0006; }
.x { color: #fff; background: var(--red); }

/* Pick */
#pick { gap: 1.5vmin; }
#products { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2vmin; align-content: center; }
.prod { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6vmin; padding: 1.6vmin; min-width: 0; min-height: 0;
  color: var(--deep); background: var(--paper); border: 0; border-radius: 12px; box-shadow: 0 4px 0 #0007; }
.prod img { width: min(84px, 22vmin, 100%); aspect-ratio: 1; height: auto; border-radius: 8px; background: #dce7ee; }
.prod b { font-weight: 900; font-size: clamp(13px, 4.2vmin, 21px); line-height: 1; text-align: center; text-transform: uppercase; }
.prod small { font-weight: 700; font-size: clamp(10px, 2.8vmin, 12px); color: #344e69; text-align: center; }
.prod.mine { background: linear-gradient(130deg, var(--sale1), var(--sale2)); color: #fff; outline: 4px solid var(--yellow); }
.prod.mine small { color: #fff; }
.prod.taken { opacity: 0.45; }
.prod .owner { position: absolute; top: 4px; right: 4px; font-weight: 900; font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--deep); color: #fff; }
.lobby-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 1vmin; }
@media (max-height: 420px) { .prod small { display: none; } }
@media (orientation: portrait) { #products { grid-template-columns: repeat(3, 1fr); align-content: start; } }

/* ---------------- The controller ---------------- */
#pad { gap: 1.4vmin; }
#pad .face { flex: none; width: clamp(30px, 9vmin, 46px); height: clamp(30px, 9vmin, 46px); border-radius: 8px; background: var(--paper); border: 2px solid var(--slot); }
#pad .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#pad .nm { font-weight: 900; font-size: clamp(14px, 4vmin, 20px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; }
#pad .nm b { color: var(--yellow); }
/* Your price: a yellow shelf label */
.price { position: relative; height: clamp(16px, 4.8vmin, 22px); border-radius: 5px; background: #5b0d12; overflow: hidden; box-shadow: inset 0 0 0 2px #fff; }
.price .fill { position: absolute; inset: 0; transform-origin: left; background: var(--yellow); transition: transform 0.15s; }
.price span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-weight: 900; font-size: clamp(12px, 3.8vmin, 17px); color: var(--deep); }
.price.low .fill { background: var(--sale2); }
.sale { position: relative; height: 9px; border-radius: 5px; overflow: hidden; background: #0006; }
.sale .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--sale1), var(--sale2)); transition: width 0.15s; }
.sale em { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 8px; font-weight: 900; font-style: normal; letter-spacing: 1px; opacity: 0.8; }
.sale.full .fill { background: linear-gradient(90deg, var(--yellow), var(--sale2), var(--yellow)); animation: shine 0.7s linear infinite; background-size: 200% 100%; }
@keyframes shine { to { background-position: -200% 0; } }

.controls { flex: 1 1 0; min-height: 0; display: flex; gap: 3vmin; }

#overlay, #leave { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #003e7de8; z-index: 5; text-align: center; padding: 20px; }
.ov-text { font-weight: 900; font-style: italic; font-size: clamp(32px, 10vmin, 48px); color: var(--yellow); text-shadow: 3px 3px 0 var(--red); text-transform: uppercase; }
.ov-text small { display: block; font-style: normal; font-size: 16px; color: #fff; text-shadow: none; margin-top: 6px; text-transform: none; }
.ov-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
#leave .card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 24px; border-radius: 16px; background: var(--paper); color: var(--deep); box-shadow: 0 6px 0 #0006; }
#leave .card b { font-size: 26px; font-weight: 900; text-transform: uppercase; }
#leave .card p { margin: 0 0 6px; font-weight: 700; }
#pad.out .controls { opacity: 0.35; }
#pad.hit { animation: shake 0.18s; }
@keyframes shake { 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }

/* Upright: stick on top, buttons below. */
#rotate { display: none; }
@media (orientation: portrait) {
  .controls { flex-direction: column; }
  #pad .stick { flex: 1 1 0; }
  .buttons { flex: 1.15 1 0; }
  #pad .stick .base { width: min(46vmin, 70%); }
  #rotate { display: block; position: fixed; left: 0; right: 0; bottom: 2px; margin: 0; text-align: center; font-weight: 700; font-size: 11px; opacity: 0.55; pointer-events: none; }
  body:has(#pad[hidden]) #rotate { display: none; }
}
/* Tablets: bigger header to match the bigger buttons; no "turn sideways" nag. */
@media (min-width: 700px) and (min-height: 700px) {
  #pad .face, .icon, .x { width: 58px; height: 58px; font-size: 26px; }
  #pad .nm { font-size: 26px; }
  .price { height: 28px; } .price span { font-size: 21px; }
  .sale { height: 12px; }
  #pad .stick .hint { font-size: 16px; }
  #rotate { display: none !important; }
}

/* The live view: sideways it sits between the stick and the buttons; upright it's on top, the thumbs share the strip below. */
#live { position: relative; flex: 1.5 1 0; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#liveview { width: 100%; aspect-ratio: 16 / 9; max-height: 100%; border: 3px solid #fff; border-radius: 12px; background: #000; box-shadow: 0 5px 0 #0007; }
#livesound { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; font-size: 16px; opacity: 0.85; }
.thumbs { display: contents; }
#pad .controls { gap: 2vmin; }
#pad .controls > .thumbs > .stick { order: 0; }
#pad .controls > #live { order: 1; }
#pad .controls > .thumbs > .buttons { order: 2; }
#pad.nolive #live { display: none; }
@media (orientation: portrait) {
  #pad .controls { flex-direction: column; }
  #live { flex: none; }
  .thumbs { display: flex; flex: 1 1 0; min-height: 0; gap: 3vw; }
  .thumbs .stick { flex: 0.9 1 0; }
  .thumbs .buttons { flex: 1.1 1 0; }
  #pad .stick .base { width: min(36vw, 86%); }
}