/* ============================================================
   HaresMine — «веб-ОС» тема в стиле gleb.solutions
   Рабочий стол + строка меню + окна с заголовками
   ============================================================ */
:root {
  color-scheme: dark;
  --desktop: #0b1119;
  --desktop-2: #172331;
  --chrome: #192431;
  --chrome-hi: #3f5264;
  --chrome-lo: #070b10;
  --win-bg: #121b25;
  --win-title: linear-gradient(180deg, #173c57 0%, #102638 100%);
  --win-title-idle: linear-gradient(180deg, #344555 0%, #243340 100%);
  --ink: #edf5ff;
  --muted: #a5b5c6;
  --line: #405365;
  --accent: #b35cff;
  --accent-2: #58d6ff;
  --ok: #55d98b;
  --panel: #192733;
  --panel-hover: #223443;
  --code-bg: #0d1620;
  --code-ink: #a9e7ff;
  --tg: #2aabee;
  --dc: #5865f2;
  --mono: "JetBrains Mono", "Courier New", ui-monospace, monospace;
  --sans: "Segoe UI", Tahoma, system-ui, sans-serif;
  --bevel-out: inset -1px -1px 0 var(--chrome-lo), inset 1px 1px 0 var(--chrome-hi);
  --bevel-in: inset 1px 1px 0 var(--chrome-lo), inset -1px -1px 0 var(--chrome-hi);
}

body[data-theme="light"] {
  color-scheme: light;
  --desktop: #6f7b93;
  --desktop-2: #5b6780;
  --chrome: #d7dce4;
  --chrome-hi: #ffffff;
  --chrome-lo: #8a93a4;
  --win-bg: #eef1f5;
  --win-title: linear-gradient(180deg, #3b4a8c 0%, #26356e 100%);
  --win-title-idle: linear-gradient(180deg, #8b93a7 0%, #6b7488 100%);
  --ink: #14161c;
  --muted: #55607a;
  --line: #9aa3b5;
  --accent: #7c3aed;
  --accent-2: #a855f7;
  --ok: #17803d;
  --panel: #ffffff;
  --panel-hover: #fffdf5;
  --code-bg: #eef0ff;
  --code-ink: #4c1d95;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100vh;
  background:
    radial-gradient(circle at 20% 10%, rgba(124,58,237,.10), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(42,171,238,.10), transparent 45%),
    linear-gradient(160deg, var(--desktop) 0%, var(--desktop-2) 100%);
  background-attachment: fixed;
}

#matrixBg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: screen;
}

body[data-theme="light"] #matrixBg { opacity: .26; mix-blend-mode: multiply; }
.menubar, .container, .taskbar, .footer-note { position: relative; z-index: 1; }

/* тонкая «сетка пикселей» на рабочем столе */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: .16;
}

code { font-family: var(--mono); }

.container { width: min(1080px, 94vw); margin-inline: auto; }

/* ============ ВЕРХНЯЯ СТРОКА МЕНЮ (как в ОС) ============ */
.menubar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .3rem .5rem;
  background: var(--chrome);
  border-bottom: 2px solid var(--chrome-lo);
  box-shadow: 0 2px 0 var(--chrome-hi) inset, 0 3px 8px rgba(0,0,0,.25);
  font-family: var(--mono);
  font-size: .82rem;
  flex-wrap: wrap;
}
.menubar .logo {
  font-weight: 700;
  letter-spacing: .02em;
  padding: .15rem .6rem;
  margin-right: .4rem;
  background: var(--win-title);
  color: #fff;
  border-radius: 3px;
  box-shadow: var(--bevel-out);
}
.menubar button {
  font-family: var(--mono);
  font-size: .82rem;
  background: transparent;
  border: 0;
  color: var(--ink);
  padding: .18rem .55rem;
  cursor: pointer;
  border-radius: 3px;
}
.menubar .menu-link {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--ink);
  padding: .18rem .55rem;
  text-decoration: none;
  border-radius: 3px;
}
.menubar .menu-link:hover { background: var(--accent); color: #fff; }
.menubar button:hover { background: var(--accent); color: #fff; }
.menubar .spacer { flex: 1; }
.menubar .clock {
  padding: .18rem .6rem;
  background: var(--chrome);
  box-shadow: var(--bevel-in);
  border-radius: 3px;
  font-weight: 600;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--ink);
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  padding: .16rem .5rem;
  cursor: pointer;
  border-radius: 3px;
}
.theme-toggle:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); }

