@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;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.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));
}
.resize {
  resize: both;
}
.rounded {
  border-radius: 0.25rem;
}
.border {
  border-width: 1px;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.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);
}
.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;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    -webkit-touch-callout: none;
  }

/* NomoStory custom component classes */

/* Mobile touch-friendly utilities */

.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;
}
* {
    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;
    }
}

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"],
  .abilitySlot {
    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;
  }
}
.craftable-buildable-img {
    border: 1px solid black;
    /* Set width and height to 100x100px */
    width: 100px;
    height: 100px;
    /* Keep aspect ratio */
    -o-object-fit: contain;
       object-fit: contain;
    /* Align images top left to right */
    float: left;
    /* Add spacing between images */
    margin: 5px;
}
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: Ability hotbar === */
  #div_bottomCenter {
    grid-area: bottomCenter;
  }

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

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

  /* Hide keybind hints on mobile (no keyboard) */
  .slotKeybind {
    display: none;
  }

  /* === 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,
  #div_itemsCanBuildAndCraft {
    display: none !important;
  }

  /* === Character name / level bar === */
  #p_currentCharacterName {
    font-size: 11px;
    padding: 0 6px;
  }

  #div_levelUpBarBack,
  #div_levelUpBarFront {
    height: 8px;
  }

  #p_levelText {
    font-size: 10px;
  }

  /* === 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_abilityHotbar {
    gap: 8px !important;
  }

  .abilitySlot {
    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_abilityHotbar {
    bottom: 10px !important;
    gap: 6px !important;
  }

  .abilitySlot {
    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);
    --level-up-bar-height: calc(1.5vw + 10px);
    --level-up-bar-max-height: 40px;
}

/* 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;
}
*/

#p_currentCharacterName {
    background-color: #333;
    color: white;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: calc(5px + var(--level-up-bar-height));
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0 10px;
    white-space: nowrap;
    font-size: calc(1vw + 8px);
}

#div_levelUpBarBack {
    background-color: #222;
    color: white;
    width: 20%;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: 5px;
    left: 40%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#div_levelUpBarFront {
    background-color: #132857;
    color: white;
    width: 0%;
    height: var(--level-up-bar-height);
    max-height: var(--level-up-bar-max-height);
    position: absolute;
    bottom: 5px;
    left: 40%;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#p_levelText {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    pointer-events: none;
    text-align: center;
    font-size: calc(1vw + 8px);
    white-space: nowrap;
}
#btn_recipes {
    background-color: rgb(89, 60, 10) 
}

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

#div_bottomRightSection {
    position: relative;   
}

#div_btnRecipes {
    text-align: center
}

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

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

#div_minimapContainer {
    position: fixed;
    bottom: 0;
    right: 0;
    z-index: 1000; /* Ensures it's above other elements */
}

#img_minimap {
    width: 10vw; 
    -webkit-user-select: none; 
       -moz-user-select: none; 
            user-select: none; 
    pointer-events: none;
}

#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;
}
#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);
    width: 300px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

#lbl_musicVolume,
#lbl_soundVolume,
#rng_musicVolume,
#rng_soundVolume {
    display: inline-block; 
    vertical-align: middle;
}
#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;
    bottom: 0;
    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);
    }
  }
#div_containerLeaderboard {
    position: fixed;
    top: calc(8vw);
    right: 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

#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;
    }
}
/* ============================================
   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 {
    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;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    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);
}

/* 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;
}

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

#img_soundToggle,
#img_settingsIcon,
#img_fullscreenToggle {
    display: none !important;
}
#div_topLeftPlatformSelector {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    display: flex;
    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;
}
/* 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 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);
    }
}

/* 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 and errors */
.create-platform-hint {
    display: block;
    color: #666;
    font-family: Arial, sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

.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;
}

.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;
}

/* 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;
}

.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 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);
}

/* Phase 4.1: Ability Hotbar Styling */

#div_abilityHotbar {
    position: fixed !important;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 25px !important;
    z-index: 1000;
    width: auto !important;
}

.abilitySlot {
    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);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Visual states */
.abilitySlot.ready {
    border-color: #4CAF50; /* Green = ready */
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.5);
}

