/* Сталкериада — стили v8 */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: #1a1a1a;
	color: #e0e0e0;
	font-family: 'Segoe UI', Tahoma, sans-serif;
}

body.game-active {
	overflow: hidden;
	height: 100vh;
}

/* Лобби */
#lobby-screen {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	min-height: 100vh;
	background: linear-gradient(135deg, #0d1b0e, #1a2a1b, #0d1b0e);
	padding: 20px 12px;
	box-sizing: border-box;
}

.lobby-box {
	background: #2a2a2a;
	border: 2px solid #4a6a4a;
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	width: 100%;
	max-width: 1600px;
	box-sizing: border-box;
}

.lobby-box h1 {
	font-size: 28px;
	color: #8bba8b;
	letter-spacing: 4px;
	margin-bottom: 4px;
}

.subtitle {
	color: #6a8a6a;
	margin-bottom: 16px;
	font-size: 14px;
}

.lobby-box input[type="text"], .lobby-box input[type="number"] {
	padding: 7px 10px;
	background: #1a1a1a;
	border: 1px solid #4a4a4a;
	border-radius: 6px;
	color: #e0e0e0;
	font-size: 14px;
	margin-bottom: 6px;
}

.lobby-box input[type="text"] {
	width: 100%;
}

.lobby-box button {
	padding: 8px 18px;
	background: #4a7a4a;
	border: none;
	border-radius: 6px;
	color: white;
	font-size: 15px;
	cursor: pointer;
	margin: 4px;
}

.lobby-box button:hover {
	background: #5a9a5a;
}

.hint {
	color: #666;
	font-size: 13px;
	margin-top: 6px;
}

.lobby-player {
	padding: 5px 10px;
	margin: 3px 0;
	background: #333;
	border-radius: 6px;
	text-align: left;
	font-size: 14px;
}

#lobby-waiting h3 {
	margin: 10px 0 5px;
	color: #8bba8b;
	font-size: 15px;
}

#lobby-status {
	margin-top: 6px;
	color: #888;
	font-size: 13px;
}

/* Тёмная тема inputs */
#gameplay-settings {
	background: #222;
	border: 1px solid #444;
	border-radius: 8px;
	padding: 10px;
	margin: 10px 0;
	text-align: left;
}

#gameplay-settings h3 {
	color: #bba;
	margin-bottom: 6px;
	text-align: center;
	font-size: 14px;
}

.settings-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
}

.settings-col {
	flex: 1 1 300px;
	min-width: 260px;
}

.setting-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 4px 0;
	flex-wrap: wrap;
}

/* Знак вопроса при наведении на настройку с описанием */
.setting-row[title] {
	cursor: help;
}

.setting-row[title] label {
	cursor: help;
}

.setting-row label {
	color: #aaa;
	font-size: 12px;
	min-width: 100px;
	flex: 1;
}

.setting-row select, .setting-row input[type="number"] {
	background: #1a1a1a;
	border: 1px solid #555;
	border-radius: 4px;
	color: #ddd;
	padding: 3px 5px;
	font-size: 12px;
	color-scheme: dark;
}

.cb {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: auto !important;
	cursor: pointer;
	font-size: 11px;
}

.cb input {
	cursor: pointer;
	accent-color: #4a7a4a;
}

.setting-error {
	font-size: 11px;
	margin-left: 4px;
}

.settings-category {
	margin: 10px 0 3px;
	padding: 3px 4px;
	font-size: 11px;
	font-weight: bold;
	color: #fa0;
	border-top: 1px solid #444;
	letter-spacing: 0.4px;
}

.setting-ctrl {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.setting-ctrl select,
.setting-ctrl input[type="number"] {
	background: #1a1a1a;
	border: 1px solid #555;
	border-radius: 4px;
	color: #ddd;
	padding: 3px 5px;
	font-size: 12px;
	color-scheme: dark;
}

/* Кастомный выпадающий список с многострочными пунктами */
.custom-select {
	position: relative;
	display: inline-block;
	min-width: 140px;
	max-width: 100%;
	font-size: 12px;
	width: 100%;
}

.custom-select-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	background: #1a1a1a;
	border: 1px solid #555;
	border-radius: 4px;
	color: #ddd;
	padding: 3px 6px;
	cursor: pointer;
	user-select: none;
	min-height: 24px;
	line-height: 1.3;
	white-space: normal;
}

