/*
 * Rooftop - the interface.
 *
 * Everything here sits over a night scene, so it is built from smoked glass and
 * one warm accent: the colour of a lit cigarette. Nothing is a solid panel; a
 * heavy opaque HUD over a view is the fastest way to make a beautiful place
 * feel like a menu.
 */
:root {
  --ember: #ff7a3d;
  --ember-soft: #ffb27a;
  --ink: #e9e7e2;
  --dim: #a09a92;
  --glass: rgba(16, 16, 20, 0.42);
  --edge: rgba(255, 255, 255, 0.10);
  --font: ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05070c;
  color: var(--ink); font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

#view { display: block; position: fixed; inset: 0; width: 100%; height: 100%; }

#hud {
  position: fixed; inset: 0; pointer-events: none;
  font-size: 13px; letter-spacing: 0.01em;
  opacity: 0; transition: opacity .9s ease .3s;
}
body.playing #hud { opacity: 1; }

/* ------------------------------------------------------------ top left */
#topleft { position: absolute; top: 18px; left: 20px; }

#place {
  font-size: 11px; letter-spacing: 0.22em; color: var(--dim);
  text-transform: uppercase; margin-bottom: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
}
#place span { color: var(--ember-soft); }

#roster { display: flex; flex-direction: column; gap: 3px; }
.who {
  display: flex; align-items: center; gap: 7px;
  color: var(--dim); font-size: 12.5px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
}
.who.me { color: var(--ink); }
.who i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.who em { font-style: normal; color: rgba(255, 178, 122, .65); font-size: 11px; }

/* ---------------------------------------------------------------- feed */
#feed {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ev {
  font-size: 12.5px; color: rgba(255, 210, 180, .9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
  transition: opacity .4s linear;
}

/* ------------------------------------------------------------- reticle */
#reticle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; display: grid; place-items: center;
  opacity: 0; transition: opacity .25s ease;
}
body.aiming #reticle,
body.beinglit #reticle { opacity: 1; }
#reticle::after {
  content: ''; width: 3px; height: 3px; border-radius: 50%;
  background: var(--ember-soft); box-shadow: 0 0 8px var(--ember);
}
#aimRing {
  --p: 0;
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--ember) calc(var(--p) * 360deg), rgba(255, 255, 255, .13) 0);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 63%);
  mask: radial-gradient(circle, transparent 61%, #000 63%);
  transition: none;
}
#aimLabel {
  position: absolute; top: 52px; white-space: nowrap; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ember-soft);
  text-shadow: 0 1px 8px #000;
}

/* -------------------------------------------------------------- bottom */
#bottom {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 20px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  background: linear-gradient(to top, rgba(4, 5, 9, .72), transparent);
  padding-top: 70px;
}

#state {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim); text-shadow: 0 1px 8px #000;
}

#actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: center; pointer-events: auto; }

/* The secondary actions - offer one, tap the ash, sit down. Deliberately
   lighter than the item slots: these are things you can do, not things you are
   holding, and the bar should not compete with the three squares below it. */
.act {
  appearance: none; cursor: pointer; font: inherit; color: var(--ink);
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 10px; padding: 6px 12px 6px 9px;
  display: flex; align-items: baseline; gap: 8px;
  transition: border-color .18s, background .18s, transform .12s;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .4);
}
.act:hover { border-color: rgba(255, 140, 80, .5); background: rgba(38, 26, 20, .5); }
.act:active { transform: translateY(1px); }
.act .k {
  font-size: 10px; line-height: 1.35; color: var(--ember);
  border: 1px solid rgba(255, 122, 61, .45); border-radius: 5px; padding: 1px 5px;
}
.act .l { font-size: 12.5px; }
.act .s { font-size: 10.5px; color: var(--dim); }

/* The key hints along the very bottom. Present, never loud. */
#hints { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;
  color: rgba(160, 154, 146, .5); font-size: 11px; }
#hints b { color: rgba(230, 226, 220, .72); font-weight: 600; }

/* ------------------------------------------------------------- the hands */
/* Three slots, and the one you are holding. The whole control scheme is
   "hold a thing, use it", so what you are holding has to be unmistakable. */
#hint {
  font-size: 12px; letter-spacing: .05em; color: rgba(255, 178, 122, .85);
  text-shadow: 0 1px 10px #000; min-height: 16px;
}
#hint b { color: var(--ink); }

