body{
  margin:0;
  background:#333;
  padding:clamp(8px,2vh,24px) 0 env(safe-area-inset-bottom) !important;
  background:url('../images/rompe-logo.png') center 12px #333 no-repeat;
  background-size:clamp(72px, 10vw, 120px);
  overflow-x:hidden;
  min-height:100dvh;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  display:block;
}

.legend {
    display:block;
    width:min(96vw,1000px);
    min-height:min(84vh, 760px);
    background-color:#fff;
    margin:0 auto;
    border:5px solid #000;
    font-family:'Oswald', sans-serif;
    font-size:clamp(16px,2.6vw,24px);
    padding:16px 20px !important;
}

a.button{
  border:2px solid #dbcf4c;
  color:#dbcf4c;
  font-family: 'Oswald', sans-serif;
  font-size:clamp(16px,2.4vw,18px);
  padding:10px 20px;
  text-align:center;
  text-transform:uppercase;
  background:#333 !important;
  margin:20px auto 8px;
  display:block;
  width:min(200px, 80vw);
}

a.button:hover{
  border:2px solid #f1615e;
  color:#f1615e;
  background:#666 !important;
}

.container {
  display:block;
  position:fixed;
  width:1000px;
  height:670px;
  background-color:#6ea5e5;
  margin:0;
  border:5px solid #000;
  background:url('../images/background.png') bottom center #6ea5e5 repeat-x;
  left:50%;
  top:50%;
  transform-origin:center;
  transform: translate(-50%, -50%) scale(1);
}

.pointsCounter{
  position:absolute;
  z-index:100;
  top:10px;
  left:10px;
  height:auto;
  width:auto;
  text-align:left;
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:clamp(18px,3.2vw,26px);
}

.gameboard{
  box-sizing:border-box;
  display:block;
  width:min(400px, 86%);
  margin:0 auto;
  height:100%;
}

.mobile-controls{
  position:fixed;
  left:0;
  right:0;
  bottom:10px;
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 12px;
  z-index:100001;
}

.mobile-controls .dpad{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.mobile-controls .row{ display:flex; gap:8px; }
.mobile-controls .actions{ display:flex; gap:8px; margin-left:auto; }

.ctrl{
  width:clamp(44px,10vw,64px);
  height:clamp(44px,10vw,64px);
  border-radius:12px;
  border:2px solid #222;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-family:'Oswald', sans-serif;
  font-size:clamp(14px,3.5vw,18px);
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;
  backdrop-filter:blur(4px);
}

.btn-fix,.btn-pause{ width:clamp(68px,18vw,120px); height:clamp(44px,10vw,56px); }

@media (hover:none) and (pointer:coarse){ .mobile-controls{ display:flex; } }

@media (max-width: 820px){
  .mobile-controls{ display:flex; }
}

@supports (-webkit-touch-callout: none){
  .mobile-controls{ display:flex; }
}

@supports (bottom: env(safe-area-inset-bottom)){
  .mobile-controls{ bottom: calc(env(safe-area-inset-bottom) + 10px); }
}

@supports (bottom: constant(safe-area-inset-bottom)){
  .mobile-controls{ bottom: calc(constant(safe-area-inset-bottom) + 10px); }
}

/* ------- zona de Ralp ---------*/

.ralphspace {
  height:100px;
  width:100%;
}

.ralphbox{
  width:20%;
  float:left;
  height:105px;
  position:relative;
  z-index:50;
}

.ralph{
  background:url('../images/ralph.png') bottom center no-repeat;
  background-size:100%;
}

.ralph-wrecking{
  background:url('../images/ralph-wrecking.png') bottom center no-repeat;
  background-size:100%;
}
/* ------- zona top (Aquí no pasa nada) ---------*/


.top{
  background:url('../images/top.png') center center no-repeat;
  width:100%;
  height:75px;
  background-size: 103%;
}

/* ------- zona de Felix ---------*/


.fixerspace {
  background:url('../images/bottom.png') bottom center no-repeat;
  width:100%;
  height:128px;
  background-size: 99%;
  position: relative;
}

.fixerspace .fixer,
.fixerspace .fixing,
.fixerspace .walking_right,
.fixerspace .walking_left{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  bottom:8px !important;
}

.nofixing{
  position: relative;
  width:70px;
  z-index:1000;
  height:80px;
  background:url('../images/felix.png') bottom center no-repeat;
  background-size:100%;
}

.fixing{
  position: relative;
  width:70px;
  z-index:1000;
  height:80px;
  background:url('../images/felix_fixing.png') bottom center no-repeat;
  background-size:100%;
}

.walking_right{
  position: relative;
  width:70px;
  z-index:1000;
  height:80px;
  background:url('../images/felix_walking_right.png') bottom center no-repeat;
  background-size:100%;
}

.walking_left{
  position: relative;
  width:70px;
  z-index:1000;
  height:80px;
  background:url('../images/felix_walking_left.png') bottom center no-repeat;
  background-size:100%;
}

/* Felix hit animation */
.fixer.hit,
.fixing.hit,
.walking_right.hit,
.walking_left.hit{
  animation: hitShake 0.32s ease, hitFlash 0.32s ease;
}

@keyframes hitShake{
  0%{   margin-left:0; }
  20%{  margin-left:-4px; }
  40%{  margin-left:4px; }
  60%{  margin-left:-3px; }
  80%{  margin-left:3px; }
  100%{ margin-left:0; }
}

@keyframes hitFlash{
  0%{   opacity:1; }
  30%{  opacity:0.65; }
  100%{ opacity:1; }
}
/* ------- zona de edificio ---------*/


.building{
  height: 367px;
  padding: 0px 10px !important;
  display: block;
  position:relative;
}
.window {
  background-color: #000 !important;
  width:20%;
  height:92px;
  float:left;
  background-size:cover !important;
  padding:0px;
  margin:0px;
  position:relative;
}

div[data-state ="2"]{
  background:url('../images/new.png') center center no-repeat;
}
div[data-state ="1"]{
  background:url('../images/broken.png') center center no-repeat;
}
div[data-state ="0"]{
  background:url('../images/over.png') center center no-repeat;
}


div[data-fixer ="in"]{
  background:url('../images/over.png') center center no-repeat;
}


.gameover, .youwin{
  display:none;
  position:absolute;
  width:min(600px, 92%);
  z-index:100000;
  margin-top:100px;
  height:auto;
  left:50%;
  transform:translateX(-50%);
}

.gameover a, .youwin a{
  display: block;
  width:100%;
  position: relative;
}

.gameover img, .youwin img{
  height:auto;
  width:100%;
  position:relative;
  left:0;
}



.clearfix {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}