body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Align items vertically */
    background-color: #111b2e; /* Dark navy background */
    font-family: Arial, Helvetica, sans-serif;
}

/* Covers the first paint while the menu artwork is prepared underneath. */
html.start-menu-pending::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: block;
    background: #000000;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

html.start-menu-pending.start-menu-revealing::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--start-menu-boot-fade-ms, 1200ms) ease-in-out;
}

html.phone-optimised,
body.phone-optimised {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}

html.phone-optimised {
    background-color: #000000;
}

body.phone-optimised {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    isolation: isolate;
}

/* Recent iOS standalone shells sample the root background for the reserved
   status region, while keeping that region outside the web viewport. */
body.phone-optimised::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: #000000;
}

body.phone-optimised::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: var(--phone-map-screen-bottom, 70vh);
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: #111b2e;
}

#phoneGameplayControls {
    display: none;
}

html.phone-optimised:not(.start-menu-active) #phoneGameplayControls {
    position: fixed;
    right: max(10px, env(safe-area-inset-right));
    top: var(--phone-gameplay-controls-top, calc(100dvh - 112px));
    bottom: auto;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 400;
    pointer-events: auto;
}

.phone-gameplay-control {
    appearance: none;
    position: relative;
    width: 66px;
    height: 66px;
    padding: 7.5px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.phone-gameplay-control__visual {
    position: relative;
    display: block;
    width: 51px;
    height: 51px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.phone-gameplay-control__frame,
.phone-gameplay-control__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.phone-gameplay-control__frame {
    width: 51px;
    height: 51px;
    z-index: 0;
}

.phone-gameplay-control__icon {
    width: 48px;
    height: 48px;
    z-index: 1;
}

.phone-gameplay-control:active .phone-gameplay-control__visual {
    transform: translateY(1.5px);
    filter: brightness(1.12);
}

.phone-gameplay-control:focus-visible .phone-gameplay-control__visual {
    filter: brightness(1.18);
}

html.phone-optimised .game-box,
body.phone-optimised .game-box {
    background-color: #000000;
}

html.phone-optimised .overlay,
body.phone-optimised .overlay {
    background-color: #000000;
}

/* The menu is the first paint. Runtime initialization removes this class only
   after the final phone/desktop layout has been applied. */
html.start-menu-active .axis-container,
html.start-menu-active #inventoryPanel,
html.start-menu-active #logContainer,
html.start-menu-active #devPanel {
    visibility: hidden !important;
    opacity: 0 !important;
}

html.start-menu-pending #deathMenu {
    visibility: hidden !important;
    opacity: 0 !important;
}

html.start-menu-pending #startScreenArt,
html.start-menu-pending #startGameButton,
html.start-menu-pending #continueGameButton:not([hidden]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

html.start-menu-pending #downloadAssetsButton:not([hidden]) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

.game-container {
    --game-view-width: 576px;
    --game-view-height: 576px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Needed for absolute positioning of axis numbers */
}

body.phone-optimised .game-container {
    will-change: transform;
    backface-visibility: hidden;
}

html.phone-optimised .axis-numbers,
body.phone-optimised .axis-numbers {
    display: none !important;
}

.game-box {
    width: var(--game-view-width, 576px); /* Standard: 9x9 tiles of 64px each */
    height: var(--game-view-height, 576px);
    overflow: hidden; /* Hide parts of the tile map outside the 9x9 view */
    display: flex;
    flex-wrap: wrap;
    border: 2px solid rgb(255, 255, 255); /* Thinner white border */
    position: relative; /* Required for absolute positioning of child elements */
    margin-top: 30px; /* Space for the X-axis numbers */
    margin-left: 30px; /* Space for the Y-axis numbers */
    background-color: #111b2e; /* Set the same dark navy background color as the page */
}

