/* =====================================================================
   ABC Magie — Styles
   Child-friendly visual design. All colors are CSS variables and can
   be customized in one place.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

:root {
  --sky:      #2b6cff;
  --sunshine: #ffd23f;
  --coral:    #ff5d73;
  --mint:     #2ee6a8;
  --grape:    #6c4cf0;
  --ink:      #15234b;
  --cream:    #fff7e8;
  --shadow:   0 14px 0 rgba(0,0,0,.12), 0 24px 40px rgba(21,35,75,.28);
  font-family: 'Fredoka', system-ui, sans-serif;
}

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

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--ink);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.hidden { display: none !important; }

/* ============ Start screen ============ */
#start-screen {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,210,63,.22), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(46,230,168,.22), transparent 42%),
    radial-gradient(circle at 70% 20%, rgba(255,93,115,.18), transparent 40%),
    linear-gradient(160deg, #1b2a57, #15234b 60%, #101b3c);
}
#start-screen::before {
  content: "A B C D Ä Ö Ü ß a b c";
  position: absolute; inset: 0;
  font-size: 22vw; font-weight: 700; line-height: 1.6;
  color: rgba(255,255,255,.04);
  white-space: pre-wrap; word-spacing: 1.2em;
  pointer-events: none; overflow: hidden;
}

.start-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: var(--cream);
  border-radius: 32px;
  padding: 40px 28px 30px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 4px solid #fff;
  animation: pop-in .5s cubic-bezier(.18,.89,.32,1.28);
}

.logo-emoji { font-size: 64px; line-height: 1; animation: wiggle 2.4s ease-in-out infinite; }

.start-card h1 {
  font-size: 44px; font-weight: 700; color: var(--sky);
  margin: 8px 0 4px; letter-spacing: -1px;
  text-shadow: 0 3px 0 rgba(43,108,255,.18);
}
.subtitle    { font-size: 18px; color: var(--ink); font-weight: 500; margin-top: 10px; }
.subtitle-en { font-size: 16px; color: #5a6685; font-weight: 500; margin: 4px 0 6px; }
.hint        { font-size: 13px; color: #9aa3bd; margin-top: 14px; }

#start-btn {
  margin-top: 18px;
  font-family: inherit; font-size: 22px; font-weight: 600;
  color: #fff; background: var(--coral);
  border: none; border-radius: 999px;
  padding: 16px 30px; width: 100%;
  cursor: pointer;
  box-shadow: 0 8px 0 #d63a51, 0 14px 22px rgba(255,93,115,.4);
  transition: transform .08s ease, box-shadow .08s ease;
}
#start-btn:active { transform: translateY(6px); box-shadow: 0 2px 0 #d63a51, 0 6px 12px rgba(255,93,115,.4); }

/* ============ Loading screen ============ */
#loading-screen {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: var(--ink); color: var(--cream);
  font-size: 20px; font-weight: 500;
}
.spinner {
  width: 64px; height: 64px; border-radius: 50%;
  border: 7px solid rgba(255,255,255,.15);
  border-top-color: var(--sunshine);
  animation: spin 1s linear infinite;
}

/* ============ Scan hint ============ */
#scan-hint {
  position: fixed; left: 0; right: 0; bottom: 7%; z-index: 30;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  pointer-events: none;
}
#scan-hint p {
  background: rgba(21,35,75,.78); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: 16px; font-weight: 500; text-align: center;
  backdrop-filter: blur(6px);
}
#scan-hint p span { font-size: 14px; opacity: .85; }
.scan-frame {
  width: 62vw; max-width: 280px; aspect-ratio: 3/4;
  border: 4px dashed rgba(255,210,63,.85);
  border-radius: 22px;
  animation: breathe 2s ease-in-out infinite;
}

/* ============ Media overlay ============ */
#media-overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: radial-gradient(circle at center, rgba(21,35,75,.35), rgba(21,35,75,.72));
  opacity: 0; transition: opacity .3s ease;
}
#media-overlay.visible { opacity: 1; }

