*{box-sizing:border-box}
:root{
  --bg:#c45d5d;
  --panel:#005bc3;
  --accent1:#18a0a1; /* mystery machine teal */
  --accent2:#8fd14f; /* lime */
  --text:#f7f7f7;
  --muted:#bfc6c9;
}
body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(180deg,#071022 0%, #0b1320 60%);
  font-family: 'Poppins', sans-serif;
  color:var(--text);
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:28px;
  border: 2px solid #000;
}

#app{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:20px;
  transition:all 0.3s ease;
  background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.15));
  border-radius:16px;
  box-shadow: 0 12px 40px rgba(2,6,23,0.7);
  overflow:hidden;
}
main{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:24px;
  align-items:center;
}
.left-panel{
  width:100%;
  max-width:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.right-panel{
  width:100%;
  max-width:500px;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:20px;
  min-width: 150px;
}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
}
h1{font-family:'Luckiest Guy', cursive; margin:0; font-size:28px; color:var(--accent2)}
.controls button{
  background:var(--accent1);
  border:2px solid rgba(255,255,255,0.1);
  color:var(--text);
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
  font-size:0.9rem;
  min-height:36px;
  min-width:80px;
  transition:all 0.2s ease;
}
.controls button:hover{
  background:#1db0b0;
  transform:translateY(-1px);
}
.controls{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin:10px 0;
  align-items: center;
}
/* === Updated Canvas Styling === */
canvas#tetris {
    background: linear-gradient(180deg, #061423, #081826);
    border-radius: 8px;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
    border: 4px solid var(--accent1);
    width:100%;
    max-width:420px;
    height:auto;
    aspect-ratio:420/550;
    position: relative;
    transition: all 0.3s ease;
    /* Add fancy reflection effect */
    background: linear-gradient(
        180deg,
        rgba(6, 20, 35, 0.95),
        rgba(8, 24, 38, 0.98)
    );
    backdrop-filter: blur(5px);
    box-shadow: 
        inset 0 0 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(24, 160, 161, 0.2),
        0 0 40px rgba(24, 160, 161, 0.1);
}

canvas#next {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    background: linear-gradient(180deg, #061423, #081826);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.6);
    border: 2px solid var(--accent1);
}

/* Volume slider styles */
#volume-slider {
    width: 100px;
    height: 6px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
    
    vertical-align: middle;
    cursor: pointer;
}

#volume-slider:hover {
    opacity: 1;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent2);
    cursor: pointer;
}

/* Adjust controls container for better alignment */
.controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

/* Ensure consistent button heights */
.controls button {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

/* Volume control container */
.volume-control {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hidden {
    display: none !important;
}






.score-container {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.next-box {
    max-width: 100px;
}

.score-box .label,
.next-box .label {
  font-family: 'Luckiest Guy', cursive;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--accent2); /* matches your title accent */
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}


.score-box .value {
  font-family: 'Luckiest Guy', cursive;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.label{font-size:13px; color:var(--muted); margin-bottom:6px}
.value{font-size:22px; font-weight:700}
.mascot-wrap{display:none;}
.mascot-wrap img{width:200px; border-radius:12px; transform-origin:center; transition:transform .25s ease;}
.mascot-wrap img.bounce{transform:translateY(-8px) scale(1.03)}

.credits{font-size:20px; color:#18a0a1;

font-family: 'Luckiest Guy', cursive;
}

#overlay{position:absolute; inset:0; display:flex; justify-content:center; align-items:center; background:rgba(2,6,23,0.6); backdrop-filter: blur(4px); z-index: 10;}
#overlay.hidden{display:none}
.overlay-inner{background:linear-gradient(180deg, #0b1a1a, #08202b); padding:28px; border-radius:14px; text-align:center; box-shadow:0 10px 50px rgba(0,0,0,0.6); border:2px solid rgba(255,255,255,0.03)}
.overlay-inner h2{margin:0 0 8px 0; font-family:'Luckiest Guy'; color:var(--accent1); font-size:28px}
.overlay-inner p{margin:0 0 14px 0; color:var(--muted)}
.overlay-inner button{padding:8px 14px; border-radius:10px; background:var(--accent1); border:none; color:#012; font-weight:700; cursor:pointer}

.mascot-space img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.gif {
    display: none;
}

.gif.active {
    display: block;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-10px);
  }
}

#main-menu .title-container {
  animation: bounce 2s infinite;
}

.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.scooby-tag {
    width: 40px;
    height: 40px;
    margin-left: 10px;
}
#mode-chooser.hidden { display: none; }
#mode-chooser {
  margin-top: 0.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}
#volume-slider {
    -webkit-appearance: none;
    width: 100px;
    height: 5px;
    background: #ddd;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    border-radius: 5px;
    vertical-align: middle;
    
}

#volume-slider:hover {
    opacity: 1;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: var(--accent1);
    cursor: pointer;
    border-radius: 50%;
}

