:root{
  --bg1:#0f0c29;
  --bg2:#302b63;
  --bg3:#24243e;
  --text:#ffffff;
  --muted:rgba(255,255,255,.7);
  --card:rgba(255,255,255,.08);
  --card2:rgba(255,255,255,.12);
  --good:#40f99b;
  --warn:#ffd166;
  --bad:#ff4d6d;
  --shadow: 0 12px 40px rgba(0,0,0,.35);
  --radius: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 800px at 30% 10%, rgba(255,255,255,.08), transparent 60%),
              linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
}

a{color:#b8c0ff;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:980px;margin:0 auto;padding:22px}

.header{
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;flex-wrap:wrap;
  margin: 10px 0 18px 0;
}
.title{font-size:34px;letter-spacing:.2px;margin:0}
.subtitle{margin:0;color:var(--muted)}

.card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 16px;
  backdrop-filter: blur(8px);
}

.grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:900px){.grid{grid-template-columns: 1.2fr .8fr}}

.row{display:flex;gap:10px;flex-wrap:wrap}

label{display:block;font-size:13px;color:var(--muted);margin:10px 0 6px}
input,select,button{
  font: inherit;
}
input,select{
  width:100%;
  padding:12px 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: var(--text);
  outline:none;
}
input:focus{border-color: rgba(255,255,255,.38)}

.btn{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.45);
  color: var(--text);
  cursor:pointer;
  transition: transform .07s ease, background .15s ease;
}
.btn:hover{background: rgba(0,0,0,.55)}
.btn:active{transform: translateY(1px) scale(.99)}
.btn.primary{background: rgba(64,249,155,.22); border-color: rgba(64,249,155,.45)}
.btn.danger{background: rgba(255,77,109,.18); border-color: rgba(255,77,109,.45)}

.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  user-select:none;
}
.pill[aria-pressed="true"]{background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.32)}

.small{font-size:13px;color:var(--muted)}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.10)}
.table th{color:rgba(255,255,255,.8);font-weight:600;text-align:left}

.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.14)}

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  padding: 10px 12px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: rgba(255,255,255,.95);
  max-width: min(560px, calc(100% - 20px));
  display:none;
}
.toast.show{display:block;animation: toastIn .2s ease}
@keyframes toastIn{from{transform:translateX(-50%) translateY(6px);opacity:.0}to{transform:translateX(-50%) translateY(0);opacity:1}}

/* ---- game room ---- */
.gameShell{height:100vh;display:flex;flex-direction:column}
.topBar{
  display:flex;justify-content:space-between;align-items:center;
  padding: 14px 16px;
}
.topBar .meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.counter{font-size:24px;font-weight:800;letter-spacing:.2px}

.timerWrap{flex: 0 0 auto; padding: 0 16px 10px}
.timerBar{
  height: 12px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
}
.timerFill{
  height:100%;width:100%;
  background: linear-gradient(90deg, var(--good), var(--warn), var(--bad));
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .15s linear;
}

.stage{
  position:relative;
  flex: 1 1 auto;
  overflow:hidden;
}

.sceneBg{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  width:100%;
  min-height:100%;
  object-fit:cover;
  object-position: center bottom;
  transform-origin: center bottom;
  transform: scale(1);
  transition: transform .15s ease-out;
  pointer-events:none;
  z-index:0;
  user-select:none;
}
.ground{
  position:absolute;left:0;right:0;bottom:0;height:86px;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  border-top: 1px solid rgba(255,255,255,.06);
  z-index:1;
}

.balloon{
  position:absolute;
  left:67%;
  width: 120px;
  height: 160px;
  transform: translateX(-50%);
  will-change: transform, top;
  cursor:pointer;
  user-select:none;
  z-index:2;
}

.balloon .hit{
  position:absolute; inset:-18px; border-radius: 60px;
}

.balloonSvg{width:100%;height:100%;filter: drop-shadow(0 18px 20px rgba(0,0,0,.35));}

.wobble{animation: wobble 2.4s ease-in-out infinite}
@keyframes wobble{
  0%{transform: rotate(-2deg)}
  50%{transform: rotate(2.5deg)}
  100%{transform: rotate(-2deg)}
}

.springUp{animation: springUp .5s cubic-bezier(.2,.9,.3,1) 1}
@keyframes springUp{
  0%{transform: translateX(-50%) scaleX(1.15) scaleY(0.85)}
  20%{transform: translateX(-50%) scaleX(0.9) scaleY(1.12) translateY(-10px)}
  45%{transform: translateX(-50%) scaleX(1.04) scaleY(0.96) translateY(-4px)}
  70%{transform: translateX(-50%) scaleX(0.98) scaleY(1.02)}
  100%{transform: translateX(-50%) scaleX(1) scaleY(1)}
}

