@font-face {
    font-family: pixelFont;
    src: url('pixelFont.ttf');
}

button {
    cursor: pointer;
}

#game-container {
    position: relative;
}

canvas {
    display: block;
}

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: pixelFont, monospace;
    touch-action: none; /* Prevent default touch behaviors on mobile */
    -webkit-touch-callout: none; /* Prevent callout on long press */
    -webkit-user-select: none; /* Prevent text selection */
    user-select: none;
}

/* Custom Scrollbar Styles */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: rgb(187, 132, 75);
    border: 2px solid rgb(149, 108, 65);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgb(139, 98, 55);
    border-radius: 4px;
    border: 2px solid rgb(187, 132, 75);
}

::-webkit-scrollbar-thumb:hover {
    background: rgb(100, 70, 40);
}

::-webkit-scrollbar-corner {
    background: rgb(187, 132, 75);
}

/* Firefox scrollbar styles */
* {
    scrollbar-width: thin;
    scrollbar-color: rgb(139, 98, 55) rgb(187, 132, 75);
}

.but{
    background-color: black;
}

/* Universal button cursor */
button {
    cursor: pointer;
}

/* Control UI styles */
.controls-container {
    position: absolute;
    display: flex;
    flex-direction: column;
}

.control-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
    justify-content: center;
}

.control-label {
    font-family: pixelFont;
    font-size: 15px;
    color: black;
    width: 80px;
    padding-right: 20%;
}

.control-button {
    font-family: pixelFont;
    font-size: 15px;
    color: black;
    background: transparent;
    border: 1px solid transparent;
    padding: 2px 8px;
    cursor: pointer;
    min-width: 90px;
    text-align: center;

    border-color: rgba(0, 0, 0, 0.3);
}

.control-button:hover {
    background-color: rgba(200, 200, 200, 0.5);
    border-color: rgb(100, 100, 100);
}

.control-row.highlighted .control-button {
    background-color: rgba(255, 255, 0, 0.5);
    border-color: rgb(255, 255, 0);
}

/* Fast travel transition overlay */
#travelOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
    display: none;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

#travelOverlay.active {
    display: block;
    animation: fadeInOut 2s ease-in-out;
}

.travel-airship {
    position: absolute;
    top: 50%;
    left: -150px;
    transform: translateY(-50%);
    width: 150px;
    height: auto;
    animation: flyThrough 2s ease-in-out;
    z-index: 10;
}

.travel-cloud {
    position: absolute;
    background-image: url('images/foreground/cloud_tile2.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 100px;
    height: 60px;
    opacity: 0.8;
    image-rendering: pixelated;
}

.travel-cloud-1 {
    top: 20%;
    animation: cloudMove1 3s linear infinite;
}

.travel-cloud-2 {
    top: 60%;
    animation: cloudMove2 4s linear infinite;
}

.travel-cloud-3 {
    top: 40%;
    animation: cloudMove3 3.5s linear infinite;
}

.travel-cloud-4 {
    top: 15%;
    animation: cloudMove4 2.8s linear infinite;
}

.travel-cloud-5 {
    top: 70%;
    animation: cloudMove5 3.2s linear infinite;
}

.travel-cloud-6 {
    top: 50%;
    animation: cloudMove6 4.5s linear infinite;
}

.travel-cloud-7 {
    top: 30%;
    animation: cloudMove7 2.5s linear infinite;
}

.travel-cloud-8 {
    top: 80%;
    animation: cloudMove8 3.8s linear infinite;
}

.travel-cloud-9 {
    top: 10%;
    animation: cloudMove9 4.2s linear infinite;
}

.travel-destination {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-family: pixelFont, monospace;
    font-size: 24px;
    color: white;
    text-shadow: 3px 3px 0 rgb(139, 98, 55), 
                 -1px -1px 0 rgb(139, 98, 55),
                 1px -1px 0 rgb(139, 98, 55),
                 -1px 1px 0 rgb(139, 98, 55),
                 1px 1px 0 rgb(139, 98, 55);
    animation: destinationFade 2s ease-in-out;
    z-index: 11;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    25% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes flyThrough {
    0% { left: -150px; }
    50% { left: 50%; transform: translate(-50%, -50%); }
    100% { left: calc(100% + 150px); transform: translateY(-50%); }
}

@keyframes cloudMove1 {
    0% { left: -150px; }
    100% { left: calc(100% + 150px); }
}

@keyframes cloudMove2 {
    0% { left: -200px; }
    100% { left: calc(100% + 200px); }
}

@keyframes cloudMove3 {
    0% { left: -100px; }
    100% { left: calc(100% + 100px); }
}

@keyframes cloudMove4 {
    0% { left: -180px; }
    100% { left: calc(100% + 180px); }
}

@keyframes cloudMove5 {
    0% { left: -120px; }
    100% { left: calc(100% + 120px); }
}

@keyframes cloudMove6 {
    0% { left: -220px; }
    100% { left: calc(100% + 220px); }
}

@keyframes cloudMove7 {
    0% { left: -90px; }
    100% { left: calc(100% + 90px); }
}

@keyframes cloudMove8 {
    0% { left: -160px; }
    100% { left: calc(100% + 160px); }
}

@keyframes cloudMove9 {
    0% { left: -140px; }
    100% { left: calc(100% + 140px); }
}

@keyframes destinationFade {
    0% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
    25% { opacity: 1; transform: translateX(-50%) translateY(0); }
    75% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Menu fade transition overlay */
#menuOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    display: none;
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
}

#menuOverlay.active {
    display: block;
    animation: menuFade 1s ease-in-out;
}

@keyframes menuFade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Quests UI styles */
.quests-container {
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 15px;
    min-width: 40dvw;
    max-width: 45dvw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
    pointer-events: auto;
    overflow-y: auto;
}

.quests-header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid rgb(0, 0, 0);
    padding-bottom: 10px;
    gap: 10px;
}

.quests-header {
    flex: 1;
}

.quests-header h2 {
    font-family: pixelFont, monospace;
    font-size: 20px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgb(0, 0, 0);
    margin: 0;
    padding: 0;
}

.quests-close-btn {
    font-family: pixelFont, monospace;
    font-size: 24px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    background-color: rgba(149, 108, 65, 0.8);
    border: 2px solid rgb(100, 70, 40);
    border-radius: 3px;
    padding: 0;
    width: 30px;
    height: 30px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.quests-close-btn:hover {
    background-color: rgba(200, 150, 100, 0.9);
}

.quests-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 40dvh;
    min-height: 30dvh;
    overflow-y: auto;
}

.quest-item {
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 10px;
    min-height: fit-content;
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    pointer-events: auto;
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    width: 100%;
}

.quest-item:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(0, 0, 0, 0.5);
}

.quest-item:active {
    background-color: rgba(255, 255, 255, 0.15);
}

.quest-item.quest-current {
    background-color: rgba(255, 255, 0, 0.3);
    border-color: rgb(255, 255, 0);
}

.quest-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    gap: 10px;
    position: relative;
}

.quests-close-instruction {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-align: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid rgba(0, 0, 0, 0.3);
}

/* Quest Pagination Controls */
.quest-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    border-top: 2px solid rgba(0, 0, 0, 0.3);
}

.quest-page-btn {
    font-family: pixelFont, monospace;
    font-size: 12px;
    padding: 8px 15px;
    background-color: rgba(149, 108, 65, 0.8);
    border: 2px solid rgb(100, 70, 40);
    border-radius: 3px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quest-page-btn:hover:not(:disabled) {
    background-color: rgba(200, 150, 100, 0.9);
}

.quest-page-btn:active:not(:disabled) {
    background-color: rgba(120, 90, 50, 0.9);
}

.quest-page-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.quest-page-info {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    min-width: 150px;
    text-align: center;
}

/* Quest item content styles */
.quest-title {
    font-family: pixelFont, monospace;
    font-size: 14px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-status {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(200, 200, 200);
    margin-top: 6px;
    min-height: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    flex-wrap: wrap;
    width: 100%;
}

.quest-details-button {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 255);
    background-color: rgba(149, 108, 65, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 3px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    position: relative;
    flex-shrink: 0;
    height: 28px;
    line-height: 1;
    pointer-events: auto;
    z-index: 10;
}

.quest-details-button:hover {
    background-color: rgba(149, 108, 65, 1);
    border-color: rgba(0, 0, 0, 0.45);
}

.quest-details-button:active {
    transform: translateY(1px);
}

.quest-progress-bar {
    flex: 1 1 140px;
    height: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.5);
    border-radius: 2px;
    overflow: hidden;
}

.quest-progress-fill {
    height: 100%;
    background-color: rgb(255, 255, 0);
    transition: width 0.2s ease;
}

.quest-details-container {
    display: none;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-bottom: 10px;

}

.quest-goal-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    padding: 8px;
    margin-bottom: 6px;
    padding : 10px;
    position: relative;
}

/* Pause menu styles */
#pause-menu {
    position: fixed;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 30px;
    display: none;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    z-index: 2000;
    pointer-events: auto;
    min-width: 400px;
    width: min(640px, 94vw);
    max-width: 94vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

#pause-menu[data-active-tab="help"] {
    width: min(920px, 95vw);
    max-width: 95vw;
}

.pause-title {
    font-family: pixelFont, monospace;
    font-size: 30px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgb(0, 0, 0);
    margin: 0;
    padding: 0;
    text-align: center;
}

.pause-menu-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.pause-menu-label {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
    margin: 0;
}

.pause-slider-row {
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    width: 100%;
}

.pause-slider-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.3));
}

.pause-slider-row input[type="range"] {
    width: 200px;
    cursor: pointer;
    accent-color: rgb(255, 255, 0);
}

.pause-controls-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    max-height: 300px;
    overflow-y: auto;
}

.pause-controls-title {
    font-family: pixelFont, monospace;
    font-size: 13px;
    color: rgb(255, 255, 200);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    margin-bottom: 5px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 5px;
}

.pause-button {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 3px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 10px;
}

.pause-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.pause-button:disabled,
.options-button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pause-button:disabled:hover,
.options-button:disabled:hover {
    background-color: rgb(100, 70, 40);
    border-color: rgb(149, 108, 65);
}

/* Pause slider labels */
.pause-slider-label {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    min-width: 50px;
}

.pause-panel-wrap {
    width: 100%;
    max-width: 560px;
}

