/*
 * Lorearium Encounter Tracker -- player-facing initiative tracker.
 * Scoped to .lz-enc-tracker.
 */

/* ------------------------------------------------------------------ */
/* Scope vars                                                           */
/* ------------------------------------------------------------------ */

.lz-enc-tracker {
	--lz-bg:        #0e0e0f;
	--lz-panel:     #17181a;
	--lz-panel-2:   #1e2023;
	--lz-panel-3:   #24272b;
	--lz-border:    #2d2f33;
	--lz-text:      #e4e4e7;
	--lz-muted:     #8b8d92;
	--lz-red:       #c53131;
	--lz-red-hi:    #e84545;
	--lz-gold:      #dda15e;
	--lz-tarnish:   #6b5a3e;
	--lz-green:     #6a9455;
	--lz-purple:    #a58bc7;
	--lz-font-mark:    'IM Fell English SC', Georgia, serif;
	--lz-font-caps:    'Marcellus SC', Georgia, serif;
	--lz-font-body:    'Cardo', Georgia, serif;
	--lz-font-label:   'Alegreya Sans SC', system-ui, sans-serif;
	color: var(--lz-text);
	font-family: var(--lz-font-body);
}

/* ------------------------------------------------------------------ */
/* Empty state                                                          */
/* ------------------------------------------------------------------ */

.lz-pt-empty {
	background: var(--lz-panel);
	border: 1px solid var(--lz-border);
	border-top: 2px solid var(--lz-red);
	border-radius: 3px;
	padding: 2rem 1.5rem;
	text-align: center;
}

.lz-pt-empty-label {
	font-family: var(--lz-font-label);
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--lz-muted);
	margin: 0;
}

/* ------------------------------------------------------------------ */
/* Active encounter wrapper                                            */
/* ------------------------------------------------------------------ */

.lz-pt-active {
	background: var(--lz-panel);
	border: 1px solid var(--lz-border);
	border-top: 2px solid var(--lz-red);
	border-radius: 3px;
	padding: 1.25rem 1.5rem;
}

/* ------------------------------------------------------------------ */
/* Head bar                                                            */
/* ------------------------------------------------------------------ */

.lz-pt-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.85rem;
}

.lz-pt-title {
	font-family: var(--lz-font-caps);
	font-size: 1.05rem;
	color: var(--lz-gold);
	margin: 0;
}

