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

/* --app-scale is set by JS (RefspaceLayer) to canvas-container.clientWidth / 1841.
   At reference design size it equals 1, so px values below match 1:1 and
   shrink/grow uniformly with the app. Back-compat alias --menu-px = --app-scale. */
:root {
    --app-scale: 1;
    /* --menu-px is a length equal to 1px × --app-scale (back-compat alias). */
    --menu-px: calc(1px * var(--app-scale));
}

html, body {
    height: 100%;
}
body {
    background: #000;   /* letterbox / pillarbox color */
    color: #e0e0e0;
    margin: 0;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* App wrapper: top-bar (80 ref-px) + canvas (1040 ref-px) = 1120 ref-px tall.
   Width and height are both explicitly clamped so the aspect ratio 1841:1120
   is preserved exactly; any excess viewport shows the body's black background
   on the right or bottom. Anchored top-left. */
.app-root {
    position: absolute;
    top: 0;
    left: 0;
    width:  min(100vw, calc(100vh * 1841 / 1120));
    height: min(100vh, calc(100vw * 1120 / 1841));
    display: flex;
    flex-direction: column;
}

/* Hide game elements until intro animation completes */
.top-bar, .canvas-container {
    visibility: hidden;
}

/* Top bar: logo + buttons — occupies 80/1120 of app-root height. */
.top-bar {
    flex: 0 0 calc(80 / 1120 * 100%);
    width: 100%;
    display: flex;
    align-items: center;
    gap: calc(28px * var(--app-scale));
    padding: calc(10px * var(--app-scale)) calc(28px * var(--app-scale));
    background: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.logo {
    height: calc(56px * var(--app-scale));
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.main-menu {
    display: flex;
    gap: calc(8 * var(--menu-px));
    flex-wrap: wrap;
    align-items: center;
}

.main-btn {
    padding: calc(9 * var(--menu-px)) calc(18 * var(--menu-px));
    height: calc(48 * var(--menu-px));
    border: 1px solid rgba(0,0,0,0.18);
    border-bottom: 2px solid rgba(0,0,0,0.22);
    border-radius: 6px;
    font-size: calc(17 * var(--menu-px));
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(to bottom, #B8B998 0%, #A6A783 55%, #9A9B78 100%);
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease, background 0.12s ease;
}

.main-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(to bottom, #C3C5A5 0%, #B2B390 55%, #A6A784 100%);
    box-shadow: 0 4px 10px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35);
}

.main-btn:active {
    transform: translateY(1px);
    background: linear-gradient(to bottom, #9A9B78 0%, #A6A783 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 2px 4px rgba(0,0,0,0.2);
}

.main-btn.active {
    background: linear-gradient(to bottom, #8A8B6E 0%, #7A7B60 100%);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2), inset 0 2px 4px rgba(0,0,0,0.25);
}

/* Inline icon used in main-menu buttons */
.main-btn .btn-icon {
    height: 1.4em;
    width: auto;
    vertical-align: middle;
    margin-right: calc(8 * var(--menu-px));
    margin-top: -2px;
}

/* Highest scores icon is 50% larger */
#btn-highest-scores .btn-icon {
    height: 2.1em;
    margin-top: -4px;
    margin-bottom: -4px;
}

/* Per-button colors — override the default gradient/hover/active */
#btn-start-game,
#btn-start-game:hover,
#btn-start-game:active     { background: #7BB350; }
#btn-highest-scores,
#btn-highest-scores:hover,
#btn-highest-scores:active { background: #4EABEB; }
#btn-my-settings,
#btn-my-settings:hover,
#btn-my-settings:active    { background: #DC3A2C; }
#btn-help,
#btn-help:hover,
#btn-help:active           { background: #5CC1F1; }
#btn-development,
#btn-development:hover,
#btn-development:active    { background: #2D4585; }

/* Development button: extra left margin, slimmer vertically, smaller font.
   Half the height of the other menu buttons — only used during development. */
#menu-item-development { margin-left: calc(20 * var(--menu-px)); }
#btn-development {
    height: calc(24 * var(--menu-px));
    padding-top: calc(3 * var(--menu-px));
    padding-bottom: calc(3 * var(--menu-px));
    font-size: calc(9 * var(--menu-px));
}

/* AppState debug label — small text right of the Development button */
#appstate-label {
    margin-left: calc(12 * var(--menu-px));
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
    font-size: calc(9 * var(--menu-px));
    line-height: 1.25;
    color: #555;
    white-space: pre;
}

/* Development submenu */
.main-menu-item {
    position: relative;
    display: flex;
    align-items: center;
}

.submenu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.08);
    z-index: 1000;
    padding: 6px;
    min-width: 160px;
    flex-direction: column;
    gap: 4px;
    animation: submenuFade 0.12s ease-out;
}

.submenu.open { display: flex; }

.submenu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 18px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.1);
    transform: rotate(45deg);
}

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

.submenu-btn {
    padding: calc(8 * var(--menu-px)) calc(14 * var(--menu-px));
    border: 1px solid rgba(0,0,0,0.1);
    border-bottom: 2px solid rgba(0,0,0,0.15);
    border-radius: 5px;
    font-size: calc(12 * var(--menu-px));
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
    color: #ffffff;
    background: linear-gradient(to bottom, #B8B998 0%, #A6A783 55%, #9A9B78 100%);
    text-align: left;
    font-family: 'Open Sans', 'Segoe UI', Tahoma, sans-serif;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
    box-shadow: 0 1px 2px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.25);
    transition: filter 0.12s ease, transform 0.12s ease;
}

.submenu-btn:hover {
    filter: brightness(1.08);
    transform: translateX(1px);
}

.submenu-btn:active {
    transform: translateX(0);
    filter: brightness(0.92);
}

.submenu-btn.active {
    background: linear-gradient(to bottom, #8A8B6E, #7A7B60);
}

/* Submenu colors inherit the parent's menu-button color */
#help-submenu .submenu-btn,
#help-submenu .submenu-btn:hover,
#help-submenu .submenu-btn:active { background: #5CC1F1; }

#dev-submenu .submenu-btn,
#dev-submenu .submenu-btn:hover,
#dev-submenu .submenu-btn:active  { background: #2D4585; }

#dev-submenu .submenu-btn { font-size: calc(9 * var(--menu-px)); }

/* Popup tables — body cells (td) render 2px smaller than their column header
   (th). The header keeps the inherited table font-size; td subtracts 2px. */
.popup-body table td { font-size: calc(1em - 2px); }

/* Pulse-ring highlight used on the commercial-strategy button in intro step 6.
   A pseudo-element sits just outside the button and ripples an orange shadow
   outward; removed as soon as the button is clicked. */
.pulse-highlight { position: absolute; }  /* preserve absolute-positioning on Button.el */
.pulse-highlight::after {
    content: '';
    position: absolute;
    inset: -2px;
    pointer-events: none;
    z-index: 2;
    animation: pulseRing 1.6s ease-out infinite;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.75);
}
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.75); }
    70%  { box-shadow: 0 0 0 16px rgba(231, 76, 60, 0);   }
    100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0);      }
}

/* Canvas container — remaining 1040/1120 of app-root height. */
.canvas-container {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    padding: 0;
    margin: 0;
    background: #ffffff;
    overflow: hidden;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ref-space overlay — children use raw 1841×1040 pixel coordinates and are
   scaled uniformly to match the canvas via --app-scale. */
#refspace-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 1841px;
    height: 1040px;
    transform-origin: top left;
    transform: scale(var(--app-scale, 1));
    pointer-events: none;
}
#refspace-layer > * {
    pointer-events: auto;
}