/* ============================================================
   MALTEN.EXE — retro desktop stylesheet
   Palette: pastel purple #C3B1E1 / #9370DB, Win98 silver chrome
   ============================================================ */

* { box-sizing: border-box; }

body {
    font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    background-color: #C3B1E1;
    color: #000;
    margin: 0;
    min-height: 100vh;
    position: relative;
}

/* twinkling star wallpaper */
body::before {
    content: '';
    position: fixed;
    inset: -10%;
    z-index: 0;
    background-image: url('stars.png');
    background-repeat: repeat;
    opacity: 0.4;
    animation: rotate 7s ease-in-out infinite alternate, fade 5s infinite;
    pointer-events: none;
}

@keyframes rotate {
    0%   { transform: rotate(-9deg) scale(1); }
    100% { transform: rotate(9deg) scale(1.05); }
}
@keyframes fade {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.7; }
}

/* ---------- classic window chrome ---------- */

.window {
    background-color: #efe9f7;
    border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #f5f0fb,
                inset -2px -2px #8a7ba8, inset 2px 2px #fff,
                4px 4px 0 rgba(40, 20, 70, 0.25);
    padding: 3px;
}

.title-bar {
    background: linear-gradient(90deg, #4b2d83, #9370DB);
    color: #fff;
    padding: 2px 3px 2px 5px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    min-height: 20px;
    gap: 6px;
}

body.desktop .window:not(.focused) > .title-bar {
    background: linear-gradient(90deg, #6f6a7d, #a9a3b8);
}

.title-bar-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 5px;
}
.title-bar-text img { width: 16px; height: 16px; image-rendering: pixelated; }

.title-bar-controls { display: flex; flex-shrink: 0; }

.title-bar-controls img {
    width: 16px;
    height: 16px;
    margin-left: 2px;
    cursor: pointer;
    display: block;
}
.title-bar-controls img:active { transform: translate(1px, 1px); }

.window-body {
    padding: 8px;
    position: relative;
}

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

body.desktop {
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

#ticker {
    position: relative;
    z-index: 5;
    background: #2b1a4d;
    color: #ffd6ff;
    border-bottom: 2px solid #000;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 2px 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
#ticker .hot { color: #7fff7f; font-weight: bold; }
#ticker marquee, #badgebar marquee { flex: 1 1 0; min-width: 0; margin-right: 3px; }

/* collapse toggles on the two marquee bars (Toggles.ticker / Toggles.badges in desktop.js).
   Collapsed, a bar is just a slim strip holding its toggle. */
.bar-toggle {
    flex-shrink: 0;
    width: 18px;
    height: 12px;
    margin: 0 3px 0 auto;
    padding: 0;
    border: none;
    background: #d8cfe8;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff;
    color: #000;
    font-family: inherit;
    font-size: 7px;
    line-height: 12px;
    text-align: center;
    cursor: pointer;
}
.bar-toggle:active { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }
body.ticker-off #ticker, body.badges-off #badgebar { padding: 0; }
body.ticker-off #ticker marquee, body.badges-off #badgebar marquee { display: none; }

#desktop {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
}

/* desktop windows float */
body.desktop .window {
    position: absolute;
    width: 380px;
    display: flex;
    flex-direction: column;
}
body.desktop .window > .window-body {
    overflow: auto;
    max-height: 60vh;
}
body.desktop .window.closed,
body.desktop .window.minimized { display: none; }

body.desktop .window.maximized {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
}
body.desktop .window.maximized > .window-body,
body.desktop .window.sized > .window-body { max-height: none; flex-grow: 1; min-height: 0; }

/* windows stay hidden until WM.init has placed them (no flash of unpositioned windows on load) */
body.desktop:not(.wm-ready) .window[data-app] { visibility: hidden; }

/* Win95-style zoom (WM.zoom): an outline with a caption strip travels between the taskbar /
   launcher and the window; the real window is invisible until the outline lands on it */
body.desktop .window.wm-zooming { visibility: hidden; }
.wm-zoom {
    position: fixed;
    z-index: 8000;
    border: 2px solid #4b2d83;
    overflow: hidden;
    pointer-events: none;
}
.wm-zoom span {
    display: block;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(90deg, #4b2d83, #9370DB);
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    white-space: nowrap;
    overflow: hidden;
}

.title-bar { cursor: default; }
body.desktop .title-bar { cursor: move; touch-action: none; }

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

#icons {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 10px;
    max-height: calc(100% - 16px);
    z-index: 2;
}

.desk-icon {
    width: 76px;
    text-align: center;
    cursor: pointer;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    font-size: 11px;
    user-select: none;
    padding: 3px;
}
.desk-icon:hover { background: rgba(147, 112, 219, 0.35); outline: 1px dotted #fff; }
.desk-icon .ico {
    font-size: 30px;
    line-height: 34px;
    display: block;
    filter: drop-shadow(1px 2px 0 rgba(0,0,0,.45));
}
.desk-icon img.ico { width: 34px; height: 34px; margin: 0 auto; image-rendering: pixelated; }

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

#taskbar {
    flex-shrink: 0;
    height: 34px;
    background: #d8cfe8;
    border-top: 2px solid #fff;
    box-shadow: 0 -1px 0 #000;
    display: flex;
    align-items: center;
    padding: 3px;
    gap: 4px;
    z-index: 50;
    position: relative;
}

.btn98 {
    background: #d8cfe8;
    border: none;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px #8a7ba8, inset 2px 2px #f5f0fb;
    font-family: inherit;
    font-size: 12px;
    padding: 3px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.btn98:active, .btn98.pressed {
    box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff,
                inset 2px 2px #8a7ba8, inset -2px -2px #f5f0fb;
}

#start-btn { font-weight: bold; display: flex; align-items: center; gap: 5px; height: 28px; }
#start-btn .logo { font-size: 15px; }

#task-buttons {
    display: flex;
    gap: 3px;
    flex-grow: 1;
    overflow: hidden;
}
#task-buttons .btn98 {
    max-width: 160px;
    min-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    height: 28px;
}

#tray {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    height: 28px;
    box-shadow: inset 1px 1px #8a7ba8, inset -1px -1px #fff;
    font-size: 12px;
}
#tray .tray-ico { cursor: pointer; filter: grayscale(0); }
#tray .tray-ico.off { filter: grayscale(1); opacity: 0.5; }
#clock { font-variant-numeric: tabular-nums; }

/* ---------- start menu ---------- */

#start-menu {
    position: fixed;
    left: 3px;
    bottom: 37px;
    min-width: 220px;
    background: #efe9f7;
    border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px #8a7ba8, inset 2px 2px #f5f0fb,
                4px 4px 0 rgba(40,20,70,.3);
    z-index: 100;
    display: flex;
}
#start-menu[hidden] { display: none; }

#start-menu .side {
    background: linear-gradient(180deg, #9370DB, #2b1a4d);
    color: #fff;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-weight: bold;
    font-size: 16px;
    padding: 8px 4px;
    letter-spacing: 2px;
}
#start-menu ul { list-style: none; margin: 0; padding: 3px; flex-grow: 1; }
#start-menu li {
    padding: 6px 8px;
    cursor: pointer;
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}
#start-menu li:hover { background: #9370DB; color: #fff; }
#start-menu li.sep { border-top: 1px solid #8a7ba8; border-bottom: 1px solid #fff; padding: 0; margin: 3px 0; cursor: default; }
#start-menu li .mi { width: 20px; text-align: center; }

/* ---------- badge marquee bar ---------- */

#badgebar {
    flex-shrink: 0;
    background: #1a1030;
    border-top: 1px solid #9370DB;
    padding: 3px 0;
    z-index: 5;
    position: relative;
    display: flex;
    align-items: center;
}
#badgebar img { height: 31px; width: 88px; margin: 0 6px; vertical-align: middle; image-rendering: pixelated; }

/* ---------- widgets ---------- */

.profile-pic {
    width: 84px;
    height: 84px;
    margin-right: 10px;
    border: 2px outset #fff;
    image-rendering: pixelated;
    flex-shrink: 0;
}

.blink { animation: blinker 1s step-start infinite; }
@keyframes blinker { 50% { opacity: 0; } }

