/* Portfolio — studio tabs, game covers, classic boxed-game 3D, media channel cards. */

/* Studio tab strip (mirrors the header dropdown) */
.pf-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 30px; border-bottom: 1px solid var(--border); }
.pf-tab { padding: 10px 16px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.pf-tab:hover { color: var(--text); text-decoration: none; }
.pf-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }

/* Fixed column counts (not auto-fill) so every row holds the same number of cards at a given
   width — 4 per row on full desktop, stepping to 3 then 2 — and a lone last card never stretches. */
.pf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; align-items: start; }
.pf-grid > .pf-item { min-width: 0; }   /* let columns shrink; never force overflow */
.pf-grid-media { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) {
  .pf-grid { grid-template-columns: repeat(3, 1fr); }
  .pf-grid-media { grid-template-columns: repeat(2, 1fr); }
}

.pf-title { margin: 14px 0 4px; font-size: 17px; }
.pf-price { color: var(--accent-bright); font-weight: 700; margin: 0 0 6px; }
.pf-summary { color: var(--muted); font-size: 14px; margin: 0 0 10px; }
.pf-soon { color: var(--muted); font-size: 13px; }
.pf-actions { margin-top: 8px; }

/* Game cover (vertical rectangle) */
.game-cover {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: linear-gradient(140deg, rgba(var(--accent-rgb), 0.22), var(--panel));
  background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center;
}
.cover-fallback { padding: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(15px, 4.2vw, 20px); text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.pf-badge { position: absolute; top: 10px; left: 10px; background: rgba(10, 10, 12, 0.82); color: var(--text); border: 1px solid var(--border); font-family: var(--font-tech); font-size: 11px; font-weight: 400; letter-spacing: 0.04em; padding: 4px 10px; border-radius: 999px; }

/* R&D — classic boxed-game 3D box (cover + spine + top). */
/* drop-shadow lives on the WRAP, not .gamebox — a filter on a preserve-3d element
   flattens its 3D children (collapses the box to 2D). */
.gamebox-wrap { perspective: 1000px; display: flex; justify-content: center; padding: 18px 0 30px; filter: drop-shadow(0 22px 30px rgba(0, 0, 0, 0.6)); }
.gamebox {
  --w: 150px; --h: 200px; --d: 46px;
  position: relative; width: var(--w); height: var(--h); transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-32deg); transition: transform .4s ease;
}
.gamebox:hover { transform: rotateX(6deg) rotateY(-22deg); }
.gamebox__front, .gamebox__side, .gamebox__top { position: absolute; background-color: var(--panel-2); background-size: cover; background-position: center; }
.gamebox__front {
  width: var(--w); height: var(--h); inset: 0; transform: translateZ(calc(var(--d) / 2));
  border: 1px solid var(--border); border-radius: 2px; display: flex; align-items: flex-end; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
.gamebox__front span { width: 100%; padding: 10px; font-family: var(--display); font-weight: 700; font-size: 13px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.82)); }
.gamebox__side {
  width: var(--d); height: var(--h); top: 0; left: calc((var(--w) - var(--d)) / 2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background-image: linear-gradient(90deg, #2c2c33, #101013);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.gamebox__side span { writing-mode: vertical-rl; font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; white-space: nowrap; padding: 8px 0; }
.gamebox__top {
  width: var(--w); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background-image: linear-gradient(180deg, #34343b, #1a1a1f);
}
@media (prefers-reduced-motion: reduce) {
  .gamebox { transform: none; }
  .gamebox__side, .gamebox__top { display: none; }
  .gamebox__front { transform: none; box-shadow: var(--shadow-2); }
}

/* Media — channel cards: avatar, name, description, platform links. */
.media-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); height: 100%; }
.media-avatar { width: 60px; height: 60px; border-radius: 14px; background: var(--panel-2); display: grid; place-items: center; color: var(--text); overflow: hidden; flex: 0 0 auto; }
.media-avatar img { width: 100%; height: 100%; object-fit: cover; }
.media-ic svg { width: 34px; height: 34px; }
.media-name { font-size: 18px; margin: 2px 0 0; }
.media-desc { color: var(--muted); font-size: 14px; margin: 0; }
.media-links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.media-plat-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); transition: border-color .12s, color .12s, transform .12s; }
.media-plat-link:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); text-decoration: none; }
.media-plat-link svg { width: 20px; height: 20px; }

