body{
margin:0;
font-family:Arial;
overflow:hidden;
background:black;
color:white;
}

.introScreen{
position:fixed;
inset:0;
z-index:90;
background:#000;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.introScreen.hidden{
display:none;
}

.introVideo{
width:100%;
height:100%;
object-fit:cover;
background:#000;
}

.introSkipButton{
position:absolute;
right:18px;
bottom:18px;
padding:10px 14px;
border:none;
border-radius:999px;
background:rgba(0,0,0,0.58);
color:#fff4df;
font-size:14px;
cursor:pointer;
box-shadow:0 0 14px rgba(0,0,0,0.35);
}

.introSkipButton:hover{
background:rgba(0,0,0,0.74);
}

#menu{
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;

display:flex;
align-items:center;
justify-content:center;
background: url('background.png') center/cover;
z-index:10;
}

.menuBox{
text-align:center;
background:rgba(0,0,0,0.55);
padding:20px 30px;  
border-radius:16px;
box-shadow:0 0 18px rgba(0,0,0,0.7);
}

.languageSwitcher{
position:fixed;
top:12px;
right:12px;
display:flex;
gap:8px;
padding:8px 10px;
background:rgba(0,0,0,0.55);
border:1px solid rgba(255,255,255,0.14);
border-radius:14px;
box-shadow:0 0 12px rgba(0,0,0,0.35);
z-index:40;
backdrop-filter:blur(6px);
}

.languageButton{
min-width:44px;
height:34px;
padding:4px 6px;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.14);
cursor:pointer;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
transition:transform 0.12s, background 0.12s, box-shadow 0.12s;
}

.languageFlag{
display:block;
width:28px;
height:20px;
object-fit:cover;
border-radius:3px;
pointer-events:none;
}

.gameActive .languageSwitcher{
display:none;
}

.languageButton:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.22);
}

.languageButton.selected{
background:rgba(240,194,125,0.85);
box-shadow:0 0 0 2px rgba(255,255,255,0.12) inset;
}

.panelHeading{
font-weight:700;
margin-bottom:6px;
color:#fff4df;
}

.menuFooter{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
width:100%;
margin-top:14px;
font-size:12px;
color:rgba(255,255,255,0.8);
letter-spacing:0.04em;
}

.menuVersion{
justify-self:start;
font-weight:700;
}

.menuCopyright{
justify-self:center;
text-align:center;
white-space:nowrap;
}

.menuFooterSpacer{
justify-self:end;
}

#speciesPicker{
margin-top:18px;
padding:14px;
background:rgba(255,255,255,0.12);
border-radius:14px;
text-align:center;
}

#speciesPicker h3{
margin:0 0 12px 0;
font-size:18px;
color:#fff4df;
}

.speciesGrid{
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}

.speciesCard{
display:flex;
flex-direction:column;
align-items:center;
gap:8px;
width:170px;
padding:10px;
margin:0;
appearance:none;
background:rgba(255,255,255,0.08);
border:2px solid transparent;
border-radius:14px;
color:white;
cursor:pointer;
transition:transform 0.12s, border-color 0.12s, background 0.12s;
}

.speciesCard:hover{
transform:translateY(-2px);
background:rgba(255,255,255,0.14);
}

.speciesCard.selected{
border-color:#f0c27d;
background:rgba(240,194,125,0.18);
box-shadow:0 0 14px rgba(240,194,125,0.2);
}

.speciesCard img{
display:block;
width:100%;
height:92px;
object-fit:contain;
border-radius:10px;
background:rgba(0,0,0,0.2);
}

.speciesCard span{
font-size:14px;
font-weight:600;
}

.menuBox > button{

display:block;
width:200px;

padding:12px;
margin:6px auto;

font-size:18px;

border:none;
border-radius:8px;

background:white;
cursor:pointer;

}

#settings{

display:none;

margin-top:15px;
padding:15px;

background:rgba(255,255,255,0.85);
border-radius:10px;

color:black;

}

#settings label{
display:block;
margin-top:10px;
}

#settings input[type="number"]{
display:block;
width:100%;
box-sizing:border-box;
margin-top:6px;
padding:8px 10px;
border:1px solid rgba(0,0,0,0.18);
border-radius:8px;
font-size:16px;
}

