/* The Island Hall window (island-hall-ui.mjs): the island's own building and its builder, in the
   Power window's cream pixel style (power.css). --p scales the whole window so it fits 1280x800 to
   2000x1218 without scrolling; phones scroll its body. */
.hall-window{--p:clamp(.62px,min(calc((100vw - 24px) / 1060),calc((100dvh - 24px) / 880)),1.3px);--ink:#3e211d;--soft:#6b4a33;--muted:#94683f;
  box-sizing:border-box;width:min(calc(1060 * 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 calc(14 * var(--p))/1.45 Pixeloid,monospace;font-synthesis:none;box-shadow:0 12px 40px #090f2433}
.hall-window[open]{display:flex;flex-direction:column}
.hall-window::backdrop{background:#111d3980;backdrop-filter:blur(3px)}
.hall-window [hidden]{display:none!important}
.hall-window *{box-sizing:border-box}
/* The sheet and its body take their content's height (flex-basis auto), never a 0% basis: WebKit (every iPhone browser)
   resolves a percentage inside a modal <dialog> as 0, and the window collapsed to a thin frame (9 Oct 2026). */
.hall-sheet{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.hall-window :is(h1,h2,h3,p,figure,ul,ol){margin:0}
.hall-window :is(button,summary):focus-visible{outline:3px solid #3a97cf;outline-offset:2px}
.hall-window button:not(:disabled):hover{filter:brightness(1.04);translate:0 -1px}
.hall-window button:not(:disabled):active{translate:0 1px}
.hall-icon .power-icon-fill{fill:#e0822f}.hall-icon .power-icon-accent{fill:#fff3c4}

/* ---------------------------------------------------------------- header */
.hall-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}
.hall-head-icon{flex:none;width:calc(44 * var(--p));height:calc(44 * var(--p));filter:drop-shadow(0 calc(2 * var(--p)) 0 #b8742f)}
.hall-head-copy{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(16 * var(--p))}
.hall-head h1{font:700 calc(32 * var(--p))/1.1 Pixeloid,monospace;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.hall-head-level{font:700 calc(16 * var(--p))/1.2 Pixeloid,monospace;color:#6a3a16;background:#fff6dc;border:calc(2 * var(--p)) solid #d9a15f;
  box-shadow:inset 0 calc(2 * var(--p)) #fffdf3;padding:calc(5 * var(--p)) calc(11 * var(--p));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hall-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}
.hall-close svg{width:100%;height:100%;shape-rendering:crispEdges}

/* ---------------------------------------------------------------- layout */
.hall-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
/* Owner pass (7 Oct 2026): few, big texts. Left: the hall now and next, what the next level brings with Upgrade,
   the bonus. Right: the builder (his job, his queue, Add a job). Below: every level. */
.hall-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"hero builder" "next builder" "bonus builder" "ladder ladder";
  grid-template-rows:auto 1fr auto auto;align-content:start;gap:calc(8 * var(--p)) calc(14 * var(--p));padding:calc(8 * var(--p)) calc(14 * var(--p)) calc(7 * var(--p))}
.hall-hero{grid-area:hero}.hall-bonus{grid-area:bonus}.hall-next{grid-area:next}.hall-builder{grid-area:builder}.hall-ladder{grid-area:ladder}
.hall-section-title{font:700 calc(16 * var(--p))/1.3 Pixeloid,monospace;background:linear-gradient(90deg,#ffdaa0,#ffedc3);
  padding:calc(5 * var(--p)) calc(11 * var(--p));clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% 100%,0 100%,0 5px)}
.hall-bonus,.hall-next,.hall-builder{border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch}

/* ---------------------------------------------------------------- hero: the hall's stages */
.hall-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.12fr) calc(44 * var(--p)) minmax(0,1fr);align-items:end;gap:calc(4 * var(--p));
  padding:calc(6 * var(--p)) calc(12 * var(--p)) calc(8 * var(--p));overflow:hidden;
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile-blue.svg') 8 stretch;background-clip:padding-box;
  background:linear-gradient(180deg,#bfe1fb 0%,#dff0fc 46%,#fbf3dc 78%,#fff3d4 100%) padding-box}
.hall-hero::before,.hall-hero::after{content:'';position:absolute;z-index:0;width:calc(96 * var(--p));height:calc(20 * var(--p));background:#ffffffd9;
  box-shadow:calc(18 * var(--p)) calc(-12 * var(--p)) 0 calc(-4 * var(--p)) #ffffffd9,calc(42 * var(--p)) calc(-6 * var(--p)) 0 calc(-6 * var(--p)) #ffffffd9;
  top:calc(28 * var(--p));left:6%;animation:hall-cloud 26s linear infinite alternate}
.hall-hero::after{top:calc(60 * var(--p));left:auto;right:8%;transform:scale(.7);animation-duration:34s;animation-direction:alternate-reverse}
.hall-hero[data-layout=single]{grid-template-columns:minmax(0,1fr);justify-items:center;align-items:center;gap:0}
.hall-hero[data-layout=single] .hall-stage{width:min(100%,calc(300 * var(--p)))}
.hall-stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;min-width:0}
.hall-stage-art{position:relative;isolation:isolate;width:100%;height:calc(132 * var(--p));display:grid;place-items:center}
.hall-stage-art::before,.hall-stage-art::after{content:'';position:absolute;left:12%;right:12%;border-radius:50%;pointer-events:none}
/* The renders frame the hall with room around it: show it bigger, standing on its little island. */
img.hall-render{position:absolute;inset:0;scale:var(--zoom,1.2);transform-origin:50% 100%}
.hall-stage-art::after{z-index:-2;bottom:2%;height:30%;background:radial-gradient(closest-side,#9a6a40 0 82%,#73492b 84% 96%,transparent 98%)}
.hall-stage-art::before{z-index:-1;bottom:8%;height:30%;background:radial-gradient(closest-side,#c3e48c 0 70%,#a6d16b 74% 88%,#86b450 90% 96%,transparent 98%)}
.hall-render,.hall-rung-render{display:block;width:100%;height:100%;object-fit:contain;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(180deg,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.hall-render{position:relative;z-index:1;filter:drop-shadow(0 calc(2 * var(--p)) 0 #3e211d22)}
/* No stage render (a missing manifest or picture): the hall drawn in pixels. */
.hall-fallback{display:grid;place-items:center;-webkit-mask-image:none;mask-image:none;padding:12% 18% 16%}
.hall-fallback .hall-art{width:100%;height:100%}
/* In now and next it fills the picture's box exactly (its own height would push the hall down over the caption). */
.hall-stage-art>.hall-fallback{position:absolute;inset:0}
.hall-rung-render.hall-fallback{padding:10% 22% 14%}
.hall-art-edge{fill:#3e211d}.hall-art-roof{fill:#c9573a}.hall-art-wall{fill:#f6e3bf}.hall-art-window{fill:#ffd96b}.hall-art-door{fill:#8a5a32}
.hall-art-pole{fill:#d8cbb4}.hall-art-flag{fill:#4f88d8}.hall-art-ground{fill:#86b450}
.hall-stage figcaption{position:relative;z-index:2;display:grid;justify-items:center;gap:calc(1 * var(--p));margin-top:calc(-2 * var(--p));text-align:center;max-width:100%}
.hall-tag{position:absolute;z-index:3;top:calc(4 * var(--p));left:calc(2 * var(--p));white-space:nowrap;font:700 calc(13 * var(--p))/1 Pixeloid,monospace;letter-spacing:.08em;text-transform:uppercase;padding:calc(5 * var(--p)) calc(9 * var(--p)) calc(4 * var(--p));
  background:#3e211d;color:#fff4d2;box-shadow:0 calc(2 * var(--p)) 0 #00000026}
.hall-stage-level{font:700 calc(21 * var(--p))/1.15 Pixeloid,monospace;white-space:nowrap}
.hall-stage-name{font-size:calc(15 * var(--p));color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hall-stage[data-kind=next] .hall-tag{background:#f0913a;color:#2b1307}
.hall-stage[data-kind=next] .hall-stage-art{background:radial-gradient(closest-side,#fff6bf 0,#fff6bf88 45%,transparent 72%)}
.hall-stage[data-kind=next] .hall-render{animation:hall-float 3.6s ease-in-out infinite}
.hall-stage[data-kind=later] .hall-tag{background:#8f7d68;color:#fff4d2}
.hall-stage[data-kind=later] .hall-render{filter:grayscale(.5) brightness(1.06);opacity:.8}
.hall-stage[data-kind=queued] .hall-tag{background:#4f88d8;color:#fff9ea}
.hall-stage[data-kind=queued] .hall-render{filter:saturate(.8) brightness(1.04);opacity:.86}
.hall-stage-queued{position:absolute;z-index:3;bottom:24%;right:6%;width:calc(30 * var(--p));height:calc(34 * var(--p));padding:calc(4 * var(--p));
  background:#e1effa;border:calc(2 * var(--p)) solid #3e211d;box-shadow:0 calc(2 * var(--p)) 0 #00000026}
.hall-stage[data-kind=max] .hall-tag,.hall-stage[data-kind=celebrate] .hall-tag{background:linear-gradient(180deg,#ffe680,#ffb23d);color:#3a1c08;outline:calc(2 * var(--p)) solid #4f2410}
.hall-arrow{position:relative;z-index:1;align-self:center;margin-bottom:calc(40 * var(--p));display:grid;place-items:center}
.hall-arrow .power-arrow-icon{width:calc(38 * var(--p));height:calc(34 * var(--p));animation:hall-nudge 1.4s steps(4) infinite}
.hall-arrow .power-icon-fill{fill:#f0913a}
.hall-stage[data-kind=building] .hall-render{filter:grayscale(.65) sepia(.3) brightness(1.06);opacity:.72}
.hall-stage[data-kind=building] .hall-tag{background:#ffd23f;color:#3a1c08;outline:calc(2 * var(--p)) dashed #3e211d}
.hall-tape{position:absolute;z-index:3;left:4%;right:4%;top:40%;display:flex;align-items:center;justify-content:center;gap:calc(6 * var(--p));padding:calc(5 * var(--p));
  transform:rotate(-6deg);background:repeating-linear-gradient(-45deg,#ffd23f 0 calc(10 * var(--p)),#2f1e16 calc(10 * var(--p)) calc(20 * var(--p)));
  box-shadow:0 calc(3 * var(--p)) 0 #00000033;font:700 calc(13 * var(--p))/1 Pixeloid,monospace;text-transform:uppercase;letter-spacing:.08em}
.hall-tape span:last-child{background:#ffd23f;padding:calc(4 * var(--p)) calc(8 * var(--p));border:calc(2 * var(--p)) solid #2f1e16}
.hall-tape-icon{width:calc(22 * var(--p));height:calc(22 * var(--p));background:#ffd23f;padding:calc(2 * var(--p));border:calc(2 * var(--p)) solid #2f1e16}
.hall-window .power-hammer-icon .power-icon-fill{fill:#9a6a40}
.hall-stage-bar{position:absolute;z-index:3;left:14%;right:14%;bottom:6%;height:calc(13 * var(--p));border:calc(2 * var(--p)) solid #3e211d;background:#fff4d2}
.hall-stage-bar i,.hall-progress-bar i,.hall-job-bar i{display:block;height:100%;width:0;transition:width .9s linear;
  background:repeating-linear-gradient(-45deg,#ffd23f 0 calc(7 * var(--p)),#f0a92e calc(7 * var(--p)) calc(14 * var(--p)));background-size:calc(19.8 * var(--p)) 100%;animation:hall-march 1s linear infinite}
.hall-burst{position:absolute;inset:-25%;z-index:0;pointer-events:none}
.hall-burst::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#fff4a8aa 0 9deg,transparent 9deg 22deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);mask-image:radial-gradient(closest-side,#000 30%,transparent 72%);animation:hall-spin 14s linear infinite}
.hall-burst i{position:absolute;left:50%;top:50%;width:calc(10 * var(--p));height:calc(10 * var(--p));background:#ffd23f;border:calc(2 * var(--p)) solid #3e211d;
  --a:calc(var(--i) * 25.7deg);transform:rotate(var(--a)) translateY(0);opacity:0;animation:hall-pop 1.6s cubic-bezier(.2,.7,.3,1) calc(var(--i) * 40ms) 2 both}
.hall-burst i:nth-child(3n){background:#f0913a}.hall-burst i:nth-child(3n+1){background:#38b2a3}.hall-burst i:nth-child(4n){background:#4f88d8}
.hall-cheer{position:relative;z-index:1;margin-top:calc(4 * var(--p));font:700 calc(24 * var(--p))/1.2 Pixeloid,monospace;color:#3a1c08;
  text-shadow:0 calc(2 * var(--p)) 0 #ffd88a;animation:hall-pulse 1.8s ease-in-out infinite}
.hall-grid[data-state=max] .hall-cheer{animation:none;font-size:calc(19 * var(--p))}

/* ---------------------------------------------------------------- the island bonus: one strip, big type, details on hover */
.hall-bonus{display:grid;gap:calc(5 * var(--p));padding:calc(6 * var(--p)) calc(11 * var(--p))}
.hall-bonus-head{display:flex;align-items:center;gap:calc(8 * var(--p))}
.hall-bonus-star{flex:none;width:calc(28 * var(--p));height:calc(24 * var(--p))}
.hall-star-icon .power-icon-fill{fill:#ffc531}.hall-star-icon .power-icon-accent{fill:#fff6b0}
.hall-bonus-title{font:700 calc(16 * var(--p))/1.2 Pixeloid,monospace;white-space:nowrap}
.hall-bonus-total{font:700 calc(21 * var(--p))/1 Pixeloid,monospace;color:#33692f;background:#e5f3d4;border:calc(2 * var(--p)) solid #a8cf8b;padding:calc(4 * var(--p)) calc(8 * var(--p))}
.hall-bonus[data-active=false] .hall-bonus-total{color:#7a6047;background:#f6ecd7;border-color:#dcc49a}
.hall-bonus-parts{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:calc(6 * var(--p))}
.hall-bonus-part{display:flex;align-items:center;gap:calc(8 * var(--p));min-width:0;padding:calc(4 * var(--p)) calc(8 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae;cursor:help}
.hall-bonus-part[data-waiting=true]{background:repeating-linear-gradient(-45deg,#fff7e2 0 calc(6 * var(--p)),#fffaf0 calc(6 * var(--p)) calc(12 * var(--p)))}
.hall-bonus-part[data-waiting=true] strong{color:#94683f}
.hall-bonus-badge{flex:none;display:grid;place-items:center;width:calc(28 * var(--p));height:calc(28 * var(--p));padding:calc(5 * var(--p));background:#e1effa;border:calc(2 * var(--p)) solid #93bede}
.hall-bonus-part[data-key=combo] .power-icon-fill{fill:#3b6f8f}.hall-bonus-part[data-key=combo] .power-icon-accent{fill:#9fd6ff}
.hall-bonus-part[data-key=level] .hall-bonus-badge{background:#ffe9b8;border-color:#d9a15f}
.hall-bonus-part[data-key=level] .power-icon-fill{fill:#e0822f}.hall-bonus-part[data-key=level] .power-icon-accent{fill:#fff3c4}
.hall-bonus-label{flex:1;min-width:0;font-size:calc(14 * var(--p));color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-bonus-part strong{font:700 calc(17 * var(--p))/1.2 Pixeloid,monospace;white-space:nowrap}
.hall-hint{display:none;font-size:calc(13 * var(--p));line-height:1.4;color:#7a6047}

/* ---------------------------------------------------------------- what the next Island Level brings */
.hall-next{display:flex;flex-direction:column;gap:calc(7 * var(--p));padding:calc(8 * var(--p)) calc(12 * var(--p)) calc(9 * var(--p));min-width:0}
.hall-changes{list-style:none;padding:0;display:grid;gap:calc(5 * var(--p))}
.hall-change{display:flex;align-items:center;gap:calc(10 * var(--p));min-height:calc(38 * var(--p));padding:calc(2 * var(--p)) calc(8 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae;cursor:help}
.hall-change-badge{flex:none;display:grid;place-items:center;width:calc(32 * var(--p));height:calc(32 * var(--p));padding:calc(7 * var(--p));background:#ffe9b8;border:calc(2 * var(--p)) solid #d9a15f;box-shadow:inset 0 calc(2 * var(--p)) #fff7df}
.hall-change[data-key=plots] .hall-change-badge,.hall-change[data-key=opens] .hall-change-badge{background:#e8f3d4;border-color:#a3c77f}
.hall-change[data-key=plots] .power-icon-fill,.hall-change[data-key=opens] .power-icon-fill{fill:#8a5a32}
.hall-change[data-key=plots] .power-icon-accent,.hall-change[data-key=opens] .power-icon-accent{fill:#f0913a}
.hall-change[data-key=bonus] .hall-change-badge{background:#fff3c4;border-color:#e0b23c}
.hall-change[data-key=bonus] .power-icon-fill{fill:#ffc531}.hall-change[data-key=bonus] .power-icon-accent{fill:#fff6b0}
.hall-change[data-key=level] .power-icon-fill{fill:#e0822f}.hall-change[data-key=level] .power-icon-accent{fill:#fff3c4}
.hall-change-copy{display:grid;min-width:0;line-height:1.3}
.hall-change-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hall-change strong{font:700 calc(17 * var(--p))/1.3 Pixeloid,monospace}
.hall-action{margin-top:auto;display:grid;gap:calc(6 * var(--p));padding-top:calc(3 * var(--p))}
/* One button: "Upgrade · 3 h" over its price in dollars and tokens. */
.hall-upgrade{display:grid;justify-items:center;gap:calc(2 * var(--p));width:100%;min-height:calc(68 * var(--p));
  padding:calc(6 * var(--p)) calc(12 * var(--p));border:calc(9 * var(--p)) solid transparent;border-image:url('../ui/frames/power-gold.svg') 12 fill stretch;background:none;
  color:#3a1c08;font:700 calc(25 * var(--p))/1.1 Pixeloid,monospace;cursor:pointer;text-shadow:0 calc(2 * var(--p)) #fff3b066}
.hall-upgrade-main{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(10 * var(--p))}
.hall-upgrade-price{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:calc(2 * var(--p)) calc(9 * var(--p));font-size:calc(18 * var(--p))}
.hall-upgrade-token{font-size:calc(15 * var(--p));color:#6a3a16}
.hall-upgrade-icon{width:calc(26 * var(--p));height:calc(26 * var(--p))}
.hall-upgrade-part::before{content:'·';margin-right:calc(10 * var(--p));opacity:.55}
.hall-upgrade:not(:disabled){animation:hall-glow 2.4s ease-in-out infinite}
.hall-upgrade:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#8b7964;cursor:not-allowed;text-shadow:none}
.hall-upgrade:disabled .hall-upgrade-icon{filter:grayscale(1);opacity:.6}
.hall-upgrade:disabled .hall-upgrade-token{color:inherit}
.hall-action-note{text-align:center;font-size:calc(13 * var(--p));line-height:1.5;color:#755742}
.hall-action-note[data-tone]{padding:calc(5 * var(--p)) calc(9 * var(--p))}
.hall-action-note[data-tone=warn]{background:#fff0c9;color:#7a4b12}
.hall-action-note[data-tone=error]{background:#ffe5d5;color:#873e2d}
.hall-action-note[data-tone=success]{background:#e8f1d9;color:#45632c}
/* Upgrade economy (4 Oct 2026): a price that grows with the island's hash record says so; its formula on hover. */
.hall-price-grows{text-align:center;font-size:calc(12.5 * var(--p));line-height:1.45;color:var(--soft);cursor:help}
.hall-add .hall-price-grows{text-align:left}
.hall-progress{display:grid;gap:calc(6 * var(--p));padding:calc(9 * var(--p)) calc(12 * var(--p));background:#fff4cf;border:calc(2 * var(--p)) solid #e2b860}
.hall-progress-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:calc(4 * var(--p)) calc(10 * var(--p));font-weight:700}
.hall-remaining{font-size:calc(18 * var(--p));font-variant-numeric:tabular-nums}
.hall-progress-bar{height:calc(22 * var(--p));border:calc(3 * var(--p)) solid #5c382c;background:#efe2c0;overflow:hidden}
.hall-progress small{font-size:calc(13 * var(--p));color:var(--soft);line-height:1.45}
.hall-queued{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:calc(2 * var(--p)) calc(10 * var(--p));
  padding:calc(9 * var(--p)) calc(12 * var(--p));background:#e9f3fc;border:calc(2 * var(--p)) solid #9cc3e3;color:#24476a}
.hall-queued strong{font:700 calc(15 * var(--p))/1.3 Pixeloid,monospace}
.hall-queued small{grid-column:2;font-size:calc(13 * var(--p));line-height:1.45;color:#3d5f80}
.hall-queued-badge{grid-row:span 2;width:calc(30 * var(--p));height:calc(34 * var(--p));padding:calc(4 * var(--p));background:#fff;border:calc(2 * var(--p)) solid #9cc3e3}
.hall-window .power-queued-icon .power-icon-fill{fill:#8a5a32}.hall-window .power-queued-icon .power-icon-accent{fill:#ffd23f}
.hall-queue-next,.hall-secondary{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--p));min-height:calc(44 * var(--p));padding:calc(5 * var(--p)) calc(14 * 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 calc(14.5 * var(--p))/1.2 Pixeloid,monospace;cursor:pointer}
.hall-queue-next{width:100%}
.hall-progress .hall-queue-next,.hall-queued .hall-queue-next{grid-column:1/-1;min-height:calc(34 * var(--p));margin-top:calc(2 * var(--p));border-width:calc(6 * var(--p));font-size:calc(13.5 * var(--p))}
.hall-queue-next:disabled{color:#8b7964;cursor:not-allowed}
.hall-queue-next-icon{flex:none;width:calc(17 * var(--p));height:calc(20 * var(--p))}
.hall-waiting{display:grid;gap:calc(8 * var(--p));justify-items:center;text-align:center;padding:calc(10 * var(--p));background:#deeffa;border:calc(2 * var(--p)) solid #acd0e9;color:#244c70;font-size:calc(12.5 * var(--p))}
.hall-next[data-kind=max]{justify-content:flex-start}
.hall-max-copy{margin-top:auto;padding:calc(8 * var(--p)) calc(10 * var(--p));text-align:center;font-size:calc(12.5 * var(--p));line-height:1.55;color:#5d4a36;background:#fff4cf;border:calc(2 * var(--p)) solid #ecd09a}
.hall-next .transaction-status{margin:0}
/* Lines that wrap break evenly (never a lone "h" or "H/s" on a line of its own). */
.hall-window :is(.hall-section-title,.hall-action-note,.hall-price-grows,.hall-rule span,.hall-queue-next span,.hall-job-idle small,.hall-hint,.hall-max-copy){text-wrap:balance}

/* ---------------------------------------------------------------- the builder */
.hall-builder{display:flex;flex-direction:column;gap:calc(8 * var(--p));padding:calc(8 * var(--p)) calc(11 * var(--p)) calc(10 * var(--p));min-width:0}
.hall-builder-head{display:flex;align-items:center;flex-wrap:wrap;gap:calc(6 * var(--p)) calc(8 * var(--p))}
.hall-builder-head .hall-section-title{flex:1}
.hall-builder-icon{flex:none;width:calc(30 * var(--p));height:calc(30 * var(--p));padding:calc(4 * var(--p));background:#ffe9b8;border:calc(2 * var(--p)) solid #d9a15f}
.hall-done{margin-left:auto;font:700 calc(14 * var(--p))/1.2 Pixeloid,monospace;color:#24476a;background:#e9f3fc;border:calc(2 * var(--p)) solid #9cc3e3;padding:calc(4 * var(--p)) calc(9 * var(--p));white-space:nowrap}
.hall-builder-body{flex:1;display:flex;flex-direction:column;gap:calc(10 * var(--p))}
.hall-crew,.hall-add{display:grid;gap:calc(6 * var(--p));min-width:0}
.hall-add{padding-top:calc(8 * var(--p));border-top:calc(2 * var(--p)) dashed #e3cb9a}
.hall-job-now{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"tag icon name name" "bar bar bar left";align-items:center;
  gap:calc(6 * var(--p)) calc(8 * var(--p));padding:calc(8 * var(--p)) calc(10 * var(--p));background:#fff4cf;border:calc(2 * var(--p)) solid #e2b860}
.hall-job-tag{grid-area:tag;font:700 calc(12 * var(--p))/1 Pixeloid,monospace;letter-spacing:.08em;text-transform:uppercase;padding:calc(4 * var(--p)) calc(7 * var(--p));background:#ffd23f;color:#3a1c08;outline:calc(2 * var(--p)) dashed #3e211d}
.hall-job-now .hall-job-icon{grid-area:icon}
.hall-job-now .hall-job-name{grid-area:name;font:700 calc(17 * var(--p))/1.25 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-job-left{grid-area:left;font-size:calc(17 * var(--p));font-variant-numeric:tabular-nums;white-space:nowrap}
.hall-job-bar{grid-area:bar;height:calc(16 * var(--p));border:calc(2 * var(--p)) solid #5c382c;background:#efe2c0;overflow:hidden}
.hall-job-idle{display:grid;gap:calc(3 * var(--p));padding:calc(10 * var(--p)) calc(12 * var(--p));background:#f1f8e8;border:calc(2 * var(--p)) dashed #a8cf8b;color:#33572c}
.hall-job-idle strong{font:700 calc(17 * var(--p))/1.25 Pixeloid,monospace}
.hall-job-idle small{font-size:calc(13.5 * var(--p));line-height:1.45}
.hall-job-icon{flex:none;width:calc(26 * var(--p));height:calc(26 * var(--p));padding:calc(3 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae}
.hall-window [data-kind=grid] .hall-job-icon .power-icon-fill,.hall-window [data-kind=grid] .hall-add-icon .power-icon-fill{fill:#ffd23f}
.hall-window [data-kind=plot] .power-icon-fill{fill:#8a5a32}.hall-window [data-kind=plot] .power-icon-accent{fill:#f0913a}
/* The waiting jobs: place, icon, name, when it is ready, the arrows (its build time on hover). */
.hall-queue{list-style:none;padding:0;display:grid;gap:calc(4 * var(--p))}
.hall-job{display:grid;grid-template-columns:calc(24 * var(--p)) auto minmax(0,1fr) auto auto;align-items:center;gap:calc(8 * var(--p));
  min-height:calc(36 * var(--p));padding:calc(3 * var(--p)) calc(6 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae}
.hall-job-place{display:grid;place-items:center;width:calc(24 * var(--p));height:calc(24 * var(--p));background:#4f88d8;color:#fff9ea;font:700 calc(13 * var(--p))/1 Pixeloid,monospace}
.hall-job .hall-job-icon{width:calc(24 * var(--p));height:calc(24 * var(--p))}
.hall-job .hall-job-name{font:700 calc(15 * var(--p))/1.2 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-job-end{font-size:calc(13.5 * var(--p));color:#24476a;white-space:nowrap}
/* A queued job's whole name ("Island Level 2") stays readable: its "ready …" time wraps instead (wide layout). */
@media(min-width:761px){
  .hall-job{grid-template-columns:calc(24 * var(--p)) auto max-content minmax(0,1fr) auto}
  .hall-job .hall-job-end{white-space:normal;text-align:right;line-height:1.15}
}
.hall-moves{display:flex;gap:calc(3 * var(--p))}
.hall-move{display:grid;place-items:center;width:calc(36 * var(--p));height:calc(30 * var(--p));min-width:30px;min-height:26px;padding:calc(3 * var(--p)) calc(6 * var(--p));
  border:calc(4 * var(--p)) solid transparent;border-image:url('../ui/frames/cream.svg') 12 fill stretch;background:none;cursor:pointer}
.hall-move svg{width:100%;height:100%}
.hall-move-icon .power-icon-fill{fill:#e0822f}
.hall-move:disabled{cursor:not-allowed;opacity:.38}
.hall-rule{display:flex;align-items:center;gap:calc(7 * var(--p));font-size:calc(13 * var(--p));line-height:1.4;color:#7a4b12;background:#fff0c9;padding:calc(5 * var(--p)) calc(9 * var(--p))}
.hall-rule-icon{flex:none;width:calc(18 * var(--p));height:calc(18 * var(--p))}
.hall-coin-icon .power-icon-fill{fill:#ffc531}.hall-coin-icon .power-icon-accent{fill:#e0952a}
.hall-crew .hall-action-note{text-align:left}
.hall-add-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(8 * var(--p))}
.hall-add-title{font:700 calc(16 * var(--p))/1.2 Pixeloid,monospace}
.hall-add-list{list-style:none;padding:0;display:grid;gap:calc(5 * var(--p))}
.hall-add-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:calc(9 * var(--p));min-height:calc(50 * var(--p));
  padding:calc(4 * var(--p)) calc(7 * var(--p));background:#fffaf0;border:calc(2 * var(--p)) solid #ecd9ae}
.hall-add-row[data-state=locked]{background:#f7f0e2;color:#8f7d68}
.hall-add-icon{display:grid;place-items:center;width:calc(34 * var(--p));height:calc(34 * var(--p));padding:calc(6 * var(--p));background:#ffe9b8;border:calc(2 * var(--p)) solid #d9a15f}
.hall-add-row[data-kind=plot] .hall-add-icon{background:#e8f3d4;border-color:#a3c77f}
.hall-add-row[data-state=locked] .hall-add-icon{filter:grayscale(.8);opacity:.7}
.hall-add-copy{display:grid;gap:calc(1 * var(--p));min-width:0;line-height:1.25}
.hall-add-copy strong{font:700 calc(16 * var(--p))/1.25 Pixeloid,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-add-copy small{font-size:calc(13.5 * var(--p));color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hall-add-why{display:flex;align-items:center;gap:calc(5 * var(--p));color:#8f5a2c!important}
/* A desk 2-8 PC waiting for power (4 Oct 2026): the Power row names it and the level that runs it. */
.hall-add-power{color:#7a4a12!important;white-space:normal!important}
.hall-add-lock{flex:none;width:calc(13 * var(--p));height:calc(14 * var(--p))}
.hall-add-lock .power-icon-fill{fill:#8f7d68}.hall-add-lock .power-icon-accent{fill:#efe2c4}
.hall-add-button{min-width:calc(70 * var(--p));min-height:calc(40 * var(--p));padding:calc(3 * var(--p)) calc(10 * 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 calc(16 * var(--p))/1 Pixeloid,monospace;cursor:pointer}
.hall-add-button:disabled{border-image-source:url('../ui/frames/tile.svg');border-image-slice:8 fill;color:#a8987f;cursor:not-allowed}
.hall-room{font-size:calc(13.5 * var(--p));color:var(--soft);text-align:right}
.hall-add[data-full=true] .hall-room{color:#873e2d;font-weight:700}

/* ---------------------------------------------------------------- every Island Level */
.hall-ladder{min-width:0}
.hall-ladder-head{display:flex;align-items:center;gap:calc(10 * var(--p))}
.hall-ladder-head .hall-section-title{flex:1}
.hall-ladder-count{font:700 calc(14 * var(--p))/1 Pixeloid,monospace;color:var(--muted);white-space:nowrap}
/* Each level: its hall, its number and the bonus it adds (name, price and time on hover). */
.hall-rungs{position:relative;list-style:none;margin-top:calc(5 * var(--p));padding:calc(10 * var(--p)) calc(2 * var(--p)) calc(3 * var(--p));display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(calc(84 * var(--p)),1fr);gap:calc(7 * var(--p));overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#c99461 #fff4d2}
.hall-rung{position:relative;display:grid;justify-items:center;align-content:start;gap:calc(1 * var(--p));min-width:0;padding:calc(3 * var(--p)) calc(3 * var(--p)) calc(6 * var(--p));
  border:calc(5 * var(--p)) solid transparent;border-image:url('../ui/frames/tile.svg') 8 fill stretch;text-align:center;scroll-snap-align:start;cursor:help}
.hall-rung-art{position:relative;width:100%;height:calc(50 * var(--p))}
.hall-rung-pic{position:absolute;inset:0;overflow:hidden}
/* A bigger hall in the small card without a transform (many scaled, masked layers can drop out of the compositor). */
img.hall-rung-render{position:absolute;left:calc(50% - 50% * var(--zoom,1.4));top:calc(100% * (1 - var(--zoom,1.4)));width:calc(100% * var(--zoom,1.4));height:calc(100% * var(--zoom,1.4))}
.hall-rung-level{font:700 calc(13 * var(--p))/1.3 Pixeloid,monospace;color:var(--muted)}
.hall-rung-bonus{font:700 calc(17 * var(--p))/1.2 Pixeloid,monospace}
.hall-rung[data-state=current]{outline:calc(3 * var(--p)) solid #f0913a;outline-offset:calc(-1 * var(--p));transform:translateY(calc(-4 * var(--p)));box-shadow:0 calc(4 * var(--p)) 0 #c5803f40}
.hall-rung[data-state=next],.hall-rung[data-state=building]{outline:calc(2 * var(--p)) dashed #e0822f;outline-offset:calc(-1 * var(--p))}
.hall-rung[data-state=building]{outline-color:#3e211d;background:repeating-linear-gradient(-45deg,#ffd23f22 0 calc(8 * var(--p)),transparent calc(8 * var(--p)) calc(16 * var(--p))) padding-box}
.hall-rung[data-state=queued]{outline:calc(2 * var(--p)) dashed #4f88d8;outline-offset:calc(-1 * var(--p))}
.hall-rung[data-state=done] .hall-rung-render{filter:saturate(.8)}
.hall-rung:is([data-state=later],[data-state=locked]){color:#8f7d68}
.hall-rung:is([data-state=later],[data-state=locked]) .hall-rung-render{filter:grayscale(.75) brightness(1.08) contrast(.85);opacity:.55}
.hall-rung:is([data-state=later],[data-state=locked]) .hall-rung-bonus{color:#8f7d68}
.hall-rung-tag{position:absolute;z-index:2;top:calc(-13 * var(--p));left:50%;translate:-50% 0;display:flex;align-items:center;gap:calc(3 * var(--p));
  font:700 calc(11.5 * var(--p))/1 Pixeloid,monospace;letter-spacing:.07em;text-transform:uppercase;padding:calc(4 * var(--p)) calc(6 * var(--p));background:#3e211d;color:#fff4d2;white-space:nowrap}
.hall-rung[data-state=next] .hall-rung-tag{background:#f0913a;color:#2b1307}
.hall-rung[data-state=building] .hall-rung-tag{background:#ffd23f;color:#3a1c08;outline:calc(2 * var(--p)) dashed #3e211d}
.hall-rung[data-state=queued] .hall-rung-tag{background:#4f88d8;color:#fff9ea}
.hall-rung[data-state=queued] .hall-rung-tag-icon .power-icon-fill{fill:#fff9ea}
.hall-rung-tag-icon{width:calc(11 * var(--p));height:calc(11 * var(--p))}
.hall-rung-check{position:absolute;z-index:2;top:calc(2 * var(--p));right:calc(2 * var(--p));width:calc(20 * var(--p));height:calc(20 * var(--p));padding:calc(3 * var(--p));
  border:calc(2 * var(--p)) solid #3e211d;background:#8cc85e}
.hall-rung-check .power-icon-fill{fill:#fffbe9}.hall-rung-check .power-icon-edge{fill:#2d5a1c}

/* The Island panel's builder summary and its Open Island Hall button. */
.island-panel .island-builder-line{display:flex;justify-content:space-between;gap:8px}
.island-panel .island-open-hall{margin-top:6px}

/* ---------------------------------------------------------------- motion */
@keyframes hall-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-4 * var(--p)))}}
@keyframes hall-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(calc(5 * var(--p)))}}
@keyframes hall-march{from{background-position:0 0}to{background-position:calc(19.8 * var(--p)) 0}}
@keyframes hall-spin{to{transform:rotate(1turn)}}
@keyframes hall-pop{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.3)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(-170 * var(--p))) scale(1) rotate(200deg)}}
@keyframes hall-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
@keyframes hall-glow{0%,100%{filter:none}50%{filter:brightness(1.07) drop-shadow(0 0 calc(6 * var(--p)) #ffd23f99)}}
@keyframes hall-cloud{from{translate:0 0}to{translate:calc(60 * var(--p)) 0}}
@media(prefers-reduced-motion:reduce){
  .hall-window *,.hall-window *::before,.hall-window *::after{animation:none!important;transition:none!important}
  .hall-window button{translate:none!important}
  .hall-burst i{opacity:0}
}

/* ---------------------------------------------------------------- narrow screens: one column, the body scrolls */
@media(max-width:860px),(max-aspect-ratio:4/5){
  .hall-window{--p:clamp(.78px,calc((100vw - 16px) / 600),1.15px);width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .hall-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"hero" "next" "bonus" "builder" "ladder";grid-template-rows:none}
  .hall-hint{display:block}
}
/* Phones: the same order in one column, never smaller than 12 px. */
@media(max-width:600px){
  .hall-window{--p:clamp(.74px,calc((100vw - 16px) / 470),1px);border-width:9px}
  .hall-head{padding:8px 10px;gap:9px}
  .hall-head h1{font-size:22px}
  .hall-head-icon{width:32px;height:32px}
  .hall-head-level{font-size:13px;padding:4px 8px}
  .hall-grid{padding:10px;gap:10px}
  .hall-hero{grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);padding:8px 6px 10px}
  .hall-stage-art{height:124px}
  .hall-arrow .power-arrow-icon{width:24px;height:22px}
  .hall-stage-level{font-size:14.5px;white-space:normal;text-align:center}
  .hall-stage-name{font-size:13px;white-space:normal}
  .hall-tag{font-size:12px}
  .hall-section-title{font-size:16px}
  .hall-bonus-title{font-size:15px}.hall-bonus-total{font-size:19px}
  .hall-bonus-parts{grid-template-columns:minmax(0,1fr)}
  .hall-bonus-label{font-size:13px}.hall-bonus-part strong{font-size:16px}
  .hall-hint{font-size:12.5px}
  .hall-change strong{font-size:16px}
  .hall-upgrade{font-size:21px;min-height:64px}
  .hall-upgrade-price{font-size:16px}.hall-upgrade-token{font-size:14px}
  .hall-action-note,.hall-price-grows,.hall-rule{font-size:12.5px}
  .hall-job-now .hall-job-name,.hall-job-left{font-size:15px}
  .hall-job-end,.hall-room{font-size:12.5px}
  .hall-job .hall-job-name,.hall-add-copy strong{font-size:15px}
  .hall-job{grid-template-columns:24px auto minmax(0,1fr) auto;grid-template-areas:"place icon name moves" "place icon end moves";row-gap:0}
  .hall-job .hall-job-place{grid-area:place}.hall-job .hall-job-icon{grid-area:icon}.hall-job .hall-job-name{grid-area:name}
  .hall-job .hall-job-end{grid-area:end}.hall-job .hall-moves{grid-area:moves}
  .hall-add-copy small{font-size:13px;white-space:normal}
  .hall-move{width:36px;height:32px}
  .hall-add-button{min-height:40px;font-size:15px}
  .hall-rungs{grid-auto-columns:minmax(84px,1fr)}
  .hall-rung-level{font-size:12.5px}.hall-rung-bonus{font-size:15px}
  /* The rest of the small print, which the window's scale took down to 9-11 px on a phone. */
  .hall-job-idle small,.hall-progress-head,.hall-done,.hall-ladder-count,.hall-queued small,.hall-waiting,.hall-max-copy{font-size:12.5px}
  .hall-queue-next,.hall-progress .hall-queue-next,.hall-queued .hall-queue-next,.hall-secondary{font-size:13px}
  .hall-job-tag,.hall-job-place,.hall-rung-tag,.hall-tape{font-size:12px}
}