:root {
  --ui: 1;                 /* UI scale: bigger on big screens */
  color-scheme: dark;
  --void:#000; --panel:#020a05e8; --line:#0f5a2c; --text:#c9f5d6; --dim:#5f8a6e; --green:#00ff66;
  --display:"Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (min-width:1100px) { :root { --ui: 1.5; } }
@media (min-width:1500px) { :root { --ui: 2; } }
html, body { height:100%; margin:0; background:var(--void); color:var(--text); overflow:hidden; font:calc(14px * var(--ui))/1.6 var(--mono); }
canvas#world { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
button { font:inherit; }

.top { position:fixed; top:0; left:0; right:0; display:flex; align-items:center; gap:calc(16px * var(--ui));
       padding:calc(calc(14px * var(--ui)) + env(safe-area-inset-top, 0px)) calc(18px * var(--ui)) calc(14px * var(--ui)); pointer-events:none; }
.brand { font:calc(22px * var(--ui))/1 var(--display); color:var(--green); letter-spacing:.14em; text-shadow:0 0 calc(12px * var(--ui)) #00ff6688; }
.brand b { color:#fff; font-weight:normal; }
#wallet-slot { margin-left:auto; pointer-events:auto; }

.hint { position:fixed; left:0; right:0; bottom:calc(calc(24px * var(--ui)) + env(safe-area-inset-bottom, 0px)); text-align:center; pointer-events:none;
        font:calc(15px * var(--ui))/1.4 var(--display); letter-spacing:.14em; text-shadow:0 0 calc(12px * var(--ui)) #000; padding-inline:calc(16px * var(--ui)); }
.hint b { color:var(--green); font-weight:normal; border:calc(1px * var(--ui)) solid var(--line); padding:calc(1px * var(--ui)) calc(7px * var(--ui)); border-radius:calc(2px * var(--ui)); }

.keys { position:fixed; left:calc(18px * var(--ui)); bottom:calc(calc(18px * var(--ui)) + env(safe-area-inset-bottom, 0px)); display:grid; gap:calc(4px * var(--ui)); pointer-events:none;
        font:calc(12px * var(--ui))/1.3 var(--display); letter-spacing:.08em; color:var(--dim); background:#000b; border:calc(1px * var(--ui)) solid var(--line); padding:calc(10px * var(--ui)) calc(12px * var(--ui)); }
.keys kbd { font:inherit; color:var(--green); border:calc(1px * var(--ui)) solid #1d8a47; border-radius:calc(2px * var(--ui)); padding:0 calc(5px * var(--ui)); margin-right:calc(6px * var(--ui)); }
@media (max-width:700px) { .keys { display:none; } }
@media (min-width:701px) { .hint { padding-inline:calc(270px * var(--ui)); } }   /* keep the hint clear of the controls box */

.panel { position:fixed; right:calc(18px * var(--ui)); top:50%; transform:translate(calc(20px * var(--ui)), -50%); width:min(calc(380px * var(--ui)), calc(100vw - calc(36px * var(--ui))));
         background:var(--panel); border:calc(1px * var(--ui)) solid var(--line); box-shadow:0 0 calc(40px * var(--ui)) #00ff6614; padding:calc(20px * var(--ui)) calc(22px * var(--ui));
         opacity:0; pointer-events:none; transition:opacity .3s, transform .3s; backdrop-filter:blur(calc(4px * var(--ui))); --c:var(--green); }
.panel.show { opacity:1; transform:translate(0, -50%); pointer-events:auto; border-color:color-mix(in srgb, var(--c) 45%, transparent); }
.panel .k { font:calc(12px * var(--ui))/1 var(--display); letter-spacing:.3em; color:var(--c); }
.panel h2 { margin:calc(8px * var(--ui)) 0 calc(6px * var(--ui)); font:calc(30px * var(--ui))/1.05 var(--display); color:#fff; letter-spacing:.06em; }
.panel .say { margin:0 0 calc(16px * var(--ui)); color:var(--text); font-style:italic; }
.panel .board { border:calc(1px * var(--ui)) dashed color-mix(in srgb, var(--c) 40%, transparent); padding:calc(12px * var(--ui)) calc(14px * var(--ui)); margin-bottom:calc(14px * var(--ui)); }
.panel .rate { font:calc(20px * var(--ui))/1.2 var(--display); color:#fff; }
.panel .rate b { color:var(--c); font-weight:normal; }
.panel .src { margin-top:calc(6px * var(--ui)); font:calc(11px * var(--ui))/1 var(--display); letter-spacing:.14em; color:var(--dim); }
.panel .act { width:100%; padding:calc(12px * var(--ui)); background:transparent; color:var(--c); border:calc(1px * var(--ui)) solid var(--c); font:calc(14px * var(--ui))/1 var(--display);
              letter-spacing:.14em; cursor:pointer; }
.panel .act:disabled { opacity:.45; cursor:not-allowed; }
@media (max-width:640px) { .panel { top:auto; bottom:calc(calc(64px * var(--ui)) + env(safe-area-inset-bottom, 0px)); transform:translateY(calc(20px * var(--ui))); } .panel.show { transform:none; } }

/* name tags over players (positioned by world.js every frame) */
.nametags { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.nametag { position:absolute; left:0; top:0; display:grid; justify-items:center; gap:calc(1px * var(--ui)); white-space:nowrap; will-change:transform;
           padding:calc(3px * var(--ui)) calc(8px * var(--ui)) calc(4px * var(--ui)); background:#000a; border:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c) 45%, transparent); border-radius:calc(2px * var(--ui));
           box-shadow:0 0 calc(12px * var(--ui)) color-mix(in srgb, var(--c) 18%, transparent); }
.nametag .nm { font:calc(15px * var(--ui))/1.1 var(--display); letter-spacing:.06em; color:#fff; font-weight:normal; text-shadow:0 0 calc(8px * var(--ui)) var(--c); }
.nametag .ad { font:calc(10px * var(--ui))/1.1 var(--mono); letter-spacing:.08em; color:var(--dim); }
.nametag .ad:empty { display:none; }
.nametag[data-state="anon"] .nm { color:var(--dim); font-family:var(--mono); font-size:calc(13px * var(--ui)); text-shadow:none; }
.nametag[data-state="anon"] { border-style:dashed; }
.nametag[data-state="decoding"] .nm { color:var(--green); text-shadow:0 0 calc(12px * var(--ui)) var(--green); }
.nametag.you { border-color:var(--green); }
.nametag.you .nm { color:var(--green); }

/* speech bubbles over the guides on the track (positioned by world.js) */
.bubbles { position:fixed; inset:0; pointer-events:none; overflow:hidden; }
.bubble { position:absolute; left:0; top:0; width:max-content; max-width:calc(280px * var(--ui)); will-change:transform; padding:calc(9px * var(--ui)) calc(12px * var(--ui)) calc(10px * var(--ui));
          background:#07100bdd; border:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c) 55%, transparent); border-radius:calc(10px * var(--ui));
          box-shadow:0 0 calc(22px * var(--ui)) color-mix(in srgb, var(--c) 22%, transparent); }
.bubble::after { content:""; position:absolute; left:50%; bottom:-7px; width:calc(12px * var(--ui)); height:calc(12px * var(--ui)); transform:translateX(-50%) rotate(45deg);
                 background:#07100bdd; border-right:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c) 55%, transparent);
                 border-bottom:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c) 55%, transparent); }
.bubble b { display:block; font:calc(12px * var(--ui))/1 var(--display); letter-spacing:.2em; color:var(--c); font-weight:normal; margin-bottom:calc(5px * var(--ui)); }
.bubble p { margin:0; font:calc(14px * var(--ui))/1.45 var(--mono); color:#e9f5ec; min-height:1.45em; }

/* ---------------------------------------------------------------- the intro: landing + character creator */
body.intro .keys, body.intro .top, body.intro .hint, body.intro .nametags, body.intro .bubbles { opacity:0; pointer-events:none; }
.keys, .top, .hint { transition:opacity .6s; }

.landing { position:fixed; inset:0; z-index:20; display:grid; place-items:center; overflow:hidden auto; padding:calc(24px * var(--ui)) 16px;
  text-align:center; background:radial-gradient(ellipse 70% 60% at 50% 45%, #0006 0%, #000b 60%, #000f 100%); }
.landing.leaving { animation:leave .8s ease-in-out forwards; pointer-events:none; }
/* CRT texture: fine, still scanlines */
.landing .scan { position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg, #0000 0 2px, #00000059 2px 3px); }
.landing .stage { display:grid; justify-items:center; gap:calc(14px * var(--ui)); max-width:100%; }
.landing .stage > * { animation:rise .9s cubic-bezier(.2,.8,.2,1) both; }
.landing .title { animation-delay:.1s; }  .landing h1 { animation-delay:.25s; }  .landing .sub { animation-delay:.4s; }
.landing .card { animation-delay:.55s; }  .landing .last { animation-delay:.7s; }

.landing .title { margin:0; font:clamp(5px, 1.25vw, calc(13px * var(--ui)))/1 var(--mono); overflow:hidden; max-width:100%; color:var(--green);
  filter:drop-shadow(0 0 calc(10px * var(--ui)) #00ff6677); }
.landing .title span { color:#0c7a3a; }
.landing h1 { margin:calc(4px * var(--ui)) 0 0; font:clamp(26px, 5vw, calc(52px * var(--ui)))/1.05 var(--display); letter-spacing:.08em; color:#fff; font-weight:normal;
  text-shadow:0 0 calc(22px * var(--ui)) #ffffff33; }
.landing h1 b { color:#b99bff; font-weight:normal; text-shadow:0 0 calc(18px * var(--ui)) #8a5cff, 0 0 calc(44px * var(--ui)) #8a5cff88; }
.landing .sub { margin:0; max-width:34em; color:var(--text); }
.landing .sub .easy { display:block; margin-top:.3em; font-weight:inherit; color:#ffd447; }   /* "No experience needed." on its own line, golden yellow */

/* the name card: a box-drawing frame with bright corner brackets */
.landing .card { position:relative; display:grid; justify-items:center; gap:calc(10px * var(--ui)); margin-top:calc(10px * var(--ui));
  padding:calc(22px * var(--ui)) calc(26px * var(--ui)) calc(20px * var(--ui)); max-width:100%; box-sizing:border-box;
  border:calc(1px * var(--ui)) solid #0f5a2c88; background:linear-gradient(180deg, #020d06d9, #000d); box-shadow:0 0 calc(60px * var(--ui)) #00ff660f, 0 calc(20px * var(--ui)) calc(60px * var(--ui)) #000c;
  --k:calc(14px * var(--ui)); --w:calc(2px * var(--ui));
  --corner:linear-gradient(var(--green), var(--green)); }
.landing .card::before, .landing .card::after { content:""; position:absolute; inset:calc(-1px * var(--ui)); pointer-events:none;
  background:var(--corner) 0 0 / var(--k) var(--w), var(--corner) 0 0 / var(--w) var(--k), var(--corner) 100% 100% / var(--k) var(--w), var(--corner) 100% 100% / var(--w) var(--k);
  background-repeat:no-repeat; filter:drop-shadow(0 0 calc(4px * var(--ui)) var(--green)); }
.landing .card::after { transform:scaleX(-1); }
.landing label { font:calc(12px * var(--ui))/1 var(--display); letter-spacing:.24em; color:var(--dim); text-transform:uppercase; }
.landing .name { display:flex; align-items:center; max-width:100%; border:calc(1px * var(--ui)) solid var(--line); background:#000e; transition:border-color .25s, box-shadow .25s; }
.landing .name:focus-within { border-color:#1d8a47; box-shadow:0 0 calc(18px * var(--ui)) #00ff6626; }
.landing .name.ok { border-color:var(--green); box-shadow:0 0 calc(22px * var(--ui)) #00ff6640, 0 0 calc(14px * var(--ui)) #00ff661a inset; }
.landing .name b { padding-left:calc(14px * var(--ui)); font:calc(18px * var(--ui))/1 var(--mono); color:var(--green); font-weight:normal; animation:blink 1.1s steps(1) infinite; }
.landing .name input { width:min(calc(220px * var(--ui)), 42vw); min-width:0; padding:calc(13px * var(--ui)) calc(4px * var(--ui)) calc(13px * var(--ui)) calc(10px * var(--ui));
  background:transparent; border:0; color:var(--green); caret-color:#fff; font:calc(18px * var(--ui))/1 var(--mono); text-align:right; text-shadow:0 0 calc(10px * var(--ui)) #00ff6666; }
.landing .name input::placeholder { color:#1f5a35; text-shadow:none; }
.landing .name input:focus { outline:none; }
.landing .name span { padding-right:calc(14px * var(--ui)); font:calc(18px * var(--ui))/1 var(--mono); color:#6fd3ff; white-space:nowrap; }
.landing .fine { margin:0; max-width:36em; font:calc(12px * var(--ui))/1.45 var(--mono); color:var(--dim); }
.landing .last { margin-top:calc(4px * var(--ui)); opacity:.8; }
.landing .row { display:flex; gap:calc(14px * var(--ui)); flex-wrap:wrap; align-items:center; justify-content:center; margin-top:calc(6px * var(--ui)); }
.landing .enter { font:calc(12px * var(--ui))/1 var(--mono); color:var(--dim); transition:opacity .3s; }
.landing .enter kbd { font:inherit; color:var(--green); border:calc(1px * var(--ui)) solid #1d8a47; border-radius:calc(2px * var(--ui)); padding:calc(2px * var(--ui)) calc(6px * var(--ui)); margin-left:calc(4px * var(--ui)); }
.landing .begin:disabled ~ .enter { display:none; }

/* the Begin button: brackets, a light sweep, and a heartbeat once it's ready */
.big.begin { position:relative; overflow:hidden; display:inline-flex; align-items:center; gap:calc(12px * var(--ui)); padding-inline:calc(30px * var(--ui)); }
.big.begin::before, .big.begin::after { position:absolute; top:50%; transform:translateY(-50%); color:var(--green); opacity:.7; transition:transform .25s, opacity .25s; }
.big.begin::before { content:"["; left:calc(10px * var(--ui)); }
.big.begin::after { content:"]"; right:calc(10px * var(--ui)); }
.big.begin i { font-style:normal; display:inline-block; transition:transform .25s; }
.big.begin span { position:relative; }
.big.begin:not(:disabled) { animation:ready 2.4s ease-in-out infinite; background-image:linear-gradient(100deg, #0000 30%, #00ff6640 50%, #0000 70%); background-size:250% 100%; background-position:120% 0; }
.big.begin:not(:disabled):hover, .big.begin:not(:disabled):focus-visible { background-position:-20% 0; transition:background-position .7s, box-shadow .2s, color .2s; color:#eafff1; }
.big.begin:not(:disabled):hover i, .big.begin:not(:disabled):focus-visible i { transform:translateX(calc(5px * var(--ui))); }
.big.begin:not(:disabled):hover::before, .big.begin:not(:disabled):focus-visible::before { transform:translate(calc(-4px * var(--ui)), -50%); opacity:1; }
.big.begin:not(:disabled):hover::after, .big.begin:not(:disabled):focus-visible::after { transform:translate(calc(4px * var(--ui)), -50%); opacity:1; }
.big.begin:disabled { opacity:.35; border-style:dashed; box-shadow:none; }

@keyframes rise { from { opacity:0; transform:translateY(calc(12px * var(--ui))); } }
@keyframes ready { 50% { box-shadow:0 0 calc(18px * var(--ui)) #00ff6633 inset, 0 0 calc(26px * var(--ui)) #00ff6655; } }
@keyframes leave { to { opacity:0; transform:scale(1.04); } }
@media (max-width:520px) {
  .landing .card { padding:18px 14px 16px; }
  .landing .name b { padding-left:10px; }
  .landing .name input, .landing .name span { font-size:16px; }          /* 16px stops iOS zooming into the field */
  .landing .enter { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .landing, .landing .stage > *, .big.begin:not(:disabled), .landing .name b { animation:none !important; }
}

.big { padding:calc(14px * var(--ui)) calc(26px * var(--ui)); background:#00ff6614; color:var(--green); border:calc(1px * var(--ui)) solid var(--green); border-radius:calc(2px * var(--ui));
  font:calc(16px * var(--ui))/1 var(--display); letter-spacing:.12em; cursor:pointer; box-shadow:0 0 calc(18px * var(--ui)) #00ff6633 inset; transition:background .2s, box-shadow .2s; }
.big:hover:not(:disabled), .big:focus-visible { background:#00ff6630; box-shadow:0 0 calc(24px * var(--ui)) #00ff6666 inset, 0 0 calc(18px * var(--ui)) #00ff6644; outline:none; }
.big:disabled { opacity:.4; cursor:not-allowed; }
.big.alt { color:#b99bff; border-color:#b99bff; background:#8a5cff14; box-shadow:0 0 calc(18px * var(--ui)) #8a5cff33 inset; }


/* ---------------------------------------------------------------- cut scenes */
body.in-scene .hint, body.in-scene .panel, body.in-scene .bubbles { opacity:0; pointer-events:none; }
.story { position:fixed; inset:0; z-index:30; pointer-events:none; }
.story .skip { position:absolute; right:calc(18px * var(--ui)); top:calc(64px * var(--ui)); padding:calc(7px * var(--ui)) calc(12px * var(--ui)); background:#000a; color:var(--dim); border:calc(1px * var(--ui)) solid var(--line);
  border-radius:calc(2px * var(--ui)); font:calc(12px * var(--ui))/1 var(--display); letter-spacing:.14em; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .4s; }
.story.on .skip { opacity:1; pointer-events:auto; }
.story .skip:hover { color:#fff; border-color:#fff; }

.dialog { position:absolute; left:50%; bottom:calc(24px * var(--ui)); transform:translate(-50%, calc(20px * var(--ui))); width:min(calc(1180px * var(--ui)), calc(100vw - calc(28px * var(--ui))));
  display:grid; grid-template-columns:auto 1fr; gap:calc(18px * var(--ui)); align-items:center; padding:calc(14px * var(--ui)) calc(20px * var(--ui)) calc(16px * var(--ui)) calc(14px * var(--ui)); background:#030308ee;
  border:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c, #a98bff) 50%, transparent); box-shadow:0 0 calc(30px * var(--ui)) color-mix(in srgb, var(--c, #a98bff) 25%, transparent);
  opacity:0; transition:opacity .3s, transform .3s; cursor:pointer; }
.dialog.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.dialog .portrait { margin:0; font:calc(12px * var(--ui))/1.05 var(--mono); color:var(--c); text-shadow:0 0 calc(8px * var(--ui)) var(--c); }
.dialog .who { display:block; font:calc(16px * var(--ui))/1 var(--display); letter-spacing:.24em; text-transform:uppercase; color:var(--c); font-weight:normal; margin-bottom:calc(8px * var(--ui)); }
.dialog .who.ens { text-transform:none; letter-spacing:.06em; font-size:calc(18px * var(--ui)); margin-bottom:calc(3px * var(--ui)); }   /* an ENS name: wizard.eth */
.dialog .whoaddr { display:block; margin-bottom:calc(8px * var(--ui)); font:calc(11px * var(--ui))/1.2 var(--mono); color:var(--dim); letter-spacing:.04em; word-break:break-all; }
.dialog .whoaddr:empty { display:none; }
.dialog .line { margin:0; min-height:3.2em; font:calc(24px * var(--ui))/1.5 var(--mono); color:#f1ecff; }
.dialog.shout .line { min-height:0; font:calc(50px * var(--ui))/1.15 var(--display); letter-spacing:.06em; color:var(--c);   /* a shout: api.say(who, text, { big: true }) */
  text-shadow:0 0 calc(14px * var(--ui)) color-mix(in srgb, var(--c) 70%, transparent); }
.dialog .more { display:block; margin-top:calc(6px * var(--ui)); text-align:right; font:calc(13px * var(--ui))/1 var(--display); letter-spacing:.16em; color:var(--dim); animation:blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.3 } }
@media (max-width:600px) { .dialog { grid-template-columns:1fr; } .dialog .portrait { display:none; } .dialog .line { font-size:calc(15px * var(--ui)); } .dialog.shout .line { font-size:calc(28px * var(--ui)); } }

.story .stage { position:absolute; inset:0; display:grid; place-items:center; padding:12vh calc(16px * var(--ui)); opacity:0; transition:opacity .35s; }
.story .stage.show { opacity:1; pointer-events:auto; }
.spanel { width:min(calc(460px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); max-height:78vh; overflow:auto; display:grid; gap:calc(12px * var(--ui)); padding:calc(22px * var(--ui)); background:#030308f2;
  border:calc(1px * var(--ui)) solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow:0 0 calc(40px * var(--ui)) color-mix(in srgb, var(--c) 30%, transparent); }
.spanel.wide { width:min(calc(640px * var(--ui)), calc(100vw - calc(32px * var(--ui)))); }
.spanel .k { font:calc(11px * var(--ui))/1.3 var(--display); letter-spacing:.22em; color:var(--c); }
.spanel h2 { margin:0; font:calc(28px * var(--ui))/1.1 var(--display); color:#fff; font-weight:normal; letter-spacing:.05em; }
.spanel p { margin:0; color:var(--text); line-height:1.55; }
.spanel .note { font:calc(13px * var(--ui))/1.45 var(--mono); color:var(--dim); }
.spanel .board { border:calc(1px * var(--ui)) dashed color-mix(in srgb, var(--c) 45%, transparent); padding:calc(12px * var(--ui)) calc(14px * var(--ui)); display:grid; gap:calc(6px * var(--ui)); }
.spanel .lbl { font:calc(11px * var(--ui))/1 var(--display); letter-spacing:.18em; color:var(--dim); text-transform:uppercase; }
.spanel .addr { font:calc(15px * var(--ui))/1.3 var(--mono); color:var(--c); word-break:break-all; }
.spanel .ens { grid-auto-flow:column; justify-content:start; align-items:center; gap:calc(12px * var(--ui)); }
.spanel .ens .arrow { color:var(--dim); }
.spanel .ens .name { font:calc(20px * var(--ui))/1 var(--display); color:#fff; font-weight:normal; text-shadow:0 0 calc(10px * var(--ui)) var(--c); }
.spanel .act { padding:calc(12px * var(--ui)); background:transparent; color:var(--c); border:calc(1px * var(--ui)) solid var(--c); border-radius:calc(2px * var(--ui)); font:calc(14px * var(--ui))/1 var(--display);
  letter-spacing:.1em; cursor:pointer; }
.spanel .act:hover:not(:disabled) { background:color-mix(in srgb, var(--c) 18%, transparent); }
.spanel .act:disabled { opacity:.4; cursor:not-allowed; }
.spanel .words { margin:0; padding:calc(14px * var(--ui)) calc(14px * var(--ui)) calc(14px * var(--ui)) calc(48px * var(--ui)); display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(8px * var(--ui)) calc(18px * var(--ui)); border:calc(1px * var(--ui)) solid var(--c);
  background:repeating-linear-gradient(0deg, #ffffff05 0 calc(2px * var(--ui)), transparent calc(2px * var(--ui)) calc(4px * var(--ui))); font:calc(16px * var(--ui))/1.2 var(--mono); color:#fff; }
.spanel .words li::marker { color:var(--c); }
.spanel .words.blur { filter:blur(calc(3px * var(--ui))); opacity:.7; user-select:none; }   /* the paper in your pocket: you know what is on it */
@media (max-width:520px) { .spanel .words { grid-template-columns:repeat(2, 1fr); } }
.spanel .check { display:flex; gap:calc(8px * var(--ui)); align-items:flex-start; font:calc(13px * var(--ui))/1.4 var(--mono); color:var(--text); cursor:pointer; }
.spanel .choices { display:grid; grid-template-columns:1fr 1fr; gap:calc(8px * var(--ui)); }
.spanel .act.ghost { color:var(--dim); border-color:var(--line); }                  /* the quiet way out: "not now" */
.spanel .act.ghost:hover:not(:disabled) { color:#fff; border-color:#fff; background:transparent; }
.spanel .ens .label { width:calc(9em); min-width:0; padding:calc(8px * var(--ui)) calc(10px * var(--ui)); background:#000; color:#fff; border:calc(1px * var(--ui)) solid var(--c);
  border-radius:calc(2px * var(--ui)); font:calc(20px * var(--ui))/1 var(--display); letter-spacing:.03em; outline:none; }
.spanel .ens .label:focus { box-shadow:0 0 calc(12px * var(--ui)) color-mix(in srgb, var(--c) 50%, transparent); }
body.in-scene .keys { opacity:0; }
body[data-scene="wizard-intro"] .top { opacity:0; pointer-events:none; }   /* the first cut scene is just him and you */

.story .catch { position:absolute; inset:0; pointer-events:none; cursor:pointer; }
.story.talking .catch { pointer-events:auto; }

/* the step-by-step transaction panel */
.spanel .tx { grid-template-columns:1fr 1fr; gap:calc(8px * var(--ui)) calc(16px * var(--ui)); }
.spanel .tx > div { display:grid; gap:calc(3px * var(--ui)); }
.spanel .tx code { font:calc(14px * var(--ui))/1.2 var(--mono); color:#fff; }
.txsteps { margin:0; padding:0; list-style:none; display:grid; gap:calc(8px * var(--ui)); counter-reset:s; }
.txsteps li { display:grid; grid-template-columns:calc(26px * var(--ui)) 1fr; column-gap:calc(10px * var(--ui)); opacity:.35; transition:opacity .3s; }
.txsteps li::before { counter-increment:s; content:counter(s); grid-row:span 2; display:grid; place-items:center; width:calc(22px * var(--ui)); height:calc(22px * var(--ui));
  border:1px solid var(--c); border-radius:50%; font:calc(12px * var(--ui))/1 var(--display); color:var(--c); }
.txsteps li b { font:calc(15px * var(--ui))/1.3 var(--display); color:#fff; font-weight:normal; }
.txsteps li span { font:calc(13px * var(--ui))/1.4 var(--mono); color:var(--dim); }
.txsteps li[data-state="active"] { opacity:1; }
.txsteps li[data-state="active"]::before { content:"…"; animation:blink .8s infinite; }
.txsteps li[data-state="done"] { opacity:1; }
.txsteps li[data-state="done"]::before { content:"✓"; background:var(--c); color:#000; }
.spanel .txout { display:grid; gap:calc(4px * var(--ui)); }
.spanel .hash { font:calc(13px * var(--ui))/1.3 var(--mono); color:var(--c); word-break:break-all; }
.spanel .txout a { color:var(--c); font:calc(13px * var(--ui))/1 var(--display); }
.spanel .act.ghost { color:var(--dim); border-color:var(--line); }

/* THE GRAND EXCHANGE WINDOW (exchange.js): an ASCII box. Every line is 48 characters: a border, 44 of content,
   a border; rules stretch to fill so the frame stays square even if a glyph falls back to another font */
.ax { position:fixed; inset:0; z-index:40; display:grid; place-items:center; background:#000b; padding:12px; overflow:auto; }
/* RuneScape in ASCII: gold headings, a brown-gold frame, the inventory left and the trade screen right */
.ax-box { --pink:#ff007a; --gold:#ff981f; --frame:#8a6d3b; display:grid; grid-template-columns:auto auto; gap:0 2ch; align-items:start;
  font:min(calc(15px * var(--ui)), calc((100vw - 32px) / 45))/1.4 var(--mono); color:var(--text); }
.ax-pane { --w:40; background:#0b0805f2; box-shadow:0 0 30px #000; }
@media (max-width:900px) { .ax-box { grid-template-columns:auto; gap:1em; font-size:min(calc(15px * var(--ui)), calc((100vw - 32px) / 27)); } }
.ax-line { display:flex; width:calc((var(--w) + 4) * 1ch); white-space:pre; }
.ax-in { flex:0 0 calc(var(--w) * 1ch); width:calc(var(--w) * 1ch); overflow:hidden; display:flex; align-items:baseline; }
.ax-gold { color:var(--gold); }
.ax-gridrow { position:relative; width:calc((var(--w) + 4) * 1ch); }
.ax-gridrow::before, .ax-gridrow::after { content:""; position:absolute; top:0; bottom:0; width:1px; background:var(--frame); }   /* the frame's sides, where │ would sit */
.ax-gridrow::before { left:.5ch; } .ax-gridrow::after { right:.5ch; }
.ax-slots { display:grid; grid-template-columns:repeat(3, 9ch); justify-content:center; gap:.2em 1ch; padding:.4em 0; }
.ax-slot { white-space:pre; line-height:1.15; text-align:left; color:var(--frame) !important; }
.ax-slot.empty { color:#3a2e1c !important; }
.ax-slot .ax-big { color:#fff; }
.ax-slot .ax-qty { color:#ffff00; }
button.ax-slot:hover { color:var(--gold) !important; background:#ff981f14 !important; }
button.ax-slot[aria-pressed="true"] { color:var(--pink) !important; background:#ff007a14 !important; }
.ax-line.ax-b, .ax-b { color:var(--frame); }
.ax-fill { flex:1 1 0; min-width:0; overflow:hidden; }
.ax-line > * { flex:none; }
.ax-line > .ax-fill { flex:1 1 0; }
.ax-line > .ax-in { flex:0 0 calc(var(--w) * 1ch); }
.ax-pink { color:var(--pink); }
.ax-h { color:var(--green); }
.ax-hi { color:#fff; }
.ax-dim { color:var(--dim); }
.ax-warn { color:#ff6b6b; }
.ax-ok { color:var(--green); }
.ax-foot { grid-column:1 / -1; margin-top:.5em; color:var(--dim); font-size:.8em; white-space:normal; text-align:center; }
.ax button { font:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer; white-space:pre; }
.ax-row { width:100%; text-align:left; color:var(--text); }
.ax-ic { display:inline-block; width:1ch; overflow:visible; text-align:center; }   /* icons from fallback fonts can be wider: keep the columns straight */
.ax-line[hidden] { display:none; }
.ax-row:hover { background:#00ff6614; color:#fff; }
.ax-row[aria-pressed="true"] { color:#fff; }
.ax-link { color:var(--green); text-decoration:none; }
.ax-link:hover, .ax-link:focus-visible { color:#fff; outline:none; text-decoration:underline; }
a.ax-link { color:var(--pink); }
.ax-amt { width:10ch; font:inherit; color:#fff; background:transparent; border:0; padding:0; caret-color:var(--pink); }
.ax-amt:focus { outline:none; background:#ff007a1a; }
.ax-go { color:var(--pink) !important; }
.ax-go:hover:not(:disabled), .ax-go:focus-visible { background:var(--pink) !important; color:#000 !important; outline:none; }
.ax-go:disabled { opacity:.35; cursor:not-allowed; }
.ax-st.todo { color:var(--dim); }
.ax-st.active { color:var(--pink); animation:blink .8s infinite; }
.ax-st.done { color:var(--green); }
.ax-st.fail { color:#ff6b6b; }

/* THE QUEST SCROLL: a scuffed, torn scrap of old paper with dark ink, like a RuneScape quest journal. Used for the
   practice wallet and its twelve words (.spanel.paper). The torn outline is fixed, so it is always the same scrap. */
.spanel.paper { --c:#3b2610; --ink:#1b1209; color:var(--ink); border:0; border-radius:0;
  padding:calc(30px * var(--ui)) calc(32px * var(--ui));
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #0000 55%, #6b4a1f55 100%),            /* darker, grubbier towards the edges */
    radial-gradient(circle at 12% 18%, #7a52202e 0 4%, #0000 9%),                      /* a couple of old stains */
    radial-gradient(circle at 86% 78%, #7a522238 0 5%, #0000 11%),
    radial-gradient(circle at 70% 12%, #fff6d833 0 6%, #0000 14%),
    repeating-linear-gradient(97deg, #0000 0 calc(7px * var(--ui)), #8a6a3a0d calc(7px * var(--ui)) calc(8px * var(--ui))),   /* paper fibres */
    linear-gradient(172deg, #ecdcb2, #dcc592 55%, #cfb47c);
  box-shadow:inset 0 0 calc(34px * var(--ui)) #5a3a1488, inset 0 0 calc(6px * var(--ui)) #4a2e0c99;   /* scorched, worn edges */
  clip-path:polygon(0.0% 0.4%, 4.5% 2.6%, 9.1% 2.2%, 13.6% 0.0%, 18.2% 1.8%, 22.7% 0.9%, 27.3% 0.2%, 31.8% 1.0%, 36.4% 0.4%, 40.9% 0.1%, 45.5% 0.3%, 50.0% 0.1%, 54.5% 0.9%, 59.1% 0.6%, 63.6% 0.4%, 68.2% 1.5%, 72.7% 0.7%, 77.3% 0.3%, 81.8% 0.5%, 86.4% 0.9%, 90.9% 0.3%, 95.5% 0.6%, 99.2% 0.0%, 97.2% 4.5%, 99.2% 9.1%, 97.5% 13.6%, 99.2% 18.2%, 99.0% 22.7%, 99.2% 27.3%, 99.4% 31.8%, 99.1% 36.4%, 99.5% 40.9%, 99.9% 45.5%, 99.3% 50.0%, 99.1% 54.5%, 99.6% 59.1%, 100.0% 63.6%, 98.5% 68.2%, 99.2% 72.7%, 99.7% 77.3%, 97.3% 81.8%, 99.4% 86.4%, 99.1% 90.9%, 99.7% 95.5%, 100.0% 99.6%, 95.5% 98.9%, 90.9% 99.8%, 86.4% 99.7%, 81.8% 99.4%, 77.3% 100.0%, 72.7% 99.6%, 68.2% 99.0%, 63.6% 99.4%, 59.1% 97.0%, 54.5% 99.1%, 50.0% 99.1%, 45.5% 97.6%, 40.9% 98.5%, 36.4% 99.8%, 31.8% 98.6%, 27.3% 99.9%, 22.7% 100.0%, 18.2% 99.3%, 13.6% 99.7%, 9.1% 99.6%, 4.5% 99.1%, 0.5% 100.0%, 1.7% 95.5%, 0.3% 90.9%, 2.5% 86.4%, 0.6% 81.8%, 2.4% 77.3%, 1.1% 72.7%, 0.8% 68.2%, 0.4% 63.6%, 0.8% 59.1%, 0.9% 54.5%, 0.2% 50.0%, 1.1% 45.5%, 0.9% 40.9%, 0.8% 36.4%, 0.6% 31.8%, 1.6% 27.3%, 0.3% 22.7%, 1.1% 18.2%, 1.0% 13.6%, 1.1% 9.1%, 0.2% 4.5%); }
.story .stage:has(.paper) { filter:drop-shadow(0 calc(10px * var(--ui)) calc(18px * var(--ui)) #000c); }
.spanel.paper h2 { color:var(--ink); text-align:center; }
.spanel.paper p, .spanel.paper .words li { color:var(--ink); }
.spanel.paper .lbl { color:#5a4020; }
.spanel.paper .addr { color:var(--ink); }
.spanel.paper .board, .spanel.paper .words { border-color:#5a3a1466; background:#fff4d21f; }
.spanel.paper .act { color:var(--ink); border-color:#3b2610; background:#fff4d233; }
.spanel.paper .act:hover:not(:disabled) { background:#3b261022; }

/* a logo and a name above a panel's heading (ENS, MetaMask) */
.spanel .brandrow { display:flex; align-items:center; gap:calc(10px * var(--ui)); }
.spanel .brandrow img { width:calc(34px * var(--ui)); height:auto; }
.spanel .brandrow b { font:calc(15px * var(--ui))/1.2 var(--display); color:#fff; font-weight:normal; letter-spacing:.04em; }
a.act { display:grid; place-items:center; text-align:center; text-decoration:none; }
.spanel .brandrow span { font:calc(12px * var(--ui))/1.2 var(--mono); color:var(--dim); }

/* THE TOLL: a real Sepolia transaction, shown as it really happens */
.spanel.txpanel { position:relative; }
.spanel .txred { font:calc(15px * var(--ui))/1.4 var(--display); letter-spacing:.04em; color:#ff5b5b; }
.spanel .tx code.gold { color:#ffc93a; }
.spanel .addrfull { display:block; font:calc(10px * var(--ui))/1.35 var(--mono); word-break:break-all; letter-spacing:0; }
.spanel .addrfull.wiz { color:#ff6b6b; }
.spanel .addrfull.gob { color:#5dff7a; }
.spanel .act.send { background:#1fd96a; color:#012; border-color:#1fd96a; }
.spanel .act.send:hover:not(:disabled) { background:#4dff8e; border-color:#4dff8e; }
.txsteps li[data-state="fail"] { opacity:1; }
.txsteps li[data-state="fail"]::before { content:"✕"; background:#ff5b5b; color:#000; }
.spanel .receipt { display:grid; gap:calc(8px * var(--ui)); padding:calc(12px * var(--ui)) calc(14px * var(--ui)); border:calc(1px * var(--ui)) solid #1fd96a88; background:#1fd96a0f; }
.spanel .receipt .ok { font:calc(15px * var(--ui))/1.2 var(--display); color:#4dff8e; letter-spacing:.04em; }
.spanel .receipt .rrow { display:grid; gap:calc(2px * var(--ui)); }
.spanel .receipt code { font:calc(12px * var(--ui))/1.35 var(--mono); color:#fff; word-break:break-all; }
.spanel .act.chain { color:#4dff8e; border-color:#4dff8e; }
.spanel .cheeky { position:absolute; right:calc(6px * var(--ui)); bottom:calc(4px * var(--ui)); padding:calc(2px * var(--ui)) calc(6px * var(--ui)); background:none; border:0;
  color:#ff4d4d; font:calc(11px * var(--ui))/1 var(--mono); cursor:pointer; opacity:.8; }   /* carry on without it, for the demo */
.spanel .cheeky:hover { color:#ff8080; opacity:1; }
.txpanel .txsteps { gap:calc(5px * var(--ui)); }
.txpanel .txsteps li span { display:none; }                          /* each step explains itself only while it's happening (or if it failed) */
.txpanel .txsteps li[data-state="active"] span, .txpanel .txsteps li[data-state="fail"] span { display:block; }
.spanel .receipt .rpair { display:grid; grid-template-columns:1fr 1fr; gap:calc(12px * var(--ui)); }
.spanel [hidden] { display:none !important; }                        /* hidden means hidden, even for the grid boxes */
.dialog[data-who="elf"] .who.ens { background:linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #7dff9a, #6fd3ff, #a98bff, #ff7ae0, #ff5f6d) 0 0 / 300% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:rainbow 3s linear infinite; }   /* machineelf.eth, shimmering */
@keyframes rainbow { to { background-position:300% 0; } }
@media (prefers-reduced-motion:reduce) { .dialog[data-who="elf"] .who.ens { animation:none; } }

/* a claimed name: the proof it's on-chain (or why it's only in this browser for now) */
.spanel .claimbox[hidden] { display:none; }
.spanel .claimok, .spanel .claimlocal { display:grid; gap:calc(8px * var(--ui)); padding:calc(12px * var(--ui)) calc(14px * var(--ui)); }
.spanel .claimok { border:calc(1px * var(--ui)) solid #1fd96a88; background:#1fd96a0f; }
.spanel .claimok b { font:calc(16px * var(--ui))/1.3 var(--display); color:#4dff8e; font-weight:normal; letter-spacing:.03em; }
.spanel .claimlocal { border:calc(1px * var(--ui)) dashed #ffc93a88; }
.spanel .claimlocal b { font:calc(15px * var(--ui))/1.3 var(--display); color:#ffc93a; font-weight:normal; }
.spanel .claimok span, .spanel .claimlocal span { font:calc(13px * var(--ui))/1.45 var(--mono); color:var(--text); }