/* ============ ОКНА ============ */
.window {
  background: var(--win-bg);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  box-shadow: 4px 4px 0 rgba(0,0,0,.28);
  margin: 1.4rem 0;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .35rem .5rem;
  background: var(--win-title);
  color: #fff;
  font-family: var(--mono);
  font-size: .86rem;
  font-weight: 700;
}
.window.idle .titlebar { background: var(--win-title-idle); }
.titlebar .tb-ico { font-size: .95rem; }
.titlebar .tb-title { flex: 1; letter-spacing: .01em; }
.tb-btns { display: flex; gap: .25rem; }
.tb-btns span {
  width: 18px; height: 16px;
  display: grid; place-items: center;
  background: var(--chrome);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .7rem;
  line-height: 1;
  box-shadow: var(--bevel-out);
  cursor: default;
  user-select: none;
}
.win-body { padding: 1.3rem 1.4rem; }

/* раздел без «окна» — просто отступ */
.section { padding: 1rem 0 2rem; }

/* ============ КНОПКИ (скеоморфные) ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .85rem;
  padding: .5rem 1rem;
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  background: var(--chrome);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  border-radius: 2px;
  transition: transform .05s ease, filter .15s ease;
}
.btn:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); transform: translate(1px,1px); }
.btn:hover { filter: brightness(1.06); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: #fff;
  border-color: #c9a6ff #4c1d95 #4c1d95 #c9a6ff;
}
.btn-telegram { background: var(--tg); color: #fff; border-color: #7fd0f5 #1b7fb0 #1b7fb0 #7fd0f5; }
.btn-discord { background: var(--dc); color: #fff; border-color: #9aa5ff #3b45c7 #3b45c7 #9aa5ff; }
.btn-lg { padding: .65rem 1.4rem; font-size: .95rem; }

/* ============ HERO ============ */
.hero { padding: 1.6rem 0 .5rem; }
.hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: stretch; }
.hero-main { display: flex; flex-direction: column; gap: .9rem; }
.hero-title {
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--ink);
  text-shadow: 2px 2px 0 rgba(255,255,255,.5);
}
.hero-title .accent {
  background: linear-gradient(92deg, var(--accent), var(--tg));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-title-logo {
  width: min(100%, 36rem);
  max-width: 100%;
  margin: .05rem 0;
  font-size: 0;
  line-height: 0;
  letter-spacing: normal;
  text-shadow: none;
}
.hero-logo, .hero-logo-static {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
  object-fit: contain;
}
.hero-logo { mix-blend-mode: screen; }
.hero-logo-static { display: none; }
body[data-theme="light"] .hero-logo { display: none; }
body[data-theme="light"] .hero-logo-static { display: block; }
@media (prefers-reduced-motion: reduce) {
  .hero-logo { display: none; }
  .hero-logo-static { display: block; }
}
.hero-tag {
  display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start;
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  padding: .3rem .7rem; background: #fff; color: var(--muted);
  border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(23,128,61,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(23,128,61,0); } 100% { box-shadow: 0 0 0 0 rgba(23,128,61,0); } }
.hero-sub { color: var(--muted); font-size: 1.02rem; max-width: 46ch; }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .3rem; }

/* IP-виджет */
.ipwidget { display: flex; flex-direction: column; gap: .55rem; }
.ipwidget .ip-label { font-family: var(--mono); font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.ip-row { display: flex; gap: .4rem; align-items: stretch; }
.ip-value {
  flex: 1; font-family: var(--mono); font-weight: 700; font-size: 1rem;
  background: #10131b; color: #7ef0a6; padding: .55rem .7rem;
  border: 2px solid; border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  overflow-x: auto; white-space: nowrap;
}
.hero-side { display: flex; flex-direction: column; gap: .9rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stat { background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); padding: .7rem .8rem; }
.stat dt { font-family: var(--mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.stat dd { font-size: 1.35rem; font-weight: 800; color: var(--accent); }

/* ============ КАРТОЧКИ ============ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.card { background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); padding: 1.1rem; }
.card:hover { background: var(--panel-hover); }
.card-ico { font-size: 1.7rem; margin-bottom: .5rem; }
.card h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.card p { color: var(--muted); font-size: .9rem; }
.card-rule { border-top: 4px solid var(--accent); }
.card-crate { border-top: 4px solid var(--accent-2); }

/* ============ МАГАЗИНЫ ============ */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; }
.shop-panel { background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); padding: 1rem; }
.shop-panel h3 { color: var(--accent); font-size: 1rem; margin-bottom: .7rem; }
.shop-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: .82rem; }
.shop-table th, .shop-table td { text-align: left; padding: .42rem .35rem; border-bottom: 1px solid var(--line); }
.shop-table th { color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.shop-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; color: var(--muted); font-size: .86rem; }
.shop-list li::before { content: "▸"; color: var(--accent-2); margin-right: .45rem; }
.shop-note { margin-top: .8rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }

