/* ==========================================================================
FONTS ? kept exactly as before
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Noto+Serif+KR:wght@300;400;500;600;700&family=The+Nautigal:wght@700&display=swap');
@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: 'Tenada';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2210-2@1.0/Tenada.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@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;
}

/* ==========================================================================
TOKENS ? "Porcelain & Antique Gold"
========================================================================== */
:root{
--bg:#E4EBF5;
--surface:#FFFFFF;
--surface-2:#F1F5FB;
--ink:#1E2733;
--ink-soft:#5E6C82;
--ink-faint:#95A2B5;
--line:#D3DEEC;
--line-soft:#E7EDF6;
--gold:#7C8CA6;
--gold-soft:#A3B2C7;
--gold-deep:#45536B;
--gold-mist:rgba(124,140,166,.10);
--gold-mist-2:rgba(124,140,166,.18);
--wine:#7C3547;
--wine-mist:rgba(124,53,71,.10);
--shadow-xs:0 1px 3px rgba(30,39,51,.05);
--shadow-sm:0 4px 14px rgba(30,39,51,.07);
--shadow-md:0 14px 32px rgba(30,39,51,.10);
--shadow-lg:0 24px 60px rgba(30,39,51,.16);
--radius-lg:20px;
--radius-md:14px;
--radius-sm:9px;
--ease:cubic-bezier(.19,1,.22,1);
--ease-soft:cubic-bezier(.4,0,.2,1);
--accent: #2f6fed;
--text: #344A67;

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

*{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;
font-family:"NEXON Lv1 Gothic OTF","Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
margin:0;
padding:0;
-webkit-tap-highlight-color : transparent;
color:var(--ink);
background:
radial-gradient(1100px 480px at 12% -8%, rgba(255,255,255,.65), transparent 60%),
radial-gradient(900px 520px at 100% 0%, var(--gold-mist), transparent 55%),
var(--bg);
background-attachment: fixed;
min-height:100vh;
}
@media screen and (orientation:portrait){
body{
background:
radial-gradient(900px 420px at 20% -6%, rgba(255,255,255,.65), transparent 60%),
radial-gradient(700px 420px at 100% 0%, var(--gold-mist), transparent 55%),
var(--bg);
background-attachment: fixed;
}
}
::-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; }
::selection{ background:var(--gold-mist-2); color:var(--gold-deep); }
/* ---------- 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:"\f26c"; /* fa-solid fa-tv */
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-m{
display:none;
width:100%;
margin-bottom:56px;
}
.my-search{
position: relative;
margin:75px auto 10px;
padding:0;
width:min(560px, 88%);
}
.my-wrapper{
margin:0px;
padding:0px;
width:100%;
}
.my-container, .searchTerm_p{
background:var(--surface);
}
.my-container{
width:100%;
height:52px;
line-height:52px;
border:1px solid var(--line);
margin:0px;
padding:0px 118px 0px 46px;
border-radius:999px;
position:relative;
box-shadow: var(--shadow-sm);
transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.my-container:focus-within{
border-color:var(--gold-soft);
box-shadow: 0 0 0 4px var(--gold-mist), var(--shadow-md);
}
.my-container::before{
content:"\f002";
font-family:"Font Awesome 6 Free","Font Awesome 5 Free", FontAwesome, sans-serif;
font-weight:900;
position:absolute;
left:18px;
top:50%;
transform:translateY(-50%);
color:var(--ink-faint);
font-size:.9rem;
pointer-events:none;
}
.my-close-btn{
position:absolute;
top:0px;
right:0px;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
border:0px;
width:104px;
height:52px;
border-radius:0px 999px 999px 0px;
outline:none;
text-transform:uppercase;
font-weight:700;
letter-spacing:.05em;
font-size:.8rem;
transition: filter .25s var(--ease-soft), transform .2s var(--ease-soft);
}
.my-close-btn:hover{ filter:brightness(1.06); }
.my-close-btn:active{ transform:scale(.97); }
.my-input{
font-family:"NEXON Lv1 Gothic OTF", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
width:100%;
outline:none;
margin:0px;
padding:0px;
font-size:0.9em;
color:var(--ink);
border:0px solid #fff;
background:transparent;
text-shadow:none;
}
::-webkit-input-placeholder{ color:var(--ink-faint); text-transform:none; }
::-moz-placeholder{ color:var(--ink-faint); }
:-ms-input-placeholder{ color:var(--ink-faint); }
/* ==========================================================================
CARD GRID
========================================================================== */
.grid-container {
max-width:100%;
position: relative;
margin: 0 auto;
padding:8px 24px 30px;
text-align: center;
}
.container {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
gap:16px;
text-align: center;
margin: 0 auto;
padding:0px;
max-width:100%;
}
.item {
width: 100%;
aspect-ratio: 1 / 1.02;
position: relative;
display: block;
margin: 0;
opacity:0;
animation: cardRise .6s var(--ease) forwards;
animation-delay: calc(var(--d, 0s));
}
.item::before{ content:none; }
@keyframes cardRise{
from{ opacity:0; transform:translateY(14px) scale(.98); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
.card-link{
position:absolute;
inset:0;
display:block;
cursor:pointer;
}
.card{
position:relative;
width:100%;
height:100%;
background:var(--surface);
border:1px solid var(--line);
border-radius:var(--radius-md);
box-shadow:var(--shadow-xs);
overflow:hidden;
display:flex;
flex-direction:column;
transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card-link:hover .card, .card-link:focus-visible .card{
transform:translateY(-6px);
box-shadow:var(--shadow-lg);
border-color:var(--gold-mist-2);
}
.card-face{
position:relative;
flex:1;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(130% 150% at 18% -15%, var(--gold-mist) 0%, transparent 55%),
radial-gradient(110% 130% at 100% 115%, rgba(69,83,107,.07) 0%, transparent 55%),
linear-gradient(160deg, #FFFFFF 0%, var(--surface-2) 100%);
background-size:220% 220%;
animation: cardGlow 9s ease-in-out infinite;
border-bottom:1px solid var(--line-soft);
overflow:hidden;
}
@keyframes cardGlow{
0%,100%{ background-position:0% 0%; }
50%{ background-position:100% 100%; }
}
.card-face::before{
content:"";
position:absolute;
inset:0;
background-image:radial-gradient(rgba(124,140,166,.25) 1px, transparent 1px);
background-size:13px 13px;
opacity:.55;
}
.card-icon{
position:relative;
z-index:1;
font-size:3rem;
color:var(--gold-deep);
transition: transform .5s var(--ease), color .4s var(--ease);
}
.card-link:hover .card-icon{
color:var(--gold-soft);
transform:scale(1.08) rotate(-4deg);
}
.play-veil{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(34,32,28,0);
opacity:0;
transition: opacity .35s var(--ease-soft), background .35s var(--ease-soft);
}
.play-veil i{
width:80px;
height:80px;
border-radius:50%;
background:rgba(255,255,255,.94);
color:var(--gold-deep);
display:flex;
align-items:center;
justify-content:center;
font-size:.85rem;
box-shadow:var(--shadow-md);
transform:scale(.8);
transition: transform .4s var(--ease);
}
.card-link:hover .play-veil{
opacity:1;
background:rgba(34,32,28,.18);
}
.card-link:hover .play-veil i{ transform:scale(1); }
.card-subject{
padding:7px;
font-family:"NEXON Lv1 Gothic OTF", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
font-weight:600;
color: var(--ink);
font-size:0.75rem;
overflow: hidden;
text-align:center;
position:relative;
}
.card-subject::before{
content:"";
position:absolute;
top:0; left:50%;
width:0%;
height:2px;
background:var(--underline-color, var(--gold-soft));
transition: width .65s var(--ease), left .65s var(--ease);
}
.card-link:hover .card-subject::before{
width:70%;
left:15%;
}

.badge{
position:absolute;
top:9px;
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 8px;
border-radius:999px;
font-size:.62rem;
font-weight:700;
letter-spacing:.06em;
z-index:2;
box-shadow:var(--shadow-xs);
}
.badge-live{
left:9px;
background:var(--surface);
color:var(--wine);
border:1px solid var(--wine-mist);
}
.badge-live i{
font-size:.42rem;
color:var(--wine);
animation:pulseDot 1.6s ease-in-out infinite;
}
@keyframes pulseDot{
0%,100%{ opacity:1; transform:scale(1); }
50%{ opacity:.35; transform:scale(1.5); }
}
.badge-new{
right:9px;
background:linear-gradient(135deg, var(--gold-soft), var(--gold-deep));
color:#fff;
}
/* ==========================================================================
LIGHTBOX
========================================================================== */
.iframe-lightbox .content-holder{
width:min(920px, 92%);
border-radius:var(--radius-md);
overflow:hidden;
box-shadow:var(--shadow-lg);
}
/* ===================== 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);
}
}
/* ==========================================================================
FOOTER
========================================================================== */
.footer{
font-family:"NEXON Lv1 Gothic OTF", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
color:var(--ink-faint);
font-size:0.75rem;
font-weight:500;
text-shadow:none;
margin: 34px auto 100px;
padding-top: 20px;
z-index:10;
text-align: center;
}
.footer span {
font-weight:700;
color:var(--gold-deep);
position: relative;
top: 2px;
display: inline-block;
-webkit-animation: bounce .3s ease infinite alternate;
animation: bounce .3s ease infinite alternate;
}
.footer span:nth-child(2) { -webkit-animation-delay: .1s; animation-delay: .1s; }
.footer span:nth-child(3) { -webkit-animation-delay: .2s; animation-delay: .2s; }
.footer span:nth-child(4) { -webkit-animation-delay: .3s; animation-delay: .3s; }
.footer span:nth-child(5) { -webkit-animation-delay: .4s; animation-delay: .4s; }
.footer span:nth-child(6) { -webkit-animation-delay: .5s; animation-delay: .5s; }
.footer span:nth-child(7) { -webkit-animation-delay: .6s; animation-delay: .6s; }
.footer span:nth-child(8) { -webkit-animation-delay: .7s; animation-delay: .7s; }
.footer span:nth-child(9) { -webkit-animation-delay: .8s; animation-delay: .8s; }
.footer span:nth-child(10) { -webkit-animation-delay: .9s; animation-delay: .9s; }
.footer span:nth-child(11) { -webkit-animation-delay: 1s; animation-delay: 1s; }
.footer span:nth-child(12) { -webkit-animation-delay: 1.1s; animation-delay: 1.1s; }
.footer span:nth-child(13) { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; }
.footer span:nth-child(14) { -webkit-animation-delay: 1.3s; animation-delay: 1.3s; }

@-webkit-keyframes bounce { 100% { top: -2px; } }
@keyframes bounce { 100% { top: -2px; } }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-ms-clear,
input[type=number]::-ms-expand { display: none; }

.fontAwesome {
font-family: "Font Awesome 7 Free","Font Awesome 7 Brands", sans-serif;
font-weight: 600;
}

/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:520px){
.fire_games_logo{ left:16px; }
.fire_games_logo a{ font-size:.95rem; }
.power{ right:16px; }
.my-search{ padding-top:0px; width:92%; }
.container{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:11px; }
.grid-container{ padding:6px 12px 24px; }
.card-icon{ font-size:2rem; }
.play-veil i{width:60px;height:60px;}
.card-subject{ font-size:.78rem; padding:5px; }
.iButton{ right:10px; padding:8px 6px; gap:8px; }
.iButton i{ width:30px; height:30px; font-size:.95em; }
.total{ font-size:1.25rem; }
}

@media (min-width:1920px){
.container{ grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (prefers-reduced-motion: reduce){
*{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
.item{ opacity:1; }
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes arrowBounce {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(5px); }
}
@keyframes pulseRing {
0% { box-shadow: 0 0 0 0 rgba(55,138,221,0.3); }
70% { box-shadow: 0 0 0 8px rgba(55,138,221,0); }
100% { box-shadow: 0 0 0 0 rgba(55,138,221,0); }
}
.cast-samsung {
margin: 0 auto 15px;
display: flex;
align-items: center;
gap: 12px;
padding: 0.85rem 1.1rem;
background: #E4EBF5;
border: 1px solid #b5d4f4;
border-left: 3px solid #378ADD;
border-radius: 8px;
animation: fadeIn 0.45s ease both;
text-decoration: none;
transition: background 0.15s;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #FFFFFF;
box-sizing: border-box;
text-align: left;
}
.cast-samsung:hover {
background: #dbe4f2;
}
.cast-samsung a:hover {
color: #3b82f6;
}
.icon-wrap {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 8px;
background: #e6f1fb;
display: flex;
align-items: center;
justify-content: center;
animation: pulseRing 2.5s ease-in-out infinite;
}
.banner-text {
flex: 1;
font-size: .75rem;
line-height: 1.5;
margin: 0;
}
.banner-text strong { font-weight: 700;}
.arrow {
flex-shrink: 0;
margin-left: auto;
animation: arrowBounce 1.5s ease-in-out infinite;
}