/* ============ Shared retro game window sizing ============ */
.about-window .window {
    width: 760px;
    max-width: 96vw;
    margin: 0 auto;
}

.game-window .window {
    width: max-content;
    max-width: 96vw;
}

/* ============ Shared Win98-style menu bar (used by Minesweeper & Solitaire) ============ */
.win98-menubar {
    display: flex;
    background: #c0c0c0;
    padding: 2px 2px;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-size: 11px;
    user-select: none;
    position: relative;
}

.win98-menubar-item {
    padding: 3px 8px;
    cursor: default;
    position: relative;
}

.win98-menubar-item:hover,
.win98-menubar-item.open {
    background: navy;
    color: #fff;
}

.win98-menubar-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 170px;
    background: #c0c0c0;
    border-top: 1px solid #fff;
    border-left: 1px solid #fff;
    border-right: 1px solid #0a0a0a;
    border-bottom: 1px solid #0a0a0a;
    box-shadow: 1px 1px 0 #808080 inset, -1px -1px 0 #dfdfdf inset;
    z-index: 30;
    padding: 2px;
    color: #000;
}

.win98-menubar-item.open .win98-menubar-dropdown {
    display: block;
}

.win98-menubar-dropdown-item {
    padding: 4px 10px 4px 26px;
    white-space: nowrap;
    position: relative;
}

.win98-menubar-dropdown-item:hover {
    background: navy;
    color: #fff;
}

.win98-menubar-dropdown-separator {
    height: 0;
    margin: 3px 2px;
    border-top: 1px solid #808080;
    border-bottom: 1px solid #fff;
}

.win98-menubar-dropdown-item.checked::before {
    content: "\2713";
    position: absolute;
    left: 9px;
}