@font-face {
    font-family: 'Dogica';
    src: url('Font/Dogica/dogica.ttf') format('truetype'),
         url('Font/Dogica/dogica.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* Define the bold Dogica font */
@font-face {
    font-family: 'Dogica';
    src: url('Font/Dogica/dogicabold.ttf') format('truetype'),
         url('Font/Dogica/dogicabold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}


/* Axis numbers positioned absolutely relative to the game container */
.axis-numbers {
    display: flex;
    position: absolute;
    color: #fff; /* White text */
    font-size: 14px; /* Adjust if necessary for better visibility */
}

/* X-axis numbers */
#xAxisNumbers {
    bottom: 98%; /* Position below the game box */
    left: 40px; /* Align with the left edge of the game box */
    width: var(--game-view-width, 576px);
    flex-direction: row;
    justify-content: space-around; /* Evenly distribute the numbers */
    gap: 0;
}

/* Y-axis numbers */
#yAxisNumbers {
    right: 98%; /* Position to the left of the game box */
    top: 40px; /* Align with the top edge of the game box */
    height: var(--game-view-height, 576px);
    flex-direction: column;
    justify-content: space-around; /* Evenly distribute the numbers */
    gap: 0;
}

/* Axis numbers */
.axis-numbers > div {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    width: 40px; /* Set the width to match the tile size */
    height: 40px; /* Set the height to match the tile size */
    position: relative; /* Relative positioning for opacity transition */
    color: rgba(255, 255, 255, 0.4); /* Default opacity for numbers */
}

/* Adjust the opacity for the central numbers */
.axis-numbers > div:nth-child(5) {
    color: rgba(255, 255, 255, 1); /* Fully opaque */
}

.axis-numbers > div:nth-child(4),
.axis-numbers > div:nth-child(6) {
    color: rgba(255, 255, 255, 0.7); /* Adjusted opacity */
}

.axis-numbers > div:nth-child(3),
.axis-numbers > div:nth-child(7) {
    color: rgba(255, 255, 255, 0.5); /* Adjusted opacity */
}

.axis-numbers > div:nth-child(2),
.axis-numbers > div:nth-child(8) {
    color: rgba(255, 255, 255, 0.3); /* Adjusted opacity */
}

.axis-numbers > div:nth-child(1),
.axis-numbers > div:nth-child(9) {
    color: rgba(255, 255, 255, 0.2); /* Adjusted opacity */
}

.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(1),
.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(7) {
    color: rgba(255, 255, 255, 0.3);
}

.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(2),
.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(6) {
    color: rgba(255, 255, 255, 0.5);
}

.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(3),
.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(5) {
    color: rgba(255, 255, 255, 0.7);
}

.game-container.game-view-slim-x #xAxisNumbers > div:nth-child(4) {
    color: rgba(255, 255, 255, 1);
}

#startGameButton,
#continueGameButton,
#downloadAssetsButton,
#returnToMainMenuButton {
    padding: 10px 20px;
    background-color: transparent; /* Transparent background */
    color: #fff; /* White text */
    border: none; /* No border */
    border-radius: 20px; /* Rounded edges */
    cursor: pointer; /* Cursor changes to pointer on hover */
    font-size: 16px; /* Text size */
    font-family: var(--dashboard-font-family, "Futura", "Trebuchet MS", "Avenir Next", Arial, sans-serif);
    transition: opacity 0.5s ease; /* Smooth transition for opacity */
}

#startGameButton {
    opacity: 0; /* Initially fully transparent */
    position: absolute; /* Position absolutely */
    top: calc(50% + 10px); /* Center vertically and move down by 20px */
    left: calc(50% + 10px); /* Center horizontally and move right by 20px */
    transform: translate(-50%, -50%); /* Center the button */
    z-index: 151;
}

#continueGameButton {
    display: none;
    opacity: 0;
    position: absolute;
    top: calc(50% + 54px);
    left: calc(50% + 10px);
    min-width: 190px;
    transform: translate(-50%, -50%);
    z-index: 151;
    white-space: nowrap;
}

html.start-menu-active #continueGameButton:not([hidden]) {
    display: block;
}

#downloadAssetsButton {
    display: none;
    opacity: 1;
    position: absolute;
    top: calc(50% + 54px);
    left: calc(50% + 10px);
    min-width: 230px;
    transform: translate(-50%, -50%);
    z-index: 151;
    font-size: 14px;
    white-space: nowrap;
}

