* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    background: #000000;
    color: #ffffff;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Game Frame - 4:3 aspect ratio (800x600) centered */
.game-frame {
    /* Original VB6 resolution: 800x600 (4:3 aspect ratio) */
    width: min(800px, 90vw);
    height: min(600px, calc(min(800px, 90vw) * 3 / 4));
    aspect-ratio: 4 / 3;
    position: relative;
    background: #000000;
    border: 2px solid #404040;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.screen {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
}

.screen.active {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #808080; /* VB6 default desktop/window background */
}

/* Intro screen specific - centered fixed-size window */
#intro-screen.screen.active {
    background: #808080; /* Desktop background */
}

/* Intro Screen (VB6 IntroScreen: 7485x6855 twips, Fixed Single border) */
/* Scale to fit within 800x600 frame while maintaining aspect ratio */
.intro-container {
    /* VB6 form: 7485x6855 twips, aspect ratio ≈ 1.092:1 */
    /* Scale to fit within 800x600 frame (800x600 = 4:3, but intro is 7485:6855 ≈ 1.092:1) */
    width: min(748px, 93.5%); /* 748px fits in 800px frame */
    height: min(685px, calc(min(748px, 93.5%) * 6855 / 7485)); /* Maintain aspect ratio */
    aspect-ratio: 7485 / 6855; /* Preserve VB6 aspect ratio */
    position: relative;
    background: #C0C0C0; /* VB6 default form background */
    border: 2px solid #000000; /* VB6 Fixed Single border */
    /* Center within screen */
    margin: 0 auto;
}

.intro-title {
    position: absolute;
    left: 12.82%; /* VB6 Left = 960 / 7485 ≈ 12.82% */
    top: 3.5%; /* VB6 Top = 240 / 6855 ≈ 3.5% */
    width: 77.15%; /* VB6 Width = 5775 / 7485 ≈ 77.15% */
    height: 14.22%; /* VB6 Height = 975 / 6855 ≈ 14.22% */
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 36pt; /* VB6 Size = 36 */
    font-weight: 700; /* VB6 Weight = 700 (bold) */
    font-style: italic; /* VB6 Italic = True */
    color: #000000; /* VB6 ForeColor = &H00000000& (black) */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* VB6 Labels have transparent background */
}

.intro-subtitle {
    position: absolute;
    left: 17.63%; /* VB6 Left = 1320 / 7485 ≈ 17.63% */
    top: 15.75%; /* VB6 Top = 1080 / 6855 ≈ 15.75% */
    width: 67.53%; /* VB6 Width = 5055 / 7485 ≈ 67.53% */
    height: 7.22%; /* VB6 Height = 495 / 6855 ≈ 7.22% */
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 14.25pt; /* VB6 Size = 14.25 */
    font-weight: 400; /* VB6 Weight = 400 (normal) */
    font-style: normal; /* VB6 Italic = False */
    color: #000000; /* VB6 ForeColor = &H00000000& (black) */
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent; /* VB6 Labels have transparent background */
}

.intro-image {
    position: absolute;
    left: 16.03%; /* VB6 Left = 1200 / 7485 ≈ 16.03% */
    top: 24.52%; /* VB6 Top = 1680 / 6855 ≈ 24.52% */
    width: 70.73%; /* VB6 Width = 5295 / 7485 ≈ 70.73% */
    height: 59.68%; /* VB6 Height = 4095 / 6855 ≈ 59.68% */
    object-fit: contain; /* VB6 Stretch = True (but we use contain to prevent distortion) */
    background: transparent;
}

.intro-buttons {
    /* Container for buttons - buttons are absolutely positioned */
    position: relative;
    width: 100%;
    height: 100%;
}

.intro-btn {
    position: absolute;
    top: 89.28%; /* VB6 Top = 6120 / 6855 ≈ 89.28% */
    height: 7.22%; /* VB6 Height = 495 / 6855 ≈ 7.22% */
    white-space: nowrap;
    /* VB6 CommandButton default font (unless specified) */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    font-weight: normal;
}

/* Button positions (VB6 exact Left positions) */
#btn-visit-website {
    left: 11.22%; /* VB6 Left = 840 / 7485 ≈ 11.22% */
    width: 16.23%; /* VB6 Width = 1215 / 7485 ≈ 16.23% */
}

#btn-text-intro {
    left: 32.05%; /* VB6 Left = 2400 / 7485 ≈ 32.05% */
    width: 16.23%; /* VB6 Width = 1215 / 7485 ≈ 16.23% */
}

#btn-play-game {
    left: 52.87%; /* VB6 Left = 3960 / 7485 ≈ 52.87% */
    width: 17.83%; /* VB6 Width = 1335 / 7485 ≈ 17.83% */
    /* VB6 Command2 has explicit font: MS Sans Serif, 8.25pt, Weight=700 */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    font-weight: 700;
}

#btn-quit {
    left: 75.31%; /* VB6 Left = 5640 / 7485 ≈ 75.31% */
    width: 16.23%; /* VB6 Width = 1215 / 7485 ≈ 16.23% */
}

