.remelabo-guide-content-area{
background:#08080c;
color:#f4f1f6;
overflow:hidden;
padding-bottom:28px;
}
.remelabo-game-guide-page{
background:#08080c;
}
.remelabo-game-guide-page a{
text-decoration:none;
}
#game-finder,
.remelabo-finder-result,
.remelabo-results-section{
scroll-margin-top:110px;
}
.admin-bar #game-finder,
.admin-bar .remelabo-finder-result,
.admin-bar .remelabo-results-section{
scroll-margin-top:142px;
}
.remelabo-guide-hero,
.remelabo-results-hero{
position:relative;
padding:64px 48px;
background:radial-gradient(circle at 82% 20%,rgba(255,51,153,.2),transparent 34%),radial-gradient(circle at 12% 80%,rgba(111,70,255,.2),transparent 36%),linear-gradient(135deg,#17121d 0%,#0d0c12 54%,#171123 100%);
border:1px solid rgba(255,255,255,.1);
border-radius:18px;
box-shadow:0 18px 50px rgba(0,0,0,.28);
}
.remelabo-guide-kicker,
.remelabo-section-label{
margin:0 0 10px;
color:#ff69ad;
font-size:12px;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
}
.remelabo-guide-hero .single-post-title,
.remelabo-results-hero .single-post-title{
max-width:850px;
margin:0;
color:#fff;
font-size:clamp(34px,5.2vw,64px);
line-height:1.08;
letter-spacing:-.035em;
}
.remelabo-guide-lead{
max-width:760px;
margin:24px 0 0;
color:#eae4ed;
font-size:18px;
line-height:1.8;
}
.remelabo-guide-translation{
max-width:760px;
margin:16px 0 0;
padding:12px 16px;
background:rgba(255,255,255,.06);
border-left:3px solid #ff4d9a;
border-radius:0 8px 8px 0;
color:#c9c2cd;
font-size:14px;
line-height:1.7;
}
.remelabo-guide-hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.remelabo-guide-primary-button,
.remelabo-guide-secondary-button,
.remelabo-finder-search-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border-radius:999px;
font-size:14px;
font-weight:800;
transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
}
.remelabo-guide-primary-button,
.remelabo-finder-search-button{
background:linear-gradient(90deg,#ff3d91,#8151ff);
color:#fff!important;
box-shadow:0 10px 28px rgba(255,61,145,.24);
}
.remelabo-guide-secondary-button{
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
color:#fff!important;
}
.remelabo-guide-primary-button:hover,
.remelabo-guide-secondary-button:hover,
.remelabo-finder-search-button:hover{
transform:translateY(-2px);
}
.remelabo-finder,
.remelabo-guide-directory,
.remelabo-guide-about,
.remelabo-results-section,
.remelabo-result-message{
margin-top:28px;
padding:38px;
background:#121117;
border:1px solid rgba(255,255,255,.09);
border-radius:16px;
}
.remelabo-section-heading{
margin-bottom:26px;
}
.remelabo-section-heading h2,
.remelabo-guide-about h2,
.remelabo-result-message h2{
margin:0;
color:#fff;
font-size:28px;
line-height:1.35;
}
.remelabo-section-heading>p:last-child,
.remelabo-result-message>p{
margin:10px 0 0;
color:#aaa3ae;
line-height:1.75;
}
.remelabo-finder-progress{
display:flex;
align-items:center;
justify-content:center;
max-width:460px;
margin:0 auto 34px;
}
.remelabo-finder-progress span{
display:flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
flex:0 0 38px;
background:#25212b;
border:1px solid rgba(255,255,255,.12);
border-radius:50%;
color:#958e9b;
font-weight:800;
transition:.25s ease;
}
.remelabo-finder-progress span.is-active{
background:linear-gradient(135deg,#ff3d91,#7954ff);
border-color:transparent;
color:#fff;
box-shadow:0 0 24px rgba(255,61,145,.3);
}
.remelabo-finder-progress i{
width:100%;
height:2px;
background:#28242d;
}
.remelabo-finder-step-heading{
margin-bottom:22px;
text-align:center;
}
.remelabo-finder-step-heading span{
color:#ff69ad;
font-size:12px;
font-weight:800;
letter-spacing:.12em;
}
.remelabo-finder-step-heading h3{
margin:8px 0 0;
color:#fff;
font-size:24px;
}
.remelabo-finder-options{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.remelabo-finder-option{
min-height:118px;
padding:18px;
background:#1a181f;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
color:#fff;
text-align:left;
cursor:pointer;
transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.remelabo-finder-option:hover{
transform:translateY(-2px);
border-color:rgba(255,105,173,.55);
}
.remelabo-finder-option.is-selected{
background:linear-gradient(145deg,rgba(255,61,145,.18),rgba(121,84,255,.18));
border-color:#ff5aa4;
box-shadow:0 0 0 2px rgba(255,90,164,.1);
}
.remelabo-finder-option strong{
display:block;
font-size:16px;
line-height:1.45;
}
.remelabo-finder-option small{
display:block;
margin-top:8px;
color:#aaa3ae;
font-size:12px;
line-height:1.6;
}
.remelabo-finder-controls{
display:flex;
justify-content:center;
gap:10px;
margin-top:26px;
}
.remelabo-finder-controls button,
.remelabo-finder-reset{
min-height:44px;
padding:0 20px;
border:0;
border-radius:999px;
font-weight:800;
cursor:pointer;
}
.remelabo-finder-next,
.remelabo-finder-finish{
background:linear-gradient(90deg,#ff3d91,#7954ff);
color:#fff;
}
.remelabo-finder-next:disabled,
.remelabo-finder-finish:disabled{
opacity:.35;
cursor:not-allowed;
}
.remelabo-finder-back,
.remelabo-finder-skip,
.remelabo-finder-reset{
background:#26222d;
color:#e7e1ea;
}
.remelabo-finder-result{
padding:26px;
background:linear-gradient(145deg,rgba(255,61,145,.1),rgba(121,84,255,.1));
border:1px solid rgba(255,105,173,.3);
border-radius:14px;
}
.remelabo-finder-result-head{
text-align:center;
}
.remelabo-finder-result-head h3{
margin:0;
color:#fff;
font-size:28px;
}
.remelabo-finder-result-head>p:last-child{
color:#aaa3ae;
}
.remelabo-finder-summary{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:8px;
margin:22px 0;
}
.remelabo-finder-summary span{
padding:7px 12px;
background:#25212d;
border:1px solid rgba(255,255,255,.1);
border-radius:999px;
color:#fff;
font-size:12px;
font-weight:700;
}
.remelabo-finder-result-actions{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:10px;
margin-top:22px;
}
.remelabo-finder-browse-separately{
margin-top:28px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.1);
}
.remelabo-finder-browse-separately>p{
margin:0 0 14px;
color:#aaa3ae;
text-align:center;
}
.remelabo-finder-result-links{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.remelabo-finder-result-card{
display:block;
padding:18px;
background:#17151c;
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
color:#fff!important;
transition:.2s ease;
}
.remelabo-finder-result-card:hover{
transform:translateY(-2px);
border-color:#ff5aa4;
}
.remelabo-finder-result-card small{
display:block;
margin-bottom:6px;
color:#ff69ad;
font-size:11px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.remelabo-finder-result-card strong{
display:block;
font-size:16px;
}
.remelabo-finder-result-card span{
display:block;
margin-top:8px;
color:#aaa3ae;
font-size:12px;
line-height:1.6;
}
.remelabo-guide-card-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:12px;
}
.remelabo-guide-category-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.remelabo-guide-card{
position:relative;
display:flex;
flex-direction:column;
min-height:150px;
padding:20px;
background:#19171e;
border:1px solid rgba(255,255,255,.09);
border-radius:12px;
color:#fff!important;
transition:transform .2s ease,border-color .2s ease,background .2s ease;
}
.remelabo-guide-card:hover{
transform:translateY(-3px);
background:#201c25;
border-color:rgba(255,90,164,.55);
}
.remelabo-guide-card strong{
font-size:17px;
line-height:1.45;
}
.remelabo-guide-card span{
display:block;
margin-top:9px;
color:#aaa3ae;
font-size:13px;
line-height:1.65;
}
.remelabo-guide-card em{
display:block;
margin-top:auto;
padding-top:18px;
color:#ff69ad;
font-size:12px;
font-style:normal;
font-weight:800;
}
.remelabo-guide-about{
display:grid;
grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:34px;
}
.remelabo-guide-about p{
margin-top:0;
color:#b5aeb8;
line-height:1.85;
}
.remelabo-guide-original-content{
margin-top:28px;
color:#ddd7df;
}
.remelabo-guide-noscript{
padding:14px;
background:#2a2228;
border-radius:8px;
color:#fff;
}
.remelabo-results-selected{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:28px;
}
.remelabo-results-selected span{
display:flex;
flex-direction:column;
min-width:150px;
padding:11px 15px;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:10px;
}
.remelabo-results-selected small{
color:#ff69ad;
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}
.remelabo-results-selected strong{
margin-top:4px;
color:#fff;
font-size:14px;
}
.remelabo-result-message{
text-align:center;
}
.remelabo-result-message .remelabo-finder-search-button{
margin-top:22px;
}
.remelabo-result-message-warning{
background:linear-gradient(145deg,rgba(255,61,145,.1),rgba(121,84,255,.1));
border-color:rgba(255,105,173,.3);
}
.remelabo-search-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:16px;
}
.remelabo-search-card{
display:flex;
flex-direction:column;
min-width:0;
overflow:hidden;
background:#19171e;
border:1px solid rgba(255,255,255,.09);
border-radius:13px;
transition:transform .2s ease,border-color .2s ease;
}
.remelabo-search-card:hover{
transform:translateY(-3px);
border-color:rgba(255,90,164,.6);
}
.remelabo-search-card-image{
display:block;
position:relative;
aspect-ratio:16/9;
overflow:hidden;
background:#0b0a0e;
}
.remelabo-search-card-image img{
width:100%;
height:100%;
object-fit:cover;
transition:transform .3s ease;
}
.remelabo-search-card:hover .remelabo-search-card-image img{
transform:scale(1.025);
}
.remelabo-search-card-placeholder{
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
color:#77717b;
}
.remelabo-search-card-body{
display:flex;
flex-direction:column;
flex:1;
padding:18px;
}
.remelabo-search-card-taxonomy{
min-height:20px;
margin-bottom:8px;
}
.remelabo-search-card-taxonomy span{
display:inline-block;
padding:4px 8px;
background:#ff3d91;
border-radius:4px;
color:#fff;
font-size:10px;
font-weight:800;
}
.remelabo-search-card h2{
margin:0;
font-size:17px;
line-height:1.5;
}
.remelabo-search-card h2 a{
color:#fff!important;
}
.remelabo-search-card p{
margin:11px 0 0;
color:#aaa3ae;
font-size:12px;
line-height:1.7;
}
.remelabo-search-card-link{
display:block;
margin-top:auto;
padding-top:16px;
color:#ff69ad!important;
font-size:12px;
font-weight:800;
}
@media(max-width:960px){
.remelabo-finder-options,
.remelabo-finder-result-links,
.remelabo-guide-card-grid,
.remelabo-search-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
}
}
@media(max-width:700px){
.remelabo-guide-hero,
.remelabo-results-hero{
padding:38px 22px;
border-radius:12px;
}
.remelabo-guide-hero .single-post-title,
.remelabo-results-hero .single-post-title{
font-size:36px;
}
.remelabo-guide-lead{
font-size:16px;
}
.remelabo-finder,
.remelabo-guide-directory,
.remelabo-guide-about,
.remelabo-results-section,
.remelabo-result-message{
padding:24px 18px;
border-radius:12px;
}
.remelabo-section-heading h2,
.remelabo-guide-about h2,
.remelabo-result-message h2{
font-size:23px;
}
.remelabo-finder-options,
.remelabo-finder-result-links,
.remelabo-guide-card-grid,
.remelabo-guide-category-grid,
.remelabo-guide-about,
.remelabo-search-grid{
grid-template-columns:1fr;
}
.remelabo-finder-option{
min-height:auto;
}
.remelabo-finder-controls{
flex-wrap:wrap;
}
.remelabo-finder-controls button{
flex:1 1 42%;
}
.remelabo-finder-result{
padding:20px 14px;
}
.remelabo-guide-card{
min-height:135px;
}
.remelabo-results-selected span{
flex:1 1 45%;
min-width:0;
}
}