:root {
  --xp-blue: #245edb;
  --xp-blue-dark: #0a246a;
  --xp-blue-light: #3a6ee8;
  --xp-green: #3c873a;
  --xp-green-dark: #245d22;
  --xp-grey: #ece9d8;
  --xp-grey-dark: #aca899;
  --xp-grey-darker: #716f64;
  --geo-pink: #ff3df0;
  --geo-cyan: #00e5ff;
  --lime: #39ff14;
  --paper: #fffbe6;
  --ink: #0b0b0b;
  --green-text: #789922;
  --alert-red: #d40000;
  --gold: #f5c518;
}

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

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow: hidden;
  color: var(--ink);
  background: var(--xp-blue);
  font-family: "Tahoma", "Geneva", "Verdana", sans-serif;
  font-size: 13px;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M2 1 L2 16 L6 12 L9 18 L11 17 L8 11 L14 11 Z' fill='white' stroke='black' stroke-width='1.5' stroke-linejoin='round'/></svg>") 2 1, auto;
}

img,
svg {
  display: block;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
}

a {
  color: inherit;
}

/* ---------- DESKTOP ---------- */

.desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 30% 75%, #4ca835 0%, #2f7d22 28%, transparent 60%),
    radial-gradient(ellipse at 70% 30%, #6cb8ff 0%, #2f7ed8 50%, transparent 80%),
    linear-gradient(180deg, #1956b8 0%, #245edb 35%, #4a8e3a 75%, #2c6f24 100%);
}

.desktop::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("assets/logo.png");
  background-size: 64px 64px;
  background-repeat: repeat;
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* desktop icons */
.desktop-icons {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 90px;
}

.desk-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  border: 1px dotted transparent;
  background: transparent;
  color: white;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  font-size: 11px;
  text-align: center;
}

.desk-icon:hover,
.desk-icon:focus-visible {
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(36, 94, 219, 0.4);
  outline: none;
}

.desk-icon-img {
  width: 36px;
  height: 36px;
}

.desk-icon-label {
  word-break: break-word;
  line-height: 1.1;
}

