@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&display=swap');

#darts-counter-app {
	--bg-1: #0a0c10;
	--bg-2: #12151c;
	--card: #161a22;
	--card-alt: #1e232d;
	--border: rgba(255,255,255,.07);
	--text: #f4f6fa;
	--muted: #8b93a4;
	--accent: #2ee879;
	--accent-dark: #14a558;
	--double: #ffb020;
	--triple: #ff5f38;
	--danger: #ff4757;
	--radius: 16px;

	max-width: 480px;
	margin: 0 auto;
	background: radial-gradient(circle at 50% -10%, #1a2030 0%, var(--bg-1) 55%);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	box-sizing: border-box;
	border-radius: 22px;
	overflow: hidden;
	padding-bottom: 4px;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
#darts-counter-app * {
	box-sizing: border-box;
}

/* Auf dem Handy soll die App randlos den ganzen Bildschirm ausfüllen
 * (kein Rand, keine abgerundeten Ecken, kein Schatten) - fühlt sich damit
 * eher wie eine eigene App an statt wie ein eingebettetes Widget. Auf
 * größeren Bildschirmen bleibt die schöne "Karte in der Mitte"-Optik. */
@media (max-width: 600px) {
	#darts-counter-app {
		max-width: 100%;
		width: 100%;
		border-radius: 0;
		box-shadow: none;
		min-height: 100vh;
		min-height: 100dvh;
	}
}
#darts-counter-app h1, #darts-counter-app h2, #darts-counter-app .dc-title, #darts-counter-app .dc-player-remaining {
	font-family: 'Sora', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.dc-screen {
	padding: 16px 13px 36px;
}
.dc-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 8px;
}
.dc-topbar .dc-title {
	margin: 0;
	flex: 1;
	text-align: center;
}
.dc-icon-btn {
	border: 1px solid var(--border);
	background: linear-gradient(180deg, #232936, #1a1f28);
	color: var(--text);
	border-radius: 12px;
	width: 42px;
	height: 42px;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
}
.dc-icon-btn.dc-muted {
	color: var(--muted);
}
.dc-topbar-icons {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}
.dc-icon-btn-sm {
	border: 1px solid var(--border);
	background: var(--card-alt);
	color: var(--text);
	border-radius: 8px;
	width: 32px;
	height: 32px;
	font-size: 14px;
	cursor: pointer;
}
.dc-icon-btn-sm:disabled {
	opacity: .3;
}
.dc-icon-btn-sm.dc-icon-danger {
	color: var(--danger);
}
.dc-title {
	font-size: 20px;
	font-weight: 800;
	margin: 4px 0 14px;
	text-align: center;
	letter-spacing: .2px;
}
.dc-subtitle {
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	margin: -8px 0 14px;
}
.dc-card {
	background: linear-gradient(165deg, var(--card), var(--bg-2));
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 17px;
	margin-bottom: 13px;
	box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.dc-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.dc-row label.dc-field-label {
	font-weight: 700;
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
label.dc-field-label {
	font-weight: 700;
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: .06em;
}
.dc-btn {
	border: 1px solid var(--border);
	border-radius: 11px;
	padding: 12px 14px;
	font-size: 15px;
	font-weight: 700;
	background: var(--card-alt);
	color: var(--text);
	cursor: pointer;
	flex: 1 1 auto;
	min-width: 44px;
	transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.dc-btn:active {
	transform: scale(0.95);
	filter: brightness(0.92);
}
.dc-btn.dc-btn-primary {
	background: linear-gradient(135deg, var(--accent), var(--accent-dark));
	border-color: transparent;
	color: #06210f;
	box-shadow: 0 6px 20px rgba(46,232,121,.28);
}
.dc-btn.dc-btn-secondary {
	background: linear-gradient(180deg, #3b4457, #2b3242);
	border-color: transparent;
	color: #fff;
}
.dc-btn.dc-btn-active {
	background: linear-gradient(135deg, var(--accent), var(--accent-dark));
	border-color: transparent;
	color: #06210f;
	box-shadow: 0 4px 14px rgba(46,232,121,.3);
}
.dc-btn.dc-btn-danger {
	background: linear-gradient(135deg, #ff6b6b, var(--danger));
	border-color: transparent;
	color: #fff;
}
.dc-btn.dc-btn-ghost {
	background: transparent;
	border: 1.5px solid #333947;
	color: var(--text);
}
.dc-input {
	width: 100%;
	padding: 11px 12px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #0d0f14;
	color: var(--text);
	font-size: 16px;
}
.dc-input:focus {
	outline: none;
	border-color: var(--accent);
}

/* --- Spieler-Roster --- */
.dc-roster-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dc-roster-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: var(--card-alt);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 10px;
}
.dc-roster-row.dc-roster-selected {
	border-color: var(--accent);
	background: linear-gradient(180deg, rgba(46,232,121,.12), rgba(46,232,121,.03));
}
.dc-roster-check {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1;
	cursor: pointer;
}
.dc-roster-check input {
	width: 20px;
	height: 20px;
	accent-color: var(--accent);
}
.dc-roster-name {
	font-weight: 700;
	font-size: 15px;
}
.dc-roster-actions {
	display: flex;
	gap: 5px;
	flex-shrink: 0;
}

/* --- Zahlenfeld (7 Spalten) --- */
.dc-nums {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-top: 10px;
}
.dc-nums .dc-btn {
	padding: 14px 0;
	font-size: 17px;
	aspect-ratio: 1 / 0.85;
	background: linear-gradient(180deg, #242a35, #1a1f28);
}
.dc-nums .dc-btn-double {
	background: linear-gradient(160deg, #ffcc66, var(--double));
	color: #241300;
	border-color: transparent;
}
.dc-nums .dc-btn-double.dc-btn-active {
	background: linear-gradient(160deg, #ffe08a, #ffb020);
	box-shadow: 0 0 0 2px #fff inset, 0 4px 14px rgba(255,176,32,.4);
}
.dc-nums .dc-btn-triple {
	background: linear-gradient(160deg, #ff8a5f, var(--triple));
	color: #2a0e00;
	border-color: transparent;
}
.dc-nums .dc-btn-triple.dc-btn-active {
	background: linear-gradient(160deg, #ffab85, #ff5f38);
	box-shadow: 0 0 0 2px #fff inset, 0 4px 14px rgba(255,95,56,.4);
}
.dc-nums .dc-btn-undo {
	background: linear-gradient(160deg, #ff6b6b, var(--danger));
	color: #fff;
	font-size: 20px;
	border-color: transparent;
}
.dc-nums .dc-btn-bull {
	font-size: 13px;
}

/* --- Scoreboard --- */
.dc-scoreboard {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-bottom: 14px;
}
.dc-player-score {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: linear-gradient(165deg, var(--card), var(--bg-2));
	border: 1px solid var(--border);
	border-radius: 14px;
	padding: 12px 16px;
	border-left: 4px solid transparent;
}
.dc-player-score.dc-current {
	border-left-color: var(--accent);
	background: linear-gradient(165deg, rgba(46,232,121,.13), var(--bg-2));
	box-shadow: 0 0 0 1px rgba(46,232,121,.25), 0 8px 22px rgba(46,232,121,.12);
}
.dc-player-main {
	display: flex;
	flex-direction: column;
}
.dc-player-name {
	font-weight: 700;
	font-size: 15px;
}
.dc-player-live {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}
.dc-player-remaining {
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	background: linear-gradient(180deg, #ffffff, #c7ccd6);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.dc-turn-info {
	text-align: center;
	font-size: 14px;
	color: var(--muted);
	margin-bottom: 8px;
}
.dc-checkout-hint {
	text-align: center;
	font-size: 13.5px;
	color: var(--text);
	background: linear-gradient(180deg, rgba(255,215,0,.14), rgba(255,215,0,.05));
	border: 1px solid rgba(255,215,0,.35);
	border-radius: 10px;
	padding: 8px 10px;
	margin-bottom: 10px;
}
#darts-counter-app.dc-theme-light .dc-checkout-hint {
	background: linear-gradient(180deg, rgba(180,83,9,.10), rgba(180,83,9,.03));
	border-color: rgba(180,83,9,.30);
}
.dc-turn-darts {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 10px;
	min-height: 30px;
}
.dc-dart-chip {
	background: var(--card-alt);
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
}
.dc-bust-banner {
	background: linear-gradient(135deg, #ff6b6b, var(--danger));
	color: #fff;
	text-align: center;
	padding: 11px;
	border-radius: 12px;
	font-weight: 700;
	margin-bottom: 10px;
	box-shadow: 0 6px 18px rgba(255,71,87,.3);
}
.dc-winner-banner {
	background: linear-gradient(135deg, var(--accent), var(--accent-dark));
	color: #06210f;
	text-align: center;
	padding: 20px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 22px;
	margin-bottom: 14px;
	box-shadow: 0 10px 28px rgba(46,232,121,.3);
}

/* --- Sounds --- */
.dc-sound-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}
.dc-sound-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--card-alt);
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 14px;
}
.dc-sound-item .dc-sound-actions {
	display: flex;
	gap: 6px;
}
.dc-sound-item .dc-sound-actions .dc-btn {
	padding: 6px 10px;
	font-size: 13px;
}
.dc-rec-indicator {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--danger);
	margin-right: 6px;
	animation: dc-pulse 1s infinite;
}
@keyframes dc-pulse {
	0%   { opacity: 1; }
	50%  { opacity: .3; }
	100% { opacity: 1; }
}
.dc-rec-banner-hidden {
	display: none;
}

/* --- Halten-zum-Aufnehmen-Button (WhatsApp-artig) --- */
.dc-hold-record-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid var(--border);
	background: linear-gradient(180deg, var(--card-alt), var(--card));
	color: var(--text);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	touch-action: none;
}
.dc-hold-record-btn:disabled {
	opacity: .4;
	cursor: not-allowed;
}
.dc-hold-record-btn .dc-record-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--danger);
	flex-shrink: 0;
	transition: transform .15s ease;
}
.dc-hold-record-btn.dc-connecting .dc-record-dot {
	animation: dc-pulse .8s infinite;
}
.dc-hold-record-btn.dc-recording {
	border-color: rgba(255,71,87,.5);
	background: linear-gradient(180deg, rgba(255,71,87,.18), rgba(255,71,87,.06));
}
.dc-hold-record-btn.dc-recording .dc-record-dot {
	border-radius: 4px; /* Kreis -> Quadrat, wie bei laufenden Aufnahmen üblich */
	animation: dc-pulse .6s infinite;
	transform: scale(1.05);
}
.dc-hold-record-btn-compact {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 10px;
	flex: 0 0 auto;
}
.dc-hold-record-btn-compact .dc-record-dot {
	width: 14px;
	height: 14px;
}
.dc-preview-card {
	background: linear-gradient(165deg, #2a2110, #1a1710);
	border: 1px solid var(--double);
}
.dc-footer-nav {
	display: flex;
	gap: 8px;
	margin-top: 16px;
}
.dc-small-note {
	font-size: 12px;
	color: var(--muted);
	margin-top: 4px;
	line-height: 1.5;
}
.dc-tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}
.dc-tabs .dc-btn {
	flex: 1;
	font-size: 13px;
}

/* --- Vollständige Liste aller erreichbaren Zug-Punktzahlen (0-180) --- */
.dc-turnnum-list {
	display: flex;
	flex-direction: column;
	max-height: 380px;
	overflow-y: auto;
	margin-top: 8px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgba(0,0,0,.12);
}
#darts-counter-app.dc-theme-light .dc-turnnum-list {
	background: rgba(0,0,0,.02);
}
.dc-turnnum-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-bottom: 1px solid var(--border);
}
.dc-turnnum-row:last-child {
	border-bottom: none;
}
.dc-turnnum-num {
	width: 34px;
	flex-shrink: 0;
	font-weight: 800;
	font-size: 14px;
}
.dc-turnnum-status {
	flex: 1;
	font-size: 11px;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.dc-turnnum-actions {
	display: flex;
	gap: 4px;
	flex-shrink: 0;
}
.dc-btn.dc-btn-xs {
	padding: 6px 9px;
	font-size: 12px;
	min-width: 0;
	flex: 0 0 auto;
}

/* --- Abdeckungs-Grid --- */
.dc-coverage-grid {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
	max-height: 320px;
	overflow-y: auto;
}
.dc-coverage-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.dc-coverage-num {
	width: 32px;
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
}
.dc-coverage-chip {
	flex: 1;
	text-align: center;
	padding: 6px 0;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	background: #1c212b;
	color: var(--muted);
	border: 1px solid var(--border);
	cursor: pointer;
}
.dc-coverage-chip.dc-covered {
	background: rgba(46,232,121,.16);
	color: var(--accent);
	border-color: var(--accent);
}
.dc-legend {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--muted);
	margin-top: 8px;
}
.dc-legend span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.dc-legend .dc-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	display: inline-block;
}

/* --- Statistik-Tabelle --- */
.dc-stats-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.dc-stats-table th {
	color: var(--muted);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: .04em;
	padding: 6px 4px;
}
.dc-stats-table td {
	padding: 9px 4px;
	border-top: 1px solid var(--border);
}

/* --- Footer --- */
.dc-app-footer {
	text-align: center;
	font-size: 10.5px;
	color: var(--muted);
	opacity: .55;
	padding: 10px 13px 14px;
	letter-spacing: .01em;
}

/* --- Aufnahme-Hinweis-Karte (themefähig statt Inline-Style) --- */
.dc-rec-card {
	background: linear-gradient(165deg, #241010, #1a0f10);
	border-color: rgba(255,71,87,.35);
}

/* --- Konfetti beim Sieg --- */
.dc-winner-top {
	position: relative;
	margin-bottom: 14px;
}
.dc-winner-top .dc-winner-banner {
	margin-bottom: 0;
}
.dc-confetti-overlay {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 14px;
	pointer-events: none;
	z-index: 5;
}
.dc-confetti-piece {
	position: absolute;
	top: -14px;
	opacity: .95;
	animation-name: dc-confetti-fall;
	animation-timing-function: cubic-bezier(.35, .55, .55, 1);
	animation-fill-mode: forwards;
	box-shadow: 0 0 4px rgba(255,215,0,.5);
}
@keyframes dc-confetti-fall {
	0%   { transform: translateY(-16px) rotate(0deg); opacity: 1; }
	100% { transform: translateY(220px) rotate(480deg); opacity: 0; }
}
.dc-confetti-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 6;
	pointer-events: auto;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: none;
	background: rgba(0,0,0,.35);
	color: #fff;
	font-size: 13px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* ---------------------------------------------------------
 * Light Mode
 * --------------------------------------------------------- */
#darts-counter-app.dc-theme-light {
	--bg-1: #f3f5fa;
	--bg-2: #eaedf4;
	--card: #ffffff;
	--card-alt: #eef1f7;
	--border: rgba(15,20,40,.09);
	--text: #1b1f2a;
	--muted: #667085;
	--accent: #14a558;
	--accent-dark: #0e7c42;
	--double: #b45309;
	--triple: #c62828;
	--danger: #d33;
	background: radial-gradient(circle at 50% -10%, #ffffff 0%, var(--bg-1) 55%);
	box-shadow: 0 20px 60px rgba(20,30,60,.12);
}
#darts-counter-app.dc-theme-light .dc-icon-btn {
	background: linear-gradient(180deg, #ffffff, #eef1f7);
}
#darts-counter-app.dc-theme-light .dc-input {
	background: #ffffff;
}
#darts-counter-app.dc-theme-light .dc-btn-ghost {
	border-color: rgba(15,20,40,.18);
}
#darts-counter-app.dc-theme-light .dc-player-remaining {
	background: linear-gradient(180deg, #1b1f2a, #4a5162);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
#darts-counter-app.dc-theme-light .dc-nums .dc-btn {
	background: linear-gradient(180deg, #ffffff, #eef1f7);
}
#darts-counter-app.dc-theme-light .dc-preview-card {
	background: linear-gradient(165deg, #fff6df, #fef0c7);
	border-color: var(--double);
}
#darts-counter-app.dc-theme-light .dc-rec-card {
	background: linear-gradient(165deg, #ffe3e3, #ffd6d6);
	border-color: rgba(211,51,51,.35);
}
#darts-counter-app.dc-theme-light .dc-coverage-chip {
	background: #eef1f7;
}