/* ============================================================
   FRGMNT° DESCENT — styles for the panels around the canvas.
   The play field itself is drawn in JS, so nothing here affects
   gameplay visuals. Palette is mirrored in js/config.js COLORS;
   change both if you change one.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --void:#0A0A0A;
  --off:#ECECEA;
  --nickel:#C8C8C8;
  --lime:#B3C46A;
  --red:#C4514A;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-text-size-adjust:100%;}
html,body{height:100%;height:100dvh;background:var(--void);overscroll-behavior:none;}
body{
  display:flex;align-items:center;justify-content:center;
  font-family:'Poppins',system-ui,sans-serif;color:var(--off);
  overflow:hidden;-webkit-tap-highlight-color:transparent;touch-action:none;
}

/* ---- frame ---- */
#wrap{
  position:relative;width:100%;max-width:520px;height:100%;max-height:900px;
  background:var(--void);padding-bottom:env(safe-area-inset-bottom);
}
canvas#game{display:block;width:100%;height:100%;touch-action:none;}

/* ---- panels ---- */
.panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:15px;
  padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
  background:rgba(10,10,10,0.92);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.hidden{display:none !important;}

/* ---- type ---- */
.mark{font-weight:300;font-size:13px;letter-spacing:0.42em;color:var(--nickel);padding-left:0.42em;}
.mark b{font-weight:400;color:var(--off);}
.title{font-weight:300;font-size:clamp(36px,12vw,58px);letter-spacing:0.18em;
       color:var(--off);padding-left:0.18em;line-height:1;}
.title.sm{font-size:clamp(23px,7vw,34px);}
.title span{color:var(--lime);}
.sub{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;
     letter-spacing:0.06em;color:var(--nickel);line-height:1.9;max-width:300px;}
.note{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
      letter-spacing:0.03em;color:var(--nickel);line-height:1.8;max-width:320px;}

/* ---- controls ---- */
button{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.2em;
  background:transparent;color:var(--off);border:1px solid var(--nickel);
  padding:15px 30px;min-height:48px;cursor:pointer;touch-action:manipulation;
  transition:border-color .15s,color .15s;
}
button:hover,button:focus-visible{border-color:var(--lime);color:var(--lime);outline:none;}
button.primary{border-color:var(--lime);color:var(--lime);}
button.ghost{border-color:rgba(200,200,200,0.35);color:var(--nickel);
             padding:12px 22px;font-size:11px;min-height:44px;}
.btnrow{display:flex;flex-direction:column;gap:9px;align-items:center;width:100%;max-width:260px;}
.btnrow>*{width:100%;}
a.shop{
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;letter-spacing:0.2em;
  text-decoration:none;color:var(--void);background:var(--lime);border:1px solid var(--lime);
  padding:15px 24px;min-height:48px;transition:opacity .15s;
}
a.shop:hover,a.shop:focus-visible{opacity:.82;outline:none;}

/* pause sits in the gap between the two top HUD counters */
#pauseBtn{
  position:absolute;top:calc(18px + env(safe-area-inset-top));left:50%;
  transform:translateX(-50%);padding:7px 13px;min-height:0;
  font-size:9px;letter-spacing:0.18em;border-color:rgba(200,200,200,0.3);
  color:var(--nickel);background:rgba(10,10,10,0.55);
}

/* ---- legend ---- */
.legend{display:flex;flex-direction:column;gap:11px;width:100%;max-width:312px;}
.lrow{display:flex;align-items:center;gap:14px;text-align:left;}
.lrow canvas{width:42px;height:42px;flex:0 0 42px;}
.lrow .lt{font-family:'JetBrains Mono',ui-monospace,monospace;}
.lrow .lt .n{font-size:10px;letter-spacing:0.16em;color:var(--off);}
.lrow .lt .n.lime{color:var(--lime);}
.lrow .lt .d{font-size:10px;letter-spacing:0.02em;color:var(--nickel);margin-top:3px;line-height:1.6;}
.rule{
  width:100%;max-width:312px;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px;color:var(--lime);letter-spacing:0.12em;text-align:left;line-height:1.8;
  border-top:1px solid rgba(179,196,106,0.3);padding-top:10px;
}
.rule i{font-style:normal;color:var(--nickel);}