.pause-tab-panel .pause-menu-section,
.pause-tab-panel .pause-controls-section {
    width: 100%;
    box-sizing: border-box;
}

.pause-controls-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.pause-button-group,
.pause-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    width: 100%;
}

.pause-button-group .pause-button,
.pause-actions .pause-button {
    margin-top: 0;
}

.pause-help-section {
    align-items: stretch;
}

.pause-help-intro {
    text-align: left;
}

.pause-inline-tutorial {
    width: 100%;
    max-height: min(62vh, 760px);
    overflow-y: auto;
    padding: 12px;
    padding-right: 4px;
    box-sizing: border-box;
    background: rgba(34, 18, 8, 0.34);
    border: 2px solid rgba(255, 238, 186, 0.12);
    border-radius: 12px;
}

.pause-inline-tutorial .tutorial-directory {
    min-height: 0;
}

.pause-inline-tutorial .tutorial-directory-compact {
    grid-template-columns: 1fr;
    gap: 12px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-tab {
    flex: 1 1 132px;
    min-width: 0;
    padding: 10px 12px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-tab-label {
    font-size: 13px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-tab-hint {
    display: none;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-content {
    gap: 10px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-hero {
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-title {
    font-size: 20px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-description {
    font-size: 11px;
    line-height: 1.5;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-chip {
    font-size: 10px;
    padding: 5px 8px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-hero-media {
    min-height: 120px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-hero-image {
    width: 88px;
    height: 88px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-card {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
    min-height: 0;
    padding: 10px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-media {
    width: 52px;
    height: 52px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-image {
    width: 40px;
    height: 40px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-title {
    font-size: 12px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-description {
    font-size: 10px;
    line-height: 1.5;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-sections {
    grid-template-columns: 1fr;
    gap: 10px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-section {
    padding: 12px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-section-title {
    margin-bottom: 8px;
    font-size: 14px;
}

.pause-inline-tutorial .tutorial-directory-compact .tutorial-list {
    gap: 6px;
    font-size: 11px;
    line-height: 1.5;
}

.pause-tab-bar {
    width: 100%;
    max-width: 560px;
}

#pause-menu[data-active-tab="help"] .pause-tab-bar,
#pause-menu[data-active-tab="help"] .pause-panel-wrap {
    max-width: 100%;
}

/* Mobile info section for pause menu - hidden by default on desktop */
.pause-mobile-info {
    display: none;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    width: 100%;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.mobile-info-title {
    font-family: pixelFont, monospace;
    font-size: 13px;
    color: rgb(255, 255, 200);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    margin-bottom: 8px;
    text-align: center;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    padding-bottom: 5px;
}

.mobile-info-item {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    padding: 4px 0;
    text-align: left;
    width: 100%;
}

.mobile-info-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

/* Options menu mobile info - hidden by default on desktop */
.options-mobile-info {
    display: none !important;
}

/* Style the mobile info inside options menu when shown */
.options-mobile-info .mobile-info-grid {
    padding: 10px 0;
}

.options-mobile-info .mobile-info-item {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    padding: 6px 0;
}

.pause-button:active {
    transform: translateY(2px);
}

.save-transfer-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.save-transfer-actions .pause-button,
.save-transfer-actions .options-button {
    margin-top: 0;
}

.save-transfer-status {
    min-height: 16px;
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 255, 200);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
}

.save-transfer-status.success {
    color: rgb(210, 255, 210);
}

.save-transfer-status.error {
    color: rgb(255, 200, 200);
}

/* Main Menu Styles */
.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    width: 100dvw;
    background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
}

.main-menu-title-image {
    width: 400px;
    height: auto;
    max-width: 90vw;
    margin-bottom: 30px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.deluxe-text {
    font-family: pixelFont, monospace;
    font-size: 42px;
    font-weight: bold;
    color: #FFD700;
    text-shadow: 
        3px 3px 0px #FF8C00,
        -2px -2px 0px #FFA500,
        2px -2px 0px #FF8C00,
        -2px 2px 0px #FFA500,
        0px 0px 10px #FFFF00,
        0px 0px 20px #FFD700;
    letter-spacing: 8px;
    margin-bottom: 30px;
    transform: scale(1);
    animation: deluxePulse 2s ease-in-out infinite;
}

@keyframes deluxePulse {
    0%, 100% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
}

.main-menu-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 100, 100);
    border: 3px solid rgb(70, 70, 70);
    border-radius: 4px;
    padding: 15px 40px;
    cursor: pointer;
    width: 250px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.main-menu-button:hover {
    background-color: rgb(130, 130, 130);
    border-color: rgb(100, 100, 100);
}

.main-menu-button:active {
    transform: translateY(2px);
}

/* Difficulty Menu Styles */
.difficulty-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 999;
    pointer-events: auto;
    gap: 30px;
    overflow-y: auto;
    padding: 20px;
    padding-top: 40px;
}

.difficulty-scroll-hint {
    display: none;
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: #333;
    text-align: center;
    padding: 8px 16px;
    background: rgba(255, 255, 200, 0.9);
    border: 2px solid #8B6237;
    border-radius: 8px;
    margin-bottom: 10px;
    animation: difficultyBounce 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

/* Show scroll hint on touch devices */
@media (pointer: coarse) {
    .difficulty-scroll-hint {
        display: block;
    }
}

/* Also show scroll hint when height is small (landscape mode) */
@media (max-height: 500px) {
    .difficulty-scroll-hint {
        display: block;
    }
}

@keyframes difficultyBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}

.difficulty-title {
    font-family: pixelFont, monospace;
    font-size: 32px;
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0;
    text-align: center;
}

.difficulty-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
}

.difficulty-card {
    border: 5px solid;
    border-radius: 8px;
    padding: 30px 25px;
    width: 220px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
}

.difficulty-card-easy {
    border-color: rgb(0, 200, 0);
    background-color: rgba(100, 255, 100, 0.15);
}

.difficulty-card-medium {
    border-color: rgb(0, 0, 200);
    background-color: rgba(100, 100, 255, 0.15);
}

.difficulty-card-hard {
    border-color: rgb(200, 0, 0);
    background-color: rgba(255, 100, 100, 0.15);
}

.difficulty-card-title {
    font-family: pixelFont, monospace;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.difficulty-card-easy .difficulty-card-title {
    color: rgb(0, 150, 0);
}

.difficulty-card-medium .difficulty-card-title {
    color: rgb(0, 0, 150);
}

.difficulty-card-hard .difficulty-card-title {
    color: rgb(150, 0, 0);
}

.difficulty-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(0, 0, 0);
    gap: 10px;
}

.feature-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.difficulty-select-btn {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 10px;
}

.difficulty-select-btn:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.difficulty-select-btn:active {
    transform: translateY(2px);
}

/* Title Screen Options Menu Styles */
.title-options-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
    overflow-y: auto;
    padding: 20px;
}

.options-title {
    font-family: pixelFont, monospace;
    font-size: 32px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    text-align: center;
}

.options-section {
    background-color: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 350px;
    max-width: 500px;
}

.options-section-title {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 10px 0 5px 0;
    border-bottom: 2px solid rgb(149, 108, 65);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.options-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.slider-row label {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    min-width: 60px;
}

.options-slider {
    flex: 1;
    height: 20px;
    cursor: pointer;
    accent-color: rgb(255, 255, 0);
}

.title-controls-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.title-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.title-control-label {
    min-width: 80px;
}

.title-control-key {
    min-width: 100px;
    text-align: right;
    color: rgb(255, 255, 200);
}

.options-button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.options-section-description {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 245, 210);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.5;
}

.options-button {
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.options-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.options-button:active {
    transform: translateY(2px);
}

.options-button-danger {
    background-color: rgb(150, 50, 50);
    border-color: rgb(200, 80, 80);
}

.options-button-danger:hover {
    background-color: rgb(180, 60, 60);
    border-color: rgb(230, 100, 100);
}

.save-transfer-editor {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding-top: 10px;
    border-top: 2px solid rgba(149, 108, 65, 0.75);
}

.save-transfer-editor-title {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 255, 200);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    text-align: center;
}

.save-transfer-textarea {
    width: 100%;
    min-height: 170px;
    resize: vertical;
    box-sizing: border-box;
    padding: 12px;
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    background-color: rgba(60, 35, 15, 0.9);
    color: rgb(255, 255, 255);
    font-family: monospace;
    font-size: 12px;
    line-height: 1.4;
}

.save-transfer-textarea::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.options-back-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 20px;
}

.options-back-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.options-back-button:active {
    transform: translateY(2px);
}

/* Tutorial Overlay */
.tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1001;
    padding: 20px;
    pointer-events: auto;
}

.tutorial-overlay-urgent {
    background: rgba(20, 7, 4, 0.84);
}

.tutorial-overlay-directory {
    background: rgba(8, 11, 16, 0.82);
}

.tutorial-modal {
    width: min(760px, 100%);
    max-height: min(88vh, 900px);
    overflow-y: auto;
    background: linear-gradient(180deg, rgb(202, 149, 88) 0%, rgb(174, 118, 63) 100%);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tutorial-modal-directory {
    width: min(1080px, 100%);
    max-height: min(92vh, 980px);
    background:
        radial-gradient(circle at top right, rgba(104, 160, 157, 0.28), transparent 30%),
        linear-gradient(180deg, rgb(147, 104, 56) 0%, rgb(113, 72, 36) 100%);
}

.tutorial-modal-urgent {
    background: linear-gradient(180deg, rgb(123, 40, 26) 0%, rgb(87, 27, 17) 100%);
    border-color: rgb(255, 183, 86);
    box-shadow: 0 0 0 3px rgba(255, 195, 92, 0.2), 0 12px 30px rgba(0, 0, 0, 0.55);
    animation: tutorial-urgent-pulse 1.9s ease-in-out infinite;
}

@keyframes tutorial-urgent-pulse {
    0%, 100% {
        transform: translateY(0);
        box-shadow: 0 0 0 3px rgba(255, 195, 92, 0.14), 0 12px 30px rgba(0, 0, 0, 0.55);
    }
    50% {
        transform: translateY(-2px);
        box-shadow: 0 0 0 4px rgba(255, 214, 118, 0.26), 0 18px 36px rgba(0, 0, 0, 0.6);
    }
}

.tutorial-title {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 28px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45);
}

.tutorial-intro {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: rgb(255, 245, 210);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

.tutorial-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tutorial-body-directory {
    gap: 16px;
}

.tutorial-directory {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    min-height: 560px;
}

.tutorial-directory-tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tutorial-directory-tab {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    padding: 12px 14px;
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(31, 20, 10, 0.34);
    color: rgb(255, 247, 224);
    cursor: pointer;
    transition: transform 0.08s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.tutorial-directory-tab:hover {
    transform: translateY(-1px);
    background: rgba(55, 34, 16, 0.52);
    border-color: rgba(255, 230, 160, 0.22);
}

.tutorial-directory-tab.active {
    background: linear-gradient(180deg, rgba(55, 110, 80, 0.94) 0%, rgba(36, 80, 57, 0.98) 100%);
    border-color: rgba(226, 244, 184, 0.42);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
}

.tutorial-directory-tab-label {
    font-family: pixelFont, monospace;
    font-size: 15px;
    text-align: left;
}

.tutorial-directory-tab-hint {
    font-family: pixelFont, monospace;
    font-size: 10px;
    color: rgba(255, 247, 224, 0.72);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tutorial-directory-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.tutorial-directory-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px;
    gap: 18px;
    align-items: center;
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(44, 28, 15, 0.72) 0%, rgba(77, 49, 23, 0.84) 100%);
    border: 2px solid rgba(255, 231, 152, 0.24);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tutorial-directory-hero-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tutorial-directory-eyebrow {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 226, 135);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tutorial-directory-title {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 28px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.42);
}

.tutorial-directory-description {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 12px;
    line-height: 1.7;
    color: rgb(255, 245, 217);
}

.tutorial-directory-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tutorial-directory-chip {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(49, 30, 13);
    background: rgb(255, 220, 112);
    border-radius: 999px;
    padding: 6px 10px;
}

.tutorial-directory-hero-media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 188px;
    border-radius: 12px;
    background: rgba(18, 10, 6, 0.56);
    border: 2px solid rgba(255, 255, 255, 0.08);
}

.tutorial-directory-hero-image {
    width: 128px;
    height: 128px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.tutorial-asset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tutorial-asset-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: rgba(27, 18, 11, 0.44);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    min-height: 132px;
}

.tutorial-asset-media {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
}

.tutorial-asset-image {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.tutorial-asset-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.tutorial-asset-title {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 13px;
    color: rgb(255, 249, 231);
    overflow-wrap: anywhere;
}

.tutorial-asset-description {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 11px;
    line-height: 1.6;
    color: rgba(255, 245, 217, 0.9);
    overflow-wrap: anywhere;
}

.tutorial-directory-sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.tutorial-spotlight {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(82, 47, 18, 0.82) 0%, rgba(129, 78, 29, 0.86) 100%);
    border: 2px solid rgba(255, 226, 116, 0.45);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.tutorial-spotlight-portrait-wrap {
    flex: 0 0 auto;
    width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 16, 10, 0.75);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.tutorial-spotlight-portrait {
    width: 80px;
    height: 80px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.tutorial-spotlight-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.tutorial-spotlight-eyebrow {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 230, 140);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tutorial-spotlight-name {
    margin: 0;
    font-family: pixelFont, monospace;
    font-size: 26px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.tutorial-spotlight-location {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgb(255, 243, 212);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.tutorial-spotlight-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tutorial-spotlight-chip {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 249, 227);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 6px 10px;
}

.tutorial-spotlight-chip-action {
    color: rgb(38, 28, 16);
    background: rgb(255, 222, 107);
    border-color: rgb(255, 242, 177);
}

.tutorial-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tutorial-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    background: rgba(42, 16, 10, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
}

.tutorial-step-highlight {
    border-color: rgba(255, 214, 118, 0.78);
    background: rgba(71, 28, 14, 0.88);
}

.tutorial-step-number {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(53, 28, 12);
    background: rgb(255, 214, 118);
    border-radius: 999px;
}

.tutorial-step-content {
    min-width: 0;
}

.tutorial-step-title {
    margin: 0 0 8px;
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 248, 226);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.tutorial-list-compact {
    gap: 6px;
    margin: 0;
    font-size: 12px;
}

.tutorial-section {
    background: rgba(76, 47, 21, 0.28);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    padding: 14px;
}

.tutorial-section-highlight {
    background: rgba(118, 77, 24, 0.52);
    border-color: rgba(255, 234, 120, 0.5);
}

.tutorial-section-title {
    margin: 0 0 10px 0;
    font-family: pixelFont, monospace;
    font-size: 17px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

.tutorial-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: pixelFont, monospace;
    font-size: 12px;
    line-height: 1.6;
    color: rgb(255, 248, 225);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.tutorial-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.tutorial-button {
    font-family: pixelFont, monospace;
    font-size: 15px;
    color: rgb(255, 255, 255);
    background: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 11px 18px;
    cursor: pointer;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

.tutorial-button:hover {
    background: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.tutorial-button:active {
    transform: translateY(2px);
}

.tutorial-button-secondary {
    background: rgba(60, 90, 50, 0.92);
    border-color: rgb(119, 159, 77);
}

.tutorial-button-secondary:hover {
    background: rgba(74, 109, 61, 0.96);
    border-color: rgb(164, 205, 117);
}

/* Config Modal Styles */
.config-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    pointer-events: auto;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.config-modal {
    width: min(92vw, 760px);
    max-width: 760px;
    max-height: none;
    background-color: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    margin: auto;
    transition: width 0.18s ease, max-width 0.18s ease;
}

#config-overlay[data-active-tab="items"] .config-modal {
    width: min(96vw, 1120px);
    max-width: 1120px;
}

.config-title {
    font-family: pixelFont, monospace;
    font-size: 22px;
    color: #fff;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
    margin: 0 0 6px 0;
}

.config-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.config-tab {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    background: rgba(65,43,22,0.55);
    border: 2px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}

.config-tab:hover {
    background: rgba(85,56,28,0.8);
    border-color: rgba(255,255,255,0.3);
}

.config-tab:active {
    transform: translateY(1px);
}

.config-tab.active {
    color: #fff;
    background: rgba(31,122,31,0.9);
    border-color: rgba(255,255,150,0.55);
}

.config-tab-panels {
    display: flex;
    flex-direction: column;
}

.config-panel {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.config-panel.active {
    display: flex;
}

.config-panel-help {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    padding: 10px 12px;
    background: rgba(55,32,16,0.35);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
}

.config-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: rgba(75,45,22,0.3);
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 8px;
}

.config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.config-label {
    font-family: pixelFont, monospace;
    color: #fff;
    font-size: 14px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.config-input {
    flex: 1;
    min-width: 140px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 2px solid rgb(149,108,65);
    font-size: 16px;
}

.config-checkbox {
    width: 24px;
    height: 24px;
    accent-color: rgb(255,255,0);
}

.config-help {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.85);
}

.config-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 6px;
}

.config-inline-actions {
    margin-top: 0;
}

.config-btn {
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: #fff;
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}

.config-btn:hover { background-color: rgb(130,90,50); border-color: rgb(200,150,100); }
.config-btn:active { transform: translateY(2px); }
/* Config modal additional controls */
.config-subtitle {
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: #fff;
    margin-top: 8px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}

.config-slider {
    flex: 1;
    appearance: none;
    height: 6px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
    outline: none;
}
.config-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px; height: 14px;
    background: rgb(255, 255, 0);
    border: 2px solid rgb(149,108,65);
    border-radius: 50%;
}
.config-slider-value {
    min-width: 38px;
    text-align: right;
    font-family: pixelFont, monospace;
    color: #fff;
}
.config-slider-remaining {
    min-width: 120px;
    text-align: right;
    font-family: pixelFont, monospace;
    color: #fff;
}

.config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.config-grid-item {
    font-family: pixelFont, monospace;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 4px;
    border: 2px solid rgba(0,0,0,0.3);
    background: rgba(255,255,255,0.15);
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}
.config-grid-item:hover { transform: translateY(-1px); }
.config-grid-item:active { transform: translateY(1px); }
.config-grid-item.active {
    background: #1f7a1f; /* green */
    border-color: #2aa12a;
}
.config-grid-item.active[data-npc-name="Mr.C"] {
    background: #b8860b; /* goldenrod for Mr.C */
    border-color: #e0b53e;
}
.config-grid-item:not(.active) {
    background: rgba(120,120,120,0.3);
    border-color: rgba(120,120,120,0.6);
}

/* Sprite grid styling */
.config-sprite-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.config-sprite-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px;
    gap: 4px;
}
.config-sprite-canvas,
.config-sprite-img {
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transition: filter 0.2s ease;
}
.config-sprite-label {
    font-size: 10px;
    text-align: center;
    word-break: break-word;
    line-height: 1.1;
    max-width: 100%;
}
/* Grey filter for disabled items/NPCs in config UI */
.config-grid-item:not(.active) .config-sprite-canvas,
.config-grid-item:not(.active) .config-sprite-img {
    filter: grayscale(100%) brightness(0.6);
}

/* Item config UI */
.config-items-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: rgba(58, 34, 16, 0.42);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
}

.config-items-toolbar-top {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.config-item-search-wrap {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex: 1 1 360px;
}

.config-item-search {
    min-width: 220px;
    flex: 1 1 auto;
    min-height: 52px;
    padding: 0 16px;
    font-family: pixelFont, monospace;
    font-size: 15px;
    border-radius: 8px;
    border: 2px solid rgba(95, 62, 30, 0.9);
    background: rgba(30, 16, 8, 0.72);
    color: #fff7d6;
}

.config-item-search::placeholder {
    color: rgba(255,247,214,0.62);
}

.config-item-search:focus {
    outline: none;
    border-color: rgba(255, 221, 114, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 221, 114, 0.18);
}

.config-item-search-clear {
    flex: 0 0 auto;
    min-width: 88px;
    min-height: 52px;
    padding: 0 14px;
}

.config-item-search-clear:disabled {
    opacity: 0.45;
    cursor: default;
}

.config-items-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
}

.config-items-summary-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
}

.config-items-summary-label {
    font-family: pixelFont, monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.72);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.config-items-summary-value {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: #fff;
}

.config-chip-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.config-filter-chip {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.config-filter-chip.active {
    background: rgba(31,122,31,0.9);
    border-color: rgba(255,255,150,0.5);
}

#cfg-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    align-items: stretch;
}

.config-item-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100%;
    padding: 14px;
    background: linear-gradient(180deg, rgba(62, 35, 16, 0.74) 0%, rgba(43, 24, 12, 0.78) 100%);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

/* An explicit display value overrides the [hidden] default, so search/filter
   couldn't hide rows without this. */
.config-item-row[hidden] {
    display: none;
}

.config-item-row.custom-price {
    border-color: rgba(255,255,120,0.48);
    box-shadow: inset 0 0 0 1px rgba(255,255,120,0.12), 0 10px 18px rgba(0,0,0,0.18);
}

.config-item-row.disabled {
    opacity: 0.82;
}

.config-item-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

.config-item-toggle {
    width: 100%;
    min-width: 0;
    min-height: 148px;
    justify-content: center;
    gap: 10px;
    padding: 14px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    border: 2px solid rgba(255,255,255,0.12);
}

.config-item-toggle .config-sprite-img {
    width: 52px;
    height: 52px;
}

.config-item-toggle .config-sprite-label {
    font-size: 13px;
    text-align: center;
    line-height: 1.25;
}

.config-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}

.config-item-badge {
    font-family: pixelFont, monospace;
    font-size: 10px;
    color: rgba(255,255,255,0.9);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 999px;
    padding: 4px 8px;
}

.config-item-row[data-enabled="true"] .config-item-state-badge {
    background: rgba(50, 132, 62, 0.88);
    border-color: rgba(188, 255, 167, 0.35);
}

.config-item-row[data-enabled="false"] .config-item-state-badge {
    background: rgba(116, 116, 116, 0.55);
    border-color: rgba(220, 220, 220, 0.16);
    color: rgba(255,255,255,0.76);
}

.config-item-controls {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    width: 100%;
    margin-top: auto;
}

.config-price-wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 10px;
    background: rgba(0,0,0,0.18);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
}

.config-price-caption {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.7);
}

.config-item-price-status {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: #ffe58a;
}

.config-price-input-wrap {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.config-price-label {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 40px;
    font-size: 14px;
    color: #8f8;
    font-weight: bold;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
}

.config-item-price {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    font-family: pixelFont, monospace;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    color: #fff;
    text-align: right;
    /* Hide the native number spinner arrows so the value isn't crowded/clipped */
    appearance: textfield;
    -moz-appearance: textfield;
}
.config-item-price::-webkit-outer-spin-button,
.config-item-price::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}
.config-item-price:focus {
    outline: none;
    border-color: #4a90d9;
}

.config-price-reset {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: #fff;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    min-height: 40px;
    padding: 0 10px;
    cursor: pointer;
}

.config-price-reset:disabled {
    opacity: 0.45;
    cursor: default;
}

.config-item-note {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.78);
    text-align: center;
}

.config-empty-state {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: rgba(255,255,255,0.8);
    text-align: center;
    padding: 14px 12px;
    background: rgba(0,0,0,0.18);
    border: 1px dashed rgba(255,255,255,0.2);
    border-radius: 6px;
}

@media (max-width: 768px) {
    .tutorial-overlay {
        padding: 12px;
    }

    .tutorial-modal {
        padding: 16px;
        gap: 10px;
    }

    .tutorial-spotlight {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .tutorial-modal-directory {
        width: 100%;
    }

    .tutorial-directory {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .tutorial-directory-tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .tutorial-directory-tab {
        flex: 0 0 160px;
    }

    .tutorial-directory-hero {
        grid-template-columns: 1fr;
    }

    .tutorial-directory-hero-media {
        min-height: 132px;
    }

    .tutorial-asset-grid,
    .tutorial-directory-sections,
    .tutorial-steps {
        grid-template-columns: 1fr;
    }

    .tutorial-steps {
        grid-template-columns: 1fr;
    }

    .tutorial-step {
        padding: 12px;
    }

    .tutorial-spotlight-portrait-wrap {
        width: 100%;
        height: auto;
        padding: 12px 0;
    }

    .tutorial-spotlight-name {
        font-size: 22px;
    }

    .tutorial-spotlight-chips {
        justify-content: center;
    }

    .tutorial-title {
        font-size: 22px;
    }

    .tutorial-intro,
    .tutorial-list {
        font-size: 11px;
    }

    .tutorial-section-title {
        font-size: 14px;
    }

    .tutorial-actions {
        flex-direction: column;
    }

    .tutorial-button {
        width: 100%;
    }

    .config-overlay { padding: 10px; }
    .config-modal { 
        max-width: 98vw; 
        padding: 14px; 
        gap: 10px;
    }
    .config-title { font-size: 18px; }
    .config-tab-bar { gap: 6px; }
    .config-tab {
        flex: 1 1 calc(50% - 6px);
        font-size: 12px;
        padding: 8px 10px;
    }
    .config-subtitle { font-size: 14px; }
    .config-label { font-size: 12px; }
    .config-input { font-size: 16px; padding: 6px 8px; }
    .config-btn { width: 100%; padding: 10px; }
    .config-actions { flex-direction: column; gap: 8px; }
    .config-grid { 
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); 
        gap: 6px;
    }
    .config-grid-item { 
        font-size: 12px; 
        padding: 6px 8px; 
    }
    .config-row { flex-wrap: wrap; }
    .config-slider { width: 100%; }
    .config-items-toolbar-top {
        flex-direction: column;
        align-items: stretch;
    }
    .config-items-summary {
        text-align: left;
        white-space: normal;
    }
    .config-item-row {
        padding: 12px;
    }
    .config-item-main {
        gap: 8px;
    }
    .config-item-toggle {
        min-width: 0;
        min-height: 128px;
    }
    .config-item-search-wrap {
        flex-basis: 100%;
    }
    .config-items-summary {
        justify-content: flex-start;
    }
    .config-price-input-wrap {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .config-price-reset {
        grid-column: 1 / -1;
    }
    .config-item-price {
        min-height: 42px;
    }
}

@media (max-height: 600px) {
    .config-overlay { padding: 5px; }
    .config-modal { gap: 8px; padding: 12px; }
}

/* Credits Menu Styles */
.credits-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
    overflow-y: auto;
    padding: 40px 20px;
}

.credits-title {
    font-family: pixelFont, monospace;
    font-size: 36px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    text-align: center;
}

.credits-content {
    background-color: rgba(187, 132, 75, 0.9);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 30px;
    max-width: 600px;
    max-height: 400px;
    overflow-y: auto;
    color: rgb(255, 255, 255);
    font-family: pixelFont, monospace;
    font-size: .8rem;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.8;
}

.credits-back-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.credits-back-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.credits-back-button:active {
    transform: translateY(2px);
}

/* Main Menu Styles */
.main-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
}

.main-menu-title-image {
    width: 400px;
    height: auto;
    max-width: 90vw;
    margin-bottom: 30px;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.main-menu-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 100, 100);
    border: 3px solid rgb(70, 70, 70);
    border-radius: 4px;
    padding: 15px 40px;
    cursor: pointer;
    width: 250px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.main-menu-button:hover {
    background-color: rgb(130, 130, 130);
    border-color: rgb(100, 100, 100);
}

.main-menu-button:active {
    transform: translateY(2px);
}

/* Difficulty Menu Styles */
.difficulty-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #87ceeb 0%, #e0f6ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 999;
    pointer-events: auto;
    gap: 30px;
    overflow-y: auto;
    padding: 20px;
    padding-top: 20%;
}

.difficulty-title {
    font-family: pixelFont, monospace;
    font-size: 32px;
    color: rgb(0, 0, 0);
    text-shadow: 3px 3px 0 rgba(255, 255, 255, 0.5);
    margin: 0;
    padding: 0;
    text-align: center;
}

.difficulty-container {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1400px;
}

.difficulty-card {
    border: 5px solid;
    border-radius: 8px;
    padding: 30px 25px;
    width: 220px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.95);
}

.difficulty-card-easy {
    border-color: rgb(0, 200, 0);
    background-color: rgba(100, 255, 100, 0.15);
}

.difficulty-card-medium {
    border-color: rgb(0, 0, 200);
    background-color: rgba(100, 100, 255, 0.15);
}

.difficulty-card-hard {
    border-color: rgb(200, 0, 0);
    background-color: rgba(255, 100, 100, 0.15);
}

.difficulty-card-title {
    font-family: pixelFont, monospace;
    font-size: 28px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.difficulty-card-easy .difficulty-card-title {
    color: rgb(0, 150, 0);
}

.difficulty-card-medium .difficulty-card-title {
    color: rgb(0, 0, 150);
}

.difficulty-card-hard .difficulty-card-title {
    color: rgb(150, 0, 0);
}

.difficulty-feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0;
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(0, 0, 0);
    gap: 10px;
}

.feature-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.difficulty-select-btn {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 25px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 10px;
}

.difficulty-select-btn:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.difficulty-select-btn:active {
    transform: translateY(2px);
}

/* Title Screen Options Menu Styles */
.title-options-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
    overflow-y: auto;
    padding: 20px;
}

.options-title {
    font-family: pixelFont, monospace;
    font-size: 32px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    text-align: center;
}

.options-section {
    background-color: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-width: 350px;
    max-width: 500px;
}

.options-section-title {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 10px 0 5px 0;
    border-bottom: 2px solid rgb(149, 108, 65);
}

.slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.options-icon {
    width: 30px;
    height: 30px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

.slider-row label {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    min-width: 60px;
}

.options-slider {
    flex: 1;
    height: 20px;
    cursor: pointer;
    accent-color: rgb(255, 255, 0);
}

.title-controls-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.title-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.title-control-label {
    min-width: 80px;
}

.title-control-key {
    min-width: 100px;
    text-align: right;
    color: rgb(255, 255, 200);
}

.options-button-group {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

.options-button {
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.options-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.options-button:active {
    transform: translateY(2px);
}

.options-button-danger {
    background-color: rgb(150, 50, 50);
    border-color: rgb(200, 80, 80);
}

.options-button-danger:hover {
    background-color: rgb(180, 60, 60);
    border-color: rgb(230, 100, 100);
}

.options-back-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 20px;
}

.options-back-button:hover {
    background-color: rgb(130, 90, 50);
    border-color: rgb(200, 150, 100);
}

.options-back-button:active {
    transform: translateY(2px);
}

.options-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    width: min(560px, 100%);
}

.options-tab {
    font-family: pixelFont, monospace;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(100, 70, 40, 0.72);
    border: 2px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.45);
}

.options-tab:hover {
    background: rgba(130, 90, 50, 0.88);
    border-color: rgba(255, 230, 170, 0.3);
}

.options-tab:active {
    transform: translateY(1px);
}

.options-tab.active {
    background: rgba(31, 122, 31, 0.94);
    border-color: rgba(255, 255, 150, 0.5);
}

.options-panel-wrap {
    width: min(560px, 100%);
}

.options-tab-panel {
    display: none;
    flex-direction: column;
    gap: 16px;
}

.options-tab-panel.active {
    display: flex;
}

.title-options-menu .options-section {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}

.options-tab-panel .options-button-group {
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .options-tab-bar {
        width: 100%;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
    }

    .options-tab {
        flex: 0 0 auto;
    }

    .options-panel-wrap {
        width: 100%;
    }

    .title-options-menu .options-section {
        padding: 16px;
    }
}

/* Credits Menu Styles */
.credits-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 999;
    pointer-events: auto;
    gap: 20px;
    overflow-y: auto;
    padding: 40px 20px;
}

.credits-title {
    font-family: pixelFont, monospace;
    font-size: 36px;
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 0;
    text-align: center;
}

.credits-content {
    background-color: rgba(187, 132, 75, 0.9);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 30px;
    max-width: 600px;
    max-height: 400px;
    overflow-y: auto;
    color: rgb(255, 255, 255);
    font-family: pixelFont, monospace;
    font-size: .8rem;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
    line-height: 1.8;
}

.credits-back-button {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 70, 40);
    border: 3px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 12px 40px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.credits-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.credits-portrait {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Custom Difficulty Styles */
.difficulty-card-custom {
    border-color: rgb(150, 100, 200);
    background-color: rgba(200, 150, 255, 0.15);
}

.difficulty-card-custom .difficulty-card-title {
    color: rgb(100, 50, 150);
}

.feature-toggle-btn {
    transition: transform 0.1s ease;
}

.feature-toggle-btn:hover {
    transform: scale(1.1);
}

.feature-toggle-btn:active {
    transform: scale(0.95);
}

/* Lose Screen Styles */
.lose-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    color: white;
    text-align: center;
}

.lose-title {
    font-size: 48px;
    color: #ff4444;
    margin-bottom: 20px;
}

.lose-message {
    font-size: 24px;
    margin-bottom: 40px;
}

.lose-btn {
    padding: 15px 30px;
    font-size: 20px;
    background-color: #444;
    color: white;
    border: 2px solid white;
    cursor: pointer;
    font-family: pixelFont;
}

.lose-btn:hover {
    background-color: #666;
}
/* ==================== MOBILE CONTROLS ==================== */

#mobile-controls {
    display: none; /* Hidden by default, shown via JS on mobile */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks through to canvas */
    z-index: 1000;
    touch-action: none;
}

#mobile-controls.active {
    display: block;
}

/* Top Left Mobile Menu Buttons */
#mobile-menu-buttons {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.mobile-menu-btn {
    width: 50px;
    height: 50px;
    background: rgba(187, 132, 75, 0.85);
    border: 3px solid rgba(149, 108, 65, 0.9);
    border-radius: 8px;
    font-size: 22px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.mobile-menu-btn:active, .mobile-menu-btn.pressed {
    background: rgba(149, 108, 65, 0.95);
    transform: scale(0.95);
}

/* D-Pad Container */
#dpad {
    position: absolute;
    bottom: 100px;
    left: 30px;
    width: 140px;
    height: 140px;
    pointer-events: auto;
}

