* {
  box-sizing: border-box;
}

:root {
  --bg: #101214;
  --panel: #1b1f23;
  --panel2: #252a2f;
  --text: #f5f7f8;
  --muted: #a8b0b7;

  --border:
    rgba(
      255,
      255,
      255,
      0.09
    );

  --accent: #5db467;
  --danger: #d45b5b;

  --light: #d8d2c4;
  --dark: #70777e;

  --spring: #ff1493;
  --fall: #ff8c00;
  --rain: #1e90ff;
  --hurricane: #8c4bc2;
  --tornado: #111;
}


html,
body {
  margin: 0;

  min-height: 100%;
}


body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at top,
      #242a30 0,
      var(--bg) 48%
    );

  color:
    var(--text);

  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


button {
  font: inherit;
}


.hidden {
  display:
    none !important;
}


/* =========================================================
   FULL SCREEN LOBBY RAIN
========================================================= */

.rain-animation-layer {
  position: fixed;

  inset: 0;

  width: 100vw;
  height: 100vh;

  overflow: hidden;

  z-index: 0;

  pointer-events: none;

  opacity: 1;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}


.rain-animation-layer
.rain-lottie {
  position: absolute;

  display: block;

  width: 45vw;
  height: 115vh;

  top: -7vh;

  opacity: 0.6;

  pointer-events: none;
}


/* Far left */

.rain-animation-layer
.rain-1 {
  left: -12vw;

  transform:
    scale(1.25);
}


/* Left / centre */

.rain-animation-layer
.rain-2 {
  left: 8vw;

  top: -13vh;

  opacity: 0.48;

  transform:
    scale(1.15);
}


/* Centre */

.rain-animation-layer
.rain-3 {
  left: 29vw;

  top: -4vh;

  opacity: 0.56;

  transform:
    scale(1.3);
}


/* Centre / right */

.rain-animation-layer
.rain-4 {
  left: 49vw;

  top: -12vh;

  opacity: 0.48;

  transform:
    scale(1.16);
}


/* Right */

.rain-animation-layer
.rain-5 {
  left: 69vw;

  top: -5vh;

  opacity: 0.58;

  transform:
    scale(1.25);
}


/* Far right */

.rain-animation-layer
.rain-6 {
  left: 88vw;

  top: -14vh;

  opacity: 0.44;

  transform:
    translateX(-50%)
    scale(1.2);
}


/* Dark atmospheric overlay */

.rain-animation-layer::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 20;

  background:
    linear-gradient(
      to bottom,
      rgba(
        4,
        8,
        13,
        0.05
      ),
      rgba(
        4,
        8,
        13,
        0.18
      )
    );

  pointer-events: none;
}


/*
  Hide rain when the online game is displayed.
*/

body:has(#lobby.hidden)
.rain-animation-layer {
  opacity: 0;

  visibility: hidden;
}


/*
  Hide lobby rain while tutorial is open.
*/

body.tutorial-open
.rain-animation-layer {
  opacity: 0;

  visibility: hidden;
}


/* =========================================================
   MAIN APP
========================================================= */

.app-shell {
  position: relative;

  z-index: 2;

  width:
    min(
      1240px,
      100%
    );

  margin:
    0 auto;

  padding:
    22px;
}


/* =========================================================
   TOP BAR
========================================================= */

.topbar {
  position: relative;

  display: flex;

  justify-content: center;
  align-items: flex-start;

  width: 100%;

  gap: 18px;

  margin-bottom: 22px;
}


/* =========================================================
   RAINSFALL BRAND — CENTER TOP
========================================================= */

.brand-block {
  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  text-align: center;

  gap: 0;

  margin:
    0 auto;
}


/*
  The crop controls the amount of layout space
  while the actual PNG stays at 800px.
*/

.rainsfall-logo-crop {
  position: relative;

  width: 400px;
  height: 290px;

  overflow: hidden;

  margin:
    0 auto -2px;
}


/*
  Actual logo stays 800px.
*/

.rainsfall-logo {
  position: absolute;

  width: 800px;
  height: auto;

  max-width: none;

  left: 50%;
  top: 50%;

  transform:
    translate(
      -50%,
      -50%
    );

  object-fit: contain;

  filter:
    drop-shadow(
      0 6px 14px
      rgba(
        0,
        0,
        0,
        0.35
      )
    );
}


.topbar h1,
.brand-block h1 {
  margin: 0;

  line-height: 1;

  text-align: center;

  font-size:
    clamp(
      1.8rem,
      4vw,
      2.6rem
    );
}


.topbar p,
.brand-block p {
  margin:
    4px 0 0;

  color:
    var(--muted);

  text-align: center;
}


/*
  Connection indicator remains at the top-right
  and does not affect the centered brand.
*/

#connectionStatus {
  position: absolute;

  top: 0;
  right: 0;
}


