body{
  background  : #98a0a5/*#bfbfbf*/;
  color : #bdc8d7;
}
h4{
  padding-left	: 5px;
  margin	: 10px 0px;
  border-left	: 15px solid #cad3df;
  border-bottom	: 1px solid #cad3df;
  width	: 740px;
  /*word-break	: break-all;*/
  /*border-top	: 1px solid #cad3df;
  border-right	: 1px solid #cad3df;
*/
}
.bgcolor{background-color	: #10151b;}
.light{
  /* 绅达硷梧 */
  color	: #40526a;
  font-size	: 80%;
}
.unselect{color	: #506685;}
.divide{
  border-left	: 1px solid #070b0e;
  width	: 1px;
  background	: #070b0e;
  margin	: 0px 15px;
}
.carpet_frame{
  text-align:center;
  word-break:break-all;
}
.carpet0{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(image/carpet011.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
.carpet1{
  padding-bottom	: 20px;
  margin	: 20px 0 3px 0;
  background-image : url(image/carpet010.gif);
  background-position	: bottom center;
  background-repeat	: no-repeat;
}
div#main_frame{
  width	: 780px;
  min-width	: 780px;
  position: relative;
  min-height	: 100%;
  /*margin	: 0 20px 0 40px;
  */
  border-left	: 1px solid #070b0e;
  border-right	: 1px solid #070b0e;
  border-bottom	: 1px solid #070b0e;
  background	: #10151b;
  text-align	: left;
  margin:0 auto;
}
#menu{
  padding	: 8px 10px 5px 10px;
  border-top	: 1px solid #070b0e;
  background	: #304052;
}
#menu2{
  border-top		: 1px dotted #070b0e;
  border-bottom	: 1px solid #070b0e;
  padding	: 5px 10px 2px 10px;
  background	: #202935;
}
#contents{
  padding-bottom:6em;
}
#title{
  padding	: 15px;
  width	: auto;
}
#foot{
  width	: 100%;
  padding	: 8px 0 4px 0;
  background	: #1b222c;
  border-top	: 1px solid #070b0e;
  text-align	: center;
  color	: #5a708f;
  position: absolute;
  bottom: 0;
}
.error{
  color	: red;
  font-weight : bold;
  font-size	: 100%;
}
.result{
  color	: #66cc66;
  font-weight : bold;
  font-size	: 100%;
}
.margin15{
  margin:15px;
}
a{
  text-decoration	: none;
  color	: #8a9cb7;
  font-weight	: bold;
}
a:hover{
  text-decoration	: underline;
  color	: #cbd3de;
  font-weight	: bold;
}
.a0{
  /* ヘルプ≈?∽の咖(だけ) */
  text-decoration	: none;
  color	: #c69500;
  font-weight	: bold;
}
.a0:hover{
  /*  */
  text-decoration	: underline;
  color	: #ffcc33;
  font-weight	: bold;
}
.td1{
  background	: #242f3c;
  border-bottom	: 1px solid #afbdcf;
  padding	: 10px 20px;
}
.td2{
  background	: #384b5f;
  border-bottom	: 1px solid #afbdcf;
  padding	: 3px;
}
.td3{
  background	: #567294;
  border-bottom	: 1px solid #afbdcf;
  padding	: 3px;
}
.td4{
  background	: #4a6380;
  padding	: 3px;
}
.td5{
  background	: #6f8baa;
  padding	: 3px;
}
.td6{
  background-color	: #304052;
  padding	: 3px;
}
.td7{
  border-left	: 1px solid #304052;
  border-bottom	: 1px solid #304052;
  padding	: 3px;
}
.td8{
  border-left	: 1px solid #304052;
  border-right	: 1px solid #304052;
  border-bottom	: 1px solid #304052;
  padding	: 3px;
}
.td9{
  background-color	: 283544;
  padding	: 3px;
}
.tdToggleBg{
  background-color	: #202935;
}
select{
  background	: #91a2bb;
  color	: #10151b;
}
.select0{
  background	: #768bab;
  color	: #10151b;
}
.text{
  padding:1px 5px 0px 5px;
  color	: #10151b;
  border	: 1px solid #1a232d;
  background	: #91a2bb/*#cad3df*/;
}
.btn{
  font-size : 12px;
  padding	: 5px 8px 2px 8px;
  margin-top	: 5px;
  margin-right	: 5px;
  font-weight:bold; 
  text-align:center;
  color	: #181818;
  border:1px solid #334357;
  background : url(image/btn_bk01.gif) repeat-x left top;
}
/*** 里飘茶烫脱 ***/
.btl_img{
  background	: #070b0e;
  padding	: 3px;
}
.teams{
  width		: 50%;
  text-align	: center;
  padding	: 10px;
}
.break{
  border-bottom:1px solid #070b0e;
}
.break-top{
  border-top:1px solid #070b0e;
}
.hpsp{
  padding-left:20px;
}
/* 焊娄 */
.bl{
  /* 踏蝗脱 */
	width:49%;
  float:left;
  border-right:1px solid #070b0e;
}
/* 宝娄 */
.br{
  /* 踏蝗脱 */
	width:50%;
  float:right;
}
/* 宝娄 */
.ttd1{
  border-left	: 1px solid #070b0e;
  padding-left	: 10px;
}
.ttd2{
  /* 焊娄 */
  padding-left	: 10px;
}
.town{
  padding-left	: 0px;
  height:220px;
  /*background-position	: top left;*/
  background-position	: top right;
  background-repeat	: no-repeat;
}.char-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #202935;
  border: 1px solid #304052;
  border-radius: 10px;
  box-shadow: 0 2px 8px #0004;
  width: 140px;
  margin: 12px;
  padding: 12px 8px 8px 8px;
  transition: box-shadow 0.2s;
}
.char-card:hover {
  box-shadow: 0 4px 16px #0006;
  border-color: #40526a;
}
.char-card-img {
  width: 80px;
  height: 80px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.char-card-img img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 6px;
  background: #10151b;
}
.char-card-info {
  text-align: center;
  width: 100%;
}
.char-card-name {
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 2px;
  color: #cbd3de;
}
.char-card-level {
  font-size: 0.95em;
  color: #8a9cb7;
}
.char-card .charge {
  color: #ffcc33;
}

