/* WrestlingWall Styles extracted from index2.html */
:root{
  --bg:#EBE9E1;                 /* neutral background */
  --accent:#7A7067;             /* starts grey (All) */
  --accent-rgba:rgba(122,112,103,.45);
  --rose:#A59E98;               /* secondary grade of accent */
  --gold:#9A938E;               /* derived accent for misc */
  --badge1:#7A7067;             /* badge gradient top */
  --badge2:#5D5651;             /* badge gradient bottom */
  --ink:#222222;
  --card-min:280px;
  /* Slant controls: both sides parallel by a shared delta (~7.5deg on squares) */
  --slant-delta: 13.2%;
  --slant-right-top: 4%;
  --slant-left-top: 13.2%;
  /* Pixel-based horizontal slant delta set per-element via JS for uniform angle */
  --slant-dx: 12px;
  /* Internal padding */
  --shape-pad: 8px;
  --logo-pad: 18px;
}
/* Dark theme variable overrides */
:root[data-theme="dark"]{
  --ink:#E6E6E6;
  /* Ensure dark pages have a proper black base without JS */
  --bg:#0f1115;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;
  color:var(--ink);
  background:
    radial-gradient(60% 60% at 50% 20%, var(--accent-rgba), transparent 70%),
    linear-gradient(0deg, var(--bg), var(--bg)) fixed;
}

