/* ============================================================
   DokunMat — Global Theme  (linked by all sub-pages)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Nunito:wght@700;900&display=swap');

/* ---------- CSS Variables ---------- */
:root {
  --dm-purple : #667eea;
  --dm-violet : #764ba2;
  --dm-pink   : #f093fb;
  --dm-coral  : #f5576c;
  --dm-green  : #43e97b;
  --dm-teal   : #38f9d7;
  --dm-gold   : #feca57;
  --dm-font   : 'Nunito', 'Segoe UI', sans-serif;
  --dm-title  : 'Fredoka One', 'Impact', cursive;
  --dm-glass  : rgba(255,255,255,0.97);
  --dm-shadow : 0 24px 64px rgba(31,38,135,0.25);
  --dm-radius : 18px;
}

/* ---------- Body: animated gradient background ---------- */
body {
  background: linear-gradient(-45deg,#667eea,#764ba2,#f093fb,#f5576c,#43e97b,#38f9d7) !important;
  background-size: 600% 600% !important;
  animation: dmBg 22s ease infinite !important;
  font-family: var(--dm-font) !important;
}
@keyframes dmBg {
  0%   { background-position: 0%   50%; }
  25%  { background-position: 50% 100%; }
  50%  { background-position: 100%  50%; }
  75%  { background-position: 50%   0%; }
  100% { background-position: 0%   50%; }
}

/* ---------- Floating Home Button ---------- */
.dm-back-btn {
  position  : fixed;
  bottom    : 22px;
  left      : 22px;
  z-index   : 9999;
  width     : 52px;
  height    : 52px;
  background: white;
  border-radius: 50%;
  display   : flex;
  align-items  : center;
  justify-content: center;
  text-decoration: none;
  font-size : 24px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 0 0 4px rgba(102,126,234,0.18);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  border    : 2.5px solid rgba(102,126,234,0.35);
  animation : dmHomePulse 3s ease infinite;
}
@keyframes dmHomePulse {
  0%,100% { box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 0 0 4px rgba(102,126,234,0.18); }
  50%     { box-shadow: 0 6px 24px rgba(0,0,0,0.22), 0 0 0 10px rgba(102,126,234,0.07); }
}
.dm-back-btn:hover  { transform: scale(1.18) rotate(-15deg); box-shadow: 0 10px 32px rgba(0,0,0,0.28), 0 0 0 6px rgba(102,126,234,0.25); }
.dm-back-btn:active { transform: scale(0.88); }

/* ---------- App containers: glass morphism ---------- */
#app-container {
  background  : var(--dm-glass) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border      : 1px solid rgba(255,255,255,0.65) !important;
  box-shadow  : var(--dm-shadow) !important;
  border-radius: var(--dm-radius) !important;
}
#main-workspace {
  background  : var(--dm-glass) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border      : 1px solid rgba(255,255,255,0.65) !important;
  box-shadow  : var(--dm-shadow) !important;
}

/* ---------- Page Titles ---------- */
.app-title,
.app-main-title {
  background   : linear-gradient(135deg, var(--dm-purple), var(--dm-violet)) !important;
  font-family  : var(--dm-title) !important;
  letter-spacing: 2px !important;
  box-shadow   : 0 6px 22px rgba(102,126,234,0.45) !important;
  border-radius: 14px !important;
  padding      : 12px 16px !important;
}

/* ---------- Buttons ---------- */
.btn {
  background   : linear-gradient(135deg, #43e97b, #38f9d7) !important;
  border-radius: 12px !important;
  font-family  : var(--dm-font) !important;
  font-weight  : 900 !important;
  color        : white !important;
  text-shadow  : 0 1px 3px rgba(0,0,0,0.2) !important;
  box-shadow   : 0 5px 16px rgba(67,233,123,0.42) !important;
  transition   : transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
  padding      : 8px 20px !important;
  border       : none !important;
}
.btn:hover  { transform: translateY(-3px) scale(1.04) !important; box-shadow: 0 10px 22px rgba(67,233,123,0.5) !important; }
.btn:active { transform: scale(0.94) !important; }

/* "Yeni Soru" or second button in controls-row */
.controls-row .btn:last-child,
.controls-row .btn[style*="3498db"],
.controls-row .btn[style*="background"] {
  background: linear-gradient(135deg, var(--dm-purple), var(--dm-violet)) !important;
  box-shadow : 0 5px 16px rgba(102,126,234,0.42) !important;
}
.controls-row .btn:last-child:hover { box-shadow: 0 10px 22px rgba(102,126,234,0.5) !important; }

.row-btn {
  background   : linear-gradient(135deg, var(--dm-purple), var(--dm-violet)) !important;
  border-radius: 12px !important;
  font-family  : var(--dm-font) !important;
  font-weight  : 900 !important;
  color        : white !important;
  box-shadow   : 0 5px 16px rgba(102,126,234,0.42) !important;
  transition   : transform .22s cubic-bezier(.34,1.56,.64,1) !important;
  border       : none !important;
}
.row-btn:hover  { transform: translateY(-3px) scale(1.04) !important; }
.row-btn:active { transform: scale(0.94) !important; }
.row-btn.reset  {
  background: linear-gradient(135deg, #f5576c, #f093fb) !important;
  box-shadow : 0 5px 16px rgba(245,87,108,0.42) !important;
}

.option-btn {
  background   : linear-gradient(135deg, #43e97b, #38f9d7) !important;
  border-radius: 50% !important;
  font-family  : var(--dm-font) !important;
  font-weight  : 900 !important;
  color        : white !important;
  text-shadow  : 0 1px 3px rgba(0,0,0,0.2) !important;
  box-shadow   : 0 5px 16px rgba(67,233,123,0.42) !important;
  transition   : transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
  border       : none !important;
}
.option-btn:hover  { transform: scale(1.14) translateY(-4px) !important; box-shadow: 0 10px 28px rgba(67,233,123,0.52) !important; }
.option-btn:active { transform: scale(0.88) !important; }

/* ---------- Tabs ---------- */
.main-tab-btn {
  border-radius: 10px !important;
  font-family  : var(--dm-font) !important;
  font-weight  : 900 !important;
  transition   : all .25s !important;
}
.main-tab-btn.active {
  background: linear-gradient(135deg, var(--dm-purple), var(--dm-violet)) !important;
  color     : white !important;
  box-shadow: 0 4px 14px rgba(102,126,234,0.42) !important;
}

/* ---------- Answer Input ---------- */
#answer-input {
  border       : 3px solid var(--dm-purple) !important;
  border-radius: 12px !important;
  font-family  : var(--dm-font) !important;
  font-weight  : 900 !important;
  background   : rgba(102,126,234,0.05) !important;
  transition   : border-color .2s, box-shadow .2s !important;
}
#answer-input:focus {
  outline   : none !important;
  border-color: var(--dm-violet) !important;
  box-shadow : 0 0 0 4px rgba(102,126,234,0.18) !important;
}

/* ---------- Feedback ---------- */
#feedback, .feedback-text {
  font-family: var(--dm-font) !important;
  font-weight: 900 !important;
  font-size  : 15px !important;
  transition : all .3s !important;
}

