/* =========================================
   CORE RESET & CONFIG
========================================= */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

@font-face {
    font-family: 'Hamlet';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2110@1.0/Hahmlet-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

*{ margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-user-drag:none; }
*, *::before, *::after { cursor: none !important; }

:root{
  --bg:#050505;
  --panel:rgba(10,10,10,.75);
  --line:rgba(255,255,255,.08);
  --text:#f3f3f3;
  --yellow:#d7c84a;
  --red:#ff4a4a;
  --color-ssr: #d7c84a;
  --color-sr: #af7aff;
  --color-r: #4da6ff;
  --clip: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

body{
  width:100vw; height:100vh; overflow:hidden; background:#000;
  font-family:'Rajdhani', 'Pretendard', sans-serif; color:var(--text);
}
img { pointer-events:none; }

/* =========================================
   BACKGROUND DECORATIONS & INTERACTIVE DOTS
========================================= */
#ui-scale-wrapper {
    position: absolute; width: 1920px; height: 1080px; left: 50%; top: 50%;
    transform-origin: center; transform: translate(-50%, -50%); overflow: hidden; z-index: 10; 
}

.target-cursor-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 999999;
  mix-blend-mode: difference;
  transform: translate(-50%, -50%);
}

.target-cursor-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.target-cursor-corner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid #fff;
  will-change: transform;
}

.corner-tl {
  transform: translate(-150%, -150%);
  border-right: none;
  border-bottom: none;
}

.corner-tr {
  transform: translate(50%, -150%);
  border-left: none;
  border-bottom: none;
}

.corner-br {
  transform: translate(50%, 50%);
  border-left: none;
  border-top: none;
}

.corner-bl {
  transform: translate(-150%, 50%);
  border-right: none;
  border-top: none;
}

.background-map{
  position:absolute; inset:0;
  background:radial-gradient(circle at center,rgba(255,255,255,.04),transparent 60%), url('https://images.unsplash.com/photo-1524661135-423995f22d0b?q=80&w=2400&auto=format&fit=crop');
  background-size:cover; background-position:center;
  filter:grayscale(1) contrast(1.2) brightness(.18); transform:scale(1.08);
}
.map-noise{ position:absolute; inset:0; opacity:.15; background-image:url('https://www.transparenttextures.com/patterns/asfalt-dark.png'); }
.vignette{ position:absolute; inset:0; background:radial-gradient(circle,transparent 35%,rgba(0,0,0,.82) 100%); }

/* HUD ELEMENTS */
.hud, .grid, .scan-lines, .noise-overlay{ position:absolute; inset:0; pointer-events: none;}
.grid{ background: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:80px 80px; }
.scan-lines{ opacity:.08; background:repeating-linear-gradient(0deg, rgba(255,255,255,.25) 0px, rgba(255,255,255,.25) 1px, transparent 1px, transparent 4px); }
.noise-overlay{ opacity:.04; background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px); background-size:4px 4px; }
.crosshair{ position:absolute; background:rgba(255,255,255,.06); }
.horizontal{width:100%; height:1px; top:50%;}
.vertical{width:1px; height:100%; left:50%;}

.radar{ position:absolute; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events: none;}
.radar-1{width:920px;height:920px;border:1px solid rgba(255,255,255,.05);}
.radar-2{width:640px;height:640px;border:1px dashed rgba(255,255,255,.08);}
.radar-3{width:320px;height:320px;border:1px solid rgba(255,255,255,.05);}
.hud-corner{ position:absolute; width:120px; height:120px; border:1px solid rgba(255,255,255,.12); pointer-events: none;}
.tl{top:30px;left:30px;} .tr{top:30px;right:30px;} .bl{bottom:30px;left:30px;} .br{bottom:30px;right:30px;}

/* =========================================
   LAYOUT & BANNER PANELS
========================================= */
.top-bar{ position:absolute; left:60px; right:60px; top:35px; z-index:10; display:flex; justify-content:space-between; }
.system-id{ display:flex; gap:20px; }
.id-big{ font-size:5rem; font-family:'Orbitron',sans-serif; font-weight:800; }
.id-text{ display:flex; flex-direction:column; margin-top:14px; letter-spacing:4px;}
.id-text span:last-child{ opacity:.4; font-size:.75rem; letter-spacing:3px; }

