/* =====================================================================
   THE LITTLE ARCADE — shell styling.
   The page is only a frame. Everything you actually see is drawn on the
   480x270 canvas, so this file stays deliberately small.
   ===================================================================== */

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #07080f;
  overflow: hidden;
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

#cabinet {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* safe areas keep the screen clear of notches and home indicators */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, #1d2145 0%, #0d0f1e 55%, #07080f 100%);
}

#screenwrap {
  position: relative;
  line-height: 0;
  box-shadow:
    0 0 0 3px #23264a,
    0 0 0 6px #14162c,
    0 18px 60px rgba(0, 0, 0, .75),
    0 0 90px rgba(90, 130, 255, .16);
  border-radius: 4px;
  overflow: hidden;
}

#screen {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  background: #12132b;
  touch-action: none;
}

/* Faint CRT scanlines. Kept very subtle so it never muddies the art. */
#scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .13) 0px,
    rgba(0, 0, 0, .13) 1px,
    rgba(255, 255, 255, .015) 1px,
    rgba(255, 255, 255, .015) 3px
  );
  opacity: .55;
  mix-blend-mode: multiply;
}

#glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 42%),
    radial-gradient(ellipse 78% 78% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .42) 100%);
}

/* The CRT effects are a toggle in Settings. */
body.flat #scanlines,
body.flat #glare { display: none; }

/* On a small screen the bezel wastes precious pixels. */
@media (max-width: 900px) {
  #screenwrap { box-shadow: none; border-radius: 0; }
  #cabinet { background: #07080f; padding: 0; }
}

/* =====================================================================
   Portrait nudge — shown only on small screens held upright.
   ===================================================================== */
#rotate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #12132b;
  color: #ffd9ec;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.rotate-inner { padding: 24px; }

.phone {
  width: 74px;
  height: 122px;
  margin: 0 auto 26px;
  border: 4px solid #ff9ec4;
  border-radius: 10px;
  padding: 5px;
  animation: tip 2.4s ease-in-out infinite;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg, #7a4fd1 0 8px, #b48cf5 8px 16px);
  border-radius: 4px;
}

@keyframes tip {
  0%, 30%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

.rotate-title {
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: 2px;
  color: #ffd45c;
}

.rotate-sub {
  margin: 0;
  font-size: 13px;
  color: #a8aed8;
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate { display: flex; }
  #cabinet { visibility: hidden; }
}

.noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff9ec4;
  font-size: 18px;
}