/* Connect 4 — iXiun warm-dark look.
   Near-black page, warm charcoal panels, ember orange + gold trim, ivory.
   Mobile first: the game screen is a fixed three-band layout (turn bar / board / foot)
   that never scrolls, from 360x640 up, portrait and landscape. */

: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 discs, shared by chips and board */
  --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 {
  /* phones: no double-tap zoom, no pinch, no overscroll bounce */
  touch-action: manipulation;
  overscroll-behavior: none;
}

body {
  margin: 0;
  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, .status, .title { font-family: 'Host Grotesk', 'Poppins', system-ui, sans-serif; }

.screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  z-index: 2;
}

/* ------------------------------------------------------------------- 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 board, the turn message or the credit. */

/* A canvas is a replaced element: inset alone will not stretch it, so its box is
   spelled out. The bitmap behind it is sized to the same box by flair.js. */
#embers {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* a warm aura that breathes up when a game is won — behind the panels, so it
   never washes over a disc or a word */
#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 fly above the board, but never answer a tap */
#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); }

.btn.new-game {
  padding: 12px 26px;
  font-size: 15px;
  color: #17110c;
  background: linear-gradient(180deg, #ff8a2a, var(--btn) 70%);
  box-shadow: 0 5px 20px rgba(255, 106, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn.new-game:active { filter: brightness(0.92); }

/* Android has no installed-app mode yet, so a small full-screen pill is offered
   where the Fullscreen API exists. Deliberately slight: it must never crowd the board. */
.btn.fs-btn {
  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.fs-btn:active { filter: brightness(1.25); }

/* the small pills under the board: sound, and Full screen where it exists */
.pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.snd-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
}

.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;
}
.snd-btn.muted .snd-icon::after { opacity: 0.2; }
.snd-btn.muted { color: var(--muted); border-color: rgba(214, 168, 75, 0.16); }

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

.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.disc-1 { background: var(--disc-1); }
.chip.disc-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); }

.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-screen { padding: 0; }

/* the turn bar: the pass-the-phone indicator, tinted in the current player's colour */
.hud {
  flex: 0 0 auto;
  width: 100%;
  padding: calc(10px + var(--safe-t)) 12px 6px;
}

