/* ===== IdlePlinko — incremental physics plinko ===== */
:root {
  --bg:      #070a12;
  --bg-2:    #0c111d;
  --panel:   #121a2b;
  --panel-2: #18233a;
  --panel-3: #1e2c47;
  --line:    #243350;
  --line-2:  #2e4067;
  --text:    #eaf1fb;
  --muted:   #8ba0c4;
  --muted-2: #61729a;
  --green:   #23e08c;
  --green-2: #16b978;
  --violet:  #8b5cf6;
  --red:     #ff5470;
  --gold:    #ffce55;
  --radius:  14px;
  --shadow:  0 18px 44px rgba(0,0,0,.55);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background:
    radial-gradient(900px 500px at 12% -8%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(1000px 560px at 92% -6%, rgba(35,224,140,.14), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", "Segoe UI", -apple-system, Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
h3 { font-size: 15px; font-weight: 800; letter-spacing: .2px; }

/* ===== Top bar ===== */
.topbar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 12px 22px;
  background: linear-gradient(180deg, rgba(18,26,43,.94), rgba(12,17,29,.94));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(150deg, var(--gold), #e0a92e);
  color: #2a1e00; display: grid; place-items: center; font-size: 18px; font-weight: 900;
  box-shadow: 0 6px 18px rgba(255,206,85,.35);
}
.logo-text { font-size: 20px; letter-spacing: .3px; }
.topbar-center { display: flex; justify-content: center; }
.topbar-right { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }

.money-box { text-align: center; }
.money-main { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 30px; font-weight: 900; letter-spacing: .5px; font-variant-numeric: tabular-nums; line-height: 1.05; }
.money-cur { color: var(--gold); font-size: 22px; }
.money-sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.money-sub span { color: var(--green); }

.core-chip { display: flex; align-items: center; gap: 5px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; font-weight: 800; font-size: 13px; color: var(--violet); }
.core-chip b { color: var(--text); }
.icon-btn { background: var(--panel); color: var(--muted); border: 1px solid var(--line-2); padding: 0; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-weight: 600; font-family: inherit; font-size: 16px; }
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.sound-btn { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font-size: 16px; cursor: pointer; display: grid; place-items: center; }
.sound-btn:hover { border-color: var(--green); }
.sound-btn.muted { color: var(--muted-2); }

/* ===== Layout ===== */
.layout { flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 18px; padding: 18px 22px 26px; max-width: 1280px; width: 100%; margin: 0 auto; align-items: start; }
.board-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.side-col { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }

/* ===== Board ===== */
.plinko-board { background: radial-gradient(120% 90% at 50% 0%, #16233c, #0a1220); border: 1px solid var(--line-2); border-radius: 18px; padding: 14px 14px 10px; box-shadow: var(--shadow); }
#board-canvas { width: 100%; height: 520px; display: block; }
.plinko-buckets { display: grid; gap: 4px; margin-top: 8px; }
.pk-bucket { text-align: center; font-size: 11px; font-weight: 800; color: #0a1018; padding: 8px 2px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.pk-bucket.hit { animation: pkHit .4s ease; }
@keyframes pkHit { 0% { transform: translateY(0);} 35% { transform: translateY(6px) scale(1.08); filter: brightness(1.35);} 100% { transform: translateY(0);} }

/* ===== Board controls ===== */
.board-controls { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: stretch; }
.drop-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 18px; border: none; border-radius: 14px; cursor: pointer; font-family: inherit;
  background: linear-gradient(150deg, var(--gold), #e0a92e); color: #2a1e00;
  box-shadow: 0 10px 26px rgba(255,206,85,.28); transition: filter .12s, transform .08s;
}
.drop-btn:hover { filter: brightness(1.06); }
.drop-btn:active { transform: translateY(2px); }
.drop-main { font-size: 19px; font-weight: 900; letter-spacing: .4px; }
.drop-sub { font-size: 12px; font-weight: 800; opacity: .7; }
.ctl-side { display: flex; gap: 12px; align-items: flex-end; }
.field-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.seg { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.seg-btn { padding: 9px 12px; background: transparent; border: none; border-radius: 7px; color: var(--muted); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; }
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.auto-toggle { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 14px; cursor: pointer; font-weight: 700; font-size: 13px; user-select: none; }
.auto-toggle input { accent-color: var(--green); width: 16px; height: 16px; cursor: pointer; }
.auto-toggle.locked { opacity: .45; cursor: not-allowed; }

/* ===== Mini stats ===== */
.mini-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ms { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.ms span { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); font-weight: 700; }
.ms b { font-size: 16px; font-variant-numeric: tabular-nums; }

/* ===== Cards / shop ===== */
.card { background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.hint { font-size: 11px; color: var(--muted-2); font-weight: 700; }
.upgrades { display: flex; flex-direction: column; gap: 8px; }
.upg {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 11px;
  padding: 11px 12px; cursor: pointer; font-family: inherit; color: var(--text); text-align: left;
  transition: border-color .14s, transform .08s, background .14s;
}
.upg:hover:not(:disabled) { transform: translateY(-1px); }
.upg.afford { border-color: rgba(35,224,140,.5); }
.upg.afford:hover { border-color: var(--green); background: rgba(35,224,140,.06); }
.upg.poor { opacity: .62; cursor: default; }
.upg.maxed { opacity: .5; cursor: default; border-color: var(--gold); }
.upg-icon { font-size: 21px; }
.upg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upg-top { display: flex; align-items: baseline; gap: 7px; }
.upg-top b { font-size: 13.5px; font-weight: 800; }
.upg-lv { font-size: 10px; color: var(--muted-2); font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.upg-desc { font-size: 11px; color: var(--muted); line-height: 1.35; }
.upg-eff { font-size: 11px; color: var(--green); font-weight: 800; }
.upg-cost { font-size: 13px; font-weight: 900; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.upg.poor .upg-cost { color: var(--muted-2); }

.prestige-card { border-color: rgba(139,92,246,.35); }
.prestige-desc { font-size: 12px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }
.prestige-desc b { color: var(--violet); }
.prestige-btn { width: 100%; padding: 13px; border: none; border-radius: 11px; cursor: pointer; font-family: inherit; font-weight: 900; font-size: 14px; background: linear-gradient(150deg, var(--violet), #6d3ff0); color: #fff; box-shadow: 0 10px 24px rgba(139,92,246,.28); }
.prestige-btn:disabled { background: var(--panel-2); color: var(--muted-2); box-shadow: none; cursor: default; }

/* ===== Jackpot + combo strip ===== */
.board-top { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.jackpot-box { display: flex; align-items: baseline; gap: 12px; padding: 12px 18px; border-radius: 13px;
  background: linear-gradient(180deg, rgba(255,206,85,.12), rgba(255,206,85,.03));
  border: 1px solid rgba(255,206,85,.4); }
.jp-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--gold); }
.jp-amount { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--gold);
  text-shadow: 0 0 22px rgba(255,206,85,.45); }
.jp-hint { margin-left: auto; font-size: 11px; color: var(--muted-2); font-weight: 600; }

/* Always present in the grid — only its appearance changes — so starting or
   losing a combo never reflows the page. */
.combo-box { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 132px;
  padding: 10px 15px; border-radius: 13px; background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2); transition: opacity .25s, border-color .25s; }
.combo-box.idle { opacity: .4; }
.combo-box.idle .cb-mult { color: var(--muted); }
.cb-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--muted-2); }
.cb-mult { font-size: 21px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--green); line-height: 1; }
.combo-box[data-n="10"] .cb-mult, .combo-box[data-n="11"] .cb-mult { color: #5cc8ff; }
.cb-bar { height: 4px; border-radius: 3px; background: var(--bg); overflow: hidden; }
.cb-fill { height: 100%; background: var(--green); border-radius: 3px; transition: width .1s linear; }

/* ===== Big win callout ===== */
.plinko-board { position: relative; }
.big-win { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; pointer-events: none; z-index: 3; }
.bw-title { font-size: 54px; font-weight: 900; letter-spacing: 3px;
  text-shadow: 0 6px 30px rgba(0,0,0,.7); }
.bw-sub { font-size: 26px; font-weight: 900; color: #fff; margin-top: 2px;
  text-shadow: 0 4px 18px rgba(0,0,0,.7); }
.big-win.pop { animation: bwPop .5s cubic-bezier(.2,.9,.3,1.3); }
@keyframes bwPop {
  0%   { transform: scale(.5); opacity: 0; }
  45%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ===== Quests ===== */
.quests { display: flex; flex-direction: column; gap: 9px; }
.quest { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.q-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.q-top span { color: var(--text); font-weight: 600; }
.q-top b { color: var(--green); font-weight: 800; white-space: nowrap; }
.q-bar { height: 5px; border-radius: 3px; background: var(--bg-2); overflow: hidden; margin: 7px 0 4px; border: 1px solid var(--line); }
.q-fill { height: 100%; background: linear-gradient(90deg, var(--green-2), var(--green)); transition: width .25s; }
.q-prog { font-size: 10.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; font-weight: 600; }

#board-canvas { cursor: pointer; }

/* ===== Buy modes ===== */
.buy-modes { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 4px; margin-bottom: 10px; }
.bmode { flex: 1; padding: 7px 4px; background: transparent; border: none; border-radius: 7px; color: var(--muted); font-weight: 800; font-size: 12px; cursor: pointer; font-family: inherit; }
.bmode:hover { color: var(--text); }
.bmode.active { background: var(--panel-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }

.autobuy { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--muted); user-select: none; }
.autobuy input { accent-color: var(--green); width: 15px; height: 15px; cursor: pointer; }
.autobuy:hover { color: var(--text); border-color: var(--line-2); }

/* ===== Surge + events ===== */
.surge-btn { padding: 0 18px; border: 1px solid rgba(92,200,255,.45); border-radius: 14px; background: rgba(92,200,255,.10); color: #5cc8ff; font-family: inherit; font-weight: 900; font-size: 14px; cursor: pointer; white-space: nowrap; }
.surge-btn:hover:not(:disabled) { background: rgba(92,200,255,.2); border-color: #5cc8ff; }
.surge-btn:disabled { opacity: .45; cursor: default; color: var(--muted-2); border-color: var(--line); background: transparent; }

/* Absolutely positioned inside the board so showing/hiding it never reflows
   the page — it floats over the top of the pegs like a HUD notice. */
.event-banner { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; border: 1px solid var(--gold);
  border-radius: 12px; background: rgba(12,17,29,.86); backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: toastIn .3s ease both; white-space: nowrap; }
.ev-icon { font-size: 22px; }
.ev-text { display: flex; flex-direction: column; gap: 1px; }
.ev-text b { font-size: 14px; font-weight: 900; }
.ev-text span { font-size: 11.5px; color: var(--muted); }
.ev-time { margin-left: auto; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: var(--text); }

/* ===== Quick links ===== */
.quick-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qlink { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; background: linear-gradient(180deg, var(--panel), var(--bg-2)); border: 1px solid var(--line); border-radius: 11px; color: var(--muted); font-family: inherit; font-weight: 700; font-size: 12.5px; cursor: pointer; }
.qlink:hover { color: var(--text); border-color: var(--line-2); }
.qlink b { color: var(--gold); }

/* ===== Achievements + stats modals ===== */
.wide-modal { max-width: 640px; width: calc(100vw - 40px); max-height: 88vh; overflow-y: auto; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
.achv { display: flex; align-items: center; gap: 11px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.achv.locked { opacity: .5; }
.achv.got { border-color: var(--gold); background: linear-gradient(180deg, rgba(255,206,85,.08), var(--bg)); }
.achv-icon { font-size: 19px; }
.achv-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.achv-body b { font-size: 13px; }
.achv-desc { font-size: 11px; color: var(--muted); }
.achv-reward { font-size: 12px; font-weight: 900; color: var(--violet); white-space: nowrap; }

.stat-list { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.strow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; }
.strow span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.strow b { font-size: 13px; font-variant-numeric: tabular-nums; }

.tree-btn { width: 100%; margin-top: 8px; padding: 11px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 13px; background: transparent; color: var(--violet); border: 1px solid rgba(139,92,246,.45); }
.tree-btn:hover { background: rgba(139,92,246,.12); border-color: var(--violet); }

/* ===== Core Lab ===== */
.tree-modal { max-width: 620px; width: calc(100vw - 40px); max-height: 88vh; overflow-y: auto; }
.tree-bank { display: flex; align-items: center; justify-content: space-between; background: var(--bg); border: 1px solid var(--line-2); border-radius: 11px; padding: 12px 15px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; }
.tree-bank b { font-size: 22px; color: var(--violet); letter-spacing: 0; }
.tree-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; }
.tnode { display: flex; flex-direction: column; gap: 7px; text-align: left; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; cursor: pointer; font-family: inherit; color: var(--text); transition: border-color .14s, transform .08s; }
.tnode.afford { border-color: rgba(139,92,246,.55); }
.tnode.afford:hover { border-color: var(--violet); transform: translateY(-2px); background: rgba(139,92,246,.07); }
.tnode.poor { opacity: .58; cursor: default; }
.tnode.maxed { opacity: .55; cursor: default; border-color: var(--gold); }
.tn-head { display: flex; align-items: center; gap: 9px; }
.tn-head b { font-size: 14px; font-weight: 800; }
.tn-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.tn-lv { margin-left: auto; font-size: 11px; font-weight: 800; color: var(--muted-2); }
.tn-desc { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.tn-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.tn-eff { font-size: 11px; font-weight: 800; color: var(--green); }
.tnode.poor .tn-eff, .tnode.maxed .tn-eff { color: var(--muted-2); }
.tn-cost { font-size: 13px; font-weight: 900; color: var(--violet); }

/* ===== Modal ===== */
.modal-overlay { position: fixed; inset: 0; background: rgba(3,6,12,.72); backdrop-filter: blur(5px); display: grid; place-items: center; z-index: 50; }
.modal { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 18px; padding: 28px; max-width: 400px; width: calc(100vw - 40px); box-shadow: var(--shadow); }
.modal h2 { margin-bottom: 10px; }
.modal-note { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 20px; }
.modal-x { position: absolute; top: 12px; right: 15px; background: transparent; border: none; color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; font-family: inherit; }
.modal-x:hover { color: var(--text); }
.modal-actions { display: flex; flex-direction: column; gap: 9px; }
.btn-ghost { background: var(--panel-3); color: var(--text); border: 1px solid var(--line-2); padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; }
.btn-ghost:hover { border-color: var(--green); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid rgba(255,84,112,.4); padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px; }
.btn-danger:hover { background: rgba(255,84,112,.1); }

/* ===== Toasts ===== */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 10px; max-width: 330px; }
.toast { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); animation: toastIn .35s cubic-bezier(.2,.9,.3,1.2) both; }
.toast.out { animation: toastOut .4s ease forwards; }
.toast-icon { font-size: 23px; }
.toast-title { font-weight: 800; font-size: 14px; }
.toast-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.4; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px);} to { opacity: 1; transform: none;} }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px);} }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .layout { grid-template-columns: 1fr; padding: 14px; }
  .side-col { position: static; }
  #board-canvas { height: 420px; }
}
@media (max-width: 620px) {
  .topbar { padding: 10px 14px; }
  .logo-text { display: none; }
  .money-main { font-size: 24px; }
  #board-canvas { height: 340px; }
  .board-controls { grid-template-columns: 1fr; }
  .ctl-side { justify-content: space-between; }
  .mini-stats { grid-template-columns: repeat(2, 1fr); }
}