/* PlayPatch native UI components: screenshot-matched mobile cards, chips, guide tabs, and player panels. */

.pp-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-xs);
  padding: 0.68rem 1.15rem;
  border: var(--pp-rule);
  border-radius: var(--pp-radius-pill);
  background: var(--pp-color-panel-high);
  color: var(--pp-color-ink);
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur-fast) var(--pp-ease-out), box-shadow var(--pp-dur-fast) var(--pp-ease-out), background var(--pp-dur-fast) var(--pp-ease-out), border-color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-button:hover { transform: translateY(-2px); box-shadow: var(--pp-shadow-md); border-color: var(--pp-color-line-strong); }
.pp-button:active { transform: translateY(0); box-shadow: var(--pp-shadow-sm); }
.pp-button:disabled, .pp-button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.pp-button--primary { background: linear-gradient(135deg, var(--pp-color-primary), var(--pp-color-primary-deep)); color: var(--pp-color-bg-deep); border-color: transparent; box-shadow: var(--pp-shadow-glow); }
.pp-button--quiet { background: var(--pp-color-panel-soft); color: var(--pp-color-secondary); }
.pp-button--wide { width: 100%; margin-top: var(--pp-space-md); }

.pp-chip {
  flex: 0 1 auto;
  min-height: 34px;
  max-width: 100%;
  border: var(--pp-rule);
  border-radius: var(--pp-radius-pill);
  padding: 0.35rem 0.72rem;
  background: var(--pp-color-panel-high);
  color: var(--pp-color-muted);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--pp-shadow-sm);
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.15;
  transition: transform var(--pp-dur-fast) var(--pp-ease-out), background var(--pp-dur-fast) var(--pp-ease-out), color var(--pp-dur-fast) var(--pp-ease-out), border-color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-chip:hover, .pp-chip.is-active { transform: translateY(-1px); background: var(--pp-color-primary); color: var(--pp-color-bg-deep); border-color: transparent; box-shadow: var(--pp-shadow-glow); }
.pp-chipboard {
  display:flex;
  flex-wrap: wrap;
  gap:0.5rem;
  overflow: visible;
  padding:0.15rem 0 0.2rem;
}

