@font-face{ font-family:'NEXON Lv1 Gothic OTF'; src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');}
@font-face{
font-family:'PyeongChangPeace-Bold';
src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2') format('woff2');
font-weight:700;
font-style:normal;
}
:root{
--bg: #E4EBF5;
--bg-soft: #EEF3FA;
--surface: #FFFFFF;
--surface-alpha: rgba(255,255,255,.72);
--ink: #1D2740;
--ink-soft: #5C6B84;
--ink-faint: #8A96AC;
--line: rgba(29,39,64,.08);

--accent: #2E4AE0;
--accent-2: #6C7CF0;
--accent-deep: #16204A;
--gold: #C9A24B;

--radius-lg: 20px;
--radius-md: 14px;
--radius-sm: 10px;
--radius-pill: 999px;

--shadow-sm: 0 2px 8px rgba(29,39,64,.06);
--shadow-md: 0 10px 30px rgba(29,39,64,.10);
--shadow-lg: 0 20px 45px rgba(29,39,64,.16);

--header-h: 58px;
}

*{padding:0;margin:0;box-sizing:border-box;}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

body{
overflow-x:hidden;
min-height:100%;
background:
radial-gradient(1200px 600px at 100% -10%, #F3F7FD 0%, transparent 60%),
radial-gradient(1000px 500px at -10% 0%, #EAF0FA 0%, transparent 55%),
var(--bg);
background-attachment:fixed;
color:var(--ink);
font-family:"NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
margin-bottom:70px;
-webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar {
width: 7px;
background:var(--bg);/*#724ae8 #344A67*/
}
::-webkit-scrollbar-thumb {
background: linear-gradient(transparent, #bbcce6, transparent);
border-radius:7px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(transparent, #0FFFF0, transparent);
}
a{
text-decoration-line:none;
color:inherit;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
outline: none;
}
ul li{list-style:none;}
.my-m{padding:0px;}
/* ---------- Top Navigation ---------- */
.top-naviagation{
width:100%;
position:fixed;
top:0;
left:0;
margin:0;
padding:0;
z-index:100;
}
.fire_games-nav {
width: 100vw;
height: 58px;
border: none;
padding: 0px;
margin: 0px;
color: #FFF;
background:rgba(255,255,255,.85);
-webkit-backdrop-filter:blur(14px) saturate(160%);
backdrop-filter:blur(14px) saturate(160%);
box-shadow: 0 3px 9px -3px rgba(0,0,0,.12);
background-image:none;
position:relative;
}
.fire_games-nav::before{
content:"";
position:absolute;
left:0; right:0; bottom:0;
height:1px;
background:linear-gradient(90deg, transparent, rgba(46,74,224,.25), transparent);
}
.fire_games_logo a{
color:var(--ink);
background:transparent;
font-size:1.02rem;
font-family:"PyeongChangPeace-Bold","NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight:800;
letter-spacing:.02em;
text-shadow:none;
display:inline-flex;
align-items:center;
gap:8px;
}
.fire_games_logo a::before{
content:"\f03d"; /* fa-video */
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:900;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px; height:32px;
border-radius:10px;
color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
font-size:.85rem;
box-shadow:0 4px 10px rgba(46,74,224,.35);
}
.fire_games_logo{
position:absolute;
top:50%;
left:16px;
transform:translate(0,-50%);
background:transparent;
}
.power a i, .pc a i{
display:inline-flex;
align-items:center;
justify-content:center;
width:30px;
height:30px;
border-radius:50%;
color: #FFF !important;
background: rgba(0, 0, 0, 0.2);
font-size: 0.85rem;
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
text-shadow:none;
letter-spacing:0.1px;
}
.power{
position: absolute;
top:50%;
right:20px;
transform:translate(0%,-50%);
display:flex;
align-items:center;
}
.power a{
margin-left:16px;
color: #FFF;
}
/* ---------- Search ---------- */
.my-search{
position:relative;
margin:0 auto;
padding-top:calc(var(--header-h) + 18px);
width:92%;
max-width:640px;
}
.my-container, .searchTerm_p, .pagination a{
background:var(--surface);
}
.my-wrapper{margin:0; padding:0; width:100%;}
.my-container{
width:100%;
height:48px;
line-height:48px;
border:1px solid var(--line);
margin:0;
padding:0 96px 0 20px;
border-radius:var(--radius-pill);
box-shadow:var(--shadow-sm);
position:relative;
transition:box-shadow .2s ease, border-color .2s ease;
}
.my-container:focus-within{
box-shadow:0 0 0 3px rgba(46,74,224,.12), var(--shadow-md);
border-color:rgba(46,74,224,.35);
}
.my-container::before{
content:"\f002"; /* fa-search */
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:900;
position:absolute;
left:20px; top:50%;
transform:translateY(-50%);
color:var(--ink-faint);
font-size:.9rem;
pointer-events:none;
}
.my-container .my-input{padding-left:24px;}
.my-close-btn{
position:absolute;
top:0; right:0;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
border:0;
width:88px;
height:48px;
border-radius:var(--radius-pill);
outline:none;
text-transform:uppercase;
font-weight:700;
font-size:.72rem;
letter-spacing:.04em;
box-shadow:0 6px 14px rgba(46,74,224,.30);
transition:transform .15s ease, box-shadow .15s ease;
}
.my-close-btn:active{transform:scale(.96);}
.my-input{
font-family:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo", "Malgun Gothic", serif;
width:100%;
outline:none;
margin:0;
padding:0;
font-size:.9rem;
font-weight:500;
color:var(--ink);
border:0;
background:transparent;
text-shadow:none;
}
::-webkit-input-placeholder{color:var(--ink-faint); text-transform:none; font-weight:500;}
::-moz-placeholder{color:var(--ink-faint); font-weight:500;}
:-ms-input-placeholder{color:var(--ink-faint); font-weight:500;}

/* ---------- Grid / Cards ---------- */
.grid-container{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(165px, 1fr));
grid-gap:16px;
margin:24px 16px 8px;
padding-top:0;
}
@media (min-width:600px){
.grid-container{grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); grid-gap:20px; margin:28px 24px 8px;}
}

.card{
height:0;
padding-bottom:56.25%;
position:relative;
overflow:hidden;
border-radius:var(--radius-md);
background:var(--surface);
box-shadow:0 0 12px 0 rgba(103,142,201,0.5);
display:grid;
grid-template-rows:1fr 1fr;
transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s cubic-bezier(.2,.8,.2,1);
}
.card::before{
content:"\f04b"; /* fa-play */
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:900;
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%) scale(.6);
width:44px; height:44px;
border-radius:50%;
background:rgba(255,255,255,.2);
-webkit-backdrop-filter:blur(4px);
backdrop-filter:blur(4px);
color:#FFF;
display:flex;
align-items:center;
justify-content:center;
font-size:.95rem;
padding-left:3px;
opacity:0;
transition:opacity .25s ease, transform .25s ease;
z-index:2;
box-shadow:0 8px 20px rgba(0,0,0,.25);
pointer-events:none;
}
.card img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;/*contain  cover*/
z-index: 1;
transition: 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
background: #000;
}
.card:hover{
transform:translateY(-4px) scale(1.015);
box-shadow:0 0 12px 0 rgba(103,142,201,0.8);
}
.card:hover img{transform:scale(1.06);}
.card:hover::before{opacity:1; transform:translate(-50%,-50%) scale(1);}
.video-item{
display:flex;
flex-direction:column;
gap:10px;
}
.tit-below{
margin:0 2px;
font-family:"NEXON Lv1 Gothic OTF","Apple SD Gothic Neo","Malgun Gothic",serif;
font-weight:500;
font-size:.825rem;
line-height:1.45;
color:var(--ink);
letter-spacing:-.01em;
cursor:pointer;
transition:color .2s ease;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
overflow:hidden;
text-overflow:ellipsis;
}
.video-item:hover .tit-below{color:var(--accent);}
.vcheckbox{
position:absolute;
top:10px;
left:10px;
z-index:99;
box-shadow:0 0 0 0 rgba(255,255,255, 0.2);
-webkit-animation:pulse 1.5s infinite;
}
.grid-container input[type="checkbox"]{
width:1.05rem;
height:1.05rem;
border-radius:4px;
border:1.5px solid rgba(255,255,255,.55);
background:rgba(15,20,40,.18);
appearance:none;
overflow:hidden;
cursor:pointer;
z-index:10;
transition:all .2s ease;
}
.grid-container input[type="checkbox"]:checked{
background:var(--accent);
border-color:var(--accent);
box-shadow:0 4px 10px rgba(46,74,224,.45);
}
.grid-container input[type="checkbox"]:checked::before{
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free";
font-weight:900;
content:"\f00c";
color:#fff;
font-size:.78rem;
display:flex;
align-items:center;
justify-content:center;
width:100%;
height:100%;
}

/* ---------- Page-jump ---------- */
.wrap_p{
width:min(300px, 84%);
margin:28px auto 0px;
padding:0;
text-align:center;
}
.search_p{
width:100%;
position:relative;
display:flex;
}
.searchTerm_p{
width:100%;
border:1px solid var(--line);
border-right:none;
padding:5px 14px;
height:42px;
border-radius:var(--radius-pill) 0 0 var(--radius-pill);
outline:none;
color:var(--ink);
text-shadow:none;
text-align:center;
font-weight:600;
font-size:.85rem;
box-shadow:var(--shadow-sm);
}
.searchButton{
width:56px;
height:42px;
border:none;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
border-radius:0 var(--radius-pill) var(--radius-pill) 0;
cursor:pointer;
margin:0;
padding:0;
box-shadow:0 6px 14px rgba(46,74,224,.28);
}
.searchButton i{
padding:0;
text-align:center;
color:#fff;
font-size:16px;
}

/* ---------- Pagination ---------- */
.pagination{
margin:20px 0px 70px;
width:100%;
text-align:center;
/*white-space:nowrap;*/
}
.pagination a{
display:inline-block;
width:50px;
height:40px;
line-height:40px;
background:rgba(69,64,255, 0.45);
color:#FFF;
padding:0;
margin:3px;
font-size:.95em;
text-align:center;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.8);
border-radius:7px;
transition:0.3s;
}
.pagination .active{
color:#fff;
font-weight:700;
text-shadow:none;
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
border-color:transparent;
box-shadow:0 8px 16px rgba(46,74,224,.30);
}
.pagination a:hover{
color:#FFF000;
border-color:rgba(46,74,224,.35);
}

/* ===================== SCROLL TOP/BOTTOM FAB ===================== */
#up{
display:none;
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.heroEffectsarrow {
position: fixed;
left: 50%;
margin-left: -27px;
bottom: 18px;
width: 54px;
height: 40px;
opacity: 1;
z-index: 30;
cursor:pointer;
filter: drop-shadow(0 6px 16px rgba(20,22,31,0.18));
}
.heroEffectsbouncy {
-webkit-animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation: Weeeeeeeeeee 3s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#up svg{
transform: scaleY(-1);
}
#up svg polygon, .heroEffectsarrow svg polygon{
fill: #ffffff;
stroke: var(--accent);
stroke-width: 1.4;
}
@-webkit-keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}