.lz-pt-round {
	font-family: var(--lz-font-label);
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	color: var(--lz-muted);
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* Your turn banner                                                    */
/* ------------------------------------------------------------------ */

.lz-pt-your-turn {
	background: rgba(232, 69, 69, 0.14);
	border: 1px solid var(--lz-red);
	border-radius: 2px;
	padding: 0.6rem 0.85rem;
	margin-bottom: 0.85rem;
	font-family: var(--lz-font-label);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	color: var(--lz-red-hi);
	text-transform: uppercase;
	text-align: center;
}

/* ------------------------------------------------------------------ */
/* Initiative entry                                                    */
/* ------------------------------------------------------------------ */

.lz-pt-init-entry {
	background: rgba(221, 161, 94, 0.1);
	border: 1px solid var(--lz-gold);
	border-radius: 2px;
	padding: 0.85rem 1rem;
	margin-bottom: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.lz-pt-init-entry p {
	margin: 0;
	font-family: var(--lz-font-label);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	color: var(--lz-gold);
	text-transform: uppercase;
}

.lz-pt-init-input {
	background: var(--lz-panel-2);
	border: 1px solid var(--lz-border);
	border-radius: 2px;
	color: var(--lz-text);
	padding: 0.4rem 0.5rem;
	font-size: 0.95rem;
	font-family: var(--lz-font-body);
	width: 4.5rem;
	text-align: center;
	box-sizing: border-box;
}
.lz-pt-init-input:focus { outline: 1px solid var(--lz-gold); border-color: var(--lz-gold); }

/* ------------------------------------------------------------------ */
/* Cards grid                                                          */
/* ------------------------------------------------------------------ */

.lz-pt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
	gap: 0.5rem;
	margin-bottom: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Individual card                                                     */
/* ------------------------------------------------------------------ */

.lz-pt-card {
	background: var(--lz-panel-2);
	border: 1px solid var(--lz-border);
	border-radius: 2px;
	padding: 0.55rem 0.65rem;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.lz-pt-card.is-turn    { border-color: var(--lz-red-hi); box-shadow: 0 0 0 1px var(--lz-red-hi); order: -1; }
.lz-pt-card.is-npc    { background: var(--lz-panel-3); }
.lz-pt-card.is-you .lz-pt-card-name { color: var(--lz-gold); }
.lz-pt-card.is-done   { opacity: 0.4; order: 10; }
.lz-pt-card.is-ready  { border-color: var(--lz-gold); box-shadow: 0 0 0 1px var(--lz-gold); }
.lz-pt-card.is-delayed { border-color: var(--lz-purple); }
.lz-pt-card.is-down   { opacity: 0.35; order: 20; }

/* ------------------------------------------------------------------ */
/* Card internals                                                      */
/* ------------------------------------------------------------------ */

.lz-pt-card-head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.lz-pt-card-init {
	font-family: var(--lz-font-caps);
	font-size: 1.1rem;
	color: var(--lz-gold);
	min-width: 1.6rem;
	text-align: center;
}

.lz-pt-card-portrait {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--lz-panel-3);
	border: 1px solid var(--lz-tarnish);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--lz-font-mark);
	font-size: 0.75rem;
	color: var(--lz-gold);
	flex-shrink: 0;
}

.lz-pt-card-name {
	font-family: var(--lz-font-caps);
	font-size: 0.82rem;
	color: var(--lz-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

/* HP bar (teammate view) */
.lz-pt-card-hp {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.lz-pt-card-hp-bar {
	flex: 1;
	height: 4px;
	background: var(--lz-panel-3);
	border-radius: 2px;
	overflow: hidden;
}

.lz-pt-card-hp-bar-fill {
	height: 100%;
	background: var(--lz-green);
}
.lz-pt-card-hp-bar-fill.mid { background: var(--lz-gold); }
.lz-pt-card-hp-bar-fill.low { background: var(--lz-red-hi); }

/* Numeric HP (own card only) */
.lz-pt-card-hp-numeric {
	font-family: var(--lz-font-caps);
	font-size: 0.75rem;
	color: var(--lz-text);
}
.lz-pt-card-hp-numeric .hp-max { color: var(--lz-muted); }

/* NPC status text */
.lz-pt-card-hp-status {
	font-family: var(--lz-font-label);
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	color: var(--lz-muted);
	text-transform: uppercase;
}
.lz-pt-card-hp-status.is-bloodied { color: var(--lz-red-hi); }
.lz-pt-card-hp-status.is-down     { color: var(--lz-red); }

/* Conditions row */
.lz-pt-card-conds {
	display: flex;
	flex-wrap: wrap;
	gap: 0.18rem;
	min-height: 0.9rem;
}
.lz-pt-card-conds .cond-chip {
	font-size: 0.5rem;
	padding: 0.08rem 0.3rem;
}

/* Ready line */
.lz-pt-card-ready-line {
	font-family: var(--lz-font-label);
	font-size: 0.5rem;
	letter-spacing: 0.12em;
	color: var(--lz-gold);
	text-transform: uppercase;
	padding: 0.2rem 0 0;
	border-top: 1px dashed var(--lz-tarnish);
	margin-top: 0.15rem;
}
.lz-pt-card-ready-line .trigger {
	display: block;
	text-transform: none;
	letter-spacing: 0;
	color: var(--lz-text);
	font-style: italic;
	font-family: var(--lz-font-body);
	font-size: 0.68rem;
	margin-top: 0.1rem;
	line-height: 1.35;
}

/* ------------------------------------------------------------------ */
/* Turn action buttons (own turn)                                     */
/* ------------------------------------------------------------------ */

.lz-pt-turn-actions {
	display: flex;
	gap: 0.35rem;
	margin-top: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.lz-pt-btn {
	background: var(--lz-panel-2);
	border: 1px solid var(--lz-tarnish);
	color: var(--lz-gold);
	font-family: var(--lz-font-label);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.5rem 0.85rem;
	border-radius: 2px;
	cursor: pointer;
	box-sizing: border-box;
}
.lz-pt-btn:hover { color: var(--lz-text); border-color: var(--lz-gold); }

.lz-pt-btn-primary {
	background: var(--lz-gold);
	color: var(--lz-bg, #0e0e0f);
	border-color: var(--lz-gold);
}
.lz-pt-btn-primary:hover { background: var(--lz-red-hi); border-color: var(--lz-red-hi); color: var(--lz-text); }

.lz-pt-btn-ghost {
	background: transparent;
	border-color: var(--lz-border);
	color: var(--lz-muted);
}
.lz-pt-btn-ghost:hover { color: var(--lz-gold); }

.lz-pt-btn-done {
	background: var(--lz-green);
	border-color: var(--lz-green);
	color: var(--lz-bg, #0e0e0f);
	flex: 1;
}
.lz-pt-btn-done:hover { background: var(--lz-gold); border-color: var(--lz-gold); }

/* ------------------------------------------------------------------ */
/* Dialogs                                                             */
/* ------------------------------------------------------------------ */

.lz-pt-dialog {
	background: var(--lz-panel, #17181a);
	border: 1px solid var(--lz-border, #2d2f33);
	border-radius: 4px;
	color: var(--lz-text, #e4e4e7);
	padding: 1.5rem;
	font-family: var(--lz-font-body, 'Cardo', Georgia, serif);
	min-width: 280px;
	max-width: 90vw;
}
.lz-pt-dialog::backdrop { background: rgba(0,0,0,0.7); }

.lz-pt-dialog-title {
	font-family: var(--lz-font-caps, 'Marcellus SC', Georgia, serif);
	font-size: 1rem;
	color: var(--lz-gold, #dda15e);
	margin: 0 0 1rem;
}

.lz-pt-input {
	background: var(--lz-panel-2, #1e2023);
	border: 1px solid var(--lz-border, #2d2f33);
	border-radius: 2px;
	color: var(--lz-text, #e4e4e7);
	padding: 0.5rem 0.65rem;
	font-size: 0.92rem;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.75rem;
}
.lz-pt-input:focus { outline: 1px solid var(--lz-gold, #dda15e); border-color: var(--lz-gold, #dda15e); }

.lz-pt-dialog-btns {
	display: flex;
	gap: 0.5rem;
	justify-content: flex-end;
	margin-top: 0.85rem;
}

/* ------------------------------------------------------------------ */
/* Login gate                                                          */
/* ------------------------------------------------------------------ */

.lz-pt-login-gate {
	font-family: var(--lz-font-label, 'Alegreya Sans SC', system-ui, sans-serif);
	font-size: 0.78rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--lz-muted, #8b8d92);
	text-align: center;
	padding: 2rem 0;
}

/* ------------------------------------------------------------------ */
/* Condition chips (duplicated here so tracker works without dm.css)  */
/* ------------------------------------------------------------------ */

.lz-enc-tracker .cond-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	font-family: var(--lz-font-label);
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 0.08rem 0.3rem;
	border-radius: 10px;
	border: 1px solid currentColor;
	background: rgba(0,0,0,0.2);
}
.lz-enc-tracker .cond-chip .dur { color: var(--lz-muted); font-size: 0.5rem; margin-left: 0.1rem; }
.lz-enc-tracker .c-blinded      { color: var(--lz-muted); }
.lz-enc-tracker .c-charmed      { color: #ec7ba9; }
.lz-enc-tracker .c-deafened     { color: var(--lz-muted); }
.lz-enc-tracker .c-exhaustion   { color: #d4804d; }
.lz-enc-tracker .c-frightened   { color: var(--lz-purple); }
.lz-enc-tracker .c-grappled     { color: var(--lz-tarnish); }
.lz-enc-tracker .c-incapacitated{ color: var(--lz-red-hi); }
.lz-enc-tracker .c-invisible    { color: var(--lz-muted); font-style: italic; }
.lz-enc-tracker .c-paralyzed    { color: var(--lz-gold); }
.lz-enc-tracker .c-petrified    { color: #909090; }
.lz-enc-tracker .c-poisoned     { color: var(--lz-green); }
.lz-enc-tracker .c-prone        { color: #b8935a; }
.lz-enc-tracker .c-restrained   { color: #d0a0c0; }
.lz-enc-tracker .c-stunned      { color: var(--lz-gold); }
.lz-enc-tracker .c-unconscious  { color: var(--lz-red); }
.lz-enc-tracker .c-vex          { color: var(--lz-red-hi); }
.lz-enc-tracker .c-sap          { color: var(--lz-purple); }
.lz-enc-tracker .c-slow         { color: var(--lz-tarnish); }

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 480px) {
	.lz-pt-cards {
		grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	}
}

/* ------------------------------------------------------------------ */
/* Mobile responsive fixes -- 2026-07-29                              */
/* Touch targets, legibility, and layout for narrow/small viewports.  */
/* All new rules; no existing rules removed.                          */
/* ------------------------------------------------------------------ */

/* -- CRITICAL: Tap target -- all buttons below 44px threshold ------- */
/* Raises every .lz-pt-btn from ~29px to 44px minimum height.         */
.lz-pt-btn {
	min-height: 44px;
	padding: 0.75rem 1rem;
	font-size: 0.8rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -- HIGH: Condition chip legibility -- 0.58rem (9.3px) is unreadable */
.lz-enc-tracker .cond-chip {
	font-size: 0.65rem;
	padding: 0.15rem 0.4rem;
}
.lz-pt-card-conds .cond-chip {
	font-size: 0.65rem;
	padding: 0.12rem 0.35rem;
}

/* -- HIGH: Ready-line label at 0.5rem (8px) and trigger at 0.68rem -- */
.lz-pt-card-ready-line {
	font-size: 0.65rem;
}
.lz-pt-card-ready-line .trigger {
	font-size: 0.8rem;
	line-height: 1.5;
}

/* -- HIGH: NPC HP status text at 0.6rem (9.6px) -- raise to 0.75rem  */
.lz-pt-card-hp-status {
	font-size: 0.75rem;
}

/* -- MEDIUM: Dialog overflow -- content cut off in landscape on phone */
.lz-pt-dialog {
	box-sizing: border-box;
	max-height: 90dvh;
	overflow-y: auto;
}

/* -- LOW: Initiative input tap target -- ~31px, needs 44px min-height */
.lz-pt-init-input {
	min-height: 44px;
	padding: 0.6rem 0.5rem;
}

/* -- MEDIUM: Font-size floor and layout fixes for narrow viewports --- */
@media (max-width: 640px) {

	/* Primary functional text raised to 0.875rem (14px) */
	.lz-pt-card-name {
		font-size: 0.875rem;
	}
	.lz-pt-your-turn {
		font-size: 0.875rem;
	}
	.lz-pt-card-hp-numeric {
		font-size: 0.875rem;
	}
	.lz-pt-init-entry p {
		font-size: 0.875rem;
	}

	/* Secondary labels -- floor at 0.78rem (12.5px) */
	.lz-pt-round,
	.lz-pt-empty-label,
	.lz-pt-login-gate {
		font-size: 0.78rem;
	}

	/* Turn-action row -- allow wrap so buttons never overflow viewport */
	.lz-pt-turn-actions {
		flex-wrap: wrap;
	}
	/* Ready and Delay share remaining space and never shrink below 5rem */
	.lz-pt-turn-actions .lz-pt-btn:not(.lz-pt-btn-done) {
		flex: 1 1 auto;
		min-width: 5rem;
	}
}