/* ===== css/nova-games.css ===== */
/* ============================================================
   nova-games.css — OSLO 유저웹 메인 "게임 선택" (nova 테마 이식)
   원본: nova standalone (style.css / mobile.css) 에서 토글+카드 규칙만 발췌.
   전부 .nova-games 스코프로 격리. 충돌 회피: play-btn→ng-play, pause-btn→ng-pause, category→ng-category.
   이미지: /assets/nova-games/ (toggle-bg, icon-bg, casino-icon, slot-icon)
   ============================================================ */

.nova-games {
  --orange:#e8a200; --yellow:#e83e8c; --white-yellow:#c2b0ef; --red:#ff5c6c;
}

/* ---------- helpers ---------- */
.nova-games .w-ba { position:relative; z-index:1; }
.nova-games .w-ba:before, .nova-games .w-ba:after { content:''; pointer-events:none; z-index:-1; position:absolute; }
.nova-games .dflex-ac-jc { display:flex!important; align-items:center; align-content:center; justify-content:center; flex-wrap:wrap; }
.nova-games .dflex-ac-js { display:flex!important; align-items:center; align-content:center; justify-content:flex-start; flex-wrap:wrap; }
.nova-games .dflex-ac-je { display:flex!important; align-items:center; align-content:center; justify-content:flex-end; flex-wrap:wrap; }
.nova-games .ng-wrap { width:100%; max-width:1200px; margin:0 auto; }
.nova-games #nova-casinoList, .nova-games #nova-slotList { align-items:flex-start; min-height:120px; }

