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

.authBar{
position:fixed;
top:12px;
left:12px;
display:flex;
align-items:center;
gap:14px;
padding:10px 14px;
background:rgba(9,7,5,0.74);
border:1px solid rgba(255,219,158,0.18);
border-radius:16px;
box-shadow:0 16px 36px rgba(0,0,0,0.28);
backdrop-filter:blur(10px);
z-index:42;
}

.accountPanel{
position:fixed;
top:84px;
left:12px;
z-index:41;
}

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

.accountPanelCard{
width:min(440px, calc(100vw - 24px));
padding:20px;
border-radius:22px;
background:linear-gradient(180deg, rgba(25,19,14,0.98) 0%, rgba(14,10,7,0.98) 100%);
border:1px solid rgba(255,210,148,0.22);
box-shadow:0 24px 60px rgba(0,0,0,0.48);
color:#fff4df;
}

.accountPanelHeader{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:14px;
}

.accountPanelHeader h3{
margin:0;
font-size:24px;
line-height:1.05;
}

.accountPanelClose{
width:40px;
height:40px;
border:none;
border-radius:12px;
background:rgba(255,255,255,0.08);
color:#fff4df;
font-size:24px;
cursor:pointer;
}

.accountPanelGuest[hidden],
.moderationPanel[hidden]{
display:none !important;
}

.accountPanelGuest{
padding:14px;
border-radius:14px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
font-size:14px;
line-height:1.4;
}

.accountDetailGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
margin-bottom:16px;
}

.accountDetailCard{
display:flex;
flex-direction:column;
gap:6px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
}

.accountDetailCard span,
.accountSectionTitle{
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:#c89c60;
}

.accountDetailCard strong{
font-size:14px;
line-height:1.4;
color:#fff4df;
word-break:break-word;
}

.accountSelect{
width:100%;
box-sizing:border-box;
padding:13px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(38,28,19,0.96);
color:#fff4df;
font-size:15px;
outline:none;
appearance:none;
}

.accountSelect option{
background:#24180d;
color:#fff4df;
}

.accountSectionCopy{
margin:8px 0 14px;
font-size:13px;
line-height:1.45;
color:rgba(255,244,223,0.82);
}

.moderationPanel{
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(255,255,255,0.08);
}

.whitelistSection{
margin-top:18px;
padding:14px;
border-radius:16px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
}

.whitelistEmailList{
display:flex;
flex-direction:column;
gap:8px;
max-height:160px;
overflow:auto;
}

.whitelistEmailItem,
.whitelistEmptyState{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
font-size:13px;
line-height:1.4;
color:#fff4df;
word-break:break-word;
}

.whitelistMeta{
display:block;
margin-top:4px;
font-size:11px;
letter-spacing:0.06em;
text-transform:uppercase;
color:#c89c60;
}

.authBarStatusWrap{
display:flex;
flex-direction:column;
gap:2px;
min-width:140px;
}

.authBarLabel{
font-size:11px;
letter-spacing:0.12em;
text-transform:uppercase;
color:rgba(255,255,255,0.55);
}

.authStatus{
font-size:14px;
font-weight:700;
color:#fff1d2;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:220px;
}

.authBarActions,
.authModalActions{
display:flex;
gap:8px;
align-items:center;
}

.authModalActions[hidden],
.authRegisterOnly[hidden],
.authSupportRow[hidden],
.authHint[hidden],
.authMessage[hidden]{
display:none !important;
}

