/* Harf Avı — açık/koyu uçlardan uzak, mavi-adaçayı oyun masası */
:root {
  --ha59-ink: #193143;
  --ha59-muted: #607683;
  --ha59-paper: #dfe7e4;
  --ha59-paper-2: #cbd8d5;
  --ha59-line: #adbec0;
  --ha59-navy: #183547;
  --ha59-green: #26906d;
  --ha59-cyan: #2d9eb0;
  --ha59-gold: #d8aa45;
}

html,
body {
  background:
    radial-gradient(circle at 8% 16%, rgba(45,158,176,.16), transparent 27rem),
    radial-gradient(circle at 95% 8%, rgba(216,170,69,.14), transparent 25rem),
    linear-gradient(145deg, #bdcfd0, #d2dcda 48%, #afc5c5) !important;
  color: var(--ha59-ink) !important;
}

.app { width: min(1480px, calc(100% - 24px)) !important; }
.topbar {
  background: linear-gradient(120deg, #173448, #235466 58%, #316d72) !important;
  color: #f4f3ea !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 16px 40px rgba(17,47,61,.22) !important;
}
.brand h1,
.brand p { color: #f4f3ea !important; }
.brand p { opacity: .68; }
.logo { background: linear-gradient(145deg, #39b8bc, #2d8e9d) !important; }
.topbar .pill {
  background: rgba(224, 233, 229, .11) !important;
  color: #f1f3ed !important;
  border-color: rgba(224, 233, 229, .18) !important;
}
.v65-home-btn {
  background: linear-gradient(135deg, #1d4355, #2a6971) !important;
  border-color: rgba(255,255,255,.17) !important;
}

.card {
  background: linear-gradient(145deg, rgba(231, 236, 231, .97), rgba(207, 220, 216, .97)) !important;
  color: var(--ha59-ink) !important;
  border: 1px solid rgba(240, 244, 238, .82) !important;
  border-radius: 24px !important;
  box-shadow: 0 18px 46px rgba(26,59,70,.13) !important;
}

.hero-title { color: #183749 !important; }
.hero-title span {
  background: linear-gradient(90deg, #1c5263, #238e82 48%, #a87c27) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
.hero-text,
.footer-note,
.side p,
.kbd-hint { color: var(--ha59-muted) !important; }

.mode-btn,
#settingsBox,
.info,
.stat,
.legend,
.status,
.room-panel,
.multi-status-panel,
.roomInfoBox,
.players,
.multi-empty,
.multi-feature-strip {
  background: rgba(242, 244, 238, .66) !important;
  color: var(--ha59-ink) !important;
  border-color: var(--ha59-line) !important;
  box-shadow: 0 7px 18px rgba(25, 58, 71, .06) !important;
}
.mode-btn:hover { border-color: #4a9faa !important; }

.mini-board {
  justify-content: flex-start !important;
  background: linear-gradient(155deg, #d6e2df, #c1d3d0) !important;
}
.v59-harf-showcase {
  position: relative;
  isolation: isolate;
  flex: 0 0 204px;
  width: 100%;
  margin: 0 0 4px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(49, 125, 137, .32);
  border-radius: 20px;
  background:
    radial-gradient(circle at 70% 22%, rgba(216,170,69,.22), transparent 18rem),
    linear-gradient(145deg, #1a4051, #2b6871);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 14px 30px rgba(25,64,77,.16);
}
.v59-harf-showcase img {
  display: block;
  width: 100%;
  height: 196px;
  object-fit: contain;
  filter: drop-shadow(0 18px 16px rgba(5,25,34,.34));
}

.sample-cell {
  background: rgba(238, 242, 236, .88) !important;
  color: #21394a !important;
  border-color: #aebfc0 !important;
  box-shadow: 0 6px 14px rgba(28,62,73,.07) !important;
}
.sample-cell.green,
.cell.correct,
.cell.given,
.key.correct { background: linear-gradient(180deg, #3fb489, #247e61) !important; color: #fff !important; }
.sample-cell.yellow,
.cell.present,
.key.present { background: linear-gradient(180deg, #e7c467, #c89c36) !important; color: #263844 !important; }

.field input,
.field select,
.mobile-native-entry input {
  background: rgba(242, 244, 238, .92) !important;
  color: var(--ha59-ink) !important;
  border-color: #a7babc !important;
}
.field input:focus,
.field select:focus,
.mobile-native-entry input:focus {
  border-color: #3d99a6 !important;
  box-shadow: 0 0 0 4px rgba(45,158,176,.14) !important;
}

.primary,
.mobile-native-submit {
  background: linear-gradient(135deg, #287e69, #2f9fa8) !important;
  color: #fff !important;
}
.secondary { background: linear-gradient(135deg, #5c729e, #6d66a9) !important; color: #fff !important; }
.ghost { background: rgba(237, 241, 235, .76) !important; color: #264153 !important; border-color: #aebfc0 !important; }
.danger { background: #e6c4c2 !important; color: #7d353b !important; border-color: #ce9ea1 !important; }

.game-main,
.side,
.multi-game { background: linear-gradient(145deg, #e1e8e3, #ccd8d4) !important; }
.cell,
.key {
  background: rgba(240, 243, 237, .90) !important;
  color: #20384a !important;
  border-color: #aebfc0 !important;
}
.timer { color: #207d8c !important; }
.timer-bar { background: #afc1c2 !important; }
.timer-fill { background: linear-gradient(90deg, #2f9ead, #d4aa4f) !important; }
.side h2,
.stat b { color: #18384b !important; }

.modal-backdrop { background: rgba(16, 37, 50, .62) !important; }
.modal {
  background: linear-gradient(145deg, #e4e9e3, #ccd8d4) !important;
  color: var(--ha59-ink) !important;
  border-color: rgba(245,247,241,.80) !important;
}

@media (max-width: 1050px) {
  .v59-harf-showcase { flex-basis: 168px; }
  .v59-harf-showcase img { height: 160px; }
}

@media (max-width: 700px) {
  .app { width: calc(100% - 12px) !important; }
  .card { border-radius: 18px !important; }
  .v59-harf-showcase { flex-basis: 142px; border-radius: 16px; }
  .v59-harf-showcase img { height: 136px; }
}