:root {
  --text: #6b6375;
  --text-h: #08060d;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #f4f3ec;
  --accent: #aa3bff;
  --accent-bg: rgba(170, 59, 255, 0.1);
  --accent-border: rgba(170, 59, 255, 0.5);
  --social-bg: rgba(244, 243, 236, 0.5);
  --shadow:
    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;

  --sans: system-ui, "Segoe UI", Roboto, sans-serif;
  --heading: system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #16171d;
    --border: #2e303a;
    --code-bg: #1f2028;
    --accent: #c084fc;
    --accent-bg: rgba(192, 132, 252, 0.15);
    --accent-border: rgba(192, 132, 252, 0.5);
    --social-bg: rgba(47, 48, 58, 0.5);
    --shadow:
      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  margin: 0;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,




#app {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}



/* Game styles (preserved for game screen) */
:root {
  --cardSize: 5em;
  --redCard: #dc251c;
  --yellowCard: #fcf604;
  --blueCard: #0493de;
  --greenCard: #018d41;
  --blackCard: #1f1b18;
  --lowShadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --lowShadowHover:
    0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  --shadowColor: rgba(0, 0, 0, 0.16);
  --fieldSize: 24em;
  --playerSpace: 12em;
}

body {
  perspective: 100em;
}

.card {
  display: inline-block;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 0.8em;
  padding: 0.3em;
  box-shadow: var(--lowShadow);
  transition: 200ms;
  position: relative;
}

.card .bckg {
  width: var(--cardSize);
  height: calc(var(--cardSize) * 1.5357);
  border-radius: 0.5em;
  overflow: hidden;
  position: relative;
}

.card .bckg::before {
  content: "";
  width: var(--cardSize);
  height: calc(var(--cardSize) * 1.3);
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(10deg);
  transform-origin: center center;
  border-radius: 90% 40%;
}

.card .center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
}

.card.red {
  color: var(--redCard);
}
.card.red .bckg {
  background-color: var(--redCard);
}

.card.yellow {
  color: var(--yellowCard);
}
.card.yellow .bckg {
  background-color: var(--yellowCard);
}

.card.blue {
  color: var(--blueCard);
}
.card.blue .bckg {
  background-color: var(--blueCard);
}

.card.green {
  color: var(--greenCard);
}
.card.green .bckg {
  background-color: var(--greenCard);
}

.card.black {
  color: var(--blackCard);
}
.card.black .bckg {
  background-color: var(--blackCard);
}

.card.turned:hover {
  cursor: default;
}
.card.turned .bckg {
  background-color: var(--blackCard);
}
.card.turned .bckg::before {
  background-color: var(--redCard);
}

.game-field {
  height: 100vh; /* Forzato a altezza schermo per il posizionamento del tavolo */
  display: grid;
  justify-content: center;
  align-content: center;
  grid-gap: 0.5em;
  grid-template-columns: var(--playerSpace) var(--fieldSize) var(--playerSpace);
  grid-template-rows: var(--playerSpace) var(--fieldSize) var(--playerSpace);
}

.game-field.perspective {
  transform: rotateX(30deg);
}

.game-field #piles_area {
  position: relative;
  border-radius: 4em;
  transition: 200ms;
}

.game-field.yellow #piles_area {
  background-color: rgba(252, 246, 4, 0.4);
}
.game-field.blue #piles_area {
  background-color: rgba(4, 147, 222, 0.4);
}
.game-field.red #piles_area {
  background-color: rgba(220, 37, 28, 0.4);
}
.game-field.green #piles_area {
  background-color: rgba(1, 141, 65, 0.4);
}

#piles_area {
  grid-area: 2 / 2;
}
#player {
  grid-area: 3 / 2;
}
#player_left {
  grid-area: 2 / 1;
}
#player_top {
  grid-area: 1 / 2;
}
#player_right {
  grid-area: 2 / 3;
}

