/* ============================================================
   cyanogamecorner.css — OPTIMIZED
   Removed: backdrop-filter on panels, reduced animations,
   killed scanline repaint, throttled bg-pan
   ============================================================ */

:root {
  --gc-text:        #f0f0f0;
  --gc-text-muted:  #8a8a8a;
  --gc-text-dim:    #4a4a4a;
  --gc-border:      rgba(255,255,255,0.10);
  --gc-border-bright: rgba(255,255,255,0.20);
  --gc-garnet:      #08EEFE;
  --gc-garnet-glow: rgba(8,238,254,0.35);
  --gc-garnet-dim:  rgba(8,238,254,0.12);
  --gc-crystal:     #08EEFE;
  --gc-crystal-glow:rgba(8,238,254,0.30);
  --gc-crystal-dim: rgba(8,238,254,0.10);
  --gc-glimmose:    #59b8ff;
  --gc-bg:          #00010a;
  --gc-bg-card:     rgba(0,5,18,0.85);
  --gc-bg-pan-speed:40s; /* slowed down = less work */
  --gc-radius:      10px;
  --gc-radius-lg:   18px;
  --gc-transition:  0.18s cubic-bezier(.2,.9,.2,1);
  --gc-vip-gold:    #f5c842;
}

*, *::before, *::after { box-sizing: border-box; }

body.game-corner {
  margin: 0; padding: 10px;
  font-family: 'MS PGothic','Hiragino Kaku Gothic Pro',sans-serif;
  color: var(--gc-text);
  overflow-x: hidden;
  background-color: #00010a;
  /* static deep gradient — no animation, no repaint */
  background-image:
    radial-gradient(ellipse 100% 60% at 50% 80%, rgba(4,40,86,0.85), transparent 80%),
    radial-gradient(ellipse 140% 80% at 50% 100%, rgba(4,40,86,0.95), transparent 90%);
  background-attachment: fixed;
}

/* ── RIPPLE BG — kept but opacity reduced, slower ── */
.gc-ripple-bg {
  position: fixed; inset: -10%; width: 120%; height: 120%;
  z-index: 0; pointer-events: none;
  background-image: url('/storage/images/gamecorner/ripple.png');
  background-repeat: repeat; background-size: 150px;
  opacity: 0.10; /* was 0.22 */
  animation: gc-ripple-drift 32s linear infinite; /* was 18s */
  will-change: transform;
}
@keyframes gc-ripple-drift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(10%,-10%,0); }
}

/* ── SWELL ORBS — removed, replaced with static gradient on body ── */
.gc-swell-mid,
.gc-swell-deep { display: none; } /* REMOVED — too expensive */

/* ── SCANLINES — removed, was repainting constantly ── */
body.game-corner::before { display: none; }

/* ── VIGNETTE — static, cheap ── */
body.game-corner::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9998;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,1,14,0.7) 100%);
}

/* ── CONTAINER ── */
.container {
  max-width: 1600px;
  margin: 4vw auto 12px auto;
  display: flex; flex-wrap: wrap; gap: 10px; padding: 6px;
  position: relative; z-index: 2;
  border: 4px ridge rgba(8,238,254,0.22);
  border-radius: var(--gc-radius-lg);
  background: rgba(0,5,18,0.80);
  box-shadow: 0 0 0 1px rgba(8,238,254,0.05), 0 20px 60px rgba(0,0,0,0.7);
  /* NO backdrop-filter — massive perf win */
}

/* ── LAYOUT ── */
.small { flex: 1 1 12rem; }
.large { flex: 3 1 30rem; }
.full  { flex: 1 1 100%; }
.half  { flex: 1 1 24rem; }

/* ── PANELS — NO backdrop-filter ── */
nav, section,
.gc-card, .gc-news-item, .gc-challenge,
.gc-lb-row, .gc-achievement, .gc-tile,
.gc-currency-row, .gc-section {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(0,12,30,0.94), rgba(0,8,22,0.90));
  border: 1px solid rgba(8,238,254,0.18);
  border-radius: var(--gc-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: transform var(--gc-transition), border-color var(--gc-transition);
  /* NO backdrop-filter */
}

/* gloss line */
nav::before, section::before,
.gc-card::before, .gc-news-item::before, .gc-challenge::before,
.gc-lb-row::before, .gc-achievement::before, .gc-tile::before,
.gc-currency-row::before, .gc-section::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08) 50%, transparent);
}

