:root {
  --bg: var(--tg-theme-bg-color, #ffffff);
  --bg2: var(--tg-theme-secondary-bg-color, #f2f2f7);
  --fg: var(--tg-theme-text-color, #111111);
  --hint: var(--tg-theme-hint-color, #8e8e93);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btnfg: var(--tg-theme-button-text-color, #ffffff);
  --safe-top: var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px));
  --content-top: var(--tg-content-safe-area-inset-top, 0px);
  /* Sideways on a phone the notch is down one edge, not the top. */
  --safe-left: var(--tg-safe-area-inset-left, env(safe-area-inset-left, 0px));
  --safe-right: var(--tg-safe-area-inset-right, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root { --bg: var(--tg-theme-bg-color, #1c1c1e); --bg2: var(--tg-theme-secondary-bg-color, #000000);
    --fg: var(--tg-theme-text-color, #ffffff); --hint: var(--tg-theme-hint-color, #98989e); }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg2); color: var(--fg);
  font: 16px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ghost { font-size: 24px; line-height: 1; padding: 6px 10px; border-radius: 10px; color: var(--link); }
.ghost:active { background: rgba(127,127,127,.15); }
h1, h2 { margin: 0; }

#home { padding: calc(var(--safe-top) + var(--content-top) + 8px) 16px 32px; }
.top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.top h1 { font-size: 28px; font-weight: 700; }
.hint, .empty { color: var(--hint); font-size: 14px; margin: 0 0 12px; }
.status { font-size: 13px; }
.empty { text-align: center; padding: 48px 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left;
  background: var(--bg); border-radius: 16px; padding: 14px; min-height: 120px;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: transform .08s; }
.card:active { transform: scale(.97); }
.card .e { font-size: 32px; line-height: 1; }
.card .i { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--bg2); }
.card .t { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.card .s { color: var(--hint); font-size: 12px; margin-top: auto; }
.card .ok { color: var(--link); margin-top: 2px; }

.player { position: fixed; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.player .bar { display: flex; align-items: center; gap: 4px; padding: calc(var(--safe-top) + var(--content-top) + 4px) 8px 4px;
  background: var(--bg); border-bottom: 1px solid rgba(127,127,127,.2); }
.player .bar h2 { flex: 1; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#frame { flex: 1; width: 100%; border: 0; background: #000; }
.player.fs .bar { display: none; }
/* The handle sits over whatever the game draws in that corner, so it carries its own
   contrast rather than trusting the artwork behind it to be dark. */
.peek { display: none; position: absolute; top: 0; left: var(--safe-left); z-index: 2;
  font-size: 16px; font-weight: 700; line-height: 1; padding: 9px 14px 11px;
  border-radius: 0 0 12px 0; background: rgba(0,0,0,.55); color: #fff; opacity: .75;
  border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.peek:active { opacity: 1; background: rgba(0,0,0,.75); }

/* A phone held sideways has little height to spare, so the bar costs more play area than it
   is worth. It steps aside and comes back over the game when the corner handle is tapped. */
@media (orientation: landscape) and (max-height: 500px) {
  .player:not(.fs) .peek { display: block; }
  .player .bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3;
    padding: calc(var(--safe-top) + var(--content-top) + 2px) calc(var(--safe-right) + 8px)
             2px calc(var(--safe-left) + 8px); }
  .player:not(.bar-open) .bar { display: none; }
  .player.bar-open .peek { opacity: 0; pointer-events: none; }
}

#toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: rgba(0,0,0,.8); color: #fff;
  padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 10; }

/* Header now holds two buttons: keep them together on the right of the title. */
.top h1 { margin-right: auto; }
.cloud { font-size: 20px; opacity: .55; }
.cloud.on { opacity: 1; color: var(--link); }

.loading { position: absolute; inset: auto 0 auto 0; top: 50%; margin: 0; transform: translateY(-50%);
  text-align: center; color: var(--hint); font-size: 14px; }

.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.4); padding: 0 12px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.sheet .panel { width: 100%; max-width: 420px; background: var(--bg); border-radius: 18px; padding: 20px;
  display: flex; flex-direction: column; gap: 10px; }
.sheet h2 { font-size: 20px; font-weight: 700; }
.sheet p { margin: 0; font-size: 14px; }
.sheet p + p { margin-top: -2px; }
.sheet button { border-radius: 12px; padding: 12px; font-weight: 600; }
.fine { text-align: center; font-size: 12px; color: var(--hint); }
.fine a { color: var(--hint); }
.primary { background: var(--btn); color: var(--btnfg); }
.secondary { background: var(--bg2); color: var(--link); }