/* R&D sub-tabs (centered) + publications list + lightbox */
.rd-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 32px; flex-wrap: wrap; }
.rd-tab { font-family: var(--font-tech); padding: 9px 18px; border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); border-radius: 999px; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; transition: color .12s, border-color .12s, background .12s; }
.rd-tab:hover { color: var(--text); }
.rd-tab.is-active { color: var(--text); border-color: var(--accent-bright); background: var(--panel); }

.pub-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.pub-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel); }
.pub-thumb { flex: 0 0 auto; width: 64px; height: 64px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel-2); cursor: pointer; transition: border-color .12s; }
.pub-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-thumb:hover { border-color: var(--accent-bright); }
.pub-cite { margin: 0; color: var(--text); font-size: 14px; line-height: 1.6; }

/* Flex column that always fits the viewport: the image flexes to fill the space left after the
   title/desc, so the whole panel fits to height (no bottom overflow) at any screen size. */
.pub-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); display: flex; align-items: center; justify-content: center; padding: 28px; }
.pub-lightbox[hidden] { display: none; }
.pub-lightbox-inner { max-width: 820px; width: 100%; max-height: 100%; margin: auto; text-align: center; display: flex; flex-direction: column; min-height: 0; }
/* The image flexes to fill the height left after the title/desc; object-fit letterboxes so a
   tall/square image always fits the viewport. The wrap is the positioning context for the close. */
.pub-lightbox-imgwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.pub-lightbox-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); border: 1px solid var(--border); background: var(--panel); }
.pub-lightbox-title { flex: 0 0 auto; font-family: var(--display); margin: 16px 0 6px; font-size: 20px; }
.pub-lightbox-desc { flex: 0 0 auto; color: var(--muted); margin: 0; font-size: 14px; }
/* Close sits on the image's top-right CORNER (inside the image wrap), not the far screen edge. */
.pub-lightbox-close { position: absolute; top: 8px; right: 8px; z-index: 10; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(10, 10, 12, 0.72); color: var(--text); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.pub-lightbox-close:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Compact 2-up grid (game covers were full-width / too large at 1-up). */
  .pf-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
  .pf-grid-media { grid-template-columns: 1fr; }   /* richer cards stay full width */
  .pf-title { font-size: 15px; margin-top: 10px; }
  .pf-summary { font-size: 13px; }
  /* R&D 3D box scales down so two fit per row without clipping. */
  .gamebox { --w: 116px; --h: 155px; --d: 36px; }
  .gamebox-wrap { padding: 10px 0 22px; }
  /* Center the studio tab strip on mobile. */
  .pf-tabs { justify-content: center; }
  /* Lightbox: tighter padding; the flex column above already fits the image to height. */
  .pub-lightbox { padding: 14px; }
  .pub-lightbox-title { font-size: 17px; }
  .pub-lightbox-close { top: 10px; right: 12px; width: 38px; height: 38px; }
  .pf-signup { padding: 16px; }
  .pf-signup-close { top: 10px; right: 12px; width: 38px; height: 38px; }
}

/* ── Test-phase sign-up modal (games) ───────────────────────── */
.pf-test-btn { margin-top: 6px; }
.pf-signup { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.86); display: flex; align-items: center; justify-content: center; padding: 24px; }
.pf-signup[hidden] { display: none; }
.pf-signup-box { position: relative; width: 100%; max-width: 420px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-2); text-align: center; }
.pf-signup-title { font-family: var(--font-tech); font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; font-size: 20px; margin: 0 0 6px; color: var(--accent); }
.pf-signup-game { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0 0 8px; color: var(--text); }
.pf-signup-intro { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.pf-signup-form { display: flex; flex-direction: column; gap: 10px; text-align: left; }
.pf-signup-input { background: var(--panel-2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font: inherit; font-size: 15px; }
.pf-signup-input::placeholder { color: #6d6e73; }
.pf-signup-input:focus { border-color: var(--accent); outline: none; }
.pf-signup-submit { margin-top: 4px; justify-content: center; }
.pf-signup-msg { font-size: 13px; margin: 6px 0 0; }
.pf-signup-msg.is-ok { color: var(--good); }
.pf-signup-msg.is-err { color: var(--bad); }
/* On the modal box's top-right CORNER (not the far screen edge). */
.pf-signup-close { position: absolute; top: 10px; right: 10px; z-index: 10; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; }
.pf-signup-close:hover { border-color: var(--accent-bright); color: var(--accent-bright); }

/* Empty portfolio list (no games / no publications yet) → centered "Coming soon". */
.pf-empty { text-align: center; padding: 56px 16px; color: var(--muted); font-size: 15px; }

/* R&D sub-tab switch (Products & Services ↔ Publications & Patents) is faded out→in by portfolio.js
   (matching the portfolio studio-switch duration). */