*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background: #0f1216;
  color: #f5f7fa;
}

.online-lobby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 24px 32px 8px;
}

.lobby-panel {
  background: #13171d;
  border-radius: 16px;
  padding: 18px;
  border: 1px solid #1f2630;
  display: grid;
  gap: 12px;
}

.lobby-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.lobby-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.lobby-status {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #9aa6b2;
}

.room-meta {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #9aa6b2;
}

.roster {
  display: grid;
  gap: 8px;
  font-size: 13px;
}

.roster-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #0f141a;
  border: 1px solid #1f2630;
}

.online-connected .online-lobby {
  display: none;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px 12px;
  border-bottom: 1px solid #1c222b;
}

.app-header h1 {
  margin: 0 0 4px;
  font-size: 28px;
}

.subtle {
  margin: 0;
  color: #9aa6b2;
  font-size: 14px;
}

.status-panel {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #171c22;
  min-width: 220px;
}

.status-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.status-row .label {
  color: #8ea0b2;
}

.status-row .value {
  font-weight: 600;
}

.win-banner {
  position: sticky;
  top: 0;
  margin: 0 32px 8px;
  padding: 12px 16px;
  text-align: center;
  border-radius: 12px;
  border: 1px solid #273141;
  background: linear-gradient(90deg, #1b2230, #242c3c);
  color: #f5f7fa;
  font-weight: 700;
  letter-spacing: 0.5px;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
}

.win-banner--show {
  opacity: 1;
  transform: translateY(0);
}

.game-layout {
  display: grid;
  grid-template-columns: 220px 1fr 220px;
  grid-template-rows: auto 1fr auto;
  gap: 16px;
  padding: 24px 32px 12px;
}

.player-panel {
  background: #13171d;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid #1f2630;
  display: grid;
  gap: 12px;
  min-height: 140px;
}

.player-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.player-panel h2 {
  margin: 0;
  font-size: 16px;
}

.rack-sort-mode {
  max-width: 140px;
  font-size: 12px;
}

.player-panel--north {
  grid-column: 1 / 4;
}

.player-panel--south {
  grid-column: 1 / 4;
}

.player-panel--west {
  grid-row: 2;
}

.player-panel--east {
  grid-row: 2;
}

.board-panel {
  grid-row: 2;
  grid-column: 2;
  background: #101419;
  border-radius: 20px;
  border: 1px solid #1f2630;
  padding: 16px;
  display: grid;
  gap: 12px;
  min-height: 360px;
}

.board-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.board-header h2 {
  margin: 0;
}

.board-actions {
  display: flex;
  gap: 8px;
}

.board {
  background: #0f141a;
  border-radius: 16px;
  border: 1px dashed #263140;
  min-height: 220px;
  padding: 16px;
  display: grid;
  gap: 10px;
}

.board--locked {
  pointer-events: none;
  opacity: 0.6;
}

.board-row-empty {
  color: #6f7d8c;
  font-size: 12px;
}

.board-placeholder {
  color: #6f7d8c;
  font-size: 13px;
}

.meld-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.meld {
  border-radius: 12px;
  border: 1px dashed #2c3542;
  padding: 8px;
  display: grid;
  gap: 8px;
  background: #0f141a;
}

.meld--empty {
  color: #6f7d8c;
  text-align: center;
}

.meld-empty {
  font-size: 12px;
}

.meld--over {
  border-color: #8aa6ff;
  box-shadow: 0 0 0 2px rgba(138, 166, 255, 0.25);
}

.meld--invalid {
  border-color: #ff6b6b;
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.25);
}

.meld-label {
  font-size: 12px;
  color: #9aa6b2;
}

.meld-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 44px;
}

.board-footer {
  display: flex;
  justify-content: space-between;
  color: #9aa6b2;
  font-size: 13px;
}


.rack {
  display: grid;
  gap: 8px;
}

.rack-label {
  color: #9aa6b2;
  font-size: 12px;
}

.rack-tiles {
  min-height: 60px;
  border-radius: 12px;
  border: 1px dashed #2c3542;
  background: #0f141a;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rack-tiles--hidden {
  justify-content: center;
  align-items: center;
}

.rack-tiles--locked {
  pointer-events: none;
  opacity: 0.6;
}

.rack-hidden {
  color: #6f7d8c;
  font-size: 13px;
}

.rack-tiles--over {
  border-color: #8aa6ff;
  box-shadow: 0 0 0 2px rgba(138, 166, 255, 0.25);
}

.rack--vertical .rack-tiles {
  min-height: 140px;
}

.tile {
  border-radius: 8px;
  border: 1px solid #2b3542;
  background: #1a222c;
  color: #f5f7fa;
  min-width: 36px;
  height: 44px;
  font-weight: 700;
}

.tile--red {
  border-color: rgba(238, 90, 90, 0.7);
  color: #ff9b9b;
}

.tile--blue {
  border-color: rgba(61, 125, 255, 0.7);
  color: #9bbcff;
}

.tile--black {
  border-color: rgba(180, 180, 180, 0.6);
  color: #e2e6ea;
}

.tile--orange {
  border-color: rgba(255, 159, 67, 0.7);
  color: #ffd0a1;
}

.tile--joker {
  border-style: dashed;
  color: #f5f7fa;
}

.tile--selected {
  outline: 2px solid #8aa6ff;
}

.tile--placed {
  box-shadow: 0 0 0 2px rgba(138, 166, 255, 0.25);
}

.settings-panel {
  padding: 16px 32px 32px;
  border-top: 1px solid #1c222b;
}

.settings-panel h2 {
  margin: 0 0 12px;
}

.settings-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.settings-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.mode-button {
  background: #151b22;
  border-color: #2b3542;
  font-size: 13px;
}

.mode-button.is-active {
  border-color: #8aa6ff;
  box-shadow: 0 0 0 2px rgba(138, 166, 255, 0.25);
}

label {
  display: grid;
  gap: 6px;
  font-size: 13px;
  color: #9aa6b2;
}

select,
button,
input {
  background: #1f2732;
  color: #f5f7fa;
  border: 1px solid #2b3542;
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

button:hover {
  border-color: #3b4757;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: #2b3542;
}

@media (max-width: 1100px) {
  .game-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }

  .player-panel--north,
  .player-panel--south,
  .player-panel--west,
  .player-panel--east,
  .board-panel {
    grid-column: 1;
    grid-row: auto;
  }
}