/* ============ Minesweeper ============ */
.mine-frame {
    /* inline-flex + column + align-items:center (not stretch) is the
       actual robust fix: whichever of .mine-header/.mine-board is
       naturally wider determines this frame's width, and the narrower
       one is centered within it rather than stretched or left
       mismatched - centering can't overlap or clip anything the way
       forcing an exact computed width (in JS, or via align-items:stretch
       on a fixed-track grid) kept doing across a few earlier attempts,
       since nothing is ever compressed or force-stretched here. */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: #c0c0c0;
    padding: 6px;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.mine-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #c0c0c0;
    padding: 4px 6px;
    margin-bottom: 6px;
    /* Border-box is what makes the explicit width minesweeper.js sets
       (matching the board's total bordered width) actually equal the
       board's total rendered width - without it, this element's own
       padding and border add on top of that width instead of being
       included within it, so the two elements' true rendered widths
       would still differ even though the same number was applied to
       both. */
    box-sizing: border-box;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.mine-counter, .mine-timer {
    background: #000;
    color: #ff2020;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    padding: 2px 6px;
    min-width: 46px;
    text-align: center;
    /* Prevents flex-shrink from ever compressing this below its needed
       size when the row is tight on space (which is what was causing it
       to visually overlap its own box at Beginner's narrower header). */
    flex-shrink: 0;
    box-sizing: border-box;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

/* Scoped to .mine-header .mine-smiley (matching how it's actually
   nested), rather than .mine-smiley alone, specifically so this reliably
   beats .window-body button's font-size rule on specificity - a plain
   class selector alone couldn't, which was silently shrinking the emoji
   down from its intended size. */
.mine-header .mine-smiley {
    /* Back down to a size proportionate with the counters, matching real
       Windows 98's button, rather than sizing the button around the
       icon's own dimensions - that approach (this rule's previous two
       attempts) kept producing a mismatch somewhere between the assumed
       and actual source image, however the box was sized. The icon
       itself is now forced to a small, fixed, explicit pixel size
       further down (not "contain") specifically to remove any
       dependency on the source file's real dimensions or aspect ratio -
       a fixed size always renders at exactly that size, so there's
       nothing left that can produce an unexpected mismatch. */
    width: 28px;
    height: 28px;
    /* 98.css's base button rule sets min-width:75px/min-height:23px for
       normal-sized UI buttons - min-width/min-height always win over a
       smaller explicit width/height regardless of any other CSS
       specificity, so without unsetting them here this button was being
       forced up to 75px wide (with only its height correctly staying
       near 28px), which is exactly why it looked like a wide rectangle
       rather than a square, and why the icon inside looked small/wrong
       relative to the button - the same fix already applied to IE's
       toolbar buttons a while back, just missed here. */
    min-width: unset;
    min-height: unset;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    background-color: #c0c0c0;
    background-repeat: no-repeat;
    background-position: center;
    /* A small, fixed, explicit size rather than "contain" - contain
       scales relative to the icon's own actual dimensions, which is
       exactly what kept producing an unexpected result across a couple
       of earlier attempts at this. An explicit pixel size doesn't care
       what the source file's real dimensions are; it always renders at
       exactly this size, with guaranteed margin to the border on every
       side within the 24x24 content area (28px minus the 2px border). */
    background-size: 18px 18px;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
}

.mine-smiley:active {
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.mine-board {
    display: grid;
    /* max-content keeps this exactly as wide as its grid tracks need
       (COLS * 22px + border) and never wider - display:grid in normal
       block flow can otherwise stretch to fill whatever width its
       container offers, leaving unused space since tracks pack to the
       start by default rather than stretching to fill it. */
    width: max-content;
    /* border-box, same reasoning as .mine-header above - without it, the
       explicit width set in JS (intended as the total bordered width)
       only covers the content box, and the 2px border adds 4px on top,
       leaving the grid's own tracks 4px short of that total width - a
       gap of genuinely empty space, since grid packs tracks to the start
       by default rather than stretching them to fill extra room. */
    box-sizing: border-box;
    background: #808080;
    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
}

.mine-cell {
    width: 22px;
    height: 22px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Pixelated MS Sans Serif", Arial;
    font-weight: bold;
    font-size: 13px;
    user-select: none;
    cursor: default;
    background: #c0c0c0;
    border-top: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #808080;
    border-bottom: 2px solid #808080;
}

.mine-cell.revealed {
    border: 1px solid #808080;
    background: #c0c0c0;
}

.mine-cell.mine-1 { color: #0000ff; }
.mine-cell.mine-2 { color: #008000; }
.mine-cell.mine-3 { color: #ff0000; }
.mine-cell.mine-4 { color: #000080; }
.mine-cell.mine-5 { color: #800000; }
.mine-cell.mine-6 { color: #008080; }
.mine-cell.mine-7 { color: #000000; }
.mine-cell.mine-8 { color: #808080; }

.mine-cell.is-bomb.revealed { background: #ff4040; }

/* ============ Solitaire ============ */
.solitaire-frame {
    background: #018001;
    padding: 10px;
    /* 7 piles (62px) + 6 gaps (10px), matching .solitaire-toprow and
       .solitaire-tableau exactly, plus this padding on each side - sized
       to the actual 7-column grid now that the top row uses it too,
       rather than a wider box that used to leave dead space on the right. */
    min-width: 514px;
}

.solitaire-toprow {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.solitaire-tableau {
    display: flex;
    gap: 10px;
}

.solitaire-pile {
    width: 62px;
    min-height: 88px;
    position: relative;
    box-sizing: border-box;
}

.solitaire-spacer {
    min-height: 0;
}

#solitaire-waste {
    overflow: visible;
}

.solitaire-pile.is-empty-slot {
    border: 2px dashed rgba(255,255,255,0.4);
    border-radius: 4px;
}

@media screen and (max-width: 950px) {
    #column-window-solitaire .window {
        max-width: 95vw;
    }

    .solitaire-frame {
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .solitaire-toprow,
    .solitaire-tableau {
        min-width: 494px;
    }
}

.card {
    width: 60px;
    height: 86px;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #222;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    position: absolute;
    left: 0;
    /* Reverted back to the pre-pixel-font look specifically requested for
       Solitaire's cards, in every theme (not just XP, where every other
       font revert in this file is scoped to). */
    font-family: 'MS Sans Serif', Tahoma, sans-serif;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.solitaire-pile.drop-hover {
    outline: 3px solid #ffd700;
    outline-offset: -2px;
}

.solitaire-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
}

.solitaire-drag-ghost .card {
    position: absolute;
    left: 0;
    cursor: grabbing;
    box-shadow: 2px 3px 6px rgba(0,0,0,0.6);
}

.card .card-corner {
    position: absolute;
    top: 3px;
    left: 4px;
    font-size: 13px;
    font-weight: bold;
    line-height: 1;
}

.card .card-suit-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
}

.card.red { color: #d21e1e; }
.card.black { color: #111; }

.card.face-down {
    background: repeating-linear-gradient(45deg, #1a3fa0, #1a3fa0 4px, #274bb5 4px, #274bb5 8px);
    border: 1px solid #0c2266;
}

.card.selected {
    outline: 3px solid #ffd700;
    z-index: 500;
}

.solitaire-status {
    color: #000;
    font-family: "Pixelated MS Sans Serif", Arial;
    margin: 8px 4px 2px;
    min-height: 18px;
}

.solitaire-actions {
    margin-top: 8px;
}

/* ============ DOOM ============ */
.doom-frame {
    background: #000;
}

#doom-dosbox {
    width: 640px;
    height: 480px;
    max-width: 100%;
    background: #000;
}

.doom-message {
    color: #fff;
    font-family: "Pixelated MS Sans Serif", Arial;
    background: #000;
    width: 640px;
    max-width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.doom-hint {
    font-size: 11px;
    color: #444;
    max-width: 640px;
    margin-top: 6px;
}

/* ============ Laser Kombat ============ */
/* 800x600 - the game's actual default (non-handheld) resolution,
   confirmed directly from its own source (include/constants.h) rather
   than assumed to match DOOM/Pinball's 640x480. */
#laserkombat-canvas {
    display: block;
    width: 800px;
    height: 600px;
    max-width: 100%;
    background: #000;
}

.laserkombat-message {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-family: "Pixelated MS Sans Serif", Arial;
    background: #000;
    width: 800px;
    max-width: 100%;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

#laserkombat-mount {
    position: relative;
}

/* ============ 3D Pinball - Space Cadet ============ */
#pinball-mount canvas {
    display: block;
    width: 640px;
    height: 480px;
    max-width: 100%;
    background: #000;
}

.pinball-message {
    color: #fff;
    font-family: "Pixelated MS Sans Serif", Arial;
    background: #000;
    width: 640px;
    max-width: 100%;
    height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.pinball-hint {
    font-size: 11px;
    color: #444;
    max-width: 640px;
    margin-top: 6px;
}

.pinball-hint-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .pinball-hint-desktop {
        display: none;
    }
    .pinball-hint-mobile {
        display: block;
    }
}