/* ============================================================
   GAME.ANDROZON — V6 modern 3D theme
   Подключается после style.css и аккуратно перекрывает оформление.
   ============================================================ */
:root{
  --glass: rgba(255,255,255,0.06);
  --glass-2: rgba(255,255,255,0.1);
  --line-soft: rgba(255,255,255,0.12);
  --shadow-deep: 0 30px 70px -24px rgba(0,0,0,0.85);
  --shadow-card: 0 18px 40px -18px rgba(0,0,0,0.7);
}

html{ scroll-behavior:smooth; }
body{
  background:
    radial-gradient(900px 620px at 8% -12%, rgba(61,239,255,0.22), transparent 60%),
    radial-gradient(820px 640px at 98% 0%, rgba(255,62,133,0.2), transparent 58%),
    radial-gradient(760px 560px at 50% 108%, rgba(198,255,77,0.12), transparent 58%),
    linear-gradient(180deg,#150F30 0%,#120C29 55%,#0E0920 100%);
  background-attachment:fixed;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%, #000 10%, transparent 75%);
  opacity:0.55;
}

/* ---- header ---- */
header.top{
  position:sticky; top:0; z-index:40;
  padding:14px 22px; margin:0 auto;
  background:rgba(15,10,38,0.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  box-shadow:0 12px 30px -18px rgba(0,0,0,0.9);
}
.logo{ letter-spacing:0.5px; }
.logo .dot{ animation:logoPulse 2.4s ease-in-out infinite; }
@keyframes logoPulse{ 0%,100%{ box-shadow:0 0 10px var(--lime); transform:scale(1);} 50%{ box-shadow:0 0 22px var(--lime); transform:scale(1.15);} }
.main-nav a{ border-width:1px; }
.main-nav a:hover{ background:rgba(255,255,255,0.05); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.main-nav a.active{
  background:linear-gradient(135deg,rgba(61,239,255,0.22),rgba(179,61,255,0.18));
  border-color:rgba(61,239,255,0.65);
  color:#D9FBFF;
  box-shadow:0 0 18px -2px rgba(61,239,255,0.45), inset 0 1px 0 rgba(255,255,255,0.18);
}
.status-pill,.lang-switch,.user-chip{
  background:rgba(255,255,255,0.045);
  border-color:var(--line-soft);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07);
}
.user-chip .avatar{ box-shadow:0 0 0 2px rgba(255,255,255,0.12); }

/* ---- hero ---- */
.hero{ padding:54px 0 64px; }
.hero h1{
  font-size:clamp(38px,5.4vw,64px);
  letter-spacing:-1px;
  text-shadow:0 20px 45px rgba(0,0,0,0.45);
}
.hero h1 span{ filter:drop-shadow(0 0 24px rgba(61,239,255,0.35)); }
.hero p{ font-size:18px; }
.hero .cta-row .btn{ min-width:170px; }

.stage{ position:relative; }
.stage::before{
  content:""; position:absolute; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle,rgba(61,239,255,0.18),transparent 62%);
  filter:blur(14px);
}
.cube{ transform-style:preserve-3d; filter:drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
.face{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -30px 50px rgba(0,0,0,0.18); }

/* ---- section heads ---- */
.section-head{
  border-left:0; padding:0; margin:44px 0 24px;
  align-items:flex-end; gap:16px;
}
.section-head h2{
  font-size:clamp(24px,3vw,32px);
  display:flex; align-items:center; gap:12px;
}
.section-head h2::before{
  content:""; width:6px; height:1.05em; border-radius:99px;
  background:linear-gradient(180deg,var(--cyan),var(--purple));
  box-shadow:0 0 16px rgba(61,239,255,0.6);
}
.section-head .hint{
  padding:6px 12px; border-radius:99px;
  background:rgba(255,255,255,0.05); border:1px solid var(--line-soft);
}

/* ---- 3D cards ---- */
.cat-tile, .game-card{
  --mx:30%; --my:15%;
  background:linear-gradient(160deg,rgba(46,36,105,0.92),rgba(22,15,54,0.96));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.08);
  transform-style:preserve-3d;
  will-change:transform;
}
.cat-tile::before, .game-card::before{
  background:
    radial-gradient(420px 320px at var(--mx) var(--my), color-mix(in srgb, var(--glow,var(--cyan)) 30%, transparent), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,0.05),transparent 40%);
  opacity:0.9;
  transition:opacity .25s;
}
.cat-tile::after, .game-card::after{
  height:1px; top:0; left:0; right:0;
  background:linear-gradient(90deg,transparent, color-mix(in srgb,var(--glow,var(--cyan)) 75%, transparent), transparent);
  opacity:0.9;
}
.cat-tile:hover, .game-card:hover{
  border-color:color-mix(in srgb,var(--glow,var(--cyan)) 55%, transparent);
  box-shadow:
    0 34px 60px -24px rgba(0,0,0,0.9),
    0 0 0 1px color-mix(in srgb,var(--glow,var(--cyan)) 35%, transparent),
    0 0 44px -12px color-mix(in srgb,var(--glow,var(--cyan)) 50%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
.cat-tile .icon, .game-card .icon{
  filter:drop-shadow(0 10px 18px rgba(0,0,0,0.45));
  transform:translateZ(30px);
}
.cat-tile h3, .game-card h3{ text-shadow:0 2px 12px rgba(0,0,0,0.35); }
.cat-tile .arrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:99px;
  background:color-mix(in srgb,var(--glow,var(--cyan)) 12%, transparent);
  border:1px solid color-mix(in srgb,var(--glow,var(--cyan)) 32%, transparent);
  font-weight:700;
}
.game-card .card-actions{ transform:translateZ(18px); }
.game-card .best{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px; border-radius:99px;
  background:rgba(255,201,61,0.1); border:1px solid rgba(255,201,61,0.28);
  width:max-content;
}
.cat-tile{ min-height:250px; }

/* ---- buttons: pressed 3D ---- */
.btn{
  position:relative;
  border-radius:16px;
  transform-style:preserve-3d;
  transition:transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary{
  background:linear-gradient(135deg,#FF3E85 0%,#FF5E63 55%,#FF7A3D 100%);
  box-shadow:
    0 8px 0 rgba(140,20,62,0.85),
    0 18px 34px -12px rgba(255,62,133,0.6),
    inset 0 1px 0 rgba(255,255,255,0.35);
  text-shadow:0 1px 0 rgba(0,0,0,0.25);
}
.btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:
    0 10px 0 rgba(140,20,62,0.85),
    0 24px 40px -12px rgba(255,62,133,0.7),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:active{ transform:translateY(4px); box-shadow:0 3px 0 rgba(140,20,62,0.85), 0 8px 18px -8px rgba(255,62,133,0.6); }
.btn-ghost{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-ghost:hover{ background:rgba(61,239,255,0.08); transform:translateY(-1px); }

/* ---- connection / panels ---- */
.panel{
  background:linear-gradient(160deg,rgba(45,35,102,0.8),rgba(20,14,50,0.92));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.08);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.conn-box{
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(255,255,255,0.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -20px 40px rgba(0,0,0,0.18);
}
.code-display{
  text-shadow:0 0 22px rgba(198,255,77,0.55);
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.06), inset 0 -18px 30px rgba(0,0,0,0.35);
}
input[type=text],input[type=password],.g-input{
  background:rgba(0,0,0,0.28);
  border-color:rgba(255,255,255,0.14);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.35);
  transition:border-color .18s, box-shadow .18s;
}
input[type=text]:focus,input[type=password]:focus,.g-input:focus{
  border-color:var(--cyan);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.35), 0 0 0 3px rgba(61,239,255,0.18);
  outline:none;
}

/* ---- overlay / game window ---- */
.overlay{ background:rgba(7,4,20,0.86); }
.overlay.active{ animation:overlayIn .2s ease; }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }
.game-window{
  background:linear-gradient(160deg,rgba(48,37,110,0.97),rgba(18,13,46,0.99));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.95),
    0 0 0 1px rgba(61,239,255,0.12),
    0 0 70px -24px rgba(61,239,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.1);
  animation:windowIn .32s cubic-bezier(.2,.9,.3,1.25);
}
@keyframes windowIn{ from{ opacity:0; transform:translateY(18px) scale(.97);} to{ opacity:1; transform:none;} }
.close-btn{ backdrop-filter:blur(6px); }
.close-btn:hover{ box-shadow:0 0 22px rgba(255,62,133,0.6); transform:rotate(90deg); transition:transform .2s, box-shadow .2s; }
.game-title{
  color:#fff;
  text-shadow:0 4px 18px rgba(0,0,0,0.45);
}

