/* The Power window (power-ui.mjs): the POWER yard's own screen in the HUD's cream pixel style.
   --p scales the whole window so it fits 1280x800 to 2000x1218 without scrolling; phones scroll its body. */
.power-window{--p:clamp(.62px,min(calc((100vw - 24px) / 1060),calc((100dvh - 24px) / 880)),1.3px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(1060 * var(--p)),calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:calc(12 * var(--p)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;overflow:hidden;
  color:var(--ink);font:400 calc(14 * var(--p))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.power-window[open]{display:flex;flex-direction:column}
.power-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.power-window [hidden]{display:none!important}
.power-window *{box-sizing:border-box}
/* Content-sized sheet and body (flex-basis auto, never 0%): WebKit resolves a percentage inside a modal <dialog> as 0 and
   the window collapsed to a thin frame on iPhones (9 Oct 2026; island-hall.css). */
.power-sheet{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.power-window :is(h1,h2,p,figure,ul,ol){margin:0}
.power-window :is(button,summary):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.power-window button:not(:disabled):hover{filter:brightness(1.04);translate:0 -1px}
.power-window button:not(:disabled):active{translate:0 1px}

/* Pixel icons: a dark edge under the fill (power-ui.mjs pixelIcon). */
.power-icon{display:block;width:100%;height:100%}
.power-icon-edge{fill:#3e211d}.power-icon-fill{fill:#ffd23f}.power-icon-accent{fill:#fff6b0}

/* ---------------------------------------------------------------- header */
.power-head{flex:none;display:flex;align-items:center;gap:calc(14 * var(--p));padding:calc(10 * var(--p)) calc(16 * var(--p));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--p)) solid #d9a15f}
.power-head-icon{flex:none;width:calc(42 * var(--p));height:calc(46 * var(--p));filter:drop-shadow(0 calc(2 * var(--p)) 0 #b8742f)}
.power-head-copy{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(16 * var(--p))}
.power-head h1{font:700 calc(34 * var(--p))/1.1 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase}
.power-head-level{font:700 calc(16 * var(--p))/1.2 Pixeloid,monospace;color:#6a3a16;background:#fff6dc;border:calc(2 * var(--p)) solid #d9a15f;
  box-shadow:inset 0 calc(2 * var(--p)) #fffdf3;padding:calc(5 * var(--p)) calc(11 * var(--p));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.power-close{flex:none;display:grid;place-items:center;width:calc(48 * var(--p));height:calc(48 * var(--p));min-width:36px;min-height:36px;padding:calc(10 * var(--p));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:var(--ink);cursor:pointer}
.power-close svg{width:100%;height:100%;shape-rendering:crispEdges}

/* ---------------------------------------------------------------- layout */
.power-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.power-grid{display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);grid-template-areas:"hero next" "usage next" "ladder ladder";
  align-content:start;gap:calc(10 * var(--p)) calc(16 * var(--p));padding:calc(11 * var(--p)) calc(16 * var(--p)) calc(10 * var(--p))}
.power-hero{grid-area:hero}.power-usage{grid-area:usage}.power-next{grid-area:next}.power-ladder{grid-area:ladder}
.power-section-title{font:700 calc(16 * var(--p))/1.3 Pixeloid,monospace;background:linear-gradient(90deg,#ffdaa0,#ffedc3);
  padding:calc(6 * var(--p)) calc(11 * var(--p));clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.power-usage,.power-next{border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}

/* ---------------------------------------------------------------- hero: the yard renders */
.power-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) calc(46 * var(--p)) minmax(0,1fr);align-items:end;gap:calc(4 * var(--p));
  min-height:calc(240 * var(--p));padding:calc(8 * var(--p)) calc(12 * var(--p)) calc(10 * var(--p));overflow:hidden;
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile-blue.svg') 8 stretch;background-clip:padding-box;
  background:linear-gradient(180deg,#bfe1fb 0%,#dff0fc 46%,#fbf3dc 78%,#fff3d4 100%) padding-box}
/* Pixel clouds drifting behind the yards. */
.power-hero::before,.power-hero::after{content:'';position:absolute;z-index:0;width:calc(96 * var(--p));height:calc(20 * var(--p));background:#ffffffd9;
  box-shadow:calc(18 * var(--p)) calc(-12 * var(--p)) 0 calc(-4 * var(--p)) #ffffffd9,calc(42 * var(--p)) calc(-6 * var(--p)) 0 calc(-6 * var(--p)) #ffffffd9;
  top:calc(30 * var(--p));left:6%;animation:power-cloud 26s linear infinite alternate}
.power-hero::after{top:calc(64 * var(--p));left:auto;right:8%;transform:scale(.7);animation-duration:34s;animation-direction:alternate-reverse}
.power-hero[data-layout=single]{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;gap:0}
.power-hero[data-layout=single] .power-stage{width:min(100%,calc(330 * var(--p)))}
.power-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.power-art{position:relative;isolation:isolate;width:100%;aspect-ratio:4/3;display:grid;place-items:center}
/* A little floating island under each yard: a grass top over an earth rim. */
.power-art::before,.power-art::after{content:'';position:absolute;left:7%;right:7%;border-radius:50%;pointer-events:none}
.power-art::after{z-index:-2;bottom:3%;height:31%;background:radial-gradient(closest-side,#9a6a40 0 82%,#73492b 84% 96%,transparent 98%)}
.power-art::before{z-index:-1;bottom:9%;height:31%;background:radial-gradient(closest-side,#c3e48c 0 70%,#a6d16b 74% 88%,#86b450 90% 96%,transparent 98%)}
.power-render,.power-rung-render{display:block;width:100%;height:100%;object-fit:contain;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.power-render{position:relative;z-index:1;filter:drop-shadow(0 calc(2 * var(--p)) 0 #3e211d22)}
.power-stage figcaption{display:grid;justify-items:center;gap:calc(1 * var(--p));margin-top:calc(-8 * var(--p));text-align:center;max-width:100%}
.power-tag{font:700 calc(11.5 * var(--p))/1 Pixeloid,monospace;letter-spacing:.08em;text-transform:uppercase;padding:calc(5 * var(--p)) calc(9 * var(--p)) calc(4 * var(--p));
  background:#3e211d;color:#fff4d2;box-shadow:0 calc(2 * var(--p)) 0 #00000026}
.power-stage-level{font:700 calc(22 * var(--p))/1.15 Pixeloid,monospace}
.power-stage-name{font-size:calc(13 * var(--p));color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.power-stage[data-kind=next] .power-tag{background:#f0913a;color:#2b1307}
.power-stage[data-kind=next] .power-art{background:radial-gradient(closest-side,#fff6bf 0,#fff6bf88 45%,transparent 72%)}
.power-stage[data-kind=next] .power-render{animation:power-float 3.6s ease-in-out infinite}
.power-stage[data-kind=max] .power-tag,.power-stage[data-kind=celebrate] .power-tag{background:linear-gradient(180deg,#ffe680,#ffb23d);color:#3a1c08;outline:calc(2 * var(--p)) solid #4f2410}
.power-arrow{position:relative;z-index:1;align-self:center;margin-bottom:calc(46 * var(--p));display:grid;place-items:center}
.power-arrow-icon{width:calc(40 * var(--p));height:calc(36 * var(--p));animation:power-nudge 1.4s steps(4) infinite}
.power-arrow-icon .power-icon-fill{fill:#f0913a}
/* Building: the next yard as a plan behind hazard tape, filling with the build. */
.power-stage[data-kind=building] .power-render{filter:grayscale(.65) sepia(.3) brightness(1.06);opacity:.72}
.power-stage[data-kind=building] .power-tag{background:#ffd23f;color:#3a1c08;outline:calc(2 * var(--p)) dashed #3e211d}
.power-tape{position:absolute;z-index:3;left:4%;right:4%;top:40%;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--p));padding:calc(5 * var(--p));
  transform:rotate(-6deg);background:repeating-linear-gradient(-45deg,#ffd23f 0 calc(10 * var(--p)),#2f1e16 calc(10 * var(--p)) calc(20 * var(--p)));
  box-shadow:0 calc(3 * var(--p)) 0 #00000033;font:700 calc(13 * var(--p))/1 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.08em}
.power-tape span:last-child{background:#ffd23f;padding:calc(4 * var(--p)) calc(8 * var(--p));border:calc(2 * var(--p)) solid #2f1e16}
.power-tape-icon{width:calc(22 * var(--p));height:calc(22 * var(--p));background:#ffd23f;padding:calc(2 * var(--p));border:calc(2 * var(--p)) solid #2f1e16}
.power-hammer-icon .power-icon-fill{fill:#9a6a40}
.power-stage-bar{position:absolute;z-index:3;left:14%;right:14%;bottom:8%;height:calc(14 * var(--p));border:calc(2 * var(--p)) solid #3e211d;background:#fff4d2}
.power-stage-bar i,.power-progress-bar i{display:block;height:100%;width:0;transition:width .9s linear;
  background:repeating-linear-gradient(-45deg,#ffd23f 0 calc(7 * var(--p)),#f0a92e calc(7 * var(--p)) calc(14 * var(--p)));background-size:calc(19.8 * var(--p)) 100%;animation:power-march 1s linear infinite}
/* Level up: rays and confetti behind the new yard. */
.power-burst{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.power-burst::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,#fff4a8aa 0 9deg,transparent 9deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);animation:power-spin 14s linear infinite}
.power-burst i{position:absolute;left:50%;top:50%;width:calc(10 * var(--p));height:calc(10 * var(--p));background:#ffd23f;border:calc(2 * var(--p)) solid #3e211d;
  --a:calc(var(--i) * 25.7deg);transform:rotate(var(--a)) translateY(0);opacity:0;animation:power-pop 1.6s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 40ms) 2 both}
.power-burst i:nth-child(3n){background:#f0913a}.power-burst i:nth-child(3n+1){background:#38b2a3}.power-burst i:nth-child(4n){background:#4f88d8}
.power-cheer{position:relative;z-index:1;margin-top:calc(6 * var(--p));font:700 calc(26 * var(--p))/1.2 Pixeloid,monospace;color:#3a1c08;
  text-shadow:0 calc(2 * var(--p)) 0 #ffd88a;animation:power-pulse 1.8s ease-in-out infinite}
.power-grid[data-state=max] .power-cheer{animation:none;font-size:calc(20 * var(--p))}

/* ---------------------------------------------------------------- usage bar */
.power-usage{display:flex;flex-direction:column;padding:calc(10 * var(--p)) calc(12 * var(--p)) calc(10 * var(--p))}
.power-usage-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(10 * var(--p));margin-bottom:calc(8 * var(--p))}
.power-usage-title{font:400 calc(15 * var(--p))/1.3 Pixeloid,monospace}
.power-usage-title b{font-weight:700;font-size:calc(19 * var(--p))}
.power-free{font:700 calc(12.5 * var(--p))/1.3 Pixeloid,monospace;color:#33692f;background:#e5f3d4;border:calc(2 * var(--p)) solid #a8cf8b;padding:calc(2 * var(--p)) calc(8 * var(--p));white-space:nowrap}
/* A PC that does not fit waits (owner decision, 4 Oct 2026): amber, never the old all-stop alarm. */
.power-usage[data-waiting=true] .power-free{color:#7a4a12;background:#fff0c9;border-color:#e2b866}
.power-bar{position:relative;display:flex;height:calc(32 * var(--p));overflow:hidden;border:calc(3 * var(--p)) solid #5c382c;
  background:repeating-linear-gradient(90deg,#f1e4c3 0 calc(8 * var(--p)),#f8eed6 calc(8 * var(--p)) calc(16 * var(--p)));box-shadow:inset 0 calc(3 * var(--p)) #0000001a}
.power-seg{flex:none;display:flex;align-items:center;justify-content:center;min-width:3px;height:100%;overflow:hidden;background:var(--pc);
  box-shadow:inset 0 calc(5 * var(--p)) #ffffff47,inset 0 calc(-5 * var(--p)) #00000024,inset calc(-2 * var(--p)) 0 #3e211d66;
  color:#20120b;font:700 calc(11.5 * var(--p))/1 Pixeloid,monospace;font-style:normal;white-space:nowrap;transition:width .45s ease-out}
.power-seg span{padding:0 calc(4 * var(--p));overflow:hidden;text-overflow:clip;text-shadow:0 1px #ffffff66}
.power-legend{list-style:none;padding:0;margin-top:calc(8 * var(--p));display:flex;flex-wrap:wrap;gap:calc(5 * var(--p)) calc(14 * var(--p));font-size:calc(12.5 * var(--p))}
.power-legend li{display:flex;align-items:center;gap:calc(6 * var(--p))}
.power-legend b{font-weight:700}
.power-dot{flex:none;width:calc(12 * var(--p));height:calc(12 * var(--p));background:var(--pc);border:calc(2 * var(--p)) solid #3e211d}
.power-legend .off{color:#8a7563}.power-legend .off .power-dot{background:repeating-linear-gradient(-45deg,var(--pc) 0 2px,transparent 2px 4px)}
/* Desk 1 on the home connection: its own line, outside the bar. */
.power-legend .home{flex-basis:100%;color:#33692f}.power-legend .home .power-dot{background:#e5f3d4;border-color:#33692f}
.power-legend .waiting{color:#7a4a12}.power-legend .waiting .power-dot{background:transparent;border-style:dashed;border-color:var(--pc)}
.power-legend-empty{color:var(--soft)}
.power-alert{margin-top:calc(9 * var(--p));padding:calc(7 * var(--p)) calc(10 * var(--p));background:#ffe1d6;border:calc(2 * var(--p)) solid #e39a83;color:#873023;font-size:calc(12.5 * var(--p));line-height:1.5}
.power-alert[data-tone=wait]{background:#fff0c9;border-color:#e2b866;color:#6b4210}

/* ---------------------------------------------------------------- what the next level brings */
.power-next{display:flex;flex-direction:column;gap:calc(8 * var(--p));padding:calc(10 * var(--p)) calc(12 * var(--p)) calc(12 * var(--p));min-width:0}
.power-changes{list-style:none;padding:0;display:grid;gap:calc(5 * var(--p))}
.power-change{display:flex;align-items:center;gap:calc(10 * var(--p));min-height:calc(48 * var(--p));padding:calc(4 * var(--p)) calc(8 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae}
.power-change-badge{flex:none;display:grid;place-items:center;width:calc(36 * var(--p));height:calc(36 * var(--p));padding:calc(7 * var(--p));background:#ffe9b8;border:calc(2 * var(--p)) solid #d9a15f;box-shadow:inset 0 calc(2 * var(--p)) #fff7df}
.power-change[data-key=run] .power-change-badge{background:#dff1cf;border-color:#94c172}.power-change[data-key=run] .power-icon-fill{fill:#3b6f8f}.power-change[data-key=run] .power-icon-accent{fill:#8de08a}
.power-change[data-key=room] .power-change-badge{background:#e1effa;border-color:#93bede}.power-change[data-key=room] .power-icon-fill{fill:#3b6f8f}.power-change[data-key=room] .power-icon-accent{fill:#9fd6ff}
.power-change[data-key=plots] .power-change-badge{background:#e8f3d4;border-color:#a3c77f}.power-change[data-key=plots] .power-icon-fill{fill:#8a5a32}.power-change[data-key=plots] .power-icon-accent{fill:#f0913a}
.power-change[data-key=time] .power-change-badge{background:#efe6fa;border-color:#b7a0d8}.power-change[data-key=time] .power-icon-fill{fill:#8a5a32}.power-change[data-key=time] .power-icon-accent{fill:#ffd23f}
.power-change-copy{display:grid;min-width:0;line-height:1.3}
.power-change-label{font-size:calc(10.5 * var(--p));letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.power-change strong{font:700 calc(15.5 * var(--p))/1.3 Pixeloid,monospace}
.power-change small{font-size:calc(11.5 * var(--p));color:var(--soft)}
.power-action{margin-top:auto;display:grid;gap:calc(6 * var(--p));padding-top:calc(4 * var(--p))}
.power-level-up{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(10 * var(--p));width:100%;min-height:calc(66 * var(--p));
  padding:calc(7 * var(--p)) calc(12 * var(--p));border:calc(9 * var(--p)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch;background:none;
  color:#3a1c08;font:700 calc(23 * var(--p))/1.1 Pixeloid,monospace;cursor:pointer;text-shadow:0 calc(2 * var(--p)) #fff3b066}
.power-level-up-icon{width:calc(24 * var(--p));height:calc(26 * var(--p))}
.power-level-up-part::before{content:'·';margin-right:calc(10 * var(--p));opacity:.55}
.power-level-up:not(:disabled){animation:power-glow 2.4s ease-in-out infinite}
.power-level-up:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed;text-shadow:none}
.power-level-up:disabled .power-level-up-icon{filter:grayscale(1);opacity:.6}
.power-action-note{text-align:center;font-size:calc(12 * var(--p));line-height:1.55;color:#755742}
.power-action-note[data-tone]{padding:calc(6 * var(--p)) calc(9 * var(--p))}
.power-action-note[data-tone=warn]{background:#fff0c9;color:#7a4b12}
.power-action-note[data-tone=error]{background:#ffe5d5;color:#873e2d}
.power-action-note[data-tone=success]{background:#e8f1d9;color:#45632c}
/* Upgrade economy (4 Oct 2026): a price that grows with the island's hash record says so; its formula on hover. */
.power-price-grows{text-align:center;font-size:calc(11.5 * var(--p));line-height:1.45;color:var(--soft);cursor:help}
.power-progress{display:grid;gap:calc(7 * var(--p));padding:calc(10 * var(--p)) calc(12 * var(--p));background:#fff4cf;border:calc(2 * var(--p)) solid #e2b860}
.power-progress-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(10 * var(--p));font-weight:700}
.power-remaining{font-size:calc(18 * var(--p));font-variant-numeric:tabular-nums}
.power-progress-bar{height:calc(24 * var(--p));border:calc(3 * var(--p)) solid #5c382c;background:#efe2c0;overflow:hidden}
.power-progress small{font-size:calc(12 * var(--p));color:var(--soft);line-height:1.5}
.power-waiting{display:grid;gap:calc(8 * var(--p));justify-items:center;text-align:center;padding:calc(10 * var(--p));background:#deeffa;border:calc(2 * var(--p)) solid #acd0e9;color:#244c70;font-size:calc(12.5 * var(--p))}
.power-secondary{min-height:calc(42 * var(--p));padding:calc(5 * var(--p)) calc(16 * var(--p));border:calc(7 * var(--p)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:var(--ink);font:700 calc(14 * var(--p))/1.2 Pixeloid,monospace;cursor:pointer}
.power-next[data-kind=max]{justify-content:flex-start}
.power-max-copy{margin-top:auto;padding:calc(8 * var(--p)) calc(10 * var(--p));text-align:center;font-size:calc(12.5 * var(--p));line-height:1.55;color:#5d4a36;background:#fff4cf;border:calc(2 * var(--p)) solid #ecd09a}
.power-next .transaction-status{margin:0}

/* ---------------------------------------------------------------- the ladder */
.power-ladder{min-width:0}
.power-ladder-head{display:flex;align-items:center;gap:calc(10 * var(--p))}
.power-ladder-head .power-section-title{flex:1}
.power-ladder-count{font:700 calc(12 * var(--p))/1 Pixeloid,monospace;color:var(--muted);white-space:nowrap}
.power-rungs{position:relative;list-style:none;margin-top:calc(6 * var(--p));padding:calc(10 * var(--p)) calc(2 * var(--p)) calc(3 * var(--p));display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(calc(112 * var(--p)),1fr);gap:calc(8 * var(--p));overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.power-rung{position:relative;display:grid;justify-items:center;align-content:start;gap:calc(1 * var(--p));min-width:0;padding:calc(4 * var(--p)) calc(4 * var(--p)) calc(7 * var(--p));
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;text-align:center;scroll-snap-align:start}
.power-rung-art{position:relative;width:100%;height:calc(80 * var(--p))}
.power-rung-level{font:700 calc(11.5 * var(--p))/1.3 Pixeloid,monospace;color:var(--muted)}
.power-rung-watts{font:700 calc(15 * var(--p))/1.25 Pixeloid,monospace}
.power-rung-price{font-size:calc(11 * var(--p));color:var(--soft);white-space:nowrap}
.power-rung[data-state=current]{outline:calc(3 * var(--p)) solid #f0913a;outline-offset:calc(-1 * var(--p));
  transform:translateY(calc(-4 * var(--p)));box-shadow:0 calc(4 * var(--p)) 0 #c5803f40}
.power-rung[data-state=next],.power-rung[data-state=building]{outline:calc(2 * var(--p)) dashed #e0822f;outline-offset:calc(-1 * var(--p))}
.power-rung[data-state=building]{outline-color:#3e211d;background:repeating-linear-gradient(-45deg,#ffd23f22 0 calc(8 * var(--p)),transparent calc(8 * var(--p)) calc(16 * var(--p))) padding-box}
.power-rung[data-state=done] .power-rung-render{filter:saturate(.75)}
.power-rung[data-state=locked]{color:#8f7d68}
.power-rung[data-state=locked] .power-rung-render{filter:grayscale(.9) brightness(1.1) contrast(.8);opacity:.5}
.power-rung[data-state=locked] .power-rung-watts{color:#8f7d68}
.power-rung-tag{position:absolute;z-index:2;top:calc(-14 * var(--p));left:50%;translate:-50% 0;display:flex;align-items:center;gap:calc(3 * var(--p));
  font:700 calc(10.5 * var(--p))/1 Pixeloid,monospace;letter-spacing:.07em;text-transform:uppercase;padding:calc(4 * var(--p)) calc(7 * var(--p));background:#3e211d;color:#fff4d2;white-space:nowrap}
.power-rung[data-state=next] .power-rung-tag{background:#f0913a;color:#2b1307}
.power-rung[data-state=building] .power-rung-tag{background:#ffd23f;color:#3a1c08;outline:calc(2 * var(--p)) dashed #3e211d}
.power-rung-tag-icon{width:calc(12 * var(--p));height:calc(12 * var(--p))}
.power-rung-check,.power-rung-lock{position:absolute;z-index:2;top:calc(2 * var(--p));right:calc(2 * var(--p));width:calc(22 * var(--p));height:calc(22 * var(--p));padding:calc(3 * var(--p));border:calc(2 * var(--p)) solid #3e211d}
.power-rung-check{background:#8cc85e}.power-rung-check .power-icon-fill{fill:#fffbe9}.power-rung-check .power-icon-edge{fill:#2d5a1c}
.power-rung-lock{background:#efe2c4}.power-rung-lock .power-icon-fill{fill:#8f7d68}.power-rung-lock .power-icon-accent{fill:#efe2c4}.power-rung-lock .power-icon-edge{fill:#5d4a36}
.power-hint{margin-top:calc(8 * var(--p));text-align:center;font-size:calc(12.5 * var(--p));line-height:1.5;color:#5d4a36}
.power-tariff{margin-top:auto;padding-top:calc(8 * var(--p));font-size:calc(11.5 * var(--p));line-height:1.5;color:#7a6047}

/* ---------------------------------------------------------------- economy v8: the builder's queue and Island Level gates */
.power-stage[data-kind=queued] .power-tag{background:#4f88d8;color:#fff9ea}
.power-stage[data-kind=queued] .power-render{filter:saturate(.8) brightness(1.04);opacity:.86}
.power-stage-queued{position:absolute;z-index:3;top:8%;right:10%;width:calc(30 * var(--p));height:calc(34 * var(--p));padding:calc(4 * var(--p));
  background:#e1effa;border:calc(2 * var(--p)) solid #3e211d;box-shadow:0 calc(2 * var(--p)) 0 #00000026}
.power-queued-icon .power-icon-fill{fill:#8a5a32}.power-queued-icon .power-icon-accent{fill:#ffd23f}
.power-queued{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(2 * var(--p)) calc(10 * var(--p));
  padding:calc(9 * var(--p)) calc(12 * var(--p));background:#e9f3fc;border:calc(2 * var(--p)) solid #9cc3e3;color:#24476a}
.power-queued strong{font:700 calc(15 * var(--p))/1.3 Pixeloid,monospace}
.power-queued small{grid-column:2;font-size:calc(12 * var(--p));line-height:1.45;color:#3d5f80}
.power-queued-badge{grid-row:span 2;width:calc(30 * var(--p));height:calc(34 * var(--p));padding:calc(4 * var(--p));background:#fff;border:calc(2 * var(--p)) solid #9cc3e3}
.power-queue-next{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--p));width:100%;min-height:calc(46 * var(--p));padding:calc(5 * var(--p)) calc(12 * var(--p));
  border:calc(7 * var(--p)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:var(--ink);
  font:700 calc(15 * var(--p))/1.2 Pixeloid,monospace;cursor:pointer}
.power-queue-next:disabled{color:#8b7964;cursor:not-allowed}
.power-progress .power-queue-next,.power-queued .power-queue-next{grid-column:1/-1;min-height:calc(38 * var(--p));border-width:calc(6 * var(--p));font-size:calc(13.5 * var(--p))}
.power-queue-next-icon{flex:none;width:calc(17 * var(--p));height:calc(20 * var(--p))}
.power-queue-next-icon .power-icon-fill{fill:#8a5a32}.power-queue-next-icon .power-icon-accent{fill:#ffd23f}
.power-open-hall{justify-self:center}
.power-change[data-key=gate]{background:#fff3e6;border-color:#f0b27a}
.power-change[data-key=gate] .power-change-badge{background:#ffe1c8;border-color:#e0822f}
.power-change[data-key=gate] .power-icon-fill{fill:#8f5a2c}.power-change[data-key=gate] .power-icon-accent{fill:#ffd23f}
.power-rung[data-state=queued]{outline:calc(2 * var(--p)) dashed #4f88d8;outline-offset:calc(-1 * var(--p))}
.power-rung[data-state=queued] .power-rung-tag{background:#4f88d8;color:#fff9ea}
.power-rung[data-state=queued] .power-rung-tag-icon .power-icon-fill{fill:#fff9ea}.power-rung[data-state=queued] .power-rung-tag-icon .power-icon-edge{fill:#1f3d63}
.power-rung[data-state=later]{color:#8f7d68}
.power-rung[data-state=later] .power-rung-render{filter:grayscale(.6) brightness(1.08);opacity:.62}
.power-rung[data-state=later] .power-rung-watts{color:#8f7d68}
.power-rung[data-state=locked] .power-rung-tag{background:#efe2c4;color:#5d4a36;outline:calc(2 * var(--p)) solid #5d4a36}
.power-rung[data-state=locked] .power-rung-tag-icon .power-icon-fill{fill:#8f7d68}.power-rung[data-state=locked] .power-rung-tag-icon .power-icon-accent{fill:#efe2c4}

/* The Island panel's compact meter and its Open Power button. */
.island-panel .island-open-power{margin-top:6px}

/* ---------------------------------------------------------------- motion */
@keyframes power-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-4 * var(--p)))}}
@keyframes power-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(5 * var(--p)))}}
@keyframes power-march{from{background-position:0 0}to{background-position:calc(19.8 * var(--p)) 0}}
@keyframes power-spin{to{transform:rotate(1turn)}}
@keyframes power-pop{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-170 * var(--p))) scale(1) rotate(200deg)}}
@keyframes power-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes power-glow{0%,100%{filter:none}50%{filter:brightness(1.07) drop-shadow(0 0 calc(6 * var(--p)) #ffd23f99)}}
@keyframes power-cloud{from{translate:0 0}to{translate:calc(60 * var(--p)) 0}}
@media(prefers-reduced-motion:reduce){
  .power-window *,.power-window *::before,.power-window *::after{animation:none!important;transition:none!important}
  .power-window button{translate:none!important}
  .power-burst i{opacity:0}
}

/* ---------------------------------------------------------------- narrow screens: one column, the body scrolls */
@media(max-width:860px),(max-aspect-ratio:4/5){
  .power-window{--p:clamp(.78px,calc((100vw - 16px) / 600),1.15px);width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .power-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "usage" "next" "ladder"}
  .power-hero{min-height:0}
}
@media(max-width:600px){
  .power-window{--p:clamp(.74px,calc((100vw - 16px) / 470),1px);border-width:9px}
  .power-head{padding:8px 10px;gap:9px}
  .power-head h1{font-size:24px}
  .power-head-level{font-size:12px;padding:4px 8px}
  .power-grid{padding:10px;gap:10px}
  .power-hero{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);padding:8px 6px 10px}
  .power-arrow-icon{width:24px;height:22px}
  .power-stage-level{font-size:16px}
  .power-stage-name{font-size:11px;white-space:normal}
  .power-tag{font-size:10px}
  .power-usage-title b{font-size:16px}
  .power-change strong{font-size:14px}
  .power-change small,.power-change-label{font-size:11px}
  .power-level-up{font-size:19px;min-height:56px}
  .power-rungs{grid-auto-columns:minmax(98px,1fr)}
  .power-hint{font-size:12px}
}
/* The owner's sale (10 Oct 2026; power-ui.mjs): a rung's price still to pay with its marks, its build time under it. */
.power-rung-time{font-size:calc(11 * var(--p));color:var(--soft);white-space:nowrap}