*{box-sizing:border-box}

html,body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#070a0e;
  color:#e8faff;
  font-family:Arial,sans-serif;
  touch-action:none
}

button,select,input{
  width:100%;
  padding:11px;
  margin:5px 0;
  color:#e5fbff;
  background:#112630;
  border:1px solid #397889;
  cursor:pointer;
  font-size:14px
}

button:hover{background:#1b4655}
button:disabled{opacity:.4;cursor:not-allowed}

#menu{
  position:fixed;
  inset:0;
  z-index:20;
  overflow-y:auto;
  padding:25px;
  background:radial-gradient(circle at center,#18313a 0%,#080b0f 70%)
}

.panel{
  width:min(950px,96%);
  margin:auto;
  padding:25px;
  background:rgba(7,14,19,.96);
  border:1px solid #315a68;
  box-shadow:0 0 40px #000
}

h1{
  margin-top:0;
  text-align:center;
  color:#bdf5ff;
  letter-spacing:5px;
  text-shadow:0 0 15px #41cce9
}

h2{
  color:#9deeff;
  border-bottom:1px solid #28515e;
  padding-bottom:7px
}

h3{
  margin:7px 0;
  color:#d8faff
}

.small{
  color:#91abb3;
  font-size:13px;
  line-height:1.5
}

.tabs{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:7px;
  margin-bottom:15px
}

.tabs button.active{background:#2a6879}

.view{display:none}
.view.active{display:block}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:10px
}

.card{
  padding:12px;
  background:#0e1a20;
  border:1px solid #254954;
  min-height:145px
}

.card.locked{opacity:.45}

.card.equipped,
.card.done{
  border-color:#67eaff;
  box-shadow:0 0 12px rgba(103,234,255,.3)
}

.card small{
  display:block;
  color:#9ab9c1;
  margin:7px 0
}

.progress{
  height:12px;
  margin:8px 0;
  background:#081116;
  border:1px solid #365762
}

.progress div{
  height:100%;
  background:linear-gradient(90deg,#2fb5d1,#78f0ff)
}

.code{
  display:flex;
  gap:7px
}

.code input{flex:1}
.code button{width:150px}

#game{
  display:block;
  margin:auto;
  background:#090d11;
  touch-action:none
}

#hud{
  position:fixed;
  z-index:5;
  top:10px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
  font-size:13px;
  text-shadow:0 2px 3px #000
}

#message{
  position:fixed;
  z-index:25;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:8px 18px;
  color:#d4fbff;
  background:rgba(0,15,20,.85);
  border:1px solid #418596;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none
}

/* Contrôles mobiles */

#mobileControls{
  display:none;
  position:fixed;
  z-index:30;
  inset:0;
  pointer-events:none;
  user-select:none;
  touch-action:none
}

#joystick{
  position:absolute;
  left:25px;
  bottom:25px;
  width:120px;
  height:120px;
  border:2px solid rgba(150,240,255,.65);
  border-radius:50%;
  background:rgba(20,70,85,.35);
  pointer-events:auto;
  touch-action:none
}

#joystickStick{
  position:absolute;
  left:35px;
  top:35px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:rgba(120,235,255,.8);
  box-shadow:0 0 15px #48dfff;
  pointer-events:none
}

#mobileButtons{
  position:absolute;
  right:20px;
  bottom:25px;
  display:grid;
  grid-template-columns:repeat(2,70px);
  gap:10px;
  pointer-events:auto
}

#mobileButtons button{
  width:70px;
  height:70px;
  margin:0;
  padding:0;
  border-radius:50%;
  font-size:25px;
  background:rgba(15,55,68,.8);
  border:2px solid #5fdff5;
  box-shadow:0 0 12px rgba(70,220,255,.35);
  touch-action:none
}

#mobileFire{
  grid-column:span 2;
  width:150px !important;
  border-color:#ff7582 !important;
  background:rgba(100,25,40,.8) !important
}

@media(max-width:650px){
  .tabs{
    grid-template-columns:repeat(2,1fr)
  }

  #hud{
    font-size:10px;
    gap:10px
  }
}

@media(pointer:coarse),(max-width:700px){
  #mobileControls{
    display:block
  }

  #hud{
    top:5px;
    left:7px;
    right:7px;
    font-size:10px
  }

  #game{
    width:100vw;
    height:auto;
    max-height:100vh;
    object-fit:contain
  }
}