* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; user-select: none; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; }
body { background: linear-gradient(160deg, #fff3b0 0%, #ffd6a5 50%, #ffadad 100%); color: #333; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }

/* Dashboard */
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; }
.topbar h1 { font-size: 26px; font-weight: 800; color: #d9480f; text-shadow: 2px 2px 0 #fff3b0; }
.debug-log { display: none !important; }
.fab-log {
  position: fixed; right: 96px; bottom: 24px; z-index: 100;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; background: #fff;
  font-size: 24px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.fab-log:active { transform: scale(0.9); }

/* Floating update button — bottom right */
.fab-update {
  position: fixed; right: 20px; bottom: 24px; z-index: 100;
  width: 64px; height: 64px; border-radius: 50%;
  border: none; background: #fff;
  font-size: 30px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: transform 0.2s;
}
.fab-update:active { transform: scale(0.9); }
.fab-update.spinning { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Update overlay */
.update-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(255,255,255,0.92);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px;
}
.update-overlay.hidden { display: none; }
.update-spinner { font-size: 64px; animation: spin 1.2s linear infinite; }
.update-text { font-size: 22px; font-weight: 700; color: #ff9a3c; }
.lang-toggle { display: flex; gap: 6px; background: rgba(255,255,255,0.6); padding: 4px; border-radius: 20px; }
.lang-toggle button { border: none; background: transparent; padding: 8px 14px; border-radius: 16px; font-size: 14px; font-weight: 700; cursor: pointer; color: #666; }
.lang-toggle button.active { background: #ff9a3c; color: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }

.cards { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 12px 16px 24px; align-content: center; overflow-y: auto; }
.card { border: none; border-radius: 24px; padding: 18px 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; font-family: inherit; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.15); transition: transform 0.15s; min-height: 140px; }
.card:active { transform: scale(0.96); }
.card-letter { grid-column: span 2; min-height: 110px; }
.card-animal { background: linear-gradient(135deg, #a8e6cf 0%, #56ab91 100%); color: #fff; }
.card-object { background: linear-gradient(135deg, #ffd3a5 0%, #fd6585 100%); color: #fff; }
.card-shape  { background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%); color: #fff; }
.card-number { background: linear-gradient(135deg, #fbc2eb 0%, #a18cd1 100%); color: #fff; }
.card-letter { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); color: #fff; }
.card-emoji { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.2)); letter-spacing: -2px; }
.card-title { font-size: 22px; font-weight: 800; text-shadow: 1px 1px 0 rgba(0,0,0,0.15); }

/* Play screen */
#play { background: linear-gradient(160deg, #cfe8ff 0%, #ffe0f7 100%); }
.back { position: absolute; top: 16px; left: 16px; z-index: 10; width: 48px; height: 48px; border-radius: 50%; border: none; background: rgba(255,255,255,0.85); font-size: 28px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.15); color: #333; }

.hidden { display: none !important; }

/* Countdown */
.countdown { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle, rgba(255,154,60,0.9) 0%, rgba(255,69,96,0.95) 100%); z-index: 5; }
.count-text { font-size: 220px; font-weight: 900; color: #fff; text-shadow: 0 8px 0 rgba(0,0,0,0.2); animation: pop 1s ease-out; }
@keyframes pop { 0% { transform: scale(0.3); opacity: 0; } 40% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

/* Question */
.question { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 32px; }
.question-text { font-size: 32px; font-weight: 800; color: #ff4560; text-align: center; text-shadow: 2px 2px 0 #fff; }
.item-emoji { font-size: 240px; line-height: 1; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.2)); animation: wobble 2s ease-in-out infinite; display: flex; align-items: center; justify-content: center; width: 320px; height: 320px; }
.item-emoji.big { font-size: 280px; width: 360px; height: 360px; }
.real-img { width: 100%; height: 100%; object-fit: contain; border-radius: 28px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); border: 6px solid #fff; background: #fff; }
@keyframes wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.timer-bar { width: 80%; max-width: 320px; height: 14px; background: rgba(255,255,255,0.5); border-radius: 10px; overflow: hidden; }
.timer-fill { height: 100%; background: linear-gradient(90deg, #56ab91 0%, #ff9a3c 100%); width: 100%; transition: width linear; }

/* Answer */
.answer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 32px; }
.answer-text { font-size: 44px; font-weight: 900; color: #56ab91; text-align: center; text-shadow: 3px 3px 0 #fff; animation: pop 0.6s ease-out; }
.next-btn { border: none; background: #ff9a3c; color: #fff; padding: 18px 36px; border-radius: 32px; font-size: 22px; font-weight: 800; font-family: inherit; cursor: pointer; box-shadow: 0 6px 16px rgba(255,154,60,0.5); }
.next-btn:active { transform: scale(0.96); }

/* Responsive */
@media (min-width: 600px) {
  .cards { grid-template-columns: 1fr 1fr 1fr; padding: 24px 32px; }
  .card-letter { grid-column: span 3; }
  .card { min-height: 200px; }
  .card-emoji { font-size: 64px; }
  .card-title { font-size: 28px; }
}