* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #94BDDC;

    cursor: default;
}


#wd-desktop {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: #94BDDC url("win95-splash.1788518781.jpg") center center / cover no-repeat;
}

#wd-stage {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* One Win9x window floating on the desktop. Everything inside is sized off the
   window's own font-size, which the JS derives from the cluster size it picked
   for the map, so there is not one media query in this file. */
#wd-window {
    font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 14px;
    line-height: 1.25;
    color: #000000;

    background: #C0C0C0;
    padding: 0.2em;

    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #DFDFDF;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}


.wd-title {
    display: flex;
    align-items: center;
    gap: 0.3em;

    background: #000080;
    color: #FFFFFF;
    font-weight: bold;
    padding: 0.14em 0.14em 0.14em 0.24em;
}

.wd-title-icon {
    flex: 0 0 auto;
    width: 1.2em;
    height: 1.2em;
}

.wd-title-icon svg,
.wd-ctl svg {
    display: block;
    width: 100%;
    height: 100%;
}

.wd-title-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wd-controls {
    flex: 0 0 auto;
    display: flex;
    gap: 0.14em;
}

/* The close button sits a little apart from the other two, as it does in every
   Win9x title bar. */
.wd-ctl-close {
    margin-left: 0.18em;
}


/* Shared raised chrome: window controls, the four buttons and the two
   scrollbar arrows are all the same Win9x button. */
.wd-btn,
.wd-ctl,
.wd-scroll-btn,
.wd-scroll-thumb {
    background: #C0C0C0;
    color: #000000;

    border-top: 2px solid #FFFFFF;
    border-left: 2px solid #FFFFFF;
    border-right: 2px solid #404040;
    border-bottom: 2px solid #404040;
    box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #DFDFDF;
}

.wd-ctl {
    flex: 0 0 auto;
    width: 1.5em;
    height: 1.3em;
    padding: 0.2em 0.32em;
    cursor: default;
}

.wd-ctl svg {
    fill: #000000;
}

/* The restore box is drawn with CSS borders rather than as a glyph: its sides
   are one pixel wide, and a one-unit stroke in a scaled-down viewBox is the
   first thing crispEdges rounds away. */
.wd-ctl-max i {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000000;
    border-top-width: 2px;
}


.wd-client {
    padding: 0.35em 0.3em 0.2em;
}

/* The map and its scrollbar share one sunken well, the way the details pane of
   the real defragmenter does. The white showing between the clusters is this
   panel, which is why the padding is the same as the grid gap. */
.wd-panel {
    display: flex;
    background: #FFFFFF;
    padding: var(--g, 2px);

    border-top: 2px solid #808080;
    border-left: 2px solid #808080;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    box-shadow: inset 1px 1px 0 #000000, inset -1px -1px 0 #DFDFDF;
}

/* Upright cluster blocks, --p wide by --ph tall, a quarter again as tall as
   they are wide the way the real map drew them. The gap is what makes each one
   read as a discrete block of data rather than a smear of colour. */
#wd-map {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(78, var(--p, 8px));
    grid-auto-rows: var(--ph, 10px);
    gap: var(--g, 2px);
}

#wd-map i {
    display: block;
    border: var(--cb, 1px) solid #000000;
}

/* Free space: nothing at all, just the white of the panel. The selector has to
   out-specify the rule above or the outline stays and the empty part of the
   disk reads as a grid of boxes rather than as nothing. */
#wd-map i.wd-c0 {
    border-color: transparent;
}

/* Unoptimized data: everything the run has not reached yet, flat and pale. The
   map therefore starts almost entirely this colour and darkens from the top
   left as the head works through it, which is the way round the real one did
   it. */
i.wd-c1 {
    background: #71D3E8;
}

/* Optimized data: the dark blue the head leaves behind. A checkerboard of two
   shades rather than one flat fill, which is how the original drew it, and a
   tight one: the two are close enough together that the block reads as one
   medium blue with a texture, not as a chequerboard. --dither is an even number
   of pixels set from the JS so each square of the tile lands on a whole pixel
   at any cluster size, and the background colour underneath is the average of
   the two, so the block keeps its hue once the cells are too small to show the
   pattern at all. */
i.wd-c2 {
    background-color: #2F68DE;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' shape-rendering='crispEdges'%3E%3Cpath fill='%231046D6' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3Cpath fill='%234E8AE6' d='M1 0h1v1H1zM0 1h1v1H0z'/%3E%3C/svg%3E");
    background-size: var(--dither, 2px) var(--dither, 2px);
}