.custom-select-btn:hover {
	border-color: #888;
}

.custom-select-btn.open {
	border-color: #fa0;
}

.custom-select-arrow {
	flex-shrink: 0;
	font-size: 9px;
	color: #888;
	margin-left: 2px;
}

.custom-select-dropdown {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 100%;
	max-width: max(100%, 360px);
	background: #222;
	border: 1px solid #666;
	border-radius: 4px;
	z-index: 1000;
	box-shadow: 0 4px 16px #0009;
	max-height: 300px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: #555 #1a1a1a;
}

.custom-select-dropdown::-webkit-scrollbar {
	width: 6px;
}

.custom-select-dropdown::-webkit-scrollbar-track {
	background: #1a1a1a;
	border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb {
	background: #555;
	border-radius: 3px;
}

.custom-select-dropdown::-webkit-scrollbar-thumb:hover {
	background: #777;
}

.custom-select-dropdown.open {
	display: block;
}

.custom-select-option {
	padding: 5px 8px;
	color: #ccc;
	cursor: pointer;
	font-size: 12px;
	line-height: 1.4;
	white-space: normal;
	border-bottom: 1px solid #333;
}

.custom-select-option:last-child {
	border-bottom: none;
}

.custom-select-option:hover {
	background: #2a3a2a;
	color: #fff;
}

.custom-select-option.selected {
	background: #1a2a1a;
	color: #fa0;
}

/* Скрытый нативный select для совместимости с getSettingsFromUI */
.custom-select-native {
	display: none;
}

/* Приоритет защиты — 4 строки rank */
.priority-rank-grid {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 2px 4px;
	align-items: center;
	font-size: 11px;
}

.priority-rank-num {
	color: #888;
	text-align: right;
	font-size: 10px;
}

.priority-rank-grid .custom-select {
	min-width: 80px;
}

.priority-dupe-error {
	grid-column: 1 / -1;
	color: #f66;
	font-size: 10px;
	margin-top: 2px;
}


/* Игра */
#game-screen {
	display: flex;
	height: 100vh;
}

#zone-container {
	flex: 1;
	overflow: hidden;
	position: relative;
	background: #111;
}

/* п.4: качество при зуме */
#zone-tiles {
	position: relative;
	min-width: 600px;
	min-height: 600px;
	transform-origin: 0 0;
	will-change: transform;
	image-rendering: auto;
}

#steps-counter {
	background: rgba(40, 80, 40, 0.6);
	color: #8f8;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: bold;
	border: 1px solid #4a8a4a;
	text-align: center;
	margin-top: 4px;
}

/* п.14: нет выделения мышкой */
.hex-cell {
	position: absolute;
	cursor: default;
	transition: transform 0.15s, filter 0.15s;
	user-select: none;
	-webkit-user-select: none;
}

/* Во время drag всё внутри zone-container имеет cursor grabbing */
#zone-container.zone-dragging,
#zone-container.zone-dragging * {
	cursor: grabbing !important;
}

/* п.4: quality */
.hex-cell img {
	display: block;
	image-rendering: high-quality;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	/* Отключаем браузерный drag картинок */
	-webkit-user-drag: none;
	user-drag: none;
	pointer-events: none;
}

.hex-cell .hex-num {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 9px;
	color: #333;
	text-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
	pointer-events: none;
	z-index: 55;
	user-select: none;
}