.authPrimaryButton,
.authSecondaryButton{
border:none;
border-radius:12px;
padding:10px 14px;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.authPrimaryButton{
background:linear-gradient(135deg, #efcf91 0%, #c98c41 100%);
color:#24160a;
box-shadow:0 10px 24px rgba(201,140,65,0.3);
}

.authSecondaryButton{
background:rgba(255,255,255,0.08);
color:#fff3da;
border:1px solid rgba(255,255,255,0.14);
}

.authPrimaryButton:hover,
.authSecondaryButton:hover{
transform:translateY(-1px);
}

.authModal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:radial-gradient(circle at top, rgba(145,92,35,0.2), transparent 34%), rgba(0,0,0,0.78);
z-index:95;
}

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

.authModalCard{
width:min(430px, calc(100vw - 32px));
padding:22px;
border-radius:22px;
background:linear-gradient(180deg, rgba(25,19,14,0.98) 0%, rgba(14,10,7,0.98) 100%);
border:1px solid rgba(255,210,148,0.22);
box-shadow:0 24px 60px rgba(0,0,0,0.48);
color:#fff4df;
}

.authModalHeader{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
}

.authModalEyebrow{
font-size:11px;
text-transform:uppercase;
letter-spacing:0.14em;
color:#c89c60;
margin-bottom:6px;
}

.authModalHeader h2{
margin:0;
font-size:28px;
line-height:1.05;
}

.authModalClose{
width:40px;
height:40px;
border:none;
border-radius:12px;
background:rgba(255,255,255,0.08);
color:#fff4df;
font-size:24px;
cursor:pointer;
}

/* Exit nest button, styled to match app primary action and positioned bottom-center */
.exitNestBtn{
  border:none;
  border-radius:18px;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg, #efcf91 0%, #c98c41 100%);
  color:#24160a;
  box-shadow:0 12px 28px rgba(201,140,65,0.28);
  z-index:1200;
  backdrop-filter: blur(6px);
}

.exitNestBtn:hover{ transform: translateY(-2px); }

.authModalCopy{
margin:0 0 16px 0;
font-size:14px;
line-height:1.45;
color:rgba(255,244,223,0.82);
}

.authField{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:14px;
}

.authField span{
font-size:13px;
font-weight:700;
color:#f4d8a9;
}

.authField input{
width:100%;
box-sizing:border-box;
padding:13px 14px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.12);
background:rgba(255,255,255,0.06);
color:#fff4df;
font-size:15px;
outline:none;
}

.authField input:focus{
border-color:rgba(240,194,125,0.85);
box-shadow:0 0 0 3px rgba(240,194,125,0.18);
}

.accountSelect:focus{
border-color:rgba(240,194,125,0.85);
box-shadow:0 0 0 3px rgba(240,194,125,0.18);
}

.authField input::placeholder{
color:rgba(255,255,255,0.4);
}

.authConsentGroup{
display:flex;
flex-direction:column;
gap:8px;
margin:14px 0 6px;
padding:12px;
border-radius:14px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
}

.authRegisterOnly{
display:flex;
flex-direction:column;
gap:12px;
margin-top:4px;
}

.authConsentRow{
display:flex;
align-items:flex-start;
gap:10px;
font-size:13px;
line-height:1.4;
color:#f5e5c8;
cursor:pointer;
}

.authConsentRow input{
margin-top:2px;
accent-color:#f0c27d;
}

.authConsentRow a{
color:#f0c27d;
font-weight:700;
text-decoration:none;
}

.authConsentRow a:hover{
text-decoration:underline;
}

.authActionButton{
flex:1;
justify-content:center;
}

.authMessage{
margin:0 0 14px 0;
padding:10px 12px;
border-radius:12px;
font-size:13px;
line-height:1.4;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
}

.authMessage.error{
background:rgba(125,22,22,0.88);
border-color:rgba(255,166,166,0.22);
color:#fff3f0;
}

.authMessage.success{
background:rgba(39,91,43,0.9);
border-color:rgba(143,229,154,0.24);
color:#effff1;
}

.authHint{
margin-top:12px;
font-size:12px;
text-align:center;
color:rgba(255,255,255,0.5);
}

.authSupportRow{
display:flex;
justify-content:flex-end;
margin-top:4px;
}

.authTextButton{
padding:0;
border:none;
background:transparent;
color:#f0c27d;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.authTextButton:hover{
text-decoration:underline;
}

@media (max-width: 640px){
.authBar{
right:12px;
left:12px;
justify-content:space-between;
}

.authBarActions{
flex-wrap:wrap;
justify-content:flex-end;
}

.accountPanel{
right:12px;
left:12px;
top:96px;
}

.accountPanelCard{
width:auto;
}

.accountDetailGrid{
grid-template-columns:1fr;
}
}

.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);
width:min(560px, calc(100vw - 28px));
}

.menuBox h1{
color:#fff4df;
letter-spacing:0.03em;
}

