@import url(https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,700&family=Montserrat&family=Poppins&display=swap);
*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.isolate {
  isolation: isolate;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1rem;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.h-32 {
  height: 8rem;
}
.h-6 {
  height: 1.5rem;
}
.w-32 {
  width: 8rem;
}
.w-6 {
  width: 1.5rem;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-xl {
  max-width: 36rem;
}
.shrink {
  flex-shrink: 1;
}
.grow {
  flex-grow: 1;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
.animate-bounce {
  animation: bounce 1s infinite;
}
.resize {
  resize: both;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-gray-700 {
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-nomo-dark {
  --tw-bg-opacity: 1;
  background-color: rgb(18 18 18 / var(--tw-bg-opacity, 1));
}
.bg-nomo-gray {
  --tw-bg-opacity: 1;
  background-color: rgb(50 50 50 / var(--tw-bg-opacity, 1));
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.p-6 {
  padding: 1.5rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.text-center {
  text-align: center;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.text-gray-300 {
  --tw-text-opacity: 1;
  color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-nomo-gold {
  --tw-text-opacity: 1;
  color: rgb(255 215 0 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.opacity-0 {
  opacity: 0;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
  --tw-grayscale: grayscale(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
  --tw-invert: invert(100%);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-touch-callout: none;
  }
.\[scenario\:\%\#\] {
  scenario: %#;
}

/* NomoStory custom component classes */

/* Mobile touch-friendly utilities */

.hover\:-translate-y-1:hover {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:text-nomo-gold:hover {
  --tw-text-opacity: 1;
  color: rgb(255 215 0 / var(--tw-text-opacity, 1));
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.hover\:shadow-black\/30:hover {
  --tw-shadow-color: rgb(0 0 0 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

.hover\:shadow-green-600\/30:hover {
  --tw-shadow-color: rgb(22 163 74 / 0.3);
  --tw-shadow: var(--tw-shadow-colored);
}

@media (min-width: 768px) {

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:h-40 {
    height: 10rem;
  }

  .md\:w-40 {
    width: 10rem;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:text-left {
    text-align: left;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.container {
  position: relative;
  width: 100%;
}

button, div, img, p, h1, h2, h3, h4, h5, h6, .prevent-select {
  -webkit-user-select: none; /* Safari */ /* IE 10 and IE 11 */
  -moz-user-select: none;
       user-select: none; /* Standard syntax */
}

p, h1, h2, h3, h4, h5, h6, label {
  color: white;
}

select, textarea {
  background-color: rgb(70, 70, 70);
  color: white;
}

.no-pointer-events {
  pointer-events: none;
}

/* Website Mode styles are imported from:
   - ../css/websiteMode.css (main styles)
   - ../html/sections/website/websiteContent.css (component styles)
*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Poppins', sans-serif;
}

body {
    background-color: #121212;
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
    /* Prevent iOS rubber-banding and ensure full viewport */
    -webkit-overflow-scrolling: touch;
}

/* Use dynamic viewport height on mobile where supported */
@supports (height: 100dvh) {
    body {
        height: 100dvh;
    }
}

html {
    /* Prevent iOS rubber-banding */
    overflow: hidden;
    height: 100%;
}

@supports (height: 100dvh) {
    html {
        height: 100dvh;
    }
}

/* Website Mode: Allow scrolling on homepage before play */
html.allow-scroll {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh;
}

html.allow-scroll body {
    overflow: visible !important;
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
}

/* Ensure website content doesn't block game inputs when hidden */
#sec_websiteContent.hidden {
    display: none !important;
    pointer-events: none !important;
}

button {
    background-color: #323232;
    color: white;
    font-size: 1rem;
}
input {
    background-color: #323232;
    color: white;
    font-size: 1rem;
}
input[type="text"]::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Color of the thumb */
}
textarea {
  background-color: #323232;
  color: white;
  font-size: 1rem;
  width: 100%;
}

.text-shadowed-5 {
    color: white;
    text-shadow: rgb(20, 20, 20) 5px 0px 0px,
        rgb(20, 20, 20) 4.90033px 0.993347px 0px,
        rgb(20, 20, 20) 4.60531px 1.94709px 0px,
        rgb(20, 20, 20) 4.12668px 2.82321px 0px,
        rgb(20, 20, 20) 3.48353px 3.58678px 0px,
        rgb(20, 20, 20) 2.70151px 4.20736px 0px,
        rgb(20, 20, 20) 1.81179px 4.6602px 0px,
        rgb(20, 20, 20) 0.849836px 4.92725px 0px,
        rgb(20, 20, 20) -0.145998px 4.99787px 0px,
        rgb(20, 20, 20) -1.13601px 4.86924px 0px,
        rgb(20, 20, 20) -2.08073px 4.54649px 0px,
        rgb(20, 20, 20) -2.94251px 4.04248px 0px,
        rgb(20, 20, 20) -3.68697px 3.37732px 0px,
        rgb(20, 20, 20) -4.28444px 2.57751px 0px,
        rgb(20, 20, 20) -4.71111px 1.67494px 0px,
        rgb(20, 20, 20) -4.94996px 0.7056px 0px,
        rgb(20, 20, 20) -4.99147px -0.291871px 0px,
        rgb(20, 20, 20) -4.83399px -1.27771px 0px,
        rgb(20, 20, 20) -4.48379px -2.2126px 0px,
        rgb(20, 20, 20) -3.95484px -3.05929px 0px,
        rgb(20, 20, 20) -3.26822px -3.78401px 0px,
        rgb(20, 20, 20) -2.4513px -4.35788px 0px,
        rgb(20, 20, 20) -1.53666px -4.75801px 0px,
        rgb(20, 20, 20) -0.560763px -4.96845px 0px,
        rgb(20, 20, 20) 0.437495px -4.98082px 0px,
        rgb(20, 20, 20) 1.41831px -4.79462px 0px,
        rgb(20, 20, 20) 2.34258px -4.41727px 0px,
        rgb(20, 20, 20) 3.17346px -3.86382px 0px,
        rgb(20, 20, 20) 3.87783px -3.15633px 0px,
        rgb(20, 20, 20) 4.4276px -2.32301px 0px,
        rgb(20, 20, 20) 4.80085px -1.39708px 0px,
        rgb(20, 20, 20) 4.98271px -0.415447px 0px;
}

.text-shadowed-3 {
    color: white;
    text-shadow: rgb(20, 20, 20) 3px 0px 0px,
        rgb(20, 20, 20) 2.83487px 0.981584px 0px,
        rgb(20, 20, 20) 2.35766px 1.85511px 0px,
        rgb(20, 20, 20) 1.62091px 2.52441px 0px,
        rgb(20, 20, 20) 0.705713px 2.91581px 0px,
        rgb(20, 20, 20) -0.287171px 2.98622px 0px,
        rgb(20, 20, 20) -1.24844px 2.72789px 0px,
        rgb(20, 20, 20) -2.07227px 2.16926px 0px,
        rgb(20, 20, 20) -2.66798px 1.37182px 0px,
        rgb(20, 20, 20) -2.96998px 0.42336px 0px,
        rgb(20, 20, 20) -2.94502px -0.571704px 0px,
        rgb(20, 20, 20) -2.59586px -1.50383px 0px,
        rgb(20, 20, 20) -1.96093px -2.27041px 0px,
        rgb(20, 20, 20) -1.11013px -2.78704px 0px,
        rgb(20, 20, 20) -0.137119px -2.99686px 0px,
        rgb(20, 20, 20) 0.850987px -2.87677px 0px,
        rgb(20, 20, 20) 1.74541px -2.43999px 0px,
        rgb(20, 20, 20) 2.44769px -1.73459px 0px,
        rgb(20, 20, 20) 2.88051px -0.838247px 0px;
}

/*
.page-contents {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: absolute;
}
*/

#canvas {
    position: absolute;
    width: 100vw;
    height: 100vh;
    right: 0;
    left: 0;
    top: 0;
}

/* Mobile viewport fixes - use dynamic viewport units where supported */
@supports (height: 100dvh) {
    #canvas {
        height: 100dvh;
    }
}

/* Ensure canvas isn't affected by mobile browser chrome */
@media screen and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
    #canvas {
        /* Use fixed positioning for more consistent mobile sizing */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.no-focus-outline:focus {
    outline: none;
}

hr {
  border: 1px solid grey; /* Set the border color to grey */
  width: 100%; /* Optional: Set the width of the hr */
  margin: 20px 0; /* Optional: Add some margin for spacing */
}

/* RECIPE DISPLAY */
.row-container {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px; /* Adjust spacing between rows */
}

.item-container {
  margin-right: 10px; /* Adjust spacing between items */
}

#img_homepageBackgroundImage {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Change link color to light blue */
a {
    color: #3498db; /* Light blue color */
    text-decoration: none; /* Removes underline, optional */
  }
  
/* Change link color on hover, optional */
a:hover {
    color: #2980b9; /* Slightly darker blue on hover */
}

/*below is the style for the credit and legal policies toggle window */

.toggleWindowMainMenu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    width: 80%;
    max-height: 80%;
    overflow-y: auto;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.85);
    border: 3px solid #FFD700;
    border-radius: 10px;
    box-shadow: 0 0 20px #FFD700;
    color: #FFFFFF;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: #FFD700 #000000;
}

.toggleWindowMainMenu::-webkit-scrollbar {
    width: 12px;
}

.toggleWindowMainMenu::-webkit-scrollbar-track {
    background: #000000;
}

.toggleWindowMainMenu::-webkit-scrollbar-thumb {
    background-color: #FFD700;
    border-radius: 20px;
    border: 3px solid #000000;
}

.toggleWindowMainMenu h1 {
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.toggleWindowMainMenu h2 {
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.toggleWindowMainMenu ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.toggleWindowMainMenu li {
    margin-bottom: 15px;
    line-height: 1.6;
}

.closeButton_credits {
    position: sticky;
    z-index: 1001;
    top: 0px;
    right: 0px;
    float: right;
    background-color: #FFD700;
    border: none;
    padding: 10px;
    width: 50px;
    cursor: pointer;
    color: #000000;
    border-radius: 5px;
}

.closeButton_credits:hover {
    background-color: #FFA500;
}

#game-over-screen {
    text-align: center;

    background: rgba(0, 0, 0, 0.6);
    padding: 1rem;
    border-radius: 10px;

    button {
        margin: 4px 0;
        width: 100%;
        display: inline-block;
    }

    .modal-item {
        margin-bottom: 0;
    }

    h1,
    h2 {
        margin-top: 0;
        margin-bottom: 5px;
    }

    #game-over-stats {
        width: 250px;
        margin: auto;
        padding: 16px 20px 16px 20px;

        @media screen and (max-width: 100%) {
            width: 200px;
            padding: 8px 20px 8px 20px;
        }

        .stat {
            font-weight: bold;
            width: 100%;
            display: flex;
            padding: 0.5rem 0;

            @media screen and (max-width: 100%) {
                padding: 0.25rem 0;
            }
        }

        .stat-name {
            text-align: right;
        }

        .stat-value {
            text-align: right;
            margin-left: auto;
        }
    }

    @media screen and (max-width: 100%) {
        font-size: 12px;
        max-width: -moz-fit-content;
        max-width: fit-content;
        width: 280px;
        padding: 0.75rem;

        button {
            font-size: 14px;
            height: 35px;
        }
    }
}

/* ============================================
   PHASE 2: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Prevent text selection and callouts on mobile */
@media screen and (max-width: 1024px) {
  body {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Allow selection in text inputs */
  input, textarea {
    -webkit-user-select: auto;
  }

  /* Ensure all interactive elements meet touch target requirements */
  button,
  select,
  [role="button"],
  .inventorySlot {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Prevent pull-to-refresh on all devices */
body {
  overscroll-behavior: none;
}

/* Touch-friendly modal adjustments for mobile landscape */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .toggleWindowMainMenu {
    width: 90%;
    max-height: 85vh;
    padding: 15px;
  }

  .toggleWindowMainMenu button {
    min-height: 44px;
    font-size: 14px;
  }

  .toggleWindowMainMenu h1 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .toggleWindowMainMenu h2 {
    font-size: 16px;
    margin-top: 16px;
    margin-bottom: 12px;
  }

  .closeButton_credits {
    width: 44px;
    height: 44px;
    padding: 8px;
  }
}

/* Extra small mobile screens modal adjustments */
@media screen and (max-width: 700px) and (orientation: landscape) {
  .toggleWindowMainMenu {
    width: 95%;
    max-height: 90vh;
    padding: 10px;
  }

  .toggleWindowMainMenu h1 {
    font-size: 16px;
    margin-bottom: 8px;
  }

  .toggleWindowMainMenu h2 {
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 8px;
  }

  .toggleWindowMainMenu li {
    margin-bottom: 8px;
    font-size: 12px;
  }
}
/* Top-LEFT HUD button cluster — Upgrades + Craft/build-palette toggle, laid out
   in a row in the corner (Upgrades moved here from the top-right settings
   cluster). The buttons keep the shared .hud-btn glass styling; this just
   anchors and spaces them. */
#div_topLeftHudButtons {
    position: fixed;
    top: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 0.6vw;
    z-index: 100;
}

/* Build panel container - positioned below the craft button (top-left) */
/* Hidden by default, shown only on Building Arena platform */
#div_itemsCanBuildAndCraft {
    position: fixed;
    top: 70px;
    left: 10px;
    z-index: 99;
    display: none;
    flex-wrap: wrap;
    max-width: 220px;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px;
    border-radius: 8px;
    gap: 4px;
}

.craftable-buildable-img {
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Set width and height to 64x64px for better HUD fit */
    width: 64px;
    height: 64px;
    /* Keep aspect ratio */
    -o-object-fit: contain;
       object-fit: contain;
    /* Flexbox handles alignment now, no float needed */
    flex-shrink: 0;
    /* Rounded corners for modern look */
    border-radius: 8px;
    /* Background for visibility */
    background-color: rgba(0, 0, 0, 0.5);
    /* Smooth transitions */
    transition: all 0.2s ease;
    /* Pointer cursor to indicate clickable */
    cursor: pointer;
}

.craftable-buildable-img:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background-color: rgba(0, 0, 0, 0.7);
    transform: scale(1.05);
}

.craftable-buildable-img.selected {
    border-color: #4CAF50;
    background-color: rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
}

.craftable-buildable-img.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.craftable-buildable-img.disabled:hover {
    transform: none;
}
textarea {
    scrollbar-width: thin;
    scrollbar-color: #444 #1e1e1e;
}

textarea::-webkit-scrollbar {
    width: 8px;
}

textarea::-webkit-scrollbar-track {
    background: #1e1e1e;
}

textarea::-webkit-scrollbar-thumb {
    background-color: #444;
    border-radius: 4px;
}
#div_bottomRightLinks     {grid-area: bottomRightLinks; }
#div_topRightLinks        {grid-area: topRightLinks   ; }
#sec_homepageMiddleCenter {grid-area: homepageMiddleCenter; }
#sec_socialMediaLinks     {grid-area: socialMediaLinks}

.css-grid-homescreen-desktop {
  display: grid;
  min-height: 100vh;
  grid-template-areas:
    '. . topRightLinks'
    '. homepageMiddleCenter .'
    'socialMediaLinks . bottomRightLinks';
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  position: relative;
}

@media screen and (max-width: 767px) {
  .css-grid-homescreen-desktop {
    grid-template-areas:
      '. . . .'
      '. homepageMiddleCenter homepageMiddleCenter .'
      '. socialMediaLinks socialMediaLinks .'
      '. topRightLinks bottomRightLinks .'
      '. . . .';
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-columns: auto auto auto auto;
    align-content: center;
    justify-items: center;
  }

  #sec_homepageMiddleCenter,
  #sec_socialMediaLinks {
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 767px) and (orientation: landscape) {
  .css-grid-homescreen-desktop {
    grid-template-areas:
      'homepageMiddleCenter topRightLinks'
      'homepageMiddleCenter bottomRightLinks'
      'homepageMiddleCenter socialMediaLinks';
    grid-template-rows: auto auto auto;
    grid-template-columns: auto auto;
    align-content: center;
    align-items: center;
    justify-items: center;
  }

  #sec_homepageMiddleCenter {
    margin-right: 20px;
  }

  #sec_socialMediaLinks,
  #div_topRightLinks,
  #div_bottomRightLinks {
    margin-bottom: 20px;
  }
}
#div_bottomCenter                    {grid-area: bottomCenter                   ; }
#div_bottomRightSection              {grid-area: bottomRightSection             ; }
#div_containerGaugesImagePlaceholder {grid-area: containerGaugesImagePlaceholder; }
#div_containerLeaderboard            {grid-area: containerLeaderboard           ; }
#div_containerTierTreeCharacters     {grid-area: containerTierTreeCharacters    ; }
#div_centerMiddle                    {grid-area: centerMiddle                   ; }
#div_topRightSettingsContainer       {grid-area: topRightSettingsContainer      ; }

.css-grid-game-desktop {
  display: grid;
  height: 100vh;
  grid-template-areas:
    'containerTierTreeCharacters containerTierTreeCharacters topRightSettingsContainer'
    '. . containerLeaderboard'
    '. centerMiddle bottomRightSection'
    'containerGaugesImagePlaceholder bottomCenter bottomRightSection';
  grid-template-rows: 5vw 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}
/* Mobile Landscape Game HUD Layout */
/* Applied when: max-width 1024px AND landscape orientation */

@media screen and (max-width: 1024px) and (orientation: landscape) {

  /* Simplify the main grid for mobile */
  .css-grid-game-desktop {
    display: grid;
    height: 100vh;
    grid-template-areas:
      'topLeft . topRight'
      '. . .'
      'bottomLeft bottomCenter bottomRight';
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 2fr 1fr;
    pointer-events: none; /* Allow touches through to joysticks */
  }

  /* Re-enable pointer events on actual UI elements */
  .css-grid-game-desktop > * {
    pointer-events: auto;
  }

  /* === TOP LEFT: Simplified platform info === */
  #div_topLeftPlatformSelector {
    grid-area: topLeft;
    flex-wrap: wrap;
    max-width: 200px;
    padding: 6px 10px;
    font-size: 12px;
  }

  #div_topLeftPlatformSelector label,
  #div_topLeftPlatformSelector button,
  #div_topLeftPlatformSelector select {
    font-size: 11px;
    padding: 4px 8px;
  }

  /* Hide less essential platform controls on mobile */
  #btn_browsePlatforms,
  #btn_toggleObserverMode,
  #spn_observerFollowing,
  #spn_observerFollowingHint {
    display: none;
  }

  /* === TOP RIGHT: Minimal settings === */
  #div_topRightSettingsContainer {
    grid-area: topRight;
    transform: scale(0.8);
    transform-origin: top right;
  }

  /* Hide leaderboard on mobile (too much screen space) */
  #div_containerLeaderboard {
    display: none;
  }

  /* === BOTTOM CENTER: Inventory hotbar === */
  #div_bottomCenter {
    grid-area: bottomCenter;
  }

  /* Inventory hotbar adjustments for mobile */
  #div_inventoryHotbar {
    bottom: 20px !important;
    gap: 15px !important;
  }

  .inventorySlot {
    width: 56px !important;
    min-width: 56px !important;
    height: 56px !important;
    min-height: 56px !important;
  }

  /* Shrink the stack-count badge with the smaller mobile slots
     (the keybind hints it replaced were hidden here entirely) */
  .slotCount {
    font-size: 11px;
    top: 2px;
    left: 3px;
  }

  /* === BOTTOM LEFT: Health/gauges === */
  #div_containerGaugesImagePlaceholder {
    grid-area: bottomLeft;
    transform: scale(0.75);
    transform-origin: bottom left;
  }

  /* === Hide desktop-only elements === */
  #div_containerTierTreeCharacters,
  #div_chatBox,
  #sec_mapEditor {
    display: none !important;
  }

  /* Build palette: hidden by default on mobile, revealed by the craft toggle
     (body.mobile-build-open) as a centered, scrollable, touch-sized overlay.
     Selecting an item enters placement and tickMobileBuildControls closes it. */
  #div_itemsCanBuildAndCraft {
    display: none !important;
  }

  body.mobile-build-open #div_itemsCanBuildAndCraft {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    gap: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 88vw;
    max-height: 72vh;
    overflow-y: auto;
    padding: 16px;
    margin: 0;
    background: rgba(18, 18, 22, 0.93);
    border: 2px solid rgba(255, 255, 255, 0.28);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
    z-index: 1200;
    pointer-events: auto;
  }

  /* Touch-sized build items in the mobile overlay. */
  body.mobile-build-open #div_itemsCanBuildAndCraft img {
    width: 56px;
    height: 56px;
  }

  /* Level bar now lives in the bottom-left gauge stack and scales itself
     (transform: scale) alongside the health/stamina bars — see bottomCenter.css. */

  /* === Bottom right section === */
  #div_bottomRightSection {
    grid-area: bottomRight;
    transform: scale(0.8);
    transform-origin: bottom right;
  }

  /* === Center middle (spawn prompts, etc.) === */
  #div_centerMiddle {
    grid-area: unset;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }
}

/* Extra small mobile screens (iPhone SE, etc.) */
@media screen and (max-width: 700px) and (orientation: landscape) {

  #div_inventoryHotbar {
    gap: 8px !important;
  }

  .inventorySlot {
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
  }

  #div_topLeftPlatformSelector {
    max-width: 150px;
    font-size: 10px;
  }

  #div_containerGaugesImagePlaceholder {
    transform: scale(0.6);
  }

  #div_topRightSettingsContainer {
    transform: scale(0.7);
  }

  #div_bottomRightSection {
    transform: scale(0.7);
  }
}

/* Very small height screens (landscape with limited vertical space) */
@media screen and (max-height: 400px) and (orientation: landscape) {

  #div_inventoryHotbar {
    bottom: 10px !important;
    gap: 6px !important;
  }

  .inventorySlot {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  #div_containerGaugesImagePlaceholder {
    transform: scale(0.5);
  }
}

#sec_respawnPage { grid-area: respawnPage; }

.css-grid-respawn-desktop {
  display: grid;
  height: 100vh;
  grid-template-areas:
    '.'
    'respawnPage'
    '.';
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr;
  position: relative;
}

@media screen and (max-width: 767px) {
  .css-grid-respawn-desktop {
    grid-template-areas:
      'respawnPage';
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }
}
:root {
    --ability-icon-size: calc(5vw + 20px);
    --ability-icon-max-size: 100px;
    --ability-icon-border-width: calc(0.3vw + 2px);
    --ability-icon-border-color: gray;
    --ability-icon-background-color: #333;
    --ability-icon-position: calc(0.5vh + 3vw + 20px);
}

/* Phase 4.1: Legacy ability icon styles (replaced with 4-slot hotbar in abilityHotbar.css) */
/*
#img_abilityIcon {
    background-color: var(--ability-icon-background-color);
    position: fixed;
    bottom: var(--ability-icon-position);
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    width: var(--ability-icon-size);
    max-width: var(--ability-icon-max-size);
    height: var(--ability-icon-size);
    max-height: var(--ability-icon-max-size);
    border-color: var(--ability-icon-border-color);
    border-width: var(--ability-icon-border-width);
    border-style: solid;
    display: inline-block;
    box-sizing: border-box;
    filter: brightness(75%);
    cursor: pointer;
}

#div_abilityIconOverlay {
    background-color: var(--ability-icon-background-color);
    opacity: 50%;
    position: fixed;
    bottom: var(--ability-icon-position);
    left: 50%;
    transform: translateX(-50%);
    width: var(--ability-icon-size);
    max-width: var(--ability-icon-max-size);
    height: var(--ability-icon-size);
    max-height: var(--ability-icon-max-size);
    border-radius: 10px;
}
*/

/* Player level gauge — BOTTOM of the bottom-left gauge stack (level / stamina /
   health, all 200×24). Same visual language as the health/stamina gauges: dark
   recessed back, rounded fill, blue = XP progress. The "Level N" label is centred
   over the bar. Purely informational; never intercepts pointer input. */