.settingsWarning{
margin-top:8px;
padding:8px 10px;
border-radius:8px;
background:rgba(125, 20, 20, 0.9);
border:1px solid rgba(255, 170, 170, 0.35);
color:#fff4f4;
font-size:13px;
line-height:1.35;
}

.settingsError{
margin-top:8px;
padding:8px 10px;
border-radius:8px;
background:rgba(140, 60, 18, 0.92);
border:1px solid rgba(255, 194, 120, 0.35);
color:#fff6ea;
font-size:13px;
line-height:1.35;
}

.confirmOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0, 0, 0, 0.72);
z-index:30;
}

.confirmOverlay[hidden]{
display:none !important;
}

.confirmBox{
width:min(420px, calc(100vw - 32px));
background:rgba(18, 14, 12, 0.96);
border:1px solid rgba(255, 182, 110, 0.45);
border-radius:18px;
padding:20px;
box-shadow:0 18px 40px rgba(0, 0, 0, 0.5);
color:#fff4df;
text-align:center;
}

.confirmBox h2{
margin:0 0 10px 0;
font-size:20px;
}

.confirmBox p{
margin:0;
font-size:15px;
line-height:1.45;
}

.confirmActions{
display:flex;
gap:10px;
justify-content:center;
margin-top:18px;
}

.confirmActions button{
padding:10px 14px;
border:none;
border-radius:10px;
font-size:15px;
cursor:pointer;
}

.legalLinks{
display:flex;
gap:8px;
justify-content:center;
flex-wrap:wrap;
margin:8px 0 10px;
}

.legalDock{
position:fixed;
left:50%;
bottom:18px;
transform:translateX(-50%);
width:min(760px, calc(100vw - 24px));
padding:10px 12px;
border-radius:12px;
background:rgba(0,0,0,0.86);
border:1px solid rgba(255,255,255,0.10);
box-shadow:0 0 18px rgba(0,0,0,0.7);
color:#fff4df;
text-align:left;
z-index:45;
}

.legalDock[hidden]{
display:none !important;
}

.legalDockButtons{
display:flex;
flex-wrap:wrap;
gap:6px;
justify-content:center;
margin-bottom:8px;
}

.legalDockTitle{
font-size:16px;
font-weight:700;
text-align:center;
margin-bottom:8px;
}

.legalDockBody{
background:rgba(255,255,255,0.04);
border-radius:10px;
padding:10px;
font-size:12px;
line-height:1.35;
white-space:pre-line;
max-height:22vh;
overflow:auto;
}

.legalDockCopyright{
margin-top:8px;
font-size:11px;
text-align:center;
color:rgba(255,255,255,0.78);
}

.legalDockClose{
display:block;
width:100%;
margin-top:8px;
padding:7px 10px;
border:none;
border-radius:10px;
background:#e7d2a1;
color:#2c1e12;
font-size:13px;
cursor:pointer;
}

.legalLinkButton{
padding:6px 8px;
border:none;
border-radius:8px;
background:rgba(255,255,255,0.14);
color:#fff4df;
font-size:12px;
cursor:pointer;
}

.legalLinkButton:hover{
background:rgba(255,255,255,0.22);
}

.taskList{
display:flex;
flex-direction:column;
gap:6px;
font-size:12px;
line-height:1.25;
color:#fff4df;
}

.taskListItem{
display:grid;
grid-template-columns:auto 1fr;
gap:8px 10px;
align-items:baseline;
padding:6px 8px;
border-radius:10px;
background:rgba(255,255,255,0.05);
}

.taskListRank{
font-weight:700;
color:#f0c27d;
}

.taskListLabel{
font-weight:600;
}

.taskListCount{
grid-column:2;
color:rgba(255,255,255,0.78);
}

.taskListEmpty{
padding:8px;
text-align:center;
color:rgba(255,255,255,0.65);
}

.legalOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,0,0,0.72);
z-index:35;
}

.legalOverlay[hidden]{
display:none !important;
}

.legalBox{
width:min(560px, calc(100vw - 32px));
max-height:min(80vh, 760px);
overflow:auto;
background:rgba(18, 14, 12, 0.96);
border:1px solid rgba(255, 182, 110, 0.45);
border-radius:18px;
padding:20px;
box-shadow:0 18px 40px rgba(0, 0, 0, 0.5);
color:#fff4df;
}