html.has-saved-hunt #downloadAssetsButton {
    top: calc(50% + 98px);
}

html.start-menu-active #downloadAssetsButton:not([hidden]) {
    display: block;
}

#downloadAssetsButton:disabled {
    cursor: default;
    opacity: 0.72;
}

#returnToMainMenuButton {
    opacity: 1;
}

#startScreenArt {
    position: absolute;
    top: 32px;
    left: 32px;
    width: var(--game-view-width, 576px);
    height: var(--game-view-height, 576px);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 120;
}

#startScreenArtBackOne,
#startScreenArtBackTwo,
#startScreenArtBackThree,
#startScreenArtFront {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
}

#startScreenArtBackOne {
    z-index: 0;
    background-image: url('UIAssets/Home_Screen_1.1.png');
    opacity: 0.06;
    animation: startScreenBackPulse 6.6s ease-in-out infinite;
    animation-delay: 0s;
    will-change: opacity;
}

#startScreenArtBackTwo {
    z-index: 1;
    background-image: url('UIAssets/Home_Screen_1.2.png');
    opacity: 0.06;
    animation: startScreenBackPulse 6.6s ease-in-out infinite;
    animation-delay: -2.2s;
    will-change: opacity;
}

#startScreenArtBackThree {
    z-index: 2;
    background-image: url('UIAssets/Home_Screen_1.3.png');
    opacity: 0.06;
    animation: startScreenBackPulse 6.6s ease-in-out infinite;
    animation-delay: -4.4s;
    will-change: opacity;
}

#startScreenArtFront {
    z-index: 3;
    background-image: url('UIAssets/Home_Screen_2.png');
}

html.phone-optimised #startScreenArt,
body.phone-optimised #startScreenArt {
    top: calc(32px - var(--game-view-height, 576px) - var(--phone-extra-north-row, 64px));
    height: calc(
        var(--game-view-height, 576px) +
        var(--game-view-height, 576px) +
        var(--game-view-height, 576px)
    ) !important;
}

html.phone-optimised .game-container #startGameButton,
body.phone-optimised .game-container #startGameButton {
    top: var(--phone-start-button-top, 50%);
    left: var(--phone-start-button-left, 50%);
    transform: translate(-50%, -50%);
}

html.phone-optimised .game-container #continueGameButton,
body.phone-optimised .game-container #continueGameButton {
    top: calc(var(--phone-start-button-top, 50%) + 44px);
    left: var(--phone-start-button-left, 50%);
    transform: translate(-50%, -50%);
}

html.phone-optimised .game-container #downloadAssetsButton,
body.phone-optimised .game-container #downloadAssetsButton {
    top: calc(var(--phone-start-button-top, 50%) + 44px);
    left: var(--phone-start-button-left, 50%);
    transform: translate(-50%, -50%);
}

html.phone-optimised.has-saved-hunt .game-container #downloadAssetsButton,
body.phone-optimised.has-saved-hunt .game-container #downloadAssetsButton {
    top: calc(var(--phone-start-button-top, 50%) + 88px);
}

html.phone-optimised .game-container .death-menu,
body.phone-optimised .game-container .death-menu {
    top: calc(32px - var(--phone-extra-north-row, 64px));
}

html.phone-optimised #startScreenArtBackOne,
html.phone-optimised #startScreenArtBackTwo,
html.phone-optimised #startScreenArtBackThree,
html.phone-optimised #startScreenArtFront,
body.phone-optimised #startScreenArtBackOne,
body.phone-optimised #startScreenArtBackTwo,
body.phone-optimised #startScreenArtBackThree,
body.phone-optimised #startScreenArtFront {
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% var(--game-view-height, 576px);
}

@keyframes startScreenBackPulse {
    0%,
    14% {
        opacity: 0.06;
    }
    42%,
    56% {
        opacity: 0.82;
    }
    84%,
    100% {
        opacity: 0.06;
    }
}