.languageSwitcher{
position:fixed;
top:12px;
right:12px;
display:flex;
width:fit-content;
max-width:calc(100vw - 16px);
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;
}

.gameActive .authBar{
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:flex;
flex-direction:column;
align-items:center;
width:100%;
margin-top:14px;
font-size:12px;
color:rgba(255,255,255,0.8);
letter-spacing:0.04em;
gap:4px;
}

.menuDiscordLink{
color:#f0c27d;
text-decoration:none;
font-weight:700;
}

.menuDiscordLink:hover{
text-decoration:underline;
}

.menuFooterMeta{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.menuVersion{
font-weight:700;
text-align: left;
gap:6px;
}

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

.menuFooterSpacer{
display:none;
}

#speciesPicker,
#settings,
.achievementsPanel,
#othersPanel{
margin-top:15px;
padding:15px;
background:rgba(255,255,255,0.12);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
box-shadow:0 12px 28px rgba(0,0,0,0.22);
backdrop-filter:blur(6px);
color:#fff4df;
}

#speciesPicker{
text-align:center;
}

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

.speciesLockHint{
margin:0 0 12px 0;
padding:8px 10px;
border-radius:10px;
background:rgba(255,255,255,0.08);
color:#f2ddba;
font-size:12px;
line-height:1.35;
}

.speciesGrid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 170px));
gap:12px;
justify-content:center;
align-items:start;
}

.speciesCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:170px;
  box-sizing:border-box;
  padding:12px;
  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.locked{
position:relative;
opacity:0.72;
border-color:rgba(255,255,255,0.12);
background:rgba(255,255,255,0.04);
overflow:hidden;
}

.speciesCard.locked::before{
content:"";
position:absolute;
top:12px;
right:12px;
width:34px;
height:34px;
border-radius:10px;
background:rgba(8,7,5,0.86) url("lock.png") center/18px 18px no-repeat;
box-shadow:0 8px 18px rgba(0,0,0,0.28);
}

.speciesCard.locked::after{
content:attr(data-lock-reason);
position:absolute;
left:10px;
right:10px;
bottom:10px;
padding:6px 8px;
border-radius:10px;
background:rgba(8,7,5,0.84);
color:#f3d39c;
font-size:11px;
font-weight:700;
letter-spacing:0.04em;
}

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

.speciesCard span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:2.8em;
  text-align:center;
  line-height:1.15;
  font-weight:700;
}

/* Place More info button under the label and make it full width */
.speciesCard .moreInfoBtn{
  width:100%;
  margin-top:6px;
}

.speciesCard img[style*="visibility: hidden"]{
background:rgba(255,255,255,0.04);
}

@media (max-width: 760px){
.speciesGrid{
grid-template-columns:repeat(2, minmax(0, 170px));
}
}

@media (max-width: 520px){
.speciesGrid{
grid-template-columns:minmax(0, 170px);
}
}

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

.menuBox > button{
display:block;
width:200px;
padding:12px;
margin:6px auto;
font-size:18px;
border:1px solid rgba(255,255,255,0.08);
border-radius:12px;
background:rgba(255,255,255,0.12);
box-shadow:0 10px 20px rgba(0,0,0,0.18);
color:#fff4df;
font-weight:700;
cursor:pointer;
}

.menuBox > button:hover{
transform:translateY(-1px);
background:rgba(255,255,255,0.18);
box-shadow:0 12px 24px rgba(0,0,0,0.26);
}

#settings{
display:none;
}

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

.modeSelector{
margin:0 0 14px 0;
padding:10px;
border:1px solid rgba(255,255,255,0.10);
border-radius:10px;
}

.modeSelector legend{
padding:0 6px;
font-size:14px;
font-weight:700;
}

.modeOption{
display:flex !important;
align-items:center;
gap:8px;
margin-top:8px;
font-size:14px;
}

.modeOption input{
margin:0;
}

.settingsHint{
margin-top:10px;
font-size:12px;
line-height:1.35;
color:rgba(255,244,223,0.78);
}

#sandboxControls[hidden]{
display:none;
}

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

.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;
}

.achievementsPanel{
text-align:left;
}

.achievementsPanel h3{
margin:0 0 10px 0;
font-size:18px;
color:#fff4df;
text-align:center;
}

