/* V60 Son Harf — altın zincirli kariyer salonu */
:root {
  --sh60-ink: #0b2b43;
  --sh60-muted: #5d717b;
  --sh60-gold: #d5aa4d;
  --sh60-teal: #168894;
}

html,
body {
  background-image:
    linear-gradient(180deg, rgba(249,244,230,.05), rgba(3,20,34,.20)),
    url("./backgrounds/webp/son-harf-hall.webp") !important;
  background-color: #c7d2d0 !important;
  color: var(--sh60-ink) !important;
}
.sh-shell {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background:
    repeating-linear-gradient(90deg, transparent 0 99px, rgba(190,142,43,.18) 100px),
    linear-gradient(180deg, transparent 42%, rgba(4,39,57,.18) 100%);
}

.sh-nav {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(4,25,45,.97), rgba(9,53,68,.95), rgba(4,25,45,.97)) !important;
  border: 1px solid rgba(232, 201, 125, .43) !important;
  border-radius: 19px !important;
  box-shadow: 0 18px 46px rgba(1, 17, 29, .31), inset 0 -2px 0 rgba(215,170,75,.15) !important;
  backdrop-filter: blur(22px) saturate(1.08) !important;
}
.sh-brand {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}
.sh-brand em { color: #efd184 !important; }
.sh-back,
.sh-nav-actions button,
.sh-avatar {
  min-height: 41px !important;
  color: #f4f5f1 !important;
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(231,200,124,.24) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
}
.sh-back {
  padding-left: 14px !important;
  background-image: none !important;
}
.sh-avatar {
  border-radius: 50% !important;
  border-color: #d7ae55 !important;
  box-shadow: 0 0 0 3px rgba(10,48,70,.72), 0 0 0 5px rgba(235,205,132,.45) !important;
}
.sh-brand-icon {
  display: inline-block !important;
  width: 24px !important;
  height: 24px !important;
  flex: 0 0 24px !important;
  font-size: 0 !important;
  background: url("./icons/chain.svg") center/contain no-repeat !important;
}
.sh-nav-actions button { font-size: 0 !important; }
.sh-nav-actions button::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  background: url("./icons/info.svg") center/contain no-repeat;
}
.sh-nav-actions button[aria-label="Başarılar"]::before { background-image: url("./icons/trophy.svg"); }
.sh-nav-actions button[aria-label="Tema"]::before { background-image: url("./icons/settings.svg"); }

