/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sky-deep); color: var(--ink); height: 100%; }
body { margin: 0; height: 100%; font: 15px/1.5 var(--display); overflow: hidden; -webkit-font-smoothing: antialiased; overscroll-behavior: none; }
[hidden] { display: none !important; }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--ink); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 12px; top: 12px; }
.k { font: 500 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; }

/* ---------------------------------------------------------------- chrome */
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 12px; background: var(--white); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); cursor: default; }
.chip--brand { background: var(--yellow); }
.chip b { color: var(--blue); font-weight: 700; }
button.chip { cursor: pointer; }
button.chip:hover { background: var(--yellow); }
.hud { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 12px 14px; pointer-events: none; }
.hud > div { display: flex; gap: 8px; flex-wrap: wrap; pointer-events: auto; }
.chat { position: fixed; left: 14px; bottom: 14px; z-index: 20; width: min(420px, 60vw); max-height: 30vh; overflow: hidden; display: grid; align-content: end; gap: 4px; pointer-events: none; }
.chat p { font: 500 12px/1.35 var(--mono); color: var(--white); text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), 0 -1px 0 var(--ink), -1px 0 0 var(--ink); background: rgba(10, 10, 10, .55); padding: 6px 10px; border-radius: 6px; width: max-content; max-width: 100%; }
.chat p b { color: var(--yellow); font-weight: 500; }
.minimap { position: fixed; right: 14px; bottom: 14px; z-index: 20; width: 156px; aspect-ratio: 2600 / 1800; background: var(--green-deep); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 3px 3px 0 var(--ink); overflow: hidden; }
.minimap i { position: absolute; width: 8px; height: 8px; transform: translate(-50%, -50%); background: var(--yellow); border: 2px solid var(--ink); border-radius: 2px; }
.minimap i.is-read { background: var(--green-lite); }
.minimap i.mm-me { background: var(--blue); border-radius: 50%; width: 10px; height: 10px; z-index: 2; }
.minimap i.mm-lava { background: var(--red); border-radius: 4px; width: 14px; height: 8px; }
.stick { position: fixed; left: 18px; bottom: 120px; z-index: 21; width: 132px; height: 132px; border-radius: 50%; background: rgba(10, 10, 10, .35); border: 3px solid rgba(255, 255, 255, .6); touch-action: none; display: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; transform: translate(-50%, -50%); background: var(--white); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 3px 3px 0 var(--ink); }
@media (pointer: coarse) { .stick { display: block; } .chat { bottom: 14px; width: min(380px, 62vw); left: auto; right: 14px; bottom: 190px; } .minimap { width: 120px; } }
.flash { position: fixed; inset: 0; z-index: 19; background: var(--red); opacity: 0; pointer-events: none; }

/* ----------------------------------------------------------------- join */
.join { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: var(--blue); color: var(--white); transition: opacity .5s; }
.join.is-done { opacity: 0; pointer-events: none; }
.join__box { display: grid; gap: 12px; width: min(440px, 84vw); }
.join__k { font: 700 14px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.join__bar { height: 22px; background: var(--white); border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.join__bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--yellow); }
.join__pct { font: 500 12px/1 var(--mono); letter-spacing: .16em; }
.join__tip { font: 400 14px/1.45 var(--display); color: rgba(255, 255, 255, .85); margin-top: 8px; }
.join__h { font: 700 clamp(56px, 12vw, 120px)/.85 var(--display); letter-spacing: -.03em; color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); margin-bottom: 8px; }