.abilitySlot.recharging {
    border-color: #888; /* Gray = recharging */
}

.abilitySlot.using {
    border-color: #FFC107; /* Yellow = active */
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.8);
}

.abilitySlot.empty {
    opacity: 0.3;
    border-color: #222;
}

/* Ability icon */
.abilityIcon {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}

/* Cooldown overlay */
.cooldownOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%; /* Will be animated via JavaScript */
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
    transition: height 0.1s linear; /* Smooth animation */
}

/* Keybinding label */
.slotKeybind {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
    z-index: 10;
    pointer-events: none;
}

/* Cooldown timer text */
.cooldownText {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-size: 18px;
    font-weight: bold;
    color: #FFC107;
    text-shadow: 1px 1px 2px black;
    display: none; /* Only show when recharging */
    pointer-events: none;
}

.abilitySlot.recharging .cooldownText {
    display: block;
}

/* Hover effect (for mouse users) */
.abilitySlot:hover:not(.empty) {
    border-color: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.4);
}

/* Click/active effect */
.abilitySlot:active:not(.empty) {
    transform: scale(0.95);
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.8);
}

/* Phase 4.5: Activation flash animation */
@keyframes abilityActivate {
    0% { box-shadow: 0 0 0 rgba(255, 193, 7, 0); }
    50% { box-shadow: 0 0 20px rgba(255, 193, 7, 1); }
    100% { box-shadow: 0 0 8px rgba(255, 193, 7, 0.5); }
}

.abilitySlot.using {
    animation: abilityActivate 0.3s ease-out;
}

/* Phase 4.5: Tooltips */
.abilityTooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #444;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2000;
}

.abilitySlot:hover .abilityTooltip {
    opacity: 1;
}

.abilitySlot:focus .abilityTooltip {
    opacity: 1;
}

.tooltipName {
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 4px;
}

.tooltipCooldown {
    display: block;
    font-size: 12px;
    color: #aaa;
}

/* Phase 4.5: Keyboard focus indicator */
.abilitySlot:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

.abilitySlot:focus:not(:focus-visible) {
    outline: none;
}

.abilitySlot:focus-visible {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

/* Phase 4.5: Responsive design for different screen sizes */
@media (max-width: 1280px) {
    #div_abilityHotbar {
        bottom: 60px;
        gap: 40px;
    }

    .abilitySlot {
        width: 80px;
        height: 80px;
    }

    .slotKeybind {
        font-size: 14px;
    }

    .cooldownText {
        font-size: 16px;
    }

    .tooltipName {
        font-size: 13px;
    }

    .tooltipCooldown {
        font-size: 11px;
    }
}

@media (max-width: 768px) {
    #div_abilityHotbar {
        bottom: 40px;
        gap: 30px;
    }

    .abilitySlot {
        width: 64px;
        height: 64px;
    }

    .slotKeybind {
        font-size: 12px;
        top: 2px;
        left: 4px;
    }

    .cooldownText {
        font-size: 14px;
        bottom: 4px;
        right: 4px;
    }

    .tooltipName {
        font-size: 12px;
    }

    .tooltipCooldown {
        font-size: 10px;
    }

    .abilityTooltip {
        padding: 6px 10px;
    }
}

/* Phase 4.5: High DPI displays (4K, etc.) */
@media (min-width: 2560px) {
    #div_abilityHotbar {
        bottom: 100px;
        gap: 60px;
    }

    .abilitySlot {
        width: 120px;
        height: 120px;
        border-width: 4px;
    }

    .slotKeybind {
        font-size: 20px;
        top: 6px;
        left: 8px;
    }

    .cooldownText {
        font-size: 22px;
        bottom: 8px;
        right: 8px;
    }

    .tooltipName {
        font-size: 16px;
    }

    .tooltipCooldown {
        font-size: 14px;
    }

    .abilityTooltip {
        padding: 10px 16px;
        margin-bottom: 12px;
    }
}

/* Character Selector Button */
#div_characterSelectorButton {
    position: fixed;
    bottom: 200px;
    left: 20px;
    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;
    }
}

#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;
}
#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;
}
#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); }
}