/* "Мои игры" — text-free grid of live game tiles */
  .my-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
  }
  .my-tile {
    display: flex; flex-direction: column;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border-2);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.12s ease;
  }
  .my-tile:hover { border-color: rgba(110,150,135,0.45); transform: translateY(-2px); }
  .my-tile .frame {
    aspect-ratio: 800/470;
    background: linear-gradient(135deg, #245c49 0%, #143a2c 60%, #1a1714 100%);
    position: relative; overflow: hidden;
  }
  .my-tile .frame iframe {
    position: absolute;
    top: 0; left: 0;
    border: 0; display: block;
    pointer-events: none;
    transform-origin: 0 0;
  }
  .my-tile .frame .pl {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    color: rgba(255,255,255,0.45);
  }
  .my-tile .frame .pl svg { width: 48px; height: 48px; }
  /* Static cover image — replaces the iframe-preview when the game has a
     hero_asset_id. Sized to 800:470 by the frame's aspect-ratio; object-fit
     covers any rounding/zoom mismatch. */
  .my-tile .frame .tile-cover {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
  }

  /* Admin shield button — top-right corner of every tile when viewer is admin.
     Click opens a cursor-anchored popover with hide/block/restore/delete. */
  .my-tile .frame .tile-admin-btn {
    position: absolute;
    right: 8px; top: 8px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(180, 140, 70, 0.5);
    background: rgba(50, 40, 18, 0.78);
    color: #e6cf9b;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    z-index: 6;
    padding: 0;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .my-tile:hover .frame .tile-admin-btn { opacity: 1; }
  .my-tile .frame .tile-admin-btn:hover {
    background: rgba(95, 75, 30, 0.95);
    color: #ffe7b8;
  }
  .my-tile .frame .tile-admin-btn:active { transform: translateY(1px); }
  .my-tile .frame .tile-admin-btn svg { width: 15px; height: 15px; }
  /* Push applied-badges left so they don't overlap with the admin shield. */
  .my-tile[data-has-admin="1"] .frame .applied-badges {
    right: 44px;
  }
  /* Admin popover layout */
  .admin-pop .admin-pop-row {
    display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
  }
  .admin-pop code {
    padding: 1px 5px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    color: #e6cf9b;
  }

  /* Per-tile trash icon — anchored bottom-left INSIDE the card.
     Opacity + pointer-events are owned by the .danger-reveal layer
     (modules/ux/ctrl-reveal.css): hidden by default, fades in while Ctrl is
     held, brightens on tile-hover. Setting opacity here would out-specificity
     .danger-reveal and leave the button visible-but-pointer-events:none. */
  .my-tile .frame .trash {
    position: absolute;
    left: 8px; bottom: 8px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(140,60,50,0.45);
    background: rgba(20, 8, 6, 0.72);
    color: #f0bdac;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  body.ctrl-on .my-tile:hover .frame .trash { opacity: 1; }
  .my-tile .frame .trash:hover {
    background: rgba(70, 25, 18, 0.95);
    color: #ffd4c4;
  }
  .my-tile .frame .trash:active { transform: translateY(1px); }
  .my-tile .frame .trash svg { width: 16px; height: 16px; }

  /* Per-tile play (fullscreen) icon — opposite trash, slightly bigger */
  .my-tile .frame .play-fs {
    position: absolute;
    right: 8px; bottom: 8px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(60,130,110,0.55);
    background: rgba(20, 50, 38, 0.78);
    color: #d6e8df;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .my-tile:hover .frame .play-fs { opacity: 1; }
  .my-tile .frame .play-fs:hover {
    background: rgba(40, 90, 70, 0.95);
    color: #f1f7f3;
  }
  .my-tile .frame .play-fs:active { transform: translateY(1px); }
  .my-tile .frame .play-fs svg { width: 18px; height: 18px; }

  /* Per-tile "action" icon — top-left corner. Opens an item-applier popover.
     Same family as trash/play-fs (round, blurred glass, hover-grow). */
  .my-tile .frame .game-act-btn,
  .game-card .game-act-btn {
    position: absolute;
    left: 8px; top: 8px;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(140,110,180,0.5);
    background: rgba(40, 28, 60, 0.78);
    color: #e0d4f4;
    cursor: pointer;
    opacity: 0.78;
    transition: opacity 0.15s ease, background 0.12s ease, color 0.12s ease, transform 0.06s ease;
    z-index: 6;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 0;
  }
  .my-tile:hover .frame .game-act-btn,
  .game-card:hover .game-act-btn { opacity: 1; }
  .my-tile .frame .game-act-btn:hover,
  .game-card .game-act-btn:hover {
    background: rgba(70, 50, 110, 0.95);
    color: #fff;
  }
  .my-tile .frame .game-act-btn:active,
  .game-card .game-act-btn:active { transform: translateY(1px); }
  .my-tile .frame .game-act-btn svg,
  .game-card .game-act-btn svg { width: 16px; height: 16px; }

/* ============================================================
   MOBILE ADAPTIVE — my-games / shared tiles
   ============================================================ */

/* P1 — compact grid on phones */
@media (max-width: 640px) {
  .my-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
  }
}

/* P2 — play/act buttons always visible on touch (no hover) */
@media (hover: none) {
  .my-tile .frame .play-fs {
    opacity: 1;
  }
  .my-tile .frame .game-act-btn,
  .game-card .game-act-btn {
    opacity: 1;
  }
}

/* P2 — minimum tap-target for play-fs and act buttons on mobile */
@media (max-width: 640px) {
  .my-tile .frame .play-fs {
    min-width: 44px;
    min-height: 44px;
  }
  .my-tile .frame .game-act-btn,
  .game-card .game-act-btn {
    min-width: 44px;
    min-height: 44px;
  }
  /* Safe-area padding for buttons at screen edges in landscape */
  .my-tile .frame .play-fs {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
  .my-tile .frame .trash {
    left: max(8px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}