/* ---- shared game blocks ---- */
.g-status{
  background:rgba(0,0,0,0.26);
  border:1px solid rgba(255,255,255,0.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
.g-status.turn{
  color:#EAFFB8;
  background:rgba(198,255,77,0.1);
  border-color:rgba(198,255,77,0.35);
  box-shadow:0 0 24px -8px rgba(198,255,77,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
}
.g-cell{
  background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(0,0,0,0.28));
  border-color:rgba(255,255,255,0.14);
  box-shadow:0 6px 0 rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.14);
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.g-cell:hover{ transform:translateY(-2px); border-color:rgba(61,239,255,0.6); box-shadow:0 8px 0 rgba(0,0,0,0.32), 0 0 22px -6px rgba(61,239,255,0.6); }
.g-cell:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,0.32); }
.g-cell.x{ text-shadow:0 0 22px rgba(61,239,255,0.85); }
.g-cell.o{ text-shadow:0 0 22px rgba(255,62,133,0.85); }
.g-board{ filter:drop-shadow(0 18px 26px rgba(0,0,0,0.45)); }
.g-cell-sm{
  background:linear-gradient(160deg,rgba(61,239,255,0.10),rgba(0,0,0,0.28));
  border-color:rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.08);
  transition:transform .1s, background .15s;
}
.g-cell-sm.enemy:hover{ transform:scale(1.06); box-shadow:0 0 14px rgba(255,62,133,0.55); }
.g-opt,.cap-opt{
  background:linear-gradient(160deg,rgba(61,239,255,0.07),rgba(179,61,255,0.07));
  border-color:rgba(255,255,255,0.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 8px 18px -12px rgba(0,0,0,0.8);
  transition:transform .14s, border-color .14s, box-shadow .14s;
}
.g-opt:hover,.cap-opt:hover:not(:disabled){ transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(0,0,0,0.85), 0 0 18px -8px rgba(61,239,255,0.6); }
.g-opt.correct,.cap-opt.correct{ box-shadow:0 0 26px -6px rgba(198,255,77,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }
.g-opt.wrong,.cap-opt.wrong{ box-shadow:0 0 26px -6px rgba(255,62,133,0.55), inset 0 1px 0 rgba(255,255,255,0.25); }

/* magic 15 / fifteen tiles */
.magic-cell,.fifteen-tile,.magic-num{
  box-shadow:0 8px 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
  transition:transform .12s, box-shadow .12s;
}
.magic-cell:hover,.fifteen-tile:hover,.magic-num:hover{ transform:translateY(-3px); }
.magic-cell:active,.fifteen-tile:active,.magic-num:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,0.3); }
.g-reactzone{
  background:linear-gradient(160deg,rgba(255,62,133,0.24),rgba(179,61,255,0.14));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:inset 0 2px 12px rgba(0,0,0,0.35), 0 20px 40px -20px rgba(0,0,0,0.8);
  transition:background .08s, color .08s, box-shadow .08s;
}
.g-reactzone.go{
  background:linear-gradient(160deg,#D7FF6B,#9BFF3D);
  box-shadow:0 0 60px rgba(198,255,77,0.7), inset 0 2px 0 rgba(255,255,255,0.6);
}

/* stats */
.stats-guest-note{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:18px; padding:14px 18px; border-radius:16px;
  background:rgba(255,201,61,0.09); border:1px solid rgba(255,201,61,0.3);
  color:var(--text-dim); font-size:14px; line-height:1.5;
}
.stats-guest-note .btn{ width:auto; padding:10px 16px; font-size:14px; }
.stats-kpi,.stats-row{
  background:linear-gradient(160deg,rgba(48,37,110,0.75),rgba(22,15,54,0.9));
  border:1px solid rgba(255,255,255,0.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 14px 30px -20px rgba(0,0,0,0.9);
}
.stats-kpi b{ text-shadow:0 0 24px rgba(198,255,77,0.35); }
.stats-row:hover{ transform:translateX(4px); transition:transform .15s, border-color .15s; box-shadow:0 18px 34px -20px rgba(0,0,0,0.9), 0 0 22px -10px rgba(61,239,255,0.5); }
.profile-stats .row-item{ background:rgba(0,0,0,0.26); border:1px solid rgba(255,255,255,0.07); }

/* auth card */
.auth-card{
  background:linear-gradient(160deg,rgba(48,37,110,0.98),rgba(18,13,46,0.99));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 60px 120px -30px rgba(0,0,0,0.95), 0 0 60px -20px rgba(179,61,255,0.5);
  animation:windowIn .3s cubic-bezier(.2,.9,.3,1.25);
}

/* new trainer + city bits */
.vt-level,.vt-opt{ box-shadow:inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 20px -16px rgba(0,0,0,0.9); }
.vt-chip{ box-shadow:0 4px 0 rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.35); }
.vt-chip:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,0.28); }
.city-error{ box-shadow:0 0 26px -8px rgba(255,62,133,0.55); }
.city-letter-badge{ box-shadow:0 8px 0 rgba(0,0,0,0.25), 0 0 30px rgba(255,201,61,0.4); }

