/* Basic reset for plugin */
.ktg-container { box-sizing: border-box; max-width: 820px; margin: 18px auto; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg,#ffffff,#f7fbff); box-shadow: 0 8px 26px rgba(11,20,30,0.08); border: 1px solid rgba(20,40,60,0.04); }

.ktg-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; gap:12px; border-bottom:1px solid rgba(0,0,0,0.04); }
.ktg-title { font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:8px; color:#14324a; }
.ktg-controls { display:flex; align-items:center; gap:8px; }

.ktg-controls button { background:transparent; border:1px solid rgba(20,40,60,0.06); padding:8px 10px; border-radius:10px; cursor:pointer; }
.ktg-controls button:hover { transform:translateY(-1px); }

.ktg-speed-label { display:flex; align-items:center; gap:8px; font-size:0.9rem; color:#4b6b80; }
.ktg-speed { width:120px; }

.ktg-game-area { position:relative; height:320px; display:flex; align-items:flex-end; padding:14px; outline:none; }
.ktg-characters { position: absolute; left:50%; transform:translateX(-50%); bottom:8px; z-index:30; width:200px; display:flex; justify-content:center; pointer-events:none; }
.ktg-character { width:110px; height:120px; display:flex; align-items:center; justify-content:center; }
.ktg-svg-char { width:90px; height:90px; fill:#45a7ff; opacity:0.95; transition: transform 180ms ease; }

.ktg-character.ktg-hit .ktg-svg-char { transform: translateY(-12px) scale(1.05); }

.ktg-fall-zone { position:absolute; inset:10px 10px 10px 10px; pointer-events:none; overflow:hidden; }

.ktg-falling-key { position:absolute; top:-40px; font-weight:700; font-size:18px; width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff,#e6f4ff); border:1px solid rgba(20,80,160,0.08); box-shadow: 0 6px 18px rgba(10,30,60,0.06); pointer-events:auto; color:#123; }

.ktg-footer { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-top:1px solid rgba(0,0,0,0.04); font-size:0.95rem; color:#2b4b60; }

.ktg-score { font-weight:700; }
.ktg-instructions { font-size:0.9rem; color:#58707f; }

/* make the container responsive */
@media (max-width:700px) {
    .ktg-container { margin:12px; }
    .ktg-characters { width:140px; }
    .ktg-falling-key { font-size:16px; width:36px; height:36px; }
}