.connection {
  padding:
    8px 13px;

  border-radius:
    999px;

  background:
    #343a40;

  font-size:
    0.82rem;

  font-weight:
    800;
}


.connection.online {
  color:
    #94e89b;

  background:
    rgba(
      80,
      190,
      90,
      0.16
    );
}


.connection.offline {
  color:
    #ff9797;

  background:
    rgba(
      255,
      80,
      80,
      0.14
    );
}


/* =========================================================
   PANELS
========================================================= */

.panel {
  background:
    rgba(
      27,
      31,
      35,
      0.96
    );

  border:
    1px solid
    var(--border);

  border-radius:
    16px;

  box-shadow:
    0 18px 60px
    rgba(
      0,
      0,
      0,
      0.25
    );
}


/* =========================================================
   LOBBY
========================================================= */

.lobby {
  width:
    min(
      460px,
      100%
    );

  margin:
    80px auto;

  padding:
    34px;

  text-align:
    center;
}


.lobby h2 {
  margin-top: 0;
}


.lobby button {
  width: 100%;

  padding:
    15px 20px;

  border: 0;

  border-radius:
    12px;

  background:
    var(--accent);

  color:
    white;

  font-weight:
    850;

  cursor:
    pointer;
}


.lobby button.searching {
  background:
    #a44d4d;
}


.hint {
  color:
    var(--muted);

  line-height:
    1.5;
}


.hint.small {
  font-size:
    0.84rem;

  margin-top: 0;
}


.error {
  color:
    #ff8383;

  min-height:
    20px;

  font-size:
    0.9rem;
}


.muted {
  color:
    var(--muted);
}


/* =========================================================
   GAME LAYOUT
========================================================= */

.game-layout {
  display: grid;

  grid-template-columns:
    minmax(
      0,
      760px
    )
    minmax(
      270px,
      330px
    );

  gap: 24px;

  align-items:
    start;

  justify-content:
    center;
}


.board-column {
  min-width: 0;
}


/* =========================================================
   PLAYER CARDS
========================================================= */

.player-card {
  min-height:
    54px;

  display: flex;

  align-items:
    center;

  justify-content:
    space-between;

  margin:
    9px 0;

  padding:
    10px 14px;

  background:
    var(--panel);

  border:
    1px solid
    var(--border);

  border-radius:
    12px;

  font-weight:
    750;
}


.dot {
  display:
    inline-block;

  width: 9px;
  height: 9px;

  margin-right: 8px;

  border-radius:
    50%;

  background:
    #666;
}


.dot.online {
  background:
    #55d166;

  box-shadow:
    0 0 8px
    rgba(
      85,
      209,
      102,
      0.75
    );
}


.player-meta {
  display: flex;

  align-items:
    end;

  flex-direction:
    column;

  gap: 2px;
}


.player-meta span {
  font-size:
    0.78rem;

  color:
    var(--muted);

  font-weight:
    600;
}

/* =========================================================
   PLAYER TIMERS
========================================================= */

.player-card-info {
  display: flex;

  align-items: center;

  gap: 18px;

  min-width: 0;
}


.player-name {
  display: flex;

  align-items: center;

  white-space: nowrap;
}


.player-timer {
  margin-left: auto;

  min-width: 72px;

  padding:
    9px 12px;

  text-align: center;

  border-radius: 10px;

  background:
    var(--panel2);

  color:
    var(--text);

  font-weight: 900;

  font-variant-numeric:
    tabular-nums;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );
}


/*
  Player whose turn it is.
*/

.player-timer.active {
  border-color:
    rgba(
      93,
      180,
      103,
      0.65
    );

  box-shadow:
    0 0 0 2px
    rgba(
      93,
      180,
      103,
      0.10
    );
}


/*
  Last 10 seconds.
*/

.player-timer.low {
  background:
    rgba(
      210,
      66,
      66,
      0.22
    );

  color:
    #ff8f8f;

  border-color:
    rgba(
      255,
      120,
      120,
      0.55
    );
}

/* =========================================================
   BOARD
========================================================= */

.board-wrap {
  position:
    relative;
}

/* =========================================================
   WIN / LOSE BOARD OVERLAY
========================================================= */