.btn {
    /* VB6 CommandButton default appearance - 3D raised button */
    background: #C0C0C0; /* System 3D Face color */
    color: #000000; /* System Window Text (black) */
    border: 2px outset #C0C0C0; /* 3D raised border */
    cursor: pointer;
    /* Remove modern transitions for VB6 feel */
    border-radius: 0; /* VB6 buttons are square */
    padding: 4px 8px; /* Minimal padding for text to fit */
    margin: 0;
    box-sizing: border-box; /* Include border in width/height */
}

.btn:hover {
    /* VB6 button hover - slightly darker */
    background: #B0B0B0;
    border-color: #A0A0A0;
}
.btn:active {
    /* VB6 button pressed - inset border */
    border-style: inset;
    background: #A0A0A0;
}

.btn-primary {
    font-family: 'MS Sans Serif', sans-serif; /* VB6 Font = MS Sans Serif */
    font-size: 8.25pt; /* VB6 Size = 8.25 */
    font-weight: 700; /* VB6 Weight = 700 (bold) */
    /* VB6 CommandButton - default 3D appearance, not red by default */
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
}

.btn-primary:hover {
    background: #B0B0B0;
    border-color: #A0A0A0;
}

.btn-primary:active {
    border-style: inset;
    background: #A0A0A0;
}

.btn-back {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 8px 16px;
    font-size: 12px;
}

/* Text Intro Screen */
/* VB6 form is 11880x8640 twips (maximized), scale to viewport */
.text-intro-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #C0C0C0; /* VB6 BackColor = &H8000000A& (system 3D face - light gray) */
    overflow: hidden;
}

.text-intro-title {
    position: absolute;
    top: 8.33%; /* VB6 Top = 720 / 8640 ≈ 8.33% */
    left: 0;
    width: 100%;
    text-align: center;
    font-family: 'Georgia', serif;
    font-size: 72pt; /* VB6 Size = 72 */
    font-weight: 700; /* VB6 Weight = 700 (bold) */
    color: #000000;
    z-index: 10;
}

.text-content {
    position: absolute;
    left: 2.02%; /* VB6 Left = 240 / 11880 ≈ 2.02% */
    top: 73.61%; /* VB6 Top = 6360 / 8640 ≈ 73.61% (starts below screen) */
    width: 96.1%; /* VB6 Width = 11415 / 11880 ≈ 96.1% */
    font-family: 'Georgia', serif;
    font-size: 24pt; /* VB6 Size = 24 */
    font-weight: 700; /* VB6 Weight = 700 (bold) */
    line-height: 1.5;
    color: #000000;
    background: #C0C0C0; /* VB6 BackColor = &H8000000A& */
    white-space: pre-wrap;
    padding: 20px;
    z-index: 5;
}

#text-intro-image {
    position: absolute;
    left: 26.26%; /* VB6 Left = 3120 / 11880 ≈ 26.26% */
    top: 31.94%; /* VB6 Top = 2760 / 8640 ≈ 31.94% */
    width: 53.66%; /* VB6 Width = 6375 / 11880 ≈ 53.66% */
    height: 62.67%; /* VB6 Height = 5415 / 8640 ≈ 62.67% */
    object-fit: contain;
    z-index: 3;
}

.text-intro-title-page {
    position: absolute;
    left: 10.1%; /* VB6 Left = 1200 / 11880 ≈ 10.1% */
    top: 810.19%; /* VB6 Top = 70000 / 8640 ≈ 810.19% (starts way below screen) */
    width: 75.88%; /* VB6 Width = 9015 / 11880 ≈ 75.88% */
    height: 90.45%; /* VB6 Height = 7815 / 8640 ≈ 90.45% */
    object-fit: contain;
    z-index: 2;
}

.btn-continue {
    position: absolute;
    right: 0.88%; /* VB6 Left = 10560, Right = (11880 - 10560 - 1215) / 11880 ≈ 0.88% */
    bottom: 5.73%; /* VB6 Top = 7440, Bottom = (8640 - 7440 - 495) / 8640 ≈ 8.16%, but use 5.73% for better spacing */
    width: 10.23%; /* VB6 Width = 1215 / 11880 ≈ 10.23% */
    height: 5.73%; /* VB6 Height = 495 / 8640 ≈ 5.73% */
    z-index: 20;
}

/* Character Selection Screen (VB6 Char form: 10380x7050) */
.char-selection-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #000;
    overflow: hidden;
}

.char-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Character file list (VB6 filFiles: 120, 3000, 2895x1650) */
.char-file-list {
    position: absolute;
    left: 1.16%; /* 120/10380 ≈ 1.16% */
    top: 42.55%; /* 3000/7050 ≈ 42.55% */
    width: 27.89%; /* 2895/10380 ≈ 27.89% */
    height: 23.4%; /* 1650/7050 ≈ 23.4% */
    background: #C0C0C0; /* VB6 ListBox default background */
    border: 2px inset #C0C0C0; /* VB6 ListBox border */
    z-index: 10;
    overflow-y: auto;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
}