.legalBox h2{
margin:0 0 10px 0;
font-size:20px;
text-align:center;
}

.legalBody{
font-size:14px;
line-height:1.55;
white-space:pre-line;
background:rgba(255,255,255,0.04);
border-radius:12px;
padding:14px;
margin-bottom:16px;
}

#confirmStartBtn{
background:#f0c27d;
color:#2b1d10;
}

#confirmCancelBtn{
background:#4a4037;
color:#fff4df;
}

#game{
display:none;
}

html, body{
width:100%;
height:100%;
}

#game{
position:fixed;
left:0;
top:0;
width:100vw;
height:100vh;
overflow:hidden;
}

canvas#canvas{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
display:block;
width:100vw;
height:auto;
max-height:100vh;
}

#ui{

position:absolute;
right:10px;
top:10px;

width:430px;

display:flex;
flex-direction:column;
align-items:stretch;

gap:0;

}

#ui > .panel,
#gameSettingsPanel{
width:100%;
box-sizing:border-box;
}

#graphGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
width:100%;
align-items:start;
}

#graphGrid > .panel{
margin-bottom:0;
}

#graphGrid .graphPanel{
cursor:move;
user-select:none;
}

#graphGrid .graphPanel.dragging{
opacity:0.55;
transform:scale(0.99);
}

#graphGrid .graphPanel.dropTarget{
outline:2px dashed rgba(240,194,125,0.8);
outline-offset:-2px;
}

#graphGrid.legend-hidden #minimapPanel{
grid-column:1 / -1;
}

#graphGrid #taskList{
min-height:80px;
}

#placementMessage{
position:absolute;
left:50%;
top:14px;
transform:translateX(-50%);
padding:10px 14px;
max-width:min(560px, calc(100vw - 450px));
border-radius:999px;
background:rgba(25, 18, 12, 0.88);
border:1px solid rgba(255, 214, 153, 0.45);
box-shadow:0 0 14px rgba(0, 0, 0, 0.35);
color:#fff1d6;
font-size:14px;
line-height:1.3;
text-align:center;
pointer-events:none;
opacity:0;
transition:opacity 0.18s ease, transform 0.18s ease;
z-index:12;
}

#placementMessage.visible{
opacity:1;
transform:translateX(-50%) translateY(0);
}

#enemyPanel{
position:absolute;
left:10px;
top:10px;
width:170px;
background:rgba(0,0,0,0.75);
padding:10px;
border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.7);
font-size:14px;
z-index:5;
}

#enemyPanel h3{
margin:0 0 8px 0;
font-size:16px;
text-align:center;
}

.spawnGroupTitle{
margin:10px 0 6px 0;
font-size:12px;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:rgba(255,255,255,0.75);
}

.enemySlot{
display:flex;
align-items:center;
gap:8px;
padding:6px 8px;
margin-bottom:6px;
border-radius:8px;
background:rgba(255,255,255,0.05);
cursor:pointer;
transition:background 0.15s, transform 0.1s;
}

.enemySlot:hover{
background:rgba(255,255,255,0.12);
transform:translateY(-1px);
}

.enemySlot.selected{
background:rgba(180,40,40,0.8);
box-shadow:0 0 6px rgba(255,80,80,0.8);
}

.spawnSlot.selected{
background:rgba(64,120,58,0.88);
box-shadow:0 0 6px rgba(120,220,120,0.75);
}

.enemyIcon{
width:36px;
height:36px;
border-radius:50%;
border:2px solid rgba(255,255,255,0.8);
box-sizing:border-box;
}

