/* PlayPatch layout regions: screenshot-matched dark mobile H5 dashboard plus supporting pages. */

.pp-header {
  position: relative;
  z-index: 50;
  background: var(--pp-color-panel);
  border-bottom: var(--pp-rule);
  box-shadow: var(--pp-shadow-sm);
  backdrop-filter: blur(18px);
}
.pp-header__inner {
  min-height: var(--pp-header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--pp-space-md);
  align-items: center;
}
.pp-logo, .pp-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-xs);
  text-decoration: none;
  font-family: var(--pp-font-display);
  font-weight: 800;
  color: var(--pp-color-ink);
}
.pp-logo__mark, .pp-brand__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pp-color-primary), var(--pp-color-secondary));
  color: var(--pp-color-bg-deep);
  box-shadow: var(--pp-shadow-glow);
}
.pp-brand small { display:block; margin-top:-0.2rem; color:var(--pp-color-secondary); font-family:var(--pp-font-mono); font-size:0.65rem; letter-spacing:0.08em; text-transform:uppercase; }
.pp-nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--pp-space-xs);
  position: relative;
}
.pp-nav__link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1px solid transparent;
  border-radius: var(--pp-radius-pill);
  background: transparent;
  color: var(--pp-color-muted);
  text-decoration: none;
  font-weight: 700;
  cursor: pointer;
  transition: 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-nav__link:hover, .pp-nav__link.is-active { background: var(--pp-color-primary-soft); border-color: var(--pp-color-line-strong); color: var(--pp-color-ink); }
.pp-menu { display:none; width:44px; height:44px; border:var(--pp-rule); border-radius:var(--pp-radius-md); background:var(--pp-color-panel-soft); }
.pp-menu span:not(.pp-sr) { display:block; width:20px; height:2px; margin:4px auto; background:var(--pp-color-ink); }