#items { position: relative; }
#slots { display: flex; gap: 12px; justify-content: center; pointer-events: auto; }
/* The objects themselves, drawn by slots.js into one transparent canvas laid
   over the three squares. Above the buttons so it is not behind their glass,
   and letting every click through to them. */
#itemsView {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  pointer-events: none; z-index: 2;
}

/* Three squares. The number is in the corner the way a hotbar's is, and the
   slot keeps its size whether or not there is anything in it - so the third
   one sits there visibly empty until you have a cigarette to put in it. */
.slot {
  position: relative; appearance: none; cursor: pointer; font: inherit;
  color: var(--ink); width: 88px; height: 88px; padding: 0;
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 2px; padding-bottom: 10px;
  transition: border-color .18s, background .18s, transform .12s, box-shadow .2s;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .45);
}
.slot:hover { border-color: rgba(255, 140, 80, .5); }
.slot:active { transform: translateY(1px); }

.slot .k {
  position: absolute; top: 7px; left: 9px;
  font-size: 10px; line-height: 1; color: rgba(255, 178, 122, .8);
}
.slot .l { font-size: 11px; letter-spacing: .01em; text-align: center; padding: 0 6px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.slot .s { font-size: 10px; color: var(--dim); }

/* Held: warm, lifted, unmistakable at a glance. */
.slot.on {
  background: linear-gradient(180deg, rgba(70, 40, 24, .8), rgba(44, 24, 14, .8));
  border-color: rgba(255, 140, 80, .8);
  box-shadow: 0 8px 34px rgba(255, 122, 61, .24), inset 0 1px 0 rgba(255, 190, 140, .2);
}
.slot.on .k { color: var(--ember); }

/* Empty: present, plainly, and doing nothing. */
.slot.empty {
  background: rgba(12, 12, 16, .3); border-style: dashed;
  border-color: rgba(255, 255, 255, .07); box-shadow: none; cursor: default;
}
.slot.empty .k { color: rgba(160, 154, 146, .45); }
.slot.empty:hover { border-color: rgba(255, 255, 255, .07); }

/* ---------------------------------------------------------------- chat */
#chat {
  position: absolute; left: 20px; bottom: 128px; width: min(360px, 34vw);
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
#chatLog {
  max-height: 30vh; overflow: hidden; display: flex; flex-direction: column;
  justify-content: flex-end; gap: 3px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%);
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
}
.msg { font-size: 13px; color: rgba(233, 231, 226, .88); text-shadow: 0 1px 9px rgba(0, 0, 0, .95); }
.msg b { font-weight: 600; margin-right: 5px; }

#chatForm { opacity: 0; pointer-events: none; transition: opacity .2s; }
body.chatting #chatForm { opacity: 1; pointer-events: auto; }
#chatInput {
  width: 100%; font: inherit; color: var(--ink); padding: 9px 13px;
  background: var(--glass); border: 1px solid rgba(255, 140, 80, .4);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-radius: 10px; outline: none;
}
#chatInput::placeholder { color: rgba(160, 154, 146, .6); }

/* ---------------------------------------------------------- connection */
#conn {
  position: fixed; right: 18px; top: 18px; display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  opacity: 0; transition: opacity .6s; text-shadow: 0 1px 8px #000;
}
body.playing #conn { opacity: 1; }
#conn .dot { width: 6px; height: 6px; border-radius: 50%; background: #6b6b6b; }
/* Which build you are looking at. Dim, but there. */
#buildStamp { color: rgba(160, 154, 146, .45); letter-spacing: .08em; }
#conn.ok .dot { background: #7ee787; box-shadow: 0 0 10px rgba(126, 231, 135, .8); }
#conn.bad .dot { background: #e2725b; box-shadow: 0 0 10px rgba(226, 114, 91, .8); }

/* ---------------------------------------------------------------- gate */
#gate {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 20%, #101726 0%, #05070c 70%);
  z-index: 10; transition: opacity .8s ease, visibility .8s;
}
#gate.gone { opacity: 0; visibility: hidden; }

