/* ============================================================
   BUNKROS PLAY — Quiz Center hub (2026-09-27)
   Scene 1: full-viewport video hero · Scene 2: three big cards
   ============================================================ */
.pl-hero { position: relative; min-height: 100svh; box-sizing: border-box; overflow: hidden; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px;
    padding: calc(var(--sh-top-h) + 32px) var(--gutter) clamp(90px, 13vh, 130px); }
.pl-hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.pl-hero-shade { position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(8,8,12,.92) 0%, rgba(8,8,12,.6) 45%, rgba(8,8,12,.15) 100%),
                linear-gradient(0deg, var(--bg-base) 0%, transparent 35%); }
[data-theme="light"] .pl-hero-shade { background: linear-gradient(90deg, rgba(250,248,245,.94) 0%, rgba(250,248,245,.6) 50%, rgba(250,248,245,.1) 100%), linear-gradient(0deg, var(--bg-base) 0%, transparent 35%); }
.pl-hero-inner { max-width: 640px; }
.pl-title { font: 900 clamp(3rem, 1.6rem + 7vw, 7.6rem)/.88 var(--font-heading); text-transform: uppercase; letter-spacing: -.03em; margin: 18px 0 20px; }
.pl-title em { font-style: normal; background: var(--sh-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-title span { color: var(--sh-accent); }
.pl-lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.3rem); line-height: 1.55; color: var(--text-secondary); max-width: 44ch; margin: 0 0 28px; }
.pl-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pl-hero-index { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: end; }
.pl-hero-index li { font: 700 .8rem/1 var(--font-accent); letter-spacing: .16em; text-transform: uppercase; color: var(--sh-text); padding: 10px 14px; border-radius: 12px; background: var(--sh-glass); border: 1px solid var(--sh-border); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.pl-hero-index b { color: var(--sh-accent); margin-right: 8px; }

.pl-list { width: min(1320px, 100%); margin: 0 auto; box-sizing: border-box; padding: clamp(40px, 8vh, 90px) var(--gutter) clamp(50px, 8vh, 100px);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.pl-card { position: relative; display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; text-decoration: none; color: var(--sh-text) !important;
    background: var(--bg-surface); border: 1px solid var(--sh-border);
    transition: transform .5s var(--sh-spring), box-shadow .4s, border-color .3s; }
.pl-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--acc) 60%, transparent); box-shadow: 0 34px 70px -34px var(--acc); }
.pl-card:active { transform: scale(.98); }
.pl-card-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.pl-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--sh-ease); }
.pl-card:hover .pl-card-media img { transform: scale(1.06); }
.pl-card-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg-surface) 0%, transparent 45%); }
.pl-card-body { display: flex; flex-direction: column; gap: 12px; padding: 4px clamp(18px, 2vw, 26px) clamp(20px, 2vw, 26px); flex: 1; }
.pl-card-top { display: flex; align-items: center; gap: 10px; }
.pl-card-no { font: 900 1.6rem/1 var(--font-heading); color: var(--acc); }
.pl-card-tag { font: 700 .72rem/1 var(--font-accent); letter-spacing: .18em; text-transform: uppercase; padding: 7px 10px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--acc) 55%, transparent); color: var(--acc); }
.pl-card-name { font: 800 clamp(1.3rem, 1.1rem + .7vw, 1.75rem)/1.1 var(--font-heading); }
.pl-card-desc { color: var(--text-secondary); line-height: 1.55; font-size: 1rem; }
.pl-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-card-meta span { font: 600 .78rem/1 var(--font-accent); padding: 8px 10px; border-radius: 10px; background: var(--sh-surface-2); color: var(--sh-text); }
.pl-card-go { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 54px; border-radius: 16px;
    font: 800 .84rem/1 var(--font-accent); letter-spacing: .14em; text-transform: uppercase; color: #fff;
    background: linear-gradient(135deg, var(--acc), color-mix(in srgb, var(--acc) 40%, #9d00ff)); }

/* iPad landscape */
@media (min-width: 1024px) and (max-width: 1199px) {
    .pl-hero { padding: 48px calc(var(--gutter) + 56px) 110px var(--gutter); }
    .pl-list { padding-right: calc(var(--gutter) + 56px); }
    .pl-card-desc { font-size: .95rem; }
}
/* iPad portrait: stacked horizontal cards */
@media (min-width: 768px) and (max-width: 1023px) {
    .pl-hero { grid-template-columns: 1fr; padding: 48px calc(var(--gutter) + 56px) 120px var(--gutter); }
    .pl-hero-index { display: none; }
    .pl-list { grid-template-columns: 1fr; padding-right: calc(var(--gutter) + 56px); }
    .pl-card { flex-direction: row; min-height: 260px; }
    .pl-card-media { aspect-ratio: auto; width: 42%; flex: none; }
    .pl-card-media::after { background: linear-gradient(270deg, var(--bg-surface) 0%, transparent 40%); }
    .pl-card-body { padding: 22px 24px 22px 8px; }
}
/* phone */
@media (max-width: 767px) {
    .pl-hero { grid-template-columns: 1fr; padding: calc(var(--sh-top-h) + 24px) 18px 40px; min-height: calc(100svh - var(--sh-bot-h)); }
    .pl-hero-shade { background: linear-gradient(0deg, var(--bg-base) 8%, rgba(8,8,12,.7) 50%, rgba(8,8,12,.25) 100%); }
    [data-theme="light"] .pl-hero-shade { background: linear-gradient(0deg, var(--bg-base) 8%, rgba(250,248,245,.75) 55%, rgba(250,248,245,.2) 100%); }
    .pl-hero-index { display: none; }
    .pl-hero-actions .bk-btn { flex: 1 1 0; padding: 0 1rem; white-space: nowrap; }
    .pl-list { grid-template-columns: 1fr; padding: 28px 16px 40px; gap: 16px; }
    .pl-card-media { aspect-ratio: 16 / 9; }
}