/* Perilage — the book. A violet instrument on a near-black ground: one beam, two pans, a bottom dock.
   Ground + one accent; the only second hue in the file is the ember a fired peril is marked in. */
:root{
  --ground:#0a0611;
  --pane:#150e24;
  --pane-hi:#1d1433;
  --wire:#241a3a;
  --ink:#efeafb;
  --dim:#9d93b4;
  --accent:#8a5cff;
  --core:#d4c2ff;
  --ember:#ff8a3d;
  --dock:72px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--ground);color:var(--ink);
  font:400 15px/1.5 "IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
.tnum2{font-variant-numeric:tabular-nums}

/* ---- crestbar ---- */
.crestbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 14px;background:rgba(10,6,17,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--wire);
}
.crestbar-mark{display:flex;align-items:center;gap:8px;min-width:0}
.crestbar-mark img{width:26px;height:26px;border-radius:50%;display:block}
.crestbar-name{font-family:Bungee,Impact,sans-serif;font-size:15px;letter-spacing:.5px;color:var(--core)}
.crestbar-live{display:flex;align-items:baseline;gap:10px;font-variant-numeric:tabular-nums}
.crestbar-round{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.crestbar-bell{font-family:Bungee,Impact,sans-serif;font-size:17px;color:var(--accent)}

#stage{max-width:520px;margin:0 auto;padding:14px 14px 26px}

/* ---- the strike face ---- */
.strikeface{
  display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:14px;
  border:1px solid var(--wire);border-radius:14px;background:
    radial-gradient(120% 160% at 0% 0%,rgba(138,92,255,.16),transparent 62%),var(--pane);
}
.strikeface-n{
  font-family:Bungee,Impact,sans-serif;font-size:30px;line-height:1;color:var(--accent);
  text-shadow:0 0 18px rgba(138,92,255,.55);font-variant-numeric:tabular-nums;
}
.strikeface-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);display:block}
.strikeface-say{font-size:13px;color:var(--ink);line-height:1.35}
.strikeface.burnt .strikeface-n{color:var(--ember);text-shadow:0 0 18px rgba(255,138,61,.5)}

/* ---- the rig ---- */
.rig{margin:0 0 16px}
.beamsvg{display:block;width:100%;height:auto;overflow:visible}
.beamsvg .post{stroke:var(--wire);stroke-width:7;stroke-linecap:round}
.beamsvg .arm{stroke:var(--core);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 7px rgba(138,92,255,.75));
  transition:transform .55s cubic-bezier(.22,.9,.26,1);transform-box:view-box;transform-origin:180px 96px}
.beamsvg .knob{fill:var(--core);filter:drop-shadow(0 0 6px rgba(138,92,255,.8))}
.beamsvg .hanger{stroke:var(--wire);stroke-width:2.5;transition:all .55s cubic-bezier(.22,.9,.26,1)}
.beamsvg .bowl{stroke:var(--accent);stroke-width:3.5;fill:rgba(138,92,255,.12);stroke-linejoin:round;
  transition:all .55s cubic-bezier(.22,.9,.26,1)}
.beamsvg .bowl.light{stroke:var(--dim);fill:rgba(157,147,180,.07)}
.beamsvg .heap{fill:var(--accent);opacity:.5;transition:all .55s cubic-bezier(.22,.9,.26,1)}
.tiltnote{margin:6px 2px 0;font-size:13px;color:var(--dim);text-align:center;min-height:19px}
.tiltnote b{color:var(--core);font-weight:600}

/* ---- the two pans as the picker ---- */
.pans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.panbtn{
  appearance:none;text-align:left;padding:12px;border-radius:14px;cursor:pointer;
  border:1px solid var(--wire);background:var(--pane);display:grid;gap:3px;
  transition:border-color .16s,background .16s,transform .1s;
}
.panbtn:active{transform:scale(.985)}
.panbtn-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.panbtn-n{font-family:Bungee,Impact,sans-serif;font-size:23px;line-height:1.05;font-variant-numeric:tabular-nums;word-break:break-all}
.panbtn-u{font-size:12px;color:var(--dim)}
.panbtn-x{font-size:13px;font-weight:600;color:var(--accent)}
.panbtn.pan-on{border-color:var(--accent);background:var(--pane-hi);box-shadow:0 0 0 1px rgba(138,92,255,.45),0 0 26px -8px rgba(138,92,255,.8)}
.panbtn.pan-heavy .panbtn-x{color:var(--dim)}