.pp-appbar { position: relative; z-index: 60; padding-top: env(safe-area-inset-top, 0); background: var(--pp-color-panel); border-bottom: var(--pp-rule); backdrop-filter: blur(18px); box-shadow: var(--pp-shadow-sm); }
.pp-appbar__inner { min-height: 64px; display:flex; align-items:center; justify-content:space-between; gap:var(--pp-space-sm); }
.pp-appbar__actions { display:flex; align-items:center; gap:var(--pp-space-xs); }
.pp-icon-btn, .pp-avatar { width:42px; height:42px; border:0; border-radius:50%; background:var(--pp-color-panel-high); color:var(--pp-color-ink); display:grid; place-items:center; font-weight:800; box-shadow: inset 0 0 0 1px var(--pp-color-line); }
.pp-icon-btn--status { position:relative; color:var(--pp-color-tertiary); }
.pp-icon-btn--status::after { content:""; position:absolute; right:8px; top:8px; width:8px; height:8px; border-radius:50%; background:var(--pp-color-tertiary); box-shadow:0 0 10px var(--pp-color-tertiary); }
.pp-avatar { background:var(--pp-color-primary); color:var(--pp-color-bg-deep); }
.pp-icon-btn.pp-hamburger {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:44px;
  height:44px;
  border:var(--pp-rule);
  border-radius:var(--pp-radius-md);
  background:linear-gradient(180deg, var(--pp-color-panel-high), var(--pp-color-panel-soft));
  color:var(--pp-color-secondary);
  box-shadow:inset 0 0 14px var(--pp-color-secondary-soft), var(--pp-shadow-sm);
  transition:background var(--pp-dur-fast) var(--pp-ease-out), box-shadow var(--pp-dur-fast) var(--pp-ease-out), transform var(--pp-dur-fast) var(--pp-ease-out), color var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-icon-btn.pp-hamburger:hover,
.pp-icon-btn.pp-hamburger[aria-expanded="true"] {
  color:var(--pp-color-bg-deep);
  background:linear-gradient(135deg, var(--pp-color-secondary), var(--pp-color-primary));
  box-shadow:var(--pp-shadow-glow);
  transform:translateY(-1px);
}
.pp-icon-btn.pp-hamburger span {
  display:block;
  width:19px;
  height:2px;
  border-radius:var(--pp-radius-pill);
  background:currentColor;
  transition:transform var(--pp-dur-fast) var(--pp-ease-out), opacity var(--pp-dur-fast) var(--pp-ease-out);
}
.pp-icon-btn.pp-hamburger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.pp-icon-btn.pp-hamburger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.pp-icon-btn.pp-hamburger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.pp-mobile-main { padding-block: var(--pp-space-md) var(--pp-space-xl); }
.pp-mobile-intro { display:grid; gap:var(--pp-space-sm); }
.pp-title-row { display:flex; align-items:start; justify-content:space-between; gap:var(--pp-space-sm); }
.pp-title-row h1 { margin:0; font-size:clamp(2rem, 10vw, 2.75rem); }
.pp-live-count { flex-shrink:0; display:inline-flex; align-items:center; gap:0.45rem; margin-top:0.4rem; padding:0.38rem 0.65rem; border-radius:var(--pp-radius-pill); background:var(--pp-color-panel-high); color:var(--pp-color-tertiary); font-family:var(--pp-font-mono); font-size:0.7rem; font-weight:700; }
.pp-live-count span { width:8px; height:8px; border-radius:50%; background:var(--pp-color-tertiary); box-shadow:0 0 12px var(--pp-color-tertiary); }
.pp-subline { margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:0.45rem; color:var(--pp-color-muted); font-size:0.92rem; }
.pp-subline strong { color:var(--pp-color-primary); }
.pp-segment { display:grid; grid-template-columns:1.05fr 0.95fr; gap:0.25rem; padding:0.25rem; border-radius:var(--pp-radius-pill); background:var(--pp-color-bg-deep); box-shadow:inset 0 0 0 1px var(--pp-color-line); }
.pp-segment button,
.pp-segment__link { min-width:0; min-height:40px; border:0; border-radius:var(--pp-radius-pill); background:transparent; color:var(--pp-color-muted); font-weight:800; font-size:0.82rem; cursor:pointer; white-space:nowrap; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.pp-segment button.is-active { background:var(--pp-color-primary); color:var(--pp-color-bg-deep); box-shadow:var(--pp-shadow-glow); }
.pp-segment__link:hover { background:var(--pp-color-primary-soft); color:var(--pp-color-primary); }
.pp-segment b { margin-left:0.25rem; font-family:var(--pp-font-mono); font-size:0.66rem; }
.pp-control-panel { display:grid; gap:var(--pp-space-sm); margin-top:var(--pp-space-md); }

.pp-search {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  min-height: 54px;
  padding: 0.35rem 0.42rem;
  border: 1px solid var(--pp-color-line-strong);
  border-radius: var(--pp-radius-xl);
  background:
    linear-gradient(135deg, var(--pp-color-panel-high), var(--pp-color-panel-soft));
  box-shadow: inset 0 0 0 1px oklch(91% 0.018 275 / 0.05), 0 0 24px var(--pp-color-glow-secondary), var(--pp-shadow-sm);
}
.pp-search:focus-within {
  border-color: var(--pp-color-secondary);
  box-shadow: inset 0 0 0 1px var(--pp-color-secondary-soft), 0 0 30px var(--pp-color-glow-secondary), var(--pp-shadow-md);
}
.pp-search__icon {
  width: 40px;
  min-height: 40px;
  display: grid;
  place-items: center;
  color: var(--pp-color-secondary);
  font-size: 1.25rem;
}
.pp-search input {
  min-width: 0;
  width: 100%;
  min-height: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pp-color-ink);
  font-weight: 700;
}
.pp-search input::placeholder { color: var(--pp-color-subtle); font-weight: 600; }
.pp-search button {
  min-height: 40px;
  border: 0;
  border-radius: var(--pp-radius-pill);
  padding: 0.45rem 0.82rem;
  background: linear-gradient(135deg, var(--pp-color-secondary), var(--pp-color-primary));
  color: var(--pp-color-bg-deep);
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 0 18px var(--pp-color-glow-secondary);
}
.pp-search button:active { transform: translateY(1px); }
.pp-feature-strip { display:flex; flex-wrap:wrap; gap:0.45rem; overflow:visible; padding-bottom:0.15rem; }
.pp-feature-strip span { flex:0 1 auto; max-width:100%; min-height:30px; display:inline-flex; align-items:center; padding:0.25rem 0.62rem; border-radius:var(--pp-radius-pill); background:var(--pp-color-panel-soft); color:var(--pp-color-muted); font-size:0.72rem; font-weight:700; line-height:1.15; white-space:normal; overflow-wrap:anywhere; box-shadow:inset 0 0 0 1px var(--pp-color-line); }
.pp-result-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--pp-space-sm); color:var(--pp-color-muted); }
.pp-result-bar strong { color:var(--pp-color-ink); }
.pp-result-bar em { margin-left:0.45rem; padding:0.18rem 0.5rem; border-radius:var(--pp-radius-pill); background:var(--pp-color-tertiary-soft); color:var(--pp-color-tertiary); font-style:normal; font-size:0.7rem; font-weight:800; }
.pp-sort-btn { min-height:34px; border:0; border-radius:var(--pp-radius-md); padding:0.35rem 0.7rem; background:var(--pp-color-panel-high); color:var(--pp-color-ink); font-weight:800; }
.pp-highlight { position:relative; min-height:150px; margin-top:var(--pp-space-md); border-radius:var(--pp-radius-xl); overflow:hidden; background:var(--pp-color-panel); box-shadow:var(--pp-shadow-md); }
.pp-highlight img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0.56; }
.pp-highlight::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--pp-color-bg-deep), transparent 75%); }
.pp-highlight > div { position:relative; z-index:1; padding:var(--pp-space-lg); max-width:18rem; }
.pp-highlight h2 { margin:0; font-size:1.75rem; }
.pp-highlight p:last-child { color:var(--pp-color-muted); margin-bottom:0; }
.pp-ad-slot { display:grid; gap:0.4rem; width:100%; min-height:118px; margin-block:var(--pp-space-sm); padding:var(--pp-space-sm); border:1px dashed var(--pp-color-line-strong); border-radius:var(--pp-radius-lg); background:linear-gradient(145deg,var(--pp-color-panel-soft),var(--pp-color-bg-deep)); text-align:center; }
.pp-ad-slot--empty { display:grid; }
.pp-ad-slot__label { margin:0; color:var(--pp-color-subtle); font-family:var(--pp-font-mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; }
.pp-ad-slot__unit { display:grid; place-items:center; width:100%; min-width:0; max-width:100%; min-height:72px; overflow:hidden; }
.pp-ad-slot__unit > * { max-width:100%; }
.pp-ad-slot__placeholder { display:grid; place-items:center; width:min(100%, 320px); min-height:72px; padding:0.5rem; border:1px solid var(--pp-color-line); border-radius:var(--pp-radius-md); color:var(--pp-color-muted); font-family:var(--pp-font-mono); font-size:0.7rem; letter-spacing:0.06em; }
.pp-ad-slot--fold { margin-block:var(--pp-space-xs); }
@media (min-width:768px) { .pp-ad-slot { max-width:var(--pp-max); margin-inline:auto; } }
.pp-catalog { margin-top:var(--pp-space-md); }
.pp-loader-card { display:grid; gap:var(--pp-space-xs); margin-top:var(--pp-space-md); padding:var(--pp-space-sm); border-radius:var(--pp-radius-lg); background:var(--pp-color-panel-soft); box-shadow:inset 0 0 0 1px var(--pp-color-line); }
.pp-loader-card__meta { display:flex; justify-content:space-between; gap:var(--pp-space-sm); color:var(--pp-color-muted); font-family:var(--pp-font-mono); font-size:0.72rem; }
.pp-loader-card__meta strong { color:var(--pp-color-secondary); }
.pp-progress { height:7px; border-radius:var(--pp-radius-pill); background:var(--pp-color-panel-high); overflow:hidden; }
.pp-progress span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--pp-color-primary),var(--pp-color-secondary),var(--pp-color-tertiary)); box-shadow:var(--pp-shadow-glow); }

