/* rank-wall-b2d — sidebar rank + game wall; palette follows the keyword game — right ranking sidebar + dense game wall, burgundy/gold */
:root {
  --bg: #160806;
  --bg-elev: #24100c;
  --gold: #ffce54;
  --neon: #ff3355;
  --text: #f8e7c8;
  --muted: #c4a090;
  --border: rgba(255,206,84,0.32);
  --cta-bg: #ffce54;
  --cta-text: #160806;
  --font-display: "Oxanium", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
body.wall-shell{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--text);line-height:1.5;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--gold);}
.wall-skip{position:absolute;left:-999px;}
.wall-skip:focus{left:1rem;top:1rem;z-index:40;background:var(--gold);color:#111;padding:.4rem;}
.wall-bar{background:var(--bg-elev);border-bottom:2px solid var(--gold);position:sticky;top:0;z-index:20;}
.wall-bar-inner{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;}
.wall-brand{display:flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--gold);font-family:var(--font-display);font-size:1.3rem;letter-spacing:.08em;}
.wall-brand img{border-radius:2px;}
.wall-nav{display:flex;gap:.9rem;margin-left:auto;}
.wall-nav a{color:#f8e7c8;text-decoration:none;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;}
.wall-18{border:1px solid var(--gold);color:var(--gold);padding:.1rem .35rem;font-family:var(--font-display);}
.wall-burger{display:none;}
.wall-tick{margin:0;padding:.3rem 1rem;background:#2a0a12;color:var(--gold);font-size:.75rem;letter-spacing:.08em;border-top:1px solid #4a1820;}
.wall-layout{display:grid;grid-template-columns:1fr 300px;gap:0;align-items:start;}
#wall-main{padding:1.1rem 1.2rem 2.5rem;min-width:0;}
.wall-rank{position:sticky;top:92px;background:#1c0a12;border-left:2px solid var(--neon);padding:1rem .9rem 1.5rem;min-height:calc(100vh - 92px);}
.wall-rank h2{font-family:var(--font-display);color:var(--gold);margin:0 0 .3rem;font-size:1.1rem;}
.wall-rank-list{list-style:none;margin:.8rem 0;padding:0;}
.wall-rank-list li{display:flex;align-items:center;gap:.45rem;padding:.45rem 0;border-bottom:1px solid #3a1520;}
.wall-pos{width:1.4rem;height:1.4rem;display:grid;place-items:center;background:var(--gold);color:#12050a;font-family:var(--font-display);font-size:.8rem;}
.wall-rank-list img{width:28px;height:28px;}
.wall-hero{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.5rem;background:#1c0a12;border:1px solid var(--gold);padding:0;}
.wall-hero-copy{padding:1.2rem;}
.wall-hero h1,.wall-article h1,.wall-page h1{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);color:#ffe9a8;margin:.3rem 0 .6rem;}
.wall-hero figure{margin:0;}
.wall-hero img{width:100%;height:100%;object-fit:cover;min-height:240px;}
.wall-kicker{color:var(--neon);font-size:.8rem;letter-spacing:.1em;}
.wall-badge{display:inline-block;background:var(--gold);color:#12050a;font-family:var(--font-display);font-size:.65rem;padding:.1rem .35rem;margin-right:.3rem;}
.wall-badge-hot{background:var(--neon);color:#fff;}
.wall-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.55rem;}
.wall-cell{position:relative;display:block;background:#1c0a12;border:1px solid #3a1520;text-decoration:none;color:var(--text);overflow:hidden;}
.wall-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.wall-cell strong{display:block;padding:.4rem .45rem .55rem;font-family:var(--font-display);font-size:.9rem;}
.wall-cell:hover{border-color:var(--gold);box-shadow:0 0 14px rgba(255,206,84,.25);}
.wall-cell-text{grid-column:span 2;}
.wall-cell-text img{aspect-ratio:16/9;}
.wall-id{display:flex;align-items:center;gap:.4rem;padding:.4rem;}
.wall-logo{width:36px;height:36px;}
.wall-table{width:100%;border-collapse:collapse;font-size:.85rem;}
.wall-table th{text-align:left;background:#2a0a12;color:var(--gold);padding:.5rem;font-family:var(--font-display);position:sticky;top:92px;}
.wall-table td{padding:.45rem .5rem;border-bottom:1px solid #3a1520;}
.wall-table tr:hover{background:#1c0a12;}
.wall-foot{padding:1.4rem;border-top:2px solid var(--gold);background:#0a0306;color:var(--muted);font-size:.82rem;}
.wall-article,.wall-page{max-width:46rem;}
.wall-body h2{font-family:var(--font-display);color:var(--gold);}
.btn-cta{display:inline-flex;align-items:center;gap:.4rem;background:var(--cta-bg);color:var(--cta-text);text-decoration:none;font-weight:800;letter-spacing:.06em;padding:.7rem 1.1rem;text-transform:uppercase;box-shadow:0 0 18px rgba(201,179,126,.75),0 0 24px rgba(255,51,85,.2);}
.cta-review-wrap{display:flex;flex-direction:column;gap:.25rem;padding:.4rem;}
.cta-review-disclosure,.cta-disclosure,.wall-disc{font-size:.75rem;color:var(--muted);}
.wall-crumbs{font-size:.82rem;color:var(--muted);margin-bottom:.8rem;}
@media(max-width:960px){
  .wall-layout{grid-template-columns:1fr;}
  .wall-rank{position:relative;top:auto;min-height:0;border-left:0;border-top:2px solid var(--neon);}
  .wall-hero{grid-template-columns:1fr;}
  .wall-burger{display:inline-flex;background:transparent;color:var(--gold);border:1px solid var(--gold);}
  .wall-nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;background:var(--bg-elev);padding:1rem;border-bottom:2px solid var(--gold);}
  .wall-nav.is-open{display:flex;}
}

.btn-cta {
  box-shadow: 0 0 16px color-mix(in srgb, var(--cta-bg) 75%, transparent),
              0 0 36px color-mix(in srgb, var(--cta-bg) 40%, transparent);
}
.btn-cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cta-bg) 90%, transparent),
              0 0 44px color-mix(in srgb, var(--cta-bg) 50%, transparent);
}


/* promo frame, sidebar ranking + framed tile wall */
.wall-promo { margin: 1.5rem 0; }
.wall-promo-frame { position: relative; border: 3px solid var(--gold, #ffce54); overflow: hidden; background: #100604; box-shadow: 0 10px 32px rgba(0,0,0,.45); }
.wall-promo-slide { display: none; margin: 0; }
.wall-promo-slide.is-on { display: block; }
.wall-promo-slide img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.wall-promo-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.75)); color: var(--text); font-weight: 700; }
.wall-promo-nav { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: .4rem; }
.wall-promo-nav button { width: 40px; height: 40px; border: 1px solid var(--gold, #ffce54); background: rgba(22,8,6,.75); color: var(--gold, #ffce54); cursor: pointer; }
.wall-split { display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; align-items: start; margin: 1.5rem 0 2rem; }
.wall-rankpanel { background: var(--bg-elev); border: 1px solid var(--border); padding: 1rem; position: sticky; top: .8rem; max-height: calc(100vh - 2rem); overflow: auto; }
.wall-rankpanel ol { list-style: none; margin: 0; padding: 0; }
.wall-rankpanel li { display: flex; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.wall-pos { flex: 0 0 1.6rem; height: 1.6rem; background: var(--cta-bg); color: var(--cta-text); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .85rem; }
.wall-rankpanel dt { font-size: .7rem; color: var(--muted); }
.wall-rankpanel dd { margin: 0 0 .25rem; font-size: .8rem; }
.wall-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
.wall-tile { position: relative; margin: 0; border: 3px solid var(--gold, #ffce54); overflow: hidden; background: #100604; box-shadow: inset 0 0 0 1px rgba(255,206,84,.2); }
.wall-tile img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; }
.wall-tile .wall-badge { position: absolute; top: .35rem; left: .35rem; }
.wall-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: .35rem .45rem; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: var(--text); font-weight: 700; font-size: .82rem; }
.wall-visit { display: inline-block; margin-top: .3rem; padding: .3rem .6rem; border: 1px solid var(--gold, #ffce54); color: var(--gold, #ffce54); text-decoration: none; font-weight: 700; font-size: .8rem; }
@media (max-width: 860px) {
  .wall-split { grid-template-columns: 1fr; }
  .wall-rankpanel { position: static; max-height: none; }
  .wall-tiles { grid-template-columns: repeat(2, 1fr); }
}