:root{
  --carbon:#101114; --panel:#17181d; --panel2:#1f2027; --line:#2c2e36;
  --lime:#C5FF49; --lilac:#B59AFF; --paper:#F5F3ED; --dim:rgba(245,243,237,.55);
  --red:#FF5C7A; --gold:#FFD24A; --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--carbon);color:var(--paper);font-family:var(--mono);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
button{font-family:var(--mono);cursor:pointer;touch-action:manipulation}
#app{position:absolute;inset:0;display:grid;grid-template-rows:auto minmax(200px,42%) 1fr;grid-template-columns:100%}
body.spooky #app{background:radial-gradient(ellipse at 50% 0%,#2a1838 0%,var(--carbon) 70%)}

/* top bar */
#top{padding:8px 12px 6px;border-bottom:1px solid var(--line);background:rgba(16,17,20,.9);z-index:3}
.row1{display:flex;align-items:center;gap:10px}
#cash{font-size:26px;font-weight:800;color:var(--lime);letter-spacing:-.5px;flex:1;white-space:nowrap;transition:transform .08s;transform-origin:left center;font-variant-numeric:tabular-nums}
#cash.bump{transform:scale(1.08)}
#cash.neg{color:var(--red)}
#clock{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;line-height:1.25}
#day{font-weight:800;color:var(--lilac)}
#time{color:var(--dim)}
.chip{background:var(--panel2);border:1px solid var(--line);color:var(--paper);border-radius:8px;padding:4px 7px;font-size:14px;opacity:.55}
.chip.on{opacity:1;border-color:#ff8a3d}
#dayBar{height:3px;background:var(--line);margin:6px 0 5px;border-radius:2px;overflow:hidden}
#dayBar i{display:block;height:100%;width:0;background:var(--lilac)}
#lane{position:relative;height:26px;border-radius:6px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
#collector{position:absolute;top:1px;left:0;font-size:18px;transition:left .3s linear;filter:grayscale(.2)}
#door{position:absolute;top:1px;right:4px;font-size:18px}
#laneText{position:absolute;left:30px;right:30px;top:5px;text-align:center;font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lane.warn{border-color:var(--red)}
#lane.warn #laneText{color:var(--red);font-weight:700}
#lane.danger{animation:shake .25s infinite}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}

/* play field */
#field{position:relative;overflow:hidden;background:
  linear-gradient(rgba(197,255,73,.04) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,rgba(197,255,73,.04) 1px,transparent 1px) 0 0/28px 28px;touch-action:none}
#field.dark::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.35),rgba(0,0,0,.85));pointer-events:none;z-index:5}
#status{position:absolute;left:8px;top:6px;right:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:6;pointer-events:none}
#status span{font-size:10px;background:rgba(255,92,122,.18);color:var(--red);border:1px solid var(--red);padding:2px 6px;border-radius:5px;font-weight:700}
#hint{position:absolute;left:0;right:0;bottom:20px;text-align:center;font-size:12px;color:var(--dim);pointer-events:none;transition:opacity .5s}
.pop{position:absolute;width:138px;background:var(--paper);color:var(--carbon);border:2px solid var(--carbon);border-radius:7px;box-shadow:3px 3px 0 rgba(0,0,0,.45);font-size:11px;cursor:pointer;animation:popIn .14s ease-out;touch-action:none}
.pop .tb{display:flex;align-items:center;justify-content:space-between;background:var(--lilac);padding:3px 6px;border-radius:4px 4px 0 0;font-weight:800;font-size:10px}
.pop .tb b{background:var(--carbon);color:var(--paper);width:16px;height:16px;line-height:16px;text-align:center;border-radius:3px;font-size:11px}
.pop .bd{padding:6px 7px 7px;line-height:1.25}
.pop .bd em{display:block;font-style:normal;font-weight:800;color:#3a7a00;margin-top:3px}
.pop.tough .tb{background:var(--red)}
.pop.gold .tb{background:var(--gold)}
.pop.hit{animation:hit .1s}
.pop.die{animation:die .16s forwards;pointer-events:none}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes hit{50%{transform:scale(.94) rotate(-2deg)}}
@keyframes die{to{transform:scale(1.15);opacity:0}}
.pig{position:absolute;width:74px;height:74px;font-size:56px;line-height:74px;text-align:center;cursor:pointer;animation:popIn .2s ease-out,wob 1.4s ease-in-out infinite;touch-action:none;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.4))}
.pig .hp{position:absolute;left:8px;right:8px;bottom:-4px;height:5px;background:rgba(0,0,0,.5);border-radius:3px;overflow:hidden}
.pig .hp i{display:block;height:100%;background:var(--lime)}
.pig.hit{animation:hit .1s}
@keyframes wob{50%{transform:rotate(6deg)}}
.gig{position:absolute;right:8px;bottom:30px;width:200px;background:var(--panel2);border:2px solid var(--lime);border-radius:10px;padding:8px;font-size:11px;z-index:7;animation:popIn .2s}
.gig .t{font-weight:800;color:var(--lime);margin-bottom:3px}
.gig .row{display:flex;gap:6px;margin-top:6px}
.gig button{flex:1;border:0;border-radius:6px;padding:6px;font-weight:800;font-size:11px}
.gig .yes{background:var(--lime);color:var(--carbon)}
.gig .no{background:var(--line);color:var(--paper)}
.gig .bar{height:3px;background:var(--line);margin-top:6px}
.gig .bar i{display:block;height:100%;background:var(--lime)}
.float{position:absolute;font-weight:800;font-size:14px;pointer-events:none;animation:up .9s ease-out forwards;z-index:8;text-shadow:0 2px 0 var(--carbon),0 -1px 0 var(--carbon)}
@keyframes up{to{transform:translateY(-46px);opacity:0}}
.coin{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--gold);pointer-events:none;z-index:8;border:1px solid #a87b00}

