:root{color-scheme:light;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
body{margin:0;font:14px system-ui,sans-serif;background:#faf9f5;}
img{max-width:100%} [hidden]{display:none!important}

:root{
  --bg:#170807; --bg2:#280e0b; --panel:#331410; --panel2:#3f1712;
  --edge:#5a2418; --line:rgba(255,214,150,.14);
  --cream:#fff4dc; --muted:#d3a988; --dim:#a67a63;
  --gold:#ffc73a; --gold-deep:#e0a21e; --butter:#ffd76b;
  --red:#d3283a; --red-deep:#8f1420;
  --good:#8bd67a; --danger:#ff6b6b;
  --shadow:0 8px 26px rgba(0,0,0,.45);
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  touch-action:manipulation;
  font-family:"Nunito", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--cream);
  background:
    radial-gradient(140% 90% at 50% -10%, #4a1810 0%, #2a0d0a 45%, var(--bg) 100%),
    var(--bg);
  background-attachment:fixed;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}
#app{ max-width:1140px; margin:0 auto; padding-block:18px 40px; padding-inline:16px; }

/* ---------- Marquee header ---------- */
.marquee{
  position:relative; text-align:center;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--edge);
  border-radius:16px;
  padding:14px 16px 12px;
  box-shadow:var(--shadow), inset 0 0 40px rgba(0,0,0,.35);
  overflow:hidden;
}
.bulbs{
  height:14px; margin:2px -4px;
  background:radial-gradient(circle at 11px 7px, var(--gold) 2.6px, rgba(255,199,58,.18) 3.6px, transparent 4.4px) 0 0/22px 14px repeat-x;
  filter:drop-shadow(0 0 5px rgba(255,199,58,.65));
  animation:blink 1.15s steps(1,end) infinite;
}
.bulbs.bottom{ animation-delay:.575s; }
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:.35} }
h1{
  font-family:"Bungee", sans-serif; font-weight:400;
  margin:.18em 0 .04em; line-height:1;
  font-size:clamp(30px, 7vw, 58px);
  color:var(--gold);
  text-shadow:0 2px 0 var(--red-deep), 0 0 18px rgba(255,199,58,.45);
  text-wrap:balance;
}
.tagline{
  margin:0; color:var(--butter); letter-spacing:.16em; text-transform:uppercase;
  font-size:clamp(9px,2.3vw,12px); font-weight:700;
}

/* ---------- Layout ---------- */
.grid{ display:grid; grid-template-columns:minmax(300px,0.9fr) 1.35fr; gap:18px; margin-top:18px; align-items:start; }
@media (max-width:900px){ .grid{ grid-template-columns:1fr; } }
.panel{
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--edge); border-radius:16px;
  box-shadow:var(--shadow);
}

