/* Overclock (overclock-ui.mjs, owner 9 Oct 2026): the Overclock window (a wider .pcs-dialog: three profile cards side by
   side, a reveal dial), the badge a PC wears while its overclock runs, MY PCS' Overclock button and Build's entry.
   The HUD's cream pixel style; text never below 12 px; buttons touch-sized on phones. */

/* ---------------------------------------------------------------- the flame */
/* Its own colours wherever it stands (Build's buttons give their line icons an inherited stroke). */
.oc-flame{display:block;width:100%;height:100%;stroke:none}
.oc-flame path{stroke:none}
.oc-flame-ink{fill:#e0603a}.oc-flame-core{fill:#ffd23f}
.oc-icon,.oc-title-icon,.oc-badge-icon,.mypcs-oc-icon{flex:none;display:inline-grid;image-rendering:pixelated}

/* ---------------------------------------------------------------- the window */
.oc-dialog{--q:clamp(.9px,min(calc((100vw - 24px) / 960),calc((100dvh - 24px) / 700)),1.2px);width:min(calc(960 * var(--q)),calc(100vw - 24px))}
.oc-title-icon{width:calc(22 * var(--q));height:calc(29 * var(--q))}
.oc-dialog .pcs-dialog-head{gap:calc(10 * var(--q))}
.oc-dialog .pcs-dialog-title{font-size:max(17px,calc(23 * var(--q)));letter-spacing:.03em;text-transform:uppercase}
.oc-body{gap:calc(10 * var(--q))}
.oc-intro{color:var(--ink)}
.oc-unavailable{padding:calc(6 * var(--q)) calc(10 * var(--q));background:#fff1dc;border:calc(2 * var(--q)) solid #ebb07c;color:#8a3c12;
  font-size:max(13px,calc(13 * var(--q)));line-height:1.4}
/* The profiles (owner's redesign, 10 Oct 2026): three coloured cards side by side, each a radio button. Stable green, Turbo
   yellow, Extreme red (data-look; a newer server's profile takes the look its odds resemble). */
.oc-profiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(10 * var(--q));align-items:stretch;padding-top:calc(4 * var(--q))}
.oc-profile{--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;
  position:relative;display:flex;flex-direction:column;align-items:stretch;gap:calc(7 * var(--q));min-width:0;
  padding:calc(13 * var(--q)) calc(11 * var(--q)) calc(11 * var(--q));border:calc(3 * var(--q)) solid var(--oc-edge);background:var(--oc-tint);
  box-shadow:inset 0 calc(6 * var(--q)) var(--oc-accent);color:var(--ink);text-align:left;cursor:pointer;
  font:400 max(13px,calc(13 * var(--q)))/1.35 Pixeloid,monospace}