.pp-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0.12rem 0.48rem;
  border: var(--pp-rule);
  border-radius: var(--pp-radius-pill);
  font-family: var(--pp-font-mono);
  font-size: 0.64rem;
  line-height: 1;
  background: var(--pp-color-panel-high);
  color: var(--pp-color-secondary);
}
.pp-daily-card { display:none; }
.pp-category-section { display: contents; }
.pp-category-section__bar { display:none; }
.pp-game-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: var(--pp-space-md); }
.pp-game-grid--mobile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pp-space-sm); }
.pp-game-grid--related { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.3rem, 1.5vw, 0.75rem); }
.pp-game-grid--related .pp-game-card__body { padding: 0.35rem; gap: 0.2rem; }
.pp-game-grid--related .pp-game-card__meta { font-size: 0.5rem; gap: 0.15rem; }
.pp-game-grid--related .pp-game-card__body h4 { font-size: clamp(0.56rem, 2.2vw, 0.78rem); }
.pp-game-grid--related .pp-game-card__badge { top: 0.2rem; left: 0.2rem; max-width: calc(100% - 0.4rem); padding: 0.12rem 0.24rem; font-size: 0.44rem; }
.pp-game-grid--related .pp-game-card__fav { top: 0.18rem; right: 0.18rem; width: 21px; height: 21px; font-size: 0.7rem; }
.pp-game-grid--related .pp-game-card__live { left: 0.2rem; bottom: 0.2rem; padding: 0.1rem 0.22rem; font-size: 0.42rem; }
.pp-game-grid--related .pp-game-card__cta { min-height: 22px; font-size: 0.56rem; }
.pp-game-grid > .pp-ad-slot { grid-column: 1 / -1; }
.pp-game-card {
  min-width: 0;
  border: var(--pp-rule);
  border-radius: var(--pp-radius-xl);
  background: var(--pp-color-panel);
  overflow: hidden;
  box-shadow: var(--pp-shadow-sm);
  transition: transform var(--pp-dur-fast) var(--pp-ease-out), box-shadow var(--pp-dur-fast) var(--pp-ease-out), border-color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-game-card:hover { transform: translateY(-3px); box-shadow: var(--pp-shadow-glow); border-color: var(--pp-color-line-strong); }
.pp-game-card__link { display:flex; flex-direction:column; min-height:100%; color:var(--pp-color-ink); text-decoration:none; }
.pp-game-card__media { position:relative; aspect-ratio:16 / 11; background:var(--pp-color-panel-high); overflow:hidden; }
.pp-game-card__media img { width:100%; height:100%; object-fit:cover; transition:transform var(--pp-dur) var(--pp-ease-out); }
.pp-game-card:hover .pp-game-card__media img { transform:scale(1.04); }
.pp-game-card__badge { position:absolute; top:0.45rem; left:0.45rem; max-width:calc(100% - 0.9rem); padding:0.18rem 0.45rem; border-radius:var(--pp-radius-pill); background:var(--pp-color-coral); color:var(--pp-color-bg-deep); font-family:var(--pp-font-mono); font-size:0.58rem; font-weight:700; letter-spacing:0.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pp-game-card__fav { position:absolute; top:0.42rem; right:0.42rem; width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--pp-color-bg-deep); color:var(--pp-color-ink); box-shadow:inset 0 0 0 1px var(--pp-color-line); }
.pp-game-card__live { position:absolute; left:0.45rem; bottom:0.45rem; padding:0.15rem 0.42rem; border-radius:var(--pp-radius-sm); background:var(--pp-color-bg-deep); color:var(--pp-color-tertiary); font-family:var(--pp-font-mono); font-size:0.56rem; }
.pp-game-card__body { min-width:0; padding:var(--pp-space-xs); display:flex; flex-direction:column; gap:0.28rem; flex:1; }
.pp-game-card__meta { display:flex; align-items:center; justify-content:space-between; gap:0.35rem; font-size:0.62rem; font-weight:800; color:var(--pp-color-secondary); }
.pp-game-card__meta span:first-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-game-card__rating { color:var(--pp-color-primary); font-family:var(--pp-font-mono); }
.pp-game-card__body h4 { margin:0; font-family:var(--pp-font-display); font-size:0.92rem; line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-game-card__body p { display:none; }
.pp-game-card__cta { margin-top:auto; min-height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--pp-radius-pill); background:linear-gradient(135deg,var(--pp-color-primary),var(--pp-color-primary-deep)); color:var(--pp-color-bg-deep); font-family:var(--pp-font-body); font-size:0.74rem; font-weight:800; box-shadow:0 0 16px var(--pp-color-glow-primary); }


.pp-game-card__fav {
  border: 0;
  cursor: pointer;
  font-weight: 900;
  transition: transform var(--pp-dur-fast) var(--pp-ease-out), background var(--pp-dur-fast) var(--pp-ease-out), color var(--pp-dur-fast) var(--pp-ease-out), box-shadow var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-game-card__fav:hover { transform: scale(1.08); color: var(--pp-color-primary); box-shadow: 0 0 16px var(--pp-color-glow-primary), inset 0 0 0 1px var(--pp-color-line); }
.pp-game-card__fav[aria-pressed="true"] { color: var(--pp-color-bg-deep); background: linear-gradient(135deg, var(--pp-color-primary), var(--pp-color-coral)); box-shadow: var(--pp-shadow-glow); }
.pp-stored-actions { display:flex; flex-wrap:wrap; gap:var(--pp-space-sm); margin-bottom:var(--pp-space-lg); }

.pp-row-card { border: var(--pp-rule); border-radius: var(--pp-radius-xl); background: var(--pp-color-panel); box-shadow: var(--pp-shadow-sm); }
.pp-row-card__link { min-height: 86px; display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: var(--pp-space-md); align-items: center; padding: var(--pp-space-sm); text-decoration: none; color: var(--pp-color-ink); }
.pp-row-card img { width: 64px; height: 64px; border-radius: var(--pp-radius-lg); border: var(--pp-rule); object-fit: cover; }
.pp-row-card h3 { margin: 0; font-size: 1.25rem; }
.pp-row-card p { margin: 0.15rem 0 0; color: var(--pp-color-muted); }
.pp-rank-list { margin: 0; padding: 0; display: grid; gap: var(--pp-space-sm); list-style: none; counter-reset: rank; }
.pp-rank-row { counter-increment: rank; border: var(--pp-rule); border-radius: var(--pp-radius-xl); background: var(--pp-color-panel); box-shadow: var(--pp-shadow-sm); }
.pp-rank-row a { display: grid; grid-template-columns: 42px 54px minmax(0, 1fr); align-items: center; gap: var(--pp-space-sm); min-height: 76px; padding: var(--pp-space-xs) var(--pp-space-sm); color: var(--pp-color-ink); text-decoration: none; }
.pp-rank-row a::before { content: counter(rank); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 14px; background: var(--pp-color-primary); color: var(--pp-color-bg-deep); font-family: var(--pp-font-mono); font-weight: 700; }
.pp-rank-row img { width: 54px; height: 54px; border-radius: var(--pp-radius-lg); object-fit: cover; border: var(--pp-rule); }
.pp-rank-row strong { display: block; line-height: 1.2; overflow-wrap: anywhere; }
.pp-rank-row span { color: var(--pp-color-muted); font-size: 0.85rem; }
.pp-player-card { height: 100%; display: grid; grid-template-rows: minmax(180px, 1fr) auto; }
.pp-player-card__art { position: relative; min-height: 240px; background-size: cover; background-position: center; }
.pp-player-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--pp-color-player-veil), transparent 65%); }
.pp-player-card__body { padding: var(--pp-space-lg); display: grid; gap: var(--pp-space-sm); }
.pp-player-card__body p { margin: 0; color: var(--pp-color-muted); }
.pp-guide-tabs { display: flex; flex-wrap: wrap; gap: var(--pp-space-xs); margin-bottom: var(--pp-space-md); }
.pp-tab { min-height: 42px; border: var(--pp-rule); border-radius: var(--pp-radius-pill); background: var(--pp-color-panel-high); color: var(--pp-color-muted); padding: 0.35rem 0.82rem; font-weight: 800; cursor: pointer; }
.pp-tab.is-active { background: var(--pp-color-primary); color: var(--pp-color-bg-deep); }
.pp-guide-panel { color: var(--pp-color-muted); }
.pp-guide-panel h2 { margin-top: 0; font-size: 1.6rem; color: var(--pp-color-ink); }
.pp-guide-panel p { margin-top: 0; }
.pp-guide-panel ul { padding-left: 1.1rem; }



