:root {
  --font-display: "Raleway", sans-serif;
  --font-interface: "Josefin Sans", sans-serif;
  --font-persian: "Vazirmatn", "Noto Sans Arabic", sans-serif;
}

body,
button,
select,
input {
  font-family: var(--font-interface);
}

h1,
h2,
.app-title,
.logo {
  font-family: var(--font-display);
}

.app-title,
.logo {
  font-weight: 500;
  letter-spacing: 0.08em;
}

button {
  font-weight: 700;
  letter-spacing: 0.015em;
}

.persian,
[lang="fa"] {
  font-family: var(--font-persian);
  letter-spacing: normal;
}

.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;

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

  background: linear-gradient(
    180deg,
    #60aef7,
    #8fc9eb
  );

  transition:
    opacity 0.6s ease,
    visibility 0.6s ease;
}

.splash-content {
  text-align: center;
  padding: 30px;
}

.splash-image {
  width: min(260px, 65vw);
  height: auto;
  margin-bottom: 15px;
}

.splash-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 4.5rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1;
  color: #102f50;
  text-indent: 0.12em;
}

.splash-tagline {
  margin: 8px 0 30px;
  font-family: var(--font-interface);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  color: #173f65;
}

.splash-go {
  padding: 12px 35px;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 12px;
}

.splash-screen.splash-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
  
  
  body { font-family: var(--font-interface); background:rgb(0, 35, 131); color:#132f4a; margin:0; padding:24px; }
  .app {
  max-width: 700px;
  margin: auto;

  background:
    radial-gradient(
      circle at 50% 10%,
      #79bcfa 0%,
      #60aef7 45%,
      #4f9ee8 100%
    );

  border-radius: 18px;
  padding: 28px;

  box-shadow:
    0 12px 35px rgba(0, 40, 110, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

  h1 { margin-top:0; }
  h1, h2 {
    color: #123453;
    font-weight: 600;
    letter-spacing: 0.025em;
  }

  h2 {
    font-size: 1.35rem;
  }
  #persianPhrase {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  direction: rtl;
}

#carrierBefore,
#carrierAfter {
  font-size: 0.95em;
  opacity: 0.6;
}

#word {
  font-size: 3rem;
  font-weight: 500;
}
  select, button { font:inherit; padding:11px 14px; border-radius:10px; border:1px solid #ccc; }
  /* =========================
   CONTROLS + BUTTONS
   ========================= */

select,
button,
input {
  font: inherit;
}

/* Dropdown */
select {
  appearance: none;
  padding: 11px 38px 11px 14px;

  border: 1px solid rgba(255,255,255,.45);
  border-radius: 12px;

  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,246,255,.92));

  color: #18334f;

  box-shadow:
    0 3px 8px rgba(24, 67, 110, .12),
    inset 0 1px 0 rgba(255,255,255,.8);

  cursor: pointer;

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

select:hover {
  border-color: rgba(30, 95, 155, .45);
}

select:focus {
  outline: none;
  border-color: #246cad;

  box-shadow:
    0 0 0 4px rgba(36,108,173,.16),
    0 4px 12px rgba(24,67,110,.14);
}


/* Base button */
button {
  position: relative;

  padding: 11px 16px;

  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;

  background:
    linear-gradient(
      180deg,
      #283b52 0%,
      #182a3e 100%
    );

  color: #fff;

  font-weight: 650;
  letter-spacing: .01em;

  cursor: pointer;

  box-shadow:
    0 5px 10px rgba(0, 35, 75, .20),
    inset 0 1px 0 rgba(255,255,255,.16);

  transition:
    transform .14s ease,
    box-shadow .14s ease,
    background .14s ease,
    border-color .14s ease;
}


/* Subtle glass shine */
button::before {
  content: "";
  position: absolute;

  left: 8px;
  right: 8px;
  top: 3px;

  height: 45%;

  border-radius: 9px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(255,255,255,0)
    );

  pointer-events: none;
}


/* Hover */
button:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      180deg,
      #314b68 0%,
      #1d334a 100%
    );

  border-color: rgba(255,255,255,.38);

  box-shadow:
    0 8px 16px rgba(0, 35, 75, .24),
    inset 0 1px 0 rgba(255,255,255,.18);
}


/* Pressed */
button:active {
  transform: translateY(1px);

  box-shadow:
    0 2px 5px rgba(0, 35, 75, .22),
    inset 0 2px 4px rgba(0,0,0,.12);
}


