/* JUICE LOOPS — a handheld water toy in tangy orange. */
:root {
  --tang: #ff4f00;
  --tang-hi: #ff8a3d;
  --tang-lo: #c23a00;
  --cream: #fff4dc;
  --pulp: #ffd9a8;
  --ink: #fff8ec;
  --pixel: "Press Start 2P", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background:
    radial-gradient(900px 600px at 50% -10%, rgba(255, 79, 0, 0.35), transparent 60%),
    radial-gradient(700px 500px at 50% 110%, rgba(255, 180, 90, 0.18), transparent 60%),
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 22px),
    #0d0b0a;
  color: var(--cream);
  font-family: var(--pixel);
  -webkit-tap-highlight-color: transparent;
}

.room {
  max-width: 520px;
  margin: 0 auto;
  padding: 14px 16px 40px;
}

/* ---- arcade game switch (same on every cabinet) ---- */
.arcade-nav {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 8px;
  letter-spacing: 0.08em;
}
.arcade-nav a {
  flex: 1;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  color: var(--pulp);
  text-decoration: none;
  background: rgba(255, 79, 0, 0.08);
  border: 1px solid rgba(255, 138, 61, 0.35);
}
.arcade-nav a:hover { background: rgba(255, 79, 0, 0.2); }
.arcade-nav a.here {
  color: var(--ink);
  background: linear-gradient(180deg, var(--tang-hi), var(--tang));
  border-color: #ffb27a;
  box-shadow: 0 0 14px rgba(255, 79, 0, 0.55);
}

/* ---- the toy ---- */
.toy {
  position: relative;
  padding: 12px 16px 12px;
  border-radius: 40px 40px 56px 56px;
  background:
    radial-gradient(60% 30% at 30% 6%, rgba(255, 255, 255, 0.55), transparent 70%),
    radial-gradient(90% 60% at 50% 100%, rgba(190, 50, 0, 0.45), transparent 70%),
    linear-gradient(180deg, var(--tang-hi), var(--tang) 40%, var(--tang-lo));
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.45),
    inset 0 -8px 18px rgba(190, 50, 0, 0.5),
    0 0 0 3px #c93300,
    0 24px 50px rgba(0, 0, 0, 0.65),
    0 0 40px rgba(255, 79, 0, 0.35);
}

.toy-top { text-align: center; padding: 0 0 6px; }
.brand-sub {
  display: block;
  font-family: Bungee, var(--pixel);
  font-size: clamp(10px, 2.8vw, 13px);
  letter-spacing: 0.18em;
  color: var(--cream);
  text-shadow: 0 1px 0 #c93300, 0 0 6px rgba(122, 36, 0, 0.35);
}
.brand-title img {
  display: block;
  width: min(46%, 200px);
  height: auto;
  margin: 2px auto 0;
  filter: drop-shadow(0 3px 0 #c93300) drop-shadow(0 0 10px rgba(255, 244, 220, 0.35));
}
.brand-title {
  margin: 2px 0 0;
  font-size: 0 !important;      /* the title is an image: no text line box */
  line-height: 0;
  font-family: Bungee, var(--pixel);
  font-weight: 400;
  font-size: clamp(34px, 10vw, 52px);
  line-height: 1;
  color: var(--cream);
  text-shadow:
    0 3px 0 #c93300,
    0 0 16px rgba(255, 244, 220, 0.5);
  -webkit-text-stroke: 1.5px #c93300;
}
.brand-tag {
  display: block;
  font-size: 7px;
  letter-spacing: 0.2em;
  color: var(--ink);
  opacity: 0.8;
}

/* clear plastic window */
.tank {
  position: relative;
  padding: 8px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 220, 190, 0.25));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.6),
    inset 0 6px 14px rgba(190, 50, 0, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.4);
}
#pool {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 480;
  border-radius: 16px;
  touch-action: none;
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(190, 50, 0, 0.5);
}