/* A bad area of the disk: the little white folded-corner page the real map
   drew over clusters it would not touch. Never moved, never written to, and
   scattered through the map from the start, so the reveal is not the first time
   anything alarming appears in it. */
i.wd-c3 {
    background-color: #FFFFFF;
    background-image: linear-gradient(225deg, #C02A12 0, #C02A12 36%, transparent 36%);
}

/* Clusters being read or written — the write head. It is the loudest thing on
   the map by a distance, which is why it is also the ink the punchline is
   written in: white pages on a field that is one fifth white free space would
   spell nothing at all. */
i.wd-c4 {
    background: #E03A22;
}


/* Decorative: the map is never scrolled, so the thumb sits at the top and
   nothing here answers a click. */
.wd-scroll {
    flex: 0 0 auto;
    width: 1.4em;
    margin-left: var(--g, 2px);
    display: flex;
    flex-direction: column;
}

.wd-scroll-btn {
    flex: 0 0 auto;
    height: 1.3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wd-scroll-btn::after {
    content: "";
    border-left: 0.26em solid transparent;
    border-right: 0.26em solid transparent;
}

.wd-scroll-up::after {
    border-bottom: 0.26em solid #000000;
}

.wd-scroll-down::after {
    border-top: 0.26em solid #000000;
}

.wd-scroll-track {
    flex: 1 1 auto;
    min-height: 0;
    background-color: #C0C0C0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2' shape-rendering='crispEdges'%3E%3Cpath fill='%23FFFFFF' d='M0 0h1v1H0zM1 1h1v1H1z'/%3E%3C/svg%3E");
    background-size: 2px 2px;
}

.wd-scroll-thumb {
    display: block;
    height: 1.5em;
}


.wd-foot {
    display: flex;
    align-items: flex-end;
    gap: 1.2em;
    padding: 0.55em 0.1em 0.15em;
}

.wd-status {
    flex: 1 1 auto;
    min-width: 0;
}

.wd-status-line {
    height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Chunked bar in a sunken trough, no percentage inside it: the count is on its
   own line underneath, as it was in the real dialog. One chunk is --chunk wide
   including the 2px of trough after it, and the JS only ever sets the fill to a
   whole number of them. */
.wd-bar {
    height: 1.45em;
    margin: 0.2em 0 0.25em;
    padding: 2px;
    overflow: hidden;

    background: #C0C0C0;
    border-top: 1px solid #808080;
    border-left: 1px solid #808080;
    border-right: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
}

.wd-bar-fill {
    width: 0;
    height: 100%;
    background-image: linear-gradient(
        to right,
        #000080 0,
        #000080 calc(100% - 2px),
        transparent calc(100% - 2px)
    );
    background-size: var(--chunk, 12px) 100%;
}

.wd-buttons {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 11em);
    gap: 0.35em 0.6em;
}

.wd-btn {
    position: relative;
    font-family: inherit;
    font-size: 1em;
    line-height: 1.25;
    padding: 0.3em 0.6em;
    cursor: default;
}

.wd-btn:active,
.wd-ctl:active {
    border-top-color: #404040;
    border-left-color: #404040;
    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    box-shadow: inset 1px 1px 0 #808080;
}

.wd-btn-default {
    outline: 1px solid #000000;
    outline-offset: 0;
}

.wd-btn-default::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    right: 1px;
    bottom: 1px;
    border: 1px dotted #000000;
    pointer-events: none;
}


#wd-outro {
    display: none;
    padding: 0.55em 0.1em 0.15em;
}

#wd-outro p {
    margin: 0 0 0.5em;
}

#wd-outro p:last-child {
    margin-bottom: 0;
}

body.wd-revealed .wd-foot {
    display: none;
}

body.wd-revealed #wd-outro {
    display: block;
}


#wd-hint {
    position: fixed;
    left: 50%;
    bottom: 1.5em;
    transform: translateX(-50%);
    z-index: 4;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #FFFFFF;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 20px;
    padding: 9px 18px;
    white-space: nowrap;
    max-width: 92vw;
    overflow: hidden;
    text-overflow: ellipsis;

    transition: opacity 0.6s ease;
}

#wd-hint kbd {
    font-family: inherit;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 1px 6px;
}

#wd-hint.wd-hint-gone {
    opacity: 0;
    pointer-events: none;
}