/* Keyboard accessibility */
button:focus-visible {
  outline: none;

  box-shadow:
    0 0 0 4px rgba(255,255,255,.32),
    0 6px 14px rgba(0,35,75,.22);
}


/* Disabled buttons, if you ever use them */
button:disabled {
  opacity: .48;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}


/* =========================
   TOP TOOL BUTTONS
   ========================= */

.app > .row button {
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(226,241,255,.92)
    );

  color: #173a5c;

  border: 1px solid rgba(27,93,150,.18);

  box-shadow:
    0 4px 9px rgba(0,55,110,.13),
    inset 0 1px 0 white;
}

.app > .row button:hover {
  background:
    linear-gradient(
      180deg,
      #ffffff,
      #d8edff
    );

  border-color: rgba(27,93,150,.32);
}


/* =========================
   MAIN CARD ACTION BUTTONS
   ========================= */

.card .row button {
  min-height: 45px;

  background:
    linear-gradient(
      180deg,
      #183d61 0%,
      #102e4b 100%
    );
}

.card .row button:hover {
  background:
    linear-gradient(
      180deg,
      #20527f 0%,
      #153a5d 100%
    );
}


/* Make sentence button feel slightly special */
#sentenceButton {
  background:
    linear-gradient(
      180deg,
      #235f85 0%,
      #174766 100%
    );
}

#sentenceButton:hover {
  background:
    linear-gradient(
      180deg,
      #2d76a2 0%,
      #1b5579 100%
    );
}


/* =========================
   QUIZ BUTTON
   ========================= */

