body, a, p, div, li, ul, td, th {
 	font-family: tahoma;
	font-size: 11px;
	color: black;
}
body { background: #EBEDEC; margin:10px; }

input,select,textarea {
 	font-family: tahoma;
	font-size: 11px;
}


a:hover {
	color: #24707C;
}

.h1 {
 	font-family: tahoma;
	font-size: 12px;
	font-weight: bold;
	color: black;
}


.h2 {
 	font-family: tahoma;
	font-size: 10px;
	font-weight: bold;
	color: #2A726E;
	background-color: white;
        text-transform: uppercase;
	padding: 4px;
}

A {
	COLOR: #4b5771
}

.mt {
	FONT-SIZE: 9px; COLOR: black; FONT-FAMILY: tahoma
}

.t1 TD {
	BACKGROUND-COLOR: #eaecec
}

.t2 {
	BACKGROUND-COLOR: white! important
}

.t3 {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #24707c; FONT-FAMILY: tahoma; BACKGROUND-COLOR: white! important
}

.t4 {
	FONT-WEIGHT: bold; FONT-SIZE: 10px; COLOR: #24707c; FONT-FAMILY: tahoma; BACKGROUND-COLOR: white! important
}

.t34 {font-weight: bold; font-size: 14px; color: #24707c; font-family: tahoma;}

.team1 {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #24707c; FONT-FAMILY: tahoma;
}

.team2 {
	FONT-WEIGHT: bold; FONT-SIZE: 11px; COLOR: #9A1D1D; FONT-FAMILY: tahoma;
}

.hit {
	COLOR: #555555
}

.krit {
	COLOR: #f03333
}

.htime {
	FONT-SIZE: 9px; COLOR: #555555
}

.gr {
	COLOR: #24707c
}
.grb {
	COLOR: #24707c;	FONT-WEIGHT: bold;
}
.gr2 {
	FONT-SIZE: 14px; COLOR: #24707c
}

.rd {
	COLOR: #f03333
}

.rd2 {
	COLOR: #9A1D1D
}

.bl {
	COLOR: black
}

.b1 {
 	font-family: tahoma;
	font-size: 10px;
	color: #5E5E5E;
	text-decoration: none;
	font-weight: bold;
	text-transform: uppercase;
}

.b1:hover {
	color: #5E5E5E;
}

.b2 {
 	font-family: tahoma;
	font-size: 10px;
	color: #5E5E5E;
	text-decoration: none;
	font-weight: bold;
	text-transform: lowercase;
};

.b2:hover {
	color: #5E5E5E;
}

.b3 {
 	font-family: Tahoma;
	font-size: 10px;
	color: white;
	text-decoration: none;
	font-weight: bold;
	text-transform: lowercase;
};

.b3:hover {
	color: white;
}

.b2.active {
	color:#C00106;
}

.ch1 {
 	font-family: Tahoma;
	font-size: 11px;
	color: #C00106;
	text-decoration: none;
	font-weight: bold;
};

.ch1:hover { color: #C00106;}

.ch2 {
 	font-family: Tahoma;
	font-size: 11px;
	color: #5A5C5B;
	text-decoration: none;
	font-weight: bold;

};

.ch2:link { color: #5A5C5B; }
.ch2:active { color: #5A5C5B; }
.ch2:visited { color: #5A5C5B; }
.ch2:hover { color: #C00106;}

.chpreseton {
  background-image: url(images/newdesign/top_bg2.gif);
};

.chat_date {font-size: 14px;color: #676B6E;}
.chat_date_incoming {font-size: 14px;color: #676B6E;}
.chat_date_to {font-size: 14px;color: #676B6E;}
.chat_date_private {font-size: 14px;color: #676B6E;background:#F1C3C3;text-decoration:none;}
.chat_date_to_incoming {font-size: 14px;color: #676B6E;background:#CFE2D6;}
.chat_date_private_incoming {font-size: 14px;color: #676B6E;background:#F1C3C3;}
.chat_date_clan {font-size: 14px;color: #676B6E;background:#f77;}
.chat_date_clan_incoming {font-size: 14px;color: #676B6E;background:#f77;}

.chat_sender_to {
  font-size: 14px;
  color: #4b5771;
  font-weight:bold;
}
.chat_sender {
  font-size: 14px;
  color: #4b5771;
  font-weight:bold;
}
.chat_sender1 {
  font-size: 14px;
  color: #0099FF;
  font-weight:bold;
}
.chat_sender2 {
  font-size: 14px;
  color: #FF6666;
  font-weight:bold;
}
.chat_sender_private {
  font-size: 14px;
  color: #850000;
  font-weight:bold;
}
.chat_sender_to_incoming {
  font-size: 14px;
  font-weight: bold;
  color: #4b5771;
}
.chat_sender_private_incoming {
  font-size: 14px;
  font-weight: bold;
  color: #850000;
}
.chat_sender_clan {
  font-size: 14px;
  color: #f00;
  font-weight:bold;
}
.chat_sender_clan_incoming {
  font-size: 14px;
  font-weight: bold;
  color: #f00;
}

.chat_service_to {font-size: 14px;color: #676B6E;text-decoration:none;}
.chat_service_to_incoming {font-size: 14px;color: #676B6E;text-decoration:none;}
.chat_service_private {font-size: 14px;color: #850000;text-decoration:none;}
.chat_service_private_incoming {font-size: 14px;color: #850000;text-decoration:none;}
.chat_service_clan {font-size: 14px;color: #f00;text-decoration:none;}
.chat_service_clan_incoming {font-size: 14px;color: #f00;text-decoration:none;}
.chat_message {font-size: 14px;text-decoration:none;}

.lightgray { color: #E5E6E8; }
a.lightgray {
  color: #E5E6E8;
  text-decoration: none;
  font-weight: bold;
}
.g_t_11 {
	COLOR: #767676
}

.g_t_10 {
	FONT-SIZE: 9px; COLOR: #767676
}

.bl_10 {
	FONT-SIZE: 9px; COLOR: black
}
.error {
	FONT-WEIGHT: bold; FONT-SIZE: 14px; COLOR: #f03333
}

.clan { color:#005992; text-decoration: underline; font-weight: bold; }
.clan_pers { font-family: Tahoma; font-size:10px; font-weight: normal; color:#000000; line-height:8px; }

.logo_input { font-family: Tahoma; font-size:10px; background-color: #EBEDEC; border:1px #666666 solid; }


/*GunSky*/

.gbutt, .gbutt1, .gbutt1 b, .gbutt b, .gbutt1 b b, .gbutt b b {font-size:10px;}
.gbutt input, .gbutt button, .gbutt1 input, .gbutt1 button {
	border: 0px solid;
	color: #5E5E5E;
	font-size: 10px;
	font-weight: bold;
 	font-family: tahoma;
	text-decoration: none;
	background:transparent;
	position:relative;
	top:0px;
}
.gbutt {display: inline-block; *display: inline; *zoom: 1; height: 23px; background:url(images/newdesign/big_btn_bg.gif);}
.gbutt b {display: inline-block; *display: inline; *zoom: 1; height: 23px; padding-right: 5px; background:url(images/newdesign/big_btn_r.gif) repeat-y right;}
.gbutt b b {display: inline-block; *display: inline; *zoom: 1; height: 23px; padding-left: 5px; padding-right: 0px; background: url(images/newdesign/big_btn_l.gif) repeat-y left;}

.gbutt1 {display: inline-block; *display: inline; *zoom: 1; background:url(images/newdesign/btn_bg.gif) center center repeat-x;}
.gbutt1 b {display: inline-block; *display: inline; *zoom: 1; background:url(images/newdesign/btn_r.gif) no-repeat right;}
.gbutt1 b b {display: inline-block; *display: inline; *zoom: 1; padding: 2px 4px 3px; background: url(images/newdesign/btn_l.gif) no-repeat left;}

.gbutt input b, .gbutt button b, .gbutt1 input b, .gbutt1 button b {
	background: transparent;font-size:10px;
}
.gbutt input, .gbutt button {text-transform: uppercase;padding: 0 6 0 6;height: 23px;cursor:hand;}
.gbutt1 input, .gbutt1 button {text-transform: lowercase;padding: 0 0 0 0;height: 17px;cursor:hand;}

table.collapse {border-collapse:collapse;}
.b1gray {border: 1px solid #c9c9c9;}

.ginput, .ginput b, .ginput b b {font-size:10px;}
.ginput input b, .ginput button b {
	background: transparent;font-size:10px;
}

.ginput input, .ginput button {
	border: 0px solid;
	color: #004A71;
	font-size: 11px;
	font-weight: normal;
 	font-family: tahoma;
	text-decoration: none;
	background:transparent;
	position:relative;
	top:0px;
}

.ginput {background:url(images/newdesign/input_bg.gif);}
.ginput b {}
.ginput b b {background: url(images/newdesign/input_left.gif) repeat-y left;}
.ginput input, .ginput button {padding: 2 5 2 20; height: 19px; }


.btn_full_w .gbutt1 input {width: 100%;}
/**/


/*  user info*/
.user-info-l {background: url("images/user-info_01.jpg") no-repeat; width: 16px; height: 88px;}
	.ui-l-btn {display: block; background: url(images/ui-l-btn.png) no-repeat; background-position: 0 0; width: 16px; height: 35px;}
	.ui-l-btn.ui-l-btn-red {background-position: 0 -72px;}
	.ui-l-btn.ui-l-btn-red:hover {background-position: 0 -36px;}
.user-info-c {background: url("images/user-info_02.jpg") repeat-x; height: 88px; padding: 0 5px 0 10px; text-align: center;}
	.user-info-c .frame {background: url("images/frame.png") no-repeat; display: inline-block; width: 56px; height: 56px; text-align: center; line-height:56px; margin-right: 5px;}
	.user-info-c .frame img {margin-top: 11px;}
	.user-info-c .frame-brown {background-position: 0 0;}
	.user-info-c .frame-green {background-position: 0 -56px;}
	.user-info-c .frame-blue {background-position: 0 -112px;}
	.user-info-c .frame-violet {background-position: 0 -168px;}
	.user-info-c .frame-yellow {background-position: 0 -224px;}
	.user-info-c .frame-orange {background-position: 0 -280px;}
	.user-info-c .frame-red {background-position: 0 -336px;}
.user-info-r {background: url("images/user-info_03.jpg") no-repeat; width: 16px; height: 88px;}
	.ui-r-btn {display: block; background: url(images/ui-r-btn.png) no-repeat; background-position: 0 0; width: 16px; height: 35px;}
	.ui-r-btn.ui-r-btn-red {background-position: 0 -72px;}
	.ui-r-btn.ui-r-btn-red:hover {background-position: 0 -36px;}
	
	.b1gray.h1.gr {overflow:hidden; *zoom:1;}
	.left {float:left;}
	.bul_wrapper {float:right;}
	.bul_wrapper .bul_wrap {font-size: 10px;}
	/*.bul_wrapper .bul_wrap img {vertical-align:top;}*/
	.bul_wrapper .bul_wrap a {font-size: 10px; text-decoration: none;}

	.auction_new .h2 {background: none;}
	.auction_table {width: 100%; border-collapse: collapse;}
	.auction_table td {border: 1px solid #c7c9c9;}
	.auction_table .no_border td {border: none;}
	.auction_table.no_border td {border: none;}
	.auction_table .h2 {white-space: nowrap;}
	.auction_table .auction_buy {width: 212px; border-collapse: collapse;}
	.auction_table .auction_buy .auction_buy_b {width: 75px; padding: 0 8px; text-align: center;}
	.auction_table .auction_buy .auction_buy_s {width: 30px; padding: 0; text-align: center;}
	.auction_table .auction_buy input {text-align: center;}
	.auction_new .auction_pages {float: right;}
	.auction_new .auction_pages p {margin: 0;}
	.auction_new .auction_pages .rd {display: inline-block; *display: inline; *zoom: 1; padding:2px 3px; background: #ffffff; color: #4b5771; vertical-align: middle;}
	.auction_new .nowrap_tab td {white-space: nowrap;}
	.auction_new select {width: 160px;}
	.auction_new input.in_big {width: 160px;}
	.auction_new input.in_med {width: 68px;}
	.auction_new .auction_search {width: 68px;}
	.auction_new form {margin: 0;}
	.auction_new .auction_buy_b td {vertical-align: middle;}
	.auction_new .auction_new_create {display: inline-block; *display: inline; *zoom: 1; margin: 0 25px 20px 0; padding: 5px; border: 1px solid #c7c9c9; text-align: center;}
	.auction_new .auction_new_time {display: inline-block; *display: inline; *zoom: 1; margin: 0 3px 0 0; color: #4b5772; font-size: 12px;}
	
	.chat-arrows {display: inline-block; height: 23px; cursor: pointer; *display: inline; *zoom: 1;}
	.chat-arrows.up {width: 22px; background: url('images/arrows.png') 100% 0 no-repeat;}
	.chat-arrows.down {width: 21px; background: url('images/arrows.png') 0 0 no-repeat;}
	
	.vertical-line {
		display: inline-block; *display: inline; *zoom: 1;
		width: 2px;
		height: 60px;
		background: url('images/timer_images/vertical_line.gif') left top no-repeat;
		vertical-align: top;
	}
	.vertical-line.invisible {
		margin-right: 11px;
	}
	.invisible-timer {
		display: inline-block; *display: inline; *zoom: 1;
		width: 118px;
		height: 40px;
		margin-top: 6px;
		padding: 6px 13px 3px;
		background: url('images/timer_images/timer_bg.png') left top no-repeat;
		vertical-align: top;
	}
	.invisible-timer__head {
		height: 13px;
		color: #74959e;
		font-size: 10px;
	}
	.invisible-timer__body {
		height: 27px;
		background: url('images/timer_images/timer_signs.png') 33px bottom no-repeat;
	}
	.invisible-timer__body-innner {
		height: 27px;
		padding-left: 25px;
		background: url('images/timer_images/timer_clock.png') left top no-repeat;
		font-size: 0;
		white-space: nowrap;
	}

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

.header {
	display: flex;
	width: 925px;
	height: 60px;
	background-image: url('images/header-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
}

.header__logo {
	width: 42px;
	height: 42px;
	display: inline-block;
	text-decoration: none;
	transform: translate(7px, 11px);
	transition: .26s opacity;
}

.header__logo:hover {
	opacity: .5;
}

.header__logo img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.header__stats {
	margin-left: 114px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
}

.header-stats__info {
	display: flex;
	align-items: center;
	margin: 4px 0 5px;
	position: relative;
}

.header-stats__icons {
	position: absolute;
	top: -1px;
	left: -4px;
	transform: translateX(-100%);
	display: flex;
	justify-content: flex-end;
}

.header-stats__icon {
	width: 16px;
	height: 16px;
	margin-left: 7px;
}

.header-stats__icon img {
	width: 100%;
	height: auto;
}

.header-stats__login {
	font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    line-height: 1;
	color: #4b5771;
	display: inline-block;
	margin-right: 2px;
}

.header-stats__info-link {
	display: block;
	width: 15px;
	height: 15px;
	padding: 3px;
	cursor: pointer;
}

.header-stats__info-link img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.header-stats__bar {
	display: flex;
	position: relative;
	margin-bottom: 2.4px;
}

.header-stats__bar--red .header-bar__count {
	color: #d90000;
}

.header-stats__bar--red .header-progress__line {
	background-color: #d90000;
}

.header-stats__bar--blue .header-bar__count {
	color: #0088ca;
}

.header-stats__bar--blue .header-progress__line {
	background-color: #0088ca;
}

.header-stats__bar--green .header-bar__count {
	color: #8ca935;
}

.header-stats__bar--green .header-progress__line {
	background-color: #8ca935;
}

.header-bar__count {
	font-family: 'Tahoma', sans-serif;
    font-size: 11px;
    line-height: 1;
    font-weight: bold;
	color: #4b5771;
	text-align: right;
	transform: translateX(-100%);
	position: absolute;
	left: -4px;
	top: -1.5px;
}

.header-bar__progress {
	position: relative;
	width: 135px;
	height: 9.5px;
	box-shadow: inset 0px 0px 3px rgba(0,0,0,0.2);
}


.header-bar__progress:hover .header-progress__name {
	opacity: 1;
}

.header-progress__line {
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}

.header-progress__line--top {
	z-index: 2;
}

.header-progress__line--bottom {
	z-index: 1;
	opacity: .4;
}

.header-progress__name {
	position: absolute;
	white-space: nowrap;
	line-height: 1;
	font-size: 9px;
	font-family: 'Tahoma', sans-serif;
	text-transform: uppercase;
	color: #fff;
	display: inline-block;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: .26s opacity;
	opacity: 0;
	cursor: default;
	z-index: 3;
}

.header__actions {
	display: flex;
	justify-content: space-between;
	margin-bottom: 3px;
}

.header__action {
	display: inline-block;
	text-decoration: none;
}

.header-action__icon {
	width: 40px;
	height: 17px;
	position: relative;
	text-decoration: none;
}

.header-action__icon img {
	width: 100%;
	height: auto;
	vertical-align: top;
	position: absolute;
	left: 0;
	top: 0;
	transition: .26s opacity;
}

.header-action__icon img.default {
	z-index: 3;
}

.header-action__icon img.hover {
	z-index: 2;
}

.header-action__icon img.active {
	z-index: 1;
}

.header-action__icon:hover img.default {
	opacity: 0;
}

.header-action__icon:hover img.hover {
	opacity: 1;
}

.header-action__icon:active img.default,
.header-action__icon:active img.hover {
	opacity: 0;
}

.header-action__hint {
	width: 90px;
	text-align: center;
	font-size: 9px;
	font-family: 'Tahoma', sans-serif;
	text-transform: uppercase;
	color: #000;
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	position: absolute;
	z-index: 4;
	padding: 1px 0;
	transition: .26s opacity;
	opacity: 0;
	top: -500px;
	left: -500px;
}

.header__actions-and-inputs {
	margin: 6px 0 0 18px;
	display: flex;
	flex-direction: column;
}

.header__input {
	display: flex;
	margin-bottom: 3px;
}

.header-input__input {
	width: 116px;
	font-size: 10px;
	font-weight: 'Tahoma', sans-serif;
	color: #000;
	outline: none;
	border: none;
	padding: 0 6px;
	background-image: url('images/input-bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 4px;
}

.header-input__input::placeholder {
	color: #000;
}

.header-input__button {
	width: 18px;
	height: 15px;
	border: none;
	outline: none;
	background-color: rgba(0,0,0,0);
	cursor: pointer;
	transition: .26s opacity;
}

.header-input__button:hover {
	opacity: 0.5;
}

.header__buttons {
	margin-left: 30px;
	margin-top: 12px;
	display: flex;
	position: relative;
}

.header__button,
.header-player__button,
.header-knowledge__button {
	width: 40px;
	height: 40px;
	position: relative;
	display: block;
	cursor: pointer;
	text-decoration: none;
	margin-right: 2px;
	transition: .26s transform;
}

.header__button.js-show-player-buttons::before,
.header__button.js-show-knowledge-buttons::before {
	content: '';
	width: 20px;
	height: 20px;
	display: inline-block;
	background-image: url('images/header-arrow.png');
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 4;
	right: -5px;
	bottom: 5px;
	transition: .385s transform ease;
}

.header__button--active::before {
	transform: rotate(180deg) translate(150%, 0%);
}

.header__button--hidden {
	transform: translateY(-50%);
}

.header__button--hidden .header-button__icon {
	filter: brightness(50%);
}

.header__button--hidden:hover .header-button__icon {
	filter: brightness(100%);
}

.header-button__icon,
.header-player-button__icon,
.header-knowledge-button__icon {
	width: 40px;
	height: 40px;
	transition: .26s transform, .26s filter;
	cursor: pointer;
}

.header-button__icon img,
.header-player-button__icon img,
.header-knowledge-button__icon img {
	width: 100%;
	height: auto;
	vertical-align: top;
}

.header-button__name,
.header-player-button__name,
.header-knowledge-button__name {
	color: #d90000;
	text-transform: lowercase;
	font-size: 10px;
	line-height: 1;
	font-weight: bold;
	font-family: 'Tahoma', sans-serif;
	display: inline-block;
	position: absolute;
	bottom: -3px;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, 5px);
	transition: .26s transform, .26s opacity;
	opacity: 0;
	cursor: pointer;
	white-space: nowrap;
	text-shadow: 
		-0   -1px 1px #FFFFFF,
		 0   -1px 1px #FFFFFF,
		-0    1px 1px #FFFFFF,
		 0    1px 1px #FFFFFF,
		-1px -0   1px #FFFFFF,
		 1px -0   1px #FFFFFF,
		-1px  0   1px #FFFFFF,
		 1px  0   1px #FFFFFF,
		-1px -1px 1px #FFFFFF,
		 1px -1px 1px #FFFFFF,
		-1px  1px 1px #FFFFFF,
		 1px  1px 1px #FFFFFF,
		-1px -1px 1px #FFFFFF,
		 1px -1px 1px #FFFFFF,
		-1px  1px 1px #FFFFFF,
		 1px  1px 1px #FFFFFF;
}

.header__button:hover .header-button__icon,
.header-player__button:hover .header-player-button__icon,
.header-knowledge__button:hover .header-knowledge-button__icon {
	transform: scale(1.08);
}

.header__button--hidden:hover {
	transform: scale(1.08) translateY(-50%);
}

.header__button:not(.header__button--hidden):hover .header-button__name {
	transform: translate(-50%, 0px);
	opacity: 1;
}

.header-player__buttons,
.header-knowledge__buttons {
	display: flex;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	transform: translate(-50%, -200%);
	transition: .26s transform;
}

.header-player__buttons--active,
.header-knowledge__buttons--active {
	transform: translate(-50%, -50%);
}


/* --- TerraWars additions (keep classic look) --- */
.wrap { width: 925px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr 280px; column-gap: 10px; }
.card { background: white; border: 1px solid #c7c9c9; padding: 8px; margin-bottom: 10px; }
.card-title { font-weight: bold; font-size: 12px; }
.muted { color: #676B6E; }
.sep { border-top: 1px solid #c7c9c9; margin: 8px 0; }

.scene-wrap{ background: #fff; border:1px solid #c7c9c9; padding:6px; margin-bottom:10px; }
.scene-frame{ position:relative; border:1px solid #c7c9c9; background:#fff; }
.scene-frame img{ width:100%; display:block; }
.scene-timer{ position:absolute; top:8px; left:8px; }
.scene-arrows{ position:absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display:grid; grid-template-columns: 22px 22px 22px; grid-template-rows: 22px 22px 22px; gap:3px; }
.scene-arrows button{ width:22px; height:22px; border:1px solid #c7c9c9; background:#eaecec; cursor:pointer; padding:0; }
.scene-arrows .sp{ width:22px; height:22px; }

.side-title{ font-size:10px; font-weight:bold; color:#2A726E; text-transform: uppercase; background:#fff; padding:4px; margin-bottom:6px; border:1px solid #c7c9c9; }
.side-list a{ display:block; padding:4px 6px; border:1px solid #c7c9c9; background:#eaecec; margin-bottom:6px; text-decoration:none; }
.side-list a:hover{ color:#24707C; }
.btn{ display:inline-block; padding:4px 8px; border:1px solid #666; background:#eaecec; font-weight:bold; text-transform: uppercase; text-decoration:none; }
.btn:hover{ color:#24707C; }
.input{ width:100%; border:1px solid #c9c9c9; padding:4px 6px; background:#EBEDEC; }



/* ===== Location UI (1:1 like classic screenshot) ===== */
.location-page .center { background: transparent; }
.location-scene{
  width: 645px;
  margin: 0 auto;
  border: 1px solid #b8bcbc;
  background: #f3f3f3;
  padding: 6px;
}
.location-scene__frame{
  border: 1px solid #b8bcbc;
  background: #fff;
  position: relative;
  width: 631px;
  height: 384px;
  overflow: hidden;
}
.location-scene__img{
  width: 631px;
  height: 384px;
  object-fit: cover;
  display:block;
}
.location-scene__top{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#2b2b2b;
}
.location-scene__pill{
  background:#fff;
  border:1px solid #b8bcbc;
  padding:4px 8px;
}
.location-scene__timer{
  display:flex;
  align-items:center;
  gap:6px;
}
.location-scene__timer b{
  display:inline-block;
  min-width:64px;
  text-align:center;
  padding:3px 8px;
  border:1px solid #b8bcbc;
  background:#fff;
}
.location-scene__arrows{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  width: 86px;
  height: 86px;
  display:grid;
  grid-template-columns: 26px 26px 26px;
  grid-template-rows: 26px 26px 26px;
  gap:4px;
}
.location-scene__arrows button{
  width:26px;height:26px;
  border:1px solid #b8bcbc;
  background:#e9ecec;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.location-scene__arrows button:disabled{
  opacity:.55;
  cursor:default;
}
.location-scene__arrows img{ width:18px;height:18px; }
.location-scene__arrows .sp{ width:26px;height:26px; }

/* Right panel like screenshot */
.rightpanel{
  border:1px solid #b8bcbc;
  background:#f3f3f3;
  padding:6px;
}
.rightpanel__inner{
  border:1px solid #b8bcbc;
  background:#fff;
  padding:8px;
}
.rp-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.rp-talk{
  font-size:11px;
  padding:2px 6px;
  border:1px solid #b8bcbc;
  background:#e9ecec;
  text-decoration:none;
}
.rp-title{
  font-size:12px;
  font-weight:bold;
  margin:4px 0 8px;
}
.rp-title .red{ color:#cc0000; }
.rp-title .green{ color:#2a8a00; }

.rp-body{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:10px;
}
.rp-npc{
  border:1px solid #b8bcbc;
  background:#f7f7f7;
  height: 220px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
}
.rp-npc img{ max-width:100%; max-height:100%; display:block; }
.rp-info{
  font-size:12px;
  line-height:1.35;
}
.rp-info b{ font-weight:bold; }
.rp-info .line{ margin:4px 0; }
.rp-info .label{ color:#676B6E; }
.rp-info .value{ color:#222; }

.rp-section{
  margin-top:10px;
  border-top:1px solid #e1e1e1;
  padding-top:8px;
}
.rp-section__title{
  font-size:11px;
  font-weight:bold;
  color:#2A726E;
  margin-bottom:6px;
}
.rp-links a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 6px;
  border:1px solid #b8bcbc;
  background:#e9ecec;
  margin-bottom:6px;
  text-decoration:none;
}
.rp-links a:hover{ color:#24707C; }
.rp-links .ico{
  width:14px;height:14px;
  border:1px solid #9ea1a1;
  background:#fff;
  display:inline-block;
}

/* center column wrapper for location */
.location-content{
  padding-top: 6px;
}



/* ===== Travel progress (like classic) ===== */
.travel-wrap{ margin-top:6px; }
.travel-label{ font-size:11px; color:#676B6E; margin-bottom:4px; }
.travel-bar{
  width: 100%;
  height: 12px;
  border: 1px solid #6e7171;
  background: #e1e1e1;
  position: relative;
  box-shadow: inset 0 0 2px rgba(0,0,0,.25);
}
.travel-bar__fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(#7c7f7f, #4f5252);
}
.travel-bar__hint{
  display:none;
  position:absolute;
  top:-28px;
  left:0;
  background:#fff;
  border:1px solid #b8bcbc;
  padding:4px 6px;
  font-size:11px;
  color:#222;
  white-space:nowrap;
}
.travel-bar:hover .travel-bar__hint{ display:block; }

/* ===== Bottom chat (classic dock) ===== */
body{ padding-bottom: 210px; } /* reserve space for dock */

.chatdock{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e6e6e6;
  border-top: 1px solid #b8bcbc;
  z-index: 50;
}
.chatdock__inner{
  width: 925px;
  margin: 0 auto;
  border-left: 1px solid #b8bcbc;
  border-right: 1px solid #b8bcbc;
  background: #f3f3f3;
}
.chatdock__tabs{
  display:flex;
  gap:2px;
  padding:6px 6px 0 6px;
}
.chatdock__tab{
  padding:4px 10px;
  border:1px solid #b8bcbc;
  border-bottom:none;
  background:#dcdcdc;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
.chatdock__tab.active{ background:#fff; font-weight:bold; }
.chatdock__body{
  display:grid;
  grid-template-columns: 1fr 240px;
  gap:10px;
  padding:6px;
  background:#fff;
  border-top:1px solid #b8bcbc;
}
.chatdock__log{
  height:140px;
  overflow:auto;
  border:1px solid #b8bcbc;
  background:#fafafa;
  padding:6px;
  font-size:12px;
  line-height:1.35;
}
.chatline{ margin:2px 0; }
.chatline .t{ color:#cc0000; }
.chatline .n{ color:#222; font-weight:bold; }
.chatline .m{ color:#222; }

.chatdock__side{
  border:1px solid #b8bcbc;
  background:#fafafa;
  padding:6px;
  height:140px;
  overflow:auto;
  font-size:12px;
}
.chatdock__inputrow{
  display:flex;
  gap:6px;
  padding:6px;
  background:#f3f3f3;
  border-top:1px solid #b8bcbc;
}
.chatdock__inputrow input{
  flex:1;
  border:1px solid #b8bcbc;
  background:#fff;
  padding:6px 8px;
  font-size:12px;
}
.chatdock__inputrow button{
  border:1px solid #666;
  background:#e9ecec;
  padding:6px 10px;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
}



/* ===== FIX: enforce classic 3-column layout + fixed bottom chat ===== */
.wrap{
  width: 925px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 260px 1fr 280px !important;
  column-gap: 10px !important;
  align-items: start !important;
}
.col.left{ width:260px; }
.col.right{ width:280px; }
.col.center{ min-width: 0; }

.chatdock{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  height: 190px !important;
  z-index: 1000 !important;
}
body{ padding-bottom: 190px !important; }

.location-scene__frame{ position: relative !important; }
.location-scene__arrows{ position:absolute !important; left:50% !important; transform:translateX(-50%) !important; bottom: 18px !important; }



/* === CLASSIC 1:1 LAYOUT (fb7304fd35 reference) === */
body{ background:#e6e6e6; }
.topbar{ background:url(/assets/img/classic/newdesign/bar_bg.gif) repeat-x left top; height:44px; border-bottom:1px solid #b8bcbc; }
.wrap{ width:1000px; margin:8px auto 0; display:grid; grid-template-columns: 240px 1fr 270px; gap:10px; align-items:start; }
.col.left{ min-height:520px; background:url(/assets/img/classic/newdesign/left.gif) repeat-y left top; border:1px solid #b8bcbc; padding:6px; }
.col.center{ }
.col.right{ border:1px solid #b8bcbc; background:url(/assets/img/classic/newdesign/bg_1.gif) repeat; }
.rightpanel__inner{ background:rgba(255,255,255,.75); padding:8px; }
.location-scene__frame{ border:1px solid #b8bcbc; background:#f0f0f0; padding:6px; }
.location-scene__img{ border:1px solid #b8bcbc; display:block; }
.locbtn{ background:url(/assets/img/classic/newdesign/big_btn_bg.gif) repeat-x; border:1px solid #6e7171; }
.loctime{ background:url(/assets/img/classic/newdesign/bar_bg_btn.gif) repeat-x; border:1px solid #6e7171; }
.travel-bar{ background:#d9d9d9; border:1px solid #6e7171; height:10px; position:relative; }
.travel-bar__fill{ background:url(/assets/img/classic/newdesign/bar2.gif) repeat-x; height:100%; width:0%; }
.chatdock{ position:fixed; left:0; right:0; bottom:0; height:260px; background:url(/assets/img/classic/newdesign/bottom_bg3.gif) repeat-x left top; border-top:1px solid #b8bcbc; }
.chatdock__inner{ width:1000px; margin:0 auto; padding-top:6px; }
.chatdock__tab{ background:url(/assets/img/classic/design/b_chat_1.gif) repeat-x; border:1px solid #b8bcbc; border-bottom:none; }
.chatdock__tab.active{ background:url(/assets/img/classic/design/b_chat_1_on.gif) repeat-x; }


/* ===== STEP2: classic structure 1:1 (skeleton) ===== */
html,body{ margin:0; padding:0; background:#e6e6e6; font-family: Tahoma, Arial, sans-serif; color:#111; }

.tw-topbar{ height:46px; background: url(/assets/img/classic/newdesign/top_bg2.gif) repeat-x left top; border-bottom:1px solid #b8bcbc; }
.tw-topbar__inner{ width: 1000px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:6px 8px; box-sizing:border-box; gap:10px; }
.tw-topbar__left{ display:flex; align-items:center; gap:8px; }
.tw-logo{ width:28px; height:28px; background:url(/assets/img/classic/newdesign/logo2.gif) no-repeat center center; }
.tw-bars{ min-width:360px; }
.tw-bars__lbl{ font-size:12px; font-weight:bold; margin-bottom:2px; }
.tw-bars__row{ display:flex; gap:8px; align-items:center; }
.tw-bar{ position:relative; width:170px; height:10px; border:1px solid #888; background:#fff; }
.tw-bar__fill{ height:100%; background:#d33; }
.tw-bar--green .tw-bar__fill{ background:#2aa84a; }
.tw-bar__txt{ position:absolute; right:4px; top:-2px; font-size:11px; color:#111; }
.tw-topbar__tools{ display:flex; gap:4px; padding:4px; background:url(/assets/img/classic/newdesign/mnubg.gif) repeat-x left top; border:1px solid #b8bcbc; }
.tw-tool{ width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #8b8b8b; background:url(/assets/img/classic/newdesign/btn_bg.gif) repeat-x left top; }
.tw-tool img{ width:18px; height:18px; image-rendering:auto; }

.tw-wrap{ width:1000px; margin:10px auto 0; }
.tw-flash{ margin:0 0 8px; padding:8px; background:#fff7d6; border:1px solid #e2c46a; }

.tw-main{ display:flex; gap:10px; align-items:flex-start; }
.tw-col{ box-sizing:border-box; }
.tw-col--left{ width:240px; }
.tw-col--center{ width:540px; }
.tw-col--right{ width:210px; }

.tw-char{ background:#fff; border:1px solid #b8bcbc; padding:8px; font-size:12px; }
.tw-char__title{ font-weight:bold; margin-bottom:6px; }
.tw-char__row{ margin:2px 0; }
.tw-char__sep{ height:1px; background:#d9d9d9; margin:8px 0; }

.tw-scene__frame{ position:relative; background:#f0f0f0; border:1px solid #b8bcbc; padding:6px; }
.tw-scene__img{ width:100%; height:auto; display:block; border:1px solid #b8bcbc; background:#fff; }
.tw-scene__top{ position:absolute; top:10px; left:10px; display:flex; gap:10px; align-items:center; }
.tw-scene__btn{ display:inline-block; padding:4px 12px; font-size:12px; text-decoration:none; color:#111; background:url(/assets/img/classic/newdesign/big_btn_bg.gif) repeat-x left top; border:1px solid #6e7171; }
.tw-scene__timer{ padding:4px 10px; font-size:12px; background:url(/assets/img/classic/newdesign/btn_bg.gif) repeat-x left top; border:1px solid #6e7171; }
.tw-scene__arrows{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); display:flex; flex-direction:column; gap:4px; align-items:center; }
.tw-scene__arrowsmid{ display:flex; gap:8px; }
.tw-scene__arrows button{ width:22px; height:22px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid #b8bcbc; background:#f3f3f3; cursor:pointer; }
.tw-scene__arrows button:disabled{ opacity:.5; cursor:not-allowed; }

.tw-right{ display:flex; flex-direction:column; gap:8px; }
.tw-right__npc{ border:1px solid #b8bcbc; background:url(/assets/img/classic/newdesign/bg_2.gif) repeat; padding:6px; }
.tw-right__talk{ display:inline-block; font-size:12px; padding:3px 10px; background:url(/assets/img/classic/newdesign/btn_bg.gif) repeat-x; border:1px solid #6e7171; cursor:pointer; }
.tw-right__npcimg{ margin-top:6px; text-align:center; }
.tw-right__npcimg img{ max-width:100%; height:auto; }

.tw-right__info{ border:1px solid #b8bcbc; background:url(/assets/img/classic/newdesign/bg_1.gif) repeat; padding:8px; font-size:12px; }
.tw-right__title{ font-weight:bold; color:#b00000; margin-bottom:4px; }
.tw-right__meta{ font-size:11px; line-height:1.35; margin-bottom:8px; background:rgba(255,255,255,.65); padding:6px; border:1px solid #cfd3d3; }
.tw-right__sec{ font-weight:bold; color:#007a7a; margin:6px 0; }
.tw-travelbar{ height:10px; border:1px solid #6e7171; background:#d9d9d9; overflow:hidden; }
.tw-travelbar__fill{ height:100%; background:url(/assets/img/classic/newdesign/bar2.gif) repeat-x left top; width:0%; }
.tw-right__links{ list-style:none; padding:0; margin:6px 0 0; }
.tw-right__links li{ margin:4px 0; }
.tw-right__links a{ color:#1b4f9c; text-decoration:underline; }
.tw-right__links a.is-disabled{ color:#888; text-decoration:none; pointer-events:none; }

.tw-chatdock{
  width:1000px;
  margin:12px auto 0;
  border:1px solid #b8bcbc;
  background:#f3f3f3;
}
.tw-chatdock__tabs{ display:flex; gap:4px; padding:4px 6px 0; }
.tw-tab{
  height:22px;
  padding:0 10px;
  border:1px solid #b8bcbc;
  border-bottom:none;
  background:url(/assets/img/classic/design/b_chat_1.gif) repeat-x left top;
  font-size:12px;
  cursor:pointer;
}
.tw-tab.is-active{ background:url(/assets/img/classic/design/b_chat_1_on.gif) repeat-x left top; font-weight:bold; }
.tw-chatdock__body{ display:flex; gap:8px; padding:8px; background:#fff; border-top:1px solid #b8bcbc; }
.tw-chatdock__log{ flex: 1 1 auto; height:140px; border:1px solid #b8bcbc; overflow:auto; padding:6px; font-size:12px; }
.tw-chatdock__side{ width:220px; border:1px solid #b8bcbc; padding:6px; font-size:12px; }
.tw-chatdock__sidehdr{ font-weight:bold; margin-bottom:4px; }
.tw-chatdock__input{ display:flex; gap:8px; padding:8px; background:url(/assets/img/classic/newdesign/fl_bg.gif) repeat-x left top; border-top:1px solid #b8bcbc; }
.tw-chatdock__input input{ flex:1; height:28px; padding:0 8px; border:1px solid #6e7171; background:url(/assets/img/classic/newdesign/input_bg.gif) repeat-x left top; }
.tw-chatdock__input button{ width:110px; height:30px; border:1px solid #6e7171; background:url(/assets/img/classic/newdesign/btn_bg.gif) repeat-x left top; font-weight:bold; cursor:pointer; }

.tw-chatline{ margin:2px 0; }


/* ===== STEP3.0: chat dock fixed bottom ===== */
.tw-wrap{ padding-bottom: 230px; } /* reserve space for fixed chat */
.tw-chatdock{
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  margin: 0;
  z-index: 50;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}


/* ===== STEP3.1: classic right panel (remove red X) ===== */
.tw-rightbox{
  display:flex;
  gap:6px;
  width: 340px;
  min-height: 260px;
  padding: 0;
  background: #f5f5f5;
  border: 1px solid #bcbcbc;
  box-shadow: inset 0 0 0 1px #ffffff;
}
.tw-rightbox__npc{
  width: 110px;
  padding: 6px 6px 0 6px;
}
.tw-btn.tw-btn--talk{
  display:block;
  width:100%;
  height: 22px;
  margin: 0 0 6px 0;
  padding: 0;
  border: 1px solid #9a9a9a;
  background: #e9e9e9;
  font: 11px tahoma;
  cursor:pointer;
}
.tw-rightbox__npcwrap{
  height: 210px;
  background: url("/assets/img/classic/newdesign/prt_1.gif") repeat;
  border: 1px solid #bcbcbc;
  position: relative;
  overflow:hidden;
}
.tw-rightbox__npcimg{
  position:absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  max-height: 210px;
  width:auto;
}
.tw-rightbox__info{
  flex:1;
  padding: 6px 6px 6px 0;
}
.tw-rightbox__title{
  font: bold 12px tahoma;
  color:#b40000;
  margin: 0 0 2px 0;
}
.tw-rightbox__meta{
  font: 11px tahoma;
  color:#000;
  margin: 0 0 6px 0;
  background: #fff;
  border: 1px solid #cfcfcf;
  padding: 4px 6px;
}
.tw-rightbox__sectionhdr{
  font: bold 11px tahoma;
  color:#2a7c86;
  padding: 2px 0;
  margin: 0 0 4px 0;
  border-bottom: 1px solid #cfcfcf;
}
.tw-travel__lbl{ font: 11px tahoma; color:#555; margin-bottom:2px;}
.tw-travel__bar{
  height: 8px;
  border: 1px solid #999;
  background: #e5e5e5;
  position: relative;
}
.tw-travel__fill{
  height:100%;
  width:0%;
  background: #6fbf73;
}
.tw-travel__time{ font: 11px tahoma; color:#555; margin-top:2px; min-height: 14px;}
.tw-rightbox__links{
  list-style:none;
  margin: 6px 0 0 0;
  padding: 0;
}
.tw-rightbox__links li{ margin: 2px 0; }
.tw-rightbox__link{
  display:block;
  padding-left: 14px;
  background: url("/assets/img/classic/newdesign/mnubullet.gif") no-repeat 0 3px;
  color:#0b4d57;
  text-decoration: underline;
}
.tw-rightbox__link:hover{ color:#24707C; }

/* keep right column width stable like classic */
.tw-col--right{ width: 360px; }



/* ===== char mini (left column on location) ===== */
.tw-charmini{
  width: 240px;
  background:#fff;
  border:1px solid #cfcfcf;
  padding:6px 8px;
  font: 11px tahoma;
}
.tw-charmini__name{
  font-weight: bold;
  color:#000;
}


/* === Classic 1:1 location layout tweaks === */
.tw-main{max-width:1180px;margin:0 auto;position:relative;}
.tw-content{padding-top:18px;}
/* left grid (10x10) */
.tw-leftgrid{width:220px;height:260px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(10,1fr);gap:4px;padding:10px;}
.tw-leftgrid__cell{background:#efefef;border:1px solid #d6d6d6;border-radius:2px;box-shadow:inset 0 1px 0 #fff;}
/* center scene */
.tw-scene{display:flex;justify-content:center;align-items:flex-start;padding-top:6px;}
.tw-scene__frame{position:relative;width:720px;height:360px;background:#fff;border:1px solid #bdbdbd;box-shadow:0 1px 0 #fff,inset 0 1px 0 #fff;padding:6px;}
.tw-scene__img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid #9d9d9d;}
.tw-scene__top{position:absolute;left:14px;top:14px;display:flex;gap:10px;align-items:center;}
.tw-timer{font:700 12px/1 Arial; background:rgba(255,255,255,.85);border:1px solid #9d9d9d;padding:2px 6px;border-radius:2px;}
/* arrows cluster (center bottom) */
.tw-arrows{position:absolute;left:50%;top:58%;transform:translate(-50%, -50%);width:84px;height:84px;}
.tw-arr{position:absolute;width:24px;height:24px;background:#f7f7f7;border:1px solid #bcbcbc;border-radius:2px;box-shadow:0 1px 0 #fff;background-size:16px 16px;background-repeat:no-repeat;background-position:center;cursor:pointer;}
.tw-arr--up{left:30px;top:0;background-image:url('/assets/img/classic/design/but_down_arrow.gif');transform:rotate(180deg);}
.tw-arr--down{left:30px;bottom:0;background-image:url('/assets/img/classic/design/but_down_arrow.gif');}
.tw-arr--left{left:0;top:30px;background-image:url('/assets/img/classic/design/but_down_arrow.gif');transform:rotate(90deg);}
.tw-arr--right{right:0;top:30px;background-image:url('/assets/img/classic/design/but_down_arrow.gif');transform:rotate(-90deg);}
.tw-arr:hover{filter:brightness(.95);}
/* right panel */
.tw-right{padding-top:6px;}
.tw-npcbox{width:300px;}
.tw-npcbox__body{display:grid;grid-template-columns:110px 1fr;gap:10px;margin-top:6px;}
.tw-npcbox__sprite{width:110px;height:260px;background:url('/assets/img/classic/design/bias1.gif') repeat;border:1px solid #bdbdbd;}
.tw-npcbox__sprite img{width:100%;height:100%;object-fit:contain;display:block;}
.tw-npcbox__placeholder{width:100%;height:100%;}
.tw-npcbox__title{font:700 12px Arial;color:#0a6a00;margin-bottom:6px;}
.tw-npcbox__section{margin-top:10px;font:700 12px Arial;color:#0a6a00;}
.tw-travelbar{margin-top:6px;height:10px;border:1px solid #9d9d9d;background:#fff;position:relative}
.tw-travelbar__fill{height:100%;background:#55a855;}
.tw-links{list-style:none;margin:8px 0 0;padding:0;}
.tw-link{display:flex;gap:6px;align-items:center;color:#0a4fb3;text-decoration:underline;font:12px Arial;}
.tw-link__icon{width:14px;height:14px;background:url('/assets/img/classic/design/arr_1g.gif') no-repeat center/contain;}
/* chat fixed bottom */
.tw-chatdock{position:fixed;left:0;right:0;bottom:0;z-index:50;}
.tw-chatdock .tw-chat{max-width:1180px;margin:0 auto;}
body{padding-bottom:220px;}

/* Hide left debug panel on location (classic client has no left block here) */
.tw-page-location .tw-left{display:none;}