/* O Balao v1.0.1 */
.obal-game {
  --obal-bg:     #1a2535;
  --obal-card:   #243045;
  --obal-text:   #ffffff;
  --obal-muted:  #a0aec0;
  --obal-radius: 14px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--obal-bg);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  box-sizing: border-box;
}
.obal-screen { width: 100%; }

/* ---- SETUP ---- */
.obal-setup-box {
  background: var(--obal-card);
  border-radius: var(--obal-radius);
  padding: 32px 28px;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.obal-logo { text-align:center; font-size:3em; margin-bottom:6px; }
.obal-title {
  color: var(--obal-text);
  text-align: center;
  font-size: 1.7em;
  font-weight: 700;
  margin: 0 0 24px;
}
.obal-section { margin-bottom: 20px; }
.obal-section-label {
  color: var(--obal-muted);
  font-size: .85em;
  font-weight: 600;
  margin-bottom: 8px;
}
.obal-num-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.obal-num-btn {
  flex: 1; min-width: 36px;
  background: #1a2535;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: var(--obal-muted);
  font-size: 1em;
  font-weight: 700;
  padding: 9px 4px;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.obal-num-btn.obal-num-active,
.obal-num-btn:hover { border-color: #64B5F6; color: #fff; }

/* ---- DIFFICULTY BUTTONS ---- */
.obal-diff-btns { display: flex; gap: 8px; }
.obal-diff-btn {
  flex: 1;
  background: #1a2535;
  border: 2px solid rgba(255,255,255,.15);
  border-radius: 8px;
  color: var(--obal-muted);
  font-size: .95em;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.obal-diff-btn:hover { border-color: #81C784; color: #fff; }
.obal-diff-btn.obal-diff-active {
  border-color: #81C784;
  background: rgba(129,199,132,.15);
  color: #81C784;
}

.obal-players-inputs { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.obal-input-row { display:flex; align-items:center; gap:10px; }
.obal-input-lbl { color:var(--obal-muted); font-size:.85em; font-weight:600; width:76px; flex-shrink:0; }
.obal-name-input {
  flex:1; background:#1a2535;
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px; color:#fff;
  font-size:.95em; padding:8px 12px;
  box-sizing:border-box; outline:none;
  transition:border-color .2s;
}
.obal-name-input:focus { border-color:#64B5F6; }

/* ---- BUTTONS ---- */
.obal-btn {
  border:none; border-radius:8px; cursor:pointer;
  font-weight:700; transition:opacity .15s, transform .1s;
}
.obal-btn:hover:not(:disabled) { opacity:.88; transform:translateY(-1px); }
.obal-btn-start {
  display:block; width:100%; padding:14px;
  background: linear-gradient(135deg,#1565C0,#0d47a1);
  color:#fff; font-size:1.1em;
}
.obal-btn-pass {
  display:block; width:100%; padding:14px;
  background: linear-gradient(135deg,#2e7d32,#1b5e20);
  color:#fff; font-size:1em; font-weight:800;
  letter-spacing:.5px;
}
.obal-btn-pass:disabled {
  background: rgba(255,255,255,.1);
  color: var(--obal-muted);
  cursor: not-allowed;
  transform: none !important;
  opacity: .6;
}

/* ---- GAME SCREEN ---- */
.obal-players-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 500px;
  margin: 0 auto 16px;
}
.obal-chip {
  padding: 5px 14px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: var(--obal-muted);
  font-size: .85em;
  font-weight: 600;
  transition: all .2s;
}
.obal-chip-active {
  background: #1565C0;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 0 12px rgba(21,101,192,.6);
}

/* ---- BALLOON ---- */
.obal-balloon-wrap {
  max-width: 280px;
  margin: 0 auto 16px;
  cursor: pointer;
  user-select: none;
  transition: filter .3s;
}
.obal-balloon-wrap:active { transform: scale(0.97); }

@keyframes obal-inflate {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
.obal-balloon-wrap.obal-inflate-anim {
  animation: obal-inflate 0.18s ease-out forwards;
}

@keyframes obal-wobble {
  from { transform: rotate(-2.5deg) scale(1); }
  to   { transform: rotate(2.5deg) scale(1.03); }
}
.obal-balloon-wrap.obal-danger {
  animation: obal-wobble 0.7s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 18px rgba(255,60,0,.75));
}

/* ---- TURN INFO ---- */
.obal-turn-info {
  text-align: center;
  margin-bottom: 16px;
  max-width: 400px;
  margin-left: auto; margin-right: auto;
}
.obal-turn-name {
  color: #fff;
  font-size: 1.25em;
  font-weight: 800;
  letter-spacing: .5px;
  margin-bottom: 4px;
}
.obal-turn-clicks {
  color: var(--obal-muted);
  font-size: .88em;
}

.obal-actions {
  max-width: 380px;
  margin: 0 auto;
}

/* ---- BURST SCREEN ---- */
.obal-burst-box {
  background: var(--obal-card);
  border-radius: var(--obal-radius);
  padding: 48px 32px;
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
@keyframes obal-burst-appear {
  0%   { transform: scale(0.3) rotate(-10deg); opacity:0; }
  60%  { transform: scale(1.2) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); opacity:1; }
}
.obal-burst-icon {
  font-size: 5em;
  margin-bottom: 12px;
  display: block;
  animation: obal-burst-appear 0.5s cubic-bezier(.17,.67,.35,1.3) forwards;
}
.obal-burst-msg {
  color: #FF5252;
  font-size: 1.45em;
  font-weight: 900;
  margin-bottom: 10px;
  line-height: 1.2;
}
.obal-burst-sub {
  color: var(--obal-muted);
  font-size: .92em;
  margin-bottom: 8px;
}

/* ---- WINNER SCREEN ---- */
.obal-winner-box {
  background: var(--obal-card);
  border-radius: var(--obal-radius);
  padding: 56px 36px;
  max-width: 380px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.obal-winner-trophy { font-size: 4em; margin-bottom: 12px; }
.obal-winner-label  { color: var(--obal-muted); font-size: .88em; font-weight:600;
                      text-transform:uppercase; letter-spacing:.8px; margin-bottom:8px; }
.obal-winner-name   { color: #FFD700; font-size: 2em; font-weight:900; margin-bottom:4px; }

@media (max-width:400px) {
  .obal-setup-box { padding:20px 14px; }
  .obal-balloon-wrap { max-width:220px; }
}