#answer + br + br + button {
  padding-inline: 24px;
}
  .card {
  position: relative;

  margin: 24px 0;
  padding: 30px;

  background:
    radial-gradient(
      circle at 50% 15%,
      #a7d7f1 0%,
      #8fc9eb 55%,
      #7dbce2 100%
    );

  border-radius: 16px;
  text-align: center;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(0, 55, 120, 0.12);
  }
  .word { height: 130px; width: 100%; font-size:42px; font-weight:700; font-family:"Vazirmatn", sans-serif;
  direction:rtl;}
  #fontDisplay {
  margin-top:10px;
  font-size:14px;
  color:#666;
  }
  .font-haze {
  text-shadow: 0 0 8px rgb(168, 74, 11);
  animation: hazeWane 15s ease-out forwards;
  }
  @keyframes hazeWane {
    from {
      text-shadow: 0 0 8px rgb(168, 74, 11);
    }
    to {
      text-shadow: 0 0 0 rgba(128, 0, 0, 0);
    }
  }
  .word {
  position: relative;
  overflow: visible;
  display: inline-block;
  transform-origin: center;
  will-change: transform, opacity;
  cursor: default;
  }
  .translated-word {
    cursor: help;
    padding: 2px;
    border-radius: 4px;
    border-bottom: 2px dotted #777;
    transition: background 0.15s;
  }
  .translated-word:hover {
      background: #e8e8e8;
  }
  .translation { font-size:25px; margin:12px 0; min-height:36px; }
  .hidden { visibility:hidden; }
  .row { display:flex; gap:10px; flex-wrap:wrap; }
  .score { font-weight:600; }
  input { padding:12px; border:1px solid #ccc; border-radius:10px; width:calc(100% - 26px); font:inherit; }
  #feedback { min-height:28px; font-weight:600; }
  .word-rain-container {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 9999;
}

.raining-word {
    position: absolute;
    white-space: nowrap;
    font-size: 28px;
    font-weight: bold;
    opacity: 0.85;
    pointer-events: none;
    z-index: 9999;
}

/* LEFT → RIGHT */
@keyframes rain-right {
    from {
        transform: translate(-300px, 0) rotate(-15deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(calc(100vw + 300px), 0) rotate(15deg);
        opacity: 0;
    }
}

/* RIGHT → LEFT */
@keyframes rain-left {
    from {
        transform: translate(calc(100vw + 300px), 0) rotate(15deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(-300px, 0) rotate(-15deg);
        opacity: 0;
    }
}

/* TOP → BOTTOM */
@keyframes rain-down {
    from {
        transform: translate(0, -200px) rotate(-10deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(0, calc(100vh + 200px)) rotate(10deg);
        opacity: 0;
    }
}

/* BOTTOM → TOP */
@keyframes rain-up {
    from {
        transform: translate(0, calc(100vh + 200px)) rotate(10deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(0, -200px) rotate(-10deg);
        opacity: 0;
    }
}

/* TOP LEFT → BOTTOM RIGHT */
@keyframes rain-down-right {
    from {
        transform: translate(-300px, -200px) rotate(-20deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(calc(100vw + 300px), calc(100vh + 200px))
                   rotate(20deg);
        opacity: 0;
    }
}

/* BOTTOM RIGHT → TOP LEFT */
@keyframes rain-up-left {
    from {
        transform: translate(calc(100vw + 300px), calc(100vh + 200px))
                   rotate(20deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(-300px, -200px) rotate(-20deg);
        opacity: 0;
    }
}

/* TOP RIGHT → BOTTOM LEFT */
@keyframes rain-down-left {
    from {
        transform: translate(calc(100vw + 300px), -200px) rotate(20deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(-300px, calc(100vh + 200px)) rotate(-20deg);
        opacity: 0;
    }
}

/* BOTTOM LEFT → TOP RIGHT */
@keyframes rain-up-right {
    from {
        transform: translate(-300px, calc(100vh + 200px)) rotate(-20deg);
        opacity: 0;
    }
    10%, 90% {
        opacity: 0.9;
    }
    to {
        transform: translate(calc(100vw + 300px), -200px) rotate(20deg);
        opacity: 0;
    }
}

/* =========================
   PENGUIN ANIMATION
   ========================= */
.card {
  position: relative;
}
#penguin {
  position: absolute;
  left: 38%;
  top: 5%;
  width: 150px;
  height: 235px;
  opacity: 0;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  pointer-events: none;
  z-index: 20;
}


.penguin-body {
  position: absolute;

  left: 25px;
  top: 22px;

  width: 102px;
  height: 176px;

  border-radius:
    54% 54% 48% 48%
    / 42% 42% 58% 58%;

  background: #11161b;

  z-index: 2;
}


.penguin-belly {
  position: absolute;

  left: 17px;
  top: 60px;

  width: 68px;
  height: 101px;

  border-radius:
    50% 50% 46% 46%;

  background: #f6f3ea;

  opacity: 0;

  transform:
    scaleY(.08);

  transform-origin:
    bottom;
}


.penguin-face {
  position: absolute;

  left: 19px;
  top: 16px;

  width: 64px;
  height: 55px;

  border-radius: 50%;

  background: #f6f3ea;

  opacity: 0;

  transform:
    scale(.25);
}


.penguin-eye {
  position: absolute;

  width: 7px;
  height: 9px;

  background: #0d1114;

  border-radius: 50%;

  top: 60px;

  opacity: 0;

  z-index: 5;
}


.penguin-eye.left {
  left: 58px;
}


.penguin-eye.right {
  right: 58px;
}


.penguin-beak {
  position: absolute;

  left: 63px;
  top: 73px;

  width: 27px;
  height: 18px;

  background: #e5a33f;

  clip-path:
    polygon(
      0 25%,
      100% 50%,
      0 100%
    );

  transform:
    scaleX(.08);

  transform-origin:
    left;

  opacity: 0;

  z-index: 6;
}


.penguin-wing {
  position: absolute;

  width: 38px;
  height: 104px;

  top: 91px;

  background: #11161b;

  border-radius:
    70% 30% 65% 35%;

  opacity: 0;

  transform-origin:
    top center;

  z-index: 1;
}


.penguin-wing.left {
  left: 6px;

  transform:
    rotate(25deg)
    scaleY(.1);
}


.penguin-wing.right {
  right: 6px;

  transform:
    rotate(-25deg)
    scaleY(.1);
}


.penguin-foot {
  position: absolute;

  width: 48px;
  height: 22px;

  top: 194px;

  background: #e5a33f;

  border-radius:
    60% 40% 55% 40%;

  opacity: 0;

  z-index: 1;
}


.penguin-foot.left {
  left: 24px;
}


.penguin-foot.right {
  right: 24px;
}


#bellyWord {
  position: absolute;

  left: 50%;
  top: 129px;

  transform:
    translateX(-50%)
    scale(.2);

  opacity: 0;

  font-weight: 800;
  font-size: 18px;

  color: #20252a;

  z-index: 8;

  white-space: nowrap;
}


#penguinShadow {
  position: absolute;

  left: 50%;
  top: 65%;

  width: 115px;
  height: 20px;

  transform:
    translateX(-50%)
    scaleX(.2);

  border-radius: 50%;

  filter: blur(5px);

  background:
    rgba(0, 0, 0, .22);

  opacity: 0;
}


.penguin-spark {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: #334d63;

  opacity: 0;

  pointer-events: none;
}

/* =========================
   ORCA ANIMATION
   ========================= */

#orca {
  position: absolute;

  left: 50%;
  top: 20%;

  width: 270px;
  height: 135px;

  transform:
    translate(-50%, -50%)
    scale(.1);

  transform-origin: center;

  opacity: 0;
  pointer-events: none;
  z-index: 25;
}


/* Longer, sleeker body */

.orca-body {
  position: absolute;

  left: 48px;
  top: 28px;

  width: 185px;
  height: 72px;

  background: #111820;

  border-radius:
    58% 48% 46% 52%
    / 52% 48% 52% 48%;

  overflow: hidden;

  z-index: 3;

  transform:
    skewX(-4deg);
}


/* White underside */

.orca-white-patch {
  position: absolute;

  left: 52px;
  top: 49px;

  width: 118px;
  height: 30px;

  background: #f6f6f2;

  border-radius:
    60% 40% 55% 45%;

  transform:
    rotate(-3deg);
}


/* Eye patch */

.orca-eye-patch {
  position: absolute;

  right: 28px;
  top: 13px;

  width: 42px;
  height: 17px;

  background: #f6f6f2;

  border-radius:
    55% 45% 50% 50%;

  transform:
    rotate(-8deg);
}


/* Eye */

.orca-eye {
  position: absolute;

  right: 17px;
  top: 31px;

  width: 5px;
  height: 5px;

  background: #05080a;

  border-radius: 50%;
}


/* Subtle mouth */

.orca-mouth {
  position: absolute;

  right: 3px;
  top: 50px;

  width: 32px;
  height: 2px;

  background:
    rgba(255,255,255,.55);

  border-radius: 50%;
}


/* Taller but curved-looking dorsal fin */

.orca-dorsal-fin {
  position: absolute;

  left: 128px;
  top: 0;

  width: 42px;
  height: 60px;

  background: #111820;

  clip-path:
    polygon(
      15% 100%,
      42% 5%,
      58% 0,
      88% 100%
    );

  transform:
    rotate(-3deg);

  transform-origin:
    bottom center;

  z-index: 2;
}


/* Better flipper */

.orca-flipper {
  position: absolute;

  left: 145px;
  top: 78px;

  width: 58px;
  height: 22px;

  background: #10171f;

  border-radius:
    70% 18% 75% 25%;

  transform:
    rotate(24deg);

  transform-origin:
    left center;

  z-index: 4;
}


/* Tail connector */

.orca-tail {
  position: absolute;

  left: 13px;
  top: 44px;

  width: 56px;
  height: 46px;

  transform-origin:
    right center;

  z-index: 2;
}


.orca-tail::after {
  content: "";

  position: absolute;

  right: -4px;
  top: 17px;

  width: 40px;
  height: 15px;

  background: #111820;

  border-radius:
    70% 30% 50% 50%;

  transform:
    rotate(-2deg);
}


/* Tail flukes */

.orca-tail-fin {
  position: absolute;

  left: 0;

  width: 42px;
  height: 26px;

  background: #111820;

  border-radius:
    75% 20% 70% 25%;
}


.orca-tail-fin.top {
  top: 0;

  transform:
    rotate(-25deg);
}


.orca-tail-fin.bottom {
  bottom: 0;

  transform:
    rotate(25deg);
}


/* Word position */

#orcaWord,
.orca-word {
  position: absolute;

  left: 130px;
  top: 62px;

  transform:
    translate(-50%, -50%)
    scale(.2);

  opacity: 0;

  color: white;

  font-weight: 800;
  font-size: 18px;

  white-space: nowrap;

  z-index: 8;
}

.orca-swarm-copy {
  position: absolute;

  left: 50%;
  top: 45%;

  width: 270px;
  height: 135px;

  transform-origin: center;

  pointer-events: none;
}

.firework-particle {
  position: absolute;

  border-radius: 50%;

  background: white;

  box-shadow:
    0 0 8px white,
    0 0 16px currentColor;

  pointer-events: none;

  z-index: 50;
}