/* MY PCS (my-pcs.mjs): the island's control center in the Power window's cream pixel style (power.css).
   --p scales the whole window: the summary and two rows of four plot cards fit 1440x900 and grow on 1440p/2K screens;
   tablets get two card columns and phones one, and the body scrolls. Text never goes below 12 px (owner, 9 Oct 2026). */
.mypcs-window{--p:clamp(.62px,min(calc((100vw - 24px) / 1300),calc((100dvh - 24px) / 900)),1.35px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(1300 * var(--p)),calc(100vw - 24px));max-width:none;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);margin:auto;padding:0;
  border:calc(12 * var(--p)) solid transparent;border-image:url('../ui/frames/hud.svg') 12 fill stretch;background:none;overflow:hidden;
  color:var(--ink);font:400 max(13px,calc(14 * var(--p)))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.mypcs-window[open]{display:flex;flex-direction:column}
.mypcs-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.mypcs-window [hidden]{display:none!important}
.mypcs-window *{box-sizing:border-box}
/* Content-sized sheet and body (flex-basis auto, never 0%): WebKit resolves a percentage inside a modal <dialog> as 0 and
   the window collapsed to a thin frame on iPhones (9 Oct 2026; island-hall.css). */
.mypcs-sheet{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.mypcs-window :is(h1,h2,h3,p,dl,dd,ul){margin:0}
.mypcs-window ul{list-style:none;padding:0}
.mypcs-window :is(button,summary):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.mypcs-window button{font-family:Pixeloid,monospace}
.mypcs-window button:not(:disabled):hover{filter:brightness(1.04);translate:0 -1px}
.mypcs-window button:not(:disabled):active{translate:0 1px}
.mypcs-icon{display:block;width:100%;height:100%}
.mypcs-icon-edge{fill:#3e211d}.mypcs-icon-fill{fill:#ffd23f}.mypcs-icon-accent{fill:#fff6b0}

/* ---------------------------------------------------------------- header */
.mypcs-head{flex:none;display:flex;align-items:center;gap:calc(14 * var(--p));padding:calc(9 * var(--p)) calc(16 * var(--p));
  background:linear-gradient(105deg,#ffd08b,#ffe6ae);border-bottom:calc(3 * var(--p)) solid #d9a15f}
.mypcs-head-icon{flex:none;width:calc(46 * var(--p));height:calc(46 * var(--p));image-rendering:pixelated;filter:drop-shadow(0 calc(2 * var(--p)) 0 #b8742f)}
.mypcs-head-copy{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(16 * var(--p))}
.mypcs-head h1{font:700 max(22px,calc(34 * var(--p)))/1.1 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.mypcs-head-chip{display:flex;align-items:center;gap:calc(7 * var(--p));font:700 max(12px,calc(15 * var(--p)))/1.2 Pixeloid,monospace;color:#33692f;background:#eef7e2;
  border:calc(2 * var(--p)) solid #a8cf8b;box-shadow:inset 0 calc(2 * var(--p)) #fbfff4;padding:calc(5 * var(--p)) calc(11 * var(--p));white-space:nowrap}
.mypcs-head-chip::before{content:'';width:calc(9 * var(--p));height:calc(9 * var(--p));background:currentColor}
.mypcs-head-chip[data-tone=warn]{color:#8a3c12;background:#fff1dc;border-color:#ebb07c;box-shadow:inset 0 calc(2 * var(--p)) #fffaf0}
.mypcs-head-chip[data-tone=off]{color:#6b5d4f;background:#f6f0e4;border-color:#cdbfa6}
.mypcs-close{flex:none;display:grid;place-items:center;width:calc(48 * var(--p));height:calc(48 * var(--p));min-width:36px;min-height:36px;padding:calc(10 * var(--p));
  border:0;background:url('../ui/frames/picker-close.svg') center/100% 100% no-repeat;color:var(--ink);cursor:pointer}
.mypcs-close svg{width:100%;height:100%;shape-rendering:crispEdges}

/* ---------------------------------------------------------------- layout */
.mypcs-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.mypcs-content{display:grid;gap:calc(10 * var(--p));padding:calc(10 * var(--p)) calc(16 * var(--p)) calc(14 * var(--p))}

/* ---------------------------------------------------------------- the island at a glance */
.mypcs-summary{display:grid;grid-template-columns:1.22fr 1fr 1.2fr 1fr 1.08fr;gap:calc(10 * var(--p))}
.mypcs-tile{display:flex;align-items:center;gap:calc(10 * var(--p));min-width:0;padding:calc(7 * var(--p)) calc(10 * var(--p));
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
.mypcs-tile-icon{flex:none;width:calc(40 * var(--p));height:calc(40 * var(--p));image-rendering:pixelated}
.mypcs-tile-glyph{padding:calc(3 * var(--p)) calc(5 * var(--p))}
.mypcs-tile-copy{display:grid;min-width:0;line-height:1.25}
.mypcs-tile-label{font-size:max(12px,calc(11 * var(--p)));letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypcs-tile-value{display:flex;align-items:baseline;gap:calc(5 * var(--p));min-width:0;font:700 max(17px,calc(23 * var(--p)))/1.15 Pixeloid,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.mypcs-tile-number{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mypcs-tile-unit{flex:none;font-size:max(12px,calc(13 * var(--p)));color:var(--soft)}
/* One or two short lines: the reasons, the free watts, the kWh. */
.mypcs-tile-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:max(12px,calc(11.5 * var(--p)));line-height:1.3;color:var(--soft)}
/* The island's H/s is the hero number: a sunny tile. */
.mypcs-tile[data-key=hash]{border-image:url('../ui/frames/tile.svg') 8 stretch;background:linear-gradient(160deg,#fff7d6,#ffe4a3) padding-box}
.mypcs-tile[data-key=hash] .mypcs-tile-value{font-size:max(19px,calc(27 * var(--p)));color:#4a2410}
.mypcs-tile[data-key=hash] .mypcs-tile-unit{color:#8a5216}
.mypcs-tile[data-key=hash] .mypcs-tile-detail{color:#8a5216;font-weight:700}
.mypcs-tile-meter{display:block;height:calc(8 * var(--p));margin:calc(3 * var(--p)) 0 calc(2 * var(--p));border:calc(2 * var(--p)) solid #5c382c;background:#f1e4c3;overflow:hidden}
.mypcs-tile-meter i{display:block;height:100%;background:#7cc35b;box-shadow:inset 0 calc(2 * var(--p)) #ffffff55}
.mypcs-tile[data-waiting=true] .mypcs-tile-meter i{background:#e9b33a}
/* The part of a line that asks for attention ("1 PC waits"). */
.mypcs-tile-detail b{font-weight:700;color:#7a4a12}
.mypcs-tile[data-key=energy]:is([data-tone=low],[data-tone=critical]) .mypcs-tile-value{color:#a8521a}
.mypcs-tile[data-key=energy][data-tone=empty] .mypcs-tile-value{color:#b23a1f}
/* Care all PCs (9 Oct 2026): one row under the tiles, its words left and its button with the total right. */
.mypcs-care-bar{grid-column:1/-1;display:flex;align-items:center;gap:calc(10 * var(--p));min-width:0;padding:calc(5 * var(--p)) calc(6 * var(--p)) calc(5 * var(--p)) calc(12 * var(--p));
  background:#eef7e2;border:calc(2 * var(--p)) solid #a8cf8b;box-shadow:inset 0 calc(2 * var(--p)) #fbfff4}
.mypcs-care-icon{flex:none;width:max(18px,calc(24 * var(--p)));height:max(18px,calc(24 * var(--p)))}
.mypcs-care-icon .mypcs-icon-fill{fill:#7cc35b}.mypcs-care-icon .mypcs-icon-accent{fill:#e9ffd8}
.mypcs-care-copy{flex:1;min-width:0;display:grid;gap:calc(2 * var(--p));line-height:1.3}
.mypcs-care-title{font:700 max(13px,calc(14 * var(--p)))/1.25 Pixeloid,monospace;color:#33692f}
/* PCs that need care now: the attention colours of the header's chip. */
.mypcs-care-bar[data-tone=due]{background:#fff1dc;border-color:#ebb07c;box-shadow:inset 0 calc(2 * var(--p)) #fffaf0}
.mypcs-care-bar[data-tone=due] .mypcs-care-title{color:#8a3c12}
.mypcs-care-bar[data-tone=due] .mypcs-care-icon .mypcs-icon-fill{fill:#f0913a}.mypcs-care-bar[data-tone=due] .mypcs-care-icon .mypcs-icon-accent{fill:#ffe0b8}
.mypcs-care-jobs{font-size:max(12px,calc(12 * var(--p)));color:var(--soft)}
.mypcs-care-rate{font-size:max(12px,calc(11.5 * var(--p)));color:var(--muted)}
.mypcs-care-jobs span{white-space:nowrap}
.mypcs-care-all{flex:none;min-width:calc(190 * var(--p));padding-inline:calc(12 * var(--p))}

/* ---------------------------------------------------------------- section titles */
.mypcs-toolbar{display:flex;align-items:center;gap:calc(10 * var(--p));flex-wrap:wrap}
.mypcs-section-title{flex:1;display:flex;align-items:center;gap:calc(8 * var(--p));font:700 max(14px,calc(16 * var(--p)))/1.3 Pixeloid,monospace;
  background:linear-gradient(90deg,#ffdaa0,#ffedc3);padding:calc(6 * var(--p)) calc(11 * var(--p));clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.mypcs-count{font-size:max(12px,calc(12 * var(--p)));padding:calc(2 * var(--p)) calc(7 * var(--p));background:#3e211d;color:#fff4d2;white-space:nowrap}
/* The result of a move, a store or a place, above the plots. */
.mypcs-flash{padding:calc(7 * var(--p)) calc(12 * var(--p));font-size:max(13px,calc(13 * var(--p)));line-height:1.4;text-align:center}
.mypcs-flash[data-tone=success]{background:#e8f1d9;color:#45632c;border:calc(2 * var(--p)) solid #b9d69a}
.mypcs-flash[data-tone=error]{background:#ffe5d5;color:#873e2d;border:calc(2 * var(--p)) solid #f0b98d}

/* ---------------------------------------------------------------- wallet payments */
.mypcs-content>.transaction-status{margin:0}
.mypcs-waiting{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(8 * var(--p)) calc(14 * var(--p));padding:calc(8 * var(--p)) calc(12 * var(--p));
  background:#deeffa;border:calc(2 * var(--p)) solid #acd0e9;color:#244c70;font-size:max(13px,calc(12.5 * var(--p)));text-align:center}

/* ---------------------------------------------------------------- the plots, in plot order: four a row */
.mypcs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:calc(10 * var(--p)) calc(12 * var(--p))}
.mypcs-card{position:relative;display:flex;flex-direction:column;gap:calc(6 * var(--p));min-width:0;padding:calc(7 * var(--p)) calc(9 * var(--p)) calc(8 * var(--p));
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}
/* A PC that needs something is ringed in its state's colour. */
.mypcs-card:is([data-status=care],[data-status=waiting],[data-status=energy],[data-status=build],[data-status=stopped]){outline:calc(3 * var(--p)) solid var(--ring);outline-offset:calc(-2 * var(--p))}
.mypcs-card[data-status=care]{--ring:#ec8a45}
.mypcs-card:is([data-status=waiting],[data-status=build]){--ring:#e2b45a}
.mypcs-card:is([data-status=energy],[data-status=stopped]){--ring:#dc6a4c}
.mypcs-card-head{display:flex;align-items:center;gap:calc(7 * var(--p));min-width:0}
.mypcs-tag{flex:none;padding:calc(4 * var(--p)) calc(7 * var(--p)) calc(3 * var(--p));background:var(--pc,#f0913a);border:calc(2 * var(--p)) solid #3e211d;
  box-shadow:inset 0 calc(3 * var(--p)) #ffffff47,inset 0 calc(-3 * var(--p)) #00000024;color:#20120b;font:700 max(12px,calc(13 * var(--p)))/1 Pixeloid,monospace;white-space:nowrap;text-shadow:0 1px #ffffff66}
.mypcs-card-name{flex:1;min-width:0;font:700 max(13px,calc(15 * var(--p)))/1.2 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypcs-pill{flex:none;display:flex;align-items:center;gap:calc(5 * var(--p));max-width:50%;padding:calc(4 * var(--p)) calc(6 * var(--p));border:calc(2 * var(--p)) solid;
  font:700 max(12px,calc(11.5 * var(--p)))/1 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypcs-led{flex:none;width:calc(7 * var(--p));height:calc(7 * var(--p));background:currentColor}
.mypcs-pill[data-tone=good]{color:#2f6a2b;background:#e5f3d4;border-color:#a8cf8b}
.mypcs-pill[data-tone=good] .mypcs-led{background:#45b33b;box-shadow:0 0 calc(4 * var(--p)) #6fe061;animation:mypcs-blink 1.6s steps(2) infinite}
.mypcs-pill[data-tone=care]{color:#8a3c12;background:#ffe6d2;border-color:#f0a777}
.mypcs-pill[data-tone=wait]{color:#7a4a12;background:#fff0c9;border-color:#e2b866}
.mypcs-pill[data-tone=bad]{color:#873023;background:#ffe1d6;border-color:#e39a83}
.mypcs-pill[data-tone=off]{color:#6b5d4f;background:#efe9de;border-color:#cdbfa6}

/* Picture, H/s, watts and temperature, and the share of the island. */
.mypcs-card-main{display:grid;grid-template-columns:calc(104 * var(--p)) minmax(0,1fr);gap:calc(10 * var(--p));align-items:center}
.mypcs-art{position:relative;isolation:isolate;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;width:100%;padding:0;cursor:pointer;
  background:linear-gradient(180deg,#bfe1fb 0%,#dff0fc 52%,#fbf3dc 100%);border:calc(2 * var(--p)) solid #b9d6ec}
.mypcs-window .mypcs-art:not(:disabled):hover{translate:none;filter:none;border-color:#7fb3dc}
.mypcs-art:hover .mypcs-art-img{scale:1.05}
.mypcs-art::before,.mypcs-art::after{content:'';position:absolute;left:8%;right:8%;border-radius:50%;pointer-events:none}
.mypcs-art::after{z-index:-2;bottom:3%;height:26%;background:radial-gradient(closest-side,#9a6a40 0 80%,#73492b 84% 96%,transparent 98%)}
.mypcs-art::before{z-index:-1;bottom:9%;height:26%;background:radial-gradient(closest-side,#c3e48c 0 70%,#a6d16b 74% 88%,#86b450 90% 96%,transparent 98%)}
.mypcs-art-img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;padding:calc(3 * var(--p)) calc(4 * var(--p)) calc(9 * var(--p));
  user-select:none;filter:drop-shadow(0 calc(2 * var(--p)) 0 #3e211d22);transition:opacity .3s,scale .2s}
.mypcs-art[data-prebuilt-art=loading] .mypcs-art-img{opacity:.85}
.mypcs-art[data-empty=true] .mypcs-art-img{visibility:hidden}
/* A PC that does not mine stands grey on its little island. */
.mypcs-art:is([data-status=off],[data-status=waiting],[data-status=energy],[data-status=build],[data-status=stopped]) .mypcs-art-img{filter:grayscale(.9) brightness(1.06);opacity:.62}
.mypcs-hash{display:grid;min-width:0;gap:calc(4 * var(--p));line-height:1.2}
.mypcs-hash-line{display:flex;align-items:baseline;gap:calc(6 * var(--p));min-width:0}
.mypcs-hash-value{min-width:0;font:700 max(17px,calc(23 * var(--p)))/1.15 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mypcs-hash-unit{font-size:max(12px,calc(12 * var(--p)));color:var(--soft)}
.mypcs-card:not([data-status=mining]):not([data-status=care]) .mypcs-hash-value{color:#9b8a76}
.mypcs-hash-loss{flex:none;padding:calc(2 * var(--p)) calc(4 * var(--p));font:700 max(12px,calc(11 * var(--p)))/1 Pixeloid,monospace;color:#6b4a33;background:#f3e6c8;cursor:help}
.mypcs-hash-loss[data-tone=bad]{color:#fff6ec;background:#c6502a}
.mypcs-facts{font:700 max(12px,calc(12.5 * var(--p)))/1.2 Pixeloid,monospace;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.mypcs-facts[data-tone=throttling]{color:#b23a1f}
.mypcs-facts[data-tone=warm]{color:#a8641a}
.mypcs-hash-idle{font-size:max(12px,calc(12 * var(--p)));color:var(--soft)}
.mypcs-share{display:grid;gap:calc(2 * var(--p))}
.mypcs-share small{font-size:max(12px,calc(11.5 * var(--p)));color:var(--soft)}
.mypcs-share-bar{display:block;height:calc(8 * var(--p));border:calc(2 * var(--p)) solid #5c382c;background:#f1e4c3;overflow:hidden}
.mypcs-share-bar i{display:block;height:100%;min-width:calc(2 * var(--p));background:var(--pc,#f0913a);box-shadow:inset 0 calc(2 * var(--p)) #ffffff55}

/* Condition: paste, fans, parts, 100% = like new. */
.mypcs-meters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--p))}
/* Its name on the first line, its percent and bar on the second: nothing is cut at 12 px. */
.mypcs-meter{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label label" "value bar";align-items:center;gap:calc(2 * var(--p)) calc(5 * var(--p));min-width:0}
.mypcs-meter-label{grid-area:label;font-size:max(12px,calc(10.5 * var(--p)));text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mypcs-meter-value{grid-area:value;font:700 max(12px,calc(12 * var(--p)))/1.1 Pixeloid,monospace;font-variant-numeric:tabular-nums}
.mypcs-meter-bar{grid-area:bar;display:block;min-width:calc(16 * var(--p));height:calc(8 * var(--p));border:calc(2 * var(--p)) solid #6b4a33;background:#f1e4c3;overflow:hidden}
.mypcs-meter-bar i{display:block;height:100%;background:#7cc35b}
.mypcs-meter[data-tone=warn] .mypcs-meter-bar i{background:#e9b33a}
.mypcs-meter[data-tone=bad] .mypcs-meter-bar i{background:#e0603a}
.mypcs-meter[data-tone=bad] .mypcs-meter-value{color:#b23a1f}
.mypcs-meter:not([data-tone]) .mypcs-meter-value{color:#a8987f}
/* Maintenance v2 (9 Oct 2026): what a component's neglect costs the PC's speed, a chip under its bar (a narrow card
   has no room beside the name). */
.mypcs-meter[data-loss=true]{grid-template-areas:"label label" "value bar" "loss loss"}
.mypcs-meter-loss{grid-area:loss;justify-self:start;padding:0 calc(3 * var(--p));font:700 max(12px,calc(11 * var(--p)))/1.25 Pixeloid,monospace;
  color:#7a4a12;background:#f6e3b8;white-space:nowrap;cursor:help}
.mypcs-meter-loss[data-tone=bad]{color:#fff6ec;background:#c6502a}

/* What it needs, its main button, then its tools. */
.mypcs-detail{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:max(12px,calc(12 * var(--p)));line-height:1.35;color:var(--soft);min-height:calc(2 * 1.35em)}
.mypcs-detail[data-tone=care]{color:#8a3c12}
.mypcs-detail[data-tone=wait]{color:#7a4a12}
.mypcs-detail[data-tone=bad]{color:#873023}
.mypcs-actions{display:flex;gap:calc(6 * var(--p))}
.mypcs-actions>*{flex:1 1 0;min-width:0}
.mypcs-primary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--p));min-height:max(38px,calc(44 * var(--p)));padding:calc(2 * var(--p)) calc(5 * var(--p));
  border:calc(7 * var(--p)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch;background:none;color:#3a1c08;
  font:700 max(13px,calc(13 * var(--p)))/1.1 Pixeloid,monospace;text-align:center;cursor:pointer;text-shadow:0 calc(1 * var(--p)) #fff3b066}
.mypcs-primary-label{max-width:100%;overflow-wrap:anywhere}
.mypcs-primary-cost{font-size:max(12px,calc(11.5 * var(--p)));color:#6a3a16;white-space:nowrap}
.mypcs-primary:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed;text-shadow:none}
.mypcs-primary:disabled .mypcs-primary-cost{color:#a8987f}
/* Care and Care all PCs: gold (the main button's look) when they do a fix that is due now, else quiet cream; a PC's quiet
   Care is one slim line, "Care · 2.1K X ($0.42)". */
:is(.mypcs-care,.mypcs-care-all)[data-urgent=false]:not(:disabled){border-image-source:url('../ui/frames/cream.svg');color:var(--ink);text-shadow:none}
:is(.mypcs-care,.mypcs-care-all)[data-urgent=false]:not(:disabled) .mypcs-primary-cost{color:var(--soft)}
.mypcs-care[data-urgent=false]{flex-direction:row;flex-wrap:wrap;column-gap:calc(6 * var(--p));min-height:max(34px,calc(38 * var(--p)))}
.mypcs-care[data-urgent=false] .mypcs-primary-cost::before{content:'·';margin-right:calc(6 * var(--p))}
.mypcs-secondary{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(12.5 * var(--p)))/1.1 Pixeloid,monospace;cursor:pointer}
/* Open in Build, Move and Store: three clear buttons, always in the same place at the bottom of a PC card. */
.mypcs-tools{display:grid;grid-template-columns:repeat(var(--tools,3),minmax(0,1fr));gap:calc(5 * var(--p));margin-top:auto}
.mypcs-tools[data-count="1"]{--tools:1}.mypcs-tools[data-count="2"]{--tools:2}
/* The icon above its word, so the three fit a quarter of the window. */
.mypcs-tool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(3 * var(--p));min-width:0;min-height:max(44px,calc(50 * var(--p)));padding:calc(2 * var(--p)) calc(2 * var(--p));
  border:calc(6 * var(--p)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;color:var(--ink);
  font:700 max(12px,calc(12.5 * var(--p)))/1.1 Pixeloid,monospace;cursor:pointer;white-space:nowrap}
.mypcs-tool:disabled{opacity:.55;cursor:not-allowed}
.mypcs-tool-icon{flex:none;width:max(16px,calc(20 * var(--p)));height:max(16px,calc(20 * var(--p)));image-rendering:pixelated}
.mypcs-tool-glyph{width:max(16px,calc(19 * var(--p)));height:max(13px,calc(16 * var(--p)))}
.mypcs-tool[data-tool=move] .mypcs-icon-fill{fill:#4f88d8}.mypcs-tool[data-tool=move] .mypcs-icon-accent{fill:#bfe1fb}
.mypcs-tool[data-tool=store] .mypcs-icon-fill{fill:#c99461}.mypcs-tool[data-tool=store] .mypcs-icon-accent{fill:#fff4d2}
.mypcs-tool-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.mypcs-notice{padding:calc(5 * var(--p)) calc(8 * var(--p));font-size:max(12px,calc(11.5 * var(--p)));line-height:1.4;text-align:center}
.mypcs-notice[data-tone=success]{background:#e8f1d9;color:#45632c}
.mypcs-notice[data-tone=error]{background:#ffe5d5;color:#873e2d}

/* Empty desks and the plots not open yet: quiet cards with a dashed spot and their one way forward. */
.mypcs-slot{gap:calc(8 * var(--p));min-height:calc(200 * var(--p))}
.mypcs-slot .mypcs-card-name{color:var(--soft)}
.mypcs-slot[data-kind=plot] .mypcs-tag{background:#e8dcc2;color:#5d4a36}
.mypcs-slot[data-state=locked]{opacity:.82}
.mypcs-slot[data-state=locked] .mypcs-tag{background:#d9d1c2}
.mypcs-slot[data-state=building] .mypcs-tag{background:#ffd23f}
.mypcs-slot[data-state=available] .mypcs-tag{background:#c3e48c}
.mypcs-slot-middle{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(8 * var(--p));padding:calc(6 * var(--p)) 0;text-align:center}
.mypcs-slot-art{flex:none;display:grid;place-items:center;width:calc(72 * var(--p));height:calc(72 * var(--p));
  background:repeating-linear-gradient(-45deg,#fff4dc 0 calc(6 * var(--p)),#fbe8c4 calc(6 * var(--p)) calc(12 * var(--p)));border:calc(2 * var(--p)) dashed #c99461}
.mypcs-slot-icon{width:calc(34 * var(--p));height:calc(36 * var(--p))}
.mypcs-slot[data-kind=empty] .mypcs-icon-fill{fill:#7cc35b}.mypcs-slot[data-kind=empty] .mypcs-icon-accent{fill:#d7f5c3}
.mypcs-slot[data-kind=plot] .mypcs-icon-fill{fill:#8a5a32}.mypcs-slot[data-kind=plot] .mypcs-icon-accent{fill:#f0913a}
.mypcs-slot[data-state=locked] .mypcs-icon-fill{fill:#8f7d68}.mypcs-slot[data-state=locked] .mypcs-icon-accent{fill:#efe2c4}
.mypcs-slot-copy{display:grid;gap:calc(3 * var(--p));min-width:0;font-size:max(12px,calc(12 * var(--p)));line-height:1.4;color:var(--soft)}
.mypcs-slot-copy p:first-child{color:var(--ink);font-weight:700}
.mypcs-countdown{font:700 max(14px,calc(16 * var(--p)))/1.2 Pixeloid,monospace;color:#7a4a12!important;font-variant-numeric:tabular-nums}
.mypcs-plot-bar{display:block;width:100%;min-width:calc(90 * var(--p));height:calc(9 * var(--p));border:calc(2 * var(--p)) solid #5c382c;background:#f1e4c3;overflow:hidden}
.mypcs-plot-bar i{display:block;height:100%;background:#ffd23f;box-shadow:inset 0 calc(2 * var(--p)) #ffffff66}
.mypcs-slot-actions{display:grid;gap:calc(6 * var(--p))}
.mypcs-slot-actions>button{width:100%}

/* ---------------------------------------------------------------- the whole PCs kept in the inventory */
.mypcs-stored{display:grid;gap:calc(9 * var(--p))}
.mypcs-stored .mypcs-section-title{background:linear-gradient(90deg,#cfe6f7,#e9f4fc)}
.mypcs-stored-empty{padding:calc(8 * var(--p)) calc(12 * var(--p));font-size:max(13px,calc(13 * var(--p)));line-height:1.45;color:var(--soft);background:#fffaf0;border:calc(2 * var(--p)) dashed #ecd9ae}
.mypcs-stored .pcs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------------------------------------------------------------- Care all PCs' confirm (care-all-ui.mjs, a .pcs-dialog) */
.care-dialog ul{margin:0;padding:0;list-style:none}
.care-rows{display:grid;gap:calc(6 * var(--q))}
.care-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(10 * var(--q));padding:calc(6 * var(--q)) calc(10 * var(--q));
  background:#fffaf0;border:calc(2 * var(--q)) solid #ecd9ae}
.care-row-copy{display:grid;gap:calc(2 * var(--q));min-width:0}
.care-row-name{font:700 max(13px,calc(14.5 * var(--q)))/1.25 Pixeloid,monospace;overflow-wrap:anywhere}
.care-row-jobs{font-size:max(12px,calc(12.5 * var(--q)));line-height:1.35;color:var(--soft)}
.care-row-jobs span{white-space:nowrap}
.care-row-cost{font:700 max(12px,calc(13 * var(--q)))/1.2 Pixeloid,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}
.care-total{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12 * var(--q));padding:calc(7 * var(--q)) calc(12 * var(--q));
  background:#eef7e2;border:calc(2 * var(--q)) solid #a8cf8b;font-size:max(13px,calc(14 * var(--q)))}
.care-total-cost{font:700 max(14px,calc(16 * var(--q)))/1.2 Pixeloid,monospace;white-space:nowrap;font-variant-numeric:tabular-nums}

/* The bottom navigation's MY PCS button: MARKET and INVENTORY's look (apricot.css), its own sprite. Its label reads
   MY PCS like the others, and My PCs while the Inventory titles them (workshop-ui.mjs render). Since 9 Oct 2026 the
   bar has no BUILD (owner): its three buttons centre themselves (one grid column each). */
.workshop-ui .game-nav .mypcs-nav .pixel-icon{image-rendering:pixelated}
.workshop-ui .game-nav .mypcs-nav-label{text-transform:uppercase}
.workshop-ui[data-mode=inventory] .game-nav .mypcs-nav-label{text-transform:none}
/* Three buttons share a phone's width: the row takes all the width the layout allows and the pixel labels sit a little
   tighter, so INVENTORY stays inside its frame on the narrowest phones; a 320 px phone gets a smaller label. The
   Inventory's own font already fits. */
@media(max-width:420px){
  .workshop-ui[data-mode] .game-nav{width:calc(100% - 16px)}
  .workshop-ui[data-mode]:not([data-mode=inventory]) .game-nav button{letter-spacing:-.5px}
}
@media(max-width:340px){
  .workshop-ui[data-mode]:not([data-mode=inventory]) .game-nav button{font-size:8.5px}
}

@keyframes mypcs-blink{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .mypcs-window *,.mypcs-window *::before,.mypcs-window *::after{animation:none!important;transition:none!important}
  .mypcs-window button{translate:none!important}
}

/* ---------------------------------------------------------------- tablets: two columns, the body scrolls */
@media(max-width:1000px),(max-aspect-ratio:4/5){
  .mypcs-window{--p:clamp(.8px,calc((100vw - 16px) / 660),1.2px);width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .mypcs-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mypcs-tile[data-key=hash]{grid-column:1/-1}
  .mypcs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mypcs-stored .pcs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---------------------------------------------------------------- phones: one column of cards */
@media(max-width:620px){
  .mypcs-window{--p:clamp(.82px,calc((100vw - 16px) / 392),1.1px);border-width:9px}
  .mypcs-head{padding:calc(7 * var(--p)) calc(10 * var(--p));gap:calc(10 * var(--p))}
  .mypcs-head-icon{width:calc(38 * var(--p));height:calc(38 * var(--p))}
  .mypcs-head h1{font-size:max(22px,calc(25 * var(--p)))}
  .mypcs-head-chip{font-size:max(12px,calc(12 * var(--p)));padding:calc(3 * var(--p)) calc(8 * var(--p))}
  .mypcs-content{padding:calc(9 * var(--p)) calc(9 * var(--p)) calc(12 * var(--p));gap:calc(9 * var(--p))}
  .mypcs-summary{gap:calc(7 * var(--p))}
  .mypcs-tile{gap:calc(7 * var(--p));padding:calc(5 * var(--p)) calc(7 * var(--p))}
  .mypcs-tile-icon{width:calc(30 * var(--p));height:calc(30 * var(--p))}
  .mypcs-tile:not([data-key=hash]) .mypcs-tile-icon{display:none}
  .mypcs-tile-value{font-size:max(17px,calc(18 * var(--p)))}
  .mypcs-tile[data-key=hash] .mypcs-tile-value{font-size:max(19px,calc(24 * var(--p)))}
  .mypcs-tile-detail{-webkit-line-clamp:3}
  .mypcs-grid,.mypcs-stored .pcs-grid{grid-template-columns:minmax(0,1fr);gap:calc(10 * var(--p))}
  .mypcs-card-main{grid-template-columns:calc(118 * var(--p)) minmax(0,1fr)}
  /* Touch-sized buttons. */
  .mypcs-primary,.mypcs-secondary,.mypcs-care[data-urgent=false]{min-height:max(44px,calc(50 * var(--p)))}
  .mypcs-tool{min-height:44px}
  .mypcs-detail{min-height:0}
  /* An empty desk or a plot not open yet: its spot beside its words, a short card. */
  .mypcs-slot{min-height:0}
  .mypcs-slot-middle{flex-direction:row;justify-content:flex-start;gap:calc(14 * var(--p));padding:calc(4 * var(--p)) calc(4 * var(--p));text-align:left}
  .mypcs-slot-art{width:calc(60 * var(--p));height:calc(60 * var(--p))}
  .mypcs-slot-icon{width:calc(28 * var(--p));height:calc(30 * var(--p))}
  .mypcs-slot-copy{flex:1}
  /* Readable small print at 375 px. */
  .mypcs-tile-label,.mypcs-meter-label{font-size:max(12px,calc(11.5 * var(--p)))}
  .mypcs-tile-detail,.mypcs-detail,.mypcs-hash-idle,.mypcs-share small,.mypcs-slot-copy,.mypcs-facts{font-size:max(12.5px,calc(12.5 * var(--p)))}
  .mypcs-primary-cost{font-size:max(12px,calc(12 * var(--p)))}
  /* Care all PCs: its words over the full-width button. */
  .mypcs-care-bar{flex-wrap:wrap;padding:calc(7 * var(--p)) calc(9 * var(--p))}
  .mypcs-care-copy{flex:1 1 calc(100% - 40px)}
  .mypcs-care-all{flex:1 1 100%;min-width:0}
  /* The confirm's price goes under the PC's words. */
  .care-row{grid-template-columns:auto minmax(0,1fr)}
  .care-row-cost{grid-column:2;justify-self:start}
}