/* =====================================================================
   standon.css  —  Skin overlay for «Противостояние» (standon.online)
   ---------------------------------------------------------------------
   ADDITIVE overlay skin. Loaded AFTER the game's own stylesheets
   (/css/head.css, /css/conect2.css, remote vten CSS), so every rule here
   ENHANCES or gently overrides the existing look — it never replaces the
   markup and touches no Russian text.

   Design brief: dark-fantasy «Свет против Тьмы» — the game's own dark
   green/black palette with gold accents, refined into a cohesive skin:
   softer panel gradients, readable typography, larger tap targets,
   polished resource/HP/exp bars, nicer buttons, forms, tables and
   scrollbars.

   Rules of engagement:
   - Style by class/element only. Never by fragile IDs.
   - Never `display:none` game content.
   - Transitions, not heavy animations.
   - Mobile-first (Telegram webview ~380px); desktop niceties in a
     `@media (min-width:600px)` block at the end.
   - Everything is scoped so a missing element cannot break layout.
   ===================================================================== */

:root {
	/* Core palette — built on the game's existing colours */
	--sd-gold:        #ffd700;
	--sd-gold-soft:   #f3d98a;
	--sd-gold-deep:   #b8912a;
	--sd-bg:          #0b0f0c;
	--sd-bg-2:        #05100a;
	--sd-bg-3:        #020b06;
	--sd-panel:       #002912;
	--sd-panel-2:     #04160e;
	--sd-panel-3:     #001a0d;
	--sd-border:      #005d1b;
	--sd-border-dim:  #0a3a1a;
	--sd-border-soft: #0d4a22;
	--sd-text:        #d7e0c9;
	--sd-text-soft:   #bfc196;
	--sd-text-dim:    #8a9a7c;
	--sd-danger:      #c0392b;
	--sd-danger-bg:   #3a1010;
	--sd-hp:          #38a03c;
	--sd-hp-2:        #2e7d32;

	--sd-radius:      8px;
	--sd-radius-sm:   5px;
	--sd-shadow:      0 2px 8px rgba(0,0,0,.55);
	--sd-shadow-in:   inset 0 1px 0 rgba(255,255,255,.04);
	--sd-tap:         42px;   /* min tap-target height on mobile */
	--sd-ease:        .18s ease;
}

/* ---------------------------------------------------------------------
   1. Page shell & typography
   --------------------------------------------------------------------- */

/* Fill the Telegram webview (game body caps at 360px). Kept modest so
   fixed 360px sprites still sit fine; content tables are already fluid. */
body {
	max-width: 460px !important;
	width: 100%;
	margin: 0 auto !important;
	color: var(--sd-text);
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(255,215,0,.15);
	overflow-x: hidden;
}

/* No element may force a horizontal scrollbar at 380px. */
img, table, video, iframe { max-width: 100%; }

a { transition: color var(--sd-ease); }

/* ---------------------------------------------------------------------
   2. Content wrapper
   --------------------------------------------------------------------- */

.main {
	background: linear-gradient(180deg, var(--sd-bg) 0%, var(--sd-bg-3) 100%) !important;
	color: var(--sd-text) !important;
	line-height: 1.4;
}

.block_zero {
	padding: 10px 8px;
	line-height: 1.45;
}

/* ---------------------------------------------------------------------
   3. Panels
   --------------------------------------------------------------------- */

.b-panel {
	margin: 6px 0;
	border-radius: var(--sd-radius-sm);
}

/* Refresh the blue/green panel families with a soft vertical gradient,
   a green rim and a subtle inner highlight — without changing spacing. */
.lblue-panel, .sblue-panel,
.dblue-panel,
.b-panel.bg-dark-blue.bordered {
	background: linear-gradient(180deg, var(--sd-panel-2) 0%, var(--sd-panel-3) 100%) !important;
	border: 1px solid var(--sd-border-dim) !important;
	border-radius: var(--sd-radius-sm);
	box-shadow: var(--sd-shadow-in);
}

a.dblue-panel:hover,
.link-panel:hover {
	border-color: var(--sd-border-soft) !important;
	background-color: #073a1c !important;
}

.link-panel {
	border-radius: var(--sd-radius-sm);
	transition: background-color var(--sd-ease), border-color var(--sd-ease);
}

.panel-inner, .panel-inner-2, .panel-inner2 { line-height: 1.4; }

/* ---------------------------------------------------------------------
   4. Top bar: HP / resources / gold
   --------------------------------------------------------------------- */