/* Top bar */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.72);backdrop-filter:saturate(1.25) blur(10px);-webkit-backdrop-filter:saturate(1.25) blur(10px);border-bottom:1px solid #efeae4}
.theme-icon{display:none}
html[data-theme="light"] .theme-icon.sun{display:block}
html[data-theme="dark"] .theme-icon.moon{display:block}
.topbar-inner{display:flex;flex-direction:column;align-items:center;gap:12px;padding:10px 16px;width:100%;max-width:none;margin:0 auto}
.brand{grid-area:brand;display:flex;flex-direction:column;gap:8px;align-items:center}
.logo{display:block;text-decoration:none;color:var(--ink)}
.logo:link,.logo:visited,.logo:hover,.logo:active{color:var(--ink);text-decoration:none}
.logo-img{width:clamp(96px,12vw,150px);aspect-ratio:1/1;display:block;object-fit:contain;object-position:center;}
/* Logo background removed per request */
.logo-title{font-weight:800;font-size:22px;letter-spacing:.3px;text-align:center}
.brand-row{display:flex;align-items:center;gap:10px;margin-top:4px}
.logo-title b{color:var(--accent)}
.logo:hover{text-decoration:none;opacity:.98}
/* Top actions live at the right of the nav row */
.top-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.search{flex:1;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,0.9);border:1px solid #e8e2da;border-radius:0;padding:8px 14px;
  padding-left: calc(14px + var(--shape-pad));
  padding-right: calc(14px + var(--shape-pad));
  clip-path: polygon(
    var(--slant-left-top) 0%,
    calc(100% - var(--slant-right-top)) 0%,
    calc(100% - (var(--slant-right-top) + var(--slant-dx))) 100%,
    calc(var(--slant-left-top) - var(--slant-dx)) 100%
  );
}
.search input{border:0;outline:0;width:100%;font-size:15px;background:transparent;color:var(--ink)}
.search input::placeholder{color:#a8a29e}
.icon-btn{border:0;background:rgba(255,255,255,0.9);border:1px solid #e8e2da;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;transition:background .2s, border-color .2s, color .2s;
  padding: var(--shape-pad);
  clip-path: polygon(
    var(--slant-left-top) 0%,
    calc(100% - var(--slant-right-top)) 0%,
    calc(100% - (var(--slant-right-top) + var(--slant-dx))) 100%,
    calc(var(--slant-left-top) - var(--slant-dx)) 100%
  );
}
.icon{width:20px;height:20px;display:block}
/* Dark mode glass and controls */
html[data-theme="dark"] .topbar{background:rgba(14,16,20,0.6);border-bottom:1px solid rgba(255,255,255,0.08)}
html[data-theme="dark"] .search{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16)}
html[data-theme="dark"] .search input::placeholder{color:#9aa0a6}
html[data-theme="dark"] .icon-btn{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16);color:#e8e6e3}
html[data-theme="dark"] .icon-btn:hover{background:rgba(255,255,255,0.1)}

/* Chips */
.nav-row{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#E5E7EB; /* match chip default background */
  border-top:1px solid #D1D5DB;
  border-bottom:1px solid #D1D5DB;
  padding:8px 12px;
  /* full-bleed background across viewport while header has inner padding */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.chips{display:flex;gap:8px;flex-wrap:nowrap;overflow:auto;white-space:nowrap;margin:0 auto;padding:0;flex:0 1 auto}
.chip{padding:9px 14px;border-radius:0;border:1px solid #D1D5DB;background:#E5E7EB;cursor:pointer;font-weight:700;font-size:13px;color:#111827;text-decoration:none;display:inline-block;
  /* default to current page accent unless overridden per-chip */
  --chip-accent: var(--accent);
  transition: box-shadow .15s ease, border-color .15s ease, color .15s ease, background-color .15s ease;
  padding-left: calc(14px + var(--shape-pad));
  padding-right: calc(14px + var(--shape-pad));
  clip-path: polygon(
    var(--slant-left-top) 0%,
    calc(100% - var(--slant-right-top)) 0%,
    calc(100% - (var(--slant-right-top) + var(--slant-dx))) 100%,
    calc(var(--slant-left-top) - var(--slant-dx)) 100%
  );
}
.chip:hover:not([data-active="true"]),
.chip:focus-visible:not([data-active="true"]){
  border-color: color-mix(in srgb, var(--chip-accent) 80%, #000) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chip-accent) 40%, transparent),
              0 0 16px color-mix(in srgb, var(--chip-accent) 45%, transparent) !important;
  outline: none;
  z-index: 1;
}
.chip[data-active="true"]{background:var(--accent);border-color:color-mix(in srgb, var(--accent) 85%, #000);color:#fff;box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--accent)}
html[data-theme="dark"] .chip{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);color:#E5E7EB}
html[data-theme="dark"] .chip[data-active="true"]{box-shadow:0 0 0 2px rgba(255,255,255,0.85), 0 0 0 4px var(--accent)}
/* Dark theme for nav row to match chips */
html[data-theme="dark"] .nav-row{
  background: rgba(255,255,255,0.08);
  border-top-color: rgba(255,255,255,0.18);
  border-bottom-color: rgba(255,255,255,0.18);
}

/* Per-chip accent variables for hover glow */
.chip[data-tag="All"]{ --chip-accent: #7A7067; }
.chip[data-tag="RAW"]{ --chip-accent: #C84832; }
.chip[data-tag="Smackdown"]{ --chip-accent: #4A6FA5; }
.chip[data-tag="NXT"]{ --chip-accent: #C9A227; }
.chip[data-tag="PPV"]{ --chip-accent: #6B7280; }
.chip[data-tag="TNA"]{ --chip-accent: #B11226; }
.chip[data-tag="AEW"]{ --chip-accent: #8C6A00; }
.chip[data-tag="Classics"]{ --chip-accent: #D6536D; }
.chip[data-tag="Podcasts"]{ --chip-accent: #6B5FB3; }
.chip[data-tag="Fancams"]{ --chip-accent: #E6762C; }

/* Content Controls (moved out of header) */
.content-controls{max-width:1200px;margin:8px auto 8px;padding:0 16px;display:flex;gap:10px;align-items:center;justify-content:flex-end}
.density{display:flex;align-items:center;gap:8px;color:#6a5f55;font-size:13px}
.density input{accent-color:var(--accent)}
html[data-theme="dark"] .density{color:#b9b4ae}
.add-btn{background:linear-gradient(180deg,var(--rose),var(--accent));color:white;border:0;padding:calc(10px + var(--shape-pad)) calc(14px + var(--shape-pad));font-weight:700;cursor:pointer;box-shadow:0 10px 30px #00000022;
  clip-path: polygon(
    var(--slant-left-top) 0%,
    calc(100% - var(--slant-right-top)) 0%,
    calc(100% - (var(--slant-right-top) + var(--slant-dx))) 100%,
    calc(var(--slant-left-top) - var(--slant-dx)) 100%
  );
}

/* Grid */
.grid{max-width:1200px;margin:0 auto;padding:0 16px 64px;display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--card-min),1fr));gap:16px}
.card{position:relative;overflow:hidden;border-radius:0;background:#ddd;box-shadow:0 10px 30px #0000000a;border:1px solid #eadfd5;cursor:pointer;min-height:160px;aspect-ratio:16/9;
  transition: box-shadow .15s ease, border-color .15s ease}
html[data-theme="dark"] .card{background:#111418;border-color:rgba(255,255,255,0.08);box-shadow:0 10px 30px #00000040}
.thumb{position:absolute;inset:0;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.card:hover .thumb img,
.card:focus-within .thumb img,
.card:focus-visible .thumb img,
.card:focus .thumb img{transform:scale(1.03)}
.card:hover, .card:focus-within, .card:focus-visible, .card:focus{
  border-color: color-mix(in srgb, var(--accent) 85%, #000);
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--accent),
    0 12px 36px color-mix(in srgb, var(--accent) 25%, transparent);
  outline: none;
}
.shade{position:absolute;inset:0;background:linear-gradient(180deg, #0000 0%, #0008 78%, #000b 100%)}
.badge{position:absolute;top:10px;left:10px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;background:linear-gradient(180deg,var(--badge1),var(--badge2));box-shadow:0 6px 18px #0005;border:1px solid #ffffff1a}
.play{position:absolute;inset:auto auto 56px 16px;display:none;align-items:center;gap:10px;color:#fff}
.play svg{filter:drop-shadow(0 6px 16px #0007)}
.meta{position:absolute;left:16px;right:16px;bottom:12px;color:#fff;opacity:1;transform:none;pointer-events:none}
.title{font-size:16px;font-weight:800;line-height:1.2;margin:0 0 6px}
.sub{opacity:.85;font-size:13px;display:none}

/* Truncated vs full title swap */
.title-full{display:none}
.card:hover .title-full,
.card:focus-within .title-full,
.card:focus-visible .title-full,
.card:focus .title-full{display:block}
.card:hover .title-short,
.card:focus-within .title-short,
.card:focus-visible .title-short,
.card:focus .title-short{display:none}

/* Skeleton loading */
.card.skeleton{pointer-events:none}
.card.skeleton .thumb{background:linear-gradient(90deg,#eee9e3,#f5f2ee,#eee9e3);background-size:200% 100%;animation:skeleton-shimmer 1.2s ease-in-out infinite}
.card.skeleton .shade,.card.skeleton .badge,.card.skeleton .play,.card.skeleton .meta{display:none}
html[data-theme="dark"] .card.skeleton .thumb{background:linear-gradient(90deg,#1e2128,#272b33,#1e2128)}

@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* Modal player with accent tint */
.modal{position:fixed;inset:0;display:none;place-items:center;background:
    radial-gradient(60% 60% at 50% 40%, var(--accent-rgba), transparent 70%),
    linear-gradient(0deg, #000000bb, #000000bb);
  backdrop-filter:blur(6px);
  z-index:100}
.modal[open]{display:grid}
.player{width:min(1080px,92vw);aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;border:2px solid var(--accent);box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent), 0 30px 80px #0009}
.close{position:absolute;top:16px;right:16px;background:var(--accent);border:0;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;box-shadow:0 10px 30px #0006;
  padding: var(--shape-pad);
  clip-path: polygon(
    var(--slant-left-top) 0%,
    calc(100% - var(--slant-right-top)) 0%,
    calc(100% - (var(--slant-right-top) + var(--slant-dx))) 100%,
    calc(var(--slant-left-top) - var(--slant-dx)) 100%
  );
}
.close svg path{stroke:#fff}

/* Watch layout: player + related */
.watch{width:min(1200px,95vw);display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:stretch}
.watch .player{width:100%}
.related{display:flex;flex-direction:column;background:rgba(255,255,255,0.9);border:1px solid #e8e2da;border-radius:12px;overflow:hidden}
.related-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px;border-bottom:1px solid #e8e2da}
.related-head h3{margin:0;font-size:14px;font-weight:800}
.related-list{padding:8px;display:flex;flex-direction:column;gap:10px;overflow:auto;max-height:100%}
.related-item{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid #e8e2da;background:#f7f7f7;cursor:pointer;border-radius:8px;transition:border-color .15s ease, box-shadow .15s ease}
.related-item:focus-visible,.related-item:hover{border-color:color-mix(in srgb, var(--accent) 75%, #000);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent)}
.ri-thumb{width:112px;flex:0 0 112px;aspect-ratio:16/9;border-radius:6px;overflow:hidden}
.ri-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ri-title{font-size:13px;font-weight:700;line-height:1.25;display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.related-toggle{transition:transform .2s ease}
.watch.related-collapsed .related-toggle{transform:rotate(180deg)}
.watch.related-collapsed{grid-template-columns:1fr 48px}
.watch.related-collapsed .related{min-width:48px;width:48px}
.watch.related-collapsed .related-list,.watch.related-collapsed .related-head h3{display:none}

html[data-theme="dark"] .related{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16)}
html[data-theme="dark"] .related-head{border-bottom-color:rgba(255,255,255,0.16)}
html[data-theme="dark"] .related-item{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.16)}

/* Footer */
footer{max-width:1200px;margin:0 auto 40px;padding:12px 16px;border-top:1px dashed #e3dcd4;color:#7a7067;font-size:12px;
  display:flex;align-items:center;gap:10px}
footer .footer-actions{margin-left:auto;display:flex;gap:10px}
html[data-theme="dark"] footer{border-top-color:rgba(255,255,255,0.12);color:#b9b4ae}

/* Decorative dots */
.dot{position:fixed;width:8px;height:8px;background:var(--accent);border-radius:50%;top:18px;left:10px;opacity:.8}
.dot.r{right:12px;left:auto;top:28px;background:var(--rose)}
.dot.y{right:26px;top:auto;bottom:26px;background:var(--gold)}

@media (max-width:900px){
  .topbar-inner{gap:10px}
}

@media (max-width:640px){
  .title{font-size:15px}
  .play{bottom:50px}
}