.achievementModeStatus{
margin-bottom:10px;
padding:8px 10px;
border-radius:10px;
background:rgba(255,255,255,0.08);
color:#f2ddba;
font-size:12px;
line-height:1.35;
}

.achievementSummary{
padding:12px;
border-radius:14px;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.08);
display:flex;
flex-direction:column;
gap:8px;
}

.achievementSummaryTitle,
.achievementRewardsTitle{
font-size:12px;
font-weight:700;
letter-spacing:0.06em;
text-transform:uppercase;
color:#f0c27d;
}

.achievementSummaryPercent{
font-size:20px;
font-weight:700;
color:#fff4df;
}

.achievementProgressBar{
height:10px;
border-radius:999px;
background:rgba(255,255,255,0.08);
overflow:hidden;
}

.achievementProgressFill{
height:100%;
border-radius:999px;
background:linear-gradient(90deg, #c98c41 0%, #efcf91 100%);
}

.achievementSummaryMeta{
font-size:12px;
color:rgba(255,255,255,0.78);
}

.achievementRewardsSummary{
display:flex;
flex-direction:column;
gap:8px;
padding-top:4px;
}

.achievementRewardChips{
display:flex;
flex-wrap:wrap;
gap:8px;
}

.achievementRewardChip{
padding:6px 9px;
border-radius:999px;
background:rgba(240,194,125,0.15);
border:1px solid rgba(240,194,125,0.3);
font-size:11px;
font-weight:700;
color:#fff0cf;
}

.achievementRewardsEmpty{
font-size:12px;
line-height:1.4;
color:rgba(255,255,255,0.72);
}

.achievementList{
display:flex;
flex-direction:column;
gap:12px;
max-height:300px;
overflow:auto;
}

.achievementCategory{
display:flex;
flex-direction:column;
gap:8px;
}

.achievementCategoryTitle{
font-size:13px;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
color:#f0c27d;
}

.achievementCard{
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.08);
}

.achievementCard.unlocked{
background:rgba(240,194,125,0.18);
border-color:rgba(240,194,125,0.34);
}

.achievementCardTitle{
font-size:14px;
font-weight:700;
color:#fff4df;
}

.achievementCardBody{
margin-top:4px;
font-size:12px;
line-height:1.4;
color:rgba(255,255,255,0.8);
}

.achievementCardReward{
margin-top:6px;
font-size:11px;
font-weight:700;
color:#f6d59f;
}

.achievementCardMeta{
margin-top:6px;
font-size:11px;
letter-spacing:0.04em;
text-transform:uppercase;
color:#c89c60;
}

.achievementToast{
position:absolute;
left:50%;
top:58px;
transform:translateX(-50%);
min-width:min(340px, calc(100vw - 24px));
max-width:min(420px, calc(100vw - 24px));
padding:12px 14px;
border-radius:14px;
background:rgba(21,16,11,0.94);
border:1px solid rgba(240,194,125,0.34);
box-shadow:0 14px 28px rgba(0,0,0,0.35);
color:#fff4df;
font-size:13px;
line-height:1.35;
text-align:center;
z-index:18;
}

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

.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;
}

.gameSettingsModal{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:rgba(0,0,0,0.72);
z-index:22;
}

.gameSettingsCard{
width:min(420px, calc(100vw - 32px));
margin:0;
padding:18px;
border-radius:18px;
box-shadow:0 18px 40px rgba(0,0,0,0.5);
}

.gameSettingsHeader{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:8px;
}

.gameSettingsHeader .panelHeading{
margin-bottom:0;
font-size:20px;
}

.gameSettingsClose{
width:38px;
height:38px;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.08);
color:#fff4df;
font-size:24px;
cursor:pointer;
}

.gameSettingsActions{
display:flex;
flex-direction:column;
gap:10px;
margin-top:16px;
}

.speedControlGrid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:8px;
width:100%;
}

.speedControlButton{
padding:10px 0;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.08);
color:#fff4df;
font-size:14px;
font-weight:700;
cursor:pointer;
transition:transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

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

.speedControlButton.speedSelected{
background:#f0c27d;
color:#2b1d10;
box-shadow:0 10px 18px rgba(240,194,125,0.18);
}