.result-overlay {
  position: absolute;

  inset: 0;

  z-index: 50;

  display: flex;

  align-items: center;
  justify-content: center;

  pointer-events: none;

  background:
    rgba(
      0,
      0,
      0,
      0.38
    );

  backdrop-filter:
    blur(2px);
}


.result-text {
  padding:
    22px 38px;

  border-radius:
    18px;

  font-size:
    clamp(
      3rem,
      9vw,
      7rem
    );

  font-weight: 1000;

  line-height: 1;

  letter-spacing:
    0.06em;

  text-align: center;

  color:
    white;

  text-shadow:
    0 5px 20px
    rgba(
      0,
      0,
      0,
      0.7
    );

  animation:
    resultPop 0.45s ease-out;
}


/* YOU WIN */

.result-overlay.win
.result-text {
  color:
    #9cffaa;

  background:
    rgba(
      26,
      110,
      46,
      0.88
    );

  border:
    3px solid
    #76e68a;

  box-shadow:
    0 0 40px
    rgba(
      83,
      220,
      105,
      0.42
    );
}


/* YOU LOSE */

.result-overlay.lose
.result-text {
  color:
    #ffb0b0;

  background:
    rgba(
      126,
      30,
      30,
      0.88
    );

  border:
    3px solid
    #ff7474;

  box-shadow:
    0 0 40px
    rgba(
      255,
      70,
      70,
      0.40
    );
}


@keyframes resultPop {

  0% {
    opacity: 0;

    transform:
      scale(0.65);
  }

  70% {
    transform:
      scale(1.08);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);
  }

}

.board {
  width:
    100%;

  aspect-ratio:
    1 / 1;

  display:
    grid;

  grid-template-columns:
    repeat(
      10,
      1fr
    );

  overflow:
    hidden;

  border-radius:
    12px;

  box-shadow:
    0 18px 60px
    rgba(
      0,
      0,
      0,
      0.4
    );

  user-select:
    none;

  touch-action:
    manipulation;
}


.square {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-width:
    0;

  padding:
    0;

  border:
    0;

  aspect-ratio:
    1 / 1;

  overflow:
    hidden;
}


.square.light {
  background:
    var(--light);
}


.square.dark {
  background:
    var(--dark);
}


/* Selected source */

.square.selected-source::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  box-shadow:
    inset 0 0 0 4px
    #ffe45c;

  z-index:
    5;

  pointer-events:
    none;
}


/* Legal movement target */

.square.move-target::before {
  content: "";

  position:
    absolute;

  width:
    25%;

  height:
    25%;

  border-radius:
    50%;

  background:
    rgba(
      63,
      196,
      88,
      0.78
    );

  z-index:
    4;
}


/* Occupied legal movement target */

.square.move-target.occupied::before {
  width:
    80%;

  height:
    80%;

  background:
    transparent;

  border:
    4px solid
    rgba(
      63,
      196,
      88,
      0.82
    );
}


/* Deployment target */

.square.deploy-target::before {
  content: "";

  position:
    absolute;

  inset:
    7%;

  border:
    3px dashed
    rgba(
      255,
      255,
      255,
      0.7
    );

  border-radius:
    10px;

  z-index:
    3;
}


/* =========================================================
   STARS
========================================================= */

.star {
  position:
    absolute;

  z-index:
    1;

  font-size:
    clamp(
      1.1rem,
      4vw,
      3rem
    );

  opacity:
    0.48;

  text-shadow:
    0 1px 3px
    rgba(
      0,
      0,
      0,
      0.3
    );

  pointer-events:
    none;
}


.star-S {
  color:
    #111;
}


.star-N {
  color:
    #fff;
}


/* =========================================================
   PNG GAME PIECES
========================================================= */

.game-piece {
  position: relative;

  z-index: 6;

  width: 82%;
  height: 82%;

  display: flex;

  align-items: center;
  justify-content: center;

  padding: 2px;

  border-radius:
    50%;

  border:
    3px solid
    #555;

  cursor:
    grab;

  user-select:
    none;

  -webkit-user-select:
    none;

  background:
    rgba(
      255,
      255,
      255,
      0.88
    );

  box-shadow:
    0 4px 10px
    rgba(
      0,
      0,
      0,
      0.38
    );

  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease;
}


.game-piece:active {
  cursor:
    grabbing;
}


/*
  North pieces use a darker base.
*/

.game-piece.owner-N {
  background:
    rgba(
      18,
      20,
      24,
      0.94
    );
}


/*
  Actual PNG artwork.
*/