.media-stage {
  position: relative;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: center;
  transform: scale(.8) translateY(20px);
  transition: transform .35s cubic-bezier(.18,.89,.32,1.28);
}
#media-overlay.visible .media-stage { transform: scale(1) translateY(0); }

.letter-badge {
  font-size: 72px; font-weight: 700; line-height: 1;
  width: 110px; height: 110px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--grape);
  border: 6px solid #fff; border-radius: 28px;
  box-shadow: var(--shadow);
  margin-bottom: -28px; z-index: 2;
  transform: rotate(-6deg);
}

.media-holder {
  width: 100%; aspect-ratio: 1/1;
  background: #fff; border: 6px solid #fff;
  border-radius: 32px; overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: center;
}
.media-holder video, .media-holder img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.word-label {
  margin-top: 18px;
  font-size: 38px; font-weight: 700; color: #fff;
  background: var(--mint);
  padding: 8px 28px; border-radius: 999px;
  border: 5px solid #fff; box-shadow: var(--shadow);
  text-shadow: 0 2px 0 rgba(0,0,0,.12);
}

.replay-btn {
  margin-top: 18px;
  font-family: inherit; font-size: 18px; font-weight: 600;
  color: var(--ink); background: var(--sunshine);
  border: none; border-radius: 999px;
  padding: 12px 26px; cursor: pointer;
  box-shadow: 0 6px 0 #d9a800;
  transition: transform .08s ease, box-shadow .08s ease;
}
.replay-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #d9a800; }

/* ============ AR scene ============ */
a-scene, .a-canvas { position: fixed !important; inset: 0 !important; z-index: 1; }

/* ============ Animations ============ */
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pop-in  { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes wiggle  { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.04); opacity: 1; } }

/* MindAR camera fullscreen fix (mobile) */
a-scene, .a-canvas,
.mindar-ui-overlay,
video {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
}
a-scene video,
video { object-fit: cover !important; }
.media-holder video {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  z-index: auto !important;
}

/* German article colors (Der / Die / Das) */
.word-label.art-der { background: #2b6cff; }  /* masculine */
.word-label.art-die { background: #e63946; }  /* feminine */
.word-label.art-das { background: #2a9d4a; }  /* neuter */

/* Chroma-key canvas */
.media-holder .chroma-canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

/* 3D model viewer */
.media-holder model-viewer {
  width: 100% !important;
  height: 100% !important;
  --poster-color: transparent;
  background: transparent;
}

/* Landscape support (tablet / phone) */
@media (orientation: landscape) {
  .media-stage { max-width: 380px; }
  .media-holder { aspect-ratio: 4/3; }
  .letter-badge { width: 84px; height: 84px; font-size: 54px; margin-bottom: -22px; }
  .word-label { font-size: 30px; padding: 6px 22px; }
  .replay-btn { margin-top: 12px; padding: 10px 22px; font-size: 16px; }
}
.a-canvas, a-scene canvas, a-scene video {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
}

/* "Hold the device upright" overlay */
#rotate-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 24px;
  background: linear-gradient(160deg, #1b2a57, #15234b 60%, #101b3c);
  color: var(--cream);
}
#rotate-overlay p { font-size: 22px; font-weight: 600; margin: 0; }
#rotate-overlay .rotate-en { font-size: 18px; opacity: .85; }
.rotate-emoji { font-size: 72px; animation: rock 1.6s ease-in-out infinite; }
@keyframes rock { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }

@media (orientation: landscape) and (max-height: 500px) {
  #rotate-overlay { display: flex; }
}

/* Media loading bar */
.media-loader {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
}
.loader-track {
  width: 70%; max-width: 220px; height: 14px;
  background: rgba(21,35,75,.12); border-radius: 999px; overflow: hidden;
}
.loader-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--mint), var(--sky));
  border-radius: 999px; transition: width .2s ease;
}
.loader-pct { font-size: 18px; font-weight: 600; color: var(--ink); }
.loader-spin {
  width: 44px; height: 44px; border-radius: 50%;
  border: 5px solid rgba(21,35,75,.15); border-top-color: var(--sky);
  animation: spin 1s linear infinite;
}