/* One top bar (owner note G42, 8 Oct 2026): the resource cards at the right and LEADERBOARD with the player chip at the left share the cards' frame, one height (--bar-h), one gap and one type scale, all sized by --bar-u with the window (1 px up to about 1700 px wide, 1.35 px from 2250 px; less on short windows). The cards are compact (a thin frame, tight padding), so the bar covers far less of the island than the old 80-unit cards. */ :root {--bar-u:clamp(1px,min(.06vw,.105dvh),1.35px);--bar-h:calc(58 * var(--bar-u));--bar-gap:calc(8 * var(--bar-u));--bar-lb:calc(190 * var(--bar-u))} /* Tablets: the four cards stay beside LEADERBOARD, so the whole bar shrinks a little to fit the width. */ @media(min-width:821px) and (max-width:1023px) {:root {--bar-u:min(1px,calc((100vw - 48px) / 846))}} .workshop-ui[data-mode] .economy-hud { --hud-u:var(--bar-u); position:absolute;top:20px;right:18px;left:auto;transform:none; display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(8 * var(--hud-u)); width:calc(490 * var(--hud-u));max-width:calc(100% - 36px);padding:0; font-family:Pixeloid,monospace;color:#492b22; } .workshop-ui[data-mode] .economy-hud .resource-pill { position:relative;box-sizing:border-box;display:flex;align-items:center; width:100%;max-width:none;min-width:0;height:calc(58 * var(--hud-u)); gap:calc(7 * var(--hud-u));padding:0 calc(4 * var(--hud-u)) calc(1 * var(--hud-u)); border:calc(7 * var(--hud-u)) solid transparent; border-image:url('../ui/frames/hud.svg') 12 fill stretch; background:none;border-radius:0;box-shadow:none;cursor:pointer; touch-action:manipulation;transition:filter 120ms ease-out; } .workshop-ui[data-mode] .economy-hud .pixel-icon { flex:none;width:calc(26 * var(--hud-u));height:calc(26 * var(--hud-u));image-rendering:pixelated; } .workshop-ui[data-mode] .economy-hud .resource-readout { display:flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:0;min-width:0;container-type:normal;white-space:nowrap; } .workshop-ui[data-mode] .economy-hud .resource-label { font:700 calc(11 * var(--hud-u))/1.1 Pixeloid,monospace;letter-spacing:0;color:#57362a; } .workshop-ui[data-mode] .economy-hud .resource-value { font:700 calc(19 * var(--hud-u))/1.05 Pixeloid,monospace;letter-spacing:0;color:#472a21; font-variant-numeric:tabular-nums;white-space:nowrap; } .workshop-ui[data-mode] .economy-hud .resource-subtitle { display:flex;align-items:center;gap:4px;max-width:100%; font:400 calc(9 * var(--hud-u))/1.1 Pixeloid,monospace;letter-spacing:0;color:#705640; } .workshop-ui[data-mode] .economy-hud .wallet-identity {display:block;max-width:100%;font-size:calc(12 * var(--hud-u));line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .wallet-identity::before {display:inline-block;vertical-align:1px;margin-right:5px} .wallet-identity::before {content:'';flex:none;width:6px;height:6px;background:#ac9776;box-shadow:0 0 0 1px #806b4f} .wallet-identity[data-wallet-kind=signed-in]::before {background:#68ae45;box-shadow:0 0 0 1px #427d2c} .workshop-ui[data-mode] .economy-hud .rewards-pill[data-ready=true] {border-image-source:url('../ui/frames/tile-green.svg');color:#31582b} .workshop-ui[data-mode] .economy-hud .rewards-pill[data-ready=true] :is(.resource-label,.resource-value,.resource-subtitle) {color:#31532d} .reward-ready-dot { position:absolute;top:calc(-1 * var(--hud-u));left:calc(18 * var(--hud-u));width:calc(15 * var(--hud-u));height:calc(15 * var(--hud-u)); display:grid;place-items:center;background:#bc493b;border:2px solid #fff5df;border-radius:50%; font:700 calc(9 * var(--hud-u))/1 Pixeloid,monospace!important;color:#fff7df;letter-spacing:0!important; } .workshop-ui[data-mode] .economy-hud .energy-pill[data-energy-tone=low] .resource-value {color:#855316} .workshop-ui[data-mode] .economy-hud .energy-pill:is([data-energy-tone=critical],[data-energy-tone=empty]) .resource-value {color:#9c3a2b} /* Low, critical or no energy (9 Oct 2026, the warning the island's owner marker carried): its time turns warm (above) and a pixel "!" sits on its corner, amber while low, red when critical or empty; the card opens the recharge window as always. */ .energy-alert { position:absolute;top:calc(-6 * var(--hud-u,1px));right:calc(-6 * var(--hud-u,1px));z-index:1;display:grid;place-items:center; width:calc(17 * var(--hud-u,1px));height:calc(17 * var(--hud-u,1px));min-width:14px;min-height:14px; background:#e7a82e;color:#4a2a08;box-shadow:0 0 0 2px #fff5df,0 0 0 4px #8a5a1c; font:700 max(10px,calc(12 * var(--hud-u,1px)))/1 Pixeloid,monospace!important;letter-spacing:0!important;pointer-events:none; } .energy-alert[hidden] {display:none} .energy-pill:is([data-energy-tone=critical],[data-energy-tone=empty]) .energy-alert {background:#d8432a;color:#fff7df;box-shadow:0 0 0 2px #fff5df,0 0 0 4px #8f3a2c} .workshop-ui[data-mode] .economy-hud .resource-pill:focus-visible {outline:3px solid #58a7ce;outline-offset:3px} .workshop-ui[data-mode] .economy-hud .resource-pill:active {translate:0 2px} @media(hover:hover) and (pointer:fine) { .workshop-ui[data-mode] .economy-hud .resource-pill:hover {filter:brightness(1.07)} } /* The bar's left side (social.css, island.css): LEADERBOARD and the player chip in the cards' frame and colours; from 821 px also at the cards' height, gap and scale. Their panels open under whatever they measure (island-social.mjs, island-profile.mjs). Phones keep their own row of 46 px items above the cards. */ .social-ui :is(.leaderboard-toggle,.island-profile-chip) {border:7px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;color:#492b22} .social-ui :is(.leaderboard-toggle,.island-profile-chip)[aria-expanded=true] {border-image-source:url('../ui/frames/tile-blue.svg');color:#2c4d60} @media(min-width:821px) { .social-ui :is(.leaderboard-toggle,.island-profile-chip) {height:var(--bar-h);min-height:0;border-width:calc(7 * var(--bar-u));gap:var(--bar-gap); font:700 calc(14 * var(--bar-u))/1.1 Pixeloid,monospace} .social-ui .leaderboard-toggle {width:var(--bar-lb);padding:0 calc(8 * var(--bar-u)) calc(1 * var(--bar-u))} .social-ui .leaderboard-toggle .social-trophy {width:calc(26 * var(--bar-u));height:calc(26 * var(--bar-u))} .social-ui .island-profile-chip {left:calc(var(--social-left) + var(--bar-lb) + var(--bar-gap));max-width:calc(250 * var(--bar-u)); padding:0 calc(12 * var(--bar-u)) calc(1 * var(--bar-u)) calc(4 * var(--bar-u))} .social-ui .island-profile-chip .island-avatar {width:calc(30 * var(--bar-u));height:calc(30 * var(--bar-u));font-size:calc(13 * var(--bar-u))} } /* Mid widths: the cards fill the top row, so the chip stands in the second row, one gap below it, beside REFERRALS (which stands under LEADERBOARD from 821 px; see the Referrals section below). */ @media(min-width:821px) and (max-width:1252px) { .social-ui .island-profile-chip {top:calc(var(--social-top) + var(--bar-h) + var(--bar-gap));left:calc(var(--social-left) + var(--bar-lb) + var(--bar-gap))} } /* Up to 820 px LEADERBOARD is the phone's 46 px item like the chip beside it (social.css, island.css). */ @media(max-width:820px) { .social-ui .leaderboard-toggle {width:177px;min-height:46px;padding:0 5px 3px;gap:8px;font-size:12px} .social-ui .leaderboard-toggle .social-trophy {width:24px;height:24px} } /* Build has a title in the middle: keep these cards compact enough to clear it (about the old Build size). */ .workshop-ui[data-mode=build] .economy-hud {--hud-u:clamp(.9px,.055vw,1.4px)} /* The Inventory window starts under the cards (20 px from the top, one bar tall). */ .workshop-ui[data-mode=inventory] .shop-panel.garden-inventory { top:calc(32px + var(--bar-h) + 50 * var(--iv)); bottom:calc(84 * var(--iv));height:auto;transform:translateX(-50%); } @media(min-width:701px) and (max-width:1250px) { .workshop-ui[data-mode=build] .economy-hud {top:67px;--hud-u:.94px} .workshop-ui[data-mode=build] .build-views {top:136px} .workshop-ui[data-mode=build] .build-components {top:195px;max-height:calc(100dvh - 275px)} .workshop-ui[data-mode=build] .pc-panel.build-inspector {top:195px} } @media(min-width:621px) and (max-width:1250px) { .workshop-ui[data-mode=build] .build-save-controls {top:136px} .workshop-ui[data-mode=build] .build-components, .workshop-ui[data-mode=build] .pc-panel.build-inspector {top:210px} .workshop-ui[data-mode=build] .pc-panel.build-inspector, .workshop-ui[data-mode=build] .pc-panel.build-inspector[data-picker=true] {top:210px;bottom:75px;height:auto;max-height:none;min-height:0} } @media(max-width:820px) { .workshop-ui[data-mode=world] .economy-hud {top:68px;left:10px;right:10px;width:auto;max-width:calc(490 * var(--hud-u));margin-left:auto} .social-ui {--social-top:10px;--social-left:10px} .leaderboard-toggle {min-height:46px} } @media(max-width:700px) { .workshop-ui[data-mode] .economy-hud { --hud-u:.8px;top:68px;left:10px;right:10px;width:auto;max-width:none;gap:6px; } .workshop-ui[data-mode] .economy-hud .resource-pill {height:54px;padding:0 2px 2px;border-width:6px;gap:5px;display:grid;grid-template-columns:20px minmax(0,1fr)} .workshop-ui[data-mode] .economy-hud .pixel-icon {width:20px;height:20px} .workshop-ui[data-mode] .economy-hud .resource-label {font-size:10px} .workshop-ui[data-mode] .economy-hud .resource-value {font-size:15px} .workshop-ui[data-mode] .economy-hud .resource-subtitle {font-size:8px;gap:3px} .workshop-ui[data-mode] .economy-hud .energy-pill .resource-value {font-size:13px} .wallet-identity::before {width:4px;height:4px} .reward-ready-dot {left:12px;top:1px;width:12px;height:12px;font-size:8px!important;border-width:1px} .workshop-ui[data-mode=build] .build-views {top:143px} .workshop-ui[data-mode=build] .build-components {top:210px} .workshop-ui:is([data-mode=market],[data-mode=inventory]) .economy-hud {top:8px} .workshop-ui[data-mode=market] .shop-panel.garden-market {top:90px;bottom:76px;height:auto;transform:translateX(-50%)} .workshop-ui[data-mode=inventory] .shop-panel.garden-inventory {top:119px;bottom:76px;height:auto;transform:translateX(-50%)} } @media(max-width:620px) { .workshop-ui[data-mode=build] .pc-panel.build-inspector {top:max(268px,55dvh)} } @media(max-width:380px) { .workshop-ui[data-mode] .economy-hud .resource-pill {grid-template-columns:minmax(0,1fr);justify-items:center} .workshop-ui[data-mode] .economy-hud .pixel-icon {display:none} .workshop-ui[data-mode] .economy-hud .resource-readout {align-items:center} .reward-ready-dot {left:auto;right:-2px;top:-4px} } @media(prefers-reduced-motion:reduce) { .workshop-ui[data-mode] .economy-hud .resource-pill {transition:none} .workshop-ui[data-mode] .economy-hud .resource-pill:active {translate:none} } /* The WALLET tile shows the wallet's game tokens (owner, 7 Oct 2026, G18): a number like the other values, never the address (it is in the tooltip). REWARDS: "Claim ready" in green once a claim may pass (G19). */ .workshop-ui[data-mode] .economy-hud .wallet-identity[data-balance=true] {font-size:calc(19 * var(--hud-u));line-height:1.05} /* The status square belongs to an address; before a number it read as a stray mark ("▪8.5K"). */ .wallet-identity[data-balance=true]::before {content:none} .workshop-ui[data-mode] .economy-hud .rewards-pill .reward-ready-label {font-weight:700;color:#2f7a3b} .workshop-ui[data-mode] .economy-hud .rewards-pill[data-ready=true] .reward-ready-label {color:#2f7a3b} @media(max-width:700px) { .workshop-ui[data-mode] .economy-hud .wallet-identity[data-balance=true] {font-size:15px} } /* Buy $ (owner, 8 Oct 2026; economy-ui.mjs syncTokenBuy): a short gold-framed link with the coin straight under the WALLET card and as wide as it, to the token's Pons page in a new tab. It shows only once the deployment names a buy link (after entry), only in the own island's world view (social.css hides the whole HUD on a visit) and never while decorating. It is the grid's second row, so the cards keep their height and places; notices measure the HUD and start under it (workshop-ui.mjs positionMessage). */ .workshop-ui[data-mode] .economy-hud .token-buy-button {display:none} .workshop-ui[data-mode=world] .economy-hud {row-gap:calc(4 * var(--hud-u))} .workshop-ui[data-mode=world] .economy-hud .token-buy-button:not([hidden]) { grid-column:2;grid-row:2;position:relative;box-sizing:border-box; display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--hud-u)); width:100%;min-width:0;height:calc(30 * var(--hud-u));padding:0 calc(4 * var(--hud-u)) calc(2 * var(--hud-u)); border:calc(6 * var(--hud-u)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch; font:700 calc(13 * var(--hud-u))/1 Pixeloid,monospace;letter-spacing:0;color:#4a240f;text-decoration:none;white-space:nowrap; cursor:pointer;touch-action:manipulation;pointer-events:auto;transition:filter 120ms ease-out; } .workshop-ui[data-mode=world] .economy-hud.has-boost .token-buy-button {grid-column:3} .workshop-ui[data-mode] .economy-hud .token-buy-button .resource-icon {display:contents} .workshop-ui[data-mode] .economy-hud .token-buy-button .pixel-icon {display:block;flex:none;width:calc(18 * var(--hud-u));height:calc(18 * var(--hud-u))} .workshop-ui[data-mode] .economy-hud .token-buy-label {min-width:0;overflow:hidden;text-overflow:ellipsis} body.decorating .workshop-ui[data-mode] .economy-hud .token-buy-button {display:none!important} .workshop-ui[data-mode] .economy-hud .token-buy-button:focus-visible {outline:3px solid #58a7ce;outline-offset:2px} .workshop-ui[data-mode] .economy-hud .token-buy-button:active {translate:0 2px} @media(hover:hover) and (pointer:fine) { .workshop-ui[data-mode] .economy-hud .token-buy-button:hover {filter:brightness(1.07)} } @media(max-width:700px) { .workshop-ui[data-mode=world] .economy-hud {row-gap:4px} .workshop-ui[data-mode=world] .economy-hud .token-buy-button:not([hidden]) {height:28px;border-width:5px;gap:3px;padding:0 1px 2px;font-size:11px} .workshop-ui[data-mode] .economy-hud .token-buy-button .pixel-icon {width:15px;height:15px} } /* Narrow phones (the WALLET column is about 97 px with BOOST at 375 px): the whole "Buy $" label stays readable with the coin; below 351 px only the words. */ @media(max-width:400px) { .workshop-ui[data-mode=world] .economy-hud .token-buy-button:not([hidden]) {font-size:10px} .workshop-ui[data-mode] .economy-hud .token-buy-button .pixel-icon {width:13px;height:13px} } @media(max-width:350px) { .workshop-ui[data-mode] .economy-hud .token-buy-button .pixel-icon {display:none} } @media(prefers-reduced-motion:reduce) { .workshop-ui[data-mode] .economy-hud .token-buy-button {transition:none} .workshop-ui[data-mode] .economy-hud .token-buy-button:active {translate:none} } /* The live reward counter (owner request, 8 Oct 2026; economy-ui.mjs drawTicker, reward-ticker.mjs): REWARDS shows the island's whole total with the decimals its rate moves every second, never a frozen "5.6K". The number has its own box (a size container) and fits it by its width in em of the bold pixel font (--ticker-em, set with the text), so any length, from 0.0000 to 12,345,678.1234, stays inside the card at every width; nothing measures the page. In the world view REWARDS is the widest card wherever the bar has the room (island-bonus.css for the row with BOOST). */ .workshop-ui[data-mode] .economy-hud .rewards-pill .resource-readout {flex:1 1 0;align-self:stretch;justify-self:stretch;min-width:0} .workshop-ui[data-mode] .economy-hud .reward-ticker {display:block;width:100%;min-width:0;container-type:inline-size} .workshop-ui[data-mode] .economy-hud .rewards-pill .reward-ticker-value {display:block;line-height:1; font-size:min(calc(22 * var(--hud-u)),calc(100cqi / var(--ticker-em,6)))} @media(min-width:1024px) { .workshop-ui[data-mode=world] .economy-hud {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);width:calc(569 * var(--hud-u))} } @media(min-width:701px) and (max-width:820px) { .workshop-ui[data-mode=world] .economy-hud {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.5fr);max-width:calc(569 * var(--hud-u))} } @media(max-width:700px) { .workshop-ui[data-mode=world] .economy-hud {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.4fr)} .workshop-ui[data-mode] .economy-hud .rewards-pill .reward-ticker-value {font-size:min(17px,calc(100cqi / var(--ticker-em,6)))} } /* Narrow phones centre each card's words (above): the counter centres in its full-width box. */ @media(max-width:380px) { .workshop-ui[data-mode] .economy-hud .rewards-pill .reward-ticker-value {text-align:center} } /* The hourly estimate's tab (owner, 9 Oct 2026; economy-ui.mjs syncRateTab, reward-ticker.mjs hudHourly): a small green box hanging from the REWARDS card's bottom edge (the card's frame overlaps its top), as wide as the card less a small inset, that opens Rewards & Claim like the card. World view only (like Buy, which sits under WALLET in the same row); hidden while the island is not earning. From 1024 px "ESTIMATED / HOUR" over "416,666 Tokens ≈ $83.33"; narrower cards show "416.6K/h ≈ $83.33"; phones that line alone at 9 px. Each value fits its tab by its width in em (--rate-em). */ .workshop-ui[data-mode] .economy-hud .reward-rate-tab {display:none} .workshop-ui[data-mode=world] .economy-hud .rewards-pill {z-index:1} .workshop-ui[data-mode=world] .economy-hud .reward-rate-tab:not([hidden]) { grid-row:2;grid-column:-2/-1;position:relative;z-index:0;align-self:start;box-sizing:border-box; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(1 * var(--hud-u)); min-width:0;margin:calc(-10 * var(--hud-u)) calc(8 * var(--hud-u)) 0;padding:calc(9 * var(--hud-u)) calc(4 * var(--hud-u)) calc(2 * var(--hud-u)); border:calc(6 * var(--hud-u)) solid transparent;border-image:url('../ui/frames/tile-green.svg') 12 fill stretch;background:none; font-family:Pixeloid,monospace;color:#29482e;cursor:pointer;touch-action:manipulation;transition:filter 120ms ease-out;container-type:inline-size} .workshop-ui[data-mode] .economy-hud .reward-rate-tab span {letter-spacing:0} .workshop-ui[data-mode] .economy-hud .reward-rate-label {display:block;font:700 calc(9 * var(--hud-u))/1.1 Pixeloid,monospace;color:#3d6b37;white-space:nowrap} .workshop-ui[data-mode] .economy-hud .reward-rate-value {display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:400 max(9px,min(calc(14 * var(--hud-u)),calc(100cqi / var(--rate-em,14))))/1.15 Pixeloid,monospace;color:#29482e} .workshop-ui[data-mode] .economy-hud .reward-rate-amount {font-weight:700} .workshop-ui[data-mode] .economy-hud .reward-rate-compact {display:none} @media(max-width:1023px) { .workshop-ui[data-mode] .economy-hud .reward-rate-full {display:none} .workshop-ui[data-mode] .economy-hud .reward-rate-compact {display:block} } @media(max-width:700px) { .workshop-ui[data-mode=world] .economy-hud .reward-rate-tab:not([hidden]) {margin:-8px 0 0;padding:7px 1px 1px;border-width:5px} .workshop-ui[data-mode] .economy-hud .reward-rate-label {display:none} .workshop-ui[data-mode] .economy-hud .reward-rate-value {font-size:9px} } .workshop-ui[data-mode] .economy-hud .reward-rate-tab:focus-visible {outline:3px solid #58a7ce;outline-offset:2px} .workshop-ui[data-mode] .economy-hud .reward-rate-tab:active {translate:0 2px} @media(hover:hover) and (pointer:fine) {.workshop-ui[data-mode] .economy-hud .reward-rate-tab:hover {filter:brightness(1.07)}} body.decorating .workshop-ui[data-mode] .economy-hud .reward-rate-tab {display:none!important} @media(prefers-reduced-motion:reduce) { .workshop-ui[data-mode] .economy-hud .reward-rate-tab {transition:none} .workshop-ui[data-mode] .economy-hud .reward-rate-tab:active {translate:none} } /* REFERRALS (owner request, 9 Oct 2026; island-referrals.mjs): the referrals' own entry in the bar's left side, in the cards' frame and type like LEADERBOARD, opening the Referrals window. From 821 px it stands under LEADERBOARD, as wide and as tall (the chip stands beside it there up to 1252 px, above). 701-820 px it sits beside LEADERBOARD in the top row (the chip at the right keeps clear of it). Phones, whose top row is full, show it as a small tab in the cards' second row, under BOOST and ENERGY, left of Buy and the hourly tab (world view only, like them). */ .social-ui .referrals-toggle {position:absolute;display:flex;align-items:center;justify-content:center;box-sizing:border-box;margin:0; border:7px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;border-radius:0;box-shadow:none; color:#492b22;font:700 14px/1.1 Pixeloid,monospace;letter-spacing:0;white-space:nowrap;cursor:pointer;touch-action:manipulation} .social-ui .referrals-toggle .pixel-icon {flex:none;image-rendering:pixelated} .social-ui .referrals-toggle:active {transform:translateY(2px)} @media(hover:hover) and (pointer:fine) {.social-ui .referrals-toggle:hover {filter:brightness(1.07)}} @media(min-width:821px) { .social-ui .referrals-toggle {top:calc(var(--social-top) + var(--bar-h) + var(--bar-gap));left:var(--social-left);width:var(--bar-lb);height:var(--bar-h); border-width:calc(7 * var(--bar-u));gap:var(--bar-gap);padding:0 calc(8 * var(--bar-u)) calc(1 * var(--bar-u));font-size:calc(14 * var(--bar-u))} .social-ui .referrals-toggle .pixel-icon {width:calc(26 * var(--bar-u));height:calc(26 * var(--bar-u))} } @media(min-width:701px) and (max-width:820px) { .social-ui .referrals-toggle {top:var(--social-top);left:calc(var(--social-left) + 177px + 8px);min-height:46px;gap:8px;padding:0 10px 3px;font-size:12px} .social-ui .referrals-toggle .pixel-icon {width:24px;height:24px} .social-ui .island-profile-chip {max-width:calc(100vw - 396px)} } @media(max-width:700px) {.social-ui .referrals-toggle {display:none}} .workshop-ui[data-mode] .economy-hud .referrals-tab {display:none} @media(max-width:700px) { .workshop-ui[data-mode=world] .economy-hud .referrals-tab:not([hidden]) { grid-row:2;grid-column:1;align-self:start;position:relative;box-sizing:border-box; display:flex;align-items:center;justify-content:center;gap:4px;width:100%;min-width:0;height:28px;margin:0;padding:0 3px 2px; border:5px solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;border-radius:0;box-shadow:none; font:700 10px/1 Pixeloid,monospace;letter-spacing:0;color:#492b22;white-space:nowrap;cursor:pointer;touch-action:manipulation;pointer-events:auto} .workshop-ui[data-mode=world] .economy-hud.has-boost .referrals-tab:not([hidden]) {grid-column:1/3} .workshop-ui[data-mode] .economy-hud .referrals-tab .pixel-icon {display:block;flex:none;width:15px;height:15px} .workshop-ui[data-mode] .economy-hud .referrals-tab .referrals-label {min-width:0;overflow:hidden;text-overflow:ellipsis} } @media(max-width:350px) {.workshop-ui[data-mode] .economy-hud .referrals-tab .pixel-icon {display:none}} body.decorating .workshop-ui[data-mode] .economy-hud .referrals-tab {display:none!important} .workshop-ui[data-mode] .economy-hud .referrals-tab:focus-visible {outline:3px solid #58a7ce;outline-offset:2px} .workshop-ui[data-mode] .economy-hud .referrals-tab:active {translate:0 2px} @media(prefers-reduced-motion:reduce) { .social-ui .referrals-toggle:active {transform:none} .workshop-ui[data-mode] .economy-hud .referrals-tab:active {translate:none} } /* Top HUD design pass (owner mockup, 9 Oct 2026). One bar height (--bar-h, 50 units) for every top item. At the left one row where it fits: LEADERBOARD · REFERRALS · the profile chip · the gear (settings-ui.mjs places the gear after the chip); the chip shows only its photo (its name in the tooltip) where the row is short. At the right compact BOOST, ENERGY and WALLET boxes and the REWARDS panel: always green, the biggest number, "Claim ready" a green pill in it, and the hourly estimate attached under it as one panel; Buy $ stays under WALLET. */ :root {--bar-h:calc(50 * var(--bar-u));--bar-ref:calc(166 * var(--bar-u))} .workshop-ui[data-mode] .economy-hud .resource-pill {height:calc(50 * var(--hud-u))} .workshop-ui[data-mode=world] .economy-hud {grid-template-rows:calc(50 * var(--hud-u)) auto auto;row-gap:calc(4 * var(--hud-u));align-items:start} .workshop-ui[data-mode=world] .economy-hud .rewards-pill {grid-row:1 / span 2;grid-column:-2 / -1;align-self:stretch;height:auto;min-height:calc(80 * var(--hud-u)); border-image-source:url('../ui/frames/tile-green.svg');color:#31582b;padding-block:calc(2 * var(--hud-u)) calc(3 * var(--hud-u))} .workshop-ui[data-mode=world] .economy-hud .rewards-pill :is(.resource-label,.resource-value) {color:#31532d} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .resource-readout {justify-content:center;gap:calc(2 * var(--hud-u))} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .reward-ticker-value {font-size:min(calc(26 * var(--hud-u)),calc(100cqi / var(--ticker-em,6)))} /* "Claim ready": a green pill in the panel (the panel is the button that opens Rewards & Claim). */ .workshop-ui[data-mode=world] .economy-hud .rewards-pill .reward-ready-label {display:block;box-sizing:border-box;width:100%;margin-top:calc(2 * var(--hud-u)); padding:calc(2 * var(--hud-u)) calc(6 * var(--hud-u)) calc(3 * var(--hud-u));border:1px solid #2a6b38;background:#3f9a52;box-shadow:0 calc(2 * var(--hud-u)) 0 #2a6b38; color:#fffbe8;font:700 calc(11 * var(--hud-u))/1.15 Pixeloid,monospace;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .workshop-ui[data-mode=world] .economy-hud .rewards-pill[data-ready=true] .reward-ready-label {color:#fffbe8} /* The hourly estimate attached under REWARDS: as wide, its top tucked under the panel's frame. */ .workshop-ui[data-mode=world] .economy-hud .reward-rate-tab:not([hidden]) {grid-row:3;margin:calc(-9 * var(--hud-u)) 0 0} .workshop-ui[data-mode=world] .economy-hud .token-buy-button:not([hidden]) {grid-row:2;height:calc(28 * var(--hud-u))} @media(min-width:1024px) { body .workshop-ui[data-mode=world] .economy-hud.has-boost {grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.6fr);width:calc(640 * var(--hud-u))} body .workshop-ui[data-mode=world] .economy-hud:not(.has-boost) {grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.6fr);width:calc(500 * var(--hud-u))} } /* One row at the left from 1165 px: REFERRALS beside LEADERBOARD and the chip beside REFERRALS (the photo alone below 1365 px, where the full name would reach the cards). */ @media(min-width:1165px) { .social-ui .referrals-toggle {top:var(--social-top);left:calc(var(--social-left) + var(--bar-lb) + var(--bar-gap));width:var(--bar-ref)} .social-ui .island-profile-chip {top:var(--social-top);left:calc(var(--social-left) + var(--bar-lb) + var(--bar-ref) + 2 * var(--bar-gap));max-width:calc(250 * var(--bar-u))} } @media(min-width:1165px) and (max-width:1364px) { .social-ui .island-profile-chip {width:var(--bar-h);padding:0;justify-content:center} .social-ui .island-profile-chip .island-profile-name {display:none} } /* 821-1164 px the cards fill the top row: REFERRALS under LEADERBOARD, the chip beside it (above). */ @media(min-width:821px) and (max-width:1164px) { .social-ui .island-profile-chip {top:calc(var(--social-top) + var(--bar-h) + var(--bar-gap));left:calc(var(--social-left) + var(--bar-lb) + var(--bar-gap))} } .social-ui .referrals-toggle .referrals-label {min-width:0;overflow:hidden;text-overflow:ellipsis} /* Phones: the cards keep one 54 px row (REWARDS too, its pill small) and the second row (REFERRALS, Buy, the hourly estimate under REWARDS) as before; the bar keeps its own 46 px row above. */ @media(max-width:700px) { .workshop-ui[data-mode] .economy-hud .resource-pill {height:54px} .workshop-ui[data-mode=world] .economy-hud {grid-template-rows:54px auto} .workshop-ui[data-mode=world] .economy-hud .rewards-pill {grid-row:1;height:54px;min-height:0;padding-block:0 2px} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .resource-readout {gap:1px} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .reward-ticker-value {font-size:min(16px,calc(100cqi / var(--ticker-em,6)))} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .resource-label {font-size:9px} .workshop-ui[data-mode=world] .economy-hud .rewards-pill .reward-ready-label {margin-top:1px;padding:0 2px 1px;font-size:9px;box-shadow:0 1px 0 #2a6b38} .workshop-ui[data-mode=world] .economy-hud .reward-rate-tab:not([hidden]) {grid-row:2;margin:-8px 0 0} .workshop-ui[data-mode=world] .economy-hud .token-buy-button:not([hidden]) {height:28px} } /* The owner's sale (10 Oct 2026; economy-ui.mjs syncSale, ui-copy.mjs saleBadge): a red SALE pill while one runs, "SALE −25%" with its countdown "ends in 11:42:05" in server time, that opens the market. Every price the server sends is already discounted; the pill only says so. World view of the own island only (like Buy and the hourly tab; social.css hides the whole HUD on a visit) and never while decorating. With BOOST it stands in the second row under BOOST and ENERGY, beside Buy and as tall; without BOOST in the third row beside the hourly tab. From 821 to 1164 px the profile chip and the gear stand in a second row at the left, where the cards' rows begin, so there (and on phones, whose second row is full) it is a full-width strip under the whole HUD. Its words fit it by their width in em (--sale-em), as the hourly tab's do; notices and the gear (settings-ui.mjs) measure the HUD and keep clear of it. */ .workshop-ui[data-mode] .economy-hud .sale-badge {display:none} .workshop-ui[data-mode=world] .economy-hud .sale-badge:not([hidden]) { grid-row:3;grid-column:1 / -2;align-self:start;position:relative;box-sizing:border-box; display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:calc(28 * var(--hud-u));margin:0; padding:0 calc(6 * var(--hud-u)) calc(1 * var(--hud-u));border:calc(2 * var(--hud-u)) solid #5c2318;border-radius:0; background:linear-gradient(#e2553a 0 50%,#d8432a 50%); box-shadow:inset 0 calc(2 * var(--hud-u)) 0 #f48a6a,inset 0 calc(-2 * var(--hud-u)) 0 #a8321f,0 calc(2 * var(--hud-u)) 0 #5c231866; color:#fff7df;cursor:pointer;touch-action:manipulation;pointer-events:auto;container-type:inline-size;transition:filter 120ms ease-out} .workshop-ui[data-mode=world] .economy-hud.has-boost .sale-badge:not([hidden]) {grid-row:2;grid-column:1 / 3} @media(min-width:821px) and (max-width:1164px) { .workshop-ui[data-mode=world] .economy-hud .sale-badge:not([hidden]), .workshop-ui[data-mode=world] .economy-hud.has-boost .sale-badge:not([hidden]) {grid-row:4;grid-column:1 / -1} } .workshop-ui[data-mode] .economy-hud .sale-badge-line {display:flex;align-items:center;justify-content:center;gap:.45em;min-width:0;max-width:100%; overflow:hidden;white-space:nowrap;letter-spacing:0;font:700 max(9px,min(calc(13 * var(--hud-u)),calc(100cqi / var(--sale-em,18))))/1 Pixeloid,monospace} .workshop-ui[data-mode] .economy-hud .sale-badge-tag {flex:none;padding:.18em .32em .22em;background:#ffe680;box-shadow:0 0 0 calc(1 * var(--hud-u)) #8a3a12;color:#7a2312} .workshop-ui[data-mode] .economy-hud .sale-badge-percent {flex:none;font:inherit;color:#ffe680} .workshop-ui[data-mode] .economy-hud .sale-badge-clock {min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:400;color:#fff7df;font-variant-numeric:tabular-nums} body.decorating .workshop-ui[data-mode] .economy-hud .sale-badge {display:none!important} .workshop-ui[data-mode] .economy-hud .sale-badge:focus-visible {outline:3px solid #58a7ce;outline-offset:2px} .workshop-ui[data-mode] .economy-hud .sale-badge:active {translate:0 2px} @media(hover:hover) and (pointer:fine) {.workshop-ui[data-mode] .economy-hud .sale-badge:hover {filter:brightness(1.07)}} @media(max-width:700px) { .workshop-ui[data-mode=world] .economy-hud .sale-badge:not([hidden]), .workshop-ui[data-mode=world] .economy-hud.has-boost .sale-badge:not([hidden]) {grid-row:3;grid-column:1 / -1;height:26px;padding:0 6px 1px;border-width:2px} .workshop-ui[data-mode] .economy-hud .sale-badge-line {font-size:max(9px,min(11px,calc(100cqi / var(--sale-em,18))))} } @media(prefers-reduced-motion:reduce) { .workshop-ui[data-mode] .economy-hud .sale-badge {transition:none} .workshop-ui[data-mode] .economy-hud .sale-badge:active {translate:none} }