/* ---- small controls ---- */
.toy-mid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 6px 0 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 0;
  border-radius: 15px;
  font-family: var(--pixel);
  font-size: 7px;
  letter-spacing: 0.1em;
  color: var(--cream);
  cursor: pointer;
  background: linear-gradient(180deg, #c93300, #e0501a);
  box-shadow: 0 0 0 2px #c93300, 0 4px 0 #c93300, inset 0 1px 0 rgba(255, 255, 255, 0.25);
  touch-action: manipulation;
}
.pill.down { transform: translateY(3px); box-shadow: 0 0 0 2px #c93300, 0 1px 0 #c93300; }
.pill .led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7dff6a;
  box-shadow: 0 0 6px #7dff6a;
}
#btn-sound.off .led { background: rgba(0, 0, 0, 0.25); box-shadow: none; }
#btn-pause .led { background: rgba(0, 0, 0, 0.25); box-shadow: none; }
#btn-pause.on .led { background: #ffe14d; box-shadow: 0 0 6px #ffe14d; }

.round-btn.start {
  width: 64px;
  height: 64px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(145deg, #fffbe8, #ffcf9a);
  box-shadow: 0 0 0 2px #c93300, 0 6px 10px rgba(0, 0, 0, 0.45);
  touch-action: manipulation;
}
.round-btn.start .cap {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 6px;
  border-radius: 50%;
  font-family: var(--pixel);
  font-size: 7px;
  color: #c93300;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 8%, transparent 30%),
    radial-gradient(circle at 50% 60%, #fff4dc, #ffd9a8 55%, #ffc080);
  box-shadow: 0 4px 0 #e07a3a, inset 0 -4px 8px rgba(210, 80, 0, 0.35);
  transition: transform 0.06s;
}
.round-btn.start.down .cap { transform: translateY(4px); box-shadow: 0 1px 0 #e07a3a; }

/* ---- the two pump buttons, like the original toy ---- */
.toy-pumps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  user-select: none;
  -webkit-user-select: none;
}
.pump-wrap { text-align: center; }
.pump {
  position: relative;
  width: 80px;
  height: 80px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(145deg, #ffb27a, #c93300);
  box-shadow: 0 0 0 3px #b52d00, 0 10px 16px rgba(0, 0, 0, 0.5);
  touch-action: none;
}
.pump-cap {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, #ffffff 0 7%, rgba(255, 255, 255, 0.55) 13%, transparent 32%),
    radial-gradient(circle at 50% 62%, #fff4dc 0%, #ffd9a8 45%, #ff9a4a 80%, #c2500a 100%);
  box-shadow:
    0 8px 0 #d94400,
    inset 0 -8px 12px rgba(210, 70, 0, 0.45);
  transform: translateY(calc(var(--depth, 0) * 7px));
  transition: transform 0.06s linear, box-shadow 0.05s;
}
.pump-cap::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  border: 3px solid rgba(210, 60, 0, 0.45);
}
.pump.down .pump-cap {
  box-shadow:
    0 1px 0 #d94400,
    0 0 22px rgba(255, 244, 220, 0.8),
    inset 0 -4px 8px rgba(210, 70, 0, 0.45);
}
.pump-label {
  display: block;
  margin-top: 5px;
  font-size: 7px;
  letter-spacing: 0.12em;
  color: var(--ink);
}
.grip-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.grip { display: flex; flex-direction: column; gap: 5px; }

/* ---- $1 bill acceptor, like on a real machine ---- */
.bill {
  display: block;
  width: clamp(118px, 36vw, 156px);
  padding: 6px 10px 5px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: linear-gradient(180deg, #34343a, #101014);
  box-shadow:
    0 0 0 2px #c93300,
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 6px rgba(0, 0, 0, 0.6),
    0 6px 10px rgba(0, 0, 0, 0.4);
  touch-action: manipulation;
}
.bill-arrows { display: flex; justify-content: center; gap: 9px; height: 8px; }
.bill-arrows i {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #14301a;
  animation: bill-arrow 1.1s infinite;
}
/* the lights chase from the ends in toward the middle of the slot */
.bill-arrows i:nth-child(1), .bill-arrows i:nth-child(5) { animation-delay: 0s; }
.bill-arrows i:nth-child(2), .bill-arrows i:nth-child(4) { animation-delay: 0.18s; }
.bill-arrows i:nth-child(3) { animation-delay: 0.36s; }
@keyframes bill-arrow {
  0%, 55%, 100% { border-top-color: #14301a; filter: none; }
  15%, 35% { border-top-color: #5dff78; filter: drop-shadow(0 0 4px #5dff78); }
}
.bill-slot {
  display: block;
  height: 7px;
  margin: 5px 2px 4px;
  border-radius: 4px;
  background: #000;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.9),
    0 0 0 2px #45454c,
    0 0 10px rgba(93, 255, 120, 0.45);
}
.bill-label {
  display: block;
  font-family: var(--pixel);
  font-size: 6px;
  letter-spacing: 0.12em;
  color: #7dff8a;
  text-shadow: 0 0 6px rgba(93, 255, 120, 0.6);
  text-align: center;
}
.bill.down { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { .bill-arrows i { animation: none; border-top-color: #5dff78; } }
#btn-tilt[hidden] { display: none; }
#btn-tilt .led { background: rgba(0, 0, 0, 0.25); box-shadow: none; }
#btn-tilt.on .led { background: #7dff6a; box-shadow: 0 0 6px #7dff6a; }
.tank { transition: transform 0.12s ease-out; }
.grip span {
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: rgba(190, 50, 0, 0.45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.how {
  margin: 20px 4px 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #ffd9b8;
}
.credit-line {
  margin: 0 4px;
  font-size: 7px;
  line-height: 1.8;
  color: #ffb88a;
}
.credit-line a { color: var(--tang-hi); }

@media (max-width: 400px) {
  .room { padding: 10px 12px 30px; }
  .toy { padding: 12px 12px 16px; border-radius: 32px 32px 44px 44px; }
  .pump { width: 68px; height: 68px; }
  .round-btn.start { width: 56px; height: 56px; }
  .round-btn.start .cap { width: 44px; height: 44px; }
  .grip span { width: 30px; }
}

/* Paid-play label on the bill slot can run to two lines. */
.bill-label { white-space: normal; line-height: 1.5; }
.bill.is-paid .bill-label { color: #7cff6a; }

/* Phones: the whole toy fits the screen. Compact title, slimmer frame;
   js/phonefit.js narrows the tank if the pumps would still fall off. */
@media (max-width: 600px), (max-height: 940px) {
  .room { padding-top: 6px; padding-bottom: 24px; }
  .arcade-nav { margin-bottom: 6px; }
  .toy { padding: 8px 10px 10px; }
  .brand-sub, .brand-tag { display: none; }
  .brand-title img { width: min(38%, 150px); }
  .tank { padding: 5px; }
}

/* Four tabs (three games + PRIZES) fit a phone. */
@media (max-width: 600px) {
  .arcade-nav { gap: 4px; }
  .arcade-nav a { padding: 9px 2px; font-size: 7px; letter-spacing: 0; white-space: nowrap; }
}

/* Very short screens (a laptop at 150% scaling, the smallest phones): slimmer
   tabs and title so the pumps and the $1 bill fit. */
@media (max-height: 640px) {
  .arcade-nav a { padding-top: 6px; padding-bottom: 6px; }
  .toy { padding-top: 4px; padding-bottom: 6px; }
  .brand-title img { width: min(26%, 110px); }
  .toy-mid { margin-top: 2px; }
  .pump { width: 66px; height: 66px; }
}
@media (max-height: 600px) {
  .brand-title img { width: min(22%, 90px); }
  .round-btn.start { width: 54px; height: 54px; }
  .round-btn.start .cap { width: 44px; height: 44px; margin: 5px; }
  .pump { width: 58px; height: 58px; }
  .room { padding-bottom: 8px; }
  .grip-wrap { gap: 4px; }
  .pill { height: 26px; }
}

/* PC (760px and wider): pumps flank the tank like the real toy, PAUSE /
   START / SOUND on the left, the $1 bill on the right, so the tank grows. */
@media (min-width: 760px) {
  .room { max-width: 900px; }
  .toy {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 20px;
  }
  .toy > .toy-top { grid-column: 1 / -1; text-align: center; }
  .tank { grid-column: 2; grid-row: 2 / 4; width: min(520px, 52vw); box-sizing: border-box; }
  .toy-mid { grid-column: 1; grid-row: 2; flex-direction: column; align-self: center; margin: 0; }
  .toy-pumps { display: contents; }
  .toy-pumps > .pump-wrap:first-child { grid-column: 1; grid-row: 3; justify-self: center; }
  .toy-pumps > .grip-wrap { grid-column: 3; grid-row: 2; align-self: center; justify-self: center; }
  .toy-pumps > .pump-wrap:last-child { grid-column: 3; grid-row: 3; justify-self: center; }
}