/* ═══════════════════════════════════════════════════════════════════════════
   LEMO GAMES — the look of the games app, for the library and for a game's page.

   One sheet for both pages, so they cannot drift apart. The palette is the
   site's: ivory, one gold accent, depth from a 1px border and never a shadow,
   no gradients. A control changes colour on hover and never moves.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --paper: #fbfaf4;
  --card: #ffffff;
  --field: #f5f2e6;
  --ink: #1c1a12;
  --muted: #6b6250;
  --line: #ebe6d6;
  --line-strong: #e5d49a;
  --gold: #f5c518;
  --gold-hover: #f0bd0c;
  --gold-edge: #e3ae0a;
  --gold-deep: #8a6a12;
  --f-body: Inter, "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  height: 100%;
  color-scheme: light;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* A double tap and a pinch do not zoom the app. A drag still pans, and a game's own drag is its frame's (touch-action none there). */
  touch-action: pan-x pan-y;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--gx-paper, var(--paper));
  color: var(--gx-ink, var(--ink));
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input { font: inherit; color: inherit; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── The library ───────────────────────────────────────────────────────────── */

.appbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.brand img {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.search {
  position: relative;
  display: flex;
  flex: 0 1 300px;
  min-width: 0;
  margin-inline-start: auto;
}

.search svg {
  position: absolute;
  inset-inline-start: 11px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
  pointer-events: none;
}

.search input {
  width: 100%;
  height: 38px;
  padding-inline: 34px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.search input::placeholder { color: var(--muted); }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 22px max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.intro h1 {
  margin: 0 0 4px;
  font-size: 28px;
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.intro p {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

.install {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}

.install-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.install-text strong {
  font-size: 15px;
  font-weight: 650;
}

.install-text span {
  font-size: 13.5px;
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  border-color: var(--line-strong);
  background: #fffdf3;
}

.btn-gold,
.btn-gold:hover {
  border-color: var(--gold);
  background: var(--gold);
}

.btn-gold:hover {
  border-color: var(--gold-edge);
  background: var(--gold-hover);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.install-go { flex: none; }

.games-status {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--muted);
  font-size: 15px;
}

.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.games-grid > li { min-width: 0; }

/* Wider screens get larger cards, so a short list does not sit small in a wide page. A phone keeps two columns. */
@media (min-width: 720px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
}
@media (min-width: 1000px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

.game-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  text-decoration: none;
}

.game-card:hover {
  border-color: var(--line-strong);
  background: #fffdf3;
}

/* A press answers at once, so the card feels like it was touched. */
.game-card:active { transform: scale(0.985); }

.game-art {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--field);
}

.game-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.game-art.placeholder {
  display: grid;
  place-items: center;
}

.game-art.placeholder img {
  width: 38%;
  height: auto;
  object-fit: contain;
}

.play-chip {
  position: absolute;
  inset-inline-end: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gold-edge);
  border-radius: 50%;
  background: var(--gold);
  color: var(--ink);
}

.play-chip svg {
  width: 14px;
  height: 14px;
  margin-inline-start: 2px;
  fill: currentColor;
  stroke: none;
}

.game-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 12px 14px 14px;
}

.game-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.game-date {
  font-size: 12.5px;
  color: var(--muted);
}

/* The places a game will be, while the library is still fetching them: flat blocks, no motion. */
.skel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  pointer-events: none;
}

.skel-art { aspect-ratio: 16 / 9; background: var(--field); }

.skel-line {
  height: 14px;
  margin: 14px 14px 0;
  border-radius: 6px;
  background: var(--field);
}

.skel-line + .skel-line {
  width: 40%;
  height: 11px;
  margin-top: 8px;
  margin-bottom: 14px;
}

.more {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

/* ── A game's page ─────────────────────────────────────────────────────────── */

body[data-page="play"] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: pan-x pan-y;
  overscroll-behavior: none;
}

.bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: var(--gx-paper, var(--paper));
  border-bottom: 1px solid var(--line);
}

.bar h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tools {
  display: flex;
  flex: none;
  gap: 8px;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.icon-btn:hover {
  border-color: var(--line-strong);
  background: #fffdf3;
}

.icon-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.stage {
  display: flex;
  flex: 1;
  min-height: 0;
  padding: 10px max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}

.stage iframe {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  display: block;
}

/* A phone turned sideways: the game is the screen, with a thin bar and no margin. */
@media (orientation: landscape) and (max-height: 600px) {
  .bar { padding-top: 4px; padding-bottom: 4px; }
  .bar h1 { font-size: 14px; }
  .icon-btn { width: 32px; height: 32px; }
  .icon-btn svg { width: 16px; height: 16px; }
  .stage { padding: 0 4px; }
  .stage iframe { border-radius: 8px; }
}

/* A portrait game on a laptop is a phone-shaped stage in the middle, not a wide window stretched around it. */
@media (hover: hover) and (pointer: fine) {
  body[data-want="portrait"] .stage { justify-content: center; }
  body[data-want="portrait"] iframe {
    flex: none;
    width: min(100%, calc((100dvh - 80px) * 9 / 16));
    height: 100%;
  }
}

/* The turn-your-phone screen: it covers the page while the phone is the wrong way for the game, and the game waits behind it. */
.turn {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: var(--gx-paper, var(--paper));
  color: var(--gx-ink, var(--ink));
}

.turn-phone {
  width: 64px;
  height: 64px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: turn-landscape 2.4s ease-in-out infinite;
}

body[data-want="portrait"] .turn-phone { animation-name: turn-portrait; }

@keyframes turn-landscape {
  0%, 20% { transform: rotate(0); }
  60%, 100% { transform: rotate(90deg); }
}

@keyframes turn-portrait {
  0%, 20% { transform: rotate(90deg); }
  60%, 100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .turn-phone { animation: none; }
}

.turn-title {
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 800;
}

.turn-hint {
  margin: 0;
  font-size: 15px;
  color: var(--muted);
}

/* The note that says how to get the whole screen on a phone, shown for a few seconds. */
.tip {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--gx-paper, var(--paper));
  color: var(--gx-ink, var(--ink));
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/* Full screen where the browser cannot give the frame its own (iPhone Safari): the frame covers the page, and the two buttons float in the
   corner, left of the kit's settings button, so neither hides the other. The bar lets touches through except on its own buttons. */
body.is-expanded { overflow: hidden; }

/* The bar ends where the kit's settings button begins, so the two never sit on one another. */
body.is-expanded .bar {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  right: calc(max(12px, env(safe-area-inset-right)) + 56px);
  z-index: 20;
  padding: 0;
  border: 0;
  background: none;
  justify-content: space-between;
  pointer-events: none;
}

body.is-expanded .bar > * { pointer-events: auto; }
body.is-expanded .bar h1 { display: none; }
body.is-expanded .stage { position: fixed; inset: 0; z-index: 10; padding: 0; }
body.is-expanded .stage iframe { border: 0; border-radius: 0; }