.si-wrapper{
 display:flex;
 justify-content:center;
 padding:20px;
 background:#050816;
 overflow:hidden;
}

.si-card{
 position:relative;
 font-family:'Courier New',monospace;
 background:#020617;
 padding:20px;
 border-radius:18px;
 box-shadow:0 20px 40px rgba(0,0,0,.35);
 width:980px;
 max-width:100%;
 overflow:hidden;
}

#si-fullscreen{
 position:relative;
 width:46px;
 height:46px;
 font-size:18px;
 padding:0;
 min-width:auto;
 margin-left:16px;
 display:flex;
 align-items:center;
 justify-content:center;
 border-radius:10px;
 flex-shrink:0;
}

.si-intro{
 position:absolute;
 inset:0;
 background:rgba(0,8,20,.94);
 z-index:5;
 color:#fff;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 font-size:42px;
 font-weight:bold;
 gap:20px;
 border-radius:18px;
 text-align:center;
 padding:20px;
}

.si-topbar{
 display:flex;
 justify-content:space-between;
 align-items:center;
 flex-wrap:wrap;
 gap:10px;
}

.si-hud{
 display:flex;
 gap:20px;
 color:#fff;
 font-size:18px;
 margin-bottom:20px;
 font-weight:bold;
 flex:1;
 justify-content:space-between;
 flex-wrap:wrap;
}

.si-controls-top,
.si-mobile{
 display:flex;
 justify-content:center;
 gap:16px;
 margin:18px 0;
 flex-wrap:wrap;
}

.si-card button{
 background:#14d9d9;
 color:#001;
 border:none;
 padding:14px 24px;
 border-radius:8px;
 font-weight:bold;
 cursor:pointer;
 min-width:140px;
}

.si-instructions{
 color:#fff;
 text-align:center;
 margin-bottom:15px;
 font-size:13px;
}

.si-card canvas{
 background:#000814;
 border:3px solid #14d9d9;
 border-radius:12px;
 display:block;
 margin:auto;
 width:100%;
 max-width:900px;
 height:auto;
}

@media(max-width:768px){

 #si-fullscreen{
  position:relative;
  top:auto;
  right:auto;
  width:42px;
  height:42px;
  font-size:14px;
  margin:0 auto 10px auto;
  display:block;
 }

}

@media(max-width:768px){

 .si-card{
  padding:14px;
 }

 .si-hud{
  font-size:14px;
  gap:10px;
 }

 .si-card button{
  padding:12px 16px;
  min-width:120px;
  font-size:13px;
 }

 #si-fullscreen{
  position:absolute;
  top:12px;
  right:12px;
 }

 .si-intro{
  font-size:28px;
 }

 .si-mobile{
  display:flex;
 }

}

@media(min-width:769px){
 .si-mobile{
  display:none;
 }
}

.si-mobile{
 display:none;
 justify-content:space-between;
 align-items:center;
 gap:16px;
 margin-top:20px;
}

.si-mobile-pad{
 display:flex;
 gap:12px;
}

.si-mobile button{
 width:64px;
 height:64px;
 border-radius:50%;
 font-size:22px;
 font-weight:bold;
 padding:0;
 min-width:auto;
}

.si-fire-btn{
 width:90px !important;
 height:90px !important;
 border-radius:50% !important;
 font-size:18px !important;
}

@media(max-width:768px){

 .si-card{
  padding:12px;
  border-radius:12px;
 }

 .si-topbar{
  flex-direction:column;
  align-items:stretch;
  gap:10px;
 }

 .si-hud{
  font-size:12px;
  gap:8px;
  justify-content:space-between;
 }

 .si-controls-top{
  gap:10px;
  flex-wrap:wrap;
 }

 .si-card button{
  min-width:110px;
  padding:10px 14px;
  font-size:12px;
 }

 .si-instructions{
  font-size:11px;
  margin-bottom:10px;
 }

 .si-card canvas{
  width:100%;
  height:auto;
  max-height:320px;
 }

 #si-fullscreen{
  position:absolute;
  top:36px;
  right:10px;
  width:25px;
  height:25px;
  font-size:16px;
  padding:0;
  min-width:auto;
 }

 .si-mobile{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:16px;
 }

 .si-mobile-pad{
  display:flex;
  gap:10px;
 }

 .si-mobile button{
  width:54px;
  height:54px;
  border-radius:10px;
  font-size:18px;
  min-width:auto;
  padding:0;
 }

 .si-fire-btn{
  width:70px !important;
  height:54px !important;
  border-radius:10px !important;
 }

 .si-intro{
  font-size:24px;
  padding:20px;
 }

}