/* The GPU Workshop (gpu-workshop-ui.mjs, owner 10 Oct 2026): its window in the overclock window's look (a .pcs-dialog
   .oc-dialog: overclock.css gives the frame, the coloured upgrade-style cards, the odds rows and the coin button), the GPU
   cards (an upgrade under way counts down: upgrade time, 11 Oct 2026), Boot's reveal stage, the "GPU Lv N" badges of
   MY PCS and Build, and the overclock window's GPU line.
   The HUD's cream pixel style; text never below 12 px; buttons touch-sized on phones. */

/* ---------------------------------------------------------------- the graphics card mark */
.gw-gpu-icon{display:block;width:100%;height:100%;shape-rendering:crispEdges}
.gw-gpu-ink{fill:#3e211d}.gw-gpu-body{fill:#5b5480}.gw-gpu-fan{fill:#221c38}.gw-gpu-hub{fill:#b9c1d6}.gw-gpu-rgb{fill:#49efbf}.gw-gpu-gold{fill:#ffd182}
.gw-title-icon{flex:none;display:grid;width:calc(36 * var(--q));height:calc(22 * var(--q));image-rendering:pixelated}

/* ---------------------------------------------------------------- step 1: the GPUs */
.gw-intro{color:var(--ink)}
/* the style step's price line: what the one price is made of (the card's own day at its base speed, in any PC) */
.gw-price-line{margin:calc(-4 * var(--q)) 0 0;color:var(--soft);font-size:max(13px,calc(13 * var(--q)));line-height:1.4}
/* how long the upgrade takes (upgrade time, owner 11 Oct 2026), with a small clock */
.gw-time-line{display:flex;align-items:center;gap:calc(7 * var(--q));margin:0;padding:calc(5 * var(--q)) calc(9 * var(--q));background:#eef4fb;
  border:calc(2 * var(--q)) solid #b9d6ec;color:#2c5d73;font-size:max(13px,calc(13 * var(--q)));line-height:1.35}
.gw-clock{flex:none;display:grid;width:calc(18 * var(--q));height:calc(18 * var(--q))}
.gw-clock .oc-art{width:100%;height:100%}
.gw-art-clock .oc-art-fill{fill:#fffaf0}.gw-art-clock .oc-art-accent{fill:#2c5d73}.gw-art-clock .oc-art-edge{fill:#2c5d73}
.gw-notice{padding:calc(6 * var(--q)) calc(10 * var(--q));background:#eef7e2;border:calc(2 * var(--q)) solid #a8cf8b;color:#2f6a2b;font-size:max(13px,calc(13 * var(--q)))}
.gw-empty{display:grid;justify-items:center;gap:calc(6 * var(--q));padding:calc(14 * var(--q)) calc(12 * var(--q));background:#fffaf0;
  border:calc(2 * var(--q)) dashed #ecd9ae;color:var(--soft);text-align:center;font-size:max(13px,calc(14 * var(--q)))}
.gw-empty-text{margin:0}
/* the building's card render (transparent around it, its shadow included) */
.gw-empty-render{display:block;width:min(100%,calc(240 * var(--q)));height:auto;aspect-ratio:4/3;object-fit:contain}
/* The cards (owner, 11 Oct 2026): every card the same height in its row, the same parts in the same places: its PC and
   the big "LV 3" pill, its picture, name and ten-cell level bar, what the next level gives ("Card speed 4.0 H/s ➜ 4.48
   H/s", the most visible line, and "+0.45 H/s for PC 2"), and one state bar at its foot: a green Upgrade button with the
   time and the price, a blue "Upgrading · 12 min left" with its progress, a sand "Can upgrade again in 11 h 44 min", a
   gold "Max level", or a dim line saying what to do. */
.gw-gpus{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(290 * var(--q))),1fr));grid-auto-rows:1fr;gap:calc(12 * var(--q)) calc(10 * var(--q))}
.gw-section{margin:calc(4 * var(--q)) 0 calc(-2 * var(--q));font:700 max(12px,calc(13 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.gw-gpu{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:calc(6 * var(--q));min-width:0;
  padding:calc(7 * var(--q)) calc(10 * var(--q)) calc(8 * var(--q));border:calc(5 * var(--q)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;
  background:none;color:var(--ink);text-align:left;font:400 max(13px,calc(13 * var(--q)))/1.35 Pixeloid,monospace}
button.gw-gpu{cursor:pointer}
.gw-gpu:disabled{cursor:not-allowed}
/* The top edge says the state at a glance (like the overclock's profile cards): green ready, blue striped upgrading,
   gold at the top. */
.gw-gpu:is([data-state=ready],[data-state=upgrading],[data-state=max])::before{content:'';position:absolute;left:0;right:0;top:calc(-2 * var(--q));
  height:calc(5 * var(--q));background:#6dbb4a;pointer-events:none}
.gw-gpu[data-state=upgrading]::before{background:repeating-linear-gradient(90deg,#3a97cf 0 calc(10 * var(--q)),#7fc4ec calc(10 * var(--q)) calc(20 * var(--q)))}
.gw-gpu[data-state=max]::before{background:#f2b134}
button.gw-gpu[data-state=ready]:not(:disabled):hover{filter:brightness(1.04);translate:0 calc(-2 * var(--q))}
.gw-gpu[data-state=unavailable]{opacity:.86}
.gw-gpu[data-state=sealed]{opacity:.62;filter:grayscale(.55)}
.gw-gpu[data-state=away]{opacity:.74;filter:grayscale(.35)}
/* The card a badge asked for while it cannot level up (cooling down, at the top): outlined among the others. */
.gw-gpu[data-marked=true]{opacity:1;filter:none;outline:calc(3 * var(--q)) solid #3a97cf;outline-offset:calc(2 * var(--q))}
.gw-gpu-head{display:flex;align-items:center;gap:calc(8 * var(--q));min-width:0}
.gw-tag{--pc:#f0913a}
.gw-gpu[data-state=away] .gw-tag{--pc:#d9d1c2}
.gw-pc-name{flex:1 1 auto;min-width:0;font:700 max(13px,calc(14 * var(--q)))/1.2 Pixeloid,monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* "LV 3": the level's own pill, grey at 0, gold from Level 1, glowing at the top. */
.gw-lv{flex:none;margin-left:auto;padding:calc(4 * var(--q)) calc(8 * var(--q)) calc(3 * var(--q));border:calc(2 * var(--q)) solid #6e6457;background:#e9e2d4;
  box-shadow:inset 0 calc(2 * var(--q)) #ffffff8c,inset 0 calc(-2 * var(--q)) #00000017;color:#4b443b;
  font:700 max(13px,calc(15 * var(--q)))/1 Pixeloid,monospace;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;font-variant-numeric:tabular-nums}
.gw-lv:not([data-level="0"]){border-color:#7a3e00;background:linear-gradient(180deg,#ffe98f,#ffc93c);box-shadow:inset 0 calc(2 * var(--q)) #fff6c9,inset 0 calc(-2 * var(--q)) #e0a92a;color:#5a2c00}
.gw-lv[data-top=true]{background:linear-gradient(180deg,#fff3b0,#ffd23f 55%,#f2a81d);box-shadow:inset 0 calc(2 * var(--q)) #fffbe0,0 0 calc(9 * var(--q)) #ffc428a6}
.gw-gpu-main{display:grid;grid-template-columns:calc(92 * var(--q)) minmax(0,1fr);align-items:center;gap:calc(10 * var(--q))}
.gw-thumb{display:grid;place-items:center;width:100%;aspect-ratio:4/3;background:linear-gradient(180deg,#bfe1fb,#fbf3dc);border:calc(2 * var(--q)) solid #b9d6ec;overflow:hidden}
.gw-thumb-img{display:block;width:100%;height:100%;object-fit:contain;padding:calc(3 * var(--q))}
.gw-thumb-icon{display:grid;width:60%}
.gw-gpu-copy{display:grid;gap:calc(7 * var(--q));min-width:0}
.gw-gpu-name{min-width:0;font:700 max(13px,calc(14.5 * var(--q)))/1.2 Pixeloid,monospace;overflow-wrap:anywhere}
.gw-sealed{font-size:max(13px,calc(13 * var(--q)));color:var(--soft)}
/* The level bar: ten pixel cells across the card, lit gold up to the level; on a card that can level up now the next
   cell waits in green. */
.gw-bar{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:calc(3 * var(--q));width:100%;max-width:calc(230 * var(--q))}
.gw-bar i{display:block;height:calc(13 * var(--q));background:#e9dcc0;border:calc(2 * var(--q)) solid #3e211d;box-shadow:inset 0 calc(-2 * var(--q)) #d6c4a0}
.gw-bar i[data-on=true]{background:#ffd23f;box-shadow:inset 0 calc(3 * var(--q)) #fff3b0,inset 0 calc(-2 * var(--q)) #e0a92a}
.gw-bar i[data-next=true]{background:#d9f2c6;border-color:#2f6a2b;box-shadow:inset 0 calc(2 * var(--q)) #f4ffe8}
/* What the next level gives: the label, then now ➜ after (green and bold), then what it adds to its PC. */
.gw-speed{display:grid;gap:calc(2 * var(--q));min-width:0;padding:calc(6 * var(--q)) calc(9 * var(--q)) calc(7 * var(--q));background:#eef7e2;border:calc(2 * var(--q)) solid #a8cf8b}
.gw-speed-label{font:700 max(12px,calc(11.5 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.06em;text-transform:uppercase;color:#4f7a3c;overflow-wrap:anywhere}
.gw-speed-line{display:flex;align-items:center;flex-wrap:wrap;gap:calc(3 * var(--q)) calc(7 * var(--q));min-width:0;
  font:700 max(15px,calc(17 * var(--q)))/1.25 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.gw-speed-now{color:var(--ink);font-weight:700;white-space:nowrap}
.gw-speed-next{color:#24801f;font-weight:700;white-space:nowrap;text-shadow:0 calc(1 * var(--q)) #ffffff}
.gw-speed-arrow{flex:none;display:grid;width:calc(24 * var(--q));height:calc(20 * var(--q))}
.gw-speed-arrow .oc-art{width:100%;height:100%}
.gw-art-arrow .oc-art-fill{fill:#5fb346}.gw-art-arrow .oc-art-accent{fill:#b9ec9a}.gw-art-arrow .oc-art-edge{fill:#2f6a2b}
.gw-speed-gain{font:700 max(12px,calc(13 * var(--q)))/1.3 Pixeloid,monospace;color:#2f6a2b;overflow-wrap:anywhere}
.gw-speed-note{font-size:max(12px,calc(12.5 * var(--q)));line-height:1.3;color:#2c5d73;overflow-wrap:anywhere}
.gw-speed-bonus{padding:calc(2 * var(--q)) calc(6 * var(--q));border:calc(2 * var(--q)) solid #e0a92a;background:#fff1b8;color:#7a3e00;font-size:max(12px,calc(13 * var(--q)))}
/* An upgrade under way: its result is still to come (a blinking "?"); at the top: gold; a card off the desks: plain. */
.gw-speed[data-tone=pending]{background:#eef4fb;border-color:#b9d6ec}
.gw-speed[data-tone=pending] .gw-speed-label{color:#2c5d73}
.gw-speed[data-tone=pending] .gw-speed-next{color:#1f6aa0}
.gw-speed[data-tone=top]{background:#fff6dc;border-color:#e0c486}
.gw-speed[data-tone=top] .gw-speed-label{color:#7a5216}
.gw-speed[data-tone=now]{background:#f6f1e6;border-color:#e3d6bb}
.gw-speed[data-tone=now] .gw-speed-label{color:var(--muted)}
/* The state at the card's foot, always in the same place and size. */
.gw-gpu-foot{margin-top:auto;display:flex;align-items:center;gap:calc(8 * var(--q));min-width:0;min-height:calc(46 * var(--q));
  padding:calc(5 * var(--q)) calc(10 * var(--q));border:calc(2 * var(--q)) solid #d9c49a;background:#f6efe0;color:var(--soft);
  font:700 max(13px,calc(13 * var(--q)))/1.25 Pixeloid,monospace}
/* Ready: a green Upgrade button, "UPGRADE ➜" over how long it takes (a clock) and its one price (a coin). */
.gw-gpu-foot[data-tone=go]{border-color:#2f6a2b;background:linear-gradient(180deg,#93d46f,#6dbb4a);color:#173d14;
  box-shadow:inset 0 calc(3 * var(--q)) #c6f0a8,inset 0 calc(-3 * var(--q)) #4f9a3a}
.gw-go-copy{flex:1 1 auto;display:grid;gap:calc(3 * var(--q));min-width:0}
.gw-go-head{display:flex;align-items:center;justify-content:space-between;gap:calc(8 * var(--q))}
.gw-go-label{font:700 max(14px,calc(15.5 * var(--q)))/1.1 Pixeloid,monospace;letter-spacing:.06em;text-transform:uppercase}
.gw-go-meta{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(12 * var(--q));row-gap:calc(2 * var(--q));
  font:700 max(12px,calc(12.5 * var(--q)))/1.25 Pixeloid,monospace}
.gw-go-part{display:inline-flex;align-items:center;gap:calc(4 * var(--q));white-space:nowrap}
.gw-go-part .gw-clock{width:calc(14 * var(--q));height:calc(14 * var(--q))}
.gw-coin{flex:none;display:grid;width:calc(16 * var(--q));height:calc(16 * var(--q))}
.gw-coin img,.gw-coin svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.gw-cost{color:#173d14}
.gw-go-arrow{flex:none;display:grid;width:calc(20 * var(--q));height:calc(17 * var(--q))}
.gw-go-arrow .oc-art{width:100%;height:100%}
.gw-go-arrow .gw-art-arrow .oc-art-fill{fill:#fffaf0}.gw-go-arrow .gw-art-arrow .oc-art-accent{fill:#ffffff}.gw-go-arrow .gw-art-arrow .oc-art-edge{fill:#1d4d19}
.gw-gpu-foot[data-tone=go] .gw-art-clock .oc-art-fill{fill:#fffaf0}.gw-gpu-foot[data-tone=go] .gw-art-clock :is(.oc-art-accent,.oc-art-edge){fill:#1d4d19}
/* Upgrading: blue, the time left over its progress bar (fully opaque: it is news, not a refusal). */
.gw-gpu-foot[data-tone=upgrading]{border-color:#7fb6dc;background:#eef4fb;color:#1f6aa0}
.gw-foot-copy{flex:1 1 auto;display:grid;gap:calc(4 * var(--q));min-width:0}
.gw-countdown{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.gw-progress{display:block;height:calc(11 * var(--q));border:calc(2 * var(--q)) solid #2c5d73;background:#fffaf0;overflow:hidden}
.gw-progress i{display:block;width:var(--p,0%);height:100%;background:repeating-linear-gradient(90deg,#3a97cf 0 calc(6 * var(--q)),#7fc4ec calc(6 * var(--q)) calc(9 * var(--q)));
  transition:width 1s linear}
/* Cooling down: sand, an hourglass, "Can upgrade again in 11 h 44 min". */
.gw-gpu-foot[data-tone=wait]{border-color:#cbbfa9;background:#f3eee5;color:#5b4f43}
.gw-wait,.gw-star,.gw-gpu-foot .gw-clock{flex:none;display:grid;width:calc(18 * var(--q));height:calc(20 * var(--q))}
.gw-wait .oc-art,.gw-star .oc-art{width:100%;height:100%}
.gw-art-glass .oc-art-fill{fill:#fffaf0}.gw-art-glass .oc-art-accent{fill:#e0a92a}.gw-art-glass .oc-art-edge{fill:#6e6457}
/* At the top: gold, a star. */
.gw-gpu-foot[data-tone=max]{border-color:#e0a92a;background:linear-gradient(90deg,#fff1b8,#ffe07a 55%,#fff1b8);color:#7a3e00}
.gw-art-star .oc-art-fill{fill:#ffd23f}.gw-art-star .oc-art-accent{fill:#fff6c2}.gw-art-star .oc-art-edge{fill:#7a3e00}
/* Can't now (a refusal, a card off the desks): a dashed line saying why or what to do. */
.gw-gpu-foot[data-tone=off]{border-style:dashed;background:#fbf6ea;color:#8a3c12;font-weight:400}
.gw-gpu[data-state=away] .gw-gpu-foot{color:var(--soft)}
.gw-reason{overflow-wrap:anywhere}

/* ---------------------------------------------------------------- step 2: the chosen GPU and its upgrade styles */
/* The chosen GPU: its picture, PC, name, "LV 3" and bar; beside them what the next level gives: the card's speed and its
   PC's, now ➜ after. */
.gw-chosen{display:grid;grid-template-columns:calc(76 * var(--q)) minmax(0,1fr) minmax(0,auto);align-items:center;gap:calc(12 * var(--q));
  padding:calc(6 * var(--q)) calc(10 * var(--q));background:#fffaf0;border:calc(2 * var(--q)) solid #ecd9ae}
.gw-chosen-copy{display:grid;gap:calc(6 * var(--q));min-width:0}
.gw-chosen-title{display:flex;align-items:center;flex-wrap:wrap;gap:calc(6 * var(--q)) calc(8 * var(--q));min-width:0}
.gw-chosen .gw-lv{margin-left:0}
.gw-chosen-level{display:flex;align-items:center;gap:calc(8 * var(--q));min-width:0}
.gw-chosen-level .gw-bar{flex:1 1 auto;min-width:0;width:auto;max-width:calc(200 * var(--q))}
.gw-speed-rows{grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:calc(12 * var(--q));row-gap:calc(3 * var(--q))}
.gw-speed-row{display:contents}
.gw-speed-rows .gw-speed-line{font-size:max(14px,calc(16 * var(--q)))}
.gw-speed-rows .gw-speed-pcline{font-size:max(13px,calc(13.5 * var(--q)))}
.gw-speed-rows .gw-speed-pc .gw-speed-label{color:var(--soft)}
.gw-speed-rows .gw-speed-pcline .gw-speed-arrow{width:calc(19 * var(--q));height:calc(16 * var(--q))}
/* The Upgrade button's second line: how long it takes (a clock), then the one price. */
.oc-go .gw-go-meta{column-gap:calc(10 * var(--q));font-size:max(12px,calc(12.5 * var(--q)));font-weight:400;color:#6a3a16}
.oc-go .gw-go-meta .oc-go-cost{font-size:inherit}
.oc-go .gw-go-part .gw-clock{width:calc(13 * var(--q));height:calc(13 * var(--q))}
.oc-go:disabled .gw-go-meta{color:#a8987f}
.oc-go:disabled .gw-go-part .gw-clock{filter:grayscale(1);opacity:.6}
/* The upgrade styles: overclock.css's coloured profile cards; Steady green with a wrench, Gamble yellow with a die, Wild red
   with a lightning bolt (data-look by the style's id; a newer server's style takes the look its odds resemble). */
.oc-profile[data-look=normal]{--oc-accent:#5fb346;--oc-edge:#9fd27f;--oc-tint:#f1f9e8;--oc-deep:#2f6a2b;--oc-box:#e3f2d4;--oc-head:#6dbb4a;--oc-head-hi:#2f6a2b;
  --oc-line:#5fb346;--oc-line-hi:#f4ffe8}
.oc-profile[data-look=lucky]{--oc-accent:#f2b134;--oc-edge:#f1cd7a;--oc-tint:#fff7e1;--oc-deep:#9a5a0a;--oc-box:#fdedc4;--oc-head:#fff6ec;--oc-head-hi:#3e211d;
  --oc-line:#fff6ec;--oc-line-hi:#3e211d}
.oc-profile[data-look=chaos]{--oc-accent:#e0503a;--oc-edge:#efa392;--oc-tint:#fff1ec;--oc-deep:#9b2a1c;--oc-box:#fbdcd2;--oc-head:#ffd23f;--oc-head-hi:#fff6c2;
  --oc-line:#ffd23f;--oc-line-hi:#fff6c2}
/* A drop: red like the overclock's crash. */
:is(.oc-bar i,.oc-dot)[data-tone=down],.oc-odd[data-tone=down] .oc-dot{background:#e0503a}
.oc-odd[data-tone=down] .oc-result{color:#b23a1f;font-weight:700}
.gw-trainers .oc-odd{grid-template-columns:auto calc(44 * var(--q)) auto minmax(0,1fr)}

/* ---------------------------------------------------------------- step 4: the reveal */
.gw-reveal{display:grid;justify-items:center;gap:calc(8 * var(--q));padding:calc(2 * var(--q)) 0 calc(4 * var(--q))}
/* Boot's stage: a soft workshop backdrop the canvas paints over; a tap lands the outcome at once. */
.gw-stage{position:relative;height:min(52vh,calc(380 * var(--q)));aspect-ratio:4/3;width:auto;max-width:100%;overflow:hidden;cursor:pointer;
  background:radial-gradient(ellipse 70% 80% at 50% 62%,#fff8e2 0%,#f6e7c4 58%,#ead3a2 100%);border:calc(3 * var(--q)) solid #3e211d;
  box-shadow:inset 0 calc(-14 * var(--q)) 0 #d9b98222;transition:background .35s ease}
/* Once the outcome lands the stage takes its mood: a night stage for the jackpot's gold, fresh green for a gain, calm for no
   change, cold blue for a drop. */
.gw-reveal[data-tone=jackpot][data-phase=done] .gw-stage{background:radial-gradient(ellipse 75% 85% at 50% 48%,#6a4a9e 0%,#3b2861 55%,#211740 100%);
  box-shadow:inset 0 calc(-14 * var(--q)) 0 #0000002e}
.gw-reveal:is([data-tone=great],[data-tone=up])[data-phase=done] .gw-stage{background:radial-gradient(ellipse 70% 80% at 50% 58%,#f6ffef 0%,#dcf3cc 60%,#b9dfa3 100%)}
.gw-reveal:is([data-tone=none],[data-tone=floor])[data-phase=done] .gw-stage{background:radial-gradient(ellipse 70% 80% at 50% 62%,#fbf7ee 0%,#ece3d0 60%,#d8cbb2 100%)}
.gw-reveal[data-tone=down][data-phase=done] .gw-stage{background:radial-gradient(ellipse 70% 80% at 50% 62%,#e8ecf6 0%,#c9d2e6 60%,#a9b6d2 100%)}
.gw-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.gw-outcome{display:grid;justify-items:center;gap:calc(4 * var(--q));min-height:calc(70 * var(--q));text-align:center}
.gw-headline{font:700 max(20px,calc(28 * var(--q)))/1.15 Pixeloid,monospace;color:var(--ink);overflow-wrap:anywhere}
.gw-rolling{color:var(--muted);font-size:max(16px,calc(20 * var(--q)));animation:oc-blink 1s steps(2,jump-none) infinite}
.gw-reveal[data-tone=jackpot] .gw-headline:not(.gw-rolling){color:#8a5216;text-shadow:0 calc(2 * var(--q)) #ffd23f,0 0 calc(10 * var(--q)) #ffc42899}
.gw-reveal:is([data-tone=great],[data-tone=up]) .gw-headline:not(.gw-rolling){color:#2f6a2b;text-shadow:0 calc(2 * var(--q)) #ffd23f}
.gw-reveal:is([data-tone=none],[data-tone=floor]) .gw-headline:not(.gw-rolling){color:#6b5d4f}
/* level 0's line is a sentence, not a shout */
.gw-reveal[data-tone=floor] .gw-headline:not(.gw-rolling){font-size:max(17px,calc(21 * var(--q)))}
.gw-reveal[data-tone=down] .gw-headline:not(.gw-rolling){color:#3d5a9a}
.gw-reveal[data-phase=done] .gw-headline{animation:oc-pop .4s cubic-bezier(.2,1.6,.4,1) both}
.gw-level-line{font:700 max(14px,calc(15 * var(--q)))/1.3 Pixeloid,monospace;color:var(--soft)}
.gw-note{font-size:max(13px,calc(13 * var(--q)));color:#7a3e00}
.gw-footer>.gw-again{min-width:calc(170 * var(--q))}

/* ---------------------------------------------------------------- the "GPU Lv N" badge (MY PCS, Build) */
.gw-badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;max-width:100%;min-height:26px;margin:0;padding:2px 8px 2px 6px;border:2px solid #b9c1d6;
  background:#f1f3f9;color:#3a3f5c;font:700 12px/1.2 Pixeloid,monospace;white-space:nowrap;cursor:pointer;font-variant-numeric:tabular-nums}
.gw-badge:not([data-level="0"]){border-color:#e0a92a;background:linear-gradient(90deg,#fff1b8,#ffe07a);color:#7a3e00}
.gw-badge:hover{filter:brightness(1.05)}
.gw-badge:focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.gw-badge-icon{flex:none;display:grid;width:18px;height:11px}
.mypcs-window .gw-badge{justify-self:start;margin:calc(2 * var(--p)) 0;font-size:max(12px,calc(12 * var(--p)))}
/* Build's PC health card: the overclock badge and "GPU Lv N" share its badge row; a level's gain is green beside the losses. */
.workshop-ui[data-mode=build] .build-health-badges{grid-area:badge;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.workshop-ui[data-mode=build] .build-health-badges .gw-badge{font-family:Pixeloid,monospace}
/* (Build's own svg rule, 23 px and stroked, must not reach the card's mark.) */
.workshop-ui[data-mode=build] .build-health-gpu .gw-gpu-icon{display:block;width:18px;height:11px;stroke:none}
.workshop-ui[data-mode=build] .build-health-losses li[data-tone=gain]{color:#2f6a2b}
/* The overclock window's line on a levelled GPU: its bonus stays, the overclock adds on top. */
.oc-gpu-note{display:flex;align-items:center;gap:calc(8 * var(--q));padding:calc(5 * var(--q)) calc(9 * var(--q));background:#fff6dc;border:calc(2 * var(--q)) solid #e0c486;
  color:#7a5216;font-size:max(12px,calc(12.5 * var(--q)));line-height:1.35}
.oc-gpu-icon{flex:none;display:grid;width:calc(26 * var(--q));height:calc(16 * var(--q))}

/* ---------------------------------------------------------------- the island bubble over the roof sign */
.island-job-bubble[data-kind=gpu_workshop]{--edge:#3b4f8a;--fill:#eef3ff;--ink:#22305a;--icon:#3b3558;--accent:#49efbf}
.island-job-bubble[data-kind=gpu_workshop][data-tone=wait]{--edge:#6e6457;--fill:#f3eee5;--ink:#4b443b;--icon:#7a6f63;--accent:#cfd6e6}

/* ---------------------------------------------------------------- phones */
@media(max-width:760px){
  .gw-gpus{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto}
  .gw-chosen{grid-template-columns:calc(64 * var(--q)) minmax(0,1fr)}
  .gw-chosen>.gw-speed{grid-column:1/-1}
}
@media(max-width:620px){
  .gw-gpu-main{grid-template-columns:76px minmax(0,1fr)}
  .gw-chosen{grid-template-columns:64px minmax(0,1fr)}
  .gw-bar i{height:11px}
  .gw-speed-rows{grid-template-columns:minmax(0,1fr)}
  .gw-speed-rows .gw-speed-pc .gw-speed-label{margin-top:4px}
  .gw-stage{height:min(40vh,300px)}
  .gw-footer>.gw-again{flex:1 1 auto;min-width:0}
  .gw-title-icon{width:30px;height:18px}
}
/* The next level's cell breathes and an upgrade's "?" blinks (never without motion). */
@media(prefers-reduced-motion:no-preference){
  .gw-gpu[data-state=ready] .gw-bar i[data-next=true]{animation:gw-next 1.6s steps(2,jump-none) infinite}
  @keyframes gw-next{50%{background:#9fdc7a}}
  .gw-speed[data-tone=pending] .gw-speed-next{animation:oc-blink 1s steps(2,jump-none) infinite}
}
@media(prefers-reduced-motion:reduce){
  .gw-rolling,.gw-reveal .gw-headline{animation:none!important}
  .gw-stage,.gw-progress i{transition:none}
  button.gw-gpu[data-state=ready]:hover{translate:none}
}
/* The level on every graphics card (owner, 11 Oct 2026): inventory cards, a stored PC, Build's parts list. */
.inv-item .gw-badge.inv-item-gpu,.build-owned-copy .gw-badge.build-owned-gpu{min-height:0;padding:0 6px;border-width:1px;font-size:11px;line-height:16px;justify-self:start}
.inv-item .gw-badge.inv-item-gpu{margin-top:4px}
.inv-selected-gpu{font-weight:700;color:#7a3e00}
.gw-badge.inv-detail-gpu,.gw-badge.pcs-gpu{margin:6px 0}