.dpad-btn {
    position: absolute;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
    border: 3px solid rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}

.dpad-btn:active, .dpad-btn.pressed {
    background: rgba(100, 200, 100, 0.8);
    transform: scale(0.95);
}

#dpad-up {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#dpad-down {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#dpad-left {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

#dpad-right {
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#dpad-up:active, #dpad-up.pressed { transform: translateX(-50%) scale(0.95); }
#dpad-down:active, #dpad-down.pressed { transform: translateX(-50%) scale(0.95); }
#dpad-left:active, #dpad-left.pressed { transform: translateY(-50%) scale(0.95); }
#dpad-right:active, #dpad-right.pressed { transform: translateY(-50%) scale(0.95); }

/* Action Buttons Container - simplified for 2 buttons */
#action-buttons {
    position: absolute;
    bottom: 100px;
    right: 30px;
    width: 70px;
    height: 130px;
    pointer-events: auto;
}

.action-btn {
    position: absolute;
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.6);
    border: 3px solid rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    font-family: pixelFont, monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s, box-shadow 0.2s;
}

.action-btn:active, .action-btn.pressed {
    background: rgba(100, 200, 100, 0.8);
    transform: scale(0.95);
}

/* Interact button (E) - bottom, hold for special */
#btn-interact {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(100, 200, 255, 0.7);
}