@keyframes Weeeeeeeeeee {
0% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
11% {
transform: translate(0, -25px) scaleX(0.8);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
20% {
transform: translate(0, 0px) scaleY(0.8);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
28% {
transform: translate(0, -10px);
-webkit-animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
animation-timing-function: cubic-bezier(0.57, 0.01, 0.84, 0.5);
}
36% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
100% {
transform: translate(0, 0px);
-webkit-animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
animation-timing-function: cubic-bezier(0.19, 0.28, 0.27, 1);
}
}
/* ---------- Floating action buttons ---------- */
#selectAll{
position:fixed;
bottom:22px;
left:16px;
z-index:95;
}
#plsyAll{
position:fixed;
bottom:22px;
right:16px;
z-index:95;
}
.pulse-button{
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
width:auto;
min-width:76px;
height:52px;
padding:0 18px;
font-size:.72rem;
font-weight:700;
line-height:1.25;
letter-spacing:.01em;
text-align:center;
color:#fff;
margin:0;
border:none;
border-radius:var(--radius-pill);
background:linear-gradient(135deg, var(--accent), var(--accent-deep));
cursor:pointer;
text-shadow:none;
box-shadow:0 10px 24px rgba(46,74,224,.32);
-webkit-animation:none;
transition:transform .15s ease, box-shadow .15s ease;
}
#selectAll.pulse-button{
background:rgba(0,0,0,.6);
color:#FFF;
box-shadow:var(--shadow-md);
border:1px solid var(--line);
}
.pulse-button:active{transform:scale(.96);}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,255,255,.35);}
70%{box-shadow:0 0 0 14px rgba(255,255,255,0);}
100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}
}
#plsyAll.pulse-button{
background:linear-gradient(135deg, rgba(46,74,224,.65), rgba(22,32,74,.65));
-webkit-backdrop-filter:blur(8px);
backdrop-filter:blur(8px);
-webkit-animation:pulse 2.2s infinite;
animation:pulse 2.2s infinite;
}
@media screen and (orientation:landscape){
#selectAll, #plsyAll{bottom:14px;}
}

