/* COLOR PALETTE & FONTS */
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Yusei+Magic&display=swap');

:root {
  --player2_color: #FF4242;
  --player1_color: #66CED6;
  --center_column: #ded666;
  --header_footer: #adadad;
  --button_back: #B8D0EB;
  --button_hover: #5D707F;
  --background_color: #e7e7e7;
  --header_btn_back: #e7e7e7;
  --header_btn_hover: #B8D0EB;
  --extra1_color: orange;
  --extra2_color: lime;
  --extra3_color: purple;
  --extra4_color: yellow;
  --extra5_color: pink;
  --extra6_color: brown;
  --extra7_color: gray;
  --extra8_color: teal;

  --names_font: "Yusei Magic", sans-serif;
  --header_font: "Montserrat", sans-serif;
  --p_font: "Open Sans", sans-serif;
}


/* Simple wireframe styles */
:root {
  --gap: 16px;
  /* Let container width grow with viewport but cap for readability */
  /*.j Line 37-38 (below) is unused */
  --max-width: clamp(960px, 96vw, 1400px);
  --accent: #2b6cb0;
  --muted: #f3f4f6;
  --text: #111827;
}

/* Removes the scroll bar and prevents overscroll */
body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}
body {
  -ms-overflow-style: none; /* Internet Explorer, Edge */
}
html {
  scrollbar-width: none; /* Firefox */
  overscroll-behavior: none; /* Prevents overscroll/bounce on all directions */

  height: 100%;}
body {
  overscroll-behavior: none; /* Prevents overscroll/bounce on body */
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

* {
  box-sizing: border-box
}

body {
  font-family: var(--p_font);
  margin: 0;
  color: var(--text);
  background: var(--background_color);
  line-height: 1.4;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -ms-overflow-style: none; /* Internet Explorer, Edge */
  overscroll-behavior: none; /* Prevents overscroll/bounce on body */
  overflow-x: hidden; /* Prevents horizontal scrolling */
}

.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 16px;
  overflow-x: hidden; /* Prevents container from overflowing horizontally */
}

/* Home, Shop, Groups */
.header-btn {
  background-color: var(--header_btn_back);
  color: var(--button_hover);
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-left: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

#logout-btn {
  background-color: var(--header_btn_back);
  color: red;
  border: none;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  margin-left: 12px;
  padding: 8px 10px;
  border-radius: 6px;
}

.header-btn:hover,
#logout-btn:hover {
  background-color: var(--header_btn_hover);
}

.site-header {
  background: var(--muted);
  border-bottom: 1px solid var(--background_color);
  background-color: var(--header_footer);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  grid-row: 3/4;
}

/* Group indicator styling */
.group-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 6px 12px;
  border-radius: 8px;
  border: 2px solid var(--accent);
  font-size: 0.85rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.group-indicator .group-label {
  font-weight: 600;
  color: var(--accent);
}