#btn-interact:active, #btn-interact.pressed {
    background: rgba(50, 150, 255, 0.9);
    transform: translateX(-50%) scale(0.95);
}

/* Eat button (Q) - top */
#btn-eat {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 200, 100, 0.7);
}

#btn-eat:active, #btn-eat.pressed {
    background: rgba(255, 150, 50, 0.9);
    transform: translateX(-50%) scale(0.95);
}

/* Long press indicator for interact button (special action) */
#btn-interact.long-press {
    background: rgba(200, 100, 255, 0.9) !important;
    border-color: rgba(150, 50, 200, 0.9);
    box-shadow: 0 0 15px rgba(200, 100, 255, 0.8);
}

/* Hotbar Controls */
#hotbar-controls {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 500px;
    pointer-events: auto;
}

.hotbar-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.6);
    border: 3px solid rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    transition: background 0.1s, transform 0.1s;
}

.hotbar-btn:active, .hotbar-btn.pressed {
    background: rgba(100, 200, 100, 0.8);
    transform: scale(0.95);
}

/* ============================================
   Mobile Inventory Overlay
   ============================================ */
#mobile-inventory-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

#mobile-inventory-panel {
    background: rgb(187, 132, 75);
    border: 5px solid rgb(149, 108, 65);
    border-radius: 8px;
    padding: 15px;
    width: 95%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#mobile-inv-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid rgb(149, 108, 65);
    padding-bottom: 10px;
}