#div_levelUpBarBack {
    position: fixed;
    left: 20px;
    bottom: 20px; /* BOTTOM of the gauge stack (level / stamina / health) */
    /* border-box so the 2px border is INCLUDED — outer size matches the health
       and stamina bars exactly (their border sits on an inset child instead). */
    box-sizing: border-box;
    width: 200px; /* same length as the health + stamina bars */
    height: 24px;
    z-index: 100;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #141414;
    border-radius: 7px;
}

#div_levelUpBarFront {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: 0%;
    max-width: calc(100% - 6px);
    background: #4a90e2;
    border-radius: 4px;
    /* XP arrives in steps; a short linear transition smooths the JS-driven
       width animation in playerLevel.ts without fighting it. */
    transition: width 0.1s linear;
}

#p_levelText {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: white;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
}

/* Mobile parity with the health/stamina bar scaling. */
@media screen and (max-width: 768px) {
    #div_levelUpBarBack {
        transform: scale(0.6);
        transform-origin: bottom left;
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    #div_levelUpBarBack {
        transform: scale(0.5);
        transform-origin: bottom left;
    }
}
#btn_recipes {
    background-color: rgb(89, 60, 10) 
}

#cnv_minimapCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}    

#div_bottomRightSection {
    position: relative;   
}

#div_btnRecipes {
    text-align: center
}

#div_containerResources {
    margin-bottom: 10px;
    background-color: rgba(89, 89, 89, 0.9);
    position: fixed;
    bottom: calc(10vw + 20px);
    right: 10px;
    z-index: 999;
    padding: 8px;
    border-radius: 8px;
}

#div_containerZoom {
    margin-bottom: 10px; 
    background-color: rgb(89, 89, 89); 
    position: absolute; 
    bottom: calc(10vw + 10px); 
    right: 0;
}

/* Self-centered radar panel. Kept 10vw square: the resources container
   above stacks at bottom: calc(10vw + 20px), which assumed the legacy
   10vw-wide minimap image — same footprint, no layout ripple. */
#div_minimapContainer {
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 10vw;
    height: 10vw;
    z-index: 1000; /* Ensures it's above other elements */
    pointer-events: none; /* clicks fall through to the game (punch aiming) */
    box-sizing: border-box;
    background-color: rgba(12, 16, 12, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    overflow: hidden;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Expanded radar: a large, centered, semi-transparent overlay you can read at a
   glance. The canvas fills 100% and re-sizes itself to the box each frame
   (see ui/bridge/minimap.ts), so the same radar simply renders bigger. The
   overlay captures clicks (pointer-events:auto) so you don't accidentally punch
   the world through it — close with the X button, the same toggle, or Escape.

   Centered with inset:0 + margin:auto (NOT a transform) so `transform` is left
   free for the open/close zoom: minimapExpandToggle.ts runs a FLIP animation that
   grows the box out of the bottom-right corner and shrinks it back, instead of
   the old instant corner→centre jump. */
#div_minimapContainer.minimap-expanded {
    inset: 0;
    margin: auto;
    width: 82vmin;
    height: 82vmin;
    transform-origin: top left;
    z-index: 1500;
    /* Click-THROUGH: the expanded map is a see-through overlay — pointer events
       (clicks, aim, cursor) fall through to the game behind it so you can keep
       playing with the map open. The close button (.minimap-close-btn) re-enables
       pointer-events: auto so the X still works. */
    pointer-events: none;
    background-color: rgba(10, 14, 10, 0.62);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.55);
}

/* Minimap overview toggle — positioned ABOVE the radar, right edge aligned with
   it. Reuses the .hud-btn glass style (so it matches the other shortcut buttons
   and is big enough for the M hint). Id selectors win over .hud-btn for the
   position/visibility overrides. */
#btn_minimapExpand {
    position: fixed;
    bottom: calc(10vw + 16px); /* sits just above the 10vw-tall radar */
    right: 10px;               /* right-aligned with the radar (also at right:10px) */
    z-index: 1001;             /* above the collapsed radar (1000) */
    pointer-events: auto;
}

/* Hidden while the overview is expanded (the overlay's own X closes it). The
   open button follows the container in DOM order, so the sibling combinator
   works. */
#div_minimapContainer.minimap-expanded ~ #btn_minimapExpand {
    display: none;
}

/* Hidden when the minimap is disabled on this platform (set by syncMinimapDOM),
   so the button never floats above an absent radar. */
#btn_minimapExpand.mm-hidden {
    display: none;
}

/* View-range quick-upgrade "+" — sits on the row just above the radar, to the
   LEFT of the expand (M) button (which is right:10px and ~one hud-btn wide).
   Green dashed to match the Upgrades window's buy buttons. Shown only when a
   skill point is available and View isn't maxed (ui/minimapViewUpgrade.ts
   toggles .hidden). Reuses .hud-btn for sizing; the id overrides the look. */
#btn_minimapViewUpgrade {
    position: fixed;
    bottom: calc(10vw + 16px);                           /* same row as #btn_minimapExpand */
    right: calc(10px + clamp(36px, 3.5vw, 52px) + 10px); /* just left of the M button + a 10px gap */
    z-index: 1001;                                       /* above the collapsed radar (1000) */
    pointer-events: auto;
    border: 2px dashed #2ecc71;
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 800;
    line-height: 1;
    animation: viewUpgradePulse 1.6s ease-in-out infinite;
}

#btn_minimapViewUpgrade:hover {
    border-color: #27ae60;
    background: rgba(46, 204, 113, 0.3);
    color: #fff;
}

#btn_minimapViewUpgrade.hidden {
    display: none;
}

@keyframes viewUpgradePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.65; }
}

/* Close (X) inside the overlay — only visible while expanded. The container is
   click-through, so this button opts back into pointer events. */
.minimap-close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2; /* above the canvas */
    display: none; /* shown only when expanded */
    align-items: center;
    justify-content: center;
    width: clamp(32px, 3vw, 44px);
    height: clamp(32px, 3vw, 44px);
    padding: 0;
    border: none;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    pointer-events: auto;
    outline: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.minimap-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}

.minimap-close-btn:active {
    transform: scale(0.94);
}

.minimap-close-btn svg {
    width: 60%;
    height: 60%;
    stroke: currentColor;
}

#div_minimapContainer.minimap-expanded .minimap-close-btn {
    display: flex;
}

#div_resource1,
#div_resource2,
#div_resource3,
#div_resource4 {
    display: flex; 
    align-items: center;
}

#img_resourceIcon_1,
#img_resourceIcon_2,
#img_resourceIcon_3,
#img_resourceIcon_4 {
    width: 3vw;
}

#span_resource1,
#span_resource2,
#span_resource3,
#span_resource4 {
    text-align: right;
    margin-right: 10px;
    font-size: 1.5rem;
    color: white;
}

/* Phase 3: Resource collection animations */
@keyframes resource-collected {
    0% {
        transform: scale(1);
        color: white;
    }
    50% {
        transform: scale(1.3);
        color: #7ADA80;  /* Green flash */
    }
    100% {
        transform: scale(1);
        color: white;
    }
}

@keyframes resource-icon-pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.5);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

/* Applied via JS when resource is collected */
.resource-collected {
    animation: resource-collected 0.3s ease-out;
}

.resource-icon-pulse {
    animation: resource-icon-pulse 0.3s ease-out;
}
#btn_closeRecipesDiv,
#btn_settings {
    font-size: 18px;
    float: right; 
    width: 40px;
}

#chk_settingToggleUsernameVisibility {
    align-items: center;
}

#div_recipes {
    display: none; 
    background-color: rgb(60, 60, 60); 
    width: 300px;
}

#div_settings {
    display: none;
    background-color: rgb(60, 60, 60);
    color: #fff;
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto;
  }

/* ---- Controls: rebindable keyboard shortcuts (its own panel) ---- */
#btn_openKeybindings {
    font-size: 13px;
    padding: 6px 12px;
    cursor: pointer;
}

#div_keybindings {
    display: none;
    background-color: rgb(60, 60, 60);
    color: #fff;
    width: 360px;
    padding: 0 14px 14px;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 90vh;
    overflow-y: auto;
}

#btn_keybindingsClose {
    font-size: 18px;
    float: right;
    width: 40px;
    margin-top: 10px;
}

#lbl_keybindingsHelp {
    font-size: 12px;
    opacity: 0.75;
    margin: 2px 0 8px;
}

.keybinding-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.keybinding-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.keybinding-label {
    font-size: 13px;
}

.keybinding-desc {
    font-size: 11px;
    opacity: 0.6;
}

.keybinding-key {
    flex: 0 0 auto;
    min-width: 56px;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    cursor: pointer;
}

.keybinding-key:hover {
    background-color: rgba(255, 255, 255, 0.12);
}

.keybinding-key.is-capturing {
    border-color: #ffd24a;
    color: #ffd24a;
    font-weight: 400;
    font-size: 11px;
}

.keybinding-key.is-unbound {
    opacity: 0.5;
    font-weight: 400;
}

#div_keybindingsStatus {
    font-size: 11px;
    color: #ffd24a;
    min-height: 14px;
    margin: 6px 0;
}

#btn_keybindingsReset {
    font-size: 12px;
    padding: 4px 10px;
    margin-bottom: 6px;
    cursor: pointer;
}

#lbl_musicVolume,
#lbl_soundVolume,
#rng_musicVolume,
#rng_soundVolume {
    display: inline-block;
    vertical-align: middle;
}

/* ---- Graphics / Performance section (Options panel) ---- */
#lbl_graphicsHelp {
    font-size: 11px;
    opacity: 0.6;
    margin: 2px 0 8px;
}

.graphics-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.graphics-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: pointer;
}

.graphics-label {
    font-size: 13px;
}

.graphics-desc {
    font-size: 11px;
    opacity: 0.6;
}

.graphics-check {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.graphics-select {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 3px 6px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    cursor: pointer;
}

.graphics-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.graphics-actions button {
    flex: 1 1 auto;
    font-size: 12px;
    padding: 5px 10px;
    cursor: pointer;
}

#div_chatBox {
    position: absolute;
    display: none;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50%;
    margin-top: 35px;
    outline: none; 
}

#inp_chatBox {
    border-radius: 7px;
    border: 5px solid #141414;
    padding: 5px;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
}
#p_availableUpgradePoints,
#p_availableUpgradePointsLabel {
    display: inline;
}

#div_containerGaugesImagePlaceholder {
    /* Default styles for larger screens */
    transform: scale(1);
    transform-origin: bottom left;
    position: absolute;
    /* Sits ABOVE the bottom-left gauge stack (stamina 20 / health 40 / portal
       60-78px) so the lowered bars don't overlap the upgrade points/skills. */
    bottom: 88px;
    left: 0;
  }
  
  /* For tablets and large phones */
  @media screen and (max-width: 768px) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.6);
    }
  }
  
  /* For smaller phones in portrait mode */
  @media screen and (max-width: 480px) and (orientation: portrait) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.4);
    }
  }
  
  /* For phones in landscape mode */
  @media screen and (max-height: 480px) and (orientation: landscape) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.3);
    }
  }
  
  /* For very small devices or extreme cases */
  @media screen and (max-width: 320px), screen and (max-height: 320px) {
    #div_containerGaugesImagePlaceholder {
      transform: scale(0.2);
    }
  }
/* Own-player health bar — TOP of the bottom-left gauge stack (level bottom,
   stamina middle, health top; all 200×24). Same visual language as the stamina
   gauge below it: dark recessed back, rounded fill. Green fill = health (stamina
   stays amber). Purely informational: never intercepts pointer input. */
#div_healthBar {
    position: fixed;
    left: 20px;
    bottom: 80px; /* TOP of the stack: stamina bottom 50 + its 24px height + 6px gap */
    width: 200px;
    height: 24px; /* as tall as the level bar */
    z-index: 100;
    pointer-events: none;
}

#div_healthBarBack {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #141414;
    border-radius: 7px;
}

#div_healthBarFront {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: 100%;
    max-width: calc(100% - 6px);
    background: #2ecc71;
    border-radius: 4px;
    /* Health changes arrive as ~10Hz entity updates (damage + regen ticks) —
       the same short linear transition the stamina bar uses smooths the
       steps without fighting the next update. */
    transition: width 0.1s linear;
}

/* Mobile parity with the stamina bar scaling. */
@media screen and (max-width: 768px) {
    #div_healthBar {
        transform: scale(0.6);
        transform-origin: bottom left;
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    #div_healthBar {
        transform: scale(0.5);
        transform-origin: bottom left;
    }
}

/* Sprint stamina gauge (hold Shift — tuning in shared/config/staminaConfig.ts).
   Bottom-left CORNER: bottom of the health/stamina/portal gauge stack, just
   above the upgrades-points panel (#div_containerGaugesImagePlaceholder).
   (Global chat used to sit here but was removed.) Purely informational:
   never intercepts pointer input. */
#div_staminaBar {
    position: fixed;
    left: 20px;
    bottom: 50px; /* MIDDLE of the stack: level bottom 20 + its 24px height + 6px gap */
    width: 200px;
    height: 24px; /* as tall as the level bar */
    z-index: 100;
    pointer-events: none;
}

#div_staminaBarBack {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #141414;
    border-radius: 7px;
}

#div_staminaBarFront {
    position: absolute;
    top: 3px;
    left: 3px;
    bottom: 3px;
    width: 100%;
    max-width: calc(100% - 6px);
    background: #f1c40f;
    border-radius: 4px;
    /* Percent updates stream ~10Hz while changing — a short linear
       transition smooths the steps without fighting the next update. */
    transition: width 0.1s linear;
}

/* Mobile parity with #div_containerGaugesImagePlaceholder scaling. */
@media screen and (max-width: 768px) {
    #div_staminaBar {
        transform: scale(0.6);
        transform-origin: bottom left;
    }
}

@media screen and (max-height: 480px) and (orientation: landscape) {
    #div_staminaBar {
        transform: scale(0.5);
        transform-origin: bottom left;
    }
}

/* Deployable-portal indicator — an icon button (like the character selector).
   The portal is treated as an inventory item: the coloured cyan icon shows while
   it's HELD; once deployed the icon is hidden but the empty box stays
   (.portal-deployed, set by syncPortalIndicatorDOM), the icon reappearing on
   pickup. Sits in the bottom-left HUD
   cluster CLOSEST to the gauge bars (the hidden character button takes 304). */
#div_portalButton {
    position: fixed;
    bottom: 20px;
    /* Just right of the gauge stack (bars end at left 220 → 12px gap). */
    left: 232px;
    z-index: 100;
}

#btn_portalIndicator {
    position: relative; /* positioning context for the capture-countdown overlay */
    width: 64px;
    height: 64px;
    /* Cyan frame + glow — the portal is held/ready (only shown in that state). */
    border: 3px solid #6fd8ef;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 6px;
    box-shadow: 0 0 14px rgba(73, 198, 232, 0.6), inset 0 0 8px rgba(73, 198, 232, 0.25);
    transition: all 0.2s ease;
}

/* ── Doodad-absorb countdown overlay (shown only while capturing inside) ── */
#div_portalCapture {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* The filled sweep grows 0deg→360deg via the inline --p variable; masked to a
   ring so it reads as a progress arc, not a pie. Purple to match the in-world
   absorb visuals. */
#div_portalCaptureRing {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: conic-gradient(#9e3dff 0 var(--p, 0deg), rgba(158, 61, 255, 0.20) var(--p, 0deg) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent 56%, #000 59%);
            mask: radial-gradient(farthest-side, transparent 56%, #000 59%);
}

/* Remaining whole seconds, centered on top of the ring (NOT masked). */
#span_portalCaptureSec {
    position: relative;
    font-family: 'Press Start 2P', monospace, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #f3e9ff;
    text-shadow: 0 0 5px rgba(123, 31, 224, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95);
}

#btn_portalIndicator:hover {
    border-color: #a6ecfa;
    transform: scale(1.05);
}

#btn_portalIndicator:active {
    transform: scale(0.95);
}

#btn_portalIndicator img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Deployed (dropped into the world) → keep the box visible but EMPTY: hide just
   the portal icon, not the whole button, until the portal is picked back up. */
#div_portalButton.portal-deployed #img_portalIcon {
    display: none;
}

/* ── CLOSING cooldown (the portal is closing; ~10s before you can re-deploy) ──
   The box frames RED (matches the red in-world portal), the icon greys/dims, and
   a dark overlay DRAINS top→bottom over the cooldown. When it empties the state
   flips back to held (blue frame + full-colour icon = usable again). */
#div_portalButton.portal-cooldown #btn_portalIndicator {
    border-color: #ff5a5a;
    box-shadow: 0 0 14px rgba(255, 90, 90, 0.55), inset 0 0 8px rgba(255, 90, 90, 0.25);
}
#div_portalButton.portal-cooldown #btn_portalIndicator:hover {
    border-color: #ff8a8a;
}
#div_portalButton.portal-cooldown #img_portalIcon {
    filter: grayscale(0.85) brightness(0.55);
    opacity: 0.6;
}

/* The draining overlay. Hidden unless on cooldown; its height is set per frame
   (100% → 0%) by portalIndicator.ts, anchored at the top so it recedes upward. */
#div_portalCooldown {
    display: none;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 0;
    background: rgba(10, 13, 22, 0.82);
    border-radius: 12px 12px 0 0;
    pointer-events: none;
}
#div_portalButton.portal-cooldown #div_portalCooldown {
    display: block;
}

/* Mobile touch sizing — parity with the character selector button. */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    #btn_portalIndicator {
        min-width: 54px;
        min-height: 54px;
    }
}

/* "Pod closing" alert banner — top-center, red, with a draining bar.
   Shown to a straggler inside a collapsing room (room owner left → 10s exit-only
   countdown). Purely informational: never intercepts pointer input. Hidden by
   default via the global `.hidden` (display:none) utility; the bridge removes it
   while roomClosing is true. It also rides the HUD's visibility (it lives inside
   div_inGameHUD), so it stays hidden on the homepage / death screen. */
#div_podClosingAlert {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    min-width: 300px;
    max-width: 90vw;
    padding: 10px 20px 12px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(190, 22, 22, 0.96), rgba(120, 8, 8, 0.96));
    border: 2px solid #ff5a5a;
    border-radius: 10px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    /* Soft attention pulse on the red glow so it reads as urgent without flashing. */
    animation: podClosingPulse 1.2s ease-in-out infinite;
}

#div_podClosingAlertText {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

#span_podClosingIcon {
    font-size: 16px;
    line-height: 1;
}

#span_podClosingSec {
    display: inline-block;
    min-width: 1.1em;
    font-variant-numeric: tabular-nums; /* digits don't jiggle the text as it ticks down */
    font-weight: 700;
}

/* Draining bar: starts full, shrinks 100% → 0% across the 10s window. */
#div_podClosingBarBack {
    position: relative;
    margin-top: 8px;
    height: 8px;
    width: 100%;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 5px;
    overflow: hidden;
}

#div_podClosingBarFront {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(90deg, #ffd24d, #ff6a3d, #ff3b3b);
    border-radius: 5px;
    /* Width is rewritten each frame from roomClosingProgress; the short linear
       transition just smooths the per-frame steps. */
    transition: width 0.1s linear;
}

@keyframes podClosingPulse {
    0%, 100% {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 40, 40, 0.35);
    }
    50% {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 24px rgba(255, 40, 40, 0.75);
    }
}

/* Shrink a touch on small screens so the banner never overruns the viewport. */
@media screen and (max-width: 768px) {
    #div_podClosingAlert {
        top: 10px;
        min-width: 0;
        padding: 8px 14px 10px;
    }
    #div_podClosingAlertText {
        font-size: 13px;
    }
}

#div_containerLeaderboard {
    position: fixed;
    /* Just below the top-right settings buttons (#div_topRightSettingsContainer:
       top 1vh, buttons clamp(36px,3.5vw,52px) tall) with a small gap. */
    top: calc(1vh + clamp(36px, 3.5vw, 52px) + 10px);
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Semi-opaque grey panel behind the leaderboard so it reads against the map. */
    background: rgba(40, 40, 40, 0.5);
    padding: 8px 12px;
    border-radius: 8px;
}

#div_containerLeaderboardChild {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

#div_leaderboardUsernames {
    width: 12ch;
    font-family: monospace;
    font-size: 1vw;
    color: white;
    overflow: hidden;
    margin-right: 2vw;
}

#div_leaderboardUsernamesChild {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#div_leaderboardScores {
    width: 8ch;
    font-family: monospace;
    font-size: 1vw;
    text-align: right;
    white-space: nowrap;
    color: white;
}
#div_joystickMovement {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
}

#div_joystickRotation {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 50%;
}


#div_joystickMovement, /* used to remove ios share function that pops up when fast tapping and it seems to select the div joystick element -- may not need all of these, haven't tested if need both no select and no touch or both */
#div_joystickRotation {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    touch-action: none;
}

/* ============================================
   MOBILE ACTION BUTTON (E key equivalent)
   Only visible on mobile/touch devices
   ============================================ */
.mobile-action-button {
    display: none; /* Hidden by default, shown via JS on mobile */
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.7) 0%, rgba(80, 80, 80, 0.7) 100%);
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 1000;

    /* Prevent text selection and touch behaviors */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;

    /* Flexbox centering for icon */
    justify-content: center;
    align-items: center;

    /* Smooth transitions */
    transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.1s ease;
}

/* SVG Icon inside button */
.mobile-action-button .action-button-icon {
    width: 36px;
    height: 36px;
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

/* Active/pressed state */
.mobile-action-button:active {
    transform: translateY(-50%) scale(0.92);
    background: linear-gradient(135deg, rgba(90, 90, 90, 0.8) 0%, rgba(60, 60, 60, 0.8) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* Highlight state when near interactable object (added via JS) */
.mobile-action-button.highlight {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.95) 0%, rgba(255, 193, 7, 0.95) 100%);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
    animation: pulse-highlight 1.5s ease-in-out infinite;
}

.mobile-action-button.highlight .action-button-icon {
    color: #333;
}

@keyframes pulse-highlight {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(-50%) scale(1.05); }
}

/* Mobile landscape - show button */
@media screen and (max-width: 1024px) and (pointer: coarse) {
    .mobile-action-button {
        display: flex;
    }
}

/* Extra small screens - adjust size */
@media screen and (max-width: 700px) and (pointer: coarse) {
    .mobile-action-button {
        right: 15px;
        width: 60px;
        height: 60px;
    }

    .mobile-action-button .action-button-icon {
        width: 30px;
        height: 30px;
    }
}

/* ============================================
   MOBILE SECONDARY BUTTONS (space / reload / build)
   Smaller grey circular buttons; shown contextually via JS
   ============================================ */
.mobile-secondary-button {
    display: none; /* shown via JS when contextually relevant */
    position: absolute;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(120, 120, 120, 0.68) 0%, rgba(80, 80, 80, 0.68) 100%);
    border: 2px solid rgba(255, 255, 255, 0.38);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    z-index: 1001;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;

    justify-content: center;
    align-items: center;
    transition: transform 0.06s ease, box-shadow 0.06s ease, background 0.06s ease;
}

.mobile-secondary-button .action-button-icon {
    width: 28px;
    height: 28px;
    color: white;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.mobile-secondary-button:active {
    transform: scale(0.9);
    background: linear-gradient(135deg, rgba(90, 90, 90, 0.85) 0%, rgba(60, 60, 60, 0.85) 100%);
}

/* Fixed-position secondary buttons (the build-toolbar variants flow instead). */
#btn_mobileSpaceButton {
    right: 130px;
    bottom: 56px;
}

#btn_mobileReloadButton {
    right: 44px;
    bottom: 150px;
}

/* ============================================
   MOBILE BUILD TOOLBAR (rotate / place / cancel)
   A centered row, shown via JS only during building placement
   ============================================ */
.mobile-build-toolbar {
    display: none; /* set to flex by JS while placing a building */
    position: absolute;
    left: 50%;
    bottom: 36px;
    transform: translateX(-50%);
    gap: 20px;
    z-index: 1002;
}