/* hover — only transform, no box-shadow change = compositor only */
.gc-card:hover, .gc-news-item:hover,
.gc-challenge:hover, .gc-lb-row:hover, .gc-achievement:hover {
  transform: translateY(-2px);
  border-color: rgba(8,238,254,0.40);
}

/* ── ANIMATED BG — simplified, no pseudo animation ── */
.gc-animated-bg {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(0,15,35,0.94), rgba(0,8,22,0.90));
}
.gc-animated-bg > * { position: relative; z-index: 1; }
/* removed the ::before bg-pan animation entirely — was running on every card */

/* ── HEADER ── */
header, .gc-header {
  width: 100%; min-height: 380px;
  border: 1px solid rgba(8,238,254,0.22);
  border-radius: 8px; position: relative; overflow: hidden;
  background: linear-gradient(135deg,#00080f,#00010a,#020a16);
}

header span, .gc-header-title {
  position: absolute; bottom: 0; right: 10px;
  font-size: clamp(1.2rem,4vw,2rem); font-weight: bold;
  color: var(--gc-text);
  text-shadow: 1px 1px var(--gc-text), -1px 1px var(--gc-crystal), 1px -1px var(--gc-crystal);
  margin: 10px;
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5,h6,p { margin:5px; line-height:1.3; }
h1 {
  font-size:1.4rem; letter-spacing:2px; font-weight:normal;
  text-align:center; border-bottom:1px solid rgba(8,238,254,0.18);
  padding-bottom:5px; color:var(--gc-text);
}
h2 { font-size:1.25rem; font-weight:normal; text-align:center; color:var(--gc-text); }
h4 { font-size:1rem; color:var(--gc-crystal); padding-left:12px; }
a:link    { color:var(--gc-crystal); }
a:visited { color:var(--gc-glimmose); }
a:hover,a:focus { font-style:italic; }

/* ── NAV ── */
.gc-nav { display:flex; flex-direction:column; gap:2px; padding:12px; align-self:flex-start; }
.gc-nav-title {
  text-align:center; font-size:1.1rem; margin:5px 5px 10px 5px;
  letter-spacing:3px; color:var(--gc-text-muted);
  border-bottom:1px solid rgba(8,238,254,0.15); padding-bottom:8px;
}

/* ── BUTTONS — depths texture kept but animation paused by default ── */
nav a, button, .gc-btn {
  display:block; margin:3px; padding:9px 11px;
  border-radius:var(--gc-radius);
  border:1px solid rgba(8,238,254,0.18);
  background:linear-gradient(to right,rgba(0,10,26,0.92),rgba(0,14,32,0.88));
  color:var(--gc-text); text-decoration:none;
  font-family:'MS PGothic','Hiragino Kaku Gothic Pro',sans-serif;
  font-size:inherit; cursor:pointer;
  transition:border-color 0.15s, transform 0.15s;
  position:relative; overflow:hidden; isolation:isolate;
}

.gc-depths {
  position:absolute; inset:-20%; width:140%; height:140%;
  pointer-events:none; z-index:0;
  background-image:url('/storage/images/gamecorner/depths.png');
  background-repeat:repeat; background-size:auto;
  opacity:0; transition:opacity 0.3s ease;
  animation:gc-depths-drift 8s linear infinite paused; /* slowed */
  will-change:transform,opacity;
}

nav a:hover .gc-depths, button:hover .gc-depths, .gc-btn:hover .gc-depths {
  opacity:0.15; animation-play-state:running;
}

@keyframes gc-depths-drift {
  0%   { transform:translate3d(0,0,0); }
  100% { transform:translate3d(14%,-14%,0); }
}

nav a::before, button::before, .gc-btn::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  pointer-events:none; z-index:2;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.07),transparent);
}

nav a > :not(.gc-depths),
button > :not(.gc-depths),
.gc-btn > :not(.gc-depths) { position:relative; z-index:1; }

nav a:hover, button:hover, .gc-btn:hover {
  background:linear-gradient(to right,rgba(0,18,40,0.95),rgba(0,24,50,0.92));
  border-color:rgba(8,238,254,0.45);
  transform:translateY(-1px);
}