.pp-hamburger { gap: 3px; }
.pp-hamburger span { display:block; width:18px; height:2px; border-radius:var(--pp-radius-pill); background:currentColor; }
.pp-menu-backdrop { position:fixed; inset:0; z-index:80; background:oklch(4% 0.03 265 / 0.58); backdrop-filter:blur(6px); }
.pp-home-menu { position:fixed; top:0; right:0; bottom:0; z-index:90; width:min(84vw, 340px); padding:calc(env(safe-area-inset-top, 0px) + var(--pp-space-md)) var(--pp-space-md) var(--pp-space-md); background:var(--pp-color-panel); border-left:var(--pp-rule); box-shadow:-24px 0 60px var(--pp-color-card-shadow); backdrop-filter:blur(18px); }
.pp-home-menu__head { display:flex; align-items:center; justify-content:space-between; gap:var(--pp-space-sm); margin-bottom:var(--pp-space-lg); }
.pp-home-menu__head strong { font-family:var(--pp-font-display); font-size:1.15rem; }
.pp-home-menu__nav { display:grid; gap:var(--pp-space-xs); }
.pp-home-menu__nav a { min-height:46px; display:flex; align-items:center; padding:0.6rem 0.85rem; border-radius:var(--pp-radius-lg); background:var(--pp-color-panel-soft); color:var(--pp-color-ink); text-decoration:none; font-weight:800; box-shadow:inset 0 0 0 1px var(--pp-color-line); }
.pp-home-menu__nav a:hover { background:var(--pp-color-primary-soft); color:var(--pp-color-primary); }
body.pp-menu-open { overflow:hidden; }


