/* ПЕРЕОЦЕНЕНА ИЛИ ЗАСЛУЖЕННО — фирменная тема */
:root{
  --bg:#0a0a14; --panel:rgba(18,18,30,0.96); --line:rgba(120,110,200,0.4);
  --txt:#e8e8f2; --mut:#9a95b0; --acc:#8a7cf0; --over:#ff5470; --fair:#3fca6a;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg); color:var(--txt); font-family:'Exo 2',sans-serif; min-height:100vh;
  background-image:radial-gradient(ellipse 60% 40% at 22% 0%, rgba(120,110,200,0.12), transparent),
    radial-gradient(ellipse 50% 35% at 82% 12%, rgba(255,84,112,0.07), transparent);}
.panel{position:relative; max-width:760px; margin:34px auto 18px; padding:26px 30px 22px;
  background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 0 30px rgba(120,110,200,0.16); text-align:center;}
.panel h1{font-family:'Orbitron',sans-serif; font-size:clamp(1.2rem,4vw,1.7rem); letter-spacing:2px;
  background:linear-gradient(135deg,#8a7cf0,#ff5470); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; margin-bottom:10px;}
.ov-sub{color:var(--mut); max-width:640px; margin:0 auto; line-height:1.55; font-size:0.93rem;}
.ov-btn{cursor:pointer; border:1px solid rgba(255,255,255,0.22); border-radius:12px; padding:11px 20px;
  background:rgba(18,18,30,0.9); color:#e8e8f2; font-family:'Orbitron',sans-serif; font-weight:700;
  font-size:0.82rem; letter-spacing:1px; transition:.2s;}
.ov-btn:hover{border-color:var(--acc); box-shadow:0 0 12px rgba(120,110,200,0.4);}
.ov-btn-primary{background:linear-gradient(135deg,#5a4cc0,#8a7cf0); border-color:transparent;}

/* выбор годов */
.year-tools{display:flex; gap:10px; justify-content:center; margin:14px 0 10px;}
.year-tools .ov-btn{padding:7px 14px; font-size:0.72rem;}
.year-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px; margin:6px 0 16px;}
.yr{display:flex; align-items:center; gap:6px; justify-content:center; padding:8px 6px; border-radius:10px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); cursor:pointer; font-size:0.9rem;}
.yr input{accent-color:var(--acc); cursor:pointer;}
.ov-err{color:#e07a7a; min-height:20px; font-size:0.9rem;}

/* голосование */
.vote-stage{max-width:440px; margin:0 auto; padding:0 14px;}
.vote-top{display:flex; justify-content:space-between; color:var(--mut); font-size:0.85rem; margin:6px 0;}
.vote-bar{height:5px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; margin-bottom:14px;}
.vote-bar span{display:block; height:100%; background:linear-gradient(90deg,#5a4cc0,#8a7cf0); transition:width .3s;}
.card-stack{position:relative; height:540px; touch-action:none;}
.ov-card{position:absolute; inset:0; cursor:grab; touch-action:none; user-select:none;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), opacity .28s; will-change:transform;}
.ov-card:active{cursor:grabbing;}
.ov-card.leaving{pointer-events:none; z-index:20;} /* доигрывает поверх новой */
/* тост с процентом предыдущей игры — над колодой, свайпам не мешает */
.ov-toast{
  min-height:34px; display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 8px; padding:6px 12px; border-radius:10px; font-size:0.86rem;
  background:rgba(18,18,30,0.92); border:1px solid rgba(255,255,255,0.12);
  color:#cfc9e6; opacity:0; transform:translateY(-4px);
  transition:opacity .18s, transform .18s; pointer-events:none;
}
.ov-toast.show{opacity:1; transform:translateY(0);}
.ovt-split{display:inline-flex; width:70px; height:8px; border-radius:4px; overflow:hidden; margin-left:6px;}
.ovt-o{background:var(--over);} .ovt-f{background:var(--fair);}
.ov-cover{position:relative; aspect-ratio:2/3; max-height:460px; margin:0 auto; border-radius:16px; overflow:hidden;
  background:#000; box-shadow:0 16px 40px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.1);}
.ov-img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; -webkit-user-drag:none;}
.ov-img.landscape{object-fit:contain; background:#000;} /* горизонтальные — с полосами */
.ov-noimg{display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:4rem; background:#191322;}
.ov-badge{position:absolute; top:16px; padding:8px 14px; border-radius:10px; font-family:'Orbitron',sans-serif;
  font-weight:700; font-size:0.82rem; letter-spacing:1px; opacity:0; transition:opacity .2s;}
.ov-badge-over{left:14px; background:rgba(255,84,112,0.92); transform:rotate(-8deg);}
.ov-badge-fair{right:14px; background:rgba(63,202,106,0.92); color:#062b12; transform:rotate(8deg);}
.ov-card.tilt-over .ov-badge-over{opacity:1;}
.ov-card.tilt-fair .ov-badge-fair{opacity:1;}
.ov-badge-skip{bottom:14px; top:auto; left:50%; transform:translateX(-50%);
  background:rgba(122,122,146,0.92); color:#fff;}
.ov-card.tilt-skip .ov-badge-skip{opacity:1;}
#btnSkip{max-width:130px; border-color:rgba(160,160,180,0.4); font-size:0.72rem; opacity:0.85;}
#btnSkip:hover{box-shadow:0 0 10px rgba(160,160,180,0.4);}
.ov-meta{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:12px 4px 0;}
.ov-name{font-weight:700; font-size:1.05rem; line-height:1.2;}
.ov-year{color:var(--mut); font-size:0.9rem;}
.vote-actions{display:flex; gap:12px; justify-content:center; margin-top:16px;}
.vote-actions .ov-btn{flex:1; max-width:180px;}
#btnOver{border-color:rgba(255,84,112,0.5);} #btnOver:hover{box-shadow:0 0 12px rgba(255,84,112,0.5);}
#btnFair{border-color:rgba(63,202,106,0.5);} #btnFair:hover{box-shadow:0 0 12px rgba(63,202,106,0.5);}

/* итог */
.res-summary{text-align:center; color:var(--txt); font-size:1.05rem; margin:8px 0 18px;}
.res-cols{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.res-cols h3{font-family:'Orbitron',sans-serif; font-size:0.85rem; letter-spacing:1px; margin-bottom:10px;}
#resOver h3{color:var(--over);} #resFair h3{color:var(--fair);}
.res-chip{display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; margin-bottom:6px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); font-size:0.85rem;}
.res-chip img{width:26px; height:38px; object-fit:cover; border-radius:4px; flex-shrink:0;}
.chip-over{border-left:3px solid var(--over);} .chip-fair{border-left:3px solid var(--fair);}
.res-empty{color:var(--mut);}
.res-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:20px;}

/* общие результаты */
.global-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; margin-top:16px;}
.g-card{background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.1); border-radius:12px; overflow:hidden;}
.g-cover{aspect-ratio:2/3; background:#191322; display:flex; align-items:center; justify-content:center; font-size:2.4rem;}
.g-cover img{width:100%; height:100%; object-fit:cover;}
.g-name{padding:8px 10px 4px; font-size:0.85rem; font-weight:600; line-height:1.25;}
.g-year{color:var(--mut); font-weight:400; font-size:0.78rem;}
.g-split{display:flex; height:22px; margin:6px 10px; border-radius:6px; overflow:hidden; font-size:0.7rem; font-weight:700;}
.g-o{background:var(--over); color:#fff; display:flex; align-items:center; justify-content:flex-start; padding-left:6px; min-width:0;}
.g-f{background:var(--fair); color:#062b12; display:flex; align-items:center; justify-content:flex-end; padding-right:6px; min-width:0;}
.g-votes{color:var(--mut); font-size:0.72rem; padding:0 10px 8px;}
.g-early{color:var(--mut); font-size:0.75rem; padding:6px 10px 10px; font-style:italic;}
.ov-loading{grid-column:1/-1; text-align:center; color:var(--mut); padding:30px;}

.global-cta{text-align:center; margin:26px 0 10px;}
.ov-seo{max-width:720px; margin:32px auto 0; color:var(--mut); font-size:0.85rem; line-height:1.6; text-align:center; padding:0 16px;}
@media (max-width:640px){.panel{margin:20px 10px 14px; padding:20px 16px;} .card-stack{height:480px;} .ov-cover{max-height:400px;}}
/* итоговая карточка-канвас: на экране ровно то, что скачивается */
.res-canvas{width:100%; height:auto; border-radius:14px; border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 14px 40px rgba(0,0,0,0.5); display:block;}
#scrResult{max-width:760px;}