/* ---------- Parent Guide ---------- */
.parent-guide {
  background  : linear-gradient(135deg, rgba(102,126,234,.08), rgba(118,75,162,.08)) !important;
  border-left : 4px solid var(--dm-purple) !important;
  border-radius: 8px !important;
  font-family : var(--dm-font) !important;
  color       : #444 !important;
}

/* ---------- Scrollable Track ---------- */
.scrollable-track {
  background: linear-gradient(135deg, rgba(102,126,234,.07), rgba(248,250,252,1)) !important;
  border    : 2px dashed var(--dm-purple) !important;
  border-radius: 14px !important;
}
.wrap-container {
  background: linear-gradient(135deg, rgba(245,87,108,.06), rgba(248,250,252,1)) !important;
  border    : 2px dashed rgba(245,87,108,.45) !important;
  border-radius: 14px !important;
}

/* ---------- Strip / Studio Items ---------- */
.strip-item {
  border-radius: 12px !important;
  transition  : transform .2s, background .25s !important;
}
.strip-item:hover   { transform: scale(1.06) !important; }
.strip-item.active  {
  background: linear-gradient(135deg, #f093fb, #f5576c) !important;
  border-color: #e74c3c !important;
  transform: scale(1.1) !important;
}
.strip-item.completed {
  background: linear-gradient(135deg, #43e97b, #38f9d7) !important;
  border-color: #27ae60 !important;
}

/* ---------- Train Cars ---------- */
.train-car { border-radius: 12px !important; transition: transform .2s !important; }
.train-car.empty-car {
  background: linear-gradient(135deg, var(--dm-gold), #f39c12) !important;
  color     : white !important;
  border-color: #d35400 !important;
  animation : dmEmptyPulse 1s ease infinite !important;
}
@keyframes dmEmptyPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 0 0 0   rgba(254,202,87,.6); }
  50%     { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(254,202,87,0); }
}

/* ---------- Strawberry Boxes ---------- */
.strawberry-box {
  border-radius: 12px !important;
  border      : 2px solid rgba(102,126,234,.3) !important;
  transition  : transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s !important;
}
.strawberry-box:hover {
  transform : scale(1.1) translateY(-4px) !important;
  box-shadow: 0 10px 24px rgba(102,126,234,.3) !important;
}

/* ---------- Left Pool ---------- */
#left-pool {
  background: rgba(248,250,252,.92) !important;
  border    : 1px solid rgba(226,232,240,.8) !important;
  border-radius: 10px !important;
}

/* ---------- Ruler ---------- */
#center-ruler-container {
  border      : 2px solid rgba(211,84,0,.45) !important;
  border-radius: 10px !important;
  background  : linear-gradient(to top, #fdf2e9, #fffdf9) !important;
}

/* ---------- Select Listbox ---------- */
.rhythmic-listbox {
  border      : 2px solid var(--dm-purple) !important;
  border-radius: 12px !important;
  font-family : var(--dm-font) !important;
  font-weight : 700 !important;
}

/* ---------- Cube Bars hover boost ---------- */
.cube-bar {
  border-radius: 8px !important;
  transition  : transform .18s, box-shadow .18s !important;
}
.cube-bar:hover {
  transform : scale(1.06) !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28) !important;
}

/* ---------- Success Burst Helper ---------- */
@keyframes dmSuccess {
  0%  { transform: scale(1); }
  40% { transform: scale(1.12); }
  100%{ transform: scale(1); }
}
.dm-success-anim { animation: dmSuccess .45s ease; }