/* ============ ПРИВИЛЕГИИ ============ */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .8rem; }
.tier {
  --tier-color: #a5b5c6;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tier-color);
  box-shadow: inset 1px 1px 0 var(--chrome-hi), 3px 3px 0 var(--chrome-lo);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.tier-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.tier-head h3 { font-size: 1.12rem; line-height: 1.2; }
.tier-badge {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .55rem;
  color: var(--ink);
  background: var(--code-bg);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.tier-desc { color: var(--muted); font-size: .86rem; line-height: 1.45; }
.tier-status { display: flex; align-items: center; justify-content: center; min-height: 2.5rem; margin-top: .4rem; color: var(--muted); background: var(--code-bg); border: 1px solid var(--line); font-size: .8rem; font-weight: 600; text-align: center; }
.tier-list { list-style: none; display: flex; flex-direction: column; gap: .38rem; }
.tier-list li { font-size: .86rem; line-height: 1.4; padding-left: 1.25rem; position: relative; overflow-wrap: anywhere; }
.tier-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.tier-list code { color: var(--code-ink); font-size: .92em; font-weight: 700; }
.tier-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; margin-top: auto; }
.tier-prices span { display: flex; flex-direction: column; gap: .15rem; padding: .42rem .3rem; background: var(--code-bg); border: 1px solid var(--line); color: var(--muted); text-align: center; font-size: .68rem; line-height: 1.2; }
.tier-prices b { color: var(--ink); font-family: var(--mono); font-size: .78rem; }
.tier-bonus { margin-top: -.35rem; padding: .5rem .6rem; background: var(--code-bg); border-left: 3px solid var(--accent-2); color: var(--muted); font-size: .76rem; line-height: 1.35; }
.tier-bonus b { color: var(--accent-2); font-family: var(--mono); }
.tier-bonus small { display: block; margin-top: .12rem; color: var(--muted); font-size: .68rem; }
.tier-player { --tier-color: #9ca3af; }
.tier-premium { --tier-color: #e8a342; }
.tier-captain { --tier-color: var(--tg); }
.tier-prince { --tier-color: var(--accent-2); }
.tier-ender { --tier-color: var(--accent); }
.tier-moderator { --tier-color: #6187ff; }
.tier-unban { --tier-color: var(--ok); }
@media (max-width: 520px) { .tiers { grid-template-columns: minmax(0, 1fr); } }

/* Покупка через Telegram */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.purchase-link { align-self: stretch; margin-top: .4rem; text-align: center; justify-content: center; font-size: .86rem; }
.purchase-link.btn-primary {
  color: var(--ink);
  background: var(--code-bg);
  border: 1px solid var(--line);
  box-shadow: inset 1px 1px 0 var(--chrome-hi), 2px 2px 0 var(--chrome-lo);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .12s ease;
}
.purchase-link.btn-primary:hover,
.purchase-link.btn-primary:focus-visible {
  color: var(--accent-2);
  background: var(--panel-hover);
  border-color: var(--accent-2);
  filter: none;
}
.purchase-link.btn-primary:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.purchase-link.btn-primary:active { transform: translate(1px,1px); box-shadow: inset 1px 1px 0 var(--chrome-lo); }
.purchase-table-link { color: var(--accent-2); font-weight: 700; white-space: nowrap; }
.purchase-table-link:focus-visible, .purchase-close:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; }
.purchase-dialog { width: min(420px, calc(100% - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; color: var(--ink); background: var(--panel); border: 2px solid var(--chrome-hi); box-shadow: 0 12px 36px rgba(0,0,0,.55); overflow: auto; }
.purchase-dialog::backdrop { background: rgba(0,0,0,.75); }
.purchase-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; background: var(--chrome); border-bottom: 2px solid var(--line); }
.purchase-dialog-head h2 { font-size: 1rem; }
.purchase-close { padding: .3rem .55rem; color: var(--ink); background: var(--panel); border: 1px solid var(--line); cursor: pointer; }
.purchase-dialog-body { display: flex; flex-direction: column; align-items: stretch; gap: .8rem; padding: 1.1rem; text-align: left; line-height: 1.5; }
.purchase-step[hidden] { display: none; }
.purchase-step { display: flex; flex-direction: column; gap: .85rem; }
.purchase-step-label { color: var(--accent-2); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.purchase-rank-info { min-height: 3.4em; padding: .65rem .75rem; color: var(--muted); background: var(--code-bg); border: 1px solid var(--line); font-size: .82rem; line-height: 1.45; }
.purchase-step-actions { display: flex; gap: .5rem; align-items: stretch; }
.purchase-step-actions > * { flex: 1; justify-content: center; }
.purchase-back { min-height: 2.6rem; padding: .45rem .7rem; color: var(--ink); background: var(--code-bg); border: 1px solid var(--line); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.purchase-item { color: var(--accent-2); font-weight: 700; }
.purchase-field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 700; }
.purchase-field[hidden] { display: none; }
.purchase-field input, .purchase-field select { width: 100%; min-height: 2.6rem; padding: .55rem .65rem; color: var(--ink); background: var(--code-bg); border: 1px solid var(--line); font: inherit; }
.purchase-field input:focus, .purchase-field select:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.purchase-total { padding: .7rem; background: var(--code-bg); border: 1px solid var(--line); font-size: .92rem; }
.purchase-total strong { color: var(--accent-2); font-family: var(--mono); }
.purchase-total span { color: var(--muted); font-size: .8rem; }
.purchase-total b { color: var(--ok); }
.purchase-note { color: var(--muted); font-size: .76rem; }
.purchase-qr { display: block; width: min(160px, 60%); height: auto; align-self: center; background: #fff; }
.purchase-channel, .purchase-copy { align-self: center; color: var(--accent-2); font-size: .82rem; font-weight: 700; }
.purchase-copy { padding: .35rem .55rem; background: transparent; border: 1px solid var(--line); cursor: pointer; }
.purchase-dialog .btn-telegram { justify-content: center; text-align: center; }

/* ============ КОМАНДЫ ============ */
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .9rem; }
.cmd-group { background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); }
.cmd-group h3 { font-family: var(--mono); font-size: .92rem; padding: .5rem .8rem; background: var(--chrome); border-bottom: 2px solid var(--line); color: #2b3350; }
.cmd-list { list-style: none; padding: .7rem .8rem; display: flex; flex-direction: column; gap: .45rem; }
.cmd-list li { font-size: .87rem; color: var(--muted); }
.cmd-list code { background: var(--code-bg); color: var(--code-ink); padding: .05em .4em; border: 1px solid var(--line); }

/* ============ ШАГИ ============ */
.steps { max-width: 680px; }
.steps-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.steps-list li { display: flex; gap: .9rem; align-items: flex-start; background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); padding: .9rem 1rem; }
.step-num { flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--mono); font-weight: 700; background: var(--win-title); color: #fff; border-radius: 3px; }
.steps-list h3 { font-size: .98rem; margin-bottom: .15rem; }
.steps-list p { color: var(--muted); font-size: .88rem; }
.steps-list code { background: var(--code-bg); color: var(--code-ink); padding: .05em .4em; border: 1px solid var(--line); }
.connect-cta { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.rules-link { margin-top: 1rem; }

/* ============ ПАНЕЛЬ ЗАДАЧ + ФУТЕР ============ */
.taskbar {
  margin-top: 2rem;
  position: sticky;
  bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .6rem;
  background: var(--chrome);
  border-top: 2px solid var(--chrome-hi);
  box-shadow: 0 -2px 0 var(--chrome-lo) inset, 0 -3px 10px rgba(0,0,0,.25);
  font-family: var(--mono);
  font-size: .82rem;
}
.taskbar .start {
  font-weight: 700; padding: .22rem .8rem; border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  background: linear-gradient(180deg,#cbb7ff,#8b5cf6); color: #fff; border-radius: 3px;
}
.taskbar .tasks { flex: 1; display: flex; gap: .4rem; flex-wrap: wrap; }
.taskbar .tasks a { padding: .2rem .7rem; background: var(--chrome); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); color: var(--ink); text-decoration: none; border-radius: 2px; }
.taskbar .tasks a:hover { background: var(--panel); }
.taskbar .tray { padding: .2rem .6rem; box-shadow: var(--bevel-in); border-radius: 3px; }

.footer-note { text-align: center; color: #4a5470; font-size: .8rem; padding: 1.2rem 0 1.6rem; font-family: var(--mono); }

/* ============ ОТДЕЛЬНАЯ СТРАНИЦА ПРАВИЛ ============ */
.rules-hero { padding: 1.6rem 0 .5rem; }
.rules-intro { max-width: 760px; }
.rules-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: .9rem 0 1.2rem; }
.rules-meta span { font-family: var(--mono); font-size: .78rem; color: var(--muted); background: var(--panel); border: 1px solid var(--line); padding: .35rem .6rem; }
.rulebook { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.rule-block { background: var(--panel); border: 2px solid; border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); padding: 1rem; }
.rule-block h3 { display: flex; gap: .6rem; align-items: baseline; font-size: 1rem; margin-bottom: .45rem; }
.rule-number { color: var(--accent-2); font-family: var(--mono); font-size: .85rem; }
.rule-block p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.rule-block strong { color: var(--ink); }
.rule-block-wide { grid-column: 1 / -1; }
.rule-severity { border-top: 4px solid #ef6c6c; }
.rule-good { border-top: 4px solid var(--ok); }
.rules-subhead { margin: 2rem 0 .9rem; }
.rules-subhead-spaced { margin-top: 2.4rem; }
.rules-subhead .section-title { margin-top: .7rem; }
.rules-subhead .section-lead { max-width: 760px; }
.penalty-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.penalty-item {
  background: var(--panel); border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  padding: 1rem;
}
.penalty-item h3 { color: var(--ink); font-size: .98rem; margin-bottom: .5rem; }
.penalty-item p { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.penalty-item p + p { margin-top: .45rem; }
.penalty-item strong { color: var(--ink); }
.penalty-critical { border-top: 4px solid #ef6c6c; }
.penalty-good { border-top: 4px solid var(--ok); }
.allowed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.allowed-item {
  display: flex; flex-direction: column; gap: .35rem;
  background: var(--code-bg); border: 1px solid var(--line); padding: .85rem 1rem;
}
.allowed-item strong { color: var(--accent-2); font-size: .92rem; }
.allowed-item span { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.rule-note { margin-top: 1rem; padding: .85rem 1rem; background: var(--code-bg); border-left: 4px solid var(--accent-2); color: var(--muted); font-size: .88rem; }
.rules-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }

body[data-theme="light"] .footer-note { color: #4a5470; }

/* ============ АДАПТИВ ============ */
@media (max-width: 820px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .menubar button { font-size: .75rem; padding: .15rem .4rem; }
  .menubar .logo { font-size: .78rem; }
  .rulebook { grid-template-columns: 1fr; }
  .rule-block-wide { grid-column: auto; }
  .penalty-grid, .allowed-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr; }
  .taskbar .tray { display: none; }
}



@media (max-width: 400px) {
  .ip-row { flex-direction: column; }
}

/* Windows-inspired desktop: one consistent surface for windows and controls. */
:root {
  --desktop: #0a101b;
  --desktop-2: #172237;
  --chrome: #182435;
  --chrome-hi: #43556b;
  --chrome-lo: #0a101b;
  --win-bg: #111b29;
  --win-title: linear-gradient(110deg, #243953, #18283e);
  --win-title-idle: linear-gradient(110deg, #263444, #1b2836);
  --panel: #1a2939;
  --panel-hover: #22354a;
  --line: #40546b;
}
body[data-theme="light"] {
  --desktop: #b3c2db;
  --desktop-2: #d4dceb;
  --chrome: #e6edf6;
  --chrome-hi: #fff;
  --chrome-lo: #9aaac1;
  --win-bg: #f7f9fd;
  --win-title: linear-gradient(110deg, #5377ad, #394f82);
  --win-title-idle: linear-gradient(110deg, #8393ae, #677b99);
  --panel: #fff;
  --panel-hover: #f1f6ff;
  --line: #b3c2d4;
}
body { line-height: 1.5; }
.container { width: min(1140px, calc(100% - 40px)); }
.menubar {
  min-height: 54px;
  gap: .25rem;
  padding: .45rem max(.75rem, calc((100vw - 1140px) / 2));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 30px rgba(0,0,0,.22);
}
.menubar .logo { padding: .36rem .65rem; border-radius: 6px; box-shadow: none; white-space: nowrap; }
.menubar button, .menubar .menu-link { min-height: 36px; padding: .42rem .65rem; border-radius: 6px; white-space: nowrap; }
.menubar button:hover, .menubar .menu-link:hover { background: var(--panel-hover); color: var(--ink); }
.menubar .clock { border-radius: 5px; white-space: nowrap; }
.window {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 42px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.05);
}
.titlebar { min-height: 42px; padding: .5rem .75rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.titlebar .tb-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-btns { flex-shrink: 0; gap: 2px; }
.tb-btns span, .tb-btns button {
  display: grid; place-items: center;
  width: 32px; height: 28px; padding: 0;
  color: #eaf2ff; background: transparent; border: 0; border-radius: 4px;
  box-shadow: none; font: inherit; line-height: 1;
}
.tb-btns button { cursor: pointer; }
.tb-btns button:hover { background: rgba(255,255,255,.16); }
.tb-btns button:last-child:hover { background: #c93f55; }
.win-body { padding: clamp(1rem, 2.7vw, 1.75rem); }
.section { padding: .2rem 0 .7rem; }
.section-title { font-size: clamp(1.35rem, 2.5vw, 1.85rem); line-height: 1.2; }
.section-title .accent { color: var(--accent-2); }
.section-lead { color: var(--muted); max-width: 70ch; margin: .6rem 0 1.2rem; }
.btn {
  min-height: 42px; padding: .6rem 1rem; border: 1px solid var(--line); border-radius: 6px;
  box-shadow: inset 0 1px rgba(255,255,255,.08); transition: background .16s, border-color .16s, transform .12s, box-shadow .16s;
}
.btn:hover { filter: none; background: var(--panel-hover); border-color: var(--accent-2); }
.btn:focus-visible, .menubar a:focus-visible, .menubar button:focus-visible,
.taskbar a:focus-visible, .tb-btns button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.btn-primary { background: #486da5; border-color: #7699c7; color: #fff; }
.btn-primary:hover { background: #587fb9; color: #fff; }
/* The main privileges action has its own calm accent and a clear arrow. */
.hero-cta a[href="/privileges"] {
  min-width: 190px; justify-content: space-between; gap: 1.4rem;
  color: #fff; background: linear-gradient(115deg, #7256c8, #497fba);
  border: 1px solid #a59ae1; box-shadow: 0 6px 18px rgba(87,99,190,.22), inset 0 1px rgba(255,255,255,.2);
}
.hero-cta a[href="/privileges"]::after { content: "→"; font: 700 1.1rem var(--sans); }
.hero-cta a[href="/privileges"]:hover { background: linear-gradient(115deg, #8166d6, #568fc9); }
.hero-tag { background: var(--panel); color: var(--muted); border: 1px solid var(--line); border-radius: 5px; }
.ip-value, .stat, .card, .shop-panel, .cmd-group, .steps-list li, .rule-block, .penalty-item { border: 1px solid var(--line); border-radius: 7px; }
.card, .shop-panel, .stat { box-shadow: inset 0 1px rgba(255,255,255,.04); }
.card-rule, .card-crate, .rule-severity, .rule-good, .penalty-critical, .penalty-good { border-top-width: 3px; }
.cmd-group { overflow: hidden; }
.cmd-group h3 { color: var(--ink); border-bottom: 1px solid var(--line); }
.tier { border-radius: 7px; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.tier-badge, .tier-prices span, .tier-status, .tier-bonus { border-radius: 4px; }
.purchase-link.btn-primary { min-height: 44px; border-radius: 6px; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.purchase-dialog { border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.purchase-dialog-head { background: var(--win-title); color: #fff; }
.purchase-field input, .purchase-field select, .purchase-back, .purchase-close { border-radius: 5px; }
.taskbar { min-height: 52px; border-top: 1px solid var(--line); gap: .45rem; padding: .4rem .75rem; }
.taskbar .start, .taskbar .tasks a { min-height: 36px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; white-space: nowrap; }
.taskbar .start { background: linear-gradient(120deg, #6656b0, #477aa8); }
.footer-note { color: var(--muted); }

@media (max-width: 820px) {
  .menubar { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-inline: .6rem; scrollbar-width: thin; }
  .menubar > * { flex-shrink: 0; }
  .menubar .spacer { display: none; }
  .menubar .logo { font-size: .8rem; }
  .menubar button, .menubar .menu-link { font-size: .78rem; padding: .4rem .55rem; }
  .taskbar { overflow-x: auto; overscroll-behavior-x: contain; }
  .taskbar .tasks { flex-wrap: nowrap; min-width: max-content; }
}
@media (max-width: 520px) {
  .container { width: calc(100% - 20px); }
  .window { margin: .7rem 0; border-radius: 8px; }
  .hero { padding-top: .55rem; }
  .titlebar { font-size: .76rem; gap: .35rem; }
  .tb-btns span, .tb-btns button { width: 28px; }
  .win-body { padding: 1rem; }
  .hero-grid { gap: 1rem; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards, .shop-grid, .cmd-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-cta > .btn { flex: 1 1 145px; }
  .tier-head { align-items: flex-start; }
  .taskbar { margin-top: 1rem; }
  .purchase-step-actions { flex-wrap: wrap; }
  .purchase-step-actions > * { flex: 1 1 120px; }
}

/* Window controls and restoration remain usable on desktop and mobile. */
.section[hidden], .hero[hidden], .rules-hero[hidden], .win-body[hidden] { display: none; }
.window.is-maximized {
  position: fixed;
  inset: 0;
  z-index: 150;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  border-radius: 0;
  overflow: auto;
  overscroll-behavior: contain;
  transform: none !important;
  opacity: 1 !important;
}
.window.is-maximized > .titlebar { position: sticky; top: 0; z-index: 1; }
.window-restore-list { display: flex; flex-shrink: 0; gap: .4rem; max-width: 45%; overflow-x: auto; }
.window-restore-list:empty { display: none; }
.window-restore-list button {
  min-height: 36px; flex-shrink: 0; padding: .35rem .7rem;
  color: var(--ink); background: var(--panel); border: 1px solid var(--accent-2);
  border-radius: 6px; font: 700 .78rem var(--mono); cursor: pointer; white-space: nowrap;
}
.window-restore-list button:hover { background: var(--panel-hover); }
.window-restore-list button:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -3px; }
@media (max-width: 820px) {
  .window-restore-list:not(:empty) { order: -1; max-width: 65vw; }
}

/* Рабочий стол в духе Windows XP: навигация живёт в ярлыках и меню «Пуск». */
html, body { overflow-x: hidden; }
.menubar { display: none !important; }
.desktop {
  position: relative;
  z-index: 1;
  width: min(1140px, calc(100% - 40px));
  min-height: 185px;
  margin: 1.15rem auto .35rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: minmax(210px, .8fr) minmax(0, 1.7fr);
  align-items: start;
  gap: 1rem;
  background: linear-gradient(145deg, rgba(13,26,43,.92), rgba(21,42,64,.72));
  border: 1px solid rgba(130,181,226,.34);
  border-radius: 12px;
  box-shadow: 0 15px 34px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.08);
}
body[data-theme="light"] .desktop {
  background: linear-gradient(145deg, rgba(224,233,246,.94), rgba(198,215,236,.86));
  border-color: rgba(76,105,147,.3);
}
.desktop-brand {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 76px;
  color: var(--ink);
  text-decoration: none;
}
.desktop-brand > span:last-child, .desktop-brand > div { display: grid; gap: .08rem; }
.desktop-brand strong { font: 800 clamp(1.25rem, 2vw, 1.7rem) var(--sans); letter-spacing: -.03em; }
.desktop-brand small, .desktop-brand span span { color: var(--muted); font: .78rem var(--mono); }
.desktop-brand-mark, .start-menu-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  color: #fff;
  font: 800 1.8rem var(--sans);
  background: linear-gradient(145deg, #35d887, #1c8ed0 68%, #5b54d6);
  border: 2px solid rgba(255,255,255,.58);
  border-radius: 13px;
  box-shadow: 0 7px 17px rgba(27,132,201,.28), inset 0 1px rgba(255,255,255,.46);
}
.desktop-shortcuts {
  display: grid;
  grid-template-columns: repeat(3, minmax(82px, 1fr));
  gap: .7rem;
  align-items: start;
}
.desktop-shortcut {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .32rem;
  min-width: 0;
  padding: .35rem .25rem .45rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font: 700 .77rem var(--mono);
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}
.desktop-shortcut:hover, .desktop-shortcut:focus-visible, .desktop-shortcut.is-active {
  background: rgba(91,154,210,.16);
  border-color: rgba(112,190,239,.38);
  outline: none;
}
.desktop-shortcut > span:last-child {
  max-width: 100%;
  padding: .16rem .35rem;
  color: var(--ink);
  background: rgba(10,21,34,.72);
  border: 1px solid rgba(140,183,222,.2);
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body[data-theme="light"] .desktop-shortcut > span:last-child { background: rgba(255,255,255,.78); }
.desktop-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #fff;
  font: 800 1.65rem var(--sans);
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.42);
}
.desktop-icon-server { background: linear-gradient(145deg, #3aa7dd, #2f5fbe); }
.desktop-icon-privileges { background: linear-gradient(145deg, #f1bb53, #bf6c38); }
.desktop-icon-commands { background: linear-gradient(145deg, #b98cff, #5f57c7); }
.desktop-icon-shop { background: linear-gradient(145deg, #4fd39a, #238b81); }
.desktop-icon-rules { background: linear-gradient(145deg, #f28d9d, #ad436b); }
.desktop-icon-connect { background: linear-gradient(145deg, #6fe4d8, #2786a3); }

.taskbar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-height: 58px;
  gap: .45rem;
  padding: .45rem max(.75rem, calc((100vw - 1140px) / 2));
  background: linear-gradient(180deg, rgba(32,78,125,.98), rgba(20,47,89,.98));
  border-top: 1px solid rgba(184,224,255,.48);
  box-shadow: 0 -7px 22px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.16);
}
body[data-theme="light"] .taskbar { background: linear-gradient(180deg, #4d86c1, #2d5b9d); }
.start-button {
  position: relative;
  z-index: 131;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .3rem 1.05rem .3rem .52rem;
  color: #fff;
  background: linear-gradient(180deg, #4fd174, #168638);
  border: 1px solid #a5f5b4;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.34);
  font: 800 .96rem var(--sans);
  cursor: pointer;
}
.start-button:hover, .start-button[aria-expanded="true"] { background: linear-gradient(180deg, #62df84, #1b9a43); }
.start-orb {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  color: #fff;
  background: linear-gradient(145deg, #79e79b, #27864b);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 50%;
  font-size: 0;
  box-shadow: inset 0 1px rgba(255,255,255,.45);
}
.start-orb::after { content: "H"; font: 800 1rem var(--sans); }
.taskbar .tasks { flex: 1 1 300px; min-width: 0; display: flex; gap: .35rem; flex-wrap: wrap; }
.taskbar .tasks a { min-height: 36px; display: inline-flex; align-items: center; padding: .3rem .68rem; color: #eef7ff; background: rgba(8,25,52,.32); border: 1px solid rgba(178,218,252,.28); border-radius: 5px; text-decoration: none; }
.taskbar .tasks a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.58); }
.taskbar .tray { margin-left: auto; color: #eff8ff; background: rgba(4,20,42,.35); border: 1px solid rgba(180,220,255,.28); border-radius: 5px; }
.start-menu {
  position: fixed;
  left: max(12px, calc((100vw - 1140px) / 2));
  bottom: 64px;
  z-index: 130;
  width: min(370px, calc(100vw - 24px));
  overflow: hidden;
  color: var(--ink);
  background: var(--win-bg);
  border: 1px solid var(--line);
  border-radius: 9px 9px 4px 4px;
  box-shadow: 0 18px 48px rgba(0,0,0,.52), 0 0 0 4px rgba(23,85,143,.2);
}
.start-menu[hidden] { display: none; }
.start-menu-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .62rem .75rem;
  color: #fff;
  background: linear-gradient(120deg, #2c65a5, #18385f);
  font-size: 1.05rem;
}
.start-menu-mark { width: 34px; height: 34px; border-radius: 8px; font-size: 1rem; }
.start-menu-body { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1px; background: var(--line); }
.start-menu-group { display: flex; flex-direction: column; gap: .15rem; padding: .7rem; background: var(--win-bg); }
.start-menu-group button, .start-menu-group a {
  display: block;
  width: 100%;
  padding: .45rem .5rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font: 700 .78rem var(--mono);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.start-menu-group button:hover, .start-menu-group a:hover { color: #fff; background: #2c6fb4; border-color: #74b6ea; }
.start-menu-label { padding: 0 .5rem .28rem; color: var(--muted); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.start-menu-tools { border-left: 1px solid var(--line); }
.start-menu-tools .theme-toggle { min-height: 34px; border-color: var(--line); }
.start-menu-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .75rem; color: var(--muted); background: var(--code-bg); font: .7rem var(--mono); }
.start-menu-foot button { color: var(--ink); background: transparent; border: 0; font: inherit; cursor: pointer; }
.start-menu-foot button:hover { color: var(--accent-2); }
.footer-note { position: relative; z-index: 1; }

@media (max-width: 760px) {
  .desktop { width: calc(100% - 20px); grid-template-columns: 1fr; min-height: 0; }
  .desktop-brand { min-height: 62px; }
  .desktop-shortcuts { grid-template-columns: repeat(3, minmax(74px, 1fr)); gap: .35rem; }
  .desktop-icon { width: 46px; height: 46px; font-size: 1.35rem; }
  .desktop-shortcut { font-size: .68rem; }
  .taskbar { padding-inline: .55rem; }
  .taskbar .tasks { order: 3; flex-basis: 100%; }
  .taskbar .tray { margin-left: auto; }
  .start-menu { left: 10px; bottom: 112px; }
}
@media (max-width: 420px) {
  .desktop { padding: .7rem; }
  .desktop-shortcuts { grid-template-columns: repeat(2, minmax(80px, 1fr)); }
  .desktop-shortcut > span:last-child { font-size: .65rem; }
  .start-menu-body { grid-template-columns: 1fr; }
  .start-menu-tools { border-left: 0; border-top: 1px solid var(--line); }
  .taskbar .tasks a { flex: 1 1 calc(50% - .35rem); justify-content: center; font-size: .68rem; }
}

/* На рабочем столе остаётся только бренд; все ярлыки открываются через «Пуск». */
.desktop { grid-template-columns: 1fr; min-height: 96px; align-items: center; }
.desktop-brand { min-height: 68px; }
@media (max-width: 760px) { .desktop { min-height: 0; } }

/* XP/2000-панель: всегда у нижнего края и с почти прямыми углами. */
body { padding-bottom: 64px; }
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  margin-top: 0;
  border-radius: 0;
}
.start-button { border-radius: 1px; }
.taskbar .tasks a, .taskbar .tray { border-radius: 2px; }
.start-menu { border-radius: 2px; }
.start-menu-head { border-radius: 1px 1px 0 0; }
.start-menu-group button, .start-menu-group a, .start-menu-foot button { border-radius: 1px; }
.btn, .theme-toggle, .purchase-back, .purchase-close { border-radius: 2px; }
.purchase-field input, .purchase-field select { border-radius: 2px; }
.window { border-radius: 3px; }
.hero-tag, .ip-value, .stat, .card, .shop-panel, .cmd-group, .steps-list li, .rule-block, .penalty-item, .tier, .tier-badge, .tier-prices span, .tier-status, .tier-bonus { border-radius: 2px; }
.tb-btns button { border-radius: 2px; }
@media (max-width: 760px) { body { padding-bottom: 116px; } }

/* На узких экранах панель XP тоже остаётся одной строкой. */
.taskbar { flex-wrap: nowrap; }
.taskbar .tasks {
  order: initial;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.taskbar .tasks::-webkit-scrollbar { display: none; }
.taskbar .tasks a { flex: 0 0 auto; }
.taskbar .tray { flex-shrink: 0; margin-left: 0; }
@media (max-width: 760px) {
  body { padding-bottom: 64px; }
  .start-menu { bottom: 64px; }
  .start-button { min-height: 38px; padding-inline: .42rem .72rem; font-size: .86rem; }
  .start-orb { width: 27px; height: 27px; }
  .taskbar { padding-inline: .35rem; gap: .3rem; }
  .taskbar .tasks a { padding-inline: .52rem; font-size: .7rem; }
}
@media (max-width: 420px) {
  .taskbar .tasks a { flex: 0 0 auto; }
}