/* ---- load bay: the field sits inside the pan you picked ---- */
.loadbay{margin-top:12px;padding:14px;border:1px solid var(--accent);border-radius:16px;
  background:linear-gradient(180deg,var(--pane-hi),var(--pane));box-shadow:0 0 30px -14px rgba(138,92,255,.9)}
.loadbay.shut{border-color:var(--wire);background:var(--pane);box-shadow:none}
.loadbay-k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.loadrow{display:flex;align-items:baseline;gap:8px;border-bottom:2px solid var(--wire);padding-bottom:7px}
.loadnum{
  flex:1;min-width:0;width:100%;background:none;border:0;outline:none;
  font-family:Bungee,Impact,sans-serif;font-size:30px;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;padding:0;
}
.loadnum::placeholder{color:var(--wire)}
.loadunit{font-size:13px;letter-spacing:.1em;color:var(--dim)}
.loadsay{margin-top:9px;font-size:13px;color:var(--dim);min-height:36px;line-height:1.35}
.loadsay b{color:var(--core);font-weight:600}
.loadgo{
  margin-top:11px;width:100%;padding:14px;border:0;border-radius:12px;cursor:pointer;
  font-family:Bungee,Impact,sans-serif;font-size:15px;letter-spacing:.4px;
  background:var(--accent);color:#0a0611;
}
.loadgo[disabled]{background:var(--wire);color:var(--dim);cursor:default}
.loadfine{margin-top:8px;font-size:12px;color:var(--dim);text-align:center}

/* ---- tape of the last crossings ---- */
.wiretape{margin-top:22px}
.wiretape-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.wiretape-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--wire);font-size:13px}
.wiretape-id{font-variant-numeric:tabular-nums;color:var(--dim);width:42px;flex:none}
.wiretape-num{font-family:Bungee,Impact,sans-serif;font-size:15px;width:34px;flex:none;font-variant-numeric:tabular-nums}
.wiretape-cross{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--dim)}
.firedmark{color:var(--ember);font-weight:600}
.quietmark{color:var(--dim)}
.voidmark{color:var(--dim);font-style:italic}

/* ---- the book ---- */
.bookwrap{display:grid;gap:10px}
.bookrow{border:1px solid var(--wire);border-radius:14px;background:var(--pane);padding:12px}
.bookrow-top{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.bookrow-id{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bookrow-peril{font-family:Bungee,Impact,sans-serif;font-size:26px;line-height:1;margin-left:auto;font-variant-numeric:tabular-nums}
.bookrow-pans{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:13px}
.bookrow-cell{padding:8px;border-radius:10px;background:var(--ground);border:1px solid var(--wire)}
.bookrow-cell.won{border-color:var(--accent);color:var(--core)}
.bookrow-cell span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.bookrow-when{margin-top:9px;font-size:12px;color:var(--dim)}

/* ---- stats ---- */
.statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0 0}
.statcell{padding:10px 8px;border:1px solid var(--wire);border-radius:12px;background:var(--pane);text-align:center}
.statcell-n{font-family:Bungee,Impact,sans-serif;font-size:19px;font-variant-numeric:tabular-nums;display:block}
.statcell-k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ---- you ---- */
.connectbar{width:100%;padding:14px;border:1px solid var(--accent);border-radius:12px;background:var(--pane-hi);
  cursor:pointer;font-family:Bungee,Impact,sans-serif;font-size:14px;color:var(--core)}
.youslip{border:1px solid var(--wire);border-radius:14px;background:var(--pane);padding:12px;margin-bottom:10px}
.youslip-head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--dim);margin-bottom:8px}
.youslip-body{display:flex;align-items:baseline;gap:8px;font-family:Bungee,Impact,sans-serif;font-size:20px;font-variant-numeric:tabular-nums}
.youclaim{margin-top:10px;width:100%;padding:12px;border:0;border-radius:10px;background:var(--accent);color:#0a0611;
  font-family:Bungee,Impact,sans-serif;font-size:14px;cursor:pointer}
