/* ==========================================================================
   The new look: "Energy in, profit out" (from the faction graphic)
   --------------------------------------------------------------------------
   Loaded only when the new look is on (html.look-energy), after site.css.
   Colours mean what they mean in the graphic:
     cyan  (--kinetic) energy: attacks, war, chain, you
     green (--good)    revive: revives, health, gains, okay
     gold  (--energy)  profit: money, wins, and anything to act on now
     red   (--alert)   the enemy, hospital, errors
   The art: the faction logo (round badge), wordmark, circuit traces carrying
   current, carbon fibre, neon double frames (only on what matters).
   ========================================================================== */
@font-face { font-family: "Michroma"; src: url("fonts/michroma.woff2") format("woff2"); font-display: swap; }  /* OFL, see fonts/OFL.txt */

html.look-energy {
  --ink-0: #080b0f; --ink-1: #0b1015; --ink-2: #0f161d; --ink-3: #17212b;
  --line: #24323e; --line-soft: #1a2530;
  --text: #e6eef3; --text-dim: #9aaab5; --text-faint: #7d8e9a;
  --kinetic: #35d6f0; --energy: #f5c044; --good: #5fe07a; --alert: #ff6b5a;
  --on-accent: #1f1606;
  --kinetic-wash: rgba(53, 214, 240, .1); --energy-wash: rgba(245, 192, 68, .1); --alert-wash: rgba(255, 107, 90, .12);
  --glow-e: rgba(53, 214, 240, .45); --glow-p: rgba(245, 192, 68, .45); --glow-r: rgba(95, 224, 122, .4);
  --steel: #8fa3b3; --steel-2: #3b4a57;
  --radius: 10px; --rail-w: 220px;
}
.look-energy body {
  background-color: var(--ink-0);
  background-image:
    radial-gradient(ellipse 70% 40% at 15% 0%, rgba(53, 214, 240, .08), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 6px);
  background-attachment: fixed;
}
.look-energy body::before { display: none; }             /* the old faint wire layer: the board header replaces it */
.es-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the shell: rail (desktop) + board header + tabs; bottom bar on phones ---------- */
.es-shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; }
.es-rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 18px 12px 16px;
  background: linear-gradient(180deg, rgba(11, 16, 21, .96), rgba(7, 10, 13, .96)); border-right: 1px solid var(--steel-2);
  box-shadow: inset -2px 0 0 rgba(53, 214, 240, .14); }
.es-wm-line { font-family: Michroma, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; line-height: 1.2;
  color: #dbe8ef; text-shadow: 0 0 10px var(--glow-e); }
.es-nav { display: grid; gap: 3px; }
.es-navlink { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  color: var(--text-dim); text-decoration: none; font-weight: 700; font-size: .95rem; letter-spacing: .01em;
  transition: background-color .15s ease-out, color .15s ease-out; }
.es-navlink:hover { background: var(--ink-3); color: var(--text); }
.es-navlink.on { color: #eafcff; background: linear-gradient(90deg, rgba(53, 214, 240, .16), rgba(53, 214, 240, .03)); box-shadow: inset 0 0 0 1px rgba(53, 214, 240, .35); }
.es-navlink.on .es-ico { color: var(--kinetic); filter: drop-shadow(0 0 5px var(--kinetic)); }
.es-ico { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.es-live { width: 7px; height: 7px; border-radius: 50%; background: var(--alert); box-shadow: 0 0 8px var(--alert); }
.es-badge { min-width: 1.35rem; padding: 0 .35rem; border-radius: 9px; background: var(--energy); color: var(--on-accent);
  font-size: .75rem; font-weight: 900; line-height: 1.35rem; text-align: center; box-shadow: 0 0 10px var(--glow-p); }
.es-navlink .es-badge, .es-navlink .es-live { margin-left: auto; }
.es-foot { margin-top: auto; padding: 14px 8px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 9px; }

.es-stage { min-width: 0; }
.es-board { position: relative; height: 150px; overflow: hidden; border-bottom: 1px solid var(--steel-2);
  background: radial-gradient(ellipse 55% 120% at 0% 40%, rgba(53, 214, 240, .1), transparent 70%); }
.es-traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-board-emb { position: absolute; left: 20px; top: 14px; width: 76px; height: 76px; }
.es-board-emb img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 14px rgba(53, 214, 240, .3); }
.es-board-text { position: absolute; left: 112px; top: 22px; }
.es-wm-line { font-size: 13px; }
.es-area { font-size: 1.9rem; font-weight: 900; letter-spacing: -.01em; line-height: 1.15; margin-top: 4px; }
.es-preview { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; padding: .4rem clamp(16px, 4vw, 40px);
  background: var(--energy-wash); border-bottom: 1px solid rgba(245, 192, 68, .3); color: var(--energy); font-size: .82rem; font-weight: 700; }
.es-preview .text-btn { color: var(--energy); text-decoration: underline; }

.es-tabs { display: flex; gap: 2px; padding: 0 clamp(12px, 4vw, 36px); overflow-x: auto; scrollbar-width: none;
  background: rgba(7, 9, 12, .72); border-bottom: 1px solid var(--line); }
.es-tabs::-webkit-scrollbar { display: none; }
.es-tab { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .85rem .8rem; color: var(--text-dim);
  text-decoration: none; font-weight: 800; font-size: .92rem; white-space: nowrap; }
.es-tab:hover { color: var(--text); }
.es-tab.on { color: var(--text); }
.es-tab.on::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 2px; background: var(--kinetic); box-shadow: 0 0 8px var(--kinetic); }
.es-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .9rem clamp(16px, 4vw, 40px) 0; }
.es-chip { padding: .32rem .8rem; border-radius: 99px; border: 1px solid var(--line); color: var(--text-dim); text-decoration: none; font-size: .85rem; font-weight: 700; }
.es-chip:hover { color: var(--text); border-color: var(--steel-2); }
.es-chip.on { color: var(--kinetic); border-color: rgba(53, 214, 240, .6); background: var(--kinetic-wash); }
.es-inner { padding: 24px clamp(16px, 4vw, 40px) 56px; max-width: 64rem; }
.es-inner.wide { max-width: 92rem; }