/* iconography (CSS art) */
[data-icon] {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

[data-icon="ie"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><defs><radialGradient id='b' cx='50%' cy='50%' r='50%'><stop offset='0' stop-color='%23a8d8ff'/><stop offset='1' stop-color='%23005bbb'/></radialGradient></defs><circle cx='16' cy='16' r='14' fill='url(%23b)' stroke='%23002a66' stroke-width='1.5'/><path d='M3 17 Q16 27 29 14' stroke='%23ffd200' stroke-width='3.5' fill='none' stroke-linecap='round'/><text x='16' y='21' text-anchor='middle' font-family='Arial Black' font-size='12' fill='white'>e</text></svg>");
}

[data-icon="folder"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M2 9 L12 9 L15 12 L30 12 L30 27 L2 27 Z' fill='%23ffd76b' stroke='%23805400' stroke-width='1.5' stroke-linejoin='round'/><path d='M2 9 L12 9 L15 12 L30 12' fill='%23e0a52e' stroke='%23805400' stroke-width='1.5'/></svg>");
}

[data-icon="bin"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M7 9 L25 9 L23 28 L9 28 Z' fill='%23c8c8c8' stroke='%23333' stroke-width='1.5' stroke-linejoin='round'/><rect x='5' y='6' width='22' height='4' fill='%23999' stroke='%23333' stroke-width='1.5'/><path d='M12 13 L13 25 M16 13 L16 25 M20 13 L19 25' stroke='%23333' stroke-width='1.2' fill='none'/></svg>");
}

[data-icon="troll"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13' fill='%23fff' stroke='%23000' stroke-width='2'/><path d='M9 13 Q11 11 13 13' stroke='%23000' stroke-width='1.5' fill='none'/><path d='M19 13 Q21 11 23 13' stroke='%23000' stroke-width='1.5' fill='none'/><circle cx='11' cy='14' r='1.5' fill='%23000'/><circle cx='21' cy='14' r='1.5' fill='%23000'/><path d='M7 20 Q16 27 25 20 Q22 22 16 22 Q10 22 7 20 Z' fill='%23000'/></svg>");
}

[data-icon="alert"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 3 L30 28 L2 28 Z' fill='%23ffd200' stroke='%23000' stroke-width='2' stroke-linejoin='round'/><rect x='14.5' y='11' width='3' height='9' fill='%23000'/><circle cx='16' cy='24' r='1.8' fill='%23000'/></svg>");
}

[data-icon="globe"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='13' fill='%2300a6ff' stroke='%23003a6b' stroke-width='1.5'/><path d='M3 16 H29 M16 3 V29 M6 8 Q16 12 26 8 M6 24 Q16 20 26 24' stroke='%23003a6b' stroke-width='1.2' fill='none'/></svg>");
}

[data-icon="speaker"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 6 L5 6 L9 3 L9 13 L5 10 L2 10 Z' fill='%23fff' stroke='%23000' stroke-width='1'/><path d='M11 5 Q13 8 11 11 M12 3 Q15 8 12 13' stroke='%23fff' stroke-width='1' fill='none'/></svg>");
}

[data-icon="net"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='4' width='5' height='4' fill='%23ccc' stroke='%23000' stroke-width='0.8'/><rect x='9' y='8' width='5' height='4' fill='%23ccc' stroke='%23000' stroke-width='0.8'/><path d='M5 8 L11 8' stroke='%23fff' stroke-width='1'/></svg>");
}

[data-icon="derp"] {
  background-image: url("assets/logo.png");
  background-size: cover;
  border: 1px solid #000;
}

.desk-icon-img[data-icon] {
  width: 36px;
  height: 36px;
}

/* ---------- WINDOWS (XP look) ---------- */

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid #0a0a0a;
  background: var(--xp-grey);
  box-shadow:
    inset 0 0 0 1px var(--xp-blue-light),
    inset 0 0 0 2px var(--xp-blue),
    0 6px 20px rgba(0, 0, 0, 0.45);
  border-radius: 8px 8px 0 0;
  font-family: "Tahoma", sans-serif;
}

.win-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 0 4px 0 8px;
  background: linear-gradient(180deg, #0a64d0 0%, #2a78e0 8%, #2261c8 50%, #1a55b5 92%, #0c3da0 100%);
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  border-radius: 7px 7px 0 0;
  cursor: grab;
  user-select: none;
}

.win-titlebar:active {
  cursor: grabbing;
}

.win-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win-icon {
  width: 16px;
  height: 16px;
}

.win-controls {
  display: flex;
  gap: 2px;
}

