/* =============================================================
   Windows Delete simulator
   Everything is in stage pixels: the stage is 1920x1080, the size of
   Dani's Figma frames, and every number below was read off those
   frames (file hNUIobJ1oKETwdPHuIRxXa, page "Windows Delete (Dani)").
   ============================================================= */

html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

#screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
}
#screen:fullscreen { width: 100vw; height: 100vh; }

#stageWrap { position: relative; overflow: hidden; flex: none; }

#stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #202020;
  font-family: "WD Open Sans", "Open Sans", sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  cursor: default;
}
#stage.wincursor, #stage.wincursor * { cursor: var(--cursor) 0 0, default !important; }

.bg { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; pointer-events: none; }
#bgSelect { display: none; }
#stage.selecting #bgSelect { display: block; }
#stage.selecting #bgNormal { display: none; }

.txt { position: absolute; white-space: nowrap; }

/* the title bar sparkle, linked to Dani's Instagram. Hover grows it a
   little; pressing squashes it; letting go springs it back past its size
   and settles, like a button. */
#brand {
  position: absolute; left: 16px; top: 18px; width: 24px; height: 24px; z-index: 4;
  background: #202020; display: block; border-radius: 4px; cursor: pointer;
}
#brand span {
  position: absolute; inset: 0; background: var(--sparkle) center / 24px 24px no-repeat;
  transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1);
}
#brand:hover span { transform: scale(1.18); }
#brand:active span { transform: scale(.82); transition-duration: 90ms; transition-timing-function: cubic-bezier(.4, 0, .6, 1); }
#brand:focus-visible { outline: 2px solid #60cdff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { #brand span { transition: none; } }

/* frame 02: "68 items selected", Open Sans SemiBold 35/45 */
#hTitle { left: 128px; top: 94px; font-size: 35px; line-height: 45px; font-weight: 600; display: none; }
#stage.selecting #hTitle { display: block; }

/* frame 02: the date header, SemiBold 17.5/25 */
#dateHead { left: 131px; top: 201px; font-size: 17.5px; line-height: 25px; font-weight: 600; display: none; }
#stage.hasItems #dateHead { display: block; }

/* ---------------- the 2x2 grid (frame 02) ---------------- */
/* 16:9 tiles (853 x 480), 20px gaps, 54px gallery padding. The bottom row
   runs under the taskbar, so the grid is clipped at the content layer's
   bottom edge (y 1020). */
#grid { position: absolute; left: 127px; top: 238px; width: 1726px; height: 782px; overflow: hidden; }
.tile {
  position: absolute; width: 853px; height: 480px;
  border-radius: 5px; overflow: hidden; background: #2a2a2a;
}
.tile:nth-child(1) { left: 0; top: 0; }
.tile:nth-child(2) { left: 873px; top: 0; }
.tile:nth-child(3) { left: 0; top: 500px; }
.tile:nth-child(4) { left: 873px; top: 500px; }
.tile.empty { visibility: hidden; }
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; pointer-events: none;
}

.badge {
  position: absolute; left: 8px; top: 8px; width: 30px; height: 30px;
  border-radius: 5px; background: rgba(32, 32, 32, .85);
}
.badge::after {
  content: ""; position: absolute; left: 5px; top: 5px; width: 20px; height: 20px;
  background: var(--cloud) center / 20px 20px no-repeat;
}
.ring {
  position: absolute; inset: 0; border-radius: 5px;
  box-shadow: inset 0 0 0 3px #60cdff; display: none;
}
.chk {
  position: absolute; left: 821px; top: 8px; width: 24px; height: 24px;
  border-radius: 4px; box-sizing: border-box; display: none;
}
/* Tile, State=Hover: a dark disc with a white outline */
.tile:hover .chk, #stage.selecting .chk {
  display: block; background: rgba(0, 0, 0, .3);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9);
}
/* Tile, State=Selected */
#stage .tile.sel .ring { display: block; }
#stage .tile.sel .chk {
  display: block; background: #60cdff var(--check) 4px 4px / 16px 16px no-repeat; box-shadow: none;
}

/* ---------------- buttons drawn in the frames ---------------- */
.hit { position: absolute; border-radius: 5px; z-index: 3; }
.hit:hover { background: rgba(255, 255, 255, .06); }
.hit:active { background: rgba(255, 255, 255, .042); }
/* standard buttons already have a fill in the frame, so hover only adds
   the step from rest to hover */
.hit.std:hover { background: rgba(255, 255, 255, .025); }
.hit.std:active { background: rgba(0, 0, 0, .06); }
.hit.cap { border-radius: 0; }
.sel-only { display: none; }
#stage.selecting .sel-only { display: block; }
#stage.selecting .norm-only { display: none; }
/* frame 03: the trash's hover fill. It goes as soon as it is clicked. */
#hitTrash.hot { background: rgba(255, 255, 255, .06); }
#hitTrash:not(.hot) { background: transparent; }