.youclaim[disabled]{background:var(--wire);color:var(--dim);cursor:default}

/* ---- rules ---- */
.ruleblock{border-top:1px solid var(--wire);padding:16px 0}
.ruleblock-h{font-family:Bungee,Impact,sans-serif;font-size:16px;margin:0 0 7px;color:var(--core)}
.ruleblock-p{margin:0;color:var(--dim);line-height:1.6}
.rulelist{counter-reset:r;list-style:none;padding:0;margin:0}
.rulelist li{counter-increment:r;position:relative;padding:9px 0 9px 34px;border-top:1px solid var(--wire);color:var(--dim)}
.rulelist li::before{content:counter(r);position:absolute;left:0;top:9px;font-family:Bungee,Impact,sans-serif;color:var(--accent);font-size:14px}

/* ---- common bits ---- */
.pagehead{font-family:Bungee,Impact,sans-serif;font-size:26px;line-height:1.1;margin:2px 0 6px}
.pagesub{margin:0 0 18px;color:var(--dim);line-height:1.55}
.nothinghere{padding:26px 14px;text-align:center;color:var(--dim);border:1px dashed var(--wire);border-radius:14px}
.capline{margin-top:26px;padding-top:14px;border-top:1px solid var(--wire);font-size:12px;color:var(--dim);line-height:1.8;word-break:break-all}
.caplink{color:var(--accent)}
.buyout{display:block;margin-top:14px;padding:14px;text-align:center;border-radius:12px;border:1px solid var(--accent);
  color:var(--core);font-family:Bungee,Impact,sans-serif;font-size:14px}

/* ---- dock ---- */
.docknav{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,1fr);
  background:rgba(10,6,17,.96);backdrop-filter:blur(10px);border-top:1px solid var(--wire);
  padding-bottom:env(safe-area-inset-bottom);
}
.docknav-item{display:grid;justify-items:center;gap:3px;padding:11px 0 12px;color:var(--dim)}
.docknav-ico{width:21px;height:21px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.docknav-lbl{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.docknav-item.here-now{color:var(--core)}
.docknav-item.here-now .docknav-ico{color:var(--accent);filter:drop-shadow(0 0 7px rgba(138,92,255,.85))}

/* ---- wallet chooser + flash ---- */
.walletpick{position:fixed;inset:0;z-index:60;display:grid;place-items:end center;background:rgba(10,6,17,.72)}
.walletpick-box{width:100%;max-width:520px;background:var(--pane);border-top:1px solid var(--wire);
  border-radius:18px 18px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
.walletpick-head{display:flex;align-items:center;justify-content:space-between;font-family:Bungee,Impact,sans-serif;font-size:15px;margin-bottom:12px}
.walletpick-shut{background:none;border:0;font-size:24px;color:var(--dim);cursor:pointer;line-height:1}
.walletpick-opt{display:flex;align-items:center;gap:10px;width:100%;padding:12px;margin-bottom:8px;cursor:pointer;
  border:1px solid var(--wire);border-radius:12px;background:var(--ground);color:var(--ink)}
.walletpick-opt img{width:22px;height:22px;border-radius:6px}
.flashline{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock) + 16px);z-index:70;
  max-width:min(92vw,470px);padding:11px 15px;border-radius:11px;background:var(--pane-hi);
  border:1px solid var(--accent);font-size:13px;box-shadow:0 12px 40px -18px rgba(138,92,255,.9)}

@media (min-width:560px){
  .crestbar{padding:12px 20px}
  #stage{padding:20px 20px 34px}
  .pagehead{font-size:32px}
}