.enemy-beetle{
background-image:url("beetle.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
background-color:#000;
}

.enemy-spider{
background-image:url("spider.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
background-color:#000;
}

.enemy-scorpion{
background-image:url("scorpion.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
background-color:#000;
}

.spawn-food{
background-image:url("bush.png");
background-size:contain;
background-repeat:no-repeat;
background-position:center;
background-color:#000;
}

.panel{

background:rgba(0,0,0,0.7);
padding:10px;
margin-bottom:10px;
border-radius:10px;

}

.simButton{
display:block;
width:100%;
margin-top:10px;
padding:10px 12px;
border:none;
border-radius:8px;
background:#e7d2a1;
color:#2c1e12;
font-size:15px;
cursor:pointer;
}

.simButton:hover{
background:#f2deb0;
}

.simButton.pheroActive{
background:#5c3d8a;
color:#f0e0ff;
box-shadow:0 0 8px rgba(160,90,255,0.5);
}

.simButton.pheroActive:hover{
background:#7040aa;
}

/* Pheromone legend */
.pheroLegendTitle{
font-size:13px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:rgba(255,255,255,0.7);
margin-bottom:8px;
}

.pheroLegendRow{
display:flex;
align-items:center;
gap:8px;
font-size:13px;
margin-bottom:5px;
color:#eedeff;
}

.pheroSwatch{
display:inline-block;
width:16px;
height:16px;
border-radius:4px;
flex-shrink:0;
opacity:0.9;
}

.pheroTrail  { background:rgba(100,255,50,0.85); }
.pheroAlarm  { background:rgba(255,60,60,0.85); }
.pheroRecruit{ background:rgba(160,60,255,0.85); }
.pheroColony { background:rgba(255,210,80,0.85); }

.audioSettingRow,
.audioSettingColumn{
display:flex;
width:100%;
margin-top:10px;
font-size:14px;
color:#fff4df;
}

.audioSettingRow{
align-items:center;
justify-content:space-between;
gap:12px;
}

.audioSettingColumn{
flex-direction:column;
align-items:flex-start;
gap:6px;
}

.audioSettingColumn input,
.audioSettingRow input{
width:100%;
}

#othersPanel{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:320px;
max-width:90vw;
background:rgba(0,0,0,0.85);
border-radius:14px;
padding:20px;
box-shadow:0 0 18px rgba(0,0,0,0.8);
display:none;
z-index:20;
}

#othersPanel h2{
margin-top:0;
margin-bottom:10px;
font-size:20px;
}

#othersPanel .legalDockButtons{
margin-bottom:12px;
}

#othersPanel .legalLinkButton,
#othersPanel button[onclick="closeOthers()"]{
background:#f1d58a;
color:#24170d;
border:1px solid rgba(0,0,0,0.18);
box-shadow:0 1px 0 rgba(255,255,255,0.28) inset;
font-weight:700;
}

#othersPanel .legalLinkButton:hover,
#othersPanel button[onclick="closeOthers()"]:hover{
background:#f6e1a9;
}

#othersText{
width:100%;
box-sizing:border-box;
border-radius:6px;
border:1px solid #ccc;
padding:8px;
font-family:Arial, sans-serif;
font-size:14px;
white-space:pre-line;
overflow:auto;
}

#othersPanel button{
margin-top:10px;
padding:8px 14px;
border:none;
border-radius:8px;
cursor:pointer;
font-size:16px;
}

#othersPanel button:hover{
background:#eee;
}

/* ========================
   ANT STATS PANEL
======================== */

.antStatsPanel{
position:fixed;
bottom:16px;
left:14px;
min-width:210px;
background:rgba(18,14,12,0.94);
border:1px solid rgba(240,194,125,0.5);
border-radius:14px;
padding:12px 14px 10px;
color:#fff4df;
z-index:20;
box-shadow:0 6px 28px rgba(0,0,0,0.55);
backdrop-filter:blur(6px);
pointer-events:auto;
}

.antStatsHeader{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:8px;
font-weight:700;
font-size:15px;
color:#f0c27d;
gap:10px;
}

.antStatsClose{
background:none;
border:none;
color:rgba(255,255,255,0.55);
cursor:pointer;
font-size:20px;
line-height:1;
padding:0;
flex-shrink:0;
transition:color 0.12s;
}

.antStatsClose:hover{
color:#fff;
}

.antStatsList{
font-size:13px;
line-height:1;
}

.antStatRow{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
padding:3px 0;
border-bottom:1px solid rgba(255,255,255,0.07);
}

.antStatRow:last-child{
border-bottom:none;
}

.antStatLabel{
color:rgba(255,255,255,0.6);
white-space:nowrap;
}

.antStatValue{
color:#fff4df;
font-weight:600;
text-align:right;
}