.shake{animation: shake .35s ease-in-out infinite}
@keyframes shake{
  0%{transform: translateX(-50%) translateY(0)}
  25%{transform: translateX(calc(-50% - 2px)) translateY(0)}
  75%{transform: translateX(calc(-50% + 2px)) translateY(0)}
  100%{transform: translateX(-50%) translateY(0)}
}

.feed{
  position:absolute; left:0; top:0; bottom: 86px;
  padding: 10px 16px;
  z-index:3;
  max-width: 55%;
  display:flex; flex-direction:column; justify-content:flex-end;
  pointer-events:none;
}
.feedList{
  display:flex;flex-direction:column;gap:6px;
  overflow-y:auto;
  pointer-events:auto;
}
.feedItem{
  background: rgba(0,0,0,.50);
  border: 1px solid rgba(255,255,255,.12);
  padding: 8px 10px;
  border-radius: 14px;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  display: inline-block;
  width: auto;
}

.floatingBtns{position:absolute;top:14px;right:14px;display:flex;gap:10px;z-index:3}

.overlay{
  position:absolute; inset:0;
  display:none;
  align-items:center;justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.45);
  z-index:10;
}
.overlay.show{display:flex}

.popCard{max-width:520px;width:100%;text-align:center}
.popTitle{font-size:34px;margin:0 0 8px 0}
.popSub{margin:0;color:var(--muted)}

.confetti{position:absolute;inset:0;pointer-events:none;opacity:.8}

/* balloon pop */
.popBurst{
  animation: burst .35s ease-out forwards;
}
@keyframes burst{
  from{transform: translateX(-50%) scale(1); opacity:1}
  to{transform: translateX(-50%) scale(1.35); opacity:0}
}

/* ---- puzzle overlay ---- */
.puzzleOverlay{
  position:absolute; inset:0;
  display:flex;
  align-items:flex-start; justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  animation: fadeIn .12s ease;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  z-index:10;
}
.puzzleOverlay[hidden]{display:none}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.puzzleCard{
  width: min(820px, 100%);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  border-radius: var(--radius);
  padding: 14px;
  backdrop-filter: blur(10px);
}

.puzzleOptions{display:grid;grid-template-columns:1fr;gap:10px;margin: 12px 0 12px 0}
@media (min-width:560px){.puzzleOptions{grid-template-columns:repeat(3,1fr)}}

.puzzleOpt{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color: var(--text);
  cursor:pointer;
  min-height: 72px;
}
.puzzleOpt:hover{background: rgba(255,255,255,.12)}
.puzzleOpt.failed{
  opacity:.55;
  text-decoration: line-through;
  border-color: rgba(255,77,109,.55);
}

.puzzleImageWrap{margin: 6px 0 10px 0}
.puzzleImg{width:100%;height:auto;border-radius: 14px;border:1px solid rgba(255,255,255,.14);background: rgba(0,0,0,.25)}

.puzzleQuestion{
  margin: 0 0 10px 0;
  font-weight: 700;
  line-height: 1.25;
}

.puzzleImageWrap{
  margin: 6px 0 10px 0;
  border-radius: 14px;
}

.puzzleImg{
  width:100%;
  height:auto;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  touch-action: pan-x pan-y pinch-zoom;
}
.puzzleImg.zoomed{width:160%; max-width:none}

.answerGrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(88px, 1fr));gap:10px;margin-bottom: 12px}

.ansBtn{
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.12);
  color: var(--text);
  cursor:pointer;
  font-weight: 700;
  padding: 10px 10px;
  text-align: left;
  line-height: 1.15;
  white-space: normal;
}
.ansBtn:active{transform: translateY(1px) scale(.99)}
.ansBtn.wrong{background: rgba(255,77,109,.22); border-color: rgba(255,77,109,.55)}
.ansBtn.right{background: rgba(64,249,155,.18); border-color: rgba(64,249,155,.55)}

/* balloon tooltip */
.balloonTooltip{
  position:absolute;
  left:67%;
  transform: translateX(-50%);
  top: 12px;
  background: rgba(255,255,255,.95);
  color: #1a1a2e;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
  white-space: nowrap;
  z-index: 5;
  animation: tooltipBounce 1.5s ease-in-out infinite;
  pointer-events: none;
}
.balloonTooltip[hidden]{display:none}
.balloonTooltipArrow{
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:8px solid rgba(255,255,255,.95);
}
@keyframes tooltipBounce{
  0%,100%{transform: translateX(-50%) translateY(0)}
  50%{transform: translateX(-50%) translateY(-8px)}
}

/* bouncy puzzle card entrance */
.puzzleCard{
  animation: puzzlePopIn .35s cubic-bezier(.18,1.25,.4,1.1);
}
@keyframes puzzlePopIn{
  0%{transform: scale(.6); opacity:0}
  100%{transform: scale(1); opacity:1}
}