/* ============================================================
   REWILDING THE WEB // desktop environment
   cyber-geocities-95. no external assets. all hand-grown.
   ============================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
  -webkit-user-select: none; user-select: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M2 2 L2 20 L7 15 L11 22 L14 21 L10 14 L18 14 Z' fill='%2300ffcc' stroke='%23003' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, auto;
}

/* ---- the wild desktop: synthwave grid + drifting stars ---- */
#desktop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 50% 120%, #ff2fd0 0%, #7a1fff 35%, #1a0a4a 70%, #05001a 100%);
  overflow: hidden;
}
#grid {
  position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%;
  background-image:
    linear-gradient(rgba(0,255,204,.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(0,255,204,.45) 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(300px) rotateX(72deg);
  transform-origin: bottom center;
  animation: grid-run 3s linear infinite;
  pointer-events: none;
}
@keyframes grid-run { from { background-position: 0 0; } to { background-position: 0 60px; } }
#sun {
  position: absolute; left: 50%; top: 12%; width: 260px; height: 260px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(#fff6, #ffd000 40%, #ff2fd0 100%);
  box-shadow: 0 0 80px #ff2fd088;
  pointer-events: none;
  -webkit-mask: repeating-linear-gradient(#000 0 12px, transparent 12px 18px);
          mask: repeating-linear-gradient(#000 0 12px, transparent 12px 18px);
  opacity: .85;
}
.star { position: absolute; color: #fff; pointer-events: none; animation: twinkle 2s infinite; }
@keyframes twinkle { 0%,100%{opacity:.2;} 50%{opacity:1;} }

/* ---- generic blink / marquee-ish helpers ---- */
.blink { animation: blink 1s steps(2,start) infinite; }
@keyframes blink { to { visibility: hidden; } }
.rainbow {
  background: linear-gradient(90deg,#ff0000,#ff8000,#ffee00,#00ff00,#00ccff,#a000ff,#ff0000);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rainbow 3s linear infinite; font-weight: bold;
}
@keyframes rainbow { to { background-position: 200% 0; } }
marquee { overflow: hidden; }

/* ============================================================
   WINDOW CHROME (Win95-ish, but feral)
   ============================================================ */
.win {
  position: absolute; min-width: 240px; width: 360px;
  background: #c0c0c0;
  border: 3px solid #000;
  box-shadow: 6px 6px 0 #000, 0 0 0 1px #fff inset;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.win.active { box-shadow: 8px 8px 0 #000, 0 0 22px #00ffcc, 0 0 0 1px #fff inset; }
.titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; cursor: grab;
  background: linear-gradient(90deg,#000080,#1084d0);
  color: #fff; font-weight: bold; font-size: 13px;
  text-shadow: 1px 1px 0 #0006;
  touch-action: none;
}
.titlebar:active { cursor: grabbing; }
.titlebar .tico { font-size: 15px; filter: drop-shadow(1px 1px 0 #0008); }
.titlebar .ttxt { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbtns { display: flex; gap: 3px; }
.tbtn {
  width: 20px; height: 18px; border: 2px outset #fff;
  background: #c0c0c0; color: #000; font-family: monospace; font-weight: bold;
  font-size: 12px; line-height: 12px; cursor: pointer; padding: 0;
}
.tbtn:active { border-style: inset; }
.win-body {
  padding: 10px; overflow: auto; max-height: 62vh;
  border-top: 2px solid #fff;
  font-size: 13px; line-height: 1.45; color: #000;
}
.win.shaded .win-body { display: none; }
.win.shaded { width: auto !important; }

/* corner resize grip — a visible cyan tab, works on any theme */
.resize {
  position: absolute; right: 0; bottom: 0; width: 22px; height: 22px;
  cursor: nwse-resize; z-index: 8; touch-action: none;
  background: #00ffcc;
  background-image: linear-gradient(135deg,
    #003 0 12%, transparent 12% 30%,
    #003 30% 44%, transparent 44% 62%,
    #003 62% 76%, transparent 76%);
  border-top: 2px solid #000; border-left: 2px solid #000;
  box-shadow: -1px -1px 0 #fff;
}
.resize:hover { background: #ff2fd0; }
.win.shaded .resize { display: none; }
.win.maximized { box-shadow: 0 0 0 2px #00ffcc; }

/* the classic UNDER CONSTRUCTION barber pole */
.construction {
  margin: 10px 0; padding: 6px; text-align: center; font-weight: bold;
  color: #000; text-transform: uppercase; letter-spacing: 1px;
  border: 3px dashed #000;
  background: repeating-linear-gradient(45deg,#ffd000 0 14px,#000 14px 28px);
  -webkit-text-stroke: .5px #fff;
}
.construction span { background: #ffd000; padding: 2px 6px; display: inline-block; }

/* hit counter — odometer */
.counter { display: inline-flex; gap: 2px; vertical-align: middle; }
.counter b {
  background: #000; color: #0f0; font-family: monospace; font-weight: bold;
  padding: 1px 4px; border: 1px solid #0f0; font-size: 14px;
}
.badge {
  display: inline-block; margin: 3px; padding: 3px 6px; font-size: 10px;
  border: 2px outset #999; background: #000; color: #0f0; font-family: monospace;
}
.gbook { display:inline-block; margin-top:8px; color:#00f; text-decoration: underline; font-weight:bold; }
hr.retro { border:0; height:4px; background: repeating-linear-gradient(90deg,#f0f 0 8px,#0ff 8px 16px); }

/* section subheads inside a homepage */
.win-body h2 { font-size:15px; margin:12px 0 4px; text-decoration:underline; }
.win-body p { margin:7px 0; }
.pull { border-left:4px solid currentColor; padding-left:8px; font-style:italic; opacity:.95; }

/* "kool links from my bookmarks" blogroll */
.links { margin-top:10px; padding:7px; border:2px dashed currentColor; font-family:"Courier New",monospace; font-size:11px; line-height:1.6; }
.links b { display:block; margin-bottom:4px; letter-spacing:1px; }
.links a { color:inherit; text-decoration:underline; }
.links a:hover { background:#ff0; color:#000; }
.win-body a { word-break:break-word; }

/* inputs must be selectable/typable (desktop disables selection globally) */
input, textarea { -webkit-user-select: text; user-select: text; cursor: text; }

/* ---- speaker "member card": portrait + contact ---- */
.card {
  display: flex; gap: 10px; align-items: center;
  margin: 9px 0; padding: 8px; border: 2px solid currentColor;
  background: rgba(0,0,0,.18);
}
.pfp {
  position: relative; width: 66px; height: 66px; flex: 0 0 66px;
  border: 2px solid #000; box-shadow: 2px 2px 0 #0007; overflow: hidden; background: #222;
}
.pfp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pfp .mono {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: "Impact","Arial Black",sans-serif; font-size: 27px; font-weight: bold;
  color: #fff; text-shadow: 1px 1px 0 #000; letter-spacing: 1px;
  background: linear-gradient(135deg,#6a6a6a,#222);
}
.card-info { font-size: 12px; line-height: 1.45; }
.card-info .nm { font-weight: bold; font-size: 14px; display: block; }
.card-info .aff { opacity: .85; }
.card-links { margin-top: 3px; }
.card-links a {
  display: inline-block; margin: 2px 8px 0 0; text-decoration: underline; color: inherit;
  font-family: "Courier New",monospace; font-size: 11px;
}
.card-links a:hover { background: #ff0; color: #000; }

/* ---- working guestbook ---- */
#w-ring .gb-entries {
  max-height: 130px; overflow: auto; border: 1px solid #0ff; background: #001018;
  padding: 6px; margin: 6px 0; color: #0f0; font-family: "Courier New",monospace; font-size: 12px;
}
#w-ring .gb-entry { margin: 2px 0; word-break: break-word; }
.gb-form { display: flex; flex-direction: column; gap: 5px; margin: 6px 0; }
.gb-form input, .gb-form textarea {
  background: #000; color: #0ff; border: 2px inset #0aa;
  font-family: "Courier New",monospace; font-size: 12px; padding: 5px;
}
.gb-form textarea { resize: vertical; }
.gb-form button {
  background: #001018; color: #ff0; border: 2px outset #0aa; font-weight: bold;
  font-family: inherit; padding: 6px; cursor: pointer;
}
.gb-form button:hover { background: #ff0; color: #000; }
[data-ring] { font-weight: bold; }

/* ---- the in-app "Wilderness Navigator" browser ---- */
.browser-chrome {
  display: flex; gap: 4px; align-items: center; padding: 4px;
  background: #c0c0c0; border-top: 2px solid #fff;
}
.browser-chrome button, #b-open {
  border: 2px outset #fff; background: #c0c0c0; color: #000;
  font-family: monospace; font-weight: bold; font-size: 13px; padding: 2px 7px;
  cursor: pointer; text-decoration: none; line-height: 1.1;
}
.browser-chrome button:active, #b-open:active { border-style: inset; }
.browser-chrome button:disabled { color: #888; cursor: default; }
#b-url {
  flex: 1; min-width: 60px; border: 2px inset #fff; background: #fff; color: #000;
  font-family: monospace; font-size: 12px; padding: 3px 5px; cursor: text;
}
.browser-body {
  padding: 0 !important; overflow: hidden !important;
  display: flex; flex-direction: column; background: #fff;
}
#b-note {
  background: #ffd000; color: #000; font-size: 11px; padding: 3px 7px;
  font-family: "Trebuchet MS", sans-serif; border-bottom: 2px solid #000;
}
#b-note a { color: #00c; font-weight: bold; }
#b-frame { flex: 1 1 auto; width: 100%; border: 0; background: #fff; min-height: 120px; }

/* while dragging/resizing, let pointer events skip iframes so drags don't stall */
.interacting iframe { pointer-events: none; }

/* ============================================================
   PER-TALK THEMES — each window its own wild space
   ============================================================ */

/* 00 README — amber terminal */
#w-readme .win-body { background:#0a0a0a; color:#ffb000; font-family:"Courier New",monospace; text-shadow:0 0 4px #ffb00088; }
#w-readme a { color:#ffe08a; }

/* 01 Elena — Coopetition — digital GARDEN, mossy green */
#w-elena .win-body {
  background:#0a3d1a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ctext y='30' font-size='28'%3E%F0%9F%8C%B1%3C/text%3E%3C/svg%3E");
  color:#e6ffe6; font-family:Georgia,serif;
}
#w-elena h1 { color:#b6ff5c; text-shadow:2px 2px 0 #000; }
#w-elena .titlebar { background:linear-gradient(90deg,#0a5d2a,#3fae4f); }

/* 02 Kathryn — Excessive Variety — LEOPARD / maximalist */
#w-kathryn .win-body {
  background:#ff00aa;
  background-image: radial-gradient(#000 22%, transparent 23%), radial-gradient(#000 22%, transparent 23%);
  background-size: 26px 26px; background-position: 0 0, 13px 13px;
  color:#fff; font-family:"Impact","Arial Black",sans-serif; text-shadow:2px 2px 0 #000;
}
#w-kathryn h1 { color:#ffee00; -webkit-text-stroke:1.5px #000; font-size:26px; }
#w-kathryn .titlebar { background:linear-gradient(90deg,#a0006a,#ff33cc); }
#w-kathryn p { background:#000a; padding:4px 6px; }

/* 03 Donna — Bioregional Tayside — WATERSHED blue + tartan */
#w-donna .win-body {
  background:linear-gradient(#0a2a5c,#1e6fb0); color:#eaf6ff; font-family:"Trebuchet MS",sans-serif;
}
#w-donna h1 { color:#9fe3ff; text-shadow:1px 1px 0 #003; }
#w-donna .titlebar { background:linear-gradient(90deg,#0a2a5c,#2e8fd0); }
#w-donna .tartan { height:16px; margin:6px 0; background:
  repeating-linear-gradient(0deg,#003 0 6px, transparent 6px 12px),
  repeating-linear-gradient(90deg,#0a0 0 6px,#050 6px 12px,#c00 12px 14px,#050 14px 20px); }

/* 04 Anil & Jon — Internet Ecology / immune system — MATRIX lab */
#w-anil .win-body {
  background:#000; color:#00ff41; font-family:"Courier New",monospace; text-shadow:0 0 6px #00ff4188;
}
#w-anil h1 { color:#7bff9a; }
#w-anil .titlebar { background:linear-gradient(90deg,#003b00,#00a000); }
#w-anil .scan { height:2px; background:#00ff41; box-shadow:0 0 8px #00ff41; animation: scan 2.4s linear infinite; }
@keyframes scan { from{margin-top:0} to{margin-top:120px} }

/* 05 Georgie — Beyond Self-Organisation — ANARCHO chalkboard */
#w-georgie .win-body {
  background:#152a15; color:#f5f5dc; font-family:"Chalkboard SE","Comic Sans MS",cursive;
  border:6px double #7a5230;
}
#w-georgie h1 { color:#ff4444; text-transform:uppercase; letter-spacing:2px; }
#w-georgie .titlebar { background:linear-gradient(90deg,#111,#a11); }
#w-georgie .stamp { display:inline-block; transform:rotate(-8deg); border:3px solid #f44; color:#f44; padding:2px 8px; font-weight:bold; }

/* 06 Robin — Polycrisis / URLs — AMBER CRT command center */
#w-robin .win-body {
  background:#1a0f00; color:#ffae00; font-family:"Courier New",monospace;
  background-image: repeating-linear-gradient(0deg, #0000 0 3px, #0003 3px 4px);
  text-shadow:0 0 4px #ffae0088;
}
#w-robin h1 { color:#ffd27a; }
#w-robin .titlebar { background:linear-gradient(90deg,#3a2400,#c07800); }
#w-robin code { background:#000; color:#0ff; padding:1px 4px; word-break:break-all; }

/* 07 Ruthanna — Protopias / sci-fi — PURPLE starfield bookmobile */
#w-ruthanna .win-body {
  background:#0d001f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ctext x='4' y='16' fill='white'%3E%E2%9C%A6%3C/text%3E%3Ctext x='38' y='46' fill='%2399f'%3E%E2%9C%A7%3C/text%3E%3C/svg%3E");
  color:#e6ccff; font-family:"Trebuchet MS",sans-serif;
}
#w-ruthanna h1 { color:#c77bff; text-shadow:0 0 10px #c77bff; }
#w-ruthanna .titlebar { background:linear-gradient(90deg,#2a004a,#7a1fd0); }

/* 08 Blaine — Cheese / terroir / decentralization — CHEESE cave */
#w-blaine .win-body {
  background:#ffcc33;
  background-image: radial-gradient(#e0a800 14%, transparent 15%), radial-gradient(#e0a800 10%, transparent 11%);
  background-size: 44px 44px, 30px 30px; background-position:0 0, 20px 22px;
  color:#3a2400; font-family:Georgia,serif;
}
#w-blaine h1 { color:#7a2b00; text-shadow:1px 1px 0 #fff8; }
#w-blaine .titlebar { background:linear-gradient(90deg,#7a4a00,#d99a00); }

/* 09 GUESTBOOK / WEBRING */
#w-ring .win-body { background:#000; color:#0ff; font-family:"Courier New",monospace; }
#w-ring a { color:#ff0; }

/* ============================================================
   TASKBAR
   ============================================================ */
#taskbar {
  position: fixed; left:0; right:0; bottom:0; height:38px; z-index: 99999;
  display:flex; align-items:center; gap:4px; padding:3px 6px;
  background:#c0c0c0; border-top:2px solid #fff;
}
#start {
  display:flex; align-items:center; gap:6px; font-weight:bold; font-size:14px;
  padding:2px 10px; border:2px outset #fff; background:#c0c0c0; cursor:pointer;
}
#start:active { border-style:inset; }
#start .logo { font-size:16px; }
.tasks { display:flex; gap:4px; flex:1; overflow:hidden; }
.taskbtn {
  max-width:150px; padding:2px 8px; border:2px outset #fff; background:#c0c0c0;
  font-size:12px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.taskbtn.min { border-style:inset; background:#b0b0b0; font-style:italic; }
#clock { padding:2px 10px; border:2px inset #fff; background:#c0c0c0; font-size:12px; font-family:monospace; }

/* start menu */
#startmenu {
  position: fixed; left:6px; bottom:42px; width:230px; z-index:100000; display:none;
  background:#c0c0c0; border:3px outset #fff; box-shadow:4px 4px 0 #000;
}
#startmenu.open { display:block; }
#startmenu .sm-head { background:linear-gradient(#000080,#1084d0); color:#fff; writing-mode:vertical-rl;
  transform:rotate(180deg); position:absolute; left:0; top:0; bottom:0; width:26px; font-weight:bold; padding:8px 2px; }
#startmenu ul { list-style:none; margin:0; padding:4px 4px 4px 30px; }
#startmenu li { padding:5px 8px; font-size:13px; cursor:pointer; display:flex; gap:8px; align-items:center; }
#startmenu li:hover { background:#000080; color:#fff; }

/* opening splash */
#splash {
  position:fixed; inset:0; z-index:1000000; background:#000; color:#0f0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:"Courier New",monospace; text-align:center; gap:14px;
}
#splash h1 { font-size: clamp(28px,7vw,72px); margin:0; }
#splash .sub { color:#0ff; }
#splash button {
  margin-top:10px; padding:10px 26px; font-size:18px; font-weight:bold; cursor:pointer;
  border:3px outset #0f0; background:#020; color:#0f0; font-family:inherit;
}
#splash button:hover { background:#0f0; color:#000; }

@media (max-width:640px){
  .win { width: 90vw !important; }
  .win-body { max-height: 50vh; }
}