/* style.css – includes Practice‑Mode styles */

body{
  font-family:Arial,Helvetica,sans-serif;
  display:flex;flex-direction:column;align-items:center;
  padding-top:30px;background:#f0f0f0;
}

h1{color:#333;margin-bottom:20px;}

#grid-container{
  display:flex;flex-direction:column;gap:5px;width:fit-content;
  background:#fff;padding:10px;border-radius:5px;
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}

.grid-row{display:flex;gap:5px;}

.grid-cell{
  width:50px;height:50px;border:1px solid #ccc;background:#e9e9e9;
  border-radius:3px;display:flex;justify-content:center;align-items:center;
  font:24px/1.2em bold Arial,Helvetica,sans-serif;color:#333;
  text-transform:uppercase;position:relative;overflow:hidden;
  transition:background-color .5s,border-color .5s;
}

.letter{
  display:flex;justify-content:center;align-items:center;
  width:100%;height:100%;cursor:grab;user-select:none;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  will-change: transform, opacity;
}

.letter:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.letter.dragging{opacity:0;cursor:grabbing;}
.grid-cell.drag-over{
  background:#d0e0f0;
  border-style:dashed;
  animation: pulse-border 1s ease-in-out infinite alternate;
}

@keyframes pulse-border {
  from { border-color: #a0c0e0; }
  to { border-color: #4080c0; }
}

.grid-row.row-draggable{
  cursor:grab;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.grid-row.row-draggable:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.grid-row.row-dragging{
  opacity:.8;
  box-shadow:0 8px 16px rgba(0,0,0,.4);
  cursor:grabbing;
  z-index:20;
  position:relative;
  transform: scale(1.02);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, opacity 0.2s ease-out;
}

.grid-row.row-drag-over-indicator{
  border-top:3px dashed #4080c0;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from { box-shadow: 0 0 5px rgba(64,128,192,0.3); }
  to { box-shadow: 0 0 10px rgba(64,128,192,0.6); }
}

.row-gap-placeholder{
  border:3px dashed #66bb6a;
  border-radius:4px;
  margin:2px 0;
  animation: pulse-placeholder 1s ease-in-out infinite alternate;
}

@keyframes pulse-placeholder {
  from { background-color: rgba(102,187,106,0.05); }
  to { background-color: rgba(102,187,106,0.15); }
}

.grid-cell.solved-row{background:#c8e6c9;border-color:#66bb6a;}
.grid-cell.solved-row .letter{cursor:default;}

@keyframes letter-pop{
  0%{transform:scale(1); background:transparent; box-shadow: none;}
  50%{transform:scale(1.2); background:#ffff99; box-shadow: 0 0 15px rgba(255,255,153,0.8);}
  100%{transform:scale(1); background:transparent; box-shadow: none;}
}
.letter-flash{animation:letter-pop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;}

@keyframes drop-in {
  0% { transform: translateY(-20px); opacity: 0; }
  60% { transform: translateY(5px); }
  100% { transform: translateY(0); opacity: 1; }
}

.drop-animation {
  animation: drop-in 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}50%{transform:translateX(3px) rotate(1deg)}75%{transform:translateX(-2px) rotate(-.5deg)}}
.grid-cell.shuffling{animation:shake .4s ease-in-out 1;}

.first-letter-cue{background:#ffe680;border-color:#d1b200;animation:pulse .6s ease-in-out infinite alternate;}
@keyframes pulse{from{box-shadow:0 0 0 rgba(0,0,0,0)}to{box-shadow:0 0 8px rgba(209,178,0,.8)}}

#message-area{
  margin-top:25px;min-height:30px;width:300px;max-width:90%;
  padding:10px;text-align:center;font-size:16px;color:#555;
}

#reset-button,#shuffle-button,#practice-button{
  margin-top:10px;margin-bottom:20px;padding:8px 15px;
  font-size:14px;cursor:pointer;border:1px solid #ccc;
  background:#f8f8f8;border-radius:4px;
}
#shuffle-button{margin-left:10px;}
#practice-button{margin-left:10px;}
#reset-button:hover,#shuffle-button:hover,#practice-button:hover{background:#eee;}
#reset-button:active,#shuffle-button:active,#practice-button:active{background:#ddd;}

#practice-banner{
  margin-top:10px;padding:6px 12px;border-radius:4px;
  background:#fff8c4;color:#665200;font-size:14px;
}
#practice-banner a{color:#665200;text-decoration:underline;}

#countdown-timer{margin-top:20px;font-size:14px;color:#666;text-align:center;}

#hint-display{margin-top:0;margin-bottom:15px;font-size:1.1em;font-style:italic;color:#555;text-align:center;}

.modal-overlay{
  display:none;position:fixed;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,.6);z-index:100;justify-content:center;align-items:center;
}
.modal-overlay.show{display:flex;}
.modal-content{
  background:#fff;padding:30px 40px;border-radius:8px;text-align:center;
  box-shadow:0 5px 15px rgba(0,0,0,.2);
}
.modal-content h2{margin-top:0;color:#333;}
.modal-content p{color:#555;margin-bottom:20px;}
#close-modal-button{
  padding:8px 15px;font-size:14px;cursor:pointer;border:1px solid #ccc;
  background:#f8f8f8;border-radius:4px;
}
#close-modal-button:hover{background:#eee;}

#help-button{
  position:fixed;bottom:20px;right:20px;width:38px;height:38px;border:none;
  border-radius:50%;font-size:20px;cursor:pointer;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
#help-button:hover{background:#f0f0f0;}

@media(max-width:600px){
  body { padding-top: 25px; }                   /* 20px → 25px */
  h1 { font-size: 2.25em; margin-bottom: 19px; }  /* 1.8em → 2.25em; 15px → 19px */
  #grid-container { gap: 5px; padding: 10px; }     /* 4px → 5px; 8px → 10px */
  .grid-row { gap: 5px; }                         /* 4px → 5px */
  .grid-cell { 
    width: 63px;    /* 50px * 1.25 = 62.5, rounded to 63px */
    height: 63px;   /* same as width */
    font-size: 31px;/* 25px * 1.25 = 31.25, rounded to 31px */
  }
  .letter { font-size: 31px; }                    /* 25px → 31px */
  #message-area { 
    margin-top: 25px;      /* 20px → 25px */
    width: 90%; 
    max-width: 300px; 
    font-size: 19px;       /* 15px * 1.25 = 18.75, rounded to 19px */
  }
  #countdown-timer { 
    margin-top: 19px;      /* 15px * 1.25 = 18.75, rounded to 19px */
    font-size: 16px;       /* 13px * 1.25 = 16.25, rounded to 16px */
  }
}