@media (hover: hover) and (pointer: fine) {
    #startGameButton:hover,
    #continueGameButton:hover,
    #downloadAssetsButton:hover:not(:disabled),
    #returnToMainMenuButton:hover {
        text-shadow: 0 0 7.5px rgba(255, 255, 255, 0.5); /* Slight glow effect on hover with adjusted opacity */
    }
}

@media (hover: none), (pointer: coarse) {
    html.phone-optimised button,
    html.phone-optimised [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

    html.phone-optimised button:active,
    html.phone-optimised [role="button"]:active,
    html.phone-optimised .phone-touch-pressed {
        filter: brightness(1.12);
    }
}

/* Centered button */
.start-game-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30; /* Ensure the button is above everything else */
}

.start-game-button-fade-in {
    opacity: 1; /* Fade in the button */
}

.death-menu {
    position: absolute;
    top: 32px;
    left: 32px;
    width: var(--game-view-width, 576px);
    height: var(--game-view-height, 576px);
    transform: none;
    display: none;
    opacity: 0;
    z-index: 151;
    pointer-events: none;
    text-align: center;
    color: #fff;
    font-family: var(--dashboard-font-family, "Futura", "Trebuchet MS", "Avenir Next", Arial, sans-serif);
    text-transform: uppercase;
    transition: opacity 0.5s ease;
}

.death-menu-title,
.death-menu-points {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    margin: 0;
    color: #fff;
    text-shadow: none;
    line-height: 1.35;
}

.death-menu-title {
    top: 22%;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: 0.08em;
    max-width: 300px;
    white-space: normal;
}

.death-menu-points {
    top: calc(22% + 72px);
    font-size: 18px;
    font-weight: 700;
}

.death-menu-button {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    display: inline-block;
    opacity: 1;
    pointer-events: auto;
    margin: 0;
}

.overlay {
    position: absolute;
    top: 32px; /* Adjust to match the margin-top of the game box */
    left: 32px; /* Adjust to match the margin-left of the game box */
    width: var(--game-view-width, 576px);
    height: var(--game-view-height, 576px);
    background-color: #111b2e; /* Dark navy background */
    opacity: 1; /* Initially fully opaque */
    transition: opacity 3s ease; /* Smooth transition for opacity */
    pointer-events: none; /* Allow clicks to pass through the overlay */
    z-index: 1; /* Ensure the overlay is above everything else */
}

.fade-out {
    opacity: 0; /* Fade out the overlay */
}

.counter-display {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 30; /* Ensure it is above other elements */
}

.health-display {
    position: absolute;
    bottom: 5px;
    left: 30px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 20;
}

/* Additional styles for the XP and Level displays */
.xp-display {
    position: absolute;
    bottom: 55px; /* Position above the Energy display */
    left: 30px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 30; /* Ensure it is above other elements */
}

.level-display {
    position: absolute;
    bottom: 80px; /* Position above the XP display */
    left: 30px;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 30; /* Ensure it is above other elements */
}

#turnDisplay {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-items: center;
  gap: 6px;
  width: auto;
  min-height: 24px;
  padding: 0;
  z-index: 250;
  pointer-events: auto;
}

html.phone-optimised #turnDisplay,
body.phone-optimised #turnDisplay {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 62px);
  right: max(12px, env(safe-area-inset-right, 0px));
  /* Above the map/HUD, below modal dimming (900) and menu surfaces (1000+). */
  z-index: 850;
  transition: opacity 180ms ease;
}

/* The phone game container is its own composited stacking context. Mirror the
   modal backdrop on its body-mounted counters so dialogue and all shared
   overlay menus visually cover the complete map HUD. */
