/* ══════════════════════════════════════════════════════════════
   GorbOS — Original Edition
   A Windows XP desktop, rebuilt in CSS. Luna Blue, with a swamp
   in it. Every panel, bevel and gradient here is hand-authored.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* Luna */
  --face:        #ece9d8;   /* the famous dialog tan          */
  --face-dark:   #d4d0c8;
  --face-light:  #fff;
  --frame:       #0831d9;   /* window body border             */
  --title-1:     #0058e6;
  --title-2:     #2a80f0;
  --title-3:     #3f93ff;
  --title-off-1: #7ba2e7;
  --title-off-2: #a8c0ef;
  --task-1:      #3f8cf3;
  --task-2:      #245edb;
  --task-edge:   #1941a5;
  --start-1:     #63b74b;
  --start-2:     #3c8f2a;
  --start-3:     #2b6e1c;
  --sel:         #316ac5;
  --link:        #0000c8;

  /* the gorb */
  --slime:  #a8ff1a;
  --gorb:   #74c13b;
  --shirt:  #e0342a;
  --strap:  #f5c518;
  --swamp:  #060d07;

  --ui: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  /* XPs echte Konsolenschrift. Vorher stand hier VT323 -- eine
     DOS-Terminalschrift und damit dasselbe Genre wie die
     "Perfect DOS VGA 437" von pepecoin.io. */
  --mono: "Lucida Console", "Consolas", "Courier New", monospace;

  --tb-h: 34px;
}

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

html,body{ height:100%; }
body{
  margin:0;
  font:400 12px/1.5 var(--ui);
  color:#000;
  background:#0a3a6b;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body.booting{ background:#000; }

img,video,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:default; }