#mobile-inv-title {
    font-family: pixelFont, monospace;
    font-size: 18px;
    color: white;
    text-shadow: 2px 2px 0 black;
}

#mobile-inv-close {
    font-family: pixelFont, monospace;
    font-size: 24px;
    color: white;
    background: rgb(150, 50, 50);
    border: 2px solid rgb(200, 80, 80);
    border-radius: 4px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#mobile-inv-close:active {
    background: rgb(180, 60, 60);
}

#mobile-inv-instructions {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(255, 255, 200);
    text-align: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

#mobile-inv-container-section,
#mobile-inv-player-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#mobile-inv-container-label,
#mobile-inv-player-label {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: white;
    text-shadow: 1px 1px 0 black;
}

#mobile-inv-container-grid,
#mobile-inv-player-grid {
    display: grid;
    gap: 6px;
    justify-content: center;
}

#mobile-inv-container-grid {
    grid-template-columns: repeat(4, 60px);
}

#mobile-inv-player-grid {
    grid-template-columns: repeat(4, 60px);
}

.mobile-inv-slot {
    width: 60px;
    height: 60px;
    background: rgb(149, 108, 65);
    border: 3px solid rgb(100, 70, 40);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, background 0.15s;
}

.mobile-inv-slot:active {
    background: rgb(170, 128, 85);
}

.mobile-inv-slot.selected {
    border-color: rgb(255, 255, 0);
    background: rgba(255, 255, 0, 0.2);
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.5);
}

.mobile-inv-slot.empty {
    background: rgb(120, 85, 50);
}

.mobile-inv-slot-img {
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.mobile-inv-slot-amount {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: white;
    text-shadow: 1px 1px 0 black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black;
    pointer-events: none;
}

#mobile-inv-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 2px solid rgb(149, 108, 65);
}

.mobile-inv-action-btn {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: white;
    background: rgb(100, 70, 40);
    border: 2px solid rgb(149, 108, 65);
    border-radius: 4px;
    padding: 10px 15px;
    cursor: pointer;
    transition: background 0.15s;
}

.mobile-inv-action-btn:active {
    background: rgb(130, 90, 50);
}

.mobile-inv-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#mobile-inv-selected-info {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: white;
    text-align: center;
    min-height: 20px;
    padding: 5px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Robot-specific instruction grid */
#mobile-inv-instructions-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#mobile-inv-instructions-label {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: white;
    text-shadow: 1px 1px 0 black;
}

#mobile-inv-instructions-grid {
    display: grid;
    grid-template-columns: repeat(6, 50px);
    gap: 4px;
    justify-content: center;
    max-height: 120px;
    overflow-y: auto;
}

.mobile-inv-instruction-slot {
    width: 50px;
    height: 50px;
    background: rgb(50, 50, 50);
    border: 2px solid rgb(0, 255, 0);
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-inv-instruction-slot.current {
    border-color: white;
    box-shadow: 0 0 8px white;
}

.mobile-inv-instruction-slot.selected {
    border-color: rgb(255, 255, 0);
    background: rgba(255, 255, 0, 0.2);
}

.mobile-inv-instruction-img {
    width: 40px;
    height: 40px;
    image-rendering: pixelated;
    pointer-events: none;
}

/* Robot fuel display */
#mobile-inv-robot-info {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.mobile-inv-fuel-bar {
    width: 100px;
    height: 20px;
    background: rgb(50, 50, 50);
    border: 2px solid rgb(100, 100, 100);
    border-radius: 3px;
    overflow: hidden;
}

.mobile-inv-fuel-fill {
    height: 100%;
    background: rgb(0, 255, 0);
    transition: width 0.2s;
}

.mobile-inv-fuel-label {
    font-family: pixelFont, monospace;
    font-size: 11px;
    color: rgb(0, 255, 0);
}

/* Robot control buttons */
#mobile-inv-robot-controls {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mobile-inv-robot-btn {
    font-family: pixelFont, monospace;
    font-size: 12px;
    color: white;
    background: rgb(50, 50, 50);
    border: 2px solid rgb(100, 100, 100);
    border-radius: 4px;
    padding: 8px 15px;
    cursor: pointer;
}

.mobile-inv-robot-btn.active {
    background: white;
    color: black;
}

.mobile-inv-robot-btn.destroy {
    background: rgb(150, 50, 50);
    border-color: rgb(200, 80, 80);
}

