*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#111;overflow:hidden;font-family:Georgia,serif}
body{display:grid;place-items:center;height:100vh;height:100dvh}
.stage{position:relative;width:min(100vw,calc(100vh * 1.7927));width:min(100vw,calc(100dvh * 1.7927));aspect-ratio:1280/714;user-select:none}
.stage img{position:absolute;width:100%;height:100%;display:block}
#bg{inset:0}
#compass{
  left:17.6%;
  top:47.9%;
  width:11.3%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  transform:translate(-50%,-50%) rotate(0deg);
  transform-origin:50% 50%;
  pointer-events:none;
  z-index:2;
}
#compass{animation:compassSway 2.2s ease-in-out infinite}
@keyframes compassSway{
  0%,100%{transform:translate(-50%,-50%) rotate(-2.5deg)}
  50%{transform:translate(-50%,-50%) rotate(2.5deg)}
}
canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.badge{position:absolute;pointer-events:none;color:#eee;text-align:center;font-weight:700;text-shadow:0 2px 2px #000,0 0 3px #000;background:linear-gradient(#777,#333 48%,#666);border:3px solid #161616;outline:1px solid rgba(245,245,245,.75);box-shadow:0 3px 8px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.25);letter-spacing:1px}
.score-display{
  position:absolute;
  left:82.7%;
  top:48.5%;
  width:11.8%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  pointer-events:none;
  color:#f2ece0;
  text-align:center;
  font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
  letter-spacing:1px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.2;
}
.score-label{
  font-size:clamp(11px,1.05vw,15px);
  letter-spacing:1.5px;
}
.score-value{
  font-size:clamp(20px,2.4vw,32px);
  font-weight:700;
}

.badge:before,.badge:after{content:"";position:absolute;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:#777;border:1px solid #111;box-shadow:inset 0 1px 1px rgba(255,255,255,.45)}
.badge:before{left:5px}.badge:after{right:5px}

.wind-panel{
  position:absolute;
  left:30.2%;
  top:80.1%;
  width:33%;
  height:15.9%;
  padding:4px 10px;
  color:#111;
  text-align:center;
  pointer-events:none;
  z-index:3;
  text-shadow:none;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  overflow:hidden;
}
.wind-label{
  font-size:clamp(8px,.75vw,11px);
  font-weight:700;
  letter-spacing:1.2px;
  margin-bottom:2px;
}
.wind-name{
  font-size:clamp(11px,1.05vw,15px);
  font-weight:700;
  line-height:1.12;
  margin-bottom:3px;
}
.wind-arrow{
  display:inline-block;
  margin-left:6px;
  font-size:1.1em;
  transform-origin:50% 55%;
  opacity:.85;
}
.wind-arrow.calm{opacity:0}
.wind-arrow.gust{animation:windArrowPulse 1.1s ease-in-out infinite}
@keyframes windArrowPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}
.wind-description{
  width:100%;
  max-width:98%;
  font-size:clamp(8px,.72vw,10.5px);
  line-height:1.22;
  font-weight:600;
}
@media (max-aspect-ratio: 1.35/1){
  .wind-panel{left:30.2%;width:33%;top:80.1%;}
}

.intro-overlay{
  position:absolute;
  inset:0;
  z-index:20;
  background:#06071b;
  overflow:hidden;
  opacity:1;
  pointer-events:auto;
  transition:opacity .7s ease;
}
.intro-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
#introGif{
  position:absolute;
  left:33.17%;
  top:32.62%;
  width:33.61%;
  height:32.75%;
  object-fit:cover;
  pointer-events:none;
}
.intro-start{
  position:absolute;
  left:61.1%;
  top:82.85%;
  width:9.2%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  pointer-events:auto;
}
.intro-start:hover{filter:brightness(1.2)}
.intro-start:active{transform:translate(-50%,-50%) scale(.94)}
.intro-overlay.hidden{opacity:0;pointer-events:none}

.rules-overlay{
  position:absolute;
  inset:0;
  z-index:21;
  background:#06071b;
  overflow:hidden;
  opacity:0;
  pointer-events:none;

}
.rules-overlay.show{opacity:1;pointer-events:auto}
.rules-overlay img.rules-title{
  position:absolute;
  left:29.9%;
  top:1.3%;
  width:40.1%;
  height:auto;
  pointer-events:none;
}
.rules-overlay img.rules-divider{
  position:absolute;
  left:33.1%;
  width:33.6%;
  height:auto;
  pointer-events:none;
}
.rules-divider-top{top:29.6%}
.rules-divider-bottom{top:64.6%}
.rules-table{
  position:absolute;
  left:33.1%;
  top:38%;
  width:15.6%;
  height:auto;
  pointer-events:none;
}
.rules-overlay .rules-table img{position:static;display:block;width:100%;height:auto}
.rules-table svg{position:absolute;inset:0;width:100%;height:100%}
.rules-text{
  position:absolute;
  left:50.8%;
  top:38%;
  width:30%;
  height:21.2%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  color:#f2ece0;
  text-align:left;
  pointer-events:none;
  font-family:Arial,Helvetica,sans-serif;
  text-transform:uppercase;
}
.rules-text p{
  margin:0;
  font-size:clamp(9px,1vw,15px);
  line-height:1.3;
  font-weight:600;
  letter-spacing:.3px;
}
.rules-start{
  position:absolute;
  left:57.6%;
  top:76.9%;
  width:8.4%;
  aspect-ratio:256/215;
  background:transparent;
  border:none;
  padding:0;
  cursor:pointer;
  pointer-events:none;
}
.rules-overlay.show .rules-start{pointer-events:auto}
.rules-overlay .rules-start img{position:static;display:block;width:100%;height:100%}
.rules-start:hover{filter:brightness(1.2)}
.rules-start:active{transform:scale(.94)}

.rotate-prompt{
  display:none;
  position:fixed;
  inset:0;
  z-index:1000;
  background:#06071b;
  color:#f2ece0;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-family:Georgia,serif;
  padding:20px;
}
.rotate-icon{
  font-size:15vw;
  line-height:1;
  margin-bottom:16px;
  animation:rotateHint 1.6s ease-in-out infinite;
}
.rotate-prompt p{
  margin:0;
  font-size:5vw;
  font-weight:700;
  letter-spacing:.5px;
}
@keyframes rotateHint{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(90deg)}
}
/* Показываем только на тач-устройствах в портретной ориентации,
   чтобы не мешать десктопу с узким/квадратным окном браузера. */
@media (pointer:coarse) and (orientation:portrait){
  .rotate-prompt{display:flex}
  .stage{display:none}
}