/* CHPoki theme – "arcade" skin: dark UI, fixed icon rail, mosaic rows.
   Structure follows the big arcade portals; the palette, type and branding
   are this site's own. */

.skin-arcade{
	--bg:#0e0f13;
	--bg-2:#171922;
	--surface:#1b1e28;
	--surface-2:#232733;
	--ink:#f3f5fa;
	--ink-2:#c3c9d8;
	--muted:#8b93a7;
	--line:#2a2f3d;
	--accent:#16d6a4;
	--accent-2:#a8f24c;
	--chip:#232733;
	--radius:12px;
	--gap:12px;
	--rail:64px;
	--rail-open:224px;
	--header-h:60px;
	background:var(--bg);
	color:var(--ink);
}
.skin-arcade body,.skin-arcade .site-main{background:var(--bg)}

/* ---------- Header ---------- */
.skin-arcade .site-header{background:#0b0c10;border-bottom:1px solid var(--line);box-shadow:none}
.skin-arcade .brand__word{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
.skin-arcade .brand__mark{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06120d;box-shadow:none;border-radius:10px;transform:none}
.skin-arcade .search input{background:var(--surface);color:var(--ink);border-color:var(--line)}
.skin-arcade .search input::placeholder{color:var(--muted)}
.skin-arcade .search input:focus{background:var(--surface-2);border-color:var(--accent);box-shadow:0 0 0 3px rgba(22,214,164,.22)}
.skin-arcade .search__icon{color:var(--muted)}
.skin-arcade .icon-btn{background:var(--surface);color:var(--ink)}
.skin-arcade .topnav a{color:var(--ink-2)}
.skin-arcade .topnav a:hover{background:var(--surface);color:var(--ink)}

/* ---------- Fixed icon rail ---------- */
.rail{
	position:fixed;left:0;top:var(--header-h);bottom:0;width:var(--rail);z-index:40;
	background:#0b0c10;border-right:1px solid var(--line);
	padding:10px 0;overflow:hidden;
	transition:width .18s cubic-bezier(.22,.61,.36,1);
}
.rail:hover,.rail:focus-within{width:var(--rail-open);box-shadow:12px 0 32px rgba(0,0,0,.45);overflow-y:auto}
.rail__list{list-style:none;margin:0;padding:0}
.rail__list a{
	display:flex;align-items:center;gap:14px;height:44px;padding:0 20px;
	color:var(--ink-2);font-weight:650;font-size:14.5px;white-space:nowrap;
	border-left:3px solid transparent;
}
.rail__list a:hover{background:var(--surface);color:var(--ink);text-decoration:none}
.rail__list a.is-current{border-left-color:var(--accent);background:var(--surface);color:var(--ink)}
.rail__ico{flex:0 0 22px;font-size:19px;line-height:1;text-align:center}
.rail__txt{opacity:0;transition:opacity .14s linear}
.rail:hover .rail__txt,.rail:focus-within .rail__txt{opacity:1}
.rail__sep{height:1px;margin:10px 16px;background:var(--line)}
.skin-arcade .site-main,.skin-arcade .site-footer{margin-left:var(--rail)}
@media (max-width:900px){
	.rail{display:none}
	.skin-arcade .site-main,.skin-arcade .site-footer{margin-left:0}
}

/* ---------- Collection chips ---------- */
.collections{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--gap);margin:4px 0 26px}
.collection{
	position:relative;display:flex;flex-direction:column;justify-content:flex-end;
	min-height:86px;padding:14px;border-radius:var(--radius);overflow:hidden;
	background:linear-gradient(135deg,var(--c1),var(--c2));color:#fff;font-weight:800;font-size:15px;
	transition:transform .16s cubic-bezier(.22,.61,.36,1),filter .16s linear;
}
.collection:hover{transform:translateY(-3px);filter:saturate(1.15);text-decoration:none}
.collection__ico{position:absolute;right:10px;top:8px;font-size:30px;opacity:.9}
.collection small{display:block;font-weight:600;font-size:12.5px;opacity:.85;margin-top:2px}

/* ---------- Section heads ---------- */
.skin-arcade .section__head{border:0;padding:0;margin:26px 0 12px}
.skin-arcade .section__title{font-size:19px;color:var(--ink)}
.skin-arcade .section__icon{background:var(--surface)}
.skin-arcade .section__more{background:var(--surface);color:var(--ink-2);border:1px solid var(--line)}
.skin-arcade .section__more:hover{background:var(--accent);color:#06120d;border-color:transparent}

/* ---------- Mosaic: one 2x2 hero + small tiles ---------- */
.mosaic{
	display:grid;
	grid-template-columns:repeat(6,minmax(0,1fr));
	grid-auto-rows:1fr;
	gap:var(--gap);
}
.mosaic .tile{aspect-ratio:1/1}
.mosaic .tile--hero{grid-column:span 2;grid-row:span 2}
@media (max-width:1100px){.mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:700px){
	.mosaic{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
	.mosaic .tile--hero{grid-column:span 2;grid-row:span 2}
}

/* ---------- Tiles ---------- */
.skin-arcade .tile{background:var(--surface);border-radius:var(--radius);box-shadow:none;overflow:hidden}
.skin-arcade .tile__thumb{position:absolute;inset:0;display:block}
.skin-arcade .tile__title{
	position:absolute;left:0;right:0;bottom:0;
	padding:22px 10px 8px;font-size:13px;font-weight:700;color:#fff;
	background:linear-gradient(to top,rgba(6,8,12,.92),rgba(6,8,12,0));
	opacity:0;transform:translateY(6px);
	transition:opacity .16s linear,transform .16s cubic-bezier(.22,.61,.36,1);
}
.skin-arcade .tile:hover .tile__title,.skin-arcade .tile:focus-visible .tile__title{opacity:1;transform:none}
.skin-arcade .tile:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.skin-arcade .tile--hero .tile__title{font-size:17px;padding:30px 14px 12px}
.badge{
	position:absolute;left:7px;top:7px;z-index:3;
	padding:3px 7px;border-radius:6px;
	font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
	color:#06120d;background:var(--accent-2);
}
.badge--hot{background:#ff6b4a;color:#fff}

/* ---------- Cards, chips, prose on dark ---------- */
.skin-arcade .card,.skin-arcade .game-info,.skin-arcade .cat-cloud,.skin-arcade .faq{background:var(--surface);border:1px solid var(--line);box-shadow:none}
.skin-arcade .prose,.skin-arcade .page-intro__text,.skin-arcade .facts dd{color:var(--ink-2)}
.skin-arcade .prose h2,.skin-arcade .page-intro__title,.skin-arcade .game-info__title,.skin-arcade .facts__title{color:var(--ink)}
.skin-arcade .chip,.skin-arcade .tag,.skin-arcade .meta-pill,.skin-arcade .pager a,.skin-arcade .sort-tabs a{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.skin-arcade .chip:hover,.skin-arcade .tag:hover,.skin-arcade .pager a:hover{background:var(--accent);color:#06120d}
.skin-arcade .chip.is-active,.skin-arcade .sort-tabs a.is-active{background:var(--accent);color:#06120d;border-color:transparent}
.skin-arcade .facts{border-color:var(--line)}
.skin-arcade .facts__row{border-color:var(--line)}
.skin-arcade .facts__row:nth-child(odd){background:var(--surface-2)}
.skin-arcade .facts dt,.skin-arcade .byline{color:var(--muted)}
.skin-arcade .crumbs,.skin-arcade .crumbs a{color:var(--muted)}
.skin-arcade .crumbs a:hover{color:var(--accent)}
.skin-arcade a{color:var(--ink)}
.skin-arcade .prose a{color:var(--accent)}

/* ---------- Player ---------- */
.skin-arcade .chp-player{background:#06070a;border:1px solid var(--line);border-radius:var(--radius)}
.skin-arcade .chp-player__play{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#06120d;box-shadow:0 6px 0 #0b8f6c}
.skin-arcade .chp-player__play:active{box-shadow:0 2px 0 #0b8f6c}
.skin-arcade .chp-player__btn{background:var(--surface-2);color:var(--ink)}

/* ---------- Footer ---------- */
.skin-arcade .site-footer{background:#0b0c10;border-top:1px solid var(--line)}
.skin-arcade .site-footer__title{color:var(--ink)}
.skin-arcade .cat-cloud a{background:var(--surface-2);color:var(--ink-2)}
.skin-arcade .cat-cloud a:hover{background:var(--accent);color:#06120d}

/* ---------- Motion layer overrides for dark ---------- */
.skin-arcade .tile__thumb::before{background:linear-gradient(100deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.10) 50%,rgba(255,255,255,0) 80%),var(--surface-2)}
.skin-arcade .crow__wrap::before{background:linear-gradient(90deg,var(--bg),transparent)}
.skin-arcade .crow__wrap::after{background:linear-gradient(270deg,var(--bg),transparent)}

/* Mobile drawer inherits the rows-skin panel styling on this dark palette */
.skin-arcade .drawer__panel{background:#0b0c10}
.skin-arcade .drawer__head{border-bottom-color:var(--line)}
.skin-arcade .drawer__x{background:var(--surface-2);color:var(--ink-2)}
.skin-arcade .drawer__list a{color:var(--ink-2)}
.skin-arcade .drawer__list a:hover{background:var(--surface)}
.skin-arcade .drawer__list a.is-current{background:var(--accent);color:#06120d}
.skin-arcade .drawer__list--top,.skin-arcade .drawer__list--pages a{border-color:var(--line)}
.skin-arcade .icon-btn--menu{display:inline-flex;margin-right:2px}
@media (min-width:901px){.skin-arcade .icon-btn--menu{display:none}}

/* Player chrome: the plugin ships a light bar, which has to go dark here. */
.skin-arcade .chp-player__bar{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.skin-arcade .chp-player__bar a,.skin-arcade .chp-player__bar strong{color:var(--ink)}
.skin-arcade .chp-player__fs,.skin-arcade .chp-player__bar button{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.skin-arcade .chp-player__fs:hover,.skin-arcade .chp-player__bar button:hover{background:var(--accent);color:#06120d}