/* System 7 style stylesheet - minimal, monochrome GUI inspired by classic Macintosh System 7 */
/* Use the local Chicago OTF across the site */
@font-face {
    font-family: 'Chicago';
    src: url('chicago-12-1.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'System7UI';
    src: local('Geneva'), local('Helvetica'), local('Arial');
}

/* Force Chicago as the site-wide font. Using !important ensures inputs, terminals
   and components that set their own font-family inherit Chicago as requested. */
html, body, * {
    font-family: Chicago, System7UI, Geneva, Helvetica, Arial, sans-serif !important;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: System7UI, Geneva, Helvetica, Arial, sans-serif;
    /* System 7 - strict 1-bit monochrome stylesheet
       Clean, valid CSS that applies Chicago font site-wide and avoids nested/duplicated rules.
    */

    /* The actual scrollable output area inside the terminal */
      font-family: 'Chicago';
      src: url('chicago-12-1.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      font-family: 'System7UI';
      src: local('Geneva'), local('Helvetica'), local('Arial');
    }

    /* Base */
    html, body { height: 100%; }
    body {
        margin: 0;
        padding: 0;
        font-family: Chicago, System7UI, Geneva, Helvetica, Arial, sans-serif;
        background: #e6e6e6;
        color: #000;
        font-size: 16px; /* larger text everywhere */
        line-height: 1.2;
        overflow: hidden;
    }

    /* Force Chicago for form controls and general text, but keep monospace for terminals */
    * { box-sizing: border-box; }
    input, select, button, textarea { font-family: Chicago, System7UI, Geneva, Helvetica, Arial, sans-serif; }

    /* Desktop and menubar */
    .menubar {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: 26px;
        background: #fff;
        border-bottom: 1px solid #000;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 8px;
        z-index: 2000;
        font-size: 16px;
    }
    .menubar .apple { width:18px; height:18px; background:#000; margin-right:8px; border:1px solid #000; }
    .menu-item { padding: 0 10px; line-height:26px; color: #000; cursor: default; }
    .menu-item:hover { background: #000; color: #fff; }
    .menuright { margin-left: auto; display:flex; gap:8px; align-items:center; }

    .desktop { position: absolute; top: 26px; left:0; right:0; bottom:0; background:#e6e6e6; }
    /* Tiny dark grey grid background to mimic System 7 desktop dither */
    .desktop.dither {
        background-color: #dcdcdc;
        background-image:
            linear-gradient(0deg, rgba(0,0,0,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0,0,0,0.06) 1px, transparent 1px);
        background-size: 4px 4px;
    }

    /* Desktop icons */
    /* place desktop icons on the left column like System 7 style */
    .desktop-icons { position:absolute; left:12px; top:36px; display:flex; flex-direction:column; gap:14px; align-items:center; }
    .desktop-icon { width:84px; text-align:center; font-size:16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; }
    .desktop-icon img { width:48px; height:48px; image-rendering: pixelated; display:block; }
    .desktop-label { display:block; margin-top:6px; font-family: 'Geneva', 'Helvetica', sans-serif; font-weight:700; font-size:14px; line-height:1; text-align:center; }

    /* Generic window chrome */
    .window, .terminal-window, .notepad-window, .dialogue-box, .browser-window {
        position: absolute;
        border: 2px solid #000; /* thicker outer border like System 7 */
        background: #fff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-shadow: none;
    }

    .title-bar, .dialogue-title-bar, .browser-titlebar {
        height: 28px;
        background: linear-gradient(180deg, #fff 0%, #e6e6e6 100%);
        color: #000;
        display: flex;
        align-items: center;
        padding: 0 4px;
        border-bottom: 2px solid #000;
        position: relative;
    }
    .title-left { display:flex; gap:6px; align-items:center; margin-right:8px; }
    .title-center { position: absolute; left: 50%; transform: translateX(-50%); top: 3px; }
    .title-center .title-box { display:inline-block; border:1px solid #000; background:#fff; padding:2px 8px; font-weight:bold; }

    .window .window-controls, .dialogue-title-bar .dialogue-controls { display:flex; gap:4px; margin-right:8px; }
    .control-btn, .dialogue-control-btn { width:18px; height:16px; border:2px solid #808080; background:#dcdcdc; display:flex; align-items:center; justify-content:center; font-size:12px; cursor:pointer; box-shadow: 1px 1px 0 #ffffff inset, -1px -1px 0 #000000 inset; }
    .control-btn:active { background:#808080; color:#fff; }

    /* Compact System-7 style control buttons (small boxed look) */
    .window .control-btn { width:20px; height:16px; margin-left:4px; padding:0; border:1px solid #000; background:#ffffff; box-shadow:none; display:flex; align-items:center; justify-content:center; font-size:11px; }
    .window .control-btn:active { background:#000; color:#fff; }

    .window::after { content: ''; position: absolute; right:4px; bottom:4px; width:9px; height:9px; border:1px solid #000; background:#fff; }

    .window .window-content, .notepad-content, .vn-text-area { padding:6px; background:#fff; color:#000; }

    /* Terminal: use monospace for better readability, but still System 7 look */
    /* Make the terminal element grow to fill the terminal window and keep the
       scrollable output area inside #output so the black terminal fills the
       chrome instead of leaving a large white gap. */
    #terminal {
        background: #fff;
        color: #000;
        padding: 6px;
        font-family: 'Courier New', Courier, monospace;
        font-size: 12px;
        border: 2px solid #000; /* black border for 1-bit System 7 look */
        display: flex;
        flex-direction: column;
        flex: 1 1 auto; /* fill remaining vertical space in .terminal-window */
        overflow: hidden; /* keep scrolling on #output */
    }
    /* The actual scrollable output area inside the terminal */
    #output {
        flex: 1 1 auto;
        overflow: scroll; /* force scrollbar to always show */
        padding-right: 6px; /* avoid overlaying scrollbar on text */
    }
    #output::-webkit-scrollbar {
        width: 12px;
    }
    #output::-webkit-scrollbar-track {
        background: #fff;
    }
    #output::-webkit-scrollbar-thumb {
        background: #000; /* black scrollbar for visibility */
    }
    #output::-webkit-scrollbar-thumb:hover {
        background: #ccc;
    }
    /* Input / live prompt lines sit at the bottom */
    .input-line, .live-input-line {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        color: #000;
        min-width: 0; /* allow children to shrink properly in flex layout */
    }

    .live-input-line .live-input { 
        white-space: pre; 
        color: #000; 
        display: inline-block;
        flex: 0 0 auto; /* size to content so caret appears directly after text */
        min-width: 0; /* allow it to shrink in constrained layouts */
        max-width: calc(100% - 48px); /* leave room for prompt and caret; long input will scroll */
        overflow-x: auto; /* allow long input to scroll horizontally */
    }

    .live-input-line .caret { color: #000; margin-left: 0px; }
    /* Each appended line in the terminal is a separate block to emulate real terminals */
    .terminal-line { white-space: pre-wrap; font-family: 'Courier New', Courier, monospace; color: #000; margin: 0; line-height: 1.2; }
    .terminal-line .prompt { color: #000; font-weight:700; }
    #terminal::-webkit-scrollbar { width:12px; }
    #terminal::-webkit-scrollbar-track { background:#fff; }
    #terminal::-webkit-scrollbar-thumb { background:#000; }

    /* subtle highlight animation when new output appears */
    .terminal-line.new-output {
        animation: newOutputFlash 700ms ease forwards;
    }

    @keyframes newOutputFlash {
        0% { background: rgba(0,0,0,0.06); transform: translateY(-2px); }
        40% { background: rgba(0,0,0,0.03); transform: translateY(0); }
        100% { background: transparent; transform: none; }
    }

    /* Positioning for the terminal window so it doesn't sit under the very top of the page */
    .terminal-window {
        top: 72px; /* below the 22px menubar + a small gap */
        left: 120px;
        right: 120px;
        max-width: 980px;
        height: 600px; /* increased height for longer terminal */
        z-index: 300; /* keep terminal above desktop items */
        display:flex; flex-direction:column;
    }

    /* Terminal-specific title bar to emulate classic System 7 blue chrome */
    .terminal-window .title-bar {
        background: #c0c0c0; /* System 7 gray for more monochrome look */
        color: #000;
        padding: 2px 8px;
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 2px solid #000;
        text-transform: uppercase;
        font-size: 14px;
    }
    .terminal-window .title-bar .title-box { border:1px solid #000; background:#c0c0c0; color:#000; padding:2px 6px; }
    .terminal-window .title-left { position: absolute; left: 6px; }
    .terminal-window .window-controls { position: absolute; right: 6px; display:flex; gap:4px; }

    /* Dialogue box */
    .dialogue-box { width:420px; height:160px; }
    .dialogue-title { font-weight:bold; }
    .vn-character-info { width:56px; padding:4px; }
    .vn-avatar { width:48px; height:48px; border:1px solid #000; background:#fff; display:block; }
    .vn-text-area { margin-left:64px; }
    .vn-dialogue-text { color:#000; font-size:12px; }

    /* Notepad */
    .notepad-window { width:420px; height:320px; }
    .notepad-content textarea { width:100%; height:100%; box-sizing:border-box; border:1px solid #000; outline:none; font-family: 'Courier New', Courier, monospace; font-size:12px; }

    /* Menus & dropdowns */
    .ie-menu-dropdown, .menu-dropdown { background:#fff; border:1px solid #000; min-width:160px; }
    .ie-menu-item, .menu-item-row { padding:4px 8px; cursor:pointer; }
    .ie-menu-item:hover, .menu-item-row:hover { background:#000; color:#fff; }

    /* Toolbars & buttons */
    .browser-toolbar, .toolbar, .ie-toolbar { background:#fff; border-bottom:1px solid #000; padding:4px; display:flex; gap:6px; align-items:center; }
    .toolbar-btn, .ie-btn, .calc-btn, .paint-tool { border:1px solid #000; background:#fff; padding:2px 6px; cursor:pointer; }
    .toolbar-btn:active, .ie-btn:active, .calc-btn:active, .paint-tool:active { background:#000; color:#fff; }

    /* Status bar */
    .status-bar { background:#fff; border-top:1px solid #000; padding:4px; font-size:11px; display:flex; justify-content:space-between; }

    /* Explorer panes */
    .explorer-left { background:#fff; border-right:1px solid #000; }
    .explorer-right { background:#fff; }
    .explorer-row { padding:6px; border:1px solid transparent; background:#fff; }
    .explorer-row:hover { background:#000; color:#fff; }

    /* Modal and alerts */
    .modal-window, .alert-content, .mediaplayer-content, .imageviewer-content { background:#fff; border:1px solid #000; }
    .modal-overlay { background: rgba(0,0,0,0.5); }

    /* Cards / graphics simplified */
    .card { background:#fff; border:1px solid #000; }

    /* Desktop trash */
    .desktop-trash { position:absolute; right:12px; bottom:12px; width:40px; height:40px; border:1px solid #000; background:#fff; display:flex; align-items:center; justify-content:center; }

    /* Sticky note for lived-in desktop feel */
    .desktop-sticky {
        position: absolute;
        left: 120px;
        top: 64px;
        width: 180px;
        padding: 6px 8px;
        background: #fff79a; /* pale sticky yellow */
        border: 1px solid #000;
        box-shadow: 2px 2px 0 #c0c0c0;
        font-size: 12px;
        cursor: default;
        z-index: 50;
        white-space: pre-wrap;
    }

    /* Helpers */
    .hidden { display:none !important; }

    /* Opening animation used when windows are shown */
    @keyframes opening-pop {
        0% { opacity: 0; transform: translateY(8px) scale(0.96); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }
    .window.opening, .terminal-window.opening, .dialogue-box.opening {
        animation: opening-pop 180ms cubic-bezier(.2,.8,.2,1) both;
    }
    input[type="text"], textarea { font-family: Chicago, System7UI, Geneva, Helvetica, Arial, sans-serif; font-size:12px; color:#000; }

    /* Ensure standard scrollbar visuals (monochrome-friendly) */
    ::-webkit-scrollbar { background: #fff; }

    /* Small utility classes */
    .align-right { text-align: right; }
    .align-left { text-align: left; }

/* Explicit accounting task row styles to ensure visibility and spacing */
.acct-row {
    padding: 6px 8px;
    border-bottom: 1px solid #000;
    background: #fff;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

/* Dialogue and related styles continue below */
.dialogue-control-btn:hover {
    background-color: #cccccc;
}

.dialogue-control-btn:active {
    background-color: #aaaaaa;
}

.dialogue-box.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.vn-dialogue-content {
    position: relative;
    height: calc(100% - 20px);
    padding: 0;
}

/* Make the dialogue content visibly draggable and ensure it can be used as a handle */
.dialogue-box {
    cursor: default;
    z-index: 1300; /* higher to ensure it pops up */
}
.dialogue-box .vn-dialogue-content,
.dialogue-box .vn-text-area {
    cursor: move; /* indicate draggable area */
    user-select: none; /* avoid selecting text while dragging */
}

.vn-character-info {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 60px;
    z-index: 1;
}

.vn-avatar {
    width: 48px;
    height: 48px;
    border: 1px inset #c0c0c0;
    object-fit: cover;
    background: #c0c0c0;
}

.vn-character-name {
    margin-top: 4px;
    font-weight: bold;
    color: #000080;
    font-size: 11px;
    text-align: center;
    background-color: #c0c0c0;
    padding: 1px 4px;
}

/* Notepad adjustments */
.notepad-window { width: 420px; height: 320px; }
/* Make the notepad content fill the window and use flex so the textarea
   can expand to fill the available space under the title bar. */
.notepad-content {
    padding: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    background: #fff;
}

.notepad-content textarea {
    flex: 1 1 auto;
    width: 100%;
    box-sizing: border-box;
    border: none;
    padding: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    resize: none;
    outline: none;
    background: #fff;
    color: #000;
}

.vn-text-area {
    position: absolute;
    top: 20px;
    left: 78px;
    right: 8px;
    bottom: 8px;
    padding: 6px;
    background-color: #ffffff;
    border: none;
}

.vn-dialogue-text {
    color: #000000;
    line-height: 1.3;
    font-size: 11px;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

.vn-continue-prompt {
    align-self: flex-end;
    color: #808080;
    font-size: 8px;
    animation: blink 1.5s infinite;
    margin-top: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

.window {
    position: absolute;
    top: 120px;
    left: 120px;
    width: 400px;
    height: 300px;
    border: 1px solid #000000;
    background-color: #ffffff;
    box-shadow: 2px 2px 0 #cccccc;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.window .title-bar {
    background-color: #ffffff;
    color: #000000;
    border-bottom: 1px solid #000000;
    padding: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.browser-titlebar {
    height: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 6px;
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #000000;
}
.browser-titlebar .icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    image-rendering: pixelated;
}
.browser-titlebar .title {
    font-size: 13px;
    margin-left: 2px;
    margin-right: auto;
    color: #000000;
    font-family: 'Geneva', 'Helvetica', sans-serif;
}
.browser-titlebar .window-controls {
    margin-left: auto;
    display: flex;
    gap: 4px;
    align-items: center;
}
.browser-titlebar .control-btn {
    width: 14px;
    height: 14px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid #000000;
}
.browser-titlebar .control-btn:active {
    background: #cccccc;
}

.menu-bar {
    display:flex;
    gap:12px;
    background:#efefef;
    padding:4px 8px;
    font-size:12px;
    color:#111;
    border-bottom:1px solid #b0b0b0;
    font-family: 'MS Sans Serif', Tahoma, Arial, sans-serif;
}

.ie-menu-dropdown { background:#efefef; border-left:2px solid #fff; border-top:2px solid #fff; border-right:2px solid #404040; border-bottom:2px solid #404040; box-shadow:2px 2px 0 #000; min-width:160px; }
.ie-menu-item { padding:6px 10px; font-size:13px; cursor:pointer; }
.ie-menu-item:hover { background:#000080; color:#fff; }
.ie-menu-separator { height:1px; background:rgba(0,0,0,0.1); margin:4px 0; }

/* Browser toolbar styling (System 7 themed) */
.ie-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 6px 8px;
    background: linear-gradient(90deg,#eaeaea,#dcdcdc);
    border-bottom: 2px inset #c0c0c0;
}
    .ie-toolbar .ie-toolbar-left { display:flex; gap:8px; align-items:center; padding-left:6px; flex:0 0 auto; }
    .ie-toolbar .ie-toolbar-right { display:flex; align-items:center; gap:8px; margin-left:12px; flex:1 1 auto; justify-content:flex-end; }
    /* Compact q00ql3 search input/button (System 7 friendly) */
    .q00ql3-search { display:inline-flex; gap:6px; align-items:center; }
    .q00ql3-search input { padding:4px 6px; font-family: 'Courier New', monospace; font-size:13px; border:1px solid #000; background:#fff; width:220px; }
    .q00ql3-search button { padding:4px 8px; border:1px solid #000; background:#fff; cursor:pointer; font-weight:700; font-size:12px; }
    .q00ql3-search button:active { background:#000; color:#fff; }

    /* Compact toolbar/buttons for accounting window */
    .ie-toolbar { padding:4px 6px; gap:6px; }
    .ie-toolbar .ie-toolbar-left { padding-left:4px; }
    .toolbar-btn { border:1px solid #000; background:#fff; padding:2px 6px; font-size:12px; height:20px; }
    .toolbar-btn:active { background:#000; color:#fff; }
    .ie-icon-img { width:16px; height:16px; image-rendering:pixelated; display:block; object-fit:contain; }

.ie-toolbar .ie-toolbar-right { display:flex; align-items:center; gap:8px; }
#browser-url { width:260px; padding:4px; font-size:12px; border:1px solid #999; }

.window .title-bar .icon {
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

.window .window-controls {
    display: flex;
}

.window .control-btn {
    width: 14px;
    height: 14px;
    background-color: #ffffff;
    border: 1px solid #000000;
    margin-left: 2px;
    text-align: center;
    line-height: 12px;
    font-size: 10px;
    cursor: pointer;
}

.window .window-content {
    padding: 10px;
    flex-grow: 1;
    background-color: #ffffff;
    border: none;
}

.browser-toolbar {
    background-color: #ffffff;
    padding: 3px;
    border-bottom: 1px solid #000000;
}

#browser-url {
    width: 100%;
    box-sizing: border-box;
}

.toolbar-btn {
    border: 1px solid #000000;
    background-color: #ffffff;
    padding: 2px 6px;
    margin-right: 6px;
    cursor: pointer;
}

.toolbar-btn[disabled], .toolbar-btn.disabled {
    background-color: #cccccc;
    color: #888888;
    cursor: default;
}

.q00ql3-search {
    display: inline-flex;
    gap: 4px;
    margin-left: 6px;
    align-items: center;
}

.q00ql3-search input {
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
}

.q00ql3-search button {
    padding: 2px 6px;
    cursor: pointer;
}

/* Explorer styling */
.explorer-list { display: flex; flex-direction: column; gap: 4px; }
.explorer-row { padding: 6px; border: 1px solid #000; background: #fff; cursor: pointer; }
.explorer-row:hover { background: #e8f0ff; }
.explorer-locked { background: #f8f8f8; color: #888; font-style: italic; }
.explorer-hint { margin-top: 8px; font-size: 11px; color: #333; }

.explorer-row[aria-selected="true"] { outline: 2px solid #000080; background: #dfefff; }
.explorer-row::after { content: ""; }

/* Modal (unlock) */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2000; display: flex; align-items: center; justify-content: center; }
.modal.hidden { display: none; }
.modal-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); }
.modal-window { position: relative; background: #c0c0c0; border: 2px outset #000; width: 360px; }
.modal-titlebar { background: #000080; color: #fff; padding: 4px 6px; display:flex; justify-content:space-between; align-items:center; }
.modal-content { padding: 12px; background: #fff; }
.modal-actions { display:flex; gap:8px; margin-top:8px; }
.modal-content input { width: 100%; box-sizing: border-box; padding:6px; }

.ie-toolbar { display:flex; gap:6px; align-items:center; padding:6px; background:linear-gradient(#e8e8e8,#cfcfcf); border-bottom:1px solid #808080; }
.ie-toolbar { display:flex; gap:6px; align-items:center; padding:6px; background:linear-gradient(#e8e8e8,#cfcfcf); border-bottom:1px solid #808080; }
.ie-toolbar-left { display:flex; gap:4px; }
.ie-btn { width:56px; height:48px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px outset #fff; background:#dcdcdc; font-size:12px; }
.ie-btn small { font-size:10px; display:block; }
.ie-toolbar-right { display:flex; align-items:center; gap:8px; flex:1; }
.ie-content { background:#fff; padding:10px; }
.ie-content { background:#fff; padding:10px; }

/* Explorer panes */
.explorer-content { display:flex; gap:6px; height:100%; }
.explorer-left { width:160px; background:#e8e8e8; border-right:2px inset #c0c0c0; padding:6px; overflow:auto; }
.explorer-right { flex:1; background:#fff; padding:6px; overflow:auto; border-left:2px inset #fff; }
.explorer-tree .tree-item { padding:4px 6px; border:1px solid transparent; cursor:pointer; }
.explorer-tree .tree-item:hover { background:#dfefff; border-color:#000080; }
.explorer-list { display:flex; flex-direction:column; gap:4px; }
.explorer-columns { display:flex; gap:8px; font-weight:bold; border-bottom:1px solid #000; padding-bottom:4px; }
.explorer-filecell { display:flex; gap:12px; align-items:center; padding:6px; border:1px solid transparent; }
.explorer-filecell:hover { background:#f0f8ff; }
.explorer-icon { width:24px; height:24px; background:#fff; border:1px solid #000; display:inline-block; }

#aim-content {
    font-family: "Tahoma", sans-serif;
    font-size: 12px;
}

.mediaplayer-content, .imageviewer-content, .alert-content {
    background-color: #c0c0c0;
    text-align: center;
    padding: 20px;
}

#mediaplayer-audio {
    width: 100%;
}

#imageviewer-img {
    max-width: 100%;
    max-height: 100%;
    border: 1px solid #000;
}

.alert-icon {
    font-size: 48px;
    color: #f00;
    border: 2px solid #000;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    margin: 0 auto 15px;
    background-color: #fff;
}

#alert-ok-btn {
    padding: 5px 15px;
    border: 2px solid #000;
    background-color: #c0c0c0;
    box-shadow: 1px 1px 0px #000;
}

.hidden {
    display: none;
}

/* Calculator styles */

.calculator-content {
    /* 1-bit System 7 style: clean white surface with sharp black border */
    background-color: #fff;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 2px solid #000;
}

/* Calculator window geometry so it doesn't clip its contents */
.calculator-content { box-sizing: border-box; width: 100%; max-width: 460px; }
#calculator-window {
    width: 460px;
    height: 520px; /* increase to avoid cutting off buttons */
    min-width: 360px;
    min-height: 420px;
}
.window .window-content { overflow: auto; }
.calculator-display { box-sizing: border-box; }
.calculator-buttons { box-sizing: border-box; }

.calculator-display {
    width: 100%;
    max-width: 320px; /* wider display to match classic calculator */
    height: 56px;
    background-color: #000; /* dark display like old LED/LCD */
    color: #fff; /* white-on-black for high contrast */
    font-family: Chicago, 'Courier New', monospace;
    font-size: 26px;
    text-align: right;
    padding: 8px 12px;
    border: 2px solid #000; /* crisp black outline */
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #000; /* subtle 1-bit shading */
    margin-bottom: 12px;
    overflow: hidden;
}

.calculator-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 56px; /* ensure square-ish buttons */
    gap: 8px;
    max-width: 320px;
    width: 100%;
}

.calc-btn {
    width: 100%;
    height: 100%;
    background: #fff; /* flat white button */
    color: #000;
    border: 1px solid #000; /* crisp 1-bit border */
    font-family: Chicago, 'Courier New', monospace;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 0 #000, -1px -1px 0 #fff inset; /* simple 1-bit raised effect */
}

.calc-btn:active {
    /* Inset effect when pressed */
    box-shadow: inset 1px 1px 0 #000;
}

.calc-op {
    background: #fff;
}

.calc-equals {
    background: #000; color: #fff; border: 1px solid #000;
}

.calc-clear {
    background: #fff; color: #000; border: 1px solid #000;
}

/* Accounting window tweaks */
.accounting-window .window-content {
    padding: 8px;
    background: #fff;
    color: #000;
    font-size: 13px;
}

.accounting-window #accounting-tasks { background: #fff; color: #000; }

.accounting-do {
    border: 1px solid #000;
    background: #f0f0f0;
    padding: 4px 8px;
    cursor: pointer;
}
.accounting-do:active { background: #c0c0c0; }

/* Paint styles */
.paint-content {
    background-color: #c0c0c0;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.paint-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    padding: 5px;
    background: linear-gradient(#e0e0e0, #c0c0c0);
    border: 2px inset #808080;
}

.paint-tool {
    width: 32px;
    height: 32px;
    border: 2px outset #ffffff;
    background: linear-gradient(#e0e0e0, #c0c0c0);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.paint-tool:active {
    border: 2px inset #ffffff;
}

#paint-canvas {
    border: 2px inset #808080;
    background: white;
    cursor: crosshair;
}

/* Solitaire styles */
.solitaire-content {
    background-color: #008000;
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.solitaire-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background: linear-gradient(#e0e0e0, #c0c0c0);
    padding: 5px;
    border: 2px inset #808080;
}

#solitaire-new {
    padding: 5px 10px;
    border: 2px outset #ffffff;
    background: linear-gradient(#e0e0e0, #c0c0c0);
    cursor: pointer;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 12px;
}

#solitaire-score {
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 12px;
    font-weight: bold;
}

#solitaire-board {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.solitaire-foundations {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.foundation {
    width: 80px;
    height: 100px;
    background: linear-gradient(#008000, #004000);
    border: 2px outset #ffffff;
    border-radius: 5px;
    position: relative;
}

.solitaire-tableau {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

.tableau-column {
    width: 80px;
    min-height: 100px;
    background: linear-gradient(#008000, #004000);
    border: 2px outset #ffffff;
    border-radius: 5px;
    position: relative;
}

.solitaire-stock {
    display: flex;
    gap: 10px;
    align-self: flex-start;
}

#stock-pile, #waste-pile {
    width: 80px;
    height: 100px;
    background: linear-gradient(#008000, #004000);
    border: 2px outset #ffffff;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
}

.card {
    width: 70px;
    height: 95px;
    background: white;
    border: 1px solid #000;
    border-radius: 3px;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    cursor: pointer;
    user-select: none;
}

.card.red { color: red; }
.card.black { color: black; }

.card-face-up {
    background: linear-gradient(white, #f0f0f0);
}

.card-face-down {
    background: linear-gradient(#008000, #004000);
    border: 2px outset #ffffff;
}

.card-value {
    font-weight: bold;
    align-self: flex-start;
}

.card-suit {
    align-self: flex-end;
    font-size: 16px;
}

/* Global text enlargement: make site-wide text larger while keeping layout stable.
   This override sets a larger base font size and forces child elements to inherit
   it so we don't need to change every px-sized rule individually. If you want
   different scaling, adjust the html font-size value below. */
html {
    font-size: 18px !important;
}
/* Force all elements to inherit the base size so px declarations are overridden */
body, body * {
    font-size: inherit !important;
}

.aim-option {
        display: block;
        margin: 5px 0;
        padding: 5px;
        background: #e6e6e6;
        border: 1px solid #000;
        cursor: pointer;
    }
    .aim-option:hover {
        background: #d0d0d0;
    }

/* Pause Menu */
.pause-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border: 2px solid #000;
    box-shadow: 4px 4px 0px #000;
    padding: 20px;
    z-index: 10000;
    font-family: 'Chicago', sans-serif;
    text-align: center;
    min-width: 200px;
}

/* Full-screen backdrop that darkens and blurs the page when paused */
.pause-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    z-index: 9998;
}

/* When the game is paused, visually dim underlying UI by applying a low-opacity overlay
   and preventing pointer events via the backdrop. The pause menu itself sits above the backdrop. */
.pause-menu {
    z-index: 9999; /* ensure it sits above the backdrop */
}

.pause-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000;
}

.pause-title small {
    font-size: 12px;
    font-weight: normal;
}

.pause-continue {
    background: #fff;
    border: 1px solid #000;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}

.pause-continue:hover {
    background: #e6e6e6;
}