#gate .card { width: min(420px, 88vw); text-align: center; }
#gate h1 {
  margin: 0 0 6px; font-size: 44px; font-weight: 300; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink);
  text-shadow: 0 0 60px rgba(255, 122, 61, .25);
}
#gate .tag { margin: 0 0 32px; color: var(--dim); font-size: 14px; line-height: 1.6; }
#gate form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
#gate label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
}
#gate input {
  font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none;
  color: var(--ink); background: rgba(255, 255, 255, .045);
  border: 1px solid var(--edge); border-radius: 10px; padding: 11px 13px; outline: none;
  transition: border-color .2s;
}
#gate input:focus { border-color: rgba(255, 140, 80, .55); }
#gate button {
  margin-top: 10px; font: inherit; font-size: 14px; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer; color: #140d08;
  background: linear-gradient(180deg, var(--ember-soft), var(--ember));
  border: none; border-radius: 10px; padding: 13px;
  box-shadow: 0 10px 40px rgba(255, 122, 61, .28);
  transition: transform .12s, box-shadow .2s;
}
#gate button:hover { box-shadow: 0 12px 50px rgba(255, 122, 61, .42); }
#gate button:active { transform: translateY(1px); }
#gate .fine { margin-top: 22px; color: rgba(160, 154, 146, .55); font-size: 12px; }
#gate button.x {
  margin: 0 0 4px; display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--ink); background: rgba(255, 255, 255, .06); border: 1px solid var(--edge);
  box-shadow: none; letter-spacing: .12em;
}
#gate button.x:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }
#gate .who {
  margin: 0 0 4px; display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--dim);
}
#gate .who img { width: 22px; height: 22px; border-radius: 50%; }
#gate .who span { color: var(--ink); }
#gate .who a { margin-left: auto; color: rgba(160, 154, 146, .7); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

body.locked { cursor: none; }

/* ------------------------------------------------------------ settings */
/* The gear, next to the connection dot. Same weight as everything else at the
   top: present, never loud. */
#settingsBtn {
  position: fixed; right: 18px; top: 44px; z-index: 5;
  appearance: none; cursor: pointer; color: var(--dim);
  background: var(--glass); border: 1px solid var(--edge); border-radius: 10px;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; transition: opacity .6s, color .18s, border-color .18s, transform .3s;
}
body.playing #settingsBtn { opacity: 1; }
#settingsBtn:hover { color: var(--ember-soft); border-color: rgba(255, 140, 80, .5); }
body.settings #settingsBtn { color: var(--ember); transform: rotate(60deg); }
body.locked #settingsBtn { opacity: .35; }

#settings {
  position: absolute; right: 18px; top: 86px; width: min(340px, calc(100vw - 36px));
  max-height: calc(100vh - 110px); overflow: auto;
  background: rgba(14, 14, 18, .72); border: 1px solid var(--edge); border-radius: 16px;
  backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
  padding: 14px 16px 10px; pointer-events: none;
  opacity: 0; transform: translateY(-6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease;
}
body.settings #settings { opacity: 1; transform: none; pointer-events: auto; }

#settings .sh {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
  margin-bottom: 6px;
}
#settings .x {
  appearance: none; background: none; border: none; color: var(--dim); cursor: pointer;
  font: inherit; font-size: 20px; line-height: 1; padding: 0 2px;
}
#settings .x:hover { color: var(--ink); }
#settings section { padding: 10px 0 8px; border-top: 1px solid rgba(255, 255, 255, .06); }
#settings h3 {
  margin: 0 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ember-soft);
}
#settings .fine { color: rgba(160, 154, 146, .7); font-size: 11.5px; margin: 6px 0 0; }
#settings .fine b { color: rgba(230, 226, 220, .8); font-weight: 600; }

.fader { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; padding: 5px 0; }
.fader .n { font-size: 12.5px; color: var(--ink); display: flex; flex-direction: column; line-height: 1.2; }
.fader .n small { font-size: 10px; color: rgba(160, 154, 146, .7); letter-spacing: .02em; }
.fader .v { font-size: 11px; color: var(--dim); text-align: right; font-variant-numeric: tabular-nums; }
.fader.off { opacity: .35; pointer-events: none; }

#settings input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: none; margin: 0;
  cursor: pointer;
}
#settings input[type=range]::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14);
}
#settings input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; margin-top: -5.5px;
  background: var(--ember-soft); box-shadow: 0 0 10px rgba(255, 122, 61, .5);
  border: 1px solid rgba(0, 0, 0, .4);
}
#settings input[type=range]::-moz-range-track { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); }
#settings input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; background: var(--ember-soft);
  border: 1px solid rgba(0, 0, 0, .4); box-shadow: 0 0 10px rgba(255, 122, 61, .5);
}
#settings input[type=range]:focus { outline: none; }
#settings input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(255, 178, 122, .35); }