/* ---------- Left / clicker ---------- */
.left{ padding:18px 16px; text-align:center; position:sticky; top:env(safe-area-inset-top,0px); }
@media (max-width:900px){ .left{ position:static; } }
.left-top{ display:flex; flex-direction:column; }
.clicker-col{ display:block; }
/* On medium/narrow viewports, sit the Concession Report beside the clicker */
@media (min-width:520px) and (max-width:900px){
  .left-top{ flex-direction:row; align-items:flex-start; gap:22px; }
  .clicker-col{ flex:1 1 0; min-width:0; }
  .stats{ flex:1 1 0; min-width:0; margin-top:6px; border-top:none; border-left:1px dashed var(--line); padding-left:22px; }
  .clicker{ --sz:min(190px,38vw); }
}
.bank-num{
  font-family:"Bungee",sans-serif; color:var(--cream);
  font-size:clamp(30px,8vw,46px); line-height:1;
  font-variant-numeric:tabular-nums; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.bank-label{ color:var(--muted); font-weight:700; letter-spacing:.04em; margin-top:4px; font-size:13px; }
.cps{ color:var(--butter); font-weight:800; margin-top:8px; font-size:15px; font-variant-numeric:tabular-nums; }

.clicker-wrap{ margin:16px 0 6px; }
.clicker{
  --sz:min(210px,54vw);
  width:var(--sz); height:var(--sz); border-radius:50%;
  border:none; cursor:pointer; position:relative;
  background:radial-gradient(circle at 50% 38%, #ffe7a0, #ffcf5c 45%, #e79b1c 78%, #b56d10 100%);
  box-shadow:0 0 0 6px rgba(255,199,58,.18), 0 0 34px rgba(255,199,58,.35), var(--shadow);
  font-size:calc(var(--sz)*0.5); line-height:1;
  display:inline-grid; place-items:center; user-select:none;
  transition:transform .08s ease;
  touch-action:manipulation;
}
.clicker:hover{ transform:scale(1.03); }
.clicker:active{ transform:scale(.94); }
.clicker.pop{ animation:pop .18s ease; }
@keyframes pop{ 0%{transform:scale(.9)} 60%{transform:scale(1.06)} 100%{transform:scale(1)} }
.clicker:focus-visible{ outline:3px solid var(--cream); outline-offset:4px; }
.bucket{ filter:drop-shadow(0 4px 6px rgba(0,0,0,.4)); pointer-events:none; }
.click-hint{ color:var(--muted); font-size:13px; font-weight:700; margin-top:2px; }
.click-hint #clickval{ color:var(--gold); }

.buff{
  margin:10px auto 0; max-width:260px; display:none;
  background:rgba(255,199,58,.14); border:1px solid var(--gold-deep);
  border-radius:10px; padding:7px 10px; color:var(--butter); font-weight:800; font-size:13px;
  box-shadow:0 0 18px rgba(255,199,58,.25);
}
.buff.show{ display:block; animation:pulse 1s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 26px rgba(255,199,58,.5);} }

/* ---------- Controls ---------- */
.controls{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.buymode{
  display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap;
  color:var(--muted); font-weight:800; font-size:13px;
  position:sticky; top:env(safe-area-inset-top,0px); z-index:5;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--edge); border-radius:13px; padding:9px 10px;
}
.buymode button, .savebtns button, .tabs button{
  font-family:inherit; font-weight:800; cursor:pointer;
  background:var(--panel); color:var(--cream);
  border:1px solid var(--edge); border-radius:9px; padding:7px 11px; font-size:13px;
  transition:transform .06s, background .15s, border-color .15s;
}
.buymode button:hover,.savebtns button:hover,.tabs button:hover{ transform:translateY(-1px); border-color:var(--gold-deep); }
.buymode button.on{ background:var(--gold); color:#3a1608; border-color:var(--gold); }
.savebtns{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.savebtns .danger{ color:var(--danger); border-color:#6e2020; }
.savebtns .danger:hover{ background:#3a1414; border-color:var(--danger); }
.saveinfo{ color:var(--dim); font-size:11px; min-height:14px; font-weight:700; }

.stats{ margin-top:16px; text-align:left; border-top:1px dashed var(--line); padding-top:12px; }
.stats summary{
  font-family:"Bungee",sans-serif; font-weight:400; font-size:14px; color:var(--butter);
  letter-spacing:.02em; cursor:pointer; list-style:none; user-select:none;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.stats summary::-webkit-details-marker{ display:none; }
.stats summary::after{
  content:'▾'; font-size:12px; color:var(--muted); transition:transform .15s ease;
}
.stats[open] summary::after{ transform:rotate(180deg); }
.stats[open] summary{ margin-bottom:8px; }
#statlist{ list-style:none; margin:0; padding:0; display:grid; gap:5px; }
#statlist li{ display:flex; justify-content:space-between; gap:12px; font-size:13px; color:var(--muted); font-weight:700; }
#statlist li b{ color:var(--cream); font-variant-numeric:tabular-nums; }

/* ---------- Right / shop ---------- */
.right{ display:flex; flex-direction:column; gap:12px; }
.tabs{ display:flex; gap:8px; }
.tabs button{ flex:1; position:relative; }
.tabs button.on{ background:var(--red); color:var(--cream); border-color:var(--red); }
.badge{
  display:none; position:absolute; top:-7px; right:-6px; min-width:19px; height:19px; padding:0 4px;
  background:var(--gold); color:#3a1608; border-radius:10px; font-size:11px; line-height:19px; text-align:center;
}
.badge.show{ display:inline-block; }
.badge.ready{ background:var(--gold); box-shadow:0 0 10px rgba(255,199,58,.9); animation:badgepulse 1s ease-in-out infinite; }
@keyframes badgepulse{ 50%{ transform:scale(1.22);} }

/* Floating "upgrades ready" nudge */
.upnudge{
  position:fixed; left:50%; bottom:calc(16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  z-index:85; display:flex; gap:9px; align-items:center; cursor:pointer;
  background:var(--gold); color:#3a1608; border:none; border-radius:999px;
  font-family:"Bungee",sans-serif; font-size:13px; padding:11px 18px;
  box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 22px rgba(255,199,58,.55);
  animation:nudge 1.3s ease-in-out infinite;
}
.upnudge .arw{ font-size:16px; }
@keyframes nudge{ 50%{ transform:translate(-50%,-6px);} }
@media (prefers-reduced-motion:reduce){ .upnudge{ animation:none; } }

.tabpane{ display:flex; flex-direction:column; gap:9px; }

.shop-item, .up-item{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px;
  text-align:left; width:100%; cursor:pointer; font-family:inherit;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:2px solid var(--edge); border-radius:13px; padding:11px 14px;
  color:var(--cream); transition:transform .07s, border-color .15s, box-shadow .15s, filter .15s;
}
.shop-item:hover, .up-item:hover{ transform:translateY(-2px); border-color:var(--gold-deep); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.shop-item.locked-buy, .up-item.locked-buy{ filter:grayscale(.5) brightness(.72); cursor:not-allowed; }
.shop-item.locked-buy:hover, .up-item.locked-buy:hover{ transform:none; border-color:var(--edge); box-shadow:none; }
.si-icon, .ui-icon{ font-size:34px; line-height:1; width:44px; text-align:center; filter:drop-shadow(0 3px 4px rgba(0,0,0,.4)); }
.si-name, .ui-name{ font-weight:800; font-size:16px; display:block; }
.si-sub{ color:var(--dim); font-size:12px; font-weight:700; display:block; margin-top:1px; }
.ui-blurb{ color:var(--muted); font-size:12.5px; font-weight:700; display:block; margin-top:2px; line-height:1.25; }
.si-cost, .ui-cost{ color:var(--gold); font-weight:800; font-size:13.5px; display:block; margin-top:3px; font-variant-numeric:tabular-nums; }
.shop-item.locked-buy .si-cost, .up-item.locked-buy .ui-cost{ color:var(--danger); }
.si-count{ font-family:"Bungee",sans-serif; font-weight:400; font-size:26px; color:rgba(255,244,220,.28); font-variant-numeric:tabular-nums; }
.si-count.has{ color:var(--butter); }

.empty{ color:var(--dim); font-weight:700; text-align:center; padding:26px 10px; font-size:14px; }

/* achievements */
#pane-ach{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:9px; }
.ach{
  background:var(--panel); border:2px solid var(--edge); border-radius:12px; padding:10px 11px;
  display:flex; gap:9px; align-items:center; filter:grayscale(1) brightness(.55); position:relative;
}
.ach.earned{ filter:none; border-color:var(--gold-deep); background:linear-gradient(180deg,#4a2410,var(--panel)); }
.ach-icon{ font-size:26px; line-height:1; }
.ach-name{ font-weight:800; font-size:13.5px; }
.ach-blurb{ color:var(--muted); font-size:11px; font-weight:700; margin-top:1px; }
.ach.earned .ach-name{ color:var(--butter); }

/* ---------- Ticker ---------- */
.ticker{ margin-top:20px; overflow:hidden; border:2px solid var(--edge); border-radius:11px; background:var(--panel); padding:8px 0; }
.ticker-track{ display:inline-block; white-space:nowrap; padding-left:100%; animation:scroll 34s linear infinite; color:var(--butter); font-weight:800; font-size:13px; letter-spacing:.04em; }
.ticker-track span{ padding:0 30px; }
@keyframes scroll{ to{ transform:translateX(-100%); } }

/* ---------- FX / golden / toast / modal ---------- */
.fxlayer{ position:fixed; inset:0; pointer-events:none; z-index:60; overflow:hidden; }
.float{ position:fixed; font-family:"Bungee",sans-serif; font-size:20px; color:var(--gold); text-shadow:0 2px 6px rgba(0,0,0,.6); animation:floatUp 1s ease-out forwards; will-change:transform,opacity; }
@keyframes floatUp{ 0%{opacity:1; transform:translate(-50%,0) scale(1)} 100%{opacity:0; transform:translate(-50%,-70px) scale(1.25)} }
.kernel{ position:fixed; font-size:22px; pointer-events:none; animation:kfly .8s ease-out forwards; }
@keyframes kfly{ to{ opacity:0; } }

.golden-layer{ position:fixed; inset:0; pointer-events:none; z-index:70; }
.golden{
  position:fixed; pointer-events:auto; cursor:pointer; border:none; background:none;
  font-size:46px; filter:drop-shadow(0 0 12px var(--gold)) saturate(1.4) brightness(1.15);
  animation:gfloat 3.2s ease-in-out infinite; transform-origin:center;
}
@keyframes gfloat{ 0%,100%{transform:translateY(0) rotate(-8deg)} 50%{transform:translateY(-14px) rotate(8deg)} }

.toast-wrap{ position:fixed; right:14px; bottom:14px; z-index:90; display:flex; flex-direction:column; gap:8px; align-items:flex-end; max-width:min(340px,88vw); }
.toast{
  background:linear-gradient(180deg,var(--panel2),var(--panel)); border:2px solid var(--gold-deep);
  border-radius:12px; padding:10px 13px; box-shadow:var(--shadow); animation:tin .3s ease;
  display:flex; gap:10px; align-items:center;
}
.toast .ti{ font-size:26px; }
.toast b{ color:var(--gold); display:block; font-size:14px; }
.toast small{ color:var(--muted); font-weight:700; }
@keyframes tin{ from{ opacity:0; transform:translateX(30px); } }

.modal-back{ position:fixed; inset:0; background:rgba(8,3,2,.72); z-index:100; display:grid; place-items:center; padding:16px; }
.modal{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border:2px solid var(--edge); border-radius:16px; padding:20px; max-width:460px; width:100%; box-shadow:var(--shadow); }
.modal h3{ font-family:"Bungee",sans-serif; font-weight:400; color:var(--gold); margin:0 0 12px; font-size:19px; }
.modal p{ color:var(--muted); font-weight:700; margin:0 0 12px; line-height:1.45; }
.modal textarea{ width:100%; height:120px; resize:vertical; background:var(--bg2); color:var(--cream); border:1px solid var(--edge); border-radius:9px; padding:9px; font-family:ui-monospace,monospace; font-size:12px; }
.modal-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
.modal-actions button{ font-family:inherit; font-weight:800; cursor:pointer; border-radius:9px; padding:9px 15px; border:1px solid var(--edge); background:var(--panel); color:var(--cream); }
.modal-actions button.primary{ background:var(--gold); color:#3a1608; border-color:var(--gold); }
.modal-actions button.danger{ background:#3a1414; color:var(--danger); border-color:var(--danger); }

@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001s!important; transition:none!important; } .ticker-track{ animation:none; padding-left:0; } }