/* KU Games – shared styles
   Palette: #F28095 | #4F8C7B | #F2D22E | #F2B544 | #F2A0A0
*/
:root {
  --ku-pink:   #F28095;
  --ku-teal:   #4F8C7B;
  --ku-yellow: #F2D22E;
  --ku-orange: #F2B544;
  --ku-blush:  #F2A0A0;
  --ku-dark:   #2a2a2a;
  --ku-light:  #fdf8f4;
  --ku-grey:  #3d3d3d;
  --ku-radius: 10px;
  --ku-shadow: 0 4px 18px rgba(0,0,0,.10);
}

/* ── Layout: game left, sidebar right ── */
.ku-game-wrap {
  font-family: inherit;
  max-width: 900px;
  margin: 2rem auto;
  padding: 0;
  background: var(--ku-light);
  box-shadow: var(--ku-shadow);
  border: 2px solid var(--ku-blush);
  overflow: hidden;
}

.ku-game-layout {
  display: flex;
  gap: 0;
  min-height: 300px;
}

.ku-game-main {
  flex: 1 1 auto;
  padding: 1.4rem;
  position: relative;
  min-width: 0;
}

.ku-game-sidebar {
  width: 200px;
  flex: 0 0 200px;
  background: #fff;
  border-left: 2px solid var(--ku-blush);
  padding: 1.2rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.ku-game-header {
  padding: 1rem 1.4rem .6rem;
  border-bottom: 2px solid var(--ku-blush);
}

.ku-game-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ku-teal);
  margin: 0;
}

@media (max-width: 580px) {
  .ku-game-layout { flex-direction: column; }
  .ku-game-sidebar {
    width: auto;
    border-left: none;
    border-top: 2px solid var(--ku-blush);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* ── Sidebar sections ── */
.ku-sidebar-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #aaa;
  margin-bottom: .2rem;
}

/* ── Level buttons ── */
.ku-level-bar {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ku-blush) transparent;
  padding-right: 2px;
}
.ku-level-bar::-webkit-scrollbar { width: 4px; }
.ku-level-bar::-webkit-scrollbar-thumb { background: var(--ku-blush); border-radius: 4px; }
.ku-level-bar::-webkit-scrollbar-track { background: transparent; }

.ku-level-btn {
  width: 100%;
  padding: .35rem .6rem;
  border-radius: 6px;
  border: 2px solid var(--ku-blush);
  background: #fff;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .4rem;
  font-family: inherit;
  color: var(--ku-dark);
  transition: background .15s, border-color .15s;
  text-align: left;
}
.ku-level-btn .ku-lvl-num { min-width: 1.2rem; }
.ku-level-btn.done  { background: var(--ku-teal);  color: #fff; border-color: var(--ku-teal); }
.ku-level-btn.active{ background: var(--ku-orange); color: #fff; border-color: var(--ku-orange); }
.ku-level-btn.locked{ opacity:.45; cursor: not-allowed; }
.ku-level-btn:hover:not(.active):not(.locked) { border-color: var(--ku-orange); }

/* ── Timer / best time ── */
.ku-timer {
  font-size: .9rem;
  color: var(--ku-teal);
  font-weight: 700;
}
.ku-best-time {
  font-size: .78rem;
  color: #888;
}

/* ── Buttons ── */
.ku-btn {
  display: inline-block;
  padding: .5rem 1.2rem;
  border: none;
  border-radius: var(--ku-radius);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.ku-btn:hover  { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.15); }
.ku-btn:active { transform: none; }
.ku-btn--primary   { background: var(--ku-teal);   color: #fff; }
.ku-btn--secondary { background: var(--ku-yellow);  color: var(--ku-dark); }
.ku-btn--danger    { background: var(--ku-pink);    color: #fff; }

/* ── Win overlay ── */
.ku-win-overlay {
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(79,140,123,.93);
  border-radius: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  z-index: 10;
}
.ku-win-overlay.show { display: flex; animation: kuFadeIn .35s ease; }
.ku-win-overlay h2 { color:#fff; font-size:1.6rem; margin:0; }
.ku-win-overlay p  { color:rgba(255,255,255,.85); margin:0; font-size:1rem; }

@keyframes kuFadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

/* ── Start overlay (shared across games with levels) ── */
.ku-start-overlay {
  background: rgba(79,140,123,.95); /* teal – toks pat kaip win overlay */
  cursor: default;
}
.ku-start-overlay .ku-start-icon {
  font-size: 3rem;
  line-height: 1;
}
.ku-start-overlay h2 {
  color: #fff;
  font-size: 1.5rem;
}
.ku-start-overlay .ku-start-level-info {
  color: rgba(255,255,255,.82);
}
/* Win overlay "Aukštesnis lygis" mygtukas – geltonas */
.ku-win-overlay .ku-btn--secondary,
.ku-start-overlay .ku-btn--primary {
  background: var(--ku-yellow);
  color: var(--ku-dark);
}



/* Reset any theme/WP pseudo-elements on game buttons */
.ku-btn::before,
.ku-btn::after { display: none !important; }