.footer-reset{
  display:inline-block; margin-left:8px; padding:0 6px;
  color:var(--text-dim); opacity:.55; font-size:15px; line-height:1;
  border-radius:6px; transition:opacity .15s, color .15s;
}
.footer-reset:hover{ opacity:1; color:var(--cyan); }

/* scrollbars */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:rgba(0,0,0,0.2); }
*::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(61,239,255,0.45),rgba(179,61,255,0.45)); border-radius:99px; border:2px solid rgba(0,0,0,0.3); }
*::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg,rgba(61,239,255,0.7),rgba(179,61,255,0.7)); }

/* ---- responsive ---- */
@media (max-width:760px){
  header.top{ position:static; padding:12px 14px; }
  .hero{ padding:30px 0 40px; }
  .hero p{ font-size:16px; }
  .cat-tile{ min-height:220px; padding:26px 22px; }
  .game-window{ padding:22px 18px; border-radius:20px; }
  .section-head{ margin-top:32px; }
  .section-head .hint{ display:none; }
}
@media (max-width:520px){
  .btn{ width:100%; }
  .hero .cta-row .btn{ width:auto; flex:1; min-width:140px; }
  .game-card .card-actions{ flex-direction:column; }
  .g-cell{ font-size:32px; border-radius:12px; }
  .game-window{ max-height:94vh; }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
  .cat-tile:hover,.game-card:hover{ transform:none !important; }
}