.win-btn {
  width: 22px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #0a3a8c;
  border-radius: 3px;
  background: linear-gradient(180deg, #4f8bea, #1d52b8);
  color: white;
  font-weight: bold;
  font-size: 11px;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.win-btn:hover {
  background: linear-gradient(180deg, #6ba3f5, #2861c9);
}

.win-btn-close {
  background: linear-gradient(180deg, #e9756c, #b1322a);
  border-color: #6b1b15;
}

.win-btn-close:hover {
  background: linear-gradient(180deg, #ff8d83, #c43a32);
}

.win-toolbar {
  display: flex;
  gap: 12px;
  padding: 4px 10px;
  background: var(--xp-grey);
  border-bottom: 1px solid var(--xp-grey-dark);
  font-size: 12px;
  color: #1f1f1f;
}

.tb-btn {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: transparent;
}

.tb-btn:hover {
  text-decoration-color: currentColor;
  cursor: pointer;
}

.win-address {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--xp-grey);
  border-bottom: 1px solid var(--xp-grey-dark);
  font-size: 12px;
}

.addr-label {
  color: #555;
}

.addr-bar {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid #7a7a7a;
  background: white;
  box-shadow: inset 1px 1px 0 #b0b0b0;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #00308f;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.addr-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.addr-go {
  height: 22px;
  padding: 0 10px;
  border: 1px solid #7a7a7a;
  background: linear-gradient(180deg, #fafafa, #d2d2d2);
  border-radius: 2px;
  font-size: 12px;
}

.win-loadbar {
  height: 6px;
  background: #d4d0c8;
  border-bottom: 1px solid var(--xp-grey-dark);
  overflow: hidden;
}

.win-loadbar span {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, #245edb, #6db8ff, #245edb);
  transition: width 0.6s ease-out;
}

.win-loadbar.is-loaded span {
  width: 100%;
}

.win-body {
  flex: 1;
  overflow-y: auto;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0 6px, rgba(255, 255, 255, 0.2) 6px 12px),
    repeating-linear-gradient(0deg, var(--geo-cyan) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, #ffe9f8 0%, #fff7c4 50%, #d8ffea 100%);
  border-top: 1px solid #fff;
}

.win-body::-webkit-scrollbar {
  width: 16px;
}

.win-body::-webkit-scrollbar-track {
  background: #d4d0c8;
  box-shadow: inset 1px 0 0 #fff, inset -1px 0 0 #888;
}

.win-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f0f0f0, #aca899);
  border: 1px solid #6e6e6e;
}

/* ---------- MAIN WINDOW LAYOUT ---------- */

.win-main {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 160px));
  height: calc(100vh - 60px);
  z-index: 5;
}

.win-main .win-body {
  padding: 18px;
}

/* sections inside the page */
.page-section {
  margin: 0 auto 22px;
  max-width: 880px;
}

.page-h2 {
  display: inline-block;
  margin-bottom: 14px;
  padding: 6px 14px;
  background: var(--ink);
  color: var(--lime);
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 1px;
  border: 2px solid var(--ink);
  box-shadow: 4px 4px 0 var(--geo-pink);
  text-transform: uppercase;
}

.page-sub {
  margin-bottom: 16px;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  color: #4a3a3a;
}

/* ---------- HERO ---------- */

.page-hero {
  margin-bottom: 24px;
  padding: 14px;
  border: 3px ridge #ffd76b;
  background:
    repeating-linear-gradient(135deg, #fff100 0 12px, #ff3df0 12px 24px, #00e5ff 24px 36px, #fff 36px 48px);
  box-shadow: 6px 6px 0 var(--ink);
}

.hero-marquee {
  display: block;
  margin-bottom: 12px;
  padding: 6px 0;
  background: var(--ink);
  color: var(--lime);
  font-family: "Courier New", monospace;
  font-size: 14px;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--geo-pink);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: center;
  padding: 14px;
  border: 3px inset #fff;
  background: white;
}

.hero-art {
  position: relative;
}

.hero-frame {
  border: 4px solid var(--ink);
  background: white;
  box-shadow: 6px 6px 0 var(--xp-blue);
  transform: rotate(-2deg);
}

.hero-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.hero-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sticker {
  position: absolute;
  display: inline-block;
  padding: 4px 8px;
  border: 2px solid var(--ink);
  background: var(--gold);
  font-family: "Comic Sans MS", cursive;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(-12deg);
}

.stk-1 {
  top: -8px;
  left: -10px;
  background: var(--alert-red);
  color: white;
}

.stk-2 {
  top: 8px;
  right: -14px;
  background: var(--lime);
  transform: rotate(14deg);
}

.stk-3 {
  bottom: -10px;
  left: 30%;
  background: white;
  color: var(--xp-blue-dark);
  transform: rotate(-4deg);
}

.hero-copy {
  display: grid;
  gap: 12px;
  text-align: center;
}

.word-art {
  font-family: Impact, "Arial Black", sans-serif;
  font-size: clamp(56px, 9vw, 96px);
  line-height: 0.9;
  letter-spacing: -0.04em;
}

.word-art span {
  position: relative;
  display: inline-block;
  color: #fff200;
  text-shadow:
    -2px 0 0 var(--ink),
    2px 0 0 var(--ink),
    0 -2px 0 var(--ink),
    0 2px 0 var(--ink),
    -2px -2px 0 var(--ink),
    2px -2px 0 var(--ink),
    -2px 2px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 #c40000,
    5px 5px 0 #c40000,
    6px 6px 0 var(--ink),
    8px 8px 0 #2a0000;
  transform: skewY(-3deg);
}

.hero-tag {
  font-family: "Courier New", monospace;
  color: var(--xp-blue-dark);
  font-weight: bold;
  letter-spacing: 1px;
}

.ca-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
  padding: 8px 14px;
  border: 2px outset #d8d8d8;
  border-radius: 0;
  background: linear-gradient(180deg, #f4f4f4 0%, #d6d6d6 100%);
  color: var(--ink);
  font-family: "Tahoma", sans-serif;
  font-size: 13px;
  font-weight: bold;
  max-width: 100%;
  overflow-wrap: anywhere;
  box-shadow: 4px 4px 0 var(--ink);
}

.ca-pill:hover,
.ca-pill.copied {
  background: linear-gradient(180deg, var(--lime), #16b800);
  border-style: inset;
}

.ca-label {
  padding: 2px 6px;
  background: var(--ink);
  color: var(--lime);
  font-family: "Courier New", monospace;
  font-size: 11px;
  border: 1px solid var(--ink);
}

.ca-value {
  font-family: "Courier New", monospace;
  font-size: 12px;
  word-break: break-all;
}

.ca-hint {
  padding: 1px 6px;
  background: var(--alert-red);
  color: white;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ca-pill.copied .ca-hint {
  background: var(--xp-green-dark);
}

.hero-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}

.badge {
  padding: 4px 8px;
  border: 2px solid var(--ink);
  font-family: "Comic Sans MS", cursive;
  font-size: 11px;
  font-weight: bold;
}

.bdg-pink {
  background: var(--geo-pink);
  color: white;
}

.bdg-lime {
  background: var(--lime);
  color: var(--ink);
}

.bdg-blue {
  background: var(--xp-blue);
  color: white;
}

/* ---------- COMIC STRIP ---------- */

.page-strip {
  padding: 14px;
  background: white;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--xp-blue);
}

.comic-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.panel {
  position: relative;
  padding: 10px 8px 6px;
  border: 3px solid var(--ink);
  background: white;
  box-shadow: 4px 4px 0 var(--ink);
}

.panel:nth-child(odd) {
  transform: rotate(-1deg);
}

.panel:nth-child(even) {
  transform: rotate(1deg);
}

.panel img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  border: 2px solid var(--ink);
}

.panel figcaption {
  margin-top: 6px;
  font-family: "Comic Sans MS", cursive;
  font-size: 11px;
  text-align: center;
  color: #555;
}

.bubble {
  position: absolute;
  z-index: 2;
  padding: 4px 10px;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  background: white;
  font-family: Impact, sans-serif;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  box-shadow: 2px 2px 0 var(--ink);
}

.bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 12px;
  height: 12px;
  background: white;
  border-right: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(45deg);
}