.es-bar { display: none; }
@media (max-width: 899px) {
  .es-shell { display: block; }
  .es-rail { display: none; }
  .es-board { height: 118px; }
  .es-board-emb { left: 14px; top: 12px; width: 60px; height: 60px; }
  .es-board-text { left: 86px; top: 16px; }
  .es-wm-line { font-size: 12px; }
  .es-area { font-size: 1.5rem; }
  .es-inner { padding: 18px 16px calc(92px + env(safe-area-inset-bottom)); }
  .es-tab { padding: .8rem .48rem; min-height: 44px; font-size: .88rem; }
  .es-tabs { padding: 0 8px; }
  .es-chip { min-height: 36px; display: inline-flex; align-items: center; }
  .es-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
    background: rgba(7, 9, 12, .95); border-top: 1px solid var(--steel-2); box-shadow: 0 -1px 0 rgba(53, 214, 240, .12);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); }
  .es-baritem { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 2px; color: var(--text-dim); text-decoration: none;
    font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; min-height: 48px; }
  .es-baritem.on { color: var(--kinetic); text-shadow: 0 0 8px var(--glow-e); }
  .es-baritem.on .es-ico { filter: drop-shadow(0 0 5px var(--kinetic)); }
  .es-baritem .es-live { position: absolute; top: 4px; right: calc(50% - 16px); width: 6px; height: 6px; }
  .es-baritem .es-badge { position: absolute; top: 0; right: calc(50% - 22px); min-width: 1.2rem; font-size: .75rem; line-height: 1.2rem; }
}