.mini-stat{ background:var(--panel); border:1px solid var(--line); backdrop-filter:blur(4px); min-width:150px; padding:14px 18px; display:flex; flex-direction:column; clip-path: var(--clip); }
.mini-label{ font-size:.7rem; letter-spacing:2px; opacity:.45; }
.mini-value{ margin-top:5px; font-size:1rem; font-weight:700; font-family:'Orbitron';}
.yellow{color:var(--yellow);}

.main-layout{ width:100%; height:100%; padding:160px 60px 90px; display:grid; grid-template-columns:300px 1fr 360px; gap:40px; position:relative; z-index:10; }

.sidebar { display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.banner-button{ background:var(--panel); border:1px solid var(--line); font-size: 16px; height:94px; color:#fff; text-align:left; padding:0 30px; cursor:pointer; font-family:'Orbitron',sans-serif; letter-spacing:3px; transition:.25s; clip-path: var(--clip); }
.banner-button:hover, .banner-button.active{ transform:translateX(20px); border-color:var(--yellow); background:rgba(215,200,74,.12); }

.center-stage{ position:relative; }
.target-system{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events: none;}
.target-ring{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; }
.ring-a{width:420px;height:420px;border:1px solid rgba(255,255,255,.12);}
.ring-b{width:280px;height:280px;border:1px dashed rgba(255,255,255,.16);}

.banner-panel{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:760px; padding:36px; background:rgba(10,10,10,0.85); border:1px solid var(--line); backdrop-filter:blur(8px); clip-path:var(--clip); overflow:hidden; }
.panel-no{ position:absolute; right:24px; top:12px; font-size:5rem; font-family:'Orbitron',sans-serif; opacity:.06; font-weight:800; }
#banner-title{ margin-top:10px; font-size:3.5rem; font-family:'Orbitron',sans-serif; }
.panel-chip{ border:1px solid rgba(255,255,255,.15); padding:10px 16px; font-size:.8rem; letter-spacing:3px; display:inline-block; margin-top:10px;}

.banner-preview{ position:relative; height:280px; margin-top:26px; overflow:hidden; border:1px solid rgba(255,255,255,.1); clip-path: var(--clip); }
.banner-preview img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1.0) contrast(1.1); }
.banner-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgb(0 0 0 / 44%), transparent); }

.banner-info { margin-top: 15px; }
.pickup-title{ font-family:'Orbitron',sans-serif; color:var(--yellow); letter-spacing:2px; }
.banner-desc{ margin-top:8px; line-height:1.6; opacity:0.6; letter-spacing:1px; font-size:0.9rem;}

.pity-grid{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.pity-card{ background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.1); padding:18px; display:flex; flex-direction:column; gap:10px; clip-path: var(--clip); }
.pity-card span{ opacity:.45; font-size:.72rem; }
.pity-card b{ font-family:'Orbitron',sans-serif; font-size:1.8rem; }

.right-panel{ display:flex; flex-direction:column; justify-content:center; }
.panel-title{ font-size:3.5rem; font-family:'Orbitron',sans-serif; letter-spacing: 2px;}
.command-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.command-card{ background:var(--panel); border:1px solid var(--line); clip-path: var(--clip); color:#fff; min-height:120px; padding:24px 34px; cursor:pointer; text-align:left; transition:.25s; display:flex; flex-direction:column; justify-content:center;}
.command-card:hover{ transform:translateX(-10px); border-color:var(--yellow); }
.large{ grid-column:span 2; min-height:150px; text-align: center; align-items:center; }
.active-card{ background:rgba(215,200,74,.08); border:1px solid rgba(215,200,74,.25); }
.command-main{ font-size:1.4rem; font-weight:700; letter-spacing:2px; font-family:'Orbitron',sans-serif;}
.command-sub{ opacity:0.5; font-size:0.8rem; margin-top:6px; font-family:'Rajdhani';}
.debug-btn{ border-color:rgba(255,74,74,.3); }
.debug-btn.active{ background:rgba(255,74,74,.15); border-color:var(--red); color:var(--red); }

/* =========================================
   GACHA OVERLAYS & PREV ANIMATIONS
========================================= */
#gacha-overlay {
    position: fixed; inset: 0; z-index: 120; display: none; background: #0b0c10; overflow: hidden;
}
.flash-wrap { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; }
.flash-text {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    z-index: 10; font-size: 4rem; font-family: 'Orbitron', sans-serif; font-weight: 800; letter-spacing: .18em;
    color: #ffffff; text-shadow: 0 0 10px rgba(255, 255, 255, 0.793), 0 0 20px rgba(251, 255, 0, 0.3);
    opacity: 0; pointer-events: none;
}
.flash-text span {
    display: inline-block; opacity: 0; filter: blur(18px); transform: translateY(80px) scale(0.6) rotateX(90deg);
    animation: textBoot 3.2s cubic-bezier(0.18, 0.82, 0.22, 1) forwards;
}
.flash-text span:nth-child(1) { animation-delay: 0.05s; }
.flash-text span:nth-child(2) { animation-delay: 0.18s; }
.flash-text span:nth-child(3) { animation-delay: 0.31s; }
.flash-text span:nth-child(4) { animation-delay: 0.48s; }

