* {
  font-family: 'Quicksand', 'Nunito', sans-serif;
}

.text-navy {
  color: #1e3a8a;
}

.fade-in {
  animation: fadeIn .4s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pop-in {
  animation: popIn .35s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes popIn {
  from { opacity: 0; transform: scale(.7); }
  to   { opacity: 1; transform: scale(1); }
}

.bounce-text {
  display: inline-block;
  animation: bounceText .9s ease infinite;
}
@keyframes bounceText {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.shake {
  animation: shake .4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-6px); }
  50%      { transform: translateX(6px); }
  75%      { transform: translateX(-4px); }
}

.confetti {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* ---------- Excel grid ---------- */
.grid-wrap {
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #bfdbfe;
  box-shadow: 0 8px 24px rgba(30, 64, 175, .08);
  background: #fff;
}
.excel-grid {
  display: grid;
}
.cell {
  padding: 10px 14px;
  font-size: 13px;
  background: #fff;
  border: 1px solid #e0f2fe;
  color: #1e3a8a;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
}
.col-header, .row-header, .corner-cell {
  background: #dbeafe;
  font-weight: 800;
  color: #1e40af;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #bfdbfe;
  font-size: 13px;
  padding: 8px;
}
.corner-cell {
  border-top-left-radius: 16px;
}

.active-cell {
  outline: 3px solid #38bdf8;
  outline-offset: -3px;
  background: #e0f2fe;
}

.highlight-cell {
  background: #0ea5e9;
  color: #fff;
  animation: cellPop .45s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes cellPop {
  0%   { transform: scale(.75); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ---------- Word document ---------- */
.doc-page {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(30, 64, 175, .1);
  padding: 32px;
  border: 1px solid #bfdbfe;
  min-height: 220px;
}
.doc-title {
  font-size: 26px;
  font-weight: 400;
  color: #1e3a8a;
  margin-bottom: 18px;
  transition: all .25s ease;
}
.doc-body {
  font-size: 15px;
  line-height: 1.9;
  color: #334155;
}
.typo {
  color: #ef4444;
  text-decoration: underline wavy #ef4444;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: #1e3a8a;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

.found {
  background: #fde047 !important;
  color: #1f2937 !important;
  box-shadow: 0 0 0 3px #facc15;
  border-radius: 4px;
  animation: pulse .6s ease infinite alternate;
}

/* ---------- Interaktivitas elemen input ---------- */
textarea,
[contenteditable="true"] {
  cursor: text;
  transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .12s ease;
}
textarea:hover,
[contenteditable="true"]:hover {
  border-color: #7dd3fc;
  box-shadow: 0 4px 14px rgba(56, 189, 248, .15);
}
textarea:focus,
[contenteditable="true"]:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .25);
  background: #f0f9ff;
}
textarea[readonly] {
  cursor: pointer;
}
textarea[readonly]:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}
textarea[readonly]:active {
  transform: scale(.99);
}

.cell {
  cursor: pointer;
  transition: background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cell:hover {
  background: #e0f2fe;
  box-shadow: inset 0 0 0 2px #7dd3fc;
}
.copied {
  outline: 3px dashed #38bdf8;
  outline-offset: -3px;
  background: #e0f2fe;
}
.cell:active {
  transform: scale(.95);
}
@keyframes pulse {
  from { box-shadow: 0 0 0 3px #facc15; }
  to   { box-shadow: 0 0 0 8px #fef08a; }
}

/* ---------- Efek lucu ---------- */
.bg-floater {
  position: absolute;
  bottom: -60px;
  animation: floatUp linear forwards;
}
@keyframes floatUp {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-110vh) rotate(360deg); opacity: 0; }
}

#mascot {
  display: inline-block;
  animation: mascotBob 2.5s ease-in-out infinite;
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-8deg); }
}

#progressBar {
  overflow: hidden;
  position: relative;
}
#progressBar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shimmer 1.8s linear infinite;
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.badge-pop {
  animation: badgePop .45s cubic-bezier(.175, .885, .32, 1.275);
}
@keyframes badgePop {
  0%   { transform: scale(.5); }
  60%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ---------- Gaya lucu ---------- */
h1, h2 {
  font-family: 'Fredoka', 'Quicksand', sans-serif;
}

.title-bounce {
  display: inline-block;
  animation: titleBounce 1.6s ease-in-out infinite;
}
@keyframes titleBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-6px) rotate(-2deg); }
  60%      { transform: translateY(0) rotate(2deg); }
}

.wobble:hover {
  animation: wobble .6s ease;
}
@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-6deg) scale(1.1); }
  40%      { transform: rotate(6deg) scale(1.1); }
  60%      { transform: rotate(-3deg) scale(1.05); }
  80%      { transform: rotate(3deg) scale(1.05); }
}