/* ---------- circuit traces with current ---------- */
.es-traces .tr { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.es-traces .tr.dim { opacity: .22; }
.es-traces .pu { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 6 90; animation: es-run 3.2s linear infinite; }
.es-traces .pu.d2 { animation-delay: -1.1s; animation-duration: 3.8s; } .es-traces .pu.d3 { animation-delay: -2.2s; animation-duration: 4.6s; }
@keyframes es-run { to { stroke-dashoffset: -96; } }
@media (prefers-reduced-motion: reduce) { .es-traces .pu { animation: none; opacity: 0; } }
.es-traces .c-e { stroke: var(--kinetic); color: var(--kinetic); } .es-traces .c-r { stroke: var(--good); color: var(--good); }
.es-traces .c-p { stroke: var(--energy); color: var(--energy); }
.es-traces .pad { fill: var(--ink-0); stroke-width: 2; }
.es-traces .ic { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-traces .ic use { stroke: currentColor; }

/* ---------- neon double frame: a steel edge, then a glowing line (gold = money / waiting on you) ---------- */
.es-frame, .look-energy .dash-numbers { position: relative; border: 1px solid var(--steel-2) !important; border-radius: 14px !important; }
.es-frame::after, .look-energy .dash-numbers::after { content: ""; position: absolute; inset: 3px; border-radius: 11px; border: 1.5px solid var(--kinetic); pointer-events: none;
  box-shadow: 0 0 10px var(--glow-e), inset 0 0 12px rgba(53, 214, 240, .16); }
.es-frame.gold::after { border-color: var(--energy); box-shadow: 0 0 10px var(--glow-p), inset 0 0 12px rgba(245, 192, 68, .14); }

/* ---------- existing pieces, restyled ---------- */
.look-energy .eyebrow { display: none; }                  /* the board header already names the area */
.look-energy .page-head { margin-bottom: 18px; }
.look-energy .page-title { font-size: 1.45rem; font-weight: 800; }
.look-energy .card { background: linear-gradient(180deg, rgba(17, 25, 33, .94), rgba(11, 16, 21, .94)); border: 1px solid var(--line-soft);
  border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 8px 24px rgba(0, 0, 0, .25); }
.look-energy .card-label { color: var(--text-dim); letter-spacing: .16em; }
.look-energy .card-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--kinetic); box-shadow: 0 0 6px var(--glow-e); flex: none; }
.look-energy .card-label::after { background: linear-gradient(90deg, rgba(53, 214, 240, .45), transparent 85%); }
.look-energy .btn { background: linear-gradient(180deg, #ffd56a, #e9a925); border-color: #f5c044; color: var(--on-accent); font-weight: 800;
  box-shadow: 0 0 12px rgba(245, 192, 68, .28), inset 0 1px 0 rgba(255, 255, 255, .4); }
.look-energy .btn:hover { box-shadow: 0 0 18px var(--glow-p), inset 0 1px 0 rgba(255, 255, 255, .45); }
.look-energy .btn-ghost { background: rgba(15, 22, 29, .9); border-color: var(--steel-2); color: var(--text); box-shadow: none; font-weight: 700; }
.look-energy .btn-ghost:hover { border-color: var(--steel); background: var(--ink-3); box-shadow: none; }
.look-energy .readout-value.you { color: #dff8fc; text-shadow: 0 0 10px var(--glow-e); }
.look-energy .readout-value.win { text-shadow: 0 0 10px var(--glow-p); }
.look-energy .stat-total { background: linear-gradient(180deg, rgba(53, 214, 240, .12), rgba(53, 214, 240, .04)); }
.look-energy .stat-gain { text-shadow: 0 0 8px rgba(95, 224, 122, .3); }
.look-energy .seg { background: var(--ink-1); border-color: var(--line); border-radius: 99px; }
.look-energy .seg-btn { border-radius: 99px; }
.look-energy .seg-btn.on { background: var(--kinetic-wash); color: var(--kinetic); box-shadow: inset 0 0 0 1px rgba(53, 214, 240, .5); }
.look-energy .data th { color: var(--text-faint); }
.look-energy table.pin-first th:first-child, .look-energy table.pin-first td:first-child { background: #0f161d; }
.look-energy .rank.first { text-shadow: 0 0 12px var(--glow-p); }
.look-energy .dev-tag { background: var(--energy); }

/* ---------- Lead: Today ---------- */
.es-sec { display: flex; align-items: center; gap: 10px; margin: 6px 0 12px; font-size: .75rem; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-dim); }
.es-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--steel-2), transparent); }
.es-sec:not(:first-of-type) { margin-top: 26px; }
.es-need { display: flex; align-items: center; gap: 14px; padding: 16px 18px; margin-bottom: 12px; text-decoration: none; color: var(--text);
  background: rgba(13, 18, 24, .92); }
.es-need:hover { color: var(--text); background: rgba(19, 27, 35, .95); }
.es-need-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.es-need-main b { font-size: 1.02rem; }
.es-need-sub { color: var(--text-dim); font-size: .85rem; }
.es-go { color: var(--kinetic); font-weight: 800; }
.es-quiet { color: var(--text-dim); margin: 0 0 8px; }
.es-rows { display: grid; }
.es-row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); }
.es-row b { font-variant-numeric: tabular-nums; }

/* ---------- outside the app: the public front page, sign-in, members-only ---------- */
.es-pub-hero { position: relative; display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); min-height: 190px; margin: 0 0 1.6rem;
  padding: 18px clamp(14px, 3vw, 28px) 56px; border: 1px solid var(--steel-2); border-radius: 16px; overflow: hidden;
  background: radial-gradient(ellipse 60% 120% at 0% 40%, rgba(53, 214, 240, .1), transparent 70%), rgba(9, 13, 17, .85); }
.es-pub-hero .es-traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.es-pub-logo { position: relative; z-index: 1; width: clamp(84px, 16vw, 120px); height: auto; border-radius: 50%; flex: none; }
.es-pub-text { position: relative; z-index: 1; min-width: 0; }
.es-pub-wm { font-size: clamp(1rem, 3.2vw, 1.6rem); }
.es-pub-tag { margin-top: .5rem; color: var(--energy); font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: clamp(.75rem, 2vw, .9rem); }
.look-energy main.public { max-width: 66rem; }
.look-energy .public-h { color: var(--energy); }
.look-energy .public-copy p, .look-energy .pb-list { color: var(--text-dim); }
.look-energy .public-copy .pb-card, .look-energy .public-copy .pb-cyan, .look-energy .public-copy .pb-gold { border-radius: 12px; }
.look-energy .keyform input { background: var(--ink-0); border-color: var(--line); }
.look-energy main.center .es-pub-logo { margin: 0 auto .9rem; }
.look-energy main.center .es-pub-wm { margin-bottom: .2rem; }
@media (max-width: 560px) {
  .es-pub-hero { flex-direction: column; text-align: center; padding-bottom: 100px; }
  .es-pub-hero .es-traces { top: auto; height: 96px; }        /* the circuit runs along the bottom, under the text */
}

/* readable line length on wide screens (tables and forms keep their width) */
.look-energy .es-inner .card li, .look-energy .page-sub, .look-energy .es-inner .card > p, .look-energy .es-inner > p, .look-energy .es-inner .card .dim.small { max-width: 74ch; }