/* Inside the toolbar the buttons flow in the row and are always visible. */
.mobile-build-toolbar .mobile-secondary-button {
    display: flex;
    position: static;
}

.mobile-build-place {
    background: linear-gradient(135deg, rgba(70, 190, 90, 0.82) 0%, rgba(35, 130, 55, 0.82) 100%);
}

.mobile-build-place:active {
    background: linear-gradient(135deg, rgba(90, 220, 110, 0.95) 0%, rgba(45, 150, 65, 0.95) 100%);
}

.mobile-build-cancel {
    background: linear-gradient(135deg, rgba(200, 80, 75, 0.8) 0%, rgba(140, 40, 38, 0.8) 100%);
}

.mobile-build-cancel:active {
    background: linear-gradient(135deg, rgba(235, 100, 92, 0.95) 0%, rgba(165, 50, 46, 0.95) 100%);
}

/* Show the space button on mobile landscape (JS also force-shows it, matching the
   action button's belt-and-suspenders approach). Reload + build are shown
   contextually by JS, so they are intentionally not forced here. Attack is on the
   right joystick now — there is no fire button. */
@media screen and (max-width: 1024px) and (pointer: coarse) {
    #btn_mobileSpaceButton {
        display: flex;
    }
}

@media screen and (max-width: 700px) and (pointer: coarse) {
    #btn_mobileSpaceButton {
        right: 104px;
        bottom: 40px;
        width: 52px;
        height: 52px;
    }

    #btn_mobileReloadButton {
        right: 30px;
        bottom: 120px;
        width: 52px;
        height: 52px;
    }
}
/* ============================================
   Top Right HUD Buttons - Modern Glass Design
   ============================================ */

#div_topRightSettingsContainer {
    position: absolute;
    top: 1vh;
    right: 1vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6vw;
    z-index: 100;
}

/* Base Button Style - Glass Morphism */
.hud-btn {
    position: relative; /* anchor for the .hud-key-hint shortcut badge */
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(36px, 3.5vw, 52px);
    height: clamp(36px, 3.5vw, 52px);
    padding: 0;
    border: none;
    border-radius: 12px;
    /* No backdrop-filter here: blurring the live game <canvas> behind each of
       the ~8 always-on .hud-btn layers made the HUD flicker on mouse move — the
       compositor re-rasterizes the blur every time the canvas repaints (every
       aim update / hover). A slightly more opaque solid background keeps the
       glassy read (the inset box-shadow highlights below still sell it) without
       sampling the canvas, and drops 8 per-frame GPU blur passes. */
    background: rgba(0, 0, 0, 0.55);
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
}

.hud-btn:focus {
    outline: none;
}

.hud-btn:hover {
    transform: scale(1.08);
    background: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 20px rgba(255, 255, 255, 0.1);
}

.hud-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.5);
}

/* Keyboard-shortcut hint, pinned to the bottom-right of each HUD button
   (U/B = top-left cluster, M/O/F = top-right cluster). Purely informational. */
.hud-key-hint {
    position: absolute;
    bottom: 2px;
    right: 3px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.75);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    pointer-events: none;
}

/* SVG Icon Base Styles */
.hud-btn svg {
    width: 55%;
    height: 55%;
    stroke: currentColor;
    transition:
        opacity 0.25s ease,
        transform 0.3s ease;
}

/* ============================================
   Sound Toggle Button
   ============================================ */

#btn_soundToggle .icon-sound-off {
    display: none;
}

#btn_soundToggle .icon-sound-on {
    display: block;
}

/* Muted State */
#btn_soundToggle.muted .icon-sound-on {
    display: none;
}

#btn_soundToggle.muted .icon-sound-off {
    display: block;
}

#btn_soundToggle.muted {
    color: rgba(255, 100, 100, 0.9);
}

/* Sound wave - static by default */
.sound-wave {
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

/* Sound wave animation only on hover */
#btn_soundToggle:hover .sound-wave {
    animation: pulse-wave 1.5s ease-in-out infinite;
}

#btn_soundToggle:hover .sound-wave-1 {
    animation-delay: 0s;
}

#btn_soundToggle:hover .sound-wave-2 {
    animation-delay: 0.3s;
}

@keyframes pulse-wave {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* ============================================
   Settings Button
   ============================================ */

#btn_settingsIcon:hover .icon-settings {
    transform: rotate(45deg);
}

/* ============================================
   Fullscreen Toggle Button
   ============================================ */

#btn_fullscreenToggle .icon-compress {
    display: none;
}

#btn_fullscreenToggle .icon-expand {
    display: block;
}

/* Fullscreen Active State */
#btn_fullscreenToggle.fullscreen-active .icon-expand {
    display: none;
}

#btn_fullscreenToggle.fullscreen-active .icon-compress {
    display: block;
}

/* Mobile/tablet: hide the fullscreen toggle — the Fullscreen API is unreliable
   on touch devices (esp. iOS Safari/Chrome) and the OS owns fullscreen there.
   The container is right-anchored with justify-content: flex-end, so removing
   the rightmost button reflows Sound + Options to pin against the right edge. */
@media screen and (max-width: 1024px) and (pointer: coarse) {
    #btn_fullscreenToggle {
        display: none;
    }
}

/* ============================================
   Legacy ID Compatibility (for JS that uses old IDs)
   ============================================ */

#img_soundToggle,
#img_settingsIcon,
#img_fullscreenToggle {
    display: none !important;
}
/*
 * Hidden from EVERYONE, including super-admins: this platform/teleport/observe
 * panel is not shown in-game. All players teleport by pressing E on a portal.
 * (It was previously revealed for super-admins via a `tw-superadmin` body class;
 * that reveal was removed so admins don't see the panel either.)
 */
#div_topLeftPlatformSelector {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    display: none;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 12px;
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    font-family: 'Arial', sans-serif;
}

#div_topLeftPlatformSelector label {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

#sel_platformSelector {
    background: rgba(50, 50, 50, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    min-width: 120px;
}

#sel_platformSelector:hover {
    background: rgba(70, 70, 70, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
}

#sel_platformSelector:focus {
    border-color: #4a9eff;
    box-shadow: 0 0 5px rgba(74, 158, 255, 0.5);
}

#sel_platformSelector option {
    background: #333;
    color: #fff;
    padding: 8px;
}

#sel_platformSelector option.platform-full {
    color: #ff6666;
    background: rgba(80, 40, 40, 0.9);
}

#sel_platformSelector option:disabled {
    color: #888;
    font-style: italic;
}

#btn_teleportToPlatform {
    background: linear-gradient(135deg, #4a9eff 0%, #2d7dd2 100%);
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease;
}

#btn_teleportToPlatform:hover {
    background: linear-gradient(135deg, #5aafff 0%, #3d8de2 100%);
    transform: scale(1.05);
}

#btn_teleportToPlatform:active {
    transform: scale(0.98);
}

#btn_teleportToPlatform:disabled {
    background: #555;
    cursor: not-allowed;
    transform: none;
}

#btn_toggleObserverMode {
    background: rgba(60, 60, 60, 0.9);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

#btn_toggleObserverMode:hover {
    background: rgba(80, 80, 80, 0.95);
    border-color: rgba(255, 255, 255, 0.5);
}

#btn_toggleObserverMode.active {
    background: linear-gradient(135deg, #4a9eff 0%, #2d7dd2 100%);
    border-color: #4a9eff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Disable platform controls when in observer mode */
.observer-mode-active #sel_platformSelector,
.observer-mode-active #btn_teleportToPlatform {
    opacity: 0.5;
    pointer-events: none;
}

#div_platformCurrentInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#spn_platformCurrentCount {
    color: #aaffaa;
    font-size: 11px;
}

#div_platformError {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(180, 40, 40, 0.95);
    border: 1px solid #ff4444;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Phase 8: Player Following indicator styles */
.observer-following-indicator {
    color: #ffcc00;
    font-size: 13px;
    font-weight: bold;
    padding: 4px 8px;
    background: rgba(255, 200, 0, 0.2);
    border-radius: 4px;
    border: 1px solid rgba(255, 200, 0, 0.4);
    animation: followPulse 2s ease-in-out infinite;
}

.observer-following-hint {
    color: #888;
    font-size: 11px;
    font-style: italic;
}

@keyframes followPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

#div_containerTierTreeCharacters {
    position: fixed;
    /* DISABLED: Tier upgrades are disabled - hide UI permanently */
    display: none !important;
    /* Original: display: flex; */
    top: 0;
    left: 0;
    justify-content: space-between;
    align-items: flex-start;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}
/* ============================================
   Book Modal UI Styles
   Redesigned to look like an open book
   ============================================ */

/* Modal backdrop - darkens the background */
.book-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1100;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.book-modal.hidden {
    display: none;
}

/* Main book container - looks like an open book */
.book-container {
    position: relative;
    width: 90%;
    max-width: 750px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;

    /* Book cover/binding appearance */
    background: linear-gradient(135deg,
        #654321 0%,
        #8B4513 2%,
        #A0522D 4%,
        #8B4513 6%,
        #654321 8%,
        #5D3A1A 10%,
        /* Parchment page area */
        #F5E6C8 10%,
        #F5E6C8 90%,
        /* Right binding */
        #5D3A1A 90%,
        #654321 92%,
        #8B4513 94%,
        #A0522D 96%,
        #8B4513 98%,
        #654321 100%
    );

    border-radius: 8px 12px 12px 8px;
    box-shadow:
        /* Book depth shadow */
        0 15px 40px rgba(0, 0, 0, 0.5),
        /* Inner glow on pages */
        inset 0 0 30px rgba(139, 69, 19, 0.1),
        /* Left page edge shadow */
        inset 5px 0 15px rgba(0, 0, 0, 0.1),
        /* Right page edge shadow */
        inset -5px 0 15px rgba(0, 0, 0, 0.1),
        /* Top page edge highlight */
        inset 0 3px 5px rgba(255, 255, 255, 0.3);

    /* Leather texture overlay simulation */
    border: 4px solid #4A3728;
    border-left-width: 12px;
    border-right-width: 12px;
}

/* Parchment texture overlay */
.book-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    bottom: 0;
    background:
        /* Subtle paper grain */
        url("data:image/svg+xml,%3Csvg viewBox=%270 0 100 100%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27noise%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.8%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url%28%23noise%29%27 opacity=%270.03%27/%3E%3C/svg%3E"),
        linear-gradient(to right,
            rgba(0,0,0,0.05) 0%,
            transparent 5%,
            transparent 50%,
            transparent 95%,
            rgba(0,0,0,0.05) 100%
        );
    pointer-events: none;
    border-radius: 4px;
}

/* Center binding/spine effect */
.book-container::after {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom,
        rgba(101, 67, 33, 0.3),
        rgba(101, 67, 33, 0.5) 20%,
        rgba(101, 67, 33, 0.5) 80%,
        rgba(101, 67, 33, 0.3)
    );
    box-shadow:
        -2px 0 4px rgba(0, 0, 0, 0.1),
        2px 0 4px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

/* ============================================
   Header Section - Book Title
   ============================================ */

.book-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px 15px;
    position: relative;
    z-index: 1;
}

/* Decorative line under title */
.book-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(to right,
        transparent,
        #8B4513 20%,
        #A0522D 50%,
        #8B4513 80%,
        transparent
    );
}

.book-title {
    margin: 0;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 26px;
    font-weight: bold;
    color: #4A3728;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 60px);
    letter-spacing: 0.5px;
}

.book-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: rgba(139, 69, 19, 0.2);
    border: 2px solid #8B4513;
    color: #654321;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 4px;
    transition: all 0.2s ease;
    z-index: 2;
}

.book-close-btn:hover {
    background: rgba(139, 69, 19, 0.4);
    color: #3D2817;
}

.book-close-btn:focus {
    outline: 2px solid #654321;
    outline-offset: 2px;
}

/* ============================================
   Content Section - The Page
   ============================================ */

.book-content {
    padding: 20px 50px;
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
    max-height: 55vh;
    position: relative;
    z-index: 1;

    /* Page lines effect (optional, subtle) */
    background: repeating-linear-gradient(
        transparent,
        transparent 28px,
        rgba(139, 69, 19, 0.05) 28px,
        rgba(139, 69, 19, 0.05) 29px
    );
}

.book-page-title {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 20px;
    font-weight: bold;
    color: #5D3A1A;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    letter-spacing: 1px;
}

.book-page-title:empty {
    display: none;
}

.book-page-content {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 17px;
    color: #3D2817;
    line-height: 1.8;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-align: center;
    /* Fast transition for page change feedback */
    transition: opacity 0.1s ease-out;
}

/* Image content styling */
.book-page-content img {
    max-width: 100%;
    height: auto;
    border: 3px solid #8B4513;
    border-radius: 4px;
    box-shadow:
        3px 3px 8px rgba(0, 0, 0, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
    display: block;
    margin: 15px auto;
}

/* ============================================
   Navigation Section
   ============================================ */

.book-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 40px 20px;
    position: relative;
    z-index: 1;
}

/* Decorative line above navigation */
.book-navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    right: 50px;
    height: 2px;
    background: linear-gradient(to right,
        transparent,
        #8B4513 20%,
        #A0522D 50%,
        #8B4513 80%,
        transparent
    );
}

.book-nav-btn {
    background: linear-gradient(to bottom, #D2B48C 0%, #C4A574 100%);
    border: 2px solid #8B4513;
    color: #4A3728;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.15s ease;
    min-width: 110px;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.book-nav-btn:hover:not(:disabled) {
    background: linear-gradient(to bottom, #DEB887 0%, #D2B48C 100%);
    border-color: #654321;
    box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.book-nav-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.book-nav-btn:focus:not(:disabled) {
    outline: 2px solid #654321;
    outline-offset: 2px;
}

.book-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    box-shadow: none;
}

.book-page-indicator {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 14px;
    color: #6B4423;
    text-align: center;
    min-width: 100px;
    font-style: italic;
}

/* ============================================
   Hint Section
   ============================================ */

.book-hint {
    padding: 8px 20px 12px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.book-hint-text {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    font-size: 11px;
    color: #8B7355;
    font-style: italic;
}

/* ============================================
   Decorative Corner Flourishes
   ============================================ */

/* Top left corner */
.book-container .book-header::before {
    content: '❧';
    position: absolute;
    top: 8px;
    left: 20px;
    font-size: 20px;
    color: #8B4513;
    opacity: 0.6;
}

/* Bottom right corner */
.book-navigation::after {
    content: '❧';
    position: absolute;
    bottom: 8px;
    right: 20px;
    font-size: 20px;
    color: #8B4513;
    opacity: 0.6;
    transform: rotate(180deg);
}

/* ============================================
   Scrollbar Styling
   ============================================ */

.book-content::-webkit-scrollbar {
    width: 10px;
}

.book-content::-webkit-scrollbar-track {
    background: rgba(139, 69, 19, 0.1);
    border-radius: 5px;
    margin: 10px 0;
}

.book-content::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #C4A574, #A0522D);
    border-radius: 5px;
    border: 2px solid #F5E6C8;
}

.book-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #D2B48C, #8B4513);
}

/* Firefox scrollbar */
.book-content {
    scrollbar-width: thin;
    scrollbar-color: #A0522D rgba(139, 69, 19, 0.1);
}

/* ============================================
   Mobile Responsive Styles
   ============================================ */

@media screen and (max-width: 768px) {
    .book-container {
        width: 95%;
        max-height: 90vh;
        border-left-width: 8px;
        border-right-width: 8px;
    }

    .book-header {
        padding: 15px 25px 12px;
    }

    .book-header::after {
        left: 30px;
        right: 30px;
    }

    .book-title {
        font-size: 20px;
    }

    .book-content {
        padding: 15px 30px;
        max-height: 50vh;
    }

    .book-page-title {
        font-size: 18px;
    }

    .book-page-content {
        font-size: 15px;
        line-height: 1.7;
        text-indent: 1.5em;
    }

    .book-page-content::first-letter {
        font-size: 2em;
    }

    .book-navigation {
        padding: 12px 25px 15px;
    }

    .book-navigation::before {
        left: 30px;
        right: 30px;
    }

    .book-nav-btn {
        padding: 8px 14px;
        font-size: 13px;
        min-width: 90px;
    }

    /* Hide decorative flourishes on mobile */
    .book-container .book-header::before,
    .book-navigation::after {
        display: none;
    }
}

@media screen and (max-width: 480px) {
    .book-container {
        width: 98%;
        border-left-width: 6px;
        border-right-width: 6px;
    }

    .book-header {
        padding: 12px 20px 10px;
    }

    .book-title {
        font-size: 18px;
    }

    .book-close-btn {
        top: 8px;
        right: 10px;
        font-size: 20px;
        padding: 4px 8px;
    }

    .book-content {
        padding: 12px 20px;
    }

    .book-page-content {
        font-size: 14px;
        text-indent: 1em;
    }

    .book-page-content::first-letter {
        font-size: 1.8em;
    }

    .book-navigation {
        padding: 10px 20px 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .book-nav-btn {
        flex: 1;
        min-width: 80px;
    }

    .book-page-indicator {
        flex-basis: 100%;
        order: -1;
        margin-bottom: 5px;
    }

    /* Hide center spine on small screens */
    .book-container::after {
        display: none;
    }
}

/* Touch-friendly button sizes */
@media (pointer: coarse) {
    .book-nav-btn {
        min-height: 44px;
        min-width: 90px;
    }

    .book-close-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ============================================
   Page Transition Animations
   ============================================ */

.book-page-wrapper {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.book-page-wrapper.fade-out {
    opacity: 0;
}

.book-page-wrapper.fade-in {
    opacity: 1;
}

.book-page-wrapper.slide-left-out {
    transform: translateX(-30px);
    opacity: 0;
}

.book-page-wrapper.slide-left-in {
    transform: translateX(0);
    opacity: 1;
}

.book-page-wrapper.slide-right-out {
    transform: translateX(30px);
    opacity: 0;
}

.book-page-wrapper.slide-right-in {
    transform: translateX(0);
    opacity: 1;
}

/* Page flip animation */
@keyframes pageFlipNext {
    0% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
    50% { transform: perspective(1200px) rotateY(-90deg); opacity: 0.5; }
    100% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}

@keyframes pageFlipPrev {
    0% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
    50% { transform: perspective(1200px) rotateY(90deg); opacity: 0.5; }
    100% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
}

.book-page-wrapper.flip-next {
    animation: pageFlipNext 0.4s ease-in-out;
}

.book-page-wrapper.flip-prev {
    animation: pageFlipPrev 0.4s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .book-page-wrapper,
    .book-page-wrapper.fade-out,
    .book-page-wrapper.fade-in,
    .book-page-wrapper.slide-left-out,
    .book-page-wrapper.slide-left-in,
    .book-page-wrapper.slide-right-out,
    .book-page-wrapper.slide-right-in,
    .book-page-wrapper.flip-next,
    .book-page-wrapper.flip-prev {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================
   Loading & Error States
   ============================================ */

.book-image-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #8B7355;
}

.book-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(139, 69, 19, 0.2);
    border-top-color: #8B4513;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.book-loading-text {
    margin-top: 15px;
    font-size: 14px;
    font-style: italic;
}

.book-page-image {
    max-width: 100%;
    max-height: 400px;
    -o-object-fit: contain;
       object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.book-page-image.loaded {
    opacity: 1;
}

.book-image-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 30px;
    background: rgba(139, 69, 19, 0.1);
    border: 2px dashed #8B4513;
    border-radius: 8px;
    color: #654321;
}

.book-image-error-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.book-image-error-text {
    font-size: 14px;
    text-align: center;
    font-style: italic;
}

.book-error-state,
.book-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 30px;
    text-align: center;
}

.book-error-icon,
.book-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.6;
}

.book-error-title,
.book-empty-title {
    font-size: 20px;
    font-weight: bold;
    color: #654321;
    margin-bottom: 10px;
}

.book-error-message,
.book-empty-message {
    font-size: 14px;
    color: #8B7355;
    max-width: 300px;
    line-height: 1.5;
    font-style: italic;
}

/* ============================================
   Accessibility
   ============================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Remove focus outline on modal container itself */
.book-modal:focus,
.book-modal:focus-visible,
.book-container:focus,
.book-container:focus-visible {
    outline: none;
}

/* Only show focus on interactive elements */
.book-modal button:focus-visible {
    outline: 2px solid #654321;
    outline-offset: 2px;
}

.book-modal button:focus:not(:focus-visible) {
    outline: none;
}

@media (prefers-contrast: high) {
    .book-container {
        border-width: 6px;
    }

    .book-nav-btn {
        border-width: 3px;
    }
}

/* Touch & swipe hints */
.book-swipe-hint {
    display: none;
}

@media (pointer: coarse) {
    .book-swipe-hint {
        display: inline;
    }

    .book-keyboard-hint {
        display: none;
    }
}

.book-page-content {
    -moz-user-select: none;
         user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}

/* Phase 8: NPC Dialogue Modal Styles */

.dialogue-modal {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 900px;
    min-width: 500px;
    z-index: 1000;
    pointer-events: none;
}

.dialogue-modal.hidden {
    display: none;
}

.dialogue-container {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dialogue-avatar-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 30, 30, 0.95);
    border: 3px solid #555;
    border-right: none;
    border-radius: 12px 0 0 12px;
    padding: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.dialogue-avatar {
    height: 100%;
    width: auto;
    max-width: 120px;
    -o-object-fit: contain;
       object-fit: contain;
    border-radius: 4px;
}

.dialogue-avatar-wrapper.hidden {
    display: none;
}

.dialogue-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.dialogue-name-tag {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    background-color: rgba(30, 30, 30, 0.95);
    border: 3px solid #555;
    border-bottom: none;
    margin-bottom: -3px;
}

.dialogue-box {
    background: rgba(30, 30, 30, 0.95);
    border: 3px solid #555;
    border-radius: 0 12px 12px 0;
    padding: 20px 25px;
    min-height: 80px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    flex: 1;
}

/* When avatar is hidden, restore left border radius */
.dialogue-avatar-wrapper.hidden + .dialogue-content .dialogue-box {
    border-radius: 0 12px 12px 12px;
}

.dialogue-text {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 20px;
    color: #f0f0f0;
    line-height: 1.5;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    min-height: 50px;
    word-wrap: break-word;
}

.dialogue-hint {
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    display: flex;
    gap: 20px;
}

.continue-hint {
    color: #4CAF50;
}

.exit-hint {
    color: #888;
}

/* Clickable links in dialogue text */
.dialogue-link {
    color: #5865F2;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.dialogue-link:hover {
    color: #7289DA;
    text-decoration: underline;
}

.dialogue-link:active {
    color: #4752C4;
}

/* ============================================
   PHASE 4: DIALOGUE CHOICES (Branching Dialogue)
   ============================================ */

.dialogue-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 15px;
}

.dialogue-choices.hidden {
    display: none;
}

.dialogue-choice-btn {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(50, 50, 50, 0.9);
    border: 2px solid #666;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    pointer-events: auto;
}

.dialogue-choice-btn:hover,
.dialogue-choice-btn:focus {
    background: rgba(70, 70, 70, 0.95);
    border-color: #4CAF50;
    outline: none;
}

.dialogue-choice-btn:active {
    background: rgba(40, 40, 40, 0.95);
    transform: scale(0.98);
}

.dialogue-choice-number {
    color: #4CAF50;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 16px;
    margin-right: 12px;
    min-width: 24px;
}

.dialogue-choice-text {
    color: #f0f0f0;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 16px;
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for dialogue modal */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .dialogue-modal {
        width: 80%;
        min-width: 280px; /* Override the 500px min-width for mobile */
        max-width: 700px;
        bottom: 40px;
    }

    .dialogue-avatar-wrapper {
        padding: 8px;
        border-radius: 8px 0 0 8px;
    }

    .dialogue-avatar {
        max-width: 80px;
    }

    .dialogue-name-tag {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 6px 6px 0 0;
    }

    .dialogue-box {
        border-radius: 0 8px 8px 0;
        padding: 14px 18px;
        min-height: 60px;
    }

    .dialogue-text {
        font-size: 16px;
        min-height: 40px;
    }

    .dialogue-hint {
        margin-top: 10px;
        font-size: 12px;
        gap: 15px;
        /* Make hints touch-friendly */
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .continue-hint,
    .exit-hint {
        padding: 8px 12px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
    }

    /* Mobile choice buttons */
    .dialogue-choice-btn {
        padding: 10px 14px;
        min-height: 44px; /* Touch-friendly */
    }

    .dialogue-choice-number {
        font-size: 14px;
    }

    .dialogue-choice-text {
        font-size: 14px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .dialogue-modal {
        width: 90%;
        min-width: 250px;
        bottom: 30px;
    }

    .dialogue-avatar-wrapper {
        display: none; /* Hide avatar on very small screens */
    }

    .dialogue-avatar-wrapper.hidden + .dialogue-content .dialogue-box,
    .dialogue-box {
        border-radius: 8px;
    }

    .dialogue-name-tag {
        font-size: 12px;
        padding: 5px 10px;
    }

    .dialogue-box {
        padding: 10px 14px;
    }

    .dialogue-text {
        font-size: 14px;
    }

    .dialogue-hint {
        font-size: 11px;
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
}

/* Phase 6.2: Platform Browser Modal Styles */

.platform-browser-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.platform-browser-modal.hidden {
    display: none;
}

.platform-browser-content {
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 600px;
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Header */
.platform-browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.platform-browser-header h2 {
    margin: 0;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.platform-browser-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.platform-browser-close-btn:hover {
    color: #ff6b6b;
}

/* Controls */
.platform-browser-controls {
    display: flex;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-wrap: wrap;
}

.platform-browser-search {
    flex: 1;
    min-width: 150px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 14px;
}

.platform-browser-search:focus {
    outline: none;
    border-color: #4CAF50;
}

.platform-browser-search::-moz-placeholder {
    color: #666;
}

.platform-browser-search::placeholder {
    color: #666;
}

.platform-browser-sort {
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 14px;
    cursor: pointer;
}

.platform-browser-sort:focus {
    outline: none;
    border-color: #4CAF50;
}

.platform-browser-btn {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.platform-browser-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.platform-browser-btn-primary {
    background: rgba(76, 175, 80, 0.8);
    border-color: #4CAF50;
}

.platform-browser-btn-primary:hover {
    background: rgba(76, 175, 80, 1);
}

/* Platform List */
.platform-browser-list {
    flex: 1;
    overflow-y: auto;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
    max-height: 400px;
}

/* Platform Card */
.platform-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 15px;
    transition: border-color 0.2s, background 0.2s;
}

.platform-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.4);
}

.platform-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.platform-card-name {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: #f0f0f0;
}

.platform-card-players {
    font-family: Arial, sans-serif;
    font-size: 14px;
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    padding: 4px 10px;
    border-radius: 4px;
}

.platform-card-players.full {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.2);
}

.platform-card-body {
    display: flex;
    gap: 20px;
    margin-bottom: 12px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #888;
}

.platform-card-owner,
.platform-card-gamemode {
    display: flex;
    align-items: center;
    gap: 5px;
}

.platform-card-actions {
    display: flex;
    justify-content: flex-end;
}

.platform-card-join-btn {
    padding: 8px 20px;
    background: rgba(76, 175, 80, 0.8);
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s;
}

.platform-card-join-btn:hover:not(:disabled) {
    background: rgba(76, 175, 80, 1);
}

.platform-card-join-btn:disabled {
    background: rgba(100, 100, 100, 0.5);
    color: #666;
    cursor: not-allowed;
}

/* Loading State */
.platform-browser-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #888;
    font-family: Arial, sans-serif;
    font-size: 14px;
    gap: 15px;
}

.platform-browser-loading.hidden {
    display: none;
}

.platform-browser-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: platform-browser-spin 1s linear infinite;
}

@keyframes platform-browser-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.platform-browser-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 14px;
    text-align: center;
}

.platform-browser-empty.hidden {
    display: none;
}

.platform-browser-empty p {
    margin: 5px 0;
}

/* Scrollbar styling */
.platform-browser-list::-webkit-scrollbar {
    width: 8px;
}

.platform-browser-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.platform-browser-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.platform-browser-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for platform browser */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .platform-browser-content {
        width: 85%;
        max-height: 90vh;
    }

    .platform-browser-header {
        padding: 12px 16px;
    }

    .platform-browser-header h2 {
        font-size: 16px;
    }

    .platform-browser-close-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .platform-browser-controls {
        padding: 10px 16px;
        gap: 8px;
    }

    .platform-browser-search {
        min-height: 44px;
        font-size: 14px;
    }

    .platform-browser-sort {
        min-height: 44px;
        font-size: 13px;
    }

    .platform-browser-btn {
        min-height: 44px;
        font-size: 13px;
        padding: 8px 14px;
    }

    .platform-browser-list {
        padding: 10px 16px;
        gap: 10px;
        max-height: 300px;
    }

    .platform-card {
        padding: 12px;
    }

    .platform-card-name {
        font-size: 14px;
    }

    .platform-card-players {
        font-size: 12px;
    }

    .platform-card-body {
        font-size: 12px;
        gap: 12px;
    }

    .platform-card-join-btn {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .platform-browser-content {
        width: 95%;
    }

    .platform-browser-header h2 {
        font-size: 14px;
    }

    .platform-browser-controls {
        padding: 8px 12px;
    }

    .platform-browser-list {
        max-height: 250px;
    }

    .platform-card-body {
        flex-direction: column;
        gap: 4px;
    }
}

/* Phase 6.3: Create Platform Modal Styles */

.create-platform-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2001; /* Above platform browser */
}