.sh-main { width: min(1500px, calc(100% - 24px)) !important; }
.sh-hero {
  min-height: 302px !important;
  padding: clamp(22px, 3vw, 42px) !important;
  border: 1px solid rgba(255,255,255,.52) !important;
  border-radius: 30px !important;
  background: linear-gradient(105deg, rgba(248,246,238,.90), rgba(225,229,221,.76) 58%, rgba(8,42,61,.36)) !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(18px) saturate(1.06) !important;
}
.eyebrow { color: #9a7026 !important; letter-spacing: .18em !important; }
.sh-hero h1 {
  color: #0a2b44 !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: clamp(55px, 7vw, 104px) !important;
  line-height: .82 !important;
  text-transform: uppercase !important;
  text-shadow: 0 9px 24px rgba(255,255,255,.35) !important;
}
.sh-hero h1 span {
  color: transparent !important;
  background: linear-gradient(90deg, #0c3b58, #158896 54%, #aa7c26) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}
.sub { color: #4f6875 !important; max-width: 62ch !important; }

.sh-chain {
  display: flex !important;
  min-height: 250px !important;
  border: 1px solid rgba(232,199,118,.46) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(229,188,84,.19), transparent 30%),
    linear-gradient(145deg, rgba(4,29,50,.94), rgba(14,66,75,.87)) !important;
  box-shadow: 0 22px 50px rgba(0,16,27,.30), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(213,170,75,.16) !important;
}
.sh-chain-svg { display: none !important; }
.v59-son-harf-art {
  display: block !important;
  width: 100% !important;
  height: 245px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 24px 20px rgba(0,13,23,.47)) saturate(1.16) !important;
}
.sh-mode-card {
  color: #f4f5f1 !important;
  background: linear-gradient(145deg, rgba(5,29,50,.94), rgba(12,60,71,.90)) !important;
  border: 1px solid rgba(232,200,123,.43) !important;
  box-shadow: 0 18px 40px rgba(0,17,29,.27), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.sh-mode-card strong { color: #fff !important; }
.sh-mode-card small { color: #c7d6d7 !important; }
.sh-mode-icon {
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #0b2d46 !important;
  background: linear-gradient(145deg,#efd794,#bd8930) !important;
  border: 2px solid #f2dda1 !important;
  box-shadow: 0 0 0 3px #0d3550, 0 10px 22px rgba(0,16,28,.28) !important;
}
.sh-active { color: #91dcc8 !important; }

.sh-tabs {
  padding: 7px !important;
  border: 1px solid rgba(231,198,118,.39) !important;
  border-radius: 18px !important;
  background: linear-gradient(90deg, rgba(4,27,48,.95), rgba(11,58,70,.92)) !important;
  box-shadow: 0 14px 32px rgba(0,18,31,.22) !important;
}
.sh-tabs .tab {
  color: #d2ddde !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.sh-tabs .tab.active {
  color: #0b2c45 !important;
  background: linear-gradient(180deg, #f0d791, #c49336) !important;
  border-color: #f4dfa5 !important;
  box-shadow: 0 9px 20px rgba(169,113,24,.22), inset 0 1px 0 rgba(255,255,255,.50) !important;
}

.panel,
.sh-setup-card {
  color: var(--sh60-ink) !important;
  background: linear-gradient(145deg, rgba(249,247,240,.92), rgba(210,223,219,.87)) !important;
  border: 1px solid rgba(255,255,255,.69) !important;
  border-radius: 24px !important;
  box-shadow: var(--v60-shadow-card), inset 0 1px 0 rgba(255,255,255,.74) !important;
  backdrop-filter: blur(19px) saturate(1.05) !important;
}
.sh-section-title {
  padding-bottom: 13px !important;
  border-bottom: 1px solid rgba(158,121,45,.30) !important;
}
.sh-section-title > span {
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  color: #0b2c45 !important;
  background: linear-gradient(145deg,#efd794,#c08e34) !important;
  box-shadow: 0 0 0 3px rgba(11,49,72,.13), 0 8px 18px rgba(157,105,24,.17) !important;
}
.sh-section-title h2 { color: #0a2d46 !important; font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important; text-transform: uppercase !important; }
.sh-settings-grid label,
.sh-online-grid label,
.sh-extra-pc label,
.wordbox small,
.sh-prefix-box small,
.sh-input-label { color: var(--sh60-muted) !important; }
.sh-setup-card input,
.sh-setup-card select,
.form input {
  color: #0c2d45 !important;
  background: rgba(255,255,251,.95) !important;
  border: 1px solid #9fadaf !important;
  box-shadow: inset 0 2px 5px rgba(4,31,46,.055) !important;
}
.sh-setup-card input:focus,
.sh-setup-card select:focus,
.form input:focus {
  border-color: #b48832 !important;
  box-shadow: 0 0 0 4px rgba(213,170,75,.18) !important;
}
.btn {
  color: #fff !important;
  background: linear-gradient(115deg, #0a3858, #137b86) !important;
  border: 1px solid #d1a94e !important;
  box-shadow: 0 12px 25px rgba(4,41,58,.22), inset 0 -2px 0 rgba(213,170,75,.15) !important;
}
.btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 7px;
  vertical-align: -3px;
  background: url("./icons/play.svg") center/contain no-repeat;
}
.btn2 {
  color: #15364a !important;
  background: rgba(251,250,245,.80) !important;
  border-color: #a7b7b7 !important;
}

.sh-game-card {
  background:
    radial-gradient(circle at 82% 5%, rgba(215,170,75,.15), transparent 22rem),
    linear-gradient(145deg, rgba(249,247,240,.94), rgba(207,220,217,.89)) !important;
  border-bottom: 3px solid rgba(191,143,45,.65) !important;
}
.sh-card-head {
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(158,121,45,.25) !important;
}
.sh-kicker { color: #9b7126 !important; letter-spacing: .16em !important; }
.wordbox,
.sh-prefix-box {
  min-height: 116px !important;
  color: #fff !important;
  background: linear-gradient(145deg, #0b3653, #0d6571) !important;
  border: 1px solid rgba(230,198,119,.51) !important;
  box-shadow: 0 14px 30px rgba(4,36,51,.20), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.wordbox small,
.sh-prefix-box small { color: #d8c47f !important; }
.wordbox strong { color: #fff !important; font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important; }
.prefix {
  display: grid !important;
  place-items: center !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 50% !important;
  color: #0b2c45 !important;
  background: linear-gradient(145deg,#f0d993,#bf8b31) !important;
  border: 2px solid #f5e3ad !important;
  box-shadow: 0 0 0 4px #0b3653, 0 0 0 7px rgba(232,201,124,.54), 0 12px 24px rgba(0,20,32,.25) !important;
}
.sh-flow { color: #c49437 !important; text-shadow: 0 5px 16px rgba(181,126,30,.21) !important; }
.timer {
  color: #0b2d46 !important;
  background: linear-gradient(145deg,#efd691,#c29135) !important;
  border: 2px solid #f4dfa5 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 3px #0c3550, 0 9px 20px rgba(0,20,33,.20) !important;
}
.feedback,
.rules div,
.scorebox,
.player,
.letters span {
  color: #16364a !important;
  background: rgba(251,250,245,.78) !important;
  border-color: #acbbbb !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
.scorebox,
.player { border-left: 4px solid #c5983c !important; }
.player.active,
.scorebox.active { background: #d4e7df !important; border-color: #3a9177 !important; }
.letterlegend {
  color: var(--sh60-ink) !important;
  background: linear-gradient(145deg, rgba(248,247,240,.88), rgba(208,221,217,.84)) !important;
  border: 1px solid rgba(255,255,255,.64) !important;
  box-shadow: 0 13px 29px rgba(4,36,49,.11), inset 0 1px 0 #fff !important;
}
.letterlegend h3 { color: #0b2e47 !important; }
.feedback.ok { background: #d5e8dd !important; color: #245f43 !important; }
.feedback.bad { background: #ead3d1 !important; color: #7d3c42 !important; }
.feedback.warn { background: #ebe0bd !important; color: #735619 !important; }

@media (max-width: 900px) {
  .sh-main { width: calc(100% - 14px) !important; }
  .sh-hero { min-height: auto !important; }
  .sh-chain { min-height: 180px !important; order: 2 !important; }
  .v59-son-harf-art { height: 174px !important; }
  .sh-mode-card { order: 3 !important; width: 100% !important; }
}

@media (max-width: 720px) {
  .sh-main { width: calc(100% - 8px) !important; }
  .sh-hero { border-radius: 19px !important; }
  .sh-chain { min-height: 138px !important; border-radius: 17px !important; }
  .v59-son-harf-art { height: 132px !important; }
  .panel { border-radius: 17px !important; }
  .sh-hero h1 { font-size: clamp(48px, 15vw, 72px) !important; }
}