:root {
  --cell-size: 50px;
  --cols:      1;    /* set dynamically in JS */
  --yellow:    #ffe980;
  --blue:      #a8d5ff;
  --green:     #ccffaa;
  --orange:    #ffb352;
  --red:       #ff4124;
  --grey:      #d6d6d6;


  --blue1:      #e3f1ff;
  --blue2:      #a8d4ff;
  --blue3:      #85c4ff;
  --blue4:      #6bb7ff;
  --blue5:      #47a6ff;
  --blue6:      #369eff;
  --blue7:      #148eff;
  --blue8:      #0072db;
  --blue9:      #0066c4;
  --blue10:     #0055a3;

  --green1:     #CEFF99;
}

/* 
Yellow = 249, 219, 74   241, 191, 66
Oragne = 238, 159, 56
Blue = 177, 215, 251
*/

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: sans-serif;
  text-align: center;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevent scrollbars */
}


/* Full-screen grid */
#grid {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell-size));
  grid-auto-rows: var(--cell-size);
  pointer-events: auto;
}

/* Black border around main letter grid */
#main-border {
  position: absolute;
  border: 4px solid black;
  pointer-events: none;
  z-index: 1;
  box-sizing: border-box;
}

/* Cell wrapper */
.cell {
  position: relative;
  width: var(--cell-size);
  height: var(--cell-size);
  overflow: hidden;
}

/* 1) Animated background letter */
.cell-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  font-family: monospace;
  font-size: 1.5rem;
  text-align: center;
  line-height: var(--cell-size);
  color: #000;
  opacity: 0.1;
  transition: opacity 3s ease;
  z-index: 1;
}

/* 2) Fragment-color overlay + grey border for game & header cells */
.cell-frag {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transition: background-color 0.3s ease;
  z-index: 2;
  pointer-events: none;     /* keep non-share cells inert */
  border: none;
  background: transparent;
  box-sizing: border-box;
}
.cell-frag.color-0 { background: white; }
.cell-frag.color-1 { background: var(--green1); }
.cell-frag.color-2 { background: var(--blue1); }
.cell-frag.color-3 { background: var(--blue2); }
.cell-frag.color-4 { background: var(--blue3); }
.cell-frag.color-5 { background: var(--blue4); }
.cell-frag.color-6 { background: var(--blue5); }
.cell-frag.color-7 { background: var(--blue6); }
.cell-frag.color-8 { background: var(--blue7); }
.cell-frag.color-9 { background: var(--blue8); }
.cell-frag.color-10 { background: var(--blue9); }
.cell-frag.color-11 { background: var(--blue10); }
.cell-frag.color-12 { background: var(--red); }

/* once the grid has .playing, show borders on all non-share/non-message cells */
#grid.playing .cell-frag:not(.share):not(.message) {
  border: 1px solid grey;
}

/* share-cell background (always white & opaque) */
.cell-frag.share {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 1;
  border: none;
  pointer-events: none;     /* wrapper still non-clickable */
  z-index: 2;
}

/* MESSAGE ROW – overrides for message-only cells */
.cell-frag.message {
  border: none;
  background: transparent;
  opacity: 0;
}
.cell-frag.message.visible {
  background: white;
  opacity: 1;
}

/* 3) Main letter layer – normal weight */
.cell-letter {
  position: relative;
  z-index: 3;
  font-size: 1.5rem;
  font-weight: normal;
  text-align: center;
  line-height: var(--cell-size);
  user-select: none;
}

/* Header banner letters (FRAGMENTA) */
.cell-letter.header {
  font-weight: bold;
  background: white;
  width: 100%; height: 100%;
  text-align: center;
  line-height: var(--cell-size);
  z-index: 3;
}

.cell-letter.message {
  color: #aaa;
  font-weight: normal;
  z-index: 4;
}

/* Controls (guess + share) */
#controls {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(var(--cell-size) * 7);
}

#controls input {
  font-size: 1rem;
  padding: 0.5rem 1rem;
  margin: 0.2rem 0 0.5rem;
}

#controls button#submit {
  display: none;
}

.share-buttons {
  display: flex;
  gap: 10px;
}

.share-btn {
  background: #f0f0f0;
  border: none;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  color: #333;
  font-size: 1.2rem;
}

.share-btn:hover {
  background: #ddd;
}

/* Grid guess input width */
#guess {
  width: calc(var(--cell-size) * 5) !important;
}

/* share icon styling — only these letters accept clicks */
.cell-letter.share {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;     /* enable clicks on icon */
  cursor: pointer;
  z-index: 3;               /* above frag overlay */
  color: lightgrey;
  font-size: 1.2rem;
  user-select: none;
  text-decoration: none;
}

.cell-letter.share:hover {
  color: black;
}

/* If you use a .share-row container elsewhere */
.share-row a,
.share-row button.copy-btn {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.share-row i {
  pointer-events: none;
}

/* 1) Turn header letters red */
.cell-letter.header.highlighted {
  color: var(--blue5);
}

/* 2) Bold + red styling */
.cell-letter.bold-red {
  color: var(--blue5);
  font-weight: bold;
}

/* intro-screen letters */
.cell-letter.intro {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  color: grey;
  font-weight: normal;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* make the <a> fill the cell and adopt color */
.cell-letter.intro a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.cell-letter.intro a:hover {
  color: black;
}

#controls {
  display: none;
}

/* ——————— PROMINENT NAV ARROWS ——————— */

a.cell-letter.header.arrow {
  background: var(--blue3);
  color: white;
  font-size: 2.5rem;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s;
  z-index: 4;
}

a.cell-letter.header.arrow:hover {
  background: var(--blue7);
}

/* ——————— Glowing share button when done ——————— */

@keyframes shareGlow {
  0%, 100% {
    filter: drop-shadow(0 0 4px gold)
            drop-shadow(0 0 8px orange)
            drop-shadow(0 0 12px red);
  }
  50% {
    filter: drop-shadow(0 0 8px gold)
            drop-shadow(0 0 16px orange)
            drop-shadow(0 0 24px red);
  }
}

.share-red {
  color: #000;
  animation: textPulse 2s ease-in-out infinite;
}

.share-red:hover {
  animation: none !important;
  color: var(--blue5) !important;
  font-size: 1.5em;
  font-weight: bold;
}

@keyframes textPulse {
  
  0%, 100% {
    color: #888;
  }
  50% {
    color: #000;
  }

}


/* ——————— GIF generation ——————— */

#frameCanvas {
  border: 1px solid #ccc;
  display: block;
  margin: 0 auto;
}

#result img {
  display: block;
  margin: 20px auto;
}

#generateBtn {
  position: relative;
  z-index: 1000;
}

#frameCanvas,
#generateBtn {
  display: block;
  margin: 0;
}

#generateBtn {
  margin-top: 10px;
}

#copy-btn {
  display: none;
}

/* ——————— Mobile compatible ——————— */

/* Container centered with padding */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Desktop layout */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Tablet and below */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile phones */
@media (max-width: 767px) {
  .grid {
    grid-template-columns: 1fr;
  }
  h1 { font-size: 1.75rem; }
}