/* SENTENCE BUILDER — oyun kiti */
:root{ --gk-accent:#DB2777; --gk-accent-d:#831843; }
.sb-page .gk-chip, .sb-page .gk-iconbtn{ background:#3B1C66; border-color:#5B2E94; border-bottom-color:#130830; }
.sb-dots{ display:flex; gap:6px; }
.sb-dots i{ width:18px; height:18px; border-radius:50%; background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.25); }
.sb-dots i.cur{ border-color:var(--gk-gold); box-shadow:0 0 10px rgba(255,210,63,.6); }
.sb-dots i.ok{ background:#22C55E; border-color:#86EFAC; } .sb-dots i.bad{ background:#EF4444; border-color:#FCA5A5; }
.sb-main{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:18px; }
.sb-picwrap{ display:flex; flex-direction:column; gap:12px; min-height:0; }
.sb-pic{ flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:10px; }
.sb-pic img{ width:100%; height:100%; object-fit:contain; border-radius:16px; }
.sb-pic.noimg::after{ content:'💬'; font-size:90px; }
.sb-tools{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; }
.sb-tool{ min-height:58px; border-radius:18px; cursor:pointer; color:#fff; font-family:'Fredoka',sans-serif; font-weight:700; font-size:20px;
  background:var(--gk-panel); border:2px solid var(--gk-line); border-bottom:5px solid var(--gk-shadow); display:flex; align-items:center; justify-content:center; gap:8px; }
.sb-tool:hover:not(:disabled){ border-color:var(--gk-gold); }
.sb-tool:disabled{ opacity:.35; cursor:default; }
.sb-tool b{ min-width:26px; height:26px; border-radius:13px; background:var(--gk-gold); color:#1B1740; font-size:15px; display:inline-flex; align-items:center; justify-content:center; }
.sb-tool.listen{ background:#0EA5E9; border-color:#38BDF8; border-bottom-color:#075985; }
.sb-tool.listen.on{ animation:gkPulse .45s infinite alternate; }
.sb-right{ display:flex; flex-direction:column; gap:14px; min-height:0; }
.sb-area{ min-height:130px; padding:16px; display:flex; flex-wrap:wrap; align-content:center; align-items:center; gap:10px; transition:background .3s, border-color .3s; }
.sb-area.ok{ background:rgba(34,197,94,.22); border-color:#4ADE80; }
.sb-area.bad{ background:rgba(239,68,68,.2); border-color:#F87171; animation:gkShake .45s; }
.sb-slot{ width:74px; height:54px; border-radius:14px; border:3px dashed rgba(255,255,255,.28); }
.sb-punct{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:40px; color:var(--gk-gold); margin-left:-4px; }
.sb-label{ font-size:14px; font-weight:800; color:var(--gk-muted); letter-spacing:1px; text-transform:uppercase; text-align:center; }
.sb-bank{ flex:1; min-height:0; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; gap:12px; padding:14px; }
.sb-chip{ min-height:58px; padding:0 22px; border-radius:18px; cursor:pointer; border:0; color:#fff; background:var(--c); border-bottom:6px solid rgba(0,0,0,.28);
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(20px,3.4vh,32px); text-shadow:0 2px 0 rgba(0,0,0,.18); transition:transform .12s, opacity .2s; }
.sb-chip:hover:not(.used){ transform:translateY(-3px); }
.sb-chip:active{ transform:translateY(2px); }
.sb-chip.used{ opacity:.18; pointer-events:none; transform:scale(.92); }
.sb-chip.in{ min-height:54px; padding:0 16px; }
.sb-chip.in.fixed{ outline:3px solid rgba(255,255,255,.5); outline-offset:-3px; cursor:default; }
.sb-chip.snap{ animation:sbSnap .25s cubic-bezier(.34,1.56,.64,1); }
.sb-chip.glow{ box-shadow:0 0 0 4px #FFD23F, 0 0 24px rgba(255,210,63,.8); transform:scale(1.1); }
.sb-foot{ min-height:40px; display:flex; align-items:center; justify-content:center; }
.sb-fb{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:26px; } .sb-fb.ok{ color:#4ADE80; } .sb-fb.bad{ color:#F87171; }
@keyframes sbSnap{ from{ transform:scale(.6); } to{ transform:none; } }
@media (max-width:980px){ .sb-main{ grid-template-columns:1fr; } .sb-pic{ flex:none; height:30vh; } }
@media (max-width:640px){
  .sb-dots{ display:none; }
  .sb-pic{ height:24vh; }
  .sb-tool{ min-height:50px; font-size:16px; }
  .sb-chip{ min-height:48px; padding:0 14px; font-size:19px; border-radius:14px; }
  .sb-chip.in{ min-height:44px; padding:0 10px; }
  .sb-slot{ width:44px; height:44px; }
  .sb-area{ min-height:100px; padding:10px; gap:7px; }
  .sb-bank{ gap:8px; padding:10px; }
}

.sb-tool.pulse{ border-color:var(--gk-gold); box-shadow:0 0 0 4px rgba(255,210,63,.35), 0 0 24px rgba(255,210,63,.6); animation:gkPulse .5s infinite alternate; }