@keyframes textBoot {
    0% { opacity: 0; filter: blur(24px) brightness(2); transform: translateY(120px) scale(0.4) rotateX(90deg); }
    25% { opacity: 1; filter: blur(0) brightness(1.6); transform: translateY(0) scale(1.12) rotateX(0deg); }
    38% { opacity: 1; filter: blur(0) brightness(1); transform: scale(0.96); }
    78% { opacity: 1; filter: blur(0) brightness(1); transform: scale(1); }
    100% { opacity: 0; filter: blur(12px); transform: scale(1.4) translateY(-40px); }
}

.flash-noise {
    position: absolute; inset: -50%; mix-blend-mode: screen; opacity: 0; animation: noiseFlash 1.8s linear;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 4px);
}
@keyframes noiseFlash { 0% { opacity: 0; transform: translateY(-10%); } 20% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(10%); } }

.scan-line {
    position: absolute; left: 0; top: -20%; width: 100%; height: 220px; z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.15), transparent); transform: skewY(-6deg);
}
#gacha-overlay.active .scan-line { animation: scan 2.4s cubic-bezier(0.16, 0.84, 0.24, 1) forwards; }
@keyframes scan { to { top: 120%; } }

.scan-ring {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 0; height: 0; z-index: 2; border-radius: 50%;
    border: 2px solid var(--ring-color, rgba(234, 255, 0, 0.8)); box-shadow: 0 0 15px var(--ring-color, rgba(246, 255, 0, 0.5));
}
#gacha-overlay.active .scan-ring { animation: ring 1.8s cubic-bezier(0.16, 0.84, 0.24, 1) forwards; }
@keyframes ring { to { width: 1200px; height: 1200px; opacity: 0; } }
#gacha-overlay.active .flash-text { animation: flashText 2s ease forwards; }
@keyframes flashText { 0% { opacity: 0; letter-spacing: 1em; } 20% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; letter-spacing: 0.18em; } }

/* =========================================
   SSR CINEMATIC & REVEAL
========================================= */
#single-reveal { position: fixed; inset: 0; z-index: 99999; background-color: #030303; display: flex; justify-content: center; align-items: center; }
#reveal-content { 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.ssr-cinematic { position: relative; width: 100%; height: 100%; overflow: hidden; background: #1c1c1c; }
.ssr-silhouette, .ssr-image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ssr-image { opacity: 0; transform: scale(1.06) translateX(30px); transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease; z-index: 2; }
.ssr-silhouette { z-index: 3; filter: brightness(0) contrast(1.4) blur(4px); opacity: 0.9; transform: scale(1.08); animation: silhouetteHold 2s ease forwards; }

@keyframes silhouetteHold { 0% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0.9; transform: scale(1.08); } }