body.phone-optimised:has(#overlay.dimmed) #turnDisplay,
body.phone-optimised:has(#overlay.dashboard-phone-dimmed) #turnDisplay,
body.phone-optimised:has(#dialogueBox[style*="display: block"]) #turnDisplay {
  opacity: 0.35;
  pointer-events: none;
}

html.phone-optimised.start-menu-active #turnDisplay,
body.phone-optimised.start-menu-active #turnDisplay {
  display: none;
}

html.phone-optimised .game-container.game-view-phone-extended-x > #overlay,
body.phone-optimised .game-container.game-view-phone-extended-x > #overlay {
  top: var(--phone-screen-cover-top, calc(-64px - var(--phone-extra-north-row, 64px)));
  left: var(--phone-screen-cover-left, 32px);
  width: var(--phone-screen-cover-width, var(--game-view-width, 576px));
  height: var(--phone-screen-cover-height, calc(var(--game-view-height, 576px) + 160px + var(--phone-extra-north-row, 64px))) !important;
}

html.phone-optimised .game-container.game-view-phone-extended-x > #overlay.dimmed,
html.phone-optimised .game-container.game-view-phone-extended-x > #overlay.dashboard-phone-dimmed,
body.phone-optimised .game-container.game-view-phone-extended-x > #overlay.dimmed,
body.phone-optimised .game-container.game-view-phone-extended-x > #overlay.dashboard-phone-dimmed {
  z-index: 900 !important;
}

html.phone-optimised .game-container.game-view-phone-extended-x #dialogueBackdrop,
body.phone-optimised .game-container.game-view-phone-extended-x #dialogueBackdrop {
  top: var(--phone-gamebox-screen-cover-top, calc(-64px - var(--phone-extra-north-row, 64px))) !important;
  left: var(--phone-gamebox-screen-cover-left, 0px) !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--phone-screen-cover-width, 100%) !important;
  height: var(--phone-screen-cover-height, calc(100% + 256px)) !important;
}

/* Phone dialogue is a viewport-level lower-screen fade. Keeping the surface
   outside the transformed game container lets it cover the HUD and the two
   body-mounted gameplay controls consistently in Safari and standalone PWAs. */
html.phone-optimised #dialogueBackdrop.dialogue-backdrop--phone-surface,
body.phone-optimised #dialogueBackdrop.dialogue-backdrop--phone-surface {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 42%,
    rgba(0, 0, 0, 0.05) 47%,
    rgba(0, 0, 0, 0.25) 53%,
    rgba(0, 0, 0, 0.62) 60%,
    rgba(0, 0, 0, 0.92) 69%,
    rgba(0, 0, 0, 0.99) 74%,
    #000000 94%,
    #000000 100%
  ) !important;
  z-index: 1400 !important;
}

.rune-activation-cutscene-layer--phone {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
}

html.phone-optimised .game-container.game-view-phone-extended-x #dialogueBox,
body.phone-optimised .game-container.game-view-phone-extended-x #dialogueBox {
  bottom: calc(30px + var(--phone-extra-north-row, 64px)) !important;
}

html.phone-optimised #dialogueBox.dialogue-box--phone-surface,
body.phone-optimised #dialogueBox.dialogue-box--phone-surface {
  position: fixed !important;
  left: 50vw !important;
  right: auto !important;
  bottom: max(calc(env(safe-area-inset-bottom, 0px) + 96px), 12dvh) !important;
  width: min(calc(100vw - 32px), 560px) !important;
  max-width: 560px !important;
  box-sizing: border-box !important;
  transform: translateX(-50%) !important;
  padding: 12px 10px 58px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
  z-index: 1401 !important;
}

#dialogueBox > .dialogue-speaker {
  font-family: var(--dashboard-font-family, "Futura", "Trebuchet MS", "Avenir Next", Arial, sans-serif) !important;
}

#dialogueBox > .dialogue-copy {
  transform: translateY(6px) !important;
  letter-spacing: 1px !important;
}

html.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-speaker,
body.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-speaker {
  transform: translateY(6px) !important;
}

html.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-copy,
body.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-copy {
  font-size: 11px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

html.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-options,
body.phone-optimised #dialogueBox.dialogue-box--phone-surface > .dialogue-options {
  bottom: -28px !important;
  gap: 6px !important;
}

html.phone-optimised #dialogueBox .dialogue-option,
body.phone-optimised #dialogueBox .dialogue-option {
  min-height: 24px !important;
  padding: 2px !important;
  font-size: 10px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