.speedControlButton.speedLocked{
opacity:0.55;
cursor:not-allowed;
background:rgba(255,255,255,0.05);
}

.speedControlHint{
margin-top:8px;
font-size:12px;
line-height:1.35;
color:#f0c27d;
}

.testerModePanel{
padding-top:8px;
border-top:1px solid rgba(255,255,255,0.08);
}

.testerModePanel[hidden],
.testerMetricsPanel[hidden],
.gameSettingsModeSelector[hidden],
#gameSettingsModeHint[hidden],
.testerSpeedButton[hidden]{
display:none !important;
}

.testerModeToggleButton{
padding:12px 14px;
}

.testerMetricsPanel{
display:flex;
flex-direction:column;
gap:8px;
margin-top:8px;
padding:10px;
border-radius:12px;
background:rgba(255,255,255,0.05);
}

.testerMetricsLabel{
font-size:12px;
font-weight:700;
letter-spacing:0.04em;
text-transform:uppercase;
color:#f0c27d;
}

.testerSpawnGrid{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:8px;
}

.testerSpawnButton{
padding-inline:10px;
}

#fpsGraph{
width:100%;
height:80px;
border-radius:10px;
background:rgba(9,12,8,0.65);
}

.gameSettingsMenuButton{
background:#6f5339;
color:#fff4df;
}

.gameSettingsMenuButton:hover{
background:#846247;
}

.gameSettingsResumeButton{
background:#f0c27d;
color:#2b1d10;
}

.gameSettingsResumeButton:hover{
background:#f5d39a;
}

#game.ui-collapsed #enemyPanel,
#game.ui-collapsed #gameSettingsPanel,
#game.ui-collapsed #graphGrid,
#game.ui-collapsed .antStatsPanel{
display:none !important;
}

#game.ui-collapsed #ui{
width:170px;
overflow:visible;
max-height:none;
}

#game.ui-collapsed #hudPanel{
padding:8px;
margin-bottom:0;
}

#game.ui-collapsed #hudPanel span,
#game.ui-collapsed #hudPanel br,
#game.ui-collapsed #toggleMusicSettingsBtn,
#game.ui-collapsed #pheromoneViewBtn{
display:none;
}

#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;
}

@media (max-width: 600px) {
  .authBar {
    top: 80px;           /* nach unten schieben */
    left: 50%;           /* in die Mitte */
    transform: translateX(-50%); /* perfekt zentrieren */
  }

  .languageSwitcher {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }
}

.authStatus{
max-width:96px;
font-size:12px;
}

.authBar .authPrimaryButton,
.authBar .authSecondaryButton{
 min-height:30px;
 padding:5px 8px;
 font-size:11px;
 border-radius:9px;
 box-shadow:none;
 line-height:1;
 }

.authBarLabel{
 font-size:10px;
 }

.authBarActions{
 gap:6px;
}

.authModalCard{
padding:18px;
border-radius:18px;
}

.authModalHeader h2{
font-size:24px;
}

.authModalActions{
flex-direction:column;
}

.authActionButton{
width:100%;
}

