/* JustPlay 98: the desktop, windows, taskbar and controls.
   The site inside the browser window is styled in site.css. */

@font-face { font-family: 'Pixelated MS Sans Serif'; src: url('/assets/fonts/ms_sans_serif.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Pixelated MS Sans Serif'; src: url('/assets/fonts/ms_sans_serif_bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  color-scheme: light;
  --face: #c0c0c0;
  --light: #dfdfdf;
  --hi: #ffffff;
  --shadow: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --title: linear-gradient(90deg, #000080, #1084d0);
  --title-off: linear-gradient(90deg, #808080, #b5b5b5);
  --select: #000080;
  --teal: #008080;
  --ui: 'Pixelated MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Arial, sans-serif;
  --pixel: 'Press Start 2P', 'Pixelated MS Sans Serif', monospace;
  --taskbar-h: 30px;

  --raised: inset -1px -1px var(--dark), inset 1px 1px var(--hi), inset -2px -2px var(--shadow), inset 2px 2px var(--light);
  --pressed: inset -1px -1px var(--hi), inset 1px 1px var(--dark), inset -2px -2px var(--light), inset 2px 2px var(--shadow);
  --win: inset -1px -1px var(--dark), inset 1px 1px var(--light), inset -2px -2px var(--shadow), inset 2px 2px var(--hi);
  --sunken: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--light), inset 2px 2px var(--dark);
  --thin-in: inset -1px -1px var(--hi), inset 1px 1px var(--shadow);
  --thin-out: inset -1px -1px var(--shadow), inset 1px 1px var(--hi);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--teal); color: #000;
  font: 11px/1.3 var(--ui); -webkit-font-smoothing: none; font-smooth: never;
  -webkit-tap-highlight-color: transparent;
}
img.ico { image-rendering: pixelated; flex: none; vertical-align: middle; }
button { font: inherit; color: inherit; }
a { color: #0000ee; }
u { text-decoration: underline; text-underline-offset: 1px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.is-dragging iframe, body.is-dragging .browser__view { pointer-events: none; }
body.is-dragging, .desk-icons, .explorer, .menu-bar, .toolbar, .status-bar, .taskbar, .msgbox, .dialog { user-select: none; }

/* ---- controls ------------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 75px; min-height: 23px; padding: 3px 10px; border: 0; border-radius: 0;
  background: var(--face); box-shadow: var(--raised); color: #000; text-decoration: none; cursor: default;
}
.btn:active, .btn.is-pressed { box-shadow: var(--pressed); padding: 4px 9px 2px 11px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hi); }
.btn--icon { min-width: 0; padding: 3px 5px; }
.field {
  border: 0; border-radius: 0; background: #fff; box-shadow: var(--sunken);
  padding: 3px 4px; min-height: 21px; font: inherit; color: #000;
}
.field:focus { outline: none; }
.sunken { box-shadow: var(--sunken); background: #fff; padding: 2px; }

/* Win98 scrollbars where the browser lets us draw them. */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background-color: #dfdfdf;
  background-image: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%);
  background-size: 2px 2px;
}
::-webkit-scrollbar-thumb { background: var(--face); box-shadow: var(--raised); }
::-webkit-scrollbar-corner { background: var(--face); }
::-webkit-scrollbar-button:single-button { display: block; width: 16px; height: 16px; background-color: var(--face); box-shadow: var(--raised); background-repeat: no-repeat; background-position: center; }
::-webkit-scrollbar-button:single-button:active { box-shadow: var(--pressed); }
::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v1H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:vertical:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4'%3E%3Cpath d='M0 0h7v1H6v1H5v1H4v1H3V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:decrement { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M3 0h1v7H3V6H2V5H1V4H0V3h1V2h1V1h1z'/%3E%3C/svg%3E"); }
::-webkit-scrollbar-button:single-button:horizontal:increment { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='7'%3E%3Cpath d='M0 0h1v1h1v1h1v1h1v1H3v1H2v1H1v1H0z'/%3E%3C/svg%3E"); }

/* ---- desktop ------------------------------------------------------------- */

.desktop {
  position: fixed; inset: 0 0 var(--taskbar-h) 0; overflow: hidden; background: var(--teal);
}
.desktop[data-wallpaper='clouds'] {
  background:
    radial-gradient(60px 26px at 12% 22%, #fff 60%, transparent 62%),
    radial-gradient(90px 34px at 16% 26%, #f4f8ff 60%, transparent 62%),
    radial-gradient(80px 30px at 62% 14%, #fff 60%, transparent 62%),
    radial-gradient(120px 40px at 68% 18%, #eef4ff 60%, transparent 62%),
    radial-gradient(70px 26px at 84% 52%, #fff 60%, transparent 62%),
    radial-gradient(110px 36px at 90% 56%, #f4f8ff 60%, transparent 62%),
    radial-gradient(90px 30px at 35% 70%, #fff 60%, transparent 62%),
    linear-gradient(#2a6fd6, #7db4f0 60%, #b9d9f7);
}
.desktop[data-wallpaper='setup'] {
  background-color: #000080;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 8px);
}
.desktop[data-wallpaper='plum'] { background: #5a3a6a; }
/* Pictures: Paint drawings and game frames, kept blocky. */
.desktop::before { content: ''; position: absolute; inset: 0; display: none; background: var(--wp-img) center / cover no-repeat; image-rendering: pixelated; }
.desktop[data-wallpaper='custom']::before { display: block; }
/* Over a picture, icon labels sit on the desktop colour, as Windows 98 drew them. */
.desktop[data-wallpaper='custom'] .desk-icon:not(.is-selected) span { background: var(--teal); }
.desktop[data-wp-mode='center']::before { background-size: auto; }
.desktop[data-wp-mode='tile']::before { background-size: auto; background-repeat: repeat; background-position: 0 0; }
.wp-mode { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.wp-mode select { flex: 1; }
.desktop[data-wallpaper='black'] { background: #000; }
.desktop[data-wallpaper='hills'] {
  background:
    linear-gradient(transparent 70%, #3c8d2f 70%, #2f7a24 85%, #23641b),
    radial-gradient(140% 60% at 30% 100%, #4aa83a 50%, transparent 51%),
    linear-gradient(#5aa0ea, #a8d4ff 70%);
}

.desk-icons {
  position: absolute; inset: 6px auto 6px 4px; z-index: 1;
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 76px); grid-auto-columns: 78px; gap: 0 2px;
}
.desk-icon {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 78px; height: 74px; padding: 4px 2px 0; border: 0; background: none; color: #fff; cursor: default;
}
.desk-icon .ico { width: 32px; height: 32px; }
.desk-icon span { padding: 1px 2px; line-height: 13px; text-align: center; text-shadow: none; }
.desk-icon:focus { outline: none; }
.desk-icon.is-selected .ico { filter: brightness(.55) sepia(1) hue-rotate(190deg) saturate(6); }
.desk-icon.is-selected span { background: var(--select); outline: 1px dotted #fff; }

.windows { position: absolute; inset: 0; }

/* ---- windows ------------------------------------------------------------- */

.window {
  position: absolute; display: flex; flex-direction: column;
  padding: 3px; background: var(--face); box-shadow: var(--win);
  min-width: 160px; min-height: 60px;
}
.window--browser { left: 96px; top: 8px; right: 12px; bottom: 8px; }
.window.is-max { left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; right: 0 !important; bottom: 0 !important; }
/* Children can set visibility: visible themselves, so hide them all. */
.window.is-min, .window.is-min *, .window.is-closed { visibility: hidden !important; pointer-events: none; }
.window.is-closed { display: none; }
.window--auto { min-width: 0; min-height: 0; }

.title-bar {
  display: flex; align-items: center; gap: 3px; flex: none;
  height: 18px; padding: 0 2px 0 3px; background: var(--title-off); color: #dfdfdf;
  font-weight: 700; user-select: none; touch-action: none;
}
.window.is-active > .title-bar { background: var(--title); color: #fff; }
.title-bar__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; }
.title-bar__controls { display: flex; flex: none; }
.title-bar__controls button {
  width: 16px; height: 14px; padding: 0; border: 0; background: var(--face) no-repeat center; box-shadow: var(--raised);
}
.title-bar__controls button:active { box-shadow: var(--pressed); background-position: calc(50% + 1px) calc(50% + 1px); }
.title-bar__controls [data-wa='close'] { margin-left: 2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
.title-bar__controls [data-wa='min'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='2'%3E%3Cpath d='M0 0h6v2H0z'/%3E%3C/svg%3E"); background-position: 4px 9px; }
.title-bar__controls [data-wa='min']:active { background-position: 5px 10px; }
.title-bar__controls [data-wa='max'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath fill-rule='evenodd' d='M0 0h9v9H0zm1 2v6h7V2z'/%3E%3C/svg%3E"); }
.window.is-max [data-wa='max'] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9'%3E%3Cpath fill-rule='evenodd' d='M2 0h6v6H7V2H3V0zM0 3h6v6H0zm1 2v3h4V5z'/%3E%3C/svg%3E"); }
.title-bar__controls [hidden] { display: none; }

.menu-bar { display: flex; flex: none; padding: 1px 0; }
.menu-bar button { padding: 2px 6px 3px; border: 0; background: none; cursor: default; }
.menu-bar button:hover { box-shadow: var(--thin-out); }
.menu-bar button.is-open { box-shadow: var(--thin-in); }

.window__body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.window__shield { position: absolute; inset: 0; z-index: 5; display: none; }
.window:not(.is-active) .window__shield { display: block; }

.toolbar {
  display: flex; align-items: center; flex: none; gap: 1px; padding: 2px 2px 3px;
  box-shadow: inset 0 1px var(--hi), inset 0 -1px var(--shadow);
}
.toolbar__sep { width: 2px; align-self: stretch; margin: 2px 4px; box-shadow: var(--thin-in); }
.tool {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 44px;
  padding: 3px 4px 2px; border: 0; background: none; color: #000; text-decoration: none; cursor: default;
}
.tool:hover { box-shadow: var(--thin-out); }
.tool:active { box-shadow: var(--thin-in); }
.tool:disabled { opacity: .45; box-shadow: none; }
.tool--row { flex-direction: row; gap: 4px; min-width: 0; padding: 3px 6px; }

.status-bar { display: flex; gap: 2px; flex: none; margin-top: 2px; }
.status-bar__field { box-shadow: var(--thin-in); padding: 2px 4px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-bar__zone { flex: none; width: 150px; display: flex; align-items: center; gap: 4px; }

.resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 6; touch-action: none;
  background: linear-gradient(135deg, transparent 0 45%, var(--hi) 45% 52%, var(--shadow) 52% 62%, transparent 62% 70%, var(--hi) 70% 76%, var(--shadow) 76% 86%, transparent 86%);
}
.window.is-max .resize, .window.is-max .edge { display: none; }
/* Invisible frame strips: every edge and corner resizes, as in Windows. */
.edge { position: absolute; z-index: 6; touch-action: none; }
.edge[data-resize='n'], .edge[data-resize='s'] { left: 6px; right: 6px; height: 4px; cursor: ns-resize; }
.edge[data-resize='e'], .edge[data-resize='w'] { top: 6px; bottom: 6px; width: 4px; cursor: ew-resize; }
.edge[data-resize='n'] { top: 0; } .edge[data-resize='s'] { bottom: 0; }
.edge[data-resize='w'] { left: 0; } .edge[data-resize='e'] { right: 0; }
.edge[data-resize='nw'], .edge[data-resize='ne'], .edge[data-resize='sw'] { width: 8px; height: 8px; }
.edge[data-resize='nw'] { left: 0; top: 0; cursor: nwse-resize; }
.edge[data-resize='ne'] { right: 0; top: 0; cursor: nesw-resize; }
.edge[data-resize='sw'] { left: 0; bottom: 0; cursor: nesw-resize; }
/* Minimize and restore fly a caption bar between the window and its button. */
.zoom { position: fixed; z-index: 9500; height: 18px; background: var(--title); pointer-events: none; }
/* Rubber-band selection on the desktop. */
.marquee { position: absolute; z-index: 2; outline: 1px dotted #fff; outline-offset: -1px; mix-blend-mode: difference; pointer-events: none; }

/* ---- browser window ------------------------------------------------------ */

.browser-tools .throbber {
  margin-left: auto; width: 40px; height: 36px; display: grid; place-items: center; background: #000; box-shadow: var(--thin-in);
}
.browser-tools .throbber img { width: 26px; height: 26px; image-rendering: pixelated; }
.window--browser.is-busy .throbber img { animation: throb .6s steps(4) infinite; }
@keyframes throb { 0% { transform: translateY(0) } 50% { transform: translateY(-4px) } }
.window--browser.is-busy .browser__view { cursor: progress; }

.address-bar { display: flex; align-items: center; gap: 4px; flex: none; padding: 2px 2px 3px; box-shadow: inset 0 -1px var(--shadow); }
.address-bar label { padding: 0 2px; color: #000; }
.address-bar__field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 2px 3px; }
.address-bar__field input { flex: 1; min-width: 0; border: 0; padding: 1px 0; font: inherit; background: none; }
.address-bar__field input:focus { outline: none; }
.address-bar .btn { min-width: 0; min-height: 21px; padding: 1px 8px; }

.browser__view {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  background: #fff; box-shadow: var(--sunken); padding: 2px; container-type: inline-size;
}

/* ---- game window --------------------------------------------------------- */

.window--game .window__body { background: #000; }
.game-stage { position: relative; flex: 1; min-height: 0; background: #000; box-shadow: var(--sunken); padding: 2px; }
.game-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
.game-stage:fullscreen { padding: 0; box-shadow: none; }
/* Full screen where the Fullscreen API is missing: the game covers the page. */
.window.is-borderless { position: fixed; inset: 0 !important; width: auto !important; height: auto !important; z-index: 9800 !important; padding: 0; box-shadow: none; }
.window.is-borderless > :not(.window__body) { display: none; }
.window.is-borderless .game-stage { padding: 0; box-shadow: none; }
.game-loading { position: absolute; inset: 2px; display: grid; place-items: center; color: #fff; pointer-events: none; }

/* ---- menus --------------------------------------------------------------- */

.menu {
  position: fixed; z-index: 10000; min-width: 150px; padding: 2px;
  background: var(--face); box-shadow: var(--win); user-select: none;
}
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu__item {
  position: relative; display: flex; align-items: center; gap: 6px; width: 100%;
  min-height: 20px; padding: 2px 18px 2px 4px; border: 0; background: none; text-align: left; white-space: nowrap; cursor: default; color: #000;
}
.menu__item .ico, .menu__item .menu__check { width: 16px; }
.menu__check { flex: none; text-align: center; }
.menu__item:hover, .menu__item.is-open, .menu__item:focus-visible { background: var(--select); color: #fff; outline: none; }
.menu__item:disabled { color: var(--shadow); text-shadow: 1px 1px var(--hi); background: none; }
.menu__item--sub::after { content: ''; position: absolute; right: 6px; top: 50%; margin-top: -4px; border: 4px solid transparent; border-left-color: currentColor; border-right: 0; }
.menu__key { margin-left: auto; padding-left: 20px; }
.menu__sep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--shadow), inset 0 -1px var(--hi); }

.start-menu { display: flex; padding: 2px 2px 2px 2px; min-width: 0; bottom: calc(var(--taskbar-h) - 2px); left: 2px; }
.start-menu__banner {
  width: 22px; flex: none; background: linear-gradient(#000080, #1084d0); color: #c0c0c0;
  writing-mode: vertical-rl; transform: rotate(180deg); padding: 6px 0; font: 700 18px/22px Arial, sans-serif; letter-spacing: 0;
}
.start-menu__banner b { color: #fff; font-weight: 900; }
.start-menu ul { min-width: 170px; }
.start-menu > ul > li > .menu__item { min-height: 34px; gap: 10px; padding-left: 6px; font-size: 11px; }
.start-menu > ul > li > .menu__item .ico { width: 32px; height: 32px; }

/* ---- taskbar ------------------------------------------------------------- */

.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000; height: var(--taskbar-h);
  display: flex; align-items: center; gap: 3px; padding: 3px 2px 2px;
  background: var(--face); box-shadow: inset 0 1px var(--light), inset 0 2px var(--hi);
}
.start-button {
  display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 2px 6px 2px 4px;
  border: 0; background: var(--face); box-shadow: var(--raised); cursor: default; flex: none;
}
.start-button b { font-weight: 700; }
.start-button[aria-expanded='true'] { box-shadow: var(--pressed); padding: 3px 5px 1px 5px; }
.taskbar__sep { width: 2px; height: 22px; box-shadow: var(--thin-out); flex: none; margin: 0 1px; }
.quick-launch { display: flex; flex: none; }
.quick-launch button { width: 22px; height: 22px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.quick-launch button:hover { box-shadow: var(--thin-out); }
.quick-launch button:active { box-shadow: var(--thin-in); }
.tasks { flex: 1; min-width: 0; display: flex; gap: 3px; overflow: hidden; }
.task {
  display: flex; align-items: center; gap: 4px; flex: 0 1 160px; min-width: 30px; height: 23px; padding: 2px 5px;
  border: 0; background: var(--face); box-shadow: var(--raised); text-align: left; cursor: default;
}
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task .ico { width: 16px; height: 16px; object-fit: cover; }
.task.is-active {
  box-shadow: var(--pressed); font-weight: 700; padding: 3px 4px 1px 6px;
  background-color: #fff; background-image: repeating-conic-gradient(var(--face) 0 25%, #fff 0 50%); background-size: 2px 2px;
}
.tray { display: flex; align-items: center; gap: 6px; height: 23px; padding: 0 8px 0 6px; box-shadow: var(--thin-in); flex: none; }
.tray time { min-width: 52px; text-align: right; }
.tray__btn { display: grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; cursor: default; }
.tray__btn:focus-visible { outline: 1px dotted #000; }


/* ---- dialogs ------------------------------------------------------------- */

.msgbox { display: flex; gap: 14px; padding: 14px 14px 10px; align-items: flex-start; max-width: 420px; }
.msgbox__text { padding-top: 8px; line-height: 1.45; }
.msgbox__text p { margin: 0 0 8px; }
.btn-bar { display: flex; justify-content: center; gap: 6px; padding: 4px 12px 12px; }
.btn-bar--right { justify-content: flex-end; }
.dialog { padding: 10px; }
.fieldset { border: 0; margin: 0 0 10px; padding: 12px 10px 10px; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--shadow), inset -2px -2px var(--shadow), inset 2px 2px var(--hi); position: relative; }
.fieldset legend { position: absolute; top: -7px; left: 8px; padding: 0 3px; background: var(--face); }
.radio { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.listbox { background: #fff; box-shadow: var(--sunken); padding: 2px; overflow: auto; }
.listbox button { display: block; width: 100%; border: 0; background: none; text-align: left; padding: 1px 3px; cursor: default; }
.listbox button.is-on { background: var(--select); color: #fff; }

/* ---- explorer (folders) -------------------------------------------------- */

.explorer { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--sunken); padding: 6px; }
.explorer__grid { display: grid; grid-template-columns: repeat(auto-fill, 84px); gap: 6px 4px; align-content: start; }
.explorer__empty { grid-column: 1 / -1; color: var(--shadow); padding: 4px; margin: 0; }
.file {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 3px 2px;
  border: 0; background: none; cursor: default; color: #000; text-align: center; text-decoration: none;
}
.file img { width: 32px; height: 32px; }
.file img.file__thumb { width: 48px; height: 32px; object-fit: cover; box-shadow: 0 0 0 1px #000; image-rendering: auto; }
.file span { line-height: 13px; padding: 0 2px; word-break: break-word; }
.file:focus { outline: none; }
.file.is-selected span { background: var(--select); color: #fff; outline: 1px dotted #000; }
.file.is-selected img { filter: brightness(.6) sepia(1) hue-rotate(190deg) saturate(5); }

/* ---- shut down ----------------------------------------------------------- */

.shutdown-screen { position: fixed; inset: 0; z-index: 20000; background: #000; display: grid; place-items: center; cursor: default; }
.shutdown-screen p { color: #ff8c00; font: 700 28px/1.4 Arial, sans-serif; text-align: center; margin: 0; padding: 20px; }
.shutdown-screen small { display: block; color: #666; font-size: 13px; font-weight: 400; margin-top: 24px; }
.dim, body.is-dim .taskbar::after { content: ''; position: absolute; inset: 0; z-index: 8000; background-image: repeating-conic-gradient(rgba(0,0,0,.5) 0 25%, transparent 0 50%); background-size: 2px 2px; }

/* ---- ad window ----------------------------------------------------------- */

.window--ad .window__body { padding: 4px; }
.window--ad .ad { margin: 0; }

/* ---- phones -------------------------------------------------------------- */

@media (max-width: 719px) {
  :root { --taskbar-h: 34px; }
  .window { left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; }
  .window--dialog { left: 8px !important; right: 8px !important; top: 20% !important; bottom: auto !important; }
  .title-bar__controls [data-wa='max'], .resize, .edge { display: none; }
  .title-bar { height: 22px; }
  .title-bar__controls button { width: 20px; height: 18px; }
  .desk-icons { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, 86px); grid-template-rows: none; grid-auto-rows: 80px; inset: 8px; justify-content: center; }
  .browser-tools .tool span, .browser-tools .throbber { display: none; }
  .browser-tools .tool { min-width: 32px; }
  .address-bar label { display: none; }
  .taskbar { height: var(--taskbar-h); }
  .quick-launch, .quick-launch + .taskbar__sep { display: none; }
  .task { flex-basis: 110px; }
}