.char-file-item {
    padding: 4px 8px;
    cursor: pointer;
    border-bottom: 1px solid #808080;
}

.char-file-item:hover {
    background: #316AC5; /* VB6 ListBox selection color */
    color: #FFFFFF;
}

.char-file-item.selected {
    background: #316AC5;
    color: #FFFFFF;
}

/* Character description label (VB6 Label1: 7920, 2520, 2295x495) */
.char-description-label {
    position: absolute;
    left: 76.30%; /* 7920/10380 ≈ 76.30% */
    top: 35.74%; /* 2520/7050 ≈ 35.74% */
    width: 22.11%; /* 2295/10380 ≈ 22.11% */
    height: 7.02%; /* 495/7050 ≈ 7.02% */
    background: #FFFFFF; /* VB6 BackColor = &H80000009& (system window) */
    border: 2px inset #C0C0C0;
    padding: 8px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    z-index: 10;
    display: flex;
    align-items: center;
}

/* Character preview image (VB6 Image3: 7920, 3000, 2295x1935) */
.char-preview-image {
    position: absolute;
    left: 76.30%; /* 7920/10380 ≈ 76.30% */
    top: 42.55%; /* 3000/7050 ≈ 42.55% */
    width: 22.11%; /* 2295/10380 ≈ 22.11% */
    height: 27.45%; /* 1935/7050 ≈ 27.45% */
    object-fit: contain;
    border: 2px inset #C0C0C0;
    background: #000000;
    z-index: 10;
}

/* Character selection buttons (VB6 Command buttons - positioned absolutely) */
.char-selection-btn {
    position: absolute;
    z-index: 20;
    white-space: nowrap;
}

.btn-load-char {
    font-family: 'Georgia', serif;
    font-size: 12pt;
    font-weight: 700;
}

/* New Character Screen (VB6 NewChar1: 11880x8640, maximized) */
.new-char-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #C0C0C0; /* VB6 default form background */
    overflow: hidden;
}

.new-char-label {
    position: absolute;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    display: flex;
    align-items: center;
    padding: 2px;
}

.new-char-textbox {
    position: absolute;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #C0C0C0;
    padding: 2px 4px;
}

.new-char-combo {
    position: absolute;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    background: #FFFFFF;
    color: #000000;
    border: 2px inset #C0C0C0;
    padding: 2px 4px;
}

.char-drawing-canvas {
    position: absolute;
    left: 67.68%; /* VB6 Left = 8040 / 11880 ≈ 67.68% */
    top: 2.78%; /* VB6 Top = 240 / 8640 ≈ 2.78% */
    width: 24.37%; /* VB6 Width = 2895 / 11880 ≈ 24.37% */
    height: 32.12%; /* VB6 Height = 2775 / 8640 ≈ 32.12% */
    background: #FFFFFF; /* VB6 BackColor = &H80000009& (system window - white) */
    border: 2px inset #C0C0C0;
    cursor: crosshair;
}

.color-palette {
    position: absolute;
    left: 66.67%; /* Starts around 7920 */
    top: 36.11%; /* Below canvas */
    width: 33.33%;
    height: 20%;
}

.color-palette .color-swatch {
    position: absolute;
    width: 2.9%; /* 345 / 11880 */
    height: 2.95%; /* 255 / 8640 */
    border: 1px solid #000;
    cursor: pointer;
}

.color-palette .color-swatch:hover {
    border: 2px solid #FFFFFF;
    z-index: 10;
}

.color-palette .color-swatch.selected {
    border: 3px solid #0000FF;
    z-index: 11;
}

.stats-section {
    position: absolute;
    left: 1.01%; /* VB6 Left = 120 / 11880 ≈ 1.01% */
    top: 20.83%; /* VB6 Top = 1800 / 8640 ≈ 20.83% */
    width: 51.68%; /* VB6 Width = 6135 / 11880 ≈ 51.68% */
}

.stat-row {
    position: relative;
    height: 3.47%; /* VB6 Height = 300 / 8640 ≈ 3.47% */
    margin-bottom: 0.23%; /* ~20 twips */
    display: flex;
    align-items: center;
}

.stat-label {
    width: 11.11%; /* VB6 Width = 1215 / 11880 ≈ 11.11% */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
}

.stat-value {
    width: 5.18%; /* VB6 Width = 615 / 11880 ≈ 5.18% */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    background: #C0C0C0;
    border: 2px inset #C0C0C0;
    text-align: center;
    padding: 2px;
    margin-left: 1.01%; /* Space between label and value */
}

.stat-description {
    margin-left: 1.01%; /* Space between value and description */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    flex: 1;
}

.combat-stats-section {
    position: absolute;
    left: 1.01%; /* VB6 Left = 120 / 11880 ≈ 1.01% */
    top: 44.44%; /* VB6 Top = 3840 / 8640 ≈ 44.44% */
    width: 20.37%; /* VB6 Width = 2415 / 11880 ≈ 20.37% */
}