.hex-cell.revealed .hex-num {
	color: white;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.hex-cell.highlight {
	filter: brightness(1.3) drop-shadow(0 0 4px rgba(100, 255, 100, 0.6));
	cursor: pointer;
	z-index: 10;
}

.hex-cell.highlight.hex-hover {
	filter: brightness(1.5) drop-shadow(0 0 8px rgba(100, 255, 100, 0.9));
	transform: scale(1.08);
	z-index: 20;
}

.hex-cell.highlight-danger {
	filter: brightness(1.2) drop-shadow(0 0 4px rgba(255, 100, 50, 0.6));
	cursor: pointer;
	z-index: 10;
}

.hex-cell.highlight-danger.hex-hover {
	filter: brightness(1.4) drop-shadow(0 0 6px rgba(255, 100, 50, 0.9));
	transform: scale(1.08);
}

.hex-cell.highlight-exit {
	filter: brightness(1.2) drop-shadow(0 0 4px rgba(100, 150, 255, 0.6));
	cursor: pointer;
	z-index: 10;
}

.hex-cell.highlight-exit.hex-hover {
	filter: brightness(1.4) drop-shadow(0 0 6px rgba(100, 150, 255, 0.9));
	transform: scale(1.08);
}

.border-cell {
	opacity: 0.85;
}

/* п.11: пометка гайки */
/* nut-marked управляется через JS .nut-reveal-dot элементы */
.nut-reveal-dot {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	z-index: 5;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 7px;
	line-height: 1;
}

.hex-cell.private-revealed {
	opacity: 0.9;
	filter: brightness(0.8) saturate(0.7);
}

/* Баг 12: клетки открытые кнопкой "Открыть все" — приглушённые с синеватым оттенком */
.hex-cell.finish-revealed {
	filter: brightness(0.6) saturate(0.5) hue-rotate(200deg);
	opacity: 0.75;
}

.hex-cell.finish-revealed::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(80, 120, 200, 0.18);
	pointer-events: none;
	border-radius: 2px;
}

/* п.3: hover ограждения — только когда есть highlight */
.hex-cell.border-cell.highlight.border-pair-hover,
.hex-cell.border-cell.highlight-exit.border-pair-hover {
	filter: brightness(1.5) drop-shadow(0 0 6px rgba(255, 200, 50, 0.7));
}

/* Предметы на клетке */
.cell-item {
	position: absolute;
	cursor: pointer;
	z-index: 5;
}

.cell-item-img {
	width: 16px;
	height: 18px;
	border-radius: 2px;
	transition: transform 0.2s;
	border: 1px solid rgba(0, 0, 0, 0.3);
}

.cell-item:hover .cell-item-img {
	transform: scale(2.5);
	z-index: 100;
	border: 1px solid #ff0;
	box-shadow: 0 0 6px rgba(255, 255, 0, 0.6);
}

/* Маркеры */
.player-marker {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #000;
	font-size: 9px;
	text-align: center;
	line-height: 12px;
	color: #000;
	font-weight: bold;
	z-index: 50;
	pointer-events: none;
}

.city-marker {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #000;
	font-size: 9px;
	text-align: center;
	line-height: 12px;
	color: #000;
	font-weight: bold;
	z-index: 50;
	pointer-events: none;
}

/* Активный напарник — яркое жёлтое кольцо */
.player-marker.has-partner,
.city-marker.has-partner {
	box-shadow: 0 0 0 2px #ff0, 0 0 4px #ff0;
}

/* Завербованный (ещё не активен) — пунктирное жёлтое кольцо */
.player-marker.partner-queued,
.city-marker.partner-queued {
	box-shadow: 0 0 0 2px #ffd700;
	outline: 2px dashed #ffd700;
	outline-offset: 1px;
}

/* Мёртвый напарник — серое кольцо */
.player-marker.partner-dead,
.city-marker.partner-dead {
	box-shadow: 0 0 0 2px #888, 0 0 3px #888;
}

/* Если оба статуса одновременно (активный + завербованный) — двойное кольцо */
.player-marker.has-partner.partner-queued,
.city-marker.has-partner.partner-queued {
	box-shadow: 0 0 0 2px #ff0, 0 0 0 4px #ffd700;
}

/* Бейджи напарника — без цветного фона, только размер */
.partner-badge-queued {
}

.partner-badge-active {
}

.partner-badge-dead {
}

.partner-badge-scavenger {
}

.swamp-label {
	position: absolute;
	background: rgba(0, 0, 200, 0.7);
	color: white;
	font-size: 10px;
	padding: 1px 4px;
	border-radius: 4px;
	pointer-events: none;
	z-index: 60;
	font-weight: bold;
	white-space: nowrap;
}

