/* Benjamin's Cartel BTC - css/panel.css
   The aura console in the back room. Loaded by room/aura.php and nothing else.

   TWO JOBS, AND THEY FIGHT EACH OTHER.

   The first is that the thing has to be understood. An earlier pass was a
   handsome dark object that told a holder nothing: five unlabelled figures in
   a row, a unit nobody thinks in, and a progress bar toward a word with no
   meaning attached. So the hierarchy here is fixed and it is not negotiable:

     a picture of the metal      before the name of the metal
     the plain-English figure    before the chain figure
     a label above every number  no exceptions, including the small ones
     what you GET at the next    before how far away the next rung is
     rung

   The second job is that it should not look like it was made on Earth:

     the gold emits, never       light comes from within the material, so
     reflects                    there are no highlights and no specular -
                                 the single biggest tell of a machined part

     corners are CUT, not        a chamfered outline reads as grown or
     rounded                     cleaved; rounded reads as moulded plastic

     it is always doing          a slow scan crosses the face and the
     something                   conduits pulse. Still equipment is a photo

     the script is alien, the    one column of glyphs down the gutter, and
     data is not                 nowhere near a number a holder has to read

   Where the two jobs conflict, legibility wins. Every time.

   Pure ASCII. */

.pn{
  --au-lit:#ffcf5c;
  --au-cool:#7fe6ff;
  --au-dim:#8fa3ae;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  position:relative;
  padding:0 0 32px;
  color:#d9e4ea;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,190,70,.10), transparent 62%),
    radial-gradient(90% 60% at 8% 108%, rgba(60,220,255,.06), transparent 60%),
    linear-gradient(172deg,#0b0f13 0%,#080b0e 46%,#05070a 100%);
  clip-path:polygon(
    26px 0, calc(100% - 26px) 0, 100% 26px,
    100% calc(100% - 14px), calc(100% - 14px) 100%,
    14px 100%, 0 calc(100% - 14px), 0 26px);
}
.pn::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  clip-path:inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255,207,92,.20),
    inset 0 0 46px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,207,92,.14);
}
.pn::before{
  content:"";position:absolute;left:0;right:0;height:38%;top:-38%;
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,
    transparent, rgba(127,230,255,.045) 40%, rgba(255,207,92,.07) 62%, transparent);
  animation:pnScan 9s linear infinite;
}
@keyframes pnScan{0%{top:-38%}100%{top:100%}}

/* the veins, drawn in mock-panel.js */
.pn-veins{position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;display:block;overflow:visible}
.pn-veins path{fill:none;stroke:url(#pnVein);stroke-width:1}
.pn-veins .pn-flow{stroke:var(--au-lit);stroke-width:1.4;opacity:.9;
  filter:drop-shadow(0 0 5px rgba(255,190,60,.8));
  stroke-dasharray:16 240;animation:pnFlow 7s linear infinite}
@keyframes pnFlow{to{stroke-dashoffset:-256}}

/* the script, in the margin where it belongs */
.pn-mark{position:absolute;left:11px;top:44%;z-index:0;pointer-events:none;
  display:flex;flex-direction:column;gap:7px;opacity:.34}
.pn-mark svg{width:9px;height:12px;overflow:visible}
.pn-mark path{stroke:var(--au-cool);stroke-width:1.3;fill:none;stroke-linecap:round}

.pn-top,.pn-body{position:relative;z-index:1}

/* ---- header: says what the whole thing IS before any number appears ---- */
.pn-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:26px;flex-wrap:wrap;padding:26px 34px 22px}
.pn-hero{max-width:460px;min-width:0}
.pn-hero b{display:block;font-family:"Instrument Serif",Georgia,serif;
  font-weight:400;font-size:34px;line-height:1;color:#fff3d4;
  text-shadow:0 0 24px rgba(255,190,60,.5)}
.pn-hero p{margin:10px 0 0;font-size:13.5px;line-height:1.62;color:#a9bac4}
.pn-top-r{display:flex;gap:10px;flex-wrap:wrap}

/* ---- readouts: the number floats IN the material ---- */
.pn-win{display:flex;flex-direction:column;gap:5px;padding:10px 16px;
  background:linear-gradient(180deg,rgba(127,230,255,.05),rgba(255,190,60,.045));
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),
    calc(100% - 9px) 100%,0 100%,0 9px);
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.22)}
.pn-win i{font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6f8390;white-space:nowrap}
.pn-win b{font-family:var(--mono);font-weight:700;font-size:17px;
  letter-spacing:.03em;color:var(--au-lit);font-variant-numeric:tabular-nums;
  white-space:nowrap;
  text-shadow:0 0 10px rgba(255,168,32,.85),0 0 30px rgba(255,140,10,.4)}
