/* AI or Real — style based on the provided design (cleaned, no audio UI) */

:root{
  /* Brand */
  --bg-dark:#222222;
  --brand-blue:#3454D1;
  --brand-sage:#9BC1BC;
  --text-cream:#E6EBE0;

  /* Glass */
  --glass-bg: rgba(34,34,34,0.55);
  --glass-border: rgba(255,255,255,0.12);

  /* Status */
  --status-correct:#58E6B5;
  --status-wrong:#FF4D6D;

  /* Fonts */
  --font-text: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-title: "Pacifico", cursive;

  /* Layout */
  --max-game-width: 480px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{ height:100%; }
body{
  font-family: var(--font-text);
  background: var(--bg-dark);
  color: var(--text-cream);
  overflow: hidden; /* no scrolling */
  display:flex;
  flex-direction:column;
}

/* Background canvas */
#canvas-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

/* Main layout */
.container{
  flex:1 1 auto;
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding: 1rem;
  position:relative;
  z-index:1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:0; /* important for no-scroll layouts */
}

header{
  text-align:center;
  margin-bottom: 0.6rem;
  flex-shrink:0;
}

.logo-link{
  display:inline-block;
  transition: transform 0.2s ease;
}
.logo-link:active{ transform: scale(0.95); }

.logo-img{
  width:180px;
  height:auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
}

h1{
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  color: #fff;
  text-shadow: 0 3px 10px rgba(0,0,0,0.4);
  margin-top: 0.5rem;
}

/* Screens */
.screen{
  display:none;
  width:100%;
  flex:1 1 auto;
  min-height:0;

  flex-direction:column;
  align-items:center;
  justify-content:center;

  animation: fadeIn 0.4s ease-out;
}
.screen.active{ display:flex; }

/* Panels */
.card-panel{
  background: var(--glass-bg);
  border: 2px solid var(--brand-blue);
  backdrop-filter: blur(12px);
  padding: clamp(1.25rem, 3vw, 2.2rem);
  border-radius: 20px;
  text-align:center;
  max-width: 520px;
  width:min(92vw, 520px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

.start-title{
  color: var(--brand-blue);
  font-size: 2.2rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.best-line{
  margin-bottom: 1rem;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand-sage);
}

.start-sub{
  opacity: 0.95;
}

/* Instructions box */
.instructions{
  text-align:left;
  background: rgba(0,0,0,0.28);
  padding: 1.05rem;
  border-radius: 10px;
  margin: 1.3rem 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  border: 1px solid var(--glass-border);
}
.instructions ul{ list-style: none; }
.instructions li{
  margin-left: 0.2rem;
  margin-bottom: 0.55rem;
}
.instructions strong{ font-weight: 700; }

/* Primary button */
.btn-primary{
  background: var(--brand-blue);
  color: #fff;
  border:none;
  padding: 1rem 3rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1.05rem;
  cursor:pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  box-shadow: 0 5px 20px rgba(52, 84, 209, 0.4);
}
.btn-primary:hover{ background:#2a43a8; transform: translateY(-2px); }
.btn-primary:active{ transform: scale(0.97); }

/* Game wrapper */
.game-wrapper{
  width:100%;
  max-width: var(--max-game-width);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.95rem;
  min-height:0;
}

.scoreboard{
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:1.05rem;
  font-weight:600;
  background: var(--glass-bg);
  padding: 0.75rem 1.2rem;
  border-radius: 50px;
  border: 1px solid var(--glass-border);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.score-val{
  color: var(--brand-sage);
  font-variant-numeric: tabular-nums;
}

/* Timer */
.timer-wrapper{
  width:100%;
  position:relative;
  margin-top: 0.35rem;
}
.timer-text{
  position:absolute;
  top:-28px;
  width:100%;
  text-align:center;
  font-size:1.15rem;
  font-weight:700;
  color: var(--text-cream);
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}
.timer-text.danger{
  color: var(--status-wrong);
  animation: pulse 0.5s infinite alternate;
}

.timer-bg{
  width:100%;
  height:8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow:hidden;
}
.timer-fill{
  height:100%;
  width:100%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-sage));
  transform-origin: left;
  transform: scaleX(1);
}

/* Image container */
.image-container{
  width:100%;
  aspect-ratio: 1 / 1;
  background:#000;
  border: 3px solid var(--brand-blue);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  overflow:hidden;
  position:relative;

  /* ensures it fits within viewport */
  max-height: min(52vh, 520px);
}

@media (max-height: 700px) and (orientation: landscape){
  .image-container{ height: 50vh; width: 50vh; max-height: 50vh; }
}

.game-img{
  width:100%;
  height:100%;
  object-fit: cover;
  opacity:1;
  transition: opacity 0.2s ease, transform 0.2s ease;
  user-select:none;
  -webkit-user-drag:none;
}
.game-img.fade-out{ opacity:0; transform: scale(0.96); }

/* Feedback overlay */
.feedback-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background: rgba(0,0,0,0.68);
  opacity:0;
  pointer-events:none;
  backdrop-filter: blur(4px);
  transition: opacity 0.1s ease;
}
.feedback-text{
  font-size: 2.2rem;
  font-weight: 800;
  color:#fff;
  text-shadow: 0 4px 15px rgba(0,0,0,0.5);
  margin-top: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.feedback-icon{
  font-size: 4rem;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.feedback-overlay.show{ opacity:1; }
.feedback-overlay.show .feedback-icon{ transform: scale(1); }

/* Controls */
.controls{
  display:flex;
  gap: 1rem;
  width:100%;
}

.btn-game{
  flex:1;
  padding: 1.15rem;
  font-family: var(--font-text);
  font-size: 1.05rem;
  font-weight: 700;
  cursor:pointer;
  background: rgba(34,34,34,0.7);
  border: 2px solid;
  border-radius: 12px;
  color: var(--text-cream);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  text-transform: uppercase;
  position:relative;
  touch-action: manipulation;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
}
.btn-game:active{ transform: scale(0.98); }

.key-hint{
  display:block;
  font-size: 0.72rem;
  opacity:0.6;
  font-weight: 400;
  margin-top: 4px;
  text-transform:none;
}

.btn-real{ border-color: var(--brand-sage); color: var(--brand-sage); }
.btn-ai{ border-color: var(--brand-blue); color: var(--brand-blue); }

.btn-real:hover{ background: rgba(155,193,188,0.10); box-shadow: 0 0 22px rgba(155,193,188,0.20); }
.btn-ai:hover{ background: rgba(52,84,209,0.10); box-shadow: 0 0 22px rgba(52,84,209,0.25); }

/* Game over modal */
.game-over-modal{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,0.9);
  z-index: 100;
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transition: opacity 0.3s ease;
  padding: 1rem;
}
.game-over-modal.active{
  opacity:1;
  pointer-events:auto;
}
.modal-content{
  background: var(--bg-dark);
  border: 2px solid var(--status-wrong);
  padding: 2.2rem;
  border-radius: 20px;
  text-align:center;
  max-width: 420px;
  width: min(92vw, 420px);
  transform: scale(0.92);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 20px 60px rgba(0,0,0,0.65);
}
.game-over-modal.active .modal-content{ transform: scale(1); }

.gameover-title{
  color: var(--status-wrong);
  font-family: var(--font-title);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.fail-message{
  margin-bottom: 1.2rem;
  opacity:0.9;
  font-size: 1.05rem;
}

.stats-box{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: rgba(255,255,255,0.05);
  padding: 1rem;
  border-radius: 10px;
  margin: 1.2rem 0 1.4rem;
}
.stat-item span{ opacity:0.85; font-size: 0.9rem; }
.stat-item strong{
  display:block;
  font-size: 1.8rem;
  color: var(--brand-sage);
  font-variant-numeric: tabular-nums;
}

/* Footer */
footer{
  flex:0 0 auto;
  position:relative;
  z-index:1;
  padding: 0.9rem;
  font-size: 0.8rem;
  opacity: 0.75;
  text-align:center;
  width:100%;
}
.footer-link{
  color: var(--brand-blue);
  text-decoration:none;
  font-weight:600;
}
.footer-link:hover{
  text-decoration: underline;
  text-shadow: 0 0 8px rgba(52, 84, 209, 0.35);
}

/* Animations */
@keyframes fadeIn{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes pulse{
  from{ opacity:1; }
  to{ opacity:0.5; }
}

/* Responsive tweaks */
@media (max-width: 768px){
  .logo-img{ width:150px; }
  .key-hint{ display:none; }
  .controls{ gap: 0.8rem; }
  h1{ font-size: 2rem; }
  header{ margin-bottom: 0.4rem; }
}

/* Ultra short height: keep everything on-screen */
@media (max-height: 720px){
  .logo-img{ width:150px; }
  .instructions{ margin: 1rem 0 1.1rem; }
  .image-container{ max-height: min(46vh, 420px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}