.oc-profile[data-look=turbo]{--oc-accent:#f2b134;--oc-edge:#f1cd7a;--oc-tint:#fff7e1;--oc-deep:#9a5a0a;--oc-box:#fdedc4;--oc-head:#ffc93a;--oc-head-hi:#fff1a6;
  --oc-line:#ffc93a;--oc-line-hi:#fff1a6}
.oc-profile[data-look=extreme]{--oc-accent:#e0503a;--oc-edge:#efa392;--oc-tint:#fff1ec;--oc-deep:#9b2a1c;--oc-box:#fbdcd2;--oc-head:#e8573c;--oc-head-hi:#ffd23f;
  --oc-line:#e0503a;--oc-line-hi:#fff6ec}
.oc-profile:not(:disabled):hover{filter:brightness(1.03)}
/* The chosen one: a thicker frame in its deep colour, lifted, with a tick (the content stays where it was). */
.oc-profile[aria-checked=true]{border-width:calc(5 * var(--q));border-color:var(--oc-deep);padding:calc(11 * var(--q)) calc(9 * var(--q)) calc(9 * var(--q));
  box-shadow:inset 0 calc(6 * var(--q)) var(--oc-accent),0 calc(4 * var(--q)) 0 #3e211d2e;translate:0 calc(-3 * var(--q))}
.oc-profile:disabled{cursor:not-allowed;opacity:.7}
.oc-check{position:absolute;top:calc(-11 * var(--q));right:calc(-11 * var(--q));display:none;place-items:center;width:calc(28 * var(--q));height:calc(28 * var(--q));
  padding:calc(5 * var(--q));background:var(--oc-deep);border:calc(2 * var(--q)) solid #3e211d}
.oc-profile[aria-checked=true] .oc-check{display:grid}
.oc-profile-head{display:flex;align-items:center;gap:calc(8 * var(--q));min-width:0}
.oc-profile-icon{flex:none;display:grid;width:calc(28 * var(--q));height:calc(28 * var(--q))}
.oc-profile-name{min-width:0;font:700 max(16px,calc(20 * var(--q)))/1.1 Pixeloid,monospace;letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
/* The site's pixel icons, coloured by the card. */
.oc-art{display:block;width:100%;height:100%;image-rendering:pixelated}
.oc-art-edge{fill:#3e211d}
.oc-art-head .oc-art-fill{fill:var(--oc-head)}.oc-art-head .oc-art-accent{fill:var(--oc-head-hi)}
.oc-art-line .oc-art-fill{fill:var(--oc-line)}.oc-art-line .oc-art-accent{fill:var(--oc-line-hi)}
.oc-art-chart .oc-art-fill{fill:var(--oc-accent)}.oc-art-chart .oc-art-accent{fill:#ffffff8c}
.oc-art-tick .oc-art-fill{fill:#fffbe9}
/* The odds as one bar; the best outcome under it; then every row the profile has: a square of the bar's colour, the
   chance, the outcome. */
.oc-bar{display:flex;height:calc(13 * var(--q));border:calc(2 * var(--q)) solid #3e211d;background:#f1e4c3;overflow:hidden}
.oc-bar i{flex:none;width:var(--w);height:100%;box-shadow:inset 0 calc(2 * var(--q)) #ffffff55,inset calc(-1 * var(--q)) 0 #3e211d55}
:is(.oc-bar i,.oc-dot)[data-tone=jackpot],.oc-odd[data-tone=jackpot] .oc-dot{background:#ffd23f}
:is(.oc-bar i,.oc-dot)[data-tone=boost],.oc-odd[data-tone=boost] .oc-dot{background:#6cbf4a}
:is(.oc-bar i,.oc-dot)[data-tone=small],.oc-odd[data-tone=small] .oc-dot{background:#4f9fe0}
:is(.oc-bar i,.oc-dot)[data-tone=none],.oc-odd[data-tone=none] .oc-dot{background:#cdbfa6}
:is(.oc-bar i,.oc-dot)[data-tone=crash],.oc-odd[data-tone=crash] .oc-dot{background:#e0503a}
.oc-best{display:flex;align-items:center;flex-wrap:wrap;column-gap:calc(7 * var(--q));row-gap:calc(2 * var(--q));
  font:700 max(14px,calc(16 * var(--q)))/1.2 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.oc-best-icon{flex:none;display:grid;width:calc(24 * var(--q));height:calc(22 * var(--q))}
.oc-best-result{color:#2f7a2b}
.oc-odds{display:grid;gap:calc(4 * var(--q));margin-bottom:auto}
.oc-odds-title{margin-bottom:calc(2 * var(--q));font:700 max(12px,calc(13 * var(--q)))/1.2 Pixeloid,monospace;color:var(--soft)}
.oc-odd{display:grid;grid-template-columns:auto calc(44 * var(--q)) auto minmax(0,1fr);align-items:baseline;column-gap:calc(6 * var(--q));
  font-size:max(12px,calc(13 * var(--q)));line-height:1.3}
.oc-dot{display:block;width:calc(11 * var(--q));height:calc(11 * var(--q));border:calc(2 * var(--q)) solid #3e211d;align-self:center}
.oc-chance{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.oc-arrow{color:var(--muted)}
.oc-result{min-width:0;overflow-wrap:anywhere}
.oc-odd[data-tone=jackpot] .oc-result{color:#8a5216;font-weight:700}
/* The jackpot row stands out (owner, 10 Oct 2026): a gold band, bigger figures and a soft shine. */
.oc-odd[data-tone=jackpot]{margin:0 calc(-4 * var(--q)) calc(2 * var(--q));padding:calc(3 * var(--q)) calc(4 * var(--q));
  background:linear-gradient(90deg,#fff1b8,#ffe07a 55%,#fff1b8);border:calc(2 * var(--q)) solid #e0a92a;
  box-shadow:0 0 calc(6 * var(--q)) rgba(255,196,40,.55);font-size:max(13px,calc(15 * var(--q)))}
.oc-odd[data-tone=jackpot] .oc-chance,.oc-odd[data-tone=jackpot] .oc-result{color:#7a3e00;text-shadow:0 1px 0 #fff6cf}
.oc-odd[data-tone=jackpot] .oc-result::after{content:" ★";color:#e08a00}
@media (prefers-reduced-motion:no-preference){
  .oc-odd[data-tone=jackpot]{animation:oc-jackpot-shine 1.8s ease-in-out infinite}
  @keyframes oc-jackpot-shine{50%{box-shadow:0 0 calc(12 * var(--q)) rgba(255,196,40,.9)}}
}
.oc-odd[data-tone=crash] .oc-result{color:#b23a1f;font-weight:700}
/* Small: the wear while it runs and the average every profile shares. */
.oc-meta{display:grid;gap:calc(1 * var(--q));font-size:max(12px,calc(12 * var(--q)));line-height:1.35;color:var(--soft)}
.oc-meta small{display:block;font-size:inherit}
.oc-expected{color:var(--muted)}
/* The card's one line, in a box at its bottom (the three boxes line up). */
.oc-note{display:flex;align-items:center;gap:calc(9 * var(--q));min-height:calc(68 * var(--q));padding:calc(7 * var(--q)) calc(10 * var(--q));
  background:var(--oc-box);border:calc(2 * var(--q)) solid var(--oc-edge);font-size:max(12px,calc(12.5 * var(--q)));line-height:1.35}
.oc-note-icon{flex:none;display:grid;width:calc(26 * var(--q));height:calc(28 * var(--q))}
.oc-note-text{min-width:0}
/* Cancel on the left, the main button on the right: the same height, apart. The main one: a coin, then the profile over
   the one price. */
.oc-footer{flex:none;display:flex;justify-content:flex-end;align-items:stretch;gap:calc(12 * var(--q));padding:calc(10 * var(--q)) calc(14 * var(--q)) calc(12 * var(--q));
  background:#fff8e2;border-top:calc(2 * var(--q)) solid #ecd9ae}
.oc-footer>.pcs-button{min-height:max(52px,calc(58 * var(--q)))}
.oc-cancel{min-width:calc(150 * var(--q))}
.oc-go{display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--q));min-width:calc(270 * var(--q));text-align:left}
.oc-go-coin{flex:none;display:grid;width:calc(30 * var(--q));height:calc(30 * var(--q))}
.oc-go-coin img{display:block;width:100%;height:100%;image-rendering:pixelated}
.oc-go-copy{display:grid;gap:calc(2 * var(--q));min-width:0}
.oc-go-label{font-size:max(14px,calc(15 * var(--q)))}
.oc-go-cost{font-size:max(12px,calc(12.5 * var(--q)));color:#6a3a16;white-space:nowrap}
.oc-go:disabled .oc-go-cost{color:#a8987f}
.oc-go:disabled .oc-go-coin{filter:grayscale(1);opacity:.55}

/* ---------------------------------------------------------------- the reveal: a pixel dial, then the outcome */
.oc-reveal{display:grid;justify-items:center;gap:calc(8 * var(--q));padding:calc(4 * var(--q)) 0 calc(2 * var(--q))}
.oc-dial{width:min(100%,calc(330 * var(--q)))}
.oc-dial-svg{display:block;width:100%;height:auto;overflow:visible}
.oc-dial-face{fill:#3e211d}
.oc-tick{fill:#cdbfa6}
.oc-tick[data-tone=jackpot]{fill:#ffd23f}.oc-tick[data-tone=boost]{fill:#6cbf4a}.oc-tick[data-tone=small]{fill:#4f9fe0}
.oc-tick[data-tone=none]{fill:#cdbfa6}.oc-tick[data-tone=crash]{fill:#e0503a}
.oc-needle-edge{fill:#20120b}.oc-needle-fill{fill:#fff4d2}
.oc-hub{fill:#20120b}.oc-hub-core{fill:#ffd23f}
/* The needle waits at the left, revs while data-phase is spin, then rests on the outcome (--oc-angle on .oc-dial). */
.oc-needle{transform-box:view-box;transform-origin:110px 112px;transform:rotate(-90deg)}
.oc-reveal:not([data-phase=wait]) .oc-needle{transform:rotate(var(--oc-angle,0deg))}
.oc-reveal[data-phase=spin] .oc-needle{animation:oc-rev var(--oc-spin,2600ms) cubic-bezier(.2,.7,.3,1) both}
@keyframes oc-rev{0%{transform:rotate(-90deg)}14%{transform:rotate(84deg)}28%{transform:rotate(-66deg)}44%{transform:rotate(72deg)}60%{transform:rotate(-32deg)}
  76%{transform:rotate(48deg)}100%{transform:rotate(var(--oc-angle,0deg))}}
.oc-outcome{display:grid;justify-items:center;gap:calc(4 * var(--q));min-height:calc(62 * var(--q));text-align:center}
.oc-headline{font:700 max(20px,calc(30 * var(--q)))/1.15 Pixeloid,monospace;color:var(--ink);overflow-wrap:anywhere}
.oc-rolling{color:var(--muted);font-size:max(16px,calc(20 * var(--q)));animation:oc-blink 1s steps(2,jump-none) infinite}
.oc-reveal[data-tone=boost] .oc-headline:not(.oc-rolling){color:#2f6a2b;text-shadow:0 calc(2 * var(--q)) #ffd23f}
.oc-reveal[data-tone=none] .oc-headline:not(.oc-rolling){color:#6b5d4f}
.oc-reveal[data-tone=crash] .oc-headline:not(.oc-rolling){color:#b23a1f}
.oc-reveal[data-phase=done] .oc-headline{animation:oc-pop .4s cubic-bezier(.2,1.6,.4,1) both}
.oc-line{font-size:max(13px,calc(14 * var(--q)));line-height:1.4;color:var(--soft)}
.oc-legend{display:grid;gap:calc(3 * var(--q));width:min(100%,calc(380 * var(--q)));padding:calc(6 * var(--q)) calc(10 * var(--q));background:#fffaf0;border:calc(2 * var(--q)) solid #ecd9ae}
.oc-legend-name{font:700 max(12px,calc(12.5 * var(--q)))/1.2 Pixeloid,monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
@keyframes oc-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes oc-blink{0%{opacity:1}100%{opacity:.45}}

/* ---------------------------------------------------------------- the badge of a running overclock */
.oc-badge{display:flex;align-items:center;gap:6px;min-width:0;margin:0;padding:3px 8px;border:2px solid #f0a24e;background:#fff0d2;color:#7a3a0c;
  font:700 12px/1.25 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.oc-badge-icon{width:12px;height:16px}
.oc-badge-label,.oc-badge .oc-countdown{white-space:nowrap}
.oc-badge[data-tone=none],.oc-badge[data-tone=ended]{border-color:#cdbfa6;background:#f6f0e4;color:#6b5d4f}
.oc-badge[data-tone=crash]{border-color:#8f3a2c;background:#c6502a;color:#fff6ec}
.oc-badge[data-tone=crash] .oc-flame-ink{fill:#fff1dc}.oc-badge[data-tone=crash] .oc-flame-core{fill:#ffd27a}
:is(.oc-badge[data-tone=none],.oc-badge[data-tone=ended]) .oc-flame-ink{fill:#a8987f}:is(.oc-badge[data-tone=none],.oc-badge[data-tone=ended]) .oc-flame-core{fill:#efe2c4}
.mypcs-window .oc-badge{gap:calc(6 * var(--p));padding:calc(3 * var(--p)) calc(8 * var(--p));border-width:calc(2 * var(--p));font-size:max(12px,calc(12.5 * var(--p)))}
.mypcs-window .oc-badge-icon{width:max(11px,calc(12 * var(--p)));height:max(14px,calc(16 * var(--p)))}
.oc-dialog .oc-now{justify-self:start;max-width:100%}

/* ---------------------------------------------------------------- MY PCS: a PC card's Overclock button */
/* Two lines: the flame and Overclock, then its price (or, while one runs, the time left). */
.mypcs-oc{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--p));min-width:0;
  min-height:max(38px,calc(44 * var(--p)));padding:calc(2 * var(--p)) calc(6 * var(--p));border:calc(7 * var(--p)) solid transparent;
  border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:var(--ink);font:700 max(13px,calc(13 * var(--p)))/1.1 Pixeloid,monospace;cursor:pointer}
.mypcs-oc-head{display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--p));min-width:0;max-width:100%}
.mypcs-oc-icon{width:max(12px,calc(13 * var(--p)));height:max(16px,calc(17 * var(--p)))}
.mypcs-oc-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mypcs-oc-sub{font-size:max(12px,calc(11.5 * var(--p)));color:var(--soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.mypcs-oc:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed}
.mypcs-oc:disabled .oc-flame-ink{fill:#c9a27a}

/* ---------------------------------------------------------------- Build: the PC overview's Overclock and badge */
.workshop-ui[data-mode=build] .build-oc-action{flex-wrap:wrap;column-gap:8px;row-gap:2px}
.workshop-ui[data-mode=build] .build-pc-action-sub{font-size:max(12px,calc(15 * var(--bs)));opacity:.85;white-space:nowrap;font-variant-numeric:tabular-nums}
.workshop-ui[data-mode=build] .build-oc-badge{margin:calc(-2 * var(--bs)) 0 calc(8 * var(--bs));justify-self:start;width:fit-content;max-width:100%}

/* ---------------------------------------------------------------- phones */
@media(max-width:760px){
  .oc-profiles{grid-template-columns:minmax(0,1fr)}
  .oc-profile{min-height:0}
}
@media(max-width:620px){
  .oc-dialog{--q:1px;width:calc(100vw - 16px)}
  .oc-footer{gap:10px;padding:9px 10px 10px}
  .oc-footer>.oc-cancel{flex:0 0 auto;min-width:96px}
  .oc-footer>.oc-go{flex:1 1 auto;min-width:0;gap:8px;padding-inline:8px}
  .oc-dialog .pcs-dialog-title{font-size:17px;letter-spacing:.02em}
  .oc-go-label{font-size:13px}
  .oc-go-coin{width:26px;height:26px}
  .mypcs-oc{min-height:max(44px,calc(50 * var(--p)))}
}
@media(prefers-reduced-motion:reduce){
  .oc-reveal .oc-needle,.oc-reveal .oc-headline,.oc-rolling{animation:none!important}
  .oc-profile[aria-checked=true]{translate:none}
}