/* Subway Surf: Дианочка — 2012. 960 px по центру, текстура, флоаты, CSS3-кнопки со стеклянным бликом. */
@font-face { font-family: 'Lobster'; font-weight: normal; font-style: normal;
  src: url(../fonts/lobster.woff2) format('woff2'), url(../fonts/lobster.woff) format('woff'); }

html, body { margin: 0; padding: 0; }
body { background: #1b1f3a url(../img/bg.png); color: #333; font: 12px/1.5 Tahoma, Verdana, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; }
img { border: 0; }
a { color: #0b6fb3; }
a:hover { color: #e2306f; }
h1, h2, p, ol, ul { margin: 0; padding: 0; }
.clear { clear: both; }

#topbg { background: url(../img/top.jpg) no-repeat 50% 0; }
#wrapper { position: relative; width: 960px; margin: 0 auto; }

/* ---------- шапка */
#header { position: relative; height: 72px; }
#logo { position: absolute; left: 6px; top: 4px; z-index: 6; }
#logo img { width: 340px; height: auto; display: block; }
#social { position: absolute; right: 96px; top: 30px; height: 22px; }
#social img { margin-left: 8px; vertical-align: top; }

/* ---------- баннер */
#stage { position: relative; height: 460px; border: 5px solid #fff; border-radius: 6px;
  background: #3a4a6a url(../img/stage.jpg) no-repeat 0 0; background-size: cover;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, .6); box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
#chars { position: absolute; left: 0; top: 0; width: 600px; height: 460px; }
#chars .sasha { position: absolute; left: 266px; bottom: -6px; z-index: 2; }
#chars .diana { position: absolute; left: 394px; bottom: -6px; z-index: 3; }
#chars .free { position: absolute; left: 22px; bottom: 6px; width: 132px; height: 132px; z-index: 4; }
#chars .tag { position: absolute; left: 22px; top: 198px; width: 222px; z-index: 5; color: #fff; font: bold 15px/1.35 Tahoma, Arial, sans-serif;
  text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0, 0, 0, .9); }
#chars .tag b { display: block; font: 27px/1.1 'Lobster', Georgia, serif; white-space: nowrap; color: #ffe14a; margin-bottom: 6px;
  text-shadow: 0 2px 0 #b3003f, 0 3px 8px rgba(0, 0, 0, .8); }
#r18 { position: absolute; right: -26px; top: -48px; z-index: 7; }

/* ---------- панель скачивания */
#dl { position: absolute; right: 14px; top: 14px; width: 318px; padding: 14px 16px 12px; z-index: 5;
  background: #fff; background: rgba(255, 255, 255, .93); border: 1px solid #fff; border-radius: 10px;
  -webkit-box-shadow: 0 3px 12px rgba(0, 0, 0, .55), inset 0 -40px 60px rgba(214, 226, 242, .6);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55), inset 0 -40px 60px rgba(214, 226, 242, .6); }