#volume-slider::-moz-range-thumb {
    width: 15px;
    height: 15px;
    background: var(--accent1);
    cursor: pointer;
    border-radius: 50%;
}

@keyframes rotate-feedback-anim {
  from {
    transform: scale(1.02);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6), 0 0 10px rgba(255, 255, 255, 0.3);
  }
  to {
    transform: scale(1);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.6);
  }
}

.rotate-feedback {
  animation: rotate-feedback-anim 0.15s ease-out;
}

@keyframes drop-feedback-anim {
  from {
    transform: translateY(3px);
  }
  to {
    transform: translateY(0);
  }
}

.drop-feedback {
  animation: drop-feedback-anim 0.1s ease-out;
}

/* Add these new animation classes */
@keyframes piece-drop {
    0% { transform: translateY(-2px); }
    50% { transform: translateY(2px); }
    100% { transform: translateY(0); }
}

@keyframes piece-lock {
    0% { filter: brightness(1.5); }
    50% { filter: brightness(2); }
    100% { filter: brightness(1); }
}

@keyframes grid-flash {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

.tetris-active {
    animation: piece-drop 0.15s ease-out;
}

.tetris-lock {
    animation: piece-lock 0.2s ease-out;
}

.tetris-flash {
    animation: grid-flash 0.3s ease-out;
}

/* Add shine effect for blocks */
.tetris-block {
    position: relative;
    overflow: hidden;
}

.tetris-block::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    transform: rotate(45deg);
    animation: shine 2s infinite linear;
}

@keyframes shine {
    0% { transform: translateX(-100%) rotate(45deg); }
    100% { transform: translateX(100%) rotate(45deg); }
}

