/* ══════════════════════════════════════════════════════════════
   ToadOS — 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 toad */
  --slime:  #a8ff1a;
  --toad:   #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,#5a9ae0 0%, #3f7fd0 45%, #2f6dc0 100%);
  color:#fff;
}
.login.is-on{ display:grid; }
.login.is-gone{ display:none; }
.login__bar{ background:linear-gradient(180deg,#1a4b9c,#123a80); }
.login__bar--top{ height:9%; min-height:52px; border-bottom:2px solid #7fb2ff; }
.login__bar--bottom{
  min-height:74px; border-top:2px solid #7fb2ff;
  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:#bfd6ff; 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.is-wallet-warning{ background:rgba(130,24,24,.42); box-shadow:inset 0 0 0 1px #ffb0a8; }
.user[aria-busy="true"]{ cursor:progress; }
.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);
}
/* Der Name ist der erste Schritt, nicht der letzte. Frueher stand hier ein
   Gast-Knopf und der Name wurde erst nach einem Lauf verlangt: von rund 7.000
   Besuchern in einer Woche haben zwoelf einen genommen. Das Feld sieht aus wie
   ein Benutzerkonto, weil es genau das ist. */
/* min-width:0 an beiden Stellen, sonst nimmt sich das Raster-Element als
   Mindestbreite den Inhalt: 36 Kacheln nebeneinander sind rund 1650px, die
   Zeile wurde breiter als der Bildschirm und hat den Pfeilknopf hinaus
   geschoben. Auf dem iPhone war er nicht mehr erreichbar. */
.login__right > *{ min-width:0; }
.user--name{ align-items:flex-start; min-width:0; }
.user--name .user__meta{ flex:1; min-width:0; }
.user--name .user__go{ align-self:center; border:0; cursor:pointer; font-family:inherit; }
/* Wer wiederkommt, klickt einmal, und der Knopf sagt das mit einem Wort
   statt mit einem Pfeil. Dreissig Pixel reichen dafuer nicht. */
.user--name.is-back .user__go{
  width:auto; min-width:66px; padding:0 12px; height:32px;
  font-size:13px; font-weight:600; letter-spacing:.2px;
}
.user--name .user__go:hover{ filter:brightness(1.12); }
.user__in{
  display:block; width:100%; margin:4px 0 3px;
  /* 16px, sonst zoomt iOS beim Antippen und der Fokus geht verloren. */
  font:16px var(--ui, inherit); color:#0b1c33;
  padding:5px 8px; border-radius:3px;
  border:1px solid #6f93c9; border-top-color:#3c5f93;
  background:#fff; box-shadow:inset 1px 1px 2px rgba(0,0,0,.18);
}
.user__in:focus{ outline:2px solid var(--slime); outline-offset:1px; }
/* Sechsunddreissig Gesichter in einer Reihe, die man schiebt. Ein zweiter
   Bildschirm dafuer waere genau die Huerde, die wir gerade abgebaut haben:
   der Name ist Pflicht, das Gesicht ist ein Tipper im Vorbeigehen. */
.faces{
  display:flex; gap:6px; margin:2px 0 4px; padding-bottom:4px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
}
.faces::-webkit-scrollbar{ height:6px; }
.faces::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.35); border-radius:3px; }
.faces__one{
  flex:none; width:40px; height:40px; padding:0; cursor:pointer;
  border:2px solid transparent; border-radius:4px; background:#0d2b57;
  overflow:hidden; scroll-snap-align:start; line-height:0;
}
.faces__one img{ width:100%; height:100%; object-fit:cover; }
.faces__one:hover{ border-color:rgba(255,255,255,.6); }
.faces__one.is-picked{ border-color:var(--slime); box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.faces__one:focus-visible{ outline:2px solid #fff; outline-offset:1px; }
.user__meta i.is-bad{ color:#ffd0cc; }
.user--quiet{ padding-top:4px; padding-bottom:4px; opacity:.72; }
.user--quiet:hover{ opacity:1; }
.user--quiet .user__meta b{ font-size:14px; }

/* ══════════════════════════════════════════════════════════════
   4 · DESKTOP
   ══════════════════════════════════════════════════════════════ */
.desktop{
  position:fixed; inset:0; display:none;
  overflow:hidden;
}
.desktop.is-on{ display:block; }
/* While the on-screen keyboard is up the desktop is only as tall as what is
   left of the screen — see keyboardWatch() in main.js. The taskbar and the
   window host are positioned against this box, so they come up with it and
   the message field stays above the keys instead of behind them. */
.desktop.has-keys{ bottom:auto; top:var(--vvtop, 0px); height:var(--vvh, 100%); }
.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);
}
/* The opening animation used to be declared on .win itself, so every window
   carried an animation-name for as long as it was open. WebKit keeps such an
   element on a compositing layer, and a text field inside one does not raise
   the keyboard on iOS. It now rides on a class that comes off the moment the
   animation is done, so nothing above a field keeps a transform alive. */
.win.is-opening{ 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; }
/* Das gewaehlte Gesicht sitzt am Zeiger, wo vorher nur ein grauer Pfeil war.
   toad_online liefert es ohnehin mit, es hat nur nie jemand benutzt. */
.ghost__face{
  flex:none; width:22px; height:22px; margin-top:9px; margin-left:-1px;
  border:1px solid #ffffe1; border-radius:3px; object-fit:cover;
  background:#0d2b57; box-shadow:0 1px 3px rgba(0,0,0,.45);
}
.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);
  /* Das Menue haengt an der Leiste und waechst nach OBEN. Auf dem Handy
     stehen alle Eintraege in einer Spalte — rund 1000px in einem Bildschirm,
     der 553 hat. Was oben herausragte, lag ausserhalb des Desktops (der
     `overflow:hidden` traegt) und war mit keiner Geste zu erreichen: nach
     oben ueberstehende absolute Kaesten erzeugen keine Bildlaufflaeche.
     Also die Hoehe auf den Platz ueber der Leiste begrenzen und die Spalten
     selbst rollen lassen. `100%` statt `100vh`, damit es mitgeht, wenn die
     Tastatur den Desktop kleiner macht. */
  max-height:calc(100% - var(--tb-h));
  display:flex; flex-direction:column;
  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{
  flex:none;
  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;
  min-height:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.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{
  flex:none;
  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
   ══════════════════════════════════════════════════════════════ */
/* Die Kroete steht immer da; nur die Blase kommt und geht. Deshalb hat der
   Kasten keine feste Breite mehr -- ohne Blase ist er so breit wie sie. */
/* Eine Sprechblase ist Beiwerk und darf nichts blockieren, was darunter
   liegt. Auf dem Handy sitzt die Kroete jetzt unten rechts, und dort steht
   im Messenger das Eingabefeld: Kroete ab 556px, Feld bis 565px. Die neun
   Pixel Ueberschneidung reichen, um einen Fingertipp zu verschlucken, und
   bei einer laengeren Blase wird daraus die halbe Zeile. Also faengt der
   Kasten keine Tipps mehr ab, nur noch die Kroete selbst und das Kreuz. */
.clip{ position:absolute; right:14px; bottom:calc(var(--tb-h) + 12px); z-index:450;
       width:230px; display:flex; flex-direction:column; align-items:flex-end;
       pointer-events:none; }
.clip__toad, .clip__x{ pointer-events:auto; }
.clip[hidden]{ display:none; }
.clip__bubble[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; }
/* Der Toad ist ein Knopf: antippen und er macht auf. */
.clip__toad{
  display:block; width:64px; height:64px; padding:0;
  margin:6px 8px 0 auto; border-radius:50%;
  border:2px solid #fff; box-shadow:2px 3px 8px rgba(0,0,0,.45);
  background:#fff; cursor:pointer; overflow:hidden;
}
/* ⚠ Das BILD wackelt, nicht der Knopf. Solange der Knopf selbst wanderte, ging
   ein Klick daneben, der auf die Mitte gezielt hatte -- im Prueflauf messbar,
   und einem Menschen geht es mit einem wandernden Ziel nicht besser. Das
   Trefferfeld steht jetzt still und nur der Inhalt bewegt sich. */
.clip.is-talking .clip__toad img{ animation:bob 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .clip.is-talking .clip__toad img{ animation:none; } }
.clip__toad img{ display:block; width:100%; height:100%; object-fit:cover; }
.clip__toad:hover{ box-shadow:0 0 0 3px #74c13b, 2px 3px 8px rgba(0,0,0,.45); }
.clip__toad:active{ transform:translateY(1px); }
@keyframes bob{ 50%{ transform:translateY(-6px) rotate(-5deg); } }

/* ══════════════════════════════════════════════════════════════
   8b · THE TOAD'S LITTLE WINDOW
   Poke the toad in the corner and he opens up. Same answers as @toad in
   the Messenger — one toad, two doors — but this one writes nothing to
   the room, so you can ask him something silly without an audience.
   ══════════════════════════════════════════════════════════════ */
.ask{
  position:fixed; right:16px; bottom:calc(var(--tb-h) + 12px); z-index:945;
  width:300px; max-width:calc(100vw - 24px);
  display:flex; flex-direction:column;
  background:var(--face); border:2px solid var(--frame); border-radius:7px 7px 5px 5px;
  box-shadow:0 14px 34px rgba(0,0,0,.42);
  overflow:hidden;
}
.ask[hidden]{ display:none; }
.ask__bar{
  display:flex; align-items:center; gap:7px; padding:5px 6px 5px 7px;
  background:linear-gradient(180deg,var(--title-3) 0%,var(--title-2) 8%,var(--title-1) 42%,var(--title-1) 100%);
  color:#fff; font:700 12px var(--ui); text-shadow:1px 1px 1px rgba(0,0,0,.45);
}
.ask__face{ width:20px; height:20px; border-radius:50%; border:1px solid #ffffff9c; background:#fff; }
.ask__state{ margin-left:auto; font-weight:400; font-size:10.5px; color:#dbe9ff;
             overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Ein leiser Weg, das Gespraech wegzuwerfen. Leise, weil man ihn selten
   braucht und er nicht mit dem Schliessen-Kreuz um Aufmerksamkeit ringen soll. */
.ask__weg{
  padding:1px 6px; border:1px solid #ffffff5c; border-radius:3px;
  background:#ffffff1f; color:#dbe9ff; font:400 10.5px var(--ui); cursor:pointer;
}
.ask__weg:hover{ background:#ffffff33; color:#fff; }

/* Die Linie zwischen dem alten Gespraech und dem neuen. */
.ask__wieder{
  align-self:center; margin:2px 0 1px; padding:1px 9px;
  border-radius:9px; background:#eef2f7; border:1px solid #dde5ee;
  color:#8a94a3; font-size:10.5px; letter-spacing:.03em;
}

.ask__x{
  width:20px; height:18px; border:1px solid #ffffff88; border-radius:3px;
  background:linear-gradient(180deg,#f07d6a,#d83a20 55%,#a92510);
  color:#fff; font:700 11px/1 var(--ui); cursor:pointer; display:grid; place-items:center;
}
.ask__log{
  flex:1; min-height:96px; max-height:min(46vh, 300px); overflow-y:auto;
  padding:9px; background:#fff; display:flex; flex-direction:column; gap:7px;
  font:12.5px/1.5 var(--ui); color:#123;
}
.ask__line{ max-width:88%; padding:6px 9px; border-radius:9px; word-break:break-word; }
.ask__line--me{ align-self:flex-end; background:#dff0d8; border:1px solid #b6ddb0; }
.ask__line--toad{ align-self:flex-start; background:#ffffe1; border:1px solid #d9d9a8; }
/* Drei Punkte, waehrend er nachdenkt. Er denkt nicht wirklich nach, aber
   eine Antwort, die in null Millisekunden dasteht, liest sich wie ein Formular. */
.ask__dots span{ display:inline-block; animation:askdot 1s infinite; }
.ask__dots span:nth-child(2){ animation-delay:.15s; }
.ask__dots span:nth-child(3){ animation-delay:.3s; }
@keyframes askdot{ 0%,60%,100%{ opacity:.25 } 30%{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .ask__dots span{ animation:none; opacity:.6; } }

.ask__chips{ display:flex; flex-wrap:wrap; gap:5px; padding:7px 9px 0; background:#fff; }
.ask__chip{
  padding:3px 9px; border:1px solid #b8c8da; border-radius:11px;
  background:linear-gradient(180deg,#f8fbff,#e6eef8); color:#2b4a6b;
  font:11px var(--ui); cursor:pointer;
}
.ask__chip:hover{ border-color:#74c13b; color:#2c5a14; }

.ask__foot{ display:flex; gap:6px; padding:8px 9px 9px; background:#fff; }
.ask__in{
  flex:1; min-width:0; padding:5px 7px; font:12.5px var(--ui); color:#123;
  border:1px solid #7b9ebd; border-top-color:#3c5a76;
}
.ask__go{
  width:32px; border:1px solid #9a9a8e; border-bottom-width:2px; border-radius:3px;
  background:linear-gradient(180deg,#fff,#e3dfd0); color:#222; font:700 12px var(--ui);
  cursor:pointer;
}
.ask__go:active{ background:#d8d4c4; }

/* Auf dem Handy nimmt er die Breite und stellt sich ueber die Taskleiste. */
@media (max-width:640px){
  .ask{
    left:8px; right:8px; width:auto;
    bottom:calc(var(--tb-h,0px) + 8px + env(safe-area-inset-bottom,0px));
  }
  .ask__log{ max-height:38vh; }
}

/* Der Tap-Bericht. Nur mit ?diag=1, liegt ueber allem, damit man ihn auch
   dann noch lesen kann, wenn sonst nichts mehr geht. */
.diag{ position:fixed; left:6px; right:6px; bottom:6px; z-index:99999;
       background:#0d1117; border:2px solid #74c13b; border-radius:6px;
       box-shadow:0 10px 30px rgba(0,0,0,.6); }
.diag[hidden]{ display:none; }
.diag__bar{ display:flex; align-items:center; gap:8px; padding:4px 6px;
            background:#74c13b; color:#0d1117; font:700 11px var(--ui); }
.diag__x{ margin-left:auto; border:0; background:#0d1117; color:#74c13b;
          border-radius:3px; padding:1px 7px; font:700 11px var(--ui); cursor:pointer; }
.diag__out{ margin:0; padding:7px 8px; max-height:38vh; overflow:auto;
            color:#c9f5b0; font:10.5px/1.45 var(--mono); white-space:pre-wrap; }

/* ══════════════════════════════════════════════════════════════
   DER PFP-ORDNER
   Ein Ordner voller Gesichter. Raster zum Stoebern, dann eines gross mit
   zwei Wegen hinaus: in den Raum, oder auf die Festplatte.
   ══════════════════════════════════════════════════════════════ */
.pfp { min-height:100%; display:flex; flex-direction:column; background:#fff;
       padding:12px 14px 14px; font:12px var(--ui); color:#123; }
.pfp__lead { margin:0 0 11px; color:#3b4450; line-height:1.55; }
.pfp__grid { flex:1; min-height:0; display:grid; gap:9px;
             grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); }
.pfp__grid[hidden] { display:none; }
.pfp__one {
  padding:0; border:1px solid #cdd3da; border-radius:6px; background:#f7f9fc;
  cursor:pointer; overflow:hidden; display:flex; flex-direction:column;
  align-items:center; gap:0;
}
.pfp__one img { width:100%; height:auto; display:block; aspect-ratio:1; object-fit:cover; }
.pfp__one span { display:block; width:100%; padding:3px 4px; font-size:10.5px;
                 color:#4a5560; text-align:center; white-space:nowrap;
                 overflow:hidden; text-overflow:ellipsis; }
.pfp__one:hover { border-color:#74c13b; box-shadow:0 0 0 2px #74c13b33; }
.pfp__one:active { transform:translateY(1px); }

.pfp__pick { flex:1; min-height:0; display:flex; gap:16px; align-items:flex-start; }
.pfp__pick[hidden] { display:none; }
.pfp__big { width:min(260px, 46%); aspect-ratio:1; object-fit:cover;
            border:2px solid #7c879a; border-radius:8px; background:#eef2f7; }
.pfp__side { flex:1; min-width:0; display:flex; flex-direction:column;
             align-items:flex-start; gap:9px; }
.pfp__name { font:700 15px var(--ui); color:#12365e; }
.pfp__side .xp-btn { min-width:170px; text-align:center; }
.pfp__side a.xp-btn { text-decoration:none; line-height:1.9; }
.pfp__note { min-height:1.2em; font-size:11.5px; color:#2c5a14; }

/* Auf dem Handy untereinander: nebeneinander bleibt vom Bild nichts uebrig. */
@media (max-width:640px){
  .pfp__grid { grid-template-columns:repeat(auto-fill, minmax(78px, 1fr)); }
  .pfp__pick { flex-direction:column; align-items:stretch; gap:11px; }
  .pfp__big { width:min(220px, 62%); align-self:center; }
  .pfp__side { align-items:stretch; }
  .pfp__side .xp-btn { min-width:0; }
}

/* ══════════════════════════════════════════════════════════════
   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 — TOAD 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(--toad); 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(--toad),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 · TOAD 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{ margin-inline:auto; width:100%; }
  .login__right{ max-width:none; }
  /* ⚠️ Seit der Wallet-Knopf hier weg ist (12-09), stehen in dieser Spalte nur
     noch zwei Dinge statt drei. `align-items:center` schob sie in die Mitte
     ihrer Zeile und riss unter "To begin, select user" ein Loch von einem
     Drittel Bildschirm auf -- es sah aus, als fehle etwas. Sie ruecken jetzt
     nach oben, direkt unter die Aufforderung. */
  .login__body{ align-items:start; }
  .login__bar--bottom p{ display:none; }

  /* This used to say height:auto and bottom:auto, left over from when the
     icons were laid out with flexbox. They are absolutely positioned now,
     so the container collapsed to zero height — and the script divides that
     height by the cell size to decide how many rows fit. One row. Twenty-one
     icons in a line running off the side of the phone, sixteen of them
     unreachable. Keep the box the size of the screen. */
  .icons{ right:8px; bottom:calc(var(--tb-h) + 8px); }
  .icon{ width:76px; }

  .win{ inset:0 !important; width:auto !important; height:auto !important; border-radius:0; border-width:0; }
  /* The close button was 21 pixels square, four below the top edge and
     three from the right. Three problems at one spot, and all three are
     about being HIT rather than about reacting:

       · 21 is under half of the 44 Apple asks for;
       · the page runs viewport-fit=cover and nothing anywhere compensates
         for the top inset, so on a notched iPhone the button sat inside
         the strip iOS keeps for itself and the taps went to the system;
       · three pixels from the right edge is where Safari watches for the
         back swipe.

     Measured before the change: 21x21 at y=4, 3px from the right, and the
     window closed in 0ms once the button was actually hit. It was never
     slow. It was being missed. */
  /* The bar itself gets taller on a phone, and that is the part that
     actually fixes it. Growing only the hit area does almost nothing
     here: above the button is the edge of the screen, and below it the
     window body paints over anything that sticks out. A 29px bar simply
     has no room to be hit in. 44 does. */
  .win__bar{
    border-radius:0;
    height:auto; min-height:44px;
    padding-top:env(safe-area-inset-top, 0px);
  }
  /* Except while the keys are up: there every pixel belongs to the line
     you are typing, and nobody closes a window mid-sentence. */
  .desktop.has-keys .win__bar{ min-height:29px; }
  /* Off the edge Safari is watching. */
  .win__btns{ margin-right:5px; }
  .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 toad so it never crowds the icons. */
  .clip{ width:196px; right:10px; }
  .clip__toad{ width:52px; }
  .clip__bubble{ font-size:12px; }
  .help__row{ grid-template-columns:1fr; }
  .viewer__bar{ flex-wrap:wrap; }

  /* An iPhone SE has 553px, and the keyboard takes over 300 of them. What is
     left has to hold the taskbar, the title bar and the whole messenger.
     Everything in the messenger below the log is flex:none — the header, the
     emoji strip, the compose row, the rule paragraph — so once the buddy list
     has collapsed to nothing there is nobody left to give way, and the compose
     row is pushed out of the window body: behind the status strip on some
     sizes, behind the taskbar on others. It is still in the layout and it
     still takes focus. You just cannot see it, which reads exactly like the
     box that refused to be typed in.

     So while the keys are up the messenger keeps only what you write and read
     with. All of it comes back the moment the keyboard drops. */
  .desktop.has-keys .win__status,
  .desktop.has-keys .msn__head,
  .desktop.has-keys .msn__emos,
  .desktop.has-keys .msn__rule { display:none; }
  /* The toad in the corner sits just above the taskbar. On the smallest
     screens that is exactly where the compose row ends up once the keys are
     up — measured: the balloon lay on the send button. He steps aside while
     you are typing and is back as soon as the keyboard drops. */
  .desktop.has-keys .clip { display:none; }
  /* and if it is still too tight, the tools row gives up its contents rather
     than its height. Letting it shrink clipped the name field: the field kept
     its box but the row ended above it, so the middle of "as [your name]" fell
     inside the message box below and every tap on the name landed in the wrong
     field. While the keys are up, emoji, Draw and Nudge are not what you need
     — the name and the line you type in are, and both now keep their place. */
  .desktop.has-keys .msn__tools { flex:none; min-height:0; overflow:visible; }
  .desktop.has-keys .msn__emos,
  .desktop.has-keys #chDraw,
  .desktop.has-keys #chNudge,
  .desktop.has-keys #chQueue { display:none; }
  .desktop.has-keys .msn__nick { margin-left:0; width:100%; }
}

/* The button keeps its size; only the part that answers a thumb grows.
   A visibly bigger X would look wrong on a window that is imitating a
   machine from 2001 — but nothing says the hit area has to be what you
   can see. Coarse pointers only, so a mouse does not get an invisible
   44px pad sitting over the title bar. */
@media (max-width:820px) and (pointer:coarse){
  .win__btn{ position:relative; }
  .win__btn::after{
    content:''; position:absolute;
    left:50%; top:50%; width:44px; height:44px;
    transform:translate(-50%,-50%);
  }
}

@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;
  background:#1d2b1a;
}

/* 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; }

/* ══════════════════════════════════════════════════════════════
   TOAD 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; }
}

/* ── Toad 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; }

/* Der Gesichts-Knopf neben dem Namensfeld. EIGENER Name, weil .msn__face
   bereits das Bild neben jeder Nachricht ist: dieselbe Klasse ein zweites Mal
   zu belegen haette jedes Gesicht im Chat mit Innenabstand, runden Ecken und
   einem Zeiger-Cursor versehen. Klein gehalten, weil die Leiste auf einem
   Handy unter der Tastatur ohnehin eng wird. */
.msn__pick{
  display:inline-flex; align-items:center; gap:4px;
  margin-left:6px; padding:1px 6px;
  border:1px solid #7f9db9; border-radius:3px;
  background:linear-gradient(#fff,#e8eef5);
  cursor:pointer; font-size:11px; color:#3b4450; line-height:1.6;
  white-space:nowrap;
}
.msn__pick:hover{ background:linear-gradient(#fff,#dbe6f2); }
.msn__pick-img{
  width:18px; height:18px; object-fit:cover; display:block;
  border:1px solid #b8c8da; background:#fff;
}
.msn__pick.is-set{ padding:1px 2px; }        /* Bild gewaehlt: das Wort weicht */

.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-toad { background:#f0f9ec; border-left:3px solid #74c13b; padding:3px 7px; margin-left:-3px; }
.msn__line.is-toad 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 */
/* ⚠ `overflow:hidden` ist hier kein Schoenheitsfehler, sondern der Unterschied
   zwischen einem benutzbaren und einem toten Chat.

   Steht die Tastatur auf einem kleinen Handy (iPhone SE: 553px, Tastatur 380),
   bleiben dem Schreibtisch 173px. Das Fenster faellt auf seine Mindesthoehe,
   .msn__body wird zu Hoehe NULL gedrueckt -- und ohne diese Zeile bleibt der
   Nachrichtenraum darin trotzdem 16px hoch und quillt heraus, mitten ueber die
   Namenszeile. Sichtbar ist er nicht, aber er faengt den Tipp ab, der ins
   Namensfeld sollte. Ohne Namen weist toad_say ab: die Knoepfe reagieren, und
   es passiert nichts. Genau so hat Mehdi es gemeldet.

   Gemessen, nicht vermutet: elementFromPoint in der Mitte von #chNick lieferte
   #chLog. */
.msn__body { flex:1; min-height:0; display:flex; overflow:hidden; }
.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; }
/* ══════════════════════════════════════════════════════════════
   What's New
   Die Blase sagt eine Zeile und ist weg. Hier steht alles mit Datum, und
   was seit dem letzten Besuch dazukam, traegt einen gruenen Punkt.
   ══════════════════════════════════════════════════════════════ */
.news { min-height:100%; background:#fff; padding:12px 14px 16px; font:12px var(--ui); color:#123; }
.news__lead { margin:0 0 12px; color:#3b4450; line-height:1.55; }
.news__list { list-style:none; margin:0; padding:0; }
.news__day {
  margin:14px 0 6px; padding-bottom:3px; border-bottom:1px solid #e3e9f0;
  font:700 11px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:#7c879a;
}
.news__list > .news__day:first-child { margin-top:0; }
.news__item {
  display:grid; grid-template-columns:72px minmax(0,1fr); gap:4px 10px;
  align-items:start; padding:9px 6px 10px; border-bottom:1px solid #e6e9ed;
  font-size:12.5px; line-height:1.5; color:#28303a;
}
.news__item:last-child { border-bottom:0; }
.news__k {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding:3px 4px; border-radius:3px; background:#747d87; color:#fff;
  font:700 9px/1.5 var(--ui); letter-spacing:.05em; text-align:center;
}
.news__item--chat .news__k { background:#2f6bbd; }
.news__item--games .news__k { background:#2f8a3f; }
.news__item--canal .news__k { background:#805096; }
.news__item--token .news__k { background:#a66b18; }
.news__body { min-width:0; }
.news__h { display:block; color:#14304a; font:700 12.5px/1.4 var(--ui); }
.news__t { display:block; margin-top:2px; color:#45525f; }
.news__item.is-new .news__h { color:#185914; }
.news__tag {
  display:inline-block; margin-left:6px; padding:0 6px; border-radius:9px;
  background:#eaf7e2; border:1px solid #b6ddb0; color:#2c5a14;
  font:700 10px var(--ui); font-style:normal; letter-spacing:.04em;
}
@media (max-width:430px) {
  .news__item { grid-template-columns:1fr; gap:3px; }
  .news__k { justify-self:start; padding:3px 7px; }
}

/* The inexpensive exit from Paint: sending a drawing is not a prerequisite
   for getting back to the room that opened it. */
.pt-back { font-weight:700; }

/* ══════════════════════════════════════════════════════════════
   The suggestion box
   ══════════════════════════════════════════════════════════════ */
.sug { display:flex; flex-direction:column; gap:9px; padding:12px 14px 14px;
       min-height:100%; background:#fff; font:12px var(--ui); color:#123; }
.sug__lead { margin:0; color:#3b4450; line-height:1.55; }
.sug__row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sug__lbl { color:#5d646e; }
.sug__sel, .sug__in {
  padding:4px 6px; font:12px var(--ui); color:#123;
  border:1px solid #7b9ebd; border-top-color:#3c5a76; background:#fff;
}
.sug__in { flex:1; min-width:120px; }
.sug__body {
  flex:1; min-height:130px; resize:vertical; padding:8px 9px;
  font:13px/1.55 var(--ui); color:#123;
  border:1px solid #7b9ebd; border-top-color:#3c5a76;
}
.sug__foot { display:flex; align-items:center; gap:10px; }
.sug__note { flex:1; color:#2f6b3a; min-height:1.3em; }
.sug__count { color:#8a94a3; font-family:var(--mono); font-size:10.5px; }
.sug__small { margin:0; color:#6b7280; font-size:11px; line-height:1.5; }

/* Was man selbst geschrieben hat, im Vorschlagsfenster -- und was das Team
   geantwortet hat. Ein Kasten ohne Rueckweg ist ein Briefkasten. */
.sug__mine { margin-top:14px; padding-top:12px; border-top:1px solid #dfe6ef; }
.sug__mine[hidden] { display:none; }
.sug__minehead { margin:0 0 8px; font:700 11px var(--ui); letter-spacing:.05em;
                 text-transform:uppercase; color:#7c879a; }
.sug__minelist { list-style:none; margin:0; padding:0; display:flex;
                 flex-direction:column; gap:9px; }
.sug__mineitem { padding:8px 9px; background:#f7f9fc; border:1px solid #dde5ee; border-radius:5px; }
.sug__minetop { display:flex; align-items:center; gap:7px; font-size:11px; color:#12365e; }
.sug__minetop b { padding:1px 6px; border-radius:3px; background:#7c879a; color:#fff;
                  font-size:10.5px; letter-spacing:.03em; }
.sug__minetop i { margin-left:auto; font-style:normal; color:#8a94a3; font-size:10.5px; }
.sug__minebody { margin:5px 0 0; font-size:12.5px; line-height:1.5; color:#28303a;
                 white-space:pre-wrap; word-break:break-word; }
.sug__link{ color:#0a58a6; text-decoration:underline; word-break:break-all; }
.sug__link:hover{ color:#0b6fd0; }
.sug__waiting { margin:6px 0 0; font-size:11.5px; color:#8a94a3; font-style:italic; }
.sug__reply { margin:8px 0 0; padding:7px 9px; background:#eef8e8;
              border:1px solid #b6ddb0; border-radius:5px; }
.sug__reply.is-new { border-color:#74c13b; box-shadow:0 0 0 2px #74c13b26; }
.sug__reply b { display:block; font-size:11px; color:#2c5a14; letter-spacing:.03em; }
.sug__reply p { margin:3px 0 0; font-size:12.5px; line-height:1.5; color:#1f3b12;
                white-space:pre-wrap; word-break:break-word; }

/* Das Antwortfeld auf der Schreibtischseite. */
.msn__notereply {
  width:100%; margin-top:2px; padding:6px 7px; resize:vertical; min-height:44px;
  font:12.5px/1.5 var(--ui); color:#123;
  border:1px solid #7b9ebd; border-top-color:#3c5a76;
}
.msn__noteacts { display:flex; align-items:center; gap:7px; margin-top:2px; }
.msn__notesent { margin-left:auto; font-style:normal; font-size:10.5px; color:#2c5a14; }

/* A note in the box, on the desk side. Nothing here is ever innerHTML: every
   word of it was written by a stranger. */
.msn__note { display:flex; flex-direction:column; gap:6px; align-items:flex-start;
             padding:9px 10px; background:#fff; border:1px solid #cdd3da; border-radius:5px; }
.msn__note.is-done { opacity:.55; }
.msn__notehead { display:flex; align-items:center; gap:7px; font-size:11.5px; color:#12365e; }
.msn__notehead i { color:#8a94a3; font-style:normal; font-size:10.5px; margin-left:auto; }
.msn__notetag { padding:1px 6px; border-radius:3px; font-size:10.5px; letter-spacing:.03em;
                color:#fff; background:#7c879a; }
.msn__notetag--idea { background:#2f7d4f; }
.msn__notetag--bug  { background:#b3402c; }
.msn__notebody { margin:0; font-size:12.5px; line-height:1.55; color:#28303a;
                 white-space:pre-wrap; word-break:break-word; }

/* The second list: who was here a moment ago. Greyed on purpose — it has to
   read as an absence at a glance, or it is just a longer list of people who
   are not there. A hairline above it does the separating; a second heading in
   full strength would compete with "In the pond". */
.msn__gone { margin-top:10px; padding-top:8px; border-top:1px solid #dfe6ef; }
.msn__gone[hidden] { display:none; }
.msn__listhead--gone { color:#8a94a3; font-weight:400; }
.msn__buddy.is-gone { opacity:.55; }
.msn__buddy.is-gone .msn__buddyface { filter:grayscale(1); }
.msn__buddy.is-gone .msn__buddydot { background:#b6bec9; box-shadow:none; }
.msn__buddyago { margin-left:5px; font-size:10.5px; font-style:normal; color:#94a0ae; }

.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:toad-wait 1.4s ease-in-out infinite; }
@keyframes toad-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 Toad 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-toad { color:rgba(255,255,255,.82); font-style:italic; }
.gchat__line.is-toad 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; }

/* Der Weg ins Spiel, an der Zeile die davon erzaehlt. Bewusst kein
   dezenter Knopf wie die Meldeflagge: er soll gefunden werden, ohne dass
   man die Zeile erst mit der Maus streift -- auf dem Handy gibt es kein
   Hovern. */
.msn__join {
  display:inline-block; margin:4px 0 0 6px; padding:1px 9px;
  font:700 10.5px/1.7 Tahoma,sans-serif; letter-spacing:.05em;
  color:#14340f; background:linear-gradient(#c7f36a,#8fd132);
  border:1px solid #5d9020; border-radius:3px; cursor:pointer;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.msn__join:hover  { background:linear-gradient(#d4ff7c,#9bdd3c); }
.msn__join:active { background:linear-gradient(#8fd132,#c7f36a); box-shadow:none; }

/* ── 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; }
/* Umbrechen, nicht abschneiden. Mit dem Suggestions-Reiter brauchte die Leiste
   573px und hatte 520 — "Toad Run" war weg und "Suggestions" stand auf der
   Kante, also war der Kasten fuer den einzigen Menschen, der ihn lesen soll,
   schlicht unsichtbar. Ein Reiter, den man nicht sieht, gibt es nicht. */
.msn__gatebar { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;
                padding:6px 8px;
                background:linear-gradient(#eaf3fd,#cfe3f8); border-bottom:1px solid #8fb4d9; }
/* Nicht mehr dehnen: gestreckt schob die Ueberschrift die Reiter in die
   zweite Zeile, obwohl daneben Platz war. */
.msn__gatebar b { flex:none; font-size:12px; color:#12365e; margin-right:2px; }
.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; }
/* Not a tab: a door. Left of everything, in the colour of the title bar,
   so it is the first thing the eye lands on when the desk opens. */
.msn__gateback {
  flex:none; padding:4px 10px; border:1px solid #0a3ea8; border-radius:4px;
  background:linear-gradient(180deg,#3f93ff,#0058e6 55%,#0047c2);
  color:#fff; font:700 11px var(--ui); cursor:pointer;
  text-shadow:1px 1px 1px rgba(0,0,0,.4);
}
.msn__gateback:hover { filter:brightness(1.1); }
.msn__gateback:active { filter:brightness(.92); }
@media (max-width:640px){
  .msn__gatebar { flex-wrap:wrap; }
  .msn__gateback { order:-1; width:100%; padding:8px 10px; font-size:13px; }
  .msn__gatebar b { flex:none; }
}
.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; }

/* ── Toad 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 when a window is open: every window on a
     phone has its input at the bottom, and a balloon over the message box is
     a balloon in the way of typing.

     On the bare desktop the opposite is true — the top IS the icons, and the
     welcome balloon covered the first row of them, POND.EXE included. So the
     balloon carries `is-low` when there is nothing open, and drops to just
     above the taskbar instead. It used to say nothing at all on a phone,
     which is why neither case was ever noticed.

     Full width and in front, on purpose: it is the one thing here with news
     to deliver. It closes with a tap and leaves by itself after 11 seconds. */
  /* Sie stand oben und quer ueber der ganzen Breite, und bei offenem
     Messenger lag sie damit auf dessen Kopfzeile und der Namensleiste. Der
     Gedanke dahinter war, das Eingabefeld unten frei zu halten. Der Preis
     war zu hoch: die Kroete gehoert in die Ecke, klein, und verdeckt dort
     nichts als ein Stueck Hintergrund. Sie geht nach elf Sekunden ohnehin
     von selbst, und bei aufgeschobener Tastatur ist sie ganz weg (weiter
     oben, .desktop.has-keys .clip). */
  .clip {
    position:fixed; top:auto; left:auto;
    bottom:calc(var(--tb-h,0px) + 8px + env(safe-area-inset-bottom,0px));
    right:8px; width:auto; max-width:min(78vw, 320px); z-index:940;
    display:flex; align-items:flex-end; gap:6px; flex-direction:column;
  }
  .clip.is-low { top:auto; }
  .clip__bubble { font-size:12.5px; padding:10px 30px 10px 12px; }
  /* Der Zipfel zeigt hinunter auf die Kroete, die darunter sitzt. */
  .clip__bubble::after {
    top:auto; bottom:-9px; left:auto; right:20px; transform:none;
    border:9px solid transparent; border-top-color:#ffffe1; border-bottom:0;
  }
  .clip__x { font-size:15px; top:2px; right:7px; padding:2px 5px; }
  /* Kleiner als vorher: 44 statt 52. In der Ecke soll sie da sein, nicht auffallen. */
  .clip__toad { width:44px; height:44px; margin:0; flex:0 0 auto; }
  /* Ohne Blase steht nur die Kroete da -- dann braucht der Kasten auch nur
     ihre Breite, sonst faengt er Tipps ueber die halbe Zeile ab. */
  .clip:not(.is-talking) { left:auto; width:auto; }

  /* 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; }
  /* Lying down, the second list is not below the first but after it, so the
     hairline turns on its side and the top margin goes away. */
  .msn__gone { display:flex; align-items:center; gap:8px; flex:none;
               margin:0 0 0 4px; padding:0 0 0 10px;
               border-top:0; border-left:1px solid #dfe6ef; }
  .msn__buddyago { margin-left:4px; }
  .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; }
}
/* iOS zooms the whole page in the moment a field with type smaller than 16px
   takes focus. That zoom shrinks the visual viewport, keyboardWatch() rebuilds
   the layout under the finger, and the focus is gone before the keyboard is up
   -- which reads as "tapping the box does nothing". No headless engine has
   auto-zoom or a real keyboard, so every geometry check passed while the phone
   kept failing. Sixteen pixels is the exact threshold, so on a phone every
   field that takes text sits on it. The labels around them stay small, so the
   windows still look like Windows. */
@media (max-width:820px){
  input[type=text], input[type=search], input[type=email], input[type=url],
  input[type=tel], input[type=number], input[type=password], input:not([type]),
  textarea, select,
  /* these carry a class of their own, so they need one to be overruled */
  .msn__compose textarea, .msn__nick input, .ask__row input, .ie__addr input {
    font-size:16px;
  }
}

/* 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; }

/* ══════════════════════════════════════════════════════════════
   TOAD LOOSE — the toad on the desktop itself (prototype)
   Sits above the windows and the taskbar so the toad is visible
   standing on them, and below .gamefs (960) so a real game still
   takes the whole screen. Never takes a click: the desktop has to
   stay usable while the toad is out, otherwise moving a window --
   the entire point -- would be impossible.
   ══════════════════════════════════════════════════════════════ */
.loose{ position:fixed; inset:0; z-index:700; pointer-events:none; }
.loose__c{ position:absolute; inset:0; width:100%; height:100%; }
.loose__hud{
  position:absolute; left:50%; top:10px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:5px 6px 5px 11px;
  background:linear-gradient(180deg,var(--title-3) 0%,var(--title-2) 8%,var(--title-1) 42%,var(--title-1) 100%);
  border:1px solid #0a3ea8; border-radius:5px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  color:#fff; font:11px var(--ui); white-space:nowrap;
  pointer-events:auto;
}
.loose__hud b{ font-size:11px; letter-spacing:.06em; text-shadow:1px 1px 1px rgba(0,0,0,.45); }
.loose__stat{ font-family:var(--mono); font-size:11px; color:var(--strap); }
.loose__hint{ opacity:.8; }
.loose__x{
  width:20px; height:18px; border:1px solid #ffffff88; border-radius:3px;
  background:linear-gradient(180deg,#f07d6a,#d83a20 55%,#a92510);
  color:#fff; font:700 11px/1 var(--ui); cursor:pointer; display:grid; place-items:center;
}
@media (max-width:720px){ .loose__hint{ display:none; } }

/* Toad Pong in a window. Filled with flex, NOT position:absolute+inset:0 —
   the window body is not a positioned ancestor, so an absolute child
   escapes to .win and covers the title bar. The chart next door solves it
   the same way, with min-height instead of insets. */
.pong{ display:flex; min-height:100%; background:#0a1412; }
.pong__frame{ display:block; flex:1; width:100%; border:0; }

/* Der Teich fuellt sein Fenster ganz aus. Der Grundton ist der Himmel aus
   teich/index.html -- waehrend die Szene laedt, steht dort sonst Weiss. */
.teich{ display:flex; min-height:100%; background:#dcecf8; }
.teich__frame{ display:block; flex:1; width:100%; border:0; }

/* ══════════════════════════════════════════════════════════════
   Leaderboard tabs + the name box
   ══════════════════════════════════════════════════════════════ */
/* Fuenf Reiter statt vier: bei 14px Innenabstand brach jeder einzelne
   Name auf zwei Zeilen um und die Leiste wurde doppelt so hoch. Enger
   gesetzt und nicht umbrechend passen alle fuenf in eine Zeile -- und
   sollte je ein sechster dazukommen, schiebt die Leiste seitlich statt
   in die Hoehe zu wachsen. */
.lb__tabs{ display:flex; gap:2px; margin:0 0 10px; border-bottom:1px solid #b8c8da;
           overflow-x:auto; scrollbar-width:none; }
.lb__tabs::-webkit-scrollbar{ display:none; }
.lb__tab{
  padding:5px 8px; white-space:nowrap; flex:0 0 auto;
  border:1px solid #b8c8da; border-bottom:0;
  border-radius:4px 4px 0 0; background:linear-gradient(180deg,#f6f4ec,#e3dfd0);
  font:700 11px var(--ui); color:#456; cursor:pointer; position:relative; top:1px;
}
.lb__tab.is-on{ background:#fff; color:#123; }
.lb__pane[hidden]{ display:none; }
/* Die Frist steht ueber der Tabelle und soll auffallen, ohne zu schreien:
   dieselbe Farbe wie ein bezahlter Platz, damit klar ist, worum es geht. */
.lb__frist{
  margin:0; color:#4a6b3c; font:12px/1.45 var(--ui); white-space:nowrap;
}
/* Ueberschrift und Frist auf einer Zeile: die Frist war ein eigener
   Kasten und schob die erste Zeile der Liste noch weiter nach unten. */
.lb__zeile{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin:0 0 8px;
}
.lb__zeile h2{ margin:0; }
/* Die Regeln standen als Wand vor den Namen. Wer sie braucht, klappt sie
   auf; wer sehen will, wer fuehrt, sieht es sofort. */
.lb__regeln{ margin:12px 0 0; font-size:11px; color:#456; }
.lb__regeln summary{ cursor:pointer; color:#2f5a7a; font-weight:700; padding:2px 0; }
.lb__regeln p{ margin:8px 0 0; line-height:1.55; }

/* The name is asked once and then remembered — and it is the same one the
   Messenger uses, because being two people on one desktop is confusing. */
.namebox{ position:fixed; inset:0; z-index:980; display:grid; place-items:center;
          background:rgba(0,0,0,.35); }
.namebox[hidden]{ display:none; }
.namebox__win{ width:min(92vw,360px); background:var(--face); border:2px solid var(--frame);
               border-radius:6px; box-shadow:0 18px 40px rgba(0,0,0,.45); overflow:hidden; }
.namebox__bar{ padding:5px 9px; font:700 13px var(--ui); color:#fff;
  text-shadow:1px 1px 1px rgba(0,0,0,.45);
  background:linear-gradient(180deg,var(--title-3) 0%,var(--title-2) 8%,var(--title-1) 42%,var(--title-1) 100%); }
.namebox__body{ padding:12px 14px 14px; font:12px var(--ui); color:#123; }
.namebox__body p{ margin:0 0 9px; }
.namebox__in{ width:100%; padding:5px 7px; font:13px var(--mono);
              border:1px solid #7b9ebd; border-top-color:#3c5a76; }
.namebox__acts{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }

/* The share button earns a little colour: it is the one control here that
   sends somebody somewhere else, and it should not read as another
   transport key. */
.wmp__btn--x{
  width:auto; padding:0 9px; font:700 11px var(--ui); letter-spacing:.03em;
  background:linear-gradient(180deg,#3a3a3a,#111); color:#fff;
  border-color:#000; text-shadow:none;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
}
/* The mark is drawn, not typed: the 𝕏 character is missing from Tahoma, so a
   glyph would fall back to whatever else the machine has and arrive at the
   wrong weight and size. currentColor keeps it in step with the label. */
.wmp__xmark{ width:10px; height:10px; fill:currentColor; flex:none; }
.wmp__btn--x:hover{ filter:brightness(1.25); }

/* On a cramped screen the icons wrap left-to-right and there may be more
   rows than fit. Let them scroll rather than hiding the tail — a desktop
   you cannot reach the bottom of is worse than one that moves. */
/* Auf einem kurzen Bildschirm stand "Just looking" bei 562px, also unter dem
   Rand: das iPhone SE ist 553px hoch. Wer nicht scrollen konnte, kam an der
   Namensabfrage nicht vorbei, und genau das sollte sie nicht sein. Der
   Anmeldebereich darf jetzt rollen, und ueber dem Feld wird Platz gespart. */
@media (max-height:620px){
  .login__body{ align-items:start; overflow-y:auto; padding:12px 16px; gap:10px; }
  .login__mark{ width:56px; border-width:2px; }
  .login__brand{ margin-top:6px; font-size:26px; }
  .login__brand small{ font-size:10px; }
  .login__edition{ display:none; }
  .login__prompt{ margin-top:8px; font-size:14px; }
  .login__bar--top{ min-height:30px; height:30px; }
  .login__bar--bottom{ min-height:0; padding:6px 12px; }
  .login__bar--bottom p{ display:none; }
  .user{ padding:5px 10px; gap:10px; }
  .user__pic{ width:40px; height:40px; }
  .user__meta b{ font-size:15px; }
  .faces__one{ width:34px; height:34px; }
}

@media (max-width:820px), (max-height:560px){
  .icons{ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
}

.namebox__lbl{ margin:10px 0 4px; font-size:11px; color:#456; }
.namebox__note{ margin:8px 0 0; font-size:11px; line-height:1.45; color:#5a6b7a; min-height:30px; }
.namebox__note.is-bad{ color:#a11; font-weight:700; }

/* The handle on the board is a claim the player typed, not a verified
   identity — styled as a quiet link, not a badge. */
.lb__x{ margin-left:6px; font-weight:400; font-size:11px; color:#3a6ea5; text-decoration:none; }
.lb__x:hover{ text-decoration:underline; }

/* ── Gesamtwertung: Punkte statt Punktzahlen ──────────────────
   Eine Zahl ohne Herkunft laedt zum Zweifeln ein, also steht
   daneben, aus welchen Plaetzen sie entstanden ist.

   Warum ein Raster und keine Flex-Zeile: vorher schrumpfte der Name auf
   seine eigene Laenge, und alles dahinter fing bei jeder Zeile woanders
   an. Wer einen Pokal oder ein Handle hatte, schob seine Herkunft nach
   rechts -- zehn Zeilen, zehn verschiedene Spaltenkanten. Ein Raster hat
   dieselben Kanten fuer alle, egal was in einer Zelle steht. */
/* ⚠⚠ Fuenf Spalten nebeneinander gingen nicht auf. Erst wurde der Name
   auf 26px gequetscht ("D…"), dann bekam er einen Mindestwert -- und
   danach schnitt die Herkunft mitten im Wort ab ("Pulse Ho…"). Am Handy
   verschwanden Zahlbarkeit und Herkunft ganz, per display:none.
   Nebeneinander ist schlicht kein Platz. Also untereinander: Rang, Name,
   Zahlbarkeit und Punkte in der ersten Zeile, die Herkunft darunter ueber
   die volle Breite. Nichts wird mehr ausgeblendet, nichts abgeschnitten. */
/* Ein Spiel fehlt auf dem Brett, das Geld auszahlt -- das gehoert gesagt, wo
   die Namen stehen, nicht in eine Fussnote. */
.lb__aus{
  margin:0 0 8px; padding:7px 9px; font-size:12px; line-height:1.45;
  color:#7a4a00; background:#fff6da; border:1px solid #e6c566; border-radius:4px;
}
.lb__list--all li{
  display:grid;
  grid-template-columns: 26px minmax(0,1fr) auto 46px;
  grid-template-areas: "rang name zahlbar punkte"
                       ".    woher woher   woher";
  align-items:center; column-gap:10px; row-gap:3px;
}
.lb__list--all .lb__rank{ grid-area:rang; }
.lb__list--all li > b{ grid-area:name; }
.lb__list--all .lb__pay{ grid-area:zahlbar; justify-content:flex-end; }
.lb__list--all .lb__score{ grid-area:punkte; }
.lb__list--all li b{ max-width:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Die Spaltenkoepfe sind weg. Sie erklaerten den Pokal, weil ein Spieler
   im Chat fragen musste, was er bedeutet -- diese Aufgabe hat jetzt der
   Haken selbst (Titel) und der Aufklapper darunter. Eine Kopfzeile ueber
   einem zweizeiligen Eintrag beschriftet ohnehin nur die halbe Zeile. */

.lb__from{
  grid-area:woher; min-width:0; text-align:left;
  font-size:11px; color:#5a6b60; line-height:1.4;
}
.lb__list--all .lb__score{ min-width:0; }
.lb__list--all .lb__score i{ font-style:normal; font-size:10px; margin-left:2px; color:#5a6b60; }

/* Zahlbarkeit: eine Zelle, immer an derselben Stelle, mit Wort statt
   Zeichen. Leer bleibt sie, wenn es nichts zu sagen gibt. */
.lb__pay{ display:flex; align-items:center; gap:4px; min-width:0; }
.lb__ok{ font-size:11px; }
.lb__no{ color:#8a7a4a; font-weight:700; font-size:10.5px; white-space:nowrap; }
.lb__at{
  padding:1px 5px; border-radius:4px; min-width:0;
  background:rgba(20,50,30,.07); color:#33513c;
  font:600 10.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
  overflow:hidden; text-overflow:ellipsis;
}
.lb__empty{ display:block !important; }

/* Frueher stand hier display:none fuer Zahlbarkeit und Herkunft -- am
   Handy fehlten damit genau die zwei Angaben, die erklaeren, warum
   jemand vorn steht und ob er das Geld bekommen kann. Jetzt reicht ein
   engerer Abstand: die zweite Zeile traegt, was nicht nebeneinander passt. */
@media (max-width:520px){
  .lb__list--all li{ grid-template-columns: 24px minmax(0,1fr) auto 44px; column-gap:8px; }
  .lb__at{ max-width:88px; }
}

/* Die Zahl am What's-New-Symbol. Sie sitzt auf dem Bild, nicht neben der
   Beschriftung: dort faellt sie auf, ohne das Raster des Schreibtischs zu
   verschieben. */
.icon__img{ position:relative; }
.icon__zahl{
  position:absolute; top:-3px; right:-5px; z-index:2;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border:1px solid #7d1414; border-radius:9px;
  background:linear-gradient(#f05252,#c81e1e); color:#fff;
  font:700 10px/14px Tahoma,sans-serif; font-style:normal; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.45);
}
.icon__zahl[hidden]{ display:none; }

/* Die NEU-Marke. Bewusst anders als die rote Zahl von What's New: die
   zaehlt Ungelesenes, diese sagt "hier ist etwas dazugekommen". Gruen,
   damit man beide auseinanderhaelt, wenn sie nebeneinander stehen. */
.icon__neu{
  position:absolute; top:-4px; right:-8px; z-index:2;
  padding:1px 5px; border:1px solid #2f6b10; border-radius:4px;
  background:linear-gradient(#b6f24a,#6aa81e); color:#10240a;
  font:700 9px/13px Tahoma,sans-serif; font-style:normal; letter-spacing:.06em;
  box-shadow:0 1px 2px rgba(0,0,0,.45);
  animation:neuPuls 2.4s ease-in-out infinite;
}
@keyframes neuPuls{
  0%,100%{ box-shadow:0 1px 2px rgba(0,0,0,.45); }
  50%    { box-shadow:0 1px 2px rgba(0,0,0,.45), 0 0 10px rgba(150,240,60,.9); }
}
@media (prefers-reduced-motion: reduce){ .icon__neu{ animation:none; } }

/* ── „Dir steht ein Blatt zu" ──────────────────────────────────
   Am 05-09 gemessen: 20 Leute haben genug Wochenpunkte fuer ein Blatt im
   Teich und wissen es nicht. Der Satz steht deshalb dort, wo sie ohnehin
   sind -- im Messenger und auf dem Wochenbrett.

   Sichtbar, aber kein Banner: er erscheint nur, wenn er zutrifft, und
   verschwindet von selbst, sobald jemand eingezogen ist -- dann liefert
   die Abfrage nichts mehr. */
.einladung {
  margin: 0 0 8px;
  padding: 7px 10px;
  background: linear-gradient(#f4fbe8, #e6f4d4);
  border: 1px solid #b9d894;
  border-radius: 4px;
  font: 12px/1.45 Tahoma, sans-serif;
  color: #2c4418;
  cursor: pointer;
}
.einladung:hover { background: linear-gradient(#eef8dc, #ddefc4); }
.einladung b { color: #1d3310; }

/* ══ Die Anmeldung mit dem Daumen ═══════════════════════════════════
   Gemessen am 08-09 auf einem iPhone SE (375x553): der Knopf neben dem
   Namensfeld war 30x30 px und das Feld 31 px hoch. Unter 44 px trifft ein
   Daumen nicht zuverlaessig -- und das ist der ALLERERSTE Bildschirm, den
   jeder sieht. Der Gast- und der Wallet-Knopf daneben waren mit 49 und
   51 px schon in Ordnung; nur diese zwei nicht.

   ⚠️ `any-pointer:coarse` statt einer Breitengrenze: entscheidend ist der
   Finger, nicht der Schirm. Ein Tablet mit 1024 px braucht dieselbe
   Flaeche, ein schmales Fenster auf dem Schreibtisch nicht.

   ⚠️ Die Schrift im Feld bleibt bei 16 px -- darunter zoomt iOS beim
   Antippen und der Fokus geht verloren (siehe Kommentar an `.user__in`). */
@media (any-pointer:coarse){
  .user--name .user__go{ width:44px; height:44px; font-size:19px; }
  .user--name .user__in{ min-height:44px; padding:10px 10px; }
}

/* ══════════════════════════════════════════════════════════════
   19 · DIE ORDNER + DAS PASSPORT-FENSTER          (12-09)
   Dreissig Symbole lagen flach auf dem Desktop; auf einem Telefon war das
   eine Wand ohne Anfang. Fuenf Ordner tragen sie jetzt, und ein Ordner ist
   ein gewoehnliches Fenster -- auf dem Telefon steht in css oben schon
   `.win{inset:0}`, er ist dort also das Vollbild-Blatt, ohne dass es dafuer
   einen zweiten Weg durch den Code gaebe.
   ══════════════════════════════════════════════════════════════ */
/* ── Das Ordnerfenster wandert (12-09) ─────────────────────────
   Zurueck · Aufwaerts · Adresszeile · "Other Places", wie im echten XP.
   Leiste und Adresszeile erben ie__toolbar/ie__addr vom Archivo -- ein
   zweites Aussehen fuer dieselbe Sache waere eine zweite Sache. */
.folder--nav{ display:flex; flex-direction:column; min-height:100%; }
.drawer__tb, .drawer__addr{ flex:none; }
.drawer__pfad{
  flex:1; display:flex; align-items:center; gap:6px; min-width:0;
  padding:2px 8px; font-size:11px;
}
.drawer__pfad i{ font-style:normal; color:#8a97a6; }
.drawer__hier{ font-weight:700; color:#12233a; }
.drawer__hoch{
  border:0; background:none; padding:0; font:inherit; color:#1a5fb4;
  cursor:pointer; text-decoration:underline;
}
.drawer__hoch:hover{ color:#0b3f7d; }

.drawer__body{ flex:1; display:flex; min-height:0; }
.drawer__main{ flex:1; display:flex; flex-direction:column; min-width:0; background:#fff; }

.drawer__side{
  flex:none; width:168px; padding:12px 10px; box-sizing:border-box;
  background:linear-gradient(#eaf1fb,#dbe7f7); border-right:1px solid #c3d6ef;
  overflow-y:auto;
}
.drawer__side-kopf{ display:block; font-size:11px; color:#1a3a63; margin-bottom:8px; }
.drawer__orte{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.drawer__ort{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:6px 6px; border:0; border-radius:3px; background:none;
  font:inherit; font-size:11px; color:#12233a; text-align:left; cursor:pointer;
  /* 32px: im Gedraenge der Leiste reicht das, die grossen Ziele stehen im Raster. */
  min-height:32px;
}
.drawer__ort:hover{ background:rgba(255,255,255,.75); }
.drawer__ort:focus-visible{ outline:2px solid #2f6fd0; outline-offset:-2px; }
.drawer__ort-ico{ width:20px; height:20px; flex:none; }

.drawer{
  flex:1; display:grid; gap:8px; padding:14px;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  align-content:start; background:#fff;
}
.drawer__hint{ font-size:11px; color:#334; }

.drawer__item{
  display:grid; justify-items:center; align-content:start; gap:8px;
  padding:14px 6px 12px; border:1px solid transparent; border-radius:4px;
  background:none; font:inherit; color:inherit; cursor:pointer; text-align:center;
  /* 44px ist die Groesse, die ein Daumen wirklich trifft. Die Kachel ist weit
     darueber -- gemessen wurde am 08-09, dass ein 30px-Knopf auf dem ersten
     Bildschirm reihenweise verfehlt wird. */
  min-height:96px;
}
.drawer__item:hover{ background:#eaf1fb; border-color:#c3d6ef; }
.drawer__item:active{ background:#cfe0f6; }
.drawer__item:focus-visible{ outline:2px solid #2f6fd0; outline-offset:-2px; }

/* Die Marke sitzt am Bild, nicht an der Schrift -- dort sieht man sie aus
   dem Augenwinkel, und sie verschiebt die Beschriftung nicht.

   ⚠️ Der Kasten braucht eine EIGENE Groesse. `.ico` steht global auf
   width:100%, und ohne Kasten ist "100%" die ganze Rasterspalte -- ein Symbol
   wuchs dann auf Spaltenbreite, waehrend das daneben klein blieb. Genau so
   gebaut wie `.icon__img` auf dem Desktop, damit beide dasselbe Bild zeigen. */
.drawer__img{
  position:relative; width:52px; height:52px; display:grid; place-items:center;
}
.drawer__img .ico, .drawer__img img{
  width:100%; height:100%; object-fit:contain; border-radius:8px;
}
.drawer__zahl{
  position:absolute; top:-3px; right:-5px; z-index:2;
  min-width:16px; height:16px; padding:0 4px; box-sizing:border-box;
  border:1px solid #7d1414; border-radius:9px;
  background:linear-gradient(#f05252,#c81e1e); color:#fff;
  font:700 10px/14px Tahoma,sans-serif; font-style:normal; text-align:center;
  box-shadow:0 1px 2px rgba(0,0,0,.45);
}
.drawer__zahl[hidden]{ display:none; }
.drawer__name{ font-size:11px; line-height:1.3; word-break:break-word; }
/* Ein Ordner, aus dem alles herausgefallen ist (leere CONFIG-Adressen).
   Ueber die ganze Breite, damit der Satz nicht in einer Rasterspalte klebt. */
.drawer__leer{ grid-column:1/-1; margin:24px 8px; font-size:12px; color:#5b6a7c; text-align:center; }

/* Auf dem Telefon deckt der Ordner den Schirm. Dann duerfen die Kacheln so
   gross sein, wie ein Home-Bildschirm sie macht -- drei bis vier je Reihe
   statt sechs winziger. */
@media (max-width:820px){
  /* ⚠️ Auf dem Telefon fehlt die Breite fuer eine Seitenleiste NEBEN dem
     Raster -- sie bekaeme entweder die Haelfte des Schirms oder waere zu
     schmal zum Treffen. Sie wandert deshalb UNTER den Inhalt und liegt dort
     als Reihe: "Other Places" bleibt erreichbar, nimmt dem Raster aber
     nichts weg. Zurueck und Aufwaerts stehen weiter oben. */
  .drawer__body{ flex-direction:column; }
  .drawer__side{
    order:2; width:auto; border-right:0; border-top:1px solid #c3d6ef;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  /* ⚠️ NICHT scrollen lassen. Mit grid-auto-flow:column standen die fuenf
     Ziele in einer Reihe von 420px auf einem 393px-Schirm -- "About" lag
     ausserhalb und war nur zu finden, wenn man auf die Idee kam zu wischen.
     Fuenf zu je 72px passen nebeneinander, und was nicht passt, rutscht in
     die naechste Zeile statt aus dem Bild. */
  .drawer__orte{ grid-template-columns:repeat(auto-fit,minmax(68px,1fr)); gap:6px; }
  .drawer__ort{ flex-direction:column; gap:4px; min-height:56px; text-align:center; font-size:10.5px; }
  .drawer__ort-ico{ width:24px; height:24px; }
  .drawer__main{ order:1; }
  /* Die Knoepfe sind das, was ein Daumen hier treffen muss. */
  .drawer__tb .ie__tb{ min-height:38px; padding-inline:12px; font-size:12px; }
  .drawer__pfad{ font-size:12px; }

  /* Der Ordner deckt hier den ganzen Schirm. Sechs Kacheln in Desktopgroesse
     saehen darin verloren aus -- also so gross, wie ein Home-Bildschirm sie
     macht: drei je Reihe, 64px Symbol, und die Beschriftung mitgewachsen. */
  .drawer{ grid-template-columns:repeat(3,1fr); gap:8px; padding:16px 12px; }
  .drawer__item{ min-height:126px; padding:20px 4px 16px; gap:10px; }
  .drawer__img{ width:64px; height:64px; }
  .drawer__name{ font-size:12px; }
  /* Unter der Taskleiste liegt sonst die letzte Reihe. */
  .folder{ padding-bottom:calc(var(--tb-h) + env(safe-area-inset-bottom, 0px)); }
  /* ...ausser beim wandernden Ordner. Der Fensterfuss mit der Stueckzahl sitzt
     ohnehin ueber der Taskleiste; ein zusaetzliches Polster riss nur einen
     weissen Streifen zwischen "Other Places" und den Fensterfuss. */
  .folder--nav{ padding-bottom:0; }
  .folder--nav .drawer__side{ padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Das Passport-Fenster ──────────────────────────────────────
   Klein und selten: es geht nur auf, wenn jemand nach etwas gegriffen hat,
   das eine Wallet braucht -- eine Sprachnachricht, ein Uferplatz. */
/* ⚠️ KEIN eigenes Weiss. Der Fensterrumpf ist beige wie in jedem anderen
   Dialog dieser Oberflaeche (siehe "Contract address"); eine weisse Flaeche
   darin sieht aus wie ein Stueck fremder Seite. */
.passport{ padding:16px 18px; display:grid; gap:14px; align-content:start; }
.passport__why{ margin:0; font-size:12px; line-height:1.5; color:#1a2430; }
.passport__slot{ display:grid; }
/* Der Knopf kommt vom Loginbildschirm und traegt dessen helle Schrift.
   Hier steht er auf Weiss, also bekommt er hier seine eigene Farbe. */
.passport__slot .user{
  background:#eef4fc; border:1px solid #c3d6ef; border-radius:5px; color:#12233a;
}
.passport__slot .user:hover{ background:#e0ecfa; }
.passport__slot .user__meta b{ font-size:14px; }
.passport__slot .user__meta i{ font-style:normal; font-size:11px; color:#4a5a6d; }
.passport__slot .user__pic--wallet{
  display:grid; place-items:center; width:34px; height:34px;
  border:1px solid #7fbf4d; border-radius:4px; background:#0f2a16; color:#9ff05a; font-size:19px;
}
.passport__fine{ margin:0; font-size:11px; line-height:1.5; color:#5b6a7c; }
/* Ein Weg hinaus, der nicht das kleine ✕ oben rechts ist -- wie im
   Contract-Dialog, wo "Close" neben "Copy" steht. */
.passport__out{ display:flex; justify-content:flex-end; }

/* ⚠️ `.user{display:flex}` schlaegt das eingebaute [hidden]{display:none} --
   ohne diese Zeile stuende der Wallet-Knopf trotz `hidden` weiter auf dem
   Loginbildschirm, also genau dort, wo er nicht mehr hingehoert. */
.user[hidden]{ display:none !important; }