* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: "MS Sans Serif", "Tahoma", sans-serif; }

/* Desktp */
.win95 .desktop {
  position: fixed; inset: 0 0 32px 0;
  background: #008080;
  display: grid;
  grid-template-columns: repeat(auto-fill, 90px);
  align-content: start;
  gap: 18px 24px;
  padding: 14px;
}
.desktop-icon {
  appearance: none;
  background: transparent; border: none; color: #000;
  width: 80px; text-align: center; cursor: default;
  display: inline-flex; flex-direction: column; align-items: center;
  touch-action: none;
}
.desktop-icon img {
  width: 48px; height: 48px; image-rendering: pixelated;
  margin-bottom: 6px;
}
.desktop-icon span {
  font-size: 12px; line-height: 1.2; padding: 1px 3px;
  color: #fff; text-shadow: 1px 1px 0 #000;
  border: 1px solid transparent;
}
.desktop-icon:focus span,
.desktop-icon:hover span {
  background: #000080; border-color: #ffffff;
}

/* Taskbar */

.start-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border: 2px outset #fff; background: #c0c0c0;
}
.start-btn:active { border: 2px inset #808080; }
.start-btn img { width: 18px; height: 18px; }
.start-btn span { font-weight: bold; }
.task-buttons { display: flex; gap: 6px; }
.tray {
  min-width: 60px; text-align: center; font-size: 12px;
  border: 2px inset #808080; padding: 3px 6px; background: #c0c0c0;
}

/* Start menu */
.start-menu {
  position: fixed; left: 3px; bottom: 32px; width: 220px;
  background: #c0c0c0; border: 2px solid #000;
  box-shadow: 2px 2px 0 #808080 inset, -2px -2px 0 #fff inset;
  display: none;
}
.start-menu[aria-hidden="false"] { display: grid; grid-template-columns: 48px 1fr; }
.start-menu__brand {
  background: #000080; color: #fff; padding: 6px;
  display: grid; place-items: center;
  border-right: 1px solid #000;
}
.start-menu__brand img { width: 28px; height: 28px; }
.start-menu__brand span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; }
.start-menu__items { padding: 6px; display: grid; gap: 3px; }
.start-item {
  background: #c0c0c0; border: 2px outset #fff;
  padding: 4px 6px; font-size: 12px; text-align: left;
}
.start-item:hover { background: #000080; color: #fff; }
.start-item:active { border: 2px inset #808080; }

/* Windows */
.windows-layer { position: fixed; inset: 0 0 32px 0; pointer-events: none; }
.window {
  position: absolute; min-width: 300px;
  background: #c0c0c0; border: 2px solid #000;
  box-shadow: 2px 2px 0 #808080 inset, -2px -2px 0 #fff inset;
  pointer-events: auto;
}
.win-titlebar {
  background: #000080; color: #fff;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 4px; cursor: move;
}
.win-titlebar h3 { margin: 0; font-size: 13px; }
.win-controls .win-btn { pointer-events: auto; }
.win-btn {
  width: 18px; height: 18px; background: #c0c0c0;
  border: 2px outset #fff; display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 12px;
}
.win-btn:active { border: 2px inset #808080; }
.win-body { padding: 8px; }

.games-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 18px 24px; justify-items: center;
}
.app-icon {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: #000; width: 80px;
}
.app-icon img { width: 48px; height: 48px; margin-bottom: 6px; }
.app-icon span { font-size: 12px; }
.app-icon:hover span { background: #000080; color: #fff; border: 1px solid #fff; }


.contact-card { font-size: 14px; }
.contact-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.contact-row img { width: 20px; height: 20px; }

/* Calculater */
.calc { width: 240px; }
.calc__display {
  width: 100%; padding: 4px; margin-bottom: 6px;
  border: 2px inset #808080; background: #fff; height: 28px;
}
.calc__keys {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
}
.calc__keys button {
  height: 32px; background: #c0c0c0; border: 2px outset #fff;
}
.calc__keys button:active { border: 2px inset #808080; }
.calc__eq { grid-column: span 4; font-weight: bold; height: 36px; }

/* Notpad */
.notepad .np-area {
  width: 100%; min-height: 180px; resize: vertical;
  border: 2px inset #808080;
  background: #fff9c4;
  padding: 6px; font-size: 13px;
}


.desktop-icon img {
  background: transparent;
}

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 32px;
  background: #c0c0c0;
  border-top: 2px solid #808080;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px;
  gap: 6px;
}

.taskbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.task-btn {
  height: 24px;
  padding: 0 6px;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-size: 12px;
  cursor: default;
}
.task-btn:active { border: 2px inset #808080; }



.app-95 { min-width: 320px; }

.toolbar-95 {
  display: flex; gap: 6px; margin-bottom: 8px;
}

.btn-95 {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 3px 8px;
  font-size: 12px;
  cursor: default;
}
.btn-95:active { border: 2px inset #808080; }
.btn-95.is-active {
  background: #000080; color: #fff; border-color: #fff;
}

.panel-95 {
  background: #c0c0c0;
  border: 2px inset #808080;
  padding: 8px;
}

.qna-95 {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px;
}
.qna-95 .q-label {
  font-weight: bold;
  background: #e0e0e0;
  border: 2px outset #fff;
  padding: 4px 6px;
}
.qna-95 .q-body {
  background: #fff;
  color: #000;
  border: 2px inset #808080;
  padding: 6px;
  min-height: 42px;
  line-height: 1.35;
  font-size: 13px;
}
.qna-95 + .qna-95 { margin-top: 8px; }

.hr-95 {
  height: 2px;
  margin: 8px 0;
  background: linear-gradient(#808080, #fff);
  border: none;
}


.app-95 {
  min-width: 360px;   
  min-height: 260px;  
  display: flex;
  flex-direction: column;
}

.app-95 .panel-95 {
  flex: 1;                  
  overflow-y: auto;          
}


.browser-95 { position: relative; display:flex; flex-direction:column; }

.browser-bar { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.browser-bar .btn-95 { padding:3px 8px; min-width:28px; }
.browser-url { flex:1; height:24px; border:2px inset #808080; background:#fff; padding:2px 6px; font-size:12px; }


.browser-content { position: relative; flex:1; border:2px inset #808080; background:#c0c0c0; }
.viewport {
  position: absolute; top:0; left:0; right:16px; bottom:16px;
  overflow: auto; background:#fff; padding:10px;
  scrollbar-width: none; 
}
.viewport::-webkit-scrollbar { width:0; height:0; }


.scrollbar { position: absolute; background:#c0c0c0; }
.vbar { top:0; right:0; width:16px; bottom:16px; border-left:2px solid #808080; }
.hbar { left:0; bottom:0; height:16px; right:16px; border-top:2px solid #808080; }
.scroll-track {
  position: absolute; inset:2px;
  background:#c0c0c0; box-shadow: inset 2px 2px 0 #808080, inset -2px -2px 0 #ffffff;
}
.thumb {
  position: absolute; background:#c0c0c0; min-height:20px; min-width:20px;
  box-shadow: inset -2px -2px 0 #808080, inset 2px 2px 0 #ffffff; 
  cursor: default;
}


.tabstrip { display:flex; gap:4px; margin:0 0 6px; }
.tab-95 { padding:3px 8px; background:#c0c0c0; border:2px outset #fff; font-size:12px; cursor:default; }
.tab-95.is-active { background:#000080; color:#fff; border:2px inset #808080; }

.reindeer-home { text-align:center; padding-top:30px; }
.reindeer-logo { max-width:760px; image-rendering:pixelated; }
.reindeer-form { margin-top:10px; display:flex; gap:6px; justify-content:center; }
.reindeer-input { width:360px; height:26px; border:2px inset #808080; background:#fff; padding:2px 6px; font-size:13px; }
.reindeer-btn { padding:3px 10px; border:2px outset #fff; background:#c0c0c0; }

.results { max-width:560px; margin:14px auto; color:#000; }
.result { margin:10px 0; }
.result a { color:#000080; text-decoration:none; }
.result a:hover { text-decoration:underline; }

.results-header {
  position: sticky; top:0; background:#fff; padding:8px 0 10px; z-index:1;
  border-bottom:2px solid #c0c0c0;
}
.results-row {
  display:flex; align-items:center; gap:10px; max-width:560px; margin:0 auto;
}
.results-row img { height:28px; image-rendering:pixelated; }
.results-search { display:flex; gap:6px; flex:1; }
.results-input { flex:1; height:26px; border:2px inset #808080; padding:2px 6px; font-size:13px; background:#fff; }

.wiki .brand img {
  width:48px;
  height:auto;
  object-fit:contain;
}


@media (max-width: 768px) {
  .browser-95 {
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box;
  }

  .tabstrip .tab-95 {
    font-size: 11px;
    padding: 4px 6px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .browser-bar {
    flex-wrap: wrap;
    gap: 4px;
  }

  .browser-bar input.browser-url {
    flex: 1;
    min-width: 140px;
    font-size: 12px;
  }

  .browser-bar .btn-95 {
    font-size: 11px;
    padding: 2px 4px;
  }

  
  .blog-layout {
    flex-direction: column;
  }

  .blog-banner {
    display: none; 
  }

  .blog-content {
    width: 100%;
    padding: 10px;
  }

 
  .inline-ad {
    display: block;
    text-align: center;
    margin: 14px 0;
  }

  .inline-ad ins {
    display: inline-block !important;
    width: 320px !important;
    height: 100px !important;
    background: #0d0d0d;
  }

 
  .reindeer-home img.reindeer-logo {
    max-width: 140px;
    margin-bottom: 10px;
  }

  .reindeer-input {
    width: 100%;
    font-size: 13px;
    padding: 4px;
  }

  .reindeer-btn {
    font-size: 13px;
    padding: 4px 10px;
  }

  
  .results-header {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .results-header img {
    max-width: 100px;
  }

  .results-input {
    width: 100%;
    font-size: 13px;
  }
}






@media (max-width: 768px) {
  .window[data-id="browser"],
  .window[data-id="blog-direct"] {
    width: 92vw !important;
    height: 72vh !important;
    max-width: 100vw;
    max-height: calc(100vh - 40px); 
   
  }

  
  .window[data-id="browser"] .win-body,
  .window[data-id="blog-direct"] .win-body,
  .window[data-id="browser"] .browser-95,
  .window[data-id="blog-direct"] .browser-95 {
    height: 100%;
    min-height: 0;
  }
}



.window { display:flex; flex-direction:column; overflow:hidden; }
.win-titlebar { flex:0 0 auto; }
.win-body { flex:1 1 auto; min-height:0; }


.browser-95 {
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}


.browser-95 .tabstrip,
.browser-95 .browser-bar { flex:0 0 auto; min-width:0; }
.browser-95 .browser-content { flex:1 1 auto; min-height:0; overflow:hidden; }


.browser-95 .viewport { height:100%; overflow:auto; }


.browser-95 .browser-url { min-width:0; }


.blog-content img { max-width:100%; height:auto; }


.inline-ad {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}
.inline-ad ins {
  width: 0 !important;
  height: 0 !important;
}


@media (max-width: 768px) {
  .inline-ad {
    display: block !important;
    margin: 14px 0 !important;
    line-height: normal !important;
  }
  .inline-ad ins {
    display: inline-block !important;
    width: 320px !important;     
    max-width: 100% !important;
    height: 100px !important;     
  }
}