.game-piece-image {
  display:
    block;

  width: 90%;
  height: 90%;

  object-fit:
    contain;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 2px 3px
      rgba(
        0,
        0,
        0,
        0.32
      )
    );
}


.square:hover
.game-piece {
  transform:
    scale(1.04);
}

/* =========================================================
   DEPLOY PANEL DIRECTLY UNDER THE BOARD
========================================================= */

.board-tray-panel {
  margin: 12px 0 9px;
  padding: 18px;
}


/* =========================================================
   PIECE CLASS COLOURS
========================================================= */

.game-piece.class-spring {
  border-color:
    var(--spring);
}


.game-piece.class-fall {
  border-color:
    var(--fall);
}


.game-piece.class-rain {
  border-color:
    var(--rain);
}


.game-piece.class-hurricane {
  border-color:
    var(--hurricane);
}


.game-piece.class-tornado {
  border-color:
    var(--tornado);
}


/* =========================================================
   TORNADO SPECIAL STATES
========================================================= */

.game-piece.class-tornado[
  data-mode="corner"
] {
  border-style:
    dashed;
}


.game-piece.class-tornado[
  data-size="2"
] {
  width:
    90%;

  height:
    90%;

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      255,
      255,
      0.13
    ),

    0 5px 12px
    rgba(
      0,
      0,
      0,
      0.44
    );
}


/* Selected board piece */

.square.selected-source
.game-piece {
  transform:
    scale(1.08);

  box-shadow:
    0 0 0 3px
    rgba(
      255,
      228,
      92,
      0.85
    ),

    0 0 18px
    rgba(
      255,
      228,
      92,
      0.55
    );
}


/* =========================================================
   BOARD COORDINATES
========================================================= */

.coord-rank,
.coord-file {
  position:
    absolute;

  z-index:
    10;

  font-size:
    clamp(
      0.4rem,
      1vw,
      0.65rem
    );

  font-weight:
    850;

  pointer-events:
    none;

  opacity:
    0.8;
}


.coord-rank {
  top:
    2px;

  left:
    3px;
}


.coord-file {
  right:
    3px;

  bottom:
    1px;
}


.square.light
.coord-rank,

.square.light
.coord-file {
  color:
    #414141;
}


.square.dark
.coord-rank,

.square.dark
.coord-file {
  color:
    #f1f1f1;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
  display:
    flex;

  flex-direction:
    column;

  gap:
    15px;
}


.sidebar .panel {
  padding:
    18px;
}


.eyebrow {
  color:
    var(--muted);

  text-transform:
    uppercase;

  letter-spacing:
    0.09em;

  font-size:
    0.72rem;

  font-weight:
    850;
}


.status-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;
}


.status-row h2 {
  margin:
    8px 0 7px;

  font-size:
    1.25rem;
}


.timer {
  min-width:
    64px;

  text-align:
    center;

  padding:
    9px 10px;

  border-radius:
    10px;

  background:
    var(--panel2);

  font-weight:
    900;

  font-variant-numeric:
    tabular-nums;
}


.timer.low {
  background:
    rgba(
      210,
      66,
      66,
      0.22
    );

  color:
    #ff8f8f;
}


.status-panel button {
  width:
    100%;

  margin-top:
    9px;

  padding:
    11px 13px;

  border:
    0;

  border-radius:
    10px;

  cursor:
    pointer;

  font-weight:
    750;
}

/* =========================================================
   REMATCH
========================================================= */

.rematch-actions {
  margin-top: 12px;
}


.rematch-actions p {
  margin:
    0 0 10px;

  text-align: center;

  color:
    var(--muted);
}


.rematch-buttons {
  display: flex;

  gap: 8px;
}


.rematch-buttons button {
  flex: 1;

  width: auto;
}

.secondary {
  background:
    #343a40;

  color:
    #f5f5f5;
}


.secondary:hover:not(
  :disabled
) {
  background:
    #444c54;
}


.secondary:disabled {
  opacity:
    0.4;

  cursor:
    not-allowed;
}


#returnBtn.ready {
  outline:
    2px solid
    #478ddd;

  box-shadow:
    0 0 12px
    rgba(
      71,
      141,
      221,
      0.3
    );
}


.danger-btn {
  color:
    #ffcaca;
}


/* =========================================================
   DEPLOYMENT TRAY
========================================================= */

.tray-heading {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;
}


.tray-heading h3 {
  margin:
    0;
}


.reserve-label {
  color:
    var(--muted);

  font-size:
    0.86rem;
}


/* =========================================================
   PNG DEPLOY PIECES
========================================================= */

.piece-tray {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap:
    8px;

  margin-top:
    12px;
}