.create-platform-modal.hidden {
    display: none;
}

.create-platform-content {
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 400px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Header */
.create-platform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.create-platform-header h2 {
    margin: 0;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

.create-platform-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.create-platform-close-btn:hover {
    color: #ff6b6b;
}

/* Form */
.create-platform-form {
    padding: 20px;
}

.create-platform-form-group {
    margin-bottom: 18px;
}

.create-platform-form-group label {
    display: block;
    color: #ccc;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 8px;
}

.create-platform-input,
.create-platform-select {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 14px;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}

.create-platform-input:focus,
.create-platform-select:focus {
    outline: none;
    border-color: #4CAF50;
}

.create-platform-input::-moz-placeholder {
    color: #666;
}

.create-platform-input::placeholder {
    color: #666;
}

.create-platform-select {
    cursor: pointer;
}

.create-platform-select option {
    background: #1a1a2e;
    color: #f0f0f0;
}

/* Max Players Buttons */
.create-platform-max-players-buttons {
    display: flex;
    gap: 8px;
}

.max-players-btn {
    flex: 1;
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.max-players-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
}

.max-players-btn.selected {
    background: rgba(76, 175, 80, 0.8);
    border-color: #4CAF50;
    color: white;
}

/* Checkbox group */
.create-platform-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.create-platform-checkbox-group label {
    display: inline;
    margin-bottom: 0;
    cursor: pointer;
}

.create-platform-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #4CAF50;
}

/* Hints, warnings, and errors */
.create-platform-hint {
    display: block;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

.create-platform-warning {
    display: block;
    color: #f0ad4e;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

.create-platform-warning.hidden {
    display: none;
}

.create-platform-error {
    display: block;
    color: #ff6b6b;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

.create-platform-error.hidden {
    display: none;
}

/* Actions */
.create-platform-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.create-platform-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.create-platform-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f0f0f0;
}

.create-platform-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.create-platform-btn-primary {
    background: rgba(76, 175, 80, 0.8);
    border: 1px solid #4CAF50;
    color: white;
}

.create-platform-btn-primary:hover {
    background: rgba(76, 175, 80, 1);
}

.create-platform-btn-primary:disabled {
    background: rgba(100, 100, 100, 0.5);
    border-color: #555;
    color: #888;
    cursor: not-allowed;
}

/* Loading State */
.create-platform-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #888;
    font-family: Arial, sans-serif;
    font-size: 14px;
    gap: 15px;
}

.create-platform-loading.hidden {
    display: none;
}

.create-platform-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top-color: #4CAF50;
    border-radius: 50%;
    animation: create-platform-spin 1s linear infinite;
}

@keyframes create-platform-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Hide form when loading */
.create-platform-form.loading {
    display: none;
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for create platform modal */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .create-platform-content {
        width: 85%;
        max-width: 450px;
        max-height: 90vh;
        overflow-y: auto;
    }

    .create-platform-header {
        padding: 12px 16px;
    }

    .create-platform-header h2 {
        font-size: 16px;
    }

    .create-platform-close-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .create-platform-form {
        padding: 16px;
    }

    .create-platform-form-group {
        margin-bottom: 14px;
    }

    .create-platform-form-group label {
        font-size: 13px;
        margin-bottom: 6px;
    }

    .create-platform-input,
    .create-platform-select {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
    }

    .max-players-btn {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .create-platform-checkbox-group input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .create-platform-checkbox-group label {
        font-size: 13px;
    }

    .create-platform-btn {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 13px;
    }

    .create-platform-hint,
    .create-platform-error {
        font-size: 11px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .create-platform-content {
        width: 95%;
    }

    .create-platform-header h2 {
        font-size: 14px;
    }

    .create-platform-form {
        padding: 12px;
    }

    .create-platform-form-group {
        margin-bottom: 10px;
    }

    .create-platform-actions {
        flex-direction: column;
        gap: 8px;
    }

    .create-platform-btn {
        width: 100%;
    }
}

/* Phase 6.4: Owner Control Panel Styles */

/* Main Panel */
.owner-panel {
    position: fixed;
    right: 20px;
    top: 100px;
    width: 320px;
    max-height: calc(100vh - 140px);
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    z-index: 1500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.owner-panel.hidden {
    display: none;
}

/* Header */
.owner-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 215, 0, 0.15);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
}

.owner-panel-header h3 {
    margin: 0;
    color: #ffd700;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.owner-panel-header h3::before {
    content: '\1F451';
    font-size: 18px;
}

.owner-panel-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.owner-panel-close-btn:hover {
    color: #ff6b6b;
}

/* Content */
.owner-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Sections */
.owner-panel-section {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.owner-panel-section:last-child {
    border-bottom: none;
}

.owner-panel-section h4 {
    margin: 0 0 12px 0;
    color: #aaa;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Groups */
.owner-panel-form-group {
    margin-bottom: 12px;
}

.owner-panel-form-group:last-child {
    margin-bottom: 0;
}

.owner-panel-form-group > label {
    display: block;
    color: #ccc;
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin-bottom: 6px;
}

.owner-panel-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.owner-panel-input,
.owner-panel-select {
    flex: 1;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 14px;
    font-family: Arial, sans-serif;
}

.owner-panel-input:focus,
.owner-panel-select:focus {
    outline: none;
    border-color: #ffd700;
}

.owner-panel-hint {
    display: block;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 11px;
    margin-top: 4px;
}

/* Checkbox Group */
.owner-panel-checkbox-group .owner-panel-input-row {
    justify-content: flex-start;
}

.owner-panel-checkbox-group input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.owner-panel-checkbox-group label {
    color: #ccc;
    font-family: Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    flex: 1;
}

/* Small Buttons */
.owner-panel-btn-small {
    padding: 6px 12px;
    background: rgba(255, 215, 0, 0.3);
    border: 1px solid rgba(255, 215, 0, 0.5);
    border-radius: 4px;
    color: #ffd700;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.owner-panel-btn-small:hover {
    background: rgba(255, 215, 0, 0.5);
    border-color: #ffd700;
}

/* Player List */
.owner-panel-player-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.owner-panel-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
}

.owner-panel-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.owner-panel-player-name {
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owner-panel-player-time {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 11px;
}

.owner-panel-player-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.owner-panel-player-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.owner-panel-player-btn:hover {
    opacity: 0.8;
}

.owner-panel-player-btn.kick {
    background: rgba(255, 152, 0, 0.8);
    color: white;
}

.owner-panel-player-btn.ban {
    background: rgba(244, 67, 54, 0.8);
    color: white;
}

.owner-panel-player-btn.transfer {
    background: rgba(255, 215, 0, 0.8);
    color: #333;
}

/* Empty State */
.owner-panel-empty {
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 13px;
    text-align: center;
    padding: 20px;
}

.owner-panel-empty.hidden {
    display: none;
}

/* Danger Zone */
.owner-panel-danger-zone {
    background: rgba(255, 0, 0, 0.05);
}

.owner-panel-danger-zone h4 {
    color: #ff6b6b;
}

.owner-panel-btn-danger {
    width: 100%;
    padding: 10px 16px;
    background: rgba(244, 67, 54, 0.2);
    border: 1px solid rgba(244, 67, 54, 0.5);
    border-radius: 6px;
    color: #f44336;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.owner-panel-btn-danger:hover {
    background: rgba(244, 67, 54, 0.4);
    border-color: #f44336;
}

/* Toggle Button */
.owner-panel-toggle-btn {
    position: fixed;
    right: 20px;
    top: 60px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    z-index: 1499;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owner-panel-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.6);
}

.owner-panel-toggle-btn.hidden {
    display: none;
}

/* Scrollbar styling */
.owner-panel-content::-webkit-scrollbar,
.owner-panel-player-list::-webkit-scrollbar {
    width: 6px;
}

.owner-panel-content::-webkit-scrollbar-track,
.owner-panel-player-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.owner-panel-content::-webkit-scrollbar-thumb,
.owner-panel-player-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.owner-panel-content::-webkit-scrollbar-thumb:hover,
.owner-panel-player-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ============================================ */
/* Phase 6.5: Transfer Ownership Modal Styles   */
/* ============================================ */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.transfer-modal-content {
    width: 400px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.modal-header h2 {
    margin: 0;
    color: #ffd700;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.btn-close {
    background: none;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.btn-close:hover {
    color: #ff6b6b;
}

.modal-body {
    padding: 20px;
}

.modal-body p {
    margin: 0 0 12px 0;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.modal-body p:last-child {
    margin-bottom: 0;
}

.modal-body strong {
    color: #ffd700;
}

.transfer-warning-text {
    color: #ff6b6b !important;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 6px;
    padding: 12px;
}

.modal-actions {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    justify-content: flex-end;
}

.btn-secondary {
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    color: #ccc;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.btn-danger {
    padding: 10px 20px;
    background: rgba(244, 67, 54, 0.3);
    border: 1px solid rgba(244, 67, 54, 0.6);
    border-radius: 6px;
    color: #f44336;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.btn-danger:hover {
    background: rgba(244, 67, 54, 0.5);
    border-color: #f44336;
}

/* ============================================ */
/* Phase 6.5: Platform Toast Notification Styles */
/* ============================================ */

.platform-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.platform-toast {
    padding: 14px 24px;
    border-radius: 8px;
    background: rgba(30, 30, 40, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: auto;
    max-width: 400px;
    text-align: center;
}

.platform-toast.show {
    opacity: 1;
    transform: translateY(0);
}

.platform-toast-info {
    border-left: 4px solid #2196f3;
}

.platform-toast-success {
    border-left: 4px solid #4caf50;
}

.platform-toast-warning {
    border-left: 4px solid #ff9800;
}

.platform-toast-error {
    border-left: 4px solid #f44336;
}

/* ============================================ */
/* Teleport Confirmation Modal Styles           */
/* ============================================ */

.teleport-confirm-modal-content {
    width: 420px;
}

.teleport-warning-text {
    color: #ff6b6b !important;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 6px;
    padding: 12px;
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for owner control panel */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .owner-panel {
        width: 280px;
        right: 10px;
        top: 60px;
        max-height: calc(100vh - 80px);
    }

    .owner-panel-header {
        padding: 10px 14px;
    }

    .owner-panel-header h3 {
        font-size: 14px;
    }

    .owner-panel-close-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .owner-panel-section {
        padding: 12px;
    }

    .owner-panel-section h4 {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .owner-panel-form-group > label {
        font-size: 12px;
    }

    .owner-panel-input,
    .owner-panel-select {
        min-height: 44px;
        padding: 10px;
        font-size: 13px;
    }

    .owner-panel-btn-small {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 11px;
    }

    .owner-panel-checkbox-group input[type="checkbox"] {
        width: 22px;
        height: 22px;
    }

    .owner-panel-checkbox-group label {
        font-size: 12px;
    }

    .owner-panel-player-row {
        padding: 8px 10px;
    }

    .owner-panel-player-name {
        font-size: 12px;
    }

    .owner-panel-player-btn {
        min-height: 36px;
        padding: 6px 10px;
        font-size: 10px;
    }

    .owner-panel-btn-danger {
        min-height: 44px;
        font-size: 13px;
    }

    /* Toggle button - already touch-friendly at 44x44 */
    .owner-panel-toggle-btn {
        right: 10px;
        top: 10px;
    }

    /* Transfer/teleport modals */
    .transfer-modal-content,
    .teleport-confirm-modal-content {
        width: 85%;
        max-width: 380px;
    }

    .modal-header {
        padding: 12px 16px;
    }

    .modal-header h2 {
        font-size: 16px;
    }

    .btn-close {
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .modal-body {
        padding: 16px;
    }

    .modal-body p {
        font-size: 13px;
    }

    .modal-actions {
        padding: 12px 16px;
    }

    .btn-secondary,
    .btn-danger {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 13px;
    }

    /* Toast notifications */
    .platform-toast {
        padding: 12px 20px;
        font-size: 13px;
        max-width: 90vw;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .owner-panel {
        width: 240px;
        right: 5px;
    }

    .owner-panel-header h3 {
        font-size: 12px;
    }

    .owner-panel-section h4 {
        font-size: 10px;
    }

    .owner-panel-player-list {
        max-height: 150px;
    }

    .owner-panel-player-actions {
        flex-direction: column;
        gap: 2px;
    }

    .transfer-modal-content,
    .teleport-confirm-modal-content {
        width: 95%;
    }

    .modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .btn-secondary,
    .btn-danger {
        width: 100%;
    }
}

/* Phase 2: Editable Object Palette Styling */

/* Main palette container */
.editable-palette {
    position: fixed;
    top: 100px;
    right: 10px;
    width: 200px;
    background: rgba(30, 30, 40, 0.95);
    border: 2px solid #555;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 1100;
    font-family: Arial, sans-serif;
}

.editable-palette.hidden {
    display: none;
}

/* Header */
.editable-palette-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: rgba(50, 50, 60, 0.95);
    border-bottom: 1px solid #444;
    border-radius: 6px 6px 0 0;
    cursor: move;
}

.editable-palette-header h4 {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
}

.editable-palette-close {
    background: transparent;
    border: none;
    color: #888;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
}

.editable-palette-close:hover {
    color: #ff4444;
}

/* Grid of palette items */
.editable-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding: 12px;
}

/* Individual palette item button */
.editable-palette-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: rgba(60, 60, 70, 0.8);
    border: 2px solid #555;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.editable-palette-item:hover {
    background: rgba(80, 80, 90, 0.9);
    border-color: #777;
}

.editable-palette-item.selected {
    background: rgba(70, 130, 180, 0.8);
    border-color: #4a9eff;
    box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
}

.editable-palette-item span {
    color: #ddd;
    font-size: 11px;
    margin-top: 4px;
}

/* Icons */
.editable-palette-icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.editable-icon-block {
    background: linear-gradient(135deg, #8B4513, #A0522D);
    border: 2px solid #654321;
}

.editable-icon-zipline {
    background: linear-gradient(45deg, #333, #666);
    position: relative;
}

.editable-icon-zipline::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 3px;
    background: #888;
    transform: translateY(-50%) rotate(-20deg);
}

.editable-icon-spike {
    background: linear-gradient(180deg, #ff4444, #cc0000);
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

.editable-icon-generator {
    background: radial-gradient(circle, #00bfff, #0066cc);
    border-radius: 50%;
    box-shadow: 0 0 5px #00bfff;
}

/* Phase 7: New interactive object icons */
.editable-icon-spike-ball {
    position: relative;
    background: radial-gradient(circle at 30% 30%, #555, #333, #111);
    border-radius: 50%;
    border: 3px solid #cc0000;
    box-shadow:
        0 0 0 2px #ff4444,
        0 0 8px rgba(255, 68, 68, 0.6),
        inset 0 0 8px rgba(255, 0, 0, 0.3);
}

/* Sawblade icon (spiky ring) */
.editable-icon-sawblade {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle, #6b0000 0 30%, #ff5555 31% 62%, #ff2d2d 63% 100%);
    border: 2px solid #1a1a1a;
}

.editable-icon-sawblade::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: repeating-conic-gradient(#ff3b3b 0 15deg, transparent 15deg 30deg);
    -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%);
    mask: radial-gradient(circle, transparent 54%, #000 55%);
}

.editable-icon-sawblade::after {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: #2a0000;
}

.editable-icon-sign {
    background: linear-gradient(180deg, #DEB887, #D2B48C);
    border: 2px solid #8B4513;
    border-radius: 2px;
}

.editable-icon-sign-large {
    background: linear-gradient(180deg, #DEB887, #D2B48C);
    border: 2px solid #8B4513;
    border-radius: 2px;
    width: 36px;
    height: 28px;
}

/* Phase 6: Pushable Block icon */
.editable-icon-pushable {
    background: linear-gradient(135deg, #99693D, #B8865A);
    border: 3px solid #5C3D1F;
    border-radius: 4px;
    position: relative;
}

.editable-icon-pushable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 2px;
    background: #3D2817;
}

.editable-icon-pushable::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2px;
    height: 50%;
    background: #3D2817;
}

/* Phase 5: Minecart icon */
.editable-icon-minecart {
    position: relative;
    background: linear-gradient(180deg, #444 0%, #222 50%, #333 100%);
    border: 2px solid #666;
    border-radius: 4px 4px 8px 8px;
}

.editable-icon-minecart::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #888;
    border-radius: 50%;
    border: 2px solid #555;
}

.editable-icon-minecart::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #888;
    border-radius: 50%;
    border: 2px solid #555;
}

/* Phase 6: Book icon */
.editable-icon-book {
    position: relative;
    background: linear-gradient(90deg, #8B4513 0%, #8B4513 15%, #F5DEB3 15%, #F5DEB3 100%);
    border: 2px solid #5D2906;
    border-radius: 2px 4px 4px 2px;
    box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.2);
}

.editable-icon-book::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 20%;
    right: 4px;
    height: 2px;
    background: #999;
}

.editable-icon-book::after {
    content: '';
    position: absolute;
    top: 10px;
    left: 20%;
    right: 6px;
    height: 2px;
    background: #999;
}

/* Footer */
.editable-palette-footer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid #444;
    background: rgba(40, 40, 50, 0.8);
    border-radius: 0 0 6px 6px;
}

.editable-palette-status {
    color: #aaa;
    font-size: 10px;
    font-style: italic;
}

.editable-palette-count {
    color: #888;
    font-size: 10px;
}

/* Two-point placement mode indicator */
.editable-palette-item.placing-endpoint {
    animation: pulse-endpoint 1s infinite;
}

@keyframes pulse-endpoint {
    0% { box-shadow: 0 0 5px rgba(255, 165, 0, 0.5); }
    50% { box-shadow: 0 0 15px rgba(255, 165, 0, 0.8); }
    100% { box-shadow: 0 0 5px rgba(255, 165, 0, 0.5); }
}

/* Phase 3 + Phase 4: Editable Object Inspector Panel */

.editable-inspector {
    position: fixed;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    max-height: 80vh;
    overflow-y: auto;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid #444;
    border-radius: 8px;
    z-index: 1001;
    font-family: 'Segoe UI', sans-serif;
    color: #ddd;
}

.editable-inspector.hidden {
    display: none;
}

.editable-inspector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 8px 12px;
    border-bottom: 1px solid #444;
    font-weight: bold;
    font-size: 16px;
    cursor: move;
}

.editable-inspector-close {
    background: none;
    border: none;
    color: #888;
    font-size: 22px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.editable-inspector-close:hover {
    color: #fff;
}

.editable-inspector-eid {
    padding: 4px 12px 8px 12px;
    font-size: 11px;
    color: #888;
    border-bottom: 1px solid #333;
}

.editable-inspector-content {
    padding: 8px 12px;
    max-height: 50vh;
    overflow-y: auto;
}

/* Sections */
.inspector-section {
    margin-bottom: 16px;
}

.inspector-section-header {
    font-size: 12px;
    font-weight: bold;
    color: #00BFFF;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #333;
}

/* Property rows */
.inspector-property-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 13px;
}

.inspector-property-label {
    color: #aaa;
}

.inspector-property-value {
    color: #fff;
    font-family: 'Consolas', monospace;
}

/* Color display */
.inspector-color-row {
    gap: 8px;
}

.inspector-color-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #666;
    border-radius: 3px;
    flex-shrink: 0;
}

.inspector-color-hex {
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #888;
}

/* Actions */
.editable-inspector-actions {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #444;
}

.editable-inspector-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    background: #2a2a2a;
    border: 1px solid #444;
    border-radius: 4px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.15s ease;
}

.editable-inspector-btn:hover {
    background: #3a3a3a;
    border-color: #666;
}

.editable-inspector-btn.danger {
    background: #4a2a2a;
    border-color: #633;
    color: #f88;
}

.editable-inspector-btn.danger:hover {
    background: #5a3a3a;
    border-color: #844;
}

/* Scrollbar styling */
.editable-inspector-content::-webkit-scrollbar {
    width: 6px;
}

.editable-inspector-content::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.editable-inspector-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.editable-inspector-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* =================================================
   Phase 4: Editable Control Styles
   ================================================= */

/* Editable row indicator */
.inspector-property-row.editable {
    transition: background-color 0.15s ease;
}

.inspector-property-row.editable:hover {
    background-color: rgba(0, 191, 255, 0.1);
    border-radius: 4px;
}

/* Number input field */
.inspector-input-number {
    width: 70px;
    padding: 4px 6px;
    background: #252525;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    font-family: 'Consolas', monospace;
    font-size: 12px;
    text-align: right;
}

.inspector-input-number:hover {
    border-color: #666;
}

.inspector-input-number:focus {
    outline: none;
    border-color: #00BFFF;
    background: #2a2a2a;
}

/* Hide number input spin buttons */
.inspector-input-number::-webkit-outer-spin-button,
.inspector-input-number::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inspector-input-number[type=number] {
    -moz-appearance: textfield;
}

/* Unit label next to number inputs */
.inspector-input-unit {
    color: #888;
    font-size: 11px;
    margin-left: 4px;
}

/* Slider row container */
.inspector-slider-row {
    margin-bottom: 8px;
}

.inspector-slider-row.editable:hover {
    background-color: rgba(0, 191, 255, 0.1);
    border-radius: 4px;
    padding: 2px 4px;
    margin-left: -4px;
    margin-right: -4px;
}

/* Slider value display */
.inspector-slider-value {
    color: #fff;
    font-family: 'Consolas', monospace;
    font-size: 12px;
}

/* Slider input */
.inspector-slider {
    width: 100%;
    height: 6px;
    margin-top: 4px;
    background: #333;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
}

.inspector-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #00BFFF;
    border-radius: 50%;
    cursor: pointer;
    -webkit-transition: background 0.15s ease;
    transition: background 0.15s ease;
}

.inspector-slider::-webkit-slider-thumb:hover {
    background: #33CCFF;
}

.inspector-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #00BFFF;
    border: none;
    border-radius: 50%;
    cursor: pointer;
}

.inspector-slider::-moz-range-track {
    background: #333;
    border-radius: 3px;
}

/* Color input picker */
.inspector-color-input {
    width: 32px;
    height: 24px;
    padding: 0;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    overflow: hidden;
}

.inspector-color-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

.inspector-color-input::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
}

.inspector-color-input:hover {
    border-color: #00BFFF;
}

/* Color row with picker */
.inspector-color-row .inspector-color-hex {
    flex: 1;
    text-align: right;
}

/* =================================================
   Phase 6: Textarea Styles (Sign text editing)
   ================================================= */

/* Sign Text Textarea */
.inspector-textarea {
    width: 100%;
    min-height: 50px;
    max-height: 100px;
    padding: 8px;
    margin-bottom: 4px;
    border: 1px solid #444;
    border-radius: 4px;
    background-color: #252525;
    color: #fff;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    resize: vertical;
    box-sizing: border-box;
    line-height: 1.4;
}

.inspector-textarea:hover {
    border-color: #666;
}

.inspector-textarea:focus {
    outline: none;
    border-color: #00BFFF;
    background-color: #2a2a2a;
    box-shadow: 0 0 0 2px rgba(0, 191, 255, 0.15);
}

.inspector-textarea::-moz-placeholder {
    color: #666;
}

.inspector-textarea::placeholder {
    color: #666;
}

/* Character Count */
.inspector-char-count {
    display: block;
    font-size: 11px;
    color: #888;
    text-align: right;
    margin-top: 2px;
}

.inspector-char-count.near-limit {
    color: #ff9944;
}

/* Multi-select info styles */
.multi-select-info {
    text-align: center;
    padding: 16px 8px;
}

.multi-select-count {
    font-size: 14px;
    color: #00BFFF;
    margin: 0 0 8px 0;
}

.multi-select-hint {
    font-size: 12px;
    color: #888;
    margin: 0;
}

/* ============================================
   Phase 5: Entity Group Header Styles
   ============================================ */

.inspector-group-header {
    background: rgba(74, 158, 255, 0.1);
    border: 1px solid rgba(74, 158, 255, 0.3);
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 12px;
}

.group-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.group-label {
    font-weight: 600;
    color: #888;
    font-size: 0.9em;
}

.group-name {
    font-weight: 600;
    color: #4a9eff;
}

.btn-edit-group-name {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    font-size: 0.8em;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-edit-group-name:hover {
    opacity: 1;
}

.group-count {
    font-size: 0.85em;
    color: #666;
}

/* ============================================
   Phase 5: Edit Individual Mode Styles
   ============================================ */

.inspector-edit-mode {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: rgba(255, 170, 0, 0.1);
    border: 1px solid rgba(255, 170, 0, 0.3);
    border-radius: 4px;
}

.inspector-edit-mode label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 13px;
    color: #ddd;
}

.inspector-edit-mode input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/* ============================================
   Phase 5E: Group Multi-Select Edit Mode
   ============================================ */

.editable-inspector-content.inspector-group-edit .instance-property {
    display: none;
}

.editable-inspector-content.inspector-group-edit .inspector-section:not(.property-section) {
    display: none;
}

.edit-mode-hint {
    font-size: 0.8em;
    color: #888;
    font-style: italic;
}

/* ============================================
   Phase 5: Shared vs Instance Property Styles
   ============================================ */

.property-section {
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #888;
}

.property-section.shared-property {
    border-left-color: #4a9eff;
}

.property-section.instance-property {
    border-left-color: #666;
}

.property-section h4 {
    margin: 0 0 8px 0;
    font-size: 0.9em;
}

.shared-indicator {
    font-size: 0.85em;
    color: #4a9eff;
    font-weight: normal;
    margin-left: 8px;
}

/* ============================================
   Phase 5: Minecart Waypoint Styles
   ============================================ */

.waypoints-section {
    margin-bottom: 16px;
}

.waypoints-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.waypoints-header-row .inspector-section-header {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.waypoint-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 4px;
}

.waypoint-list::-webkit-scrollbar {
    width: 4px;
}

.waypoint-list::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.waypoint-list::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 2px;
}

.waypoint-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: #252525;
    border: 1px solid #333;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.waypoint-item:hover {
    background: #2a2a2a;
    border-color: #444;
}

.waypoint-item.selected {
    background: rgba(0, 191, 255, 0.15);
    border-color: #00BFFF;
}

.waypoint-label {
    min-width: 36px;
    font-size: 11px;
    font-weight: bold;
    color: #888;
}

.waypoint-label.waypoint-start {
    color: #4CAF50;
}

.waypoint-label.waypoint-end {
    color: #FF5722;
}

.waypoint-coord-input {
    width: 50px;
    padding: 3px 5px;
    background: #1e1e1e;
    border: 1px solid #333;
    border-radius: 3px;
    color: #fff;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    text-align: right;
}

.waypoint-coord-input:hover {
    border-color: #555;
}

.waypoint-coord-input:focus {
    outline: none;
    border-color: #00BFFF;
    background: #252525;
}

/* Hide number input spin buttons */
.waypoint-coord-input::-webkit-outer-spin-button,
.waypoint-coord-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.waypoint-coord-input[type=number] {
    -moz-appearance: textfield;
}

.waypoint-btn {
    padding: 4px 8px;
    border: none;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s ease;
}

.waypoint-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.waypoint-add-btn {
    background: #2E7D32;
    color: #fff;
}

.waypoint-add-btn:hover:not(:disabled) {
    background: #388E3C;
}

.waypoint-delete-btn {
    background: #C62828;
    color: #fff;
    padding: 4px 6px;
    margin-left: auto;
}

.waypoint-delete-btn:hover:not(:disabled) {
    background: #D32F2F;
}

/* ============================================
   Phase 6: Book Inspector Styles
   ============================================ */

/* Input wrapper for title with char count */
.inspector-input-wrapper {
    position: relative;
}

.inspector-input-text {
    width: 100%;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #f0f0f0;
    font-size: 14px;
    box-sizing: border-box;
}

.inspector-input-text:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.5);
}