.header {
	background: linear-gradient(180deg, #04160e 0%, #010a06 100%);
	border-bottom: 1px solid var(--sd-border-dim);
	box-shadow: 0 1px 4px rgba(0,0,0,.5);
	padding: 3px 4px;
}

.header-hp .info { color: #ff8a7a; font-weight: bold; }

.header-gold-info,
.header-gold .i12-money_gold + span,
.header-gold span span span span {
	color: var(--sd-gold) !important;
	font-weight: bold;
	text-shadow: 0 1px 1px #000;
}

.header-gold-link { transition: transform var(--sd-ease); }
.header-gold-link:active { transform: scale(.94); }

/* Header news / mail pills */
.header-news .resource a,
.header-news-link {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 6px;
	border-radius: 20px;
	background: rgba(0,93,27,.28);
	border: 1px solid var(--sd-border-dim);
	text-decoration: none;
	color: var(--sd-gold-soft);
}

/* Page-title strip (location bar) — keep its bg image, just add polish */
.page-info { box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); }

.page-info-link, .page-settings-link {
	transition: opacity var(--sd-ease), transform var(--sd-ease);
	opacity: .9;
}
.page-info-link:active, .page-settings-link:active { transform: scale(.9); }

/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */

/* Generic .btn: give it a real tap target and press feedback without
   fighting the sprite-based .btn-cont skins the game already ships. */
.btn {
	border-radius: var(--sd-radius-sm);
	transition: transform var(--sd-ease), filter var(--sd-ease), box-shadow var(--sd-ease);
	overflow: hidden;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); filter: brightness(.96); }

.btn .btn-cont { min-height: var(--sd-tap); display: flex; align-items: center; justify-content: center; }

/* Plain, un-sprited buttons (e.g. the pay modal's .btn) get a full skin. */
button.btn,
.btn:not(:has(.btn-cont)) {
	min-height: var(--sd-tap);
	padding: 10px 16px;
	color: var(--sd-gold-soft);
	background: linear-gradient(180deg, #06301a 0%, #012410 100%);
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius);
	font-weight: bold;
	cursor: pointer;
	box-shadow: var(--sd-shadow-in);
}
button.btn:hover,
.btn:not(:has(.btn-cont)):hover { border-color: var(--sd-gold-deep); color: var(--sd-gold); }

/* nav-btn: keep as tidy list rows with a soft hover */
.btn.nav-btn {
	border-radius: var(--sd-radius-sm);
	transition: background-color var(--sd-ease), border-color var(--sd-ease);
}
.btn.nav-btn:hover { background-color: rgba(0,93,27,.18); }

/* go-btn (payment / VIP CTA): gild the border-in structure the game uses */
.go-btn {
	border-radius: var(--sd-radius);
	transition: transform var(--sd-ease), box-shadow var(--sd-ease), filter var(--sd-ease);
	overflow: hidden;
}
.go-btn:hover { filter: brightness(1.1); box-shadow: 0 0 12px rgba(0,93,27,.5); }
.go-btn:active { transform: translateY(1px); }

.go-btn-border {
	display: block;
	border-radius: var(--sd-radius-sm);
}
.go-btn-in {
	min-height: var(--sd-tap);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	color: var(--sd-gold) !important;
	text-shadow: 0 1px 2px #000;
	letter-spacing: .3px;
}

/* ---------------------------------------------------------------------
   6. HP / exp bars (the inline-styled bar in head.php is left intact;
      these polish the class-based bars used elsewhere)
   --------------------------------------------------------------------- */

.v3-exp-bar-bg {
	box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
	border-color: var(--sd-border-dim) !important;
}
.v3-exp-bar-fill {
	background: linear-gradient(90deg, var(--sd-hp) 0%, var(--sd-hp-2) 100%) !important;
	box-shadow: 0 0 6px rgba(56,160,60,.5);
	transition: width .4s ease;
}

.hp_proc_block2_small,
.hp_proc_block2 {
	transition: width .4s ease;
}

/* ---------------------------------------------------------------------
   7. Payment page: gold packages & VIP block
   --------------------------------------------------------------------- */

.b-pack {
	background: linear-gradient(180deg, var(--sd-panel-2) 0%, var(--sd-panel-3) 100%);
	border: 1px solid var(--sd-border-dim);
	border-radius: var(--sd-radius);
	padding: 8px;
	margin: 6px 0;
	box-shadow: var(--sd-shadow-in);
	transition: border-color var(--sd-ease), transform var(--sd-ease);
}
.b-pack:hover { border-color: var(--sd-border-soft); }

.pack-count {
	color: var(--sd-gold);
	font-weight: bold;
	text-shadow: 0 1px 2px #000;
}
.pack-info .antique { line-height: 1.6; }
.pack-info .antique .va-m { color: var(--sd-gold-soft); }

.section-sep {
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--sd-border-dim), transparent);
	border: 0 !important;
	margin: 10px 0 !important;
}