.equipment-list {
    position: absolute;
    left: 38.38%; /* VB6 Left = 4560 / 11880 ≈ 38.38% */
    top: 51.39%; /* VB6 Top = 4440 / 8640 ≈ 51.39% */
    width: 22.36%; /* VB6 Width = 2655 / 11880 ≈ 22.36% */
    height: 30.04%; /* VB6 Height = 2595 / 8640 ≈ 30.04% */
    background: #FFFFFF; /* VB6 ListBox default background */
    border: 2px inset #C0C0C0;
    overflow-y: auto;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    padding: 4px;
}

.equipment-list .equipment-item {
    padding: 2px 4px;
    border-bottom: 1px solid #808080;
}

.new-char-image {
    position: absolute;
    object-fit: contain;
}

.new-char-btn {
    position: absolute;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
}

.section-title {
    font-weight: 700; /* Bold */
}

/* Load Character screens */
.load-char-container {
    max-width: 600px;
    padding: 40px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #FF0000;
    border-radius: 8px;
}

.new-char-container h2,
.load-char-container h2 {
    color: #FF0000;
    margin-bottom: 30px;
    text-align: center;
}

/* Form Styles */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 14px;
}

.form-group input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    font-family: 'Georgia', serif;
    background: #222;
    color: #fff;
    border: 1px solid #666;
    border-radius: 4px;
}

.form-group input:focus {
    outline: none;
    border-color: #FF0000;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.form-actions .btn {
    flex: 1;
}

/* Character List */
.char-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.char-item {
    padding: 15px;
    margin-bottom: 10px;
    background: #222;
    border: 1px solid #666;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.char-item:hover {
    background: #333;
    border-color: #FF0000;
}

.char-item-name {
    font-weight: bold;
    color: #FF0000;
    margin-bottom: 5px;
}

.char-item-details {
    font-size: 12px;
    color: #aaa;
}

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

/* Void Screen */
.void-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#void-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Game Screen - VB6 Full Screen Layout (within 800x600 frame) */
/* VB6 forms default to system window background (light gray) when Picture is empty */
.game-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #C0C0C0; /* VB6 default form background (system 3D face) */
}

#game-content {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.scene-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #C0C0C0; /* VB6 form default background - visible where Image1 doesn't cover */
}

/* Background Image (Image1) - VB6: Left=240, Top=0, Width=11655, Height=6135 */
/* VB6 form is 11880x8640 twips */
.scene-image-container {
    position: absolute;
    left: 2.02%; /* 240/11880 ≈ 2.02% */
    top: 0; /* 0/8640 = 0% */
    width: 98.15%; /* 11655/11880 ≈ 98.15% */
    height: 71.01%; /* 6135/8640 ≈ 71.01% */
    z-index: 1;
}

#scene-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* VB6 Stretch = True */
    position: absolute;
    top: 0;
    left: 0;
}

/* Character Picture (Image2) - VB6: 120, 2760, 1455x1215 
   Using percentage-based positioning for responsive scaling */
.character-pic-container {
    position: absolute;
    left: 1%; /* 120/11880 ≈ 1% */
    top: 32%; /* 2760/8640 ≈ 32% */
    width: 12.3%; /* 1455/11880 ≈ 12.3% */
    height: 14%; /* 1215/8640 ≈ 14% */
    z-index: 10;
    /* VB6 Image2 has no border - BorderStyle = 0 */
    background: transparent;
}

#char-pic {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* NPC/Enemy Images (Image3 array) */
.npc-image {
    position: absolute;
    z-index: 5;
    /* VB6 Image3 has no border by default - BorderStyle = 0 */
    border: none;
    cursor: pointer;
    background: transparent;
}

.npc-image:hover {
    /* VB6 doesn't have hover effects - remove any visual feedback on hover */
    /* No hover styling to match VB6 exactly */
}

/* Dialog Labels (Label1 and Label2) - VB6 positioning */
/* VB6 scene1.frm and Disorder.frm: Label1: Left=120, Top=6240, Width=9465, Height=735 */
/* VB6 form is 11880x8640 twips */
.scene-dialog {
    position: absolute;
    left: 1.01%; /* 120/11880 ≈ 1.01% */
    top: 72.22%; /* 6240/8640 ≈ 72.22% */
    width: 79.66%; /* 9465/11880 ≈ 79.66% */
    z-index: 20;
    /* VB6 Labels have no border - BorderStyle = 0 */
    background: transparent;
    padding: 0;
}

.dialog-text {
    font-family: 'Georgia', serif;
    font-size: 11.25pt;
    font-weight: 700;
    line-height: 1.4;
    color: #000000; /* VB6 Label default ForeColor = black (system window text) */
    min-height: 8.51%; /* VB6 Label1 height: 735/8640 ≈ 8.51% */
    margin-bottom: 0; /* Remove margin to match VB6 exact positioning */
}