.inspector-input-sm {
    padding: 6px 8px;
    font-size: 13px;
}

/* Pages section */
.inspector-pages-section {
    margin-top: 10px;
}

.inspector-section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.inspector-badge {
    background: rgba(100, 150, 200, 0.3);
    color: #aaccff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

/* Add page button */
.inspector-btn-add {
    width: 100%;
    padding: 8px 15px;
    background: rgba(50, 150, 100, 0.3);
    border: 1px solid rgba(50, 150, 100, 0.5);
    color: #8fdfaf;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    margin-bottom: 10px;
    transition: all 0.2s;
}

.inspector-btn-add:hover:not(:disabled) {
    background: rgba(50, 150, 100, 0.5);
}

.inspector-btn-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pages list */
.inspector-pages-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Page item (accordion) */
.inspector-page-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
}

.inspector-page-item.expanded {
    border-color: rgba(100, 150, 255, 0.3);
}

/* Page header (clickable) */
.inspector-page-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.05);
    transition: background 0.2s;
}

.inspector-page-header:hover {
    background: rgba(255, 255, 255, 0.1);
}

.inspector-expand-icon {
    font-size: 10px;
    color: #888;
    width: 14px;
    text-align: center;
}

.inspector-page-label {
    flex: 1;
    font-size: 13px;
    color: #e0e0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inspector-page-type-tag {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    font-weight: bold;
}

.inspector-page-type-tag.type-text {
    background: rgba(100, 150, 200, 0.3);
    color: #8fb8df;
}

.inspector-page-type-tag.type-image {
    background: rgba(200, 150, 100, 0.3);
    color: #dfb88f;
}

/* Page content (expanded) */
.inspector-page-content {
    padding: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Select dropdown */
.inspector-select {
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    color: #f0f0f0;
    font-size: 13px;
    cursor: pointer;
}

.inspector-select:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.5);
}

/* Content editor */
.inspector-content-editor {
    margin-top: 10px;
}

.inspector-page-textarea {
    width: 100%;
    min-height: 100px;
    resize: vertical;
}

/* Image preview */
.inspector-image-preview {
    margin-top: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    text-align: center;
}

.inspector-image-preview img {
    max-width: 100%;
    max-height: 150px;
    border-radius: 4px;
}

.inspector-image-preview .preview-error {
    color: #ff8888;
    font-size: 12px;
}

/* Page action buttons */
.inspector-page-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inspector-btn-sm {
    padding: 5px 10px;
    background: rgba(100, 100, 100, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.inspector-btn-sm:hover:not(:disabled) {
    background: rgba(100, 100, 100, 0.5);
    color: #fff;
}

.inspector-btn-sm:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.inspector-btn-danger {
    background: rgba(200, 80, 80, 0.3);
    border-color: rgba(200, 80, 80, 0.5);
    color: #ff9999;
}

.inspector-btn-danger:hover:not(:disabled) {
    background: rgba(200, 80, 80, 0.5);
    color: #ffcccc;
}

/* Empty message */
.inspector-empty-msg {
    padding: 20px;
    text-align: center;
    color: #888;
    font-style: italic;
    font-size: 13px;
}

/* Phase 5E: Entity Groups Panel (Floating) */
.entity-groups-panel {
    position: absolute;
    top: 120px;
    right: 20px;
    width: 220px;
    max-height: 320px;
    background: rgba(20, 22, 30, 0.95);
    border: 1px solid rgba(74, 158, 255, 0.35);
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    color: #ddd;
    z-index: 6;
    overflow: hidden;
}

.entity-groups-panel.hidden {
    display: none;
}

.entity-groups-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #b9d9ff;
    background: linear-gradient(90deg, rgba(74, 158, 255, 0.25), rgba(74, 158, 255, 0.05));
    border-bottom: 1px solid rgba(74, 158, 255, 0.25);
    cursor: move;
}

.entity-groups-content {
    max-height: 280px;
    overflow-y: auto;
    padding: 6px;
}

.entity-groups-empty {
    padding: 10px;
    font-size: 12px;
    color: #888;
    text-align: center;
}

.entity-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    margin-bottom: 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.entity-group-row:last-child {
    margin-bottom: 0;
}

.entity-group-row:hover {
    background: rgba(74, 158, 255, 0.12);
    border-color: rgba(74, 158, 255, 0.35);
}

.entity-group-name {
    font-size: 12px;
    font-weight: 600;
    color: #e6f1ff;
}

.entity-group-type {
    font-size: 11px;
    color: #8bb9ff;
}

.entity-group-count {
    font-size: 11px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 10px;
}

/* Phase 5B: Delete Confirmation Modal Styles */

.delete-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2002; /* Above other modals */
}

.delete-confirm-modal.hidden {
    display: none;
}

.delete-confirm-content {
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    width: 360px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Header */
.delete-confirm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.delete-confirm-header h2 {
    margin: 0;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}

.delete-confirm-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.delete-confirm-close-btn:hover {
    color: #ff6b6b;
}

/* Body */
.delete-confirm-body {
    padding: 20px;
}

.delete-confirm-message {
    margin: 0 0 12px 0;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.delete-confirm-warning {
    margin: 0;
    color: #ff6b6b;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
}

/* Actions */
.delete-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.delete-confirm-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.delete-confirm-btn-cancel {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f0f0f0;
}

.delete-confirm-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.delete-confirm-btn-delete {
    background: rgba(220, 53, 69, 0.8);
    border: 1px solid #dc3545;
    color: white;
}

.delete-confirm-btn-delete:hover {
    background: rgba(220, 53, 69, 1);
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for delete confirm modal */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .delete-confirm-content {
        width: 80%;
        max-width: 400px;
    }

    .delete-confirm-header {
        padding: 12px 16px;
    }

    .delete-confirm-header h2 {
        font-size: 16px;
    }

    .delete-confirm-close-btn {
        min-width: 44px;
        min-height: 44px;
        font-size: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .delete-confirm-body {
        padding: 16px;
    }

    .delete-confirm-message {
        font-size: 13px;
    }

    .delete-confirm-warning {
        font-size: 11px;
    }

    .delete-confirm-actions {
        padding: 12px 16px;
        gap: 10px;
    }

    .delete-confirm-btn {
        min-height: 44px;
        padding: 10px 18px;
        font-size: 13px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .delete-confirm-content {
        width: 90%;
    }

    .delete-confirm-header h2 {
        font-size: 14px;
    }

    .delete-confirm-actions {
        flex-direction: column;
    }

    .delete-confirm-btn {
        width: 100%;
    }
}

/* Phase 4 Minimap Toggle: Editor Panel Styles */

/* Main Panel */
.editor-panel {
    position: fixed;
    right: 20px;
    top: 160px;
    width: 300px;
    max-height: calc(100vh - 200px);
    background: rgba(30, 30, 40, 0.98);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    z-index: 1500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.editor-panel.hidden {
    display: none;
}

/* Header */
.editor-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(0, 188, 212, 0.15);
    border-bottom: 1px solid rgba(0, 188, 212, 0.3);
}

.editor-panel-header h3 {
    margin: 0;
    color: #00bcd4;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
}

.editor-panel-header h3::before {
    content: '\2699';
    font-size: 18px;
}

.editor-panel-close-btn {
    background: none;
    border: none;
    color: #888;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s;
}

.editor-panel-close-btn:hover {
    color: #ff6b6b;
}

/* Content */
.editor-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

/* Sections */
.editor-panel-section {
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.editor-panel-section:last-child {
    border-bottom: none;
}

.editor-panel-section h4 {
    margin: 0 0 12px 0;
    color: #aaa;
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Groups */
.editor-panel-form-group {
    margin-bottom: 12px;
}

.editor-panel-form-group:last-child {
    margin-bottom: 0;
}

.editor-panel-form-group > label {
    display: block;
    color: #ccc;
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin-bottom: 6px;
}

.editor-panel-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.editor-panel-hint {
    display: block;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 11px;
    margin-top: 6px;
}

/* Checkbox Group */
.editor-panel-checkbox-group .editor-panel-input-row {
    justify-content: flex-start;
}

.editor-panel-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #00bcd4;
}

.editor-panel-checkbox-group label {
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    flex: 1;
}

/* Toggle Button */
.editor-panel-toggle-btn {
    position: fixed;
    right: 20px;
    top: 110px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00bcd4 0%, #0097a7 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    z-index: 1499;
    box-shadow: 0 4px 12px rgba(0, 188, 212, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.editor-panel-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 188, 212, 0.6);
}

.editor-panel-toggle-btn.hidden {
    display: none;
}

/* Scrollbar styling */
.editor-panel-content::-webkit-scrollbar {
    width: 6px;
}

.editor-panel-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.editor-panel-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.editor-panel-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Select dropdown */
.editor-panel-select {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.editor-panel-select:hover,
.editor-panel-select:focus {
    border-color: #00bcd4;
    outline: none;
}

.editor-panel-select option {
    background: #2a2a3a;
    color: #e0e0e0;
}

/* Input fields */
.editor-panel-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #e0e0e0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.editor-panel-input:hover,
.editor-panel-input:focus {
    border-color: #00bcd4;
    outline: none;
}

.editor-panel-input::-moz-placeholder {
    color: #666;
}

.editor-panel-input::placeholder {
    color: #666;
}

/* Buttons */
.editor-panel-btn {
    padding: 10px 16px;
    background: #00bcd4;
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
}

.editor-panel-btn:hover {
    filter: brightness(1.1);
}

.editor-panel-btn:active {
    transform: scale(0.98);
}

.editor-panel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Debug Panel specific positioning */
#debug-panel {
    top: 60px;
    left: 20px;
    right: auto;
}

#btn_debugPanelToggle {
    left: 20px;
    right: auto;
    top: 10px;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.4);
}

#btn_debugPanelToggle:hover {
    box-shadow: 0 6px 16px rgba(255, 152, 0, 0.6);
}

/* Inventory Hotbar Styling
 *
 * The 8-slot bottom-center hotbar (keys 1-8 shown as labels) IS the player
 * inventory: slots are server-authoritative (INVENTORY_UPDATE), drag to swap,
 * right-click or drag-out to drop onto the map.
 *
 * Layout inherits the old ability hotbar's bar (fixed, bottom-centered flex
 * row). Slot rings are greyscale: empty #444, filled #888, hover lighter —
 * the ONLY colored ring is the blue .slot-selected outline. Pickup/drop
 * flash, drag states and the floating "+Item" text come from the old
 * inventory panel styling.
 */

#div_inventoryHotbar {
    position: fixed !important;
    /* Sits at the very bottom-center (6 o'clock). Was raised to 80px to clear the
       old centered level bar + character-name label that used to live below it;
       those are gone, so the bar drops to the bottom. */
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 25px !important;
    z-index: 1000;
    width: auto !important;
}

#div_inventoryHotbar.hidden {
    display: none !important;
}

/* Inventory Slot Base (hotbar-sized) */
.inventorySlot {
    position: relative;
    width: 96px !important;
    min-width: 96px !important;
    height: 96px !important;
    min-height: 96px !important;
    flex-shrink: 0 !important;
    border: 3px solid #444;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

/* Locked slots (capacity upgrade not bought yet — see UPGRADE_STATE/setCapacity) */
.inventorySlot.slot-locked {
    display: none !important;
}

/* Selected slot (keys 1-8/9/0 — see setSelectedSlot). The blue outline is
   the ONLY colored ring in the hotbar (slot borders stay grey). Uses
   `outline` (not border/box-shadow) so it COMPOSES with the hover/drag
   border rules instead of being overridden by them, plus a slight lift. */
.inventorySlot.slot-selected {
    outline: 3px solid #44aaff;
    outline-offset: 2px;
    transform: translateY(-6px);
}

/* Filled slots get a uniform grey highlight — rarity-NEUTRAL on purpose,
   see the RARITY STYLING note below. Placed before the hover rules so the
   (equal-specificity) hover border wins on filled slots. */
.inventorySlot.filled {
    border-color: #888;
}

/* Slot States (greyscale — the selection blue is the only persistent color) */
.inventorySlot:hover {
    border-color: #aaa;
    background: rgba(70, 70, 70, 0.7);
}

.inventorySlot.filled:hover {
    border-color: #ccc;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.25);
}

.inventorySlot.dragging {
    opacity: 0.5;
    border-color: #FFC107;
}

.inventorySlot.dragover {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    box-shadow: 0 0 12px rgba(76, 175, 80, 0.5);
}

.inventorySlot:active {
    transform: scale(0.95);
}

/* ----------------------------------------------------------------------------
 * QUICK-UPGRADE "+" GHOST SLOT
 * A green dashed ghost slot rendered just past the last unlocked slot — the
 * LAST child of #div_inventoryHotbar (locked slots between it and the last real
 * slot are display:none and collapse). It is ABSOLUTELY POSITIONED (out of the
 * flex flow) on purpose: the real slots are centered by the flex row, so if the
 * "+" were a flex child its mere appearance/disappearance would widen the row
 * and re-center every slot. Out of flow, it floats one gap past the panel's
 * right edge (`left:100%` = right edge since it adds no width; `margin-left` =
 * the inter-slot gap) WITHOUT moving the real slots. The bar only shifts when an
 * actual slot is purchased (a real flex child appears). Created + toggled by
 * inventoryHotbar.ts; visible only with an unspent skill point AND a non-maxed
 * INVENTORY_SLOTS upgrade. Reuses .inventorySlot for size/shape (width/height
 * track every breakpoint); only `margin-left` (the gap) needs a per-breakpoint
 * override below. Compound selectors keep these ahead of the .inventorySlot:hover
 * rules. (Future: matching "+" by the health/stamina bars + minimap — all gate
 * on the same unspent-point balance, so a buy hides them all.)
 * ------------------------------------------------------------------------- */
.inventorySlot.slot-upgrade {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 25px; /* == the default inter-slot flex gap */
    border-style: dashed;
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.12);
    color: #2ecc71;
    font-size: 52px;
    font-weight: 800;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    animation: upgradeSlotPulse 1.6s ease-in-out infinite;
}

.inventorySlot.slot-upgrade:hover {
    border-color: #27ae60;
    background: rgba(46, 204, 113, 0.25);
    color: #fff;
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.6);
    animation: none;
}

.inventorySlot.slot-upgrade.hidden {
    display: none !important;
}