.bubble-tl {
  top: -14px;
  left: 6px;
  transform: rotate(-4deg);
}

.bubble-tl::after {
  left: 14px;
}

.bubble-tr {
  top: -14px;
  right: 6px;
  transform: rotate(4deg);
}

.bubble-tr::after {
  right: 14px;
}

/* ---------- GALLERY (cork board) ---------- */

.page-gallery {
  padding: 18px;
  border: 3px solid #6a3a14;
  background:
    repeating-linear-gradient(45deg, #c98e54 0 4px, #b97e44 4px 8px),
    #c08a4a;
  box-shadow: 6px 6px 0 var(--ink);
}

.page-gallery .page-h2 {
  background: #fff;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--alert-red);
  border-color: var(--ink);
}

.page-gallery .page-sub {
  color: #fff7e1;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}

.cork {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px 14px;
  padding: 10px;
}

.polaroid {
  position: relative;
  padding: 8px 8px 22px;
  background: white;
  border: 1px solid #ccc;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px #fff;
  transition: transform 0.18s ease;
}

.polaroid::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle at 35% 35%, #ff7777, #b50000);
  border: 1px solid #5a0000;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
}

.polaroid img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  background: #eee;
}

.polaroid p {
  margin-top: 6px;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-align: center;
  color: var(--ink);
}

