/* Air Hockey — iXiun warm-dark look (mirrors Connect 4).
   Near-black page, warm charcoal panels, ember orange + gold trim, ivory.
   Mobile first: the game screen is a fixed two-band layout (score bar / table)
   that never scrolls, from 360x640 up, portrait only. */

:root {
  --bg: #0d0d0d;
  --panel: #1a1b1a;
  --panel-2: #1f211d;
  --hole: #0e0f0e;
  --text: #f2f2f9;
  --cream: #EFE7D2;
  --muted: #6b7280;
  --ember: #f09211;
  --ember-bright: #f79814;
  --btn: #ff6a00;
  --ivory: #f4efe0;
  --gold: #D6A84B;
  --gold-soft: #ddbd7d;
  --deep: #cb2715;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  /* the two mallets/pucks, shared by chips and the score bar */
  --disc-1: radial-gradient(circle at 34% 28%, #ffd07d 0%, var(--ember-bright) 42%, #e88508 74%, #c26a04 100%);
  --disc-2: radial-gradient(circle at 34% 28%, #fffdf6 0%, var(--ivory) 48%, #ded8d0 80%, #cbcabc 100%);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

html {
  touch-action: manipulation;
  overscroll-behavior: none;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 62% at 50% -8%, rgba(240, 146, 17, 0.11), rgba(240, 146, 17, 0) 62%),
    radial-gradient(90% 45% at 50% 108%, rgba(214, 168, 75, 0.06), rgba(214, 168, 75, 0) 60%),
    var(--bg);
  color: var(--text);
  font-family: 'Poppins', 'Host Grotesk', system-ui, -apple-system, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overflow: hidden;
}

/* the name boxes are the one place text may be selected */
input { -webkit-user-select: text; user-select: text; }

[hidden] { display: none !important; }

h1, .brand, .title, .overlay h2 { font-family: 'Host Grotesk', 'Poppins', system-ui, sans-serif; }

/* ------------------------------------------------------------------- flair
   Three layers of decoration sit behind and above the screens. None of them
   takes part in layout (all fixed, all pointer-events: none) and none of them
   can hide the table, the score or the credit. */

#embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 40% at 50% 46%, rgba(240, 146, 17, 0.20), rgba(240, 146, 17, 0) 70%),
    radial-gradient(100% 60% at 50% 100%, rgba(214, 168, 75, 0.14), rgba(214, 168, 75, 0) 70%);
}

#sparks {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

/* ------------------------------------------------------------------ buttons */

.btn {
  border: 0;
  border-radius: 999px;                 /* pill-shaped, like the iXiun site */
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  color: var(--text);
}

.btn.primary {
  width: 100%;
  padding: 15px 24px;
  font-size: 17px;
  letter-spacing: 0.02em;
  color: #17110c;
  background: linear-gradient(180deg, #ff8a2a, var(--btn) 70%);
  box-shadow: 0 6px 26px rgba(255, 106, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn.primary:active { filter: brightness(0.92); }

/* the quieter full-width button that sits under a primary one */
.btn.secondary {
  width: 100%;
  padding: 14px 24px;                   /* 1px less than primary: the border makes it up */
  font-size: 17px;
  letter-spacing: 0.02em;
  color: var(--gold-soft);
  background: rgba(13, 13, 13, 0.6);
  border: 1px solid rgba(214, 168, 75, 0.32);
}

.btn.secondary:active { filter: brightness(1.25); }

/* the round pause button in the score bar */
.btn.icon-btn {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;
  color: var(--gold-soft);
  background: rgba(26, 27, 26, 0.72);
  border: 1px solid rgba(214, 168, 75, 0.32);
}

.btn.icon-btn:active { filter: brightness(1.25); }

/* the small pills: sound on the pause screen, full screen there and on the start screen */
.btn.pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-soft);
  background: rgba(26, 27, 26, 0.72);
  border: 1px solid rgba(214, 168, 75, 0.32);
}

.btn.pill-btn:active { filter: brightness(1.25); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.start-inner .fs-btn { align-self: center; }

.snd-icon {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
}

/* a loudspeaker drawn in CSS: a cone and an arc, the arc fading away when muted */
.snd-icon::before {
  content: '';
  position: absolute;
  left: 0; top: 3px;
  width: 5px; height: 5px;
  background: currentColor;
  clip-path: polygon(0 28%, 55% 28%, 100% 0, 100% 100%, 55% 72%, 0 72%);
}
.snd-icon::after {
  content: '';
  position: absolute;
  right: 0; top: 1px;
  width: 8px; height: 9px;
  border: 1.4px solid currentColor;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity 160ms ease;
}
.btn.snd-btn.muted .snd-icon::after { opacity: 0.2; }
.btn.snd-btn.muted { color: var(--muted); border-color: rgba(214, 168, 75, 0.16); }

/* four corner brackets drawn in CSS: the full-screen mark */
.fs-icon {
  display: block;
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  background:
    linear-gradient(currentColor, currentColor) left top / 4px 1.4px,
    linear-gradient(currentColor, currentColor) left top / 1.4px 4px,
    linear-gradient(currentColor, currentColor) right top / 4px 1.4px,
    linear-gradient(currentColor, currentColor) right top / 1.4px 4px,
    linear-gradient(currentColor, currentColor) left bottom / 4px 1.4px,
    linear-gradient(currentColor, currentColor) left bottom / 1.4px 4px,
    linear-gradient(currentColor, currentColor) right bottom / 4px 1.4px,
    linear-gradient(currentColor, currentColor) right bottom / 1.4px 4px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------- start screen */

/* a full-screen flex layer; the inner box centres itself with margin: auto */
.screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
}
#start-screen.hidden { display: none; }

.start-screen { overflow: hidden; }

.start-inner {
  width: min(430px, 100%);
  margin: auto;
  padding: calc(16px + var(--safe-t)) calc(18px + var(--safe-r)) calc(14px + var(--safe-b)) calc(18px + var(--safe-l));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.brand {
  margin: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-indent: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}

.title {
  margin: 0;
  text-align: center;
  font-size: clamp(34px, 11vw, 50px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.05;
  color: var(--cream);
  text-shadow: 0 0 34px rgba(240, 146, 17, 0.28);
}

.tagline {
  margin: 0 0 4px;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  color: var(--muted);
}

/* frosted panel */
.panel {
  background: linear-gradient(180deg, rgba(31, 33, 29, 0.9), rgba(26, 27, 26, 0.85));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 168, 75, 0.22);
  border-radius: 20px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chip {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
}

.chip.puck-1 { background: var(--disc-1); }
.chip.puck-2 { background: var(--disc-2); }

.name-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 46px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(214, 168, 75, 0.28);
  background: rgba(13, 13, 13, 0.6);
  color: var(--text);
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  touch-action: manipulation;
}

.name-row input::placeholder { color: var(--muted); }
.name-row input:focus { outline: none; border-color: var(--ember); box-shadow: 0 0 0 3px rgba(240, 146, 17, 0.22); }

/* the "First to" choice: a labelled pill row inside the panel */
.to-win-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(214, 168, 75, 0.16);
}

.to-win-label {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.to-win-pills {
  display: flex;
  gap: 6px;
}

.to-win-pills [data-to-win] {
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(214, 168, 75, 0.28);
  background: rgba(13, 13, 13, 0.6);
  color: var(--muted);
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

.to-win-pills [data-to-win]:active { filter: brightness(1.25); }

.to-win-pills [data-to-win][aria-pressed="true"] {
  color: #17110c;
  border-color: transparent;
  background: linear-gradient(180deg, #ff8a2a, var(--btn) 70%);
  box-shadow: 0 3px 14px rgba(255, 106, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.credit {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.06em;
}

.how-to {
  margin: 0;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
}

/* -------------------------------------------------------------- game screen */

#game-area {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
#game-area.active { display: flex; }

/* the score bar: the pass-the-phone indicator, tinted in the current player's colour */
#score-bar {
  flex: 0 0 auto;
  width: 100%;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: calc(8px + var(--safe-t)) 12px 6px;
  z-index: 10;
}

.score-block {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(26, 27, 26, 0.7);
}

.score-block:last-child { justify-content: flex-end; }

.score-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.score-value {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 26px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.score-value.p1 { color: var(--ember-bright); text-shadow: 0 0 14px rgba(240, 146, 17, 0.35); }
.score-value.p2 { color: var(--ivory); text-shadow: 0 0 14px rgba(244, 239, 224, 0.25); }

.score-block .chip { width: 16px; height: 16px; }

/* ---- table ---- */
#table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#table-canvas {
  position: absolute;
  touch-action: none;
}

/* ---- overlays ---- */
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 50;
}
.overlay.active { display: flex; }

.overlay-panel {
  width: min(340px, calc(100% - 32px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(31, 33, 29, 0.95), rgba(26, 27, 26, 0.9));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(214, 168, 75, 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.overlay-panel h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(22px, 5vw, 32px);
  font-weight: 700;
  color: var(--cream);
  text-shadow: 0 0 26px rgba(240, 146, 17, 0.24);
}

#result-overlay [data-result] {
  margin: 0;
  text-align: center;
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(20px, 4.5vw, 28px);
  font-weight: 600;
}
#result-overlay [data-result][data-result="1"] { color: var(--ember-bright); }
#result-overlay [data-result][data-result="2"] { color: var(--ivory); }

/* ---- landscape message ---- */
#landscape-msg {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  flex-direction: column;
  gap: 16px;
}
#landscape-msg.active { display: flex; }
#landscape-msg p {
  font-family: 'Host Grotesk', sans-serif;
  font-size: 20px;
  color: var(--cream);
  text-align: center;
  padding: 0 24px;
}

/* ---- goal flash ---- */
#goal-flash {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(240, 146, 17, 0.12);
  pointer-events: none;
}
#goal-flash.active { display: flex; }
#goal-flash span {
  font-family: 'Host Grotesk', sans-serif;
  font-size: clamp(36px, 10vw, 64px);
  font-weight: 700;
  color: #f09211;
  text-shadow: 0 0 30px rgba(240, 146, 17, 0.5);
  animation: goalPulse 0.6s ease-out;
}
@keyframes goalPulse {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
#goal-flash.stop-anim span { animation: none !important; }
.game-ended * { animation: none !important; }

/* ---- credit ---- */
#credit {
  position: fixed;
  top: 4px;
  right: 8px;
  font-size: 11px;
  color: #6b7280;
  z-index: 60;
  pointer-events: none;
}
/* the start screen has its own credit line; hide the corner one there */
#start-screen:not(.hidden) ~ #credit { display: none; }

/* ------------------------------------------------------------- flair motion
   Every animation here is finite (a set duration, one run, ending at rest) so a
   phone settles completely, and all of it lives inside "no preference" — with
   reduce motion on, the game still marks its goal and nothing moves. */

@media (prefers-reduced-motion: no-preference) {
  /* a warm aura breathes up behind the panels when a game is won */
  #aura.on { animation: aura 1600ms ease-out 1; }
  @keyframes aura {
    0%   { opacity: 0; }
    18%  { opacity: 1; }
    55%  { opacity: 0.55; }
    100% { opacity: 0; }
  }

  #start-btn { transition: filter 120ms ease; }
  #start-btn:active { filter: brightness(0.92); }

  .to-win-pills [data-to-win] { transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease; }
}

/* ---- compact screens (phones at 360x640 and similar) ---- */
@media (max-height: 660px) {
  .start-inner { gap: 10px; padding-top: calc(10px + var(--safe-t)); padding-bottom: calc(10px + var(--safe-b)); }
  .title { font-size: clamp(26px, 7vh, 38px); }
  .tagline { margin-bottom: 0; }
  .how-to { display: none; }
  .panel { padding: 10px; gap: 8px; }
  .name-row input { height: 40px; }
  .to-win-pills [data-to-win] { padding: 5px 14px; font-size: 14px; }
  .btn.primary { padding: 12px 22px; font-size: 16px; }
  .btn.secondary { padding: 11px 22px; font-size: 16px; }

  #score-bar { min-height: 44px; padding-top: calc(5px + var(--safe-t)); padding-bottom: 3px; }
  .score-value { font-size: 22px; }
  .score-label { font-size: 12px; }
  .score-block { padding: 5px 10px; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}