.ssr-type { position: absolute; top: 15%; left: 8%; z-index: 10; font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 700; color: rgba(255, 255, 255, 0.85); letter-spacing: 6px; text-shadow: 0 0 15px rgba(255,255,255,0.4); }
.ssr-ui { position: absolute; bottom: 12%; left: 8%; z-index: 10; opacity: 0; transform: translateY(40px); transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s ease; transition-delay: 0.2s; }
.ssr-rank { font-family: 'Orbitron', sans-serif; font-size: 4rem; font-weight: 900; color: #ffcc00; letter-spacing: 2px; text-shadow: 0 0 25px rgba(255, 204, 0, 0.7); line-height: 1; }
.ssr-name { font-family: 'Pretendard', sans-serif; font-size: 2.2rem; font-weight: 700; color: #ffffff; margin-top: 8px; letter-spacing: 1px; }

.ssr-cinematic.reveal .ssr-image { opacity: 1; transform: scale(1) translateX(0); }
.ssr-cinematic.reveal .ssr-ui { opacity: 1; transform: translateY(0); }
.ssr-cinematic.reveal .ssr-silhouette { opacity: 0 !important; filter: brightness(0) blur(40px); transform: scale(1.18); pointer-events: none; transition: 1.2s ease; }

#type-target::after { content: '_'; animation: cursorBlink 0.7s infinite; }
@keyframes cursorBlink { 50% { opacity: 0; } }

#ssr-masonry-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; background: #0d0d0d; display: none; overflow: hidden; }
.masonry-list { position: relative; width: 100%; height: 100%; }

/* 🔥 최적화: width, height 제거 후 transform, opacity만 남김 */
.masonry-item-wrapper { position: absolute; will-change: transform, opacity; padding: 8px; top: 0; left: 0; }

/* 🔥 최적화: 무거운 filter 속성 제거 및 그림자 부하 감소 */
.masonry-item-wrapper > .masonry-item-img { position: relative; background-size: cover; background-position: center center; width: 100%; height: 100%; border-radius: 12px; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.6); }

.tactical-reveal { width: 520px; padding: 60px 40px; background: rgba(10, 10, 10, 0.8); border: 2px solid; clip-path: var(--clip); text-align: center; animation: itemAppear 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.tactical-reveal .reveal-icon { font-size: 8rem; margin-bottom: 28px; }
.tactical-reveal .reveal-name { margin: 0; font-size: 2.2rem; font-weight: 800; font-family:'Orbitron';}

/* =========================================
   RESULT & INVENTORY GRIDS (SCROLL & ALIGN)
========================================= */
/* 🔥 최적화: 거대한 배경의 backdrop-filter 블러 대폭 축소 및 background 불투명도 증가 */
.result-container { position: fixed; inset: 0; z-index: 2000; background: rgba(4, 4, 4, 0.85); backdrop-filter: blur(8px); padding: 50px 80px; display: none; flex-direction: column; align-items: center; justify-content:center;}
.result-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 24px; width:100%; max-width: 1400px; margin-bottom: 30px;}
.header-tagline { font-family: 'Orbitron', sans-serif; letter-spacing: 3px; color: rgba(255,255,255,0.4); }

.result-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; width: 100%; max-width: 1400px; max-height: 70vh; align-content: center; }

/* Grid Item - 고정 높이 260px 적용 */
.grid-item { 
    background: #0d0d0d; border: 1px solid rgba(255, 255, 255, 0.1); 
    height: 320px; position: relative; overflow: hidden; opacity: 0; 
    transform: perspective(1000px) rotateX(-15deg) translateY(30px); 
    animation: itemAppear 0.6s cubic-bezier(0.25, 1, 0.5, 1) forwards; 
    clip-path: var(--clip); 
}

/* 세로 중앙 정렬 및 Flex 배치 */
.item-inner { 
    width: 100%; height: 100%; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; 
}

/* 이미지 영역 고정 높이 및 찌그러짐 방지 */
.image-holder { 
    width: 100%; height: 230px; background: #111; position: relative;
    display: flex; justify-content: center; align-items: center; flex-shrink: 0; 
}
.image-holder img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.grid-item:hover .image-holder img { transform: scale(1.06); }
.image-holder::after { content: ''; position: absolute; top: 0; left: -150%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.12), transparent); transform: skewX(-25deg); }
.grid-item:hover .image-holder::after { animation: shineSwipe 0.8s ease-out; }

/* 하단 텍스트 영역 중앙 정렬 */
.item-details { 
    width: 100%; padding: 10px; border-top: 1px solid rgba(255, 255, 255, 0.05); 
    flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; 
}
.rarity-badge { font-family: 'Orbitron', sans-serif; font-size: 0.75rem; letter-spacing: 2px; margin-bottom: 6px; }
.item-name { font-size: 1.1rem; font-weight: 600; letter-spacing: 1px; }

.rarity-ssr { border-left: 4px solid var(--color-ssr); } .rarity-ssr .rarity-badge { color: var(--color-ssr); }
.rarity-sr  { border-left: 4px solid var(--color-sr); }  .rarity-sr  .rarity-badge { color: var(--color-sr); }
.rarity-r   { border-left: 4px solid var(--color-r); }   .rarity-r   .rarity-badge { color: var(--color-r); }

/* =========================================
   INVENTORY OVERLAY & FILTERS
========================================= */
/* 🔥 최적화: 인벤토리 오버레이의 과도한 blur 감소 및 백그라운드 색상 조정 */
#inv-overlay { position: fixed; inset: 0; z-index: 1500; display: none; background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(4px); }

