/* Windows 98 shell for the approved Body.exe experience only. */
:root { --body-mobile:0; --win-gray:#c0c0c0; --win-white:#fff; --win-darker:#404040; --win-dark:#808080; --win-black:#000; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100dvh; background:#000; font:11px Tahoma,Arial,sans-serif; }
button,input { font:inherit; }
button { color:#000; }
button:focus-visible,input:focus-visible { outline:2px dotted #000; outline-offset:2px; }
.body-desktop { min-height:calc(100dvh - 36px); padding:max(16px,env(safe-area-inset-top)) 16px; }
.body-icon { display:flex; flex-direction:column; align-items:center; gap:6px; width:82px; padding:8px; background:transparent; color:#fff; border:1px solid transparent; cursor:pointer; text-shadow:1px 1px #000; }
.body-icon:hover img { opacity:0.85; }
.body-icon:focus-visible { outline:2px dotted #fff; outline-offset:2px; }
.body-icon img { image-rendering:pixelated; }
.titlebar { touch-action:none; }
body > div[style] { max-width:calc(100vw - 20px); max-height:calc(100dvh - 44px); overflow:auto !important; }
#bodyPassOverlay { max-width:none; max-height:none; padding:12px; overflow:auto; }
#bodyPassOverlay > div { max-width:100%; max-height:calc(100dvh - 24px); overflow:auto !important; }
  @keyframes windowOpen {
    from { transform: translate(var(--window-x, 0px), var(--window-y, 0px)) scale(0.92); opacity: 0.5; }
    to   { transform: translate(var(--window-x, 0px), var(--window-y, 0px)) scale(1);    opacity: 1; }
  }

  /* Title bar */
  .titlebar {
    background: linear-gradient(to bottom, #d4d0c8 0%, #a0a0a0 100%);
    padding: 3px 4px 3px 6px;
    display: flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    cursor: grab;
    user-select: none;
    border-bottom: 1px solid #707070;
  }
  .titlebar:active { cursor: grabbing; }
  .titlebar-icon { font-size: 14px; flex-shrink: 0; }
  .titlebar-text {
    color: #000;
    font-size: 11px;
    font-weight: bold;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.2px;
  }
  .titlebar-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }
  .tb-btn {
    width: 16px;
    height: 14px;
    background: var(--win-gray);
    border-top:    1px solid var(--win-white);
    border-left:   1px solid var(--win-white);
    border-right:  1px solid var(--win-darker);
    border-bottom: 1px solid var(--win-darker);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    color: var(--win-black);
    line-height: 1;
  }
  .tb-btn:active {
    border-top:    1px solid var(--win-darker);
    border-left:   1px solid var(--win-darker);
    border-right:  1px solid var(--win-white);
    border-bottom: 1px solid var(--win-white);
  }
  .tb-btn.close { font-size: 10px; font-weight: 900; }

  .win-btn {
    min-width: 75px;
    padding: 3px 12px;
    background: var(--win-gray);
    border-top:    2px solid var(--win-white);
    border-left:   2px solid var(--win-white);
    border-right:  2px solid var(--win-darker);
    border-bottom: 2px solid var(--win-darker);
    box-shadow: 1px 1px 0 var(--win-black);
    font-size: 11px;
    font-family: 'MS Sans Serif', 'Tahoma', sans-serif;
    cursor: pointer;
    text-align: center;
    position: relative;
  }
  .win-btn:active {
    border-top:    2px solid var(--win-darker);
    border-left:   2px solid var(--win-darker);
    border-right:  2px solid var(--win-white);
    border-bottom: 2px solid var(--win-white);
    box-shadow: none;
    padding: 4px 11px 2px 13px;
  }
  .win-btn.danger { color: #cc0000; font-weight: bold; }
  .win-btn .underline { text-decoration: underline; }

  /* Statusbar */
  .statusbar {
    background: var(--win-gray);
    border-top: 1px solid var(--win-dark);
    padding: 2px 20px 2px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    position: relative;
  }
  .status-panel {
    border-top:   1px solid var(--win-darker);
    border-left:  1px solid var(--win-darker);
    border-right: 1px solid var(--win-white);
    border-bottom:1px solid var(--win-white);
    padding: 1px 6px;
    font-size: 10px;
    color: var(--win-black);
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
  }
  /* ===== Body Remix — identidad CRT para pop-ups de error ===== */
  @font-face { font-family:'BodyVT'; src:url(../assets/body-exe/body-vt.woff2) format('woff2'); font-display:block; }
  .bx-crt {
    position:relative; overflow:hidden; margin:4px 4px 0 4px;
    background:#0b0d0d; min-height:118px; padding:14px 16px 16px 16px;
    font-family:'BodyVT','VT323',monospace; font-size:21px; line-height:0.95;
    letter-spacing:1px; text-transform:uppercase; color:#3de8c6;
    text-shadow:0 0 3px rgba(61,232,198,.9), 0 0 12px rgba(61,232,198,.4);
    border-top:2px solid #404040; border-left:2px solid #404040;
    border-right:2px solid #fff; border-bottom:2px solid #fff;
    animation:bxFlicker 3.2s infinite steps(1);
  }
  .bx-crt::before {           /* retícula de fósforo + halo central */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(61,232,198,.10) 0%, rgba(61,232,198,0) 60%),
      repeating-linear-gradient(0deg,  rgba(61,232,198,.05) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(90deg, rgba(61,232,198,.05) 0 1px, transparent 1px 7px);
  }
  .bx-crt::after {            /* scanlines + viñeta de tubo */
    content:''; position:absolute; inset:0; pointer-events:none;
    background:
      repeating-linear-gradient(0deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px),
      radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.65) 100%);
  }
  .bx-crt .bx-l { position:relative; z-index:1; white-space:pre-wrap; min-height:1em; }
  .bx-crt .bx-l + .bx-l { margin-top:2px; }
  .bx-cur {
    display:inline-block; width:.5em; height:.82em; margin-left:2px; vertical-align:-1px;
    background:currentColor; box-shadow:0 0 6px rgba(61,232,198,.8);
    animation:bxBlink 1s infinite steps(1);
  }
  .bx-crt.bx-ready { min-height:150px; display:flex; align-items:center; justify-content:center; padding:0; }
  .bx-crt.bx-ready .bx-l { font-size:64px; letter-spacing:4px; text-transform:none; }
  .bx-crt.bx-ready .bx-cur { width:.62em; height:.7em; vertical-align:0; }
  .bx-vhs {
    position:relative; overflow:hidden; margin:4px 4px 0 4px; height:190px; background:#3a1fd0;
    border-top:2px solid #404040; border-left:2px solid #404040;
    border-right:2px solid #fff; border-bottom:2px solid #fff;
  }
  .bx-vhs img {
    position:absolute; inset:-6px; width:calc(100% + 12px); height:calc(100% + 12px);
    object-fit:cover; image-rendering:pixelated; animation:bxJitter .9s infinite steps(1);
  }
  .bx-vhs::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px);
  }
  .bx-crt.bx-sesion { height:250px; display:flex; flex-direction:column; justify-content:flex-end;
    font-size:22px; line-height:0.82; letter-spacing:0.5px; padding:12px 16px 14px 18px; }
  .bx-crt.bx-sesion .bx-l + .bx-l { margin-top:1px; }
  @keyframes bxBlink   { 0%{opacity:1} 50%{opacity:0} }
  @keyframes bxFlicker { 0%{opacity:1} 48%{opacity:.94} 50%{opacity:1} 87%{opacity:.97} 88%{opacity:1} }
  @keyframes bxJitter  { 0%{transform:translate(0,0)} 22%{transform:translate(-3px,1px)} 30%{transform:translate(2px,0)} 61%{transform:translate(0,-2px)} 70%{transform:translate(4px,1px)} 78%{transform:translate(0,0)} }

@media (max-width:600px) and (pointer:coarse) {
  .titlebar { height:34px; }
  .tb-btn { width:28px; height:26px; }
  .win-btn { min-height:32px; }
  .bx-crt.bx-sesion { height:180px; }
}
/* CSS owns mobile detection; JavaScript reads --body-mobile for dragging. */
@media (max-width:600px) and (pointer:coarse), (max-height:420px) and (max-width:950px) and (pointer:coarse) {
  :root { --body-mobile:1; }
  .body-icon { margin-left:-20px; padding:0; }
  .body-window {
    left:50% !important;
    top:calc((100vh - 44px) / 2) !important;
    top:calc((100dvh - 44px) / 2) !important;
    --window-x:-50%;
    --window-y:-50%;
    transform:translate(var(--window-x), var(--window-y));
  }
  .body-window.body-sequence-alert {
    top:calc(25vh + 50vh * var(--alert-progress, 0)) !important;
    top:calc(25dvh + 50dvh * var(--alert-progress, 0)) !important;
    --window-y:calc(-100% * var(--alert-progress, 0));
    max-height:50vh;
    max-height:50dvh;
  }
  .body-window .titlebar { cursor:default; }
}
@media (max-height:420px) and (max-width:950px) and (pointer:coarse) {
  .bx-crt,.bx-crt.bx-sesion { max-height:110px; overflow:auto; }
  .bx-vhs { height:100px; }
  #bodyVideoWindow { width:min(560px,calc((100dvh - 110px)*16/9)) !important; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; } }

/* Restore the original desktop taskbar, with only the approved windows. */
.taskbar { position:fixed; bottom:0; left:0; width:100%; height:calc(32px + env(safe-area-inset-bottom)); background:#c0c0c0; display:flex; align-items:center; justify-content:space-between; padding:0 max(2px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(2px,env(safe-area-inset-left)); border-top:2px solid #fff; z-index:9999; gap:4px; box-shadow:0 -1px 0 #808080; }
.start-button { flex-shrink:0; display:flex; align-items:center; gap:4px; height:24px; min-height:26px; margin-right:4px; padding:2px 8px 2px 4px; border:2px solid; border-color:#fff #404040 #404040 #fff; background:#c0c0c0; box-shadow:1px 1px #000; font: bold 11px Tahoma,Arial,sans-serif; color:#000; text-decoration:none; white-space:nowrap; }
.start-button:visited { color:#000; }
.start-button img { flex-shrink:0; width:16px; height:16px; }
.start-button:hover { background:#d8d4cc; }
.start-button:active { border-color:#404040 #fff #fff #404040; box-shadow:none; transform:translateY(1px); }
.taskbar-divider { flex-shrink:0; width:2px; height:22px; background:#404040; border-right:1px solid #fff; margin:0 2px; }
.taskbar-windows { display:flex; gap:2px; flex:1; min-width:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
.taskbar-windows::-webkit-scrollbar { display:none; }
.taskbar-windows button { flex-shrink:0; }
.taskbar-clock { flex-shrink:0; margin-left:auto; display:flex; align-items:center; padding:2px 8px; border:1px solid; border-color:#404040 #fff #fff #404040; font:11px Tahoma,Arial,sans-serif; color:#000; height:24px; white-space:nowrap; }