.fontAwesome{
font-family:"Font Awesome 7 Free","Font Awesome 6 Free","Font Awesome 5 Free",sans-serif;
font-weight:900;
}

/* ---------- Ambient background (simplified, no clutter) ---------- */
.background{
position:fixed;
width:100vw;
height:100vh;
top:0; left:0;
overflow:hidden;
z-index:-100;
pointer-events:none;
}
.background span{display:none;}
.background::before{
content:"";
position:absolute;
width:520px; height:520px;
top:-160px; right:-160px;
border-radius:50%;
background:radial-gradient(circle, rgba(46,74,224,.10), transparent 70%);
}
.background::after{
content:"";
position:absolute;
width:480px; height:480px;
bottom:-140px; left:-140px;
border-radius:50%;
background:radial-gradient(circle, rgba(201,162,75,.10), transparent 70%);
}

/* ---------- Footer ---------- */
.footer{
font-family:"NEXON Lv1 Gothic OTF", "Apple SD Gothic Neo", "Malgun Gothic", serif;
color:var(--ink-faint);
font-size:.7rem;
font-weight:500;
text-shadow:none;
margin:28px auto 10px;
padding-top:16px;
z-index:10;
text-align:center;
}
.footer span{
font-weight:600;
position:relative;
top:0;
display:inline-block;
-webkit-animation:none;
animation:none;
}