/* =====================================================================
   $DOG — The Robinhood Times.  Base styles, fonts, keyframes, helpers.
   Most component styling is inline on the elements (as in the original
   design); this sheet holds the resets, animations, and the :hover /
   :active states the design expressed through custom attributes.
   ===================================================================== */

html, body { margin: 0; padding: 0; height: 100%; background: #111; overflow: hidden; }
* { box-sizing: border-box; }
a { color: #008000; }
a:hover { color: #00a000; }
::selection { background: #000080; color: #fff; }

@keyframes dogblink  { 0%,60% { opacity: 1 } 61%,100% { opacity: 0 } }
@keyframes dogappear { to { opacity: 1 } }

/* App root */
#app { position: fixed; inset: 0; background: #111; overflow: hidden; }

/* ---- Landing (newspaper) layer ---- */
.landing-layer {
  position: absolute; inset: 0; z-index: 20000;
  background: #f2ead4; color: #221e16;
}
.landing-scroll {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  font-family: 'Old Standard TT', Georgia, serif;
}
/* clickable hero + promo hint */
.enter-hot { cursor: pointer; }

/* ---- Boot layer ---- */
.boot-layer {
  position: absolute; inset: 0; z-index: 25000;
  background: #000; padding: 7vh 8vw;
}

/* ---- Desktop camera + surface ---- */
/* The desktop container fills the whole screen with the desktop colour, so
   the 4:3 surface never floats in black bars — on mobile the teal simply
   extends to the screen edges (a real desktop is mostly empty background). */
.desk-cam {
  width: 100vw; height: 100vh; background: var(--desk, #008080);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* On phones the desktop becomes a vertically-scrolling stack of enlarged,
   non-overlapping windows (laid out by main.js), anchored to the top. */
.desk-cam.mobile {
  align-items: flex-start; justify-content: center;
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
#desk-wrap { flex: 0 0 auto; }

/* WINDOWS 3.1 badge — pinned to the real screen corner (never scaled). */
#win31-badge {
  position: fixed; right: 14px; bottom: 12px; z-index: 9992;
  font: bold 12px 'Liberation Sans', Arial, sans-serif;
  color: rgba(255, 255, 255, .78); letter-spacing: 1px;
  user-select: none; pointer-events: none;
}

/* Error dialog — a centered modal over the desktop, unscaled and readable. */
.dlg {
  position: fixed; left: 50%; top: 44%; transform: translate(-50%, -50%);
  width: min(360px, 92vw); z-index: 9500;
  background: #c0c0c0; border: 1px solid #000; padding: 3px;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .4);
}
.desk-surface {
  width: 1024px; height: 768px; flex: 0 0 auto; position: relative; overflow: hidden;
  background: var(--desk, #008080);
  font-family: 'Liberation Sans', Arial, Helvetica, sans-serif;
}

/* Windows 3.1 menu-bar hover (was style-hover) */
.menuitem { padding: 3px 9px; cursor: pointer; }
.menuitem:hover { background: var(--tb, #000080); color: var(--tbt, #fff); }

/* Windows 3.1 raised buttons pressed state (was style-active) */
.w31btn:active { box-shadow: inset 1px 1px 0 #808080 !important; }

/* hidden windows */
[hidden] { display: none !important; }