@media(max-width:400px){
  body { padding-top: 19px; }                    /* 15px * 1.25 = 18.75, rounded to 19px */
  h1 { font-size: 1.88em; }                       /* 1.5em * 1.25 = 1.875em, rounded to 1.88em */
  #grid-container { gap: 4px; padding: 8px; }      /* 3px → 3.75 (≈4px); 6px → 7.5 (≈8px) */
  .grid-row { gap: 4px; }                         /* 3px → 3.75 (≈4px) */
  .grid-cell { 
    width: 55px;    /* 44px * 1.25 = 55px */
    height: 55px;   /* same as width */
    font-size: 25px;/* 20px * 1.25 = 25px */
  }
  .letter { font-size: 25px; }                    /* 20px → 25px */
  #message-area { font-size: 18px; }               /* 14px * 1.25 = 17.5, rounded to 18px */
  #countdown-timer { 
    margin-top: 19px;      /* 15px * 1.25 = 18.75, rounded to 19px */
    font-size: 15px;       /* 12px * 1.25 = 15px */
  }
}

.selected {
  outline: 2px solid blue;
  /* Optionally add other styling, such as a background-color change */
}

@keyframes sweep{0%{background:#c8e6c9}50%{background:#66bb6a}100%{background:#c8e6c9}}
.goal-flash{animation:sweep .35s ease-out forwards;}