/* ----------------------------------------------------------------- world */
.game { position: fixed; inset: 0; overflow: hidden; background: var(--sky); cursor: crosshair; }
.game[data-sc-act] { }
.world { position: absolute; left: 0; top: 0; width: 2600px; height: 1800px; will-change: transform; background: var(--green) radial-gradient(circle at 50% 50%, var(--green-lite) 0 6px, transparent 6.5px) 0 0 / 36px 36px; box-shadow: 0 0 0 40px var(--green-deep), 0 0 0 4000px var(--sky); }
.world::after { content: ""; position: absolute; inset: -6px; border: 6px solid var(--ink); pointer-events: none; }
.rig { position: absolute; width: 124px; height: 188px; transform: translate(-50%, -100%); pointer-events: none; }
.rig__svg { display: block; overflow: visible; width: 100%; height: 100%; }
.rig__shadow { position: absolute; left: 50%; bottom: -6px; width: 80px; height: 18px; background: rgba(0, 0, 0, .35); border-radius: 50%; transform: translateX(-50%); }
.station { position: absolute; transform: translate(-50%, -100%); }
.block { position: relative; background: var(--cream); border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset -10px 0 0 rgba(0, 0, 0, .12), 4px 4px 0 var(--ink); }
.block::before { content: ""; position: absolute; left: -3px; right: -3px; top: -18px; height: 18px; background: var(--white); border: 3px solid var(--ink); border-bottom: 0; border-radius: 4px 4px 0 0; transform: skewX(-30deg); transform-origin: 0 100%; }
.block--shop { background: var(--yellow); }
.block--tower { background: var(--blue); box-shadow: inset -10px 0 0 rgba(0, 0, 0, .25), 4px 4px 0 var(--ink); background-image: repeating-linear-gradient(180deg, transparent 0 46px, rgba(0, 0, 0, .35) 46px 49px); }
.block--shrine { background: var(--cream-deep); border-radius: 60px 60px 4px 4px; }
.block--terminal { background: #C9C9C9; }
.block--terminal::after { content: "NO"; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: var(--white); border: 3px solid var(--ink); padding: 8px 14px; font: 700 22px/1 var(--display); }
.block--booth { background: var(--white); }
.block--wardrobe { background: #8B5A2B; }
.block--server { background: #D8D0C0; background-image: repeating-linear-gradient(180deg, transparent 0 30px, rgba(0, 0, 0, .25) 30px 33px); }
.block--server::after { content: ""; position: absolute; right: 16px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #4CFF7A; border: 2px solid var(--ink); box-shadow: 0 33px 0 #4CFF7A, 0 66px 0 #4CFF7A, 0 99px 0 #4CFF7A; }
.pad { position: relative; height: 26px; background: repeating-conic-gradient(var(--ink) 0 25%, var(--white) 0 50%) 0 0 / 26px 26px; border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); }
.station__sign { position: absolute; left: 50%; bottom: calc(100% + 26px); transform: translateX(-50%); white-space: nowrap; background: var(--white); border: 3px solid var(--ink); border-radius: 6px; padding: 8px 12px; font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.station__sign::after { content: ""; position: absolute; left: 50%; top: 100%; width: 6px; height: 22px; margin-left: -3px; background: var(--ink); }
.station.is-read .station__sign { background: var(--green-lite); }
.station.is-near .station__sign { background: var(--yellow); }
.prompt { position: absolute; left: 50%; bottom: calc(100% + 78px); transform: translate(-50%, 6px); background: var(--ink); color: var(--white); border-radius: 6px; padding: 8px 12px; font: 700 12px/1 var(--mono); letter-spacing: .16em; white-space: nowrap; opacity: 0; transition: opacity .2s, transform .25s var(--snap); pointer-events: auto; cursor: pointer; border: 0; }
.station.is-near .prompt { opacity: 1; transform: translate(-50%, 0); }
.tree { position: absolute; transform: translate(-50%, -100%); width: 64px; height: 110px; pointer-events: none; }
.tree::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 22px; height: 44px; margin-left: -11px; background: #8B5A2B; border: 3px solid var(--ink); }
.tree::after { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 76px; background: var(--green-deep); border: 3px solid var(--ink); border-radius: 6px; box-shadow: inset -10px 0 0 rgba(0, 0, 0, .18); }
.kill { position: absolute; transform: translate(-50%, -100%); width: 60px; height: 30px; background: var(--red); border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 -8px 0 #A31F16; pointer-events: none; }
.lava { position: absolute; transform: translate(-50%, -50%); background: radial-gradient(ellipse at 50% 50%, #FF9A3C, var(--red) 55%, #7A0F0A); border: 4px solid var(--ink); border-radius: 50%; box-shadow: 0 0 40px rgba(255, 122, 26, .6); pointer-events: none; }

/* ---------------------------------------------------------------- windows */
dialog { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; margin: 0; display: grid; place-items: center; }
dialog:not([open]) { display: none; }
dialog::backdrop { background: rgba(10, 10, 10, .55); }
.win { width: min(760px, 92vw); max-height: 88vh; overflow: auto; background: var(--white); border: 4px solid var(--ink); border-radius: 12px; box-shadow: 8px 8px 0 var(--ink); color: var(--ink); }
.win__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; background: var(--blue); color: var(--white); border-bottom: 4px solid var(--ink); }
.win__t { font: 700 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.win__x { min-width: 44px; min-height: 36px; background: var(--white); color: var(--ink); border: 3px solid var(--ink); border-radius: 6px; font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; padding: 0 12px; }
.win__body { padding: 22px 24px 26px; display: grid; gap: 16px; }
.win__k { color: var(--blue); }
.win__h { font: 700 clamp(28px, 4vw, 46px)/.95 var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.win__fig { margin: 0; justify-self: start; }
.win__fig img { display: block; width: min(320px, 100%); height: auto; border: 3px solid var(--ink); border-radius: 8px; background: var(--cream); }
.win__fig--sprite img { border: 0; background: none; width: min(180px, 40vw); }
.win__p { font: 400 15.5px/1.55 var(--display); color: var(--ink); max-width: 62ch; }
.win__src { font: 400 12px/1.5 var(--mono); color: var(--ink-soft); }
.rows { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 12px 14px; background: var(--cream); border: 3px solid var(--ink); border-radius: 8px; }
.row__k { font: 700 12px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.row__v { font: 700 clamp(24px, 3vw, 34px)/1 var(--display); letter-spacing: -.02em; }
.row__u { grid-column: 1 / -1; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.bags { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 12px; }
.bag { margin: 0; display: grid; gap: 6px; background: var(--cream); border: 3px solid var(--ink); border-radius: 8px; padding: 8px; }
.bag img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 4px; }
.bag__tag { font: 700 11px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.bag__sub { font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); }
.panel { border: 3px solid var(--ink); border-radius: 10px; padding: 16px 18px 20px; background: var(--cream); }
.panel__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 2px solid rgba(0, 0, 0, .12); font: 500 11px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-soft); }
.panel__row b { font: 700 16px/1.2 var(--display); letter-spacing: 0; text-transform: none; color: var(--ink); overflow-wrap: anywhere; }
[data-state="pending"] [data-token-address] { color: var(--red); letter-spacing: .3em; font-family: var(--mono); }
.copy { font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.panel__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--ink); font: 700 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; }
.btn--ghost { background: var(--white); }
.panel__pending { margin-top: 14px; font: 400 12px/1.5 var(--mono); color: var(--ink-soft); }
[data-state="live"] .panel__pending { display: none; }
.legal { display: grid; gap: 8px; }
.legal p { font: 400 12px/1.5 var(--mono); color: var(--ink-soft); }
.list { display: grid; gap: 8px; }
.list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--cream); border: 3px solid var(--ink); border-radius: 8px; font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.list__row.is-read { border-color: var(--green-deep); }
.list__row.is-read::before { content: "✓ "; color: var(--green-deep); }
.mini { min-height: 36px; padding: 0 12px; background: var(--white); border: 3px solid var(--ink); border-radius: 6px; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.mini:hover { background: var(--yellow); }

@media (prefers-reduced-motion: reduce) {
  .join, .prompt { transition: none; }
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  .hud { padding: 10px; }
  .chip { min-height: 30px; padding: 0 8px; font-size: 11px; }
  .chip--players { display: none; }
  .win { width: 94vw; max-height: 86vh; border-radius: 10px; }
  .win__body { padding: 16px 16px 20px; gap: 12px; }
  .win__p { font-size: 14px; }
  .panel__row { grid-template-columns: 84px minmax(0, 1fr) auto; letter-spacing: .12em; }
  .btn { flex: 1 1 100%; }
  .row__v { font-size: 22px; }
}

/* the pad has the player standing on it, so its sign and prompt sit above his head */
.station[data-id="spawn"] .station__sign { bottom: calc(100% + 210px); }
.station[data-id="spawn"] .station__sign::after { display: none; }
.station[data-id="spawn"] .prompt { bottom: calc(100% + 262px); }

/* ---------------------------------------------------------------- 3D */
.gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.gl.is-drag { cursor: grabbing; }
.prompt3d { position: absolute; z-index: 6; transform: translate(-50%, -100%); background: var(--ink); color: var(--white); border: 0; border-radius: 6px; padding: 9px 12px; font: 700 12px/1 var(--mono); letter-spacing: .16em; white-space: nowrap; cursor: pointer; box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); }
.prompt3d::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.world, .station, .tree, .kill, .lava, .rig { display: none; }

/* ---------------------------------------------------------- your noob */
.join { overflow: auto; }
.join__box--char { width: min(680px, 92vw); margin: 0; }
.char { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--white); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); padding: 14px; color: var(--ink); }
.char__prev { width: 180px; height: 270px; display: block; background: linear-gradient(180deg, var(--sky), #C9E7FA); border: 3px solid var(--ink); border-radius: 8px; }
.char__form { display: grid; gap: 10px; min-width: 0; }
.char__lbl { display: grid; gap: 6px; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.char__in { font: 700 18px/1.2 var(--display); padding: 8px 10px; border: 3px solid var(--ink); border-radius: 8px; background: var(--cream); color: var(--ink); min-width: 0; width: 100%; }
.char__row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px; align-items: center; font: 700 11px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.sw { display: flex; flex-wrap: wrap; gap: 6px; }
.sw button, .faces button { width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 7px; background: var(--c); cursor: pointer; padding: 0; box-shadow: 2px 2px 0 var(--ink); }
.sw button.is-on, .faces button.is-on { outline: 3px solid var(--blue); outline-offset: 2px; }
.faces { display: flex; gap: 8px; }
.faces button { width: 40px; height: 40px; background: var(--yellow); }
.faces canvas { width: 100%; height: 100%; display: block; }
.join__box--char .btn { justify-self: start; }
.hud .chip--players b { color: var(--blue); }
.hud .chip--players.is-off b { color: var(--red); }
@media (max-width: 760px) {
  .join { align-items: start; padding: 16px 0; }
  .join__box--char { width: 94vw; }
  .char { grid-template-columns: 1fr; }
  .char__prev { width: 140px; height: 210px; margin: 0 auto; }
  .join__box--char .btn { justify-self: stretch; }
}

/* ------------------------------------------------------ chat, emotes, touch */
.chatbox { position: fixed; left: 14px; bottom: 14px; z-index: 22; display: flex; gap: 6px; width: min(420px, 60vw); }
.chatbox__in { flex: 1; min-width: 0; min-height: 40px; padding: 8px 12px; background: rgba(10, 10, 10, .72); color: var(--white); border: 3px solid var(--ink); border-radius: 8px; font: 500 13px/1.2 var(--mono); }
.chatbox__in::placeholder { color: rgba(255, 255, 255, .55); }
.chatbox__in:focus { outline: 3px solid var(--yellow); background: rgba(10, 10, 10, .9); }
.chatbox__send { min-height: 40px; padding: 0 12px; background: var(--yellow); border: 3px solid var(--ink); border-radius: 8px; font: 700 11px/1 var(--display); letter-spacing: .1em; cursor: pointer; }
.chat { bottom: 62px; }
.chat p.me b { color: var(--green-lite); }
.emotes { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 22; display: flex; gap: 6px; padding: 6px; background: rgba(10, 10, 10, .55); border: 3px solid var(--ink); border-radius: 12px; }
.emote { display: grid; justify-items: center; gap: 3px; min-width: 62px; min-height: 48px; padding: 5px 8px; background: var(--white); border: 3px solid var(--ink); border-radius: 8px; cursor: pointer; font: 700 10.5px/1 var(--display); letter-spacing: .08em; }
.emote b { font: 500 11px/1 var(--mono); color: var(--ink-soft); }
.emote:hover { background: var(--yellow); }
.touchbtns { display: none; }
@media (pointer: coarse) {
  .chatbox { display: none; left: 14px; right: 14px; bottom: 14px; width: auto; z-index: 26; }
  .chatbox.is-on { display: flex; }
  .chat { left: 14px; right: 150px; bottom: 300px; width: auto; }
  .emotes { display: none; left: 12px; right: 12px; bottom: 268px; transform: none; justify-content: center; }
  .emotes.is-on { display: flex; }
  .touchbtns { position: fixed; right: 18px; bottom: 150px; z-index: 21; display: grid; gap: 10px; justify-items: end; }
  .tbtn { min-width: 72px; min-height: 48px; padding: 0 14px; background: var(--white); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font: 700 12px/1 var(--display); letter-spacing: .1em; }
  .tbtn--jump { min-width: 88px; min-height: 64px; background: var(--yellow); font-size: 14px; }
  .minimap { bottom: 14px; }
}

/* ------------------------------------------------------------- weapons, hp */
.chip--hp i { display: block; width: 90px; height: 12px; background: var(--white); border: 3px solid var(--ink); border-radius: 6px; overflow: hidden; }
.chip--hp i::before { content: ""; display: block; width: var(--hp, 100%); height: 100%; background: var(--green); transition: width .2s; }
.chip--hp.is-low i::before { background: var(--red); }
.weapons { position: fixed; right: 190px; bottom: 14px; z-index: 22; display: flex; gap: 6px; padding: 6px; background: rgba(10, 10, 10, .55); border: 3px solid var(--ink); border-radius: 12px; }
.weapon { display: grid; justify-items: center; gap: 3px; min-width: 62px; min-height: 48px; padding: 5px 8px; background: var(--white); border: 3px solid var(--ink); border-radius: 8px; cursor: pointer; font: 700 10.5px/1 var(--display); letter-spacing: .08em; }
.weapon b { font: 500 11px/1 var(--mono); color: var(--ink-soft); }
.weapon:hover { background: var(--yellow); }
.weapon.is-cool { opacity: .5; }
.hitpop { position: absolute; z-index: 7; transform: translate(-50%, -100%); font: 700 22px/1 var(--display); color: var(--white); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; pointer-events: none; }
.dead { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; background: rgba(217, 48, 37, .35); pointer-events: none; }
.dead b { font: 700 clamp(40px, 8vw, 96px)/1 var(--display); color: var(--white); -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 6px 6px 0 var(--ink); }
@media (pointer: coarse) {
  .weapons { display: none; }
  .tbtn--atk { min-width: 88px; min-height: 64px; background: var(--red); color: var(--white); font-size: 14px; }
  .chip--hp i { width: 60px; }
}
@media (max-width: 760px) { .chip--hp span { display: none; } }

/* the RUN toggle lights up while sprinting */
.tbtn.is-on { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 3px var(--ink); }