:root{
  --g:#22c55e; --gsoft:#22c55e66; --b:#3b82f6;
  --panel:#0f131b; --ink:#e6e9ef; --stroke:#1e2635; --red:#ef4444;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#000;color:var(--ink);font:14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif}
.page{max-width:1100px;margin:0 auto;padding:20px 14px}

/* Green beveled card */
.card{background:var(--panel);border:2px solid var(--g);border-radius:18px;
  box-shadow:0 0 0 1px #0b1115 inset,0 0 12px rgba(34,197,94,.2);padding:14px}

/* HERO */
.hero{ padding:8px; border-color:var(--g); }  /* keep the green card bevel */
.hero-img{
  width:100%;
  border-radius:16px;
  border:0;                  /* <-- remove the red/orange line */
  outline:0;                 /* safety */
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}

[monkey] click { userAddr: '0xABCD…', sessionStart: 173… }

/* Side-by-side leaderboard row */
.lb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;  /* two equal columns */
  gap: 12px;
}

.lb-block {
  background: #0c1018;
  border: 2px solid var(--g);
  border-radius: 14px;
  padding: 10px;
}

.lb-title { font-weight: 800; margin-bottom: 6px; }
.lb-num   { font-size: 22px; font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.lb-meta .k { color: var(--g); margin-right: 6px; }

/* Stack vertically on smaller screens */
@media (max-width: 980px) {
  .lb-row { grid-template-columns: 1fr; }
}

/* Stats & connect row */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}
.stats-grid b{color:var(--g)}
.connect-row .actions{display:flex;gap:10px;align-items:center}
.pill{background:#0b1115;border:1px solid #374151;border-radius:999px;padding:6px 10px;font-size:12px}
.pill.ok{border-color:var(--g);color:var(--g)}
.pill.addr{font-variant-numeric:tabular-nums}
.hidden{display:none !important}

/* Buttons */
.btn{background:#0b1115;border:2px solid var(--b);border-radius:14px;color:#dbeafe;padding:10px 16px;
 box-shadow:0 0 0 1px #0b1115 inset,0 4px 10px rgba(0,0,0,.45);transition:color .18s,border-color .18s,box-shadow .18s,transform .06s}
.btn:hover{border-color:var(--g);color:var(--g);box-shadow:0 0 0 1px #0b1115 inset,0 0 14px rgba(34,197,94,.35)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#0b1115;border:2px solid #374151;color:#e5e7eb}
.btn.ghost:hover{border-color:var(--g);color:var(--g);box-shadow:inset 0 0 0 1px var(--g)}

/* Gamebox + grid */
.gamebox{padding:14px}
#game-grid{aspect-ratio:16/9;width:100%;background:#0b1115;border-radius:16px;border:2px solid var(--g);
 box-shadow:0 0 0 1px #0b1115 inset,0 0 12px rgba(34,197,94,.2);position:relative;padding:12px}
#grid-stage{position:absolute;inset:12px}
.barrel{border:2px dashed var(--gsoft);border-radius:14px;min-height:420px;position:relative;background:#0b1115}

/* Monkeys */
.monkey-row{position:absolute;left:var(--mx,10%);top:var(--my,10%);display:flex;gap:10px;flex-wrap:wrap}
.monkey{width:56px;height:56px;border-radius:50%;background:#eab308;color:#111;display:flex;align-items:center;justify-content:center;
 font-size:28px;line-height:1;font-weight:700;position:relative;box-shadow:inset 0 2px 0 #fff3,0 3px 8px #0008;transform-origin:50% 60%}
.monkey::before,.monkey::after{content:"";position:absolute;top:50%;transform:translateY(-50%);width:16px;height:10px;background:#eab308}
.monkey::before{left:-12px;border-top-left-radius:6px;border-bottom-left-radius:6px}
.monkey::after{right:-12px;border-top-right-radius:6px;border-bottom-right-radius:6px}

/* Motion */
@keyframes monkey-wiggle{ 0%{transform:rotate(0)} 25%{transform:rotate(5deg) translateY(1px)} 50%{transform:rotate(0)}
  75%{transform:rotate(-5deg) translateY(-1px)} 100%{transform:rotate(0)} }
.monkey.wiggle{ animation: monkey-wiggle .45s ease-in-out infinite; }
.monkey.wiggle.slow{ animation-duration:.9s }
.monkey.wiggle.fast{ animation-duration:.35s }
/* Make the emoji sit in its own inner wrapper we can spin */
.monkey .face {
  width: 100%;
  height: 100%;
  display: flex; align-items: center; justify-content: center;
  /* inherit the bigger emoji size you’re already using */
  font-size: inherit; line-height: 1;
}

/* One-shot spin animation for the face */
.monkey .face.spin { animation: face-spin 0.6s linear 1; }
@keyframes face-spin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Banana row + chips */
.banana-row{
  display:flex; align-items:center; gap:8px;
  min-height:28px; margin:8px 12px 6px; flex-wrap:wrap;
}
.banana-chip{
  width:22px; height:22px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#102316; border:1px solid #22c55e;
  box-shadow: inset 0 0 0 1px #0b1115;
  font-size:14px; line-height:1; color:#facc15; /* 🍌 emoji color */
}
.banana-count{
  height:22px; padding:0 8px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  background:#102316; border:1px solid #22c55e;
  box-shadow: inset 0 0 0 1px #0b1115;
  color:#22c55e; font-weight:700; font-variant-numeric: tabular-nums;
}

/* Optional: a slightly larger single banana in condensed mode */
.banana-chip.big { width:26px; height:26px; font-size:16px; }

/* Keep header/logo from hugging the top */
.page { padding-top: 20px; }          /* bump a bit so logo never clips */
.brand-logo { margin-top: 8px; }      /* small nudge down */
@media (max-width:540px){ .page{ padding-top: 24px; } }

/* Grid container already has position:relative; keep it */
#game-grid{ position:relative; }

/* Overlay system inside grid */
.grid-overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; /* disabled until a layer is shown */
}
.grid-overlay .overlay{
  width:min(560px, 92%); max-height:90%;
  pointer-events:auto;   /* the visible card can be clicked */
}

/* Hide/show utility */
.hidden{ display:none !important; }

/* Confetti constrained to grid */
.grid-confetti{ position:absolute; inset:0; pointer-events:none; z-index:35; }

/* Make sure layers stack above stage */
#grid-stage{ position:absolute; inset:12px; }
#grid-overlay{ z-index:30; }
.overlay{ z-index:31; }

/* Injected wheel card styles */
/* Chart-wheel card */
.wheel-card{ padding:14px; }
.wheel-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.wheel-chart-wrap{ width: clamp(240px, 32vw, 360px); height: clamp(240px, 32vw, 360px); }
.wheel-pointer{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent; border-bottom:22px solid #ef4444;
  z-index:2;
}
.wheel-controls{ display:flex; align-items:center; gap:12px; justify-content:center; }
.wheel-meter{ height:6px; background:#0f131b; border:1px solid #22c55e33; border-radius:999px; margin-top:8px; }
.wheel-meter .meter-fill{ height:100%; width:0; background:#22c55e; transition:width .3s; }

/* Skin the wheel with an SVG/PNG asset */
.wheel-visual.use-image{
  background: url("images/bonus-wheel.svg") center/contain no-repeat;
}

/* Bonus wheel sizing */
.wheel-chart-wrap{
  position: relative;
  width: clamp(220px, 28vw, 320px);   /* smaller by default, responsive */
  height: clamp(220px, 28vw, 320px);
  margin: 0 auto 10px;
}

/* Make the chart canvas obey the wrapper size */
.wheel-chart-wrap canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Pointer scaled to match */
.wheel-pointer{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:18px solid #ef4444;
  z-index:2;
}

/* Optional: slightly smaller wheel/card on narrow screens */
@media (max-width: 640px){
  .grid-overlay .overlay{ width:min(480px, 94%); }
  .wheel-chart-wrap{ width: clamp(200px, 60vw, 280px); height: clamp(200px, 60vw, 280px); }
}

/* Banana toss */
.banana-hud { text-align: right; margin-bottom: 6px; opacity: 0.9; }
.banana-area {
  position: relative;
  height: 260px;
  border: 2px dashed #334155;
  border-radius: 12px;
  background: #0f131b;
  overflow: hidden;
}
.barrel-target {
  position: absolute;
  width: 40px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: #8b5cf6;
  box-shadow: 0 4px 10px #0008;
  cursor: pointer; user-select: none;
}
.barrel-target::after { content: "🛢️"; font-size: 26px; }
.barrel-target.pop { animation: pop 0.25s ease-out; }
@keyframes pop { from { transform: scale(.7); opacity: 0 } to { transform: scale(1); opacity: 1 } }

/* Confetti constrained to grid */
.grid-confetti{ position:absolute; inset:0; pointer-events:none; z-index:35; }

/* Controls */
.controls{ display:flex; gap:10px; margin-top:8px; }

/* Modals */
.modal.hidden { display:none; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-card { width:min(520px, 92vw); background:#0f131b; border:1px solid #1e2635; border-radius:16px; padding:18px; }
.modal-card h3 { margin:0 0 8px 0; }
.modal-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.tiny { font-size:12px; }.muted { opacity:.8; }

.board-hint { margin: 4px 0 6px; font-size: 12px; opacity: .85; }
.elig-wrap { margin-top: 8px; }
.progress {
  height: 6px; border: 1px solid #22c55e33; border-radius: 999px;
  background: #0f131b; overflow: hidden;
}
.progress .fill { height: 100%; width: 0; background: #22c55e; transition: width .3s; }
.tiny { font-size: 12px; } .muted { opacity: .8; }

/* Confetti canvas overlay */
.confetti { position:fixed; inset:0; pointer-events:none; z-index:60; }
.confetti.hidden { display:none; }

/* Footer */
.footer{opacity:.75;font-size:12px;text-align:center;padding:10px 0}

/* Mobile */
@media (max-width:980px){
  .head{ grid-template-columns:1fr; }
  .head-left{ order:2 } .head-right{ order:3 }
  .head-center{ order:1 }
  .stats-grid{ grid-template-columns:1fr; }
  #game-grid{ aspect-ratio:auto; min-height:360px; }
}

/* Bigger monkey chip + arms sized to match */
.monkey {
  width: 46px;                 /* was 38px */
  height: 46px;
  border-radius: 50%;
  background: #eab308;
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 24px;             /* bigger emoji */
  line-height: 1;
  position: relative;
  box-shadow: inset 0 2px 0 #fff3, 0 3px 8px #0008;
  transition: transform .2s ease;
}

/* connector “arms” */
.monkey::before,
.monkey::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;                 /* was 12px */
  height: 8px;                 /* was 6px  */
  background: #eab308;
}
.monkey::before { left: -10px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.monkey::after  { right: -10px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

//* ====== The neon bevel look ====== */
:root{
  --g:#22c55e;         /* green */
  --g-soft:#22c55e66;
  --b:#3b82f6;         /* blue */
  --ink:#e6e9ef;
  --panel:#0f131b;
  --stroke:#1e2635;
}
body{ background:#000; color:var(--ink); }

/* Beveled card with green stroke + glow */
.card{
  background:var(--panel);
  border:2px solid var(--g);
  border-radius:18px;
  box-shadow:
    0 0 0 1px #0b1115 inset,
    0 0 12px 0 rgba(34,197,94,.20);
}

/* Dashed inner grid */
.game .barrel{
  border:2px dashed var(--g-soft);
  border-radius:14px;
  min-height:240px;
  position:relative;
}

/* Buttons: beveled blue; hover -> green glow */
.btn{
  background:#0b1115;
  border:2px solid var(--b);
  border-radius:14px;
  color:#dbeafe;
  padding:10px 16px;
  box-shadow:0 0 0 1px #0b1115 inset, 0 4px 10px rgba(0,0,0,.4);
  transition:color .18s, border-color .18s, box-shadow .18s, transform .06s;
}
.btn:active{ transform:translateY(1px); }
.btn:hover{
  border-color:var(--g);
  color:var(--g);
  box-shadow:0 0 0 1px #0b1115 inset, 0 0 14px rgba(34,197,94,.35);
}

/* Wallet buttons share the same style */
.actions .btn{ min-width:160px; }

.connect-row .actions{ flex-wrap: wrap; }
#status{
  flex-basis: 100%;
  margin-top: 6px;
  min-height: 1em;   /* keeps layout stable even when empty */
}

/* 16:9 game grid that scales responsively */
#game-grid{
  aspect-ratio:16/9;
  width:100%;
  background:#0b1115;
  border-radius:16px;
  border:2px solid var(--g);
  box-shadow:0 0 0 1px #0b1115 inset, 0 0 12px rgba(34,197,94,.2);
  position:relative;
  padding:12px;
}

/* Monkey chips — larger and crisper */
.monkey-row{ position:absolute; left:var(--mx,10%); top:var(--my,10%); display:flex; gap:8px; flex-wrap:wrap; }
.monkey{
  width:46px; height:46px; border-radius:50%;
  background:#eab308; color:#111;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; font-weight:700;
  position:relative;
  box-shadow: inset 0 2px 0 #fff3, 0 3px 8px #0008;
  transform-origin: 50% 60%;
}
.monkey::before,.monkey::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:8px; background:#eab308;
}
.monkey::before{ left:-10px; border-top-left-radius:6px; border-bottom-left-radius:6px; }
.monkey::after { right:-10px; border-top-right-radius:6px; border-bottom-right-radius:6px; }

/* ==== Motion: wiggle + shake + face spin (layered) ==== */
@keyframes monkey-wiggle{
  0%{ transform:rotate(0deg) }
  25%{ transform:rotate(5deg) translateY(1px) }
  50%{ transform:rotate(0deg) }
  75%{ transform:rotate(-5deg) translateY(-1px) }
  100%{ transform:rotate(0deg) }
}
.monkey.wiggle{ animation: monkey-wiggle .45s ease-in-out infinite; }
.monkey.wiggle.slow{ animation-duration: .9s; }
.monkey.wiggle.fast{ animation-duration: .35s; }

.monkey .face{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:inherit; }
@keyframes face-spin{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
.monkey .face.spin{ animation: face-spin .60s linear 1; }

/* Banana row as a persistent strip */
.banana-row{ display:flex; gap:8px; align-items:center; min-height:28px; margin:8px 12px 6px; flex-wrap:wrap; }
.banana-chip{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#102316; border:1px solid var(--g); box-shadow:inset 0 0 0 1px #0b1115; color:#facc15; font-size:14px; }
.banana-count{ height:22px; padding:0 8px; border-radius:11px; background:#102316; border:1px solid var(--g);
  color:var(--g); box-shadow:inset 0 0 0 1px #0b1115; font-weight:700; font-variant-numeric: tabular-nums; }
.banana-chip.big{ width:26px; height:26px; font-size:16px; }

/* Leaderboard bevel */
.board{ margin:0; padding-left:18px; }
.board-card .card{ border-color:var(--g); box-shadow:0 0 12px rgba(34,197,94,.2); }

/* Header spacing so logo never clips */
.page{ padding-top:20px; }
.brand-logo{ height: clamp(52px, 7.5vw, 88px); margin-top:8px; }

/* Mobile collapse */
@media (max-width:980px){
  .main{ grid-template-columns:1fr; gap:12px; }
  .left,.right{ order:2 } .center{ order:1 }
  #game-grid{ aspect-ratio:auto; min-height:340px; }
}

/* add to styles.css (optional but nice) */
.barrel-row { display:flex; align-items:center; gap:8px; min-height:24px; margin:4px 12px 8px; flex-wrap:wrap; }
.barrel-chip{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  background:#151923; border:1px solid #94a3b8; box-shadow: inset 0 0 0 1px #0b1115; font-size:14px; line-height:1; }
.barrel-chip.big{ width:26px; height:26px; font-size:16px; }
.barrel-count{ height:22px; padding:0 8px; border-radius:11px; display:inline-flex; align-items:center; justify-content:center;
  background:#151923; border:1px solid #94a3b8; box-shadow: inset 0 0 0 1px #0b1115; color:#cbd5e1; font-weight:700; font-variant-numeric: tabular-nums; }