.turn-bar {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  max-width: 520px;
  margin: 0 auto;
  padding: 9px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(31, 33, 29, 0.92), rgba(24, 25, 22, 0.86));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(240, 146, 17, 0.30);
  box-shadow: 0 0 22px rgba(240, 146, 17, 0.10), 0 8px 22px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.turn-bar[data-turn="2"] {
  border-color: rgba(244, 239, 224, 0.26);
  box-shadow: 0 0 22px rgba(244, 239, 224, 0.07), 0 8px 22px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.turn-bar[data-result] {
  border-color: rgba(214, 168, 75, 0.45);
  box-shadow: 0 0 26px rgba(214, 168, 75, 0.16), 0 8px 22px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.turn-chip { width: 22px; height: 22px; background: var(--disc-1); }
.turn-bar[data-turn="2"] .turn-chip { background: var(--disc-2); }
.turn-bar[data-result] .turn-chip {
  background: radial-gradient(circle at 34% 28%, #f7e3c4 0%, var(--gold) 55%, #a97f2c 100%);
}

.status {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: clamp(16px, 4.6vw, 22px);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  word-break: normal;
  color: var(--ember-bright);
  text-shadow: 0 0 22px rgba(240, 146, 17, 0.35);
}

.status[data-turn="2"] { color: var(--ivory); text-shadow: 0 0 22px rgba(244, 239, 224, 0.28); }
.status[data-result] { color: var(--gold-soft); text-shadow: 0 0 24px rgba(214, 168, 75, 0.35); }

/* the board's band: it takes whatever height is left and holds the board centred in it */
.stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px calc(8px + var(--safe-r)) 2px calc(8px + var(--safe-l));
  background: radial-gradient(76% 52% at 50% 50%, rgba(240, 146, 17, 0.07), rgba(240, 146, 17, 0) 70%);
}

.foot {
  flex: 0 0 auto;
  width: 100%;
  padding: 6px 12px calc(10px + var(--safe-b));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

/* the two players, named and lit in turn — readable from either end of the phone */
.players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 520px;
}

.player {
  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);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  transition: color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.player .chip { width: 16px; height: 16px; }

.pname {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.players .vs {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(107, 114, 128, 0.75);
}

.players[data-turn="1"] .player.p1,
.players[data-turn="2"] .player.p2 {
  color: var(--cream);
  border-color: rgba(240, 146, 17, 0.45);
  box-shadow: 0 0 16px rgba(240, 146, 17, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.players[data-turn="2"] .player.p2 {
  border-color: rgba(244, 239, 224, 0.42);
  box-shadow: 0 0 16px rgba(244, 239, 224, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.players[data-result] .player { color: var(--muted); border-color: rgba(255, 255, 255, 0.06); box-shadow: none; }
.players[data-result="1"] .player.p1,
.players[data-result="2"] .player.p2 {
  color: var(--gold-soft);
  border-color: rgba(214, 168, 75, 0.5);
  box-shadow: 0 0 18px rgba(214, 168, 75, 0.16);
}

.hint {
  margin: 0;
  max-width: 520px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.foot .credit { font-size: 11px; }

/* -------------------------------------------------------------------- board */

.board {
  display: flex;
  flex-direction: row;
  gap: 0;
  padding: 5px;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(180deg, #26241d 0%, var(--panel-2) 38%, #161514 100%);
  border: 1px solid rgba(214, 168, 75, 0.20);
  width: min(100%, 92vw);
  aspect-ratio: 7 / 6;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.65),
              0 0 34px rgba(240, 146, 17, 0.07),
              inset 0 1px 0 rgba(255, 255, 255, 0.07),
              inset 0 -2px 6px rgba(0, 0, 0, 0.5);
  touch-action: manipulation;
}

.col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  touch-action: manipulation;
}

.cell {
  flex: 1 1 0;
  position: relative;
  touch-action: manipulation;
}

/* an empty hole: a deep dark well, slightly lit on its lower rim so the grid of holes reads
   as a rack even in daylight. The well stays near-black, so both discs stand out of it. */
.hole {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #131a11 0%, #0f1310 55%, var(--hole) 100%);
  box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.95),
              inset 0 0 0 1px rgba(255, 255, 255, 0.035),
              inset 0 -2px 1px rgba(255, 255, 255, 0.05),
              0 1px 0 rgba(255, 255, 255, 0.04);
}

.disc {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  display: none;
  box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.45),
              inset 0 -5px 9px rgba(0, 0, 0, 0.32),
              0 3px 8px rgba(0, 0, 0, 0.45);
}

[data-disc="1"] > .disc { display: block; background: var(--disc-1); }
[data-disc="2"] > .disc { display: block; background: var(--disc-2); }

/* chosen-column hint: a lit column plus a ring on the spot the disc would land on */
.ghost {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  border: 3px solid rgba(247, 152, 20, 0.9);
  box-shadow: 0 0 14px rgba(240, 146, 17, 0.55), inset 0 0 10px rgba(240, 146, 17, 0.25);
  display: none;
  pointer-events: none;
}

.cell.drop-here > .ghost { display: block; }

.col.sel { background: linear-gradient(180deg, rgba(240, 146, 17, 0.20), rgba(240, 146, 17, 0.05)); }
.board[data-turn="2"] .col.sel { background: linear-gradient(180deg, rgba(244, 239, 224, 0.16), rgba(244, 239, 224, 0.04)); }
.board[data-turn="2"] .ghost {
  border-color: rgba(244, 239, 224, 0.9);
  box-shadow: 0 0 14px rgba(244, 239, 224, 0.4), inset 0 0 10px rgba(244, 239, 224, 0.2);
}

/* winning four: a static gold glow (never loops), with the rest of the board eased back */
[data-win] > .disc {
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(214, 168, 75, 0.8),
              inset 0 2px 3px rgba(255, 255, 255, 0.45);
}

/* the drop: one short fall that accelerates like gravity, then the disc sits still.
   Timing is finite (finite duration, one iteration) so reduced motion can switch it off
   outright and nothing is left animating once the board is idle. */
@media (prefers-reduced-motion: no-preference) {
  .disc.falling { animation: fall 340ms cubic-bezier(0.5, 0, 0.95, 0.6) 1; }
  @keyframes fall {
    from { transform: translateY(calc(var(--fall, 1) * -100%)); }
    to   { transform: translateY(0); }
  }
}

/* ---------------------------------------------------------------- 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 board still marks its win and nothing moves. */

/* the disc lands and the rack takes the hit: a short flare of heat. Only the glow
   moves, never the board's box, so the rack never shifts out from under a finger. */
@media (prefers-reduced-motion: no-preference) {
  .board.impact { animation: board-impact 380ms cubic-bezier(0.3, 0.9, 0.4, 1) 1; }
  @keyframes board-impact {
    0%   { box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 0 rgba(240,146,17,0); }
    22%  { box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 34px rgba(240,146,17,0.32); }
    100% { box-shadow: 0 18px 44px rgba(0,0,0,0.65), 0 0 34px rgba(240,146,17,0.07); }
  }

  /* the chosen spot rings once, so a tap is felt as well as seen */
  .cell.drop-here > .ghost { animation: ghost-pop 260ms ease-out 1; }
  @keyframes ghost-pop {
    0%   { transform: scale(0.6); opacity: 0.2; }
    55%  { transform: scale(1.16); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* the turn chip gives a nudge when a disc lands */
  .turn-chip.pop { animation: chip-pop 400ms ease-out 1; }
  @keyframes chip-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(1.28); }
    100% { transform: scale(1); }
  }

  /* the winning four light up one after the other, then sit glowing */
  .cell[data-win]::after {
    content: '';
    position: absolute;
    inset: 5%;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 0 2px rgba(214, 168, 75, 0.9), 0 0 18px 4px rgba(240, 146, 17, 0.42);
    animation: win-ring 820ms ease-out 1 both;
    animation-delay: calc(var(--wi, 0) * 110ms);
  }
  @keyframes win-ring {
    0%   { opacity: 0; transform: scale(0.5); }
    38%  { opacity: 1; transform: scale(1.3); }
    72%  { opacity: 0.9; transform: scale(0.97); }
    100% { opacity: 1; transform: scale(1.05); }
  }

  /* 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; }
  }
}

/* landscape: keep everything inside a short screen */
@media (orientation: landscape) and (max-height: 520px) {
  .hud { padding: calc(5px + var(--safe-t)) 12px 3px; }
  .turn-bar { min-height: 40px; padding: 6px 14px; border-radius: 15px; }
  .turn-chip { width: 18px; height: 18px; }
  .status { font-size: clamp(15px, 3.4vh, 19px); }
  .hint, .players { display: none; }
  .foot { padding-top: 3px; padding-bottom: calc(4px + var(--safe-b)); gap: 4px; }
  .btn.primary, .btn.new-game { padding: 10px 22px; font-size: 15px; }

  .start-inner { gap: 10px; padding-top: calc(8px + var(--safe-t)); padding-bottom: calc(8px + 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; }
}

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