@charset "UTF-8";

:root {
  color-scheme: dark;
  --bg: #0b1118;
  --surface: #121b24;
  --surface-raised: #17222c;
  --surface-soft: #101820;
  --line: rgba(224, 237, 221, .105);
  --line-strong: rgba(224, 237, 221, .17);
  --text: #edf1e9;
  --muted: #9ba9a3;
  --subtle: #71817b;
  --lime: #c6f36a;
  --lime-deep: #9dcf4d;
  --mint: #8ee0bb;
  --warning: #f1c876;
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 50% -22%, rgba(57, 92, 78, .17), transparent 55%),
    linear-gradient(rgba(210, 230, 208, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(210, 230, 208, .025) 1px, transparent 1px),
    var(--bg);
  background-size: auto, 48px 48px, 48px 48px, auto;
  overflow-x: hidden;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
[hidden] { display: none !important; }

.page-glow {
  position: fixed;
  z-index: -1;
  width: 410px;
  height: 410px;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(115px);
  opacity: .12;
}
.page-glow-one { top: 25%; left: -260px; background: #65a95d; }
.page-glow-two { top: 54%; right: -280px; background: #4e8f99; opacity: .1; }
.app-shell { width: min(100% - 88px, 1280px); margin-inline: auto; }

/* Header */
.topbar {
  min-height: 91px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-bottom: 1px solid var(--line);
}
.brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand-mark { width: 39px; height: 39px; display: inline-flex; filter: drop-shadow(0 5px 12px rgba(159, 211, 82, .14)); }
.brand-mark svg { width: 100%; height: 100%; }
.brand-word, .footer-brand {
  font-size: 14px;
  font-weight: 850;
  letter-spacing: .13em;
  white-space: nowrap;
}
.brand-word span, .footer-brand span { color: var(--lime); }
.primary-nav { display: flex; align-items: center; gap: 35px; margin-left: auto; }
.primary-nav a {
  position: relative;
  padding: 8px 0;
  color: #aab5af;
  font-size: 12px;
  font-weight: 580;
  letter-spacing: .015em;
  text-decoration: none;
  transition: color .18s ease;
}
.primary-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  content: "";
  background: var(--lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.primary-nav a:hover { color: var(--text); }
.primary-nav a:hover::after { transform: scaleX(1); }
@media (max-width: 1180px) {
  .primary-nav { gap: 22px; }
  .primary-nav a { font-size: 11px; }
}
.topbar-right { display: flex; align-items: center; gap: 20px; flex: 0 0 auto; }
.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(198, 243, 106, .17);
  border-radius: 999px;
  color: #b6c5a9;
  background: rgba(133, 178, 80, .055);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .13em;
  white-space: nowrap;
}
.demo-dot, .footer-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 11px rgba(198, 243, 106, .65);
}
.header-login {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  transition: color .18s ease;
}
.header-login span { color: var(--lime); font-size: 15px; transition: transform .18s ease; }
.header-login:hover { color: var(--lime); }
.header-login:hover span { transform: translate(2px, -2px); }
.header-player { display: inline-flex; align-items: center; gap: 9px; }
.header-avatar {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(198, 243, 106, .32);
  border-radius: 8px;
  color: var(--lime);
  background: rgba(198, 243, 106, .1);
  font-size: 12px;
  font-weight: 850;
}
.header-player-name { max-width: 110px; overflow: hidden; color: #dae2d6; font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.header-logout {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: #aebbb4;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.header-logout:hover { color: var(--text); border-color: rgba(198, 243, 106, .4); background: rgba(198, 243, 106, .06); }
.app-shell.is-lobby .primary-nav { display: none; }

/* Landing / login */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  align-items: center;
  gap: clamp(44px, 7.2vw, 100px);
  padding: 71px 0 77px;
}
.hero-copy { max-width: 545px; padding: 9px 0 0 3px; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 19px;
  color: var(--lime);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: .15em;
}
.eyebrow-spark { color: #dbff91; font-size: 15px; line-height: 1; text-shadow: 0 0 16px rgba(198, 243, 106, .6); }
.hero-copy h1, .lobby-heading h1 {
  margin: 0;
  color: #f2f4ec;
  font-size: clamp(46px, 5.45vw, 75px);
  font-weight: 870;
  letter-spacing: -.075em;
  line-height: .98;
}
.hero-copy h1 span, .lobby-heading h1 span {
  color: var(--lime);
  text-shadow: 0 8px 35px rgba(177, 224, 91, .1);
}
.hero-description {
  max-width: 455px;
  margin: 22px 0 28px;
  color: #a6b1ac;
  font-size: 14px;
  line-height: 1.75;
}
.login-card {
  padding: 21px 22px 16px;
  border: 1px solid rgba(216, 235, 217, .13);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(22, 33, 42, .96), rgba(16, 25, 33, .97));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .025);
}
.login-hero-banner {
  position: relative;
  height: 128px;
  margin: -5px -6px 18px;
  overflow: hidden;
  border: 1px solid rgba(198, 243, 106, .34);
  border-radius: 11px;
  background: #14222b;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.login-hero-banner-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 12%;
  transform: scale(1.01);
  transition: transform .35s ease;
}
.login-card:hover .login-hero-banner-img {
  transform: scale(1.045);
}
.login-hero-banner-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(9, 15, 21, .05) 0%, rgba(9, 15, 21, .15) 62%, rgba(9, 15, 21, .72) 100%);
}
.login-hero-badge {
  padding: 4px 8px;
  border: 1px solid rgba(198, 243, 106, .42);
  border-radius: 5px;
  color: #e9ffbe;
  background: rgba(11, 20, 25, .78);
  backdrop-filter: blur(6px);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: .12em;
}
.card-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-symbol { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(198, 243, 106, .2); border-radius: 8px; color: var(--lime); background: rgba(198, 243, 106, .075); }
.login-symbol svg { width: 17px; height: 17px; }
.card-heading-text { color: #dfe7dd; font-size: 10px; font-weight: 820; letter-spacing: .13em; }
.guest-tag { margin-left: auto; padding: 6px 8px; border: 1px solid rgba(142, 224, 187, .16); border-radius: 5px; color: #a5d7b8; background: rgba(91, 161, 118, .065); font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.field-label { display: block; margin-bottom: 8px; color: #d6ded5; font-size: 11px; font-weight: 700; }
.input-wrap {
  height: 49px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 13px;
  border: 1px solid rgba(222, 236, 224, .14);
  border-radius: 9px;
  background: rgba(8, 14, 20, .62);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.input-wrap:focus-within { border-color: rgba(198, 243, 106, .62); background: rgba(8, 14, 20, .85); box-shadow: 0 0 0 3px rgba(198, 243, 106, .075); }
.input-wrap.has-error { border-color: rgba(255, 128, 122, .72); box-shadow: 0 0 0 3px rgba(255, 128, 122, .07); }
.input-user-icon { width: 17px; height: 17px; flex: 0 0 auto; color: #82928b; }
.input-wrap input { width: 100%; height: 100%; min-width: 0; border: 0; outline: 0; color: #eff3e9; background: transparent; font-size: 13px; letter-spacing: .015em; }
.input-wrap input::placeholder { color: #62716b; opacity: 1; }
.input-counter { flex: 0 0 auto; color: #697972; font-size: 10px; font-variant-numeric: tabular-nums; }
.password-visibility-button { flex: 0 0 auto; padding: 5px 9px; border: 1px solid rgba(198, 243, 106, .24); border-radius: 6px; color: #cfe2be; background: rgba(198, 243, 106, .075); cursor: pointer; font: 750 9px system-ui, sans-serif; letter-spacing: .06em; transition: border-color .18s ease, background .18s ease; }
.password-visibility-button:hover { border-color: rgba(198, 243, 106, .56); background: rgba(198, 243, 106, .14); }
.field-meta { min-height: 23px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 1px 0; color: #82908a; font-size: 9px; }
.field-error { color: #ff9b91; text-align: right; }
.profile-upload { display: flex; align-items: center; gap: 12px; margin: 8px 0 3px; padding: 10px; border: 1px solid rgba(222, 236, 224, .1); border-radius: 10px; background: rgba(8, 14, 20, .35); }
.profile-preview { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(198, 243, 106, .24); border-radius: 11px; color: #a9bd83; background: linear-gradient(145deg, #1a2830, #101920); font-size: 20px; font-weight: 800; }
.profile-preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-upload-copy { min-width: 0; flex: 1; }
.profile-upload-copy .field-label { margin: 0 0 7px; }
.profile-upload-copy .field-label span { color: #82908a; font-size: 9px; font-weight: 500; }
.profile-upload-actions { display: flex; align-items: center; gap: 8px; }
.profile-select-button, .profile-remove-button { min-height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid rgba(198, 243, 106, .24); border-radius: 6px; color: #dbe9ce; background: rgba(198, 243, 106, .075); cursor: pointer; font: 750 9px system-ui, sans-serif; letter-spacing: .05em; }
.profile-select-button:hover, .profile-remove-button:hover { border-color: rgba(198, 243, 106, .56); background: rgba(198, 243, 106, .14); }
.profile-remove-button { border-color: rgba(255, 150, 138, .2); color: #efaaa1; background: rgba(255, 120, 110, .055); }
.profile-file-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.profile-select-button:focus-within, .profile-select-button:focus { outline: 2px solid rgba(198, 243, 106, .65); outline-offset: 2px; }
.profile-upload-copy small { display: block; margin-top: 5px; color: #82908a; font-size: 8px; line-height: 1.4; }
.profile-error { margin: 4px 1px 0; color: #ff9b91; font-size: 9px; }
.primary-button {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  border: 1px solid rgba(218, 255, 150, .72);
  border-radius: 9px;
  color: #172016;
  background: linear-gradient(105deg, #c6f36a, #b2e95d);
  box-shadow: 0 6px 22px rgba(172, 222, 84, .12), inset 0 1px 0 rgba(255, 255, 255, .34);
  cursor: pointer;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .13em;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.primary-button svg { width: 18px; height: 18px; transition: transform .18s ease; }
.primary-button:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 9px 25px rgba(172, 222, 84, .21), inset 0 1px 0 rgba(255, 255, 255, .38); }
.primary-button:hover svg { transform: translateX(3px); }
.primary-button:active { transform: translateY(0); }
.login-footnote { display: flex; align-items: flex-start; gap: 8px; margin: 13px 0 0; color: #85928b; font-size: 9px; line-height: 1.55; }
.tiny-lock { margin-top: 1px; color: #91b665; font-size: 8px; }
.stage-hint { display: flex; align-items: flex-start; gap: 10px; margin: 17px 0 0 3px; color: #8d9b94; }
.stage-hint-icon { color: #accd72; font-size: 13px; line-height: 1.4; }
.stage-hint p { margin: 0; font-size: 10px; line-height: 1.65; }
.stage-hint strong { color: #c5d2c0; font-weight: 700; }

/* Original voxel landscape */
.world-card {
  position: relative;
  width: 100%;
  min-height: 680px;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(198, 243, 106, .28);
  border-radius: 17px;
  background: #182b34;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .42), 0 0 0 7px rgba(198, 243, 106, .03);
}
.world-card::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  content: "";
  background: linear-gradient(180deg, rgba(9, 16, 21, .18) 0%, transparent 18%, transparent 74%, rgba(8, 14, 17, .58) 100%);
}
.voxel-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.blockcraft-poster-image {
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .35s ease;
}
.world-card:hover .blockcraft-poster-image {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.03);
}
/* İkinci görsel: dikey oyun posteri. Üstteki gökyüzü dilimini kırpmak için
   kadraj biraz aşağı kaydırılır; köy, karakter ve mağara kesiti görünür kalır. */
.kupdunya-poster-image {
  object-position: center 18%;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1), filter .35s ease;
}
.world-card:hover .kupdunya-poster-image {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.03);
}
.scene-topline { position: absolute; z-index: 2; top: 17px; right: 17px; left: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scene-label, .scene-coordinate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid rgba(242, 250, 228, .2);
  border-radius: 6px;
  color: #edf2df;
  background: rgba(9, 22, 24, .49);
  backdrop-filter: blur(8px);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .11em;
  white-space: nowrap;
}
.scene-label-cube { width: 8px; height: 8px; display: inline-block; border: 1px solid #d7ff9b; background: #acd968; box-shadow: inset -2px -2px 0 rgba(55, 91, 47, .4); }
.scene-coordinate { color: rgba(238, 244, 222, .78); font-size: 7px; letter-spacing: .09em; }
.scene-coordinate span { color: var(--lime); }
.scene-caption {
  position: absolute;
  z-index: 2;
  right: 15px;
  bottom: 15px;
  left: 15px;
  min-height: 61px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border: 1px solid rgba(237, 244, 223, .18);
  border-radius: 10px;
  background: rgba(10, 18, 21, .68);
  backdrop-filter: blur(12px);
}
.scene-caption-icon { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(198, 243, 106, .26); border-radius: 8px; color: var(--lime); background: rgba(198, 243, 106, .12); font-size: 15px; }
.scene-caption-copy { display: flex; flex-direction: column; gap: 3px; }
.scene-caption-copy strong { color: #f1f0dc; font-size: 10px; font-weight: 750; }
.scene-caption-copy small { color: #b8c2af; font-size: 9px; }
.preview-tag { margin-left: auto; padding: 6px 8px; border: 1px solid rgba(198, 243, 106, .22); border-radius: 5px; color: #d8eda9; background: rgba(99, 136, 58, .18); font-size: 8px; font-weight: 800; letter-spacing: .1em; }

/* Roadmap */
.roadmap { padding: 17px 0 61px; border-top: 1px solid var(--line); }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 25px; }
.eyebrow-small { margin-bottom: 11px; font-size: 9px; }
.section-heading h2 { margin: 0; color: #e8ede5; font-size: clamp(23px, 3vw, 31px); font-weight: 790; letter-spacing: -.05em; }
.section-heading h2 span { color: #9ebd72; }
.section-heading > p { max-width: 370px; margin: 0 0 2px; color: #84928b; font-size: 11px; line-height: 1.7; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.step-card {
  position: relative;
  min-height: 161px;
  padding: 19px 20px 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(20, 30, 39, .89), rgba(15, 23, 31, .72));
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.step-card:hover { transform: translateY(-2px); border-color: rgba(198, 243, 106, .22); background: rgba(23, 34, 43, .92); }
.step-number { position: absolute; top: 19px; right: 20px; color: #53615b; font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.step-icon { width: 32px; height: 32px; display: grid; place-items: center; margin-bottom: 12px; border: 1px solid rgba(228, 203, 133, .15); border-radius: 8px; color: #e0cb8a; background: rgba(202, 164, 85, .07); font-size: 19px; }
.step-icon-green { border-color: rgba(198, 243, 106, .16); color: var(--lime); background: rgba(198, 243, 106, .07); }
.step-icon-purple { border-color: rgba(176, 160, 232, .16); color: #b2a3e8; background: rgba(176, 160, 232, .07); }
.step-card h3 { margin: 0 0 6px; color: #e3e9df; font-size: 12px; font-weight: 750; }
.step-card p { max-width: 320px; margin: 0; color: #87958e; font-size: 10.5px; line-height: 1.62; }
.step-card p strong { color: #d8eda9; font-weight: 700; }

.portals-showcase {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.portals-heading { margin-bottom: 18px; }
.portals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
}
.portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: linear-gradient(155deg, rgba(18, 28, 37, .94), rgba(12, 19, 26, .88));
  transition: transform .2s ease, border-color .2s ease;
}
.portal-card:hover { transform: translateY(-2px); }
.portal-card-hell {
  border-color: rgba(255, 112, 67, .28);
  background: radial-gradient(circle at 100% 0%, rgba(255, 87, 34, .13), transparent 55%), linear-gradient(155deg, rgba(31, 19, 20, .94), rgba(16, 14, 18, .92));
}
.portal-card-hell:hover { border-color: rgba(255, 138, 101, .45); }
.portal-card-aqua {
  border-color: rgba(56, 189, 248, .28);
  background: radial-gradient(circle at 100% 0%, rgba(56, 189, 248, .13), transparent 55%), linear-gradient(155deg, rgba(15, 29, 39, .94), rgba(11, 20, 29, .92));
}
.portal-card-aqua:hover { border-color: rgba(125, 211, 252, .45); }
.portal-card-secret {
  border-color: rgba(192, 132, 252, .32);
  background: repeating-linear-gradient(-45deg, rgba(168, 85, 247, .035) 0 10px, transparent 10px 20px), radial-gradient(circle at 100% 0%, rgba(168, 85, 247, .16), transparent 58%), linear-gradient(155deg, rgba(24, 18, 36, .96), rgba(13, 12, 22, .94));
}
.portal-card-secret:hover { border-color: rgba(216, 180, 254, .5); }
.portal-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portal-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 850;
  letter-spacing: .09em;
}
.portal-badge-hell {
  color: #ffb499;
  background: rgba(244, 81, 30, .18);
  border: 1px solid rgba(255, 112, 67, .34);
}
.portal-badge-aqua {
  color: #a5f3fc;
  background: rgba(14, 165, 233, .18);
  border: 1px solid rgba(56, 189, 248, .34);
}
.portal-badge-secret {
  color: #e9d5ff;
  background: rgba(147, 51, 234, .22);
  border: 1px solid rgba(192, 132, 252, .38);
}
.portal-coord-tag {
  color: #6b7c74;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}
.portal-card h3 {
  margin: 2px 0 0;
  color: #eef3ea;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.portal-recipe {
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #b9c5be;
  font-size: 10px;
  line-height: 1.55;
}
.portal-recipe strong { color: #eef3ea; }
.portal-recipe span {
  color: #d8eda9;
  font-weight: 700;
}
.portal-recipe-secret {
  border-style: dashed;
  border-color: rgba(192, 132, 252, .3);
  background: rgba(88, 28, 135, .14);
}
.portal-recipe-secret span {
  color: #d8b4fe;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
}
.portal-desc {
  margin: 0;
  color: #92a099;
  font-size: 10.5px;
  line-height: 1.62;
  flex: 1;
}
.portal-desc strong { color: #e2e8df; font-weight: 700; }
.portal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.portal-tags span {
  padding: 3.5px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: #b4c2ba;
  font-size: 8.5px;
  font-weight: 700;
}

.quick-controls-strip {
  margin-top: 20px;
  padding: 13px 16px;
  border-radius: 11px;
  border: 1px solid rgba(198, 243, 106, .18);
  background: linear-gradient(145deg, rgba(20, 31, 39, .86), rgba(14, 22, 29, .82));
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.quick-controls-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d8eda9;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .1em;
}
.quick-controls-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.quick-controls-list span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #9aa8a0;
  font-size: 9.5px;
}
.quick-controls-list kbd {
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(198, 243, 106, .26);
  background: rgba(198, 243, 106, .09);
  color: #e3f5b8;
  font-family: inherit;
  font-size: 8.5px;
  font-weight: 800;
}

@media (max-width: 900px) {
  .steps-grid, .portals-grid {
    grid-template-columns: 1fr;
  }
}

/* Mob rehberi — ana giriş ekranının altındaki 26 canlı kartı */
.mob-compendium {
  margin: 0 0 54px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.mob-heading { margin-bottom: 16px; }
.mob-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 15px;
}
.mob-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  color: #a9b7b0;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .07em;
}
.mob-legend-item i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.mob-legend-passive i { background: #8ee0bb; }
.mob-legend-hostile i { background: #f18b6b; }
.mob-legend-test i { background: #b2a3e8; }
.mob-legend-aquatic i { background: #7dd3fc; }
.mob-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
}
.mob-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 13px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(158deg, rgba(19, 29, 38, .92), rgba(13, 20, 27, .86));
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.mob-card:hover { transform: translateY(-2px); background: rgba(23, 34, 43, .95); }
.mob-card-passive { border-color: rgba(142, 224, 187, .2); }
.mob-card-passive:hover { border-color: rgba(142, 224, 187, .42); }
.mob-card-hostile { border-color: rgba(241, 139, 107, .24); background: linear-gradient(158deg, rgba(34, 21, 21, .92), rgba(16, 15, 20, .88)); }
.mob-card-hostile:hover { border-color: rgba(241, 139, 107, .46); }
.mob-card-test { border-color: rgba(178, 163, 232, .24); background: linear-gradient(158deg, rgba(26, 23, 41, .93), rgba(14, 15, 24, .88)); }
.mob-card-test:hover { border-color: rgba(178, 163, 232, .46); }
.mob-card-aquatic { border-color: rgba(125, 211, 252, .24); background: linear-gradient(158deg, rgba(14, 27, 38, .93), rgba(11, 17, 26, .88)); }
.mob-card-aquatic:hover { border-color: rgba(125, 211, 252, .46); }
.mob-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mob-emoji {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 9px;
  background: rgba(255, 255, 255, .045);
  font-size: 19px;
  line-height: 1;
}
.mob-index { color: #5a6862; font-size: 9px; font-weight: 850; letter-spacing: .11em; }
.mob-card h3 {
  margin: 0;
  color: #eef3ea;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.02em;
}
.mob-card h3 small {
  margin-left: 4px;
  color: #6d7c75;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
}
.mob-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mob-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 7px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 7px;
  background: rgba(255, 255, 255, .03);
}
.mob-stats span { color: #6f7e77; font-size: 7.5px; font-weight: 800; letter-spacing: .09em; }
.mob-stats b { color: #d8eda9; font-size: 10.5px; font-weight: 800; letter-spacing: -.01em; }
.mob-desc {
  flex: 1;
  margin: 0;
  color: #8f9d96;
  font-size: 9.8px;
  line-height: 1.62;
}
.mob-desc strong { color: #e2e8df; font-weight: 700; }
.mob-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.mob-tags span {
  padding: 3.5px 7px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: #b0beb6;
  font-size: 8px;
  font-weight: 700;
}
.mob-compendium-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 16px;
  border: 1px solid rgba(198, 243, 106, .16);
  border-radius: 10px;
  background: rgba(99, 136, 58, .06);
}
.mob-compendium-note p { flex: 1; margin: 0; color: #a5b3ac; font-size: 10px; line-height: 1.65; }
.mob-compendium-note p strong { color: #d8eda9; }
@media (max-width: 1080px) {
  .mob-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mob-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .mob-grid { grid-template-columns: 1fr; }
}
.project-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 57px;
  padding: 14px 16px;
  border: 1px solid rgba(218, 187, 111, .16);
  border-radius: 10px;
  background: rgba(155, 124, 57, .055);
}
.note-icon { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(236, 198, 109, .34); border-radius: 50%; color: #edcd81; font-family: Georgia, serif; font-size: 13px; font-style: italic; }
.project-note p { flex: 1; margin: 0; color: #a5a393; font-size: 10px; line-height: 1.65; }
.project-note p strong { color: #e5d39a; font-weight: 700; }
.note-phase { flex: 0 0 auto; color: #b5a36d; font-size: 8px; font-weight: 800; letter-spacing: .12em; }

/* Logged-in preview */
.lobby-view { padding: 72px 0 79px; }
.lobby-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 39px; }
.lobby-heading h1 { font-size: clamp(43px, 5.7vw, 66px); }
.lobby-heading .hero-description { margin-bottom: 0; }
.lobby-avatar {
  width: 83px;
  height: 83px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  margin: 0 24px 13px 0;
  border: 1px solid rgba(198, 243, 106, .3);
  border-radius: 20px;
  color: #172019;
  background: linear-gradient(145deg, #d1f782, #7ea84b);
  box-shadow: 8px 8px 0 #47613a, 0 14px 36px rgba(0, 0, 0, .21);
  font-size: 33px;
  font-weight: 900;
  text-transform: uppercase;
}
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(250px, .8fr); gap: 16px; }
.server-card, .profile-card { overflow: hidden; border: 1px solid var(--line-strong); border-radius: 15px; background: linear-gradient(145deg, rgba(20, 31, 40, .97), rgba(15, 23, 31, .95)); }
.server-card { min-height: 367px; display: flex; flex-direction: column; }
.server-card-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .012); }
.server-card-label { display: inline-flex; align-items: center; gap: 9px; color: #c5d0c7; font-size: 9px; font-weight: 830; letter-spacing: .13em; }
.server-card-cube { width: 10px; height: 10px; display: inline-block; border: 1px solid #c6f36a; background: #83a84f; box-shadow: inset -3px -3px 0 rgba(21, 44, 25, .4); transform: rotate(0deg); }
.coming-tag { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(239, 197, 113, .18); border-radius: 5px; color: #d8bd7a; background: rgba(177, 139, 57, .08); font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.coming-tag span { width: 5px; height: 5px; border-radius: 50%; background: #e4ba60; box-shadow: 0 0 8px rgba(228, 186, 96, .45); }
.server-card-content { padding: 28px 28px 24px; }
.server-card-content .eyebrow { color: #a9c27d; }
.server-card-content h2 { margin: 0; color: #eff2e9; font-size: clamp(28px, 4.1vw, 42px); font-weight: 820; letter-spacing: -.065em; line-height: 1.05; }
.server-description { max-width: 585px; margin: 14px 0 22px; color: #9aa8a0; font-size: 12px; line-height: 1.75; }
.server-facts { display: flex; flex-wrap: wrap; gap: 32px; }
.server-facts div { display: flex; flex-direction: column; gap: 6px; }
.server-facts span { color: #73837b; font-size: 9px; }
.server-facts strong { color: #c8d2c6; font-size: 10px; font-weight: 700; }
.server-card-footer { display: flex; align-items: center; gap: 8px; min-height: 43px; margin-top: auto; padding: 0 20px; border-top: 1px solid var(--line); color: #83928a; font-size: 9px; }
.server-info-dot { width: 6px; height: 6px; border-radius: 50%; background: #d9b86c; }
.profile-card { display: flex; flex-direction: column; align-items: center; padding: 22px 19px 18px; text-align: center; }
.profile-card > .eyebrow { width: 100%; align-self: flex-start; color: #83948b; text-align: left; }
.profile-avatar { width: 69px; height: 69px; display: grid; place-items: center; margin: 6px 0 13px; border: 1px solid rgba(198, 243, 106, .24); border-radius: 16px; color: var(--lime); background: linear-gradient(145deg, rgba(198, 243, 106, .18), rgba(112, 147, 70, .13)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); font-size: 27px; font-weight: 850; text-transform: uppercase; }
.profile-card h2 { max-width: 100%; margin: 0; overflow: hidden; color: #edf0e9; font-size: 17px; font-weight: 780; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.profile-type { margin: 5px 0 18px; color: #8eaa69; font-size: 8px; font-weight: 820; letter-spacing: .14em; }
.profile-divider { width: 100%; height: 1px; margin-bottom: 14px; background: var(--line); }
.profile-detail { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 11px; text-align: left; }
.profile-detail > span { color: #7f8d86; font-size: 9px; }
.profile-detail strong { display: inline-flex; align-items: center; gap: 6px; color: #bdcabe; font-size: 9px; font-weight: 650; text-align: right; }
.profile-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #9acb68; }
.text-button { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding: 8px 0 0; border: 0; color: #b6d980; background: transparent; cursor: pointer; font-size: 10px; font-weight: 720; }
.text-button:hover { color: #ddffa3; }
.text-button span { font-size: 13px; }

/* Footer and feedback */
.footer {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: #7c8983;
  font-size: 9px;
}
.footer-brand { color: #d7e0d4; font-size: 10px; text-decoration: none; }
.footer-status { display: inline-flex; align-items: center; gap: 7px; color: #9da99d; font-size: 8px; font-weight: 750; letter-spacing: .1em; }
.footer-status i { width: 5px; height: 5px; }
.footer-separator { margin: 0 4px; color: #59655f; }
.toast {
  position: fixed;
  z-index: 5;
  right: 25px;
  bottom: 24px;
  max-width: min(430px, calc(100vw - 36px));
  padding: 14px 16px;
  border: 1px solid rgba(198, 243, 106, .23);
  border-radius: 10px;
  color: #e6eddf;
  background: rgba(20, 31, 39, .97);
  box-shadow: 0 15px 45px rgba(0, 0, 0, .36);
  font-size: 11px;
  line-height: 1.6;
  animation: toast-in .2s ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1050px) {
  .app-shell { width: min(100% - 56px, 880px); }
  .primary-nav { gap: 21px; }
  .demo-pill { display: none; }
  .hero-grid { grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); gap: 40px; padding-top: 61px; }
  .hero-copy h1 { font-size: clamp(45px, 6.2vw, 67px); }
  .world-card { min-height: 420px; }
  .lobby-grid { grid-template-columns: minmax(0, 1.4fr) minmax(235px, .8fr); }
}

@media (max-width: 780px) {
  .app-shell { width: min(100% - 40px, 620px); }
  .topbar { min-height: 75px; gap: 15px; }
  .primary-nav { display: none; }
  .topbar-right { margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 39px; padding: 57px 0 52px; }
  .hero-copy { max-width: 590px; }
  .hero-copy h1 { font-size: clamp(49px, 10vw, 72px); }
  .hero-description { max-width: 480px; }
  .world-card { min-height: 0; aspect-ratio: 1.42; }
  .roadmap { padding-top: 22px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; }
  .section-heading > p { max-width: 490px; }
  .lobby-view { padding: 55px 0 62px; }
  .lobby-grid { grid-template-columns: minmax(0, 1.4fr) minmax(200px, .8fr); }
  .lobby-avatar { margin-right: 13px; }
}

@media (max-width: 560px) {
  .app-shell { width: min(100% - 32px, 440px); }
  .topbar { min-height: 69px; }
  .brand { gap: 8px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand-word { font-size: 12px; }
  .topbar-right { gap: 9px; }
  .header-login { font-size: 11px; }
  .header-player { gap: 6px; }
  .header-player-name { max-width: 78px; font-size: 10px; }
  .header-logout { padding: 7px 8px; font-size: 9px; }
  .hero-grid { gap: 31px; padding: 47px 0 43px; }
  .eyebrow { margin-bottom: 15px; font-size: 9px; }
  .hero-copy h1 { font-size: clamp(43px, 12vw, 60px); }
  .hero-description { margin: 17px 0 22px; font-size: 12px; }
  .login-card { padding: 18px 15px 15px; }
  .card-heading { margin-bottom: 19px; }
  .field-meta { font-size: 8px; }
  .world-card { aspect-ratio: 1.18; border-radius: 13px; }
  .scene-topline { top: 10px; right: 10px; left: 10px; }
  .scene-label, .scene-coordinate { min-height: 25px; padding-inline: 7px; font-size: 7px; }
  .scene-caption { right: 9px; bottom: 9px; left: 9px; min-height: 53px; gap: 8px; padding: 8px; }
  .scene-caption-icon { width: 26px; height: 26px; }
  .scene-caption-copy small { font-size: 8px; }
  .preview-tag { padding: 5px 6px; font-size: 7px; }
  .roadmap { padding-bottom: 42px; }
  .section-heading h2 { font-size: 25px; }
  .steps-grid { grid-template-columns: 1fr; gap: 9px; }
  .step-card { min-height: auto; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; column-gap: 12px; padding: 13px 15px; }
  .step-number { top: 15px; right: 14px; }
  .step-icon { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .step-card h3 { grid-column: 2; grid-row: 1; margin: 0 30px 4px 0; }
  .step-card p { grid-column: 2 / 4; grid-row: 2; padding-right: 18px; }
  .project-note { align-items: flex-start; margin-bottom: 40px; padding: 12px; }
  .project-note p { font-size: 9px; }
  .note-phase { display: none; }
  .footer { min-height: 70px; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; padding: 15px 0; }
  .footer > span:nth-child(2) { order: 3; width: 100%; }
  .footer-status { font-size: 7px; }
  .lobby-view { padding: 46px 0 50px; }
  .lobby-heading { align-items: flex-start; gap: 13px; margin-bottom: 25px; }
  .lobby-heading h1 { font-size: clamp(39px, 11vw, 56px); }
  .lobby-heading .hero-description { font-size: 11px; }
  .lobby-avatar { width: 57px; height: 57px; margin: 23px 4px 0 0; border-radius: 14px; box-shadow: 5px 5px 0 #47613a, 0 11px 22px rgba(0, 0, 0, .2); font-size: 23px; }
  .lobby-grid { grid-template-columns: 1fr; }
  .server-card { min-height: 0; }
  .server-card-content { padding: 23px 19px 21px; }
  .server-card-content h2 { font-size: 33px; }
  .server-description { font-size: 11px; }
  .profile-card { min-height: 310px; }
  .toast { right: 14px; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Full-screen playable voxel world */
.app-shell.is-world {
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: 0;
}
.app-shell.is-world .topbar,
.app-shell.is-world .footer { display: none; }
.app-shell.is-world main { width: 100%; height: 100%; margin: 0; }
.app-shell.is-world ~ .toast { z-index: 50; }
.world-screen {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: block;
  overflow: hidden;
  background: #7896a5;
  isolation: isolate;
  user-select: none;
}
.world-screen[hidden] { display: none !important; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; cursor: crosshair; touch-action: none; }
.world-vignette {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 14, 20, .26), transparent 25%, transparent 69%, rgba(5, 13, 17, .20));
}
.game-topbar {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px clamp(16px, 3vw, 42px);
  border-bottom: 1px solid rgba(234, 243, 224, .14);
  background: linear-gradient(180deg, rgba(9, 17, 22, .58), rgba(9, 17, 22, .16));
  color: #eff4e8;
  pointer-events: none;
}
.game-brand-block, .game-player-actions { display: flex; align-items: center; gap: 11px; }
.game-brand-mark {
  width: 39px;
  height: 39px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(221, 255, 159, .56);
  border-radius: 10px;
  color: #182116;
  background: linear-gradient(145deg, #d7ff94, #91c44d);
  box-shadow: 0 6px 20px rgba(24, 44, 17, .2);
  font-size: 17px;
}
.game-brand-copy { display: flex; flex-direction: column; gap: 4px; }
.game-brand-copy strong { color: #f4f4e8; font-size: 11px; font-weight: 850; letter-spacing: .14em; }
.game-brand-copy strong span { color: var(--lime); }
.game-brand-copy small { color: rgba(231, 240, 219, .7); font-size: 8px; font-weight: 720; letter-spacing: .15em; }
.game-world-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border: 1px solid rgba(227, 241, 217, .19);
  border-radius: 999px;
  color: rgba(237, 244, 227, .83);
  background: rgba(12, 23, 23, .32);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  backdrop-filter: blur(10px);
}
.game-world-status i { width: 6px; height: 6px; border-radius: 50%; background: #d9bd71; box-shadow: 0 0 9px rgba(217, 189, 113, .48); }
.game-world-status b { padding-left: 9px; border-left: 1px solid rgba(235, 244, 224, .25); color: #d9f3a4; font-size: 8px; font-weight: 850; letter-spacing: .11em; white-space: nowrap; }
.game-player-actions { pointer-events: auto; }
.multiplayer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 7px 9px;
  overflow: hidden;
  border: 1px solid rgba(227, 241, 217, .16);
  border-radius: 999px;
  color: rgba(229, 239, 222, .76);
  background: rgba(12, 23, 23, .34);
  font-size: 7px;
  font-weight: 820;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multiplayer-status::before { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #d8b765; content: ""; }
.multiplayer-status[data-state="online"] { border-color: rgba(142, 213, 122, .28); color: #c8efaa; }
.multiplayer-status[data-state="online"]::before { background: #8bd96c; box-shadow: 0 0 9px rgba(139, 217, 108, .65); }
.multiplayer-status[data-state="reconnecting"]::before { background: #e1a559; box-shadow: 0 0 9px rgba(225, 165, 89, .52); }
.multiplayer-status[data-state="offline"]::before { background: #dc7068; box-shadow: 0 0 9px rgba(220, 112, 104, .45); }
.teleport-open-button { color: #d9f3a4; font-size: 19px; }
.game-player-avatar { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(213, 246, 153, .48); border-radius: 8px; color: #ecffd1; background: rgba(119, 160, 69, .55); font-size: 11px; font-weight: 850; }
.game-player-name { max-width: 130px; overflow: hidden; color: #f0f1e6; font-size: 11px; font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.game-icon-button, .game-exit-button {
  min-width: 34px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(234, 242, 224, .2);
  border-radius: 8px;
  color: #f0f2e6;
  background: rgba(12, 22, 24, .34);
  cursor: pointer;
  font-size: 17px;
  transition: background .18s ease, border-color .18s ease;
}
.game-icon-button:hover, .game-exit-button:hover { border-color: rgba(218, 247, 161, .52); background: rgba(57, 77, 48, .65); }
.game-exit-button { min-width: 57px; padding: 0 10px; font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.game-crosshair { position: absolute; z-index: 3; top: 50%; left: 50%; width: 18px; height: 18px; opacity: .86; transform: translate(-50%, -50%); pointer-events: none; }
.game-crosshair::before, .game-crosshair::after { position: absolute; top: 50%; left: 50%; display: block; content: ""; border-radius: 2px; background: rgba(248, 255, 234, .92); box-shadow: 0 1px 3px rgba(10, 18, 17, .8); transform: translate(-50%, -50%); }
.game-crosshair::before { width: 2px; height: 15px; }
.game-crosshair::after { width: 15px; height: 2px; }
.game-crosshair i, .game-crosshair b { display: none; }
.game-start-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 90px 20px 120px;
  background: rgba(8, 17, 22, .12);
  backdrop-filter: blur(1px);
  transition: opacity .3s ease, visibility .3s ease;
}
.game-start-overlay.is-leaving { visibility: hidden; opacity: 0; pointer-events: none; }
.game-start-card {
  width: min(100%, 410px);
  padding: 27px 28px 22px;
  border: 1px solid rgba(235, 245, 225, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(15, 25, 30, .91), rgba(13, 25, 28, .84));
  box-shadow: 0 24px 75px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(15px);
  text-align: left;
}
.game-start-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 17px; color: #bfd99a; font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.game-start-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #d6f57f; box-shadow: 0 0 12px rgba(214, 245, 127, .65); }
.game-start-card h2 { margin: 0; color: #f4f2e7; font-size: clamp(37px, 7vw, 50px); font-weight: 880; letter-spacing: -.07em; line-height: .98; }
.game-start-card h2 span { color: var(--lime); }
.game-start-card > p:not(.game-start-eyebrow) { margin: 14px 0 19px; color: #bdc8bd; font-size: 11px; line-height: 1.7; }
.game-start-button {
  width: 100%;
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(226, 255, 166, .72);
  border-radius: 8px;
  color: #152016;
  background: linear-gradient(105deg, #c9f27a, #a9dc58);
  box-shadow: 0 9px 28px rgba(129, 179, 73, .2);
  cursor: pointer;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  transition: transform .18s ease, filter .18s ease;
}
.game-start-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.game-start-button span { font-size: 14px; }
.game-start-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 14px; color: #a1afa3; font-size: 8px; line-height: 1.6; }
.game-start-hint kbd, .control-panel kbd { min-width: 17px; height: 17px; display: inline-grid; place-items: center; padding: 0 4px; border: 1px solid rgba(230, 241, 218, .22); border-radius: 4px; color: #ecf1e5; background: rgba(244, 249, 235, .09); font-family: inherit; font-size: 8px; font-weight: 760; }
.game-start-hint span { color: #5f7662; }
.free-mouse-hint {
  position: absolute;
  z-index: 4;
  top: 89px;
  left: 50%;
  padding: 8px 11px;
  border: 1px solid rgba(231, 244, 220, .18);
  border-radius: 6px;
  color: #eef3e7;
  background: rgba(10, 20, 21, .5);
  font-size: 8px;
  font-weight: 750;
  letter-spacing: .08em;
  transform: translateX(-50%);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
.free-mouse-hint span { margin: 0 4px; color: var(--lime); }
.game-bottom-ui {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 18px;
  padding: 0 clamp(16px, 3vw, 42px) 22px;
  pointer-events: none;
}
.control-panel {
  position: relative;
  justify-self: start;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 9px 11px 11px;
  border: 1px solid rgba(232, 243, 222, .13);
  border-radius: 10px;
  background: rgba(10, 19, 22, .43);
  backdrop-filter: blur(9px);
  pointer-events: auto;
}
.control-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 22px; }
.control-panel-title { color: rgba(220, 237, 207, .65); font-size: 7px; font-weight: 850; letter-spacing: .14em; }
.control-panel-toggle {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid rgba(232, 243, 222, .2);
  border-radius: 6px;
  color: #eaf3df;
  background: rgba(245, 251, 235, .08);
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.control-panel-toggle:hover { border-color: rgba(198, 243, 106, .52); color: var(--lime); background: rgba(198, 243, 106, .1); }
.control-panel-toggle:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.control-toggle-expand { display: none; font-size: 15px; }
.control-panel-content { display: flex; flex-direction: column; gap: 7px; }
.control-panel.is-collapsed { gap: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.control-panel.is-collapsed .control-panel-header { min-height: 0; }
.control-panel.is-collapsed .control-panel-title,
.control-panel.is-collapsed .control-panel-content,
.control-panel.is-collapsed .control-toggle-collapse { display: none; }
.control-panel.is-collapsed .control-panel-toggle { width: 42px; height: 42px; border-radius: 50%; border-color: rgba(219, 238, 219, .28); color: #eff6e6; background: rgba(10, 19, 22, .74); box-shadow: 0 5px 18px rgba(0, 0, 0, .28); backdrop-filter: blur(8px); font-size: 17px; }
.control-panel.is-collapsed .control-toggle-expand { display: inline; }
.control-row { display: flex; align-items: center; gap: 11px; color: rgba(236, 243, 225, .76); font-size: 7px; font-weight: 790; letter-spacing: .1em; white-space: nowrap; }
.key-cluster { display: inline-flex; align-items: center; flex-direction: column; gap: 2px; }
.key-cluster > span { display: flex; gap: 2px; }
.key-cluster kbd { width: 17px; height: 15px; min-width: 17px; font-size: 7px; }
.key-wide { display: inline-flex; }
.key-wide kbd { min-width: 53px; height: 15px; font-size: 6px; }
.mouse-symbol { width: 22px; display: inline-grid; place-items: center; color: var(--lime); font-size: 17px; }
.hotbar-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; max-width: 100%; pointer-events: auto; }
.hotbar-label { display: flex; gap: 12px; color: #f1f2e9; font-size: 8px; font-weight: 820; letter-spacing: .13em; text-shadow: 0 1px 8px rgba(0, 0, 0, .8); }
.hotbar-label span { color: rgba(237, 243, 228, .64); font-size: 7px; font-weight: 650; }
.offhand-display { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 29px; padding: 4px 9px; border: 1px solid rgba(220, 233, 212, .28); border-radius: 7px; color: #eff5e8; background: rgba(17, 25, 25, .58); box-shadow: 0 4px 15px rgba(0, 0, 0, .18); backdrop-filter: blur(8px); }
.offhand-display .block-swatch { width: 19px; height: 19px; border-radius: 4px; }
.offhand-display strong, .offhand-empty-label { color: rgba(242, 246, 232, .86); font-size: 8px; font-weight: 820; letter-spacing: .08em; }
.offhand-hand-label { color: #e2f4bc; font-size: 8px; font-weight: 900; letter-spacing: .1em; }
.offhand-display kbd { min-width: 18px; padding: 1px 4px; border: 1px solid rgba(224, 241, 210, .26); border-radius: 4px; color: #d6e6c8; background: rgba(255, 255, 255, .075); font-size: 7px; text-align: center; }
.hotbar { display: flex; gap: 4px; width: max-content; max-width: min(calc(100vw - 28px), 100%); min-width: 0; overflow-x: auto; padding: 5px; border: 1px solid rgba(236, 244, 229, .45); border-radius: 9px; background: rgba(17, 25, 25, .53); box-shadow: 0 6px 24px rgba(0, 0, 0, .2); backdrop-filter: blur(9px); scrollbar-width: thin; }
.hotbar-slot {
  position: relative;
  width: 47px;
  height: 47px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(220, 233, 212, .2);
  border-radius: 5px;
  background: rgba(236, 243, 226, .085);
  cursor: pointer;
  pointer-events: auto;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.hotbar-slot:hover { background: rgba(238, 246, 226, .16); }
.hotbar-slot.is-selected { border-color: rgba(225, 255, 168, .92); background: rgba(193, 229, 137, .2); box-shadow: 0 0 0 1px rgba(225, 255, 168, .18), 0 0 14px rgba(179, 220, 119, .12); transform: translateY(-3px); }
.slot-key { position: absolute; top: 3px; left: 5px; color: rgba(237, 244, 230, .76); font-size: 7px; font-weight: 800; }
.block-swatch { width: 24px; height: 24px; display: block; border: 1px solid rgba(255, 255, 255, .45); box-shadow: inset -5px -5px 0 rgba(5, 15, 10, .19), inset 3px 3px 0 rgba(255, 255, 255, .17); image-rendering: pixelated; }
.swatch-grass { background: linear-gradient(180deg, #82be51 0 28%, #644c38 28% 100%); }
.swatch-dirt { background: #77503b; }
.swatch-stone { background: #8a958e; }
.swatch-leaf { background: #6caa55; }
.swatch-wood { background: repeating-linear-gradient(0deg, #916c46 0 5px, #ad8655 5px 9px); }
.swatch-gravel { background: radial-gradient(circle at 25% 25%, #ece4d2 0 2px, transparent 3px), radial-gradient(circle at 68% 66%, #9b9b8b 0 3px, transparent 4px), #c9c7b8; }
.swatch-sand { background: linear-gradient(135deg, #d8c898, #b7a577); }
.swatch-coal { background: radial-gradient(ellipse at 32% 38%, #17191a 0 24%, transparent 29%), radial-gradient(ellipse at 72% 71%, #2b2d2d 0 18%, transparent 24%), #73766f; }
.swatch-iron { background: radial-gradient(ellipse at 28% 68%, #b95232 0 23%, transparent 29%), radial-gradient(ellipse at 72% 32%, #dc8a4a 0 18%, transparent 25%), #85877e; }
.swatch-gold { background: #8a7952 url("./assets/gold-ore.webp") center / cover; }
.swatch-diamond { background: #677b7b url("./assets/diamond-ore.webp") center / cover; }
.swatch-clay { background: #967763 url("./assets/clay.webp") center / cover; }
.swatch-snow { background: #e8f1f6 url("./assets/snow.webp") center / cover; }
.swatch-ice { background: #b9dbe6 url("./assets/ice.webp") center / cover; }
.swatch-bedrock { background: #454d50 url("./assets/bedrock.webp") center / cover; }
.swatch-lapis { background: #23374a url("./assets/lapis-ore.webp") center / cover; }
.swatch-emerald { background: #264a37 url("./assets/emerald-ore.webp") center / cover; }
 .swatch-obsidian { background: #16151c url("./assets/obsidian.webp") center / cover; }
.swatch-copper { background: #605d54 url("./assets/copper-ore.webp") center / cover; }
.swatch-red-sand { background: #a95f43 url("./assets/red-sand.webp") center / cover; }
.swatch-glass { background: linear-gradient(135deg, rgba(236,255,252,.36), rgba(142,198,198,.24)), url("./assets/glass.webp") center / cover; }
.swatch-bookshelf { background: #493126 url("./assets/bookshelf.webp") center / cover; }
.swatch-brick { background: #93674d url("./assets/brick.webp") center / cover; }
.swatch-fence { background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(41,29,17,.95) 7px 10px), url("./assets/wood-planks.webp") center / cover; }
.swatch-stairs { background: linear-gradient(135deg, transparent 0 42%, #77512e 43% 57%, transparent 58%), url("./assets/stairs-wood.webp") center / cover; }
.swatch-bars { background: repeating-linear-gradient(90deg, transparent 0 4px, #aab4b2 4px 7px), url("./assets/iron-bars.webp") center / cover; }
.swatch-torch { background: radial-gradient(ellipse at 53% 23%, #fff6b5 0 10%, #ffb442 14% 24%, rgba(244,101,26,.48) 31%, transparent 43%), url("./assets/wood-planks.webp") center / cover; }
.slot-count { position: absolute; right: 4px; bottom: 2px; color: rgba(245, 248, 237, .78); font-size: 7px; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.world-readout { justify-self: end; display: flex; align-items: flex-end; flex-direction: column; gap: 5px; padding: 10px 12px; border: 1px solid rgba(232, 243, 222, .13); border-radius: 9px; color: #eef2e5; background: rgba(10, 19, 22, .4); backdrop-filter: blur(8px); }
.world-readout > span:nth-child(2) { font-size: 9px; font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: .08em; }
.world-readout small { color: rgba(219, 235, 205, .64); font-size: 7px; font-weight: 760; letter-spacing: .12em; }
.readout-dot { display: none; }

@media (max-width: 760px) {
  .app-shell.is-world { height: 100dvh; }
  .game-topbar { min-height: 64px; padding: 10px 13px; }
  .game-brand-mark { width: 33px; height: 33px; border-radius: 8px; }
  .game-brand-copy strong { font-size: 9px; }
  .game-brand-copy small { font-size: 7px; }
  .game-world-status { display: none; }
  .game-player-actions { gap: 6px; }
  .multiplayer-status { max-width: 112px; padding: 6px 7px; font-size: 6px; }
  .game-player-name { max-width: 74px; font-size: 9px; }
  .game-player-avatar { width: 25px; height: 25px; }
  .game-icon-button { min-width: 30px; height: 29px; font-size: 15px; }
  .game-exit-button { min-width: 47px; height: 29px; font-size: 7px; }
  .game-bottom-ui { grid-template-columns: 1fr auto; align-items: end; gap: 9px; padding: 0 12px 13px; }
  .control-panel { grid-column: 1; grid-row: 1; gap: 5px; padding: 8px 9px; }
  .control-row { gap: 7px; font-size: 6px; }
  .world-readout { grid-column: 2; grid-row: 1; padding: 8px; }
  .world-readout small { display: none; }
  .hotbar-wrap { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hotbar-slot { width: 40px; height: 40px; }
  .block-swatch { width: 21px; height: 21px; }
  .free-mouse-hint { top: 70px; max-width: calc(100% - 32px); white-space: nowrap; font-size: 7px; }
}

@media (max-width: 460px) {
  .game-start-card { padding: 22px 19px 18px; }
  .game-start-hint { font-size: 7px; }
  .control-panel { max-width: 155px; }
  .control-row { gap: 6px; letter-spacing: .04em; }
  .world-readout > span:nth-child(2) { font-size: 8px; }
  .hotbar-label { font-size: 7px; }
  .offhand-display { min-height: 26px; padding: 3px 7px; }
  .hotbar-slot { width: 37px; height: 38px; }
}
.swatch-bed { background: linear-gradient(180deg, #c1d2d0 0 42%, #738d91 43% 60%, #5c422e 62% 100%), url("./assets/bed-fabric.webp") center / cover; }
.swatch-cabinet { background: #69452d url("./assets/cabinet-wood.webp") center / cover; }
.swatch-workbench { background: linear-gradient(135deg, rgba(48, 203, 148, .5), transparent 48%), url("./assets/bench-metal.webp") center / cover; }
.swatch-furnace { background: radial-gradient(ellipse at 50% 65%, #ff791e 0 17%, #171817 22% 40%, transparent 42%), url("./assets/furnace-brick.webp") center / cover; }
.swatch-weapon { background: linear-gradient(135deg, transparent 42%, #cbd0cc 44% 52%, transparent 55%), url("./assets/weapon-metal.webp") center / cover; }
.swatch-jukebox { background: linear-gradient(0deg, #131719 0 32%, transparent 33%), url("./assets/jukebox-wood.webp") center / cover; }
.swatch-bucket { background: linear-gradient(180deg, #dfe4e3, #7d8b8d 65%, #3f4b4f); clip-path: polygon(14% 15%, 86% 15%, 75% 92%, 25% 92%); }
.swatch-grapple { background: radial-gradient(circle at 50% 42%, #d0d6d5 0 18%, transparent 20%), repeating-linear-gradient(35deg, transparent 0 5px, #b88e56 5px 7px), #2a3938; }

/* New placeable objects and interaction screens */
.swatch-door { background: #9b6841 url("./assets/door-wood.webp") center / cover; }
.swatch-launcher { background: linear-gradient(135deg, rgba(34, 224, 163, .34), transparent 55%), url("./assets/machine-metal.webp") center / cover; }
.swatch-binoculars { background: radial-gradient(circle at 28% 45%, #668b99 0 17%, #101a20 18% 27%, transparent 28%), radial-gradient(circle at 72% 45%, #668b99 0 17%, #101a20 18% 27%, transparent 28%), url("./assets/binocular-rubber.webp") center / cover; }
.swatch-sign { background: linear-gradient(0deg, #72522f 0 26%, transparent 27%), url("./assets/sign-wood.webp") center / cover; }
.swatch-drawing-board { background: linear-gradient(0deg, #805d37 0 15%, transparent 16%), url("./assets/drawing-paper.webp") center / cover; }
.swatch-quartz { background: #777a79 url("./assets/quartz-ore.webp") center / cover; }

.binocular-overlay {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse 47% 49% at 50% 50%, transparent 0 51%, rgba(2, 6, 8, .48) 61%, rgba(0, 0, 0, .93) 100%);
}
.binocular-overlay::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(82vw, 980px);
  height: min(47vw, 590px);
  border: 20px solid rgba(9, 15, 16, .96);
  border-radius: 50%;
  content: "";
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .44), inset 0 0 22px rgba(0, 0, 0, .26), 0 0 0 4px rgba(158, 183, 173, .16);
  transform: translate(-50%, -50%);
}
.binocular-overlay span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(226, 255, 235, .72);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.binocular-overlay span::before, .binocular-overlay span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  content: "";
  background: rgba(226, 255, 235, .8);
  transform: translate(-50%, -50%);
}
.binocular-overlay span::before { width: 1px; height: 34px; }
.binocular-overlay span::after { width: 34px; height: 1px; }

.interaction-modal {
  position: fixed;
  z-index: 35;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 26px 16px;
}
.interaction-backdrop {
  position: fixed;
  inset: 0;
  border: 0;
  background: rgba(4, 10, 12, .72);
  backdrop-filter: blur(8px);
  cursor: default;
}
.interaction-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(92dvh, 900px);
  overflow-y: auto;
  padding: 29px;
  border: 1px solid rgba(223, 243, 220, .18);
  border-radius: 17px;
  color: #edf3e8;
  background: linear-gradient(145deg, rgba(21, 33, 39, .99), rgba(12, 22, 27, .99));
  box-shadow: 0 26px 90px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .045);
}
.interaction-panel[hidden] { display: none !important; }
.modal-close {
  position: absolute;
  top: 13px;
  right: 14px;
  width: 33px;
  height: 33px;
  border: 1px solid rgba(229, 240, 223, .16);
  border-radius: 8px;
  color: #d9e5d9;
  background: rgba(255, 255, 255, .045);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}
.modal-close:hover { border-color: rgba(198, 243, 106, .48); color: var(--lime); }
.modal-eyebrow { margin: 0 42px 9px 0; color: #b9dd83; font-size: 9px; font-weight: 850; letter-spacing: .15em; }
.interaction-panel h2 { margin: 0; color: #f1f5eb; font-size: clamp(24px, 5vw, 32px); font-weight: 820; letter-spacing: -.045em; }
.modal-intro { margin: 10px 0 22px; color: #a5b4ab; font-size: 11px; line-height: 1.7; }
.interaction-form { display: flex; flex-direction: column; gap: 9px; }
.interaction-form label, .drawing-tools label { color: #d8e3d6; font-size: 10px; font-weight: 760; }
.interaction-form input, .interaction-form select, .interaction-form textarea {
  width: 100%;
  min-height: 43px;
  padding: 10px 12px;
  border: 1px solid rgba(219, 238, 219, .17);
  border-radius: 8px;
  outline: 0;
  color: #eef3e8;
  background: rgba(4, 11, 14, .62);
  font-size: 12px;
}
.interaction-form select { color-scheme: dark; }
.interaction-form textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.interaction-form input:focus, .interaction-form select:focus, .interaction-form textarea:focus { border-color: rgba(198, 243, 106, .62); box-shadow: 0 0 0 3px rgba(198, 243, 106, .08); }
.interaction-form textarea::placeholder { color: #687a70; }
.form-two-column { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 5px; }
.form-two-column > div { display: flex; flex-direction: column; gap: 8px; }
.teleport-panel { width: min(100%, 560px); }
.teleport-coordinate-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.teleport-coordinate-grid > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.teleport-coordinate-grid label { color: #d8e3d6; font-size: 9px; font-weight: 760; }
.teleport-coordinate-grid input { width: 100%; min-height: 43px; padding: 10px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 8px; outline: 0; color: #eef3e8; background: rgba(4, 11, 14, .62); font: inherit; font-size: 12px; }
.teleport-coordinate-grid input:focus { border-color: rgba(198, 243, 106, .62); box-shadow: 0 0 0 3px rgba(198, 243, 106, .08); }
.teleport-panel .launcher-state { margin-top: 13px; }
.nearest-structures { margin-top: 13px; padding: 12px; border: 1px solid rgba(219, 238, 219, .12); border-radius: 11px; background: rgba(4, 11, 14, .3); }
.nearest-structures-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.nearest-structures-heading h3 { margin: 0; color: #c6ef8b; font-size: 9px; font-weight: 880; letter-spacing: .14em; }
.nearest-structures-heading p { margin: 4px 0 0; color: #83958b; font-size: 8px; line-height: 1.45; }
.nearest-structures-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.nearest-refresh-button, .nearest-village-button { flex: 0 0 auto; min-height: 29px; padding: 6px 9px; border: 1px solid rgba(219, 238, 219, .16); border-radius: 7px; color: #d8e8d1; background: rgba(255, 255, 255, .04); cursor: pointer; font: inherit; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.nearest-village-button { border-color: rgba(198, 243, 106, .35); color: #d3f5a4; background: rgba(137, 180, 85, .11); }
.nearest-refresh-button:hover, .nearest-refresh-button:focus-visible, .nearest-village-button:hover, .nearest-village-button:focus-visible { border-color: rgba(198, 243, 106, .7); color: #e7ffbf; outline: none; }
.nearest-structure-list { display: grid; gap: 6px; max-height: 270px; overflow: auto; padding-right: 2px; }
.nearest-structure-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(225, 240, 224, .075); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.nearest-structure-details { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nearest-structure-details strong { overflow: hidden; color: #e6eee2; font-size: 10px; font-weight: 760; text-overflow: ellipsis; white-space: nowrap; }
.nearest-structure-details span { color: #90a198; font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.nearest-structure-button { flex: 0 0 auto; min-height: 30px; padding: 6px 9px; border: 1px solid rgba(179, 223, 129, .32); border-radius: 7px; color: #d5f1a7; background: rgba(137, 180, 85, .1); cursor: pointer; font: inherit; font-size: 8px; font-weight: 850; letter-spacing: .06em; }
.nearest-structure-button:hover, .nearest-structure-button:focus-visible { border-color: rgba(198, 243, 106, .72); background: rgba(137, 180, 85, .2); outline: none; }
.nearest-structures-empty { margin: 3px 0; color: #90a198; font-size: 9px; }
@media (max-width: 560px) { .teleport-coordinate-grid { grid-template-columns: 1fr; gap: 9px; } .nearest-structure-row { padding: 7px; } .nearest-structure-details span { font-size: 7px; } }
.launcher-state { min-height: 38px; margin: 7px 0 3px; padding: 10px 12px; border: 1px solid rgba(142, 224, 187, .14); border-radius: 8px; color: #a9d9b7; background: rgba(74, 135, 92, .075); font-size: 10px; line-height: 1.5; }
.launcher-panel { width: min(100%, 790px); }
.launcher-loadout { display: grid; grid-template-columns: minmax(210px, .85fr) minmax(200px, 1fr); gap: 13px; margin: 0 0 14px; }
.launcher-creative-controls { margin: 0 0 13px; padding: 12px; border: 1px solid rgba(222, 239, 216, .13); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.launcher-creative-controls h3 { margin: 0 0 9px; color: #aebfae; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.launcher-creative-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(110px, .32fr); gap: 10px; }
.launcher-creative-fields > div { display: flex; flex-direction: column; gap: 7px; }
.launcher-creative-fields label { color: #d8e3d6; font-size: 9px; font-weight: 760; }
.launcher-creative-fields select, .launcher-creative-fields input { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 8px; outline: 0; color: #eef3e8; background: rgba(4, 11, 14, .62); font-size: 11px; }
.launcher-creative-fields select { color-scheme: dark; }
.launcher-creative-controls p { margin: 8px 0 0; color: #8ea197; font-size: 8px; line-height: 1.5; }
.launcher-creative-controls select:focus, .launcher-creative-controls input:focus { border-color: rgba(198, 243, 106, .62); box-shadow: 0 0 0 3px rgba(198, 243, 106, .08); }
.launcher-load-slot, .launcher-timer-settings { min-width: 0; padding: 14px; border: 1px solid rgba(222, 239, 216, .13); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.launcher-load-slot h3, .launcher-player-inventory h3 { margin: 0 0 9px; color: #aebfae; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.launcher-slot-wrap { display: grid; place-items: center; min-height: 88px; padding: 9px; border: 1px dashed rgba(142, 224, 187, .3); border-radius: 8px; background: rgba(0, 0, 0, .15); }
.launcher-slot-wrap .inventory-slot { width: 68px; }
.launcher-load-slot p { margin: 9px 0 0; color: #8ea197; font-size: 8px; line-height: 1.5; }
.launcher-timer-settings { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.launcher-timer-settings label { color: #d8e3d6; font-size: 10px; font-weight: 760; }
.launcher-timer-settings input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 8px; outline: 0; color: #eef3e8; background: rgba(4, 11, 14, .62); font-size: 12px; }
.launcher-timer-settings input:focus { border-color: rgba(198, 243, 106, .62); box-shadow: 0 0 0 3px rgba(198, 243, 106, .08); }
.launcher-timer-settings .modal-primary { width: 100%; margin-top: 4px; }
.modal-primary:disabled { opacity: .45; cursor: not-allowed; }
.launcher-player-inventory { display: flex; flex-direction: column; gap: 13px; margin-top: 9px; }
.launcher-player-inventory section { min-width: 0; }
.launcher-player-inventory .inventory-grid { gap: 5px; }
@media (max-width: 640px) {
  .launcher-panel { padding: 22px 13px 15px; }
  .launcher-loadout { grid-template-columns: 1fr; gap: 9px; }
  .launcher-load-slot, .launcher-timer-settings { padding: 10px; }
  .launcher-player-inventory { gap: 10px; }
}
.modal-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.modal-primary, .modal-secondary {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(218, 235, 216, .17);
  border-radius: 8px;
  color: #dfe8db;
  background: rgba(255, 255, 255, .05);
  cursor: pointer;
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .08em;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.modal-secondary:hover { border-color: rgba(219, 234, 214, .4); background: rgba(255, 255, 255, .09); }
.modal-primary { border-color: rgba(206, 244, 142, .58); color: #142014; background: linear-gradient(105deg, #c6f36a, #a7d954); }
.modal-primary:hover { border-color: #e1ffa2; background: linear-gradient(105deg, #d4ff84, #b8ed68); transform: translateY(-1px); }
.drawing-panel { width: min(100%, 820px); }
.drawing-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 11px 19px; margin: 0 0 12px; }
.drawing-tools label { display: inline-flex; align-items: center; gap: 8px; }
.color-tool input { width: 34px; height: 30px; padding: 2px; border: 1px solid rgba(220, 241, 221, .22); border-radius: 7px; background: #0b1519; cursor: pointer; }
.brush-tool input { width: 112px; accent-color: #b9e96b; }
.brush-tool span { min-width: 14px; color: #b9d78b; font-variant-numeric: tabular-nums; }
.drawing-clear { margin-left: auto; min-height: 34px; }
#drawing-canvas {
  display: block;
  width: 100%;
  max-height: min(55dvh, 512px);
  aspect-ratio: 3 / 2;
  border: 1px solid rgba(221, 235, 213, .28);
  border-radius: 9px;
  background: #f5f3e9;
  box-shadow: 0 7px 26px rgba(0, 0, 0, .25);
  cursor: crosshair;
  touch-action: none;
}
#play-world:disabled { opacity: .62; cursor: wait; filter: saturate(.65); transform: none; }

@media (max-width: 600px) {
  .interaction-modal { align-items: center; padding: 15px 11px; }
  .interaction-panel { padding: 24px 18px 19px; border-radius: 13px; }
  .form-two-column { gap: 8px; }
  .form-two-column input { padding-inline: 8px; }
  .modal-actions { justify-content: stretch; }
  .modal-actions > button { flex: 1; }
  .drawing-tools { gap: 9px 12px; }
  .drawing-clear { margin-left: 0; }
  .binocular-overlay::before { width: 96vw; height: 57vw; border-width: 13px; }
}
.world-screen .game-start-overlay:not(.is-leaving) {
  background: rgba(5, 12, 15, .72);
  backdrop-filter: blur(8px);
}

/* Extended world materials and naturally rare pumpkin */
.swatch-pumpkin { background: #d66a14 url("./assets/pumpkin.webp") center / cover; }
.swatch-glowstone { background: radial-gradient(circle at 30% 28%, #fff7ad 0 8%, transparent 22%), radial-gradient(circle at 72% 68%, #ffc043 0 13%, transparent 29%), url("./assets/glowstone.webp") center / cover; box-shadow: inset 0 0 10px rgba(255, 202, 76, .35); }
.swatch-diamond-block { background: #63c6d5 url("./assets/diamond-block.webp") center / cover; }
.swatch-gold-block { background: #e4b93c url("./assets/gold-block.webp") center / cover; }
.swatch-iron-block { background: #cbd0d1 url("./assets/iron-block.webp") center / cover; }
.swatch-wool-white { background: #f5f3eb url("./assets/wool-white.webp") center / cover; }
.swatch-wool-red { background: #d83237 url("./assets/wool-red.webp") center / cover; }
.swatch-wool-blue { background: #347bcf url("./assets/wool-blue.webp") center / cover; }
.swatch-wool-yellow { background: #dfbb27 url("./assets/wool-yellow.webp") center / cover; }
.swatch-wool-purple { background: #9652b6 url("./assets/wool-purple.webp") center / cover; }
.swatch-quartz-block { background: #e8e9e5 url("./assets/quartz-block.webp") center / cover; }
.swatch-acid-container { background: radial-gradient(ellipse at 45% 70%, rgba(108, 255, 47, .88) 0 35%, rgba(26, 118, 34, .72) 37% 51%, transparent 54%), url("./assets/acid-liquid.webp") center / cover; border: 1px solid rgba(178, 255, 113, .75); box-shadow: inset 0 0 8px rgba(120, 255, 54, .34); }
.swatch-flint-steel { background: radial-gradient(circle at 70% 28%, #ffe388 0 6%, transparent 17%), linear-gradient(135deg, rgba(20, 27, 27, .3), rgba(20, 27, 27, .72)), url("./assets/flint-steel.webp") center / cover; border-color: rgba(205, 224, 220, .76); }
.swatch-tnt { background: url("./assets/tnt-side.webp") center / cover; border-color: rgba(255, 208, 142, .92); box-shadow: inset 0 0 0 1px rgba(45, 16, 13, .28), 0 0 7px rgba(210, 54, 34, .2); }
.swatch-shield { background: #79502e url("./assets/shield-wood.webp") center / cover; border-color: rgba(220, 190, 129, .82); }
.swatch-bell { background: linear-gradient(145deg, rgba(255, 219, 140, .13), rgba(42, 24, 12, .16)), url("./assets/bell-bronze.webp") center / cover; border-color: rgba(255, 221, 150, .9); clip-path: polygon(38% 0, 62% 0, 63% 16%, 76% 24%, 83% 37%, 83% 63%, 100% 83%, 94% 94%, 6% 94%, 0 83%, 17% 63%, 17% 37%, 24% 24%, 37% 16%); }
.swatch-sponge { background: #d6cc8d url("./assets/sponge.webp") center / cover; border-color: rgba(244, 229, 157, .88); }
.swatch-armor-wood { background: #ad7c48 url("./assets/shield-wood.webp") center / cover; border-color: rgba(213, 161, 102, .88); }
.swatch-armor-stone { background: #92968d url("./assets/armor-stone.webp") center / cover; border-color: rgba(214, 222, 204, .82); }
.swatch-armor-iron { background: #8b9696 url("./assets/armor-iron.webp") center / cover; border-color: rgba(203, 223, 222, .9); }
.swatch-armor-gold { background: #bb932c url("./assets/armor-gold.webp") center / cover; border-color: rgba(255, 220, 102, .94); }
.swatch-armor-diamond { background: linear-gradient(145deg, #d6ffff, #4d9faa); border-color: rgba(175, 249, 251, .95); }
.swatch-food-apple, .swatch-food-steak, .swatch-food-mutton, .swatch-food-chicken, .swatch-food-bread,
.swatch-food-carrot, .swatch-food-hotdog, .swatch-food-pizza, .swatch-food-hamburger, .swatch-food-wrap,
.swatch-food-cake, .swatch-food-potato, .swatch-food-watermelon, .swatch-food-water, .swatch-food-soda,
.swatch-food-beer, .swatch-food-cola, .swatch-food-fish { background-position: center; background-size: cover; image-rendering: auto; }
.swatch-food-apple { background-image: url("./assets/food-apple.webp?v=20261010-0.22.0"); }
.swatch-food-steak { background-image: url("./assets/food-steak.webp?v=20261010-0.22.0"); }
.swatch-food-mutton { background-image: url("./assets/food-mutton.webp?v=20261010-0.22.0"); }
.swatch-food-chicken { background-image: url("./assets/food-chicken.webp?v=20261010-0.22.0"); }
.swatch-food-bread { background-image: url("./assets/food-bread.webp?v=20261010-0.22.0"); }
.swatch-food-carrot { background-image: url("./assets/food-carrot.webp?v=20261010-0.22.0"); }
.swatch-food-hotdog { background-image: url("./assets/food-hotdog.webp?v=20261010-0.22.0"); }
.swatch-food-pizza { background-image: url("./assets/food-pizza.webp?v=20261010-0.22.0"); }
.swatch-food-hamburger { background-image: url("./assets/food-hamburger.webp?v=20261010-0.22.0"); }
.swatch-food-wrap { background-image: url("./assets/food-wrap.webp?v=20261010-0.22.0"); }
.swatch-food-cake { background-image: url("./assets/food-cake.webp?v=20261010-0.22.0"); }
.swatch-food-potato { background-image: url("./assets/food-potato.webp?v=20261010-0.22.0"); }
.swatch-food-watermelon { background-image: url("./assets/food-watermelon.webp?v=20261010-0.22.0"); }
.swatch-food-water { background-image: url("./assets/food-water.webp?v=20261010-0.22.0"); }
.swatch-food-soda { background-image: url("./assets/food-soda.webp?v=20261010-0.22.0"); }
.swatch-food-beer { background-image: url("./assets/food-beer.webp?v=20261010-0.22.0"); }
.swatch-food-cola { background-image: url("./assets/food-cola.webp?v=20261010-0.22.0"); }
.swatch-food-fish { background-image: url("./assets/food-fish.webp?v=20261010-0.22.0"); }

/* Creative/survival mode selection and survival inventory */
.mode-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  min-width: 0;
  margin: 8px 0 13px;
  padding: 0;
  border: 0;
}
.mode-picker legend { grid-column: 1 / -1; margin-bottom: 1px; color: #aebcaf; font-size: 9px; font-weight: 780; letter-spacing: .08em; }
.mode-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid rgba(225, 240, 222, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .035);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}
.mode-option:has(input:checked) { border-color: rgba(201, 242, 122, .66); background: rgba(169, 220, 88, .09); box-shadow: inset 0 0 0 1px rgba(201, 242, 122, .08); }
.mode-option input { width: 13px; height: 13px; margin: 0; accent-color: #bce86b; }
.mode-option-copy { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.mode-option-copy strong { color: #edf4e7; font-size: 10px; font-weight: 820; }
.mode-option-copy small { color: #9ba99e; font-size: 8px; line-height: 1.4; }
.mode-option-creative {
  border-color: rgba(198, 243, 106, .4);
  background: linear-gradient(145deg, rgba(99, 136, 58, .16), rgba(255, 255, 255, .035));
}
.mode-lock-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: -4px 0 12px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 8px;
  background: rgba(255, 255, 255, .028);
  color: #93a29a;
  font-size: 8.6px;
  line-height: 1.5;
}
.mode-lock-note strong { color: #d8eda9; font-weight: 780; }
.mode-lock-note.is-unlocked {
  border-color: rgba(198, 243, 106, .34);
  background: rgba(99, 136, 58, .11);
  color: #cfe0b8;
}
.game-world-status.is-survival i { background: #e56e5b; box-shadow: 0 0 9px rgba(229, 110, 91, .45); }
.survival-hud {
  position: absolute;
  z-index: 4;
  top: 88px;
  left: clamp(14px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  filter: drop-shadow(0 2px 9px rgba(0, 0, 0, .45));
}
.health-panel {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 220px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 226, 218, .25);
  border-radius: 8px;
  color: #fff0e9;
  background: rgba(29, 17, 17, .55);
  backdrop-filter: blur(7px);
}
.health-title { color: #ffc0ad; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.health-meter { width: 112px; height: 10px; overflow: hidden; border: 1px solid rgba(255, 215, 205, .32); border-radius: 99px; background: rgba(34, 11, 12, .7); }
.health-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #aa312e, #ff6c52); box-shadow: 0 0 12px rgba(241, 73, 56, .5); transition: width .22s ease; }
.health-value { min-width: 43px; color: #ffe5dc; font-size: 9px; font-weight: 820; font-variant-numeric: tabular-nums; text-align: right; }
.hunger-panel, .air-panel {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 220px;
  padding: 9px 11px;
  border: 1px solid rgba(232, 220, 159, .24);
  border-radius: 8px;
  color: #fff7db;
  background: rgba(29, 26, 14, .58);
  backdrop-filter: blur(7px);
}
.hunger-title, .air-title { color: #f5dc83; font-size: 8px; font-weight: 900; letter-spacing: .11em; }
.hunger-meter, .air-meter { width: 112px; height: 10px; overflow: hidden; border: 1px solid rgba(239, 219, 159, .3); border-radius: 99px; background: rgba(20, 18, 9, .74); }
.hunger-meter i, .air-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a87729, #f2cf59); box-shadow: 0 0 10px rgba(232, 187, 70, .36); transition: width .22s ease; }
.air-panel { border-color: rgba(152, 224, 236, .27); color: #def9ff; background: rgba(9, 31, 39, .65); }
.air-title { color: #a7ebf7; }
.air-meter { border-color: rgba(156, 224, 238, .32); background: rgba(7, 24, 34, .78); }
.air-meter i { background: linear-gradient(90deg, #2e9bb4, #9beaf4); box-shadow: 0 0 10px rgba(75, 192, 218, .45); }
.hunger-value, .air-value { min-width: 50px; color: #fff2c8; font-size: 9px; font-weight: 820; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.air-value { color: #e0faff; }
.mine-progress { width: 186px; display: flex; flex-direction: column; gap: 4px; padding: 7px 9px; border: 1px solid rgba(231, 243, 219, .19); border-radius: 7px; color: #f3f4e9; background: rgba(14, 23, 22, .62); }
.mine-progress span { font-size: 7px; font-weight: 850; letter-spacing: .13em; }
.mine-progress > div { height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.mine-progress > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #b7de62, #f5e480); transition: width .06s linear; }
.inventory-overlay {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 20px;
}
.inventory-backdrop { position: fixed; inset: 0; border: 0; background: rgba(4, 9, 11, .76); backdrop-filter: blur(9px); cursor: default; }
.inventory-window {
  position: relative;
  z-index: 1;
  width: min(100%, 720px);
  max-height: min(92dvh, 820px);
  overflow-y: auto;
  padding: 27px;
  border: 1px solid rgba(217, 237, 211, .21);
  border-radius: 16px;
  color: #ecf3e8;
  background: linear-gradient(145deg, rgba(21, 33, 37, .99), rgba(11, 20, 25, .99));
  box-shadow: 0 26px 90px rgba(0, 0, 0, .58), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.inventory-window h2 { margin: 0; color: #f4f5eb; font-size: clamp(24px, 5vw, 32px); font-weight: 840; letter-spacing: -.05em; }
.inventory-eyebrow { margin: 0 38px 7px 0; color: #b9dd83; font-size: 8px; font-weight: 850; letter-spacing: .15em; }
.inventory-intro { margin: 8px 0 15px; color: #a5b4ab; font-size: 10px; line-height: 1.6; }
.inventory-cursor { min-height: 29px; margin-bottom: 13px; padding: 7px 9px; border: 1px solid rgba(217, 237, 211, .12); border-radius: 6px; color: #c2d8ae; background: rgba(255, 255, 255, .035); font-size: 9px; }
.inventory-layout { display: grid; grid-template-columns: 154px 1fr; align-items: start; gap: 18px; }
.inventory-layout h3 { margin: 0 0 9px; color: #aebfae; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.equipment-panel { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid rgba(222, 239, 216, .13); border-radius: 9px; background: rgba(255, 255, 255, .025); }
.equipment-slots { display: grid; grid-template-columns: 1fr; gap: 7px; }
.equipment-slot { display: flex; align-items: center; justify-content: space-between; min-height: 50px; padding: 7px 9px; border: 1px dashed rgba(220, 236, 218, .22); border-radius: 7px; color: #87988e; background: rgba(0, 0, 0, .13); aspect-ratio: auto; }
.equipment-slot:hover { border-color: rgba(215, 249, 165, .63); background: rgba(198, 243, 106, .12); }
.equipment-slot .equipment-part-label { flex: 1; font-size: 7px; font-weight: 850; letter-spacing: .08em; text-align: left; }
.equipment-slot .block-swatch { width: 27px; max-width: 27px; height: 27px; flex: 0 0 27px; }
.equipment-slot .inventory-slot-empty { font-size: 15px; }
.equipment-panel p { margin: 2px 0 0; color: #7f9287; font-size: 8px; line-height: 1.5; }
.inventory-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.inventory-slot { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border: 1px solid rgba(220, 233, 212, .2); border-radius: 6px; background: rgba(236, 243, 226, .065); cursor: pointer; }
.inventory-slot:hover { border-color: rgba(215, 249, 165, .63); background: rgba(198, 243, 106, .12); }
.inventory-slot .block-swatch { width: min(68%, 31px); height: auto; aspect-ratio: 1; }
.inventory-slot-count { position: absolute; right: 3px; bottom: 1px; color: #f7f8ed; font-size: 8px; font-weight: 820; text-shadow: 0 1px 3px #000; font-variant-numeric: tabular-nums; }
.inventory-slot-empty { color: rgba(239, 244, 232, .21); font-size: 18px; }
.inventory-hotbar-title { margin-top: 15px !important; }
.inventory-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 17px; color: #93a299; font-size: 8px; }
.inventory-footer .modal-primary { min-height: 35px; }
.swatch-empty { border-color: rgba(242, 249, 231, .15); background: rgba(3, 9, 11, .25); box-shadow: none; }
.swatch-generic { background: linear-gradient(145deg, #888, #444); }
.swatch-cactus { background: #328b55 url("./assets/cactus-skin.webp") center / cover; }
.swatch-bear-trap { background: #756c59 url("./assets/bear-trap-metal.webp?v=20261010-0.22.0") center / cover; }

@media (max-width: 640px) {
  .mode-picker { gap: 6px; }
  .mode-option { align-items: flex-start; gap: 6px; padding: 8px 7px; }
  .mode-option-copy small { font-size: 7px; }
  .survival-hud { top: 74px; left: 9px; }
  .health-panel, .hunger-panel, .air-panel { min-width: 189px; gap: 6px; padding: 7px 8px; }
  .health-meter, .hunger-meter, .air-meter { width: 83px; }
  .inventory-overlay { padding: 9px; }
  .inventory-window { padding: 22px 13px 14px; border-radius: 12px; }
  .inventory-layout { grid-template-columns: 1fr; gap: 12px; }
  .equipment-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 8px; }
  .equipment-panel h3, .equipment-panel p, .equipment-slots { grid-column: 1 / -1; }
  .equipment-slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .equipment-slot { min-height: 47px; flex-direction: column; justify-content: center; gap: 1px; padding: 5px 2px; }
  .equipment-slot .equipment-part-label { font-size: 6px; text-align: center; }
  .equipment-slot .block-swatch { width: 20px; height: 20px; flex-basis: 20px; }
  .equipment-slot i { font-size: 14px; }
  .inventory-grid { gap: 4px; }
  .inventory-slot-count { right: 2px; bottom: 0; font-size: 7px; }
  .inventory-footer { align-items: flex-start; }
  .inventory-footer span { max-width: 170px; line-height: 1.5; }
  .survival-control-tip { display: flex; }
}
@media (max-width: 640px) {
  .hotbar { gap: 3px; padding: 4px; }
  .hotbar-slot { width: clamp(31px, 9vw, 36px); height: clamp(31px, 9vw, 36px); }
  .hotbar-slot .block-swatch { width: 20px; height: 20px; }
}

/* Crafted wooden tools, trampoline inventory icon, and controlled split-drag. */
.swatch-trampoline { background: radial-gradient(circle at 50% 47%, #252a2a 0 35%, #9aa6a2 37% 43%, #293234 46% 52%, transparent 54%), linear-gradient(145deg, #65746e, #202629); }
.swatch-wood-pickaxe { background: linear-gradient(148deg, transparent 38%, #765337 40% 49%, transparent 51%), linear-gradient(0deg, transparent 37%, #a98558 38% 46%, transparent 47%), #40382c; }
.swatch-wood-shovel { background: linear-gradient(0deg, transparent 40%, #835d39 42% 51%, transparent 53%), linear-gradient(180deg, transparent 7%, #ad8452 8% 32%, transparent 33%), #40382c; }
.swatch-wood-axe { background: linear-gradient(145deg, transparent 38%, #775237 40% 49%, transparent 51%), linear-gradient(135deg, transparent 17%, #b18a58 18% 44%, transparent 45%), #40382c; }
.slot-durability, .inventory-durability { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: rgba(12, 18, 15, .88); }
.slot-durability b, .inventory-durability b { display: block; height: 100%; background: linear-gradient(90deg, #d6533f, #f1d06b 42%, #8bdb72); }
.hotbar-slot .slot-durability { border-radius: 0 0 3px 3px; }
.inventory-slot { touch-action: none; user-select: none; -webkit-user-select: none; }
.inventory-slot.is-drag-source { opacity: .48; border-color: rgba(205, 244, 135, .92); transform: scale(.96); }
.inventory-slot.is-drop-target { border-color: #d7f49c; background: rgba(186, 231, 104, .28); box-shadow: 0 0 0 2px rgba(196, 239, 114, .18), 0 0 15px rgba(174, 228, 95, .2); }
.crafting-panel { width: min(100%, 560px); }
.crafting-stock { display: flex; align-items: center; justify-content: space-between; min-height: 40px; margin: -5px 0 13px; padding: 0 13px; border: 1px solid rgba(198, 243, 106, .2); border-radius: 8px; color: #d9ecbc; background: rgba(174, 212, 112, .07); font-size: 11px; font-weight: 760; }
.crafting-recipes { display: grid; gap: 8px; }
.craft-recipe { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 62px; padding: 9px 11px; border: 1px solid rgba(219, 237, 217, .14); border-radius: 9px; color: #eff5e9; text-align: left; background: rgba(239, 247, 235, .055); cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.craft-recipe:not(:disabled):hover { transform: translateY(-1px); border-color: rgba(206, 246, 142, .58); background: rgba(171, 221, 100, .12); }
.craft-recipe:disabled { opacity: .53; cursor: not-allowed; }
.craft-recipe > .block-swatch { width: 35px; height: 35px; }
.craft-recipe-copy { display: grid; gap: 4px; min-width: 0; }
.craft-recipe-copy strong { font-size: 12px; font-weight: 800; }
.craft-recipe-copy small { color: #9eafa3; font-size: 9px; line-height: 1.4; }
.craft-recipe-action { padding: 7px 9px; border: 1px solid rgba(204, 239, 151, .25); border-radius: 6px; color: #cde89e; font-size: 8px; font-weight: 850; letter-spacing: .08em; }
.craft-recipe:disabled .craft-recipe-action { color: #849189; border-color: rgba(219, 237, 217, .12); }
@media (max-width: 520px) {
  .crafting-panel { padding: 23px 16px; }
  .craft-recipe { grid-template-columns: 35px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .craft-recipe > .block-swatch { width: 30px; height: 30px; }
  .craft-recipe-copy strong { font-size: 10px; }
  .craft-recipe-copy small { font-size: 8px; }
  .craft-recipe-action { padding: 6px; font-size: 7px; }
}

/* Survival stone-tool icons and a scroll-safe crafting panel, expanded to 44 recipes. */
.swatch-stone-pickaxe { background: linear-gradient(148deg, transparent 38%, #79583b 40% 49%, transparent 51%), linear-gradient(0deg, transparent 27%, #aaa9a0 29% 48%, #656a69 49% 55%, transparent 57%), #3c433e; }
.swatch-stone-shovel { background: linear-gradient(0deg, transparent 38%, #79583b 40% 50%, transparent 52%), linear-gradient(180deg, transparent 4%, #b5b6ae 6% 34%, #656c69 35% 41%, transparent 43%), #3c433e; }
.swatch-stone-axe { background: linear-gradient(148deg, transparent 38%, #79583b 40% 50%, transparent 52%), linear-gradient(135deg, transparent 13%, #b2b2a8 15% 42%, #656c69 43% 49%, transparent 51%), #3c433e; }
.crafting-panel { max-height: min(88vh, 720px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

/* Expanded 44-recipe electronic crafting table and metal-tier tool icons. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.crafting-search { width: 100%; min-height: 38px; margin: 0 0 9px; padding: 0 12px; border: 1px solid rgba(211, 236, 207, .18); border-radius: 8px; outline: none; color: #eff5e9; background: rgba(1, 10, 11, .5); font: inherit; font-size: 11px; }
.crafting-search::placeholder { color: #82948b; }
.crafting-search:focus { border-color: rgba(203, 239, 146, .64); box-shadow: 0 0 0 3px rgba(195, 231, 143, .1); }
.crafting-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.crafting-filter { min-height: 29px; padding: 5px 9px; border: 1px solid rgba(219, 237, 217, .15); border-radius: 999px; color: #aab8ae; background: rgba(239, 247, 235, .045); font-size: 9px; font-weight: 760; cursor: pointer; }
.crafting-filter:hover, .crafting-filter.is-active { border-color: rgba(206, 246, 142, .52); color: #e4f2cf; background: rgba(171, 221, 100, .12); }
.crafting-stock { flex-wrap: wrap; justify-content: flex-start; gap: 6px; min-height: 38px; margin: 0 0 12px; padding: 7px; }
.crafting-resource { display: inline-flex; align-items: center; gap: 5px; min-height: 23px; padding: 3px 6px; border: 1px solid rgba(202, 223, 196, .1); border-radius: 6px; color: #bccbbd; background: rgba(226, 240, 221, .045); font-size: 8px; line-height: 1; white-space: nowrap; }
.crafting-resource .block-swatch { width: 13px; height: 13px; border-radius: 3px; }
.crafting-resource b { color: #e2f3ca; font-size: 9px; font-variant-numeric: tabular-nums; }
.crafting-empty { margin: 12px 0; padding: 20px 10px; border: 1px dashed rgba(219, 237, 217, .18); border-radius: 9px; color: #aab8ae; text-align: center; font-size: 11px; }
.swatch-iron-pickaxe { background: linear-gradient(148deg, transparent 38%, #604832 40% 49%, transparent 51%), linear-gradient(0deg, transparent 28%, #c1c9c8 30% 47%, #647075 48% 55%, transparent 57%), #293337; }
.swatch-iron-shovel { background: linear-gradient(0deg, transparent 39%, #694c32 41% 50%, transparent 52%), linear-gradient(180deg, transparent 6%, #c5cecd 8% 34%, #687377 35% 41%, transparent 43%), #293337; }
.swatch-iron-axe { background: linear-gradient(148deg, transparent 38%, #684b31 40% 50%, transparent 52%), linear-gradient(135deg, transparent 14%, #c6cecd 16% 42%, #677378 43% 50%, transparent 52%), #293337; }
.swatch-gold-pickaxe { background: linear-gradient(148deg, transparent 38%, #63472d 40% 49%, transparent 51%), linear-gradient(0deg, transparent 28%, #f4cc50 30% 46%, #a56b22 48% 55%, transparent 57%), #342c20; }
.swatch-gold-shovel { background: linear-gradient(0deg, transparent 39%, #674a30 41% 50%, transparent 52%), linear-gradient(180deg, transparent 6%, #f3d35f 8% 34%, #a8742b 35% 41%, transparent 43%), #342c20; }
.swatch-gold-axe { background: linear-gradient(148deg, transparent 38%, #684b31 40% 50%, transparent 52%), linear-gradient(135deg, transparent 14%, #f6d666 16% 42%, #ac792c 43% 50%, transparent 52%), #342c20; }
.swatch-diamond-pickaxe { background: linear-gradient(148deg, transparent 38%, #684a30 40% 49%, transparent 51%), linear-gradient(0deg, transparent 28%, #74e1e3 30% 46%, #227b8c 48% 55%, transparent 57%), #223238; }
.swatch-diamond-shovel { background: linear-gradient(0deg, transparent 39%, #684a30 41% 50%, transparent 52%), linear-gradient(180deg, transparent 6%, #78ebeb 8% 34%, #217a8b 35% 41%, transparent 43%), #223238; }
.swatch-diamond-axe { background: linear-gradient(148deg, transparent 38%, #684a30 40% 50%, transparent 52%), linear-gradient(135deg, transparent 14%, #7be6e7 16% 42%, #237887 43% 50%, transparent 52%), #223238; }

/* Survival chest storage: 27 chest slots plus the player's accessible slots. */
.chest-panel { width: min(100%, 760px); max-height: min(92dvh, 900px); overscroll-behavior: contain; scrollbar-width: thin; }
.furnace-panel .modal-eyebrow { color: #e69b67; }
.furnace-panel h2 { color: #fff0d8; }
.furnace-panel .chest-storage { border-color: rgba(238, 153, 93, .18); }
.furnace-processing { margin: 12px 0; padding: 12px 14px; border: 1px solid rgba(239, 170, 101, .24); border-radius: 10px; background: linear-gradient(145deg, rgba(119, 62, 36, .22), rgba(255, 255, 255, .035)); }
.furnace-process-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.furnace-process-heading h3 { margin: 0 0 4px; color: #f4d6ae; font-size: 9px; letter-spacing: .12em; }
.furnace-process-heading small { color: #c6b29b; font-size: 9px; }
.furnace-process-heading > span { padding: 5px 8px; border: 1px solid rgba(218, 196, 164, .16); border-radius: 999px; color: #b9b4a8; background: rgba(10, 12, 12, .35); font-size: 7px; font-weight: 900; letter-spacing: .09em; white-space: nowrap; }
.furnace-process-heading > span.is-active { border-color: rgba(255, 158, 72, .4); color: #ffd08b; background: rgba(151, 59, 18, .25); box-shadow: 0 0 12px rgba(255, 120, 42, .08); }
.furnace-process-slots { display: flex; align-items: center; justify-content: center; gap: clamp(7px, 2vw, 24px); }
.furnace-process-slot { display: flex; min-width: 62px; flex-direction: column; align-items: center; gap: 4px; }
.furnace-process-slot > small { color: #d0bda5; font-size: 7px; font-weight: 850; letter-spacing: .12em; }
.furnace-process-slot > div { width: 54px; height: 54px; }
.furnace-process-slot .inventory-slot { width: 54px; height: 54px; aspect-ratio: auto; border-color: rgba(234, 182, 119, .33); background: rgba(8, 12, 13, .42); }
.furnace-process-slot .inventory-slot .block-swatch { width: 28px; }
.furnace-process-slot > b { color: #e8d6c1; font-size: 8px; font-weight: 750; }
.furnace-process-operator { color: #ffd28d; font-size: 18px; font-weight: 720; }
.furnace-progress { display: flex; align-items: center; gap: 9px; margin-top: 12px; }
.furnace-progress > div { flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(17, 18, 16, .74); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5); }
.furnace-progress > div i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c35b25, #ffcf62); box-shadow: 0 0 11px rgba(255, 126, 50, .45); transition: width .12s linear; }
.furnace-progress > span { min-width: 125px; color: #bbaa96; font-size: 8px; text-align: right; }
.chest-panel h3 { margin: 0 0 8px; color: #aebfae; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.chest-panel .modal-intro { margin-bottom: 13px; }
.chest-storage { padding: 12px; border: 1px solid rgba(219, 237, 217, .14); border-radius: 9px; background: rgba(255, 255, 255, .03); }
.chest-grid { gap: 6px; }
.chest-player-inventory { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .75fr); align-items: start; gap: 16px; margin-top: 15px; }
.chest-player-inventory > section { min-width: 0; padding: 12px; border: 1px solid rgba(219, 237, 217, .12); border-radius: 9px; background: rgba(255, 255, 255, .025); }
.chest-panel .inventory-slot { min-height: 0; }
@media (max-width: 640px) {
  .chest-panel { padding: 22px 13px 15px; }
  .chest-grid { gap: 4px; }
  .chest-player-inventory { grid-template-columns: 1fr; gap: 10px; }
  .chest-player-inventory > section, .chest-storage { padding: 9px; }
  .furnace-processing { padding: 10px; }
  .furnace-process-slots { gap: 6px; }
  .furnace-process-slot { min-width: 48px; }
  .furnace-progress > span { min-width: 100px; font-size: 7px; }
}

/* Keep the accelerated game clock visible on narrow play screens. */
.world-readout #time-label { color: rgba(246, 211, 148, .9); }
@media (max-width: 760px) {
  .world-readout small#time-label { display: block; font-size: 6px; }
}

/* Third, isolated mob experiment mode and creature spawn icons. */
.mode-option-test { grid-column: 1 / -1; }
.game-world-status.is-test i { background: #bb78ee; box-shadow: 0 0 9px rgba(187, 120, 238, .55); }
.mob-test-control-tip { color: #e6c9ff; }
.block-swatch[class*="swatch-mob-"] {
  display: grid;
  place-items: center;
  border-radius: 50%;
  box-shadow: inset -4px -4px 0 rgba(5, 15, 10, .2), inset 3px 3px 0 rgba(255,255,255,.34);
  font-size: 14px;
  line-height: 1;
}
.block-swatch[class*="swatch-mob-"]::after { filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.swatch-mob-cow { background: #e7dcc7; } .swatch-mob-cow::after { content: "🐄"; }
.swatch-mob-chicken { background: #efe3bf; } .swatch-mob-chicken::after { content: "🐔"; }
.swatch-mob-fish { background: #c0ebf1; } .swatch-mob-fish::after { content: "🐟"; }
.swatch-mob-sheep { background: #f3f0e7; } .swatch-mob-sheep::after { content: "🐑"; }
.swatch-mob-wolf { background: #bbc2c4; } .swatch-mob-wolf::after { content: "🐺"; }
.swatch-mob-cat { background: #f1d2ae; } .swatch-mob-cat::after { content: "🐈"; }
.swatch-mob-bird { background: #c1e9ef; } .swatch-mob-bird::after { content: "🐦"; }
.swatch-mob-creeper { background: #a3d59b; } .swatch-mob-creeper::after { content: "☠"; }
.swatch-mob-skeleton { background: #e3e2d6; } .swatch-mob-skeleton::after { content: "💀"; }
.swatch-mob-zombie { background: #b2d0a8; } .swatch-mob-zombie::after { content: "🧟"; }
.swatch-mob-spider { background: #bda9a0; } .swatch-mob-spider::after { content: "🕷"; }
.swatch-mob-city-dweller { background: #c4d8cf; } .swatch-mob-city-dweller::after { content: "🚶"; }
.swatch-mob-mini-dragon { background: #dfc6f2; } .swatch-mob-mini-dragon::after { content: "🐉"; }
.swatch-mob-police { background: #b8d4ec; } .swatch-mob-police::after { content: "🚓"; }
.swatch-mob-behind { background: #8c8996; } .swatch-mob-behind::after { content: "👤"; }
.swatch-mob-jumpscared { background: #9b242b url("./assets/mobs/jumpscare.webp") center 38% / cover; }
.swatch-mob-jumpscared::after { content: ""; }
.swatch-mob-mafia { background: #a9a0a0; } .swatch-mob-mafia::after { content: "🕴"; }
.swatch-mob-carden { background: #c09a87; } .swatch-mob-carden::after { content: "👹"; }
.swatch-mob-bee { background: #f1da75; } .swatch-mob-bee::after { content: "🐝"; }
.swatch-mob-monster-tank { background: #b7c2ad; } .swatch-mob-monster-tank::after { content: "🚜"; }
.swatch-mob-squirrel { background: #e8c9a5; } .swatch-mob-squirrel::after { content: "🐿"; }
.swatch-mob-octopus { background: #e2bad0; } .swatch-mob-octopus::after { content: "🐙"; }
.swatch-mob-diamond-golem { background: #b6eff0; } .swatch-mob-diamond-golem::after { content: "💎"; }
.swatch-mob-flash { background: #f1cac2; } .swatch-mob-flash::after { content: "⚡"; }
.swatch-mob-piglin { background: #edc6b7; } .swatch-mob-piglin::after { content: "🐗"; }
.swatch-mob-ghost { background: #e7f2ea; } .swatch-mob-ghost::after { content: "👻"; }
.swatch-weapon-ak47, .swatch-weapon-bazooka { position: relative; overflow: hidden; border-radius: 4px; }
.swatch-weapon-ak47 { background: linear-gradient(145deg, #d8d2c6, #b9b2a6); }
.swatch-weapon-ak47::before { content: ""; position: absolute; left: 25%; top: 39%; width: 67%; height: 20%; border-radius: 3px; background: linear-gradient(180deg, #777b70, #242923 46%, #151a17); box-shadow: 0 -3px 0 -1px #42473f, 6px 2px 0 -2px #92958b; transform: rotate(-4deg); }
.swatch-weapon-ak47::after { content: ""; position: absolute; left: 7%; top: 43%; width: 24%; height: 16%; border-radius: 3px 1px 1px 3px; background: linear-gradient(180deg, #9c693c, #53341f); box-shadow: 8px 7px 0 -2px #272b27, 16px 6px 0 -2px #69462d; transform: rotate(-4deg); }
.swatch-weapon-bazooka { background: linear-gradient(145deg, #d2d7c8, #aeb9a8); }
.swatch-weapon-bazooka::before { content: ""; position: absolute; left: 11%; top: 37%; width: 76%; height: 27%; border-radius: 7px; border: 1px solid #252b25; background: linear-gradient(180deg, #77816e, #374137 44%, #222920); box-shadow: inset 0 2px 0 rgba(255,255,255,.28), 0 2px 1px rgba(0,0,0,.32); transform: rotate(-3deg); }
.swatch-weapon-bazooka::after { content: ""; position: absolute; right: 5%; top: 31%; width: 13%; height: 39%; border: 2px solid #242a24; border-radius: 50%; background: transparent; box-shadow: -12px 8px 0 -4px #5d6657; transform: rotate(-3deg); }
.swatch-diamond-gem { background: linear-gradient(135deg,#b1ffff 0 22%,#37c5d6 24% 58%,#137d9e 60%); transform: rotate(45deg) scale(.76); }
.jumpscare-overlay {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: #090507;
}
.jumpscare-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: contrast(1.15) saturate(.8) brightness(.83);
  transform: scale(1.16);
}
.jumpscare-overlay span {
  position: absolute;
  right: 5vw;
  bottom: 7vh;
  color: #fff0ed;
  font-size: clamp(18px, 5vw, 48px);
  font-weight: 950;
  letter-spacing: .22em;
  text-shadow: 0 3px 18px #8e0d12, 0 0 28px #df111b;
}
.jumpscare-overlay.is-active { animation: jumpscare-flash .98s steps(2,end) both; }
.jumpscare-overlay.is-active img { animation: jumpscare-jerk .98s cubic-bezier(.16,.95,.22,1) both; }
@keyframes jumpscare-flash {
  0% { background: #fff; opacity: .2; }
  8% { opacity: 1; }
  25% { filter: brightness(1.2); }
  48% { filter: brightness(.72); }
  100% { opacity: 1; }
}
@keyframes jumpscare-jerk {
  0% { transform: scale(.78) translateY(9%); }
  15% { transform: scale(1.55) translate(-2%, 1%); }
  34% { transform: scale(1.18) translate(2%, -1%); }
  57% { transform: scale(1.42) translate(-1%, 0); }
  100% { transform: scale(1.16); }
}
@media (max-width: 560px) {
  .mode-option-test { grid-column: 1 / -1; }
  .mob-test-control-tip { white-space: normal; }
}

/* Village wallet, banker, and the full economy catalog. */
.economy-panel { width: min(100%, 700px); }
.economy-balance { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(202, 239, 158, .22); border-radius: 9px; color: #a8bbab; background: rgba(94, 145, 67, .09); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.economy-balance strong { color: #dcffa8; font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.economy-controls { margin-top: 12px; padding: 12px; border: 1px solid rgba(219, 238, 219, .12); border-radius: 10px; background: rgba(4, 11, 14, .28); }
.economy-controls h3 { margin: 0; color: #c6ef8b; font-size: 9px; font-weight: 880; letter-spacing: .14em; }
.economy-controls > p { margin: 9px 0 0; color: #82948a; font-size: 8px; line-height: 1.55; }
.bank-rate-list, .shop-item-list { display: grid; gap: 6px; margin-top: 9px; }
.bank-rate-row, .shop-item-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 8px 9px; border: 1px solid rgba(225, 240, 224, .075); border-radius: 8px; background: rgba(255, 255, 255, .025); }
.bank-rate-item, .shop-item-name { display: flex; align-items: center; gap: 9px; min-width: 0; color: #e6eee2; font-size: 10px; font-weight: 720; }
.bank-rate-item .block-swatch, .shop-item-name .block-swatch { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 4px; }
.bank-rate-price { flex: 0 0 auto; color: #d8f6ae; font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums; }
.bank-sell-button, .shop-buy-button { flex: 0 0 auto; min-height: 29px; padding: 5px 9px; border: 1px solid rgba(179, 223, 129, .32); border-radius: 7px; color: #d5f1a7; background: rgba(137, 180, 85, .1); cursor: pointer; font: inherit; font-size: 8px; font-weight: 850; letter-spacing: .06em; }
.bank-sell-button:hover, .shop-buy-button:hover, .bank-sell-button:focus-visible, .shop-buy-button:focus-visible { border-color: rgba(198, 243, 106, .72); background: rgba(137, 180, 85, .22); outline: none; }
.bank-sell-button:disabled, .shop-buy-button:disabled { opacity: .43; cursor: not-allowed; }
.shop-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.shop-heading input { width: min(52%, 220px); min-height: 33px; padding: 7px 9px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 7px; color: #eff3ea; background: rgba(4, 11, 14, .62); font: inherit; font-size: 9px; }
.shop-category-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.shop-category-button { min-height: 27px; padding: 4px 8px; border: 1px solid rgba(219, 238, 219, .13); border-radius: 6px; color: #a9b8ad; background: rgba(255, 255, 255, .035); cursor: pointer; font: inherit; font-size: 7px; font-weight: 850; letter-spacing: .07em; }
.shop-category-button.is-active { border-color: rgba(198, 243, 106, .45); color: #dbf7b0; background: rgba(137, 180, 85, .13); }
.shop-item-list { max-height: min(42vh, 430px); overflow: auto; padding-right: 3px; }
.shop-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-price { flex: 0 0 auto; color: #cad8cb; font-size: 9px; font-weight: 800; font-variant-numeric: tabular-nums; }
.economy-status { min-height: 15px; margin: 10px 0 0; color: #b4d697; font-size: 9px; line-height: 1.5; }
.password-panel, .laser-panel, .hologram-panel, .statue-panel { width: min(100%, 460px); }
.password-panel form { margin-top: 8px; }
.password-confirm-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.password-confirm-wrap[hidden] { display: none !important; }
.password-toggle { align-self: flex-start; min-height: 30px; padding: 6px 10px; font-size: 8px; }
.hologram-type-select { display: block; width: 100%; min-height: 44px; margin-top: 7px; padding: 9px 11px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 8px; color: #eef3e8; background: #101b20; font: inherit; font-size: 11px; color-scheme: dark; }
.hologram-enabled-option { display: flex; align-items: center; gap: 9px; margin-top: 13px; color: #d8e3d6; font-size: 10px; font-weight: 750; }
.hologram-enabled-option input { accent-color: #b8e96d; width: 16px; height: 16px; }
.lottery-panel { width: min(100%, 480px); text-align: center; }
.lottery-panel .modal-eyebrow, .lottery-panel h2 { text-align: left; }
.lottery-stage { position: relative; display: grid; place-items: center; width: min(100%, 290px); margin: 16px auto 5px; padding-top: 8px; }
.lottery-pointer { position: absolute; z-index: 3; top: -2px; left: 50%; transform: translateX(-50%); color: #fff0ad; font-size: 28px; line-height: 1; text-shadow: 0 3px 12px #000; }
.lottery-wheel { position: relative; width: min(68vw, 270px); aspect-ratio: 1; overflow: hidden; border: 8px solid #dab45d; border-radius: 50%; background: conic-gradient(from -15deg, #d6ad4b 0 30deg, #203649 30deg 60deg, #416076 60deg 90deg, #253a4e 90deg 120deg, #4a6575 120deg 150deg, #22384a 150deg 180deg, #3e596e 180deg 210deg, #23384b 210deg 240deg, #4c6778 240deg 270deg, #243b4e 270deg 300deg, #3d5a6d 300deg 330deg, #21364a 330deg 360deg); box-shadow: 0 12px 28px rgba(0,0,0,.42), inset 0 0 0 3px rgba(255,255,255,.12); transform: rotate(0deg); }
.lottery-wheel.is-spinning { transition: transform 4.6s cubic-bezier(.12,.78,.16,1); }
.lottery-wheel::after { content: ""; position: absolute; inset: 10px; border: 2px dashed rgba(255,255,255,.42); border-radius: 50%; pointer-events: none; }
.lottery-wheel-label { position: absolute; z-index: 1; color: #fff6d8; font-size: 9px; font-weight: 950; letter-spacing: .04em; text-shadow: 0 1px 4px #000; }
.lottery-win-label { top: 11%; left: 50%; transform: translateX(-50%); color: #fff5be; font-size: 12px; }
.lottery-lose-label { bottom: 13%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.lottery-wheel-center { position: absolute; top: 50%; left: 50%; z-index: 2; display: grid; place-items: center; width: 64px; aspect-ratio: 1; transform: translate(-50%,-50%); border: 3px solid #ffdf82; border-radius: 50%; color: #f7edcf; background: radial-gradient(circle at 35% 30%, #4f6c7b, #13252f 70%); box-shadow: 0 3px 12px rgba(0,0,0,.5); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.lottery-status { min-height: 28px; }
.lottery-spin-button { min-width: min(100%, 250px); }
.laser-panel > label { display: block; margin: 11px 0 6px; color: #d8e3d6; font-size: 10px; font-weight: 760; }
.laser-panel > input { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid rgba(219, 238, 219, .17); border-radius: 8px; outline: 0; color: #eef3e8; background: rgba(4, 11, 14, .62); font-size: 12px; }
.laser-panel > input:focus { border-color: rgba(198, 243, 106, .62); box-shadow: 0 0 0 3px rgba(198, 243, 106, .08); }
.swatch-dollar { background: linear-gradient(145deg, #f1e7bc, #c0a75d 52%, #7d6329); }
.swatch-jetpack { background: linear-gradient(140deg, #c7d3ce, #4b6960 55%, #23342f); }
.swatch-detector { background: radial-gradient(circle, #aaf3e5 0 12%, #377c76 16% 27%, #1c373c 31%); }
.swatch-slot-machine { background: linear-gradient(90deg, #7b2626 0 25%, #d6b64b 27% 73%, #682020 75%); }
.swatch-furniture { background: linear-gradient(145deg, #ba9566, #69513b); }
.swatch-hologram { background: linear-gradient(135deg, rgba(105,255,242,.95), rgba(76,110,221,.58)); }
.swatch-curtain { background: repeating-linear-gradient(90deg, #b77d65 0 4px, #e7b99e 4px 8px); }
.swatch-curtain-sheer { background: repeating-linear-gradient(90deg, #a7d6d3 0 4px, #dff1e8 4px 8px); }
.swatch-electronics { background: linear-gradient(145deg, #101719, #58676a 65%, #9fc9b2); }
.swatch-laser { background: linear-gradient(160deg, #20262b, #5a4146 40%, #fa314b 47% 54%, #1e292c 61%); }
.swatch-hazard { background: repeating-linear-gradient(135deg, #292a25 0 5px, #c7c8ba 5px 7px, #242721 7px 12px); }
.swatch-blood { background: radial-gradient(ellipse, #8e1118 0 17%, #c22e34 19% 39%, transparent 41%), #8d8880; }
.swatch-car { background: linear-gradient(145deg, #e2b15b, #bf4b39 50%, #303b43); }
.swatch-submarine { background: linear-gradient(145deg, #d8bb56, #58785e 45%, #283f4a); }
.swatch-booster { background: linear-gradient(135deg, #454a4e, #ffb648 52%, #b4342d); }
.swatch-lottery { background: linear-gradient(135deg, #e7d694, #c7a64a 48%, #eae2b9); }
@media (max-width: 640px) {
  .economy-panel { padding: 22px 13px 15px; }
  .bank-rate-row, .shop-item-row { padding: 7px; }
  .shop-item-list { max-height: 38vh; }
}

/* Persistent, non-modal dimension story and final choice panel. */
.quest-overlay {
  position: absolute;
  z-index: 24;
  top: clamp(205px, 25vh, 300px);
  bottom: 118px;
  left: clamp(12px, 2.2vw, 32px);
  display: flex;
  align-items: flex-start;
  width: min(382px, calc(100% - 24px));
  pointer-events: none;
}
.quest-overlay[hidden] { display: none !important; }
.quest-card {
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: clamp(17px, 2.2vw, 25px);
  border: 1px solid rgba(146, 229, 238, .35);
  border-radius: 15px;
  color: #f0f7f4;
  background: linear-gradient(150deg, rgba(9, 30, 42, .94), rgba(11, 17, 31, .94));
  box-shadow: 0 20px 58px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255,255,255,.08), 0 0 34px rgba(62, 205, 221, .09);
  backdrop-filter: blur(14px);
  pointer-events: auto;
  scrollbar-color: rgba(103, 193, 190, .55) rgba(5, 11, 18, .5);
  animation: quest-panel-in .28s ease-out both;
}
.quest-card[data-kind="story"] { border-color: rgba(112, 224, 235, .39); }
.quest-card[data-kind="objective"] { border-color: rgba(215, 174, 103, .42); }
.quest-card[data-kind="countdown"] { border-color: rgba(205, 87, 90, .5); }
.quest-card[data-kind="verdict"] { border-color: rgba(238, 198, 103, .58); background: linear-gradient(150deg, rgba(41, 28, 23, .96), rgba(21, 18, 26, .97)); }
.quest-card.is-ending { border-color: rgba(206, 238, 150, .56); }
.quest-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.quest-eyebrow { margin: 0; color: #8ddde1; font-size: 8px; font-weight: 920; letter-spacing: .17em; line-height: 1.45; }
.quest-card[data-kind="objective"] .quest-eyebrow,
.quest-card[data-kind="verdict"] .quest-eyebrow { color: #f2cf83; }
.quest-card[data-kind="countdown"] .quest-eyebrow { color: #ff9e91; }
.quest-emblem { display: grid; flex: 0 0 25px; place-items: center; width: 25px; height: 25px; border: 1px solid rgba(148, 226, 227, .4); border-radius: 8px; color: #b9fcf2; background: rgba(99, 215, 218, .12); font-size: 13px; }
.quest-card h2 { margin: 9px 0 10px; color: #f7fbef; font-size: clamp(19px, 2vw, 25px); font-weight: 860; letter-spacing: -.035em; line-height: 1.15; }
.quest-card[data-kind="verdict"] h2 { color: #ffe7ac; font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -.025em; }
.quest-page { margin: 0 0 11px; color: #90ced0; font-size: 8px; font-weight: 900; letter-spacing: .15em; }
.quest-page[hidden] { display: none; }
.quest-copy { margin: 0; color: #d5e3dc; font-size: 11px; font-weight: 520; line-height: 1.76; white-space: pre-line; }
.quest-verdict-copy { color: #f0e6ce; font-size: 10px; font-weight: 740; line-height: 1.7; }
.quest-timer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 10px 12px; border: 1px solid rgba(226, 111, 108, .31); border-radius: 9px; background: rgba(88, 22, 28, .26); }
.quest-timer[hidden] { display: none; }
.quest-timer span { color: #eeaea4; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.quest-timer strong { color: #fff3d7; font-size: 25px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.quest-timer strong.is-urgent { color: #ff877a; text-shadow: 0 0 17px rgba(255, 81, 72, .6); animation: quest-urgent .7s ease-in-out infinite alternate; }
.quest-action { display: inline-flex; align-items: center; justify-content: center; min-height: 37px; margin-top: 15px; padding: 0 15px; border: 1px solid rgba(127, 223, 215, .48); border-radius: 8px; color: #e7ffff; background: linear-gradient(135deg, rgba(40, 138, 144, .54), rgba(44, 76, 118, .58)); box-shadow: 0 5px 16px rgba(0,0,0,.18); cursor: pointer; font: inherit; font-size: 8px; font-weight: 920; letter-spacing: .12em; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
.quest-action:hover, .quest-action:focus-visible { transform: translateY(-1px); border-color: rgba(181, 255, 234, .85); filter: brightness(1.18); outline: none; }
.quest-action[hidden] { display: none; }
.quest-hint { margin: 10px 0 0; color: rgba(191, 212, 202, .57); font-size: 8px; line-height: 1.45; }
@keyframes quest-panel-in { from { opacity: 0; transform: translateX(-9px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes quest-urgent { to { transform: scale(1.05); } }
@media (max-width: 640px) {
  .quest-overlay { top: clamp(180px, 25vh, 230px); bottom: 92px; left: 8px; width: min(318px, calc(100% - 16px)); }
  .quest-card { padding: 15px; border-radius: 12px; }
  .quest-card h2 { font-size: 19px; }
  .quest-copy { font-size: 10px; line-height: 1.66; }
  .quest-timer strong { font-size: 22px; }
}
@media (max-width: 640px) {
  .world-readout small#dimension-label { display: block; color: #a7ebdf; }
}

/* Left-side Multiplayer Ephemeral Chat Dock & Panel */
.mp-chat-dock {
  position: absolute;
  z-index: 68;
  top: 82px;
  left: clamp(14px, 2.5vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  pointer-events: none;
  transition: top .18s ease;
}
#survival-hud:not([hidden]) ~ .mp-chat-dock {
  top: 178px;
}
.mp-chat-quick-button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(198, 243, 106, .58);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(22, 46, 30, .95), rgba(14, 29, 25, .95));
  color: #dffab0;
  font: inherit;
  font-size: 9px;
  font-weight: 880;
  letter-spacing: .09em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .38), 0 0 12px rgba(198, 243, 106, .18);
  transition: transform .14s ease, border-color .14s ease, filter .14s ease;
}
.mp-chat-quick-button:hover,
.mp-chat-quick-button:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(198, 243, 106, .92);
  filter: brightness(1.1);
  outline: none;
}
.mp-chat-toggle {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 15px 8px 12px;
  border: 1.5px solid rgba(198, 243, 106, .65);
  border-radius: 12px;
  color: #f6fcef;
  background: linear-gradient(145deg, rgba(14, 32, 34, .95), rgba(20, 44, 30, .94));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .48), 0 0 18px rgba(198, 243, 106, .22), inset 0 1px 0 rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mp-chat-toggle:hover,
.mp-chat-toggle:focus-visible,
.mp-chat-toggle[aria-expanded="true"] {
  transform: translateY(-1px);
  border-color: rgba(198, 243, 106, .72);
  background: linear-gradient(145deg, rgba(14, 31, 34, .94), rgba(21, 44, 33, .92));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .48), 0 0 16px rgba(198, 243, 106, .16);
  outline: none;
}
.mp-chat-toggle.has-unread {
  border-color: rgba(255, 206, 94, .82);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .44), 0 0 18px rgba(255, 198, 76, .25);
}
.mp-chat-toggle-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: rgba(198, 243, 106, .14);
  border: 1px solid rgba(198, 243, 106, .28);
  font-size: 13px;
}
.mp-chat-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mp-chat-toggle-text strong {
  color: #f3f9eb;
  font-size: 10px;
  font-weight: 860;
  letter-spacing: .11em;
  line-height: 1.1;
}
.mp-chat-toggle-text small {
  color: rgba(212, 229, 200, .72);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .05em;
}
.mp-chat-toggle-text kbd {
  padding: 1px 4px;
  border-radius: 4px;
  border: 1px solid rgba(226, 241, 211, .24);
  background: rgba(255, 255, 255, .08);
  color: var(--lime);
  font-size: 7px;
  font-weight: 800;
}
.mp-chat-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffbe42, #f06743);
  color: #101712;
  font-size: 8.5px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(240, 103, 67, .45);
}
.mp-chat-unread[hidden] { display: none !important; }

.mp-chat-panel {
  pointer-events: auto;
  width: min(340px, calc(100vw - 28px));
  max-height: min(360px, calc(100vh - 340px));
  min-height: 235px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(198, 243, 106, .32);
  border-radius: 13px;
  color: #eef5e7;
  background: linear-gradient(155deg, rgba(8, 18, 23, .92), rgba(11, 22, 20, .92));
  box-shadow: 0 20px 52px rgba(0, 0, 0, .52), inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(14px);
  overflow: hidden;
  animation: quest-panel-in .2s ease-out both;
}
.mp-chat-panel[hidden] { display: none !important; }

.mp-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(226, 240, 214, .12);
  background: rgba(255, 255, 255, .03);
}
.mp-chat-title-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.mp-chat-live-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c6f36a;
  box-shadow: 0 0 10px rgba(198, 243, 106, .75);
}
.mp-chat-title-wrap h2 {
  margin: 0;
  color: #f4faec;
  font-size: 9.5px;
  font-weight: 880;
  letter-spacing: .12em;
}
.mp-chat-title-wrap p {
  margin: 2px 0 0;
  color: rgba(205, 222, 194, .66);
  font-size: 7.5px;
  font-weight: 650;
}
.mp-chat-close {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 244, 221, .16);
  border-radius: 7px;
  background: rgba(255, 255, 255, .04);
  color: #dce8d3;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.mp-chat-close:hover,
.mp-chat-close:focus-visible {
  border-color: rgba(198, 243, 106, .6);
  background: rgba(198, 243, 106, .12);
  outline: none;
}

.mp-chat-messages {
  flex: 1 1 auto;
  min-height: 130px;
  max-height: 230px;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  scrollbar-width: thin;
  scrollbar-color: rgba(198, 243, 106, .35) rgba(5, 11, 14, .4);
}
.mp-chat-empty {
  margin: auto 0;
  padding: 10px;
  border: 1px dashed rgba(215, 233, 200, .15);
  border-radius: 8px;
  color: rgba(206, 222, 195, .6);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
}
.mp-chat-empty[hidden] { display: none !important; }

.mp-chat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 9px;
  border-radius: 8px;
  border: 1px solid rgba(226, 240, 214, .1);
  background: rgba(255, 255, 255, .035);
  word-break: break-word;
}
.mp-chat-item.is-self {
  border-color: rgba(198, 243, 106, .28);
  background: rgba(198, 243, 106, .08);
}
.mp-chat-item.is-system {
  border-color: rgba(138, 217, 230, .2);
  background: rgba(84, 182, 201, .07);
  color: #b7e9f2;
  font-size: 8.5px;
  font-weight: 700;
}
.mp-chat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mp-chat-author {
  color: #c6f36a;
  font-size: 8.5px;
  font-weight: 860;
  letter-spacing: .04em;
}
.mp-chat-item.is-peer .mp-chat-author {
  color: #8ee5f0;
}
.mp-chat-time {
  color: rgba(206, 221, 196, .48);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
}
.mp-chat-text {
  margin: 0;
  color: #f1f7ea;
  font-size: 10px;
  line-height: 1.45;
  user-select: text;
}

.mp-chat-form {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-top: 1px solid rgba(226, 240, 214, .12);
  background: rgba(4, 10, 13, .45);
}
.mp-chat-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(222, 238, 209, .2);
  border-radius: 7px;
  background: rgba(255, 255, 255, .05);
  color: #f4faec;
  font: inherit;
  font-size: 10px;
}
.mp-chat-input::placeholder {
  color: rgba(196, 213, 186, .48);
}
.mp-chat-input:focus {
  border-color: rgba(198, 243, 106, .72);
  background: rgba(255, 255, 255, .08);
  outline: none;
}
.mp-chat-send {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgba(198, 243, 106, .55);
  border-radius: 7px;
  background: linear-gradient(135deg, #c6f36a, #8fc43b);
  color: #0e1810;
  font: inherit;
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .1em;
  cursor: pointer;
  transition: filter .14s ease, transform .14s ease;
}
.mp-chat-send:hover,
.mp-chat-send:focus-visible {
  filter: brightness(1.08);
  transform: translateY(-1px);
  outline: none;
}

@media (max-width: 640px) {
  .mp-chat-dock {
    top: 76px;
    left: 9px;
  }
  .mp-chat-panel {
    width: min(306px, calc(100vw - 18px));
    max-height: 270px;
  }
}

/* Village Guide Arrows HUD (toggled with '.' key) */
.village-guide-hud {
  position: absolute;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 44;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 11px;
  border: 1.5px solid rgba(255, 210, 76, .52);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(10, 21, 27, .91), rgba(14, 28, 22, .91));
  box-shadow: 0 14px 36px rgba(0, 0, 0, .52), 0 0 18px rgba(255, 210, 76, .16);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.village-guide-hud[hidden] { display: none !important; }
.village-guide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  color: #f4faec;
  font-size: 9px;
  font-weight: 880;
  letter-spacing: .1em;
}
.village-guide-header small {
  color: rgba(215, 232, 204, .75);
  font-size: 8px;
  font-weight: 700;
}
.village-guide-header kbd {
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid rgba(255, 210, 76, .5);
  background: rgba(255, 210, 76, .15);
  color: #ffd24c;
  font-weight: 900;
}
.village-guide-cards {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.village-guide-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .05);
  min-width: 132px;
}
.village-guide-card[data-target="school"] {
  border-color: rgba(95, 217, 255, .52);
  background: rgba(95, 217, 255, .09);
}
.village-guide-card[data-target="banker"] {
  border-color: rgba(255, 210, 76, .52);
  background: rgba(255, 210, 76, .09);
}
.village-guide-card[data-target="merchant"] {
  border-color: rgba(158, 245, 90, .52);
  background: rgba(158, 245, 90, .09);
}
.village-guide-arrow {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  color: #ffd24c;
  transition: transform .08s linear;
}
.village-guide-card[data-target="school"] .village-guide-arrow { color: #5fd9ff; }
.village-guide-card[data-target="banker"] .village-guide-arrow { color: #ffd24c; }
.village-guide-card[data-target="merchant"] .village-guide-arrow { color: #9ef55a; }
.village-guide-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.village-guide-info strong {
  color: #f6fcef;
  font-size: 9.5px;
  font-weight: 880;
  letter-spacing: .06em;
}
.village-guide-info span {
  color: rgba(226, 240, 216, .82);
  font-size: 8.5px;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}