a{ color:var(--link); }
:focus-visible{ outline:1px dotted #000; outline-offset:1px; }
::selection{ background:var(--sel); color:#fff; }

/* ══════════════════════════════════════════════════════════════
   1 · BIOS
   ══════════════════════════════════════════════════════════════ */
.bios{
  position:fixed; inset:0; z-index:900;
  background:#000; color:#c8c8c8;
  font:400 clamp(13px,2.1vw,19px)/1.45 var(--mono);
  padding:clamp(14px,3vw,40px);
  overflow:hidden; cursor:pointer;
}
.bios.is-gone{ display:none; }
.bios__out{ margin:0; white-space:pre-wrap; }
.bios__out b{ color:#fff; font-weight:400; }
.bios__out i{ color:var(--slime); font-style:normal; }
.bios__hint{
  position:absolute; left:clamp(14px,3vw,40px); bottom:clamp(14px,3vw,34px);
  margin:0; color:#8a8a8a; opacity:0; transition:opacity .3s;
}
.bios__hint.is-on{ opacity:1; animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:.15; } }

/* ══════════════════════════════════════════════════════════════
   2 · SPLASH
   ══════════════════════════════════════════════════════════════ */
.splash{
  position:fixed; inset:0; z-index:890;
  background:#000; color:#fff;
  display:none; place-content:center; justify-items:center; gap:26px;
}
.splash.is-on{ display:grid; }
.splash.is-gone{ display:none; }
.splash__logo{ display:flex; align-items:center; gap:18px; }
.splash__logo img{
  width:clamp(58px,9vw,88px); border-radius:50%;
  border:2px solid #6ea0ff; box-shadow:0 0 40px rgba(80,150,255,.5);
}
.splash__logo b{
  display:block; font-size:clamp(30px,6vw,52px); font-weight:400;
  letter-spacing:-.5px; line-height:1;
}
.splash__logo b span{ color:var(--slime); }
.splash__logo em{ font-size:12px; color:#9ab; font-style:normal; letter-spacing:2px; }

.splash__bar{
  width:180px; height:16px; border:2px solid #9bb; border-radius:9px;
  padding:2px; display:flex; gap:3px; overflow:hidden;
}
.splash__bar i{
  width:26px; height:100%; border-radius:2px;
  background:linear-gradient(180deg,#9fd8ff,#2a6fd6);
  animation:slide 1.7s linear infinite;
}
.splash__bar i:nth-child(2){ animation-delay:.18s; }
.splash__bar i:nth-child(3){ animation-delay:.36s; }
@keyframes slide{
  0%{ transform:translateX(-40px); opacity:0 }
  15%{ opacity:1 }
  85%{ opacity:1 }
  100%{ transform:translateX(180px); opacity:0 }
}
.splash__legal{ font-size:11px; color:#7d94ad; margin:0; letter-spacing:1px; }

/* ══════════════════════════════════════════════════════════════
   3 · LOGIN
   ══════════════════════════════════════════════════════════════ */
.login{
  position:fixed; inset:0; z-index:880;
  display:none; grid-template-rows:auto 1fr auto;
  background:
    radial-gradient(60% 60% at 18% 22%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(180deg,#c66bff 0%, #A52AF4 45%, #7d17c4 100%);
  color:#fff;
}
.login.is-on{ display:grid; }
.login.is-gone{ display:none; }
.login__bar{ background:linear-gradient(180deg,#7d17c4,#5c0f92); }
.login__bar--top{ height:9%; min-height:52px; border-bottom:2px solid #d9a6ff; }
.login__bar--bottom{
  min-height:74px; border-top:2px solid #d9a6ff;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:12px clamp(16px,4vw,48px); flex-wrap:wrap;
}
.login__bar--bottom p{ margin:0; font-size:11px; color:#e5cbff; max-width:46ch; text-align:right; }
.login__toggle{
  display:flex; align-items:center; gap:9px; cursor:pointer;
  font-size:13px; color:#fff;
}
.login__toggle i{
  width:22px; height:22px; border-radius:4px; font-style:normal;
  background:linear-gradient(180deg,#ff9a3d,#d1600e);
  display:grid; place-items:center; font-size:11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

.login__body{
  display:grid; grid-template-columns:1fr 2px 1fr; align-items:center;
  gap:clamp(20px,5vw,60px); padding:clamp(20px,5vw,60px);
}
.login__left{ text-align:right; }
.login__mark{
  width:clamp(80px,11vw,124px); margin-left:auto; border-radius:50%;
  border:3px solid #fff; box-shadow:0 6px 24px rgba(0,0,0,.35);
}
.login__brand{
  margin:14px 0 0; font-size:clamp(30px,5vw,46px); line-height:1; font-weight:700;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.login__brand small{ display:block; font-size:12px; font-weight:400; opacity:.8; }
.login__brand span{ color:var(--slime); }
.login__edition{ margin:2px 0 0; font-size:12px; opacity:.85; }
.login__prompt{ margin:26px 0 0; font-size:clamp(15px,2.4vw,20px); text-shadow:0 1px 4px rgba(0,0,0,.4); }
.login__rule{ height:70%; background:linear-gradient(180deg,transparent,rgba(255,255,255,.55),transparent); }

.login__right{ display:grid; gap:8px; max-width:420px; }
.user{
  display:flex; align-items:center; gap:14px; text-align:left;
  padding:8px 12px; border-radius:5px; cursor:pointer;
  transition:background .15s;
}
.user:hover{ background:rgba(255,255,255,.18); }
.user.is-armed{ background:rgba(255,255,255,.28); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); }
.user--disabled{ opacity:.5; cursor:not-allowed; }
.user__pic{
  width:56px; height:56px; flex:none; border-radius:4px; overflow:hidden;
  border:2px solid #fff; background:#0d2b57;
  display:grid; place-items:center; font-size:26px; color:var(--slime);
}
.user__pic img{ width:100%; height:100%; object-fit:cover; }
.user__meta b{ display:block; font-size:17px; }
.user__meta i{ font-style:normal; font-size:11px; color:#d3e4ff; }
.user__go{
  margin-left:auto; width:30px; height:30px; border-radius:4px;
  background:linear-gradient(180deg,#7bd45a,#2f8a1a);
  display:grid; place-items:center; color:#fff; font-size:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

/* ══════════════════════════════════════════════════════════════
   4 · DESKTOP
   ══════════════════════════════════════════════════════════════ */
.desktop{
  position:fixed; inset:0; display:none;
  overflow:hidden;
}
.desktop.is-on{ display:block; }
.wall{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; }

/* ─── icons ─── */
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.ico{ width:100%; height:100%; }

/* The icons layer spans the desktop; each icon carries its own coordinates so
   it can be dragged and put back where the visitor left it. */
.icons{
  position:absolute; top:12px; left:10px; right:10px; bottom:calc(var(--tb-h) + 8px);
}
.icon{
  position:absolute;
  width:100px; padding:8px 5px 9px; border-radius:3px;
  display:grid; justify-items:center; gap:6px; cursor:pointer;
  text-align:center;
  touch-action:none;          /* a drag must not scroll the page underneath */
}
.icon.is-dragging{
  z-index:5; opacity:.85;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.4));
}
.icon__img{
  width:52px; height:52px; display:grid; place-items:center;
  filter:drop-shadow(1px 2px 3px rgba(0,0,0,.5));
  transition:transform .12s ease-out;
}
.icon:hover .icon__img{ transform:scale(1.06); }
.icon__img img{ width:100%; height:100%; object-fit:contain; border-radius:8px; }
.icon span{
  font-size:12px; color:#fff; line-height:1.3;
  text-shadow:0 1px 2px rgba(0,0,0,.95), 0 0 5px rgba(0,0,0,.7);
  padding:1px 4px; border-radius:2px;
}
.icon.is-sel span{ background:var(--sel); }
.icon.is-sel .icon__img{ filter:drop-shadow(1px 2px 2px rgba(0,0,0,.45)) brightness(.85); }

/* ══════════════════════════════════════════════════════════════
   5 · WINDOWS
   ══════════════════════════════════════════════════════════════ */
.windows{ position:absolute; inset:0 0 var(--tb-h) 0; pointer-events:none; }

.win{
  position:absolute; pointer-events:auto;
  display:flex; flex-direction:column;
  min-width:260px; min-height:140px;
  background:var(--face);
  border:3px solid var(--title-1);
  border-top:0;
  border-radius:8px 8px 0 0;
  box-shadow:2px 3px 14px rgba(0,0,0,.5);
  animation:winIn .14s ease-out;
}
@keyframes winIn{ from{ transform:scale(.97); opacity:.4 } }
.win.is-min{ display:none; }
.win.is-max{ inset:0 !important; width:auto !important; height:auto !important; border-radius:0; }
.win.is-blur{ border-color:var(--title-off-1); }

.win__bar{
  flex:none; height:29px; display:flex; align-items:center; gap:6px;
  padding:0 3px 0 5px; cursor:default;
  border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,
    var(--title-3) 0%, var(--title-2) 8%, var(--title-1) 42%,
    var(--title-2) 88%, #1b62e8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
  color:#fff;
}
.win.is-max .win__bar{ border-radius:0; }
.win.is-blur .win__bar{
  background:linear-gradient(180deg,var(--title-off-2),var(--title-off-1) 45%,#9ab6e8);
  color:#e8eefc;
}
.win__ico{ width:17px; height:17px; flex:none; object-fit:contain; }
.win__title{
  flex:1; min-width:0; font-weight:700; font-size:12px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:1px 1px 1px rgba(0,0,0,.55);
}
.win__btns{ display:flex; gap:2px; }
.win__btn{
  width:21px; height:21px; border-radius:3px; cursor:pointer;
  border:1px solid rgba(255,255,255,.75);
  display:grid; place-items:center;
  font:700 11px/1 var(--ui); color:#fff;
  background:linear-gradient(180deg,#4b9bff,#1152cf);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}
.win__btn:hover{ background:linear-gradient(180deg,#74b4ff,#2a6ce0); }
.win__btn--x{ background:linear-gradient(180deg,#f08a6b,#c72d13); }
.win__btn--x:hover{ background:linear-gradient(180deg,#ff9f80,#e0421f); }

.win__body{
  flex:1; min-height:0; overflow:auto;
  background:var(--face);
  border-top:1px solid #fff;
}
.win__body--flush{ padding:0; }
.win__status{
  flex:none; height:21px; display:flex; align-items:center; gap:10px;
  padding:0 8px; font-size:11px; color:#333;
  background:var(--face);
  border-top:1px solid #fff;
  box-shadow:inset 0 1px 0 var(--face-dark);
}

.win__grip{
  position:absolute; right:0; bottom:0; width:16px; height:16px;
  cursor:nwse-resize;
  background:
    linear-gradient(135deg,transparent 46%,#a0a0a0 46% 52%,transparent 52%),
    linear-gradient(135deg,transparent 66%,#a0a0a0 66% 72%,transparent 72%);
}
.win.is-max .win__grip{ display:none; }

/* generic XP widgets used inside apps */
.xp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-width:74px; padding:4px 12px; cursor:pointer;
  font:400 12px var(--ui); color:#000; text-decoration:none;
  border:1px solid #003c74; border-radius:3px;
  background:linear-gradient(180deg,#fff 0%,#f0f0ea 45%,#e0dcc8 46%,#f3f2ec 100%);
  box-shadow:inset 0 0 0 1px #fff;
}
.xp-btn:hover{ border-color:#0a70c8; background:linear-gradient(180deg,#fff,#f6f2d8 46%,#ffeaa8 100%); }
.xp-btn:active{ background:linear-gradient(180deg,#d8d4c0,#efece0); box-shadow:inset 1px 1px 2px rgba(0,0,0,.25); }
.xp-btn--go{ font-weight:700; }

/* scrollbars, Luna style */
.win__body::-webkit-scrollbar{ width:16px; height:16px; }
.win__body::-webkit-scrollbar-track{ background:#f1efe2; box-shadow:inset 1px 0 0 #d6d2c2; }
.win__body::-webkit-scrollbar-thumb{
  border:1px solid #3f6ec4; border-radius:3px;
  background:linear-gradient(90deg,#e5f0ff,#a7c6f5 40%,#6f9de8);
}
.win__body::-webkit-scrollbar-thumb:hover{ background:linear-gradient(90deg,#f0f7ff,#bcd6fa 40%,#87b1ee); }

/* ══════════════════════════════════════════════════════════════
   6 · TASKBAR
   ══════════════════════════════════════════════════════════════ */
.taskbar{
  position:absolute; left:0; right:0; bottom:0; height:var(--tb-h);
  display:flex; align-items:stretch; gap:4px; z-index:500;
  background:linear-gradient(180deg,#2b7ae8 0%, var(--task-1) 8%, var(--task-2) 42%, #1e50c8 92%, var(--task-edge) 100%);
  box-shadow:inset 0 1px 0 #5fa4ff, 0 -1px 4px rgba(0,0,0,.4);
}
.start{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  padding:0 20px 2px 8px; margin-right:6px;
  border-radius:0 12px 12px 0;
  background:linear-gradient(180deg,#7cc45f 0%, var(--start-1) 12%, var(--start-2) 55%, var(--start-3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 2px 0 4px rgba(0,0,0,.3);
  color:#fff; font:italic 700 16px var(--ui); text-shadow:1px 1px 2px rgba(0,0,0,.5);
}
.start img{ width:22px; height:22px; border-radius:50%; }
.start:hover{ filter:brightness(1.1); }
.start[aria-expanded="true"]{ filter:brightness(.88); box-shadow:inset 2px 2px 5px rgba(0,0,0,.45); }

.tasks{ flex:1; min-width:0; display:flex; align-items:center; gap:3px; padding:3px 0; overflow:hidden; }
.task{
  flex:0 1 165px; min-width:0; height:100%;
  display:flex; align-items:center; gap:6px; padding:0 8px; cursor:pointer;
  border-radius:3px; color:#fff; font-size:11px;
  background:linear-gradient(180deg,#4f97f5,#2c68d8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
}
.task:hover{ filter:brightness(1.12); }
.task.is-active{
  background:linear-gradient(180deg,#1d4fae,#2f6fd8);
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.45);
  font-weight:700;
}
.task__ico{ width:17px; height:17px; flex:none; object-fit:contain; }
.task span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.tray{
  flex:none; display:flex; align-items:center; gap:8px; padding:0 10px 0 12px;
  background:linear-gradient(180deg,#26a0e8 0%,#1a86dc 12%,#1263c8 55%,#0d4bb0 100%);
  box-shadow:inset 2px 0 3px rgba(0,0,0,.25);
  color:#fff;
}
.tray__ico{ font-size:13px; line-height:1; cursor:default; }
button.tray__ico{ cursor:pointer; }
.tray__clock{ font-size:11px; min-width:52px; text-align:center; }

/* The market sits in the tray the way the clock does: a number, no drama.
   The only colour is the triangle, and it is small on purpose — a taskbar
   that flashes green is a billboard, not an operating system.
   `[hidden]` needs saying out loud here; the display rule above would
   otherwise win and the button would show before it has anything to say. */
/* How many people are on the pond, beside the network icon. The ticker can be
   a bare number because a price is obviously a price; a lone "3" in a taskbar
   is not obviously anything, and nobody clicks what does not look clickable.
   So this one says the word and wears a border. */
.tray__pond{
  display:flex; align-items:center; gap:4px;
  padding:2px 7px 2px 6px; border:1px solid rgba(255,255,255,.42); border-radius:9px;
  background:rgba(255,255,255,.12); color:#fff;
  font:11px/1 inherit; font-variant-numeric:tabular-nums; cursor:pointer;
  white-space:nowrap;
}
.tray__pond::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:#7df07d; box-shadow:0 0 4px rgba(125,240,125,.9);
}
.tray__pond:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.7); }
.tray__pond:active{ background:rgba(0,0,0,.18); }
.tray__pond[hidden]{ display:none; }

/* ── other people's pointers ──────────────────────────────────────
   They sit above the wallpaper and below the icons, so a ghost never
   swallows a double-click. They move in steps, not smoothly: the position
   arrives with a heartbeat every few seconds, and a desktop that has been
   on dial-up since 1988 has no business animating at sixty frames. The
   transition is just long enough that they slide rather than teleport. */
.ghosts{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; }
.ghost{
  position:absolute; top:0; left:0; display:flex; align-items:flex-start; gap:3px;
  transform:translate3d(0,0,0); transition:transform 1.4s linear; will-change:transform;
}
.ghost svg{ flex:none; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); opacity:.85; }
.ghost b{
  margin-top:11px; padding:1px 5px; border:1px solid #b0a97e; border-radius:2px;
  background:#ffffe1; color:#1a1a1a; font:11px/1.5 inherit; font-weight:400;
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion:reduce){ .ghost{ transition:none; } }

.tray__tick{
  display:flex; align-items:center; gap:5px;
  padding:0 2px; border:0; background:none;
  color:#fff; font:11px/1 inherit; font-variant-numeric:tabular-nums;
  cursor:pointer; white-space:nowrap;
}
.tray__tick[hidden]{ display:none; }
.tray__tick i{ font-style:normal; font-size:8px; }
.tray__tick.is-up i{ color:#8ff2a4; }
.tray__tick.is-down i{ color:#ffa8a8; }
.tray__tick.is-stale{ opacity:.5; }          /* answer overdue — say so quietly */


/* ══════════════════════════════════════════════════════════════
   7 · START MENU
   ══════════════════════════════════════════════════════════════ */
.startmenu{
  position:absolute; left:0; bottom:var(--tb-h); z-index:600;
  width:min(384px, 96vw);
  border-radius:8px 8px 0 0; overflow:hidden;
  border:1px solid #0a3fb0; border-bottom:0;
  box-shadow:2px -2px 14px rgba(0,0,0,.45);
  animation:menuIn .12s ease-out;
}
@keyframes menuIn{ from{ transform:translateY(8px); opacity:.3 } }
.startmenu[hidden]{ display:none; }
.startmenu__head{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:linear-gradient(180deg,#1f6fe0,#0f4fc0 55%,#0a3ea8);
  color:#fff; font-size:15px; font-weight:700;
  text-shadow:1px 1px 2px rgba(0,0,0,.5);
  border-bottom:2px solid #f0b400;
}
.startmenu__head img{ width:32px; height:32px; border-radius:4px; border:2px solid #fff; }
.startmenu__cols{ display:grid; grid-template-columns:1fr 172px; background:#fff; }
.startmenu__left, .startmenu__right{ margin:0; padding:6px; list-style:none; }
.startmenu__right{ background:#d3e5fa; box-shadow:inset 1px 0 0 #b0cdf0; }
.startmenu li{
  display:flex; align-items:center; gap:9px; padding:6px 8px;
  border-radius:3px; cursor:pointer; font-size:12px;
}
.startmenu li:hover{ background:var(--sel); color:#fff; }
.menu__ico{ width:26px; height:26px; flex:none; object-fit:contain; }
img.menu__ico{ border-radius:4px; }
.startmenu li b{ font-weight:700; }
.startmenu li small{ display:block; font-weight:400; font-size:10px; opacity:.7; }
.startmenu li.sep{ height:1px; padding:0; margin:5px 6px; background:#c6d8ee; pointer-events:none; }
.startmenu__foot{
  display:flex; justify-content:flex-end; gap:14px; padding:7px 12px;
  background:linear-gradient(180deg,#1f6fe0,#0f4fc0 55%,#0a3ea8);
}
.startmenu__foot button{
  display:flex; align-items:center; gap:6px; cursor:pointer;
  color:#fff; font-size:12px; text-shadow:1px 1px 1px rgba(0,0,0,.5);
}
.startmenu__foot i{
  font-style:normal; width:20px; height:20px; border-radius:3px;
  display:grid; place-items:center; font-size:11px;
  background:linear-gradient(180deg,#ff9a3d,#d1600e);
}
.startmenu__foot button:hover{ text-decoration:underline; }

/* ══════════════════════════════════════════════════════════════
   8 · ASSISTANT
   ══════════════════════════════════════════════════════════════ */
.clip{ position:absolute; right:14px; bottom:calc(var(--tb-h) + 12px); z-index:450; width:230px; }
.clip[hidden]{ display:none; }
.clip__bubble{
  position:relative; background:#ffffe1; border:1px solid #000;
  border-radius:6px; padding:9px 26px 9px 10px; font-size:11px; line-height:1.5;
  box-shadow:2px 2px 6px rgba(0,0,0,.35);
}
.clip__bubble::after{
  content:''; position:absolute; right:34px; bottom:-9px;
  border:9px solid transparent; border-top-color:#ffffe1; border-bottom:0;
  filter:drop-shadow(0 1px 0 #000);
}
.clip__bubble p{ margin:0; }
.clip__x{ position:absolute; top:3px; right:5px; cursor:pointer; font-size:11px; color:#555; }
.clip__gorb{
  width:64px; margin:6px 8px 0 auto; border-radius:50%;
  border:2px solid #fff; box-shadow:2px 3px 8px rgba(0,0,0,.45);
  animation:bob 3.4s ease-in-out infinite;
}
@keyframes bob{ 50%{ transform:translateY(-6px) rotate(-5deg); } }

/* ══════════════════════════════════════════════════════════════
   9 · SCANLINES
   ══════════════════════════════════════════════════════════════ */
.scanlines{
  position:fixed; inset:0; z-index:950; pointer-events:none; opacity:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  transition:opacity .25s;
}
.scanlines.is-on{ opacity:1; }

/* ══════════════════════════════════════════════════════════════
   10 · APP — GORB EXPLORER
   ══════════════════════════════════════════════════════════════ */
.ie{ display:flex; flex-direction:column; min-height:100%; background:#fff; }
.ie__menubar, .ie__toolbar, .ie__addr{
  flex:none; display:flex; align-items:center; gap:2px; padding:2px 6px;
  background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark), inset 0 1px 0 #fff;
}
.ie__menubar span{ padding:2px 7px; font-size:11px; border-radius:2px; cursor:default; }
.ie__menubar span:hover{ background:var(--sel); color:#fff; }
.ie__toolbar{ gap:4px; padding:4px 6px; }
.ie__tb{
  display:inline-flex; align-items:center; gap:5px; padding:3px 8px;
  font-size:11px; border-radius:3px; border:1px solid transparent; cursor:pointer;
}
.ie__tb:hover{ border-color:#9db8e0; background:linear-gradient(180deg,#fff,#dbe9fb); }
.ie__sep{ width:1px; align-self:stretch; margin:2px 4px; background:var(--face-dark); box-shadow:1px 0 0 #fff; }
.ie__addr label{ font-size:11px; color:#444; padding:0 6px 0 2px; }
.ie__url{
  flex:1; min-width:0; display:flex; align-items:center; gap:6px;
  height:21px; padding:0 6px; background:#fff;
  border:1px solid #7f9db9; box-shadow:inset 1px 1px 0 #b8c8da;
  font-size:11px; color:#222;
}
.ie__url img{ width:14px; height:14px; }
.ie__url span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Das Feld sah aus wie eine Eingabe, war aber keine -- deshalb jetzt
   wirklich eines, optisch unveraendert. */
.ie__url input.ie__input{
  flex:1; min-width:0; border:0; outline:0; background:transparent;
  font:inherit; color:inherit; padding:0;
}
.ie__go{ padding:2px 9px; font-size:11px; cursor:pointer; }

.ie__brandbar{
  flex:none; display:flex; align-items:center; gap:12px; padding:6px 12px;
  background:linear-gradient(90deg,#1f6b1a,#2f8f24 40%,#1c5c17);
  color:#fff;
}
.ie__brandbar img{ width:38px; height:38px; border-radius:50%; border:2px solid #bfe89a; }
.ie__brandbar b{ font-size:22px; font-weight:700; line-height:1; }
.ie__brandbar b small{ display:block; font-size:9px; font-weight:400; opacity:.85; }
.ie__brandbar b span{ color:var(--shirt); font-size:13px; vertical-align:super; }
.ie__brandbar em{ margin-left:auto; font-style:normal; font-size:11px; color:#cdf0b4; }

.ie__crumb{
  flex:none; padding:3px 12px; font-size:11px; color:#fff;
  background:linear-gradient(180deg,#4a8fe8,#2c6ccc);
}

.ie__body{ flex:1; display:grid; grid-template-columns:172px 1fr 178px; gap:0; background:#fff; }
.ie__side{ padding:10px 12px; background:#f4f7fc; box-shadow:inset -1px 0 0 #cfdcec; font-size:11px; }
.ie__side--r{ box-shadow:inset 1px 0 0 #cfdcec; background:#eef4fb; }
.ie__side h4{
  margin:12px 0 5px; font-size:11px; color:#0a3d91;
  border-bottom:1px solid #c3d6ee; padding-bottom:3px;
}
.ie__side h4:first-child{ margin-top:0; }
.ie__side a{ display:block; padding:2px 0 2px 9px; position:relative; }
.ie__side a::before{ content:'▸'; position:absolute; left:0; color:#5b8bd0; }
.ie__side a:hover{ text-decoration:underline; }
.ie__adbox{
  margin-top:16px; padding:10px; text-align:center; border:1px solid #c3d6ee;
  background:linear-gradient(180deg,#fff,#e6f0fb);
}
.ie__adbox b{ display:block; font-size:16px; color:#1a6b12; }
.ie__adbox span{ font-size:10px; color:#556; }

.ie__main{ padding:0 0 18px; min-width:0; }
.ie__h{
  margin:0; padding:5px 12px; font-size:12px; color:#0a3d91;
  background:linear-gradient(180deg,#e8f0fc,#cddff5);
  border-bottom:1px solid #b7cdea;
}
.ie__hero{ padding:12px; }
.ie__hero img{ width:100%; border:1px solid #999; }
.ie__hero p{
  margin:0; padding:4px 8px; font-size:10px; letter-spacing:1px; color:#fff;
  background:#1c1c1c; text-align:center;
}
.ie__text{ padding:10px 14px; font-size:12px; line-height:1.65; }
.ie__text p{ margin:0 0 10px; }
.ie__text b.r{ color:var(--shirt); }
.ie__text b.y{ color:#a8850a; }
.ie__pull{
  border-left:4px solid var(--gorb); padding:4px 0 4px 10px;
  font-size:15px; font-weight:700;
}
.ie__pull span{ color:#1a6b12; }
.ie__facts{ width:calc(100% - 28px); margin:0 14px; border-collapse:collapse; font-size:11px; }
.ie__facts th, .ie__facts td{ border:1px solid #c9d6e6; padding:4px 8px; text-align:left; }
.ie__facts th{ background:#eef4fb; width:44%; font-weight:700; color:#22456f; }

/* ══════════════════════════════════════════════════════════════
   11 · APP — CANAL 88 PLAYER
   ══════════════════════════════════════════════════════════════ */
.wmp{
  display:grid; grid-template-rows:1fr auto auto; min-height:100%;
  background:linear-gradient(180deg,#20293a,#0d1220);
  color:#cfe0ff;
}
.wmp__screen{ position:relative; background:#000; aspect-ratio:16/9; overflow:hidden; }
.wmp__screen video{ width:100%; height:100%; object-fit:cover; }
.wmp__static{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity .12s; }
.wmp.is-tuning .wmp__static{ opacity:.92; }
.wmp__osd{
  position:absolute; top:8px; left:10px; right:10px; display:flex; justify-content:space-between;
  font:400 11px var(--ui); letter-spacing:2px; color:#eaf2ff;
  text-shadow:0 1px 3px #000; opacity:0; transition:opacity .25s; pointer-events:none;
}
.wmp.is-playing .wmp__osd{ opacity:1; }
.wmp__osd .rec{ display:inline-flex; align-items:center; gap:6px; color:var(--slime); }
.wmp__osd .rec i{ width:7px; height:7px; border-radius:50%; background:var(--slime); animation:blink 1.1s steps(1) infinite; }
.wmp__osd em{ font-style:normal; color:#fff; }
.wmp__play{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:10px;
  background:rgba(0,0,0,.45); cursor:pointer; transition:opacity .3s;
}
.wmp__play svg{
  width:74px; height:74px; padding:14px; border-radius:50%;
  border:3px solid var(--slime); fill:var(--slime);
  box-shadow:0 0 34px rgba(168,255,26,.4);
}
.wmp__play em{ font-style:normal; font-size:12px; letter-spacing:2px; color:#fff; }
.wmp__play:hover svg{ background:var(--slime); fill:#000; }
.wmp.is-playing .wmp__play{ opacity:0; pointer-events:none; }

.wmp__controls{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:linear-gradient(180deg,#3a4a66,#1b2438);
  border-top:1px solid #4a5c7e;
}
.wmp__btn{
  width:28px; height:24px; border-radius:4px; cursor:pointer; font-size:12px;
  color:#dce8ff; border:1px solid #52658a;
  background:linear-gradient(180deg,#54688f,#2c3a55);
}
.wmp__btn:hover{ background:linear-gradient(180deg,#6d84b0,#3b4c6d); }
.wmp__seek{ flex:1; height:7px; border-radius:4px; background:#101827; box-shadow:inset 0 1px 2px #000; overflow:hidden; }
.wmp__seek i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--gorb),var(--slime)); }

.wmp__list{ background:#111a2b; border-top:1px solid #2c3a55; max-height:210px; overflow:auto; }
.wmp__listhead{ padding:5px 12px; font-size:11px; letter-spacing:2px; color:#7f9ac6; background:#0c1322; }
.wmp__list ul{ margin:0; padding:0; list-style:none; }
.wmp__list li{
  display:flex; align-items:center; gap:10px; padding:5px 12px; cursor:pointer; font-size:11px;
}
.wmp__list li:hover{ background:#1d2b45; }
.wmp__list li.is-live{ background:#1b3f6e; color:#fff; }
.wmp__list li img{ width:54px; height:31px; object-fit:cover; border:1px solid #3c5178; flex:none; }
.wmp__list li b{ display:block; font-size:11px; }
.wmp__list li span{ font-size:10px; color:#8aa4cc; }
.wmp__list li .dur{ margin-left:auto; color:#6f88b0; }

/* ══════════════════════════════════════════════════════════════
   12 · APP — FOLDERS, VIEWER
   ══════════════════════════════════════════════════════════════ */
.folder{ min-height:100%; background:#fff; display:flex; flex-direction:column; }
.folder__bar{
  flex:none; display:flex; align-items:center; gap:8px; padding:4px 8px;
  background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark), inset 0 1px 0 #fff;
}
.folder__count{ margin-left:auto; font-size:11px; color:#444; }
.folder__grid{
  flex:1; display:grid; gap:6px; padding:10px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  align-content:start;
}
.file{
  padding:6px 4px 8px; border-radius:3px; cursor:pointer;
  display:grid; justify-items:center; gap:5px; text-align:center;
}
.file:hover{ background:#eaf1fb; }
.file.is-sel{ background:#cfe0f6; }
.file__thumb{
  width:74px; height:58px; object-fit:cover;
  border:1px solid #888; background:#eee;
  box-shadow:2px 2px 0 rgba(0,0,0,.12);
}
.file span{ font-size:10px; line-height:1.3; word-break:break-word; }

.bin{ padding:12px; display:grid; gap:4px; }
.bin__item{
  display:grid; grid-template-columns:34px 1fr; align-items:center; gap:4px 10px;
  padding:8px 10px; border:1px solid #dde5ef; background:#f8fafd;
}
.bin__item span{ grid-row:span 2; font-size:24px; text-align:center; }
.bin__item b{ font-size:12px; }
.bin__item i{ font-style:normal; font-size:11px; color:#666; }

.viewer{ display:grid; grid-template-rows:1fr auto; min-height:100%; background:#2b2b2b; }
.viewer__stage{ display:grid; place-items:center; padding:12px; min-height:0; }
.viewer__stage img{ max-width:100%; max-height:100%; object-fit:contain; border:1px solid #000; }
.viewer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:6px 10px; background:var(--face);
  box-shadow:inset 0 1px 0 #fff;
}
.viewer__bar span{ font-size:11px; }

/* ══════════════════════════════════════════════════════════════
   12a · GORB RUN — full-screen takeover, not a window.
   Black launch frame over everything (taskbar included), then the
   game's iframe fades in. Quitting reverses it.
   ══════════════════════════════════════════════════════════════ */
.gamefs{
  position:fixed; inset:0; z-index:960; background:#000;
  opacity:0; transition:opacity .3s ease;
}
.gamefs.is-on{ opacity:1; }
.gamefs__frame{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
  opacity:0; transition:opacity .45s ease .25s;
}
.gamefs.is-on .gamefs__frame{ opacity:1; }

/* ══════════════════════════════════════════════════════════════
   12b · APP — LIVE CHART
   ══════════════════════════════════════════════════════════════ */
.chart{ display:flex; flex-direction:column; min-height:100%; background:#0d1622; }
.chart__bar{
  flex:none; display:flex; align-items:center; gap:8px; padding:5px 8px;
  background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark), inset 0 1px 0 #fff;
}
.chart__badge{
  font-size:9px; font-weight:700; letter-spacing:1px; color:#fff;
  background:#c0392b; padding:2px 6px; border-radius:2px;
  animation:blink 1.6s steps(1) infinite;
}
.chart__url{
  flex:1; min-width:0; height:21px; line-height:19px; padding:0 7px;
  background:#fff; border:1px solid #7f9db9; box-shadow:inset 1px 1px 0 #b8c8da;
  font:400 11px "Lucida Console", monospace; color:#222;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* The figures the window was opened for, in the window, before the chart is.
   They come from the same endpoint the tray ticker uses and land in about a
   third of a second. */
.chart__stats{
  display:flex; flex-wrap:wrap; gap:2px 16px; align-items:baseline;
  padding:7px 10px; background:#0d1622; border-bottom:1px solid #24344e;
  color:#dbe7fb; font-size:13px; font-variant-numeric:tabular-nums;
}
.chart__stats[hidden]{ display:none; }
.chart__stats span{ display:inline-flex; align-items:baseline; gap:5px; }
.chart__stats i{ font-style:normal; font-size:10px; letter-spacing:1px; color:#6f8db8; }
.chart__stats b{ font-weight:600; }
.chart__stats span:nth-child(2) b{ color:#7ee89a; }
.chart__stats.is-down span:nth-child(2) b{ color:#ff9a9a; }

.chart__stage{ position:relative; flex:1; min-height:340px; }
.chart__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#0d1622; }
.chart__load{
  position:absolute; inset:0; z-index:2; display:grid; align-content:center; justify-items:center;
  gap:8px; padding:24px; text-align:center; background:#0d1622; color:#cfe0ff;
}
.chart__load[hidden]{ display:none; }
.chart__load b{ font-size:14px; }
.chart__load span{ font-size:11px; color:#7f9ac6; max-width:44ch; }
.chart__load i{ display:none; font-style:normal; font-size:11px; color:#ffb26b; max-width:44ch; }
.chart__load.is-fail i{ display:block; }
.chart__load.is-fail b::after{ content:' taking a while'; color:#ffb26b; }

/* ══════════════════════════════════════════════════════════════
   13 · APP — SPREADSHEET, NOTEPAD, HELP, DIALOG
   ══════════════════════════════════════════════════════════════ */
.sheet{ background:#fff; min-height:100%; display:flex; flex-direction:column; }
.sheet__bar{ flex:none; padding:4px 8px; font-size:11px; background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark); }
.sheet__grid{ border-collapse:collapse; font-size:12px; margin:0; width:100%; }
.sheet__grid th{
  background:linear-gradient(180deg,#fff,#dcd8c8); border:1px solid #9a968a;
  font-weight:400; font-size:11px; color:#333; padding:3px 6px; text-align:center; width:34px;
}
.sheet__grid tr:first-child th{ height:20px; }
.sheet__grid td{ border:1px solid #d6d2c6; padding:4px 8px; }
.sheet__grid td.k{ width:46%; }
.sheet__grid td.v{ font-weight:700; }
.sheet__grid td.ok{ color:#1a6b12; }
.sheet__note{ margin:0; padding:12px; font-size:11px; color:#444; line-height:1.6; }
.sheet__tabs{
  margin-top:auto; display:flex; gap:2px; padding:4px 8px;
  background:var(--face); box-shadow:inset 0 1px 0 #fff;
}
.sheet__tabs b, .sheet__tabs span{
  padding:2px 12px; font-size:11px; font-weight:400;
  border:1px solid #9a968a; border-bottom:0; border-radius:3px 3px 0 0;
  background:#dcd8c8;
}
.sheet__tabs b{ background:#fff; font-weight:700; }

.pad{ background:#fff; min-height:100%; display:flex; flex-direction:column; }
.pad__menubar{ flex:none; display:flex; gap:2px; padding:2px 6px; background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark); }
.pad__menubar span{ padding:2px 7px; font-size:11px; border-radius:2px; }
.pad__menubar span:hover{ background:var(--sel); color:#fff; }
.pad__body{ flex:1; padding:10px 14px; }
.pad pre{
  margin:0; font:400 13px/1.55 "Lucida Console", Consolas, monospace;
  white-space:pre-wrap; word-break:break-word;
}
.pad pre span{ color:#0a5; font-weight:700; }
.pad__actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }

.help{ background:#fff; min-height:100%; display:flex; flex-direction:column; }
.help__bar{ flex:none; display:flex; gap:5px; padding:5px 8px; background:var(--face); box-shadow:inset 0 -1px 0 var(--face-dark); }
.help__body{ flex:1; padding:14px 18px; }
.help__body h2{ margin:0 0 4px; font-size:17px; color:#0a3d91; }
.help__lede{ margin:0 0 16px; font-size:12px; color:#555; }
.help__row{
  display:grid; grid-template-columns:120px 1fr; gap:14px; align-items:start;
  padding:12px 0; border-top:1px solid #dde5ef;
}
.help__row img{ width:100%; border:1px solid #999; }
.help__row h3{ margin:0 0 5px; font-size:13px; color:#1a6b12; }
.help__row p{ margin:0; font-size:12px; line-height:1.6; }
.help__row--now b{
  display:inline-block; margin-top:8px; padding:2px 8px; font-size:10px;
  background:var(--shirt); color:#fff; border-radius:2px;
}

.dlg{ padding:18px; }
.dlg__row{ display:grid; grid-template-columns:44px 1fr; gap:14px; }
.dlg__ico{ font-size:32px; }
.dlg__lead{ margin:0 0 6px; font-size:12px; font-weight:700; }
.dlg__ca{
  margin:0 0 10px; padding:7px 9px; font:400 12px/1.5 "Lucida Console", monospace;
  word-break:break-all; background:#fff; border:1px solid #7f9db9;
  box-shadow:inset 1px 1px 0 #b8c8da;
}
.dlg__warn{ margin:0; font-size:11px; color:#a3320f; }
.dlg__btns{ display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }

/* ══════════════════════════════════════════════════════════════
   14 · RESPONSIVE — small screens get one full-bleed window
   ══════════════════════════════════════════════════════════════ */
@media (max-width:820px){
  :root{ --tb-h:40px; }
  .login__body{ grid-template-columns:1fr; text-align:center; gap:18px; padding:18px; }
  .login__left{ text-align:center; }
  .login__mark{ margin-inline:auto; }
  .login__rule{ display:none; }
  .login__right{ max-width:none; }
  .login__bar--bottom p{ display:none; }

  .icons{ flex-direction:row; align-content:flex-start; gap:0; right:8px; bottom:auto; height:auto; }
  .icon{ width:76px; }

  .win{ inset:0 !important; width:auto !important; height:auto !important; border-radius:0; border-width:0; }
  .win__bar{ border-radius:0; }
  .win__grip{ display:none; }
  .win__btn--min, .win__btn--max{ display:none; }

  /* content first on a phone; the link rails follow it */
  .ie__body{ display:flex; flex-direction:column; }
  .ie__main{ order:1; }
  .ie__side{ order:2; box-shadow:none; border-top:1px solid #cfdcec; }
  .ie__side--r{ order:3; box-shadow:none; }
  .ie__toolbar{ flex-wrap:wrap; }

  .startmenu{ width:100vw; border-radius:0; }
  .startmenu__cols{ grid-template-columns:1fr; }
  .startmenu__right{ box-shadow:inset 0 1px 0 #b0cdf0; }

  .task{ flex-basis:44px; }
  .task span{ display:none; }
  /* The balloon used to be hidden here. It is the one thing on this desktop
     that talks back, and most visitors arrive on a phone — so it stays, just
     narrower, with a smaller gorb so it never crowds the icons. */
  .clip{ width:196px; right:10px; }
  .clip__gorb{ width:52px; }
  .clip__bubble{ font-size:12px; }
  .help__row{ grid-template-columns:1fr; }
  .viewer__bar{ flex-wrap:wrap; }
}

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

/* ══════════════════════════════════════════════════════════════
   15 · THE OLD ARROW
   Drawn rather than borrowed, so every visitor gets the same pointer
   whatever their own OS would have supplied. Kept last in the file
   on purpose — plenty of components above set cursor:pointer, and
   these need to win.
   ══════════════════════════════════════════════════════════════ */
html{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='20' viewBox='0 0 12 20'%3E%3Cpath d='M.7.7V16.4L4.4 12.9L7 18.9L9.5 17.8L6.9 11.9H11.4Z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 1 1, default;
}
a, button, .icon, .file, .task, .start, .user, .win__btn, .win__btns *,
.wmp__list li, .startmenu li, .ie__menubar span, .pad__menubar span,
.ie__side a, .xp-btn, .clip__x, .tray__ico, .tray__pond, .tray__tick, .wmp__tab{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='25' viewBox='0 0 21 25'%3E%3Cpath d='M6.5 12.2V3.4a1.6 1.6 0 0 1 3.2 0V10.9h1.1V8.6a1.5 1.5 0 0 1 3 0v2.5h1.1V9.6a1.5 1.5 0 0 1 3 0v2h1a1.4 1.4 0 0 1 1.4 1.4v3.4c0 3.6-2.4 6.2-6 6.2h-2.1c-2.4 0-4.2-1.3-5.2-3.4L4 14.6a1.5 1.5 0 0 1 2.5-1.6z' fill='%23fff' stroke='%23000' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 8 2, pointer;
}
.win__bar{ cursor:move; }
.win__grip{ cursor:nwse-resize; }
input, textarea{ cursor:text; }
.user--disabled{ cursor:not-allowed; }

@media (pointer:coarse){
  html, a, button, .icon, .file, .task, .start, .user, .win__btn,
  .wmp__list li, .startmenu li, .win__bar, .xp-btn{ cursor:auto; }
}

/* ══════════════════════════════════════════════════════════════
   DESKTOP CONTEXT MENU
   ══════════════════════════════════════════════════════════════ */
.ctx{
  position:fixed; z-index:9999;
  margin:0; padding:2px; list-style:none;
  min-width:186px;
  background:var(--face);
  border:1px solid #98a0a8;
  box-shadow:2px 2px 5px rgba(0,0,0,.35);
  font:400 12px/1 var(--ui);
  animation:dlgIn .1s ease-out;
}
.ctx li{
  display:flex; align-items:center; gap:9px;
  padding:6px 10px; cursor:pointer; white-space:nowrap;
}
.ctx li:hover:not(.sep):not(.head){ background:var(--sel); color:#fff; }
.ctx li.sep{
  height:0; padding:0; margin:3px 2px;
  border-top:1px solid #b8bcc0; border-bottom:1px solid #fff;
  cursor:default;
}
.ctx li.head{ padding:5px 10px 3px; cursor:default; }
.ctx__head{ font-size:10px; letter-spacing:.4px; text-transform:uppercase; color:#5d646e; }
.ctx__thumb{
  width:40px; height:30px; flex:none; object-fit:cover;
  border:1px solid #7f9db9; background:#fff;
}
.ctx__tick{ margin-left:auto; font-weight:700; color:#14561f; }
.ctx li:hover .ctx__tick{ color:#fff; }

@media (max-width:820px){
  /* the taskbar has no room for the market beside the clock */
  .tray__tick{ display:none; }
  /* and a phone has no pointer to show, nor room to name one */
  .ghosts{ display:none; }
  /* a finger needs more than six pixels of padding */
  .ctx li{ padding:10px 12px; }
  .ctx{ min-width:210px; }
}

/* A centred wallpaper keeps its own shape and sits on a plain ground, the way
   the original did — a portrait photo stretched over a wide screen just loses
   its head and its punchline. */
.wall--centre{
  object-fit:contain;
  object-position:center center;
  background:#0a0a0a;
}

/* Canal 88 runs to a schedule, so the player needs to say which of the two
   it is doing: showing you what is on air, or letting you pick. The tabs are
   the switch and the line beside them is the continuity announcement. */
.wmp__mode{
  display:flex; align-items:center; gap:4px;
  padding:4px 8px; background:#1b2740; border-top:1px solid #0c1526;
  font-size:10px; letter-spacing:1px; color:#8fa6cc;
}
.wmp__tab{
  padding:3px 9px; border:1px solid #3d5680; border-radius:2px;
  background:#22314f; color:#9fb6d8; font:inherit; letter-spacing:1px; cursor:pointer;
}
.wmp__tab.is-on{ background:#c2402c; border-color:#e0705c; color:#fff; }
.wmp__next{ margin-left:auto; font-variant-numeric:tabular-nums; white-space:nowrap;
            overflow:hidden; text-overflow:ellipsis; }

/* ══════════════════════════════════════════════════════════════
   GORB PAINT
   ══════════════════════════════════════════════════════════════ */
.paint{ display:flex; flex-direction:column; height:100%; background:var(--face); }
.paint__bar{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  padding:6px 8px; border-bottom:1px solid #b8bcc0;
}
/* Nine tools in four columns leaves one alone on a third row -- it looked
   broken the moment the arrow tool joined the eight. Five columns gives two
   even rows, and the size buttons beside them are two rows as well. */
.paint__tools{ display:grid; grid-template-columns:repeat(5,26px); gap:3px; }
.paint__sizes{ display:grid; grid-template-columns:repeat(2,26px); gap:3px; }
.pt{
  width:26px; height:26px; display:grid; place-items:center;
  font-size:13px; line-height:1; cursor:pointer;
  border:1px solid #98a0a8; background:linear-gradient(180deg,#fff,#e7e4d8);
}
.pt:hover{ border-color:#0a70c8; }
.pt.is-on{ background:linear-gradient(180deg,#d8d4c0,#efece0); box-shadow:inset 1px 1px 2px rgba(0,0,0,.3); }
.pt--size i{ display:block; background:#000; border-radius:50%; }
.pt svg{ display:block; }

.paint__stage{
  flex:1; min-height:0; padding:10px;
  display:grid; place-items:center; background:#8d99a8;
  box-shadow:inset 1px 1px 3px rgba(0,0,0,.35);
}
.paint__canvas{
  max-width:100%; max-height:100%;
  background:#fff; border:1px solid #5a6470;
  cursor:crosshair; touch-action:none;   /* drawing must not scroll the page */
}

.paint__foot{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:7px 8px; border-top:1px solid #b8bcc0;
}
.paint__swatch{
  width:34px; height:34px; flex:none; padding:3px;
  border:1px solid #98a0a8; background:#fff;
}
.paint__swatch i{ display:block; width:100%; height:100%; }
/* The palette used to sit in a fixed 14-column block, so on a 640px window
   half the row was empty beside it while the buttons underneath wrapped
   unevenly. It fills the row now, and the buttons get a row of their own. */
/* Squares, like the thing this imitates -- stretching them to fill the row
   turned the palette into a bar chart. The block is centred instead, so the
   footer is balanced without the colours being pulled out of shape. */
.paint__palette{
  flex:1; min-width:0;
  display:grid; grid-template-columns:repeat(14,16px);
  grid-auto-rows:16px; gap:2px; justify-content:center; align-content:center;
}
.pc{ width:16px; height:16px; border:1px solid #7a7f86; cursor:pointer; padding:0; }
.pc:hover{ outline:1px solid #0a70c8; outline-offset:1px; }
.paint__acts{ display:flex; gap:6px; width:100%; flex-wrap:wrap; }
.paint__acts .xp-btn{ flex:1 1 auto; white-space:nowrap; }

@media (max-width:820px){
  .paint__palette{ grid-template-columns:repeat(7,18px); }
  .paint__acts{ margin-left:0; width:100%; }
}

/* gallery — same furniture as the evidence folder, one note underneath */
.gal__hint{
  margin:0; padding:7px 10px; font-size:11px; color:#4a5a4c;
  border-top:1px solid #b8bcc0; background:#f6f7f9;
}

/* ── paint: stamps, mirror, meme ─────────────────────────────── */
.paint__extras { display:flex; align-items:center; gap:8px; margin-left:auto; }
.paint__mirror { display:flex; align-items:center; gap:4px; font-size:11px; cursor:pointer; user-select:none; }
.paint__mirror input { margin:0; }
.paint__stamps { display:flex; flex-wrap:wrap; gap:3px; padding:3px 4px; border-bottom:1px solid #808080;
                 background:#d4d0c8; box-shadow:inset 0 -1px 0 #fff; }
.pt--stamp { width:28px; height:28px; padding:2px; }
.pt--stamp img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }

/* ── paint: the object layer above the canvas ──────────────────
   Both canvases sit in the SAME grid cell rather than one being absolutely
   positioned, so they scale together and stay aligned to the pixel. The
   transparent border matches the canvas border, or they would sit 1px apart. */
.paint__stage { grid-template-areas:"cv"; }
.paint__canvas, .paint__layer { grid-area:cv; }
.paint__layer {
  max-width:100%; max-height:100%;
  border:1px solid transparent; pointer-events:none;
}
.paint__canvas.is-picking { cursor:default; }

/* ── gallery: the big view and the vote buttons ──────────────── */
.gal__view { position:absolute; inset:0; background:#d4d0c8; display:flex; flex-direction:column; z-index:3; }
.gal__view[hidden] { display:none; }   /* display:flex beats [hidden] — say it explicitly */
.gal__viewbar { display:flex; align-items:center; gap:8px; padding:5px 6px;
                border-bottom:1px solid #b8bcc0; box-shadow:inset 0 -1px 0 #fff; }
.gal__title { font-weight:700; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gal__stage { flex:1; min-height:0; display:grid; place-items:center; padding:10px; background:#8d99a8;
              box-shadow:inset 1px 1px 3px rgba(0,0,0,.35); }
.gal__stage img { max-width:100%; max-height:100%; background:#fff; border:1px solid #5a6470; }
.gal__meta { margin:0; padding:5px 8px; font-size:11px; color:#3b4450; border-top:1px solid #b8bcc0; }

.gal__vote, .gal__tilevote { font-family:inherit; cursor:pointer; white-space:nowrap; }
.gal__tilevote { display:block; margin:2px auto 0; padding:1px 7px; font-size:11px;
                 border:1px solid #8a8f96; border-radius:9px; background:#efeeea; color:#3b4450; }
.gal__tilevote:hover { background:#fff; }
.gal__vote.is-mine, .gal__tilevote.is-mine { color:#b3261e; border-color:#b3261e; font-weight:700; }
.folder__grid .file { position:relative; }
.folder { position:relative; }   /* the big view lays itself over the wall */

/* ── paint and gallery on a phone ────────────────────────────── */
@media (max-width:640px){
  /* The extras were pushed to the far right by margin-left:auto, which on a
     narrow window shoves them off the edge instead of onto a second row. */
  .paint__extras { margin-left:0; width:100%; flex-wrap:wrap; }
  .paint__extras .xp-btn { flex:1 1 auto; }
  .paint__stamps { justify-content:flex-start; }
  .gal__viewbar { flex-wrap:wrap; }
  .gal__title { flex:1 1 100%; order:3; }
}

/* ── Gorb Messenger ──────────────────────────────────────────── */
.msn { position:relative; display:flex; flex-direction:column; height:100%; min-height:0; background:#fff; }

.msn__head {
  flex:none; display:flex; align-items:center; gap:9px; padding:7px 9px;
  background:linear-gradient(#eaf3fd,#cfe3f8 55%,#bcd8f4);
  border-bottom:1px solid #8fb4d9;
}
.msn__pic { width:36px; height:36px; flex:none; border:1px solid #7c9dbf; background:#fff; padding:1px; }
.msn__pic img { width:100%; height:100%; object-fit:contain; display:block; }
.msn__who { display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.msn__who b { font-size:13px; color:#12365e; }
.msn__who span { font-size:11px; color:#4a6a8c; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msn__state { margin-left:auto; font-size:11px; color:#b3261e; }

.msn__log {
  flex:1; min-height:0; overflow-y:auto; padding:8px 10px;
  background:#fff; border-bottom:1px solid #cdd3da;
  font-size:12.5px; line-height:1.5;
}
.msn__line { margin:0 0 5px; word-wrap:break-word; overflow-wrap:anywhere; }
.msn__line b { color:#1f5fa8; margin-right:5px; }
.msn__line.is-me b { color:#c0392b; }
.msn__line i { color:#95a0ad; font-size:10.5px; font-style:normal; margin-right:6px; }
.msn__nudged { margin:6px 0; padding:4px 8px; background:#fff6d6; border:1px solid #e6cf82;
               color:#7a5f00; font-size:11.5px; }

.msn__tools {
  flex:none; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:5px 8px; background:var(--face); border-bottom:1px solid #b8bcc0;
}
.msn__emos { display:flex; gap:1px; flex-wrap:wrap; }
.msn__emo { border:1px solid transparent; background:none; cursor:pointer; font-size:15px;
            line-height:1; padding:2px 3px; border-radius:3px; }
.msn__emo:hover { border-color:#7f9db9; background:#fff; }
.msn__nick { margin-left:auto; font-size:11px; color:#3b4450; display:flex; align-items:center; gap:4px; }
.msn__nick input { width:110px; font:inherit; font-size:11px; padding:2px 5px;
                   border:1px solid #7f9db9; box-shadow:inset 1px 1px 0 #b8c8da; }

.msn__compose { flex:none; display:flex; gap:6px; padding:7px 8px; align-items:stretch; }
.msn__compose textarea {
  flex:1; resize:none; font:inherit; font-size:12.5px; padding:5px 6px;
  border:1px solid #7f9db9; box-shadow:inset 1px 1px 0 #b8c8da;
}
.msn__rule { flex:none; margin:0; padding:5px 9px 7px; font-size:10.5px; color:#5d646e;
             border-top:1px solid #e3e6ea; background:#f7f8fa; }

/* the nudge, exactly as rude as it was in 2003 */
@keyframes msn-nudge {
  0%,100% { transform:translate(0,0); }
  15% { transform:translate(-7px,4px); } 30% { transform:translate(6px,-5px); }
  45% { transform:translate(-5px,-3px); } 60% { transform:translate(5px,4px); }
  75% { transform:translate(-3px,2px); }
}
.win.is-nudged { animation:msn-nudge .5s ease-in-out; }
@media (prefers-reduced-motion:reduce){ .win.is-nudged { animation:none; } }

@media (max-width:640px){
  .msn__nick { margin-left:0; width:100%; }
  .msn__nick input { flex:1; width:auto; }
}

/* the guardian speaks in its own voice, and drawings sit under the line */
.msn__line.is-gorb { background:#f0f9ec; border-left:3px solid #74c13b; padding:3px 7px; margin-left:-3px; }
.msn__line.is-gorb b { color:#2c5a14; }
.msn__pic-msg { display:block; margin:4px 0 2px; max-width:230px; max-height:170px;
                border:1px solid #7c879a; background:#fff; cursor:pointer; }
.msn__face { width:24px; height:24px; float:left; margin:1px 6px 2px 0;
             border:1px solid #7c879a; background:#fff; object-fit:cover; }
.msn__line.has-face { overflow:hidden; min-height:26px; }

/* the buddy list, on the left where it belongs */
.msn__body { flex:1; min-height:0; display:flex; }
.msn__list { flex:none; width:132px; overflow-y:auto; padding:6px 0 6px 6px;
             background:#f2f7fd; border-right:1px solid #cdd3da; }
.msn__listhead { margin:0 0 5px; font-size:10.5px; font-weight:700; color:#4a6a8c;
                 text-transform:uppercase; letter-spacing:.03em; }
.msn__list ul { list-style:none; margin:0; padding:0; }
.msn__buddy { display:flex; align-items:center; gap:5px; padding:2px 4px 2px 0;
              font-size:11.5px; color:#12365e; overflow:hidden; }
.msn__buddy span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msn__buddy.is-me { font-weight:700; }
.msn__buddyface { width:18px; height:18px; flex:none; border:1px solid #7c9dbf;
                  background:#fff; object-fit:cover; }
.msn__buddydot { width:8px; height:8px; flex:none; margin:0 5px; border-radius:50%;
                 background:#74c13b; box-shadow:0 0 0 1px #2c5a14 inset; }
.msn__log { border-bottom:0; }

@media (max-width:640px){
  .msn__list { width:96px; }
}
/* the way back to the room, lit until it is used */
.xp-btn.is-waiting { border-color:#74c13b; box-shadow:0 0 0 2px rgba(116,193,59,.45); animation:gorb-wait 1.4s ease-in-out infinite; }
@keyframes gorb-wait { 0%,100%{ box-shadow:0 0 0 2px rgba(116,193,59,.45); } 50%{ box-shadow:0 0 0 5px rgba(116,193,59,.12); } }
@media (prefers-reduced-motion:reduce){ .xp-btn.is-waiting { animation:none; } }

/* ── the room, over Gorb Run ──────────────────────────────────
   A panel rather than loose text: it has to read as part of the game's
   furniture, not as something spilled onto it. Frosted, thin-bordered,
   and quiet until you look at it. */
.gchat {
  position:absolute; left:18px; bottom:18px; z-index:5;
  width:min(392px, 34vw); display:flex; flex-direction:column;
  border-radius:10px; overflow:hidden;
  background:rgba(12,18,14,.42);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 26px rgba(0,0,0,.42);
  backdrop-filter:blur(9px) saturate(1.1);
  -webkit-backdrop-filter:blur(9px) saturate(1.1);
  opacity:.72; transition:opacity .2s ease, background .2s ease, border-color .2s ease;
  font:13px/1.5 "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
}
.gchat:hover, .gchat.is-live { opacity:1; background:rgba(12,18,14,.62); border-color:rgba(116,193,59,.4); }

.gchat__head {
  display:flex; align-items:center; gap:7px; padding:7px 8px 6px 11px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:linear-gradient(rgba(255,255,255,.06), transparent);
}
.gchat__dot { width:7px; height:7px; border-radius:50%; background:#74c13b;
              box-shadow:0 0 7px rgba(116,193,59,.9); flex:none; }
.gchat__room { font-size:11.5px; font-weight:700; letter-spacing:.05em;
               text-transform:uppercase; color:rgba(255,255,255,.94); }
.gchat__count { font-size:11px; color:rgba(255,255,255,.55); margin-left:auto; }
.gchat__fold {
  flex:none; width:20px; height:20px; margin-left:6px; padding:0; line-height:1;
  font:600 14px/1 inherit; color:rgba(255,255,255,.6); cursor:pointer;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:5px;
}
.gchat__fold:hover { color:#fff; background:rgba(255,255,255,.16); }

.gchat__log {
  display:flex; flex-direction:column; gap:3px;
  padding:9px 11px; max-height:34vh; overflow-y:auto; pointer-events:none;
  /* the oldest lines fade out rather than being cut off */
  -webkit-mask-image:linear-gradient(transparent, #000 22px);
          mask-image:linear-gradient(transparent, #000 22px);
}
.gchat__log::-webkit-scrollbar { width:0; }
.gchat__line {
  margin:0; color:rgba(255,255,255,.93); overflow-wrap:anywhere;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  animation:gchat-in .22s ease-out;
}
@keyframes gchat-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.gchat__line b { color:#9fe06a; margin-right:6px; font-weight:600; }
.gchat__line.is-me b { color:#ffd166; }
.gchat__line.is-gorb { color:rgba(255,255,255,.82); font-style:italic; }
.gchat__line.is-gorb b { color:#74c13b; font-style:normal; }
.gchat__face { width:16px; height:16px; vertical-align:-3px; margin-right:5px;
               border-radius:3px; border:1px solid rgba(255,255,255,.45); object-fit:cover; }

.gchat__row { display:flex; align-items:center; gap:6px; padding:0 8px 8px; }
.gchat__in {
  flex:1; min-width:0; font:inherit; padding:6px 10px; color:#fff;
  background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.16);
  border-radius:7px; outline:none; transition:border-color .15s ease, background .15s ease;
}
.gchat__in::placeholder { color:rgba(255,255,255,.45); }
.gchat.is-live .gchat__in { background:rgba(0,0,0,.55); border-color:#74c13b; }
.gchat__hint {
  flex:none; font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.42);
  border:1px solid rgba(255,255,255,.16); border-radius:4px; padding:2px 5px;
}
.gchat.is-live .gchat__hint { color:rgba(255,255,255,.75); border-color:rgba(116,193,59,.5); }

/* folded: the header alone, still showing that the room is alive */
.gchat.is-folded .gchat__log, .gchat.is-folded .gchat__row { display:none; }
.gchat.is-folded { width:auto; }

@media (prefers-reduced-motion:reduce){ .gchat__line { animation:none; } }
@media (max-width:640px){
  .gchat { left:10px; bottom:10px; width:min(280px,64vw); font-size:12px; border-radius:8px; }
  .gchat__log { max-height:26vh; }
}
/* class rules that set display beat the hidden attribute — say it once, loudly */
.ie__tb[hidden], .xp-btn[hidden], .gal__flag[hidden] { display:none !important; }

/* ── the little window in the corner ──────────────────────────
   Slides up from the bottom right, waits seven seconds, goes away.
   Sits above the assistant balloon so the two never overlap. */
.msnpop {
  position:fixed; right:16px; bottom:56px; z-index:60;
  width:min(292px, 82vw); display:flex; align-items:flex-start; gap:9px;
  padding:9px 10px 10px;
  background:linear-gradient(#fdfefe,#eaf1fa 52%,#dbe7f6);
  border:1px solid #8fb4d9; border-radius:7px;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  font:12px/1.45 "Segoe UI", -apple-system, Helvetica, Arial, sans-serif;
  color:#16324f; cursor:pointer;
  transform:translateY(16px); opacity:0;
  transition:transform .24s cubic-bezier(.2,.8,.3,1), opacity .24s ease;
}
.msnpop.is-up { transform:none; opacity:1; }
.msnpop:hover { border-color:#74c13b; }
.msnpop__face { width:38px; height:38px; flex:none; object-fit:cover;
                border:1px solid #7c9dbf; background:#fff; padding:1px; }
.msnpop__txt { min-width:0; display:flex; flex-direction:column; gap:1px; }
.msnpop__txt b { font-size:12px; color:#12365e; }
.msnpop__txt span { overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
                    -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.msnpop__txt i { font-size:10.5px; color:#5d7a99; font-style:normal; }
.msnpop__x {
  position:absolute; top:3px; right:4px; width:16px; height:16px; padding:0;
  font:10px/1 inherit; color:#5d7a99; cursor:pointer;
  background:none; border:0; border-radius:3px;
}
.msnpop__x:hover { background:rgba(0,0,0,.09); color:#16324f; }
@media (prefers-reduced-motion:reduce){ .msnpop { transition:none; transform:none; opacity:1; } }
@media (max-width:640px){ .msnpop { right:8px; bottom:48px; } }
/* a page that is loading dims a little, the way one did */
.win.is-loading .ie__brandbar, .win.is-loading .ie__page { opacity:.55; transition:opacity .12s ease; }
.ie__tb:disabled { opacity:.42; cursor:default; }
.ie__tb:disabled:hover { border-color:transparent; background:none; }
/* the contents strip in the help viewer */
.help__toc { display:flex; flex-wrap:wrap; gap:4px; padding:6px 8px;
             background:#f7f8fa; border-bottom:1px solid #cdd3da; }
.help__toc[hidden] { display:none; }
.help__tocitem { font:inherit; font-size:11.5px; padding:2px 8px; cursor:pointer;
                 background:#fff; border:1px solid #9db8e0; border-radius:3px; color:#12365e; }
.help__tocitem:hover { background:#dbe9fb; }
/* printing should give the text, not the desktop around it */
@media print {
  body > *:not(.win) { display:none !important; }
  .win:not(:has(.help)) { display:none !important; }
  .win { position:static !important; width:auto !important; height:auto !important;
         box-shadow:none !important; border:0 !important; }
  .win__bar, .help__bar, .help__toc, .win__status { display:none !important; }
  .help__body { max-height:none !important; overflow:visible !important; }
}
.xp-btn:disabled { opacity:.45; cursor:default; }
.xp-btn:disabled:hover { filter:none; }
/* calling a message wrong: quiet until you go looking for it */
.msn__flag { float:right; margin-left:6px; padding:0 3px; font-size:11px; line-height:1.3;
             color:#b8bcc0; background:none; border:0; cursor:pointer; opacity:0; transition:opacity .12s ease; }
.msn__line:hover .msn__flag, .msn__flag:focus { opacity:1; }
.msn__flag:hover { color:#b3261e; }
.msn__flag:disabled { color:#b3261e; opacity:1; cursor:default; }

/* ── the gate: drawings waiting to be let into the room ─────── */
.chat__queue.is-waiting { border-color:#c8a415; box-shadow:0 0 0 2px rgba(245,197,24,.35); font-weight:700; }
.msn__gate { position:absolute; inset:0; z-index:4; background:#f7f8fa; display:flex; flex-direction:column; }
.msn__gate[hidden] { display:none; }
.msn__gatebar { display:flex; align-items:center; gap:8px; padding:6px 8px;
                background:linear-gradient(#eaf3fd,#cfe3f8); border-bottom:1px solid #8fb4d9; }
.msn__gatebar b { flex:1; font-size:12px; color:#12365e; }
.msn__gatelist { flex:1; min-height:0; overflow-y:auto; padding:9px; display:flex;
                 flex-direction:column; gap:9px; }
.msn__gateempty { margin:0; padding:14px 6px; font-size:12px; color:#5d646e; text-align:center; }
.msn__gatecard { display:flex; gap:9px; padding:8px; background:#fff;
                 border:1px solid #cdd3da; border-radius:5px; }
.msn__gatecard img { width:132px; height:88px; flex:none; object-fit:contain;
                     background:#fff; border:1px solid #7c879a; }
.msn__gateacts { display:flex; flex-direction:column; gap:5px; align-items:flex-start; justify-content:center; }
.msn__gateacts span { font-size:12px; font-weight:700; color:#12365e;
                      max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* the desk: three shelves, one row of buttons per item */
.msn__gatebar .ie__tb { font-size:11px; }
.msn__gatebar .ie__tb.is-on { background:#fff; border-color:#7f9db9; font-weight:700; }
.msn__gatebar .ie__tb span { color:#4a6a8c; font-weight:400; }
.msn__gatebar #chGateClose { margin-left:auto; }
.msn__gatecard q { font-size:12px; color:#3b4450; quotes:'\201C' '\201D';
                   max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msn__gateacts i { font-size:10.5px; color:#5d7a99; font-style:normal; }
.msn__gaterow { display:flex; gap:5px; flex-wrap:wrap; margin-top:3px; }
.xp-btn--danger { border-color:#b3261e; color:#b3261e; }
.xp-btn--danger:hover { background:#fdecea; }

/* ── Gorb Terminal ───────────────────────────────────────────── */
.term { display:flex; flex-direction:column; height:100%; min-height:0; background:#fff; }
.term__bar { flex:none; display:flex; align-items:center; gap:8px; padding:5px 8px;
             background:var(--face); border-bottom:1px solid #b8bcc0; box-shadow:inset 0 -1px 0 #fff; }
.term__live { font-size:11px; color:#5d646e; }
.term__live.is-on  { color:#1a7f37; }
.term__live.is-on::before { content:'●'; margin-right:4px; }
.term__live.is-off { color:#b3261e; }
.term__bar #tmReload { margin-left:auto; }

.term h3 { margin:0 0 7px; font-size:13px; color:#12365e; }
.term h3 small { font-weight:400; color:#7c879a; }
.term__own { flex:none; padding:11px 12px 12px; border-bottom:1px solid #e3e6ea; }
.term__grid { display:grid; gap:7px; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); }
.term__cell { padding:7px 9px; background:#f7f8fa; border:1px solid #dfe3e8; border-radius:5px;
              display:flex; flex-direction:column; gap:2px; }
.term__cell span { font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:#7c879a; }
.term__cell b { font:600 16px/1.15 "Segoe UI", -apple-system, Helvetica, Arial, sans-serif; color:#16324f; }
.term__cell.is-up b   { color:#1a7f37; }
.term__cell.is-down b { color:#b3261e; }
.term__pair { margin:8px 0 0; font-size:11px; color:#5d646e; }

.term__disc { flex:1; min-height:0; display:flex; flex-direction:column; padding:11px 12px 0; }
.term__note { margin:0 0 8px; font-size:11px; line-height:1.5; color:#5d646e; }
.term__list { flex:1; min-height:0; overflow-y:auto; padding-bottom:10px;
              display:flex; flex-direction:column; gap:5px; }
.term__row { display:flex; align-items:center; gap:9px; padding:6px 8px;
             background:#fff; border:1px solid #e3e6ea; border-radius:5px; }
.term__row:hover { border-color:#9db8e0; background:#f7fafe; }
.term__icon { width:28px; height:28px; flex:none; border-radius:5px; object-fit:cover;
              background:#eef1f4; border:1px solid #dfe3e8; }
.term__rowtext { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.term__rowtext span { font-size:12px; color:#16324f; overflow:hidden;
                      text-overflow:ellipsis; white-space:nowrap; }
.term__rowtext i { font:400 10.5px ui-monospace,SFMono-Regular,Menlo,monospace; color:#7c879a; font-style:normal; }
.term__rowacts { flex:none; display:flex; gap:5px; }
.term__rowacts a { text-decoration:none; display:inline-flex; align-items:center; }
@media (max-width:640px){
  .term__row { flex-wrap:wrap; }
  .term__rowacts { width:100%; }
}
.term__hold { flex:none; padding:11px 12px 12px; border-bottom:1px solid #e3e6ea; }
.term__grid--tight .term__cell b { font-size:15px; }
.term__list--short { max-height:190px; }
.term__row--tight { padding:4px 8px; }
.term__bar2 { flex:1; min-width:60px; max-width:180px; height:6px; border-radius:3px;
              background:#eef1f4; overflow:hidden; }
.term__bar2 i { display:block; height:100%; background:#74c13b; }

               background:repeating-linear-gradient(45deg,#f5c518 0 10px,#2b2b2b 10px 20px); }

/* ── the hidden attribute means hidden ───────────────────────────
   Any class that sets display beats [hidden], and this has now bitten three
   separate times: an invisible overlay swallowing every click, Delete
   showing on other people's drawings, and a window meant to be closed
   showing its contents. Said once, at the end, for everything. */
[hidden] { display: none !important; }
.term__live.is-part { color:#b07d00; }
.term__live.is-part::before { content:'●'; margin-right:4px; }

/* ── the phone ───────────────────────────────────────────────────
   Nothing here overflows, and it was still wrong: on a 375px screen the
   assistant sat on top of the message box, the buddy list took a quarter of
   the width to show one name, and the house rules pushed the room upward.
   Fitting is not the same as usable. */
@media (max-width:640px){

  /* The balloon moves to the top. There is nothing up there but a title bar,
     and every window on a phone has its input at the bottom. */
  .clip { top:calc(var(--tb-h,0px) + 8px); bottom:auto; right:8px; left:8px; width:auto; }
  .clip__bubble::after { top:auto; bottom:100%; transform:rotate(180deg) translateY(1px); }

  /* The buddy list lies down: a strip across the top instead of a column
     down the side, so the room gets the whole width. */
  .msn__body { flex-direction:column; }
  .msn__list { width:auto; max-height:none; overflow-x:auto; overflow-y:hidden;
               display:flex; align-items:center; gap:10px; padding:5px 8px;
               border-right:0; border-bottom:1px solid #cdd3da; }
  .msn__listhead { margin:0; flex:none; white-space:nowrap; }
  .msn__list ul { display:flex; gap:10px; }
  .msn__buddy { flex:none; padding:0; }
  .msn__log { flex:1; }

  /* The rules stay, quieter: they matter most to somebody arriving, and they
     are still the first thing under the box. */
  .msn__rule { font-size:10px; line-height:1.45; padding:4px 8px 6px; }
  .msn__tools { gap:4px; padding:4px 6px; }
  .msn__emo { font-size:14px; padding:1px 2px; }
  .msn__compose { padding:5px 6px; }
}
/* a job, not a message: it waits to be dealt with */
.msnpop.is-desk { border-color:#c8a415; background:linear-gradient(#fffdf3,#fdf3d4 55%,#f7e9b8); }
.msnpop.is-desk .msnpop__txt b { color:#7a5f00; }

/* Laufpruefung im Moderationsschreibtisch */
.msn__gaterow.is-flagged{ background:rgba(255,107,107,.12); border-left:3px solid #d33; }
.msn__gaterow em{ display:block; font-style:normal; font-size:11px; color:#b3261e; margin-top:2px; }
.ie__tb.is-waiting span{ background:#d33; color:#fff; border-radius:8px; padding:0 5px; }

/* Rangliste als Fenster */
.lb{ padding:14px 16px; font-family:var(--ui); }
.lb__head h2{ margin:0 0 4px; font-size:15px; letter-spacing:.5px; }
.lb__sub{ margin:0 0 12px; font-size:11px; color:#456; line-height:1.5; }
.lb__list{ list-style:none; margin:0; padding:0; border:1px solid #b8c8da; background:#fff; }
.lb__list li{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid #eef2f6; font-size:13px; }
.lb__list li:last-child{ border-bottom:0; }
.lb__list li.is-paid{ background:#f2fbe9; }
.lb__list li b{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb__rank{ width:24px; text-align:right; color:#789; font-variant-numeric:tabular-nums; }
.lb__dist{ color:#89a; font-size:11px; }
.lb__score{ font-weight:700; min-width:56px; text-align:right; font-variant-numeric:tabular-nums; }
.lb__empty{ justify-content:center; color:#789; padding:18px 10px; }
.lb__foot{ margin:10px 0 0; font-size:11px; color:#789; }