@keyframes upgradeSlotPulse {
    0%, 100% { box-shadow: 0 0 6px rgba(46, 204, 113, 0.30); border-color: #2ecc71; }
    50%      { box-shadow: 0 0 16px rgba(46, 204, 113, 0.65); border-color: #43e88a; }
}

/* Stack-count badge (TOP-LEFT corner — took over the spot of the removed
   1-8/9/0 keybind labels; the keys themselves still select slots, see
   KeyboardHandler). Element is created by inventoryHotbar.ts; only visible
   at count >= 2. */
.slotCount {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px black, 0 0 4px rgba(0, 0, 0, 0.9);
    z-index: 10;
    pointer-events: none;
    display: none;
}

/* Inventory Icon */
.inventoryIcon {
    width: 72px;
    height: 72px;
    -o-object-fit: contain;
       object-fit: contain;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    -webkit-user-drag: none;
}

.inventoryIcon[src=""],
.inventoryIcon:not([src]) {
    display: none;
}

/* ============================================================================
 * DURABILITY BAR + BROKEN STATE
 * A thin bar along the slot's bottom edge, shown by inventoryHotbar.ts ONLY for
 * durable items (weapons/tools — isDurableItem). Fill width = remaining %,
 * colour-graded by the data-level the JS sets (green → amber → red). At 0
 * durability the item is BROKEN: the bar is hidden and .slot-broken greys +
 * cracks the icon — the item stays in the slot (clickable, repairable later)
 * but the server also stops showing it in-hand.
 * ============================================================================ */

.slot-durability {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.65);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    z-index: 9;
    pointer-events: none;
    display: none; /* shown per-slot by JS, durable items only */
}

.slot-durability-fill {
    height: 100%;
    width: 100%;
    border-radius: 3px;
    background: #2ecc71;
    transition: width 0.15s ease, background-color 0.15s ease;
}

.slot-durability-fill.durability-high { background: #2ecc71; } /* green  */
.slot-durability-fill.durability-mid  { background: #f1c40f; } /* amber  */
.slot-durability-fill.durability-low  { background: #e74c3c; } /* red    */
/* Durability spent (0) but still usable — a loaded gun firing its last rounds.
   Full-width DARK red instead of the broken grey/crack, so it reads as
   "worn out, but works until the ammo runs out". */
.slot-durability-fill.durability-depleted { background: #6e1414; }

/* Broken item: greyed + cracked. Still occupies the slot (clickable). Kept
   readable — the item underneath should stay recognisable (brighter so it's
   clearly identifiable). */
.inventorySlot.slot-broken .inventoryIcon {
    filter: grayscale(100%) brightness(0.85);
    opacity: 0.8;
}

/* Crack overlay (lightweight inline SVG) over a broken item's icon. Half
   transparency so it reads as a crack without hiding the item. */
.inventorySlot.slot-broken::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20100%20100%27%3E%3Cpath%20d=%27M50%202%20L46%2030%20L60%2042%20L40%2054%20L54%2072%20L46%2098%20M46%2030%20L22%2036%20M60%2042%20L84%2036%20M40%2054%20L16%2062%20M54%2072%20L80%2076%27%20fill=%27none%27%20stroke=%27rgba%28225,225,225,0.85%29%27%20stroke-width=%273%27%20stroke-linejoin=%27round%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 78% 78%;
    opacity: 0.5;
}

/* ============================================================================
 * RARITY STYLING
 * The rarity-* / item-accent-gem-* classes are still applied by JavaScript
 * (see inventoryHotbar.ts updateFromServer) but slot rings are deliberately
 * rarity-NEUTRAL: every filled slot gets the same grey highlight (.filled
 * above) so the only colored ring in the hotbar is the blue .slot-selected
 * outline. Rarity color still shows in the hover tooltip and the floating
 * "+Item Name" pickup text below.
 * ============================================================================ */

/* ============================================================================
 * PICKUP/DROP VISUAL FEEDBACK
 * ============================================================================ */

/* Flash overlay element (added programmatically to each slot) */
.inventorySlot .slot-flash-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent;
    border-radius: 7px;
}

/* (Pickups intentionally have no slot flash — the floating "+Item Name"
   text above the hotbar is the pickup feedback.) */

/* Drop: brief dim over 150ms */
@keyframes slotFlashDrop {
    0% { background: rgba(0, 0, 0, 0.5); }
    100% { background: transparent; }
}

.inventorySlot.slot-dim .slot-flash-overlay {
    animation: slotFlashDrop 150ms ease-out;
}

/* ============================================================================
 * FLOATING PICKUP TEXT ("+Item Name" above the hotbar)
 * ============================================================================ */

@keyframes pickupTextRise {
    0% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -30px); opacity: 0; }
}

.pickup-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 15px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    white-space: nowrap;
    pointer-events: none;
    animation: pickupTextRise 800ms ease-out forwards;
    z-index: 1001;
}

.pickup-text.rarity-common { color: #cccccc; }
.pickup-text.rarity-rare { color: #4d9dff; }
.pickup-text.rarity-epic { color: #b34dff; }
.pickup-text.rarity-legendary { color: #ffcc00; }

/* ============================================================================
 * RESPONSIVE (inherited from the ability hotbar breakpoints)
 * ============================================================================ */

@media (max-width: 1280px) {
    #div_inventoryHotbar {
        bottom: 20px;
        /* 80px slots need 10×80 + 9×18 = 962px fully unlocked, so this tier
           only applies at 962-1280px; the 64px tier below covers ≤961px. */
        gap: 18px !important;
    }

    .inventorySlot {
        width: 80px !important;
        min-width: 80px !important;
        height: 80px !important;
        min-height: 80px !important;
    }

    .inventoryIcon {
        width: 60px;
        height: 60px;
    }

    .slotCount {
        font-size: 14px;
    }

    .inventorySlot.slot-upgrade {
        margin-left: 18px; /* matches this tier's gap */
    }
}

@media (max-width: 961px) {
    #div_inventoryHotbar {
        bottom: 12px;
        /* 10×64px + 9×12px = 748px fully unlocked — fits everything ≥756px;
           below that the shrink escape hatch keeps the bar inside the
           viewport (slots compress instead of clipping off both edges). */
        gap: 12px !important;
        max-width: calc(100vw - 8px);
    }

    .inventorySlot {
        width: 64px !important;
        min-width: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
        flex-shrink: 1 !important;
        flex-basis: 64px;
    }

    .inventoryIcon {
        width: 48px;
        height: 48px;
    }

    .slotCount {
        font-size: 12px;
        top: 2px;
        left: 4px;
    }

    .slot-durability {
        left: 5px;
        right: 5px;
        bottom: 4px;
        height: 4px;
    }

    .inventorySlot.slot-upgrade {
        font-size: 40px;
        margin-left: 12px; /* matches this tier's gap */
    }
}

@media (min-width: 2560px) {
    #div_inventoryHotbar {
        bottom: 32px;
        gap: 60px !important;
    }

    .inventorySlot {
        width: 120px !important;
        min-width: 120px !important;
        height: 120px !important;
        min-height: 120px !important;
        border-width: 4px;
    }

    .inventoryIcon {
        width: 90px;
        height: 90px;
    }

    .slotCount {
        font-size: 20px;
        top: 6px;
        left: 8px;
    }

    .slot-durability {
        left: 10px;
        right: 10px;
        bottom: 8px;
        height: 8px;
    }

    .inventorySlot.slot-upgrade {
        margin-left: 60px; /* matches this tier's gap */
    }
}

/* Upgrade Window Styling
 *
 * The skill-point spending panel (#div_upgradeWindow, markup in
 * topRightSettingsContainer.html, logic in ui/upgradeWindow.ts) plus the
 * points badge on the top-right Upgrades HUD button. Visual language follows
 * the inventory hotbar: dark translucent panels, #444 borders, 10px radii.
 */

/* Points badge on the HUD button (button is the positioning context) */
#btn_upgradesIcon {
    position: relative;
}

.upgrade-points-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2ecc71;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.upgrade-points-badge.hidden {
    display: none;
}

/* The window itself */
#div_upgradeWindow {
    position: fixed;
    top: 70px;
    left: 10px; /* opens under the top-left Upgrades button (moved from top-right) */
    width: 380px;
    max-width: calc(100vw - 40px);
    /* Six rows outgrow short viewports — scroll instead of clipping. */
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 14px 16px;
    border: 3px solid #444;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #eee;
    font-family: inherit;
    z-index: 1200;
}

#div_upgradeWindow.hidden {
    display: none;
}

.upgradeWindowHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.upgradeWindowTitle {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

#btn_upgradeWindowClose {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}

#btn_upgradeWindowClose:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.upgradePointsLine {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #aaa;
}

#span_upgradePointsAvailable {
    color: #2ecc71;
    font-weight: 700;
}

/* Upgrade rows */
.upgradeRow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 8px;
    border: 2px solid #333;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.upgradeRow:last-child {
    margin-bottom: 0;
}

.upgradeRowInfo {
    flex: 1;
    min-width: 0;
}

.upgradeRowTitle {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.upgradeRowDesc {
    margin: 2px 0 0 0;
    font-size: 12px;
    color: #999;
}

.upgradeRowLevels {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    /* Platform Size has up to 19 pips — wrap them into a few rows instead of
       overflowing the panel. The 5-pip rows (≈70px) stay on one line. */
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 140px;
}

.upgradePip {
    width: 10px;
    height: 16px;
    border: 1px solid #555;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.06);
}

.upgradePip.filled {
    background: #2ecc71;
    border-color: #2ecc71;
}

.upgradeBuyBtn {
    width: 40px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    border-radius: 8px;
    background: #2ecc71;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}

.upgradeBuyBtn:hover:not(:disabled) {
    background: #27ae60;
}

.upgradeBuyBtn:disabled {
    background: #333;
    color: #777;
    font-size: 12px;
    cursor: default;
}

@media (max-width: 768px) {
    #div_upgradeWindow {
        top: 70px;
        left: 10px;
        width: 320px;
        padding: 10px 12px;
    }
}

/* Clans Window Styling
 *
 * The clan browser / create / join panel (#div_clansWindow, markup in
 * sections/game/clansWindow.html, logic in ui/clansWindow.ts + ui/bridge/clans.ts).
 * Visual language matches the upgrade window: dark translucent panel, #444
 * border, 10px radii, green primary actions, red destructive actions.
 */

/* Notification ping on the HUD Clans button (button is the positioning context) */
#btn_clansIcon {
    position: relative;
}

/* Small green dot, top-right — same green as the upgrades badge. No count: it
   just pings when there's a pending join request (owner) or you were accepted. */
.clans-notify-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2ecc71;
    border: 2px solid rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.9);
    pointer-events: none;
    animation: clansNotifyPulse 1.4s ease-in-out infinite;
}

.clans-notify-badge.hidden {
    display: none;
}

@keyframes clansNotifyPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.75; }
}

#div_clansWindow {
    position: fixed;
    top: 70px;
    left: 10px; /* opens under the top-left Clans button */
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    padding: 14px 16px;
    border: 3px solid #444;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.85);
    color: #eee;
    font-family: inherit;
    z-index: 1200;
}

#div_clansWindow.hidden {
    display: none;
}

.clansWindowHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.clansWindowTitle {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

#btn_clansWindowClose {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
    font-size: 14px;
    cursor: pointer;
}

#btn_clansWindowClose:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

/* "Your clan" panel */
#div_clansMine {
    margin-bottom: 12px;
}

.clansMineStatus {
    margin: 0;
    font-size: 13px;
    color: #aaa;
}

.clansMineHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.clansMineTitle {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.clansRole {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f1c40f;
}

.clansSubTitle {
    margin: 10px 0 4px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

.clansMemberList,
.clansPendingList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clansMemberRow {
    padding: 5px 8px;
    border: 1px solid #333;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 13px;
}

/* Owner view: member row with an inline "Remove" button. */
.clansMemberRowAction {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.clansMemberName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clansMemberRowAction .clansBtn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 12px;
}

.clansPendingRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border: 1px solid #333;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.04);
}

.clansPendingName {
    font-size: 13px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clansPendingActions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.clansEmpty {
    margin: 2px 0;
    font-size: 12px;
    color: #777;
}

/* Create form */
.clansCreate {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.clansCreate.hidden {
    display: none;
}

#input_clanName {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 2px solid #333;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: #eee;
    font-size: 14px;
    font-family: inherit;
}

#input_clanName:focus {
    outline: none;
    border-color: #2ecc71;
}

.clansError {
    margin: 0 0 10px 0;
    font-size: 12px;
    color: #e74c3c;
}

.clansError.hidden {
    display: none;
}

/* Available clans list */
.clansSectionTitle {
    margin: 4px 0 6px 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

.clansList {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clansListRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
}

.clansListRowMine {
    border-color: #2ecc71;
}

.clansListInfo {
    flex: 1;
    min-width: 0;
}

.clansListName {
    display: block;
    font-size: 15px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clansListMeta {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: #999;
}

.clansListAction {
    flex-shrink: 0;
}

.clansListTag {
    font-size: 12px;
    font-weight: 600;
    color: #2ecc71;
}

.clansListTagMuted {
    color: #777;
}

/* Buttons */
.clansBtn {
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    background: #2ecc71;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.clansBtn:hover {
    background: #27ae60;
}

.clansBtnGood {
    background: #2ecc71;
}

.clansBtnDanger {
    background: #e74c3c;
}

.clansBtnDanger:hover {
    background: #c0392b;
}

@media (max-width: 768px) {
    #div_clansWindow {
        top: 70px;
        left: 10px;
        width: 320px;
        padding: 10px 12px;
    }
}

/* Toolbench crafting window (ui/toolbenchWindow.ts).
   A small centred modal shown while interacting with a placed toolbench. */

.toolbench-window {
    position: fixed;
    top: 50%;
    left: 50%;
    /* scale(2) renders the whole modal 2x bigger; the translate keeps it centred
       (scale's default origin is the element centre, so it stays put). */
    transform: translate(-50%, -50%) scale(2);
    z-index: 60;

    min-width: 280px;
    background: rgba(28, 24, 18, 0.96);
    border: 2px solid #a1773b;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #f3ead7;
    font-family: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.toolbench-window.hidden {
    display: none;
}

.toolbench-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(161, 119, 59, 0.5);
}

.toolbench-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #ffd98a;
}

.toolbench-close {
    background: transparent;
    border: none;
    color: #f3ead7;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.toolbench-close:hover {
    color: #ff8a8a;
}

.toolbench-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.toolbench-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #b8a274;
    margin-bottom: 6px;
}

.toolbench-make-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    /* Stations now offer up to ~20 recipes (and the precision workbench, a superset,
       shows even more). Bound the button list and let it scroll so the header,
       hint, tool slot and craft-queue stay on-screen — the modal renders at
       scale(2) and has no max-height of its own. */
    max-height: 172px;
    overflow-y: auto;
    /* room so the scrollbar doesn't overlap the last column of buttons */
    padding-right: 4px;
}

.toolbench-make-btn {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 8px 10px;
    background: #3c3322;
    border: 1px solid #a1773b;
    border-radius: 6px;
    color: #f3ead7;
    font-size: 13px;
    cursor: pointer;
}

.toolbench-make-btn:hover:not(:disabled) {
    background: #50432a;
}

.toolbench-make-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.toolbench-make-yield {
    color: #8fe0f2;
    font-weight: 700;
}

.toolbench-hint {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11px;
    color: #e6a86b;
}

.toolbench-slots {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.toolbench-slot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The 4 discrete output slots, laid out 2x2 so the window stays compact. */
.toolbench-output-slots {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
}

.toolbench-slot {
    position: relative;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #6b5630;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toolbench-slot:hover {
    border-color: #ffd98a;
}

.toolbench-slot.empty {
    cursor: default;
    opacity: 0.7;
}

/* A craft in progress: dim the made item a touch and surface the loading bar. */
.toolbench-slot.crafting {
    border-color: #8fe0a0;
}

.toolbench-slot.crafting .toolbench-slot-icon {
    opacity: 0.65;
}

/* A finished, collectable item: warm highlight. */
.toolbench-slot.done {
    border-color: #ffd98a;
    box-shadow: inset 0 0 9px rgba(255, 217, 138, 0.5);
}

.toolbench-slot-icon {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    display: none;
}

.toolbench-slot.filled .toolbench-slot-icon {
    display: block;
}

/* Left-to-right loading bar, shown only while a slot is crafting. Sits across
   the bottom of the slot; the fill width tracks the craft progress (0 -> 100%)
   and is driven per-frame by ui/toolbenchWindow.ts. */
.toolbench-slot-bar {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 7px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    overflow: hidden;
    display: none;
}

.toolbench-slot.crafting .toolbench-slot-bar {
    display: block;
}

.toolbench-slot-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4fd06a, #b6ff8a);
    border-radius: 3px;
}

.toolbench-slot-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
}

/* Chemistry table crafting window (ui/chemistryTableWindow.ts).
   A small centred modal shown while interacting with a placed chemistry table.
   Sibling of the toolbench window with a green (lab) palette. */

.chemistry-window {
    position: fixed;
    top: 50%;
    left: 50%;
    /* scale(2) renders the whole modal 2x bigger; the translate keeps it centred
       (scale's default origin is the element centre, so it stays put). */
    transform: translate(-50%, -50%) scale(2);
    z-index: 60;

    min-width: 280px;
    background: rgba(18, 26, 20, 0.96);
    border: 2px solid #3fa34d;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #e6f3e7;
    font-family: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.chemistry-window.hidden {
    display: none;
}

.chemistry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(63, 163, 77, 0.5);
}

.chemistry-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #9af2a8;
}

.chemistry-close {
    background: transparent;
    border: none;
    color: #e6f3e7;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.chemistry-close:hover {
    color: #ff8a8a;
}

.chemistry-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chemistry-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #8fc99a;
    margin-bottom: 6px;
}

.chemistry-make-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chemistry-make-btn {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 8px 10px;
    background: #22351f;
    border: 1px solid #3fa34d;
    border-radius: 6px;
    color: #e6f3e7;
    font-size: 13px;
    cursor: pointer;
}

.chemistry-make-btn:hover:not(:disabled) {
    background: #2c4528;
}

.chemistry-make-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.chemistry-hint {
    margin-top: 6px;
    min-height: 14px;
    font-size: 11px;
    color: #e6a86b;
}

.chemistry-slots {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.chemistry-slot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The 4 discrete output slots, laid out 2x2 so the window stays compact. */
.chemistry-output-slots {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 6px;
}

.chemistry-slot {
    position: relative;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #2f6b39;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chemistry-slot:hover {
    border-color: #9af2a8;
}

.chemistry-slot.empty {
    cursor: default;
    opacity: 0.7;
}

/* A craft in progress: dim the made item a touch and surface the loading bar. */
.chemistry-slot.crafting {
    border-color: #8fe0a0;
}

.chemistry-slot.crafting .chemistry-slot-icon {
    opacity: 0.65;
}

/* A finished, collectable item: warm highlight. */
.chemistry-slot.done {
    border-color: #9af2a8;
    box-shadow: inset 0 0 9px rgba(154, 242, 168, 0.5);
}

.chemistry-slot-icon {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    display: none;
}

.chemistry-slot.filled .chemistry-slot-icon {
    display: block;
}

/* Left-to-right loading bar, shown only while a slot is crafting. Sits across
   the bottom of the slot; the fill width tracks the craft progress (0 -> 100%)
   and is driven per-frame by ui/chemistryTableWindow.ts. */
.chemistry-slot-bar {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    height: 7px;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    overflow: hidden;
    display: none;
}

.chemistry-slot.crafting .chemistry-slot-bar {
    display: block;
}

.chemistry-slot-bar-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4fd06a, #b6ff8a);
    border-radius: 3px;
}

/* Storage chest window (ui/chestWindow.ts).
   A small centred modal shown while interacting with a placed storage chest.
   Mirrors the toolbench window's pill/border styling. */

.chest-window {
    position: fixed;
    top: 50%;
    left: 50%;
    /* scale(2) renders the whole modal 2x bigger; the translate keeps it centred
       (scale's default origin is the element centre, so it stays put). */
    transform: translate(-50%, -50%) scale(2);
    z-index: 60;

    min-width: 300px;
    background: rgba(28, 24, 18, 0.96);
    border: 2px solid #a1773b;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #f3ead7;
    font-family: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.chest-window.hidden {
    display: none;
}

.chest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(161, 119, 59, 0.5);
}

.chest-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #ffd98a;
}

.chest-close {
    background: transparent;
    border: none;
    color: #f3ead7;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.chest-close:hover {
    color: #ff8a8a;
}

.chest-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 12 storage slots laid out 4 across (3 rows). */
.chest-slots {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 6px;
    justify-content: center;
}

.chest-slot {
    position: relative;
    width: 56px;
    height: 56px;
    background: rgba(0, 0, 0, 0.35);
    border: 2px solid #6b5630;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chest-slot:hover {
    border-color: #ffd98a;
}

.chest-slot.empty {
    cursor: default;
    opacity: 0.7;
}

.chest-slot-icon {
    width: 44px;
    height: 44px;
    image-rendering: pixelated;
    display: none;
}

.chest-slot.filled .chest-slot-icon {
    display: block;
}

.chest-slot-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 3px #000, 0 0 3px #000;
    pointer-events: none;
}

/* Repair station window (ui/repairWindow.ts).
   A small centred modal shown while interacting with a placed repair station.
   Mirrors the chest/toolbench window styling, with a teal accent matching the
   repair_station building colour. */

.repair-window {
    position: fixed;
    top: 50%;
    left: 50%;
    /* scale(2) renders the whole modal 2x bigger (matches the chest window); the
       translate keeps it centred (scale's origin is the element centre). */
    transform: translate(-50%, -50%) scale(2);
    z-index: 60;

    min-width: 320px;
    max-width: 360px;
    background: rgba(18, 26, 26, 0.96);
    border: 2px solid #00a3a3;
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
    color: #e7f5f5;
    font-family: inherit;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.repair-window.hidden {
    display: none;
}

.repair-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(0, 163, 163, 0.5);
}

.repair-title {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #6fe9e9;
}

.repair-close {
    background: transparent;
    border: none;
    color: #e7f5f5;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.repair-close:hover {
    color: #ff8a8a;
}

.repair-body {
    padding: 12px;
}

.repair-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 260px;
    overflow-y: auto;
}

.repair-list.hidden {
    display: none;
}

/* One damaged item: icon · (name + durability bar + cost) · Repair button. */
.repair-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(0, 163, 163, 0.35);
    border-radius: 8px;
}

.repair-row-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    image-rendering: pixelated;
}

.repair-row-mid {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.repair-row-name {
    font-size: 12px;
    font-weight: 700;
    color: #e7f5f5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.repair-row-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 3px;
    overflow: hidden;
}

.repair-row-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.15s ease;
}

.repair-row-bar-fill.high { background: #2ecc71; }
.repair-row-bar-fill.mid  { background: #f1c40f; }
.repair-row-bar-fill.low  { background: #e74c3c; }

.repair-row-cost {
    font-size: 11px;
    color: #9fd8d8;
}

.repair-row-cost.unaffordable {
    color: #ff8a8a;
}

.repair-row-btn {
    flex: 0 0 auto;
    background: #00a3a3;
    border: none;
    border-radius: 6px;
    color: #08201f;
    font-weight: 700;
    font-size: 12px;
    padding: 6px 12px;
    cursor: pointer;
}

.repair-row-btn:hover:not(:disabled) {
    background: #14c4c4;
}

.repair-row-btn:disabled {
    background: rgba(120, 130, 130, 0.4);
    color: rgba(231, 245, 245, 0.5);
    cursor: default;
}

.repair-empty {
    padding: 12px 6px;
    text-align: center;
    font-size: 12px;
    color: #9fd8d8;
}

.repair-empty.hidden {
    display: none;
}

/* TEMPORARILY HIDDEN: character selection + customization is disabled for now
   (unexpected for current gameplay). Hides the bottom-left button, the "Select
   Character" modal, and the "Customize" creator modal. Re-enable by removing this
   block AND flipping CHARACTER_SELECTOR_ENABLED in
   systems/init/initCharacterSelector.ts. */
#div_characterSelectorButton,
#div_characterSelectorModal,
#div_characterCreatorModal {
    display: none !important;
}

/* Character Selector Button — bottom-left HUD cluster (currently hidden; see the
   block above). Sits to the RIGHT of the portal button (which now takes the
   closer-to-the-bars 232 spot — the two were swapped). */
#div_characterSelectorButton {
    position: fixed;
    bottom: 20px;
    left: 304px;
    z-index: 100;
}

#btn_openCharacterSelector {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
}

#btn_openCharacterSelector:hover {
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
}