/* Mode Select Modal */
.modal.hidden { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, #06202d, #0b3c49);
  border-radius: 12px;
  padding: 20px;
  width: min(90vw, 360px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  text-align: center;
}
.modal-content h3 { margin: 0 0 8px; font-family: 'Luckiest Guy', cursive; letter-spacing: 0.5px; }
.modal-content p { margin: 0 0 16px; opacity: 0.9; }
.modal-actions { display: flex; gap: 10px; justify-content: center; }
.modal-actions .menu-button { flex: 1; }
.menu-button.secondary { background: #2a3f47; }
.menu-button.secondary:hover { background: #1f3137; }

.mascot-wrap .mascot-gif {
    width: 250px;
    height: 250px;
    border-radius: 12px;
}

/* Adjust menu for mobile */
.menu-container {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

/* Ensure images scale properly */
img {
  max-width: 100%;
  height: auto;
}

/* Make buttons more touch-friendly on mobile */
button {
  min-height: 44px;
  min-width: 44px;
}

/* =================================== */
/* ========== Responsive Styles ========== */
/* =================================== */

/* Base (Mobile) Styles are now the default.
   - Mascot is hidden by default.
   - Main layout is a single column, so score is below the game.
*/

/* Tablet */
@media (min-width: 768px) {
  body {
    padding: 20px;
  }

  /* On tablets, we keep the column layout for scores below, but can have a wider layout */
  main {
    align-items: center;
  }
  

  .left-panel {
    max-width: 500px;
  }

  .right-panel {
    max-width: 500px;
  }

  h1 {
    font-size: 24px !important; /* Larger than mobile */
  }

  .controls button {
    padding: 6px 12px;
    font-size: 0.9rem;
  }

  canvas#tetris {
    max-width: 420px; /* Keep canvas at a good size */
  }

  .volume-control {
    display: none; /* Hide volume on tablet as requested */
  }
  #volume-slider {
    display: none;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  main {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
  
  .left-panel {
    flex: 1;
    min-width: 420px;
  }
  
  .right-panel {
    width: 240px;
    margin-top: 0;
    margin-left: 24px;
  }

  .mascot-wrap {
    display: block;
  }

  .volume-control {
    display: flex; /* Show volume control on desktop */
  }
}

/* ===== Mobile (<= 767px) ===== */
@media (max-width: 767px) {
  body {
    padding: 12px;
  }

  #app {
    min-height: 100dvh; /* avoids iOS Safari jumpiness */
    min-width: 100%;
    border-radius: 0;
  }
  .credits{
    display: none;
  }
 
  header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    margin-bottom: 10px;
  }

  h1 {
    font-size: 1.5rem;
    margin: 5px 0;
  }

  main {
    flex-direction: column;
    align-items: center;
    
  }

  canvas#tetris {
    max-width: 100%;
    aspect-ratio: 0.75;
    height: auto;
  }

  .right-panel {
    width: 100%;
    margin-top:0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .score-and-next {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  .score-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
    flex: 1;
    min-width: 0; /* Prevents flex items from overflowing */
  }

  

  .credits {
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 8px;
  }

  .mascot-wrap {
    width: 100%;
    margin-top: 12px;
  }

  .controls {
    width: 100%;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0;
  }

  .controls button {
    flex: 1 1 auto;
    font-size: 0.8rem;
    padding: 4px 8px;
    min-width: 60px;
    min-height: 32px;
    border-radius: 4px;
  }

  #volume-slider {
    display: none;
  }

  .score-container {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom:20px;
  }

  .score-box {
    min-width: 45%;
    text-align: center;
  }


  .score-box .value {
    font-size: 18px;
  }
  .score-box .label {
    font-size: 10px;
  }
}

/* ===== Tablet (768px - 1023px) ===== */
@media (min-width: 768px) and (max-width: 1023px) {
  body {
    padding: 20px;
  }

  main {
    flex-direction: column; /* stack like mobile, but allow wider elements */
    align-items: center;
    gap: 20px;
  }
   .menu-container{
    padding-bottom: 200px;
   }
  .left-panel, .right-panel {
    max-width: 600px;
    width: 100%;
  }

  h1 {
    font-size: 24px;
  }
  .credits{
    display: none;
  }
  canvas#tetris {
    max-width: 500px;
  }

  .controls button {
    font-size: 0.9rem;
    padding: 6px 12px;
  }

  /* Hide volume control on tablet */
  .volume-control, 
  #volume-slider {
    display: none;
  }
}
/* Extra small screens - iPhone SE and similar */
/* Extra small screens - iPhone SE and similar */
@media (max-width: 380px) {
  .next-box {
    max-width: 50px;
    max-height:10px;
  }

  .menu-container {
      padding: 0.5rem;
      border-radius: 0.5rem;
  }
  .credits{
    display: none;
  }
  .mascot-space {
      width: 180px; /* smaller mascot image */
      height: 180px;
      margin: 1rem auto 0.5rem;
  }

  .menu-button {
      width: 120px; /* narrower buttons */
      padding: 0.6rem;
      margin: 0.5rem auto;
      font-size: 1rem;
  }

  .how-to-play {
      padding: 0.5rem;
  }

  .controls-list li {
      margin: 0.5rem 0;
      padding: 0.4rem;
  }
}