/* App-specific styles. Each app section is headed by its id. Boot stages first. */

/* ---- boot ---- */
/* Stages are styled with fixed 1995 colours, not theme variables: the boot always looks like a 1995 PC. */
.boot { --b-face: #c0c0c0; --b-bevel: inset -1px -1px #000, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; --b-btn: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf; --b-field: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000; }
.boot .btn { background: #c0c0c0; color: #000; box-shadow: var(--b-btn); border: 0; border-radius: 0; font-family: "MS Sans", Tahoma, Arial, sans-serif; font-size: 11px; }
.boot .btn:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080; }
.boot .btn.primary { outline: 1px solid #000; }
.boot .field { background: #fff; color: #000; box-shadow: var(--b-field); border: 0; font-family: "MS Sans", Tahoma, Arial, sans-serif; }

/* POST: Award-style BIOS screen, grey on black, logo top right, ribbon top left */
.boot.post-stage { background: #000; }
.boot.post-stage::before { content: ""; position: absolute; top: 14px; right: 16px; width: 160px; height: 90px; background: url("../assets/gifs/post-logo.svg") center / contain no-repeat; }
.boot.post-stage::after { content: ""; position: absolute; top: 14px; left: 14px; width: 30px; height: 33px; background: url("../assets/gifs/post-award.svg") center / contain no-repeat; }
.boot .post { margin: 0; padding: 14px 16px 60px 56px; font: 20px/1.2 var(--mono); color: #aaaaaa; white-space: pre-wrap; text-shadow: 0 0 1px #888; max-width: 100%; overflow-wrap: anywhere; }
.boot .boot-skip { position: absolute; right: 12px; bottom: 12px; font: 18px var(--mono); background: #000; color: #aaa; border: 1px solid #555; padding: 6px 10px; z-index: 2; }
.boot .boot-skip:hover { color: #fff; border-color: #fff; }
@media (max-width: 640px) {
  .boot.post-stage::before { width: 96px; height: 54px; top: auto; bottom: 60px; right: 12px; }
  .boot .post { font-size: 15px; padding-left: 50px; }
}

/* Dial-up: the Dial-Up Networking "Connecting to" box on a teal desktop */
.boot.dial-stage { background: #008080; font-family: "MS Sans", Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }
.boot .dial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.boot .dial-box { background: #c0c0c0; box-shadow: var(--b-bevel); padding: 3px; width: 100%; max-width: 380px; }
.boot .dial-title { position: relative; background: #000080; color: #fff; font-weight: 700; padding: 3px 24px 3px 4px; margin-bottom: 10px; height: 18px; line-height: 12px; }
.boot .dial-title::after { content: "\00d7"; position: absolute; right: 2px; top: 2px; width: 16px; height: 14px; background: #c0c0c0; color: #000; box-shadow: var(--b-btn); font: bold 13px/13px Arial, sans-serif; text-align: center; }
.boot .dial-row { display: flex; gap: 14px; align-items: center; padding: 8px 12px 16px; }
.boot .dial-icons { display: inline-flex; align-items: center; gap: 2px; flex: none; }
.boot .dial-icons i { display: inline-block; width: 32px; height: 32px; background: center / contain no-repeat; image-rendering: pixelated; }
.boot .dial-icons .dial-pc { background-image: url("../assets/icons/mycomputer.svg"); }
.boot .dial-icons .dial-net { background-image: url("../assets/icons/browser.svg"); }
.boot .dial-link { width: 30px !important; height: 6px !important; background: repeating-linear-gradient(90deg, #808080 0 3px, transparent 3px 6px) !important; }
.boot .dial-link.on { background: repeating-linear-gradient(90deg, #00a000 0 3px, transparent 3px 6px) !important; animation: dialflow .4s steps(2) infinite; }
@keyframes dialflow { to { background-position: 6px 0; } }
.boot .dial-text { flex: 1; line-height: 1.5; min-height: 34px; }
.boot .dial-btns { display: flex; gap: 6px; justify-content: flex-end; padding: 0 8px 8px; }
.boot .dial-btns .boot-skip { position: static; font: 11px "MS Sans", Tahoma, Arial, sans-serif; color: #000; background: #c0c0c0; border: 0; box-shadow: var(--b-btn); padding: 4px 10px; min-width: 75px; }

/* Splash: cloud sky, flag, "Bible95" wordmark, animated band at the bottom like the 1995 startup screen */
.boot.splash-stage { background: #000; }
.boot .splash { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; overflow: hidden; padding: 16px; }
.boot .splash-sky { position: absolute; inset: 0; background: linear-gradient(#1d3f9a, #3f74c8 50%, #9cc2ee); }
.boot .splash-sky::before { content: ""; position: absolute; inset: 0; background: url("../assets/wallpapers/win98-clouds.svg") center / cover no-repeat; }
.boot .splash::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(90deg, #000080, #1084d0, #8fd0ff, #1084d0, #000080, #1084d0, #8fd0ff, #1084d0, #000080) 0 0 / 200% 100%; animation: splashband 2s linear infinite; }
@keyframes splashband { to { background-position: -100% 0; } }
.boot .splash-logo { position: relative; display: flex; align-items: center; gap: 16px; }
.boot .splash-flag { width: 84px; height: 74px; background: url("../assets/icons/start.svg") center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45)); animation: flagwave 1.6s ease-in-out infinite; }
@keyframes flagwave { 50% { transform: skewY(-4deg) translateY(-2px); } }
.boot .splash-word { position: relative; font: 900 72px/1 "Arial Black", "Franklin Gothic Heavy", Impact, sans-serif; color: #000; letter-spacing: -3px; text-shadow: 2px 2px 0 rgba(255,255,255,.35); }
.boot .splash-word::before { content: "The 90s"; position: absolute; left: 4px; top: -18px; font: italic 700 16px/1 "Times New Roman", serif; letter-spacing: 0; color: #fff; text-shadow: 1px 1px 0 #000; }
.boot .splash-word b { color: #ff6a00; font-size: 84px; vertical-align: -4px; margin-left: 4px; text-shadow: 3px 3px 0 #000; -webkit-text-stroke: 1px #000; }
.boot .splash-sub { position: relative; color: #fff; font: 22px var(--mono); text-shadow: 2px 2px 0 #000; text-align: center; }
.boot .splash-bar { position: relative; width: 320px; max-width: 80%; height: 18px; background: #c0c0c0; box-shadow: var(--b-field); padding: 3px; }
.boot .splash-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #000080 0 10px, transparent 10px 12px); }
.boot .splash-note { position: relative; color: #fff; font: 18px var(--mono); text-shadow: 1px 1px 0 #000; }
@media (max-width: 640px) {
  .boot .splash-logo { gap: 8px; }
  .boot .splash-flag { width: 52px; height: 46px; }
  .boot .splash-word { font-size: 44px; letter-spacing: -2px; }
  .boot .splash-word b { font-size: 52px; }
  .boot .splash-sub { font-size: 18px; }
}

/* Login: the "Welcome to Windows" logon box: keys left, fields middle, OK/Cancel stacked right */
.boot.login-stage { background: #008080; font-family: "MS Sans", Tahoma, Arial, sans-serif; font-size: 11px; color: #000; }
.boot .login { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.boot .login-box {
  position: relative; background: #c0c0c0; box-shadow: var(--b-bevel); padding: 30px 14px 14px; width: 100%; max-width: 440px;
  display: grid; grid-template-columns: 52px 1fr 84px; column-gap: 12px; row-gap: 8px; align-items: start;
}
.boot .login-box::before { content: "Welcome to 90s Bible"; position: absolute; left: 3px; right: 3px; top: 3px; height: 18px; padding: 3px 4px; background: #000080; color: #fff; font-weight: 700; line-height: 12px; }
.boot .login-box::after { content: "?"; position: absolute; right: 5px; top: 5px; width: 16px; height: 14px; background: #c0c0c0; box-shadow: var(--b-btn); font: bold 11px/14px "MS Sans", Arial, sans-serif; text-align: center; }
.boot .login-logo { grid-column: 1; grid-row: 1 / span 3; width: 48px; height: 48px; background: url("../assets/icons/keys.svg") center / contain no-repeat; image-rendering: pixelated; }
.boot .login-h { grid-column: 2; font-weight: 700; font-size: 12px; margin: 0; }
.boot .login p { grid-column: 2; margin: 0; line-height: 1.4; }
.boot .login label { grid-column: 2; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.boot .login .field { flex: 1; min-width: 0; }
.boot .login-hint { grid-column: 2; font-family: var(--mono); font-size: 18px; }
.boot .login .cur { display: inline-block; width: .5em; height: .8em; background: #000; vertical-align: -1px; margin-left: 3px; animation: blink 1s steps(1) infinite; }
.boot .login-btns { grid-column: 3; grid-row: 1 / span 4; display: flex; flex-direction: column; gap: 6px; }
.boot .login-btns .btn { min-width: 0; width: 100%; }
.boot .login-quick { grid-column: 2 / span 2; font-size: 11px; }
@media (max-width: 480px) {
  .boot .login-box { grid-template-columns: 40px 1fr; }
  .boot .login-logo { width: 36px; height: 36px; }
  .boot .login-btns { grid-column: 1 / span 2; grid-row: auto; flex-direction: row; justify-content: flex-end; }
  .boot .login-btns .btn { width: auto; min-width: 75px; }
  .boot .login label { white-space: normal; }
}

/* ---- shared bits ---- */
.odometer { display: inline-flex; gap: 1px; background: #000; padding: 2px; border: 2px inset #888; }
.odometer b { display: inline-block; width: 14px; background: #111; color: #0f0; font: 700 14px/18px var(--mono); text-align: center; border-right: 1px solid #333; }
.rainbow-hr { height: 6px; background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); margin: 8px 0; border: 1px solid #000; }
.wordart { font: 700 28px/1.1 Impact, "Arial Black", sans-serif; background: linear-gradient(#ff8a00, #ffd400 45%, #ff3d00 55%, #7a0000); -webkit-background-clip: text; background-clip: text; color: transparent; transform: skewX(-8deg); display: inline-block; filter: drop-shadow(3px 3px 0 #003399); }
.pill { display: inline-block; padding: 1px 6px; border: 1px solid var(--dk); background: var(--paper); }
.comic { font-family: "Comic Neue", "Comic Sans MS", cursive; }