/* The island-wide ENERGY window (energy-panel.mjs): run time + gauge, every PC's draw, refills for all of them. */
.resource-dialog.resource-window[data-kind=energy]{--r:clamp(.43px,min(calc((100vw - 20px) / 900),.112dvh),1.125px);width:min(calc(900 * var(--r)),calc(100vw - 20px))}
.resource-window[data-kind=energy] .resource-body{padding:calc(14 * var(--r)) calc(16 * var(--r)) calc(14 * var(--r))}
.energy-panel{display:grid;gap:0;color:#3e211d}
.energy-panel .wallet-season-notice{margin:0 0 calc(10 * var(--r))}

/* Hero: the island's run time, stored energy, PCs mining and a battery gauge full at three days. */
.energy-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'main stats' 'gauge gauge';align-items:center;gap:calc(6 * var(--r)) calc(20 * var(--r));padding:calc(12 * var(--r)) calc(18 * var(--r)) calc(8 * var(--r))}
.energy-hero-main{grid-area:main;min-width:0}
.energy-caption{font:700 calc(17 * var(--r))/1.2 Pixeloid,monospace;letter-spacing:calc(.5 * var(--r));color:#6a4628}
.energy-hero .energy-time{display:block;font:700 calc(62 * var(--r))/1.08 Pixeloid,monospace;letter-spacing:calc(-1 * var(--r));white-space:nowrap;color:#3e211d}
.energy-hero[data-tone=low] .energy-time{color:#8a4d0c}
.energy-hero:is([data-tone=critical],[data-tone=empty]) .energy-time{color:#9c3a2b}
.energy-hero .energy-time[data-unavailable=true]{font-size:calc(48 * var(--r));line-height:1.3}
.energy-hero-detail{font-size:calc(14 * var(--r));line-height:1.4;color:#6b5038}
.energy-hero-detail[hidden]{display:none}
.energy-stats{grid-area:stats;display:grid;gap:calc(6 * var(--r));margin:0}
.energy-stats>div{display:flex;align-items:baseline;justify-content:space-between;gap:calc(16 * var(--r));min-width:calc(214 * var(--r));padding:calc(6 * var(--r)) calc(11 * var(--r));background:#fff1d2;border:calc(2 * var(--r)) solid #e3c48f}
.energy-stats dt{white-space:nowrap;font:700 calc(12.5 * var(--r))/1.4 Pixeloid,monospace;letter-spacing:calc(.5 * var(--r));color:#7b5a3c}
.energy-stats dd{margin:0;font:700 calc(18 * var(--r))/1.3 Pixeloid,monospace;white-space:nowrap}
.energy-gauge-wrap{grid-area:gauge;padding-right:calc(9 * var(--r))}
.energy-gauge{--tone:#5daf41;--shine:#93d76e;position:relative;height:calc(26 * var(--r));border:calc(3 * var(--r)) solid #5a3a26;background:#efdfbb;box-shadow:inset 0 calc(3 * var(--r)) 0 #dcc597}
.energy-gauge::after{content:'';position:absolute;right:calc(-10 * var(--r));top:25%;width:calc(6 * var(--r));height:50%;background:#5a3a26}
.energy-gauge-fill{--fill:0;position:absolute;inset:calc(3 * var(--r));
  background:linear-gradient(180deg,var(--shine) 0 30%,var(--tone) 30%);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 24 - 3 * var(--r)),transparent calc(100% / 24 - 3 * var(--r)) calc(100% / 24));
  mask:repeating-linear-gradient(90deg,#000 0 calc(100% / 24 - 3 * var(--r)),transparent calc(100% / 24 - 3 * var(--r)) calc(100% / 24));
  clip-path:inset(0 calc((1 - var(--fill)) * 100%) 0 0)}
.energy-gauge[data-tone=low]{--tone:#eba030;--shine:#f8cd77}
.energy-gauge[data-tone=critical]{--tone:#df5f38;--shine:#f19a77}
.energy-gauge:is([data-tone=empty],[data-tone=inactive]),.energy-gauge[data-live=false]{--tone:#bca986;--shine:#d6c7a6}
.energy-gauge-ticks{position:relative;height:calc(17 * var(--r));margin-top:calc(4 * var(--r));font-size:calc(12 * var(--r));line-height:1.4;color:#7a5c40}
.energy-gauge-ticks span{position:absolute;top:0;left:calc(var(--at) * 100%);transform:translateX(-50%);white-space:nowrap}
.energy-gauge-ticks span:last-child{transform:translateX(-100%)}
.energy-gauge-ticks span::before{content:'';position:absolute;left:50%;top:calc(-8 * var(--r));width:calc(2 * var(--r));height:calc(6 * var(--r));background:#8a6a48}
.energy-gauge-ticks span:last-child::before{left:auto;right:0}

/* One line of advice under the hero, with its button. */
.energy-status-row{display:flex;align-items:stretch;gap:calc(10 * var(--r));margin-top:calc(10 * var(--r))}
.energy-status-row[hidden]{display:none}
.resource-window[data-kind=energy] .energy-status-row .energy-status{flex:1;display:flex;align-items:center;margin:0;padding:calc(8 * var(--r)) calc(12 * var(--r));font-size:max(12px,calc(14 * var(--r)));line-height:1.45;text-align:left}
.resource-window[data-kind=energy] .energy-status-action{flex:0 0 auto;min-height:calc(46 * var(--r));margin:0;padding:calc(3 * var(--r)) calc(14 * var(--r));border-width:calc(7 * var(--r));font-size:max(13px,calc(16 * var(--r)));white-space:nowrap}

/* Island power and the refill side by side. */
.energy-columns{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:calc(18 * var(--r));align-items:start}
.resource-window[data-kind=energy] .energy-panel .energy-section-title{display:flex;align-items:baseline;justify-content:space-between;gap:calc(10 * var(--r));margin:calc(12 * var(--r)) 0 calc(5 * var(--r));padding:calc(5 * var(--r)) calc(11 * var(--r));font-size:calc(19 * var(--r));line-height:1.25}
.energy-section-value{font-size:calc(17 * var(--r));color:#6a4628;white-space:nowrap}
.energy-usage,.energy-refill-intro{margin:0 calc(2 * var(--r)) calc(7 * var(--r));font-size:max(12px,calc(14 * var(--r)));line-height:1.45;color:#5b412c}
.energy-rows{display:grid;gap:calc(4 * var(--r));margin:0;padding:0;list-style:none}
.energy-row{display:grid;grid-template-columns:calc(26 * var(--r)) auto minmax(0,1fr) auto;align-items:center;gap:calc(8 * var(--r));min-height:calc(40 * var(--r));padding:calc(3 * var(--r)) calc(11 * var(--r)) calc(3 * var(--r)) calc(6 * var(--r));background:#fff4d9;border:calc(2 * var(--r)) solid #e6cd9e}
.energy-row-icon{display:grid;place-items:center}
.energy-row-icon svg{display:block;width:calc(26 * var(--r));height:calc(26 * var(--r))}
.energy-row-name{min-width:calc(48 * var(--r));font:700 calc(16 * var(--r))/1.2 Pixeloid,monospace;white-space:nowrap}
.energy-row-state{display:flex;flex-wrap:wrap;align-items:center;gap:calc(2 * var(--r)) calc(8 * var(--r));min-width:0}
.energy-chip{display:inline-flex;align-items:center;gap:calc(5 * var(--r));padding:calc(1 * var(--r)) calc(7 * var(--r));border:calc(2 * var(--r)) solid #a5cd82;background:#e2f1cd;color:#2e5a21;font:700 max(11px,calc(13 * var(--r)))/1.35 Pixeloid,monospace;white-space:nowrap}
.energy-chip::before{content:'';flex:none;width:calc(7 * var(--r));height:calc(7 * var(--r));background:currentColor}
.energy-row[data-tone=alert] .energy-chip{border-color:#dc9a80;background:#ffe2d6;color:#923e2d}
.energy-row[data-tone=off]{background:#f5eddb;border-color:#e0d1b4}
.energy-row[data-tone=off] .energy-chip{border-color:#d6c6a6;background:#eee5d1;color:#7a6850}
.energy-row[data-tone=off] .energy-chip::before{background:none;box-shadow:inset 0 0 0 calc(2 * var(--r)) currentColor}
.energy-row[data-tone=off] :is(.energy-row-icon,.energy-row-name,.energy-row-watts){opacity:.5}
.energy-row-note{font-size:max(11px,calc(12.5 * var(--r)));line-height:1.35;color:#7a6149}
.resource-window .energy-row-action{padding:0;font-size:max(11px,calc(12.5 * var(--r)));line-height:1.35;white-space:nowrap}
.energy-row-watts{min-width:calc(60 * var(--r));font:700 calc(16 * var(--r))/1.2 Pixeloid,monospace;text-align:right;white-space:nowrap}
.energy-row[data-status=mining] .energy-chip::before{animation:energy-mining-blink 1.6s steps(2,jump-none) infinite}
@keyframes energy-mining-blink{from{opacity:1}to{opacity:.25}}
.energy-cost{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:calc(2 * var(--r)) calc(10 * var(--r));margin-top:calc(6 * var(--r));padding:calc(6 * var(--r)) calc(11 * var(--r));border:calc(2 * var(--r)) solid #e0b46b;background:#ffe7b6;font-size:max(12px,calc(14 * var(--r)));line-height:1.4}
.energy-cost[hidden]{display:none}
.energy-cost strong{white-space:nowrap}

/* Refills: each says how long and how much for the whole island, and its price. */
.energy-offers{display:grid;gap:calc(6 * var(--r))}
.energy-offer{position:relative;display:grid;grid-template-columns:calc(80 * var(--r)) minmax(0,1fr) auto;align-items:center;gap:calc(8 * var(--r));min-height:calc(54 * var(--r));padding:calc(3 * var(--r)) calc(16 * var(--r)) calc(3 * var(--r)) calc(12 * var(--r));border:calc(6 * var(--r)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;background:none;color:#38241f;font-family:Pixeloid,monospace;text-align:left;cursor:pointer}
.energy-offer[aria-pressed=true]{border-image-source:url('../ui/frames/resource-selected.svg')}
.energy-offer-hours{font-size:calc(25 * var(--r));line-height:1.2;white-space:nowrap}
.energy-offer-kwh{font-size:max(12px,calc(14 * var(--r)));line-height:1.3;color:#6b5038;white-space:nowrap}
.energy-offer-cost{display:flex;justify-content:flex-end;font-size:max(12px,calc(16 * var(--r)));font-weight:700;line-height:1.3;white-space:nowrap}
.energy-offer-check{position:absolute;right:calc(-7 * var(--r));top:calc(-7 * var(--r));padding:calc(3 * var(--r));background:#168fd4;border:2px solid #28669a;color:#fff}
.energy-offer-check .pixel-icon{display:block;width:calc(16 * var(--r));height:calc(16 * var(--r))}
.resource-window[data-kind=energy] .energy-buy{flex-wrap:wrap;column-gap:.35em;row-gap:0;width:100%;margin-top:calc(10 * var(--r));min-height:calc(60 * var(--r));padding:calc(8 * var(--r)) calc(6 * var(--r));border-width:calc(8 * var(--r));font-size:max(14px,calc(21 * var(--r)));line-height:1.2;white-space:nowrap}
.energy-buy.token-label .token-price{vertical-align:middle}
.energy-refill .transaction-status{margin-top:calc(10 * var(--r))}
.resource-window[data-kind=energy] .energy-refill .resource-insufficient{margin-top:calc(8 * var(--r));font-size:max(12px,calc(13 * var(--r)))}
.energy-refill-empty{display:flex;align-items:center;gap:calc(10 * var(--r));margin:calc(2 * var(--r)) 0 0;padding:calc(10 * var(--r)) calc(12 * var(--r));border:calc(2 * var(--r)) dashed #d8bf8e;background:#fbf1da;color:#6b5038;font-size:max(12px,calc(14 * var(--r)));line-height:1.45}
.energy-refill-empty .pixel-icon{display:block;width:calc(30 * var(--r));height:calc(30 * var(--r));opacity:.75}
.energy-note{margin-top:calc(12 * var(--r));font-size:max(11px,calc(12.5 * var(--r)));line-height:1.45;text-align:center;color:#6d5640}

@media(prefers-reduced-motion:reduce){.energy-row[data-status=mining] .energy-chip::before{animation:none}}
/* Phones: one column, the hero's stats side by side, refills as three cards. */
@media(max-width:600px){
  .resource-dialog.resource-window[data-kind=energy]{--r:clamp(.55px,calc((100vw - 16px) / 440),.9px);width:calc(100vw - 16px);border-width:9px}
  .resource-window[data-kind=energy] .resource-heading{padding:7px 10px;gap:10px}
  .resource-window[data-kind=energy] .resource-heading>.resource-icon>.pixel-icon{width:38px;height:38px}
  .resource-window[data-kind=energy] .resource-heading h1{font-size:26px}
  .resource-window[data-kind=energy] .resource-close{flex-basis:40px;width:40px;height:40px;padding:8px}
  .resource-window[data-kind=energy] .resource-body{padding:8px 9px}
  .energy-hero{grid-template-columns:1fr;grid-template-areas:'main' 'stats' 'gauge';gap:calc(6 * var(--r));padding:calc(8 * var(--r)) calc(12 * var(--r)) calc(4 * var(--r));text-align:center}
  .energy-hero .energy-time{font-size:calc(48 * var(--r))}
  .energy-caption{font-size:max(11px,calc(15 * var(--r)))}
  .energy-gauge-ticks{height:calc(15 * var(--r));margin-top:calc(3 * var(--r));font-size:max(10px,calc(11 * var(--r)))}
  .energy-hero .energy-time[data-unavailable=true]{font-size:calc(40 * var(--r))}
  .energy-gauge{height:calc(22 * var(--r))}
  .resource-window[data-kind=energy] .energy-panel .energy-section-title{margin:calc(8 * var(--r)) 0 calc(3 * var(--r));padding:calc(3 * var(--r)) calc(9 * var(--r));font-size:calc(18 * var(--r))}
  .resource-window[data-kind=energy] .energy-status-row .energy-status{padding:calc(6 * var(--r)) calc(9 * var(--r))}
  .energy-usage,.energy-refill-intro{margin-bottom:calc(5 * var(--r))}
  .energy-row{min-height:calc(32 * var(--r));padding-block:calc(2 * var(--r))}
  .energy-cost{margin-top:calc(4 * var(--r));padding:calc(4 * var(--r)) calc(9 * var(--r))}
  .energy-note{margin-top:calc(6 * var(--r))}
  .energy-stats{grid-template-columns:1fr 1fr}
  .energy-stats>div{min-width:0;justify-content:center;gap:calc(8 * var(--r));padding:calc(3 * var(--r)) calc(6 * var(--r))}
  .energy-stats dt{font-size:max(10px,calc(12 * var(--r)))}
  .energy-stats dd{font-size:max(12px,calc(16 * var(--r)))}
  .energy-status-row{flex-wrap:wrap;gap:calc(6 * var(--r))}
  .resource-window[data-kind=energy] .energy-status-row .energy-status{flex:1 1 55%}
  .resource-window[data-kind=energy] .energy-status-action{flex:1 0 auto;min-height:40px;padding:2px 10px;border-width:6px}
  .energy-columns{grid-template-columns:1fr;gap:0}
  .energy-row{grid-template-columns:calc(24 * var(--r)) auto minmax(0,1fr) auto;gap:calc(7 * var(--r))}
  .energy-offers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .energy-offer{grid-template-columns:1fr;justify-items:center;gap:0;min-height:0;padding:calc(3 * var(--r)) calc(2 * var(--r));text-align:center}
  .energy-offer-hours{font-size:calc(23 * var(--r))}
  .energy-offer-cost{justify-content:center}
  .resource-window[data-kind=energy] .energy-buy{min-height:46px;margin-top:calc(8 * var(--r))}
}