.dialog-text2 {
    font-family: 'Georgia', serif;
    font-size: 11.25pt;
    font-weight: 700;
    line-height: 1.4;
    color: #000000; /* VB6 Label default ForeColor = black (system window text) */
    min-height: 5.73%; /* VB6 Label2 height: 495/8640 ≈ 5.73% */
    position: absolute;
    left: 1.01%; /* VB6 Label2: Left=120/11880 ≈ 1.01%, same as Label1 */
    top: 81.94%; /* VB6 Label2: Top=7080/8640 ≈ 81.94% (not same as Label1) */
    width: 79.66%; /* VB6 Label2: Width=9465/11880 ≈ 79.66% (same as Label1) */
    z-index: 20;
    /* VB6 Labels have no border - BorderStyle = 0 */
    background: transparent;
    padding: 0;
}

/* Navigation Buttons - VB6 style: Large N/E/S/W buttons on sides */
/* VB6: Buttons are positioned absolutely on the form (11880x8640 twips) */
.scene-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 15;
    pointer-events: none; /* Allow clicks to pass through container to buttons */
}

.scene-actions .btn-direction {
    pointer-events: auto; /* Re-enable clicks on buttons */
}

/* North Button - VB6: Left=5520, Top=240, Width=700, Height=570 */
/* VB6 form is 11880x8640 twips */
/* Calculated percentages: left = 5520/11880 = 46.464646464646464%, top = 240/8640 = 2.7777777777777777% */
.btn-direction.north {
    position: absolute;
    left: 46.464646464646464%; /* 5520/11880 */
    top: 2.7777777777777777%; /* 240/8640 */
    width: 5.892255892255892%; /* 700/11880 */
    height: 6.597222222222222%; /* 570/8640 */
    font-family: 'Georgia', serif;
    font-size: 24pt;
    font-weight: 700;
    /* VB6 CommandButton default appearance */
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
}

/* East Button - VB6: Left=10800, Top=2760, Width=700, Height=570 */
/* Calculated percentages: left = 10800/11880 = 90.9090909090909%, top = 2760/8640 = 31.944444444444443% */
.btn-direction.east {
    position: absolute;
    left: 90.9090909090909%; /* 10800/11880 */
    top: 31.944444444444443%; /* 2760/8640 */
    width: 5.892255892255892%; /* 700/11880 */
    height: 6.597222222222222%; /* 570/8640 */
    font-family: 'Georgia', serif;
    font-size: 24pt;
    font-weight: 700;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
}

/* West Button - VB6: Left=240, Top=2880, Width=700, Height=570 */
/* Calculated percentages: left = 240/11880 = 2.0202020202020203%, top = 2880/8640 = 33.33333333333333% */
.btn-direction.west {
    position: absolute;
    left: 2.0202020202020203%; /* 240/11880 */
    top: 33.33333333333333%; /* 2880/8640 */
    width: 5.892255892255892%; /* 700/11880 */
    height: 6.597222222222222%; /* 570/8640 */
    font-family: 'Georgia', serif;
    font-size: 24pt;
    font-weight: 700;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
}

/* South Button - VB6: Left=5520, Top=5400, Width=700, Height=570 */
/* Calculated percentages: left = 5520/11880 = 46.464646464646464%, top = 5400/8640 = 62.5% */
.btn-direction.south {
    position: absolute;
    left: 46.464646464646464%; /* 5520/11880 */
    top: 62.5%; /* 5400/8640 */
    width: 5.892255892255892%; /* 700/11880 */
    height: 6.597222222222222%; /* 570/8640 */
    font-family: 'Georgia', serif;
    font-size: 24pt;
    font-weight: 700;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
}

.btn-direction:hover {
    background: #B0B0B0;
    border-color: #A0A0A0;
}
.btn-direction:active {
    border-style: inset;
    background: #A0A0A0;
}

.btn-direction.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #808080; /* VB6 disabled button - grayed out */
    color: #606060;
    border-style: inset;
}

/* Items List (LocItems) - VB6: 9600, 6480, 2295x840 */
/* VB6 ListBox default: BackColor = white, ForeColor = black, BorderStyle = inset */
.scene-items {
    position: absolute;
    left: 80.81%; /* 9600/11880 ≈ 80.81% */
    top: 75%; /* 6480/8640 ≈ 75% */
    width: 19.32%; /* 2295/11880 ≈ 19.32% */
    height: 9.72%; /* 840/8640 ≈ 9.72% */
    z-index: 20;
    /* No wrapper background - just the listbox itself */
    padding: 0;
}

#items-visible-list {
    /* VB6 LocItems ListBox: BackColor = white, ForeColor = black, BorderStyle = inset */
    color: #000000; /* VB6 ListBox default ForeColor = black */
    font-size: 8.25pt; /* VB6 ListBox default font size */
    font-family: 'MS Sans Serif', sans-serif; /* VB6 ListBox default font */
    height: 100%; /* Fill available space - VB6 height: 840 twips */
    overflow-y: auto;
    background: #FFFFFF; /* VB6 ListBox default BackColor = white */
    border: 2px inset #C0C0C0; /* VB6 ListBox inset border */
    padding: 2px;
    list-style: none;
    margin: 0;
}