#settings .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
#settings .lnk {
  appearance: none; background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11.5px; color: rgba(255, 178, 122, .8); text-decoration: underline dotted;
}
#settings .lnk:hover { color: var(--ember-soft); }

#settings .btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--ink);
  background: rgba(255, 255, 255, .06); border: 1px solid var(--edge); border-radius: 9px;
  padding: 7px 12px; white-space: nowrap; transition: border-color .18s, background .18s;
}
#settings .btn:hover { border-color: rgba(255, 140, 80, .5); }
#settings .btn.on {
  background: linear-gradient(180deg, rgba(70, 40, 24, .8), rgba(44, 24, 14, .8));
  border-color: rgba(255, 140, 80, .8); color: var(--ember-soft);
}
#settings .row.mic .fine { margin: 0; text-align: right; line-height: 1.3; }

/* The mic meter: a thin bar that fills with what the mic hears, and turns
   ember while it is actually being sent. */
#settings .meter {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .08);
  margin: 10px 0 10px; overflow: hidden;
}
#settings .meter i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: rgba(160, 154, 146, .55); transition: width .06s linear, background .15s;
}
#settings .meter i.hot { background: var(--ember); box-shadow: 0 0 10px rgba(255, 122, 61, .8); }
#settings:not(.micon) .meter { opacity: .3; }

.seg { display: flex; gap: 6px; margin: 6px 0; }
.seg button {
  flex: 1; appearance: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--dim);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--edge); border-radius: 9px;
  padding: 7px 8px; transition: border-color .18s, background .18s, color .18s;
}
.seg button b { color: var(--ink); font-weight: 600; }
.seg button:hover { border-color: rgba(255, 140, 80, .4); }
.seg button.on {
  color: var(--ember-soft); background: rgba(60, 34, 20, .6); border-color: rgba(255, 140, 80, .7);
}
.seg button.on b { color: var(--ember-soft); }

/* ----------------------------------------------------------------- voice */
/* The mic pill, bottom right. Off is quiet; on is a dot; talking glows. */
#mic {
  position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 7px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
  text-shadow: 0 1px 8px #000; pointer-events: auto; cursor: pointer;
  padding: 6px 10px; border-radius: 999px; border: 1px solid transparent;
  transition: border-color .2s, background .2s, color .2s;
}
#mic:hover { border-color: var(--edge); background: var(--glass); }
#mic i { width: 7px; height: 7px; border-radius: 50%; background: #4a4a4a; transition: background .15s, box-shadow .15s; }
#mic.on i { background: #9ad48f; box-shadow: 0 0 8px rgba(126, 231, 135, .6); }
#mic.hot { color: var(--ember-soft); }
#mic.hot i { background: var(--ember); box-shadow: 0 0 12px var(--ember); animation: micpulse 1s ease-in-out infinite; }
#mic.off { opacity: .55; }
#mic.none { display: none; }
@keyframes micpulse {
  0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); }
}

/* Somebody talking in the roster. */
.who.talk { color: var(--ink); }
.who.talk i { box-shadow: 0 0 10px currentColor; animation: micpulse .9s ease-in-out infinite; }
.who.talk em { color: var(--ember-soft); }

/* ------------------------------------------------------------------ touch */
/* A phone. body.touch is set by touch.js when the primary pointer is a
   finger. The scheme is the same - hold a thing, use it - but the mouse is a
   button bottom right, the legs are a stick under the left thumb, and the
   interface makes room for both. Everything else here is the same glass. */