.tray-piece {
  position:
    relative;

  min-width:
    0;

  min-height:
    74px;

  padding:
    5px;

  border-radius:
    12px;

  border:
    2px solid
    #555;

  background:
    rgba(
      44,
      49,
      54,
      0.92
    );

  color:
    #fff;

  cursor:
    pointer;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}


.tray-piece:hover:not(
  :disabled
) {
  transform:
    translateY(-2px)
    scale(1.04);

  background:
    #383f45;
}


.tray-piece:active:not(
  :disabled
) {
  transform:
    scale(0.97);
}


.tray-piece:disabled {
  opacity:
    0.35;

  cursor:
    not-allowed;
}


.tray-piece.selected {
  background:
    #424a51;

  box-shadow:
    inset 0 0 0 2px
    rgba(
      255,
      255,
      255,
      0.9
    ),

    0 0 16px
    rgba(
      255,
      255,
      255,
      0.12
    );
}


/*
  Actual PNG inside Deploy tray.
*/

.tray-piece-image {
  display:
    block;

  width:
    58px;

  height:
    58px;

  max-width:
    100%;

  object-fit:
    contain;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 3px 4px
      rgba(
        0,
        0,
        0,
        0.35
      )
    );
}


.tray-piece.class-spring {
  border-color:
    var(--spring);
}


.tray-piece.class-fall {
  border-color:
    var(--fall);
}


.tray-piece.class-rain {
  border-color:
    var(--rain);
}


.tray-piece.class-hurricane {
  border-color:
    var(--hurricane);
}


.tray-piece.class-tornado {
  border-color:
    var(--tornado);
}


/* =========================================================
   CANCEL DEPLOY BUTTON
========================================================= */

.text-button {
  width:
    100%;

  border:
    0;

  margin-top:
    9px;

  background:
    transparent;

  color:
    var(--muted);

  cursor:
    pointer;

  font-size:
    0.8rem;
}


.text-button:disabled {
  opacity:
    0.3;

  cursor:
    default;
}


/* =========================================================
   MATCH LOG / HELP
========================================================= */

.moves-panel h3,
.help-panel h3 {
  margin-top:
    0;
}


.move-list {
  max-height:
    260px;

  overflow-y:
    auto;

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  font-size:
    0.86rem;

  line-height:
    1.4;
}


.move-list > div {
  padding-bottom:
    7px;

  border-bottom:
    1px solid
    var(--border);
}


.help-panel p {
  color:
    var(--muted);

  font-size:
    0.88rem;

  line-height:
    1.5;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (
  max-width:
    940px
) {

  .game-layout {
    grid-template-columns:
      minmax(
        0,
        760px
      );
  }


  .sidebar {
    display:
      grid;

    grid-template-columns:
      1fr 1fr;
  }


  .status-panel,
  .tray-panel {
    grid-column:
      auto;
  }

}


/* =========================================================
   MOBILE RAIN
========================================================= */

@media (
  max-width:
    700px
) {

  .rain-animation-layer
  .rain-lottie {
    width:
      70vw;

    height:
      115vh;
  }


  .rain-animation-layer
  .rain-1 {
    left:
      -28vw;
  }


  .rain-animation-layer
  .rain-2 {
    left:
      3vw;
  }


  .rain-animation-layer
  .rain-3 {
    left:
      35vw;
  }


  .rain-animation-layer
  .rain-4 {
    left:
      67vw;
  }


  .rain-animation-layer
  .rain-5,

  .rain-animation-layer
  .rain-6 {
    display:
      none;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (
  max-width:
    650px
) {

  .app-shell {
    padding:
      10px;
  }


  /*
    Keep cropped logo centered.
  */

  .rainsfall-logo-crop {
    width:
      320px;

    height:
      230px;
  }


  .rainsfall-logo {
    width:
      700px;
  }


  #connectionStatus {
    top:
      8px;

    right:
      8px;
  }


  .topbar p {
    font-size:
      0.8rem;
  }


  .lobby {
    margin:
      45px auto;

    padding:
      24px 18px;
  }


  .sidebar {
    grid-template-columns:
      1fr;
  }


  .game-piece {
    width:
      84%;

    height:
      84%;

    border-width:
      2px;
  }


  .game-piece-image {
    width:
      92%;

    height:
      92%;
  }


  .piece-tray {
    gap:
      5px;
  }


  .tray-piece {
    min-height:
      58px;

    padding:
      3px;
  }


  .tray-piece-image {
    width:
      46px;

    height:
      46px;
  }

}