/* 统一卡牌样式：char-card/sgs-card */
.char-card, .sgs-card {
  width: 80px;
  height: 120px;
  background-size: cover;
  background-position: center;
  border: 2px solid rgb(66, 65, 64);
  border-radius: 12px;
  box-shadow: 0 4px 16px #0006, 0 0 0 2px #232b36 inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 8px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}
.char-card.selected, .sgs-card.selected {
  border-color: #11ed71;
  box-shadow: 0 8px 24px #0008, 0 0 0 2px #ffcc33 inset;
}
.char-card-title, .char-card-footer, .sgs-card-title, .sgs-card-footer {
  width: 100%;
  position: absolute;
  left: 0;
  padding: 2px 0 2px 0;
  font-size: 0.95em;
  text-align: center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.char-card-title, .sgs-card-title {
  top: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0));
  color: #fffbe6;
  border-radius: 10px 10px 0 0;
  font-weight: bold;
  letter-spacing: 1px;
  border-bottom: 1px solid #b88a2a22;
  box-shadow: 0 1px 4px #0003;
}
.char-card-footer, .sgs-card-footer {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0));
  color: #ffcc33;
  border-radius: 0 0 10px 10px;
  border-top: 1px solid #b88a2a22;
  box-shadow: 0 -1px 4px #0003;
}
.char-card:hover .char-card-title,
.char-card:hover .char-card-footer,
.sgs-card:hover .sgs-card-title,
.sgs-card:hover .sgs-card-footer {
  opacity: 1;
  pointer-events: auto;
}
.char-card-info, .sgs-card-info {
  flex: 1;
  width: 100%;
  text-align: center;
  color: #f5e6c0;
  font-size: 0.85em;
  padding: 0 4px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.char-card::before, .sgs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 10, 0.18);
  z-index: 1;
}
.char-card input[type=checkbox], .sgs-card input[type=checkbox] {
  display: none;
}
.char-card label, .sgs-card label {
  color: #ffcc33;
  font-size: 90%;
  cursor: pointer;
  display: none;
}
.char-card .selected-mark, .sgs-card .selected-mark {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 1.3em;
  color: #ffcc33;
  pointer-events: none;
  z-index: 2;
  text-shadow: 0 2px 6px #000a;
  display: none;
}
.char-card.selected .selected-mark, .sgs-card.selected .selected-mark {
  display: block;
}