#items-visible-list .item-entry {
    padding: 2px 4px;
    cursor: pointer;
    color: #000000;
}

#items-visible-list .item-entry:hover {
    background: #316AC5; /* VB6 ListBox selection highlight color */
    color: #FFFFFF; /* White text on selection */
}

#items-visible-list .item-entry.selected {
    background: #316AC5; /* VB6 ListBox selected item background */
    color: #FFFFFF; /* White text on selected item */
}

.items-hint {
    /* VB6 Label7: "(double-click to pick up)" - MS Sans Serif, 8.25pt, bold, centered */
    font-size: 8.25pt;
    font-weight: 700;
    text-align: center;
    color: #000000; /* VB6 Label default ForeColor = black */
    font-family: 'MS Sans Serif', sans-serif;
    margin-top: 2px;
    margin-bottom: 0;
    background: transparent; /* VB6 Label default = transparent */
}

/* Game Screen Buttons - VB6 scene1: positioned absolutely at bottom (top: 7800) */
/* VB6 form is 11880x8640 twips */
/* VB6 CommandButtons without explicit Font use default: MS Sans Serif, 8.25pt */
.game-screen-btn {
    position: absolute;
    height: 5.73%; /* 495/8640 ≈ 5.73% */
    font-family: 'MS Sans Serif', sans-serif; /* VB6 default CommandButton font */
    font-size: 8.25pt; /* VB6 default CommandButton font size */
    z-index: 30;
}

/* Menu Screen (VB6 Menu.frm: 11880x8640, Maximized) */
/* VB6 form is 11880x8640 twips */
.menu-screen-container {
    width: 100%;
    height: 100%;
    position: relative;
    background: #C0C0C0; /* VB6 default form background (system 3D face) */
    overflow: hidden;
}

.menu-label {
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    color: #000000;
    background: transparent;
}

.menu-textbox {
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    border: 2px inset #C0C0C0;
    background: #FFFFFF;
    color: #000000;
    padding: 4px;
    box-sizing: border-box;
}

.menu-listbox {
    /* VB6 ListBox: BackColor = white, ForeColor = black, BorderStyle = inset */
    background: #FFFFFF;
    border: 2px inset #C0C0C0;
    overflow-y: auto;
    padding: 2px;
}

.menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    color: #000000;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
}

.menu-list li {
    padding: 2px 4px;
    cursor: pointer;
    background: #FFFFFF;
    color: #000000;
}

.menu-list li:hover {
    background: #316AC5; /* VB6 ListBox selection highlight */
    color: #FFFFFF;
}

.menu-list li.selected {
    background: #316AC5; /* VB6 ListBox selected item */
    color: #FFFFFF;
}

.menu-btn {
    /* VB6 CommandButton default appearance */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
    padding: 4px 8px;
    white-space: nowrap;
    box-sizing: border-box;
}

.menu-btn:hover {
    background: #B0B0B0;
    border-color: #A0A0A0;
}

.menu-btn:active {
    border-style: inset;
    background: #A0A0A0;
}

.menu-tool-btn {
    /* Drawing tool buttons - positioned relative to Pic canvas */
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 8.25pt;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    border-radius: 0;
    padding: 4px 8px;
    white-space: nowrap;
    box-sizing: border-box;
}

.menu-pic-canvas {
    /* VB6 Pic PictureBox: 189x181 pixels, scaled for web */
    width: 100%;
    height: 100%;
    border: 2px inset #C0C0C0;
    background: #FFFFFF;
    cursor: crosshair;
    image-rendering: pixelated; /* For pixel art drawing */
}

/* Old menu overlay styles (kept for compatibility, but menu now uses full screen) */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-container {
    background: #111;
    border: 2px solid #FF0000;
    border-radius: 8px;
    padding: 30px;
    max-width: 900px;
    max-height: 80vh;
    overflow-y: auto;
    width: 90%;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #FF0000;
    padding-bottom: 15px;
}

.menu-header h2 {
    color: #FF0000;
    margin: 0;
}

.menu-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.menu-stats h3,
.menu-items h3 {
    color: #FF0000;
    margin-bottom: 15px;
}

.stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #333;
}

.stat-item label {
    color: #aaa;
}

.stat-item span {
    color: #fff;
    font-weight: bold;
}

.item-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 5px;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #333;
}

.menu-item span {
    color: #fff;
    flex: 1;
}

.btn-small {
    padding: 4px 8px;
    font-size: 12px;
    margin-left: 5px;
    background: #333;
    color: #fff;
    border: 1px solid #666;
    cursor: pointer;
}

.btn-small:hover {
    background: #555;
}

.equipped-items {
    margin-top: 15px;
}

.equipped-item {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #333;
    margin-bottom: 5px;
}

