:root{
  --ink:#eaf1fa; --dim:#9db3cf; --faint:rgba(234,241,250,.55);
  --glass:rgba(9,19,33,.42); --line:rgba(234,241,250,.14);
  --navy:#0b1624; --white:#fff;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--navy);color:var(--ink);font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;height:100dvh}
button{font:inherit;color:inherit;cursor:pointer}

/* the stage IS the app; a canvas is 300x150 unless told otherwise */
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.veil{position:fixed;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,22,36,.35),rgba(11,22,36,0) 22%,rgba(11,22,36,0) 62%,rgba(11,22,36,.55))}
.nogl{position:fixed;inset:0}.nogl img{width:100%;height:100%;object-fit:cover}

.mark{position:fixed;top:22px;left:24px;display:flex;align-items:center;gap:10px;z-index:5;
  font-weight:500;letter-spacing:.02em;font-size:18px}
.mark svg{width:26px;height:26px}
.corner{position:fixed;top:18px;right:20px;display:flex;align-items:center;gap:10px;z-index:5}
.net{font-size:12px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.ghost{background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:9px 16px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:14px}
.ghost:hover{border-color:rgba(234,241,250,.35)}

.hud{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);
  width:min(720px,calc(100% - 32px));z-index:5;display:grid;gap:14px;justify-items:center}
.status{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.readout{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:var(--glass);border:1px solid var(--line);border-radius:18px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden}
.cell{padding:14px 16px;min-width:0}
.cell + .cell{border-left:1px solid var(--line)}
.cell label{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.cell b{display:block;font-weight:500;font-size:18px;font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.take{min-width:240px;border:0;border-radius:999px;padding:15px 30px;background:var(--white);color:var(--navy);
  font-weight:600;font-size:16px;letter-spacing:.01em;box-shadow:0 12px 40px rgba(160,195,235,.25);
  transition:transform .12s ease,box-shadow .2s ease,opacity .2s}
.take:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 50px rgba(190,215,245,.38)}
.take:disabled{opacity:.55;cursor:default}
.hint{margin:0;font-size:12px;color:var(--faint)}

.index{position:fixed;left:22px;bottom:max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;
  gap:8px;z-index:5;align-items:flex-start}
.index button,.index a{background:none;border:0;padding:0;color:var(--dim);font-size:13px;text-decoration:none;letter-spacing:.02em}
.index button:hover,.index a:hover{color:var(--ink)}

.panel{position:fixed;top:0;right:0;height:100%;width:min(420px,100%);z-index:10;padding:72px 30px 30px;
  background:rgba(8,16,28,.72);border-left:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  overflow-y:auto}
.panel h2{margin:0 0 18px;font-weight:500;font-size:28px;letter-spacing:-.01em}
.close{position:absolute;top:18px;right:20px;background:none;border:0;font-size:26px;color:var(--dim);line-height:1}
.steps{margin:0;padding-left:20px;display:grid;gap:14px;color:var(--dim);line-height:1.55;font-size:15px}
.steps b{color:var(--ink);font-weight:500}
.split{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:24px 0}
.split div{border:1px solid var(--line);border-radius:14px;padding:12px}
.split span{display:block;font-size:22px;font-weight:500}
.split small{color:var(--dim);font-size:12px;line-height:1.35}
.fine{color:var(--faint);font-size:13px;line-height:1.6}
.facts{margin:0;display:grid;gap:0}
.facts div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.facts dt{color:var(--dim);font-size:13px}.facts dd{margin:0;font-size:14px;text-align:right;overflow-wrap:anywhere}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px!important}

.toast{position:fixed;top:70px;left:50%;transform:translateX(-50%);z-index:20;background:var(--glass);
  border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-size:13px;opacity:0;transition:opacity .25s;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);pointer-events:none;max-width:calc(100% - 32px);text-align:center}
.toast.show{opacity:1}

@media (max-width:640px){
  .mark{top:16px;left:16px;font-size:16px}
  .corner{top:12px;right:14px}.net{display:none}
  .readout{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cell:nth-child(3){border-left:0}
  .cell:nth-child(n+3){border-top:1px solid var(--line)}
  .cell b{font-size:16px}
  .take{width:100%;min-width:0}
  .index{left:auto;right:16px;top:58px;bottom:auto;flex-direction:row;gap:14px}
  .hud{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){.take{transition:none}}

/* arrow pad: the same arrows as the keyboard, for a mouse or a thumb */
.pad{position:fixed;right:22px;bottom:max(24px,env(safe-area-inset-bottom));z-index:6;display:grid;
  grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:6px}
.pad button{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--glass);
  border:1px solid var(--line);color:var(--ink);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  touch-action:manipulation;-webkit-user-select:none;user-select:none}
.pad button svg{width:20px;height:20px}
.pad button:hover{border-color:rgba(234,241,250,.4)}
.pad button:active,.pad button.on{background:rgba(234,241,250,.18)}
.pad .up{grid-column:2;grid-row:1}.pad .left{grid-column:1;grid-row:2}
.pad .down{grid-column:2;grid-row:2}.pad .right{grid-column:3;grid-row:2}
@media (max-width:640px){
  /* anchored to the bottom, above the contract chip, which sits above the HUD (~256px tall) */
  .pad{right:16px;top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 322px);grid-template-columns:repeat(3,40px);grid-template-rows:repeat(2,40px)}
  .pad button{width:40px;height:40px}
}

/* the contract, always one click away */
.ca{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;
  background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.ca:hover{border-color:rgba(234,241,250,.4)}
.ca .mono{font-size:12px!important;color:var(--dim)}
.live-dot{width:8px;height:8px;border-radius:50%;background:#7ee0b0;box-shadow:0 0 0 0 rgba(126,224,176,.6);animation:live 2s infinite}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(126,224,176,.55)}70%{box-shadow:0 0 0 8px rgba(126,224,176,0)}100%{box-shadow:0 0 0 0 rgba(126,224,176,0)}}
@media (max-width:640px){ .ca{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 272px);left:50%} }
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}