/* ---- stats ---- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:11px 34px;
       font-family:'JetBrains Mono',ui-monospace,monospace;}
.stat .k{font-size:9px;letter-spacing:0.16em;color:var(--nickel);}
.stat .v{font-size:23px;font-weight:500;color:var(--off);margin-top:3px;}
.stat .v.lime{color:var(--lime);}

/* ---- tables ---- */
table.rec{font-family:'JetBrains Mono',ui-monospace,monospace;border-collapse:collapse;
          width:100%;max-width:320px;}
table.rec th{font-size:8px;letter-spacing:0.08em;color:var(--nickel);font-weight:400;
             text-align:right;padding:0 0 7px;border-bottom:1px solid rgba(200,200,200,0.22);}
table.rec th:first-child,table.rec th:nth-child(2){text-align:left;}
table.rec td{font-size:11px;color:var(--off);text-align:right;padding:8px 0;
             border-bottom:1px solid rgba(200,200,200,0.08);}
table.rec td:first-child{text-align:left;color:var(--nickel);font-size:10px;}
table.rec td:nth-child(2){text-align:left;font-size:10px;letter-spacing:0.06em;}
table.rec td.r{color:var(--lime);}
table.rec tr.new td,table.rec tr.new td:first-child{color:var(--lime);}
td.tbl-empty{text-align:center;padding:18px 0;color:var(--nickel);font-size:11px;border:none;}
.reclabel{width:100%;max-width:320px;text-align:left;
          font-family:'JetBrains Mono',ui-monospace,monospace;
          font-size:9px;letter-spacing:0.18em;color:var(--lime);margin-top:4px;}

/* ---- recovery manifest ---- */
.manifest{width:100%;max-width:320px;font-family:'JetBrains Mono',ui-monospace,monospace;text-align:left;}
.manifest .mh{font-size:9px;letter-spacing:0.16em;color:var(--nickel);
              padding-bottom:6px;display:flex;justify-content:space-between;}
.manifest .mcol{display:grid;grid-template-columns:1fr auto 62px;gap:10px;
                font-size:8px;letter-spacing:0.1em;color:var(--nickel);
                padding-bottom:6px;border-bottom:1px solid rgba(200,200,200,0.22);}
.manifest .mcol span:nth-child(3){text-align:right;}
.manifest .ml{max-height:132px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.manifest .mi{display:grid;grid-template-columns:1fr auto 62px;gap:10px;align-items:baseline;
              padding:7px 0;border-bottom:1px solid rgba(200,200,200,0.08);}
.manifest .mi .nm{font-size:11px;color:var(--off);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.manifest .mi .tr{font-size:9px;letter-spacing:0.12em;color:var(--nickel);white-space:nowrap;}
.manifest .mi .ms{font-size:10px;color:var(--nickel);white-space:nowrap;text-align:right;}
.manifest .mi.sr .nm,.manifest .mi.sr .tr,.manifest .mi.sr .ms{color:var(--lime);}
.manifest .mt{display:flex;justify-content:space-between;align-items:baseline;
              font-size:10px;letter-spacing:0.12em;color:var(--lime);padding-top:9px;}
.manifest .mt .tot{display:flex;gap:8px;align-items:baseline;}
.manifest .mt .tot .lbl{font-size:9px;color:var(--nickel);letter-spacing:0.14em;}
.manifest .none{font-size:10px;color:var(--nickel);padding:14px 0;text-align:center;}

/* ---- name entry ---- */
.entry{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:260px;}
input.brand{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:14px;letter-spacing:0.22em;
  text-align:center;text-transform:uppercase;background:transparent;color:var(--lime);
  border:1px solid var(--lime);padding:14px 10px;width:100%;min-height:48px;border-radius:0;
}
input.brand:focus{outline:none;border-color:var(--off);}
input.brand::placeholder{color:rgba(200,200,200,0.5);letter-spacing:0.18em;}

/* ---- short screens ---- */
@media (max-height:720px){
  .panel{gap:10px;}
  .title{font-size:clamp(30px,10vw,44px);}
  .title.sm{font-size:clamp(20px,6vw,28px);}
  .stat .v{font-size:20px;}
  .legend{gap:8px;}
  .lrow canvas{width:36px;height:36px;flex:0 0 36px;}
  button{padding:12px 24px;min-height:44px;}
  a.shop{padding:12px 20px;min-height:44px;}
}