.no-items {
    color: #888;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* Scene Buttons (Command2 array) - VB6: positioned at bottom (top: 7800) */
.scene-buttons-container {
    position: absolute;
    bottom: 60px; /* Above menu bar */
    left: 0;
    right: 0;
    z-index: 25;
    display: flex;
    gap: 10px;
    padding: 0 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.scene-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.btn-scene {
    padding: 10px 15px;
    height: 49px; /* VB6 button height: 495 twips ≈ 49px */
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    font-family: 'MS Sans Serif', sans-serif; /* VB6 CommandButton default font */
    font-size: 8.25pt; /* VB6 CommandButton default font size */
    white-space: nowrap;
    border-radius: 0;
}

.btn-scene:hover {
    background: #B0B0B0;
    border-color: #A0A0A0;
}
.btn-scene:active {
    border-style: inset;
    background: #A0A0A0;
}

/* NPC Action Buttons (Fight/Look/Talk) - VB6: positioned at bottom */
.npc-action-buttons {
    position: absolute;
    bottom: 60px; /* Above menu bar */
    left: 0;
    z-index: 26;
    display: flex;
    gap: 10px;
    padding: 0 15px;
}

.btn-npc-action {
    padding: 10px 15px;
    height: 49px;
    background: #C0C0C0;
    color: #000000;
    border: 2px outset #C0C0C0;
    cursor: pointer;
    font-family: 'MS Sans Serif', sans-serif; /* VB6 CommandButton default font */
    font-size: 8.25pt; /* VB6 CommandButton default font size */
    white-space: nowrap;
    border-radius: 0;
}

.btn-npc-action:hover {
    background: #B0B0B0;
    border-color: #A0A0A0;
}
.btn-npc-action:active {
    border-style: inset;
    background: #A0A0A0;
}

/* Look Screen Overlay */
.look-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.look-container {
    background: #111;
    border: 3px solid #FF0000;
    padding: 30px;
    max-width: 600px;
    width: 90%;
    text-align: center;
}

.look-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #FF0000;
    padding-bottom: 15px;
}

.look-header h2 {
    color: #FF0000;
    margin: 0;
}

.look-content img {
    max-width: 100%;
    max-height: 400px;
    border: 2px solid #FF0000;
    margin-bottom: 15px;
}

.look-content p {
    color: #fff;
    font-size: 16px;
}

.dialog-text2 {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
    color: #fff;
}

.items-list {
    min-height: 100px;
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px;
    margin-bottom: 10px;
}

.item-entry {
    padding: 8px;
    margin-bottom: 5px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    color: #fff;
}

.item-entry:hover {
    background: rgba(255, 0, 0, 0.2);
}

.item-entry.selected {
    background: rgba(255, 255, 0, 0.3);
    border: 1px solid #FFFF00;
}

.items-hint {
    font-size: 12px;
    color: #888;
    font-style: italic;
    text-align: center;
    margin-top: 5px;
}

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

/* Combat System */
.combat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.combat-container {
    background: #111;
    border: 3px solid #FF0000;
    border-radius: 8px;
    padding: 30px;
    max-width: 800px;
    width: 90%;
}

.combat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #FF0000;
    padding-bottom: 15px;
}

.combat-header h2 {
    color: #FF0000;
    margin: 0;
}

.combat-content {
    text-align: center;
}

.combat-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.combatant h3 {
    color: #FF0000;
    margin-bottom: 10px;
}

.health-bar {
    position: relative;
    width: 100%;
    height: 30px;
    background: #333;
    border: 2px solid #666;
    overflow: hidden;
}

.health-fill {
    height: 100%;
    background: #00ff00;
    transition: width 0.3s;
}

.health-fill.enemy {
    background: #ff0000;
}

.health-bar span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: bold;
    z-index: 1;
}

.combat-image-container {
    margin: 20px 0;
    min-height: 200px;
}

.combat-image-container img {
    max-width: 100%;
    max-height: 300px;
    border: 2px solid #FF0000;
}

.combat-message {
    min-height: 60px;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #666;
    margin: 20px 0;
    color: #fff;
}

.combat-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-top: 20px;
}

.btn-combat {
    padding: 15px 30px;
    font-size: 16px;
    font-weight: bold;
    background: #FF0000;
    color: #fff;
    border: 2px solid #FF4444;
    cursor: pointer;
    font-family: 'Georgia', serif;
    transition: all 0.3s;
}

.btn-combat:hover {
    background: #FF3333;
    transform: scale(1.05);
}