/* 道具详情样式 - 使用更具体的类名避免冲突 */
.item-detail-enhanced {
  background: #202935;
  border: 1px solid #304052;
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.item-header-enhanced {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #304052;
}

.item-icon-enhanced {
  width: 32px;
  height: 32px;
  margin-right: 12px;
  border-radius: 4px;
  background: #10151b;
  padding: 2px;
}

.item-name-enhanced {
  flex: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.refine-level-enhanced {
  color: #ffcc33;
  font-weight: bold;
  font-size: 0.9em;
}

.add-name-enhanced {
  color: #66cc66;
  font-weight: bold;
  font-size: 0.9em;
}

.base-name-enhanced {
  color: #cbd3de;
  font-weight: bold;
  font-size: 1.1em;
}

.item-type-enhanced {
  color: #8a9cb7;
  font-size: 0.85em;
  font-style: italic;
}

.item-amount-enhanced {
  color: #ffcc33;
  font-weight: bold;
  font-size: 0.9em;
}

.item-stats-enhanced {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stat-group-enhanced {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stat-item-enhanced {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
}

.stat-item-enhanced.dmg {
  background: rgba(255, 100, 100, 0.2);
  color: #ff6666;
  border: 1px solid rgba(255, 100, 100, 0.3);
}

.stat-item-enhanced.spdmg {
  background: rgba(100, 100, 255, 0.2);
  color: #6666ff;
  border: 1px solid rgba(100, 100, 255, 0.3);
}

.stat-item-enhanced.recover {
  background: rgba(100, 255, 100, 0.2);
  color: #66ff66;
  border: 1px solid rgba(100, 255, 100, 0.3);
}

.stat-item-enhanced.support {
  background: rgba(255, 255, 100, 0.2);
  color: #ffff66;
  border: 1px solid rgba(255, 255, 100, 0.3);
}

.stat-item-enhanced.charge {
  background: rgba(255, 150, 100, 0.2);
  color: #ff9666;
  border: 1px solid rgba(255, 150, 100, 0.3);
}

.stat-item-enhanced.option {
  background: rgba(150, 150, 150, 0.2);
  color: #cccccc;
  border: 1px solid rgba(150, 150, 150, 0.3);
  font-size: 0.8em;
}

.craft-requirements-enhanced {
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #304052;
}

.craft-title-enhanced {
  color: #ffcc33;
  font-weight: bold;
  margin-bottom: 8px;
  font-size: 0.95em;
}

.craft-items-enhanced {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.craft-item-enhanced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(48, 64, 82, 0.5);
  border-radius: 4px;
  border: 1px solid #304052;
}

.craft-icon-enhanced {
  width: 20px;
  height: 20px;
  border-radius: 2px;
}

.craft-name-enhanced {
  color: #cbd3de;
  font-size: 0.9em;
  flex: 1;
}

.craft-amount-enhanced {
  color: #ffcc33;
  font-weight: bold;
  font-size: 0.85em;
}

.craft-owned-enhanced {
  color: #66cc66;
  font-size: 0.8em;
  font-style: italic;
}

/* 游戏通知弹窗样式 */
.game-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #1a2332 0%, #2d3748 100%);
  border: 2px solid #4a5568;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.1);
  padding: 20px;
  min-width: 300px;
  max-width: 500px;
  z-index: 10000;
  animation: notificationSlideIn 0.3s ease-out;
  backdrop-filter: blur(10px);
}

.game-notification.success {
  border-color: #48bb78;
  box-shadow: 0 8px 32px rgba(72, 187, 120, 0.3), 0 0 0 1px rgba(72, 187, 120, 0.2);
}

.game-notification.error {
  border-color: #f56565;
  box-shadow: 0 8px 32px rgba(245, 101, 101, 0.3), 0 0 0 1px rgba(245, 101, 101, 0.2);
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #4a5568;
}

.notification-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.notification-icon.success {
  background: linear-gradient(135deg, #48bb78, #38a169);
  color: white;
}

.notification-icon.error {
  background: linear-gradient(135deg, #f56565, #e53e3e);
  color: white;
}

.notification-title {
  color: #e2e8f0;
  font-weight: bold;
  font-size: 16px;
  margin: 0;
}

.notification-content {
  color: #cbd5e0;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.notification-button {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  border: 1px solid #718096;
  color: #e2e8f0;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  float: right;
}

.notification-button:hover {
  background: linear-gradient(135deg, #718096, #4a5568);
  border-color: #a0aec0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  animation: overlayFadeIn 0.2s ease-out;
}

@keyframes notificationSlideIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes overlayFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes notificationShake {
  0%, 100% { transform: translate(-50%, -50%); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-52%, -50%); }
  20%, 40%, 60%, 80% { transform: translate(-48%, -50%); }
}

.game-notification.error {
  animation: notificationSlideIn 0.3s ease-out, notificationShake 0.5s ease-in-out 0.3s;
}