/* 패널 내부 세로 정렬 지정 */
#inv-panel { 
    position: fixed; z-index: 1501; left: 50%; top: 50%; width: 90vw; max-width:1500px; height: 85vh; 
    transform: translate(-50%, -45%); background: #090909; border: 1px solid rgba(255,255,255,0.1); padding: 40px; 
    opacity:0; visibility:hidden; transition:.4s ease; clip-path: var(--clip); 
    display: flex; flex-direction: column; 
}
#inv-panel.open { transform: translate(-50%, -50%); opacity:1; visibility:visible; }

.inventory-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 20px; }
.inventory-title { font-family: 'Orbitron', sans-serif; letter-spacing: 3px; }
.inventory-actions { display: flex; gap:16px; }
#inv-filter, .close-btn { height: 50px; background: #111; border: 1px solid rgba(255,255,255,0.15); color: #fff; padding: 0 24px; font-family: 'Pretendard', sans-serif; letter-spacing: 1px; cursor: pointer; clip-path: var(--clip); outline: none;}
#inv-filter:hover, .close-btn:hover { background: #fff; color: #000; }

/* 스크롤 가능 구역 설정 */
.inventory-grid { 
    margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    gap: 20px; overflow-y: auto; flex: 1; padding-right: 10px; align-content: start; 
}

/* =========================================
   MISCELLANEOUS
========================================= */
#loading-screen { 
    position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #050505; 
    transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1); /* 부드러운 가속도 곡선 적용 */
}
.loaded #loading-screen { 
    transform: translateY(100%); 
}
.loader { width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.1); border-top-color: #fff; animation: spin 1s linear infinite; position: relative; }
.loader::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.12); }
.loading-text { margin-top: 28px; font-family: 'Orbitron', sans-serif; letter-spacing: 0.18em; font-size: 0.82rem; animation: pulse 1.4s infinite; color:#fff;}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.3; } }
@keyframes itemAppear { to { opacity: 1; transform: perspective(1000px) rotateX(0deg) translateY(0); } }
@keyframes shineSwipe { to { left: 150%; } }

/* 🔥 최적화: 팝업 백그라운드 블러 수치 조정 */
#rate-popup { position: fixed; inset: 0; z-index: 500; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.85); backdrop-filter:blur(4px);}
.rate-box { width: 420px; padding: 34px; background: #111; border: 1px solid rgba(255, 255, 255, 0.2); clip-path: var(--clip); box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.rate-title { margin-top: 0; font-family: 'Orbitron', sans-serif; color:var(--yellow);}
.rate-section { margin-top:24px; }
.rate-heading { margin-bottom:12px; font-family:'Orbitron'; letter-spacing:.08em; font-size:1.2rem; color:#fff;}
.rate-line { margin-bottom:2px; font-size:1.1rem; line-height:1.7; }
.ssr-rate { font-family:'Orbitron'; color:var(--color-ssr); }
.sr-rate { font-family:'Orbitron'; color:var(--color-sr); }
.r-rate { font-family:'Orbitron'; color:white; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }

#tutorial-modal { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(7, 7, 7, 0.96); z-index: 10005; display: flex; justify-content: center; align-items: center; opacity: 1; transition: opacity 0.5s ease; }
#tutorial-modal.hidden { opacity: 0; pointer-events: none; }
.tutorial-content { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.tutorial-img-wrapper { position: relative; width: 100%; height: 100%; }
#tutorial-img { width: 100%; height: 100%; object-fit: fill; border: none; box-shadow: none; display: block; }
#close-tutorial { position: absolute; bottom: 45px; right: 45px; background: rgba(7, 7, 7, 0.85); color: #f4f4f4; border: 1px solid rgba(255, 255, 255, 0.2); padding: 12px 35px; font-family: 'Orbitron', 'Rajdhani', sans-serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 2px; cursor: pointer; transition: all 0.3s ease; z-index: 10; backdrop-filter: blur(4px); border-radius: 4px; }
#close-tutorial:hover { background: #f4f4f4; color: #070707; box-shadow: 0 0 20px #f4f4f4; border-color: #f4f4f4; }

/* =========================================
   BANNER SWIPE ANIMATION
========================================= */
@keyframes bannerSwipe {
    0% {
        opacity: 0.1;
        transform: translate(-45%, -50%) skewX(-1deg);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) skewX(0deg);
        filter: blur(0);
    }
}

.banner-panel.swipe-anim {
    animation: bannerSwipe 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes imageSwipe {
    0% { transform: scale(1.15) translateX(5%); }
    100% { transform: scale(1) translateX(0); }
}

.banner-panel.swipe-anim .banner-preview img {
    animation: imageSwipe 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}