*{
margin:0;
padding:0;
box-sizing:border-box
}

html{
height:100%
}

body{
width:100%;
height:100vh;
overflow:hidden;
background-image:url(./images/svg/background.svg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
font-family:"Nunito",sans-serif;
font-weight:400;
color:#fff;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
backdrop-filter:blur(3px);
cursor:pointer
}

header{
margin-top:10px
}

header h1{
font-size:clamp(30px,3.4vw,50px);
letter-spacing:6px;
text-align:center;
font-weight:900;
color:#fff;
text-shadow:0 0 25px #4c00ff,0 0 45px #2400ff;
margin:0 16px 6px
}

main{
width:100%;
height:calc(100vh - 96px);
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
padding:10px 16px 18px;
gap:14px
}

#playSpace{
width:min(600px,calc(100vw - 56px));
aspect-ratio:1/1;
height:auto;
position:relative;
border-radius:16px;
overflow:hidden;
background:linear-gradient(145deg,rgba(5,0,20,.72),rgba(20,0,70,.66));
border:2px solid rgba(150,50,255,.6);
box-shadow:0 0 30px rgba(120,0,255,.7),0 0 50px rgba(0,120,255,.5),inset 0 0 20px rgba(255,255,255,.08);
animation:playSpaceFloat 8s ease-in-out infinite
}

@keyframes playSpaceFloat{
0%{transform:scale(1)}
50%{transform:scale(1.01)}
100%{transform:scale(1)}
}

.tile{
width:60px;
height:60px;
position:absolute;
background-size:cover;
background-position:center;
opacity:.85;
transition:opacity .2s ease,transform .2s ease
}

.tile:hover{
opacity:1;
transform:scale(1.05);
filter:drop-shadow(0 0 6px rgba(150,0,255,.6))
}

.marker{
width:60px;
height:60px;
position:absolute;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
font-size:12px;
font-weight:800;
background:rgba(0,0,0,.65);
border:1px solid rgba(255,255,255,.2);
border-radius:10px;
text-shadow:0 0 8px rgba(255,255,255,.7);
z-index:210;
pointer-events:none
}

.marker-start{
box-shadow:0 0 15px #00f6ff
}

.marker-goal{
box-shadow:0 0 15px #ff00d4
}

#hero{
width:60px;
height:60px;
position:absolute;
background-size:cover;
background-position:center;
z-index:500;
filter:drop-shadow(0 0 15px rgba(255,255,255,.7));
animation:characterFloat 3s ease-in-out infinite
}

.enemy{
width:60px;
height:60px;
position:absolute;
background-size:cover;
background-position:center;
z-index:450;
filter:drop-shadow(0 0 10px #ff3b3b);
animation:characterFloat 3s ease-in-out infinite
}

@keyframes characterFloat{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

.safeTile{
position:absolute;
width:60px;
height:60px;
background-image:url("./images/svg/elements-empty.svg");
background-size:cover;
opacity:.35;
border-radius:10px;
box-shadow:0 0 14px #4df6ff;
z-index:140;
pointer-events:none
}

.shielded{
box-shadow:0 0 22px #00f6ff,0 0 45px rgba(0,246,255,.7);
filter:drop-shadow(0 0 18px #00f6ff)
}

.asteroidEnemy{
animation:characterFloat 3s ease-in-out infinite,asteroidSpin 5s linear infinite
}

@keyframes asteroidSpin{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}

#hud{
width:min(980px,calc(100vw - 32px));
display:flex;
flex-wrap:nowrap;
align-items:center;
justify-content:center;
gap:12px;
padding:0;
margin:0;
overflow:hidden
}

#hud section{
padding:10px 14px;
border-radius:12px;
font-size:clamp(14px,1.25vw,18px);
font-weight:900;
color:#fff;
background:linear-gradient(135deg,rgba(30,0,60,.82),rgba(80,0,150,.74));
border:1px solid rgba(140,0,255,.58);
box-shadow:0 0 12px rgba(140,0,255,.55),0 0 20px rgba(0,140,255,.35),inset 0 0 15px rgba(255,255,255,.1);
backdrop-filter:blur(4px);
white-space:nowrap;
text-align:center
}

#hud section:nth-child(1),
#hud section:nth-child(2),
#hud section:nth-child(3){
flex:0 0 auto;
min-width:160px
}

#messageDisplay{
flex:1 1 auto;
min-width:220px;
max-width:520px;
overflow:hidden;
text-overflow:ellipsis
}

#updateDisplay{
flex:0 0 auto;
min-width:190px;
overflow:hidden;
text-overflow:ellipsis
}

#instructions{
font-size:clamp(14px,1.2vw,18px);
font-weight:800;
text-align:center;
color:#fff;
text-shadow:0 0 8px rgba(255,255,255,.55);
margin-top:4px
}

#overlay{
position:fixed;
inset:0;
width:100%;
height:100%;
background:rgba(10,0,30,.9);
display:none;
flex-direction:column;
align-items:center;
justify-content:center;
gap:16px;
color:#fff;
text-align:center;
z-index:99999;
padding:28px 18px
}

#overlay h1{
font-size:clamp(40px,6vw,72px);
font-weight:900;
text-shadow:0 0 20px #9800ff;
letter-spacing:4px
}

#overlay article{
font-size:clamp(18px,2.2vw,26px);
font-weight:800;
text-shadow:0 0 8px rgba(255,255,255,.55);
max-width:780px;
line-height:1.45
}