/* Mobile controls are shown via JavaScript adding .active class */
/* This media query only hides on true desktop with mouse */
@media (min-width: 1025px) and (hover: hover) and (pointer: fine) {
    #mobile-controls:not(.active) {
        display: none;
    }
}

/* Adjust for smaller screens */
@media (max-width: 600px) {

    
    #dpad {
        bottom: 80px;
        left: 15px;
        width: 120px;
        height: 120px;
    }
    
    .dpad-btn {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
    
    #action-buttons {
        bottom: 80px;
        right: 15px;
        width: 120px;
        height: 120px;
    }
    
    .action-btn {
        width: 45px;
        height: 45px;
        font-size: 14px;
    }
    
    .hotbar-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    #hotbar-controls {
        gap: 150px;
        bottom: 15px;
    }
}

/* ============================================
   Mobile Responsive - Main Menu & Quest Screen
   ============================================ */

/* Tablet and smaller screens */
@media (max-width: 768px) {
    /* Main Menu Mobile Adjustments */
    .main-menu {
        gap: 16px;
        overflow-y: auto;
        justify-content: center;
        padding: 30px 20px;
    }

    .main-menu-title-image {
        width: min(320px, 75vw);
        margin-bottom: 10px;
    }

    .deluxe-text {
        font-size: clamp(24px, 6vw, 36px);
        letter-spacing: 4px;
        margin-bottom: 16px;
    }

    .main-menu-button {
        font-size: clamp(14px, 3.5vw, 18px);
        padding: 16px 20px;
        width: min(320px, 78vw);
    }
    
    /* Quest Screen Mobile Adjustments */
    .quests-container {
        min-width: 5vw;
        max-width: 92vw;
        padding: 12px;
        gap: 10px;
    }
    
    .quests-header h2 {
        font-size: 16px;
    }
    
    .quests-list {
        max-height: 50vh;
        min-height: 25vh;
    }
    
    .quest-item {
        padding: 8px;
    }
    
    .quest-title {
        font-size: 12px;
    }
    
    .quest-status {
        font-size: 10px;
    }
    
    .quest-details-button {
        font-size: 10px;
        padding: 5px 8px;
        height: 24px;
    }
    
    .quests-close-instruction {
        font-size: 10px;
    }
    
    /* Difficulty Menu Mobile */
    .difficulty-menu {
        padding: 15px;
        gap: 15px;
    }
    
    .difficulty-title {
        font-size: 22px;
    }
    
    .difficulty-container {
        gap: 15px;
    }
    
    .difficulty-card {
        width: 180px;
        min-height: 320px;
        padding: 20px 15px;
    }
    
    .difficulty-card-title {
        font-size: 20px;
    }
    
    .difficulty-feature {
        font-size: 12px;
    }
    
    .feature-icon {
        width: 20px;
        height: 20px;
    }
    
    .difficulty-select-btn {
        font-size: 14px;
        padding: 10px 25px;
    }
    
    /* Pause Menu Mobile */
    #pause-menu {
        min-width: 280px;
        max-width: 90vw;
        padding: 20px;
        gap: 15px;
    }
    
    .pause-title {
        font-size: 22px;
    }

    .pause-panel-wrap {
        width: 100%;
    }

    #pause-menu[data-active-tab="help"] {
        width: 95vw;
        max-width: 95vw;
    }
    
    /* Hide keyboard controls on mobile, show touch info */
    .pause-controls-section {
        display: none !important;
    }
    
    .pause-mobile-info {
        display: flex !important;
    }
    
    .options-controls-section {
        display: none !important;
    }
    

    
    .quest-pagination {
        flex-direction: column;
        gap: 10px;
    }
    
    .quest-page-btn {
        width: 100%;
        max-width: 200px;
    }
    
    .quest-page-info {
        font-size: 10px;
        min-width: auto;
    }

    .options-mobile-info {
        display: flex !important;
        flex-direction: column;
    }
    
    /* Credits Menu Mobile */
    .credits-content {
        max-width: 90vw;
        max-height: 50vh;
        padding: 20px;
        font-size: .8rem;
    }
    
    .credits-title {
        font-size: 26px;
    }
}

/* Phone screens (portrait) */
@media (max-width: 480px) {
    /* Main Menu - Very Small Screens */
    .main-menu {
        padding: 24px 16px;
        gap: 14px;
        overflow-y: auto;
        justify-content: center;
    }

    .main-menu-title-image {
        width: min(280px, 72vw);
        margin-bottom: 8px;
    }

    .deluxe-text {
        font-size: clamp(22px, 7vw, 30px);
        letter-spacing: 3px;
        margin-bottom: 12px;
    }

    .main-menu-button {
        font-size: clamp(14px, 4vw, 18px);
        padding: 16px 20px;
        width: min(300px, 80vw);
    }
    
    /* Quest Screen - Very Small Screens */
    .quests-container {
        min-width: 2vw;
        max-width: 20vw;
        max-height: 85vh;
        padding: 12px 8px;
        gap: 6px;
        border-width: 3px;
        font-size: 11px;
        top: auto;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 8px 8px 0 0;
    }
    
    .quests-header-wrapper {
        padding-bottom: 6px;
        gap: 5px;
    }
    
    .quests-header h2 {
        font-size: 15px;
    }
    
    .quests-close-btn {
        width: 28px;
        height: 28px;
        font-size: 20px;
    }
    
    .quests-list {
        gap: 6px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }
    
    .quest-item {
        padding: 8px;
        gap: 5px;
        margin-bottom: 0;
    }
    
    .quest-content {
        gap: 5px;
    }
    
    .quest-title {
        font-size: 12px;
        margin-bottom: 3px;
    }
    
    .quest-status {
        font-size: 10px;
        margin-top: 3px;
    }
    
    .quest-progress-container {
        gap: 5px;
        margin: 3px 0;
    }
    
    .quest-details-button {
        font-size: 10px;
        padding: 5px 8px;
        height: 24px;
    }
    
    .quest-progress-bar {
        flex: 1 1 100px;
        height: 8px;
    }
    
    .quest-goal-card {
        padding: 6px;
        gap: 5px;
    }
    
    .quests-close-instruction {
        font-size: 10px;
        margin-top: 6px;
        padding-top: 6px;
    }
    
    .quest-pagination {
        padding: 8px;
        gap: 10px;
    }
    
    .quest-page-btn {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .quest-page-info {
        font-size: 10px;
    }
    
    /* Difficulty Menu - Very Small Screens */
    .difficulty-menu {
        padding: 10px;
        gap: 10px;
        justify-content: flex-start;
        padding-top: 10px;
    }
    
    .difficulty-scroll-hint {
        display: block;
    }
    
    .difficulty-title {
        font-size: 18px;
    }
    
    .difficulty-container {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    
    .difficulty-card {
        width: 90%;
        max-width: 260px;
        min-height: auto;
        padding: 15px 12px;
    }
    
    .difficulty-card-title {
        font-size: 18px;
    }
    
    .difficulty-feature {
        font-size: 11px;
        padding: 5px 0;
    }
    
    .feature-icon {
        width: 18px;
        height: 18px;
    }
    
    .difficulty-select-btn {
        font-size: 12px;
        padding: 8px 20px;
    }
    
    /* Pause Menu - Very Small Screens */
    #pause-menu {
        min-width: 90vw;
        max-width: 95vw;
        padding: 15px;
        gap: 12px;
    }
    
    .pause-title {
        font-size: 18px;
    }

    .pause-actions {
        gap: 10px;
    }

    .pause-inline-tutorial {
        max-height: min(58vh, 640px);
        padding: 10px;
        padding-right: 2px;
    }

    .pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-tab {
        flex: 1 1 120px;
    }

    .pause-inline-tutorial .tutorial-directory-compact .tutorial-directory-hero {
        grid-template-columns: 1fr;
    }

    .pause-inline-tutorial .tutorial-directory-compact .tutorial-asset-grid {
        grid-template-columns: 1fr;
    }
    
    .pause-menu-label {
        font-size: 11px;
    }
    
    .pause-slider-icon {
        width: 24px;
        height: 24px;
    }
    
    .pause-slider-label {
        font-size: 10px;
        min-width: 40px;
    }
    
    .mobile-info-item {
        font-size: 10px;
    }
    
    .mobile-info-title {
        font-size: 11px;
    }
    
    /* Credits Menu - Very Small Screens */
    .credits-menu {
        padding: 20px 10px;
    }
    
    .credits-title {
        font-size: 20px;
    }
    
    .credits-content {
        max-width: 95vw;
        max-height: 45vh;
        padding: 15px;
        font-size: .6rem;
        line-height: 1.6;
    }
    
    .credits-back-button {
        font-size: 14px;
        padding: 10px 30px;
    }
}

/* Landscape orientation on mobile - adjust quest panel positioning */
@media (max-height: 500px) and (orientation: landscape) {
    .quests-container {
        min-height: 70vh;
        max-height: 85vh;
        max-width: 50vw;
    }

    .quests-list {
        max-height: 55vh;
        min-height: 40vh;
    }

    .main-menu {
        gap: 8px;
        overflow-y: auto;
        justify-content: flex-start;
        padding: 12px 15px;
    }

    .main-menu-title-image {
        width: 100px;
        margin-bottom: 0;
    }

    .deluxe-text {
        font-size: 14px;
        letter-spacing: 2px;
        margin-bottom: 4px;
        animation: none;
    }

    .main-menu-button {
        padding: 8px 16px;
        font-size: 12px;
        width: 160px;
    }

    .difficulty-container {
        flex-direction: row;
        max-height: fit-content;
        padding-top: 100px;
    }

    .difficulty-menu {
        padding-top: 50px;
    }
    
    .difficulty-card {
        width: 28%;
    }
}

/* Difficulty Back Button */
.difficulty-back-btn {
    font-family: pixelFont, monospace;
    font-size: 16px;
    color: rgb(255, 255, 255);
    background-color: rgb(100, 100, 100);
    border: 3px solid rgb(70, 70, 70);
    border-radius: 4px;
    padding: 10px 30px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
    margin-top: 20px;
}

.difficulty-back-btn:hover {
    background-color: rgb(130, 130, 130);
    border-color: rgb(100, 100, 100);
}

.difficulty-back-btn:active {
    transform: translateY(2px);
}

/* Accessibility preferences */
:root {
    --ui-scale: 1;
    --acc-text-scale: 1;
    --acc-control-scale: 1;
    --acc-focus-ring: #ffe86a;
}

html.acc-large-text,
body.acc-large-text {
    --acc-text-scale: 1.15;
}

html.acc-large-ui,
body.acc-large-ui {
    --acc-control-scale: 1.2;
}

.title-options-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(20px * var(--ui-scale));
    width: min(calc(560px * var(--ui-scale)), 100%);
    max-width: 100%;
}