.pp-category-hub { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap:var(--pp-space-md); margin-bottom:var(--pp-space-xl); }
.pp-category-card { border:var(--pp-rule); border-radius:var(--pp-radius-xl); background:var(--pp-color-panel); box-shadow:var(--pp-shadow-sm); overflow:hidden; }
.pp-category-card a { min-height:112px; display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--pp-space-md); align-items:center; padding:var(--pp-space-sm); color:var(--pp-color-ink); text-decoration:none; }
.pp-category-card img { width:76px; height:76px; border-radius:var(--pp-radius-lg); object-fit:cover; border:var(--pp-rule); }
.pp-category-card strong { display:block; font-family:var(--pp-font-display); font-size:1.1rem; line-height:1.15; overflow-wrap:anywhere; }
.pp-category-card em { display:block; margin-top:0.25rem; color:var(--pp-color-secondary); font-style:normal; font-family:var(--pp-font-mono); font-size:0.75rem; }
.pp-category-card:hover { box-shadow:var(--pp-shadow-glow); border-color:var(--pp-color-line-strong); }

.pp-empty-state { grid-column:1 / -1; margin:0; padding:var(--pp-space-lg); border:var(--pp-rule); border-radius:var(--pp-radius-xl); background:var(--pp-color-panel-soft); color:var(--pp-color-muted); text-align:center; font-weight:700; }

@media (max-width: 360px) {
  .pp-game-grid--mobile { gap: var(--pp-space-xs); }
  .pp-game-card__body h4 { font-size: 0.82rem; }
  .pp-game-card__cta { font-size: 0.68rem; }
}
@media (min-width: 760px) {
  .pp-game-grid--mobile { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .pp-category-section { display:grid; }
  .pp-category-section__bar { display:flex; }
  .pp-game-card__body p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
}
@media (max-width: 620px) {
  .pp-row-card__link { grid-template-columns: 54px minmax(0,1fr); }
  .pp-row-card__go { grid-column: 2; }
  .pp-rank-row a { grid-template-columns: 36px 48px minmax(0, 1fr); }
}