/* panel */
#panel{display:flex;flex-direction:column;min-height:0;border-top:1px solid var(--line);background:var(--panel)}
#tabs{display:flex;border-bottom:1px solid var(--line)}
#tabs button{flex:1;background:none;border:0;color:var(--dim);padding:10px 2px;font-size:12px;font-weight:700;border-bottom:2px solid transparent}
#tabs button.on{color:var(--lime);border-bottom-color:var(--lime)}
#tabs b{background:var(--red);color:var(--carbon);border-radius:8px;padding:0 5px;font-size:10px}
#tabs b:empty{display:none}
#list{flex:1;overflow-y:auto;padding:8px 10px 34px;-webkit-overflow-scrolling:touch}
.card{display:flex;align-items:center;gap:9px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:8px 9px;margin-bottom:7px;position:relative}
.card .ic{font-size:22px;width:28px;text-align:center;flex:none}
.card .mid{flex:1;min-width:0}
.card .nm{font-weight:800;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .sub{font-size:11px;color:var(--dim);margin-top:2px}
.card .bar{height:4px;background:var(--line);border-radius:2px;margin-top:5px;overflow:hidden}
.card .bar i{display:block;height:100%;background:var(--lilac);width:0}
.card.late{border-color:var(--red);background:rgba(255,92,122,.08)}
.card.late .bar i{background:var(--red)}
.card.late .sub{color:var(--red)}
.card.soon .bar i{background:var(--gold)}
.card.locked{opacity:.45}
.btn{border:0;border-radius:8px;padding:8px 10px;font-weight:800;font-size:12px;background:var(--lime);color:var(--carbon);min-width:76px;flex:none}
.btn:disabled{background:var(--line);color:var(--dim);cursor:default}
.btn.alt{background:var(--lilac)}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--dim);min-width:0;padding:6px 8px;font-size:10px}
.btn.red{background:var(--red)}
.btn:disabled,.btn.alt:disabled,.btn.red:disabled{background:var(--line);color:var(--dim);cursor:default}
#combo{position:absolute;right:10px;bottom:30px;font-weight:800;font-size:18px;color:var(--gold);pointer-events:none;opacity:0;transition:opacity .2s;text-shadow:0 2px 0 rgba(0,0,0,.4)}
#combo.on{opacity:1}
.evt{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.evt .btn{text-align:left;padding:10px 12px;line-height:1.35}
.evt .btn small{display:block;font-weight:600;opacity:.75;font-size:11px}
.sect{font-size:11px;color:var(--dim);margin:12px 2px 6px;text-transform:lowercase;letter-spacing:.5px}
.empty{color:var(--dim);font-size:12px;text-align:center;padding:18px 8px;line-height:1.5}
.big{font-size:13px;line-height:1.5;color:var(--paper);background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px}
.big b{color:var(--lime)}
#credit{position:absolute;left:8px;bottom:4px;font-size:10px;color:rgba(245,243,237,.35);pointer-events:none;z-index:4}
canvas.spark{width:100%;height:40px;display:block;margin-top:6px}

/* modal */
#modal{position:fixed;inset:0;background:rgba(10,10,12,.78);display:flex;align-items:center;justify-content:center;z-index:20;padding:14px}
#modal[hidden]{display:none}
.box{width:100%;max-width:400px;max-height:100%;overflow:auto;background:var(--carbon);border:2px solid var(--lime);border-radius:12px;animation:popIn .18s}
.box .tb{background:var(--lime);color:var(--carbon);font-weight:800;font-size:12px;padding:7px 12px;display:flex;justify-content:space-between}
.box.bad{border-color:var(--red)} .box.bad .tb{background:var(--red)}
.box.lilac{border-color:var(--lilac)} .box.lilac .tb{background:var(--lilac)}
.box .in{padding:14px 16px 16px;font-size:13px;line-height:1.5}
.box h2{margin:2px 0 8px;font-size:22px;color:var(--lime)}
.box.bad h2{color:var(--red)}
.box .stats{display:grid;grid-template-columns:1fr auto;gap:3px 10px;font-size:12px;margin:10px 0;color:var(--dim)}
.box .stats b{color:var(--paper);text-align:right}
.box .acts{display:flex;gap:8px;margin-top:12px}
.box .acts .btn{flex:1;padding:11px}
.box canvas{width:100%;border-radius:8px;display:block;margin-top:8px}
#toast{position:fixed;left:50%;top:92px;transform:translateX(-50%);background:var(--paper);color:var(--carbon);font-weight:800;font-size:12px;padding:8px 12px;border-radius:8px;z-index:25;max-width:90%;text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.4)}
#toast.bad{background:var(--red)}
#toast[hidden]{display:none}

/* desktop / landscape */
@media (min-width:820px) and (min-aspect-ratio:1/1){
  #app{grid-template-columns:1fr minmax(340px,38%);grid-template-rows:auto 1fr}
  #top{grid-column:1/3}
  #field{grid-column:1;grid-row:2}
  #panel{grid-column:2;grid-row:2;border-top:0;border-left:1px solid var(--line)}
  #cash{font-size:32px}
  .pop{width:168px;font-size:12px}
}