.accessibility-settings-section {
    gap: calc(14px * var(--ui-scale));
}

.accessibility-section-intro {
    margin: 0;
}

.accessibility-settings-list {
    display: flex;
    flex-direction: column;
    gap: calc(12px * var(--ui-scale));
    width: 100%;
}

.accessibility-toggle-row,
.accessibility-scale-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(16px * var(--ui-scale));
    padding: calc(12px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border: 2px solid rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.12);
}

.accessibility-copy {
    display: flex;
    flex-direction: column;
    gap: calc(5px * var(--ui-scale));
    min-width: 0;
    flex: 1;
}

.accessibility-label {
    font-family: pixelFont, monospace;
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.accessibility-description {
    font-family: pixelFont, monospace;
    font-size: calc(10px * var(--ui-scale) * var(--acc-text-scale));
    line-height: 1.5;
    color: rgb(255, 245, 210);
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.accessibility-toggle-input {
    width: calc(22px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(22px * var(--ui-scale) * var(--acc-control-scale));
    flex: 0 0 auto;
    accent-color: rgb(255, 226, 92);
}

.accessibility-scale-input-wrap {
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
    min-width: min(calc(220px * var(--ui-scale)), 45%);
}

.accessibility-scale-input {
    width: 100%;
    height: calc(22px * var(--ui-scale));
    accent-color: rgb(255, 226, 92);
}

.accessibility-scale-value {
    min-width: calc(48px * var(--ui-scale));
    text-align: right;
    font-family: pixelFont, monospace;
    font-size: calc(11px * var(--ui-scale) * var(--acc-text-scale));
    color: rgb(255, 255, 200);
}

.accessibility-toggle-row:focus-within,
.accessibility-scale-row:focus-within {
    border-color: rgba(255, 232, 106, 0.85);
    box-shadow: 0 0 0 2px rgba(255, 232, 106, 0.2);
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--acc-focus-ring);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
}

.main-menu {
    gap: calc(20px * var(--ui-scale));
}

.main-menu-title-image {
    width: min(calc(400px * var(--ui-scale)), 90vw);
}

.deluxe-text {
    font-size: calc(42px * var(--ui-scale) * var(--acc-text-scale));
}

.main-menu-button {
    width: min(calc(250px * var(--ui-scale) * var(--acc-control-scale)), 90vw);
    font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(15px * var(--ui-scale) * var(--acc-control-scale)) calc(40px * var(--ui-scale) * var(--acc-control-scale));
}

.title-options-menu {
    gap: calc(20px * var(--ui-scale));
    padding: calc(20px * var(--ui-scale));
}

.options-title {
    font-size: calc(32px * var(--ui-scale) * var(--acc-text-scale));
}

.options-tab-bar {
    gap: calc(8px * var(--ui-scale));
    width: 100%;
}

.options-tab {
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(16px * var(--ui-scale) * var(--acc-control-scale));
}

.options-panel-wrap {
    width: 100%;
}

.options-section {
    gap: calc(15px * var(--ui-scale));
    padding: calc(20px * var(--ui-scale));
}

.options-section-title {
    font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(10px * var(--ui-scale)) 0 calc(5px * var(--ui-scale)) 0;
}

.slider-row {
    gap: calc(10px * var(--ui-scale));
}

.options-icon {
    width: calc(30px * var(--ui-scale));
    height: calc(30px * var(--ui-scale));
}

.slider-row label {
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
}

.pause-slider-label {
    font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
}

.options-slider {
    height: calc(20px * var(--ui-scale));
}

.title-control-row {
    gap: calc(15px * var(--ui-scale));
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
}

.options-section-description {
    font-size: calc(11px * var(--ui-scale) * var(--acc-text-scale));
}

.options-button {
    font-size: calc(16px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(12px * var(--ui-scale) * var(--acc-control-scale)) calc(20px * var(--ui-scale) * var(--acc-control-scale));
    min-height: calc(48px * var(--ui-scale) * var(--acc-control-scale));
}

.options-back-button {
    font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(12px * var(--ui-scale) * var(--acc-control-scale)) calc(40px * var(--ui-scale) * var(--acc-control-scale));
    min-height: calc(50px * var(--ui-scale) * var(--acc-control-scale));
}

.pause-button {
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(20px * var(--ui-scale) * var(--acc-control-scale));
    min-height: calc(44px * var(--ui-scale) * var(--acc-control-scale));
}

.difficulty-back-btn {
    font-size: calc(16px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(30px * var(--ui-scale) * var(--acc-control-scale));
    min-height: calc(44px * var(--ui-scale) * var(--acc-control-scale));
}

.mobile-inv-action-btn {
    font-size: calc(11px * var(--ui-scale) * var(--acc-text-scale));
    padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(15px * var(--ui-scale) * var(--acc-control-scale));
    min-height: calc(38px * var(--ui-scale) * var(--acc-control-scale));
}

.save-transfer-editor {
    gap: calc(12px * var(--ui-scale));
}

.save-transfer-editor-title {
    font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
}

.save-transfer-textarea {
    min-height: calc(170px * var(--ui-scale));
    padding: calc(12px * var(--ui-scale));
    font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
}

#pause-menu {
    width: min(calc(640px * var(--ui-scale)), 94vw);
    min-width: min(calc(400px * var(--ui-scale)), 94vw);
    padding: calc(30px * var(--ui-scale));
    gap: calc(20px * var(--ui-scale));
}

#pause-menu[data-active-tab="help"] {
    width: min(calc(920px * var(--ui-scale)), 95vw);
}

.pause-title {
    font-size: calc(30px * var(--ui-scale) * var(--acc-text-scale));
}

.pause-menu-section,
.pause-controls-section {
    gap: calc(10px * var(--ui-scale));
}

.pause-menu-label {
    font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
}

.pause-slider-row {
    gap: calc(15px * var(--ui-scale));
}

.pause-slider-icon {
    width: calc(30px * var(--ui-scale));
    height: calc(30px * var(--ui-scale));
}

.pause-slider-row input[type="range"] {
    width: min(calc(200px * var(--ui-scale)), 100%);
}

.pause-controls-section {
    padding: calc(15px * var(--ui-scale));
    max-height: calc(300px * var(--ui-scale));
}

.pause-controls-title {
    font-size: calc(13px * var(--ui-scale) * var(--acc-text-scale));
}

.pause-button-group,
.pause-actions {
    gap: calc(12px * var(--ui-scale));
}

.quests-container {
    padding: calc(15px * var(--ui-scale));
}

.mobile-menu-btn,
.dpad-btn,
.hotbar-btn {
    width: calc(50px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(50px * var(--ui-scale) * var(--acc-control-scale));
}

.mobile-menu-btn {
    font-size: calc(22px * var(--ui-scale) * var(--acc-text-scale));
}

.dpad-btn {
    font-size: calc(20px * var(--ui-scale) * var(--acc-text-scale));
}

.action-btn {
    width: calc(55px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(55px * var(--ui-scale) * var(--acc-control-scale));
    font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
}

.hotbar-btn {
    font-size: calc(24px * var(--ui-scale) * var(--acc-text-scale));
}

#mobile-menu-buttons {
    gap: calc(10px * var(--ui-scale));
}

#dpad {
    width: calc(140px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(140px * var(--ui-scale) * var(--acc-control-scale));
}

#action-buttons {
    width: calc(70px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(130px * var(--ui-scale) * var(--acc-control-scale));
}

#mobile-inventory-panel {
    padding: calc(15px * var(--ui-scale));
    max-width: min(calc(400px * var(--ui-scale)), 95%);
    gap: calc(12px * var(--ui-scale));
}

#mobile-inv-title {
    font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
}

#mobile-inv-close {
    width: calc(36px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(36px * var(--ui-scale) * var(--acc-control-scale));
    font-size: calc(24px * var(--ui-scale) * var(--acc-text-scale));
}

#mobile-inv-instructions,
#mobile-inv-container-label,
#mobile-inv-player-label,
#mobile-inv-selected-info {
    font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
}

.mobile-inv-slot {
    width: calc(60px * var(--ui-scale) * var(--acc-control-scale));
    height: calc(60px * var(--ui-scale) * var(--acc-control-scale));
}

.mobile-inv-slot-img {
    width: calc(48px * var(--ui-scale));
    height: calc(48px * var(--ui-scale));
}

.mobile-inv-slot-amount {
    font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
}

html.acc-reduce-motion *,
body.acc-reduce-motion * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

html.acc-reduce-motion .deluxe-text,
body.acc-reduce-motion .deluxe-text {
    animation: none !important;
}

html.acc-high-contrast,
body.acc-high-contrast {
    --acc-focus-ring: #ffffff;
}

html.acc-high-contrast .options-section,
body.acc-high-contrast .options-section,
html.acc-high-contrast #pause-menu,
body.acc-high-contrast #pause-menu,
html.acc-high-contrast .quests-container,
body.acc-high-contrast .quests-container,
html.acc-high-contrast #mobile-inventory-panel,
body.acc-high-contrast #mobile-inventory-panel,
html.acc-high-contrast .credits-content,
body.acc-high-contrast .credits-content,
html.acc-high-contrast .difficulty-card,
body.acc-high-contrast .difficulty-card,
html.acc-high-contrast .accessibility-toggle-row,
body.acc-high-contrast .accessibility-toggle-row,
html.acc-high-contrast .accessibility-scale-row,
body.acc-high-contrast .accessibility-scale-row {
    background: #101010;
    border-color: #fff2a8;
    box-shadow: 0 0 0 2px #000000, 0 0 0 4px rgba(255, 242, 168, 0.45);
}

html.acc-high-contrast .main-menu,
body.acc-high-contrast .main-menu,
html.acc-high-contrast .title-options-menu,
body.acc-high-contrast .title-options-menu,
html.acc-high-contrast .credits-menu,
body.acc-high-contrast .credits-menu,
html.acc-high-contrast .difficulty-menu,
body.acc-high-contrast .difficulty-menu,
html.acc-high-contrast #mobile-inventory-overlay,
body.acc-high-contrast #mobile-inventory-overlay {
    background: rgba(0, 0, 0, 0.92);
}

