﻿:root{--bg:#0f1a24;--deep:#081018;--panel:#1a2836;--panel2:#243648;--line:#314a60;--lime:#3db2ff;--lime2:#1a8cd8;--ink:#041018;--text:#e8f4ff;--muted:#8aa8c0;--gold:#ffc857;--red:#ff5a5f;--r:14px}

/* home layout 18 */

/* structural layouts 10-19 */
.lay-head,.soft-hero,.neon-top,.prem-head{margin:12px 12px 0;padding:16px 14px;border-radius:var(--r);background:var(--panel)}
.lay-kicker{font-size:12px;font-weight:800;color:var(--lime);letter-spacing:.04em;text-transform:uppercase}
.lay-head h1,.soft-hero h1,.neon-top h1,.prem-head h1{font-size:22px;line-height:1.2;font-weight:900;margin:6px 0}
.chiprow,.pillrow,.fchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip,.fchip{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:var(--panel2);color:var(--text);font-weight:700;font-size:13px;border:1px solid var(--line)}
.chip--fill,.fchip.is-on{background:var(--lime);color:var(--ink);border-color:transparent}
.pillrow span{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.mini{font-size:12.5px;color:var(--muted);text-align:center}
.tight{padding-top:12px;padding-bottom:12px}
.store-first{margin-top:12px}
.cta-row{margin:12px}
.feat{margin:12px 12px 0}
.feat__cover{display:block;position:relative;border-radius:16px;overflow:hidden}
.feat__cover img{width:100%;aspect-ratio:16/9;object-fit:cover}
.feat__cap{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.82));color:#fff}
.feat__cap em{display:block;font-size:11px;color:var(--lime);font-style:normal;font-weight:800}
.feat__cap b{display:block;font-size:18px}
.medal-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.medal{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px 6px;border-radius:12px;background:var(--panel2);color:var(--text)}
.medal img{width:72px;height:96px;object-fit:cover;border-radius:10px}
.medal__n{font-weight:900;color:var(--gold)}
.medal b{font-size:12px}
.medal small{font-size:11px;color:var(--muted)}
.gcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gcard{display:block;border-radius:12px;overflow:hidden;background:var(--panel2);color:var(--text)}
.gcard img{width:100%;aspect-ratio:16/10;object-fit:cover}
.gcard b{display:block;padding:8px 8px 0;font-size:13px}
.gcard small{display:block;padding:2px 8px 10px;color:var(--muted);font-size:11px}
.hitbar{display:flex;align-items:center;justify-content:space-between;margin:12px;padding:12px 14px;border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.hitbar b{display:block;font-size:16px}
.hitbar span{font-size:12px;color:var(--muted)}
.hitbar a{background:var(--lime);color:var(--ink);font-weight:800;padding:8px 14px;border-radius:10px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px}
.duo a{display:block;padding:16px;border-radius:14px;background:var(--panel);color:var(--text)}
.duo small{display:block;color:var(--muted);font-size:12px}
.duo b{font-size:22px;color:var(--lime)}
.duo__b{background:linear-gradient(135deg,var(--panel2),var(--panel))}
.searchish{display:flex;align-items:center;gap:10px;margin:12px;padding:12px 14px;border-radius:999px;background:var(--panel);border:1px solid var(--line)}
.searchish p{flex:1;font-size:13px;color:var(--muted)}
.searchish a{font-weight:800;color:var(--lime)}
.table--dense td,.table--dense th{padding:6px 4px;font-size:12.5px;vertical-align:middle}
.table--dense img{width:28px;height:36px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:6px;display:inline-block}
.center-dl .dl{max-width:100%}
.alert{margin:12px;padding:14px;border-radius:14px;background:rgba(255,0,51,.12);border:1px solid var(--red)}
.alert strong{color:var(--red)}
.alert a{display:inline-block;margin-top:8px;font-weight:800;color:var(--lime)}
.bigstat{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px}
.bigstat div{background:var(--panel);border-radius:14px;padding:14px 8px;text-align:center}
.bigstat small{display:block;color:var(--muted);font-size:11px}
.bigstat b{display:block;font-size:20px;color:var(--lime);margin-top:4px}
.strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px}
.strip__item{display:block;text-align:center;color:var(--text)}
.strip__item img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;box-shadow:0 0 16px rgba(255,60,172,.2)}
.strip__item b{display:block;margin-top:4px;font-size:11px}
.neon-promo{display:grid;grid-template-columns:1fr;gap:8px;margin:12px}
.neon-promo a{display:block;padding:12px 14px;border-radius:12px;border:1px solid var(--lime);color:var(--lime);font-weight:800;text-align:center}
.fish{display:grid;grid-template-columns:1.2fr .8fr;gap:10px;margin:12px;padding:14px;border-radius:16px;background:var(--panel);align-items:center}
.fish__text .btn{margin:6px 6px 0 0}
.fish__art img{width:100%;border-radius:12px;aspect-ratio:3/4;object-fit:cover}
.vipbar{display:flex;align-items:center;justify-content:space-between;margin:12px;padding:14px;border-radius:14px;background:linear-gradient(90deg,var(--panel),var(--panel2));border:1px solid var(--gold)}
.vipbar b{color:var(--gold);font-size:18px}
.vipbar span{display:block;font-size:12px;color:var(--muted)}
.vipbar a{background:var(--gold);color:#041008;font-weight:900;padding:8px 12px;border-radius:10px;font-size:13px}
.site-badge{display:none!important}
.dlbar{display:none!important}

.games--3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
.games--4{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.games--2{grid-template-columns:repeat(2,minmax(0,1fr))!important}

/* nav+clarity */
.game__pic{overflow:hidden;background:var(--deep)}
.game__pic img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain!important;background:var(--deep)}
.gcard img{object-fit:contain!important}
.post img{object-fit:contain!important;background:var(--deep)}
.rank img{object-fit:contain!important;background:var(--deep)}
.hp-img,.hotpick__card img{object-fit:contain!important;background:var(--deep)}
.dlbar{display:flex!important}
.site-badge{display:none!important}

.topbar--sea{background:#081018;border-bottom:2px solid var(--lime)}
.dlbar--sea{background:linear-gradient(90deg,#0a3048,#0f1a24)}
.tabbar--sea{background:#061018;border-top:1px solid var(--lime)}
.tabbar--sea .tab--mid .tab__ring{background:var(--lime);color:var(--ink)}
.game__pic img,.gcard img,.fish__art img{object-fit:contain!important;background:#061018}
.gcard img{aspect-ratio:3/4!important}
.fish__art img{aspect-ratio:3/4!important}

/* clarity grid */
.gcard-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px}
.gcard img{aspect-ratio:3/4!important;object-fit:contain!important;width:100%;background:var(--deep,#111)}
.post img{object-fit:contain!important}
.feat__cover img,.strip__item img,.fish__art img,.medal img,.hp-img,.hotpick__card img,.rank img{object-fit:contain!important}

/* —— module variants v2: no drag-scrollbars —— */
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:0}
.rank-grid li{background:var(--panel2);border-radius:12px;padding:8px;display:flex;gap:8px;align-items:center}
.rank-grid img{width:48px;height:64px;border-radius:8px;object-fit:contain;background:var(--deep)}
.rank-grid .rank__n{width:20px;font-weight:900;color:var(--gold);font-size:16px}
.rank-grid .rank__info{flex:1;min-width:0}
.rank-grid .rank__info b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-grid .rank__info small{font-size:10.5px;color:var(--muted)}

.rank-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rank-tiles a{display:block;background:var(--panel2);border-radius:14px;overflow:hidden;color:var(--text);text-align:center;position:relative}
.rank-tiles img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--deep);display:block}
.rank-tiles b{display:block;font-size:11.5px;padding:6px 4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-tiles small{display:block;font-size:10px;color:var(--muted);padding:0 4px 8px}
.rank-tiles .rk{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--gold);color:var(--ink);font-size:11px;font-weight:900;display:grid;place-items:center}

.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:8px;align-items:end;margin-bottom:12px}
.podium a{display:block;text-align:center;background:var(--panel2);border-radius:14px;padding:10px 6px;color:var(--text)}
.podium a:nth-child(2){padding-top:16px;border:1px solid var(--gold)}
.podium img{width:72px;height:96px;object-fit:contain;border-radius:10px;background:var(--deep);margin:0 auto;display:block}
.podium b{display:block;font-size:12px;margin-top:6px}
.podium small{font-size:10.5px;color:var(--muted)}
.podium .rk{display:inline-block;margin-bottom:4px;font-weight:900;color:var(--gold);font-size:18px}

.rank-table{width:100%;border-collapse:collapse;font-size:13px}
.rank-table th{text-align:left;color:var(--muted);font-weight:700;padding:6px 4px;border-bottom:1px solid var(--line)}
.rank-table td{padding:8px 4px;border-bottom:1px solid var(--line);vertical-align:middle}
.rank-table img{width:36px;height:48px;border-radius:6px;object-fit:contain;background:var(--deep);vertical-align:middle;margin-right:6px}
.rank-table a{color:var(--lime);font-weight:800}

/* Proper carousel (dots, no scrollbar) */
.mcar{position:relative;overflow:hidden}
.mcar__track{display:flex;will-change:transform}
.mcar__slide{flex:0 0 100%;min-width:100%;max-width:100%;padding:0 2px;box-sizing:border-box}
.mcar__slide a{display:block;position:relative;border-radius:16px;overflow:hidden;color:#fff}
.mcar__slide img{width:100%;height:180px;object-fit:cover;display:block;background:var(--deep)}
.mcar__slide .cap{position:absolute;inset:auto 0 0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.88))}
.mcar__slide .rk{position:absolute;top:10px;left:10px;background:var(--gold);color:var(--ink);font-weight:900;padding:2px 10px;border-radius:999px;font-size:12px}
.mcar__dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.mcar__dot{width:7px;height:7px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.mcar__dot.is-on{background:var(--lime);transform:scale(1.15)}
.mcar__nav{position:absolute;top:50%;transform:translateY(-70%);width:32px;height:32px;border:0;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:18px;line-height:32px;cursor:pointer;z-index:2}
.mcar__nav--prev{left:6px}
.mcar__nav--next{right:6px}

.hotpick--cover{padding:0;overflow:hidden}
.hotpick--cover .hotpick__card{display:block;position:relative;color:#fff}
.hotpick--cover img{width:100%;height:200px;object-fit:cover;border-radius:0}
.hotpick--cover .hotpick__info{position:absolute;left:0;right:0;bottom:0;padding:14px;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.hotpick--cover .hotpick__go{position:absolute;top:12px;right:12px}

.hotpick-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hotpick-duo a{display:block;background:var(--panel2);border-radius:12px;overflow:hidden;color:var(--text)}
.hotpick-duo img{width:100%;aspect-ratio:3/4;object-fit:contain;background:var(--deep)}
.hotpick-duo b{display:block;padding:8px 8px 2px;font-size:13px}
.hotpick-duo small{display:block;padding:0 8px 10px;color:var(--muted);font-size:11px}

.posts-mag{display:grid;gap:10px}
.posts-mag .post--big{flex-direction:column}
.posts-mag .post--big img{width:100%;height:150px;flex:none}

.say-stack{display:grid;gap:8px}
.say-grid{display:grid;gap:8px}
@media(min-width:400px){.say-grid{grid-template-columns:1fr 1fr}}

.tiles-3{grid-template-columns:1fr 1fr 1fr}
.tiles-stack{grid-template-columns:1fr}
.tiles-banner{display:grid;gap:8px;margin:10px 12px 0}
.tiles-banner .tile{min-height:72px}

/* Spec: always neat 2x4 grid */
.spec{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;overflow:visible!important}
.spec div,.spec>div{flex:none!important;min-width:0!important;background:var(--panel2);border-radius:12px;padding:10px 12px}
.spec dt{font-size:11.5px;color:var(--muted);display:block}
.spec dd{font-weight:800;color:#fff;font-size:15px;margin:2px 0 0}
.spec-soft div{border:1px solid var(--line);background:transparent}
.spec-pill{grid-template-columns:1fr 1fr!important}
.spec-pill div{text-align:center;border-radius:999px;padding:10px 8px}
.spec-accent div{border-left:3px solid var(--lime)}

.steps-cards{display:grid;gap:8px;list-style:none;padding:0;counter-reset:st}
.steps-cards li{background:var(--panel2);border-radius:12px;padding:10px 12px 10px 44px;position:relative;counter-increment:st}
.steps-cards li::before{content:counter(st);position:absolute;left:12px;top:10px;width:24px;height:24px;border-radius:50%;background:var(--lime);color:var(--ink);font-weight:900;font-size:12px;display:grid;place-items:center}

.log{display:grid;gap:8px}
.log>div{background:var(--panel2);border-radius:12px;padding:10px 12px}
.log-timeline>div{border-left:3px solid var(--lime);border-radius:0 12px 12px 0}