/* Игра */
#game-screen {
	display: flex;
	height: 100vh;
	position: relative;
}

#zone-container {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #111;
}

/* ФИКС Chrome-размытия: zoom вместо transform:scale — браузер перерастеризует нативно */
#zone-tiles {
	position: relative;
	min-width: 600px;
	min-height: 600px;
	transform-origin: 0 0;
	/* will-change: transform УБРАНО — именно оно вызывало размытие в Chrome */
	image-rendering: auto;
}

/* Панель окон — поверх зоны */
#windows-container {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
	z-index: 200;
	overflow: hidden;
}

/* Кнопка сброса окон — фиксированная, всегда в правом нижнем углу viewport */
#btn-reset-windows {
	pointer-events: all;
	position: fixed;
	bottom: 8px;
	right: 8px;
	background: rgba(40, 40, 40, 0.9);
	border: 1px solid #666;
	border-radius: 4px;
	color: #aaa;
	font-size: 14px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	z-index: 9999;
	padding: 0;
	line-height: 1;
}

#btn-reset-windows:hover {
	background: #555;
	color: #fff;
}

/* ========= Оконный UI ========= */
.game-window {
	position: absolute;
	background: #222;
	border: 1px solid #444;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
	overflow: hidden;
	pointer-events: all;
	min-width: 80px;
	min-height: 24px;
}

.gw-header {
	display: flex;
	align-items: center;
	background: #2c2c2c;
	border-bottom: 1px solid #444;
	height: 24px;
	padding: 0 6px;
	cursor: grab;
	flex-shrink: 0;
	user-select: none;
	position: relative;
	z-index: 5;
}

.gw-header:active {
	cursor: grabbing;
}

.gw-title {
	flex: 1;
	font-size: 11px;
	color: #bbb;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gw-btn {
	background: transparent;
	border: none;
	color: #888;
	cursor: pointer;
	font-size: 14px;
	padding: 0 2px;
	line-height: 1;
	flex-shrink: 0;
}

.gw-btn:hover {
	color: #fff;
}

.gw-body {
	flex: 1;
	overflow: auto;
	position: relative;
	min-height: 0;
	scrollbar-width: thin;
	scrollbar-color: #555 #1a1a1a;
}

.gw-body::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

.gw-body::-webkit-scrollbar-track {
	background: #1a1a1a;
	border-radius: 3px;
}

.gw-body::-webkit-scrollbar-thumb {
	background: #555;
	border-radius: 3px;
}

.gw-body::-webkit-scrollbar-thumb:hover {
	background: #777;
}

.gw-body::-webkit-scrollbar-corner {
	background: #1a1a1a;
}

/* 8 ручек ресайза */
.gw-rz {
	position: absolute;
	z-index: 10;
	pointer-events: all;
}

.gw-rz-n {
	top: 0;
	left: 8px;
	right: 8px;
	height: 5px;
}

.gw-rz-s {
	bottom: 0;
	left: 8px;
	right: 8px;
	height: 5px;
}

.gw-rz-e {
	right: 0;
	top: 8px;
	bottom: 8px;
	width: 5px;
}

.gw-rz-w {
	left: 0;
	top: 8px;
	bottom: 8px;
	width: 5px;
}

.gw-rz-nw {
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
}

.gw-rz-ne {
	top: 0;
	right: 0;
	width: 10px;
	height: 10px;
}

.gw-rz-sw {
	bottom: 0;
	left: 0;
	width: 10px;
	height: 10px;
}

.gw-rz-se {
	bottom: 0;
	right: 0;
	width: 10px;
	height: 10px;
	background: linear-gradient(135deg, transparent 50%, #555 50%);
	border-radius: 0 0 4px 0;
}

/* City panel внутри окна */
#city-panel {
	position: relative;
	overflow: hidden;
	cursor: grab;
	height: 100%;
	background: #111;
}

/* Город: wrap двигается JS, SVG и маркеры внутри него — едут вместе */
#city-img-wrap {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
}

#city-img {
	display: block;
	border-radius: 4px;
	opacity: 0.9;
	user-select: none;
	-webkit-user-drag: none;
	pointer-events: none;
}

