@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/PressStart2P-Regular.ttf') format('truetype');
}

:root { font-family: Tahoma, "MS Sans Serif", sans-serif; font-size: 11px; }
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
    button { font-family: Tahoma, sans-serif; }
    .hidden { display: none !important; }

    /* Windows XP Welcome screen */
    #welcome {
      position: fixed; inset: 0; z-index: 20000; display: grid;
      grid-template-rows: minmax(70px, 12vh) 3px 1fr 3px minmax(84px, 15vh);
      color: #fff; background: #00309c; cursor: default;
    }
    .welcome-cap { background: #003399; }
    .welcome-line { background: linear-gradient(90deg, #7fa2eb, #fff 50%, #7fa2eb); }
    .welcome-main {
      display: grid; grid-template-columns: 1fr 1fr; align-items: center;
      background: #5a7edc; min-height: 330px;
    }
    .welcome-left { justify-self: end; width: min(420px, 90%); padding: 25px 44px 25px 10px; text-align: right; }
    .xp-brand { display: inline-flex; align-items: center; gap: 13px; margin-bottom: 20px; text-align: left; }
    .flag { width: 54px; height: 45px; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; transform: skewY(-6deg); }
    .flag i { display: block; box-shadow: inset 1px 1px rgba(255,255,255,.45); }
    .flag i:nth-child(1) { background:#f35325; } .flag i:nth-child(2) { background:#81bc06; }
    .flag i:nth-child(3) { background:#05a6f0; } .flag i:nth-child(4) { background:#ffba08; }
    .brand-text { line-height: 1; text-shadow: 1px 1px 1px #3154a7; white-space: nowrap; }
    .brand-text .microsoft { display:block; font-size:10px; letter-spacing:.3px; }
    .brand-text .windows { font-family: Arial, sans-serif; font-size:31px; letter-spacing:-2px; }
    .brand-text .xp { color:#f47d23; font-family:Arial,sans-serif; font-size:22px; font-weight:bold; margin-left:4px; }
    .welcome-left p { margin: 0; font-size: 20px; font-weight: bold; line-height: 1.4; text-shadow: 1px 1px #3557aa; }
    .welcome-divider { align-self: stretch; width: 1px; background: linear-gradient(transparent, #91a9e6 15%, #91a9e6 85%, transparent); }
    .welcome-right { display: flex; align-items: center; height: 100%; padding-left: 42px; }
    .account {
      width: 330px; min-height: 94px; display: flex; gap: 12px; align-items: flex-start;
      padding: 9px; border: 1px solid transparent; color: #fff;
    }
    .account.active { background: linear-gradient(90deg, #184bb8, rgba(42,86,187,.35)); border-color: #7da2ef transparent #3659ab #9ab6ef; }
    .user-picture { width: 64px; height: 64px; flex:none; padding:3px; background:#fff; border:1px solid #1545a4; box-shadow: 2px 2px 3px #3858a5; }
    .user-art { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
    .account-copy { padding-top: 3px; text-shadow: 1px 1px #254ca1; }
    .account-name { font-size: 22px; font-weight:bold; }
    .account-status { margin-top:10px; font-size:13px; line-height:1.35; }
    .welcome-footer { display:flex; align-items:center; justify-content:space-between; padding:0 7vw; background:#003399; font-size:12px; }
    .turn-off { display:flex; align-items:center; gap:9px; }
    .power-icon { width:28px; height:28px; display:inline-block; background:url('../ico/Shutdown.ico') center/contain no-repeat; }
    .welcome-help { max-width: 460px; line-height:1.35; }

    /* Desktop */
    #desktop { position:fixed; inset:0; background:#2e7dcc url('../img/bliss.jpg') center/cover no-repeat; cursor:default; }
    .desktop-area { position:absolute; inset:0 0 30px; overflow:hidden; }
    .shortcut-column { position:absolute; top:8px; left:6px; display:grid; gap:5px; width:84px; }
    .shortcut { width:78px; min-height:72px; padding:3px 2px; color:white; text-align:center; user-select:none; outline:none; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; }
    .shortcut.selected, .shortcut:focus { background:rgba(11,74,166,.45); outline:1px dotted rgba(255,255,255,.8); }
    .shortcut-icon { position:relative; display:block; width:40px; height:40px; margin:0; filter:drop-shadow(1px 1px 1px rgba(0,0,0,.45)); }
    .shortcut-label { display:block; padding:1px 2px; font-size:11px; line-height:14px; text-shadow:1px 1px 2px #000; text-align:center; max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:normal; }
    .shortcut.selected .shortcut-label, .shortcut:focus .shortcut-label { background:#0b4da2; }
    .shortcut-arrow { position:absolute; left:0; bottom:1px; width:13px; height:13px; color:#142f8d; background:#fff; border:1px solid #777; font:bold 12px/11px Arial; z-index:4; }
    .shortcut-arrow:after { content:"↗"; }

    .asset-icon { display:inline-block; background-position:center; background-repeat:no-repeat; background-size:contain; }
    /* Context-specific background sizes so ICO files scale to match other assets */
    .shortcut-icon.asset-icon { width:40px; height:40px; background-size:48px 48px; }
    .menu-icon.asset-icon { width:32px; height:32px; background-size:32px 32px; }
    .title-mini.asset-icon { width:16px !important; height:16px !important; background-size:16px 16px !important; display:inline-flex !important; align-items:center; justify-content:center; }
    .task-button:before { width:16px; height:16px; background-size:16px 16px; }
    .task-minesweeper:before { background-size:16px 16px; }
    .icon-documents { background-image:url('../ico/DocumentsFolder.ico'); }
    .icon-pictures { background-image:url('../ico/ImagesFolder.ico'); }
    .icon-music { background-image:url('../ico/MusicFolder.ico'); }
    .icon-ie { background-image:url('../ico/IE.ico'); }
    .icon-recycle { background-image:url('../ico/EmptyRecycleBin.ico'); }
    .icon-control { background-image:url('../ico/ControlPanel.ico'); }
    .icon-help { background-image:url('../ico/HelpAndSupport.ico'); }
    .icon-search { background-image:url('../ico/Search.ico'); }
    .icon-run { background-image:url('../ico/Run.ico'); }
    .icon-signout { background-image:url('../ico/SignOut.ico'); }
    .icon-shutdown { background-image:url('../ico/Shutdown.ico'); }
    /* Minesweeper icon: prefer PNG if present, fall back to ICO and a bundled fallback */
    .icon-minesweeper { background-image:url('../ico/Minesweeper.ico');}
    .asset-icon:before, .asset-icon:after { content:none !important; display:none !important; }

    /* deliberately chunky, early-2000s system artwork */
    .folder-icon:before { content:""; position:absolute; left:4px; top:10px; width:32px; height:25px; background:linear-gradient(135deg,#fff29b,#e3a319 72%); border:1px solid #8c6507; }
    .folder-icon:after { content:""; position:absolute; left:6px; top:6px; width:15px; height:8px; background:#efc44f; border:1px solid #8c6507; border-bottom:0; }
    .folder-icon i { position:absolute; z-index:2; width:17px; height:20px; right:2px; bottom:0; background:#fff; border:1px solid #6681a9; transform:rotate(7deg); }
    .folder-icon i:after { content:""; position:absolute; inset:4px 3px; background:repeating-linear-gradient(#6b91c4 0 1px,transparent 1px 4px); }
    .internet-icon:before { content:"e"; position:absolute; left:5px; top:0; width:31px; height:34px; color:#1167c5; font:bold italic 36px/36px Arial; text-shadow:-1px 1px #7cc7ef; }
    .internet-icon:after { content:""; position:absolute; left:2px; top:17px; width:36px; height:10px; border-top:4px solid #f1c22c; border-radius:50%; transform:rotate(-13deg); }
    .recycle-icon:before { content:""; position:absolute; left:10px; top:9px; width:23px; height:28px; background:linear-gradient(90deg,#d6f1f1,#fff 45%,#a9d3d8); border:1px solid #397c87; transform:perspective(30px) rotateX(-3deg); }
    .recycle-icon:after { content:"â™»"; position:absolute; left:13px; top:12px; color:#2e9b52; font:19px/22px Arial; }

    /* XP.css windows, adapted into a desktop shell */
    .app-window { position:absolute; display:none; min-width:260px; z-index:10; box-shadow:2px 3px 7px rgba(0,0,0,.45); }
    .app-window.visible { display:flex; }
    .app-window .title-bar { cursor:default; touch-action:none; }
    .app-window.maximized { left:0 !important; top:0 !important; width:100% !important; height:100% !important; }
    .app-window.maximized .page { min-height:calc(100vh - 111px); }
    .app-window .title-bar-text { display:flex; align-items:center; gap:4px; }
    .title-mini { position:relative; width:16px; height:16px; display:inline-block; transform:scale(.4); transform-origin:center; }
    .title-mini.asset-icon { transform:none; }
    .app-window .window-body { margin:0 3px 3px; padding:12px; min-height:180px; background:#ece9d8; }
    .app-window.inactive .title-bar { background:linear-gradient(180deg,#7697d0,#7a96c4 45%,#8ba8d7); }
    .app-window.inactive .title-bar-text { text-shadow:none; }
    .about-window { left:118px; top:52px; width:700px; }
    .social-window { left:175px; top:92px; width:430px; }
    .mines-window { left:230px; top:72px; width:198px; min-width:198px; }
    .classic-toolbar { height:25px; display:flex; align-items:center; gap:18px; padding:0 7px; border-bottom:1px solid #aca899; background:#ece9d8; color:#222; }
    .classic-toolbar span:first-letter { text-decoration:underline; }
    .address-bar { display:flex; align-items:center; gap:5px; height:28px; padding:3px 5px; border-bottom:1px solid #aca899; background:#ece9d8; }
    /* Remove duplicate border when IE bookmarks bar is present */
    .ie-window .address-bar { border-bottom: 0; }
    .address-bar label { color:#444; }
    /* Address field: make input itself styled, not the whole row, so bookmarks bar sits clearly below */
    .address-field { flex:1; height:21px; display:flex; align-items:center; gap:5px; padding:1px 4px; background:white; border:1px solid #7f9db9; }
    /* Ensure non-IE windows show standard address field */
    .window .address-field { background:white; border:1px solid #7f9db9; padding:1px 4px; }
    /* IE window uses a compact input; don't double-style it */
    .ie-window .address-field { background:transparent; border:0; padding:0; }
    .address-field input#ieAddress{flex:1;padding:6px;border:1px solid #7f9db9;background:white;border-radius:2px;font-size:13px}
    .address-field button#ieGo{padding:6px 8px;border:1px solid #7f9db9;background:#f0f4fb;border-radius:2px;cursor:pointer}
    .page { display:grid; grid-template-columns:140px 1fr; min-height:260px; background:white; }
    .tasks-pane { padding:10px; background:linear-gradient(135deg,#7b9edd,#d3def3); }
    .tasks-box { margin-bottom:12px; background:#fff; border:1px solid #fff; border-radius:5px 5px 0 0; overflow:hidden; }
    .tasks-title { padding:5px 8px; color:#164395; font-weight:bold; background:linear-gradient(90deg,#fff,#c5d5f2); }
    .tasks-box ul { list-style:none; margin:0; padding:7px 8px; color:#164395; line-height:1.7; }
    .about-content { padding:18px 21px; color:#111; }
    .about-content h1 { margin:0 0 5px; color:#215dc6; font-size:24px; font-weight:normal; }
    .about-content h2 { margin:17px 0 5px; color:#555; font-size:13px; }
    .about-content p { margin:0 0 10px; font-size:12px; line-height:1.5; }
    .detail-list { margin:5px 0; padding-left:19px; line-height:1.65; }
    .xp-rule { height:1px; border:0; background:#d6d2c2; margin:14px 0; }
    .social-body { padding:18px !important; }
    .social-body h2 { margin:0 0 8px; font-size:16px; }
    .social-body p { line-height:1.5; }
    .social-body fieldset { margin:14px 0; padding:12px; }
    .social-body a { color:#0000ee; }
    .dialog-actions { display:flex; justify-content:flex-end; margin-top:14px; }

    /* Luna taskbar */
    .taskbar { position:absolute; left:0; right:0; bottom:0; z-index:10000; height:30px; display:flex; align-items:stretch; background:linear-gradient(#3168d5 0,#3f82ed 9%,#245edb 18%,#245edb 82%,#1941a5 100%); box-shadow:inset 0 1px #6da7f7; }
    .start-button { flex:none; width:100px; margin:0 4px 0 0; padding:0 11px 0 6px; border:0; border-radius:0 14px 14px 0; color:#fff; display:flex; align-items:center; gap:5px; font-size:18px; font-style:italic; font-weight:bold; text-shadow:1px 1px 2px #174a19; background:linear-gradient(#75c76a 0,#3c9b39 12%,#328b32 83%,#1d6d20 100%); box-shadow:inset 0 1px #b8e6b2,inset -2px 0 3px #1c651e; cursor:default; }
    .start-button:hover, .start-button.active { filter:brightness(1.12); }
    /* Ensure active start button keeps readable white text */
    .start-button.active { background: linear-gradient(#5bb764 0,#2f8e2f 100%) !important; color:#fff !important; text-shadow:1px 1px 2px rgba(0,0,0,0.6) !important; box-shadow:inset 0 1px rgba(0,0,0,0.15) !important; }
    .start-flag { width:23px; height:23px; object-fit:contain; filter:drop-shadow(1px 1px #17511b); }
    .quick-launch { display:flex; align-items:center; gap:5px; padding:0 7px 0 4px; border-right:1px solid #1746a0; }
    .quick-icon { position:relative; width:17px; height:17px; overflow:hidden; transform:scale(.55); transform-origin:center; }
    .quick-icon.asset-icon { transform:none; }
    .task-buttons { flex:1; display:flex; align-items:center; gap:3px; min-width:0; padding:2px 4px; }
    .task-button, .task-button:focus, .task-button:active { width:160px; max-width:28vw; height:25px; padding:0 8px; overflow:hidden; border:1px solid #1648ad; border-radius:2px; color:#fff; background:#3c81f3; box-shadow:inset 1px 1px rgba(255,255,255,.25); text-align:left; white-space:nowrap; text-overflow:ellipsis; font-size:11px; }
    .task-button:before { content:""; display:inline-block; width:16px; height:16px; margin-right:5px; vertical-align:middle; background:center/contain no-repeat; }
    .task-about:before { background-image:url('../ico/DocumentsFolder.ico'); }
    .task-linkedin:before, .task-instagram:before { background-image:url('../ico/IE.ico'); }
    .task-recycle:before { background-image:url('../ico/EmptyRecycleBin.ico'); }
    .task-minesweeper:before { background-image:url('../ico/Minesweeper.ico') ; background-size:16px 16px; background-position:center; background-repeat:no-repeat; }
    .task-button.active, .task-button.active:focus, .task-button.active:active { color:#fff; background:#1e52b7; box-shadow:inset 1px 1px 2px #153779; }
    .tray { min-width:58px; padding:0 11px; display:flex; align-items:center; justify-content:flex-end; color:#fff; border-left:1px solid #1042a3; background:linear-gradient(#19b9f2,#0e9be8 15%,#0e9be8 85%,#0879c9); box-shadow:inset 1px 0 #3fd5f7; }

    /* Start menu */
    .start-menu { position:absolute; left:0; bottom:30px; z-index:9999; width:380px; height:455px; border:2px solid #1d4aa5; border-bottom:0; border-radius:6px 6px 0 0; overflow:hidden; background:#fff; box-shadow:2px -2px 8px rgba(0,0,0,.35); }
    .start-header { height:64px; padding:7px 9px; display:flex; align-items:center; gap:10px; color:#fff; font-size:15px; font-weight:bold; text-shadow:1px 1px #174387; background:linear-gradient(#1f5ab7,#3f8bea 72%,#1d5dbb); border-bottom:2px solid #f0a43a; }
    .start-header .user-picture { width:48px; height:48px; }
    .start-columns { height:347px; display:grid; grid-template-columns:1fr 1fr; }
    .start-primary { padding:6px; background:#fff; }
    .start-secondary { padding:6px; color:#123b83; background:#d3e5fa; border-left:1px solid #95bdee; }
    .start-item { width:100%; min-height:42px; padding:4px; display:flex; align-items:center; gap:9px; border:0; color:#111; background:transparent; text-align:left; font:bold 11px Tahoma; }
    .start-item small { display:block; color:#777; font-weight:normal; }
    .start-secondary .start-item { min-height:32px; color:#123b83; }
    .start-item:hover { color:white; background:#316ac5; }
    .start-item:hover small { color:white; }
    .menu-icon { position:relative; width:32px; height:32px; flex:none; transform:scale(.78); }
    .sys-glyph { position:relative; width:22px; height:22px; flex:none; display:inline-block; }
    .sys-glyph.docs:before { content:""; position:absolute; left:2px; top:7px; width:18px; height:13px; border:1px solid #8b650d; background:linear-gradient(135deg,#fff5a1,#e6ad22); }
    .sys-glyph.docs:after { content:""; position:absolute; left:3px; top:4px; width:9px; height:5px; border:1px solid #8b650d; border-bottom:0; background:#efc453; }
    .sys-glyph.picture { border:2px solid #eee; box-shadow:0 0 0 1px #3665a7; background:linear-gradient(#62b9ec 0 52%,#58a53c 53%); }
    .sys-glyph.picture:after { content:""; position:absolute; left:3px; bottom:2px; border-left:7px solid transparent; border-right:7px solid transparent; border-bottom:9px solid #dce66b; }
    .sys-glyph.music { border:2px solid #6783ae; border-radius:50%; background:radial-gradient(circle,#fff 0 20%,#6bc4dc 22% 35%,#eee 38%); }
    .sys-glyph.music:after { content:"♪"; position:absolute; right:-4px; top:-5px; color:#315cc2; font:bold 18px Arial; }
    .sys-glyph.panel { border:1px solid #777; background:repeating-linear-gradient(90deg,#d6d2c5 0 4px,#f3f0e7 4px 8px); }
    .sys-glyph.panel:after { content:"••"; position:absolute; left:4px; top:2px; color:#194fbf; font-size:13px; }
    .sys-glyph.help:before { content:"?"; position:absolute; inset:0; border-radius:50%; color:white; background:#447bd7; text-align:center; font:bold 18px/22px Arial; }
    .sys-glyph.search:before { content:""; position:absolute; left:2px; top:1px; width:12px; height:12px; border:3px solid #4c77bb; border-radius:50%; background:#d9f2ff; }
    .sys-glyph.search:after { content:""; position:absolute; width:10px; height:3px; left:13px; top:15px; background:#c99b41; transform:rotate(45deg); }
    .sys-glyph.run { border:2px solid #315ba0; background:#fff; box-shadow:inset 0 4px #4d83d0; }
    .tiny-folder { position:relative; width:16px; height:16px; flex:none; }
    .tiny-folder:before { content:""; position:absolute; left:1px; top:-4px; width:7px; height:4px; background:#e9bc38; border:1px solid #8c6507; border-bottom:0; }
    .tiny-folder.asset-icon:before { display:none; }
    .start-separator { height:1px; margin:6px 3px; background:#aebfd8; border-bottom:1px solid white; }
    .start-footer { height:44px; display:flex; justify-content:flex-end; align-items:center; gap:14px; padding:0 13px; color:white; background:linear-gradient(#428de9,#1f63bd); }
    .footer-action { display:flex; align-items:center; gap:5px; border:0; color:white; background:transparent; font:11px Tahoma; }
    .footer-square { width:27px; height:27px; flex:none; }

    /* Minesweeper */
    .mines-body { padding:6px !important; background:#c0c0c0 !important; min-height:auto !important; }
    .mine-panel { padding:5px; border:2px solid; border-color:#fff #808080 #808080 #fff; background:#c0c0c0; }
    .mine-status { height:34px; margin-bottom:6px; padding:4px 5px; display:flex; align-items:center; justify-content:space-between; border:2px solid; border-color:#808080 #fff #fff #808080; }
    .mine-counter { min-width:39px; padding:1px 3px; color:#ff1f1f; background:#111; border:1px inset #777; font:bold 20px/22px "Courier New", monospace; text-align:right; letter-spacing:1px; }
    .mine-face { width:26px; height:26px; padding:0; border:2px solid; border-color:#fff #808080 #808080 #fff; background:#c0c0c0; font:18px/20px Arial, sans-serif; text-align:center; }
    .mine-face:active { border-color:#808080 #fff #fff #808080; }
    .mine-board { display:grid; grid-template-columns: repeat(var(--cols,9), 1fr); grid-auto-rows: 1fr; gap:0; width:100%; max-width: calc(var(--cols,9) * 34px); border:2px solid; border-color:#808080 #fff #fff #808080; }
    .mine-cell { aspect-ratio:1 / 1; width:100%; height:auto; padding:0; margin:0; border:2px solid; border-color:#fff #808080 #808080 #fff; background:#c0c0c0; font:bold 11px/12px 'Press Start 2P', 'Courier New', monospace !important; text-align:center; display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; }
    .mine-cell:focus{ outline:2px solid rgba(0,0,0,0.2); }
    .mine-cell.open { border:1px solid #808080; background:#e9e4d5; }
    .mine-cell.flagged { color:#b30000; font-size:14px; }
    .mine-cell.mine { color:#000; background:#f33; }
    .mine-cell.n1 { color:#0000ff; }
    .mine-cell.n2 { color:#008000; }
    .mine-cell.n3 { color:#ff0000; }
    .mine-cell.n4 { color:#000080; }
    .mine-cell.n5 { color:#800000; }
    .mine-cell.n6 { color:#008080; }
    .mine-note { margin:6px 1px 0; color:#333; font-size:11px; }
    /* Make difficulty buttons wrap and use smaller padding when space is tight */
    .mine-controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
    .mine-controls button{padding:4px 6px;font-size:12px}

    @media (max-width:650px) {
      .welcome-main { grid-template-columns:1fr; align-content:center; }
      .welcome-left { justify-self:center; width:auto; padding:15px; text-align:center; }
      .welcome-divider { display:none; }
      .welcome-right { justify-content:center; height:auto; padding:10px; }
      .welcome-help { display:none; }
      .app-window { left:6px !important; top:35px !important; width:calc(100vw - 12px) !important; }
      .page { grid-template-columns:1fr; }.tasks-pane{display:none}.quick-launch{display:none}
      .start-menu { width:min(380px,100vw); }.task-button{width:120px}
    }

    /* Stronger contrast enforcement for title bars and taskbar */
    /* Title bar: force white text for readability */
    .app-window .title-bar-text { color: #ffffff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.85) !important; padding:4px 8px; font-weight:700; display:flex !important; align-items:center !important; gap:6px !important; }
    .app-window.inactive .title-bar-text { opacity:0.95 !important; }
    .title-mini { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:16px !important; height:16px !important; margin-right:6px !important; vertical-align:middle !important; }

    /* Taskbar: darker background and stronger text shadow for readability */
    .taskbar { background:linear-gradient(#1c4aa0 0,#153f85 100%) !important; }
    .task-button, .task-button:focus, .task-button:active { color:#fff !important; text-shadow: 1px 1px 2px rgba(0,0,0,0.85) !important; }
    .task-button.active, .task-button.active:focus, .task-button.active:active { background:#0f2e66 !important; color:#fff !important; box-shadow:inset 1px 1px 2px rgba(0,0,0,0.6) !important; }

    /* Minesweeper styling: classic number colors and font */
    .mine-cell { font-family: 'Press Start 2P', "MS Sans Serif", Tahoma, Arial, sans-serif !important; font-weight:bold; font-size:10px !important; }
    .mine-cell.open { background:#e9e4d5 !important; }
    .mine-cell.open.n1 { color:#0000ff !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n2 { color:#008000 !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n3 { color:#ff0000 !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n4 { color:#00008b !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n5 { color:#800000 !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n6 { color:#008080 !important; text-shadow: 1px 1px 0 rgba(255,255,255,0.6) !important; }
    .mine-cell.open.n7 { color:#000000 !important; text-shadow: none !important; }
    .mine-cell.open.n8 { color:#808080 !important; text-shadow: none !important; }
    .mine-cell.flagged { color:#b30000 !important; }
  
    /* Resizer handles */
    .resizer{position:absolute;background:transparent;z-index:9999}
    .resizer.n,.resizer.s{height:8px;left:0;right:0;cursor:ns-resize}
    .resizer.e,.resizer.w{width:8px;top:0;bottom:0;cursor:ew-resize}
    .resizer.n{top:-4px}
    .resizer.s{bottom:-4px}
    .resizer.e{right:-4px}
    .resizer.w{left:-4px}
    .resizer.ne,.resizer.nw,.resizer.se,.resizer.sw{width:12px;height:12px}
    .resizer.ne{right:-6px;top:-6px;cursor:nesw-resize}
    .resizer.nw{left:-6px;top:-6px;cursor:nwse-resize}
    .resizer.se{right:-6px;bottom:-6px;cursor:nwse-resize}
    .resizer.sw{left:-6px;bottom:-6px;cursor:nesw-resize}
    /* Simple wallpaper picker layout (small thumbs so actions are always visible) */
    .wallpaper-window .window-body{display:flex;flex-direction:column;min-height:0;height:100%}
    .wallpaper-preview-small{width:100%;height:120px;background-size:cover;background-position:center;border:1px solid #ccc;border-radius:4px;margin-bottom:8px;flex:0 0 auto}

    /* Make window content use flex layout so inner content scrolls instead of overflowing */
    .app-window{display:none;flex-direction:column;overflow:hidden}
    .app-window .title-bar{flex:0 0 auto}
    .window-body,.page,.about-content{flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box;padding:6px}
    /* Ensure mine board fits the available content area */
    .mine-board{width:100%;height:auto}

    /* Wallpaper picker styles: grid scrolls within window-body so action bar is always visible */
    .wallpaper-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:10px;overflow:auto;flex:1 1 auto;min-height:0}
    .wallpaper-thumb{width:100%;padding-top:66.6%;position:relative;background:#eee;border:1px solid #bbb;border-radius:4px;overflow:hidden;cursor:pointer}
    .wallpaper-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .wallpaper-thumb .label{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,0.5);color:#fff;padding:2px 6px;border-radius:2px;font-size:11px}
    .wallpaper-actions{display:flex;gap:8px;align-items:center;padding:8px;border-top:1px solid #ddd;background:#fafafa;flex:0 0 auto}
    .wallpaper-preview-large{width:100%;height:clamp(120px,30vh,320px);background-size:cover;background-position:center;border:1px solid #ccc;border-radius:4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.3);transition:height 160ms ease, background-image 120ms linear;will-change:height,background-image}
    .wallpaper-thumb[data-selected="1"]{outline:3px solid #2b7cff}

    /* Connect icon */
    .icon-connectto { background-image:url('../ico/ConnectTo.ico'); }
    .icon-msn { background-image:url('../ico/MSN.ico'); }
    .icon-videos { background-image:url('../ico/VideosFolder.ico'); }
    .icon-prohibit { background-image:url('../ico/ProhibitedSign.ico'); }

    /* Internet Explorer bookmarks bar (below the address bar) */
    .ie-bookmarks-bar{background:linear-gradient(#f8f8f8,#efefef);border-top:0;border-bottom:1px solid #d0d0d0;padding:4px 8px;display:flex;gap:6px;align-items:center;overflow-x:auto;white-space:nowrap}
    .ie-bookmark,.ie-fav{background:transparent;border:1px solid transparent;padding:4px 8px;font-size:12px;border-radius:2px;cursor:pointer;color:#0645ad}
    .ie-bookmark:focus,.ie-fav:focus{outline:2px solid rgba(6,69,173,0.2)}
    .ie-bookmark:hover,.ie-fav:hover{background:#e8f0ff;border-color:#c0d7ff}
    .ie-bookmarks-bar .label{font-weight:600;margin-right:8px;color:#333}
    .address-field input#ieAddress{padding:6px;font-size:13px}
    .ie-landing input#ieSearch{padding:6px;font-size:13px}

    /* Calendar popup */
    .calendar-popup { position: absolute; right: 12px; bottom: 36px; width: 260px; background:#fff; border:1px solid #9ab6ef; box-shadow: 2px 2px 8px rgba(0,0,0,.4); border-radius:6px; z-index:12000; font-size:12px; color:#111; }
    .calendar-popup .calendar-header { padding:8px 10px; background:linear-gradient(#eaf2ff,#d0e6ff); border-bottom:1px solid #c4d9ff; font-weight:bold; }
    .calendar-table { width:100%; border-collapse:collapse; text-align:center; }
    .calendar-table th, .calendar-table td { padding:6px; border:0; }
    .calendar-table th { color:#315ea8; font-weight:bold; }
    .calendar-table td { cursor:pointer; }
    .calendar-table td:hover { background:#e6f0ff; }
    .calendar-table td.other-month { color:#aaa; }
    .calendar-table td.today { background:#3168d5; color:#fff; border-radius:4px; }

    /* Error dialog - Windows XP themed */
    .error-dialog { position:absolute; right: 280px; bottom: 36px; width:320px; z-index:12001; }
    .error-dialog.hidden { display:none !important; }
    /* Use existing app-window title-bar styles for visual match */
    .error-dialog .title-bar { cursor:default; box-sizing:border-box; }
    .error-dialog .title-bar-text { color:#ffffff; text-shadow: 1px 1px 2px rgba(0,0,0,0.85); padding:4px 8px; font-weight:700; display:flex; align-items:center; gap:6px; }
    /* Error dialog adjustments */
    .error-body { padding:8px 10px; display:flex; flex-direction:column; gap:8px; background:#fff; border-top:0; min-height:0; }
    .error-row { display:flex; gap:10px; align-items:flex-start; }
    .error-dialog .error-icon { width:32px; height:32px; background-size:contain; background-repeat:no-repeat; background-position:center; flex:0 0 32px; }
    .error-dialog .error-text { flex:1; font-size:13px; }
    .error-dialog .dialog-actions { justify-content:center; margin-top:6px; }
    /* hide the title bar icon for error dialog to reduce visual clutter */
    .error-dialog .title-mini { display:none !important; }
    /* make the dialog compact */
    .error-dialog { width:300px; }
    .error-dialog .title-bar-text { gap:6px; }
    /* remove extra bottom space: ensure window-body is compact and buttons have no extra margin */
    .error-dialog .window-body { padding-bottom:6px; min-height:0 !important; }
    .error-dialog .dialog-actions { margin:6px 0 0; }
    .error-dialog .dialog-actions button { margin:0; }

    .title-mini.asset-icon.icon-prohibit { width:36px !important; height:36px !important; background-size:contain !important; }
    .error-text strong { display:block; margin-bottom:6px; color:#333; }
    .error-actions { padding:8px; display:flex; justify-content:flex-end; background:#f5f5f5; border-top:1px solid #ddd; }

    .experience-meta,
    .education-meta { margin:6px 0; font-style:italic; color:#444; }

    .instagram-window { left:205px; top:112px; }
    .ie-window { left:120px; top:92px; width:720px; min-width:320px; }
    .recycle-window { left:155px; top:82px; width:390px; }
    .connect-window { left:130px; top:112px; width:380px; min-width:260px; }
    .videos-window,
    .pictures-window { left:180px; top:132px; width:420px; min-width:300px; }
    .wallpapers-window { left:140px; top:92px; width:640px; min-width:320px; }

    .ie-address-input { width:70%; }
    .ie-body-layout { display:flex; flex-direction:column; gap:8px; min-height:220px; }
    .ie-bookmarks-header { width:100%; border-bottom:1px solid #ddd; padding:6px 8px; display:flex; gap:8px; align-items:center; justify-content:space-between; }
    .ie-bookmarks-group,
    .ie-bookmarks-actions { display:flex; align-items:center; gap:8px; }
    .ie-bookmarks-label { font-weight:600; margin-right:8px; color:#333; }
    .ie-bookmarks-list { display:flex; gap:6px; align-items:center; }
    .ie-open-in-new-tab { font-size:12px; }
    .ie-landing-shell { flex:1; min-height:0; display:flex; flex-direction:column; }
    .ie-landing-panel { flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:16px; gap:12px; }
    .ie-landing-content { width:100%; max-width:560px; }
    .ie-search-row { display:flex; gap:8px; }
    .ie-search-input { flex:1; padding:8px; font-size:14px; }
    .ie-search-button { padding:8px 12px; }
    .ie-landing-note { margin-top:12px; color:#666; font-size:13px; }

    .mine-controls-row { display:flex; gap:6px; align-items:center; margin:6px 0; }
    .mine-controls-spacer { flex:1; }
    .mine-highscores { margin-top:8px; font-size:13px; display:none; background:#fff; padding:8px; border:1px solid #d0d0d0; border-radius:4px; max-height:180px; overflow:auto; }

    .wallpaper-controls-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
    .wallpaper-option { font-size:12px; color:#333; display:flex; align-items:center; gap:6px; }
    .wallpaper-toggle { margin-left:auto; padding:6px 10px; }
    .wallpaper-spacer { flex:1; }

    .start-user-meta { display:flex; flex-direction:column; }
    .start-update { font-size:11px; color:#fff; opacity:0.95; margin-top:2px; cursor:help; }
    .start-bg-panel { margin:8px 0 12px 0; }
    .start-bg-label { font-size:12px; display:block; margin-bottom:6px; color:#123b83; }
    .start-bg-row { display:flex; gap:8px; align-items:center; }
    .current-bg-preview { width:48px; height:32px; background-size:cover; border:1px solid #ccc; }
    .open-wallpaper-picker-btn { flex:1; padding:6px; border:1px solid #95bdee; background:#fff; color:#123b83; cursor:pointer; }

    .error-dialog { left:auto; right:280px; bottom:36px; top:auto; }