/* 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;
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;
}

#othersText.documentView{
padding:0;
background:rgba(248, 244, 244, 0.72);
overflow:hidden;
}

.legalDocumentFrame{
display:block;
width:100%;
min-height:220px;
height:42vh;
border:0;
background:rgba(0,0,0,0.72);
color:#f7f1e3;
}

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

#othersPanel button:hover{
background:rgba(255,255,255,0.18);
}

/* ========================
   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;
}

.antStatControlButton{
width:100%;
margin-top:8px;
padding:9px 12px;
border:none;
border-radius:10px;
background:#f0c27d;
color:#2b1d10;
font-size:13px;
font-weight:700;
cursor:pointer;
}

.antStatControlButton:hover{
background:#f5d39a;
}

@media (max-width: 700px){
body{
overflow:hidden;
}

#game{
overflow:hidden;
}

canvas#canvas{
width:100vw;
height:auto;
max-height:68vh;
}

#ui{
left:150px;
right:8px;
top:8px;
bottom:calc(36vh + 16px);
width:auto;
max-height:34vh;
overflow:auto;
gap:6px;
}

#enemyPanel{
left:8px;
top:8px;
width:128px;
padding:8px;
font-size:11px;
}

#enemyPanel h3{
font-size:13px;
margin-bottom:6px;
}

.spawnGroupTitle{
margin:8px 0 4px 0;
font-size:10px;
}

.enemySlot{
padding:5px 6px;
gap:6px;
margin-bottom:4px;
border-radius:7px;
}

.enemyIcon{
width:26px;
height:26px;
border-width:1px;
}

.panel{
padding:6px 7px;
margin-bottom:5px;
border-radius:8px;
font-size:12px;
}

.panelHeading{
font-size:12px;
margin-bottom:4px;
}

.simButton{
margin-top:5px;
padding:6px 8px;
font-size:12px;
border-radius:7px;
}

#graphGrid{
position:fixed;
left:8px;
right:8px;
bottom:8px;
width:auto;
max-height:36vh;
overflow:auto;
grid-template-columns:1fr;
gap:6px;
z-index:6;
}

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

#graphGrid canvas,
#minimap,
#foodGraph,
#broodGraph,
#popGraph{
width:100% !important;
height:auto;
}

#foodGraph,
#broodGraph,
#popGraph{
max-height:44px;
}

#minimap{
max-height:70px;
}

.taskList{
font-size:10px;
gap:4px;
}

.taskListItem{
gap:6px 8px;
padding:5px 6px;
border-radius:8px;
}

.taskListCount{
font-size:10px;
}

#placementMessage{
top:8px;
max-width:calc(100vw - 16px);
font-size:12px;
padding:8px 10px;
}

.antStatsPanel{
max-width:calc(100vw - 16px);
font-size:11px;
}

.antStatsHeader{
padding:6px 8px;
font-size:12px;
}

.antStatsList{
font-size:11px;
}

.antStatRow{
padding:4px 0;
gap:10px;
}

.legalDock{
width:calc(100vw - 16px);
left:8px;
transform:none;
bottom:8px;
padding:8px 10px;
}

.legalDockBody{
max-height:16vh;
font-size:11px;
}

.legalLinkButton,
.legalDockClose{
font-size:11px;
padding:5px 7px;
}

.languageSwitcher{
top:8px;
right:8px;
gap:6px;
padding:6px 8px;
}

.languageButton{
min-width:36px;
height:30px;
}

.languageFlag{
width:22px;
height:16px;
}

.achievementToast{
top:44px;
min-width:0;
width:calc(100vw - 16px);
font-size:12px;
padding:10px 12px;
}
}

@media (orientation: landscape) and (max-height: 500px){
#enemyPanel{
width:118px;
padding:6px;
font-size:10px;
}

#enemyPanel h3{
font-size:12px;
margin-bottom:5px;
}

.spawnGroupTitle{
margin:6px 0 3px 0;
font-size:9px;
}

.enemySlot{
padding:4px 5px;
gap:5px;
margin-bottom:3px;
}

.enemyIcon{
width:24px;
height:24px;
}

#ui{
left:136px;
right:8px;
top:8px;
width:auto;
max-height:30vh;
}

.panel{
padding:5px 6px;
margin-bottom:4px;
font-size:11px;
}

.panelHeading{
font-size:11px;
margin-bottom:3px;
}

.simButton{
margin-top:4px;
padding:5px 7px;
font-size:11px;
border-radius:6px;
}

#graphGrid{
gap:4px;
max-height:30vh;
}

#foodGraph,
#broodGraph,
#popGraph{
max-height:36px;
}

#minimap{
max-height:56px;
}
}

.calendarTriggerButton{
display:inline-flex;
align-items:center;
justify-content:center;
margin-left:8px;
padding:8px 14px;
border:1px solid rgba(255,221,173,0.28);
border-radius:999px;
background:linear-gradient(135deg, rgba(87,52,27,0.96) 0%, rgba(46,27,14,0.96) 100%);
color:#fff2d7;
font-size:13px;
font-weight:700;
letter-spacing:0.03em;
box-shadow:0 12px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,245,228,0.08);
cursor:pointer;
transition:transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.calendarTriggerButton:hover{
transform:translateY(-1px);
border-color:rgba(240,194,125,0.55);
box-shadow:0 16px 28px rgba(0,0,0,0.34), 0 0 0 1px rgba(240,194,125,0.16);
}

.calendarOverlay{
position:fixed;
inset:0;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:radial-gradient(circle at top, rgba(190,120,52,0.18), transparent 30%), rgba(7,5,3,0.82);
backdrop-filter:blur(10px);
z-index:999999;
}

.calendarCard{
width:min(880px, calc(100vw - 32px));
max-height:min(88vh, 920px);
overflow:auto;
padding:22px;
border-radius:26px;
border:1px solid rgba(255,214,153,0.2);
background:
  radial-gradient(circle at top right, rgba(240,194,125,0.16), transparent 28%),
  linear-gradient(180deg, rgba(37,23,15,0.98) 0%, rgba(17,11,8,0.98) 100%);
box-shadow:0 28px 80px rgba(0,0,0,0.52);
color:#fff3dd;
}

.calendarHeader{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:18px;
}

.calendarEyebrow{
margin-bottom:6px;
font-size:11px;
font-weight:700;
letter-spacing:0.18em;
text-transform:uppercase;
color:#c89c60;
}

.calendarTitle{
margin:0;
font-size:30px;
line-height:1;
color:#fff6e7;
}

.calendarSubtitle{
margin-top:8px;
font-size:14px;
line-height:1.4;
color:rgba(255,243,221,0.78);
}

.calendarCloseButton{
padding:10px 14px;
border:1px solid rgba(255,255,255,0.12);
border-radius:12px;
background:rgba(255,255,255,0.06);
color:#fff3dd;
font-size:13px;
font-weight:700;
cursor:pointer;
transition:background 0.14s ease, transform 0.14s ease;
}

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

.calendarMonthGrid{
display:grid;
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:10px;
margin-bottom:16px;
}

.calendarMonthButton{
padding:12px 14px;
border:1px solid rgba(255,231,194,0.08);
border-radius:16px;
background:linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.03) 100%);
color:#ead7b8;
font-size:13px;
font-weight:700;
text-align:left;
cursor:pointer;
transition:transform 0.14s ease, border-color 0.14s ease, background 0.14s ease, box-shadow 0.14s ease;
}

.calendarMonthButton:hover{
transform:translateY(-1px);
border-color:rgba(240,194,125,0.3);
}

.calendarMonthButton.is-selected{
border-color:rgba(240,194,125,0.58);
background:linear-gradient(135deg, rgba(240,194,125,0.26) 0%, rgba(139,83,29,0.3) 100%);
box-shadow:0 10px 22px rgba(0,0,0,0.22);
color:#fff8ec;
}

.calendarDayGrid{
display:grid;
grid-template-columns:repeat(6, minmax(0, 1fr));
gap:10px;
padding:16px;
border-radius:20px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
}

.calendarDayButton{
aspect-ratio:1;
border:1px solid rgba(255,255,255,0.08);
border-radius:18px;
background:linear-gradient(180deg, rgba(33,22,16,0.96) 0%, rgba(23,15,10,0.96) 100%);
color:#f7ead1;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.calendarDayButton:hover{
transform:translateY(-1px) scale(1.02);
border-color:rgba(240,194,125,0.35);
box-shadow:0 10px 18px rgba(0,0,0,0.2);
}

.calendarDayButton.is-selected{
border-color:rgba(255,230,185,0.74);
background:linear-gradient(135deg, #f0c27d 0%, #c78038 100%);
color:#2d1a0b;
box-shadow:0 14px 24px rgba(201,140,65,0.28);
}

.calendarFooter{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:16px;
}

.calendarHint{
font-size:13px;
line-height:1.45;
color:rgba(255,243,221,0.7);
}

@media (max-width: 720px){
.calendarOverlay{
padding:14px;
align-items:flex-end;
}

.calendarCard{
width:100%;
max-height:92vh;
padding:18px;
border-radius:24px 24px 18px 18px;
}

.calendarHeader,
.calendarFooter{
flex-direction:column;
align-items:stretch;
}

.calendarMonthGrid{
grid-template-columns:repeat(2, minmax(0, 1fr));
}

.calendarDayGrid{
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:8px;
padding:12px;
}
}