html.acc-high-contrast .options-title,
body.acc-high-contrast .options-title,
html.acc-high-contrast .options-section-title,
body.acc-high-contrast .options-section-title,
html.acc-high-contrast .slider-row label,
body.acc-high-contrast .slider-row label,
html.acc-high-contrast .options-section-description,
body.acc-high-contrast .options-section-description,
html.acc-high-contrast .pause-title,
body.acc-high-contrast .pause-title,
html.acc-high-contrast .pause-controls-title,
body.acc-high-contrast .pause-controls-title,
html.acc-high-contrast .pause-menu-label,
body.acc-high-contrast .pause-menu-label,
html.acc-high-contrast .pause-slider-label,
body.acc-high-contrast .pause-slider-label,
html.acc-high-contrast .accessibility-label,
body.acc-high-contrast .accessibility-label,
html.acc-high-contrast .accessibility-description,
body.acc-high-contrast .accessibility-description,
html.acc-high-contrast .save-transfer-editor-title,
body.acc-high-contrast .save-transfer-editor-title,
html.acc-high-contrast .save-transfer-textarea,
body.acc-high-contrast .save-transfer-textarea,
html.acc-high-contrast #mobile-inv-title,
body.acc-high-contrast #mobile-inv-title,
html.acc-high-contrast #mobile-inv-instructions,
body.acc-high-contrast #mobile-inv-instructions,
html.acc-high-contrast #mobile-inv-container-label,
body.acc-high-contrast #mobile-inv-container-label,
html.acc-high-contrast #mobile-inv-player-label,
body.acc-high-contrast #mobile-inv-player-label,
html.acc-high-contrast #mobile-inv-selected-info,
body.acc-high-contrast #mobile-inv-selected-info,
html.acc-high-contrast .deluxe-text,
body.acc-high-contrast .deluxe-text {
    color: #ffffff;
    text-shadow: none;
}

html.acc-high-contrast .deluxe-text,
body.acc-high-contrast .deluxe-text {
    letter-spacing: 6px;
}

html.acc-high-contrast .options-button,
body.acc-high-contrast .options-button,
html.acc-high-contrast .options-back-button,
body.acc-high-contrast .options-back-button,
html.acc-high-contrast .pause-button,
body.acc-high-contrast .pause-button,
html.acc-high-contrast .options-tab,
body.acc-high-contrast .options-tab,
html.acc-high-contrast .main-menu-button,
body.acc-high-contrast .main-menu-button,
html.acc-high-contrast .difficulty-select-btn,
body.acc-high-contrast .difficulty-select-btn,
html.acc-high-contrast .difficulty-back-btn,
body.acc-high-contrast .difficulty-back-btn,
html.acc-high-contrast .mobile-menu-btn,
body.acc-high-contrast .mobile-menu-btn,
html.acc-high-contrast .dpad-btn,
body.acc-high-contrast .dpad-btn,
html.acc-high-contrast .action-btn,
body.acc-high-contrast .action-btn,
html.acc-high-contrast .hotbar-btn,
body.acc-high-contrast .hotbar-btn,
html.acc-high-contrast .mobile-inv-action-btn,
body.acc-high-contrast .mobile-inv-action-btn,
html.acc-high-contrast #mobile-inv-close,
body.acc-high-contrast #mobile-inv-close {
    background: #000000;
    color: #ffffff;
    border-color: #fff2a8;
    text-shadow: none;
}

html.acc-high-contrast .options-tab.active,
body.acc-high-contrast .options-tab.active {
    background: #fff2a8;
    color: #000000;
}

html.acc-high-contrast .mobile-inv-slot,
body.acc-high-contrast .mobile-inv-slot,
html.acc-high-contrast .mobile-inv-slot.empty,
body.acc-high-contrast .mobile-inv-slot.empty {
    background: #000000;
    border-color: #ffffff;
}

html.acc-high-contrast .mobile-inv-slot.selected,
body.acc-high-contrast .mobile-inv-slot.selected {
    border-color: #fff2a8;
    box-shadow: 0 0 0 3px rgba(255, 242, 168, 0.35);
}

@media (max-width: 768px) {
    .title-options-shell {
        width: 100%;
    }

    .title-options-menu .options-section {
        padding: calc(16px * var(--ui-scale));
    }

    .main-menu-button {
        width: min(calc(210px * var(--ui-scale) * var(--acc-control-scale)), 90vw);
        font-size: calc(14px * var(--ui-scale) * var(--acc-text-scale));
        padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(24px * var(--ui-scale) * var(--acc-control-scale));
    }

    #pause-menu {
        min-width: min(calc(280px * var(--ui-scale)), 90vw);
        max-width: 90vw;
        padding: calc(20px * var(--ui-scale));
        gap: calc(15px * var(--ui-scale));
    }

    .pause-title {
        font-size: calc(22px * var(--ui-scale) * var(--acc-text-scale));
    }

    .accessibility-toggle-row,
    .accessibility-scale-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .accessibility-scale-input-wrap {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .main-menu-title-image {
        width: min(calc(220px * var(--ui-scale)), 90vw);
        margin-bottom: calc(10px * var(--ui-scale));
    }

    .deluxe-text {
        font-size: calc(22px * var(--ui-scale) * var(--acc-text-scale));
        margin-bottom: calc(15px * var(--ui-scale));
    }

    .main-menu-button {
        width: min(calc(180px * var(--ui-scale) * var(--acc-control-scale)), 90vw);
        font-size: calc(12px * var(--ui-scale) * var(--acc-text-scale));
        padding: calc(10px * var(--ui-scale) * var(--acc-control-scale)) calc(20px * var(--ui-scale) * var(--acc-control-scale));
    }

    #pause-menu {
        min-width: 90vw;
        max-width: 95vw;
        padding: calc(15px * var(--ui-scale));
        gap: calc(12px * var(--ui-scale));
    }

    .pause-title {
        font-size: calc(18px * var(--ui-scale) * var(--acc-text-scale));
    }

    .pause-menu-label {
        font-size: calc(11px * var(--ui-scale) * var(--acc-text-scale));
    }

    .pause-slider-icon {
        width: calc(24px * var(--ui-scale));
        height: calc(24px * var(--ui-scale));
    }

    .pause-slider-label {
        font-size: calc(10px * var(--ui-scale) * var(--acc-text-scale));
    }
}

/* Mobile portrait: big buttons, fills the screen width.
   After accessibility var() rules so these win. */
@media (max-width: 768px) and (orientation: portrait) {
    .main-menu-button {
        width: min(320px, 78vw) !important;
        font-size: clamp(14px, 3.5vw, 18px) !important;
        padding: 16px 20px !important;
    }

    .main-menu-title-image {
        width: min(320px, 75vw) !important;
    }

    .deluxe-text {
        font-size: clamp(22px, 6vw, 34px) !important;
    }
}

/* Mobile landscape: shrink title image so everything fits without scrolling.
   This block is last so it wins over the accessibility var() rules above. */
@media (max-height: 500px) and (orientation: landscape) {
    .main-menu {
        gap: 10px;
        overflow-y: auto;
        justify-content: center;
        padding: 14px 20px;
    }

    .main-menu-title-image {
        width: 90px !important;
        margin-bottom: 0;
    }

    .deluxe-text {
        font-size: 14px !important;
        letter-spacing: 2px;
        margin-bottom: 4px;
        animation: none;
    }

    .main-menu-button {
        width: min(280px, 55vw) !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
    }
}

/* Gamepad/controller focus highlight for DOM menu buttons */
.gp-focus {
    outline: 3px solid rgb(255, 221, 102);
    outline-offset: 3px;
    box-shadow: 0 0 12px 2px rgba(255, 221, 102, 0.8);
}
.difficulty-select-btn.gp-focus {
    background-color: rgb(130, 90, 50);
    border-color: rgb(255, 221, 102);
}

/* Postgame Regional Cooperative Exchange */
.cooperative-exchange-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(18, 25, 35, 0.82);
    font-family: pixelFont, "Press Start 2P", monospace;
}

.cooperative-exchange-panel {
    position: relative;
    width: min(860px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 24px;
    color: #382817;
    background: #ead39c;
    border: 6px solid #8b6237;
    box-shadow: 0 10px 0 #392818;
}

.cooperative-exchange-panel h2 {
    margin: 0 48px 18px 0;
    color: #68451f;
    font-size: clamp(16px, 3vw, 25px);
    line-height: 1.4;
}

.cooperative-exchange-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    font-size: 25px;
}

.cooperative-summary,
.cooperative-prosperity {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.cooperative-summary span,
.cooperative-prosperity span {
    padding: 8px;
    background: rgba(255, 255, 255, 0.42);
    font-size: 10px;
    line-height: 1.5;
}

.cooperative-contract-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.cooperative-evaluation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px;
    background: #d2b878;
    border: 3px solid #94703c;
    font-size: 9px;
    line-height: 1.6;
}

.cooperative-evaluation button {
    flex: 0 0 auto;
    padding: 9px;
    color: white;
    background: #6c8f4e;
    border: 3px solid #3f5d2c;
    font-family: inherit;
    cursor: pointer;
}

.cooperative-contract {
    padding: 14px;
    background: #f8e8bd;
    border: 4px solid #a97840;
}

.cooperative-contract-accepted { border-color: #4f8d67; }
.cooperative-contract h3 { margin: 8px 0; font-size: 13px; line-height: 1.45; }
.cooperative-contract p { margin: 7px 0; font-size: 9px; line-height: 1.6; }
.cooperative-contract-district { color: #866027; font-size: 9px; }
.cooperative-contract button,
.cooperative-exchange-close {
    cursor: pointer;
    color: white;
    background: #6c8f4e;
    border: 3px solid #3f5d2c;
    font-family: inherit;
    padding: 10px;
}
.cooperative-contract button:disabled { cursor: default; opacity: 0.5; }
.cooperative-contract .cooperative-contract-abandon {
    margin-right: 8px;
    background: #9b654c;
    border-color: #6e3e2e;
}
.cooperative-exchange-locked { display: grid; gap: 14px; padding: 30px; text-align: center; line-height: 1.7; }

@media (max-width: 700px) {
    .cooperative-exchange-panel { padding: 16px; }
    .cooperative-contract-list { grid-template-columns: 1fr; }
}