.p-tilt-a {
  transform: rotate(-3deg);
}

.p-tilt-b {
  transform: rotate(2deg);
}

.p-tilt-c {
  transform: rotate(-1deg) translateY(8px);
}

.polaroid:hover {
  transform: rotate(0deg) scale(1.05);
  z-index: 2;
}

/* ---------- TABLOID ---------- */

.tabloid {
  padding: 14px 18px;
  background: white;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--alert-red);
  text-align: center;
}

.tabloid-flag {
  display: inline-block;
  padding: 2px 10px;
  background: var(--alert-red);
  color: white;
  font-family: "Times New Roman", serif;
  font-weight: bold;
  letter-spacing: 2px;
  border: 1px solid var(--ink);
}

.tabloid h3 {
  margin: 8px 0 4px;
  font-family: "Times New Roman", serif;
  font-size: clamp(20px, 3.5vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.5px;
}

.tabloid p {
  font-family: "Times New Roman", serif;
  font-style: italic;
  color: #444;
}

/* ---------- LORE / GREENTEXT ---------- */

.page-lore {
  padding: 14px;
  background: #f0e0d0;
  border: 3px solid var(--ink);
  box-shadow: 6px 6px 0 var(--green-text);
}

.greentext {
  padding: 14px 16px;
  background: #f0e0d0;
  border: 1px solid #b8a890;
  font-family: "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.55;
}

.greentext p {
  color: var(--green-text);
}

.greentext .gt-blank {
  height: 8px;
  font-size: 0;
}

.greentext strong {
  background: yellow;
  color: var(--ink);
  padding: 0 3px;
}

.greentext .gt-mfw {
  color: #117711;
  font-weight: bold;
}

.greentext .gt-source {
  color: #555;
  word-break: break-all;
}

.greentext .gt-source a {
  color: var(--xp-blue-dark);
  text-decoration: underline;
}

.greentext .gt-source a:hover {
  background: yellow;
  color: var(--ink);
}

/* ---------- WEBRING ---------- */

.webring {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 12px;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.ring-badge {
  padding: 4px 8px;
  border: 1px solid var(--lime);
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.5px;
}

.ring-ie {
  background: white;
  color: var(--xp-blue-dark);
}

.ring-built {
  background: var(--gold);
  color: var(--ink);
}

.ring-derp {
  background: var(--geo-pink);
  color: white;
}

.ring-sign {
  background: var(--lime);
  color: var(--ink);
}

.signoff {
  margin-top: 8px;
  font-family: "Courier New", monospace;
  font-size: 11px;
  color: var(--ink);
  text-align: center;
}

/* ---------- POPUP WINDOWS ---------- */

.win-popup {
  width: 320px;
  z-index: 6;
}

.popup-troll {
  top: 80px;
  right: 40px;
  transform: rotate(-2deg);
}

.popup-alert {
  top: 220px;
  right: 90px;
  z-index: 8;
  transform: rotate(1deg);
}

.popup-gallery {
  bottom: 80px;
  right: 50px;
  width: 360px;
  transform: rotate(-1deg);
}

.popup-bin {
  top: 320px;
  left: 130px;
  width: 280px;
  transform: rotate(2deg);
}

.popup-body {
  padding: 14px;
  background: var(--xp-grey);
  border-top: 1px solid #fff;
  font-size: 12px;
}

.popup-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.popup-icon-big {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
}

.popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.xp-btn {
  min-width: 70px;
  padding: 4px 12px;
  border: 1px solid var(--ink);
  background: linear-gradient(180deg, #fafafa, #d2d2d2);
  border-radius: 2px;
  font-family: "Tahoma", sans-serif;
  font-size: 12px;
  box-shadow: inset 0 1px 0 #fff;
}

.xp-btn:hover {
  background: linear-gradient(180deg, #ffffff, #e0e0e0);
}

.xp-btn:active {
  background: linear-gradient(180deg, #c0c0c0, #d8d8d8);
  border-style: inset;
}

.xp-btn-primary {
  background: linear-gradient(180deg, #79b4ff, #245edb);
  color: white;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
}

.xp-btn-primary:hover {
  background: linear-gradient(180deg, #92c2ff, #2f6ff0);
}

.popup-body-strip {
  padding: 0;
}

.mini-marquee {
  overflow: hidden;
  background: var(--ink);
}

.mini-track {
  display: flex;
  width: max-content;
  animation: mini-scroll 14s linear infinite;
  will-change: transform;
}

.popup-gallery:hover .mini-track {
  animation-play-state: paused;
}

.mini-track img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-right: 1px solid var(--lime);
}

@keyframes mini-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.bin-list {
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1.7;
  color: #333;
}

.bin-empty {
  margin-top: 8px;
  color: var(--alert-red);
  font-weight: bold;
  text-align: center;
}

.win.is-hidden {
  display: none;
}

/* ---------- TASKBAR ---------- */

.taskbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 4px;
  background: linear-gradient(180deg, #2a8736 0%, #1e6f29 12%, #1d6b27 50%, #1a611f 88%, #134c17 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-family: "Tahoma", sans-serif;
  color: white;
}

.start-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 14px 0 8px;
  border: 0;
  border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #5fb74e 0%, #2e8a2c 50%, #1d5c1c 100%);
  color: white;
  font-family: inherit;
  font-style: italic;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.start-btn[aria-expanded="true"],
.start-btn:hover {
  background: linear-gradient(180deg, #6fc55c 0%, #38a134 50%, #226e22 100%);
}

.start-flag {
  width: 14px;
  height: 14px;
  background: conic-gradient(from 90deg at 50% 50%, #d40000 0 25%, #00a64a 25% 50%, #ffd200 50% 75%, #245edb 75% 100%);
  border: 1px solid white;
  border-radius: 2px;
}

.task-list {
  display: flex;
  flex: 1;
  gap: 2px;
  padding: 0 6px;
  overflow-x: auto;
}

.task-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid #1a4d18;
  background: linear-gradient(180deg, #4296f0 0%, #245edb 100%);
  color: white;
  font-size: 12px;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-tab.task-tab-active {
  background: linear-gradient(180deg, #1f4ea8 0%, #163d88 100%);
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.4);
}

.task-icon {
  width: 14px;
  height: 14px;
}

.tray {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  background: linear-gradient(180deg, #1a8be3 0%, #105fb0 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 12px;
}

.tray-icon {
  width: 14px;
  height: 14px;
}

.tray-clock {
  font-family: "Tahoma", sans-serif;
  letter-spacing: 0.5px;
}

/* ---------- START MENU ---------- */

.start-menu {
  position: fixed;
  bottom: 32px;
  left: 0;
  z-index: 60;
  width: 290px;
  border: 2px solid var(--xp-blue-dark);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: white;
  font-family: "Tahoma", sans-serif;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.start-menu[hidden] {
  display: none;
}

.start-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #2870e8 0%, #1d52b8 100%);
  color: white;
  font-size: 13px;
}

.start-avatar {
  width: 36px;
  height: 36px;
  border: 2px solid white;
  border-radius: 4px;
  background-image: url("assets/logo.png");
  background-size: cover;
}

.start-user {
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.start-body {
  display: grid;
  gap: 1px;
  padding: 6px;
  background: white;
}

.start-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  text-decoration: none;
  border-radius: 3px;
  width: 100%;
}

.start-item:hover {
  background: linear-gradient(180deg, #4296f0, #1d52b8);
  color: white;
}

.start-item-icon {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.start-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(180deg, #d6e6ff, #aac8ee);
  border-top: 1px solid var(--xp-blue);
}

/* ---------- CURSOR TRAIL ---------- */

.cursor-trail {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.trail-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lime), transparent 70%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: trail-fade 700ms ease-out forwards;
}

@keyframes trail-fade {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
}

/* ---------- RESPONSIVE ---------- */

/* Ultra-wide monitors: cap window so it doesn't drown in desktop */
@media (min-width: 1600px) {
  .win-main {
    width: min(1280px, calc(100vw - 220px));
  }

  .popup-troll {
    right: 8%;
  }

  .popup-alert {
    right: 14%;
  }

  .popup-gallery {
    right: 6%;
  }
}

/* Small laptops: drop a column from the gallery */
@media (max-width: 1280px) {
  .cork {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet landscape: hide far-right popups, keep the desktop metaphor */
@media (max-width: 1100px) {
  .desktop-icons {
    grid-template-columns: repeat(2, 1fr);
    width: 200px;
  }

  .win-main {
    width: calc(100vw - 24px);
  }

  .popup-bin {
    display: none;
  }

  .cork {
    grid-template-columns: repeat(3, 1fr);
  }

  .comic-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet portrait: drop the desktop chrome, hide popups, stack hero */
@media (max-width: 900px) {
  .desktop-icons {
    display: none;
  }

  .win-main {
    left: 8px;
    transform: none;
    width: calc(100vw - 16px);
  }

  .win-popup {
    display: none;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-art {
    max-width: 320px;
    margin: 0 auto;
  }

  .addr-label,
  .win-toolbar {
    display: none;
  }

  .addr-url {
    font-size: 11px;
  }
}

/* Phones: full mobile fallback - flatten desktop into a scroll */
@media (max-width: 700px) {
  body {
    overflow: auto;
  }

  .desktop {
    position: relative;
    inset: auto;
    min-height: 100vh;
    padding-bottom: 56px;
  }

  .desktop::before {
    display: none;
  }

  .win-main {
    position: relative;
    top: 6px;
    left: 6px;
    width: calc(100vw - 12px);
    height: auto;
    margin-bottom: 16px;
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .win-main .win-body {
    max-height: none;
    overflow: visible;
    padding: 12px;
  }

  .page-section {
    margin-bottom: 18px;
  }

  .page-hero {
    padding: 10px;
  }

  .hero-grid {
    padding: 10px;
    gap: 14px;
  }

  .word-art {
    font-size: clamp(56px, 22vw, 96px);
  }

  .ca-pill {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 10px;
  }

  .ca-value {
    font-size: 11px;
  }

  .comic-strip {
    grid-template-columns: 1fr;
  }

  .panel img {
    height: auto;
    max-height: 220px;
  }

  .cork {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 10px;
    padding: 4px;
  }

  .polaroid img {
    height: 110px;
  }

  .page-h2 {
    font-size: 16px;
    padding: 5px 10px;
    box-shadow: 3px 3px 0 var(--geo-pink);
  }

  .tabloid h3 {
    font-size: clamp(18px, 6vw, 26px);
  }

  .greentext {
    padding: 12px;
    font-size: 12.5px;
  }

  .webring {
    padding: 8px;
  }

  .ring-badge {
    font-size: 10px;
    padding: 3px 6px;
  }

  .taskbar {
    height: 40px;
    padding: 0 2px;
  }

  .task-list {
    display: none;
  }

  .tray {
    padding: 0 6px;
  }

  .tray-icon {
    display: none;
  }

  .start-btn {
    padding: 0 12px 0 6px;
    font-size: 13px;
  }

  .start-menu {
    width: 100vw;
    left: 0;
    bottom: 40px;
    border-radius: 0;
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .cork {
    grid-template-columns: 1fr;
  }

  .hero-art {
    max-width: 240px;
  }

  .ca-value {
    font-size: 10.5px;
  }
}

/* Short / landscape phones: hide cursor trail, shorten hero */
@media (max-height: 480px) {
  .cursor-trail {
    display: none;
  }

  .win-main {
    height: calc(100vh - 50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cursor-trail {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cursor-trail {
    display: none;
  }
}