/* Combat Screen (VB6 CombatScreen form: 11880x8640, Maximized) */
.combat-screen {
    background: #C0C0C0; /* VB6 default form background */
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.combat-image {
    object-fit: contain;
    border: none;
}

.combat-label {
    display: flex;
    align-items: center;
    color: #000000;
    background: transparent;
    margin: 0;
    padding: 0;
}

.combat-btn {
    background: #C0C0C0; /* VB6 CommandButton default */
    border: 2px outset #C0C0C0;
    color: #000000;
    cursor: pointer;
    padding: 0;
    margin: 0;
    text-align: center;
}

.combat-btn:hover {
    background: #D4D4D4;
}

.combat-btn:active {
    border: 2px inset #C0C0C0;
}

.combat-btn:disabled {
    background: #C0C0C0;
    color: #808080;
    cursor: not-allowed;
    border: 2px inset #C0C0C0;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* Note Overlay */
.note-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-container {
    background: #1a1a1a;
    border: 3px solid #FF0000;
    padding: 30px;
    max-width: 600px;
    text-align: center;
}

.note-content {
    margin: 20px 0;
    line-height: 1.8;
    font-size: 18px;
}

/* Look Overlay */
.look-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.look-container {
    background: #1a1a1a;
    border: 3px solid #FF0000;
    padding: 30px;
    text-align: center;
}

.look-image {
    max-width: 500px;
    max-height: 500px;
    border: 2px solid #FF0000;
    margin: 20px 0;
}

/* Death Screen */
#death-screen {
    background: #000;
}

.death-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.death-content {
    text-align: center;
    position: relative;
}

.death-character {
    max-width: 300px;
    max-height: 400px;
    border: 2px solid #FF0000;
}

.death-knife {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: knife-move 3s forwards;
}

.death-knife-blade,
.death-knife-handle {
    position: absolute;
}

.death-knife-blade {
    animation: knife-spin 0.2s infinite;
}

.death-knife-handle {
    animation: knife-spin 0.2s infinite;
}

@keyframes knife-move {
    from {
        left: -100px;
    }
    to {
        left: 50%;
    }
}

@keyframes knife-spin {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
}

.death-quote {
    margin-top: 30px;
    font-size: 20px;
    color: #FF0000;
    font-style: italic;
    padding: 20px;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #FF0000;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Store System */
.store-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

.store-container {
    background: #1a1a1a;
    border: 3px solid #FF0000;
    padding: 30px;
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.store-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 2px solid #FF0000;
    padding-bottom: 10px;
}

.store-header h2 {
    color: #FF0000;
    font-style: italic;
}

.store-content {
    display: grid;
    grid-template-columns: 1fr 300px;
    grid-template-rows: auto auto;
    gap: 20px;
}

.store-left {
    grid-column: 1;
    grid-row: 1;
}

.store-right {
    grid-column: 2;
    grid-row: 1;
}

.store-inventory {
    grid-column: 1 / -1;
    grid-row: 2;
}

.store-items {
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border: 1px solid #666;
}

.store-items-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 15px;
}

.store-item-entry {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin: 5px 0;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #666;
    cursor: pointer;
    transition: all 0.3s;
}

.store-item-entry:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: #FF0000;
}

.store-item-entry.selected {
    background: rgba(255, 0, 0, 0.3);
    border-color: #FF0000;
    border-width: 2px;
}

.store-item-details {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #666;
    margin-bottom: 15px;
    min-height: 100px;
}

.store-merchant,
.store-character {
    text-align: center;
    margin-bottom: 20px;
}

.store-merchant img,
.store-character img {
    max-width: 200px;
    max-height: 250px;
    border: 2px solid #FF0000;
    margin-bottom: 10px;
}

.store-inventory-list {
    max-height: 200px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border: 1px solid #666;
    margin-bottom: 15px;
}

.store-inventory-entry {
    padding: 8px;
    margin: 5px 0;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid #666;
    cursor: pointer;
    transition: all 0.3s;
}

.store-inventory-entry:hover {
    background: rgba(255, 0, 0, 0.2);
    border-color: #FF0000;
}

.store-inventory-entry.selected {
    background: rgba(255, 0, 0, 0.3);
    border-color: #FF0000;
    border-width: 2px;
}

.store-inventory-details {
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #666;
    margin-bottom: 15px;
    min-height: 80px;
}

.store-goldfish {
    grid-column: 2;
    grid-row: 2;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #FF0000;
    padding: 15px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid #666;
}

.btn-store {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: bold;
    background: #FF0000;
    color: #fff;
    border: 2px solid #FF4444;
    cursor: pointer;
    font-family: 'Georgia', serif;
    transition: all 0.3s;
    margin: 5px;
}

.btn-store:hover:not(:disabled) {
    background: #FF3333;
    transform: scale(1.05);
}

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

/* Menu Message */
.menu-message {
    padding: 15px;
    background: rgba(255, 0, 0, 0.2);
    border: 2px solid #FF0000;
    margin: 15px 0;
    color: #fff;
    font-style: italic;
}

/* Dimension Input */
.dimension-input-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dimension-input-container {
    background: #1a1a1a;
    border: 3px solid #FF0000;
    padding: 30px;
    text-align: center;
    min-width: 400px;
}

.dimension-input-container h3 {
    color: #FF0000;
    margin-bottom: 20px;
}

.dimension-input-container input {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    background: #000;
    color: #fff;
    border: 2px solid #FF0000;
    margin-bottom: 20px;
    font-family: 'Georgia', serif;
}

.dimension-input-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.flashlight-status {
    padding: 10px;
    background: rgba(255, 255, 0, 0.2);
    border: 2px solid #FFFF00;
    margin: 10px 0;
    text-align: center;
    color: #FFFF00;
    font-weight: bold;
}

.equipment-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.menu-item.selected {
    background: rgba(255, 0, 0, 0.3);
    border: 2px solid #FF0000;
}