/* ZZZ V3 front-end — Thaiplayers ZZZ design system.
   Scoped under .tpz-shell so it renders consistently inside any theme. Yellow
   accent; dark-first with light-dark() tokens; responsive to 320px; WCAG-minded
   focus states. Themes may override templates at {theme}/zzz-v3/*.php. */

.tpz-shell{
  color-scheme:light dark;
  --accent:#ffb21a;--accent2:#ffd36a;
  --bg:light-dark(#f3f5f8,#0b0d10);--panel:light-dark(#ffffff,#141820);
  --panel2:light-dark(#edf1f5,#1a202a);--ink:light-dark(#161a20,#f5f7fa);
  --muted:light-dark(#5b6473,#99a3b3);--line:light-dark(#dbe0e7,#2a313d);
  --radius:18px;font-family:Inter,"Noto Sans Thai",system-ui,sans-serif;
  color:var(--ink);line-height:1.55}
.tpz-shell *{box-sizing:border-box}
.tpz-wrap{width:min(1180px,calc(100% - 32px));margin:26px auto 52px}
.tpz-shell a{color:inherit}
.tpz-shell a:focus-visible,.tpz-shell button:focus-visible,.tpz-shell input:focus-visible,.tpz-shell select:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.tpz-crumb{color:var(--muted);font-size:13px;margin-bottom:16px}
.tpz-crumb a{text-decoration:none;color:var(--muted)}
.tpz-crumb b{color:var(--ink)}

.tpz-hero{position:relative;overflow:hidden;border:1px solid #343b48;border-radius:calc(var(--radius) + 5px);min-height:300px;padding:40px;background:radial-gradient(circle at 82% 30%,rgba(255,178,26,.25),transparent 27%),linear-gradient(120deg,#171c26 0,#0e1117 64%,#19140c 100%);color:#f5f7fa}
.tpz-hero:after{content:"ZZZ";position:absolute;right:-22px;bottom:-94px;font-weight:1000;font-size:250px;letter-spacing:-24px;color:rgba(255,255,255,.035);line-height:1;pointer-events:none}
.tpz-kicker{display:inline-flex;align-items:center;gap:7px;background:rgba(255,178,26,.12);border:1px solid rgba(255,178,26,.35);color:var(--accent2);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:750}
.tpz-kicker i{width:7px;height:7px;border-radius:50%;background:#57dd80;box-shadow:0 0 12px #57dd80}
.tpz-hero h1{font-size:clamp(34px,6vw,64px);line-height:1;max-width:700px;margin:22px 0 14px;letter-spacing:-1.5px}
.tpz-hero h1 span{color:var(--accent)}
.tpz-hero p{max-width:660px;color:#b4bdca;font-size:17px;margin:0 0 24px}
.tpz-actions{display:flex;gap:10px;flex-wrap:wrap}
.tpz-btn{border:0;border-radius:12px;padding:12px 16px;font-weight:800;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px;cursor:pointer}
.tpz-btn.primary{background:var(--accent);color:#171108}
.tpz-btn.ghost{background:#222834;color:#fff;border:1px solid #343d4b}
.tpz-meta{position:absolute;right:32px;top:28px;display:grid;gap:8px;text-align:right;color:#99a3b3;font-size:12px}
.tpz-meta b{color:#fff;font-size:15px;display:block}

.tpz-subnav{display:flex;gap:4px;overflow:auto;margin:18px 0 30px;padding:7px;background:var(--panel2);border:1px solid var(--line);border-radius:14px}
.tpz-subnav a{color:var(--muted);text-decoration:none;padding:9px 12px;border-radius:10px;font-size:14px;white-space:nowrap}
.tpz-subnav a.active{background:var(--accent);color:#181109;font-weight:850}

.tpz-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:34px 0 16px;flex-wrap:wrap}
.tpz-heading h1{font-size:30px;margin:0;letter-spacing:-.5px}
.tpz-heading h2{font-size:25px;margin:0;letter-spacing:-.5px}
.tpz-heading p{margin:4px 0 0;color:var(--muted);font-size:14px}
.tpz-heading a{color:#d18c00;font-size:13px;text-decoration:none}

.tpz-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.tpz-dbcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-height:150px;text-decoration:none;color:var(--ink);display:block}
.tpz-dbcard .art{height:88px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#252d39,#171c23);position:relative}
.tpz-dbcard:nth-child(2) .art{background:linear-gradient(145deg,#40311c,#181716)}
.tpz-dbcard:nth-child(3) .art{background:linear-gradient(145deg,#233b38,#151b1b)}
.tpz-dbcard:nth-child(4) .art{background:linear-gradient(145deg,#3b2527,#1a1518)}
.tpz-dbcard:nth-child(5) .art{background:linear-gradient(145deg,#2c2944,#171622)}
.tpz-dbcard .count{position:absolute;right:9px;top:9px;background:rgba(5,7,9,.7);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:3px 8px;font-size:10px;color:#fff}
.tpz-dbcard .txt{padding:13px;display:block}
.tpz-dbcard b{display:block;font-size:15px}
.tpz-dbcard small{color:var(--muted)}

.tpz-feature{display:grid;grid-template-columns:1.35fr .65fr;gap:14px}
.tpz-endgame,.tpz-team{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:20px}
.tpz-endgame-top{display:flex;justify-content:space-between;gap:12px}
.tpz-label{font-size:11px;font-weight:900;letter-spacing:.8px;color:#d18c00;text-transform:uppercase}
.tpz-endgame h3,.tpz-team h3{margin:5px 0 4px;font-size:20px}
.tpz-muted{color:var(--muted);font-size:13px}
.tpz-chip{display:inline-block;background:var(--panel2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:4px 9px;font-size:11px;white-space:nowrap}
.tpz-rooms{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:17px}
.tpz-room{background:var(--panel2);border:1px solid var(--line);border-radius:13px;padding:12px}
.tpz-room small{display:block;color:var(--muted)}
.tpz-room b{font-size:13px}
.tpz-lineup{display:flex;margin:18px 0 15px}
.tpz-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#3b4656,#1e242d);border:3px solid var(--panel);margin-right:-8px;color:var(--accent);font-weight:900}
.tpz-bangboo{margin-left:18px;background:linear-gradient(145deg,#45391e,#1f1d17)}

.tpz-newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tpz-news{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tpz-news a{text-decoration:none;color:inherit;display:block}
.tpz-newsart{height:170px;position:relative;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#313b4a,#12161c)}
.tpz-newsart img{width:100%;height:100%;object-fit:cover}
.tpz-newsart .cat{position:absolute;left:12px;top:12px;background:var(--accent);color:#171108;border-radius:7px;padding:4px 8px;font-size:10px;font-weight:900}
.tpz-newsbody{padding:16px}
.tpz-newsbody h3{font-size:16px;line-height:1.45;margin:0 0 8px}
.tpz-newsbody p{font-size:13px;color:var(--muted);margin:0}
.tpz-byline{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:15px}
.tpz-note{margin-top:28px;border:1px dashed var(--line);border-radius:14px;color:var(--muted);padding:14px 16px;font-size:12px}

/* Archive card grid + filters + pagination */
.tpz-cardgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.tpz-card{display:block;text-decoration:none;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tpz-card__art{display:block;aspect-ratio:1/1;background:var(--panel2);overflow:hidden}
.tpz-card__art img{width:100%;height:100%;object-fit:cover}
.tpz-card__name{display:block;padding:10px 12px;font-weight:700}
.tpz-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.tpz-filters input,.tpz-filters select{padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-size:14px}
.tpz-pagination{display:flex;gap:6px;flex-wrap:wrap;margin-top:24px}
.tpz-pagination a,.tpz-pagination .current{padding:8px 12px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}
.tpz-pagination .current{background:var(--accent);color:#171108;border-color:var(--accent);font-weight:800}

/* Drive Discs combined */
.tpz-toc{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:14px 18px;margin:8px 0 24px}
.tpz-toc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.tpz-toc a{text-decoration:none;color:#d18c00}
.tpz-disc{border-top:1px solid var(--line);padding:20px 0}
.tpz-disc h2{margin:0 0 6px;font-size:22px}
.tpz-bonuses{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0}
.tpz-bonuses dt{font-weight:800;color:var(--accent2)}
.tpz-bonuses dd{margin:0;color:var(--ink)}

.tpz-empty{opacity:.7;font-style:italic;padding:14px 0}

/* Entity detail (reused by the single view via Templates) */
.zzzv3-entity{max-width:900px;margin:16px 0}
.zzzv3-entity__header{display:flex;gap:1.25rem;align-items:center;margin-bottom:1rem;flex-wrap:wrap}
.zzzv3-entity__name{margin:0;font-size:1.7rem}
.zzzv3-entity__meta{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}
.zzzv3-frame{display:block;width:110px;flex:0 0 auto;border-radius:14px;background:var(--panel2);overflow:hidden}
.zzzv3-frame--portrait{width:160px}.zzzv3-frame--banner{width:320px}
.zzzv3-frame img{display:block}
.zzzv3-facts{width:100%;border-collapse:collapse;margin:1rem 0}
.zzzv3-facts th,.zzzv3-facts td{text-align:left;padding:.45rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.zzzv3-facts th{width:34%;color:var(--muted);font-weight:600}
.zzzv3-list ul{margin:.25rem 0 1rem;padding-left:1.1rem}
.zzzv3-skill{padding:.8rem 0;border-top:1px solid var(--line)}
.zzzv3-skill__cat{font-size:.8rem;color:var(--muted);font-weight:400}
.zzzv3-skill__levels{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:.4rem}
.zzzv3-skill__levels th,.zzzv3-skill__levels td{border:1px solid var(--line);padding:.3rem .55rem}
.zzzv3-relations ul,.zzzv3-reverse ul{list-style:none;margin:.5rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.zzzv3-relations li,.zzzv3-reverse li{background:var(--panel2);padding:.35rem .8rem;border-radius:999px}
.zzzv3-relation__kind{color:var(--muted);font-size:.85rem}
.zzzv3-reverse{margin-top:1.5rem}
.zzzv3-entity__footer{margin-top:1.5rem;color:var(--muted)}
.zzzv3-empty{opacity:.7;font-style:italic}

@media(max-width:900px){
  .tpz-grid5{grid-template-columns:repeat(3,1fr)}
  .tpz-feature{grid-template-columns:1fr}
  .tpz-newsgrid{grid-template-columns:1fr 1fr}
  .tpz-hero{padding:30px}
  .tpz-meta{position:static;text-align:left;margin-top:22px;display:flex;gap:18px}
}
@media(max-width:600px){
  .tpz-wrap{width:min(100% - 20px,1180px)}
  .tpz-hero{padding:24px 20px}
  .tpz-hero h1{font-size:34px}
  .tpz-grid5{grid-template-columns:1fr 1fr}
  .tpz-dbcard:last-child{grid-column:1/-1}
  .tpz-newsgrid{grid-template-columns:1fr}
  .tpz-rooms{grid-template-columns:1fr}
  .zzzv3-entity__header{flex-direction:column;text-align:center}
}