/* lowpolyrat — games.css
   Games.exe: platforms window + separate PhotoMode window + favourites window
*/

:root{
  --pad: 25px;
  --gap: 18px;
  --rightW: 320px;
  --taskbarGap: 60px;
  --titlebarH: 34px;

  --photoH: 180px; /* height of PhotoMode window */
}

/* TOP LEFT: platforms */
#win-platforms{
  position: fixed;
  top: var(--pad);
  left: var(--pad);

  width: calc(100vw - (var(--pad) * 2) - var(--rightW) - var(--gap));
  max-width: 1100px;

  height: calc(100vh - var(--taskbarGap) - var(--pad) - var(--gap) - var(--photoH));

  overflow: hidden;
  box-sizing: border-box;
}

/* BOTTOM LEFT: photo mode */
#win-photo{
  position: fixed;
  left: var(--pad);
  bottom: var(--taskbarGap);

  width: calc(100vw - (var(--pad) * 2) - var(--rightW) - var(--gap));
  max-width: 1100px;

  height: var(--photoH);

  overflow: hidden;
  box-sizing: border-box;
}

/* RIGHT: favourites */
#win-faves{
  position: fixed;
  top: var(--pad);
  right: var(--pad);
  bottom: var(--taskbarGap);

  width: var(--rightW);

  overflow: hidden;
  box-sizing: border-box;
}

/* scroll inside platform + favourites content */
#win-platforms .inner,
#win-faves .inner{
  height: calc(100% - var(--titlebarH));
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 70px;
}

/* Photo window doesn't need vertical scrolling */
#win-photo .inner{
  height: calc(100% - var(--titlebarH));
  overflow: hidden;
  box-sizing: border-box;
}

/* ===== Platforms grid ===== */
.platforms{
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.platform{
  display: grid;
  place-items: center;
  gap: 8px;
  text-decoration: none;
  color: rgba(255,235,235,0.92);
  padding: 12px;
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)),
    rgba(12,12,16,0.78);

  border: 1px solid rgba(255,40,40,0.32);
  box-shadow:
    0 8px 24px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,0,0,0.10) inset;

  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.platform:hover{
  transform: translateY(-2px);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.75),
    0 0 18px rgba(255,40,40,0.35);
}

.platform img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(255,40,40,0.25));
}

.platform span{
  font-size: 12px;
  opacity: 0.9;
}

/* ===== Photo mode horizontal strip ===== */
.photo-strip{
  display: flex;
  gap: 12px;
  padding: 10px;

  overflow-x: auto;
  overflow-y: hidden;

  border-radius: 10px;
  border: 1px solid rgba(255,40,40,0.22);
  background: rgba(0,0,0,0.18);
}

.shot{
  flex: 0 0 auto;
  width: 200px;
  height: 100px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,40,40,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.shot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.shot:hover img{
  transform: scale(1.03);
}

.hint{
  font-size: 11px;
  opacity: 0.65;
  margin-top: 8px;
}

/* ===== Favourites list ===== */
.fave-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.fave{
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
  align-items: center;

  padding: 10px;
  border-radius: 10px;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.00)),
    rgba(12,12,16,0.78);

  border: 1px solid rgba(255,40,40,0.25);
  box-shadow:
    inset 0 0 6px rgba(0,0,0,0.6),
    0 0 10px rgba(255,40,40,0.12);
}

.fave img{
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,40,40,0.25);
}

.fave-title{ font-weight: bold; font-size: 12px; }
.fave-meta{ font-size: 11px; opacity: 0.7; margin-top: 2px; }
.fave-note{ font-size: 11px; opacity: 0.85; margin-top: 6px; line-height: 1.2; }


/* Popup library window */
#win-console{
  position: fixed;
  left: 180px;
  top: 90px;
  width: min(760px, calc(100vw - 80px));
  height: min(560px, calc(100vh - 120px));
  overflow: hidden;
  box-sizing: border-box;
}

#win-console .inner{
  height: calc(100% - var(--titlebarH));
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 70px;
}

/* Game grid inside popup */
.game-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.game{
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: rgba(255,235,235,0.92);
}

.game img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,40,40,0.28);
  box-shadow: 0 10px 24px rgba(0,0,0,0.55);
}

.game .g-title{
  font-size: 12px;
  font-weight: bold;
  opacity: 0.95;
}

.game .g-note{
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.2;
}

/* --- Force PhotoMode strip to overflow horizontally --- */
#photo-strip{
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap; /* prevents weird wrapping */
}

#photo-strip .shot{
  flex: 0 0 auto !important;  /* stop shrinking */
  width: 220px;               /* make overflow guaranteed */
  height: 130px;
  display: inline-block;      /* works nicely with white-space */
}

/* FORCE the strip to be a scrollable row */
#photo-strip{
  display: block !important;
  overflow-x: scroll !important;   /* not auto */
  overflow-y: hidden !important;
  white-space: nowrap !important;
  width: 100% !important;
}

/* Each screenshot tile must have a fixed width and not shrink */
#photo-strip .shot{
  display: inline-block !important;
  width: 240px !important;
  height: 140px !important;
  margin-right: 12px !important;
  vertical-align: top;
}

#photo-strip .shot img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}