/* V60 Harf Avı — gün ışığı alan premium bulmaca pavyonu */
:root {
  --ha60-ink: #0c2c44;
  --ha60-muted: #607480;
  --ha60-gold: #d4aa50;
  --ha60-teal: #188d91;
}

html,
body {
  background-image:
    linear-gradient(180deg, rgba(248,247,238,.05), rgba(5,25,39,.16)),
    url("./backgrounds/webp/harf-avi-pavilion.webp") !important;
  background-color: #c9d8d7 !important;
  color: var(--ha60-ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .18;
  background-image:
    linear-gradient(30deg, transparent 49.5%, rgba(10,73,87,.18) 50%, transparent 50.5%),
    linear-gradient(150deg, transparent 49.5%, rgba(194,145,45,.14) 50%, transparent 50.5%);
  background-size: 88px 52px;
}

.app {
  position: relative !important;
  z-index: 2 !important;
  width: min(1500px, calc(100% - 24px)) !important;
  gap: 14px !important;
}
.topbar {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(5,28,49,.97), rgba(10,55,69,.95), rgba(5,28,49,.97)) !important;
  border: 1px solid rgba(232, 202, 129, .42) !important;
  border-radius: 19px !important;
  box-shadow: 0 18px 46px rgba(2, 19, 30, .30), inset 0 -2px 0 rgba(215,170,75,.14) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
}
.logo {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important;
  color: #0b2c45 !important;
  background: linear-gradient(145deg, #f2dc9a, #bd8b31) !important;
  border: 2px solid #f2dda1 !important;
  box-shadow: 0 0 0 3px #0c3550, 0 0 0 5px rgba(237,207,139,.48), 0 10px 22px rgba(0,14,26,.27) !important;
}
.brand h1 {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .01em !important;
}
.brand p { color: #dfc982 !important; opacity: 1 !important; }
.topbar .pill,
.v65-home-btn {
  min-height: 40px !important;
  color: #f4f6f2 !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(232,201,126,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.v65-home-btn {
  padding-left: 13px !important;
  background-image: none !important;
}

.card {
  color: var(--ha60-ink) !important;
  background: linear-gradient(145deg, rgba(250,248,241,.92), rgba(211,224,221,.86)) !important;
  border: 1px solid rgba(255,255,255,.68) !important;
  border-radius: 27px !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(20px) saturate(1.06) !important;
}
.card-pad { padding: clamp(20px, 2.7vw, 38px) !important; }
.hero-title {
  color: #0a2b44 !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: clamp(50px, 6.3vw, 90px) !important;
  line-height: .88 !important;
  text-transform: uppercase !important;
  text-shadow: 0 9px 24px rgba(255,255,255,.30) !important;
}
.hero-title span {
  color: transparent !important;
  background: linear-gradient(90deg, #0d3c5b, #188d91 52%, #a67a27) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.hero-text,
.footer-note,
.side p,
.kbd-hint { color: var(--ha60-muted) !important; }

.mode-grid { gap: 13px !important; }
.mode-btn {
  position: relative !important;
  overflow: hidden !important;
  color: #10314a !important;
  background: linear-gradient(145deg, rgba(255,255,252,.82), rgba(216,229,225,.74)) !important;
  border: 1px solid rgba(142,166,167,.64) !important;
  box-shadow: 0 10px 23px rgba(10,50,61,.08), inset 0 1px 0 #fff !important;
}
.mode-btn::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,142,145,.19), transparent 68%);
}
.mode-btn:hover { border-color: #b48731 !important; box-shadow: 0 16px 34px rgba(10,50,61,.14) !important; }
.mode-btn strong { color: #0a2d46 !important; }
.mode-btn small { color: #657984 !important; }

.mini-board {
  justify-content: flex-start !important;
  padding: 18px !important;
  background: linear-gradient(145deg, rgba(6,35,56,.92), rgba(11,66,76,.87)) !important;
  border-color: rgba(231,198,118,.46) !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.v59-harf-showcase {
  flex: 0 0 258px !important;
  width: 100% !important;
  border: 1px solid rgba(231,198,118,.36) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 50% 28%, rgba(59,193,195,.20), transparent 30%),
    linear-gradient(145deg, rgba(3,27,48,.96), rgba(13,67,76,.92)) !important;
  box-shadow: 0 20px 42px rgba(0,16,27,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.v59-harf-showcase img {
  width: 100% !important;
  height: 250px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 23px 19px rgba(0,14,24,.45)) saturate(1.13) !important;
}
.sample-cell {
  background: linear-gradient(145deg, #fcfbf5, #d8e0df) !important;
  color: #17354a !important;
  border: 1px solid #c4a151 !important;
  box-shadow: inset 0 -5px 0 rgba(12,43,57,.11), 0 8px 18px rgba(1,24,34,.16) !important;
}
.sample-cell.green,
.cell.correct,
.cell.given,
.key.correct { background: linear-gradient(180deg, #41b899, #16785e) !important; color: #fff !important; border-color: #82d5bb !important; }
.sample-cell.yellow,
.cell.present,
.key.present { background: linear-gradient(180deg, #f0d17c, #c79531) !important; color: #173041 !important; border-color: #f2dc9b !important; }

#settingsBox,
.info,
.stat,
.legend,
.status,
.room-panel,
.multi-status-panel,
.roomInfoBox,
.players,
.multi-empty,
.multi-feature-strip {
  color: var(--ha60-ink) !important;
  background: rgba(251,250,244,.72) !important;
  border: 1px solid rgba(139,163,165,.55) !important;
  box-shadow: 0 8px 20px rgba(12,54,64,.07), inset 0 1px 0 #fff !important;
}
.field input,
.field select,
.mobile-native-entry input {
  color: #0b2d45 !important;
  background: rgba(255,255,251,.94) !important;
  border: 1px solid #9faeb1 !important;
  box-shadow: inset 0 2px 5px rgba(5,33,48,.055) !important;
}
.field input:focus,
.field select:focus,
.mobile-native-entry input:focus {
  border-color: #b48833 !important;
  box-shadow: 0 0 0 4px rgba(213,170,75,.18) !important;
}

.primary,
.mobile-native-submit {
  color: #fff !important;
  background: linear-gradient(115deg, #0b3b5d, #167f8b) !important;
  border: 1px solid #d2aa51 !important;
  box-shadow: 0 12px 25px rgba(5,44,61,.22), inset 0 -2px 0 rgba(212,170,80,.16) !important;
}
.primary::before,
.mobile-native-submit::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  background: url("./icons/play.svg") center/contain no-repeat;
}
.secondary { color: #fff !important; background: linear-gradient(135deg, #234a70, #326f83) !important; border: 1px solid rgba(226,194,113,.35) !important; }
.ghost { color: #17364b !important; background: rgba(250,250,245,.78) !important; border-color: #a9b8ba !important; }
.danger { color: #803b42 !important; background: #edd8d5 !important; border-color: #cc9fa0 !important; }

.game-main,
.side,
.multi-game {
  color: var(--ha60-ink) !important;
  background: linear-gradient(145deg, rgba(248,247,240,.92), rgba(208,221,217,.88)) !important;
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: var(--v60-shadow-card), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(19px) !important;
}
.cell,
.key {
  color: #17354a !important;
  background: linear-gradient(145deg, #fcfbf5, #dce3e1) !important;
  border: 1px solid #b89b58 !important;
  box-shadow: inset 0 -4px 0 rgba(14,43,55,.12), 0 7px 15px rgba(8,39,51,.12) !important;
}
.key:hover { border-color: #187f87 !important; }
.timer { color: #0f6073 !important; }
.timer-bar { background: #b7c5c5 !important; }
.timer-fill { background: linear-gradient(90deg, #168b91, #dfb85c, #cf6d5e) !important; }
.side h2,
.stat b { color: #0b2f49 !important; }

.modal-backdrop { background: rgba(4, 21, 35, .68) !important; }
.modal {
  color: var(--ha60-ink) !important;
  background: linear-gradient(145deg, rgba(248,247,240,.97), rgba(208,221,217,.96)) !important;
  border: 1px solid rgba(231,198,118,.62) !important;
  box-shadow: var(--v60-shadow-xl) !important;
}

@media (max-width: 1050px) {
  .app { width: calc(100% - 14px) !important; }
  .v59-harf-showcase { flex-basis: 185px !important; }
  .v59-harf-showcase img { height: 178px !important; }
}

@media (max-width: 700px) {
  .app { width: calc(100% - 8px) !important; padding: 6px !important; }
  .card { border-radius: 18px !important; }
  .v59-harf-showcase { flex-basis: 145px !important; border-radius: 16px !important; }
  .v59-harf-showcase img { height: 138px !important; }
  .hero-title { font-size: clamp(44px, 15vw, 66px) !important; }
}