html.phone-optimised #dialogueBox .dialogue-option-label,
body.phone-optimised #dialogueBox .dialogue-option-label {
  font-size: 10px !important;
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

html.phone-optimised #dialogueBox .dialogue-option-marker,
body.phone-optimised #dialogueBox .dialogue-option-marker {
  width: 12px !important;
}

html.phone-optimised .game-container.game-view-phone-extended-x .game-box,
body.phone-optimised .game-container.game-view-phone-extended-x .game-box {
  overflow: visible;
  border-top-color: transparent;
}

html.phone-optimised .game-container.game-view-phone-extended-x .game-box::before,
body.phone-optimised .game-container.game-view-phone-extended-x .game-box::before {
  content: '';
  position: absolute;
  left: var(--phone-gamebox-screen-cover-left, 0px);
  top: var(--phone-gamebox-screen-cover-top, -256px);
  width: var(--phone-screen-cover-width, 100%);
  height: calc(
    192px - var(--phone-extra-north-row, 64px)
    - var(--phone-gamebox-screen-cover-top, -256px)
  );
  pointer-events: none;
  z-index: 121;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.96) 6%,
    rgba(0, 0, 0, 0.75) 16%,
    rgba(0, 0, 0, 0.5) 26%,
    rgba(0, 0, 0, 0.3) 36%,
    rgba(0, 0, 0, 0.16) 46%,
    rgba(0, 0, 0, 0.09) 56%,
    rgba(0, 0, 0, 0.05) 64%,
    rgba(0, 0, 0, 0.025) 72%,
    rgba(0, 0, 0, 0) 82%,
    rgba(0, 0, 0, 0) 100%
  );
}

html.phone-optimised .game-container.game-view-phone-extended-x .game-box::after,
body.phone-optimised .game-container.game-view-phone-extended-x .game-box::after {
  content: '';
  position: absolute;
  left: -2px;
  bottom: -96px;
  width: calc(100% + 4px);
  height: 96px;
  pointer-events: none;
  z-index: 110;
  background: #111b2e;
}

#turnDisplay .silver-counter {
  grid-column: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  min-height: 21px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font-family: var(--dashboard-font-family);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

#turnDisplay .silver-counter #silverCounterValue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  text-align: center;
}

#turnDisplay .silver-counter img {
  position: absolute;
  left: calc(50% + 16px);
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  object-fit: contain;
  image-rendering: pixelated;
}

#turnDisplay .stage-indicator-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 21px;
  padding: 0 3px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

#turnDisplay .stage-indicator-button:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

#turnDisplay .stage-indicator-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--dashboard-font-family);
  line-height: 1;
  text-shadow: none;
}

#turnDisplay .stage-indicator-value.is-fully-discovered {
  color: #f2d44c;
  text-shadow: 0 0 6px rgba(242, 212, 76, 0.5);
}

#turnDisplay .stage-discovery-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 20px;
  width: min(102px, 36vw);
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(10, 15, 20, 0.72);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.92);
}

#turnDisplay .stage-discovery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  font-family: var(--dashboard-font-family);
}

#turnDisplay .stage-discovery-title,
#turnDisplay .stage-discovery-progress {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#turnDisplay .stage-discovery-progress {
  color: rgba(255, 255, 255, 0.7);
}

#turnDisplay .stage-discovery-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#turnDisplay .stage-discovery-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#turnDisplay .stage-discovery-group-label {
  font-size: 8px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

#turnDisplay .stage-discovery-group-progress {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--dashboard-font-family);
}

/* Single solid pie (no inner hole, no borders/shadows) */
#turnDisplay .turn-ring {
  --turn-color: rgba(255,255,255,0.1);       /* 50% opacity */
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  background: conic-gradient(var(--turn-color) var(--deg), transparent 0) !important;
  box-shadow: none !important;
  outline: none !important;
  transition: --deg var(--speed) linear;
}

/* Kill any leftover pseudo-elements from older CSS */
#turnDisplay .turn-ring::before,
#turnDisplay .turn-ring::after {
  content: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Animatable custom properties */