/* DRAW PILE */
#draw_pile {
  position: absolute;
  left: 5em;
  top: 5em;
}
#draw_pile .card.top-card,
#draw_pile .card.pile {
  position: absolute;
}
#draw_pile .card.pile {
  box-shadow:
    0px 2px white,
    0px 4px var(--shadowColor),
    0px 6px white,
    0px 8px var(--shadowColor),
    0px 10px white,
    0px 12px var(--shadowColor),
    0px 14px white,
    0px 16px var(--shadowColor),
    0px 18px white,
    0px 20px var(--shadowColor);
}
#draw_pile .card.pile:hover {
  transform: none;
}
#draw_pile .card.top-card {
  z-index: 100;
  box-shadow: none;
}
#draw_pile .card.top-card:hover {
  box-shadow: 0px 4px var(--shadowColor);
  cursor: pointer;
  transform: translateY(1em);
}

#discard_pile {
  position: absolute;
  left: 12em;
  top: 5.7em;
}
#discard_pile .card.top-card,
#discard_pile .card.pile {
  position: absolute;
}
#discard_pile .card.pile {
  box-shadow:
    0px 2px white,
    0px 4px var(--shadowColor),
    0px 6px white,
    0px 8px var(--shadowColor);
}
#discard_pile .card.pile:hover {
  transform: none;
}
#discard_pile .card.top-card {
  z-index: 100;
  box-shadow: none;
}

.player_hand {
  position: relative;
}
.player_hand .card {
  position: absolute;
}

.player_hand .card:nth-child(1) {
  left: calc(1 * 2.2em);
}
.player_hand .card:nth-child(2) {
  left: calc(2 * 2.2em);
}
.player_hand .card:nth-child(3) {
  left: calc(3 * 2.2em);
}
.player_hand .card:nth-child(4) {
  left: calc(4 * 2.2em);
}
.player_hand .card:nth-child(5) {
  left: calc(5 * 2.2em);
}
.player_hand .card:nth-child(6) {
  left: calc(6 * 2.2em);
}
.player_hand .card:nth-child(7) {
  left: calc(7 * 2.2em);
}
.player_hand .card:nth-child(8) {
  left: calc(8 * 2.2em);
}
.player_hand .card:nth-child(9) {
  left: calc(9 * 2.2em);
}
.player_hand .card:nth-child(10) {
  left: calc(10 * 2.2em);
}
.player_hand .card:nth-child(11) {
  left: calc(11 * 2.2em);
}
.player_hand .card:nth-child(12) {
  left: calc(12 * 2.2em);
}
.player_hand .card:nth-child(13) {
  left: calc(13 * 2.2em);
}
.player_hand .card:nth-child(14) {
  left: calc(14 * 2.2em);
}
.player_hand .card:nth-child(15) {
  left: calc(15 * 2.2em);
}

#player .player_hand .card {
  cursor: pointer;
}
#player .player_hand .card:hover {
  transform-origin: left bottom;
  transform: rotate(-10deg) translateY(-0.5em);
}
#player .player_hand .card:hover ~ .card {
  transform: translateX(2em);
}

#player_left .player_hand {
  transform-origin: left bottom;
  transform: rotate(90deg) translateY(-10em);
}

#player_top .player_hand {
  transform: translateY(1em);
}

