/* Lantern Lake, past the camp's right edge (world.js): the dip to black between places, the lake's name as you arrive,
   the sign at the camp's right end, and other miners' names and words. */
.world-fade { position: absolute; inset: 0; z-index: 5; background: #05060c; opacity: 0; pointer-events: none; transition: opacity .22s linear; }
.world-fade.on { opacity: 1; }
/* the place's name, like a Terraria biome title: big outlined letters that fade in, hold and fade out. A thick dark
   outline and a soft dark halo keep it readable over snowy peaks and a bright sky alike. */
.world-name { position: absolute; z-index: 5; left: 16px; right: 16px; top: 21%; text-align: center; pointer-events: none; opacity: 0; transition: opacity .7s;
  font: 700 clamp(2.1rem, 7vw, 3.6rem)/1.05 var(--f-pixel); color: #fff6dc;
  text-shadow: var(--ol), -3px 0 0 #000, 3px 0 0 #000, 0 -3px 0 #000, 0 3px 0 #000, 0 7px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(5, 8, 20, 0.7); }
.world-name.on { opacity: 1; transition-duration: .25s; }
/* away from the camp the logo, its one-liner and the dig buttons step aside (a dig starts at the headframe) */
html[data-scene="away"] :is(.hero .wordmark, .hero-line, .hero-dock) { opacity: 0; visibility: hidden; }
.world-hint button { pointer-events: none; }
html[data-input="touch"] .world-hint button { text-decoration: none; }   /* a sign, not a button: no tap cue */
/* ---------- other miners (net.js): their names and words are drawn in the world (world.js); here, the Emotes button and the Say
   menu, a name's mute/report menu, and ?debug=1's readout ---------- */
#app.tag-hover #world-canvas { cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the Emotes button, bottom left (above the touch pad on phones): it opens the Say menu. It is a plank, like the top bar's
   wood chips; its keycap goes, since no key is shown anywhere (the E key still opens the menu) */
.world-chip { position: absolute; z-index: 4; left: calc(env(safe-area-inset-left, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 8px; border: 0; clip-path: var(--notch); cursor: pointer;
  background: var(--plank); color: var(--plank-ink); font: 700 1rem/1.2 var(--f-label); text-shadow: 0 2px 0 var(--plank-rim);
  box-shadow: inset 0 0 0 var(--u) var(--plank-rim), inset 0 calc(var(--u) * 2) 0 var(--plank-hi), inset 0 calc(var(--u) * -2) 0 var(--plank-lo); }
.world-chip[hidden] { display: none; }
html[data-input="touch"] .world-chip { bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); }
/* the Say menu: the emotes as pictures, then the phrases */
.world-talk { position: absolute; z-index: 6; left: calc(env(safe-area-inset-left, 0px) + 16px); bottom: calc(env(safe-area-inset-bottom, 0px) + 64px);
  width: min(500px, calc(100vw - 32px)); max-height: min(62vh, 420px); overflow: auto; display: grid; gap: 10px; padding: 12px;
  background: var(--wood-tex) 0 0 / 128px, var(--win); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi), inset 0 0 0 calc(var(--u) * 3) var(--win-edge); }
.world-talk[hidden] { display: none; }
html[data-input="touch"] .world-talk { bottom: calc(env(safe-area-inset-bottom, 0px) + 132px); }
/* the Say menu and a name's menu (UI round A, "Lantern"): a wood panel of parchment buttons, the gold ring for the cursor */
.world-talk button, .world-menu button { border: 0; cursor: pointer; clip-path: var(--notch); background: var(--parch-tex) 0 0 / 128px, var(--parch); color: var(--parch-ink);
  font: 700 0.95rem/1.2 var(--f-label); text-shadow: none; box-shadow: inset 0 0 0 var(--u) var(--parch-edge); min-height: 40px; }
.world-talk button:hover, .world-talk button:focus-visible, .world-menu button:hover, .world-menu button:focus-visible { background-color: var(--parch-lit); outline: none;
  box-shadow: inset 0 0 0 var(--u) var(--parch-edge), inset 0 0 0 calc(var(--u) * 2) var(--gold), inset 0 0 0 calc(var(--u) * 3) var(--parch-edge); }
.world-talk button.wait { animation: wt-wait .5s; }
@keyframes wt-wait { 30% { background: #e8a08a; } }
html[data-motion="reduce"] .world-talk button.wait { animation: none; }
.wt-emotes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wt-emotes img { width: 22px; height: 26px; image-rendering: pixelated; }
.wt-phrases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
@media (max-width: 420px) { .wt-phrases { grid-template-columns: repeat(2, 1fr); } }
.wt-phrases button { padding: 6px 8px; }
/* everyone here by name: the keyboard's way to a name's menu */
.wt-here { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wt-here[hidden] { display: none; }
.wt-here span { width: 100%; color: var(--ink-dim); font: 600 0.85rem/1.2 var(--f-text); text-shadow: var(--ol1); }
.wt-here button { padding: 4px 10px; min-height: 34px; }
/* a name's menu: mute, or report with a reason */
.world-menu { translate: -50% -100%; z-index: 4; pointer-events: auto; display: grid; gap: 6px; padding: 10px; min-width: 190px;
  background: var(--wood-tex) 0 0 / 128px, var(--win); color: var(--win-ink); font: 600 0.95rem/1.3 var(--f-text); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 2) var(--win-hi), inset 0 0 0 calc(var(--u) * 3) var(--win-edge); }
.world-menu[hidden] { display: none; }
.world-menu b { font: 700 1rem/1.2 var(--f-label); color: var(--gold); }
.world-menu button { font-size: 0.9rem; padding: 7px 10px; min-height: 36px; }
.wm-report { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wm-report span { width: 100%; color: var(--ink-dim); font-size: 0.85rem; }
#app:not([data-screen="surface"]) :is(.world-chip, .world-talk, .world-menu) { display: none; }
/* ?debug=1: numbers testers can send */
.net-debug { position: absolute; z-index: 7; right: 12px; bottom: 12px; margin: 0; padding: 6px 9px; pointer-events: none; white-space: pre;
  background: rgba(5, 6, 12, 0.78); color: #cfe8ff; font: 600 12px/1.45 ui-monospace, Consolas, monospace; }
/* on a phone the two lines are wider than the screen: wrap them inside it, above the home bar, so the fps reads */
@media (max-width: 520px) { .net-debug { left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); white-space: pre-wrap; font-size: 11px; } }

/* ---------- digging together (coop.js): the dig spots' prompt, notes while you dig, and your partner's answer ---------- */
/* "Leave this dig?" in the Esc menu (coop.js): the question, then Leave and Stay, on one line */
.menu .coop-sure { display: flex; align-items: center; }
.menu .coop-sure-q { padding-left: 40px; white-space: nowrap; color: var(--parch-ink-dim); text-shadow: none; }   /* on the menu's parchment card */
.menu .coop-sure .mn-row { width: auto; flex: 1 1 0; }
/* a longer question (switching accounts, a sign-in that ran out: signin.js): its line on top, the two rows under it */
.menu .coop-sure.wide { flex-wrap: wrap; }
.menu .coop-sure.wide .coop-sure-q { flex: 1 0 100%; padding: 10px 16px 4px 40px; white-space: normal; line-height: 1.35; }
.menu .coop-sure-q b { color: var(--parch-ink); }
.coop-prompt .coop-say { max-width: 200px; padding: 0 2px; text-align: center; text-wrap: balance; font: 700 0.8rem/1.2 var(--f-label); color: var(--ink-dim); text-shadow: var(--ol1); }
.coop-flag { translate: -50% -100%; z-index: 2; white-space: nowrap; pointer-events: none; font: 700 0.85rem/1 var(--f-label); color: #b8f7c8; text-shadow: var(--ol1); }
.coop-flag[hidden] { display: none; }
.coop-note { position: absolute; z-index: 5; top: calc(env(safe-area-inset-top, 0px) + 64px); left: 50%; translate: -50% 0; max-width: calc(100vw - 32px); padding: 7px 14px;
  pointer-events: none; text-align: center; background: var(--parch-tex) 0 0 / 128px, var(--parch); color: var(--parch-ink); font: 700 0.95rem/1.3 var(--f-label); clip-path: var(--notch);
  box-shadow: inset 0 0 0 var(--u) var(--win-edge), inset 0 0 0 calc(var(--u) * 3) var(--win), inset 0 0 0 calc(var(--u) * 4) var(--win-edge); padding: 10px 18px; }
.coop-note[hidden] { display: none; }
.land-card .pair-said { margin: 6px 0 0; font: 700 0.95rem/1.3 var(--f-label); color: var(--parch-ink-dim, #7a4a2a); text-shadow: none; }
.land-card .pair-said[hidden] { display: none; }
.land-card .pair-said b { color: var(--parch-ink, #321007); }
.land-card .pair-said .miss { color: #a3291f; }