/* frame 03: the tooltip */
#tip {
  position: absolute; left: 1375px; top: 157px; z-index: 5;
  box-sizing: border-box; height: 37px; padding: 7px 11px 8px;
  border-radius: 5px; background: #2c2c2c;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2), 0 4px 10px rgba(0, 0, 0, .26);
  font-size: 15px; line-height: 20px; white-space: nowrap;
  opacity: 0; transition: opacity 83ms linear; pointer-events: none;
}
#tip.on { opacity: 1; }

/* the taskbar clock, live. Dani's frame: two lines, right-aligned,
   12px, in the box x 1842 to 1904, y 1034 to 1066 */
#clock {
  position: absolute; right: 16px; top: 1034px; width: 90px; height: 32px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 12px; line-height: 16px; text-align: right;
}

/* ---------------- frame 06: the progress toast ---------------- */
#toast {
  position: absolute; left: 680px; top: 926px; width: 620px; height: 70px; z-index: 6;
  border-radius: 10px; box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity 187ms cubic-bezier(0, 0, 0, 1), transform 187ms cubic-bezier(0, 0, 0, 1);
}
#toast.on { opacity: 1; transform: none; pointer-events: auto; }
#toast > img { position: absolute; left: 0; top: 0; width: 620px; height: 70px; }
#toastLabel { left: 55px; top: 16.5px; font-size: 17.5px; line-height: 25px; }
#toastBar { position: absolute; left: 55px; top: 49.5px; height: 4px; width: 0; border-radius: 2px; background: #60cdff; }

/* ---------------- the smoke and the dialogs (frames 04, 05) ---------------- */
#smoke {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1020px; z-index: 8;
  background: rgba(0, 0, 0, .3); opacity: 0; pointer-events: none;
  transition: opacity 220ms cubic-bezier(.4, 0, .6, 1);
}
#stage.modal #smoke {
  opacity: 1; pointer-events: auto;
  transition: opacity var(--dlg-in, 260ms) cubic-bezier(.2, .8, .2, 1);
}

/* The dialogs. Opening: a soft fade with a slight zoom in from 104%.
   Closing (Delete, Cancel, Play again, Restart): a soft fade with a slight
   zoom out to 95%. In between they are simply hidden, with no transition,
   so the next opening always starts from the same place. */
.dlg {
  position: absolute; left: 682px; width: 556px; z-index: 9;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0, 0, 0, .25);
  opacity: 0; transform: scale(1.04); pointer-events: none; visibility: hidden;
}
.dlg.on {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity var(--dlg-in, 260ms) cubic-bezier(.2, .8, .2, 1),
              transform var(--dlg-in, 260ms) cubic-bezier(.2, .8, .2, 1);
}
.dlg.out {
  opacity: 0; transform: scale(.95); visibility: visible; pointer-events: none;
  transition: opacity 220ms cubic-bezier(.4, 0, .6, 1), transform 220ms cubic-bezier(.4, 0, .6, 1);
}
@media (prefers-reduced-motion: reduce) {
  .dlg, .dlg.on, .dlg.out { transform: none !important; }
}
#dlg { top: 333px; height: 354px; }
#endDlg { top: 412px; height: 196px; }
.dlg-img { position: absolute; left: 0; top: 0; width: 556px; display: block; }
#dlgHover { display: none; }
#dlg.hover #dlgHover { display: block; }
#dlg.hover #dlgRest { display: none; }

/* SemiBold 24. The frame trims the text box to the cap height and puts
   the cap top 37px into the dialog; with a 24px line box the cap top
   sits 4.18px below the box top (Open Sans: ascent 2189, descent 600,
   cap 1462, per 2048). */
.dlg-title { left: 31px; top: 32.82px; font-size: 24px; line-height: 24px; font-weight: 600; }

.dlg-btn {
  position: absolute; width: 243px; height: 44.6px; border-radius: 5.53px; cursor: default;
}
/* Delete, pressed: the frame 05 blue at 80% over the #151515 footer */
#dlgDelete:active { background: rgba(21, 21, 21, .2); }
.dlg-btn.quiet:hover { background: rgba(255, 255, 255, .03); }
.dlg-btn.quiet:active { background: rgba(0, 0, 0, .1); }
.dlg-btn.accent:hover { background: rgba(21, 21, 21, .1); }
.dlg-btn.accent:active { background: rgba(21, 21, 21, .2); }

.dlg-check { position: absolute; left: 31px; top: 188px; width: 272px; height: 24px; }
.dlg-ticked {
  position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: none;
  border-radius: 4px; background: #60cdff var(--check) 4px 4px / 16px 16px no-repeat;
}
.dlg-check[aria-checked="true"] .dlg-ticked { display: block; }

/* ---------------- Dani-only tuning panel (?tune) ---------------- */
#tune {
  position: fixed; left: 12px; top: 12px; z-index: 50; width: 260px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(20, 20, 24, .92); color: #fff;
  font: 12px/1.4 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
#tune h4 { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
#tune label { display: block; margin: 7px 0 2px; }
#tune label b { float: right; font-weight: 500; font-variant-numeric: tabular-nums; }
#tune input[type=range] { width: 100%; }
#tune button {
  margin-top: 10px; width: 100%; padding: 7px; border: 0; border-radius: 8px;
  background: #60cdff; color: #000; font: inherit; font-weight: 600; cursor: pointer;
}