.gc-btn-primary {
  background:linear-gradient(135deg,#042856,#00152f);
  border-color:rgba(8,238,254,0.55);
  box-shadow:0 0 14px rgba(8,238,254,0.2);
  color:var(--gc-crystal);
}
.gc-btn-primary:hover { background:linear-gradient(135deg,#063870,#001e40); }

.gc-btn-crystal {
  background:linear-gradient(135deg,#071e26,#0d2e3a);
  border-color:rgba(8,238,254,0.40);
  box-shadow:0 0 12px rgba(8,238,254,0.15);
  color:var(--gc-crystal);
}
.gc-btn-crystal:hover { background:linear-gradient(135deg,#0a2a36,#124050); }

/* ── WALLET ── */
.gc-wallet { display:flex; flex-direction:column; gap:4px; padding:4px; }
.gc-currency-row {
  display:flex; align-items:center; gap:8px; padding:7px 10px; font-size:0.82rem;
}
.gc-currency-amount { margin-left:auto; font-weight:bold; color:var(--gc-text); }

/* ── CARDS ── */
.gc-card-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:8px; margin-top:8px;
}
.gc-card { display:flex; flex-direction:column; cursor:pointer; }
.gc-card-thumb {
  aspect-ratio:16/9; overflow:hidden; background:#000510;
  position:relative; border-radius:var(--gc-radius) var(--gc-radius) 0 0;
  display:flex; align-items:center; justify-content:center;
}
.gc-card-thumb-placeholder { font-size:2.5rem; opacity:0.4; }
.gc-card-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .3s ease; }
.gc-card:hover .gc-card-thumb img,
.gc-card:hover .gc-card-thumb-placeholder { transform:scale(1.05); }
.gc-card-body { padding:10px; display:flex; flex-direction:column; gap:5px; flex:1; }
.gc-card-title { font-size:0.82rem; font-weight:bold; color:var(--gc-text); margin:0; }
.gc-card-meta { font-size:0.64rem; color:var(--gc-text-muted); display:flex; justify-content:space-between; margin:0; }
.gc-last-played { color:var(--gc-text-dim); }
.gc-card-progress-wrap { height:3px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.gc-card-progress-bar { height:100%; background:linear-gradient(90deg,var(--gc-crystal),#59dfff); border-radius:2px; transition:width 0.6s ease; }

/* ── CARD BADGES ── */
.gc-card-badge {
  position:absolute; top:8px; left:8px;
  padding:3px 8px; border-radius:999px; font-size:0.65rem; font-weight:bold;
  background:var(--gc-crystal); color:#00010a;
}
.gc-card-badge.crystal {
  background:linear-gradient(135deg,#042856,#00152f);
  border:1px solid rgba(8,238,254,0.5); color:var(--gc-crystal);
}

/* ── TABS ── */
.gc-tabs { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:6px; }
.gc-tab {
  padding:6px 12px; font-size:0.72rem; letter-spacing:1px;
  border:1px solid rgba(8,238,254,0.15); border-radius:6px;
  background:rgba(0,10,24,0.8); color:var(--gc-text-muted);
  cursor:pointer; transition:border-color 0.15s,color 0.15s; margin:0;
}
.gc-tab:hover { border-color:rgba(8,238,254,0.40); color:var(--gc-text); }
.gc-tab.active { background:rgba(8,238,254,0.08); border-color:var(--gc-crystal); color:var(--gc-text); }
.gc-tab-panel { display:none; }
.gc-tab-panel.active { display:block; }

/* ── FEED FILTER ── */
.gc-feed-filter { display:flex; align-items:center; gap:8px; font-size:0.68rem; color:var(--gc-text-muted); margin-bottom:8px; }
.gc-select {
  background:rgba(0,10,24,0.9); border:1px solid rgba(8,238,254,0.20);
  border-radius:6px; color:var(--gc-text);
  font-family:'MS PGothic',sans-serif; font-size:0.68rem; padding:4px 8px; cursor:pointer;
}

/* ── NEWS ── */
.gc-news-item { display:flex; gap:12px; padding:12px; margin-bottom:6px; }
.gc-news-icon { font-size:1.4rem; flex-shrink:0; margin-top:2px; }
.gc-news-body { flex:1; min-width:0; }
.gc-news-title { font-size:0.82rem; font-weight:bold; color:var(--gc-text); margin:0 0 4px 0; }
.gc-news-desc { font-size:0.7rem; color:var(--gc-text-muted); margin:0 0 6px 0; line-height:1.5; }
.gc-news-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; font-size:0.6rem; color:var(--gc-text-dim); }
.gc-news-tag {
  padding:2px 7px; border-radius:999px;
  background:rgba(8,238,254,0.07); border:1px solid rgba(8,238,254,0.20);
  color:rgba(8,238,254,0.80);
}
.gc-news-tag.crystal { color:var(--gc-crystal); }

/* ── CHALLENGES ── */
.gc-challenge { padding:10px 12px; margin-bottom:6px; display:flex; flex-direction:column; gap:5px; }
.gc-challenge-header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.gc-challenge-title { font-size:0.76rem; color:var(--gc-text); margin:0; line-height:1.4; }
.gc-challenge-reward { font-size:0.72rem; font-weight:bold; color:var(--gc-crystal); white-space:nowrap; }
.glimmose-reward { color:var(--gc-crystal); }
.gc-challenge-bar-wrap { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; }
.gc-challenge-bar { height:100%; background:linear-gradient(90deg,var(--gc-crystal),#59dfff); border-radius:2px; }
.glimmose-bar { background:linear-gradient(90deg,var(--gc-crystal),#a0f0ff); }
.gc-challenge-foot { display:flex; justify-content:space-between; font-size:0.6rem; color:var(--gc-text-dim); }

/* ── LEADERBOARD ── */
.gc-lb-row { display:flex; align-items:center; gap:10px; padding:8px 12px; margin-bottom:4px; }
.gc-lb-rank { font-size:0.68rem; font-weight:bold; color:var(--gc-crystal); width:16px; text-align:center; }
.gc-lb-name { flex:1; font-size:0.76rem; color:var(--gc-text); }
.gc-lb-score { font-size:0.72rem; font-weight:bold; color:var(--gc-crystal); }

/* ── ACHIEVEMENTS ── */
.gc-achievement { display:flex; align-items:center; gap:10px; padding:9px 12px; }
.gc-achievement-icon { font-size:1.4rem; flex-shrink:0; }
.gc-achievement-name { font-size:0.76rem; font-weight:bold; color:var(--gc-text); margin:0 0 2px 0; }
.gc-achievement-desc { font-size:0.62rem; color:var(--gc-text-muted); margin:0; }
.gc-achievement.earned { border-color:rgba(8,238,254,0.25); background:linear-gradient(160deg,rgba(0,18,32,0.94),rgba(0,12,24,0.90)); }
.gc-achievement.locked { opacity:0.40; }

/* ── STAT TILES ── */
.gc-stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:7px; }
.gc-tile { padding:12px 8px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; border-color:rgba(8,238,254,0.15); }
.gc-tile-value { font-size:1.3rem; font-weight:900; color:var(--gc-text); display:block; }
.gc-tile-label { font-size:0.56rem; color:var(--gc-text-dim); letter-spacing:2px; text-transform:uppercase; display:block; }

/* ── MODAL ── */
.gc-modal {
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,1,14,0.80); z-index:9999;
  /* NO backdrop-filter on modal either */
}

/* ── TOPBAR ── */
#ns-topbar, #ns-mobile-menu {
  background:rgba(0,1,14,0.92) !important;
  border-bottom:1px solid rgba(8,238,254,0.10) !important;
  /* removed backdrop-filter */
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:#00010a; }
::-webkit-scrollbar-thumb { background:rgba(8,238,254,0.22); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--gc-crystal); }

/* ── FOOTER ── */
footer { text-align:center; margin-bottom:5vw; font-size:0.8rem; color:var(--gc-text-dim); padding-top:12px; }

/* ── SECTION LABEL ── */
.gc-section-label {
  font-size:0.58rem; letter-spacing:3px; color:var(--gc-text-dim);
  text-transform:uppercase; border-bottom:1px solid rgba(8,238,254,0.12);
  padding-bottom:7px; margin-bottom:10px;
}

/* ── RESPONSIVE ── */
@media (max-width:900px) {
  .small,.large,.half { flex:1 1 100%; }
  button { width:100%; margin:5px 0; }
}
@media (max-width:600px) {
  body.game-corner { padding:6px; }
  .container { margin-top:8px; border-width:3px; padding:4px; }
  header { min-height:100px; }
}