:root{color-scheme:dark;--ink:#edf3ee;--muted:#a7bdc6;--line:#49697a;--gold:#f1c979}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#08111f;color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,sans-serif}
/* A quiet machine chamber puts the illuminated well at the centre of the room.
   Fixed decorative layers never participate in the responsive board layout. */
body{isolation:isolate;background:#071018;background-image:radial-gradient(ellipse at 18% 12%,#78604026,transparent 43%),radial-gradient(ellipse at 76% 70%,#25516144,transparent 48%),linear-gradient(115deg,#101c23,#09131b 47%,#050a10);background-attachment:fixed}
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
/* A level roof lintel, warm refractory wall and cool piers establish an industrial
   room without a circular graphic competing with the machine silhouette. */
body::before{background:radial-gradient(ellipse at 23% 42%,#a86a3025,transparent 36%),radial-gradient(ellipse at 82% 60%,#35647620,transparent 33%),linear-gradient(180deg,transparent 12%,#02090cc2 12.1% 14.2%,#66716430 14.3%,#09141a 14.5% 16%,transparent 16.1%),linear-gradient(90deg,transparent 12%,#3d4842 12.1%,#101b1e 12.6% 16%,#665c3b25 16.1%,#172526 16.3%,transparent 16.5%,transparent 82%,#24383b 82.1%,#071016 82.7% 86%,#43524a 86.1%,#101e25 86.3%,transparent 86.5%),linear-gradient(110deg,#43332642,transparent 34% 68%,#18303d2b),linear-gradient(0deg,transparent 0 39%,#070f1450 39.2% 40%,transparent 40.2%);box-shadow:inset 0 0 14vw #0009}
body::after{top:78%;background:repeating-conic-gradient(from 80deg at 50% -14%,transparent 0deg 9.7deg,#a8bcb915 9.8deg 10deg,transparent 10.1deg 20deg),linear-gradient(#0b172200,#08121c 54%),repeating-linear-gradient(0deg,#708b8f12 0 1px,transparent 1px 40px);mask-image:linear-gradient(transparent,#000 28%);opacity:.7}
button{font:inherit;cursor:pointer}
a{color:#cae4e7;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible{outline:3px solid #f8d996;outline-offset:3px}
.shell{width:min(calc(100% - 24px),760px);height:100svh;height:100dvh;min-height:420px;margin:0 auto;padding:10px 0 max(10px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;justify-items:center}
header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}
.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--gold);margin:0 0 3px;font-weight:700}
h1{font-size:clamp(28px,5vw,42px);line-height:1;margin:0;letter-spacing:.06em;text-transform:uppercase;text-shadow:0 2px 14px #0009}
header a{font-size:13px;white-space:nowrap}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;width:min(100%,410px);margin:0 auto 8px;border-top:1px solid #c8b98785;border-bottom:1px solid #617a7d70;background:linear-gradient(110deg,#293a3ce8,#10232ce8);box-shadow:inset 0 1px #a9c8cb12}
.metrics div{border:0;border-right:1px solid #9baf9e35;padding:6px 10px;display:flex;justify-content:space-between;align-items:center;gap:5px;min-width:0}
.metrics div:last-child{border-right:0}
.metrics span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.metrics strong{font-variant-numeric:tabular-nums;font-size:18px;color:#fff2ca}
/* The board gets the remaining grid row. Its CSS size never depends on the
   canvas backing resolution, so high-DPI rendering cannot grow the layout. */
.stage{position:relative;box-sizing:content-box;height:calc(100% - 14px);width:auto;aspect-ratio:320/670;max-width:calc(100% - 14px);min-height:0;align-self:center;border:1px solid #ac9b70;border-radius:7px;padding:6px;background:linear-gradient(125deg,#81928a,#1b343d 9%,#122531 43%,#6d8077 96%);box-shadow:0 0 0 2px #06111bc9,0 20px 55px #000a,0 0 65px #8dbfc51c,inset 0 1px #e6e6c677}
canvas{display:block;width:100%;height:100%;aspect-ratio:320/670;border-radius:9px;touch-action:none}
/* Real text stays readable when the procedural dock scales down on a phone. */
.reserve-strip{position:absolute;inset:6px;pointer-events:none;color:#c4d5d8;font-variant-numeric:tabular-nums}
.reserve-strip span{position:absolute;top:89.3%;font-size:clamp(11px,1.45vh,22px);line-height:1;letter-spacing:.06em;font-weight:750;text-shadow:0 1px 2px #000}
.reserve-next span{left:10%}
.reserve-bank span{left:50%;right:10%;text-align:center}
#bank-status{position:absolute;left:50%;right:10%;bottom:.65%;font-size:clamp(12px,1.55vh,24px);line-height:1;font-weight:750;white-space:nowrap;text-align:center;color:#d2e0dc;text-shadow:0 1px 2px #000}
#bank-status.ready{color:#ffdf94;text-shadow:0 0 10px #f6bf6555}
.panel{position:absolute;inset:17% 6% auto;z-index:2;border:1px solid #89958495;border-top:3px solid #e1c180;border-radius:2px;padding:24px 20px 20px;background:radial-gradient(ellipse at 0 0,#80603335,transparent 65%),linear-gradient(145deg,#233333fc,#0b1a23fd 75%);box-shadow:0 18px 40px #000c,inset 3px 0 #dfc98c16;text-align:left;max-height:78%;overflow:auto}
.panel[hidden]{display:none}
.kicker{display:block;font-size:10px;line-height:1.4;letter-spacing:.14em;color:var(--gold);font-weight:800}
.panel h2{font-size:clamp(27px,5.4vw,34px);line-height:1.05;letter-spacing:-.035em;font-weight:850;margin:14px 0 16px;text-wrap:balance;color:#fff1cc}
.panel p{font-size:13px;line-height:1.55;color:#d1dde0;margin:0 0 18px}
.panel #panel-copy{margin-bottom:18px;max-width:34ch}
.panel #control-help{padding-top:12px;border-top:1px solid #9fb6b333;margin-bottom:18px;font-size:clamp(12px,.65vw,20px);line-height:1.45;text-align:left}
.touch-help{display:block;color:#d4e0db;font-weight:500}
.keyboard-help{display:none;margin-top:4px;color:#c4d5d8}
@media(any-pointer:fine){.keyboard-help{display:block}}
@media(min-width:1000px){.keyboard-help{display:block}}
.panel button{width:100%;border:1px solid #ffe1a0;border-radius:3px;background:linear-gradient(#ffe0a1,#d5ad62);color:#1b282a;font-weight:850;letter-spacing:.09em;padding:12px 18px;min-height:46px;box-shadow:0 4px 0 #714e24,0 8px 18px #0007}
.panel button:active{transform:translateY(2px);box-shadow:0 2px 0 #714e24,0 4px 9px #0007}
.controls{width:min(100%,410px);margin:8px auto 0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px}
.controls button{border:1px solid #6c888d;background:linear-gradient(#294b57,#152c38);color:#f4f3e8;border-radius:4px;min-width:44px;min-height:46px;font-size:22px;font-weight:800;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:3px 2px;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:inset 0 1px #b9e1dd38,0 3px 0 #040b11}
.control-symbol{display:block;line-height:1}
#rewind .control-symbol{font-size:10px;letter-spacing:0;opacity:1}
.control-hint{display:block;font-size:11px;font-weight:650;line-height:1.1;letter-spacing:0;white-space:nowrap;color:#dbe5dc}
.key-hint{display:none}
.controls button.drop{font-size:11px;letter-spacing:.05em;background:linear-gradient(#9b7948,#584129);border-color:#ddbb7e;color:#fff2d6}
.controls button.pressed,.controls button:active{background:#41697a;transform:translateY(2px);box-shadow:inset 0 1px #b9e1dd38,0 1px 0 #091722}
.controls button:disabled{opacity:1;cursor:default;color:#91a6ab;border-color:#455d65;background:linear-gradient(#243941,#17272f);box-shadow:inset 0 1px #b9e1dd12,0 3px 0 #040b11}
.controls button:disabled .control-symbol{opacity:.6}
.controls button:disabled .control-hint{color:#b7c9c9}
#rewind:not(:disabled){border-color:#e0c185;color:#ffdf94;box-shadow:inset 0 1px #ffdf9450,0 3px 0 #040b11,0 0 16px #d3a85e20}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,410px);margin:7px auto 0;font-size:12px;color:var(--muted)}
footer p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer a{white-space:nowrap}
@media(max-width:420px){
  .shell{width:calc(100% - 12px);padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
  header{gap:7px;margin-bottom:5px}
  .eyebrow{font-size:8px;margin-bottom:2px;letter-spacing:.18em}
  h1{font-size:27px}
  header a{font-size:10px}
  .metrics{gap:0;margin-bottom:5px}
  .metrics div{padding:4px 6px}
  .metrics span{font-size:10px;letter-spacing:.02em}
  .metrics strong{font-size:15px}
  .controls{margin-top:5px;gap:4px;grid-template-columns:repeat(5,minmax(44px,1fr)) minmax(56px,1.16fr)}
  #rewind .control-symbol{font-size:12px}
  #bank-status{letter-spacing:-.025em}
  .controls button{min-height:44px;font-size:20px}
  .controls button.drop{font-size:10px}
  footer{font-size:10px;margin-top:5px;gap:6px}
}
@media(max-height:650px){
  .panel{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(90vw,340px);max-height:calc(100dvh - 22px);padding:16px 14px}
  .panel h2{margin:10px 0 14px}
  .panel p{margin-bottom:12px}
}
/* A tall well and attached instrument deck make one cabinet. Reclaiming the
   old top/bottom bands enlarges the board; the deck follows its real content. */
@media(min-width:1000px) and (min-height:820px){
  .shell{--well-width:calc((88.8vh - 14px) * .477612 + 14px);--deck-width:clamp(230px,26vh,560px);--deck-height:clamp(430px,52vh,1120px);--action-height:clamp(224px,27vh,584px);--foot-height:clamp(68px,8vh,180px);--cabinet-width:calc(var(--well-width) + var(--deck-width));width:var(--cabinet-width);max-width:calc(100% - 48px);padding:1.6vh 0;grid-template-columns:var(--well-width) var(--deck-width);grid-template-rows:8vh minmax(0,1fr);column-gap:0;align-items:start}
  header{grid-column:1 / -1;grid-row:1;margin-bottom:clamp(9px,1.15vh,25px)}
  h1{font-size:clamp(34px,4.2vh,88px);letter-spacing:.055em}
  .eyebrow{font-size:clamp(10px,.7vh,16px);letter-spacing:.16em}
  header a{font-size:clamp(12px,1.2vh,26px)}
  .stage{grid-column:1;grid-row:2;max-width:none;margin:0;border-radius:6px 0 0 6px;z-index:0}
  .stage::after{content:"";position:absolute;left:100%;bottom:-1px;width:calc(var(--deck-width) + 1px);height:var(--deck-height);border:1px solid #9d9b76;border-left:0;border-radius:0 7px 7px 0;z-index:-1;background:linear-gradient(100deg,#34433d,#182c31 12%,#0c1d26 83%,#283b3e);box-shadow:inset 0 2px #d8d8b942,inset -5px 0 #08131c9c,0 16px 30px #0008}
  .metrics{z-index:1;grid-column:2;grid-row:2;align-self:end;grid-template-columns:1fr 1fr;grid-template-rows:1.2fr 1fr;width:100%;height:calc(var(--deck-height) - var(--action-height) - var(--foot-height));margin:0 0 calc(var(--action-height) + var(--foot-height));padding:clamp(12px,1.4vh,30px) clamp(14px,1.6vh,36px) 0;gap:0;border:0;background:transparent;box-shadow:none}
  .metrics div{padding:clamp(8px,.9vh,20px) 0;border:0;background:none;box-shadow:none;flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(4px,.45vh,10px)}
  .metrics div:first-child{grid-column:1 / -1;border-bottom:1px solid #8d9e8b42;padding-top:0}
  .metrics div:last-child{padding-left:clamp(12px,1.4vh,30px);border-left:1px solid #8d9e8b42}
  .metrics span{font-size:clamp(12px,1.25vh,27px);letter-spacing:.1em;color:#c3d4cf}
  .metrics strong{font-size:clamp(24px,3vh,65px);line-height:1.05}
  .metrics div:first-child strong{font-size:clamp(36px,4.6vh,100px);color:#ffe5a4;letter-spacing:-.025em}
  .controls{z-index:1;grid-column:2;grid-row:2;align-self:end;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:100%;height:var(--action-height);margin:0 0 var(--foot-height);gap:clamp(7px,.8vh,18px);padding:clamp(12px,1.4vh,30px) clamp(14px,1.6vh,36px);border:0;border-top:1px solid #8d9e8b42;background:none;box-shadow:none}
  .controls::after{content:none}
  .controls button{min-height:56px;font-size:clamp(24px,3vh,64px);border-radius:4px}
  .controls button[data-action="right"]{grid-column:3;grid-row:1}
  .controls button[data-action="down"]{grid-column:2 / 4;grid-row:2}
  .controls button[data-action="drop"]{grid-column:1;grid-row:2}
  .controls button[data-action="rewind"]{grid-column:1 / -1;grid-row:3;flex-direction:row;gap:12px}
  .controls button.drop{font-size:clamp(12px,1.3vh,28px)}
  .control-hint{font-size:clamp(11px,1.1vh,24px)}
  #rewind .control-symbol{font-size:clamp(11px,1.1vh,24px)}
  .key-hint{display:block;margin-top:3px;font-size:clamp(11px,1.1vh,24px);line-height:1.1;font-weight:500;color:#b9cec9}
  footer{z-index:1;grid-column:2;grid-row:2;align-self:end;display:block;width:100%;height:var(--foot-height);margin:0;padding:0 clamp(14px,1.6vh,36px) clamp(12px,1.4vh,30px);font-size:clamp(12px,1.2vh,26px);line-height:1.4}
  footer p{color:#d2d9c9;white-space:normal}
  footer a{display:block;margin-top:clamp(6px,.7vh,16px)}
  .panel{padding:clamp(20px,2.3vh,48px) clamp(16px,1.6vh,34px)}
  .kicker{font-size:clamp(10px,1vh,22px)}
  .panel h2{font-size:clamp(29px,3.4vh,74px)}
  .panel p{font-size:clamp(13px,1.5vh,32px)}
  .panel button{font-size:clamp(14px,1.5vh,32px);padding:clamp(12px,1.3vh,28px) clamp(18px,2vh,44px)}
}
/* Short landscape has one instrument/action surface immediately beside the
   reserve dock. The left-hand statistics wing no longer splits attention. */
@media(orientation:landscape) and (max-height:500px){
  .shell{--deck-width:254px;width:min(calc(100% - 18px),calc(44vh + var(--deck-width)));min-height:300px;grid-template-columns:auto var(--deck-width);grid-template-rows:auto minmax(0,1fr);column-gap:0;align-items:start;padding:6px 0}
  header{grid-column:1 / -1;grid-row:1;display:flex;align-items:center;margin:0 0 7px}
  h1{font-size:24px;letter-spacing:.04em}
  .eyebrow{display:none}
  header a{font-size:11px}
  .stage{grid-column:1;grid-row:2;height:calc(100% - 8px);padding:3px;max-width:none;margin:0;border-radius:6px 0 0 6px}
  .stage::after{content:"";position:absolute;left:100%;bottom:-1px;width:calc(var(--deck-width) + 1px);height:298px;border:1px solid #899476;border-left:0;border-radius:0 5px 5px 0;z-index:-1;background:linear-gradient(135deg,#2a3a36,#0d1f28 74%);box-shadow:inset 0 1px #dfd7a72b,0 16px 25px #0007}
  .reserve-strip{inset:3px}
  .reserve-strip span{font-size:11px;letter-spacing:0}
  #bank-status{font-size:12px;letter-spacing:-.035em}
  .metrics{z-index:1;grid-column:2;grid-row:2;align-self:end;grid-template-columns:1.4fr 1fr 1fr;width:100%;height:58px;margin:0 0 236px;gap:0;padding:8px 10px 0;border:0;background:transparent;box-shadow:none}
  .metrics div{min-height:0;border:0;border-right:1px solid #82968b35;border-radius:0;background:none;box-shadow:none;padding:0 8px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
  .metrics div:first-child{padding-left:0}
  .metrics div:last-child{border:0}
  .metrics span{font-size:11px;letter-spacing:.05em}
  .metrics strong{font-size:22px;line-height:1}
  .controls{z-index:1;grid-column:2;grid-row:2;align-self:end;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;height:174px;grid-template-rows:repeat(3,minmax(44px,1fr));margin:0 0 62px;gap:6px;padding:12px;border-top:1px solid #ab97604d}
  .controls button{min-height:44px}
  .control-hint{font-size:11px}
  #rewind .control-symbol{font-size:12px}
  .controls button[data-action="right"]{grid-column:3;grid-row:1}
  .controls button[data-action="down"]{grid-column:2 / 4;grid-row:2}
  .controls button[data-action="drop"]{grid-column:1;grid-row:2}
  .controls button[data-action="rewind"]{grid-column:1 / -1;grid-row:3;flex-direction:row;gap:12px}
  footer{z-index:1;grid-column:2;grid-row:2;align-self:end;display:block;width:100%;height:62px;margin:0;padding:0 12px 8px;font-size:11px}
  footer a{display:block;margin-top:6px}
}
/* Full-height cast supports frame the cabinet at desktop scale. Their broad
   return faces and stepped feet establish a near plane; no fine wallpaper
   grid competes with the puzzle. The right counterweight ends higher. */
@media(min-width:1000px) and (min-height:820px){
  .shell{position:relative;isolation:isolate}
  .shell::before,.shell::after{content:"";position:fixed;pointer-events:none;z-index:-1;top:15%;bottom:8%;width:clamp(78px,10vw,240px);background:linear-gradient(90deg,#040b10 0 16%,#6b6550 17%,#383e36 22%,#17292c 40%,#0b1920 73%,#030c12 74%);clip-path:polygon(16% 0,81% 0,81% 64%,100% 73%,100% 96%,74% 100%,0 100%,0 91%,16% 85%);filter:drop-shadow(20px 15px 18px #0009)}
  .shell::before{right:calc(50% + var(--cabinet-width) / 2 + 5vw);background:linear-gradient(180deg,transparent 0 26%,#a695624f 26.1% 26.4%,#29372ee8 26.5% 28.1%,#030b11df 28.2% 29%,transparent 29.2% 68%,#7b77534f 68.1% 68.4%,#1e302fe8 68.5% 70.1%,#030b11df 70.2% 71%,transparent 71.2%),linear-gradient(100deg,#030b11 0 15%,#b59a64 16%,#75694b 19%,#3c4438 25%,#253536 43%,#101f26 74%,#040d13 75%)}
  .shell::after{left:calc(50% + var(--cabinet-width) / 2 + 6vw);top:15%;bottom:27%;width:clamp(66px,8vw,190px);transform:scaleX(-1);background:linear-gradient(180deg,transparent 0 15%,#86a7a44f 15.1% 15.5%,#233c40ed 15.6% 18.8%,#01090ee8 18.9% 20%,transparent 20.2% 72%,#738f894f 72.1% 72.5%,#1a3036ed 72.6% 75.8%,#030b11e8 75.9% 77%,transparent 77.2%),linear-gradient(90deg,#030b11 0 15%,#617575 16%,#3a5253 20%,#20373d 28%,#112831 62%,#06141d 75%);filter:drop-shadow(-20px 15px 18px #0009)}
  .metrics span{color:#c3d4cf}
  .control-hint{color:#e3e9dc}
  .controls::after{color:#dce6d9;letter-spacing:.015em}
  footer a{color:#d5e8e7}
}
/* The near casting meets the floor with a soft, broad contact shadow. */
@media(min-width:1000px) and (min-height:820px){
  .stage::before{content:"";position:fixed;pointer-events:none;z-index:-1;right:calc(50% + var(--cabinet-width) / 2 + 3vw);bottom:6%;width:clamp(120px,13vw,290px);height:3vh;background:radial-gradient(ellipse,#01070bd9 0 24%,#01070b85 48%,transparent 72%);transform:skewX(-25deg)}
}

/* Recovery is a deliberate bank-funded action, distinct from piece steering.
   The full-width bar aligns the shared brass material with its reserve dock. */
#rewind{border-color:#8c8061;background:linear-gradient(110deg,#443c2a,#1a2c32 64%)}
#rewind:disabled{border-color:#706d59;background:linear-gradient(110deg,#34392f,#182a31 72%);color:#b8c4bb}
#rewind:disabled .control-symbol{opacity:1}
.shell:has(#rewind:not(:disabled)) .reserve-bank span{color:#ffdf94}
#rewind:not(:disabled){background:linear-gradient(105deg,#89662c,#3c3e2b 62%,#253a36);border-color:#ffe0a0;color:#fff0bc;box-shadow:inset 0 1px #fff1b96b,inset 4px 0 #ffe0a0,0 3px 0 #040b11,0 0 18px #d3a85e2b}
@media(min-width:1000px) and (min-height:820px){
  #rewind::before{content:"↶";font-size:clamp(27px,3vh,64px);line-height:1;color:#e8d7a9}
  #rewind .control-symbol{font-size:clamp(13px,1.5vh,32px);letter-spacing:.045em}
  #rewind .control-hint{display:flex;align-items:center;gap:clamp(8px,1vh,22px);font-size:clamp(11px,1.25vh,27px)}
  #rewind .key-hint{margin:0;padding-left:clamp(8px,1vh,22px);border-left:1px solid #c0cfb94a}
}
@media(orientation:landscape) and (max-height:500px){
  #rewind::before{content:"↶";font-size:24px;line-height:1;color:#e8d7a9}
  #rewind .control-symbol{font-size:13px;letter-spacing:.045em}
  #rewind .control-hint{font-size:12px}
}

/* Put the recovery bar beside the cog dock: reading the balance and spending
   it now share one baseline. Notices sit at the top of the instrument deck. */
@media(min-width:1000px) and (min-height:820px){
  .metrics{margin-bottom:var(--action-height)}
  .controls{margin-bottom:0}
  footer{margin-bottom:calc(var(--deck-height) - var(--foot-height));padding-top:clamp(12px,1.4vh,30px);border-bottom:1px solid #8d9e8b42}
}
@media(orientation:landscape) and (max-height:500px){
  .metrics{margin-bottom:174px}
  .controls{margin-bottom:0}
  footer{margin-bottom:236px;padding-top:8px;border-bottom:1px solid #8d9e8b42}
}