/* Kristal Blok */
body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.screen { flex: 1; min-height: 0; overflow-y: auto; }
.logo-blocks { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; justify-content: center; margin: 8px auto 2px; }
.logo-blocks i { width: 30px; height: 30px; border-radius: 7px; background: linear-gradient(145deg, #ff8fc8, #c04f97); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2); }
.logo-blocks i:nth-child(2) { background: linear-gradient(145deg, #5ee7ff, #2a8fc4); }
.logo-blocks i:nth-child(3) { background: linear-gradient(145deg, #ffd77a, #d79a1e); }
.logo-blocks i.gem { background: linear-gradient(145deg, #cdb8ff, #7b5cff); position: relative; }
.logo-blocks i.gem::after { content: "💎"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bar b { font-size: 18px; }
#starTotal { color: var(--kv-gold); font-weight: 800; }
.level-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.lv { aspect-ratio: 1; border-radius: 14px; border: 1px solid rgba(205, 184, 255, .25); background: linear-gradient(150deg, var(--kv-panel), var(--kv-navy2)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 900; font-size: 18px; }
.lv small { font-size: 10px; letter-spacing: -1px; color: var(--kv-gold); }
.lv.locked { opacity: .35; }
.lv.next { border-color: var(--kv-pink); box-shadow: 0 0 14px rgba(255, 143, 200, .35); }

#game { display: flex; flex-direction: column; overflow: hidden; }
.hud { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.hud-main { flex: 1; text-align: center; }
.hud-main b { display: block; font-size: 30px; line-height: 1; font-weight: 900; }
.hud-main small { color: var(--kv-muted); }
.hud-side { min-width: 60px; text-align: right; color: var(--kv-gold); font-weight: 800; }
#board { flex: 1; width: 100%; min-height: 0; touch-action: none; display: block; }
.stars { font-size: 34px; letter-spacing: 4px; color: var(--kv-gold); margin: 6px 0; }
.stars .off { color: rgba(255, 255, 255, .2); }
.rules-text { text-align: left; font-size: 14px; color: #dcdcf5; }
.rules-text li { margin: 4px 0; }