/* ===== Infinity HD: visual moderno + mobile (adicionado pelo Claude) ===== */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* conteudo com sombra e cantos suaves */
#ContentColumn .Box { border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.55); }
#ContentColumn .TableContainer, #ContentColumn .TableContent { border-radius: 4px; }
#ContentColumn .TableContent td { line-height: 1.45; }
#ContentColumn a { transition: color .15s ease; }
#ContentColumn input[type=text], #ContentColumn input[type=password], #ContentColumn input[type=email],
#ContentColumn select, #ContentColumn textarea { border-radius: 4px; border: 1px solid #9c7f4e; padding: 3px 5px; }
#ContentColumn input:focus, #ContentColumn select:focus, #ContentColumn textarea:focus { outline: none; border-color: #d9a743; box-shadow: 0 0 0 2px rgba(217,167,67,.3); }

/* caixas laterais e menu com sombra */
#Themeboxes > div, #Loginbox, #DownloadBox, #Menu { filter: drop-shadow(0 4px 10px rgba(0,0,0,.55)); }

/* botao de menu (so aparece no celular) */
#MobileMenuBtn { display: none; flex: 0 0 100%; max-width: 364px; margin: 6px auto 4px; padding: 10px 0;
  font: bold 15px Verdana, Arial, sans-serif; color: #ffd57a; letter-spacing: .5px; cursor: pointer;
  background: linear-gradient(#3b2a14, #1d140a); border: 1px solid #c9a55a; border-radius: 6px; box-shadow: 0 3px 8px rgba(0,0,0,.5); }

/* ===== Celular / tablet ===== */
@media (max-width: 1px) {
  html, body { overflow-x: hidden; }
  body { background-attachment: scroll !important; background-size: auto 100vh !important; background-position: center top !important; min-width: 0 !important; }
  #InfinityLogoTop { position: relative !important; left: auto !important; top: auto !important; transform: none !important; text-align: center; padding: 12px 0 6px; }
  #InfinityLogoTop img { width: 80vw !important; max-width: 360px !important; }
  #Bodycontainer, #ArtworkHelper { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  #ContentRow { position: static !important; top: auto !important; display: flex; flex-direction: column; width: 100% !important; }
  #LeftArtwork { display: none !important; }
  #MenuColumn { position: static !important; order: 1; width: auto !important; margin: 0 auto 8px !important;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 0 4px; }
  #Loginbox, #DownloadBox { width: 180px !important; flex: 0 0 180px; }
  #MobileMenuBtn { display: block; }
  #Menu { flex: 0 0 180px; display: none; }
  #MenuColumn.open #Menu { display: block; }
  #ContentColumn { order: 2; position: static !important; margin: 0 4px !important; width: auto !important; min-width: 0 !important; }
  #ContentColumn table { max-width: 100%; }
  #ContentColumn .TableContainer, #ContentColumn .InnerTableContainer, #ContentColumn .TableContentContainer { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
  #ContentColumn img { max-width: 100%; height: auto; }
  #ThemeboxesColumn { order: 3; position: static !important; margin: 14px auto !important; width: auto !important; }
  #Themeboxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  #Footer { position: static !important; margin: 10px 4px !important; }
}

/* ===== FIX-MENU-HD: menu da esquerda com botoes grandes, texto dourado e visual HD ===== */
#Menu .menuitem { margin: 0 0 4px; }
#Menu .MenuButton {
	position: relative; width: 170px !important; height: 38px !important; margin: 0 auto;
	background: linear-gradient(180deg, #6b5f52 0%, #4a4037 18%, #332b25 50%, #251f1a 51%, #3a3129 88%, #5a4e42 100%) !important;
	border: 1px solid #0e0b08; border-radius: 7px;
	box-shadow: inset 0 1px 0 rgba(255, 240, 200, .28), inset 0 -2px 4px rgba(0, 0, 0, .55), 0 2px 4px rgba(0, 0, 0, .65), 0 0 0 2px #7d6a48, 0 0 0 3px #1a140e;
	cursor: pointer; overflow: visible; transition: filter .15s ease, box-shadow .15s ease;
}
#Menu .MenuButton::before, #Menu .MenuButton::after {
	content: ''; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -4px; border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff3c4 0%, #c9a24a 45%, #5a4312 100%);
	box-shadow: 0 0 2px #000; z-index: 3; pointer-events: none;
}
#Menu .MenuButton::before { left: -6px; }
#Menu .MenuButton::after { right: -6px; }
#Menu .MenuButton > div { position: relative; width: 170px !important; height: 38px !important; }
#Menu .MenuButton .Button {
	position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; border-radius: 6px;
	background: linear-gradient(180deg, rgba(255, 225, 150, .20), rgba(255, 190, 80, .06) 55%, rgba(255, 225, 150, .14)) !important;
}
#Menu .MenuButton:hover { filter: brightness(1.12); box-shadow: inset 0 1px 0 rgba(255, 240, 200, .35), inset 0 -2px 4px rgba(0, 0, 0, .5), 0 0 8px rgba(255, 190, 80, .55), 0 0 0 2px #b8954f, 0 0 0 3px #1a140e; }
#Menu .MenuButton .Lights { display: none !important; }
#Menu .MenuButton .Icon {
	left: 4px !important; top: 3px !important; width: 32px !important; height: 32px !important; z-index: 2;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .9)) saturate(1.25) brightness(1.1);
}
#Menu .MenuButton .Label {
	left: 36px !important; top: 0 !important; width: 118px !important; height: 38px !important;
	background-position: center center !important; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; z-index: 2;
}
#Menu #news_Label, #Menu #account_Label, #Menu #community_Label, #Menu #forum_Label, #Menu #library_Label,
#Menu #charbazaar_Label, #Menu #events_Label, #Menu #wars_Label, #Menu #biblioteca_Label, #Menu #shops_Label { background: none !important; }
#Menu .MenuButton .Label::after {
	font: 400 19px/1 Fondamento, 'Palatino Linotype', Georgia, serif; letter-spacing: .3px; white-space: nowrap;
	color: #ffe7a8;
	background: linear-gradient(180deg, #fff8dc 0%, #ffe39a 45%, #e0a53c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	filter: drop-shadow(0 1px 0 #000) drop-shadow(0 0 1px #000) drop-shadow(0 0 2px rgba(0, 0, 0, .9));
}
#Menu #news_Label::after { content: 'News'; }
#Menu #account_Label::after { content: 'Account'; }
#Menu #community_Label::after { content: 'Community'; }
#Menu #forum_Label::after { content: 'Forum'; }
#Menu #library_Label::after { content: 'Library'; }
#Menu #charbazaar_Label::after { content: 'Char Bazaar'; font-size: 17px; }
#Menu #events_Label::after { content: 'Events'; }
#Menu #wars_Label::after { content: 'Wars'; }
#Menu #biblioteca_Label::after { content: 'Biblioteca'; }
#Menu #shops_Label::after { content: 'Shop'; }
#Menu .MenuButton .Extend {
	left: auto !important; right: 5px !important; top: 13px !important; z-index: 2;
	filter: drop-shadow(0 0 2px rgba(80, 255, 80, .7)) brightness(1.2);
}
/* trilhos laterais ligando os botoes */
#Menu::before, #Menu::after {
	content: ''; position: absolute; top: 2px; bottom: 14px; width: 4px; z-index: 0; pointer-events: none;
	background: linear-gradient(90deg, #2a2216 0%, #c9a866 45%, #fff0c0 55%, #6b5530 100%);
	box-shadow: 0 0 2px #000;
}
#Menu::before { left: 0; }
#Menu::after { left: 175px; }
#Menu .menuitem { position: relative; z-index: 1; }
/* submenu */
#Menu .Submenu { margin: 3px 0 2px; }
#Menu .Submenuitem .SubmenuitemLabel { font: bold 11px Verdana, Arial, sans-serif; text-shadow: 0 1px 1px #000; }
#Menu a:hover .Submenuitem { background-color: rgba(255, 200, 100, .12); }
#Menu a:hover .Submenuitem .SubmenuitemLabel { color: #ffd698 !important; }