/* Скрываем текстовые лейблы секторов — дублируют картинку */

/* Dice panel внутри окна dice */
#dice-panel {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: none;
	padding: 4px 8px;
	position: static;
}

/* Log panel */
#log-panel {
	flex: 1 1 0;
	padding: 5px;
	overflow-y: auto;
	min-height: 0;
	background: #1a1a1a;
	height: 100%;
}

/* Actions panel */
#actions-panel {
	padding: 3px 5px;
	flex-shrink: 0;
	overflow-y: auto;
}

/* Players panel */
#players-panel {
	padding: 3px 5px;
	overflow-y: auto;
	height: 100%;
}

/* ========= Таблица цен ========= */
.prices-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 10px;
}

.prices-table th {
	background: #2a2a2a;
	color: #aaa;
	padding: 2px 4px;
	text-align: right;
	position: sticky;
	top: 0;
	z-index: 1;
}

.prices-table th:first-child {
	text-align: left;
}

.pt-mid {
	background: #2f3320 !important;
	color: #ddb !important;
	font-weight: bold;
}

.prices-table td {
	padding: 2px 4px;
	border-bottom: 1px solid #2a2a2a;
	text-align: right;
	color: #ccc;
	font-size: 10px;
}

.prices-table td:first-child {
	text-align: left;
}

.prices-table tr:hover td {
	background: #2a2a2a;
}

.pt-name {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.pt-img {
	width: 20px;
	height: 20px;
	object-fit: contain;
	flex-shrink: 0;
	image-rendering: -webkit-optimize-contrast;
}

.pt-emoji {
	font-size: 16px;
	width: 20px;
	text-align: center;
	flex-shrink: 0;
	line-height: 1;
}

.pt-val {
	text-align: right !important;
	color: #8bf;
	font-weight: bold;
	font-size: 11px;
}

.pt-val-neg {
	color: #f88 !important;
}

.prices-table2 td.pt-val {
	color: #ffa;
}

/* ========= Счётчик клеток зоны ========= */
.zc-summary {
	font-size: 11px;
	color: #aaa;
	padding: 4px 6px;
	border-bottom: 1px solid #333;
	background: #1e1e1e;
	position: sticky;
	top: 0;
	z-index: 1;
}

.zc-summary b {
	color: #8bf;
}

.zc-summary b.zc-rem {
	color: #fa8;
}

/* --zc-size управляется колёсиком мыши через JS (default 64px) */
.zc-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px;
	align-content: flex-start;
}

.zc-item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: default;
	width: calc(var(--zc-size, 64px) + 4px);
}

.zc-tile-img {
	width: var(--zc-size, 64px);
	height: calc(var(--zc-size, 64px) * 1.15);
	object-fit: contain;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
}

.zc-count {
	position: absolute;
	bottom: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: max(9px, calc(var(--zc-size, 64px) * 0.16));
	font-weight: bold;
	padding: 0 2px;
	border-radius: 3px;
	line-height: 1.4;
	min-width: 14px;
	text-align: center;
}

.zc-empty {
	color: #888;
	font-size: 11px;
	padding: 8px;
	text-align: center;
}

/* ========= Компоненты (общие) ========= */

/* Сектора города — SVG overlay */


#dice-img {
	width: 36px;
	height: 36px;
	border-radius: 6px;
}

#dice-label {
	font-size: 11px;
	color: #aaa;
}

#hint-panel {
	background: #2a2a1a;
	border: 1px solid #664;
	padding: 5px 8px;
	margin: 0 4px 4px;
	border-radius: 6px;
	flex-shrink: 0;
}

#hint-text {
	font-size: 11px;
	color: #cc8;
	white-space: pre-line;
	margin: 0;
	font-family: inherit;
}

.player-card {
	background: #2a2a2a;
	border: 2px solid #444;
	border-radius: 6px;
	padding: 3px 7px;
	margin-bottom: 2px;
	transition: background 0.3s, border-color 0.3s;
}