.rainbow-text {
    font-weight: bold;
    background: linear-gradient(90deg, #ff71ce, #b967ff, #01cdfe, #05ffa1, #fffb96, #ff71ce);
    background-size: 400% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: rainbow-slide 3s linear infinite;
}
@keyframes rainbow-slide { to { background-position: 400% 0; } }

.divider-gif { display: block; margin: 8px auto; max-width: 100%; }

.hit-counter {
    display: inline-flex;
    gap: 1px;
    background: #000;
    padding: 2px;
    border: 2px inset #fff;
}
.hit-counter span {
    background: #111;
    color: #7fff7f;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 15px;
    padding: 1px 3px;
    text-shadow: 0 0 4px #7fff7f;
}

.mood-line { font-size: 12px; margin-top: 6px; }
.mood-line b { color: #4b2d83; }

.about-list { display: flex; gap: 10px; }
.about-column { flex: 1; }
.about-item { padding: 2px 0; }
.about-star-tiny { color: #9370DB; margin-right: 4px; }
.about-gif { max-width: 100%; max-height: 110px; object-fit: contain; display: block; margin: 0 auto 8px; }

/* ---------- top 8 ---------- */

.top8-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}
.top8-grid .friend {
    background: #fff;
    border: 2px inset #fff;
    padding: 4px;
    font-size: 11px;
}
.top8-grid img {
    width: 100%;
    height: 62px;
    object-fit: contain;
    image-rendering: pixelated;
    background: #f4f0fa;
}
.top8-grid .fname { color: #4b2d83; font-weight: bold; display: block; margin-top: 3px; }

/* ---------- guestbook ---------- */

.messages {
    height: 170px;
    overflow-y: auto;
    border: 2px inset #fff;
    background-color: #fff;
    padding: 5px;
    margin-bottom: 6px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}
.messages .msg { margin-bottom: 3px; word-wrap: break-word; }
.messages .msg .sn { color: #4b2d83; font-weight: bold; }
.messages .msg .tm { color: #999; font-size: 10px; margin-left: 4px; }

.gb-status { font-size: 10px; color: #666; margin-bottom: 4px; }
.gb-status.online { color: #0a7d0a; }

.emoticons { margin-bottom: 5px; }
.emoticons button {
    background: none; border: 1px solid transparent; cursor: pointer; font-size: 15px; padding: 1px;
}
.emoticons button:hover { border: 1px dotted #4b2d83; background: #e6dcf5; }

.message-input { display: flex; gap: 5px; }
.message-input input {
    flex-grow: 1;
    border: 2px inset #fff;
    background-color: #fff;
    padding: 4px;
    font-family: inherit;
    min-width: 40px;
}
.message-input input#screenName { flex-grow: 0; width: 90px; }

/* ---------- minesweeper ---------- */

.mines-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #d8cfe8;
    border: 2px inset #fff;
    padding: 4px 6px;
    margin-bottom: 6px;
}
.lcd {
    background: #000;
    color: #f33;
    font-family: 'Courier New', monospace;
    font-weight: bold;
    font-size: 17px;
    padding: 1px 4px;
    letter-spacing: 2px;
}
#mines-face { font-size: 17px; padding: 2px 6px; cursor: pointer; }

/* the board is as wide as its grid; --cell is set by Mines.fit() when the window is maximized */
.mines-board { width: max-content; max-width: 100%; margin: 0 auto; }
.mines-board .lcd, .mines-board #mines-face { font-size: calc(var(--cell, 24px) * 0.7); }
@media (min-width: 821px) {
    body.desktop .window.maximized[data-app="mines"] > .window-body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
}

#mines-grid {
    display: grid;
    grid-template-columns: repeat(9, var(--cell, 24px));
    justify-content: center;
    user-select: none;
}
#mines-grid .cell {
    width: var(--cell, 24px); height: var(--cell, 24px);
    background: #d8cfe8;
    box-shadow: inset -2px -2px #8a7ba8, inset 2px 2px #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: calc(var(--cell, 24px) * 0.58);
    cursor: pointer;
    font-family: 'Courier New', monospace;
}
#mines-grid .cell.open {
    box-shadow: inset 1px 1px #8a7ba8;
    background: #e9e2f5;
    cursor: default;
}
#mines-grid .cell.boom { background: #ff5c5c; }
.m1{color:#00c;} .m2{color:#080;} .m3{color:#c00;} .m4{color:#408;}
.m5{color:#840;} .m6{color:#088;} .m7{color:#000;} .m8{color:#888;}

/* ---------- paint ---------- */

.paint-toolbar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 5px; }
.paint-toolbar .btn98 { padding: 2px 7px; font-size: 12px; }
.paint-toolbar .btn98.tool-on { box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; background: #cbbfe4; }
/* the sheet lives in a scrolling stage: Paint.fit() grows the bitmap to fill the stage
   (it never shrinks it), so a maximized window gets a full-size sheet */
.paint-stage { height: 224px; overflow: auto; border: 2px inset #fff; background: #8a7ba8; }
#paint-canvas { background: #fff; cursor: crosshair; touch-action: none; display: block; }
@media (min-width: 821px) {
    body.desktop .window.maximized[data-app="paint"] > .window-body { display: flex; flex-direction: column; }
    body.desktop .window.maximized[data-app="paint"] .paint-stage { flex: 1 1 0; height: auto; min-height: 0; }
}
.paint-palette { display: grid; grid-template-columns: repeat(8, 18px); gap: 2px; margin-top: 5px; }
.paint-palette .swatch { width: 18px; height: 18px; border: 1px solid #000; cursor: pointer; }
.paint-palette .swatch.sel { outline: 2px solid #9370DB; }

/* ---------- pictures / internet ---------- */

.gif-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }   /* 3 across normally, more when maximized */
.gif-grid img {
    width: 100%; height: 80px; object-fit: contain;
    background: #fff; border: 2px inset #fff;
    image-rendering: pixelated;
}
/* .zoomable is set by ImageViewer.attach() once an image has loaded — the only place the zoom cursor comes from */
img.zoomable { cursor: zoom-in; }
img.zoomable:focus-visible { outline: 2px dotted #4b2d83; outline-offset: 1px; }

/* picture viewer overlay (ImageViewer in apps.js; My Pictures + OurSpace feed). Sits under the CRT/sparkle layers. */
html.imgview-open, html.imgview-open body { overflow: hidden; }
.imgview {
    position: fixed; inset: 0; z-index: 8000;
    display: flex; align-items: center; justify-content: center;
    background: rgba(24, 10, 48, 0.6);
    overscroll-behavior: contain;
}
.imgview-win {
    display: flex; flex-direction: column;
    min-width: 230px; max-width: 96vw; max-height: 96vh;
    background-color: #efe9f7;
    border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #f5f0fb,
                inset -2px -2px #8a7ba8, inset 2px 2px #fff,
                6px 6px 0 rgba(20, 8, 40, 0.45);
    padding: 3px;
}
.imgview .title-bar { cursor: default; flex-shrink: 0; }
/* a long caption must not widen the viewer: the title takes no intrinsic width and ellipsizes in what the picture leaves */
.imgview .title-bar-text { flex: 1 1 auto; min-width: 0; contain: inline-size; }
.imgview .title-bar-text span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.imgview-x { border: 0; padding: 0; margin: 0; background: none; cursor: pointer; flex-shrink: 0; line-height: 0; }
.imgview-x img { width: 16px; height: 16px; display: block; }
.imgview-x:active img { transform: translate(1px, 1px); }
.imgview-x:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }
.imgview-stage {
    display: flex; align-items: center; justify-content: center;
    min-height: 60px; margin-top: 3px; padding: 4px;
    background: #fff; border: 2px inset #fff;
    overflow: auto;
}
.imgview-stage img { display: block; flex-shrink: 0; }
.imgview-stage img.pixel { image-rendering: pixelated; }
.imgview-status {
    flex-shrink: 0; margin-top: 3px; padding: 1px 6px;
    font-size: 11px; color: #333;
    box-shadow: inset 1px 1px #8a7ba8, inset -1px -1px #fff;
}

.net-links { display: flex; flex-direction: column; gap: 8px; }
.net-links a {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; color: #000;
    padding: 5px; border: 2px outset #fff; background: #e6dcf5;
}
.net-links a:hover { background: #cbbfe4; }
.net-links img { width: 88px; height: 31px; image-rendering: pixelated; }

/* ---------- sparkles / crt / bsod / screensaver ---------- */

.sparkle {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    font-size: 13px;
    animation: sparkle-fall 0.9s ease-out forwards;
}
@keyframes sparkle-fall {
    0%   { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translateY(28px) scale(0.2) rotate(120deg); }
}
@keyframes sparkle-rise {
    0%   { opacity: 1; transform: translateY(0) scale(0.6); }
    100% { opacity: 0; transform: translateY(-34px) scale(1.15); }
}

/* MSN-style nudge */
.nudging { animation: nudge-shake 0.55s linear; }
@keyframes nudge-shake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-7px, 3px); }
    20% { transform: translate(6px, -4px); }
    30% { transform: translate(-5px, -3px); }
    40% { transform: translate(7px, 4px); }
    50% { transform: translate(-6px, 2px); }
    60% { transform: translate(5px, -5px); }
    70% { transform: translate(-7px, -2px); }
    80% { transform: translate(4px, 5px); }
    90% { transform: translate(-3px, 1px); }
}

/* --crt is the Control Panel's intensity (0.1–1, default .25); it scales everything at once */
body.crt::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.24) 0 1px, transparent 1px 3px);
    box-shadow: inset 0 0 160px rgba(20, 0, 60, 0.8);
    opacity: var(--crt, .25);
    animation: crt-flicker 0.12s infinite;
}
@keyframes crt-flicker { 50% { opacity: calc(var(--crt, .25) * 0.88); } }

#bsod {
    position: fixed; inset: 0; z-index: 20000;
    background: #0000aa; color: #fff;
    font-family: 'Courier New', monospace;
    display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 20px; cursor: pointer;
}
#bsod[hidden] { display: none; }
#bsod .bsod-title { background: #aaa; color: #0000aa; padding: 0 10px; font-weight: bold; }
#bsod p { max-width: 560px; line-height: 1.6; }

#screensaver {
    position: fixed; inset: 0; z-index: 19000;
    background: #000; cursor: none;
}
#screensaver[hidden] { display: none; }

/* ---------- first boot (Boot in desktop.js): power → POST → splash → logon ---------- */

body.booting > :not(#boot):not(#shutdown) { visibility: hidden; }
#boot {
    position: fixed; inset: 0; z-index: 30000;
    background: #000; color: #c8c8c8;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    transition: opacity .6s;
}
#boot.boot-out { opacity: 0; pointer-events: none; }
.boot-stage { position: absolute; inset: 0; }
.boot-stage[hidden] { display: none; }
/* power: a beige tower with one button on it */
.boot-power { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.boot-tower { text-align: center; }
.boot-tower-face {
    width: 150px; height: 300px; margin: 0 auto; position: relative;
    background: #d9d2c0; border: 3px solid #8f8a7a; border-radius: 6px;
    box-shadow: inset -6px -6px 0 #b9b2a0, inset 6px 6px 0 #f0ebdc, 10px 14px 0 rgba(0,0,0,.6);
}
.boot-bay { position: absolute; left: 14px; right: 14px; height: 22px; background: #cfc8b5; border: 2px solid #9f9887; border-radius: 2px; }
.boot-bay:nth-child(1) { top: 20px; }
.boot-bay:nth-child(2) { top: 50px; }
.boot-floppy { position: absolute; left: 24px; right: 24px; top: 92px; height: 10px; background: #2d2d2d; border-radius: 2px; }
.boot-powerbtn {
    position: absolute; left: 50%; top: 200px; transform: translateX(-50%);
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid #7a7466; background: #e9e3d2; color: #333;
    font-size: 20px; cursor: pointer; box-shadow: 2px 3px 0 rgba(0,0,0,.35);
}
.boot-powerbtn:hover { background: #fff8e6; }
.boot-powerbtn.on { transform: translateX(-50%) translateY(2px); box-shadow: none; }
.boot-led { position: absolute; left: 50%; top: 258px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: #3a3a3a; }
.boot-led.on { background: #3fff5a; box-shadow: 0 0 10px #3fff5a; }
.boot-tower-label { margin-top: 10px; font-size: 12px; letter-spacing: 3px; color: #888; }
.boot-hint { font-size: 13px; color: #aaa; animation: blinker 1.4s step-start infinite; }
/* POST (the BIOS screen) */
.boot-text { margin: 0; padding: 24px 28px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; color: #d0d0d0; }
.boot-text::after { content: '_'; animation: blinker .8s step-start infinite; }
.boot-estar {
    position: absolute; right: 28px; top: 24px; width: 96px; padding: 8px 4px;
    border: 2px solid #9ad; color: #9ad; font-size: 9px; line-height: 1.5; text-align: center; letter-spacing: 1px;
}
/* splash */
.boot-splash {
    background:
        radial-gradient(ellipse at 28% 22%, #fff 0, #dbe8ff 16%, transparent 30%),
        radial-gradient(ellipse at 72% 68%, #fff 0, #d6e4ff 20%, transparent 34%),
        linear-gradient(180deg, #0a1a5c, #2b57c7 60%, #7ab2ff);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
}
.boot-flag { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 96px; transform: skewY(-8deg); filter: drop-shadow(3px 4px 0 rgba(0,0,0,.35)); }
.boot-flag i { display: block; height: 42px; }
.boot-flag i:nth-child(1) { background: #f35325; }
.boot-flag i:nth-child(2) { background: #81bc06; }
.boot-flag i:nth-child(3) { background: #05a6f0; }
.boot-flag i:nth-child(4) { background: #ffba08; }
.boot-brand { font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size: 58px; color: #fff; text-shadow: 2px 3px 0 rgba(0,0,0,.5); letter-spacing: -1px; }
.boot-brand b { font-weight: normal; margin-left: 10px; }
.boot-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: #000; overflow: hidden; }
.boot-bar span { display: block; width: 140px; height: 100%; background: linear-gradient(90deg, transparent, #2a5bd7 30%, #6fa0ff 50%, #2a5bd7 70%, transparent); animation: boot-bar 1.4s linear infinite; }
@keyframes boot-bar { from { transform: translateX(-140px); } to { transform: translateX(100vw); } }
/* logon */
.boot-logon { background: #008080; }
.boot-dialog { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, 92vw) !important; }
.boot-dialog .title-bar { cursor: default; }
.boot-dialog > .window-body { font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #000; padding: 12px 14px; }
.boot-logon-row { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.boot-keys { font-size: 34px; }
.boot-dialog label { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 8px; margin: 6px 0; }
.boot-dialog input { border: 2px inset #fff; padding: 2px 4px; font-family: inherit; font-size: 12px; background: #fff; }
.boot-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.boot-btns .btn98 { min-width: 76px; padding: 4px 10px; }
.boot-skip { position: absolute; right: 14px; bottom: 14px; background: none; border: 1px solid #555; color: #888; font-family: inherit; font-size: 11px; padding: 3px 8px; cursor: pointer; }
.boot-skip:hover { color: #ddd; border-color: #aaa; }

/* ---------- shut down (Shutdown in desktop.js): the dialog, "shutting down", the CRT going off, standby ---------- */

#shutdown {
    position: fixed; inset: 0; z-index: 30001;
    background: #000; color: #c8c8c8;
    font-family: 'Courier New', monospace;
    overflow: hidden;
}
#shutdown.sd-asking { background: transparent; }       /* the dialog sits on the live desktop */
.sd-stage { position: absolute; inset: 0; }
.sd-stage[hidden] { display: none; }
.sd-dialog { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(380px, 92vw) !important; }
.sd-dialog .title-bar { cursor: default; }
.sd-dialog > .window-body { font-family: 'MS Sans Serif', Tahoma, 'Segoe UI', Arial, sans-serif; font-size: 12px; color: #000; padding: 12px 14px; }
.sd-row { display: flex; gap: 14px; align-items: flex-start; }
.sd-icon { font-size: 34px; }
.sd-q { margin-bottom: 8px; }
.sd-dialog label { display: block; margin: 3px 0; cursor: pointer; }
.sd-note { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; color: #fff; font-family: Tahoma, Arial, sans-serif; font-size: 14px; text-shadow: 1px 1px 0 rgba(0,0,0,.5); }
.sd-safe { background: #000; display: flex; align-items: center; justify-content: center; }
.sd-safe-text { color: #ffb000; font-size: 28px; text-align: center; line-height: 1.4; text-shadow: 0 0 8px rgba(255,176,0,.55); }
.sd-safe.sd-off { animation: crt-off .7s ease-in forwards; }
.sd-safe.sd-off .sd-safe-text { opacity: 0; }
@keyframes crt-off {                                   /* the picture collapses to a bright line, then a dot */
    0%   { transform: scale(1, 1); background: #000; }
    35%  { transform: scale(1, 0.012); background: #e8eeff; box-shadow: 0 0 24px 6px #fff; }
    70%  { transform: scale(0.5, 0.006); background: #fff; box-shadow: 0 0 20px 4px #fff; }
    100% { transform: scale(0.004, 0.004); background: #fff; box-shadow: 0 0 30px 10px #fff; opacity: 0; }
}
.sd-breathe { background: #000; cursor: none; }
.sd-breathe::after {                                   /* a monitor on standby: the faint glow breathing */
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, #2e2e2e 0%, #161616 55%, #000 100%);
    animation: crt-breathe 5s ease-in-out infinite;
}
@keyframes crt-breathe { 0%, 100% { opacity: .12; } 50% { opacity: 1; } }
.sd-dos-text { color: #c8c8c8; }

/* ---------- buddy ---------- */

#buddy {
    position: fixed;
    right: 14px;
    bottom: 78px;
    z-index: 60;
    cursor: pointer;
    text-align: right;
}
body.badges-off #buddy { bottom: 53px; }   /* badge bar collapsed: stand on the slim strip */
#buddy img { width: 90px; filter: drop-shadow(2px 3px 2px rgba(0,0,0,.4)); }
#buddy .bubble {
    position: absolute;
    right: 95px;
    bottom: 40px;
    width: 190px;
    background: #fffce8;
    border: 2px solid #000;
    border-radius: 8px;
    padding: 8px;
    font-size: 12px;
    text-align: left;
    box-shadow: 3px 3px 0 rgba(0,0,0,.3);
}
#buddy .bubble::after {
    content: '';
    position: absolute;
    right: -10px;
    bottom: 12px;
    border: 6px solid transparent;
    border-left-color: #000;
}
#buddy .bubble[hidden] { display: none; }

/* ---------- classic page layout (blog pages) ---------- */

.container {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 10px;
    position: relative;
    z-index: 1;
}

.container .window { margin-bottom: 20px; }

/* Sub-pages share the desktop's taskbar (desktop.js ensureShell): pinned to the bottom of the
   viewport, with room left under the page so the last line never hides behind it. */
body.subpage { padding-bottom: 44px; }
body.subpage #taskbar { position: fixed; left: 0; right: 0; bottom: 0; }
body.page-wide .container { width: auto; max-width: 1180px; }

/* The page's window is a copy of Maltenscape Navigator: toolbar, address bar, links bar, a white
   document pane, and a status bar. */
.page-window { padding-bottom: 2px; }
.page-window .title-bar-controls img { cursor: pointer; }
.page-window.minimized > :not(.title-bar) { display: none; }
.nav-chrome { background: #d8cfe8; }
.nav-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
    padding: 3px 5px;
    border-top: 1px solid #fff; border-bottom: 1px solid #a99cc4;
}
.nav-row .wr-label { font-size: 11px; margin-right: 2px; }
.nav-tools a.btn98 {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; font-size: 12px; color: #000; text-decoration: none;
}
.nav-tools a.btn98[aria-current="page"] { border-style: inset; background: #c9bfdd; font-weight: bold; }
.nav-address .wr-url { text-overflow: ellipsis; color: #000; }
.nav-go { padding: 1px 8px; font-size: 11px; text-decoration: none; color: #000; }
.nav-links a {
    font-size: 11px; color: #2b1a4d; text-decoration: none;
    padding: 1px 7px; border: 1px solid transparent;
}
.nav-links a:hover { border-color: #fff #8a7ba8 #8a7ba8 #fff; background: #e6dcf5; }
.nav-links a:active { border-color: #8a7ba8 #fff #fff #8a7ba8; }
.page-doc {
    background: #fff; border: 2px inset #fff; margin-top: 2px;
    padding: 14px 16px 18px;
}
.status-bar { display: flex; gap: 2px; margin-top: 2px; font-size: 11px; color: #333; }
.status-bar span { padding: 2px 8px; box-shadow: inset 1px 1px #8a7ba8, inset -1px -1px #fff; white-space: nowrap; }
.status-bar span:first-child { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; }

.blog-content { max-width: 100%; word-wrap: break-word; line-height: 1.6; }
.blog-content h2 { color: #4b2d83; }
.blog-image { max-width: 100%; height: auto; margin-bottom: 12px; }
.blog-date { color: #666; font-size: 11px; }

/* a post: one readable column, old-web serif, set like a page somebody typed with care */
.post { max-width: 640px; margin: 0 auto; }
.post-head { margin-bottom: 18px; padding-bottom: 10px; border-bottom: 3px double #9370DB; }
.post-head h1 {
    margin: 4px 0 6px; color: #4b2d83;
    font: bold 30px/1.15 Georgia, 'Times New Roman', Times, serif;
}
.post-body { font: 16px/1.75 Georgia, 'Times New Roman', Times, serif; color: #1c1426; }
.post-body p { margin: 0 0 1.15em; }
.post-foot { margin-top: 26px; padding-top: 6px; text-align: center; font-size: 12px; color: #444; }
.post-foot .btn98 { text-decoration: none; color: #000; display: inline-block; margin: 6px 3px 0; padding: 3px 10px; }
@media (max-width: 600px) {
    .page-doc { padding: 10px 10px 14px; }
    .post-head h1 { font-size: 24px; }
    .post-body { font-size: 15px; line-height: 1.7; }
    .status-bar span:not(:first-child) { display: none; }
}

.blog-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}
.blog-preview img {
    width: auto; height: 80px; max-width: 120px; object-fit: contain;   /* the frame takes the picture's own shape */
    border: 2px inset #fff; background: #fff;
    image-rendering: pixelated;
}
.blog-preview a { color: #4b2d83; font-weight: bold; font-size: 15px; }
.blog-preview .desc { font-size: 12px; color: #444; }

/* ---------- MaltenSpace ---------- */

.ms-header {
    background: linear-gradient(180deg, #1c3f94, #003366);
    color: #fff;
    padding: 6px 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.ms-logo { font-size: 19px; font-weight: bold; letter-spacing: -1px; }
.ms-logo-dot { color: #ff6600; }
.ms-slogan { font-size: 11px; font-style: italic; color: #cfe0ff; }

.ms-tabs {
    background: #6699cc;
    display: flex;
    flex-wrap: wrap;
    padding: 2px 4px;
    gap: 2px;
    position: sticky;
    top: 0;
    z-index: 6;
    box-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.ms-tab {
    background: none;
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    cursor: pointer;
}
.ms-tab:hover { background: #4477aa; }
.ms-tab.on { background: #fff; color: #003366; }
.ms-narrow .ms-tab { padding: 3px 6px; }
/* NEW! marker (Guestbook tab, until the visitor opens it) */
.ms-tab-new::after {
    content: "";
    display: inline-block;
    width: 24px;
    height: 16px;
    margin: -4px -2px -4px 4px;
    vertical-align: middle;
    background: url(assets/deco_new.gif) center / contain no-repeat;
    image-rendering: pixelated;
    animation: blinker 1s step-start infinite;
}
/* MS.jumpTo(anchor): the box you were sent to flashes a few times */
.ms-flash { animation: ms-flash .65s ease-in-out 4; }
@keyframes ms-flash {
    50% { box-shadow: 0 0 0 3px #ffcc00, 0 0 16px 6px #ff6600; }
}

#ms-content { background: #fff; color: #000; }

.ms-pagetitle {
    background: #ffcc99;
    color: #663300;
    font-weight: bold;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.ms-empty { padding: 12px; color: #666; font-style: italic; }

/* profile */
.ms-profile {
    display: flex;
    gap: 8px;
    padding: 8px;
    align-items: flex-start;
}
.ms-left { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-narrow .ms-left { width: 170px; }
.ms-right { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.ms-bigavatar {
    width: 100%;
    max-height: 150px;
    object-fit: contain;
    border: 1px solid currentColor;
    background: #fff;
    image-rendering: pixelated;
}
.ms-name { font-size: 15px; font-weight: bold; }
.ms-tagline { font-size: 11px; font-style: italic; opacity: .85; }
.ms-statbox { font-size: 11px; line-height: 1.5; }
.ms-lastlogin { opacity: .7; }

.ms-banner {
    background: var(--ms-accent, #6699cc);
    color: #fff;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}

.ms-section { border: 1px solid var(--ms-accent, #6699cc); }
.ms-boxtitle {
    background: var(--ms-accent, #6699cc);
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    padding: 3px 6px;
    text-shadow: 1px 1px 0 rgba(0,0,0,.35);
}
.ms-section > p { margin: 6px 8px; font-size: 12px; }
.ms-abouthead { font-weight: bold; padding: 6px 8px 0; font-size: 12px; }

.ms-interests { width: calc(100% - 16px); margin: 6px 8px 8px; border-collapse: collapse; font-size: 11px; }
.ms-interests td { border: 1px solid var(--ms-accent, #6699cc); padding: 3px 6px; }
.ms-int-k { background: var(--ms-accent, #6699cc); color: #fff; font-weight: bold; width: 70px; }

.ms-contactbox { border: 1px solid var(--ms-accent, #6699cc); display: flex; flex-direction: column; gap: 4px; padding-bottom: 6px; font-size: 11px; }
.ms-contactbox .btn98 { margin: 0 6px; font-size: 11px; }
.ms-contactbox div:not(.ms-boxtitle) { padding: 0 6px; }
.ms-contactbox .ms-boxtitle { margin-bottom: 4px; }

.ms-friendgrid { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; }
.ms-minifriend { width: 60px; text-align: center; font-size: 9px; overflow: hidden; }
.ms-minifriend img { cursor: pointer; }

.ms-avatar {
    width: 44px; height: 44px;
    object-fit: contain;
    background: #f4f0fa;
    border: 1px solid #999;
    image-rendering: pixelated;
    cursor: pointer;
    flex-shrink: 0;
}

.ms-comment { border-top: 1px solid #ddd; }
.ms-comment-head {
    display: flex; align-items: center; gap: 8px;
    background: rgba(0,0,0,.05);
    padding: 4px 8px;
    font-size: 11px;
}
.ms-comment-body { padding: 5px 8px 8px; font-size: 12px; word-wrap: break-word; }
.ms-time { font-size: 10px; opacity: .6; margin-left: auto; }

.ms-commentform { display: flex; gap: 4px; padding: 6px 8px; }
.ms-commentform input {
    flex-grow: 1; min-width: 40px;
    border: 2px inset #fff; padding: 4px; font-family: inherit;
}

/* browse / requests / inbox */
.ms-browsegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 8px; }
.ms-browsecard {
    border: 1px solid #6699cc;
    padding: 6px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 11px;
}
.ms-browsecard .btn98 { font-size: 11px; }
.ms-browsecard.is-new { position: relative; border-style: dashed; }
.ms-newtag {
    position: absolute; top: -1px; right: -1px;
    padding: 0 4px;
    background: #ff3399; color: #fff;
    font-size: 9px; font-weight: bold; letter-spacing: 1px;
}
/* "show more" paging button under long lists (browse, requests, inbox, bulletins) */
.ms-more { display: block; margin: 6px auto 10px; font-size: 11px; padding: 3px 14px; }

.ms-reqrow {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-bottom: 1px solid #ddd;
    font-size: 12px;
}
.ms-reqrow .btn98 { font-size: 11px; }
.ms-reqmid { flex-grow: 1; min-width: 0; }
.ms-clickable { cursor: pointer; }
.ms-clickable:hover { background: #eef4ff; }
.ms-reqrow.unread { background: #fff8e0; font-weight: bold; }
.ms-waiting { font-size: 10px; font-weight: bold; color: #cc5500; }

.ms-thread { max-height: 240px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.ms-dm { max-width: 85%; padding: 5px 8px; font-size: 12px; border: 1px solid #999; }
.ms-dm.them { background: #eef4ff; align-self: flex-start; }
.ms-dm.me { background: #f3eefb; align-self: flex-end; }
.ms-dm .ms-time { display: block; margin-left: 0; }
/* divider above the first message of a later conversation in the same thread */
.ms-thread-sep {
    align-self: stretch; flex-shrink: 0;
    margin: 8px 0 2px;
    border-top: 1px dashed #99a;
    padding-top: 3px;
    text-align: center; font-size: 10px; font-style: italic; color: #667;
}

.ms-feeditem {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #ddd;
    font-size: 12px;
}
.ms-feeditem:nth-child(odd) { background: #f7f9ff; }
.ms-feedname { color: #cc5500; cursor: pointer; }
.ms-feedname:hover { text-decoration: underline; }
.ms-feedtext { margin: 3px 0; word-wrap: break-word; }

/* dialogue trees (Emily-is-Away style) */
.ms-choices { padding: 8px; border-top: 2px solid #6699cc; background: #eef4ff; }
.ms-choices .ms-choices-label { font-size: 10px; color: #336; margin-bottom: 5px; font-style: italic; }
.ms-choices .btn98 {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    font-size: 12px;
    padding: 5px 8px;
    background: #fff;
}
.ms-choices .btn98:hover { background: #dbe8ff; }

.ms-typer {
    margin: 6px 8px;
    padding: 5px 8px;
    border: 2px inset #fff;
    background: #fff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    min-height: 24px;
    word-wrap: break-word;
}

.ms-typing-ind { font-style: italic; opacity: .75; }
.ms-typing-ind .ms-dots { animation: ms-dots-blink 1s steps(1) infinite; }
@keyframes ms-dots-blink { 50% { opacity: 0.2; } }

/* navigation helpers */
.ms-backbar { padding: 4px 8px; background: #eef4ff; border-bottom: 1px solid #6699cc; }
.ms-backbar .btn98 { font-size: 11px; padding: 2px 8px; }

.ms-filterbar { display: flex; gap: 4px; padding: 6px 8px 0; flex-wrap: wrap; align-items: center; }
.ms-filterbar .btn98 { font-size: 11px; padding: 2px 8px; }
.ms-filterbar .btn98.on { background: #cbbfe4; box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }
.ms-filterbar input {
    flex-grow: 1;
    min-width: 80px;
    border: 2px inset #fff;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 12px;
}

.ms-bulletin { border: 1px solid #6699cc; margin: 8px; }
.ms-bulletin-subj { font-weight: bold; padding: 5px 8px 0; color: #cc5500; }
.ms-bulletin-foot { padding: 6px 8px; }
.ms-bulletin-foot .btn98 { font-size: 11px; }

/* ---------- gif decor layer ---------- */

.desk-deco {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    image-rendering: pixelated;
    filter: drop-shadow(2px 3px 2px rgba(0,0,0,.3));
}
.desk-deco.clicky { pointer-events: auto; cursor: pointer; }

.baby-player {
    background: #000;
    border: 2px outset #d8cfe8;
    padding: 2px;
}
.baby-player .baby-title {
    background: linear-gradient(90deg, #4b2d83, #9370DB);
    color: #fff;
    font-size: 10px;
    padding: 1px 4px;
    margin-bottom: 2px;
}

.bar-gif { display: block; width: 100%; height: auto; margin: 8px 0; image-rendering: pixelated; }
.deco-center { display: block; margin: 4px auto; image-rendering: pixelated; }
.deco-inline { vertical-align: middle; image-rendering: pixelated; margin: 0 3px; }

.ms-decor {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    align-items: center;
    padding: 4px;
    border: 1px dashed var(--ms-accent, #6699cc);
}
.ms-decor img { max-height: 54px; max-width: 100%; image-rendering: pixelated; }

.ms-footerbar { padding: 6px 0 2px; }
.ms-footerbar img { display: block; width: 100%; }

/* ---------- buddy list ---------- */

.bl-body { padding: 4px !important; font-size: 12px; }
.bl-me { padding: 5px 6px; border-bottom: 2px groove #fff; }
.bl-mystatus { font-size: 10px; color: #4b2d83; font-style: italic; }
.bl-group { font-weight: bold; font-size: 11px; padding: 5px 4px 2px; color: #4b2d83; }
.bl-group.bl-fold { cursor: pointer; }
.bl-group.bl-fold:hover { text-decoration: underline; }
.bl-row { padding: 2px 6px 2px 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bl-row:hover { background: #e6dcf5; }
.bl-row .bl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.bl-row.on .bl-dot { background: #22b14c; box-shadow: 0 0 3px #22b14c; }
.bl-row.away .bl-dot { background: #ffcc00; }
.bl-row.off { color: #999; }
.bl-row.off .bl-dot { background: #bbb; }
.bl-mail { color: #cc5500; }
.bl-awaymsg { font-size: 10px; font-style: italic; color: #666; padding: 1px 6px 3px 26px; }
.bl-foot { border-top: 2px groove #fff; margin-top: 6px; padding: 4px 6px 1px; font-size: 9px; color: #888; }

/* ---------- #ourspace chat ---------- */

.chat-topic {
    background: #2b1a4d;
    color: #ffd6ff;
    font-size: 11px;
    padding: 4px 8px;
    border-bottom: 1px solid #000;
}
.chat-wrap { display: flex; height: 260px; }
#chat-log {
    flex-grow: 1;
    overflow-y: auto;
    background: #fff;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    padding: 4px 6px;
    border-right: 1px solid #ccc;
}
.chat-line { margin-bottom: 2px; word-wrap: break-word; }
.chat-line.sys { color: #888; font-style: italic; }
.chat-line.me { color: #7b2d83; font-style: italic; }
.chat-nick { color: #003366; cursor: pointer; }
.chat-nick.me { color: #cc5500; cursor: default; }
.chat-nick:hover { text-decoration: underline; }
#chat-nicks {
    width: 128px;
    flex-shrink: 0;
    overflow-y: auto;
    background: #eef4ff;
    font-size: 11px;
    padding: 4px;
}
.chat-nickhead { font-weight: bold; color: #4b2d83; margin-bottom: 3px; }
.chat-nickrow { padding: 1px 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-nickrow:hover { background: #dbe8ff; }
.chat-nickrow.away { color: #997700; }
.chat-form { border-top: 1px solid #ccc; margin: 0; }

/* ---------- horoscope ---------- */

.horo-head { font-weight: bold; color: #4b2d83; margin-bottom: 6px; font-size: 14px; }
.horo-line { font-size: 12px; margin-bottom: 5px; line-height: 1.45; }
.horo-special { background: #fff8d6; border: 1px dashed #b8952a; padding: 5px; }
.horo-foot { font-size: 10px; color: #777; font-style: italic; margin: 8px 0 6px; }

/* ---------- webring ---------- */

.webring-widget {
    margin-top: 8px;
    padding: 5px;
    border: 1px dashed #4b2d83;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
    font-size: 11px;
}
.webring-widget .btn98 { font-size: 11px; padding: 2px 8px; }
.wr-label { font-weight: bold; color: #4b2d83; }

.wr-chrome {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: #d8cfe8;
    border-bottom: 1px solid #999;
}
.wr-chrome .btn98 { padding: 2px 8px; }
.wr-url {
    flex-grow: 1;
    background: #fff;
    border: 2px inset #fff;
    padding: 3px 8px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
}
.wr-page { padding: 12px; min-height: 220px; max-height: 45vh; overflow-y: auto; font-size: 13px; }
/* maximized Navigator: the page pane takes all the room between the toolbar and the ring bar */
@media (min-width: 821px) {
    body.desktop .window.maximized[data-app="webring"] > .window-body { display: flex; flex-direction: column; }
    body.desktop .window.maximized[data-app="webring"] .wr-page { flex: 1 1 0; max-height: none; }
}
.wr-page h1, .wr-page h2 { margin-top: 0; }
.wr-page pre { font-size: 11px; overflow-x: auto; }
.wr-page table { border-collapse: collapse; font-size: 12px; }
.wr-ringbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 5px 8px;
    background: #d8cfe8;
    border-top: 1px solid #999;
    font-size: 11px;
}
.wr-ringbar .btn98 { font-size: 11px; padding: 2px 8px; }

/* ---------- glitter studio ---------- */

.glit-input {
    width: 100%;
    border: 2px inset #fff;
    padding: 5px 8px;
    font-family: inherit;
    margin-bottom: 6px;
}
.glit-preview {
    position: relative;
    min-height: 90px;
    background: #1a1030;
    border: 2px inset #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 6px;
    padding: 10px;
}
.glit-text { font-size: 24px; font-weight: bold; text-align: center; word-break: break-word; }
/* maximized studio: the preview stage takes the spare room, with bigger letters */
@media (min-width: 821px) {
    body.desktop .window.maximized[data-app="glitter"] > .window-body { display: flex; flex-direction: column; }
    body.desktop .window.maximized[data-app="glitter"] .glit-preview { flex: 1 1 0; }
    body.desktop .window.maximized[data-app="glitter"] .glit-text { font-size: clamp(24px, 6vw, 72px); }
}
.glit-text span { display: inline-block; animation: glit-pulse 1.2s ease-in-out infinite; white-space: pre; }
@keyframes glit-pulse {
    0%, 100% { transform: translateY(0) scale(1); filter: brightness(1); }
    50% { transform: translateY(-3px) scale(1.08); filter: brightness(1.6); }
}
.glit-rainbow span { color: #ff71ce; }
.glit-rainbow span:nth-child(4n+1) { color: #ff71ce; }
.glit-rainbow span:nth-child(4n+2) { color: #fffb96; }
.glit-rainbow span:nth-child(4n+3) { color: #05ffa1; }
.glit-rainbow span:nth-child(4n+4) { color: #01cdfe; }
.glit-pink span { color: #ff9ede; text-shadow: 0 0 6px #ff44cc; }
.glit-gold span { color: #ffd700; text-shadow: 0 0 6px #b8860b; }
.glit-toxic span { color: #7fff00; text-shadow: 0 0 6px #228b22; }
.glit-spark {
    position: absolute;
    font-size: 12px;
    animation: glit-pulse 1.6s ease-in-out infinite;
    pointer-events: none;
}

/* ---------- customizer / control panel ---------- */

.cz-sec { margin-bottom: 10px; font-size: 12px; }
.cz-sec > b { display: block; margin-bottom: 4px; color: #4b2d83; }
.cz-sec label { display: inline-block; margin-right: 10px; }
.cz-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; }
.cz-swatch {
    border: 2px solid;
    padding: 6px 4px;
    font-size: 11px;
    cursor: pointer;
    font-family: inherit;
}
.cz-swatch.sel { outline: 3px solid #9370DB; }
.cz-select { width: 100%; border: 2px inset #fff; padding: 3px; font-family: inherit; }
.cp-row { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.cp-opt { font-size: 12px; cursor: pointer; }

/* ---------- OurSpace shell: header search, main + sidebar ---------- */

.ms-header { flex-wrap: wrap; }
.ms-search {
    margin-left: auto;
    border: 2px inset #fff;
    padding: 2px 6px;
    font-family: inherit;
    font-size: 11px;
    width: 150px;
}
.ms-shell { display: flex; align-items: flex-start; }
#ms-content { flex-grow: 1; min-width: 0; }
#ms-side {
    width: 240px;
    flex-shrink: 0;
    border-left: 1px solid #99aacc;
    background: #f4f6fb;
    position: sticky;
    top: 27px;
    align-self: flex-start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}
.ms-narrow #ms-side { display: none; }
.ms-sidebox { border-bottom: 1px solid #c7d2e8; padding: 6px; font-size: 12px; }
.ms-sidebox > .ms-boxtitle { margin: -6px -6px 6px; }
.ms-sidebox .bl-group:first-child { padding-top: 0; }
#ms-side-buddies { max-height: 230px; overflow-y: auto; }
#ms-side-horo .horo-line { font-size: 11px; margin-bottom: 3px; }
#ms-side-horo .horo-head { font-size: 12px; }

/* feed filter chips */
.ms-feedbar { display: flex; gap: 4px; padding: 6px 8px 0; flex-wrap: wrap; }
.ms-feedbar .btn98 { font-size: 11px; padding: 2px 8px; }
.ms-feedbar .btn98.on { background: #cbbfe4; box-shadow: inset 1px 1px #0a0a0a, inset -1px -1px #fff; }

/* ---------- media posts ---------- */

.ms-post { border: 1px solid #99aacc; margin: 8px; background: #fff; }
.ms-post-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #eef4ff; font-size: 12px; }
.ms-post-head .ms-kind { color: #666; font-size: 10px; }
.ms-post-caption { padding: 6px 10px; font-size: 12px; word-wrap: break-word; }
.ms-post-media { padding: 2px 10px 8px; position: relative; }
.ms-post-media > img {
    max-width: min(380px, 100%);
    width: auto;
    height: auto;
    display: block;
    border: 1px solid #999;
    padding: 2px;
    background: #fff;
    image-rendering: auto;
    filter: contrast(1.04) saturate(0.92);
}
.ms-post-media > img.gif { image-rendering: pixelated; border: none; padding: 0; background: transparent; max-width: 100%; }
/* a photo/gif whose file is gone: the era's hotlink placeholder instead of an empty box */
.ms-gone {
    display: flex; align-items: center; gap: 10px;
    width: 300px; max-width: 100%; padding: 14px 12px;
    background: #f1f1f1; border: 1px solid #999;
    font: 11px Arial, sans-serif; color: #555; line-height: 1.4;
}
.ms-gone-x {
    flex: none; width: 18px; height: 18px; line-height: 16px; text-align: center;
    background: #fff; border: 1px solid #888; color: #c00; font-weight: bold;
}
.ms-gone i { color: #888; word-break: break-all; }

/* YouTube, 2006 edition */
.yt06 { width: 425px; max-width: 100%; background: #e6e6e6; border: 1px solid #999; font-family: Arial, sans-serif; color: #000; }
.yt06-head { display: flex; align-items: baseline; gap: 8px; padding: 3px 8px; background: #fff; border-bottom: 1px solid #ccc; }
.yt06-logo { font-size: 15px; font-weight: bold; letter-spacing: -0.5px; }
.yt06-logo b { background: #c4302b; color: #fff; padding: 0 3px; border-radius: 4px; font-weight: bold; }
.yt06-tag { font-size: 9px; color: #888; }
.yt06-title { font-size: 12px; font-weight: bold; padding: 4px 8px; color: #03c; background: #f6f6f6; border-bottom: 1px solid #ccc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yt06-screen { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.yt06-screen.noposter { background: repeating-linear-gradient(0deg, #2a2a2a 0 2px, #222 2px 4px); }
.yt06-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt06-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(0.92) saturate(0.8) blur(0.4px); image-rendering: pixelated; cursor: pointer; }
.yt06-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 78px; height: 54px; background: rgba(0,0,0,.6); border: 2px solid #ddd; border-radius: 6px;
    color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer;
    text-shadow: 1px 1px 0 #000;
}
.yt06-play.buffering { font-size: 11px; font-family: 'Courier New', monospace; width: auto; padding: 0 12px; }
/* control bar shared by .yt06 and .ourtube (MS.playerBar): play · seek · time · mute + volume · fullscreen */
.yt06-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 6px; padding: 4px 6px; background: linear-gradient(#f4f4f4, #d0d0d0); border-top: 1px solid #aaa; }
.yt06-btn { flex: none; font-family: inherit; font-size: 12px; background: linear-gradient(#fff, #ddd); border: 1px solid #888; border-radius: 3px; padding: 1px 7px; cursor: pointer; }
.yt06-track { flex: 1 1 20px; min-width: 20px; height: 9px; background: #999; border: 1px solid #666; position: relative; cursor: pointer; }
.yt06-fill { height: 100%; width: 0; background: linear-gradient(#e9686b, #c4302b); }
.yt06-time { flex: none; font-size: 10px; font-family: 'Courier New', monospace; min-width: 70px; text-align: center; }
/* volume: the classic wedge, filled up to the current level (--v), with a real <input type=range> on top */
.yt06-vol { flex: none; position: relative; width: 42px; height: 14px; }
.yt06-vol::before {
    content: ''; position: absolute; inset: 1px 0;
    background: linear-gradient(90deg, var(--fill, #c4302b) var(--v, 70%), #9a9a9a var(--v, 70%));
    clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.yt06-vol input {
    position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0;
    -webkit-appearance: none; appearance: none; background: none; cursor: pointer;
}
.yt06-vol input::-webkit-slider-runnable-track { height: 14px; background: none; }
.yt06-vol input::-webkit-slider-thumb {
    -webkit-appearance: none; width: 5px; height: 14px;
    background: linear-gradient(#fff, #cfcfcf); border: 1px solid #555; border-radius: 1px;
}
.yt06-vol input::-moz-range-track { height: 14px; background: none; }
.yt06-vol input::-moz-range-thumb {
    width: 3px; height: 12px;
    background: linear-gradient(#fff, #cfcfcf); border: 1px solid #555; border-radius: 1px;
}
/* failure card shown in a player screen instead of a black box (MS.playerDead) */
.yt06-dead {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 0 22px; text-align: center;
    background: repeating-linear-gradient(0deg, #2a2a2a 0 2px, #222 2px 4px);
    color: #aaa; font: 10px Arial, sans-serif;
}
.yt06-dead b { color: #fff; font-size: 13px; }
.yt06-dead a { color: #9cf; font-size: 11px; cursor: pointer; text-decoration: underline; }
.yt06-dead-icon { font-size: 26px; line-height: 1; color: #e5a11a; }
.dead > .yt06-bar { opacity: 0.55; }
.dead > .yt06-bar * { cursor: default; }
.yt06-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; padding: 5px 8px; background: #fff; border-top: 1px solid #ccc; }
.yt06-stars { color: #e5a11a; letter-spacing: 1px; }
.yt06-links { font-size: 10px; color: #03c; padding: 3px 8px 6px; background: #fff; }
.ms-post-credit { font-size: 9px; color: #999; padding: 0 10px 4px; text-align: right; }
.ms-post-actions { display: flex; gap: 4px; padding: 5px 8px; border-top: 1px solid #ddd; flex-wrap: wrap; }
.ms-post-actions .btn98 { font-size: 11px; padding: 2px 8px; }
.ms-post-actions .btn98.liked { background: #ffd6ff; }
.ms-post-comments { border-top: 1px dashed #bbb; background: #fafbff; }
.ms-post-comment { display: flex; gap: 6px; padding: 4px 8px; font-size: 11px; align-items: flex-start; }
.ms-post-comment b { color: #cc5500; cursor: pointer; }
.ms-post-comment .ms-avatar { width: 24px; height: 24px; }

/* OurTube player (local video files): same size and control bar as .yt06, dark skin.
   The screen is always 4:3; the clip is letterboxed inside it, so nothing depends on the file's own size. */
.ourtube { width: 425px; max-width: 100%; background: #222; border: 1px solid #000; font-family: Arial, sans-serif; color: #ccc; }
.ot-screen { position: relative; background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.ot-screen video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: contain; background: #000; cursor: pointer;
    filter: contrast(1.12) saturate(0.78) blur(0.35px);
}
.ourtube .yt06-bar { background: linear-gradient(#4a4a4a, #2b2b2b); border-top-color: #000; }
.ourtube .yt06-btn { background: linear-gradient(#7a7a7a, #454545); border-color: #111; color: #fff; }
.ourtube .yt06-track { background: #111; border-color: #000; }
.ourtube .yt06-vol::before { background: linear-gradient(90deg, #c00 var(--v, 70%), #666 var(--v, 70%)); }
.ourtube .ot-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35); cursor: pointer; color: #fff;
}
.ourtube .ot-play {
    width: 64px; height: 44px; background: #c00; border-radius: 8px;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    box-shadow: 0 0 0 2px #fff inset;
}
.ourtube .ot-buffer { font-family: 'Courier New', monospace; font-size: 12px; margin-top: 8px; }
.ourtube .ot-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: #222; color: #ccc; font-size: 10px; padding: 3px 8px;
}
.ourtube .ot-bar b { color: #fff; }

/* 2006 profile anatomy */
.ms-idcard { background: var(--ms-panel, transparent); padding: 6px; border: 1px solid var(--ms-accent, #6699cc); }
.ms-section, .ms-contactbox, .ms-urlbox, .ms-decor { background: var(--ms-panel, transparent); }
.ms-idstack { font-size: 11px; line-height: 1.45; margin: 4px 0; }
.ms-viewmy { font-size: 11px; margin: 3px 0; }
.ms-viewmy a { color: var(--ms-accent, #6699cc); font-weight: bold; text-decoration: none; }
.ms-viewblog { font-size: 12px; font-weight: bold; padding: 4px 18px; margin: 2px 0; }           /* malten's page: the one View My button */
.ms-editbig {                                                                                    /* My Page: the button under your picture */
    display: block; width: 100%; margin: 6px 0 2px; padding: 8px 6px;
    font-size: 14px; font-weight: bold; background: #ffe066;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px #b8860b, inset 2px 2px #fff6c2;
}
.ms-editbig:hover { background: #ffd43b; }
.ms-feedlink { cursor: pointer; }                                                                /* feed lines that lead to a bulletin / wall comment */
.ms-feedlink:hover { text-decoration: underline dotted; color: #003366; }
.ms-chrome { flex-shrink: 0; }                                                                   /* the OurSpace window's Address bar (index.html) */
.ms-chrome .nav-address { gap: 6px; }
.ms-chrome .ms-navbtn { font-size: 11px; padding: 2px 8px; }
.ms-chrome .wr-url { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-slider input[type="range"] { width: 130px; vertical-align: middle; margin: 0 4px; }         /* Control Panel: CRT intensity */
.ms-moodline { font-size: 11px; margin: 2px 0 4px; font-weight: bold; }
.ms-contactgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; padding: 4px 6px 2px; }
.ms-clink { font-size: 11px; color: inherit; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-clink:hover { text-decoration: underline; }
.ms-cicon { display: inline-block; width: 14px; margin-right: 3px; text-align: center; }
.ms-urlbox { border: 1px solid var(--ms-accent, #6699cc); font-size: 11px; }
.ms-urltext { padding: 4px 6px; font-family: 'Courier New', monospace; word-break: break-all; }
.ms-musicbox .ms-songbtn { margin: 6px; font-size: 11px; max-width: calc(100% - 12px); white-space: normal; text-align: left; }
.ms-songnote { font-size: 9px; opacity: .7; padding: 0 6px 6px; }
/* ===== VISITOR PROFILES: sign-up window + the full Edit My Page editor (ourspace.js / extras.js) ===== */
/* the sign-up ("join ourspace"): a Win98 dialog in OurSpace's content area (MS.renderSignup) */
.ms-signup {
    max-width: 560px; margin: 18px auto; background: #efe9f7; border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #f5f0fb, inset -2px -2px #8a7ba8, inset 2px 2px #fff, 4px 4px 0 rgba(40, 20, 70, .25);
    padding: 3px; font-size: 12px;
}
.ms-signup .title-bar { background: linear-gradient(90deg, #1c3f94, #6699cc); }
.su-x { min-width: 0; padding: 0 5px; font-size: 11px; line-height: 14px; }
.su-body { padding: 10px 12px 8px; }
.su-head { background: linear-gradient(180deg, #1c3f94, #003366); color: #fff; padding: 6px 10px; display: flex; align-items: baseline; gap: 10px; margin: -2px -4px 8px; }
.su-slogan { font-size: 11px; font-style: italic; color: #cfe0ff; }
.su-lead { margin: 0 0 10px; line-height: 1.45; }
.su-label { display: block; font-weight: bold; color: #003366; margin: 8px 0 3px; }
.su-namerow, .cz-namerow { display: flex; gap: 4px; flex-wrap: wrap; }
.su-name, #cz-name { flex: 1 1 160px; min-width: 0; border: 2px inset #fff; padding: 4px 6px; font: inherit; font-size: 14px; font-weight: bold; }
.su-err, .cz-err { color: #c3002f; font-weight: bold; font-size: 11px; min-height: 14px; margin-top: 2px; }
.su-hint, .cz-note { font-size: 10px; color: #666; }
/* the picture gallery (MS.avatarGallery: sign-up + Edit My Page): fixed height, scrolls, small sticky group headings */
.av-gallery { position: relative; max-height: 212px; overflow-y: auto; background: #fff; border: 2px inset #fff; padding: 0 4px 4px; margin-top: 2px; }
.av-group { position: sticky; top: 0; z-index: 1; margin: 0 -4px 4px; padding: 2px 6px; background: #e0d8ee; border-bottom: 1px solid #c8bde0; color: #4b2d83; font-size: 10px; font-weight: bold; }
.av-sec + .av-sec { margin-top: 6px; }
.su-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 4px; }
.su-av { padding: 2px; background: #fff; border: 2px outset #fff; cursor: pointer; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.su-av img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.su-av:hover { border-color: #9370DB; }
.su-av.sel { border: 2px solid #ff6600; outline: 2px solid #ffcc00; background: #fff8e0; }
.su-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.su-go { font-size: 14px; font-weight: bold; padding: 4px 14px; }
.su-later { font-size: 11px; color: #003366; }
.su-fine { margin-top: 10px; font-size: 9px; color: #888; }

/* a small Win98 message box over everything (MS.confirm98) */
.ms-modal { position: fixed; inset: 0; z-index: 16000; background: rgba(20, 10, 40, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ms-dialog {
    width: min(380px, 100%); background: #efe9f7; border: 1px solid #000; padding: 3px; font-size: 12px;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #f5f0fb, inset -2px -2px #8a7ba8, inset 2px 2px #fff, 4px 4px 0 rgba(40, 20, 70, .35);
}
.ms-dialog-body { display: flex; gap: 10px; padding: 12px 10px; line-height: 1.45; }
.ms-dialog-icon { font-size: 26px; line-height: 1; }
.ms-dialog-btns { display: flex; justify-content: center; gap: 8px; padding: 0 10px 10px; flex-wrap: wrap; }
.ms-dialog-btns .btn98 { min-width: 90px; }

/* the visitor's page */
.is-me .ms-decor { border: 0; }
.ms-guestnag { border-width: 2px; border-style: dashed; }
.ms-guestnag-row { display: flex; align-items: center; gap: 10px; padding: 8px; font-size: 12px; flex-wrap: wrap; }
.ms-guestnag-btn { font-weight: bold; animation: blinker 1.6s step-start infinite; }
.ms-blank { opacity: .55; font-style: italic; }
.ms-top5 { padding: 4px 6px 6px; font-size: 11px; }
.ms-top5-list { margin: 4px 0; padding-left: 22px; }
.ms-top5 .ms-songnote { padding: 2px 0; }
.ms-blogcompose { margin-bottom: 8px; }
.ms-bc-row { display: flex; gap: 4px; padding: 6px 8px 0; flex-wrap: wrap; }
.ms-bc-title { flex: 2 1 180px; }
.ms-bc-mood { flex: 1 1 110px; }
.ms-bc-row input, .ms-bc-body { min-width: 0; border: 2px inset #fff; padding: 4px; font: inherit; font-size: 12px; background: #fff; color: #000; }
.ms-bc-body { display: block; width: calc(100% - 16px); margin: 4px 8px; resize: vertical; box-sizing: border-box; }
.ms-blogcompose > .btn98 { margin: 0 8px 8px; }
.ms-ownernote { margin: 8px; }
.ms-ownernote > .btn98 { margin: 0 0 8px 8px; }

/* pinned bulletins: always first, never reposted */
.ms-bulletin.ms-pinned { border: 2px solid #ff6600; background: #fff8e0; }
.ms-pin { margin-left: auto; font-size: 10px; font-weight: bold; color: #cc5500; }
.bl-owner { color: #cc8800; }
.horo-guess { font-size: 10px; opacity: .7; font-weight: normal; }

/* Edit My Page (Customizer in extras.js): one scrolling page of compact sections, the save bar always in reach */
body.desktop .window[data-app="customize"] > .window-body { max-height: min(78vh, 720px); padding-top: 0; padding-bottom: 0; }
body.desktop .window.maximized[data-app="customize"] > .window-body { max-height: none; }
.cz-block { margin: 0 0 12px; }
.cz-h { position: sticky; top: 0; z-index: 2; margin: 0 -8px 6px; padding: 4px 8px; background: linear-gradient(90deg, #4b2d83, #9370DB); color: #fff; font-size: 12px; font-weight: bold; }
.cz-hnote { margin-left: 6px; font-size: 10px; font-weight: normal; opacity: .85; }
.cz-sec .cz-lbl { display: block; margin: 8px 0 3px; font-weight: bold; color: #4b2d83; font-size: 11px; }
.cz-block > .cz-fields { margin-top: 6px; }
.cz-avrow { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 6px; }
.cz-avnow { width: 84px; height: 84px; object-fit: contain; background: #fff; border: 2px inset #fff; image-rendering: pixelated; flex-shrink: 0; }
.cz-avside { flex: 1 1 auto; min-width: 0; }
.cz-avside .cz-lbl { margin-top: 0; }
.cz-avbtns { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 3px; }
.cz-themes { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.cz-themes .cz-swatch { padding: 5px 3px; font-size: 10px; }
.cz-upload { position: relative; overflow: hidden; cursor: pointer; }
.cz-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.cz-sec label.btn98 { margin-right: 0; }
.cz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.cz-fields.cz-wide { grid-template-columns: 1fr; }
.cz-fields label { display: flex; flex-direction: column; gap: 2px; margin: 0; font-weight: bold; color: #4b2d83; font-size: 11px; }
.cz-fields input, .cz-fields textarea { border: 2px inset #fff; padding: 3px 4px; font: inherit; font-size: 12px; font-weight: normal; color: #000; background: #fff; min-width: 0; }
.cz-fields textarea { resize: vertical; }
.cz-fields .cz-select { font-weight: normal; }
.cz-fields input[hidden] { display: none; }
.cz-checks { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.cz-sec label.cz-check { margin-right: 0; font-size: 11px; }
.cz-tiles label { display: inline-flex; align-items: center; gap: 3px; margin-right: 0; font-size: 11px; }
.cz-tileprev { display: inline-block; width: 16px; height: 16px; border: 1px solid #888; background-size: 16px 16px; }
.cz-count { font-size: 10px; color: #666; }
.cz-gifgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 4px; margin-top: 4px; }
.cz-gifgrid.cz-badges { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.cz-gif { height: 54px; padding: 2px; background: #fff; border: 2px outset #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cz-badges .cz-gif { height: 39px; }
.cz-gif img { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.cz-gif.sel { border: 2px solid #ff6600; outline: 2px solid #ffcc00; background: #fff8e0; }
.cz-foot { position: sticky; bottom: 0; z-index: 2; background: #efe9f7; border-top: 1px solid #8a7ba8; padding: 6px 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cz-warn { font-size: 10px; color: #666; }
.cz-nome { padding: 14px 6px; text-align: center; font-size: 12px; }
@media (max-width: 820px) {
    .cz-fields { grid-template-columns: 1fr; }
    .ms-signup { margin: 8px; }
}
/* ===== end VISITOR PROFILES ===== */

/* My Page: malten's real Spotify top songs (Spotify in apps.js paints into .sp-box) */
.sp-box { padding: 4px 6px 6px; font-size: 11px; }
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-row { display: flex; align-items: center; gap: 5px; padding: 3px 2px; border-bottom: 1px dotted var(--ms-accent, #6699cc); }
.sp-row.sp-on { background: rgba(255, 204, 0, .3); }
.sp-rank { width: 13px; flex-shrink: 0; text-align: right; font-weight: bold; font-family: 'Courier New', monospace; color: var(--ms-accent, #6699cc); }
.sp-art { width: 34px; height: 34px; flex-shrink: 0; object-fit: cover; border: 1px solid #999; background: #f4f0fa; }
.sp-art.sp-zoom { cursor: zoom-in; }
.sp-noart { display: flex; align-items: center; justify-content: center; font-size: 16px; color: #9370DB; }
.sp-meta { flex-grow: 1; min-width: 0; line-height: 1.25; }
.sp-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-weight: bold;
    color: var(--ms-accent, #6699cc);
    text-decoration: none;
    word-break: break-word;
}
.sp-name:hover { text-decoration: underline; }
.sp-artist { font-size: 10px; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-play { padding: 1px 5px; font-size: 10px; flex-shrink: 0; min-width: 22px; }
.sp-via { display: block; font-size: 9px; font-weight: bold; color: #169a16; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.sp-via:hover { text-decoration: underline; }
/* volume for the previews: mute button + the video players' wedge (.yt06-vol) in spotify green.
   Spotify's own player can't be told a volume, so the row greys out while that's what's playing. */
.sp-vol-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 5px; margin-top: 5px; font-size: 9px; }
.sp-mute { padding: 1px 4px; font-size: 10px; min-width: 22px; }
.sp-vol { --fill: #169a16; width: 64px; }
.sp-vol-pct { min-width: 24px; font-family: 'Courier New', monospace; }
.sp-vol-note { display: none; color: #666; font-style: italic; }
.sp-vol-row.off .sp-vol-note { display: inline; }
.sp-vol-row.off .sp-mute, .sp-vol-row.off .sp-vol { opacity: .45; }
.sp-vol-row.off .sp-vol input { cursor: default; }
/* Spotify's embed, driven by the list's own ▶ buttons. It sits in the corner fully transparent
   (its iframe is loading="lazy", so it has to be inside the viewport to load at all); .show makes
   it a visible tiny window when the browser wants a tap inside the embed. */
.sp-embed {
    position: fixed; right: 10px; bottom: 46px; z-index: 7000; opacity: 0; pointer-events: none;
    width: 306px; padding: 3px; background-color: #efe9f7; border: 1px solid #000;
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #f5f0fb, inset -2px -2px #8a7ba8, inset 2px 2px #fff, 4px 4px 0 rgba(20, 8, 40, 0.4);
}
.sp-embed.show { opacity: 1; pointer-events: auto; }
.sp-embed .title-bar { cursor: default; }
.sp-embed-x { border: 0; background: none; color: #fff; font-size: 11px; font-weight: bold; cursor: pointer; padding: 0 4px; }
.sp-embed-body { height: 80px; margin-top: 3px; background: #000; overflow: hidden; }
.sp-embed-body iframe { display: block; border: 0; width: 300px; height: 80px; }
.sp-more, .sp-profile { display: block; margin-top: 4px; font-size: 10px; color: var(--ms-accent, #6699cc); }
.sp-status { margin-top: 5px; font-size: 9px; opacity: .75; }
.sp-status.live { color: #169a16; opacity: 1; font-weight: bold; }
.sp-nap { padding: 10px 4px; font-size: 11px; line-height: 1.45; text-align: center; }
.sp-nap a { color: var(--ms-accent, #6699cc); }
.ms-musicbox .sp-box + .ms-songbtn { margin-top: 2px; }
.ms-boxsub { font-weight: normal; font-size: 10px; opacity: .85; }

/* ===== SONG SEARCH + VISITOR TOP SONGS (SongSearch / TopSongs in apps.js) ===== */
/* TopSongs.mount paints a visitor's list into .sp-box.ts-box with the same rows (.sp-row) as malten's list */
.ts-title { margin: 0 0 3px; font-size: 11px; font-weight: bold; color: var(--ms-accent, #6699cc); }
.ts-empty { padding: 8px 4px; font-size: 11px; font-style: italic; text-align: center; opacity: .8; }
/* SongSearch.picker(): search bar → results (scrolling, sunken) → the chosen list (▲ ▼ ✕) */
.ss-picker { font-size: 11px; max-width: 460px; }
.ss-bar { display: flex; gap: 4px; }
.ss-q {
    flex: 1 1 auto; min-width: 60px;
    border: 2px inset #fff; background-color: #fff; color: #000;
    padding: 3px 5px; font-family: inherit; font-size: 11px;
}
.ss-go { font-size: 11px; padding: 2px 10px; }
.ss-msg { margin: 4px 0; font-size: 10px; line-height: 1.35; color: #555; min-height: 1.35em; }
.ss-msg.bad { color: #b00000; }
.ss-results {
    max-height: 236px; overflow-y: auto;
    border: 2px inset #fff; background-color: #fff; color: #000; padding: 0 3px;
}
.ss-results[hidden], .ss-picked[hidden] { display: none; }
.ss-results .sp-row:last-child { border-bottom: 0; }
.ss-head { margin: 8px 0 2px; font-weight: bold; }
.ss-picked { border: 1px solid var(--ms-accent, #6699cc); background-color: rgba(255, 255, 255, .55); padding: 0 3px; }
.ss-picked .sp-row:last-child { border-bottom: 0; }
.ss-add, .ss-tool { flex-shrink: 0; padding: 1px 5px; font-size: 10px; }
.ss-add { min-width: 50px; }
.ss-tool { min-width: 20px; padding: 1px 3px; }
/* Win98 "greyed out": embossed grey text, and the button doesn't push in */
.ss-picker .btn98:disabled { color: #8a7ba8; text-shadow: 1px 1px #fff; cursor: default; }
.ss-picker .btn98:disabled:active {
    box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff,
                inset -2px -2px #8a7ba8, inset 2px 2px #f5f0fb;
}
/* ===== end SONG SEARCH ===== */
.ms-blogentry { padding: 6px 8px; font-size: 12px; }
.ms-blogentry a { display: block; color: var(--ms-accent, #6699cc); margin-bottom: 3px; }
.ms-blogtitle { font-weight: bold; }
.ms-blogexcerpt { font-size: 11px; line-height: 1.4; margin: 2px 0 5px; }
.ms-blurbs { display: flow-root; }
.ms-aboutgif { float: right; width: 96px; height: 96px; margin: 6px 8px 4px 8px; }
.ms-survey-q { font-weight: bold; width: 46%; background: rgba(128,128,128,.14); }
.ms-friendcount { padding: 5px 8px 0; font-size: 12px; }
.ms-minifriend-name { font-size: 10px; color: var(--ms-accent, #6699cc); font-weight: bold; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-viewall { display: block; padding: 0 8px 8px; font-size: 11px; color: var(--ms-accent, #6699cc); }
.ms-comment { display: flex; gap: 8px; border-top: 1px solid rgba(128,128,128,.35); padding: 6px 8px; }
.ms-comment-who { width: 72px; flex-shrink: 0; text-align: center; font-size: 10px; }
.ms-comment-who .ms-avatar { width: 50px; height: 50px; margin: 0 auto 2px; display: block; }
.ms-comment-who b { cursor: pointer; display: block; word-break: break-all; }
.ms-comment-col { flex-grow: 1; min-width: 0; }
.ms-comment-col .ms-time { margin-left: 0; display: block; }
.ms-comment-body { padding: 2px 0 0; }
.ms-newrow { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0; }
.ms-glitter { display: block; max-height: 48px; max-width: 200px; margin: 3px 0 2px; image-rendering: pixelated; }
.ms-newrow b { color: #cc5500; cursor: pointer; }

/* My Page boxes */
.ms-mypage-bio { font-size: 12px; line-height: 1.5; }
.ms-mypage-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; padding: 6px 8px; }
.ms-mypage-links { padding: 6px 8px; font-size: 12px; }
.ms-mypage-links a { display: block; color: #cc5500; margin-bottom: 4px; }
.ms-badgewall { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; }
.ms-badgewall img { width: 88px; height: 31px; image-rendering: pixelated; }
.ms-section .top8-grid { padding: 8px; }
.ms-section .top8-grid .friend { min-width: 0; }
.ms-section .top8-grid .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-section .webring-widget { margin: 8px; }
.ms-gbteaser-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px; }
.ms-gbsign { width: 84px; height: auto; flex-shrink: 0; cursor: pointer; image-rendering: pixelated; }
.ms-gbteaser-mid { flex: 1 1 150px; min-width: 0; }
.ms-gbteaser-lead { font-size: 11px; font-style: italic; opacity: .85; margin-bottom: 3px; }
.ms-gbentry { font-size: 12px; padding: 2px 0; border-bottom: 1px dotted rgba(128,128,128,.5); word-wrap: break-word; }
.ms-gbentry b { color: var(--ms-accent, #6699cc); }
.ms-gbcta { max-width: 100%; margin-top: 7px; padding: 5px 12px; font-size: 13px; font-weight: bold; white-space: normal; color: #000; background: #ffec8b; animation: ms-cta-pulse 1.2s ease-in-out infinite; }
@keyframes ms-cta-pulse { 50% { background: #ffb6f0; } }

/* Guestbook tab (the form + entries are Guestbook in apps.js) */
.ms-gbpage { padding: 8px 10px 12px; }
.ms-gbintro { font-size: 12px; margin: 0 0 6px; }
.ms-gbhost .messages { height: 32vh; min-height: 150px; }

/* Blog tab + residents' blog pages */
.ms-blogpage { display: flex; flex-direction: column; gap: 8px; padding: 8px; }
.ms-bloghead { display: flex; align-items: center; gap: 10px; padding: 8px; }
.ms-bloghead .ms-avatar { width: 54px; height: 54px; }
.ms-bloghead-mid { min-width: 0; }
.ms-bloghead a, .ms-blogpost-foot a, .ms-blogsoon a { color: var(--ms-accent, #6699cc); }
.ms-blogcard-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px; color: inherit; text-decoration: none; }
.ms-blogcard-row:hover { background: rgba(102,153,204,.14); }
.ms-blogcard-img { width: 90px; height: 90px; flex-shrink: 0; object-fit: contain; background: #fff; border: 2px outset #fff; }
.ms-blogcard-mid { min-width: 0; }
.ms-blogcard-more { font-size: 11px; font-weight: bold; color: #cc5500; }
.ms-blogpost-title { padding: 6px 8px 0; font-size: 14px; font-weight: bold; color: var(--ms-accent, #6699cc); }
.ms-blogcard-mid .ms-blogpost-title { padding: 0 0 3px; }
.ms-blogpost-mood { padding: 2px 8px 0; font-size: 11px; font-style: italic; opacity: .85; }
.ms-blogpost-body { padding: 6px 8px 8px; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.ms-blogpost-foot { padding: 4px 8px 6px; font-size: 10px; border-top: 1px dotted rgba(128,128,128,.5); }
.ms-blogsoon { display: flex; align-items: center; gap: 10px; padding: 8px; font-size: 12px; }
.ms-blogsoon a { display: block; margin-top: 4px; font-weight: bold; }

/* a resident's Pics / Videos grid */
.ms-mediagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; padding: 8px; }
.ms-mediatile { padding: 4px; border: 1px solid #99aacc; background: #fff; cursor: pointer; }
.ms-mediatile:hover { background: #eef4ff; }
.ms-mediathumb { position: relative; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #111; }
.ms-mediathumb img { width: 100%; height: 100%; object-fit: cover; }
.ms-mediathumb.gif { background: #f4f0fa; }
.ms-mediathumb.gif img { object-fit: contain; image-rendering: pixelated; }
.ms-mediathumb-tape { font-size: 34px; }
.ms-mediaplay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 10px; border-radius: 4px; background: rgba(0,0,0,.65); color: #fff; font-size: 14px; }
.ms-mediacap { margin-top: 3px; max-height: 2.6em; overflow: hidden; font-size: 10px; line-height: 1.3; color: #333; }

/* ---------- presence dots on profiles ---------- */

.online-dot { font-size: 10px; font-weight: bold; margin: 2px 0; }
.online-dot.blink { color: #0a7d0a; animation: blinker 1.4s step-start infinite; }
.online-dot.away { color: #997700; font-weight: normal; font-style: italic; }
.online-dot.off { color: #999; font-weight: normal; }

/* toasts */
#toasts {
    position: fixed;
    right: 10px;
    bottom: 78px;
    z-index: 15000;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}
.toast {
    background: #fffce8;
    border: 1px solid #000;
    box-shadow: 2px 2px 0 rgba(0,0,0,.35);
    padding: 7px 12px;
    font-size: 12px;
    cursor: pointer;
    max-width: 260px;
    animation: toast-in .25s ease-out;
}
.toast:hover { background: #fff3c0; }
@keyframes toast-in {
    from { transform: translateX(30px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

/* ---------- small screens: stack everything ---------- */

@media (max-width: 820px) {
    body.desktop { overflow: auto; height: auto; display: block; }
    #desktop { overflow: visible; }
    #icons { position: static; flex-direction: row; max-height: none; justify-content: center; }
    .desk-icon { color: #2b1a4d; text-shadow: none; }
    body.desktop .window {
        position: static !important;
        width: auto !important;
        margin: 10px;
    }
    body.desktop .window.maximized,
    body.desktop .window.sized { width: auto !important; height: auto !important; }   /* maximize / fill mean nothing when stacked */
    body.desktop .window > .window-body { max-height: none; }
    #taskbar { position: sticky; bottom: 0; }
    #buddy, .desk-deco { display: none; }
    .top8-grid { grid-template-columns: repeat(2, 1fr); }
}