.resource-dialog.resource-window{--r:clamp(.88px,min(.061vw,.105dvh),1.35px);width:min(calc(566 * var(--r)),calc(100vw - 20px));max-height:calc(100dvh - 24px);padding:0;border:calc(12 * var(--r)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;overflow:hidden;color:#35201e;font:400 calc(15 * var(--r))/1.5 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.resource-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.resource-window[open]{display:flex;flex-direction:column}
.resource-window .resource-heading{flex-shrink:0;display:flex;gap:calc(16 * var(--r));padding:calc(12 * var(--r)) calc(17 * var(--r));margin:0;background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--r)) solid #d9a15f}
.resource-window .resource-heading>.resource-icon>.pixel-icon{width:calc(50 * var(--r));height:calc(50 * var(--r))}
.resource-window .resource-heading h1{flex:1;margin:0;font:700 calc(30 * var(--r))/1.15 Pixeloid,monospace;letter-spacing:0;color:#3e211d}
.resource-window .resource-close{display:grid;place-items:center;flex:0 0 calc(42 * var(--r));width:calc(42 * var(--r));height:calc(42 * var(--r));padding:calc(8 * var(--r));border:0;border-radius:0;background:url('../ui/frames/picker-close.svg') center/100% 100%;cursor:pointer}
.resource-window .resource-close .pixel-icon{width:100%;height:100%}
.resource-body{padding:calc(14 * var(--r));min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2;overscroll-behavior:contain}
.resource-window p{margin:0}
.transaction-status{display:flex;align-items:center;gap:16px;box-sizing:border-box;width:100%;min-width:0;padding:16px 18px;border:2px solid #92acb4;background:#e1f0ed;box-shadow:inset 0 0 0 2px #f6fff4,0 3px 0 #b9c9b4;color:#284d4e;text-align:left;font-family:Pixeloid,monospace;font-synthesis:none}
.transaction-status>div{display:grid;gap:7px;min-width:0}
.transaction-status strong{font-size:clamp(16px,1.4vw,22px);font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.transaction-status span:not(.transaction-pulse){font-size:clamp(12px,1vw,16px);font-weight:400;line-height:1.5;color:#4b6157}
.transaction-pulse{display:flex;gap:4px;flex-shrink:0;align-items:center}
.transaction-pulse i{display:block;width:6px;height:6px;background:#517e68;animation:transaction-pulse 1.2s steps(2,end) infinite}
.transaction-pulse i:nth-child(2){animation-delay:.2s}.transaction-pulse i:nth-child(3){animation-delay:.4s}
.transaction-recovery{display:grid;gap:12px;padding-top:12px;color:#775332;font:400 15px/1.5 Pixeloid,monospace}
.pc-picker-transaction{max-width:620px;margin:16px auto 0}.pc-picker-start[hidden],.pc-picker-transaction[hidden]{display:none}
/* Island Ready PCs: where the new PC goes (a setup with room, or a PC it replaces). */
.pc-placement{position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:16px;background:#2a1a1459}
.pc-placement[hidden]{display:none}
.pc-placement-panel{box-sizing:border-box;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:18px 20px 20px;background:#fff7e4;border:2px solid #b46841;box-shadow:0 3px #54392a;color:#35211d;text-align:left;font:400 14px/1.5 Pixeloid,monospace}
.pc-placement-panel h2{margin:0 0 6px;font:700 19px/1.3 Pixeloid,monospace;color:#29212a}
.pc-placement-panel p{margin:0}
.pc-placement-choices{display:grid;gap:8px;margin-top:12px}
.pc-picker .pc-placement-choice{display:grid;gap:2px;width:100%;padding:9px 12px;text-align:left;background:#fffbee;border:2px solid #d9b98f;color:inherit;font:inherit;cursor:pointer}
.pc-placement-choice strong{font:700 15px/1.3 Pixeloid,monospace}
.pc-placement-choice span{color:#5d4638}
/* The desk's power for this PC (owner decision, 4 Oct 2026): home connection, powered, or the level it waits for. */
.pc-placement-choice .pc-placement-power{font-size:.92em;color:#2c5c33}
.pc-placement-choice .pc-placement-power:not([data-power=home]):not([data-power=powered]){color:#7a4a12}
.pc-picker .pc-placement-choice[aria-pressed=true]{border-color:#2c5c33;background:#e3f1d6;box-shadow:inset 0 0 0 1px #2c5c33}
.pc-placement-panel .pc-placement-note{margin-top:12px;padding:8px 10px;background:#f9e6b766;border-left:3px solid #c98a4e}
.pc-placement-note[hidden]{display:none}
.pc-placement-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px}
.pc-placement-actions button{padding:8px 16px;border:2px solid #8a5736;color:#35211d;font:700 14px/1.25 Pixeloid,monospace;cursor:pointer}
.pc-placement-cancel{background:#fff4d2}
.pc-placement-confirm{background:#ffb56b}
/* The scrolling shelf (picker.mjs pickerLayout): lists longer than the panel's one row
   of five cards, and every island list, whose cards add a USD price and a grid line and
   outgrow the panel's fixed row. It serves the playground and the wallet game alike
   (wallet-gate.css adds the wallet's notices and recovery). Rows grow with their
   cards, so no card overlaps another or leaves its frame; four cards (the first
   purchase) stay on one row. On short screens the unit shrinks until the tallest
   card (about 510u) still fits, even with a status line above it (down to a legible
   .6px). Phones scroll the whole picker from just below the HUD, with a sticky Buy
   button that a focused card scrolls clear of. */
@media(max-width:700px){
.pc-picker[data-layout=shelf]{inset:72px 0 12px;max-height:calc(100dvh - 84px);scroll-padding-bottom:64px}
.pc-picker[data-layout=shelf] .pc-picker-body{max-height:none}
.pc-picker[data-layout=shelf] .pc-picker-grid{max-height:none;overflow:visible;flex:none;grid-auto-rows:max-content}
.pc-picker[data-layout=shelf] .pc-picker-start{position:sticky;bottom:-5px;white-space:normal}
}
@media(min-width:701px){
.pc-picker[data-layout=shelf]{--u:max(.6px,min(1px,.13vw,calc((100dvh - 250px) / 590)));inset:52px 0 20px;width:min(1040px,calc(100vw - 32px));height:fit-content;max-height:calc(100dvh - 72px)}
.pc-picker[data-layout=shelf] .pc-picker-body{position:relative;top:0;height:auto;max-height:calc(100dvh - 72px);display:flex;flex-direction:column;gap:12px;padding:64px 24px 20px}
.pc-picker[data-layout=shelf] .pc-picker-body::before{bottom:0}
.pc-picker[data-layout=shelf] :is(.pc-picker-subtitle,.pc-picker-status){position:static;transform:none;flex-shrink:0}
.pc-picker[data-layout=shelf] .pc-picker-status{width:auto;max-width:100%;margin:0;font-size:14px}
.pc-picker[data-layout=shelf] .pc-picker-grid{flex:1 1 auto;min-height:0;height:auto;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2;grid-template-columns:repeat(auto-fill,minmax(calc(210 * var(--u)),1fr));grid-auto-rows:max-content;align-content:start;padding:calc(6 * var(--u)) calc(4 * var(--u));scroll-padding-block:calc(6 * var(--u))}
.pc-picker[data-layout=shelf] .pc-picker-grid[data-count='4']{grid-template-columns:repeat(4,minmax(0,1fr))}
.pc-picker[data-layout=shelf] .pc-picker-start{position:relative;inset:auto;transform:none;align-self:center;flex-shrink:0;width:max-content;min-width:min(100%,calc(336 * var(--u)));max-width:100%;white-space:normal}
}
/* Island catalog v7 (picker.mjs pickerOrder): one row by price, the $1 Retro PC leftmost and the
   strongest PC in the game rightmost. The row scrolls sideways (a mouse wheel scrolls it too). */
.pc-picker[data-layout=shelf] .pc-picker-grid[data-order=ladder]{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:calc(210 * var(--u));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:calc(4 * var(--u));padding-bottom:calc(10 * var(--u))}
.pc-picker[data-layout=shelf] .pc-picker-grid[data-order=ladder]>.pc-choice{scroll-snap-align:start}
@media(max-width:700px){.pc-picker[data-layout=shelf] .pc-picker-grid[data-order=ladder]{grid-auto-columns:min(72vw,240px)}}
.market-detail>.transaction-status{margin-top:12px}.build-picker-footer>.transaction-status{margin:0}
.reward-claim-action .transaction-status{padding:12px;gap:10px}.reward-claim-action .transaction-status strong{font-size:16px}.reward-claim-action .transaction-status span:not(.transaction-pulse){font-size:13px}
@keyframes transaction-pulse{0%,70%,100%{opacity:.35;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.transaction-pulse i{animation:none}}
@media(max-width:600px){.transaction-status{padding:12px;gap:10px}.transaction-status strong{font-size:16px}.transaction-status span:not(.transaction-pulse){font-size:12px}}
.resource-caption{display:block;font-size:calc(14 * var(--r));line-height:1.35;font-weight:700}
.resource-inset{border:calc(5 * var(--r)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;padding:calc(9 * var(--r)) calc(12 * var(--r))}
.resource-window .resource-energy-status{margin:calc(9 * var(--r)) 0;padding:calc(9 * var(--r)) calc(10 * var(--r));font-size:calc(13 * var(--r));font-weight:700;background:#eff1d4;border:1px solid #c8d5a5;text-align:center}
.resource-energy-status[data-tone=low],.resource-energy-status[data-tone=critical]{background:#ffe0a0!important;border-color:#e9ae43!important;color:#784111}
.resource-energy-status[data-tone=empty]{background:#ffe1d5!important;border-color:#d38669!important;color:#903c2d}
.resource-window .resource-section-title{font:700 calc(17 * var(--r))/1.4 Pixeloid,monospace;background:linear-gradient(90deg,#ffdaa0,#ffedc3);margin:calc(10 * var(--r)) 0 calc(7 * var(--r));padding:calc(6 * var(--r)) calc(11 * var(--r));clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.energy-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(7 * var(--r))}
.energy-choice{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4 * var(--r));padding:calc(8 * var(--r)) calc(1 * var(--r));border:calc(7 * var(--r)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;background:none;color:#38241f;font-family:Pixeloid,monospace;cursor:pointer}
.energy-choice[aria-pressed=true]{border-image-source:url('../ui/frames/resource-selected.svg')}
.energy-choice-hours{font-size:calc(17 * var(--r));line-height:1.3;white-space:nowrap}
.energy-choice-cost{display:flex;justify-content:center;align-items:center;gap:calc(3 * var(--r));font-size:calc(12 * var(--r));font-weight:700;white-space:nowrap}
.energy-choice-cost .pixel-icon{width:calc(21 * var(--r));height:calc(21 * var(--r))}
.energy-choice-check{position:absolute;right:calc(-5 * var(--r));top:calc(-5 * var(--r));padding:calc(3 * var(--r));background:#168fd4;border:2px solid #28669a;color:white}
.energy-choice-check .pixel-icon{width:calc(18 * var(--r));height:calc(18 * var(--r))}
.resource-window .resource-hint{font-size:calc(12 * var(--r));line-height:1.6;text-align:center;margin:calc(7 * var(--r)) 0 calc(11 * var(--r));color:#755742}
.resource-window .resource-footnote{margin:calc(8 * var(--r)) 0 0}
.resource-action{display:flex;justify-content:center;align-items:center;gap:8px;min-height:calc(52 * var(--r));padding:calc(6 * var(--r)) calc(10 * var(--r));border:calc(9 * var(--r)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:#38221f;font:700 calc(17 * var(--r))/1.3 Pixeloid,monospace;text-decoration:none;text-align:center;cursor:pointer}
.resource-primary{border-image-source:url('../ui/frames/resource-blue.svg');color:#143b5e}
.energy-confirm{width:100%}
.resource-window button:not(:disabled):hover,.resource-window a:hover{filter:brightness(1.04);translate:0 -1px}
.resource-window button:not(:disabled):active,.resource-window a:active{translate:0 1px}
.resource-window button:disabled{opacity:.5;cursor:not-allowed}
.resource-window :is(button,a,summary):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.resource-balance{display:grid;grid-template-columns:minmax(0,1fr) calc(160 * var(--r));gap:calc(10 * var(--r));align-items:center}
.resource-token-amount{display:block;font:700 calc(32 * var(--r))/1.35 Pixeloid,monospace;overflow-wrap:anywhere}
.resource-balance-unit{font-weight:700;font-size:calc(18 * var(--r))}
.resource-wallet{padding:calc(8 * var(--r));border:1px solid #dab581;background:#fff0cf;text-align:center;font-size:calc(11 * var(--r));line-height:1.6}
.resource-wallet strong{display:block;font-size:calc(12 * var(--r));margin-bottom:calc(4 * var(--r))}
.resource-window .resource-info{background:#deeffa;border:1px solid #acd0e9;padding:calc(8 * var(--r)) calc(10 * var(--r));color:#244c70;font-size:calc(12 * var(--r));line-height:1.7;margin:calc(8 * var(--r)) 0}
.resource-faq{border:calc(5 * var(--r)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;padding:calc(5 * var(--r)) calc(10 * var(--r));margin-bottom:calc(6 * var(--r))}
.resource-faq summary{font:700 calc(14 * var(--r))/1.65 Pixeloid,monospace;cursor:pointer;list-style:none;position:relative;padding-left:calc(21 * var(--r))}
.resource-faq summary::before{content:'›';position:absolute;left:0;top:0;font-size:calc(21 * var(--r));line-height:1}
.resource-faq[open] summary::before{rotate:90deg}
.resource-faq p{font-size:calc(12 * var(--r));line-height:1.75;padding-left:calc(21 * var(--r));color:#634936}
.resource-uses{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(9 * var(--r));margin:calc(9 * var(--r)) calc(9 * var(--r)) calc(2 * var(--r)) calc(21 * var(--r))}
.resource-uses>span{border:1px solid #dab581;background:#fff0d2;display:grid;place-items:center;padding:calc(5 * var(--r))}
.resource-uses .pixel-icon{width:calc(34 * var(--r));height:calc(34 * var(--r))}
.resource-uses svg{width:calc(34 * var(--r));height:calc(34 * var(--r))}
.resource-uses small{font-size:calc(11 * var(--r));line-height:1.5}
.resource-inline-link{display:inline-block;border:0;padding:calc(3 * var(--r)) 0;background:none;color:#176ca4;font:700 calc(13 * var(--r))/1.65 Pixeloid,monospace;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.resource-faq>.resource-inline-link{margin-left:calc(21 * var(--r));margin-top:calc(3 * var(--r))}
.resource-build-help{padding:0 calc(8 * var(--r)) calc(7 * var(--r));font-size:calc(12 * var(--r));line-height:1.7;color:#735337}
.resource-energy-status[data-tone=inactive]{background:#fff0cf!important;border-color:#d6b373!important;color:#785024}
.resource-rewards-entry{flex-direction:column;gap:calc(3 * var(--r))}
.resource-claim-badge{font-size:calc(12 * var(--r));line-height:1.3}
.resource-window[data-kind=rewards]{width:min(calc(700 * var(--r)),calc(100vw - 20px))}
.resource-window[data-kind=rewards] .resource-heading-copy{flex:1;min-width:0}
.reward-heading-meta{display:flex;align-items:center;gap:calc(14 * var(--r));margin-top:calc(5 * var(--r))}
.reward-test-badge{padding:calc(2 * var(--r)) calc(6 * var(--r));border:1px solid #caa26e;background:#fff1d0;color:#624627;font-size:calc(11 * var(--r));line-height:1.4}
.reward-heading-meta .reward-back{padding:0;font-size:calc(12 * var(--r));line-height:1.5}
.reward-heading-meta>*{white-space:nowrap}
@media(max-width:600px){.reward-heading-meta{flex-wrap:wrap;gap:5px 8px}.reward-heading-meta .reward-back,.reward-heading-meta .reward-test-badge{font-size:10px}}
.reward-claim-summary{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:calc(16 * var(--r))}
.reward-total{display:block;font-size:calc(29 * var(--r));line-height:1.5;color:#3e211d;overflow-wrap:anywhere}
.reward-claim-action .resource-action{width:100%}
.resource-window[data-kind=rewards] .reward-claim-action .resource-action:not(:disabled){border-image-source:url('../ui/frames/tile-green.svg');color:#29482e}
.resource-window[data-kind=rewards] .reward-claim-action .resource-action:disabled{border-image-source:url('../ui/frames/cream.svg');color:#756653}
.reward-current{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--r));background:#dfedf5;margin-top:calc(10 * var(--r))}
.reward-current>div+div{border-left:1px solid #a3bed0;padding-left:calc(15 * var(--r))}
.reward-current strong{display:block;font-size:calc(20 * var(--r));line-height:1.6;color:#234660;overflow-wrap:anywhere}
.reward-current .resource-caption{font-size:calc(12 * var(--r))}
.reward-timing-note{grid-column:1/-1;margin:0;color:#34566b;font-size:max(12px,calc(12 * var(--r)));line-height:1.5}
/* The vault's daily release on an island and a change scheduled for a later game day. */
.reward-rate{display:grid;gap:calc(3 * var(--r));background:#dfedf5;margin-top:calc(10 * var(--r))}
.reward-rate-value{display:block;font-size:max(13px,calc(15 * var(--r)));line-height:1.5;color:#234660;overflow-wrap:anywhere}
.reward-rate .reward-rate-change{color:#8a4a1c;font-weight:700}
.reward-rate .reward-rate-status{color:#5b5470}
/* Economy v7: the claim floor (24-hour average hash) and the island's hash-proportional claim cap. */
/* The claim spend gate (4 Oct 2026): "Claiming opens at $25 spent · $3.50 so far" with a bar. */
.reward-claim-spend{display:grid;gap:calc(4 * var(--r));background:#fbe9cf;margin-top:calc(10 * var(--r))}
.reward-claim-spend-value{display:block;font-size:max(13px,calc(15 * var(--r)));line-height:1.5;color:#5a3a1c;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.reward-spend-bar{height:max(8px,calc(10 * var(--r)));border-radius:999px;background:#ecd2a3;overflow:hidden}
.reward-spend-fill{display:block;height:100%;width:0;border-radius:inherit;background:#d9822b}
.reward-claim-spend .reward-claim-spend-counts{color:#8a4a1c}
.reward-claim-floor{display:grid;gap:calc(3 * var(--r));background:#fbe9cf;margin-top:calc(10 * var(--r))}
.reward-claim-floor[data-eligible=true]{background:#e3f1dc}
.reward-claim-floor-value{display:block;font-size:max(13px,calc(15 * var(--r)));line-height:1.5;color:#5a3a1c;overflow-wrap:anywhere}
.reward-claim-floor .reward-claim-floor-status{color:#8a4a1c;font-weight:700}
.reward-claim-floor[data-eligible=true] .reward-claim-floor-status{color:#2f6b3a}
/* The one electricity price under the refill choices. */
.resource-window .resource-tariff{margin:calc(-6 * var(--r)) 0 calc(10 * var(--r));text-align:center;font-size:max(12px,calc(13 * var(--r)));color:#5d4a36}
.reward-filters{display:flex;gap:calc(7 * var(--r));margin-bottom:calc(8 * var(--r))}
.reward-filter{border:calc(6 * var(--r)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;padding:calc(4 * var(--r)) calc(9 * var(--r));color:#4b3126;font:700 calc(12 * var(--r))/1.4 Pixeloid,monospace;cursor:pointer}
.reward-filter[aria-pressed=true]{border-image-source:url('../ui/frames/resource-selected.svg');color:#214c6d}
/* The history and claim limit rows take the Rewards window's text sizes (--fs-s: the Rewards & Claim rules below). */
.reward-history{display:grid;gap:calc(6 * var(--r))}
.resource-window .reward-history-caption{margin:0 0 calc(8 * var(--r));padding-inline:calc(11 * var(--r));color:#665477}
.reward-history-value .reward-remaining-label{font-weight:400}
.reward-history-row{display:grid;grid-template-columns:1.1fr 1fr auto;gap:calc(10 * var(--r));align-items:center}
.reward-history-row small{display:block;color:#806249}
.reward-history-row>strong{overflow-wrap:anywhere}
.reward-status{font-size:calc(11 * var(--r));padding:calc(4 * var(--r)) calc(7 * var(--r));text-align:center}
.reward-status[data-status=available]{background:#f5d4ca;color:#8b3027}
.reward-status[data-status=claimed]{background:#dce9c3;color:#365423}
.reward-empty{padding:calc(20 * var(--r)) calc(12 * var(--r));text-align:center;font-size:calc(13 * var(--r));line-height:1.8;color:#775740;background:#fff0d4}
.reward-pagination{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--r));margin-top:calc(9 * var(--r));font-size:calc(12 * var(--r))}
.resource-actions{display:grid;grid-template-columns:1fr 1fr;gap:calc(10 * var(--r));margin-top:calc(9 * var(--r))}
.resource-window .resource-notice,.resource-window .resource-insufficient{margin-top:calc(8 * var(--r));padding:calc(8 * var(--r));background:#e8f1d9;color:#45632c;font-size:calc(12 * var(--r));line-height:1.6}
.resource-window .resource-notice[data-error=true],.resource-window .resource-insufficient{background:#ffe5d5;color:#873e2d}
.resource-window[data-kind=rewards] .reward-claim-action .resource-action{margin:0}
.workshop-ui .energy-pill[data-energy-tone=low] .resource-value,.workshop-ui .energy-pill[data-energy-tone=critical] .resource-value{color:#96530e}
.workshop-ui .energy-pill[data-energy-tone=empty] .resource-value{color:#a53c27}
.workshop-ui .energy-pill:is([data-energy-tone=low],[data-energy-tone=critical])>.resource-icon>.pixel-icon{filter:sepia(1) saturate(5) hue-rotate(352deg)}
.workshop-ui .energy-pill[data-energy-tone=empty]>.resource-icon>.pixel-icon{filter:sepia(1) saturate(6) hue-rotate(325deg)}
.resource-pill>.resource-icon{display:contents}
/* Accepted Energy A: time first, three compact quotes, one purchase action. */
.resource-dialog.resource-window[data-kind=energy]{--r:clamp(.43px,min(calc((100vw - 20px)/680),.115dvh),1.125px);width:min(calc(680 * var(--r)),calc(100vw - 20px));color:#3e211d}
.resource-window[data-kind=energy] .resource-heading{align-items:center;padding:calc(15 * var(--r)) calc(23 * var(--r));gap:calc(20 * var(--r))}
.resource-window[data-kind=energy] .resource-heading>.resource-icon>.pixel-icon{width:calc(56 * var(--r));height:calc(56 * var(--r))}
.resource-window[data-kind=energy] .resource-heading h1{font-size:calc(40 * var(--r));line-height:1.2}
.resource-window[data-kind=energy] .resource-close{flex-basis:calc(52 * var(--r));width:calc(52 * var(--r));height:calc(52 * var(--r));padding:calc(10 * var(--r))}
.resource-window[data-kind=energy] .resource-body{padding:calc(16 * var(--r)) calc(16 * var(--r)) calc(15 * var(--r))}
.resource-energy-hero{text-align:center;padding:calc(3 * var(--r)) 0 calc(14 * var(--r));border-bottom:calc(2 * var(--r)) solid #c4ad7e}
.resource-runtime-label{font-size:calc(25 * var(--r));line-height:1.2;font-weight:700}
.resource-run-time{display:block;font-size:calc(72 * var(--r));line-height:1.1;white-space:nowrap;letter-spacing:calc(-1 * var(--r))}
.resource-run-time[data-unavailable=true]{font-size:calc(42 * var(--r));line-height:2.11;white-space:normal}
.resource-energy-detail{font-size:calc(21 * var(--r));font-weight:700;line-height:1.3}
.resource-window[data-kind=energy] .resource-section-title{font-size:calc(25 * var(--r));line-height:1.1;margin:calc(13 * var(--r)) 0 calc(10 * var(--r));padding:calc(6 * var(--r)) calc(11 * var(--r))}
.resource-window[data-kind=energy] .energy-choices{gap:calc(9 * var(--r))}
.resource-window[data-kind=energy] .energy-choice{min-height:calc(142 * var(--r));padding:calc(16 * var(--r)) calc(2 * var(--r));gap:calc(17 * var(--r));border-width:calc(7 * var(--r))}
.resource-window[data-kind=energy] .energy-choice-hours{font-size:calc(40 * var(--r));line-height:1.25}
.resource-window[data-kind=energy] .energy-choice-cost{font-size:calc(16.5 * var(--r));line-height:1.3;gap:calc(4 * var(--r))}
.resource-window[data-kind=energy] .energy-choice-cost .pixel-icon{width:calc(28 * var(--r));height:calc(28 * var(--r))}
.resource-window[data-kind=energy] .energy-choice-check{right:calc(-5 * var(--r));top:calc(-5 * var(--r));padding:calc(5 * var(--r))}
.resource-window[data-kind=energy] .energy-choice-check .pixel-icon{width:calc(22 * var(--r));height:calc(22 * var(--r))}
.resource-window .resource-refill-summary{margin:calc(12 * var(--r)) 0 calc(13 * var(--r));text-align:center;font-size:calc(18 * var(--r));line-height:1.3}
.resource-window[data-kind=energy] .energy-confirm{font-size:calc(27 * var(--r));line-height:1.2;min-height:calc(67 * var(--r));padding:calc(10 * var(--r)) calc(6 * var(--r));border-width:calc(8 * var(--r))}
.resource-window[data-kind=energy] .resource-energy-status[hidden]{display:none}
.resource-window[data-kind=energy] .resource-energy-status,.resource-window[data-kind=energy] .resource-build-help .resource-inline-link{font-size:max(12px,calc(13 * var(--r)))}
.resource-window[data-kind=energy] .resource-build-help,.resource-window[data-kind=energy] .resource-insufficient,.resource-window[data-kind=energy] .resource-notice{font-size:max(12px,calc(12 * var(--r)))}
.energy-pill.energy-refilled{position:relative;overflow:hidden;isolation:isolate;filter:drop-shadow(0 0 7px #b9e787)}
.energy-pill.energy-refilled::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#fff6 43%,#fffd 50%,#fff6 57%,transparent 75%);animation:energy-refill-sweep 1.1s steps(12,end) 1 both}
@keyframes energy-refill-sweep{from{transform:translateX(-115%)}to{transform:translateX(115%)}}
@media(prefers-reduced-motion:reduce){.energy-pill.energy-refilled::after{display:none}}
@media(max-width:600px){.resource-dialog.resource-window{--r:1px;width:calc(100vw - 16px);border-width:9px;max-height:calc(100dvh - 16px)}.resource-body{padding:10px}.resource-window .resource-heading{padding:9px 10px;gap:10px}.resource-window .resource-heading h1{font-size:24px}.resource-window .resource-heading>.resource-icon>.pixel-icon{width:38px;height:38px}.resource-caption{font-size:12px}.energy-choice{border-width:5px;padding:8px 0;gap:5px}.energy-choice-hours{font-size:13px}.energy-choice-cost{font-size:10px;gap:1px}.energy-choice-cost .pixel-icon{width:16px;height:16px}.energy-choice-check{right:-3px;top:-3px}.energy-choice-check .pixel-icon{width:13px;height:13px}.resource-action{font-size:14px;padding:6px 3px;border-width:7px}.resource-balance{grid-template-columns:minmax(0,1fr) 105px;padding:8px 6px;gap:5px}.resource-token-amount{font-size:24px}.resource-wallet{font-size:10px;padding:5px}.resource-wallet strong{font-size:10px}.resource-faq summary{font-size:12px}.resource-faq p{font-size:11px}.resource-uses{gap:6px}.resource-uses .pixel-icon{width:29px;height:29px}}
@media(prefers-reduced-motion:reduce){.resource-window button,.resource-window a{translate:none!important}}
.island-marker[data-energy-tone=critical],.island-marker[data-energy-tone=empty]{display:flex;flex-direction:column;gap:8px;align-items:center;padding:10px 13px;font-size:14px;border-width:8px;max-width:255px;white-space:normal;text-align:center}
.island-marker[data-energy-tone=critical]{color:#865010;border-image-source:url('../ui/frames/cream.svg')}
.island-marker[data-energy-tone=critical],.island-marker[data-energy-tone=empty]{border:8px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;border-radius:0;box-shadow:none}
.island-marker:is([data-energy-tone=critical],[data-energy-tone=empty])::after{background:#fff5d9}
.island-marker[data-energy-tone=empty]{color:#923e2d}
.island-energy-cta{border:6px solid transparent;border-image:url('../ui/frames/picker-selected.svg') 12 fill stretch;padding:3px 13px;color:#244c70;font-size:12px;line-height:1.4}
.pc-choice-energy{display:flex;align-items:center;justify-content:center;gap:4px;font:400 calc(11 * var(--u))/1.5 Pixeloid,monospace;white-space:nowrap}
.pc-choice-energy .pixel-icon{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.pc-picker:has(.pc-picker-grid[data-count='5']){width:min(calc(1040 * var(--u)),calc(100vw - 24px))}
.pc-picker-grid[data-count='5']{grid-template-columns:repeat(5,minmax(0,1fr))}
.pc-picker-grid[data-count='5'] .pc-choice-art{height:calc(145 * var(--u))}
.pc-picker-grid[data-count='5'] .pc-choice-price{height:calc(31 * var(--u))}
.pc-picker-close[hidden]{display:none}
.pc-picker-grid[data-count='5'] .pc-choice[data-package=free] .pc-choice-art img{width:calc(220 * var(--u));height:calc(183 * var(--u));top:calc(-18 * var(--u))}
.review-metrics:has(.review-energy){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.pc-picker-grid[data-count='5']{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-picker:has(.pc-picker-grid[data-count='5']){width:calc(100vw - 16px)}.pc-choice-energy{font-size:10px}.pc-picker-grid[data-count='5'] .pc-choice-art{height:137px}.review-metrics:has(.review-energy){grid-template-columns:1fr}}
@media(max-width:600px){.energy-cost-unit{display:block}.energy-choice-cost{font-size:11px;gap:3px}.energy-choice-cost>.resource-icon{align-self:flex-start}.resource-uses svg{width:29px;height:29px}.island-marker[data-energy-tone=critical],.island-marker[data-energy-tone=empty]{font-size:12px;padding:6px 9px}}
@media(max-width:600px){.resource-window[data-kind=rewards]{width:calc(100vw - 16px)}.resource-window[data-kind=rewards] .resource-heading{gap:7px}.reward-claim-summary{grid-template-columns:1fr;text-align:center;gap:6px}.reward-total{font-size:26px}.reward-current strong{font-size:17px}.reward-current .resource-caption{font-size:10px}.reward-history-row{grid-template-columns:1fr auto;gap:6px}.reward-history-row>.reward-status{grid-column:2;grid-row:2}.reward-history-row>div{grid-row:1/3}.reward-history-row>strong{grid-column:2;text-align:right}.resource-faq>.resource-inline-link{font-size:12px}.resource-uses small{font-size:10px}.reward-filter{padding:4px 7px}}
@media(max-width:600px){
  .resource-dialog.resource-window[data-kind=energy]{--r:clamp(.43px,calc((100vw - 16px)/680),.85px);width:calc(100vw - 16px);border-width:calc(12 * var(--r))}
  .resource-window[data-kind=energy] .resource-close{min-width:40px;min-height:40px}
  .resource-window[data-kind=energy] .energy-choice-cost{font-size:max(10px,calc(18 * var(--r)));gap:2px}
  .resource-window[data-kind=energy] .energy-choice-cost .pixel-icon{min-width:16px;min-height:16px}
  .resource-window[data-kind=energy] .energy-cost-unit{display:inline}
  .resource-window[data-kind=energy] .energy-confirm{font-size:max(14px,calc(27 * var(--r)));min-height:48px}
}
/* A single accounting summary above the details (the referrals have their own window since 9 Oct 2026). */
.resource-window[data-kind=rewards]{box-sizing:border-box;height:min(calc(1040 * var(--r)),calc(100vh - 24px));height:min(calc(1040 * var(--r)),calc(100dvh - 24px));color:#182d53;border-radius:0}
.resource-window[data-kind=rewards] .resource-heading h1{color:#182d53}
/* Content-sized basis (never 0): a browser without the window's height would otherwise collapse the body (9 Oct 2026). */
.resource-window[data-kind=rewards] .resource-body{flex:1 1 auto;min-height:0;padding:calc(14 * var(--r));scrollbar-gutter:stable}
.reward-lifetime{display:grid;grid-template-columns:1fr 1fr;gap:calc(9 * var(--r))}
.reward-lifetime .resource-caption{font-size:calc(12 * var(--r));color:#61547b}
.reward-lifetime-amount{display:block;font-size:calc(22 * var(--r));line-height:1.6;color:#172e55;overflow-wrap:anywhere}
.reward-lifetime small{display:block;color:#736681;font-size:calc(11 * var(--r))}
.reward-claim-panel{flex-shrink:0;padding:calc(12 * var(--r)) calc(16 * var(--r));border-bottom:calc(3 * var(--r)) solid #cdb6ca;background:#ffefd7;box-shadow:0 3px 8px #2028460a}
.reward-claim-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:calc(9 * var(--r))}
.resource-window .reward-claim-title{margin:0;color:#183257;font:700 calc(14 * var(--r))/1.4 Pixeloid,monospace}
.reward-claim-heading>span{font-size:calc(11 * var(--r));color:#6b5c7f}
.reward-claim-breakdown{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:calc(9 * var(--r));margin-bottom:calc(10 * var(--r));align-items:center}
.reward-claim-breakdown>div{min-width:0}.reward-claim-breakdown span{display:block;font-size:calc(11 * var(--r));color:#6b5c7f}
.reward-claim-breakdown strong{display:block;font-size:calc(21 * var(--r));line-height:1.4;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.reward-available-total{padding-left:calc(12 * var(--r));border-left:1px solid #c7aec7}.reward-available-total strong{color:#176b60}
.reward-claim-panel .reward-claim-action .resource-action{min-height:calc(49 * var(--r));font-size:calc(19 * var(--r))}
.resource-window .reward-claim-caption{font-size:calc(11 * var(--r));text-align:center;line-height:1.5;color:#6c5b75;margin-top:calc(6 * var(--r))}
.reward-claim-panel>.resource-action{width:100%;margin-top:calc(8 * var(--r))}.reward-claim-panel .resource-notice{margin-top:calc(8 * var(--r));font-size:calc(12 * var(--r))}
.reward-referral-earned{text-align:center;padding:calc(13 * var(--r))}.reward-referral-earned .resource-caption{font-size:calc(12 * var(--r));color:#61547b}
.reward-referral-earned .reward-lifetime-amount{font-size:calc(29 * var(--r))}
.reward-referral-share{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(6 * var(--r)) calc(8 * var(--r));margin:calc(15 * var(--r)) 0}
.reward-referral-share label{grid-column:1/-1;font-size:calc(12 * var(--r));font-weight:700}
.reward-referral-share input{min-width:0;width:100%;border:1px solid #af9fbe;background:#fffaf0;padding:calc(9 * var(--r));color:#243558;font:400 calc(13 * var(--r))/1.5 Pixeloid,monospace;border-radius:0}
.reward-referral-share .resource-action{font-size:calc(13 * var(--r));min-height:44px;padding:calc(5 * var(--r));border-width:calc(6 * var(--r))}
.reward-referral-share .rewards-card-actions{grid-column:1/-1;margin:0}.reward-referral-share .rewards-card-link{font-size:calc(12 * var(--r))}
.reward-referral-counts{display:flex;justify-content:center;gap:calc(28 * var(--r));padding:calc(8 * var(--r));border-block:1px solid #d4bdc6;font-size:calc(12 * var(--r));color:#6b5c7f}
.reward-referral-counts span{display:flex;align-items:center;gap:calc(8 * var(--r))}.reward-referral-counts strong{font-size:calc(20 * var(--r));color:#183257}
.reward-referral-heading{display:flex;align-items:center;gap:calc(12 * var(--r));margin-top:calc(10 * var(--r))}
.reward-referral-heading .resource-section-title{flex:1;font-size:calc(14 * var(--r));margin:0}.reward-referral-heading .resource-inline-link{font-size:calc(11 * var(--r));min-height:36px;padding-inline:calc(4 * var(--r))}
.reward-referral-list{margin-top:calc(7 * var(--r));display:grid;gap:calc(5 * var(--r))}.reward-referral-list[aria-busy=true]{opacity:.65}
.reward-referral-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(11 * var(--r));padding:calc(7 * var(--r)) calc(9 * var(--r));background:#fff5e1;border:1px solid #d7c3c9}
.reward-referral-avatar{width:calc(37 * var(--r));height:calc(37 * var(--r));display:grid;place-items:center;position:relative;overflow:hidden;background:#d8d3ef;border:2px solid #a699c7;color:#334466;font-size:calc(17 * var(--r));flex-shrink:0}
.reward-referral-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.reward-referral-name{font-size:calc(13 * var(--r));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.reward-referral-row .reward-status{white-space:nowrap;font-size:calc(10 * var(--r));padding:calc(4 * var(--r)) calc(6 * var(--r))}.reward-status[data-status=pending]{background:#e4def1;color:#6b537f}
@media(max-width:600px){
.resource-window[data-kind=rewards]{max-height:calc(100dvh - 12px)}.resource-window[data-kind=rewards] .resource-body{padding:10px}
.reward-lifetime{gap:7px}.reward-lifetime>div{padding:7px;border-width:4px}.reward-lifetime .resource-caption{font-size:10px}.reward-lifetime-amount{font-size:17px}.reward-lifetime small{font-size:10px}
.reward-claim-panel{padding:10px 11px}.reward-claim-breakdown{gap:6px;margin-bottom:7px}.reward-claim-breakdown span{font-size:10px}.reward-claim-breakdown strong{font-size:19px}.reward-available-total{padding-left:8px}
.reward-claim-panel .reward-claim-action .resource-action{min-height:46px;font-size:17px}.resource-window .reward-claim-caption{font-size:10px}
.reward-referral-earned{padding:8px}.reward-referral-earned .reward-lifetime-amount{font-size:24px}.reward-referral-share{gap:5px 7px;margin:11px 0}.reward-referral-share input{font-size:11px;padding:7px}.reward-referral-share .resource-action{font-size:11px}
.reward-referral-counts{font-size:10px;gap:15px}.reward-referral-counts strong{font-size:18px}.reward-referral-name{font-size:12px}.reward-referral-row{gap:8px;padding:6px}.reward-referral-row .reward-status{font-size:9px;padding:4px}.reward-referral-avatar{width:32px;height:32px;font-size:15px}
}
@media(max-height:600px){
.resource-window[data-kind=rewards] .resource-heading{padding-block:6px}
.reward-claim-panel{padding-block:6px}.reward-claim-breakdown{margin-bottom:4px}.reward-claim-breakdown strong{font-size:18px}.reward-claim-panel .reward-claim-action .resource-action{min-height:40px;font-size:16px}.resource-window .reward-claim-caption{margin-top:3px}
}


/* The Referrals window's one line (owner, 9 Oct 2026): "Refer friends and earn 5% of everything they mine.", the share stressed. */
.resource-window .reward-referral-pitch{margin:0 0 calc(12 * var(--r));font-size:max(14px,calc(16 * var(--r)));font-weight:700;line-height:1.45;text-align:center;color:#182d53;text-wrap:balance}
.reward-referral-pitch .reward-referral-percent{font-size:1.4em;line-height:1;color:#2f7a3b}
.reward-referral-counts{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--r));padding:calc(12 * var(--r)) 0}
.reward-referral-counts>span{display:flex;flex-direction:column;gap:calc(3 * var(--r));text-align:center}
.reward-referral-counts>span[data-status=joined] strong{color:#326849}
.reward-referral-person{display:grid;gap:calc(4 * var(--r));min-width:0}.reward-referral-name{display:block}
.reward-referral-wallet{color:#776882;font-size:calc(10 * var(--r));white-space:nowrap}
.reward-referral-row .reward-status[data-status=joined]{background:#dcebd2;color:#326849}
.reward-referral-row .reward-status[data-status=unknown]{background:#e6e3e6;color:#655f65}
@media(max-width:600px){.reward-referral-counts{gap:8px;padding:10px 0}.reward-referral-wallet{font-size:9px}.reward-referral-row .reward-status{max-width:94px;white-space:normal;text-align:center;line-height:1.4}}

.reward-claim-breakdown.reward-claim-breakdown-unlimited{grid-template-columns:repeat(2,minmax(0,1fr))}
/* Buy $<symbol> in the wallet panel (economy-ui.mjs renderTokens), under the wallet's address: a gold call to action.
   Never name the real ticker in shipped files: the launch-day symbol check refuses a package that contains it. */
.resource-window .resource-buy-token{margin-top:calc(9 * var(--r));border-image-source:url('../ui/frames/power-gold.svg');color:#4a240f}
.resource-window .resource-buy-token .resource-icon{display:contents}
.resource-window .resource-buy-token .pixel-icon{flex:none;width:calc(24 * var(--r));height:calc(24 * var(--r));image-rendering:pixelated}
/* The live reward counter in the Rewards window (owner request, 8 Oct 2026; economy-ui.mjs drawTicker, reward-ticker.mjs):
   the total is the window's largest number and every live total fits its column at any length by its width in em of the
   bold pixel font (--ticker-em, set with the text); it never wraps or overflows. */
.reward-claim-breakdown .reward-ticker{display:block;width:100%;min-width:0;container-type:inline-size;color:inherit}
.reward-claim-breakdown .reward-ticker .reward-ticker-value{white-space:nowrap;overflow-wrap:normal;font-size:min(calc(21 * var(--r)),calc(100cqi / var(--ticker-em,6)))}
.reward-claim-breakdown .reward-available-total .reward-ticker-value{line-height:1.25;font-size:min(calc(30 * var(--r)),calc(100cqi / var(--ticker-em,6)))}
@media(max-width:600px){
.reward-claim-breakdown .reward-ticker .reward-ticker-value{font-size:min(19px,calc(100cqi / var(--ticker-em,6)))}
.reward-claim-breakdown .reward-available-total .reward-ticker-value{font-size:min(26px,calc(100cqi / var(--ticker-em,6)))}
}
@media(max-height:600px){
.reward-claim-breakdown .reward-ticker .reward-ticker-value{font-size:min(18px,calc(100cqi / var(--ticker-em,6)))}
.reward-claim-breakdown .reward-available-total .reward-ticker-value{font-size:min(24px,calc(100cqi / var(--ticker-em,6)))}
}
/* The Referrals window (owner request, 9 Oct 2026; island-referrals.mjs, economy-ui.mjs renderReferrals): the referral view
   that was the Rewards window's second tab, on its own, in the Rewards window's ink; as tall as its content. Its one
   notice (a refused copy) stands under the link. The Rewards window keeps a small way there under its summary line. */
.resource-window[data-kind=referrals]{width:min(calc(640 * var(--r)),calc(100vw - 20px));color:#182d53}
.resource-window[data-kind=referrals] .resource-heading{align-items:center}
.resource-window[data-kind=referrals] .resource-heading h1{color:#182d53}
.resource-window[data-kind=referrals] .reward-referral-share+.resource-notice{margin:calc(-7 * var(--r)) 0 calc(10 * var(--r))}
@media(max-width:600px){.resource-window[data-kind=referrals]{width:calc(100vw - 16px)}.resource-window[data-kind=referrals] .resource-heading h1{font-size:22px}}

/* Rewards & Claim (owner design passes, 9 and 10 Oct 2026; economy-ui.mjs renderIslandClaim): as tall as its content; the
   amount once and big, then Claim, the claim tax box (only while a claim pays one), one thin line and a small link to the
   referrals. Three text sizes in the whole window: the amount, --fs-m (the title, Claim and a claim's status) and --fs-s
   (everything else, never under 13 px), in the site's pixel style; no box inside another. */
.resource-dialog.resource-window[data-kind=rewards]{height:fit-content;width:min(calc(600 * var(--r)),calc(100vw - 20px));
  --fs-s:max(13px,calc(14 * var(--r)));--fs-m:max(17px,calc(20 * var(--r)))}
.resource-window[data-kind=rewards] .resource-heading{align-items:center}
.resource-window[data-kind=rewards] .resource-heading>.resource-icon>.pixel-icon{width:calc(40 * var(--r));height:calc(40 * var(--r))}
.resource-window[data-kind=rewards] .resource-heading h1{font-size:var(--fs-m);line-height:1.25;letter-spacing:.02em}
.resource-window[data-kind=rewards] :is(.reward-test-badge,.reward-heading-meta .reward-back){font-size:var(--fs-s)}
.resource-window[data-kind=rewards] .reward-heading-meta{margin-top:calc(3 * var(--r))}
.resource-window[data-kind=rewards] .reward-claim-total{padding-left:0;border-left:0}
.resource-window[data-kind=rewards] .resource-body{flex:0 1 auto;padding:calc(10 * var(--r)) calc(16 * var(--r)) calc(12 * var(--r))}
.resource-window[data-kind=rewards] .reward-claim-panel{padding:calc(14 * var(--r)) calc(18 * var(--r)) calc(12 * var(--r));text-align:center}
.resource-window[data-kind=rewards] .reward-claim-heading{justify-content:center;margin-bottom:calc(2 * var(--r))}
.resource-window[data-kind=rewards] .reward-claim-title{font-size:var(--fs-s);letter-spacing:.04em}
.reward-claim-total{display:grid;justify-items:center;margin:0 0 calc(10 * var(--r))}
.reward-claim-total .reward-ticker{display:block;width:100%;min-width:0;container-type:inline-size}
.reward-claim-total .reward-ticker-value{display:block;text-align:center;white-space:nowrap;line-height:1.15;color:#176b60;font-variant-numeric:tabular-nums;
  font-size:min(calc(46 * var(--r)),calc(100cqi / var(--ticker-em,6)))}
/* "Tokens ≈ $932.94" under the amount. */
.reward-claim-unit{display:flex;flex-wrap:wrap;justify-content:center;gap:0 .55em;font-size:var(--fs-s,13px);line-height:1.3;color:#5d6577}
.reward-claim-usd:empty{display:none}
.reward-claim-more{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(4 * var(--r)) calc(18 * var(--r));margin:0 0 calc(10 * var(--r));font-size:var(--fs-s,13px);color:#4d5b72}
.reward-claim-more:not(:has(> :not([hidden]))){display:none}
.reward-claim-more>span{display:inline-flex;align-items:baseline;gap:calc(6 * var(--r))}
.reward-claim-more>span[hidden]{display:none}
.reward-claim-more .reward-ticker{display:inline-block;container-type:normal}
.reward-claim-more :is(strong,.reward-ticker-value){font-size:var(--fs-s,13px);color:#183257;font-variant-numeric:tabular-nums}
/* Claim: "Claim 1,234.56", or with the claim tax "Claim · receive 1,172.83"; a long label wraps evenly, never overflows. */
.resource-window[data-kind=rewards] .reward-claim-panel .reward-claim-action .resource-action{min-height:calc(54 * var(--r));font-size:var(--fs-m);text-wrap:balance}
.resource-window[data-kind=rewards] .reward-claim-action .transaction-status strong{font-size:var(--fs-m)}
.resource-window[data-kind=rewards] .reward-claim-action .transaction-status span:not(.transaction-pulse){font-size:var(--fs-s)}
/* The claim tax box (owner, 10 Oct 2026): Claim amount, Tax (5%) with its (i) and, bold, You receive; figures right-aligned. */
.reward-claim-tax{position:relative;margin-top:calc(8 * var(--r));padding:calc(6 * var(--r)) calc(12 * var(--r));background:#fff9ec;
  border:2px solid #e3c99d;box-shadow:inset 0 0 0 2px #fffdf6;text-align:left;font-size:var(--fs-s,13px);line-height:1.45;color:#4d5b72}
.reward-claim-tax-row{position:relative;display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--r));margin:0;padding:calc(2 * var(--r)) 0}
.reward-claim-tax-label{display:inline-flex;align-items:center;gap:calc(6 * var(--r));min-width:0}
.reward-claim-tax-value{flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:#183257}
.reward-claim-tax-row[data-row=tax] .reward-claim-tax-value{color:#8d4630}
/* A Daily Social Pot share in the claim (owner, 10 Oct 2026): "Social Pot +500.00", untaxed, in the rewards' green. */
.reward-claim-tax-row[data-row=pot]{color:#29482e}
.reward-claim-tax-row[data-row=pot] .reward-claim-tax-value{color:#176b60}
.reward-claim-tax-row[data-row=net]{margin-top:calc(3 * var(--r));padding-top:calc(5 * var(--r));border-top:2px dotted #e3c99d;color:#183257}
.reward-claim-tax-row[data-row=net] .reward-claim-tax-value{color:#176b60}
/* The tax's two rows at the box's own size (owner review, 10 Oct 2026 evening): "Claim now · 10% tax" and "Wait 20h 14m
   · → 5% tax", a dotted line above them under the figures; each figure coloured by its step (5% green, 10-20% amber,
   40-80% red). */
.reward-claim-tax-row[data-row=net]+.reward-claim-tax-step{margin-top:calc(3 * var(--r));padding-top:calc(5 * var(--r));border-top:2px dotted #e3c99d}
.reward-claim-tax-step .reward-claim-tax-value{font-weight:700}
.reward-claim-tax-value[data-severity=low]{color:#2f6b3a}
.reward-claim-tax-value[data-severity=mid]{color:#a0621a}
.reward-claim-tax-value[data-severity=high]{color:#b23a1f}
.reward-claim-tax-arrow{color:#8a7a6a}
/* The cooldown after a claim (owner, 10 Oct 2026 evening): one label, "Next claim in 1h 23m", over a pixel bar that fills
   toward the next claim (the builder's bar: a dark frame, cream track, gold stripes). */
.reward-claim-cooldown{display:grid;gap:calc(5 * var(--r));margin-top:calc(9 * var(--r));text-align:left}
.reward-cooldown-label{display:block;font-size:var(--fs-s,13px);line-height:1.3;color:#183257;font-variant-numeric:tabular-nums}
.reward-cooldown-bar{display:block;min-width:0;height:max(12px,calc(14 * var(--r)));border:2px solid #5c382c;background:#efe2c0;overflow:hidden}
.reward-cooldown-bar i{display:block;height:100%;width:0;transition:width .9s linear;
  background:repeating-linear-gradient(-45deg,#ffd23f 0 7px,#f0a92e 7px 14px);background-size:19.8px 100%;animation:reward-cooldown-march 1s linear infinite}
@keyframes reward-cooldown-march{from{background-position:0 0}to{background-position:19.8px 0}}
@media(prefers-reduced-motion:reduce){.reward-cooldown-bar i{animation:none;transition:none}}
/* The holding gate (owner review, 10 Oct 2026 evening): a small card in place of the tax box: its title, Required and the
   wallet's average (red while below) as rows like the tax box's, then the game's Buy button. */
.reward-claim-hold{display:grid;gap:calc(3 * var(--r));margin-top:calc(8 * var(--r));padding:calc(8 * var(--r)) calc(12 * var(--r)) calc(10 * var(--r));background:#fbe9cf;
  border:2px solid #e3c99d;box-shadow:inset 0 0 0 2px #fffaf0;text-align:left;font-size:var(--fs-s,13px);line-height:1.45;color:#5a3a1c}
.reward-claim-hold-title{display:block;margin-bottom:calc(2 * var(--r));font-size:var(--fs-s,13px);color:#5a3a1c}
.reward-claim-hold-row{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12 * var(--r));margin:0}
.reward-claim-hold-label{min-width:0}
.reward-claim-hold-value{flex:none;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;color:#183257}
.reward-claim-hold-row[data-below=true] .reward-claim-hold-value{color:#b23a1f}
.resource-window .reward-claim-hold .reward-claim-buy{width:100%;margin:calc(6 * var(--r)) 0 0}
/* Its one hint (owner, 10 Oct 2026 evening): what is missing (bold, red ink) or when the average gets there (green ink);
   while only time is missing, Buy is the quieter blue button. */
.reward-claim-hold-hint{margin:calc(3 * var(--r)) 0 0;font-size:var(--fs-s,13px);line-height:1.45;text-wrap:pretty}
.reward-claim-hold-hint[data-hint=need]{font-weight:700;color:#8d2f1c}
.reward-claim-hold-hint[data-hint=wait]{color:#2f6b3a}
.resource-window .reward-claim-hold .reward-claim-buy[data-emphasis=quiet]{border-image-source:url('../ui/frames/tile-blue.svg');color:#1d4e7a}
/* Its (i): the schedule shows on hover or keyboard focus, or after a tap (data-open), as a dark bubble right above the
   Tax row, as wide as the row (any language fits; it never leaves the window): over Claim amount and Claim, never over
   the bold You receive. After a close (the next tap anywhere, Escape: economy-ui.mjs setTaxTip) it stays hidden while
   the pointer or the keyboard focus stays on the (i) (data-dismissed). */
.reward-tax-info{display:inline-flex;align-items:center}
.resource-window .reward-tax-info-button{display:grid;place-items:center;width:max(18px,calc(20 * var(--r)));height:max(18px,calc(20 * var(--r)));margin:0;padding:0;
  border:0;background:none;cursor:pointer}
.reward-tax-info-icon{width:max(12px,calc(13 * var(--r)));height:max(12px,calc(13 * var(--r)));image-rendering:pixelated}
.reward-tax-tip{display:none;position:absolute;z-index:2;left:0;right:0;bottom:calc(100% + 2px);padding:calc(6 * var(--r)) calc(9 * var(--r));
  background:#24334f;border:2px solid #101b30;color:#fff8e6;font-size:var(--fs-s,13px);font-weight:400;line-height:1.45;text-align:left;white-space:normal;
  box-shadow:0 3px 0 #101b3040}
.reward-tax-info[data-open=true] .reward-tax-tip,.reward-tax-info-button:focus-visible+.reward-tax-tip{display:block}
@media(hover:hover){.reward-tax-info:hover .reward-tax-tip{display:block}}
.reward-tax-info[data-dismissed=true] .reward-tax-tip{display:none}
/* The thin line: "+416,666.66 Tokens/h ≈ $833.33" in green, then "Includes your referral earnings." (or why Claim is off)
   in grey; side by side, or centred one under the other where they do not fit. */
.reward-claim-line{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:calc(2 * var(--r)) 1.1em;margin:calc(9 * var(--r)) 0 0;
  font-size:var(--fs-s,13px);line-height:1.45;color:#5d6577;text-align:center}
.reward-claim-action+.reward-claim-line{margin-top:calc(13 * var(--r))}
.reward-hourly{color:#176b60}
.reward-hourly[data-earning=true]{white-space:nowrap}
.reward-hourly-value{font-weight:400;color:inherit}
.reward-hourly[data-earning=false]{color:#7a6047}
.reward-claim-line .reward-claim-caption{display:block;margin:0;font-size:inherit;color:inherit;text-wrap:balance}
.reward-claim-caption:empty{display:none}
/* A claim that went through: a check, then its tax and what is left today in muted ink under it. */
.resource-window .reward-claim-notice{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(2 * var(--r)) calc(8 * var(--r));
  text-align:left;color:#2f5a2a}
.reward-claim-check-icon{display:grid;place-items:center}
.reward-claim-check{width:max(14px,calc(16 * var(--r)));height:max(14px,calc(16 * var(--r)));image-rendering:pixelated}
.reward-claim-notice-text{font-weight:700}
.reward-claim-notice-detail{grid-column:2;color:#58705a}
.resource-window[data-kind=rewards] :is(.resource-notice,.resource-caption,.reward-timing-note,.reward-history-caption,.reward-history-row,
  .reward-history-row small,.reward-history-row>strong,.reward-claim-spend-value,.reward-claim-floor-value,.resource-energy-status,
  .resource-section-title,.resource-info,.resource-inline-link,.transaction-recovery){font-size:var(--fs-s)}
.resource-window[data-kind=rewards] :is(.reward-current strong,.resource-action){font-size:var(--fs-m)}
.resource-window[data-kind=rewards] .reward-rate{margin-top:0}
.resource-window[data-kind=rewards] .resource-body>:first-child{margin-top:0}
/* "See referrals →": a small link under the claim (owner, 10 Oct 2026). */
.resource-window[data-kind=rewards] .reward-referrals-link{display:block;margin:calc(10 * var(--r)) auto 0;padding-block:calc(2 * var(--r))}
.resource-window[data-kind=rewards] .resource-body>.reward-referrals-link:first-child{margin-top:0}
@media(max-width:600px){
  /* 16 px: "Claim · receive 9,414,256.39" stays on one line at 375 px in every language. */
  .resource-dialog.resource-window[data-kind=rewards]{width:calc(100vw - 16px);--fs-s:13px;--fs-m:16px}
  .resource-window[data-kind=rewards] .resource-heading>.resource-icon>.pixel-icon{width:32px;height:32px}
  .reward-claim-total .reward-ticker-value{font-size:min(38px,calc(100cqi / var(--ticker-em,6)))}
  .resource-window[data-kind=rewards] .reward-claim-panel{padding-inline:12px}
  .resource-window[data-kind=rewards] .reward-claim-panel .reward-claim-action .resource-action{min-height:48px}
  .reward-claim-tax{padding-inline:10px}
  .reward-claim-hold{padding-inline:10px}
}
/* Touch screens (the way of layout-safety.css): finger-sized hit areas that move nothing, the padding taken back by a
   negative margin. The claim tax's (i) 18-20 px -> 32-34 px, raised over the rows around it (the You receive row comes
   after it); "See referrals →" about 25 px -> 43 px tall. */
@media (pointer:coarse){
  .resource-window .reward-tax-info-button{box-sizing:content-box;padding:7px;margin:-7px;position:relative;z-index:1}
  .resource-window[data-kind=rewards] .reward-referrals-link{padding-block:11px;margin-block:calc(12 * var(--r) - 11px) calc(2 * var(--r) - 11px)}
  .resource-window[data-kind=rewards] .resource-body>.reward-referrals-link:first-child{margin-top:calc(2 * var(--r) - 11px)}
}
/* Short windows (phones on their side): the claim panel scrolls inside the window instead of being cut off. */
@media (max-height:500px){
  .resource-window[data-kind=rewards] .reward-claim-panel{flex-shrink:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}
/* Referrals: Copy link and Share card, two clear buttons side by side (stacked on phones); Share card the highlighted
   one with a card icon. Readable text throughout. */
.resource-window[data-kind=referrals] .reward-referral-share{grid-template-columns:minmax(0,1fr)}
.resource-window[data-kind=referrals] .reward-referral-share label,.resource-window[data-kind=referrals] .reward-referral-share input{font-size:max(13px,calc(14 * var(--r)))}
.reward-referral-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(10 * var(--r))}
.reward-referral-actions:has(> :only-child){grid-template-columns:minmax(0,1fr)}
.reward-referral-actions:has(> :nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}
.resource-window[data-kind=referrals] .reward-referral-actions .resource-action{min-height:calc(52 * var(--r));padding:calc(4 * var(--r)) calc(10 * var(--r));border-width:calc(8 * var(--r));
  gap:calc(8 * var(--r));font-size:max(14px,calc(16 * var(--r)))}
.resource-window[data-kind=referrals] .reward-referral-actions .reward-share-card{border-image-source:url('../ui/frames/tile-green.svg');color:#29482e}
.resource-window[data-kind=referrals] .reward-referral-actions .reward-share-x{border-image-source:url('../ui/frames/tile-blue.svg');color:#1d4e7a}
.reward-share-card .share-card-icon{flex:none;width:max(20px,calc(26 * var(--r)));height:max(20px,calc(26 * var(--r)))}
.resource-window[data-kind=referrals] :is(.reward-referral-counts,.reward-referral-wallet,.reward-referral-row .reward-status,.resource-caption){font-size:max(12px,calc(13 * var(--r)))}
.resource-window[data-kind=referrals] .reward-referral-name{font-size:max(14px,calc(15 * var(--r)))}
.resource-window[data-kind=referrals] .reward-referral-heading .resource-inline-link{font-size:max(13px,calc(13 * var(--r)))}
@media(max-width:600px){.reward-referral-actions,.reward-referral-actions:has(> :nth-child(3)){grid-template-columns:minmax(0,1fr)}}