.player-card.current-turn {
	border-width: 3px;
	/* Fallback для браузеров без color-mix */
	background: #1e2e1e;
	/* Заливка цветом игрока через CSS-переменную */
	background: color-mix(in srgb, var(--player-color, #4a4) 18%, #1a2a1a);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--player-color, #4a4) 40%, transparent),
	0 0 8px color-mix(in srgb, var(--player-color, #4a4) 25%, transparent);
}

.player-card.is-me {
	background: #2a2a3a;
}

.player-card.current-turn.is-me {
	background: #1e1e2e;
	background: color-mix(in srgb, var(--player-color, #4a4) 22%, #1a1a2a);
}

.player-header {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	flex-wrap: wrap;
}

.player-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}

.player-info {
	font-size: 11px;
	color: #aaa;
	margin-top: 1px;
}

.player-inv {
	margin-top: 2px;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: flex-end;
}

.player-inv-protected {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	align-items: flex-end;
	margin-top: 1px;
	border-top: 1px solid #333;
	padding-top: 1px;
}

.inv-item {
	height: 32px;
	width: auto;
	max-width: 50px;
	border-radius: 3px;
	transition: transform 0.2s;
	object-fit: contain;
}

.inv-clickable {
	cursor: pointer;
	border: 1px solid transparent;
}

.inv-clickable:hover {
	border: 1px solid #f88;
	transform: scale(1.4);
	z-index: 10;
}

.status-badge {
	cursor: help;
	font-size: 16px;
}

#action-buttons {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.action-btn {
	padding: 5px 9px;
	border: none;
	border-radius: 5px;
	font-size: 12px;
	cursor: pointer;
	text-align: left;
	transition: background 0.2s;
	width: 100%;
}

.action-info {
	color: #aaa;
	font-size: 11px;
	padding: 3px 0;
	text-align: center;
}

.btn-dice {
	background: #4a6a9a;
	color: white;
}

.btn-dice:hover {
	background: #5a7aba;
}

.btn-skip {
	background: #5a2a2a;
	color: #fcc;
}

.btn-skip:hover {
	background: #7a3a3a;
}

.btn-buy {
	background: #6a6a2a;
	color: white;
}

.btn-buy:hover {
	background: #8a8a3a;
}

.btn-sell {
	background: #8a6a2a;
	color: white;
}

.btn-sell:hover {
	background: #aa8a3a;
}

.btn-danger {
	background: #6a2a2a;
	color: white;
}

.btn-danger:hover {
	background: #8a3a3a;
}

.btn-default {
	background: #3a3a3a;
	color: #ddd;
}

.btn-default:hover {
	background: #4a4a4a;
}

.btn-cancel {
	background: #3a3a20;
	color: #cc8;
	border: 1px solid #666640;
}

.btn-cancel:hover {
	background: #4a4a2a;
}

.btn-finish-game {
	background: #2a4a2a;
	color: #8f8;
	border: 1px solid #4a8a4a;
	width: 100%;
}

.btn-finish-game:hover {
	background: #3a6a3a;
}

#toast-container {
	position: fixed;
	bottom: 80px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: 6px;
	z-index: 9999;
	pointer-events: none;
}

.toast-item {
	background: #8a3a1a;
	color: #fff;
	padding: 7px 18px;
	border-radius: 6px;
	font-size: 13px;
	white-space: pre-line;
	text-align: center;
	box-shadow: 0 2px 8px #0008;
	animation: toast-in 0.18s ease;
	max-width: 320px;
}

.toast-item.toast-out {
	animation: toast-out 0.3s ease forwards;
}

@keyframes toast-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes toast-out {
	from {
		opacity: 1;
		transform: scale(1);
	}
	to {
		opacity: 0;
		transform: scale(.9);
	}
}

.wait-text {
	color: #666;
	font-size: 12px;
	text-align: center;
	padding: 6px;
}

#log-panel h4 {
	font-size: 12px;
	color: #888;
	margin-bottom: 3px;
}

#log-content {
	font-size: 11px;
	line-height: 1.4;
}

.log-entry {
	padding: 2px 4px;
	border-bottom: 1px solid #252525;
	color: #bbb;
}

.log-entry.danger {
	color: #ff6a6a;
}

.log-entry.success {
	color: #6aff6a;
}

.log-entry.error {
	color: #ffaa6a;
}