.pn-win.alt b{font-size:15px;color:#cfe0ea;text-shadow:0 0 10px rgba(127,230,255,.35)}

/* ---- body ---- */
.pn-body{padding:6px 34px 0}
.pn-sec + .pn-sec{margin-top:34px}
.pn-lab{display:flex;align-items:baseline;gap:12px;margin:0 0 15px;
  font-family:var(--mono);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:#b9ccd6}
.pn-lab em{font-style:normal;letter-spacing:.14em;color:#6f8390;
  text-transform:none;font-size:9.5px}
.pn-lab::after{content:"";flex:1;height:1px;align-self:center;
  background:linear-gradient(90deg,rgba(255,207,92,.35),transparent)}

/* ---- the swatch: the metal, seen before it is read ---- */
.pn-sw{width:56px;flex:none;line-height:0;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.6))}
.pn-sw.sm{width:40px}
.pn-sw svg{display:block;width:100%;height:auto}

/* ---- one piece ---- */
.pn-p{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:20px;padding:18px 20px;
  background:linear-gradient(100deg,rgba(127,230,255,.045),rgba(255,190,60,.03));
  clip-path:polygon(13px 0,100% 0,100% calc(100% - 13px),
    calc(100% - 13px) 100%,0 100%,0 13px);
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.14)}
.pn-p + .pn-p{margin-top:11px}
.pn-p-main{min-width:0}
.pn-p-top{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.pn-name{font-size:17px;font-weight:600;color:#f2f7fa;letter-spacing:-.008em}
.pn-ins{font-family:var(--mono);font-size:11px;color:#7b8b95}
.pn-p-top .pn-chip{margin-left:auto}

/* the two figures, each under its own label */
.pn-stats{display:flex;gap:34px;flex-wrap:wrap;margin:15px 0 4px}
.pn-stat{min-width:0}
.pn-stat i{display:block;font-style:normal;font-family:var(--mono);font-size:8.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6f8390}
.pn-stat b{display:block;margin-top:5px;font-family:var(--mono);font-weight:700;
  font-size:21px;letter-spacing:.01em;color:#fff2d2;
  font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,180,50,.35)}
.pn-stat u{display:flex;align-items:center;gap:7px;margin-top:4px;
  text-decoration:none;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#7b8b95}

/* ---- the next rung ---- */
.pn-next{margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(255,207,92,.10)}
.pn-next-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:9px}
.pn-lab-s{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#6f8390}
.pn-to{font-size:13px;color:#cfe0ea}
.pn-to b{font-weight:700;letter-spacing:.04em}
.t-brass {color:#f0d9a4}
.t-silver{color:#e9f4fb}
.t-gold  {color:#ffd76a}
.t-black {color:#ffe9b8}

.pn-rail{display:block;height:7px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.14)}
.pn-rail i{position:absolute;inset:0 auto 0 0;
  background:linear-gradient(90deg,rgba(255,140,10,.5),var(--au-lit));
  box-shadow:0 0 14px rgba(255,180,50,.8)}
.pn-rail i::after{content:"";position:absolute;top:0;bottom:0;width:34px;right:0;
  background:linear-gradient(90deg,transparent,#fff8e2);
  animation:pnPulse 2.6s ease-in-out infinite}
@keyframes pnPulse{0%,100%{opacity:.25}50%{opacity:.95}}
.pn-next-f{display:flex;justify-content:space-between;gap:12px;margin-top:7px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#67757f}
.pn-next-f span:nth-child(2){color:#8fa3ae}

/* ---- the cores ---- */
.pn-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;
  font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),
    calc(100% - 8px) 100%,0 100%,0 8px)}
.pn-chip::before{content:"";width:9px;height:9px;flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.pn .m-brass {background:rgba(190,150,80,.16);color:#f0d9a4;
  box-shadow:inset 0 0 0 1px rgba(220,180,100,.4),0 0 16px rgba(200,150,60,.18)}
.pn .m-brass::before {background:#e8c583;box-shadow:0 0 9px #c9a24a}
.pn .m-silver{background:rgba(190,214,230,.14);color:#e9f4fb;
  box-shadow:inset 0 0 0 1px rgba(190,220,240,.4),0 0 16px rgba(150,200,230,.2)}
.pn .m-silver::before{background:#e8f4ff;box-shadow:0 0 9px #9fd0ea}
.pn .m-gold  {background:rgba(255,190,60,.18);color:#fff0c4;
  box-shadow:inset 0 0 0 1px rgba(255,200,80,.5),0 0 22px rgba(255,170,30,.3)}
.pn .m-gold::before  {background:#ffd76a;box-shadow:0 0 12px #ffab1f}
.pn .m-black {background:rgba(10,10,14,.85);color:#ffe9b8;
  box-shadow:inset 0 0 0 1px rgba(255,210,120,.55),0 0 28px rgba(255,170,30,.35)}
.pn .m-black::before {background:#fff3cf;box-shadow:0 0 14px #ffcf5c,0 0 26px #ff9500}

/* ---- the ladder: a rung with no reward attached is just a number ---- */
.pn-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.pn-step{position:relative;padding:17px 17px 19px;
  background:linear-gradient(160deg,rgba(127,230,255,.04),rgba(255,190,60,.025));
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),
    calc(100% - 11px) 100%,0 100%,0 11px);
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.12)}
.pn-step.on{background:linear-gradient(160deg,rgba(255,190,60,.14),rgba(255,140,10,.05));
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.55),0 0 30px rgba(255,160,20,.22)}
.pn-step-h{display:flex;align-items:center;gap:13px}
.pn-step-h > div{min-width:0}
.pn-step b{display:block;margin-top:9px;font-family:var(--mono);
  font-size:14px;font-weight:700;color:#fff0c4;
  text-shadow:0 0 12px rgba(255,180,50,.5)}
.pn-step-b{display:block;margin-top:3px;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;color:#7b8b95}
.pn-step p{margin:14px 0 0;font-size:12px;line-height:1.58;color:#a9bac4}
.pn-here{position:absolute;top:0;right:0;padding:4px 10px;
  font-family:var(--mono);font-size:8px;letter-spacing:.2em;
  text-transform:uppercase;color:#100c02;background:var(--au-lit);
  clip-path:polygon(9px 0,100% 0,100% 100%,0 100%)}

/* ---- the cell: heat is plasma, not an engraving ---- */
.pn-lamp span{width:10px;height:10px;flex:none;
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  background:#ff8a20;box-shadow:0 0 12px #ff6a00,0 0 26px rgba(255,90,0,.6);
  animation:pnCell 2.9s ease-in-out infinite}
.pn-lamp.warm span{background:#c98a3c;box-shadow:0 0 7px rgba(255,140,40,.55)}
.pn-lamp.cold span{background:#3d474d;box-shadow:none;animation:none}
@keyframes pnCell{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}

/* ---- the notes ---- */
.pn-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pn-note-b h4{margin:0 0 8px;font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--au-lit);
  font-weight:700}
.pn-note-b p{margin:0;font-size:12.5px;line-height:1.62;color:#a9bac4}

@media(prefers-reduced-motion:reduce){
  .pn::before,.pn-veins .pn-flow,.pn-rail i::after,.pn-lamp span{animation:none}
}
@media(max-width:900px){
  .pn-ladder{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pn-notes{grid-template-columns:1fr;gap:18px}
}
@media(max-width:640px){
  .pn-body{padding:6px 18px 0}
  .pn-top{padding:22px 18px 18px}
  .pn-mark{display:none}
  .pn-ladder{grid-template-columns:1fr}
  .pn-p{grid-template-columns:1fr;gap:14px;padding:16px}
  .pn-p-top .pn-chip{margin-left:0}
  .pn-stats{gap:22px}
  .pn-stat b{font-size:19px}
}

/* ---- the record line ----
   The metal is the piece's record; the run is yours. When they are the same
   thing the holder should be told so, because that is the state worth
   defending - and when they are not, the gap is the thing to aim at. */
.pn-rec{display:block;margin-top:4px;text-decoration:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#7b8b95}
.pn-rec.on{color:var(--au-lit);text-shadow:0 0 12px rgba(255,180,50,.45)}
.pn-rec.on::before{content:"* ";}

/* ---- a term with its explanation attached ----
   The console uses words the site invented - aura, farming, a rung, a record.
   A holder who cannot look one of them up on the device in their hand does not
   learn it, so every term carries its own answer rather than a link to a page
   of definitions somewhere else. */
.pn-q{margin-left:7px;padding:0;width:13px;height:13px;flex:none;
  border:1px solid rgba(255,207,92,.4);background:transparent;
  color:var(--au-lit);font-family:var(--mono);font-size:8.5px;line-height:1;
  cursor:pointer;vertical-align:middle;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px)}
.pn-q:hover{background:rgba(255,207,92,.16)}
.pn-q[aria-expanded="true"]{background:var(--au-lit);color:#1a1206;
  border-color:var(--au-lit)}
/* A popover, not a block: opened in flow it pushed the figure it was
   explaining down the page, so reading the answer moved the thing you were
   asking about. */
.pn-stat{position:relative}
.pn-tip{position:absolute;top:100%;left:0;z-index:6;
  width:max-content;max-width:min(40ch,calc(100vw - 60px));margin:8px 0 0;
  padding:10px 12px;
  background:rgba(10,14,18,.92);
  box-shadow:inset 0 0 0 1px rgba(255,207,92,.22);
  font-size:12px;line-height:1.55;color:#c6d5de;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),
    calc(100% - 7px) 100%,0 100%,0 7px)}
.pn-tip[hidden]{display:none}