/* Island world overlays (island-status.mjs): pixel speech bubbles over the owner's
   desks with each setup's top issue, and a visitor's read-only setup inspector. */
.island-status-layer {position:fixed;inset:0;pointer-events:none;z-index:19}
.island-status-layer[hidden],.island-status-bubble[hidden],.island-inspector[hidden] {display:none!important}
.island-status-bubble {--edge:#6d4a2c;--fill:#fff7db;--ink:#3b2418;--icon:#5c3a21;--accent:#e5482a;--shade:#3a241860;
  position:absolute;left:0;top:0;display:block;margin:0;padding:0 0 9px;border:0;background:none;color:var(--ink);font:700 11px/1 Pixeloid,monospace;
  cursor:pointer;pointer-events:auto;touch-action:manipulation;will-change:transform;filter:drop-shadow(0 3px 0 var(--shade))}
/* Notched pixel frame: four offset shadows draw a 3px border that skips the corners. */
.island-status-face {position:relative;display:flex;align-items:center;gap:5px;box-sizing:border-box;min-height:22px;padding:3px 7px 3px 6px;background:var(--fill);white-space:nowrap;
  box-shadow:0 -3px 0 0 var(--edge),0 3px 0 0 var(--edge),-3px 0 0 0 var(--edge),3px 0 0 0 var(--edge),inset 0 2px #ffffff80;animation:island-status-bob 3.2s ease-in-out infinite}
.island-status-tail {--tail-x:-50%;position:absolute;left:calc(50% + var(--tail-shift,0px));bottom:0;display:block;width:18px;height:9px;transform:translateX(-50%);animation:island-status-bob 3.2s ease-in-out infinite}
.island-status-tail-edge {fill:var(--edge)}
.island-status-tail-fill {fill:var(--fill)}
.island-status-icon {display:block;flex:none;width:auto;height:13px;image-rendering:pixelated}
.island-status-ink {fill:var(--icon)}
.island-status-accent {fill:var(--accent)}
.island-status-label {display:block;padding-top:1px;letter-spacing:.02em}
.island-status-bubble[data-tone=alert] {--edge:#8f3a2c;--fill:#ffe3d6;--ink:#6e2219;--icon:#b53a26;--accent:#ffd27a}
.island-status-bubble[data-tone=hot] {--edge:#a24a1e;--fill:#ffe9cf;--ink:#6a3112;--icon:#6a3112;--accent:#e5482a}
.island-status-bubble[data-tone=warn] {--edge:#8a5a1c;--fill:#fff1c4;--ink:#5a3a12;--icon:#c47a10;--accent:#ffd27a}
.island-status-bubble[data-tone=care] {--edge:#6d5a2e;--fill:#fdf6dc;--ink:#4a3a1c;--icon:#5c4a2a;--accent:#7fb7cf}
/* A running overclock (9 Oct 2026): a small warm flame with the PC's bonus. */
.island-status-bubble[data-tone=boost] {--edge:#9a4a12;--fill:#fff0d2;--ink:#6a3112;--icon:#e0603a;--accent:#ffd23f}
.island-status-bubble[data-tone=alert] .island-status-icon {animation:island-status-pulse 1.4s steps(2,jump-none) infinite}
.island-status-bubble:hover .island-status-face,.island-status-bubble:focus-visible .island-status-face {background:#fffdf0}
.island-status-bubble:focus-visible {outline:none}
.island-status-bubble:focus-visible .island-status-face {box-shadow:0 -3px 0 0 #2c6d86,0 3px 0 0 #2c6d86,-3px 0 0 0 #2c6d86,3px 0 0 0 #2c6d86}
/* The full issue and its fix, above the bubble on hover or keyboard focus. */
.island-status-tip {position:absolute;left:50%;bottom:calc(100% + 7px);display:flex;flex-direction:column;align-items:center;gap:3px;box-sizing:border-box;max-width:min(340px,calc(100vw - 24px));
  padding:6px 9px 7px;border:2px solid var(--edge);border-radius:3px;background:#fff7db;box-shadow:0 2px 0 #3a241855;color:var(--ink);
  font:700 12px/1.3 Pixeloid,monospace;text-align:center;white-space:nowrap;transform:translateX(-50%);pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease}
.island-status-tip span {font-weight:400}
.island-status-tip strong {color:#2c5d73}
.island-status-bubble:hover .island-status-tip,.island-status-bubble:focus-visible .island-status-tip {opacity:1;visibility:visible}
/* Next-job bubbles over the next plot, the POWER yard and the Island Hall while the builder is free
   (island-status.mjs jobBubbleNode, placed by personal-island.mjs): the same pixel frame and tail, two lines. */
.island-job-bubble {transform:translate(-50%,-100%);--edge:#2f6b52;--fill:#effbe6;--ink:#1f4a37;--icon:#2f7d4a;--accent:#f2c14e}
.island-job-bubble[data-tone=locked] {--edge:#6e6457;--fill:#f3eee5;--ink:#4b443b;--icon:#7a6f63;--accent:#d8c3a1}
.island-job-bubble .island-status-face {gap:6px;padding:4px 8px 4px 7px}
.island-job-bubble .island-status-icon {height:15px}
.island-job-text {display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding-top:1px}
.island-job-bubble .island-status-label {padding:0;font-size:12px}
.island-job-sub {display:block;font:400 10px/1 Pixeloid,monospace;opacity:.85}
.island-job-bubble:hover .island-status-face,.island-job-bubble:focus-visible .island-status-face {background:#ffffff}
@keyframes island-status-bob {0%,100% {transform:translate(var(--tail-x,0),0)} 50% {transform:translate(var(--tail-x,0),-2px)}}
@keyframes island-status-pulse {0% {opacity:1} 100% {opacity:.45}}
@media(max-width:700px){.island-status-tip{white-space:normal;width:max-content}}
@media(prefers-reduced-motion:reduce){.island-status-face,.island-status-tail,.island-status-bubble[data-tone=alert] .island-status-icon{animation:none}.island-status-tip{transition:none}}

/* A visited island's PC (island-status.mjs SetupInspector; owner brief, 7 Oct 2026): the camera flies to it, then
   this summary slides in on the right (a bottom sheet on phones): H/s, power and temperature as three tiles, then
   a readable parts list. The one way out is "← Go back" at the top left, where the LEADERBOARD toggle stands. */
/* The frame's border with a flat cream inside (a stretched fill would put the frame's lower shade under the list). */
.island-inspector {position:fixed;top:20px;right:22px;z-index:58;display:flex;flex-direction:column;box-sizing:border-box;width:clamp(340px,27vw,520px);
  max-height:calc(100dvh - 40px);border:9px solid transparent;border-image:url('../ui/frames/cream.svg') 12 stretch;background:#fff8e2 padding-box;color:#493127;
  font:400 14px/1.45 Pixeloid,monospace;font-synthesis:none;pointer-events:auto;filter:drop-shadow(0 7px 0 #34273755)}
.island-inspector:focus {outline:none}
.island-inspector.entering {animation:island-inspector-in .46s cubic-bezier(.2,.8,.25,1) var(--enter-delay,0ms) both}
.island-inspector-head {display:flex;align-items:center;gap:12px;flex:none;margin:-2px -2px 0;padding:12px 14px;background:#ffd299;border-bottom:3px solid #bc8150;box-shadow:inset 0 2px #fff0c8}
.island-inspector-title {flex:1;min-width:0;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 26px/1.1 Pixeloid,monospace}
.island-inspector-status {flex:none;display:inline-flex;align-items:center;gap:7px;padding:5px 10px 6px;border:2px solid #b9a98f;background:#f3ecdf;color:#6c5d4b;font:700 13px/1 Pixeloid,monospace}
.island-inspector-status::before {content:'';width:8px;height:8px;background:currentColor}
.island-inspector-status[data-running=true] {border-color:#8cc28a;background:#e5f4dc;color:#2f7d4a}
.island-inspector-stats {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex:none;padding:14px 12px 6px}
.island-inspector-stat {display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:10px 6px 9px;border:2px solid #d9c29b;background:#fff8e8;box-shadow:inset 0 2px #fffcf1;text-align:center}
.island-inspector-stat-icon {display:grid;place-items:center;height:16px;color:#825731}
.island-inspector-stat-icon svg {display:block;height:15px;width:auto}
.island-inspector-stat-icon path {fill:currentColor}
.island-inspector-stat strong {max-width:100%;overflow-wrap:anywhere;font:700 18px/1.15 Pixeloid,monospace}
.island-inspector-stat small {font:700 11px/1.2 Pixeloid,monospace;letter-spacing:.05em;text-transform:uppercase;color:#825731}
.island-inspector-stat[data-thermal=cool] strong {color:#2c6d86}
.island-inspector-stat[data-thermal=warm] strong {color:#b4691f}
.island-inspector-stat[data-thermal=throttling] strong {color:#b5341f}
.island-inspector-stat[data-thermal=unknown] strong {color:#8a7963;font-size:14px;font-weight:400}
.island-inspector-body {flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9a26e #fbefd4;padding:2px 14px 14px}
.island-inspector-section {margin:10px 0 6px;padding-top:10px;border-top:2px solid #decba8;font:700 12px/1.2 Pixeloid,monospace;letter-spacing:.06em;text-transform:uppercase;color:#825731}
.island-inspector-parts {display:grid;gap:2px;margin:0;padding:0;list-style:none}
.island-inspector-parts li {display:grid;grid-template-columns:minmax(92px,32%) minmax(0,1fr);gap:12px;align-items:baseline;padding:5px 2px;border-bottom:1px solid #eedfc5}
.island-inspector-parts li:last-child {border-bottom:0}
.island-inspector-parts span {color:#8a7258;font-size:12px}
.island-inspector-parts strong {font:400 14px/1.35 Pixeloid,monospace;overflow-wrap:anywhere}
.island-inspector-empty {margin:12px 2px 4px;color:#8a7258}
.visit-setup-back {position:fixed;top:20px;left:18px;z-index:61;display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:62px;padding:3px 20px 6px 14px;
  color:#493127;font:700 16px/1 Pixeloid,monospace;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.visit-setup-back svg {width:18px;height:18px;flex:none}
.visit-setup-back:active {transform:translateY(2px)}
.visit-setup-back:focus-visible {outline:3px solid #58a7ce;outline-offset:2px}
.visit-setup-back[hidden],.island-inspector[hidden] {display:none!important}
/* The island's own labels step aside while a visited PC is open (pc-workshop.mjs sets the attribute). */
#viewport[data-visit-setup]~.island-labels,body:has(#viewport[data-visit-setup]) .island-labels {visibility:hidden}
@keyframes island-inspector-in {from {opacity:0;transform:translateX(calc(100% + 30px))} to {opacity:1;transform:none}}
@keyframes island-inspector-up {from {opacity:0;transform:translateY(calc(100% + 20px))} to {opacity:1;transform:none}}
@media(min-width:1800px){.island-inspector{top:24px;right:28px;font-size:16px}.island-inspector-title{font-size:30px}.island-inspector-status{font-size:15px}
  .island-inspector-stat strong{font-size:22px}.island-inspector-stat small{font-size:12px}.island-inspector-parts span{font-size:14px}.island-inspector-parts strong{font-size:16px}
  .island-inspector-section{font-size:13px}.visit-setup-back{min-height:70px;font-size:18px}}
@media(max-width:760px){
  .island-inspector{top:auto;left:10px;right:10px;bottom:10px;width:auto;max-height:min(50dvh,calc(100dvh - 92px))}
  .island-inspector.entering{animation-name:island-inspector-up}
  .island-inspector-head{padding:9px 12px}.island-inspector-title{font-size:21px}.island-inspector-status{font-size:12px;padding:4px 8px 5px}
  .island-inspector-stats{gap:6px;padding:10px 10px 4px}.island-inspector-stat{padding:8px 4px 7px;gap:4px}.island-inspector-stat strong{font-size:15px}.island-inspector-stat small{font-size:10px}
  .island-inspector-body{padding:0 12px 10px}.island-inspector-parts li{grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:8px;padding:4px 1px}
  .island-inspector-parts strong{font-size:13px}
  .visit-setup-back{top:10px;left:10px;min-height:46px;padding:0 14px 3px 10px;font-size:13px;gap:8px}.visit-setup-back svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){.island-inspector.entering{animation:none}}