@property --deg {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --speed {
  syntax: "<time>";
  inherits: false;
  initial-value: 0s;
}

/* Styling for the Connection Display */
.connection-display {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: calc(50% + 60px); /* Position it just below the start button */
    left: 50%;
    transition: opacity 0.5s ease;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 30;
    margin-left: 14px;
    margin-bottom: 200px;
}

/* Fade-in effect for the connection display */
.connection-display-fade-in {
    opacity: 0; /* Makes the display visible */
}

#tileLayer {
    position: absolute;
    inset: 0;
    z-index: 10;
    backface-visibility: hidden;
}

#spriteLayer{
    position:relative;   /* becomes the containing block for the HUD          */
    z-index:90;          /* below distanceOverlay so fog-of-war affects sprites */
    backface-visibility: hidden;
}

#tileCanvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    will-change: transform;
    backface-visibility: hidden;
    z-index: 0;
}

#tileDomOverlayLayer {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    will-change: transform;
    backface-visibility: hidden;
    z-index: 1;
}

.canvas-animated-tile,
.canvas-map-overlay {
    position: absolute;
    display: block;
    pointer-events: none;
    object-fit: cover;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    user-select: none;
    -webkit-user-drag: none;
    backface-visibility: hidden;
}

.canvas-map-overlay--flashing {
    animation: canvasMapOverlayPulse 1250ms linear infinite;
}

@keyframes canvasMapOverlayPulse {
    0%,
    100% {
        filter: brightness(1) saturate(1.2);
    }

    40%,
    60% {
        filter: brightness(1.9) saturate(1.2);
    }
}

#distanceOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* so clicks pass through */
    background: url('UIAssets/DistanceOverlay.png') no-repeat center center;
    background-size: cover;
    z-index: 120; /* above tile/sprite layers, below selection + HUD */
    transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

html.phone-optimised .game-container.game-view-phone-extended-x #distanceOverlay,
body.phone-optimised .game-container.game-view-phone-extended-x #distanceOverlay {
    top: calc(-64px - var(--phone-extra-north-row, 64px));
    height: calc(100% + 64px + var(--phone-extra-north-row, 64px));
    background-image: url('UIAssets/DistanceOverlayPhone.png');
    background-position: center top;
    background-size: 100% 100%;
}

html.phone-optimised .game-container.game-view-phone-extended-x #dangerOverlay,
html.phone-optimised .game-container.game-view-phone-extended-x #lowHealthFlashOverlay,
body.phone-optimised .game-container.game-view-phone-extended-x #dangerOverlay,
body.phone-optimised .game-container.game-view-phone-extended-x #lowHealthFlashOverlay {
    top: calc(-64px - var(--phone-extra-north-row, 64px));
    bottom: auto;
    height: calc(100% + 64px + var(--phone-extra-north-row, 64px));
}

#dangerOverlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 130;
    transition: opacity 220ms ease;
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0) 28%, rgba(119, 0, 0, 0.08) 54%, rgba(15, 0, 0, 0.58) 100%);
}

#lowHealthFlashOverlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 132;
    background: rgba(255, 138, 138, 0.36);
}

#dangerOverlay.danger-overlay--damage-flash {
    animation: playerDamageOverlayFlash 180ms ease-out forwards;
}

#dangerOverlay.danger-overlay--critical-flash {
    animation: playerCriticalOverlayFlash 480ms ease-out forwards;
}

#lowHealthFlashOverlay.low-health-flash-overlay--entry {
    animation: playerLowHealthEntryOverlayFlash 360ms ease-in-out forwards;
}

@keyframes playerLowHealthEntryOverlayFlash {
    0% {
        opacity: 0;
    }
    22% {
        opacity: 0.36;
    }
    58% {
        opacity: 0.2;
    }
    100% {
        opacity: 0.04;
    }
}

@keyframes playerDamageOverlayFlash {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 0.42;
    }
    100% {
        opacity: 0;
    }
}

@keyframes playerCriticalOverlayFlash {
    0% {
        opacity: 0;
    }
    22% {
        opacity: 0.9;
    }
    100% {
        opacity: 0;
    }
}