#btn_openCharacterSelector:active {
    transform: scale(0.95);
}

#btn_openCharacterSelector img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Custom character active indicator */
#btn_openCharacterSelector.custom-active {
    border-color: #9c27b0;
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.6), inset 0 0 10px rgba(156, 39, 176, 0.2);
}

#btn_openCharacterSelector.custom-active:hover {
    border-color: #ba68c8;
    box-shadow: 0 0 20px rgba(156, 39, 176, 0.8), inset 0 0 15px rgba(156, 39, 176, 0.3);
}

/* Character Modal */
.characterModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.characterModal.hidden {
    display: none;
    opacity: 0;
}

.characterModalContent {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    min-width: 400px;
    max-width: 90vw;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.characterModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.characterModalHeader h3 {
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.modalCloseBtn {
    background: transparent;
    border: none;
    color: #888;
    font-size: 28px;
    cursor: pointer;
    padding: 0 8px;
    transition: color 0.2s ease;
}

.modalCloseBtn:hover {
    color: #fff;
}

/* Customize Button Row */
.customizeRow {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.customizeBtn {
    background: linear-gradient(135deg, #5c6bc0 0%, #3949ab 100%);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.customizeBtn:hover {
    background: linear-gradient(135deg, #7986cb 0%, #5c6bc0 100%);
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.customizeBtn:active {
    transform: scale(0.98);
}

/* Character Grid */
.characterGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.characterOption {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

.characterOption:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-4px);
}

.characterOption.selected {
    border-color: #4CAF50;
    background: rgba(76, 175, 80, 0.2);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.3);
}

.characterOption img {
    width: 80px;
    height: 80px;
    -o-object-fit: contain;
       object-fit: contain;
    margin-bottom: 8px;
}

.characterName {
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.selectedIndicator {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4CAF50;
    display: none;
    align-items: center;
    justify-content: center;
}

.selectedIndicator::after {
    content: '\2713';
    color: #fff;
    font-size: 12px;
    font-weight: bold;
}

.characterOption.selected .selectedIndicator {
    display: flex;
}

/* Responsive */
@media (max-width: 600px) {
    .characterGrid {
        grid-template-columns: repeat(2, 1fr);
    }

    .characterModalContent {
        min-width: auto;
        margin: 16px;
    }

    .characterOption img {
        width: 60px;
        height: 60px;
    }
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for character selector */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .characterModalContent {
        min-width: auto;
        max-width: 85vw;
        max-height: 90vh;
        overflow-y: auto;
        padding: 16px;
    }

    .characterModalHeader {
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .characterModalHeader h3 {
        font-size: 16px;
    }

    .modalCloseBtn {
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .customizeBtn {
        min-height: 44px;
        padding: 10px 20px;
        font-size: 13px;
    }

    .characterGrid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .characterOption {
        padding: 10px;
        min-height: 44px;
    }

    .characterOption img {
        width: 64px;
        height: 64px;
    }

    .characterName {
        font-size: 12px;
    }

    /* Character selector button - ensure touch-friendly */
    #btn_openCharacterSelector {
        min-width: 54px;
        min-height: 54px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .characterModalContent {
        max-width: 95vw;
        padding: 12px;
    }

    .characterGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .characterOption img {
        width: 48px;
        height: 48px;
    }

    .characterName {
        font-size: 11px;
    }

    .customizeBtn {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* Character Creator Modal */
.characterCreatorModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.characterCreatorModal.hidden {
    display: none;
    opacity: 0;
}

.characterCreatorModalContent {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(156, 39, 176, 0.4);
    border-radius: 16px;
    padding: 24px;
    min-width: 340px;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(156, 39, 176, 0.2);
}

.characterCreatorModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(156, 39, 176, 0.3);
}

.characterCreatorModalHeader h3 {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: linear-gradient(90deg, #9c27b0, #e91e63);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Modal Body - Single Column Layout */
.characterCreatorBody {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Preview Section - Centered at Top */
.previewSection {
    display: flex;
    justify-content: center;
    align-items: center;
}

#cvs_characterPreview {
    background: radial-gradient(circle, #2a2a4a 0%, #1a1a2e 100%);
    border: 3px solid rgba(156, 39, 176, 0.4);
    border-radius: 12px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

/* Tab Navigation */
.tabNavigation {
    display: flex;
    gap: 4px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 4px;
}

.tabBtn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #888;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tabBtn:hover {
    color: #ccc;
    background: rgba(156, 39, 176, 0.1);
}

.tabBtn.active {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.4), rgba(233, 30, 99, 0.4));
    color: #fff;
    box-shadow: 0 2px 8px rgba(156, 39, 176, 0.3);
}

/* Tab Content */
.tabContent {
    min-height: 200px;
}

.tabPanel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.tabPanel.active {
    display: flex;
}

/* Control Groups */
.controlGroup {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
}

.controlLabel {
    display: block;
    color: #ccc;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Color Picker */
.colorPickerRow {
    display: flex;
    align-items: center;
    gap: 12px;
}

.colorPickerRow.colorPickerCentered {
    justify-content: center;
}

.colorPicker {
    width: 40px;
    height: 28px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    padding: 0;
}

.colorPicker.colorPickerLarge {
    width: 80px;
    height: 50px;
}

.colorPicker::-webkit-color-swatch-wrapper {
    padding: 0;
}

.colorPicker::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.colorPickerLabel {
    color: #888;
    font-size: 12px;
}

/* Pupil Shade Grid */
.pupilShadeGrid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}

.pupilShadeBtn {
    width: 24px;
    height: 24px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pupilShadeBtn:hover {
    border-color: rgba(156, 39, 176, 0.6);
    transform: scale(1.1);
}

.pupilShadeBtn.selected {
    border-color: #fff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.15);
}

/* Checkbox Row */
.checkboxRow {
    display: flex;
    gap: 16px;
}

.checkboxLabel {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ccc;
    font-size: 11px;
    cursor: pointer;
}

.mirrorCheckbox {
    width: 16px;
    height: 16px;
    accent-color: #9c27b0;
    cursor: pointer;
}

/* Eye Shape Grid */
.eyeShapeGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.eyeShapeBtn {
    width: 100%;
    aspect-ratio: 1;
    max-width: 48px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    padding: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eyeShapeBtn:hover {
    border-color: rgba(156, 39, 176, 0.6);
    background: rgba(156, 39, 176, 0.1);
    transform: translateY(-2px);
}

.eyeShapeBtn.selected {
    border-color: #9c27b0;
    background: rgba(156, 39, 176, 0.2);
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}

.eyeShapeBtn svg {
    width: 100%;
    height: 100%;
}

/* Size Sliders */
.sizeRange {
    width: 100%;
    height: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    background: linear-gradient(90deg, rgba(156, 39, 176, 0.3), rgba(156, 39, 176, 0.6));
    border-radius: 4px;
    outline: none;
}

.sizeRange::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9c27b0, #e91e63);
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Action Buttons */
.characterCreatorActions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(156, 39, 176, 0.3);
}

.actionBtn {
    flex: 1;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.randomizeBtn {
    background: linear-gradient(135deg, #ff9800, #f57c00);
    color: white;
}

.randomizeBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.4);
}

.resetBtn {
    background: linear-gradient(135deg, #607d8b, #455a64);
    color: white;
}

.resetBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(96, 125, 139, 0.4);
}

.applyBtn {
    background: linear-gradient(135deg, #4CAF50, #388E3C);
    color: white;
}

.applyBtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.4);
}

/* Decoration Grid */
.decorationGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 8px;
}

.decorationBtn {
    width: 48px;
    height: 48px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    padding: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.decorationBtn:hover {
    border-color: rgba(156, 39, 176, 0.6);
    background: rgba(156, 39, 176, 0.1);
    transform: translateY(-2px);
}

.decorationBtn.selected {
    border-color: #9c27b0;
    background: rgba(156, 39, 176, 0.2);
    box-shadow: 0 0 15px rgba(156, 39, 176, 0.4);
}

.decorationBtn svg {
    width: 100%;
    height: 100%;
}

/* Image-based decoration buttons */
.decorationBtn.imgDecorBtn {
    padding: 2px;
    overflow: hidden;
}

.decorationBtn.imgDecorBtn img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
}

/* Decoration Transform Section (Phase 5) */
.decorTransformSection {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(156, 39, 176, 0.3);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.decorTransformSection.hidden {
    display: none;
}

.mirrorButtons {
    display: flex;
    gap: 8px;
}

.mirrorBtn {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #ccc;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.mirrorBtn:hover {
    border-color: rgba(156, 39, 176, 0.6);
    background: rgba(156, 39, 176, 0.1);
}

.mirrorBtn.active {
    border-color: #9c27b0;
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.4), rgba(233, 30, 99, 0.4));
    color: #fff;
    box-shadow: 0 0 10px rgba(156, 39, 176, 0.4);
}

.decorColorPicker {
    width: 100%;
    height: 32px;
}

.decorColorPicker::-webkit-color-swatch {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

/* Decoration Slot Sub-Navigation */
.decorSlotNav {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 4px;
}

.decorSlotBtn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.decorSlotBtn:hover {
    color: #aaa;
    background: rgba(156, 39, 176, 0.1);
}

.decorSlotBtn.active {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.4), rgba(233, 30, 99, 0.4));
    color: #fff;
    box-shadow: 0 2px 6px rgba(156, 39, 176, 0.3);
}

/* Indicate slot has decoration */
.decorSlotBtn.hasDecoration::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: #4CAF50;
    border-radius: 50%;
}

/* Responsive */
@media (max-width: 400px) {
    .characterCreatorModalContent {
        min-width: auto;
        margin: 12px;
        padding: 16px;
    }

    .tabBtn {
        padding: 8px 6px;
        font-size: 11px;
    }

    .eyeShapeBtn {
        max-width: 40px;
    }

    .pupilShadeGrid {
        grid-template-columns: repeat(5, 1fr);
    }

    .checkboxRow {
        flex-direction: column;
        gap: 8px;
    }

    .characterCreatorActions {
        flex-direction: column;
    }
}

/* ============================================
   PHASE 3: MOBILE TOUCH OPTIMIZATION
   ============================================ */

/* Mobile landscape adjustments for character creator */
@media screen and (max-width: 1024px) and (orientation: landscape) {
    .characterCreatorModalContent {
        min-width: auto;
        max-width: 90vw;
        max-height: 95vh;
        padding: 16px;
        display: flex;
        flex-direction: column;
    }

    .characterCreatorModalHeader {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .characterCreatorModalHeader h3 {
        font-size: 18px;
    }

    /* Close button needs to be easily tappable */
    .characterCreatorModal .modalCloseBtn {
        min-width: 44px;
        min-height: 44px;
        font-size: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Tab navigation - touch-friendly */
    .tabNavigation {
        gap: 2px;
        padding: 3px;
    }

    .tabBtn {
        min-height: 44px;
        padding: 10px 8px;
        font-size: 12px;
    }

    /* Tab content area - scrollable with constrained height */
    .tabContent {
        min-height: 150px;
        max-height: 200px;
        overflow-y: auto;
    }

    /* Control groups - more compact */
    .controlGroup {
        padding: 10px;
    }

    .controlLabel {
        font-size: 11px;
        margin-bottom: 6px;
    }

    /* Eye shape buttons - touch-friendly grid */
    .eyeShapeGrid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .eyeShapeBtn {
        min-width: 44px;
        min-height: 44px;
        max-width: none;
    }

    /* Decoration grid - touch-friendly */
    .decorationGrid {
        gap: 6px;
    }

    .decorationBtn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Pupil shade buttons - touch-friendly */
    .pupilShadeGrid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }

    .pupilShadeBtn {
        min-width: 36px;
        min-height: 36px;
    }

    /* Color pickers - larger for touch */
    .colorPicker {
        width: 44px;
        height: 36px;
    }

    .colorPicker.colorPickerLarge {
        width: 64px;
        height: 44px;
    }

    /* Checkboxes - larger for touch */
    .mirrorCheckbox {
        width: 22px;
        height: 22px;
    }

    .checkboxLabel {
        font-size: 12px;
    }

    /* Sliders - larger thumb for touch */
    .sizeRange::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }

    /* Action buttons - touch-friendly */
    .characterCreatorActions {
        gap: 6px;
        margin-top: 12px;
        padding-top: 12px;
    }

    .actionBtn {
        min-height: 44px;
        padding: 10px 12px;
        font-size: 11px;
    }

    /* Decoration transform section */
    .mirrorBtn {
        min-height: 44px;
        padding: 10px 10px;
        font-size: 10px;
    }

    /* Decoration slot navigation */
    .decorSlotNav {
        gap: 2px;
        padding: 3px;
    }

    .decorSlotBtn {
        min-height: 40px;
        padding: 10px 4px;
        font-size: 11px;
    }
}

/* Extra small mobile screens */
@media screen and (max-width: 700px) and (orientation: landscape) {
    .characterCreatorModalContent {
        max-width: 95vw;
        padding: 12px;
    }

    .characterCreatorModalHeader h3 {
        font-size: 16px;
    }

    .tabBtn {
        font-size: 10px;
        padding: 8px 4px;
    }

    .tabContent {
        max-height: 160px;
    }

    .eyeShapeGrid {
        grid-template-columns: repeat(4, 1fr);
    }

    .pupilShadeGrid {
        grid-template-columns: repeat(5, 1fr);
    }

    .characterCreatorActions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .actionBtn {
        flex: 1 1 45%;
        font-size: 10px;
    }
}

/**
 * Password Portal Modal Styles - Phase 4
 *
 * Follows existing modal styling patterns from the codebase.
 * Assumes .modal and .modal-content base classes exist.
 */

/* Modal content specific styling */
.password-portal-modal-content {
    max-width: 400px;
    padding: 24px;
    text-align: center;
}

/* Portal title (name) */
.password-portal-title {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    color: #fff;
}

/* Display text (e.g., "Releases july 1st") */
.password-portal-display-text {
    margin: 0 0 20px 0;
    color: #aaa;
    font-size: 0.95rem;
}

/* Form styling */
.password-portal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.password-portal-form .form-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.password-portal-form label {
    color: #ccc;
    font-size: 0.9rem;
}

/* Password input field */
.password-portal-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    border: 2px solid #444;
    border-radius: 6px;
    background-color: #2a2a2a;
    color: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.password-portal-input:focus {
    outline: none;
    border-color: #6c5ce7;
}

.password-portal-input::-moz-placeholder {
    color: #666;
}

.password-portal-input::placeholder {
    color: #666;
}

.password-portal-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Error message */
.password-portal-error {
    color: #ff6b6b;
    font-size: 0.85rem;
    text-align: left;
}

/* Form action buttons */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

/* Loading indicator */
.password-portal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #aaa;
    font-size: 0.9rem;
}

/* Spinner animation */
.loading-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #444;
    border-top-color: #6c5ce7;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Button base styles (if not already globally defined) */
.password-portal-modal-content .btn-primary {
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background-color: #6c5ce7;
    color: #fff;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.password-portal-modal-content .btn-primary:hover {
    background-color: #5b4cdb;
}

.password-portal-modal-content .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.password-portal-modal-content .btn-secondary {
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border: 2px solid #444;
    border-radius: 6px;
    cursor: pointer;
    background-color: transparent;
    color: #ccc;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.password-portal-modal-content .btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #666;
}

/* Close button (X) */
.password-portal-modal-content .btn-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: #888;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.password-portal-modal-content .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#div_homepageBackgroundImageContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

  #div_homepageBackgroundImageContainer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
  }

  #div_homepageBackgroundImageContainer img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }

  @media screen and (max-aspect-ratio: 1/1) {
    #div_homepageBackgroundImageContainer img {
      width: 100%;
      height: auto;
      min-height: 100dvh;
    }
  }
/*
#div_bottomRightLinks {
    position: absolute; 
    right: 40px; 
    bottom: 40px;
}
*/
#div_bottomRightCreditsToggle {
    margin-left: 20px;
}

#div_bottomRightCreditsToggle,
#div_bottomRightLegalToggle {
    display: inline-block;
}
#div_changelogMenuWindow {
    display: none;
}

.changelog-header-image {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 8px;
}
#div_creditsMainMenuWindow {
    display: none
}

.credits-header-image {
    width: 100%;
    max-width: 400px;
    display: block;
    margin: 0 auto 20px auto;
    border-radius: 8px;
}
#div_legalPoliciesMenuWindow {
    display: none
}

.legal-header-image {
    width: 80px;
    display: block;
    margin: 0 auto 15px auto;
}
#alert-dialogue {
    display: none;
}

#join-options {
    display: none;
    max-width: 450px; /* Set the maximum width to match the image width */
    margin: 0 auto; /* Center the container horizontally */
}

.brand img {
    max-width: 100%; /* Add this line to make the image responsive */
    height: auto; /* Add this line to maintain the aspect ratio */
}

.brand .game-title {
    font-family: 'Cinzel', 'Times New Roman', serif;
    font-size: 5rem !important;
    font-weight: 700;
    margin: 0 0 24px 0;
    letter-spacing: 8px;
    background: linear-gradient(to right, #5dade2 48%, white 48%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
}

.brand .game-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #58d68d, #f7dc6f, #ff6b6b);
}

/* ============================================
   MOBILE LANDSCAPE - Scale down entire menu
   ============================================ */
@media screen and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {
    #sec_homepageMiddleCenter .menu {
        transform: scale(0.65);
        transform-origin: center center;
    }
}

/* Extra small landscape screens (very short height) */
@media screen and (max-height: 400px) and (orientation: landscape) and (pointer: coarse) {
    #sec_homepageMiddleCenter .menu {
        transform: scale(0.55);
        transform-origin: center center;
    }
}
#div_roadmapMenuWindow {
    display: none;
}
/*
#div_topRightLinks {
    position: absolute; 
    right: 40px; 
    top: 40px;
}
*/

#div_changelogToggle {
    margin-left: 20px;
}

#div_changelogToggle,
#div_roadmapToggle {
    display: inline-block;
}
/* ==========================================
   WEBSITE MODE STYLES (Phase 1)
   ========================================== */

/* ==========================================
   1. SCROLL INDICATOR
   ========================================== */

.scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: rgba(255, 255, 255, 0.7);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.scroll-indicator span {
    font-size: 14px;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.scroll-indicator svg {
    width: 24px;
    height: 24px;
}

.scroll-indicator.opacity-0 {
    opacity: 0;
}

/* ==========================================
   2. LAZY IMAGE LOADING
   ========================================== */

.lazy-image {
    opacity: 0;
    transition: opacity 0.4s ease;
    background-color: #1a1a1a;
}

.lazy-image.loaded {
    opacity: 1;
}

/* ==========================================
   3. WEBSITE CONTENT SECTIONS
   ========================================== */

#sec_websiteContent {
    position: relative;
    z-index: 1;
}

/* Hero Section */
.website-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(180deg, #121212 0%, #1a1a2e 100%);
}

.website-hero h1 {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: bold;
    color: #FFD700;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    margin-bottom: 20px;
}

.website-hero .tagline {
    font-size: clamp(1.2rem, 3vw, 1.75rem);
    color: #e0e0e0;
    max-width: 800px;
    margin: 0 auto 16px;
}

.website-hero .description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #a0a0a0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ==========================================
   4. FEATURE CARDS
   ========================================== */

.feature-card {
    background-color: #1a1a1a;
    border-radius: 12px;
    padding: 24px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.feature-card img {
    width: 100%;
    height: 180px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 8px;
    margin-bottom: 16px;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #FFD700;
    margin-bottom: 8px;
}

.feature-card p {
    color: #b0b0b0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ==========================================
   5. CHARACTER CARDS
   ========================================== */

.character-card {
    text-align: center;
    transition: transform 0.3s ease;
}

.character-card:hover {
    transform: scale(1.08);
}

.character-card img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
    -o-object-fit: contain;
       object-fit: contain;
}

.character-card h3 {
    font-size: 1.125rem;
    font-weight: bold;
    color: #FFD700;
    margin-top: 12px;
}

.character-card p {
    color: #888;
    font-size: 0.875rem;
    margin-top: 4px;
}

/* ==========================================
   6. SECTION BACKGROUNDS
   ========================================== */

.section-dark {
    background-color: #121212;
}

.section-gray {
    background-color: #1e1e1e;
}

/* ==========================================
   7. CTA BUTTON
   ========================================== */

.cta-button {
    display: inline-block;
    background-color: #22c55e;
    color: white;
    font-weight: bold;
    font-size: 1.25rem;
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.cta-button:hover {
    background-color: #16a34a;
    transform: scale(1.05);
}

.cta-button:active {
    transform: scale(0.98);
}

/* ==========================================
   8. FOOTER
   ========================================== */

.website-footer {
    background-color: #0a0a0a;
    border-top: 1px solid #333;
    padding: 40px 20px;
}

.website-footer a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}

.website-footer a:hover {
    color: #FFD700;
}

/* ==========================================
   9. RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 768px) {
    .website-hero {
        padding: 40px 16px;
    }

    .feature-card {
        padding: 16px;
    }

    .feature-card img {
        height: 140px;
    }

    .character-card img {
        width: 80px;
        height: 80px;
    }
}

/* ==========================================
   10. ANIMATION - Bounce for scroll indicator
   ========================================== */

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-12px);
    }
    60% {
        transform: translateX(-50%) translateY(-6px);
    }
}

.animate-bounce {
    animation: bounce 2s infinite;
}

/* ==========================================
   11. SMOOTH SCROLLING
   ========================================== */

html {
    scroll-behavior: smooth;
}

/* Ensure homepage is full viewport height */
#sec_homepage {
    min-height: 100vh;
}

/* Hidden utility class */
.hidden {
    display: none !important;
}

/* ==========================================
   12. CONTAINER UTILITY
   ========================================== */

.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   13. GRID UTILITIES
   ========================================== */

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.gap-8 {
    gap: 2rem;
}

.gap-6 {
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .md\:flex-row {
        flex-direction: row;
    }

    .md\:mb-0 {
        margin-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================
   14. SPACING UTILITIES
   ========================================== */

.py-20 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.py-10 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.mb-16 {
    margin-bottom: 4rem;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================
   15. TEXT UTILITIES
   ========================================== */

.text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-center {
    text-align: center;
}

.text-white {
    color: #ffffff;
}

.text-gray-300 {
    color: #d1d5db;
}

.text-gray-400 {
    color: #9ca3af;
}

.text-gray-500 {
    color: #6b7280;
}

.text-nomo-gold {
    color: #FFD700;
}

.font-bold {
    font-weight: 700;
}

/* ==========================================
   16. FLEX UTILITIES
   ========================================== */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.justify-between {
    justify-content: space-between;
}

.items-center {
    align-items: center;
}

.space-x-6 > * + * {
    margin-left: 1.5rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

/* ==========================================
   17. MAX WIDTH UTILITIES
   ========================================== */

.max-w-4xl {
    max-width: 56rem;
}

.max-w-6xl {
    max-width: 72rem;
}

/* ==========================================
   WEBSITE MODE STYLES - Phase 2
   ========================================== */

/* Scroll Indicator - Fixed position at bottom of viewport */
.scroll-indicator {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    animation: bounce 2s infinite;
}

/* Lazy Image Loading States */
.lazy-image {
    background-color: #1a1a1a;
}

.lazy-image.loaded {
    opacity: 1 !important;
}

/* Smooth scrolling for website mode */
#sec_websiteContent {
    scroll-behavior: smooth;
}

/* Container max-width for consistency */
#sec_websiteContent .container {
    max-width: 1200px;
}

/* Feature card image placeholder */
.feature-card img {
    min-height: 192px; /* h-48 equivalent */
}

/* Character card consistent sizing */
.character-card img {
    min-height: 96px; /* Minimum height for mobile */
}

@media (min-width: 768px) {
    .character-card img {
        min-height: 128px; /* md:h-32 equivalent */
    }
}

/* CTA button pulse effect on hover */
#btn_scrollToPlay:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Footer link underline on hover */
#sec_footer a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Accessibility: Focus states */
#sec_websiteContent button:focus,
#sec_websiteContent a:focus {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scroll-indicator,
    #btn_scrollToPlay:hover,
    .feature-card,
    .character-card,
    .lazy-image {
        animation: none !important;
        transition: none !important;
    }
}

#div_mapEditorAssets {
    background-color: #121212;
    position: absolute;
    top: 60px;
}

