/* planet-ui.css — ONE interface for every planet in the atlas.
 *
 * This is planet01's surface UI, lifted out of that folder so all seven worlds
 * wear it instead of each keeping its own stylesheet. Same reasoning as net/,
 * avatar/ and control/: the thing that should look identical everywhere lives
 * in one file, and a planet only supplies its own words.
 *
 * The contract a planet's markup has to keep:
 *   a.dashboard-link      top-left, back to the atlas
 *   #title                the world's name, centred
 *   #surface-status       small monospace readout, top-right
 *   section.surface-card  the intro card: a span, an h1, a p and two buttons,
 *                         the first of which carries class="primary"
 *   .walk-actions         #orbit and #walkpad, shown only while walking
 *   #hint                 the control line along the bottom
 *   body[data-mode]       "orbit" | "fly" | "walk" — the scene sets it, and the
 *                         card/walk buttons show and hide from it alone
 * Optional: div.grade, a pure-CSS vignette some worlds put over the canvas.
 */

body { margin: 0; height: 100%; overflow: hidden; background: #0b1020;
       font-family: Arial, Helvetica, sans-serif; }
html { height: 100%; }
canvas { display: block; touch-action: none; }

/* -------- top bar -------- */
.dashboard-link {
  position: fixed; left: 20px; top: 20px; z-index: 2;
  color: #fff; text-decoration: none; font: 600 12px system-ui, sans-serif;
  padding: 9px 12px; border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px; background: rgba(12,16,40,.55);
}
.dashboard-link:hover { background: rgba(42,62,95,.8); }

#title {
  position: fixed; left: 0; right: 0; top: 31px; text-align: center;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; letter-spacing: 5px; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
#surface-status {
  position: fixed; right: 24px; top: 32px;
  font: 10px monospace; letter-spacing: 1.5px; color: #d6ebd8; pointer-events: none;
}

/* -------- the intro card -------- */
.surface-card {
  position: fixed; left: 32px; bottom: 85px; max-width: 320px; padding: 25px;
  color: #f0f4df;
  background: linear-gradient(130deg, #10291ddd, #132b22c9);
  border: 1px solid #ccf4c42b; border-top-color: #dec88980; border-radius: 5px;
}
.surface-card > span { font: 8px monospace; letter-spacing: 2px; color: #c9dfa2; }
.surface-card h1 {
  font-family: Georgia, serif; font-weight: 400; font-size: 30px;
  letter-spacing: -1px; margin: 16px 0;
}
.surface-card p { color: #c2cebc; font-size: 12px; line-height: 1.7; margin: 0 0 20px; }

/* -------- buttons -------- */
button {
  border: 1px solid #ffffff33; border-radius: 8px; background: #162f27ed;
  color: #eaf5df; padding: 12px 14px; font: 12px Arial; cursor: pointer;
}
button:hover { background: #345644; }
button:focus-visible, a:focus-visible { outline: 2px solid #d5e8a0; outline-offset: 4px; }
button[disabled] { opacity: .55; cursor: default; }
/* the one highlighted action on the card */
.surface-card .primary { background: #d5e8a0; color: #243322; border: 0; margin-right: 6px; }
.surface-card .primary:hover { background: #e4f3b8; }

.walk-actions { display: none; position: fixed; left: 24px; bottom: 85px; gap: 10px; }
#walkpad { display: none; touch-action: none; user-select: none; }
.touch #walkpad { display: block; }

/* -------- what each mode shows -------- */
body[data-mode="walk"] .surface-card,
body[data-mode="fly"]  .surface-card { display: none; }
body[data-mode="walk"] .walk-actions { display: flex; }
body[data-mode="walk"] #title,
body[data-mode="walk"] #surface-status { color: #efe4b5 !important; text-shadow: 0 1px 8px #000 !important; }

/* -------- the hint line -------- */
#hint {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2;
  font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; background: rgba(12,16,40,.55); padding: 8px 16px;
  border-radius: 999px; letter-spacing: .2px; pointer-events: none;
  white-space: nowrap; max-width: 92vw; overflow: hidden; text-overflow: ellipsis;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* planet01 draws its own presence badge into the page; the shared presence
   layer builds its own, so this rule simply does nothing on the other worlds. */
#presence {
  /* below the status readout, not on top of it: planet01 has both, and in the
     old per-planet stylesheet they overlapped in the corner */
  position: fixed; right: 20px; top: 56px; z-index: 2;
  font: 600 12px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #fff; padding: 9px 12px; border: 1px solid rgba(255,255,255,.24);
  border-radius: 8px; background: rgba(12,16,40,.55); text-align: right;
  pointer-events: none; white-space: nowrap;
}
#presence b { color: #ffe08a; }
#presence .who { opacity: .7; font-weight: 500; }

/* -------- touch: the thumb-stick --------
 * controls.js drops this under your finger the moment you press the canvas on a
 * touch screen, and takes it away when you let go. Push to walk (the further
 * out, the faster — the rim runs), swing sideways to steer, tap for one step.
 * Nothing here is shown to a mouse. */
.screen-stick {
  position: fixed; width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border: 1px solid rgba(213,232,160,.55); border-radius: 50%;
  background: rgba(11,26,22,.55);
  box-shadow: 0 0 0 10px rgba(11,26,22,.18), inset 0 0 26px rgba(213,232,160,.14);
  pointer-events: none; opacity: 0; transform: scale(.82);
  transition: opacity .13s ease, transform .13s ease; z-index: 5;
}
.screen-stick.active { opacity: 1; transform: scale(1); }
.screen-stick i {
  position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px;
  border-radius: 50%; background: #d5e8a0; border: 2px solid #f2f8dd;
  box-shadow: 0 6px 18px rgba(0,0,0,.5); will-change: transform;
}
/* the old hold-to-walk button is redundant once the whole screen is the stick */
body.touch.screen-drag-move #walkpad { display: none; }

/* and the walking hint should describe the thumb-stick, not the keyboard */
body.touch.screen-drag-move[data-mode="walk"] #hint { font-size: 0 !important; }
body.touch.screen-drag-move[data-mode="walk"] #hint::after {
  content: "Drag anywhere to walk · push further to run · double-tap to ping";
  font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
@media (max-width: 650px) {
  body.touch.screen-drag-move[data-mode="walk"] #hint::after { font-size: 11px; }
}

/* optional cinematic vignette; free, and only where a world asks for it */
.grade {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 46%, transparent 42%, rgba(4,8,14,.30) 74%, rgba(2,5,10,.58) 100%);
}

/* -------- small screens -------- */
@media (max-width: 650px) {
  #title { display: none; }
  #surface-status { font-size: 8px; right: 18px; letter-spacing: .5px; }
  .surface-card { left: 18px; bottom: 80px; padding: 18px; max-width: 290px; }
  .surface-card h1 { font-size: 24px; }
  .surface-card p { display: none; }
  .surface-card button { padding: 11px; font-size: 11px; }
  #hint { font-size: 11px !important; }
}
@media (max-height: 500px) {
  .surface-card { bottom: 70px; padding: 15px; }
  .surface-card h1, .surface-card p { display: none; }
  .surface-card > span { display: block; margin-bottom: 12px; }
}