/* Tilt: the backbox display across the top, the table filling the rest, and cards for the menus. */

/* The fonts, the prize counter and the ticket dispenser come from ../shared/arcade.css. */

:root {
  --bg: #05070d;
  --ink: #f6efe0;
  --ink2: rgba(246, 239, 224, .74);
  --ink3: rgba(246, 239, 224, .5);
  --amber: #ffa53a;
  --amber-dim: rgba(255, 165, 58, .16);
  --red: #e63946;
  --card: rgba(14, 22, 44, .9);
  --line: rgba(246, 239, 224, .16);
  --disp: "Bungee", Impact, sans-serif;
  --body: "Figtree", system-ui, sans-serif;
  --hud: calc(58px + env(safe-area-inset-top, 0px));
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--ink); font: 15px/1.45 var(--body);
  -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* ---- the backbox: ball number, score display, menu ---- */
.backbox {
  position: fixed; left: 0; right: 0; top: 0; height: var(--hud);
  padding: env(safe-area-inset-top, 0px) 10px 0;
  display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 8px;
  background: linear-gradient(#0d0a08, #050403); border-bottom: 1px solid #2a1a0a;
}
.ball { font: 12px/1.1 var(--disp); color: var(--amber); opacity: .85; letter-spacing: .04em; }
/* The display is the screen's width less 164 px. On a phone narrower than 375 px that's too narrow for the longest
   messages (and under 340 px, for an eight-digit score), so there the type shrinks with the screen. */
.display {
  height: 42px; border-radius: 6px; background: #120a02;
  box-shadow: inset 0 0 0 1px #3a2208, inset 0 2px 8px rgba(0, 0, 0, .8);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font: clamp(16px, 15.5vw - 27px, 26px)/1 var(--disp); color: var(--amber); letter-spacing: .04em;
  text-shadow: 0 0 6px rgba(255, 140, 30, .7), 0 0 16px rgba(255, 120, 20, .35);
  background-image: radial-gradient(rgba(255, 165, 58, .07) 1px, transparent 1.2px); background-size: 4px 4px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.display.msg { font-size: clamp(12px, 8.9vw - 15.5px, 18px); text-transform: uppercase; animation: flash .3s steps(2) 3; }
@keyframes flash { 50% { opacity: .35; } }
.menu {
  justify-self: end; width: 44px; height: 44px; border-radius: 10px; border: 1px solid #3a2208;
  background: #120a02; color: var(--amber); display: grid; place-items: center; cursor: pointer;
}
.menu:active { background: #24140a; }

/* ---- the table ---- */
.stage { position: fixed; left: 0; right: 0; top: var(--hud); bottom: 0; touch-action: none; }
#table { display: block; width: 100%; height: 100%; }
/* The table runs down to the bottom of the screen. On a phone with a home indicator (an iPhone, with Tilt added to
   the home screen), the Launch button is lifted above the indicator's strip, so the button and the swipe home don't
   share it. Everywhere else the inset is 0 and the button sits where it always has.
   Where the table is drawn too small for the button's 72 × 78 px beside the right flipper, it's scaled down by --k
   from its bottom right corner (main.js works it out). */
.launch {
  position: absolute; width: 72px; height: 78px; border-radius: 14px; margin-bottom: env(safe-area-inset-bottom, 0px);
  border: 1px solid rgba(255, 165, 58, .55); background: rgba(18, 10, 2, .72); color: var(--amber);
  font: 11px/1 var(--disp); letter-spacing: .05em; cursor: pointer; overflow: hidden; touch-action: none;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 10px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  transform: scale(var(--k, 1)); transform-origin: 100% 100%;
}
.launch .lbl { position: relative; }
.launch .lbl::before { content: "▲"; display: block; text-align: center; font-size: 16px; margin-bottom: 6px; }
.launch .meter { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(var(--amber), #e2551a); opacity: .5; }

/* ---- menus ---- */
.sheet {
  position: fixed; inset: var(--hud) 0 0 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(3, 5, 10, .45);
}
.card {
  width: min(380px, 100%); max-height: 100%; overflow: auto; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  user-select: text; -webkit-user-select: text;
}
h1 {
  margin: 0; font: 64px/1 var(--disp); color: var(--amber);
  text-shadow: 0 0 10px rgba(255, 140, 30, .6), 0 3px 0 #a33a10;
}
h2 { margin: 0; font: 30px/1.1 var(--disp); color: var(--amber); }
.lede { margin: 8px 0 18px; color: var(--ink2); }
/* The table picker: a radio button for each table, drawn as a tile; the one in the machine is lit. */
.tables { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; min-width: 0; }
.tables legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tables label { position: relative; cursor: pointer; }
.tables input { position: absolute; opacity: 0; margin: 0; }
.tables span {
  display: block; height: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px;
}
.tables b { display: block; font: 15px/1.2 var(--disp); color: var(--ink); }
.tables small { display: block; margin-top: 1px; font-size: 12px; line-height: 1.35; color: var(--ink3); }
.tables input:checked + span { border-color: var(--amber); background: var(--amber-dim); }
.tables input:checked + span b { color: var(--amber); }
.tables input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.go {
  display: block; width: 100%; padding: 14px 18px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(#ffb04d, #f07a1a); color: #2a1200; font: 18px var(--disp); letter-spacing: .03em;
  box-shadow: 0 3px 0 #a2420c;
}
.go:active { transform: translateY(2px); box-shadow: 0 1px 0 #a2420c; }
.row { display: flex; gap: 8px; margin-top: 10px; }
.ghost {
  flex: 1; padding: 11px 10px; border-radius: 12px; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: 600 15px var(--body); cursor: pointer;
}
.ghost:active { background: rgba(255, 255, 255, .06); }
a.ghost { display: flex; align-items: center; justify-content: center; text-decoration: none; text-align: center; }
.ghost.tix { color: #ffd36a; }
/* back to the arcade floor, at the top of the title card */
.floor { display: block; width: max-content; margin: -8px 0 6px -2px; padding: 4px 2px; color: var(--ink2); font: 600 14px var(--body); text-decoration: none; }
.floor:hover, .floor:focus-visible { color: var(--ink); text-decoration: underline; }
#over .fp-payout { margin-top: 12px; }
.best { margin: 12px 0 0; color: var(--ink3); font-size: 14px; min-height: 1.4em; }
.how { margin-top: 14px; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
.how summary { cursor: pointer; color: var(--ink2); font-weight: 600; text-align: center; }
.how ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink2); font-size: 14px; }
.how li { margin: 6px 0; }
.how b { color: var(--ink); }
.final { margin: 10px 0 0; font: 40px/1 var(--disp); color: var(--ink); font-variant-numeric: tabular-nums; }
.note { margin: 6px 0 0; color: var(--amber); min-height: 1.4em; }
.scores { margin: 14px auto 18px; padding: 0; list-style: none; max-width: 240px; counter-reset: n; }
.scores li {
  counter-increment: n; display: flex; justify-content: space-between; gap: 10px; padding: 4px 0;
  border-bottom: 1px solid var(--line); color: var(--ink2); font-variant-numeric: tabular-nums;
}
.scores li::before { content: counter(n) "."; color: var(--ink3); width: 1.5em; text-align: left; }
.scores li span { flex: 1; text-align: right; }
.scores li.me { color: var(--amber); font-weight: 700; }
.scores li small { color: var(--ink3); }

button:focus-visible, summary:focus-visible, a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.jd-foot { margin: 16px 0 0; font: 400 13px/1.4 var(--body); color: var(--ink3); }
.jd-foot a { color: inherit; text-decoration: none; border-radius: 2px; }
.jd-foot a:hover, .jd-foot a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--ink2); }

.noscript { position: fixed; inset: 0; z-index: 10; margin: 0; display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center; font: 22px var(--disp); color: var(--amber); background: var(--bg); }

@media (max-height: 640px) { h1 { font-size: 48px; } .card { padding: 18px 18px 14px; } }
@media (prefers-reduced-motion: reduce) { .display.msg { animation: none; } }