#welcomeScreen,
#instructionsScreen{
position:fixed;
inset:0;
width:100%;
height:100%;
background:rgba(5,0,30,.92);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:14px;
z-index:999999;
text-align:center;
backdrop-filter:blur(4px);
overflow:hidden;
padding:28px 16px 34px
}

#welcomeScreen h1,
#instructionsScreen h1{
font-size:clamp(34px,4.6vw,64px);
letter-spacing:7px;
font-weight:900;
text-shadow:0 0 35px rgba(169,122,255,.9),0 0 60px rgba(124,43,255,.85);
margin:0 0 2px
}

#welcomeScreen p,
#instructionsScreen p{
width:min(860px,92%);
font-size:clamp(13px,1.6vw,18px);
line-height:1.5;
color:rgba(255,255,255,.92);
text-shadow:0 0 10px rgba(255,255,255,.35)
}

#welcomeScreen button,
#instructionsScreen button{
padding:12px 32px;
font-size:17px;
border-radius:14px;
border:none;
cursor:pointer;
font-weight:900;
color:#fff;
background:linear-gradient(135deg,#6f00ff,#9a4dff);
box-shadow:0 0 20px rgba(138,47,255,.85),0 0 40px rgba(90,0,255,.75);
transition:.2s ease;
min-width:200px
}

#welcomeScreen button:hover,
#instructionsScreen button:hover{
transform:scale(1.05);
box-shadow:0 0 35px rgba(179,124,255,.95),0 0 60px rgba(124,43,255,.9)
}

#instructionsScreen{
justify-content:flex-start;
gap:40px
}

#instructionsTitle{
font-size:clamp(28px,3.8vw,50px);
letter-spacing:7px;
margin:0 0 4px;
text-shadow:0 0 30px rgba(184,124,255,.9)
}

#instructionGrid{
display:grid;
grid-template-columns:repeat(3,minmax(160px,220px));
gap:12px;
justify-content:center;
width:100%;
margin:2px 0 8px
}

.instructionCard{
background:linear-gradient(160deg,rgba(85,0,170,.66),rgba(18,0,44,.92));
border-radius:18px;
padding:10px 10px 10px;
text-align:center;
box-shadow:0 0 14px rgba(180,100,255,.45);
transition:.18s ease;
border:1px solid rgba(255,255,255,.12)
}

.instructionCard:hover{
transform:translateY(-2px) scale(1.015);
box-shadow:0 0 26px rgba(190,130,255,.75)
}

.instructionCard img{
width:56px;
height:auto;
margin-bottom:8px;
filter:drop-shadow(0 0 12px rgba(0,255,255,.7));
animation:floatIcon 3s ease-in-out infinite
}

@keyframes floatIcon{
0%{transform:translateY(0)}
50%{transform:translateY(-4px)}
100%{transform:translateY(0)}
}

.instructionCard h2{
margin:0 0 6px;
font-size:17px;
font-weight:900;
letter-spacing:.6px
}

.instructionCard p{
font-size:12.5px;
opacity:.92;
line-height:1.45;
width:min(210px,100%);
margin:0 auto;
color:rgba(255,255,255,.9)
}

#instructionRules{
max-width:860px;
width:100%;
padding:10px 14px;
border:1px solid rgba(255,255,255,.16);
border-radius:14px;
background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.16));
box-shadow:inset 0 0 14px rgba(150,0,255,.28),0 0 14px rgba(120,0,255,.20);
backdrop-filter:blur(6px)
}

#instructionRules ul{
display:grid;
grid-template-columns:repeat(2,minmax(220px,1fr));
gap:8px 14px;
padding:0;
margin:0;
list-style:none;
justify-items:center
}

#instructionRules li{
font-size:12.5px;
line-height:1.4;
letter-spacing:.2px;
color:rgba(255,255,255,.92);
text-align:center
}

#instructionButtons{
display:flex;
gap:12px;
justify-content:center;
align-items:center;
flex-wrap:wrap;
width:100%;
margin-top:4px
}

#instructionButtons button{
padding:12px 34px;
border-radius:14px;
border:none;
font-size:17px;
font-weight:900;
cursor:pointer;
color:#fff;
background:linear-gradient(135deg,#6f00ff,#9a4dff);
box-shadow:0 0 20px rgba(138,47,255,.85),0 0 36px rgba(120,0,255,.70);
transition:.2s ease;
min-width:200px
}

#instructionButtons button:hover{
transform:scale(1.05);
box-shadow:0 0 34px rgba(178,125,255,.95)
}

@media (max-width:980px){
#hud{gap:10px}
#hud section:nth-child(1),
#hud section:nth-child(2),
#hud section:nth-child(3){min-width:140px}
#messageDisplay{max-width:420px}
#instructionGrid{grid-template-columns:repeat(3,minmax(150px,200px))}
}

@media (max-width:720px){
#instructionGrid{grid-template-columns:repeat(2,minmax(160px,220px))}
#instructionRules ul{grid-template-columns:1fr}
}

@media (max-width:680px){
header h1{letter-spacing:4px}
#hud{flex-wrap:wrap;overflow:visible}
#hud section{flex:1 1 calc(50% - 10px);min-width:unset}
#messageDisplay,#updateDisplay{flex:1 1 100%;max-width:unset}
#instructionGrid{grid-template-columns:minmax(240px,340px)}
}