.group-indicator .group-name {
  font-weight: 700;
  color: var(--text);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-indicator .group-id {
  font-size: 0.75rem;
  color: #666;
  font-weight: 500;
}

.logo /*img*/ {
  max-width: 17%;
  margin-top: 5px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

/*chore wars: life is a game*/
.container-logo img {
  position: absolute;
  left: 50%;
  width: 25vw;
  transform: translate(-50%, -50%);
  margin-top: 0.5vw;
  pointer-events: none;
  overflow: hidden;
}

/*.j this is unused*/
.logo-text {
  max-width: 20%;
}


.user-welcome {
  color: var(--text);
  font-weight: 500;
  margin-right: 16px;
  font-size: 0.9rem;
}

.main-nav {
  position: relative;
  flex-shrink: 0;
}

.main-nav a {
  margin-left: 12px;
  text-decoration: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 6px;
}

/*huge wrapper for everything that's not header/footer. doesn't seem to do anything?*/
.site-main {
  padding: 24px 0;
  flex: 1 0 auto;
}

/* Root wrapper for shop pages so footer sticks to bottom */
#shop-app-root {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}


/*main grid for the full screen version*/
.grid-3 {
    display: grid;
    /* Scale the gap with viewport width within sensible bounds */
    gap: clamp(12px, 4vw, 48px);
    /* Flexible sides with a clamped center column for consistent proportions */
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    margin: 0 auto;
}

/*column? this doesn't seem to do anything*/
.column {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* Player headers & point banks */
#column-left h3, #left-header, #left-points-box {
  text-align: center;
  background-color: var(--player1_color);
  font-size: 4vw;
  font-family: var(--names_font);
}

/* Corrected player 2 color */
#column-right h3, #right-header, #right-points-box {
  text-align: center;
  background-color: var(--player2_color);
  font-size: 4vw;
  font-family: var(--names_font);
}


.site-footer {
  border-top: 1px solid #e5e7eb;
  background: var(--header_footer);
  padding: 12px 0;
  text-align: center;
  color: #6b7280;
  font-size: 0.9rem;
  flex-shrink: 0;
}


/*.j I do not see .req used anywhere*/
.req {
  color: #dc2626;
  margin-left: 6px;
  font-weight: 600;
}

/*all buttons in the main element, except COMPLETE, PURCHASE, and DELETE*/
.btn {
  background-color: var(--button_back);
  color: var(--button_hover);
  padding: clamp(4px, 1vw, 10px) clamp(6px, 1.5vw, 14px);
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: clamp(0.75rem, 1.5vw, 1rem);
}

/* Danger button for destructive actions */
.btn-danger {
  background-color: #dc2626; /* red */
  color: #ffffff;
}

.btn-danger:hover {
  background-color: #b91c1c;
}

.btn:hover {
  background-color: var(--button_hover);
  color: var(--button_back);
}

/*purchase also applies to complete*/
.btn-purchase {
  background: #16a34a;
  color: #fff;
  text-transform: uppercase;
}

.btn-delete {
  background: #ef4444;
  color: #fff;
  text-transform: uppercase;
}

/*.j I think it looks better without this, keep or no?*/
/* Center the delete button on chore cards in the unassigned (middle) column */
#chores-column .card .btn-delete {
  display: block;
  margin: 8px auto 0;
}

/*when user clicks the button*/
.btn:focus {
  outline: 3px solid rgba(59, 130, 246, 0.15);
  outline-offset: 2px;
}


/* Minimal modal styles for shop payer selection */
.tcg-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.tcg-modal {
  background: #fff;
  padding: 18px;
  border-radius: 8px;
  width: min(420px, 92%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.tcg-modal p {
  margin: 0 0 12px 0;
}

.tcg-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tcg-modal-actions button {
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font: inherit;
}

.tcg-modal-actions .left {
  background: var(--player1_color);
  color: #000000;
  text-transform: uppercase;
  font-family: var(--names_font);
}

.tcg-modal-actions .right {
  background: var(--player2_color);
  color: #000000;
  text-transform: uppercase;
  font-family: var(--names_font);
}

/* new explicit classes for confirm/cancel */
.tcg-modal-actions .btn-cancel {
  background: #2b6cb0;
  color: #fff;
}

.tcg-modal-actions .btn-confirm {
  background: #16a34a;
  color: #fff;
}

/* dedicated OK button for info modals */
.tcg-modal-actions .btn-ok {
  background: #16a34a;
  color: #fff;
}



/* medium screens: */
@media (max-width: 900px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
}

/*small screens: */
@media (max-width: 750px) {
  .site-header .container {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 50px;
  }
  
  .logo {
    max-width: 60px;
    min-width: 50px;
    width: 60px;
  }
  
  .main-nav {
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .header-btn {
    padding: 6px 12px;
    text-align: center;
    font-size: 0.9rem;
  }
  .user-welcome {
    font-size: 0.8rem;
    margin-right: 8px;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
  }
  
  #logout-btn {
    padding: 6px 12px;
    font-size: 0.9rem;
    margin-left: 4px;
  }
  .container-logo img {
    width: 300px;
    left:unset;
    right:50px;
    transform: translate(0, -135%);
  }

  .grid-3 {
    grid-template-columns: 1fr;
  }

  .main-nav a {
    margin-left: 0;
    margin-right: 4px;
  }
}