#div_parentMapEditorAssetsPreviewImages {
    background-color: #121212;
    height: calc(100vh - 60px);
    width: 300px;
    overflow-y: auto;
} 

#div_mapEditorAssetsPreviewImages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-items: center;
    gap: 10px;
}

#div_mapEditorAssetsPreviewImages img {
    max-width: 100%;
    height: auto;
}
#div_mapEditorInspector {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px;
    top: 0px;
}
#div_mapEditorSelectMode {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px; 
    display: none;
}
#img_semiOpaqueMousePlacementPreview {
  visibility: hidden;
  position: absolute;
  opacity: 0.5;
  pointer-events: none;
}
#div_mapEditorSettingsMode {
    background-color: #121212; 
    position: absolute; 
    height: 100vh; 
    overflow-y: auto; 
    right: 0px; 
    display: none;
}
/* Items Creator Toggle Button */
.items-creator-toggle-btn {
    position: fixed;
    right: 20px;
    top: 164px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    z-index: 1499;
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.items-creator-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(156, 39, 176, 0.6);
}

.items-creator-toggle-btn.hidden {
    display: none;
}

.items-creator-toggle-btn.active {
    background: linear-gradient(135deg, #ce93d8 0%, #9c27b0 100%);
    box-shadow: 0 4px 12px rgba(156, 39, 176, 0.7);
}

#div_mapEditorItemsMode {
    background-color: #121212;
    position: absolute;
    height: 100vh;
    overflow-y: auto;
    right: 0px;
    top: 0px;
    display: none;
    min-width: 320px;
    max-width: 400px;
    padding: 8px;
    color: #ccc;
    font-family: monospace;
    font-size: 12px;
}

/* Item list panel */
.items-creator-list {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 8px;
    max-height: 300px;
    overflow-y: auto;
}

/* Individual item entry in list */
.items-creator-entry {
    padding: 4px 8px;
    cursor: pointer;
    border-left: 3px solid transparent;
    margin-bottom: 2px;
    border-radius: 2px;
    transition: background-color 0.1s;
}

.items-creator-entry:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.items-creator-entry.selected {
    background-color: rgba(255, 255, 255, 0.15);
    outline: 1px solid rgba(255, 255, 255, 0.3);
}

/* Section headers */
.items-creator-section-header {
    font-weight: bold;
    color: #fff;
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 2px 0;
    border-bottom: 1px solid #333;
}

/* Form row */
.items-creator-row {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.items-creator-row label {
    min-width: 80px;
    color: #999;
}

.items-creator-row input,
.items-creator-row select,
.items-creator-row textarea {
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 2px 4px;
    font-family: monospace;
    font-size: 12px;
}

/* Empty state */
.items-creator-empty {
    color: #666;
    font-style: italic;
    padding: 12px;
    text-align: center;
}

/* Action buttons */
.items-creator-btn {
    padding: 4px 8px;
    margin: 2px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-family: monospace;
    font-size: 11px;
}

.items-creator-btn-primary {
    background-color: #38a;
    color: white;
}

.items-creator-btn-danger {
    background-color: #a33;
    color: white;
}

.items-creator-btn-secondary {
    background-color: #555;
    color: white;
}

/* Item count footer */
.items-creator-footer {
    color: #666;
    font-size: 11px;
    margin-top: 4px;
    padding: 2px 0;
}

/* Validation error */
.items-creator-error {
    color: #f44;
    font-size: 11px;
    margin-top: 2px;
}

/* ──── Stat Modifier Builder (Phase 3) ──── */

/* Stat row: [Stat ▼] [Op ▼] [Value] [X] */
.items-creator-stat-row {
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Stat type dropdown */
.items-creator-stat-select {
    flex: 1;
    min-width: 90px;
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 2px 4px;
    font-family: monospace;
    font-size: 11px;
}

/* Operation dropdown (narrow) */
.items-creator-stat-op {
    width: 44px;
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 2px 2px;
    font-family: monospace;
    font-size: 11px;
    text-align: center;
}

/* Value input */
.items-creator-stat-value {
    width: 60px;
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 2px 4px;
    font-family: monospace;
    font-size: 11px;
    text-align: right;
}

/* Remove spin buttons from number inputs for cleaner look */
.items-creator-stat-value::-webkit-outer-spin-button,
.items-creator-stat-value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Delete button (small red X) */
.items-creator-stat-delete {
    background-color: #a33;
    color: white;
    border: none;
    border-radius: 2px;
    width: 22px;
    height: 22px;
    cursor: pointer;
    font-family: monospace;
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}

.items-creator-stat-delete:hover {
    background-color: #c44;
}

/* Budget warning */
.items-creator-stat-budget {
    color: #fa0;
    font-size: 11px;
    margin-top: 4px;
    padding: 2px 4px;
    background-color: rgba(255, 170, 0, 0.1);
    border-radius: 2px;
}

/* Empty state (no modifiers) */
.items-creator-stat-empty {
    color: #666;
    font-style: italic;
    padding: 8px;
    text-align: center;
    font-size: 11px;
}

/* ──── Item Preview Section (Phase 7) ──── */

.items-creator-preview {
    margin: 8px 0;
    padding: 0;
}

.items-creator-preview-content {
    min-height: 40px;
}

/* ──── Tooltip Renderer Styles ──── */

.item-tooltip {
    background: rgba(10, 10, 20, 0.95);
    border: 2px solid #555;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: monospace;
    font-size: 12px;
    color: #D2B48C;
    max-width: 320px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Header row: name + stars */
.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

.tooltip-name {
    font-weight: bold;
    font-size: 14px;
}

.tooltip-stars {
    font-size: 12px;
    margin-left: 8px;
    flex-shrink: 0;
}

/* Subtitle: slot + tier */
.tooltip-subtitle {
    color: #888;
    font-size: 11px;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Sections with top separator */
.tooltip-section {
    padding: 4px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-section:first-of-type {
    border-top: none;
}

/* Stat modifier lines */
.tooltip-stat {
    font-size: 12px;
    line-height: 1.5;
    padding-left: 2px;
}

/* Stat diff indicators (comparison mode) */
.tooltip-diff {
    font-size: 10px;
    margin-left: 4px;
}

.tooltip-diff-up {
    color: #44ff44;
}

.tooltip-diff-down {
    color: #ff4444;
}

.tooltip-diff-new {
    color: #44ff44;
    font-style: italic;
    font-size: 9px;
}

/* Passive effect lines */
.tooltip-passive {
    color: #ffcc00;
    font-size: 11px;
    line-height: 1.5;
    padding-left: 2px;
}

/* Active ability */
.tooltip-active-name {
    color: #00ccff;
    font-weight: bold;
    font-size: 12px;
}

.tooltip-active-desc {
    color: #00ccff;
    font-size: 11px;
    padding-left: 2px;
    opacity: 0.85;
}

/* Recipe */
.tooltip-recipe {
    color: #888;
    font-size: 11px;
}

.tooltip-recipe-label {
    color: #aaa;
    font-weight: bold;
}

/* Description (flavor text) */
.tooltip-description {
    color: #aaa;
    font-style: italic;
    font-size: 11px;
    line-height: 1.4;
}

/* Footer: properties (unique, stackable, tags) */
.tooltip-footer {
    color: #666;
    font-size: 10px;
    margin-top: 2px;
}

/* Regions Mode Toggle Button — 4th in the right-rail stack (under Items Creator at 164px). */
.regions-mode-toggle-btn {
    position: fixed;
    right: 20px;
    top: 216px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
    border: 2px solid rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 22px;
    z-index: 1499;
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.regions-mode-toggle-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(46, 125, 50, 0.6);
}

.regions-mode-toggle-btn.hidden {
    display: none;
}

.regions-mode-toggle-btn.active {
    background: linear-gradient(135deg, #a5d6a7 0%, #2e7d32 100%);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.7);
}

#div_mapEditorRegionsMode {
    background-color: #121212;
    position: absolute;
    height: 100vh;
    overflow-y: auto;
    right: 0px;
    top: 0px;
    display: none;
    min-width: 320px;
    max-width: 400px;
    padding: 8px;
    color: #ccc;
    font-family: monospace;
    font-size: 12px;
}

#div_mapEditorRegionsMode h4 {
    margin: 0 0 8px 0;
    color: #fff;
}

#div_mapEditorRegionsMode button {
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 4px 8px;
    margin: 2px;
    cursor: pointer;
    font-family: monospace;
    font-size: 12px;
}

#div_mapEditorRegionsMode button:hover {
    background-color: #222;
}

#div_mapEditorRegionsMode input,
#div_mapEditorRegionsMode select {
    background-color: #1a1a1a;
    color: #ccc;
    border: 1px solid #444;
    border-radius: 2px;
    padding: 2px 4px;
    font-family: monospace;
    font-size: 12px;
}

#div_regionsListHost {
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    margin: 4px 0 8px 0;
    max-height: 240px;
    overflow-y: auto;
}

#div_regionsInspectorHost {
    border-top: 1px solid #333;
    margin-top: 8px;
    padding-top: 8px;
}

#sel_mapEditorToggle {
    position: fixed;
    top: 0px;
}
.game-over-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
}

.respawn-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 9999;
}

.menu {
    text-align: center;
    margin: auto;
    /* background-color: #f2f2f2;
    border: 1px solid #ccc; */
}

.menu .brand h1 {
    font-size: 45px;
    color: rgb(223, 118, 114);
}

.menu .input {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#sel_gameServer,
#inp_username {
    margin-bottom: 20px;
}

.menu .input p {
    text-align: left;
    font-size: 14px;
    margin-top: 5px;
    font-weight: bold;
}

.menu .input input {
    outline: none;
    border-radius: 7px;
    border: 5px solid #141414;

    padding: 15px;
    background-color: #323232;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    /* box-shadow: inset 0 -4px 0 0 inset 0 5px 0 #d1c9b0; */
    box-shadow: inset 0 -4px 0 0 #4b4949;
}

.menu .input button {
    display: flex;
    flex-direction: row;
    justify-content: center;

    border-radius: 7px;
    border: grey;
    cursor: pointer;

    padding: 15px;

    background-color: rgb(112, 160, 207);
    color: white;
    box-shadow: inset 0 -4px 0 0 rgb(77, 124, 172);
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    width: 100%;
}

.menu .input .green {
    background-color: rgb(86, 164, 41);
    color: white;
    box-shadow: inset 0 -4px 0 0 rgb(106, 150, 11);
}

.menu .input select {
    outline: none;
    border-radius: 7px;
    border: 5px solid #141414;
    padding: 15px;
    background-color: #323232;
    color: white;
    font-weight: bold;
    text-align: center;
    font-size: 18px;
    box-shadow: inset 0 -4px 0 0 #4b4949;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
}
#btn_discordSocialMediaLink {
    display: flex; 
    align-items: center; 
    background-color: #7289DA; 
    border: 2px solid #7289DA; 
    border-radius: 5px; 
    color: #FFFFFF; 
    cursor: pointer; 
    padding: 10px 20px; 
    font-family: Arial, sans-serif; 
    font-size: 16px; 
    font-weight: bold;
}

#spn_discordSocialMediaLink {
    margin-right: 10px
}

#img_discordSocialMediaLink {
    width: 24px; 
    height: 24px;
}

#div_homepageSocialMediaLinkButtons {
    display: flex;
    justify-content: center;
}
/* Portrait Rotation Overlay - Only visible in portrait orientation on mobile */
.portrait-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #121212 0%, #1a1a2e 50%, #121212 100%);
  z-index: 9999;
  display: none; /* Hidden by default - JS will control visibility */
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*
 * Show overlay ONLY on touch devices (pointer: coarse) in portrait mode.
 * This prevents showing on desktop browsers with small windows.
 * The 'pointer: coarse' media query detects touch screens vs mouse/trackpad.
 */
@media screen and (max-width: 1024px) and (orientation: portrait) and (pointer: coarse) {
  .portrait-overlay {
    display: flex;
  }
}

/* Never show on desktop or devices with fine pointer (mouse), even if window is portrait-shaped */
@media screen and (min-width: 1025px), (pointer: fine) {
  .portrait-overlay {
    display: none !important;
  }
}

.portrait-overlay-content {
  text-align: center;
  color: white;
  padding: 20px;
}

/* Phone rotation animation container */
.phone-rotate-animation {
  position: relative;
  width: 120px;
  height: 180px;
  margin: 0 auto 30px;
}

.phone-icon {
  width: 100%;
  height: 100%;
  color: #FFD700;
  animation: rotatePhone 2.5s ease-in-out infinite;
  transform-origin: center center;
}

/* Rotation arrow */
.rotate-arrow {
  position: absolute;
  top: 50%;
  right: -40px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  color: #4a9eff;
  animation: pulseArrow 2.5s ease-in-out infinite;
}

.rotate-arrow svg {
  width: 100%;
  height: 100%;
}

/* Phone rotation keyframes */
@keyframes rotatePhone {
  0%, 20% {
    transform: rotate(0deg);
  }
  40%, 60% {
    transform: rotate(-90deg);
  }
  80%, 100% {
    transform: rotate(0deg);
  }
}

@keyframes pulseArrow {
  0%, 20% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  40%, 60% {
    opacity: 0.3;
    transform: translateY(-50%) scale(0.8);
  }
  80%, 100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
}

.portrait-title {
  font-size: 28px;
  font-weight: bold;
  color: #FFD700;
  margin: 0 0 12px 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.portrait-subtitle {
  font-size: 16px;
  color: #aaa;
  margin: 0;
}

/* Add subtle background animation */
.portrait-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.1) 0%, transparent 50%);
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ============================================================================
 * ACHIEVEMENT STYLES
 *
 * Phase 4: Toast notification (slide-down, gold/dark theme)
 * Phase 5: Panel overlay + achievement items (pre-included, unused until Phase 5)
 * ============================================================================ */

/* ── Toast Container ── */
#achievement-toast-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    pointer-events: none;
    z-index: 99999;
}

/* ── Toast Notification ── */
.achievement-toast {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    width: 350px;
    background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
    border: 2px solid #f6e05e;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.2s ease,
                box-shadow 0.2s ease,
                border-color 0.2s ease;
    cursor: pointer;
    z-index: 99999;
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

.achievement-toast:hover {
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.6);
    border-color: #fbbf24;
}

.achievement-toast__icon {
    font-size: 32px;
    animation: achievement-pulse 2s infinite;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.achievement-toast__content {
    flex: 1;
    min-width: 0;
}

.achievement-toast__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #f6e05e;
    font-weight: 600;
}

.achievement-toast__name {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-top: 2px;
}

.achievement-toast__desc {
    font-size: 12px;
    color: #cbd5e0;
    margin-top: 2px;
}

.achievement-toast__points {
    font-size: 14px;
    font-weight: 700;
    color: #f6e05e;
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
}

@keyframes achievement-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* ── Responsive: smaller toasts on mobile ── */
@media (max-width: 480px) {
    .achievement-toast {
        width: 300px;
        padding: 12px;
        gap: 8px;
    }

    .achievement-toast__icon {
        font-size: 24px;
        width: 32px;
    }

    .achievement-toast__name {
        font-size: 14px;
    }

    .achievement-toast__desc {
        font-size: 11px;
    }
}

/* ============================================================================
 * PHASE 5 STYLES (pre-included — unused until Phase 5 implementation)
 * ============================================================================ */

/* ── Panel Overlay ── */
.achievement-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-panel {
    background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
    border: 2px solid #f6e05e;
    border-radius: 16px;
    padding: 24px;
    width: 420px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.achievement-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.achievement-panel__title {
    font-size: 20px;
    font-weight: 700;
    color: #f6e05e;
}

.achievement-panel__counter {
    font-size: 14px;
    color: #a0aec0;
}

.achievement-panel__list {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Custom scrollbar */
.achievement-panel__list::-webkit-scrollbar { width: 6px; }
.achievement-panel__list::-webkit-scrollbar-track { background: rgba(255,255,255,0.1); border-radius: 3px; }
.achievement-panel__list::-webkit-scrollbar-thumb { background: rgba(246,224,94,0.5); border-radius: 3px; }
.achievement-panel__list::-webkit-scrollbar-thumb:hover { background: rgba(246,224,94,0.7); }

/* ── Achievement Item ── */
.achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.achievement-item:hover {
    transform: translateY(-2px);
}

.achievement-item--unlocked {
    background: rgba(246,224,94,0.1);
    border-color: rgba(246,224,94,0.3);
}

.achievement-item--unlocked:hover {
    background: rgba(246,224,94,0.15);
}

.achievement-item--locked .achievement-item__name {
    color: #a0aec0;
}

.achievement-item--locked .achievement-item__desc {
    color: #718096;
}

.achievement-item__icon {
    font-size: 28px;
    flex-shrink: 0;
    width: 40px;
    text-align: center;
}

.achievement-item__name {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

.achievement-item__desc {
    font-size: 12px;
    color: #cbd5e0;
    margin-top: 2px;
}

.achievement-item__time {
    font-size: 11px;
    color: #f6e05e;
    margin-top: 4px;
}

.achievement-item__points {
    margin-left: auto;
    font-size: 13px;
    font-weight: 600;
    color: #f6e05e;
    flex-shrink: 0;
}

/* ============================================================================
 * Phase 5: HUD Button & Category Tabs
 * ============================================================================ */

/* ── HUD Button ──
   The 🏆 button is the 4th icon in the top-left HUD cluster
   (#div_topLeftHudButtons) and reuses the shared glass `.hud-btn` style — see
   itemsCanBuildAndCraft.html. Only its unlock-count badge is styled here, to
   match the green count badge on the Upgrades button (.upgrade-points-badge). */
.achievements-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #2ecc71;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.achievements-count-badge.hidden {
    display: none;
}

/* ── Category Filter Tabs ── */
.achievement-tabs {
    display: flex;
    gap: 4px;
    padding: 0 0 8px 0;
    border-bottom: 1px solid rgba(246, 224, 94, 0.2);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.achievement-tab {
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.05);
    color: #a0aec0;
    font-size: 11px;
    font-weight: 600;
    font-family: monospace;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

.achievement-tab:hover {
    background: rgba(246, 224, 94, 0.15);
    color: #f6e05e;
    border-color: rgba(246, 224, 94, 0.3);
}

.achievement-tab--active {
    background: rgba(246, 224, 94, 0.2);
    color: #f6e05e;
    border-color: #f6e05e;
}

/* ── Counter Row ── */
.achievement-counter-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0 8px 0;
    font-family: monospace;
}

.achievement-counter-row__unlocked {
    font-size: 13px;
    font-weight: 600;
    color: #f6e05e;
}

.achievement-counter-row__points {
    font-size: 12px;
    color: #a0aec0;
}

/* ── Progress Bar (for partially completed achievements) ── */
.achievement-item__progress {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}

.achievement-item__progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #f6e05e, #d69e2e);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================================================================
 * Phase 6: Gold Particle Burst & Sound Polish
 * ============================================================================ */

/* ── Gold Particle Burst on Toast Icon ──
 *
 * CSS-only particle effect using ::before pseudo-element with box-shadow.
 * 8 gold "particles" expand outward from the icon center and fade out.
 * Triggers when the toast slides into view via JS-added --burst class.
 *
 * Animation timeline:
 *   t=0ms:    Toast created (off-screen, no particles)
 *   t=100ms:  Toast slides in (top changes via JS)
 *   t=250ms:  Particle burst begins (150ms delay after slide-in starts)
 *   t=850ms:  Particle burst ends (600ms duration)
 */

.achievement-toast__icon {
    position: relative;
    overflow: visible;
}

.achievement-toast__icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    box-shadow:
        /* Cardinal directions (4 particles) */
         0   -14px 0 0 rgba(246, 224, 94, 0.8),
         0    14px 0 0 rgba(246, 224, 94, 0.8),
        -14px  0   0 0 rgba(246, 224, 94, 0.8),
         14px  0   0 0 rgba(246, 224, 94, 0.8),
        /* Diagonal directions (4 particles) */
        -10px -10px 0 0 rgba(246, 224, 94, 0.5),
         10px -10px 0 0 rgba(246, 224, 94, 0.5),
        -10px  10px 0 0 rgba(246, 224, 94, 0.5),
         10px  10px 0 0 rgba(246, 224, 94, 0.5);
}

/* Particle animation starts paused — JS triggers via --burst class */
.achievement-toast {
    --toast-burst-state: paused;
}

.achievement-toast__icon::before {
    animation: achievement-particle-burst 0.6s ease-out 0.15s both;
    animation-play-state: var(--toast-burst-state);
}

/* JS adds this class when toast slides in */
.achievement-toast--burst .achievement-toast__icon::before {
    animation-play-state: running;
}

@keyframes achievement-particle-burst {
    0% {
        opacity: 1;
        transform: scale(0.2);
    }
    40% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}

/* Account auth UI — homepage login/register modal + account bar.
   Matches the dark + gold main-menu window styling (.toggleWindowMainMenu). */

/* ── Homepage account bar (under the Play button) ───────────────────────── */

#account-bar {
    margin-top: 10px;
    text-align: center;
    font-size: 14px;
    color: #e8e8e8;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.account-link {
    background: none;
    border: none;
    color: #ffd700;
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    padding: 2px 4px;
}

.account-link:hover {
    color: #fff3b0;
}

/* #account-status is a <span> (inline by default) — no display rule here, so the
   global `.hidden` utility can toggle it without being outspecified by an id. */

#span_accountEmail {
    font-weight: 600;
    color: #fff;
}

/* ── Modal ──────────────────────────────────────────────────────────────── */

.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
}

.auth-modal-overlay.hidden {
    display: none;
}

.auth-modal-card {
    position: relative;
    width: 92%;
    max-width: 360px;
    padding: 26px 24px 22px;
    background: rgba(10, 12, 18, 0.96);
    border: 3px solid #ffd700;
    border-radius: 12px;
    box-shadow: 0 0 24px rgba(255, 215, 0, 0.35);
    color: #f2f2f2;
    font-family: inherit;
}

.auth-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: none;
    border: none;
    color: #ffd700;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.auth-modal-close:hover {
    color: #fff;
}

.auth-title {
    margin: 0 0 14px;
    text-align: center;
    font-size: 22px;
    color: #ffd700;
}

.auth-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
}

.auth-tab {
    flex: 1;
    padding: 8px 0;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 8px;
    color: #d8d8d8;
    cursor: pointer;
    font: inherit;
}

.auth-tab.active {
    background: rgba(255, 215, 0, 0.16);
    color: #fff;
    border-color: #ffd700;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.auth-input {
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    font: inherit;
}

.auth-input::-moz-placeholder {
    color: #9a9a9a;
}

.auth-input::placeholder {
    color: #9a9a9a;
}

.auth-input:focus {
    outline: none;
    border-color: #ffd700;
}

.auth-submit {
    margin-top: 4px;
    padding: 11px 0;
    border: none;
    border-radius: 8px;
    background: rgb(86, 164, 41);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.auth-submit:hover {
    filter: brightness(1.08);
}

.auth-submit:disabled,
.auth-submit.busy {
    opacity: 0.6;
    cursor: default;
}

.auth-error {
    margin: 6px 0 0;
    text-align: center;
    font-size: 14px;
    color: #ff6b6b;
}

.auth-error.auth-info {
    color: #7ee787;
}

.auth-verify {
    text-align: center;
}

.auth-verify-msg {
    font-size: 15px;
    line-height: 1.4;
    margin: 4px 0 14px;
}

.auth-dev-note {
    font-size: 12px;
    color: #9a9a9a;
    margin: 0 0 8px;
}

.auth-dev-verify .auth-submit {
    width: 100%;
    background: rgba(255, 215, 0, 0.2);
    border: 1px solid #ffd700;
    color: #ffd700;
}
/* Relies on the app's existing global `.hidden { display:none }` utility. */