body.touch { overscroll-behavior: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
body.touch #view { touch-action: none; }
body.touch #hud { touch-action: none; }
body.touch #hints { display: none; }
#gate .turn { display: none; }
body.touch #gate .turn { display: block; margin-top: 10px; }
@media (orientation: landscape) { body.touch #gate .turn { display: none; } }
/* 16px, so iOS does not zoom the page when a field is focused. */
body.touch #gate input, body.touch #chatInput { font-size: 16px; }
body.touch #gate h1 { font-size: 34px; }
body.touch #gate .tag { margin-bottom: 20px; }
@media (max-height: 460px) {
  body.touch #gate .card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: center; text-align: left; width: min(640px, 92vw); }
  body.touch #gate .tag { margin-bottom: 0; }
  body.touch #gate .fine { grid-column: 1 / -1; margin-top: 12px; text-align: center; }
}

/* The bottom bar shrinks and stays clear of the thumbs: the stick's home is
   bottom left and the buttons are bottom right, so the centred column gets
   side padding to stay between them. */
body.touch #bottom {
  padding: 40px 150px calc(12px + env(safe-area-inset-bottom)); gap: 6px;
}
body.touch .slot { width: 62px; height: 62px; border-radius: 12px; padding-bottom: 7px; }
body.touch .slot .l { font-size: 10px; }
body.touch .slot .s { display: none; }
body.touch #slots { gap: 9px; }
body.touch .act { padding: 7px 11px 7px 9px; }
body.touch .act .k { display: none; }
body.touch #state { font-size: 10.5px; }
body.touch #hint { font-size: 11.5px; text-align: center; padding: 0 8px; }
body.touch .act:hover { border-color: var(--edge); background: var(--glass); }
body.touch .slot:hover { border-color: var(--edge); }
body.touch .slot.on:hover { border-color: rgba(255, 140, 80, .8); }

/* Chat lives top left under the roster on a phone. The bottom is thumbs,
   and the keyboard covers the bottom half of the screen while you type. */
body.touch #chat {
  left: 16px; top: 120px; bottom: auto; width: min(320px, 46vw);
}
body.touch #chatLog { max-height: 18vh; }
body.touch #chatInput { padding: 8px 12px; }
body.touch #topleft { top: 14px; left: 16px; }
body.touch #conn { right: 14px; top: 14px; }
body.touch #settingsBtn { right: 14px; top: 40px; width: 38px; height: 38px; }
body.touch #settings { right: 14px; top: 86px; }
body.touch #mic { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); }

#touch { display: none; }
body.touch #touch { display: block; }

/* The stick. At rest it sits faintly where the thumb would be, so the left
   side reads as "walk" before anybody has tried it; touched, it moves under
   the finger and follows it. */
#stickBase {
  position: absolute; left: 96px; bottom: 96px; width: 104px; height: 104px;
  margin-left: -52px; margin-top: -52px; border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .16); background: rgba(16, 16, 20, .18);
  display: grid; place-items: center; pointer-events: none;
  transition: opacity .2s;
  opacity: .55;
}
#stickBase.live { bottom: auto; opacity: 1; border-style: solid; border-color: rgba(255, 178, 122, .45);
  background: rgba(16, 16, 20, .3); }
#stickKnob {
  display: block; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(233, 231, 226, .18); border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
#stickBase.live #stickKnob { background: rgba(255, 178, 122, .35); border-color: rgba(255, 178, 122, .7);
  box-shadow: 0 0 14px rgba(255, 122, 61, .35); }

/* The buttons, bottom right, above the mic pill. USE is the mouse button and
   is the big one; jump and squat are the legs and are smaller. */
#touchBtns {
  position: absolute; right: 14px; bottom: calc(50px + env(safe-area-inset-bottom));
  display: flex; align-items: flex-end; gap: 10px; pointer-events: none;
}
#touchSide {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.tb {
  pointer-events: auto; touch-action: none; appearance: none; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); width: 56px; height: 56px; border-radius: 50%; padding: 0;
  background: var(--glass); border: 1px solid var(--edge);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  transition: border-color .12s, background .12s, transform .08s, color .12s;
}
.tb.big { width: 82px; height: 82px; font-size: 13px; font-weight: 600; color: var(--ember-soft);
  border-color: rgba(255, 140, 80, .45); }
.tb.down, .tb.on {
  background: linear-gradient(180deg, rgba(70, 40, 24, .85), rgba(44, 24, 14, .85));
  border-color: rgba(255, 140, 80, .85); color: var(--ember-soft);
  box-shadow: 0 8px 30px rgba(255, 122, 61, .24), inset 0 1px 0 rgba(255, 190, 140, .2);
}
.tb.down { transform: scale(.96); }
#touchSide .tb { width: 48px; height: 48px; font-size: 10px; border-radius: 12px; }
#touchSide .tb[hidden] { display: none; }
body.chatting #tChat { border-color: rgba(255, 140, 80, .85); color: var(--ember-soft); }

/* A short phone, on its side: pull everything in. */
@media (max-height: 420px) {
  body.touch #bottom { padding-top: 26px; gap: 4px; }
  body.touch .slot { width: 54px; height: 54px; }
  body.touch #chat { top: 100px; }
  body.touch #chatLog { max-height: 14vh; }
  body.touch #topleft { top: 10px; }
  #stickBase { left: 84px; bottom: 84px; }
  .tb.big { width: 72px; height: 72px; }
  .tb { width: 50px; height: 50px; }
}