.section-vip { padding-top: 84px; }
.section-vip-inner {
	background: linear-gradient(180deg, #0a1c0f 0%, #04120a 100%) !important;
	border: 1px solid var(--sd-gold-deep) !important;
	border-radius: var(--sd-radius);
	box-shadow: 0 0 14px rgba(184,145,42,.18), var(--sd-shadow-in);
	padding: 24px 15px 14px 25px !important;
}
.vip-inner-line { color: var(--sd-text) !important; line-height: 1.5; }
.section-vip-inner .bro,
.section-vip-inner .text-center { color: var(--sd-gold) !important; font-weight: bold; }

.antique { color: var(--sd-gold-soft) !important; }

/* ---------------------------------------------------------------------
   8. Notices
   --------------------------------------------------------------------- */

.b-notice {
	background: linear-gradient(180deg, #12241a 0%, #06130c 100%);
	border: 1px solid var(--sd-border-dim);
	border-radius: var(--sd-radius-sm);
	padding: 8px 10px;
	margin: 6px 0;
	box-shadow: var(--sd-shadow);
}
.b-notice .notify-inner,
.notify-inner { color: var(--sd-text); line-height: 1.45; }

.b-notice.trsmgr:hover { border-color: var(--sd-danger); }

/* ---------------------------------------------------------------------
   9. Forms & inputs
   --------------------------------------------------------------------- */

input[type=text], input[type=password], input[type=number],
input[type=email], input[type=search], input[type=tel],
textarea, select, .input-area {
	background: #06130c !important;
	color: var(--sd-text) !important;
	border: 1px solid var(--sd-border-dim) !important;
	border-radius: var(--sd-radius-sm) !important;
	padding: 9px 10px !important;
	font-size: 15px;               /* >=16px-ish avoids iOS zoom jump */
	box-sizing: border-box;
	transition: border-color var(--sd-ease), box-shadow var(--sd-ease);
	-webkit-appearance: none;
	appearance: none;
}
textarea { line-height: 1.4; }
input:focus, textarea:focus, select:focus, .input-area:focus {
	outline: none;
	border-color: var(--sd-border) !important;
	box-shadow: 0 0 0 2px rgba(0,93,27,.35) !important;
}
input::placeholder, textarea::placeholder { color: var(--sd-text-dim); }

/* Submit-style buttons */
input[type=submit], input[type=button], button:not(.btn):not(.go-btn) {
	min-height: var(--sd-tap);
	padding: 9px 16px;
	color: var(--sd-gold-soft);
	background: linear-gradient(180deg, #06301a 0%, #012410 100%);
	border: 1px solid var(--sd-border);
	border-radius: var(--sd-radius);
	font-weight: bold;
	cursor: pointer;
	transition: filter var(--sd-ease), border-color var(--sd-ease);
}
input[type=submit]:hover, input[type=button]:hover, button:not(.btn):not(.go-btn):hover {
	filter: brightness(1.1);
	border-color: var(--sd-gold-deep);
}
input[type=submit]:active, input[type=button]:active { transform: translateY(1px); }

/* ---------------------------------------------------------------------
   10. Layout tables — tighten the default look without breaking spacing
   --------------------------------------------------------------------- */

.main table td { line-height: 1.4; }

/* Zebra + borders only for tables that opt-in via the game's own classes,
   to avoid disturbing the many layout-only tables. */
table.list td, table.stat td, .b-table td {
	border-bottom: 1px solid rgba(13,74,34,.35);
	padding: 5px 6px;
}
table.list tr:hover td, .b-table tr:hover td { background: rgba(0,93,27,.12); }

/* ---------------------------------------------------------------------
   11. Text accents used throughout the game
   --------------------------------------------------------------------- */

.major  { color: var(--sd-gold) !important; }
.yellow { color: var(--sd-gold-soft) !important; }
.info   { color: var(--sd-hp); }

/* ---------------------------------------------------------------------
   12. Scrollbars
   --------------------------------------------------------------------- */

* {
	scrollbar-width: thin;
	scrollbar-color: var(--sd-border-dim) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--sd-border) 0%, var(--sd-border-dim) 100%);
	border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--sd-border-soft); }

/* ---------------------------------------------------------------------
   13. Payment modal (inline-styled in pay.php) — soft entrance
   --------------------------------------------------------------------- */

#payModal { backdrop-filter: blur(2px); }
#payModal > div { box-shadow: 0 10px 40px rgba(0,0,0,.7); }

/* ---------------------------------------------------------------------
   14. Desktop niceties
   --------------------------------------------------------------------- */

@media (min-width: 600px) {
	body {
		max-width: 480px !important;
		box-shadow: 0 0 40px rgba(0,0,0,.6);
	}
	.b-pack:hover { transform: translateY(-1px); }
	.go-btn-in { font-size: 13px; }
}

/* Reduce motion for users who ask for it */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}