.pp-page { padding-block: var(--pp-space-lg) var(--pp-space-2xl); }
.pp-page__mast { max-width: 52rem; margin-block: var(--pp-space-lg); }
.pp-page__mast h1 { margin: 0; font-size: clamp(2.6rem, 8vw, 5.6rem); }
.pp-breadcrumb { display:flex; flex-wrap:wrap; gap:var(--pp-space-xs); font-family:var(--pp-font-mono); font-size:0.8rem; color:var(--pp-color-muted); }
.pp-breadcrumb a { color:var(--pp-color-secondary); text-decoration-thickness:2px; }
.pp-list-stack { display:grid; gap:var(--pp-space-sm); }
.pp-detail { display:grid; grid-template-columns:minmax(280px,0.72fr) minmax(0,1fr); gap:clamp(1rem,4vw,3rem); align-items:start; padding-block:var(--pp-space-xl) var(--pp-space-2xl); }
.pp-detail__playcard { position:sticky; top:calc(var(--pp-header-h) + var(--pp-space-lg)); min-height:440px; border:var(--pp-rule); border-radius:var(--pp-radius-xl); background:var(--pp-color-panel); box-shadow:var(--pp-shadow-md); overflow:hidden; }
.pp-detail__notes { padding:var(--pp-space-lg); border:var(--pp-rule); border-radius:var(--pp-radius-xl); background:var(--pp-color-panel-soft); box-shadow:var(--pp-shadow-md); }
.pp-detail__notes h1 { margin:var(--pp-space-xs) 0 var(--pp-space-lg); font-size:clamp(2.4rem,7vw,5.5rem); }
.pp-related { border-top:var(--pp-rule); padding-block:var(--pp-space-xl); }
.pp-prose { max-width:820px; padding-block:var(--pp-space-xl) var(--pp-space-3xl); }
.pp-prose h1 { margin:0 0 var(--pp-space-lg); font-size:clamp(2.8rem,8vw,5.5rem); }
.pp-prose h2 { margin-top:var(--pp-space-xl); font-size:clamp(1.5rem,4vw,2.35rem); }
.pp-prose p, .pp-prose li { color:var(--pp-color-muted); }
.pp-prose a { color:var(--pp-color-secondary); font-weight:800; }
.pp-updated { font-family:var(--pp-font-mono); }
.pp-footer { margin-top:var(--pp-space-xl); padding-block:var(--pp-space-xl) var(--pp-space-md); background:var(--pp-color-footer-bg); color:var(--pp-color-ink); }
.pp-footer__body { display:flex; flex-direction:column; align-items:center; gap:var(--pp-space-md); padding-block:var(--pp-space-md); text-align:center; }
.pp-footer__brand-block { max-width:32ch; }
.pp-footer__brand { margin:0 0 0.2rem; font-family:var(--pp-font-display); font-weight:800; font-size:1.08rem; }
.pp-footer__tagline { margin:0; color:var(--pp-color-footer-muted); font-size:0.82rem; }
.pp-footer__nav-bar { display:flex; flex-direction:column; gap:0.45rem; width:100%; max-width:460px; }
.pp-footer__nav-row { display:flex; flex-wrap:wrap; justify-content:center; gap:0.5rem 1.1rem; }
.pp-footer__nav-row a { min-height:36px; display:inline-flex; align-items:center; color:var(--pp-color-footer-muted); text-decoration:none; font-size:0.82rem; font-weight:700; }
.pp-footer__nav-row a:hover { color:var(--pp-color-secondary); }
.pp-footer__bottom { margin:0; padding-block:var(--pp-space-sm) var(--pp-space-md); border-top:1px solid var(--pp-color-line); color:var(--pp-color-footer-fine); font-family:var(--pp-font-mono); font-size:0.7rem; letter-spacing:0.035em; text-align:center; }
.pp-play-body { background:var(--pp-color-bg-deep); min-height:100vh; overflow:hidden; }
.pp-play-legal { position:fixed; z-index:25; right:max(0.75rem,env(safe-area-inset-right)); bottom:max(0.5rem,env(safe-area-inset-bottom)); display:grid; gap:0.1rem; justify-items:end; padding:0.35rem 0.6rem; border:var(--pp-rule); border-radius:var(--pp-radius-lg); background:var(--pp-color-panel); color:var(--pp-color-muted); font-size:0.7rem; backdrop-filter:blur(14px); }
.pp-play-legal a { min-height:30px; display:inline-flex; align-items:center; margin-left:0.65rem; color:inherit; text-decoration:none; }
.pp-play-legal a:hover { color:var(--pp-color-secondary); }
.pp-play-legal__row { display:flex; flex-wrap:wrap; justify-content:flex-end; }
.pp-play-menu { position:fixed; top:var(--pp-space-md); right:var(--pp-space-md); z-index:30; }
.pp-play-back { position:fixed; z-index:20; top:var(--pp-space-md); left:var(--pp-space-md); }
.pp-play-stage { min-height:100vh; display:grid; place-items:center; padding:var(--pp-space-md); }
.pp-play-stage iframe { width:100%; height:calc(100vh - 2rem); border:var(--pp-rule); border-radius:var(--pp-radius-lg); background:var(--pp-color-panel); }

@media (min-width: 760px) {
  .pp-mobile-shell { width:var(--pp-max); }
  .pp-mobile-main { padding-bottom:var(--pp-space-3xl); }
  }
@media (max-width: 860px) {
  .pp-header__inner { grid-template-columns:1fr auto; }
  .pp-menu { display:block; }
  .pp-nav { display:none; grid-column:1 / -1; justify-self:stretch; flex-direction:column; align-items:stretch; padding:var(--pp-space-xs); border-radius:var(--pp-radius-xl); background:var(--pp-color-panel); }
  .pp-nav.is-open { display:flex; }
  .pp-nav__link { justify-content:center; border-color:var(--pp-color-line); background:var(--pp-color-panel-soft); }
  .pp-detail, .pp-footer__inner { grid-template-columns:1fr; }
  .pp-detail__playcard { position:relative; top:auto; min-height:340px; }
}