/* Economy v8 island bonus (island-bonus-ui.mjs, build-ui.mjs bonusLine). */

/* World HUD: the BOOST card, the first of the resource cards (owner request, 4 Oct 2026). Its button is a
   .resource-pill, so unified-hud.css gives it the cards' frame, size, type and icon; here only what differs.
   While it shows the row has four equal cards (.has-boost): Energy, Wallet and Rewards keep their places at
   the right and the row grows to the left. */
.workshop-ui .economy-hud .island-bonus {position:relative;display:flex;min-width:0;pointer-events:auto;font-family:Pixeloid,monospace;color:#492b22}
.workshop-ui .economy-hud .island-bonus[hidden],
.workshop-ui:not([data-mode=world]) .economy-hud .island-bonus {display:none!important}
.workshop-ui[data-mode=world] .economy-hud.has-boost {grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:821px) {.workshop-ui[data-mode=world] .economy-hud.has-boost {width:calc(656 * var(--hud-u))}}
/* REWARDS, with its live counter (unified-hud.css), is the widest card wherever the bar has the room: from 1024 px the
   row grows to the left (the profile chip stands under LEADERBOARD up to 1252 px, island.css), and up to 820 px the
   cards have their own row. Between them the cards stay equal and the counter fits its card. */
@media(min-width:1024px) {.workshop-ui[data-mode=world] .economy-hud.has-boost {grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr);width:calc(735 * var(--hud-u))}}
.workshop-ui[data-mode] .economy-hud .boost-pill .resource-value {color:#31582b;--plus-ink:#31582b}
/* The value's pixel plus sits in spans, which economy.css's old ".resource-pill span" rule would shrink. */
.workshop-ui[data-mode] .economy-hud .boost-pill .resource-value span {font-size:inherit;font-weight:inherit;letter-spacing:inherit}
.workshop-ui[data-mode] .economy-hud .island-bonus[data-tone=off] .boost-pill .resource-value {color:#7a6047;--plus-ink:#7a6047}
.workshop-ui[data-mode] .economy-hud .island-bonus[data-max=true] .boost-pill .resource-subtitle {color:#3d6b2f}
/* Mid widths: the four cards stay beside the leaderboard (the profile chip stands under it there, island.css); the
   whole top bar shrinks to fit there (unified-hud.css --bar-u). The cards' own row under the leaderboard
   (unified-hud.css): as wide as the window allows. */
@media(min-width:701px) and (max-width:820px) {
  .workshop-ui[data-mode=world] .economy-hud.has-boost {--hud-u:min(var(--bar-u),calc((100vw - 20px) / 735));max-width:calc(735 * var(--hud-u));
    grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.5fr)}
}
/* Phones: a compact card, the rocket over the boost, so Energy, Wallet and Rewards keep their room; their icons
   and gaps get a little smaller and a long value ("17h 39m", "891.85") shrinks to its card's width (cqi). */
@media(max-width:700px) {
  .workshop-ui[data-mode=world] .economy-hud.has-boost {grid-template-columns:52px minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr);gap:4px}
  .workshop-ui[data-mode=world] .economy-hud.has-boost .resource-pill:not(.boost-pill) {grid-template-columns:18px minmax(0,1fr);gap:4px}
  .workshop-ui[data-mode=world] .economy-hud.has-boost .resource-pill:not(.boost-pill) .pixel-icon {width:18px;height:18px}
  .workshop-ui[data-mode=world] .economy-hud.has-boost .resource-readout {container-type:inline-size;justify-self:stretch}
  .workshop-ui[data-mode=world] .economy-hud.has-boost .resource-pill:where(:not(.boost-pill)) .resource-value:where(:not(.wallet-identity,.reward-ticker-value)) {font-size:min(15px,24cqi)}
  .workshop-ui[data-mode=world] .economy-hud.has-boost .energy-pill .resource-value {font-size:min(13px,18.5cqi)}
  .workshop-ui[data-mode] .economy-hud .boost-pill {grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;row-gap:3px;padding:0 0 3px}
  .workshop-ui[data-mode] .economy-hud .boost-pill .pixel-icon {width:20px;height:20px}
  .workshop-ui[data-mode] .economy-hud .boost-pill .resource-readout {align-items:center;width:100%}
  .workshop-ui[data-mode] .economy-hud .boost-pill :is(.resource-label,.resource-subtitle) {display:none}
  .workshop-ui[data-mode] .economy-hud .boost-pill .resource-value {font-size:min(14px,calc(100cqi / (var(--boost-chars,4) * .78)))}
}
/* Very narrow phones hide the cards' icons (unified-hud.css): every card is one centred column, and this one
   says BOOST over the number. */
@media(max-width:380px) {
  .workshop-ui[data-mode=world] .economy-hud.has-boost .resource-pill:not(.boost-pill) {grid-template-columns:minmax(0,1fr)}
  .workshop-ui[data-mode] .economy-hud .boost-pill .resource-label {display:block;font-size:9px}
}

/* A drawn pixel plus for "+16%" (the HUD font's "+" reads as a dot); the glyph stays for screen readers. */
.island-bonus-plus {display:inline-block;width:.5em;height:.5em;margin:0 .12em 0 0;overflow:hidden;vertical-align:.08em;color:transparent;line-height:0;
  background:linear-gradient(var(--plus-ink,#31582b),var(--plus-ink,#31582b)) center/100% 34% no-repeat,linear-gradient(var(--plus-ink,#31582b),var(--plus-ink,#31582b)) center/34% 100% no-repeat}
.island-bonus-nowrap {white-space:nowrap}

/* Its panel (owner requests, 4 Oct 2026): the way to the maximum boost in plain words, opened by a click or tap
   only, in the Island Hall's cream pixel style (island-hall.css). --ibp scales it with the window height: 0.89 at
   1280x800, 1 at 1440x900, 1.15 at 2000x1218; phones keep it inside the screen width. It opens in the top layer
   (a manual popover) above the island's buttons, bubbles and markers; a browser without the Popover API keeps it
   in the HUD, which then rises above the island's other buttons. */
.workshop-ui .economy-hud.island-bonus-open {z-index:60}
.island-bonus-pop {--ibp:clamp(.86px,calc(100vh / 900),1.15px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;--plus-ink:var(--ink);
  display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:5;flex-direction:column;box-sizing:border-box;
  width:min(calc(390 * var(--ibp)),calc(100vw - 20px));max-height:var(--ibp-max,calc(100dvh - 170px));
  border:calc(10 * var(--ibp)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;outline:none;
  filter:drop-shadow(0 calc(5 * var(--ibp)) 0 #3a241838) drop-shadow(0 14px 22px #0b13282e);
  font:400 calc(12.5 * var(--ibp))/1.45 Pixeloid,monospace;font-synthesis:none;color:var(--ink);text-align:left;white-space:normal;letter-spacing:0}
.island-bonus[data-open=true] .island-bonus-pop {display:flex}
/* In the top layer (a manual popover) island-bonus-ui.mjs places it under the card. */
.island-bonus-pop[popover] {position:fixed;inset:auto;margin:0;padding:0;overflow:visible;background:none;color:var(--ink)}
.island-bonus-pop * {box-sizing:border-box}
.island-bonus-pop :is(h2,p,ul) {margin:0}
/* The HUD lives inside .workshop-ui, whose line icons (workshop.css .workshop-ui svg) stroke every svg:
   the panel's pixel icons are filled shapes only, sized by their boxes. */
.workshop-ui .island-bonus-pop svg {width:100%;height:100%;fill:none;stroke:none}
.island-bonus-pop button:focus-visible {outline:3px solid #3a97cf;outline-offset:2px}
.island-bonus-pop button:not(:disabled):hover {filter:brightness(1.04);translate:0 -1px}
.island-bonus-pop button:not(:disabled):active {translate:0 1px}
.ibp-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header: the rocket, BOOST over "Max boost: 56%", the boost and the close button. */
.ibp-head {flex:none;display:flex;align-items:center;gap:calc(10 * var(--ibp));padding:calc(7 * var(--ibp)) calc(7 * var(--ibp)) calc(7 * var(--ibp)) calc(9 * var(--ibp));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--ibp)) solid #d9a15f}
.ibp-head-icon {flex:none;width:calc(38 * var(--ibp));height:calc(38 * var(--ibp))}
.workshop-ui[data-mode] .economy-hud .ibp-head-icon .pixel-icon,.ibp-head-icon .pixel-icon {display:block;width:100%;height:100%;image-rendering:pixelated}
.ibp-titles {flex:1;min-width:0;display:grid;gap:calc(3 * var(--ibp))}
.workshop-ui[data-mode] .island-bonus-pop .ibp-title {font:700 calc(19 * var(--ibp))/1.05 Pixeloid,monospace;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibp-max {font:700 calc(11.5 * var(--ibp))/1.2 Pixeloid,monospace;color:#7a4b12;white-space:nowrap}
.ibp-total {flex:none;font:700 calc(23 * var(--ibp))/1 Pixeloid,monospace;font-variant-numeric:tabular-nums;color:#33692f;background:#e5f3d4;
  border:calc(2 * var(--ibp)) solid #a8cf8b;padding:calc(5 * var(--ibp)) calc(9 * var(--ibp));--plus-ink:#33692f}
.island-bonus[data-tone=off] .ibp-total {color:#7a6047;background:#f6ecd7;border-color:#dcc49a;--plus-ink:#7a6047}
.island-bonus-pop .ibp-close {flex:none;display:grid;place-items:center;width:calc(38 * var(--ibp));height:calc(38 * var(--ibp));min-width:32px;min-height:32px;
  padding:calc(9 * var(--ibp));border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:var(--ink);cursor:pointer}
.ibp-close svg {shape-rendering:crispEdges}

/* Body: scrolls on short screens, the header stays. Content-sized basis (never 0%): WebKit resolves a percentage in a
   fit-content popover as 0, which left only the header on iPhones (9 Oct 2026; island-hall.css). */
.ibp-body {flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:grid;align-content:start;gap:calc(10 * var(--ibp));
  padding:calc(11 * var(--ibp)) calc(11 * var(--ibp)) calc(10 * var(--ibp));scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}

/* One bar from nothing to the maximum boost; gold once it is full. */
.ibp-bar {position:relative;height:calc(20 * var(--ibp));overflow:hidden;border:calc(3 * var(--ibp)) solid #5c382c;
  background:repeating-linear-gradient(-45deg,#f6ead0 0 calc(5 * var(--ibp)),#efdfbc calc(5 * var(--ibp)) calc(10 * var(--ibp)))}
.ibp-fill {position:absolute;inset:0 auto 0 0;background:linear-gradient(180deg,#9ad977 0 42%,#68ae45 42%);box-shadow:inset 0 calc(-3 * var(--ibp)) #4b8a32;transition:width .6s ease-out}
.island-bonus-pop[data-complete=true] .ibp-fill {background:linear-gradient(180deg,#ffe08a 0 42%,#f3b63a 42%);box-shadow:inset 0 calc(-3 * var(--ibp)) #c4861f}

/* The two rows: PCs on your island, the Island Level with its track; a ✓ when full, a small line when held back. */
.ibp-rows {list-style:none;padding:0;display:grid;gap:calc(6 * var(--ibp))}
.ibp-row {display:grid;gap:calc(6 * var(--ibp));padding:calc(7 * var(--ibp)) calc(9 * var(--ibp)) calc(8 * var(--ibp));background:#fffaf0;border:calc(2 * var(--ibp)) solid #ecd9ae}
.ibp-row[data-done=true] {background:#f3f9ea;border-color:#c9e0b2}
.ibp-row-line {display:flex;align-items:center;gap:calc(9 * var(--ibp));min-width:0}
.ibp-row-icon {flex:none;display:grid;place-items:center;width:calc(28 * var(--ibp));height:calc(28 * var(--ibp));padding:calc(5 * var(--ibp));
  background:#ffe9b8;border:calc(2 * var(--ibp)) solid #d9a15f;box-shadow:inset 0 calc(2 * var(--ibp)) #fff7df}
.ibp-row-icon[data-icon=pc] {background:#e1effa;border-color:#93bede}
.ibp-row-icon[data-icon=pc] .power-icon-fill {fill:#3b6f8f}.ibp-row-icon[data-icon=pc] .power-icon-accent {fill:#9fd6ff}
.ibp-row-label {flex:1;min-width:0;font-weight:700;font-size:calc(13 * var(--ibp));line-height:1.2}
.ibp-row-value {flex:none;font:700 calc(17 * var(--ibp))/1 Pixeloid,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.ibp-row-check {flex:none;display:grid;place-items:center;width:calc(21 * var(--ibp));height:calc(21 * var(--ibp));padding:calc(3 * var(--ibp));
  background:#8cc85e;border:calc(2 * var(--ibp)) solid #2d5a1c}
.ibp-row-check .power-icon-fill {fill:#fffbe9}.ibp-row-check .power-icon-edge {fill:#2d5a1c}
.ibp-row-note {margin-left:calc(37 * var(--ibp))!important;font-size:calc(11.5 * var(--ibp));line-height:1.3;color:#9a4f17}
/* One step per Island Level: reached ones filled, the one the builder is on striped, a queued one outlined. */
.ibp-track {display:grid;grid-template-columns:repeat(var(--levels,11),minmax(0,1fr));gap:calc(3 * var(--ibp));height:calc(10 * var(--ibp));margin-left:calc(37 * var(--ibp))}
.ibp-track i {background:#f3e6c8;box-shadow:inset 0 0 0 calc(2 * var(--ibp)) #dcc49a}
.ibp-track i[data-state=reached] {background:#f0913a;box-shadow:inset 0 calc(-3 * var(--ibp)) #c06a24}
.ibp-track i[data-state=building] {background:repeating-linear-gradient(-45deg,#ffcf7d 0 calc(3 * var(--ibp)),#f0913a calc(3 * var(--ibp)) calc(6 * var(--ibp)))}
.ibp-track i[data-state=queued] {background:#ffe3b0;box-shadow:inset 0 0 0 calc(2 * var(--ibp)) #f0913a}

/* The next step: what to do, the one gain it brings with its time and price, and the button to where it is done. */
.ibp-next {display:grid;gap:calc(7 * var(--ibp));padding:calc(8 * var(--ibp)) calc(10 * var(--ibp)) calc(10 * var(--ibp));background:#fff4cf;border:calc(2 * var(--ibp)) solid #e2b860;
  box-shadow:inset 0 calc(2 * var(--ibp)) #fffbe9}
.ibp-next-tag {justify-self:start;font:700 calc(10.5 * var(--ibp))/1 Pixeloid,monospace;letter-spacing:.08em;text-transform:uppercase;padding:calc(4 * var(--ibp)) calc(7 * var(--ibp)) calc(3 * var(--ibp));
  background:#f0913a;color:#2b1307}
.ibp-next-main {display:flex;align-items:flex-start;gap:calc(10 * var(--ibp))}
.ibp-next-icon {flex:none;display:grid;place-items:center;width:calc(38 * var(--ibp));height:calc(38 * var(--ibp));padding:calc(7 * var(--ibp));
  background:#ffe9b8;border:calc(2 * var(--ibp)) solid #d9a15f;box-shadow:inset 0 calc(2 * var(--ibp)) #fff7df}
.ibp-star-icon .power-icon-fill {fill:#ffc531}.ibp-star-icon .power-icon-accent {fill:#fff6b0}
.ibp-hall-icon .power-icon-fill {fill:#e0822f}.ibp-hall-icon .power-icon-accent {fill:#fff3c4}
.ibp-next-icon[data-icon=pc] {background:#e1effa;border-color:#93bede}
.ibp-next-icon[data-icon=pc] .power-icon-fill {fill:#3b6f8f}.ibp-next-icon[data-icon=pc] .power-icon-accent {fill:#9fd6ff}
.ibp-next-icon[data-icon=plot] {background:#e8f3d4;border-color:#a3c77f}
.ibp-next-icon[data-icon=plot] .power-icon-fill {fill:#8a5a32}.ibp-next-icon[data-icon=plot] .power-icon-accent {fill:#f0913a}
.ibp-next-icon[data-icon=build] .power-icon-fill {fill:#9a6a40}
.ibp-next-icon[data-icon=time] .power-icon-fill {fill:#8a5a32}.ibp-next-icon[data-icon=time] .power-icon-accent {fill:#ffd23f}
.ibp-next-copy {flex:1;min-width:0;display:grid;gap:calc(4 * var(--ibp))}
.ibp-next-title {font:700 calc(15 * var(--ibp))/1.3 Pixeloid,monospace}
.ibp-next-line {font-weight:700;line-height:1.6;color:#7a4b12}
.ibp-gain {font-variant-numeric:tabular-nums;white-space:nowrap;color:#2f5a2a;background:#d9edc2;border:calc(2 * var(--ibp)) solid #9cc77f;
  padding:calc(1 * var(--ibp)) calc(6 * var(--ibp));--plus-ink:#2f5a2a}
.ibp-meta {white-space:nowrap}
/* Upgrade economy (4 Oct 2026): a priced upgrade whose price grows with the island's hash record; the formula on hover. */
.ibp-next-grows {font-size:calc(11 * var(--ibp));line-height:1.35;color:var(--soft);cursor:help}
.ibp-next-detail {color:var(--soft)}
.ibp-next-note {font-size:calc(11 * var(--ibp));color:var(--muted)}
.island-bonus-pop .ibp-go {display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--ibp));width:100%;min-height:calc(46 * var(--ibp));
  padding:calc(3 * var(--ibp)) calc(12 * var(--ibp));border:calc(8 * var(--ibp)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch;
  background:none;color:#3a1c08;font:700 calc(15.5 * var(--ibp))/1.1 Pixeloid,monospace;cursor:pointer;text-shadow:0 calc(2 * var(--ibp)) #fff3b066}
.workshop-ui .island-bonus-pop .ibp-go svg {flex:none;width:calc(15 * var(--ibp));height:calc(14 * var(--ibp))}
.ibp-go .power-icon-fill {fill:#3a1c08}
.ibp-next[data-kind=max] {background:#eef7e2;border-color:#a8cf8b}
.ibp-next[data-kind=max] .ibp-next-tag {background:#68ae45;color:#fbfff4}
.ibp-next[data-kind=max] .ibp-next-icon {background:#fff3c4;border-color:#e0b23c}

/* How the boost grows, in one line. */
.ibp-note {padding:0 calc(2 * var(--ibp));font-size:calc(11.5 * var(--ibp));line-height:1.35;color:var(--muted);text-align:center}

@media(prefers-reduced-motion:reduce) {
  .ibp-fill {transition:none}
  .island-bonus-pop button {translate:none!important}
}
/* Phones: the full screen width under the card. */
@media(max-width:700px) {
  .island-bonus-pop {top:calc(100% + 6px);border-width:8px;font-size:calc(12 * var(--ibp))}
  .workshop-ui[data-mode] .island-bonus-pop .ibp-title {font-size:calc(17 * var(--ibp))}
}

/* Build PC panel: a small second line in a stat tile (H/s with the bonus, H/s per W)... */
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats .build-overview-sub {font:600 max(11px,calc(13 * var(--bs)))/1.2 Rajdhani,sans-serif;color:#85725c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.workshop-ui[data-mode=build] .build-overview-head .build-overview-stats .build-overview-sub[data-tone=good] {color:#3f7a2e}
/* ...and whether this PC counts for the island bonus, under the stat tiles. */
.workshop-ui[data-mode=build] .build-overview-bonus {display:flex;align-items:center;gap:calc(9 * var(--bs));min-width:0;padding:calc(6 * var(--bs)) calc(10 * var(--bs));
  border:1px solid #c9ddb1;border-radius:4px;background:#eef5e2;color:#2f5a2a;font:500 max(13px,calc(16 * var(--bs)))/1.25 Rajdhani,sans-serif;--mark:#4f8f39}
.workshop-ui[data-mode=build] .build-overview-bonus[data-tone=warn] {border-color:#e8cf98;background:#fbf0d6;color:#7a5213;--mark:#c47a10}
.workshop-ui[data-mode=build] .build-overview-bonus[data-tone=off] {border-color:#e1d0ad;background:#f7eedb;color:#6d6457;--mark:#a99a82}
.build-overview-bonus-mark {flex:none;display:grid;place-items:center;width:max(18px,calc(22 * var(--bs)));height:max(18px,calc(22 * var(--bs)));border-radius:50%;background:var(--mark);color:#fffaf0}
.build-overview-bonus-mark svg {width:55%;height:55%}
.workshop-ui[data-mode=build] .build-overview-bonus-copy {display:flex;flex:1;flex-direction:column;gap:1px;min-width:0;margin:0}
.workshop-ui[data-mode=build] .build-overview-bonus-copy strong {font-weight:700}
.workshop-ui[data-mode=build] .build-overview-bonus-copy small {font-size:max(12px,calc(14 * var(--bs)));opacity:.88}
.workshop-ui[data-mode=build] .build-overview-bonus-total {flex:none;padding:calc(2 * var(--bs)) calc(9 * var(--bs));border-radius:999px;background:#d4e8bd;color:#2f5a2a;
  font:700 max(13px,calc(17 * var(--bs)))/1.25 Rajdhani,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}