.hb-overlay{position:fixed;inset:0;z-index:100000100;display:flex;align-items:center;justify-content:center;padding:12px;background:rgba(24,38,41,.65);font-family:Nunito,system-ui,sans-serif;color:#234e45}
.hb-card{width:min(100%,540px);max-height:94dvh;overflow:auto;border-radius:28px;background:#f4faf2;border:3px solid #bfdcc9;box-shadow:0 16px 50px #102c3a55}
.hb-card header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 20px;background:#dbeeda;border-radius:24px 24px 0 0}
.hb-card h2{font-size:24px;margin:4px 0;color:#234e45}.hb-card h3{font-size:16px;color:#234e45}.hb-card small{line-height:1.5}.hb-card header small{font-size:10px;letter-spacing:1px;font-weight:900}
.hb-card button{font:800 14px Nunito,system-ui,sans-serif;border:2px solid #bddbc9;border-radius:14px;background:#fff;color:#234e45;padding:10px;cursor:pointer}.hb-card button:disabled{opacity:.5;cursor:default}.hb-card button:focus-visible{outline:3px solid #7c3aed;outline-offset:2px}.hb-card [hidden]{display:none!important}
.hb-body{padding:16px 20px 22px}.hb-intro{display:flex;align-items:center;gap:12px;line-height:1.5}.hb-intro img{width:76px;height:86px;object-fit:contain}.hb-classes{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.hb-classes .active,.hb-units .selected{background:#d2efdc;border-color:#368060}.hb-units{display:flex;flex-wrap:wrap;gap:7px}.hb-card .hb-primary{background:#38785f;color:#fff;border-color:#2c624d;box-shadow:0 3px 0 #234e45}.hb-status{min-height:22px;line-height:1.5;font-size:13px}.hb-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px}.hb-card progress{width:100%;height:12px;margin:12px 0;accent-color:#438963}.hb-hints{display:flex;gap:10px;margin:6px 0 15px}.hb-hints>div{flex:1;padding:10px;background:#fff;border:2px dashed #bddbc9;border-radius:15px;text-align:center}.hb-hints span,.hb-hints b{display:block;overflow-wrap:anywhere}.hb-hints b{margin-top:5px;color:#63518c;letter-spacing:2px}.hb-hints .hb-solved{background:#d2efdc;border-style:solid}.hb-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;padding:12px;background:#e3e5d1;border-radius:22px;touch-action:none;user-select:none;-webkit-user-select:none}.hb-grid button{padding:0;aspect-ratio:1;border-radius:12px;font-size:22px;background:#fffdf1;border:2px solid #c5c8aa;box-shadow:0 3px 0 #a4b49e}.hb-grid button.hb-found{background:#bddfae}.hb-grid button.hb-picked{background:#eed08b;border-color:#94763c;transform:translateY(2px);box-shadow:none}.hb-selection{text-align:center;min-height:30px;margin:15px 0;font-weight:900;font-size:19px;letter-spacing:2px;overflow-wrap:anywhere}.hb-actions{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}.hb-next{width:100%;margin-top:12px;background:#eadff8!important}.hb-finish{text-align:center}.hb-finish img{width:130px;height:150px;object-fit:contain}.hb-finish button{margin:6px}.hb-card header button{font-size:22px;padding:4px 12px}
@media(max-width:370px){.hb-body{padding:12px}.hb-grid{gap:5px;padding:9px}.hb-grid button{font-size:19px}.hb-card h2{font-size:21px}.hb-hints b{letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.hb-grid button{transform:none!important}}

/* Approved 2026-10-20: Harf Bahçesi / original design B. One clue each round. */
#harfBahcesiOverlay.hb-playing{background:rgba(21,40,35,.7);backdrop-filter:blur(5px)}
#harfBahcesiOverlay.hb-playing .hb-card{
  width:min(100%,520px);max-height:min(96dvh,950px);border:4px solid #b6d0bf;border-radius:36px;
  color:#2b205c; background:
  radial-gradient(circle at 94% 12%,#fff9b969,transparent 25%),
  linear-gradient(#fdf5e9a6,#fff7edc9),
  url('games-assets/approved-garden-v1.webp') center top/cover no-repeat,
  #fff8ed;box-shadow:0 16px 46px #13271f78;scrollbar-width:thin}
#harfBahcesiOverlay.hb-playing .hb-card>header{
  position:relative;justify-content:center;min-height:130px;padding:22px 54px;
  border-radius:30px 30px 0 0;text-align:center;
  background:radial-gradient(ellipse at top,#fff8dbdd 12%,#c9f4e5b0 72%,#d2dc97ad);
}
#harfBahcesiOverlay.hb-playing .hb-card>header::before,
#harfBahcesiOverlay.hb-playing .hb-card>header::after{content:'🌿';font-size:27px;position:absolute;bottom:15px;left:12px}
#harfBahcesiOverlay.hb-playing .hb-card>header::after{content:'🌺';left:auto;right:12px}
#harfBahcesiOverlay.hb-playing .hb-card header small{color:#5a3487;font-weight:900;font-size:11px;letter-spacing:1.2px;background:#f9f2ffde;padding:5px 11px;border-radius:22px}
#harfBahcesiOverlay.hb-playing .hb-card header h2{margin:11px 0 0;padding:10px 13px;border:3px solid #b88cf3;border-radius:22px;
  background:linear-gradient(135deg,#733ac5,#9f4be2 55%,#682ab3);color:white!important;
  text-shadow:0 2px 2px #361274;font:900 clamp(23px,5vw,32px)/1.15 Fredoka,Nunito,system-ui;box-shadow:0 6px 0 #48288f,0 12px 18px #46278e35}
#harfBahcesiOverlay.hb-playing .hb-card header [data-close]{position:absolute;top:17px;left:13px;
  border:3px solid #c0e8ee;border-radius:50%;width:48px;height:48px;padding:0;
  color:#40277e;font-size:39px;line-height:32px;background:white;box-shadow:0 4px 0 #b1d6d7}
#harfBahcesiOverlay.hb-playing .hb-body{padding:16px clamp(12px,4vw,23px) 22px}
#harfBahcesiOverlay.hb-playing .hb-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;
  margin:4px 0 8px;color:#50308a}
#harfBahcesiOverlay.hb-playing .hb-meta>*{background:#f6effff2;border:2px solid #d9c1fb;border-radius:15px;
  text-align:center;padding:9px 3px;font:900 clamp(11px,3vw,14px) Nunito,system-ui}
#harfBahcesiOverlay.hb-playing .hb-card progress{height:9px;accent-color:#9955ec;margin:5px 0 11px}
#harfBahcesiOverlay.hb-playing .hb-hints{display:block;margin:8px auto 13px}
#harfBahcesiOverlay.hb-playing .hb-hints>div{max-width:100%;background:linear-gradient(#fffaff,#eee4fb);
  border:2px solid #caaaf0;box-shadow:0 5px 0 #b89ce9;padding:13px;border-radius:23px;font-size:17px;font-weight:900}
#harfBahcesiOverlay.hb-playing .hb-hints b{font-size:20px;color:#8a3ce3;letter-spacing:4px}
#harfBahcesiOverlay.hb-playing .hb-hints .hb-solved{background:#ddf9df;border-color:#45b468;box-shadow:0 4px 0 #9bd5a7}
#harfBahcesiOverlay.hb-playing .hb-hints .hb-error{background:#ffe2e9;border-color:#dc476a;box-shadow:0 4px 0 #e794a3}
#harfBahcesiOverlay.hb-playing .hb-grid{padding:clamp(7px,2vw,12px);gap:clamp(4px,1.5vw,8px);
  border:7px solid #b9854f;border-radius:24px;background:linear-gradient(135deg,#e2b77d,#ae7946);
  box-shadow:0 7px 0 #845731,inset 0 3px 8px #5d331d63}
#harfBahcesiOverlay.hb-playing .hb-grid button{font:900 clamp(20px,5.5vw,30px)/1 Fredoka,Nunito,system-ui;
  color:#22534a;border:2px solid #d6af88;border-radius:13px;
  background:linear-gradient(#fffdf4,#fff1d9);box-shadow:0 4px 0 #ad855c}
#harfBahcesiOverlay.hb-playing .hb-grid button.hb-picked{background:#e3d0fb;border-color:#9252dc;color:#522487;box-shadow:none;transform:translateY(3px)}
#harfBahcesiOverlay.hb-playing .hb-grid button.hb-found{background:#c5f3cd;border-color:#39ad5d;color:#126f32;box-shadow:0 2px 0 #65bc74}
#harfBahcesiOverlay.hb-playing .hb-selection{color:#6c369e;margin:12px 0 9px}
#harfBahcesiOverlay.hb-playing .hb-actions{display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:6px;margin-top:8px}
#harfBahcesiOverlay.hb-playing .hb-actions button{padding:12px 4px;min-height:47px;border-color:#dcc7e5;font-size:clamp(11px,2.9vw,14px);
  background:linear-gradient(#fffdfa,#f8e9d5);color:#3b2a58;border-radius:16px;box-shadow:0 4px 0 #cba98a}
#harfBahcesiOverlay.hb-playing .hb-actions .hb-primary{border:2px solid #b87af5!important;color:#fff!important;
  background:linear-gradient(180deg,#a24df3,#6926c7)!important;box-shadow:0 4px 0 #47218f!important}
#harfBahcesiOverlay.hb-playing .hb-status{background:#fff5e5e9;border:1px solid #e8c99d;border-radius:14px;
  padding:9px;text-align:center;color:#765337;font-size:12px;margin-top:14px}
#harfBahcesiOverlay.hb-playing .hb-next{background:linear-gradient(#ad6af0,#7332c1)!important;color:#fff!important;border-color:#7133c1!important}
@media(max-height:720px){#harfBahcesiOverlay.hb-playing .hb-card>header{min-height:80px;padding:8px 49px}
  #harfBahcesiOverlay.hb-playing .hb-body{padding-top:8px}
  #harfBahcesiOverlay.hb-playing .hb-hints>div{padding:8px}
  #harfBahcesiOverlay.hb-playing .hb-selection{margin:6px 0}}
@media(prefers-reduced-motion:reduce){#harfBahcesiOverlay.hb-playing *{transition:none!important;animation:none!important}}