#player_right .player_hand {
  transform-origin: left bottom;
  transform: rotate(-90deg) translate(-24em, 1em);
}

	.toast-container.svelte-c82lj3 {
		position: fixed;
		bottom: 24px;
		right: 24px;
		z-index: 10000;
		max-width: 400px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		pointer-events: none;
	}

	.toast.svelte-c82lj3 {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 16px;
		border-radius: 6px;
		font-size: 14px;
		box-shadow: var(--shadow);
		animation: svelte-c82lj3-slideIn 0.3s ease-out;
		pointer-events: auto;
		max-width: 400px;
	}

	@keyframes svelte-c82lj3-slideIn {
		from {
			transform: translateX(400px);
			opacity: 0;
		}
		to {
			transform: translateX(0);
			opacity: 1;
		}
	}

	.toast-success.svelte-c82lj3 {
		background-color: #dcfce7;
		color: #166534;
		border-left: 4px solid #16a34a;
	}

	.toast-error.svelte-c82lj3 {
		background-color: #fee2e2;
		color: #991b1b;
		border-left: 4px solid #dc2626;
	}

	.toast-warning.svelte-c82lj3 {
		background-color: #fef3c7;
		color: #92400e;
		border-left: 4px solid #f59e0b;
	}

	.toast-info.svelte-c82lj3 {
		background-color: #dbeafe;
		color: #0c2d6b;
		border-left: 4px solid #3b82f6;
	}

	.toast-content.svelte-c82lj3 {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.toast-icon.svelte-c82lj3 {
		font-weight: bold;
		font-size: 16px;
		flex-shrink: 0;
	}

	.toast-message.svelte-c82lj3 {
		line-height: 1.5;
	}

	.toast-close.svelte-c82lj3 {
		background: none;
		border: none;
		color: inherit;
		cursor: pointer;
		font-size: 20px;
		padding: 0;
		margin-left: 12px;
		opacity: 0.7;
		transition: opacity 0.2s;
		flex-shrink: 0;
	}

	.toast-close.svelte-c82lj3:hover {
		opacity: 1;
	}

	@media (max-width: 1024px) {
		.toast-container.svelte-c82lj3 {
			bottom: 16px;
			right: 16px;
			left: 16px;
			max-width: 100%;
		}

		.toast.svelte-c82lj3 {
			max-width: 100%;
		}
	}

	.form-group.svelte-174580k {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	label.svelte-174580k {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-h);
	}

	input.svelte-174580k {
		padding: 10px 12px;
		border: 2px solid var(--border);
		border-radius: 6px;
		font-size: 14px;
		color: var(--text-h);
		background: var(--bg);
		transition: border-color 0.2s;
	}

	input.svelte-174580k:focus {
		outline: none;
		border-color: var(--accent);
	}

	input.svelte-174580k:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	input.error.svelte-174580k {
		border-color: #dc2626;
	}

	.password-input-group.svelte-174580k {
		position: relative;
		display: flex;
		align-items: center;
	}

	.password-input-group.svelte-174580k input:where(.svelte-174580k) {
		flex: 1;
		padding-right: 40px;
	}

	.password-toggle.svelte-174580k {
		position: absolute;
		right: 10px;
		background: none;
		border: none;
		cursor: pointer;
		font-size: 18px;
		padding: 4px 8px;
		opacity: 0.6;
		transition: opacity 0.2s;
	}

	.password-toggle.svelte-174580k:hover:not(:disabled) {
		opacity: 1;
	}

	.password-toggle.svelte-174580k:disabled {
		cursor: not-allowed;
	}

	.error-text.svelte-174580k {
		font-size: 12px;
		color: #dc2626;
	}

	.auth-form.svelte-k6g2ae {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	h2.svelte-k6g2ae {
		margin: 0 0 16px;
		font-size: 20px;
		color: var(--text-h);
	}

	.submit-button.svelte-k6g2ae {
		padding: 10px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.submit-button.svelte-k6g2ae:hover:not(:disabled) {
		opacity: 0.9;
	}

	.submit-button.svelte-k6g2ae:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	/* Notice how this file ONLY contains layout styles for the form itself. 
       All the input and label styles are safely inside FormInput.svelte */
	.auth-form.svelte-1ru7vbk {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	h2.svelte-1ru7vbk {
		margin: 0 0 16px;
		font-size: 20px;
		color: var(--text-h);
	}

	.submit-button.svelte-1ru7vbk {
		padding: 10px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
		margin-top: 8px;
	}

	.submit-button.svelte-1ru7vbk:hover:not(:disabled) {
		opacity: 0.9;
	}

	.submit-button.svelte-1ru7vbk:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.auth-screen.svelte-1kd6bxh {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 100vh;
		padding: 20px;
	}

	.auth-container.svelte-1kd6bxh {
		width: 100%;
		max-width: 400px;
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 40px;
		box-shadow: var(--shadow);
	}

	.auth-tabs.svelte-1kd6bxh {
		display: flex;
		gap: 0;
		margin-bottom: 24px;
		border-bottom: 1px solid var(--border);
	}

	.tab-button.svelte-1kd6bxh {
		flex: 1;
		padding: 12px;
		background: none;
		border: none;
		font-size: 16px;
		font-weight: 500;
		color: var(--text);
		cursor: pointer;
		border-bottom: 2px solid transparent;
		transition: all 0.2s;
	}

	.tab-button.svelte-1kd6bxh:hover {
		color: var(--accent);
	}

	.tab-button.active.svelte-1kd6bxh {
		color: var(--accent);
		border-bottom-color: var(--accent);
	}

	.auth-content.svelte-1kd6bxh {
		animation: svelte-1kd6bxh-fadeIn 0.3s ease-out;
	}

	@keyframes svelte-1kd6bxh-fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media (max-width: 1024px) {
		.auth-container.svelte-1kd6bxh {
			padding: 24px;
		}
	}

	.card-value.svelte-k8y1e9 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-weight: bold;
		pointer-events: none;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.card-icon.svelte-k8y1e9 {
		width: 50%;
		height: 50%;
		object-fit: contain;
	}

	.text-value.svelte-k8y1e9 {
		font-size: 2em;
	}

	.text-value.small-text.svelte-k8y1e9 {
		font-size: 1em;
	}

	.game-field.svelte-k8y1e9 {
		height: 100vh;
		display: grid;
		justify-content: center;
		align-content: center;
		grid-gap: 0.5em;
		grid-template-columns: var(--playerSpace) var(--fieldSize) var(--playerSpace);
		grid-template-rows: var(--playerSpace) var(--fieldSize) var(--playerSpace);
	}

	.game-field.perspective.svelte-k8y1e9 {
		transform: rotateX(30deg);
	}

	.game-field.svelte-k8y1e9 #piles_area:where(.svelte-k8y1e9) {
		position: relative;
		border-radius: 4em;
		transition: 200ms;
	}

	.game-field.yellow.svelte-k8y1e9 #piles_area:where(.svelte-k8y1e9) {
		background-color: rgba(252, 246, 4, 0.4);
	}
	.game-field.blue.svelte-k8y1e9 #piles_area:where(.svelte-k8y1e9) {
		background-color: rgba(4, 147, 222, 0.4);
	}
	.game-field.red.svelte-k8y1e9 #piles_area:where(.svelte-k8y1e9) {
		background-color: rgba(220, 37, 28, 0.4);
	}
	.game-field.green.svelte-k8y1e9 #piles_area:where(.svelte-k8y1e9) {
		background-color: rgba(1, 141, 65, 0.4);
	}

	#piles_area.svelte-k8y1e9 {
		grid-area: 2 / 2;
	}
	#player.svelte-k8y1e9 {
		grid-area: 3 / 2;
	}
	#player_left.svelte-k8y1e9 {
		grid-area: 2 / 1;
	}
	#player_top.svelte-k8y1e9 {
		grid-area: 1 / 2;
	}
	#player_right.svelte-k8y1e9 {
		grid-area: 2 / 3;
	}

	#draw_pile.svelte-k8y1e9 {
		position: absolute;
		left: 5em;
		top: 5em;
	}
	#draw_pile.svelte-k8y1e9 .card.top-card:where(.svelte-k8y1e9),
	#draw_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9) {
		position: absolute;
	}
	#draw_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9) {
		box-shadow:
			0px 2px white,
			0px 4px var(--shadowColor),
			0px 6px white,
			0px 8px var(--shadowColor),
			0px 10px white,
			0px 12px var(--shadowColor),
			0px 14px white,
			0px 16px var(--shadowColor),
			0px 18px white,
			0px 20px var(--shadowColor);
	}
	#draw_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9):hover {
		transform: none;
	}
	#draw_pile.svelte-k8y1e9 .card.top-card:where(.svelte-k8y1e9) {
		z-index: 100;
		box-shadow: none;
	}
	#draw_pile.svelte-k8y1e9 .card.top-card:where(.svelte-k8y1e9):hover {
		box-shadow: 0px 4px var(--shadowColor);
		cursor: pointer;
		transform: translateY(1em);
	}

	#discard_pile.svelte-k8y1e9 {
		position: absolute;
		left: 12em;
		top: 5.7em;
	}
	#discard_pile.svelte-k8y1e9 .card.top-card:where(.svelte-k8y1e9),
	#discard_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9) {
		position: absolute;
	}
	#discard_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9) {
		box-shadow:
			0px 2px white,
			0px 4px var(--shadowColor),
			0px 6px white,
			0px 8px var(--shadowColor);
	}
	#discard_pile.svelte-k8y1e9 .card.pile:where(.svelte-k8y1e9):hover {
		transform: none;
	}
	#discard_pile.svelte-k8y1e9 .card.top-card:where(.svelte-k8y1e9) {
		z-index: 100;
		box-shadow: none;
	}

	.player_hand.svelte-k8y1e9 {
		position: relative;
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9) {
		position: absolute;
	}

	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(1) {
		left: calc(1 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(2) {
		left: calc(2 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(3) {
		left: calc(3 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(4) {
		left: calc(4 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(5) {
		left: calc(5 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(6) {
		left: calc(6 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(7) {
		left: calc(7 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(8) {
		left: calc(8 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(9) {
		left: calc(9 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(10) {
		left: calc(10 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(11) {
		left: calc(11 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(12) {
		left: calc(12 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(13) {
		left: calc(13 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(14) {
		left: calc(14 * 2.2em);
	}
	.player_hand.svelte-k8y1e9 .card:where(.svelte-k8y1e9):nth-child(15) {
		left: calc(15 * 2.2em);
	}

	#player.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) .card:where(.svelte-k8y1e9) {
		cursor: pointer;
	}
	#player.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) .card:where(.svelte-k8y1e9):hover {
		transform-origin: left bottom;
		transform: rotate(-10deg) translateY(-0.5em);
	}
	#player.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) .card:where(.svelte-k8y1e9):hover ~ .card:where(.svelte-k8y1e9) {
		transform: translateX(2em);
	}

	#player_left.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) {
		transform-origin: left bottom;
		transform: rotate(90deg) translateY(-10em);
	}

	#player_top.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) {
		transform: translateY(1em);
	}

	#player_right.svelte-k8y1e9 .player_hand:where(.svelte-k8y1e9) {
		transform-origin: left bottom;
		transform: rotate(-90deg) translate(-24em, 1em);
	}

	.game-screen.svelte-15gv0nd {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background: var(--bg);
	}

	.game-controls.svelte-15gv0nd {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		border-bottom: 1px solid var(--border);
		background: var(--bg);
		position: relative;
		z-index: 100;
	}

	.back-button.svelte-15gv0nd {
		padding: 8px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.back-button.svelte-15gv0nd:hover {
		opacity: 0.9;
	}

	.color-buttons.svelte-15gv0nd {
		display: flex;
		gap: 8px;
	}

	.color-button.svelte-15gv0nd {
		width: 36px;
		height: 36px;
		border: 2px solid transparent;
		border-radius: 6px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s;
		font-size: 12px;
	}

	.color-red.svelte-15gv0nd {
		background: #dc251c;
		color: white;
	}

	.color-yellow.svelte-15gv0nd {
		background: #fcf604;
		color: black;
	}

	.color-green.svelte-15gv0nd {
		background: #018d41;
		color: white;
	}

	.color-blue.svelte-15gv0nd {
		background: #0493de;
		color: white;
	}

	.color-button.active.svelte-15gv0nd {
		border-color: var(--text-h);
		box-shadow:
			0 0 0 2px var(--bg),
			0 0 0 4px var(--text-h);
	}

	.color-button.svelte-15gv0nd:hover {
		transform: scale(1.1);
	}

	@font-face {
		font-family: "JetBrainsMono";
		src: url("../fonts/JetBrainsMono.woff2") format("woff2");
		font-weight: 400;
		font-style: normal;
		font-display: swap;
	}

	.lobby-controls.svelte-9skmer {
		display: flex;
		gap: 10px;
		margin-bottom: 20px;
	}

	.title-container.svelte-9skmer {
		display: flex;
		align-items: center;
		gap: 15px;
		margin-bottom: 15px;
	}

	.lobby-title.svelte-9skmer {
		margin: 0;
		font-size: 2rem;
	}

	.lobby-title.editable.svelte-9skmer {
		cursor: pointer;
		border-bottom: 2px dashed transparent;
		transition: border-color 0.2s;
	}

	.lobby-title.editable.svelte-9skmer:hover {
		border-color: var(--accent, #555);
	}

	.name-input.svelte-9skmer {
		font-family: inherit;
		font-size: 2rem;
		font-weight: bold;
		background: #222;
		color: white;
		border: 1px solid #555;
		border-radius: 6px;
		padding: 2px 8px;
		outline: none;
	}

	.invite-badge.svelte-9skmer {
		font-family: "JetBrainsMono";
		background: #333;
		color: #aaa;
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 1.2rem;
		font-weight: bold;
	}

	.settings-row.svelte-9skmer {
		margin-bottom: 25px;
		background: #1e1e1e;
		padding: 10px 15px;
		border-radius: 6px;
		display: inline-block;
	}

	.toggle-label.svelte-9skmer {
		display: flex;
		align-items: center;
		gap: 8px;
		color: #ccc;
		cursor: pointer;
		user-select: none;
	}

	.toggle-label.svelte-9skmer input:where(.svelte-9skmer):disabled {
		cursor: not-allowed;
	}

	.toggle-label.svelte-9skmer input:where(.svelte-9skmer):disabled + span:where(.svelte-9skmer) {
		color: #666;
	}

	.join-button.svelte-9skmer {
		padding: 8px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition:
			background 0.2s,
			opacity 0.2s;
	}

	.join-button.svelte-9skmer:disabled {
		background: #444444;
		color: #888888;
		cursor: not-allowed;
		opacity: 0.6;
	}

	.memberlist.svelte-9skmer {
		list-style-type: none;
		padding: 0;
	}

	.member.svelte-9skmer {
		font-family: "JetBrainsMono";
		color: lightgray;
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 8px;
	}

	.member-name.svelte-9skmer {
		min-width: 120px;
	}

	.transfer-button.svelte-9skmer {
		padding: 4px 8px;
		background: #333333;
		color: #cccccc;
		border: 1px solid #555555;
		border-radius: 4px;
		font-size: 11px;
		cursor: pointer;
		font-family: "JetBrainsMono";
		transition:
			background 0.2s,
			color 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.transfer-button.svelte-9skmer:hover {
		background: rgba(250, 250, 210, 0.39);
		color: #111111;
		border-color: rgba(250, 250, 210, 0.322);
	}

	.off.svelte-9skmer {
		color: salmon;
	}

	.on.svelte-9skmer {
		color: lightgreen;
	}

	.lobby-card.svelte-1hpypnh {
		background: var(--bg);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 12px;
		transition: all 0.2s;
	}

	.lobby-card.svelte-1hpypnh:hover:not(.full) {
		border-color: var(--accent);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	.lobby-card.full.svelte-1hpypnh {
		opacity: 0.6;
	}

	.lobby-header.svelte-1hpypnh {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 12px;
	}

	.lobby-name.svelte-1hpypnh {
		margin: 0;
		font-size: 16px;
		color: var(--text-h);
		word-break: break-word;
	}

	.lobby-info.svelte-1hpypnh {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.info-item.svelte-1hpypnh {
		margin: 0;
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.info-label.svelte-1hpypnh {
		color: var(--text);
		font-weight: 500;
	}

	.info-value.svelte-1hpypnh {
		color: var(--text-h);
	}

	.join-button.svelte-1hpypnh {
		padding: 8px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.join-button.svelte-1hpypnh:hover:not(:disabled) {
		opacity: 0.9;
	}

	.join-button.svelte-1hpypnh:disabled {
		opacity: 0.5;
		cursor: not-allowed;
	}

    .spinner-container.svelte-jlgymf {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .spinner.svelte-jlgymf {
        border: 3px solid var(--accent-bg);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: svelte-jlgymf-spin 1s linear infinite;
    }

    @keyframes svelte-jlgymf-spin {
        to {
            transform: rotate(360deg);
        }
    }

    .spinner-small.svelte-jlgymf {
        --size: 24px;
    }

    .spinner-medium.svelte-jlgymf {
        --size: 40px;
    }

    .spinner-large.svelte-jlgymf {
        --size: 60px;
    }

    .spinner.svelte-jlgymf {
        width: var(--size);
        height: var(--size);
    }

    .spinner-text.svelte-jlgymf {
        color: var(--text);
        font-size: 14px;
        margin: 0;
    }

	.lobbies-list.svelte-1oiddhf {
		width: 100%;
	}

	.loading-container.svelte-1oiddhf {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 200px;
	}

	.empty-state.svelte-1oiddhf {
		text-align: center;
		padding: 40px 20px;
	}

	.empty-state.svelte-1oiddhf p:where(.svelte-1oiddhf) {
		margin: 8px 0;
		color: var(--text);
		font-size: 16px;
	}

	.empty-hint.svelte-1oiddhf {
		color: var(--text);
		font-size: 14px;
		margin-top: 12px;
	}

	.lobbies-grid.svelte-1oiddhf {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 16px;
	}

	@media (max-width: 1024px) {
		.lobbies-grid.svelte-1oiddhf {
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
	}

	@media (max-width: 640px) {
		.lobbies-grid.svelte-1oiddhf {
			grid-template-columns: 1fr;
		}
	}

	.create-lobby-form.svelte-3l6541 {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	h3.svelte-3l6541 {
		margin: 0;
		font-size: 16px;
		color: var(--text-h);
	}

	.form-group.svelte-3l6541 {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	label.svelte-3l6541 {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-h);
	}

	input.svelte-3l6541 {
		padding: 10px 12px;
		border: 2px solid var(--border);
		border-radius: 6px;
		font-size: 14px;
		color: var(--text-h);
		background: var(--bg);
		transition: border-color 0.2s;
	}

	input.svelte-3l6541:focus {
		outline: none;
		border-color: var(--accent);
	}

	input.svelte-3l6541:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	input.error.svelte-3l6541 {
		border-color: #dc2626;
	}

	.error-text.svelte-3l6541 {
		font-size: 12px;
		color: #dc2626;
	}

	.submit-button.svelte-3l6541 {
		padding: 10px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.submit-button.svelte-3l6541:hover:not(:disabled) {
		opacity: 0.9;
	}

	.submit-button.svelte-3l6541:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	.join-lobby-form.svelte-1f3asb9 {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	h3.svelte-1f3asb9 {
		margin: 0;
		font-size: 16px;
		color: var(--text-h);
	}

	.form-group.svelte-1f3asb9 {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	label.svelte-1f3asb9 {
		font-size: 14px;
		font-weight: 500;
		color: var(--text-h);
	}

	input.svelte-1f3asb9 {
		padding: 10px 12px;
		border: 2px solid var(--border);
		border-radius: 6px;
		font-size: 14px;
		color: var(--text-h);
		background: var(--bg);
		transition: border-color 0.2s;
	}

	input.svelte-1f3asb9:focus {
		outline: none;
		border-color: var(--accent);
	}

	input.svelte-1f3asb9:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

	input.error.svelte-1f3asb9 {
		border-color: #dc2626;
	}

	.error-text.svelte-1f3asb9 {
		font-size: 12px;
		color: #dc2626;
	}

	.submit-button.svelte-1f3asb9 {
		padding: 10px 16px;
		background: var(--accent);
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 500;
		cursor: pointer;
		transition: opacity 0.2s;
	}

	.submit-button.svelte-1f3asb9:hover:not(:disabled) {
		opacity: 0.9;
	}

	.submit-button.svelte-1f3asb9:disabled {
		opacity: 0.6;
		cursor: not-allowed;
	}

    .settings-container.svelte-1xo622n {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }

    .settings-card.svelte-1xo622n {
        background: var(--accent-bg, #f9f9f9);
        border: 1px solid var(--accent-border, #e2e8f0);
        padding: 32px;
        border-radius: 12px;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    }

    .settings-card.svelte-1xo622n h2:where(.svelte-1xo622n), h3.svelte-1xo622n {
        margin-top: 0;
        margin-bottom: 24px;
        color: var(--text-h);
    }

    .profile-avatar-section.svelte-1xo622n {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
    }

    .avatar-wrapper.svelte-1xo622n {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 2px solid var(--accent, #a855f7);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
    }

    .avatar-preview.svelte-1xo622n {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .avatar-fallback.svelte-1xo622n {
        font-size: 40px;
        line-height: 1;
        user-select: none;
    }

    .upload-btn.svelte-1xo622n {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        padding: 6px 12px;
        background: var(--accent, #a855f7);
        color: white;
        font-size: 12px;
        border-radius: 4px;
        cursor: pointer;
    }

    .profile-info-grid.svelte-1xo622n {
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin-bottom: 24px;
    }

    .info-group.svelte-1xo622n {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .info-group.svelte-1xo622n label:where(.svelte-1xo622n) {
        font-size: 14px;
        font-weight: 500;
        color: white;
    }

    .info-group.svelte-1xo622n input:where(.svelte-1xo622n) {
        padding: 10px;
        border: 1px solid var(--border, #cbd5e1);
        border-radius: 6px;
        background: white;
        color: black;
    }

    .info-group.svelte-1xo622n input:where(.svelte-1xo622n):disabled {
        background: rgba(0,0,0,0.05);
        cursor: not-allowed;
        color: white;
    }

    .stats-section.svelte-1xo622n {
        border-top: 1px solid var(--border);
        padding-top: 16px;
    }

    .stat-box.svelte-1xo622n {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: rgba(0,0,0,0.05);
        border-radius: 6px;
    }

    .stat-label.svelte-1xo622n {
        font-size: 14px;
        color: var(--text-muted, white);
        font-weight: 500;
    }

    .stat-value.svelte-1xo622n {
        font-weight: bold;
        color: var(--accent, #a855f7);
    }

    .lobbies-screen.svelte-161gq8j {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        background: var(--bg);
    }
    .lobbies-header.svelte-161gq8j {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 24px;
        border-bottom: 1px solid var(--border);
    }
    .header-actions.svelte-161gq8j {
        display: flex;
        gap: 12px;
        align-items: center;
    }
    .header-content.svelte-161gq8j h1:where(.svelte-161gq8j) {
        margin: 0 0 8px;
        font-size: 32px;
        color: var(--text-h);
    }
    .user-info.svelte-161gq8j {
        margin: 0;
        font-size: 14px;
        color: var(--text);
    }
    .logout-button.svelte-161gq8j, .settings-button.svelte-161gq8j {
        padding: 8px 16px;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .logout-button.svelte-161gq8j:hover, .settings-button.svelte-161gq8j:hover {
        opacity: 0.9;
    }
    .lobbies-content.svelte-161gq8j {
        flex: 1;
        padding: 24px;
        max-width: 1200px;
        margin: 0 auto;
        width: 100%;
    }
    .controls.svelte-161gq8j {
        display: flex;
        gap: 12px;
        margin-bottom: 24px;
    }
    .refresh-button.svelte-161gq8j {
        padding: 10px 16px;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: opacity 0.2s;
    }
    .refresh-button.svelte-161gq8j:hover:not(:disabled) {
        opacity: 0.9;
    }
    .refresh-button.svelte-161gq8j:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
    .create-form-container.svelte-161gq8j {
        background: var(--accent-bg);
        border: 1px solid var(--accent-border);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 24px;
    }
    .lobbies-container.svelte-161gq8j {
        display: flex;
        flex-direction: column;
    }
    @media (max-width: 1024px) {
        .lobbies-header.svelte-161gq8j {
            flex-direction: column;
            gap: 16px;
            align-items: flex-start;
        }
        .header-actions.svelte-161gq8j {
            width: 100%;
            justify-content: space-between;
        }
        .lobbies-content.svelte-161gq8j {
            padding: 16px;
        }
    }

	body {
		margin: 0;
		padding: 0;
	}

	#app.svelte-1n46o8q {
		width: 100%;
		color-scheme: light dark;
		color: var(--text);
		background: var(--bg);
	}