/* ---------- buttons ---------- */
.nova-games .btn-yellow { color:rgba(0,0,0,.78); text-shadow:0 1px 0 rgba(255,255,255,.4); background-color:#ffc657; background-image:linear-gradient(#ffce6b,#ffbd3f); border:solid 1px #ffd273; border-radius:5px; box-shadow:inset 0 0 0 1px #1d160e; font-weight:700; position:relative; z-index:1; }
.nova-games .btn-red { color:#fff; background-color:#be462a; background-image:linear-gradient(#e3603b,#a3321e); border:solid 1px #d85c38; border-radius:5px; box-shadow:inset 0 0 0 1px #1d160e; text-shadow:0 1px 0 rgba(0,0,0,1); position:relative; z-index:1; }
.nova-games .btn-yellow:before, .nova-games .btn-red:before { content:''; width:100%; height:100%; position:absolute; left:0; top:0; transition:.3s; z-index:-1; border-radius:4px; border:solid 1px #1d160e; opacity:0; }
.nova-games .btn-yellow:before { background-image:linear-gradient(#ffac66,#d77421); }
.nova-games .btn-red:before { background-image:linear-gradient(#7188ff,#3243a3); }
@media(min-width:1121px){
  .nova-games .btn-yellow:hover:before, .nova-games .btn-red:hover:before { opacity:1; }
  .nova-games .btn-red:hover { background-color:#7188ff; border-color:#7188ff; text-shadow:0 1px 0 rgba(0,0,0,.5); box-shadow:inset 0 0 0 1px #1d160e, 0 0 8px rgba(255,255,255,.4); }
  .nova-games .btn-yellow:hover { color:#1a1206; text-shadow:0 1px 0 rgba(255,255,255,.45); background-color:#ffac66; border-color:#ffa04f; box-shadow:inset 0 0 0 1px #1d160e, 0 0 12px rgba(255,210,120,.7); }
}

/* ---------- toggle ---------- */
.nova-games .toggle-section { margin-top:4px; }
.nova-games .toggle-btn { width:calc(45% - 1px); height:72px; background-color:transparent; border:none; color:var(--white-yellow); font-weight:700; font-size:24px; transition:0s; cursor:pointer; padding:0; }
.nova-games .toggle-btn:hover { color:var(--orange); text-shadow:0 1px 1px rgba(0,0,0,1), 0 0 15px rgba(232,166,0,.45); }
.nova-games .toggle-btn.active { color:var(--orange); text-shadow:0 1px 1px rgba(0,0,0,1), 0 0 15px rgba(232,166,0,.6); }
.nova-games .toggle-btn .btn-panel { width:calc(100% - 83px); height:100%; border:solid 1px rgba(255,255,255,.12); background-image:linear-gradient(#1b1b33,#10101f); filter:drop-shadow(0 5px 5px rgba(0,0,0,.5)); flex-wrap:nowrap; }
.nova-games .toggle-btn:first-child .btn-panel { margin-right:29px; }
.nova-games .toggle-btn:last-child .btn-panel { margin-left:29px; }
.nova-games .toggle-btn .btn-panel:before { width:100%; height:1px; left:0; bottom:5px; background-color:rgba(255,255,255,.12); }
.nova-games .toggle-btn .btn-panel:after { width:29px; height:calc(100% + 2px); top:-1px; background-image:url(/assets/nova-games/toggle-bg.png); background-size:100% 100%; filter:hue-rotate(212deg) saturate(.8) brightness(.95); }
.nova-games .toggle-btn:first-child .btn-panel:after { right:-29px; }
.nova-games .toggle-btn:last-child .btn-panel:after { left:-29px; transform:rotateY(180deg); }
.nova-games .toggle-btn .btn-panel .ng-category { position:relative; top:-3px; white-space:nowrap; }
.nova-games .toggle-btn .icon-panel { width:152px; height:120px; }
.nova-games .toggle-btn .icon-panel:before { width:100%; height:100%; left:0; top:0; background-image:url(/assets/nova-games/icon-bg.png); background-size:100% 100%; filter:hue-rotate(212deg) saturate(.8) brightness(.95); }
.nova-games .toggle-btn:first-child .icon-panel { margin-left:-95px; margin-right:25px; }
.nova-games .toggle-btn:last-child .icon-panel { margin-right:-95px; margin-left:25px; }
.nova-games .toggle-btn:last-child .icon-panel:before { transform:rotateY(180deg); }
.nova-games .toggle-btn .icon-panel img { transition:.3s; max-height:96px; }
.nova-games .toggle-btn:hover .icon-panel img { transform:scale(.8); }
.nova-games .toggle-btn.active .icon-panel img { animation:ngToggleIcon 2s ease infinite; }
@keyframes ngToggleIcon { 0%{transform:scale(1)} 50%{transform:scale(.95)} 100%{transform:scale(1)} }
.nova-games .toggle-btn .indicator { font-size:30px; opacity:0; animation:ngIndicator 1s ease infinite; }
@keyframes ngIndicator { 0%{transform:translateY(0)} 50%{transform:translateY(-3px)} 100%{transform:translateY(0)} }
.nova-games .toggle-btn.active .indicator { opacity:1; }

/* ---------- provider grid ---------- */
.nova-games .game-provider { margin:30px 0 0; }
.nova-games .sc-section { width:calc(100% + 16px); position:relative; left:-8px; display:none; }
.nova-games .sc-section.active { display:block; }
.nova-games .sc-btn { width:calc(16.666% - 15px); background-color:#241a3a; background-image:linear-gradient(to bottom left,#7b61ff,#3a2d63,#1b1b33); border-radius:10px; box-shadow:0 5px 15px rgba(0,0,0,1); display:inline-block; margin:0 7.5px 20px; padding:5px; position:relative; animation:ngScBtn .8s ease 1 backwards; transform-origin:bottom center; text-decoration:none; vertical-align:top; }
@keyframes ngScBtn { 0%{opacity:0;transform:translateY(50px) scale(.5)} 50%{opacity:1;transform:translateY(-20px) scale(1)} 100%{opacity:1;transform:translateY(0) scale(1)} }
.nova-games .sc-btn.off { opacity:.5; }
.nova-games .sc-btn:hover { z-index:2; margin-top:-20px; margin-bottom:-20px; box-shadow:0 0 14px rgba(123,97,255,.55); }
.nova-games .sc-btn:before, .nova-games .sc-btn:after { width:calc(100% - 2px); height:calc(100% - 2px); left:0; right:0; top:0; bottom:0; margin:auto; border-radius:10px; background-image:linear-gradient(#3a2d63,#1b1b33); transition:.3s; }
.nova-games .sc-btn:after { background-image:linear-gradient(#c9b8ff,#a78bff); opacity:0; }
.nova-games .sc-btn:hover:after { opacity:1; }
.nova-games .sc-btn .g-panel { width:100%; background-color:#141428; border-radius:8px; padding:8px 9px; overflow:hidden; transition:.3s; }
.nova-games .sc-btn:hover .g-panel { background-color:#1d1d3d; }
.nova-games .sc-btn .g-panel:before { width:120%; height:50%; left:-10%; right:0; bottom:-20%; margin:0 auto; background-image:radial-gradient(rgba(123,97,255,.55),rgba(123,97,255,.12),rgba(123,97,255,0),rgba(123,97,255,0)); }
.nova-games .sc-btn .g-panel:after { width:100%; height:100%; left:0; bottom:0; box-shadow:inset 0 0 30px rgba(0,0,0,.75); border-radius:8px; z-index:4; }
.nova-games .sc-btn .g-cont { background-color:#000; border-radius:8px; overflow:hidden; position:relative; box-shadow:0 1px 1px rgba(167,139,255,.5); }
.nova-games .sc-btn:hover .g-cont { box-shadow:0 1px 1px #a78bff, 0 2px 5px rgba(0,0,0,.5); }
.nova-games .sc-btn .g-cont .g-img { width:100%; display:block; aspect-ratio:1/1; object-fit:cover; transition:.5s; }
.nova-games .sc-btn:hover .g-cont .g-img { transform:scale(1.1); opacity:.5; }
.nova-games .sc-btn .g-info { width:100%; position:relative; left:0; top:0; margin:5px 0 -5px; z-index:3; text-align:center; }
.nova-games .sc-btn .g-info .g-name { width:100%; display:inline-block; color:#fff; font-size:16px; text-shadow:0 1px 2px rgba(0,0,0,1); vertical-align:top; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nova-games .sc-btn .g-logo { width:60px; height:60px; border-radius:50%; background-color:#7b61ff; background-image:linear-gradient(#c9b8ff,#7b61ff,#e83e8c); box-shadow:0 2px 5px rgba(0,0,0,.5); margin:-40px auto 0; transition:.3s; }
.nova-games .sc-btn:hover .g-logo { margin:10px auto 0; }
.nova-games .sc-btn .g-logo:before { width:calc(100% - 4px); height:calc(100% - 4px); left:0; right:0; top:0; bottom:0; margin:auto; border-radius:50%; background-color:#141428; }
.nova-games .sc-btn .glass { width:200%; height:100%; position:absolute; bottom:0; left:0; background-image:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.1)); transform-origin:bottom left; transform:rotate(-48deg); z-index:1; transition:.3s; }
.nova-games .sc-btn:hover .glass { transform:rotate(0deg); opacity:0; }
.nova-games .sc-btn .g-footer { position:relative; z-index:3; }
.nova-games .sc-btn .g-footer:before { width:0; height:7px; top:0; bottom:0; left:0; right:0; margin:auto; border-top:solid 1px rgba(255,255,255,.15); border-bottom:solid 1px rgba(255,255,255,.15); transition:.5s; -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%); mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 5%,black 25%,black 75%,rgba(0,0,0,0) 95%,rgba(0,0,0,0) 100%); }
.nova-games .sc-btn:hover .g-footer:before { width:100%; }
.nova-games .sc-btn .ng-play, .nova-games .sc-btn .ng-pause { width:100px; height:35px; border-radius:5px; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; z-index:4; box-shadow:0 0 10px rgba(255,200,90,.55), 0 1px 2px rgba(0,0,0,1), inset 0 0 0 1px #1d160e; opacity:0; transform:scale(0); cursor:pointer; }
.nova-games .sc-btn .ng-play:hover, .nova-games .sc-btn .ng-pause:hover { box-shadow:0 0 15px rgba(255,205,100,1), 0 1px 2px rgba(0,0,0,1), inset 0 0 0 1px #1d160e; }
.nova-games .sc-btn:hover .ng-play, .nova-games .sc-btn:hover .ng-pause { opacity:1; transform:scale(1); }

/* ---------- responsive ---------- */
@media(max-width:1024px){ .nova-games .sc-btn { width:calc(25% - 15px); } }
@media(max-width:900px){
  .nova-games .toggle-btn { height:60px; font-size:18px; margin-top:-1px; }
  .nova-games .toggle-btn .indicator { font-size:24px; }
  .nova-games .toggle-btn .btn-panel { width:100%; }
  .nova-games .toggle-btn:first-child .icon-panel { margin-left:0; margin-right:15px; }
  .nova-games .toggle-btn:last-child .icon-panel { margin-right:0; margin-left:15px; }
  .nova-games .toggle-btn:first-child .btn-panel { margin-right:0; }
  .nova-games .toggle-btn:last-child .btn-panel { margin-left:0; }
  .nova-games .toggle-btn .icon-panel { width:100px; height:80px; }
  .nova-games .toggle-btn .icon-panel img { max-height:60px; }
  .nova-games .toggle-btn .btn-panel:before { bottom:3px; }
}
@media(max-width:767px){
  .nova-games .sc-btn { width:calc(33.33% - 15px); }
  .nova-games .sc-btn .g-info .g-name { font-size:14px; }
}
@media(max-width:600px){
  .nova-games .toggle-btn { width:calc(50% - 30px); font-size:14px; }
  .nova-games .toggle-btn .indicator { font-size:18px; top:-2px; position:relative; }
}
@media(max-width:500px){
  .nova-games .toggle-section { padding:0 5px; }
  .nova-games .toggle-btn { width:calc(50% - 8px); height:50px; margin:10px 4px 0; font-size:12px; }
  .nova-games .toggle-btn .btn-panel { border-radius:5px; }
  .nova-games .toggle-btn .btn-panel:after { display:none; }
  .nova-games .toggle-btn .icon-panel { width:80px; height:50px; }
  .nova-games .toggle-btn:first-child .icon-panel { margin-left:-10px; margin-right:0; }
  .nova-games .toggle-btn:last-child .icon-panel { margin-right:-10px; margin-left:0; }
  .nova-games .toggle-btn .icon-panel img { max-height:44px; }
  .nova-games .toggle-btn .indicator { font-size:14px; }
  .nova-games .game-provider { margin:20px 0 0; }
  .nova-games .sc-btn { width:calc(50% - 12px); margin:7px 6px; padding:2px; box-shadow:0 2px 5px rgba(0,0,0,1); }
  .nova-games .sc-btn .g-panel { padding:6px 6px 8px; }
  .nova-games .sc-btn .ng-play, .nova-games .sc-btn .ng-pause { width:80px; height:30px; font-size:12px; }
}