#dl .card { overflow: hidden; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dotted #c3cad8; }
#dl .appicon { float: left; width: 64px; height: 64px; margin: 0 10px 0 -2px; }
#dl h1 { font: bold 17px/1.2 Tahoma, Arial, sans-serif; color: #222; margin-top: 6px; }
#dl .meta { color: #6b7590; font-size: 11px; }
#dl .stars { color: #f5a400; font-size: 13px; letter-spacing: 1px; }
#dl .what { display: none; clear: both; padding-top: 8px; font-size: 12px; color: #333; }
.detect { display: none; margin: 0 0 9px; padding: 5px 8px 5px 26px; position: relative; font-size: 11px; line-height: 1.35;
  background: #fff8c4; border: 1px solid #f0d878; border-radius: 4px; color: #5b4a00; }
.detect:before { content: '!'; position: absolute; left: 6px; top: 50%; margin-top: -8px; width: 15px; height: 15px; line-height: 15px;
  text-align: center; font: bold 11px/15px Arial; color: #fff; background: #f0a800; border-radius: 8px; }
.detect.on { display: block; }
#dl .sub { text-align: center; font-size: 11px; margin: 5px 0 10px; }
#dl .sub a { color: #4c5a78; }

/* глянцевые кнопки 2012: градиент с жёсткой границей посередине (стекло), рамка, тень снизу */
.btn { display: block; position: relative; padding: 9px 12px 9px 58px; min-height: 40px; border-radius: 8px;
  color: #fff; text-decoration: none; text-shadow: 0 -1px 0 rgba(0, 0, 0, .4); cursor: pointer; }
.btn:hover { color: #fff; }
.btn img { position: absolute; left: 14px; top: 50%; margin-top: -16px; }
.btn b { display: block; font: bold 21px/1.15 Arial, Helvetica, sans-serif; letter-spacing: -.3px; }
.btn small { display: block; font: 11px/1.4 Tahoma, Arial, sans-serif; opacity: .92; }
.btn-green { background: #4fae22; border: 1px solid #2e7d0e;
  background-image: -webkit-linear-gradient(top, #9be766 0%, #63c435 49%, #4aa81d 51%, #3d9415 100%);
  background-image: linear-gradient(to bottom, #9be766 0%, #63c435 49%, #4aa81d 51%, #3d9415 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #2a6a0c, 0 5px 10px rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #2a6a0c, 0 5px 10px rgba(0, 0, 0, .35); }
.btn-green:hover { background-image: -webkit-linear-gradient(top, #adf27c 0%, #74d444 49%, #56b826 51%, #46a11b 100%);
  background-image: linear-gradient(to bottom, #adf27c 0%, #74d444 49%, #56b826 51%, #46a11b 100%); }
.btn-blue { background: #2a8ad8; border: 1px solid #1660a3;
  background-image: -webkit-linear-gradient(top, #8fd0ff 0%, #44a3ec 49%, #2a88d6 51%, #1f75c0 100%);
  background-image: linear-gradient(to bottom, #8fd0ff 0%, #44a3ec 49%, #2a88d6 51%, #1f75c0 100%);
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #145394, 0 5px 10px rgba(0, 0, 0, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #145394, 0 5px 10px rgba(0, 0, 0, .35); }
.btn-blue:hover { background-image: -webkit-linear-gradient(top, #a6dbff 0%, #58b2f2 49%, #3696e0 51%, #2a82cc 100%);
  background-image: linear-gradient(to bottom, #a6dbff 0%, #58b2f2 49%, #3696e0 51%, #2a82cc 100%); }
.btn:active { top: 2px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #2a6a0c, 0 2px 5px rgba(0, 0, 0, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 #2a6a0c, 0 2px 5px rgba(0, 0, 0, .3); }
.btn.small { padding: 6px 10px 6px 50px; min-height: 28px; margin-top: 12px; }
.btn.small b { font-size: 15px; }
.btn.small img { left: 9px; }
/* «твоя» кнопка: мигает подсветка + стрелка-наклейка */
.btn.hot { -webkit-animation: hot 1.4s ease-in-out infinite; animation: hot 1.4s ease-in-out infinite; }
.btn.hot:after { content: 'тебе сюда! \25BA'; position: absolute; right: 100%; top: 50%; margin: -15px 22px 0 0; white-space: nowrap;
  font: 22px/30px 'Lobster', Georgia, serif; color: #ffe14a; text-shadow: 0 2px 0 #b3003f, 0 2px 6px rgba(0, 0, 0, .9);
  -webkit-animation: poke .7s ease-in-out infinite alternate; animation: poke .7s ease-in-out infinite alternate; }
@-webkit-keyframes hot { 50% { -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 rgba(0,0,0,.3), 0 0 16px 4px #ffe14a; } }
@keyframes hot { 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 rgba(0,0,0,.3), 0 0 16px 4px #ffe14a; } }
@-webkit-keyframes poke { to { -webkit-transform: translateX(-8px); } }
@keyframes poke { to { transform: translateX(-8px); } }

#qr { overflow: hidden; margin-top: 4px; padding-top: 8px; border-top: 1px dotted #c3cad8; font-size: 11px; color: #555; }
#qr img { float: left; margin-right: 10px; border: 1px solid #ddd; }
#qr span { display: block; padding-top: 10px; }
html.android #qr, html.android_x86 #qr, html.ios #qr { display: none; }

/* ---------- три бокса */
#boxes { overflow: hidden; margin: 28px 0 0; }
.box { float: left; margin-left: 15px; background: #fff; border-radius: 8px; border: 1px solid #fff;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .5); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
.box-shots { width: 446px; margin-left: 0; }
.box-ios { width: 244px; }
.box-top { width: 232px; }
.box h2 { height: 40px; padding: 0 14px; border-radius: 7px 7px 0 0; color: #fff; font: 25px/40px 'Lobster', Georgia, serif;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .25); white-space: nowrap; overflow: hidden; }
.box-shots h2 { background: #e2457f; background-image: -webkit-linear-gradient(top, #ff8cba, #e2457f 55%, #c8295f);
  background-image: linear-gradient(to bottom, #ff8cba, #e2457f 55%, #c8295f); border-bottom: 1px solid #9c1a48; }
.box-ios h2 { background: #2a8ad8; background-image: -webkit-linear-gradient(top, #8fd0ff, #3a98e2 55%, #1f75c0);
  background-image: linear-gradient(to bottom, #8fd0ff, #3a98e2 55%, #1f75c0); border-bottom: 1px solid #145394; }
.box-top h2 { background: #f39a12; background-image: -webkit-linear-gradient(top, #ffd36b, #f6a51c 55%, #dc7f05);
  background-image: linear-gradient(to bottom, #ffd36b, #f6a51c 55%, #dc7f05); border-bottom: 1px solid #a65e00; }
.box .in { padding: 12px 14px 14px; background: #fff; border-radius: 0 0 8px 8px;
  background-image: -webkit-linear-gradient(top, #fff 60%, #eef2f8); background-image: linear-gradient(to bottom, #fff 60%, #eef2f8); }
.box.lit { -webkit-box-shadow: 0 0 0 4px #ffe14a, 0 4px 16px rgba(0, 0, 0, .6); box-shadow: 0 0 0 4px #ffe14a, 0 4px 16px rgba(0, 0, 0, .6); }

/* карусель */
.car { position: relative; height: 204px; padding: 0 26px; }
.car-win { position: relative; overflow: hidden; height: 204px; }
.car-win ul { position: absolute; left: 0; top: 0; width: 2000px; list-style: none;
  -webkit-transition: left .45s ease; transition: left .45s ease; }
.car-win li { float: left; width: 114px; margin-right: 6px; }
.car-win a { display: block; width: 108px; height: 192px; border: 3px solid #fff; background: #ccc;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .5); box-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.car-win a:hover { border-color: #ffe14a; }
.car-win img { display: block; width: 108px; height: 192px; }
.car-btn { position: absolute; top: 50%; margin-top: -17px; width: 22px; height: 34px; z-index: 2; border-radius: 5px;
  color: #fff; text-decoration: none; text-align: center; font: bold 30px/30px Arial, sans-serif;
  background: #888; background-image: -webkit-linear-gradient(top, #b9c2d3, #7c879c); background-image: linear-gradient(to bottom, #b9c2d3, #7c879c);
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.car-btn:hover { color: #fff; background-image: -webkit-linear-gradient(top, #ff8cba, #e2457f); background-image: linear-gradient(to bottom, #ff8cba, #e2457f); }
.car-prev { left: 0; }
.car-next { right: 0; }
.car-cap { text-align: center; color: #6b7590; font-size: 11px; margin-top: 6px; }

/* iPhone */
.steps { list-style: none; }
.steps li { position: relative; min-height: 52px; padding: 2px 0 6px 62px; font-size: 12px; line-height: 1.4; }
.steps li img { position: absolute; left: 0; top: 0; }
.steps li b:first-child { color: #2a8ad8; }
.box-ios .note { font-size: 11px; color: #6b7590; padding-top: 6px; border-top: 1px dotted #c3cad8; }
.box-ios .warn { display: none; margin: 0 0 8px; padding: 5px 8px; font-size: 11px; background: #ffe6ef; border: 1px solid #f3a5c0; border-radius: 4px; color: #8a0d3a; }
html.ios_other .box-ios .warn { display: block; }

/* рейтинг */
.box-top .trophy { float: left; margin: -2px 8px 0 -6px; }
.box-top p { font-size: 12px; line-height: 1.45; }

/* ---------- подвал */
#footer { clear: both; padding: 22px 0 30px; text-align: center; color: #8d94bd; font-size: 11px; }
#footer p { margin-bottom: 3px; }
#footer .copy { color: #6c7299; }

/* ---------- лайтбокс */
#lb { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 50; background: #000; background: rgba(0, 0, 0, .82); text-align: center; }
#lb.on { display: block; }
#lbBox { position: relative; display: inline-block; margin-top: 2vh; padding: 8px; background: #fff; border-radius: 6px;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .8); box-shadow: 0 0 30px rgba(0, 0, 0, .8); }
#lbImg { display: block; height: 600px; height: 88vh; max-height: 720px; width: auto; }
#lbCap { padding: 6px 0 0; font-size: 12px; color: #333; }
#lbClose { position: absolute; right: -14px; top: -14px; width: 30px; height: 30px; border-radius: 15px; border: 2px solid #fff;
  background: #222; color: #fff; font: bold 22px/28px Arial; text-decoration: none; -webkit-box-shadow: 0 2px 6px #000; box-shadow: 0 2px 6px #000; }
.lb-nav { position: absolute; top: 50%; margin-top: -30px; width: 40px; height: 60px; color: #fff; text-decoration: none;
  font: bold 54px/54px Arial; text-shadow: 0 2px 6px #000; }
#lbPrev { left: -50px; }
#lbNext { right: -50px; }

/* ---------- узкие экраны (в 2012 это была бы «мобильная версия» сайта) */
@media (max-width: 980px) {
  #wrapper { width: auto; max-width: 640px; padding: 0 8px; }
  #header { height: auto; text-align: center; }
  #logo { position: static; display: inline-block; }
  #logo img { width: 220px; margin: 2px auto -58px; position: relative; z-index: 6; }
  #social { display: none; }
  #stage { height: auto; background-size: auto 250px; background-position: 30% 0; background-color: #3a4a6a; padding-top: 0; }
  #chars { position: relative; width: auto; height: 236px; overflow: hidden; }
  #chars .sasha { left: 50%; margin-left: -112px; height: 196px; width: auto; bottom: -4px; }
  #chars .diana { left: 50%; margin-left: -30px; height: 232px; width: auto; bottom: -4px; }
  #chars .free { width: 80px; height: 80px; left: 4px; right: auto; bottom: 8px; }
  #chars .tag { display: none; }
  #dl .what { display: block; }
  #r18 { right: -6px; top: -24px; width: 64px; height: 64px; }
  #dl { position: relative; right: auto; top: auto; width: auto; margin: 0; border-radius: 0 0 4px 4px; border: 0; }
  .btn.hot:after { display: none; }
  #dl { padding: 10px 12px; }
  #dl .appicon { width: 52px; height: 52px; }
  #dl h1 { margin-top: 3px; }
  #dl .card { margin-bottom: 6px; padding-bottom: 6px; }
  #dl .what { padding-top: 6px; }
  #boxes { margin-top: 16px; overflow: visible; }
  .box, .box-shots, .box-ios, .box-top { float: none; width: auto; margin: 0 0 14px; }
  html.ios #boxes .box-ios { margin-bottom: 14px; }
  .car { height: auto; }
  #lbBox { display: block; width: 84%; margin: 3% auto 0; }
  #lbImg { width: 100%; height: auto; max-height: none; }
  #lbPrev { left: 4px; } #lbNext { right: 4px; }
}
@media (max-width: 380px) {
  .btn b { font-size: 18px; }
  #chars { height: 200px; }
  #chars .sasha { height: 166px; margin-left: -96px; }
  #chars .diana { height: 196px; margin-left: -26px; }
  #stage { background-size: auto 214px; }
}